refactor(tools): #176 B 案 PR 5a — ConfigConverter + QrReader + JanCode inline style 撤去

[fumtas1k]

概要

#176 B 案バッチの PR 5a。ConfigConverter.tsx (11 件) + QrReader.tsx (11 件) + JanCode.tsx (9 件) の JSX inline style + JanCode 内 e.currentTarget.style.X = Y 形式の CSSOM 直接 mutation 2 件 (<summary> の onMouseEnter/onMouseLeave hover state) を @layer components の意味クラス + Tailwind utility に置換する。

PR 5 全体 (9 ツール) を 5a (大物 3 つ) と 5b (残り + ulid-generator E2E + #262 close) に分割した前半。

• spec: docs/superpowers/specs/2026-05-07-issue-176-b5a-config-qr-jan-design.md
• plan: docs/superpowers/plans/2026-05-07-issue-176-b5a-config-qr-jan.md
• バッチ進捗: docs/projects/issue-176-b-plan-progress.md

主要な変更

src/styles/global.css 追加 class (1 件のみ)

• .qr-video-preview (QrReader <video> 専用、background: #000)

JanCode <summary> hover は PR 4 で導入された .hover-bg-subtle を再利用 (新規不要)。
PR 1〜4 で導入済の class (caption / body-emphasis / text-default / text-muted / text-on-primary / text-error / text-error-text / text-primary / text-link-color / text-warning / bg-default / bg-subtle / bg-surface / bg-error-tint / bg-warning-tint / border-default / border-input / alert-success / alert-error / btn-link-plain / summary-no-marker / hover-bg-subtle) で 95% 以上をカバー。

ConfigConverter.tsx (11 件 → 0)

• 変換元/変換先ラベルを caption text-muted min-w-10 で表現
• 警告メッセージカードを border border-warning bg-warning-tint (Tailwind auto-utility 利用)
• schema toggle ボタンを既存 .btn-link-plain (PR 1.5) + text-link-color で構成、arrow rotation は rotate-90 Tailwind 標準
• 検証結果カードは既存 .alert-success / .alert-error (PR 2) を利用
• 新規 class 追加なし
• import { caption, colors } from '@/utils/styles' を削除

QrReader.tsx (11 件 → 0、module-level 定数 4 個解体)

• module-level スタイル定数 4 個 (rescanButtonStyle / startCameraButtonStyle / stopCameraButtonStyle / uploadLabelStyle) を全削除し className 化
• <video> 要素を w-full max-w-[400px] rounded-lg qr-video-preview で構成、display 切替は Tailwind hidden
• カメラ起動ボタンは Tailwind auto-utility bg-primary + .text-on-primary、停止ボタンは border-error bg-error-tint text-error
• file input を Tailwind 標準 sr-only に置換 (a11y 同等以上)
• uploadLabelStyle(false) 呼び出しがないことを事前確認の上、disabled 分岐削除 (YAGNI)
• URL 警告カードは border border-warning bg-warning-tint、URL 開くリンクは border border-warning bg-default
• import { caption, colors } from '@/utils/styles' を削除 (React named import は維持)

JanCode.tsx (9 件 + 2 hover refactor → 0)

• onMouseEnter/onMouseLeave で e.currentTarget.style.background = ... していた 2 件 (計算過程 <summary>) を削除し、PR 4 既存の .hover-bg-subtle (CSS :hover 表現) で代替
• 完成コード文字間隔は tracking-[0.1em] arbitrary value
• 結果カード / バーコードプレビュー wrapper を border border-default bg-surface / border border-default bg-default で構成
• 計算過程 <details>/<summary> marker 非表示は PR 4 既存 .summary-no-marker を再利用
• 新規 class 追加なし
• import { bodyEmphasis, caption, colors } from '@/utils/styles' を削除

Race 回避運用 (PR 4 で確立した運用継承)

PR 3 で sonnet 並列 dispatch 時に commit 結合 race が発生 → PR 4 で「subagent 非 commit」運用を初採用 → 成功。本 PR では 2 回目運用として継承:

• subagent は ファイル編集 + self-verification (vitest, astro check) のみ 実施
• subagent は git add / git commit を実行しない
• 親 Opus が Phase 1.5 で 1 ファイルずつ stage + commit (3 commit、各 1 ファイル変更)

結果: commit message と内容が完全一致、prettier 巻き込みも親が制御。

CSSOM hover refactor (memory feedback_tailwind_v4_layer_variant.md 適用)

JanCode の <summary> hover を Tailwind hover:bg-subtle variant ではなく PR 4 で導入された専用 .hover-bg-subtle class で表現。これは Tailwind v4 で @layer components 内の手書き class に対して hover: variant が CSS rule を生成しない silent regression を回避するため。

検証ログ (親 Opus 直接実行)

• npm run test 全 pass (migration test 24 件 × 2 + 陽性対照 3 件 = 51 件 pass 含む、合計 626 passed | 1 skipped)
• npx astro check → 0 errors, 0 warnings, 10 hints (本 PR 無関係)
• npm run test:e2e 全 pass (config-converter / qr-reader / jan-code 含む)
• a11y 退化なし (aria-* / role= / data-testid= / htmlFor= 削除行 = reformat 行移動のみ、現コードで存在確認済)
• inline style 残存ゼロ (grep -c "style={{" = 0 / 0 / 0)
• CSSOM mutation 残存ゼロ (grep -E "\.style\.[a-zA-Z]+\s*=" で setProperty 以外 = 0)
• PR 6 スコープ未侵害 (_headers / astro.config.mjs / src/utils/styles.ts 未変更)

VRT

visual-regression.yml で baseline 比較 (non-required check)。意図的差分があれば PR ブランチで update-visual-baseline.yml を workflow_dispatch trigger。

特に確認すべき差分点:

• QrReader <video> の display: none → hidden クラス、初期状態で video が描画されないこと
• QrReader file input: position: absolute 視覚消去 → sr-only (clip + margin -1) で同等の不可視性
• JanCode <summary> hover 時の bg 変化 (CSSOM mutation 撤去後も .hover-bg-subtle で bg 変化が見える)
• ConfigConverter schema toggle arrow: rotate-90 で 90 度回転 (transition-duration 200ms)

コミット粒度

<SHA> test(migration): MIGRATED_FILES に PR 5a 対象 3 件追加
<SHA> refactor(tools): #176 B 案 PR 5a — JanCode.tsx inline style 撤去 + summary hover を CSS に移行
<SHA> refactor(tools): #176 B 案 PR 5a — QrReader.tsx inline style 撤去 + module-level スタイル定数解体
<SHA> refactor(tools): #176 B 案 PR 5a — ConfigConverter.tsx inline style 撤去
<SHA> chore(spec): #176 B 案 PR 5a spec / plan / global.css foundation

関連

• 起源 issue: security: CSP の script-src/style-src から 'unsafe-inline' を削減する #176 (アプローチ B)
• 前提 PR: security: CSP の script-src を meta strict layer に集約 (Astro security.csp 採用) (#176) #249 (A-1) / ci(vrt): Visual Regression Test 基盤を独立 PR で導入（旧 #253 学習を踏まえた proper sequencing） #254 (VRT) / refactor(ui): #176 B 案 PR 1 — ui/* simple 11 ファイル inline style 撤去 + 基礎工事 #256 (PR 1) / refactor(ui): #176 B 案 PR 1.5 — ResultTable + InputField inline style 撤去 + cellStyle API 再設計 #261 (PR 1.5) / refactor(ui): #176 B 案 PR 2 — qr-ticket inline style 撤去 + #225 useMemo/abort 対応 #272 (PR 2) / refactor(ui,tools): #176 B 案 PR 3 — JwtDecoder + UuidV7Generator inline style 撤去 + #262 partial #275 (PR 3) / refactor(tools): #176 B 案 PR 4 — Gs1Databar + EncodingConverter + DummyText inline style 撤去 #277 (PR 4) / test(e2e): #276 withProductionCsp ラッパで applyProductionCsp boilerplate を集約 #278 (前段 infra)
• 後続: PR 5b (Base64Codec + JsonCsv + JsonXml + QrCode + UlidGenerator + zero-style 登録 + ulid-generator E2E + test(e2e): generator ページの applyProductionCsp E2E gate を追加（PR 6 前段必須） #262 close) / PR 6 (flip + cleanup)

[github-actions]

🖼️ Visual Regression Test 結果

• Status: ✅ 全 36 件 pass
• Workflow run: 25494224609
• Artifact (diff 画像 / playwright-report): 上記 workflow run の Artifacts セクションから download

diff が 意図的な visual 変更の場合: Update Visual Regression Baseline workflow を本 PR ブランチで workflow_dispatch trigger して baseline を更新。
diff が 意図しない regression の場合: 該当変更を fix。
本 check は required ではないため fail のままでも merge は可能（reviewer 判断）。

[fumtas1k]

レビュー: #176 B 案 PR 5a

3 ファイル (ConfigConverter / QrReader / JanCode) の inline style + CSSOM hover mutation 撤去を、既存 class group (PR 1〜4 で導入) と Tailwind v4 auto-utility で完結させた surgical migration。新規 CSS class は .qr-video-preview 1 件のみで、scope 越境 (_headers / astro.config.mjs / src/utils/styles.ts) なしを確認。総合的に高品質で approve 相当。以下、観点別の所見。

---

✅ 正しさ・regression risk

• 参照先 class の存在チェック: 本 PR で使用する caption / body-emphasis / text-default / text-muted / text-on-primary / text-error / text-error-text / text-primary / text-link-color / text-warning / bg-default / bg-subtle / bg-surface / bg-error-tint / bg-warning-tint / border-default / border-input / alert-success / alert-error / btn-link-plain / summary-no-marker / hover-bg-subtle を src/styles/global.css の grep で全件存在確認 (line 151〜537)。Tailwind auto-utility (bg-primary / border-warning / border-error / text-warning) も @theme の --color-* token (line 22〜93) から正しく生成可能。
• <video> の display 切替 (QrReader L131-138): 旧 display: block ↔ none → 新 '' ↔ hidden。Tailwind v4 Preflight が video, canvas, ... { display: block } を baseline として設定するため、active 時の class なしでも display: block が維持され、inline 化による baseline strut の regression は発生しない。OK。
• sr-only への置換 (QrReader L156-161): 旧 position:absolute; w/h:1; opacity:0; pointer-events:none → 新 sr-only (clip + margin -1)。pointer-events:none 喪失は、width:1px; height:1px clip 下では実用上クリック不能、かつキーボード focus は依然可能で a11y 改善側。問題なし。
• .summary-no-marker の Safari 対応: 旧 inline listStyle:'none' のみ → 新 class が list-style:none + ::-webkit-details-marker { display:none } を併設 (global.css:508-513)。Safari の disclosure triangle 抑止が改善されており 微改善。
• CSSOM hover → CSS :hover 移行: JanCode <summary> の onMouseEnter/Leave で e.currentTarget.style.background = ... していた 2 件が .hover-bg-subtle (:hover 擬似クラス) に置換。React の re-render を介さない CSS native hover に変わり、SSR / hydration mismatch リスクも消滅。Tailwind v4 @layer components の hover: variant 非対応 silent regression (memory feedback_tailwind_v4_layer_variant.md) を、専用 :hover 同梱 class で正しく回避している。
• transition-colors 削除の影響: JanCode <summary> で transition-colors (Tailwind utility) を削除したが、.hover-bg-subtle 自体が transition: background-color 0.15s を内包 (global.css:533) しているため、視覚的に等価。OK。
• border + alert-success/alert-error の組み合わせ (ConfigConverter L207-214): .alert-success / .alert-error は border-color のみ定義 (border-width/style 無し)。よって border Tailwind utility (1px solid) との併記が必要、という意図は正しく機能する。

⚠️ 軽微な気付き (NIT — blocking ではない)

• min-w-10 (ConfigConverter L137,146): ラベルの最小幅 2.5rem を Tailwind utility で表現。原 inline minWidth:'2.5rem' と数値は一致するが、「変換元」「変換先」(2 文字) の visual alignment 用なら、より意味の伝わる inline-block min-w-[2.5rem] か新規 .label-prefix 専用 class でも良い。現状で OK、PR 6 cleanup 時に類似パターンが他ツールでも出るなら集約検討余地。
• px arbitrary value tracking-[0.1em] (JanCode L101): 単発利用なので arbitrary で妥当。@theme 拡張するほどではない。
• QrReader カメラ起動/停止ボタンの utility 列挙: それぞれ 8〜9 class の長い className が並ぶ。同じ「primary action button / danger action button」パターンが他ツールでも出るなら、後続 PR で .btn-action--primary / .btn-action--danger の variant 拡張 (現 --danger は bg:transparent なので、本 PR の bg-error-tint 派は新 variant 必要) を検討してもよい。本 PR でやる必要はない。
• qr-video-preview の literal #000: token 化せず PR 4 .jwt-json-value パターンを継承する旨が global.css コメントに明記されており妥当。背景色が「カメラ起動失敗時のフォールバック」として黒固定で意味を持つので token 化しない判断は正しい。

🔒 セキュリティ

• 本 PR は presentation 層のみ (className 置換 + CSS class 追加) で、innerHTML / dangerouslySetInnerHTML / DOMParser / URL parsing / file validation のロジック面は一切変更されていない。新規 attack surface なし。
• QrReader URL 警告ブロックの <a target="_blank"> は rel="noopener noreferrer" を維持 (L194)。tabnabbing 防止 OK。
• File input の accept="image/*" と validateFile() 経由のバリデーションも維持。
• スコープ外 (_headers / CSP) 不変更を PR description に明示済み。OK。

♿ アクセシビリティ

• aria-expanded / aria-controls / aria-hidden / aria-label / aria-live / role="status" / role="alert" / htmlFor / data-testid を全て保持していることを diff レベルで確認。
• file input の sr-only 化により、screen reader からは依然 input として認識可能 (旧 pointer-events:none より a11y 的には改善)。
• JanCode <summary> の cursor-pointer 維持。
• 警告系 (bg-warning-tint + text-warning) のコントラスト比は global.css コメント (line 58: amber-800: amber-600 は白背景で WCAG AA 不合格) で WCAG AA 担保済を継承。

⚡ パフォーマンス

• QrReader: module-level React.CSSProperties 定数 4 個 (約 60 行) を全削除。bundle 微減。
• JanCode: onMouseEnter/onMouseLeave 2 件削除で React re-render 削減 + JS handler binding 削減。
• 全体として静的 className のみになり、runtime CSS object spread コスト消滅。

🧪 テスト

• inline-style-migration.test.ts への 3 件追加で style={{ / \.style\.X = の regex assertion が新ファイルにも適用される。陽性対照 3 件 (詐欺パターン検出 + setProperty 許容) が同ファイル内に既存で、tracker 自体の信頼性も担保済。
• E2E (config-converter / qr-reader / jan-code) と unit + astro check の親 Opus 直接実行ログを description に明記。memory feedback_subagent_verification_trust.md の懸念解消 OK。
• VRT は non-required check で baseline 比較。description に確認すべき差分点 4 項目を列挙済で reviewer 視点で扱いやすい。

📐 PR 運用 / commit 粒度

• 5 commit (test 追記 + 3 ファイル個別 + foundation) で各 commit 1 ファイル化、subagent 非 commit 運用 (PR 4 で確立) を継承。race 回避効果が確認されている方針の踏襲で妥当。
• spec/plan 約 1900 行を同 PR に同梱しているが、project の superpowers methodology (docs/superpowers/specs/..., docs/superpowers/plans/...) として一貫しており、コード実体 50 行のレビューは独立して可能 (docs は参照リファレンス)。memory feedback_pr_size.md の "10 commit / 500 行で分割検討" は コード実体の閾値で、本 PR のコード実体は遥かに下回る。OK。
• --base develop 明示、a11y 削除なし、E2E pre-PR 実行と shared-agent-rules / playbook の commander checklist を全項目満たしている。

---

結論

Approve 推奨。surgical で意図が明確、過去 PR の運用知見 (subagent 非 commit / hover 専用 class / aria 保護 / spec-plan 同梱) を全て踏襲。指摘事項は全て NIT で blocking なし。後続 PR 5b / PR 6 (flip + cleanup) の foundation としても問題なし。