@luxalgo/vela 0.6.6 → 0.6.8

package/dist/{chunk-TMXK2SJR.js → chunk-N7LGMKCE.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-SQETIBFU.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,17 @@ 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();
+    /** Tooltips of the CURRENT icon-only action buttons — rebuilt with every
+     *  renderActions pass (contributed buttons are replaceChildren'd away). */
+    this.actionTooltips = [];
+    /** `iconOnly` misuse warned once per action id (renderActions re-runs freely). */
+    this.warnedIconless = /* @__PURE__ */ new Set();
     this.onHairlineSync = () => {
       if (this.hairlineRaf) return;
       const win = this.el.ownerDocument.defaultView;
@@ -601,6 +618,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 +642,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 +655,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 +682,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,23 +857,45 @@ 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();
+    for (const t of this.actionTooltips) t.destroy();
+    this.actionTooltips = [];
     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 iconOnly = action.iconOnly === true && !!action.icon;
+      if (action.iconOnly === true && !action.icon && !this.warnedIconless.has(action.id)) {
+        this.warnedIconless.add(action.id);
+        console.warn(`[vela] widget action "${action.id}": iconOnly needs an \`icon\` \u2014 rendering the label instead.`);
+      }
       const b = doc.createElement("button");
-      b.className = left ? "vela-widget-action-left" : "vela-widget-action";
+      b.className = left ? "vela-widget-action-left" : iconOnly ? "vela-widget-tool" : "vela-widget-action";
       if (action.icon) b.appendChild(iconEl(action.icon, doc));
-      b.appendChild(doc.createTextNode(action.label));
+      if (iconOnly) {
+        b.setAttribute("aria-label", action.label);
+        this.actionTooltips.push(new Tooltip(b, { content: action.label, triggerId: `vela-action-${action.id}`, host: this.host }));
+      } else {
+        b.appendChild(doc.createTextNode(action.label));
+      }
       b.addEventListener("click", () => {
         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();
@@ -842,7 +941,7 @@ var Topbar = class {
     this.tfMenu.destroy();
     this.styleMenu.destroy();
     this.layoutPicker?.destroy();
-    for (const t of [...this.tooltips, ...this.panelTooltips]) t.destroy();
+    for (const t of [...this.tooltips, ...this.panelTooltips, ...this.actionTooltips]) t.destroy();
     this.el.remove();
   }
   /** One icon-only tool button with its kit tooltip, parked in `sink` for disposal. */
@@ -1113,36 +1212,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 +1643,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 +1687,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 +1888,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 +2920,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 +2945,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 +3066,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 +3173,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 +3231,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");
@@ -3550,19 +3684,8 @@ function indicatorLedger(i) {
   };
 }
 
-// src/workspace/sync.ts
-function syncTargets(originId, setting, cellIds) {
-  if (setting == null || setting === false) return [];
-  if (setting === true) return cellIds.filter((id) => id !== originId);
-  const group = setting[originId];
-  if (group == null) return [];
-  return cellIds.filter((id) => id !== originId && setting[id] === group);
-}
-function rangesWithin(a, b, epsMs) {
-  return Math.abs(a.from - b.from) <= epsMs && Math.abs(a.to - b.to) <= epsMs;
-}
-
 // src/state/document.ts
+var SYNC_KINDS = ["viewport", "symbol", "timeframe", "crosshair", "drawings", "style"];
 function prefixedSymbol(cell) {
   if (!cell?.symbol) return void 0;
   if (cell.symbol.includes(":") || !cell.provider) return cell.symbol;
@@ -3650,7 +3773,7 @@ function sanitizeSync(raw) {
   if (raw == null || typeof raw !== "object") return null;
   const s = raw;
   const out = {};
-  for (const kind of ["viewport", "symbol", "timeframe", "crosshair", "drawings"]) {
+  for (const kind of SYNC_KINDS) {
     const v = s[kind];
     if (v === true) out[kind] = true;
     else if (v != null && typeof v === "object") {
@@ -3693,6 +3816,28 @@ function sanitizeTrackSizes(raw) {
   return Object.keys(out).length > 0 ? out : null;
 }
 
+// src/workspace/sync.ts
+function syncTargets(originId, setting, cellIds) {
+  if (setting == null || setting === false) return [];
+  if (setting === true) return cellIds.filter((id) => id !== originId);
+  const group = setting[originId];
+  if (group == null) return [];
+  return cellIds.filter((id) => id !== originId && setting[id] === group);
+}
+function rangesWithin(a, b, epsMs) {
+  return Math.abs(a.from - b.from) <= epsMs && Math.abs(a.to - b.to) <= epsMs;
+}
+var STYLE_SYNC_CONFIG_KEYS = ["layout", "panes", "grid", "priceScale", "crosshair"];
+function styleConfigSlice(config) {
+  if (config == null || typeof config !== "object") return null;
+  const doc = config;
+  const out = {};
+  for (const key of STYLE_SYNC_CONFIG_KEYS) {
+    if (doc[key] != null && typeof doc[key] === "object") out[key] = doc[key];
+  }
+  return Object.keys(out).length > 0 ? out : null;
+}
+
 // src/workspace/persist.ts
 var memoryStore = /* @__PURE__ */ new Map();
 function memoryStorageAdapter() {
@@ -3924,8 +4069,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 +4095,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 +4116,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();
@@ -4527,61 +4673,144 @@ var MarketStatusTracker = class {
 };
 
 // src/widget/session-shading.ts
-function deriveSessionZones(regular, extended) {
+var DAY_MS = 864e5;
+var MINUTE_MS = 6e4;
+function parseWindow(text) {
+  if (typeof text !== "string") return null;
+  const m = /^(\d{2})(\d{2})-(\d{2})(\d{2})$/.exec(text);
+  if (!m) return null;
+  const start = Number(m[1]) * 60 + Number(m[2]);
+  const end = Number(m[3]) * 60 + Number(m[4]);
+  if (start >= end || end > 1440) return null;
+  return { start, end };
+}
+function parseSessionSpec(si) {
+  const session = si?.["session"];
+  if (typeof session !== "string" || session === "" || session === "24x7") return null;
+  const regular = parseWindow(session);
+  if (!regular) return null;
+  const tz = si?.["timezone"];
+  const timezone = typeof tz === "string" && tz !== "" ? tz : "Etc/UTC";
+  const ext = parseWindow(si?.["session_extended"]);
+  const extended = ext && ext.start <= regular.start && ext.end >= regular.end ? ext : { start: 0, end: 1440 };
+  return { regular, extended, timezone };
+}
+var dtfCache = /* @__PURE__ */ new Map();
+function civilFormatter(tz) {
+  const cached = dtfCache.get(tz);
+  if (cached !== void 0) return cached;
+  let dtf = null;
+  try {
+    dtf = new Intl.DateTimeFormat("en-US", {
+      timeZone: tz,
+      hourCycle: "h23",
+      weekday: "short",
+      year: "numeric",
+      month: "2-digit",
+      day: "2-digit",
+      hour: "2-digit",
+      minute: "2-digit"
+    });
+  } catch {
+    dtf = null;
+  }
+  dtfCache.set(tz, dtf);
+  return dtf;
+}
+function civilParts(dtf, ms) {
+  const parts = dtf.formatToParts(ms);
+  const get = (t) => parts.find((p) => p.type === t)?.value ?? "";
+  return {
+    weekday: get("weekday"),
+    year: Number(get("year")),
+    month: Number(get("month")),
+    day: Number(get("day")),
+    hour: Number(get("hour")) % 24,
+    minute: Number(get("minute"))
+  };
+}
+function expandSessionZones(spec, from, to) {
   const pre = [];
   const post = [];
-  for (const [extStart, extEnd] of extended) {
-    const inside = regular.filter(([s, e]) => e > extStart && s < extEnd).sort((a, b) => a[0] - b[0]);
-    let cursor = extStart;
-    for (const [regStart, regEnd] of inside) {
-      if (regStart > cursor) pre.push([cursor, Math.min(regStart, extEnd)]);
-      cursor = Math.max(cursor, regEnd);
-    }
-    if (cursor < extEnd) post.push([cursor, extEnd]);
+  const dtf = civilFormatter(spec.timezone);
+  if (!dtf || !Number.isFinite(from) || !Number.isFinite(to)) return { pre, post };
+  const seen = /* @__PURE__ */ new Set();
+  for (let cursor = from - DAY_MS; cursor < to + DAY_MS; cursor += DAY_MS) {
+    const civil = civilParts(dtf, cursor);
+    const key = civil.year * 1e4 + civil.month * 100 + civil.day;
+    if (!Number.isFinite(key) || seen.has(key)) continue;
+    seen.add(key);
+    if (civil.weekday === "Sat" || civil.weekday === "Sun") continue;
+    const naive = Date.UTC(civil.year, civil.month - 1, civil.day);
+    const noonGuess = naive + 720 * MINUTE_MS;
+    const atNoon = civilParts(dtf, noonGuess);
+    const offset = Date.UTC(atNoon.year, atNoon.month - 1, atNoon.day, atNoon.hour, atNoon.minute) - noonGuess;
+    const at = (minutes) => naive + minutes * MINUTE_MS - offset;
+    if (spec.extended.start < spec.regular.start) pre.push([at(spec.extended.start), at(spec.regular.start)]);
+    if (spec.regular.end < spec.extended.end) post.push([at(spec.regular.end), at(spec.extended.end)]);
   }
   return { pre, post };
 }
-var FETCH_AHEAD_MS2 = 10 * 864e5;
-var MIN_LOOKBACK_MS = 3 * 864e5;
-var MAX_LOOKBACK_MS = 120 * 864e5;
+var COVER_PAD_MIN_MS = 2 * DAY_MS;
 var SessionShadingTracker = class {
   constructor(onZones) {
     this.onZones = onZones;
-    /** Invalidates detached async work — bumped by every track()/stop(). */
+    /** Invalidates the one async step (metadata resolution) — bumped by track()/stop(). */
     this.epoch = 0;
-  }
-  /** (Re)bind to a chart's data surface + market and evaluate once. */
+    this.spec = null;
+    this.ready = false;
+    this.session = "regular";
+    this.covered = null;
+    /** The newest range seen — viewport moves during metadata resolution (a load's fit
+     *  animation) must not be lost, so the resolution always expands the LATEST range. */
+    this.lastRange = null;
+  }
+  /** (Re)bind to a chart's data surface + market and expand once metadata lands. */
   track(data, symbol, opts) {
     const my = ++this.epoch;
-    void this.evaluate(my, data, symbol, opts);
+    this.ready = false;
+    this.spec = null;
+    this.covered = null;
+    this.session = opts.session;
+    this.lastRange = opts.range;
+    void data.symbolInfo(symbol).catch(() => void 0).then((si) => {
+      if (my !== this.epoch) return;
+      this.ready = true;
+      this.spec = parseSessionSpec(si);
+      this.emit(this.lastRange ?? opts.range, true);
+    });
+  }
+  /** Follow a pan/zoom synchronously: bands are epoch-anchored, so only a range that
+   *  leaves the last expansion's coverage needs a recompute — no fetch, no debounce. */
+  updateRange(range) {
+    this.lastRange = range;
+    if (!this.ready) return;
+    this.emit(range, false);
   }
   stop() {
     this.epoch += 1;
-  }
-  async evaluate(my, data, symbol, opts) {
-    const resolved = data.resolve(symbol);
-    const provider = resolved ? data.providerInstance(resolved.provider) : void 0;
-    const si = await data.symbolInfo(symbol).catch(() => void 0);
-    if (my !== this.epoch) return;
-    const hasSessions = typeof si?.session === "string" && si.session !== "" && si.session !== "24x7";
-    if (!provider?.getCalendar || !hasSessions || !resolved) {
-      this.onZones(null);
+    this.ready = false;
+    this.spec = null;
+    this.covered = null;
+    this.lastRange = null;
+  }
+  emit(range, force) {
+    if (!this.spec) {
+      if (force) this.onZones(null);
       return;
     }
-    if (opts.session !== "extended") {
-      this.onZones({ pre: [], post: [] });
+    if (this.session !== "extended") {
+      if (force) this.onZones({ pre: [], post: [] });
       return;
     }
-    const now = Date.now();
-    const lookback = Math.max(MIN_LOOKBACK_MS, Math.min(MAX_LOOKBACK_MS, opts.lookbackMs));
-    const range = { from: now - lookback, to: now + FETCH_AHEAD_MS2 };
-    const [regular, extended] = await Promise.all([
-      provider.getCalendar(resolved.ticker, { ...range, session: "regular" }).catch(() => null),
-      provider.getCalendar(resolved.ticker, { ...range, session: "extended" }).catch(() => null)
-    ]);
-    if (my !== this.epoch) return;
-    if (!regular || !extended) return;
-    this.onZones(deriveSessionZones(regular, extended));
+    const from = Math.min(range.from, range.to);
+    const to = Math.max(range.from, range.to);
+    if (!Number.isFinite(from) || !Number.isFinite(to)) return;
+    if (!force && this.covered && from >= this.covered.from && to <= this.covered.to) return;
+    const pad = Math.max(to - from, COVER_PAD_MIN_MS);
+    const covered = { from: from - pad, to: to + pad };
+    this.covered = covered;
+    this.onZones(expandSessionZones(this.spec, covered.from, covered.to));
   }
 };
 
@@ -4806,7 +5035,11 @@ var ChartCell = class {
       this.deps.toast(`No registered provider serves "${symbol2}" (registered: ${list})`, "error", 6e3);
     });
     this.inner.on("load:start", () => this.watermark?.setLoading(true));
-    this.inner.on("load:end", () => this.watermark?.setLoading(false));
+    this.inner.on("load:end", () => {
+      this.watermark?.setLoading(false);
+      this.refreshSessionShading();
+    });
+    this.inner.on("viewport:changed", (range) => this.sessionShading.updateRange(range));
     const tz = deps.timezone();
     if (tz !== "Etc/UTC") this.inner.renderer.set("timezone", tz);
     this.indicatorTitlesOn = seed.indicatorTitles ?? true;
@@ -4816,12 +5049,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);
     });
@@ -4930,14 +5166,18 @@ var ChartCell = class {
       this.refreshSessionShading();
     });
   }
-  /** (Re)derive the pre/post-market shading bands for this cell's market. The loaded
-   *  depth (bars × timeframe) bounds the calendar fetch; the tracker clamps it. */
+  /** (Re)derive the pre/post-market shading bands for this cell's market. The bands
+   *  expand locally from the symbol's session vocabulary, so they paint as soon as
+   *  metadata is known and follow any pan depth without provider round trips. */
   refreshSessionShading() {
     const chart = this.inner;
     const symbol = this.state.symbol;
     if (!chart || !symbol) return;
-    const lookbackMs = Math.max(this.state.bars ?? 1e3, this.rangeBars) * timeframeMs(this.state.timeframe ?? "60");
-    this.sessionShading.track(chart.data, symbol, { session: this.session, lookbackMs });
+    const now = Date.now();
+    const requestedSpan = Math.max(this.state.bars ?? 1e3, this.rangeBars) * timeframeMs(this.state.timeframe ?? "60");
+    const fallbackSpan = Number.isFinite(requestedSpan) ? Math.max(3 * 864e5, requestedSpan) : 3 * 864e5;
+    const range = chart.getVisibleRange() ?? { from: now - fallbackSpan, to: now };
+    this.sessionShading.track(chart.data, symbol, { session: this.session, range });
   }
   /** The session-shade colors live in the renderer CONFIG (persisted with it, edited
    *  live by the dialog swatch) — the cell only proxies them into its settings rows. */
@@ -5033,10 +5273,10 @@ var ChartCell = class {
         id: "status-line",
         rows: [
           { kind: "heading", label: "Status line", id: "parts" },
-          { kind: "toggle", label: "Symbol name", id: "name", get: () => sl.partVisible("name"), set: (v) => sl.setPartVisible("name", v) },
-          { kind: "toggle", label: "Market status", id: "market", get: () => sl.partVisible("market"), set: (v) => sl.setPartVisible("market", v) },
-          { kind: "toggle", label: "OHLC values", id: "ohlc", get: () => sl.partVisible("ohlc"), set: (v) => sl.setPartVisible("ohlc", v) },
-          { kind: "toggle", label: "Bar change values", id: "change", get: () => sl.partVisible("change"), set: (v) => sl.setPartVisible("change", v) },
+          { kind: "toggle", label: "Symbol name", id: "name", get: () => sl.partVisible("name"), set: (v) => this.setStatuslinePart("name", v) },
+          { kind: "toggle", label: "Market status", id: "market", get: () => sl.partVisible("market"), set: (v) => this.setStatuslinePart("market", v) },
+          { kind: "toggle", label: "OHLC values", id: "ohlc", get: () => sl.partVisible("ohlc"), set: (v) => this.setStatuslinePart("ohlc", v) },
+          { kind: "toggle", label: "Bar change values", id: "change", get: () => sl.partVisible("change"), set: (v) => this.setStatuslinePart("change", v) },
           { kind: "heading", label: "Indicators", id: "indicators" },
           {
             kind: "toggle",
@@ -5071,12 +5311,40 @@ var ChartCell = class {
     this.indicatorTitlesOn = visible;
     this.inner?.renderer.set("indicatorTitles", visible);
     this.deps.onStateDirty();
+    this.deps.onStatusPrefsChanged(this.id);
   }
   /** Show/hide the plot values beside this cell's legend titles (persisted per cell). */
   setIndicatorValuesVisible(visible) {
     this.indicatorValuesOn = visible;
     this.inner?.renderer.set("indicatorValues", visible);
     this.deps.onStateDirty();
+    this.deps.onStatusPrefsChanged(this.id);
+  }
+  /** Show/hide one status-line segment (the settings dialog's Status line tab). */
+  setStatuslinePart(part, visible) {
+    this.statusline?.setPartVisible(part, visible);
+    this.deps.onStatusPrefsChanged(this.id);
+  }
+  /** This cell's Status line tab prefs as one bundle (see {@link CellStatusPrefs}). */
+  statusPrefs() {
+    const sl = this.statusline;
+    return {
+      parts: sl ? { name: sl.partVisible("name"), market: sl.partVisible("market"), ohlc: sl.partVisible("ohlc"), change: sl.partVisible("change") } : null,
+      indicatorTitles: this.indicatorTitlesOn,
+      indicatorValues: this.indicatorValuesOn
+    };
+  }
+  /** Converge this cell's Status line tab prefs to `prefs` — the follower half of
+   *  the workspace's style link. Idempotent: matching values change nothing, so a
+   *  propagated echo dies on its own. */
+  applyStatusPrefs(prefs) {
+    if (prefs.parts && this.statusline) {
+      for (const part of Object.keys(prefs.parts)) {
+        if (this.statusline.partVisible(part) !== prefs.parts[part]) this.statusline.setPartVisible(part, prefs.parts[part]);
+      }
+    }
+    if (prefs.indicatorTitles !== this.indicatorTitlesOn) this.setIndicatorTitlesVisible(prefs.indicatorTitles);
+    if (prefs.indicatorValues !== this.indicatorValuesOn) this.setIndicatorValuesVisible(prefs.indicatorValues);
   }
   /** The LIVE chart of this cell — never cache it across a layout change (the cell's
    *  identity is what endures; the chart dies with the cell). */
@@ -6003,7 +6271,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 +6801,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 +6825,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 +6909,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";
@@ -7015,16 +7286,21 @@ var DrawingPill = class {
 
 // src/workspace/context.ts
 function buildContext(host) {
-  const active = host.active();
   return {
     get chart() {
       const cell = host.active();
       if (!cell) throw new Error("VelaWorkspace has no active cell yet");
       return cell.chart;
     },
-    symbol: active?.symbol ?? "",
-    timeframe: active?.timeframe ?? "60",
-    priceStyle: active?.priceStyle ?? "candles",
+    get symbol() {
+      return host.active()?.symbol ?? "";
+    },
+    get timeframe() {
+      return host.active()?.timeframe ?? "60";
+    },
+    get priceStyle() {
+      return host.active()?.priceStyle ?? "candles";
+    },
     setSymbol: (symbol) => host.active()?.setSymbol(symbol),
     setTimeframe: (tf) => host.active()?.setTimeframe(tf),
     setPriceStyle: (style) => host.active()?.setPriceStyle(style),
@@ -7035,8 +7311,12 @@ function buildContext(host) {
     addIndicator: (entry) => host.active()?.addExternalIndicator(entry),
     addNativeIndicator: (type) => host.active()?.addNative(type),
     stateChanged: () => host.stateDirty(),
-    cells: host.cells().map((c) => ({ id: c.id, chart: c.chart, symbol: c.symbol, timeframe: c.timeframe })),
-    activeCellId: active?.id ?? "",
+    get cells() {
+      return host.cells().map((c) => ({ id: c.id, chart: c.chart, symbol: c.symbol, timeframe: c.timeframe }));
+    },
+    get activeCellId() {
+      return host.active()?.id ?? "";
+    },
     setActiveCell: (id) => host.setActiveCell(id)
   };
 }
@@ -7130,6 +7410,10 @@ var VelaWorkspace = class {
     /** Same guard for the drawings link: the propagated mutations' own `drawing:*`
      *  events fire synchronously inside the propagation loop and must not fan out again. */
     this.drawingSyncBusy = false;
+    /** Same guard for the style link: a follower's `applyConfig` re-fires its
+     *  `onConfigChanged` in the same tick, and a state restore applies per-cell
+     *  configs that legitimately differ — neither must propagate. */
+    this.styleSyncBusy = false;
     /** LINKED drawings (the drawings sync): one map per synced set (cellId → that
      *  cell's drawing id), reachable from every member under its `cellId\0drawingId`
      *  key — any member finds its peers to push edits/removals onto. Survives a
@@ -7190,13 +7474,14 @@ var VelaWorkspace = class {
     if (boot?.favorites) this.favs = [...boot.favorites];
     if (boot?.timeframeFavorites) this.tfFavs = [...boot.timeframeFavorites];
     const sync = boot?.sync ?? opts.sync;
-    for (const kind of ["viewport", "symbol", "timeframe", "crosshair", "drawings"]) {
-      this.applySyncSetting(kind, sync?.[kind]);
-    }
+    for (const kind of SYNC_KINDS) this.applySyncSetting(kind, sync?.[kind]);
     this.monoLayout = opts.layout === false;
     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 +7498,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 +7507,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 +7526,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(),
@@ -7268,7 +7558,8 @@ var VelaWorkspace = class {
         syncs: () => [
           { id: "symbol", label: "Symbol", checked: this.syncOpts.symbol === true },
           { id: "timeframe", label: "Interval", checked: this.syncOpts.timeframe === true },
-          { id: "crosshair", label: "Crosshair", checked: this.syncOpts.crosshair === true }
+          { id: "crosshair", label: "Crosshair", checked: this.syncOpts.crosshair === true },
+          { id: "style", label: "Style", checked: this.syncOpts.style === true }
         ],
         onToggleSync: (id) => {
           const kind = id;
@@ -7296,7 +7587,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 +7659,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(),
@@ -7550,7 +7843,7 @@ var VelaWorkspace = class {
       this.topbar.setTimeframeFavorites(this.tfFavs);
     }
     this.dock.applyState(st.panels);
-    for (const kind of ["viewport", "symbol", "timeframe", "crosshair", "drawings"]) this.applySyncSetting(kind, st.sync?.[kind]);
+    for (const kind of SYNC_KINDS) this.applySyncSetting(kind, st.sync?.[kind]);
     this.trackSizes.clear();
     if (st.trackSizes) for (const [id, ts] of Object.entries(st.trackSizes)) this.trackSizes.set(id, ts);
     const targetDef = this.monoLayout ? this.def : ensureLayout(st.layout) ?? this.def;
@@ -7561,9 +7854,14 @@ var VelaWorkspace = class {
         for (const cell of this.cellsById.values()) cell.chart.drawings.setFavorites(this.favs);
       }
       this.drawingLinks.clear();
-      for (const [i] of this.def.cells.entries()) {
-        const { id, ...cs } = st.charts[i];
-        this.cellsById.get(id)?.rehydrate(cs);
+      this.styleSyncBusy = true;
+      try {
+        for (const [i] of this.def.cells.entries()) {
+          const { id, ...cs } = st.charts[i];
+          this.cellsById.get(id)?.rehydrate(cs);
+        }
+      } finally {
+        this.styleSyncBusy = false;
       }
       if (st.timezone) this.setTimezone(st.timezone);
       this.pool.clear();
@@ -7663,6 +7961,7 @@ var VelaWorkspace = class {
     const rebuildAll = nextBackend !== this.cellBackend;
     this.order = orderAfterLayout(this.order, next.cells.length, this.activeId);
     const keep = new Set(this.order.slice(0, next.cells.length));
+    const preexisting = new Set(this.cellsById.keys());
     for (const [id, cell] of [...this.cellsById]) {
       if (!keep.has(id) || rebuildAll) {
         this.poolSet(id, cell.dehydrate());
@@ -7675,6 +7974,7 @@ var VelaWorkspace = class {
     this.cellBackend = nextBackend;
     this.applyGrid();
     this.buildCells();
+    this.alignNewCellStyles(preexisting);
     this.syncCellPresentation();
     this.topbar.setLayout(next.id);
     const nextActive = activeAfterLayout(this.activeId, this.order.slice(0, next.cells.length));
@@ -7878,6 +8178,7 @@ var VelaWorkspace = class {
         onMarketChanged: (id2) => this.onCellMarketChanged(id2),
         onPriceStyleChanged: (id2) => this.onCellPriceStyleChanged(id2),
         onIndicatorsChanged: (id2) => this.onCellIndicatorsChanged(id2),
+        onStatusPrefsChanged: (id2) => this.propagateStylePrefs(id2),
         onStateDirty: () => this.markStateDirty(),
         manifestSettled: () => this.manifestSettled,
         toast: (message, kind, durationMs) => this.toastHost.show(message, kind, durationMs)
@@ -7953,6 +8254,7 @@ var VelaWorkspace = class {
       this.drawToolbar?.setEraserActive(mode === "eraser");
     });
     chart.on("viewport:changed", (range) => this.propagateViewport(cell.id, range));
+    chart.renderer.onConfigChanged(() => this.propagateStylePrefs(cell.id));
     chart.on("theme:changed", (t) => this.setTheme(t));
     chart.renderer.onAxisLongPress((e) => {
       if (this.layoutCtl.current !== "mobile") return;
@@ -7985,11 +8287,67 @@ var VelaWorkspace = class {
       if (kind === "viewport") {
         const range = this.cellsById.get(this.activeId)?.chart.getVisibleRange();
         if (range) this.propagateViewport(this.activeId, range);
+      } else if (kind === "style") {
+        this.propagateStylePrefs(this.activeId);
       } else {
         this.propagateMarket(this.activeId);
       }
     }
   }
+  /**
+   * Align cells minted by a layout change to their style group: with the link on, a
+   * NEW cell (fresh slot or one returning from the pool, which missed edits while
+   * dormant) inherits the presentation of a pre-existing group peer — the active
+   * cell when it is one — instead of sitting on its own state beside a styled
+   * group. Propagation runs FROM the peer, so a newborn's defaults never overwrite
+   * the group, and the equality short-circuits keep converged peers untouched.
+   */
+  alignNewCellStyles(preexisting) {
+    const setting = this.syncOpts.style;
+    if (!setting) return;
+    const ids = [...this.cellsById.keys()];
+    const propagated = /* @__PURE__ */ new Set();
+    for (const id of ids) {
+      if (preexisting.has(id)) continue;
+      const peers = syncTargets(id, setting, ids).filter((p) => preexisting.has(p));
+      if (peers.length === 0) continue;
+      const source = this.activeId && peers.includes(this.activeId) ? this.activeId : peers[0];
+      if (propagated.has(source)) continue;
+      propagated.add(source);
+      this.propagateStylePrefs(source);
+    }
+  }
+  /**
+   * Mirror an origin cell's presentation — the Canvas + Scales-and-lines slice of
+   * its renderer config plus its Status line tab prefs — onto its same-group
+   * followers (the style link). Loop-safe two ways: the busy guard eats the
+   * followers' SYNCHRONOUS echoes (their `applyConfig` re-fires `onConfigChanged`
+   * in the same tick), and the equality short-circuits leave already-converged
+   * followers untouched, so nothing re-emits once the group agrees.
+   */
+  propagateStylePrefs(originId) {
+    if (this.styleSyncBusy || this.destroyed) return;
+    const targets = syncTargets(originId, this.syncOpts.style, [...this.cellsById.keys()]);
+    if (targets.length === 0) return;
+    const origin = this.cellsById.get(originId);
+    if (!origin) return;
+    const slice = styleConfigSlice(origin.chart.renderer.getConfig());
+    const sliceJson = slice ? JSON.stringify(slice) : null;
+    const prefs = origin.statusPrefs();
+    this.styleSyncBusy = true;
+    try {
+      for (const id of targets) {
+        const cell = this.cellsById.get(id);
+        if (!cell) continue;
+        if (slice && sliceJson !== JSON.stringify(styleConfigSlice(cell.chart.renderer.getConfig()))) {
+          cell.chart.renderer.applyConfig(slice);
+        }
+        cell.applyStatusPrefs(prefs);
+      }
+    } finally {
+      this.styleSyncBusy = false;
+    }
+  }
   /**
    * Mirror an origin cell's pointer time onto its same-group followers as GHOST
    * crosshairs (`renderer.setExternalCrosshair`). The horizontal price level rides
@@ -8264,27 +8622,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)),
@@ -8292,7 +8655,8 @@ var VelaWorkspace = class {
         syncs: () => [
           { id: "symbol", label: "Symbol", checked: this.syncOpts.symbol === true },
           { id: "timeframe", label: "Interval", checked: this.syncOpts.timeframe === true },
-          { id: "crosshair", label: "Crosshair", checked: this.syncOpts.crosshair === true }
+          { id: "crosshair", label: "Crosshair", checked: this.syncOpts.crosshair === true },
+          { id: "style", label: "Style", checked: this.syncOpts.style === true }
         ],
         onToggleSync: (id) => {
           const kind = id;
@@ -8351,9 +8715,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 +8771,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({