react-klinecharts-ui 0.1.0 → 0.2.0

package/dist/index.cjs

@@ -1,6 +1,6 @@
 'use strict';
 
-var chunkSLTXNLKN_cjs = require('./chunk-SLTXNLKN.cjs');
+var chunk47JXSAIT_cjs = require('./chunk-47JXSAIT.cjs');
 var react = require('react');
 var reactKlinecharts = require('react-klinecharts');
 var jsxRuntime = require('react/jsx-runtime');
@@ -125,6 +125,7 @@ function KlinechartsUIProvider({
     })
   );
   const fullscreenContainerRef = react.useRef(null);
+  const undoRedoListenerRef = react.useRef(null);
   const stateRef = react.useRef(state);
   stateRef.current = state;
   const callbacksRef = react.useRef({
@@ -176,7 +177,7 @@ function KlinechartsUIProvider({
   const extraOverlaysRef = react.useRef(extraOverlays);
   react.useEffect(() => {
     if (shouldRegister) {
-      chunkSLTXNLKN_cjs.registerExtensions();
+      chunk47JXSAIT_cjs.registerExtensions();
     }
     extraOverlaysRef.current?.forEach((overlay) => reactKlinecharts.registerOverlay(overlay));
   }, [shouldRegister]);
@@ -190,7 +191,8 @@ function KlinechartsUIProvider({
       dispatch: enhancedDispatch,
       datafeed,
       onSettingsChange,
-      fullscreenContainerRef
+      fullscreenContainerRef,
+      undoRedoListenerRef
     }),
     [enhancedDispatch, datafeed, onSettingsChange]
   );
@@ -358,7 +360,14 @@ var MAIN_INDICATORS = [
   "SMA",
   "BOLL",
   "SAR",
-  "BBI"
+  "BBI",
+  "BOLL_TV",
+  "Ichimoku",
+  "SuperTrend",
+  "HMA",
+  "VWAP",
+  "PivotPoints",
+  "MA_Ribbon"
 ];
 var SUB_INDICATORS = [
   "MA",
@@ -386,7 +395,11 @@ var SUB_INDICATORS = [
   "ROC",
   "PVT",
   "BBI",
-  "AO"
+  "AO",
+  "MACD_TV",
+  "RSI_TV",
+  "CCI_TV",
+  "Stochastic"
 ];
 var INDICATOR_PARAMS = {
   SMA: {
@@ -545,12 +558,95 @@ var INDICATOR_PARAMS = {
       { label: "params_1", defaultValue: 5 },
       { label: "params_2", defaultValue: 34 }
     ]
+  },
+  BOLL_TV: {
+    name: "BOLL_TV",
+    localeKey: "boll_tv",
+    params: [
+      { label: "period", defaultValue: 20 },
+      { label: "multiplier", defaultValue: 2 }
+    ]
+  },
+  Ichimoku: {
+    name: "Ichimoku",
+    localeKey: "ichimoku",
+    params: [
+      { label: "tenkan", defaultValue: 9 },
+      { label: "kijun", defaultValue: 26 },
+      { label: "senkou_b", defaultValue: 52 },
+      { label: "offset", defaultValue: 26 }
+    ]
+  },
+  SuperTrend: {
+    name: "SuperTrend",
+    localeKey: "super_trend",
+    params: [
+      { label: "period", defaultValue: 10 },
+      { label: "factor", defaultValue: 3 }
+    ]
+  },
+  HMA: {
+    name: "HMA",
+    localeKey: "hma",
+    params: [{ label: "period", defaultValue: 9 }]
+  },
+  VWAP: {
+    name: "VWAP",
+    localeKey: "vwap",
+    params: []
+  },
+  PivotPoints: {
+    name: "PivotPoints",
+    localeKey: "pivot_points",
+    params: []
+  },
+  MA_Ribbon: {
+    name: "MA_Ribbon",
+    localeKey: "ma_ribbon",
+    params: [
+      { label: "period_1", defaultValue: 10 },
+      { label: "period_2", defaultValue: 20 },
+      { label: "period_3", defaultValue: 30 },
+      { label: "period_4", defaultValue: 40 }
+    ]
+  },
+  MACD_TV: {
+    name: "MACD_TV",
+    localeKey: "macd_tv",
+    params: [
+      { label: "fast", defaultValue: 12 },
+      { label: "slow", defaultValue: 26 },
+      { label: "signal", defaultValue: 9 }
+    ]
+  },
+  RSI_TV: {
+    name: "RSI_TV",
+    localeKey: "rsi_tv",
+    params: [
+      { label: "rsi_period", defaultValue: 14 },
+      { label: "ma_period", defaultValue: 14 }
+    ]
+  },
+  CCI_TV: {
+    name: "CCI_TV",
+    localeKey: "cci_tv",
+    params: [{ label: "period", defaultValue: 20 }]
+  },
+  Stochastic: {
+    name: "Stochastic",
+    localeKey: "stochastic",
+    params: [
+      { label: "period", defaultValue: 14 },
+      { label: "smooth_k", defaultValue: 3 },
+      { label: "smooth_d", defaultValue: 3 }
+    ]
   }
 };
 
 // src/hooks/useIndicators.ts
 function useIndicators() {
   const { state, dispatch } = useKlinechartsUI();
+  const { undoRedoListenerRef } = useKlinechartsUIDispatch();
   const mainIndicators = react.useMemo(() => {
     const activeNames = state.mainIndicators;
     const inactive = MAIN_INDICATORS.filter((n) => !activeNames.includes(n));
@@ -577,16 +673,24 @@ function useIndicators() {
       );
       const newIndicators = [...state.mainIndicators, name];
       dispatch({ type: "SET_MAIN_INDICATORS", indicators: newIndicators });
+      undoRedoListenerRef.current?.({
+        type: "indicator_toggled",
+        data: { name, wasActive: false, isMain: true, paneId: "candle_pane" }
+      });
     },
-    [state.chart, state.mainIndicators, dispatch]
+    [state.chart, state.mainIndicators, dispatch, undoRedoListenerRef]
   );
   const removeMainIndicator = react.useCallback(
     (name) => {
       state.chart?.removeIndicator({ id: `main_${name}` });
       const newIndicators = state.mainIndicators.filter((n) => n !== name);
       dispatch({ type: "SET_MAIN_INDICATORS", indicators: newIndicators });
+      undoRedoListenerRef.current?.({
+        type: "indicator_toggled",
+        data: { name, wasActive: true, isMain: true, paneId: "candle_pane" }
+      });
     },
-    [state.chart, state.mainIndicators, dispatch]
+    [state.chart, state.mainIndicators, dispatch, undoRedoListenerRef]
   );
   const addSubIndicator = react.useCallback(
     (name) => {
@@ -596,17 +700,26 @@ function useIndicators() {
       const paneId = state.chart?.getIndicators({ id })?.[0]?.paneId ?? "";
       const newIndicators = { ...state.subIndicators, [name]: paneId };
       dispatch({ type: "SET_SUB_INDICATORS", indicators: newIndicators });
+      undoRedoListenerRef.current?.({
+        type: "indicator_toggled",
+        data: { name, wasActive: false, isMain: false, paneId }
+      });
     },
-    [state.chart, state.subIndicators, dispatch]
+    [state.chart, state.subIndicators, dispatch, undoRedoListenerRef]
   );
   const removeSubIndicator = react.useCallback(
     (name) => {
+      const paneId = state.subIndicators[name] ?? "";
       state.chart?.removeIndicator({ id: `sub_${name}` });
       const newIndicators = { ...state.subIndicators };
       delete newIndicators[name];
       dispatch({ type: "SET_SUB_INDICATORS", indicators: newIndicators });
+      undoRedoListenerRef.current?.({
+        type: "indicator_toggled",
+        data: { name, wasActive: true, isMain: false, paneId }
+      });
     },
-    [state.chart, state.subIndicators, dispatch]
+    [state.chart, state.subIndicators, dispatch, undoRedoListenerRef]
   );
   const toggleMainIndicator = react.useCallback(
     (name) => {
@@ -652,9 +765,15 @@ function useIndicators() {
   const moveToMain = react.useCallback(
     (name) => {
       if (!state.chart) return;
+      const prevCalcParams = state.chart.getIndicators({ id: `sub_${name}` })?.[0]?.calcParams;
       state.chart.removeIndicator({ id: `sub_${name}` });
       state.chart.createIndicator(
-        { name, id: `main_${name}`, paneId: "candle_pane" },
+        {
+          name,
+          id: `main_${name}`,
+          paneId: "candle_pane",
+          ...prevCalcParams ? { calcParams: prevCalcParams } : {}
+        },
         true,
         { id: "candle_pane" }
       );
@@ -671,9 +790,14 @@ function useIndicators() {
   const moveToSub = react.useCallback(
     (name) => {
       if (!state.chart) return;
+      const prevCalcParams = state.chart.getIndicators({ id: `main_${name}` })?.[0]?.calcParams;
       state.chart.removeIndicator({ id: `main_${name}` });
       const subId = `sub_${name}`;
-      state.chart.createIndicator({ name, id: subId });
+      state.chart.createIndicator({
+        name,
+        id: subId,
+        ...prevCalcParams ? { calcParams: prevCalcParams } : {}
+      });
       const paneId = state.chart.getIndicators({ id: subId })?.[0]?.paneId ?? "";
       const newMain = state.mainIndicators.filter((n) => n !== name);
       dispatch({ type: "SET_MAIN_INDICATORS", indicators: newMain });
@@ -737,7 +861,9 @@ var DRAWING_CATEGORIES = [
     key: "moreLine",
     tools: [
       { name: "priceChannelLine", localeKey: "price_channel_line" },
-      { name: "parallelStraightLine", localeKey: "parallel_straight_line" }
+      { name: "parallelStraightLine", localeKey: "parallel_straight_line" },
+      { name: "ray", localeKey: "ray" },
+      { name: "parallelChannel", localeKey: "parallel_channel" }
     ]
   },
   {
@@ -761,7 +887,9 @@ var DRAWING_CATEGORIES = [
         localeKey: "fibonacci_speed_resistance_fan"
       },
       { name: "fibonacciExtension", localeKey: "fibonacci_extension" },
-      { name: "gannBox", localeKey: "gann_box" }
+      { name: "fibRetracement", localeKey: "fib_retracement" },
+      { name: "gannBox", localeKey: "gann_box" },
+      { name: "gannFan", localeKey: "gann_fan" }
     ]
   },
   {
@@ -772,7 +900,27 @@ var DRAWING_CATEGORIES = [
       { name: "threeWaves", localeKey: "three_waves" },
       { name: "fiveWaves", localeKey: "five_waves" },
       { name: "eightWaves", localeKey: "eight_waves" },
-      { name: "anyWaves", localeKey: "any_waves" }
+      { name: "anyWaves", localeKey: "any_waves" },
+      { name: "elliottWave", localeKey: "elliott_wave" }
+    ]
+  },
+  {
+    key: "measure",
+    tools: [
+      { name: "measure", localeKey: "measure" }
+    ]
+  },
+  {
+    key: "position",
+    tools: [
+      { name: "longPosition", localeKey: "long_position" },
+      { name: "shortPosition", localeKey: "short_position" }
+    ]
+  },
+  {
+    key: "annotation",
+    tools: [
+      { name: "brush", localeKey: "brush" }
     ]
   }
 ];
@@ -781,6 +929,7 @@ var DRAWING_CATEGORIES = [
 var DRAWING_GROUP_ID = "drawing_tools";
 function useDrawingTools() {
   const { state } = useKlinechartsUI();
+  const { undoRedoListenerRef } = useKlinechartsUIDispatch();
   const [activeTool, setActiveTool] = react.useState(null);
   const [magnetMode, setMagnetModeState] = react.useState("normal");
   const [isLocked, setIsLocked] = react.useState(false);
@@ -803,10 +952,25 @@ function useDrawingTools() {
         groupId: DRAWING_GROUP_ID,
         lock: isLocked,
         visible: isVisible,
-        mode: magnetMode === "strong" ? "strong_magnet" : magnetMode === "weak" ? "weak_magnet" : "normal"
+        mode: magnetMode === "strong" ? "strong_magnet" : magnetMode === "weak" ? "weak_magnet" : "normal",
+        onDrawEnd: (event) => {
+          const o = event.overlay;
+          undoRedoListenerRef.current?.({
+            type: "overlay_added",
+            data: {
+              id: o.id,
+              overlayData: {
+                name: o.name,
+                points: o.points,
+                styles: o.styles,
+                extendData: o.extendData
+              }
+            }
+          });
+        }
       });
     },
-    [state.chart, isLocked, isVisible, magnetMode]
+    [state.chart, isLocked, isVisible, magnetMode, undoRedoListenerRef]
   );
   const clearActiveTool = react.useCallback(() => {
     setActiveTool(null);
@@ -854,9 +1018,23 @@ function useDrawingTools() {
     }
   }, [state.chart, isVisible]);
   const removeAllDrawings = react.useCallback(() => {
+    const overlays2 = state.chart?.getOverlays({ groupId: DRAWING_GROUP_ID });
+    if (overlays2 && overlays2.length > 0) {
+      const snapshot = overlays2.map((o) => ({
+        name: o.name,
+        id: o.id,
+        points: o.points,
+        styles: o.styles,
+        extendData: o.extendData
+      }));
+      undoRedoListenerRef.current?.({
+        type: "overlays_removed",
+        data: { overlays: snapshot }
+      });
+    }
     state.chart?.removeOverlay({ groupId: DRAWING_GROUP_ID });
     setActiveTool(null);
-  }, [state.chart]);
+  }, [state.chart, undoRedoListenerRef]);
   return {
     categories,
     activeTool,
@@ -1260,12 +1438,12 @@ function useOrderLines() {
       if (onPriceChange) {
         callbacksRef.current.set(id, onPriceChange);
       }
-      const dataCount = state.chart.getDataList().length;
-      const anchorIndex = dataCount > 0 ? dataCount - 1 : 0;
+      const dataList = state.chart.getDataList();
+      const anchorTimestamp = dataList.length > 0 ? dataList[dataList.length - 1].timestamp : Date.now();
       state.chart.createOverlay({
         name: "orderLine",
         id,
-        points: [{ dataIndex: anchorIndex, value: price }],
+        points: [{ timestamp: anchorTimestamp, value: price }],
         extendData,
         lock: !draggable,
         mode: "normal",
@@ -1289,11 +1467,11 @@ function useOrderLines() {
       if (onPriceChange !== void 0) {
         callbacksRef.current.set(id, onPriceChange);
       }
-      const dataCount = state.chart.getDataList().length;
-      const anchorIndex = dataCount > 0 ? dataCount - 1 : 0;
+      const dataList = state.chart.getDataList();
+      const anchorTimestamp = dataList.length > 0 ? dataList[dataList.length - 1].timestamp : Date.now();
       state.chart.overrideOverlay({
         id,
-        ...price != null ? { points: [{ dataIndex: anchorIndex, value: price }] } : {},
+        ...price != null ? { points: [{ timestamp: anchorTimestamp, value: price }] } : {},
         ...draggable != null ? { lock: !draggable } : {},
         extendData: {
           ...existing.extendData,
@@ -1321,6 +1499,752 @@ function useOrderLines() {
     removeAllOrderLines
   };
 }
+var DRAWING_GROUP_ID2 = "drawing_tools";
+function useUndoRedo() {
+  const { state, dispatch } = useKlinechartsUI();
+  const { undoRedoListenerRef } = useKlinechartsUIDispatch();
+  const [undoStack, setUndoStack] = react.useState([]);
+  const [redoStack, setRedoStack] = react.useState([]);
+  const isProcessingRef = react.useRef(false);
+  const canUndo = undoStack.length > 0;
+  const canRedo = redoStack.length > 0;
+  const pushAction = react.useCallback((action) => {
+    if (isProcessingRef.current) return;
+    setUndoStack((prev) => [...prev, action]);
+    setRedoStack([]);
+  }, []);
+  react.useEffect(() => {
+    undoRedoListenerRef.current = pushAction;
+    return () => {
+      undoRedoListenerRef.current = null;
+    };
+  }, [pushAction, undoRedoListenerRef]);
+  const clear = react.useCallback(() => {
+    setUndoStack([]);
+    setRedoStack([]);
+  }, []);
+  const undo = react.useCallback(() => {
+    if (undoStack.length === 0 || !state.chart || isProcessingRef.current)
+      return;
+    isProcessingRef.current = true;
+    const action = undoStack[undoStack.length - 1];
+    setUndoStack((prev) => prev.slice(0, -1));
+    try {
+      switch (action.type) {
+        case "overlay_added": {
+          const { id, overlayData } = action.data;
+          state.chart.removeOverlay({ id });
+          setRedoStack((prev) => [
+            ...prev,
+            {
+              type: "overlay_added",
+              data: { id, overlayData }
+            }
+          ]);
+          break;
+        }
+        case "overlays_removed": {
+          const { overlays: overlays2 } = action.data;
+          const restoredIds = [];
+          for (const overlay of overlays2) {
+            const newId = state.chart.createOverlay({
+              ...overlay,
+              groupId: DRAWING_GROUP_ID2
+            });
+            if (typeof newId === "string") {
+              restoredIds.push(newId);
+            }
+          }
+          setRedoStack((prev) => [
+            ...prev,
+            {
+              type: "overlays_removed",
+              data: {
+                overlays: overlays2.map((o, i) => ({
+                  ...o,
+                  id: restoredIds[i]
+                }))
+              }
+            }
+          ]);
+          break;
+        }
+        case "indicator_toggled": {
+          const { name, wasActive, isMain, paneId } = action.data;
+          if (wasActive) {
+            if (isMain) {
+              state.chart.createIndicator(
+                { name, id: `main_${name}`, paneId: "candle_pane" },
+                true,
+                { id: "candle_pane" }
+              );
+              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 ?? "";
+              dispatch({
+                type: "SET_SUB_INDICATORS",
+                indicators: {
+                  ...state.subIndicators,
+                  [name]: newPaneId
+                }
+              });
+            }
+          } else {
+            if (isMain) {
+              state.chart.removeIndicator({ id: `main_${name}` });
+              dispatch({
+                type: "SET_MAIN_INDICATORS",
+                indicators: state.mainIndicators.filter(
+                  (n) => n !== name
+                )
+              });
+            } else {
+              state.chart.removeIndicator({ id: `sub_${name}` });
+              const newSub = { ...state.subIndicators };
+              delete newSub[name];
+              dispatch({
+                type: "SET_SUB_INDICATORS",
+                indicators: newSub
+              });
+            }
+          }
+          setRedoStack((prev) => [
+            ...prev,
+            {
+              type: "indicator_toggled",
+              data: {
+                name,
+                wasActive: !wasActive,
+                isMain,
+                paneId
+              }
+            }
+          ]);
+          break;
+        }
+      }
+    } finally {
+      isProcessingRef.current = false;
+    }
+  }, [undoStack, state.chart, state.mainIndicators, state.subIndicators, dispatch]);
+  const redo = react.useCallback(() => {
+    if (redoStack.length === 0 || !state.chart || isProcessingRef.current)
+      return;
+    isProcessingRef.current = true;
+    const action = redoStack[redoStack.length - 1];
+    setRedoStack((prev) => prev.slice(0, -1));
+    try {
+      switch (action.type) {
+        case "overlay_added": {
+          const { overlayData } = action.data;
+          const newId = state.chart.createOverlay({
+            ...overlayData,
+            groupId: DRAWING_GROUP_ID2
+          });
+          setUndoStack((prev) => [
+            ...prev,
+            {
+              type: "overlay_added",
+              data: {
+                id: typeof newId === "string" ? newId : action.data.id,
+                overlayData
+              }
+            }
+          ]);
+          break;
+        }
+        case "overlays_removed": {
+          const { overlays: overlays2 } = action.data;
+          const snapshotOverlays = overlays2.map((o) => {
+            const allOverlays = state.chart?.getOverlays({ id: o.id });
+            const actual = allOverlays?.[0];
+            return actual ? {
+              name: actual.name,
+              points: actual.points,
+              styles: actual.styles,
+              extendData: actual.extendData
+            } : o;
+          });
+          for (const overlay of overlays2) {
+            state.chart.removeOverlay({ id: overlay.id });
+          }
+          setUndoStack((prev) => [
+            ...prev,
+            {
+              type: "overlays_removed",
+              data: { overlays: snapshotOverlays }
+            }
+          ]);
+          break;
+        }
+        case "indicator_toggled": {
+          const { name, wasActive, isMain } = action.data;
+          if (wasActive) {
+            if (isMain) {
+              state.chart.createIndicator(
+                { name, id: `main_${name}`, paneId: "candle_pane" },
+                true,
+                { id: "candle_pane" }
+              );
+              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 ?? "";
+              dispatch({
+                type: "SET_SUB_INDICATORS",
+                indicators: {
+                  ...state.subIndicators,
+                  [name]: newPaneId
+                }
+              });
+            }
+          } else {
+            if (isMain) {
+              state.chart.removeIndicator({ id: `main_${name}` });
+              dispatch({
+                type: "SET_MAIN_INDICATORS",
+                indicators: state.mainIndicators.filter(
+                  (n) => n !== name
+                )
+              });
+            } else {
+              state.chart.removeIndicator({ id: `sub_${name}` });
+              const newSub = { ...state.subIndicators };
+              delete newSub[name];
+              dispatch({
+                type: "SET_SUB_INDICATORS",
+                indicators: newSub
+              });
+            }
+          }
+          setUndoStack((prev) => [
+            ...prev,
+            {
+              type: "indicator_toggled",
+              data: {
+                name,
+                wasActive: !wasActive,
+                isMain
+              }
+            }
+          ]);
+          break;
+        }
+      }
+    } finally {
+      isProcessingRef.current = false;
+    }
+  }, [redoStack, state.chart, state.mainIndicators, state.subIndicators, dispatch]);
+  react.useEffect(() => {
+    const handleKeyDown = (e) => {
+      const isCtrlOrMeta = e.ctrlKey || e.metaKey;
+      if (!isCtrlOrMeta) return;
+      if (e.key === "z" && !e.shiftKey) {
+        e.preventDefault();
+        undo();
+      } else if (e.key === "y" || e.key === "z" && e.shiftKey) {
+        e.preventDefault();
+        redo();
+      }
+    };
+    window.addEventListener("keydown", handleKeyDown);
+    return () => window.removeEventListener("keydown", handleKeyDown);
+  }, [undo, redo]);
+  return {
+    canUndo,
+    canRedo,
+    undo,
+    redo,
+    pushAction,
+    clear
+  };
+}
+var STORAGE_KEY_PREFIX = "klinecharts_layout:";
+var INDEX_KEY = "klinecharts_layout_index";
+var STATE_VERSION = "1.0";
+function generateId() {
+  return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(
+    /[xy]/g,
+    (c) => {
+      const r = Math.random() * 16 | 0;
+      return (c === "x" ? r : r & 3 | 8).toString(16);
+    }
+  );
+}
+function getLayoutIds() {
+  try {
+    const raw = localStorage.getItem(INDEX_KEY);
+    return raw ? JSON.parse(raw) : [];
+  } catch {
+    return [];
+  }
+}
+function getEntry(id) {
+  try {
+    const raw = localStorage.getItem(STORAGE_KEY_PREFIX + id);
+    return raw ? JSON.parse(raw) : null;
+  } catch {
+    return null;
+  }
+}
+function useLayoutManager() {
+  const { state, dispatch } = useKlinechartsUI();
+  const [layouts, setLayouts] = react.useState([]);
+  const [autoSaveEnabled, setAutoSaveEnabled] = react.useState(false);
+  const autoSaveTimerRef = react.useRef(null);
+  const autoSaveIdRef = react.useRef(null);
+  const refreshLayouts = react.useCallback(() => {
+    const entries = getLayoutIds().map((id) => getEntry(id)).filter((e) => e !== null);
+    setLayouts(entries);
+  }, []);
+  react.useEffect(() => {
+    refreshLayouts();
+  }, [refreshLayouts]);
+  const serializeState = react.useCallback(() => {
+    const chart = state.chart;
+    if (!chart) return null;
+    const indicators2 = [];
+    const indicatorMap = chart.getIndicatorByPaneId?.();
+    if (indicatorMap) {
+      indicatorMap.forEach((paneIndicators, paneId) => {
+        paneIndicators.forEach((indicator) => {
+          indicators2.push({
+            paneId,
+            name: indicator.name,
+            calcParams: indicator.calcParams,
+            visible: indicator.visible,
+            ...indicator.styles ? { styles: indicator.styles } : {}
+          });
+        });
+      });
+    }
+    const drawings = [];
+    const allOverlays = chart.getOverlays({});
+    if (allOverlays) {
+      for (const overlay of allOverlays) {
+        drawings.push({
+          name: overlay.name,
+          points: overlay.points,
+          styles: overlay.styles,
+          extendData: overlay.extendData
+        });
+      }
+    }
+    return {
+      version: STATE_VERSION,
+      meta: {
+        symbol: state.symbol?.ticker ?? "",
+        period: state.period?.label ?? "",
+        timestamp: Date.now(),
+        lastModified: Date.now()
+      },
+      indicators: indicators2,
+      drawings
+    };
+  }, [state.chart, state.symbol, state.period]);
+  const saveLayout = react.useCallback(
+    (name) => {
+      const chartState = serializeState();
+      if (!chartState) return null;
+      const id = generateId();
+      const now = Date.now();
+      const entry = {
+        id,
+        name: name.trim() || `Layout ${new Date(now).toLocaleString()}`,
+        symbol: chartState.meta.symbol,
+        period: chartState.meta.period,
+        timestamp: now,
+        lastModified: now,
+        state: chartState
+      };
+      localStorage.setItem(
+        STORAGE_KEY_PREFIX + id,
+        JSON.stringify(entry)
+      );
+      const ids = getLayoutIds();
+      if (!ids.includes(id)) {
+        ids.push(id);
+        localStorage.setItem(INDEX_KEY, JSON.stringify(ids));
+      }
+      refreshLayouts();
+      return id;
+    },
+    [serializeState, refreshLayouts]
+  );
+  const loadLayout = react.useCallback(
+    (id) => {
+      const entry = getEntry(id);
+      if (!entry || !state.chart) return false;
+      const chartState = entry.state;
+      if (chartState.version !== STATE_VERSION) return false;
+      const chart = state.chart;
+      chart.removeOverlay();
+      const indicatorMap = chart.getIndicatorByPaneId?.();
+      if (indicatorMap) {
+        indicatorMap.forEach((_paneIndicators, paneId) => {
+          _paneIndicators.forEach((_, indicatorName) => {
+            chart.removeIndicator({ paneId, name: indicatorName });
+          });
+        });
+      }
+      const newMainIndicators = [];
+      const newSubIndicators = {};
+      if (chartState.indicators) {
+        for (const ind of chartState.indicators) {
+          chart.createIndicator(
+            {
+              name: ind.name,
+              calcParams: ind.calcParams,
+              visible: ind.visible
+            },
+            ind.paneId !== "candle_pane",
+            { id: ind.paneId }
+          );
+          if (ind.styles) {
+            chart.overrideIndicator({
+              name: ind.name,
+              paneId: ind.paneId,
+              styles: ind.styles
+            });
+          }
+          if (ind.paneId === "candle_pane") {
+            newMainIndicators.push(ind.name);
+          } else {
+            newSubIndicators[ind.name] = ind.paneId;
+          }
+        }
+      }
+      dispatch({
+        type: "SET_MAIN_INDICATORS",
+        indicators: newMainIndicators
+      });
+      dispatch({
+        type: "SET_SUB_INDICATORS",
+        indicators: newSubIndicators
+      });
+      if (chartState.drawings) {
+        for (const drawing of chartState.drawings) {
+          chart.createOverlay({
+            name: drawing.name,
+            points: drawing.points,
+            styles: drawing.styles,
+            extendData: drawing.extendData
+          });
+        }
+      }
+      return true;
+    },
+    [state.chart, dispatch]
+  );
+  const deleteLayout = react.useCallback(
+    (id) => {
+      localStorage.removeItem(STORAGE_KEY_PREFIX + id);
+      const ids = getLayoutIds().filter((i) => i !== id);
+      localStorage.setItem(INDEX_KEY, JSON.stringify(ids));
+      refreshLayouts();
+    },
+    [refreshLayouts]
+  );
+  const renameLayout = react.useCallback(
+    (id, name) => {
+      const entry = getEntry(id);
+      if (!entry) return false;
+      const updated = {
+        ...entry,
+        name: name.trim(),
+        lastModified: Date.now()
+      };
+      localStorage.setItem(
+        STORAGE_KEY_PREFIX + id,
+        JSON.stringify(updated)
+      );
+      refreshLayouts();
+      return true;
+    },
+    [refreshLayouts]
+  );
+  react.useEffect(() => {
+    if (!autoSaveEnabled || !state.chart) return;
+    if (autoSaveTimerRef.current) {
+      clearTimeout(autoSaveTimerRef.current);
+    }
+    autoSaveTimerRef.current = setTimeout(() => {
+      const chartState = serializeState();
+      if (!chartState) return;
+      if (autoSaveIdRef.current) {
+        const entry = getEntry(autoSaveIdRef.current);
+        if (entry) {
+          const updated = {
+            ...entry,
+            lastModified: Date.now(),
+            state: chartState
+          };
+          localStorage.setItem(
+            STORAGE_KEY_PREFIX + autoSaveIdRef.current,
+            JSON.stringify(updated)
+          );
+          refreshLayouts();
+        }
+      } else {
+        const id = generateId();
+        const now = Date.now();
+        const entry = {
+          id,
+          name: "Auto-save",
+          symbol: chartState.meta.symbol,
+          period: chartState.meta.period,
+          timestamp: now,
+          lastModified: now,
+          state: chartState
+        };
+        localStorage.setItem(
+          STORAGE_KEY_PREFIX + id,
+          JSON.stringify(entry)
+        );
+        const ids = getLayoutIds();
+        ids.push(id);
+        localStorage.setItem(INDEX_KEY, JSON.stringify(ids));
+        autoSaveIdRef.current = id;
+        refreshLayouts();
+      }
+    }, 5e3);
+    return () => {
+      if (autoSaveTimerRef.current) {
+        clearTimeout(autoSaveTimerRef.current);
+      }
+    };
+  }, [
+    autoSaveEnabled,
+    state.chart,
+    state.mainIndicators,
+    state.subIndicators,
+    serializeState,
+    refreshLayouts
+  ]);
+  return {
+    layouts,
+    saveLayout,
+    loadLayout,
+    deleteLayout,
+    renameLayout,
+    refreshLayouts,
+    autoSaveEnabled,
+    setAutoSaveEnabled
+  };
+}
+var DEFAULT_SCRIPT = `// Custom Indicator \u2014 Pine Script Style
+// Available: TA, dataList, params
+
+const period = params[0] ?? 14
+const closes = dataList.map(d => d.close)
+const highs  = dataList.map(d => d.high)
+const lows   = dataList.map(d => d.low)
+
+// Example: RSI + Bollinger Bands
+const rsi  = TA.rsi(closes, period)
+const boll = TA.bollinger(closes, period, 2)
+
+// Return one object per candle \u2014 each key = one line on chart
+return rsi.map((v, i) => ({
+  rsi:   v,
+  upper: boll.upper[i],
+  mid:   boll.mid[i],
+  lower: boll.lower[i],
+}))`;
+var SERIES_COLORS = [
+  "#2962FF",
+  "#FF6D00",
+  "#00BCD4",
+  "#E91E63",
+  "#76FF03",
+  "#FFD600"
+];
+var SHADOW_KEYS = [
+  "fetch",
+  "XMLHttpRequest",
+  "WebSocket",
+  "Worker",
+  "SharedWorker",
+  "importScripts",
+  "self",
+  "caches",
+  "indexedDB"
+];
+var scriptCounter = 0;
+function useScriptEditor() {
+  const { state } = useKlinechartsUI();
+  const [code, setCode] = react.useState(DEFAULT_SCRIPT);
+  const [scriptName, setScriptName] = react.useState("");
+  const [params, setParams] = react.useState("14");
+  const [placement, setPlacement] = react.useState("sub");
+  const [error, setError] = react.useState("");
+  const [status, setStatus] = react.useState("");
+  const [isRunning, setIsRunning] = react.useState(false);
+  const activeIdRef = react.useRef(null);
+  const activeNameRef = react.useRef(null);
+  const hasActiveScript = activeNameRef.current !== null;
+  const runScript = react.useCallback(() => {
+    const chart = state.chart;
+    if (!chart) {
+      setError("Chart not initialized");
+      return;
+    }
+    setError("");
+    setStatus("Running...");
+    setIsRunning(true);
+    try {
+      const parsedParams = params.split(",").map((s) => parseFloat(s.trim())).filter((n) => !isNaN(n));
+      const dataList = chart.getDataList?.() ?? [];
+      const allArgs = [
+        ...SHADOW_KEYS,
+        "TA",
+        "dataList",
+        "params",
+        `"use strict";
+${code}`
+      ];
+      const fn = new Function(...allArgs);
+      const shadowValues = SHADOW_KEYS.map(() => void 0);
+      const result = fn(...shadowValues, chunk47JXSAIT_cjs.TA_default, dataList, parsedParams);
+      if (!Array.isArray(result)) {
+        throw new Error("Script must return an Array.");
+      }
+      const sample = result.find((v) => v !== null && v !== void 0);
+      const seriesKeys = sample ? Object.keys(sample) : ["value"];
+      if (seriesKeys.length === 0) {
+        throw new Error("Returned objects have no keys.");
+      }
+      scriptCounter++;
+      const indicatorName = `_custom_script_${scriptCounter}`;
+      const figures = seriesKeys.map((key, i) => ({
+        key,
+        title: `${key}: `,
+        type: "line",
+        styles: () => ({ color: SERIES_COLORS[i % SERIES_COLORS.length] })
+      }));
+      reactKlinecharts.registerIndicator({
+        name: indicatorName,
+        shortName: (scriptName.trim() || `Script #${scriptCounter}`) + (placement === "main" ? " (Main)" : " (Sub)"),
+        calcParams: parsedParams,
+        figures,
+        calc: () => result,
+        extendData: {
+          isCustomScript: true,
+          code,
+          placement
+        }
+      });
+      if (activeNameRef.current) {
+        try {
+          chart.removeIndicator({
+            id: activeIdRef.current === "candle_pane" ? "candle_pane" : activeIdRef.current,
+            name: activeNameRef.current
+          });
+        } catch {
+        }
+      }
+      let paneId = null;
+      if (placement === "main") {
+        paneId = chart.createIndicator(
+          { name: indicatorName },
+          true,
+          { id: "candle_pane" }
+        );
+      } else {
+        paneId = chart.createIndicator({ name: indicatorName });
+      }
+      activeIdRef.current = typeof paneId === "string" ? paneId : null;
+      activeNameRef.current = indicatorName;
+      const title = scriptName.trim() || `Script #${scriptCounter}`;
+      setStatus(
+        `${title} applied to ${placement === "main" ? "Main Chart" : "Sub Pane"} \u2014 ${seriesKeys.length} series: ${seriesKeys.join(", ")}`
+      );
+    } catch (e) {
+      setError(e?.message ?? String(e));
+    } finally {
+      setIsRunning(false);
+    }
+  }, [state.chart, code, scriptName, params, placement]);
+  const removeScript = react.useCallback(() => {
+    const chart = state.chart;
+    if (chart && activeNameRef.current && activeIdRef.current) {
+      try {
+        chart.removeIndicator({
+          id: activeIdRef.current,
+          name: activeNameRef.current
+        });
+      } catch {
+      }
+      activeIdRef.current = null;
+      activeNameRef.current = null;
+      setStatus("Indicator removed.");
+    }
+  }, [state.chart]);
+  const resetCode = react.useCallback(() => {
+    setCode(DEFAULT_SCRIPT);
+    setError("");
+    setStatus("");
+  }, []);
+  const exportScript = react.useCallback(() => {
+    const blob = new Blob([code], {
+      type: "text/javascript;charset=utf-8"
+    });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement("a");
+    a.href = url;
+    a.download = `${scriptName.trim() || "custom_indicator"}.js`;
+    document.body.appendChild(a);
+    a.click();
+    document.body.removeChild(a);
+    URL.revokeObjectURL(url);
+    setStatus("Script exported.");
+  }, [code, scriptName]);
+  const importScript = react.useCallback(
+    (file) => {
+      const reader = new FileReader();
+      reader.onload = (e) => {
+        const content = e.target?.result;
+        if (content) {
+          setCode(content);
+          if (!scriptName) {
+            setScriptName(file.name.replace(/\.(js|ts|txt)$/i, ""));
+          }
+          setError("");
+          setStatus(`Loaded ${file.name}`);
+        }
+      };
+      reader.readAsText(file);
+    },
+    [scriptName]
+  );
+  return {
+    code,
+    setCode,
+    scriptName,
+    setScriptName,
+    params,
+    setParams,
+    placement,
+    setPlacement,
+    error,
+    status,
+    isRunning,
+    hasActiveScript,
+    runScript,
+    removeScript,
+    resetCode,
+    exportScript,
+    importScript,
+    defaultScript: DEFAULT_SCRIPT
+  };
+}
 
 // src/utils/createDataLoader.ts
 function createDataLoader(datafeed, dispatch) {
@@ -1386,85 +2310,173 @@ function createDataLoader(datafeed, dispatch) {
   };
 }
 
+Object.defineProperty(exports, "TA", {
+  enumerable: true,
+  get: function () { return chunk47JXSAIT_cjs.TA_default; }
+});
 Object.defineProperty(exports, "abcd", {
   enumerable: true,
-  get: function () { return chunkSLTXNLKN_cjs.abcd_default; }
+  get: function () { return chunk47JXSAIT_cjs.abcd_default; }
 });
 Object.defineProperty(exports, "anyWaves", {
   enumerable: true,
-  get: function () { return chunkSLTXNLKN_cjs.anyWaves_default; }
+  get: function () { return chunk47JXSAIT_cjs.anyWaves_default; }
 });
 Object.defineProperty(exports, "arrow", {
   enumerable: true,
-  get: function () { return chunkSLTXNLKN_cjs.arrow_default; }
+  get: function () { return chunk47JXSAIT_cjs.arrow_default; }
+});
+Object.defineProperty(exports, "bollTv", {
+  enumerable: true,
+  get: function () { return chunk47JXSAIT_cjs.bollTv_default; }
+});
+Object.defineProperty(exports, "brush", {
+  enumerable: true,
+  get: function () { return chunk47JXSAIT_cjs.brush_default; }
+});
+Object.defineProperty(exports, "cci", {
+  enumerable: true,
+  get: function () { return chunk47JXSAIT_cjs.cci_default; }
 });
 Object.defineProperty(exports, "circle", {
   enumerable: true,
-  get: function () { return chunkSLTXNLKN_cjs.circle_default; }
+  get: function () { return chunk47JXSAIT_cjs.circle_default; }
 });
 Object.defineProperty(exports, "eightWaves", {
   enumerable: true,
-  get: function () { return chunkSLTXNLKN_cjs.eightWaves_default; }
+  get: function () { return chunk47JXSAIT_cjs.eightWaves_default; }
+});
+Object.defineProperty(exports, "elliottWave", {
+  enumerable: true,
+  get: function () { return chunk47JXSAIT_cjs.elliottWave_default; }
+});
+Object.defineProperty(exports, "fibRetracement", {
+  enumerable: true,
+  get: function () { return chunk47JXSAIT_cjs.fibRetracement_default; }
 });
 Object.defineProperty(exports, "fibonacciCircle", {
   enumerable: true,
-  get: function () { return chunkSLTXNLKN_cjs.fibonacciCircle_default; }
+  get: function () { return chunk47JXSAIT_cjs.fibonacciCircle_default; }
 });
 Object.defineProperty(exports, "fibonacciExtension", {
   enumerable: true,
-  get: function () { return chunkSLTXNLKN_cjs.fibonacciExtension_default; }
+  get: function () { return chunk47JXSAIT_cjs.fibonacciExtension_default; }
 });
 Object.defineProperty(exports, "fibonacciSegment", {
   enumerable: true,
-  get: function () { return chunkSLTXNLKN_cjs.fibonacciSegment_default; }
+  get: function () { return chunk47JXSAIT_cjs.fibonacciSegment_default; }
 });
 Object.defineProperty(exports, "fibonacciSpeedResistanceFan", {
   enumerable: true,
-  get: function () { return chunkSLTXNLKN_cjs.fibonacciSpeedResistanceFan_default; }
+  get: function () { return chunk47JXSAIT_cjs.fibonacciSpeedResistanceFan_default; }
 });
 Object.defineProperty(exports, "fibonacciSpiral", {
   enumerable: true,
-  get: function () { return chunkSLTXNLKN_cjs.fibonacciSpiral_default; }
+  get: function () { return chunk47JXSAIT_cjs.fibonacciSpiral_default; }
 });
 Object.defineProperty(exports, "fiveWaves", {
   enumerable: true,
-  get: function () { return chunkSLTXNLKN_cjs.fiveWaves_default; }
+  get: function () { return chunk47JXSAIT_cjs.fiveWaves_default; }
 });
 Object.defineProperty(exports, "gannBox", {
   enumerable: true,
-  get: function () { return chunkSLTXNLKN_cjs.gannBox_default; }
+  get: function () { return chunk47JXSAIT_cjs.gannBox_default; }
+});
+Object.defineProperty(exports, "gannFan", {
+  enumerable: true,
+  get: function () { return chunk47JXSAIT_cjs.gannFan_default; }
+});
+Object.defineProperty(exports, "hma", {
+  enumerable: true,
+  get: function () { return chunk47JXSAIT_cjs.hma_default; }
+});
+Object.defineProperty(exports, "ichimoku", {
+  enumerable: true,
+  get: function () { return chunk47JXSAIT_cjs.ichimoku_default; }
+});
+Object.defineProperty(exports, "indicators", {
+  enumerable: true,
+  get: function () { return chunk47JXSAIT_cjs.indicators; }
+});
+Object.defineProperty(exports, "longPosition", {
+  enumerable: true,
+  get: function () { return chunk47JXSAIT_cjs.longPosition_default; }
+});
+Object.defineProperty(exports, "maRibbon", {
+  enumerable: true,
+  get: function () { return chunk47JXSAIT_cjs.maRibbon_default; }
+});
+Object.defineProperty(exports, "macdTv", {
+  enumerable: true,
+  get: function () { return chunk47JXSAIT_cjs.macdTv_default; }
+});
+Object.defineProperty(exports, "measure", {
+  enumerable: true,
+  get: function () { return chunk47JXSAIT_cjs.measure_default; }
 });
 Object.defineProperty(exports, "orderLine", {
   enumerable: true,
-  get: function () { return chunkSLTXNLKN_cjs.orderLine_default; }
+  get: function () { return chunk47JXSAIT_cjs.orderLine_default; }
 });
 Object.defineProperty(exports, "overlays", {
   enumerable: true,
-  get: function () { return chunkSLTXNLKN_cjs.overlays; }
+  get: function () { return chunk47JXSAIT_cjs.overlays; }
+});
+Object.defineProperty(exports, "parallelChannel", {
+  enumerable: true,
+  get: function () { return chunk47JXSAIT_cjs.parallelChannel_default; }
 });
 Object.defineProperty(exports, "parallelogram", {
   enumerable: true,
-  get: function () { return chunkSLTXNLKN_cjs.parallelogram_default; }
+  get: function () { return chunk47JXSAIT_cjs.parallelogram_default; }
+});
+Object.defineProperty(exports, "pivotPoints", {
+  enumerable: true,
+  get: function () { return chunk47JXSAIT_cjs.pivotPoints_default; }
+});
+Object.defineProperty(exports, "ray", {
+  enumerable: true,
+  get: function () { return chunk47JXSAIT_cjs.ray_default; }
 });
 Object.defineProperty(exports, "rect", {
   enumerable: true,
-  get: function () { return chunkSLTXNLKN_cjs.rect_default; }
+  get: function () { return chunk47JXSAIT_cjs.rect_default; }
 });
 Object.defineProperty(exports, "registerExtensions", {
   enumerable: true,
-  get: function () { return chunkSLTXNLKN_cjs.registerExtensions; }
+  get: function () { return chunk47JXSAIT_cjs.registerExtensions; }
+});
+Object.defineProperty(exports, "rsiTv", {
+  enumerable: true,
+  get: function () { return chunk47JXSAIT_cjs.rsiTv_default; }
+});
+Object.defineProperty(exports, "shortPosition", {
+  enumerable: true,
+  get: function () { return chunk47JXSAIT_cjs.shortPosition_default; }
+});
+Object.defineProperty(exports, "stochastic", {
+  enumerable: true,
+  get: function () { return chunk47JXSAIT_cjs.stochastic_default; }
+});
+Object.defineProperty(exports, "superTrend", {
+  enumerable: true,
+  get: function () { return chunk47JXSAIT_cjs.superTrend_default; }
 });
 Object.defineProperty(exports, "threeWaves", {
   enumerable: true,
-  get: function () { return chunkSLTXNLKN_cjs.threeWaves_default; }
+  get: function () { return chunk47JXSAIT_cjs.threeWaves_default; }
 });
 Object.defineProperty(exports, "triangle", {
   enumerable: true,
-  get: function () { return chunkSLTXNLKN_cjs.triangle_default; }
+  get: function () { return chunk47JXSAIT_cjs.triangle_default; }
+});
+Object.defineProperty(exports, "vwap", {
+  enumerable: true,
+  get: function () { return chunk47JXSAIT_cjs.vwap_default; }
 });
 Object.defineProperty(exports, "xabcd", {
   enumerable: true,
-  get: function () { return chunkSLTXNLKN_cjs.xabcd_default; }
+  get: function () { return chunk47JXSAIT_cjs.xabcd_default; }
 });
 exports.CANDLE_TYPES = CANDLE_TYPES;
 exports.COMPARE_RULES = COMPARE_RULES;
@@ -1488,10 +2500,13 @@ exports.useKlinechartsUI = useKlinechartsUI;
 exports.useKlinechartsUILoading = useKlinechartsUILoading;
 exports.useKlinechartsUISettings = useKlinechartsUISettings;
 exports.useKlinechartsUITheme = useKlinechartsUITheme;
+exports.useLayoutManager = useLayoutManager;
 exports.useOrderLines = useOrderLines;
 exports.usePeriods = usePeriods;
 exports.useScreenshot = useScreenshot;
+exports.useScriptEditor = useScriptEditor;
 exports.useSymbolSearch = useSymbolSearch;
 exports.useTimezone = useTimezone;
+exports.useUndoRedo = useUndoRedo;
 //# sourceMappingURL=index.cjs.map
 //# sourceMappingURL=index.cjs.map