[devfive-relay-c70423]

요약 / Summary

세 가지를 한 PR로 묶었습니다: (1) 입력 필드 포커스를 사용자가 보는 컨테이너 전체에 적용, (2) 필드 상태·모션 애니메이션 기본값과 시안 기반 모션 예측, (3) 약한 모델이 절차(URL·화면 컨펌)를 건너뛰지 못하도록 서버 측 게이트와 procedure 안내 강화.

바뀐 동작 / Changed behavior

1. 필드 포커스 = 보이는 박스 (generation + validation)

• Generator: Figma 필드 컴포넌트 세트(input, text field, textarea, search, select, combobox, dropdown, 입력, 검색)의 focus variant를 컨테이너의 _focusWithin으로 생성 (DEVUP_CODEGEN_FIELD_FOCUS_WITHIN info diagnostic). 루트가 native control이면 _focus 유지, 버튼은 그대로.
• Static (devup_ui_validate): input-focus-container, input-focus-duplicate-outline, input-focus-layout-shift (info, browser-required), input-focus-outline-removed, input-focus-moved-to-container (warning).
• Runtime (devup_runtime_audit): 새 input-focus check — 보이는 input/textarea/select를 click과 Tab으로 각각 포커스하고, 내부 기본 outline, 컨테이너를 감싸지 않는 ring, 컨테이너로 간 포커스, 크기/위치 변화를 실패 처리. disabled 필드는 목록에만 표시. auditPlan이 자동으로 계획에 넣음.

2. 애니메이션

• 필드 상태 전환: Figma prototype transition이 없는 필드 컴포넌트는 상태가 바꾸는 속성에만 transition="160ms ease-out" + transitionProperty 생성. transitionProperty는 이제 CSS kebab-case(border-color)로 출력 (기존에는 borderColor처럼 camelCase가 그대로 나갈 수 있었음).
• Static: input-state-transition (info, browser-required) — 포커스를 보여주는 박스에 transition이 없을 때.
• Runtime: input-focus check가 transition으로 덮이지 않은 포커스 변화(snap)를 실패 처리. 측정 전 settle 대기를 추가해 이전 상태의 전환 중간값을 읽지 않도록 함.
• 시안 기반 모션 예측: site:motion 질문의 권장 답이 "Predict from the design"({"motion":{"source":"predicted","implementation":"devup-ui-static-keyframes"}})으로 변경. status 완료 항목에 motion(선택한 모션의 keyframes가 소스에 없으면 missing)과 field-state-motion(필드가 있는 파일에 transition이 없으면 missing) 추가.

3. 절차 강제 (약한 모델 대응)

• devup_screen_plan confirm은 userApproval {via, userAnswer, approvedUrls} 없이는 아무것도 확정하지 않음. placeholder/알 수 없는 채널/URL 불일치도 거부하고 보여줄 표를 반환. devup_project_plan confirm도 같은 receipt 필요(URL 제외).
• 승인 receipt 없는 confirmed plan은 페이지 쓰기 export를 approval_required로 차단 (미리보기 export는 그대로 허용).
• 모든 devup_screen_plan 응답과 거부된 export 응답에 plan 파일에서 계산한 procedure 블록: step(5단계 중 위치), next(지금 할 단 하나의 호출), waitForUser, forbiddenNow.
• receipt는 plan에 기록되고 confirm/status/finalReport에 표시 (delegated 또는 receipt 없음은 "사용자 검토 안 됨"으로 보고).
• 서버 instructions, devup/devup-implementation-plan 스킬, delivery-quality, OpenCode 명령 문서에 hard stop과 procedure 규칙 추가. contract identifier field-focus-on-visual-container, user-approved-plan-before-implementation (developmentContract v6), manifest 해시 갱신.

검증 / Verification

로컬에서 실행한 것과 실행하지 않은 것을 구분합니다.

• 자동 테스트 (로컬, Windows): cargo test --workspace --no-fail-fast 2340 pass / 0 fail. 새 테스트: 필드 포커스/전환 생성, 정적 규칙 6종, approval 거부·URL 불일치·delegated·export 차단, procedure 단계별 출력, motion/field-state-motion 완료 항목.
• Lint/format: cargo clippy --workspace --all-targets -- -D warnings clean, cargo fmt --all -- --check clean.
• 브라우저 (Playwright Chromium, 로컬): harness/runtime-audit npm test 109 pass / 0 fail / 1 skip. fixtures/fields.html에서 click·Tab 포커스를 실제로 판정 (eased box pass, snap/inner outline/shift/tabIndex container fail).
• Flaky 관찰: composite_export::r3_cancelled_client_recovers_retained_asset_job가 한 번 실패 후 재실행 3회 모두 통과 (asset job 타이밍 테스트, 이번 변경과 무관해 보임).
• CI: 아직 실행 전 — 이 PR의 CI 결과를 확인해야 합니다.
• 실제 사이트/약한 모델 E2E: 미검증.

한계 / Limits

• 서버는 사람이 실제로 답했는지 증명할 수 없습니다. receipt는 placeholder·형식·URL 일치를 검사할 뿐이며, 모델이 사용자 답을 지어내면 막지 못합니다. 대신 receipt가 기록·보고되어 사후에 드러납니다.
• 정적 규칙은 같은 파일 안, 3단계 조상까지만 봅니다. <Input> 같은 커스텀 컴포넌트 내부는 인식하지 못해 브라우저 check가 최종 판단입니다.
• motion/field-state-motion 완료 항목은 소스 문자열 휴리스틱(keyframes/transition 존재)입니다. 실제 동작 증명은 runtime audit의 motion/input-focus check가 합니다.
• 실제 약한 모델(GPT 계열 등)로 end-to-end 실행해 본 검증은 하지 않았습니다.
• site:motion 권장 답 변경으로, 새로 draft되는 plan은 기본적으로 모션 구현을 요구합니다 (사용자가 "None"을 고르면 not-applicable).

🤖 Generated with Claude Code

---

Submitted via Devfive hub. Employee: ; device: 3099154426bffbeef8b62999b80bb038