@luxalgo/vela 0.6.7 → 0.6.9

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

@@ -1,8 +1,8 @@
-import { parseSymbol, priceStyleIds, BUILTIN_PRICE_STYLES, tzButtonLabel, TIMEZONES, normalizeTimezone, tzMenuLabel, Vela, TypedEventBus, MultiProviderFeed, registerBuiltinChartTypes, resolveTheme, buildToolbar, createCustomMark, createAttributionMark, DrawingToolbar, applyAttributionMarkTheme, sharedBarStore, timeframeToMs } from './chunk-6WFKTAT4.js';
-import { chartType, resolveTopbarComposition, topbarActionOverride, TOPBAR_BUILTIN_IDS, widgetActions, SidePanel, sidePanels, DEFAULT_PANEL_ORDER, symbolRanking, resolveEngines, legendActionsProviderFor, statePersistenceHandlers, topbarHas, rendererDefaults, widgetAttachments, getDrawingType } from './chunk-L3I2CCYO.js';
-import { Tooltip, KeymapManager, isEditableTarget, Drawer } from './chunk-2R7BANEM.js';
-import { Menu, Dialog, applyPlotOverlayTokens, ensureUIHost } from './chunk-OICPLNU7.js';
-import { registerIcon, svg16, injectStyles, iconEl, iconMarkup, SESSION_PRE, SESSION_POST, SESSION_OFF, icon, categoricalColor } from './chunk-PN5KWFZ4.js';
+import { parseSymbol, priceStyleIds, BUILTIN_PRICE_STYLES, tzButtonLabel, TIMEZONES, normalizeTimezone, tzMenuLabel, LEGEND_AT_TOP_ATTR, Vela, TypedEventBus, MultiProviderFeed, registerBuiltinChartTypes, resolveTheme, buildToolbar, createCustomMark, createAttributionMark, DrawingToolbar, applyAttributionMarkTheme, sharedBarStore, timeframeToMs } from './chunk-6WDDVMBJ.js';
+import { chartType, resolveTopbarComposition, topbarActionOverride, TOPBAR_BUILTIN_IDS, widgetActions, SidePanel, sidePanels, DEFAULT_PANEL_ORDER, symbolRanking, resolveEngines, legendActionsProviderFor, legendCalloutsProviderFor, statePersistenceHandlers, topbarHas, rendererDefaults, widgetAttachments, getDrawingType } from './chunk-EQCHJZOT.js';
+import { Tooltip, KeymapManager, isEditableTarget, Drawer } from './chunk-62SVGONC.js';
+import { Menu, Dialog, CalloutBubble, applyPlotOverlayTokens, ensureUIHost } from './chunk-FCVIG7JG.js';
+import { registerIcon, svg16, injectStyles, iconEl, iconMarkup, SESSION_OFF, SESSION_POST, SESSION_PRE, categoricalColor } from './chunk-WFSZBX3R.js';
 import { baseOf } from './chunk-W4EJWLEO.js';
 
 // src/widget/timeframe.ts
@@ -599,6 +599,11 @@ var Topbar = class {
     /** 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;
@@ -649,7 +654,7 @@ var Topbar = class {
     this.leftActionsHost.className = "vela-widget-actions-left";
     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);
+    const tool = (cls, icon, tip, onClick) => this.toolButton(cls, icon, tip, onClick, this.tooltips);
     if (vis("undo-redo")) {
       this.undoBtn = tool("vela-widget-undo", "undo", "Undo", opts.onUndoClick);
       this.redoBtn = tool("vela-widget-redo", "redo", "Redo", opts.onRedoClick);
@@ -847,8 +852,8 @@ var Topbar = class {
   }
   renderStyleButton(doc) {
     this.styleButton.replaceChildren();
-    const icon2 = priceStyleIcon(this.priceStyle);
-    if (icon2) this.styleButton.appendChild(iconEl(icon2, doc));
+    const icon = priceStyleIcon(this.priceStyle);
+    if (icon) this.styleButton.appendChild(iconEl(icon, doc));
     else this.styleButton.appendChild(doc.createTextNode(priceStyleLabel(this.priceStyle)));
     this.styleButton.setAttribute("aria-label", `Chart style \u2014 ${priceStyleLabel(this.priceStyle)}`);
   }
@@ -861,6 +866,8 @@ var Topbar = class {
     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");
@@ -870,10 +877,20 @@ var Topbar = class {
       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);
@@ -924,15 +941,15 @@ 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. */
-  toolButton(cls, icon2, tip, onClick, sink) {
+  toolButton(cls, icon, tip, onClick, sink) {
     const doc = this.el.ownerDocument;
     const b = doc.createElement("button");
     b.className = `vela-widget-tool ${cls}`;
-    b.appendChild(iconEl(icon2, doc));
+    b.appendChild(iconEl(icon, doc));
     b.setAttribute("aria-label", tip);
     sink.push(new Tooltip(b, { content: tip, triggerId: `vela-tool-${cls}`, host: this.host }));
     if (onClick) b.addEventListener("click", onClick);
@@ -1612,13 +1629,13 @@ var MenuBuilder = class {
     this.actions = /* @__PURE__ */ new Map();
     this.seq = 0;
   }
-  entry(label, icon2, run, separatorBefore = false) {
+  entry(label, icon, run, separatorBefore = false) {
     const id = this.next();
     this.actions.set(id, run);
-    return { id, label, icon: icon2, separatorBefore };
+    return { id, label, icon, separatorBefore };
   }
-  submenu(label, icon2, submenu, separatorBefore = false) {
-    return { id: this.next(), label, icon: icon2, submenu, separatorBefore };
+  submenu(label, icon, submenu, separatorBefore = false) {
+    return { id: this.next(), label, icon, submenu, separatorBefore };
   }
   next() {
     this.seq += 1;
@@ -1855,8 +1872,8 @@ var ObjectTree = class extends SidePanel {
     const acts = doc.createElement("span");
     acts.className = "vela-ot-acts";
     head.appendChild(acts);
-    const op = (icon2, title, run) => {
-      acts.appendChild(this.btn({ icon: icon2, title, run }));
+    const op = (icon, title, run) => {
+      acts.appendChild(this.btn({ icon, title, run }));
     };
     if (pane.kind !== "price") {
       if (pane.order > 1) op("arrow-up", "Move pane up", () => chart.panes.move(pane.id, "up"));
@@ -1871,8 +1888,8 @@ 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", this.symbolRaw ? this.iconFor?.(this.symbolRaw) : void 0);
-      const el2 = this.row(icon2, row.label, row.visible, [
+      const icon = tickerIconEl(doc, base || "P", this.symbolName || "Price", "vela-ot-avatar", this.symbolRaw ? this.iconFor?.(this.symbolRaw) : void 0);
+      const el2 = this.row(icon, row.label, row.visible, [
         {
           icon: row.visible ? "eye" : "eye-off",
           title: row.visible ? "Hide" : "Show",
@@ -1991,16 +2008,16 @@ var ObjectTree = class extends SidePanel {
     const doc = this.el.ownerDocument;
     const { chart } = pass;
     const markup = drawingMeta(d.type).icon;
-    let icon2;
+    let icon;
     if (markup) {
-      icon2 = doc.createElement("span");
-      icon2.className = "vela-icon";
-      icon2.setAttribute("aria-hidden", "true");
-      icon2.innerHTML = markup;
+      icon = doc.createElement("span");
+      icon.className = "vela-icon";
+      icon.setAttribute("aria-hidden", "true");
+      icon.innerHTML = markup;
     } else {
-      icon2 = iconEl("pen", doc);
+      icon = iconEl("pen", doc);
     }
-    const el = this.row(icon2, drawingLabel(d), d.visible, [
+    const el = this.row(icon, drawingLabel(d), d.visible, [
       {
         icon: d.locked ? "lock" : "unlock",
         title: d.locked ? "Unlock" : "Lock",
@@ -2066,7 +2083,7 @@ var ObjectTree = class extends SidePanel {
     }
   }
   /** The shared row shell: icon, name, optional tag, then the action buttons. */
-  row(icon2, label, visible, actions, tag) {
+  row(icon, label, visible, actions, tag) {
     const doc = this.el.ownerDocument;
     const el = doc.createElement("div");
     el.className = "vela-ot-row";
@@ -2075,7 +2092,7 @@ var ObjectTree = class extends SidePanel {
     name.className = "vela-ot-name";
     name.textContent = label;
     name.title = label;
-    el.append(icon2, name);
+    el.append(icon, name);
     if (tag) {
       const t = doc.createElement("span");
       t.className = "vela-ot-tag";
@@ -3667,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;
@@ -3767,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") {
@@ -3810,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() {
@@ -3912,45 +3940,24 @@ var CSS10 = `
 }
 .vela-statusline .vela-sl-symbol { font-weight: 600; font-size: var(--vela-font-size-lg); }
 .vela-statusline .vela-sl-meta { color: var(--vela-fg-muted); font-size: var(--vela-font-size-md); font-weight: 600; }
-/* Market status badge \u2014 icon-only 16px circle, label on hover (kit tooltip). */
-.vela-statusline .vela-sl-market {
-    display: inline-grid;
-    place-items: center;
-    width: 16px;
-    height: 16px;
-    border-radius: 50%;
-    flex: none;
-    align-self: center;
-    line-height: 0;
-    cursor: default;
-}
-.vela-statusline .vela-sl-market svg {
-    width: 12px;
-    height: 12px;
-    display: block;
-}
-/* Open wears the theme's up color; the other sessions are meaning constants from the
- * palette (amber pre, sky post, gray closed/holiday). Same ink at 20% for the circle. */
-.vela-statusline .vela-sl-market[data-status='open'] {
-    background: color-mix(in srgb, var(--vela-up) 20%, transparent);
-    color: var(--vela-up);
-}
-.vela-statusline .vela-sl-market[data-status='pre'] { background: color-mix(in srgb, ${SESSION_PRE} 20%, transparent); color: ${SESSION_PRE}; }
-.vela-statusline .vela-sl-market[data-status='post'] { background: color-mix(in srgb, ${SESSION_POST} 20%, transparent); color: ${SESSION_POST}; }
-.vela-statusline .vela-sl-market[data-status='closed'],
-.vela-statusline .vela-sl-market[data-status='holiday'] { background: color-mix(in srgb, ${SESSION_OFF} 20%, transparent); color: ${SESSION_OFF}; }
+/* Market status badge \u2014 a kit callout bubble (icon-only 16px circle, label on hover
+ * via the kit tooltip); the session tint is applied per status in setMarketStatus. */
+.vela-statusline .vela-sl-market { align-self: center; }
 .vela-statusline .vela-sl-ohlc { display: flex; gap: var(--vela-space-1); color: var(--vela-fg-muted); }
 .vela-statusline .vela-sl-ohlc b { color: var(--vela-fg); font-weight: 500; }
 /* The change value wears the SAME ink as the OHLC values (set inline per render) \u2014
  * these are the pre-ink fallbacks only. */
 .vela-statusline .vela-sl-change[data-dir='up'] { color: var(--vela-up); }
 .vela-statusline .vela-sl-change[data-dir='down'] { color: var(--vela-down); }
-/* Stack the renderer's PRICE-pane legend below the status line (study panes stay put).
- * The renderer sets the legend's inline top \u2014 shift with a transform, don't fight it.
- * Scoped to hosts that actually CARRY a status line (the marker class set by the
- * Statusline constructor) \u2014 the stylesheet is document-global, so a bare container
- * class here would shift every chart on the page, including statusline-less ones. */
-.vela-has-statusline [data-vela-pane='price'] { transform: translateY(26px); }
+/* Stack the TOP pane's legend below the status line (lower study panes stay put).
+ * The renderer marks whichever legend sits at the plot's top edge \u2014 the price pane
+ * normally, or a maximized study pane filling the plot \u2014 so the legend never merges
+ * with the status line whichever pane owns the top. The renderer sets the legend's
+ * inline top \u2014 shift with a transform, don't fight it. Scoped to hosts that actually
+ * CARRY a status line (the marker class set by the Statusline constructor) \u2014 the
+ * stylesheet is document-global, so a bare attribute selector here would shift every
+ * chart on the page, including statusline-less ones. */
+.vela-has-statusline [${LEGEND_AT_TOP_ATTR}] { transform: translateY(26px); }
 /* Mobile: two-line chip \u2014 logo / symbol / meta / market status on one aligned row, the
  * bar change on the next. Full O/H/L/C stays hidden (too dense on a phone-width plot).
  * GRID, not a wrapping flexbox: an absolutely positioned wrapping flex container sizes
@@ -3986,7 +3993,7 @@ var CSS10 = `
     font-size: var(--vela-font-size-sm);
     line-height: 1.2;
 }
-[data-layout='mobile'] .vela-has-statusline [data-vela-pane='price'] { transform: translateY(40px); }
+[data-layout='mobile'] .vela-has-statusline [${LEGEND_AT_TOP_ATTR}] { transform: translateY(40px); }
 /* FIT mode (multi-chart cells \u2014 see setFitMode): the line never wraps; segments that
  * don't fit are HIDDEN by fit() (change first, then meta, then the market badge), so
  * overflow:hidden only guards the transient between a resize and the next measure.
@@ -4003,7 +4010,7 @@ var CSS10 = `
     padding-left: 0;
 }
 /* One row again \u2014 the mobile two-line shift doesn't apply in fit mode. */
-[data-layout='mobile'] .vela-sl-fit-host.vela-has-statusline [data-vela-pane='price'] { transform: translateY(26px); }
+[data-layout='mobile'] .vela-sl-fit-host.vela-has-statusline [${LEGEND_AT_TOP_ATTR}] { transform: translateY(26px); }
 `;
 function baseOfTicker(ticker) {
   return ticker.replace(/[-_/]?(USDT|USDC|USD1|USDS|BUSD|USD|EUR|PERP)$/i, "") || ticker;
@@ -4015,6 +4022,13 @@ var MARKET_LABELS = {
   closed: "Market Closed",
   holiday: "Market Holiday"
 };
+var MARKET_INKS = {
+  open: "var(--vela-up)",
+  pre: SESSION_PRE,
+  post: SESSION_POST,
+  closed: SESSION_OFF,
+  holiday: SESSION_OFF
+};
 function statuslineInkOf(renderer, priceStyle) {
   const cfg = renderer.getConfig();
   const c = (v) => typeof v === "string" ? v : null;
@@ -4073,8 +4087,15 @@ var Statusline = class {
     this.symbolEl.textContent = ticker;
     this.metaEl = doc.createElement("span");
     this.metaEl.className = "vela-sl-meta";
-    this.marketEl = doc.createElement("span");
-    this.marketEl.className = "vela-sl-market";
+    this.marketBubble = new CalloutBubble({
+      icon: "market-open",
+      background: `color-mix(in srgb, ${MARKET_INKS.open} 20%, transparent)`,
+      color: MARKET_INKS.open,
+      label: MARKET_LABELS.open,
+      host
+    });
+    this.marketEl = this.marketBubble.el;
+    this.marketEl.classList.add("vela-sl-market");
     this.ohlcEl = doc.createElement("span");
     this.ohlcEl.className = "vela-sl-ohlc";
     this.changeEl = doc.createElement("span");
@@ -4162,8 +4183,13 @@ var Statusline = class {
    *  hover label. Callers with no session model leave the constructor's 'open'. */
   setMarketStatus(status) {
     this.marketEl.dataset.status = status;
-    this.marketEl.innerHTML = icon(`market-${status}`);
-    this.marketEl.setAttribute("aria-label", MARKET_LABELS[status]);
+    const ink = MARKET_INKS[status];
+    this.marketBubble.set({
+      icon: `market-${status}`,
+      background: `color-mix(in srgb, ${ink} 20%, transparent)`,
+      color: ink,
+      label: MARKET_LABELS[status]
+    });
     this.marketTip.setContent(MARKET_LABELS[status]);
   }
   setPartVisible(part, visible) {
@@ -4196,6 +4222,7 @@ var Statusline = class {
     this.fitRO?.disconnect();
     this.fitRO = null;
     this.marketTip.destroy();
+    this.marketBubble.destroy();
     this.host.classList.remove("vela-has-statusline", "vela-sl-fit-host");
     this.el.remove();
   }
@@ -4645,61 +4672,148 @@ 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";
+    /** Whether one bar is shorter than a civil day — only then do pre/post bars exist. */
+    this.intraday = false;
+    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;
+    const tfMs = timeframeMs(opts.timeframe);
+    this.intraday = Number.isFinite(tfMs) && tfMs < DAY_MS;
+    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" || !this.intraday) {
+      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));
   }
 };
 
@@ -4891,6 +5005,7 @@ var ChartCell = class {
     this.inner.renderer.set("attribution", false);
     this.inner.renderer.set("dialogHost", deps.dialogHost);
     this.inner.renderer.setLegendActions(legendActionsProviderFor(this.inner, () => deps.context()));
+    this.inner.renderer.setLegendCallouts(legendCalloutsProviderFor(this.inner, () => deps.context()));
     if (this.inner.renderer.supports("historyChords")) this.inner.renderer.set("historyChords", false);
     this.history.onChart(this.inner);
     this.inner.renderer.onConfigChanged(() => {
@@ -4924,7 +5039,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;
@@ -5003,20 +5122,30 @@ var ChartCell = class {
     this.refreshNativeCatalog();
     this.pushSettingsSections();
     this.offMarket = this.inner.on("market:changed", ({ symbol: symbol2, timeframe }) => {
-      this.state.symbol = symbol2;
-      this.state.provider = parseSymbol(symbol2).provider ?? void 0;
-      this.state.timeframe = timeframe;
-      this.state.session = normalizeSession(this.inner?.market.session);
-      this.watermark?.update(symbol2, timeframe);
-      this.statusline?.setSymbol(symbol2);
-      this.statusline?.setMeta(timeframe, this.inner?.data.displayPrefix(symbol2) ?? this.state.provider ?? "");
-      if (this.inner) this.statusline?.onChart(this.inner);
+      this.projectMarket(symbol2, timeframe);
       this.refreshNativeCatalog();
       this.refreshSessionAvailable();
       if (this.inner) this.marketStatus?.track(this.inner.data, symbol2);
       this.deps.onMarketChanged(this.id);
     });
   }
+  /**
+   * Project a market identity into the cell state and its display overlays (watermark,
+   * statusline), WITHOUT the data-dependent bookkeeping. Runs twice per user pick: once
+   * optimistically from the cell setters — the labels reflect the pick immediately, not
+   * after the bars load — and again from `market:changed` (the committed pass, and the
+   * only pass for host `chart.setMarket` calls). Idempotent, so the double run converges.
+   */
+  projectMarket(symbol, timeframe) {
+    this.state.symbol = symbol;
+    this.state.provider = parseSymbol(symbol).provider ?? void 0;
+    this.state.timeframe = timeframe;
+    this.state.session = normalizeSession(this.inner?.market.session);
+    this.watermark?.update(symbol, timeframe);
+    this.statusline?.setSymbol(symbol);
+    this.statusline?.setMeta(timeframe, this.inner?.data.displayPrefix(symbol) ?? this.state.provider ?? "");
+    if (this.inner) this.statusline?.onChart(this.inner);
+  }
   /**
    * Does this cell's market HAVE sessions (RTH/ETH meaningful)? Derived from the
    * symbol's own metadata (`syminfo.session !== '24x7'`), asynchronously — the
@@ -5051,14 +5180,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, timeframe: this.timeframe, 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. */
@@ -5154,10 +5287,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",
@@ -5192,12 +5325,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). */
@@ -5219,17 +5380,23 @@ var ChartCell = class {
   get indicatorCount() {
     return this.instances.length + this.nativeCatalog.filter((n) => n.present).length;
   }
-  /** Switch this cell's market in place (the chart instance survives). */
+  /** Switch this cell's market in place (the chart instance survives). The projection
+   *  is OPTIMISTIC — labels and chrome show the pick before the bars load; it follows
+   *  the setMarket call so the statusline reads the already-blanked chart. */
   setSymbol(symbol) {
     if (!this.inner || symbol === this.symbol) return;
     this.unresolvedToasted = null;
     void this.inner.setMarket({ symbol });
+    this.projectMarket(symbol, this.timeframe);
+    this.deps.onMarketChanged(this.id);
   }
   setTimeframe(timeframe) {
     if (!this.inner || timeframe === this.timeframe) return;
     this.activeRangeId = null;
     this.rangeBars = 0;
     void this.inner.setMarket({ timeframe, bars: this.state.bars });
+    this.projectMarket(this.symbol, timeframe);
+    this.deps.onMarketChanged(this.id);
   }
   /** Applied live (renderer feature) — no reload. */
   setPriceStyle(style) {
@@ -6092,11 +6259,11 @@ var MobileBar = class {
     injectStyles(STYLE_ID13, CSS13, doc);
     this.el = doc.createElement("div");
     this.el.className = "vela-mobilebar";
-    const item = (cls, label, onClick, icon2) => {
+    const item = (cls, label, onClick, icon) => {
       const b = doc.createElement("button");
       b.className = `vela-mb-item ${cls}`;
       b.setAttribute("aria-label", label);
-      if (icon2) b.appendChild(iconEl(icon2, doc));
+      if (icon) b.appendChild(iconEl(icon, doc));
       b.addEventListener("click", onClick);
       return b;
     };
@@ -6642,11 +6809,11 @@ var MoreDrawer = class {
   renderMain(doc) {
     const actions = doc.createElement("div");
     actions.className = "vela-md-actions";
-    const action = (icon2, label, enabled, run) => {
+    const action = (icon, label, enabled, run) => {
       const b = doc.createElement("button");
       b.className = "vela-md-action";
       b.disabled = !enabled;
-      b.appendChild(iconEl(icon2, doc));
+      b.appendChild(iconEl(icon, doc));
       b.appendChild(doc.createTextNode(label));
       b.addEventListener("click", () => {
         run();
@@ -7071,11 +7238,11 @@ var DrawingPill = class {
     this.el.hidden = true;
     this.toolGlyph = doc.createElement("span");
     this.toolGlyph.className = "vela-drawpill-tool";
-    const btn = (icon2, label, onClick) => {
+    const btn = (icon, label, onClick) => {
       const b = doc.createElement("button");
       b.className = "vela-drawpill-btn";
       b.setAttribute("aria-label", label);
-      b.appendChild(iconEl(icon2, doc));
+      b.appendChild(iconEl(icon, doc));
       b.addEventListener("click", onClick);
       return b;
     };
@@ -7139,16 +7306,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),
@@ -7159,8 +7331,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)
   };
 }
@@ -7254,6 +7430,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
@@ -7314,9 +7494,7 @@ 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);
@@ -7400,7 +7578,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;
@@ -7619,7 +7798,10 @@ var VelaWorkspace = class {
     this.topbar.renderActions();
     this.mobileBar?.renderActions();
     this.dock.refresh();
-    for (const cell of this.cells()) cell.chart.renderer.setLegendActions(legendActionsProviderFor(cell.chart, () => this.context()));
+    for (const cell of this.cells()) {
+      cell.chart.renderer.setLegendActions(legendActionsProviderFor(cell.chart, () => this.context()));
+      cell.chart.renderer.setLegendCallouts(legendCalloutsProviderFor(cell.chart, () => this.context()));
+    }
   }
   // ── state surface (the SDK's read/restore of the whole grid's config + content) ──
   /**
@@ -7684,7 +7866,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;
@@ -7695,9 +7877,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();
@@ -7797,6 +7984,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());
@@ -7809,6 +7997,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));
@@ -8012,6 +8201,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)
@@ -8087,6 +8277,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;
@@ -8119,11 +8310,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
@@ -8431,7 +8678,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;