@forgecharts/sdk 1.1.23 → 1.1.27

package/src/react/canvas/ChartCanvas.tsx

@@ -0,0 +1,984 @@
+/**
+ * ChartCanvas — stacks the main price chart above one or more indicator panes.
+ *
+ * Features:
+ *  - Creates a TChart instance and attaches any `initialIndicators`.
+ *  - Each non-overlay indicator gets its own sub-pane (managed by TChart's PaneManager).
+ *  - Draggable dividers let the user resize panes; the price-split fraction is
+ *    reported via onPriceFractionChange (no localStorage in this package).
+ *  - A requestAnimationFrame loop forwards viewport changes (pan/zoom) to the
+ *    indicator canvases so they stay in sync with the main chart’s time axis.
+ *
+ * Previously exported as MultiPaneChart — that name is kept as an alias.
+ */
+
+import { useEffect, useRef, useState, useCallback, forwardRef, useImperativeHandle } from 'react';
+import { TChart, IndicatorDAG } from '../../';
+import type { TradingOverlayStore } from '../../';
+import type { CoordTransform, DrawingToolType, DAGResult, PointerToolType } from '../../';
+import type { OHLCV, PaneDescriptor, IndicatorConfig, IndicatorInstance, DrawingType, ChartLayout } from '@forgecharts/types';
+import type { IDatafeed, Timeframe, ChartTheme } from '@forgecharts/types';
+import type { TradingBridgeCallbacks } from '../trading/TradingBridge';
+import { IndicatorPane } from './IndicatorPane';
+import { LeftToolbar } from './toolbars/LeftToolbar';
+import type { VisibilityAction } from './toolbars/LeftToolbar';
+import { IndicatorLabel, IndicatorConfigDialog } from './IndicatorLabel';
+import { ChartContextMenu } from './ChartContextMenu';
+import { ChartSettingsDialog } from './ChartSettingsDialog';
+import { PointerOverlay } from './PointerOverlay';
+import type { CanvasSettings } from './ChartSettingsDialog';
+
+// ─── Defaults ──────────────────────────────────────────────────────────────────
+
+const OVERLAY_COLORS = ['#2196f3', '#4caf50', '#ff9800', '#e040fb', '#00bcd4', '#f44336'] as const;
+
+/** Candle duration in seconds per timeframe — mirrors Chart.ts _TF_SECONDS. */
+const _TF_SECONDS: Partial<Record<string, number>> = {
+  '1s': 1, '5s': 5, '10s': 10, '30s': 30,
+  '1m': 60, '3m': 180, '5m': 300, '15m': 900, '30m': 1800,
+  '1h': 3600, '2h': 7200, '4h': 14400, '6h': 21600, '12h': 43200,
+  '1d': 86400, '3d': 259200, '1w': 604800, '1M': 2592000,
+};
+
+/**
+ * Returns true if a hex background color is perceptually light (luminance > 0.5).
+ * Used to derive a contrasting axis/text color automatically.
+ */
+function _isLightBg(hex: string): boolean {
+  const c = hex.replace('#', '');
+  if (c.length < 6) return false;
+  const r = parseInt(c.slice(0, 2), 16) / 255;
+  const g = parseInt(c.slice(2, 4), 16) / 255;
+  const b = parseInt(c.slice(4, 6), 16) / 255;
+  // sRGB luminance (WCAG formula)
+  const toLinear = (v: number) => v <= 0.03928 ? v / 12.92 : Math.pow((v + 0.055) / 1.055, 2.4);
+  const L = 0.2126 * toLinear(r) + 0.7152 * toLinear(g) + 0.0722 * toLinear(b);
+  return L > 0.179;
+}
+
+// ─── Divider ──────────────────────────────────────────────────────────────────
+
+type DividerProps = { onDrag: (dy: number) => void };
+
+function Divider({ onDrag }: DividerProps) {
+  const lastY = useRef(0);
+
+  const handleMouseDown = useCallback(
+    (e: React.MouseEvent) => {
+      e.preventDefault();
+      lastY.current = e.clientY;
+
+      const onMove = (me: MouseEvent) => {
+        onDrag(me.clientY - lastY.current);
+        lastY.current = me.clientY;
+      };
+      const onUp = () => {
+        window.removeEventListener('mousemove', onMove);
+        window.removeEventListener('mouseup', onUp);
+      };
+      window.addEventListener('mousemove', onMove);
+      window.addEventListener('mouseup', onUp);
+    },
+    [onDrag],
+  );
+
+  return (
+    <div
+      onMouseDown={handleMouseDown}
+      style={{
+        height: 4,
+        cursor: 'ns-resize',
+        background: 'var(--border, #2a2e39)',
+        flexShrink: 0,
+        userSelect: 'none',
+      }}
+    />
+  );
+}
+
+// ─── Price helpers ───────────────────────────────────────────────────────────
+
+function _fmtPrice(v: number): string {
+  const abs = Math.abs(v);
+  const dec = abs >= 100 ? 2 : abs >= 1 ? 2 : abs >= 0.0001 ? 4 : 6;
+  return v.toLocaleString('en-US', { minimumFractionDigits: dec, maximumFractionDigits: dec });
+}
+
+function _fmtVol(v: number): string {
+  if (v >= 1_000_000) return `${(v / 1_000_000).toFixed(2)}M`;
+  if (v >= 1_000) return `${(v / 1_000).toFixed(1)}K`;
+  return v.toFixed(0);
+}
+
+// ─── PricePaneHeader ──────────────────────────────────────────────────────────
+
+function PricePaneHeader({
+  symbol,
+  timeframe,
+  bars,
+  theme,
+  indicators,
+  overlayColors,
+  onRemove,
+  onConfigure,
+  getExchangeLogoUrl,
+}: {
+  symbol: string;
+  timeframe: string;
+  bars: readonly OHLCV[];
+  theme: import('@forgecharts/types').ChartTheme;
+  indicators: readonly IndicatorInstance[];
+  overlayColors: readonly string[];
+  onRemove: (id: string) => void;
+  onConfigure: (ind: IndicatorInstance) => void;
+  getExchangeLogoUrl?: (exchange: string) => string | null | undefined;
+}) {
+  const [collapsed, setCollapsed] = useState(false);
+  const lastBar = bars[bars.length - 1];
+  const prevBar = bars[bars.length - 2];
+  const change = lastBar && prevBar ? lastBar.close - prevBar.close : 0;
+  const pctChange = prevBar && prevBar.close !== 0 ? (change / prevBar.close) * 100 : 0;
+  const isUp = change >= 0;
+  const changeColor = isUp ? 'var(--up, #26a641)' : 'var(--down, #f85149)';
+  const muted = theme === 'dark' ? 'rgba(255,255,255,0.42)' : 'rgba(0,0,0,0.38)';
+  const textColor = theme === 'dark' ? 'rgba(255,255,255,0.82)' : 'rgba(0,0,0,0.82)';
+  const overlayInds = indicators.filter((ind) => ind.config.overlay === true);
+
+  return (
+    <div
+      style={{
+        position: 'absolute',
+        top: 6,
+        left: 6,
+        zIndex: 3,
+        pointerEvents: 'auto',
+        maxWidth: 'calc(100% - 80px)',
+        fontFamily: '-apple-system, BlinkMacSystemFont, sans-serif',
+        userSelect: 'none',
+      }}
+    >
+      {/* ── Symbol + OHLCV row ─────────────────────────────────────────── */}
+      <div style={{ display: 'flex', alignItems: 'baseline', flexWrap: 'wrap', gap: '0 5px', fontSize: 11.5, lineHeight: 1.7 }}>
+        {(() => {
+          const exchange = symbol.includes(':') ? symbol.split(':')[0]!.toUpperCase() : '';
+          if (!exchange) return null;
+          const logoUrl = getExchangeLogoUrl?.(exchange);
+          if (!logoUrl) return null;
+          return (
+            <img
+              src={logoUrl}
+              alt={exchange}
+              width={14}
+              height={14}
+              style={{ display: 'inline-block', verticalAlign: 'middle', marginBottom: 1, borderRadius: 2, flexShrink: 0 }}
+              onError={(e) => { (e.currentTarget as HTMLImageElement).style.display = 'none'; }}
+            />
+          );
+        })()}
+        <span style={{ fontWeight: 700, color: textColor }}>{symbol}</span>
+        <span style={{ color: muted }}>· {timeframe}</span>
+        {lastBar && (
+          <>
+            <span>
+              <span style={{ color: muted }}>O</span>
+              <span style={{ color: muted }}> </span>
+              <span style={{ color: textColor }}>{_fmtPrice(lastBar.open)}</span>
+            </span>
+            <span>
+              <span style={{ color: '#26a641', fontWeight: 500 }}>H</span>
+              <span style={{ color: muted }}> </span>
+              <span style={{ color: textColor }}>{_fmtPrice(lastBar.high)}</span>
+            </span>
+            <span>
+              <span style={{ color: '#f85149', fontWeight: 500 }}>L</span>
+              <span style={{ color: muted }}> </span>
+              <span style={{ color: textColor }}>{_fmtPrice(lastBar.low)}</span>
+            </span>
+            <span>
+              <span style={{ color: muted }}>C</span>
+              <span style={{ color: muted }}> </span>
+              <span style={{ color: textColor }}>{_fmtPrice(lastBar.close)}</span>
+            </span>
+            <span style={{ color: changeColor }}>
+              {isUp ? '+' : ''}{_fmtPrice(change)} ({isUp ? '+' : ''}{pctChange.toFixed(2)}%)
+            </span>
+          </>
+        )}
+      </div>
+
+      {/* ── Overlay indicators ─────────────────────────────────────────── */}
+      {overlayInds.length > 0 && (
+        <>
+          {!collapsed && (
+            <div style={{ display: 'flex', flexDirection: 'column', gap: 1, marginTop: 2 }}>
+              {overlayInds.map((ind, i) => (
+                <IndicatorLabel
+                  key={ind.id}
+                  indicator={ind}
+                  color={ind.config.color ?? overlayColors[i % overlayColors.length] ?? '#2196f3'}
+                  onRemove={() => onRemove(ind.id)}
+                  onConfigure={() => onConfigure(ind)}
+                />
+              ))}
+            </div>
+          )}
+          <button
+            onClick={() => setCollapsed((c) => !c)}
+            title={collapsed ? 'Show indicators' : 'Hide indicators'}
+            style={{
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+              marginTop: 3,
+              width: 20,
+              height: 14,
+              background: 'rgba(100,100,100,0.25)',
+              border: 'none',
+              borderRadius: 3,
+              color: muted,
+              fontSize: 9,
+              cursor: 'pointer',
+              padding: 0,
+              lineHeight: 1,
+            }}
+          >
+            {collapsed ? '▾' : '▴'}
+          </button>
+        </>
+      )}
+    </div>
+  );
+}
+
+// ─── ChartCanvas ──────────────────────────────────────────────────────────────────────
+
+export type ChartCanvasHandle = {
+  /** Returns the full current chart state (indicators, drawings, viewport). */
+  getLayoutSnapshot: () => ChartLayout | null;
+  /** Replaces the chart state with the supplied layout snapshot. */
+  loadLayoutSnapshot: (layout: ChartLayout) => void;
+  /** Adds an indicator to the live chart and returns its id. */
+  addIndicator: (config: IndicatorConfig) => string | null;
+  /** Captures the visible chart area as a PNG data-URL. */
+  captureScreenshot: () => Promise<string | null>;
+  /**
+   * Returns the chart's internal TradingOverlayStore for Unmanaged mode.
+   * Use this to push confirmed order / position state into the chart.
+   * Returns null before the chart has mounted.
+   */
+  getOverlayStore: () => TradingOverlayStore | null;
+};
+
+export type ChartCanvasProps = {
+  symbol: string;
+  timeframe: string;
+  datafeed?: IDatafeed;
+  theme?: ChartTheme;
+  /** IANA timezone for axis labels (e.g. "America/New_York"). */
+  timezone?: string | undefined;
+  /** Indicators to add on mount. Non-overlay indicators each get a sub-pane. */
+  initialIndicators?: IndicatorConfig[];
+  /**
+   * When provided the chart restores this snapshot on mount instead of
+   * reading from localStorage. Pass a snapshot captured via getLayoutSnapshot()
+   * or a ChartLayout loaded from the server.
+   */
+  layoutToRestore?: ChartLayout | undefined;
+  /** Called whenever an indicator is added or removed, so the parent can trigger a workspace save. */
+  onIndicatorsChanged?: () => void;
+  /**
+   * Initial price-pane fraction (0.3–0.85). Defaults to 0.6.
+   * The parent controls persistence; changes are reported via onPriceFractionChange.
+   */
+  priceFraction?: number;
+  /** Called when the user drags the price/sub-pane divider. */
+  onPriceFractionChange?: (fraction: number) => void;
+  /**
+   * Optional callback to resolve an exchange logo URL.
+   * Receives the exchange code (e.g. "BINANCE") and returns a URL string,
+   * or undefined/null to suppress the logo image entirely.
+   * If omitted, no exchange logo is rendered.
+   */
+  getExchangeLogoUrl?: (exchange: string) => string | null | undefined;
+  /**
+   * Optional trading bridge callbacks for Unmanaged mode.
+   *
+   * When provided the chart will invoke these callbacks when the user performs
+   * a trading action (drag-to-place, cancel, bracket adjust, etc.).
+   * The chart never self-confirms — the host must push confirmed state back
+   * through `TradingOverlayStore` (via `upsertOrder` / `setOrders` etc.).
+   *
+   * Wrap with `createTradingBridgeLogger` during development for structured
+   * console output of every emitted intent.
+   */
+  tradingBridge?: TradingBridgeCallbacks;
+};
+
+/** @deprecated Use ChartCanvasProps */
+export type MultiPaneChartProps = ChartCanvasProps;
+/** @deprecated Use ChartCanvasHandle */
+export type MultiPaneChartHandle = ChartCanvasHandle;
+
+export const ChartCanvas = forwardRef<ChartCanvasHandle, ChartCanvasProps>(
+function ChartCanvas({
+  symbol,
+  timeframe,
+  datafeed,
+  theme = 'dark',
+  timezone = 'UTC',
+  initialIndicators = [],
+  layoutToRestore,
+  onIndicatorsChanged,
+  priceFraction: priceFractionProp,
+  onPriceFractionChange,
+  getExchangeLogoUrl,
+  tradingBridge,
+}: ChartCanvasProps, ref) {
+  const outerRef = useRef<HTMLDivElement>(null);
+  const priceRef = useRef<HTMLDivElement>(null);
+  const overlayCanvasRef = useRef<HTMLCanvasElement>(null);
+  /** Crosshair X pixel (relative to chart column) — updated via mousemove, no re-render needed. */
+  const crosshairXRef = useRef<number | null>(null);
+  const chartRef = useRef<TChart | null>(null);
+  const transformRef = useRef<CoordTransform | null>(null);
+
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const [bars, setBars] = useState<readonly OHLCV[]>([]);
+  const [panes, setPanes] = useState<readonly PaneDescriptor[]>([]);
+  const [indicators, setIndicators] = useState<readonly IndicatorInstance[]>([]);
+  const [totalHeight, setTotalHeight] = useState(600);
+  const [activeTool, setActiveTool] = useState<DrawingToolType>('cursor');
+  const [ctxMenu, setCtxMenu] = useState<{ x: number; y: number; drawingId: string } | null>(null);
+  const [chartCtxMenu, setChartCtxMenu] = useState<{ x: number; y: number } | null>(null);
+  const [settingsOpen, setSettingsOpen] = useState(false);
+  const [canvasSettings, setCanvasSettings] = useState<CanvasSettings>({
+    background: '#000000',
+    gridColor: '#2a2a2a',
+    gridVisible: true,
+  });
+  const [configTarget, setConfigTarget] = useState<IndicatorInstance | null>(null);
+  // Flag to suppress chart context menu when a drawing context menu was triggered
+  const drawingCtxJustFired = useRef(false);
+
+  const dagRef = useRef<IndicatorDAG | null>(null);
+  const [computedResults, setComputedResults] = useState<ReadonlyMap<string, DAGResult>>(
+    () => new Map(),
+  );
+  // Stable ref to the overlay draw function — rebuilt whenever data changes,
+  // called directly from the RAF loop to stay in the same frame as candles.
+  const drawOverlayRef = useRef<(() => void) | null>(null);
+
+  const [priceFraction, setPriceFraction] = useState<number>(priceFractionProp ?? 0.6);
+
+  // ── Imperative handle (tab snapshot save/load) ─────────────────────────────
+  useImperativeHandle(ref, () => ({
+    getLayoutSnapshot: () => chartRef.current?.saveLayout() ?? null,
+    loadLayoutSnapshot: (layout: ChartLayout) => {
+      chartRef.current?.loadLayout(layout);
+    },
+    addIndicator: (config: IndicatorConfig) => chartRef.current?.addIndicator(config) ?? null,
+    getOverlayStore: () => chartRef.current?.getTradingOverlayStore() ?? null,
+    captureScreenshot: async (): Promise<string | null> => {
+      const container = outerRef.current;
+      if (!container) return null;
+      const containerRect = container.getBoundingClientRect();
+      const { width, height } = containerRect;
+      if (width === 0 || height === 0) return null;
+      const dpr = window.devicePixelRatio || 1;
+      const composite = document.createElement('canvas');
+      composite.width = Math.round(width * dpr);
+      composite.height = Math.round(height * dpr);
+      const ctx = composite.getContext('2d');
+      if (!ctx) return null;
+      // Fill background colour from CSS variable
+      const bgColor = getComputedStyle(document.documentElement)
+        .getPropertyValue('--bg').trim() || '#000000';
+      ctx.fillStyle = bgColor;
+      ctx.fillRect(0, 0, composite.width, composite.height);
+      // Composite every canvas element inside the chart container
+      const canvases = container.querySelectorAll<HTMLCanvasElement>('canvas');
+      for (const canvas of canvases) {
+        const rect = canvas.getBoundingClientRect();
+        const x = Math.round((rect.left - containerRect.left) * dpr);
+        const y = Math.round((rect.top - containerRect.top) * dpr);
+        const w = Math.round(rect.width * dpr);
+        const h = Math.round(rect.height * dpr);
+        try { ctx.drawImage(canvas, x, y, w, h); } catch { /* tainted canvas — skip */ }
+      }
+      return composite.toDataURL('image/png');
+    },
+  }));
+
+  // ── Mount: create TChart ────────────────────────────────────────────────────
+  useEffect(() => {
+    const container = priceRef.current;
+    if (!container) return;
+
+    const chart = new TChart({
+      container,
+      symbol,
+      interval: timeframe as import('@forgecharts/types').Timeframe,
+      theme,
+      ...(datafeed !== undefined ? { datafeed } : {}),
+    });
+
+    // Add initial indicators — non-overlay ones get sub-panes created automatically
+    for (const config of initialIndicators) {
+      chart.addIndicator(config);
+    }
+
+    transformRef.current = chart.getTransform();
+
+    const syncChartState = () => {
+      setBars(chart.getBars());
+      setPanes(chart.getPanes());
+      setIndicators(chart.getIndicators());
+    };
+
+    chart.on('dataLoading', () => {
+      setLoading(true);
+      setError(null);
+    });
+    chart.on('dataLoaded', ({ interval: loadedInterval }: { symbol: string; interval: string; count: number }) => {
+      setLoading(false);
+      syncChartState();
+      // Only restore a saved viewport when it is genuinely valid for the current
+      // timeframe. Two guards prevent stale data from locking the view:
+      //  1. interval must match — compares the *loaded* interval (from event payload,
+      //     not a stale closure) against the saved layout's interval. This correctly
+      //     handles the case where the user switches timeframes after mount.
+      //  2. span must be ≥ 50 candles — avoids restoring zoomed-in states.
+      // In all other cases fall back to fitDefaultView() so the user always sees
+      // a sensible ~150-candle window on first load or after a timeframe switch.
+      const tfSec = _TF_SECONDS[loadedInterval] ?? 3600;
+      const savedSpan = layoutToRestore?.viewport
+        ? (layoutToRestore.viewport.timeRange.to - layoutToRestore.viewport.timeRange.from)
+        : 0;
+      const hasValidViewport =
+        !!layoutToRestore?.viewport &&
+        layoutToRestore.interval === loadedInterval &&
+        savedSpan >= tfSec * 50; // require at least 50 candles visible — avoids restoring zoomed-in states
+      if (hasValidViewport) {
+        chart.restoreViewport(layoutToRestore!.viewport!);
+        chart.resetPriceScale();
+      } else {
+        chart.fitDefaultView();
+      }
+    });
+    chart.on('dataError', ({ error: msg }: { error: string }) => {
+      setLoading(false);
+      setError(msg);
+    });
+    chart.on('barsUpdated', syncChartState);
+    chart.on('indicatorAdded', () => { syncChartState(); onIndicatorsChanged?.(); });
+    chart.on('indicatorRemoved', () => { syncChartState(); onIndicatorsChanged?.(); });
+
+    // Auto-revert to cursor after each drawing placement.
+    chart.on('drawingCreated', () => {
+      setActiveTool('cursor');
+      chart.setCrosshairEnabled(false); // back to arrow — no crosshair
+    });
+
+    // Show context menu when user right-clicks a drawing.
+    chart.on('drawingContextMenu', ({ id, x, y }: { id: string; x: number; y: number }) => {
+      const canvas = priceRef.current;
+      if (!canvas) return;
+      const rect = canvas.getBoundingClientRect();
+      drawingCtxJustFired.current = true;
+      setTimeout(() => { drawingCtxJustFired.current = false; }, 0);
+      setCtxMenu({ drawingId: id, x: rect.left + x, y: rect.top + y });
+    });
+
+    // Restore layout from the explicit snapshot when provided.
+    // Without a snapshot the chart starts empty (no localStorage fallback —
+    // persistence is handled by DB auto-save in App.tsx).
+    if (layoutToRestore) {
+      try {
+        chart.loadLayout(layoutToRestore);
+      } catch { /* invalid snapshot — ignore */ }
+    }
+
+    chartRef.current = chart;
+    syncChartState(); // read panes added synchronously for initialIndicators
+
+    return () => {
+      chart.destroy();
+      chartRef.current = null;
+      transformRef.current = null;
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  // ── Symbol / timeframe propagation ──────────────────────────────────────────
+  useEffect(() => { chartRef.current?.setSymbol(symbol); }, [symbol]);
+  useEffect(() => { chartRef.current?.setInterval(timeframe as import('@forgecharts/types').Timeframe); }, [timeframe]);
+  useEffect(() => { chartRef.current?.setTimezone(timezone); }, [timezone]);
+  useEffect(() => { chartRef.current?.setTheme(theme); }, [theme]);
+  // ── DAG: recompute indicators when bars or indicator list changes ────────────
+  useEffect(() => {
+    if (!dagRef.current) dagRef.current = new IndicatorDAG();
+    const dag = dagRef.current;
+    dag.sync(indicators);
+    let changed = false;
+    try {
+      changed = dag.execute(bars);
+    } catch (e) {
+      console.error('[ForgeCharts] Indicator computation error:', e);
+    }
+    if (changed) setComputedResults(new Map(dag.getAllResults() as Map<string, DAGResult>));
+  }, [bars, indicators]);
+
+  // ── Overlay indicators: draw script/ema/etc lines on the price pane canvas ──
+  // The draw function is stored in a ref so the RAF loop can call it directly
+  // every frame — bypassing the React state update cycle and keeping the
+  // indicator overlay pixel-perfect in sync with the candle layer.
+  useEffect(() => {
+    drawOverlayRef.current = () => {
+      const canvas = overlayCanvasRef.current;
+      const transform = transformRef.current;
+      if (!canvas || !transform) return;
+
+      const curPriceH = panes.length > 0 ? totalHeight * priceFraction : totalHeight;
+      const dpr    = window.devicePixelRatio ?? 1;
+      const cssW   = canvas.offsetWidth || (canvas.parentElement?.clientWidth ?? 800);
+      const physW  = Math.round(cssW     * dpr);
+      const physH  = Math.round(curPriceH * dpr);
+
+      if (canvas.width !== physW || canvas.height !== physH) {
+        canvas.width  = physW;
+        canvas.height = physH;
+      }
+
+      const ctx = canvas.getContext('2d');
+      if (!ctx) return;
+
+      ctx.clearRect(0, 0, physW, physH);
+
+      const overlayInds = indicators.filter((ind) => ind.config.overlay === true);
+      if (overlayInds.length === 0) return;
+
+      ctx.save();
+      ctx.scale(dpr, dpr);
+
+      const plotW = transform.plotWidth;
+      let colorIdx = 0;
+
+      for (const ind of overlayInds) {
+        const result = computedResults.get(ind.id);
+        if (!result || result.kind !== 'series' || result.points.length === 0) continue;
+
+        const color = ind.config.color ?? OVERLAY_COLORS[colorIdx++ % OVERLAY_COLORS.length]!;
+        ctx.strokeStyle = color;
+        ctx.lineWidth   = 1.5;
+        ctx.beginPath();
+        let started = false;
+        for (const p of result.points) {
+          const x = transform.timeToX(p.time);
+          if (x < -20 || x > plotW + 20) { started = false; continue; }
+          const y = transform.priceToY(p.value);
+          if (!started) { ctx.moveTo(x, y); started = true; }
+          else            { ctx.lineTo(x, y); }
+        }
+        ctx.stroke();
+      }
+
+      ctx.restore();
+    };
+    // Trigger an immediate repaint whenever the data (bars, indicator config,
+    // canvas size) changes — viewport-only changes are handled by the RAF loop.
+    drawOverlayRef.current();
+  }, [computedResults, totalHeight, priceFraction, panes, indicators]);
+  // ── ResizeObserver for total container height ──────────────────────────────
+  useEffect(() => {
+    const el = outerRef.current;
+    if (!el) return;
+    const ro = new ResizeObserver(([entry]) => {
+      if (entry) setTotalHeight(entry.contentRect.height);
+    });
+    ro.observe(el);
+    return () => ro.disconnect();
+  }, []);
+
+  // ── RAF loop: keep indicator overlay in sync with the candle layer ──────────
+  // Calls the draw function directly every animation frame — no React state
+  // update roundtrip — so indicators move in the exact same frame as candles.
+  useEffect(() => {
+    let rafId: number;
+    const tick = () => {
+      drawOverlayRef.current?.();
+      rafId = requestAnimationFrame(tick);
+    };
+    rafId = requestAnimationFrame(tick);
+    return () => cancelAnimationFrame(rafId);
+  }, []);
+
+  // ── Chart-level right-click (canvas background, not a drawing) ────────────
+  const handleCanvasContextMenu = useCallback((e: React.MouseEvent) => {
+    e.preventDefault();
+    if (drawingCtxJustFired.current) return;
+    setChartCtxMenu({ x: e.clientX, y: e.clientY });
+  }, []);
+
+  const handleClearDrawings = useCallback(() => {
+    chartRef.current?.clearDrawings();
+  }, []);
+
+  const [drawingsHidden, setDrawingsHidden] = useState(false);
+  const [indicatorsHidden, setIndicatorsHidden] = useState(false);
+
+  const handleVisibilityAction = useCallback((action: VisibilityAction) => {
+    const chart = chartRef.current;
+    if (!chart) return;
+    if (action === 'hideDrawings') {
+      const next = !drawingsHidden;
+      setDrawingsHidden(next);
+      chart.setAllDrawingsVisible(!next);
+    } else if (action === 'hideIndicators') {
+      const next = !indicatorsHidden;
+      setIndicatorsHidden(next);
+      chart.setIndicatorsVisible(!next);
+    } else if (action === 'hideAll') {
+      const nextD = !drawingsHidden;
+      const nextI = !indicatorsHidden;
+      setDrawingsHidden(nextD);
+      setIndicatorsHidden(nextI);
+      chart.setAllDrawingsVisible(!nextD);
+      chart.setIndicatorsVisible(!nextI);
+    }
+    // hidePositions: positions system not yet implemented
+  }, [drawingsHidden, indicatorsHidden]);
+
+  const visibilityActiveAction: VisibilityAction | null =
+    drawingsHidden && indicatorsHidden ? 'hideAll' :
+    drawingsHidden ? 'hideDrawings' :
+    indicatorsHidden ? 'hideIndicators' :
+    null;
+
+  const handleVisibilityDeactivate = useCallback(() => {
+    const chart = chartRef.current;
+    if (!chart) return;
+    setDrawingsHidden(false);
+    setIndicatorsHidden(false);
+    chart.setAllDrawingsVisible(true);
+    chart.setIndicatorsVisible(true);
+  }, []);
+
+  const handleClearIndicators = useCallback(() => {
+    const chart = chartRef.current;
+    if (!chart) return;
+    for (const ind of chart.getIndicators()) {
+      chart.removeIndicator(ind.id);
+    }
+  }, []);
+
+  const handleResetView = useCallback(() => {
+    chartRef.current?.scrollToEnd();
+  }, []);
+
+  const handleApplySettings = useCallback((settings: CanvasSettings) => {
+    setCanvasSettings(settings);
+    const light = _isLightBg(settings.background);
+    chartRef.current?.applyOptions({
+      colors: {
+        background: settings.background,
+        backgroundSecondary: light ? '#f5f5f5' : '#0a0a0a',
+        text: light ? '#000000' : '#ffffff',
+        textMuted: light ? '#666666' : '#888888',
+        crosshair: light ? '#000000' : '#ffffff',
+        border: light ? '#cccccc' : '#333333',
+        ...(settings.gridVisible
+          ? { grid: settings.gridColor }
+          : { grid: 'transparent' }),
+      },
+    });
+  }, []);
+
+  // ── Indicator remove / configure ──────────────────────────────────────────
+  const handleRemoveIndicator = useCallback((id: string) => {
+    chartRef.current?.removeIndicator(id);
+  }, []);
+
+  const handleConfigureIndicator = useCallback((indicator: IndicatorInstance) => {
+    setConfigTarget(indicator);
+  }, []);
+
+  const handleSaveConfig = useCallback(
+    (newConfig: IndicatorConfig) => {
+      const chart = chartRef.current;
+      if (!chart || !configTarget) return;
+      chart.removeIndicator(configTarget.id);
+      chart.addIndicator(newConfig);
+      setConfigTarget(null);
+    },
+    [configTarget],
+  );
+
+  // ── Drawing tool selection ─────────────────────────────────────────────────
+  const POINTER_TOOLS: PointerToolType[] = ['cursor', 'crosshair', 'dot', 'demonstration'];
+
+  const handleToolSelect = useCallback((tool: DrawingToolType) => {
+    setActiveTool(tool);
+    const chart = chartRef.current;
+    if (!chart) return;
+
+    const isPointerTool = (POINTER_TOOLS as string[]).includes(tool);
+    if (isPointerTool) {
+      chart.cancelDrawingTool();
+      // Only the crosshair tool uses the SDK crosshair lines.
+      // dot/demonstration use PointerOverlay for their own visuals.
+      chart.setCrosshairEnabled(tool === 'crosshair');
+      // Hide the native OS cursor for any tool that provides its own visual.
+      chart.setNativeCursorHidden(tool !== 'cursor');
+    } else {
+      chart.setCrosshairEnabled(false); // drawing tool uses its own cursor
+      chart.startDrawingTool(tool as DrawingType);
+    }
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  // ── Divider drag: price | sub-pane area split ──────────────────────────────
+  const handlePriceDividerDrag = useCallback(
+    (dy: number) => {
+      if (totalHeight === 0) return;
+      setPriceFraction((prev) => {
+        const next = Math.min(0.85, Math.max(0.3, prev + dy / totalHeight));
+        onPriceFractionChange?.(next);
+        return next;
+      });
+    },
+    [totalHeight],
+  );
+
+  // ── Divider drag: between two sub-panes ──────────────────────────────────
+  const handleSubPaneDividerDrag = useCallback(
+    (paneId: string, dy: number) => {
+      const chart = chartRef.current;
+      if (!chart || totalHeight === 0) return;
+      const subH = totalHeight * (1 - priceFraction);
+      if (subH === 0) return;
+      const currentPanes = chart.getPanes();
+      const pane = currentPanes.find((p: PaneDescriptor) => p.id === paneId);
+      if (!pane) return;
+      const newFraction = Math.min(0.9, Math.max(0.05, pane.heightFraction + dy / subH));
+      chart.resizePane(paneId, newFraction);
+      setPanes([...chart.getPanes()]);
+    },
+    [totalHeight, priceFraction],
+  );
+
+  // ── Derived layout dims ────────────────────────────────────────────────────
+  const hasSubPanes = panes.length > 0;
+  const priceH = hasSubPanes ? totalHeight * priceFraction : totalHeight;
+  const subH = totalHeight * (1 - priceFraction);
+
+  return (
+    <div
+      ref={outerRef}
+      style={{
+        position: 'relative',
+        width: '100%',
+        height: '100%',
+        display: 'flex',
+        gap: 8,
+        overflow: 'hidden',
+      }}
+    >
+      {/* ── Drawing toolbar: full-height left column ─────────────────────── */}
+      <LeftToolbar
+        activeTool={activeTool}
+        onSelectTool={handleToolSelect}
+        onVisibilityAction={handleVisibilityAction}
+        visibilityActiveAction={visibilityActiveAction}
+        onVisibilityDeactivate={handleVisibilityDeactivate}
+        onDeleteClick={() => chartRef.current?.deleteSelectedDrawing()}
+      />
+
+      {/* ── Chart content: price pane + sub-panes ─────────────────────────── */}
+      <div
+        className={activeTool === 'crosshair' ? 'chart-crosshair-mode' : undefined}
+        style={{
+          flex: 1,
+          display: 'flex',
+          flexDirection: 'column',
+          overflow: 'hidden',
+          position: 'relative',
+          minWidth: 0,
+          cursor:
+            activeTool === 'crosshair' ? 'none' :
+            activeTool === 'dot' || activeTool === 'demonstration' ? 'none' :
+            activeTool === 'cursor' ? 'default' :
+            'crosshair', // drawing tools
+        }}
+        onMouseMove={(e) => {
+          const rect = (e.currentTarget as HTMLElement).getBoundingClientRect();
+          crosshairXRef.current = e.clientX - rect.left;
+        }}
+        onMouseLeave={() => { crosshairXRef.current = null; }}
+      >
+        {/* ── Price pane ──────────────────────────────────────────────────── */}
+        <div
+          style={{ position: 'relative', height: `${priceH}px`, flexShrink: 0 }}
+          onContextMenu={handleCanvasContextMenu}
+        >
+          <div ref={priceRef} style={{ width: '100%', height: '100%' }} />
+          {/* Overlay canvas: script/indicator lines drawn on the price pane */}
+          <canvas
+            ref={overlayCanvasRef}
+            style={{
+              position: 'absolute', top: 0, left: 0,
+              width: '100%', height: '100%',
+              pointerEvents: 'none', zIndex: 2,
+            }}
+          />          {/* Pointer tool overlay: dot & demonstration visuals */}
+          {(activeTool === 'dot' || activeTool === 'demonstration') && (
+            <PointerOverlay
+              mode={activeTool}
+              width={priceRef.current?.clientWidth ?? 0}
+              height={priceH}
+            />
+          )}          {/* Price pane header: OHLCV + overlay indicator legend */}
+          <PricePaneHeader
+            symbol={symbol}
+            timeframe={timeframe}
+            bars={bars}
+            theme={theme}
+            indicators={indicators}
+            overlayColors={OVERLAY_COLORS}
+            onRemove={handleRemoveIndicator}
+            onConfigure={handleConfigureIndicator}
+            {...(getExchangeLogoUrl ? { getExchangeLogoUrl } : {})}
+          />
+        </div>
+
+      {/* ── Loading / error overlays ───────────────────────────────────────── */}
+      {loading && (
+        <div
+          style={{
+            position: 'absolute',
+            top: priceH / 2 - 12,
+            left: '50%',
+            transform: 'translateX(-50%)',
+            color: 'var(--text-muted, #787b86)',
+            fontSize: 13,
+            pointerEvents: 'none',
+            zIndex: 10,
+          }}
+        >
+          Loading…
+        </div>
+      )}
+      {error && (
+        <div
+          style={{
+            position: 'absolute',
+            top: priceH / 2 - 12,
+            left: '50%',
+            transform: 'translateX(-50%)',
+            color: '#ef5350',
+            fontSize: 13,
+            pointerEvents: 'none',
+            zIndex: 10,
+          }}
+        >
+          {error}
+        </div>
+      )}
+
+      {/* ── Indicator sub-panes ─────────────────────────────────────────────── */}
+      {hasSubPanes && (
+        <>
+          <Divider onDrag={handlePriceDividerDrag} />
+          {panes.map((pane, idx) => {
+            const paneH = Math.max(60, Math.round(subH * pane.heightFraction));
+            const paneIndicators = indicators.filter((ind) =>
+              pane.indicatorIds.includes(ind.id),
+            );
+            return (
+              <div
+                key={pane.id}
+                style={{ display: 'flex', flexDirection: 'column' }}
+              >
+                <IndicatorPane
+                  indicators={paneIndicators}
+                  bars={bars}
+                  transform={transformRef.current}
+                  height={paneH}
+                  theme={theme}
+                  computedResults={computedResults}
+                  crosshairXRef={crosshairXRef}
+                  onRemove={handleRemoveIndicator}
+                  onConfigure={handleConfigureIndicator}
+                />
+                {idx < panes.length - 1 && (
+                  <Divider onDrag={(dy) => handleSubPaneDividerDrag(pane.id, dy)} />
+                )}
+              </div>
+            );
+          })}
+        </>
+      )}
+      </div>
+
+      {/* ── Indicator config dialog ────────────────────────────────────────── */}
+      {configTarget && (
+        <IndicatorConfigDialog
+          indicator={configTarget}
+          onSave={handleSaveConfig}
+          onClose={() => setConfigTarget(null)}
+        />
+      )}
+
+      {/* ── Drawing context menu ──────────────────────────────────────────── */}
+      {ctxMenu && (
+        <>
+          {/* Transparent backdrop to dismiss the menu on outside click */}
+          <div
+            className="drawing-ctx-backdrop"
+            onClick={() => setCtxMenu(null)}
+            onContextMenu={(e) => { e.preventDefault(); setCtxMenu(null); }}
+          />
+          <div
+            className="drawing-ctx-menu"
+            style={{ left: ctxMenu.x, top: ctxMenu.y }}
+          >
+            <button
+              className="drawing-ctx-item"
+              onClick={() => {
+                chartRef.current?.removeDrawing(ctxMenu.drawingId);
+                setCtxMenu(null);
+              }}
+            >
+              Remove
+            </button>
+          </div>
+        </>
+      )}
+
+      {/* ── Chart canvas context menu ─────────────────────────────────────── */}
+      {chartCtxMenu && (
+        <ChartContextMenu
+          x={chartCtxMenu.x}
+          y={chartCtxMenu.y}
+          onClose={() => setChartCtxMenu(null)}
+          onSettings={() => setSettingsOpen(true)}
+          onClearDrawings={handleClearDrawings}
+          onClearIndicators={handleClearIndicators}
+          onResetView={handleResetView}
+        />
+      )}
+
+      {/* ── Chart settings dialog ─────────────────────────────────────────── */}
+      {settingsOpen && (
+        <ChartSettingsDialog
+          initialSettings={canvasSettings}
+          onApply={handleApplySettings}
+          onClose={() => setSettingsOpen(false)}
+        />
+      )}
+    </div>
+  );
+});
+
+/** @deprecated Use ChartCanvas */
+export const MultiPaneChart = ChartCanvas;