@luxalgo/vela 0.6.6 → 0.6.7

package/dist/workspace.cjs

@@ -303,6 +303,28 @@ var ProviderRegistry = class {
     const d = this.entries.get(resolved.provider)?.byTicker?.get(normTicker(resolved.ticker));
     return `${d?.prefix ?? resolved.provider}:${d?.ticker ?? resolved.ticker}`;
   }
+  /** The icon URL for a DESCRIPTOR — routed to its OWNING provider's resolver (the
+   *  provider owns the knowledge of where its asset class's icons live). A missing
+   *  provider, an absent resolver, or a resolver that throws all mean "no icon" —
+   *  the shells' initials badge takes over, never an error. */
+  symbolIconOf(d) {
+    const name = d.provider ? normName(d.provider) : [...this.entries.keys()][0];
+    const entry = name !== void 0 ? this.entries.get(name) : void 0;
+    try {
+      return entry?.provider.resolveSymbolIcon?.(d) ?? void 0;
+    } catch {
+      return void 0;
+    }
+  }
+  /** The icon URL for a raw SYMBOL string (the statusline/object-tree path): resolve
+   *  to the owning provider, find its descriptor, route to the resolver. Before the
+   *  index settles (or for a lenient sole-provider resolution) a minimal synthetic
+   *  descriptor is offered — crypto resolvers can answer from the ticker alone. */
+  symbolIcon(resolved) {
+    if (!resolved) return void 0;
+    const d = this.entries.get(resolved.provider)?.byTicker?.get(normTicker(resolved.ticker));
+    return this.symbolIconOf({ ...d ?? { ticker: resolved.ticker }, provider: d?.provider ?? resolved.provider });
+  }
   /** Indexed symbols for one provider (or all, concatenated) — for autocomplete. */
   symbolsOf(rawName) {
     if (rawName != null) return this.entries.get(normName(rawName))?.descriptors ?? [];
@@ -655,6 +677,14 @@ var MultiProviderFeed = class {
   providerInstance(name) {
     return this.registry.get(name);
   }
+  /** The icon URL for a DESCRIPTOR — its owning provider's `resolveSymbolIcon` (picker rows). */
+  symbolIconOf(d) {
+    return this.registry.symbolIconOf(d);
+  }
+  /** The icon URL for a raw SYMBOL string — resolve, then route (statusline, object tree). */
+  symbolIcon(raw) {
+    return this.registry.symbolIcon(this.resolveSymbol(raw));
+  }
   symbols(name) {
     return this.registry.symbolsOf(name);
   }
@@ -4554,6 +4584,29 @@ function tickerModifierIds() {
   return [...registry2.values()].filter((d) => d.tickerModifier ?? d.barTransform != null).map((d) => d.id);
 }
 
+// src/widget/topbar-composition.ts
+var TOPBAR_BUILTIN_IDS = ["symbol", "timeframes", "style", "layout", "indicators", "actions", "undo-redo", "alerts", "panels", "screenshot"];
+var TOPBAR_DEFAULT_LEFT = ["symbol", "timeframes", "style", "layout", "indicators", "actions", "undo-redo"];
+var TOPBAR_DEFAULT_RIGHT = ["actions", "alerts", "panels", "screenshot"];
+function resolveTopbarComposition(opt) {
+  const seen = /* @__PURE__ */ new Set();
+  const take = (list) => {
+    const out = [];
+    const local = /* @__PURE__ */ new Set();
+    for (const id of list) {
+      if (!id || local.has(id) || id !== "actions" && seen.has(id)) continue;
+      local.add(id);
+      seen.add(id);
+      out.push(id);
+    }
+    return out;
+  };
+  return { left: take(opt?.left ?? TOPBAR_DEFAULT_LEFT), right: take(opt?.right ?? TOPBAR_DEFAULT_RIGHT) };
+}
+function topbarHas(comp, id) {
+  return comp.left.includes(id) || comp.right.includes(id);
+}
+
 // src/widget/contributions.ts
 var registry3 = /* @__PURE__ */ new Map();
 var attachments = /* @__PURE__ */ new Map();
@@ -4565,6 +4618,13 @@ var DEFAULT_PANEL_ORDER = 100;
 function sidePanels() {
   return [...panels.values()].sort((a, b) => (a.order ?? DEFAULT_PANEL_ORDER) - (b.order ?? DEFAULT_PANEL_ORDER));
 }
+var OVERRIDABLE_TOPBAR_IDS = ["indicators", "screenshot"];
+var overridableSet = new Set(OVERRIDABLE_TOPBAR_IDS);
+new Set(TOPBAR_BUILTIN_IDS);
+function topbarActionOverride(id) {
+  if (!overridableSet.has(id)) return void 0;
+  return registry3.get(id);
+}
 function widgetActions(target, ctx) {
   const list = [...registry3.values()].filter((d) => d.target === target);
   list.sort((a, b) => (a.order ?? 0) - (b.order ?? 0));
@@ -5068,9 +5128,14 @@ var CSS3 = `
     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); }
@@ -5129,6 +5194,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;
@@ -5143,6 +5214,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, CSS3, doc);
     this.el = doc.createElement("div");
@@ -5165,7 +5238,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"));
@@ -5178,18 +5251,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";
@@ -5200,12 +5278,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();
@@ -5322,14 +5453,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));
@@ -5338,7 +5479,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();
@@ -5731,41 +5872,39 @@ var Bottombar = class {
   }
 };
 
-// src/widget/symbol-icon.ts
-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`;
-}
+// src/data/symbol-base.ts
 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) {
+
+// src/widget/symbol-icon.ts
+var iconFailed = /* @__PURE__ */ new Set();
+function initialsOf(name) {
+  return (name || "?").replace(/[^A-Za-z0-9]/g, "").slice(0, 2).toUpperCase() || "?";
+}
+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 }
@@ -12018,11 +12157,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. */
@@ -12059,6 +12201,7 @@ var ObjectTree = class extends SidePanel {
     if (open2) this.refresh();
   }
   setSymbol(symbol) {
+    this.symbolRaw = symbol;
     this.symbolName = parseSymbol(symbol).ticker;
   }
   /** (Re)bind to a chart instance — called after every widget rebuild. */
@@ -12259,7 +12402,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",
@@ -13289,8 +13432,6 @@ var PanelDock = class {
     for (const entry of this.entries) this.deps.chrome.setPanelActive(entry.id, entry.panel.open);
   }
 };
-
-// src/widget/symbol-picker.ts
 var TOP_TICKERS = ["BTCUSDT", "ETHUSDT", "SOLUSDT", "BNBUSDT", "XRPUSDT", "DOGEUSDT", "ADAUSDT", "LINKUSDT"];
 function parseQuery(raw, venues) {
   const m = raw.match(/^\s*([^\s:]+)\s*[:\s]\s*(.*)$/);
@@ -13305,17 +13446,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 = [];
@@ -13425,12 +13567,16 @@ var CSS8 = `
 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_ID7, CSS8, doc);
     this.input = doc.createElement("input");
@@ -13528,10 +13674,19 @@ 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();
+    return 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, TOP_TICKERS);
   }
   refresh() {
     const doc = this.list.ownerDocument;
@@ -13562,7 +13717,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");
@@ -14243,7 +14398,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);
@@ -14772,10 +14928,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());
@@ -14796,8 +14952,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, {
@@ -14878,7 +15036,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";
@@ -19277,6 +19435,12 @@ var DataControl = class {
   symbols(provider) {
     return this.registry?.symbols(provider) ?? [];
   }
+  /** The icon URL for `symbol` — its owning provider's `resolveSymbolIcon`, routed
+   *  through resolution. Undefined while unresolvable, when the provider declares no
+   *  resolver, or on a custom `deps.dataFeed` — the shells then show initials. */
+  symbolIcon(symbol) {
+    return this.registry?.symbolIcon(symbol);
+  }
   /** Per-symbol metadata (Pine `syminfo.*`), resolved through the owning provider. */
   symbolInfo(symbol) {
     return this.registry?.symbolInfoFor(symbol) ?? Promise.resolve(void 0);
@@ -35625,8 +35789,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;
@@ -35650,7 +35815,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;
@@ -35671,7 +35836,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();
@@ -36419,12 +36584,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);
     });
@@ -37513,6 +37681,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);
@@ -37529,6 +37700,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: (open2) => {
         if (open2) for (const cell of this.cells()) cell.chart.renderer.closeDialogs();
@@ -37536,7 +37709,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(),
@@ -37555,6 +37728,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(),
@@ -37612,7 +37788,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) });
@@ -37684,7 +37860,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(),
@@ -38580,27 +38758,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)),
@@ -38667,9 +38850,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({
@@ -38709,7 +38906,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({