[bestian]

修正

Closes #175

• 根因：CharacterImageView 用 segment.part 同時識別 React row、canvas ref 與描寫狀態；重複字的登記會被最後一個同字覆蓋。
• 改用「出現位置＋字面內容」識別每個 segment，讓相鄰及非相鄰重複字都有獨立描寫區。
• 新增滑鼠與手機尺寸原生觸控 E2E 回歸測試：以「飛飛龍飛」逐一描寫整詞及各段，確認筆跡只出現在目標 canvas，且「清除描寫」清空全部筆跡。
• README 補充鏤空描寫與清除行為。

範圍與風險

• 行為修正只限 CharacterImageView 的 segment 實例識別。
• 未改座標算法、共用 CSS、Worker、字典資料或一般詞條頁。
• 實際瀏覽器另已驗證字型切換、非鏤空模式、從「飛飛龍飛」換詞到「萌黃萌」及返回一般「萌」詞條，未觀察到描寫區干擾或殘留。
• 尚未部署。

驗證

• 實際 Chromium 瀏覽器滑鼠與手機尺寸原生觸控拖曳，確認每個字均可獨立留下筆跡；觸控筆畫中段像素有實際著色。
• vp run build：通過。
• E2E_SKIP_BUILD=1 vp exec playwright test --project=chromium tests/e2e/charimg-drawing.spec.ts tests/e2e/charimg-caption-dark-contrast.spec.ts tests/e2e/dictionary.spec.ts tests/e2e/interactions.spec.ts tests/e2e/stroke-animation.spec.ts：108 passed。
• vp test run --project unit tests/unit/character-image-view.test.tsx：1 passed。
• vp run check:css-ids：通過，0 unallowed collisions。
• vp check && vp run typecheck：格式與 typecheck 通過，0 errors；未修改的 scripts/lib/r2-upload.mjs:300 有 1 項 no-control-regex warning。
• Commit hook vp check --fix：通過。

[bestian]

@audreyt 這筆修復，還請得便檢閱。若確認無誤，由您那邊merge + deploy好嗎? 謝謝!

[audreyt]

確認無誤。segment.part 同時當 React row key 和 canvas／描寫狀態 id，重複字會覆寫到最後一個 canvas。改成出現位置加字面後，ref、draw state、pointer／touch／mouse handler 都走同一個 id；清除描寫仍掃全部 canvas。CI 全綠，含新的滑鼠與觸控 e2e。核准並合併，接著上 staging，驗證後再上正式站。

[audreyt]

已合併並上線。重複字的鏤空描寫各自獨立；staging 與正式站都用「飛飛龍飛」逐一描寫確認過，筆跡只留在當下那個字，「清除描寫」會清空全部。正式站 release 13b19151-c64c730e385b。