@luxalgo/vela 0.6.6 → 0.6.7

package/dist/{chunk-TMXK2SJR.js → chunk-WVP4XV5A.js}

@@ -1,8 +1,9 @@
-import { parseSymbol, priceStyleIds, BUILTIN_PRICE_STYLES, tzButtonLabel, TIMEZONES, normalizeTimezone, tzMenuLabel, Vela, TypedEventBus, MultiProviderFeed, registerBuiltinChartTypes, resolveTheme, buildToolbar, createCustomMark, createAttributionMark, DrawingToolbar, applyAttributionMarkTheme, sharedBarStore, timeframeToMs } from './chunk-JQFO2WMU.js';
-import { chartType, widgetActions, SidePanel, sidePanels, DEFAULT_PANEL_ORDER, resolveEngines, legendActionsProviderFor, statePersistenceHandlers, rendererDefaults, widgetAttachments, getDrawingType } from './chunk-OEUGUXL7.js';
+import { parseSymbol, priceStyleIds, BUILTIN_PRICE_STYLES, tzButtonLabel, TIMEZONES, normalizeTimezone, tzMenuLabel, Vela, TypedEventBus, MultiProviderFeed, registerBuiltinChartTypes, resolveTheme, buildToolbar, createCustomMark, createAttributionMark, DrawingToolbar, applyAttributionMarkTheme, sharedBarStore, timeframeToMs } from './chunk-6WFKTAT4.js';
+import { chartType, resolveTopbarComposition, topbarActionOverride, TOPBAR_BUILTIN_IDS, widgetActions, SidePanel, sidePanels, DEFAULT_PANEL_ORDER, symbolRanking, resolveEngines, legendActionsProviderFor, statePersistenceHandlers, topbarHas, rendererDefaults, widgetAttachments, getDrawingType } from './chunk-L3I2CCYO.js';
 import { Tooltip, KeymapManager, isEditableTarget, Drawer } from './chunk-2R7BANEM.js';
 import { Menu, Dialog, applyPlotOverlayTokens, ensureUIHost } from './chunk-OICPLNU7.js';
 import { registerIcon, svg16, injectStyles, iconEl, iconMarkup, SESSION_PRE, SESSION_POST, SESSION_OFF, icon, categoricalColor } from './chunk-PN5KWFZ4.js';
+import { baseOf } from './chunk-W4EJWLEO.js';
 
 // src/widget/timeframe.ts
 var UNIT_MS = {
@@ -526,9 +527,14 @@ var CSS2 = `
     align-items: center;
     justify-content: center;
 }
-.vela-widget-actions { margin-left: auto; display: inline-flex; gap: var(--vela-space-1); }
+/* The right side of the bar \u2014 whatever the composition puts there rides this one
+   auto-margin push (the flow-actions host used to carry it; composition can omit it). */
+.vela-topbar-right { margin-left: auto; display: inline-flex; align-items: center; gap: var(--vela-space-1); }
+.vela-widget-actions { display: inline-flex; gap: var(--vela-space-1); }
 /* Left-aligned contributed actions \u2014 the primary-chrome cluster after the dropdowns. */
 .vela-widget-actions-left { display: inline-flex; align-items: center; gap: var(--vela-space-1); }
+/* One PINNED contributed action's slot (a composition entry naming the action's id). */
+.vela-widget-action-pin { display: inline-flex; align-items: center; }
 /* The side-panel toggles, one per docked panel \u2014 a group so the dock can rebuild them
    without disturbing the tools around it. */
 .vela-widget-panels { display: inline-flex; align-items: center; gap: var(--vela-space-1); }
@@ -587,6 +593,12 @@ var Topbar = class {
     this.tooltips = [];
     this.panelBtns = /* @__PURE__ */ new Map();
     this.panelTooltips = [];
+    /** Pinned contributed-action slots, by action id (composition entries that name one,
+     *  plus built-in slots taken over by an override). */
+    this.pinned = /* @__PURE__ */ new Map();
+    /** Overrides that LEFT their native slot (default side + a declared `order`) — they
+     *  render through the flow cluster like ordinary actions. */
+    this.flowingOverrides = /* @__PURE__ */ new Set();
     this.onHairlineSync = () => {
       if (this.hairlineRaf) return;
       const win = this.el.ownerDocument.defaultView;
@@ -601,6 +613,8 @@ var Topbar = class {
     this.host = host;
     this.timeframe = opts.timeframe;
     this.priceStyle = opts.priceStyle;
+    this.comp = resolveTopbarComposition(opts.composition);
+    const vis = (id) => topbarHas(this.comp, id);
     const doc = host.ownerDocument;
     injectStyles(STYLE_ID2, CSS2, doc);
     this.el = doc.createElement("div");
@@ -623,7 +637,7 @@ var Topbar = class {
     this.styleButton.className = "vela-widget-style";
     this.renderStyleButton(doc);
     let indicatorsBtn = null;
-    if (opts.onIndicatorsClick) {
+    if (opts.onIndicatorsClick && !topbarActionOverride("indicators")) {
       indicatorsBtn = doc.createElement("button");
       indicatorsBtn.className = "vela-widget-indicators";
       indicatorsBtn.append(iconEl("indicators", doc), doc.createTextNode("Indicators"));
@@ -636,18 +650,23 @@ var Topbar = class {
     this.panelsHost = doc.createElement("span");
     this.panelsHost.className = "vela-widget-panels";
     const tool = (cls, icon2, tip, onClick) => this.toolButton(cls, icon2, tip, onClick, this.tooltips);
-    this.undoBtn = tool("vela-widget-undo", "undo", "Undo", opts.onUndoClick);
-    this.redoBtn = tool("vela-widget-redo", "redo", "Redo", opts.onRedoClick);
+    if (vis("undo-redo")) {
+      this.undoBtn = tool("vela-widget-undo", "undo", "Undo", opts.onUndoClick);
+      this.redoBtn = tool("vela-widget-redo", "redo", "Redo", opts.onRedoClick);
+    } else {
+      this.undoBtn = doc.createElement("button");
+      this.redoBtn = doc.createElement("button");
+    }
     this.setHistoryState(false, false);
-    const screenshotBtn = tool("vela-widget-screenshot", "camera", "Download screenshot", opts.onScreenshotClick);
-    this.alertsBtn = tool("vela-widget-alerts", "bell", "Alerts");
+    const screenshotBtn = vis("screenshot") && !topbarActionOverride("screenshot") ? tool("vela-widget-screenshot", "camera", "Download screenshot", opts.onScreenshotClick) : null;
+    this.alertsBtn = vis("alerts") ? tool("vela-widget-alerts", "bell", "Alerts") : doc.createElement("button");
     this.alertsBtn.style.position = "relative";
     if (opts.onAlertsClick) this.alertsBtn.addEventListener("click", () => opts.onAlertsClick(this.alertsBtn));
     this.alertsBadge = doc.createElement("span");
     this.alertsBadge.className = "vela-alerts-badge";
     this.alertsBadge.style.display = "none";
     this.alertsBtn.appendChild(this.alertsBadge);
-    if (opts.layout) {
+    if (opts.layout && vis("layout")) {
       this.layoutId = opts.layout.current;
       this.layoutButton = doc.createElement("button");
       this.layoutButton.className = "vela-widget-style";
@@ -658,12 +677,65 @@ var Topbar = class {
       d.className = "vela-sep";
       return d;
     };
-    const leading = [this.symbolEl, sep(), tfGroup, sep(), this.styleButton, sep()];
-    if (this.layoutButton) leading.push(this.layoutButton, sep());
-    if (indicatorsBtn) leading.push(indicatorsBtn, sep());
     this.leftActionsSep = sep();
     this.leftActionsSep.hidden = true;
-    this.el.append(...leading, this.leftActionsHost, this.leftActionsSep, this.undoBtn, this.redoBtn, this.actionsHost, this.alertsBtn, this.panelsHost, screenshotBtn);
+    const primaries = /* @__PURE__ */ new Set(["symbol", "timeframes", "style", "layout", "indicators"]);
+    const pinSlot = (id, left) => {
+      const slot = doc.createElement("span");
+      slot.className = "vela-widget-action-pin";
+      this.pinned.set(id, { host: slot, left });
+      return [slot];
+    };
+    const overridden = (id, left) => {
+      const ov = topbarActionOverride(id);
+      if (!ov) return null;
+      const sideDeclared = left ? opts.composition?.left != null : opts.composition?.right != null;
+      if (!sideDeclared && ov.order !== void 0) {
+        this.flowingOverrides.add(id);
+        return [];
+      }
+      return pinSlot(id, left);
+    };
+    const elementsFor = (id, left) => {
+      switch (id) {
+        case "symbol":
+          return [this.symbolEl];
+        case "timeframes":
+          return [tfGroup];
+        case "style":
+          return [this.styleButton];
+        case "layout":
+          return this.layoutButton ? [this.layoutButton] : [];
+        case "indicators":
+          return overridden(id, left) ?? (indicatorsBtn ? [indicatorsBtn] : []);
+        case "actions":
+          return left ? [this.leftActionsHost, this.leftActionsSep] : [this.actionsHost];
+        case "undo-redo":
+          return [this.undoBtn, this.redoBtn];
+        case "alerts":
+          return [this.alertsBtn];
+        case "panels":
+          return [this.panelsHost];
+        case "screenshot":
+          return overridden(id, left) ?? (screenshotBtn ? [screenshotBtn] : []);
+        default:
+          return pinSlot(id, left);
+      }
+    };
+    const sideEls = (list, left) => {
+      const out = [];
+      for (const [i, id] of list.entries()) {
+        const els = elementsFor(id, left);
+        if (els.length === 0) continue;
+        out.push(...els);
+        if (primaries.has(id) && i < list.length - 1) out.push(sep());
+      }
+      return out;
+    };
+    const right = doc.createElement("span");
+    right.className = "vela-topbar-right";
+    right.append(...sideEls(this.comp.right, false));
+    this.el.append(...sideEls(this.comp.left, true), right);
     host.appendChild(this.el);
     this.renderTfChips();
     this.onHairlineSync();
@@ -780,14 +852,24 @@ var Topbar = class {
     else this.styleButton.appendChild(doc.createTextNode(priceStyleLabel(this.priceStyle)));
     this.styleButton.setAttribute("aria-label", `Chart style \u2014 ${priceStyleLabel(this.priceStyle)}`);
   }
-  /** Re-project the contributed topbar actions (call after registrations change). */
+  /** Re-project the contributed topbar actions (call after registrations change).
+   *  An action PINNED by the composition renders into its named slot (list position
+   *  wins over `align`/`order`); the rest flow into the side's `actions` slot — or
+   *  not at all when an explicit list omits it (the list is the side's contract). */
   renderActions() {
     const ctx = this.opts.getContext?.();
     this.actionsHost.replaceChildren();
     this.leftActionsHost.replaceChildren();
+    for (const pin of this.pinned.values()) pin.host.replaceChildren();
     const doc = this.actionsHost.ownerDocument;
+    const flowLeft = this.comp.left.includes("actions");
+    const flowRight = this.comp.right.includes("actions");
+    const builtin = new Set(TOPBAR_BUILTIN_IDS);
     for (const action of widgetActions("topbar", ctx)) {
-      const left = action.align === "left";
+      const pin = this.pinned.get(action.id);
+      if (!pin && builtin.has(action.id) && !this.flowingOverrides.has(action.id)) continue;
+      const left = pin ? pin.left : action.align === "left";
+      if (!pin && !(left ? flowLeft : flowRight)) continue;
       const b = doc.createElement("button");
       b.className = left ? "vela-widget-action-left" : "vela-widget-action";
       if (action.icon) b.appendChild(iconEl(action.icon, doc));
@@ -796,7 +878,7 @@ var Topbar = class {
         const c = this.opts.getContext?.();
         if (c) action.run(c);
       });
-      (left ? this.leftActionsHost : this.actionsHost).appendChild(b);
+      (pin ? pin.host : left ? this.leftActionsHost : this.actionsHost).appendChild(b);
     }
     this.leftActionsSep.hidden = this.leftActionsHost.childElementCount === 0;
     this.onHairlineSync();
@@ -1113,36 +1195,27 @@ var iconFailed = /* @__PURE__ */ new Set();
 function initialsOf(name) {
   return (name || "?").replace(/[^A-Za-z0-9]/g, "").slice(0, 2).toUpperCase() || "?";
 }
-function cryptoIconUrl(base) {
-  return `https://crypto-icons.ledger.com/${encodeURIComponent(base.toUpperCase())}.png`;
-}
-function baseOf(d) {
-  const fromDesc = d.description?.split("/")[0]?.trim();
-  if (fromDesc) return fromDesc.replace(/\s+Perpetual$/i, "");
-  return d.ticker.replace(/[-_/]?(USDT|USDC|USD1|USDS|BUSD|USD|EUR|PERP)$/i, "") || d.ticker;
-}
-function tickerIconEl(doc, base, name, className) {
+function tickerIconEl(doc, base, name, className, iconUrl) {
   const wrap = doc.createElement("span");
   wrap.className = className;
-  const key = base.toUpperCase();
   const fallback = () => {
     wrap.replaceChildren();
     wrap.style.background = categoricalColor(name);
     wrap.textContent = initialsOf(base || name);
   };
-  if (!key || iconFailed.has(key)) {
+  if (!iconUrl || iconFailed.has(iconUrl)) {
     fallback();
     return wrap;
   }
   const img = doc.createElement("img");
   img.alt = "";
   img.crossOrigin = "anonymous";
-  img.src = cryptoIconUrl(key);
+  img.src = iconUrl;
   img.style.cssText = "width:100%;height:100%;border-radius:50%;display:block;object-fit:cover;";
   img.addEventListener(
     "error",
     () => {
-      iconFailed.add(key);
+      iconFailed.add(iconUrl);
       fallback();
     },
     { once: true }
@@ -1553,11 +1626,14 @@ var MenuBuilder = class {
   }
 };
 var ObjectTree = class extends SidePanel {
-  constructor(host) {
+  constructor(host, iconFor) {
     super(host, "Object tree", "vela-ot");
+    this.iconFor = iconFor;
     this.chart = null;
     this.selectedDrawing = null;
     this.symbolName = "";
+    /** The raw (possibly venue-prefixed) symbol — what icon resolution routes on. */
+    this.symbolRaw = "";
     /** Drawing bundles — a view-side grouping, held for the panel's lifetime and never persisted.
      *  Kept per chart because a workspace points this one panel at whichever chart is active, and
      *  each chart's bundles have to survive the switch. */
@@ -1594,6 +1670,7 @@ var ObjectTree = class extends SidePanel {
     if (open) this.refresh();
   }
   setSymbol(symbol) {
+    this.symbolRaw = symbol;
     this.symbolName = parseSymbol(symbol).ticker;
   }
   /** (Re)bind to a chart instance — called after every widget rebuild. */
@@ -1794,7 +1871,7 @@ var ObjectTree = class extends SidePanel {
     const { chart } = pass;
     if (row.kind === "price") {
       const base = this.symbolName.replace(/[-_/]?(USDT|USDC|USD1|USDS|BUSD|USD|EUR|PERP)$/i, "") || this.symbolName;
-      const icon2 = tickerIconEl(doc, base || "P", this.symbolName || "Price", "vela-ot-avatar");
+      const icon2 = tickerIconEl(doc, base || "P", this.symbolName || "Price", "vela-ot-avatar", this.symbolRaw ? this.iconFor?.(this.symbolRaw) : void 0);
       const el2 = this.row(icon2, row.label, row.visible, [
         {
           icon: row.visible ? "eye" : "eye-off",
@@ -2826,6 +2903,17 @@ var PanelDock = class {
 };
 
 // src/widget/symbol-picker.ts
+function dedupeSymbols(list) {
+  const seen = /* @__PURE__ */ new Set();
+  const out = [];
+  for (const s of list) {
+    const key = `${(s.prefix ?? s.provider ?? "").toLowerCase()}:${s.ticker.toUpperCase()}`;
+    if (seen.has(key)) continue;
+    seen.add(key);
+    out.push(s);
+  }
+  return out;
+}
 var TOP_TICKERS = ["BTCUSDT", "ETHUSDT", "SOLUSDT", "BNBUSDT", "XRPUSDT", "DOGEUSDT", "ADAUSDT", "LINKUSDT"];
 function parseQuery(raw, venues) {
   const m = raw.match(/^\s*([^\s:]+)\s*[:\s]\s*(.*)$/);
@@ -2840,17 +2928,18 @@ function onlyOne(matches) {
   return matches.length === 1 ? matches[0] : null;
 }
 var venueOf = (s) => s.prefix ?? s.provider;
-function filterSymbols(list, query, limit = 100) {
+function filterSymbols(list, query, limit = 100, top = TOP_TICKERS) {
   const venues = [...new Set(list.flatMap((s) => [venueOf(s)?.toLowerCase(), s.provider?.toLowerCase()]).filter((p) => !!p))];
   const { scope, term } = parseQuery(query, venues);
   const pool = scope ? list.filter((s) => venueOf(s)?.toLowerCase() === scope || s.provider?.toLowerCase() === scope) : list;
   const q = term.toUpperCase();
   if (!q) {
     if (scope) return [...pool].sort((a, b) => a.ticker.localeCompare(b.ticker)).slice(0, limit);
+    if (top === false) return pool.slice(0, limit);
     const byTicker = new Map(pool.map((s) => [s.ticker.toUpperCase(), s]));
-    const top = TOP_TICKERS.map((t) => byTicker.get(t)).filter((s) => s !== void 0);
-    const rest = pool.filter((s) => !TOP_TICKERS.includes(s.ticker.toUpperCase()));
-    return [...top, ...rest].slice(0, limit);
+    const pinned = top.map((t) => byTicker.get(t)).filter((s) => s !== void 0);
+    const rest = pool.filter((s) => !top.includes(s.ticker.toUpperCase()));
+    return [...pinned, ...rest].slice(0, limit);
   }
   const qLower = term.toLowerCase();
   const prefix = [];
@@ -2960,12 +3049,16 @@ var CSS6 = `
 var PAGE = 100;
 var SymbolPicker = class {
   constructor(opts) {
+    this.opts = opts;
     this.source = () => [];
     this.rows = [];
     this.highlighted = 0;
     this.seed = "";
     this.activeTab = "All";
     this.visible = PAGE;
+    /** The ranked pool cache — `key` fingerprints the raw pool the ranking ran on. */
+    this.ranked = null;
+    this.ranking = false;
     const doc = (opts.host ?? document.body).ownerDocument;
     injectStyles(STYLE_ID6, CSS6, doc);
     this.input = doc.createElement("input");
@@ -3063,10 +3156,34 @@ var SymbolPicker = class {
       } else delete el.dataset.highlighted;
     });
   }
+  /** The picker's pool: the source, shaped by the registered symbol ranking. Cached —
+   *  the hook runs when the pool CHANGES (an index lands or refreshes), never per
+   *  keystroke; an async hook resolves onto the next repaint (stale-while-revalidate
+   *  in between, the raw pool before the first resolve). */
+  pool() {
+    const raw = this.source();
+    const hook = symbolRanking();
+    if (!hook) return raw;
+    const key = `${raw.length}:${raw[0]?.ticker ?? ""}:${raw[raw.length - 1]?.ticker ?? ""}`;
+    if (this.ranked?.key !== key && !this.ranking) {
+      this.ranking = true;
+      Promise.resolve([...raw]).then((copy) => hook(copy)).then((out) => {
+        this.ranked = { key, result: dedupeSymbols(out) };
+      }).catch((err) => {
+        console.warn("[vela] symbol ranking failed \u2014 pool order kept:", err);
+        this.ranked = { key, result: [...raw] };
+      }).finally(() => {
+        this.ranking = false;
+        this.refresh();
+      });
+    }
+    return this.ranked?.result ?? raw;
+  }
   computeRows() {
     const TAB_TYPES = { Crypto: ["crypto"], Stocks: ["stock"], ETFs: ["etf"], Forex: ["forex"], Commodities: ["commodity"] };
-    const pool = this.activeTab === "All" ? this.source() : this.source().filter((s) => TAB_TYPES[this.activeTab]?.includes((s.type ?? "").toLowerCase()) || this.activeTab === "Crypto" && (s.type ?? "").toLowerCase() === "futures");
-    return filterSymbols(pool, this.input.value, this.visible);
+    const all = this.pool();
+    const pool = this.activeTab === "All" ? all : all.filter((s) => TAB_TYPES[this.activeTab]?.includes((s.type ?? "").toLowerCase()) || this.activeTab === "Crypto" && (s.type ?? "").toLowerCase() === "futures");
+    return filterSymbols(pool, this.input.value, this.visible, symbolRanking() ? false : TOP_TICKERS);
   }
   refresh() {
     const doc = this.list.ownerDocument;
@@ -3097,7 +3214,7 @@ var SymbolPicker = class {
     row.dataset.ticker = s.ticker;
     const venue = s.prefix ?? s.provider;
     if (venue) row.dataset.venue = venue;
-    const av = tickerIconEl(doc, baseOf(s), s.ticker, "vela-sp-avatar");
+    const av = tickerIconEl(doc, baseOf(s), s.ticker, "vela-sp-avatar", this.opts.iconFor?.(s));
     const main = doc.createElement("span");
     main.className = "vela-sp-main";
     const t = doc.createElement("span");
@@ -3924,8 +4041,9 @@ function statuslineInkOf(renderer, priceStyle) {
   }
 }
 var Statusline = class {
-  constructor(host, symbol) {
+  constructor(host, symbol, iconFor) {
     this.host = host;
+    this.iconFor = iconFor;
     this.parts = { name: true, market: true, ohlc: true, change: true };
     this.lastBar = null;
     this.hoverBar = null;
@@ -3949,7 +4067,7 @@ var Statusline = class {
     this.el.className = "vela-statusline";
     this.el.dataset.velaScreenshot = "1";
     const ticker = parseSymbol(symbol).ticker;
-    this.avatarEl = tickerIconEl(doc, baseOfTicker(ticker), ticker, "vela-sl-avatar");
+    this.avatarEl = tickerIconEl(doc, baseOfTicker(ticker), ticker, "vela-sl-avatar", this.iconFor?.(symbol));
     this.symbolEl = doc.createElement("span");
     this.symbolEl.className = "vela-sl-symbol";
     this.symbolEl.textContent = ticker;
@@ -3970,7 +4088,7 @@ var Statusline = class {
   setSymbol(symbol) {
     const ticker = parseSymbol(symbol).ticker;
     this.symbolEl.textContent = ticker;
-    const fresh = tickerIconEl(this.el.ownerDocument, baseOfTicker(ticker), ticker, "vela-sl-avatar");
+    const fresh = tickerIconEl(this.el.ownerDocument, baseOfTicker(ticker), ticker, "vela-sl-avatar", this.iconFor?.(symbol));
     this.avatarEl.replaceWith(fresh);
     this.avatarEl = fresh;
     this.fit();
@@ -4816,12 +4934,15 @@ var ChartCell = class {
     this.watermarkOn = seed.watermark ?? deps.watermark;
     this.watermark = deps.watermark ? new Watermark(this.host, symbol ?? "", seed.timeframe ?? "60") : null;
     if (!this.watermarkOn) this.watermark?.setVisible(false);
-    this.statusline = deps.statusline ? new Statusline(this.host, symbol ?? "") : null;
+    this.statusline = deps.statusline ? new Statusline(this.host, symbol ?? "", (sym) => this.inner?.data.symbolIcon(sym)) : null;
     this.statusline?.setMeta(seed.timeframe ?? "60", this.state.provider ?? "");
     this.statusline?.onChart(this.inner);
     this.marketStatus = this.statusline ? new MarketStatusTracker((s) => this.statusline?.setMarketStatus(s)) : null;
     void this.inner.data.ready().then(() => {
-      if (this.inner && this.state.symbol) this.statusline?.setMeta(this.state.timeframe ?? "60", this.inner.data.displayPrefix(this.state.symbol) ?? this.state.provider ?? "");
+      if (this.inner && this.state.symbol) {
+        this.statusline?.setSymbol(this.state.symbol);
+        this.statusline?.setMeta(this.state.timeframe ?? "60", this.inner.data.displayPrefix(this.state.symbol) ?? this.state.provider ?? "");
+      }
       this.refreshSessionAvailable();
       if (this.inner && this.state.symbol) this.marketStatus?.track(this.inner.data, this.state.symbol);
     });
@@ -6003,7 +6124,8 @@ var MobileBar = class {
     if (!ctx) return;
     const doc = this.el.ownerDocument;
     this.actionsHost.replaceChildren();
-    for (const action of widgetActions("topbar", ctx).filter((a) => a.align === "left")) {
+    const builtin = new Set(TOPBAR_BUILTIN_IDS);
+    for (const action of widgetActions("topbar", ctx).filter((a) => a.align === "left" && !builtin.has(a.id))) {
       const b = doc.createElement("button");
       b.className = "vela-mb-item";
       b.setAttribute("aria-label", action.label);
@@ -6532,10 +6654,10 @@ var MoreDrawer = class {
       });
       actions.appendChild(b);
     };
-    action("undo", "Undo", this.opts.canUndo(), this.opts.onUndo);
-    action("redo", "Redo", this.opts.canRedo(), this.opts.onRedo);
-    action("camera", "Screenshot", true, this.opts.onScreenshot);
-    this.drawer.body.appendChild(actions);
+    if (this.opts.onUndo) action("undo", "Undo", this.opts.canUndo(), this.opts.onUndo);
+    if (this.opts.onRedo) action("redo", "Redo", this.opts.canRedo(), this.opts.onRedo);
+    if (this.opts.onScreenshot) action("camera", "Screenshot", true, this.opts.onScreenshot);
+    if (actions.childElementCount > 0) this.drawer.body.appendChild(actions);
     const list = doc.createElement("div");
     list.className = "vela-md-list";
     const current = this.opts.priceStyles().find((s) => s.id === this.opts.priceStyle());
@@ -6556,8 +6678,10 @@ var MoreDrawer = class {
         })
       );
     }
-    const alertCount = this.opts.alerts().length;
-    list.appendChild(this.row(doc, "Alerts", { icon: "bell", value: alertCount > 0 ? String(alertCount) : void 0, chevron: true, onClick: () => this.show("alerts") }));
+    if (this.opts.alerts) {
+      const alertCount = this.opts.alerts().length;
+      list.appendChild(this.row(doc, "Alerts", { icon: "bell", value: alertCount > 0 ? String(alertCount) : void 0, chevron: true, onClick: () => this.show("alerts") }));
+    }
     for (const act of this.opts.actions()) {
       list.appendChild(
         this.row(doc, act.label, {
@@ -6638,7 +6762,7 @@ var MoreDrawer = class {
     this.drawer.body.appendChild(list);
   }
   renderAlerts(doc) {
-    const alerts = this.opts.alerts();
+    const alerts = this.opts.alerts?.() ?? [];
     if (alerts.length === 0) {
       const empty = doc.createElement("div");
       empty.className = "vela-md-empty";
@@ -7197,6 +7321,9 @@ var VelaWorkspace = class {
     const optLayout = opts.layout === false || opts.layout === void 0 ? "4" : opts.layout;
     this.def = this.resolveLayout(this.monoLayout ? "1" : boot?.layout && ensureLayout(boot.layout) ? boot.layout : optLayout);
     this.alertCap = Math.max(1, opts.alertCap ?? ALERT_CAP);
+    this.topbarComp = resolveTopbarComposition(opts.topbar);
+    this.indicatorsOverride = topbarActionOverride("indicators");
+    this.screenshotOverride = topbarActionOverride("screenshot");
     if (boot?.trackSizes) for (const [id, ts] of Object.entries(boot.trackSizes)) this.trackSizes.set(id, ts);
     if (boot?.ext) this.extState = { ...boot.ext };
     if (boot?.charts) for (const { id, ...cs } of boot.charts) this.pool.set(id, cs);
@@ -7213,6 +7340,8 @@ var VelaWorkspace = class {
     });
     this.symbolPicker = new SymbolPicker({
       host: this.root,
+      // Row icons come from each descriptor's OWNING provider (resolveSymbolIcon).
+      iconFor: (d) => this.feed.symbolIconOf(d),
       onSelect: (ticker) => this.active.setSymbol(ticker),
       onOpenChange: (open) => {
         if (open) for (const cell of this.cells()) cell.chart.renderer.closeDialogs();
@@ -7220,7 +7349,7 @@ var VelaWorkspace = class {
       }
     });
     this.symbolPicker.setSource(() => this.feed.symbols());
-    this.indicatorPicker = opts.indicatorPicker !== false ? new IndicatorPicker({
+    this.indicatorPicker = opts.indicatorPicker !== false && !this.indicatorsOverride && topbarHas(this.topbarComp, "indicators") ? new IndicatorPicker({
       host: this.root,
       library: () => this.active.libraryRows(),
       onChart: () => this.active.onChartRows(),
@@ -7239,6 +7368,9 @@ var VelaWorkspace = class {
     });
     this.topbar = new Topbar(this.root, {
       symbol: "",
+      // RAW option, not the resolved lists — the bar distinguishes a host-declared
+      // side (list is law) from a default one (an override's `order` may flow).
+      composition: opts.topbar,
       onSymbolClick: () => this.symbolPicker.open(),
       ...picker ? { onIndicatorsClick: () => picker.open() } : {},
       onUndoClick: () => this.active.history.undo(),
@@ -7296,7 +7428,7 @@ var VelaWorkspace = class {
       context: () => this.context(),
       changed: () => this.markStateDirty()
     });
-    this.objectTree = new ObjectTree(main);
+    this.objectTree = new ObjectTree(main, (sym) => this.feed.symbolIcon(sym));
     this.dataWindow = new DataWindow(main);
     this.dock.addBuiltIn({ id: "dataWindow", title: "Data window", icon: "datawindow", order: 10, panel: this.dataWindow, onChart: (c) => this.dataWindow.onChart(c) });
     this.dock.addBuiltIn({ id: "objects", title: "Object tree", icon: "objects", order: 20, panel: this.objectTree, onChart: (c) => this.objectTree.onChart(c) });
@@ -7368,7 +7500,9 @@ var VelaWorkspace = class {
       timeframe: "60",
       onSymbolClick: () => this.symbolPicker.open(),
       onTimeframeClick: () => this.openTimeframeDrawer(),
-      ...picker ? { onIndicatorsClick: () => picker.open() } : {},
+      // Same visibility truth as the desktop bar: composition-hidden
+      // indicators lose their mobile stop too; an override takes it over.
+      ...topbarHas(this.topbarComp, "indicators") && (picker || this.indicatorsOverride) ? { onIndicatorsClick: this.indicatorsOverride ? () => this.runOverride(this.indicatorsOverride) : () => picker.open() } : {},
       getContext: () => this.context(),
       ...this.drawingsEnabled ? { onDrawingsClick: () => this.openDrawingsDrawer() } : {},
       onMoreClick: () => this.openMoreDrawer(),
@@ -8264,27 +8398,32 @@ var VelaWorkspace = class {
     this.drawingsDrawer.open();
   }
   openMoreDrawer() {
+    const has = (id) => topbarHas(this.topbarComp, id);
     this.moreDrawer ?? (this.moreDrawer = new MoreDrawer({
       host: this.root,
-      onUndo: () => this.active.history.undo(),
-      onRedo: () => this.active.history.redo(),
-      onScreenshot: () => this.active.downloadScreenshot(),
+      ...has("undo-redo") ? { onUndo: () => this.active.history.undo(), onRedo: () => this.active.history.redo() } : {},
+      ...has("screenshot") ? { onScreenshot: this.screenshotOverride ? () => this.runOverride(this.screenshotOverride) : () => this.active.downloadScreenshot() } : {},
       canUndo: () => this.active.history.canUndo,
       canRedo: () => this.active.history.canRedo,
       priceStyles: () => priceStyleIds().map((id) => ({ id, label: priceStyleLabel(id), icon: priceStyleIcon(id) })),
       priceStyle: () => this.active.priceStyle,
       onPriceStyle: (id) => this.active.setPriceStyle(id),
-      panels: () => [...this.dock.list()],
+      panels: () => has("panels") ? [...this.dock.list()] : [],
       onTogglePanel: (id) => this.dock.toggle(id),
-      alerts: () => this.alerts.map((a) => ({ title: `${a.source} \xB7 ${a.title}`, message: a.message, time: a.time })),
+      ...has("alerts") ? { alerts: () => this.alerts.map((a) => ({ title: `${a.source} \xB7 ${a.title}`, message: a.message, time: a.time })) } : {},
       // Left-aligned actions have their own bottom-bar stop — only the rest
-      // lands in the drawer, or every left action would appear twice.
-      actions: () => widgetActions("topbar", this.context()).filter((a) => a.align !== "left").map((a) => ({ label: a.label, icon: a.icon, run: () => a.run(this.context()) })),
+      // lands in the drawer, or every left action would appear twice. Built-in-id
+      // actions are slot OVERRIDES: they reach the drawer through the slot's own
+      // routed button (screenshot) or stop (indicators), never as an extra row.
+      actions: () => {
+        const builtin = new Set(TOPBAR_BUILTIN_IDS);
+        return widgetActions("topbar", this.context()).filter((a) => a.align !== "left" && !builtin.has(a.id)).map((a) => ({ label: a.label, icon: a.icon, run: () => a.run(this.context()) }));
+      },
       // The desktop layout dropdown's whole surface — the grid canvas, the
       // non-canvas presets and the sync switches — relocated into the kebab
       // drawer (the topbar is hidden on mobile). Same reads as the topbar block;
-      // single-chart mode omits it here too.
-      layout: this.monoLayout ? void 0 : {
+      // single-chart mode and a composition without 'layout' omit it here too.
+      layout: this.monoLayout || !has("layout") ? void 0 : {
         shape: () => layoutShape(this.def),
         presets: () => layouts().filter((l) => layoutShape(l) === null).map((l) => ({ id: l.id, label: l.label, checked: l.id === this.def.id })),
         onSelectGrid: (rows, cols) => this.setLayout(layoutForGrid(rows, cols)),
@@ -8351,9 +8490,23 @@ var VelaWorkspace = class {
       }
     }
   }
+  /** Invoke a slot override the way its button would: fresh context, `when` respected. */
+  runOverride(action) {
+    const ctx = this.context();
+    if (!action.when || action.when(ctx)) action.run(ctx);
+  }
   /** The default shortcut set — every binding acts on the ACTIVE cell. */
   registerDefaultKeys() {
-    this.keymap.register({ id: "chart.screenshot", keys: "mod+alt+s", label: "Download a chart screenshot", category: "Chart", run: () => this.active.downloadScreenshot() });
+    if (topbarHas(this.topbarComp, "screenshot")) {
+      const ov = this.screenshotOverride;
+      this.keymap.register({
+        id: "chart.screenshot",
+        keys: "mod+alt+s",
+        label: ov ? ov.label : "Download a chart screenshot",
+        category: "Chart",
+        run: ov ? () => this.runOverride(ov) : () => this.active.downloadScreenshot()
+      });
+    }
     this.keymap.register({ id: "chart.reset-view", keys: "alt+r", label: "Reset view (all history)", category: "Chart", run: () => this.active.chart.setVisibleRangePreset("ALL") });
     this.keymap.register({ id: "chart.toggle-log", keys: "alt+l", label: "Toggle logarithmic scale", category: "Chart", run: () => this.active.chart.renderer.set("logScale", !this.active.chart.renderer.get("logScale")) });
     this.keymap.register({
@@ -8393,7 +8546,10 @@ var VelaWorkspace = class {
     this.keymap.register({ id: "view.zoom-out", keys: "mod+arrowdown", label: "Zoom out", category: "Chart", run: () => this.glider.zoom(ZOOM_OUT) });
     this.keymap.register({ id: "view.pan-left", keys: "mod+arrowleft", label: "Pan toward history", category: "Chart", run: () => this.active.chart.panBy(-PAN_FAST) });
     this.keymap.register({ id: "view.pan-right", keys: "mod+arrowright", label: "Pan toward now", category: "Chart", run: () => this.active.chart.panBy(PAN_FAST) });
-    if (this.indicatorPicker) {
+    const indOv = this.indicatorsOverride;
+    if (indOv && topbarHas(this.topbarComp, "indicators")) {
+      this.keymap.register({ id: "indicators.open", keys: "/", label: indOv.label, category: "Indicators", run: () => this.runOverride(indOv) });
+    } else if (this.indicatorPicker) {
       this.keymap.register({ id: "indicators.open", keys: "/", label: "Open the indicator picker", category: "Indicators", run: () => this.indicatorPicker?.open() });
     }
     this.keymap.register({