[patternflow-bot]

lsh / https://claude.ai/code/session_01UuHW3UoaQf9BPw9Q5XRGrN

Lab 머리줄만 쓰던 규칙 22개를 여럿이 쓰는 PatternLab.module.css 에서 머리줄 틀이 있는 LabPanels.module.css 로, To hardware 창만 쓰던 검은 단추를 그 창의 CSS 로 옮겼어요. 화면은 그대로이고, 머지하면 공용 CSS 에 한 파일만 읽는 클래스가 다시 들어올 때 시험이 빨개져요.

좋아지는 것: 없음

체크리스트

• incoming/ROUND.md 읽기
• 앞 바퀴 PR 글(세 직함만) 읽기 — [DONE] Layers 패널의 규칙 24개가 dock 틀 CSS 에서 Layers 패널의 CSS 로 간다 #239, [DONE] Pattern Lab 에 두세 번 적힌 도우미 다섯이 한 곳에서 온다 #238, [DONE] Pattern Lab 코드에서 아무도 읽지 않는 이름 둘이 빠지고, 다른 파일이 읽지 않는 export 62개가 파일 안으로 들어간다 #237, [DONE] 다음 열 바퀴가 Pattern Lab 부터 아무도 안 읽는 코드와 CSS, 낡은 사진을 걷는다 #235 에 대화 댓글, 리뷰, 줄 댓글이 하나도 없고, 10월 20일 뒤 이 레포의 댓글이 0개예요
• 고를 일 정하기 — 13위는 바퀴 9193([DONE] Pattern Lab 코드에서 아무도 읽지 않는 이름 둘이 빠지고, 다른 파일이 읽지 않는 export 62개가 파일 안으로 들어간다 #237~[DONE] Layers 패널의 규칙 24개가 dock 틀 CSS 에서 Layers 패널의 CSS 로 간다 #239)이 했고, 남은 줄 12개 가운데 맨 위가 4위
• PatternLab.module.css 의 클래스마다 읽는 파일 다시 세기
• 머리줄 규칙 22개를 LabPanels.module.css 로, darkButton 을 HardwareModal.module.css 로
• 포커스 규칙에 묶인 .labNav a:focus-visible 떼어 같이 옮기기
• labCss.test.ts 에 「한 파일만 읽는 클래스가 없다」 시험, dev CSS 에서 빨개지는지
• 390(터치)과 1440 의 28가지 상태에서 getComputedStyle 비교
• 다섯 검사, check:voice
• dev merge 뒤 [DONE] — dev 가 b6e32f8 그대로라 merge 할 것이 없었고, 3bbe838 에서 Drift checks · Web CI 초록

한 일

• web/src/app/pattern-lab/PatternLab.module.css 에서 PatternLabClient.tsx 만 읽는 규칙 22개를 LabPanels.module.css 의 머리줄 규칙(.dockHeader 들) 바로 뒤로 옮겼어요. labBrand, labTitle, projectIdentity, projectMeta, labName, labNav, saveStatus, saveDot, storageNotice, forkBadge 와 그 hover, focus, data-state 규칙이에요. 값과 순서는 그대로예요.
• .headerToggle:focus-visible, .headerSelect:focus-visible, .labNav a:focus-visible 는 한 규칙이었어요. labNav 가 다른 파일의 해시 이름이 되면 Community 링크가 키보드 포커스 테두리를 잃으니, .labNav a:focus-visible 를 떼어 같은 값으로 옮겼어요.
• HardwareModal.tsx 만 읽는 .darkButton 은 이미 있는 HardwareModal.module.css 끝으로 갔어요. !important 셋이 그대로라 순서는 상관없어요.
• PatternLabClient.tsx 는 열한 곳을 styles.* 에서 dock.* 로, HardwareModal.tsx 는 두 곳을 local.darkButton 으로 읽어요.
• labCss.test.ts 에 「PatternLab.module.css holds no class that only one file reads」 를 더했어요. 「Lab CSS modules」 시험이 쓰던 소스 목록과 읽는 이름 셈을 readers() 로 꺼내 둘이 같이 써요. 앞 시험의 판정은 그대로예요.
• 세 CSS 파일의 머리 주석을 지금 담는 것으로 고쳤어요.

증거

클래스마다 PatternLab.module.css 를 불러오는 파일 가운데 그 이름을 읽는 파일을 셌어요(git grep 'styles\.<이름>'):

dev b6e32f8:
  labBrand labTitle projectIdentity projectMeta labName labNav
  saveStatus saveDot storageNotice forkBadge   → PatternLabClient.tsx 하나
  darkButton                                   → HardwareModal.tsx 하나
  headerToggle → PatternLabClient.tsx · headerSelect → PreviewPanel.tsx (바탕 규칙 하나를 같이 써요)
  stats 2 · dotSep 3 · errorBox 4 · variantActions 2 · modal* 3
PatternLab.module.css 404줄 → 237줄 · LabPanels.module.css 465줄 → 636줄

새 시험이 dev 의 CSS 를 잡는지: CSS 와 tsx 다섯을 dev 판으로 되돌리고 돌리면 빨개져요.

 FAIL  src/app/pattern-lab/labCss.test.ts > PatternLab.module.css > holds no class that only one file reads
+   "darkButton",
+   "forkBadge",
+   "labBrand",
+   "labName",
+   "labNav",
+   "labTitle",
+   "projectIdentity",
+   "projectMeta",
+   "saveDot",
+   "saveStatus",
+   "storageNotice",
      Tests  1 failed | 14 passed (15)

앞 시험을 readers() 로 바꾼 뒤에도 죽은 클래스를 잡는지: LabPanels.module.css 끝에 .zzDead {} 를 넣으면 빨개져요.

   × Lab CSS modules > define no class that no component uses
+     "zzDead",
      Tests  1 failed | 14 passed (15)

화면이 그대로인지: NEXT_PUBLIC_BUILD_ENABLED=1 과 NEXT_PUBLIC_COMMUNITY_URL 을 주어 dev 와 이 브랜치를 빌드해 next start 로 열고(Share 와 To hardware 단추가 그려져요), Chromium 으로 /pattern-lab 을 390×844(터치, hover: none)와 1440×900 에서 28가지 상태로 다뤘어요. 요소마다 getComputedStyle 의 모든 속성과 ::before, ::after, ::placeholder 를 정렬해 모아 DOM 경로로 맞춰 봤어요. 상태는 처음 연 화면, 포크와 고쳐 쓰기 표시 둘을 심은 프로젝트, 이름 칸 hover · 포커스 · 빈 칸, 로고와 Community 링크 hover, 키보드로 Community 링크와 Panels 단추에 포커스(:focus-visible 확인), Recent 와 To hardware hover, Recent 메뉴, localStorage.setItem 을 막아 「Unsaved」 와 저장 실패 알림을 띄운 화면, 거기서 Park 가 실패한 알림, Retry save hover, To hardware 창의 두 단계(검은 Next 단추, 검은 Apply 단추 hover)예요.

dev-1 vs dev-2      28 states, 10819 elements, 0 differ (0 in the dockview tab strip, 0 elsewhere)
dev-1 vs branch-1   28 states, 10819 elements, 0 differ (0 in the dockview tab strip, 0 elsewhere)

옮긴 규칙이 그 비교에 실제로 잡혔는지, 그 규칙의 값을 모두 가진 요소를 셌어요:

dev-1    darkButton(ready) 2 | forkBadge 2 | labBrand 1 | labName focus outline 1 | nav focus-visible 1 | storageNotice 1 | saveDot error 1
branch-1 darkButton(ready) 2 | forkBadge 2 | labBrand 1 | labName focus outline 1 | nav focus-visible 1 | storageNotice 1 | saveDot error 1

빌드된 CSS(.next/static/chunks/*.css):

Lab 첫 덩이   dev 113,378 B · gzip 19,064  →  branch 113,320 B · gzip 19,039
To hardware   dev   2,614 B · gzip    745  →  branch   2,717 B · gzip    775 (darkButton 이 이 덩이로)
사이트 CSS 전체 466,607 B → 466,652 B (+45, 머리 주석과 떼어 낸 포커스 규칙)

다섯 검사(web/, 끝줄):

npm ci                              added 762 packages, and audited 763 packages in 20s
npm run lint -- --max-warnings=0    lint exit 0
npm run typecheck                   typecheck exit 0
npm run build                       ƒ  (Dynamic)  server-rendered on demand (exit 0)
npm run check:ci                    passed virtual-panel (Test Files 101 passed · Tests 1265 passed · links-absolute, roadmap skipped) · check:ci exit 0
npm run check:voice                 check:voice: nothing found (브랜치 70줄 · PR 본문 128줄)

3bbe838 의 GitHub 검사:

Drift checks | completed | success
Web CI | completed | success

화면을 바꾸지 않아서 PR 에 사진은 싣지 않았어요. 28가지 상태의 사진은 스크래치 폴더에서 상태가 맞는지 보는 데만 썼어요.

실행법

cd web
npx vitest run src/app/pattern-lab/labCss.test.ts

가정

• 표는 규칙 24개라고 했어요. .headerToggle[data-primary="true"] 와 그 :hover 둘은 옮기지 않았어요. headerToggle 의 바탕 규칙은 Preview 의 headerSelect 와 한 규칙(.headerToggle, .headerSelect)이라 두 파일이 쓰는 모양이고, 한 클래스를 두 모듈에 나눠 둘 수는 없어요(모듈마다 해시 이름이 달라요). 그래서 옮긴 것은 22개와 포커스 규칙에서 뗀 셀렉터 하나예요.
• 새 시험은 그 짝을 보고, 바탕 규칙을 한 규칙으로 쓴 클래스끼리는 서로의 파일을 같이 세요. 포커스 규칙처럼 상태 규칙에서만 묶인 클래스는 세지 않아서, dev 의 labNav 도 잡아요.
• 표의 「셸의 CSS」 는 LabPanels.module.css 로 읽었어요. 표의 고칠 곳에 그 파일이 있고, 그 파일은 이미 .dockShell, .dockHeader 와 머리줄 메뉴를 담는 dock 틀이에요. 새 PatternLabClient.module.css 를 만들면 머리줄이 두 파일로 갈라져요.
• web/ARCHITECTURE.md:78 의 「PatternLab.module.css keeps only what two or more files draw with, and LabPanels.module.css the dock chrome」 은 이제 맞아서 고치지 않았어요.

Changelog

Web

• Pattern Lab's header rules live with the dock. The 22 rules only PatternLabClient.tsx read moved from the shared PatternLab.module.css to LabPanels.module.css, To hardware's dark button went to HardwareModal.module.css, and a test fails when a class in the shared file has one reader. Computed styles in 28 Lab states at 390px and 1440px match dev.

경험

언제: 바퀴에서 Pattern Lab 의 포크 표시, 저장 실패 알림 같은 상태를 Playwright 로 띄워 볼 때
교훈: Lab 은 처음 열 때 patternflow_lab_project_v2 를 쓰지 않으니 이름 칸을 한 번 바꿔 저장된 뒤에 그 JSON 에 forkOf, editOf 를 넣고 다시 열고, 저장 실패는 Storage.prototype.setItem 을 던지게 바꾼 뒤 이름을 고쳐 띄워요
근거: #240 에서 연 직후 그 키가 null 이라 심기가 Cannot set properties of null 로 멈췄고, 이름을 바꾼 뒤엔 28가지 상태가 다 떴어요

바퀴

바퀴 94 · 후보 4 「Lab 머리줄 규칙 24개가 여럿이 쓰는 PatternLab.module.css 에서 셸의 CSS 로 간다」

다음 바퀴

• 5위 「Preview, Pixel, Color Ramp, Knobs 패널만 쓰는 규칙 18개가 dock 틀 CSS 에서 그 패널의 CSS 로 간다」: 이번 바퀴로 LabPanels.module.css 에 머리줄 171줄이 앞에 들어가서, 표의 줄 번호가 171줄 뒤로 밀렸어요.
• 6위 「Make 가이드와 Pattern Guide 의 Lab 사진이 걷어 낸 Gallery 탭 대신 지금 Lab 을 보인다」: 4위와 5위는 화면을 바꾸지 않아서 사진은 어느 차례에 찍어도 같아요.
• 7위 「Pattern Lab 의 ! 단언 가운데 타입으로 좁힐 수 있는 일곱이 빠진다」: isValidMatrix 를 부르는 곳은 아직 두 파일뿐이에요.

https://claude.ai/code/session_01UuHW3UoaQf9BPw9Q5XRGrN

---

Generated by Claude Code