@luxalgo/vela 0.6.6 → 0.6.8

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,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;
@@ -5143,6 +5219,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 +5243,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 +5256,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 +5283,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,23 +5458,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();
@@ -5384,7 +5542,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. */
@@ -5731,41 +5889,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 +12174,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 +12218,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 +12419,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 +13449,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 +13463,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 +13584,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 +13691,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 +13734,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 +14415,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 +14945,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 +14969,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 +15053,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";
@@ -17075,19 +17250,8 @@ function registerBuiltinChartTypes() {
   registerChartType({ id: "heikinashi", label: "Heikin Ashi", barTransform: HEIKIN_ASHI });
 }
 
-// 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;
@@ -17175,7 +17339,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") {
@@ -17218,6 +17382,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() {
@@ -19277,6 +19463,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);
@@ -19566,12 +19758,16 @@ var IndicatorInputsDialog = class {
       closeOnEscape: false,
       footer: (foot) => {
         foot.append(
+          this.resetAction(),
           this.dialogButton("Cancel", false, () => this.revertAndClose()),
           this.dialogButton("Ok", true, () => this.close())
         );
       },
+      // Stale-guard: destroying a dialog fires its machine's onOpenChange(false)
+      // asynchronously — after a reset rebuild that notification must not close
+      // the replacement dialog.
       onOpenChange: (open2) => {
-        if (!open2) this.close();
+        if (!open2 && this.uiDialog === ui) this.close();
       }
     });
     applyChromeTokens(ui.panel, t);
@@ -19702,6 +19898,30 @@ var IndicatorInputsDialog = class {
     }
     this.close();
   }
+  /** The footer's reset button — same chip as Cancel, pinned to the LEFT edge
+   *  (`margin-right:auto` against the footer's flex-end keeps Cancel/Ok right). */
+  resetAction() {
+    const b = this.dialogButton("Reset defaults", false, () => this.resetToDefaults());
+    b.style.marginRight = "auto";
+    return b;
+  }
+  /** Restore every input to its declared default (re-running the indicator), then
+   *  re-open the form so each control re-reads the restored values — the same
+   *  rebuild-after-reset move as the chart-settings dialog. The open-time snapshot
+   *  survives the rebuild, so Cancel after a reset still reverts the whole session. */
+  resetToDefaults() {
+    const row = this.row;
+    if (!row) return;
+    const snap = this.snapshot;
+    for (const inp of row.inputs) {
+      if (row.values[inp.key] !== inp.defval) {
+        row.values[inp.key] = inp.defval;
+        this.host.onChange?.({ indicatorId: row.id, key: inp.key, value: inp.defval });
+      }
+    }
+    this.open(row);
+    if (snap) this.snapshot = snap;
+  }
   /** Write one edit through: store it, notify the host, and re-apply the `when` gates. */
   commit(row, key, value) {
     row.values[key] = value;
@@ -31135,6 +31355,11 @@ function resizeSplit(split, dyTotal, minPx = MIN_PANE_PX) {
 }
 
 // src/renderers/native/backdrop/BackdropRenderer.ts
+function clipHighlightRect(x1, x2, left, right) {
+  const x = Math.max(left, x1);
+  const end = Math.min(right, x2);
+  return end > x ? { x, width: end - x } : null;
+}
 var BackdropRenderer = class {
   constructor() {
     this.canvas = null;
@@ -31167,17 +31392,22 @@ var BackdropRenderer = class {
   /** Renderer-owned session highlight bands: full-height (all panes), behind the grid.
    *  Session-zone washes (pre/post-market) paint first, host highlights on top. */
   drawHighlights(ctx, scene, coords) {
-    const bands = [...scene.sessionHighlightBands(), ...scene.highlights];
-    if (bands.length === 0) return;
+    const sessions = scene.sessionHighlightBands();
+    if (sessions.length > 0) {
+      const left = Math.max(0, coords.logicalToX(-0.5));
+      const right = Math.min(coords.width, coords.logicalToX(coords.barCount - 0.5));
+      this.drawHighlightSet(ctx, sessions, coords, left, right);
+    }
+    this.drawHighlightSet(ctx, scene.highlights, coords, 0, coords.width);
+  }
+  drawHighlightSet(ctx, bands, coords, left, right) {
     for (const band of bands) {
       const x1 = coords.timeToX(band.from);
       const x2 = coords.timeToX(band.to);
-      if (x2 < 0 || x1 > coords.width || x2 <= x1) continue;
-      const cx = Math.max(0, x1);
-      const cw = Math.min(coords.width, x2) - cx;
-      if (cw <= 0) continue;
+      const rect = clipHighlightRect(x1, x2, left, right);
+      if (!rect) continue;
       ctx.fillStyle = band.color;
-      ctx.fillRect(cx, 0, cw, coords.height);
+      ctx.fillRect(rect.x, 0, rect.width, coords.height);
     }
   }
   // ── grid ── vert/horz gate on `scene.showGrid` AND their own per-axis visibility
@@ -35625,8 +35855,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 +35881,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 +35902,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();
@@ -35918,61 +36149,144 @@ var MarketStatusTracker = class {
 };
 
 // src/widget/session-shading.ts
-function deriveSessionZones(regular, extended) {
+var DAY_MS2 = 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_MS2; cursor < to + DAY_MS2; cursor += DAY_MS2) {
+    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_MS2;
 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));
   }
 };
 
@@ -36409,7 +36723,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;
@@ -36419,12 +36737,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);
     });
@@ -36533,14 +36854,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. */
@@ -36636,10 +36961,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",
@@ -36674,12 +36999,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). */
@@ -37086,16 +37439,21 @@ var ChartCell = 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),
@@ -37106,8 +37464,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)
   };
 }
@@ -37446,6 +37808,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
@@ -37506,13 +37872,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);
@@ -37529,6 +37896,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 +37905,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 +37924,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(),
@@ -37584,7 +37956,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;
@@ -37612,7 +37985,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 +38057,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(),
@@ -37866,7 +38241,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;
@@ -37877,9 +38252,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();
@@ -37979,6 +38359,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());
@@ -37991,6 +38372,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));
@@ -38194,6 +38576,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)
@@ -38269,6 +38652,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;
@@ -38301,11 +38685,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
@@ -38580,27 +39020,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)),
@@ -38608,7 +39053,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;
@@ -38667,9 +39113,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 +39169,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({