@quantlife/qlchart 0.0.1

package/src/hooks/useDrawingModule.ts

@@ -0,0 +1,475 @@
+import { useEffect, useState, useCallback, useRef } from 'react';
+import { DrawingAdapter } from '../plugins/drawing/DrawingAdapter.js';
+import { DrawingPersistence } from '../plugins/drawing/DrawingPersistence.js';
+import { drawingSharedService } from '../plugins/drawing/DrawingSharedService.js';
+import { useDrawingStore } from '../store/useDrawingStore.js';
+import { useChartStore } from '../store/useChartStore.js';
+import { usePanelRegistry } from '../store/usePanelRegistry.js';
+import { useQLChartConfig } from '../components/QLChartProvider.js';
+import { dashToLineStyle } from '../plugins/drawing/lineStyleMap.js';
+import { extractAlpha, rgbaToHex } from '../plugins/drawing/colorUtils.js';
+import type { ChartManager } from '../core/ChartManager.js';
+import type { SeriesManager } from '../core/SeriesManager.js';
+import type { IndicatorRenderer } from '../plugins/indicators/IndicatorRenderer.js';
+import type { IChartApi } from 'lightweight-charts';
+import type { DrawingToolType, DrawingStyleConfig, FibLevelItem } from '../types/index.js';
+
+export interface UseDrawingModuleOptions {
+  chartManager: ChartManager | null;
+  seriesManager: SeriesManager | null;
+  containerRef: React.RefObject<HTMLElement | null>;
+  pairId: string;
+  product: string;
+  period: string;
+  panelId?: string;
+  panelIndex?: number;
+  onChartCreated?: (chart: IChartApi | null, index: number) => void;
+  dataLoaded: boolean;
+  /** ★ V4: 指标渲染器 ref（用于副图绘图 pane 切换，实时读取避免闭包捕获） */
+  indicatorRendererRef?: React.RefObject<IndicatorRenderer | null>;
+}
+
+export interface UseDrawingModuleReturn {
+  drawingAdapterRef: React.RefObject<DrawingAdapter | null>;
+  recentTools: DrawingToolType[];
+  handleDrawingStyleChange: (id: string, style: Partial<DrawingStyleConfig>) => void;
+  handleDeleteDrawing: () => void;
+  handleContextMenuToolSelect: (tool: DrawingToolType) => void;
+}
+
+export function useDrawingModule(options: UseDrawingModuleOptions): UseDrawingModuleReturn {
+  const {
+    chartManager,
+    seriesManager,
+    containerRef,
+    pairId,
+    product,
+    period,
+    panelId,
+    panelIndex,
+    onChartCreated,
+    dataLoaded,
+    indicatorRendererRef,
+  } = options;
+
+  const config = useQLChartConfig();
+
+  // Store subscriptions
+  const activeTool = useDrawingStore((s) => s.activeTool);
+  const setActiveTool = useDrawingStore((s) => s.setActiveTool);
+  const setDrawingCount = useDrawingStore((s) => s.setDrawingCount);
+  const selectDrawing = useDrawingStore((s) => s.selectDrawing);
+  const magnetEnabled = useDrawingStore((s) => s.magnetEnabled);
+  const selectedDrawingId = useDrawingStore((s) => s.selectedDrawingId);
+  // Bug2修复：从 store 获取新状态
+  const setIsPropertyPanelPinned = useDrawingStore((s) => s.setIsPropertyPanelPinned);
+  const setShowPropertyPanel = useDrawingStore((s) => s.setShowPropertyPanel);
+
+  // Local state
+  const drawingAdapterRef = useRef<DrawingAdapter | null>(null);
+  const persistenceRef = useRef<DrawingPersistence | null>(null);
+  const [recentTools, setRecentTools] = useState<DrawingToolType[]>([]);
+
+  // ★ F2: retry 机制 — mainSeries 未就绪时延迟重试
+  const [retryTick, setRetryTick] = useState(0);
+  const retryCountRef = useRef(0);
+  const MAX_RETRY = 5;
+
+  // 共享服务相关refs
+  const isLocalUpdateRef = useRef(false);
+  const lastSharedVersionRef = useRef(0);
+
+  // panelId fallback：确保单面板模式（未传 panelId）也有可用标识
+  const currentPanelId = panelId ?? `panel_${panelIndex ?? 0}`;
+
+  // ── Effect A: DrawingAdapter 创建/销毁 ──
+  // ★ Bug2修复：只依赖 chartManager 和 seriesManager，不依赖 dataLoaded
+  // 这样周期切换时 dataLoaded 从 true→false→true 不会触发 cleanup
+  useEffect(() => {
+    if (!chartManager || !seriesManager) return;
+
+    const chart = chartManager.getChart();
+    if (!chart) return;
+
+    const container = containerRef.current;
+    if (!container) return;
+
+    console.log('[useDrawingModule] Effect A: creating DrawingAdapter', {
+      panelId: currentPanelId,
+      pairId,
+      product,
+    });
+
+    const adapter = new DrawingAdapter();
+
+    // 创建持久化实例
+    const persistence = new DrawingPersistence({
+      pairId,
+      product,
+      period,
+      apiBaseUrl: config.apiBaseUrl,
+    });
+    persistenceRef.current = persistence;
+
+    // 注册到共享Service
+    const sharedInstance = drawingSharedService.register(
+      currentPanelId,
+      pairId,
+      product,
+      persistence,
+      // onUpdate 回调：其他面板触发更新时调用
+      () => {
+        if (isLocalUpdateRef.current) return;
+        const sharedDrawings = drawingSharedService.getDrawings(pairId, product);
+        // ★ V3修复：双保险 — 先清除再导入（防止library追加模式）
+        adapter.clearAll();
+        adapter.importDrawings(sharedDrawings);
+      },
+    );
+
+    // 初始化：如果共享实例已有数据，先使用共享数据；否则从持久化加载
+    if (sharedInstance.drawings.length > 0) {
+      adapter.importDrawings(sharedInstance.drawings);
+    } else {
+      persistence.load().then(saved => {
+        if (saved.length > 0) {
+          adapter.importDrawings(saved);
+          drawingSharedService.updateDrawings(pairId, product, saved);
+        }
+      });
+    }
+
+    lastSharedVersionRef.current = sharedInstance.version;
+
+    // 事件回调
+    adapter.onDrawingCreated((drawing) => {
+      // Bug1修复：新建的测量工具也需要 patch
+      if (drawing.type === 'date-price-range') {
+        adapter.patchMeasureDrawingPublic(drawing);
+      }
+      setDrawingCount(adapter.getAllDrawings().length);
+      isLocalUpdateRef.current = true;
+      drawingSharedService.updateDrawings(pairId, product, adapter.exportDrawings());
+      isLocalUpdateRef.current = false;
+    });
+    adapter.onDrawingSelected((drawing) => {
+      if (drawing) {
+        // Bug5修复：rgba fillColor 拆分为 hex + opacity
+        const rawFillColor = drawing.style.fillColor ?? '#2962ff';
+        const extractedAlpha = extractAlpha(rawFillColor);
+
+        // ★ Req3：读取斐波那契当前级别
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        const fibOptions = (drawing as any).fibOptions;
+        const fibLevelsData = fibOptions?.levels as number[] | undefined;
+
+        selectDrawing(drawing.id, {
+          lineColor: drawing.style.lineColor,
+          lineWidth: drawing.style.lineWidth,
+          lineDash: drawing.style.lineDash,
+          // Bug3修复：从 lineDash 反推 lineStyle
+          lineStyle: dashToLineStyle(drawing.style.lineDash),
+          // Bug5修复：rgba 拆分为 hex + opacity
+          fillColor: rgbaToHex(rawFillColor),
+          fillOpacity: extractedAlpha ?? drawing.style.fillOpacity ?? 0.2,
+          showLabels: drawing.style.showLabels,
+          labelFont: drawing.style.labelFont,
+          labelColor: drawing.style.labelColor,
+          // ★ Req3：附加斐波那契级别
+          fibLevels: fibLevelsData ? JSON.stringify(
+            fibLevelsData.map((v: number) => ({
+              value: v,
+              label: `${(v * 100).toFixed(1)}%`,
+              visible: true,
+            }))
+          ) : undefined,
+        }, drawing.type);
+        // Bug2修复：单击选中不自动显示面板（由 selectDrawing 内部根据 isPropertyPanelPinned 决定）
+      } else {
+        selectDrawing(null);
+      }
+    });
+
+    // Bug2修复：双击显示属性面板
+    adapter.onDrawingDoubleClick((drawing) => {
+      if (drawing) {
+        const rawFillColor = drawing.style.fillColor ?? '#2962ff';
+        const extractedAlpha = extractAlpha(rawFillColor);
+
+        // ★ Req3：读取斐波那契当前级别
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        const fibOptions = (drawing as any).fibOptions;
+        const fibLevelsData = fibOptions?.levels as number[] | undefined;
+
+        selectDrawing(drawing.id, {
+          lineColor: drawing.style.lineColor,
+          lineWidth: drawing.style.lineWidth,
+          lineDash: drawing.style.lineDash,
+          lineStyle: dashToLineStyle(drawing.style.lineDash),
+          fillColor: rgbaToHex(rawFillColor),
+          fillOpacity: extractedAlpha ?? drawing.style.fillOpacity ?? 0.2,
+          showLabels: drawing.style.showLabels,
+          labelFont: drawing.style.labelFont,
+          labelColor: drawing.style.labelColor,
+          // ★ Req3：附加斐波那契级别
+          fibLevels: fibLevelsData ? JSON.stringify(
+            fibLevelsData.map((v: number) => ({
+              value: v,
+              label: `${(v * 100).toFixed(1)}%`,
+              visible: true,
+            }))
+          ) : undefined,
+        }, drawing.type);
+        setIsPropertyPanelPinned(true);
+        setShowPropertyPanel(true);
+      } else {
+        setIsPropertyPanelPinned(false);
+        setShowPropertyPanel(false);
+      }
+    });
+
+    // ★ Bug1修复：注册 onDrawingModified 回调 — 拖拽绘图本体时同步到其他面板
+    adapter.onDrawingModified((drawing) => {
+      // Bug1修复：新建的测量工具也需要 patch
+      if (drawing.type === 'date-price-range') {
+        adapter.patchMeasureDrawingPublic(drawing);
+      }
+      setDrawingCount(adapter.getAllDrawings().length);
+      isLocalUpdateRef.current = true;
+      drawingSharedService.updateDrawings(pairId, product, adapter.exportDrawings());
+      isLocalUpdateRef.current = false;
+    });
+
+    adapter.onDrawingRemoved(() => {
+      setDrawingCount(adapter.getAllDrawings().length);
+      selectDrawing(null);
+      isLocalUpdateRef.current = true;
+      drawingSharedService.updateDrawings(pairId, product, adapter.exportDrawings());
+      isLocalUpdateRef.current = false;
+    });
+    adapter.onToolChanged((tool) => {
+      if (!tool) {
+        const currentActivePanel = useChartStore.getState().activePanelId;
+        const isActive = currentActivePanel === currentPanelId;
+        if (isActive) setActiveTool('cursor');
+      }
+    });
+
+    // ★ V5 需求1: 注册 pane 切换回调 — 同步注册映射 + 通知 store
+    adapter.onPaneSwitchNeeded((paneIndex: number) => {
+      const renderer = indicatorRendererRef?.current;
+      if (!renderer) {
+        console.warn('[useDrawingModule] pane switch: indicatorRenderer not ready');
+        return;
+      }
+      const paneSeries = renderer.getPaneSeries(paneIndex);
+      if (paneSeries) {
+        // 注册到 adapter 内部映射，下次点击可同步切换
+        adapter.registerPaneSeries(paneIndex, paneSeries);
+        useDrawingStore.getState().setCurrentPaneIndex(paneIndex);
+      } else {
+        // pane 0 是主图，总是可用
+        if (paneIndex === 0) {
+          useDrawingStore.getState().setCurrentPaneIndex(0);
+        } else {
+          console.warn(`[useDrawingModule] no series registered for pane ${paneIndex}`);
+        }
+      }
+    });
+
+    // ★ V5 需求1: 初始化 — 注册主图 series（pane 0）
+    adapter.registerPaneSeries(0, seriesManager.getFirstMainSeries() as any);
+
+    drawingAdapterRef.current = adapter;
+
+    // 注册到 PanelRegistry（使用 currentPanelId，确保单面板模式也注册）
+    usePanelRegistry.getState().register(currentPanelId, {
+      panelId: currentPanelId,
+      chartManager: chartManager!,
+      seriesManager: seriesManager!,
+      drawingAdapter: adapter,
+      chart,
+      container: containerRef.current!,
+    });
+
+    // 通知 Layout chart 实例已创建（用于光标同步）
+    if (onChartCreated && panelIndex !== undefined) {
+      onChartCreated(chart, panelIndex);
+    }
+
+    return () => {
+      console.log('[useDrawingModule] Effect A cleanup: destroying DrawingAdapter', {
+        panelId: currentPanelId,
+      });
+      // 从共享Service注销
+      drawingSharedService.unregister(currentPanelId, pairId, product);
+      // 注销 PanelRegistry
+      usePanelRegistry.getState().unregister(currentPanelId);
+      // 通知 Layout chart 实例销毁
+      if (onChartCreated && panelIndex !== undefined) {
+        onChartCreated(null, panelIndex);
+      }
+      persistence.dispose();
+      adapter.dispose();
+      drawingAdapterRef.current = null;
+      persistenceRef.current = null;
+    };
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [chartManager, seriesManager]);
+
+  // ── Effect B: dataLoaded/retry 变化时只更新 series 引用 ──
+  // ★ Bug2修复：周期切换时 dataLoaded true→false→true 只触发此 effect
+  // 调用 adapter.updateSeries 或首次 attach，不销毁 adapter
+  useEffect(() => {
+    if (!dataLoaded || !drawingAdapterRef.current || !seriesManager || !chartManager) return;
+
+    const mainSeries = seriesManager.getFirstMainSeries();
+    if (!mainSeries) {
+      // ★ F2: series 尚未准备好，延迟重试而非静默跳过
+      if (retryCountRef.current < MAX_RETRY) {
+        retryCountRef.current++;
+        const delay = 50 * retryCountRef.current;
+        console.warn(`[useDrawingModule] Effect B: no mainSeries, retry ${retryCountRef.current}/${MAX_RETRY} in ${delay}ms`);
+        const retryTimer = setTimeout(() => setRetryTick(t => t + 1), delay);
+        return () => clearTimeout(retryTimer);
+      } else {
+        console.error('[useDrawingModule] Effect B: Max retry exceeded');
+        retryCountRef.current = 0;
+        return;
+      }
+    }
+
+    // ★ F2: 成功路径，重置 retry 计数
+    retryCountRef.current = 0;
+
+    const adapter = drawingAdapterRef.current;
+    const chart = chartManager.getChart();
+    const container = containerRef.current;
+    if (!chart || !container) return;
+
+    if (!adapter.isAttached()) {
+      // 首次 attach
+      console.log('[useDrawingModule] Effect B: first attach', { panelId: currentPanelId });
+      adapter.attach(chart, mainSeries, container, pairId);
+    } else {
+      // ★ Bug2修复：周期切换 — 只更新 series 引用，不销毁 adapter
+      console.log('[useDrawingModule] Effect B: updateSeries', { panelId: currentPanelId });
+      adapter.updateSeries(mainSeries);
+    }
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [dataLoaded, retryTick]);
+
+  // ── activeTool 变化监听 — 仅活跃面板生效 ──
+  useEffect(() => {
+    if (!dataLoaded || !drawingAdapterRef.current) return;
+
+    const currentActivePanel = useChartStore.getState().activePanelId;
+    const isActive = currentActivePanel === currentPanelId;
+    if (!isActive) {
+      drawingAdapterRef.current.setActiveTool('cursor');
+      return;
+    }
+    drawingAdapterRef.current.setActiveTool(activeTool);
+    if (activeTool !== 'cursor') {
+      setRecentTools((prev) => {
+        const next = [activeTool, ...prev.filter((t) => t !== activeTool)];
+        return next.slice(0, 5);
+      });
+    }
+  }, [activeTool, currentPanelId, dataLoaded]);
+
+  // ── 活跃面板切换时更新绘图工具 ──
+  const activePanelId = useChartStore((s) => s.activePanelId);
+  useEffect(() => {
+    if (!dataLoaded || !drawingAdapterRef.current) return;
+
+    const isActive = activePanelId === currentPanelId;
+    if (!isActive) {
+      drawingAdapterRef.current.setActiveTool('cursor');
+    } else {
+      const currentTool = useDrawingStore.getState().activeTool;
+      drawingAdapterRef.current.setActiveTool(currentTool);
+    }
+  }, [activePanelId, currentPanelId, dataLoaded]);
+
+  // ── magnetEnabled 监听 ──
+  useEffect(() => {
+    drawingAdapterRef.current?.setMagnetEnabled(magnetEnabled);
+  }, [magnetEnabled]);
+
+  // Bug1修复：period 变化时通知 DrawingAdapter
+  useEffect(() => {
+    drawingAdapterRef.current?.setPeriod(period);
+  }, [period]);
+
+  // ── 回调函数 ──
+  const handleDrawingStyleChange = useCallback(
+    (id: string, style: Partial<DrawingStyleConfig>) => {
+      const adapter = drawingAdapterRef.current;
+      if (!adapter) return;
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      const drawing = (adapter as any).manager?.getDrawing?.(id);
+      if (!drawing) return;
+
+      // ★ Req3：斐波那契级别变更 — 通过 setFibOptions 应用到库
+      if (style.fibLevels !== undefined) {
+        try {
+          const levels: FibLevelItem[] = typeof style.fibLevels === 'string'
+            ? JSON.parse(style.fibLevels)
+            : style.fibLevels;
+          // 提取可见的级别值数组
+          const visibleLevels = levels
+            .filter((l) => l.visible)
+            .map((l) => l.value);
+          // 调用库的 setFibOptions API
+          // eslint-disable-next-line @typescript-eslint/no-explicit-any
+          if (typeof (drawing as any).setFibOptions === 'function') {
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            (drawing as any).setFibOptions({ levels: visibleLevels });
+          }
+        } catch (e) {
+          console.warn('[useDrawingModule] Failed to apply fib levels:', e);
+        }
+      }
+
+      // Bug3修复：text 字段同步到 TextLabelOverlay
+      if (style.text !== undefined) {
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        (adapter as any).setDrawingText?.(id, style.text);
+      }
+
+      // 去掉 text 和 fibLevels 后传给库
+      const { text, fibLevels, ...libStyle } = style;
+      if (Object.keys(libStyle).length > 0) {
+        drawing.updateStyle(libStyle);
+      }
+
+      // ★ Bug1修复：样式修改后同步到共享服务
+      isLocalUpdateRef.current = true;
+      drawingSharedService.updateDrawings(pairId, product, adapter.exportDrawings());
+      isLocalUpdateRef.current = false;
+    },
+    [pairId, product],
+  );
+
+  const handleDeleteDrawing = useCallback(() => {
+    if (selectedDrawingId) {
+      drawingAdapterRef.current?.removeDrawing(selectedDrawingId);
+    }
+  }, [selectedDrawingId]);
+
+  const handleContextMenuToolSelect = useCallback(
+    (tool: DrawingToolType) => {
+      setActiveTool(tool);
+    },
+    [setActiveTool],
+  );
+
+  return {
+    drawingAdapterRef,
+    recentTools,
+    handleDrawingStyleChange,
+    handleDeleteDrawing,
+    handleContextMenuToolSelect,
+  };
+}

package/src/hooks/useTheme.ts

@@ -0,0 +1,31 @@
+import { useChartStore } from '../store/useChartStore.js';
+import { darkPreset, lightPreset } from '../utils/themePresets.js';
+import type { ThemeConfig } from '../types/index.js';
+
+export interface UseThemeReturn {
+  theme: 'dark' | 'light';
+  config: ThemeConfig;
+  toggleTheme: () => void;
+  setTheme: (theme: 'dark' | 'light') => void;
+}
+
+/**
+ * 主题Hook
+ */
+export function useTheme(): UseThemeReturn {
+  const activeTheme = useChartStore((s) => s.activeTheme);
+  const setThemeAction = useChartStore((s) => s.setTheme);
+
+  const config = activeTheme === 'dark' ? darkPreset : lightPreset;
+
+  const toggleTheme = () => {
+    setThemeAction(activeTheme === 'dark' ? 'light' : 'dark');
+  };
+
+  return {
+    theme: activeTheme,
+    config,
+    toggleTheme,
+    setTheme: setThemeAction,
+  };
+}

package/src/index.ts

@@ -0,0 +1,170 @@
+// QLChart - 多功能图表库
+// 基于 lightweight-charts v5.2
+
+// Core
+export { EventManager, ChartEvent } from './core/EventManager.js';
+export type { EventHandler } from './core/EventManager.js';
+export { ChartManager } from './core/ChartManager.js';
+export type { ChartManagerCreateOptions } from './core/ChartManager.js';
+export { SeriesManager } from './core/SeriesManager.js';
+export { DataManager } from './core/DataManager.js';
+export type { FetchFn } from './core/DataManager.js';
+export { RealtimeDataFeed } from './core/RealtimeDataFeed.js';
+export type { RealtimeCandle } from './core/RealtimeDataFeed.js';
+export { ThemeManager } from './core/ThemeManager.js';
+export { PaneManager } from './core/PaneManager.js';
+export type { PaneInfo } from './core/PaneManager.js';
+
+// Types
+export type {
+  ChartOptions,
+  LayoutMode,
+  CrosshairData,
+  PanelConfig,
+} from './types/chart.js';
+export { SeriesType } from './types/series.js';
+export type {
+  CandlestickRawData,
+  CandlestickData,
+  HistogramData,
+  LineData,
+  IndicatorRawData,
+} from './types/series.js';
+export type {
+  ThemeConfig,
+  ThemePreset,
+  ChartThemeOptions,
+} from './types/theme.js';
+export type {
+  ChartResponse,
+  ChartRequestParams,
+  PairInfo,
+} from './types/api.js';
+
+// Indicator types
+export { IndicatorType, BUILTIN_INDICATORS } from './types/indicator.js';
+export type {
+  IndicatorParamDef,
+  IndicatorConfig,
+  IndicatorDataResponse,
+  IndicatorDataPoint,
+  IndicatorDefinition,
+} from './types/indicator.js';
+
+// Utils
+export {
+  transformCandlestickData,
+  transformVolumeData,
+  transformIndicatorData,
+} from './utils/dataTransformer.js';
+export { darkPreset, lightPreset } from './utils/themePresets.js';
+
+// Store
+export { useChartStore } from './store/useChartStore.js';
+export type { ChartState } from './store/useChartStore.js';
+export { useIndicatorStore, createIndicatorConfig } from './store/useIndicatorStore.js';
+export type { IndicatorState } from './store/useIndicatorStore.js';
+export { useDrawingStore } from './store/useDrawingStore.js';
+export type { DrawingState } from './store/useDrawingStore.js';
+export { useReplayStore } from './store/useReplayStore.js';
+export type { ReplayState } from './store/useReplayStore.js';
+export { useTimeBarStore } from './store/useTimeBarStore.js';
+export type { TimeBarState } from './store/useTimeBarStore.js';
+
+// Hooks
+export { useChart } from './hooks/useChart.js';
+export type { UseChartReturn } from './hooks/useChart.js';
+export { useTheme } from './hooks/useTheme.js';
+export type { UseThemeReturn } from './hooks/useTheme.js';
+export { useCrosshairSync } from './hooks/useCrosshairSync.js';
+export { useDrawingModule } from './hooks/useDrawingModule.js';
+export type { UseDrawingModuleOptions, UseDrawingModuleReturn } from './hooks/useDrawingModule.js';
+
+// Plugins
+export { IndicatorRenderer } from './plugins/indicators/IndicatorRenderer.js';
+export { OverlayIndicator } from './plugins/indicators/OverlayIndicator.js';
+export { PaneIndicator } from './plugins/indicators/PaneIndicator.js';
+export { DrawingAdapter } from './plugins/drawing/DrawingAdapter.js';
+export {
+  DRAWING_TOOLS,
+  getToolsByCategory,
+  getToolsByPriority,
+  getToolConfig,
+  CATEGORY_LABELS,
+  mapToolTypeToLib,
+  mapLibTypeToOurs,
+} from './plugins/drawing/DrawingToolRegistry.js';
+
+// Replay
+export { KlineReplay } from './plugins/replay/KlineReplay.js';
+export type { KlineReplayOptions } from './plugins/replay/KlineReplay.js';
+
+// Screenshot
+export { ScreenshotUtil } from './plugins/screenshot/ScreenshotUtil.js';
+
+// Custom Series
+export { HollowCandlestickSeries } from './plugins/series/HollowCandlestickSeries.js';
+export type { HollowCandlestickData } from './plugins/series/HollowCandlestickSeries.js';
+export { RenkoSeries } from './plugins/series/RenkoSeries.js';
+export type { RenkoData } from './plugins/series/RenkoSeries.js';
+
+// Components
+export {
+  QLChartProvider,
+  useQLChartConfig,
+  QLChartPanel,
+  QLToolbar,
+  PeriodSelector,
+  TimeRangeSelector,
+  KlineTypeSelector,
+  QLChartLayout,
+  LayoutSwitcher,
+  ReplayController,
+} from './components/index.js';
+export type {
+  QLChartConfig,
+  QLChartPanelProps,
+  RealtimeSubscribeFn,
+  QLChartPanelRef,
+  QLToolbarProps,
+  QLChartLayoutProps,
+  LayoutSwitcherProps,
+  ReplayControllerProps,
+} from './components/index.js';
+export {
+  IndicatorPanel,
+  IndicatorTag,
+} from './components/index.js';
+export type {
+  IndicatorPanelProps,
+  IndicatorTagProps,
+} from './components/index.js';
+
+// ChartFunctionMenu
+export {
+  ChartFunctionMenu,
+} from './components/index.js';
+export type {
+  ChartFunctionMenuProps,
+} from './components/index.js';
+
+// Drawing Module & TimeBar Module
+export {
+  DrawingModule,
+  TimeBarModule,
+} from './components/index.js';
+export type {
+  DrawingModuleProps,
+  TimeBarModuleProps,
+} from './components/index.js';
+
+// Mock
+export { MockDataService } from './mock/MockDataService.js';
+export type { MockDataConfig, MarketTrend } from './mock/MockDataService.js';
+export { MockIndicatorService } from './mock/MockIndicatorService.js';
+export type { MockIndicatorConfig } from './mock/MockIndicatorService.js';
+export { MARKET_PRESETS, PAIR_PRESETS } from './mock/presets.js';
+
+// Drawing Persistence
+export { DrawingPersistence } from './plugins/drawing/DrawingPersistence.js';
+export type { PersistenceConfig } from './plugins/drawing/DrawingPersistence.js';