@coderyo/renderer-lite 1.0.2 → 1.1.0

package/dist/index.js

@@ -6,6 +6,7 @@ import {
   HistogramSeries as HistogramSeries2,
   LineSeries as LineSeries2
 } from "lightweight-charts";
+import { intervalMs as intervalMs2 } from "@coderyo/data";
 import { lodDecimateBars } from "@coderyo/series";
 
 // src/chart-grid.ts
@@ -17,6 +18,12 @@ function gridOptions(showGrid, dark) {
   };
 }
 
+// src/pane-orchestrator.ts
+import {
+  DEFAULT_INDICATOR_CONFIG as DEFAULT_INDICATOR_CONFIG2,
+  hasVisibleIndicatorPanes as hasVisibleIndicatorPanes2
+} from "@coderyo/indicators";
+
 // src/indicator-panes.ts
 import {
   ColorType,
@@ -26,6 +33,7 @@ import {
 } from "lightweight-charts";
 import {
   DEFAULT_INDICATOR_CONFIG,
+  hasVisibleIndicatorPanes,
   boll,
   kdj,
   macd,
@@ -33,6 +41,68 @@ import {
   sma,
   ema
 } from "@coderyo/indicators";
+
+// src/pane-resize.ts
+function attachPaneResizer(topPane, bottomPane, opts = {}) {
+  const minTop = opts.minTopPx ?? 120;
+  const minBottom = opts.minBottomPx ?? 60;
+  const parent = topPane.parentElement;
+  if (!parent) return () => {
+  };
+  let dragging = false;
+  const handle = document.createElement("div");
+  handle.dataset.paneResizer = "1";
+  handle.style.cssText = "height:6px;cursor:row-resize;background:#30363d;flex-shrink:0;touch-action:none;z-index:5;";
+  handle.onmouseenter = () => {
+    handle.style.background = "#388bfd";
+  };
+  handle.onmouseleave = () => {
+    if (!dragging) handle.style.background = "#30363d";
+  };
+  bottomPane.insertAdjacentElement("beforebegin", handle);
+  const saved = opts.storageKey ? localStorage.getItem(opts.storageKey) : null;
+  if (saved) {
+    const ratio = Number(saved);
+    if (Number.isFinite(ratio) && ratio >= 0.15 && ratio <= 0.85) {
+      topPane.style.flex = `${ratio * 10}`;
+      bottomPane.style.flex = `${(1 - ratio) * 10}`;
+    }
+  }
+  const onMove = (clientY) => {
+    const rect = parent.getBoundingClientRect();
+    const y = clientY - rect.top;
+    const ratio = Math.min(0.85, Math.max(0.15, y / rect.height));
+    const topPx = ratio * rect.height;
+    const bottomPx = rect.height - topPx - handle.offsetHeight;
+    if (topPx < minTop || bottomPx < minBottom) return;
+    topPane.style.flex = `${ratio * 10}`;
+    bottomPane.style.flex = `${(1 - ratio) * 10}`;
+    if (opts.storageKey) localStorage.setItem(opts.storageKey, String(ratio));
+  };
+  const stop = () => {
+    const wasDragging = dragging;
+    dragging = false;
+    document.body.style.cursor = "";
+    handle.style.background = "#30363d";
+    if (wasDragging) window.dispatchEvent(new CustomEvent("tradview:pane-resize"));
+  };
+  handle.addEventListener("pointerdown", (e) => {
+    dragging = true;
+    handle.setPointerCapture(e.pointerId);
+    document.body.style.cursor = "row-resize";
+  });
+  handle.addEventListener("pointermove", (e) => {
+    if (dragging) {
+      onMove(e.clientY);
+      window.dispatchEvent(new CustomEvent("tradview:pane-resize"));
+    }
+  });
+  handle.addEventListener("pointerup", stop);
+  handle.addEventListener("pointercancel", stop);
+  return () => handle.remove();
+}
+
+// src/indicator-panes.ts
 function barsForSource(bars, source) {
   if (source === "close") return bars;
   return bars.map((b) => ({ ...b, c: (b.h + b.l + b.c) / 3 }));
@@ -40,6 +110,21 @@ function barsForSource(bars, source) {
 function toUtcSeconds(tMs) {
   return Math.floor(tMs / 1e3);
 }
+function detectIndicatorBarMutation(prevTimes, bars) {
+  if (prevTimes.length === 0 || bars.length < prevTimes.length) return "full";
+  const prefixLen = Math.min(prevTimes.length, bars.length);
+  for (let i = 0; i < prefixLen - 1; i++) {
+    if (bars[i].t !== prevTimes[i]) return "full";
+  }
+  if (bars.length === prevTimes.length) {
+    return bars.length > 0 && bars[bars.length - 1].t === prevTimes[prevTimes.length - 1] ? "tail-update" : "full";
+  }
+  if (bars.length - prevTimes.length > 8) return "full";
+  for (let i = 0; i < prevTimes.length; i++) {
+    if (bars[i].t !== prevTimes[i]) return "full";
+  }
+  return "tail-append";
+}
 function lineData(bars, values) {
   const out = [];
   for (let i = 0; i < bars.length; i++) {
@@ -69,19 +154,18 @@ var IndicatorPaneStack = class {
     this.dark = o.theme !== "light";
     this.showGrid = o.showGrid ?? false;
     this.config = o.config ?? DEFAULT_INDICATOR_CONFIG;
+    this.onConfigChange = o.onConfigChange;
     this.root.style.display = "flex";
     this.root.style.flexDirection = "column";
     this.root.style.flex = "2";
     this.root.style.minHeight = "0";
     this.root.style.overflow = "hidden";
-    const macdPane = this.createPaneWrap("MACD");
-    const rsiPane = this.createPaneWrap("RSI");
-    const kdjPane = this.createPaneWrap("KDJ");
+    const macdPane = this.createPaneWrap("MACD", "macd");
+    const rsiPane = this.createPaneWrap("RSI", "rsi");
+    const kdjPane = this.createPaneWrap("KDJ", "kdj");
     this.macdWrap = macdPane.wrap;
     this.rsiWrap = rsiPane.wrap;
     this.kdjWrap = kdjPane.wrap;
-    this.root.append(macdPane.wrap, rsiPane.wrap, kdjPane.wrap);
-    this.applyPaneVisibility();
     const layout = this.layoutForTheme(this.dark);
     const grid = gridOptions(this.showGrid, this.dark);
     this.macdChart = createChart(macdPane.el, { layout, grid, autoSize: true });
@@ -97,6 +181,7 @@ var IndicatorPaneStack = class {
     this.kdjK = this.kdjChart.addSeries(LineSeries, { color: "#42a5f5", lineWidth: 1 });
     this.kdjD = this.kdjChart.addSeries(LineSeries, { color: "#ffa726", lineWidth: 1 });
     this.kdjJ = this.kdjChart.addSeries(LineSeries, { color: "#ef5350", lineWidth: 1 });
+    this.applyPaneVisibility();
   }
   root;
   macdChart;
@@ -115,14 +200,50 @@ var IndicatorPaneStack = class {
   macdWrap;
   rsiWrap;
   kdjWrap;
+  detachResizers = [];
+  lastBarTimes = [];
+  onConfigChange;
   setConfig(config) {
     this.config = config;
+    this.lastBarTimes = [];
+    this.applyPaneVisibility();
+    if (!this.config.showMacd && !this.config.showRsi && !this.config.showKdj) {
+      this.clearBars();
+    }
+  }
+  closePane(id) {
+    const patch = id === "macd" ? { showMacd: false } : id === "rsi" ? { showRsi: false } : { showKdj: false };
+    this.config = { ...this.config, ...patch };
     this.applyPaneVisibility();
+    this.onConfigChange?.(this.config);
   }
   applyPaneVisibility() {
-    this.macdWrap.style.display = this.config.showMacd ? "" : "none";
-    this.rsiWrap.style.display = this.config.showRsi ? "" : "none";
-    this.kdjWrap.style.display = this.config.showKdj ? "" : "none";
+    const anyVisible = this.config.showMacd || this.config.showRsi || this.config.showKdj;
+    this.root.style.display = anyVisible ? "flex" : "none";
+    this.rebuildPaneLayout();
+  }
+  /** Rebuild flex children and drag handles only between visible panes. */
+  rebuildPaneLayout() {
+    for (const detach of this.detachResizers) detach();
+    this.detachResizers.length = 0;
+    this.root.querySelectorAll("[data-pane-resizer]").forEach((el) => el.remove());
+    const panes = [];
+    if (this.config.showMacd) panes.push({ id: "macd", el: this.macdWrap });
+    if (this.config.showRsi) panes.push({ id: "rsi", el: this.rsiWrap });
+    if (this.config.showKdj) panes.push({ id: "kdj", el: this.kdjWrap });
+    this.root.replaceChildren(...panes.map((p) => p.el));
+    for (let i = 0; i < panes.length - 1; i++) {
+      const top = panes[i];
+      const bottom = panes[i + 1];
+      this.detachResizers.push(
+        attachPaneResizer(top.el, bottom.el, {
+          storageKey: `tradview:pane:${top.id}-${bottom.id}`,
+          minTopPx: 72,
+          minBottomPx: 72
+        })
+      );
+    }
+    this.resize();
   }
   clearBars() {
     this.macdLine.setData([]);
@@ -132,22 +253,87 @@ var IndicatorPaneStack = class {
     this.kdjK.setData([]);
     this.kdjD.setData([]);
     this.kdjJ.setData([]);
+    this.lastBarTimes = [];
+  }
+  warmupLookback() {
+    const c = this.config;
+    return Math.max(
+      c.macdSlow + c.macdSignal,
+      c.rsiPeriod,
+      c.kdjPeriod + c.kdjKSmooth + c.kdjDSmooth
+    ) + 5;
+  }
+  detectBarMutation(bars) {
+    return detectIndicatorBarMutation(this.lastBarTimes, bars);
+  }
+  pushSeriesUpdates(series, bars, values, fromIndex) {
+    for (let i = fromIndex; i < bars.length; i++) {
+      const v = values[i];
+      if (v == null) continue;
+      series.update({ time: toUtcSeconds(bars[i].t), value: v });
+    }
+  }
+  pushHistUpdates(series, bars, values, fromIndex) {
+    for (let i = fromIndex; i < bars.length; i++) {
+      const v = values[i];
+      if (v == null) continue;
+      series.update({
+        time: toUtcSeconds(bars[i].t),
+        value: v,
+        color: v >= 0 ? "#26a69a88" : "#ef535088"
+      });
+    }
   }
   setBars(bars) {
-    if (bars.length === 0) return;
+    if (bars.length === 0) {
+      this.clearBars();
+      return;
+    }
+    const needMacd = this.config.showMacd;
+    const needRsi = this.config.showRsi;
+    const needKdj = this.config.showKdj;
+    if (!hasVisibleIndicatorPanes(this.config)) {
+      return;
+    }
+    const mutation = this.detectBarMutation(bars);
+    this.lastBarTimes = bars.map((b) => b.t);
     const src = barsForSource(bars, this.config.source);
-    const m = macd(src, this.config.macdFast, this.config.macdSlow, this.config.macdSignal);
-    this.macdLine.setData(lineData(bars, m.macd));
-    this.macdSignal.setData(lineData(bars, m.signal));
-    this.macdHist.setData(histData(bars, m.histogram));
-    this.rsiLine.setData(lineData(bars, rsi(src, this.config.rsiPeriod)));
-    const k = kdj(src, this.config.kdjPeriod, this.config.kdjKSmooth, this.config.kdjDSmooth);
-    this.kdjK.setData(lineData(bars, k.k));
-    this.kdjD.setData(lineData(bars, k.d));
-    this.kdjJ.setData(lineData(bars, k.j));
-    this.macdChart.timeScale().fitContent();
-    this.rsiChart.timeScale().fitContent();
-    this.kdjChart.timeScale().fitContent();
+    const m = needMacd ? macd(src, this.config.macdFast, this.config.macdSlow, this.config.macdSignal) : null;
+    const r = needRsi ? rsi(src, this.config.rsiPeriod) : null;
+    const k = needKdj ? kdj(src, this.config.kdjPeriod, this.config.kdjKSmooth, this.config.kdjDSmooth) : null;
+    if (mutation === "full") {
+      if (needMacd && m) {
+        this.macdLine.setData(lineData(bars, m.macd));
+        this.macdSignal.setData(lineData(bars, m.signal));
+        this.macdHist.setData(histData(bars, m.histogram));
+        this.macdChart.timeScale().fitContent();
+      }
+      if (needRsi && r) {
+        this.rsiLine.setData(lineData(bars, r));
+        this.rsiChart.timeScale().fitContent();
+      }
+      if (needKdj && k) {
+        this.kdjK.setData(lineData(bars, k.k));
+        this.kdjD.setData(lineData(bars, k.d));
+        this.kdjJ.setData(lineData(bars, k.j));
+        this.kdjChart.timeScale().fitContent();
+      }
+    } else {
+      const from = mutation === "tail-update" ? Math.max(0, bars.length - 1) : Math.max(0, bars.length - this.warmupLookback());
+      if (needMacd && m) {
+        this.pushSeriesUpdates(this.macdLine, bars, m.macd, from);
+        this.pushSeriesUpdates(this.macdSignal, bars, m.signal, from);
+        this.pushHistUpdates(this.macdHist, bars, m.histogram, from);
+      }
+      if (needRsi && r) {
+        this.pushSeriesUpdates(this.rsiLine, bars, r, from);
+      }
+      if (needKdj && k) {
+        this.pushSeriesUpdates(this.kdjK, bars, k.k, from);
+        this.pushSeriesUpdates(this.kdjD, bars, k.d, from);
+        this.pushSeriesUpdates(this.kdjJ, bars, k.j, from);
+      }
+    }
     this.resize();
   }
   setTheme(theme) {
@@ -176,11 +362,14 @@ var IndicatorPaneStack = class {
     this.kdjChart.timeScale().scrollToRealTime();
   }
   resize() {
-    for (const { chart, el } of [
-      { chart: this.macdChart, el: this.macdChart.chartElement().parentElement },
-      { chart: this.rsiChart, el: this.rsiChart.chartElement().parentElement },
-      { chart: this.kdjChart, el: this.kdjChart.chartElement().parentElement }
-    ]) {
+    const panes = [
+      { show: this.config.showMacd, chart: this.macdChart },
+      { show: this.config.showRsi, chart: this.rsiChart },
+      { show: this.config.showKdj, chart: this.kdjChart }
+    ];
+    for (const { show, chart } of panes) {
+      if (!show || !chart) continue;
+      const el = chart.chartElement()?.parentElement;
       if (!el) continue;
       const w = el.clientWidth;
       const h = el.clientHeight;
@@ -188,20 +377,39 @@ var IndicatorPaneStack = class {
     }
   }
   destroy() {
+    for (const detach of this.detachResizers) detach();
+    this.detachResizers.length = 0;
     this.macdChart.remove();
     this.rsiChart.remove();
     this.kdjChart.remove();
     this.root.replaceChildren();
   }
-  createPaneWrap(label) {
+  createPaneWrap(label, paneId) {
     const wrap = document.createElement("div");
+    wrap.className = `tv-indicator-pane tv-indicator-pane--${paneId}`;
+    wrap.dataset.paneId = paneId;
     wrap.style.cssText = "flex:1;min-height:72px;width:100%;position:relative;border-top:1px solid #30363d;";
     const tag = document.createElement("span");
     tag.textContent = label;
     tag.style.cssText = "position:absolute;left:6px;top:4px;z-index:2;font-size:10px;color:#8b949e;pointer-events:none;";
+    const closeBtn = document.createElement("button");
+    closeBtn.type = "button";
+    closeBtn.textContent = "\xD7";
+    closeBtn.title = `\u95DC\u9589 ${label}`;
+    closeBtn.setAttribute("aria-label", `Close ${label}`);
+    closeBtn.style.cssText = "position:absolute;right:6px;top:4px;z-index:3;width:22px;height:22px;padding:0;border:1px solid #30363d;border-radius:4px;background:#21262d;color:#8b949e;cursor:pointer;font-size:14px;line-height:1;";
+    closeBtn.onmouseenter = () => {
+      closeBtn.style.color = "#e6edf3";
+      closeBtn.style.borderColor = "#484f58";
+    };
+    closeBtn.onmouseleave = () => {
+      closeBtn.style.color = "#8b949e";
+      closeBtn.style.borderColor = "#30363d";
+    };
+    closeBtn.onclick = () => this.closePane(paneId);
     const el = document.createElement("div");
     el.style.cssText = "width:100%;height:100%;";
-    wrap.append(tag, el);
+    wrap.append(tag, closeBtn, el);
     return { wrap, el };
   }
   layoutForTheme(dark) {
@@ -210,6 +418,10 @@ var IndicatorPaneStack = class {
       textColor: dark ? "#e6edf3" : "#24292f"
     };
   }
+  /** LWC instances for sync-group reassignment. */
+  getCharts() {
+    return [this.macdChart, this.rsiChart, this.kdjChart];
+  }
 };
 function maOverlayLine(bars, period = 20, source = "close") {
   const src = barsForSource(bars, source);
@@ -233,53 +445,6 @@ function bollOverlayLines(bars, period, mult, source = "close") {
   };
 }
 
-// src/pane-resize.ts
-function attachPaneResizer(topPane, bottomPane, opts = {}) {
-  const minTop = opts.minTopPx ?? 120;
-  const minBottom = opts.minBottomPx ?? 60;
-  const parent = topPane.parentElement;
-  if (!parent) return () => {
-  };
-  const handle = document.createElement("div");
-  handle.style.cssText = "height:4px;cursor:row-resize;background:#30363d;flex-shrink:0;touch-action:none;";
-  bottomPane.insertAdjacentElement("beforebegin", handle);
-  const saved = opts.storageKey ? localStorage.getItem(opts.storageKey) : null;
-  if (saved) {
-    const ratio = Number(saved);
-    if (Number.isFinite(ratio) && ratio > 0 && ratio < 1) {
-      topPane.style.flex = `${ratio * 10}`;
-      bottomPane.style.flex = `${(1 - ratio) * 10}`;
-    }
-  }
-  let dragging = false;
-  const onMove = (clientY) => {
-    const rect = parent.getBoundingClientRect();
-    const y = clientY - rect.top;
-    const ratio = Math.min(0.85, Math.max(0.15, y / rect.height));
-    const topPx = ratio * rect.height;
-    const bottomPx = rect.height - topPx - handle.offsetHeight;
-    if (topPx < minTop || bottomPx < minBottom) return;
-    topPane.style.flex = `${ratio * 10}`;
-    bottomPane.style.flex = `${(1 - ratio) * 10}`;
-    if (opts.storageKey) localStorage.setItem(opts.storageKey, String(ratio));
-  };
-  const stop = () => {
-    dragging = false;
-    document.body.style.cursor = "";
-  };
-  handle.addEventListener("pointerdown", (e) => {
-    dragging = true;
-    handle.setPointerCapture(e.pointerId);
-    document.body.style.cursor = "row-resize";
-  });
-  handle.addEventListener("pointermove", (e) => {
-    if (dragging) onMove(e.clientY);
-  });
-  handle.addEventListener("pointerup", stop);
-  handle.addEventListener("pointercancel", stop);
-  return () => handle.remove();
-}
-
 // src/time-scale-bus.ts
 var TimeScaleBus = class {
   charts = [];
@@ -291,6 +456,7 @@ var TimeScaleBus = class {
     if (this.charts.includes(chart)) return;
     this.charts.push(chart);
     chart.timeScale().subscribeVisibleLogicalRangeChange((range) => {
+      if (!this.charts.includes(chart)) return;
       if (this.syncing || !range) return;
       const tr = chart.timeScale().getVisibleRange();
       if (tr && typeof tr.from === "number" && typeof tr.to === "number") {
@@ -300,6 +466,10 @@ var TimeScaleBus = class {
       this.syncFrom(chart, range);
     });
   }
+  unregister(chart) {
+    const i = this.charts.indexOf(chart);
+    if (i >= 0) this.charts.splice(i, 1);
+  }
   subscribeTransform(listener) {
     this.listeners.add(listener);
     return () => this.listeners.delete(listener);
@@ -368,6 +538,101 @@ var TimeScaleBus = class {
   }
 };
 
+// src/time-scale-bus-registry.ts
+function normalizeSyncGroupId(id) {
+  if (id == null) return null;
+  const trimmed = String(id).trim();
+  return trimmed.length > 0 ? trimmed : null;
+}
+var INDEP_PREFIX = "@independent:";
+function independentBusKey(pane) {
+  return `${INDEP_PREFIX}${pane}`;
+}
+function resolveBusMapKey(groupId, pane) {
+  const norm = normalizeSyncGroupId(groupId);
+  return norm ?? independentBusKey(pane);
+}
+var TimeScaleBusRegistry = class {
+  buses = /* @__PURE__ */ new Map();
+  paneKeys = /* @__PURE__ */ new Map();
+  activeKey;
+  constructor() {
+    for (const pane of ["main", "volume", "indicator"]) {
+      const key = independentBusKey(pane);
+      this.paneKeys.set(pane, key);
+      this.getOrCreateBus(key);
+    }
+    this.activeKey = this.paneKeys.get("main");
+  }
+  getOrCreateBus(key) {
+    let bus = this.buses.get(key);
+    if (!bus) {
+      bus = new TimeScaleBus();
+      this.buses.set(key, bus);
+    }
+    return bus;
+  }
+  getBusKeyForPane(pane) {
+    return this.paneKeys.get(pane);
+  }
+  getBusForPane(pane) {
+    return this.getOrCreateBus(this.getBusKeyForPane(pane));
+  }
+  /** Active bus for IChart viewport APIs (follows last-focused chart pane). */
+  get activeBus() {
+    return this.getOrCreateBus(this.activeKey);
+  }
+  getActiveBusKey() {
+    return this.activeKey;
+  }
+  setActivePane(pane) {
+    this.activeKey = this.paneKeys.get(pane);
+  }
+  setPaneSyncGroup(pane, groupId) {
+    const nextKey = resolveBusMapKey(groupId, pane);
+    const prevKey = this.paneKeys.get(pane);
+    this.paneKeys.set(pane, nextKey);
+    this.getOrCreateBus(nextKey);
+    if (this.activeKey === prevKey) this.activeKey = nextKey;
+    return prevKey;
+  }
+  forEachBus(fn) {
+    for (const [key, bus] of this.buses) fn(key, bus);
+  }
+  moveChart(chart, fromKey, toKey, copyRange = true) {
+    if (fromKey === toKey) return;
+    const from = this.getOrCreateBus(fromKey);
+    const to = this.getOrCreateBus(toKey);
+    const range = copyRange ? from.getVisibleRange() : null;
+    from.unregister(chart);
+    to.register(chart);
+    if (range) to.setVisibleTimeRange(range);
+  }
+};
+
+// src/viewport-fit.ts
+import { intervalMs } from "@coderyo/data";
+function defaultBarSpacingForInterval(interval) {
+  const ms = intervalMs(interval);
+  if (ms <= 1e3) return 3;
+  if (ms <= 5e3) return 4;
+  if (ms <= 15e3) return 5;
+  if (ms <= 3e4) return 6;
+  if (ms <= 6e4) return 7;
+  if (ms <= 3e5) return 8;
+  if (ms <= 9e5) return 9;
+  if (ms <= 36e5) return 10;
+  if (ms <= 144e5) return 11;
+  return 12;
+}
+function resolveBarSpacingForInterval(interval, overrides) {
+  const custom = overrides?.[interval];
+  if (custom != null && Number.isFinite(custom) && custom > 0) {
+    return Math.min(24, Math.max(2, custom));
+  }
+  return defaultBarSpacingForInterval(interval);
+}
+
 // src/bar-smooth-animator.ts
 function lerp(a, b, t) {
   return a + (b - a) * t;
@@ -425,6 +690,13 @@ var BarSmoothAnimator = class {
 };
 
 // src/pane-orchestrator.ts
+function isLayeredPaneMount(opts) {
+  return !!opts.volumeMount;
+}
+function shouldResizeChartPane(focus, pane) {
+  if (!focus) return true;
+  return focus.has(pane);
+}
 function toUtcSeconds2(tMs) {
   return Math.floor(tMs / 1e3);
 }
@@ -435,7 +707,18 @@ function barToVolume(b) {
   return { time: toUtcSeconds2(b.t), value: b.v ?? 0 };
 }
 var PaneOrchestrator = class {
-  bus = new TimeScaleBus();
+  busRegistry = new TimeScaleBusRegistry();
+  /** Active sync group bus (last-focused pane); used by ChartController viewport APIs. */
+  get bus() {
+    return this.busRegistry.activeBus;
+  }
+  layeredPanes;
+  mainEl;
+  volWrap;
+  detachMainVolResizer = () => {
+  };
+  resizeFocusPanes = null;
+  listenPaneResizeEvents;
   mainChart;
   volumeChart;
   mainSeries;
@@ -458,24 +741,70 @@ var PaneOrchestrator = class {
   barTimesOrdered = [];
   didInitialFit = false;
   skipNextInitialFit = false;
+  /** setBars ran before the pane had layout size; refit on first real resize. */
+  pendingViewportFit = false;
+  pendingViewportBars = null;
   indicatorConfig = null;
+  onIndicatorConfigChange;
+  currentInterval = "1h";
+  autoBarSpacingOnInterval = true;
+  barSpacingByInterval;
   priceLine = null;
   barAnimator = null;
   smoothPriceDurationMs = 150;
   constructor(opts) {
     this.maxRenderPoints = opts.maxRenderPoints ?? 4e3;
+    this.listenPaneResizeEvents = opts.listenPaneResizeEvents !== false;
     this.dark = opts.theme !== "light";
     this.showGrid = opts.showGrid ?? false;
     const layout = this.layoutForTheme(this.dark);
     const grid = gridOptions(this.showGrid, this.dark);
-    const mainEl = document.createElement("div");
-    mainEl.style.cssText = "flex:7;min-height:120px;width:100%;position:relative;";
+    this.layeredPanes = !!opts.volumeMount;
     const volEl = document.createElement("div");
-    volEl.style.cssText = "flex:2;min-height:64px;width:100%;position:relative;";
-    opts.container.style.cssText = "display:flex;flex-direction:column;height:100%;width:100%;min-height:240px;overflow:hidden;";
-    opts.container.append(mainEl, volEl);
-    attachPaneResizer(mainEl, volEl, { storageKey: "tradview:pane:main-volume" });
-    this.mainChart = createChart2(mainEl, { layout, grid, autoSize: true });
+    volEl.style.cssText = "width:100%;height:100%;min-height:0;position:relative;";
+    if (this.layeredPanes) {
+      this.mainEl = opts.container;
+      this.mainEl.style.cssText = "width:100%;height:100%;min-height:80px;position:relative;overflow:hidden;";
+      this.volWrap = opts.volumeMount;
+      this.volWrap.dataset.paneId = "volume";
+      this.volWrap.className = "tv-volume-pane tv-volume-pane--layered";
+      this.volWrap.replaceChildren();
+      this.volWrap.style.cssText = "width:100%;height:100%;min-height:48px;position:relative;overflow:hidden;box-sizing:border-box;";
+      const volTag = document.createElement("span");
+      volTag.textContent = "Volume";
+      volTag.style.cssText = "position:absolute;left:6px;top:4px;z-index:2;font-size:10px;color:#8b949e;pointer-events:none;";
+      const volClose = document.createElement("button");
+      volClose.type = "button";
+      volClose.textContent = "\xD7";
+      volClose.title = "\u95DC\u9589\u6210\u4EA4\u91CF";
+      volClose.setAttribute("aria-label", "Close volume");
+      volClose.style.cssText = "position:absolute;right:6px;top:4px;z-index:3;width:22px;height:22px;padding:0;border:1px solid #30363d;border-radius:4px;background:#21262d;color:#8b949e;cursor:pointer;font-size:14px;line-height:1;";
+      volClose.onclick = () => this.closeVolumePane();
+      this.volWrap.append(volTag, volClose, volEl);
+    } else {
+      this.mainEl = document.createElement("div");
+      this.mainEl.style.cssText = "flex:7;min-height:120px;width:100%;position:relative;";
+      volEl.style.cssText = "flex:1;min-height:0;width:100%;height:100%;position:relative;";
+      this.volWrap = document.createElement("div");
+      this.volWrap.dataset.paneId = "volume";
+      this.volWrap.className = "tv-volume-pane";
+      this.volWrap.style.cssText = "flex:2;min-height:48px;width:100%;position:relative;display:flex;flex-direction:column;border-top:1px solid #30363d;";
+      const volTag = document.createElement("span");
+      volTag.textContent = "Volume";
+      volTag.style.cssText = "position:absolute;left:6px;top:4px;z-index:2;font-size:10px;color:#8b949e;pointer-events:none;";
+      const volClose = document.createElement("button");
+      volClose.type = "button";
+      volClose.textContent = "\xD7";
+      volClose.title = "\u95DC\u9589\u6210\u4EA4\u91CF";
+      volClose.setAttribute("aria-label", "Close volume");
+      volClose.style.cssText = "position:absolute;right:6px;top:4px;z-index:3;width:22px;height:22px;padding:0;border:1px solid #30363d;border-radius:4px;background:#21262d;color:#8b949e;cursor:pointer;font-size:14px;line-height:1;";
+      volClose.onclick = () => this.closeVolumePane();
+      this.volWrap.append(volTag, volClose, volEl);
+      opts.container.style.cssText = "display:flex;flex-direction:column;height:100%;width:100%;min-height:200px;overflow:hidden;";
+      opts.container.append(this.mainEl, this.volWrap);
+      this.rebuildMainVolumeResizer();
+    }
+    this.mainChart = createChart2(this.mainEl, { layout, grid, autoSize: true });
     this.volumeChart = createChart2(volEl, {
       layout,
       grid,
@@ -531,15 +860,25 @@ var PaneOrchestrator = class {
       lineWidth: 1,
       title: "VolMA5"
     });
-    this.bus.register(this.mainChart);
-    this.bus.register(this.volumeChart);
+    this.busRegistry.getBusForPane("main").register(this.mainChart);
+    this.busRegistry.getBusForPane("volume").register(this.volumeChart);
     this.indicatorRoot = opts.indicatorRoot;
     this.indicatorConfig = opts.indicatorConfig ?? null;
+    this.onIndicatorConfigChange = opts.onIndicatorConfigChange;
+    this.autoBarSpacingOnInterval = opts.autoBarSpacingOnInterval ?? true;
+    this.barSpacingByInterval = opts.barSpacingByInterval;
     this.pinePlots = opts.pinePlots ?? null;
     this.indicators = this.createIndicatorStack();
-    this.initOverlay(mainEl);
+    this.initOverlay(this.mainEl);
     this.setSmoothPriceUpdate(opts.smoothPriceUpdate ?? false, opts.smoothPriceDurationMs);
+    this.applyVolumeVisibility();
+    if (opts.listenPaneResizeEvents !== false) {
+      window.addEventListener("tradview:pane-resize", this.onPaneResize);
+    }
   }
+  onPaneResize = () => {
+    this.resize();
+  };
   setSmoothPriceUpdate(enabled, durationMs = 150) {
     this.smoothPriceDurationMs = durationMs;
     if (enabled) {
@@ -573,12 +912,16 @@ var PaneOrchestrator = class {
   applyLastBarToSeries(bar) {
     this.barByTime.set(bar.t, bar);
     this.mainSeries.update(barToCandle(bar));
-    this.volumeSeries.update(barToVolume(bar));
+    if (this.isVolumeVisible()) {
+      this.volumeSeries.update(barToVolume(bar));
+    }
     this.ensurePriceLine(bar.c);
     if (this.indicatorConfig) {
       const bars = [...this.barByTime.values()].sort((a, b) => a.t - b.t);
       this.applyMainOverlays(bars);
-      this.indicators?.setBars(bars);
+      if (hasVisibleIndicatorPanes2(this.indicatorConfig)) {
+        this.indicators?.setBars(bars);
+      }
     }
   }
   ensurePriceLine(price) {
@@ -595,6 +938,9 @@ var PaneOrchestrator = class {
       this.priceLine.applyOptions({ price });
     }
   }
+  setIntervalContext(interval) {
+    this.currentInterval = interval;
+  }
   setTheme(theme) {
     this.dark = theme === "dark";
     const layout = this.layoutForTheme(this.dark);
@@ -606,17 +952,19 @@ var PaneOrchestrator = class {
   setIndicatorConfig(config) {
     this.indicatorConfig = config;
     if (!config) {
-      this.indicators = null;
+      this.teardownIndicatorStack();
       this.maSeries.setData([]);
       this.emaSeries.setData([]);
       this.bollUpper.setData([]);
       this.bollMiddle.setData([]);
       this.bollLower.setData([]);
       this.volMaSeries.setData([]);
+      this.volumeSeries.setData([]);
       this.emaSeries.applyOptions({ visible: false });
       this.bollUpper.applyOptions({ visible: false });
       this.bollMiddle.applyOptions({ visible: false });
       this.bollLower.applyOptions({ visible: false });
+      this.applyVolumeVisibility();
       return;
     }
     if (!this.indicators) this.indicators = this.createIndicatorStack();
@@ -624,20 +972,112 @@ var PaneOrchestrator = class {
     this.indicators?.setConfig(config);
     if (bars.length > 0) {
       this.applyMainOverlays(bars);
-      this.indicators?.setBars(bars);
+      if (hasVisibleIndicatorPanes2(config)) {
+        this.indicators?.setBars(bars);
+      }
+    }
+    this.applyVolumeVisibility();
+  }
+  isVolumeVisible() {
+    return this.indicatorConfig?.showVolume ?? true;
+  }
+  closeVolumePane() {
+    if (!this.indicatorConfig) {
+      this.indicatorConfig = { ...DEFAULT_INDICATOR_CONFIG2, showVolume: false };
+    } else {
+      this.indicatorConfig = { ...this.indicatorConfig, showVolume: false };
+    }
+    this.applyVolumeVisibility();
+    this.onIndicatorConfigChange?.(this.indicatorConfig);
+  }
+  applyVolumeVisibility() {
+    const show = this.isVolumeVisible();
+    this.volWrap.style.display = show ? "" : "none";
+    this.rebuildMainVolumeResizer();
+    if (!show) {
+      this.volumeSeries.setData([]);
+      this.volMaSeries.setData([]);
     }
+    this.syncChartSize();
+  }
+  /** Assign per-pane sync group ids (`''` / omit = independent). Re-registers LWC charts on group change. */
+  setPaneSyncGroups(patch) {
+    const apply = (pane, groupId) => {
+      const prevKey = this.busRegistry.setPaneSyncGroup(pane, groupId);
+      const nextKey = this.busRegistry.getBusKeyForPane(pane);
+      if (pane === "main") {
+        this.busRegistry.moveChart(this.mainChart, prevKey, nextKey);
+      } else if (pane === "volume") {
+        this.busRegistry.moveChart(this.volumeChart, prevKey, nextKey);
+      } else if (this.indicators) {
+        for (const chart of this.indicators.getCharts()) {
+          this.busRegistry.moveChart(chart, prevKey, nextKey);
+        }
+      }
+    };
+    if (patch.main !== void 0) apply("main", patch.main);
+    if (patch.volume !== void 0) apply("volume", patch.volume);
+    if (patch.indicator !== void 0) apply("indicator", patch.indicator);
+  }
+  setActiveSyncPane(pane) {
+    const key = pane === "volume" ? "volume" : pane === "indicator" ? "indicator" : "main";
+    this.busRegistry.setActivePane(key);
+  }
+  /** P2: when set, only these panes get LWC resize (panes in the same sync group still share TimeScaleBus). */
+  setResizeFocusPanes(panes) {
+    this.resizeFocusPanes = panes?.length ? new Set(panes) : null;
+    this.resize();
+  }
+  /** Current resize focus (null = all panes). @internal — not part of public package API. */
+  getResizeFocusPanes() {
+    return this.resizeFocusPanes ? [...this.resizeFocusPanes] : null;
+  }
+  shouldResizePane(pane) {
+    return shouldResizeChartPane(this.resizeFocusPanes, pane);
+  }
+  rebuildMainVolumeResizer() {
+    if (this.layeredPanes) return;
+    this.detachMainVolResizer();
+    const parent = this.mainEl.parentElement;
+    parent?.querySelectorAll(":scope > [data-pane-resizer]").forEach((el) => el.remove());
+    if (!this.isVolumeVisible()) {
+      this.mainEl.style.flex = "1";
+      return;
+    }
+    this.mainEl.style.flex = "";
+    this.volWrap.style.flex = "";
+    this.detachMainVolResizer = attachPaneResizer(this.mainEl, this.volWrap, {
+      storageKey: "tradview:pane:main-volume",
+      minTopPx: 120,
+      minBottomPx: 48
+    });
   }
   setPinePlots(plots) {
     this.pinePlots = plots;
     const bars = [...this.barByTime.values()].sort((a, b) => a.t - b.t);
     this.syncPinePlotSeries(bars);
   }
+  teardownIndicatorStack() {
+    this.indicators?.destroy();
+    this.indicators = null;
+  }
   applyMainOverlays(bars) {
     const cfg = this.indicatorConfig;
     if (!cfg) return;
-    this.maSeries.applyOptions({ title: `MA${cfg.maPeriod}` });
-    this.maSeries.setData(maOverlayLine(bars, cfg.maPeriod, cfg.source));
-    this.volMaSeries.setData(volMaOverlayLine(bars, cfg.volMaPeriod));
+    if (cfg.showMa) {
+      this.maSeries.applyOptions({ visible: true, title: `MA${cfg.maPeriod}` });
+      this.maSeries.setData(maOverlayLine(bars, cfg.maPeriod, cfg.source));
+    } else {
+      this.maSeries.applyOptions({ visible: false });
+      this.maSeries.setData([]);
+    }
+    if (cfg.showVolMa) {
+      this.volMaSeries.applyOptions({ visible: true });
+      this.volMaSeries.setData(volMaOverlayLine(bars, cfg.volMaPeriod));
+    } else {
+      this.volMaSeries.applyOptions({ visible: false });
+      this.volMaSeries.setData([]);
+    }
     if (cfg.showEma) {
       this.emaSeries.applyOptions({ visible: true, title: `EMA${cfg.emaPeriod}` });
       this.emaSeries.setData(emaOverlayLine(bars, cfg.emaPeriod, cfg.source));
@@ -712,10 +1152,16 @@ var PaneOrchestrator = class {
       vols.push(barToVolume(b));
     }
     this.mainSeries.setData(candles);
-    this.volumeSeries.setData(vols);
+    if (this.isVolumeVisible()) {
+      this.volumeSeries.setData(vols);
+    } else {
+      this.volumeSeries.setData([]);
+    }
     if (this.indicatorConfig) {
       this.applyMainOverlays(renderBars);
-      this.indicators?.setBars(renderBars);
+      if (hasVisibleIndicatorPanes2(this.indicatorConfig)) {
+        this.indicators?.setBars(renderBars);
+      }
     } else {
       this.maSeries.setData([]);
       this.emaSeries.setData([]);
@@ -727,15 +1173,35 @@ var PaneOrchestrator = class {
     }
     if (renderBars.length > 0) {
       this.syncChartSize();
-      if (!this.didInitialFit && !this.skipNextInitialFit) {
-        this.mainChart.timeScale().fitContent();
-        this.volumeChart.timeScale().fitContent();
-        this.indicators?.fitContent();
-        this.didInitialFit = true;
-      }
+      this.tryInitialViewportFit(renderBars);
       this.skipNextInitialFit = false;
     }
   }
+  mainPaneHasSize() {
+    const el = this.mainChart.chartElement().parentElement;
+    return (el?.clientWidth ?? 0) > 0 && (el?.clientHeight ?? 0) > 0;
+  }
+  tryInitialViewportFit(renderBars) {
+    if (this.didInitialFit || this.skipNextInitialFit) return;
+    if (!this.mainPaneHasSize()) {
+      this.pendingViewportFit = true;
+      this.pendingViewportBars = renderBars;
+      return;
+    }
+    this.applyViewAfterDataReload(renderBars);
+    this.didInitialFit = true;
+    this.pendingViewportFit = false;
+    this.pendingViewportBars = null;
+  }
+  flushPendingViewportFit() {
+    if (!this.pendingViewportFit || this.skipNextInitialFit || this.didInitialFit) return;
+    const bars = this.pendingViewportBars ?? [...this.barByTime.values()].sort((a, b) => a.t - b.t);
+    if (bars.length === 0 || !this.mainPaneHasSize()) return;
+    this.applyViewAfterDataReload(bars);
+    this.didInitialFit = true;
+    this.pendingViewportFit = false;
+    this.pendingViewportBars = null;
+  }
   subscribeCrosshair(listener) {
     const handler = (param) => {
       if (param.time == null || !param.point) {
@@ -772,17 +1238,56 @@ var PaneOrchestrator = class {
   }
   createIndicatorStack() {
     if (!this.indicatorRoot || !this.indicatorConfig) return null;
-    return new IndicatorPaneStack(this.indicatorRoot, this.bus, {
+    return new IndicatorPaneStack(this.indicatorRoot, this.busRegistry.getBusForPane("indicator"), {
       theme: this.dark ? "dark" : "light",
       showGrid: this.showGrid,
-      config: this.indicatorConfig
+      config: this.indicatorConfig,
+      onConfigChange: (config) => {
+        this.indicatorConfig = config;
+        this.onIndicatorConfigChange?.(config);
+      }
     });
   }
+  /** After symbol/interval reload: bar spacing for interval + show integrator-loaded span. */
+  applyIntervalBarSpacing(interval) {
+    if (!this.autoBarSpacingOnInterval) return;
+    const iv = interval ?? this.currentInterval;
+    const spacing = resolveBarSpacingForInterval(iv, this.barSpacingByInterval);
+    this.busRegistry.forEachBus((_, bus) => bus.setBarSpacing(spacing));
+  }
+  setBarSpacingPolicy(opts) {
+    if (opts.autoBarSpacingOnInterval !== void 0) {
+      this.autoBarSpacingOnInterval = opts.autoBarSpacingOnInterval;
+    }
+    if (opts.barSpacingByInterval !== void 0) {
+      this.barSpacingByInterval = opts.barSpacingByInterval;
+    }
+  }
+  /** Sync time scale to loaded bars (integrator history); adjust bar spacing only, not bar count. */
+  applyViewAfterDataReload(renderBars) {
+    if (this.autoBarSpacingOnInterval) {
+      this.applyIntervalBarSpacing();
+    } else {
+      this.mainChart.timeScale().fitContent();
+      if (this.isVolumeVisible()) this.volumeChart.timeScale().fitContent();
+      this.indicators?.fitContent();
+    }
+    if (renderBars.length > 0) {
+      const fromMs = renderBars[0].t;
+      const toMs = renderBars[renderBars.length - 1].t + intervalMs2(this.currentInterval);
+      this.bus.setVisibleTimeRange({ fromMs, toMs });
+    }
+    this.scrollToRealtime();
+  }
   resetViewState() {
     this.didInitialFit = false;
     this.skipNextInitialFit = false;
-    this.bus.visibleFromMs = 0;
-    this.bus.visibleToMs = 0;
+    this.pendingViewportFit = false;
+    this.pendingViewportBars = null;
+    this.busRegistry.forEachBus((_, bus) => {
+      bus.visibleFromMs = 0;
+      bus.visibleToMs = 0;
+    });
   }
   /** Skip the next automatic fitContent after setBars (used by reloadHistory). */
   preserveViewportOnNextSetBars() {
@@ -810,10 +1315,10 @@ var PaneOrchestrator = class {
       if (nearest == null) return;
       const i = this.barTimesOrdered.indexOf(nearest.t);
       if (i < 0) return;
-      this.bus.scrollToLogicalPosition(i, (animationMs ?? 0) > 0);
+      this.busRegistry.getBusForPane("main").scrollToLogicalPosition(i, (animationMs ?? 0) > 0);
       return;
     }
-    this.bus.scrollToLogicalPosition(idx, (animationMs ?? 0) > 0);
+    this.busRegistry.getBusForPane("main").scrollToLogicalPosition(idx, (animationMs ?? 0) > 0);
   }
   /** Clear series while symbol/interval data reloads (avoids overlapping candles). */
   clearBars() {
@@ -828,13 +1333,13 @@ var PaneOrchestrator = class {
   }
   fitContent() {
     this.mainChart.timeScale().fitContent();
-    this.volumeChart.timeScale().fitContent();
+    if (this.isVolumeVisible()) this.volumeChart.timeScale().fitContent();
     this.indicators?.fitContent();
     this.didInitialFit = true;
   }
   scrollToRealtime() {
     this.mainChart.timeScale().scrollToRealTime();
-    this.volumeChart.timeScale().scrollToRealTime();
+    if (this.isVolumeVisible()) this.volumeChart.timeScale().scrollToRealTime();
     this.indicators?.scrollToRealtime();
   }
   setLogScale(enabled) {
@@ -843,7 +1348,18 @@ var PaneOrchestrator = class {
   resize() {
     this.syncChartSize();
     this.syncOverlaySize();
+    if (this.shouldResizePane("indicator")) this.indicators?.resize();
+    this.flushPendingViewportFit();
+  }
+  /**
+   * Resize every LWC pane once for viewport fit; does **not** change {@link resizeFocusPanes}.
+   * @internal Used by ChartController data refresh paths.
+   */
+  resizeAllPanes() {
+    this.syncChartSize({ allPanes: true });
+    this.syncOverlaySize();
     this.indicators?.resize();
+    this.flushPendingViewportFit();
   }
   getOverlayCanvas() {
     return this.overlayCanvas;
@@ -868,6 +1384,10 @@ var PaneOrchestrator = class {
     return p ?? null;
   }
   destroy() {
+    if (this.listenPaneResizeEvents) {
+      window.removeEventListener("tradview:pane-resize", this.onPaneResize);
+    }
+    this.detachMainVolResizer();
     this.barAnimator?.cancel();
     if (this.priceLine) {
       this.mainSeries.removePriceLine(this.priceLine);
@@ -885,8 +1405,10 @@ var PaneOrchestrator = class {
     parent.appendChild(canvas);
     this.overlayCanvas = canvas;
     this.syncOverlaySize();
-    this.bus.subscribeTransform(() => {
-      this.syncOverlaySize();
+    this.busRegistry.forEachBus((_, bus) => {
+      bus.subscribeTransform(() => {
+        this.syncOverlaySize();
+      });
     });
   }
   /** Let drawing overlay receive clicks; cursor mode keeps pan/zoom on LWC. */
@@ -903,15 +1425,16 @@ var PaneOrchestrator = class {
     this.overlayCanvas.width = rect.width * devicePixelRatio;
     this.overlayCanvas.height = rect.height * devicePixelRatio;
   }
-  syncChartSize() {
+  syncChartSize(opts) {
+    const all = opts?.allPanes === true;
     const mainEl = this.mainChart.chartElement().parentElement;
     const volEl = this.volumeChart.chartElement().parentElement;
-    if (mainEl) {
+    if (mainEl && (all || this.shouldResizePane("main"))) {
       const w = mainEl.clientWidth;
       const h = mainEl.clientHeight;
       if (w > 0 && h > 0) this.mainChart.resize(w, h);
     }
-    if (volEl) {
+    if (this.isVolumeVisible() && volEl && (all || this.shouldResizePane("volume"))) {
       const w = volEl.clientWidth;
       const h = volEl.clientHeight;
       if (w > 0 && h > 0) this.volumeChart.resize(w, h);
@@ -928,9 +1451,19 @@ export {
   IndicatorPaneStack,
   PaneOrchestrator,
   TimeScaleBus,
+  TimeScaleBusRegistry,
+  attachPaneResizer,
   bollOverlayLines,
+  defaultBarSpacingForInterval,
+  detectIndicatorBarMutation,
   emaOverlayLine,
+  independentBusKey,
+  isLayeredPaneMount,
   maOverlayLine,
+  normalizeSyncGroupId,
+  resolveBarSpacingForInterval,
+  resolveBusMapKey,
+  shouldResizeChartPane,
   volMaOverlayLine
 };
 //# sourceMappingURL=index.js.map