[patternflow-bot]

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

Layers 패널만 쓰던 규칙 24개를 dock 틀 CSS(LabPanels.module.css)에서 새 panels/LayersPanel.module.css 로 옮겼어요. 화면은 그대로이고, 머지하면 dock 틀 CSS 가 652줄에서 465줄로 줄어 다른 패널 규칙을 옮기는 4위와 5위가 덜 겹쳐요.

좋아지는 것: 없음

체크리스트

• incoming/ROUND.md 읽기
• 앞 바퀴 PR 글(세 직함만) 읽기 — [DONE] Pattern Lab 코드에서 아무도 읽지 않는 이름 둘이 빠지고, 다른 파일이 읽지 않는 export 62개가 파일 안으로 들어간다 #237, [DONE] Pattern Lab 에 두세 번 적힌 도우미 다섯이 한 곳에서 온다 #238, [DONE] 다음 열 바퀴가 Pattern Lab 부터 아무도 안 읽는 코드와 CSS, 낡은 사진을 걷는다 #235 에 대화 댓글, 리뷰, 줄 댓글이 하나도 없어요
• 고를 일 정하기 — 1위는 바퀴 91([DONE] Pattern Lab 코드에서 아무도 읽지 않는 이름 둘이 빠지고, 다른 파일이 읽지 않는 export 62개가 파일 안으로 들어간다 #237), 2위는 바퀴 92([DONE] Pattern Lab 에 두세 번 적힌 도우미 다섯이 한 곳에서 온다 #238)가 했고, 남은 줄 13개 가운데 맨 위가 3위
• LabPanels.module.css 에서 Layers 만 읽는 클래스 다시 세기 — 15개, 규칙 24개, 다 LayersPanel.tsx 만 읽어요
• 새 panels/LayersPanel.module.css 로 옮기고 @media (hover: none) 을 Layers 와 Pixel 둘로 나누기
• 포커스 규칙에 묶인 .layerControlRow select:focus-visible 도 옮기기
• 머리 주석에서 걷은 Gallery 말 빼기
• labCss.test.ts 를 새 파일로 맞추고, 두 파일 사이 순서를 지키는 시험 하나
• 390(터치)과 1440 의 29가지 상태에서 getComputedStyle 비교
• 다섯 검사, check:voice
• dev merge 뒤 [DONE] — dev 가 fe9a161 그대로라 merge 할 것이 없었고, 8c1426f 에서 Drift checks · Web CI 초록

한 일

• web/src/app/pattern-lab/LabPanels.module.css 의 「Layers panel」 절(:314:472, 규칙 19개)과 @media (hover: none) 안의 Layers 규칙 5개(:478:501)를 새 panels/LayersPanel.module.css 로 옮겼어요. 값과 순서는 그대로예요. 같은 블록에 있던 .pixelMouseHint 는 제 @media (hover: none) 하나를 갖고 LabPanels.module.css 에 남아요(5위 몫이에요).
• :642~:644 의 포커스 규칙은 셀렉터 셋을 묶어서 .layerControlRow select:focus-visible 를 안고 있었어요. 그 클래스가 다른 파일의 해시 이름이 되면 Blend 칸에 닿지 않으니, 그 하나를 떼어 새 파일 끝에 같은 값으로 두었어요.
• LayersPanel.tsx 는 dock.layer* 열아홉 곳을 local.layer* 로 읽어요. dock.panel, dock.panelBar, dock.panelBody 는 그대로예요.
• .layerBar button(터치에서 44px)은 LabPanels.module.css 의 .panelBar button(28px)과 특이도가 같아서, 뒤에 오는 쪽이 이겨요. 지금까진 한 파일 안의 순서였고 이제는 번들 안의 순서예요. LayersPanel.tsx 가 LabPanels.module.css 를 먼저 불러오게 두고, 두 파일 주석에 까닭을 적었어요.
• labCss.test.ts 의 「Layers and Knobs on a touch screen」 은 Layers 규칙을 새 파일에서 읽어요. 「come after the rules they override」 엔 LayersPanel.tsx 의 두 import 순서를 더했어요.
• 머리 주석(:1~:3)은 「knob/ramp/gallery/modal styles are shared from PatternLab.module.css」 라고 했어요. Gallery 는 10월 23일에 걷었고 knob 과 ramp 규칙도 9월에 제 파일로 갔으니, 이 파일이 지금 담는 것과 아직 남은 패널 규칙을 적었어요.

증거

옮긴 클래스(git grep 으로 dock.layer* 를 읽는 파일을 셌어요):

dev fe9a161: LabPanels.module.css 의 layer* 15개 → 읽는 파일 LayersPanel.tsx 하나
이 브랜치:   LabPanels.module.css 의 layer* 0개 · LayersPanel.module.css 규칙 25개(24개와 포커스 하나)
LabPanels.module.css 652줄 → 465줄 · LayersPanel.module.css 198줄

화면이 그대로인지: 바퀴 89(#223)처럼 NEXT_PUBLIC_BUILD_ENABLED=1 로 dev 와 이 브랜치를 빌드해 next start 로 열고, Chromium 으로 /pattern-lab 을 390×844(터치, hover: none)와 1440×900 에서 29가지 상태로 다뤘어요. 요소마다 getComputedStyle 의 모든 속성과 ::before, ::after 를 정렬해 모아 DOM 경로로 맞춰 봤어요. 레이어 넷을 미리 넣은 프로젝트(오류가 나는 Code, screen 50% Pixel, 숨긴 Pixel, 뒤집은 마스크 Text)로 시작해서 Layers 클래스 15개가 다 화면에 나와요. 상태는 마스크 레이어 선택, Pixel 레이어 선택(Opacity, Blend 줄), 줄 hover(1440), 키보드로 Blend 칸에 포커스(:focus-visible 확인), 끌어 놓기 표시(data-dragover), 이름 고치기 칸, 패널 탭 여덟을 하나씩 앞으로, Panels 메뉴예요.

dev-5 vs dev-6            29 states, 8900 elements, 3 differ (3 in the dockview tab strip, 0 elsewhere)
dev-5 vs branch-1         29 states, 8900 elements, 23 differ (23 in the dockview tab strip, 0 elsewhere)
dev-2 vs branch-2         29 states, 8900 elements, 2 differ (2 in the dockview tab strip, 0 elsewhere)
layer* 클래스가 붙은 요소  563개, 0 differ (dev-5 vs branch-1)

다른 곳은 dockview 탭 줄뿐이에요. 390 에서 Graphic Export, Director 를 앞으로 꺼내면 탭 줄 끝의 넘침 수가 실행마다 3 이나 4 로 달라지고, 그 글자 폭(38.125px 와 38.766px)이 탭 줄 폭을 바꿔요. dev 여섯 번과 이 브랜치 세 번에서 두 값이 양쪽에 다 나왔어요:

dev-1    graphic-export=38.125   director=38.125   panels-menu=38.125
dev-2    graphic-export=38.7656  director=38.7656  panels-menu=38.7656
dev-5    graphic-export=38.7656  director=38.125   panels-menu=38.125
branch-1 graphic-export=38.125   director=38.7656  panels-menu=38.7656
branch-2 graphic-export=38.7656  director=38.7656  panels-menu=38.7656

터치 규칙이 파일을 건너서도 이기는지:

dev-5    390/layers-pixel-active   bar button min-height 44px min-width 44px | blend select min-height 44px
dev-5    1440/layers-pixel-active  bar button min-height 28px min-width auto | blend select min-height 28px
branch-1 390/layers-pixel-active   bar button min-height 44px min-width 44px | blend select min-height 44px
branch-1 1440/layers-pixel-active  bar button min-height 28px min-width auto | blend select min-height 28px

빌드된 CSS(.next/static/chunks/*.css)에서 두 규칙은 같은 덩이에 있고, .layerBar button 이 뒤예요:

dev    1eacakamfcfkh.css 113,311 B · gzip 19,064   .panelBar button @4333  .layerBar button @8498
branch 2w2rcrc4nzy7w.css 113,378 B · gzip 19,064   .panelBar button @4333  .layerBar button @10390
사이트 CSS 전체 466,540 B → 466,607 B (+67, 포커스 규칙과 @media 머리가 한 번씩 더)

시험이 순서를 잡는지: LayersPanel.tsx 에서 두 import 를 뒤바꾸고 돌리면 빨개져요.

 FAIL  src/app/pattern-lab/labCss.test.ts > Layers and Knobs on a touch screen > come after the rules they override
AssertionError: expected 491 to be greater than 537
      Tests  1 failed | 13 passed (14)

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

npm ci                              added 762 packages, and audited 763 packages in 25s
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 1264 passed · links-absolute, roadmap skipped)
npm run check:voice                 check:voice: nothing found (브랜치 37줄 · PR 본문 120줄)

8c1426f 의 GitHub 검사:

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

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

실행법

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

가정

• 표는 규칙 24개라고 했어요. 그 24개에 더해, 셀렉터 셋을 묶은 포커스 규칙에서 .layerControlRow select:focus-visible 하나를 떼어 옮겼어요. 남겨 두면 Layers 의 Blend 칸이 키보드 포커스 테두리를 잃어요.
• .layerBar button 은 특이도를 올리지 않고 import 순서로 이기게 두었어요. 클래스를 두 번 쓰는 셀렉터 같은 꼼수보다 읽기 쉽고, 순서는 시험이 지켜요. Knobs, Ramp, Text 패널은 제 CSS 를 dock 보다 먼저 불러오는데, 그 파일들엔 dock 과 다투는 규칙이 없어요.
• 머리 주석의 「the Preview, Pixel, Ramp and Knobs rules below are still here」 는 5위가 그 규칙을 옮기면 같이 빼야 해요.

Changelog

Web

• The Layers panel has its own stylesheet. The 24 rules only LayersPanel.tsx read moved from the dock's LabPanels.module.css to panels/LayersPanel.module.css, and computed styles in 29 Lab states at 390px and 1440px match dev.

경험

언제: 바퀴에서 Pattern Lab 을 390px 로 열어 dev 와 브랜치의 getComputedStyle 을 비교할 때
교훈: Graphic Export 나 Director 처럼 늦게 불러오는 탭을 앞으로 꺼낸 상태는 dockview 탭 줄의 넘침 수가 실행마다 달라 dev 끼리도 2~24 요소가 다르니, .dv-tabs-and-actions-container 안은 따로 세고 그 밖이 0 인지로 판정해요
근거: #239 에서 dev 를 여섯 번 찍으니 넘침 칸 폭이 38.125px 와 38.766px 로 갈렸고, 다른 곳은 브랜치와 비교해도 0 이었어요

바퀴

바퀴 93 · 후보 3 「Layers 패널의 규칙 24개가 dock 틀 CSS 에서 Layers 패널의 CSS 로 간다」

다음 바퀴

• 4위 「Lab 머리줄 규칙 24개가 여럿이 쓰는 PatternLab.module.css 에서 셸의 CSS 로 간다」: 이번 바퀴의 비교를 그대로 쓰되, 390 의 탭 줄 차이는 따로 세요.
• 5위 「Preview, Pixel, Color Ramp, Knobs 패널만 쓰는 규칙 18개가 dock 틀 CSS 에서 그 패널의 CSS 로 간다」: 이번 바퀴로 LabPanels.module.css 줄 번호가 187줄 앞당겨졌고, .pixelMouseHint 는 이미 제 @media (hover: none) 블록에 혼자 있어요.
• 6위 「Make 가이드와 Pattern Guide 의 Lab 사진이 걷어 낸 Gallery 탭 대신 지금 Lab 을 보인다」: 4위와 5위는 화면을 바꾸지 않아서 사진은 어느 차례에 찍어도 같아요.

---

Generated by Claude Code