import { describe, it, expect } from 'vitest'
import { exportFrame } from '@/lib/wysiwyg/export'
import type { Frame } from '@/lib/wysiwyg/schema'

function baseFrame(): Frame {
  return {
    id: 'f', width: 320, height: 200, background: '#111111',
    layers: [{ id: 'l1', name: 'Base', visible: true, locked: false, objects: [] }],
  }
}

describe('wysiwyg export - style tokens', () => {
  it('injects :root tokens and uses them in base rules', () => {
    const f = baseFrame()
    const out = exportFrame(f)
    // root tokens
    expect(out.css).toMatch(/:root\s*{[^}]*--bg:\s*#[0-9a-fA-F]{3,6}/)
    expect(out.css).toMatch(/--text:/)
    expect(out.css).toMatch(/--border:/)
    expect(out.css).toMatch(/--primary:/)
    // frame uses tokens
    expect(out.css).toMatch(/\.frame\s*{[^}]*background:var\(--bg\)/)
    // anchor uses primary color
    expect(out.css).toMatch(/a\s*{[^}]*color:var\(--primary\)/)
  })
})