@tranding-custom-chart/react 0.0.0-stage → 2.0.0

package/dist/ChartContainer.js

@@ -0,0 +1,631 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * @file packages/chart-react/src/ChartContainer.tsx
+ * High-performance, responsive, accessible React container wrapping CanvasChartEngine.
+ */
+import React, { useCallback, useEffect, useMemo, useRef, useState, } from 'react';
+import { DEFAULT_DARK_THEME, resolveTheme, } from '@tranding-custom-chart/core';
+import { CanvasChartEngine } from '@tranding-custom-chart/renderer-canvas';
+import { ChartContext, } from './ChartContext.js';
+import { useChartSync } from './ChartSyncGroup.js';
+export function ChartContainer({ width: initialWidth = 760, height: initialHeight = 400, padding: initialPadding = { top: 20, right: 65, bottom: 30, left: 15 }, theme: initialTheme = DEFAULT_DARK_THEME, options, plugins, chartRef, xScale = null, yScale = null, secondaryYScale = null, ariaLabel, pointCount = 0, onHoverIndexChange, onHoverPosChange, onZoom, onPan, isPanDisabled = false, onDimensionsChange, className, style, children, onClick, onDoubleClick, onPointerDown, onPointerUp, onPointerMove, onHover, onHoverChange, onDataPointClick, onSeriesClick, onLegendClick, onRangeSelect, onRangeChange, onDragStart, onDrag, onDragEnd, onVisibleRangeChange, onConfigChange, onDataChange, onDrawingChange, onDrawingCreate, onDrawingSelect, onDrawingMove, onDrawingResize, onDrawingDelete, onDrawingLockChange, onChartReady, onChartResize, onChartDestroy, onError, }) {
+    const containerRef = useRef(null);
+    const engineRef = useRef(null);
+    const isDraggingRef = useRef(false);
+    const lastXRef = useRef(0);
+    const padding = useMemo(() => {
+        if (options?.layout?.padding) {
+            return { ...initialPadding, ...options.layout.padding };
+        }
+        return initialPadding;
+    }, [options?.layout?.padding, initialPadding]);
+    const theme = useMemo(() => {
+        let resolved = options?.theme
+            ? resolveTheme(options.theme)
+            : initialTheme;
+        if (options) {
+            const gridColor = options.grid?.horzLines?.color ?? options.grid?.vertLines?.color;
+            resolved = {
+                ...resolved,
+                ...(options.layout?.background ? { background: options.layout.background } : {}),
+                ...(options.layout?.textPrimary ? { textPrimary: options.layout.textPrimary } : {}),
+                ...(options.layout?.textSecondary ? { textSecondary: options.layout.textSecondary } : {}),
+                ...(gridColor ? { gridLine: gridColor } : {}),
+                ...(options.crosshair?.color ? { crosshairLine: options.crosshair.color } : {}),
+                ...(options.series?.upColor
+                    ? { upCandle: options.series.upColor, volumeUp: options.series.upColor }
+                    : {}),
+                ...(options.series?.downColor
+                    ? { downCandle: options.series.downColor, volumeDown: options.series.downColor }
+                    : {}),
+            };
+        }
+        return resolved;
+    }, [options, initialTheme]);
+    const [bounds, setBounds] = useState({
+        width: initialWidth,
+        height: initialHeight,
+    });
+    const [hoverIndex, setHoverIndex] = useState(null);
+    const [hoverPos, setHoverPos] = useState(null);
+    const [screenReaderAnnouncement, setScreenReaderAnnouncement] = useState('');
+    const chartIdRef = useRef('chart-' + Math.random().toString(36).slice(2, 9));
+    // Universal Event Callback refs
+    const callbacksRef = useRef({
+        onClick,
+        onDoubleClick,
+        onPointerDown,
+        onPointerUp,
+        onPointerMove,
+        onHover,
+        onHoverChange,
+        onDataPointClick,
+        onSeriesClick,
+        onLegendClick,
+        onRangeSelect,
+        onRangeChange,
+        onDragStart,
+        onDrag,
+        onDragEnd,
+        onVisibleRangeChange,
+        onConfigChange,
+        onDataChange,
+        onDrawingChange,
+        onDrawingCreate,
+        onDrawingSelect,
+        onDrawingMove,
+        onDrawingResize,
+        onDrawingDelete,
+        onDrawingLockChange,
+        onChartReady,
+        onChartResize,
+        onChartDestroy,
+        onError,
+    });
+    callbacksRef.current = {
+        onClick,
+        onDoubleClick,
+        onPointerDown,
+        onPointerUp,
+        onPointerMove,
+        onHover,
+        onHoverChange,
+        onDataPointClick,
+        onSeriesClick,
+        onLegendClick,
+        onRangeSelect,
+        onRangeChange,
+        onDragStart,
+        onDrag,
+        onDragEnd,
+        onVisibleRangeChange,
+        onConfigChange,
+        onDataChange,
+        onDrawingChange,
+        onDrawingCreate,
+        onDrawingSelect,
+        onDrawingMove,
+        onDrawingResize,
+        onDrawingDelete,
+        onDrawingLockChange,
+        onChartReady,
+        onChartResize,
+        onChartDestroy,
+        onError,
+    };
+    // Keep latest refs to avoid re-instantiating the Canvas engine
+    const xScaleRef = useRef(xScale);
+    xScaleRef.current = xScale;
+    const onHoverIndexChangeRef = useRef(onHoverIndexChange);
+    onHoverIndexChangeRef.current = onHoverIndexChange;
+    const onHoverPosChangeRef = useRef(onHoverPosChange);
+    onHoverPosChangeRef.current = onHoverPosChange;
+    const onZoomRef = useRef(onZoom);
+    onZoomRef.current = onZoom;
+    const onPanRef = useRef(onPan);
+    onPanRef.current = onPan;
+    const isPanDisabledRef = useRef(isPanDisabled);
+    isPanDisabledRef.current = isPanDisabled;
+    const onDimensionsChangeRef = useRef(onDimensionsChange);
+    onDimensionsChangeRef.current = onDimensionsChange;
+    // Layer registries
+    const dataLayers = useRef(new Map());
+    const overlayLayers = useRef(new Map());
+    const hitTests = useRef(new Map());
+    const registerDataLayer = useCallback((id, drawFn) => {
+        dataLayers.current.set(id, drawFn);
+        engineRef.current?.requestRender();
+        return () => {
+            dataLayers.current.delete(id);
+            engineRef.current?.requestRender();
+        };
+    }, []);
+    const registerOverlayLayer = useCallback((id, drawFn) => {
+        overlayLayers.current.set(id, drawFn);
+        engineRef.current?.renderOverlayOnly();
+        return () => {
+            overlayLayers.current.delete(id);
+            engineRef.current?.renderOverlayOnly();
+        };
+    }, []);
+    const registerHitTest = useCallback((id, fn) => {
+        hitTests.current.set(id, fn);
+        return () => {
+            hitTests.current.delete(id);
+        };
+    }, []);
+    const registerPlugin = useCallback((plugin, pluginOpts) => {
+        engineRef.current?.registerPlugin(plugin, pluginOpts);
+        return () => {
+            engineRef.current?.unregisterPlugin(plugin.id);
+        };
+    }, []);
+    const requestRender = useCallback(() => {
+        engineRef.current?.requestRender();
+    }, []);
+    const paddingKey = `${padding.top},${padding.right},${padding.bottom},${padding.left}`;
+    // Initialize engine once per container/theme/padding lifecycle
+    useEffect(() => {
+        const container = containerRef.current;
+        if (!container)
+            return;
+        const engine = new CanvasChartEngine({
+            container,
+            width: bounds.width,
+            height: bounds.height,
+            padding,
+            theme,
+            plugins,
+            onHover: (pos) => {
+                setHoverPos(pos);
+                onHoverPosChangeRef.current?.(pos);
+                if (pos && xScaleRef.current) {
+                    const idx = xScaleRef.current.invert(pos.x);
+                    const validIndex = Math.round(idx);
+                    setHoverIndex(validIndex);
+                    onHoverIndexChangeRef.current?.(validIndex);
+                }
+                else {
+                    setHoverIndex(null);
+                    onHoverIndexChangeRef.current?.(null);
+                }
+            },
+        });
+        engine.setChartId(chartIdRef.current);
+        engine.setHitTestResolver((x, y) => {
+            for (const resolver of hitTests.current.values()) {
+                const target = resolver(x, y);
+                if (target && target.elementType !== 'background') {
+                    return target;
+                }
+            }
+            return { elementType: 'background' };
+        });
+        const unsubAll = engine.subscribe('*', (ev) => {
+            const c = callbacksRef.current;
+            switch (ev.eventType) {
+                case 'click':
+                    c.onClick?.(ev);
+                    break;
+                case 'doubleClick':
+                    c.onDoubleClick?.(ev);
+                    break;
+                case 'pointerDown':
+                    c.onPointerDown?.(ev);
+                    break;
+                case 'pointerUp':
+                    c.onPointerUp?.(ev);
+                    break;
+                case 'pointerMove':
+                    c.onPointerMove?.(ev);
+                    break;
+                case 'hover':
+                    c.onHover?.(ev);
+                    break;
+                case 'hoverChange':
+                    c.onHoverChange?.(ev);
+                    break;
+                case 'dataPointClick':
+                    c.onDataPointClick?.(ev);
+                    break;
+                case 'seriesClick':
+                    c.onSeriesClick?.(ev);
+                    break;
+                case 'legendClick':
+                    c.onLegendClick?.(ev);
+                    break;
+                case 'rangeSelect':
+                    c.onRangeSelect?.(ev);
+                    c.onRangeChange?.(ev);
+                    break;
+                case 'rangeChange':
+                    c.onRangeChange?.(ev);
+                    break;
+                case 'dragStart':
+                    c.onDragStart?.(ev);
+                    break;
+                case 'drag':
+                    c.onDrag?.(ev);
+                    c.onRangeChange?.(ev);
+                    break;
+                case 'dragEnd':
+                    c.onDragEnd?.(ev);
+                    break;
+                case 'zoom':
+                    if (typeof c.onZoom === 'function') {
+                        c.onZoom(ev);
+                    }
+                    break;
+                case 'visibleRangeChange':
+                    c.onVisibleRangeChange?.(ev);
+                    break;
+                case 'configChange':
+                    c.onConfigChange?.(ev);
+                    break;
+                case 'dataChange':
+                    c.onDataChange?.(ev);
+                    break;
+                case 'drawingChange':
+                    c.onDrawingChange?.(ev);
+                    break;
+                case 'drawingCreate':
+                    c.onDrawingCreate?.(ev);
+                    c.onDrawingChange?.(ev);
+                    break;
+                case 'drawingSelect':
+                    c.onDrawingSelect?.(ev);
+                    break;
+                case 'drawingMove':
+                    c.onDrawingMove?.(ev);
+                    c.onDrawingChange?.(ev);
+                    break;
+                case 'drawingResize':
+                    c.onDrawingResize?.(ev);
+                    c.onDrawingChange?.(ev);
+                    break;
+                case 'drawingDelete':
+                    c.onDrawingDelete?.(ev);
+                    c.onDrawingChange?.(ev);
+                    break;
+                case 'drawingLockChange':
+                    c.onDrawingLockChange?.(ev);
+                    c.onDrawingChange?.(ev);
+                    break;
+                case 'chartReady':
+                    c.onChartReady?.(ev);
+                    break;
+                case 'chartResize':
+                    c.onChartResize?.(ev);
+                    break;
+                case 'chartDestroy':
+                    c.onChartDestroy?.(ev);
+                    break;
+                case 'error':
+                    c.onError?.(ev);
+                    break;
+            }
+        });
+        engine.setDrawCallbacks((ctx, b, p, dpr) => {
+            dataLayers.current.forEach((fn) => fn(ctx, b, p, dpr));
+        }, (ctx, b, p, dpr) => {
+            overlayLayers.current.forEach((fn) => fn(ctx, b, p, dpr));
+        });
+        engineRef.current = engine;
+        return () => {
+            unsubAll();
+            engine.dispose();
+            engineRef.current = null;
+        };
+    }, [theme, paddingKey]);
+    // Synchronize scales to engine for plugins
+    useEffect(() => {
+        engineRef.current?.setScales(xScale, yScale);
+    }, [xScale, yScale]);
+    // Synchronize bounds changes into the engine without reconstructing
+    useEffect(() => {
+        if (engineRef.current && bounds.width > 0 && bounds.height > 0) {
+            engineRef.current.resize(bounds.width, bounds.height);
+            onDimensionsChangeRef.current?.(bounds);
+        }
+    }, [bounds]);
+    // Synchronize dynamic options updates into the engine without reconstructing
+    useEffect(() => {
+        if (engineRef.current && options) {
+            engineRef.current.applyOptions(options);
+        }
+    }, [options]);
+    // Imperative handle binding for chartRef
+    useEffect(() => {
+        if (!chartRef)
+            return;
+        const handle = {
+            applyOptions: (opt) => engineRef.current?.applyOptions(opt),
+            resize: (w, h) => engineRef.current?.resize(w, h),
+            requestRender: () => engineRef.current?.requestRender(),
+            getEngine: () => engineRef.current,
+            subscribe: (evType, handler) => engineRef.current?.subscribe(evType, handler) ?? (() => { }),
+            emit: (ev) => engineRef.current?.emit(ev),
+        };
+        if (typeof chartRef === 'function') {
+            chartRef(handle);
+        }
+        else if ('current' in chartRef) {
+            chartRef.current = handle;
+        }
+        return () => {
+            if (typeof chartRef === 'function') {
+                chartRef(null);
+            }
+            else if ('current' in chartRef) {
+                chartRef.current = null;
+            }
+        };
+    }, [chartRef]);
+    // Update bounds when width prop changes
+    useEffect(() => {
+        if (typeof initialWidth === 'number' && initialWidth > 0) {
+            setBounds((prev) => (prev.width === initialWidth ? prev : { ...prev, width: initialWidth }));
+        }
+    }, [initialWidth]);
+    // Update bounds when height prop changes
+    useEffect(() => {
+        if (typeof initialHeight === 'number' && initialHeight > 0) {
+            setBounds((prev) => (prev.height === initialHeight ? prev : { ...prev, height: initialHeight }));
+        }
+    }, [initialHeight]);
+    // Responsive observation
+    useEffect(() => {
+        const container = containerRef.current;
+        if (!container || typeof ResizeObserver === 'undefined')
+            return;
+        const observer = new ResizeObserver((entries) => {
+            const entry = entries[0];
+            if (!entry)
+                return;
+            const { width: measuredWidth, height: measuredHeight } = entry.contentRect;
+            if (measuredWidth > 0) {
+                const nextW = Math.floor(measuredWidth);
+                const nextH = typeof initialHeight === 'number' && initialHeight > 0
+                    ? initialHeight
+                    : (measuredHeight > 0 ? Math.floor(measuredHeight) : bounds.height);
+                setBounds((prev) => {
+                    if (prev.width === nextW && prev.height === nextH)
+                        return prev;
+                    return { width: nextW, height: nextH };
+                });
+            }
+        });
+        observer.observe(container);
+        return () => observer.disconnect();
+    }, [initialHeight, bounds.height]);
+    // Keyboard navigation for WCAG 2.2 AA
+    const handleKeyDown = (e) => {
+        if (pointCount <= 0)
+            return;
+        let nextIndex = null;
+        const current = hoverIndex ?? pointCount - 1;
+        switch (e.key) {
+            case '+':
+            case '=':
+                if (onZoomRef.current) {
+                    e.preventDefault();
+                    onZoomRef.current(1.2, hoverIndex);
+                    return;
+                }
+                break;
+            case '-':
+            case '_':
+                if (onZoomRef.current) {
+                    e.preventDefault();
+                    onZoomRef.current(0.8, hoverIndex);
+                    return;
+                }
+                break;
+            case '0':
+                if (onZoomRef.current) {
+                    e.preventDefault();
+                    onZoomRef.current(0, null); // 0 factor signals reset
+                    return;
+                }
+                break;
+            case 'ArrowLeft':
+                nextIndex = Math.max(0, current - 1);
+                break;
+            case 'ArrowRight':
+                nextIndex = Math.min(pointCount - 1, current + 1);
+                break;
+            case 'Home':
+                nextIndex = 0;
+                break;
+            case 'End':
+                nextIndex = pointCount - 1;
+                break;
+            case 'PageUp':
+                nextIndex = Math.max(0, current - 10);
+                break;
+            case 'PageDown':
+                nextIndex = Math.min(pointCount - 1, current + 10);
+                break;
+            default:
+                return;
+        }
+        e.preventDefault();
+        setHoverIndex(nextIndex);
+        onHoverIndexChange?.(nextIndex);
+        if (nextIndex !== null) {
+            if (xScale) {
+                const x = xScale.scale(nextIndex);
+                const y = bounds.height / 2;
+                setHoverPos({ x, y });
+                onHoverPosChange?.({ x, y });
+            }
+            setScreenReaderAnnouncement(`Selected point ${nextIndex + 1} of ${pointCount}`);
+        }
+        engineRef.current?.renderOverlayOnly();
+    };
+    // Non-passive wheel and touch listeners to allow preventDefault without browser intervention
+    useEffect(() => {
+        const container = containerRef.current;
+        if (!container)
+            return;
+        const handleWheel = (e) => {
+            if (!onZoomRef.current)
+                return;
+            e.preventDefault();
+            e.stopPropagation();
+            const factor = e.deltaY < 0 ? 1.15 : 0.85;
+            let focalIndex = null;
+            if (xScaleRef.current) {
+                const rect = container.getBoundingClientRect();
+                const mouseX = e.clientX - rect.left;
+                focalIndex = xScaleRef.current.invert(mouseX);
+            }
+            onZoomRef.current(factor, focalIndex);
+        };
+        let initialPinchDist = null;
+        let lastTouchX = 0;
+        const handleTouchStart = (e) => {
+            if (e.touches.length === 2) {
+                const t1 = e.touches[0];
+                const t2 = e.touches[1];
+                initialPinchDist = Math.hypot(t2.clientX - t1.clientX, t2.clientY - t1.clientY);
+            }
+            else if (e.touches.length === 1 && onPanRef.current && !isPanDisabledRef.current) {
+                lastTouchX = e.touches[0].clientX;
+            }
+        };
+        const handleTouchMove = (e) => {
+            if (e.touches.length === 2 && initialPinchDist !== null && onZoomRef.current) {
+                e.preventDefault();
+                const t1 = e.touches[0];
+                const t2 = e.touches[1];
+                const dist = Math.hypot(t2.clientX - t1.clientX, t2.clientY - t1.clientY);
+                const ratio = dist / initialPinchDist;
+                if (Math.abs(ratio - 1) > 0.04) {
+                    const factor = ratio > 1 ? 1.08 : 0.92;
+                    const midX = (t1.clientX + t2.clientX) / 2;
+                    let focalIndex = null;
+                    if (xScaleRef.current) {
+                        const rect = container.getBoundingClientRect();
+                        focalIndex = xScaleRef.current.invert(midX - rect.left);
+                    }
+                    onZoomRef.current(factor, focalIndex);
+                    initialPinchDist = dist;
+                }
+            }
+            else if (e.touches.length === 1 && onPanRef.current && !isPanDisabledRef.current) {
+                const currentX = e.touches[0].clientX;
+                const delta = currentX - lastTouchX;
+                lastTouchX = currentX;
+                if (delta !== 0) {
+                    onPanRef.current(delta);
+                }
+            }
+        };
+        const handleTouchEnd = () => {
+            initialPinchDist = null;
+        };
+        container.addEventListener('wheel', handleWheel, { passive: false });
+        container.addEventListener('touchstart', handleTouchStart, { passive: true });
+        container.addEventListener('touchmove', handleTouchMove, { passive: false });
+        container.addEventListener('touchend', handleTouchEnd, { passive: true });
+        return () => {
+            container.removeEventListener('wheel', handleWheel);
+            container.removeEventListener('touchstart', handleTouchStart);
+            container.removeEventListener('touchmove', handleTouchMove);
+            container.removeEventListener('touchend', handleTouchEnd);
+        };
+    }, []);
+    const handlePointerDown = (e) => {
+        containerRef.current?.focus();
+        if (!onPanRef.current || isPanDisabledRef.current || e.button !== 0)
+            return;
+        isDraggingRef.current = true;
+        lastXRef.current = e.clientX;
+        try {
+            e.currentTarget.setPointerCapture(e.pointerId);
+        }
+        catch {
+            // Ignore in environments where setPointerCapture is mocked
+        }
+    };
+    const handlePointerMove = (e) => {
+        if (isDraggingRef.current && onPanRef.current) {
+            const delta = e.clientX - lastXRef.current;
+            lastXRef.current = e.clientX;
+            if (delta !== 0) {
+                onPanRef.current(delta);
+            }
+        }
+    };
+    const handlePointerUp = (e) => {
+        if (isDraggingRef.current) {
+            isDraggingRef.current = false;
+            try {
+                e.currentTarget.releasePointerCapture(e.pointerId);
+            }
+            catch {
+                // Ignore
+            }
+        }
+    };
+    const sync = useChartSync();
+    const syncHoverIndex = sync?.syncHoverIndex ?? null;
+    useEffect(() => {
+        if (syncHoverIndex !== undefined) {
+            engineRef.current?.requestRender();
+        }
+    }, [syncHoverIndex]);
+    const contextValue = useMemo(() => ({
+        chartId: engineRef.current?.getChartId() ?? chartIdRef.current,
+        bounds,
+        padding,
+        theme,
+        dpr: engineRef.current?.getDpr() ?? 1,
+        xScale,
+        yScale,
+        secondaryYScale,
+        hoverIndex,
+        syncHoverIndex,
+        hoverPos,
+        registerDataLayer,
+        registerOverlayLayer,
+        registerHitTest,
+        registerPlugin,
+        requestRender,
+        getEngine: () => engineRef.current,
+        subscribe: (evType, handler) => engineRef.current?.subscribe(evType, handler) ?? (() => { }),
+        emit: (ev) => engineRef.current?.emit(ev),
+    }), [
+        bounds,
+        padding,
+        theme,
+        xScale,
+        yScale,
+        secondaryYScale,
+        hoverIndex,
+        syncHoverIndex,
+        hoverPos,
+        registerDataLayer,
+        registerOverlayLayer,
+        registerHitTest,
+        registerPlugin,
+        requestRender,
+    ]);
+    return (_jsx(ChartContext.Provider, { value: contextValue, children: _jsxs("div", { ref: containerRef, role: "region", "aria-label": ariaLabel, tabIndex: 0, className: className, onKeyDown: handleKeyDown, onPointerDown: handlePointerDown, onPointerMove: handlePointerMove, onPointerUp: handlePointerUp, style: {
+                position: 'relative',
+                width: '100%',
+                height: `${bounds.height}px`,
+                outline: 'none',
+                userSelect: 'none',
+                cursor: onPan && !isPanDisabled ? (isDraggingRef.current ? 'grabbing' : 'default') : 'default',
+                ...style,
+            }, children: [children, _jsx("div", { "aria-live": "polite", style: {
+                        position: 'absolute',
+                        width: '1px',
+                        height: '1px',
+                        margin: '-1px',
+                        overflow: 'hidden',
+                        clip: 'rect(0, 0, 0, 0)',
+                    }, children: screenReaderAnnouncement })] }) }));
+}

package/dist/ChartContext.d.ts

@@ -0,0 +1,36 @@
+/**
+ * @file packages/chart-react/src/ChartContext.ts
+ * React Context providing coordinate scales, dimensions, theme, and layer registry.
+ */
+import React from 'react';
+import type { ChartPlugin, ChartTheme, Dimension, Padding, Scale, ChartEvent, ChartEventHandler, ChartEventType, ChartElementTarget, Unsubscribe } from '@tranding-custom-chart/core';
+import type { CanvasChartEngine } from '@tranding-custom-chart/renderer-canvas';
+export type LayerDrawFn = (ctx: CanvasRenderingContext2D, bounds: Dimension, padding: Padding, dpr: number) => void;
+export type HitTestFn = (x: number, y: number) => ChartElementTarget | null;
+export interface ChartContextValue {
+    readonly chartId: string;
+    readonly bounds: Dimension;
+    readonly padding: Padding;
+    readonly theme: ChartTheme;
+    readonly dpr: number;
+    readonly xScale: Scale<number> | null;
+    readonly yScale: Scale<number> | null;
+    readonly secondaryYScale?: Scale<number> | null | undefined;
+    readonly hoverIndex: number | null;
+    readonly syncHoverIndex?: number | null | undefined;
+    readonly hoverPos: {
+        readonly x: number;
+        readonly y: number;
+    } | null;
+    readonly registerDataLayer: (id: string, drawFn: LayerDrawFn) => () => void;
+    readonly registerOverlayLayer: (id: string, drawFn: LayerDrawFn) => () => void;
+    readonly registerHitTest: (id: string, hitTestFn: HitTestFn) => () => void;
+    readonly registerPlugin: <O>(plugin: ChartPlugin<O>, options?: O) => () => void;
+    readonly requestRender: () => void;
+    readonly getEngine: () => CanvasChartEngine | null;
+    readonly subscribe: <T = unknown>(eventType: ChartEventType | '*', handler: ChartEventHandler<T>) => Unsubscribe;
+    readonly emit: <T = unknown>(event: ChartEvent<T>) => void;
+}
+export declare const ChartContext: React.Context<ChartContextValue | null>;
+export declare function useChartContext(): ChartContextValue;
+//# sourceMappingURL=ChartContext.d.ts.map

package/dist/ChartContext.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChartContext.d.ts","sourceRoot":"","sources":["../src/ChartContext.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,KAAoC,MAAM,OAAO,CAAC;AACzD,OAAO,KAAK,EACV,WAAW,EACX,UAAU,EACV,SAAS,EACT,OAAO,EACP,KAAK,EACL,UAAU,EACV,iBAAiB,EACjB,cAAc,EACd,kBAAkB,EAClB,WAAW,EACZ,MAAM,6BAA6B,CAAC;AACrC,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,wCAAwC,CAAC;AAEhF,MAAM,MAAM,WAAW,GAAG,CACxB,GAAG,EAAE,wBAAwB,EAC7B,MAAM,EAAE,SAAS,EACjB,OAAO,EAAE,OAAO,EAChB,GAAG,EAAE,MAAM,KACR,IAAI,CAAC;AAEV,MAAM,MAAM,SAAS,GAAG,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,KAAK,kBAAkB,GAAG,IAAI,CAAC;AAE5E,MAAM,WAAW,iBAAiB;IAChC,QAAQ,CAAC,OAAO,EAAE,MAAM,CAAC;IACzB,QAAQ,CAAC,MAAM,EAAE,SAAS,CAAC;IAC3B,QAAQ,CAAC,OAAO,EAAE,OAAO,CAAC;IAC1B,QAAQ,CAAC,KAAK,EAAE,UAAU,CAAC;IAC3B,QAAQ,CAAC,GAAG,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,MAAM,EAAE,KAAK,CAAC,MAAM,CAAC,GAAG,IAAI,CAAC;IACtC,QAAQ,CAAC,MAAM,EAAE,KAAK,CAAC,MAAM,CAAC,GAAG,IAAI,CAAC;IACtC,QAAQ,CAAC,eAAe,CAAC,EAAE,KAAK,CAAC,MAAM,CAAC,GAAG,IAAI,GAAG,SAAS,CAAC;IAC5D,QAAQ,CAAC,UAAU,EAAE,MAAM,GAAG,IAAI,CAAC;IACnC,QAAQ,CAAC,cAAc,CAAC,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,CAAC;IACpD,QAAQ,CAAC,QAAQ,EAAE;QAAE,QAAQ,CAAC,CAAC,EAAE,MAAM,CAAC;QAAC,QAAQ,CAAC,CAAC,EAAE,MAAM,CAAA;KAAE,GAAG,IAAI,CAAC;IACrE,QAAQ,CAAC,iBAAiB,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,MAAM,EAAE,WAAW,KAAK,MAAM,IAAI,CAAC;IAC5E,QAAQ,CAAC,oBAAoB,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,MAAM,EAAE,WAAW,KAAK,MAAM,IAAI,CAAC;IAC/E,QAAQ,CAAC,eAAe,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,SAAS,EAAE,SAAS,KAAK,MAAM,IAAI,CAAC;IAC3E,QAAQ,CAAC,cAAc,EAAE,CAAC,CAAC,EAAE,MAAM,EAAE,WAAW,CAAC,CAAC,CAAC,EAAE,OAAO,CAAC,EAAE,CAAC,KAAK,MAAM,IAAI,CAAC;IAChF,QAAQ,CAAC,aAAa,EAAE,MAAM,IAAI,CAAC;IACnC,QAAQ,CAAC,SAAS,EAAE,MAAM,iBAAiB,GAAG,IAAI,CAAC;IACnD,QAAQ,CAAC,SAAS,EAAE,CAAC,CAAC,GAAG,OAAO,EAAE,SAAS,EAAE,cAAc,GAAG,GAAG,EAAE,OAAO,EAAE,iBAAiB,CAAC,CAAC,CAAC,KAAK,WAAW,CAAC;IACjH,QAAQ,CAAC,IAAI,EAAE,CAAC,CAAC,GAAG,OAAO,EAAE,KAAK,EAAE,UAAU,CAAC,CAAC,CAAC,KAAK,IAAI,CAAC;CAC5D;AAED,eAAO,MAAM,YAAY,yCAAgD,CAAC;AAE1E,wBAAgB,eAAe,IAAI,iBAAiB,CAMnD"}

package/dist/ChartContext.js

@@ -0,0 +1,13 @@
+/**
+ * @file packages/chart-react/src/ChartContext.ts
+ * React Context providing coordinate scales, dimensions, theme, and layer registry.
+ */
+import React, { createContext, useContext } from 'react';
+export const ChartContext = createContext(null);
+export function useChartContext() {
+    const ctx = useContext(ChartContext);
+    if (!ctx) {
+        throw new Error('useChartContext must be used within a <ChartContainer>');
+    }
+    return ctx;
+}