refactor(ui): #176 B 案 PR 1.5 — ResultTable + InputField inline style 撤去 + cellStyle API 再設計

[fumtas1k]

概要

#176 B 案 PR 1.5: src/components/ui/ResultTable.tsx / src/components/ui/InputField.tsx から JSX style={{}} を完全除去し、TableColumn<T>.cellStyle: CSSProperties を cellPadding: 'normal' | 'compact' flag + className 拡張に置換する。

PR 1 (#256) で simple 11 件を migration 済。本 PR は API 破壊変更を伴う complex 2 件を独立に処理（feedback_pr_size.md / feedback_infra_feature_separation.md 準拠）。

主要な変更

ResultTable.tsx

• 内部 8 件の style={{}} を class 化
• 動的 minWidth / 列 width を setProperty('--var', value) で CSS 変数注入（PR 1 の ToggleGroup と同手法、CSP 準拠）
• 行 zebra / selection / 区切り線を data-selected 属性 + :nth-child(odd/even) + :not(:last-child) で表現（CSS 側に集約）
• API 破壊変更: cellStyle?: CSSProperties を削除、代わりに cellPadding?: 'normal' | 'compact' を追加
• <th> は常に normal padding（コミット 681ca56 で fix — cellPadding: 'compact' でも header text が縮まないよう保護）

InputField.tsx

• 内部 4 件の style={{}} を class 化（baseInputStyle constant → inputClass 配列 + .filter(Boolean).join(' ') 合成）
• 公開 Props API は不変
• mono prop 時の font-family が generic 'monospace' → Tailwind v4 font-mono（プロジェクト設定の --font-mono に準拠）に統一。consumer (qr-ticket / tools) で既に font-mono を使っていたため、これで内部一貫性が改善

消費側

• UlidGenerator.tsx / UuidV7Generator.tsx: columns 配列の cellStyle: {...} を新 API に変換（render 関数内 inline style は本 PR では touch せず、PR 3 / PR 5 スコープ）

CSS

• global.css の @layer components に追加: .bg-surface / .result-table-*（zebra/selection/separator）/ .result-table-col / .btn-link-plain
• .bg-surface 命名は token-semantic（.bg-default / .bg-subtle / .bg-error-tint と整合、reviewer 指摘で .bg-surface-row から rename）

Migration test

• inline-style-migration.test.ts の MIGRATED_FILES に 2 件追加（計 13 件、test 数: 13 × 2 + 3 positive control = 29）

検証

ローカル (push 前):

• npm run test: 603 passed / 1 skipped ✅
• npx astro check: 0 errors / 0 warnings ✅
• npm run test:e2e: 144 passed / 1 skipped ✅
• aria/role/scope/htmlFor 退化検知: 全項目維持 ✅
• grep -c "style={{" src/components/ui/{ResultTable,InputField}.tsx: 両方 0 ✅
• grep -rn "cellStyle" src/: 0 件 ✅

CI:

• test.yml（required）— 通過想定
• visual-regression.yml（non-required）— 差分があれば PR comment + artifact link 投稿、意図的差分は update-visual-baseline.yml を workflow_dispatch trigger で baseline 更新（PR 1 と同フロー）

バッチ計画における位置付け

#	スコープ	状態
PR 0	VRT 導入	✅ #254 merged
PR 1	基礎工事 + ui/* simple 11	✅ #256 merged
PR 1.5	ui/ complex (ResultTable + InputField) — API redesign*	本 PR
PR 2	qr-ticket/*	未着手
PR 3	JwtDecoder + UuidV7Generator	未着手
PR 4	Gs1Databar + EncodingConverter + DummyText	未着手
PR 5	QrReader + ConfigConverter + JanCode + QrCode + 残り tools	未着手
PR 6	flip + cleanup（CSP strict 化、stripMetaStyleSrc() 撤去、src/utils/styles.ts 削除）	未着手

関連

• 起源 issue: security: CSP の script-src/style-src から 'unsafe-inline' を削減する #176（B 案）
• 直前の PR: refactor(ui): #176 B 案 PR 1 — ui/* simple 11 ファイル inline style 撤去 + 基礎工事 #256（PR 1）
• spec: docs/superpowers/specs/2026-05-04-issue-176-b1-5-ui-complex-design.md
• plan: docs/superpowers/plans/2026-05-04-issue-176-b1-5-ui-complex.md

レビュアー向け注意点

• ResultTable の <col> ref + setProperty('--col-width', ...) ループは API 互換維持のため width?: string を保つ意図的な複雑さ（<col style="width"> を使うと CSP の inline style 制約に再び戻るため、CSSOM API 経由で逃がしている）
• data-selected / aria-selected の責務分離: data-selected は視覚 state（zebra + selection の合成のため）、aria-selected は a11y（onRowClick 時のみ）。スペック §3 「衝突確認」参照
• font-mono 化（InputField mono prop）はプロジェクト font stack への upgrade で improvement 扱い、regression ではない
• VRT に意図差分が出た場合は update-visual-baseline.yml workflow_dispatch で対処

---

Closes #265
Closes #266

[github-actions]

🖼️ Visual Regression Test 結果

• Status: ✅ 全 36 件 pass
• Workflow run: 25298246304
• 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]

並列レビュー結果（セキュリティ / フロントエンド / 規約）

3 観点を並列でレビューしました。critical 0 / important 6 / nit 11。CI 3 種（test / e2e / visual-regression）全 pass、検証履歴記載も充実しており、merge 推奨です。重要指摘のうち a11y 系 2 件と CSP gate 1 件は本 PR スコープ外（既存問題の継承 / PR 6 連動）のため、本 PR は blocking せず別 issue 起票を提案します。

---

🛡️ セキュリティレビュー結果

CSP style-src 削減の進行という意図に沿った変更で、新規導入された setProperty('--var', value) 経由の CSS 変数注入は CSSOM 仕様上 declaration value として encapsulate され、CSS パーサ階層のブレイクアウトは不可能。data-selected / data-clickable も React string literal で制限され DOM clobbering 耐性あり。col.className / col.cellPadding も consumer hard-coded のみで汚染源なし。critical 指摘なし、merge OK。

🟡 important PR 6（CSP strict 化）前に applyProductionCsp を generator ページの E2E に追加推奨

• 箇所: tests/e2e/ 配下（ulid-generator.spec.ts / uuid-v7.spec.ts 等が未整備）
• 指摘: applyProductionCsp(page) E2E gate（memory feedback_prod_parity_csp.md で運用化）は現状 tests/e2e/config-converter.spec.ts のみで使用。本 PR で実装が変わった ResultTable を消費する UlidGenerator / UuidV7Generator ページの CSP 違反を能動検出する E2E は無い。
• 根拠: 本 PR の setProperty パターンは現状 CSP（style-src 'self' 'unsafe-inline'）下で安全だが、PR 6 で 'unsafe-inline' を削除した瞬間、CSP Level 3 §6.5.7 の inline style 解釈次第で violation 候補となる。VRT は pixel diff のみで CSP 違反を silent pass しうる。
• 改善提案: 本 PR の merge ブロッカーではない。PR 6 の前段または同時に、tests/e2e/ulid-generator.spec.ts / tests/e2e/uuid-v7.spec.ts を新設し applyProductionCsp(page) を goto 前に挿入、生成 → 行クリックまで CSP 違反が出ないことを assert するメタテストを追加することを推奨。

🟡 important width?: string / minWidth?: string の origin discipline を JSDoc 化推奨

• 箇所: src/components/ui/ResultTable.tsx（TableColumn<T>.width, props minWidth）
• 指摘: 現 consumer はすべて hard-coded リテラル（"36rem" / "3.5rem" 等）で攻撃面ゼロだが、型定義は将来ユーザー入力経由の値を許容する余地を残している。
• 根拠: 現状 setProperty は CSSOM が CSS declaration value として encapsulate するため CSS injection は不可能だが、将来 user-input bridging が無自覚に混入するとリスクが顕在化する。
• 改善提案: width?: string; // CSS length token (hard-coded only; do not bridge user input without sanitization) のような JSDoc を TableColumn<T> および props に追記。コード変更は不要。

---

🎨 フロントエンドレビュー結果

ResultTable + InputField の inline style 撤去品質は高く、CSP 制約下での CSS 変数注入は妥当。data-selected（視覚 state）と aria-selected（a11y）の責務分離も意図が明確。InputField の font-mono 化（generic monospace → Tailwind v4 --font-mono）は consumer 一貫性向上で improvement。critical 指摘なし。

🟡 important useEffect deps [columns] が毎レンダリング発火する

• 箇所: src/components/ui/ResultTable.tsx:50-56
• 指摘: consumer 側（UlidGenerator.tsx:43-82 / UuidV7Generator.tsx:124-152）で const columns: TableColumn<T>[] = [...] を render 関数中に毎回新規生成。React の依存比較は Object.is（参照同一性）なので、parent の任意 state 変更（quoteStyle 切替・rows 更新・selectedIndex 変更）の度に新参照になり、effect が 毎レンダリング発火する。
• 根拠: React 公式ドキュメント "You Might Not Need an Effect" で object/array dependencies が anti-pattern として明示。setProperty('--col-width', col.width) は冪等なので機能不具合は出ないが、selection state 変更でも CSSOM 書込みが走る。
• 改善提案: 3 案。(1) consumer 側 useMemo（保守コスト増）、(2) ResultTable 内で widths を文字列化して deps 化（useMemo(() => columns.map((c) => c.width).join(','), [columns])）、(3) ref callback 内で直接 setProperty する（effect 不要・deps 問題解消）。実装最小は (3)。

🟡 important <tr> の aria-selected は ARIA spec 上 grid / treegrid 内の row でのみ valid

• 箇所: src/components/ui/ResultTable.tsx:99 (aria-selected={onRowClick ? isSelected : undefined})
• 指摘: WAI-ARIA 1.2 §aria-selected は gridcell / option / row（grid または treegrid 内の row のみ）/ tab / columnheader / rowheader に許可。本実装は素の <table>（暗黙 role="table"）の中の <tr>（暗黙 role="row"）に付与しており、この row は grid の子ではないため不適合。axe-core / WAVE で警告候補。
• 根拠: https://www.w3.org/TR/wai-aria-1.2/#aria-selected
• 改善提案: 本 PR スコープ外なので 別 issue 起票推奨。短期的には aria-selected を撤去して data-selected のみで運用、または aria-current="true" への置換が a11y spec 的には安全。role="grid" 化はキーボードナビ全実装が必要となり大工事。

🟡 important クリック可能行のキーボード操作未対応

• 箇所: src/components/ui/ResultTable.tsx:93-101、src/styles/global.css:343-345
• 指摘: onRowClick 指定行は cursor: pointer で「クリック可能」と視覚的に示すが、<tr> に tabindex も onKeyDown も無く キーボードユーザー（Tab + Enter/Space）で行選択不可。WCAG 2.1 SC 2.1.1（Keyboard）違反候補。
• 根拠: 視覚的にクリック可能と示すなら同等のキーボード操作の提供が必要。
• 改善提案: 本 PR スコープ外（inline style 撤去が目的）。別 issue で起票を推奨。本 PR の columns 定義は onRowClick を渡していないため影響範囲は限定的。

🟢 nit paddingClass() 引数なし呼び出しの可読性

• 箇所: src/components/ui/ResultTable.tsx:84
• 指摘: <th> 用に paddingClass() を引数なしで呼び、undefined → 'px-3 py-2' フォールバックで normal padding になる。コミット 681ca56 で「<th> を常に normal padding に固定」した意図が、関数 signature を読まないと伝わりにくい。
• 改善提案: paddingClass('normal') と明示するか、<th> 専用の定数 TH_PADDING を抽出。

🟢 nit ref callback で stale 配列が残る可能性

• 箇所: src/components/ui/ResultTable.tsx:71-74
• 指摘: if (el) ガードで null 代入を弾いているため、columns が縮む（5→3 列）と colgroupRef.current[3], [4] に古い <col> 参照が残る。本 PR の consumer は静的 columns なので発火しないが、将来の動的 columns で stale 要素にも setProperty してしまう。
• 改善提案: else delete colgroupRef.current[i]; 追加、または前述 (3) で根本解決。

🟢 nit <col> width を CSS variable で渡す手法のブラウザ互換

• 箇所: src/components/ui/ResultTable.tsx:50-56 + global.css:333-335
• 指摘: border-collapse: collapse テーブルでは <th>/<td> 側の width 指定が <col> より優先されることがあり、consumer が className に min-w-* を渡すと衝突する可能性。
• 改善提案: 現状 VRT pass のため維持で OK。TableColumn<T>.className の JSDoc に「width 衝突注意」を追記する程度で十分。

✅ 良い点

• CSP 準拠の setProperty('--var', value) 設計
• data-selected（視覚）/aria-selected（a11y）の責務分離意図（spec 整合は別問題）
• bg-surface-row → bg-surface rename（token-semantic）
• MIGRATED_FILES 登録による migration tracker 前進
• TDD-style な commit chain で意図が追える

---

📋 プロジェクト規約・プロセスレビュー結果

PR 1（#256）のパターンを踏襲した良質な PR。CI 3 種全 pass、検証履歴記載も充実。規約準拠、merge ブロックする critical なし。

🟡 important commit 53280f7 の subject に literal \! 混入

• 項目: Conventional Commits 形式
• 指摘: subject が refactor(ui)\!: ResultTable から cellStyle API を削除 (#176 B 案 PR 1.5) で ! の前にバックスラッシュが literal 残留。Conventional Commits の Breaking Change marker は type(scope)!: であり、\! は規格外。zsh history expansion 防止用エスケープが literal 化した、memory feedback_heredoc_no_escape.md と同根の事故。
• 根拠: body 側に Breaking change: ... を明記しているため意図と内容は伝わる。commit-msg hook も pass 済。
• 改善提案: 既に push 済 / hook 通過 / CI pass のため、今回はこのまま merge を推奨（rebase は混乱を招く）。今後は zsh で 'refactor(ui)!: ...' のシングルクォート運用、または setopt nobanghist で再発防止。次の PR 2〜PR 6 で再発させない。

🟢 nit PR サイズは表面 14 commit / +1479 だが内訳的に許容

• spec + plan: +1335 行（1 commit）
• VRT baseline 18 枚 binary: 0 行影響（1 commit、bot 自動）
• 実コード差分: ~144 行（12 commit、TDD-style）
• 判定: 本 PR は分割不要。ただし PR 5 / PR 6 で実コード差分が太る場合は spec/plan を別 PR で先行 merge する選択肢を温存。

🟢 nit VRT baseline 自動更新 commit が含まれている

• 既存 VRT インフラの baseline 更新（update-visual-baseline.yml workflow_dispatch）であり、新規インフラ導入ではないため feedback_infra_feature_separation には抵触しない。「darwin baseline は commit せず Linux baseline のみ CI runner 上で更新」という運用に正しく従っている。

✅ チェック項目別サマリー

項目	結果
PR ベース --base develop 明示	✅
feature ブランチ命名規約	✅ feature/issue-176-b1-5-ui-complex
PR タイトル/本文 日本語	✅
commit message 日本語 + Conventional Commits	✅ 14/14
PR 本文に検証履歴（test 603 / astro check 0 / e2e 144 / aria 退化 / grep 検証）	✅
spec & plan repo commit（PR 1 同パターン）	✅
CI 状況（test / e2e / visual-regression）	✅ 全 pass
memory feedback_e2e_before_pr	✅
memory feedback_positive_control_for_gates	✅ migration test 13×2 + 陽性対照 3 = 29

---

総評

• 🔴 critical: 0 件
• 🟡 important: 6 件（うち 4 件は本 PR スコープ外 / 別 issue 起票推奨: CSP gate / aria-selected / keyboard nav / commit subject 後始末）
• 🟢 nit: 11 件

merge 推奨。本 PR スコープ内で対処すべき blocker はありません。スコープ外の a11y 系 2 件（aria-selected ARIA spec 整合 / クリック行のキーボード操作）は 別 issue 起票 を推奨します。CSP gate（generator ページの applyProductionCsp E2E）は PR 6（CSP strict 化）の前段または同時に対処を推奨。

[fumtas1k]

レビュー対応

並列レビュー結果（critical 0 / important 6 / nit 11）の対応:

Important 6 件の処理

#	指摘	処理
1	CSP gate（generator ページ applyProductionCsp E2E）	issue #262 起票 — PR 6 前段必須として memory project_b_plan_progress.md の「PR 6 必須チェックリスト」に追記済
2	width / minWidth JSDoc	issue #266 起票（軽量、いつでも対応可）
3	useEffect [columns] 毎レンダリング発火	issue #265 起票（perf 影響軽微、ref callback で根本解決可能）
4	aria-selected が ARIA spec 違反	issue #263 起票
5	クリック行のキーボード操作（WCAG 2.1.1）	issue #264 起票（#263 と統合修正候補）
6	commit 53280f7 subject の literal \!	reviewer 推奨どおり post-merge 不要（rebase 混乱回避）。今後 zsh 運用で再発防止

Nit 11 件

reviewer judgment（merge OK のままで or 将来検討）に従い、本 PR では対応せず。必要なら issue #265 / #266 の議論で取り込み。

記録

• memory project_b_plan_progress.md の PR 6 必須チェックリストに test(e2e): generator ページの applyProductionCsp E2E gate を追加（PR 6 前段必須） #262（CSP gate）を「PR 6 前段必須」として明示追記
• PR 1.5 由来 follow-up issue a11y(ui): ResultTable の <tr> aria-selected が ARIA spec 違反（素 table の row では invalid） #263-docs(types): ResultTable.TableColumn.width / minWidth に origin discipline JSDoc を追加 #266 も同チェックリストに記録

merge 準備完了。

[fumtas1k]

レビュー対応 (post-review fix)

判断見直し: 軽量な important 2 件は本 PR 内で対応する方針に変更し commit 74161f8 で fix しました。

issue	対応
#265 (useEffect [columns] anti-pattern)	reviewer 改善案 (3) を採用。useEffect + useRef を撤去し、<table> / <col> の ref callback 内で直接 setProperty / removeProperty を呼ぶ構造に統合。consumer 側の columns 配列毎レンダリング新参照問題を構造ごと解消。副次的に Final review Minor 4 (minWidth never unset) も同時 fix
#266 (width JSDoc origin discipline)	TableColumn<T>.width と Props.minWidth に hard-coded only / sanitize discipline の JSDoc 追加

PR body の Closes #265, #266 で merge 時に自動 close。

残 3 issue (#262 / #263 / #264) は reviewer 推奨どおり別 issue 維持。

• test(e2e): generator ページの applyProductionCsp E2E gate を追加（PR 6 前段必須） #262 (CSP gate) は memory project_b_plan_progress.md の PR 6 必須チェックリスト に「PR 6 前段必須」として追記済
• a11y(ui): ResultTable の <tr> aria-selected が ARIA spec 違反（素 table の row では invalid） #263 / a11y(ui): ResultTable のクリック可能行のキーボード操作対応（WCAG 2.1.1 準拠） #264 (a11y) は ARIA 設計と絡むため独立 issue で扱う

検証: npx astro check 0 errors / npm run test 694 pass。CI 結果待ち。

[fumtas1k]

再レビュー結果（修正後）

74161f8 および新規 issue 4 件（#262 / #263 / #264 / #265 / #266）を確認しました。前回 important 指摘 6 件すべてが適切に処理されており、merge 推奨。CI 3 種（test / e2e / visual-regression）全 pass 維持。

---

✅ #265 useEffect [columns] anti-pattern → ref callback 統合で根本解消

• 箇所: src/components/ui/ResultTable.tsx
• 採用案: 前回提案 (3)「ref callback 内で直接 setProperty」(実装最小)
• 評価: 期待通りクリーン。useEffect + useRef + colgroupRef.current[i] の配列管理が 構造ごと消滅し、stale ref 懸念（前回 nit）も同時解消。
• bonus 改善: minWidth / col.width が undefined に戻った時の removeProperty も追加されており、dynamic columns 対応で旧値が残るケースに先回りした defensive cleanup になっている。
• 副次効果: ref callback は commit phase で実行されるため、useEffect (after paint) より早く CSS 変数が反映され、初回 paint での flash of incorrect width も理論上回避できる（実害は微差）。
• 回帰確認: inline-style-migration.test.ts は .style.setProperty を許容パターンとして陽性対照保護しており、新 ref callback も pass 維持。VRT も baseline 一致で視覚回帰なし。

✅ #266 width / minWidth origin discipline JSDoc 追加

• 箇所: src/components/ui/ResultTable.tsx:7-12, 26-29
• 評価: JSDoc が TableColumn<T>.width および Props.minWidth の両方に適切に追加され、CSSOM の encapsulate 機構と user input bridge 時の sanitize 必須が明文化された。将来 user-input bridging が無自覚に混入するリスクを文書で予防できる。

✅ スコープ外指摘の issue 起票（#262 / #263 / #264）

issue	元指摘	評価
#262	CSP gate を generator ページ E2E に追加（PR 6 前段必須）	✅ 適切に PR 6 連動として起票
#263	<tr> aria-selected が ARIA spec 違反	✅ a11y 観点で独立起票
#264	クリック可能行のキーボード操作（WCAG 2.1.1）	✅ 同上

スコープを越えて a11y 改善を本 PR に詰め込まず別 issue 化する判断は、レビュー単位 / PR サイズ規約（memory feedback_pr_size）に整合。

---

🟢 nit（merge 後の housekeeping）

#265 / #266 issue を本 PR merge 時に close する

• 指摘: 74161f8 の commit message body で issue 番号が参照されているが、GitHub は body 中の #265 / #266 言及だけでは自動 close しない（Closes #265 / Fixes #266 の closing keyword が必要）。両 issue は本 PR で実装完了済のため、merge 時に手動 close するか、PR description 側に Closes #265, Closes #266 を追記して merge と同時に close されるようにすると追跡が綺麗。
• 改善提案: gh pr edit 261 --body で本文末尾に closing keywords を追加、または merge 後に手動で gh issue close 265 266。

---

コミット subject \! 残留について（前回指摘の続報）

53280f7 | refactor(ui)\!: は前回方針通り rebase 見送りで OK。実害なし、Conventional Commits の意図は body の Breaking change: 明記で正しく伝わる。次回以降の B 案 PR（PR 2〜PR 6）で git commit -m '...' のシングルクォート運用に切り替えれば再発防止可能。

---

総評

• 🔴 critical: 0 件
• 🟡 important: 0 件（前回指摘 6 件すべて解消 or 別 issue 化）
• 🟢 nit: 1 件（merge 時の issue close housekeeping のみ）

Approve / merge 推奨。修正の質が高く、改善案 (3) の選択（最小実装かつ stale ref nit も同時解消）と bonus の removeProperty cleanup 追加は reviewer 視点でも気持ち良い対応です。