Merge branch 'fix/test-home-menu-integration' into main

2026-10-21 06:10:06 +09:00
commit b4e0771dd0
@@ -0,0 +1,169 @@
 # SW 테스트 정합성 개선 — Storybook 회귀 기준선 유지 (2026-10-20)
 > 범위: 테스트 코드와 이 문서만 다룹니다. `@hm-design/sw` 제품 코드·공개 API·Storybook Story·디자인은 바꾸지 않았습니다.
 > 브랜치 `fix/test-home-menu-integration`, 기준 main `553e4df`(Merge `feature/sw-package`). 과거 QA 증거 폴더는 수정하지 않았습니다.
 > 실행 환경: Node.js 22.23.2 / npm 10.9.8, Chrome 155.0.8059.85(headless), Playwright 1.62.1(Codex 런타임, `playwright-runtime.mjs` 탐색 순서 5번).
 ## 1. 결과 요약
 같은 `storybook-static`(Node 22.23.2로 `npm run build-storybook`, 패키지 build 포함)에서 수정 전 테스트(`553e4df` 버전)와 현재 테스트를 각각 실행했습니다.
 | 테스트 | 수정 전 (`553e4df`) | 수정 후 (`20ed2f2`) | 관련 Commit |
 |---|---|---|---|
 | `home-menu-integration.browser.mjs` | 22/23 (FAIL 1) | **23/23** | `7fd7342` |
 | `overview.browser.mjs` | 51/54 (FAIL 3) | **54/54** | `522ecbd`, `20ed2f2` |
 | `overview.browser.mjs … overlays` | 17/20 (같은 FAIL 3) | **20/20** | `522ecbd`, `20ed2f2` |
 | `storybook-unused-removal.browser.mjs` | 88/93 (FAIL 5) | **93/93** | `20ed2f2` |
 모든 FAIL은 과거 시점 값에 고정된 단언이었고, 기능(브라우저 동작) 실패는 없었습니다. 수정은 단언을 지우거나 건너뛰지 않고, 기준선은 그대로 둔 채 **승인된 이후 변경만** 명시적으로 허용하는 방식입니다.
 ## 2. Home Menu 기존 실패 1건 (`7fd7342`)
 - 실패 항목: `without homeMenu: logo click calls onHomeClick, renders no menu, no aria-expanded`
 - 실제 오류: `sw-header--overview`의 로고를 누르자 `[SWHeader Overview] homeMenuOpen(true, home)`이 기록되고 홈 메뉴가 열림.
 - 원인: `170a5c2`(홈 메뉴 Header 통합, 사용자 요청)부터 Overview가 `homeMenu`를 전달합니다(`docs/sw/sw-header-usage.md` "Overview의 로고도 같은 홈 메뉴"). 테스트가 "homeMenu 없는 Header"의 대상으로 Overview를 계속 열고 있었습니다.
 - 해결: 대상만 `sw-header--logo-slot`의 첫 Header(`figmaArgs` + `callbacks`, `homeMenu` 없음)로 바꾸고, Callback 판정 문자열을 그 Header의 로그(`[SWHeader] home`)로 맞췄습니다. "메뉴 없음 · `aria-expanded` 없음 · `onHomeClick`만 호출" 단언은 그대로입니다.
 ## 3. Overview 기존 실패 3건 (`522ecbd`, `20ed2f2`)
 기준선은 `50bf5bd`와 그 시점의 `before-index.json`으로 유지합니다.
 | 실패 항목(수정 전) | 원인 | 해결 |
 |---|---|---|
 | `24 retained Story IDs, names and tags; only approved Dropdown retirements` | 이후 승인된 삭제(속성창 5개, 미사용 9개), Popup 이동, `verification` 태그, 홈 메뉴·통합 개선 Story 추가로 SW/Header가 20개가 됨 | 24개에서 승인된 삭제·이동을 빼고 승인된 태그를 적용한 뒤 승인된 추가 ID를 더한 **20개**와 ID·이름·태그가 정확히 같아야 PASS. 이동한 Story는 title이 `SW/Popup`인지 확인 |
 | `retained non-Overview declarations byte-identical` | `ResponsiveMore`(170a5c2), `WindowMoveMotion`·`KGuide`(2b0e1a2) 변경, 미사용 Story 선언 삭제, `PropertyPanelCompare`의 `sw-property-panel.stories.tsx` 이동 | 변경 선언은 **승인 Commit의 내용과 byte 단위로 같을 때만** 허용, 삭제는 승인된 삭제 ID일 때만, 이동 선언은 새 파일에서 승인 Commit 내용과 비교. 그 밖의 선언은 계속 `50bf5bd`와 동일해야 함 |
 | `package production source untouched except the integrated-improvement files` | `50bf5bd` 이후 승인되어 main에 병합된 `packages/sw/src` 변경 | `approvedMainCommit`(553e4df)과 비교해 통합 개선 파일 외 차이가 없어야 PASS. `50bf5bd` 이후 차이 개수는 `sinceBaseline`으로 기록만 함 |
 `20ed2f2`에서는 위 목록(태그·추가 ID·승인 선언·이동 선언)을 `storybook-inventory.mjs`로 옮겨 Overview와 미사용 검사가 같은 목록을 쓰게 했습니다. Overlays 모드는 같은 앞부분 검사를 공유하므로 같은 3건이 함께 해결됩니다.
 ## 4. Storybook 미사용 검사 기존 실패 5건 (`20ed2f2`)
 기준선은 `c8e5fbe`의 `full-index-before.json`으로 유지합니다.
 | 실패 항목(수정 전) | 해결 |
 |---|---|
 | `19 -> 10 retained SW/Header Stories, 338 -> 329 total plus only the integrated-improvement Stories` | 338 → 329와 19 → 10은 그대로 단언. 이후 추가는 `approvedAddedStoryIds`(통합 개선·홈 메뉴·Footer·Viewer·Theme)와 **정확히 같은 집합**일 때만 PASS. 승인되지 않은 추가(`unapproved`)·누락(`missing`)을 결과에 기록 |
 | `retained SW IDs, names, titles, tags and order unchanged` | 유지 10개의 ID·이름·title·tags·순서를 비교하되, 승인된 `verification` 태그와 Popup 이동만 반영 |
 | `every non-removed index entry identical (docs and other packages included)` | SW 밖 항목은 값·순서 모두 동일, 유지 SW 항목은 승인 변경만 반영해 동일, SW 블록은 Center Graphic 바로 뒤에 연속(2b0e1a2 storySort) |
 | `retained exports (Stories and ComposedDemo) byte-identical` | 변경·추가 Export는 승인 Commit 내용과 같을 때만, 이동 Export는 새 파일에서 비교, 나머지는 `c8e5fbe`와 동일 |
 | `other packages, Overview, Dropdown CSF, assets and Storybook config untouched` | 같은 경로가 `approvedMainCommit`과 달라서는 안 됨(통합 개선 파일 제외). `c8e5fbe` 이후 차이는 `sinceBaseline`으로 기록 |
 ## 5. 관련 Commit
 | Commit | 내용 | 파일 |
 |---|---|---|
 | `7fd7342` | test(sw): align home menu integration with current stories | `home-menu-integration.browser.mjs` |
 | `522ecbd` | test(sw): align overview regression checks with approved changes | `overview.browser.mjs` |
 | `20ed2f2` | test(sw): align storybook inventory checks with approved changes | `storybook-inventory.mjs`, `overview.browser.mjs`, `storybook-unused-removal.browser.mjs` |
 ### 5.1 승인 목록에 반영된 Story 변경 이력
 모두 사용자 요청으로 진행되어 main `553e4df`에 포함된 Commit입니다(`git merge-base --is-ancestor`로 확인).
 | Commit | 변경 | `storybook-inventory.mjs` 항목 |
 |---|---|---|
 | `50bf5bd` | 정리 1단계: Story 5개 삭제 | `retiredStage1Ids` |
 | `9482d45`, `c705a1f` | Dropdown 4개 통합, `composed-controls` → Dropdown(SW/Header 바로 아래) | `retiredDropdownIds`, `retainedInventory` |
 | `c8e5fbe` | 속성창 중복 5개 삭제, 4개 비교로 통합 | `retiredPropertyPanelIds` |
 | `5faa1f1` | 미사용 SW Header 시연 9개 삭제 | `retiredUnusedDemoIds` |
 | `55179b4`, `e8409ef` | 통합 개선 0.2.0 Story 추가, Options를 SW/Header로 통합 | `integratedStoryIds` |
 | `170a5c2` 등 홈 메뉴 병합 | SW/Home Menu → SW/Header(`home-menu`, `home-menu-*`), Overview·ResponsiveMore 변경 | `homeMenuSidebarIds`, `movedHomeMenuIds`, `approvedHeaderDeclarations` |
 | `6cf8854`, `7f42923`, `41e963a` | SW Footer, Viewer, Theme Story 추가 | `footerStoryIds`, `viewerStoryIds`, `themeStoryIds` |
 | `7f42923` | SW/Tool Story 메뉴 삭제(`SWToolButton`·`SWToolGroup`은 공개 유지) | `retiredToolIds` |
 | `126a35d` | Footer `기본 Footer`·`States` Story 삭제(전체 Footer 섹션으로 통합) | `retiredFooterIds` |
 | `2b0e1a2` | 사이드바 단순화: `verification` 태그 2개, Property Panel 비교 SW/Popup 이동, 홈 메뉴 Figma 비교·중복 Variant 6개 삭제 | `verificationTaggedIds`, `movedToPopupIds`, `movedHeaderDeclarations`, `retiredHomeMenuCompareIds` |
 ## 6. 변조 검증
 수정한 단언이 "무조건 PASS"가 아닌지 확인하려고 현재 테스트(`20ed2f2`)에 일부러 승인되지 않은 변경을 넣고 실행한 뒤 원상 복구했습니다. 복구는 백업 파일로 했고 매번 `git diff`가 비어 있음(소스) 또는 `index.json` SHA-256 일치(빌드 산출물)를 확인했습니다.
 ### 6.1 Story 목록 변조 (`storybook-static/index.json`, 재빌드 없음)
 | 시나리오 | Overview | Overlays | 미사용 검사 | Home Menu |
 |---|---|---|---|---|
 | 승인되지 않은 SW/Header Story 추가 | 53/54 — 목록 검사 FAIL | 19/20 — 목록 FAIL | 31/34 — 개수·전체 항목 FAIL, 가짜 Story 렌더 중단 | 23/23 (목록 비검사) |
 | 유지 Story(`logo-slot`) 삭제 | 53/54 — 목록 FAIL | 19/20 — 목록 FAIL | 89/92 — 개수·유지 항목·전체 항목 FAIL | 중단(Logo Slot Header 대기 시간 초과) |
 | 유지 Story에 `verification` 태그 추가 | 53/54 | 19/20 | 91/93 — 유지 항목·전체 항목 FAIL | 23/23 |
 | 유지 Story(`document-dropdown`) title 이동 | 53/54 | 19/20 | 90/92 — 유지 항목·전체 항목 FAIL | 23/23 |
 | 유지 Story(`responsive-more`) 이름 변경 | 53/54 | 19/20 | 91/93 — 유지 항목·전체 항목 FAIL | 23/23 |
 ### 6.2 소스 변조 (작업 트리, 재빌드 없음, 한 번에 4건)
 | 변조 | 검출 |
 |---|---|
 | 유지 선언 `LogoSlot`의 섹션 제목 변경 | Overview·Overlays 선언 검사 FAIL(`LogoSlot`), 미사용 검사 Export 검사 FAIL(`changed: LogoSlot`) |
 | 승인 선언 `ResponsiveMore`(170a5c2)를 승인 내용과 다르게 변경 | 같은 두 검사에서 `ResponsiveMore` FAIL — 승인 목록은 Commit 내용에 고정되며 와일드카드가 아님 |
 | 통합 개선 목록 밖 패키지 파일(`sw-footer/SWFooterParts.tsx`) 변경 | Overview·Overlays 소스 검사 FAIL(`unapproved`), 미사용 검사 경로 검사 FAIL |
 | `.storybook/main.ts` 변경 | 미사용 검사 경로 검사 FAIL(`unexpected`). Overview는 이 경로를 원래 검사하지 않음 |
 결과: Overview 52/54, Overlays 18/20, 미사용 검사 91/93, Home Menu 23/23. 다른 검사는 그대로 PASS였습니다.
 ### 6.3 동작 변조 (Story 수정 후 재빌드)
 `sw-header--logo-slot` 첫 Header에 `homeMenu={{ sections: OVERVIEW_HOME_MENU }}`를 임시로 넣고 Storybook을 다시 build했습니다. Home Menu는 **22/23**으로 `without homeMenu: logo click calls onHomeClick, renders no menu, no aria-expanded`만 FAIL(로고 클릭 시 `onHomeClick` 기록 없음)이었습니다. 원본으로 되돌린 뒤 다시 build했고, 그 빌드에서 §7을 실행했습니다.
 ## 7. 회귀 테스트 결과 (Node 22.23.2, 수정 후)
 | 테스트 | 결과 |
 |---|---|
 | `npm run build-storybook`(prebuild: theme defaults 확인, 5개 패키지 build) | PASS |
 | `home-menu-integration` | 23/23 |
 | `overview` | 54/54 |
 | `overview … overlays` | 20/20 |
 | `storybook-unused-removal` | 93/93 |
 | `npm run check:ai-docs` | PASS (2 shared files × 4 packages, catalog·링크 일치) |
 | `node packages/sw/tests/ai-docs.check.mjs` | 46/46 |
 같은 빌드에서 이번 범위 밖의 기존 테스트 4종은 아직 과거 기준으로 실패합니다(§10).
 ## 8. Story 추가·삭제·이동 시 승인 목록 관리
 승인 목록은 `packages/sw/tests/storybook-inventory.mjs` 하나에서 관리합니다. Story 변경을 사용자가 승인한 같은 변경(또는 바로 뒤 테스트 정렬 변경)에서 아래 목록을 갱신하고, 각 항목 옆 주석에 승인 Commit과 사유를 적습니다. 값은 실제 Story ID·선언 이름·Commit SHA(전체 40자)만 씁니다.
 | 변경 | 갱신할 항목 |
 |---|---|
 | SW Story 추가 | 해당 영역 목록(`footerStoryIds`, `viewerStoryIds`, `themeStoryIds`, `homeMenuSidebarIds`, `integratedStoryIds` 등)에 ID 추가 → `approvedAddedStoryIds`에 자동 포함. 새 영역이면 새 목록을 만들고 `approvedAddedStoryIds`에 연결 |
 | SW Story 삭제 | `retired…Ids` 목록에 ID 추가(예: `retiredFooterIds`, `retiredHomeMenuCompareIds`), 추가 목록에서 제외되는지 확인. `sw-header.stories.tsx`의 Story를 지우면 Overview 선언 검사는 `retiredPropertyPanelIds`·`retiredUnusedDemoIds`의 삭제만, 미사용 검사의 Export 검사는 그 스크립트의 `removedExports` 9개만 허용하므로 새 삭제는 두 검사도 함께 갱신해야 함 |
 | Story 이동(title 변경, ID 유지) | `movedToPopupIds` 같은 이동 목록과 `withApprovedEntryChanges`의 변환(title·importPath), 선언이 다른 파일로 가면 `movedHeaderDeclarations`(새 파일, 승인 Commit) |
 | 태그 변경(`verification` 등) | `verificationTaggedIds`(또는 해당 변환을 `withApprovedEntryChanges`에 추가) |
 | `sw-header.stories.tsx` 선언 변경·추가 | `approvedHeaderDeclarations`에 `선언 이름: 승인 Commit`. 검사는 현재 선언이 그 Commit의 내용과 byte 단위로 같은지 봄 |
 | Story ID 변경 | ID 변경은 삭제 + 추가로 다룸(이전 ID는 `retired…`, 새 ID는 추가 목록). 승인 없이 ID를 바꾸지 않음 |
 원칙:
 - 승인되지 않은 Story·제품 소스 변경을 목록에 넣어 테스트를 통과시키지 않습니다. 목록은 사용자 승인 기록입니다.
 - 기준선 파일(`before-index.json`, `full-index-before.json`)과 과거 QA 폴더는 고치지 않습니다. 새 실행은 항상 새 증거 폴더에 저장합니다(기본 경로로 실행하면 일부 스크립트가 과거 증거를 덮어씀).
 - 목록을 바꾼 뒤에는 Storybook을 다시 build하고 Overview(두 모드)·미사용 검사를 실행해 PASS를 확인합니다. 가능하면 §6.1처럼 가짜 Story 하나를 넣어 FAIL이 나는지도 확인합니다.
 ## 9. 향후 main 병합 시 기준 갱신 절차
 `approvedMainCommit`은 "Story와 제품 소스 변경이 모두 승인된 main 병합"을 가리키며, Overview·미사용 검사는 보호 경로(Overview: `packages/sw/src`, 미사용 검사: SW ai/package 파일, 다른 패키지, Overview, Dropdown CSF, assets, `.storybook`)가 이 Commit과 같아야 PASS입니다(통합 개선 파일 제외). 역할과 갱신 조건은 같은 파일의 주석에도 적었습니다.
 > **자동 변경 금지:** main에 새 HEAD가 생겼다는 이유만으로 `approvedMainCommit`을 바꾸지 않습니다. 이 값을 자동으로 갱신하는 스크립트·Workflow는 없으며, 아래 절차를 거친 검토된 테스트 전용 Commit에서만 바뀝니다. 현재 값은 `553e4df`(`553e4df4a865aaf6514b1c2b86cb2e3e9a658e5f`)이며 이 문서 작성 시점에 변경하지 않았습니다.
 1. 병합할 브랜치의 Story·제품 소스 변경이 Commit 단위로 모두 사용자 승인을 받았는지 확인합니다. 승인되지 않은 변경이 있으면 기준을 옮기지 않습니다.
 2. 병합 전 브랜치에서 §8의 승인 목록을 갱신하고, 테스트가 PASS인지 확인합니다.
 3. main에 병합합니다. Squash·Rebase 병합이면 SHA가 바뀌므로 `approvedHeaderDeclarations`·`movedHeaderDeclarations`의 Commit을 main에 실제로 들어간 SHA로 다시 맞춥니다.
 4. 병합 Commit의 전체 SHA로 `approvedMainCommit`을 바꾸는 **테스트 전용 Commit**을 만듭니다. 이 Commit은 보호 경로를 건드리지 않습니다.
 5. Node 22.23.2에서 `npm run build-storybook` 후 Home Menu, Overview(두 모드), 미사용 검사를 새 증거 폴더로 실행합니다. 하나라도 FAIL이면 기준을 옮기지 말고 원인(미승인 변경 또는 목록 누락)을 확인합니다.
 6. 실행 결과와 갱신 사유를 `docs/sw/`의 보고서에 남깁니다. 기존 보고서와 증거는 고치지 않습니다.
 ## 10. 남은 문제
 - 이번 범위 밖 기존 테스트 4종은 같은 빌드에서 과거 기준으로 실패합니다(수정 전 측정, 이 Commit에서 고치지 않음): `dropdown-consolidation` 223/228(목록·선언·경로 5건), `storybook-cleanup-stage1` 29/34(목록·선언·경로 4건 + 삭제된 `sw-header--dynamic-controls`에서 중단), `detail-buttons verify`(삭제된 `sw-header--composition`에서 중단), `property-panel-comparison verify` 50/52(목록 2건) 후 삭제된 `sw-header--property-panel`에서 예외 종료. 별도 작업으로 다룹니다.
 - 통합 개선 파일 예외: Overview·미사용 검사는 `integratedChangedFiles`가 `approvedMainCommit`과 달라도 허용합니다(그 파일은 통합 개선 suite가 검증). 그 suite를 함께 실행하지 않으면 이 파일들의 미승인 변경은 두 검사로는 드러나지 않습니다.
 - 과거 QA 폴더를 기본 증거 경로로 쓰는 스크립트가 있습니다. 반드시 새 증거 폴더를 지정해야 합니다.
 ## 11. 재현
 ```bash
 npm run build-storybook
 node packages/sw/tests/home-menu-integration.browser.mjs <새 폴더>/home
 node packages/sw/tests/overview.browser.mjs <before-index.json을 복사한 새 폴더>
 node packages/sw/tests/overview.browser.mjs <before-index.json을 복사한 새 폴더> overlays
 node packages/sw/tests/storybook-unused-removal.browser.mjs <새 폴더>/unused
 npm run check:ai-docs
 node packages/sw/tests/ai-docs.check.mjs
 ```
 Overview는 증거 폴더의 `before-index.json`을 읽으므로 `docs/sw/storybook-overview-qa/before-index.json`을 새 폴더에 복사한 뒤 실행합니다. 이번 실행의 결과 JSON·로그는 저장소 밖 임시 폴더에 두었고(`*.log`는 Git 제외 대상), 주요 수치는 위 표에 옮겼습니다.
@@ -0,0 +1,210 @@
 # SW 잔여 개선 통합 작업 (무인 작업, 2026-10-21)
 > 브랜치 `fix/test-home-menu-integration`, 시작 HEAD `96f7a84`(main `553e4df` + 테스트 정렬 3건 + 기준선 문서). §1–§10 작성 시점에는 Commit하지 않았고, 최종 마무리(§11)에서 기능별로 Commit했습니다.
 > 실행 환경: Node.js 22.23.2 / npm 10.9.8, Chrome 155.0.8059.85(Playwright 1.62.1), Firefox 148.0.2(WebDriver BiDi). 결과 JSON·로그는 저장소 밖 임시 폴더에 두었고 기존 QA 폴더는 쓰지 않았습니다.
 > 이전 단계: [회귀 기준선 문서](sw-test-regression-baseline-2026-10-20.md). `approvedMainCommit`은 `553e4df` 그대로입니다.
 ## 1. 단계별 결과
 | 단계 | 상태 | 요약 |
 |---|---|---|
 | 1. 테스트 정합성 | PASS | 기존 테스트 4종 미커밋 수정 유지·재검증, `menuOrder`·`hiddenControls` 공백을 테스트 전용 Fixture로 해소(Story 추가 없음) |
 | 2. Firefox 안정화 | PASS | `Continuous` 잘림 원인 수정(CSS 1곳), Hover 흔들림 원인(부드러운 스크롤) 수정, 픽셀 비교 노이즈 원인 수정 |
 | 3. 중복 개선 | PARTIAL | 키보드 Roving Focus 4곳·바깥 Pointer 닫기 4곳을 내부 Helper로 공통화. Slider·Escape·Viewer/Home Menu 닫기는 이유를 남기고 유지 |
 | 4. SW Popup 하단 버튼 | 보류 | 일반 모드 공식 디자인 없음(문서 기록). Figma 작업 페이지는 MCP 전송 한도(4.5MB) 초과로 열람 불가 |
 | 5. Storybook·AI 문서 | PASS | 공개 API·Story 무변경이라 AI 문서 수정 불필요(문서 설명과 실제 동작을 Fixture로 확인) |
 | 6. 통합 검증 | PASS (설계상 예상 FAIL 5건 제외) | §7. 출처 검사 5건은 미승인 제품 변경을 정상 검출한 결과 |
 ## 2. 테스트 정합성 (1단계)
 - 기존 4종(`dropdown-consolidation`, `storybook-cleanup-stage1`, `detail-buttons`, `property-panel-comparison`)과 `storybook-inventory.mjs` 수정은 그대로 두고 재검증했습니다(§7).
 - **`header-composition.browser.mjs`(신규)** + `tests/fixtures/header-composition.tsx`: 공개 `@hm-design/sw` API만 쓰는 테스트 전용 화면을 esbuild로 묶어 검증합니다. 패키지 `files`(dist, ai)에 포함되지 않고 Storybook에도 등록되지 않습니다.
  - 삭제된 Composition Story의 11개 프리셋 × 7폭(메뉴 순서·49px·넘침 없음·More 비어 있지 않음)을 같은 기대값으로 실행
  - 1920에서 숨긴 부품만 정확히 사라지는지(11개 부품), `home` 숨김 시 정적 로고
  - 잘못된 설정: `menuOrder` 중복·알 수 없는 ID·메뉴가 아닌 ID·빈 배열, `hiddenControls` 알 수 없는·중복 ID
  - 실행 중 변경: 순서·숨김을 바꿔도 Callback 없음, 호스트 레이어 값 유지, 이동한 필드의 Dropdown 열기·Escape·Focus 복귀
  - 결과 161/161(3회 동일). 변조: 순서 무시 16 FAIL, 누락 메뉴를 앞에 배치 9 FAIL, `print` 숨김 무시 4 FAIL. 동작이 같은 변조 2건(중복 제거 삭제, 알 수 없는 ID 허용)은 결과가 바뀌지 않으므로 검출 대상이 아님을 확인했습니다.
 - `detail-buttons` 상단 주석에 현재 대체 검증 위치를 추가했습니다.
 ## 3. Firefox 안정화 (2단계)
 ### 3.1 `Continuous` 말줄임
 - 원인: 선스타일 값 행 `.hm-sw-header__line-values`(이름 + 가중치 38px + 스케일 38px)의 **flex 고유 폭(max-content)을 Firefox가 6.4px 작게 계산**(174.92 / Chromium 181.27). 글꼴(Noto 가변·Malgun), 굵기, 자간, text-shadow와 무관한 일정한 차이였고, 같은 마크업을 절대 위치로 복제하면 81.32px로 정상이었습니다.
 - 수정(`packages/sw/src/theme/sw.css` 1곳): 같은 트랙의 grid로 변경 — `grid-template-columns: minmax(28px, auto) 38px 38px; gap: 12px`. 좁은 대표 필드에서 이름이 28px까지 줄며 말줄임하는 동작은 같습니다(Firefox 180px 강제 폭에서 flex와 grid 모두 87 / 28).
 - Chromium 무변경 증명: 모든 SW Story × 5폭(41쌍)의 선스타일 필드 전체 요소 좌표 동일, PNG 동일(재캡처 2회 0건. 1회 차이는 상태 표본의 일시 차이로 재캡처에서 사라짐).
 - Firefox: 58/59 → **59/59**(3회).
 - Composed Controls `1.0000`의 38px 칸 결정은 바꾸지 않았습니다.
 ### 3.2 Firefox Hover 흔들림
 - 원인: Storybook 미리보기의 `html { scroll-behavior: smooth }`(`src/hm-theme.css`). `scrollIntoView` 직후 60ms 고정 대기로는 스크롤이 끝나지 않아 좌표를 잘못 읽고, 포인터가 다른 타일에 올라갔습니다(각 묶음의 첫 타일 「저장」, Footer 첫 칸 `LINE`).
 - 수정(`hover-stability-firefox.browser.mjs`): `behavior: 'instant'` 스크롤, 고정 대기 대신 상태 대기(`:hover`·`:active` 상태와 전환 종료, 시간 초과는 FAIL로 기록). 놓은 뒤 Firefox가 `:active`를 다음 누름까지 유지하는 동작이 있어 마지막 대기만 `:hover`를 봅니다. 검사 항목은 줄이지 않았습니다.
 - 결과 59/59(3회, 약 30초). 변조(Home Menu Hover 라벨 1px 이동): 42 FAIL.
 ### 3.3 픽셀 비교 흔들림
 - 같은 빌드끼리(HEAD 대 HEAD) 비교해 환경 노이즈를 먼저 분리했습니다.
  - `integrated-visual`: Document Dropdown 3538px(Δ1), Responsive More 1–4px, Window Move Motion(재생 중 정지 시점 차이). Story 설명 문단의 글자 안티앨리어싱과 애니메이션 정지 시점이 원인이었습니다.
  - `viewer-regression`: 36/39(Header 글자 노이즈, 속성창 4개 비교의 내부 스크롤 위치).
 - 수정(허용 오차 0 유지): Chromium 실행 옵션(`--disable-gpu --font-render-hinting=none --disable-font-subpixel-positioning --disable-lcd-text --force-color-profile=srgb`), 재생 중이던 애니메이션은 시간 0으로 고정, 레이아웃 안정 대기, 내부 스크롤 요소는 즉시 스크롤 + 정수 위치. 페이지 높이만큼의 Viewport 방식은 측정형 Story를 오히려 흔들어 되돌렸습니다.
 - 결과: `integrated-visual` 4회 캡처 0 DIFF(28장), `viewer-regression` HEAD 대 HEAD 39/39(3회). 변조(레이어 필드 padding 1px): 25/28 DIFF, 원복 후 0 DIFF.
 - 통합 검증 중 같은 종류의 기존 결함 2건을 추가로 고쳤습니다: `theme-inheritance`(같은 실행 옵션, 22/23 → 23/23 3회), `text-weight`(Viewer More를 고정 200ms 뒤 확인 → 표시 대기, 실패 출력 중 예외 수정, 43/43 3회). 두 결함 모두 변경 전 빌드에서도 재현했습니다.
 ## 4. 중복 개선 (3단계)
 | 대상 | 판단 | 내용 |
 |---|---|---|
 | Roving Focus(SWToolGroup, SWFooter, SWViewerHeader 탭, SWHomeMenu) | 공통화 | 같은 알고리즘 4벌 → 내부 `components/shared/roving-focus.ts`(`moveRovingFocus`). 패키지 진입점에서 export하지 않음. 키 집합·감싸기·선택(click) 동작을 호출부별로 그대로 전달 |
 | 바깥 pointerdown 닫기(SWHeaderDropdown, LayerMenu, DocumentTitle, More) | 공통화 | 같은 effect 4벌 → 내부 `components/shared/use-outside-pointer.ts`(`useOutsidePointerDown`) |
 | `SWViewerSlider` | 이미 공통 | `SWSlider appearance="panel"`을 감싸는 형태(기존) |
 | 속성창 내부 Range | 유지 | 외형은 이미 `SWSlider appearance="property"`와 같은 CSS 규칙을 공유. 문자열 임시값 + Blur/Enter 확정 + Escape 취소 + 혼합값 처리와 86px 고정 폭이 `SWSlider`(change 시 확정, `flex 1 1 auto`, Disabled 투명도)와 달라 교체하면 동작·외형이 바뀜 |
 | Escape·Focus 복귀 | 유지 | 컴포넌트마다 닫는 범위·Focus 복귀 대상·Popup 스택 처리가 다름 |
 | SWViewerMenu·SWHomeMenu·SWFooter 바깥 클릭 | 유지 | Capture 단계, 하위 패널·More 상태 등 고유 조건이 있어 같은 Hook으로 바꾸면 동작이 바뀔 위험 |
 검증: 공개 타입 선언 비교(기존 `.d.ts` 전부 byte 동일, `components/shared` 추가뿐이며 진입점 미노출), 변경 전 빌드 대 변경 후 빌드 `viewer-regression` 39/39 픽셀 동일, 관련 Suite 전부 PASS. 기존 Suite가 끝 지점 감싸기와 "Focus를 옮기지 않는 바깥 pointerdown"을 확인하지 않는 것을 변조로 발견해 **`keyboard-dismiss.browser.mjs`(신규)** + `tests/fixtures/tool-group.tsx`를 추가했습니다: 변경 전 빌드 22/22, 변경 후 22/22(2회), Helper 변조 16 FAIL.
 ## 5. SW Popup 하단 버튼 (4단계, 보류)
 - 근거: `packages/sw/ai/COMPONENT_CATALOG.md`·`DESIGN_RULES.md`에 "일반 모드 SW Popup 하단 버튼(적용·취소) 전용 디자인은 아직 없음", `sw-integrated-improvement-2026-10-19.md`에 "디자인 미확정 보류". Viewer 모드는 `SWViewerButton`(Viewer Figma 기준)이 있습니다.
 - Figma `rj6wpsfk24lOWvWiVRAANP`의 페이지 목록(cover / 작업 / back / -----)은 확인했지만 작업 페이지 구조(약 4.5MB)는 MCP 응답 한도를 넘어 열람하지 못했습니다.
 - 임의 디자인을 만들지 않았고 Popup 디자인은 그대로입니다. 권장: 일반 모드 Popup 하단 버튼 Figma Node를 지정받은 뒤 적용하거나, `SWViewerButton`을 일반 모드에도 쓸지 디자인 결정을 받습니다.
 ## 6. 변경 파일 (미커밋)
 | 묶음 | 파일 |
 |---|---|
 | ① 테스트 정합성·Fixture | `packages/sw/tests/{dropdown-consolidation,storybook-cleanup-stage1,detail-buttons,property-panel-comparison}.browser.mjs`, `storybook-inventory.mjs`, `storybook-unused-removal.browser.mjs`(주석) — 이전 단계 / `header-composition.browser.mjs`, `fixtures/header-composition.tsx`(신규) |
 | ② Firefox·픽셀·타이밍 안정화 | `packages/sw/src/theme/sw.css`(선스타일 값 행 grid), `packages/sw/tests/hover-stability-firefox.browser.mjs`, `integrated-visual.browser.mjs`, `viewer-regression.browser.mjs`, `theme-inheritance.browser.mjs`, `text-weight.browser.mjs` |
 | ③ 중복 개선 | `packages/sw/src/components/shared/{roving-focus,use-outside-pointer}.ts`(신규), `sw-footer/SWFooterParts.tsx`, `sw-tool/SWTool.tsx`, `sw-viewer/SWViewerHeader.tsx`, `sw-home-menu/SWHomeMenu.tsx`, `sw-header/components/{SWHeaderDropdown,SWHeaderLayerMenu,SWHeaderDocumentTitle,SWHeaderMore}.tsx` / `packages/sw/tests/keyboard-dismiss.browser.mjs`, `fixtures/tool-group.tsx`(신규) |
 | ⑤ 문서 | 이 보고서 |
 ## 7. 통합 검증 (Node 22.23.2)
 최종 빌드(이 작업의 모든 변경 포함)에서 실행했습니다. 기존 실패와 신규 실패를 구분합니다.
 | 검사 | 결과 | 비고 |
 |---|---|---|
 | `npm run typecheck`(루트 `tsc -b` + 5개 Workspace) | PASS | |
 | `npm run build-storybook`(theme 기본값 확인 + 5개 패키지 build) | PASS | OrgChart·OrgChart React·UI·Center Graphic·SW build 포함 |
 | `npm run test:org-chart` / `test:components` / `test:guard` | 88/88 · 9/9 · 94/94 | |
 | `npm run check:ai-docs` / `ai-docs.check.mjs` | PASS / 46/46 | |
 | 공개 API(`packages/sw/dist/**/*.d.ts`) | 기존 46개 파일 byte 동일 | `components/shared`만 추가, 진입점 미노출 |
 | Storybook index | 359개, ID·순서·내용 동일 | Story 추가·삭제 없음 |
 | home-menu-integration | 23/23 | |
 | overview / overlays | 53/54 / 19/20 | **예상 FAIL 1**: 미승인 제품 파일 3개 검출 |
 | storybook-unused-removal | 92/93 | **예상 FAIL 1**: 같은 3개 |
 | dropdown-consolidation / storybook-cleanup-stage1 | 227/228 / 40/41 | **예상 FAIL 1**: 같은 3개 |
 | property-panel-comparison verify | 71/71 | |
 | detail-buttons baseline · verify · preservation · capture | 1 · 123/123 · 15/15 · 1 | |
 | header-composition(신규) / keyboard-dismiss(신규) | 161/161 / 22/22 | |
 | viewer / footer-popup-viewer-refinement / footer-design-review | 70/70 / 47/47 / 21/21 | |
 | integrated-improvement / range-cross-browser | 90/90 / 31/31 | |
 | hover-stability Chromium / Firefox | 201/201 / 59/59 | Firefox 수정 전 58/59 |
 | viewer-regression(변경 전 빌드 대 최종 빌드) | 39/39 | 픽셀 동일 |
 | integrated-visual(그리드 수정 후·리팩터링 전 대 최종) | 28/28 동일 | |
 | text-weight | 43/43(3회) | 첫 실행 중단 → **기존 타이밍 결함**(변경 전 빌드도 같은 위치 2/2 실패). 고정 200ms 대신 More 표시 대기로 수정, 실패 출력 중 예외도 수정 |
 | theme-inheritance | 23/23(3회) | 첫 실행 22/23 → **기존 래스터 노이즈**(변경 전 빌드도 실패, 실행마다 다른 Story). 결정적 실행 옵션 추가 |
 - 신규 회귀: 없음. 예상 FAIL 5건은 모두 `SWFooterParts.tsx`·`SWHomeMenu.tsx`·`SWViewerHeader.tsx`(이번 미승인 리팩터링)만 가리키며 다른 검사는 PASS입니다.
 - 미실행: `integrated-consumer`·`ai-template-consumer`(소비 프로젝트 빌드 필요), `overview-firefox`, `detail-buttons composition-history`, 외부 Viewer 저장소.
 ## 8. 남은 문제와 확인 사항
 - **출처 검사 FAIL(설계상 예상):** Overview·Overlays·미사용 검사·dropdown·stage1은 승인된 main 이후 `packages/sw/src` 변경을 FAIL로 표시합니다. 이번 미승인 제품 변경 중 `SWFooterParts.tsx`·`SWHomeMenu.tsx`·`SWViewerHeader.tsx`가 걸립니다. 나머지 변경 파일은 기존 `integratedChangedFiles` 예외에 포함되어 표시되지 않습니다. 승인 후 main 병합 → `approvedMainCommit` 갱신 절차([기준선 문서 §9](sw-test-regression-baseline-2026-10-20.md))로 해소합니다. 승인 목록에 임의로 넣지 않았습니다.
 - ~~**출처 검사의 사각:** 위 검사는 `git diff <commit>`만 보므로 새로 추가한 미추적 파일(예: `components/shared/*.ts`)은 감지하지 못합니다.~~ → §10에서 해결.
 - `integratedChangedFiles` 예외 범위가 넓어 SWHeader 하위 파일 변경이 출처 검사에 드러나지 않습니다(기준선 문서 §10과 같은 사항).
 - `detail-buttons composition-history` 모드는 c8e5fbe 이전 빌드가 필요해 실행하지 않았습니다(현재 대체: `header-composition`).
 - 외부 Viewer 소비 프로젝트(별도 저장소·Submodule)는 열지 않았습니다. 공개 API 무변경이라 영향은 없을 것으로 보지만 **미검증**입니다. `integrated-consumer`·`ai-template-consumer`(소비 프로젝트 빌드)도 이번에 실행하지 않았습니다.
 - Docker·Gitea Workflow·다른 프로젝트는 건드리지 않았습니다.
 ## 9. 권장 Commit 분리
 1. `test(sw): align legacy storybook suites and add header composition fixture` — ① 
 2. `fix(sw): keep the line style name uncut in Firefox` — `sw.css` / `test(sw): stabilize Firefox hover, pixel and resize timing checks` — 테스트 5개
 3. `refactor(sw): share roving focus and outside pointer handling` — ③ 제품 파일 + `keyboard-dismiss` 테스트
 4. `test(sw): detect untracked and moved files in source guards` — `source-changes.mjs`(신규), `overview`·`storybook-unused-removal` 가드 부분(§10). `dropdown-consolidation`·`storybook-cleanup-stage1`은 ①의 수정과 같은 파일이라 ①에 함께 넣거나 `git add -p`로 가드 부분만 분리합니다.
 5. `docs(sw): record the 2026-10-21 follow-up` — 이 보고서
 ## 10. 후속: 소스 가드 신규 파일 검출 보완 (2026-10-21)
 > 실행 환경: 이 PC에는 Node.js 22.23.2가 없어 시스템 Node.js **20.20.1**로 실행했습니다(시스템 Node 설정은 바꾸지 않음). 가드 5종은 Chromium만 쓰고 전역 `WebSocket`이 필요 없습니다. 제품 소스·Storybook 구성·공개 API는 바꾸지 않았으므로 §7의 빌드·브라우저 결과는 재실행하지 않고 그대로 유효합니다(제품 소스 최종 수정 01:50, `storybook-static` 01:50:50·`dist` 02:01 빌드 이후 변경 없음).
 ### 10.1 변경
 - **`packages/sw/tests/source-changes.mjs`(신규):** `sourceChanges(ref, paths)` = `git diff --name-status -M <ref>`(Staged·미Staged 수정, 추가, 삭제, 이름 변경의 양쪽 경로) + `git ls-files --others --exclude-standard`(미추적 파일, `.gitignore` 대상인 `dist`·`storybook-static`·`*.log` 제외). 항목마다 `status`(M/A/D/T/R/?)와 `staged`를 기록합니다. `unapprovedChanges(ref, paths, approved)`는 승인 목록(`integratedChangedFiles`, 정확한 경로)에 없는 항목만 돌려줍니다.
 - `overview.browser.mjs`(두 모드), `storybook-unused-removal.browser.mjs`, `dropdown-consolidation.browser.mjs`, `storybook-cleanup-stage1.browser.mjs`: `approvedMainCommit` 대비 검사와 `sinceBaseline` 집계만 위 헬퍼로 교체했습니다. 검사 경로, 단언, 승인 목록, `approvedMainCommit`(`553e4df`), 두 Commit 사이 비교(stage1·consolidation)는 그대로입니다.
 ### 10.2 결과
 | 검사 | 결과 | 판정 |
 |---|---|---|
 | 원본 저장소 overview / overlays / unused / dropdown / stage1 | 53/54 · 19/20 · 92/93 · 227/228 · 40/41 | 수치는 §7과 같음. FAIL은 가드 1건씩이며 이제 미승인 파일 **5개**(수정 3 + 미추적 `components/shared/roving-focus.ts`·`use-outside-pointer.ts`)를 표시 → **승인 전 변경을 정상 검출한 예상 FAIL** |
 | 임시 Worktree(HEAD, 제품 소스 = 승인 main) 5종 전체 | 54/54 · 20/20 · 93/93 · 228/228 · 41/41 | 정상 상태에서 불필요한 FAIL 없음 |
 | 임시 Worktree 혼합 변조(승인 `sw.css` + 미승인 수정 + 미추적 신규) overview | 53/54 | 미승인 2개만 표시, 승인 파일 제외 |
 | 헬퍼 변조 16개 시나리오 × 가드 경로 4종 | 64/64 기대값 일치 | 아래 |
 변조 시나리오(기존 방식 → 새 방식 검출 수): 미추적 신규 소스 0 → 1, 신규 모듈의 공개 export 0 → 1, 일반 이동 1 → 2(삭제 + 새 경로), `git mv` 1 → 2, 혼합 1 → 2, 다른 패키지(`packages/ui`) 수정 + 신규 1 → 2(unused 가드만 해당 경로 검사). 수정·Staged 수정·삭제·`git rm`·`git add` 신규는 기존과 같이 1. 승인 파일만 수정, 무시 대상(`dist`, `*.log`)만 생성, 승인 파일만 있는 상태는 0(오검출 없음). 승인 파일을 새 경로로 옮기면 새 경로를 미승인으로 표시합니다.
 ### 10.3 남은 사항
 - `packages/sw/src/index.ts`는 `integratedChangedFiles`에 있어 이 가드들은 그 파일의 export 추가를 검출하지 않습니다(변조 5b, 기존 정책 그대로). `ai-docs.check.mjs`는 AI 문서에 나온 이름이 실제 export인지만 확인하므로, 진입점 export 추가를 자동으로 막는 가드는 없습니다(§4의 `.d.ts` 비교는 수동 실행). 예외 범위 축소는 승인 목록 정책 변경이라 이번에 하지 않았습니다.
 - Node.js 22.23.2 환경 재확인은 미검증입니다.
 ## 11. 최종 마무리: 공개 API 검사·Commit (2026-10-21)
 > 실행 환경: Node.js **20.20.1**(Node 22.23.2 재검증은 사용자 결정으로 제외). 제품 소스·Storybook 구성은 §7 이후 바뀌지 않았고(`packages/sw/src`·`src/sw`·`.storybook`에 `dist`(02:01)·`storybook-static`(01:50:50)보다 새 파일 없음) §7의 제품 회귀 결과를 재사용했습니다.
 ### 11.1 공개 API 검사 (`packages/sw/tests/public-api.check.mjs`, 신규)
 §10.3의 사각(`src/index.ts`가 `integratedChangedFiles`에 있어 진입점 export 변경을 출처 검사가 보지 않음, `.d.ts` 비교는 수동)을 보완합니다. 승인 목록 정책(`integratedChangedFiles`)은 바꾸지 않았습니다.
 - 기준: `public-api.approved.json`. 저장소 밖에서 `553e4df`(`approvedMainCommit`)의 `packages/sw`를 `git archive`로 꺼내 build(`SW_BUILD_COMMIT=553e4df…`)하고 `--snapshot`으로 만들었습니다. 현재 HEAD에서 만든 값이 아닙니다. 170개 export(실행 값 64, 타입 106), 진입점에서 닿는 `.d.ts` 42개.
 - 검사(빌드된 `dist`와 `package.json` 기준, 7항목):
  1. 기준 Commit이 `approvedMainCommit`과 HEAD의 조상
  2. `package.json`의 `name`·`exports`·`main`·`types`·`module`·`files` 동일
  3. `exports` 대상 파일이 `dist`에 존재
  4. 진입점 export 이름 집합 동일(추가·삭제, 이름 변경은 삭제 + 추가로 표시)
  5. export 종류(실행 값 / 타입 전용) 동일, `.d.ts`에 선언된 값이 `dist/index.js`에 실제로 있음(`import()`로 확인)
  6. `dist/index.d.ts`에서 상대 import로 닿는 `.d.ts` 파일 목록 동일(내부 모듈의 새 노출 검출)
  7. 그 파일들이 byte 단위로 동일(공개 타입과 공개 타입이 참조하는 내부 타입의 변경 검출)
 - 진입점에서 닿지 않는 내부 모듈(`components/shared/*`)의 추가, 구현만 바꾼 리팩터링은 통과합니다. TypeScript 7.0.2에는 JS Compiler API가 없어 선언 파일을 정적으로 따라가고 실행 export는 실제 `dist/index.js`로 확인합니다.
 - 검사는 기준 파일을 고치지 않습니다. 공개 API를 바꾸는 승인된 변경에서만, 그 Commit의 build로 `--snapshot`을 다시 실행해 같은 Commit에 넣습니다. `approvedMainCommit`만 옮길 때는 기준 파일을 바꾸지 않습니다(1번 항목이 조상 관계로 연결).
 - 다른 패키지: 이번 범위에서 `packages/ui`·`org-chart`·`org-chart-react`·`center-graphic`은 바뀌지 않았고(`storybook-unused-removal` 경로 검사), 새 검사를 만들지 않았습니다.
 | 실행 | 결과 |
 |---|---|
 | 현재 공유 `dist`(최종 제품 소스 build) | 7/7 PASS |
 | 변조 0: 현재 소스를 저장소 밖에서 다시 build | 7/7 PASS |
 | 변조 1: 쓰이지 않는 내부 모듈 `components/shared/extra-internal.ts` 추가 | 7/7 PASS(정상 유지) |
 | 변조 2: `index.ts`에서 `moveRovingFocus` export | 4/7 — `added: moveRovingFocus`, `newlyReachable: components/shared/roving-focus.d.ts`, `index.d.ts` 변경 |
 | 변조 3: `SWSelect` 값 export 삭제 | 5/7 — `removed: SWSelect` |
 | 변조 4: `SWSlider as SWRangeSlider` | 5/7 — `added: SWRangeSlider`, `removed: SWSlider` |
 | 변조 5: `SWSliderProps`에 선택 prop 추가 | 6/7 — `components/sw-slider/SWSlider.d.ts` 변경 |
 | 변조 6: `package.json`에 `./shared` subpath 추가 | 5/7 — `exports` 변경, 대상 파일 없음 |
 변조는 모두 저장소 밖 복사본에서 build해 실행했고 공유 `dist`·`storybook-static`은 건드리지 않았습니다.
 ### 11.2 소스 가드 5종 (Commit 전, Node 20.20.1)
 | 검사 | 결과 | 검출 파일 |
 |---|---|---|
 | overview / overlays | 53/54 / 19/20 | 5개 동일 |
 | storybook-unused-removal | 92/93 | 5개 동일 |
 | dropdown-consolidation | 227/228 | 5개 동일 |
 | storybook-cleanup-stage1 | 40/41 | 5개 동일 |
 검출 파일은 `SWFooterParts.tsx`·`SWHomeMenu.tsx`·`SWViewerHeader.tsx`(수정)와 `components/shared/roving-focus.ts`·`use-outside-pointer.ts`(미추적 신규)뿐이며, 모두 §4의 승인된 중복 개선 범위입니다(diff 확인: Roving Focus 4곳·바깥 pointerdown 4곳의 같은 알고리즘을 내부 Helper 호출로 교체). 다른 FAIL은 없습니다. 승인 목록에 넣지 않고, main 병합 후 기준선 문서 §9 절차로 `approvedMainCommit`을 옮겨 해소합니다(§12).
 ### 11.3 Commit (작성자·Committer 모두 `김수현 <shkim4@samaneng.com>`, `.git/config` 기준)
 | Commit | 내용 | 파일 |
 |---|---|---|
 | `1e05eaf` | test(sw): detect untracked source files and public API changes | `source-changes.mjs`, `public-api.check.mjs`, `public-api.approved.json`, `overview.browser.mjs`, `storybook-unused-removal.browser.mjs`(가드 부분) |
 | `b50e95c` | test(sw): align legacy storybook suites and add header composition fixture | `dropdown-consolidation`, `storybook-cleanup-stage1`, `detail-buttons`, `property-panel-comparison`, `storybook-inventory.mjs`, `storybook-unused-removal`(주석), `header-composition.browser.mjs`, `fixtures/header-composition.tsx` |
 | `1ffff67` | fix(sw): keep the line style name uncut in Firefox | `packages/sw/src/theme/sw.css` |
 | `af7f98d` | test(sw): stabilize Firefox hover, pixel and timing checks | `hover-stability-firefox`, `integrated-visual`, `viewer-regression`, `theme-inheritance`, `text-weight` |
 | `7cc3aa1` | refactor(sw): share roving focus and outside pointer handling | `components/shared/*.ts`(신규 2), 제품 파일 8 |
 | `0f9e9b0` | test(sw): cover roving focus wrap and outside pointer dismissal | `keyboard-dismiss.browser.mjs`, `fixtures/tool-group.tsx` |
 `dropdown-consolidation`·`storybook-cleanup-stage1`의 정렬 수정은 `source-changes.mjs`를 쓰므로 가드 Commit을 먼저 두었습니다. `storybook-unused-removal`은 가드 부분과 주석을 나눠 Stage했습니다. 기존 미추적 16개(`.claude/launch.json`, `docs/sw/home-menu-*-qa-2026-10-19/*.png` 15개)는 Commit하지 않았습니다.
@@ -0,0 +1,20 @@
 import type { KeyboardEvent } from "react"
 /**
 * Internal (not exported from the package): roving focus among `items`, shared by SWFooter, SWToolGroup, the
 * SWViewerHeader tabs and SWHomeMenu (2026-10-20; the four copies had the same algorithm). ArrowRight / ArrowLeft —
 * and ArrowDown / ArrowUp when `vertical` — move and wrap; Home / End jump. Nothing happens unless the focused element
 * is one of `items`. `select` clicks the new item (radio groups). Returns whether the key was handled.
 */
 export function moveRovingFocus(event: KeyboardEvent<HTMLElement>, items: HTMLElement[], { vertical = false, select = false } = {}) {
  const forward = event.key === "ArrowRight" || (vertical && event.key === "ArrowDown")
  const backward = event.key === "ArrowLeft" || (vertical && event.key === "ArrowUp")
  if (!forward && !backward && event.key !== "Home" && event.key !== "End") return false
  const index = items.indexOf(document.activeElement as HTMLElement)
  if (index < 0) return false
  event.preventDefault()
  const next = event.key === "Home" ? 0 : event.key === "End" ? items.length - 1 : (index + (forward ? 1 : -1) + items.length) % items.length
  items[next].focus()
  if (select) items[next].click()
  return true
 }
@@ -0,0 +1,19 @@
 import { useEffect, useRef, type RefObject } from "react"
 /**
 * Internal (not exported from the package): while `open`, a pointerdown outside `rootRef` calls `onOutside` (the latest
 * one). Shared by the SWHeader dropdowns, layer menu, document title and More (2026-10-20; the four copies were the same
 * effect). Escape, focus return and positioning stay in each component.
 */
 export function useOutsidePointerDown(open: boolean, rootRef: RefObject<HTMLElement | null>, onOutside: () => void) {
  const latest = useRef(onOutside)
  latest.current = onOutside
  useEffect(() => {
    if (!open) return
    const onPointerDown = (event: PointerEvent) => {
      if (!rootRef.current?.contains(event.target as Node)) latest.current()
    }
    document.addEventListener("pointerdown", onPointerDown)
    return () => document.removeEventListener("pointerdown", onPointerDown)
  }, [open, rootRef])
 }
@@ -2,6 +2,7 @@ import {
  forwardRef, useCallback, useId, useLayoutEffect, useRef, useState,
  type ButtonHTMLAttributes, type HTMLAttributes, type KeyboardEvent, type ReactNode,
 } from "react"
 import { moveRovingFocus } from "../shared/roving-focus"
 import type { SWFooterAuxItem } from "./types"
 import "../../theme/sw-footer.css"
@@ -9,16 +10,7 @@ const cx = (...names: (string | false | undefined)[]) => names.filter(Boolean).j
 /** Arrow / Home / End focus move between the enabled buttons matching `selector` (roving focus). */
 export function moveFocus(event: KeyboardEvent<HTMLElement>, selector: string, select = false) {
-  const keys = ["ArrowRight", "ArrowLeft", "Home", "End"]
+  moveRovingFocus(event, Array.from(event.currentTarget.querySelectorAll<HTMLButtonElement>(selector)).filter(item => !item.disabled), { select })
  if (!keys.includes(event.key)) return
  const items = Array.from(event.currentTarget.querySelectorAll<HTMLButtonElement>(selector)).filter(item => !item.disabled)
  const index = items.indexOf(document.activeElement as HTMLButtonElement)
  if (index < 0 || !items.length) return
  event.preventDefault()
  const next = event.key === "Home" ? 0 : event.key === "End" ? items.length - 1
    : (index + (event.key === "ArrowRight" ? 1 : -1) + items.length) % items.length
  items[next].focus()
  if (select) items[next].click()
 }
 // ---------- Side button (보조기능 전체보기 / 명령어 전체보기) ----------
@@ -1,4 +1,5 @@
 import { useEffect, useId, useRef, useState, type KeyboardEvent, type ReactNode } from "react"
 import { useOutsidePointerDown } from "../../shared/use-outside-pointer"
 import documentIcon from "../../../assets/document-icon.svg"
 import type { SWHeaderDocument } from "../types"
@@ -85,14 +86,7 @@ export function SWHeaderDocumentTitle({
    if (restoreFocus) triggerRef.current?.focus()
  }
-  useEffect(() => {
+  useOutsidePointerDown(open, rootRef, () => setOpen(false))
    if (!open) return
    const onPointerDown = (event: PointerEvent) => {
      if (!rootRef.current?.contains(event.target as Node)) setOpen(false)
    }
    document.addEventListener("pointerdown", onPointerDown)
    return () => document.removeEventListener("pointerdown", onPointerDown)
  })
  useEffect(() => {
    if (open && focusFirstRef.current) {
@@ -1,4 +1,5 @@
 import { useEffect, useId, useLayoutEffect, useRef, useState, type FocusEvent, type KeyboardEvent, type RefObject } from "react"
 import { useOutsidePointerDown } from "../../shared/use-outside-pointer"
 import detailIcon from "../../../assets/layer-detail.svg"
 import type { ButtonHTMLAttributes, ReactNode } from "react"
@@ -77,14 +78,7 @@ export function useSWHeaderDropdown({ open: openProp, onOpenChange, disabled = f
    if (restoreFocus) triggerRef.current?.focus()
  }
-  useEffect(() => {
+  useOutsidePointerDown(open, rootRef, () => setOpen(false))
    if (!open) return
    const onPointerDown = (event: PointerEvent) => {
      if (!rootRef.current?.contains(event.target as Node)) setOpen(false)
    }
    document.addEventListener("pointerdown", onPointerDown)
    return () => document.removeEventListener("pointerdown", onPointerDown)
  })
  useLayoutEffect(() => {
    if (!open) return
@@ -1,4 +1,5 @@
 import { useEffect, useId, useLayoutEffect, useRef, useState, type KeyboardEvent } from "react"
 import { useOutsidePointerDown } from "../../shared/use-outside-pointer"
 import { SWHeaderMenuDetail, useSWFixedDropdownPosition } from "./SWHeaderDropdown"
 import type { SWHeaderLayer, SWHeaderLayerValue } from "../types"
 import { SWHeaderLayerControl } from "./SWHeaderFields"
@@ -78,14 +79,7 @@ export function SWHeaderLayerMenu({
    if (restoreFocus) triggerRef.current?.focus()
  }
-  useEffect(() => {
+  useOutsidePointerDown(open, rootRef, () => setOpen(false))
    if (!open) return
    const onPointerDown = (event: PointerEvent) => {
      if (!rootRef.current?.contains(event.target as Node)) setOpen(false)
    }
    document.addEventListener("pointerdown", onPointerDown)
    return () => document.removeEventListener("pointerdown", onPointerDown)
  })
  useLayoutEffect(() => {
    if (!open) return
@@ -1,4 +1,5 @@
 import { useEffect, useId, useRef, useState, type KeyboardEvent } from "react"
 import { useOutsidePointerDown } from "../../shared/use-outside-pointer"
 import { SWHeaderKGuidePreview } from "./SWHeaderKGuide"
 export interface SWHeaderMoreItem {
@@ -40,14 +41,7 @@ export function SWHeaderMore({ items, forceVisible }: SWHeaderMoreProps) {
  const [guideOpen, setGuideOpen] = useState(false)
  useEffect(() => { if (!open) setGuideOpen(false) }, [open])
-  useEffect(() => {
+  useOutsidePointerDown(open, rootRef, () => setOpen(false))
    if (!open) return
    const onPointerDown = (event: PointerEvent) => {
      if (!rootRef.current?.contains(event.target as Node)) setOpen(false)
    }
    document.addEventListener("pointerdown", onPointerDown)
    return () => document.removeEventListener("pointerdown", onPointerDown)
  }, [open])
  const visibleItems = () => Array.from(rootRef.current?.querySelectorAll<HTMLButtonElement>('[role^="menuitem"]:not(:disabled)') ?? []).filter(item => item.offsetParent !== null)
@@ -3,6 +3,7 @@ import {
  type ButtonHTMLAttributes, type CSSProperties, type KeyboardEvent, type MouseEvent, type ReactNode,
 } from "react"
 import { useSWPopupStack } from "../sw-header/components/SWHeaderPropertyPanel"
 import { moveRovingFocus } from "../shared/roving-focus"
 import titleBadge from "./assets/title-badge.svg"
 // Imported where the component is used (not only in index.ts) so bundlers keep it with sideEffects: ["**/*.css"].
 import "../../theme/sw-home-menu.css"
@@ -354,14 +355,7 @@ export const SWHomeMenu = forwardRef<HTMLDivElement, SWHomeMenuProps>(function S
      else rows[Math.min(rows.length - 1, Math.max(0, index + (event.key === "ArrowDown" ? 1 : -1)))]?.focus()
      return
    }
-    if (!["ArrowLeft", "ArrowRight", "Home", "End"].includes(event.key)) return
+    if (["ArrowLeft", "ArrowRight", "Home", "End"].includes(event.key)) moveRovingFocus(event, focusableItems(rootRef.current))
    const items = focusableItems(rootRef.current)
    const index = items.indexOf(document.activeElement as HTMLElement)
    if (index < 0) return
    event.preventDefault()
    const next = event.key === "Home" ? 0 : event.key === "End" ? items.length - 1
      : (index + (event.key === "ArrowRight" ? 1 : -1) + items.length) % items.length
    items[next].focus()
  }
  const resolvedAccent = accent === "auto" ? (openPanelId ? "outline" : "sections") : accent
@@ -1,4 +1,5 @@
 import { createContext, forwardRef, useContext, type ButtonHTMLAttributes, type HTMLAttributes, type KeyboardEvent, type ReactNode } from "react"
 import { moveRovingFocus } from "../shared/roving-focus"
 /**
 * Existing SW button looks, reused as one public button (no new design values):
@@ -77,16 +78,7 @@ export interface SWToolGroupProps extends HTMLAttributes<HTMLDivElement> {
 }
 function moveFocus(event: KeyboardEvent<HTMLDivElement>) {
-  const keys = ["ArrowRight", "ArrowDown", "ArrowLeft", "ArrowUp", "Home", "End"]
+  moveRovingFocus(event, Array.from(event.currentTarget.querySelectorAll<HTMLButtonElement>('button[role="radio"]:not(:disabled)')), { vertical: true, select: true })
  if (!keys.includes(event.key)) return
  const items = Array.from(event.currentTarget.querySelectorAll<HTMLButtonElement>('button[role="radio"]:not(:disabled)'))
  const index = items.indexOf(document.activeElement as HTMLButtonElement)
  if (index < 0 || !items.length) return
  event.preventDefault()
  const next = event.key === "Home" ? 0 : event.key === "End" ? items.length - 1
    : (index + (event.key === "ArrowRight" || event.key === "ArrowDown" ? 1 : -1) + items.length) % items.length
  items[next].focus()
  items[next].click()
 }
 export const SWToolGroup = forwardRef<HTMLDivElement, SWToolGroupProps>(function SWToolGroup(
@@ -1,4 +1,5 @@
 import { forwardRef, useId, useLayoutEffect, useRef, useState, type ButtonHTMLAttributes, type HTMLAttributes, type KeyboardEvent, type ReactNode } from "react"
 import { moveRovingFocus } from "../shared/roving-focus"
 import { SWViewerMenu } from "./SWViewerMenu"
 import { SWViewerSwitch } from "./SWViewerControls"
 import { SWViewerIcon } from "./SWViewerIcon"
@@ -111,15 +112,7 @@ function MenuButton({ item, iconOnly, onCommand }: { item: Extract<SWViewerHeade
 function Tabs({ item, onCommand }: { item: Extract<SWViewerHeaderItem, { type: "tabs" }>; onCommand: (c: SWViewerCommand) => void }) {
  const select = (value: string) => { item.onValueChange?.(value); onCommand({ id: item.id, itemId: item.id, value }) }
  const onKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {
-    const keys = ["ArrowRight", "ArrowLeft", "ArrowDown", "ArrowUp", "Home", "End"]
+    moveRovingFocus(event, Array.from(event.currentTarget.querySelectorAll<HTMLButtonElement>('[role="radio"]:not(:disabled)')), { vertical: true, select: true })
    if (!keys.includes(event.key)) return
    const buttons = Array.from(event.currentTarget.querySelectorAll<HTMLButtonElement>('[role="radio"]:not(:disabled)'))
    const index = buttons.indexOf(document.activeElement as HTMLButtonElement)
    if (index < 0) return
    event.preventDefault()
    const next = event.key === "Home" ? 0 : event.key === "End" ? buttons.length - 1 : (index + (event.key === "ArrowRight" || event.key === "ArrowDown" ? 1 : -1) + buttons.length) % buttons.length
    buttons[next].focus()
    buttons[next].click()
  }
  const current = item.options.some(option => option.value === item.value) ? item.value : item.options.find(option => !option.disabled)?.value
  return (
@@ -635,10 +635,11 @@
 .hm-sw-header__linetype { display: flex; flex: 0 0 auto; gap: 2px; }
 .hm-sw-header__linetype > i { display: block; width: 10px; height: 4px; border: 1px solid #000; background: #fff; }
-.hm-sw-header__line-values { display: flex; gap: 12px; min-width: 0; }
+/* Grid, same tracks as the former flex row (name: content width, never under 28px; 가중치 / 스케일: 38px). Firefox gave the
-/* min-width: a shrunk representative field (narrow More slot) shows an ellipsis, never a cut glyph. */
+   flex row a max-content 6.4px under its content (cutting "Continuous" in the 284px field); grid tracks size the same in
-.hm-sw-header__line-values > :first-child { flex: 0 1 auto; min-width: 28px; }
+   Chromium and Firefox (2026-10-20). min-width 28px: a shrunk representative field (narrow More slot) shows an ellipsis,
-.hm-sw-header__line-values > :not(:first-child) { flex: 0 0 38px; }
+   never a cut glyph. */
 .hm-sw-header__line-values { display: grid; grid-template-columns: minmax(28px, auto) 38px 38px; gap: 12px; min-width: 0; }
 .hm-sw-header__font-name {
  flex: 0 0 auto;
@@ -1,12 +1,17 @@
-// Historical since 2026-10-19: opens SW Story IDs retired by the unused demo removal (composition, colorize, layer-detail-input; preservation/verify modes). Kept as evidence
+// 2026-10-20 (test alignment): `capture`, `preservation`, `baseline` and `verify` are current regressions again. The checks of
-// for its recorded run; current regression: storybook-unused-removal.browser.mjs.
+// the Stories retired by the unused demo removal (5faa1f1) run on current public Stories: K Guide (the same fluid Header
 // as Composition), Overview (btn_colorize, layer detail), Property Panel · 4개 비교 (editable Input) and Document Open
 // (`controls` allowlist composition). No current Story sets hiddenControls / menuOrder presets, so the Composition preset
 // loop is the historical `composition-history` mode, for a Storybook built at or before c8e5fbe (pass its base URL).
 // The same presets run today on a test-only fixture in header-composition.browser.mjs.
 import { mkdir, readFile, writeFile } from 'node:fs/promises'
 import path from 'node:path'
 import http from 'node:http'
-import { swStoryEntries, retainedInventory, retiredPropertyPanelIds } from './storybook-inventory.mjs'
+import { swStoryEntries, retainedInventory, retiredPropertyPanelIds, retiredUnusedDemoIds, laterRetiredHeaderIds, approvedAddedHeaderIds, movedToPopupIds } from './storybook-inventory.mjs'
 import { loadPlaywright } from './playwright-runtime.mjs'
 // Usage: node packages/sw/tests/detail-buttons.browser.mjs baseline|verify <evidence-dir> [base-url]
 // Run `baseline` into a new evidence directory at the reference state, then `verify` into the same directory.
 const mode = process.argv[2] ?? 'verify'
 const output = path.resolve(process.argv[3] ?? 'docs/sw/detail-button-qa')
 let base = process.argv[4] ?? 'static'
@@ -37,6 +42,8 @@ const style = e => {
    iconOpacity:i && getComputedStyle(i).opacity,iconContent:i && getComputedStyle(i).content,
    height:e.getBoundingClientRect().height,width:e.getBoundingClientRect().width,outline:s.outline,disabled:e.disabled }
 }
 // Header height, overflow and the menus inside its fields in DOM order (configured controls or the default menus).
 const composedMenus = h => ({height:h.getBoundingClientRect().height,overflow:h.scrollWidth-h.clientWidth,menus:[...h.querySelectorAll('.hm-sw-header__fields > *')].filter(e=>e.querySelector('.hm-sw-header__field')).map(e=>e.dataset.control??({layer:'layer',color:'color','line-style':'lineStyle','text-style':'textStyle','dimension-style':'dimensionStyle'}[e.dataset.menu]??(e.classList.contains('hm-sw-header__layer')?'layer':null)))})
 const snapshots = {}
 try {
  if (mode === 'capture') {
@@ -45,7 +52,9 @@ try {
    await page.locator('[data-detail-row="문자스타일 상세"] [data-detail-case="hover"] button').hover()
    await page.screenshot({path:path.join(output,'comparison-pointer-hover.png'),fullPage:true})
  } else if (mode === 'preservation') {
-    await goto('composition')
+    // 2026-10-20: Composition, Colorize and Layer Detail · Input were removed (5faa1f1). K Guide renders the same fluid
    // figmaArgs Header (window motion, K guide), Overview's Header the btn_colorize menu, the comparison the editable Input.
    await goto('k-guide')
    for(const width of [390,768,1280,1440]){
      await page.setViewportSize({width,height:1000})
      const layout=await page.locator('header.hm-sw-header').first().evaluate(h=>({height:h.getBoundingClientRect().height,overflow:h.scrollWidth-h.clientWidth,documentOverflow:document.documentElement.scrollWidth-document.documentElement.clientWidth}))
@@ -57,27 +66,48 @@ try {
      const box=await page.locator(`[data-compare="${id}"] .hm-sw-property`).boundingBox()
      check(`preserve property panel ${id}`,box.width===314&&box.height===height,box)
    }
-    await goto('composition')
+    await goto('k-guide')
    const motion=page.locator('[data-sw-window-move]').first();await motion.hover()
    check('preserve window motion 1400ms',await motion.evaluate(e=>e.getAnimations({subtree:true}).length===3&&e.getAnimations({subtree:true}).every(a=>a.effect.getTiming().duration===1400)))
    await page.mouse.move(1,900);check('window motion leave clears animations',await motion.evaluate(e=>e.getAnimations({subtree:true}).length===0))
    const guide=page.locator('.hm-sw-k-guide').first();await guide.locator('button').hover()
    check('preserve K guide animation',await guide.locator('.hm-sw-k-guide__panel').isVisible()&&await guide.locator('.hm-sw-k-guide__panel').evaluate(e=>getComputedStyle(e).animationDuration==='0.511s'))
    await page.mouse.move(1,900);check('K guide leave closes',await guide.locator('.hm-sw-k-guide__panel').count()===0)
-    await goto('colorize');const colorHeader=page.locator('header.hm-sw-header').first();await colorHeader.getByRole('button',{name:'색상',exact:true}).click()
+    await goto('overview');const colorHeader=page.locator('header.hm-sw-header').first();await colorHeader.getByRole('button',{name:'색상',exact:true}).click()
-    check('preserve Colorize size',(await colorHeader.getByRole('button',{name:'색상 추출',exact:true}).boundingBox()).width===24)
+    check('preserve Colorize size (Overview Header)',(await colorHeader.getByRole('button',{name:'색상 추출',exact:true}).boundingBox()).width===24)
-    await goto('layer-detail-input');const editing=page.getByRole('textbox',{name:'Editing',exact:true})
+    await goto('property-panel-compare');const editing=page.locator('[data-compare="circle"] [data-property-id="radius"] input.hm-sw-header__input').first()
-    check('preserve editable Input',await editing.isEditable()&&await editing.evaluate(e=>getComputedStyle(e).caretColor==='rgb(230, 4, 3)'))
+    check('preserve editable Input (Property Panel · 4개 비교)',await editing.isEditable()&&await editing.evaluate(e=>getComputedStyle(e).caretColor==='rgb(230, 4, 3)'))
  } else if (mode === 'composition-history') {
    // Historical: the verify-mode Composition preset loop of 2026-10-19 on sw-header--composition (removed in 5faa1f1).
    // Run it only against a Storybook built at or before c8e5fbe (base-url); the current Storybook has no such Story.
    await goto('composition')
    const presets=['기본 전체','구성 A','구성 B (레이어·선스타일)','구성 C (로고만)','파일 목록 제거','레이어 제거','색상 제거','스타일 그룹 제거','여러 메뉴 제거','순서 변경','숨김 + 순서 변경']
    const all=['layer','color','lineStyle','textStyle','dimensionStyle']
    const removed=[[],['textStyle','dimensionStyle'],['color','textStyle','dimensionStyle'],all,[],['layer'],['color'],['lineStyle','textStyle','dimensionStyle'],['color','textStyle'],[],['layer','textStyle']]
    const orders=[...Array(9).fill(all),['color','layer','dimensionStyle','lineStyle','textStyle'],['dimensionStyle','textStyle','color','layer','lineStyle']]
    for(let p=0;p<presets.length;p++)for(const width of [1920,1440,1080,900,768,640,390]){
      await page.setViewportSize({width,height:1000});await page.getByRole('button',{name:presets[p],exact:true}).click()
      const h=page.locator('[data-composition-demo] header.hm-sw-header')
      const actual=await h.evaluate(composedMenus)
      const expected=orders[p].filter(id=>!removed[p].includes(id))
      check(`composition ${presets[p]} @${width}`,actual.height===49&&actual.overflow===0&&JSON.stringify(actual.menus)===JSON.stringify(expected),{actual,expected})
      const more=h.locator('.hm-sw-header__more-trigger')
      if(await more.isVisible()) {await more.click();const items=await h.locator('.hm-sw-header__more-item').allTextContents();check(`nonempty More ${presets[p]} @${width}`,items.length>0);await page.keyboard.press('Escape')}
    }
  } else {
  const index = await (await fetch(`${base}/index.json`)).json()
  const ids = swStoryEntries(index).map(e => e.id)
  report.storyIds = ids
  if (mode === 'baseline') await writeFile(path.join(output, 'baseline-story-ids.json'), JSON.stringify(ids))
  // These retained examples cover fixed-width and fluid headers after the two Args demos were retired.
-  for (const story of ['overview', 'composition']) {
+  // 2026-10-20: Composition was removed (5faa1f1); K Guide renders the same fluid figmaArgs Header.
  for (const story of ['overview', 'k-guide']) {
    await goto(story)
    for (const width of [1920,1800,1440,1180,1080,900,768,640,520,390]) {
      await page.setViewportSize({ width, height:1000 })
      // 2026-10-20: Overview sizes its 16:9 Stage through a ResizeObserver; wait until the Header box holds for three frames
      // (without it a snapshot could catch the previous width, so baseline and verify differed on the same build).
      await page.locator('header.hm-sw-header').first().evaluate(h => new Promise(resolve => { let last = '', stable = 0; const tick = () => { const r = h.getBoundingClientRect(), now = [r.x, r.y, r.width].join(); stable = now === last ? stable + 1 : 0; last = now; stable >= 3 ? resolve() : requestAnimationFrame(tick) }; requestAnimationFrame(tick) }))
      snapshots[`${story}-${width}`] = await page.locator('header.hm-sw-header').first().evaluate(h => [h,...h.querySelectorAll('*')].map(e => {
        const b=e.getBoundingClientRect(),s=getComputedStyle(e)
        return {tag:e.tagName,class:e.getAttribute('class'),x:b.x,y:b.y,width:b.width,height:b.height,display:s.display,visibility:s.visibility,color:s.color,background:s.backgroundColor}
@@ -104,24 +134,24 @@ try {
    const retiredIds=['default','controls','responsive','text-stroke','dynamic-data','layer-dropdown','color-dropdown','line-style-dropdown','text-dimension-style-dropdown'].map(id=>`sw-header--${id}`)
    // 2026-10-19: the five duplicate property panel demos are retired as well (24 -> 19).
    retiredIds.push(...retiredPropertyPanelIds)
-    const retainedIds=retainedInventory(oldIds.map(id=>({id}))).map(e=>e.id).filter(id=>!retiredPropertyPanelIds.includes(id))
+    // 2026-10-20: then the nine unused demos (5faa1f1) and the Popup move; the approved Header additions are listed in
-    check('retained stories remain; only approved retirements are absent',ids.length===19&&retainedIds.every(id=>ids.includes(id))&&retiredIds.every(id=>!ids.includes(id)),{before:oldIds.length,after:ids.length})
+    // storybook-inventory.mjs. Expected from this run's baseline and from the list recorded on 2026-10-16 (which predates
    // this suite's own sw-header--detail-buttons), so a fresh baseline cannot accept an unapproved Story.
    retiredIds.push(...retiredUnusedDemoIds)
    const expectedFrom=list=>{const retained=retainedInventory(list.map(id=>({id}))).map(e=>e.id).filter(id=>!laterRetiredHeaderIds.includes(id)&&!movedToPopupIds.includes(id));return {retained,ids:[...new Set([...retained,...approvedAddedHeaderIds,'sw-header--detail-buttons'])].sort()}}
    const fromBaseline=expectedFrom(oldIds),fromRecorded=expectedFrom(JSON.parse(await readFile('docs/sw/detail-button-qa/baseline-story-ids.json','utf8')))
    check('retained stories remain; only approved retirements are absent; only approved additions',JSON.stringify([...ids].sort())===JSON.stringify(fromBaseline.ids)&&JSON.stringify(fromBaseline.ids)===JSON.stringify(fromRecorded.ids)&&fromBaseline.retained.every(id=>ids.includes(id))&&retiredIds.every(id=>!ids.includes(id))&&movedToPopupIds.every(id=>index.entries[id]?.title==='SW/Popup'),{before:oldIds.length,after:ids.length,unexpected:ids.filter(id=>!fromRecorded.ids.includes(id)),missing:fromRecorded.ids.filter(id=>!ids.includes(id))})
    for(const id of ids){await goto(id.replace('sw-header--',''));check(`render ${id}`,!(await page.locator('.sb-errordisplay').isVisible()))}
-    await goto('composition')
+    // 2026-10-20: the Composition presets (hiddenControls / menuOrder) are the `composition-history` mode. The configured
-    const presets=['기본 전체','구성 A','구성 B (레이어·선스타일)','구성 C (로고만)','파일 목록 제거','레이어 제거','색상 제거','스타일 그룹 제거','여러 메뉴 제거','순서 변경','숨김 + 순서 변경']
+    // composition that stays public is Document Open's `controls` allowlist, rendered at ten frame widths.
-    const all=['layer','color','lineStyle','textStyle','dimensionStyle']
+    await goto('document-open')
-    const removed=[[],['textStyle','dimensionStyle'],['color','textStyle','dimensionStyle'],all,[],['layer'],['color'],['lineStyle','textStyle','dimensionStyle'],['color','textStyle'],[],['layer','textStyle']]
+    for(const width of [1920,1800,1440,1180,1080,900,768,640,520,390]){
-    const orders=[...Array(9).fill(all),['color','layer','dimensionStyle','lineStyle','textStyle'],['dimensionStyle','textStyle','color','layer','lineStyle']]
+      const h=page.locator(`[data-composed-responsive] [data-width="${width}"] header.hm-sw-header`)
-    for(let p=0;p<presets.length;p++)for(const width of [1920,1440,1080,900,768,640,390]){
+      const actual=await h.evaluate(composedMenus)
-      await page.setViewportSize({width,height:1000});await page.getByRole('button',{name:presets[p],exact:true}).click()
+      check(`controls allowlist composition @${width}`,actual.height===49&&actual.overflow===0&&JSON.stringify(actual.menus)===JSON.stringify(['layer','color']),actual)
      const h=page.locator('[data-composition-demo] header.hm-sw-header')
      const actual=await h.evaluate(h=>({height:h.getBoundingClientRect().height,overflow:h.scrollWidth-h.clientWidth,menus:[...h.querySelectorAll('.hm-sw-header__fields > *')].filter(e=>e.querySelector('.hm-sw-header__field')).map(e=>e.dataset.control??({layer:'layer',color:'color','line-style':'lineStyle','text-style':'textStyle','dimension-style':'dimensionStyle'}[e.dataset.menu]??(e.classList.contains('hm-sw-header__layer')?'layer':null)))}))
      const expected=orders[p].filter(id=>!removed[p].includes(id))
      check(`composition ${presets[p]} @${width}`,actual.height===49&&actual.overflow===0&&JSON.stringify(actual.menus)===JSON.stringify(expected),{actual,expected})
      const more=h.locator('.hm-sw-header__more-trigger')
-      if(await more.isVisible()) {await more.click();const items=await h.locator('.hm-sw-header__more-item').allTextContents();check(`nonempty More ${presets[p]} @${width}`,items.length>0);await page.keyboard.press('Escape')}
+      if(await more.isVisible()) {await more.click();const items=await h.locator('.hm-sw-header__more-item').allTextContents();check(`nonempty More controls allowlist @${width}`,items.length>0,items);await page.keyboard.press('Escape')}
    }
    await page.setViewportSize({width:1920,height:1000})
    // Real dropdown integration, separate from the shared-button specimen.
    await goto('composed-controls')
    const host=page.locator('.sw-composed-controls')
@@ -135,11 +165,12 @@ try {
      }
      await detail.click();check(`actual ${name} callback / close / focus`,(await host.locator('[data-callback-log]').textContent()).includes(callback)&&await trigger.getAttribute('aria-expanded')==='false'&&await trigger.evaluate(e=>e===document.activeElement))
    }
-    await goto('layer-detail-input')
+    // Layer Detail · Input was removed (5faa1f1); Overview's Header connects onLayerDetail to its callback output.
-    const layerHost=page.locator('section').filter({has:page.getByRole('heading',{name:'레이어 상세 Click Callback',exact:true})})
+    await goto('overview')
    const layerHost=page.locator('header.hm-sw-header').first()
    const layerTrigger=layerHost.getByRole('button',{name:'레이어',exact:true});await layerTrigger.click()
    await layerHost.getByRole('button',{name:'레이어 상세',exact:true}).click()
-    check('actual layer callback / close / focus',(await layerHost.locator('[data-callback-log]').textContent()).includes('onLayerDetail')&&await layerTrigger.getAttribute('aria-expanded')==='false'&&await layerTrigger.evaluate(e=>e===document.activeElement))
+    check('actual layer callback / close / focus (Overview)',(await page.locator('[data-preview-callback]').textContent()).includes('onLayerDetail')&&await layerTrigger.getAttribute('aria-expanded')==='false'&&await layerTrigger.evaluate(e=>e===document.activeElement))
    await goto('detail-buttons')
    const rows=page.locator('[data-detail-comparison] [data-detail-row]')
    const names=['레이어 상세','색상 상세','선스타일 상세','문자스타일 상세','치수스타일 상세'], widths=[113,99,128,142,142]
@@ -5,8 +5,9 @@ import { execFileSync } from 'node:child_process'
 import path from 'node:path'
 import http from 'node:http'
 import { parse } from '@babel/parser'
-import { retiredDropdownIds, swStoryEntries, retainedInventory, inventorySignature } from './storybook-inventory.mjs'
+import { retiredDropdownIds, swStoryEntries, retainedInventory, inventorySignature, laterRetiredHeaderIds, headerInventoryIssues, withApprovedEntryChanges, approvedAddedStoryIds, movedToPopupIds, headerSourceIssues, approvedMainCommit, integratedChangedFiles } from './storybook-inventory.mjs'
 import { loadPlaywright } from './playwright-runtime.mjs'
 import { sourceChanges, unapprovedChanges } from './source-changes.mjs'
 const out = path.resolve(process.argv[2] ?? 'docs/sw/storybook-dropdown-page-qa')
 await mkdir(out, { recursive: true })
@@ -20,12 +21,29 @@ const previousSW = swStoryEntries(previous)
 report.menuCorrectionBaseCommit = '9482d45f340981c4b4ad6537cb678bf4afcdc681'
 await writeFile(path.join(out, 'after-full-index.json'), JSON.stringify(after, null, 2) + '\n')
 await writeFile(path.join(out, 'story-inventory.json'), JSON.stringify({ before: beforeSW, after: afterSW, removed: beforeSW.filter(e => retiredDropdownIds.includes(e.id)) }, null, 2) + '\n')
-check('28 -> 24 SW Stories, exactly four approved Dropdown retirements', beforeSW.length === 28 && afterSW.length === 24 &&
+// 2026-10-20 (test alignment): each inventory and source check asserts the consolidation on its recorded state (the
-  JSON.stringify(inventorySignature(retainedInventory(beforeSW))) === JSON.stringify(inventorySignature(afterSW)))
+// index of the c705a1f smoke run and the c705a1f source, read from Git) and, for today, only the approved later
 // changes listed in storybook-inventory.mjs. The browser checks below run unchanged on the current Storybook.
 report.consolidationCommit = 'c705a1fc59fe8ecbce663bf4601638fde43553a1'
 const git = (...args) => execFileSync('git', args, { encoding: 'utf8', maxBuffer: 1 << 26 })
 const recorded = JSON.parse(git('show', `${report.consolidationCommit}:docs/sw/storybook-dropdown-page-qa/smoke/after-full-index.json`))
 const recordedSW = swStoryEntries(recorded)
 const signature = list => JSON.stringify(inventorySignature(list))
 const now = headerInventoryIssues(beforeSW, after)
 check('28 -> 24 SW Stories, exactly four approved Dropdown retirements (recorded at c705a1f); now only approved later changes', beforeSW.length === 28 && recordedSW.length === 24 &&
  signature(retainedInventory(beforeSW)) === signature(recordedSW) && now.ok, { recorded: recordedSW.length, ...now })
 check('Dropdown is one Story directly under Header with original ID, no Dropdown folder', afterSW.filter(e => e.name === 'Dropdown').length === 1 && after.entries['sw-header--composed-controls']?.title === 'SW/Header' && !afterSW.some(e => e.title.startsWith('SW/Header/')))
-check('menu correction keeps all 24 IDs; only composed Story name/title change', previousSW.length === 24 && afterSW.length === 24 && JSON.stringify(inventorySignature(retainedInventory(previousSW))) === JSON.stringify(inventorySignature(afterSW)) && JSON.stringify(previousSW.filter(e => e.id !== 'sw-header--composed-controls')) === JSON.stringify(afterSW.filter(e => e.id !== 'sw-header--composed-controls')))
+const otherRetained = list => list.filter(e => e.id !== 'sw-header--composed-controls')
 const keptNow = otherRetained(previousSW).filter(e => !laterRetiredHeaderIds.includes(e.id))
 check('menu correction keeps all 24 IDs; only composed Story name/title change (recorded at c705a1f); the other entries now differ only by approved changes',
  previousSW.length === 24 && recordedSW.length === 24 && signature(retainedInventory(previousSW)) === signature(recordedSW) && JSON.stringify(otherRetained(previousSW)) === JSON.stringify(otherRetained(recordedSW)) &&
  JSON.stringify(keptNow.map(withApprovedEntryChanges)) === JSON.stringify(keptNow.map(e => after.entries[e.id])), keptNow.filter(e => JSON.stringify(withApprovedEntryChanges(e)) !== JSON.stringify(after.entries[e.id])).map(e => e.id))
 const nonSW = index => Object.values(index.entries).filter(e => !e.title.startsWith('SW/Header'))
-check('all non-SW index entries identical', JSON.stringify(nonSW(before)) === JSON.stringify(nonSW(after)))
+// Today: entries outside SW keep their values and order; SW entries outside SW/Header are exactly the approved additions and the Popup move.
 const outsideSW = index => JSON.stringify(Object.values(index.entries).filter(e => !e.id.startsWith('sw-')))
 const otherSW = { actual: nonSW(after).filter(e => e.id.startsWith('sw-')).map(e => e.id).sort(), expected: [...approvedAddedStoryIds.filter(id => !id.startsWith('sw-header--')), ...movedToPopupIds].sort() }
 check('all non-SW index entries identical (recorded at c705a1f and now); other SW titles hold only approved additions and the Popup move', JSON.stringify(nonSW(before)) === JSON.stringify(nonSW(recorded)) &&
  outsideSW(before) === outsideSW(after) && JSON.stringify(otherSW.actual) === JSON.stringify(otherSW.expected), otherSW)
 const sourcePath = 'src/sw/sw-header.stories.tsx'
 const original = execFileSync('git', ['show', `${report.baseCommit}:${sourcePath}`], { encoding: 'utf8' }).replaceAll('\r\n', '\n')
 const source = (await readFile(sourcePath, 'utf8')).replaceAll('\r\n', '\n')
@@ -35,9 +53,19 @@ const declarations = text => Object.fromEntries(parse(text, { sourceType: 'modul
 }))
 const oldDeclarations = declarations(original), currentDeclarations = declarations(source)
 const removed = ['LayerDropdown', 'ColorDropdown', 'LineStyleDropdown', 'TextDimensionStyleDropdown', 'ComposedControls', 'IconMatrix', 'ICON_LAYERS', 'NARROW_LAYER_WIDTHS', 'MENU_BUTTON_HOVER']
-check('all retained declarations identical outside imports, meta and ComposedDemo', Object.entries(oldDeclarations).filter(([key]) => ![...removed, 'ImportDeclaration', 'meta', 'ComposedDemo'].includes(key)).every(([key, value]) => currentDeclarations[key] === value))
+const ignored = [...removed, 'ImportDeclaration', 'meta', 'ComposedDemo']
 const declarationsAt = commit => declarations(git('show', `${commit}:${sourcePath}`).replaceAll('\r\n', '\n'))
 const consolidated = declarationsAt(report.consolidationCommit)
 const sinceConsolidation = headerSourceIssues([...new Set([...Object.keys(consolidated), ...Object.keys(currentDeclarations)])].filter(key => !ignored.includes(key)), consolidated, currentDeclarations, declarationsAt)
 check('all retained declarations identical outside imports, meta and ComposedDemo (at c705a1f); later changes only by approved commits at their approved content',
  Object.entries(oldDeclarations).filter(([key]) => !ignored.includes(key)).every(([key, value]) => consolidated[key] === value) && sinceConsolidation.length === 0, sinceConsolidation)
 const untouched = ['packages/sw/src', 'packages/sw/ai', 'packages/sw/package.json', 'src/sw/sw-header-overview.tsx', 'src/sw/sw-stories.css', 'src/sw/assets', '.storybook']
-check('runtime, API, AI template, Overview, existing CSS/assets and Storybook configuration untouched', !execFileSync('git', ['diff', report.baseCommit, '--', ...untouched], { encoding: 'utf8' }))
+// Today the same paths may differ from the approved main merge only in the integrated-improvement files (as in overview.browser.mjs).
 // Untracked new files count as changes (source-changes.mjs).
 const sourceDiff = { consolidation: git('diff', '--name-only', report.baseCommit, report.consolidationCommit, '--', ...untouched).trim(),
  unapproved: unapprovedChanges(approvedMainCommit, untouched, integratedChangedFiles),
  sinceBaseline: sourceChanges(report.baseCommit, untouched).length }
 check('runtime, API, AI template, Overview, existing CSS/assets and Storybook configuration untouched by the consolidation; unchanged since the approved main merge', sourceDiff.consolidation === '' && sourceDiff.unapproved.length === 0, sourceDiff)
 const root = path.resolve('storybook-static'), mime = { '.html': 'text/html', '.js': 'text/javascript', '.css': 'text/css', '.json': 'application/json', '.svg': 'image/svg+xml', '.ttf': 'font/ttf', '.png': 'image/png' }
 const server = http.createServer(async (req, res) => {
@@ -0,0 +1,45 @@
 // Test-only host for header-composition.browser.mjs (2026-10-20). Not a Storybook Story and not shipped (package
 // "files" is dist + ai). It replaces the Composition demo removed in 5faa1f1 for the hiddenControls / menuOrder checks.
 // Uses only the public @hm-design/sw API, like a consuming project. window.__setComposition({ hidden, order }) changes
 // the props at runtime; the layer selection is host state, so it must survive reordering, hiding and showing again.
 import { useEffect, useState } from "react"
 import { createRoot } from "react-dom/client"
 import { SWHeader, type SWHeaderHideableControlId, type SWHeaderLayer, type SWHeaderMenuId } from "@hm-design/sw"
 import "@hm-design/sw/styles.css"
 type Composition = { hidden?: SWHeaderHideableControlId[]; order?: SWHeaderMenuId[] }
 declare global { interface Window { __setComposition?: (next: Composition) => void; __callbacks: string[] } }
 window.__callbacks = []
 const LAYERS: SWHeaderLayer[] = [
  { id: "0", name: "0", color: "#ffffff" },
  { id: "wall", name: "WALL", color: "#ff4242" },
  { id: "dim", name: "DIM", color: "#47af91" },
 ]
 const record = (line: string) => { window.__callbacks.push(line) }
 function Host() {
  const [composition, setComposition] = useState<Composition>({})
  const [layerId, setLayerId] = useState("0")
  useEffect(() => { window.__setComposition = next => setComposition(next) }, [])
  const layer = LAYERS.find(item => item.id === layerId)!
  return (
    <div data-composition-fixture="" data-hidden={(composition.hidden ?? []).join(",")} data-order={composition.order?.join(",") ?? "default"}>
      <SWHeader
        documentTitle="C0020101-006-평면및종단면도(06)" drawingModeLabel="그리기모드"
        documents={[{ id: "doc-current", name: "C0020101-006-평면및종단면도(06)" }]} activeDocumentId="doc-current"
        layers={LAYERS} activeLayerId={layerId} layer={{ name: layer.name }}
        color={{ value: "255,229,0", swatch: "#ffe500" }}
        lineStyle={{ name: "Continuous", weight: "0.25", scale: "1.00" }}
        textStyle={{ font: "Arial", name: "Standard" }} dimensionStyle={{ name: "Standard" }}
        hiddenControls={composition.hidden} menuOrder={composition.order}
        onHomeClick={() => record("onHomeClick")} onLayerSelect={item => { setLayerId(item.id); record(`onLayerSelect(${item.id})`) }}
        onLayerOpen={() => record("onLayerOpen")} onColorOpen={() => record("onColorOpen")} onLineStyleOpen={() => record("onLineStyleOpen")}
        onTextStyleOpen={() => record("onTextStyleOpen")} onDimensionStyleOpen={() => record("onDimensionStyleOpen")}
        onPrint={() => record("onPrint")} onPopupGuide={() => record("onPopupGuide")} onMinimize={() => record("onMinimize")} onClose={() => record("onClose")}
      />
    </div>
  )
 }
 createRoot(document.getElementById("root")!).render(<Host />)
@@ -0,0 +1,21 @@
 // Test-only host for keyboard-dismiss.browser.mjs (2026-10-20): SWToolGroup selection="single" has no current Story
 // (SW/Tool was removed in 7f42923). Public @hm-design/sw API only; the host owns the pressed option.
 import { useState } from "react"
 import { createRoot } from "react-dom/client"
 import { SWTheme, SWToolButton, SWToolGroup } from "@hm-design/sw"
 import "@hm-design/sw/styles.css"
 const OPTIONS = [{ id: "a", label: "모델" }, { id: "b", label: "배치" }, { id: "c", label: "단면", disabled: true }, { id: "d", label: "상세" }]
 function Host() {
  const [selected, setSelected] = useState("b")
  return (
    <SWTheme data-tool-fixture="" data-selected={selected}>
      <SWToolGroup label="보기" selection="single">
        {OPTIONS.map(option => <SWToolButton key={option.id} data-option={option.id} pressed={selected === option.id} disabled={option.disabled} onClick={() => setSelected(option.id)}>{option.label}</SWToolButton>)}
      </SWToolGroup>
    </SWTheme>
  )
 }
 createRoot(document.getElementById("root")!).render(<Host />)
@@ -0,0 +1,122 @@
 // SWHeader hiddenControls / menuOrder regression on a test-only fixture (2026-10-20). The Composition Story that showed
 // these props was removed in 5faa1f1 (approved); this suite keeps its eleven presets × seven widths (detail-buttons
 // composition-history) and adds the documented edge cases: unknown / duplicate ids, every hideable part, runtime changes
 // that keep host values and call no callback. Build the package first: npm run build -w @hm-design/sw
 // Usage: node packages/sw/tests/header-composition.browser.mjs <new-evidence-dir>
 import { mkdir, readFile, writeFile } from 'node:fs/promises'
 import { createRequire } from 'node:module'
 import path from 'node:path'
 import http from 'node:http'
 import { fileURLToPath } from 'node:url'
 import { loadPlaywright } from './playwright-runtime.mjs'
 const out = path.resolve(process.argv[2] ?? '')
 if (!process.argv[2]) throw new Error('Pass a new evidence directory')
 const site = path.join(out, 'fixture')
 await mkdir(site, { recursive: true })
 const require = createRequire(import.meta.url)
 await require('esbuild').build({
  entryPoints: [fileURLToPath(new URL('./fixtures/header-composition.tsx', import.meta.url))], bundle: true, outdir: site, format: 'esm', jsx: 'automatic', minify: true,
  loader: { '.ttf': 'file', '.woff': 'file', '.woff2': 'file', '.svg': 'file', '.png': 'file' }, define: { 'process.env.NODE_ENV': '"production"' }, logLevel: 'warning',
 })
 await writeFile(path.join(site, 'index.html'), '<!doctype html><html lang="ko"><head><meta charset="utf-8"><link rel="icon" href="data:,"><link rel="stylesheet" href="header-composition.css"></head><body style="margin:0"><div id="root"></div><script type="module" src="header-composition.js"></script></body></html>')
 const mime = { '.html': 'text/html', '.js': 'text/javascript', '.css': 'text/css', '.svg': 'image/svg+xml', '.png': 'image/png', '.ttf': 'font/ttf', '.woff2': 'font/woff2' }
 const server = http.createServer(async (req, res) => { try { const p = new URL(req.url, 'http://localhost').pathname, file = path.resolve(site, '.' + decodeURIComponent(p === '/' ? '/index.html' : p)); if (path.relative(site, file).startsWith('..')) return res.writeHead(403).end(); res.setHeader('Content-Type', mime[path.extname(file)] ?? 'application/octet-stream'); res.end(await readFile(file)) } catch { res.writeHead(404).end() } })
 await new Promise(resolve => server.listen(0, '127.0.0.1', resolve))
 const report = { checks: [], errors: [] }
 const check = (name, ok, data) => { report.checks.push({ name, status: ok ? 'PASS' : 'FAIL', data }); if (!ok) console.error('FAIL', name, JSON.stringify(data)) }
 const { chromium } = loadPlaywright()
 const browser = await chromium.launch({ headless: true, executablePath: process.env.SW_CHROME_PATH ?? 'C:/Program Files/Google/Chrome/Application/chrome.exe' })
 report.browser = browser.version()
 const page = await browser.newPage({ viewport: { width: 1920, height: 900 } })
 page.on('pageerror', e => report.errors.push(e.message))
 page.on('console', m => { if (m.type() === 'error') report.errors.push(m.text()) })
 const header = page.locator('[data-composition-fixture] header.hm-sw-header')
 const set = async composition => {
  await page.evaluate(next => window.__setComposition(next), composition)
  await page.waitForFunction(next => document.querySelector('[data-composition-fixture]')?.dataset.order === (next.order?.join(',') ?? 'default') && document.querySelector('[data-composition-fixture]')?.dataset.hidden === (next.hidden ?? []).join(','), composition)
  // The fields measure themselves (ResizeObserver); wait until the field boxes hold for three frames.
  await header.evaluate(h => new Promise(resolve => { let last = '', stable = 0; const tick = () => { const now = [...h.querySelectorAll('.hm-sw-header__field, .hm-sw-header__more-trigger')].map(e => { const r = e.getBoundingClientRect(); return [r.x, r.width].join() }).join('|'); stable = now === last ? stable + 1 : 0; last = now; stable >= 3 ? resolve() : requestAnimationFrame(tick) }; requestAnimationFrame(tick) }))
 }
 // Header height, overflow and the menus inside its fields in DOM order (detail-buttons' reading, plus bare field buttons:
 // without dropdown data a menu renders as the field itself, not inside a wrapper).
 const composedMenus = h => ({ height: h.getBoundingClientRect().height, overflow: h.scrollWidth - h.clientWidth, menus: [...h.querySelectorAll('.hm-sw-header__fields > *')].filter(e => e.matches('.hm-sw-header__field') || e.querySelector('.hm-sw-header__field')).map(e => e.dataset.control ?? ({ layer: 'layer', color: 'color', 'line-style': 'lineStyle', 'text-style': 'textStyle', 'dimension-style': 'dimensionStyle' }[e.dataset.menu] ?? (e.classList.contains('hm-sw-header__layer') ? 'layer' : null))) })
 const ALL = ['layer', 'color', 'lineStyle', 'textStyle', 'dimensionStyle']
 // Every hideable part except the menus (checked through composedMenus) and the sub-items (Hidden Sub Controls Story).
 const PARTS = {
  home: h => h.locator('button.hm-sw-header__home').count(), document: h => h.locator('.hm-sw-header__document').count(), drawingMode: h => h.locator('.hm-sw-header__mode').count(),
  details: h => h.getByRole('group', { name: '상세보기', exact: true }).count(), propertyBar: h => h.getByRole('button', { name: '속성Bar', exact: true }).count(), propertyPanel: h => h.getByRole('button', { name: '속성창', exact: true }).count(),
  print: h => h.locator('.hm-sw-header__action--print').count(), popupGuide: h => h.locator('.hm-sw-header__action--guide').count(), windowMove: h => h.locator('[data-sw-window-move]').count(),
  minimize: h => h.locator('.hm-sw-header__window-button--minimize').count(), close: h => h.locator('.hm-sw-header__window-button--close').count(),
 }
 const present = async () => Object.fromEntries(await Promise.all(Object.entries(PARTS).map(async ([id, count]) => [id, await count(header) > 0])))
 try {
  await page.goto(`http://127.0.0.1:${server.address().port}/`)
  await header.waitFor(); await page.evaluate(() => document.fonts.ready)
  await set({})
  const defaults = await present()
  check('default: every part and the five menus in the approved order', Object.values(defaults).every(Boolean) && JSON.stringify((await header.evaluate(composedMenus)).menus) === JSON.stringify(ALL), { defaults, ...(await header.evaluate(composedMenus)) })
  // 1. The eleven Composition presets of 2026-10-19 at seven widths (expected menus unchanged from that Story).
  const hideable = [...Object.keys(PARTS).slice(0, 3), ...ALL, ...Object.keys(PARTS).slice(3)]
  const presets = [
    ['기본 전체', []], ['구성 A', ['drawingMode', 'textStyle', 'dimensionStyle', 'details', 'propertyBar', 'propertyPanel', 'print', 'popupGuide', 'windowMove', 'minimize', 'close']],
    ['구성 B (레이어·선스타일)', hideable.filter(id => id !== 'layer' && id !== 'lineStyle')], ['구성 C (로고만)', hideable],
    ['파일 목록 제거', ['document']], ['레이어 제거', ['layer']], ['색상 제거', ['color']], ['스타일 그룹 제거', ['lineStyle', 'textStyle', 'dimensionStyle']],
    ['여러 메뉴 제거', ['document', 'color', 'textStyle', 'print', 'minimize']],
    ['순서 변경', [], ['color', 'layer', 'dimensionStyle', 'lineStyle', 'textStyle']], ['숨김 + 순서 변경', ['layer', 'textStyle'], ['dimensionStyle', 'textStyle', 'color', 'layer']],
  ]
  const orders = [...Array(9).fill(ALL), ['color', 'layer', 'dimensionStyle', 'lineStyle', 'textStyle'], ['dimensionStyle', 'textStyle', 'color', 'layer', 'lineStyle']]
  for (const [p, [name, hidden, order]] of presets.entries()) for (const width of [1920, 1440, 1080, 900, 768, 640, 390]) {
    await page.setViewportSize({ width, height: 900 }); await set({ hidden, order })
    const actual = await header.evaluate(composedMenus), expected = orders[p].filter(id => !hidden.includes(id))
    check(`preset ${name} @${width}: menus, 49px, no overflow`, actual.height === 49 && actual.overflow === 0 && JSON.stringify(actual.menus) === JSON.stringify(expected), { actual, expected })
    const more = header.locator('.hm-sw-header__more-trigger')
    if (await more.isVisible()) { await more.click(); const items = await header.locator('.hm-sw-header__more-item').allTextContents(); check(`preset ${name} @${width}: nonempty More`, items.length > 0, items); await page.keyboard.press('Escape') }
    if (width === 1920) {
      const parts = await present(), wrong = Object.entries(parts).filter(([id, shown]) => shown === hidden.includes(id)).map(([id]) => id)
      check(`preset ${name} @1920: exactly the listed parts removed`, wrong.length === 0, { wrong, parts })
      if (hidden.includes('home')) check(`preset ${name}: hidden home keeps the logo as a static image`, await header.locator('.hm-sw-header__home').count() === 1 && await header.locator('button.hm-sw-header__home').count() === 0)
    }
  }
  await page.setViewportSize({ width: 1920, height: 900 })
  // 2. Invalid settings: unknown / duplicate menuOrder ids are ignored, missing menus follow in the default order.
  await set({ order: ['color', 'color', 'unknown', 'layer'] })
  check('menuOrder: duplicate and unknown ids ignored, missing menus follow in default order', JSON.stringify((await header.evaluate(composedMenus)).menus) === JSON.stringify(['color', 'layer', 'lineStyle', 'textStyle', 'dimensionStyle']), await header.evaluate(composedMenus))
  await set({ order: ['dimensionStyle', 'drawingMode', 'print'] })
  check('menuOrder: non-menu ids ignored; other parts never move', JSON.stringify((await header.evaluate(composedMenus)).menus) === JSON.stringify(['dimensionStyle', 'layer', 'color', 'lineStyle', 'textStyle']) && Object.values(await present()).every(Boolean))
  await set({ order: [] })
  check('menuOrder: empty list keeps the default order', JSON.stringify((await header.evaluate(composedMenus)).menus) === JSON.stringify(ALL))
  await set({ hidden: ['bogus', 'color', 'color'] })
  check('hiddenControls: unknown and duplicate ids ignored', JSON.stringify((await header.evaluate(composedMenus)).menus) === JSON.stringify(['layer', 'lineStyle', 'textStyle', 'dimensionStyle']) && Object.values(await present()).every(Boolean))
  // 3. Runtime changes keep host values and call no callback; a reordered menu still opens its own dropdown.
  await set({})
  await header.getByRole('button', { name: '레이어', exact: true }).click()
  await page.locator('.hm-sw-header__layer-item').filter({ hasText: 'WALL' }).first().click()
  const selected = await page.evaluate(() => [...window.__callbacks])
  check('layer selection reaches the host once', selected.filter(line => line === 'onLayerSelect(wall)').length === 1, selected)
  for (const composition of [{ order: ['dimensionStyle', 'color', 'layer'] }, { hidden: ['layer'] }, { hidden: ['layer'], order: ['color'] }, {}]) {
    await set(composition)
    const field = header.getByRole('button', { name: '레이어', exact: true })
    check(`change to ${JSON.stringify(composition)}: no callback; layer value kept while shown`, (await page.evaluate(() => window.__callbacks.length)) === selected.length && (composition.hidden?.includes('layer') ? await field.count() === 0 : (await field.textContent()).includes('WALL')))
  }
  await set({ order: ['dimensionStyle', 'color', 'layer'] })
  await header.getByRole('button', { name: '레이어', exact: true }).click()
  check('reordered layer field opens its own dropdown and calls only onLayerOpen', await page.locator('.hm-sw-header__layer-panel, .hm-sw-header__layer-menu').count() > 0 && (await page.evaluate(() => window.__callbacks.slice(-1)[0])) === 'onLayerOpen')
  await page.keyboard.press('Escape')
  check('Escape closes it and returns focus to the moved field', await page.locator('.hm-sw-header__layer-panel, .hm-sw-header__layer-menu').count() === 0 && await header.getByRole('button', { name: '레이어', exact: true }).evaluate(e => e === document.activeElement))
  await page.screenshot({ path: path.join(out, 'reordered-1920.png') })
  check('no browser console or page errors', report.errors.length === 0, report.errors)
 } catch (error) { check('suite completed', false, error.stack) }
 finally {
  await browser.close(); server.close()
  report.status = report.checks.every(c => c.status === 'PASS') ? 'PASS' : 'FAIL'
  await writeFile(path.join(out, 'result.json'), JSON.stringify(report, null, 2) + '\n')
  console.log('TOTAL', report.checks.length, 'FAIL', report.checks.filter(c => c.status === 'FAIL').length)
  process.exitCode = report.status === 'PASS' ? 0 : 1
 }
@@ -160,14 +160,16 @@ check('every width: no horizontal scroll in the menu; 5 sections = row + More (1
  responsive.every(r => !r.scrolls && r.rowSections + r.moved === 5 && (r.width !== 1920 || r.moved === 0)), responsive)
 // 8. Without homeMenu (existing Header): the logo still calls onHomeClick only, no menu, no aria-expanded
 // 2026-10-20: Overview passes homeMenu since 170a5c2 (docs/sw/sw-header-usage.md "Overview의 로고도 같은 홈 메뉴"),
 // so this uses the first Logo Slot header (figmaArgs + callbacks, no homeMenu; onHomeClick logs "[SWHeader] home").
 await page.setViewportSize({ width: 1920, height: 1000 })
 const infos = []
 page.on('console', m => { if (m.type() === 'info') infos.push(m.text()) })
-await page.goto(`${base}/iframe.html?id=sw-header--overview&viewMode=story`)
+await page.goto(`${base}/iframe.html?id=sw-header--logo-slot&viewMode=story`)
 await page.locator('.hm-sw-header').first().waitFor()
 await home().click()
 await page.waitForTimeout(50)
-check('without homeMenu: logo click calls onHomeClick, renders no menu, no aria-expanded', infos.some(text => text.includes('onHomeClick')) && await page.locator('.hm-sw-home-menu').count() === 0 && await home().getAttribute('aria-expanded') === null, infos)
+check('without homeMenu: logo click calls onHomeClick, renders no menu, no aria-expanded', infos.some(text => text.includes('[SWHeader] home')) && await page.locator('.hm-sw-home-menu').count() === 0 && await home().getAttribute('aria-expanded') === null, infos)
 check('no page / console errors', report.errors.length === 0, report.errors)
 await writeFile(path.join(out, 'result.json'), JSON.stringify(report, null, 2))
@@ -60,18 +60,28 @@ const geo = s => JSON.stringify([s.box[2], s.box[3], s.icon && [rd(s.icon[0] - s
 async function cycleAll(sel, q, tag) {
  const n = await ev(`[...document.querySelectorAll(${JSON.stringify(sel)})].filter(e => e.getClientRects().length).length`)
  const results = []
  // 2026-10-20: state-based waits replace the fixed 60–100ms sleeps (Firefox sometimes read a tile before :hover or its
  // transition applied, so a tile looked unhovered or a read hit the wrong index). Each read waits until the item's
  // :hover / :active state is the expected one and its transitions ended; a wait that times out is recorded and fails.
  // The preview sets html { scroll-behavior: smooth } (src/hm-theme.css): scroll instantly, or the item is measured mid-scroll
  // and the pointer lands on another tile (the former "저장" hover / index misses).
  // After a release outside the item Firefox keeps :active on it until the next press, so that last wait checks :hover only.
  const settle = (i, hover, active = false) => ev(`(async () => { const el = [...document.querySelectorAll(${JSON.stringify(sel)})].filter(e => e.getClientRects().length)[${i}]
    const frame = () => new Promise(r => requestAnimationFrame(() => r()))
    for (let t = 0; t < 120; t++) { await frame(); if (el.matches(':hover') === ${hover} && (${active === null} || el.matches(':active') === ${active}) && el.getAnimations({ subtree: true }).every(a => a.playState !== 'running')) { await frame(); return true } }
    return false })()`)
  for (let i = 0; i < n; i++) {
-    await ev(`[...document.querySelectorAll(${JSON.stringify(sel)})].filter(e => e.getClientRects().length)[${i}].scrollIntoView({ block: 'center', inline: 'center' }), true`); await sleep(60)
+    await ev(`[...document.querySelectorAll(${JSON.stringify(sel)})].filter(e => e.getClientRects().length)[${i}].scrollIntoView({ block: 'center', inline: 'center', behavior: 'instant' }), true`)
-    await move(1, 1); await sleep(80)
+    await move(1, 1); const waits = [await settle(i, false)]
    const d0 = await snap(sel, i, q)
    const [x, y] = [d0.box[0] + d0.box[2] / 2, d0.box[1] + d0.box[3] / 2]
-    await move(x, y); await sleep(100); const h1 = await snap(sel, i, q)
+    await move(x, y); waits.push(await settle(i, true)); const h1 = await snap(sel, i, q)
-    await move(1, 1); await sleep(100); const d1 = await snap(sel, i, q)
+    await move(1, 1); waits.push(await settle(i, false)); const d1 = await snap(sel, i, q)
-    await move(x, y); await sleep(100); const h2 = await snap(sel, i, q)
+    await move(x, y); waits.push(await settle(i, true)); const h2 = await snap(sel, i, q)
-    await pointer([{ type: 'pointerDown', button: 0 }]); await sleep(80); const a = await snap(sel, i, q)
+    await pointer([{ type: 'pointerDown', button: 0 }]); waits.push(await settle(i, true, true)); const a = await snap(sel, i, q)
-    await pointer([{ type: 'pointerMove', x: 1, y: 1, duration: 0 }, { type: 'pointerUp', button: 0 }]); await sleep(100)
+    await pointer([{ type: 'pointerMove', x: 1, y: 1, duration: 0 }, { type: 'pointerUp', button: 0 }]); waits.push(await settle(i, false, null))
-    const same = [h1, d1, h2, a].every(s => geo(s) === geo(d0))
+    const same = [h1, d1, h2, a].every(s => geo(s) === geo(d0)) && waits.every(Boolean)
-    results.push({ name: d0.name, same, hovered: d0.active || h1.color !== d0.color, d0, h1, a })
+    results.push({ name: d0.name, same, hovered: d0.active || h1.color !== d0.color, d0, h1, a, waits })
    check(`Firefox ${tag} "${d0.name}": icon · text · box unchanged (Default/Hover/Default/Hover/Active)`, same, { d0: geo(d0), h1: geo(h1), a: geo(a) })
  }
  return results
@@ -24,7 +24,10 @@ if (mode === 'capture') {
  await new Promise(resolve => server.listen(0, '127.0.0.1', resolve))
  const base = `http://127.0.0.1:${server.address().port}`
  const { chromium } = require('playwright')
-  const browser = await chromium.launch({ headless: true, executablePath: process.env.SW_CHROME_PATH ?? 'C:/Program Files/Google/Chrome/Application/chrome.exe' })
+  // 2026-10-20: software raster without font hinting / subpixel positioning. Without these flags two captures of the same
  // build differed in text anti-aliasing (Δ1 paragraphs, 2 × 2 glyph spots); with them four captures were identical. The
  // zero threshold of `compare` is unchanged, and a 1px layout change still shows (25 of 28 shots).
  const browser = await chromium.launch({ headless: true, args: ['--disable-gpu', '--font-render-hinting=none', '--disable-font-subpixel-positioning', '--disable-lcd-text', '--force-color-profile=srgb'], executablePath: process.env.SW_CHROME_PATH ?? 'C:/Program Files/Google/Chrome/Application/chrome.exe' })
  const page = await browser.newPage({ viewport: { width: 1920, height: 1000 }, reducedMotion: 'reduce' })
  const errors = []
  page.on('pageerror', e => errors.push(e.message))
@@ -36,7 +39,13 @@ if (mode === 'capture') {
    await page.locator('.hm-sw-header, .hm-sw-theme').first().waitFor()
    await page.evaluate(() => document.fonts.ready)
    await page.mouse.move(1, 1)
    await page.evaluate(() => { window.__swRunning = document.getAnimations().filter(a => a.playState === 'running') })
    await page.addStyleTag({ content: '*,*::before,*::after{animation-play-state:paused!important;animation-delay:0s!important;transition:none!important;caret-color:transparent!important}' })
    // 2026-10-20: the paused animations above stop at whatever time they had reached, so two captures of the same build
    // differed (Window Move Motion). Animations that were running before the pause are set to time 0; specimens the Story paused itself keep
    // their own time. Then wait until the layout holds for three frames (measured Stories such as Responsive More).
    await page.evaluate(() => { for (const a of window.__swRunning) { a.pause(); a.currentTime = 0 } })
    await page.evaluate(() => new Promise(resolve => { let last = '', stable = 0; const tick = () => { const now = [document.documentElement.scrollHeight, ...[...document.querySelectorAll('.hm-sw-header')].map(h => h.getBoundingClientRect().width)].join(); stable = now === last ? stable + 1 : 0; last = now; stable >= 3 ? resolve() : requestAnimationFrame(tick) }; requestAnimationFrame(tick) }))
    await page.waitForTimeout(150)
    const file = `${id}-${width}.png`
    await page.screenshot({ path: path.join(out, file), fullPage: true })
@@ -0,0 +1,117 @@
 // Roving focus and outside-pointer dismissal of the shared internal helpers (2026-10-20): moveRovingFocus
 // (SWToolGroup, SWFooter, SWViewerHeader tabs, SWHomeMenu) and useOutsidePointerDown (SWHeader dropdowns, layer menu,
 // document title, More). The existing suites only moved between middle items and closed menus by moving focus, which
 // also closes them; this suite checks wrap-around, Home / End, disabled skipping, selection, and a pointerdown outside
 // that leaves focus in place. SWToolGroup runs on a test-only fixture; the others on the built Storybook.
 // Build Storybook first. Usage: node packages/sw/tests/keyboard-dismiss.browser.mjs <new-evidence-dir>
 // SW_STORYBOOK_DIR: another built Storybook (e.g. a copy built before a change) instead of storybook-static.
 import { mkdir, readFile, writeFile } from 'node:fs/promises'
 import { createRequire } from 'node:module'
 import path from 'node:path'
 import http from 'node:http'
 import { fileURLToPath } from 'node:url'
 import { loadPlaywright } from './playwright-runtime.mjs'
 if (!process.argv[2]) throw new Error('Pass a new evidence directory')
 const out = path.resolve(process.argv[2]), site = path.join(out, 'fixture')
 await mkdir(site, { recursive: true })
 await createRequire(import.meta.url)('esbuild').build({
  entryPoints: [fileURLToPath(new URL('./fixtures/tool-group.tsx', import.meta.url))], bundle: true, outdir: site, format: 'esm', jsx: 'automatic', minify: true,
  loader: { '.ttf': 'file', '.woff': 'file', '.woff2': 'file', '.svg': 'file', '.png': 'file' }, define: { 'process.env.NODE_ENV': '"production"' }, logLevel: 'warning',
 })
 await writeFile(path.join(site, 'index.html'), '<!doctype html><html lang="ko"><head><meta charset="utf-8"><link rel="icon" href="data:,"><link rel="stylesheet" href="tool-group.css"></head><body style="margin:0;padding:24px;background:#333"><div id="root"></div><script type="module" src="tool-group.js"></script></body></html>')
 const mime = { '.html': 'text/html', '.js': 'text/javascript', '.css': 'text/css', '.json': 'application/json', '.svg': 'image/svg+xml', '.png': 'image/png', '.ttf': 'font/ttf', '.woff2': 'font/woff2' }
 const serve = root => { const server = http.createServer(async (req, res) => { try { const p = new URL(req.url, 'http://localhost').pathname, file = path.resolve(root, '.' + decodeURIComponent(p === '/' ? '/index.html' : p)); if (path.relative(root, file).startsWith('..')) return res.writeHead(403).end(); res.setHeader('Content-Type', mime[path.extname(file)] ?? 'application/octet-stream'); res.end(await readFile(file)) } catch { res.writeHead(404).end() } }); return new Promise(resolve => server.listen(0, '127.0.0.1', () => resolve(server))) }
 const [fixtureServer, storybookServer] = await Promise.all([serve(site), serve(path.resolve(process.env.SW_STORYBOOK_DIR ?? 'storybook-static'))])
 const fixtureBase = `http://127.0.0.1:${fixtureServer.address().port}`, base = `http://127.0.0.1:${storybookServer.address().port}`
 const report = { checks: [], errors: [] }
 const check = (name, ok, data) => { report.checks.push({ name, status: ok ? 'PASS' : 'FAIL', data }); if (!ok) console.error('FAIL', name, JSON.stringify(data)) }
 const { chromium } = loadPlaywright()
 const browser = await chromium.launch({ headless: true, executablePath: process.env.SW_CHROME_PATH ?? 'C:/Program Files/Google/Chrome/Application/chrome.exe' })
 report.browser = browser.version()
 const page = await browser.newPage({ viewport: { width: 1920, height: 1000 } })
 page.on('pageerror', e => report.errors.push(e.message))
 page.on('console', m => { if (m.type() === 'error') report.errors.push(m.text()) })
 const story = async id => {
  await page.goto(`${base}/iframe.html?id=${id}&viewMode=story`)
  await page.locator('.hm-sw-header, .hm-sw-theme').first().waitFor(); await page.evaluate(() => document.fonts.ready); await page.mouse.move(1, 1)
 }
 // Marks the focused element so later keys can be compared with it; returns its descriptor.
 const mark = name => name.replace(/\s+/g, '_')
 const focused = name => page.evaluate(name => { const e = document.activeElement; if (!e || e === document.body) return null; e.dataset.kbMark = (e.dataset.kbMark ? e.dataset.kbMark + ' ' : '') + name; return (e.getAttribute('aria-label') ?? e.textContent).trim().slice(0, 24) }, mark(name))
 const isMarked = name => page.evaluate(name => (document.activeElement?.dataset.kbMark ?? '').split(' ').includes(name), mark(name))
 // Ends found with Home / End, then: End + forward wraps to the first, Home + backward wraps to the last.
 async function roving(tag, first, { forward = 'ArrowRight', backward = 'ArrowLeft', ignored = [] } = {}) {
  await first.focus()
  await page.keyboard.press('Home'); const head = await focused(`${tag}-head`)
  await page.keyboard.press('End'); const tail = await focused(`${tag}-tail`)
  check(`${tag}: Home and End reach two different ends`, !!head && !!tail && head !== tail, { head, tail })
  await page.keyboard.press(forward)
  check(`${tag}: ${forward} on the last item wraps to the first`, await isMarked(`${tag}-head`), { head, tail, now: await focused('x') })
  await page.keyboard.press(backward)
  check(`${tag}: ${backward} on the first item wraps to the last`, await isMarked(`${tag}-tail`), { head, tail, now: await focused('x') })
  for (const key of ignored) { await page.keyboard.press(key); check(`${tag}: ${key} does not move focus`, await isMarked(`${tag}-tail`), await focused('x')) }
 }
 try {
  // 1. SWToolGroup selection="single" (radio): arrows in both axes, disabled option skipped, focus selects.
  await page.goto(fixtureBase); await page.locator('[data-tool-fixture] [role="radiogroup"]').waitFor()
  const option = id => page.locator(`[data-tool-fixture] [data-option="${id}"]`)
  const selected = () => page.locator('[data-tool-fixture]').getAttribute('data-selected')
  const at = async () => page.evaluate(() => document.activeElement?.dataset.option)
  await option('b').focus()
  const steps = []
  for (const key of ['ArrowRight', 'ArrowRight', 'ArrowLeft', 'ArrowDown', 'ArrowUp', 'Home', 'End']) { await page.keyboard.press(key); steps.push([key, await at(), await selected()]) }
  const expected = [['ArrowRight', 'd', 'd'], ['ArrowRight', 'a', 'a'], ['ArrowLeft', 'd', 'd'], ['ArrowDown', 'a', 'a'], ['ArrowUp', 'd', 'd'], ['Home', 'a', 'a'], ['End', 'd', 'd']]
  check('SWToolGroup radio: skips the disabled option, wraps both ways, ArrowDown / ArrowUp move, Home / End, focus selects', JSON.stringify(steps) === JSON.stringify(expected), { steps, expected })
  check('SWToolGroup radio: aria-checked follows the selection', await option('d').getAttribute('aria-checked') === 'true' && await option('a').getAttribute('aria-checked') === 'false')
  // 2. SWFooter tool row (horizontal only).
  await story('sw-footer--full-footer')
  await roving('SWFooter tools', page.locator('.hm-sw-footer__slots[role="toolbar"] .hm-sw-footer-tool').first(), { ignored: ['ArrowDown', 'ArrowUp'] })
  // 3. SWViewerHeader tabs (radio, both axes, focus selects).
  await story('sw-viewer--viewer-header')
  const tabs = page.locator('.hm-sw-viewer-header__tabs[role="radiogroup"]').first()
  await roving('SWViewerHeader tabs', tabs.locator('[role="radio"]:not(:disabled)').first(), { forward: 'ArrowDown', backward: 'ArrowUp' })
  check('SWViewerHeader tabs: the focused tab is the checked one', await page.evaluate(() => document.activeElement?.getAttribute('aria-checked')) === 'true')
  // 4. SWHomeMenu tiles (horizontal only).
  await story('sw-header--home-menu-standalone')
  await roving('SWHomeMenu tiles', page.locator('.hm-sw-home-menu__item').first(), { ignored: [] })
  // 5. Outside pointerdown that leaves focus on the trigger: closes the open menu; inside it does not.
  const pointerdown = selector => page.evaluate(selector => document.querySelector(selector).dispatchEvent(new PointerEvent('pointerdown', { bubbles: true, composed: true })), selector)
  await story('sw-header--composed-controls')
  const host = page.locator('[data-composed-controls]'), menu = () => page.locator('[data-composed-controls] .hm-sw-header__menu-panel, [data-composed-controls] .hm-sw-header__layer-menu')
  for (const label of ['레이어', '색상', '선스타일', '문자스타일', '치수스타일']) {
    const trigger = host.getByRole('button', { name: label, exact: true })
    await trigger.click()
    await pointerdown('[data-composed-controls] :is(.hm-sw-header__menu-panel, .hm-sw-header__layer-menu)')
    const keptInside = await menu().count() === 1
    await pointerdown('body')
    check(`${label}: pointerdown inside keeps the menu; outside closes it with focus kept on the trigger`, keptInside && await menu().count() === 0 && await trigger.evaluate(e => e === document.activeElement))
  }
  await story('sw-header--document-dropdown')
  const documentButton = page.locator('[data-callback-log] + * .hm-sw-header__document-button').first()
  await documentButton.click()
  const documentMenu = () => page.locator('[data-callback-log] + * .hm-sw-header__document-menu, [data-callback-log] + * .hm-sw-header__document-list')
  const documentOpen = await documentMenu().count() > 0 && await documentButton.getAttribute('aria-expanded') === 'true'
  await pointerdown('body')
  check('Document title: outside pointerdown closes the list, focus kept', documentOpen && await documentButton.getAttribute('aria-expanded') === 'false' && await documentButton.evaluate(e => e === document.activeElement), { documentOpen })
  await story('sw-header--responsive-more')
  const more = page.locator('.hm-sw-header__more-trigger:visible').first()
  await more.click()
  const moreOpen = await more.getAttribute('aria-expanded') === 'true'
  await pointerdown('body')
  check('More: outside pointerdown closes it, focus kept', moreOpen && await more.getAttribute('aria-expanded') === 'false' && await more.evaluate(e => e === document.activeElement), { moreOpen })
  check('no browser console or page errors', report.errors.length === 0, report.errors)
 } catch (error) { check('suite completed', false, error.stack) }
 finally {
  await browser.close(); fixtureServer.close(); storybookServer.close()
  report.status = report.checks.every(c => c.status === 'PASS') ? 'PASS' : 'FAIL'
  await writeFile(path.join(out, 'result.json'), JSON.stringify(report, null, 2) + '\n')
  console.log('TOTAL', report.checks.length, 'FAIL', report.checks.filter(c => c.status === 'FAIL').length)
  process.exitCode = report.status === 'PASS' ? 0 : 1
 }
@@ -5,28 +5,51 @@ import { execFileSync } from 'node:child_process'
 import path from 'node:path'
 import http from 'node:http'
 import { parse } from '@babel/parser'
-import { swStoryEntries, retainedInventory, inventorySignature, retiredDropdownIds, integratedChangedFiles } from './storybook-inventory.mjs'
+import { swStoryEntries, retainedInventory, inventorySignature, retiredDropdownIds, integratedChangedFiles, integratedStoryIds, retiredPropertyPanelIds, retiredUnusedDemoIds, movedHomeMenuIds, retiredHomeMenuCompareIds, movedToPopupIds, approvedMainCommit, homeMenuSidebarIds, withApprovedEntryChanges, approvedHeaderDeclarations, movedHeaderDeclarations } from './storybook-inventory.mjs'
 import { loadPlaywright } from './playwright-runtime.mjs'
 import { sourceChanges, unapprovedChanges } from './source-changes.mjs'
 const out = path.resolve(process.argv[2] ?? 'docs/sw/storybook-overview-qa')
 await mkdir(out, { recursive: true })
-const report = { baseCommit: '50bf5bda8e956a4973b923d64131f2f2285bd38c', checks: [], errors: [], sizes: [] }
+// 2026-10-20 (test alignment): 50bf5bd and its before-index.json stay the baseline. The checks below accept only the
 // approved changes after it and the approved main merge, both recorded in storybook-inventory.mjs.
 const report = { baseCommit: '50bf5bda8e956a4973b923d64131f2f2285bd38c', approvedMainCommit, checks: [], errors: [], sizes: [] }
 const check = (name, ok, data) => { report.checks.push({ name, status: ok ? 'PASS' : 'FAIL', data }); console.log(ok ? 'PASS' : 'FAIL', name) }
 const before = JSON.parse(await readFile(path.join(out, 'before-index.json'), 'utf8'))
-const after = swStoryEntries(JSON.parse(await readFile('storybook-static/index.json', 'utf8')))
+const index = JSON.parse(await readFile('storybook-static/index.json', 'utf8'))
 const after = swStoryEntries(index)
 await writeFile(path.join(out, 'after-index.json'), JSON.stringify(after, null, 2) + '\n')
-check('24 retained Story IDs, names and tags; only approved Dropdown retirements', after.length === 24 && JSON.stringify(inventorySignature(retainedInventory(before))) === JSON.stringify(inventorySignature(after)))
+const removedHeaderIds = [...retiredPropertyPanelIds, ...retiredUnusedDemoIds, ...movedToPopupIds]
 const addedHeaderIds = [...integratedStoryIds.filter(id => id.startsWith('sw-header--')), ...homeMenuSidebarIds, ...Object.values(movedHomeMenuIds).filter(id => !retiredHomeMenuCompareIds.includes(id))]
 const expectedRetained = retainedInventory(before).filter(entry => !removedHeaderIds.includes(entry.id)).map(withApprovedEntryChanges)
 const inventory = { expected: expectedRetained.length + addedHeaderIds.length, actual: after.length, missingAdded: addedHeaderIds.filter(id => !after.some(e => e.id === id)), movedToPopup: movedToPopupIds.map(id => index.entries[id]?.title ?? null) }
 check(`${inventory.expected} SW/Header Story IDs: the 24 retained at 50bf5bd (names, tags) minus approved retirements and the Popup move, plus approved additions`,
  after.length === inventory.expected && inventory.missingAdded.length === 0 && inventory.movedToPopup.every(title => title === 'SW/Popup')
  && JSON.stringify(inventorySignature(expectedRetained)) === JSON.stringify(inventorySignature(after.filter(e => !addedHeaderIds.includes(e.id)))), inventory)
 const source = await readFile('src/sw/sw-header.stories.tsx', 'utf8')
 const baseline = execFileSync('git', ['show', `${report.baseCommit}:src/sw/sw-header.stories.tsx`], { encoding: 'utf8' })
 const stories = text => Object.fromEntries(parse(text, { sourceType:'module', plugins:['typescript','jsx'] }).program.body
  .filter(n => n.type === 'ExportNamedDeclaration' && n.declaration.type === 'VariableDeclaration').map(n => [n.declaration.declarations[0].id.name, text.slice(n.start,n.end).replaceAll('\r\n','\n')]))
 const oldStories = stories(baseline), newStories = stories(source)
 const retiredExports = ['LayerDropdown','ColorDropdown','LineStyleDropdown','TextDimensionStyleDropdown','ComposedControls']
-check('retained non-Overview declarations byte-identical; relocated composition separately verified', Object.keys(oldStories).filter(k => k !== 'Overview' && !retiredExports.includes(k)).every(k => oldStories[k] === newStories[k]))
+// A declaration changed after 50bf5bd must equal its version at the approving commit; a removed one must be an approved
 // retirement, or the Popup move compared in its new file. All others stay byte-identical to 50bf5bd.
 const gitStories = (commit, file) => stories(execFileSync('git', ['show', `${commit}:${file}`], { encoding: 'utf8' }))
 const storyId = name => `sw-header--${name.replace(/([a-z0-9])([A-Z])/g, '$1-$2').toLowerCase()}`
 const approvedDeclarations = approvedHeaderDeclarations, movedDeclarations = movedHeaderDeclarations
 const movedNow = Object.fromEntries(await Promise.all(Object.entries(movedDeclarations).map(async ([name, [file]]) => [name, stories(await readFile(file, 'utf8'))[name]])))
 const declarationIssues = Object.keys(oldStories).filter(k => k !== 'Overview' && !retiredExports.includes(k)).filter(k => {
  if (movedDeclarations[k]) return !!newStories[k] || movedNow[k] !== gitStories(movedDeclarations[k][1], movedDeclarations[k][0])[k]
  if (!newStories[k]) return ![...retiredPropertyPanelIds, ...retiredUnusedDemoIds].includes(storyId(k))
  return newStories[k] !== (approvedDeclarations[k] ? gitStories(approvedDeclarations[k], 'src/sw/sw-header.stories.tsx')[k] : oldStories[k])
 })
 check('retained non-Overview declarations byte-identical to 50bf5bd or their approving commit; only approved removals; relocated composition separately verified', declarationIssues.length === 0, declarationIssues)
 check('retired Dropdown IDs absent', retiredDropdownIds.every(id => !after.some(e => e.id === id)))
-// Since 2026-10-19 the production source changes only in the integrated-improvement files (their own suites verify them).
+// The package source may differ from the approved main merge only in the integrated-improvement files (their own suites
-const sourceDiff = execFileSync('git', ['diff', '--name-only', report.baseCommit, '--', 'packages/sw/src'], { encoding:'utf8' }).trim().split(/\r?\n/).filter(Boolean)
+// verify them). Approved package changes after 50bf5bd are listed as sinceBaseline; update approvedMainCommit on the next approved merge.
-check('package production source untouched except the integrated-improvement files', sourceDiff.every(file => integratedChangedFiles.includes(file)), sourceDiff.filter(file => !integratedChangedFiles.includes(file)))
+// Untracked new source files count as changes (source-changes.mjs).
 const sourceDiff = { unapproved: unapprovedChanges(report.approvedMainCommit, ['packages/sw/src'], integratedChangedFiles), sinceBaseline: sourceChanges(report.baseCommit, ['packages/sw/src']).length }
 check('package production source unchanged since the approved main merge except the integrated-improvement files', sourceDiff.unapproved.length === 0, sourceDiff)
 const root = path.resolve('storybook-static'), mime = { '.html':'text/html','.js':'text/javascript','.css':'text/css','.json':'application/json','.svg':'image/svg+xml','.ttf':'font/ttf','.png':'image/png' }
 const server = http.createServer(async(req,res) => {
@@ -1,9 +1,12 @@
-// Historical since 2026-10-19: opens SW Story IDs retired by the unused demo removal (property-panel and four others in verify). Kept as evidence
+// 2026-10-20 (test alignment): `verify` is a current regression again. The preservation checks of the Stories retired by
-// for its recorded run; current regression: storybook-unused-removal.browser.mjs.
+// the unused demo removal (5faa1f1) run on current public Stories (Overview for the Header-connected panel; every other
 // current SW/Header Story renders), and the inventory accepts only the approved changes in storybook-inventory.mjs.
 // `before` stays the recorded capture of the five retired property panel Stories (historical; needs a build before c8e5fbe).
 import { mkdir, readFile, writeFile } from 'node:fs/promises'
 import { execFileSync } from 'node:child_process'
 import path from 'node:path'
 import http from 'node:http'
-import { swStoryEntries, retiredPropertyPanelIds } from './storybook-inventory.mjs'
+import { swStoryEntries, retiredPropertyPanelIds, retiredUnusedDemoIds, approvedAddedStoryIds, headerInventoryIssues } from './storybook-inventory.mjs'
 import { loadPlaywright } from './playwright-runtime.mjs'
 // Property panel comparison consolidation (2026-10-19).
@@ -62,8 +65,16 @@ try {
    const before = JSON.parse(await readFile(path.resolve(process.env.SW_BEFORE_INVENTORY ?? 'docs/sw/property-panel-comparison-qa/before/story-inventory-before.json'), 'utf8'))
    const expected = before.sw.filter(e => !retiredPropertyPanelIds.includes(e.id))
    const signature = list => JSON.stringify(list.map(e => [e.id, e.name, e.title, e.tags]).sort((a, b) => a[0].localeCompare(b[0])))
-    check('inventory: 24 -> 19 SW Stories, 343 -> 338 total, only 5 approved retirements', before.sw.length === 24 && sw.length === 19 && before.total === 343 && stories.length === 338 && retiredPropertyPanelIds.every(id => !index.entries[id]), { before: [before.total, before.sw.length], after: [stories.length, sw.length] })
+    // 2026-10-20 (test alignment): 24 -> 19 / 343 -> 338 is asserted on the run recorded at c8e5fbe (read from Git); today
-    check('inventory: retained SW Story IDs, names, titles, tags unchanged', signature(expected) === signature(sw), { retained: sw.length })
+    // the index may differ from it only by the approved changes of storybook-inventory.mjs (nine unused-demo removals, the
    // approved additions, the verification tags and the Popup move).
    const recorded = JSON.parse(execFileSync('git', ['show', 'c8e5fbeebc26fba92998fc5ddcd28c6c110e452d:docs/sw/property-panel-comparison-qa/verify/result.json'], { encoding: 'utf8', maxBuffer: 1 << 26 })).data.inventory
    const now = headerInventoryIssues(before.sw, index)
    report.data.inventory.recorded = { total: recorded.total, sw: recorded.sw }
    check('inventory: 24 -> 19 SW Stories, 343 -> 338 total, only 5 approved retirements (recorded at c8e5fbe); now only approved later changes', before.sw.length === 24 && recorded.sw === 19 && before.total === 343 && recorded.total === 338 &&
      JSON.stringify(recorded.ids.map(([id]) => id).sort()) === JSON.stringify(expected.map(e => e.id).sort()) && retiredPropertyPanelIds.every(id => !index.entries[id]) &&
      stories.length === 338 - retiredUnusedDemoIds.length + approvedAddedStoryIds.length && now.unexpected.length === 0 && now.missing.length === 0 && now.retiredPresent.length === 0, { before: [before.total, before.sw.length], recorded: [recorded.total, recorded.sw], after: [stories.length, sw.length], ...now })
    check('inventory: retained SW Story IDs, names, titles, tags unchanged (recorded at c8e5fbe); now only the approved tags and Popup move', JSON.stringify(recorded.ids) === JSON.stringify(expected.map(e => [e.id, e.name])) && now.changed.length === 0, { retained: sw.length, changed: now.changed })
    check('inventory: compare Story keeps its ID and name', index.entries['sw-header--property-panel-compare']?.name === 'Property Panel · 4개 비교')
    check('inventory: Dropdown Story keeps ID / name / title', index.entries['sw-header--composed-controls']?.name === 'Dropdown' && index.entries['sw-header--composed-controls']?.title === 'SW/Header')
@@ -181,12 +192,14 @@ try {
    check('Dropdown Story renders composed controls', await page.locator('.sw-composed-controls').count() > 0)
    await goto('window-move-motion')
    check('Window Move Motion Story renders', await page.locator('[data-sw-window-move]').count() > 0)
-    await goto('property-panel')
+    // 2026-10-20: the Property Panel page was removed (5faa1f1); the Header-connected panel is the one of Overview.
    await goto('overview')
    const trigger = page.locator('.hm-sw-header [data-property-panel-trigger]')
    await trigger.click(); const opened = await page.locator('.hm-sw-property').count()
    await page.keyboard.press('Escape'); await page.keyboard.press('Escape')
-    check('Property Panel (Header-connected) still opens; Escape closes', opened === 1 && await page.locator('.hm-sw-property').count() === 0, { opened })
+    check('Property Panel (Header-connected, Overview) still opens; Escape closes', opened === 1 && await page.locator('.hm-sw-property').count() === 0, { opened })
-    for (const id of ['property-shape-slot', 'property-fields', 'property-bar', 'layer-detail-input', 'k-guide']) {
+    // Every other current SW/Header Story renders (the original list named the then-retained Stories; four were removed in 5faa1f1).
    for (const id of sw.map(e => e.id.replace('sw-header--', '')).filter(id => !['overview', 'composed-controls', 'window-move-motion'].includes(id))) {
      await goto(id); check(`render ${id}`, !(await page.locator('.sb-errordisplay').isVisible()))
    }
    check('no browser console or page errors', report.errors.length === 0, report.errors)
@@ -0,0 +1,238 @@
 {
  "package": "@hm-design/sw",
  "approvedCommit": "553e4df4a865aaf6514b1c2b86cb2e3e9a658e5f",
  "manifest": {
    "name": "@hm-design/sw",
    "exports": {
      ".": {
        "types": "./dist/index.d.ts",
        "import": "./dist/index.js",
        "default": "./dist/index.js"
      },
      "./styles.css": "./dist/styles.css"
    },
    "main": "./dist/index.js",
    "types": "./dist/index.d.ts",
    "module": null,
    "files": [
      "dist",
      "ai"
    ]
  },
  "exports": {
    "SWFileEntry": "type",
    "SWFooter": "value",
    "SWFooterAddSlot": "value",
    "SWFooterAddSlotProps": "type",
    "SWFooterAuxButton": "value",
    "SWFooterAuxButtonProps": "type",
    "SWFooterAuxGroup": "value",
    "SWFooterAuxGroupProps": "type",
    "SWFooterAuxIconName": "type",
    "SWFooterAuxItem": "type",
    "SWFooterCategory": "type",
    "SWFooterCommandLine": "value",
    "SWFooterCommandLineProps": "type",
    "SWFooterGuide": "value",
    "SWFooterGuideContent": "type",
    "SWFooterGuideProps": "type",
    "SWFooterLayout": "type",
    "SWFooterLayoutTabs": "value",
    "SWFooterLayoutTabsProps": "type",
    "SWFooterMenu": "value",
    "SWFooterMenuItem": "type",
    "SWFooterMenuProps": "type",
    "SWFooterProps": "type",
    "SWFooterSideAction": "type",
    "SWFooterSideButton": "value",
    "SWFooterSideButtonProps": "type",
    "SWFooterTool": "type",
    "SWFooterToolButton": "value",
    "SWFooterToolButtonProps": "type",
    "SWFooterToolIconName": "type",
    "SWHeader": "value",
    "SWHeaderActions": "value",
    "SWHeaderActionsProps": "type",
    "SWHeaderColorControl": "value",
    "SWHeaderColorInputValue": "type",
    "SWHeaderColorMenu": "value",
    "SWHeaderColorMenuProps": "type",
    "SWHeaderColorMode": "type",
    "SWHeaderColorOption": "type",
    "SWHeaderColorValue": "type",
    "SWHeaderControlConfig": "type",
    "SWHeaderControlId": "type",
    "SWHeaderDimensionStyle": "value",
    "SWHeaderDimensionStyleMenu": "value",
    "SWHeaderDimensionStyleMenuProps": "type",
    "SWHeaderDimensionStyleOption": "type",
    "SWHeaderDimensionStyleValue": "type",
    "SWHeaderDocument": "type",
    "SWHeaderDocumentTitle": "value",
    "SWHeaderDocumentTitleProps": "type",
    "SWHeaderFrameControlId": "type",
    "SWHeaderHideableControlId": "type",
    "SWHeaderHome": "value",
    "SWHeaderHomeMenu": "type",
    "SWHeaderHomeMenuChangeReason": "type",
    "SWHeaderHomeProps": "type",
    "SWHeaderInput": "value",
    "SWHeaderInputProps": "type",
    "SWHeaderInputValueType": "type",
    "SWHeaderLayer": "type",
    "SWHeaderLayerControl": "value",
    "SWHeaderLayerControlProps": "type",
    "SWHeaderLayerMenu": "value",
    "SWHeaderLayerMenuProps": "type",
    "SWHeaderLayerValue": "type",
    "SWHeaderLinePreview": "value",
    "SWHeaderLineStyle": "value",
    "SWHeaderLineStyleMenu": "value",
    "SWHeaderLineStyleMenuProps": "type",
    "SWHeaderLineStyleValue": "type",
    "SWHeaderLineType": "type",
    "SWHeaderLineWeight": "type",
    "SWHeaderMenuId": "type",
    "SWHeaderProperties": "value",
    "SWHeaderPropertiesProps": "type",
    "SWHeaderProperty": "type",
    "SWHeaderPropertyBar": "value",
    "SWHeaderPropertyBarProps": "type",
    "SWHeaderPropertyGroup": "type",
    "SWHeaderPropertyMenus": "type",
    "SWHeaderPropertyPanel": "value",
    "SWHeaderPropertyPanelProps": "type",
    "SWHeaderPropertyPicker": "type",
    "SWHeaderPropertySelection": "type",
    "SWHeaderPropertyShapeContent": "type",
    "SWHeaderPropertyShapeContext": "type",
    "SWHeaderPropertyType": "type",
    "SWHeaderProps": "type",
    "SWHeaderSubControlId": "type",
    "SWHeaderTextStyle": "value",
    "SWHeaderTextStyleMenu": "value",
    "SWHeaderTextStyleMenuProps": "type",
    "SWHeaderTextStyleOption": "type",
    "SWHeaderTextStyleValue": "type",
    "SWHeaderWindowControls": "value",
    "SWHeaderWindowControlsProps": "type",
    "SWHomeMenu": "value",
    "SWHomeMenuAccent": "type",
    "SWHomeMenuCloseReason": "type",
    "SWHomeMenuItem": "value",
    "SWHomeMenuItemData": "type",
    "SWHomeMenuItemProps": "type",
    "SWHomeMenuProps": "type",
    "SWHomeMenuSection": "value",
    "SWHomeMenuSectionData": "type",
    "SWHomeMenuSectionProps": "type",
    "SWHomeMenuSelectEvent": "type",
    "SWPopup": "value",
    "SWPopupPropertyRow": "value",
    "SWPopupPropertyRowProps": "type",
    "SWPopupProps": "type",
    "SWPopupRow": "value",
    "SWPopupRowProps": "type",
    "SWPopupSection": "value",
    "SWPopupSectionProps": "type",
    "SWRecentFiles": "value",
    "SWRecentFilesProps": "type",
    "SWSelect": "value",
    "SWSelectOption": "type",
    "SWSelectProps": "type",
    "SWSlider": "value",
    "SWSliderAppearance": "type",
    "SWSliderProps": "type",
    "SWTheme": "value",
    "SWThemeProps": "type",
    "SWToolButton": "value",
    "SWToolButtonAppearance": "type",
    "SWToolButtonProps": "type",
    "SWToolGroup": "value",
    "SWToolGroupProps": "type",
    "SWViewerBadge": "value",
    "SWViewerBadgeProps": "type",
    "SWViewerButton": "value",
    "SWViewerButtonProps": "type",
    "SWViewerCommand": "type",
    "SWViewerField": "value",
    "SWViewerFieldProps": "type",
    "SWViewerHeader": "value",
    "SWViewerHeaderButton": "value",
    "SWViewerHeaderButtonProps": "type",
    "SWViewerHeaderGroup": "type",
    "SWViewerHeaderItem": "type",
    "SWViewerHeaderProps": "type",
    "SWViewerHint": "value",
    "SWViewerIcon": "value",
    "SWViewerIconProps": "type",
    "SWViewerInput": "value",
    "SWViewerInputProps": "type",
    "SWViewerMenu": "value",
    "SWViewerMenuEntry": "type",
    "SWViewerMenuProps": "type",
    "SWViewerPanel": "value",
    "SWViewerPanelPlacement": "type",
    "SWViewerPanelProps": "type",
    "SWViewerSection": "value",
    "SWViewerSectionProps": "type",
    "SWViewerSlider": "value",
    "SWViewerSliderProps": "type",
    "SWViewerStatus": "value",
    "SWViewerStatusProps": "type",
    "SWViewerStatusState": "type",
    "SWViewerSwitch": "value",
    "SWViewerSwitchProps": "type",
    "SW_FOOTER_MODEL": "value",
    "parseSWHeaderColor": "value",
    "parseSWHeaderNumber": "value",
    "swFooterAuxIcons": "value",
    "swFooterToolIcons": "value",
    "swHeaderLinePatterns": "value",
    "useSWHomeMenuClose": "value"
  },
  "declarations": {
    "components/sw-footer/icons.d.ts": "298baed14722ace8208737e6679bd034455ad8418d5dcedc056a3a5c3cd10c53",
    "components/sw-footer/index.d.ts": "044a553758b2ea111189eb1f01f1dd33a5bb93a6274e67f0bf2a246007116d3a",
    "components/sw-footer/SWFooter.d.ts": "fb14ff8aa430886eed0da433bc0a9150bc2f7785afba78ad6be301366583f2b1",
    "components/sw-footer/SWFooterCommandLine.d.ts": "205b4fdbb1d713bba90a880459aea82acb6d1e970316b7a519b936080611c367",
    "components/sw-footer/SWFooterLayoutTabs.d.ts": "ec54e985840a42b9d10e3f057cd68da42def8285a0f175719e00cdc70a4c5fd4",
    "components/sw-footer/SWFooterParts.d.ts": "8ad09cc362fed70ccd6e04f567bb23a4b4cd8bcb5184498424032e76f45b4845",
    "components/sw-footer/types.d.ts": "de3470c42a7d89cf7f8776a533defb7c72d905e27a95d1d94a71d4d79c2af147",
    "components/sw-header/components/SWHeaderActions.d.ts": "c572d028522a56ac4bf1a5d7eb3d6e260b718fa3cac197d87757ec49f508af34",
    "components/sw-header/components/SWHeaderColorMenu.d.ts": "ff361ed274150c32a8a6931b31348b85de0463db642bd8c6af3c1bbb79fa5fda",
    "components/sw-header/components/SWHeaderDocumentTitle.d.ts": "ca96a9b886740d5b68b852d7494c35fe139c22df74f4fd13d342638a1b6ea439",
    "components/sw-header/components/SWHeaderDropdown.d.ts": "06ce5aa914826b6dc85df923a24baded80d16f43aebce39845f5b18d9d996504",
    "components/sw-header/components/SWHeaderField.d.ts": "741fdd1b0e7da4cf8f7adeaec021eb4eb103d7312f34e80135d00c3510159901",
    "components/sw-header/components/SWHeaderFields.d.ts": "43950332583b4c74231a793e18651b45494165626cc45e3dfcf50169ec189edc",
    "components/sw-header/components/SWHeaderHome.d.ts": "aa1e56611e92f309d588fcb12c089bfb0cd336de050d9aca2f043118ba01ae54",
    "components/sw-header/components/SWHeaderInput.d.ts": "6b379ee70b9bcbf6e9a0808ca891b86838a9bfa355bfa12f036088b26241dd9c",
    "components/sw-header/components/SWHeaderLayerMenu.d.ts": "0fb65b14f52cd2abf54e74ea09ed4b783fe1665416dfd910bd6cd7d3e1995711",
    "components/sw-header/components/SWHeaderLineStyleMenu.d.ts": "d8ca8fc2543a1313793ceaa0e9e852f04dd6107027b2c51efcc080db60c34d29",
    "components/sw-header/components/SWHeaderProperties.d.ts": "20ae22aac2d49c546d23c726ce5f210bd0f89024d60f24b2d75d9eba9524704f",
    "components/sw-header/components/SWHeaderPropertyBar.d.ts": "38fcf8305edfa6ff15917520cdbb446ac69d5200b17f5524304d106b8aeb7b91",
    "components/sw-header/components/SWHeaderPropertyPanel.d.ts": "c7830fe2db87f3c16312d01ce19d5e2305f5e829db988a88bf680ef86058df0b",
    "components/sw-header/components/SWHeaderStyleListMenus.d.ts": "6bbcf310fda8deed5c607fc85e8fb730b84c743a5a85be68d2549afa0341891d",
    "components/sw-header/components/SWHeaderWindowControls.d.ts": "db8bfbd14340e03c28e407f58fc08cef55b9eef49f406ba53fc50e994f5f0834",
    "components/sw-header/index.d.ts": "958a64efd05f7b8ab683ecb342fdcdef488db0be97cf9a2bf5ad3e3ac4632ab7",
    "components/sw-header/SWHeader.d.ts": "3adac1db372451d9f86a6f6df1df0e9696cd40c3ed7945531ee378da122136d8",
    "components/sw-header/types.d.ts": "fa7602374753bf7b6b48c0fa9f1c30a932ed12ccb4d16488c836e964b76f9122",
    "components/sw-home-menu/index.d.ts": "b1f67a4e16c7b3a64b93f348bfb17fcd2ada999527cb93ccb77ca6308564091c",
    "components/sw-home-menu/SWHomeMenu.d.ts": "2ce530d253374a8b20a20d8b6ddd5c733abfc8d518162d5a7490d432986a662c",
    "components/sw-home-menu/SWRecentFiles.d.ts": "27787ea59e60f903216b17a265af581c735369a9add7686fd7b41aa42019af0a",
    "components/sw-home-menu/types.d.ts": "4fa5ec3f052df201b823f36d2872a68f283ea301b28846e535794eac6246df50",
    "components/sw-popup/SWPopup.d.ts": "9af7b5f34bed9c863e343018ed64dc6960d09f5664fdfc1c26fcc7204acdd041",
    "components/sw-select/SWSelect.d.ts": "9cf523e8a8329a2be7bdfba56c1a2c647b2676480efa3f6dfa26a971ea0a9c3b",
    "components/sw-slider/SWSlider.d.ts": "7d9c48299cb5644d859753e1bc56ae43dc7ab282e64432d57d3e29b2960aaad5",
    "components/sw-theme/SWTheme.d.ts": "cdcc2e7c4b80241afa4d0b7c3da671b7086c16f9b9c231c1927c931757e4244c",
    "components/sw-tool/SWTool.d.ts": "23b1eb156578cd3f1dee325afbd81988d88c4a3f421f7350a0e8c47c652e804c",
    "components/sw-viewer/index.d.ts": "381caef510e7a4c903c70a12e24b6f5c1908c2ee98c3816066639583b0f7d658",
    "components/sw-viewer/SWViewerControls.d.ts": "ca32e8a2a7de2cfefec36273ffb473271ad438cfb663f44a25871ee6aed9222d",
    "components/sw-viewer/SWViewerHeader.d.ts": "2ca96432c4a0d2e14f7033ebde1c5a25980bf50903e2789d3657d5c3edc96039",
    "components/sw-viewer/SWViewerIcon.d.ts": "3c81582860e481b037b395b3584ff93af73500e4040d8423c9da15c2b4dd108e",
    "components/sw-viewer/SWViewerMenu.d.ts": "15fa615c3472d84037780f3c93387acbc6b4d05f5fb56731b0a99262b3f7f109",
    "components/sw-viewer/SWViewerPanel.d.ts": "49b040d3f3d00de30e3fc0493fd2ce78e309616ec97a7ce226dfef300b640f92",
    "components/sw-viewer/types.d.ts": "f9d0e3b4fc4efc1e4b0c925a5ce6860b67f2c6b7ec2c7ef20b63d3c816a9c5ac",
    "index.d.ts": "34f0607f63df53d5a1186a4ad763a8bf7b433e20645d868f6f7368ed0853828c"
  }
 }
@@ -0,0 +1,109 @@
 // Public API guard of @hm-design/sw (2026-10-21): the built package must expose exactly the approved surface.
 // Usage: node packages/sw/tests/public-api.check.mjs [dist-dir] [package.json]   (build first: npm run build -w @hm-design/sw)
 //        node packages/sw/tests/public-api.check.mjs --snapshot <dist-dir> <package.json> <out.json>
 // The approved surface is public-api.approved.json, written with --snapshot from a build of a reviewed commit
 // (approvedCommit, read from that build's build-info.json). It records:
 // 1. manifest: the package.json fields that decide what a consumer can import (exports, main, types, module, files).
 // 2. exports: every name the entry exports, "value" when dist/index.js exports it at runtime, otherwise "type".
 // 3. declarations: SHA-256 of every .d.ts reachable from dist/index.d.ts through relative imports. A changed public
 //    type, an internal type a public one references, or an internal module newly reachable from the entry all change it.
 // Internal modules the entry never reaches (e.g. components/shared) and implementation-only edits leave it unchanged.
 // The check never rewrites the snapshot. Change it only in a reviewed commit that approves the API change, written from
 // a build of that commit; never regenerate it from an arbitrary HEAD to make a failing check pass.
 import { createHash } from "node:crypto"
 import { execFileSync } from "node:child_process"
 import { existsSync } from "node:fs"
 import { readFile, writeFile } from "node:fs/promises"
 import path from "node:path"
 import { fileURLToPath, pathToFileURL } from "node:url"
 import { approvedMainCommit } from "./storybook-inventory.mjs"
 const packageRoot = fileURLToPath(new URL("../", import.meta.url))
 const snapshotFile = fileURLToPath(new URL("./public-api.approved.json", import.meta.url))
 const manifestFields = ["exports", "main", "types", "module", "files"]
 // Names a declaration file exports, following `export *` and `export { } from` into other reachable files.
 const nameList = text => text.split(",").map(part => part.trim()).filter(Boolean)
  .map(part => ({ type: /^type\s/.test(part), local: part.replace(/^type\s+/, "").split(/\s+as\s+/)[0].trim(), name: part.replace(/^type\s+/, "").split(/\s+as\s+/).pop().trim() }))
 async function surface(dist) {
  const files = new Map()
  const load = async file => {
    if (!files.has(file)) {
      if (!existsSync(path.join(dist, file))) throw new Error(`missing declaration ${file}`)
      const text = (await readFile(path.join(dist, file), "utf8")).replace(/\r\n?/g, "\n")
      files.set(file, text)
      for (const match of text.matchAll(/(?:from\s+|import\()["'](\.\.?\/[^"']+)["']/g)) await load(target(file, match[1]))
    }
    return files.get(file)
  }
  const target = (from, specifier) => path.posix.join(path.posix.dirname(from), specifier.replace(/\.js$/, ".d.ts"))
  const exportsOf = async (file, seen = new Set()) => {
    if (seen.has(file)) return new Map()
    seen.add(file)
    const text = await load(file), names = new Map()
    for (const match of text.matchAll(/^export\s+(?:declare\s+)?(?:abstract\s+)?(const|let|var|function|class|enum|interface|type|namespace)\s+(\w+)/gm)) names.set(match[2], match[1] === "interface" || match[1] === "type" ? "type" : "value")
    if (/^export\s+default\b/m.test(text)) names.set("default", "value")
    for (const match of text.matchAll(/^export\s+(type\s+)?\{([^}]*)\}\s*from\s*["']([^"']+)["']/gm)) {
      const inner = await exportsOf(target(file, match[3]), new Set(seen))
      for (const item of nameList(match[2])) names.set(item.name, match[1] || item.type ? "type" : inner.get(item.local) ?? "missing")
    }
    for (const match of text.matchAll(/^export\s+(type\s+)?\{([^}]*)\}\s*;?\s*$/gm)) for (const item of nameList(match[2])) names.set(item.name, match[1] || item.type || new RegExp(`(?:^|\s)(?:interface|type)\s+${item.local}\b`, "m").test(text) ? "type" : "value")
    for (const match of text.matchAll(/^export\s+\*\s+from\s+["']([^"']+)["']/gm)) for (const [name, kind] of await exportsOf(target(file, match[1]), new Set(seen))) if (name !== "default" && !names.has(name)) names.set(name, kind)
    for (const match of text.matchAll(/^export\s+\*\s+as\s+(\w+)\s+from/gm)) names.set(match[1], "value")
    return names
  }
  const declared = await exportsOf("index.d.ts")
  const runtime = Object.keys(await import(pathToFileURL(path.join(dist, "index.js")).href))
  const exports = Object.fromEntries([...declared.keys(), ...runtime].sort().map(name => [name, runtime.includes(name) ? "value" : declared.has(name) ? "type" : "untyped"]))
  const declarations = Object.fromEntries([...files].sort(([a], [b]) => a.localeCompare(b)).map(([file, text]) => [file, createHash("sha256").update(text).digest("hex")]))
  // Declared values the runtime lacks, or runtime values without a declaration, would break consumers either way.
  const mismatch = [...declared].filter(([name, kind]) => kind === "missing" || (kind === "value" && !runtime.includes(name))).map(([name]) => name)
  return { exports, declarations, mismatch }
 }
 const manifestOf = async file => {
  const json = JSON.parse(await readFile(file, "utf8"))
  return { name: json.name, ...Object.fromEntries(manifestFields.map(field => [field, json[field] ?? null])) }
 }
 if (process.argv[2] === "--snapshot") {
  const [dist, manifestFile, out] = process.argv.slice(3).map(item => path.resolve(item))
  if (!out) throw new Error("Pass --snapshot <dist-dir> <package.json> <out.json>")
  const info = JSON.parse(await readFile(path.join(dist, "build-info.json"), "utf8"))
  const commit = info.commit.split("+")[0]
  if (!/^[0-9a-f]{40}$/.test(commit) || info.dirty === true) throw new Error(`build-info.json must name one clean commit, got ${info.commit} (dirty ${info.dirty})`)
  const { mismatch, ...api } = await surface(dist)
  if (mismatch.length || Object.values(api.exports).includes("untyped")) throw new Error(`declarations and runtime disagree: ${JSON.stringify({ mismatch, exports: api.exports })}`)
  await writeFile(out, JSON.stringify({ package: info.name, approvedCommit: commit, manifest: await manifestOf(manifestFile), ...api }, null, 2) + "\n")
  console.log(`wrote ${out}: ${Object.keys(api.exports).length} exports, ${Object.keys(api.declarations).length} declaration files from ${commit}`)
 } else {
  const dist = path.resolve(process.argv[2] ?? path.join(packageRoot, "dist"))
  const manifestFile = path.resolve(process.argv[3] ?? path.join(packageRoot, "package.json"))
  const approved = JSON.parse(await readFile(snapshotFile, "utf8"))
  const results = []
  const check = (name, ok, data) => { results.push(ok); console.log(ok ? "PASS" : "FAIL", name, data === undefined ? "" : JSON.stringify(data)) }
  const ancestor = (a, b) => { try { execFileSync("git", ["merge-base", "--is-ancestor", a, b], { cwd: packageRoot, stdio: "ignore" }); return true } catch { return false } }
  check("approved surface comes from a reviewed commit (ancestor of approvedMainCommit and HEAD)", ancestor(approved.approvedCommit, approvedMainCommit) && ancestor(approved.approvedCommit, "HEAD"), { approvedCommit: approved.approvedCommit, approvedMainCommit })
  const manifest = await manifestOf(manifestFile)
  const changedFields = ["name", ...manifestFields].filter(field => JSON.stringify(manifest[field]) !== JSON.stringify(approved.manifest[field]))
  check("package.json export settings unchanged (exports, main, types, module, files)", changedFields.length === 0, Object.fromEntries(changedFields.map(field => [field, { approved: approved.manifest[field], current: manifest[field] }])))
  const targets = JSON.stringify(manifest.exports).match(/"\.\/[^"]+"/g)?.map(item => item.slice(1, -1)) ?? []
  const missingTargets = [...new Set([...targets, manifest.main, manifest.types].filter(item => item?.startsWith("./dist/")))].filter(item => !existsSync(path.join(path.dirname(manifestFile), item)))
  check("every package.json export target exists in dist", missingTargets.length === 0, { missing: missingTargets })
  const current = await surface(dist)
  const added = Object.keys(current.exports).filter(name => !(name in approved.exports))
  const removed = Object.keys(approved.exports).filter(name => !(name in current.exports))
  const kindChanged = Object.keys(current.exports).filter(name => name in approved.exports && current.exports[name] !== approved.exports[name])
  // A rename shows up as one removed and one added name; both sides are listed.
  check(`entry exports exactly the ${Object.keys(approved.exports).length} approved names (no addition, removal or rename)`, added.length === 0 && removed.length === 0, { added, removed })
  check("each export keeps its kind (runtime value vs type only); runtime and declarations agree", kindChanged.length === 0 && current.mismatch.length === 0,
    { kindChanged: kindChanged.map(name => ({ name, approved: approved.exports[name], current: current.exports[name] })), declaredWithoutRuntime: current.mismatch })
  const newFiles = Object.keys(current.declarations).filter(file => !(file in approved.declarations))
  const goneFiles = Object.keys(approved.declarations).filter(file => !(file in current.declarations))
  const changedFiles = Object.keys(current.declarations).filter(file => file in approved.declarations && current.declarations[file] !== approved.declarations[file])
  check("declarations reachable from the entry are the approved files (no internal module newly exposed)", newFiles.length === 0 && goneFiles.length === 0, { newlyReachable: newFiles, noLongerReachable: goneFiles })
  check("reachable declarations byte-identical to the approved build (no public type change)", changedFiles.length === 0, { changed: changedFiles })
  console.log(`${results.filter(Boolean).length}/${results.length} PASS`)
  process.exitCode = results.every(Boolean) ? 0 : 1
 }
@@ -0,0 +1,31 @@
 // Source guard helper: every file under `paths` whose current checkout differs from `ref`.
 // `git diff --name-only <ref>` alone misses files that were never added (a new internal module, a new component), so
 // the guards also list untracked files. Ignored files (.gitignore: dist, storybook-static, node_modules, *.log) stay out.
 // Each entry: { path, status, staged }. status: M modified, A added (tracked), D deleted, T type change,
 // R renamed (both sides are listed, `from` / `to` name the other side), U unmerged, ? untracked.
 // staged: the index already holds the change (git add / git rm / git mv). Run from the repository root, like the guards.
 import { execFileSync } from 'node:child_process'
 const git = args => execFileSync('git', args, { encoding: 'utf8', maxBuffer: 1 << 26 }).split('\0').filter(Boolean)
 export const sourceChanges = (ref, paths) => {
  const staged = new Set(git(['diff', '--cached', '--name-only', '--no-renames', '-z', ref, '--', ...paths]))
  const entries = [], diff = git(['diff', '--name-status', '-M', '--no-ext-diff', '-z', ref, '--', ...paths])
  for (let i = 0; i < diff.length;) {
    const status = diff[i++][0]
    if (status === 'R' || status === 'C') {
      const from = diff[i++], to = diff[i++]
      if (status === 'R') entries.push({ path: from, status, to, staged: staged.has(from) })
      entries.push({ path: to, status, from, staged: staged.has(to) })
    } else {
      const file = diff[i++]
      entries.push({ path: file, status, staged: staged.has(file) })
    }
  }
  for (const file of git(['ls-files', '--others', '--exclude-standard', '--full-name', '-z', '--', ...paths])) entries.push({ path: file, status: '?', staged: false })
  return entries.sort((a, b) => a.path.localeCompare(b.path))
 }
 // Changes outside the explicitly approved file list (exact repository paths). An approved file moved to a new path is
 // still reported at the new path; an unapproved file renamed onto nothing approved is reported at both paths.
 export const unapprovedChanges = (ref, paths, approved) => sourceChanges(ref, paths).filter(entry => !approved.includes(entry.path))
@@ -1,14 +1,17 @@
 // Historical since 2026-10-19: opens SW Story IDs retired by the unused demo removal (dynamic-controls, composition). Kept as evidence
 // for its recorded run; current regression: storybook-unused-removal.browser.mjs.
 // Scoped verification for the five approved Story removals; serves the production build locally.
-// Usage: node packages/sw/tests/storybook-cleanup-stage1.browser.mjs [evidence-dir]
+// 2026-10-20 (test alignment): current regression again. The checks of the retired Dynamic Controls and Composition pages
 // (removed 5faa1f1) run on current public Stories: Document Open (controls allowlist), Overview (host document list) and
 // K Guide (the same fluid Header). Inventory and source checks accept only the approved changes in storybook-inventory.mjs.
 // Usage: node packages/sw/tests/storybook-cleanup-stage1.browser.mjs <evidence-dir>   (copy before-index.json from
 // docs/sw/storybook-cleanup-stage1-qa/ into a new evidence directory; the recorded QA folder is not overwritten)
 import { readFile, writeFile, mkdir } from 'node:fs/promises'
 import { execFileSync } from 'node:child_process'
 import path from 'node:path'
 import http from 'node:http'
 import { parse } from '@babel/parser'
-import { swStoryEntries, retiredDropdownIds, retainedInventory, inventorySignature } from './storybook-inventory.mjs'
+import { swStoryEntries, retiredDropdownIds, retainedInventory, headerInventoryIssues, headerSourceIssues, approvedMainCommit, integratedChangedFiles } from './storybook-inventory.mjs'
 import { loadPlaywright } from './playwright-runtime.mjs'
 import { sourceChanges, unapprovedChanges } from './source-changes.mjs'
 const out = path.resolve(process.argv[2] ?? 'docs/sw/storybook-cleanup-stage1-qa')
 await mkdir(out, { recursive: true })
@@ -19,13 +22,15 @@ const check = (name, ok, data) => {
 }
 const retired = [...['responsive', 'text-stroke', 'dynamic-data', 'default', 'controls'].map(id => `sw-header--${id}`), ...retiredDropdownIds]
 const before = JSON.parse(await readFile(path.join(out, 'before-index.json'), 'utf8'))
-const after = swStoryEntries(JSON.parse(await readFile('storybook-static/index.json', 'utf8')))
+const afterIndex = JSON.parse(await readFile('storybook-static/index.json', 'utf8'))
 const after = swStoryEntries(afterIndex)
 await writeFile(path.join(out, 'after-index.json'), JSON.stringify(after, null, 2) + '\n')
 report.deleted = before.filter(e => !after.some(a => a.id === e.id)).map(e => ({ name: e.name, id: e.id }))
-check('33 -> 24; precisely the approved stage-1 and Dropdown IDs removed', before.length === 33 && after.length === 24 &&
+// 2026-10-20: 33 -> 24 stays the assertion on the before list; today the 24 may differ only by storybook-inventory.mjs changes.
-  report.deleted.length === 9 && retired.every(id => report.deleted.some(e => e.id === id)), report.deleted)
+const retainedAtDropdown = retainedInventory(before), now = headerInventoryIssues(before, afterIndex)
-check('retained names, IDs and tags preserved except approved Dropdown rename', JSON.stringify(inventorySignature(retainedInventory(before))) ===
+check('33 -> 24; precisely the approved stage-1 and Dropdown IDs removed; now only approved later retirements and additions', before.length === 33 && retainedAtDropdown.length === 24 &&
-  JSON.stringify(inventorySignature(after)))
+  retired.every(id => before.some(e => e.id === id) && !retainedAtDropdown.some(e => e.id === id)) && now.unexpected.length === 0 && now.missing.length === 0 && now.retiredPresent.length === 0, { deleted: report.deleted, ...now })
 check('retained names, IDs and tags preserved except approved Dropdown rename and the approved later tag / Popup changes', now.changed.length === 0, now.changed)
 // Compare declaration text with the starting commit, including every retained fixture/helper.
 const file = 'src/sw/sw-header.stories.tsx'
@@ -43,11 +48,20 @@ const declarations = text => {
 }
 const oldDeclarations = new Map(declarations(original).map(d => [d.name, d.text]))
 const changed = declarations(current).filter(d => !['WindowMoveMotion', 'ComposedDemo', 'meta', 'import:react', 'import:@hm-design/sw'].includes(d.name) && oldDeclarations.get(d.name) !== d.text)
-check('retained declarations unchanged outside motion and composition integration', changed.length === 0, changed.map(d => d.name))
+// 2026-10-20: a declaration changed after 92830fe must be an approved change at its approved content (storybook-inventory.mjs).
 const map = text => Object.fromEntries(declarations(text).map(d => [d.name, d.text]))
 const declarationsAt = commit => map(execFileSync('git', ['show', `${commit}:${file}`], { encoding: 'utf8', maxBuffer: 1 << 26 }).replaceAll('\r\n', '\n'))
 const unapproved = headerSourceIssues(changed.map(d => d.name), Object.fromEntries(oldDeclarations), map(current), declarationsAt)
 check('retained declarations unchanged outside motion and composition integration, except approved later changes at their approved content', unapproved.length === 0, { unapproved, approved: changed.map(d => d.name).filter(name => !unapproved.includes(name)) })
 const section = text => text.match(/<StorySection title="단계별 진행 \(3배 확대\)"[\s\S]*?<\/StorySection>/)?.[0]
 check('retained step section is byte-identical after newline normalization', !!section(original) && section(original) === section(current))
-const productionDiff = execFileSync('git', ['diff', report.baseCommit, '--', 'packages/sw/src', 'src/sw/sw-stories.css', 'src/sw/assets', '.storybook'], { encoding: 'utf8' })
+// The stage-1 commit 50bf5bd left these paths untouched; today they may differ from the approved main merge only in the
-check('production implementation, CSS, SVG/assets and Storybook configuration unchanged', productionDiff === '')
+// integrated-improvement files (as in overview.browser.mjs).
 const productionPaths = ['packages/sw/src', 'src/sw/sw-stories.css', 'src/sw/assets', '.storybook']
 const gitFiles = (...refs) => execFileSync('git', ['diff', '--name-only', ...refs, '--', ...productionPaths], { encoding: 'utf8' }).trim().split(/\r?\n/).filter(Boolean)
 // Untracked new files count as changes (source-changes.mjs).
 const productionDiff = { stage1: gitFiles(report.baseCommit, '50bf5bda8e956a4973b923d64131f2f2285bd38c'), unapproved: unapprovedChanges(approvedMainCommit, productionPaths, integratedChangedFiles), sinceBaseline: sourceChanges(report.baseCommit, productionPaths).length }
 check('production implementation, CSS, SVG/assets and Storybook configuration unchanged by stage 1 and since the approved main merge', productionDiff.stage1.length === 0 && productionDiff.unapproved.length === 0, productionDiff)
 const root = path.resolve('storybook-static')
 const mime = { '.html': 'text/html', '.js': 'text/javascript', '.css': 'text/css', '.json': 'application/json', '.svg': 'image/svg+xml', '.ttf': 'font/ttf', '.png': 'image/png' }
@@ -119,23 +133,26 @@ try {
  check('Responsive More still switches the representative field and opens its dropdown', await header.locator('.hm-sw-header__line-menu').count() > 0 && await header.locator('.hm-sw-header__line-menu').isVisible())
  await page.keyboard.press('Escape')
-  await goto('dynamic-controls')
+  // 2026-10-20: Dynamic Controls (removed 5faa1f1) toggled a `controls` entry at runtime. No current Story toggles it;
-  await page.getByRole('checkbox', { name: '구성 color', exact: true }).uncheck()
+  // Document Open renders the same allowlist statically next to the default Header, and Overview owns a growing document list.
-  check('Dynamic Controls removes a configured field', await page.locator('header.hm-sw-header [data-control="color"], header.hm-sw-header [data-menu="color"]').count() === 0)
+  await goto('document-open')
-  await page.getByRole('checkbox', { name: '구성 color', exact: true }).check()
+  const configured = page.locator('[data-composed-responsive] [data-width="1920"] header.hm-sw-header')
-  check('Dynamic Controls restores a configured field', await page.locator('header.hm-sw-header [data-menu="color"]').count() > 0)
+  check('controls allowlist leaves out a field it does not configure (Document Open; formerly Dynamic Controls)', await configured.locator('[data-control="lineStyle"], [data-menu="line-style"]').count() === 0 && await configured.locator('[data-control="color"]').count() === 1)
-  await page.getByRole('button', { name: '구성 초기화', exact: true }).click()
+  check('Header without an allowlist keeps that field (Document Open default; formerly Dynamic Controls)', await page.locator('header.hm-sw-header').first().locator('[data-menu="line-style"]').count() > 0)
  await goto('overview')
  const documents = page.locator('header.hm-sw-header .hm-sw-header__document-button')
  await documents.click()
  await page.getByRole('button', { name: '+ New', exact: true }).click()
  await documents.click()
-  check('host-owned document list can still grow dynamically', await page.getByText('새 문서 1', { exact: true }).count() > 0)
+  check('host-owned document list can still grow dynamically (Overview host; formerly Dynamic Controls)', await page.getByText('새 문서 1.dwg', { exact: true }).count() > 0)
  await page.keyboard.press('Escape')
-  await goto('composition')
+  // Composition (removed 5faa1f1) showed the default Header at the page width; K Guide renders the same figmaArgs Header.
  await goto('k-guide')
  for (const width of [390, 768, 1280, 1440]) {
    await page.setViewportSize({ width, height: 1000 })
    const geometry = await page.locator('header.hm-sw-header').evaluate(e => ({ height: e.getBoundingClientRect().height, overflow: e.scrollWidth - e.clientWidth }))
-    check(`retained fluid header layout at ${width}px`, geometry.height === 49 && geometry.overflow === 0, geometry)
+    check(`retained fluid header layout at ${width}px (K Guide; formerly Composition)`, geometry.height === 49 && geometry.overflow === 0, geometry)
  }
  check('no browser errors', report.errors.length === 0, report.errors)
 } catch (error) {
@@ -38,3 +38,95 @@ export const integratedChangedFiles = [
  'packages/sw/src/components/sw-header/SWHeader.tsx', 'packages/sw/src/components/sw-header/index.ts', 'packages/sw/src/components/sw-header/types.ts',
  ...['SWHeaderDocumentTitle', 'SWHeaderDropdown', 'SWHeaderFields', 'SWHeaderLayerMenu', 'SWHeaderLineStyleMenu', 'SWHeaderMore', 'SWHeaderPropertyFields', 'SWHeaderPropertyPanel'].map(name => `packages/sw/src/components/sw-header/components/${name}.tsx`),
 ]
 // 2026-10-20 (test alignment): approved SW Story changes after the unused-demo removal that the lists above do not name.
 // Each comes from a user-requested commit merged into main as 553e4df. Regressions accept exactly these changes.
 // approvedMainCommit is the reviewed main merge the regressions treat as the accepted source state. overview.browser.mjs
 // (both modes) and storybook-unused-removal.browser.mjs keep their old baselines (50bf5bd, c8e5fbe) for the Story
 // inventory and declarations, and accept only the changes named in this file. For the source paths they guard (overview:
 // packages/sw/src; unused-removal: also the SW ai/package files, the other packages, Overview, Dropdown CSF, assets and
 // .storybook) they require no difference from this commit (integratedChangedFiles excepted) and report the diff from the
 // old baseline as sinceBaseline only.
 // Update it only after a merge into main whose Story and product source changes were all approved, in the same change
 // that records that merge's approved Story additions, removals, moves and tag changes in the lists of this file.
 // Never move it to make a failing check pass, and never to a commit that carries unreviewed Story or source changes.
 // A new main HEAD alone is no reason to move it: no script or workflow updates it automatically; it changes only in a
 // reviewed test-only commit (docs/sw/sw-test-regression-baseline-2026-10-20.md §9).
 export const approvedMainCommit = '553e4df4a865aaf6514b1c2b86cb2e3e9a658e5f'
 // 170a5c2: the SW/Header sidebar page of the home menu (the moved verification Stories are movedHomeMenuIds).
 export const homeMenuSidebarIds = ['sw-header--home-menu']
 // 6cf8854 SW Footer (current IDs after retiredFooterIds), 7f42923 viewer mode, 41e963a theme inheritance.
 export const footerStoryIds = ['full-footer', 'tool-groups', 'figma-variants', 'custom-content', 'responsive', 'parts'].map(id => `sw-footer--${id}`)
 export const viewerStoryIds = ['viewer-header', 'menu-groups', 'states', 'dropdowns', 'settings-panel', 'content-variants', 'variable-size', 'responsive', 'compare-with-sw-header', 'logo'].map(id => `sw-viewer--${id}`)
 export const themeStoryIds = ['sw-theme--theme-inheritance']
 // 2b0e1a2 sidebar simplification: ID and direct URL kept, hidden from the sidebar by the verification tag.
 export const verificationTaggedIds = ['sw-header--window-move-motion', 'sw-header--k-guide']
 // Every approved SW Story ID added after the unused-demo removal, as the current index lists them.
 export const approvedAddedStoryIds = [...integratedStoryIds.filter(id => !retiredToolIds.includes(id)), ...homeMenuSidebarIds,
  ...Object.values(movedHomeMenuIds).filter(id => !retiredHomeMenuCompareIds.includes(id)), ...footerStoryIds, ...viewerStoryIds, ...themeStoryIds]
 // An earlier index entry with the approved tag / Popup move applied (2b0e1a2; the moved Story has no component path).
 export const withApprovedEntryChanges = entry => {
  if (verificationTaggedIds.includes(entry.id)) return { ...entry, tags: [...entry.tags, 'verification'] }
  if (!movedToPopupIds.includes(entry.id)) return entry
  const { componentPath, ...rest } = entry
  return { ...rest, title: 'SW/Popup', importPath: './src/sw/sw-property-panel.stories.tsx' }
 }
 // src/sw/sw-header.stories.tsx declarations changed or added by approved commits (compared with that commit's version)
 // and the Popup move (compared in its new file).
 export const approvedHeaderDeclarations = {
  Overview: '170a5c23aed10f8fc65e5b20e9b94bd3c1ff1227', ResponsiveMore: '170a5c23aed10f8fc65e5b20e9b94bd3c1ff1227', // home menu, measured More
  WindowMoveMotion: '2b0e1a2262002aedb01c29c5d18ffae1219bf3ef', KGuide: '2b0e1a2262002aedb01c29c5d18ffae1219bf3ef', // verification tag
  PropertyPanelComparePage: '2b0e1a2262002aedb01c29c5d18ffae1219bf3ef', // exported for the moved Popup Story
 }
 export const movedHeaderDeclarations = { PropertyPanelCompare: ['src/sw/sw-property-panel.stories.tsx', '2b0e1a2262002aedb01c29c5d18ffae1219bf3ef'] }
 // 2026-10-20 (legacy suite alignment): dropdown-consolidation, storybook-cleanup-stage1, property-panel-comparison and
 // detail-buttons compare an earlier SW/Header inventory or source with today's through the approved changes below.
 // Retired after the Dropdown consolidation and absent today (the Popup move keeps its ID: withApprovedEntryChanges).
 export const laterRetiredHeaderIds = [...retiredPropertyPanelIds, ...retiredUnusedDemoIds]
 // The approved additions that sit under SW/Header.
 export const approvedAddedHeaderIds = approvedAddedStoryIds.filter(id => id.startsWith('sw-header--'))
 // An earlier SW/Header entry list against today's index: `changed` (ID, name, title or tags differ from the earlier entry
 // with the approved changes applied), `unexpected` (SW/Header Stories neither retained nor approved), `missing` (approved
 // additions not under SW/Header) and `retiredPresent` (an approved retirement back in the index).
 export const headerInventoryIssues = (entries, index) => {
  const expected = retainedInventory(entries).filter(entry => !laterRetiredHeaderIds.includes(entry.id)).map(withApprovedEntryChanges)
  const signature = entry => entry && JSON.stringify([entry.id, entry.name, entry.title, entry.tags])
  const current = swStoryEntries(index)
  const issues = {
    actual: current.length, expected: expected.filter(entry => entry.title === 'SW/Header').length + approvedAddedHeaderIds.length,
    changed: expected.filter(entry => signature(entry) !== signature(index.entries[entry.id])).map(entry => entry.id),
    unexpected: current.filter(entry => !expected.some(item => item.id === entry.id) && !approvedAddedHeaderIds.includes(entry.id)).map(entry => entry.id),
    missing: approvedAddedHeaderIds.filter(id => index.entries[id]?.title !== 'SW/Header'),
    retiredPresent: [...retiredStage1Ids, ...retiredDropdownIds, ...laterRetiredHeaderIds].filter(id => index.entries[id]),
  }
  return { ...issues, ok: issues.actual === issues.expected && ['changed', 'unexpected', 'missing', 'retiredPresent'].every(key => issues[key].length === 0) }
 }
 // src/sw/sw-header.stories.tsx top-level declarations (Story exports, helpers, fixtures, types; imports as
 // `import:<source>`) that approved commits changed, added or removed after the stage-1 baseline 92830fe, under the last
 // commit that touched each. Each suite still excludes the declarations of its own change (Dropdown, motion, ComposedDemo, meta).
 export const approvedHeaderSourceChanges = {
  // chore(sw): improve interactive header story preview (Overview itself changed again in 170a5c2)
  'bf16578226fe89e5d9a6ba904b7979bebb602661': ['import:./sw-header-overview'],
  // refactor(storybook): consolidate property panel comparison layout (retiredPropertyPanelIds)
  'c8e5fbeebc26fba92998fc5ddcd28c6c110e452d': ['PropertyCompare', 'PropertyPanelVariants', 'PropertyStateStory', 'PropertyPanelNone', 'PropertyPanelAll', 'PropertyPanelCircle', 'PropertyPanelExpanded'],
  // refactor(storybook): remove unused SW header demo stories (retiredUnusedDemoIds and the demo code only they used)
  '5faa1f1ffe89eb7aeb4aaec81ac5bb2d0f4fced9': ['StyleHostProps', 'StyleHeader', 'FIGMA_LAYERS', 'noop', 'LayerHostProps', 'describeLayers', 'LayerHeader', 'LayerDemo',
    'InputDemo', 'LayerDetailInput', 'PropertyPanelDemo', 'PropertyPanel', 'RequiredColorDemo', 'AdditionalHover', 'PropertyBarDemo', 'PropertyBar', 'CONTROL_FIXTURE',
    'DynamicControlsDemo', 'DynamicControls', 'Colorize', 'HIDEABLE_PARTS', 'MENU_IDS', 'COMPOSITION_PRESETS', 'CompositionDemo', 'Composition', 'SampleShapeViewer',
    'SHAPE_MODES', 'SHAPE_MODE_LABELS', 'ShapeSlotDemo', 'PropertyShapeSlot', 'FIELD_NODES', 'FIELD_FIXTURE', 'FIELD_HOVER', 'FieldPanel', 'PropertyFieldsDemo', 'PropertyFields',
    'import:./assets/figma-reference/btn-detail-layer-26-10767.png', 'import:./assets/figma-reference/input-26-11656.png'],
  // feat(sw): integrate responsive home menu into header
  '170a5c23aed10f8fc65e5b20e9b94bd3c1ff1227': ['import:@hm-design/sw', 'import:./sw-home-menu-fixture', 'OVERVIEW_HOME_MENU', 'Overview', 'MeasuredMoreDemo', 'ResponsiveMore'],
  // refactor(sw): simplify storybook navigation and examples (verification tags, Popup move)
  '2b0e1a2262002aedb01c29c5d18ffae1219bf3ef': ['meta', 'WindowMoveMotion', 'KGuide', 'PropertyPanelCompare', 'PropertyPanelComparePage'],
 }
 const approvedHeaderSourceCommit = Object.fromEntries(Object.entries(approvedHeaderSourceChanges).flatMap(([commit, names]) => names.map(name => [name, commit])))
 // Declarations among `names` that differ between `base` and `current` without an approved change: none listed, or the
 // current text differs from the approving commit's, or that commit did not change it. `at(ref)` returns the declaration
 // map of the file at a Git ref, keyed like `base` and `current`.
 export const headerSourceIssues = (names, base, current, at) => {
  const cache = new Map(), version = ref => { if (!cache.has(ref)) cache.set(ref, at(ref)); return cache.get(ref) }
  return names.filter(name => base[name] !== current[name]).filter(name => {
    const commit = approvedHeaderSourceCommit[name]
    return !commit || current[name] !== version(commit)[name] || version(`${commit}^`)[name] === version(commit)[name]
  })
 }
@@ -1,14 +1,16 @@
 // Current regression after removing nine unused SW Header demo pages (2026-10-19, 19 -> 10 SW Stories).
 // Build Storybook first. Usage: node packages/sw/tests/storybook-unused-removal.browser.mjs [evidence-dir]
-// Older scripts that open the retired IDs (detail-buttons preservation/verify, followup-four, property-close,
+// Older scripts that open the retired IDs (followup-four, property-close, property-fields, detail-buttons
-// property-fields, property-panel-comparison verify, storybook-cleanup-stage1) are historical evidence for their runs.
+// composition-history, property-panel-comparison before) are historical evidence for their runs. Since 2026-10-20
 // detail-buttons, property-panel-comparison verify and storybook-cleanup-stage1 run on current public Stories again.
 import { mkdir, readFile, writeFile } from 'node:fs/promises'
 import { execFileSync } from 'node:child_process'
 import path from 'node:path'
 import http from 'node:http'
 import { parse } from '@babel/parser'
-import { swStoryEntries, retiredUnusedDemoIds, integratedStoryIds, integratedChangedFiles, movedToPopupIds } from './storybook-inventory.mjs'
+import { swStoryEntries, retiredUnusedDemoIds, integratedChangedFiles, movedToPopupIds, approvedMainCommit, approvedAddedStoryIds, withApprovedEntryChanges, approvedHeaderDeclarations, movedHeaderDeclarations } from './storybook-inventory.mjs'
 import { loadPlaywright } from './playwright-runtime.mjs'
 import { sourceChanges, unapprovedChanges } from './source-changes.mjs'
 const out = path.resolve(process.argv[2] ?? 'docs/sw/storybook-unused-story-removal-qa/verify')
 const qa = 'docs/sw/storybook-unused-story-removal-qa/before'
@@ -26,14 +28,21 @@ const beforeSW = swStoryEntries(beforeIndex), afterSW = swStoryEntries(afterInde
 const expected = beforeSW.filter(e => !retiredUnusedDemoIds.includes(e.id))
 report.data.inventory = { before: [stories(beforeIndex).length, beforeSW.length], after: [stories(afterIndex).length, afterSW.length], sw: afterSW.map(e => [e.id, e.name]) }
 await writeFile(path.join(out, 'story-inventory-after.json'), JSON.stringify({ total: stories(afterIndex).length, sw: afterSW.map(e => ({ id: e.id, name: e.name, title: e.title, tags: e.tags })) }, null, 2) + '\n')
-// 2026-10-19 integrated improvement: 329 + its 5 Stories (2 under SW/Header, SW/Tool, SW/Popup); the 10 retained SW/Header Stories stay.
+// 2026-10-20 (test alignment): full-index-before.json (c8e5fbe) stays the baseline. After the nine removals (338 -> 329,
 // 19 -> 10 SW Stories) the index may differ only by the approved changes of storybook-inventory.mjs: the added SW Stories
 // (integrated improvement, home menu, Footer, Viewer, Theme), the verification tags, the Popup move and the SW sidebar order.
 const added = stories(afterIndex).filter(e => !beforeIndex.entries[e.id])
-const retainedSW = afterSW.filter(e => !integratedStoryIds.includes(e.id))
+const retainedSW = Object.values(afterIndex.entries).filter(e => expected.some(entry => entry.id === e.id))
-check('inventory: 19 -> 10 retained SW/Header Stories, 338 -> 329 total plus only the integrated-improvement Stories', beforeSW.length === 19 && retainedSW.length === 10 && stories(beforeIndex).length === 338 && stories(afterIndex).length === 329 + integratedStoryIds.length && JSON.stringify(added.map(e => e.id).sort()) === JSON.stringify([...integratedStoryIds].sort()), { ...report.data.inventory, added: added.map(e => e.id) })
+check('inventory: 19 -> 10 retained SW Stories, 338 -> 329 total plus only the approved added Stories', beforeSW.length === 19 && expected.length === 10 && retainedSW.length === 10 && stories(beforeIndex).length === 338 && stories(afterIndex).length === 329 + approvedAddedStoryIds.length && JSON.stringify(added.map(e => e.id).sort()) === JSON.stringify([...approvedAddedStoryIds].sort()), { ...report.data.inventory, added: added.map(e => e.id), unapproved: added.map(e => e.id).filter(id => !approvedAddedStoryIds.includes(id)), missing: approvedAddedStoryIds.filter(id => !afterIndex.entries[id]) })
 check('inventory: the nine requested IDs existed before and are absent now', retiredUnusedDemoIds.length === 9 && retiredUnusedDemoIds.every(id => beforeIndex.entries[id] && !afterIndex.entries[id]))
-check('inventory: retained SW IDs, names, titles, tags and order unchanged', sig(expected) === sig(retainedSW), retainedSW.map(e => e.id))
+check('inventory: retained SW IDs, names, titles, tags and order unchanged except the approved tags and Popup move', sig(expected.map(withApprovedEntryChanges)) === sig(retainedSW), retainedSW.map(e => [e.id, e.title, e.tags]))
-const others = index => Object.values(index.entries).filter(e => !retiredUnusedDemoIds.includes(e.id) && !integratedStoryIds.includes(e.id) && !/^sw-(tool|popup)--docs$/.test(e.id))
+// Entries outside SW keep their values and order; retained SW entries keep their values (order checked above), and the SW
-check('inventory: every non-removed index entry identical (docs and other packages included)', JSON.stringify(others(beforeIndex)) === JSON.stringify(others(afterIndex)))
+// block sits right after Center Graphic (2b0e1a2 storySort: SW > Header, Footer, Popup, Viewer, Theme).
 const others = index => Object.values(index.entries).filter(e => !retiredUnusedDemoIds.includes(e.id) && !approvedAddedStoryIds.includes(e.id) && !/^sw-(tool|popup)--docs$/.test(e.id))
 const outsideSW = list => JSON.stringify(list.filter(e => !e.id.startsWith('sw-')))
 const keys = Object.keys(afterIndex.entries), firstSW = keys.findIndex(id => id.startsWith('sw-'))
 const swOrder = { previous: keys[firstSW - 1], afterCenterGraphic: afterIndex.entries[keys[firstSW - 1]]?.title.startsWith('Center Graphic/') && !keys.slice(firstSW + 1).some(id => afterIndex.entries[id].title.startsWith('Center Graphic/')), contiguous: keys.filter(id => id.startsWith('sw-')).every((id, i) => keys[firstSW + i] === id) }
 check('inventory: every non-removed index entry identical (docs and other packages included) except the approved SW changes', outsideSW(others(beforeIndex)) === outsideSW(others(afterIndex)) && JSON.stringify(others(beforeIndex).filter(e => e.id.startsWith('sw-')).map(withApprovedEntryChanges)) === JSON.stringify(others(beforeIndex).filter(e => e.id.startsWith('sw-')).map(e => afterIndex.entries[e.id])) && swOrder.afterCenterGraphic && swOrder.contiguous, swOrder)
 check('inventory: Dropdown keeps sw-header--composed-controls / Dropdown / SW/Header', afterIndex.entries['sw-header--composed-controls']?.name === 'Dropdown' && afterIndex.entries['sw-header--composed-controls']?.title === 'SW/Header')
 check('inventory: comparison keeps its ID and name', afterIndex.entries['sw-header--property-panel-compare']?.name === 'Property Panel · 4개 비교')
@@ -45,14 +54,22 @@ const oldExports = exports(execFileSync('git', ['show', `${baseCommit}:${sourceP
 const newExports = exports((await readFile(sourcePath, 'utf8')).replaceAll('\r\n', '\n'))
 const removedExports = ['PropertyFields', 'PropertyShapeSlot', 'Composition', 'Colorize', 'DynamicControls', 'PropertyBar', 'AdditionalHover', 'PropertyPanel', 'LayerDetailInput']
 check('source: the nine Story exports are removed', removedExports.every(name => oldExports[name] && !newExports[name]))
-const changed = Object.keys(oldExports).filter(name => !removedExports.includes(name) && oldExports[name] !== newExports[name])
+// 2026-10-20 (test alignment): an export changed or added after c8e5fbe must equal its version at the approving commit;
-check('source: retained exports (Stories and ComposedDemo) byte-identical', changed.length === 0 && Object.keys(newExports).every(name => oldExports[name]), changed)
+// the moved Popup Story is compared in its new file. All other retained exports stay byte-identical to c8e5fbe.
-// The SW package may change only in the files of the 2026-10-19 integrated improvement (verified by its own suites);
+const exportsAt = (commit, file) => exports(execFileSync('git', ['show', `${commit}:${file}`], { encoding: 'utf8' }).replaceAll('\r\n', '\n'))
-// other packages, Overview, Dropdown CSF, assets and Storybook config stay untouched.
+const movedNow = Object.fromEntries(await Promise.all(Object.entries(movedHeaderDeclarations).map(async ([name, [file]]) => [name, exports((await readFile(file, 'utf8')).replaceAll('\r\n', '\n'))[name]])))
 const approvedExport = name => approvedHeaderDeclarations[name] && newExports[name] === exportsAt(approvedHeaderDeclarations[name], sourcePath)[name]
 const movedExport = name => movedHeaderDeclarations[name] && !newExports[name] && movedNow[name] === exportsAt(movedHeaderDeclarations[name][1], movedHeaderDeclarations[name][0])[name]
 const changed = Object.keys(oldExports).filter(name => !removedExports.includes(name) && oldExports[name] !== newExports[name] && !approvedExport(name) && !movedExport(name))
 const unapprovedNew = Object.keys(newExports).filter(name => !oldExports[name] && !approvedExport(name))
 check('source: retained exports (Stories and ComposedDemo) byte-identical to c8e5fbe or their approving commit; only approved new or moved exports', changed.length === 0 && unapprovedNew.length === 0, { changed, unapprovedNew })
 // Other packages, Overview, Dropdown CSF, assets and Storybook config, and the SW package outside the integrated-improvement
 // files (verified by their own suites), may differ from the approved main merge in nothing. sinceBaseline lists the approved
 // changes after c8e5fbe; update approvedMainCommit (storybook-inventory.mjs) on the next approved merge.
 const untouched = ['packages/sw/src', 'packages/sw/ai', 'packages/sw/package.json', 'packages/sw/README.md', 'packages/ui', 'packages/org-chart', 'packages/org-chart-react', 'packages/center-graphic', 'src/sw/sw-header-overview.tsx', 'src/sw/sw-header-dropdown.stories.tsx', 'src/sw/sw-composed-controls.css', 'src/sw/assets', '.storybook']
-const diff = execFileSync('git', ['diff', '--name-only', baseCommit, '--', ...untouched], { encoding: 'utf8' }).trim().split(/\r?\n/).filter(Boolean)
+// Untracked new files count as changes (source-changes.mjs).
-const unexpected = diff.filter(file => !integratedChangedFiles.includes(file))
+const unexpected = unapprovedChanges(approvedMainCommit, untouched, integratedChangedFiles)
-check('source: other packages, Overview, Dropdown CSF, assets and Storybook config untouched; SW package only within the integrated-improvement files', unexpected.length === 0, { unexpected, integrated: diff.length })
+check('source: other packages, Overview, Dropdown CSF, assets and Storybook config unchanged since the approved main merge; SW package only within the integrated-improvement files', unexpected.length === 0, { unexpected, sinceBaseline: sourceChanges(baseCommit, untouched).length })
 // ---- Browser
 const root = path.resolve('storybook-static'), mime = { '.html': 'text/html', '.js': 'text/javascript', '.css': 'text/css', '.json': 'application/json', '.svg': 'image/svg+xml', '.png': 'image/png', '.gif': 'image/gif', '.ttf': 'font/ttf', '.woff2': 'font/woff2' }
@@ -14,7 +14,7 @@ const root = path.resolve('storybook-static'), mime = { '.html': 'text/html', '.
 const server = http.createServer(async (req, res) => { try { const p = new URL(req.url, 'http://localhost').pathname, file = path.resolve(root, '.' + decodeURIComponent(p === '/' ? '/index.html' : p)); res.setHeader('Content-Type', mime[path.extname(file)] ?? 'application/octet-stream'); res.end(await readFile(file)) } catch { res.writeHead(404).end() } })
 await new Promise(r => server.listen(0, '127.0.0.1', r)); const base = `http://127.0.0.1:${server.address().port}`
 const browser = await chromium.launch({ headless: true, executablePath: process.env.SW_CHROME_PATH ?? 'C:/Program Files/Google/Chrome/Application/chrome.exe' })
-const checks = []; const check = (n, ok, d) => { checks.push({ n, ok, d }); console.log(ok ? 'PASS' : 'FAIL', n, ok ? '' : JSON.stringify(d).slice(0, 500)) }
+const checks = []; const check = (n, ok, d) => { checks.push({ n, ok, d }); console.log(ok ? 'PASS' : 'FAIL', n, ok ? '' : String(JSON.stringify(d)).slice(0, 500)) }
 const report = {}
 let errors = []
 const page = await browser.newPage({ viewport: { width: 1920, height: 1100 } })
@@ -125,8 +125,11 @@ for (const t of ['파일 열기', '레이어']) {
 const tab = vh.locator('.hm-sw-viewer-header__tab', { hasText: 'Layout' }).first()
 await stableOnHover('Viewer Layout tab', tab, tab)
 // More stays: narrow header shows the More button, it opens and lists the moved items.
-await vh.evaluate(e => { e.style.width = '700px' }); await page.waitForTimeout(200)
+await vh.evaluate(e => { e.style.width = '700px' })
 const more = vh.getByRole('button', { name: /추가 도구/ })
 // 2026-10-20: the header re-measures through a ResizeObserver; wait for More instead of a fixed 200ms (the check below
 // still fails when it never appears). The fixed wait failed intermittently on the same build.
 await more.waitFor({ state: 'visible', timeout: 3000 }).catch(() => {})
 check('Viewer: More button shown at a narrow width', await more.count() === 1 && await more.isVisible())
 await more.click(); await page.waitForTimeout(200)
 const moreItems = await page.locator('.hm-sw-viewer-menu [role="menuitem"], .hm-sw-viewer-menu [role="menuitemradio"], .hm-sw-viewer-menu [role="menuitemcheckbox"]').count()
@@ -27,7 +27,9 @@ const DEFAULT = '"Noto Sans KR", "Malgun Gothic", "Apple SD Gothic Neo", sans-se
 const results = []
 const check = (name, pass, detail = '') => { results.push({ name, result: pass ? 'PASS' : 'FAIL', detail }); console.log(`${pass ? 'PASS' : 'FAIL'}  ${name}${detail ? `  — ${detail}` : ''}`) }
 const errors = []
-const browser = await chromium.launch({ headless: true, executablePath: process.env.SW_CHROME_PATH ?? 'C:/Program Files/Google/Chrome/Application/chrome.exe' })
+// 2026-10-20: software raster without font hinting / subpixel positioning, as integrated-visual / viewer-regression: the
 // regression pass failed on varying Stories (Home Menu, Footer, Responsive More) on the same build, before and after the change.
 const browser = await chromium.launch({ headless: true, args: ['--disable-gpu', '--font-render-hinting=none', '--disable-font-subpixel-positioning', '--disable-lcd-text', '--force-color-profile=srgb'], executablePath: process.env.SW_CHROME_PATH ?? 'C:/Program Files/Google/Chrome/Application/chrome.exe' })
 const newPage = async (width = 1440, height = 1000) => {
  const page = await browser.newPage({ viewport: { width, height }, reducedMotion: 'reduce' })
  page.on('pageerror', error => errors.push(`${page.url()}: ${error.message}`))
@@ -20,7 +20,9 @@ await mkdir(out, { recursive: true })
 const ids = ['overview', 'interactive-states', 'logo-slot', 'document-dropdown', 'responsive-more', 'k-guide', 'property-panel-compare', 'composed-controls', 'document-open', 'hidden-sub-controls', 'detail-buttons'].map(id => `sw-header--${id}`)
  .concat(['sw-popup--custom-content', 'sw-popup--multiple-popups'])
 const widths = [1920, 1180, 768]
-const browser = await chromium.launch({ headless: true, executablePath: process.env.SW_CHROME_PATH ?? 'C:/Program Files/Google/Chrome/Application/chrome.exe' })
+// 2026-10-20: software raster without font hinting / subpixel positioning, as integrated-visual.browser.mjs: two
 // captures of the same build otherwise differed in text anti-aliasing (Δ1 areas, 2 × 2 glyph spots). Threshold stays 0.
 const browser = await chromium.launch({ headless: true, args: ['--disable-gpu', '--font-render-hinting=none', '--disable-font-subpixel-positioning', '--disable-lcd-text', '--force-color-profile=srgb'], executablePath: process.env.SW_CHROME_PATH ?? 'C:/Program Files/Google/Chrome/Application/chrome.exe' })
 const shot = async (url, width, restore = false) => {
  const page = await browser.newPage({ viewport: { width, height: 1000 }, reducedMotion: 'reduce' })
  await page.goto(url)
@@ -32,6 +34,15 @@ const shot = async (url, width, restore = false) => {
  const elements = []
  for (const element of await page.locator('.hm-sw-header, .hm-sw-property').all()) {
    if (!(await element.isVisible())) continue
    // 2026-10-20: panels inside an inner scroller (Property Panel · 4개 비교) were scrolled into view at varying offsets, so
    // two captures of the same build differed by 3–7px. Scroll instantly, keep every scroll offset whole, wait for stable frames.
    await element.evaluate(e => new Promise(resolve => {
      e.scrollIntoView({ block: 'nearest', inline: 'nearest', behavior: 'instant' })
      for (let n = e.parentElement; n; n = n.parentElement) { n.scrollTop = Math.round(n.scrollTop); n.scrollLeft = Math.round(n.scrollLeft) }
      let last = '', stable = 0
      const tick = () => { const r = e.getBoundingClientRect(), now = [r.x, r.y, r.width, r.height].join(); stable = now === last ? stable + 1 : 0; last = now; stable >= 3 ? resolve() : requestAnimationFrame(tick) }
      requestAnimationFrame(tick)
    }))
    elements.push(PNG.sync.read(await element.screenshot({ animations: 'disabled' })))
  }
  await page.close()