@forgecharts/sdk 1.1.28 → 1.1.30

package/dist/react/canvas/ChartCanvas.js

@@ -1,604 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-/**
- * 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 { IndicatorPane } from './IndicatorPane';
-import { LeftToolbar } from './toolbars/LeftToolbar';
-import { IndicatorLabel, IndicatorConfigDialog } from './IndicatorLabel';
-import { ChartContextMenu } from './ChartContextMenu';
-import { ChartSettingsDialog } from './ChartSettingsDialog';
-import { PointerOverlay } from './PointerOverlay';
-// ─── Defaults ──────────────────────────────────────────────────────────────────
-const OVERLAY_COLORS = ['#2196f3', '#4caf50', '#ff9800', '#e040fb', '#00bcd4', '#f44336'];
-/** Candle duration in seconds per timeframe — mirrors Chart.ts _TF_SECONDS. */
-const _TF_SECONDS = {
-    '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) {
-    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) => 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;
-}
-function Divider({ onDrag }) {
-    const lastY = useRef(0);
-    const handleMouseDown = useCallback((e) => {
-        e.preventDefault();
-        lastY.current = e.clientY;
-        const onMove = (me) => {
-            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 (_jsx("div", { onMouseDown: handleMouseDown, style: {
-            height: 4,
-            cursor: 'ns-resize',
-            background: 'var(--border, #2a2e39)',
-            flexShrink: 0,
-            userSelect: 'none',
-        } }));
-}
-// ─── Price helpers ───────────────────────────────────────────────────────────
-function _fmtPrice(v) {
-    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) {
-    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, }) {
-    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 (_jsxs("div", { style: {
-            position: 'absolute',
-            top: 6,
-            left: 6,
-            zIndex: 3,
-            pointerEvents: 'auto',
-            maxWidth: 'calc(100% - 80px)',
-            fontFamily: '-apple-system, BlinkMacSystemFont, sans-serif',
-            userSelect: 'none',
-        }, children: [_jsxs("div", { style: { display: 'flex', alignItems: 'baseline', flexWrap: 'wrap', gap: '0 5px', fontSize: 11.5, lineHeight: 1.7 }, children: [(() => {
-                        const exchange = symbol.includes(':') ? symbol.split(':')[0].toUpperCase() : '';
-                        if (!exchange)
-                            return null;
-                        const logoUrl = getExchangeLogoUrl?.(exchange);
-                        if (!logoUrl)
-                            return null;
-                        return (_jsx("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.style.display = 'none'; } }));
-                    })(), _jsx("span", { style: { fontWeight: 700, color: textColor }, children: symbol }), _jsxs("span", { style: { color: muted }, children: ["\u00B7 ", timeframe] }), lastBar && (_jsxs(_Fragment, { children: [_jsxs("span", { children: [_jsx("span", { style: { color: muted }, children: "O" }), _jsx("span", { style: { color: muted }, children: " " }), _jsx("span", { style: { color: textColor }, children: _fmtPrice(lastBar.open) })] }), _jsxs("span", { children: [_jsx("span", { style: { color: '#26a641', fontWeight: 500 }, children: "H" }), _jsx("span", { style: { color: muted }, children: " " }), _jsx("span", { style: { color: textColor }, children: _fmtPrice(lastBar.high) })] }), _jsxs("span", { children: [_jsx("span", { style: { color: '#f85149', fontWeight: 500 }, children: "L" }), _jsx("span", { style: { color: muted }, children: " " }), _jsx("span", { style: { color: textColor }, children: _fmtPrice(lastBar.low) })] }), _jsxs("span", { children: [_jsx("span", { style: { color: muted }, children: "C" }), _jsx("span", { style: { color: muted }, children: " " }), _jsx("span", { style: { color: textColor }, children: _fmtPrice(lastBar.close) })] }), _jsxs("span", { style: { color: changeColor }, children: [isUp ? '+' : '', _fmtPrice(change), " (", isUp ? '+' : '', pctChange.toFixed(2), "%)"] })] }))] }), overlayInds.length > 0 && (_jsxs(_Fragment, { children: [!collapsed && (_jsx("div", { style: { display: 'flex', flexDirection: 'column', gap: 1, marginTop: 2 }, children: overlayInds.map((ind, i) => (_jsx(IndicatorLabel, { indicator: ind, color: ind.config.color ?? overlayColors[i % overlayColors.length] ?? '#2196f3', onRemove: () => onRemove(ind.id), onConfigure: () => onConfigure(ind) }, ind.id))) })), _jsx("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,
-                        }, children: collapsed ? '▾' : '▴' })] }))] }));
-}
-export const ChartCanvas = forwardRef(function ChartCanvas({ symbol, timeframe, datafeed, theme = 'dark', timezone = 'UTC', initialIndicators = [], layoutToRestore, onIndicatorsChanged, priceFraction: priceFractionProp, onPriceFractionChange, getExchangeLogoUrl, tradingBridge, }, ref) {
-    const outerRef = useRef(null);
-    const priceRef = useRef(null);
-    const overlayCanvasRef = useRef(null);
-    /** Crosshair X pixel (relative to chart column) — updated via mousemove, no re-render needed. */
-    const crosshairXRef = useRef(null);
-    const chartRef = useRef(null);
-    const transformRef = useRef(null);
-    const [loading, setLoading] = useState(true);
-    const [error, setError] = useState(null);
-    const [bars, setBars] = useState([]);
-    const [panes, setPanes] = useState([]);
-    const [indicators, setIndicators] = useState([]);
-    const [totalHeight, setTotalHeight] = useState(600);
-    const [activeTool, setActiveTool] = useState('cursor');
-    const [ctxMenu, setCtxMenu] = useState(null);
-    const [chartCtxMenu, setChartCtxMenu] = useState(null);
-    const [settingsOpen, setSettingsOpen] = useState(false);
-    const [canvasSettings, setCanvasSettings] = useState({
-        background: '#000000',
-        gridColor: '#2a2a2a',
-        gridVisible: true,
-    });
-    const [configTarget, setConfigTarget] = useState(null);
-    // Flag to suppress chart context menu when a drawing context menu was triggered
-    const drawingCtxJustFired = useRef(false);
-    const dagRef = useRef(null);
-    const [computedResults, setComputedResults] = useState(() => 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(null);
-    const [priceFraction, setPriceFraction] = useState(priceFractionProp ?? 0.6);
-    // ── Imperative handle (tab snapshot save/load) ─────────────────────────────
-    useImperativeHandle(ref, () => ({
-        getLayoutSnapshot: () => chartRef.current?.saveLayout() ?? null,
-        loadLayoutSnapshot: (layout) => {
-            chartRef.current?.loadLayout(layout);
-        },
-        addIndicator: (config) => chartRef.current?.addIndicator(config) ?? null,
-        getOverlayStore: () => chartRef.current?.getTradingOverlayStore() ?? null,
-        captureScreenshot: async () => {
-            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('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,
-            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 }) => {
-            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 }) => {
-            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 }) => {
-            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); }, [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()));
-    }, [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;
-        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) => {
-        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) => {
-        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 = 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) => {
-        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) => {
-        chartRef.current?.removeIndicator(id);
-    }, []);
-    const handleConfigureIndicator = useCallback((indicator) => {
-        setConfigTarget(indicator);
-    }, []);
-    const handleSaveConfig = useCallback((newConfig) => {
-        const chart = chartRef.current;
-        if (!chart || !configTarget)
-            return;
-        chart.removeIndicator(configTarget.id);
-        chart.addIndicator(newConfig);
-        setConfigTarget(null);
-    }, [configTarget]);
-    // ── Drawing tool selection ─────────────────────────────────────────────────
-    const POINTER_TOOLS = ['cursor', 'crosshair', 'dot', 'demonstration'];
-    const handleToolSelect = useCallback((tool) => {
-        setActiveTool(tool);
-        const chart = chartRef.current;
-        if (!chart)
-            return;
-        const isPointerTool = POINTER_TOOLS.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);
-        }
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, []);
-    // ── Divider drag: price | sub-pane area split ──────────────────────────────
-    const handlePriceDividerDrag = useCallback((dy) => {
-        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, dy) => {
-        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) => 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 (_jsxs("div", { ref: outerRef, style: {
-            position: 'relative',
-            width: '100%',
-            height: '100%',
-            display: 'flex',
-            gap: 8,
-            overflow: 'hidden',
-        }, children: [_jsx(LeftToolbar, { activeTool: activeTool, onSelectTool: handleToolSelect, onVisibilityAction: handleVisibilityAction, visibilityActiveAction: visibilityActiveAction, onVisibilityDeactivate: handleVisibilityDeactivate, onDeleteClick: () => chartRef.current?.deleteSelectedDrawing() }), _jsxs("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.getBoundingClientRect();
-                    crosshairXRef.current = e.clientX - rect.left;
-                }, onMouseLeave: () => { crosshairXRef.current = null; }, children: [_jsxs("div", { style: { position: 'relative', height: `${priceH}px`, flexShrink: 0 }, onContextMenu: handleCanvasContextMenu, children: [_jsx("div", { ref: priceRef, style: { width: '100%', height: '100%' } }), _jsx("canvas", { ref: overlayCanvasRef, style: {
-                                    position: 'absolute', top: 0, left: 0,
-                                    width: '100%', height: '100%',
-                                    pointerEvents: 'none', zIndex: 2,
-                                } }), "          ", (activeTool === 'dot' || activeTool === 'demonstration') && (_jsx(PointerOverlay, { mode: activeTool, width: priceRef.current?.clientWidth ?? 0, height: priceH })), "          ", _jsx(PricePaneHeader, { symbol: symbol, timeframe: timeframe, bars: bars, theme: theme, indicators: indicators, overlayColors: OVERLAY_COLORS, onRemove: handleRemoveIndicator, onConfigure: handleConfigureIndicator, ...(getExchangeLogoUrl ? { getExchangeLogoUrl } : {}) })] }), loading && (_jsx("div", { style: {
-                            position: 'absolute',
-                            top: priceH / 2 - 12,
-                            left: '50%',
-                            transform: 'translateX(-50%)',
-                            color: 'var(--text-muted, #787b86)',
-                            fontSize: 13,
-                            pointerEvents: 'none',
-                            zIndex: 10,
-                        }, children: "Loading\u2026" })), error && (_jsx("div", { style: {
-                            position: 'absolute',
-                            top: priceH / 2 - 12,
-                            left: '50%',
-                            transform: 'translateX(-50%)',
-                            color: '#ef5350',
-                            fontSize: 13,
-                            pointerEvents: 'none',
-                            zIndex: 10,
-                        }, children: error })), hasSubPanes && (_jsxs(_Fragment, { children: [_jsx(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 (_jsxs("div", { style: { display: 'flex', flexDirection: 'column' }, children: [_jsx(IndicatorPane, { indicators: paneIndicators, bars: bars, transform: transformRef.current, height: paneH, theme: theme, computedResults: computedResults, crosshairXRef: crosshairXRef, onRemove: handleRemoveIndicator, onConfigure: handleConfigureIndicator }), idx < panes.length - 1 && (_jsx(Divider, { onDrag: (dy) => handleSubPaneDividerDrag(pane.id, dy) }))] }, pane.id));
-                            })] }))] }), configTarget && (_jsx(IndicatorConfigDialog, { indicator: configTarget, onSave: handleSaveConfig, onClose: () => setConfigTarget(null) })), ctxMenu && (_jsxs(_Fragment, { children: [_jsx("div", { className: "drawing-ctx-backdrop", onClick: () => setCtxMenu(null), onContextMenu: (e) => { e.preventDefault(); setCtxMenu(null); } }), _jsx("div", { className: "drawing-ctx-menu", style: { left: ctxMenu.x, top: ctxMenu.y }, children: _jsx("button", { className: "drawing-ctx-item", onClick: () => {
-                                chartRef.current?.removeDrawing(ctxMenu.drawingId);
-                                setCtxMenu(null);
-                            }, children: "Remove" }) })] })), chartCtxMenu && (_jsx(ChartContextMenu, { x: chartCtxMenu.x, y: chartCtxMenu.y, onClose: () => setChartCtxMenu(null), onSettings: () => setSettingsOpen(true), onClearDrawings: handleClearDrawings, onClearIndicators: handleClearIndicators, onResetView: handleResetView })), settingsOpen && (_jsx(ChartSettingsDialog, { initialSettings: canvasSettings, onApply: handleApplySettings, onClose: () => setSettingsOpen(false) }))] }));
-});
-/** @deprecated Use ChartCanvas */
-export const MultiPaneChart = ChartCanvas;
-//# sourceMappingURL=ChartCanvas.js.map