fix: examples のライトモード視認性改善と英数字混在ワード対応

[tomoemon]

Summary

• ライトモードで黄色系の色が白背景に埋もれて見づらかった箇所を、グレー・赤などコントラストの取れる色へ変更（react-keyboardguide / react-multi-word / react-backspace / react-stroke-graph）
• react-stroke-graph は prefers-color-scheme を監視し、ノード背景・ボーダー・edge ラベル色をテーマに追従させる
• 英字・記号混在ワード aから@ を扱う react-backspace / react-roman-or-kana で、createDirectInputRule をマージして automaton 構築エラーを解消
• react-roman-or-kana の activate 再登録による Shift 押しっぱなし状態の喪失バグを修正

設計の背景

ライトモード対応では、ミスキー列に使われていた yellow や枠線の yellow が白背景でほぼ視認できなかった。ミス表示は赤系（#e5484d）、枠線・キー押下ハイライトはグレー基調へ寄せ、両モードで成立する色に統一した。react-stroke-graph はノード背景が固定 white でライトモードの白背景と同化していたため、テーマ追従させる必要があった。

aから@ のような英数字混在ワードは、ローマ字／JIS かなルール単体では @ や a を automaton 化できずビルド時に例外を投げる。README に記載のとおり createDirectInputRule(layout) をルールに merge することで対応した。

react-roman-or-kana では useEffect の依存配列に打鍵ごとに変化する selectors が含まれており、打鍵のたびに activate が破棄・再登録されていた。activate は呼び出しごとに内部 KeyboardState を新規生成するため、「Shift 押下 → effect 再実行で再登録 → 0 押下」の流れで Shift の押下状態が失われ、を（Shift+0）が修飾なし入力扱いとなり failed になっていた。最新 state を useRef 経由で参照し、ハンドラ登録をマウント時の1回だけにすることで解消した。

検討した代替案

react-roman-or-kana の修正では、useEffect の依存配列から selectors のみ外す案も考えられたが、ハンドラが古い selectors をクロージャに閉じ込めてしまうため不適切。ref で最新値を参照する方式にした。

Test plan

• react-backspace の全3タブで aから@ を含む全ワードがエラーなく入力できる
• react-roman-or-kana で おをひく をかな入力し、を（Shift+0）が failed にならない
• react-roman-or-kana で aから@ がエラーなく表示・入力できる
• ライトモードで各 example の枠線・ハイライト・ミスキー列が視認できる
• react-stroke-graph がライト／ダーク切り替えに追従する

🤖 Generated with Claude Code