@363045841yyt/klinechart-core 0.8.12 → 0.8.13-alpha.0

package/src/semantic/index.ts

@@ -25,6 +25,12 @@ export { SemanticChartController, type SemanticEventType } from './controller'
 export type { SemanticChartAdapter } from './controller'
 export type { DataFetcher, SymbolSpec } from '../controllers/types'
 
-export { SemanticConfigValidator, sanitizeParams, sanitizeColor, validateColor, validateSymbol } from './validator'
+export {
+  SemanticConfigValidator,
+  sanitizeParams,
+  sanitizeColor,
+  validateColor,
+  validateSymbol,
+} from './validator'
 
 export { drawShape, drawLabel, hitTestShape } from './drawShape'

package/src/semantic/schema.json

@@ -199,9 +199,18 @@
       "type": "object",
       "additionalProperties": false,
       "properties": {
-        "fillColor": { "type": "string", "pattern": "^(#[0-9a-fA-F]{3,8}|rgb\\(\\s*\\d{1,3}\\s*,\\s*\\d{1,3}\\s*,\\s*\\d{1,3}\\s*\\)|rgba\\(\\s*\\d{1,3}\\s*,\\s*\\d{1,3}\\s*,\\s*\\d{1,3}\\s*,\\s*[\\d.]+\\s*\\))$" },
-        "strokeColor": { "type": "string", "pattern": "^(#[0-9a-fA-F]{3,8}|rgb\\(\\s*\\d{1,3}\\s*,\\s*\\d{1,3}\\s*,\\s*\\d{1,3}\\s*\\)|rgba\\(\\s*\\d{1,3}\\s*,\\s*\\d{1,3}\\s*,\\s*\\d{1,3}\\s*,\\s*[\\d.]+\\s*\\))$" },
-        "textColor": { "type": "string", "pattern": "^(#[0-9a-fA-F]{3,8}|rgb\\(\\s*\\d{1,3}\\s*,\\s*\\d{1,3}\\s*,\\s*\\d{1,3}\\s*\\)|rgba\\(\\s*\\d{1,3}\\s*,\\s*\\d{1,3}\\s*,\\s*\\d{1,3}\\s*,\\s*[\\d.]+\\s*\\))$" },
+        "fillColor": {
+          "type": "string",
+          "pattern": "^(#[0-9a-fA-F]{3,8}|rgb\\(\\s*\\d{1,3}\\s*,\\s*\\d{1,3}\\s*,\\s*\\d{1,3}\\s*\\)|rgba\\(\\s*\\d{1,3}\\s*,\\s*\\d{1,3}\\s*,\\s*\\d{1,3}\\s*,\\s*[\\d.]+\\s*\\))$"
+        },
+        "strokeColor": {
+          "type": "string",
+          "pattern": "^(#[0-9a-fA-F]{3,8}|rgb\\(\\s*\\d{1,3}\\s*,\\s*\\d{1,3}\\s*,\\s*\\d{1,3}\\s*\\)|rgba\\(\\s*\\d{1,3}\\s*,\\s*\\d{1,3}\\s*,\\s*\\d{1,3}\\s*,\\s*[\\d.]+\\s*\\))$"
+        },
+        "textColor": {
+          "type": "string",
+          "pattern": "^(#[0-9a-fA-F]{3,8}|rgb\\(\\s*\\d{1,3}\\s*,\\s*\\d{1,3}\\s*,\\s*\\d{1,3}\\s*\\)|rgba\\(\\s*\\d{1,3}\\s*,\\s*\\d{1,3}\\s*,\\s*\\d{1,3}\\s*,\\s*[\\d.]+\\s*\\))$"
+        },
         "size": { "type": "number", "minimum": 4, "maximum": 50 },
         "lineWidth": { "type": "number", "minimum": 0.5, "maximum": 10 },
         "opacity": { "type": "number", "minimum": 0, "maximum": 1 }
@@ -231,7 +240,10 @@
       "additionalProperties": false,
       "properties": {
         "enabled": { "type": "boolean" },
-        "position": { "type": "string", "enum": ["bottom-right", "bottom-left", "top-right", "top-left"] },
+        "position": {
+          "type": "string",
+          "enum": ["bottom-right", "bottom-left", "top-right", "top-left"]
+        },
         "onClick": { "type": "string", "enum": ["highlight", "toggle", "none"] }
       }
     },

package/src/semantic/validator.ts

@@ -3,7 +3,13 @@
  * 包含 JSON Schema 校验、安全校验、业务逻辑校验
  */
 
-import type { SemanticChartConfig, DataConfig, ValidationResult, SecurityResult, MarkerStyle } from './types'
+import type {
+  SemanticChartConfig,
+  DataConfig,
+  ValidationResult,
+  SecurityResult,
+  MarkerStyle,
+} from './types'
 
 // ============ 常量定义 ============
 
@@ -87,9 +93,7 @@ export class SemanticConfigValidator {
    */
   validateRawInput(raw: string): ValidationResult {
     const byteLength =
-      typeof TextEncoder !== 'undefined'
-        ? new TextEncoder().encode(raw).byteLength
-        : raw.length * 3 // SSR 降级：保守估计
+      typeof TextEncoder !== 'undefined' ? new TextEncoder().encode(raw).byteLength : raw.length * 3 // SSR 降级：保守估计
 
     if (byteLength > this.limits.maxJsonSize) {
       return { valid: false, errors: ['JSON payload too large (max 64KB)'] }
@@ -117,7 +121,9 @@ export class SemanticConfigValidator {
       const ajv = await this.getAjv()
       const valid = ajv.validate('https://kmap.dev/schemas/semantic-chart-config/1.0.0', config)
       if (!valid) {
-        const errors = ajv.errors?.map((e: { instancePath: string; message?: string }) => `${e.instancePath} ${e.message}`) || ['Schema validation failed']
+        const errors = ajv.errors?.map(
+          (e: { instancePath: string; message?: string }) => `${e.instancePath} ${e.message}`,
+        ) || ['Schema validation failed']
         return { valid: false, errors }
       }
     } catch {
@@ -217,7 +223,9 @@ export class SemanticConfigValidator {
     const diffDays = Math.ceil((endDate.getTime() - startDate.getTime()) / (1000 * 60 * 60 * 24))
 
     if (diffDays > maxDays) {
-      errors.push(`Date range exceeds maximum for period "${data.period}" (max ${maxDays} days, got ${diffDays})`)
+      errors.push(
+        `Date range exceeds maximum for period "${data.period}" (max ${maxDays} days, got ${diffDays})`,
+      )
     }
 
     if (diffDays < 0) {
@@ -265,7 +273,11 @@ export class SemanticConfigValidator {
           _colorCtx.fillStyle = '#000000'
           _colorCtx.fillStyle = value
           // 浏览器会过滤非法值，如果返回的不是合法颜色说明有问题
-          if (_colorCtx.fillStyle === '#000000' && value !== '#000000' && !value.startsWith('#000')) {
+          if (
+            _colorCtx.fillStyle === '#000000' &&
+            value !== '#000000' &&
+            !value.startsWith('#000')
+          ) {
             errors.push(`Potentially unsafe ${field} in marker "${markerId}": ${value}`)
           }
         }
@@ -282,7 +294,9 @@ export class SemanticConfigValidator {
     const errors: string[] = []
 
     if (!SemanticConfigValidator.DATE_PATTERN.test(date)) {
-      errors.push(`Invalid date format in marker "${markerId}": ${date} (expected YYYY-MM-DD or YYYY-MM-DD HH:mm)`)
+      errors.push(
+        `Invalid date format in marker "${markerId}": ${date} (expected YYYY-MM-DD or YYYY-MM-DD HH:mm)`,
+      )
       return errors
     }
 

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

@@ -27,12 +27,7 @@
 
 import { describe, it, expect } from 'vitest'
 
-import {
-    lightTheme,
-    darkTheme,
-    themeToCssVars,
-    toCssDeclarationBlock,
-} from '..'
+import { lightTheme, darkTheme, themeToCssVars, toCssDeclarationBlock } from '..'
 
 // ---------------------------------------------------------------------------
 // Local contrast helpers (kept inline so the snapshot files don't reach
@@ -42,34 +37,34 @@ import {
 const HEX_WITH_ALPHA = /^#[0-9A-Fa-f]{6}([0-9A-Fa-f]{2})?$/
 
 function parseHex(color: string): { r: number; g: number; b: number } | null {
-    if (!HEX_WITH_ALPHA.test(color)) return null
-    return {
-        r: parseInt(color.slice(1, 3), 16),
-        g: parseInt(color.slice(3, 5), 16),
-        b: parseInt(color.slice(5, 7), 16),
-    }
+  if (!HEX_WITH_ALPHA.test(color)) return null
+  return {
+    r: parseInt(color.slice(1, 3), 16),
+    g: parseInt(color.slice(3, 5), 16),
+    b: parseInt(color.slice(5, 7), 16),
+  }
 }
 
 function relLum(c: string): number | null {
-    const p = parseHex(c)
-    if (p === null) return null
-    const linear = (v: number): number => {
-        const s = v / 255
-        return s <= 0.03928 ? s / 12.92 : Math.pow((s + 0.055) / 1.055, 2.4)
-    }
-    return 0.2126 * linear(p.r) + 0.7152 * linear(p.g) + 0.0722 * linear(p.b)
+  const p = parseHex(c)
+  if (p === null) return null
+  const linear = (v: number): number => {
+    const s = v / 255
+    return s <= 0.03928 ? s / 12.92 : Math.pow((s + 0.055) / 1.055, 2.4)
+  }
+  return 0.2126 * linear(p.r) + 0.7152 * linear(p.g) + 0.0722 * linear(p.b)
 }
 
 function contrast(a: string, b: string): number | null {
-    const la = relLum(a)
-    const lb = relLum(b)
-    if (la === null || lb === null) return null
-    const [hi, lo] = la > lb ? [la, lb] : [lb, la]
-    return (hi + 0.05) / (lo + 0.05)
+  const la = relLum(a)
+  const lb = relLum(b)
+  if (la === null || lb === null) return null
+  const [hi, lo] = la > lb ? [la, lb] : [lb, la]
+  return (hi + 0.05) / (lo + 0.05)
 }
 
 function hexBase(c: string): string {
-    return c.length === 9 ? c.slice(0, 7) : c
+  return c.length === 9 ? c.slice(0, 7) : c
 }
 
 /**
@@ -78,62 +73,64 @@ function hexBase(c: string): string {
  * crosshair) and prefer-strong (palette, accent).
  */
 interface TrackedRole {
-    role: string
-    threshold: number
-    /** Role this is measured against. Default `'background'`. */
-    against?: string
+  role: string
+  threshold: number
+  /** Role this is measured against. Default `'background'`. */
+  against?: string
 }
 
 const TRACKED_ROLES: ReadonlyArray<TrackedRole> = [
-    // Floor 4.5:1 (WCAG AA for normal text). Text-on-tinted-surface roles
-    // (crosshair label, tooltip) are measured against their own surface,
-    // NOT the chart background, since that's where they actually render.
-    { role: 'foreground', threshold: 4.5 },
-    { role: 'axisText', threshold: 4.5 },
-    { role: 'crosshairLabelText', threshold: 4.5, against: 'crosshairLabelBg' },
-    { role: 'tooltipText', threshold: 4.5, against: 'tooltipBg' },
-    // Floor 3:1 (WCAG AA for non-text graphic objects)
-    { role: 'candleUpBody', threshold: 3 },
-    { role: 'candleDownBody', threshold: 3 },
-    { role: 'candleDojiBorder', threshold: 3 },
-    { role: 'crosshairLine', threshold: 3 },
-    { role: 'selectionStroke', threshold: 3 },
-    { role: 'alertActive', threshold: 3 },
-    { role: 'alertTriggered', threshold: 3 },
-    { role: 'avwapLine', threshold: 3 },
-    { role: 'mtfOverlay', threshold: 3 },
+  // Floor 4.5:1 (WCAG AA for normal text). Text-on-tinted-surface roles
+  // (crosshair label, tooltip) are measured against their own surface,
+  // NOT the chart background, since that's where they actually render.
+  { role: 'foreground', threshold: 4.5 },
+  { role: 'axisText', threshold: 4.5 },
+  { role: 'crosshairLabelText', threshold: 4.5, against: 'crosshairLabelBg' },
+  { role: 'tooltipText', threshold: 4.5, against: 'tooltipBg' },
+  // Floor 3:1 (WCAG AA for non-text graphic objects)
+  { role: 'candleUpBody', threshold: 3 },
+  { role: 'candleDownBody', threshold: 3 },
+  { role: 'candleDojiBorder', threshold: 3 },
+  { role: 'crosshairLine', threshold: 3 },
+  { role: 'selectionStroke', threshold: 3 },
+  { role: 'alertActive', threshold: 3 },
+  { role: 'alertTriggered', threshold: 3 },
+  { role: 'avwapLine', threshold: 3 },
+  { role: 'mtfOverlay', threshold: 3 },
 ]
 
 function buildContrastReport(theme: typeof lightTheme): string {
-    const lines: string[] = []
-    lines.push(`# Theme contrast — ${theme.name}`)
-    lines.push('')
-    lines.push('Each role is measured against its own surface (default: `colors.background`).')
-    lines.push('')
-    lines.push('| Role | Value | Surface | Ratio | Floor | Pass |')
-    lines.push('|---|---|---|---|---|---|')
-    for (const { role, threshold, against } of TRACKED_ROLES) {
-        const value = (theme.colors as unknown as Record<string, string>)[role]
-        const surfaceKey = against ?? 'background'
-        const surfaceVal = (theme.colors as unknown as Record<string, string>)[surfaceKey]
-        const r = contrast(hexBase(value), hexBase(surfaceVal))
-        const ratio = r === null ? 'n/a' : r.toFixed(2)
-        const pass = r === null ? '?' : r >= threshold ? '✅' : '❌'
-        lines.push(`| ${role} | ${hexBase(value)} | ${surfaceKey} | ${ratio} | ${threshold.toFixed(1)}:1 | ${pass} |`)
-    }
-    const bg = hexBase(theme.colors.background)
-    // Palette is a separate section — informational only, no fixed floor.
-    lines.push('')
-    lines.push('## Indicator palette')
-    lines.push('')
-    lines.push('| Slot | Value | Ratio vs BG |')
-    lines.push('|---|---|---|')
-    for (const [k, v] of Object.entries(theme.colors.palette)) {
-        const r = contrast(hexBase(v), bg)
-        const ratio = r === null ? 'n/a' : r.toFixed(2)
-        lines.push(`| ${k} | ${v} | ${ratio} |`)
-    }
-    return lines.join('\n')
+  const lines: string[] = []
+  lines.push(`# Theme contrast — ${theme.name}`)
+  lines.push('')
+  lines.push('Each role is measured against its own surface (default: `colors.background`).')
+  lines.push('')
+  lines.push('| Role | Value | Surface | Ratio | Floor | Pass |')
+  lines.push('|---|---|---|---|---|---|')
+  for (const { role, threshold, against } of TRACKED_ROLES) {
+    const value = (theme.colors as unknown as Record<string, string>)[role]
+    const surfaceKey = against ?? 'background'
+    const surfaceVal = (theme.colors as unknown as Record<string, string>)[surfaceKey]
+    const r = contrast(hexBase(value), hexBase(surfaceVal))
+    const ratio = r === null ? 'n/a' : r.toFixed(2)
+    const pass = r === null ? '?' : r >= threshold ? '✅' : '❌'
+    lines.push(
+      `| ${role} | ${hexBase(value)} | ${surfaceKey} | ${ratio} | ${threshold.toFixed(1)}:1 | ${pass} |`,
+    )
+  }
+  const bg = hexBase(theme.colors.background)
+  // Palette is a separate section — informational only, no fixed floor.
+  lines.push('')
+  lines.push('## Indicator palette')
+  lines.push('')
+  lines.push('| Slot | Value | Ratio vs BG |')
+  lines.push('|---|---|---|')
+  for (const [k, v] of Object.entries(theme.colors.palette)) {
+    const r = contrast(hexBase(v), bg)
+    const ratio = r === null ? 'n/a' : r.toFixed(2)
+    lines.push(`| ${k} | ${v} | ${ratio} |`)
+  }
+  return lines.join('\n')
 }
 
 // ---------------------------------------------------------------------------
@@ -141,25 +138,25 @@ function buildContrastReport(theme: typeof lightTheme): string {
 // ---------------------------------------------------------------------------
 
 describe('theme baseline — light', () => {
-    it('CSS declaration block (snapshot)', () => {
-        const css = toCssDeclarationBlock(themeToCssVars(lightTheme))
-        expect(css).toMatchSnapshot()
-    })
-
-    it('contrast report (snapshot)', () => {
-        expect(buildContrastReport(lightTheme)).toMatchSnapshot()
-    })
+  it('CSS declaration block (snapshot)', () => {
+    const css = toCssDeclarationBlock(themeToCssVars(lightTheme))
+    expect(css).toMatchSnapshot()
+  })
+
+  it('contrast report (snapshot)', () => {
+    expect(buildContrastReport(lightTheme)).toMatchSnapshot()
+  })
 })
 
 describe('theme baseline — dark', () => {
-    it('CSS declaration block (snapshot)', () => {
-        const css = toCssDeclarationBlock(themeToCssVars(darkTheme))
-        expect(css).toMatchSnapshot()
-    })
-
-    it('contrast report (snapshot)', () => {
-        expect(buildContrastReport(darkTheme)).toMatchSnapshot()
-    })
+  it('CSS declaration block (snapshot)', () => {
+    const css = toCssDeclarationBlock(themeToCssVars(darkTheme))
+    expect(css).toMatchSnapshot()
+  })
+
+  it('contrast report (snapshot)', () => {
+    expect(buildContrastReport(darkTheme)).toMatchSnapshot()
+  })
 })
 
 // ---------------------------------------------------------------------------
@@ -168,16 +165,16 @@ describe('theme baseline — dark', () => {
 // ---------------------------------------------------------------------------
 
 describe('theme baseline — contrast floors hold', () => {
-    for (const theme of [lightTheme, darkTheme]) {
-        for (const { role, threshold, against } of TRACKED_ROLES) {
-            it(`${theme.name}: ${role} ≥ ${threshold}:1`, () => {
-                const value = (theme.colors as unknown as Record<string, string>)[role]
-                const surfaceKey = against ?? 'background'
-                const surface = (theme.colors as unknown as Record<string, string>)[surfaceKey]
-                const r = contrast(hexBase(value), hexBase(surface))
-                expect(r).not.toBeNull()
-                expect(r as number).toBeGreaterThanOrEqual(threshold)
-            })
-        }
+  for (const theme of [lightTheme, darkTheme]) {
+    for (const { role, threshold, against } of TRACKED_ROLES) {
+      it(`${theme.name}: ${role} ≥ ${threshold}:1`, () => {
+        const value = (theme.colors as unknown as Record<string, string>)[role]
+        const surfaceKey = against ?? 'background'
+        const surface = (theme.colors as unknown as Record<string, string>)[surfaceKey]
+        const r = contrast(hexBase(value), hexBase(surface))
+        expect(r).not.toBeNull()
+        expect(r as number).toBeGreaterThanOrEqual(threshold)
+      })
     }
+  }
 })

package/src/tokens/__tests__/themeToCssVars.test.ts

@@ -15,161 +15,150 @@
 
 import { describe, it, expect } from 'vitest'
 
-import {
-    lightTheme,
-    darkTheme,
-    mergeTheme,
-} from '..'
+import { lightTheme, darkTheme, mergeTheme } from '..'
 import { camelToKebab, themeToCssVars, toCssDeclarationBlock } from '../themeToCssVars'
 
 describe('camelToKebab', () => {
-    it.each([
-        ['candleUpBody', 'candle-up-body'],
-        ['fontWeightRegular', 'font-weight-regular'],
-        ['i1', 'i1'],
-        ['i10', 'i10'],
-        ['background', 'background'],
-        ['durationFast', 'duration-fast'],
-        ['fontFamilyMono', 'font-family-mono'],
-    ])('%s → %s', (input, expected) => {
-        expect(camelToKebab(input)).toBe(expected)
-    })
+  it.each([
+    ['candleUpBody', 'candle-up-body'],
+    ['fontWeightRegular', 'font-weight-regular'],
+    ['i1', 'i1'],
+    ['i10', 'i10'],
+    ['background', 'background'],
+    ['durationFast', 'duration-fast'],
+    ['fontFamilyMono', 'font-family-mono'],
+  ])('%s → %s', (input, expected) => {
+    expect(camelToKebab(input)).toBe(expected)
+  })
 })
 
 function countColorLeaves(c: Record<string, unknown>): number {
-    let count = 0
-    for (const v of Object.values(c)) {
-        if (v !== null && typeof v === 'object') {
-            count += countColorLeaves(v as Record<string, unknown>)
-        } else {
-            count++
-        }
+  let count = 0
+  for (const v of Object.values(c)) {
+    if (v !== null && typeof v === 'object') {
+      count += countColorLeaves(v as Record<string, unknown>)
+    } else {
+      count++
     }
-    return count
+  }
+  return count
 }
 
 describe('themeToCssVars — coverage', () => {
-    it('emits the expected number of variables for lightTheme', () => {
-        const vars = themeToCssVars(lightTheme)
-        const expectedCount =
-            countColorLeaves(lightTheme.colors as unknown as Record<string, unknown>) +
-            Object.keys(lightTheme.spacing).length +
-            Object.keys(lightTheme.typography).length +
-            Object.keys(lightTheme.motion).length
-        expect(Object.keys(vars)).toHaveLength(expectedCount)
-    })
-
-    it('every var name starts with --klc- by default', () => {
-        const vars = themeToCssVars(lightTheme)
-        for (const k of Object.keys(vars)) {
-            expect(k.startsWith('--klc-')).toBe(true)
-        }
-    })
+  it('emits the expected number of variables for lightTheme', () => {
+    const vars = themeToCssVars(lightTheme)
+    const expectedCount =
+      countColorLeaves(lightTheme.colors as unknown as Record<string, unknown>) +
+      Object.keys(lightTheme.spacing).length +
+      Object.keys(lightTheme.typography).length +
+      Object.keys(lightTheme.motion).length
+    expect(Object.keys(vars)).toHaveLength(expectedCount)
+  })
+
+  it('every var name starts with --klc- by default', () => {
+    const vars = themeToCssVars(lightTheme)
+    for (const k of Object.keys(vars)) {
+      expect(k.startsWith('--klc-')).toBe(true)
+    }
+  })
 
-    it('every var value is a non-empty string', () => {
-        const vars = themeToCssVars(lightTheme)
-        for (const v of Object.values(vars)) {
-            expect(typeof v).toBe('string')
-            expect(v.length).toBeGreaterThan(0)
-        }
-    })
+  it('every var value is a non-empty string', () => {
+    const vars = themeToCssVars(lightTheme)
+    for (const v of Object.values(vars)) {
+      expect(typeof v).toBe('string')
+      expect(v.length).toBeGreaterThan(0)
+    }
+  })
 })
 
 describe('themeToCssVars — naming', () => {
-    it('colors.background → --klc-color-background', () => {
-        const vars = themeToCssVars(lightTheme)
-        expect(vars['--klc-color-background']).toBe(lightTheme.colors.background)
-    })
-
-    it('colors.candleUpBody → --klc-color-candle-up-body', () => {
-        const vars = themeToCssVars(lightTheme)
-        expect(vars['--klc-color-candle-up-body']).toBe(lightTheme.colors.candleUpBody)
-    })
-
-    it('colors.palette.i1 → --klc-color-palette-i1', () => {
-        const vars = themeToCssVars(lightTheme)
-        expect(vars['--klc-color-palette-i1']).toBe(lightTheme.colors.palette.i1)
-    })
-
-    it('spacing.md → --klc-spacing-md', () => {
-        const vars = themeToCssVars(lightTheme)
-        expect(vars['--klc-spacing-md']).toBe(lightTheme.spacing.md)
-    })
-
-    it('typography.fontWeightRegular → string-cast number', () => {
-        const vars = themeToCssVars(lightTheme)
-        expect(vars['--klc-typography-font-weight-regular']).toBe(
-            String(lightTheme.typography.fontWeightRegular),
-        )
-    })
-
-    it('motion.durationFast → --klc-motion-duration-fast', () => {
-        const vars = themeToCssVars(lightTheme)
-        expect(vars['--klc-motion-duration-fast']).toBe(lightTheme.motion.durationFast)
-    })
+  it('colors.background → --klc-color-background', () => {
+    const vars = themeToCssVars(lightTheme)
+    expect(vars['--klc-color-background']).toBe(lightTheme.colors.background)
+  })
+
+  it('colors.candleUpBody → --klc-color-candle-up-body', () => {
+    const vars = themeToCssVars(lightTheme)
+    expect(vars['--klc-color-candle-up-body']).toBe(lightTheme.colors.candleUpBody)
+  })
+
+  it('colors.palette.i1 → --klc-color-palette-i1', () => {
+    const vars = themeToCssVars(lightTheme)
+    expect(vars['--klc-color-palette-i1']).toBe(lightTheme.colors.palette.i1)
+  })
+
+  it('spacing.md → --klc-spacing-md', () => {
+    const vars = themeToCssVars(lightTheme)
+    expect(vars['--klc-spacing-md']).toBe(lightTheme.spacing.md)
+  })
+
+  it('typography.fontWeightRegular → string-cast number', () => {
+    const vars = themeToCssVars(lightTheme)
+    expect(vars['--klc-typography-font-weight-regular']).toBe(
+      String(lightTheme.typography.fontWeightRegular),
+    )
+  })
+
+  it('motion.durationFast → --klc-motion-duration-fast', () => {
+    const vars = themeToCssVars(lightTheme)
+    expect(vars['--klc-motion-duration-fast']).toBe(lightTheme.motion.durationFast)
+  })
 })
 
 describe('themeToCssVars — prefix', () => {
-    it('honours a custom prefix', () => {
-        const vars = themeToCssVars(lightTheme, { prefix: '--chart-' })
-        expect(vars['--chart-color-background']).toBe(lightTheme.colors.background)
-        expect(vars['--klc-color-background']).toBeUndefined()
-    })
-
-    it('throws when the prefix does not start with --', () => {
-        expect(() => themeToCssVars(lightTheme, { prefix: 'klc-' })).toThrow(
-            /must start with '--'/,
-        )
-    })
+  it('honours a custom prefix', () => {
+    const vars = themeToCssVars(lightTheme, { prefix: '--chart-' })
+    expect(vars['--chart-color-background']).toBe(lightTheme.colors.background)
+    expect(vars['--klc-color-background']).toBeUndefined()
+  })
+
+  it('throws when the prefix does not start with --', () => {
+    expect(() => themeToCssVars(lightTheme, { prefix: 'klc-' })).toThrow(/must start with '--'/)
+  })
 })
 
 describe('themeToCssVars — light vs dark parity', () => {
-    it('both themes produce maps with the exact same key set', () => {
-        const l = Object.keys(themeToCssVars(lightTheme)).sort()
-        const d = Object.keys(themeToCssVars(darkTheme)).sort()
-        expect(l).toEqual(d)
-    })
+  it('both themes produce maps with the exact same key set', () => {
+    const l = Object.keys(themeToCssVars(lightTheme)).sort()
+    const d = Object.keys(themeToCssVars(darkTheme)).sort()
+    expect(l).toEqual(d)
+  })
 })
 
 describe('themeToCssVars — mergeTheme propagation', () => {
-    it('an override surfaces in the emit output', () => {
-        const custom = mergeTheme(lightTheme, {
-            colors: { candleUpBody: '#112233' },
-        })
-        expect(themeToCssVars(custom)['--klc-color-candle-up-body']).toBe('#112233')
+  it('an override surfaces in the emit output', () => {
+    const custom = mergeTheme(lightTheme, {
+      colors: { candleUpBody: '#112233' },
     })
+    expect(themeToCssVars(custom)['--klc-color-candle-up-body']).toBe('#112233')
+  })
 
-    it('non-overridden keys keep the base value', () => {
-        const custom = mergeTheme(lightTheme, {
-            colors: { candleUpBody: '#112233' },
-        })
-        expect(themeToCssVars(custom)['--klc-color-background']).toBe(
-            lightTheme.colors.background,
-        )
+  it('non-overridden keys keep the base value', () => {
+    const custom = mergeTheme(lightTheme, {
+      colors: { candleUpBody: '#112233' },
     })
+    expect(themeToCssVars(custom)['--klc-color-background']).toBe(lightTheme.colors.background)
+  })
 })
 
 describe('toCssDeclarationBlock', () => {
-    it('produces a parseable :root block by default', () => {
-        const css = toCssDeclarationBlock(themeToCssVars(lightTheme))
-        expect(css.startsWith(':root {\n')).toBe(true)
-        expect(css.endsWith('\n}')).toBe(true)
-        expect(css).toContain('--klc-color-background: ' + lightTheme.colors.background + ';')
-    })
-
-    it('honours a custom selector', () => {
-        const css = toCssDeclarationBlock(
-            themeToCssVars(darkTheme),
-            '[data-theme="dark"]',
-        )
-        expect(css.startsWith('[data-theme="dark"] {\n')).toBe(true)
-    })
-
-    it('emits one declaration per line', () => {
-        const vars = themeToCssVars(lightTheme)
-        const css = toCssDeclarationBlock(vars)
-        // count of `;` lines should equal the number of vars
-        const semicolons = (css.match(/;/g) ?? []).length
-        expect(semicolons).toBe(Object.keys(vars).length)
-    })
+  it('produces a parseable :root block by default', () => {
+    const css = toCssDeclarationBlock(themeToCssVars(lightTheme))
+    expect(css.startsWith(':root {\n')).toBe(true)
+    expect(css.endsWith('\n}')).toBe(true)
+    expect(css).toContain('--klc-color-background: ' + lightTheme.colors.background + ';')
+  })
+
+  it('honours a custom selector', () => {
+    const css = toCssDeclarationBlock(themeToCssVars(darkTheme), '[data-theme="dark"]')
+    expect(css.startsWith('[data-theme="dark"] {\n')).toBe(true)
+  })
+
+  it('emits one declaration per line', () => {
+    const vars = themeToCssVars(lightTheme)
+    const css = toCssDeclarationBlock(vars)
+    // count of `;` lines should equal the number of vars
+    const semicolons = (css.match(/;/g) ?? []).length
+    expect(semicolons).toBe(Object.keys(vars).length)
+  })
 })