@363045841yyt/klinechart-core 0.8.6 → 0.8.7

package/src/engine/renderers/timeAxis.ts

@@ -5,7 +5,7 @@ import type { KLineData } from '../../types/price'
 import { drawTimeAxis, drawCrosshairTimeLabel, drawAxisTimeLabel } from '../../utils/kLineDraw/axis'
 
 /** 时间轴面板 ID（特殊标识，用于单独渲染） */
-export const TIME_AXIS_PANE_ID = Symbol('time-axis')
+const TIME_AXIS_PANE_ID = Symbol('time-axis')
 
 /**
  * 创建时间轴渲染器插件
@@ -52,6 +52,8 @@ export function createTimeAxisRendererPlugin(options: {
         startIndex: range.start,
         endIndex: range.end,
         dpr,
+        kLineCenters: context.kLineCenters,
+        visibleRange: range,
         textColor: colors.text.secondary,
         lineColor: colors.border.dark,
         drawTopBorder: false,
@@ -79,18 +81,19 @@ export function createTimeAxisRendererPlugin(options: {
       if (crosshair && typeof crosshair.index === 'number') {
         const k = klineData[crosshair.index]
         if (k) {
-          drawCrosshairTimeLabel(targetCtx, {
-            x: 0,
-            y: 0,
-            width: w,
-            height: h,
-            crosshairX: crosshair.x,
-            timestamp: k.timestamp,
-            dpr,
-            fontSize: 12,
-            bgColor: colors.crosshairLabelBg,
-            textColor: colors.crosshairLabelText,
-          }, context.theme, context.isAsiaMarket, context.colorPresetSettings)
+            drawCrosshairTimeLabel(targetCtx, {
+                x: 0,
+                y: 0,
+                width: w,
+                height: h,
+                crosshairX: crosshair.x,
+                timestamp: k.timestamp,
+                dpr,
+                fontSize: 12,
+                bgColor: colors.crosshairLabelBg,
+                textColor: colors.crosshairLabelText,
+                period: context.period,
+            }, context.theme, context.isAsiaMarket, context.colorPresetSettings)
         }
       }
 

package/src/engine/renderers/timeShare.ts

@@ -0,0 +1,271 @@
+import type { RendererPlugin, RenderContext, RendererPluginWithHost, PluginHost } from '../../plugin'
+import { RENDERER_PRIORITY } from '../../plugin'
+import type { TimeShareData } from '../../types/price'
+import { resolveThemeColors } from '../../tokens'
+import { Indicator } from '../indicators/indicatorDefinitionRegistry'
+
+/** 成交量区域占 pane 高度的比例（底部） */
+const VOLUME_RATIO = 0.25
+
+export function createTimeShareRendererPlugin(): RendererPluginWithHost {
+  return {
+    name: 'timeShare',
+    version: '1.0.0',
+    description: '股票分时图渲染器',
+    debugName: '分时图',
+    paneId: 'main',
+    priority: RENDERER_PRIORITY.MAIN,
+
+    onInstall(_host: PluginHost) {
+    },
+
+    draw(context: RenderContext) {
+      const { ctx, pane, data, range, dpr, kLineCenters, scrollLeft, settings, kBarRects } = context
+      if (context.period !== 'timeshare') return
+      const tsData = data as TimeShareData[]
+      if (!tsData.length) return
+
+      const colors = resolveThemeColors(context.theme, context.isAsiaMarket, context.colorPresetSettings)
+      const preClose = (settings?.preClose as number) ?? tsData[0]?.price ?? 0
+      if (preClose === 0) return
+
+      const paneHeight = pane.height
+      const volumeAreaHeight = Math.round(paneHeight * VOLUME_RATIO * dpr) / dpr
+      const priceAreaHeight = paneHeight - volumeAreaHeight
+
+      const { start, end } = range
+      const visibleCount = Math.min(end - start, tsData.length - start)
+      const itemCount = Math.min(end, tsData.length) - start
+
+      const xPositions: number[] = []
+      const yPrices: number[] = []
+      const yAvgs: number[] = []
+      const volumes: number[] = []
+      let maxVolume = 0
+
+      for (let i = start; i < start + itemCount; i++) {
+        const item = tsData[i]
+        if (!item) continue
+        const x = kLineCenters[i - start]
+        if (x === undefined) continue
+        xPositions.push(x)
+        yPrices.push(pane.yAxis.priceToY(item.price))
+        yAvgs.push(pane.yAxis.priceToY(item.average))
+        volumes.push(item.volume)
+        maxVolume = Math.max(maxVolume, item.volume)
+      }
+
+      if (xPositions.length < 2) return
+
+      ctx.save()
+      ctx.translate(-scrollLeft, 0)
+
+      const preCloseY = pane.yAxis.priceToY(preClose)
+
+      drawPreCloseLine(ctx, xPositions, preCloseY, dpr, colors.timeSharePreClose)
+
+      drawAreaFill(ctx, xPositions, yPrices, preCloseY, dpr,
+        colors.timeShareAreaUp, colors.timeShareAreaDown)
+
+      drawSegmentLine(ctx, xPositions, yPrices, dpr, colors.timeSharePriceLine, 2)
+
+      drawSegmentLine(ctx, xPositions, yAvgs, dpr, colors.timeShareAvgLine, 1.5)
+
+      drawVolumeBars(ctx, kBarRects, volumes, maxVolume, volumeAreaHeight, paneHeight, preClose, dpr, colors.volumeUp, colors.volumeDown, colors.volumeNeutral, tsData, start)
+
+      ctx.restore()
+    },
+  }
+}
+
+function drawPreCloseLine(
+  ctx: CanvasRenderingContext2D,
+  xPositions: number[],
+  y: number,
+  dpr: number,
+  color: string,
+): void {
+  if (xPositions.length < 2) return
+  const firstX = xPositions[0]
+  const lastX = xPositions[xPositions.length - 1]
+
+  ctx.save()
+  ctx.strokeStyle = color
+  ctx.lineWidth = 1
+  ctx.setLineDash([4, 4])
+  ctx.beginPath()
+  ctx.moveTo(firstX, y)
+  ctx.lineTo(lastX, y)
+  ctx.stroke()
+  ctx.setLineDash([])
+  ctx.restore()
+}
+
+function drawAreaFill(
+  ctx: CanvasRenderingContext2D,
+  xPositions: number[],
+  yPrices: number[],
+  baselineY: number,
+  dpr: number,
+  upColor: string,
+  downColor: string,
+): void {
+  if (xPositions.length < 2) return
+
+  const n = xPositions.length
+
+  function buildPolygon(isAbove: boolean): Array<{ x: number; y: number }> {
+    const pts: Array<{ x: number; y: number }> = [{ x: xPositions[0]!, y: baselineY }]
+    const firstOnOurSide = isAbove
+      ? yPrices[0]! <= baselineY
+      : yPrices[0]! >= baselineY
+    if (firstOnOurSide) {
+      pts.push({ x: xPositions[0]!, y: yPrices[0]! })
+    }
+
+    for (let i = 0; i < n - 1; i++) {
+      const x1 = xPositions[i]!, y1 = yPrices[i]!
+      const x2 = xPositions[i + 1]!, y2 = yPrices[i + 1]!
+
+      const y1OnOurSide = isAbove ? y1 <= baselineY : y1 >= baselineY
+      const y2OnOurSide = isAbove ? y2 <= baselineY : y2 >= baselineY
+
+      if (y1OnOurSide !== y2OnOurSide) {
+        const t = (baselineY - y1) / (y2 - y1)
+        const cx = x1 + t * (x2 - x1)
+        pts.push({ x: cx, y: baselineY })
+      }
+      if (y2OnOurSide) {
+        pts.push({ x: x2, y: y2 })
+      }
+    }
+
+    pts.push({ x: xPositions[n - 1]!, y: baselineY })
+    return pts
+  }
+
+  const abovePts = buildPolygon(true)
+  if (abovePts.length >= 3) {
+    const topY = Math.min(...abovePts.map((p) => p.y))
+    ctx.save()
+    const grad = ctx.createLinearGradient(0, topY, 0, baselineY)
+    grad.addColorStop(0, upColor)
+    grad.addColorStop(1, 'rgba(0,0,0,0)')
+    ctx.beginPath()
+    ctx.moveTo(abovePts[0]!.x, abovePts[0]!.y)
+    for (let i = 1; i < abovePts.length; i++) {
+      ctx.lineTo(abovePts[i]!.x, abovePts[i]!.y)
+    }
+    ctx.closePath()
+    ctx.fillStyle = grad
+    ctx.fill()
+    ctx.restore()
+  }
+
+  const belowPts = buildPolygon(false)
+  if (belowPts.length >= 3) {
+    const botY = Math.max(...belowPts.map((p) => p.y))
+    ctx.save()
+    const grad = ctx.createLinearGradient(0, baselineY, 0, botY)
+    grad.addColorStop(0, 'rgba(0,0,0,0)')
+    grad.addColorStop(1, downColor)
+    ctx.beginPath()
+    ctx.moveTo(belowPts[0]!.x, belowPts[0]!.y)
+    for (let i = 1; i < belowPts.length; i++) {
+      ctx.lineTo(belowPts[i]!.x, belowPts[i]!.y)
+    }
+    ctx.closePath()
+    ctx.fillStyle = grad
+    ctx.fill()
+    ctx.restore()
+  }
+}
+
+function drawSegmentLine(
+  ctx: CanvasRenderingContext2D,
+  xPositions: number[],
+  yPositions: number[],
+  _dpr: number,
+  color: string,
+  lineWidth: number,
+): void {
+  if (xPositions.length < 2) return
+
+  ctx.save()
+  ctx.strokeStyle = color
+  ctx.lineWidth = lineWidth
+  ctx.lineJoin = 'round'
+  ctx.lineCap = 'round'
+
+  ctx.beginPath()
+  ctx.moveTo(xPositions[0], yPositions[0])
+
+  for (let i = 1; i < xPositions.length; i++) {
+    ctx.lineTo(xPositions[i], yPositions[i])
+  }
+
+  ctx.stroke()
+  ctx.restore()
+}
+
+function drawVolumeBars(
+  ctx: CanvasRenderingContext2D,
+  barRects: Array<{ x: number; width: number }>,
+  volumes: number[],
+  maxVolume: number,
+  volumeAreaHeight: number,
+  paneHeight: number,
+  preClose: number,
+  dpr: number,
+  upColor: string,
+  downColor: string,
+  neutralColor: string,
+  data: TimeShareData[],
+  startIdx: number,
+): void {
+  if (!barRects.length || maxVolume <= 0) return
+
+  const snappedBottom = Math.round(paneHeight * dpr) / dpr
+
+  for (let i = 0; i < barRects.length; i++) {
+    const volume = volumes[i]
+    if (volume <= 0) continue
+
+    const barHeight = (volume / maxVolume) * volumeAreaHeight
+    const snappedH = Math.round(barHeight * dpr) / dpr
+    const snappedY = snappedBottom - snappedH
+    const { x, width } = barRects[i]!
+    const idx = startIdx + i
+
+    let barColor: string
+    if (i > 0) {
+      const price = data[idx].price
+      const prevPrice = data[idx - 1].price
+      if (price > prevPrice) barColor = upColor
+      else if (price < prevPrice) barColor = downColor
+      else barColor = neutralColor
+    } else {
+      if (data[idx].price > preClose) barColor = upColor
+      else if (data[idx].price < preClose) barColor = downColor
+      else barColor = neutralColor
+    }
+
+    const minSize = 1 / dpr
+    const finalW = width > 0 ? Math.max(width, minSize) : 0
+    const finalH = snappedH > 0 ? Math.max(snappedH, minSize) : 0
+
+    ctx.fillStyle = barColor
+    ctx.fillRect(x, snappedY, finalW, finalH)
+  }
+}
+
+@Indicator({
+  name: 'timeShare',
+  displayName: '分时',
+  category: 'main',
+  defaultPaneId: 'main',
+  mainPane: { rendererName: 'timeShare' },
+})
+class TimeShareIndicatorDefinition {
+  static rendererFactory = createTimeShareRendererPlugin
+}

package/src/engine/renderers/yAxis.ts

@@ -25,7 +25,14 @@ export function createYAxisRendererPlugin(options: {
     priority: RENDERER_PRIORITY.SYSTEM_YAXIS,
 
     draw(context: RenderContext) {
-      const { ctx, pane, dpr, yAxisCtx, data } = context
+      const { ctx, pane, dpr, yAxisCtx, data, period } = context
+
+      // 分时模式始终显示右轴，不受设置约束
+      if (period !== 'timeshare') {
+        const rightType = context.settings?.rightAxisType as string | undefined
+        if (rightType === 'none') return
+      }
+
       const tokenColors = resolveThemeColors(context.theme, context.isAsiaMarket, context.colorPresetSettings)
       const scaleType = pane.yAxis.getScaleType()
 
@@ -80,6 +87,7 @@ export function createYAxisRendererPlugin(options: {
       // 绘制来自 yAxisLabels 的标签（最新价格、极值点、绘图锚点等）
       if (context.yAxisLabels && pane.role === 'price') {
         for (const label of context.yAxisLabels) {
+          if (label.price == null || !Number.isFinite(label.price)) continue
           const isLastPrice = label.type === 'lastPrice'
           drawAxisPriceLabel(targetCtx, {
             x: 0,

package/src/engine/scale/price.ts

@@ -2,7 +2,7 @@
 
 export type PriceRange = { maxPrice: number; minPrice: number }
 
-export function priceToY(
+function priceToY(
     price: number,
     maxPrice: number,
     minPrice: number,
@@ -22,7 +22,7 @@ export function priceToY(
  * - y 是相对于绘图区顶部的逻辑像素坐标（不含额外 translate）
  * - paddingTop/paddingBottom 需与 priceToY 使用一致
  */
-export function yToPrice(
+function yToPrice(
     y: number,
     maxPrice: number,
     minPrice: number,

package/src/engine/theme/fonts.ts

@@ -5,7 +5,7 @@
  */
 
 /** 数字和文本的标准字体栈 */
-export const FONT_FAMILY = '"Trebuchet MS", Roboto, Ubuntu, sans-serif'
+const FONT_FAMILY = '"Trebuchet MS", Roboto, Ubuntu, sans-serif'
 
 /** 获取指定字号的字体字符串，用于 Canvas ctx.font */
 export function getFont(size: number, options?: { bold?: boolean }): string {

package/src/engine/utils/klineConfig.ts

@@ -10,11 +10,7 @@
  * @returns 奇数化后的物理像素宽度
  */
 export function calcKWidthPx(kWidth: number, dpr: number): number {
-    let kWidthPx = Math.round(kWidth * dpr)
-    if (kWidthPx % 2 === 0) {
-        kWidthPx += 1
-    }
-    return Math.max(1, kWidthPx)
+    return Math.max(1, Math.round(kWidth * dpr))
 }
 
 /**

package/src/engine/viewport/chartViewportManager.ts

@@ -206,7 +206,8 @@ export class ChartViewportManager {
 
     const dom = this.deps.getDom()
 
-    const canvasLayerWidth = `${viewWidth}px`
+    const dprRoundedViewWidth = Math.round(viewWidth * dpr) / dpr
+    const canvasLayerWidth = `${dprRoundedViewWidth}px`
     if (dom.canvasLayer.style.width !== canvasLayerWidth) {
       dom.canvasLayer.style.width = canvasLayerWidth
     }
@@ -216,9 +217,9 @@ export class ChartViewportManager {
       dom.canvasLayer.style.height = canvasLayerHeight
     }
 
-    const xAxisWidth = Math.round(plotWidth * dpr)
-    if (dom.xAxisCanvas.width !== xAxisWidth) {
-      dom.xAxisCanvas.width = xAxisWidth
+    const xAxisWidthPx = Math.round(dprRoundedViewWidth * dpr)
+    if (dom.xAxisCanvas.width !== xAxisWidthPx) {
+      dom.xAxisCanvas.width = xAxisWidthPx
     }
 
     const xAxisHeight = Math.round(this.deps.getBottomAxisHeight() * dpr)
@@ -226,7 +227,7 @@ export class ChartViewportManager {
       dom.xAxisCanvas.height = xAxisHeight
     }
 
-    const xAxisCssWidth = `${xAxisWidth / dpr}px`
+    const xAxisCssWidth = `${dprRoundedViewWidth}px`
     if (dom.xAxisCanvas.style.width !== xAxisCssWidth) {
       dom.xAxisCanvas.style.width = xAxisCssWidth
     }

package/src/plugin/types.ts

@@ -294,6 +294,7 @@ export interface RenderContext {
   crosshairIndex?: number | null
   // 可选的其他 Canvas 上下文
   yAxisCtx?: CanvasRenderingContext2D
+  leftAxisCtx?: CanvasRenderingContext2D
   xAxisCtx?: CanvasRenderingContext2D
   borderCtx?: CanvasRenderingContext2D
   /** 覆盖层 Canvas 上下文（用于十字线、Tooltip 等动态内容） */

package/src/semantic/types.ts

@@ -31,7 +31,7 @@ export interface DataConfig {
   startDate: string
   /** 结束日期 YYYY-MM-DD */
   endDate: string
-  period: 'daily' | 'weekly' | 'monthly' | '5min' | '15min' | '30min' | '60min'
+  period: 'daily' | 'weekly' | 'monthly' | '5min' | '15min' | '30min' | '60min' | 'timeshare'
   adjust: AdjustType
 }
 

package/src/tokens/__tests__/__snapshots__/baseline.test.ts.snap

@@ -14,6 +14,7 @@ exports[`theme baseline — dark > CSS declaration block (snapshot) 1`] = `
   --klc-color-candle-doji-border: #8A8F98;
   --klc-color-volume-up: #22D69B66;
   --klc-color-volume-down: #FF646466;
+  --klc-color-volume-neutral: #FFFFFF66;
   --klc-color-axis-text: #9AA0A6;
   --klc-color-axis-line: #2A2F36;
   --klc-color-axis-tick: #2A2F36;
@@ -41,6 +42,12 @@ exports[`theme baseline — dark > CSS declaration block (snapshot) 1`] = `
   --klc-color-avwap-line: #A78BFA;
   --klc-color-avwap-band: #A78BFA33;
   --klc-color-mtf-overlay: #38BDF8;
+  --klc-color-time-share-price-line: #60A5FA;
+  --klc-color-time-share-avg-line: #FBBF24;
+  --klc-color-time-share-area-up: rgba(34, 214, 155, 0.20);
+  --klc-color-time-share-area-down: rgba(255, 100, 100, 0.20);
+  --klc-color-time-share-pre-close: #9CA3AF;
+  --klc-color-time-share-volume: #60A5FA;
   --klc-color-palette-i1: #4A9EFF;
   --klc-color-palette-i2: #FFB95A;
   --klc-color-palette-i3: #22D69B;
@@ -207,6 +214,7 @@ exports[`theme baseline — light > CSS declaration block (snapshot) 1`] = `
   --klc-color-candle-doji-border: #6E6E6E;
   --klc-color-volume-up: #0F8B5C66;
   --klc-color-volume-down: #C2363B66;
+  --klc-color-volume-neutral: #00000066;
   --klc-color-axis-text: #5A5A5A;
   --klc-color-axis-line: #D0D0D0;
   --klc-color-axis-tick: #D0D0D0;
@@ -234,6 +242,12 @@ exports[`theme baseline — light > CSS declaration block (snapshot) 1`] = `
   --klc-color-avwap-line: #7C3AED;
   --klc-color-avwap-band: #7C3AED33;
   --klc-color-mtf-overlay: #0369A1;
+  --klc-color-time-share-price-line: #4A90D9;
+  --klc-color-time-share-avg-line: #F5A623;
+  --klc-color-time-share-area-up: rgba(15, 139, 92, 0.15);
+  --klc-color-time-share-area-down: rgba(213, 19, 26, 0.15);
+  --klc-color-time-share-pre-close: #888888;
+  --klc-color-time-share-volume: #4A90D9;
   --klc-color-palette-i1: #0072B2;
   --klc-color-palette-i2: #E69F00;
   --klc-color-palette-i3: #009E73;

package/src/tokens/theme-base.ts

@@ -0,0 +1,36 @@
+import type { SpacingTokens, TypographyTokens, MotionTokens } from './types'
+
+export const spacing: SpacingTokens = {
+  none: '0',
+  xxs: '2px',
+  xs: '4px',
+  sm: '8px',
+  md: '12px',
+  lg: '16px',
+  xl: '24px',
+  xxl: '32px',
+  xxxl: '64px',
+}
+
+export const typography: TypographyTokens = {
+  fontFamily:
+    "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif",
+  fontFamilyMono:
+    "ui-monospace, SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace",
+  fontSizeSm: '10px',
+  fontSizeMd: '12px',
+  fontSizeLg: '14px',
+  fontWeightRegular: 400,
+  fontWeightMedium: 500,
+  fontWeightBold: 700,
+  lineHeightTight: 1.2,
+  lineHeightStandard: 1.4,
+}
+
+export const motion: MotionTokens = {
+  durationInstant: '0ms',
+  durationFast: '120ms',
+  durationModerate: '200ms',
+  easingStandard: 'cubic-bezier(0.4, 0, 0.2, 1)',
+  easingDecelerate: 'cubic-bezier(0, 0, 0.2, 1)',
+}

package/src/tokens/theme-china.ts

@@ -45,6 +45,10 @@ export function withAsiaMarketColors(theme: Theme): Theme {
             candleUpWick: theme.colors.candleDownWick,
             candleDownWick: theme.colors.candleUpWick,
 
+            // ── Time-share area fill ──
+            timeShareAreaUp: theme.colors.timeShareAreaDown,
+            timeShareAreaDown: theme.colors.timeShareAreaUp,
+
             // ── Volume bars ──
             volumeUp: theme.colors.volumeDown,
             volumeDown: theme.colors.volumeUp,

package/src/tokens/theme-dark.ts

@@ -18,9 +18,13 @@
  */
 
 import type { Theme } from './types'
+import { spacing, typography, motion } from './theme-base'
 
 export const darkTheme: Theme = {
     name: 'dark',
+    spacing,
+    typography,
+    motion,
     colors: {
         background: '#111827',
         foreground: '#E8EAED',
@@ -36,6 +40,7 @@ export const darkTheme: Theme = {
 
         volumeUp: '#22D69B66',
         volumeDown: '#FF646466',
+        volumeNeutral: '#FFFFFF66',
 
         axisText: '#9AA0A6',
         axisLine: '#2A2F36',
@@ -72,6 +77,13 @@ export const darkTheme: Theme = {
         avwapBand: '#A78BFA33',
         mtfOverlay: '#38BDF8',
 
+        timeSharePriceLine: '#60A5FA',
+        timeShareAvgLine: '#FBBF24',
+        timeShareAreaUp: 'rgba(34, 214, 155, 0.20)',
+        timeShareAreaDown: 'rgba(255, 100, 100, 0.20)',
+        timeSharePreClose: '#9CA3AF',
+        timeShareVolume: '#60A5FA',
+
         palette: {
             // Same hue ordering as light theme; values tuned for dark BG.
             i1: '#4A9EFF', // blue (brightened)
@@ -205,36 +217,4 @@ export const darkTheme: Theme = {
         },
         wmsrGrid: 'rgba(255, 255, 255, 0.1)',
     },
-    spacing: {
-        none: '0',
-        xxs: '2px',
-        xs: '4px',
-        sm: '8px',
-        md: '12px',
-        lg: '16px',
-        xl: '24px',
-        xxl: '32px',
-        xxxl: '64px',
-    },
-    typography: {
-        fontFamily:
-            "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif",
-        fontFamilyMono:
-            "ui-monospace, SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace",
-        fontSizeSm: '10px',
-        fontSizeMd: '12px',
-        fontSizeLg: '14px',
-        fontWeightRegular: 400,
-        fontWeightMedium: 500,
-        fontWeightBold: 700,
-        lineHeightTight: 1.2,
-        lineHeightStandard: 1.4,
-    },
-    motion: {
-        durationInstant: '0ms',
-        durationFast: '120ms',
-        durationModerate: '200ms',
-        easingStandard: 'cubic-bezier(0.4, 0, 0.2, 1)',
-        easingDecelerate: 'cubic-bezier(0, 0, 0.2, 1)',
-    },
 }

package/src/tokens/theme-light.ts

@@ -20,9 +20,13 @@
  */
 
 import type { Theme } from './types'
+import { spacing, typography, motion } from './theme-base'
 
 export const lightTheme: Theme = {
     name: 'light',
+    spacing,
+    typography,
+    motion,
     colors: {
         background: '#FAFAFA',
         foreground: '#1F1F1F',
@@ -38,6 +42,7 @@ export const lightTheme: Theme = {
 
         volumeUp: '#0F8B5C66', // 40% alpha — paired with candleUp
         volumeDown: '#C2363B66',
+        volumeNeutral: '#00000066',
 
         axisText: '#5A5A5A',
         axisLine: '#D0D0D0',
@@ -78,6 +83,13 @@ export const lightTheme: Theme = {
         // #0369A1 → 4.59:1.
         mtfOverlay: '#0369A1',
 
+        timeSharePriceLine: '#4A90D9',
+        timeShareAvgLine: '#F5A623',
+        timeShareAreaUp: 'rgba(15, 139, 92, 0.15)',
+        timeShareAreaDown: 'rgba(213, 19, 26, 0.15)',
+        timeSharePreClose: '#888888',
+        timeShareVolume: '#4A90D9',
+
         palette: {
             // Okabe-Ito-derived qualitative scale, AA on #FAFAFA
             i1: '#0072B2', // strong blue
@@ -101,7 +113,7 @@ export const lightTheme: Theme = {
             weak: 'hsl(210, 7%, 65%)',
             white: 'rgba(255, 255, 255, 0.92)',
         },
-price: {
+        price: {
             lastPrice: 'rgba(230, 100, 115, 0.95)',
         },
         tagBg: {
@@ -211,36 +223,4 @@ price: {
         },
         wmsrGrid: 'rgba(0, 0, 0, 0.1)',
     },
-    spacing: {
-        none: '0',
-        xxs: '2px',
-        xs: '4px',
-        sm: '8px',
-        md: '12px',
-        lg: '16px',
-        xl: '24px',
-        xxl: '32px',
-        xxxl: '64px',
-    },
-    typography: {
-        fontFamily:
-            "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif",
-        fontFamilyMono:
-            "ui-monospace, SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace",
-        fontSizeSm: '10px',
-        fontSizeMd: '12px',
-        fontSizeLg: '14px',
-        fontWeightRegular: 400,
-        fontWeightMedium: 500,
-        fontWeightBold: 700,
-        lineHeightTight: 1.2,
-        lineHeightStandard: 1.4,
-    },
-    motion: {
-        durationInstant: '0ms',
-        durationFast: '120ms',
-        durationModerate: '200ms',
-        easingStandard: 'cubic-bezier(0.4, 0, 0.2, 1)',
-        easingDecelerate: 'cubic-bezier(0, 0, 0.2, 1)',
-    },
 }