스타일 토큰 회귀 강화: focus-visible 링/오프셋, disabled/readonly 토큰 및 규칙 추가, 테스트 보강

lib/wysiwyg/export.style.tokens.focusVisible.test.ts

@@ -0,0 +1,22 @@
+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 - focus-visible ring tokens', () => {
+  it('defines ring tokens and uses them in :focus-visible styles', () => {
+    const out = exportFrame(baseFrame())
+    // tokens
+    expect(out.css).toMatch(/:root\s*{[^}]*--ring:/)
+    expect(out.css).toMatch(/:root\s*{[^}]*--ring-offset:/)
+    // usage (focus-visible across common focusables and controls)
+    expect(out.css).toMatch(/:focus-visible\s*{[^}]*outline:2px solid var\(--ring\)/)
+    expect(out.css).toMatch(/:focus-visible\s*{[^}]*outline-offset:var\(--ring-offset\)/)
+  })
+})