@363045841yyt/klinechart-core 0.8.14 → 0.9.0-alpha.0

package/src/engine/chart.ts

@@ -1,93 +1,99 @@
-import type { ChartSettings } from '../config/chartSettings'
-import type { SymbolSpec, SymbolInfo, CustomDataSource } from '../controllers/types'
-import { createSignal, type Signal, type Computed } from '../reactivity/signal'
-import type { KLineData } from '../types/price'
+import { createAlertController } from '../features/alerts/index'
+import {
+  createVolumeLookbacks,
+  pushToVolumeLookbacks,
+  type VolumeLookbacks,
+} from '../features/alerts/rollingVolume'
+import {
+  createPluginHost,
+  RendererPluginManager,
+  wrapPaneInfo,
+  type PluginHostImpl,
+  type RendererPlugin,
+  type RendererPluginWithHost,
+} from '../foundation/plugin/index'
+import {
+  computed,
+  type Computed,
+  type ReadonlySignal,
+  type Signal,
+} from '../foundation/reactivity/signal'
 
-import type {
-  ChartDom,
-  PaneSpec,
-  ChartOptions,
-  Viewport,
-  ViewportState,
-  IndicatorInstance,
-  SubPaneInfo,
-  DrawingToolType,
-} from './chartTypes'
 import { InteractionController, type InteractionSnapshot } from './controller/interaction'
+
+import type { ChartSettings } from '../foundation/config/chartSettings'
+import type { KLineData } from '../foundation/types/price'
+
+import type { IndicatorScheduler } from './indicators/scheduler'
+import type { CustomMarkerEntity, MarkerManager } from './marker/registry'
+import type { ChartModeHandler } from './modes/types'
+import type { SubIndicatorType } from './renderers/Indicator'
+import type { SubPaneEntry } from './subPaneManager'
+import type { ScaleType } from './utils/tickPosition'
+
+// ===== 普通 imports，按路径字母排序 =====
 import { ChartDataManager } from './data/chartDataManager'
 import { ChartIndicatorManager } from './indicators/chartIndicatorManager'
 import { resolveStateKey } from './indicators/indicatorMetadata'
-import type { IndicatorMetadata } from './indicators/indicatorMetadata'
-import type { IndicatorScheduler } from './indicators/scheduler'
 import { ChartPaneLayout } from './layout/chartPaneLayout'
 import { UpdateLevel, type VisibleRange } from './layout/pane'
-import type { ScaleType } from './utils/tickPosition'
-export type { InteractionSnapshot }
+import { KLineMode } from './modes/kLineMode'
+import { TimeShareMode } from './modes/timeShareMode'
 import { PaneRenderer } from './paneRenderer'
+import { ChartRenderer } from './render/chartRenderer'
 import { SharedWebGLSurface } from './renderers/webgl/sharedWebGLSurface'
-import type { MarkerManager, CustomMarkerEntity } from './marker/registry'
-import { getPhysicalKLineConfig } from './utils/klineConfig'
-import { ChartZoomController } from './utils/chartZoomController'
+import { ChartStateKernel } from './state/chartStateKernel'
 import { ChartViewportManager } from './viewport/chartViewportManager'
-import type { SubPaneEntry } from './subPaneManager'
-import { ChartRenderer } from './render/chartRenderer'
-import { KLineMode } from './modes/kLineMode'
-import { TimeShareMode } from './modes/timeShareMode'
-import type { ChartModeHandler } from './modes/types'
-
-import {
-  createPluginHost,
-  type PluginHostImpl,
-  RendererPluginManager,
-  type RendererPlugin,
-  type RendererPluginWithHost,
-  wrapPaneInfo,
-} from '../plugin'
-
-import type { SubIndicatorType } from './renderers/Indicator'
+import { getVisibleRange } from './viewport/viewport'
+import { ChartZoomController } from './utils/chartZoomController'
+import { getPhysicalKLineConfig } from './utils/klineConfig'
+import type {
+  ChartDom,
+  PaneSpec,
+  ChartOptions,
+  Viewport,
+  ViewportState,
+  IndicatorInstance,
+  SubPaneInfo,
+} from './chartTypes'
+import type { DrawingToolId } from './drawing/toolConfig'
+import type { DrawingInteractionController } from './drawing/interaction'
+import type { SymbolSpec, SymbolInfo, CustomDataSource } from '../controllers/types'
+import type { AlertController, MarketSnapshot } from '../features/alerts/types'
 
-import type { AlertController, MarketSnapshot } from '../alerts/types'
-import { createAlertController } from '../alerts'
-import {
-  createVolumeLookbacks,
-  pushToVolumeLookbacks,
-  type VolumeLookbacks,
-} from '../alerts/rollingVolume'
-import type { Layer } from '../scene/types'
+export type { InteractionSnapshot }
 
-// 重新导出以保持向后兼容
+// ===== 重新导出 =====
 export { getPhysicalKLineConfig }
 export type {
   ChartDom,
-  PaneSpec,
-  PaneRendererDom,
   ChartOptions,
+  DrawingObject,
+  IndicatorInstance,
+  IndicatorRole,
   KLinePositions,
+  PaneRendererDom,
+  PaneSpec,
+  SubPaneInfo,
   Viewport,
   ViewportState,
-  IndicatorRole,
-  IndicatorInstance,
-  SubPaneInfo,
-  DrawingToolType,
-  DrawingObject,
 } from './chartTypes'
 
-type ResolvedChartOptions = Omit<ChartOptions, 'kWidth' | 'kGap'> & {
-  kWidth: number
-  kGap: number
-}
+type ResolvedChartOptions = Omit<ChartOptions, 'kWidth' | 'kGap'>
 
 export class Chart {
   private dom: ChartDom
-  private opt: ResolvedChartOptions
   private dataManager: ChartDataManager
 
+  /** StateKernel — single source of truth for all chart state */
+  readonly kernel: ChartStateKernel
+
   private viewportManager: ChartViewportManager
   private layoutManager: ChartPaneLayout
   private get paneRenderers(): PaneRenderer[] {
     return this.layoutManager.getPaneRenderers()
   }
-  readonly interaction: InteractionController
+  readonly interaction!: InteractionController
 
   /** 插件宿主 */
   private pluginHost: PluginHostImpl
@@ -106,19 +112,24 @@ export class Chart {
 
   /** 渲染器 */
   private renderer: ChartRenderer
+  private runtimeProjectionDepth = 0
+  private runtimeProjectionDrawPending = false
+
+  /** 绘图交互会话（锚点/预览/拖拽）；工具 id 在 kernel */
+  private drawingSession: DrawingInteractionController | null = null
 
   /** 当前活跃的模式处理器 */
   private _activeMode: ChartModeHandler
   private _kLineMode = new KLineMode()
   private _timeShareMode = new TimeShareMode()
 
-  /** 模式切换时保存的渲染状态（退出分时时恢复） */
-  private _modeSavedKWidth = 0
-  private _modeSavedKGap = 0
-  private _modeSavedZoomLevel = 0
-
-  /** 分时模式激活前的 pane Y 轴刻度类型（退出分时时恢复） */
-  private _savedScaleTypes: Map<string, ScaleType> | undefined
+  /** 进入分时模式时保存的快照，退出时恢复（包含 zoom/scale/indicators） */
+  private _savedTimeShareState: {
+    zoomLevel: number
+    scaleTypes: Map<string, ScaleType>
+    mainIndicators: Array<{ id: string; params: Record<string, number | boolean | string> }>
+    subPanes: Array<{ id: string; params: Record<string, unknown> }>
+  } | null = null
 
   /** 上次预警评估的最新 K 线时间戳（用于去重） */
   private _lastAlertTimestamp: number | null = null
@@ -188,13 +199,7 @@ export class Chart {
   constructor(dom: ChartDom, opt: ChartOptions) {
     this.dom = dom
     const { kWidth: _kWidth, kGap: _kGap, ...restOpt } = opt
-    // Chart 不持有业务 SSOT，kWidth/kGap/zoomLevel 由外部通过 applyRenderState() 传入
-    this.opt = { ...restOpt, kWidth: _kWidth ?? 0, kGap: _kGap ?? 0 }
     this._activeMode = this._kLineMode
-    this.interaction = new InteractionController(this)
-    this.interaction.setOnInteractionChange((snapshot) => {
-      this._interactionSignal.set(snapshot)
-    })
     this.pluginHost = createPluginHost()
     this.rendererPluginManager = new RendererPluginManager()
     this.sharedWebGLSurface = new SharedWebGLSurface()
@@ -203,167 +208,252 @@ export class Chart {
     this.rendererPluginManager.setPluginHost(this.pluginHost)
     this.rendererPluginManager.setInvalidateCallback(() => this.scheduleDraw())
 
-    this.viewportManager = new ChartViewportManager({
-      getDom: () => this.dom,
-      getBottomAxisHeight: () => this.opt.bottomAxisHeight,
-      getLeftLoadBufferWidth: () => this.dataManager.getLeftLoadBufferWidth(),
-      getZoomLevel: () => this.zoomController.currentZoomLevel,
-      getLastVisibleRange: () => this.dataManager.lastVisibleRange,
-      getKWidth: () => this.opt.kWidth,
-      getKGap: () => this.opt.kGap,
-      scheduleDraw: (level) => this.scheduleDraw(level),
-      onResizeCompleted: () => {
-        this.resize()
+    const initialZoomLevel = opt.initialZoomLevel ?? 1
+    const zoomLevelCount = Math.max(2, Math.round(opt.zoomLevels ?? 20))
+
+    // ── StateKernel: single composition root (owns options, zoom, data, viewport, pane, theme, drawing, interaction) ──
+    this.kernel = new ChartStateKernel({
+      initialOptions: {
+        ...restOpt,
+        zoomLevelCount,
       },
+      initialZoomLevel,
+      scheduleDraw: (level) => this.scheduleDraw(level as UpdateLevel | undefined),
+    })
+
+    // Inject DOM deps into kernel's viewportState (needed before init)
+    this.kernel.setViewportDomDeps({
+      getDom: () => this.dom,
       resizeSharedWebGLSurface: (plotWidth, plotHeight, dpr) =>
         this.sharedWebGLSurface.resize(plotWidth, plotHeight, dpr),
     })
 
-    this.layoutManager = new ChartPaneLayout(this.opt.panes, {
+    // ── ViewportManager (DOM lifecycle: ResizeObserver + scroll events) ──
+    this.viewportManager = new ChartViewportManager(
+      {
+        getDom: () => this.dom,
+        onResizeCompleted: () => {
+          this.resize()
+        },
+      },
+      this.kernel,
+    )
+
+    // ── InteractionController ──
+    this.interaction = new InteractionController(this, this.kernel.interaction)
+
+    // ── Legacy managers ──
+    this.layoutManager = new ChartPaneLayout(restOpt.panes, {
       getDom: () => this.dom,
-      getOption: () => ({
-        rightAxisWidth: this.opt.rightAxisWidth,
-        leftAxisWidth: this.opt.leftAxisWidth,
-        yPaddingPx: this.opt.yPaddingPx,
-        priceLabelWidth: this.opt.priceLabelWidth,
-        paneGap: this.opt.paneGap,
-        defaultPaneMinHeightPx: this.opt.defaultPaneMinHeightPx,
-      }),
+      getOption: () => {
+        const o = this.kernel.options.readonly.options.peek()
+        return {
+          rightAxisWidth: o.rightAxisWidth,
+          leftAxisWidth: o.leftAxisWidth,
+          yPaddingPx: o.yPaddingPx,
+          priceLabelWidth: o.priceLabelWidth,
+          paneGap: o.paneGap,
+          defaultPaneMinHeightPx: o.defaultPaneMinHeightPx,
+        }
+      },
       getViewport: () => this.viewportManager.getViewport(),
       getSharedWebGLSurface: () => this.sharedWebGLSurface,
       setKnownPaneIds: (ids) => this.rendererPluginManager.setKnownPaneIds(ids),
       notifyPaneResize: (paneId, pane) =>
         this.rendererPluginManager.notifyResize(paneId, wrapPaneInfo(pane)),
       scheduleDraw: (level) => this.scheduleDraw(level),
-      onLayoutChange: (ratios, specs) => {
-        this._paneRatiosSignal.set(ratios)
-        this._paneLayoutSignal.set(specs)
-        this.opt = { ...this.opt, panes: specs }
+      getPaneRatios: () => this.kernel.pane.readonly.paneRatios.peek(),
+      getPaneScaleTypes: () => this.kernel.pane.readonly.paneScaleTypes.peek(),
+      commitLayout: (ratios, specs) => {
+        this.kernel.pane.actions.commitLayout(ratios, specs)
+        this.ensurePaneScaleTypesFromSettings()
       },
     })
 
     this.alertController = createAlertController()
 
-    this.dataManager = new ChartDataManager({
-      getOption: () => this.opt,
-      getEffectiveDpr: () => this.viewportManager.getEffectiveDpr(),
-      getLogicalScrollLeft: () => this.viewportManager.getLogicalScrollLeft(),
-      getCachedScrollLeft: () => this.viewportManager.getCachedScrollLeft(),
-      setScrollLeft: (v) => {
-        this.viewportManager.setScrollLeft(v)
-      },
-      getDom: () => this.dom,
-      getObservedSize: () => this.viewportManager.getObservedSize(),
-      getViewport: () => this.viewportManager.getViewport(),
-      scheduleDraw: (level) => this.scheduleDraw(level),
-      resetInteraction: () => this.interaction.reset(),
-      getIndicatorScheduler: () => this.indicatorManager.indicatorSchedulerAccessor,
-      setPendingIndicatorDataUpdate: (v) => {
-        this.dataManager.pendingIndicatorDataUpdate = v
-      },
-      isPointerDown: () => this.interaction.isPointerDown(),
-      onTimeShareDataReady: (dataLength) => {
-        const vp = this.viewportManager.computeViewport()
-        if (!vp || vp.plotWidth <= 0) return
-        const result = this._activeMode.computeKWidth(dataLength, vp.plotWidth, vp.dpr)
-        if (result) {
-          this.applyRenderState(result.kWidth, result.kGap)
-          const container = this.dom.container
-          if (container) {
-            const leftBuffer = this.dataManager.getLeftLoadBufferWidth()
+    this.dataManager = new ChartDataManager(
+      {
+        getOption: () => {
+          const o = this.kernel.options.readonly.options.peek()
+          return {
+            ...o,
+            kWidth: this.kernel.zoom.readonly.kWidth(),
+            kGap: this.kernel.viewport.readonly.kGap(),
+          }
+        },
+        getEffectiveDpr: () => this.viewportManager.getEffectiveDpr(),
+        getLogicalScrollLeft: () => this.viewportManager.getLogicalScrollLeft(),
+        getCachedScrollLeft: () => this.viewportManager.getCachedScrollLeft(),
+        setScrollLeft: (v) => {
+          this.viewportManager.setScrollLeft(v)
+        },
+        getDom: () => this.dom,
+        getObservedSize: () => this.viewportManager.getObservedSize(),
+        getViewport: () => this.viewportManager.getViewport(),
+        getVisibleRange: () => {
+          const vp = this.viewportManager.computeViewport()
+          if (!vp) return null
+          const dataLen = this.dataManager?.getData().length ?? 0
+          if (dataLen === 0) return null
+          return getVisibleRange(
+            vp.scrollLeft,
+            vp.plotWidth,
+            this.kernel.zoom.readonly.kWidth(),
+            this.kernel.viewport.readonly.kGap(),
+            dataLen,
+            vp.dpr,
+          )
+        },
+        getLeftLoadBufferWidth: () => this.kernel.viewport.readonly.leftLoadBufferWidth.peek(),
+        getContentWidth: () => this.kernel.viewport.readonly.contentWidth.peek(),
+        scheduleDraw: (level) => this.scheduleDraw(level),
+        resetInteraction: () => this.interaction.reset(),
+        getIndicatorScheduler: () => this.indicatorManager.indicatorSchedulerAccessor,
+        isPointerDown: () => this.interaction.isPointerDown(),
+        onTimeShareDataReady: (dataLength) => {
+          const vp = this.viewportManager.computeViewport()
+          if (!vp || vp.plotWidth <= 0) return
+          const result = this._activeMode.computeKWidth(dataLength, vp.plotWidth, vp.dpr)
+          if (result) {
+            this.applyRenderState(result.kWidth, result.kGap)
+            const leftBuffer = this.getLeftLoadBufferWidth()
             this.viewportManager.setScrollLeft(leftBuffer)
-            this.viewportManager.applyPendingScrollLeft(container)
           }
-        }
+        },
+        onDataProcessed: (data, range) => this.evaluateAlerts(data, range),
+        setSymbols: (symbols) => this.kernel.actions.setSymbols(symbols),
+        setComparisonLoading: (loading) => this.kernel.comparison.actions.setLoading(loading),
+        comparisonSpecs$: this.kernel.comparison.readonly.specs,
+        comparisonColors$: this.kernel.comparison.readonly.colors,
+        comparisonLoading$: this.kernel.comparison.readonly.loading,
       },
-      onDataProcessed: (data, range) => this.evaluateAlerts(data, range), // Alert 管线绑定
-    })
+      this.kernel.data,
+      this.kernel.dataManager,
+    )
 
-    this.zoomController = new ChartZoomController({
-      getLogicalScrollLeft: () => this.viewportManager.getLogicalScrollLeft(),
-      getCurrentDpr: () => this.viewportManager.getEffectiveDpr(),
-      getLeftLoadBufferWidth: () => this.dataManager.getLeftLoadBufferWidth(),
-      getContentWidth: () => this.dataManager.getContentWidth(),
-      getClientWidth: () =>
-        this.viewportManager.getViewport()?.viewWidth ?? this.dom.container?.clientWidth ?? 0,
-      setScrollLeft: (v) => {
-        this.viewportManager.setScrollLeft(v)
-      },
-      onZoomCommitted: (result) => {
-        this.opt = { ...this.opt, kWidth: result.kWidth, kGap: result.kGap }
-        this.updateViewportSignal()
-        this.scheduleDraw()
+    this.zoomController = new ChartZoomController(
+      {
+        getLogicalScrollLeft: () => this.viewportManager.getLogicalScrollLeft(),
+        getCurrentDpr: () => this.viewportManager.getEffectiveDpr(),
+        getClientWidth: () =>
+          this.viewportManager.getViewport()?.viewWidth ?? this.dom.container?.clientWidth ?? 0,
+        getDataLength: () => this.dataManager.getData().length,
+        getPlotWidth: () => this.getLeftLoadBufferWidth(),
+        setScrollLeft: (v) => {
+          this.viewportManager.setScrollLeft(v)
+        },
+        onChange: () => {
+          this.scheduleDraw()
+        },
+        getMinKWidth: () => this.kernel.options.readonly.options.peek().minKWidth,
+        getMaxKWidth: () => this.kernel.options.readonly.options.peek().maxKWidth,
+        getPeriod: () => this.kernel.dataManager.readonly.currentPeriod.peek(),
+        zoomLevelCount,
       },
-      getKWidth: () => this.opt.kWidth,
-      getKGap: () => this.opt.kGap,
-      getMinKWidth: () => this.opt.minKWidth,
-      getMaxKWidth: () => this.opt.maxKWidth,
-      zoomLevelCount: Math.max(2, Math.round(this.opt.zoomLevels ?? 20)),
-      initialZoomLevel: this.opt.initialZoomLevel ?? 1,
-    })
-    // 注意：初始 kWidth/kGap 应由外部通过 applyRenderState() 传入
+      this.kernel.zoom,
+    )
 
-    // 初始化指标管理器
     this.indicatorManager = new ChartIndicatorManager({
-      getOption: () => this.opt,
+      getOption: () => {
+        const o = this.kernel.options.readonly.options.peek()
+        return {
+          ...o,
+          kWidth: this.kernel.zoom.readonly.kWidth(),
+          kGap: this.kernel.viewport.readonly.kGap(),
+        }
+      },
       getPluginHost: () => this.pluginHost,
       getRenderer: (name) => this.getRenderer(name),
       useRenderer: (plugin, config) => this.useRenderer(plugin, config),
       removeRenderer: (name) => this.removeRenderer(name),
       updateRendererConfig: (name, config) => this.updateRendererConfig(name, config),
       setRendererEnabled: (name, enabled) => this.setRendererEnabled(name, enabled),
-      hasPane: (paneId) => this.layoutManager.hasPane(paneId),
-      upsertPane: (def) => this.layoutManager.upsertPane(def),
-      removePaneDefinition: (paneId) => this.layoutManager.removePaneDefinition(paneId),
-      getPaneSpecs: () => this.layoutManager.getPaneSpecs(),
-      getPaneRatiosSignal: () => this._paneRatiosSignal,
-      getInternalPaneRatios: () => this.layoutManager.getInternalPaneRatios(),
-      setInternalPaneRatio: (paneId, ratio) =>
-        this.layoutManager.setInternalPaneRatio(paneId, ratio),
-      deleteInternalPaneRatio: (paneId) => this.layoutManager.deleteInternalPaneRatio(paneId),
-      applyPaneLayoutSpecs: (specs) => this.layoutManager.applyPaneLayoutSpecs(specs),
-      getLastVisibleRange: () => this.dataManager.lastVisibleRange,
+      getPaneRatiosSignal: () =>
+        this.kernel.pane.readonly.paneRatios as ReadonlySignal<Readonly<Record<string, number>>>,
+      paneSpecs$: this.kernel.pane.readonly.paneSpecs,
+      projectPaneLayout: (specs, ratios) => {
+        this.layoutManager.projectState(specs, ratios)
+        this.ensurePaneScaleTypesFromSettings()
+      },
+      getLastVisibleRange: () => this.dataManager.getCurrentVisibleRange() ?? { start: 0, end: 0 },
       getCrosshairPos: () => this.interaction.crosshairPos,
       getCrosshairPrice: () => this.interaction.crosshairPrice,
       getActivePaneId: () => this.interaction.activePaneId,
       scheduleDraw: (level) => this.scheduleDraw(level),
-      setPendingIndicatorDataUpdate: (v) => {
-        this.dataManager.pendingIndicatorDataUpdate = v
-      },
       getRenderContext: (paneId) => this.renderer?.getPaneCtxMap()?.get(paneId) ?? null,
       addLayer: (layer) => this.renderer?.getScene()?.addLayer(layer),
       removeLayer: (id) => this.renderer?.getScene()?.removeLayer(id) ?? false,
       getLayer: (id) => this.renderer?.getScene()?.getLayer(id) ?? null,
       setLayerVisibility: (id, visible) =>
         this.renderer?.getScene()?.setLayerVisibility(id, visible),
+      getRightAxisWidth: () => this.kernel.options.readonly.options.peek().rightAxisWidth,
+      getPriceLabelWidth: () => this.kernel.options.readonly.options.peek().priceLabelWidth ?? 60,
+      getYPaddingPx: () => this.kernel.options.readonly.options.peek().yPaddingPx,
+      mainIndicators$: this.kernel.indicator.readonly.mainIndicators,
+      upsertMainIndicator: (id, params) => this.kernel.indicator.actions.upsert(id, params),
+      removeMainIndicator: (id) => this.kernel.indicator.actions.remove(id),
+      setMainIndicatorParams: (id, params) => this.kernel.indicator.actions.setParams(id, params),
+      replaceMainIndicators: (entries) => this.kernel.indicator.actions.replaceAll(entries),
+      clearMainIndicators: () => this.kernel.indicator.actions.clear(),
+      subPanes$: this.kernel.subPane.readonly.entries,
+      createSubPaneState: (paneId, indicatorId, params) =>
+        this.kernel.actions.createSubPane(paneId, indicatorId, params),
+      removeSubPaneState: (paneId) => this.kernel.actions.removeSubPane(paneId),
+      replaceSubPaneState: (paneId, indicatorId, params) =>
+        this.kernel.actions.replaceSubPane(paneId, indicatorId, params),
+      updateSubPaneStateParams: (paneId, params) =>
+        this.kernel.actions.updateSubPaneParams(paneId, params),
+      clearSubPaneState: () => this.kernel.actions.clearSubPanes(),
+      runRendererTransaction: (run) => this.runRuntimeProjection(run),
     })
 
     // Worker 异步结果就绪后串联 Alert 管线
     this.indicatorManager.indicatorSchedulerAccessor.setOnResultsApplied(() => {
       const data = this.dataManager.getInternalData()
-      this.evaluateAlerts(data, this.dataManager.lastVisibleRange)
+      this.evaluateAlerts(data, this.dataManager.getCurrentVisibleRange() ?? { start: 0, end: 0 })
     })
 
+    // 绑定 visibleRange 信号 — 替代 prepareFrameData 中的手动 updateVisibleRange
+    this.indicatorManager.indicatorSchedulerAccessor.setVisibleRangeSignal(
+      this.kernel.viewport.readonly.visibleRange as unknown as ReadonlySignal<{
+        start: number
+        end: number
+      } | null>,
+    )
+
     // 初始化渲染器
     this.renderer = new ChartRenderer({
       getDom: () => this.dom,
-      getOption: () => this.opt,
+      getOption: () => {
+        const o = this.kernel.options.readonly.options.peek()
+        return {
+          ...o,
+          kWidth: this.kernel.zoom.readonly.kWidth(),
+          kGap: this.kernel.viewport.readonly.kGap(),
+        }
+      },
       getPaneRenderers: () => this.paneRenderers,
       getInteraction: () => this.interaction,
       getSharedWebGLSurface: () => this.sharedWebGLSurface,
       getPluginHost: () => this.pluginHost,
       getRendererPluginManager: () => this.rendererPluginManager,
-      getTheme: () => this._themeSignal.peek(),
-      getCurrentZoomLevel: () => this.zoomController.currentZoomLevel,
-      getZoomLevelCount: () => this.zoomController.zoomLevelCount,
+      getTheme: () => this.kernel.theme.readonly.theme.peek(),
+      getCurrentZoomLevel: () => this.kernel.zoom.readonly.zoomLevel.peek(),
+      getZoomLevelCount: () => this.kernel.options.readonly.options.peek().zoomLevelCount,
       getViewportManager: () => this.viewportManager,
       getDataManager: () => this.dataManager,
       getIndicatorManager: () => this.indicatorManager,
       getActiveMode: () => this._activeMode,
+      settings$: this.kernel.settings.readonly.settings,
+      customMarkers$: this.kernel.marker.readonly.customMarkers,
+      drawings$: this.kernel.drawing.readonly.drawings,
+      selectedDrawingId$: this.kernel.drawing.readonly.selectedDrawingId,
     })
     this.renderer.registerDrawingPlugins()
     this.renderer.initCoreRenderers()
     this.viewportManager.init()
+    this.ensurePaneScaleTypesFromSettings()
   }
 
   getViewport(): Viewport | null {
@@ -381,26 +471,37 @@ export class Chart {
     const prev = this._activeMode
 
     if (mode === this._timeShareMode) {
-      this._modeSavedKWidth = this.opt.kWidth
-      this._modeSavedKGap = this.opt.kGap
-      this._modeSavedZoomLevel = this.zoomController.currentZoomLevel
-      this._savedScaleTypes = new Map<string, ScaleType>()
+      this._savedTimeShareState = {
+        zoomLevel: this.kernel.zoom.readonly.zoomLevel.peek(),
+        scaleTypes: new Map(this.kernel.pane.readonly.paneScaleTypes.peek()),
+        mainIndicators: [],
+        subPanes: [],
+      }
+      for (const [id, entry] of this.kernel.indicator.readonly.mainIndicators.peek()) {
+        this._savedTimeShareState.mainIndicators.push({ id, params: { ...entry.params } })
+      }
+      this._savedTimeShareState.subPanes = this.indicatorManager.getSubPaneEntries().map((e) => ({
+        id: e.indicatorId,
+        params: { ...e.params },
+      }))
+      // 分时强制 percent 进 kernel，再投影（不再由 updatePaneRange 每帧旁路写）
+      const percentMap = new Map<string, ScaleType>()
       for (const r of this.paneRenderers) {
-        this._savedScaleTypes.set(r.getPane().id, r.getPane().yAxis.getScaleType())
+        percentMap.set(r.getPane().id, 'percent')
       }
+      this.kernel.pane.actions.replacePaneScaleTypes(percentMap)
+      this.projectPaneScaleTypes()
     } else if (prev === this._timeShareMode) {
+      const savedTypes = this._savedTimeShareState?.scaleTypes ?? new Map<string, ScaleType>()
+      this.kernel.pane.actions.replacePaneScaleTypes(savedTypes)
+      this.projectPaneScaleTypes()
       for (const renderer of this.paneRenderers) {
-        const p = renderer.getPane()
-        const saved = this._savedScaleTypes?.get(p.id) ?? 'linear'
-        p.yAxis.setScaleType(saved)
-        p.yAxis.setBasePrice(null)
+        renderer.getPane().yAxis.setBasePrice(null)
       }
-      this._savedScaleTypes = undefined
     }
 
-    if (this._modeSavedKWidth > 0 && mode !== this._timeShareMode) {
-      this.applyRenderState(this._modeSavedKWidth, this._modeSavedKGap, this._modeSavedZoomLevel)
-      this._modeSavedKWidth = 0
+    if (this._savedTimeShareState && mode !== this._timeShareMode) {
+      this.kernel.zoom.actions.setZoomLevel(this._savedTimeShareState.zoomLevel)
     }
 
     prev.onDeactivate(
@@ -423,6 +524,32 @@ export class Chart {
       },
       prev,
     )
+
+    if (mode === this._timeShareMode) {
+      for (const { id } of this._savedTimeShareState!.mainIndicators) {
+        if (id !== 'TIMESHARE') {
+          this.indicatorManager.disableMainIndicator(id)
+        }
+      }
+      this.indicatorManager.clearSubPanes()
+    } else if (prev === this._timeShareMode) {
+      const saved = this._savedTimeShareState
+      if (saved) {
+        for (const { id, params } of saved.mainIndicators) {
+          if (id !== 'TIMESHARE') {
+            this.indicatorManager.enableMainIndicator(id, params)
+          }
+        }
+        for (const { id, params } of saved.subPanes) {
+          this.indicatorManager.addIndicator(id, 'sub', params)
+        }
+      }
+      this._savedTimeShareState = null
+    }
+
+    // 副作用成功后再写 kernel mode id
+    const id = mode === this._timeShareMode ? 'timeshare' : 'kline'
+    this.kernel.mode.actions.setChartMode(id)
   }
 
   getCurrentDpr(): number {
@@ -496,22 +623,68 @@ export class Chart {
     return this.rendererPluginManager.getAllPlugins()
   }
 
-  /** 更新用户设置（触发重绘） */
+  /** 将 kernel.paneScaleTypes 投影到各 pane PriceScale（runtime 非 SSOT） */
+  private projectPaneScaleTypes(): void {
+    const types = this.kernel.pane.readonly.paneScaleTypes.peek()
+    for (const renderer of this.paneRenderers) {
+      const pane = renderer.getPane()
+      const t = types.get(pane.id) ?? 'linear'
+      if (pane.yAxis.getScaleType() !== t) pane.yAxis.setScaleType(t)
+    }
+  }
+
+  /**
+   * 为缺失 paneScaleTypes 的 pane 按 settings.rightAxisType 补齐，再投影。
+   * commitLayout 只保留已有 id，不静默塞 linear，避免盖掉用户偏好。
+   */
+  private ensurePaneScaleTypesFromSettings(): void {
+    const axisType = this.kernel.settings.readonly.settings.peek().rightAxisType as
+      | string
+      | undefined
+    const next = new Map(this.kernel.pane.readonly.paneScaleTypes.peek())
+    let changed = false
+    for (const renderer of this.paneRenderers) {
+      const pane = renderer.getPane()
+      if (next.has(pane.id)) continue
+      const scaleType =
+        !axisType || axisType === 'none'
+          ? 'linear'
+          : axisType === 'percent' && pane.role !== 'price'
+            ? 'linear'
+            : (axisType as ScaleType)
+      next.set(pane.id, scaleType)
+      changed = true
+    }
+    if (changed) this.kernel.pane.actions.replacePaneScaleTypes(next)
+    this.projectPaneScaleTypes()
+  }
+
+  /** 按 rightAxisType 写入 paneScaleTypes 并投影 */
+  private applyRightAxisTypeToKernel(axisType: string): void {
+    if (axisType === 'none') return
+    const next = new Map(this.kernel.pane.readonly.paneScaleTypes.peek())
+    for (const renderer of this.paneRenderers) {
+      const pane = renderer.getPane()
+      const scaleType =
+        axisType === 'percent' && pane.role !== 'price' ? 'linear' : (axisType as ScaleType)
+      next.set(pane.id, scaleType)
+    }
+    this.kernel.pane.actions.replacePaneScaleTypes(next)
+    this.projectPaneScaleTypes()
+  }
+
+  /**
+   * 更新用户设置（触发重绘）—— 业务态只写 kernel.settings。
+   * 使用 patch 合并到当前 resolved，避免 partial 覆盖把未传 key 打回默认。
+   */
   updateSettings(settings: ChartSettings): void {
-    this.renderer.updateSettings(settings)
-    this.interaction.updateSettings(settings)
+    const prev = this.kernel.settings.readonly.settings.peek()
+    this.kernel.settings.actions.patch(settings)
+    const next = this.kernel.settings.readonly.settings.peek()
+    this.interaction.onSettingsChanged(prev, next)
 
-    // 同步右轴刻度类型设置到所有 pane（百分比仅用于主图）
     if ('rightAxisType' in settings) {
-      const axisType = settings.rightAxisType as string
-      if (axisType !== 'none') {
-        for (const renderer of this.paneRenderers) {
-          const pane = renderer.getPane()
-          const scaleType =
-            axisType === 'percent' && pane.role !== 'price' ? 'linear' : (axisType as ScaleType)
-          pane.yAxis.setScaleType(scaleType)
-        }
-      }
+      this.applyRightAxisTypeToKernel(settings.rightAxisType as string)
     }
 
     this.scheduleDraw()
@@ -528,35 +701,35 @@ export class Chart {
   // ========== Render State API (Vue SSOT) ==========
 
   /**
-   * 应用渲染状态（由 Vue/Store 层在状态更新后调用）
-   * Chart 不拥有业务 SSOT，只负责接收参数并渲染
-   * 这是写入 opt.kWidth/kGap 和 currentZoomLevel 的唯一入口
+   * 应用渲染状态
+   * kWidth/zoomLevel 写入 kernel；kGap 由 viewport 根据 kWidth+dpr+period 派生，禁止外部写入。
+   * 有 zoomLevel 时走离散缩放；无 zoomLevel（分时）时写 direct kWidth。
+   * @param kGap 已废弃，保留签名兼容旧调用方
    */
   applyRenderState(kWidth: number, kGap: number, zoomLevel?: number): void {
-    const nextZoomLevel =
-      zoomLevel !== undefined
-        ? Math.max(1, Math.min(this.zoomController.zoomLevelCount, zoomLevel))
-        : this.zoomController.currentZoomLevel
-    const renderStateChanged =
-      this.opt.kWidth !== kWidth ||
-      this.opt.kGap !== kGap ||
-      this.zoomController.currentZoomLevel !== nextZoomLevel
-
-    if (!renderStateChanged) {
-      return
-    }
+    void kGap
+    const beforeLevel = this.kernel.zoom.readonly.zoomLevel.peek()
+    const beforeWidth = this.kernel.zoom.readonly.kWidth.peek()
 
-    this.opt = { ...this.opt, kWidth, kGap }
     if (zoomLevel !== undefined) {
-      this.zoomController.setZoomLevel(nextZoomLevel)
+      this.kernel.zoom.actions.setZoomLevel(zoomLevel)
+    } else {
+      this.kernel.zoom.actions.setDirectKWidth(kWidth)
+    }
+
+    if (
+      beforeLevel === this.kernel.zoom.readonly.zoomLevel.peek() &&
+      beforeWidth === this.kernel.zoom.readonly.kWidth.peek()
+    ) {
+      return
     }
-    this.updateViewportSignal()
+
     this.scheduleDraw()
   }
 
   /** 获取总缩放级别数 */
   getZoomLevelCount(): number {
-    return this.zoomController.zoomLevelCount
+    return this.kernel.options.readonly.options.peek().zoomLevelCount
   }
 
   /** 获取所有 PaneRenderer */
@@ -569,15 +742,24 @@ export class Chart {
     return this.renderer.getMarkerManager()
   }
 
-  /** 更新自定义标记 */
+  /** 更新自定义标记（写 kernel + 清帧缓存 + 重绘） */
   updateCustomMarkers(markers: CustomMarkerEntity[]): void {
-    this.renderer.getMarkerManager().setCustomMarkers(markers)
+    this.kernel.marker.actions.setCustomMarkers(markers)
+    this.renderer.getMarkerManager().clearPositionCache()
+    this.scheduleDraw()
+  }
+
+  /** 注册或覆盖单个自定义标记 */
+  registerCustomMarker(marker: CustomMarkerEntity): void {
+    this.kernel.marker.actions.registerCustomMarker(marker)
+    this.renderer.getMarkerManager().clearPositionCache()
     this.scheduleDraw()
   }
 
   /** 清除自定义标记 */
   clearCustomMarkers(): void {
-    this.renderer.getMarkerManager().clearCustomMarkers()
+    this.kernel.marker.actions.clearCustomMarkers()
+    this.renderer.getMarkerManager().clearPositionCache()
     this.scheduleDraw()
   }
 
@@ -588,7 +770,10 @@ export class Chart {
 
   /** 获取当前 ChartOptions（返回内部当前快照） */
   getOption() {
-    return this.opt
+    return {
+      ...this.kernel.options.readonly.options.peek(),
+      panes: this.kernel.pane.readonly.paneSpecs.peek(),
+    }
   }
 
   /**
@@ -607,17 +792,18 @@ export class Chart {
 
     if (partial.panes) {
       const nextPanes = partial.panes.map((pane) => ({ ...pane }))
-      this.opt = { ...this.opt, ...partial, panes: nextPanes }
+      this.kernel.options.actions.patch({ ...partial, panes: nextPanes })
       this.layoutManager.applyPaneLayoutSpecs(nextPanes)
       return
     }
 
-    this.opt = { ...this.opt, ...partial }
+    this.kernel.options.actions.patch(partial)
     this.resize()
   }
 
   updatePaneLayout(panes: PaneSpec[]): void {
     this.layoutManager.updatePaneLayout(panes)
+    this.ensurePaneScaleTypesFromSettings()
   }
 
   setPaneDefinitions(defs: PaneSpec[]): void {
@@ -640,21 +826,27 @@ export class Chart {
     this.indicatorManager.bindIndicatorToPane(paneId, indicatorId, params)
   }
 
-  /** 更新绘图对象 */
-  setDrawings(drawings: import('../plugin').DrawingObject[]): void {
-    this.renderer.getDrawingStore().setAll(drawings)
-    this._drawingsSignal.set(drawings)
+  /** 更新绘图对象（写 kernel + 重绘） */
+  setDrawings(drawings: import('../foundation/plugin').DrawingObject[]): void {
+    this.kernel.drawing.actions.setDrawings(drawings)
     this.scheduleDraw()
   }
 
   /** 更新选中的绘图 ID */
   setSelectedDrawingId(id: string | null): void {
-    const store = this.renderer.getDrawingStore()
-    if (store.getSelectedId() === id) return
-    store.setSelectedId(id)
+    if (this.kernel.drawing.readonly.selectedDrawingId.peek() === id) return
+    this.kernel.drawing.actions.setSelectedDrawingId(id)
     this.scheduleDraw()
   }
 
+  /**
+   * 获取 DrawingStore（只读投影 kernel.drawing）。
+   * @remarks 禁止经 store 写入；变更请用 setDrawings / setSelectedDrawingId。
+   */
+  getDrawingStore() {
+    return this.renderer.getDrawingStore()
+  }
+
   getPaneLayoutSpecs(): PaneSpec[] {
     return this.layoutManager.getPaneLayoutSpecs()
   }
@@ -786,6 +978,11 @@ export class Chart {
     return this.dataManager.getRenderData()
   }
 
+  /** K线原始数据（分时模式下为空） */
+  getInternalData(): KLineData[] {
+    return this.dataManager.getInternalData()
+  }
+
   /** 获取指标调度器（供外部控制器更新指标配置） */
   getIndicatorScheduler(): IndicatorScheduler {
     return this.indicatorManager.indicatorSchedulerAccessor
@@ -797,7 +994,7 @@ export class Chart {
   }
 
   /** 数据就绪时触发预警评估 */
-  private evaluateAlerts(data: KLineData[], range: VisibleRange): void {
+  private evaluateAlerts(data: KLineData[], _range: VisibleRange): void {
     const latest = data[data.length - 1]
     if (!latest) return
     // 去重：同一根 K 线只评估一次（增量加载/Worker 重复回调时跳过）
@@ -902,12 +1099,12 @@ export class Chart {
 
   /** 获取内容总宽度（用于外部 scroll-content 撑开 scrollWidth） */
   getContentWidth(): number {
-    return this.dataManager.getContentWidth()
+    return this.kernel.viewport.readonly.contentWidth.peek()
   }
 
   /** 获取左侧加载缓冲宽度（视口宽度，用于计算 overlay 像素偏移） */
   getLeftLoadBufferWidth(): number {
-    return this.dataManager.getLeftLoadBufferWidth()
+    return this.kernel.viewport.readonly.leftLoadBufferWidth.peek()
   }
 
   /** 滚动到最右侧（最新数据位置） */
@@ -917,7 +1114,7 @@ export class Chart {
 
   /** 容器尺寸变化时调用 */
   resize() {
-    if (this._activeMode.debugName === 'TimeShare') {
+    if (this._activeMode === this._timeShareMode) {
       const tsData = this.dataManager.getTimeShareData()
       const vp = this.viewportManager.computeViewport()
       if (!vp || vp.plotWidth <= 0) return
@@ -925,17 +1122,12 @@ export class Chart {
         const result = this._activeMode.computeKWidth(tsData.length, vp.plotWidth, vp.dpr)
         if (result) {
           this.applyRenderState(result.kWidth, result.kGap)
-          const container = this.dom.container
-          if (container) {
-            const leftBuffer = this.dataManager.getLeftLoadBufferWidth()
-            this.viewportManager.setScrollLeft(leftBuffer)
-            this.viewportManager.applyPendingScrollLeft(container)
-          }
+          const leftBuffer = this.getLeftLoadBufferWidth()
+          this.viewportManager.setScrollLeft(leftBuffer)
         }
       }
       this.renderer.clearCachedFrame()
       this.layoutManager.layoutPanes()
-      this.viewportManager.updateViewportSignal()
       this.scheduleDraw()
       return
     }
@@ -946,7 +1138,6 @@ export class Chart {
     }
     this.renderer.clearCachedFrame()
     this.layoutManager.layoutPanes()
-    this.viewportManager.updateViewportSignal()
     this.scheduleDraw()
   }
 
@@ -955,17 +1146,35 @@ export class Chart {
    * @param level 更新级别，默认为 All
    */
   scheduleDraw(level: UpdateLevel = UpdateLevel.All): void {
+    if (this.runtimeProjectionDepth > 0) {
+      this.runtimeProjectionDrawPending = true
+      return
+    }
     this.renderer.scheduleDraw(level)
   }
 
+  private runRuntimeProjection(run: () => void): void {
+    this.runtimeProjectionDepth++
+    try {
+      this.rendererPluginManager.transaction(run)
+    } finally {
+      this.runtimeProjectionDepth--
+      if (this.runtimeProjectionDepth === 0 && this.runtimeProjectionDrawPending) {
+        this.runtimeProjectionDrawPending = false
+        this.renderer?.scheduleDraw(UpdateLevel.All)
+      }
+    }
+  }
+
   /** 销毁图表实例 */
   async destroy() {
+    this.indicatorManager.destroy()
     this.renderer.destroy()
     this.dataManager.destroy()
     this.viewportManager.destroy()
     this.layoutManager.destroy()
     this.sharedWebGLSurface.destroy()
-    this.indicatorManager.destroy()
+    this.kernel.dispose()
     this.alertController.dispose()
     await this.pluginHost.destroy()
   }
@@ -976,50 +1185,39 @@ export class Chart {
 
   // ==================== Facade API (High-level interface for adapters) ====================
 
-  private _themeSignal = createSignal<'light' | 'dark'>('light')
-  private _drawingToolSignal = createSignal<DrawingToolType | null>(null)
-  private _drawingsSignal = createSignal<ReadonlyArray<import('../plugin').DrawingObject>>([])
-  private _paneRatiosSignal = createSignal<Readonly<Record<string, number>>>({})
-  private _paneLayoutSignal = createSignal<PaneSpec[]>([])
-  private _interactionSignal = createSignal<InteractionSnapshot>({
-    crosshairPos: null,
-    crosshairIndex: null,
-    crosshairPrice: null,
-    hoveredIndex: null,
-    activePaneId: null,
-    tooltipPos: { x: 0, y: 0 },
-    tooltipAnchorPlacement: 'right-bottom',
-    hoveredMarkerData: null,
-    hoveredCustomMarker: null,
-    isDragging: false,
-    isResizingPaneBoundary: false,
-    isHoveringPaneBoundary: false,
-    hoveredPaneBoundaryId: null,
-    isHoveringRightAxis: false,
-  })
+  /** interactionSnapshot lazy computed for the createChartController facade */
+  private get _interactionSnapshot(): Computed<InteractionSnapshot> {
+    if (!this.__interactionSnapshot) {
+      this.__interactionSnapshot = computed(() =>
+        this.kernel.interaction.readonly.interactionSnapshot(),
+      )
+    }
+    return this.__interactionSnapshot
+  }
+  private __interactionSnapshot: Computed<InteractionSnapshot> | null = null
 
   /** 视口状态信号 */
-  get viewport(): Signal<ViewportState> {
+  get viewport(): ReadonlySignal<ViewportState> {
     return this.viewportManager.viewportSignal
   }
 
   /** 数据信号 */
-  get data(): Signal<ReadonlyArray<KLineData>> {
+  get data(): ReadonlySignal<ReadonlyArray<KLineData>> {
     return this.dataManager.data
   }
 
   /** 加载信号 */
-  get loading(): Signal<boolean> {
+  get loading(): ReadonlySignal<boolean> {
     return this.dataManager.loading
   }
 
   /** 符号信号 */
-  get symbols(): Signal<ReadonlyArray<SymbolSpec>> {
+  get symbols(): ReadonlySignal<ReadonlyArray<SymbolSpec>> {
     return this.dataManager.symbols
   }
 
   /** 可用品种目录信号 — 供 UI 品种选择器消费 */
-  get symbolCatalog(): Signal<ReadonlyArray<SymbolInfo>> {
+  get symbolCatalog(): ReadonlySignal<ReadonlyArray<SymbolInfo>> {
     return this.dataManager.symbolCatalog
   }
 
@@ -1029,18 +1227,18 @@ export class Chart {
   }
 
   /** 比较商品颜色信号 */
-  get comparisonColors(): Signal<ReadonlyMap<string, string>> {
+  get comparisonColors(): ReadonlySignal<ReadonlyMap<string, string>> {
     return this.dataManager.comparisonColors
   }
 
   /** 比较商品加载信号 */
-  get comparisonLoading(): Signal<boolean> {
+  get comparisonLoading(): ReadonlySignal<boolean> {
     return this.dataManager.comparisonLoading
   }
 
   /** 主题信号 */
-  get theme(): Signal<'light' | 'dark'> {
-    return this._themeSignal
+  get theme(): ReadonlySignal<'light' | 'dark'> {
+    return this.kernel.theme.readonly.theme
   }
 
   /** 指标实例列表信号（派生信号，自动随主/副图状态更新） */
@@ -1053,28 +1251,36 @@ export class Chart {
     return this.indicatorManager.subPanesComputed
   }
 
-  /** 当前绘图工具信号 */
-  get drawingTool(): Signal<DrawingToolType | null> {
-    return this._drawingToolSignal
+  /** 当前绘图工具信号（DrawingToolId，默认 cursor） */
+  get drawingTool(): ReadonlySignal<DrawingToolId> {
+    return this.kernel.drawing.readonly.drawingTool
+  }
+
+  /** 注册/注销绘图交互会话，使 setDrawingTool 能清会话副作用 */
+  registerDrawingSession(session: DrawingInteractionController | null): void {
+    this.drawingSession = session
+    if (session) {
+      session.applyToolSession(this.kernel.drawing.readonly.drawingTool.peek())
+    }
   }
 
   /** 绘图对象列表信号 */
-  get drawings(): Signal<ReadonlyArray<import('../plugin').DrawingObject>> {
-    return this._drawingsSignal
+  get drawings(): ReadonlySignal<ReadonlyArray<import('../foundation/plugin').DrawingObject>> {
+    return this.kernel.drawing.readonly.drawings
   }
 
   /** 面板比例信号 */
-  get paneRatios(): Signal<Readonly<Record<string, number>>> {
-    return this._paneRatiosSignal
+  get paneRatios(): ReadonlySignal<Readonly<Record<string, number>>> {
+    return this.kernel.pane.readonly.paneRatios
   }
 
-  get paneLayout(): Signal<PaneSpec[]> {
-    return this._paneLayoutSignal
+  get paneLayout(): ReadonlySignal<ReadonlyArray<PaneSpec>> {
+    return this.kernel.pane.readonly.paneSpecs
   }
 
   /** 交互状态信号 */
-  get interactionState(): Signal<InteractionSnapshot> {
-    return this._interactionSignal
+  get interactionState(): ReadonlySignal<InteractionSnapshot> {
+    return this._interactionSnapshot
   }
 
   // ---------- Data ----------
@@ -1091,8 +1297,8 @@ export class Chart {
     this.dataManager.setDataFetcher(fetcher)
   }
 
-  get dataBuffer(): import('../data-fetchers/dataBuffer').DataBuffer {
-    return this.dataManager.dataBuffer as import('../data-fetchers/dataBuffer').DataBuffer
+  get dataBuffer(): import('../data/dataBuffer').DataBuffer {
+    return this.dataManager.dataBuffer as import('../data/dataBuffer').DataBuffer
   }
 
   checkVisibleRangeGap(): void {
@@ -1104,9 +1310,17 @@ export class Chart {
     this._lastAlertTimestamp = null
     const primaryPeriod = specs[0]?.period
     if (primaryPeriod) {
+      // ⚠️ setActiveMode 必须在 dataManager.setSymbols 之前调用，
+      //    以确保 kWidth/kGap（从 zoom level 恢复）先写入 _optionsSignal，
+      //    后续 scrollLeft 恢复才能正确反推物理像素偏移。
       this.setActiveMode(primaryPeriod === 'timeshare' ? this._timeShareMode : this._kLineMode)
     }
     this.dataManager.setSymbols(specs)
+    // Scroll position 恢复必须放在 setActiveMode + setSymbols 之后，
+    // 此时 kWidth/kGap 已由 zoom level 恢复写回，计算不出错。
+    if (primaryPeriod && primaryPeriod !== 'timeshare') {
+      this.dataManager.tryRestoreScrollFromSnapshot()
+    }
   }
 
   addComparisonSymbol(spec: SymbolSpec): void {
@@ -1154,7 +1368,7 @@ export class Chart {
    * 设置主题（高层 API）
    */
   setTheme(theme: 'light' | 'dark'): void {
-    this._themeSignal.set(theme)
+    this.kernel.theme.actions.setTheme(theme)
     this.scheduleDraw()
   }
 
@@ -1271,9 +1485,11 @@ export class Chart {
    * 更新缓存的 scrollLeft 并触发交互 controller
    */
   handleScrollEvent(): void {
-    this.interaction.onScroll({ scheduleDraw: !this.dataManager.pendingIndicatorDataUpdate })
-    // 更新 viewport signal 中的 visible range
-    this.updateViewportSignal()
+    this.interaction.onScroll({
+      scheduleDraw: !this.indicatorManager.indicatorSchedulerAccessor.busySignal.peek(),
+    })
+    // viewportState is now computed() — auto-updates when scrollLeft or
+    // visibleRange change. No manual signal push needed anymore.
   }
 
   /**
@@ -1286,13 +1502,6 @@ export class Chart {
     this.zoomController.handlePinch(delta, centerClientX)
   }
 
-  /**
-   * 更新 viewport signal（用于滚动事件）
-   */
-  private updateViewportSignal(): void {
-    this.viewportManager.updateViewportSignal()
-  }
-
   // ---------- Indicators (Explicit role) ----------
 
   /**
@@ -1337,19 +1546,21 @@ export class Chart {
   // ---------- Drawings ----------
 
   /**
-   * 设置当前绘图工具（高层 API）
-   * @param tool 工具类型或 null 取消选择
+   * 设置当前绘图工具（高层 API）—— 业务态只写 kernel，再清会话副作用
+   * @param tool DrawingToolId；传 null 时视为 cursor（兼容旧 API）
    */
-  setDrawingTool(tool: DrawingToolType | null): void {
-    this._drawingToolSignal.set(tool)
-    // TODO: 当 Chart 支持绘图工具切换时，在这里调用相应方法
+  setDrawingTool(tool: DrawingToolId | null): void {
+    const toolId: DrawingToolId = tool ?? 'cursor'
+    this.kernel.drawing.actions.setDrawingTool(toolId)
+    this.drawingSession?.applyToolSession(toolId)
+    this.scheduleDraw()
   }
 
   /**
    * 移除绘图（高层 API）
    * @param drawingId 绘图 ID
    */
-  removeDrawing(drawingId: string): void {
+  removeDrawing(_drawingId: string): void {
     // TODO: 实现绘图移除
     console.warn('[Chart] removeDrawing not fully implemented yet')
   }