@hanmariyang/drafting 1.6.2

package/api/dist/lib/design-system-gen.js

@@ -0,0 +1,332 @@
+// 디자인 시스템 생성 — 인터뷰 답변 → 풍부한 DesignSystem(색 역할+상태색, 타입 스케일,
+// 여백 체계, 형태, 접근성 필드, 라이트+다크 세트) + 설계 근거 + 스타일 타일.
+// AI_STUB/오프라인이면 답변 키워드 결정적 매핑. 아니면 provider 로 JSON 제안(결정적 위에 덮어씀).
+// 스타일 타일은 시스템에서 결정적으로 렌더 — 항상 토큰과 일치.
+import { config } from "./config.js";
+import { resolveProvider } from "../providers/index.js";
+import { getModelConfig } from "./ai.js";
+import { PRESETS, DEFAULT_GUIDE, saveStyleGuide } from "./style-guide.js";
+import * as repo from "../db/repos.js";
+const key = (pid) => `design_system:${pid}`;
+const candKey = (pid) => `design_system_candidates:${pid}`;
+const HEX_RE = /#[0-9a-fA-F]{6}\b/;
+export function getDesignSystem(projectId) {
+    return repo.getSetting(key(projectId));
+}
+function answersOf(documentId) {
+    const s = repo.getSessionByDocument(documentId);
+    const out = {};
+    for (const a of s?.answers ?? [])
+        out[a.questionId] = a.answer;
+    return out;
+}
+const mix = (a, b, t) => {
+    const h = (c) => [1, 3, 5].map((i) => parseInt(c.slice(i, i + 2), 16));
+    const [r1, g1, b1] = h(a), [r2, g2, b2] = h(b);
+    const m = (x, y) => Math.round(x + (y - x) * t).toString(16).padStart(2, '0');
+    return `#${m(r1, r2)}${m(g1, g2)}${m(b1, b2)}`;
+};
+/** 답변 → 풍부한 DesignSystem (결정적). stub/오프라인·폴백·탐색 공용. */
+export function buildSystem(ans, presetOverride) {
+    const all = Object.values(ans).join(' ');
+    const has = (...ks) => ks.some((k) => all.includes(k));
+    let preset = presetOverride ?? 'clean';
+    if (!presetOverride) {
+        if (has('활기', '경쾌', '친근', '발랄', '재미', '귀여'))
+            preset = 'vivid';
+        else if (has('클래식', '우아', '따뜻', '감성', '편안'))
+            preset = 'warm';
+        else if (has('미니멀', '기능', '단정', '실용', '툴'))
+            preset = 'mono';
+    }
+    const base = PRESETS[preset] ?? DEFAULT_GUIDE;
+    // 강조색
+    let accent = base.accent;
+    const hex = all.match(HEX_RE)?.[0];
+    if (hex)
+        accent = hex;
+    else if (has('그린', '초록', '녹색'))
+        accent = '#0e7b62';
+    else if (has('블루', '파랑', '남색'))
+        accent = '#2563eb';
+    else if (has('퍼플', '보라'))
+        accent = '#7c3aed';
+    else if (has('오렌지', '주황', '테라코타'))
+        accent = '#c2603f';
+    const light = {
+        bg: base.bg, surface: base.surface, surfaceAlt: mix(base.bg, base.surface, 0.5),
+        ink: base.ink, sub: base.sub, line: base.line, accent, accentText: '#ffffff',
+    };
+    const darkP = PRESETS.dark;
+    const dark = {
+        bg: darkP.bg, surface: darkP.surface, surfaceAlt: mix(darkP.bg, darkP.surface, 0.5),
+        ink: darkP.ink, sub: darkP.sub, line: darkP.line, accent, accentText: '#0b0d10',
+    };
+    const wantsDark = has('다크', '어두', 'dark', '야간');
+    const wantsBoth = has('둘 다', '둘다', '라이트', 'light', '양쪽', '모두');
+    const hasDark = wantsDark || wantsBoth;
+    const primary = wantsDark && !wantsBoth ? 'dark' : 'light';
+    // 접근성
+    const highContrast = has('고대비', '대비 높', '대비높', '고 대비');
+    const colorblindSafe = has('색맹', '색약', '색만', '색상만', '색으로만');
+    const a11yNotes = ans.accessibility && ans.accessibility.trim() && !/^없음$/.test(ans.accessibility.trim()) ? ans.accessibility.trim() : '';
+    if (highContrast) {
+        light.ink = '#0a0b0c';
+        light.sub = mix(light.sub, light.ink, 0.35);
+        light.line = mix(light.line, light.ink, 0.25);
+    }
+    // 상태색 — 빨강 회피 시 danger 를 앰버-브라운으로
+    const avoidRed = has('빨강 피', '빨강은 피', '레드 피', '빨간색 피');
+    const state = {
+        success: '#1b7f4b', warning: '#8a6a1f', danger: avoidRed ? '#b45309' : '#c0392b', info: '#2563eb',
+    };
+    // 타이포
+    // ⚠️ "산세리프"가 "세리프"에 걸리지 않게 sans 를 먼저 판정.
+    const family = has('산세리프', '산 세리프', 'sans', '고딕', '산스', '모던') ? 'sans'
+        : has('세리프', '명조', '바탕') ? 'serif'
+            : has('라운드', '둥근 서체', '동글') ? 'rounded'
+                : has('모노', '고정폭') ? 'mono'
+                    : 'sans';
+    const density = has('촘촘', '밀집', '조밀', '많이') ? 'compact' : has('여유', '넓', '시원') ? 'spacious' : base.density;
+    const scale = density === 'compact'
+        ? { display: 26, title: 18, body: 13, caption: 11 }
+        : density === 'spacious'
+            ? { display: 34, title: 24, body: 15, caption: 13 }
+            : { display: 30, title: 20, body: 14, caption: 12 };
+    // 형태
+    let radiusCard = base.radius;
+    if (has('각진', '샤프', '직각', '딱딱'))
+        radiusCard = Math.min(radiusCard, 4);
+    else if (has('둥근', '부드럽', '라운드'))
+        radiusCard = Math.max(radiusCard, 14);
+    const shadow = has('그림자 없', '플랫', '납작') ? 'none' : has('입체', '그림자 강', '떠 있') ? 'strong' : 'soft';
+    return {
+        color: { primary, light, dark: hasDark ? dark : null, state },
+        type: { family, scale, weightBold: 800 },
+        space: { unit: 4, density, scale: [4, 8, 12, 16, 24, 32] },
+        shape: { radiusCard, radiusBtn: Math.max(4, Math.round(radiusCard * 0.7)), radiusPill: 999, border: 1, shadow },
+        a11y: { highContrast, colorblindSafe, notes: a11yNotes },
+    };
+}
+/** 시스템 → StyleGuide (B/A 구동용). primary 모드 색을 쓴다. */
+export function deriveGuide(sys) {
+    const c = sys.color[sys.color.primary] ?? sys.color.light;
+    return {
+        preset: 'custom', accent: c.accent, bg: c.bg, surface: c.surface, ink: c.ink, sub: c.sub, line: c.line,
+        radius: sys.shape.radiusCard, density: sys.space.density, font: sys.type.family, mode: sys.color.primary,
+    };
+}
+function rationaleFor(ans, sys) {
+    const modeTxt = sys.color.dark ? (sys.color.primary === 'dark' ? '다크 기본 + 라이트 세트' : '라이트 기본 + 다크 세트') : `${sys.color.primary} 단일`;
+    return (`성격(“${ans.personality ?? '—'}”)에서 강조색 ${sys.color.light.accent} 를 주요 액션에만 절제해서 씁니다. ` +
+        `색은 배경·표면·본문·보조·경계·강조의 역할 체계 + 상태색(성공/경고/위험/정보)까지 정의(${modeTxt}). ` +
+        `서체 ${sys.type.family}, 타입 스케일 ${sys.type.scale.display}/${sys.type.scale.title}/${sys.type.scale.body}/${sys.type.scale.caption}px, ` +
+        `여백 4px 그리드(${sys.space.density}), 모서리 ${sys.shape.radiusCard}px, 그림자 ${sys.shape.shadow}. ` +
+        (sys.a11y.highContrast || sys.a11y.colorblindSafe || sys.a11y.notes
+            ? `접근성: ${[sys.a11y.highContrast ? '고대비' : '', sys.a11y.colorblindSafe ? '색맹 안전(상태는 색+글리프)' : '', sys.a11y.notes].filter(Boolean).join(' · ')}.`
+            : ''));
+}
+function buildMessages(ans) {
+    const answerBlock = Object.entries(ans).map(([k, v]) => `- ${k}: ${v}`).join('\n');
+    const system = `너는 시니어 디자인 시스템 설계자다. 아래 인터뷰 답변으로 이 제품의 디자인 시스템 토큰을 설계한다.\n` +
+        `오직 JSON 하나만 출력(코드펜스·설명 없이). 스키마:\n` +
+        `{"colorLight":{"bg","surface","surfaceAlt","ink","sub","line","accent","accentText"},` +
+        `"colorDark":{...같은 키...}|null,"primaryMode":"light|dark",` +
+        `"state":{"success","warning","danger","info"},` +
+        `"font":"sans|serif|rounded|mono","scale":{"display","title","body","caption"(px정수)},` +
+        `"density":"compact|cozy|spacious","radiusCard":정수,"shadow":"none|soft|strong",` +
+        `"highContrast":bool,"colorblindSafe":bool,"a11yNotes":"문자열",` +
+        `"rationale":"설계 근거 3~4문장(한국어)"}\n` +
+        `모든 색은 #RRGGBB. accent 는 주요 액션·활성에만. 답변의 HEX·금지색·다크 요구·접근성 요구를 반드시 반영. ` +
+        `라이트+다크 둘 다 요구되면 colorDark 를 채워라.`;
+    const user = `인터뷰 답변:\n${answerBlock}\n\n위 스키마대로 JSON 을 출력하라.`;
+    return [{ role: 'system', content: system }, { role: 'user', content: user }];
+}
+function extractJson(text) {
+    let t = text.trim().replace(/^```[a-zA-Z]*\s*/, '').replace(/\s*```$/, '').trim();
+    const a = t.indexOf('{'), b = t.lastIndexOf('}');
+    if (a >= 0 && b > a)
+        t = t.slice(a, b + 1);
+    return JSON.parse(t);
+}
+const okHex = (v) => typeof v === 'string' && HEX_RE.test(v);
+function mergeAiSystem(sys, j) {
+    const cs = (o, base) => {
+        const x = (o ?? {});
+        const p = (k) => (okHex(x[k]) ? x[k] : base[k]);
+        return { bg: p('bg'), surface: p('surface'), surfaceAlt: p('surfaceAlt'), ink: p('ink'), sub: p('sub'), line: p('line'), accent: p('accent'), accentText: p('accentText') };
+    };
+    const st = (j.state ?? {});
+    const sc = (j.scale ?? {});
+    return {
+        color: {
+            primary: j.primaryMode === 'dark' ? 'dark' : 'light',
+            light: cs(j.colorLight, sys.color.light),
+            dark: j.colorDark ? cs(j.colorDark, sys.color.dark ?? sys.color.light) : sys.color.dark,
+            state: {
+                success: okHex(st.success) ? st.success : sys.color.state.success,
+                warning: okHex(st.warning) ? st.warning : sys.color.state.warning,
+                danger: okHex(st.danger) ? st.danger : sys.color.state.danger,
+                info: okHex(st.info) ? st.info : sys.color.state.info,
+            },
+        },
+        type: {
+            family: ['sans', 'serif', 'rounded', 'mono'].includes(j.font) ? j.font : sys.type.family,
+            scale: {
+                display: typeof sc.display === 'number' ? sc.display : sys.type.scale.display,
+                title: typeof sc.title === 'number' ? sc.title : sys.type.scale.title,
+                body: typeof sc.body === 'number' ? sc.body : sys.type.scale.body,
+                caption: typeof sc.caption === 'number' ? sc.caption : sys.type.scale.caption,
+            },
+            weightBold: sys.type.weightBold,
+        },
+        space: { ...sys.space, density: ['compact', 'cozy', 'spacious'].includes(j.density) ? j.density : sys.space.density },
+        shape: {
+            ...sys.shape,
+            radiusCard: typeof j.radiusCard === 'number' ? Math.max(0, Math.min(24, j.radiusCard)) : sys.shape.radiusCard,
+            radiusBtn: typeof j.radiusCard === 'number' ? Math.max(4, Math.round(j.radiusCard * 0.7)) : sys.shape.radiusBtn,
+            shadow: ['none', 'soft', 'strong'].includes(j.shadow) ? j.shadow : sys.shape.shadow,
+        },
+        a11y: {
+            highContrast: typeof j.highContrast === 'boolean' ? j.highContrast : sys.a11y.highContrast,
+            colorblindSafe: typeof j.colorblindSafe === 'boolean' ? j.colorblindSafe : sys.a11y.colorblindSafe,
+            notes: typeof j.a11yNotes === 'string' ? j.a11yNotes : sys.a11y.notes,
+        },
+    };
+}
+function recordFrom(ans, sys, aiRationale) {
+    const rationale = aiRationale?.trim() || rationaleFor(ans, sys);
+    return { system: sys, guide: deriveGuide(sys), rationale, styleTileHtml: styleTileHtml(sys), status: 'proposed' };
+}
+export async function generateDesignSystem(documentId) {
+    const doc = repo.getDocument(documentId);
+    if (!doc)
+        throw new Error('document not found');
+    const ans = answersOf(documentId);
+    let sys = buildSystem(ans);
+    let aiRationale;
+    if (!(config.aiStub || config.managedTier)) {
+        try {
+            const cfg = getModelConfig('design-system');
+            const provider = resolveProvider(cfg.provider);
+            let text = '';
+            for await (const d of provider.streamChat({ model: cfg.model, maxTokens: Math.max(cfg.maxTokens, 2500), messages: buildMessages(ans) }))
+                text += d;
+            const j = extractJson(text);
+            sys = mergeAiSystem(sys, j);
+            if (typeof j.rationale === 'string')
+                aiRationale = j.rationale;
+        }
+        catch { /* 결정적 결과 유지 */ }
+    }
+    const rec = recordFrom(ans, sys, aiRationale);
+    repo.setSetting(key(doc.project_id), rec);
+    return rec;
+}
+// ── P2: 방향 탐색 — 성격만 다른 3방향안(강조색·상태색·모드 유지) ──────────────
+export function exploreDesignSystems(documentId) {
+    const doc = repo.getDocument(documentId);
+    if (!doc)
+        throw new Error('document not found');
+    const ans = answersOf(documentId);
+    const primary = buildSystem(ans); // 답변 그대로 = 균형안
+    const acc = primary.color.light.accent;
+    // 강조색·상태색·모드·접근성은 3안 공통 유지, 성격(프리셋)만 다르게.
+    const norm = (s) => {
+        s.color.light.accent = acc;
+        if (s.color.dark)
+            s.color.dark.accent = acc;
+        s.color.state = primary.color.state;
+        s.color.primary = primary.color.primary;
+        s.color.dark = primary.color.dark;
+        s.a11y = primary.a11y;
+        return s;
+    };
+    const recs = [
+        recordFrom(ans, primary, '균형 — 강조색 유지, 중립적 균형.'),
+        recordFrom(ans, norm(buildSystem(ans, 'warm')), '부드러움 — 강조색 유지, 여유·둥근 모서리·따뜻한 표면.'),
+        recordFrom(ans, norm(buildSystem(ans, 'mono')), '선명함 — 강조색 유지, 촘촘·각진.'),
+    ];
+    repo.setSetting(candKey(doc.project_id), recs);
+    return recs;
+}
+export function selectDesignSystemCandidate(documentId, index) {
+    const doc = repo.getDocument(documentId);
+    if (!doc)
+        throw new Error('document not found');
+    const recs = repo.getSetting(candKey(doc.project_id)) ?? [];
+    const rec = recs[index];
+    if (!rec)
+        throw new Error('candidate not found');
+    const chosen = { ...rec, status: 'proposed' };
+    repo.setSetting(key(doc.project_id), chosen);
+    return chosen;
+}
+export function acceptDesignSystem(documentId) {
+    const doc = repo.getDocument(documentId);
+    if (!doc)
+        throw new Error('document not found');
+    const rec = getDesignSystem(doc.project_id);
+    if (!rec)
+        throw new Error('no design system to accept');
+    saveStyleGuide(doc.project_id, rec.guide);
+    const next = { ...rec, status: 'accepted' };
+    repo.setSetting(key(doc.project_id), next);
+    return next;
+}
+/** 스타일 타일 — 시스템을 색 역할·상태색·타입 스케일·여백·컴포넌트(미디어 그리드 포함)로 결정적 렌더. */
+export function styleTileHtml(s) {
+    const c = s.color[s.color.primary] ?? s.color.light;
+    const font = s.type.family === 'serif' ? 'Georgia, serif' : s.type.family === 'mono' ? 'ui-monospace, Menlo, monospace' : '-apple-system, system-ui, sans-serif';
+    const sh = s.shape.shadow === 'none' ? 'none' : s.shape.shadow === 'strong' ? '0 6px 20px rgba(0,0,0,.14)' : '0 1px 3px rgba(0,0,0,.07)';
+    const roles = [['bg', c.bg], ['surface', c.surface], ['ink', c.ink], ['sub', c.sub], ['line', c.line], ['accent', c.accent]];
+    const states = [['성공', s.color.state.success, '✓'], ['경고', s.color.state.warning, '⚠'], ['위험', s.color.state.danger, '✕'], ['정보', s.color.state.info, 'ℹ']];
+    const swatch = (n, col) => `<div class="sw"><span class="chip" style="background:${col}"></span><b>${n}</b><code>${col}</code></div>`;
+    const stateBadge = ([n, col, g]) => `<span class="badge" style="color:${col};border-color:${col}"><i style="background:${col}"></i>${g} ${n}</span>`;
+    const spaceBar = (v) => `<div class="spx"><span style="width:${v}px"></span><code>${v}</code></div>`;
+    const thumb = (on) => `<div class="thumb${on ? ' on' : ''}"><div class="thumb-img"></div><div class="thumb-cap">시안 ${on ? '●' : '○'}</div></div>`;
+    const darkStrip = s.color.dark
+        ? `<h4>다크 세트</h4><div class="darkstrip" style="background:${s.color.dark.bg}">${['bg', 'surface', 'ink', 'sub', 'line', 'accent'].map((k) => `<span style="background:${s.color.dark[k]}"></span>`).join('')}<b style="color:${s.color.dark.ink}">Aa 가나다</b></div>`
+        : '';
+    const a11yLine = (s.a11y.highContrast || s.a11y.colorblindSafe || s.a11y.notes)
+        ? `<h4>접근성</h4><p class="a11y">${[s.a11y.highContrast ? '고대비' : '', s.a11y.colorblindSafe ? '색맹 안전 — 상태는 색+글리프(●✓⚠)로' : '', s.a11y.notes].filter(Boolean).join(' · ')}</p>`
+        : '';
+    return `<!doctype html><html lang="ko"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><style>
+  :root{--ac:${c.accent};--act:${c.accentText};--bg:${c.bg};--sf:${c.surface};--sf2:${c.surfaceAlt};--ink:${c.ink};--sub:${c.sub};--ln:${c.line};--rc:${s.shape.radiusCard}px;--rb:${s.shape.radiusBtn}px;--sh:${sh}}
+  *{box-sizing:border-box;margin:0}body{background:var(--bg);color:var(--ink);font-family:${font};padding:22px;line-height:1.5}
+  h4{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--sub);margin:22px 0 9px;font-weight:700}h4:first-child{margin-top:0}
+  .grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:8px}
+  .sw{background:var(--sf);border:1px solid var(--ln);border-radius:var(--rc);padding:9px}.sw .chip{height:30px;border-radius:calc(var(--rc) - 2px);border:1px solid var(--ln);display:block;margin-bottom:6px}.sw b{font-size:12px}.sw code{font-size:10px;color:var(--sub);display:block}
+  .badges{display:flex;flex-wrap:wrap;gap:8px}.badge{display:inline-flex;align-items:center;gap:6px;border:1px solid;border-radius:999px;padding:3px 10px;font-size:12px;font-weight:600}.badge i{width:8px;height:8px;border-radius:50%;display:block}
+  .type .row{display:flex;align-items:baseline;gap:10px;border-bottom:1px solid var(--ln);padding:7px 0}.type .row code{font-size:10px;color:var(--sub);width:64px;flex:none}
+  .d{font-size:${s.type.scale.display}px;font-weight:${s.type.weightBold}}.t{font-size:${s.type.scale.title}px;font-weight:700}.b{font-size:${s.type.scale.body}px}.cap{font-size:${s.type.scale.caption}px;color:var(--sub)}
+  .space{display:flex;flex-direction:column;gap:5px}.spx{display:flex;align-items:center;gap:8px}.spx span{height:12px;background:var(--ac);opacity:.8;border-radius:3px;display:block}.spx code{font-size:10px;color:var(--sub);font-family:ui-monospace,monospace}
+  .comp{display:flex;flex-wrap:wrap;gap:9px;align-items:center}
+  .btn{border:0;border-radius:var(--rb);padding:9px 15px;font-size:13px;font-weight:700;font-family:inherit;box-shadow:var(--sh)}
+  .btn.p{background:var(--ac);color:var(--act)}.btn.s{background:var(--sf);color:var(--ink);border:1px solid var(--ln)}.btn.g{background:transparent;color:var(--ac)}
+  .input{background:var(--sf);border:1px solid var(--ln);border-radius:var(--rb);padding:9px 12px;color:var(--sub);font-size:13px;min-width:160px}
+  .chip2{border:1px solid var(--ln);border-radius:999px;padding:4px 12px;font-size:12px;color:var(--sub)}.chip2.on{background:var(--ac);color:var(--act);border-color:var(--ac)}
+  .sw2{width:42px;height:24px;border-radius:999px;background:var(--ac);position:relative}.sw2::after{content:'';position:absolute;top:3px;right:3px;width:18px;height:18px;border-radius:50%;background:#fff}
+  .card{background:var(--sf);border:1px solid var(--ln);border-radius:var(--rc);padding:13px;box-shadow:var(--sh);min-width:170px}.card b{font-size:14px}.card p{font-size:12px;color:var(--sub);margin-top:4px}
+  .media{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
+  .thumb{background:var(--sf);border:1px solid var(--ln);border-radius:var(--rc);overflow:hidden}.thumb.on{border-color:var(--ac);box-shadow:0 0 0 2px var(--ac)}
+  .thumb-img{height:56px;background:linear-gradient(135deg,var(--sf2),color-mix(in srgb,var(--ac) 22%,var(--sf)))}.thumb-cap{font-size:10px;color:var(--sub);padding:5px 7px}
+  .darkstrip{display:flex;align-items:center;gap:6px;border-radius:var(--rc);padding:10px}.darkstrip span{width:26px;height:26px;border-radius:6px;display:block}.darkstrip b{margin-left:auto;font-size:14px}
+  .a11y{font-size:12px;color:var(--sub);background:var(--sf2);border:1px solid var(--ln);border-radius:var(--rc);padding:8px 11px}
+  </style></head><body>
+  <h4>색 시스템 (역할)</h4><div class="grid">${roles.map(([n, col]) => swatch(n, col)).join('')}</div>
+  <h4>상태색</h4><div class="badges">${states.map(stateBadge).join('')}</div>
+  ${darkStrip}
+  <h4>타입 스케일</h4><div class="type">
+    <div class="row"><code>display</code><span class="d">화면 제목 Aa</span></div>
+    <div class="row"><code>title</code><span class="t">섹션 제목 가나다</span></div>
+    <div class="row"><code>body</code><span class="b">본문은 이 크기·서체로 읽힙니다. 색은 역할 체계로.</span></div>
+    <div class="row"><code>caption</code><span class="cap">캡션 · 보조 정보</span></div>
+  </div>
+  <h4>여백 체계 (4px 그리드)</h4><div class="space">${s.space.scale.map(spaceBar).join('')}</div>
+  <h4>컴포넌트</h4><div class="comp"><button class="btn p">주요 액션</button><button class="btn s">보조</button><button class="btn g">텍스트</button><span class="chip2 on">활성</span><span class="chip2">기본</span><span class="sw2"></span></div>
+  <div class="comp" style="margin-top:9px"><div class="card"><b>카드</b><p>표면·경계·라운드·그림자(${s.shape.shadow}).</p></div><div class="input">입력 필드</div></div>
+  <h4>미디어 · 시안 그리드 (여러 안 비교)</h4><div class="media">${thumb(true)}${thumb(false)}${thumb(false)}${thumb(false)}</div>
+  ${a11yLine}
+  </body></html>`;
+}

package/api/dist/lib/fixtures.js

@@ -0,0 +1,150 @@
+// Deterministic demo data (§2 stub, §sample seed) — the "회의실 예약" example.
+// Content only, NO ref_ids: the server numbers items in this exact order, so the
+// refs it assigns (F-01, F-01-1, PG-01, FLOW-01, FLOW-01.1 …) match the cross-
+// links written below. Same input → same output (AI·cost 0).
+// PRD sections seed → REQ-01..REQ-04 (§1.2 derivation order).
+export const PRD_SECTIONS = [
+    {
+        heading: '문제 정의',
+        body: '회의실 예약이 캘린더·메신저·구두로 흩어져 겹침과 노쇼가 잦다. 회의가 늘어져 다음 팀이 못 들어간다.',
+    },
+    {
+        heading: '목표',
+        body: '겹침 없는 즉시 예약과 종료 10분 전 알림·자동 반납으로 회의실 회전율을 높인다.',
+    },
+    {
+        heading: '자동 반납',
+        body: '연장하지 않으면 종료 시각에 자동으로 반납되고, 노쇼는 5분 후 자동 해제된다.',
+    },
+    {
+        heading: '운영 가시성',
+        body: '관리자는 이용률·노쇼·자동 반납 추이를 주간으로 본다. 대시보드 UI 신규 개발은 비범위.',
+    },
+];
+export const SPEC_FIXTURE = {
+    groups: [
+        {
+            title: '회의실 예약 생성',
+            features: [
+                {
+                    title: '시간대 선택 후 즉시 예약 확정',
+                    body: '· 시간대 선택 즉시 확정\n· 확정 시 내 예약(PG-04)에 기록',
+                    priority: 'P0',
+                    source: 'REQ-01',
+                    links: { reqs: ['REQ-01'], pages: ['PG-02', 'PG-03'], flows: ['FLOW-01'] },
+                },
+                {
+                    title: '겹침 검사 후 대안 시간 3개 제시',
+                    body: '· 겹침 감지 시 대안 3개 제시\n· 재선택 후 겹침 재판정',
+                    priority: 'P0',
+                    source: 'Q2',
+                    links: { reqs: ['REQ-01'], pages: ['PG-02'], flows: ['FLOW-01'] },
+                },
+                {
+                    title: '종료 10분 전 알림, 미연장 시 자동 반납',
+                    body: '· 종료 10분 전 알림 발송, 수신 채널은 PG-06에서 설정\n· 연장 없이 종료 시각 도달 → 자동 반납 + PG-04에 기록',
+                    priority: 'P1',
+                    source: 'Q3',
+                    links: { reqs: ['REQ-03'], pages: ['PG-06', 'PG-04'], flows: ['FLOW-02'] },
+                },
+            ],
+        },
+        {
+            title: '노쇼 처리',
+            features: [
+                {
+                    title: '시작 5분 내 체크인 없으면 예약 해제',
+                    body: '· 시작 5분 내 체크인 없으면 자동 해제\n· 해제 이력은 PG-04에 표시',
+                    priority: 'P1',
+                    source: 'REQ-02',
+                    links: { reqs: ['REQ-02'], pages: ['PG-04'], flows: ['FLOW-03'] },
+                },
+                {
+                    title: '반복 노쇼 사용자 주간 리포트',
+                    body: '· 반복 노쇼 사용자를 주간으로 집계',
+                    priority: 'P2',
+                    source: 'PRD §4',
+                    links: { reqs: ['REQ-02'], pages: ['PG-04'] },
+                },
+            ],
+        },
+        {
+            title: '관리자 통계',
+            features: [
+                {
+                    // Intentionally orphaned (no reqs link) → seeds a W-ORPHAN-SPEC in the demo.
+                    title: '이용률·노쇼·자동반납 집계',
+                    body: '· 이용률·노쇼·자동 반납을 주간 집계해 PG-05에 표시',
+                    priority: 'P2',
+                    source: 'PRD §4',
+                    links: { pages: ['PG-05'] },
+                },
+            ],
+        },
+    ],
+};
+export const IA_FIXTURE = {
+    pages: [
+        { title: '예약 홈', page_type: 'LIST', section: '예약', links: { features: ['F-01-1'] } },
+        { title: '회의실 상세', page_type: 'DETAIL', section: '예약', links: { features: ['F-01-1', 'F-01-2'] } },
+        { title: '예약 확인', page_type: 'FORM', section: '예약', links: { features: ['F-01-1'] } },
+        { title: '내 예약', page_type: 'LIST', section: '내 정보', links: { features: ['F-01-3', 'F-02-1', 'F-02-2'] } },
+        { title: '알림 설정', page_type: 'SETTINGS', section: '내 정보', links: { features: ['F-01-3'] } },
+        // Reached by no flow step → seeds a W-UNREACHED-PAGE in the demo.
+        { title: '관리자 통계', page_type: 'DASH', section: '관리자', links: { features: ['F-03-1'] } },
+    ],
+};
+export const FLOW_FIXTURE = {
+    flows: [
+        {
+            title: '예약 생성',
+            source: 'F-01 · 해피 패스 + 겹침 분기',
+            links: { features: ['F-01', 'F-01-1', 'F-01-2'] },
+            steps: [
+                { title: '예약 필요', node: 'start', page: null },
+                { title: '예약 홈', node: 'screen', page: 'PG-01' },
+                { title: '시간대 선택', node: 'screen', page: 'PG-02' },
+                { title: '겹침?', node: 'decision', page: null },
+                { title: '예약 확정', node: 'screen', page: 'PG-03' },
+                { title: '예약됨', node: 'end', page: null },
+                {
+                    title: '대안 3개 재선택',
+                    node: 'screen',
+                    page: 'PG-02',
+                    branch: { label: '예', from_step: 'FLOW-01.4' },
+                    note: '겹침? 재판정 (F-01-2)',
+                },
+            ],
+        },
+        {
+            title: '자동 반납',
+            source: 'F-01-3',
+            links: { features: ['F-01-3'] },
+            steps: [
+                { title: '종료 10분 전', node: 'start', page: null },
+                { title: '알림 수신', node: 'screen', page: 'PG-06' },
+                { title: '연장?', node: 'decision', page: null },
+                { title: '자동 반납 기록', node: 'screen', page: 'PG-04' },
+                { title: '반납됨', node: 'end', page: null },
+                {
+                    title: '시간 연장',
+                    node: 'screen',
+                    page: 'PG-02',
+                    branch: { label: '예', from_step: 'FLOW-02.3' },
+                    note: '예약 연장 후 종료',
+                },
+            ],
+        },
+        {
+            title: '노쇼 처리',
+            source: 'F-02',
+            links: { features: ['F-02', 'F-02-1'] },
+            steps: [
+                { title: '시작 5분 경과', node: 'start', page: null },
+                { title: '체크인?', node: 'decision', page: null },
+                { title: '예약 해제 기록', node: 'screen', page: 'PG-04' },
+                { title: '해제됨', node: 'end', page: null },
+            ],
+        },
+    ],
+};

package/api/dist/lib/gateway.js

@@ -0,0 +1,55 @@
+/**
+ * OpenAI 호환 게이트웨이(LiteLLM·Azure·사내 프록시) 자동 감지 유틸.
+ *  - 사용자가 `/v1` 을 붙였는지 몰라도 되게 경로를 자동 탐지한다.
+ *  - 게이트웨이의 `/models` 를 조회해 실제 사용 가능한 모델 목록을 돌려준다(드롭다운·테스트용).
+ * 특정 회사에 종속되지 않는다 — 넣은 base URL 의 게이트웨이를 그대로 조회한다.
+ */
+/** rawBase 에서 `/models` 가 응답하는 경로를 찾아 chatBase 와 모델 목록을 반환. 실패 시 null. */
+export async function probeGateway(rawBase, key, headers = {}) {
+    const b = rawBase.trim().replace(/\/+$/, '');
+    if (!b)
+        return null;
+    // (models 조회 URL, 그때의 chat base) 후보 — 이미 /v1 이면 그대로, 아니면 /v1 우선 후 루트.
+    const candidates = b.endsWith('/v1')
+        ? [[`${b}/models`, b]]
+        : [
+            [`${b}/v1/models`, `${b}/v1`],
+            [`${b}/models`, b],
+        ];
+    for (const [url, chatBase] of candidates) {
+        try {
+            const res = await fetch(url, {
+                headers: { authorization: `Bearer ${key}`, ...headers },
+            });
+            if (!res.ok)
+                continue;
+            const j = (await res.json());
+            const models = Array.isArray(j?.data)
+                ? j.data.map((m) => m?.id).filter((x) => typeof x === 'string' && x.length > 0)
+                : [];
+            return { chatBase, models };
+        }
+        catch {
+            // 다음 후보로
+        }
+    }
+    return null;
+}
+/** OpenRouter 공개 모델 목록 — 표준 OpenRouter(BYOK) 사용 시 드롭다운 채우기용.
+ *  listing 은 인증 불필요(키 있으면 계정 반영). 실패 시 빈 배열. */
+export async function fetchOpenRouterModels(key) {
+    try {
+        const res = await fetch('https://openrouter.ai/api/v1/models', {
+            headers: key ? { authorization: `Bearer ${key}` } : {},
+        });
+        if (!res.ok)
+            return [];
+        const j = (await res.json());
+        return Array.isArray(j?.data)
+            ? j.data.map((m) => m?.id).filter((x) => typeof x === 'string' && x.length > 0)
+            : [];
+    }
+    catch {
+        return [];
+    }
+}