@luxalgo/vela 0.5.1 → 0.5.2

package/dist/vela.global.js

@@ -482,14 +482,15 @@ var Vela = (function (exports) {
     svg24('<path d="m10 20-1.25-2.5L6 16"/><path d="M10 4 8.75 6.5 6 8"/><path d="m14 20 1.25-2.5L18 16"/><path d="m14 4 1.25 2.5L18 8"/><path d="m17 10-5 5-5-5"/><path d="M4 12h16"/>')
   );
   registerIcon("chevron-right", S('<path d="m6 3.5 4.5 4.5L6 12.5"/>'));
+  registerIcon("chevron-left", S('<path d="M10 3.5 5.5 8l4.5 4.5"/>'));
   registerIcon("chevron-down", S('<path d="M3.5 6 8 10.5 12.5 6"/>'));
   registerIcon("chevron-up", S('<path d="M3.5 10 8 5.5 12.5 10"/>'));
   registerIcon("chevrons-right", S('<path d="m4 3.5 4.5 4.5L4 12.5"/><path d="m8.5 3.5 4.5 4.5-4.5 4.5"/>'));
   registerIcon("chevrons-left", S('<path d="M12 3.5 7.5 8l4.5 4.5"/><path d="M7.5 3.5 3 8l4.5 4.5"/>'));
   registerIcon("check", S('<path d="m2.8 8.4 3.4 3.4 7-7.6"/>'));
   registerIcon("close", S('<path d="m3.8 3.8 8.4 8.4M12.2 3.8l-8.4 8.4"/>'));
-  registerIcon("eye", S('<path d="M1.5 8s2.5-4.2 6.5-4.2S14.5 8 14.5 8 12 12.2 8 12.2 1.5 8 1.5 8z"/><circle cx="8" cy="8" r="1.8"/>'));
-  registerIcon("eye-off", S('<path d="M1.5 8s2.5-4.2 6.5-4.2S14.5 8 14.5 8 12 12.2 8 12.2 1.5 8 1.5 8z" opacity="0.45"/><path d="m3 13 10-10"/>'));
+  registerIcon("eye", S('<path d="M1.5 8s2.5-5.4 6.5-5.4S14.5 8 14.5 8 12 13.4 8 13.4 1.5 8 1.5 8z"/><circle cx="8" cy="8" r="1.8"/>'));
+  registerIcon("eye-off", S('<path d="M1.5 8s2.5-5.4 6.5-5.4S14.5 8 14.5 8 12 13.4 8 13.4 1.5 8 1.5 8z" opacity="0.45"/><path d="m3 13 10-10"/>'));
   registerIcon("lock", S('<rect x="3.2" y="7" width="9.6" height="6.6" rx="1.2"/><path d="M5.6 7V5.2a2.4 2.4 0 0 1 4.8 0V7"/>'));
   registerIcon("unlock", S('<rect x="3.2" y="7" width="9.6" height="6.6" rx="1.2"/><path d="M5.6 7V5.2a2.4 2.4 0 0 1 4.7-.7"/>'));
   registerIcon("trash", S('<path d="M2.5 4.3h11M6.2 4.3V3.1a1 1 0 0 1 1-1h1.6a1 1 0 0 1 1 1v1.2M4.2 4.3l.5 9.1a1.15 1.15 0 0 0 1.15 1.1h4.3a1.15 1.15 0 0 0 1.15-1.1l.5-9.1M6.5 7v4.5M9.5 7v4.5"/>'));
@@ -512,6 +513,7 @@ var Vela = (function (exports) {
   registerIcon("star-filled", S('<path d="M8 2.2l1.75 3.55 3.9.55-2.8 2.75.65 3.9L8 11.1l-3.5 1.85.65-3.9-2.8-2.75 3.9-.55z"/>', 'fill="currentColor"'));
   registerIcon("grip", S('<circle cx="6" cy="3.5" r="1"/><circle cx="10" cy="3.5" r="1"/><circle cx="6" cy="8" r="1"/><circle cx="10" cy="8" r="1"/><circle cx="6" cy="12.5" r="1"/><circle cx="10" cy="12.5" r="1"/>', 'fill="currentColor" stroke="none"'));
   registerIcon("kebab", S('<circle cx="8" cy="3.2" r="1.2"/><circle cx="8" cy="8" r="1.2"/><circle cx="8" cy="12.8" r="1.2"/>', 'fill="currentColor" stroke="none"'));
+  registerIcon("burger", S('<path d="M2.5 4.5h11M2.5 8h11M2.5 11.5h11"/>'));
   registerIcon("reset", S('<rect x="6" y="6" width="4" height="4" rx="0.8"/><path d="M2.2 8a5.8 5.8 0 1 0 1.9-4.3L2.2 5.3"/><path d="M2.2 2.2v3.1h3.1"/>'));
   registerIcon("pane-collapse", S('<path d="M2.6 9.4h4v4M13.4 6.6h-4v-4"/><path d="m9.4 6.6 4.2-4.2M2.4 13.6l4.2-4.2"/>'));
   registerIcon("pane-expand", S('<path d="M9.8 2.4h3.8v3.8M6.2 13.6H2.4V9.8"/><path d="m13.6 2.4-4.4 4.4M2.4 13.6l4.4-4.4"/>'));
@@ -1890,10 +1892,10 @@ var Vela = (function (exports) {
   }
 
   // src/core/drawings/types/FixedRangeVolumeProfile.ts
-  var OUTSIDE_UP = `${BULLISH}BF`;
-  var OUTSIDE_DOWN = `${BEARISH}BF`;
-  var VA_UP = `${BULLISH}66`;
-  var VA_DOWN = `${BEARISH}66`;
+  var OUTSIDE_UP = `${BULLISH}66`;
+  var OUTSIDE_DOWN = `${BEARISH}66`;
+  var VA_UP = `${BULLISH}BF`;
+  var VA_DOWN = `${BEARISH}BF`;
   function defaultFrvpStyle() {
     return {
       rows: 24,
@@ -1911,7 +1913,8 @@ var Vela = (function (exports) {
       valColor: NEUTRAL,
       valStyle: "solid",
       showPoc: true,
-      pocColor: ACCENT,
+      pocColor: void 0,
+      // theme contrast ink until the user picks a color
       pocStyle: "solid",
       showDevelopingPoc: false,
       developingPocColor: ACCENT,
@@ -7053,6 +7056,47 @@ var Vela = (function (exports) {
   };
 
   // src/chart-types/registry.ts
+  function normalizeSettingsRow(r) {
+    switch (r.kind) {
+      case "row":
+        return { label: r.label, toggle: r.toggle, controls: r.controls, when: r.when };
+      case "toggle": {
+        const controls = [];
+        if (r.number) controls.push({ kind: "number", ...r.number });
+        for (const c of r.colors ?? []) controls.push({ kind: "color", ...c });
+        if (r.width) controls.push({ kind: "width", ...r.width });
+        return { label: r.label, toggle: { key: r.key, defval: r.defval }, controls, when: r.when };
+      }
+      case "number":
+        return { label: r.label, controls: [{ kind: "number", key: r.key, label: r.label, defval: r.defval, min: r.min, max: r.max, step: r.step }], when: r.when };
+      case "color":
+        return { label: r.label, controls: [{ kind: "color", key: r.key, label: r.label, defval: r.defval }], when: r.when };
+      case "select":
+        return { label: r.label, controls: [{ kind: "select", key: r.key, label: r.label, options: r.options, defval: r.defval }], when: r.when };
+      case "range":
+        return {
+          label: r.label,
+          controls: [
+            { kind: "number", key: r.minKey, label: `${r.label} \u2014 min`, defval: r.defval, min: r.min, max: r.max, step: r.step, placeholder: r.placeholder },
+            { kind: "hint", text: "\u2013" },
+            { kind: "number", key: r.maxKey, label: `${r.label} \u2014 max`, defval: r.defval, min: r.min, max: r.max, step: r.step, placeholder: r.placeholder }
+          ],
+          when: r.when
+        };
+    }
+  }
+  function settingsRowValueKeys(r) {
+    if (r.kind === "heading" || r.kind === "header") return [];
+    const n = normalizeSettingsRow(r);
+    const keys = [];
+    if (n.toggle) keys.push({ key: n.toggle.key, type: "boolean", defval: n.toggle.defval });
+    for (const c of n.controls) {
+      if (c.kind === "hint") continue;
+      if (c.kind === "color" || c.kind === "select") keys.push({ key: c.key, type: "string", defval: c.defval });
+      else keys.push({ key: c.key, type: "number", defval: c.defval });
+    }
+    return keys;
+  }
   function settingsRowVisible(when, bag) {
     if (!when) return true;
     const conds = Array.isArray(when) ? when : [when];
@@ -7157,6 +7201,9 @@ var Vela = (function (exports) {
       this.barTransform = null;
       // ── chart-type data engines (SDK): one lazily-created engine per style id ──
       this.typeEngines = /* @__PURE__ */ new Map();
+      /** Last-seen chart-type settings per type id (dialog edits + persisted restores) —
+       *  replayed into a data engine whenever one is (re)created. */
+      this.typeSettings = /* @__PURE__ */ new Map();
       /** The style id whose data engine is currently ACTIVE (drives suspend/resume + pokes). */
       this.activeEngineStyle = null;
       /** The chart's current price style (tracked from the renderer's change events + initial read). */
@@ -7219,7 +7266,10 @@ var Vela = (function (exports) {
       this.renderer.onRemoveIndicator((id) => this.removeIndicator(id));
       this.renderer.onToggleIndicatorVisible?.((id, visible) => this.setVisible(id, visible));
       this.paneActionUnsub = this.renderer.onPaneAction?.((a) => this.handlePaneAction(a)) ?? null;
-      this.renderer.onChartTypeSettingsChange?.((typeId, values) => this.typeEngines.get(typeId)?.onSettings?.(values));
+      this.renderer.onChartTypeSettingsChange?.((typeId, values) => {
+        this.typeSettings.set(typeId, values);
+        this.typeEngines.get(typeId)?.onSettings?.(values);
+      });
       this.renderer.onMoveIndicator?.((id, target) => this.moveIndicator(id, target));
       this.renderer.onThemeSelect?.((name) => this.setTheme(resolveTheme(name)));
       this.viewportUnsub = this.renderer.onViewportChange((range) => this.onViewportChange(range));
@@ -7707,6 +7757,8 @@ var Vela = (function (exports) {
       if (!def?.dataEngine) return;
       const engine = def.dataEngine();
       this.typeEngines.set(id, engine);
+      const stored = this.typeSettings.get(id);
+      if (stored) engine.onSettings?.(stored);
       engine.start({
         symbol: this.config.market.symbol ?? "TEST",
         timeframe: this.config.market.timeframe ?? "60",
@@ -8178,6 +8230,7 @@ var Vela = (function (exports) {
       return {
         id: record.id,
         title: record.title,
+        ...d.shortTitle ? { shorttitle: d.shortTitle } : {},
         overlay: d.overlay,
         paneHint: d.paneHint,
         native: { type: record.native.type },
@@ -8638,6 +8691,28 @@ var Vela = (function (exports) {
     setLegendActions(provider) {
       this.renderer.setLegendActions?.(provider);
     }
+    /**
+     * Replace the indicator legend's fold toggle with a host action (or restore it with
+     * `null`) — multi-chart shells point the chip at their indicator overview instead of
+     * unfolding rows in place. Silent no-op on a renderer without a foldable legend.
+     */
+    setLegendOverviewAction(action) {
+      this.renderer.setLegendOverviewAction?.(action);
+      return this;
+    }
+    /** Whether the active renderer can open a per-indicator settings dialog. */
+    get supportsIndicatorSettings() {
+      return typeof this.renderer.openIndicatorSettings === "function";
+    }
+    /**
+     * Open one indicator's settings dialog — the programmatic twin of the legend gear
+     * (see {@link supportsIndicatorSettings}). Silent no-op without the seam or for an
+     * unknown id.
+     */
+    openIndicatorSettings(indicatorId) {
+      this.renderer.openIndicatorSettings?.(indicatorId);
+      return this;
+    }
     /**
      * Export the current chart as a PNG data URL, or null if the active renderer
      * doesn't support it (warns). DOM overlays (tables, legend) are not included.
@@ -8684,6 +8759,10 @@ var Vela = (function (exports) {
     onCrosshairMove(cb) {
       return this.renderer.onCrosshairMove(cb);
     }
+    /** Touch long-press on a price or time axis strip — silent no-op without the seam. */
+    onAxisLongPress(cb) {
+      return this.renderer.onAxisLongPress?.(cb) ?? (() => void 0);
+    }
     /**
      * The current data-window readout — the hovered bar's date/time and OHLCV plus every
      * indicator's value there, each already formatted on its pane's scale (the latest bar when
@@ -8749,6 +8828,13 @@ var Vela = (function (exports) {
       this.renderer.setSettingsSections?.(sections);
       return this;
     }
+    /** Tell the renderer's own chrome which size class the host shell is in —
+     *  `'mobile'` switches its dialogs/toolbars to the touch-first presentation.
+     *  Silent no-op on a renderer without adaptive chrome. */
+    setLayoutMode(mode) {
+      this.renderer.setLayoutMode?.(mode);
+      return this;
+    }
   };
 
   // src/core/renderer-defaults.ts
@@ -9700,7 +9786,7 @@ var Vela = (function (exports) {
       const doc = anchor.ownerDocument;
       tip = doc.createElement("div");
       tip.textContent = text;
-      tip.style.cssText = "position:absolute;z-index:25;pointer-events:none;background:var(--vela-bg);border:1px solid var(--vela-border);color:var(--vela-fg);border-radius:var(--vela-radius-md);padding:4px 9px;box-shadow:var(--vela-shadow);font:var(--vela-font-size-md) var(--vela-font);" + (opts.wrap ? "max-width:260px;" : "white-space:nowrap;");
+      tip.style.cssText = "position:absolute;z-index:var(--vela-z-tooltip);pointer-events:none;background:var(--vela-bg);border:1px solid var(--vela-border);color:var(--vela-fg);border-radius:var(--vela-radius-md);padding:4px 9px;box-shadow:var(--vela-shadow);font:var(--vela-font-size-md) var(--vela-font);" + (opts.wrap ? "max-width:260px;" : "white-space:nowrap;");
       applyChromeTokens(tip, opts.theme());
       opts.host.appendChild(tip);
       const a = anchor.getBoundingClientRect();
@@ -9714,16 +9800,17 @@ var Vela = (function (exports) {
         tip.style.top = `${a.bottom - h.top + 6}px`;
       }
     };
-    const arm = () => {
+    const arm = (e) => {
+      if (e.pointerType !== "mouse") return;
       clear();
       timer = window.setTimeout(show, opts.delayMs ?? 700);
     };
-    anchor.addEventListener("mouseenter", arm);
-    anchor.addEventListener("mouseleave", clear);
+    anchor.addEventListener("pointerenter", arm);
+    anchor.addEventListener("pointerleave", clear);
     anchor.addEventListener("pointerdown", clear);
     return () => {
-      anchor.removeEventListener("mouseenter", arm);
-      anchor.removeEventListener("mouseleave", clear);
+      anchor.removeEventListener("pointerenter", arm);
+      anchor.removeEventListener("pointerleave", clear);
       anchor.removeEventListener("pointerdown", clear);
       clear();
     };
@@ -9790,14 +9877,22 @@ var Vela = (function (exports) {
 
   // src/renderers/shared/InputsUI.ts
   var SOURCES = ["close", "open", "high", "low", "hl2", "hlc3", "ohlc4", "volume"];
-  var STATUS_KEYFRAMES = "@keyframes vela-ind-spin{to{transform:rotate(360deg)}}@keyframes vela-ind-pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.3;transform:scale(.6)}}";
-  var LEGEND_ICON_PX = 13;
+  var STATUS_KEYFRAMES = "@keyframes vela-ind-pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.3;transform:scale(.6)}}";
+  var LEGEND_ICON_PX = 16;
+  var LEGEND_CTL_PX = 18;
+  var LEGEND_ROW_PAD_Y = 2;
+  var LEGEND_ROW_PAD_X = 6;
+  var LEGEND_TITLE_VALUES_GAP_PX = 6;
+  var LEGEND_ACTION_GAP_PX = 6;
+  var LEGEND_CTL_CSS = `cursor:pointer;display:inline-flex;align-items:center;justify-content:center;border:none;line-height:0;padding:0;width:${LEGEND_CTL_PX}px;height:${LEGEND_CTL_PX}px;border-radius:3px;box-sizing:border-box;flex:none;`;
+  var LEGEND_ROW_MIN_H = LEGEND_CTL_PX + LEGEND_ROW_PAD_Y * 2;
   var EYE_SVG = iconAt("eye", LEGEND_ICON_PX);
   var EYE_OFF_SVG = iconAt("eye-off", LEGEND_ICON_PX);
   var GEAR_SVG = iconAt("gear", LEGEND_ICON_PX);
-  var CLOSE_SVG = iconAt("close", 11);
+  var CLOSE_SVG = iconAt("close", LEGEND_ICON_PX);
   var FOLD_SVG = iconAt("chevron-up", LEGEND_ICON_PX);
   var UNFOLD_SVG = iconAt("chevron-down", LEGEND_ICON_PX);
+  var OVERVIEW_SVG = iconAt("objects", LEGEND_ICON_PX);
   var InputsUI = class {
     constructor(container, theme, paneBoundsOf) {
       this.container = container;
@@ -9818,6 +9913,8 @@ var Vela = (function (exports) {
       this.onToggleVisible = null;
       /** Host symbol picker for `input.symbol`; when set the control opens the host's ticker UI. */
       this.symbolPicker = null;
+      /** Mobile chrome: the inputs dialog opens fullscreen and the legends render compact. */
+      this.mobileLayout = false;
       /** Pane move/merge hook — when set, rows get a "Move to" menu + become drag-to-pane sources. */
       this.moveApi = null;
       /** Host-contributed legend actions, resolved PER ROW at render time (see setLegendActions). */
@@ -9839,9 +9936,18 @@ var Vela = (function (exports) {
       /** Titles switched off entirely (a settings toggle): every pane's legend container
        *  hides — rows, fold chevron and all — unlike the fold, which leaves its chip. */
       this.titlesVisible = true;
+      /** Plot values shown beside the titles chart-wide (a settings toggle); a row's own
+       *  context-menu choice ({@link LegendRow.showValues}) overrides it per indicator. */
+      this.valuesVisible = true;
+      /** Open legend-row context menu (kept so it can be torn down). */
+      this.rowMenu = null;
       /** The single fold toggle, on the price-pane legend: a bordered ^ chevron under the
        *  rows, or the bordered "˅ N" chip (N counts every pane's indicators) when folded. */
       this.foldToggle = null;
+      /** Host-provided replacement for the fold toggle (multi-chart shells route it to
+       *  their indicator overview, e.g. an object tree). While set, the legend stays
+       *  folded and the chip runs this instead of unfolding inline. */
+      this.overviewAction = null;
       /** Esc-to-close for the settings modal (bound so focus can sit anywhere). */
       this.onDialogKey = (e) => {
         if (e.key === "Escape") {
@@ -9865,6 +9971,9 @@ var Vela = (function (exports) {
       this.onMoveMenuOutside = (e) => {
         if (this.moveMenu && !this.moveMenu.contains(e.target)) this.closeMoveMenu();
       };
+      this.onRowMenuOutside = (e) => {
+        if (this.rowMenu && !this.rowMenu.contains(e.target)) this.closeRowMenu();
+      };
       if (!container.style.position) container.style.position = "relative";
       if (typeof document !== "undefined") document.addEventListener("click", this.onDocClick);
     }
@@ -9872,6 +9981,36 @@ var Vela = (function (exports) {
       this.dialogHost = host;
       if (host && getComputedStyle(host).position === "static") host.style.position = "relative";
     }
+    /** The host shell's chrome size class — mobile makes the inputs dialog fullscreen
+     *  (an open dialog re-presents on the flip) and folds the legend behind its chip by
+     *  default (a phone-width plot has no room for the rows). */
+    setLayoutMode(mode) {
+      const mobile = mode === "mobile";
+      if (mobile === this.mobileLayout) return;
+      this.mobileLayout = mobile;
+      if (this.overviewAction === null) this.legendFolded = mobile;
+      this.syncFoldToggle();
+      if (this.openId !== null) {
+        const id = this.openId;
+        this.closeOpenDialog();
+        this.openDialog(id);
+      }
+    }
+    /** Replace the fold toggle's behavior with a HOST action (or restore it with null):
+     *  the chip stays — objects icon + indicator count — but a press runs the action
+     *  (a multi-chart shell opens its indicator overview) instead of unfolding the rows,
+     *  which stay hidden while the override is in force. */
+    setLegendOverviewAction(action) {
+      if (action === this.overviewAction) return;
+      this.overviewAction = action;
+      this.legendFolded = action !== null ? true : this.mobileLayout;
+      this.syncFoldToggle();
+    }
+    /** Open the settings dialog of one indicator (the legend gear's programmatic twin) —
+     *  no-op for an unknown id. */
+    openSettingsFor(id) {
+      if (this.rows.has(id)) this.openDialog(id);
+    }
     /** Attach a themed chrome tooltip to a control, recording its disposer under `id`. */
     tip(store, id, anchor, text, wrap = false) {
       const list = store.get(id) ?? [];
@@ -9899,12 +10038,12 @@ var Vela = (function (exports) {
     }
     setTheme(theme) {
       this.theme = theme;
+      for (const lg of this.legends.values()) applyChromeTokens(lg, theme);
       for (const row of this.rows.values()) {
-        const open = row.controlsEl.style.display !== "none";
-        row.el.style.background = open ? theme.background : this.idleRowFill();
+        row.el.style.background = row.highlighted ? theme.background : this.idleRowFill();
         row.el.style.color = theme.textColor;
       }
-      if (this.foldToggle) this.foldToggle.style.background = theme.background;
+      if (this.foldToggle) this.syncFoldToggle();
     }
     /** Provide (or clear) the host symbol picker that `input.symbol` opens on activation. */
     setSymbolPicker(picker) {
@@ -9935,7 +10074,7 @@ var Vela = (function (exports) {
         btn.innerHTML = iconAt(action.icon, LEGEND_ICON_PX);
         btn.className = "vela-ind-ctl";
         btn.dataset.legendAction = action.id;
-        btn.style.cssText = "cursor:pointer;display:inline-flex;align-items:center;background:transparent;border:none;line-height:0;padding:0 1px;";
+        btn.style.cssText = LEGEND_CTL_CSS;
         btn.addEventListener("click", (e) => {
           e.stopPropagation();
           action.run();
@@ -9953,6 +10092,54 @@ var Vela = (function (exports) {
       this.titlesVisible = visible;
       this.reposition();
     }
+    /**
+     * Show/hide the plot values chart-wide (the settings dialog's Indicators → Values
+     * toggle). "All" is meant literally: per-row context-menu overrides are cleared, so
+     * every legend follows the new state.
+     */
+    setValuesVisible(visible) {
+      this.valuesVisible = visible;
+      for (const row of this.rows.values()) {
+        row.showValues = null;
+        this.renderRowValues(row);
+      }
+    }
+    /**
+     * Push the current plot values of every indicator at once (the renderer calls this per
+     * paint). Rows absent from the map (e.g. a hidden indicator) show no values. Cheap on
+     * unchanged frames: each row diffs against its last rendered values before touching DOM.
+     */
+    setPlotValues(values) {
+      for (const row of this.rows.values()) {
+        const next = values.get(row.id) ?? [];
+        const key = next.map((v) => `${v.value}|${v.color}`).join("\0");
+        if (key === row.plotValuesKey) continue;
+        row.plotValues = next;
+        row.plotValuesKey = key;
+        this.renderRowValues(row);
+      }
+    }
+    /** Whether a row currently shows its values: its own override, else the chart-wide flag. */
+    rowValuesShown(row) {
+      return row.showValues ?? this.valuesVisible;
+    }
+    /** (Re)build one row's values readout from its stored plot values + visibility. A
+     *  highlighted (hovered/selected) row shows only the title + controls — no values. */
+    renderRowValues(row) {
+      if (!this.rowValuesShown(row) || row.plotValues.length === 0 || row.highlighted) {
+        row.valuesEl.style.display = "none";
+        row.valuesEl.replaceChildren();
+        return;
+      }
+      row.valuesEl.style.display = "inline-flex";
+      row.valuesEl.replaceChildren();
+      for (const v of row.plotValues) {
+        const span = document.createElement("span");
+        span.textContent = v.value;
+        span.style.color = v.color;
+        row.valuesEl.appendChild(span);
+      }
+    }
     // ── legend move/merge (menu + drag) ─────────────────────────────────────
     /** Open the "Move to" menu for a row, anchored under its move button. */
     openMoveMenu(id, anchor) {
@@ -10004,6 +10191,48 @@ var Vela = (function (exports) {
       this.moveMenu?.remove();
       this.moveMenu = null;
     }
+    // ── legend row context menu (right-click) ───────────────────────────────
+    /** Open the row's action menu at the pointer. One entry today: the values toggle. */
+    openRowMenu(id, x, y) {
+      this.closeRowMenu();
+      this.closeMoveMenu();
+      const row = this.rows.get(id);
+      if (!row) return;
+      const menu = document.createElement("div");
+      menu.style.cssText = `position:fixed;z-index:var(--vela-z-tooltip);min-width:170px;padding:4px;border-radius:var(--vela-radius-md);background:var(--vela-surface-elev);color:${this.theme.textColor};border:1px solid var(--vela-border);box-shadow:var(--vela-shadow);font-size:var(--vela-font-size-md);`;
+      applyChromeTokens(menu, this.theme);
+      const item = document.createElement("button");
+      item.type = "button";
+      item.className = "vela-ind-menuitem";
+      item.style.cssText = "display:flex;align-items:center;gap:8px;width:100%;text-align:left;padding:6px 10px;border:none;border-radius:var(--vela-radius-sm);color:inherit;cursor:pointer;white-space:nowrap;";
+      const check = document.createElement("span");
+      check.style.cssText = "display:inline-flex;align-items:center;justify-content:center;width:14px;flex:none;line-height:0;";
+      check.innerHTML = this.rowValuesShown(row) ? CHECK_SVG : "";
+      const label = document.createElement("span");
+      label.textContent = "Indicator values";
+      item.append(check, label);
+      item.addEventListener("click", (e) => {
+        e.stopPropagation();
+        this.closeRowMenu();
+        row.showValues = !this.rowValuesShown(row);
+        this.renderRowValues(row);
+      });
+      menu.appendChild(item);
+      document.body.appendChild(menu);
+      const mw = menu.offsetWidth || 180;
+      const mh = menu.offsetHeight || 40;
+      menu.style.left = `${Math.min(x, window.innerWidth - mw - 6)}px`;
+      menu.style.top = `${Math.min(y, window.innerHeight - mh - 6)}px`;
+      this.rowMenu = menu;
+      setTimeout(() => {
+        if (typeof document !== "undefined") document.addEventListener("pointerdown", this.onRowMenuOutside, true);
+      }, 0);
+    }
+    closeRowMenu() {
+      if (typeof document !== "undefined") document.removeEventListener("pointerdown", this.onRowMenuOutside, true);
+      this.rowMenu?.remove();
+      this.rowMenu = null;
+    }
     /** Move a legend row to another pane (indicator merged/moved), tidying an emptied container. */
     setPane(id, paneId) {
       const row = this.rows.get(id);
@@ -10025,7 +10254,8 @@ var Vela = (function (exports) {
       if (!lg) {
         lg = document.createElement("div");
         lg.dataset.velaPane = paneId;
-        lg.style.cssText = "position:absolute;left:10px;z-index:5;display:flex;flex-direction:column;align-items:flex-start;gap:3px;pointer-events:none;font:12px -apple-system,Segoe UI,sans-serif;";
+        lg.style.cssText = "position:absolute;left:10px;z-index:5;display:flex;flex-direction:column;align-items:flex-start;gap:0;pointer-events:none;font:12px -apple-system,Segoe UI,sans-serif;";
+        applyChromeTokens(lg, this.theme);
         this.positionLegend(lg, paneId);
         this.container.appendChild(lg);
         this.legends.set(paneId, lg);
@@ -10061,15 +10291,16 @@ var Vela = (function (exports) {
      */
     syncFoldToggle() {
       const count = this.rows.size;
-      if (count < 2) {
+      const minRows = this.overviewAction !== null || this.mobileLayout ? 1 : 2;
+      if (count < minRows) {
         const wasFolded = this.legendFolded;
-        this.legendFolded = false;
+        if (count > 0) this.legendFolded = false;
         if (this.foldToggle) {
           this.foldToggle.remove();
           this.foldToggle = null;
           this.disposeTips(this.rowTips, "fold");
         }
-        if (wasFolded) this.reposition();
+        if (wasFolded && count > 0) this.reposition();
         return;
       }
       let btn = this.foldToggle;
@@ -10077,25 +10308,30 @@ var Vela = (function (exports) {
         btn = document.createElement("button");
         btn.type = "button";
         btn.className = "vela-ind-fold";
-        this.tip(this.rowTips, "fold", btn, () => this.legendFolded ? "Show indicator legend" : "Hide indicator legend");
+        this.tip(this.rowTips, "fold", btn, () => this.overviewAction !== null ? "Indicators" : this.legendFolded ? "Show indicator legend" : "Hide indicator legend");
         btn.addEventListener("click", () => {
+          if (this.overviewAction !== null) {
+            this.overviewAction();
+            return;
+          }
           this.legendFolded = !this.legendFolded;
           this.syncFoldToggle();
         });
         this.foldToggle = btn;
       }
       const folded = this.legendFolded;
-      btn.setAttribute("aria-label", folded ? "Show indicator legend" : "Hide indicator legend");
-      btn.style.cssText = `pointer-events:auto;display:inline-flex;align-items:center;gap:4px;background:${this.theme.background};border:1px solid var(--vela-border);border-radius:4px;padding:2px 6px;margin-top:6px;cursor:pointer;font:inherit;line-height:0;`;
+      btn.setAttribute("aria-label", this.overviewAction !== null ? "Indicators" : folded ? "Show indicator legend" : "Hide indicator legend");
+      const ink = this.theme.textColor;
+      btn.style.cssText = `pointer-events:auto;display:inline-flex;align-items:center;gap:4px;background:${this.theme.background};color:${ink};border:1px solid ${this.theme.borderColor};border-radius:4px;padding:2px 6px;margin-top:6px;cursor:pointer;font:inherit;line-height:0;`;
       btn.replaceChildren();
       const icon2 = document.createElement("span");
-      icon2.style.cssText = "display:inline-flex;align-items:center;line-height:0;";
-      icon2.innerHTML = folded ? UNFOLD_SVG : FOLD_SVG;
+      icon2.style.cssText = "display:inline-flex;align-items:center;line-height:0;opacity:0.7;";
+      icon2.innerHTML = this.overviewAction !== null ? OVERVIEW_SVG : folded ? UNFOLD_SVG : FOLD_SVG;
       btn.appendChild(icon2);
       if (folded) {
         const label = document.createElement("span");
         label.textContent = String(count);
-        label.style.cssText = "font-weight:600;line-height:normal;font-size:12px;color:var(--vela-fg-bright);";
+        label.style.cssText = `font-weight:600;line-height:normal;font-size:12px;color:${ink};`;
         btn.appendChild(label);
       }
       this.legendFor("price").appendChild(btn);
@@ -10103,9 +10339,11 @@ var Vela = (function (exports) {
     }
     /** Create or update an indicator's legend row (in the legend for its pane). */
     upsert(id, title, inputs, values, paneId = "price", opts = {}) {
+      const settingsTitle = opts.settingsTitle ?? title;
       const existing = this.rows.get(id);
       if (existing) {
         existing.title = title;
+        existing.settingsTitle = settingsTitle;
         existing.inputs = inputs;
         existing.values = { ...values };
         existing.titleEl.textContent = title;
@@ -10118,8 +10356,7 @@ var Vela = (function (exports) {
       }
       ensureDialogStyles();
       const el = document.createElement("div");
-      el.style.cssText = `pointer-events:auto;display:flex;align-items:center;gap:6px;background:${this.idleRowFill()};border-radius:4px;padding:2px 7px;margin-left:-7px;color:${this.theme.textColor};user-select:none;-webkit-user-select:none;`;
-      el.addEventListener("mouseenter", () => this.setRowHighlighted(id, true));
+      el.style.cssText = `pointer-events:auto;display:flex;align-items:center;background:${this.idleRowFill()};border-radius:4px;padding:${LEGEND_ROW_PAD_Y}px ${LEGEND_ROW_PAD_X}px;margin-left:-${LEGEND_ROW_PAD_X}px;min-height:${LEGEND_ROW_MIN_H}px;box-sizing:border-box;color:${this.theme.textColor};user-select:none;-webkit-user-select:none;`;
       el.addEventListener("mouseleave", () => {
         if (this.selectedId !== id) this.setRowHighlighted(id, false);
       });
@@ -10139,11 +10376,16 @@ var Vela = (function (exports) {
         e.preventDefault();
         this.onRemove?.(id);
       });
+      el.addEventListener("contextmenu", (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        this.openRowMenu(id, e.clientX, e.clientY);
+      });
       const statusEl = document.createElement("span");
       statusEl.style.cssText = "display:none;box-sizing:border-box;flex:none;";
-      el.appendChild(statusEl);
       const titleWrap = document.createElement("span");
       titleWrap.style.cssText = "white-space:nowrap;";
+      titleWrap.addEventListener("mouseenter", () => this.setRowHighlighted(id, true));
       const titleEl = document.createElement("span");
       titleEl.textContent = title;
       titleEl.style.cssText = "font-weight:600;";
@@ -10155,6 +10397,11 @@ var Vela = (function (exports) {
         titleWrap.appendChild(beta);
       }
       el.appendChild(titleWrap);
+      const valuesEl = document.createElement("span");
+      valuesEl.style.cssText = `display:none;align-items:center;gap:5px;margin-left:${LEGEND_TITLE_VALUES_GAP_PX}px;white-space:nowrap;font-variant-numeric:tabular-nums;`;
+      el.appendChild(valuesEl);
+      const controlsEl = document.createElement("span");
+      controlsEl.style.cssText = `display:none;align-items:center;gap:${LEGEND_ACTION_GAP_PX}px;flex:none;margin-left:${LEGEND_ACTION_GAP_PX}px;`;
       let eyeEl = null;
       if (this.onToggleVisible) {
         const eye = document.createElement("button");
@@ -10163,16 +10410,14 @@ var Vela = (function (exports) {
         this.tip(this.rowTips, id, eye, () => this.rows.get(id)?.hidden ? "Show" : "Hide");
         eye.innerHTML = EYE_SVG;
         eye.className = "vela-ind-ctl";
-        eye.style.cssText = "cursor:pointer;display:none;align-items:center;background:transparent;border:none;line-height:0;padding:0 1px;";
+        eye.style.cssText = LEGEND_CTL_CSS;
         eye.addEventListener("click", () => {
           const row = this.rows.get(id);
           this.onToggleVisible?.(id, Boolean(row?.hidden));
         });
-        el.appendChild(eye);
+        controlsEl.appendChild(eye);
         eyeEl = eye;
       }
-      const controlsEl = document.createElement("span");
-      controlsEl.style.cssText = "display:none;align-items:center;gap:6px;";
       if (inputs.length > 0) {
         const gear = document.createElement("button");
         gear.type = "button";
@@ -10180,7 +10425,7 @@ var Vela = (function (exports) {
         this.tip(this.rowTips, id, gear, "Settings");
         gear.innerHTML = GEAR_SVG;
         gear.className = "vela-ind-ctl";
-        gear.style.cssText = "cursor:pointer;display:inline-flex;align-items:center;background:transparent;border:none;line-height:0;padding:0 1px;";
+        gear.style.cssText = LEGEND_CTL_CSS;
         gear.addEventListener("click", () => this.openDialog(id));
         controlsEl.appendChild(gear);
       }
@@ -10191,7 +10436,7 @@ var Vela = (function (exports) {
         this.tip(this.rowTips, id, mv, "Move to pane");
         mv.innerHTML = iconAt("move", LEGEND_ICON_PX);
         mv.className = "vela-ind-ctl";
-        mv.style.cssText = "cursor:pointer;display:inline-flex;align-items:center;background:transparent;border:none;line-height:0;padding:0 1px;";
+        mv.style.cssText = LEGEND_CTL_CSS;
         mv.addEventListener("click", (e) => {
           e.stopPropagation();
           this.openMoveMenu(id, mv);
@@ -10208,12 +10453,13 @@ var Vela = (function (exports) {
       this.tip(this.rowTips, id, close, "Remove indicator");
       close.innerHTML = CLOSE_SVG;
       close.className = "vela-ind-close";
-      close.style.cssText = "cursor:pointer;display:inline-flex;align-items:center;background:transparent;border:none;color:var(--vela-fg-muted);line-height:0;padding:0 1px;";
+      close.style.cssText = LEGEND_CTL_CSS;
       close.addEventListener("click", () => this.onRemove?.(id));
       controlsEl.appendChild(close);
       el.appendChild(controlsEl);
+      el.appendChild(statusEl);
       this.attach(this.legendFor(paneId), el, !!opts.native);
-      this.rows.set(id, { id, title, inputs, values: { ...values }, el, titleEl, statusEl, paneId, hidden: false, eyeEl, controlsEl, extrasEl, native: !!opts.native });
+      this.rows.set(id, { id, title, settingsTitle, inputs, values: { ...values }, el, titleEl, statusEl, valuesEl, plotValues: [], plotValuesKey: "", showValues: null, highlighted: false, paneId, hidden: false, eyeEl, controlsEl, extrasEl, native: !!opts.native });
       this.syncFoldToggle();
     }
     /** Place a row in its pane's legend — native rows PREPEND (pinned to the top), Pine rows append. */
@@ -10227,24 +10473,31 @@ var Vela = (function (exports) {
       if (row) row.values = { ...row.values, ...values };
     }
     /**
-     * Reflect an indicator's live status in its legend row: `'loading'` shows a spinner (a fetch is
-     * in flight), `'live'` a pulsing dot (live-updating), `'idle'` nothing. Rendered left of the title.
+     * Reflect an indicator's live status in its legend row: `'loading'` shows three pulsing
+     * dots (a fetch is in flight — the same load affordance as the chart's own bar-load dots,
+     * at legend scale), `'live'` a pulsing dot, `'idle'` nothing. Rendered at the row's right end.
      */
     setStatus(id, status) {
       const row = this.rows.get(id);
       if (!row) return;
       const el = row.statusEl;
+      el.replaceChildren();
       if (status === "idle") {
-        el.style.display = "none";
-        el.style.animation = "none";
+        el.style.cssText = "display:none;box-sizing:border-box;flex:none;";
         return;
       }
-      this.ensureStatusKeyframes();
       if (status === "loading") {
-        el.style.cssText = `display:inline-block;box-sizing:border-box;flex:none;width:11px;height:11px;border-radius:50%;border:2px solid var(--vela-border-strong);border-top-color:var(--vela-fg-bright);animation:vela-ind-spin .7s linear infinite;`;
-      } else {
-        el.style.cssText = `display:inline-block;box-sizing:border-box;flex:none;width:8px;height:8px;border-radius:50%;background:${this.theme.upColor};animation:vela-ind-pulse 1.2s ease-in-out infinite;`;
+        el.style.cssText = "display:inline-flex;align-items:center;gap:3px;box-sizing:border-box;flex:none;";
+        for (let i = 0; i < 3; i += 1) {
+          const dot = document.createElement("span");
+          dot.style.cssText = "width:4px;height:4px;border-radius:50%;background:currentColor;opacity:0.15;flex:none;";
+          dot.animate?.([{ opacity: 0.12 }, { opacity: 0.55 }], { duration: 800, iterations: Infinity, direction: "alternate", easing: "ease-in-out", delay: -i * 260 });
+          el.appendChild(dot);
+        }
+        return;
       }
+      this.ensureStatusKeyframes();
+      el.style.cssText = `display:inline-block;box-sizing:border-box;flex:none;width:8px;height:8px;border-radius:50%;background:${this.theme.upColor};animation:vela-ind-pulse 1.2s ease-in-out infinite;`;
     }
     /** Inject the status keyframes once (idempotent). */
     ensureStatusKeyframes() {
@@ -10263,8 +10516,8 @@ var Vela = (function (exports) {
       if (row.eyeEl) {
         row.eyeEl.innerHTML = visible ? EYE_SVG : EYE_OFF_SVG;
         row.eyeEl.setAttribute("aria-label", visible ? "Hide" : "Show");
-        row.eyeEl.style.display = !visible || row.controlsEl.style.display !== "none" ? "inline-flex" : "none";
       }
+      this.syncRowActions(row);
     }
     /**
      * Select a legend row (outlining it) and clear any previous selection, so at most one
@@ -10277,17 +10530,36 @@ var Vela = (function (exports) {
       this.setRowHighlighted(id, true);
     }
     /**
-     * Show or hide a row's outline and eye/gear/✕ controls together — driven by both hover and
-     * selection, so an idle (unhovered, unselected) row shows just its title. Exception: a hidden
-     * indicator keeps its eye visible even when idle, so it can be un-hidden without hovering.
+     * Show or hide a row's outline and eye/gear/✕ controls together — driven by title
+     * hover and selection (plot values do not open the chip). An idle unselected row
+     * shows just its title (+ values). Exception: a hidden indicator keeps its eye
+     * visible even when idle, so it can be un-hidden without hovering.
      */
     setRowHighlighted(id, highlighted) {
       const row = this.rows.get(id);
       if (!row) return;
+      row.highlighted = highlighted;
+      this.renderRowValues(row);
       row.el.style.boxShadow = highlighted ? `inset 0 0 0 1px ${this.neutralBorder()}` : "none";
       row.el.style.background = highlighted ? this.theme.background : this.idleRowFill();
-      row.controlsEl.style.display = highlighted ? "inline-flex" : "none";
-      if (row.eyeEl) row.eyeEl.style.display = highlighted || row.hidden ? "inline-flex" : "none";
+      this.syncRowActions(row);
+    }
+    /**
+     * Reveal the action cluster (or just the eye for a hidden indicator). Non-eye
+     * buttons only appear while highlighted; the eye keeps its inline-flex from
+     * construction and is shown/hidden with the cluster container.
+     */
+    syncRowActions(row) {
+      const open = row.highlighted;
+      row.controlsEl.style.display = open || row.hidden ? "inline-flex" : "none";
+      for (const child of Array.from(row.controlsEl.children)) {
+        if (!(child instanceof HTMLElement) || child === row.eyeEl) continue;
+        if (child === row.extrasEl) {
+          child.style.display = open ? "contents" : "none";
+          continue;
+        }
+        child.style.display = open ? "inline-flex" : "none";
+      }
     }
     /** Drop the current selection outline, if any. */
     clearSelection() {
@@ -10315,6 +10587,7 @@ var Vela = (function (exports) {
     destroy() {
       this.closeDialog();
       this.closeMoveMenu();
+      this.closeRowMenu();
       for (const id of [...this.rowTips.keys()]) this.disposeTips(this.rowTips, id);
       for (const id of [...this.extrasTips.keys()]) this.disposeTips(this.extrasTips, id);
       for (const lg of this.legends.values()) lg.remove();
@@ -10370,6 +10643,7 @@ var Vela = (function (exports) {
       const card = document.createElement("div");
       card.className = "vela-ind-dialog";
       card.style.cssText = `display:flex;flex-direction:column;width:fit-content;min-width:min(360px,90%);max-width:min(640px,94%);max-height:82%;background:${t.background};border:1px solid ${border};border-radius:var(--vela-radius-lg);box-shadow:var(--vela-shadow-dialog);color:${fg};color-scheme:${scheme};font:13px ${font};overflow:hidden;`;
+      if (this.mobileLayout) card.style.cssText += "width:100%;min-width:0;max-width:none;height:100%;max-height:none;border:none;border-radius:0;";
       applyChromeTokens(card, t);
       card.addEventListener("keydown", (e) => {
         if (e.key !== "Escape") e.stopPropagation();
@@ -10377,7 +10651,7 @@ var Vela = (function (exports) {
       const header = document.createElement("div");
       header.style.cssText = "display:flex;justify-content:space-between;align-items:flex-start;gap:12px;padding:16px 20px 12px;flex:0 0 auto;";
       const hTitle = document.createElement("span");
-      hTitle.textContent = row.title;
+      hTitle.textContent = row.settingsTitle;
       hTitle.style.cssText = "font-weight:600;font-size:16px;line-height:1.3;";
       const closeBtn = document.createElement("button");
       closeBtn.type = "button";
@@ -10389,7 +10663,7 @@ var Vela = (function (exports) {
       closeBtn.addEventListener("click", () => this.closeDialog());
       header.append(hTitle, closeBtn);
       card.appendChild(header);
-      makeDialogDraggable(card, header, { closeSelector: "button" });
+      if (!this.mobileLayout) makeDialogDraggable(card, header, { closeSelector: "button" });
       const tabs = document.createElement("div");
       tabs.style.cssText = `display:flex;gap:16px;padding:0 20px;border-bottom:1px solid ${border};flex:0 0 auto;`;
       const tab = document.createElement("div");
@@ -10409,7 +10683,7 @@ var Vela = (function (exports) {
           section.appendChild(gh);
         }
         const grid = document.createElement("div");
-        grid.style.cssText = "display:grid;grid-template-columns:minmax(140px,auto) auto auto 1fr;align-items:center;column-gap:12px;row-gap:22px;";
+        grid.style.cssText = this.mobileLayout ? "display:grid;grid-template-columns:minmax(0,1fr) auto auto max-content;align-items:center;column-gap:12px;row-gap:22px;" : "display:grid;grid-template-columns:minmax(140px,auto) auto auto 1fr;align-items:center;column-gap:12px;row-gap:22px;";
         for (const inputRow of group.rows) this.buildInputRow(grid, inputRow, row);
         section.appendChild(grid);
         body.appendChild(section);
@@ -10858,10 +11132,14 @@ var Vela = (function (exports) {
   var CHECK_SVG = iconAt("check", 12);
   var SELECT_CHEVRON_SVG = iconAt("chevron-down", 16);
   var DIALOG_STYLE_ID = "vela-ind-dialog-styles";
+  var DIALOG_STYLE_REV = "10";
   function ensureDialogStyles() {
-    if (typeof document === "undefined" || document.getElementById(DIALOG_STYLE_ID)) return;
-    const s = document.createElement("style");
+    if (typeof document === "undefined") return;
+    const existing = document.getElementById(DIALOG_STYLE_ID);
+    if (existing?.dataset.rev === DIALOG_STYLE_REV) return;
+    const s = existing ?? document.createElement("style");
     s.id = DIALOG_STYLE_ID;
+    s.dataset.rev = DIALOG_STYLE_REV;
     s.textContent = `
 .vela-ind-dialog input[type=color]{-webkit-appearance:none;appearance:none;}
 .vela-ind-dialog input[type=color]::-webkit-color-swatch-wrapper{padding:0;}
@@ -10875,19 +11153,19 @@ var Vela = (function (exports) {
 .vela-ind-dialog ::-webkit-scrollbar-track{background:transparent;}
 .vela-ind-hint{background:var(--vela-hover);color:var(--vela-fg-muted);transition:background var(--vela-dur-fast) ease,color var(--vela-dur-fast) ease;}
 .vela-ind-hint:hover{background:var(--vela-active);color:var(--vela-fg-bright);}
-.vela-ind-ctl{color:var(--vela-fg-muted);transition:color var(--vela-dur-fast) ease;}
-.vela-ind-ctl:hover{color:var(--vela-fg-bright);}
-.vela-ind-close{transition:color var(--vela-dur-fast) ease;}
-.vela-ind-close:hover{color:var(--vela-danger) !important;}
-.vela-ind-fold{color:var(--vela-fg-muted);transition:color var(--vela-dur-fast) ease,border-color var(--vela-dur-fast) ease;}
-.vela-ind-fold:hover{color:var(--vela-fg-bright);border-color:var(--vela-border-strong);}
+.vela-ind-ctl,.vela-ind-close{background-color:transparent;color:inherit;transition:color var(--vela-dur-fast) ease,background-color var(--vela-dur-fast) ease;}
+.vela-ind-ctl svg,.vela-ind-close svg{width:${LEGEND_ICON_PX}px;height:${LEGEND_ICON_PX}px;display:block;flex:none;stroke-width:1;}
+.vela-ind-ctl:hover{background-color:var(--vela-hover-strong);}
+.vela-ind-close:hover{color:var(--vela-danger) !important;background-color:var(--vela-hover-strong);}
+.vela-ind-fold{transition:border-color var(--vela-dur-fast) ease,opacity var(--vela-dur-fast) ease;}
+.vela-ind-fold:hover{border-color:var(--vela-border-strong);opacity:0.9;}
 .vela-ind-menuitem{background:transparent;transition:background var(--vela-dur-fast) ease;}
 .vela-ind-menuitem:hover{background:var(--vela-hover-strong);}
 .vela-ind-btn{cursor:pointer;padding:7px 14px;border-radius:var(--vela-radius-md);border:1px solid transparent;background:transparent;color:var(--vela-fg-muted);font-weight:600;font-size:13px;font-family:inherit;transition:background var(--vela-dur-fast) ease,color var(--vela-dur-fast) ease,opacity var(--vela-dur-fast) ease;}
 .vela-ind-btn:hover{background:var(--vela-hover);color:var(--vela-fg-bright);}
 .vela-ind-btn-primary{padding:7px 16px;border-color:var(--vela-selected-bg);background:var(--vela-selected-bg);color:var(--vela-selected-fg);}
 .vela-ind-btn-primary:hover{background:var(--vela-selected-bg);color:var(--vela-selected-fg);opacity:0.85;}`;
-    document.head.appendChild(s);
+    if (!existing) document.head.appendChild(s);
   }
   var TIMEFRAME_OPTIONS = [
     { value: "", label: "Chart" },
@@ -11580,14 +11858,7 @@ var Vela = (function (exports) {
       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 ?? []) {
@@ -13731,6 +14002,11 @@ void main() {
   var FLING_MIN_SPEED = 0.04;
   var FLING_STALE_MS = 60;
   var DRAG_SLOP = 2;
+  var LONG_PRESS_MS = 350;
+  var TOUCH_SLOP = 8;
+  var TOUCH_TAP_SLOP = 14;
+  var DOUBLE_TAP_MS = 350;
+  var DOUBLE_TAP_SLOP = 30;
   var TIME_SCALE_K = 4e-3;
   var WHEEL_ZOOM_K = 25e-4;
   function wheelZoomAnchor(coords, cursorX, rightEdge) {
@@ -13751,6 +14027,12 @@ void main() {
   function effectiveSnapMode(momentaryOverride, sticky) {
     return momentaryOverride ? "strong" : sticky;
   }
+  function pinchBarSpacing(startBarSpacing, startDist, dist) {
+    return clampBarSpacing(startBarSpacing * (dist / Math.max(1, startDist)));
+  }
+  function pinchPinnedRightOffset(anchorLogical, barCount, width, x, pxPerBar) {
+    return anchorLogical - (barCount - 1) + (width - x) / pxPerBar;
+  }
   var InputController = class {
     constructor(deps) {
       this.deps = deps;
@@ -13784,6 +14066,23 @@ void main() {
       // 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();
       };
@@ -13805,6 +14104,15 @@ void main() {
         }
         if (e.button !== 0) return;
         const { x, y } = this.local(e);
+        if (e.pointerType === "touch") {
+          if (this.touches.size === 1 && this.dragging && (this.region === "data" || this.region === "crosshair")) {
+            this.touches.set(e.pointerId, { x, y });
+            this.beginPinch(e);
+            return;
+          }
+          if (this.touches.size >= 1) return;
+          this.touches.set(e.pointerId, { x, y });
+        }
         this.deps.drawingsClearTransient?.();
         this.dragging = true;
         this.moved = false;
@@ -13830,6 +14138,9 @@ void main() {
         if (this.region === "price") this.deps.beginPriceScale(x, y);
         else if (this.region === "separator") this.deps.beginPaneResize(y);
         else if (this.region === "data") this.verticalPan = this.deps.beginPricePan(y);
+        if (e.pointerType === "touch" && (this.region === "data" || this.region === "price" || this.region === "time")) {
+          this.startLongPress(x, y, this.region);
+        }
         this.lastX = x;
         this.lastT = e.timeStamp;
         this.vx = 0;
@@ -13839,28 +14150,42 @@ void main() {
         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;
@@ -13877,14 +14202,44 @@ void main() {
           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;
@@ -13893,11 +14248,20 @@ void main() {
             this.deps.fling(-this.vx / pitch);
           }
         }
-        this.dragging = false;
-        try {
-          this.el?.releasePointerCapture(e.pointerId);
-        } catch {
-        }
+        const wasTap = wasTouch && tapRelease;
+        this.endGesture(e);
+        if (wasTouch) this.deps.onPointerMove(null, null);
+        if (wasTap) this.registerTap(e.timeStamp, x, y);
+      };
+      /** The browser took the pointer back (system gesture, palm rejection, tab switch):
+       *  drop the gesture where it is — no click, no fling, no stuck `dragging`. */
+      this.onCancel = (e) => {
+        if (e.pointerType === "touch") this.touches.delete(e.pointerId);
+        this.cancelLongPress();
+        if (!this.dragging) return;
+        if (this.region === "drawing" && !Number.isNaN(this.cursorX)) this.deps.drawingsPointerUp?.(this.cursorX, this.cursorY);
+        if (this.region === "crosshair" || e.pointerType === "touch") this.deps.onPointerMove(null, null);
+        this.endGesture(e);
       };
       this.onLeave = () => {
         this.cursorX = NaN;
@@ -13906,12 +14270,7 @@ void main() {
       };
       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();
@@ -13932,10 +14291,17 @@ void main() {
     }
     attach(el) {
       this.el = el;
+      if (el.style !== void 0) {
+        el.style.touchAction = "none";
+        el.style.userSelect = "none";
+        el.style.setProperty("-webkit-user-select", "none");
+        el.style.setProperty("-webkit-touch-callout", "none");
+      }
       el.addEventListener("pointerdown", this.onDown);
       el.addEventListener("pointermove", this.onMove);
       el.addEventListener("pointerup", this.onUp);
       el.addEventListener("pointerleave", this.onLeave);
+      el.addEventListener("pointercancel", this.onCancel);
       el.addEventListener("dblclick", this.onDblClick);
       el.addEventListener("wheel", this.onWheel, { passive: false });
       el.addEventListener("mousedown", this.onMiddleGuard);
@@ -13943,6 +14309,7 @@ void main() {
       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;
@@ -13950,14 +14317,18 @@ void main() {
       const win = el.ownerDocument?.defaultView;
       win?.removeEventListener("keydown", this.onModifier);
       win?.removeEventListener("keyup", this.onModifier);
+      win?.removeEventListener("contextmenu", this.onTouchContextMenu, true);
       el.removeEventListener("pointerdown", this.onDown);
       el.removeEventListener("pointermove", this.onMove);
       el.removeEventListener("pointerup", this.onUp);
       el.removeEventListener("pointerleave", this.onLeave);
+      el.removeEventListener("pointercancel", this.onCancel);
       el.removeEventListener("dblclick", this.onDblClick);
       el.removeEventListener("wheel", this.onWheel);
       el.removeEventListener("mousedown", this.onMiddleGuard);
       el.removeEventListener("auxclick", this.onMiddleGuard);
+      this.cancelLongPress();
+      this.touches.clear();
       this.el = null;
     }
     local(e) {
@@ -13981,6 +14352,59 @@ void main() {
     snapMode(e) {
       return effectiveSnapMode(e.ctrlKey || e.metaKey, this.deps.drawingsSnapMode?.() ?? "off");
     }
+    /** Arm the long-press timer for a data-area → crosshair or axis → sheet hold;
+     *  movement past TOUCH_SLOP or a second finger cancels it. */
+    startLongPress(x, y, region) {
+      this.cancelLongPress();
+      this.lpTimer = setTimeout(() => {
+        this.lpTimer = null;
+        if (!this.dragging || this.region !== region) return;
+        if (region === "data") {
+          this.region = "crosshair";
+          this.deps.onPointerMove(x, y);
+          return;
+        }
+        this.region = "axis-sheet";
+        this.moved = true;
+        this.deps.onAxisLongPress?.(region, x, y);
+      }, LONG_PRESS_MS);
+    }
+    cancelLongPress() {
+      if (this.lpTimer !== null) clearTimeout(this.lpTimer);
+      this.lpTimer = null;
+    }
+    /** Two fingers down: freeze the view and re-base the gesture as an anchored pinch. */
+    beginPinch(e) {
+      this.cancelLongPress();
+      if (this.region === "crosshair") this.deps.onPointerMove(null, null);
+      const coords = this.deps.getCoords();
+      const vp = coords.getViewport();
+      this.deps.apply(vp);
+      const [a, b] = [...this.touches.values()];
+      this.pinchStartDist = Math.max(1, Math.hypot(a.x - b.x, a.y - b.y));
+      this.pinchStartBarSpacing = vp.barSpacing;
+      this.pinchAnchorLogical = coords.xToLogical((a.x + b.x) / 2);
+      this.region = "pinch";
+      this.dragging = true;
+      this.moved = true;
+      this.vx = 0;
+      this.capture(e.pointerId);
+    }
+    /** Track both fingers: distance ratio zooms, the live midpoint pans (anchor pinned under it). */
+    applyPinch() {
+      const coords = this.deps.getCoords();
+      const pts = [...this.touches.values()];
+      if (pts.length < 2) return;
+      const [a, b] = pts;
+      const barSpacing = pinchBarSpacing(this.pinchStartBarSpacing, this.pinchStartDist, Math.hypot(a.x - b.x, a.y - b.y));
+      const vp = coords.getViewport();
+      const pitchScale = vp.barSpacing > 0 ? coords.pxPerBar() / vp.barSpacing : 1;
+      const midX = (a.x + b.x) / 2;
+      this.deps.apply({
+        barSpacing,
+        rightOffset: pinchPinnedRightOffset(this.pinchAnchorLogical, coords.barCount, coords.width, midX, barSpacing * pitchScale)
+      });
+    }
     /** Capture defensively: a synthetic/already-released pointer can't be captured, and
      *  the move/up pair still routes through the element listeners without it. */
     capture(pointerId) {
@@ -13989,6 +14413,35 @@ void main() {
       } catch {
       }
     }
+    /** Pair clean taps into a double-tap — the touch equivalent of dblclick (same
+     *  routing: axis taps reset that axis' view, a plot tap toggles pane maximize). */
+    registerTap(t, x, y) {
+      const paired = this.lastTapT > 0 && t - this.lastTapT <= DOUBLE_TAP_MS && Math.hypot(x - this.lastTapX, y - this.lastTapY) <= DOUBLE_TAP_SLOP;
+      if (paired) {
+        this.lastTapT = 0;
+        this.doubleActivate(this.lastTapX, this.lastTapY);
+        return;
+      }
+      this.lastTapT = t;
+      this.lastTapX = x;
+      this.lastTapY = y;
+    }
+    endGesture(e) {
+      this.dragging = false;
+      try {
+        this.el?.releasePointerCapture(e.pointerId);
+      } catch {
+      }
+    }
+    /** Shared double-click / double-tap routing, by the region under the point. */
+    doubleActivate(x, y) {
+      if (this.deps.drawingsDblClick?.(x, y)) return;
+      const region = this.regionAt(x, y);
+      if (region === "price") this.deps.resetPriceScale(x, y);
+      else if (region === "separator") this.deps.resetPaneSize(y);
+      else if (region === "time") this.deps.resetView();
+      else this.deps.dataDblClick(x, y);
+    }
   };
 
   // src/renderers/native/core/KeyboardController.ts
@@ -15802,11 +16255,19 @@ void main() {
       const y = dataH + (fullH - dataH) / 2;
       const tr = coords.visibleTimeRange();
       const offset = tzOffsetMs((tr.from + tr.to) / 2, scene.timezone);
-      for (const tick of timeTicks(tr.from, tr.to, 8, offset)) {
-        const x = coords.timeToX(tick.time);
-        if (x < 20 || x > dataW - 20) continue;
-        ctx.fillText(tick.label, x, y);
-      }
+      const target = Math.max(3, Math.min(8, Math.floor(dataW / 64)));
+      const ticks = timeTicks(tr.from, tr.to, target, offset).map((tick) => ({ ...tick, x: coords.timeToX(tick.time), half: ctx.measureText(tick.label).width / 2 })).filter((tick) => tick.x >= 20 && tick.x <= dataW - 20);
+      const GAP = 12;
+      const placed = [];
+      const put = (tick) => {
+        const l = tick.x - tick.half;
+        const r = tick.x + tick.half;
+        if (!placed.every((p) => r + GAP <= p.l || l - GAP >= p.r)) return;
+        placed.push({ l, r });
+        ctx.fillText(tick.label, tick.x, y);
+      };
+      for (const tick of ticks) if (tick.major) put(tick);
+      for (const tick of ticks) if (!tick.major) put(tick);
       ctx.textAlign = "start";
     }
   };
@@ -15908,10 +16369,10 @@ void main() {
     }
     /** The synced ghost: a dimmed vertical line at the bar the renderer resolved as
      *  CONTAINING the foreign time (+ horizontal line when a comparable price came
-     *  along), with that bar's time chip in this chart's own timezone. The snap
-     *  happened upstream (`externalCrossPx`, floor-to-containing-bar) — this method
-     *  only draws. No price chip — the ghost answers "when", the local crosshair
-     *  answers "where". */
+     *  along), with that bar's time chip in this chart's own timezone and — when the
+     *  level resolved — the price chip on the right axis. The snap happened upstream
+     *  (`externalCrossPx`, floor-to-containing-bar) — this method only draws. Chips
+     *  render slightly dimmed so the ghost still reads as foreign. */
     drawExternal(ctx, ext, scene, coords, theme) {
       const cs = scene.style.crosshair;
       const dataW = coords.width;
@@ -15935,7 +16396,20 @@ void main() {
       ctx.setLineDash([]);
       ctx.lineWidth = 1;
       ctx.globalAlpha = 0.8;
-      this.chip(ctx, x, dataH + 1, formatStamp(ext.time, scene.timezone), cs.labelBackground ?? theme.borderColor, "center", true, theme.background);
+      const chipBg = cs.labelBackground ?? theme.borderColor;
+      if (ext.y != null && ext.price != null) {
+        let pane;
+        for (const p of scene.panes.values()) {
+          if (ext.y >= p.bounds.top && ext.y <= p.bounds.top + p.bounds.height) {
+            pane = p;
+            break;
+          }
+        }
+        if (pane) {
+          this.chip(ctx, dataW + 1, ext.y, formatAxisValue(pane.scale, pane.bounds.height, ext.price, percentScaleFor(scene, pane), scene.priceMintick, pane.axisFormat), chipBg, "left", false, theme.background);
+        }
+      }
+      this.chip(ctx, x, dataH + 1, formatStamp(ext.time, scene.timezone), chipBg, "center", true, theme.background);
       ctx.globalAlpha = 1;
     }
     /** A soft band + a brighter crisp center line over the hovered separator, so it reads as
@@ -16296,6 +16770,7 @@ void main() {
       swatch.style.background = `linear-gradient(${v}, ${v}), ${CHECKER2}`;
     };
     paint();
+    trigger.addEventListener("vela-sync", paint);
     trigger.addEventListener("click", (e) => {
       e.stopPropagation();
       if (openPopover && openPopover.trigger === trigger) {
@@ -16331,6 +16806,101 @@ void main() {
     closeOpen();
   }
 
+  // src/renderers/native/chrome/WidthField.ts
+  var WIDTH_FIELD_OPTIONS = [1, 2, 3, 4, 5];
+  var STYLE_ID3 = "vela-width-field";
+  function ensureStyles3() {
+    if (typeof document === "undefined" || document.getElementById(STYLE_ID3)) return;
+    const st = document.createElement("style");
+    st.id = STYLE_ID3;
+    st.textContent = `
+.vela-width-field{height:28px;padding:0 8px;border:1px solid var(--vela-border-strong);border-radius:var(--vela-radius-sm);background:var(--vela-surface-elev);cursor:pointer;display:inline-flex;align-items:center;gap:8px;flex:none;color:var(--vela-fg);font-family:inherit;outline:none;}
+.vela-width-field:hover{border-color:var(--vela-fg-muted);}
+.vela-width-field-pop{position:fixed;z-index:6000;background:var(--vela-surface-overlay);border:1px solid var(--vela-border);border-radius:var(--vela-radius-lg);box-shadow:var(--vela-shadow);padding:4px;display:flex;flex-direction:column;gap:1px;color:var(--vela-fg);}
+.vela-width-field-item{display:flex;align-items:center;gap:8px;min-width:96px;padding:5px 8px;border:none;border-radius:5px;background:transparent;color:inherit;cursor:pointer;text-align:left;font:inherit;}
+.vela-width-field-item:hover{background:var(--vela-hover-strong);}
+.vela-width-field-item[data-active='1']{background:var(--vela-active);}
+`;
+    document.head.appendChild(st);
+  }
+  function lineGlyph(width) {
+    return `<svg width="22" height="14" viewBox="0 0 22 14" fill="none"><line x1="2" y1="7" x2="20" y2="7" stroke="currentColor" stroke-width="${width}" stroke-linecap="round"/></svg>`;
+  }
+  var CHEVRON = `<svg width="8" height="5" viewBox="0 0 8 5" fill="none"><path d="M1 1l3 3 3-3" stroke="#868a96" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>`;
+  var openPopover2 = null;
+  function closeOpen2() {
+    if (!openPopover2) return;
+    document.removeEventListener("pointerdown", openPopover2.onOutside, true);
+    window.removeEventListener("resize", openPopover2.reflow, true);
+    openPopover2.el.remove();
+    openPopover2 = null;
+  }
+  function place2(pop, trigger) {
+    const r = trigger.getBoundingClientRect();
+    const w = pop.offsetWidth;
+    const h = pop.offsetHeight;
+    let left = r.right - w;
+    let top = r.bottom + 6;
+    if (left < 6) left = 6;
+    if (left + w > window.innerWidth - 6) left = window.innerWidth - w - 6;
+    if (top + h > window.innerHeight - 6) top = r.top - h - 6;
+    if (top < 6) top = 6;
+    pop.style.left = `${Math.round(left)}px`;
+    pop.style.top = `${Math.round(top)}px`;
+  }
+  function widthField(theme, getVal, onVal) {
+    ensureStyles3();
+    const trigger = document.createElement("button");
+    trigger.type = "button";
+    trigger.className = "vela-width-field";
+    const paint = () => {
+      trigger.innerHTML = `<span style="display:flex;">${lineGlyph(getVal())}</span><span style="display:flex;">${CHEVRON}</span>`;
+    };
+    paint();
+    trigger.addEventListener("click", (e) => {
+      e.stopPropagation();
+      if (openPopover2 && openPopover2.trigger === trigger) {
+        closeOpen2();
+        return;
+      }
+      closeOpen2();
+      const pop = document.createElement("div");
+      pop.className = "vela-width-field-pop";
+      applyChromeTokens(pop, theme);
+      pop.style.font = `var(--vela-font-size-md) ${theme.fontFamily}`;
+      pop.addEventListener("pointerdown", (ev) => ev.stopPropagation());
+      for (const w of WIDTH_FIELD_OPTIONS) {
+        const item = document.createElement("button");
+        item.type = "button";
+        item.className = "vela-width-field-item";
+        item.dataset.active = w === getVal() ? "1" : "0";
+        item.innerHTML = `<span style="display:flex;flex:none;">${lineGlyph(w)}</span><span style="flex:1;font-variant-numeric:tabular-nums;">${w}px</span>`;
+        item.addEventListener("click", (ev) => {
+          ev.stopPropagation();
+          closeOpen2();
+          onVal(w);
+          paint();
+        });
+        pop.appendChild(item);
+      }
+      document.body.appendChild(pop);
+      place2(pop, trigger);
+      const onOutside = (ev) => {
+        const t = ev.target;
+        if (pop.contains(t) || trigger.contains(t)) return;
+        closeOpen2();
+      };
+      const reflow = () => place2(pop, trigger);
+      setTimeout(() => document.addEventListener("pointerdown", onOutside, true), 0);
+      window.addEventListener("resize", reflow, true);
+      openPopover2 = { el: pop, trigger, onOutside, reflow };
+    });
+    return trigger;
+  }
+  function closeWidthPopover() {
+    closeOpen2();
+  }
+
   // src/renderers/native/chrome/SettingsDialog.ts
   var BUILTIN_STYLE_LABELS = {
     candles: "Candles",
@@ -16413,6 +16983,30 @@ void main() {
    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);
   }
@@ -16439,6 +17033,8 @@ void main() {
       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. */
@@ -16457,15 +17053,27 @@ void main() {
     }
     setTheme(theme) {
       this.theme = theme;
-      if (this.root) {
-        const cfg = this.config;
-        const oc = this.onChange;
-        const oi = this.onImport;
-        const orst = this.onReset;
-        const section = this.activeSection;
-        this.close();
-        if (cfg && oc) this.open(cfg, oc, oi ?? void 0, orst ?? void 0, section ?? void 0);
-      }
+      this.reopenIfLive();
+    }
+    /** The host shell's chrome size class — mobile presents the dialog fullscreen with
+     *  the tab rail behind a burger sidebar and the TOC as top tabs. An open dialog
+     *  re-presents in place, on the same tab. */
+    setLayoutMode(mode) {
+      const mobile = mode === "mobile";
+      if (mobile === this.mobileLayout) return;
+      this.mobileLayout = mobile;
+      this.reopenIfLive();
+    }
+    /** Rebuild an open dialog in place (theme swap, layout-mode flip) on the same tab. */
+    reopenIfLive() {
+      if (!this.root) return;
+      const cfg = this.config;
+      const oc = this.onChange;
+      const oi = this.onImport;
+      const orst = this.onReset;
+      const section = this.activeSection;
+      this.close();
+      if (cfg && oc) this.open(cfg, oc, oi ?? void 0, orst ?? void 0, section ?? void 0);
     }
     isOpen() {
       return this.root !== null;
@@ -16487,18 +17095,37 @@ void main() {
       this.onImport = onImport ?? null;
       this.onReset = onReset ?? null;
       ensureControlStyles();
+      const mobile = this.mobileLayout;
       const scrim = document.createElement("div");
-      scrim.style.cssText = "position:absolute;inset:0;z-index:21;display:flex;align-items:flex-start;justify-content:center;background:transparent;padding-top:8vh;pointer-events:auto;";
+      scrim.style.cssText = "position:absolute;inset:0;z-index:var(--vela-z-dialog);display:flex;align-items:flex-start;justify-content:center;background:transparent;padding-top:8vh;pointer-events:auto;";
+      if (mobile) {
+        scrim.classList.add("vela-sd-mobile");
+        scrim.style.paddingTop = "0";
+        scrim.style.alignItems = "stretch";
+      }
       scrim.addEventListener("mousedown", (e) => {
         if (e.target === scrim) this.close();
       });
       const dlg = document.createElement("div");
       dlg.style.cssText = `width:fit-content;min-width:min(560px,94vw);max-width:min(720px,94vw);max-height:70vh;display:flex;flex-direction:column;background:${SETTINGS_SURFACE};border:1px solid ${SETTINGS_BORDER};border-radius:var(--vela-radius-lg);box-shadow:var(--vela-shadow-dialog);color:${SETTINGS_TEXT};font:13px var(--vela-font);overflow:hidden;cursor:default;`;
+      if (mobile) dlg.style.cssText += "width:100%;min-width:0;max-width:none;max-height:none;flex:1 1 auto;border:none;border-radius:0;";
       const header = document.createElement("div");
       header.style.cssText = `display:flex;justify-content:space-between;align-items:center;padding:9px 9px 9px 16px;border-bottom:1px solid ${SETTINGS_BORDER};flex:0 0 auto;user-select:none;`;
+      if (mobile) header.style.paddingLeft = "8px";
       const hTitle = document.createElement("span");
       hTitle.textContent = "Chart settings";
       hTitle.style.cssText = "font-size:17px;font-weight:600;letter-spacing:0.2px;";
+      if (mobile) hTitle.style.cssText += "flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;";
+      let toggleRail = null;
+      if (mobile) {
+        const burger = document.createElement("button");
+        burger.type = "button";
+        burger.className = "vela-sd-burger";
+        burger.innerHTML = iconAt("burger", 16);
+        burger.title = "Sections";
+        burger.addEventListener("click", () => toggleRail?.());
+        header.append(burger);
+      }
       const closeBtn = document.createElement("button");
       closeBtn.type = "button";
       closeBtn.innerHTML = iconAt("close", 15);
@@ -16506,8 +17133,8 @@ void main() {
       closeBtn.className = "vela-sd-close";
       closeBtn.addEventListener("click", () => this.close());
       header.append(hTitle, closeBtn);
-      header.style.cursor = "move";
-      {
+      if (!mobile) {
+        header.style.cursor = "move";
         let sx = 0, sy = 0, ox = 0, oy = 0, dragging = false;
         header.addEventListener("pointerdown", (e) => {
           if (e.target?.closest(".vela-sd-close")) return;
@@ -16688,12 +17315,24 @@ void main() {
       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]) {
@@ -16728,6 +17367,10 @@ void main() {
           p.tab.classList.toggle("on", i === idx);
         });
         this.activeSection = panes[idx]?.title ?? null;
+        if (mobile) {
+          hTitle.textContent = panes[idx]?.title ?? "Chart settings";
+          toggleRail?.(false);
+        }
       };
       panes.forEach((p, i) => {
         p.tab.addEventListener("click", () => activate(i));
@@ -16735,10 +17378,11 @@ void main() {
         paneHost.appendChild(p.el);
       });
       this.tabs = panes.map((p, i) => ({ title: p.title, show: () => activate(i) }));
-      const wanted = section === void 0 ? -1 : panes.findIndex((p) => p.title.toLowerCase() === section.toLowerCase());
+      const wanted = section !== void 0 ? panes.findIndex((p) => p.title.toLowerCase() === section.toLowerCase()) : panes.findIndex((p) => p.style === config.series.style && !p.tab.classList.contains("vela-sd-tab-sub"));
       activate(wanted >= 0 ? wanted : 0);
       this.syncTypeTabs?.(config.series.style);
       shell.append(rail, paneHost);
+      if (railScrim) shell.append(railScrim);
       dlg.appendChild(shell);
       dlg.appendChild(this.footer(config));
       scrim.appendChild(dlg);
@@ -16755,6 +17399,7 @@ void main() {
     }
     close() {
       closeColorPopover();
+      closeWidthPopover();
       this.root?.remove();
       this.root = null;
       this.tabs = [];
@@ -16795,20 +17440,12 @@ void main() {
       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);
@@ -16831,7 +17468,8 @@ void main() {
       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);
@@ -16848,7 +17486,7 @@ void main() {
     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);
       }
@@ -16856,60 +17494,109 @@ void main() {
         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 (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;
       }
-      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));
+      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
@@ -16922,7 +17609,7 @@ void main() {
       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);
@@ -17017,8 +17704,8 @@ void main() {
           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);
       }
@@ -17084,6 +17771,14 @@ void main() {
      */
     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;";
@@ -17120,9 +17815,11 @@ void main() {
       }
     }
     /** A bare color swatch input (for toggle-row right groups / swatch pairs). */
-    swatch(value, onChange) {
+    /** With `get`, the field reads its value live (and repaints on 'vela-sync') —
+     *  duplicate-keyed rows stay honest when another row edits the shared key. */
+    swatch(value, onChange, get) {
       let current = value;
-      return colorField(this.theme, () => current, (v) => {
+      return colorField(this.theme, () => get ? get() : current, (v) => {
         current = v;
         onChange(v);
       });
@@ -17174,8 +17871,11 @@ void main() {
     }
     /** An enable row: checkbox + label in the label column, dependent controls in the
      *  shared control column; the control group dims and ignores input while the toggle
-     *  is off. With no controls it reads like a plain toggle row (full-width in the grid). */
-    toggleRow(label, value, onToggle, controls) {
+     *  is off. With no controls it reads like a plain toggle row (full-width in the grid).
+     *  With `get`, the row re-reads its state on a 'vela-sync' event — the seam that
+     *  keeps DUPLICATE-KEYED rows honest (several `when`-gated rows over one bag key,
+     *  only one visible at a time; see `typeRow`). */
+    toggleRow(label, value, onToggle, controls, get) {
       const wrap = document.createElement("div");
       const cb = document.createElement("button");
       cb.type = "button";
@@ -17195,6 +17895,12 @@ void main() {
         wrap.style.cssText = "display:flex;align-items:center;gap:8px;min-height:22px;";
         wrap.append(cb, lbl);
         cb.addEventListener("click", () => onToggle(cbToggle()));
+        if (get) {
+          wrap.addEventListener("vela-sync", () => {
+            checked = get();
+            cb.classList.toggle("on", checked);
+          });
+        }
         return wrap;
       }
       wrap.className = "vela-sd-row";
@@ -17205,8 +17911,11 @@ void main() {
       box.style.cssText = "display:flex;align-items:center;gap:6px;";
       for (const c of controls) box.appendChild(c);
       const syncDim = (on) => {
-        box.style.opacity = on ? "1" : "0.4";
-        box.style.pointerEvents = on ? "" : "none";
+        for (const c of controls) {
+          if (c.dataset.sdSelfGated === "1") continue;
+          c.style.opacity = on ? "1" : "0.4";
+          c.style.pointerEvents = on ? "" : "none";
+        }
       };
       syncDim(value);
       cb.addEventListener("click", () => {
@@ -17214,6 +17923,13 @@ void main() {
         onToggle(v);
         syncDim(v);
       });
+      if (get) {
+        wrap.addEventListener("vela-sync", () => {
+          checked = get();
+          cb.classList.toggle("on", checked);
+          syncDim(checked);
+        });
+      }
       wrap.append(left, box);
       return wrap;
     }
@@ -17233,96 +17949,6 @@ void main() {
       wrap.appendChild(ni);
       return wrap;
     }
-    /** Inline Auto/Manual row (Resolution, Text size): a mode dropdown + a value input greyed out in Auto. */
-    autoManualRow(label, isAuto, value, min, max, unit, onMode, onValue) {
-      const { wrap } = this.row(label);
-      const box = document.createElement("div");
-      box.style.cssText = "display:flex;align-items:center;gap:6px;flex:0 0 auto;";
-      const sel = document.createElement("select");
-      sel.className = "vela-sd-select";
-      for (const [val, lbl] of AUTO_MANUAL_OPTS) {
-        const o = document.createElement("option");
-        o.value = val;
-        o.textContent = lbl;
-        if (val === "auto" === isAuto) o.selected = true;
-        sel.appendChild(o);
-      }
-      const ni = document.createElement("input");
-      ni.type = "number";
-      ni.min = String(min);
-      ni.max = String(max);
-      ni.step = "1";
-      ni.value = String(value);
-      ni.className = "vela-sd-number";
-      const unitLbl = document.createElement("span");
-      unitLbl.textContent = unit;
-      unitLbl.style.cssText = "opacity:0.6;";
-      const syncDisabled = (auto) => {
-        ni.disabled = auto;
-        ni.style.opacity = auto ? "0.4" : "1";
-      };
-      syncDisabled(isAuto);
-      sel.addEventListener("change", () => {
-        const auto = sel.value === "auto";
-        onMode(auto);
-        syncDisabled(auto);
-      });
-      ni.addEventListener("input", () => {
-        const n = Number(ni.value);
-        if (Number.isFinite(n)) onValue(n);
-      });
-      box.append(sel, ni, unitLbl);
-      wrap.appendChild(box);
-      return wrap;
-    }
-    /** A row whose control area holds several inline controls (e.g. show + color + width). */
-    inlineRow(label, controls) {
-      const { wrap } = this.row(label);
-      const box = document.createElement("div");
-      box.style.cssText = "display:flex;align-items:center;gap:6px;flex:0 0 auto;";
-      for (const c of controls) box.appendChild(c);
-      wrap.appendChild(box);
-      return wrap;
-    }
-    /** A small dimmed hint span (e.g. the ≥ / ≤ between filter inputs). */
-    hint(text) {
-      const s = document.createElement("span");
-      s.textContent = text;
-      s.style.cssText = "opacity:0.5;font-size:12px;";
-      return s;
-    }
-    /** A bare color input (for inline groups). */
-    colorInput(value, onChange) {
-      const ci = document.createElement("input");
-      ci.type = "color";
-      ci.value = toHex6(value);
-      ci.style.cssText = "cursor:pointer;width:34px;height:22px;border:none;background:transparent;padding:0;flex:0 0 auto;";
-      ci.addEventListener("input", () => onChange(ci.value));
-      return ci;
-    }
-    /** A bare compact number input (for inline groups). */
-    numberInput(value, min, max, step, onChange) {
-      const ni = document.createElement("input");
-      ni.type = "number";
-      ni.value = String(value);
-      ni.min = String(min);
-      ni.max = String(max);
-      ni.step = String(step);
-      ni.className = "vela-sd-number";
-      ni.style.flex = "0 0 auto";
-      ni.addEventListener("input", () => {
-        const n = Number(ni.value);
-        if (Number.isFinite(n)) onChange(n);
-      });
-      return ni;
-    }
-    /** A small in-group heading (lighter than a top-level section divider). */
-    subheading(text) {
-      const el = document.createElement("div");
-      el.textContent = text;
-      el.style.cssText = "margin-top:4px;font-size:10.5px;font-weight:700;letter-spacing:0.03em;text-transform:uppercase;opacity:0.45;";
-      return el;
-    }
     /** A dropdown whose option values differ from their display labels. */
     selectRowLabeled(label, value, options, onChange) {
       const { wrap } = this.row(label);
@@ -17368,19 +17994,7 @@ void main() {
       foot.appendChild(resetBtn);
       return foot;
     }
-    button(label, onClick) {
-      const b = document.createElement("button");
-      b.type = "button";
-      b.textContent = label;
-      b.style.cssText = `cursor:pointer;flex:1 1 auto;${this.ctrlStyle()}padding:5px 8px;font-weight:600;`;
-      b.addEventListener("click", onClick);
-      return b;
-    }
-    ctrlStyle() {
-      return `background:var(--vela-surface-sunken);border:1px solid ${SETTINGS_BORDER};color:${SETTINGS_TEXT};border-radius:var(--vela-radius-sm);padding:3px 6px;font-size:var(--vela-font-size-md);font-family:inherit;outline:none;`;
-    }
   };
-  var AUTO_MANUAL_OPTS = [["auto", "Auto"], ["manual", "Manual"]];
   function normalizeSelectOptions(options) {
     return options.map((o) => typeof o === "string" ? [o, o] : o);
   }
@@ -17583,7 +18197,7 @@ void main() {
         return;
       }
       if (d instanceof FixedRangeVolumeProfile) {
-        this.paintFixedRangeVp(ctx, d, proj);
+        this.paintFixedRangeVp(ctx, d, proj, theme);
         this.paintLabel(ctx, d, proj, theme);
         return;
       }
@@ -18076,7 +18690,7 @@ void main() {
     /** Paint a fixed-range volume profile: horizontal histogram rows (up/down split) anchored to
      *  the left or right of the time span, optional VAH / VAL / POC levels across the range, and
      *  optional developing POC / VA polylines. Recomputes from the two anchors on every paint. */
-    paintFixedRangeVp(ctx, d, proj) {
+    paintFixedRangeVp(ctx, d, proj, theme) {
       const L = d.layout(proj);
       if (!L) return;
       const s = d.frvp;
@@ -18115,7 +18729,7 @@ void main() {
       };
       hLine(s.showVah, s.vahColor, s.vahStyle, L.vahY);
       hLine(s.showVal, s.valColor, s.valStyle, L.valY);
-      hLine(s.showPoc, s.pocColor, s.pocStyle, L.pocY);
+      hLine(s.showPoc, s.pocColor ?? contrastColor(theme.background), s.pocStyle, L.pocY);
       const devW = Math.max(1, w);
       if (s.showDevelopingPoc) {
         this.strokePolyline(ctx, L.developingPoc, {
@@ -18987,7 +19601,11 @@ void main() {
       const last = draft.anchors[draft.anchors.length - 1];
       const lx = last ? proj.xOf(last.time) : NaN;
       const ly = last ? proj.yOf(last.price, draft.paneId) ?? NaN : NaN;
-      if (draft.anchors.length < this.state.need && Math.hypot(x - lx, y - ly) > FREEHAND_SAMPLE_PX) {
+      if (Math.hypot(x - lx, y - ly) > FREEHAND_SAMPLE_PX) {
+        if (draft.anchors.length >= this.state.need) {
+          const lastIdx = draft.anchors.length - 1;
+          draft.anchors = draft.anchors.filter((_, i) => i % 2 === 0 || i === lastIdx);
+        }
         draft.anchors.push(proj.pxToPoint(x, y, draft.paneId));
       }
       this.state.cursor = proj.pxToPoint(x, y, draft.paneId);
@@ -19060,11 +19678,11 @@ void main() {
   // src/renderers/native/drawings/DrawingSettingsPopup.ts
   var BTN = 30;
   var ICON = 21;
-  var STYLE_ID3 = "vela-drawing-popup-styles";
-  function ensureStyles3() {
-    if (typeof document === "undefined" || document.getElementById(STYLE_ID3)) return;
+  var STYLE_ID4 = "vela-drawing-popup-styles";
+  function ensureStyles4() {
+    if (typeof document === "undefined" || document.getElementById(STYLE_ID4)) return;
     const s = document.createElement("style");
-    s.id = STYLE_ID3;
+    s.id = STYLE_ID4;
     s.textContent = `
 .vela-dpop input[type=color]{-webkit-appearance:none;appearance:none;border:none;padding:0;background:none;cursor:pointer;border-radius:0;}
 .vela-dpop input[type=color]::-webkit-color-swatch-wrapper{padding:0;}
@@ -19083,7 +19701,10 @@ void main() {
 .vela-dpop-btn[data-active='1']{background:var(--vela-active);color:var(--vela-fg-bright);}
 .vela-dpop-item{background:transparent;transition:background var(--vela-dur-fast) ease;}
 .vela-dpop-item:hover{background:var(--vela-hover-strong);}
-.vela-dpop-item[data-active='1']{background:var(--vela-active);}`;
+.vela-dpop-item[data-active='1']{background:var(--vela-active);}
+/* A finger needs a wider grab zone than a cursor \u2014 grow the move handle on touch-first
+   devices (the glyph stays centered; only the hit target widens). */
+@media (pointer: coarse){.vela-dpop-grip{width:${BTN + 14}px !important;}}`;
     document.head.appendChild(s);
   }
   var DrawingSettingsPopup = class {
@@ -19130,7 +19751,7 @@ void main() {
      *  `onClose` fires on an outside-click dismissal (not a programmatic close). */
     open(drawing, anchor, actions, onClose) {
       this.close();
-      ensureStyles3();
+      ensureStyles4();
       this.onClose = onClose ?? null;
       const t = this.theme;
       const schema = drawing.schema();
@@ -19156,7 +19777,14 @@ void main() {
         bar.appendChild(this.dropdown("Icon size", STAMP_SIZE_OPTIONS, sz, (s) => stampSizeIcon(s), (v) => actions.patch({ size: v }), { label: sizeLabel }));
       }
       if (paths.has("style.lineColor")) bar.appendChild(this.colorButton("Line color", BRUSH_ICON, drawing.style.lineColor || DEFAULT_DRAWING_COLOR, (v) => actions.patch({ "style.lineColor": v })));
-      if (paths.has("style.lineWidth")) bar.appendChild(this.dropdown("Line width", [1, 2, 3, 4], drawing.style.lineWidth, (w) => lineIcon(w, "solid"), (v) => actions.patch({ "style.lineWidth": v }), { label: (v) => `${v}px`, labelInTrigger: true }));
+      if (paths.has("style.lineWidth")) {
+        const wf = schema.fields.find((f) => f.path === "style.lineWidth");
+        if (wf?.kind === "number" && (wf.min ?? 1) > 1) {
+          bar.appendChild(this.widthInput("Line width", drawing.style.lineWidth, wf.min ?? 1, wf.max ?? 60, wf.step ?? 1, (v) => actions.patch({ "style.lineWidth": v })));
+        } else {
+          bar.appendChild(this.dropdown("Line width", [1, 2, 3, 4], drawing.style.lineWidth, (w) => lineIcon(w, "solid"), (v) => actions.patch({ "style.lineWidth": v }), { label: (v) => `${v}px`, labelInTrigger: true }));
+        }
+      }
       if (paths.has("style.lineStyle")) bar.appendChild(this.dropdown("Line style", LINE_STYLE_OPTIONS.map((o) => o.value), drawing.style.lineStyle, (s) => lineIcon(2, s), (v) => actions.patch({ "style.lineStyle": v }), { label: styleLabel2 }));
       if (paths.has("style.fillColor")) bar.appendChild(this.colorButton("Fill", BUCKET_ICON, effectiveFillColor(drawing, this.theme) ?? drawing.style.fillColor ?? DEFAULT_DRAWING_COLOR, (v) => actions.patch({ "style.fillColor": v })));
       const isFrvp = paths.has("frvp.rows") && drawing instanceof FixedRangeVolumeProfile;
@@ -19624,14 +20252,15 @@ void main() {
         const chk = document.createElement("input");
         chk.type = "checkbox";
         chk.checked = Boolean(s[showPath]);
-        chk.style.cssText = `accent-color:${s[colorPath]};width:15px;height:15px;flex:none;cursor:pointer;`;
+        const current = s[colorPath] ?? contrastColor(t.background);
+        chk.style.cssText = `accent-color:${current};width:15px;height:15px;flex:none;cursor:pointer;`;
         chk.addEventListener("change", () => actions.patch({ [`frvp.${showPath}`]: chk.checked }));
         const lbl = document.createElement("span");
         lbl.textContent = label;
         lbl.style.cssText = "flex:1;min-width:0;opacity:0.9;";
         const col = document.createElement("button");
         col.type = "button";
-        let cur = s[colorPath];
+        let cur = current;
         col.style.cssText = `width:18px;height:18px;flex:none;border:1px solid var(--vela-border);border-radius:0;cursor:pointer;background:${cur};padding:0;`;
         col.addEventListener("pointerdown", (e) => e.stopPropagation());
         col.addEventListener("click", (e) => {
@@ -19811,7 +20440,8 @@ void main() {
     dragHandle() {
       const b = document.createElement("button");
       b.type = "button";
-      b.style.cssText = `width:${BTN}px;height:${BTN}px;display:flex;align-items:center;justify-content:center;background:transparent;border:none;padding:0;cursor:grab;color:var(--vela-fg-faint);`;
+      b.className = "vela-dpop-grip";
+      b.style.cssText = `width:${BTN}px;height:${BTN}px;display:flex;align-items:center;justify-content:center;background:transparent;border:none;padding:0;cursor:grab;touch-action:none;color:var(--vela-fg-faint);`;
       b.innerHTML = sized(GRIP_ICON);
       b.addEventListener("pointerdown", (e) => {
         const el = this.el;
@@ -19827,6 +20457,10 @@ void main() {
         const origLeft = parseFloat(el.style.left) || 0;
         const origTop = parseFloat(el.style.top) || 0;
         b.style.cursor = "grabbing";
+        try {
+          b.setPointerCapture(e.pointerId);
+        } catch {
+        }
         const move = (ev) => {
           const w = el.offsetWidth;
           const h = el.offsetHeight;
@@ -19839,9 +20473,11 @@ void main() {
           b.style.cursor = "grab";
           window.removeEventListener("pointermove", move);
           window.removeEventListener("pointerup", up);
+          window.removeEventListener("pointercancel", up);
         };
         window.addEventListener("pointermove", move);
         window.addEventListener("pointerup", up);
+        window.addEventListener("pointercancel", up);
       });
       return b;
     }
@@ -19957,6 +20593,39 @@ void main() {
       });
       return b;
     }
+    /** An inline numeric width field for tools whose stroke range outgrows the 1–4px
+     *  ladder — the value is clamped to the schema's declared min/max on commit. */
+    widthInput(tip, value, min, max, step, onChange) {
+      const input = document.createElement("input");
+      input.type = "number";
+      input.dataset.tip = tip;
+      input.min = String(min);
+      input.max = String(max);
+      input.step = String(step);
+      input.value = String(value);
+      input.style.cssText = `width:52px;height:${BTN}px;box-sizing:border-box;flex:none;background:transparent;color:inherit;border:1px solid var(--vela-border);border-radius:5px;padding:0 4px;font:12px ${this.theme.fontFamily};font-variant-numeric:tabular-nums;outline:none;`;
+      const commit = () => {
+        const n = parseFloat(input.value);
+        if (!Number.isFinite(n)) {
+          input.value = String(value);
+          return;
+        }
+        const v = Math.min(max, Math.max(min, n));
+        input.value = String(v);
+        value = v;
+        onChange(v);
+      };
+      input.addEventListener("change", commit);
+      input.addEventListener("keydown", (e) => {
+        e.stopPropagation();
+        if (e.key === "Enter") {
+          e.preventDefault();
+          commit();
+          input.blur();
+        }
+      });
+      return input;
+    }
     /** A pick-one dropdown: the trigger shows the current value's glyph (plus an optional inline
      *  text label — e.g. `2px` — for controls that would otherwise look alike), and clicking it
      *  opens a floating list of every option so a value is one click away (no cycling through). */
@@ -20263,7 +20932,7 @@ void main() {
       this.onCollapse = options.onCollapse ?? (() => {
       });
       this.onDrawingsSync = options.onDrawingsSync ?? null;
-      ensureStyles4();
+      ensureStyles5();
       this.root = document.createElement("div");
       this.root.className = "vela-dtb";
       this.styleRoot();
@@ -20746,13 +21415,13 @@ void main() {
     }
   };
   var MAGNET_ID = "__magnet__";
-  var STYLE_ID4 = "vela-drawing-toolbar-styles";
-  function ensureStyles4() {
+  var STYLE_ID5 = "vela-drawing-toolbar-styles";
+  function ensureStyles5() {
     if (typeof document === "undefined") return;
-    let s = document.getElementById(STYLE_ID4);
+    let s = document.getElementById(STYLE_ID5);
     if (!s) {
       s = document.createElement("style");
-      s.id = STYLE_ID4;
+      s.id = STYLE_ID5;
       document.head.appendChild(s);
     }
     s.textContent = `
@@ -21034,6 +21703,9 @@ void main() {
       // 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. */
@@ -21092,12 +21764,21 @@ void main() {
     }
     showToolbar(visible) {
       this.toolbarVisible = visible;
-      this.toolbar.setVisible(visible);
+      this.toolbar.setVisible(visible && !this.mobileLayout);
+      this.syncToolbarGutter();
+    }
+    /** Mobile suppresses the docked toolbar (hover flyouts don't work with touch; the
+     *  shell's own drawer picks tools instead) and releases its gutter; flipping back
+     *  to desktop restores whatever `showToolbar` last asked for. */
+    setLayoutMode(mode) {
+      this.mobileLayout = mode === "mobile";
+      this.toolbar.setVisible(this.toolbarVisible && !this.mobileLayout);
       this.syncToolbarGutter();
     }
     /** The gutter follows the bar's current footprint: hidden 0, collapsed a slim strip, else full width. */
     syncToolbarGutter() {
-      this.deps.setToolbarGutter(this.toolbarVisible ? this.toolbarCollapsed ? TOOLBAR_COLLAPSED_WIDTH : TOOLBAR_WIDTH : 0);
+      const shown = this.toolbarVisible && !this.mobileLayout;
+      this.deps.setToolbarGutter(shown ? this.toolbarCollapsed ? TOOLBAR_COLLAPSED_WIDTH : TOOLBAR_WIDTH : 0);
     }
     /** Core push: mirror (or clear) another chart's in-progress placement as a ghost. */
     setExternalGhost(doc) {
@@ -21978,7 +22659,7 @@ void main() {
 
   // src/renderers/native/chrome/AttributionMark.ts
   var ATTRIBUTION_URL = "https://luxalgo.com/vela";
-  var STYLE_ID5 = "vela-attribution-styles";
+  var STYLE_ID6 = "vela-attribution-styles";
   var CSS = `
 .vela-attribution {
     text-decoration: none;
@@ -22024,12 +22705,28 @@ void main() {
     max-width: 240px;
     opacity: 1;
     transform: translateX(0);
-}`;
-  function ensureStyles5(doc) {
-    let s = doc.getElementById(STYLE_ID5);
+}
+/* Mobile: a hair smaller so the mark doesn't dominate a phone-width plot. Keyed on the
+   renderer's own container attribute (data-vela-layout) AND the shell root's
+   (data-layout): the workspace's single grid-wide mark lives OUTSIDE any renderer
+   container, so only the shell attribute reaches it. */
+[data-vela-layout='mobile'] .vela-attribution .vela-attr-symbol svg,
+[data-layout='mobile'] .vela-attribution .vela-attr-symbol svg { height: 22px; }
+[data-vela-layout='mobile'] .vela-attribution .vela-attr-wordmark,
+[data-layout='mobile'] .vela-attribution .vela-attr-wordmark {
+    top: 2px;
+    transform: translateX(-6px);
+}
+[data-vela-layout='mobile'] .vela-attribution .vela-attr-wordmark svg,
+[data-layout='mobile'] .vela-attribution .vela-attr-wordmark svg { height: 21px; }
+[data-vela-layout='mobile'] .vela-attribution:hover .vela-attr-wordmark,
+[data-layout='mobile'] .vela-attribution:hover .vela-attr-wordmark { transform: translateX(0); }
+`;
+  function ensureStyles6(doc) {
+    let s = doc.getElementById(STYLE_ID6);
     if (!s) {
       s = doc.createElement("style");
-      s.id = STYLE_ID5;
+      s.id = STYLE_ID6;
       doc.head.appendChild(s);
     }
     s.textContent = CSS;
@@ -22058,7 +22755,7 @@ void main() {
     return el;
   }
   function createAttributionMark(doc, background) {
-    ensureStyles5(doc);
+    ensureStyles6(doc);
     const a = doc.createElement("a");
     a.className = "vela-attribution";
     a.href = ATTRIBUTION_URL;
@@ -22084,6 +22781,174 @@ void main() {
     return a;
   }
 
+  // src/renderers/shared/dom-raster.ts
+  function hasInk(color) {
+    if (!color || color === "transparent") return false;
+    const m = /rgba?\(\s*[\d.]+\s*,\s*[\d.]+\s*,\s*[\d.]+\s*,\s*([\d.]+)\s*\)/.exec(color);
+    return m ? parseFloat(m[1]) > 1e-3 : true;
+  }
+  function cornerRadius(cs, w, h) {
+    const raw = cs.borderTopLeftRadius;
+    const v = parseFloat(raw) || 0;
+    const px = raw.endsWith("%") ? v / 100 * Math.min(w, h) : v;
+    return Math.max(0, Math.min(px, Math.min(w, h) / 2));
+  }
+  function tracePath(ctx, x, y, w, h, r) {
+    ctx.beginPath();
+    if (r > 0 && typeof ctx.roundRect === "function") ctx.roundRect(x, y, w, h, r);
+    else ctx.rect(x, y, w, h);
+  }
+  function canDrawUntainted(img) {
+    try {
+      const probe2 = img.ownerDocument.createElement("canvas");
+      probe2.width = 1;
+      probe2.height = 1;
+      const ctx = probe2.getContext("2d");
+      if (!ctx) return false;
+      ctx.drawImage(img, 0, 0, 1, 1);
+      probe2.toDataURL();
+      return true;
+    } catch {
+      return false;
+    }
+  }
+  function rasterizeOverlay(ctx, root, frame) {
+    const win = root.ownerDocument.defaultView;
+    if (!win) return;
+    ctx.save();
+    ctx.scale(frame.dpr, frame.dpr);
+    const drawText = (node, cs, alpha) => {
+      const text = node.textContent?.replace(/\s+/g, " ").trim();
+      if (!text) return;
+      const range = node.ownerDocument.createRange();
+      range.selectNodeContents(node);
+      const r = range.getBoundingClientRect();
+      if (r.width <= 0 || r.height <= 0) return;
+      ctx.globalAlpha = alpha;
+      ctx.fillStyle = cs.color;
+      ctx.font = `${cs.fontStyle} ${cs.fontWeight} ${cs.fontSize} ${cs.fontFamily}`;
+      ctx.textBaseline = "middle";
+      ctx.textAlign = "left";
+      ctx.fillText(text, r.left - frame.left, r.top - frame.top + r.height / 2);
+    };
+    const drawImg = (img, cs, alpha) => {
+      if (!img.complete || img.naturalWidth <= 0 || !canDrawUntainted(img)) return;
+      const r = img.getBoundingClientRect();
+      if (r.width <= 0 || r.height <= 0) return;
+      const x = r.left - frame.left;
+      const y = r.top - frame.top;
+      ctx.save();
+      ctx.globalAlpha = alpha;
+      tracePath(ctx, x, y, r.width, r.height, cornerRadius(cs, r.width, r.height));
+      ctx.clip();
+      ctx.drawImage(img, x, y, r.width, r.height);
+      ctx.restore();
+    };
+    const drawSvgShapes = (parent, alpha) => {
+      for (const el of parent.children) {
+        if (el.hasAttribute("transform")) continue;
+        const tag = el.tagName.toLowerCase();
+        if (tag === "g") {
+          drawSvgShapes(el, alpha);
+          continue;
+        }
+        const num3 = (name) => parseFloat(el.getAttribute(name) ?? "0") || 0;
+        let path = null;
+        if (tag === "path") {
+          const d = el.getAttribute("d");
+          if (d) path = new Path2D(d);
+        } else if (tag === "circle") {
+          path = new Path2D();
+          path.arc(num3("cx"), num3("cy"), num3("r"), 0, Math.PI * 2);
+        } else if (tag === "ellipse") {
+          path = new Path2D();
+          path.ellipse(num3("cx"), num3("cy"), num3("rx"), num3("ry"), 0, 0, Math.PI * 2);
+        } else if (tag === "rect") {
+          path = new Path2D();
+          path.rect(num3("x"), num3("y"), num3("width"), num3("height"));
+        } else if (tag === "line") {
+          path = new Path2D();
+          path.moveTo(num3("x1"), num3("y1"));
+          path.lineTo(num3("x2"), num3("y2"));
+        } else if (tag === "polyline" || tag === "polygon") {
+          const pts = (el.getAttribute("points") ?? "").trim().split(/[\s,]+/).map(Number);
+          if (pts.length < 4 || pts.some(Number.isNaN)) continue;
+          path = new Path2D();
+          path.moveTo(pts[0], pts[1]);
+          for (let i = 2; i + 1 < pts.length; i += 2) path.lineTo(pts[i], pts[i + 1]);
+          if (tag === "polygon") path.closePath();
+        }
+        if (!path) continue;
+        const cs = win.getComputedStyle(el);
+        if (cs.fill && cs.fill !== "none" && hasInk(cs.fill)) {
+          ctx.globalAlpha = alpha * (parseFloat(cs.fillOpacity) || 1);
+          ctx.fillStyle = cs.fill;
+          ctx.fill(path);
+        }
+        const sw = parseFloat(cs.strokeWidth) || 0;
+        if (cs.stroke && cs.stroke !== "none" && hasInk(cs.stroke) && sw > 0) {
+          ctx.globalAlpha = alpha * (parseFloat(cs.strokeOpacity) || 1);
+          ctx.strokeStyle = cs.stroke;
+          ctx.lineWidth = sw;
+          if (cs.strokeLinecap === "round" || cs.strokeLinecap === "square" || cs.strokeLinecap === "butt") ctx.lineCap = cs.strokeLinecap;
+          if (cs.strokeLinejoin === "round" || cs.strokeLinejoin === "bevel" || cs.strokeLinejoin === "miter") ctx.lineJoin = cs.strokeLinejoin;
+          ctx.stroke(path);
+        }
+      }
+    };
+    const drawSvg = (svg, parentAlpha) => {
+      const r = svg.getBoundingClientRect();
+      if (r.width <= 0 || r.height <= 0) return;
+      const cs = win.getComputedStyle(svg);
+      if (cs.display === "none" || cs.visibility === "hidden") return;
+      const alpha = parentAlpha * (parseFloat(cs.opacity) || 1);
+      if (alpha <= 1e-3) return;
+      const vb = svg.viewBox.baseVal;
+      const vw = vb && vb.width > 0 ? vb.width : r.width;
+      const vh = vb && vb.height > 0 ? vb.height : r.height;
+      ctx.save();
+      ctx.translate(r.left - frame.left, r.top - frame.top);
+      ctx.scale(r.width / vw, r.height / vh);
+      if (vb) ctx.translate(-vb.x, -vb.y);
+      drawSvgShapes(svg, alpha);
+      ctx.restore();
+    };
+    const drawElement = (el, parentAlpha) => {
+      const cs = win.getComputedStyle(el);
+      if (cs.display === "none" || cs.visibility === "hidden") return;
+      const alpha = parentAlpha * (parseFloat(cs.opacity) || 1);
+      if (alpha <= 1e-3) return;
+      const r = el.getBoundingClientRect();
+      if (r.width > 0 && r.height > 0) {
+        const x = r.left - frame.left;
+        const y = r.top - frame.top;
+        const radius = cornerRadius(cs, r.width, r.height);
+        if (hasInk(cs.backgroundColor)) {
+          ctx.globalAlpha = alpha;
+          ctx.fillStyle = cs.backgroundColor;
+          tracePath(ctx, x, y, r.width, r.height, radius);
+          ctx.fill();
+        }
+        const bw = parseFloat(cs.borderTopWidth) || 0;
+        if (bw > 0 && cs.borderTopStyle !== "none" && hasInk(cs.borderTopColor)) {
+          ctx.globalAlpha = alpha;
+          ctx.strokeStyle = cs.borderTopColor;
+          ctx.lineWidth = bw;
+          tracePath(ctx, x + bw / 2, y + bw / 2, r.width - bw, r.height - bw, Math.max(0, radius - bw / 2));
+          ctx.stroke();
+        }
+      }
+      for (const child of el.childNodes) {
+        if (child.nodeType === 3) drawText(child, cs, alpha);
+        else if (child instanceof win.HTMLImageElement) drawImg(child, win.getComputedStyle(child), alpha);
+        else if (child instanceof win.SVGSVGElement) drawSvg(child, alpha);
+        else if (child instanceof win.HTMLElement) drawElement(child, alpha);
+      }
+    };
+    if (root instanceof win.HTMLElement) drawElement(root, 1);
+    ctx.restore();
+  }
+
   // src/renderers/native/vpvr/profile.ts
   function buildVpvrProfile(bars, i0, i1, rowCount, valueAreaFrac) {
     const from = Math.max(0, i0);
@@ -22252,12 +23117,13 @@ void main() {
   var COLLAPSED_PANE_H = 26;
   var TIME_AXIS_H = 22;
   var SCROLL_BTN_SIZE = 26;
+  var SCROLL_BTN_SIZE_TOUCH = 24;
   var SCROLL_BTN_RADIUS = 5;
   var SCROLL_BTN_SHADOW = "0 2px 8px rgba(0,0,0,0.4)";
   var SCROLL_BTN_ICON_PX = 12;
-  var SCROLL_BTN_RIGHT_INSET = 25;
+  var SCROLL_BTN_RIGHT_INSET = 12;
   var SCROLL_BTN_RIGHT = RIGHT_AXIS_W + SCROLL_BTN_RIGHT_INSET;
-  var SCROLL_BTN_BOTTOM = TIME_AXIS_H + 30;
+  var SCROLL_BTN_BOTTOM = TIME_AXIS_H + 14;
   var SCROLL_BTN_PROXIMITY_PX = 120;
   var MIN_VISIBLE_BARS = 2;
   var ZOOM_OUT_MARGIN_BARS = 6;
@@ -22309,8 +23175,12 @@ void main() {
       this.symbolPicker = null;
       /** Indicator titles (the legend rows) shown — held here so a remount re-applies it. */
       this.indicatorTitlesOn = true;
+      /** Plot values beside the legend titles shown — held here so a remount re-applies it. */
+      this.indicatorValuesOn = true;
       /** Host-contributed legend actions — held here so a rebuild of the legend re-wires them. */
       this.legendActionsProvider = null;
+      /** Host override of the legend's fold toggle — held here so a remount re-applies it. */
+      this.legendOverviewAction = null;
       // ── keyboard navigation / accessibility (item 11) ──
       this.keyboard = null;
       this.keyboardEnabled = true;
@@ -22420,6 +23290,8 @@ void main() {
       // Distance (px) from the plot's right edge — clears the FULL scale gutter, which widens when a
       // pane carries merged (own-scale) columns; the constant only clears a single-column scale.
       this.scrollBtnRightPx = SCROLL_BTN_RIGHT;
+      // ── chrome size class (pushed by the host shell; see IChartRenderer.setLayoutMode) ──
+      this.layoutMode = "desktop";
       this.viewportCbs = /* @__PURE__ */ new Set();
       this.crosshairCbs = /* @__PURE__ */ new Set();
       this.chartTypeSettingsCbs = /* @__PURE__ */ new Set();
@@ -22430,6 +23302,7 @@ void main() {
       this.factoryConfig = null;
       this.hostSettingsSections = [];
       this.clickCbs = /* @__PURE__ */ new Set();
+      this.axisLongPressCbs = /* @__PURE__ */ new Set();
       this.inputChangeCbs = /* @__PURE__ */ new Set();
       this.removeIndicatorCbs = /* @__PURE__ */ new Set();
       this.toggleVisibleCbs = /* @__PURE__ */ new Set();
@@ -22437,7 +23310,7 @@ void main() {
       this.priceStyleCbs = /* @__PURE__ */ new Set();
       this.tableOverlays = /* @__PURE__ */ new Map();
       this.name = "native";
-      this.features = ["logScale", "currentPriceLine", "priceLabel", "countdown", "upColor", "downColor", "glow", "animZoom", "animPan", "intro", "zoomAnchor", "axisDrag", "paneResize", "candleZOrder", "candleVisible", "seriesOrder", "highlights", "gridlines", "axisLabels", "scaleMode", "invertScale", "paneScales", "autoScale", "timezone", "keyboard", "historyChords", "priceStyle", "priceBaseline", "baselinePrice", "settings", "attribution", "dialogHost", "tradeMarkers", "indicatorTitles"];
+      this.features = ["logScale", "currentPriceLine", "priceLabel", "countdown", "upColor", "downColor", "glow", "animZoom", "animPan", "intro", "zoomAnchor", "axisDrag", "paneResize", "candleZOrder", "candleVisible", "seriesOrder", "highlights", "gridlines", "axisLabels", "scaleMode", "invertScale", "paneScales", "autoScale", "timezone", "keyboard", "historyChords", "priceStyle", "priceBaseline", "baselinePrice", "settings", "attribution", "dialogHost", "tradeMarkers", "indicatorTitles", "indicatorValues"];
       /** Track cursor proximity to the scroll button on the plot (bubbles from the button too,
        *  so moving onto the button doesn't count as leaving). */
       this.onScrollProximityMove = (e) => {
@@ -22610,6 +23483,11 @@ void main() {
           this.inputsUI?.setTitlesVisible(this.indicatorTitlesOn);
           return;
         // own DOM, no repaint needed
+        case "indicatorValues":
+          this.indicatorValuesOn = value !== false;
+          this.inputsUI?.setValuesVisible(this.indicatorValuesOn);
+          return;
+        // own DOM, no repaint needed
         case "attribution":
           this.attributionHtml = typeof value === "string" && value.trim() ? value : null;
           this.attributionEnabled = this.attributionHtml !== null || Boolean(value);
@@ -22698,6 +23576,8 @@ void main() {
           return this.settingsEnabled;
         case "indicatorTitles":
           return this.indicatorTitlesOn;
+        case "indicatorValues":
+          return this.indicatorValuesOn;
         case "attribution":
           return this.attributionHtml ?? this.attributionEnabled;
         case "dialogHost":
@@ -23034,7 +23914,10 @@ void main() {
     /** Port surface: hosts (bottom-bar / chrome buttons) open the same dialog as the
      *  in-chart gear — created on demand, independent of the gear feature being enabled. */
     openSettingsDialog(section) {
-      if (!this.settingsDialog && this.plot) this.settingsDialog = new SettingsDialog(this.dialogHost ?? this.plot, this.theme);
+      if (!this.settingsDialog && this.plot) {
+        this.settingsDialog = new SettingsDialog(this.dialogHost ?? this.plot, this.theme);
+        this.settingsDialog.setLayoutMode(this.layoutMode);
+      }
       this.toggleSettingsDialog(section);
     }
     /** (Re)aim the dialog's Canvas → Theme row: the current selection reflects the STABLE
@@ -23123,11 +24006,18 @@ void main() {
       this.scrollButton.style.color = this.theme.textColor;
       this.scrollButton.style.borderColor = this.theme.borderColor;
     }
-    /** Show the button only when the latest bar is scrolled off the right edge AND the cursor is nearby. */
+    /** Show the button only when the latest bar is scrolled off the right edge. On desktop the
+     *  cursor must also be nearby (hover reveal); on mobile — no hovering cursor — the button
+     *  appears whenever the latest bars are off-screen and hides again once the view is back
+     *  at the right edge. */
     updateScrollToRealtimeButton() {
       const btn = this.scrollButton;
       if (!btn) return;
       const latestOffScreen = this.coords.barCount > 0 && this.coords.getViewport().rightOffset < 0;
+      if (this.layoutMode === "mobile") {
+        btn.style.display = latestOffScreen ? "flex" : "none";
+        return;
+      }
       btn.style.display = latestOffScreen && this.pointerNearScrollBtn ? "flex" : "none";
     }
     /** Glide the view back to the most recent bars, keeping the current zoom (barSpacing). */
@@ -23149,17 +24039,20 @@ void main() {
       this.animator.start();
     }
     /**
-     * Export the current chart as a PNG data URL by compositing the geometry (L0)
-     * + chrome (L1) + user-drawings (L1.5) canvases onto an offscreen canvas. The
-     * background is filled first (the canvas2d data layer is transparent — its bg
-     * lives on the wrapper), and a fresh synchronous paint runs first so the WebGL2
-     * backend's (non-preserved) drawing buffer is populated before it's read back
-     * this tick — the same paint also repaints the drawings layers, so they're
-     * current (interleaved drawings are already inside the data composite). They're
-     * drawn bottom-up in DOM stacking order so the front user drawings (trend lines,
-     * boxes, etc.) sit above the Pine drawings on the chrome layer, matching what's
-     * on screen. The crosshair (L2) and DOM overlays (tables, legend) are
-     * intentionally excluded.
+     * Export the current chart as a PNG data URL by compositing EVERY plot canvas onto
+     * an offscreen canvas, in the same stacking order the DOM shows: plugin layers
+     * below the data, geometry (L0), volume columns (L0.25), the visible-range volume
+     * profile (L0.6), plugin layers above the data, chrome (L1), and user drawings
+     * (L1.5). The background is filled first (the canvas2d data layer is transparent —
+     * its bg lives on the wrapper), and a fresh synchronous paint runs first so the
+     * WebGL2 backend's (non-preserved) drawing buffer is populated before it's read
+     * back this tick — the same paint also repaints the drawings layers, so they're
+     * current. DOM chrome joins as a best-effort text/chip raster (see
+     * `rasterizeOverlay`): the per-pane indicator legends, plus any host overlay that
+     * opts in with a `data-vela-screenshot` attribute on the mount container's
+     * subtree (the widget marks its status line, and its symbol watermark with
+     * `"under"` — drawn beneath the canvases, where it sits on screen). Only the
+     * crosshair (L2) is intentionally excluded.
      */
     screenshot() {
       if (!this.dataCanvas) return null;
@@ -23172,9 +24065,25 @@ void main() {
       if (!ctx) return null;
       ctx.fillStyle = this.theme.background;
       ctx.fillRect(0, 0, out.width, out.height);
-      ctx.drawImage(this.dataCanvas, 0, 0);
-      ctx.drawImage(this.chromeCanvas, 0, 0);
-      ctx.drawImage(this.drawingsCanvas, 0, 0);
+      const plotRect = this.plot?.getBoundingClientRect();
+      const frame = plotRect && plotRect.width > 0 ? { left: plotRect.left, top: plotRect.top, dpr: out.width / plotRect.width } : null;
+      const hostMarked = [...this.mountContainer?.querySelectorAll("[data-vela-screenshot]") ?? []];
+      if (frame) {
+        for (const el of hostMarked) {
+          if (el.getAttribute("data-vela-screenshot") === "under") rasterizeOverlay(ctx, el, frame);
+        }
+      }
+      const below = this.extLayers.filter((l) => l.def.placement === "below-data").map((l) => l.canvas);
+      const above = this.extLayers.filter((l) => l.def.placement !== "below-data").map((l) => l.canvas);
+      for (const canvas of [...below, this.dataCanvas, this.volumeCanvas, this.vpvrCanvas, ...above, this.chromeCanvas, this.drawingsCanvas]) {
+        if (canvas && canvas.width > 0 && canvas.height > 0) ctx.drawImage(canvas, 0, 0);
+      }
+      if (frame) {
+        for (const lg of this.plot?.querySelectorAll("[data-vela-pane]") ?? []) rasterizeOverlay(ctx, lg, frame);
+        for (const el of hostMarked) {
+          if (el.getAttribute("data-vela-screenshot") !== "under") rasterizeOverlay(ctx, el, frame);
+        }
+      }
       return out.toDataURL("image/png");
     }
     /**
@@ -23325,6 +24234,9 @@ void main() {
         fling: (v) => this.fling(v),
         onPointerMove: (x, y) => this.handlePointerMove(x, y),
         onClick: (x) => this.handleClick(x),
+        onAxisLongPress: (axis, x, y) => {
+          for (const cb of this.axisLongPressCbs) cb({ axis, x, y });
+        },
         beginPriceScale: (x, y) => this.beginPriceScale(x, y),
         priceScaleBy: (dy) => this.priceScaleBy(dy),
         beginPricePan: (y) => this.beginPricePan(y),
@@ -23371,6 +24283,14 @@ void main() {
         setToolbarGutter: (px) => this.setToolbarGutter(px)
       });
       this.userDrawings.historyChords = this.historyChordsEnabled;
+      if (this.layoutMode === "mobile") {
+        this.mountContainer?.setAttribute("data-vela-layout", this.layoutMode);
+        this.userDrawings.setLayoutMode(this.layoutMode);
+        if (this.scrollButton) {
+          this.scrollButton.style.width = `${SCROLL_BTN_SIZE_TOUCH}px`;
+          this.scrollButton.style.height = `${SCROLL_BTN_SIZE_TOUCH}px`;
+        }
+      }
       this.keyboard = new KeyboardController({
         panByBars: (bars) => this.panByBars(bars),
         zoomByStep: (dir) => this.zoomByStep(dir),
@@ -23383,10 +24303,13 @@ void main() {
       });
       this.setKeyboardEnabled(this.keyboardEnabled);
       this.inputsUI = new InputsUI(this.plot, theme, (paneId) => this.paneBoundsFor(paneId));
+      this.inputsUI.setLayoutMode(this.layoutMode);
       this.inputsUI.setTitlesVisible(this.indicatorTitlesOn);
+      this.inputsUI.setValuesVisible(this.indicatorValuesOn);
       this.inputsUI.setDialogHost(this.dialogHost);
       this.inputsUI.setSymbolPicker(this.symbolPicker);
       this.inputsUI.setLegendActions(this.legendActionsProvider);
+      this.inputsUI.setLegendOverviewAction(this.legendOverviewAction);
       this.inputsUI.setOnChange((c) => {
         for (const cb of this.inputChangeCbs) cb({ indicatorId: c.indicatorId, key: c.key, value: c.value });
       });
@@ -23801,7 +24724,10 @@ void main() {
       this.scene.indicators.set(model.id, model);
       this.refreshAnchorOffset(model);
       this.scene.assignIndicatorZ(model.id);
-      this.inputsUI.upsert(model.id, model.title, model.inputs, model.inputValues, model.paneId, { native: !!model.native });
+      this.inputsUI.upsert(model.id, model.shorttitle ?? model.title, model.inputs, model.inputValues, model.paneId, {
+        native: !!model.native,
+        ...model.shorttitle ? { settingsTitle: model.title } : {}
+      });
       this.syncTables(model);
       if (model.native?.type === "volume") {
         this.volumeActive = true;
@@ -23862,6 +24788,13 @@ void main() {
       this.legendActionsProvider = provider;
       this.inputsUI?.setLegendActions(provider);
     }
+    setLegendOverviewAction(action) {
+      this.legendOverviewAction = action;
+      this.inputsUI?.setLegendOverviewAction(action);
+    }
+    openIndicatorSettings(indicatorId) {
+      this.inputsUI?.openSettingsFor(indicatorId);
+    }
     /**
      * Hide/show a mounted indicator. Hiding drops its model from the scene (so every paint path —
      * series, fills, drawings, tables, glow, data window — skips it) while keeping its z key and its
@@ -23915,6 +24848,24 @@ void main() {
       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);
@@ -23939,6 +24890,10 @@ void main() {
       this.clickCbs.add(cb);
       return () => this.clickCbs.delete(cb);
     }
+    onAxisLongPress(cb) {
+      this.axisLongPressCbs.add(cb);
+      return () => this.axisLongPressCbs.delete(cb);
+    }
     onViewportChange(cb) {
       this.viewportCbs.add(cb);
       return () => this.viewportCbs.delete(cb);
@@ -24080,6 +25035,7 @@ void main() {
       this.skeletonClockMs += dtMs;
       this.paintData();
       this.crosshairLayer.render(this.scene, this.coords, this.theme, this.hoverSeparatorY, this.externalCrossPx());
+      this.updateLegendValues();
       this.emitViewportChange();
       return active;
     }
@@ -24144,7 +25100,7 @@ void main() {
         this.lastPointer = null;
         this.scheduler.invalidate(1 /* Cursor */);
         this.hoverLogical = null;
-        const empty = { time: null, price: null, values: /* @__PURE__ */ new Map(), ohlc: null };
+        const empty = { time: null, price: null, paneKind: null, values: /* @__PURE__ */ new Map(), ohlc: null };
         for (const cb of this.crosshairCbs) cb(empty);
         return;
       }
@@ -24156,7 +25112,7 @@ void main() {
       const logical = Math.round(this.coords.xToLogical(x));
       const onBar = logical >= 0 && logical < this.coords.barCount;
       const time = onBar ? this.coords.logicalToTime(logical) : null;
-      const pane = this.paneAtY(y);
+      const pane = this.paneNodeAtY(y);
       const price = inData && pane ? this.coords.yToPrice(y, pane.scale, pane.bounds) : null;
       const values = /* @__PURE__ */ new Map();
       if (onBar) {
@@ -24173,7 +25129,7 @@ void main() {
       const bar = onBar ? this.bars[logical] : void 0;
       const ohlc = bar ? { time: bar.time, open: bar.open, high: bar.high, low: bar.low, close: bar.close, volume: bar.volume } : null;
       this.hoverLogical = onBar ? logical : null;
-      const event = { time, price, values, ohlc };
+      const event = { time, price, paneKind: inData && pane ? pane.kind : null, values, ohlc };
       for (const cb of this.crosshairCbs) cb(event);
     }
     handleClick(x) {
@@ -24192,6 +25148,20 @@ void main() {
       }
       return null;
     }
+    /** The pane whose bounds sit closest to `y` — the forgiving fallback for points that
+     *  fall BETWEEN bounds (separator gaps, the strip under the last pane). */
+    nearestPaneToY(y) {
+      let best = null;
+      let bestDist = Infinity;
+      for (const pane of this.scene.panes.values()) {
+        const d = y < pane.bounds.top ? pane.bounds.top - y : y - (pane.bounds.top + pane.bounds.height);
+        if (d < bestDist) {
+          bestDist = d;
+          best = pane;
+        }
+      }
+      return best;
+    }
     // ── manual vertical scaling (price-axis drag + vertical price pan) ──
     /** The scale window a gesture targets: a pane's master scale, or a merged indicator's
      *  own scale column (resolved from the grabbed x). Both share the four scale fields. */
@@ -24254,7 +25224,7 @@ void main() {
      * still fits the view.)
      */
     dataDblClick(_x, y) {
-      const pane = this.paneNodeAtY(y);
+      const pane = this.paneNodeAtY(y) ?? this.nearestPaneToY(y);
       if (!pane) return;
       const maximized = this.maximizedPaneId !== pane.id;
       this.maximizedPaneId = maximized ? pane.id : null;
@@ -24495,29 +25465,63 @@ void main() {
     dataWindowGroups(idx, pricePane) {
       const groups = [];
       for (const model of this.scene.indicators.values()) {
-        const pane = (model.paneId ? this.scene.panes.get(model.paneId) : null) ?? pricePane;
-        const off = this.scene.offsetOf(model.id);
-        const rows = [];
-        for (const s of model.series) {
-          let value;
-          let color;
-          if (s.kind === "candle" || s.kind === "bar") {
-            value = s.bars[idx - off]?.close;
-            color = s.style?.up ?? this.theme.upColor;
-          } else if (isLineLikeSeries(s)) {
-            if (s.visible === false) continue;
-            value = s.points[idx - off]?.value;
-            color = s.points[idx - off]?.color ?? s.style.color;
-          } else {
-            continue;
-          }
-          if (value == null || !Number.isFinite(value)) continue;
-          rows.push({ label: s.title || model.title, value: this.dataWindowFmt(value, pane), color });
-        }
+        const rows = this.dataWindowRowsFor(model, idx, pricePane);
         if (rows.length) groups.push({ name: model.title, rows });
       }
       return groups;
     }
+    /** One indicator's readout at bar `idx`: a row per drawable plot, formatted on its pane's scale. */
+    dataWindowRowsFor(model, idx, pricePane) {
+      if (model.native?.type === "volume") return this.volumeReadoutRows(model, idx);
+      const pane = (model.paneId ? this.scene.panes.get(model.paneId) : null) ?? pricePane;
+      const off = this.scene.offsetOf(model.id);
+      const rows = [];
+      for (const s of model.series) {
+        let value;
+        let color;
+        if (s.kind === "candle" || s.kind === "bar") {
+          value = s.bars[idx - off]?.close;
+          color = s.style?.up ?? this.theme.upColor;
+        } else if (isLineLikeSeries(s)) {
+          if (s.visible === false) continue;
+          value = s.points[idx - off]?.value;
+          color = s.points[idx - off]?.color ?? s.style.color;
+        } else {
+          continue;
+        }
+        if (value == null || !Number.isFinite(value)) continue;
+        rows.push({ label: s.title || model.title, value: this.dataWindowFmt(value, pane), color });
+      }
+      return rows;
+    }
+    /** The volume indicator's readout: the bar's volume, tinted with the layer's own direction
+     *  colors. Hiding volume keeps its model in the scene (only the layer is suppressed — see
+     *  `setIndicatorVisible`), so the hidden flag is checked here rather than by model absence. */
+    volumeReadoutRows(model, idx) {
+      if (this.volumeHidden) return [];
+      const bar = this.bars[idx];
+      const vol = bar?.volume;
+      if (bar == null || vol == null || !Number.isFinite(vol)) return [];
+      const cfg = this.scene.volumeLayer;
+      const color = bar.close >= bar.open ? cfg?.upColor ?? this.theme.upColor : cfg?.downColor ?? this.theme.downColor;
+      return [{ label: model.title, value: formatVolume(vol), color }];
+    }
+    /** Refresh the plot values beside every legend title — the same readout the data window
+     *  shows (crosshair bar, else the latest bar), pushed per paint. A hidden indicator has
+     *  no scene model, so its row is absent from the map and its readout clears. */
+    updateLegendValues() {
+      if (!this.inputsUI) return;
+      const n = this.bars.length;
+      const values = /* @__PURE__ */ new Map();
+      if (n > 0) {
+        const idx = this.hoverLogical != null ? this.hoverLogical : n - 1;
+        const pricePane = this.dataWindowPricePane();
+        for (const model of this.scene.indicators.values()) {
+          values.set(model.id, this.dataWindowRowsFor(model, idx, pricePane).map((r) => ({ value: r.value, color: r.color })));
+        }
+      }
+      this.inputsUI.setPlotValues(values);
+    }
     renderFrame(level) {
       if (this.animator.active) return;
       if (repaintsData(level)) {
@@ -24529,6 +25533,7 @@ void main() {
       }
       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() {
@@ -24677,7 +25682,7 @@ void main() {
           if (!Number.isFinite(y) || y < pricePane.bounds.top || y > pricePane.bounds.top + pricePane.bounds.height) y = null;
         }
       }
-      return { x, y, time: this.coords.logicalToTime(logical) };
+      return { x, y, time: this.coords.logicalToTime(logical), price: y != null ? ext.price : null };
     }
     /** Set the sticky magnet mode (called by the drawings toolbar's 3-state button). */
     setSnapMode(mode) {
@@ -25369,7 +26374,8 @@ void main() {
   };
   var vpvrDescriptor = {
     type: "vpvr",
-    title: "VPVR",
+    title: "Visible Range Volume Profile",
+    shortTitle: "VRVP",
     paneHint: "price",
     overlay: true,
     inputsSchema: () => [
@@ -27076,6 +28082,7 @@ void main() {
   exports.legendActions = legendActions;
   exports.nativeIndicatorDescriptors = nativeIndicatorDescriptors;
   exports.nativeIndicatorTypes = nativeIndicatorTypes;
+  exports.normalizeSettingsRow = normalizeSettingsRow;
   exports.registerChartType = registerChartType;
   exports.registerDefaultEngine = registerDefaultEngine;
   exports.registerDrawingType = registerDrawingType;
@@ -27091,6 +28098,7 @@ void main() {
   exports.rendererLayers = rendererLayers;
   exports.resolveEngines = resolveEngines;
   exports.resolveTheme = resolveTheme;
+  exports.settingsRowValueKeys = settingsRowValueKeys;
   exports.sharedBarStore = sharedBarStore;
   exports.sidePanels = sidePanels;
   exports.splitColor = splitColor;