@coderyo/renderer-lite 1.0.3 → 1.1.1

package/dist/index.js

@@ -7,6 +7,106 @@ import {
   LineSeries as LineSeries2
 } from "lightweight-charts";
 import { intervalMs as intervalMs2 } from "@coderyo/data";
+
+// src/time-scale-prepend.ts
+function buildSliceTimes(sortedTimes, renderFromMs, renderToMs) {
+  return sortedTimes.filter((t) => t >= renderFromMs && t <= renderToMs);
+}
+function countPrependSliceDelta(beforeSlice, afterSlice) {
+  const before = new Set(beforeSlice);
+  let delta = 0;
+  for (const t of afterSlice) {
+    if (!before.has(t)) delta += 1;
+  }
+  return delta;
+}
+function logicalIndexToBarTimeMs(sliceTimes, logicalIndex) {
+  if (sliceTimes.length === 0) return null;
+  const idx = Math.min(Math.max(0, Math.floor(logicalIndex)), sliceTimes.length - 1);
+  return sliceTimes[idx] ?? null;
+}
+function deriveRenderRange(visibleFromMs, visibleToMs, sortedTimes, intervalMs3) {
+  if (visibleToMs <= visibleFromMs && sortedTimes.length > 0) {
+    const fromMs = sortedTimes[0];
+    const toMs = sortedTimes[sortedTimes.length - 1];
+    const bufferMs2 = intervalMs3 * 20;
+    return { renderFromMs: fromMs - bufferMs2, renderToMs: toMs + bufferMs2 };
+  }
+  const span = visibleToMs - visibleFromMs;
+  const bufferMs = Math.max(span * 0.1, intervalMs3 * 50);
+  return {
+    renderFromMs: visibleFromMs - bufferMs,
+    renderToMs: visibleToMs + bufferMs
+  };
+}
+function logicalRangeForVisibleWindow(sliceTimes, visibleFromMs, visibleToMs) {
+  if (sliceTimes.length === 0 || visibleToMs <= visibleFromMs) return null;
+  let fromIdx = 0;
+  let toIdx = sliceTimes.length - 1;
+  for (let i = 0; i < sliceTimes.length; i++) {
+    if (sliceTimes[i] >= visibleFromMs) {
+      fromIdx = i;
+      break;
+    }
+  }
+  for (let i = sliceTimes.length - 1; i >= 0; i--) {
+    if (sliceTimes[i] <= visibleToMs) {
+      toIdx = i;
+      break;
+    }
+  }
+  if (toIdx < fromIdx) return null;
+  return { from: fromIdx, to: toIdx };
+}
+function computePrependSliceDeltaForViewport(input) {
+  const { visibleFromMs, visibleToMs, intervalMs: intervalMs3, sortedTimesBefore, sortedTimesAfter } = input;
+  const renderBefore = deriveRenderRange(visibleFromMs, visibleToMs, sortedTimesBefore, intervalMs3);
+  const renderAfter = deriveRenderRange(visibleFromMs, visibleToMs, sortedTimesAfter, intervalMs3);
+  const beforeSlice = buildSliceTimes(
+    sortedTimesBefore,
+    renderBefore.renderFromMs,
+    renderBefore.renderToMs
+  );
+  const afterSlice = buildSliceTimes(
+    sortedTimesAfter,
+    renderAfter.renderFromMs,
+    renderAfter.renderToMs
+  );
+  return countPrependSliceDelta(beforeSlice, afterSlice);
+}
+function compensatePrependOnRegistry(opts) {
+  const { registry, sortedTimesBefore, sortedTimesAfter, intervalMs: intervalMs3, referenceChart } = opts;
+  registry.forEachBus((_, bus) => {
+    compensatePrependOnBus(bus, {
+      sortedTimesBefore,
+      sortedTimesAfter,
+      intervalMs: intervalMs3,
+      referenceChart
+    });
+  });
+}
+function compensatePrependOnBus(bus, opts) {
+  const range = bus.getVisibleRange();
+  if (!range) return;
+  const delta = computePrependSliceDeltaForViewport({
+    sortedTimesBefore: opts.sortedTimesBefore,
+    sortedTimesAfter: opts.sortedTimesAfter,
+    visibleFromMs: range.fromMs,
+    visibleToMs: range.toMs,
+    intervalMs: opts.intervalMs
+  });
+  if (delta <= 0) return;
+  const { renderFromMs, renderToMs } = deriveRenderRange(
+    range.fromMs,
+    range.toMs,
+    opts.sortedTimesAfter,
+    opts.intervalMs
+  );
+  const sliceAfter = buildSliceTimes(opts.sortedTimesAfter, renderFromMs, renderToMs);
+  bus.compensatePrependLogicalRange(delta, opts.referenceChart, sliceAfter);
+}
+
+// src/pane-orchestrator.ts
 import { lodDecimateBars } from "@coderyo/series";
 
 // src/chart-grid.ts
@@ -19,7 +119,10 @@ function gridOptions(showGrid, dark) {
 }
 
 // src/pane-orchestrator.ts
-import { hasVisibleIndicatorPanes as hasVisibleIndicatorPanes2 } from "@coderyo/indicators";
+import {
+  DEFAULT_INDICATOR_CONFIG as DEFAULT_INDICATOR_CONFIG2,
+  hasVisibleIndicatorPanes as hasVisibleIndicatorPanes2
+} from "@coderyo/indicators";
 
 // src/indicator-panes.ts
 import {
@@ -46,18 +149,25 @@ function attachPaneResizer(topPane, bottomPane, opts = {}) {
   const parent = topPane.parentElement;
   if (!parent) return () => {
   };
+  let dragging = false;
   const handle = document.createElement("div");
-  handle.style.cssText = "height:4px;cursor:row-resize;background:#30363d;flex-shrink:0;touch-action:none;";
+  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 && ratio < 1) {
+    if (Number.isFinite(ratio) && ratio >= 0.15 && ratio <= 0.85) {
       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;
@@ -70,8 +180,11 @@ function attachPaneResizer(topPane, bottomPane, opts = {}) {
     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;
@@ -79,7 +192,10 @@ function attachPaneResizer(topPane, bottomPane, opts = {}) {
     document.body.style.cursor = "row-resize";
   });
   handle.addEventListener("pointermove", (e) => {
-    if (dragging) onMove(e.clientY);
+    if (dragging) {
+      onMove(e.clientY);
+      window.dispatchEvent(new CustomEvent("tradview:pane-resize"));
+    }
   });
   handle.addEventListener("pointerup", stop);
   handle.addEventListener("pointercancel", stop);
@@ -150,20 +266,6 @@ var IndicatorPaneStack = class {
     this.macdWrap = macdPane.wrap;
     this.rsiWrap = rsiPane.wrap;
     this.kdjWrap = kdjPane.wrap;
-    this.root.append(macdPane.wrap, rsiPane.wrap, kdjPane.wrap);
-    this.detachResizers.push(
-      attachPaneResizer(macdPane.wrap, rsiPane.wrap, {
-        storageKey: "tradview:pane:macd-rsi",
-        minTopPx: 72,
-        minBottomPx: 72
-      }),
-      attachPaneResizer(rsiPane.wrap, kdjPane.wrap, {
-        storageKey: "tradview:pane:rsi-kdj",
-        minTopPx: 72,
-        minBottomPx: 72
-      })
-    );
-    this.applyPaneVisibility();
     const layout = this.layoutForTheme(this.dark);
     const grid = gridOptions(this.showGrid, this.dark);
     this.macdChart = createChart(macdPane.el, { layout, grid, autoSize: true });
@@ -179,6 +281,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;
@@ -215,11 +318,32 @@ var IndicatorPaneStack = class {
     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([]);
@@ -338,11 +462,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;
@@ -360,6 +487,7 @@ var IndicatorPaneStack = class {
   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;
@@ -390,6 +518,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);
@@ -424,6 +556,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") {
@@ -433,6 +566,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);
@@ -480,6 +617,35 @@ var TimeScaleBus = class {
     this.syncing = false;
     this.emit();
   }
+  /**
+   * DESIGN §10.4.1: after historical prepend, shift every pane's logical range by Δ
+   * so canonical `visibleFromMs` / `visibleToMs` (and crosshair time mapping) stay fixed.
+   */
+  compensatePrependLogicalRange(delta, referenceChart, sliceTimes) {
+    const d = Math.max(0, Math.floor(delta));
+    if (d === 0 || this.charts.length === 0) return;
+    const ref = referenceChart && this.charts.includes(referenceChart) ? referenceChart : this.charts[0];
+    const ts = ref.timeScale();
+    let current = typeof ts.getVisibleLogicalRange === "function" ? ts.getVisibleLogicalRange() : null;
+    if (!current && sliceTimes?.length && this.visibleToMs > this.visibleFromMs) {
+      current = logicalRangeForVisibleWindow(
+        sliceTimes,
+        this.visibleFromMs,
+        this.visibleToMs
+      );
+    }
+    if (!current) return;
+    const next = {
+      from: current.from + d,
+      to: current.to + d
+    };
+    this.syncing = true;
+    for (const chart of this.charts) {
+      chart.timeScale().setVisibleLogicalRange(next);
+    }
+    this.syncing = false;
+    this.emit();
+  }
   syncFrom(source, range) {
     this.syncing = true;
     for (const chart of this.charts) {
@@ -501,6 +667,78 @@ 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) {
@@ -581,6 +819,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);
 }
@@ -591,7 +836,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;
@@ -614,6 +870,9 @@ 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";
@@ -624,18 +883,57 @@ var PaneOrchestrator = class {
   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,
@@ -691,8 +989,8 @@ 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;
@@ -700,9 +998,16 @@ var PaneOrchestrator = class {
     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) {
@@ -736,7 +1041,9 @@ 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);
@@ -781,10 +1088,12 @@ var PaneOrchestrator = class {
       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();
@@ -796,6 +1105,81 @@ var PaneOrchestrator = class {
         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;
@@ -897,7 +1281,11 @@ 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);
       if (hasVisibleIndicatorPanes2(this.indicatorConfig)) {
@@ -914,13 +1302,35 @@ var PaneOrchestrator = class {
     }
     if (renderBars.length > 0) {
       this.syncChartSize();
-      if (!this.didInitialFit && !this.skipNextInitialFit) {
-        this.applyViewAfterDataReload(renderBars);
-        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) {
@@ -957,7 +1367,7 @@ 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,
@@ -972,7 +1382,7 @@ var PaneOrchestrator = class {
     if (!this.autoBarSpacingOnInterval) return;
     const iv = interval ?? this.currentInterval;
     const spacing = resolveBarSpacingForInterval(iv, this.barSpacingByInterval);
-    this.bus.setBarSpacing(spacing);
+    this.busRegistry.forEachBus((_, bus) => bus.setBarSpacing(spacing));
   }
   setBarSpacingPolicy(opts) {
     if (opts.autoBarSpacingOnInterval !== void 0) {
@@ -988,7 +1398,7 @@ var PaneOrchestrator = class {
       this.applyIntervalBarSpacing();
     } else {
       this.mainChart.timeScale().fitContent();
-      this.volumeChart.timeScale().fitContent();
+      if (this.isVolumeVisible()) this.volumeChart.timeScale().fitContent();
       this.indicators?.fitContent();
     }
     if (renderBars.length > 0) {
@@ -1001,14 +1411,31 @@ var PaneOrchestrator = class {
   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() {
     this.skipNextInitialFit = true;
     this.didInitialFit = true;
   }
+  /**
+   * DESIGN §10.4.1: after `mergeBars(..., prepend)` shift logical ranges on every sync bus
+   * so canonical ms viewport and crosshair `t` stay stable.
+   */
+  compensatePrependForBuses(sortedTimesBefore, sortedTimesAfter, interval) {
+    compensatePrependOnRegistry({
+      registry: this.busRegistry,
+      sortedTimesBefore,
+      sortedTimesAfter,
+      intervalMs: intervalMs2(interval),
+      referenceChart: this.mainChart
+    });
+  }
   getVisibleRange() {
     return this.bus.getVisibleRange();
   }
@@ -1030,10 +1457,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() {
@@ -1048,13 +1475,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) {
@@ -1063,7 +1490,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;
@@ -1088,6 +1526,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);
@@ -1105,8 +1547,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. */
@@ -1123,15 +1567,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);
@@ -1148,12 +1593,27 @@ export {
   IndicatorPaneStack,
   PaneOrchestrator,
   TimeScaleBus,
+  TimeScaleBusRegistry,
+  attachPaneResizer,
   bollOverlayLines,
+  buildSliceTimes,
+  compensatePrependOnBus,
+  compensatePrependOnRegistry,
+  computePrependSliceDeltaForViewport,
+  countPrependSliceDelta,
   defaultBarSpacingForInterval,
+  deriveRenderRange,
   detectIndicatorBarMutation,
   emaOverlayLine,
+  independentBusKey,
+  isLayeredPaneMount,
+  logicalIndexToBarTimeMs,
+  logicalRangeForVisibleWindow,
   maOverlayLine,
+  normalizeSyncGroupId,
   resolveBarSpacingForInterval,
+  resolveBusMapKey,
+  shouldResizeChartPane,
   volMaOverlayLine
 };
 //# sourceMappingURL=index.js.map