@luxalgo/vela 0.6.7 → 0.6.9

package/dist/workspace.cjs

@@ -1097,11 +1097,11 @@ registerIcon(
 );
 registerIcon(
   "market-pre",
-  svg24('<path d="M12 2v8"/><path d="m4.93 10.93 1.41 1.41"/><path d="M2 18h2"/><path d="M20 18h2"/><path d="m19.07 10.93-1.41 1.41"/><path d="M22 22H2"/><path d="m16 6-4 4-4-4"/><path d="M16 18a4 4 0 0 0-8 0"/>')
+  svg24('<path d="M12 2v8"/><path d="m4.93 10.93 1.41 1.41"/><path d="M2 18h2"/><path d="M20 18h2"/><path d="m19.07 10.93-1.41 1.41"/><path d="M22 22H2"/><path d="m8 6 4-4 4 4"/><path d="M16 18a4 4 0 0 0-8 0"/>')
 );
 registerIcon(
   "market-post",
-  svg24('<path d="M12 10V2"/><path d="m4.93 10.93 1.41 1.41"/><path d="M2 18h2"/><path d="M20 18h2"/><path d="m19.07 10.93-1.41 1.41"/><path d="M22 22H2"/><path d="m16 18-4-4-4 4"/><path d="M16 6a4 4 0 0 0-8 0"/>')
+  svg24('<path d="M12 10V2"/><path d="m4.93 10.93 1.41 1.41"/><path d="M2 18h2"/><path d="M20 18h2"/><path d="m19.07 10.93-1.41 1.41"/><path d="M22 22H2"/><path d="m16 14-4 4-4-4"/><path d="M16 6a4 4 0 0 0-8 0"/>')
 );
 registerIcon("market-closed", svg24('<path d="M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z"/>'));
 registerIcon(
@@ -4195,6 +4195,192 @@ function buildFieldControl(desc) {
   return { el };
 }
 
+// src/ui/components/callout-bubble/controller.ts
+function closesPanel(item) {
+  return item.close !== false;
+}
+function calloutPanelRows(items) {
+  const rows = [];
+  for (const item of items) {
+    if (item.type === "text") {
+      rows.push({ type: "text", text: item.text });
+      continue;
+    }
+    const last = rows[rows.length - 1];
+    if (last && last.type === "buttons") last.buttons.push(item);
+    else rows.push({ type: "buttons", buttons: [item] });
+  }
+  return rows;
+}
+
+// src/ui/components/callout-bubble/styles.ts
+var CALLOUT_STYLE_ID = "vela-ui-callout-bubble";
+var CALLOUT_CSS = `
+.vela-callout {
+    display: inline-grid;
+    place-items: center;
+    border-radius: 50%;
+    flex: none;
+    line-height: 0;
+    box-sizing: border-box;
+    cursor: default;
+    user-select: none;
+    -webkit-user-select: none;
+}
+.vela-callout[role='button'] { cursor: pointer; }
+.vela-callout svg { display: block; }
+/* The deployed panel \u2014 carries the kit's elevated-card look itself (the popover
+   shell is bare positioning chrome). */
+.vela-callout-panel {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    padding: 10px 12px;
+    max-width: 280px;
+    box-sizing: border-box;
+    background: var(--vela-surface-elev);
+    border: 1px solid var(--vela-border-strong);
+    border-radius: 6px;
+    box-shadow: var(--vela-shadow);
+    color: var(--vela-fg);
+    font: var(--vela-font-size-md) var(--vela-font);
+}
+.vela-callout-title { font-weight: 600; color: var(--vela-fg-bright); }
+.vela-callout-text { color: var(--vela-fg-muted); line-height: 1.45; white-space: pre-line; }
+.vela-callout-actions { display: flex; flex-wrap: wrap; gap: 8px; }
+.vela-callout-btn {
+    cursor: pointer;
+    height: 26px;
+    padding: 0 10px;
+    border-radius: 5px;
+    border: 1px solid var(--vela-border);
+    background: transparent;
+    color: var(--vela-fg);
+    font-size: var(--vela-font-size-md);
+    font-family: inherit;
+    transition: background var(--vela-dur-fast) ease, color var(--vela-dur-fast) ease, opacity var(--vela-dur-fast) ease, border-color var(--vela-dur-fast) ease;
+}
+.vela-callout-btn:hover { background: var(--vela-hover); color: var(--vela-fg-bright); border-color: var(--vela-fg-muted); }
+.vela-callout-btn-primary { border-color: var(--vela-selected-bg); background: var(--vela-selected-bg); color: var(--vela-selected-fg); }
+.vela-callout-btn-primary:hover { background: var(--vela-selected-bg); color: var(--vela-selected-fg); opacity: 0.85; border-color: var(--vela-selected-bg); }
+`;
+
+// src/ui/components/callout-bubble/view.ts
+var CalloutBubble = class {
+  constructor(opts) {
+    this.pop = null;
+    this.spec = { icon: opts.icon, background: opts.background, label: opts.label };
+    if (opts.color !== void 0) this.spec.color = opts.color;
+    if (opts.panel !== void 0) this.spec.panel = opts.panel;
+    this.size = opts.size ?? 16;
+    this.host = opts.host;
+    this.theme = opts.theme;
+    this.boundary = opts.boundary;
+    const doc = (opts.host ?? document.body).ownerDocument;
+    injectStyles(CALLOUT_STYLE_ID, CALLOUT_CSS, doc);
+    this.el = doc.createElement("span");
+    this.el.className = "vela-callout";
+    this.el.style.width = `${this.size}px`;
+    this.el.style.height = `${this.size}px`;
+    this.el.addEventListener("click", (e) => {
+      if (!this.spec.panel) return;
+      e.stopPropagation();
+      this.toggle();
+    });
+    this.el.addEventListener("dblclick", (e) => {
+      if (this.spec.panel) e.stopPropagation();
+    });
+    this.el.addEventListener("keydown", (e) => {
+      if (!this.spec.panel || e.key !== "Enter" && e.key !== " ") return;
+      e.preventDefault();
+      this.toggle();
+    });
+    this.dress();
+  }
+  /** Re-dress the bubble (a status change: new icon, tint, label, panel). */
+  set(spec) {
+    this.spec = { ...this.spec, ...spec };
+    if ("panel" in spec) this.pop?.hide();
+    this.dress();
+  }
+  /** Whether the deployed panel is currently open. */
+  get open() {
+    return this.pop?.open ?? false;
+  }
+  destroy() {
+    this.pop?.destroy();
+    this.pop = null;
+    this.el.remove();
+  }
+  dress() {
+    const clickable = this.spec.panel !== void 0;
+    this.el.style.background = this.spec.background;
+    this.el.style.color = this.spec.color ?? "";
+    this.el.innerHTML = iconAt(this.spec.icon, this.size - 4);
+    this.el.setAttribute("aria-label", this.spec.label);
+    if (clickable) {
+      this.el.setAttribute("role", "button");
+      this.el.tabIndex = 0;
+    } else {
+      this.el.removeAttribute("role");
+      this.el.removeAttribute("tabindex");
+    }
+  }
+  toggle() {
+    if (this.pop?.open) {
+      this.pop.hide();
+      return;
+    }
+    const panel = this.spec.panel;
+    if (!panel) return;
+    this.pop?.destroy();
+    this.pop = new Popover({
+      trigger: this.el,
+      gap: 6,
+      content: (body) => this.buildPanel(body, panel),
+      ...this.host ? { host: this.host } : {},
+      ...this.theme ? { theme: this.theme() } : {},
+      ...this.boundary ? { boundary: this.boundary } : {}
+    });
+    this.pop.show();
+  }
+  buildPanel(body, panel) {
+    const doc = body.ownerDocument;
+    const root = doc.createElement("div");
+    root.className = "vela-callout-panel";
+    if (panel.title) {
+      const title = doc.createElement("div");
+      title.className = "vela-callout-title";
+      title.textContent = panel.title;
+      root.appendChild(title);
+    }
+    for (const row of calloutPanelRows(panel.items)) {
+      if (row.type === "text") {
+        const text = doc.createElement("div");
+        text.className = "vela-callout-text";
+        text.textContent = row.text;
+        root.appendChild(text);
+        continue;
+      }
+      const actions = doc.createElement("div");
+      actions.className = "vela-callout-actions";
+      for (const item of row.buttons) {
+        const btn2 = doc.createElement("button");
+        btn2.type = "button";
+        btn2.className = "vela-callout-btn" + (item.primary ? " vela-callout-btn-primary" : "");
+        btn2.textContent = item.label;
+        btn2.addEventListener("click", () => {
+          item.run();
+          if (closesPanel(item)) this.pop?.hide();
+        });
+        actions.appendChild(btn2);
+      }
+      root.appendChild(actions);
+    }
+    body.appendChild(root);
+  }
+};
+
 // src/widget/layout-picker.ts
 var STYLE_ID = "vela-widget-layout-picker-v14";
 var CSS2 = `
@@ -4642,6 +4828,44 @@ function legendActionsProviderFor(chart, context) {
     return legendActions().filter((d) => !d.when || d.when(info)).map((d) => ({ id: d.id, icon: d.icon, tooltip: d.tooltip, run: () => d.run(context(), info) }));
   };
 }
+var calloutRegistry = /* @__PURE__ */ new Map();
+function legendCallouts() {
+  return [...calloutRegistry.values()].sort((a, b) => (a.order ?? 0) - (b.order ?? 0));
+}
+function legendCalloutsProviderFor(chart, context) {
+  return (indicatorId) => {
+    const handle = chart.indicators().find((h) => h.id === indicatorId);
+    if (!handle) return [];
+    const info = { id: handle.id, title: handle.title, ...handle.source !== void 0 ? { source: handle.source } : {} };
+    const views = [];
+    for (const d of legendCallouts()) {
+      const spec = d.callout(info);
+      if (!spec) continue;
+      views.push({
+        id: d.id,
+        icon: spec.icon,
+        background: spec.background,
+        ...spec.color !== void 0 ? { color: spec.color } : {},
+        tooltip: spec.tooltip,
+        ...spec.content !== void 0 ? {
+          content: {
+            ...spec.content.title !== void 0 ? { title: spec.content.title } : {},
+            items: spec.content.items.map(
+              (item) => item.type === "text" ? item : {
+                type: "button",
+                label: item.label,
+                ...item.primary !== void 0 ? { primary: item.primary } : {},
+                ...item.close !== void 0 ? { close: item.close } : {},
+                run: () => item.run(context(), info)
+              }
+            )
+          }
+        } : {}
+      });
+    }
+    return views;
+  };
+}
 var stateHandlers = /* @__PURE__ */ new Map();
 function statePersistenceHandlers(scope) {
   return [...stateHandlers.values()].filter((h) => h.scope === scope);
@@ -5200,6 +5424,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;
@@ -5462,6 +5691,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");
@@ -5471,10 +5702,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);
@@ -5525,7 +5766,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. */
@@ -17233,19 +17474,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;
@@ -17333,7 +17563,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") {
@@ -17376,6 +17606,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() {
@@ -17482,6 +17734,7 @@ var IndicatorHandleImpl = class {
   constructor(id, title, controller, source) {
     this.controller = controller;
     this.schema = [];
+    this.propsSchema = [];
     this.visibleState = true;
     this.bus = new TypedEventBus();
     this.id = id;
@@ -17491,6 +17744,9 @@ var IndicatorHandleImpl = class {
   get inputs() {
     return this.schema;
   }
+  get props() {
+    return this.propsSchema;
+  }
   get visible() {
     return this.visibleState;
   }
@@ -17500,6 +17756,12 @@ var IndicatorHandleImpl = class {
   setInputs(values) {
     this.controller.applyInputs(this.id, values);
   }
+  setProp(key, value) {
+    this.controller.applyProps(this.id, { [key]: value });
+  }
+  setProps(values) {
+    this.controller.applyProps(this.id, values);
+  }
   setVisible(visible) {
     this.controller.setVisible(this.id, visible);
   }
@@ -17519,6 +17781,9 @@ var IndicatorHandleImpl = class {
   setSchema(schema) {
     this.schema = schema;
   }
+  setPropsSchema(schema) {
+    this.propsSchema = schema;
+  }
   /** Sync the public `visible` getter when the orchestrator changes visibility (API or legend eye). */
   setVisibleState(visible) {
     this.visibleState = visible;
@@ -17532,6 +17797,8 @@ var IndicatorHandleImpl = class {
 function summarizeModel(model) {
   const series = {};
   for (const s of model.series) series[s.kind] = (series[s.kind] ?? 0) + 1;
+  const countOverlay = (items) => items?.filter((i) => i.overlay === true).length ?? 0;
+  const forcedOverlay = countOverlay(model.series) + countOverlay(model.fills) + countOverlay(model.backgrounds) + countOverlay(model.lines) + countOverlay(model.boxes) + countOverlay(model.labels) + countOverlay(model.polylines) + countOverlay(model.linefills) + countOverlay(model.tables);
   return {
     id: model.id,
     title: model.title,
@@ -17551,7 +17818,8 @@ function summarizeModel(model) {
     tables: model.tables?.length ?? 0,
     barColors: model.barColors?.length ?? 0,
     trades: model.trades?.length ?? 0,
-    inputs: model.inputs.length
+    inputs: model.inputs.length,
+    forcedOverlay
   };
 }
 function inspectModels(models) {
@@ -17572,7 +17840,8 @@ function inspectModels(models) {
       linefills: sum((s) => s.linefills),
       tables: sum((s) => s.tables),
       barColors: sum((s) => s.barColors),
-      trades: sum((s) => s.trades)
+      trades: sum((s) => s.trades),
+      forcedOverlay: sum((s) => s.forcedOverlay)
     }
   };
 }
@@ -17716,7 +17985,9 @@ var EngineOrchestrator = class _EngineOrchestrator {
     for (const engine of engines) this.registerEngine(engine.language, engine);
     this.defaultLanguage = config.defaultLanguage;
     this.renderer.mount(container, config.theme);
-    this.renderer.onInputChange((e) => this.applyInputs(e.indicatorId, { [e.key]: e.value }));
+    this.renderer.onInputChange(
+      (e) => e.kind === "prop" ? this.applyProps(e.indicatorId, { [e.key]: e.value }) : this.applyInputs(e.indicatorId, { [e.key]: e.value })
+    );
     this.renderer.onRemoveIndicator((id) => this.removeIndicator(id));
     this.renderer.onToggleIndicatorVisible?.((id, visible) => this.setVisible(id, visible));
     this.paneActionUnsub = this.renderer.onPaneAction?.((a) => this.handlePaneAction(a)) ?? null;
@@ -18396,7 +18667,7 @@ var EngineOrchestrator = class _EngineOrchestrator {
     const title = options.title ?? "Indicator";
     const handle = new IndicatorHandleImpl(id, title, this, source);
     this.handles.set(id, handle);
-    this.registry.add({ id, title, source, options, inputValues: { ...options.inputs ?? {} } });
+    this.registry.add({ id, title, source, options, inputValues: { ...options.inputs ?? {} }, propValues: { ...options.props ?? {} } });
     void this.startIndicator(id, source, options, handle);
     return handle;
   }
@@ -18419,7 +18690,7 @@ var EngineOrchestrator = class _EngineOrchestrator {
       return handle;
     }
     const inputValues = { ...descriptor.defaultInputs(), ...options.inputs ?? {} };
-    this.registry.add({ id, title, source: type, inputValues, native: { type, instance: descriptor.create(), descriptor } });
+    this.registry.add({ id, title, source: type, inputValues, propValues: {}, native: { type, instance: descriptor.create(), descriptor } });
     handle.setSchema(descriptor.inputsSchema());
     void this.startNativeIndicator(id, handle);
     return handle;
@@ -18472,6 +18743,19 @@ var EngineOrchestrator = class _EngineOrchestrator {
     if (record.session) record.session.update(record.inputValues);
     else if (record.native && !record.hidden) record.native.instance.setInputs(record.inputValues);
   }
+  /** IndicatorController: re-run an indicator with merged declaration-prop overrides.
+   *  Same lifecycle as {@link applyInputs} — a prop change replays the whole script.
+   *  Script indicators only: natives have no declaration props. */
+  applyProps(id, values) {
+    const record = this.registry.get(id);
+    if (!record?.session) return;
+    record.propValues = { ...record.propValues, ...values };
+    if (record.renderHandle) this.renderer.setIndicatorInputs(record.renderHandle, record.inputValues, record.propValues);
+    record.pendingStructural = true;
+    if (!record.hidden) this.setLoading(record, true);
+    record.pendingCause = "inputs";
+    record.session.update(record.inputValues, record.propValues);
+  }
   /** IndicatorController: tear down an indicator and (if now empty) its pane. */
   /** Live handles of every indicator on the chart (script + native), insertion order. */
   listIndicators() {
@@ -18620,6 +18904,10 @@ var EngineOrchestrator = class _EngineOrchestrator {
       for (const input of prepared.inputs) defaults2[input.key] = input.defval;
       record.inputValues = { ...defaults2, ...record.inputValues };
       handle.setSchema(prepared.inputs);
+      const propDefaults = {};
+      for (const prop of prepared.props ?? []) propDefaults[prop.key] = prop.defval;
+      record.propValues = { ...propDefaults, ...record.propValues };
+      handle.setPropsSchema(prepared.props ?? []);
       this.mountLoadingPlaceholder(id, record);
       this.executeIndicator(id, handle);
     } catch (err) {
@@ -18643,6 +18931,7 @@ var EngineOrchestrator = class _EngineOrchestrator {
         getBars: () => this.bars,
         fetchSeries: (sym, tf, range) => this.fetchSeries(sym, tf, range),
         inputs: record.inputValues,
+        props: record.propValues,
         visibleRange: this.currentVisibleRange(),
         mode,
         // Mid-backfill session starts (add / re-show / price-style re-execute) let the
@@ -18736,6 +19025,9 @@ var EngineOrchestrator = class _EngineOrchestrator {
     const meta = record.prepared.meta;
     const model = {
       id,
+      // Deliberately the FULL title, never a shorttitle: while the script loads the
+      // legend identifies it by its full name; the compact shorttitle arrives with
+      // the first computed model and takes over from there.
       title: record.options?.title ?? meta.title,
       overlay: meta.overlay,
       paneHint: meta.overlay ? "price" : "new",
@@ -18744,7 +19036,8 @@ var EngineOrchestrator = class _EngineOrchestrator {
       backgrounds: [],
       priceLines: [],
       inputs: record.prepared.inputs,
-      inputValues: record.inputValues
+      inputValues: record.inputValues,
+      ...record.prepared.props ? { props: record.prepared.props, propValues: record.propValues } : {}
     };
     const paneId = this.routePane(id, model, record.options ?? {});
     this.placeModel(model, id, paneId);
@@ -18977,7 +19270,7 @@ var EngineOrchestrator = class _EngineOrchestrator {
     record.model = model;
     if (record.pendingStructural) {
       record.renderHandle = this.renderer.mountIndicator(model);
-      this.renderer.setIndicatorInputs(record.renderHandle, record.inputValues);
+      this.renderer.setIndicatorInputs(record.renderHandle, record.inputValues, record.propValues);
       record.pendingStructural = false;
     } else {
       this.renderer.updateIndicator(record.renderHandle, modelToValuePatch(model));
@@ -19004,16 +19297,17 @@ var EngineOrchestrator = class _EngineOrchestrator {
   placeModel(model, id, paneId) {
     model.id = id;
     model.paneId = paneId;
-    for (const series of model.series) series.paneId = paneId;
-    for (const fill of model.fills) fill.paneId = paneId;
-    for (const bg of model.backgrounds) bg.paneId = paneId;
+    const paneOf = (item) => item.overlay === true ? "price" : paneId;
+    for (const series of model.series) series.paneId = paneOf(series);
+    for (const fill of model.fills) fill.paneId = paneOf(fill);
+    for (const bg of model.backgrounds) bg.paneId = paneOf(bg);
     for (const line of model.priceLines) line.paneId = paneId;
-    if (model.lines) for (const ln of model.lines) ln.paneId = paneId;
-    if (model.boxes) for (const bx of model.boxes) bx.paneId = paneId;
-    if (model.labels) for (const lb of model.labels) lb.paneId = paneId;
-    if (model.polylines) for (const pl of model.polylines) pl.paneId = paneId;
-    if (model.linefills) for (const lf of model.linefills) lf.paneId = paneId;
-    if (model.tables) for (const tb of model.tables) tb.paneId = paneId;
+    if (model.lines) for (const ln of model.lines) ln.paneId = paneOf(ln);
+    if (model.boxes) for (const bx of model.boxes) bx.paneId = paneOf(bx);
+    if (model.labels) for (const lb of model.labels) lb.paneId = paneOf(lb);
+    if (model.polylines) for (const pl of model.polylines) pl.paneId = paneOf(pl);
+    if (model.linefills) for (const lf of model.linefills) lf.paneId = paneOf(lf);
+    if (model.tables) for (const tb of model.tables) tb.paneId = paneOf(tb);
   }
   emitContextChanged(id) {
     if (!this.registry.get(id)?.session?.getContext) return;
@@ -19166,6 +19460,15 @@ var RendererControl = class {
   setLegendActions(provider) {
     this.renderer.setLegendActions?.(provider);
   }
+  /**
+   * Wire the legend rows' HOST-CONTRIBUTED callout bubbles (the shells route the
+   * plugin registry through this; see `registerLegendCallout`). Silent on a renderer
+   * without the seam — contributed callouts simply never show there, same graceful
+   * degradation as {@link setLegendActions}.
+   */
+  setLegendCallouts(provider) {
+    this.renderer.setLegendCallouts?.(provider);
+  }
   /**
    * Replace the indicator legend's fold toggle with a host action (or restore it with
    * `null`) — multi-chart shells point the chip at their indicator overview instead of
@@ -19675,6 +19978,10 @@ function inputVisible(when, values) {
 }
 
 // src/renderers/shared/IndicatorInputsDialog.ts
+var PROPS_TAB = "Properties";
+function bagOf(row, decl) {
+  return decl.prop ? row.propValues : row.values;
+}
 var SOURCES = ["close", "open", "high", "low", "hl2", "hlc3", "ohlc4", "volume"];
 var IndicatorInputsDialog = class {
   constructor(host) {
@@ -19685,6 +19992,7 @@ var IndicatorInputsDialog = class {
     this.openId = null;
     this.row = null;
     this.snapshot = null;
+    this.propSnapshot = null;
     this.dialogTips = [];
     /** Re-applies every `when` gate against current values; set while the dialog is open. */
     this.refreshVisibility = null;
@@ -19707,10 +20015,11 @@ var IndicatorInputsDialog = class {
   }
   open(row) {
     this.close();
-    if (row.inputs.length === 0) return;
+    if (row.inputs.length === 0 && row.props.length === 0) return;
     this.row = row;
     this.openId = row.id;
     this.snapshot = { ...row.values };
+    this.propSnapshot = { ...row.propValues };
     ensureDialogStyles();
     const t = this.host.theme();
     const border = "var(--vela-border)";
@@ -19718,7 +20027,7 @@ var IndicatorInputsDialog = class {
     const host = this.host.dialogHost() ?? this.host.container;
     const ui = new Dialog({
       host,
-      title: row.settingsTitle,
+      title: row.title,
       // Non-modal: live-edit dialog — a modal machine locks pointer events on the
       // whole body, killing the chart and the body-portaled popovers.
       modal: false,
@@ -19730,12 +20039,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);
@@ -19746,6 +20059,16 @@ var IndicatorInputsDialog = class {
       text: () => "Close"
     }));
     const tabDefs = tabInputs(row.inputs);
+    if (row.props.length > 0) {
+      const propDecls = row.props.map((p) => {
+        const d = { ...p, prop: true };
+        delete d.tab;
+        return d;
+      });
+      const existing = tabDefs.find((t2) => t2.name === PROPS_TAB);
+      if (existing) existing.inputs.push(...propDecls);
+      else tabDefs.push({ name: PROPS_TAB, inputs: propDecls });
+    }
     const tabs = document.createElement("div");
     tabs.style.cssText = `display:flex;gap:12px;padding:0 20px;border-bottom:1px solid ${border};flex:0 0 auto;`;
     const tabEls = [];
@@ -19848,9 +20171,10 @@ var IndicatorInputsDialog = class {
     this.openId = null;
     this.row = null;
     this.snapshot = null;
+    this.propSnapshot = null;
     ui?.destroy();
   }
-  /** Restore every input to its open-time value (re-running the indicator), then close. */
+  /** Restore every input and prop to its open-time value (re-running the indicator), then close. */
   revertAndClose() {
     const row = this.row;
     const snap = this.snapshot;
@@ -19864,12 +20188,55 @@ var IndicatorInputsDialog = class {
         }
       }
     }
+    const propSnap = this.propSnapshot;
+    if (row && propSnap) {
+      for (const p of row.props) {
+        const snapped = propSnap[p.key];
+        const before = snapped !== void 0 ? snapped : p.defval;
+        if (row.propValues[p.key] !== before) {
+          row.propValues[p.key] = before;
+          this.host.onChange?.({ indicatorId: row.id, key: p.key, value: before, kind: "prop" });
+        }
+      }
+    }
     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;
+    const propSnap = this.propSnapshot;
+    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 });
+      }
+    }
+    for (const p of row.props) {
+      if (row.propValues[p.key] !== p.defval) {
+        row.propValues[p.key] = p.defval;
+        this.host.onChange?.({ indicatorId: row.id, key: p.key, value: p.defval, kind: "prop" });
+      }
+    }
+    this.open(row);
+    if (snap) this.snapshot = snap;
+    if (propSnap) this.propSnapshot = propSnap;
+  }
   /** Write one edit through: store it, notify the host, and re-apply the `when` gates. */
-  commit(row, key, value) {
-    row.values[key] = value;
-    this.host.onChange?.({ indicatorId: row.id, key, value });
+  commit(row, decl, value) {
+    bagOf(row, decl)[decl.key] = value;
+    this.host.onChange?.({ indicatorId: row.id, key: decl.key, value, ...decl.prop ? { kind: "prop" } : {} });
     this.refreshVisibility?.();
   }
   /** One settings row (or several `inline=` inputs) placed into a section's grid. */
@@ -19896,7 +20263,7 @@ var IndicatorInputsDialog = class {
     const id = idOf(lead);
     const info = lead.tooltip ? this.infoButton(lead.tooltip) : void 0;
     if (lead.type === "bool") {
-      const current = Boolean(row.values[lead.key] ?? lead.defval);
+      const current = Boolean(bagOf(row, lead)[lead.key] ?? lead.defval);
       return append(fieldRow({
         label: nameOf(lead),
         id,
@@ -19905,7 +20272,7 @@ var IndicatorInputsDialog = class {
         toggle: {
           id,
           checked: current,
-          onChange: (v) => this.commit(row, lead.key, v)
+          onChange: (v) => this.commit(row, lead, v)
         }
       }));
     }
@@ -19930,8 +20297,8 @@ var IndicatorInputsDialog = class {
   }
   /** Build the typed control for one input, committing edits live via `onChange`. */
   buildControl(row, inp, id) {
-    const current = row.values[inp.key] ?? inp.defval;
-    const emit = (value) => this.commit(row, inp.key, value);
+    const current = bagOf(row, inp)[inp.key] ?? inp.defval;
+    const emit = (value) => this.commit(row, inp, value);
     if (inp.type === "bool") {
       return buildFieldControl({ kind: "switch", id, checked: Boolean(current), onChange: (v) => emit(v) }).el;
     }
@@ -19942,7 +20309,7 @@ var IndicatorInputsDialog = class {
         kind: "color",
         id,
         theme: this.host.theme(),
-        get: () => String(row.values[inp.key] ?? inp.defval),
+        get: () => String(bagOf(row, inp)[inp.key] ?? inp.defval),
         onChange: (v) => emit(v)
       }).el;
     }
@@ -20505,6 +20872,7 @@ function timeParts(ts) {
 }
 
 // src/renderers/shared/InputsUI.ts
+var LEGEND_AT_TOP_ATTR = "data-vela-pane-at-top";
 var STATUS_KEYFRAMES = "@keyframes vela-ind-pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.3;transform:scale(.6)}}";
 var LEGEND_ICON_PX2 = 16;
 var LEGEND_CTL_PX = 18;
@@ -20543,10 +20911,14 @@ var InputsUI = class {
     this.moveApi = null;
     /** Host-contributed legend actions, resolved PER ROW at render time (see setLegendActions). */
     this.legendActions = null;
+    /** Host-contributed callout bubbles, resolved PER ROW at render time (see setLegendCallouts). */
+    this.legendCallouts = null;
     /** Chrome-tooltip disposers, per row id — a tip open at removal must not outlive its row. */
     this.rowTips = /* @__PURE__ */ new Map();
     /** Same, for the contributed extras only (rebuilt independently by setLegendActions). */
     this.extrasTips = /* @__PURE__ */ new Map();
+    /** Same, for the contributed callouts only (rebuilt independently by setLegendCallouts). */
+    this.calloutTips = /* @__PURE__ */ new Map();
     /** Open "Move to" menu (kept so it can be torn down). */
     this.moveMenu = null;
     this.moveTargets = [];
@@ -20704,6 +21076,42 @@ var InputsUI = class {
       extrasEl.appendChild(btn2);
     }
   }
+  /**
+   * Wire the host-contributed callout bubbles. Same contract as
+   * {@link setLegendActions}: re-calling replaces the provider and re-projects the
+   * rows already on screen.
+   */
+  setLegendCallouts(provider) {
+    this.legendCallouts = provider;
+    for (const row of this.rows.values()) this.renderCallouts(row);
+  }
+  /** (Re)build one row's callout bubbles — tinted icon circles beside the title whose
+   *  click (when the view carries content) deploys a panel of text and actions. */
+  renderCallouts(row) {
+    this.disposeTips(this.calloutTips, row.id);
+    for (const bubble of row.callouts) bubble.destroy();
+    row.callouts = [];
+    row.calloutsEl.replaceChildren();
+    const views = this.legendCallouts?.(row.id) ?? [];
+    row.calloutsEl.style.display = views.length > 0 ? "inline-flex" : "none";
+    for (const view of views) {
+      const bubble = new CalloutBubble({
+        icon: view.icon,
+        background: view.background,
+        ...view.color !== void 0 ? { color: view.color } : {},
+        label: view.tooltip,
+        ...view.content !== void 0 ? { panel: view.content } : {},
+        // The panel portals into the plot host and self-tokens: it must work on
+        // a bare chart, where no `.vela-ui` token ancestor exists.
+        host: this.container,
+        theme: () => this.theme
+      });
+      bubble.el.dataset.legendCallout = view.id;
+      this.tip(this.calloutTips, row.id, bubble.el, view.tooltip);
+      row.callouts.push(bubble);
+      row.calloutsEl.appendChild(bubble.el);
+    }
+  }
   /** Reposition the per-pane legend containers after a layout change. */
   reposition() {
     for (const [paneId, lg] of this.legends) this.positionLegend(lg, paneId);
@@ -20871,6 +21279,7 @@ var InputsUI = class {
   }
   positionLegend(lg, paneId) {
     const bounds = this.paneBoundsOf ? this.paneBoundsOf(paneId) : { top: 0, height: Infinity };
+    lg.toggleAttribute(LEGEND_AT_TOP_ATTR, bounds.top === 0);
     lg.style.display = bounds.height < 4 || !this.titlesVisible ? "none" : "flex";
     const collapsed = this.paneCollapse.has(paneId);
     const masterId = this.paneCollapse.get(paneId) ?? null;
@@ -20946,13 +21355,13 @@ var InputsUI = class {
   }
   /** Create or update an indicator's legend row (in the legend for its pane). */
   upsert(id, title, inputs, values, paneId = "price", opts = {}) {
-    const settingsTitle = opts.settingsTitle ?? title;
     const existing = this.rows.get(id);
     if (existing) {
       existing.title = title;
-      existing.settingsTitle = settingsTitle;
       existing.inputs = inputs;
       existing.values = { ...values };
+      existing.props = opts.props ?? [];
+      existing.propValues = { ...opts.propValues ?? {} };
       existing.titleEl.textContent = title;
       if (existing.paneId !== paneId) {
         existing.paneId = paneId;
@@ -21004,6 +21413,9 @@ var InputsUI = class {
       titleWrap.appendChild(beta);
     }
     el.appendChild(titleWrap);
+    const calloutsEl = document.createElement("span");
+    calloutsEl.style.cssText = `display:none;align-items:center;gap:4px;flex:none;margin-left:${LEGEND_TITLE_STATUS_GAP_PX}px;`;
+    el.appendChild(calloutsEl);
     el.appendChild(statusEl);
     const valuesEl = document.createElement("span");
     valuesEl.style.cssText = `display:none;align-items:center;gap:5px;margin-left:${LEGEND_TITLE_VALUES_GAP_PX}px;white-space:nowrap;font-variant-numeric:tabular-nums;`;
@@ -21020,13 +21432,13 @@ var InputsUI = class {
       eye.className = "vela-ind-ctl";
       eye.style.cssText = LEGEND_CTL_CSS;
       eye.addEventListener("click", () => {
-        const row = this.rows.get(id);
-        this.onToggleVisible?.(id, Boolean(row?.hidden));
+        const row2 = this.rows.get(id);
+        this.onToggleVisible?.(id, Boolean(row2?.hidden));
       });
       controlsEl.appendChild(eye);
       eyeEl = eye;
     }
-    if (inputs.length > 0) {
+    if (inputs.length > 0 || (opts.props ?? []).length > 0) {
       const gear = document.createElement("button");
       gear.type = "button";
       gear.setAttribute("aria-label", "Settings");
@@ -21066,7 +21478,9 @@ var InputsUI = class {
     controlsEl.appendChild(close);
     el.appendChild(controlsEl);
     this.attach(this.legendFor(paneId), el, !!opts.native);
-    this.rows.set(id, { id, title, settingsTitle, inputs, values: { ...values }, el, titleEl, statusEl, valuesEl, plotValues: [], plotValuesKey: "", showValues: null, highlighted: false, paneId, hidden: false, eyeEl, controlsEl, extrasEl, native: !!opts.native });
+    const row = { id, title, inputs, values: { ...values }, props: opts.props ?? [], propValues: { ...opts.propValues ?? {} }, el, titleEl, statusEl, valuesEl, plotValues: [], plotValuesKey: "", showValues: null, highlighted: false, paneId, hidden: false, eyeEl, controlsEl, extrasEl, calloutsEl, callouts: [], native: !!opts.native };
+    this.rows.set(id, row);
+    this.renderCallouts(row);
     this.syncFoldToggle();
   }
   /** Place a row in its pane's legend — native rows PREPEND (pinned to the top), Pine rows append. */
@@ -21075,9 +21489,11 @@ var InputsUI = class {
     else container.appendChild(el);
   }
   /** Reflect programmatic input changes (so a re-opened dialog shows current values). */
-  setValues(id, values) {
+  setValues(id, values, props) {
     const row = this.rows.get(id);
-    if (row) row.values = { ...row.values, ...values };
+    if (!row) return;
+    row.values = { ...row.values, ...values };
+    if (props) row.propValues = { ...row.propValues, ...props };
   }
   /**
    * Reflect an indicator's live status in its legend row: `'loading'` shows three pulsing
@@ -21159,8 +21575,13 @@ var InputsUI = class {
   syncRowActions(row) {
     const open2 = row.highlighted;
     row.controlsEl.style.display = open2 || row.hidden ? "inline-flex" : "none";
-    if (open2) row.el.appendChild(row.statusEl);
-    else row.el.insertBefore(row.statusEl, row.valuesEl);
+    if (open2) {
+      row.el.appendChild(row.statusEl);
+      row.el.appendChild(row.calloutsEl);
+    } else {
+      row.el.insertBefore(row.statusEl, row.valuesEl);
+      row.el.insertBefore(row.calloutsEl, row.statusEl);
+    }
     for (const child of Array.from(row.controlsEl.children)) {
       if (!(child instanceof HTMLElement) || child === row.eyeEl) continue;
       if (child === row.extrasEl) {
@@ -21178,10 +21599,12 @@ var InputsUI = class {
   }
   remove(id) {
     const row = this.rows.get(id);
+    for (const bubble of row?.callouts ?? []) bubble.destroy();
     row?.el.remove();
     this.rows.delete(id);
     this.disposeTips(this.rowTips, id);
     this.disposeTips(this.extrasTips, id);
+    this.disposeTips(this.calloutTips, id);
     if (this.selectedId === id) this.selectedId = null;
     if (this.inputsDialog.openId === id) this.inputsDialog.close();
     this.syncFoldToggle();
@@ -21201,6 +21624,8 @@ var InputsUI = class {
     this.rowMenu = null;
     for (const id of [...this.rowTips.keys()]) this.disposeTips(this.rowTips, id);
     for (const id of [...this.extrasTips.keys()]) this.disposeTips(this.extrasTips, id);
+    for (const id of [...this.calloutTips.keys()]) this.disposeTips(this.calloutTips, id);
+    for (const row of this.rows.values()) for (const bubble of row.callouts) bubble.destroy();
     for (const lg of this.legends.values()) lg.remove();
     this.legends.clear();
     this.rows.clear();
@@ -21555,6 +21980,32 @@ var SIZE_PX3 = {
   large: 16,
   huge: 20
 };
+function fontPxOf(size) {
+  if (typeof size === "number") return size > 0 ? size : SIZE_PX3.auto;
+  return SIZE_PX3[size] ?? SIZE_PX3.auto;
+}
+function tableHasContent(t) {
+  return t.cells.some((row) => row?.some((c) => c != null && !c.merged));
+}
+function mergeRenderPlan(t) {
+  const span = /* @__PURE__ */ new Map();
+  const omit = /* @__PURE__ */ new Set();
+  for (const m of t.merges) {
+    span.set(`${m.startRow}:${m.startCol}`, { cs: m.endCol - m.startCol + 1, rs: m.endRow - m.startRow + 1 });
+    for (let r = m.startRow; r <= m.endRow; r += 1) {
+      for (let c = m.startCol; c <= m.endCol; c += 1) {
+        if (r !== m.startRow || c !== m.startCol) omit.add(`${r}:${c}`);
+      }
+    }
+  }
+  for (let r = 0; r < t.rows; r += 1) {
+    for (let c = 0; c < t.columns; c += 1) {
+      if (t.cells[r]?.[c]?.merged && !span.has(`${r}:${c}`)) omit.add(`${r}:${c}`);
+    }
+  }
+  for (const key of span.keys()) omit.delete(key);
+  return { span, omit };
+}
 var TableOverlay = class {
   constructor(container, theme, paneBounds) {
     this.container = container;
@@ -21575,7 +22026,9 @@ var TableOverlay = class {
   update(tables) {
     this.lastTables = tables;
     this.root.replaceChildren();
-    for (const t of tables) this.root.appendChild(this.renderTable(t));
+    for (const t of tables) {
+      if (tableHasContent(t)) this.root.appendChild(this.renderTable(t));
+    }
   }
   /** Re-render at the current pane geometry — after layout settles or on resize. */
   reposition() {
@@ -21590,39 +22043,36 @@ var TableOverlay = class {
     this.root.remove();
   }
   renderTable(t) {
+    const b = this.paneBounds(t.paneId);
     const wrap = document.createElement("div");
     wrap.style.position = "absolute";
-    this.anchor(wrap, t.position, this.paneBounds(t.paneId));
+    if (t.frameColor && t.frameWidth > 0) wrap.style.border = `${t.frameWidth}px solid ${t.frameColor}`;
+    this.anchor(wrap, t.position, b);
     const table = document.createElement("table");
     Object.assign(table.style, {
       borderCollapse: "collapse",
       background: t.bgColor ?? "transparent",
       fontFamily: this.theme.fontFamily || "sans-serif",
-      // Frame as an inset shadow (not a `border`) so it stays independent of the
-      // collapsed cell borders even when frame_width != border_width.
-      boxShadow: t.frameColor && t.frameWidth > 0 ? `inset 0 0 0 ${t.frameWidth}px ${t.frameColor}` : "none",
       border: "none",
       tableLayout: "auto",
       // Re-enable pointer events on the table only (root is none) so cell tooltips work.
       pointerEvents: "auto"
     });
-    const span = /* @__PURE__ */ new Map();
-    const skip = /* @__PURE__ */ new Set();
-    for (const m of t.merges) {
-      span.set(`${m.startRow}:${m.startCol}`, { cs: m.endCol - m.startCol + 1, rs: m.endRow - m.startRow + 1 });
-      for (let r = m.startRow; r <= m.endRow; r += 1) {
-        for (let c = m.startCol; c <= m.endCol; c += 1) {
-          if (r !== m.startRow || c !== m.startCol) skip.add(`${r}:${c}`);
-        }
-      }
-    }
+    const { span, omit } = mergeRenderPlan(t);
+    const plotW = Math.max(0, (this.root.clientWidth || this.container.clientWidth) - b.rightAxis);
+    const paneH = b.height;
     const cellBorder = t.borderColor && t.borderWidth > 0 ? `${t.borderWidth}px solid ${t.borderColor}` : "none";
     for (let r = 0; r < t.rows; r += 1) {
       const tr = document.createElement("tr");
       for (let c = 0; c < t.columns; c += 1) {
+        if (omit.has(`${r}:${c}`)) continue;
         const cell = t.cells[r]?.[c] ?? null;
-        if (skip.has(`${r}:${c}`) || cell?.merged) continue;
         const td = document.createElement("td");
+        if (cell === null) {
+          Object.assign(td.style, { padding: "0", border: "none" });
+          tr.appendChild(td);
+          continue;
+        }
         const sp = span.get(`${r}:${c}`);
         if (sp) {
           if (sp.cs > 1) td.colSpan = sp.cs;
@@ -21631,18 +22081,22 @@ var TableOverlay = class {
         Object.assign(td.style, {
           border: cellBorder,
           padding: "2px 6px",
-          background: cell?.bgColor ?? "transparent",
-          color: cell?.textColor ?? this.theme.textColor,
-          textAlign: cell?.hAlign ?? "center",
-          verticalAlign: cell?.vAlign === "top" ? "top" : cell?.vAlign === "bottom" ? "bottom" : "middle",
-          fontSize: `${SIZE_PX3[cell?.textSize ?? "normal"]}px`,
-          fontFamily: cell?.fontFamily === "monospace" ? "monospace" : "inherit",
-          fontWeight: cell?.bold ? "bold" : "normal",
-          fontStyle: cell?.italic ? "italic" : "normal",
-          whiteSpace: "pre-line"
+          background: cell.bgColor ?? "transparent",
+          color: cell.textColor ?? this.theme.textColor,
+          textAlign: cell.hAlign,
+          verticalAlign: cell.vAlign === "top" ? "top" : cell.vAlign === "bottom" ? "bottom" : "middle",
+          fontSize: `${fontPxOf(cell.textSize)}px`,
+          fontFamily: cell.fontFamily === "monospace" ? "monospace" : "inherit",
+          fontWeight: cell.bold ? "bold" : "normal",
+          fontStyle: cell.italic ? "italic" : "normal",
+          // Pine cell text never wraps; `\n` still breaks lines. Wrapping
+          // used to collapse unicode sparklines and ━━━ dividers.
+          whiteSpace: "pre"
         });
-        if (cell?.tooltip) td.title = cell.tooltip;
-        td.textContent = cell?.text ?? "";
+        if (cell.width) td.style.width = `${cell.width / 100 * plotW}px`;
+        if (cell.height) td.style.height = `${cell.height / 100 * paneH}px`;
+        if (cell.tooltip) td.title = cell.tooltip;
+        td.textContent = cell.text ?? "";
         tr.appendChild(td);
       }
       table.appendChild(tr);
@@ -22244,8 +22698,14 @@ var WebGL2Backend = class {
           return sc === pane.scale ? pane : { ...pane, scale: sc };
         };
         b.alpha = this.modelAlpha;
-        for (const m of models) for (const bgSpan of m.backgrounds) this.emitBackground(b, bgSpan, pane, coords);
-        for (const m of models) for (const f of m.fills) this.emitFill(b, m, f, effPane(m), coords, i0, i1, scene.offsetOf(m.id));
+        for (const m of models) for (const bgSpan of m.backgrounds) if (bgSpan.overlay !== true) this.emitBackground(b, bgSpan, pane, coords);
+        for (const m of models) for (const f of m.fills) if (f.overlay !== true) this.emitFill(b, m, f, effPane(m), coords, i0, i1, scene.offsetOf(m.id));
+        if (isPrice) {
+          for (const m of scene.indicators.values()) {
+            for (const bgSpan of m.backgrounds) if (bgSpan.overlay === true) this.emitBackground(b, bgSpan, pane, coords);
+            for (const f of m.fills) if (f.overlay === true) this.emitFill(b, m, f, pane, coords, i0, i1, scene.offsetOf(m.id));
+          }
+        }
         const drawCandles = isPrice && !scene.candlesHidden;
         let candleDrawn = false;
         for (const m of models) {
@@ -22259,7 +22719,7 @@ var WebGL2Backend = class {
           b.alpha = this.modelAlpha;
           const off = scene.offsetOf(m.id);
           const mp = effPane(m);
-          for (const s of m.series) this.emitSeries(b, s, mp, coords, i0, i1, theme, off);
+          for (const s of m.series) if (s.overlay !== true) this.emitSeries(b, s, mp, coords, i0, i1, theme, off);
         }
         if (drawCandles && !candleDrawn) {
           drawSlicesUpTo(scene.candleZ);
@@ -22268,6 +22728,12 @@ var WebGL2Backend = class {
         }
         drawSlicesUpTo(Infinity);
         b.alpha = this.modelAlpha;
+        if (isPrice) {
+          for (const m of scene.indicators.values()) {
+            const off = scene.offsetOf(m.id);
+            for (const s of m.series) if (s.overlay === true) this.emitSeries(b, s, pane, coords, i0, i1, theme, off);
+          }
+        }
         for (const m of models) {
           const mp = effPane(m);
           for (const pl of m.priceLines) this.emitHline(b, pl, mp, coords, dataW, theme);
@@ -22314,7 +22780,7 @@ var WebGL2Backend = class {
     for (const pane of scene.orderedPanes()) {
       const b = this.glowBatch;
       b.reset();
-      this.emitGlowSources(b, scene.indicatorsForPane(pane.id), pane, coords, i0, i1, (id) => scene.offsetOf(id));
+      this.emitGlowSources(b, scene, pane, coords, i0, i1);
       if (b.vertexCount === 0) continue;
       const topH = Math.round(pane.bounds.top * dpr * 0.5);
       const botH = Math.round((pane.bounds.top + pane.bounds.height) * dpr * 0.5);
@@ -22383,15 +22849,23 @@ var WebGL2Backend = class {
     gl.bindVertexArray(null);
     return true;
   }
-  /** The "neon" elements that glow: line/area/step lines + point markers (not candles/fills/bars). */
-  emitGlowSources(b, models, pane, coords, i0, i1, offsetOf = () => 0) {
-    for (const m of models) {
-      const off = offsetOf(m.id);
-      for (const s of m.series) {
-        if (!isLineLikeSeries(s) || s.visible === false) continue;
-        if (s.kind === "histogram" || s.kind === "columns") continue;
-        if (s.kind === "circles" || s.kind === "cross") this.emitPointMarkers(b, s, pane, coords, i0, i1, off);
-        else this.emitPolyline(b, s, pane, coords, i0, i1, s.kind === "step", off);
+  /** The "neon" elements that glow: line/area/step lines + point markers (not candles/fills/bars).
+   *  Routing mirrors the main pass: own series per pane, force_overlay series on the price pane. */
+  emitGlowSources(b, scene, pane, coords, i0, i1) {
+    const emitOne = (s, off) => {
+      if (!isLineLikeSeries(s) || s.visible === false) return;
+      if (s.kind === "histogram" || s.kind === "columns") return;
+      if (s.kind === "circles" || s.kind === "cross") this.emitPointMarkers(b, s, pane, coords, i0, i1, off);
+      else this.emitPolyline(b, s, pane, coords, i0, i1, s.kind === "step", off);
+    };
+    for (const m of scene.indicatorsForPane(pane.id)) {
+      const off = scene.offsetOf(m.id);
+      for (const s of m.series) if (s.overlay !== true) emitOne(s, off);
+    }
+    if (pane.kind === "price") {
+      for (const m of scene.indicators.values()) {
+        const off = scene.offsetOf(m.id);
+        for (const s of m.series) if (s.overlay === true) emitOne(s, off);
       }
     }
   }
@@ -22674,9 +23148,9 @@ var WebGL2Backend = class {
           b.alpha = this.candleBodyAlpha;
           b.rect(g.bodyX, bodyTop, g.bodyW, bodyH, c);
         }
-        if (cs.borderVisible || bc || fading && cs.bodyVisible) {
+        if (cs.borderVisible || fading && cs.bodyVisible) {
           b.alpha = this.candleStructureAlpha;
-          const bord = cs.borderVisible || bc ? parseColor((isUp ? cs.borderUpColor : cs.borderDownColor) ?? dir) : c;
+          const bord = cs.borderVisible ? parseColor((isUp ? cs.borderUpColor : cs.borderDownColor) ?? bodyColorStr) : c;
           const bw = Math.max(0, g.bodyW - 1);
           const bh = Math.max(0, bodyH - 1);
           b.rectStroke(g.bodyX + 0.5, bodyTop + 0.5, bw, bh, 1, bord);
@@ -24228,8 +24702,14 @@ var Canvas2dBackend = class {
         return sc === pane.scale ? pane : { ...pane, scale: sc };
       };
       ctx.globalAlpha = this.modelAlpha;
-      for (const m of models) for (const bg of m.backgrounds) this.drawBackground(ctx, bg, pane, coords);
-      for (const m of models) for (const f of m.fills) this.drawFill(ctx, m, f, effPane(m), coords, i0, i1, scene.offsetOf(m.id));
+      for (const m of models) for (const bg of m.backgrounds) if (bg.overlay !== true) this.drawBackground(ctx, bg, pane, coords);
+      for (const m of models) for (const f of m.fills) if (f.overlay !== true) this.drawFill(ctx, m, f, effPane(m), coords, i0, i1, scene.offsetOf(m.id));
+      if (isPrice) {
+        for (const m of scene.indicators.values()) {
+          for (const bg of m.backgrounds) if (bg.overlay === true) this.drawBackground(ctx, bg, pane, coords);
+          for (const f of m.fills) if (f.overlay === true) this.drawFill(ctx, m, f, pane, coords, i0, i1, scene.offsetOf(m.id));
+        }
+      }
       const slices = scene.drawingSlices.get(pane.id) ?? [];
       let si = 0;
       const drawSlicesUpTo = (z) => {
@@ -24251,7 +24731,7 @@ var Canvas2dBackend = class {
         ctx.globalAlpha = this.modelAlpha;
         const off = scene.offsetOf(m.id);
         const mp = effPane(m);
-        for (const s of m.series) this.drawSeries(ctx, s, mp, coords, i0, i1, theme, off);
+        for (const s of m.series) if (s.overlay !== true) this.drawSeries(ctx, s, mp, coords, i0, i1, theme, off);
       }
       if (drawCandles && !candleDrawn) {
         drawSlicesUpTo(scene.candleZ);
@@ -24259,6 +24739,13 @@ var Canvas2dBackend = class {
         this.drawPriceSeries(ctx, scene, i0, i1, coords, pane, theme, barColorMap, dataW);
       }
       drawSlicesUpTo(Infinity);
+      if (isPrice) {
+        ctx.globalAlpha = this.modelAlpha;
+        for (const m of scene.indicators.values()) {
+          const off = scene.offsetOf(m.id);
+          for (const s of m.series) if (s.overlay === true) this.drawSeries(ctx, s, pane, coords, i0, i1, theme, off);
+        }
+      }
       ctx.globalAlpha = this.modelAlpha;
       for (const m of models) {
         const mp = effPane(m);
@@ -24530,9 +25017,9 @@ var Canvas2dBackend = class {
           ctx.fillStyle = color;
           ctx.fillRect(g.bodyX, top, g.bodyW, bodyH);
         }
-        if (cs.borderVisible || bc || fading && cs.bodyVisible) {
+        if (cs.borderVisible || fading && cs.bodyVisible) {
           ctx.globalAlpha = this.candleStructureAlpha;
-          ctx.strokeStyle = cs.borderVisible || bc ? (up ? cs.borderUpColor : cs.borderDownColor) ?? dir : color;
+          ctx.strokeStyle = cs.borderVisible ? (up ? cs.borderUpColor : cs.borderDownColor) ?? color : color;
           ctx.lineWidth = 1;
           const bw = Math.max(0, g.bodyW - 1);
           const bh = Math.max(0, bodyH - 1);
@@ -24964,6 +25451,8 @@ var DrawingSceneRenderer = class {
     this.set = set;
     /** measureText width cache, keyed by `${font} ${text}`, persists across frames. */
     this.widthCache = /* @__PURE__ */ new Map();
+    /** Tooltip hit-rects captured while drawing the CURRENT set (rebuilt per render). */
+    this.tipRegions = [];
     /**
      * Index offset of the CURRENT set's model: its `xloc:'bar_index'` coordinates count
      * from the model's anchor bar, so they shift by this to land on chart logical indices.
@@ -24984,8 +25473,13 @@ var DrawingSceneRenderer = class {
     const s = this.set;
     return !s.lines.length && !s.boxes.length && !s.labels.length && !s.polylines.length && !s.linefills.length;
   }
+  /** Tooltip hit-rects of the labels drawn by the LAST `render` call (same coords as `ctx`). */
+  labelTipRegions() {
+    return this.tipRegions;
+  }
   /** Draw the whole set into `ctx` using the supplied coordinate closures. */
   render(ctx, W, H, xOf, yOf) {
+    this.tipRegions = [];
     if (this.isEmpty()) return;
     ctx.save();
     this.drawLinefills(ctx, W, H, xOf, yOf);
@@ -25333,13 +25827,35 @@ var DrawingSceneRenderer = class {
       if (this.isPointShape(lb.style)) {
         if (!lb.noFill) this.drawLabelShape(ctx, lb.style, px, py, fontPx, color);
         if (lb.text) this.drawLabelText(ctx, lb, px, py + fontPx, fontPx);
-      } else if (lb.style === "none" || lb.style === "text_outline" || lb.noFill) {
-        if (lb.text) this.drawLabelText(ctx, lb, px, py, fontPx, lb.style === "text_outline");
+        if (lb.tooltip) {
+          const r = Math.max(4, fontPx * 0.6) + 3;
+          this.tipRegions.push({ left: px - r, top: py - r, right: px + r, bottom: py + r, text: lb.tooltip });
+        }
+      } else if (lb.style === "none" || lb.style === "text_outline") {
+        if (lb.text) {
+          this.drawLabelText(ctx, lb, px, py, fontPx, lb.style === "text_outline");
+          if (lb.tooltip) this.tipRegions.push(this.textRegion(ctx, lb, px, py, fontPx, lb.tooltip));
+        }
       } else {
-        this.drawBubble(ctx, lb, px, py, fontPx, color);
+        const r = this.drawBubble(ctx, lb, px, py, fontPx, color);
+        if (lb.tooltip) this.tipRegions.push({ left: r.x, top: r.y, right: r.x + r.w, bottom: r.y + r.h, text: lb.tooltip });
       }
     }
   }
+  /** Canvas font for a label's text — family + Pine `text_formatting` (bold/italic). */
+  labelFont(lb, fontPx) {
+    const family = lb.fontFamily === "monospace" ? "monospace" : this.deps.theme.fontFamily || "sans-serif";
+    return `${lb.italic ? "italic " : ""}${lb.bold ? "bold " : ""}${fontPx}px ${family}`;
+  }
+  /** Hover rect of a text-only label (style none/text_outline/noFill), centered like drawLabelText. */
+  textRegion(ctx, lb, cx, cy, fontPx, text) {
+    const font = this.labelFont(lb, fontPx);
+    const lines = (lb.text ?? "").split("\n");
+    const w = Math.max(1, ...lines.map((l) => this.measure(ctx, font, l)));
+    const h = fontPx * 1.25 * lines.length;
+    const left = lb.textAlign === "left" ? cx : lb.textAlign === "right" ? cx - w : cx - w / 2;
+    return { left, top: cy - h / 2, right: left + w, bottom: cy + h / 2, text };
+  }
   isPointShape(style) {
     switch (style) {
       case "circle":
@@ -25358,8 +25874,7 @@ var DrawingSceneRenderer = class {
     }
   }
   drawLabelText(ctx, lb, cx, cy, fontPx, outline = false) {
-    const family = lb.fontFamily === "monospace" ? "monospace" : this.deps.theme.fontFamily || "sans-serif";
-    ctx.font = `${fontPx}px ${family}`;
+    ctx.font = this.labelFont(lb, fontPx);
     ctx.textAlign = lb.textAlign === "left" ? "left" : lb.textAlign === "right" ? "right" : "center";
     ctx.textBaseline = "middle";
     const lines = lb.text.split("\n");
@@ -25439,9 +25954,9 @@ var DrawingSceneRenderer = class {
         ctx.fill();
     }
   }
+  /** Draw a bubble label; returns the bubble body rect (for tooltip hit-testing). */
   drawBubble(ctx, lb, px, py, fontPx, color) {
-    const family = lb.fontFamily === "monospace" ? "monospace" : this.deps.theme.fontFamily || "sans-serif";
-    ctx.font = `${fontPx}px ${family}`;
+    ctx.font = this.labelFont(lb, fontPx);
     const lines = (lb.text ?? "").split("\n");
     const padX = 6;
     const padY = 4;
@@ -25499,38 +26014,51 @@ var DrawingSceneRenderer = class {
         by = py - h - ptr;
         pointer = "down";
     }
-    ctx.fillStyle = color;
-    this.roundRect(ctx, bx, by, w, h, 4);
-    ctx.fill();
-    if (pointer !== "none") {
-      ctx.beginPath();
-      if (pointer === "down") {
-        ctx.moveTo(px - ptr, by + h);
-        ctx.lineTo(px + ptr, by + h);
-        ctx.lineTo(px, py);
-      } else if (pointer === "up") {
-        ctx.moveTo(px - ptr, by);
-        ctx.lineTo(px + ptr, by);
-        ctx.lineTo(px, py);
-      } else if (pointer === "left") {
-        ctx.moveTo(bx, py - ptr);
-        ctx.lineTo(bx, py + ptr);
-        ctx.lineTo(px, py);
-      } else {
-        ctx.moveTo(bx + w, py - ptr);
-        ctx.lineTo(bx + w, py + ptr);
-        ctx.lineTo(px, py);
-      }
-      ctx.closePath();
+    if (!lb.noFill) {
+      ctx.fillStyle = color;
+      this.roundRect(ctx, bx, by, w, h, 4);
       ctx.fill();
+      if (pointer !== "none") {
+        ctx.beginPath();
+        if (pointer === "down") {
+          ctx.moveTo(px - ptr, by + h);
+          ctx.lineTo(px + ptr, by + h);
+          ctx.lineTo(px, py);
+        } else if (pointer === "up") {
+          ctx.moveTo(px - ptr, by);
+          ctx.lineTo(px + ptr, by);
+          ctx.lineTo(px, py);
+        } else if (pointer === "left") {
+          ctx.moveTo(bx, py - ptr);
+          ctx.lineTo(bx, py + ptr);
+          ctx.lineTo(px, py);
+        } else {
+          ctx.moveTo(bx + w, py - ptr);
+          ctx.lineTo(bx + w, py + ptr);
+          ctx.lineTo(px, py);
+        }
+        ctx.closePath();
+        ctx.fill();
+      }
     }
     if (lb.text) {
-      ctx.fillStyle = lb.textColor ?? contrastColor(color);
-      ctx.textAlign = "center";
+      ctx.fillStyle = lb.textColor ?? (lb.noFill ? this.deps.theme.textColor : contrastColor(color));
       ctx.textBaseline = "middle";
+      let tx;
+      if (lb.textAlign === "left") {
+        ctx.textAlign = "left";
+        tx = bx + padX;
+      } else if (lb.textAlign === "right") {
+        ctx.textAlign = "right";
+        tx = bx + w - padX;
+      } else {
+        ctx.textAlign = "center";
+        tx = bx + w / 2;
+      }
       const startY = by + padY + lineH / 2;
-      for (let i = 0; i < lines.length; i += 1) ctx.fillText(lines[i], bx + w / 2, startY + i * lineH);
+      for (let i = 0; i < lines.length; i += 1) ctx.fillText(lines[i], tx, startY + i * lineH);
     }
+    return { x: bx, y: by, w, h };
   }
   roundRect(ctx, x, y, w, h, r) {
     const rr = Math.min(r, w / 2, h / 2);
@@ -25768,6 +26296,8 @@ var ChromeRenderer = class {
     this.axisTextColor = DARK_THEME.textColor;
     // Shared Pine-drawing renderer (line/box/label/polyline/linefill); widthCache persists.
     this.drawScene = new DrawingSceneRenderer({ timeToLogical: () => 0, barAt: () => null, theme: {} });
+    // Tooltip hit-rects of every label drawn this frame, in plot coords (rebuilt per render).
+    this.labelTips = [];
   }
   mount(canvas) {
     this.canvas = canvas;
@@ -25809,6 +26339,7 @@ var ChromeRenderer = class {
     const dataW = coords.width;
     const dataH = coords.height;
     this.axisTextColor = surface?.textColor ?? theme.textColor;
+    this.labelTips = [];
     ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
     ctx.clearRect(0, 0, fullW, fullH);
     if (surface && (fullW > dataW || fullH > dataH)) {
@@ -25918,6 +26449,17 @@ var ChromeRenderer = class {
       (price) => coords.priceToY(price, pane.scale, pane.bounds) - pane.bounds.top
     );
     ctx.restore();
+    for (const r of this.drawScene.labelTipRegions()) {
+      this.labelTips.push({ ...r, top: r.top + pane.bounds.top, bottom: r.bottom + pane.bounds.top });
+    }
+  }
+  /** Tooltip of the topmost label under a plot-space point, or null. Fed by the last render. */
+  labelTooltipAt(x, y) {
+    for (let i = this.labelTips.length - 1; i >= 0; i -= 1) {
+      const r = this.labelTips[i];
+      if (x >= r.left && x <= r.right && y >= r.top && y <= r.bottom) return r.text;
+    }
+    return null;
   }
   // ── axes ──
   drawPriceAxes(ctx, scene, coords, theme, dataW, panes) {
@@ -26134,6 +26676,68 @@ function formatCountdown(ms) {
   return h > 0 ? `${h}:${pad(m)}:${pad(s)}` : `${pad(m)}:${pad(s)}`;
 }
 
+// src/renderers/native/chrome/LabelTooltip.ts
+var HOVER_DELAY_MS = 350;
+var LabelTooltip = class {
+  constructor(plot, deps) {
+    this.plot = plot;
+    this.deps = deps;
+    this.tip = null;
+    this.timer = null;
+    /** Text of the currently open OR armed tip — dedupes moves inside one label. */
+    this.current = null;
+    this.onMove = (e) => {
+      if (e.pointerType !== "mouse") return;
+      const rect = this.plot.getBoundingClientRect();
+      const x = e.clientX - rect.left;
+      const y = e.clientY - rect.top;
+      const text = this.deps.lookup(x, y);
+      if (!text) {
+        this.clear();
+        return;
+      }
+      if (text === this.current) return;
+      this.clear();
+      this.current = text;
+      this.timer = window.setTimeout(() => this.show(text, x, y), HOVER_DELAY_MS);
+    };
+    this.onLeave = () => {
+      this.clear();
+    };
+    plot.addEventListener("pointermove", this.onMove);
+    plot.addEventListener("pointerleave", this.onLeave);
+    plot.addEventListener("pointerdown", this.onLeave);
+  }
+  destroy() {
+    this.plot.removeEventListener("pointermove", this.onMove);
+    this.plot.removeEventListener("pointerleave", this.onLeave);
+    this.plot.removeEventListener("pointerdown", this.onLeave);
+    this.clear();
+  }
+  show(text, x, y) {
+    const doc = this.plot.ownerDocument;
+    const tip = doc.createElement("div");
+    tip.textContent = text;
+    tip.style.cssText = "position:absolute;z-index:var(--vela-z-tooltip);pointer-events:none;background:var(--vela-bg);border:1px solid var(--vela-border);color:var(--vela-fg);border-radius:var(--vela-radius-md);padding:4px 9px;box-shadow:var(--vela-shadow);font:var(--vela-font-size-md) var(--vela-font);max-width:260px;";
+    applyChromeTokens(tip, this.deps.theme());
+    this.plot.appendChild(tip);
+    const pw = this.plot.clientWidth;
+    const ph = this.plot.clientHeight;
+    tip.style.left = `${Math.max(0, Math.min(x + 12, pw - tip.offsetWidth - 4))}px`;
+    tip.style.top = `${Math.max(0, Math.min(y + 16, ph - tip.offsetHeight - 4))}px`;
+    this.tip = tip;
+  }
+  clear() {
+    if (this.timer !== null) {
+      clearTimeout(this.timer);
+      this.timer = null;
+    }
+    this.tip?.remove();
+    this.tip = null;
+    this.current = null;
+  }
+};
+
 // src/renderers/native/chrome/CrosshairRenderer.ts
 var CrosshairRenderer = class {
   constructor() {
@@ -31211,19 +31815,8 @@ function computePaneScale(models, bars, includeCandles, i0, i1, drawings, log =
   for (const model of models) {
     const off = offsetOf(model.id);
     for (const s of model.series) {
-      if (s.kind === "candle" || s.kind === "bar") {
-        for (let i = i0; i <= i1; i += 1) {
-          const b = s.bars[i - off];
-          if (b) {
-            consider(b.high);
-            consider(b.low);
-          }
-        }
-      } else if (isLineLikeSeries(s)) {
-        for (let i = i0; i <= i1; i += 1) consider(s.points[i - off]?.value);
-        if (s.kind === "histogram" || s.kind === "columns") consider(s.style?.base ?? 0);
-        else if (s.style?.base != null) consider(s.style.base);
-      }
+      if (s.overlay === true) continue;
+      considerSeries(s, i0, i1, off, consider);
     }
     for (const pl of model.priceLines) consider(pl.price);
   }
@@ -31245,6 +31838,36 @@ function computePaneScale(models, bars, includeCandles, i0, i1, drawings, log =
   const span = max - min;
   return { min: min - span * MARGIN_BOTTOM, max: max + span * MARGIN_TOP };
 }
+function considerSeries(s, i0, i1, off, consider) {
+  if (s.kind === "candle" || s.kind === "bar") {
+    for (let i = i0; i <= i1; i += 1) {
+      const b = s.bars[i - off];
+      if (b) {
+        consider(b.high);
+        consider(b.low);
+      }
+    }
+  } else if (isLineLikeSeries(s)) {
+    for (let i = i0; i <= i1; i += 1) consider(s.points[i - off]?.value);
+    if (s.kind === "histogram" || s.kind === "columns") consider(s.style?.base ?? 0);
+    else if (s.style?.base != null) consider(s.style.base);
+  }
+}
+function overlaySeriesRange(models, i0, i1, offsetOf = () => 0) {
+  let min = Infinity;
+  let max = -Infinity;
+  const consider = (v) => {
+    if (v != null && Number.isFinite(v)) {
+      if (v < min) min = v;
+      if (v > max) max = v;
+    }
+  };
+  for (const model of models) {
+    const off = offsetOf(model.id);
+    for (const s of model.series) if (s.overlay === true) considerSeries(s, i0, i1, off, consider);
+  }
+  return min === Infinity ? null : { min, max };
+}
 function expandScaleByPixels(scale, heightPx, abovePx, belowPx) {
   if (abovePx <= 0 && belowPx <= 0) return scale;
   const content = heightPx - abovePx - belowPx;
@@ -31299,6 +31922,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;
@@ -31331,17 +31959,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
@@ -31883,6 +32516,8 @@ var NativeRenderer = class {
     this.glowAmount = 0;
     // WebGL2 neon-glow intensity (canvas2d ignores it)
     this.chrome = new ChromeRenderer();
+    /** Hover tooltips for Pine labels (canvas hit-rects collected by the chrome layer). */
+    this.labelTooltip = null;
     this.crosshairLayer = new CrosshairRenderer();
     /** 1 Hz repaint pump so the price-axis countdown-to-bar-close ticks; null when off. */
     this.countdownTimer = null;
@@ -31893,6 +32528,8 @@ var NativeRenderer = class {
     this.indicatorValuesOn = true;
     /** Host-contributed legend actions — held here so a rebuild of the legend re-wires them. */
     this.legendActionsProvider = null;
+    /** Host-contributed legend callouts — held here so a rebuild of the legend re-wires them. */
+    this.legendCalloutsProvider = null;
     /** Host override of the legend's fold toggle — held here so a remount re-applies it. */
     this.legendOverviewAction = null;
     // ── keyboard navigation / accessibility (item 11) ──
@@ -33001,6 +33638,10 @@ var NativeRenderer = class {
     this.plot.appendChild(this.scrollButton);
     this.plot.addEventListener("pointermove", this.onScrollProximityMove);
     this.plot.addEventListener("pointerleave", this.onScrollProximityLeave);
+    this.labelTooltip = new LabelTooltip(this.plot, {
+      theme: () => this.chromeTheme(),
+      lookup: (x, y) => this.chrome.labelTooltipAt(x, y)
+    });
     this.userDrawings = new UserDrawingController(this.wrapper, this.plot, this.drawingsCanvas, {
       projector: () => this.drawingProjector(),
       dpr: () => this.coords.dpr,
@@ -33040,9 +33681,10 @@ var NativeRenderer = class {
     this.inputsUI.setDialogHost(this.dialogHost);
     this.inputsUI.setSymbolPicker(this.symbolPicker);
     this.inputsUI.setLegendActions(this.legendActionsProvider);
+    this.inputsUI.setLegendCallouts(this.legendCalloutsProvider);
     this.inputsUI.setLegendOverviewAction(this.legendOverviewAction);
     this.inputsUI.setOnChange((c) => {
-      for (const cb of this.inputChangeCbs) cb({ indicatorId: c.indicatorId, key: c.key, value: c.value });
+      for (const cb of this.inputChangeCbs) cb({ indicatorId: c.indicatorId, key: c.key, value: c.value, ...c.kind ? { kind: c.kind } : {} });
     });
     this.inputsUI.setOnRemove((id) => {
       for (const cb of this.removeIndicatorCbs) cb(id);
@@ -33232,6 +33874,8 @@ var NativeRenderer = class {
     this.settingsButton = null;
     this.plot?.removeEventListener("pointermove", this.onScrollProximityMove);
     this.plot?.removeEventListener("pointerleave", this.onScrollProximityLeave);
+    this.labelTooltip?.destroy();
+    this.labelTooltip = null;
     this.scrollButton?.remove();
     this.scrollButton = null;
     for (const l of this.extLayers) l.instance.destroy?.();
@@ -33472,7 +34116,7 @@ var NativeRenderer = class {
     else this.scene.assignIndicatorZ(model.id);
     this.inputsUI.upsert(model.id, model.shorttitle ?? model.title, model.inputs, model.inputValues, model.paneId, {
       native: !!model.native,
-      ...model.shorttitle ? { settingsTitle: model.title } : {}
+      ...model.props ? { props: model.props, propValues: model.propValues ?? {} } : {}
     });
     this.syncTables(model);
     if (model.native?.type === "volume") {
@@ -33523,8 +34167,8 @@ var NativeRenderer = class {
     this.paneControls?.refresh();
     this.scheduler.invalidate(4 /* Full */);
   }
-  setIndicatorInputs(handle, values) {
-    this.inputsUI.setValues(handle.id, values);
+  setIndicatorInputs(handle, values, props) {
+    this.inputsUI.setValues(handle.id, values, props);
   }
   setSymbolPicker(picker) {
     this.symbolPicker = picker;
@@ -33534,6 +34178,10 @@ var NativeRenderer = class {
     this.legendActionsProvider = provider;
     this.inputsUI?.setLegendActions(provider);
   }
+  setLegendCallouts(provider) {
+    this.legendCalloutsProvider = provider;
+    this.inputsUI?.setLegendCallouts(provider);
+  }
   setLegendOverviewAction(action) {
     this.legendOverviewAction = action;
     this.inputsUI?.setLegendOverviewAction(action);
@@ -34514,7 +35162,11 @@ var NativeRenderer = class {
       }
       const models = this.scene.indicatorsForPane(pane.id);
       const masterModels = models.filter((m) => m.ownScale !== true);
-      const dr = this.chrome.paneDrawingsRange(masterModels, this.scene, pane === pricePane, vr);
+      let dr = this.chrome.paneDrawingsRange(masterModels, this.scene, pane === pricePane, vr);
+      if (pane === pricePane) {
+        const or = overlaySeriesRange(this.scene.indicators.values(), i0, i1, (id) => this.scene.offsetOf(id));
+        if (or) dr = dr ? { min: Math.min(dr.min, or.min), max: Math.max(dr.max, or.max) } : or;
+      }
       const includeCandles = pane.kind === "price" && !this.scene.candlesHidden;
       pane.scaleTarget = computePaneScale(masterModels, this.bars, includeCandles, i0, i1, dr, paneLogScale(this.scene, pane), (id) => this.scene.offsetOf(id));
       pane.percentBaseline = pane.kind === "price" ? this.bars[i0]?.close ?? 0 : this.firstVisibleValue(masterModels, i0);
@@ -34788,6 +35440,7 @@ var NativeRenderer = class {
     for (const m of models) {
       const off = this.scene.offsetOf(m.id);
       for (const s of m.series) {
+        if (s.overlay === true) continue;
         if (isLineLikeSeries(s)) {
           const v = s.points[i0 - off]?.value;
           if (v != null && Number.isFinite(v)) return v;
@@ -35660,45 +36313,24 @@ var CSS21 = `
 }
 .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
@@ -35734,7 +36366,7 @@ var CSS21 = `
     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.
@@ -35751,7 +36383,7 @@ var CSS21 = `
     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;
@@ -35763,6 +36395,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;
@@ -35821,8 +36460,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");
@@ -35910,8 +36556,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) {
@@ -35944,6 +36595,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();
   }
@@ -36083,61 +36735,148 @@ 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";
+    /** 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_MS2;
+    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));
   }
 };
 
@@ -36541,6 +37280,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(() => {
@@ -36574,7 +37314,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;
@@ -36653,20 +37397,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
@@ -36701,14 +37455,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. */
@@ -36804,10 +37562,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",
@@ -36842,12 +37600,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). */
@@ -36869,17 +37655,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) {
@@ -37254,16 +38046,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),
@@ -37274,8 +38071,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)
   };
 }
@@ -37614,6 +38415,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
@@ -37674,9 +38479,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);
@@ -37760,7 +38563,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;
@@ -37979,7 +38783,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) ──
   /**
@@ -38044,7 +38851,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;
@@ -38055,9 +38862,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();
@@ -38157,6 +38969,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());
@@ -38169,6 +38982,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));
@@ -38372,6 +39186,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)
@@ -38447,6 +39262,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;
@@ -38479,11 +39295,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
@@ -38791,7 +39663,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;