feat(examples): react-stroke-graph に preset rule/layout 選択 UI を追加

[tomoemon]

Summary

• react-stroke-graph の rule/layout 自動ループ方式を廃止し、画面上で preset rule（全 9 種）・preset layout（全 9 種）・入力単語を選択できるようにした
• rule/layout/単語を draft 状態として保持し、適用ボタン（または単語欄での Enter）でまとめて反映。適用時に automaton を再構築して打鍵状態をリセットする
• 単語欄は空白区切りで複数指定でき、入力完了ごとに循環する
• 英字・記号を含む単語にも対応するため directInputRule を合成
• 選択欄・グラフ描画と重複するルール名・ローマ字表記の表示を削除し、レイアウトを調整

設計の背景

従来は事前定義した 4 rule × 3 単語を入力完了ごとに自動で切り替えていく方式で、任意の rule/layout/単語を試せなかった。emiel の全 preset rule/layout を手元で確認できるよう、選択 UI に置き換えた。

rule/layout/単語の変更を即座に automaton へ反映すると、文字入力の途中でグラフが再描画されレイアウトが崩れる。これを避けるため操作中の値（draft）と適用済みの値（applied）を分離し、適用ボタン押下時にのみ反映する構成とした。適用は新しい automaton インスタンスへの差し替えで行われ、これがそのまま打鍵状態のリセットになる。

単語が 1 つだけのとき wordIndex が変化せず再構築が走らないため、入力完了ごとに増える round カウンタを automaton 再構築の依存に加えてループを成立させている。

検討した代替案

• rule/layout/単語を直接 state にして即時反映する案: 実装は単純だが、単語欄をタイプするたびにグラフが再描画されレイアウトが崩れるため不採用
• 単語ループに key による再マウントを使う案: round カウンタと効果は同等だが、automaton 再構築ロジックを 1 つの useEffect に集約できる現状の方が見通しがよいため不採用
• 全 preset を列挙するライブラリ API を新設する案: 今回はサンプル内で完結させる方針のため、example 側に rules/layouts 配列を定義するに留めた

Test plan

• pnpm run lint
• pnpm run fmt:check
• examples/react-stroke-graph で tsc --noEmit
• dev server で rule/layout/単語の切替時に打鍵状態がリセットされることを確認
• 単語入力欄での Enter（IME 変換確定を除く）で適用されることを確認
• 単語 1 つのときに入力完了でループすることを確認

🤖 Generated with Claude Code