react-klinecharts-ui 0.2.0 → 0.4.0

package/dist/index.cjs

@@ -1,6 +1,6 @@
 'use strict';
 
-var chunk47JXSAIT_cjs = require('./chunk-47JXSAIT.cjs');
+var chunkPIFLJKYF_cjs = require('./chunk-PIFLJKYF.cjs');
 var react = require('react');
 var reactKlinecharts = require('react-klinecharts');
 var jsxRuntime = require('react/jsx-runtime');
@@ -58,6 +58,8 @@ function reducer(state, action) {
       return { ...state, mainIndicators: action.indicators };
     case "SET_SUB_INDICATORS":
       return { ...state, subIndicators: action.indicators };
+    case "SET_INDICATOR_AXES":
+      return { ...state, indicatorAxes: action.axes };
     case "SET_STYLES":
       return { ...state, styles: action.styles };
     case "SET_LOCALE":
@@ -120,6 +122,7 @@ function KlinechartsUIProvider({
         (acc, name) => ({ ...acc, [name]: "" }),
         {}
       ),
+      indicatorAxes: {},
       styles: opts.styles,
       screenshotUrl: null
     })
@@ -177,7 +180,7 @@ function KlinechartsUIProvider({
   const extraOverlaysRef = react.useRef(extraOverlays);
   react.useEffect(() => {
     if (shouldRegister) {
-      chunk47JXSAIT_cjs.registerExtensions();
+      chunkPIFLJKYF_cjs.registerExtensions();
     }
     extraOverlaysRef.current?.forEach((overlay) => reactKlinecharts.registerOverlay(overlay));
   }, [shouldRegister]);
@@ -644,9 +647,12 @@ var INDICATOR_PARAMS = {
 };
 
 // src/hooks/useIndicators.ts
+var COLLAPSED_HEIGHT = 30;
 function useIndicators() {
   const { state, dispatch } = useKlinechartsUI();
   const { undoRedoListenerRef } = useKlinechartsUIDispatch();
+  const paneHeightsRef = react.useRef({});
+  const collapsedPanesRef = react.useRef(/* @__PURE__ */ new Set());
   const mainIndicators = react.useMemo(() => {
     const activeNames = state.mainIndicators;
     const inactive = MAIN_INDICATORS.filter((n) => !activeNames.includes(n));
@@ -664,62 +670,95 @@ function useIndicators() {
     ];
   }, [state.subIndicators]);
   const addMainIndicator = react.useCallback(
-    (name) => {
+    (name, options) => {
       if (state.mainIndicators.includes(name)) return;
+      const yAxis = options?.yAxis;
       state.chart?.createIndicator(
-        { name, id: `main_${name}`, paneId: "candle_pane" },
-        true,
-        { id: "candle_pane" }
+        { name, id: `main_${name}` },
+        { isStack: true, pane: { id: "candle_pane" }, yAxis }
       );
       const newIndicators = [...state.mainIndicators, name];
       dispatch({ type: "SET_MAIN_INDICATORS", indicators: newIndicators });
+      if (yAxis?.id) {
+        dispatch({
+          type: "SET_INDICATOR_AXES",
+          axes: { ...state.indicatorAxes, [`main_${name}`]: yAxis.id }
+        });
+      }
       undoRedoListenerRef.current?.({
         type: "indicator_toggled",
-        data: { name, wasActive: false, isMain: true, paneId: "candle_pane" }
+        data: {
+          name,
+          wasActive: false,
+          isMain: true,
+          paneId: "candle_pane",
+          yAxisId: yAxis?.id
+        }
       });
     },
-    [state.chart, state.mainIndicators, dispatch, undoRedoListenerRef]
+    [state.chart, state.mainIndicators, state.indicatorAxes, dispatch, undoRedoListenerRef]
   );
   const removeMainIndicator = react.useCallback(
     (name) => {
-      state.chart?.removeIndicator({ id: `main_${name}` });
+      const id = `main_${name}`;
+      const yAxisId = state.indicatorAxes[id];
+      state.chart?.removeIndicator({ id });
       const newIndicators = state.mainIndicators.filter((n) => n !== name);
       dispatch({ type: "SET_MAIN_INDICATORS", indicators: newIndicators });
+      if (yAxisId) {
+        const nextAxes = { ...state.indicatorAxes };
+        delete nextAxes[id];
+        dispatch({ type: "SET_INDICATOR_AXES", axes: nextAxes });
+      }
       undoRedoListenerRef.current?.({
         type: "indicator_toggled",
-        data: { name, wasActive: true, isMain: true, paneId: "candle_pane" }
+        data: { name, wasActive: true, isMain: true, paneId: "candle_pane", yAxisId }
       });
     },
-    [state.chart, state.mainIndicators, dispatch, undoRedoListenerRef]
+    [state.chart, state.mainIndicators, state.indicatorAxes, dispatch, undoRedoListenerRef]
   );
   const addSubIndicator = react.useCallback(
-    (name) => {
+    (name, options) => {
       if (name in state.subIndicators) return;
       const id = `sub_${name}`;
-      state.chart?.createIndicator({ name, id });
+      const yAxis = options?.yAxis;
+      state.chart?.createIndicator({ name, id }, { yAxis });
       const paneId = state.chart?.getIndicators({ id })?.[0]?.paneId ?? "";
       const newIndicators = { ...state.subIndicators, [name]: paneId };
       dispatch({ type: "SET_SUB_INDICATORS", indicators: newIndicators });
+      if (yAxis?.id) {
+        dispatch({
+          type: "SET_INDICATOR_AXES",
+          axes: { ...state.indicatorAxes, [id]: yAxis.id }
+        });
+      }
       undoRedoListenerRef.current?.({
         type: "indicator_toggled",
-        data: { name, wasActive: false, isMain: false, paneId }
+        data: { name, wasActive: false, isMain: false, paneId, yAxisId: yAxis?.id }
       });
     },
-    [state.chart, state.subIndicators, dispatch, undoRedoListenerRef]
+    [state.chart, state.subIndicators, state.indicatorAxes, dispatch, undoRedoListenerRef]
   );
   const removeSubIndicator = react.useCallback(
     (name) => {
+      const id = `sub_${name}`;
       const paneId = state.subIndicators[name] ?? "";
-      state.chart?.removeIndicator({ id: `sub_${name}` });
+      const yAxisId = state.indicatorAxes[id];
+      state.chart?.removeIndicator({ id });
       const newIndicators = { ...state.subIndicators };
       delete newIndicators[name];
       dispatch({ type: "SET_SUB_INDICATORS", indicators: newIndicators });
+      if (yAxisId) {
+        const nextAxes = { ...state.indicatorAxes };
+        delete nextAxes[id];
+        dispatch({ type: "SET_INDICATOR_AXES", axes: nextAxes });
+      }
       undoRedoListenerRef.current?.({
         type: "indicator_toggled",
-        data: { name, wasActive: true, isMain: false, paneId }
+        data: { name, wasActive: true, isMain: false, paneId, yAxisId }
       });
     },
-    [state.chart, state.subIndicators, dispatch, undoRedoListenerRef]
+    [state.chart, state.subIndicators, state.indicatorAxes, dispatch, undoRedoListenerRef]
   );
   const toggleMainIndicator = react.useCallback(
     (name) => {
@@ -749,8 +788,10 @@ function useIndicators() {
     [state.chart]
   );
   const updateIndicatorParams = react.useCallback(
-    (name, paneId, params) => {
-      state.chart?.overrideIndicator({ name, paneId, calcParams: params });
+    // `paneId` is kept in the signature for API stability; klinecharts v10
+    // `overrideIndicator` no longer accepts it and targets by name/id instead.
+    (name, _paneId, params) => {
+      state.chart?.overrideIndicator({ name, calcParams: params });
     },
     [state.chart]
   );
@@ -771,11 +812,9 @@ function useIndicators() {
         {
           name,
           id: `main_${name}`,
-          paneId: "candle_pane",
           ...prevCalcParams ? { calcParams: prevCalcParams } : {}
         },
-        true,
-        { id: "candle_pane" }
+        { isStack: true, pane: { id: "candle_pane" } }
       );
       const newSub = { ...state.subIndicators };
       delete newSub[name];
@@ -816,6 +855,128 @@ function useIndicators() {
     (name) => name in state.subIndicators,
     [state.subIndicators]
   );
+  const collapseSubIndicator = react.useCallback(
+    (name) => {
+      const paneId = state.subIndicators[name];
+      if (!state.chart || !paneId) return;
+      const currentSize = state.chart.getSize?.(paneId);
+      if (currentSize?.height && currentSize.height > COLLAPSED_HEIGHT) {
+        paneHeightsRef.current[paneId] = currentSize.height;
+      }
+      collapsedPanesRef.current.add(paneId);
+      state.chart.setPaneOptions?.({
+        id: paneId,
+        height: COLLAPSED_HEIGHT
+      });
+      state.chart.overrideIndicator({ name, id: `sub_${name}`, visible: false });
+    },
+    [state.chart, state.subIndicators]
+  );
+  const expandSubIndicator = react.useCallback(
+    (name) => {
+      const paneId = state.subIndicators[name];
+      if (!state.chart || !paneId) return;
+      const savedHeight = paneHeightsRef.current[paneId] ?? 100;
+      collapsedPanesRef.current.delete(paneId);
+      state.chart.setPaneOptions?.({
+        id: paneId,
+        height: savedHeight
+      });
+      state.chart.overrideIndicator({ name, id: `sub_${name}`, visible: true });
+    },
+    [state.chart, state.subIndicators]
+  );
+  const isSubIndicatorCollapsed = react.useCallback(
+    (name) => {
+      const paneId = state.subIndicators[name];
+      return paneId ? collapsedPanesRef.current.has(paneId) : false;
+    },
+    [state.subIndicators]
+  );
+  const reorderSubIndicator = react.useCallback(
+    (name, direction) => {
+      if (!state.chart) return;
+      const subNames = Object.keys(state.subIndicators);
+      const idx = subNames.indexOf(name);
+      if (idx === -1) return;
+      const swapIdx = direction === "up" ? idx - 1 : idx + 1;
+      if (swapIdx < 0 || swapIdx >= subNames.length) return;
+      const subStates = subNames.map((n) => {
+        const id = `sub_${n}`;
+        const indicator = state.chart.getIndicators({ id })?.[0];
+        return {
+          name: n,
+          calcParams: indicator?.calcParams,
+          visible: indicator?.visible ?? true,
+          styles: indicator?.styles,
+          paneId: state.subIndicators[n]
+        };
+      });
+      [subStates[idx], subStates[swapIdx]] = [subStates[swapIdx], subStates[idx]];
+      for (const n of subNames) {
+        state.chart.removeIndicator({ id: `sub_${n}` });
+      }
+      const newSubIndicators = {};
+      for (const sub of subStates) {
+        const id = `sub_${sub.name}`;
+        state.chart.createIndicator({
+          name: sub.name,
+          id,
+          ...sub.calcParams ? { calcParams: sub.calcParams } : {},
+          visible: sub.visible
+        });
+        const paneId = state.chart.getIndicators({ id })?.[0]?.paneId ?? "";
+        newSubIndicators[sub.name] = paneId;
+        if (sub.styles) {
+          state.chart.overrideIndicator({
+            name: sub.name,
+            id,
+            styles: sub.styles
+          });
+        }
+      }
+      dispatch({ type: "SET_SUB_INDICATORS", indicators: newSubIndicators });
+    },
+    [state.chart, state.subIndicators, dispatch]
+  );
+  const getIndicatorAxis = react.useCallback(
+    (name, isMain) => state.indicatorAxes[isMain ? `main_${name}` : `sub_${name}`],
+    [state.indicatorAxes]
+  );
+  const bindIndicatorToNewAxis = react.useCallback(
+    (name, isMain, yAxis) => {
+      if (!state.chart) return;
+      const id = isMain ? `main_${name}` : `sub_${name}`;
+      const current = state.chart.getIndicators({ id })?.[0];
+      if (!current) return;
+      const calcParams = current.calcParams;
+      const styles = current.styles;
+      const visible = current.visible ?? true;
+      const paneId = isMain ? "candle_pane" : current.paneId ?? state.subIndicators[name] ?? "";
+      state.chart.removeIndicator({ id });
+      state.chart.createIndicator(
+        {
+          name,
+          id,
+          ...calcParams ? { calcParams } : {},
+          visible
+        },
+        {
+          isStack: isMain,
+          ...paneId ? { pane: { id: paneId } } : {},
+          yAxis
+        }
+      );
+      if (styles) {
+        state.chart.overrideIndicator({ name, id, styles });
+      }
+      const nextAxes = { ...state.indicatorAxes };
+      if (yAxis?.id) nextAxes[id] = yAxis.id;
+      else delete nextAxes[id];
+      dispatch({ type: "SET_INDICATOR_AXES", axes: nextAxes });
+    },
+    [state.chart, state.indicatorAxes, state.subIndicators, dispatch]
+  );
   return {
     mainIndicators,
     subIndicators,
@@ -835,7 +996,14 @@ function useIndicators() {
     updateIndicatorParams,
     getIndicatorParams,
     isMainIndicatorActive,
-    isSubIndicatorActive
+    isSubIndicatorActive,
+    collapseSubIndicator,
+    expandSubIndicator,
+    isSubIndicatorCollapsed,
+    reorderSubIndicator,
+    indicatorAxes: state.indicatorAxes,
+    getIndicatorAxis,
+    bindIndicatorToNewAxis
   };
 }
 
@@ -934,6 +1102,17 @@ function useDrawingTools() {
   const [magnetMode, setMagnetModeState] = react.useState("normal");
   const [isLocked, setIsLocked] = react.useState(false);
   const [isVisible, setIsVisible] = react.useState(true);
+  const [autoRetrigger, setAutoRetrigger] = react.useState(true);
+  const activeToolRef = react.useRef(activeTool);
+  activeToolRef.current = activeTool;
+  const autoRetriggerRef = react.useRef(autoRetrigger);
+  autoRetriggerRef.current = autoRetrigger;
+  const isLockedRef = react.useRef(isLocked);
+  isLockedRef.current = isLocked;
+  const isVisibleRef = react.useRef(isVisible);
+  isVisibleRef.current = isVisible;
+  const magnetModeRef = react.useRef(magnetMode);
+  magnetModeRef.current = magnetMode;
   const categories = react.useMemo(
     () => DRAWING_CATEGORIES.map((cat) => ({
       key: cat.key,
@@ -944,15 +1123,15 @@ function useDrawingTools() {
     })),
     []
   );
-  const selectTool = react.useCallback(
+  const createOverlayForTool = react.useCallback(
     (name) => {
-      setActiveTool(name);
+      const mode = magnetModeRef.current === "strong" ? "strong_magnet" : magnetModeRef.current === "weak" ? "weak_magnet" : "normal";
       state.chart?.createOverlay({
         name,
         groupId: DRAWING_GROUP_ID,
-        lock: isLocked,
-        visible: isVisible,
-        mode: magnetMode === "strong" ? "strong_magnet" : magnetMode === "weak" ? "weak_magnet" : "normal",
+        lock: isLockedRef.current,
+        visible: isVisibleRef.current,
+        mode,
         onDrawEnd: (event) => {
           const o = event.overlay;
           undoRedoListenerRef.current?.({
@@ -967,10 +1146,22 @@ function useDrawingTools() {
               }
             }
           });
+          if (autoRetriggerRef.current && activeToolRef.current === name) {
+            requestAnimationFrame(() => {
+              createOverlayForTool(name);
+            });
+          }
         }
       });
     },
-    [state.chart, isLocked, isVisible, magnetMode, undoRedoListenerRef]
+    [state.chart, undoRedoListenerRef]
+  );
+  const selectTool = react.useCallback(
+    (name) => {
+      setActiveTool(name);
+      createOverlayForTool(name);
+    },
+    [createOverlayForTool]
   );
   const clearActiveTool = react.useCallback(() => {
     setActiveTool(null);
@@ -1041,12 +1232,14 @@ function useDrawingTools() {
     magnetMode,
     isLocked,
     isVisible,
+    autoRetrigger,
     selectTool,
     clearActiveTool,
     setMagnetMode,
     toggleLock,
     toggleVisibility,
-    removeAllDrawings
+    removeAllDrawings,
+    setAutoRetrigger
   };
 }
 
@@ -1120,20 +1313,23 @@ function useKlinechartsUISettings() {
     () => TOOLTIP_SHOW_RULES.map((r) => ({ key: r, localeKey: r })),
     []
   );
+  const applyPaneAxis = react.useCallback(
+    (axis) => {
+      state.chart?.overrideYAxis?.({ paneId: "candle_pane", ...axis });
+    },
+    [state.chart]
+  );
   const hasAppliedInitial = react.useRef(false);
   react.useEffect(() => {
     if (!state.chart || hasAppliedInitial.current) return;
     hasAppliedInitial.current = true;
-    const needsPaneOptions = settings.reverseCoordinate || settings.priceAxisType !== "normal" || settings.yAxisPosition !== "right" || settings.yAxisInside;
-    if (needsPaneOptions) {
-      state.chart.setPaneOptions({
-        id: "candle_pane",
-        axis: {
-          ...settings.priceAxisType !== "normal" && { name: settings.priceAxisType },
-          ...settings.reverseCoordinate && { reverse: true },
-          ...settings.yAxisPosition !== "right" && { position: settings.yAxisPosition },
-          ...settings.yAxisInside && { inside: true }
-        }
+    const needsAxisOverride = settings.reverseCoordinate || settings.priceAxisType !== "normal" || settings.yAxisPosition !== "right" || settings.yAxisInside;
+    if (needsAxisOverride) {
+      applyPaneAxis({
+        ...settings.priceAxisType !== "normal" && { name: settings.priceAxisType },
+        ...settings.reverseCoordinate && { reverse: true },
+        ...settings.yAxisPosition !== "right" && { position: settings.yAxisPosition },
+        ...settings.yAxisInside && { inside: true }
       });
     }
     if (settings.showIndicatorLastValue) {
@@ -1156,12 +1352,6 @@ function useKlinechartsUISettings() {
     },
     [state.chart]
   );
-  const applyPaneAxis = react.useCallback(
-    (axis) => {
-      state.chart?.setPaneOptions({ id: "candle_pane", axis });
-    },
-    [state.chart]
-  );
   const setCandleType = react.useCallback(
     (type) => {
       applyStyle("candle.type", type);
@@ -1309,11 +1499,8 @@ function useKlinechartsUISettings() {
   const resetToDefaults = react.useCallback(() => {
     setSettings(defaultSettings);
     state.chart?.setStyles(state.theme);
-    state.chart?.setPaneOptions({
-      id: "candle_pane",
-      axis: { name: "normal", reverse: false, position: "right", inside: false }
-    });
-  }, [state.chart, state.theme]);
+    applyPaneAxis({ name: "normal", reverse: false, position: "right", inside: false });
+  }, [state.chart, state.theme, applyPaneAxis]);
   return {
     ...settings,
     candleTypes,
@@ -1570,21 +1757,28 @@ function useUndoRedo() {
           break;
         }
         case "indicator_toggled": {
-          const { name, wasActive, isMain, paneId } = action.data;
+          const { name, wasActive, isMain, paneId, yAxisId } = action.data;
+          const id = isMain ? `main_${name}` : `sub_${name}`;
           if (wasActive) {
             if (isMain) {
               state.chart.createIndicator(
-                { name, id: `main_${name}`, paneId: "candle_pane" },
-                true,
-                { id: "candle_pane" }
+                { name, id },
+                {
+                  isStack: true,
+                  pane: { id: "candle_pane" },
+                  ...yAxisId ? { yAxis: { id: yAxisId } } : {}
+                }
               );
               dispatch({
                 type: "SET_MAIN_INDICATORS",
                 indicators: [...state.mainIndicators, name]
               });
             } else {
-              state.chart.createIndicator({ name, id: `sub_${name}` });
-              const newPaneId = state.chart.getIndicators({ id: `sub_${name}` })?.[0]?.paneId ?? "";
+              state.chart.createIndicator(
+                { name, id },
+                yAxisId ? { yAxis: { id: yAxisId } } : void 0
+              );
+              const newPaneId = state.chart.getIndicators({ id })?.[0]?.paneId ?? "";
               dispatch({
                 type: "SET_SUB_INDICATORS",
                 indicators: {
@@ -1593,9 +1787,15 @@ function useUndoRedo() {
                 }
               });
             }
+            if (yAxisId) {
+              dispatch({
+                type: "SET_INDICATOR_AXES",
+                axes: { ...state.indicatorAxes, [id]: yAxisId }
+              });
+            }
           } else {
+            state.chart.removeIndicator({ id });
             if (isMain) {
-              state.chart.removeIndicator({ id: `main_${name}` });
               dispatch({
                 type: "SET_MAIN_INDICATORS",
                 indicators: state.mainIndicators.filter(
@@ -1603,7 +1803,6 @@ function useUndoRedo() {
                 )
               });
             } else {
-              state.chart.removeIndicator({ id: `sub_${name}` });
               const newSub = { ...state.subIndicators };
               delete newSub[name];
               dispatch({
@@ -1611,6 +1810,11 @@ function useUndoRedo() {
                 indicators: newSub
               });
             }
+            if (state.indicatorAxes[id]) {
+              const nextAxes = { ...state.indicatorAxes };
+              delete nextAxes[id];
+              dispatch({ type: "SET_INDICATOR_AXES", axes: nextAxes });
+            }
           }
           setRedoStack((prev) => [
             ...prev,
@@ -1620,7 +1824,8 @@ function useUndoRedo() {
                 name,
                 wasActive: !wasActive,
                 isMain,
-                paneId
+                paneId,
+                yAxisId
               }
             }
           ]);
@@ -1630,7 +1835,7 @@ function useUndoRedo() {
     } finally {
       isProcessingRef.current = false;
     }
-  }, [undoStack, state.chart, state.mainIndicators, state.subIndicators, dispatch]);
+  }, [undoStack, state.chart, state.mainIndicators, state.subIndicators, state.indicatorAxes, dispatch]);
   const redo = react.useCallback(() => {
     if (redoStack.length === 0 || !state.chart || isProcessingRef.current)
       return;
@@ -1682,21 +1887,28 @@ function useUndoRedo() {
           break;
         }
         case "indicator_toggled": {
-          const { name, wasActive, isMain } = action.data;
+          const { name, wasActive, isMain, paneId, yAxisId } = action.data;
+          const id = isMain ? `main_${name}` : `sub_${name}`;
           if (wasActive) {
             if (isMain) {
               state.chart.createIndicator(
-                { name, id: `main_${name}`, paneId: "candle_pane" },
-                true,
-                { id: "candle_pane" }
+                { name, id },
+                {
+                  isStack: true,
+                  pane: { id: "candle_pane" },
+                  ...yAxisId ? { yAxis: { id: yAxisId } } : {}
+                }
               );
               dispatch({
                 type: "SET_MAIN_INDICATORS",
                 indicators: [...state.mainIndicators, name]
               });
             } else {
-              state.chart.createIndicator({ name, id: `sub_${name}` });
-              const newPaneId = state.chart.getIndicators({ id: `sub_${name}` })?.[0]?.paneId ?? "";
+              state.chart.createIndicator(
+                { name, id },
+                yAxisId ? { yAxis: { id: yAxisId } } : void 0
+              );
+              const newPaneId = state.chart.getIndicators({ id })?.[0]?.paneId ?? "";
               dispatch({
                 type: "SET_SUB_INDICATORS",
                 indicators: {
@@ -1705,9 +1917,15 @@ function useUndoRedo() {
                 }
               });
             }
+            if (yAxisId) {
+              dispatch({
+                type: "SET_INDICATOR_AXES",
+                axes: { ...state.indicatorAxes, [id]: yAxisId }
+              });
+            }
           } else {
+            state.chart.removeIndicator({ id });
             if (isMain) {
-              state.chart.removeIndicator({ id: `main_${name}` });
               dispatch({
                 type: "SET_MAIN_INDICATORS",
                 indicators: state.mainIndicators.filter(
@@ -1715,7 +1933,6 @@ function useUndoRedo() {
                 )
               });
             } else {
-              state.chart.removeIndicator({ id: `sub_${name}` });
               const newSub = { ...state.subIndicators };
               delete newSub[name];
               dispatch({
@@ -1723,6 +1940,11 @@ function useUndoRedo() {
                 indicators: newSub
               });
             }
+            if (state.indicatorAxes[id]) {
+              const nextAxes = { ...state.indicatorAxes };
+              delete nextAxes[id];
+              dispatch({ type: "SET_INDICATOR_AXES", axes: nextAxes });
+            }
           }
           setUndoStack((prev) => [
             ...prev,
@@ -1731,7 +1953,9 @@ function useUndoRedo() {
               data: {
                 name,
                 wasActive: !wasActive,
-                isMain
+                isMain,
+                paneId,
+                yAxisId
               }
             }
           ]);
@@ -1741,7 +1965,7 @@ function useUndoRedo() {
     } finally {
       isProcessingRef.current = false;
     }
-  }, [redoStack, state.chart, state.mainIndicators, state.subIndicators, dispatch]);
+  }, [redoStack, state.chart, state.mainIndicators, state.subIndicators, state.indicatorAxes, dispatch]);
   react.useEffect(() => {
     const handleKeyDown = (e) => {
       const isCtrlOrMeta = e.ctrlKey || e.metaKey;
@@ -1815,12 +2039,14 @@ function useLayoutManager() {
     if (indicatorMap) {
       indicatorMap.forEach((paneIndicators, paneId) => {
         paneIndicators.forEach((indicator) => {
+          const yAxisId = state.indicatorAxes[indicator.id];
           indicators2.push({
             paneId,
             name: indicator.name,
             calcParams: indicator.calcParams,
             visible: indicator.visible,
-            ...indicator.styles ? { styles: indicator.styles } : {}
+            ...indicator.styles ? { styles: indicator.styles } : {},
+            ...yAxisId ? { yAxisId } : {}
           });
         });
       });
@@ -1848,7 +2074,7 @@ function useLayoutManager() {
       indicators: indicators2,
       drawings
     };
-  }, [state.chart, state.symbol, state.period]);
+  }, [state.chart, state.symbol, state.period, state.indicatorAxes]);
   const saveLayout = react.useCallback(
     (name) => {
       const chartState = serializeState();
@@ -1896,25 +2122,35 @@ function useLayoutManager() {
       }
       const newMainIndicators = [];
       const newSubIndicators = {};
+      const restoredAxes = {};
       if (chartState.indicators) {
         for (const ind of chartState.indicators) {
+          const isMain = ind.paneId === "candle_pane";
+          const id2 = isMain ? `main_${ind.name}` : `sub_${ind.name}`;
           chart.createIndicator(
             {
               name: ind.name,
+              id: id2,
               calcParams: ind.calcParams,
               visible: ind.visible
             },
-            ind.paneId !== "candle_pane",
-            { id: ind.paneId }
+            {
+              isStack: ind.paneId !== "candle_pane",
+              pane: { id: ind.paneId },
+              ...ind.yAxisId ? { yAxis: { id: ind.yAxisId } } : {}
+            }
           );
           if (ind.styles) {
             chart.overrideIndicator({
               name: ind.name,
-              paneId: ind.paneId,
+              id: id2,
               styles: ind.styles
             });
           }
-          if (ind.paneId === "candle_pane") {
+          if (ind.yAxisId) {
+            restoredAxes[id2] = ind.yAxisId;
+          }
+          if (isMain) {
             newMainIndicators.push(ind.name);
           } else {
             newSubIndicators[ind.name] = ind.paneId;
@@ -1929,6 +2165,10 @@ function useLayoutManager() {
         type: "SET_SUB_INDICATORS",
         indicators: newSubIndicators
       });
+      dispatch({
+        type: "SET_INDICATOR_AXES",
+        axes: restoredAxes
+      });
       if (chartState.drawings) {
         for (const drawing of chartState.drawings) {
           chart.createOverlay({
@@ -2112,7 +2352,7 @@ ${code}`
       ];
       const fn = new Function(...allArgs);
       const shadowValues = SHADOW_KEYS.map(() => void 0);
-      const result = fn(...shadowValues, chunk47JXSAIT_cjs.TA_default, dataList, parsedParams);
+      const result = fn(...shadowValues, chunkPIFLJKYF_cjs.TA_default, dataList, parsedParams);
       if (!Array.isArray(result)) {
         throw new Error("Script must return an Array.");
       }
@@ -2154,8 +2394,7 @@ ${code}`
       if (placement === "main") {
         paneId = chart.createIndicator(
           { name: indicatorName },
-          true,
-          { id: "candle_pane" }
+          { isStack: true, pane: { id: "candle_pane" } }
         );
       } else {
         paneId = chart.createIndicator({ name: indicatorName });
@@ -2245,6 +2484,749 @@ ${code}`
     defaultScript: DEFAULT_SCRIPT
   };
 }
+function useCrosshair() {
+  const { state } = useKlinechartsUI();
+  const [barData, setBarData] = react.useState(null);
+  const rafRef = react.useRef(0);
+  const handler = react.useCallback(
+    (event) => {
+      if (rafRef.current) {
+        cancelAnimationFrame(rafRef.current);
+      }
+      rafRef.current = requestAnimationFrame(() => {
+        rafRef.current = 0;
+        const klineData = event?.kLineData;
+        if (!klineData) {
+          setBarData(null);
+          return;
+        }
+        const pricePrecision = state.symbol?.pricePrecision ?? 2;
+        const open = klineData.open ?? 0;
+        const close = klineData.close ?? 0;
+        const change = parseFloat((close - open).toFixed(pricePrecision));
+        const changePercent = open !== 0 ? parseFloat((change / open * 100).toFixed(2)) : 0;
+        setBarData({
+          open,
+          high: klineData.high ?? 0,
+          low: klineData.low ?? 0,
+          close,
+          volume: klineData.volume ?? 0,
+          timestamp: klineData.timestamp ?? 0,
+          change,
+          changePercent
+        });
+      });
+    },
+    [state.symbol?.pricePrecision]
+  );
+  react.useEffect(() => {
+    const chart = state.chart;
+    if (!chart) return;
+    chart.subscribeAction?.("onCrosshairChange", handler);
+    return () => {
+      if (rafRef.current) {
+        cancelAnimationFrame(rafRef.current);
+        rafRef.current = 0;
+      }
+      chart.unsubscribeAction?.("onCrosshairChange", handler);
+    };
+  }, [state.chart, handler]);
+  return { barData };
+}
+var alertCounter = 0;
+function useAlerts() {
+  const { state } = useKlinechartsUI();
+  const [alerts, setAlerts] = react.useState([]);
+  const callbackRef = react.useRef(null);
+  const prevCloseRef = react.useRef(null);
+  const addAlert = react.useCallback(
+    (price, condition, message) => {
+      const id = `alert_${++alertCounter}`;
+      const alert = {
+        id,
+        price,
+        condition,
+        message,
+        triggered: false
+      };
+      setAlerts((prev) => [...prev, alert]);
+      if (state.chart) {
+        state.chart.createOverlay({
+          name: "horizontalStraightLine",
+          id,
+          groupId: "price_alerts",
+          points: [{ value: price }],
+          styles: {
+            line: {
+              style: "dashed",
+              color: "#ff9800",
+              size: 1
+            }
+          },
+          lock: true
+        });
+      }
+      return id;
+    },
+    [state.chart]
+  );
+  const removeAlert = react.useCallback(
+    (id) => {
+      setAlerts((prev) => prev.filter((a) => a.id !== id));
+      state.chart?.removeOverlay({ id });
+    },
+    [state.chart]
+  );
+  const clearAlerts = react.useCallback(() => {
+    setAlerts((prev) => {
+      for (const alert of prev) {
+        state.chart?.removeOverlay({ id: alert.id });
+      }
+      return [];
+    });
+  }, [state.chart]);
+  const onAlertTriggered = react.useCallback(
+    (callback) => {
+      callbackRef.current = callback;
+    },
+    []
+  );
+  react.useEffect(() => {
+    if (!state.chart) return;
+    const interval = setInterval(() => {
+      const dataList = state.chart?.getDataList();
+      if (!dataList || dataList.length === 0) return;
+      const lastBar = dataList[dataList.length - 1];
+      const currentClose = lastBar.close;
+      const prevClose = prevCloseRef.current;
+      if (prevClose === null) {
+        prevCloseRef.current = currentClose;
+        return;
+      }
+      prevCloseRef.current = currentClose;
+      setAlerts((prev) => {
+        let changed = false;
+        const next = prev.map((alert) => {
+          if (alert.triggered) return alert;
+          let shouldTrigger = false;
+          if (alert.condition === "crossing_up") {
+            shouldTrigger = prevClose < alert.price && currentClose >= alert.price;
+          } else if (alert.condition === "crossing_down") {
+            shouldTrigger = prevClose > alert.price && currentClose <= alert.price;
+          } else if (alert.condition === "crossing") {
+            shouldTrigger = prevClose < alert.price && currentClose >= alert.price || prevClose > alert.price && currentClose <= alert.price;
+          }
+          if (shouldTrigger) {
+            changed = true;
+            const triggered = { ...alert, triggered: true };
+            callbackRef.current?.(triggered);
+            return triggered;
+          }
+          return alert;
+        });
+        return changed ? next : prev;
+      });
+    }, 1e3);
+    return () => clearInterval(interval);
+  }, [state.chart]);
+  return {
+    alerts,
+    addAlert,
+    removeAlert,
+    clearAlerts,
+    onAlertTriggered
+  };
+}
+function useDataExport() {
+  const { state } = useKlinechartsUI();
+  const exportAll = react.useCallback(
+    (format) => {
+      if (!state.chart) return;
+      const dataList = state.chart.getDataList();
+      if (!dataList || dataList.length === 0) return;
+      downloadData(dataList, format, state.symbol?.ticker);
+    },
+    [state.chart, state.symbol?.ticker]
+  );
+  const exportVisible = react.useCallback(
+    (format) => {
+      if (!state.chart) return;
+      const dataList = state.chart.getDataList();
+      if (!dataList || dataList.length === 0) return;
+      const visibleRange = state.chart.getVisibleRange?.();
+      if (!visibleRange) {
+        downloadData(dataList, format, state.symbol?.ticker);
+        return;
+      }
+      const { from, to } = visibleRange;
+      const visibleData = dataList.slice(from, to);
+      downloadData(visibleData, format, state.symbol?.ticker);
+    },
+    [state.chart, state.symbol?.ticker]
+  );
+  return { exportAll, exportVisible };
+}
+function formatRow(bar) {
+  return {
+    date: new Date(bar.timestamp).toISOString(),
+    open: bar.open,
+    high: bar.high,
+    low: bar.low,
+    close: bar.close,
+    volume: bar.volume ?? 0
+  };
+}
+function buildCsv(dataList) {
+  const header = "Date,Open,High,Low,Close,Volume\n";
+  const rows = dataList.map((bar) => {
+    const r = formatRow(bar);
+    return `${r.date},${r.open},${r.high},${r.low},${r.close},${r.volume}`;
+  });
+  return header + rows.join("\n");
+}
+function buildJson(dataList) {
+  return JSON.stringify(dataList.map(formatRow), null, 2);
+}
+function downloadData(dataList, format, ticker) {
+  const content = format === "csv" ? buildCsv(dataList) : buildJson(dataList);
+  const mimeType = format === "csv" ? "text/csv" : "application/json";
+  const blob = new Blob([content], { type: mimeType });
+  const url = URL.createObjectURL(blob);
+  const date = (/* @__PURE__ */ new Date()).toISOString().slice(0, 10);
+  const prefix = ticker ?? "chart";
+  const filename = `${prefix}_${date}.${format}`;
+  const link = document.createElement("a");
+  link.href = url;
+  link.download = filename;
+  document.body.appendChild(link);
+  link.click();
+  document.body.removeChild(link);
+  URL.revokeObjectURL(url);
+}
+function useWatchlist() {
+  const { state } = useKlinechartsUI();
+  const { dispatch, datafeed } = useKlinechartsUIDispatch();
+  const [items, setItems] = react.useState([]);
+  const subscriptionsRef = react.useRef(/* @__PURE__ */ new Map());
+  const activeSymbol = state.symbol?.ticker ?? null;
+  const addSymbol = react.useCallback(
+    (ticker) => {
+      setItems((prev) => {
+        if (prev.some((item) => item.ticker === ticker)) return prev;
+        return [
+          ...prev,
+          { ticker, lastPrice: null, change: null, changePercent: null }
+        ];
+      });
+      if (subscriptionsRef.current.has(ticker)) return;
+      const symbolInfo = { ticker };
+      const period = state.period;
+      subscriptionsRef.current.set(ticker, { symbolInfo, period });
+      datafeed.subscribe(symbolInfo, period, (bar) => {
+        setItems(
+          (prev) => prev.map((item) => {
+            if (item.ticker !== ticker) return item;
+            const change = bar.close - bar.open;
+            const changePercent = bar.open !== 0 ? change / bar.open * 100 : null;
+            return {
+              ...item,
+              lastPrice: bar.close,
+              change,
+              changePercent
+            };
+          })
+        );
+      });
+    },
+    [datafeed, state.period]
+  );
+  const removeSymbol = react.useCallback(
+    (ticker) => {
+      const sub = subscriptionsRef.current.get(ticker);
+      if (sub) {
+        datafeed.unsubscribe(sub.symbolInfo, sub.period);
+        subscriptionsRef.current.delete(ticker);
+      }
+      setItems((prev) => prev.filter((item) => item.ticker !== ticker));
+    },
+    [datafeed]
+  );
+  const switchSymbol = react.useCallback(
+    (ticker) => {
+      dispatch({ type: "SET_SYMBOL", symbol: { ticker } });
+    },
+    [dispatch]
+  );
+  react.useEffect(() => {
+    return () => {
+      subscriptionsRef.current.forEach((sub) => {
+        datafeed.unsubscribe(sub.symbolInfo, sub.period);
+      });
+      subscriptionsRef.current.clear();
+    };
+  }, [datafeed]);
+  return {
+    items,
+    addSymbol,
+    removeSymbol,
+    switchSymbol,
+    activeSymbol
+  };
+}
+function useReplay() {
+  const { state } = useKlinechartsUI();
+  const [isReplaying, setIsReplaying] = react.useState(false);
+  const [isPaused, setIsPaused] = react.useState(false);
+  const [speed, setSpeedState] = react.useState(1);
+  const [barIndex, setBarIndex] = react.useState(0);
+  const [totalBars, setTotalBars] = react.useState(0);
+  const intervalRef = react.useRef(null);
+  const savedDataRef = react.useRef([]);
+  const currentIndexRef = react.useRef(0);
+  const clearInterval_ = react.useCallback(() => {
+    if (intervalRef.current !== null) {
+      clearInterval(intervalRef.current);
+      intervalRef.current = null;
+    }
+  }, []);
+  const addNextBar = react.useCallback(() => {
+    if (!state.chart) return;
+    const data = savedDataRef.current;
+    const idx = currentIndexRef.current;
+    if (idx >= data.length) {
+      clearInterval_();
+      setIsPaused(true);
+      return;
+    }
+    const bar = data[idx];
+    state.chart.updateData?.(bar);
+    currentIndexRef.current = idx + 1;
+    setBarIndex(idx + 1);
+  }, [state.chart, clearInterval_]);
+  const startInterval = react.useCallback(
+    (currentSpeed) => {
+      clearInterval_();
+      intervalRef.current = setInterval(addNextBar, 1e3 / currentSpeed);
+    },
+    [addNextBar, clearInterval_]
+  );
+  const startReplay = react.useCallback(() => {
+    if (!state.chart) return;
+    const dataList = state.chart.getDataList();
+    if (!dataList || dataList.length === 0) return;
+    savedDataRef.current = [...dataList];
+    currentIndexRef.current = 0;
+    setTotalBars(dataList.length);
+    setBarIndex(0);
+    setIsReplaying(true);
+    setIsPaused(false);
+    state.chart.clearData?.();
+    startInterval(speed);
+  }, [state.chart, speed, startInterval]);
+  const stopReplay = react.useCallback(() => {
+    if (!state.chart) return;
+    clearInterval_();
+    const data = savedDataRef.current;
+    if (data.length > 0) {
+      state.chart.clearData?.();
+      for (const bar of data) {
+        state.chart.updateData?.(bar);
+      }
+    }
+    savedDataRef.current = [];
+    currentIndexRef.current = 0;
+    setIsReplaying(false);
+    setIsPaused(false);
+    setBarIndex(0);
+    setTotalBars(0);
+  }, [state.chart, clearInterval_]);
+  const togglePause = react.useCallback(() => {
+    if (!isReplaying) return;
+    if (isPaused) {
+      startInterval(speed);
+      setIsPaused(false);
+    } else {
+      clearInterval_();
+      setIsPaused(true);
+    }
+  }, [isReplaying, isPaused, speed, startInterval, clearInterval_]);
+  const stepForward = react.useCallback(() => {
+    if (!isReplaying || !isPaused) return;
+    addNextBar();
+  }, [isReplaying, isPaused, addNextBar]);
+  const stepBackward = react.useCallback(() => {
+    if (!isReplaying || !isPaused || !state.chart) return;
+    const idx = currentIndexRef.current;
+    if (idx <= 1) return;
+    const data = savedDataRef.current;
+    state.chart.clearData?.();
+    for (let i = 0; i < idx - 1; i++) {
+      state.chart.updateData?.(data[i]);
+    }
+    currentIndexRef.current = idx - 1;
+    setBarIndex(idx - 1);
+  }, [isReplaying, isPaused, state.chart]);
+  const seekTo = react.useCallback(
+    (targetIndex) => {
+      if (!isReplaying || !state.chart) return;
+      const data = savedDataRef.current;
+      const clamped = Math.max(0, Math.min(targetIndex, data.length));
+      clearInterval_();
+      setIsPaused(true);
+      state.chart.clearData?.();
+      for (let i = 0; i < clamped; i++) {
+        state.chart.updateData?.(data[i]);
+      }
+      currentIndexRef.current = clamped;
+      setBarIndex(clamped);
+    },
+    [isReplaying, state.chart, clearInterval_]
+  );
+  const setSpeed = react.useCallback(
+    (newSpeed) => {
+      setSpeedState(newSpeed);
+      if (isReplaying && !isPaused) {
+        startInterval(newSpeed);
+      }
+    },
+    [isReplaying, isPaused, startInterval]
+  );
+  react.useEffect(() => {
+    return () => {
+      clearInterval_();
+    };
+  }, [clearInterval_]);
+  return {
+    isReplaying,
+    isPaused,
+    speed,
+    barIndex,
+    totalBars,
+    startReplay,
+    stopReplay,
+    togglePause,
+    stepForward,
+    stepBackward,
+    seekTo,
+    setSpeed
+  };
+}
+var DEFAULT_COLORS = [
+  "#2196f3",
+  "#ff9800",
+  "#4caf50",
+  "#e91e63",
+  "#9c27b0",
+  "#00bcd4",
+  "#ff5722",
+  "#8bc34a"
+];
+var colorIndex = 0;
+var compareCounter = 0;
+function useCompare() {
+  const { state, datafeed } = useKlinechartsUI();
+  const [symbols, setSymbols] = react.useState([]);
+  const indicatorsRef = react.useRef(/* @__PURE__ */ new Map());
+  const addSymbol = react.useCallback(
+    async (ticker, color) => {
+      if (!state.chart || !datafeed) return;
+      if (indicatorsRef.current.has(ticker)) return;
+      const assignedColor = color ?? DEFAULT_COLORS[colorIndex++ % DEFAULT_COLORS.length];
+      const mainDataList = state.chart.getDataList();
+      if (!mainDataList || mainDataList.length === 0) return;
+      const from = mainDataList[0].timestamp;
+      const to = mainDataList[mainDataList.length - 1].timestamp;
+      const compareData = await datafeed.getHistoryKLineData(
+        { ticker },
+        { ...state.period, label: "" },
+        from,
+        to
+      );
+      if (!compareData || compareData.length === 0) return;
+      const compareMap = /* @__PURE__ */ new Map();
+      for (const bar of compareData) {
+        compareMap.set(bar.timestamp, bar.close);
+      }
+      let basePrice = null;
+      for (const bar of mainDataList) {
+        const close = compareMap.get(bar.timestamp);
+        if (close != null) {
+          basePrice = close;
+          break;
+        }
+      }
+      if (basePrice === null || basePrice === 0) return;
+      const bp = basePrice;
+      const normalizedData = mainDataList.map((mainBar) => {
+        const close = compareMap.get(mainBar.timestamp);
+        return {
+          pct: close != null ? (close - bp) / bp * 100 : NaN
+        };
+      });
+      const indicatorName = `__cmp_${++compareCounter}_${ticker}`;
+      reactKlinecharts.registerIndicator({
+        name: indicatorName,
+        shortName: ticker,
+        figures: [
+          {
+            key: "pct",
+            title: `${ticker} %: `,
+            type: "line",
+            styles: () => ({ color: assignedColor })
+          }
+        ],
+        calc: () => normalizedData
+      });
+      const paneId = state.chart.createIndicator(
+        { name: indicatorName },
+        { isStack: true, pane: { id: "candle_pane" } }
+      );
+      indicatorsRef.current.set(ticker, {
+        name: indicatorName,
+        paneId: typeof paneId === "string" ? paneId : "candle_pane"
+      });
+      setSymbols((prev) => {
+        if (prev.some((s) => s.ticker === ticker)) return prev;
+        return [
+          ...prev,
+          { ticker, basePrice: bp, color: assignedColor, visible: true }
+        ];
+      });
+    },
+    [state.chart, state.period, datafeed]
+  );
+  const removeSymbol = react.useCallback(
+    (ticker) => {
+      const info = indicatorsRef.current.get(ticker);
+      if (info && state.chart) {
+        try {
+          state.chart.removeIndicator({ name: info.name });
+        } catch {
+        }
+        indicatorsRef.current.delete(ticker);
+      }
+      setSymbols((prev) => prev.filter((s) => s.ticker !== ticker));
+    },
+    [state.chart]
+  );
+  const toggleSymbol = react.useCallback(
+    (ticker) => {
+      const info = indicatorsRef.current.get(ticker);
+      if (!info || !state.chart) return;
+      setSymbols((prev) => {
+        const sym = prev.find((s) => s.ticker === ticker);
+        if (!sym) return prev;
+        const newVisible = !sym.visible;
+        state.chart?.overrideIndicator({
+          name: info.name,
+          visible: newVisible
+        });
+        return prev.map(
+          (s) => s.ticker === ticker ? { ...s, visible: newVisible } : s
+        );
+      });
+    },
+    [state.chart]
+  );
+  const clearAll = react.useCallback(() => {
+    indicatorsRef.current.forEach((info) => {
+      try {
+        state.chart?.removeIndicator({ name: info.name });
+      } catch {
+      }
+    });
+    indicatorsRef.current.clear();
+    setSymbols([]);
+  }, [state.chart]);
+  react.useEffect(() => {
+    return () => {
+      indicatorsRef.current.forEach((info) => {
+        try {
+          state.chart?.removeIndicator({ name: info.name });
+        } catch {
+        }
+      });
+      indicatorsRef.current.clear();
+    };
+  }, [state.chart]);
+  return { symbols, addSymbol, removeSymbol, toggleSymbol, clearAll };
+}
+var MEASURE_OVERLAY_ID = "__measure_line__";
+function useMeasure() {
+  const { state } = useKlinechartsUI();
+  const [isActive, setIsActive] = react.useState(false);
+  const [fromPoint, setFromPoint] = react.useState(null);
+  const [result, setResult] = react.useState(null);
+  const clickCountRef = react.useRef(0);
+  const computeResult = react.useCallback(
+    (from, to) => {
+      const priceDiff = to.price - from.price;
+      const pricePercent = from.price !== 0 ? priceDiff / from.price * 100 : 0;
+      const bars = Math.abs(to.barIndex - from.barIndex);
+      const timeDiff = Math.abs(to.timestamp - from.timestamp);
+      return { from, to, priceDiff, pricePercent, bars, timeDiff };
+    },
+    []
+  );
+  const cleanup = react.useCallback(() => {
+    state.chart?.removeOverlay({ id: MEASURE_OVERLAY_ID });
+  }, [state.chart]);
+  const startMeasure = react.useCallback(() => {
+    cleanup();
+    setIsActive(true);
+    setFromPoint(null);
+    setResult(null);
+    clickCountRef.current = 0;
+    if (!state.chart) return;
+    state.chart.createOverlay({
+      name: "segment",
+      id: MEASURE_OVERLAY_ID,
+      groupId: "measure",
+      styles: {
+        line: {
+          style: "dashed",
+          color: "#FFD600",
+          size: 1
+        }
+      },
+      lock: true,
+      onDrawEnd: (event) => {
+        const overlay = event?.overlay;
+        const points = overlay?.points;
+        if (!points || points.length < 2) return;
+        const chart = state.chart;
+        if (!chart) return;
+        const dataList = chart.getDataList();
+        if (!dataList || dataList.length === 0) return;
+        const makePoint = (p) => {
+          const idx = Math.max(
+            0,
+            Math.min(p.dataIndex ?? 0, dataList.length - 1)
+          );
+          const bar = dataList[idx];
+          return {
+            price: p.value ?? bar?.close ?? 0,
+            timestamp: bar?.timestamp ?? 0,
+            barIndex: idx
+          };
+        };
+        const from = makePoint(points[0]);
+        const to = makePoint(points[1]);
+        setFromPoint(from);
+        setResult(computeResult(from, to));
+        setIsActive(false);
+      }
+    });
+  }, [state.chart, cleanup, computeResult]);
+  const cancelMeasure = react.useCallback(() => {
+    cleanup();
+    setIsActive(false);
+    setFromPoint(null);
+    clickCountRef.current = 0;
+  }, [cleanup]);
+  const clearResult = react.useCallback(() => {
+    cleanup();
+    setResult(null);
+    setFromPoint(null);
+  }, [cleanup]);
+  react.useEffect(() => {
+    return () => {
+      state.chart?.removeOverlay({ id: MEASURE_OVERLAY_ID });
+    };
+  }, [state.chart]);
+  return {
+    isActive,
+    startMeasure,
+    cancelMeasure,
+    result,
+    clearResult,
+    fromPoint
+  };
+}
+var annotationCounter = 0;
+function useAnnotations() {
+  const { state } = useKlinechartsUI();
+  const [annotations, setAnnotations] = react.useState([]);
+  const addAnnotation = react.useCallback(
+    (text, price, timestamp, color) => {
+      const id = `annotation_${++annotationCounter}`;
+      const annotation = {
+        id,
+        text,
+        price,
+        timestamp,
+        color
+      };
+      setAnnotations((prev) => [...prev, annotation]);
+      if (state.chart) {
+        state.chart.createOverlay({
+          name: "simpleAnnotation",
+          id,
+          groupId: "annotations",
+          points: [{ timestamp, value: price }],
+          extendData: text,
+          styles: color ? {
+            text: {
+              color
+            }
+          } : void 0,
+          lock: true
+        });
+      }
+      return id;
+    },
+    [state.chart]
+  );
+  const removeAnnotation = react.useCallback(
+    (id) => {
+      setAnnotations((prev) => prev.filter((a) => a.id !== id));
+      state.chart?.removeOverlay({ id });
+    },
+    [state.chart]
+  );
+  const updateAnnotation = react.useCallback(
+    (id, updates) => {
+      setAnnotations(
+        (prev) => prev.map((a) => a.id === id ? { ...a, ...updates } : a)
+      );
+      if (state.chart) {
+        const overrideData = { id };
+        if (updates.text !== void 0) {
+          overrideData.extendData = updates.text;
+        }
+        if (updates.color !== void 0) {
+          overrideData.styles = {
+            text: {
+              color: updates.color
+            }
+          };
+        }
+        state.chart.overrideOverlay(overrideData);
+      }
+    },
+    [state.chart]
+  );
+  const clearAnnotations = react.useCallback(() => {
+    setAnnotations((prev) => {
+      for (const annotation of prev) {
+        state.chart?.removeOverlay({ id: annotation.id });
+      }
+      return [];
+    });
+  }, [state.chart]);
+  react.useEffect(() => {
+    return () => {
+      state.chart?.removeOverlay({ groupId: "annotations" });
+    };
+  }, [state.chart]);
+  return {
+    annotations,
+    addAnnotation,
+    removeAnnotation,
+    updateAnnotation,
+    clearAnnotations
+  };
+}
 
 // src/utils/createDataLoader.ts
 function createDataLoader(datafeed, dispatch) {
@@ -2312,171 +3294,175 @@ function createDataLoader(datafeed, dispatch) {
 
 Object.defineProperty(exports, "TA", {
   enumerable: true,
-  get: function () { return chunk47JXSAIT_cjs.TA_default; }
+  get: function () { return chunkPIFLJKYF_cjs.TA_default; }
 });
 Object.defineProperty(exports, "abcd", {
   enumerable: true,
-  get: function () { return chunk47JXSAIT_cjs.abcd_default; }
+  get: function () { return chunkPIFLJKYF_cjs.abcd_default; }
 });
 Object.defineProperty(exports, "anyWaves", {
   enumerable: true,
-  get: function () { return chunk47JXSAIT_cjs.anyWaves_default; }
+  get: function () { return chunkPIFLJKYF_cjs.anyWaves_default; }
 });
 Object.defineProperty(exports, "arrow", {
   enumerable: true,
-  get: function () { return chunk47JXSAIT_cjs.arrow_default; }
+  get: function () { return chunkPIFLJKYF_cjs.arrow_default; }
 });
 Object.defineProperty(exports, "bollTv", {
   enumerable: true,
-  get: function () { return chunk47JXSAIT_cjs.bollTv_default; }
+  get: function () { return chunkPIFLJKYF_cjs.bollTv_default; }
 });
 Object.defineProperty(exports, "brush", {
   enumerable: true,
-  get: function () { return chunk47JXSAIT_cjs.brush_default; }
+  get: function () { return chunkPIFLJKYF_cjs.brush_default; }
 });
 Object.defineProperty(exports, "cci", {
   enumerable: true,
-  get: function () { return chunk47JXSAIT_cjs.cci_default; }
+  get: function () { return chunkPIFLJKYF_cjs.cci_default; }
 });
 Object.defineProperty(exports, "circle", {
   enumerable: true,
-  get: function () { return chunk47JXSAIT_cjs.circle_default; }
+  get: function () { return chunkPIFLJKYF_cjs.circle_default; }
+});
+Object.defineProperty(exports, "depthOverlay", {
+  enumerable: true,
+  get: function () { return chunkPIFLJKYF_cjs.depthOverlay_default; }
 });
 Object.defineProperty(exports, "eightWaves", {
   enumerable: true,
-  get: function () { return chunk47JXSAIT_cjs.eightWaves_default; }
+  get: function () { return chunkPIFLJKYF_cjs.eightWaves_default; }
 });
 Object.defineProperty(exports, "elliottWave", {
   enumerable: true,
-  get: function () { return chunk47JXSAIT_cjs.elliottWave_default; }
+  get: function () { return chunkPIFLJKYF_cjs.elliottWave_default; }
 });
 Object.defineProperty(exports, "fibRetracement", {
   enumerable: true,
-  get: function () { return chunk47JXSAIT_cjs.fibRetracement_default; }
+  get: function () { return chunkPIFLJKYF_cjs.fibRetracement_default; }
 });
 Object.defineProperty(exports, "fibonacciCircle", {
   enumerable: true,
-  get: function () { return chunk47JXSAIT_cjs.fibonacciCircle_default; }
+  get: function () { return chunkPIFLJKYF_cjs.fibonacciCircle_default; }
 });
 Object.defineProperty(exports, "fibonacciExtension", {
   enumerable: true,
-  get: function () { return chunk47JXSAIT_cjs.fibonacciExtension_default; }
+  get: function () { return chunkPIFLJKYF_cjs.fibonacciExtension_default; }
 });
 Object.defineProperty(exports, "fibonacciSegment", {
   enumerable: true,
-  get: function () { return chunk47JXSAIT_cjs.fibonacciSegment_default; }
+  get: function () { return chunkPIFLJKYF_cjs.fibonacciSegment_default; }
 });
 Object.defineProperty(exports, "fibonacciSpeedResistanceFan", {
   enumerable: true,
-  get: function () { return chunk47JXSAIT_cjs.fibonacciSpeedResistanceFan_default; }
+  get: function () { return chunkPIFLJKYF_cjs.fibonacciSpeedResistanceFan_default; }
 });
 Object.defineProperty(exports, "fibonacciSpiral", {
   enumerable: true,
-  get: function () { return chunk47JXSAIT_cjs.fibonacciSpiral_default; }
+  get: function () { return chunkPIFLJKYF_cjs.fibonacciSpiral_default; }
 });
 Object.defineProperty(exports, "fiveWaves", {
   enumerable: true,
-  get: function () { return chunk47JXSAIT_cjs.fiveWaves_default; }
+  get: function () { return chunkPIFLJKYF_cjs.fiveWaves_default; }
 });
 Object.defineProperty(exports, "gannBox", {
   enumerable: true,
-  get: function () { return chunk47JXSAIT_cjs.gannBox_default; }
+  get: function () { return chunkPIFLJKYF_cjs.gannBox_default; }
 });
 Object.defineProperty(exports, "gannFan", {
   enumerable: true,
-  get: function () { return chunk47JXSAIT_cjs.gannFan_default; }
+  get: function () { return chunkPIFLJKYF_cjs.gannFan_default; }
 });
 Object.defineProperty(exports, "hma", {
   enumerable: true,
-  get: function () { return chunk47JXSAIT_cjs.hma_default; }
+  get: function () { return chunkPIFLJKYF_cjs.hma_default; }
 });
 Object.defineProperty(exports, "ichimoku", {
   enumerable: true,
-  get: function () { return chunk47JXSAIT_cjs.ichimoku_default; }
+  get: function () { return chunkPIFLJKYF_cjs.ichimoku_default; }
 });
 Object.defineProperty(exports, "indicators", {
   enumerable: true,
-  get: function () { return chunk47JXSAIT_cjs.indicators; }
+  get: function () { return chunkPIFLJKYF_cjs.indicators; }
 });
 Object.defineProperty(exports, "longPosition", {
   enumerable: true,
-  get: function () { return chunk47JXSAIT_cjs.longPosition_default; }
+  get: function () { return chunkPIFLJKYF_cjs.longPosition_default; }
 });
 Object.defineProperty(exports, "maRibbon", {
   enumerable: true,
-  get: function () { return chunk47JXSAIT_cjs.maRibbon_default; }
+  get: function () { return chunkPIFLJKYF_cjs.maRibbon_default; }
 });
 Object.defineProperty(exports, "macdTv", {
   enumerable: true,
-  get: function () { return chunk47JXSAIT_cjs.macdTv_default; }
+  get: function () { return chunkPIFLJKYF_cjs.macdTv_default; }
 });
 Object.defineProperty(exports, "measure", {
   enumerable: true,
-  get: function () { return chunk47JXSAIT_cjs.measure_default; }
+  get: function () { return chunkPIFLJKYF_cjs.measure_default; }
 });
 Object.defineProperty(exports, "orderLine", {
   enumerable: true,
-  get: function () { return chunk47JXSAIT_cjs.orderLine_default; }
+  get: function () { return chunkPIFLJKYF_cjs.orderLine_default; }
 });
 Object.defineProperty(exports, "overlays", {
   enumerable: true,
-  get: function () { return chunk47JXSAIT_cjs.overlays; }
+  get: function () { return chunkPIFLJKYF_cjs.overlays; }
 });
 Object.defineProperty(exports, "parallelChannel", {
   enumerable: true,
-  get: function () { return chunk47JXSAIT_cjs.parallelChannel_default; }
+  get: function () { return chunkPIFLJKYF_cjs.parallelChannel_default; }
 });
 Object.defineProperty(exports, "parallelogram", {
   enumerable: true,
-  get: function () { return chunk47JXSAIT_cjs.parallelogram_default; }
+  get: function () { return chunkPIFLJKYF_cjs.parallelogram_default; }
 });
 Object.defineProperty(exports, "pivotPoints", {
   enumerable: true,
-  get: function () { return chunk47JXSAIT_cjs.pivotPoints_default; }
+  get: function () { return chunkPIFLJKYF_cjs.pivotPoints_default; }
 });
 Object.defineProperty(exports, "ray", {
   enumerable: true,
-  get: function () { return chunk47JXSAIT_cjs.ray_default; }
+  get: function () { return chunkPIFLJKYF_cjs.ray_default; }
 });
 Object.defineProperty(exports, "rect", {
   enumerable: true,
-  get: function () { return chunk47JXSAIT_cjs.rect_default; }
+  get: function () { return chunkPIFLJKYF_cjs.rect_default; }
 });
 Object.defineProperty(exports, "registerExtensions", {
   enumerable: true,
-  get: function () { return chunk47JXSAIT_cjs.registerExtensions; }
+  get: function () { return chunkPIFLJKYF_cjs.registerExtensions; }
 });
 Object.defineProperty(exports, "rsiTv", {
   enumerable: true,
-  get: function () { return chunk47JXSAIT_cjs.rsiTv_default; }
+  get: function () { return chunkPIFLJKYF_cjs.rsiTv_default; }
 });
 Object.defineProperty(exports, "shortPosition", {
   enumerable: true,
-  get: function () { return chunk47JXSAIT_cjs.shortPosition_default; }
+  get: function () { return chunkPIFLJKYF_cjs.shortPosition_default; }
 });
 Object.defineProperty(exports, "stochastic", {
   enumerable: true,
-  get: function () { return chunk47JXSAIT_cjs.stochastic_default; }
+  get: function () { return chunkPIFLJKYF_cjs.stochastic_default; }
 });
 Object.defineProperty(exports, "superTrend", {
   enumerable: true,
-  get: function () { return chunk47JXSAIT_cjs.superTrend_default; }
+  get: function () { return chunkPIFLJKYF_cjs.superTrend_default; }
 });
 Object.defineProperty(exports, "threeWaves", {
   enumerable: true,
-  get: function () { return chunk47JXSAIT_cjs.threeWaves_default; }
+  get: function () { return chunkPIFLJKYF_cjs.threeWaves_default; }
 });
 Object.defineProperty(exports, "triangle", {
   enumerable: true,
-  get: function () { return chunk47JXSAIT_cjs.triangle_default; }
+  get: function () { return chunkPIFLJKYF_cjs.triangle_default; }
 });
 Object.defineProperty(exports, "vwap", {
   enumerable: true,
-  get: function () { return chunk47JXSAIT_cjs.vwap_default; }
+  get: function () { return chunkPIFLJKYF_cjs.vwap_default; }
 });
 Object.defineProperty(exports, "xabcd", {
   enumerable: true,
-  get: function () { return chunk47JXSAIT_cjs.xabcd_default; }
+  get: function () { return chunkPIFLJKYF_cjs.xabcd_default; }
 });
 exports.CANDLE_TYPES = CANDLE_TYPES;
 exports.COMPARE_RULES = COMPARE_RULES;
@@ -2493,6 +3479,11 @@ exports.TIMEZONES = TIMEZONES;
 exports.TOOLTIP_SHOW_RULES = TOOLTIP_SHOW_RULES;
 exports.YAXIS_POSITIONS = YAXIS_POSITIONS;
 exports.createDataLoader = createDataLoader;
+exports.useAlerts = useAlerts;
+exports.useAnnotations = useAnnotations;
+exports.useCompare = useCompare;
+exports.useCrosshair = useCrosshair;
+exports.useDataExport = useDataExport;
 exports.useDrawingTools = useDrawingTools;
 exports.useFullscreen = useFullscreen;
 exports.useIndicators = useIndicators;
@@ -2501,12 +3492,15 @@ exports.useKlinechartsUILoading = useKlinechartsUILoading;
 exports.useKlinechartsUISettings = useKlinechartsUISettings;
 exports.useKlinechartsUITheme = useKlinechartsUITheme;
 exports.useLayoutManager = useLayoutManager;
+exports.useMeasure = useMeasure;
 exports.useOrderLines = useOrderLines;
 exports.usePeriods = usePeriods;
+exports.useReplay = useReplay;
 exports.useScreenshot = useScreenshot;
 exports.useScriptEditor = useScriptEditor;
 exports.useSymbolSearch = useSymbolSearch;
 exports.useTimezone = useTimezone;
 exports.useUndoRedo = useUndoRedo;
+exports.useWatchlist = useWatchlist;
 //# sourceMappingURL=index.cjs.map
 //# sourceMappingURL=index.cjs.map