@luxalgo/vela 0.6.17 → 0.6.19

package/dist/{chunk-OSZDSH7F.js → chunk-627A5HEV.js}

@@ -1,4 +1,4 @@
-import { parseSymbol, priceStyleIds, BUILTIN_PRICE_STYLES, tzButtonLabel, TIMEZONES, normalizeTimezone, tzMenuLabel, isGroupRow, defaultMemberOf, groupKeyOf, groupMembers, LEGEND_AT_TOP_ATTR, normalizeSession, Vela, TypedEventBus, MultiProviderFeed, registerBuiltinChartTypes, resolveTheme, buildToolbar, createCustomMark, createAttributionMark, DrawingToolbar, applyAttributionMarkTheme, sharedBarStore, timeframeToMs } from './chunk-YCD72KGK.js';
+import { parseSymbol, priceStyleIds, BUILTIN_PRICE_STYLES, tzButtonLabel, TIMEZONES, normalizeTimezone, tzMenuLabel, isGroupRow, defaultMemberOf, groupKeyOf, groupMembers, LEGEND_AT_TOP_ATTR, normalizeSession, Vela, TypedEventBus, MultiProviderFeed, registerBuiltinChartTypes, resolveTheme, buildToolbar, createCustomMark, createAttributionMark, DrawingToolbar, applyAttributionMarkTheme, sharedBarStore, timeframeToMs } from './chunk-22QJKGXX.js';
 import { chartType, resolveTopbarComposition, topbarActionOverride, TOPBAR_BUILTIN_IDS, widgetActions, SidePanel, sidePanels, DEFAULT_PANEL_ORDER, symbolRanking, resolveEngines, legendActionsProviderFor, legendCalloutsProviderFor, statePersistenceHandlers, topbarHas, rendererDefaults, widgetAttachments, getDrawingType, inputDeltas } from './chunk-IFJJPXSV.js';
 import { Tooltip, KeymapManager, isEditableTarget, Drawer } from './chunk-XCBJU674.js';
 import { Menu, Dialog, CalloutBubble, applyPlotOverlayTokens, ensureUIHost } from './chunk-T5Z5YUCF.js';
@@ -1263,6 +1263,9 @@ function paneLabel(pane, fallbackTitle) {
 function indicatorLabel(i, fallbackTitle) {
   return i.title || fallbackTitle(i.id) || i.id;
 }
+function indicatorRowLabel(i, fallbackTitle) {
+  return i.shorttitle || indicatorLabel(i, fallbackTitle);
+}
 function paneRows(pane) {
   return pane.items.flatMap((it) => it.kind === "row" ? [it.row] : []);
 }
@@ -1394,7 +1397,7 @@ function paneItems(snap, pane, units) {
   const indicatorRow = (i) => ({
     kind: "indicator",
     id: i.id,
-    label: indicatorLabel(i, snap.handleTitle),
+    label: indicatorRowLabel(i, snap.handleTitle),
     visible: snap.indicatorVisible(i.id),
     ownScale: i.ownScale
   });
@@ -1524,9 +1527,13 @@ var CSS4 = `
 .vela-ot-empty { padding: 20px 10px; text-align: center; color: var(--vela-fg-muted); font-size: 12px; }
 
 /* \u2500\u2500 drawing groups \u2500\u2500 */
-/* One top-level entry in a pane's drawing list: a lone drawing, or a whole group block. The
-   transparent border reserves the outline used when a drawing is dropped into the group. */
-.vela-ot-unit { border: 1px solid transparent; border-radius: 6px; }
+/* One top-level entry in a pane's drawing list: a lone drawing, or a whole group block. No
+   border of its own \u2014 units stack flush, so consecutive highlighted rows read as one block; the
+   drop-into-group outline is drawn inside the box instead (see the drag-and-drop rules). */
+.vela-ot-unit { border-radius: 6px; }
+/* Adjacent picked rows merge into one contiguous highlight: the shared edge loses its rounding. */
+.vela-ot-unit:has(> .vela-ot-row[data-picked]) + .vela-ot-unit > .vela-ot-row[data-picked] { border-top-left-radius: 0; border-top-right-radius: 0; }
+.vela-ot-unit:has(+ .vela-ot-unit > .vela-ot-row[data-picked]) > .vela-ot-row[data-picked] { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
 .vela-ot-row[data-row-kind='group'] > .vela-icon { width: 12px; font-size: 11px; }
 /* A member sits indented under its group's header. */
 .vela-ot-subrow { padding-left: 26px; }
@@ -1583,8 +1590,10 @@ var CSS4 = `
 .vela-ot-gap[data-drop] { height: 4px; background: var(--vela-fg-bright); }
 .vela-ot-gap[data-drop]::before { display: none; }
 /* A whole container accepts the drop: merging into a pane, or a pane with no drawings yet.
-   The pane block's transparent border reserves the room for this outline. */
+   The pane block's transparent border reserves the room for this outline; a group unit has no
+   border to color, so it draws the same line as an inset outline (no layout footprint). */
 .vela-ot [data-drop='target'] { border-color: var(--vela-fg-bright); background: var(--vela-hover); }
+.vela-ot-unit[data-drop='target'] { outline: 1px solid var(--vela-fg-bright); outline-offset: -1px; }
 /* Where a reorder would insert. */
 .vela-ot [data-drop='before'] { box-shadow: inset 0 2px 0 var(--vela-fg-bright); }
 .vela-ot [data-drop='after'] { box-shadow: inset 0 -2px 0 var(--vela-fg-bright); }
@@ -1647,7 +1656,8 @@ var ObjectTree = class extends SidePanel {
     super(host, "Object tree", "vela-ot");
     this.iconFor = iconFor;
     this.chart = null;
-    this.selectedDrawing = null;
+    /** What the CHART has selected — every member of a multi-selection, mirrored as rows. */
+    this.selectedDrawings = /* @__PURE__ */ new Set();
     this.symbolName = "";
     /** The raw (possibly venue-prefixed) symbol — what icon resolution routes on. */
     this.symbolRaw = "";
@@ -1698,12 +1708,9 @@ var ObjectTree = class extends SidePanel {
       this.unsubs.push(chart.on(ev, () => this.refresh()));
     }
     this.unsubs.push(
-      chart.on("drawing:selected", ({ id }) => {
-        this.selectedDrawing = id;
-        if (!this.syncingSelection) {
-          this.picked.clear();
-          if (id) this.picked.add(id);
-        }
+      chart.on("drawing:selected", ({ ids }) => {
+        this.selectedDrawings = new Set(ids);
+        if (!this.syncingSelection) this.picked = new Set(ids);
         this.refresh();
       })
     );
@@ -2051,7 +2058,7 @@ var ObjectTree = class extends SidePanel {
     el.dataset.drag = "1";
     el.title = "Drag to restack, or onto another pane to move it there";
     if (inGroup) el.classList.add("vela-ot-subrow");
-    if (d.id === this.selectedDrawing) el.dataset.selected = "1";
+    if (this.selectedDrawings.has(d.id)) el.dataset.selected = "1";
     if (this.picked.has(d.id)) el.dataset.picked = "1";
     el.addEventListener("click", (e) => this.onDrawClick(e, d.id));
     return el;
@@ -3228,6 +3235,20 @@ var SymbolPicker = class {
     this.seed = initialQuery;
     this.dialog.show();
   }
+  get isOpen() {
+    return this.dialog.open;
+  }
+  /** Text typed at the picker that never reached its field: closed, it opens seeded
+   *  with the text; open (the field takes focus a tick after the dialog does, and a
+   *  fast typist's next key lands in that tick), it extends the query. */
+  type(text) {
+    if (!this.isOpen) {
+      this.open(text);
+      return;
+    }
+    this.input.value = (this.input.value + text).toUpperCase();
+    this.refresh();
+  }
   close() {
     this.dialog.hide();
   }
@@ -3641,6 +3662,20 @@ var TimeframeQuick = class {
       this.input.setSelectionRange(this.input.value.length, this.input.value.length);
     }, 0);
   }
+  get isOpen() {
+    return this.dialog.open;
+  }
+  /** Text typed at the entry that never reached its field: closed, it opens seeded
+   *  with the text; open (the field takes focus a tick after the dialog does, and a
+   *  fast typist's next key lands in that tick), it extends the entry. */
+  type(text) {
+    if (!this.isOpen) {
+      this.open(text);
+      return;
+    }
+    this.input.value += text;
+    this.renderHint();
+  }
   close() {
     this.dialog.hide();
   }
@@ -3800,9 +3835,10 @@ async function resolveIndicators(config, fetchImpl = fetch) {
   return out;
 }
 var ledgerEntryName = (e) => typeof e === "string" ? e : e.name;
+var ledgerNativeType = (e) => typeof e === "string" ? e : e.type;
 function indicatorLedger(i) {
   const natives = [...i.present];
-  if (i.volumePending && !natives.includes("volume")) natives.push("volume");
+  if (i.volumePending && !natives.some((e) => ledgerNativeType(e) === "volume")) natives.push("volume");
   return {
     manifest: i.manifestSettled ? [...i.instanceEntries] : [...i.pendingManifest ?? i.instanceEntries],
     natives
@@ -3886,18 +3922,28 @@ function sanitizeCell(raw) {
   if (c.drawings != null && typeof c.drawings === "object") out.drawings = c.drawings;
   const ind = c.indicators;
   if (ind != null && typeof ind === "object") {
+    const bag = (v) => v != null && typeof v === "object" && !Array.isArray(v) ? v : void 0;
     const manifest = Array.isArray(ind.manifest) ? ind.manifest.flatMap((n) => {
       if (typeof n === "string") return [n];
       if (n != null && typeof n === "object" && typeof n.name === "string") {
         const e = n;
-        const bag = (v) => v != null && typeof v === "object" && !Array.isArray(v) ? v : void 0;
         const inputs = bag(e.inputs);
         const props = bag(e.props);
-        return [inputs || props ? { name: e.name, ...inputs ? { inputs } : {}, ...props ? { props } : {} } : e.name];
+        const hidden = e.hidden === true;
+        return [inputs || props || hidden ? { name: e.name, ...inputs ? { inputs } : {}, ...props ? { props } : {}, ...hidden ? { hidden } : {} } : e.name];
+      }
+      return [];
+    }) : [];
+    const natives = Array.isArray(ind.natives) ? ind.natives.flatMap((n) => {
+      if (typeof n === "string") return [n];
+      if (n != null && typeof n === "object" && typeof n.type === "string") {
+        const e = n;
+        const inputs = bag(e.inputs);
+        const hidden = e.hidden === true;
+        return [inputs || hidden ? { type: e.type, ...inputs ? { inputs } : {}, ...hidden ? { hidden } : {} } : e.type];
       }
       return [];
     }) : [];
-    const natives = Array.isArray(ind.natives) ? ind.natives.filter((n) => typeof n === "string") : [];
     out.indicators = { manifest, natives };
   }
   const ext = sanitizeExt(c.ext);
@@ -4033,11 +4079,34 @@ function fmtChange(open, close) {
   const sign = diff >= 0 ? "+" : "";
   return `${sign}${fmtPrice(diff, decimalsFor(close))} (${sign}${pct.toFixed(2)}%)`;
 }
+function fmtChangePct(open, close) {
+  if (open == null || close == null || !Number.isFinite(open) || !Number.isFinite(close) || open === 0) return "";
+  const pct = (close - open) / open * 100;
+  return `${pct >= 0 ? "+" : ""}${pct.toFixed(2)}%`;
+}
 
 // src/widget/statusline-model.ts
 function segmentVisibility(parts, chartHidden = false) {
   return { avatar: parts.logo, symbol: parts.name, meta: parts.name, market: parts.market, ohlc: parts.ohlc && !chartHidden, change: parts.change && !chartHidden, eye: chartHidden };
 }
+var STATUSLINE_LADDER = [
+  { stacked: false, level: "full" },
+  { stacked: true, level: "full" },
+  { stacked: true, level: "compact" },
+  { stacked: true, level: "minimal" }
+];
+function readoutCells(level, readout) {
+  if (readout === "value") return [{ key: "close", label: "" }];
+  if (level === "full") {
+    return [
+      { key: "open", label: "O" },
+      { key: "high", label: "H" },
+      { key: "low", label: "L" },
+      { key: "close", label: "C" }
+    ];
+  }
+  return [{ key: "close", label: level === "compact" ? "C" : "" }];
+}
 function statuslineMenuItems(parts, chartVisible) {
   return [
     { id: "part:logo", label: "Symbol logo", checked: parts.logo },
@@ -4064,6 +4133,11 @@ var CSS10 = `
     display: flex;
     align-items: baseline;
     gap: var(--vela-space-2);
+    /* The chip never grows past the plot: fit() measures overflow against this width to
+     * walk the layout ladder (stack, then shed values), so overflow:hidden only guards
+     * the transient between a resize and the next measure. */
+    max-width: calc(100% - var(--vela-toolbar-gutter, 0px) - var(--vela-scale-gutter, 0px) - 24px);
+    overflow: hidden;
     color: var(--vela-fg);
     font-size: var(--vela-font-size-md);
     /* Same chip treatment as the indicator legend rows (InputsUI): a translucent wash of
@@ -4085,6 +4159,31 @@ var CSS10 = `
 /* Chart hidden (the price series' eye \u2014 renderer 'candleVisible'): the line dims to
  * the same 0.5 wash a hidden indicator's legend row wears. */
 .vela-statusline.vela-sl-chart-hidden { opacity: 0.5; }
+/* Two rows inside the chip \u2014 the identity (logo / symbol / meta / market badge) and the
+ * value readout (O/H/L/C + change, or the show-chart eye). In the widest layout they sit
+ * side by side on one line; the STACKED layouts (fit() decides, see the ladder in
+ * statusline-model) turn the chip into a column so the values drop under the symbol. */
+.vela-statusline .vela-sl-row {
+    display: flex;
+    align-items: baseline;
+    gap: var(--vela-space-2);
+    white-space: nowrap;
+}
+.vela-statusline.vela-sl-stacked {
+    flex-direction: column;
+    align-items: flex-start;
+    /* The same air between the two rows as between the values row and the legend row
+     * that follows the chip (see the stacked legend shift below). */
+    row-gap: var(--vela-space-1);
+}
+/* Stacked, the identity row may shrink (the meta carries the ellipsis) \u2014 the values row
+ * never does, so its overflow is what fit() measures to keep descending the ladder. */
+.vela-statusline.vela-sl-stacked .vela-sl-identity { max-width: 100%; }
+.vela-statusline.vela-sl-stacked .vela-sl-meta {
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
 .vela-statusline .vela-sl-avatar {
     width: 18px;
     height: 18px;
@@ -4136,59 +4235,13 @@ var CSS10 = `
  * stylesheet is document-global, so a bare attribute selector here would shift every
  * chart on the page, including statusline-less ones. */
 .vela-has-statusline [${LEGEND_AT_TOP_ATTR}] { transform: translateY(26px); }
-/* Mobile: two-line chip \u2014 logo / symbol / meta / market status on one aligned row, the
- * bar change on the next. Full O/H/L/C stays hidden (too dense on a phone-width plot).
- * GRID, not a wrapping flexbox: an absolutely positioned wrapping flex container sizes
- * to the one-line sum of ALL segments (max-content), so its background used to stretch
- * far past the market badge; a grid hugs the widest actual row. The meta column may
- * shrink (it carries the ellipsis), the others wrap their content. */
-[data-layout='mobile'] .vela-statusline {
-    display: grid;
-    grid-template-columns: auto auto minmax(0, auto) auto;
-    justify-content: start;
-    align-items: center;
-    row-gap: 1px;
-    max-width: calc(100% - var(--vela-toolbar-gutter, 0px) - var(--vela-scale-gutter, 0px) - 24px);
-    font-size: var(--vela-font-size-sm);
-}
-[data-layout='mobile'] .vela-statusline .vela-sl-symbol {
-    font-size: var(--vela-font-size-md);
-    line-height: 1;
-}
-[data-layout='mobile'] .vela-statusline .vela-sl-meta {
-    min-width: 0;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    line-height: 1;
-}
-[data-layout='mobile'] .vela-statusline .vela-sl-avatar,
-[data-layout='mobile'] .vela-statusline .vela-sl-market { align-self: center; }
-[data-layout='mobile'] .vela-statusline .vela-sl-ohlc { display: none !important; }
-[data-layout='mobile'] .vela-statusline .vela-sl-change {
-    /* Second row, under the text column \u2014 the avatar keeps the first column. */
-    grid-column: 2 / -1;
-    font-size: var(--vela-font-size-sm);
-    line-height: 1.2;
-}
-[data-layout='mobile'] .vela-has-statusline [${LEGEND_AT_TOP_ATTR}] { transform: translateY(40px); }
-/* FIT mode (multi-chart cells \u2014 see setFitMode): the line never wraps; segments that
- * don't fit are HIDDEN by fit() (change first, then meta, then the market badge), so
- * overflow:hidden only guards the transient between a resize and the next measure.
- * Placed after the mobile block on purpose: same specificity, later wins. */
-.vela-statusline.vela-sl-fit {
-    display: flex; /* undo the mobile grid \u2014 fit mode is one flex row again */
-    flex-wrap: nowrap;
-    align-items: center;
-    max-width: calc(100% - var(--vela-toolbar-gutter, 0px) - var(--vela-scale-gutter, 0px) - 24px);
-    overflow: hidden;
-}
-.vela-statusline.vela-sl-fit .vela-sl-change {
-    flex-basis: auto;
-    padding-left: 0;
-}
-/* One row again \u2014 the mobile two-line shift doesn't apply in fit mode. */
-[data-layout='mobile'] .vela-sl-fit-host.vela-has-statusline [${LEGEND_AT_TOP_ATTR}] { transform: translateY(26px); }
+/* A stacked chip is two lines tall \u2014 the legend shifts one more line. fit() flags the
+ * host whenever the ladder lands on a stacked layout. */
+.vela-has-statusline.vela-sl-stacked-host [${LEGEND_AT_TOP_ATTR}] { transform: translateY(40px); }
+/* Mobile: the same ladder at the phone's type scale \u2014 the width alone decides how much
+ * of the readout fits, exactly as on a narrow desktop chart. */
+[data-layout='mobile'] .vela-statusline { font-size: var(--vela-font-size-sm); }
+[data-layout='mobile'] .vela-statusline .vela-sl-symbol { font-size: var(--vela-font-size-md); }
 `;
 function baseOfTicker(ticker) {
   return ticker.replace(/[-_/]?(USDT|USDC|USD1|USDS|BUSD|USD|EUR|PERP)$/i, "") || ticker;
@@ -4259,6 +4312,8 @@ var Statusline = class {
     /** Fit mode (multi-chart cells): one row, overflowing segments hidden — see {@link setFitMode}. */
     this.fitMode = false;
     this.fitRO = null;
+    /** The ladder rung currently applied — see {@link fit}. */
+    this.layout = { stacked: false, level: "full" };
     this.onContextMenu = (e) => {
       if (!this.menu || !this.menuHooks) return;
       e.preventDefault();
@@ -4305,8 +4360,18 @@ var Statusline = class {
       this.menuHooks?.setChartVisible(true);
       this.setChartHidden(false);
     });
-    this.el.append(this.avatarEl, this.symbolEl, this.metaEl, this.marketEl, this.ohlcEl, this.changeEl, this.eyeEl);
+    this.identityRow = doc.createElement("span");
+    this.identityRow.className = "vela-sl-row vela-sl-identity";
+    this.identityRow.append(this.avatarEl, this.symbolEl, this.metaEl, this.marketEl);
+    this.valuesRow = doc.createElement("span");
+    this.valuesRow.className = "vela-sl-row vela-sl-values";
+    this.valuesRow.append(this.ohlcEl, this.changeEl, this.eyeEl);
+    this.el.append(this.identityRow, this.valuesRow);
     host.appendChild(this.el);
+    if (typeof ResizeObserver !== "undefined") {
+      this.fitRO = new ResizeObserver(() => this.fit());
+      this.fitRO.observe(host);
+    }
     this.marketTip = new Tooltip(this.marketEl, { content: MARKET_LABELS.open, placement: "bottom" });
     this.eyeTip = new Tooltip(this.eyeEl, { content: "Show chart", placement: "bottom" });
     this.setMarketStatus("open");
@@ -4322,27 +4387,15 @@ var Statusline = class {
     this.fit();
   }
   /**
-   * Multi-chart cells: keep the line on ONE row whatever the cell width — never wrap.
-   * Segments that don't fit are hidden outright rather than clipped mid-glyph, least
-   * important first: OHLC, then the bar change, the venue/timeframe meta, and the
-   * market badge; the logo + ticker always stay. Re-fits live on host resizes.
+   * Multi-chart cells: the same width ladder as a single chart, plus a last resort for
+   * cells too narrow for even its bottom rung — whatever still overflows is hidden
+   * outright rather than clipped mid-glyph, least important first: the values, the
+   * venue/timeframe meta, then the market badge; the logo + ticker always stay.
    */
   setFitMode(on) {
     if (on === this.fitMode) return;
     this.fitMode = on;
-    this.el.classList.toggle("vela-sl-fit", on);
-    this.host.classList.toggle("vela-sl-fit-host", on);
-    if (on) {
-      if (typeof ResizeObserver !== "undefined" && !this.fitRO) {
-        this.fitRO = new ResizeObserver(() => this.fit());
-        this.fitRO.observe(this.host);
-      }
-      this.fit();
-    } else {
-      this.fitRO?.disconnect();
-      this.fitRO = null;
-      this.syncParts();
-    }
+    this.fit();
   }
   /** Project the parts config onto the segments (the baseline fit() prunes from). */
   syncParts() {
@@ -4354,22 +4407,42 @@ var Statusline = class {
     this.ohlcEl.style.display = seg.ohlc ? "" : "none";
     this.changeEl.style.display = seg.change ? "" : "none";
     this.eyeEl.style.display = seg.eye ? "inline-flex" : "none";
+    this.valuesRow.style.display = seg.ohlc || seg.change || seg.eye ? "" : "none";
   }
-  /** Hide overflowing segments until the row fits its max-width (fit mode only). */
+  /** Apply one ladder rung: the stacked/inline shape and the readout's level. */
+  applyLayout(layout) {
+    this.layout = layout;
+    this.el.classList.toggle("vela-sl-stacked", layout.stacked);
+    this.host.classList.toggle("vela-sl-stacked-host", layout.stacked);
+    this.renderValues();
+  }
+  /**
+   * Walk the width ladder (see {@link STATUSLINE_LADDER}) until the chip fits its
+   * max-width: the full one-line readout, then the values stacked under the symbol
+   * line, then O/H/L shed, then the absolute change. In fit mode, when the last rung
+   * still overflows, whole segments hide, least important first. Without layout
+   * (detached host, node tests) nothing overflows, so the widest rung stays.
+   */
   fit() {
-    if (!this.fitMode) return;
     this.syncParts();
     const seg = segmentVisibility(this.parts, this.chartHidden);
+    const overflows = () => this.el.scrollWidth > this.el.clientWidth;
+    const hasValues = seg.ohlc || seg.change;
+    for (const rung of STATUSLINE_LADDER) {
+      this.applyLayout(rung);
+      if (!hasValues || !overflows()) break;
+    }
+    if (!this.fitMode) return;
     const order = [
-      [this.ohlcEl, seg.ohlc],
-      [this.changeEl, seg.change],
+      [this.valuesRow, hasValues],
       [this.metaEl, seg.meta],
       [this.marketEl, seg.market]
     ];
     for (const [el, shown] of order) {
-      if (this.el.scrollWidth <= this.el.clientWidth) break;
+      if (!overflows()) break;
       if (shown) el.style.display = "none";
     }
+    if (this.valuesRow.style.display === "none") this.applyLayout({ ...this.layout, stacked: false });
   }
   /** Shape + color the value readout after the active price style: its own up/down
    *  colors (candle bodies, bar ticks, the line color, …), the direction rule that
@@ -4482,7 +4555,7 @@ var Statusline = class {
     this.marketTip.destroy();
     this.eyeTip.destroy();
     this.marketBubble.destroy();
-    this.host.classList.remove("vela-has-statusline", "vela-sl-fit-host");
+    this.host.classList.remove("vela-has-statusline", "vela-sl-stacked-host");
     this.el.remove();
   }
   detach() {
@@ -4491,6 +4564,10 @@ var Statusline = class {
   }
   render() {
     if (this.menuHooks) this.setChartHidden(!this.menuHooks.chartVisible());
+    this.fit();
+  }
+  /** Write the value readout for the current bar at the current ladder level. */
+  renderValues() {
     const bar = this.hoverBar ?? this.lastBar;
     if (!bar) {
       this.ohlcEl.replaceChildren();
@@ -4510,12 +4587,11 @@ var Statusline = class {
       s.appendChild(b);
       return s;
     };
-    if (this.readout === "value") this.ohlcEl.replaceChildren(cell("", bar.close));
-    else this.ohlcEl.replaceChildren(cell("O", bar.open), cell("H", bar.high), cell("L", bar.low), cell("C", bar.close));
-    this.changeEl.textContent = fmtChange(bar.open, bar.close);
+    const { level } = this.layout;
+    this.ohlcEl.replaceChildren(...readoutCells(level, this.readout).map((c) => cell(c.label, bar[c.key])));
+    this.changeEl.textContent = level === "minimal" ? fmtChangePct(bar.open, bar.close) : fmtChange(bar.open, bar.close);
     this.changeEl.dataset.dir = up ? "up" : "down";
     this.changeEl.style.color = ink;
-    this.fit();
   }
 };
 
@@ -5442,6 +5518,11 @@ function cellDrawings(opt) {
   if (opt === true || opt == null) return { toolbar: false };
   return { ...opt, toolbar: false };
 }
+function nativeLedgerEntry(handle) {
+  const inputs = inputDeltas(handle.inputs, handle.inputValues());
+  const hidden = !handle.visible;
+  return inputs || hidden ? { type: handle.nativeType, ...inputs ? { inputs } : {}, ...hidden ? { hidden: true } : {} } : handle.nativeType;
+}
 function instanceDeltas(handle) {
   if (!handle) return void 0;
   const inputs = inputDeltas(handle.inputs, handle.inputValues());
@@ -5564,10 +5645,13 @@ var ChartCell = class {
     if (seed.rendererConfig != null) this.inner.renderer.applyConfig(seed.rendererConfig);
     if (seed.drawings != null) this.inner.drawings.fromJSON(seed.drawings);
     if (seed.indicators) {
-      for (const type of seed.indicators.natives) this.inner.addNativeIndicator(type);
+      for (const entry of seed.indicators.natives) {
+        const handle = this.inner.addNativeIndicator(ledgerNativeType(entry));
+        this.applyNativeLedgerEntry(handle, entry);
+      }
       this.pendingManifestNames = [...seed.indicators.manifest];
     }
-    this.volumeIntent = seed.indicators ? seed.indicators.natives.includes("volume") : deps.volume;
+    this.volumeIntent = seed.indicators ? seed.indicators.natives.some((e) => ledgerNativeType(e) === "volume") : deps.volume;
     this.extState = { ...seed.ext ?? {} };
     this.inner.on("load:end", () => {
       this.volumeMayBePending = false;
@@ -5639,6 +5723,7 @@ var ChartCell = class {
       this.refreshNativeCatalog();
     });
     this.inner.on("indicator:inputs", () => this.deps.onStateDirty());
+    this.inner.on("indicator:visibility", () => this.deps.onStateDirty());
     this.inner.on("indicator:removed", ({ id: id2 }) => {
       if (this.destroyed) return;
       const idx = this.instances.findIndex((it) => it.handle?.id === id2);
@@ -6083,7 +6168,7 @@ var ChartCell = class {
       if (list.length === 0) return;
       for (const led of this.pendingManifestNames) {
         const entry = list.find((e) => e.name === ledgerEntryName(led));
-        if (entry) this.addManifestInstance(entry, { record: false, ...typeof led === "object" ? { inputs: led.inputs, props: led.props } : {} });
+        if (entry) this.addManifestInstance(entry, { record: false, ...typeof led === "object" ? { inputs: led.inputs, props: led.props, hidden: led.hidden } : {} });
       }
       this.pendingManifestNames = null;
       return;
@@ -6102,23 +6187,35 @@ var ChartCell = class {
   applyIndicatorLedger(led) {
     const chart = this.inner;
     if (!chart) return;
-    this.volumeIntent = led.natives.includes("volume");
+    this.volumeIntent = led.natives.some((e) => ledgerNativeType(e) === "volume");
     this.history.silently(() => {
       const owed = /* @__PURE__ */ new Map();
-      for (const type of led.natives) owed.set(type, (owed.get(type) ?? 0) + 1);
+      for (const e of led.natives) {
+        const type = ledgerNativeType(e);
+        const queue = owed.get(type);
+        if (queue) queue.push(e);
+        else owed.set(type, [e]);
+      }
       for (const h of this.nativeHandles()) {
-        const type = h.nativeType;
-        const n = owed.get(type) ?? 0;
-        if (n > 0) owed.set(type, n - 1);
+        const entry = owed.get(h.nativeType)?.shift();
+        if (entry !== void 0) this.applyNativeLedgerEntry(h, entry);
         else h.remove();
       }
-      for (const [type, n] of owed) for (let i = 0; i < n; i++) chart.addNativeIndicator(type);
+      for (const queue of owed.values()) {
+        for (const e of queue) {
+          const h = chart.addNativeIndicator(ledgerNativeType(e));
+          this.applyNativeLedgerEntry(h, e);
+        }
+      }
       for (const it of [...this.instances]) this.dropInstance(it);
       if (this.manifest.length > 0) {
         for (const item of led.manifest) {
           const entry = this.manifest.find((e) => e.name === ledgerEntryName(item));
           if (entry)
-            this.addManifestInstance(entry, { record: false, ...typeof item === "object" ? { inputs: item.inputs, props: item.props } : {} });
+            this.addManifestInstance(entry, {
+              record: false,
+              ...typeof item === "object" ? { inputs: item.inputs, props: item.props, hidden: item.hidden } : {}
+            });
         }
         this.pendingManifestNames = null;
       } else if (!this.deps.manifestSettled()) {
@@ -6185,6 +6282,7 @@ var ChartCell = class {
     if (this.destroyed) return;
     const values = opts.inputs || opts.props ? { inputs: opts.inputs, props: opts.props } : void 0;
     const it = { entry, handle: this.addToChart(entry, values), ...opts.external ? { external: true } : {}, ...values ? { values } : {} };
+    if (opts.hidden) it.handle?.setVisible(false);
     this.instances.push(it);
     this.deps.onIndicatorsChanged(this.id);
     if (opts.record === false) return;
@@ -6228,6 +6326,29 @@ var ChartCell = class {
   /** Add a native indicator. A multi-instance type gets a fresh instance every time; a
    *  single-instance type already on the chart hands back its existing one — nothing
    *  changed, so nothing enters the undo timeline. */
+  /**
+   * Converge one native handle to a restored ledger entry: every schema key gets the
+   * entry's value or its declaration default (the DOCUMENT is the truth — a live
+   * tweak must not survive a restore that says otherwise), and visibility follows
+   * the `hidden` flag. Skips the input write when nothing differs — `setInputs`
+   * re-runs the indicator, and a no-op restore must not flicker every native.
+   */
+  applyNativeLedgerEntry(handle, entry) {
+    const wanted = typeof entry === "string" ? void 0 : entry.inputs;
+    if (handle.inputs.length > 0) {
+      const current = handle.inputValues();
+      const next = {};
+      for (const schema of handle.inputs) {
+        const target = wanted?.[schema.key] ?? schema.defval;
+        if (JSON.stringify(current[schema.key]) !== JSON.stringify(target)) next[schema.key] = target;
+      }
+      if (Object.keys(next).length > 0) handle.setInputs(next);
+    } else if (wanted) {
+      handle.setInputs(wanted);
+    }
+    const visible = !(typeof entry === "object" && entry.hidden);
+    if (handle.visible !== visible) handle.setVisible(visible);
+  }
   addNative(type) {
     const chart = this.inner;
     if (!chart) return;
@@ -6391,10 +6512,13 @@ var ChartCell = class {
       // (`ctx.addIndicator`) stay out: their names would never resolve against the
       // manifest — their plugin persists them via the `ext` seam instead.
       indicators: indicatorLedger({
-        present: this.inner ? this.inner.presentNativeIndicators() : [],
+        // Live handles carry what the registry read cannot: the input DELTAS and
+        // the hidden flag, so native settings/visibility survive the round-trip.
+        present: this.inner ? this.nativeHandles().map((h) => nativeLedgerEntry(h)) : [],
         instanceEntries: this.instances.filter((it) => !it.external).map((it) => {
           const d = it.handle ? instanceDeltas(it.handle) : it.values;
-          return d ? { name: it.entry.name, ...d } : it.entry.name;
+          const hidden = it.handle ? !it.handle.visible : false;
+          return d || hidden ? { name: it.entry.name, ...d ?? {}, ...hidden ? { hidden: true } : {} } : it.entry.name;
         }),
         pendingManifest: this.pendingManifestNames,
         manifestSettled: this.deps.manifestSettled(),
@@ -8053,6 +8177,17 @@ function nextAutoCellId(taken) {
     if (!taken.has(`c${i}`)) return `c${i}`;
   }
 }
+function resolveTyping(key, open) {
+  if (open.dialogs > 0) {
+    if (key.length !== 1) return null;
+    if (open.symbolSearch) return { target: "symbol", text: key.toUpperCase() };
+    if (open.timeframeEntry) return { target: "timeframe", text: key };
+    return null;
+  }
+  if (/^[a-zA-Z]$/.test(key)) return { target: "symbol", text: key.toUpperCase() };
+  if (/^[0-9]$/.test(key)) return { target: "timeframe", text: key };
+  return null;
+}
 var VelaWorkspace = class {
   constructor(container, opts = {}) {
     this.events = new TypedEventBus();
@@ -9686,17 +9821,14 @@ var VelaWorkspace = class {
   }
   /** Bare-typing router: letters → symbol search (seeded), digits → timeframe entry. */
   routeTyping(ev) {
-    if (this.destroyed || this.openDialogs > 0) return;
+    if (this.destroyed) return;
     if (ev.ctrlKey || ev.metaKey || ev.altKey) return;
     if (isEditableTarget(ev)) return;
-    const key = ev.key;
-    if (/^[a-zA-Z]$/.test(key)) {
-      ev.preventDefault();
-      this.symbolPicker.open(key.toUpperCase());
-    } else if (/^[0-9]$/.test(key)) {
-      ev.preventDefault();
-      this.tfQuick.open(key);
-    }
+    const hit = resolveTyping(ev.key, { dialogs: this.openDialogs, symbolSearch: this.symbolPicker.isOpen, timeframeEntry: this.tfQuick.isOpen });
+    if (!hit) return;
+    ev.preventDefault();
+    if (hit.target === "symbol") this.symbolPicker.type(hit.text);
+    else this.tfQuick.type(hit.text);
   }
   trackDialog(open) {
     this.openDialogs = Math.max(0, this.openDialogs + (open ? 1 : -1));