feat(ratewise): 主題工作室預覽縮影卡、色票收斂與亮度滑桿（E7 wave-C 最終波）

[s123104]

Summary

E7 主題工作室 wave-C（最終波），收官設計簡報 .claude/prds/custom-theme-v2-design.md 第 4 節 wave-C 與第 6 節對策 #3/#6。前置：#670（wave-A）、#671（wave-B）。

1. 預覽縮影卡（QA-I #3）

• 「Aa」抽象字樣 → 真實元件縮影：匯率卡（surface 層次＋text-text/text-text-muted 匯率文字＋bg-primary-light chip）、品牌 CTA（bg-primary-strong，與全站 addToHistory 同 token）、底部導覽 active 指示（text-primary-on-surface＋indicator bar）。
• 合約：預覽卡只消費與全站相同的 CSS 變數（Tailwind 語義 token）——draft previewTheme 已把派生變數即時寫入 documentElement inline vars，預覽卡直接繼承，禁止獨立配色計算（測試斷言預覽卡 inline 色值零殘留）。
• 尺寸緊湊：實測高度 96px（≤120px 約束），320px 視口不擠壓選色區。

2. 色票網格收斂（QA-I #6）

• 21 色 → 10 格精選（5 欄 × 2 列）：品牌藍系（Toss 藍/天空藍/靛藍/紫羅蘭）→ 活力系（青瓷/森林綠/琥珀/珊瑚/櫻花粉）→ 中性系（石墨）。
• 韓系飽和度校準：新增 property 測試——全部色票 × 全部背景調皆不觸發 wave-B 近白/近黑 gate（校準時排除近白票）。
• 「自訂…」收合 react-colorful 色域盤＋HEX 欄位為進階項；開啟 sheet 時主色非精選票即自動展開。

3. 亮度滑桿連續 tone

• 背景色調從 8 檔 preset 擴充「自訂亮度」滑桿：continuousToneHexAtPosition 雙域映射（前半深域 L 0.02–0.24、後半淺域近白），WCAG 死域中間灰不對外曝露——任意位置 AA 必有解。
• normalizeContinuousToneHex 總函式：任意 hex 保留色相/飽和度、僅調明度夾進可解域（冪等，測試守門）。
• persist schema：tone 值域 enum | #RRGGBB（isValidBackgroundToneValue）——舊 enum 持久化資料與 FOUC 快取簽章零破壞；enum 派生規則零改動，CUSTOM_THEME_DERIVE_VERSION 不 bump；bootstrap g() 加收 hex tone 進簽章比對。
• 深色派生錨點擴為 max(background, elevated)：高飽和連續 tone（背景亮度反超去飽和 elevated）下亮字 7:1 仍達標；低飽和 preset 深檔輸出零變化。
• 滑桿 UI 韓系扁平（軌道渲染實際映射取樣、白色圓形 thumb），拖動 16ms debounce 沿用。

一致性測試證據

• CustomThemeSheet.test.tsx「預覽縮影卡與實際渲染一致性」：預覽 CTA className 含 bg-primary-strong 且 SingleConverter.tsx 全站 CTA 同 token；previewTheme 寫入的 inline 變數（10 個預覽卡消費鍵，含深色調 midnight）與 deriveCustomThemeCssVars SSOT 全等；預覽卡 inline style 零殘留。
• 瀏覽器 runtime 驗證：預覽 CTA getComputedStyle().backgroundColor == rgb(var(--color-primary-strong)) 解析值（10 103 236 全等）。
• 連續 L 抽樣 property：10 滑桿位置 × 322 輸入色 × 深/淺域 AA 斷言全綠；vitest run 9186 passed。
• 舊 profile 遷移零破壞：enum tone 原樣載入/commit、graphite enum 與其 background hex 派生全等、FOUC 快取簽章測試全綠。

截圖矩陣（screenshots/，QA 暫存不入 commit）

視口	預覽卡＋色票	深色滑桿	進階選色
390	e7c-390-preview-swatches.png	e7c-390-slider-dark.png	e7c-390-advanced-picker.png
375	e7c-375-preview-swatches.png	e7c-375-slider-dark.png	—
320	e7c-320-preview-swatches.png	e7c-320-slider-dark.png	—

E7 Epic 收官對照（簡報第 6 節 QA-I 七項對策）

#	QA-I 缺點	對策落點	狀態
1	背景全淺色、無深色調	wave-A #670：三深檔＋67 鍵深色派生＋FOUC pre-paint	✅
2	近白主色無防呆	wave-B #671：gate 警告＋建議色一鍵採用	✅
3	預覽僅「Aa」抽象字樣	wave-C（本 PR）：真實元件縮影預覽卡	✅
4	HEX 欄位陷阱	wave-B #671：focus 全選/paste 清洗/blur commit	✅
5	即時持久無試用/取消語意	wave-B #671：draft/commit/回滾四路徑	✅
6	色票 21 色選擇焦慮	wave-C（本 PR）：10 格精選＋「自訂…」收合	✅
7	還原/重置雙入口不一致	wave-B #671：單一「還原預設」＋二段確認	✅

（簡報第 4 節 wave 表：A ✅ #670、B ✅ #671、C ✅ 本 PR——E7 epic 全數收官）

回歸合約

• feat(ratewise): E7 主題工作室 wave-A——深色背景三檔派生與 pre-paint FOUC 修復 #670：67 鍵集合、防漂移 sync 守門、AA 矩陣、FOUC 快取簽章（v:1 不 bump）全數不回歸。
• feat(ratewise): 主題工作室 UX 安全與痛點批次（E7 wave-B） #671：gate、HEX 欄位、draft 生命週期四路徑（commit/取消/unmount/還原）、入口統一全數不回歸。
• 內建 7 主題 index.css 零 diff；淺色 preset 零變化合約測試全綠。

測試：pnpm --filter @app/ratewise exec vitest run 9186 passed｜typecheck 通過｜pre-commit/pre-push 全過｜changeset（minor）｜002 +184

Made with Cursor

[chatgpt-codex-connector]

You have reached your Codex usage limits for code reviews. You can see your limits in the Codex usage dashboard.
To continue using code reviews, you can upgrade your account or add credits to your account and enable them for code reviews in your settings.

[github-actions]

⚠️ Deprecation Warning: The deny-licenses option is deprecated for possible removal in the next major release. For more information, see issue 997.

Dependency Review

✅ No vulnerabilities or license issues or OpenSSF Scorecard issues found.

Scanned Files

None

[github-actions]

✅ SEO 審計通過！所有 2026 標準驗證項目都符合要求。

• ✅ Sitemap 2026 標準
• ✅ Breadcrumb Schema
• ✅ JSON-LD 結構化數據
• ✅ 內部連結結構