[patternflow-bot]

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

Make 가이드의 Lab 창 사진과 Pattern Guide 의 Lab 사진 두 장을 지금 Lab 으로 다시 찍었어요. 셋 다 10월 23일에 걷은 Gallery 탭을 보이고 Text 탭과 「+ Text」 가 없었는데, 머지하면 가이드를 읽는 사람이 화면에서 보는 Lab 과 같은 사진을 봐요.

좋아지는 것: 가이드 속 Lab 사진이 지금 Lab 과 같다 — 사진에 없는 탭을 찾지 않는다

체크리스트

• incoming/ROUND.md 읽기
• 앞 바퀴 PR 댓글(세 직함) 읽기. [DONE] 커뮤니티에서 내려받은 .h 에 작성자가 고른 라이선스 줄 하나만 남는다 #222~[DONE] 가이드 연습 벽 카드의 노브가 커뮤니티 카드와 같은 셈으로 돌고, Lab 주석이 포크 번호 대신 말로 적는다 #246 에 대화 댓글, 리뷰, 줄 댓글이 0개예요
• 후보 고르기. 1~5위와 지시 6 · 7 은 끝났고, 남은 맨 위가 6위예요
• 세 사진을 쓰는 곳과 옛 사진 크기 재기
• 빌드한 /pattern-lab 을 같은 크기로 다시 찍기
• /guide/make 를 390 · 1440 으로 찍어 카드 틀 비교
• 다섯 검사와 check:human-lock
• dev merge 뒤 [DONE]. origin/dev 는 aa1726b 그대로라 merge 할 것이 없었어요

한 일

세 파일만 바꿨어요. 코드와 글은 그대로예요.

web/public/guide/lab-window/lab.webp 는 Make 가이드 02 「Open the Lab.」 카드(components/guide/LabWindow.tsx:17)와 넓은 화면의 책상(components/guide/desk/DeskStage.tsx:35, 진짜 Lab 이 그려지기 전까지 아래에 깔리는 그림)이 읽어요. 두 곳 다 1024×680 으로 적어 둬서(LabWindow.tsx:19:20, DeskStage.tsx:41:42) 옛 그림과 같은 1024×680 CSS px, 2× 로 찍었어요. 파일은 2048×1360 그대로이고 WebP 품질 85 로 118,304 바이트예요(옛 것 121,752).

docs/images/pattern-guide/11-pattern-lab.png 와 13-color-ramp.png 는 PATTERN_GUIDE.md:215, :264 가 읽어요. 옛 그림(1919×1079, 1×)과 같은 장면을 1920×1080, 1× 로 다시 찍었어요. 11 은 처음 연 Lab(Code 1/6, 128 × 64)이고, 13 은 옛 그림처럼 두 번째 예제(2/6, 260710)를 64 × 128 에 두고 Color Ramp 를 hsv short 로, 멈춤을 검정 0.00 · 청록 0.19 · 빨강 1.00 으로 놓았어요. 4-3 절이 말하는 「click the ramp bar to add stops」 와 「hsv modes travel around the color wheel」 이 그림에 그대로 보여요.

찍은 Lab 은 빈 저장소에서 처음 연 상태예요. 사이트가 쓰는 Share 와 To hardware 단추는 빌드 때 NEXT_PUBLIC_COMMUNITY_URL 과 NEXT_PUBLIC_BUILD_ENABLED=1 이 있어야 머리줄에 나와서(lib/community/apiBase.ts:36, :61), 사진을 찍을 빌드만 .env.example 의 주소와 그 깃발로 따로 했어요. 코드와 환경 파일은 고치지 않았어요. 아래 다섯 검사는 깃발 없이 다시 빌드해서 돌렸어요.

증거

세 사진 앞뒤

Make 가이드 Lab 창 그림(lab.webp)

Pattern Guide 11 앞(Gallery 탭, 「+ Text」 없음). 뒤는 맨 위 둘째 그림이에요.

Pattern Guide 13 앞. 뒤는 맨 위 셋째 그림이에요.

/guide/make 390 · 1440

같은 빌드에서 그림만 바꿔 「Open the Lab.」 칸으로 내려 찍었어요. 그림이 놓이는 칸은 앞뒤 모두 390 에서 38,489 314×196, 1440 책상에서 21,107 973×646 이고, naturalWidth × naturalHeight 는 둘 다 2048×1360 이에요. 390 전체 화면을 앞뒤로 픽셀 비교하니 다른 곳은 그림 칸(2× 로 76,978~704,1372) 안뿐이었어요.

폰 카드 앞

1440 책상에선 진짜 Lab 이 그려지면 그림을 덮어요. 그 전에 보이는 그림을 보려고 iframe 만 감추고 찍었어요(앞, 뒤). 옛 그림은 Lab 이 그려지는 순간 Gallery 가 Text 로 바뀌었어요.

검사

web/ 에서, 깃발 없이 다시 빌드한 뒤예요.

$ npm ci
added 762 packages, and audited 763 packages in 35s
$ npm run lint -- --max-warnings=0
> eslint --max-warnings=0            (exit 0, 출력 없음)
$ npm run typecheck
> tsc --noEmit && tsc --noEmit -p ../tools/virtual-panel   (exit 0)
$ npm run build
✓ Generating static pages using 3 workers (145/145) in 11.9s   (exit 0)
$ npm run check:ci
 Test Files  103 passed (103)
      Tests  1286 passed (1286)
passed   audio-vectors … passed   virtual-panel   (drift 14개 통과, links-absolute 와 roadmap 은 책상이라 skipped)
(exit 0)
$ npm run check:human-lock
this diff touches 0 locked files
check:human-lock: no locked words changed

PR 의 Actions(head 9cafd32): Docs point at files that exist, Drift checks, Web CI 셋 다 success.

실행법

# web/ 에서: 사이트와 같은 머리줄로 빌드해 띄운다
NEXT_PUBLIC_COMMUNITY_URL=https://community.patternflow.work NEXT_PUBLIC_BUILD_ENABLED=1 npm run build
npx next start -p 3100
# 스크래치에서: playwright-core 1.56.1, 컨테이너의 Chromium
npm i playwright-core@1.56.1

찍는 스크립트는 빈 컨텍스트로 /pattern-lab 을 열고, 컨테이너가 막는 jsdelivr 의 Monaco 요청(cdn.jsdelivr.net/npm/monaco-editor@0.55.1/min/vs/**)을 web/node_modules/monaco-editor/min/vs 의 같은 0.55.1 파일로 돌려줘요. .monaco-editor .view-lines 가 뜨고 3초 뒤에 찍어요. 13 은 「Next lab preset」, 해상도 선택, 「Ramp interpolation mode」 를 고르고, 끝 멈춤을 누른 뒤 「Selected stop color」 를 #ff0000 으로, 띠의 0.19 를 눌러 생긴 멈춤을 #00ffff 로 채워요. 마우스를 편집기 위에 두면 Monaco 타입 풍선이 그림에 들어가서 Color Ramp 빈 칸으로 옮긴 뒤 찍어요.

가정

• 13 의 장면(예제 2/6, 64 × 128, hsv short, 멈춤 셋)은 옛 그림을 따랐어요. Speed 노브가 옛 그림의 3.000 이 아니라 기본값 2.000 인 것만 달라요.
• 11 과 13 을 1919×1079 대신 1920×1080 으로 찍었어요. Pattern Guide 는 그림에 크기를 적지 않아서 보이는 틀은 그대로예요.
• 표 밖: PATTERN_GUIDE.md:235, :240, :255, :261, :275 가 단추를 COPY PROMPT, PASTE, CODE GUIDE, COLOR RAMP panel, ALPHA 처럼 대문자로 적는데, 지금 Lab 은 「Copy prompt」, 「Paste」, 「Code guide」, 「Color Ramp」, 「Alpha」 예요(app/pattern-lab/panels/CodePanel.tsx:202, :206). 새 그림과 글이 어긋나요.
• 표 밖: 1024px 폭에서 Code 패널 도구줄이 두 줄이 되어 「Code guide」 가 아랫줄로 내려가요(새 lab.webp). Copy prompt 옆 v-field 선택이 들어온 뒤예요.
• 표 밖: 1440 책상의 진짜 Lab 은 같은 1024×680 인데도 혼자 연 Lab 과 패널 나눔이 달라요(Preview 가 더 길고 Knobs 칸이 좁아요). 그래서 새 그림도 그려진 Lab 과 픽셀 11.8% 가 달라요(옛 그림 18.3%).

Changelog

Web

• The Make guide's Lab window shows the Lab as it opens now. Its picture, on the phone card and under the desk's live Lab, still had the Gallery tab removed on 23 October. Retaken at the same 1024 × 680, it has the Text tab and + Text.

Docs

• The Pattern Guide's two Lab screenshots show the current Lab. 11-pattern-lab.png and 13-color-ramp.png still had the Gallery tab. They are retaken at 1920 × 1080 with the same scenes, the hsv short ramp included.

바퀴

바퀴 98 · 후보 6 「Make 가이드와 Pattern Guide 의 Lab 사진이 걷어 낸 Gallery 탭 대신 지금 Lab 을 보인다」

경험

언제: 바퀴 컨테이너에서 Pattern Lab 을 사이트와 같은 모습으로 찍어 저장소 그림으로 남길 때
교훈: Share 와 To hardware 는 빌드 때 NEXT_PUBLIC_COMMUNITY_URL 과 NEXT_PUBLIC_BUILD_ENABLED=1 이 있어야 나오니 그 깃발로 따로 빌드하고, 막힌 jsdelivr 의 Monaco 는 Playwright context.route 로 web/node_modules/monaco-editor/min/vs 를 돌려줘요
근거: #247 에서 그냥 빌드한 Lab 은 머리줄에 Recent, Panels 만 있었고, 편집기는 jsdelivr 가 막혀 「Monaco initialization: error」 를 냈어요. 두 가지를 하고서야 옛 lab.webp 와 같은 머리줄과 편집기가 찍혔어요

다음 바퀴

• 7위 「Pattern Lab 의 ! 단언 가운데 타입으로 좁힐 수 있는 일곱이 빠진다」. 남은 줄 가운데 순위가 가장 높아요.
• 8위 「모든 쪽이 받는 globals.css 에서 아무도 쓰지 않는 옛 Inside 패널 규칙 377줄이 빠진다」. 모든 쪽이 받는 CSS 가 8,387바이트 줄어요.
• 9위 「Lab 밖 CSS 모듈 다섯에서 아무 컴포넌트도 읽지 않는 클래스 23개가 빠지고, 시험이 사이트 전체의 CSS 모듈을 본다」. 바퀴 89 의 셈을 사이트 전체로 넓혀요.

https://claude.ai/code/session_0186WBWw7JHgMHbW4EcjAE3A

---

Generated by Claude Code