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 - disabled/read-only control tokens', () => {
  it('defines disabled tokens and uses them for :disabled and [readonly]', () => {
    const out = exportFrame(baseFrame())
    // tokens
    expect(out.css).toMatch(/:root\s*{[^}]*--disabled-bg:/)
    expect(out.css).toMatch(/:root\s*{[^}]*--disabled-fg:/)
    // usage
    expect(out.css).toMatch(/input:disabled,select:disabled,textarea:disabled\s*{[^}]*background:var\(--disabled-bg\)/)
    expect(out.css).toMatch(/input:disabled,select:disabled,textarea:disabled\s*{[^}]*color:var\(--disabled-fg\)/)
    expect(out.css).toMatch(/input\[readonly\],select\[readonly\],textarea\[readonly\]\s*{[^}]*color:var\(--disabled-fg\)/)
  })
})