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

package/src/engine/renderers/linesViaRenderer.ts

@@ -0,0 +1,226 @@
+import type { RenderContext } from '../../foundation/plugin/index'
+import type { Renderer } from '../../rendering/render/Renderer'
+
+export type LinePoint = { x: number; y: number }
+
+export type ColoredLineStrip = {
+  points: LinePoint[]
+  color: string
+  width?: number
+}
+
+type LineGpuCache = {
+  pipeline: ReturnType<Renderer['createPipeline']>
+}
+
+const lineCacheByRenderer = new WeakMap<Renderer, LineGpuCache>()
+
+function ensureLineCache(renderer: Renderer): LineGpuCache {
+  let cache = lineCacheByRenderer.get(renderer)
+  if (!cache) {
+    cache = { pipeline: renderer.createPipeline({ type: 'line' }) }
+    lineCacheByRenderer.set(renderer, cache)
+  }
+  return cache
+}
+
+/**
+ * 经 Renderer.drawLines 一次提交多条折线（strips 批量）。
+ * 禁止 per-strip 循环 drawLines：LineWebGLSurface MSAA 每次 clear 会盖掉前一条。
+ * 不负责 composite。pipeline 按 renderer 缓存。
+ */
+export function drawLinesViaRenderer(
+  renderer: Renderer,
+  lines: ReadonlyArray<ColoredLineStrip>,
+  scrollLeft: number,
+): boolean {
+  if (!renderer.surface.isAvailable()) return false
+  const drawable = lines.filter((l) => l.points.length >= 2)
+  if (drawable.length === 0) return true
+
+  try {
+    const cache = ensureLineCache(renderer)
+    return renderer.drawLines({
+      pipeline: cache.pipeline,
+      strips: drawable.map((l) => ({
+        points: l.points,
+        color: l.color,
+        width: l.width ?? 1,
+      })),
+      uniforms: { scrollLeft },
+    })
+  } catch {
+    return false
+  }
+}
+
+/** WebGPU 走可见 DOM canvas，禁止 drawImage 回 2D（M2 hybrid） */
+export function shouldCompositeSceneRenderer(renderer: Renderer): boolean {
+  return renderer.caps.name !== 'webgpu'
+}
+
+/**
+ * 将 sceneRenderer 输出合成到主 canvas。
+ * WebGL：即时 composite（MSAA resolve 会盖掉 shared 上前序内容，须按层立即合成）。
+ * WebGPU：no-op，由 plot 区可见 GPU canvas 直接显示。
+ */
+export function compositeSceneRenderer(context: {
+  ctx: CanvasRenderingContext2D
+  pane: { top: number; height: number }
+  viewport?: { plotWidth: number }
+  paneWidth: number
+  dpr: number
+  sceneRenderer?: Renderer
+}): void {
+  const r = context.sceneRenderer
+  if (!r || !shouldCompositeSceneRenderer(r)) return
+  r.surface.compositeTo(
+    context.ctx,
+    {
+      x: 0,
+      y: context.pane.top,
+      width: context.viewport?.plotWidth ?? context.paneWidth,
+      height: context.pane.height,
+      dpr: context.dpr,
+    },
+    { imageSmoothingEnabled: false },
+  )
+}
+
+/**
+ * 折线 GPU：仅 sceneRenderer；失败返回 false（调用方 2D）。
+ * 指标 draw 内：if (tryDrawLinesGpu(context, lines, scrollLeft)) return
+ */
+export function tryDrawLinesGpu(
+  context: RenderContext,
+  lines: ReadonlyArray<ColoredLineStrip>,
+  scrollLeft: number,
+): boolean {
+  const drawable = lines.filter((l) => l.points.length >= 2)
+  if (drawable.length === 0) return false
+
+  if (!context.sceneRenderer) return false
+  if (drawLinesViaRenderer(context.sceneRenderer, drawable, scrollLeft)) {
+    compositeSceneRenderer(context)
+    return true
+  }
+  return false
+}
+
+type FillGpuCache = {
+  pipeline: ReturnType<Renderer['createPipeline']>
+  vertices: ReturnType<Renderer['createBuffer']> | null
+  capacity: number
+}
+
+const fillCacheByRenderer = new WeakMap<Renderer, FillGpuCache>()
+
+function ensureFillCache(renderer: Renderer): FillGpuCache {
+  let cache = fillCacheByRenderer.get(renderer)
+  if (!cache) {
+    cache = {
+      pipeline: renderer.createPipeline({ type: 'fill' }),
+      vertices: null,
+      capacity: 0,
+    }
+    fillCacheByRenderer.set(renderer, cache)
+  }
+  return cache
+}
+
+/**
+ * 经 Renderer fill pipeline 画上下轨填充带（BOLL/ENE）。
+ * 顶点布局与 createWebGLRenderer fill 一致：每点 upper.x,y + lower.x,y。
+ * vertex buffer 按 renderer 缓存扩容，不每帧 destroy。
+ */
+export function drawFilledBandViaRenderer(
+  renderer: Renderer,
+  upperPoints: ReadonlyArray<LinePoint>,
+  lowerPoints: ReadonlyArray<LinePoint>,
+  color: string,
+  scrollLeft: number,
+): boolean {
+  if (!renderer.surface.isAvailable()) return false
+  const n = Math.min(upperPoints.length, lowerPoints.length)
+  if (n < 2) return false
+
+  try {
+    const cache = ensureFillCache(renderer)
+    // vertexCount = n*2（上轨 n + 下轨 n 交错为 n 组 4 floats）
+    const floats = new Float32Array(n * 4)
+    for (let i = 0; i < n; i++) {
+      const o = i * 4
+      floats[o] = upperPoints[i]!.x
+      floats[o + 1] = upperPoints[i]!.y
+      floats[o + 2] = lowerPoints[i]!.x
+      floats[o + 3] = lowerPoints[i]!.y
+    }
+    if (!cache.vertices || cache.capacity < floats.byteLength) {
+      if (cache.vertices) renderer.destroyBuffer(cache.vertices)
+      cache.vertices = renderer.createBuffer('vertex', floats.byteLength)
+      cache.capacity = floats.byteLength
+    }
+    renderer.writeBuffer(cache.vertices, floats)
+    return renderer.drawLines({
+      pipeline: cache.pipeline,
+      vertices: cache.vertices,
+      vertexCount: n * 2,
+      uniforms: { color, scrollLeft },
+    })
+  } catch {
+    return false
+  }
+}
+
+/** 将全局 alpha 烘焙进 rgba 颜色串（WebGPU 无 compositeTo 时用） */
+function bakeAlphaIntoColor(color: string, alpha: number): string {
+  if (!(alpha < 1)) return color
+  const a = Math.max(0, Math.min(1, alpha))
+  const rgba = color.match(/^rgba?\(([^)]+)\)$/i)
+  if (rgba) {
+    const parts = rgba[1]!.split(',').map((p) => p.trim())
+    if (parts.length >= 3) {
+      const baseA = parts.length >= 4 ? Number(parts[3]) : 1
+      const nextA = (Number.isFinite(baseA) ? baseA : 1) * a
+      return `rgba(${parts[0]}, ${parts[1]}, ${parts[2]}, ${nextA})`
+    }
+  }
+  return color
+}
+
+/**
+ * 填充带 GPU：仅 sceneRenderer fill；失败返回 false。
+ * @param alpha composite 时的全局透明度（半透明 bandFill）
+ * @remarks WebGL 走 compositeTo(alpha)；WebGPU hybrid 把 alpha 烘焙进 fill color
+ */
+export function tryDrawFilledBandGpu(
+  context: RenderContext,
+  upperPoints: ReadonlyArray<LinePoint>,
+  lowerPoints: ReadonlyArray<LinePoint>,
+  color: string,
+  scrollLeft: number,
+  alpha = 1,
+): boolean {
+  if (Math.min(upperPoints.length, lowerPoints.length) < 2) return false
+
+  if (!context.sceneRenderer) return false
+  const r = context.sceneRenderer
+  const fillColor = shouldCompositeSceneRenderer(r) ? color : bakeAlphaIntoColor(color, alpha)
+  if (drawFilledBandViaRenderer(r, upperPoints, lowerPoints, fillColor, scrollLeft)) {
+    if (shouldCompositeSceneRenderer(r)) {
+      r.surface.compositeTo(
+        context.ctx,
+        {
+          x: 0,
+          y: context.pane.top,
+          width: context.viewport?.plotWidth ?? context.paneWidth,
+          height: context.pane.height,
+          dpr: context.dpr,
+        },
+        { imageSmoothingEnabled: false, alpha },
+      )
+    }
+    return true
+  }
+  return false
+}

package/src/engine/renderers/rectsViaRenderer.ts

@@ -0,0 +1,83 @@
+import type { RenderContext } from '../../foundation/plugin/index'
+import type { BufferHandle, PipelineHandle, Renderer } from '../../rendering/render/Renderer'
+import { compositeSceneRenderer } from './linesViaRenderer'
+
+export type RectBatch = {
+  buf: Float32Array
+  count: number
+  color: string
+}
+
+type RectGpuCache = {
+  pipeline: PipelineHandle
+  unit: BufferHandle
+}
+
+const rectCacheByRenderer = new WeakMap<Renderer, RectGpuCache>()
+
+function ensureRectCache(renderer: Renderer): RectGpuCache {
+  let cache = rectCacheByRenderer.get(renderer)
+  if (!cache) {
+    cache = {
+      pipeline: renderer.createPipeline({ type: 'candle' }),
+      unit: renderer.createBuffer('vertex', 64),
+    }
+    rectCacheByRenderer.set(renderer, cache)
+  }
+  return cache
+}
+
+/**
+ * 经 Renderer.drawInstances 画多组矩形（volume / MACD bar / candle 共用）。
+ * 任一非空 batch 失败 → false。不负责 composite。
+ * instance buffer 每 batch 独立创建，避免同 frame 内不同绘制目标互相覆盖。
+ */
+export function drawRectBatchesViaRenderer(
+  renderer: Renderer,
+  batches: ReadonlyArray<RectBatch>,
+  scrollLeft: number,
+): boolean {
+  if (!renderer.surface.isAvailable()) return false
+
+  try {
+    const cache = ensureRectCache(renderer)
+    for (const batch of batches) {
+      if (batch.count <= 0) continue
+      const byteLength = batch.count * 4 * 4
+      const instances = renderer.createBuffer('instance', byteLength)
+      renderer.writeBuffer(instances, batch.buf.subarray(0, batch.count * 4))
+      const ok = renderer.drawInstances({
+        pipeline: cache.pipeline,
+        vertices: cache.unit,
+        instances,
+        instanceCount: batch.count,
+        vertexCount: 6,
+        uniforms: { color: batch.color, scrollLeft },
+      })
+      renderer.destroyBuffer(instances)
+      if (!ok) return false
+    }
+    return true
+  } catch {
+    return false
+  }
+}
+
+/**
+ * 矩形 GPU：仅 sceneRenderer；失败返回 false。
+ */
+export function tryDrawRectsGpu(
+  context: RenderContext,
+  batches: ReadonlyArray<RectBatch>,
+  scrollLeft: number,
+): boolean {
+  const active = batches.filter((b) => b.count > 0)
+  if (active.length === 0) return true
+
+  if (!context.sceneRenderer) return false
+  if (drawRectBatchesViaRenderer(context.sceneRenderer, active, scrollLeft)) {
+    compositeSceneRenderer(context)
+    return true
+  }
+  return false
+}

package/src/engine/renderers/subVolume.ts

@@ -13,6 +13,7 @@ import { resolveStateKey } from '../indicators/indicatorMetadata'
 import type { IndicatorScheduler } from '../indicators/scheduler'
 
 import { createVolumeScaleRendererPlugin } from './Indicator/scale/volume_scale'
+import { tryDrawRectsGpu } from './rectsViaRenderer'
 
 interface VolumeRendererOptions {
   /** 目标 pane ID（默认 'sub'） */
@@ -164,19 +165,16 @@ function createVolumeRendererPlugin(options: VolumeRendererOptions = {}): Render
         buf[off + 3] = finalH
       }
 
-      const usedWebGL = drawVolumeWithWebGL(
+      const usedGpu = tryDrawRectsGpu(
         context,
-        upBuf,
-        upCount,
-        downBuf,
-        downCount,
-        neutralBuf,
-        neutralCount,
-        upVolume,
-        downVolume,
-        neutralVolume,
+        [
+          { buf: upBuf, count: upCount, color: upVolume },
+          { buf: downBuf, count: downCount, color: downVolume },
+          { buf: neutralBuf, count: neutralCount, color: neutralVolume },
+        ],
+        context.scrollLeft,
       )
-      if (!usedWebGL) {
+      if (!usedGpu) {
         drawVolumeWithCanvas2D(
           ctx,
           context.scrollLeft,
@@ -190,54 +188,11 @@ function createVolumeRendererPlugin(options: VolumeRendererOptions = {}): Render
           downVolume,
           neutralVolume,
         )
-      } else {
-        compositeVolumeWebGL(ctx, context)
       }
     },
   }
 }
 
-function drawVolumeWithWebGL(
-  context: RenderContext,
-  upBuf: Float32Array,
-  upCount: number,
-  downBuf: Float32Array,
-  downCount: number,
-  neutralBuf: Float32Array,
-  neutralCount: number,
-  upColor: string,
-  downColor: string,
-  neutralColor: string,
-): boolean {
-  if (context.settings?.enableWebGLRendering === false) return false
-  const surface = context.candleWebGLSurface
-  if (!surface || !surface.isAvailable()) return false
-
-  surface.clear()
-
-  const ok1 =
-    upCount === 0 ||
-    surface.drawRectBuffer(upBuf.subarray(0, upCount * 4), upCount, upColor, context.scrollLeft)
-  const ok2 =
-    downCount === 0 ||
-    surface.drawRectBuffer(
-      downBuf.subarray(0, downCount * 4),
-      downCount,
-      downColor,
-      context.scrollLeft,
-    )
-  const ok3 =
-    neutralCount === 0 ||
-    surface.drawRectBuffer(
-      neutralBuf.subarray(0, neutralCount * 4),
-      neutralCount,
-      neutralColor,
-      context.scrollLeft,
-    )
-
-  return ok1 && ok2 && ok3
-}
-
 function drawVolumeWithCanvas2D(
   ctx: CanvasRenderingContext2D,
   scrollLeft: number,
@@ -275,13 +230,6 @@ function drawVolumeWithCanvas2D(
   ctx.restore()
 }
 
-function compositeVolumeWebGL(ctx: CanvasRenderingContext2D, context: RenderContext): void {
-  const surface = context.candleWebGLSurface
-  if (!surface) return
-
-  surface.compositeTo(ctx)
-}
-
 /**
  * 判断成交量柱子颜色
  */

package/src/engine/renderers/timeAxis.ts

@@ -26,7 +26,7 @@ export function createTimeAxisRendererPlugin(options: {
     debugName: '时间轴',
     paneId: TIME_AXIS_PANE_ID,
     priority: RENDERER_PRIORITY.SYSTEM_XAXIS,
-    isSystem: true, // 系统渲染器，只能通过 renderPlugin 单独渲染
+    isSystem: true, // 系统渲染器：由 Scene Layer 调度
 
     draw(context: RenderContext) {
       const { ctx, data, range, scrollLeft, kWidth, kGap, dpr, paneWidth } = context

package/src/engine/state/__tests__/effectiveTheme.test.ts

@@ -0,0 +1,49 @@
+import { describe, expect, it } from 'vitest'
+
+import { ChartStateKernel } from '../chartStateKernel'
+
+function createKernel() {
+  return new ChartStateKernel({
+    initialOptions: {
+      minKWidth: 2,
+      maxKWidth: 50,
+      zoomLevelCount: 20,
+      bottomAxisHeight: 24,
+      rightAxisWidth: 60,
+      leftAxisWidth: 0,
+      yPaddingPx: 8,
+      panes: [{ id: 'main', ratio: 1 }],
+    },
+    initialZoomLevel: 1,
+    scheduleDraw: () => {},
+  })
+}
+
+describe('effectiveTheme', () => {
+  it('follows settings.theme when not auto', () => {
+    const k = createKernel()
+    k.settings.actions.patch({ theme: 'light' })
+    expect(k.effectiveTheme$.peek()).toBe('light')
+    k.settings.actions.patch({ theme: 'dark' })
+    expect(k.effectiveTheme$.peek()).toBe('dark')
+    k.dispose()
+  })
+
+  it('follows systemTheme when settings.theme is auto', () => {
+    const k = createKernel()
+    k.settings.actions.patch({ theme: 'auto' })
+    k.systemTheme.actions.setSystemTheme('dark')
+    expect(k.effectiveTheme$.peek()).toBe('dark')
+    k.systemTheme.actions.setSystemTheme('light')
+    expect(k.effectiveTheme$.peek()).toBe('light')
+    k.dispose()
+  })
+
+  it('setTheme action patches settings preference', () => {
+    const k = createKernel()
+    k.actions.setTheme('light')
+    expect(k.settings.readonly.settings.peek().theme).toBe('light')
+    expect(k.signals.theme()).toBe('light')
+    k.dispose()
+  })
+})

package/src/engine/state/__tests__/rendererState.test.ts

@@ -0,0 +1,36 @@
+import { describe, expect, it, vi } from 'vitest'
+
+import { createRendererState } from '../rendererState'
+
+describe('rendererState', () => {
+  it('publishes immutable backend runtime snapshots through an Action', () => {
+    const state = createRendererState({ effective: 'webgl', status: 'ready', error: null })
+    const listener = vi.fn()
+    state.readonly.runtime.subscribe(listener)
+
+    state.actions.setRuntime({
+      effective: 'canvas',
+      status: 'degraded',
+      error: 'WebGPU adapter unavailable',
+    })
+
+    expect(state.readonly.runtime.peek()).toEqual({
+      effective: 'canvas',
+      status: 'degraded',
+      error: 'WebGPU adapter unavailable',
+    })
+    expect(Object.isFrozen(state.readonly.runtime.peek())).toBe(true)
+    expect(listener).toHaveBeenCalledOnce()
+  })
+
+  it('does not notify for an identical runtime', () => {
+    const runtime = { effective: 'webgpu', status: 'ready', error: null } as const
+    const state = createRendererState(runtime)
+    const listener = vi.fn()
+    state.readonly.runtime.subscribe(listener)
+
+    state.actions.setRuntime({ ...runtime })
+
+    expect(listener).not.toHaveBeenCalled()
+  })
+})

package/src/engine/state/__tests__/settingsState.test.ts

@@ -15,7 +15,7 @@ describe('settingsState', () => {
     const s = createSettingsState()
     s.actions.replace({ showGridLines: false })
     expect(s.readonly.settings.peek().showGridLines).toBe(false)
-    expect(s.readonly.settings.peek().enableWebGLRendering).toBeDefined()
+    expect(s.readonly.settings.peek().rendererBackend).toBe('webgl')
   })
 
   it('patch merges onto current then re-resolves', () => {

package/src/engine/state/chartStateKernel.ts

@@ -7,7 +7,7 @@ import {
   type ViewportDomDeps,
 } from './viewportState'
 import { createPaneState, type PaneStateModule } from './paneState'
-import { createThemeState, type ThemeStateModule } from './themeState'
+import { createSystemThemeState, type SystemThemeStateModule } from './themeState'
 import { createSettingsState, type SettingsStateModule } from './settingsState'
 import { createModeState, type ModeStateModule } from './modeState'
 import { createDrawingState, type DrawingStateModule } from './drawingState'
@@ -22,6 +22,7 @@ import { createComparisonState, type ComparisonStateModule } from './comparisonS
 import { createIndicatorState, type IndicatorStateModule } from './indicatorState'
 import { createSubPaneState, type SubPaneStateModule } from './subPaneState'
 import { createMarkerState, type MarkerStateModule } from './markerState'
+import { createRendererState, type RendererStateModule } from './rendererState'
 import { batch, computed, type ReadonlySignal } from '../../foundation/reactivity/signal'
 import type { DrawingObject } from '../../foundation/plugin/index'
 import type { PaneSpec } from '../chartTypes'
@@ -29,6 +30,8 @@ import type { DrawingToolId } from '../drawing/toolConfig'
 import type { SymbolSpec, SymbolInfo } from '../../controllers/types'
 import type { MarkerEntity, CustomMarkerEntity } from '../marker/registry'
 import type { DragMode } from './interactionState'
+import type { ChartSettings } from '../../foundation/config/chartSettings'
+import type { RendererBackendRuntime } from '../../rendering/render/rendererHost'
 
 export interface ChartStateKernelDeps {
   initialOptions: {
@@ -48,6 +51,8 @@ export interface ChartStateKernelDeps {
     [key: string]: unknown
   }
   initialZoomLevel: number
+  initialSettings?: Partial<ChartSettings>
+  initialRendererRuntime?: RendererBackendRuntime
   scheduleDraw: (level?: unknown) => void
 }
 
@@ -57,7 +62,8 @@ export class ChartStateKernel extends StateKernel {
   readonly data: DataStateModule
   readonly viewport: ViewportStateModule
   readonly pane: PaneStateModule
-  readonly theme: ThemeStateModule
+  /** 系统主题注入（非用户偏好）；用户偏好在 settings.theme */
+  readonly systemTheme: SystemThemeStateModule
   readonly settings: SettingsStateModule
   readonly mode: ModeStateModule
   readonly drawing: DrawingStateModule
@@ -67,9 +73,12 @@ export class ChartStateKernel extends StateKernel {
   readonly indicator: IndicatorStateModule
   readonly subPane: SubPaneStateModule
   readonly marker: MarkerStateModule
+  readonly renderer: RendererStateModule
 
   readonly zoomLevel$: ReadonlySignal<number>
   readonly dataLength$: ReadonlySignal<number>
+  /** 生效主题 light|dark（settings.theme + systemTheme 推导） */
+  readonly effectiveTheme$: ReadonlySignal<'light' | 'dark'>
   readonly optionsForViewport$: ReadonlySignal<{
     bottomAxisHeight: number
     kWidth: number
@@ -136,11 +145,19 @@ export class ChartStateKernel extends StateKernel {
       this.pane.actions.commitLayout(initialRatios, initialPanes)
     }
 
-    // ── Theme state ──
-    this.theme = createThemeState()
+    // ── Settings state（用户偏好 SSOT，含 theme light|dark|auto）──
+    this.settings = createSettingsState(deps.initialSettings)
+    this.renderer = createRendererState(
+      deps.initialRendererRuntime ?? { effective: 'webgl', status: 'ready', error: null },
+    )
 
-    // ── Settings state（用户偏好 SSOT；rightAxisType 副作用走 Chart.updateSettings）──
-    this.settings = createSettingsState()
+    // ── 系统主题（auto 时参与 effectiveTheme 推导）──
+    this.systemTheme = createSystemThemeState()
+    this.effectiveTheme$ = computed(() => {
+      const pref = this.settings.readonly.settings().theme
+      if (pref === 'auto') return this.systemTheme.readonly.systemTheme()
+      return pref === 'dark' ? 'dark' : 'light'
+    })
 
     // ── Mode state（kline / timeshare id；ModeHandler 仍在 Chart）──
     this.mode = createModeState()
@@ -181,10 +198,11 @@ export class ChartStateKernel extends StateKernel {
       // Pane
       paneRatios: this.pane.readonly.paneRatios,
       paneSpecs: this.pane.readonly.paneSpecs,
-      // Theme
-      theme: this.theme.readonly.theme,
+      // Theme（生效主题；偏好在 settings.theme）
+      theme: this.effectiveTheme$,
       // Settings
       settings: this.settings.readonly.settings,
+      rendererRuntime: this.renderer.readonly.runtime,
       // Mode
       chartMode: this.mode.readonly.chartMode,
       // Pane scale types
@@ -228,22 +246,24 @@ export class ChartStateKernel extends StateKernel {
       setPaneSpecs: (specs: PaneSpec[]) => this.pane.actions.setPaneSpecs(specs),
       commitPaneLayout: (ratios: Record<string, number>, specs: PaneSpec[]) =>
         this.pane.actions.commitLayout(ratios, specs),
-      setTheme: (theme: 'light' | 'dark') => this.theme.actions.setTheme(theme),
+      setTheme: (theme: 'light' | 'dark') => this.settings.actions.patch({ theme }),
+      setSystemTheme: (theme: 'light' | 'dark') => this.systemTheme.actions.setSystemTheme(theme),
+      setRendererRuntime: (runtime: RendererBackendRuntime) =>
+        this.renderer.actions.setRuntime(runtime),
       setDrawingTool: (tool: DrawingToolId) => this.drawing.actions.setDrawingTool(tool),
       setDrawings: (drawings: ReadonlyArray<DrawingObject>) =>
         this.drawing.actions.setDrawings(drawings),
       clearDrawings: () => this.drawing.actions.clearDrawings(),
-      updateCrosshair: (pos: { x: number; y: number } | null, price: number | null) =>
-        this.interaction.actions.updateCrosshair(pos, price),
+      updateCrosshair: (
+        pos: { x: number; y: number } | null,
+        price: number | null,
+        index?: number | null,
+      ) => this.interaction.actions.updateCrosshair(pos, price, index),
+      setCrosshairIndex: (index: number | null) => this.interaction.actions.setCrosshairIndex(index),
       updateHover: (index: number | null, paneId: string | null) =>
         this.interaction.actions.updateHover(index, paneId),
       setHoveredIndex: (index: number | null) => this.interaction.actions.setHoveredIndex(index),
       setActivePaneId: (paneId: string | null) => this.interaction.actions.setActivePaneId(paneId),
-      updateFramePositions: (
-        positions: number[] | null,
-        centers: number[] | null,
-        kWidthPx: number | null,
-      ) => this.interaction.actions.updateFramePositions(positions, centers, kWidthPx),
       startDrag: (mode: DragMode) => this.interaction.actions.startDrag(mode),
       endDrag: () => this.interaction.actions.endDrag(),
       setDragMode: (mode: DragMode) => this.interaction.actions.setDragMode(mode),
@@ -377,8 +397,8 @@ export class ChartStateKernel extends StateKernel {
     this.data.dispose()
     this.viewport.dispose()
     this.pane.dispose()
-    this.theme.dispose()
     this.settings.dispose()
+    this.systemTheme.dispose()
     this.mode.dispose()
     this.drawing.dispose()
     this.interaction.dispose()
@@ -387,6 +407,7 @@ export class ChartStateKernel extends StateKernel {
     this.indicator.dispose()
     this.subPane.dispose()
     this.marker.dispose()
+    this.renderer.dispose()
   }
 }
 

package/src/engine/state/index.ts

@@ -23,7 +23,12 @@ export { createDataState, type DataStateModule } from './dataState'
 export { createZoomState, type ZoomStateModule, type ZoomDeps } from './zoomState'
 export { createOptionsState, type OptionsStateModule } from './optionsState'
 export { createPaneState, type PaneStateModule } from './paneState'
-export { createThemeState, type ThemeStateModule } from './themeState'
+export {
+  createSystemThemeState,
+  createThemeState,
+  type SystemThemeStateModule,
+  type ThemeStateModule,
+} from './themeState'
 export { createSettingsState, type SettingsStateModule } from './settingsState'
 export { createModeState, type ModeStateModule, type ChartModeId } from './modeState'
 export { createDrawingState, type DrawingStateModule } from './drawingState'