@luxalgo/vela 0.6.7 → 0.6.8

package/dist/widget.cjs

@@ -5254,6 +5254,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;
@@ -5516,6 +5521,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");
@@ -5525,10 +5532,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);
@@ -5579,7 +5596,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. */
@@ -17315,19 +17332,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;
@@ -17415,7 +17421,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") {
@@ -17458,6 +17464,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/widget/persist.ts
 function localStorageAdapter(storageKey) {
   return {
@@ -19798,12 +19826,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);
@@ -19934,6 +19966,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;
@@ -31367,6 +31423,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;
@@ -31399,17 +31460,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
@@ -36151,61 +36217,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));
   }
 };
 
@@ -36642,7 +36791,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;
@@ -36769,14 +36922,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. */
@@ -36872,10 +37029,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",
@@ -36910,12 +37067,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). */
@@ -37322,16 +37507,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),
@@ -37342,8 +37532,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)
   };
 }
@@ -37676,6 +37870,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
@@ -37736,9 +37934,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);
@@ -37822,7 +38018,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;
@@ -38106,7 +38303,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;
@@ -38117,9 +38314,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();
@@ -38219,6 +38421,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());
@@ -38231,6 +38434,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));
@@ -38434,6 +38638,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)
@@ -38509,6 +38714,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;
@@ -38541,11 +38747,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
@@ -38853,7 +39115,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;