feat(wysiwyg): 레이어/속성 패널 및 Export(절대배치) 1차 TDD/구현

- LayersPanel: 순서 변경/잠금/숨김 토글
- PropsPanel: 위치/크기/회전 및 이미지 src/alt 편집
- exportFrame: frame-scale 토큰 및 오브젝트 절대배치 HTML/CSS 출력
- 테스트 추가 및 전체 그린 유지

lib/wysiwyg/export.test.ts

@@ -0,0 +1,42 @@
+import { describe, it, expect } from 'vitest'
+import { exportFrame } from '@/lib/wysiwyg/export'
+import type { Frame } from '@/lib/wysiwyg/schema'
+
+function makeFrame(): Frame {
+  return {
+    id: 'f1', width: 320, height: 200, background: '#ffffff',
+    layers: [
+      { id: 'l1', name: 'Base', visible: true, locked: false, objects: [
+        { id: 'o1', type: 'image', x: 16, y: 24, width: 80, height: 60, rotate: 15, zIndex: 0, props: { src: 'https://example.com/a.jpg', alt: 'A' } },
+      ]},
+      { id: 'l2', name: 'Text', visible: true, locked: false, objects: [
+        { id: 't1', type: 'text', x: 24, y: 120, width: 200, height: 32, rotate: 0, zIndex: 1, props: { text: 'Hello', fontSize: 18, color: '#111111' } },
+      ]},
+    ],
+  }
+}
+
+describe('wysiwyg export (absolute positioned HTML/CSS + scale wrapper)', () => {
+  it('renders wrapper with fixed width/height and absolutely positioned children', () => {
+    const frame = makeFrame()
+    const out = exportFrame(frame)
+    expect(out.html).toMatch(/<div class=\"frame\"/)
+    expect(out.css).toMatch(/\.frame\s*{[^}]*position:relative/)
+    expect(out.css).toMatch(/width:320px/)
+    expect(out.css).toMatch(/height:200px/)
+    // image object
+    expect(out.html).toMatch(/<img[^>]*src=\"https:\/\/example.com\/a.jpg\"/)
+    expect(out.css).toMatch(/#o1\s*{[^}]*left:16px;[^}]*top:24px;[^}]*width:80px;[^}]*height:60px;[^}]*transform:rotate\(15deg\)/)
+    // text object
+    expect(out.html).toMatch(/<p id=\"t1\"/)
+    expect(out.html).toMatch(/Hello/)
+    expect(out.css).toMatch(/#t1\s*{[^}]*left:24px;[^}]*top:120px;[^}]*width:200px;[^}]*height:32px/)
+  })
+
+  it('includes scale wrapper token for responsive fit', () => {
+    const frame = makeFrame()
+    const out = exportFrame(frame)
+    expect(out.css).toMatch(/\.frame-scale\s*{[^}]*transform-origin:0 0/)
+    expect(out.html).toMatch(/class=\"frame-scale\"/)
+  })
+})