viainti-chart 1.1.0 → 1.1.1

package/dist/index.mjs

@@ -1,222 +1,266 @@
-import React, { useRef, useState, useMemo, useEffect, useCallback, useSyncExternalStore, memo } from 'react';
+import React, { useRef, useState, useEffect, useMemo, useCallback, useSyncExternalStore, memo } from 'react';
 import { motion, AnimatePresence } from 'framer-motion';
 
+const PRICE_SCALE_WIDTH = 72;
+const LEFT_TOOLBAR_WIDTH = 0;
+const PADDING_LEFT = 12;
+const PADDING_RIGHT = 12;
+const PADDING_TOP = 12;
+const PADDING_BOTTOM = 12;
+const X_AXIS_HEIGHT = 42;
+const VOLUME_RATIO = 0.28;
+const MIN_VOLUME_HEIGHT = 120;
+const MAX_VOLUME_HEIGHT = 260;
+const MIN_PRICE_HEIGHT = 200;
 const MIN_BAR_SPACING$1 = 6;
 const MAX_BAR_SPACING$1 = 18;
-const RIGHT_PADDING_PX$1 = 60;
-const MIN_VISIBLE_BARS = 12;
-const MAX_VISIBLE_BARS = 720;
+const MIN_VISIBLE_BARS = 20;
+const MAX_VISIBLE_BARS = 800;
+const CROSSHAIR_COLOR = 'rgba(255,255,255,0.35)';
+const GRID_MAJOR = 'rgba(255,255,255,0.06)';
+const GRID_MINOR = 'rgba(255,255,255,0.03)';
+const BULL_COLOR = '#2ECC71';
+const BEAR_COLOR = '#E74C3C';
 const clamp$1 = (value, min, max) => Math.max(min, Math.min(max, value));
 const alignStroke$1 = (value) => Math.round(value) + 0.5;
-const getCandleTime = (candle, fallbackIndex) => {
+const niceStep = (range, targetTicks) => {
+    if (range <= 0 || !Number.isFinite(range))
+        return 1;
+    const rawStep = range / Math.max(targetTicks, 1);
+    const magnitude = 10 ** Math.floor(Math.log10(rawStep));
+    const normalized = rawStep / magnitude;
+    let niceNormalized;
+    if (normalized <= 1)
+        niceNormalized = 1;
+    else if (normalized <= 2)
+        niceNormalized = 2;
+    else if (normalized <= 5)
+        niceNormalized = 5;
+    else
+        niceNormalized = 10;
+    return niceNormalized * magnitude;
+};
+const formatPrice = (value, step) => {
+    if (!Number.isFinite(value))
+        return '—';
+    const decimals = clamp$1(-Math.floor(Math.log10(step || 1)), 0, value < 1 ? 6 : 4);
+    return value.toFixed(decimals);
+};
+const formatVolume = (value) => {
+    if (!Number.isFinite(value))
+        return '—';
+    if (value >= 1_000_000)
+        return `${(value / 1_000_000).toFixed(2)}M`;
+    if (value >= 1_000)
+        return `${(value / 1_000).toFixed(2)}K`;
+    return value.toFixed(2);
+};
+const formatTimeLabel = (timestamp) => {
+    const date = new Date(timestamp);
+    if (Number.isNaN(date.getTime()))
+        return `${timestamp}`;
+    return date.toLocaleTimeString('es-ES', { hour: '2-digit', minute: '2-digit' });
+};
+const getCandleTime = (candle, fallback) => {
     if (!candle)
-        return fallbackIndex;
+        return fallback;
     if (typeof candle.time === 'number')
         return candle.time;
     if (typeof candle.timestamp === 'number')
         return candle.timestamp;
-    return fallbackIndex;
+    return fallback;
 };
-const buildTimeTicks = (minTime, maxTime, desiredTicks) => {
-    if (!Number.isFinite(minTime) || !Number.isFinite(maxTime))
-        return [];
-    if (minTime === maxTime)
-        return [minTime];
-    const safeDesired = Math.max(2, desiredTicks);
-    const span = maxTime - minTime;
-    const step = span / (safeDesired - 1);
-    const ticks = [];
-    for (let i = 0; i < safeDesired; i++) {
-        const rawValue = minTime + step * i;
-        const clampedValue = clamp$1(rawValue, minTime, maxTime);
-        if (ticks.length && Math.abs(clampedValue - ticks[ticks.length - 1]) < 1e-3)
-            continue;
-        ticks.push(clampedValue);
-    }
-    ticks[ticks.length - 1] = maxTime;
-    return ticks;
-};
-const formatTickLabel = (value) => {
-    const date = new Date(value);
-    if (!Number.isNaN(date.getTime())) {
-        return date.toLocaleTimeString('es-ES', { hour: '2-digit', minute: '2-digit' });
-    }
-    return `${value}`;
-};
-const getPanBounds = (visibleBars, dataLength) => {
-    const maxPan = 0;
-    const minPan = Math.min(0, visibleBars - dataLength);
-    return { min: minPan, max: maxPan };
+const computePlotArea = (containerWidth, containerHeight, showVolume) => {
+    const leftGutter = LEFT_TOOLBAR_WIDTH + PADDING_LEFT;
+    const rightGutter = PRICE_SCALE_WIDTH + PADDING_RIGHT;
+    const plotX0 = leftGutter;
+    const plotX1 = Math.max(plotX0 + 1, containerWidth - rightGutter);
+    const plotWidth = plotX1 - plotX0;
+    const availableHeight = Math.max(120, containerHeight - PADDING_TOP - PADDING_BOTTOM - X_AXIS_HEIGHT);
+    const targetVolume = showVolume ? clamp$1(Math.round(containerHeight * VOLUME_RATIO), MIN_VOLUME_HEIGHT, MAX_VOLUME_HEIGHT) : 0;
+    const volumePaneHeight = showVolume ? Math.min(targetVolume, Math.max(0, availableHeight - MIN_PRICE_HEIGHT)) : 0;
+    const pricePaneHeight = availableHeight - volumePaneHeight;
+    const pricePaneY0 = PADDING_TOP;
+    const volumePaneY0 = pricePaneY0 + pricePaneHeight + (showVolume ? 12 : 0);
+    const xAxisY0 = volumePaneY0 + volumePaneHeight;
+    return { plotX0, plotX1, plotWidth, pricePaneY0, pricePaneHeight, volumePaneY0, volumePaneHeight, xAxisY0 };
 };
 const computeViewport = (data, state) => {
     if (!data.length) {
-        return { startIndex: 0, endIndex: 0 };
+        return { startIndex: 0, endIndex: 0, minTimeVisible: 0, maxTimeVisible: 0 };
     }
     const rawEnd = (data.length - 1) + Math.round(state.panOffsetBars);
-    const minEnd = Math.max(state.visibleBars - 1, 0);
     const maxEnd = Math.max(data.length - 1, 0);
+    const minEnd = Math.min(Math.max(state.visibleBars - 1, 0), maxEnd);
     const endIndex = clamp$1(rawEnd, minEnd, maxEnd);
     const startIndex = Math.max(0, endIndex - state.visibleBars + 1);
-    return { startIndex, endIndex };
+    const minTimeVisible = getCandleTime(data[startIndex], startIndex);
+    const maxTimeVisible = getCandleTime(data[endIndex], endIndex);
+    console.log('[Chart::Viewport]', { startIndex, endIndex, minTimeVisible, maxTimeVisible });
+    return { startIndex, endIndex, minTimeVisible, maxTimeVisible };
 };
-const computeXMapping = (plotArea, viewport) => {
-    const { plotX0, plotX1, leftPaddingPx, rightPaddingPx } = plotArea;
+const computeXMapping = (plotArea, viewport, state) => {
     const visibleCount = Math.max(1, viewport.endIndex - viewport.startIndex + 1);
-    const availableWidth = Math.max(1, (plotX1 - rightPaddingPx) - (plotX0 + leftPaddingPx));
-    const normalizedWidth = availableWidth * (visibleCount / Math.max(1, visibleCount - 1));
-    const barSpacing = clamp$1(normalizedWidth / visibleCount, MIN_BAR_SPACING$1, MAX_BAR_SPACING$1);
-    const targetLastX = plotX1 - rightPaddingPx;
-    const offsetX = targetLastX - ((viewport.endIndex - viewport.startIndex) * barSpacing);
-    const x = (index) => plotX0 + offsetX + (index - viewport.startIndex) * barSpacing;
-    const gapLeft = x(viewport.startIndex) - (plotX0 + leftPaddingPx);
-    const gapRight = (plotX1 - rightPaddingPx) - x(viewport.endIndex);
+    const firstTarget = plotArea.plotX0 + state.leftPaddingPx;
+    const lastTarget = plotArea.plotX1 - state.rightPaddingPx;
+    const innerSpan = Math.max(1, lastTarget - firstTarget);
+    const gaps = Math.max(1, visibleCount - 1);
+    const rawSpacing = visibleCount > 1 ? innerSpan / gaps : innerSpan;
+    const barSpacing = clamp$1(rawSpacing, MIN_BAR_SPACING$1, MAX_BAR_SPACING$1);
+    const bodyWidth = clamp$1(barSpacing * 0.7, 3, barSpacing - 2);
+    const wickWidth = Math.max(1, Math.floor(bodyWidth * 0.25));
+    const offsetX = visibleCount > 1
+        ? (lastTarget - (visibleCount - 1) * barSpacing) - plotArea.plotX0
+        : (lastTarget - plotArea.plotX0);
+    const candleCenterX = (index) => plotArea.plotX0 + offsetX + (index - viewport.startIndex) * barSpacing;
+    const candleLeftX = (index) => candleCenterX(index) - bodyWidth / 2;
+    const gapLeft = candleCenterX(viewport.startIndex) - (plotArea.plotX0 + state.leftPaddingPx);
+    const gapRight = (plotArea.plotX1 - state.rightPaddingPx) - candleCenterX(viewport.endIndex);
     if (Math.abs(gapLeft) > 2 || Math.abs(gapRight) > 2) {
-        console.error('[ChartViewport::Alignment]', { startIndex: viewport.startIndex, endIndex: viewport.endIndex, gapLeft, gapRight, barSpacing, offsetX });
+        console.warn('[Chart::GapMismatch]', { startIndex: viewport.startIndex, endIndex: viewport.endIndex, gapLeft, gapRight, visibleCount, barSpacing });
     }
     else {
-        console.log('[ChartViewport::Alignment]', { startIndex: viewport.startIndex, endIndex: viewport.endIndex, gapLeft, gapRight, barSpacing, offsetX });
+        console.log('[Chart::AlignmentOK]', { startIndex: viewport.startIndex, endIndex: viewport.endIndex, gapLeft, gapRight, visibleCount, barSpacing });
+    }
+    return { barSpacing, bodyWidth, wickWidth, offsetX, candleCenterX, candleLeftX };
+};
+const computeYMapping = (data, viewport, plotArea, state) => {
+    const slice = data.slice(Math.max(0, viewport.startIndex), Math.max(0, viewport.endIndex) + 1);
+    if (!slice.length) {
+        return {
+            yMin: 0,
+            yMax: 1,
+            priceToY: () => plotArea.pricePaneY0,
+            yTicks: []
+        };
     }
-    return { barSpacing, offsetX, x };
+    let minPrice = Number.POSITIVE_INFINITY;
+    let maxPrice = Number.NEGATIVE_INFINITY;
+    slice.forEach(candle => {
+        minPrice = Math.min(minPrice, candle.low);
+        maxPrice = Math.max(maxPrice, candle.high);
+    });
+    if (!Number.isFinite(minPrice) || !Number.isFinite(maxPrice)) {
+        minPrice = 0;
+        maxPrice = 1;
+    }
+    const pad = (maxPrice - minPrice || Math.abs(maxPrice) * 0.01 || 1) * state.yPaddingPct;
+    const yMin = minPrice - pad;
+    const yMax = maxPrice + pad;
+    const priceToY = (value) => {
+        const clampedValue = Number.isFinite(value) ? value : 0;
+        return plotArea.pricePaneY0 + ((yMax - clampedValue) / Math.max(yMax - yMin, 1e-6)) * plotArea.pricePaneHeight;
+    };
+    const step = niceStep(yMax - yMin, 8);
+    const startTick = Math.ceil(yMin / step) * step;
+    const yTicks = [];
+    for (let value = startTick; value <= yMax; value += step) {
+        const y = priceToY(value);
+        yTicks.push({ value, y, label: formatPrice(value, step) });
+    }
+    return { yMin, yMax, priceToY, yTicks };
+};
+const computeTimeTicks = (data, viewport, xMapping, plotArea) => {
+    if (!data.length)
+        return [];
+    const ticks = [];
+    const targetSpacingPx = 120;
+    const candlesPerTick = Math.max(1, Math.round(targetSpacingPx / xMapping.barSpacing));
+    for (let idx = viewport.startIndex; idx <= viewport.endIndex; idx += candlesPerTick) {
+        const timestamp = getCandleTime(data[idx], idx);
+        if (timestamp < viewport.minTimeVisible || timestamp > viewport.maxTimeVisible)
+            continue;
+        const x = xMapping.candleCenterX(idx);
+        if (x < plotArea.plotX0 || x > plotArea.plotX1)
+            continue;
+        ticks.push({ index: idx, x, label: formatTimeLabel(timestamp) });
+    }
+    if (ticks.length === 0 && viewport.endIndex >= viewport.startIndex) {
+        const timestamp = getCandleTime(data[viewport.endIndex], viewport.endIndex);
+        if (timestamp >= viewport.minTimeVisible && timestamp <= viewport.maxTimeVisible) {
+            const x = xMapping.candleCenterX(viewport.endIndex);
+            ticks.push({ index: viewport.endIndex, x, label: formatTimeLabel(timestamp) });
+        }
+    }
+    const outOfRange = ticks.filter(tick => {
+        const t = getCandleTime(data[tick.index], tick.index);
+        return t < viewport.minTimeVisible || t > viewport.maxTimeVisible;
+    });
+    if (outOfRange.length) {
+        console.warn('[Chart::TimeTickTrim]', { outOfRange, minTimeVisible: viewport.minTimeVisible, maxTimeVisible: viewport.maxTimeVisible });
+    }
+    console.log('[Chart::TimeTicks]', {
+        count: ticks.length,
+        minTimeVisible: viewport.minTimeVisible,
+        maxTimeVisible: viewport.maxTimeVisible,
+        tickIndexes: ticks.map(t => t.index),
+        labels: ticks.map(t => t.label)
+    });
+    return ticks;
+};
+const drawRoundedRect$1 = (ctx, x, y, width, height, radius) => {
+    const r = Math.min(radius, width / 2, height / 2);
+    ctx.beginPath();
+    ctx.moveTo(x + r, y);
+    ctx.lineTo(x + width - r, y);
+    ctx.quadraticCurveTo(x + width, y, x + width, y + r);
+    ctx.lineTo(x + width, y + height - r);
+    ctx.quadraticCurveTo(x + width, y + height, x + width - r, y + height);
+    ctx.lineTo(x + r, y + height);
+    ctx.quadraticCurveTo(x, y + height, x, y + height - r);
+    ctx.lineTo(x, y + r);
+    ctx.quadraticCurveTo(x, y, x + r, y);
+    ctx.closePath();
 };
-const Chart = ({ data, width = 900, height = 480, visibleBars: visibleBarsProp = 60 }) => {
+const Chart = ({ data, width = 900, height = 520, visibleBars: defaultVisibleBars = 60 }) => {
     const priceCanvasRef = useRef(null);
     const overlayCanvasRef = useRef(null);
     const chartAreaRef = useRef(null);
-    const isDraggingRef = useRef(false);
-    const lastPointerXRef = useRef(0);
-    const barSpacingRef = useRef(12);
-    const rafRef = useRef(null);
     const [showMenu, setShowMenu] = useState(false);
-    const initialVisible = useMemo(() => {
-        if (!data.length)
-            return Math.max(MIN_VISIBLE_BARS, visibleBarsProp);
-        const maxBars = Math.max(1, data.length);
-        return clamp$1(Math.round(visibleBarsProp), Math.min(MIN_VISIBLE_BARS, maxBars), Math.min(MAX_VISIBLE_BARS, maxBars));
-    }, [data.length, visibleBarsProp]);
     const [chartState, setChartState] = useState(() => ({
-        visibleBars: initialVisible,
-        defaultVisibleBars: initialVisible,
+        visibleBars: Math.max(defaultVisibleBars, MIN_VISIBLE_BARS),
         panOffsetBars: 0,
         locked: false,
         crosshairEnabled: true,
-        crosshairX: null,
-        crosshairY: null,
-        hoveredIndex: null,
+        crosshairIndex: null,
+        crosshairPrice: null,
         autoScaleY: true,
-        yMinManual: null,
-        yMaxManual: null,
         yPaddingPct: 0.08,
-        showCandles: true,
-        showVolume: true,
         showGrid: true,
-        showGridMinor: true
+        showVolume: true,
+        rightPaddingPx: 60,
+        leftPaddingPx: 0
     }));
     useEffect(() => {
         setChartState(prev => {
-            if (!data.length) {
-                return { ...prev, panOffsetBars: 0 };
-            }
-            const maxBars = Math.max(1, data.length);
-            const nextVisible = clamp$1(Math.round(prev.visibleBars), Math.min(MIN_VISIBLE_BARS, maxBars), Math.min(MAX_VISIBLE_BARS, maxBars));
-            const nextDefault = clamp$1(Math.round(prev.defaultVisibleBars), Math.min(MIN_VISIBLE_BARS, maxBars), Math.min(MAX_VISIBLE_BARS, maxBars));
-            const bounds = getPanBounds(nextVisible, data.length);
-            const nextPan = clamp$1(prev.panOffsetBars, bounds.min, bounds.max);
-            if (nextVisible === prev.visibleBars && nextDefault === prev.defaultVisibleBars && nextPan === prev.panOffsetBars) {
+            const clamped = clamp$1(Math.round(prev.visibleBars), MIN_VISIBLE_BARS, Math.min(MAX_VISIBLE_BARS, Math.max(data.length, MIN_VISIBLE_BARS)));
+            const minPan = -Math.max(data.length - clamped, 0);
+            const panOffsetBars = clamp$1(prev.panOffsetBars, minPan, 0);
+            if (clamped === prev.visibleBars && panOffsetBars === prev.panOffsetBars)
                 return prev;
-            }
-            return { ...prev, visibleBars: nextVisible, defaultVisibleBars: nextDefault, panOffsetBars: nextPan };
+            return { ...prev, visibleBars: clamped, panOffsetBars };
         });
     }, [data.length]);
+    const plotArea = useMemo(() => computePlotArea(width, height, chartState.showVolume), [chartState.showVolume, height, width]);
     const viewport = useMemo(() => computeViewport(data, chartState), [chartState, data]);
+    const xMapping = useMemo(() => computeXMapping(plotArea, viewport, chartState), [chartState, plotArea, viewport]);
+    const yMapping = useMemo(() => computeYMapping(data, viewport, plotArea, chartState), [chartState, data, plotArea, viewport]);
+    const timeTicks = useMemo(() => computeTimeTicks(data, viewport, xMapping, plotArea), [data, plotArea, viewport, xMapping]);
     useEffect(() => {
-        console.log('[ChartState::Viewport]', {
-            startIndex: viewport.startIndex,
-            endIndex: viewport.endIndex,
-            visibleBars: chartState.visibleBars,
-            panOffsetBars: chartState.panOffsetBars
-        });
-    }, [chartState.panOffsetBars, chartState.visibleBars, viewport.endIndex, viewport.startIndex]);
-    const safeStart = Math.max(0, viewport.startIndex);
-    const safeEnd = Math.max(safeStart, viewport.endIndex);
-    const visibleData = data.slice(safeStart, safeEnd + 1);
-    const plotArea = useMemo(() => ({
-        plotX0: 0,
-        plotX1: width - RIGHT_PADDING_PX$1,
-        leftPaddingPx: 0,
-        rightPaddingPx: RIGHT_PADDING_PX$1
-    }), [width]);
-    const xMapping = useMemo(() => computeXMapping(plotArea, viewport), [plotArea, viewport]);
-    useEffect(() => {
-        barSpacingRef.current = xMapping.barSpacing;
-    }, [xMapping.barSpacing]);
-    const priceHeight = useMemo(() => {
-        if (!chartState.showVolume)
-            return height;
-        return Math.max(160, height - Math.max(48, Math.floor(height * 0.22)));
-    }, [chartState.showVolume, height]);
-    const volumeHeight = Math.max(0, height - priceHeight);
-    const priceWindow = useMemo(() => {
-        if (!visibleData.length) {
-            return { min: 0, max: 1 };
-        }
-        if (!chartState.autoScaleY && chartState.yMinManual != null && chartState.yMaxManual != null) {
-            return { min: chartState.yMinManual, max: chartState.yMaxManual };
-        }
-        const values = [];
-        visibleData.forEach(candle => {
-            values.push(candle.low, candle.high);
-        });
-        values.sort((a, b) => a - b);
-        let min = values[0] ?? 0;
-        let max = values[values.length - 1] ?? 1;
-        if (values.length >= 6) {
-            const lowerIdx = Math.max(0, Math.floor(values.length * 0.02));
-            const upperIdx = Math.min(values.length - 1, Math.ceil(values.length * 0.98) - 1);
-            min = values[lowerIdx] ?? min;
-            max = values[upperIdx] ?? max;
-        }
-        if (!Number.isFinite(min) || !Number.isFinite(max)) {
-            return { min: 0, max: 1 };
-        }
-        const clampedPaddingPct = clamp$1(chartState.yPaddingPct, 0.06, 0.1);
-        const rawRange = max - min || Math.abs(max) * 0.01 || 1;
-        const padding = Math.max(rawRange * clampedPaddingPct, 1e-6);
-        return { min: min - padding, max: max + padding };
-    }, [chartState.autoScaleY, chartState.yMaxManual, chartState.yMinManual, chartState.yPaddingPct, visibleData]);
-    const maxVolume = useMemo(() => visibleData.reduce((acc, candle) => Math.max(acc, candle.volume ?? 0), 0), [visibleData]);
-    const minTimeVisible = visibleData.length ? getCandleTime(visibleData[0], safeStart) : 0;
-    const maxTimeVisible = visibleData.length ? getCandleTime(visibleData[visibleData.length - 1], safeEnd) : 0;
-    const timeTicks = useMemo(() => {
-        if (!visibleData.length)
-            return [];
-        const availableWidth = plotArea.plotX1 - plotArea.plotX0;
-        const maxTicks = Math.max(2, Math.min(10, Math.floor(availableWidth / 120)));
-        const ticks = buildTimeTicks(minTimeVisible, maxTimeVisible, maxTicks);
-        return ticks.map(tick => clamp$1(tick, minTimeVisible, maxTimeVisible));
-    }, [maxTimeVisible, minTimeVisible, plotArea.plotX0, plotArea.plotX1, visibleData]);
-    const resizeCanvas = useCallback((canvas) => {
-        if (!canvas)
-            return;
-        const dpr = window.devicePixelRatio || 1;
-        canvas.width = width * dpr;
-        canvas.height = height * dpr;
-        canvas.style.width = `${width}px`;
-        canvas.style.height = `${height}px`;
-    }, [height, width]);
-    useEffect(() => {
+        const resizeCanvas = (canvas) => {
+            if (!canvas)
+                return;
+            const dpr = window.devicePixelRatio || 1;
+            canvas.width = width * dpr;
+            canvas.height = height * dpr;
+            canvas.style.width = `${width}px`;
+            canvas.style.height = `${height}px`;
+        };
         resizeCanvas(priceCanvasRef.current);
         resizeCanvas(overlayCanvasRef.current);
-    }, [resizeCanvas]);
-    const getXForTimeValue = useCallback((tick) => {
-        if (maxTimeVisible === minTimeVisible) {
-            return xMapping.x(safeEnd);
-        }
-        const ratio = (tick - minTimeVisible) / (maxTimeVisible - minTimeVisible);
-        const target = safeStart + ratio * (safeEnd - safeStart);
-        const snapped = clamp$1(Math.round(target), safeStart, safeEnd);
-        return xMapping.x(snapped);
-    }, [maxTimeVisible, minTimeVisible, safeEnd, safeStart, xMapping]);
-    const drawPriceLayer = useCallback(() => {
+    }, [height, width]);
+    const priceSlice = useMemo(() => data.slice(Math.max(0, viewport.startIndex), Math.max(0, viewport.endIndex) + 1), [data, viewport.endIndex, viewport.startIndex]);
+    const drawBaseLayer = useCallback(() => {
         const canvas = priceCanvasRef.current;
         if (!canvas)
             return;
@@ -228,167 +272,157 @@ const Chart = ({ data, width = 900, height = 480, visibleBars: visibleBarsProp =
         ctx.clearRect(0, 0, width, height);
         ctx.fillStyle = '#05070d';
         ctx.fillRect(0, 0, width, height);
-        if (!visibleData.length) {
+        if (!priceSlice.length)
             return;
-        }
-        const priceRange = Math.max(priceWindow.max - priceWindow.min, 1e-6);
-        const toY = (value) => ((priceWindow.max - value) / priceRange) * priceHeight;
-        const horizontalDivisions = 4;
+        // Price pane clip
         ctx.save();
         ctx.beginPath();
-        ctx.rect(plotArea.plotX0, 0, plotArea.plotX1 - plotArea.plotX0, priceHeight);
+        ctx.rect(plotArea.plotX0, plotArea.pricePaneY0, plotArea.plotWidth, plotArea.pricePaneHeight);
         ctx.clip();
         if (chartState.showGrid) {
-            ctx.strokeStyle = '#2b2f3a';
-            ctx.lineWidth = 0.6;
+            ctx.strokeStyle = GRID_MAJOR;
+            ctx.lineWidth = 1;
             ctx.setLineDash([]);
-            for (let i = 0; i <= horizontalDivisions; i++) {
-                const y = alignStroke$1((i / horizontalDivisions) * priceHeight);
+            yMapping.yTicks.forEach(tick => {
                 ctx.beginPath();
-                ctx.moveTo(plotArea.plotX0, y);
-                ctx.lineTo(plotArea.plotX1, y);
+                ctx.moveTo(plotArea.plotX0, alignStroke$1(tick.y));
+                ctx.lineTo(plotArea.plotX1, alignStroke$1(tick.y));
                 ctx.stroke();
-            }
+            });
             timeTicks.forEach(tick => {
-                const x = alignStroke$1(getXForTimeValue(tick));
                 ctx.beginPath();
-                ctx.moveTo(x, 0);
-                ctx.lineTo(x, priceHeight);
+                ctx.moveTo(alignStroke$1(tick.x), plotArea.pricePaneY0);
+                ctx.lineTo(alignStroke$1(tick.x), plotArea.pricePaneY0 + plotArea.pricePaneHeight);
                 ctx.stroke();
             });
-        }
-        if (chartState.showGridMinor) {
-            ctx.save();
-            ctx.strokeStyle = 'rgba(58,63,83,0.45)';
-            ctx.lineWidth = 0.4;
+            ctx.strokeStyle = GRID_MINOR;
             ctx.setLineDash([2, 4]);
-            for (let i = 0; i < horizontalDivisions; i++) {
-                const y = alignStroke$1(((i + 0.5) / horizontalDivisions) * priceHeight);
+            for (let i = 0; i < yMapping.yTicks.length - 1; i++) {
+                const current = yMapping.yTicks[i];
+                const next = yMapping.yTicks[i + 1];
+                if (!current || !next)
+                    continue;
+                const midValue = (current.value + next.value) / 2;
+                const y = alignStroke$1(yMapping.priceToY(midValue));
                 ctx.beginPath();
                 ctx.moveTo(plotArea.plotX0, y);
                 ctx.lineTo(plotArea.plotX1, y);
                 ctx.stroke();
             }
             for (let i = 0; i < timeTicks.length - 1; i++) {
-                const mid = (timeTicks[i] + timeTicks[i + 1]) / 2;
-                const x = alignStroke$1(getXForTimeValue(mid));
+                const current = timeTicks[i];
+                const next = timeTicks[i + 1];
+                if (!current || !next)
+                    continue;
+                const midX = (current.x + next.x) / 2;
                 ctx.beginPath();
-                ctx.moveTo(x, 0);
-                ctx.lineTo(x, priceHeight);
+                ctx.moveTo(alignStroke$1(midX), plotArea.pricePaneY0);
+                ctx.lineTo(alignStroke$1(midX), plotArea.pricePaneY0 + plotArea.pricePaneHeight);
                 ctx.stroke();
             }
-            ctx.restore();
+            ctx.setLineDash([]);
         }
-        if (chartState.hoveredIndex != null && chartState.hoveredIndex >= safeStart && chartState.hoveredIndex <= safeEnd) {
-            const highlightX = xMapping.x(chartState.hoveredIndex);
-            const halfWidth = xMapping.barSpacing * 0.5;
-            ctx.fillStyle = 'rgba(148,163,184,0.08)';
-            ctx.fillRect(highlightX - halfWidth, 0, halfWidth * 2, priceHeight);
+        const highlightIndex = chartState.crosshairIndex;
+        if (highlightIndex != null && highlightIndex >= viewport.startIndex && highlightIndex <= viewport.endIndex) {
+            const x = xMapping.candleLeftX(highlightIndex);
+            ctx.fillStyle = 'rgba(255,255,255,0.05)';
+            ctx.fillRect(x, plotArea.pricePaneY0, xMapping.bodyWidth, plotArea.pricePaneHeight);
         }
-        if (chartState.showCandles) {
-            visibleData.forEach((candle, offset) => {
-                const index = safeStart + offset;
-                const xCenter = xMapping.x(index);
-                const strokeX = alignStroke$1(xCenter);
-                const yHigh = toY(candle.high);
-                const yLow = toY(candle.low);
-                const yOpen = toY(candle.open);
-                const yClose = toY(candle.close);
-                const isBullish = (candle.close ?? 0) >= (candle.open ?? 0);
-                const bodyHeight = Math.abs(yClose - yOpen);
-                const bodyY = Math.min(yOpen, yClose);
-                ctx.strokeStyle = isBullish ? '#089981' : '#f23645';
-                ctx.lineWidth = Math.max(1, Math.floor(xMapping.barSpacing * 0.2));
-                ctx.beginPath();
-                ctx.moveTo(strokeX, yHigh);
-                ctx.lineTo(strokeX, yLow);
-                ctx.stroke();
-                ctx.fillStyle = isBullish ? '#089981' : '#f23645';
-                if (bodyHeight < 1) {
-                    ctx.beginPath();
-                    ctx.moveTo(xCenter - (xMapping.barSpacing * 0.35), alignStroke$1(yOpen));
-                    ctx.lineTo(xCenter + (xMapping.barSpacing * 0.35), alignStroke$1(yClose));
-                    ctx.stroke();
-                }
-                else {
-                    ctx.fillRect(xCenter - (xMapping.barSpacing * 0.35), bodyY, xMapping.barSpacing * 0.7, bodyHeight);
-                }
-            });
-        }
-        const lastCandle = data[data.length - 1];
-        const prevCandle = data[data.length - 2];
+        priceSlice.forEach((candle, offset) => {
+            const index = viewport.startIndex + offset;
+            const xCenter = xMapping.candleCenterX(index);
+            const left = xCenter - xMapping.bodyWidth / 2;
+            const yOpen = yMapping.priceToY(candle.open);
+            const yClose = yMapping.priceToY(candle.close);
+            const yHigh = yMapping.priceToY(candle.high);
+            const yLow = yMapping.priceToY(candle.low);
+            const bodyTop = Math.min(yOpen, yClose);
+            const bodyHeight = Math.abs(yClose - yOpen) || 1;
+            const isBull = (candle.close ?? 0) >= (candle.open ?? 0);
+            ctx.strokeStyle = isBull ? BULL_COLOR : BEAR_COLOR;
+            ctx.lineWidth = xMapping.wickWidth;
+            ctx.beginPath();
+            ctx.moveTo(alignStroke$1(xCenter), yHigh);
+            ctx.lineTo(alignStroke$1(xCenter), yLow);
+            ctx.stroke();
+            ctx.fillStyle = isBull ? BULL_COLOR : BEAR_COLOR;
+            drawRoundedRect$1(ctx, left, bodyTop, xMapping.bodyWidth, bodyHeight, 1.5);
+            ctx.fill();
+        });
+        const lastCandle = data[viewport.endIndex] ?? data[data.length - 1];
         if (lastCandle) {
-            const y = toY(lastCandle.close ?? lastCandle.open ?? 0);
-            ctx.save();
-            ctx.strokeStyle = '#facc15';
+            const lastPrice = lastCandle.close ?? lastCandle.open ?? lastCandle.high ?? 0;
+            const prevClose = data[viewport.endIndex - 1]?.close ?? lastPrice;
+            const delta = lastPrice - prevClose;
+            const deltaPct = prevClose ? (delta / prevClose) * 100 : 0;
+            const y = yMapping.priceToY(lastPrice);
+            ctx.strokeStyle = 'rgba(255,255,255,0.35)';
             ctx.setLineDash([6, 4]);
             ctx.lineWidth = 1;
             ctx.beginPath();
             ctx.moveTo(plotArea.plotX0, y);
             ctx.lineTo(plotArea.plotX1, y);
             ctx.stroke();
-            ctx.restore();
-            const prevClose = prevCandle?.close ?? lastCandle.close ?? 0;
-            const delta = (lastCandle.close ?? 0) - prevClose;
-            const deltaPct = prevClose ? (delta / prevClose) * 100 : 0;
-            const badgeY = clamp$1(y, 12, priceHeight - 12);
-            ctx.fillStyle = '#facc15';
-            ctx.fillRect(plotArea.plotX1 + 4, badgeY - 10, RIGHT_PADDING_PX$1 - 8, 20);
+            ctx.setLineDash([]);
+            ctx.fillStyle = delta >= 0 ? '#16a34a' : '#dc2626';
+            const badgeX = plotArea.plotX1 + 4;
+            const badgeY = clamp$1(y - 12, plotArea.pricePaneY0 + 4, plotArea.pricePaneY0 + plotArea.pricePaneHeight - 24);
+            ctx.fillRect(badgeX, badgeY, PRICE_SCALE_WIDTH - 8, 24);
             ctx.fillStyle = '#05070d';
-            ctx.font = '11px Inter, sans-serif';
+            ctx.font = '12px Inter, sans-serif';
             ctx.textAlign = 'center';
             ctx.textBaseline = 'middle';
-            ctx.fillText((lastCandle.close ?? 0).toFixed(2), plotArea.plotX1 + (RIGHT_PADDING_PX$1 - 8) / 2 + 4, badgeY);
+            ctx.fillText(lastPrice.toFixed(2), badgeX + (PRICE_SCALE_WIDTH - 8) / 2, badgeY + 10);
             ctx.textAlign = 'left';
-            ctx.fillStyle = delta >= 0 ? '#22c55e' : '#ef4444';
-            ctx.fillText(`${delta >= 0 ? '+' : ''}${delta.toFixed(2)} (${deltaPct >= 0 ? '+' : ''}${deltaPct.toFixed(2)}%)`, plotArea.plotX1 + 6, Math.min(priceHeight + 16, height - 8));
+            ctx.fillStyle = '#f1f5f9';
+            ctx.fillText(`${delta >= 0 ? '+' : ''}${delta.toFixed(2)} (${deltaPct >= 0 ? '+' : ''}${deltaPct.toFixed(2)}%)`, badgeX, plotArea.pricePaneY0 - 6);
         }
-        ctx.fillStyle = 'rgba(148,163,184,0.12)';
-        ctx.font = '600 32px Inter, sans-serif';
-        ctx.textAlign = 'left';
-        ctx.textBaseline = 'bottom';
-        ctx.fillText('viainti chart', plotArea.plotX0 + 12, priceHeight - 12);
         ctx.restore();
-        ctx.fillStyle = '#9da3b4';
+        ctx.fillStyle = '#94a3b8';
         ctx.font = '11px Inter, sans-serif';
         ctx.textAlign = 'left';
         ctx.textBaseline = 'middle';
-        for (let i = 0; i <= horizontalDivisions; i++) {
-            const price = priceWindow.max - (priceRange * i) / horizontalDivisions;
-            const y = (i / horizontalDivisions) * priceHeight;
-            ctx.fillText(price.toFixed(2), plotArea.plotX0 + 4, y);
-        }
+        yMapping.yTicks.forEach(tick => {
+            ctx.fillText(tick.label, plotArea.plotX0 + 4, tick.y);
+        });
         ctx.textAlign = 'center';
         ctx.textBaseline = 'bottom';
-        timeTicks.forEach(tick => {
-            const x = clamp$1(getXForTimeValue(tick), plotArea.plotX0 + 4, plotArea.plotX1 - 4);
-            ctx.fillText(formatTickLabel(tick), x, priceHeight - 4);
+        timeTicks.forEach((tick, idx) => {
+            const prev = timeTicks[idx - 1];
+            if (prev && Math.abs(tick.x - prev.x) < 80)
+                return;
+            const x = clamp$1(tick.x, plotArea.plotX0 + 20, plotArea.plotX1 - 20);
+            ctx.fillText(tick.label, x, plotArea.pricePaneY0 + plotArea.pricePaneHeight + 18);
         });
-        if (chartState.showVolume && volumeHeight > 0) {
-            const baseY = priceHeight + volumeHeight;
-            const usableHeight = volumeHeight - 12;
-            const maxVol = Math.max(maxVolume, 1);
+        if (chartState.showVolume && plotArea.volumePaneHeight > 0) {
+            ctx.strokeStyle = 'rgba(255,255,255,0.08)';
+            ctx.beginPath();
+            ctx.moveTo(plotArea.plotX0, plotArea.volumePaneY0 - 6);
+            ctx.lineTo(plotArea.plotX1, plotArea.volumePaneY0 - 6);
+            ctx.stroke();
             ctx.save();
             ctx.beginPath();
-            ctx.rect(plotArea.plotX0, priceHeight, plotArea.plotX1 - plotArea.plotX0, volumeHeight);
+            ctx.rect(plotArea.plotX0, plotArea.volumePaneY0, plotArea.plotWidth, plotArea.volumePaneHeight);
             ctx.clip();
-            visibleData.forEach((candle, offset) => {
-                const index = safeStart + offset;
-                const vol = candle.volume ?? 0;
-                const xCenter = xMapping.x(index);
-                const barWidth = Math.max(2, xMapping.barSpacing * 0.5);
-                const barHeight = (vol / maxVol) * usableHeight;
-                const isBullish = (candle.close ?? 0) >= (candle.open ?? 0);
-                ctx.fillStyle = isBullish ? '#3b82f6' : '#6366f1';
-                ctx.fillRect(xCenter - barWidth / 2, baseY - barHeight, barWidth, barHeight);
-                if (chartState.hoveredIndex === index) {
-                    ctx.fillStyle = 'rgba(148,163,184,0.12)';
-                    ctx.fillRect(xCenter - barWidth / 2, baseY - barHeight, barWidth, barHeight);
+            const maxVolume = Math.max(...priceSlice.map(c => c.volume ?? 0), 1);
+            priceSlice.forEach((candle, offset) => {
+                const index = viewport.startIndex + offset;
+                const xCenter = xMapping.candleCenterX(index);
+                const barWidth = Math.max(2, xMapping.bodyWidth * 0.6);
+                const volume = candle.volume ?? 0;
+                const heightRatio = volume / maxVolume;
+                const barHeight = heightRatio * (plotArea.volumePaneHeight - 12);
+                const y = plotArea.volumePaneY0 + plotArea.volumePaneHeight - barHeight;
+                ctx.fillStyle = (candle.close ?? 0) >= (candle.open ?? 0) ? 'rgba(46,204,113,0.35)' : 'rgba(231,76,60,0.35)';
+                ctx.fillRect(xCenter - barWidth / 2, y, barWidth, Math.max(barHeight, 2));
+                if (highlightIndex === index) {
+                    ctx.fillStyle = 'rgba(255,255,255,0.12)';
+                    ctx.fillRect(xCenter - barWidth / 2, y, barWidth, Math.max(barHeight, 2));
                 }
             });
             ctx.restore();
         }
-    }, [chartState.hoveredIndex, chartState.showCandles, chartState.showGrid, chartState.showGridMinor, chartState.showVolume, data, getXForTimeValue, height, maxVolume, plotArea.plotX0, plotArea.plotX1, priceHeight, priceWindow.max, priceWindow.min, safeEnd, safeStart, timeTicks, visibleData, volumeHeight, width, xMapping]);
+    }, [chartState.crosshairIndex, chartState.showGrid, chartState.showVolume, data, plotArea, priceSlice, timeTicks, viewport.endIndex, viewport.startIndex, width, height, xMapping, yMapping]);
     const drawOverlayLayer = useCallback(() => {
         const canvas = overlayCanvasRef.current;
         if (!canvas)
@@ -399,237 +433,210 @@ const Chart = ({ data, width = 900, height = 480, visibleBars: visibleBarsProp =
         const dpr = window.devicePixelRatio || 1;
         ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
         ctx.clearRect(0, 0, width, height);
-        if (!chartState.crosshairEnabled || chartState.crosshairX == null || chartState.crosshairY == null) {
+        if (!chartState.crosshairEnabled || chartState.crosshairIndex == null || chartState.crosshairPrice == null) {
             return;
         }
-        const hoveredIndex = chartState.hoveredIndex;
-        const hoveredCandle = hoveredIndex != null ? data[hoveredIndex] : null;
-        const priceRange = Math.max(priceWindow.max - priceWindow.min, 1e-6);
-        const timeValue = hoveredIndex != null ? getCandleTime(data[hoveredIndex], hoveredIndex) : null;
-        const priceValue = hoveredCandle?.close ?? (priceWindow.max - (chartState.crosshairY / Math.max(priceHeight, 1)) * priceRange);
-        ctx.strokeStyle = '#8186a5';
+        const index = chartState.crosshairIndex;
+        const x = xMapping.candleCenterX(index);
+        const priceY = yMapping.priceToY(chartState.crosshairPrice);
+        ctx.strokeStyle = CROSSHAIR_COLOR;
         ctx.lineWidth = 1;
         ctx.setLineDash([4, 4]);
         ctx.beginPath();
-        ctx.moveTo(chartState.crosshairX, 0);
-        ctx.lineTo(chartState.crosshairX, height);
-        ctx.moveTo(0, chartState.crosshairY);
-        ctx.lineTo(width, chartState.crosshairY);
+        ctx.moveTo(x, 0);
+        ctx.lineTo(x, height);
+        ctx.moveTo(plotArea.plotX0, priceY);
+        ctx.lineTo(plotArea.plotX1 + PRICE_SCALE_WIDTH, priceY);
         ctx.stroke();
         ctx.setLineDash([]);
-        if (priceValue != null) {
-            ctx.fillStyle = '#1e293b';
-            ctx.fillRect(plotArea.plotX1 + 2, chartState.crosshairY - 10, RIGHT_PADDING_PX$1 - 4, 20);
-            ctx.fillStyle = '#f8fafc';
-            ctx.font = '11px Inter, sans-serif';
-            ctx.textAlign = 'center';
-            ctx.textBaseline = 'middle';
-            ctx.fillText(priceValue.toFixed(2), plotArea.plotX1 + (RIGHT_PADDING_PX$1 / 2), chartState.crosshairY);
-        }
-        if (timeValue != null) {
-            const labelY = Math.min(priceHeight + volumeHeight - 4, height - 4);
-            const labelWidth = 90;
-            const labelX = clamp$1(chartState.crosshairX - labelWidth / 2, plotArea.plotX0 + 4, plotArea.plotX1 - labelWidth - 4);
-            ctx.fillStyle = '#1e293b';
-            ctx.fillRect(labelX, labelY - 18, labelWidth, 18);
-            ctx.fillStyle = '#f8fafc';
-            ctx.font = '10px Inter, sans-serif';
-            ctx.textAlign = 'center';
-            ctx.textBaseline = 'middle';
-            ctx.fillText(formatTickLabel(timeValue), labelX + labelWidth / 2, labelY - 9);
-        }
-        if (hoveredCandle) {
-            const tooltipLines = [
-                `O ${hoveredCandle.open?.toFixed(2) ?? '—'}`,
-                `H ${hoveredCandle.high?.toFixed(2) ?? '—'}`,
-                `L ${hoveredCandle.low?.toFixed(2) ?? '—'}`,
-                `C ${hoveredCandle.close?.toFixed(2) ?? '—'}`,
-                `V ${(hoveredCandle.volume ?? 0).toLocaleString('en-US', { maximumFractionDigits: 2 })}`
-            ];
-            const boxWidth = 120;
-            const boxHeight = tooltipLines.length * 16 + 12;
-            const boxX = plotArea.plotX0 + 12;
-            const boxY = 12;
-            ctx.fillStyle = '#0f172aee';
-            ctx.fillRect(boxX, boxY, boxWidth, boxHeight);
-            ctx.strokeStyle = '#22d3ee';
-            ctx.strokeRect(boxX, boxY, boxWidth, boxHeight);
-            ctx.fillStyle = '#f8fafc';
-            ctx.font = '11px Inter, sans-serif';
-            ctx.textAlign = 'left';
-            ctx.textBaseline = 'middle';
-            tooltipLines.forEach((line, idx) => {
-                ctx.fillText(line, boxX + 8, boxY + 12 + idx * 16);
-            });
-        }
-    }, [chartState.crosshairEnabled, chartState.crosshairX, chartState.crosshairY, chartState.hoveredIndex, data, height, priceHeight, priceWindow.max, priceWindow.min, plotArea.plotX0, plotArea.plotX1, volumeHeight, width]);
-    useEffect(() => {
-        if (rafRef.current) {
-            cancelAnimationFrame(rafRef.current);
-        }
-        rafRef.current = requestAnimationFrame(() => {
-            drawPriceLayer();
-            drawOverlayLayer();
-        });
-        return () => {
-            if (rafRef.current) {
-                cancelAnimationFrame(rafRef.current);
-                rafRef.current = null;
-            }
-        };
-    }, [drawOverlayLayer, drawPriceLayer]);
-    const updateVisibleBars = useCallback((factor) => {
-        if (chartState.locked)
+        // Price badge
+        ctx.fillStyle = '#111927';
+        ctx.fillRect(plotArea.plotX1 + 2, priceY - 10, PRICE_SCALE_WIDTH - 4, 20);
+        ctx.fillStyle = '#e2e8f0';
+        ctx.font = '11px Inter, sans-serif';
+        ctx.textAlign = 'center';
+        ctx.textBaseline = 'middle';
+        ctx.fillText(chartState.crosshairPrice.toFixed(4).replace(/0+$/, '').replace(/\.$/, ''), plotArea.plotX1 + (PRICE_SCALE_WIDTH - 4) / 2, priceY);
+        // Time badge
+        const tick = formatTimeLabel(getCandleTime(data[index], index));
+        ctx.fillStyle = '#111927';
+        ctx.fillRect(x - 48, plotArea.pricePaneY0 + plotArea.pricePaneHeight + 4, 96, 18);
+        ctx.fillStyle = '#e2e8f0';
+        ctx.fillText(tick, x, plotArea.pricePaneY0 + plotArea.pricePaneHeight + 13);
+        const candle = data[index];
+        if (!candle)
             return;
+        const tooltipWidth = 170;
+        const tooltipHeight = 90;
+        const tooltipX = clamp$1(x - tooltipWidth - 16, plotArea.plotX0 + 8, plotArea.plotX1 - tooltipWidth - 8);
+        const tooltipY = plotArea.pricePaneY0 + 12;
+        ctx.fillStyle = 'rgba(15,15,20,0.9)';
+        drawRoundedRect$1(ctx, tooltipX, tooltipY, tooltipWidth, tooltipHeight, 8);
+        ctx.fill();
+        ctx.strokeStyle = 'rgba(255,255,255,0.08)';
+        ctx.stroke();
+        ctx.fillStyle = '#f8fafc';
+        ctx.textAlign = 'left';
+        ctx.textBaseline = 'middle';
+        ctx.font = '11px Inter, sans-serif';
+        const lines = [
+            `O ${formatPrice(candle.open, 0.01)}`,
+            `H ${formatPrice(candle.high, 0.01)}`,
+            `L ${formatPrice(candle.low, 0.01)}`,
+            `C ${formatPrice(candle.close, 0.01)}`,
+            `V ${formatVolume(candle.volume ?? 0)}`
+        ];
+        lines.forEach((line, idx) => {
+            ctx.fillText(line, tooltipX + 10, tooltipY + 16 + idx * 16);
+        });
+    }, [chartState.crosshairEnabled, chartState.crosshairIndex, chartState.crosshairPrice, data, height, plotArea, width, xMapping, yMapping]);
+    useEffect(() => {
+        drawBaseLayer();
+    }, [drawBaseLayer]);
+    useEffect(() => {
+        drawOverlayLayer();
+    }, [drawOverlayLayer]);
+    const setVisibleBars = useCallback((factor) => {
         setChartState(prev => {
-            const dataLen = Math.max(data.length, 1);
-            const minBars = Math.min(Math.max(MIN_VISIBLE_BARS, 1), dataLen);
-            const maxBars = Math.max(minBars, Math.min(MAX_VISIBLE_BARS, dataLen));
+            if (prev.locked)
+                return prev;
+            const minBars = MIN_VISIBLE_BARS;
+            const maxBars = Math.max(minBars, Math.min(MAX_VISIBLE_BARS, data.length || MIN_VISIBLE_BARS));
             const nextVisible = clamp$1(Math.round(prev.visibleBars * factor), minBars, maxBars);
             if (nextVisible === prev.visibleBars)
                 return prev;
-            const bounds = getPanBounds(nextVisible, dataLen);
-            const nextPan = clamp$1(prev.panOffsetBars, bounds.min, bounds.max);
-            return { ...prev, visibleBars: nextVisible, panOffsetBars: nextPan };
-        });
-    }, [chartState.locked, data.length]);
-    const updatePan = useCallback((deltaBars) => {
-        setChartState(prev => {
-            const bounds = getPanBounds(prev.visibleBars, data.length);
-            const nextPan = clamp$1(prev.panOffsetBars + deltaBars, bounds.min, bounds.max);
-            if (nextPan === prev.panOffsetBars)
-                return prev;
-            return { ...prev, panOffsetBars: nextPan };
+            const minPan = -Math.max(data.length - nextVisible, 0);
+            const nextPanOffset = clamp$1(prev.panOffsetBars, minPan, 0);
+            return { ...prev, visibleBars: nextVisible, panOffsetBars: nextPanOffset };
         });
     }, [data.length]);
-    const handleWheel = useCallback((event) => {
-        if (chartState.locked)
-            return;
-        event.preventDefault();
-        const factor = event.deltaY > 0 ? 1.18 : 0.85;
-        updateVisibleBars(factor);
-    }, [chartState.locked, updateVisibleBars]);
-    const updateCrosshairPosition = useCallback((clientX, clientY) => {
-        if (chartState.locked || !chartState.crosshairEnabled || !visibleData.length)
+    const updateCrosshair = useCallback((clientX, clientY) => {
+        if (chartState.locked || !chartState.crosshairEnabled || !data.length)
             return;
         const rect = chartAreaRef.current?.getBoundingClientRect();
         if (!rect)
             return;
         const localX = clientX - rect.left;
-        clientY - rect.top;
-        const relative = (localX - (plotArea.plotX0 + xMapping.offsetX)) / (xMapping.barSpacing || 1);
-        const approx = safeStart + relative;
-        const snapped = clamp$1(Math.round(approx), safeStart, safeEnd);
-        const crosshairX = xMapping.x(snapped);
-        const hoveredCandle = data[snapped];
-        const priceRange = Math.max(priceWindow.max - priceWindow.min, 1e-6);
-        const price = hoveredCandle?.close ?? hoveredCandle?.open ?? priceWindow.min;
-        const snappedY = ((priceWindow.max - price) / priceRange) * priceHeight;
-        const crosshairY = clamp$1(snappedY, 0, priceHeight);
-        setChartState(prev => ({ ...prev, crosshairX, crosshairY, hoveredIndex: snapped }));
-    }, [chartState.crosshairEnabled, chartState.locked, data, priceHeight, priceWindow.max, priceWindow.min, plotArea.plotX0, safeEnd, safeStart, visibleData.length, xMapping]);
+        const clampedX = clamp$1(localX, plotArea.plotX0, plotArea.plotX1);
+        const ratio = (clampedX - (plotArea.plotX0 + xMapping.offsetX)) / (xMapping.barSpacing || 1);
+        const index = clamp$1(Math.round(ratio) + viewport.startIndex, viewport.startIndex, viewport.endIndex);
+        const localY = clientY - rect.top;
+        const clampedY = clamp$1(localY, plotArea.pricePaneY0, plotArea.pricePaneY0 + plotArea.pricePaneHeight);
+        const priceRange = yMapping.yMax - yMapping.yMin || 1;
+        const price = yMapping.yMax - ((clampedY - plotArea.pricePaneY0) / Math.max(plotArea.pricePaneHeight, 1)) * priceRange;
+        const safePrice = Number.isFinite(price) ? price : yMapping.yMin;
+        setChartState(prev => ({ ...prev, crosshairIndex: index, crosshairPrice: safePrice }));
+    }, [chartState.crosshairEnabled, chartState.locked, data.length, plotArea, viewport.endIndex, viewport.startIndex, xMapping, yMapping]);
+    const clampPan = useCallback((pan, visible) => {
+        const minPan = -Math.max(data.length - visible, 0);
+        return clamp$1(pan, minPan, 0);
+    }, [data.length]);
+    const handleWheel = useCallback((event) => {
+        if (chartState.locked)
+            return;
+        event.preventDefault();
+        const factor = event.deltaY < 0 ? 0.9 : 1.1;
+        setVisibleBars(factor);
+    }, [chartState.locked, setVisibleBars]);
+    const isDraggingRef = useRef(false);
+    const lastXRef = useRef(0);
     const handlePointerDown = useCallback((event) => {
         if (event.button !== 0)
             return;
-        event.preventDefault();
         chartAreaRef.current?.setPointerCapture(event.pointerId);
         isDraggingRef.current = true;
-        lastPointerXRef.current = event.clientX;
-        updateCrosshairPosition(event.clientX, event.clientY);
-    }, [updateCrosshairPosition]);
+        lastXRef.current = event.clientX;
+        updateCrosshair(event.clientX, event.clientY);
+    }, [updateCrosshair]);
     const handlePointerMove = useCallback((event) => {
         if (isDraggingRef.current && !chartState.locked) {
-            const deltaX = event.clientX - lastPointerXRef.current;
-            lastPointerXRef.current = event.clientX;
-            const deltaBars = -(deltaX / (barSpacingRef.current || 1));
-            updatePan(deltaBars);
+            const deltaX = event.clientX - lastXRef.current;
+            lastXRef.current = event.clientX;
+            const deltaBars = -(deltaX / (xMapping.barSpacing || 1));
+            setChartState(prev => ({ ...prev, panOffsetBars: clampPan(prev.panOffsetBars + deltaBars, prev.visibleBars) }));
             return;
         }
-        updateCrosshairPosition(event.clientX, event.clientY);
-    }, [chartState.locked, updateCrosshairPosition, updatePan]);
+        updateCrosshair(event.clientX, event.clientY);
+    }, [chartState.locked, clampPan, updateCrosshair, xMapping.barSpacing]);
     const handlePointerUp = useCallback((event) => {
         chartAreaRef.current?.releasePointerCapture(event.pointerId);
         isDraggingRef.current = false;
     }, []);
     const handlePointerLeave = useCallback(() => {
         isDraggingRef.current = false;
+        setChartState(prev => {
+            if (!prev.crosshairEnabled)
+                return prev;
+            return { ...prev, crosshairIndex: null, crosshairPrice: null };
+        });
+    }, [setChartState]);
+    const handleButtonZoom = (direction) => {
+        setVisibleBars(direction === 'in' ? 0.9 : 1.1);
+    };
+    const handleReset = () => {
         setChartState(prev => ({
             ...prev,
-            crosshairX: chartState.crosshairEnabled ? null : prev.crosshairX,
-            crosshairY: chartState.crosshairEnabled ? null : prev.crosshairY,
-            hoveredIndex: null
-        }));
-    }, [chartState.crosshairEnabled]);
-    const handleReset = useCallback(() => {
-        setChartState(prev => ({
-            ...prev,
+            visibleBars: Math.max(defaultVisibleBars, MIN_VISIBLE_BARS),
             panOffsetBars: 0,
-            visibleBars: prev.defaultVisibleBars,
+            locked: false,
             crosshairEnabled: true,
-            crosshairX: null,
-            crosshairY: null,
-            hoveredIndex: null,
+            crosshairIndex: null,
+            crosshairPrice: null,
             autoScaleY: true,
-            showCandles: true,
-            showVolume: true,
             showGrid: true,
-            showGridMinor: true
+            showVolume: true
         }));
-    }, []);
-    const handleSnapshot = useCallback(() => {
-        const priceCanvas = priceCanvasRef.current;
-        if (!priceCanvas)
+    };
+    const handleSnapshot = () => {
+        const base = priceCanvasRef.current;
+        if (!base)
             return;
-        const overlayCanvas = overlayCanvasRef.current;
+        const overlay = overlayCanvasRef.current;
         const exportCanvas = document.createElement('canvas');
-        exportCanvas.width = priceCanvas.width;
-        exportCanvas.height = priceCanvas.height;
+        exportCanvas.width = base.width;
+        exportCanvas.height = base.height;
         const ctx = exportCanvas.getContext('2d');
         if (!ctx)
             return;
-        ctx.drawImage(priceCanvas, 0, 0);
-        if (overlayCanvas) {
-            ctx.drawImage(overlayCanvas, 0, 0);
-        }
+        ctx.drawImage(base, 0, 0);
+        if (overlay)
+            ctx.drawImage(overlay, 0, 0);
         const link = document.createElement('a');
-        link.download = 'chart-simple.png';
+        link.download = 'viainti-chart.png';
         link.href = exportCanvas.toDataURL('image/png');
         link.click();
-    }, []);
-    const derivedVisibleBars = Math.max(1, Math.min(chartState.visibleBars, data.length || chartState.visibleBars));
+    };
     return (React.createElement("div", { style: { width } },
         React.createElement("div", { style: { display: 'flex', gap: '8px', flexWrap: 'wrap', marginBottom: '12px' } },
-            React.createElement("button", { onClick: () => updateVisibleBars(0.85), disabled: chartState.locked, style: { padding: '6px 12px', borderRadius: '999px', border: '1px solid #475569', background: chartState.locked ? '#1f2937' : '#0f172a', color: '#f8fafc' } }, "Zoom +"),
-            React.createElement("button", { onClick: () => updateVisibleBars(1.18), disabled: chartState.locked, style: { padding: '6px 12px', borderRadius: '999px', border: '1px solid #475569', background: chartState.locked ? '#1f2937' : '#0f172a', color: '#f8fafc' } }, "Zoom -"),
+            React.createElement("button", { onClick: () => handleButtonZoom('in'), disabled: chartState.locked, style: { padding: '6px 12px', borderRadius: '999px', border: '1px solid #475569', background: chartState.locked ? '#1f2937' : '#0f172a', color: '#f8fafc' } }, "Zoom +"),
+            React.createElement("button", { onClick: () => handleButtonZoom('out'), disabled: chartState.locked, style: { padding: '6px 12px', borderRadius: '999px', border: '1px solid #475569', background: chartState.locked ? '#1f2937' : '#0f172a', color: '#f8fafc' } }, "Zoom -"),
             React.createElement("button", { onClick: () => setChartState(prev => ({ ...prev, locked: !prev.locked })), style: { padding: '6px 12px', borderRadius: '999px', border: chartState.locked ? '1px solid #fbbf24' : '1px solid #475569', background: chartState.locked ? '#fbbf2411' : '#0f172a', color: '#f8fafc' } }, chartState.locked ? 'Unlock' : 'Lock'),
-            React.createElement("button", { onClick: () => setChartState(prev => ({
-                    ...prev,
-                    crosshairEnabled: !prev.crosshairEnabled,
-                    crosshairX: prev.crosshairEnabled ? null : prev.crosshairX,
-                    crosshairY: prev.crosshairEnabled ? null : prev.crosshairY,
-                    hoveredIndex: prev.crosshairEnabled ? null : prev.hoveredIndex
-                })), style: { padding: '6px 12px', borderRadius: '999px', border: chartState.crosshairEnabled ? '1px solid #22d3ee' : '1px solid #475569', background: chartState.crosshairEnabled ? '#22d3ee11' : '#0f172a', color: '#f8fafc' } }, chartState.crosshairEnabled ? 'Crosshair on' : 'Crosshair off'),
+            React.createElement("button", { onClick: () => setChartState(prev => ({ ...prev, crosshairEnabled: !prev.crosshairEnabled, crosshairIndex: prev.crosshairEnabled ? null : prev.crosshairIndex, crosshairPrice: prev.crosshairEnabled ? null : prev.crosshairPrice })), style: { padding: '6px 12px', borderRadius: '999px', border: chartState.crosshairEnabled ? '1px solid #22d3ee' : '1px solid #475569', background: chartState.crosshairEnabled ? '#22d3ee11' : '#0f172a', color: '#f8fafc' } }, chartState.crosshairEnabled ? 'Crosshair on' : 'Crosshair off'),
             React.createElement("button", { onClick: handleReset, style: { padding: '6px 12px', borderRadius: '999px', border: '1px solid #475569', background: '#0f172a', color: '#f8fafc' } }, "Reset"),
             React.createElement("button", { onClick: handleSnapshot, style: { padding: '6px 12px', borderRadius: '999px', border: '1px solid #475569', background: '#0f172a', color: '#f8fafc' } }, "Camera"),
             React.createElement("button", { onClick: () => setShowMenu(prev => !prev), style: { padding: '6px 12px', borderRadius: '999px', border: '1px solid #475569', background: showMenu ? '#22c55e11' : '#0f172a', color: '#f8fafc' } }, "Menu")),
-        showMenu && (React.createElement("div", { style: { marginBottom: '12px', padding: '12px', borderRadius: '16px', border: '1px solid #1f2937', background: '#0b1120', color: '#e2e8f0', display: 'flex', flexWrap: 'wrap', gap: '10px' } }, [
-            { key: 'showCandles', label: 'Mostrar velas' },
-            { key: 'showVolume', label: 'Mostrar volumen' },
-            { key: 'showGrid', label: 'Grilla mayor' },
-            { key: 'showGridMinor', label: 'Grilla menor' },
-            { key: 'autoScaleY', label: 'Auto scale Y' }
-        ].map(toggle => (React.createElement("label", { key: toggle.key, style: { display: 'flex', alignItems: 'center', gap: '6px', fontSize: '12px' } },
-            React.createElement("input", { type: "checkbox", checked: chartState[toggle.key], onChange: () => setChartState(prev => ({ ...prev, [toggle.key]: !prev[toggle.key] })) }),
-            toggle.label))))),
-        React.createElement("div", { ref: chartAreaRef, onPointerDown: handlePointerDown, onPointerMove: handlePointerMove, onPointerUp: handlePointerUp, onPointerLeave: handlePointerLeave, onWheel: handleWheel, style: { position: 'relative', width, height, borderRadius: '20px', overflow: 'hidden', border: '1px solid #1f2937', background: '#05070d', touchAction: 'none' } },
+        showMenu && (React.createElement("div", { style: { marginBottom: '12px', padding: '12px', borderRadius: '16px', border: '1px solid #1f2937', background: '#0b1120', color: '#e2e8f0', display: 'flex', flexWrap: 'wrap', gap: '12px', fontSize: '12px' } },
+            React.createElement("label", { style: { display: 'flex', alignItems: 'center', gap: '6px' } },
+                React.createElement("input", { type: "checkbox", checked: chartState.showGrid, onChange: () => setChartState(prev => ({ ...prev, showGrid: !prev.showGrid })) }),
+                " Grid"),
+            React.createElement("label", { style: { display: 'flex', alignItems: 'center', gap: '6px' } },
+                React.createElement("input", { type: "checkbox", checked: chartState.showVolume, onChange: () => setChartState(prev => ({ ...prev, showVolume: !prev.showVolume })) }),
+                " Volumen"),
+            React.createElement("label", { style: { display: 'flex', alignItems: 'center', gap: '6px' } },
+                React.createElement("input", { type: "checkbox", checked: chartState.autoScaleY, onChange: () => setChartState(prev => ({ ...prev, autoScaleY: !prev.autoScaleY })) }),
+                " AutoScale Y"))),
+        React.createElement("div", { ref: chartAreaRef, style: { position: 'relative', width, height, borderRadius: '24px', border: '1px solid #1f2937', overflow: 'hidden', background: '#05070d', touchAction: 'none' }, onPointerDown: handlePointerDown, onPointerMove: handlePointerMove, onPointerUp: handlePointerUp, onPointerLeave: handlePointerLeave, onWheel: handleWheel },
             React.createElement("canvas", { ref: priceCanvasRef, style: { position: 'absolute', inset: 0 } }),
             React.createElement("canvas", { ref: overlayCanvasRef, style: { position: 'absolute', inset: 0, pointerEvents: 'none' } })),
-        React.createElement("p", { style: { marginTop: '8px', fontSize: '12px', color: '#94a3b8' } },
-            "Ventana: ",
-            derivedVisibleBars,
-            " velas visibles \u00B7 Pan offset ",
+        React.createElement("p", { style: { marginTop: '10px', fontSize: '12px', color: '#94a3b8' } },
+            "Bars: ",
+            chartState.visibleBars,
+            " \u00B7 Pan offset: ",
             chartState.panOffsetBars.toFixed(2),
-            " barras")));
+            " \u00B7 Viewport ",
+            viewport.startIndex,
+            " \u2192 ",
+            viewport.endIndex)));
 };
 
 var DefaultContext = {