react-klinecharts-ui 0.6.0 → 1.1.0

package/dist/index.cjs

@@ -1,32 +1,12 @@
 'use strict';
 
-var chunkFSHI2ZDB_cjs = require('./chunk-FSHI2ZDB.cjs');
+var chunkSZDU2D3D_cjs = require('./chunk-SZDU2D3D.cjs');
+var chunkF24D6PWY_cjs = require('./chunk-F24D6PWY.cjs');
+require('./chunk-Q7SFCCGT.cjs');
 var react = require('react');
-var reactKlinecharts = require('react-klinecharts');
+var klinecharts = require('klinecharts');
 var jsxRuntime = require('react/jsx-runtime');
 
-var KlinechartsUIStateContext = react.createContext(null);
-var KlinechartsUIDispatchContext = react.createContext(null);
-function useKlinechartsUIDispatch() {
-  const ctx = react.useContext(KlinechartsUIDispatchContext);
-  if (!ctx) {
-    throw new Error(
-      "useKlinechartsUI must be used within a <KlinechartsUIProvider>"
-    );
-  }
-  return ctx;
-}
-function useKlinechartsUI() {
-  const state = react.useContext(KlinechartsUIStateContext);
-  const dispatch = react.useContext(KlinechartsUIDispatchContext);
-  if (!state || !dispatch) {
-    throw new Error(
-      "useKlinechartsUI must be used within a <KlinechartsUIProvider>"
-    );
-  }
-  return { state, ...dispatch };
-}
-
 // src/data/periods.ts
 var DEFAULT_PERIODS = [
   { span: 1, type: "minute", label: "1m" },
@@ -40,6 +20,50 @@ var DEFAULT_PERIODS = [
   { span: 1, type: "month", label: "M" },
   { span: 1, type: "year", label: "Y" }
 ];
+
+// src/storage/types.ts
+var DEFAULT_STORAGE_NAMESPACES = [
+  "alerts",
+  "settings",
+  "indicators"
+];
+var DEFAULT_STORAGE_KEY_PREFIX = "rkui:";
+
+// src/storage/createDefaultStorage.ts
+var NOOP_ADAPTER = {
+  getItem: () => null,
+  setItem: () => {
+  },
+  removeItem: () => {
+  }
+};
+function createDefaultStorage() {
+  if (typeof localStorage === "undefined") return NOOP_ADAPTER;
+  try {
+    const probe = localStorage.getItem("__rkui_probe__");
+    return probe === null ? localStorage : localStorage;
+  } catch {
+    return NOOP_ADAPTER;
+  }
+}
+function resolveStorage(options) {
+  const adapter = options?.adapter ?? createDefaultStorage();
+  const keyPrefix = options?.keyPrefix ?? DEFAULT_STORAGE_KEY_PREFIX;
+  const namespaces = new Set(
+    options?.namespaces ?? DEFAULT_STORAGE_NAMESPACES
+  );
+  return {
+    adapter,
+    namespaces,
+    keyPrefix,
+    key(namespace) {
+      return `${keyPrefix}${namespace}`;
+    },
+    persists(namespace) {
+      return namespaces.has(namespace);
+    }
+  };
+}
 function reducer(state, action) {
   switch (action.type) {
     case "SET_CHART":
@@ -64,6 +88,25 @@ function reducer(state, action) {
       return { ...state, indicatorVisibility: action.visibility };
     case "SET_ALERTS":
       return { ...state, alerts: action.alerts };
+    case "ADD_ALERT":
+      return { ...state, alerts: [...state.alerts, action.alert] };
+    case "REMOVE_ALERT":
+      return {
+        ...state,
+        alerts: state.alerts.filter((a) => a.id !== action.id)
+      };
+    case "CLEAR_ALERTS":
+      return { ...state, alerts: [] };
+    case "MARK_ALERT_TRIGGERED": {
+      if (action.ids.length === 0) return state;
+      const triggered = new Set(action.ids);
+      return {
+        ...state,
+        alerts: state.alerts.map(
+          (a) => triggered.has(a.id) ? { ...a, triggered: true } : a
+        )
+      };
+    }
     case "SET_MEASURE":
       return { ...state, measure: { ...state.measure, ...action.measure } };
     case "SET_REPLAY":
@@ -84,13 +127,16 @@ function KlinechartsUIProvider({
   defaultPeriod,
   defaultTheme = "light",
   defaultTimezone = "Asia/Shanghai",
-  defaultMainIndicators = ["MA"],
-  defaultSubIndicators = ["VOL"],
+  // NOTE: no destructuring default here — the init function must distinguish
+  // "consumer passed default*" (wins) from "use stored value" (hydrate).
+  defaultMainIndicators,
+  defaultSubIndicators,
   defaultLocale = "en-US",
   periods,
   styles,
   registerExtensions: shouldRegister = true,
   overlays: extraOverlays,
+  storage: storageOptions,
   children,
   onStateChange,
   onSymbolChange,
@@ -101,6 +147,11 @@ function KlinechartsUIProvider({
   onSubIndicatorsChange,
   onSettingsChange
 }) {
+  const resolvedStorage = react.useMemo(
+    () => storageOptions ? resolveStorage(storageOptions) : null,
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    []
+  );
   const [state, dispatch] = react.useReducer(
     reducer,
     {
@@ -113,47 +164,66 @@ function KlinechartsUIProvider({
       defaultSubIndicators,
       defaultLocale,
       periods,
-      styles
-    },
-    (opts) => ({
-      chart: null,
-      datafeed: opts.datafeed,
-      symbol: opts.defaultSymbol ?? null,
-      period: opts.defaultPeriod ?? (opts.periods ?? DEFAULT_PERIODS)[0],
-      theme: opts.defaultTheme ?? "light",
-      timezone: opts.defaultTimezone ?? "Asia/Shanghai",
-      isLoading: false,
-      locale: opts.defaultLocale ?? "en-US",
-      periods: opts.periods ?? DEFAULT_PERIODS,
-      mainIndicators: opts.defaultMainIndicators ?? ["MA"],
-      subIndicators: (opts.defaultSubIndicators ?? ["VOL"]).reduce(
-        (acc, name) => ({ ...acc, [name]: "" }),
-        {}
-      ),
-      indicatorAxes: {},
-      indicatorVisibility: {},
-      alerts: [],
-      measure: { isActive: false, fromPoint: null, result: null },
-      replay: {
-        isReplaying: false,
-        isPaused: false,
-        speed: 1,
-        barIndex: 0,
-        totalBars: 0
-      },
-      styles: opts.styles,
-      screenshotUrl: null
-    })
+      styles,
+      storage: resolvedStorage
+    },
+    (opts) => {
+      const s = opts.storage;
+      const read = (ns, fallback) => {
+        if (!s || !s.persists(ns)) return fallback;
+        try {
+          const raw = s.adapter.getItem(s.key(ns));
+          return raw ? JSON.parse(raw) : fallback;
+        } catch {
+          return fallback;
+        }
+      };
+      const storedIndicators = read("indicators", {});
+      return {
+        chart: null,
+        datafeed: opts.datafeed,
+        symbol: opts.defaultSymbol ?? null,
+        period: opts.defaultPeriod ?? (opts.periods ?? DEFAULT_PERIODS)[0],
+        theme: opts.defaultTheme ?? "light",
+        timezone: opts.defaultTimezone ?? "Asia/Shanghai",
+        isLoading: false,
+        locale: opts.defaultLocale ?? "en-US",
+        periods: opts.periods ?? DEFAULT_PERIODS,
+        // Persistence semantics: STORED values win over `default*` props —
+        // the user's saved configuration should survive reload even when the
+        // app passes defaults. Only when storage is empty/unconfigured do the
+        // `default*` props apply, falling back to the built-ins last.
+        // (Settings live in useKlinechartsUISettings useState and hydrate
+        // separately via the dispatch-context `storage`.)
+        mainIndicators: storedIndicators.main ?? opts.defaultMainIndicators ?? ["MA"],
+        subIndicators: storedIndicators.sub ?? (opts.defaultSubIndicators ? opts.defaultSubIndicators.reduce(
+          (acc, name) => ({ ...acc, [name]: "" }),
+          {}
+        ) : { VOL: "" }),
+        indicatorAxes: storedIndicators.axes ?? {},
+        indicatorVisibility: storedIndicators.visibility ?? {},
+        alerts: read("alerts", []),
+        measure: { isActive: false, fromPoint: null, result: null },
+        replay: {
+          isReplaying: false,
+          isPaused: false,
+          speed: 1,
+          barIndex: 0,
+          totalBars: 0
+        },
+        styles: opts.styles,
+        screenshotUrl: null
+      };
+    }
   );
   const fullscreenContainerRef = react.useRef(null);
   const undoRedoListenerRef = react.useRef(null);
-  const alertTriggeredListenerRef = react.useRef(null);
+  const alertTriggeredListenersRef = react.useRef(/* @__PURE__ */ new Set());
   const replayIntervalRef = react.useRef(null);
   const replaySavedDataRef = react.useRef([]);
   const replayIndexRef = react.useRef(0);
   const alertPrevCloseRef = react.useRef(null);
   const stateRef = react.useRef(state);
-  stateRef.current = state;
   const callbacksRef = react.useRef({
     onStateChange,
     onSymbolChange,
@@ -163,15 +233,18 @@ function KlinechartsUIProvider({
     onMainIndicatorsChange,
     onSubIndicatorsChange
   });
-  callbacksRef.current = {
-    onStateChange,
-    onSymbolChange,
-    onPeriodChange,
-    onThemeChange,
-    onTimezoneChange,
-    onMainIndicatorsChange,
-    onSubIndicatorsChange
-  };
+  react.useEffect(() => {
+    stateRef.current = state;
+    callbacksRef.current = {
+      onStateChange,
+      onSymbolChange,
+      onPeriodChange,
+      onThemeChange,
+      onTimezoneChange,
+      onMainIndicatorsChange,
+      onSubIndicatorsChange
+    };
+  });
   const enhancedDispatch = react.useCallback((action) => {
     const prevState = stateRef.current;
     const newState = reducer(prevState, action);
@@ -201,11 +274,17 @@ function KlinechartsUIProvider({
     }
   }, []);
   const extraOverlaysRef = react.useRef(extraOverlays);
+  const datafeedRef = react.useRef(datafeed);
+  const onSettingsChangeRef = react.useRef(onSettingsChange);
+  react.useEffect(() => {
+    datafeedRef.current = datafeed;
+    onSettingsChangeRef.current = onSettingsChange;
+  });
   react.useEffect(() => {
     if (shouldRegister) {
-      chunkFSHI2ZDB_cjs.registerExtensions();
+      chunkSZDU2D3D_cjs.registerExtensions();
     }
-    extraOverlaysRef.current?.forEach((overlay) => reactKlinecharts.registerOverlay(overlay));
+    extraOverlaysRef.current?.forEach((overlay) => klinecharts.registerOverlay(overlay));
   }, [shouldRegister]);
   react.useEffect(() => {
     if (state.chart && state.styles) {
@@ -217,34 +296,97 @@ function KlinechartsUIProvider({
     const chart = state.chart;
     if (!chart || !hasAlerts) return;
     alertPrevCloseRef.current = null;
+    const prevValueByAlert = /* @__PURE__ */ new Map();
     const interval = setInterval(() => {
       const dataList = chart.getDataList();
       if (!dataList || dataList.length === 0) return;
-      const currentClose = dataList[dataList.length - 1].close;
-      const prevClose = alertPrevCloseRef.current;
-      alertPrevCloseRef.current = currentClose;
-      if (prevClose === null) return;
+      const lastIdx = dataList.length - 1;
+      const indicatorCache = /* @__PURE__ */ new Map();
+      const readIndicatorValue = (indicatorId, figureKey) => {
+        const cacheKey = `${indicatorId}:${figureKey}`;
+        if (indicatorCache.has(cacheKey)) return indicatorCache.get(cacheKey);
+        let value = null;
+        try {
+          const indicators2 = chart.getIndicators({ id: indicatorId });
+          const ind = indicators2?.[0];
+          const result = ind?.result;
+          const last = Array.isArray(result) ? result[lastIdx] : null;
+          if (last && typeof last === "object") {
+            const v = last[figureKey];
+            value = typeof v === "number" ? v : null;
+          }
+        } catch {
+          value = null;
+        }
+        indicatorCache.set(cacheKey, value);
+        return value;
+      };
       const alerts = stateRef.current.alerts;
-      let changed = false;
-      const next = alerts.map((alert) => {
-        if (alert.triggered) return alert;
-        const crossedUp = prevClose < alert.price && currentClose >= alert.price;
-        const crossedDown = prevClose > alert.price && currentClose <= alert.price;
+      const triggeredIds = [];
+      for (const alert of alerts) {
+        if (alert.triggered) continue;
+        const target = alert.target ?? { type: "price" };
+        let currentValue;
+        if (target.type === "indicator") {
+          currentValue = readIndicatorValue(target.indicatorId, target.figureKey);
+        } else {
+          currentValue = dataList[lastIdx].close;
+        }
+        if (currentValue === null || !Number.isFinite(currentValue)) continue;
+        const prevValue = prevValueByAlert.get(alert.id) ?? null;
+        prevValueByAlert.set(alert.id, currentValue);
+        if (prevValue === null) continue;
+        const crossedUp = prevValue < alert.price && currentValue >= alert.price;
+        const crossedDown = prevValue > alert.price && currentValue <= alert.price;
         const shouldTrigger = alert.condition === "crossing_up" ? crossedUp : alert.condition === "crossing_down" ? crossedDown : crossedUp || crossedDown;
         if (shouldTrigger) {
-          changed = true;
-          const triggered = { ...alert, triggered: true };
-          alertTriggeredListenerRef.current?.(triggered);
-          return triggered;
+          triggeredIds.push(alert.id);
+          const fired = { ...alert, triggered: true };
+          alertTriggeredListenersRef.current.forEach((cb) => cb(fired));
         }
-        return alert;
-      });
-      if (changed) {
-        enhancedDispatch({ type: "SET_ALERTS", alerts: next });
+      }
+      if (triggeredIds.length > 0) {
+        enhancedDispatch({
+          type: "MARK_ALERT_TRIGGERED",
+          ids: triggeredIds
+        });
       }
     }, 1e3);
     return () => clearInterval(interval);
   }, [state.chart, hasAlerts, enhancedDispatch]);
+  react.useEffect(() => {
+    alertPrevCloseRef.current = null;
+  }, [state.symbol, state.period]);
+  const writeNs = react.useCallback(
+    (ns, value) => {
+      if (!resolvedStorage || !resolvedStorage.persists(ns)) return;
+      try {
+        resolvedStorage.adapter.setItem(
+          resolvedStorage.key(ns),
+          JSON.stringify(value)
+        );
+      } catch {
+      }
+    },
+    [resolvedStorage]
+  );
+  react.useEffect(() => {
+    writeNs("alerts", state.alerts);
+  }, [state.alerts, writeNs]);
+  react.useEffect(() => {
+    writeNs("indicators", {
+      main: state.mainIndicators,
+      sub: state.subIndicators,
+      axes: state.indicatorAxes,
+      visibility: state.indicatorVisibility
+    });
+  }, [
+    state.mainIndicators,
+    state.subIndicators,
+    state.indicatorAxes,
+    state.indicatorVisibility,
+    writeNs
+  ]);
   react.useEffect(() => {
     return () => {
       if (replayIntervalRef.current !== null) {
@@ -256,21 +398,23 @@ function KlinechartsUIProvider({
   const dispatchValue = react.useMemo(
     () => ({
       dispatch: enhancedDispatch,
-      datafeed,
-      onSettingsChange,
+      datafeed: datafeedRef.current,
+      onSettingsChange: onSettingsChangeRef.current,
       fullscreenContainerRef,
       undoRedoListenerRef,
-      alertTriggeredListenerRef,
+      alertTriggeredListenersRef,
       replayIntervalRef,
       replaySavedDataRef,
-      replayIndexRef
+      replayIndexRef,
+      storage: resolvedStorage
     }),
-    [enhancedDispatch, datafeed, onSettingsChange]
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [enhancedDispatch, resolvedStorage]
   );
-  return /* @__PURE__ */ jsxRuntime.jsx(KlinechartsUIStateContext.Provider, { value: state, children: /* @__PURE__ */ jsxRuntime.jsx(KlinechartsUIDispatchContext.Provider, { value: dispatchValue, children }) });
+  return /* @__PURE__ */ jsxRuntime.jsx(chunkF24D6PWY_cjs.KlinechartsUIStateContext.Provider, { value: state, children: /* @__PURE__ */ jsxRuntime.jsx(chunkF24D6PWY_cjs.KlinechartsUIDispatchContext.Provider, { value: dispatchValue, children }) });
 }
 function useKlinechartsUITheme() {
-  const { state, dispatch } = useKlinechartsUI();
+  const { state, dispatch } = chunkF24D6PWY_cjs.useKlinechartsUI();
   const setTheme = react.useCallback(
     (theme) => {
       state.chart?.setStyles(theme);
@@ -291,11 +435,11 @@ function useKlinechartsUITheme() {
 
 // src/hooks/useKlinechartsUILoading.ts
 function useKlinechartsUILoading() {
-  const { state } = useKlinechartsUI();
+  const { state } = chunkF24D6PWY_cjs.useKlinechartsUI();
   return { isLoading: state.isLoading };
 }
 function usePeriods() {
-  const { state, dispatch } = useKlinechartsUI();
+  const { state, dispatch } = chunkF24D6PWY_cjs.useKlinechartsUI();
   const setPeriod = react.useCallback(
     (period) => {
       dispatch({ type: "SET_PERIOD", period });
@@ -333,7 +477,7 @@ var TIMEZONES = [
 
 // src/hooks/useTimezone.ts
 function useTimezone() {
-  const { state, dispatch } = useKlinechartsUI();
+  const { state, dispatch } = chunkF24D6PWY_cjs.useKlinechartsUI();
   const timezones = react.useMemo(
     () => TIMEZONES.map((tz) => ({
       key: tz.key,
@@ -355,7 +499,7 @@ function useTimezone() {
   };
 }
 function useSymbolSearch(debounceMs = 300) {
-  const { state, dispatch, datafeed } = useKlinechartsUI();
+  const { state, dispatch, datafeed } = chunkF24D6PWY_cjs.useKlinechartsUI();
   const [query, setQueryState] = react.useState("");
   const [results, setResults] = react.useState([]);
   const [isSearching, setIsSearching] = react.useState(false);
@@ -717,8 +861,8 @@ var INDICATOR_PARAMS = {
 // src/hooks/useIndicators.ts
 var COLLAPSED_HEIGHT = 30;
 function useIndicators() {
-  const { state, dispatch } = useKlinechartsUI();
-  const { undoRedoListenerRef } = useKlinechartsUIDispatch();
+  const { state, dispatch } = chunkF24D6PWY_cjs.useKlinechartsUI();
+  const { undoRedoListenerRef } = chunkF24D6PWY_cjs.useKlinechartsUIDispatch();
   const paneHeightsRef = react.useRef({});
   const collapsedPanesRef = react.useRef(/* @__PURE__ */ new Set());
   const mainIndicators = react.useMemo(() => {
@@ -1215,23 +1359,25 @@ var DRAWING_CATEGORIES = [
 // src/hooks/useDrawingTools.ts
 var DRAWING_GROUP_ID = "drawing_tools";
 function useDrawingTools() {
-  const { state } = useKlinechartsUI();
-  const { undoRedoListenerRef } = useKlinechartsUIDispatch();
+  const { state } = chunkF24D6PWY_cjs.useKlinechartsUI();
+  const { undoRedoListenerRef } = chunkF24D6PWY_cjs.useKlinechartsUIDispatch();
   const [activeTool, setActiveTool] = react.useState(null);
   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;
+  react.useEffect(() => {
+    activeToolRef.current = activeTool;
+    autoRetriggerRef.current = autoRetrigger;
+    isLockedRef.current = isLocked;
+    isVisibleRef.current = isVisible;
+    magnetModeRef.current = magnetMode;
+  });
   const categories = react.useMemo(
     () => DRAWING_CATEGORIES.map((cat) => ({
       key: cat.key,
@@ -1242,6 +1388,8 @@ function useDrawingTools() {
     })),
     []
   );
+  const createOverlayForToolRef = react.useRef(() => {
+  });
   const createOverlayForTool = react.useCallback(
     (name) => {
       const mode = magnetModeRef.current === "strong" ? "strong_magnet" : magnetModeRef.current === "weak" ? "weak_magnet" : "normal";
@@ -1267,7 +1415,7 @@ function useDrawingTools() {
           });
           if (autoRetriggerRef.current && activeToolRef.current === name) {
             requestAnimationFrame(() => {
-              createOverlayForTool(name);
+              createOverlayForToolRef.current(name);
             });
           }
         }
@@ -1275,6 +1423,9 @@ function useDrawingTools() {
     },
     [state.chart, undoRedoListenerRef]
   );
+  react.useEffect(() => {
+    createOverlayForToolRef.current = createOverlayForTool;
+  });
   const selectTool = react.useCallback(
     (name) => {
       setActiveTool(name);
@@ -1399,8 +1550,18 @@ var defaultSettings = {
   tooltipShowRule: "always"
 };
 function useKlinechartsUISettings() {
-  const { state, onSettingsChange } = useKlinechartsUI();
-  const [settings, setSettings] = react.useState(defaultSettings);
+  const { state, onSettingsChange } = chunkF24D6PWY_cjs.useKlinechartsUI();
+  const { storage } = chunkF24D6PWY_cjs.useKlinechartsUIDispatch();
+  const [settings, setSettings] = react.useState(() => {
+    if (storage && storage.persists("settings")) {
+      try {
+        const raw = storage.adapter.getItem(storage.key("settings"));
+        if (raw) return { ...defaultSettings, ...JSON.parse(raw) };
+      } catch {
+      }
+    }
+    return defaultSettings;
+  });
   const isInitialMount = react.useRef(true);
   react.useEffect(() => {
     if (isInitialMount.current) {
@@ -1409,6 +1570,14 @@ function useKlinechartsUISettings() {
     }
     onSettingsChange?.({ ...settings });
   }, [settings, onSettingsChange]);
+  react.useEffect(() => {
+    if (!storage || !storage.persists("settings")) return;
+    if (isInitialMount.current) return;
+    try {
+      storage.adapter.setItem(storage.key("settings"), JSON.stringify(settings));
+    } catch {
+    }
+  }, [settings, storage]);
   const candleTypes = react.useMemo(
     () => CANDLE_TYPES.map((ct) => ({
       key: ct.key,
@@ -1650,7 +1819,7 @@ function useKlinechartsUISettings() {
   };
 }
 function useScreenshot() {
-  const { state, dispatch } = useKlinechartsUI();
+  const { state, dispatch } = chunkF24D6PWY_cjs.useKlinechartsUI();
   const capture = react.useCallback(() => {
     if (!state.chart) return;
     const url = state.chart.getConvertPictureUrl(true, "jpeg", state.theme === "dark" ? "#151517" : "#ffffff");
@@ -1679,12 +1848,12 @@ function useScreenshot() {
   };
 }
 function useHotkeys() {
-  const { state } = useKlinechartsUI();
+  const { state } = chunkF24D6PWY_cjs.useKlinechartsUI();
   const registerHotkey = react.useCallback((template) => {
-    reactKlinecharts.registerHotkey(template);
+    klinecharts.registerHotkey(template);
   }, []);
   const getHotkey = react.useCallback(
-    (name) => reactKlinecharts.getHotkey(name) ?? null,
+    (name) => klinecharts.getHotkey(name) ?? null,
     []
   );
   const setHotkeysEnabled = react.useCallback(
@@ -1702,13 +1871,13 @@ function useHotkeys() {
   return {
     registerHotkey,
     getHotkey,
-    supportedHotkeys: reactKlinecharts.getSupportedHotkeys(),
+    supportedHotkeys: klinecharts.getSupportedHotkeys(),
     setHotkeysEnabled,
     getHotkeysConfig
   };
 }
 function useChartAxes() {
-  const { state } = useKlinechartsUI();
+  const { state } = chunkF24D6PWY_cjs.useKlinechartsUI();
   const overrideXAxis = react.useCallback(
     (override) => {
       if (!state.chart) return;
@@ -1726,27 +1895,33 @@ function useChartAxes() {
   return { overrideXAxis, overrideYAxis };
 }
 function useFullscreen() {
-  const { fullscreenContainerRef } = useKlinechartsUIDispatch();
+  const { fullscreenContainerRef } = chunkF24D6PWY_cjs.useKlinechartsUIDispatch();
   const [isFullscreen, setIsFullscreen] = react.useState(false);
   const enter = react.useCallback(() => {
     const el = fullscreenContainerRef.current;
     if (!el) return;
+    let result;
     if (el.requestFullscreen) {
-      el.requestFullscreen();
+      result = el.requestFullscreen();
     } else if ("webkitRequestFullscreen" in el) {
       el.webkitRequestFullscreen();
     } else if ("msRequestFullscreen" in el) {
       el.msRequestFullscreen();
     }
+    result?.catch(() => {
+    });
   }, [fullscreenContainerRef]);
   const exit = react.useCallback(() => {
+    let result;
     if (document.exitFullscreen) {
-      document.exitFullscreen();
+      result = document.exitFullscreen();
     } else if ("webkitExitFullscreen" in document) {
       document.webkitExitFullscreen();
     } else if ("msExitFullscreen" in document) {
       document.msExitFullscreen();
     }
+    result?.catch(() => {
+    });
   }, []);
   const toggle = react.useCallback(() => {
     if (isFullscreen) {
@@ -1775,8 +1950,9 @@ function useFullscreen() {
   };
 }
 function useOrderLines() {
-  const { state } = useKlinechartsUI();
+  const { state } = chunkF24D6PWY_cjs.useKlinechartsUI();
   const callbacksRef = react.useRef(/* @__PURE__ */ new Map());
+  const ownedIdsRef = react.useRef(/* @__PURE__ */ new Set());
   const createOrderLine = react.useCallback(
     (options) => {
       if (!state.chart) return null;
@@ -1807,6 +1983,7 @@ function useOrderLines() {
           }
         }
       });
+      ownedIdsRef.current.add(id);
       return id;
     },
     [state.chart]
@@ -1838,12 +2015,28 @@ function useOrderLines() {
     (id) => {
       state.chart?.removeOverlay({ id });
       callbacksRef.current.delete(id);
+      ownedIdsRef.current.delete(id);
     },
     [state.chart]
   );
   const removeAllOrderLines = react.useCallback(() => {
     state.chart?.removeOverlay({ name: "orderLine" });
     callbacksRef.current.clear();
+    ownedIdsRef.current.clear();
+  }, [state.chart]);
+  react.useEffect(() => {
+    const chart = state.chart;
+    const owned = ownedIdsRef.current;
+    return () => {
+      owned.forEach((id) => {
+        try {
+          chart?.removeOverlay({ id });
+        } catch {
+        }
+      });
+      owned.clear();
+      callbacksRef.current.clear();
+    };
   }, [state.chart]);
   return {
     createOrderLine,
@@ -1854,13 +2047,21 @@ function useOrderLines() {
 }
 var DRAWING_GROUP_ID2 = "drawing_tools";
 function useUndoRedo() {
-  const { state, dispatch } = useKlinechartsUI();
-  const { undoRedoListenerRef } = useKlinechartsUIDispatch();
+  const { state, dispatch } = chunkF24D6PWY_cjs.useKlinechartsUI();
+  const { undoRedoListenerRef } = chunkF24D6PWY_cjs.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 undoStackRef = react.useRef([]);
+  const redoStackRef = react.useRef([]);
+  react.useEffect(() => {
+    undoStackRef.current = undoStack;
+  }, [undoStack]);
+  react.useEffect(() => {
+    redoStackRef.current = redoStack;
+  }, [redoStack]);
   const pushAction = react.useCallback((action) => {
     if (isProcessingRef.current) return;
     setUndoStack((prev) => [...prev, action]);
@@ -1877,10 +2078,11 @@ function useUndoRedo() {
     setRedoStack([]);
   }, []);
   const undo = react.useCallback(() => {
-    if (undoStack.length === 0 || !state.chart || isProcessingRef.current)
+    const stack = undoStackRef.current;
+    if (stack.length === 0 || !state.chart || isProcessingRef.current)
       return;
     isProcessingRef.current = true;
-    const action = undoStack[undoStack.length - 1];
+    const action = stack[stack.length - 1];
     setUndoStack((prev) => prev.slice(0, -1));
     try {
       switch (action.type) {
@@ -2001,12 +2203,13 @@ function useUndoRedo() {
     } finally {
       isProcessingRef.current = false;
     }
-  }, [undoStack, state.chart, state.mainIndicators, state.subIndicators, state.indicatorAxes, dispatch]);
+  }, [state.chart, state.mainIndicators, state.subIndicators, state.indicatorAxes, dispatch]);
   const redo = react.useCallback(() => {
-    if (redoStack.length === 0 || !state.chart || isProcessingRef.current)
+    const stack = redoStackRef.current;
+    if (stack.length === 0 || !state.chart || isProcessingRef.current)
       return;
     isProcessingRef.current = true;
-    const action = redoStack[redoStack.length - 1];
+    const action = stack[stack.length - 1];
     setRedoStack((prev) => prev.slice(0, -1));
     try {
       switch (action.type) {
@@ -2131,7 +2334,7 @@ function useUndoRedo() {
     } finally {
       isProcessingRef.current = false;
     }
-  }, [redoStack, state.chart, state.mainIndicators, state.subIndicators, state.indicatorAxes, dispatch]);
+  }, [state.chart, state.mainIndicators, state.subIndicators, state.indicatorAxes, dispatch]);
   react.useEffect(() => {
     const handleKeyDown = (e) => {
       const isCtrlOrMeta = e.ctrlKey || e.metaKey;
@@ -2169,6 +2372,7 @@ function generateId() {
   );
 }
 function getLayoutIds() {
+  if (typeof localStorage === "undefined") return [];
   try {
     const raw = localStorage.getItem(INDEX_KEY);
     return raw ? JSON.parse(raw) : [];
@@ -2177,6 +2381,7 @@ function getLayoutIds() {
   }
 }
 function getEntry(id) {
+  if (typeof localStorage === "undefined") return null;
   try {
     const raw = localStorage.getItem(STORAGE_KEY_PREFIX + id);
     return raw ? JSON.parse(raw) : null;
@@ -2185,36 +2390,32 @@ function getEntry(id) {
   }
 }
 function useLayoutManager() {
-  const { state, dispatch } = useKlinechartsUI();
-  const [layouts, setLayouts] = react.useState([]);
+  const { state, dispatch } = chunkF24D6PWY_cjs.useKlinechartsUI();
+  const [layouts, setLayouts] = react.useState(
+    () => getLayoutIds().map((id) => getEntry(id)).filter((e) => e !== null)
+  );
   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);
+    setLayouts(
+      getLayoutIds().map((id) => getEntry(id)).filter((e) => e !== null)
+    );
   }, []);
-  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) => {
-          const yAxisId = state.indicatorAxes[indicator.id];
-          indicators2.push({
-            paneId,
-            name: indicator.name,
-            calcParams: indicator.calcParams,
-            visible: indicator.visible,
-            ...indicator.styles ? { styles: indicator.styles } : {},
-            ...yAxisId ? { yAxisId } : {}
-          });
-        });
+    const allIndicators = chart.getIndicators();
+    for (const indicator of allIndicators) {
+      const yAxisId = state.indicatorAxes[indicator.id];
+      indicators2.push({
+        paneId: indicator.paneId,
+        name: indicator.name,
+        calcParams: indicator.calcParams,
+        visible: indicator.visible,
+        ...indicator.styles ? { styles: indicator.styles } : {},
+        ...yAxisId ? { yAxisId } : {}
       });
     }
     const drawings = [];
@@ -2278,13 +2479,8 @@ function useLayoutManager() {
       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 });
-          });
-        });
+      for (const indicator of chart.getIndicators()) {
+        chart.removeIndicator({ id: indicator.id });
       }
       const newMainIndicators = [];
       const newSubIndicators = {};
@@ -2302,7 +2498,12 @@ function useLayoutManager() {
               visible: ind.visible
             },
             {
-              isStack: ind.paneId !== "candle_pane",
+              // Main indicators stack OVER the candle series on the candle
+              // pane (isStack: true), exactly as useIndicators does on the
+              // add path. The previous `ind.paneId !== "candle_pane"` inverted
+              // this, so loading a layout with main indicators replaced the
+              // candles instead of overlaying them.
+              isStack: isMain,
               pane: { id: ind.paneId },
               ...ind.yAxisId ? { yAxis: { id: ind.yAxisId } } : {}
             }
@@ -2493,7 +2694,7 @@ var SHADOW_KEYS = [
 ];
 var scriptCounter = 0;
 function useScriptEditor() {
-  const { state } = useKlinechartsUI();
+  const { state } = chunkF24D6PWY_cjs.useKlinechartsUI();
   const [code, setCode] = react.useState(DEFAULT_SCRIPT);
   const [scriptName, setScriptName] = react.useState("");
   const [params, setParams] = react.useState("14");
@@ -2502,8 +2703,10 @@ function useScriptEditor() {
   const [status, setStatus] = react.useState("");
   const [isRunning, setIsRunning] = react.useState(false);
   const activeIdRef = react.useRef(null);
+  const [activeName, setActiveName] = react.useState(null);
   const activeNameRef = react.useRef(null);
-  const hasActiveScript = activeNameRef.current !== null;
+  activeNameRef.current = activeName;
+  const hasActiveScript = activeName !== null;
   const runScript = react.useCallback(() => {
     const chart = state.chart;
     if (!chart) {
@@ -2524,31 +2727,38 @@ function useScriptEditor() {
         `"use strict";
 ${code}`
       ];
-      const fn = new Function(...allArgs);
+      const compiledFn = new Function(...allArgs);
       const shadowValues = SHADOW_KEYS.map(() => void 0);
-      const result = fn(...shadowValues, chunkFSHI2ZDB_cjs.TA_default, dataList, parsedParams);
-      if (!Array.isArray(result)) {
+      const sampleResult = compiledFn(
+        ...shadowValues,
+        chunkSZDU2D3D_cjs.TA_default,
+        dataList,
+        parsedParams
+      );
+      if (!Array.isArray(sampleResult)) {
         throw new Error("Script must return an Array.");
       }
-      const sample = result.find((v) => v !== null && v !== void 0);
+      const sample = sampleResult.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 indicatorName = `_custom_script_active`;
       const figures = seriesKeys.map((key, i) => ({
         key,
         title: `${key}: `,
         type: "line",
         styles: () => ({ color: SERIES_COLORS[i % SERIES_COLORS.length] })
       }));
-      reactKlinecharts.registerIndicator({
+      klinecharts.registerIndicator({
         name: indicatorName,
         shortName: (scriptName.trim() || `Script #${scriptCounter}`) + (placement === "main" ? " (Main)" : " (Sub)"),
         calcParams: parsedParams,
         figures,
-        calc: () => result,
+        calc: (liveDataList) => compiledFn(...shadowValues, chunkSZDU2D3D_cjs.TA_default, liveDataList, parsedParams),
         extendData: {
           isCustomScript: true,
           code,
@@ -2574,7 +2784,7 @@ ${code}`
         paneId = chart.createIndicator({ name: indicatorName });
       }
       activeIdRef.current = typeof paneId === "string" ? paneId : null;
-      activeNameRef.current = indicatorName;
+      setActiveName(indicatorName);
       const title = scriptName.trim() || `Script #${scriptCounter}`;
       setStatus(
         `${title} applied to ${placement === "main" ? "Main Chart" : "Sub Pane"} \u2014 ${seriesKeys.length} series: ${seriesKeys.join(", ")}`
@@ -2596,7 +2806,7 @@ ${code}`
       } catch {
       }
       activeIdRef.current = null;
-      activeNameRef.current = null;
+      setActiveName(null);
       setStatus("Indicator removed.");
     }
   }, [state.chart]);
@@ -2659,7 +2869,7 @@ ${code}`
   };
 }
 function useCrosshair() {
-  const { state } = useKlinechartsUI();
+  const { state } = chunkF24D6PWY_cjs.useKlinechartsUI();
   const [barData, setBarData] = react.useState(null);
   const rafRef = react.useRef(0);
   const handler = react.useCallback(
@@ -2709,11 +2919,11 @@ function useCrosshair() {
 }
 var alertCounter = 0;
 function useAlerts() {
-  const { state, dispatch } = useKlinechartsUI();
-  const { alertTriggeredListenerRef } = useKlinechartsUIDispatch();
+  const { state, dispatch } = chunkF24D6PWY_cjs.useKlinechartsUI();
+  const { alertTriggeredListenersRef } = chunkF24D6PWY_cjs.useKlinechartsUIDispatch();
   const alerts = state.alerts;
   const addAlert = react.useCallback(
-    (price, condition, message, extendData) => {
+    (price, condition, message, extendData, target) => {
       const id = `alert_${++alertCounter}`;
       const precision = state.chart?.getSymbol()?.pricePrecision ?? 2;
       const resolvedExtendData = {
@@ -2726,11 +2936,14 @@ function useAlerts() {
         condition,
         message,
         triggered: false,
-        extendData: resolvedExtendData
+        extendData: resolvedExtendData,
+        // Persist the target only when it's an indicator alert; omit for the
+        // default price target so existing serialized alerts stay compatible.
+        ...target && target.type === "indicator" ? { target } : {}
       };
-      dispatch({ type: "SET_ALERTS", alerts: [...state.alerts, alert] });
+      dispatch({ type: "ADD_ALERT", alert });
       if (state.chart) {
-        chunkFSHI2ZDB_cjs.ensureAlertLineRegistered();
+        chunkSZDU2D3D_cjs.ensureAlertLineRegistered();
         state.chart.createOverlay({
           name: "alertLine",
           id,
@@ -2742,29 +2955,28 @@ function useAlerts() {
       }
       return id;
     },
-    [state.chart, state.alerts, dispatch]
+    [state.chart, dispatch]
   );
   const removeAlert = react.useCallback(
     (id) => {
-      dispatch({
-        type: "SET_ALERTS",
-        alerts: state.alerts.filter((a) => a.id !== id)
-      });
+      dispatch({ type: "REMOVE_ALERT", id });
       state.chart?.removeOverlay({ id });
     },
-    [state.chart, state.alerts, dispatch]
+    [state.chart, dispatch]
   );
   const clearAlerts = react.useCallback(() => {
-    for (const alert of state.alerts) {
-      state.chart?.removeOverlay({ id: alert.id });
-    }
-    dispatch({ type: "SET_ALERTS", alerts: [] });
-  }, [state.chart, state.alerts, dispatch]);
+    state.chart?.removeOverlay({ groupId: "price_alerts" });
+    dispatch({ type: "CLEAR_ALERTS" });
+  }, [state.chart, dispatch]);
   const onAlertTriggered = react.useCallback(
     (callback) => {
-      alertTriggeredListenerRef.current = callback;
+      const set = alertTriggeredListenersRef.current;
+      set.add(callback);
+      return () => {
+        set.delete(callback);
+      };
     },
-    [alertTriggeredListenerRef]
+    [alertTriggeredListenersRef]
   );
   return {
     alerts,
@@ -2775,7 +2987,7 @@ function useAlerts() {
   };
 }
 function useDataExport() {
-  const { state } = useKlinechartsUI();
+  const { state } = chunkF24D6PWY_cjs.useKlinechartsUI();
   const exportAll = react.useCallback(
     (format) => {
       if (!state.chart) return;
@@ -2841,8 +3053,8 @@ function downloadData(dataList, format, ticker) {
   URL.revokeObjectURL(url);
 }
 function useWatchlist() {
-  const { state } = useKlinechartsUI();
-  const { dispatch, datafeed } = useKlinechartsUIDispatch();
+  const { state } = chunkF24D6PWY_cjs.useKlinechartsUI();
+  const { dispatch, datafeed } = chunkF24D6PWY_cjs.useKlinechartsUIDispatch();
   const [items, setItems] = react.useState([]);
   const subscriptionsRef = react.useRef(/* @__PURE__ */ new Map());
   const activeSymbol = state.symbol?.ticker ?? null;
@@ -2911,8 +3123,8 @@ function useWatchlist() {
   };
 }
 function useReplay() {
-  const { state, dispatch } = useKlinechartsUI();
-  const { replayIntervalRef, replaySavedDataRef, replayIndexRef } = useKlinechartsUIDispatch();
+  const { state, dispatch } = chunkF24D6PWY_cjs.useKlinechartsUI();
+  const { replayIntervalRef, replaySavedDataRef, replayIndexRef } = chunkF24D6PWY_cjs.useKlinechartsUIDispatch();
   const { isReplaying, isPaused, speed, barIndex, totalBars } = state.replay;
   const clearInterval_ = react.useCallback(() => {
     if (replayIntervalRef.current !== null) {
@@ -2943,6 +3155,7 @@ function useReplay() {
   );
   const startReplay = react.useCallback(() => {
     if (!state.chart) return;
+    if (isReplaying) return;
     const dataList = state.chart.getDataList();
     if (!dataList || dataList.length === 0) return;
     replaySavedDataRef.current = [...dataList];
@@ -2958,7 +3171,12 @@ function useReplay() {
     });
     state.chart.clearData?.();
     startInterval(speed);
-  }, [state.chart, speed, startInterval, replaySavedDataRef, replayIndexRef, dispatch]);
+  }, [state.chart, state.symbol, state.period, speed, startInterval, isReplaying, replaySavedDataRef, replayIndexRef, dispatch]);
+  react.useEffect(() => {
+    if (isReplaying) {
+      stopReplay();
+    }
+  }, [state.symbol, state.period]);
   const stopReplay = react.useCallback(() => {
     if (!state.chart) return;
     clearInterval_();
@@ -3054,24 +3272,29 @@ var DEFAULT_COLORS = [
   "#ff5722",
   "#8bc34a"
 ];
-var colorIndex = 0;
-var compareCounter = 0;
 function useCompare() {
-  const { state, datafeed } = useKlinechartsUI();
+  const { state, datafeed } = chunkF24D6PWY_cjs.useKlinechartsUI();
   const [symbols, setSymbols] = react.useState([]);
   const indicatorsRef = react.useRef(/* @__PURE__ */ new Map());
+  const instanceSalt = react.useId().replace(/[^a-zA-Z0-9]/g, "");
   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 assignedColor = color ?? DEFAULT_COLORS[symbols.length % 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 mainSymbol = state.symbol;
+      const symbol = {
+        ticker,
+        pricePrecision: mainSymbol?.pricePrecision ?? 2,
+        volumePrecision: mainSymbol?.volumePrecision ?? 8
+      };
       const compareData = await datafeed.getHistoryKLineData(
-        { ticker },
-        { ...state.period, label: "" },
+        symbol,
+        state.period,
         from,
         to
       );
@@ -3090,14 +3313,8 @@ function useCompare() {
       }
       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({
+      const indicatorName = `__cmp_${instanceSalt}_${ticker}`;
+      klinecharts.registerIndicator({
         name: indicatorName,
         shortName: ticker,
         figures: [
@@ -3108,7 +3325,16 @@ function useCompare() {
             styles: () => ({ color: assignedColor })
           }
         ],
-        calc: () => normalizedData
+        calc: (dataList) => {
+          let lastPct = null;
+          return dataList.map((bar) => {
+            const close = compareMap.get(bar.timestamp);
+            if (close != null) {
+              lastPct = (close - bp) / bp * 100;
+            }
+            return { pct: lastPct };
+          });
+        }
       });
       const paneId = state.chart.createIndicator(
         { name: indicatorName },
@@ -3126,7 +3352,7 @@ function useCompare() {
         ];
       });
     },
-    [state.chart, state.period, datafeed]
+    [state.chart, state.symbol, state.period, datafeed, symbols.length, instanceSalt]
   );
   const removeSymbol = react.useCallback(
     (ticker) => {
@@ -3193,7 +3419,7 @@ function computeResult(from, to) {
   return { from, to, priceDiff, pricePercent, bars, timeDiff };
 }
 function useMeasure() {
-  const { state, dispatch } = useKlinechartsUI();
+  const { state, dispatch } = chunkF24D6PWY_cjs.useKlinechartsUI();
   const { isActive, fromPoint, result } = state.measure;
   const cleanup = react.useCallback(() => {
     state.chart?.removeOverlay({ id: MEASURE_OVERLAY_ID });
@@ -3274,7 +3500,7 @@ function useMeasure() {
 }
 var annotationCounter = 0;
 function useAnnotations() {
-  const { state } = useKlinechartsUI();
+  const { state } = chunkF24D6PWY_cjs.useKlinechartsUI();
   const [annotations, setAnnotations] = react.useState([]);
   const addAnnotation = react.useCallback(
     (text, price, timestamp, color) => {
@@ -3336,13 +3562,11 @@ function useAnnotations() {
     [state.chart]
   );
   const clearAnnotations = react.useCallback(() => {
-    setAnnotations((prev) => {
-      for (const annotation of prev) {
-        state.chart?.removeOverlay({ id: annotation.id });
-      }
-      return [];
-    });
-  }, [state.chart]);
+    for (const annotation of annotations) {
+      state.chart?.removeOverlay({ id: annotation.id });
+    }
+    setAnnotations([]);
+  }, [state.chart, annotations]);
   react.useEffect(() => {
     return () => {
       state.chart?.removeOverlay({ groupId: "annotations" });
@@ -3356,265 +3580,375 @@ function useAnnotations() {
     clearAnnotations
   };
 }
+var WorkspaceContext = react.createContext(null);
+function useWorkspace() {
+  const ctx = react.useContext(WorkspaceContext);
+  if (!ctx) {
+    throw new Error("useWorkspace must be used within a <WorkspaceProvider>");
+  }
+  return ctx;
+}
 
-// src/utils/createDataLoader.ts
-function createDataLoader(datafeed, dispatch) {
-  let oldestTimestamp = null;
-  let currentGen = 0;
-  return {
-    getBars: async (params) => {
+// src/workspace/types.ts
+var DEFAULT_SYNC_CONFIG = {
+  crosshair: true,
+  scroll: true,
+  zoom: true,
+  symbol: true,
+  period: true
+};
+function reducer2(state, action) {
+  switch (action.type) {
+    case "SET_CELLS":
+      return { ...state, cells: action.cells };
+    case "ADD_CELL":
+      return { ...state, cells: [...state.cells, action.cell] };
+    case "REMOVE_CELL": {
+      const cells = state.cells.filter((c) => c.id !== action.id);
+      return {
+        cells,
+        activeCellId: state.activeCellId === action.id ? cells[0]?.id ?? null : state.activeCellId
+      };
+    }
+    case "SET_CELL_SYMBOL":
+      return {
+        ...state,
+        cells: state.cells.map(
+          (c) => c.id === action.id ? { ...c, symbol: action.symbol } : c
+        )
+      };
+    case "SET_CELL_PERIOD":
+      return {
+        ...state,
+        cells: state.cells.map(
+          (c) => c.id === action.id ? { ...c, period: action.period } : c
+        )
+      };
+    case "SET_ACTIVE_CELL":
+      return { ...state, activeCellId: action.id };
+    default:
+      return state;
+  }
+}
+function WorkspaceProvider({
+  defaultCells,
+  sync,
+  children
+}) {
+  const [state, dispatch] = react.useReducer(reducer2, defaultCells, (cells) => ({
+    cells,
+    activeCellId: cells[0]?.id ?? null
+  }));
+  const chartsRef = react.useRef(/* @__PURE__ */ new Map());
+  const broadcastingRef = react.useRef(false);
+  const resolvedSync = react.useMemo(
+    () => ({ ...DEFAULT_SYNC_CONFIG, ...sync }),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    []
+  );
+  const value = react.useMemo(
+    () => ({
+      state,
+      dispatch,
+      chartsRef,
+      broadcastingRef,
+      sync: resolvedSync
+    }),
+    [state, resolvedSync]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx(WorkspaceContext.Provider, { value, children });
+}
+function useChartSync({ cellId }) {
+  const { chartsRef, broadcastingRef, sync, dispatch: workspaceDispatch } = useWorkspace();
+  const { state } = chunkF24D6PWY_cjs.useKlinechartsUI();
+  const chart = state.chart;
+  react.useEffect(() => {
+    if (!chart) return;
+    chartsRef.current.set(cellId, chart);
+    return () => {
+      chartsRef.current.delete(cellId);
+    };
+  }, [chart, cellId, chartsRef]);
+  react.useEffect(() => {
+    if (!chart) return;
+    const broadcast = (fn) => {
+      if (broadcastingRef.current) return;
+      broadcastingRef.current = true;
       try {
-        dispatch({ type: "SET_LOADING", isLoading: true });
-        if (params.type === "init") {
-          oldestTimestamp = null;
-          const gen = ++currentGen;
-          const data = await datafeed.getHistoryKLineData(
-            params.symbol,
-            { ...params.period, label: "" },
-            0,
-            Date.now()
-          );
-          if (gen !== currentGen) return;
-          if (data.length > 0) {
-            oldestTimestamp = data[0].timestamp;
-          }
-          params.callback(data, {
-            forward: data.length > 0,
-            backward: false
-          });
-        } else if (params.type === "forward" && oldestTimestamp !== null) {
-          const gen = currentGen;
-          const data = await datafeed.getHistoryKLineData(
-            params.symbol,
-            { ...params.period, label: "" },
-            0,
-            oldestTimestamp - 1
-          );
-          if (gen !== currentGen) return;
-          if (data.length > 0) {
-            oldestTimestamp = data[0].timestamp;
+        chartsRef.current.forEach((target, id) => {
+          if (id !== cellId) {
+            try {
+              fn(target);
+            } catch {
+            }
           }
-          params.callback(data, {
-            forward: data.length > 0,
-            backward: false
-          });
-        } else if (params.type === "backward") {
-          params.callback([], { forward: false, backward: false });
-        }
-      } catch (error) {
-        console.error("Failed to load chart data:", error);
-        params.callback([], { forward: false, backward: false });
+        });
       } finally {
-        dispatch({ type: "SET_LOADING", isLoading: false });
+        broadcastingRef.current = false;
       }
-    },
-    subscribeBar: (params) => {
-      datafeed.subscribe(
-        params.symbol,
-        { ...params.period, label: "" },
-        (klineData) => params.callback(klineData)
+    };
+    const onCrosshairChange = (data) => {
+      if (!sync.crosshair) return;
+      const crosshair = data;
+      if (!crosshair) return;
+      broadcast((target) => target.executeAction("onCrosshairChange", crosshair));
+    };
+    const onScroll = () => {
+      if (!sync.scroll) return;
+      let range = null;
+      try {
+        range = chart.getVisibleRange();
+      } catch {
+        return;
+      }
+      if (!range || range.realTo == null) return;
+      broadcast(
+        (target) => target.scrollToTimestamp(range.realTo, 0)
       );
-    },
-    unsubscribeBar: (params) => {
-      datafeed.unsubscribe(params.symbol, { ...params.period, label: "" });
+    };
+    const onZoom = () => {
+      if (!sync.zoom) return;
+      let bar = 0;
+      try {
+        bar = chart.getBarSpace().bar;
+      } catch {
+        return;
+      }
+      broadcast((target) => target.setBarSpace(bar));
+    };
+    chart.subscribeAction("onCrosshairChange", onCrosshairChange);
+    chart.subscribeAction("onScroll", onScroll);
+    chart.subscribeAction("onZoom", onZoom);
+    return () => {
+      chart.unsubscribeAction("onCrosshairChange", onCrosshairChange);
+      chart.unsubscribeAction("onScroll", onScroll);
+      chart.unsubscribeAction("onZoom", onZoom);
+    };
+  }, [chart, cellId, chartsRef, broadcastingRef, sync.crosshair, sync.scroll, sync.zoom]);
+  react.useEffect(() => {
+    if (state.symbol) {
+      workspaceDispatch({ type: "SET_CELL_SYMBOL", id: cellId, symbol: state.symbol });
     }
-  };
+  }, [state.symbol]);
+  react.useEffect(() => {
+    workspaceDispatch({ type: "SET_CELL_PERIOD", id: cellId, period: state.period });
+  }, [state.period]);
 }
 
 Object.defineProperty(exports, "TA", {
   enumerable: true,
-  get: function () { return chunkFSHI2ZDB_cjs.TA_default; }
+  get: function () { return chunkSZDU2D3D_cjs.TA_default; }
 });
 Object.defineProperty(exports, "abcd", {
   enumerable: true,
-  get: function () { return chunkFSHI2ZDB_cjs.abcd_default; }
+  get: function () { return chunkSZDU2D3D_cjs.abcd_default; }
 });
 Object.defineProperty(exports, "alertLine", {
   enumerable: true,
-  get: function () { return chunkFSHI2ZDB_cjs.alertLine_default; }
+  get: function () { return chunkSZDU2D3D_cjs.alertLine_default; }
 });
 Object.defineProperty(exports, "anyWaves", {
   enumerable: true,
-  get: function () { return chunkFSHI2ZDB_cjs.anyWaves_default; }
+  get: function () { return chunkSZDU2D3D_cjs.anyWaves_default; }
 });
 Object.defineProperty(exports, "arrow", {
   enumerable: true,
-  get: function () { return chunkFSHI2ZDB_cjs.arrow_default; }
+  get: function () { return chunkSZDU2D3D_cjs.arrow_default; }
 });
 Object.defineProperty(exports, "bollTv", {
   enumerable: true,
-  get: function () { return chunkFSHI2ZDB_cjs.bollTv_default; }
+  get: function () { return chunkSZDU2D3D_cjs.bollTv_default; }
 });
 Object.defineProperty(exports, "brush", {
   enumerable: true,
-  get: function () { return chunkFSHI2ZDB_cjs.brush_default; }
+  get: function () { return chunkSZDU2D3D_cjs.brush_default; }
 });
 Object.defineProperty(exports, "cci", {
   enumerable: true,
-  get: function () { return chunkFSHI2ZDB_cjs.cci_default; }
+  get: function () { return chunkSZDU2D3D_cjs.cci_default; }
 });
 Object.defineProperty(exports, "circle", {
   enumerable: true,
-  get: function () { return chunkFSHI2ZDB_cjs.circle_default; }
+  get: function () { return chunkSZDU2D3D_cjs.circle_default; }
 });
 Object.defineProperty(exports, "depthOverlay", {
   enumerable: true,
-  get: function () { return chunkFSHI2ZDB_cjs.depthOverlay_default; }
+  get: function () { return chunkSZDU2D3D_cjs.depthOverlay_default; }
 });
 Object.defineProperty(exports, "eightWaves", {
   enumerable: true,
-  get: function () { return chunkFSHI2ZDB_cjs.eightWaves_default; }
+  get: function () { return chunkSZDU2D3D_cjs.eightWaves_default; }
 });
 Object.defineProperty(exports, "elliottWave", {
   enumerable: true,
-  get: function () { return chunkFSHI2ZDB_cjs.elliottWave_default; }
+  get: function () { return chunkSZDU2D3D_cjs.elliottWave_default; }
 });
 Object.defineProperty(exports, "fibRetracement", {
   enumerable: true,
-  get: function () { return chunkFSHI2ZDB_cjs.fibRetracement_default; }
+  get: function () { return chunkSZDU2D3D_cjs.fibRetracement_default; }
 });
 Object.defineProperty(exports, "fibonacciCircle", {
   enumerable: true,
-  get: function () { return chunkFSHI2ZDB_cjs.fibonacciCircle_default; }
+  get: function () { return chunkSZDU2D3D_cjs.fibonacciCircle_default; }
 });
 Object.defineProperty(exports, "fibonacciExtension", {
   enumerable: true,
-  get: function () { return chunkFSHI2ZDB_cjs.fibonacciExtension_default; }
+  get: function () { return chunkSZDU2D3D_cjs.fibonacciExtension_default; }
 });
 Object.defineProperty(exports, "fibonacciSegment", {
   enumerable: true,
-  get: function () { return chunkFSHI2ZDB_cjs.fibonacciSegment_default; }
+  get: function () { return chunkSZDU2D3D_cjs.fibonacciSegment_default; }
 });
 Object.defineProperty(exports, "fibonacciSpeedResistanceFan", {
   enumerable: true,
-  get: function () { return chunkFSHI2ZDB_cjs.fibonacciSpeedResistanceFan_default; }
+  get: function () { return chunkSZDU2D3D_cjs.fibonacciSpeedResistanceFan_default; }
 });
 Object.defineProperty(exports, "fibonacciSpiral", {
   enumerable: true,
-  get: function () { return chunkFSHI2ZDB_cjs.fibonacciSpiral_default; }
+  get: function () { return chunkSZDU2D3D_cjs.fibonacciSpiral_default; }
 });
 Object.defineProperty(exports, "fiveWaves", {
   enumerable: true,
-  get: function () { return chunkFSHI2ZDB_cjs.fiveWaves_default; }
+  get: function () { return chunkSZDU2D3D_cjs.fiveWaves_default; }
 });
 Object.defineProperty(exports, "gannBox", {
   enumerable: true,
-  get: function () { return chunkFSHI2ZDB_cjs.gannBox_default; }
+  get: function () { return chunkSZDU2D3D_cjs.gannBox_default; }
 });
 Object.defineProperty(exports, "gannFan", {
   enumerable: true,
-  get: function () { return chunkFSHI2ZDB_cjs.gannFan_default; }
+  get: function () { return chunkSZDU2D3D_cjs.gannFan_default; }
 });
 Object.defineProperty(exports, "hma", {
   enumerable: true,
-  get: function () { return chunkFSHI2ZDB_cjs.hma_default; }
+  get: function () { return chunkSZDU2D3D_cjs.hma_default; }
 });
 Object.defineProperty(exports, "ichimoku", {
   enumerable: true,
-  get: function () { return chunkFSHI2ZDB_cjs.ichimoku_default; }
+  get: function () { return chunkSZDU2D3D_cjs.ichimoku_default; }
 });
 Object.defineProperty(exports, "indicators", {
   enumerable: true,
-  get: function () { return chunkFSHI2ZDB_cjs.indicators; }
+  get: function () { return chunkSZDU2D3D_cjs.indicators; }
 });
 Object.defineProperty(exports, "longPosition", {
   enumerable: true,
-  get: function () { return chunkFSHI2ZDB_cjs.longPosition_default; }
+  get: function () { return chunkSZDU2D3D_cjs.longPosition_default; }
 });
 Object.defineProperty(exports, "maRibbon", {
   enumerable: true,
-  get: function () { return chunkFSHI2ZDB_cjs.maRibbon_default; }
+  get: function () { return chunkSZDU2D3D_cjs.maRibbon_default; }
 });
 Object.defineProperty(exports, "macdTv", {
   enumerable: true,
-  get: function () { return chunkFSHI2ZDB_cjs.macdTv_default; }
+  get: function () { return chunkSZDU2D3D_cjs.macdTv_default; }
 });
 Object.defineProperty(exports, "measure", {
   enumerable: true,
-  get: function () { return chunkFSHI2ZDB_cjs.measure_default; }
+  get: function () { return chunkSZDU2D3D_cjs.measure_default; }
 });
 Object.defineProperty(exports, "orderLine", {
   enumerable: true,
-  get: function () { return chunkFSHI2ZDB_cjs.orderLine_default; }
+  get: function () { return chunkSZDU2D3D_cjs.orderLine_default; }
 });
 Object.defineProperty(exports, "overlays", {
   enumerable: true,
-  get: function () { return chunkFSHI2ZDB_cjs.overlays; }
+  get: function () { return chunkSZDU2D3D_cjs.overlays; }
 });
 Object.defineProperty(exports, "parallelChannel", {
   enumerable: true,
-  get: function () { return chunkFSHI2ZDB_cjs.parallelChannel_default; }
+  get: function () { return chunkSZDU2D3D_cjs.parallelChannel_default; }
 });
 Object.defineProperty(exports, "parallelogram", {
   enumerable: true,
-  get: function () { return chunkFSHI2ZDB_cjs.parallelogram_default; }
+  get: function () { return chunkSZDU2D3D_cjs.parallelogram_default; }
 });
 Object.defineProperty(exports, "pivotPoints", {
   enumerable: true,
-  get: function () { return chunkFSHI2ZDB_cjs.pivotPoints_default; }
+  get: function () { return chunkSZDU2D3D_cjs.pivotPoints_default; }
 });
 Object.defineProperty(exports, "ray", {
   enumerable: true,
-  get: function () { return chunkFSHI2ZDB_cjs.ray_default; }
+  get: function () { return chunkSZDU2D3D_cjs.ray_default; }
 });
 Object.defineProperty(exports, "rect", {
   enumerable: true,
-  get: function () { return chunkFSHI2ZDB_cjs.rect_default; }
+  get: function () { return chunkSZDU2D3D_cjs.rect_default; }
 });
 Object.defineProperty(exports, "registerExtensions", {
   enumerable: true,
-  get: function () { return chunkFSHI2ZDB_cjs.registerExtensions; }
+  get: function () { return chunkSZDU2D3D_cjs.registerExtensions; }
 });
 Object.defineProperty(exports, "rsiTv", {
   enumerable: true,
-  get: function () { return chunkFSHI2ZDB_cjs.rsiTv_default; }
+  get: function () { return chunkSZDU2D3D_cjs.rsiTv_default; }
 });
 Object.defineProperty(exports, "shortPosition", {
   enumerable: true,
-  get: function () { return chunkFSHI2ZDB_cjs.shortPosition_default; }
+  get: function () { return chunkSZDU2D3D_cjs.shortPosition_default; }
 });
 Object.defineProperty(exports, "stochastic", {
   enumerable: true,
-  get: function () { return chunkFSHI2ZDB_cjs.stochastic_default; }
+  get: function () { return chunkSZDU2D3D_cjs.stochastic_default; }
 });
 Object.defineProperty(exports, "superTrend", {
   enumerable: true,
-  get: function () { return chunkFSHI2ZDB_cjs.superTrend_default; }
+  get: function () { return chunkSZDU2D3D_cjs.superTrend_default; }
 });
 Object.defineProperty(exports, "threeWaves", {
   enumerable: true,
-  get: function () { return chunkFSHI2ZDB_cjs.threeWaves_default; }
+  get: function () { return chunkSZDU2D3D_cjs.threeWaves_default; }
 });
 Object.defineProperty(exports, "triangle", {
   enumerable: true,
-  get: function () { return chunkFSHI2ZDB_cjs.triangle_default; }
+  get: function () { return chunkSZDU2D3D_cjs.triangle_default; }
 });
 Object.defineProperty(exports, "vwap", {
   enumerable: true,
-  get: function () { return chunkFSHI2ZDB_cjs.vwap_default; }
+  get: function () { return chunkSZDU2D3D_cjs.vwap_default; }
 });
 Object.defineProperty(exports, "xabcd", {
   enumerable: true,
-  get: function () { return chunkFSHI2ZDB_cjs.xabcd_default; }
+  get: function () { return chunkSZDU2D3D_cjs.xabcd_default; }
+});
+Object.defineProperty(exports, "KlinechartsUIDispatchContext", {
+  enumerable: true,
+  get: function () { return chunkF24D6PWY_cjs.KlinechartsUIDispatchContext; }
+});
+Object.defineProperty(exports, "KlinechartsUIStateContext", {
+  enumerable: true,
+  get: function () { return chunkF24D6PWY_cjs.KlinechartsUIStateContext; }
+});
+Object.defineProperty(exports, "createDataLoader", {
+  enumerable: true,
+  get: function () { return chunkF24D6PWY_cjs.createDataLoader; }
+});
+Object.defineProperty(exports, "useKlinechartsUI", {
+  enumerable: true,
+  get: function () { return chunkF24D6PWY_cjs.useKlinechartsUI; }
 });
 exports.CANDLE_TYPES = CANDLE_TYPES;
 exports.COMPARE_RULES = COMPARE_RULES;
 exports.DEFAULT_PERIODS = DEFAULT_PERIODS;
+exports.DEFAULT_STORAGE_KEY_PREFIX = DEFAULT_STORAGE_KEY_PREFIX;
+exports.DEFAULT_STORAGE_NAMESPACES = DEFAULT_STORAGE_NAMESPACES;
+exports.DEFAULT_SYNC_CONFIG = DEFAULT_SYNC_CONFIG;
 exports.DRAWING_CATEGORIES = DRAWING_CATEGORIES;
 exports.INDICATOR_PARAMS = INDICATOR_PARAMS;
-exports.KlinechartsUIDispatchContext = KlinechartsUIDispatchContext;
 exports.KlinechartsUIProvider = KlinechartsUIProvider;
-exports.KlinechartsUIStateContext = KlinechartsUIStateContext;
 exports.MAIN_INDICATORS = MAIN_INDICATORS;
 exports.PRICE_AXIS_TYPES = PRICE_AXIS_TYPES;
 exports.SUB_INDICATORS = SUB_INDICATORS;
 exports.TIMEZONES = TIMEZONES;
 exports.TOOLTIP_SHOW_RULES = TOOLTIP_SHOW_RULES;
+exports.WorkspaceProvider = WorkspaceProvider;
 exports.YAXIS_POSITIONS = YAXIS_POSITIONS;
-exports.createDataLoader = createDataLoader;
+exports.createDefaultStorage = createDefaultStorage;
+exports.resolveStorage = resolveStorage;
 exports.useAlerts = useAlerts;
 exports.useAnnotations = useAnnotations;
 exports.useChartAxes = useChartAxes;
+exports.useChartSync = useChartSync;
 exports.useCompare = useCompare;
 exports.useCrosshair = useCrosshair;
 exports.useDataExport = useDataExport;
@@ -3622,7 +3956,6 @@ exports.useDrawingTools = useDrawingTools;
 exports.useFullscreen = useFullscreen;
 exports.useHotkeys = useHotkeys;
 exports.useIndicators = useIndicators;
-exports.useKlinechartsUI = useKlinechartsUI;
 exports.useKlinechartsUILoading = useKlinechartsUILoading;
 exports.useKlinechartsUISettings = useKlinechartsUISettings;
 exports.useKlinechartsUITheme = useKlinechartsUITheme;
@@ -3637,5 +3970,6 @@ exports.useSymbolSearch = useSymbolSearch;
 exports.useTimezone = useTimezone;
 exports.useUndoRedo = useUndoRedo;
 exports.useWatchlist = useWatchlist;
+exports.useWorkspace = useWorkspace;
 //# sourceMappingURL=index.cjs.map
 //# sourceMappingURL=index.cjs.map