@su-record/vibe 2.8.35 → 2.8.37

package/README.md

@@ -6,7 +6,7 @@
 [![TypeScript](https://img.shields.io/badge/TypeScript-5.5+-blue)](https://www.typescriptlang.org/)
 [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
 
-**One install adds 56 agents, 36 skills, multi-LLM orchestration, and automated quality gates to your AI coding workflow.**
+**One install adds 56 agents, 45 skills, multi-LLM orchestration, and automated quality gates to your AI coding workflow.**
 
 Works with Claude Code, Codex, Cursor, and Gemini CLI.
 
@@ -131,13 +131,17 @@ Event Content, Event Image, Event Speaker, Event Ops, Event Comms, Event Schedul
 
 ---
 
-## Skills (36)
+## Skills (45)
 
-Domain-specific skill modules auto-installed based on detected stack.
+Domain-specific skill modules auto-installed based on detected stack. Classified into 3 tiers to prevent context overload.
 
-**Core (15):** Core Capabilities, Parallel Research, Commit Push PR, Git Worktree, Handoff, Priority Todos, Tool Fallback, Context7, Tech Debt, Characterization Test, Agents MD, Claude MD Guide, Exec Plan, Arch Guard, Capability Loop
+**Core (4):** Tech Debt, Characterization Test, Arch Guard, Exec Plan
 
-**Design (7):** Frontend Design, UI/UX Pro Max, Design Teach, Design Audit, Design Critique, Design Polish, Design Normalize
+**Standard (11):** Parallel Research, Handoff, Priority Todos, Agents MD, Claude MD Guide, Capability Loop, Design Teach, Vibe Figma, Vibe Figma Extract, Vibe Figma Convert, Vibe Docs
+
+**Optional (4):** Commit Push PR, Git Worktree, Tool Fallback, Context7
+
+**Design (8):** UI/UX Pro Max, Design Audit, Design Critique, Design Polish, Design Normalize, Design Distill, Brand Assets, SEO Checklist
 
 **Domain (3):** Commerce Patterns, E2E Commerce, Video Production
 
@@ -145,7 +149,9 @@ Domain-specific skill modules auto-installed based on detected stack.
 
 **Event (3):** Event Planning, Event Comms, Event Ops
 
-**Stack-Specific (5):** TypeScript Advanced Types, Vercel React Best Practices, SEO Checklist, Brand Assets, Design Distill
+**Stack-Specific (2):** TypeScript Advanced Types, Vercel React Best Practices
+
+**Figma Pipeline (7):** Figma Rules, Figma Pipeline, Figma Frame, Figma Style, Figma Analyze, Figma Consolidate, Figma Codegen
 
 ### External Skills (skills.sh)
 
@@ -262,7 +268,7 @@ const runner = skills.resolve('review');
 
 ---
 
-## Hooks (16 scripts)
+## Hooks (21 scripts)
 
 | Event | Script | Role |
 |-------|--------|------|
@@ -272,9 +278,11 @@ const runner = skills.resolve('review');
 | PostToolUse | `post-edit.js` | Git index update |
 | UserPromptSubmit | `prompt-dispatcher.js` | Command routing |
 | UserPromptSubmit | `keyword-detector.js` | Magic keyword detection |
+| UserPromptSubmit | `llm-orchestrate.js` | Multi-LLM dispatch |
 | Notification | `context-save.js` | Auto-save at 80/90/95% context |
+| Notification | `stop-notify.js` | Session end notification |
 
-Additional: `llm-orchestrate.js`, `codex-review-gate.js`, `codex-detect.js`, `sentinel-guard.js`, `skill-injector.js`, `evolution-engine.js`, `hud-status.js`, `stop-notify.js`
+Additional: `codex-review-gate.js`, `codex-detect.js`, `sentinel-guard.js`, `skill-injector.js`, `evolution-engine.js`, `hud-status.js`, `auto-commit.js`, `auto-format.js`, `auto-test.js`, `command-log.js`, `pr-test-gate.js`, `figma-extract.js`
 
 ---
 
@@ -397,6 +405,10 @@ vibe figma status|logout              # Token management
 vibe telegram setup|chat|status
 vibe slack setup|channel|status
 
+# Diagnostics
+vibe config show          # Unified config view (global + project)
+vibe stats [--week|--quality]  # Usage telemetry summary
+
 # Other
 vibe env import [path]    # Migrate .env → config.json
 vibe help / version

package/dist/infra/lib/browser/capture.d.ts

@@ -0,0 +1,26 @@
+/**
+ * UI 캡처 — 스크린샷, DOM 추출, computed CSS 조회
+ *
+ * CDP(Chrome DevTools Protocol)를 통해 렌더링된 결과를 정밀하게 추출.
+ */
+import type { CaptureScreenshotOptions, ElementComputedStyle } from './types.js';
+/** 페이지 스크린샷 캡처 */
+export declare function captureScreenshot(page: unknown, options: CaptureScreenshotOptions): Promise<string>;
+/** 요소의 computed CSS + bounding box 추출 */
+export declare function getComputedStyles(page: unknown, selector: string, properties: string[]): Promise<ElementComputedStyle | null>;
+/** 페이지의 모든 매칭 요소에서 computed CSS 일괄 추출 */
+export declare function getComputedStylesBatch(page: unknown, selector: string, properties: string[]): Promise<ElementComputedStyle[]>;
+/** 페이지의 모든 텍스트 콘텐츠 추출 */
+export declare function extractTextContent(page: unknown, selector?: string): Promise<Array<{
+    selector: string;
+    text: string;
+}>>;
+/** 페이지의 모든 이미지 src + 로드 상태 확인 */
+export declare function extractImages(page: unknown): Promise<Array<{
+    src: string;
+    alt: string;
+    loaded: boolean;
+    width: number;
+    height: number;
+}>>;
+//# sourceMappingURL=capture.d.ts.map

package/dist/infra/lib/browser/capture.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"capture.d.ts","sourceRoot":"","sources":["../../../../src/infra/lib/browser/capture.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,KAAK,EACV,wBAAwB,EACxB,oBAAoB,EACrB,MAAM,YAAY,CAAC;AAEpB,kBAAkB;AAClB,wBAAsB,iBAAiB,CACrC,IAAI,EAAE,OAAO,EACb,OAAO,EAAE,wBAAwB,GAChC,OAAO,CAAC,MAAM,CAAC,CAyBjB;AAED,yCAAyC;AACzC,wBAAsB,iBAAiB,CACrC,IAAI,EAAE,OAAO,EACb,QAAQ,EAAE,MAAM,EAChB,UAAU,EAAE,MAAM,EAAE,GACnB,OAAO,CAAC,oBAAoB,GAAG,IAAI,CAAC,CAmCtC;AAED,yCAAyC;AACzC,wBAAsB,sBAAsB,CAC1C,IAAI,EAAE,OAAO,EACb,QAAQ,EAAE,MAAM,EAChB,UAAU,EAAE,MAAM,EAAE,GACnB,OAAO,CAAC,oBAAoB,EAAE,CAAC,CAkCjC;AAED,yBAAyB;AACzB,wBAAsB,kBAAkB,CACtC,IAAI,EAAE,OAAO,EACb,QAAQ,CAAC,EAAE,MAAM,GAChB,OAAO,CAAC,KAAK,CAAC;IAAE,QAAQ,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,MAAM,CAAA;CAAE,CAAC,CAAC,CAoBpD;AAED,iCAAiC;AACjC,wBAAsB,aAAa,CACjC,IAAI,EAAE,OAAO,GACZ,OAAO,CAAC,KAAK,CAAC;IAAE,GAAG,EAAE,MAAM,CAAC;IAAC,GAAG,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,OAAO,CAAC;IAAC,KAAK,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAA;CAAE,CAAC,CAAC,CAiB9F"}

package/dist/infra/lib/browser/capture.js

@@ -0,0 +1,115 @@
+/**
+ * UI 캡처 — 스크린샷, DOM 추출, computed CSS 조회
+ *
+ * CDP(Chrome DevTools Protocol)를 통해 렌더링된 결과를 정밀하게 추출.
+ */
+/** 페이지 스크린샷 캡처 */
+export async function captureScreenshot(page, options) {
+    const p = page;
+    if (options.selector) {
+        const element = await p.$(options.selector);
+        if (!element) {
+            throw new Error(`Element not found: ${options.selector}`);
+        }
+        const el = element;
+        await el.screenshot({
+            path: options.outPath,
+            type: options.format ?? 'png',
+        });
+    }
+    else {
+        await p.screenshot({
+            path: options.outPath,
+            fullPage: options.fullPage !== false,
+            type: options.format ?? 'png',
+        });
+    }
+    return options.outPath;
+}
+/** 요소의 computed CSS + bounding box 추출 */
+export async function getComputedStyles(page, selector, properties) {
+    const p = page;
+    const result = await p.evaluate((...args) => {
+        const sel = args[0];
+        const props = args[1];
+        const el = document.querySelector(sel);
+        if (!el)
+            return null;
+        const computed = window.getComputedStyle(el);
+        const styles = {};
+        for (const prop of props) {
+            styles[prop] = computed.getPropertyValue(prop);
+        }
+        const rect = el.getBoundingClientRect();
+        return {
+            selector: sel,
+            styles,
+            box: {
+                x: Math.round(rect.x),
+                y: Math.round(rect.y),
+                width: Math.round(rect.width),
+                height: Math.round(rect.height),
+            },
+        };
+    }, selector, properties);
+    return result;
+}
+/** 페이지의 모든 매칭 요소에서 computed CSS 일괄 추출 */
+export async function getComputedStylesBatch(page, selector, properties) {
+    const p = page;
+    const results = await p.evaluate((...args) => {
+        const sel = args[0];
+        const props = args[1];
+        const elements = document.querySelectorAll(sel);
+        return Array.from(elements).map((el, idx) => {
+            const computed = window.getComputedStyle(el);
+            const styles = {};
+            for (const prop of props) {
+                styles[prop] = computed.getPropertyValue(prop);
+            }
+            const rect = el.getBoundingClientRect();
+            return {
+                selector: `${sel}:nth-child(${idx + 1})`,
+                styles,
+                box: {
+                    x: Math.round(rect.x),
+                    y: Math.round(rect.y),
+                    width: Math.round(rect.width),
+                    height: Math.round(rect.height),
+                },
+            };
+        });
+    }, selector, properties);
+    return results;
+}
+/** 페이지의 모든 텍스트 콘텐츠 추출 */
+export async function extractTextContent(page, selector) {
+    const p = page;
+    const results = await p.evaluate((...args) => {
+        const sel = args[0];
+        const elements = document.querySelectorAll(sel);
+        return Array.from(elements)
+            .filter(el => el.textContent?.trim())
+            .map((el, idx) => ({
+            selector: `${sel}:nth-child(${idx + 1})`,
+            text: el.textContent?.trim() ?? '',
+        }));
+    }, selector ?? 'h1, h2, h3, h4, h5, h6, p, span, a, button, li, label');
+    return results;
+}
+/** 페이지의 모든 이미지 src + 로드 상태 확인 */
+export async function extractImages(page) {
+    const p = page;
+    const results = await p.evaluate(() => {
+        const images = document.querySelectorAll('img');
+        return Array.from(images).map(img => ({
+            src: img.src,
+            alt: img.alt,
+            loaded: img.complete && img.naturalWidth > 0,
+            width: img.naturalWidth,
+            height: img.naturalHeight,
+        }));
+    });
+    return results;
+}
+//# sourceMappingURL=capture.js.map

package/dist/infra/lib/browser/capture.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"capture.js","sourceRoot":"","sources":["../../../../src/infra/lib/browser/capture.ts"],"names":[],"mappings":"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"}

package/dist/infra/lib/browser/compare.d.ts

@@ -0,0 +1,19 @@
+/**
+ * UI 비교 — 스크린샷 diff, CSS 수치 비교
+ *
+ * Figma 원본 스크린샷 vs 렌더링 결과 비교,
+ * Figma CSS 수치 vs computed CSS 비교.
+ */
+import type { ElementComputedStyle, ScreenshotDiff, StyleDiff, VerificationIssue } from './types.js';
+/**
+ * 두 PNG 파일의 픽셀 단위 비교
+ *
+ * 정밀한 비교를 위해 pixelmatch 사용 (optional dependency).
+ * 없으면 파일 크기 기반 근사 비교로 폴백.
+ */
+export declare function compareScreenshots(expectedPath: string, actualPath: string, diffOutputPath?: string): Promise<ScreenshotDiff>;
+/** CSS 수치 비교 — Figma 기대값 vs 실제 렌더링 값 */
+export declare function compareStyles(expected: Record<string, string>, actual: ElementComputedStyle): StyleDiff[];
+/** StyleDiff → VerificationIssue 변환 */
+export declare function diffsToIssues(diffs: StyleDiff[]): VerificationIssue[];
+//# sourceMappingURL=compare.d.ts.map

package/dist/infra/lib/browser/compare.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"compare.d.ts","sourceRoot":"","sources":["../../../../src/infra/lib/browser/compare.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAGH,OAAO,KAAK,EACV,oBAAoB,EACpB,cAAc,EACd,SAAS,EACT,iBAAiB,EAClB,MAAM,YAAY,CAAC;AAEpB;;;;;GAKG;AACH,wBAAsB,kBAAkB,CACtC,YAAY,EAAE,MAAM,EACpB,UAAU,EAAE,MAAM,EAClB,cAAc,CAAC,EAAE,MAAM,GACtB,OAAO,CAAC,cAAc,CAAC,CAiDzB;AAsBD,wCAAwC;AACxC,wBAAgB,aAAa,CAC3B,QAAQ,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,EAChC,MAAM,EAAE,oBAAoB,GAC3B,SAAS,EAAE,CA6Bb;AA2BD,uCAAuC;AACvC,wBAAgB,aAAa,CAAC,KAAK,EAAE,SAAS,EAAE,GAAG,iBAAiB,EAAE,CAerE"}

package/dist/infra/lib/browser/compare.js

@@ -0,0 +1,133 @@
+/**
+ * UI 비교 — 스크린샷 diff, CSS 수치 비교
+ *
+ * Figma 원본 스크린샷 vs 렌더링 결과 비교,
+ * Figma CSS 수치 vs computed CSS 비교.
+ */
+import { readFileSync } from 'node:fs';
+/**
+ * 두 PNG 파일의 픽셀 단위 비교
+ *
+ * 정밀한 비교를 위해 pixelmatch 사용 (optional dependency).
+ * 없으면 파일 크기 기반 근사 비교로 폴백.
+ */
+export async function compareScreenshots(expectedPath, actualPath, diffOutputPath) {
+    try {
+        const { default: pixelmatch } = await import('pixelmatch');
+        const { PNG } = await import('pngjs');
+        const img1 = PNG.sync.read(readFileSync(expectedPath));
+        const img2 = PNG.sync.read(readFileSync(actualPath));
+        const width = Math.max(img1.width, img2.width);
+        const height = Math.max(img1.height, img2.height);
+        // 사이즈 맞추기 (작은 쪽을 확장)
+        const canvas1 = createCanvas(img1, width, height);
+        const canvas2 = createCanvas(img2, width, height);
+        const diffData = new Uint8Array(width * height * 4);
+        const diffPixels = pixelmatch(canvas1, canvas2, diffData, width, height, { threshold: 0.1 });
+        const totalPixels = width * height;
+        if (diffOutputPath) {
+            const diffImg = new PNG({ width, height });
+            diffImg.data = Buffer.from(diffData);
+            const { writeFileSync } = await import('node:fs');
+            writeFileSync(diffOutputPath, PNG.sync.write(diffImg));
+        }
+        return {
+            diffRatio: diffPixels / totalPixels,
+            diffPixels,
+            diffImagePath: diffOutputPath,
+            totalPixels,
+        };
+    }
+    catch {
+        // pixelmatch/pngjs 미설치 시 파일 크기 기반 근사 비교
+        const buf1 = readFileSync(expectedPath);
+        const buf2 = readFileSync(actualPath);
+        const sizeDiff = Math.abs(buf1.length - buf2.length);
+        const maxSize = Math.max(buf1.length, buf2.length);
+        return {
+            diffRatio: sizeDiff / maxSize,
+            diffPixels: -1,
+            totalPixels: -1,
+        };
+    }
+}
+/** 캔버스 크기 통일 (투명 배경으로 확장) */
+function createCanvas(img, width, height) {
+    const data = new Uint8Array(width * height * 4);
+    for (let y = 0; y < img.height; y++) {
+        for (let x = 0; x < img.width; x++) {
+            const srcIdx = (y * img.width + x) * 4;
+            const dstIdx = (y * width + x) * 4;
+            data[dstIdx] = img.data[srcIdx];
+            data[dstIdx + 1] = img.data[srcIdx + 1];
+            data[dstIdx + 2] = img.data[srcIdx + 2];
+            data[dstIdx + 3] = img.data[srcIdx + 3];
+        }
+    }
+    return data;
+}
+/** CSS 수치 비교 — Figma 기대값 vs 실제 렌더링 값 */
+export function compareStyles(expected, actual) {
+    const diffs = [];
+    for (const [property, expectedValue] of Object.entries(expected)) {
+        const actualValue = actual.styles[property];
+        if (!actualValue)
+            continue;
+        const normalizedExpected = normalizeCSS(property, expectedValue);
+        const normalizedActual = normalizeCSS(property, actualValue);
+        if (normalizedExpected !== normalizedActual) {
+            const diff = {
+                selector: actual.selector,
+                property,
+                expected: expectedValue,
+                actual: actualValue,
+            };
+            const expectedNum = parseFloat(expectedValue);
+            const actualNum = parseFloat(actualValue);
+            if (!isNaN(expectedNum) && !isNaN(actualNum)) {
+                diff.delta = Math.abs(expectedNum - actualNum);
+            }
+            diffs.push(diff);
+        }
+    }
+    return diffs;
+}
+/** CSS 값 정규화 (비교용) */
+function normalizeCSS(property, value) {
+    let v = value.trim().toLowerCase();
+    // rgb → hex 변환
+    const rgbMatch = v.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
+    if (rgbMatch) {
+        const [, r, g, b] = rgbMatch;
+        v = '#' + [r, g, b].map(c => parseInt(c, 10).toString(16).padStart(2, '0')).join('');
+    }
+    // px 값 반올림
+    if (v.endsWith('px')) {
+        const num = parseFloat(v);
+        if (!isNaN(num))
+            v = Math.round(num) + 'px';
+    }
+    // color 속성의 특수 처리
+    if (property === 'color' || property.includes('color')) {
+        if (v === 'transparent')
+            v = 'rgba(0, 0, 0, 0)';
+    }
+    return v;
+}
+/** StyleDiff → VerificationIssue 변환 */
+export function diffsToIssues(diffs) {
+    return diffs.map(diff => {
+        const isPx = diff.delta !== undefined;
+        const isLarge = isPx && diff.delta > 4;
+        return {
+            severity: isLarge ? 'P1' : 'P2',
+            type: 'style-diff',
+            target: diff.selector,
+            message: `${diff.property}: expected ${diff.expected}, got ${diff.actual}` +
+                (diff.delta !== undefined ? ` (delta: ${diff.delta}px)` : ''),
+            expected: diff.expected,
+            actual: diff.actual,
+        };
+    });
+}
+//# sourceMappingURL=compare.js.map

package/dist/infra/lib/browser/compare.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"compare.js","sourceRoot":"","sources":["../../../../src/infra/lib/browser/compare.ts"],"names":[],"mappings":"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"}

package/dist/infra/lib/browser/index.d.ts

@@ -0,0 +1,5 @@
+export { launchBrowser, openPage, closeBrowser, getBrowser } from './launch.js';
+export { captureScreenshot, getComputedStyles, getComputedStylesBatch, extractTextContent, extractImages } from './capture.js';
+export { compareScreenshots, compareStyles, diffsToIssues } from './compare.js';
+export type { BrowserLaunchOptions, CaptureScreenshotOptions, ElementComputedStyle, StyleDiff, ScreenshotDiff, VerificationIssue, VerificationReport, } from './types.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/infra/lib/browser/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/infra/lib/browser/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,YAAY,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAChF,OAAO,EAAE,iBAAiB,EAAE,iBAAiB,EAAE,sBAAsB,EAAE,kBAAkB,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAC/H,OAAO,EAAE,kBAAkB,EAAE,aAAa,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAChF,YAAY,EACV,oBAAoB,EACpB,wBAAwB,EACxB,oBAAoB,EACpB,SAAS,EACT,cAAc,EACd,iBAAiB,EACjB,kBAAkB,GACnB,MAAM,YAAY,CAAC"}

package/dist/infra/lib/browser/index.js

@@ -0,0 +1,4 @@
+export { launchBrowser, openPage, closeBrowser, getBrowser } from './launch.js';
+export { captureScreenshot, getComputedStyles, getComputedStylesBatch, extractTextContent, extractImages } from './capture.js';
+export { compareScreenshots, compareStyles, diffsToIssues } from './compare.js';
+//# sourceMappingURL=index.js.map

package/dist/infra/lib/browser/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/infra/lib/browser/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,YAAY,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAChF,OAAO,EAAE,iBAAiB,EAAE,iBAAiB,EAAE,sBAAsB,EAAE,kBAAkB,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAC/H,OAAO,EAAE,kBAAkB,EAAE,aAAa,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC"}

package/dist/infra/lib/browser/launch.d.ts

@@ -0,0 +1,19 @@
+/**
+ * Puppeteer 브라우저 관리
+ *
+ * headless Chrome 런치, 페이지 관리, 정리.
+ * 싱글턴 패턴으로 세션 내 브라우저 재사용.
+ */
+import type { BrowserLaunchOptions } from './types.js';
+/** headless Chrome 브라우저 시작 */
+export declare function launchBrowser(options?: BrowserLaunchOptions): Promise<unknown>;
+/** 새 페이지 열고 URL 로드 */
+export declare function openPage(browser: unknown, url: string, viewport?: {
+    width: number;
+    height: number;
+}): Promise<unknown>;
+/** 브라우저 종료 */
+export declare function closeBrowser(): Promise<void>;
+/** 현재 브라우저 인스턴스 반환 (없으면 null) */
+export declare function getBrowser(): unknown;
+//# sourceMappingURL=launch.d.ts.map

package/dist/infra/lib/browser/launch.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"launch.d.ts","sourceRoot":"","sources":["../../../../src/infra/lib/browser/launch.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,YAAY,CAAC;AAoBvD,8BAA8B;AAC9B,wBAAsB,aAAa,CAAC,OAAO,GAAE,oBAAyB,GAAG,OAAO,CAAC,OAAO,CAAC,CAiBxF;AAED,sBAAsB;AACtB,wBAAsB,QAAQ,CAC5B,OAAO,EAAE,OAAO,EAChB,GAAG,EAAE,MAAM,EACX,QAAQ,CAAC,EAAE;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAA;CAAE,GAC3C,OAAO,CAAC,OAAO,CAAC,CAWlB;AAED,cAAc;AACd,wBAAsB,YAAY,IAAI,OAAO,CAAC,IAAI,CAAC,CAMlD;AAED,iCAAiC;AACjC,wBAAgB,UAAU,IAAI,OAAO,CAEpC"}

package/dist/infra/lib/browser/launch.js

@@ -0,0 +1,59 @@
+/**
+ * Puppeteer 브라우저 관리
+ *
+ * headless Chrome 런치, 페이지 관리, 정리.
+ * 싱글턴 패턴으로 세션 내 브라우저 재사용.
+ */
+const DEFAULT_VIEWPORT = { width: 1920, height: 1080 };
+let browserInstance = null;
+/** Puppeteer 동적 import (optional dependency) */
+// eslint-disable-next-line @typescript-eslint/no-explicit-any -- puppeteer is optional peer dep
+async function loadPuppeteer() {
+    try {
+        // @ts-expect-error -- puppeteer is optional peer dependency, may not have type declarations
+        return await import('puppeteer');
+    }
+    catch {
+        throw new Error('puppeteer is not installed. Run: npm install puppeteer\n' +
+            'Required for UI verification (vibe.figma Phase 4, design-audit, etc.)');
+    }
+}
+/** headless Chrome 브라우저 시작 */
+export async function launchBrowser(options = {}) {
+    if (browserInstance)
+        return browserInstance;
+    const puppeteer = await loadPuppeteer();
+    const browser = await puppeteer.launch({
+        headless: options.headless !== false,
+        args: [
+            '--no-sandbox',
+            '--disable-setuid-sandbox',
+            '--disable-dev-shm-usage',
+            '--disable-gpu',
+        ],
+        ...(options.executablePath ? { executablePath: options.executablePath } : {}),
+    });
+    browserInstance = browser;
+    return browser;
+}
+/** 새 페이지 열고 URL 로드 */
+export async function openPage(browser, url, viewport) {
+    const b = browser;
+    const page = await b.newPage();
+    await page.setViewport(viewport ?? DEFAULT_VIEWPORT);
+    await page.goto(url, { waitUntil: 'networkidle0' });
+    return page;
+}
+/** 브라우저 종료 */
+export async function closeBrowser() {
+    if (!browserInstance)
+        return;
+    const b = browserInstance;
+    await b.close();
+    browserInstance = null;
+}
+/** 현재 브라우저 인스턴스 반환 (없으면 null) */
+export function getBrowser() {
+    return browserInstance;
+}
+//# sourceMappingURL=launch.js.map

package/dist/infra/lib/browser/launch.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"launch.js","sourceRoot":"","sources":["../../../../src/infra/lib/browser/launch.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAIH,MAAM,gBAAgB,GAAG,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,CAAC;AAEvD,IAAI,eAAe,GAAY,IAAI,CAAC;AAEpC,gDAAgD;AAChD,gGAAgG;AAChG,KAAK,UAAU,aAAa;IAC1B,IAAI,CAAC;QACH,4FAA4F;QAC5F,OAAO,MAAM,MAAM,CAAC,WAAW,CAAwB,CAAC;IAC1D,CAAC;IAAC,MAAM,CAAC;QACP,MAAM,IAAI,KAAK,CACb,0DAA0D;YAC1D,uEAAuE,CACxE,CAAC;IACJ,CAAC;AACH,CAAC;AAED,8BAA8B;AAC9B,MAAM,CAAC,KAAK,UAAU,aAAa,CAAC,UAAgC,EAAE;IACpE,IAAI,eAAe;QAAE,OAAO,eAAe,CAAC;IAE5C,MAAM,SAAS,GAAG,MAAM,aAAa,EAAE,CAAC;IACxC,MAAM,OAAO,GAAG,MAAM,SAAS,CAAC,MAAM,CAAC;QACrC,QAAQ,EAAE,OAAO,CAAC,QAAQ,KAAK,KAAK;QACpC,IAAI,EAAE;YACJ,cAAc;YACd,0BAA0B;YAC1B,yBAAyB;YACzB,eAAe;SAChB;QACD,GAAG,CAAC,OAAO,CAAC,cAAc,CAAC,CAAC,CAAC,EAAE,cAAc,EAAE,OAAO,CAAC,cAAc,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC;KAC9E,CAAC,CAAC;IAEH,eAAe,GAAG,OAAO,CAAC;IAC1B,OAAO,OAAO,CAAC;AACjB,CAAC;AAED,sBAAsB;AACtB,MAAM,CAAC,KAAK,UAAU,QAAQ,CAC5B,OAAgB,EAChB,GAAW,EACX,QAA4C;IAE5C,MAAM,CAAC,GAAG,OAA8C,CAAC;IACzD,MAAM,IAAI,GAAG,MAAM,CAAC,CAAC,OAAO,EAG3B,CAAC;IAEF,MAAM,IAAI,CAAC,WAAW,CAAC,QAAQ,IAAI,gBAAgB,CAAC,CAAC;IACrD,MAAM,IAAI,CAAC,IAAI,CAAC,GAAG,EAAE,EAAE,SAAS,EAAE,cAAc,EAAE,CAAC,CAAC;IAEpD,OAAO,IAAI,CAAC;AACd,CAAC;AAED,cAAc;AACd,MAAM,CAAC,KAAK,UAAU,YAAY;IAChC,IAAI,CAAC,eAAe;QAAE,OAAO;IAE7B,MAAM,CAAC,GAAG,eAAiD,CAAC;IAC5D,MAAM,CAAC,CAAC,KAAK,EAAE,CAAC;IAChB,eAAe,GAAG,IAAI,CAAC;AACzB,CAAC;AAED,iCAAiC;AACjC,MAAM,UAAU,UAAU;IACxB,OAAO,eAAe,CAAC;AACzB,CAAC"}

package/dist/infra/lib/browser/types.d.ts

@@ -0,0 +1,103 @@
+/**
+ * Browser UI 검증 인프라 타입 정의
+ *
+ * Puppeteer + CDP 기반 범용 UI 검증 도구.
+ * vibe.figma Phase 4, design-audit, design-polish 등에서 공통 사용.
+ */
+/** 브라우저 런치 옵션 */
+export interface BrowserLaunchOptions {
+    /** headless 모드 (기본: true) */
+    headless?: boolean;
+    /** 뷰포트 크기 */
+    viewport?: {
+        width: number;
+        height: number;
+    };
+    /** dev 서버 URL (예: http://localhost:3000) */
+    url?: string;
+    /** Chrome 실행 경로 (미지정 시 Puppeteer 번들 사용) */
+    executablePath?: string;
+}
+/** 스크린샷 옵션 */
+export interface CaptureScreenshotOptions {
+    /** 저장 경로 */
+    outPath: string;
+    /** 특정 CSS selector만 캡처 (미지정 시 전체 페이지) */
+    selector?: string;
+    /** fullPage 스크롤 캡처 (기본: true) */
+    fullPage?: boolean;
+    /** 이미지 포맷 (기본: png) */
+    format?: 'png' | 'jpeg' | 'webp';
+}
+/** DOM 요소의 computed CSS */
+export interface ElementComputedStyle {
+    /** CSS selector */
+    selector: string;
+    /** computed style key-value */
+    styles: Record<string, string>;
+    /** bounding box */
+    box: {
+        x: number;
+        y: number;
+        width: number;
+        height: number;
+    };
+}
+/** CSS 수치 비교 결과 */
+export interface StyleDiff {
+    selector: string;
+    property: string;
+    expected: string;
+    actual: string;
+    /** px 차이 (숫자 비교 가능한 속성만) */
+    delta?: number;
+}
+/** 스크린샷 비교 결과 */
+export interface ScreenshotDiff {
+    /** 차이 비율 (0.0 ~ 1.0) */
+    diffRatio: number;
+    /** 차이 픽셀 수 */
+    diffPixels: number;
+    /** diff 이미지 저장 경로 */
+    diffImagePath?: string;
+    /** 전체 픽셀 수 */
+    totalPixels: number;
+}
+/** UI 검증 결과 항목 */
+export interface VerificationIssue {
+    /** P1=필수, P2=권장 */
+    severity: 'P1' | 'P2';
+    /** 이슈 유형 */
+    type: 'missing-image' | 'layout-mismatch' | 'style-diff' | 'text-mismatch' | 'a11y';
+    /** 대상 selector 또는 영역 */
+    target: string;
+    /** 이슈 설명 */
+    message: string;
+    /** 기대값 */
+    expected?: string;
+    /** 실제값 */
+    actual?: string;
+}
+/** UI 검증 리포트 */
+export interface VerificationReport {
+    /** 검증 대상 URL */
+    url: string;
+    /** 뷰포트 */
+    viewport: {
+        width: number;
+        height: number;
+    };
+    /** 총 이슈 수 */
+    totalIssues: number;
+    /** P1 이슈 수 */
+    p1Count: number;
+    /** P2 이슈 수 */
+    p2Count: number;
+    /** 이슈 목록 */
+    issues: VerificationIssue[];
+    /** 스크린샷 diff (있으면) */
+    screenshotDiff?: ScreenshotDiff;
+    /** 타임스탬프 */
+    timestamp: string;
+}
+//# sourceMappingURL=types.d.ts.map

package/dist/infra/lib/browser/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/infra/lib/browser/types.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,iBAAiB;AACjB,MAAM,WAAW,oBAAoB;IACnC,6BAA6B;IAC7B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,aAAa;IACb,QAAQ,CAAC,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE,CAAC;IAC7C,4CAA4C;IAC5C,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,2CAA2C;IAC3C,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB;AAED,cAAc;AACd,MAAM,WAAW,wBAAwB;IACvC,YAAY;IACZ,OAAO,EAAE,MAAM,CAAC;IAChB,yCAAyC;IACzC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,iCAAiC;IACjC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,uBAAuB;IACvB,MAAM,CAAC,EAAE,KAAK,GAAG,MAAM,GAAG,MAAM,CAAC;CAClC;AAED,2BAA2B;AAC3B,MAAM,WAAW,oBAAoB;IACnC,mBAAmB;IACnB,QAAQ,EAAE,MAAM,CAAC;IACjB,+BAA+B;IAC/B,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAC/B,mBAAmB;IACnB,GAAG,EAAE;QACH,CAAC,EAAE,MAAM,CAAC;QACV,CAAC,EAAE,MAAM,CAAC;QACV,KAAK,EAAE,MAAM,CAAC;QACd,MAAM,EAAE,MAAM,CAAC;KAChB,CAAC;CACH;AAED,mBAAmB;AACnB,MAAM,WAAW,SAAS;IACxB,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;IACjB,MAAM,EAAE,MAAM,CAAC;IACf,4BAA4B;IAC5B,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,iBAAiB;AACjB,MAAM,WAAW,cAAc;IAC7B,wBAAwB;IACxB,SAAS,EAAE,MAAM,CAAC;IAClB,cAAc;IACd,UAAU,EAAE,MAAM,CAAC;IACnB,qBAAqB;IACrB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,cAAc;IACd,WAAW,EAAE,MAAM,CAAC;CACrB;AAED,kBAAkB;AAClB,MAAM,WAAW,iBAAiB;IAChC,mBAAmB;IACnB,QAAQ,EAAE,IAAI,GAAG,IAAI,CAAC;IACtB,YAAY;IACZ,IAAI,EAAE,eAAe,GAAG,iBAAiB,GAAG,YAAY,GAAG,eAAe,GAAG,MAAM,CAAC;IACpF,wBAAwB;IACxB,MAAM,EAAE,MAAM,CAAC;IACf,YAAY;IACZ,OAAO,EAAE,MAAM,CAAC;IAChB,UAAU;IACV,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,UAAU;IACV,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,gBAAgB;AAChB,MAAM,WAAW,kBAAkB;IACjC,gBAAgB;IAChB,GAAG,EAAE,MAAM,CAAC;IACZ,UAAU;IACV,QAAQ,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE,CAAC;IAC5C,aAAa;IACb,WAAW,EAAE,MAAM,CAAC;IACpB,cAAc;IACd,OAAO,EAAE,MAAM,CAAC;IAChB,cAAc;IACd,OAAO,EAAE,MAAM,CAAC;IAChB,YAAY;IACZ,MAAM,EAAE,iBAAiB,EAAE,CAAC;IAC5B,sBAAsB;IACtB,cAAc,CAAC,EAAE,cAAc,CAAC;IAChC,YAAY;IACZ,SAAS,EAAE,MAAM,CAAC;CACnB"}

package/dist/infra/lib/browser/types.js

@@ -0,0 +1,8 @@
+/**
+ * Browser UI 검증 인프라 타입 정의
+ *
+ * Puppeteer + CDP 기반 범용 UI 검증 도구.
+ * vibe.figma Phase 4, design-audit, design-polish 등에서 공통 사용.
+ */
+export {};
+//# sourceMappingURL=types.js.map

package/dist/infra/lib/browser/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../src/infra/lib/browser/types.ts"],"names":[],"mappings":"AAAA;;;;;GAKG"}