react-klinecharts-ui 1.0.0 → 1.1.0

package/dist/index.js

@@ -1,31 +1,12 @@
-import { registerExtensions, TA_default, ensureAlertLineRegistered } from './chunk-JD4NBJ5F.js';
-export { TA_default as TA, abcd_default as abcd, alertLine_default as alertLine, anyWaves_default as anyWaves, arrow_default as arrow, bollTv_default as bollTv, brush_default as brush, cci_default as cci, circle_default as circle, depthOverlay_default as depthOverlay, eightWaves_default as eightWaves, elliottWave_default as elliottWave, fibRetracement_default as fibRetracement, fibonacciCircle_default as fibonacciCircle, fibonacciExtension_default as fibonacciExtension, fibonacciSegment_default as fibonacciSegment, fibonacciSpeedResistanceFan_default as fibonacciSpeedResistanceFan, fibonacciSpiral_default as fibonacciSpiral, fiveWaves_default as fiveWaves, gannBox_default as gannBox, gannFan_default as gannFan, hma_default as hma, ichimoku_default as ichimoku, indicators, longPosition_default as longPosition, maRibbon_default as maRibbon, macdTv_default as macdTv, measure_default as measure, orderLine_default as orderLine, overlays, parallelChannel_default as parallelChannel, parallelogram_default as parallelogram, pivotPoints_default as pivotPoints, ray_default as ray, rect_default as rect, registerExtensions, rsiTv_default as rsiTv, shortPosition_default as shortPosition, stochastic_default as stochastic, superTrend_default as superTrend, threeWaves_default as threeWaves, triangle_default as triangle, vwap_default as vwap, xabcd_default as xabcd } from './chunk-JD4NBJ5F.js';
-import { createContext, useContext, useReducer, useRef, useEffect, useCallback, useMemo, useState, useId } from 'react';
+import { registerExtensions, TA_default, ensureAlertLineRegistered } from './chunk-RIT2LJQT.js';
+export { TA_default as TA, abcd_default as abcd, alertLine_default as alertLine, anyWaves_default as anyWaves, arrow_default as arrow, bollTv_default as bollTv, brush_default as brush, cci_default as cci, circle_default as circle, depthOverlay_default as depthOverlay, eightWaves_default as eightWaves, elliottWave_default as elliottWave, fibRetracement_default as fibRetracement, fibonacciCircle_default as fibonacciCircle, fibonacciExtension_default as fibonacciExtension, fibonacciSegment_default as fibonacciSegment, fibonacciSpeedResistanceFan_default as fibonacciSpeedResistanceFan, fibonacciSpiral_default as fibonacciSpiral, fiveWaves_default as fiveWaves, gannBox_default as gannBox, gannFan_default as gannFan, hma_default as hma, ichimoku_default as ichimoku, indicators, longPosition_default as longPosition, maRibbon_default as maRibbon, macdTv_default as macdTv, measure_default as measure, orderLine_default as orderLine, overlays, parallelChannel_default as parallelChannel, parallelogram_default as parallelogram, pivotPoints_default as pivotPoints, ray_default as ray, rect_default as rect, registerExtensions, rsiTv_default as rsiTv, shortPosition_default as shortPosition, stochastic_default as stochastic, superTrend_default as superTrend, threeWaves_default as threeWaves, triangle_default as triangle, vwap_default as vwap, xabcd_default as xabcd } from './chunk-RIT2LJQT.js';
+import { KlinechartsUIStateContext, KlinechartsUIDispatchContext, useKlinechartsUI, useKlinechartsUIDispatch } from './chunk-O7E57I66.js';
+export { KlinechartsUIDispatchContext, KlinechartsUIStateContext, createDataLoader, useKlinechartsUI } from './chunk-O7E57I66.js';
+import './chunk-PZ5AY32C.js';
+import { createContext, useMemo, useReducer, useRef, useEffect, useCallback, useState, useId, useContext } from 'react';
 import { registerOverlay, registerHotkey, getHotkey, getSupportedHotkeys, registerIndicator } from 'klinecharts';
 import { jsx } from 'react/jsx-runtime';
 
-var KlinechartsUIStateContext = createContext(null);
-var KlinechartsUIDispatchContext = createContext(null);
-function useKlinechartsUIDispatch() {
-  const ctx = useContext(KlinechartsUIDispatchContext);
-  if (!ctx) {
-    throw new Error(
-      "useKlinechartsUI must be used within a <KlinechartsUIProvider>"
-    );
-  }
-  return ctx;
-}
-function useKlinechartsUI() {
-  const state = useContext(KlinechartsUIStateContext);
-  const dispatch = 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" },
@@ -39,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":
@@ -102,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,
@@ -119,6 +147,11 @@ function KlinechartsUIProvider({
   onSubIndicatorsChange,
   onSettingsChange
 }) {
+  const resolvedStorage = useMemo(
+    () => storageOptions ? resolveStorage(storageOptions) : null,
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    []
+  );
   const [state, dispatch] = useReducer(
     reducer,
     {
@@ -131,41 +164,61 @@ 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 = useRef(null);
   const undoRedoListenerRef = useRef(null);
-  const alertTriggeredListenerRef = useRef(null);
+  const alertTriggeredListenersRef = useRef(/* @__PURE__ */ new Set());
   const replayIntervalRef = useRef(null);
   const replaySavedDataRef = useRef([]);
   const replayIndexRef = useRef(0);
@@ -243,23 +296,53 @@ 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;
       const triggeredIds = [];
       for (const alert of alerts) {
         if (alert.triggered) continue;
-        const crossedUp = prevClose < alert.price && currentClose >= alert.price;
-        const crossedDown = prevClose > alert.price && currentClose <= alert.price;
+        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) {
           triggeredIds.push(alert.id);
-          alertTriggeredListenerRef.current?.({ ...alert, triggered: true });
+          const fired = { ...alert, triggered: true };
+          alertTriggeredListenersRef.current.forEach((cb) => cb(fired));
         }
       }
       if (triggeredIds.length > 0) {
@@ -274,6 +357,36 @@ function KlinechartsUIProvider({
   useEffect(() => {
     alertPrevCloseRef.current = null;
   }, [state.symbol, state.period]);
+  const writeNs = useCallback(
+    (ns, value) => {
+      if (!resolvedStorage || !resolvedStorage.persists(ns)) return;
+      try {
+        resolvedStorage.adapter.setItem(
+          resolvedStorage.key(ns),
+          JSON.stringify(value)
+        );
+      } catch {
+      }
+    },
+    [resolvedStorage]
+  );
+  useEffect(() => {
+    writeNs("alerts", state.alerts);
+  }, [state.alerts, writeNs]);
+  useEffect(() => {
+    writeNs("indicators", {
+      main: state.mainIndicators,
+      sub: state.subIndicators,
+      axes: state.indicatorAxes,
+      visibility: state.indicatorVisibility
+    });
+  }, [
+    state.mainIndicators,
+    state.subIndicators,
+    state.indicatorAxes,
+    state.indicatorVisibility,
+    writeNs
+  ]);
   useEffect(() => {
     return () => {
       if (replayIntervalRef.current !== null) {
@@ -289,13 +402,14 @@ function KlinechartsUIProvider({
       onSettingsChange: onSettingsChangeRef.current,
       fullscreenContainerRef,
       undoRedoListenerRef,
-      alertTriggeredListenerRef,
+      alertTriggeredListenersRef,
       replayIntervalRef,
       replaySavedDataRef,
-      replayIndexRef
+      replayIndexRef,
+      storage: resolvedStorage
     }),
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [enhancedDispatch]
+    [enhancedDispatch, resolvedStorage]
   );
   return /* @__PURE__ */ jsx(KlinechartsUIStateContext.Provider, { value: state, children: /* @__PURE__ */ jsx(KlinechartsUIDispatchContext.Provider, { value: dispatchValue, children }) });
 }
@@ -1437,7 +1551,17 @@ var defaultSettings = {
 };
 function useKlinechartsUISettings() {
   const { state, onSettingsChange } = useKlinechartsUI();
-  const [settings, setSettings] = useState(defaultSettings);
+  const { storage } = useKlinechartsUIDispatch();
+  const [settings, setSettings] = 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 = useRef(true);
   useEffect(() => {
     if (isInitialMount.current) {
@@ -1446,6 +1570,14 @@ function useKlinechartsUISettings() {
     }
     onSettingsChange?.({ ...settings });
   }, [settings, onSettingsChange]);
+  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 = useMemo(
     () => CANDLE_TYPES.map((ct) => ({
       key: ct.key,
@@ -2788,10 +2920,10 @@ function useCrosshair() {
 var alertCounter = 0;
 function useAlerts() {
   const { state, dispatch } = useKlinechartsUI();
-  const { alertTriggeredListenerRef } = useKlinechartsUIDispatch();
+  const { alertTriggeredListenersRef } = useKlinechartsUIDispatch();
   const alerts = state.alerts;
   const addAlert = useCallback(
-    (price, condition, message, extendData) => {
+    (price, condition, message, extendData, target) => {
       const id = `alert_${++alertCounter}`;
       const precision = state.chart?.getSymbol()?.pricePrecision ?? 2;
       const resolvedExtendData = {
@@ -2804,7 +2936,10 @@ 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: "ADD_ALERT", alert });
       if (state.chart) {
@@ -2835,9 +2970,13 @@ function useAlerts() {
   }, [state.chart, dispatch]);
   const onAlertTriggered = useCallback(
     (callback) => {
-      alertTriggeredListenerRef.current = callback;
+      const set = alertTriggeredListenersRef.current;
+      set.add(callback);
+      return () => {
+        set.delete(callback);
+      };
     },
-    [alertTriggeredListenerRef]
+    [alertTriggeredListenersRef]
   );
   return {
     alerts,
@@ -3441,71 +3580,161 @@ function useAnnotations() {
     clearAnnotations
   };
 }
+var WorkspaceContext = createContext(null);
+function useWorkspace() {
+  const ctx = 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] = useReducer(reducer2, defaultCells, (cells) => ({
+    cells,
+    activeCellId: cells[0]?.id ?? null
+  }));
+  const chartsRef = useRef(/* @__PURE__ */ new Map());
+  const broadcastingRef = useRef(false);
+  const resolvedSync = useMemo(
+    () => ({ ...DEFAULT_SYNC_CONFIG, ...sync }),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    []
+  );
+  const value = useMemo(
+    () => ({
+      state,
+      dispatch,
+      chartsRef,
+      broadcastingRef,
+      sync: resolvedSync
+    }),
+    [state, resolvedSync]
+  );
+  return /* @__PURE__ */ jsx(WorkspaceContext.Provider, { value, children });
+}
+function useChartSync({ cellId }) {
+  const { chartsRef, broadcastingRef, sync, dispatch: workspaceDispatch } = useWorkspace();
+  const { state } = useKlinechartsUI();
+  const chart = state.chart;
+  useEffect(() => {
+    if (!chart) return;
+    chartsRef.current.set(cellId, chart);
+    return () => {
+      chartsRef.current.delete(cellId);
+    };
+  }, [chart, cellId, chartsRef]);
+  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]);
+  useEffect(() => {
+    if (state.symbol) {
+      workspaceDispatch({ type: "SET_CELL_SYMBOL", id: cellId, symbol: state.symbol });
     }
-  };
+  }, [state.symbol]);
+  useEffect(() => {
+    workspaceDispatch({ type: "SET_CELL_PERIOD", id: cellId, period: state.period });
+  }, [state.period]);
 }
 
-export { CANDLE_TYPES, COMPARE_RULES, DEFAULT_PERIODS, DRAWING_CATEGORIES, INDICATOR_PARAMS, KlinechartsUIDispatchContext, KlinechartsUIProvider, KlinechartsUIStateContext, MAIN_INDICATORS, PRICE_AXIS_TYPES, SUB_INDICATORS, TIMEZONES, TOOLTIP_SHOW_RULES, YAXIS_POSITIONS, createDataLoader, useAlerts, useAnnotations, useChartAxes, useCompare, useCrosshair, useDataExport, useDrawingTools, useFullscreen, useHotkeys, useIndicators, useKlinechartsUI, useKlinechartsUILoading, useKlinechartsUISettings, useKlinechartsUITheme, useLayoutManager, useMeasure, useOrderLines, usePeriods, useReplay, useScreenshot, useScriptEditor, useSymbolSearch, useTimezone, useUndoRedo, useWatchlist };
+export { CANDLE_TYPES, COMPARE_RULES, DEFAULT_PERIODS, DEFAULT_STORAGE_KEY_PREFIX, DEFAULT_STORAGE_NAMESPACES, DEFAULT_SYNC_CONFIG, DRAWING_CATEGORIES, INDICATOR_PARAMS, KlinechartsUIProvider, MAIN_INDICATORS, PRICE_AXIS_TYPES, SUB_INDICATORS, TIMEZONES, TOOLTIP_SHOW_RULES, WorkspaceProvider, YAXIS_POSITIONS, createDefaultStorage, resolveStorage, useAlerts, useAnnotations, useChartAxes, useChartSync, useCompare, useCrosshair, useDataExport, useDrawingTools, useFullscreen, useHotkeys, useIndicators, useKlinechartsUILoading, useKlinechartsUISettings, useKlinechartsUITheme, useLayoutManager, useMeasure, useOrderLines, usePeriods, useReplay, useScreenshot, useScriptEditor, useSymbolSearch, useTimezone, useUndoRedo, useWatchlist, useWorkspace };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map