feat: 編み図で使っている色の一覧から色を選べるようにする

[K0mork]

変更内容

• ツール列の「色」をボタンにし、押すと「記号の色」ダイアログを開くようにしました（記号ピッカーと同じく、スマホ幅では下から出るシート、760px以上では中央のダイアログ）。
• ダイアログの「この編み図で使っている色」に、今開いている編み図で使っている色を並べます。押すとその色を選び、描画モードに戻ってダイアログを閉じます。今の色には枠が付きます（aria-pressed）。
• 一覧にない色は、同じダイアログの「ほかの色」（従来の<input type="color">）で選びます。
• 色を数える関数collectUsedColorsをpackages/editor-core/model/usedColors.tsに置き、Web版とiOS版で共有します。
• 使い方ページ（/guide/）の「編み目記号と色を選ぶ」に一覧の説明を1文足し、ios/docs/WEB_SYNC.mdの共通ファイル表にui/ColorPicker.tsxを足しました。

決めたこと

Issueで細かく決まっていなかった点です。レビューで直せます。

• 置き場所: 「色」を押したときに出すダイアログにしました。ツール列の幅は以前（「色」と色見本）とほぼ同じで、スマホ幅でも窮屈になりません。その代わり、任意の色を選ぶには「色」→「ほかの色」と1回多く押す必要があります。
• 並べ方: その色で置いている記号の多い順です。同数なら盤面のセル配列で先に見つかった順にしました（並びが編集のたびに入れ替わりにくくするため）。2目・3目の記号は起点の1マスだけを数えます。
• 上限: 24色です。スマホ幅で4段ほどに収まり、糸の色数としては十分と考えました。25色以上あるときは「使っている順に24色を表示しています。ほかにN色あります。」と添えます。
• 計算の頻度: ダイアログを開いている間だけuseMemoで数え、盤面が変わったとき（revision）だけ数え直します。なぞり描き中は数えません。1000×1000の全面でもセル配列を1回なめるだけで、同じ色が続く区間はMapを引きません。
• 一覧から選んだ後の動作: 記号を選んだときと同じく、描画モードへ切り替えて選択範囲を解除し、ダイアログを閉じます。「消す」モード中でもすぐその色で描けます。「ほかの色」で色を変えたときは、つまみを動かすたびに呼ばれるため、閉じずに色だけ変えます。
• 読み上げのラベル: 色見本は色でしか区別できないので、「赤 #d33c32、記号12個」のように、おおまかな系統名（黒・白・灰色・赤・ピンク・茶色・ベージュ・オレンジ・黄色・黄緑・緑・青緑・水色・青・紺・紫・赤紫）、色コード、記号数を付けました。ツール列の「色」ボタンも「記号の色を選ぶ（現在：赤 #d33c32）」と今の色を読み上げます。
• タップ領域: 色見本と「ほかの色」の色選択は、Web版でも44px以上にしました（Web版の他のボタンは42px）。
• 分析イベント: 追加していません。

実行した確認

• npm run typecheck: 成功
• npm test: 成功（25ファイル160件）
• npm run build: 成功
• npm run check:dist: 成功。dist/CNAMEがknittingeditor.comであること、dist/guide/index.htmlに追記が入ることも確認
• npm run test:e2e: 成功（97件成功、iPhone Safari専用の2件は設定どおりスキップ）。追加したテストはchromium-mobile・webkit-mobile・chromium-desktopの3プロジェクトで実行
• 設定済みのプロジェクトにWebKitのデスクトップ幅が無いので、追加したテストと記号ピッカーのテストを、一時的な設定でDesktop SafariとiPad（gen 7）でも実行して成功（一時設定はコミットしていません）
• iOS Web: ios/Webでtsc -p tsconfig.app.json --noEmitとvitest run --config vite.config.ts（3ファイル8件）が成功
• iOS: xcodegen generateとSimulator向けDebugビルドが成功。iPhone 16（iOS 18.2）とiPad（第10世代、iOS 18.2）のSimulatorで、ダイアログの表示と、色見本を押すと閉じて色が選ばれることを目で確認
• iOSのSimulatorテスト、アプリ更新テスト、Release ArchiveはAGENTS.mdのとおり手元では実行せず、このPRのCIに任せます

スクリーンショット

スマホ幅（iPhone 14・Pixel 7相当）、iPad、デスクトップ幅のブラウザと、iPhone 16・iPad（第10世代）のSimulatorで撮って手元で確認済みです。CLIから画像を添付する手段が無いため、添付は未了です。必要なら手元のファイルをこのPRへ貼ります。

関連

Closes #90

🤖 Generated with Claude Code

[Copilot]

Copilot was unable to review this pull request because the user who requested the review has reached their quota limit.

[K0mork]

レビュー結果（マージ保留）

CI

ci-gate を含め、PRのチェックはすべて成功しました（web、ios_web、ios（iPhone 17・iPad (A16)）、app_update（両機種）、release_archive、app_store_docs、CodeQL）。main は #114 の分だけ進んでいますが、触っているファイルは別で、コンフリクトはありません（mergeStateStatus は CLEAN）。

コード

問題は見つかりませんでした。

• collectUsedColors は、セル配列を1回なめるだけです。空のマス（0）を飛ばし、同じ色が続く区間ではMapを引きません。セルの値は記号の起点にだけ入る（記号IDは1から始まる）ので、2目・3目の記号を1個と数えるのも盤面モデルと合っています。同数の色は、Mapに入れた順と安定ソートによって、見つかった順に並びます。
• 色を数え直すのはダイアログを開いている間だけで、revision が変わったときに限ります。Undo/Redoや貼り付けで盤面が変わっても revision 経由で数え直されます。盤面モデルはReact/DOMから独立したままで、セルをDOMにもしていません。
• selectColor は selectStitch と同じく、描画モードへ戻して選択範囲を解除します。従来の aria-label="記号の色" の入力を参照していたテストやSwiftのコードは、ほかにありません。
• Vitest（空の盤面・色が多い盤面・1000×1000）、EditorViewのテスト、Playwright（スマホ幅・デスクトップ幅で、一覧から選んで描き、保存されたセルの色まで確かめる）がそろっています。docs/dev-log/2026-10-06-used-color-palette.md は書式どおりで、PR本文の検証内容と合っています。
• 差分、PR本文、コミットメッセージに機密情報はありません。Closes #90 と enhancement ラベルもあります。

マージを保留した理由

Issue #90 の完了条件に「iPhoneとiPadで表示を確かめ、スクリーンショットをPRに付ける」があります。PR本文にあるとおり、まだ添付されていません。このPRは Closes #90 でIssueを閉じます。AGENTS.md には、一部しか終わっていないIssueを閉じないとあります。そのため、このままではマージしません。

手元で撮ってあるiPhone 16・iPad（第10世代）のSimulatorとブラウザ各幅の画像は、レビュー担当も見ました。表示に問題はありません。これらをこのPRに貼れば、マージできる状態です（コードの修正は不要です）。

軽微な点（対応は任意）

• ColorPicker の useMemo は、本体で使っていない revision を依存配列に入れています。数え直しのきっかけとして意図したもので、コメントもあるので、このままで構いません。

[K0mork]

デプロイ確認

main の e1a2001（#120 のマージ。#118・#123・#115・#124・#126・#120 をすべて含む）の CI and deploy Pages（run 37560031792）が成功しました。

• ci-gate: 成功
• deploy: 成功（github-pages 環境の最新のデプロイが e1a2001）
• smoke: 成功（本番の HTML が配信物と一致し、参照する /assets/ などが取れること）
• そのほかのジョブ（web、ios_web、ios（iPhone 17・iPad (A16)）、app_update（両端末）、release_archive）もすべて成功

途中の 736dd6d（#124）と 2bde0a3（#126）の run は、iOS の UI テストの失敗で ci-gate が通らず、配信されていません。前者は #115 と #123 の組み合わせで壊れたテスト（#126 で修正）、後者は Simulator の一時的な失敗です。

本番（https://knittingeditor.com/）での確認

Playwright で、Android Chrome 相当（Pixel 7）、iPhone Safari 相当（iPhone 14、WebKit）、デスクトップ幅（1440×900）の Chromium と WebKit の4通りで確かめました。どれも成功し、ページのエラーは出ませんでした。

• 配信された HTML が新しい /assets/index-*.js を参照し、その中に feat: 編み図で使っている色の一覧から色を選べるようにする #115・feat: 編み図の一覧に縮小画像と更新日時を出す #124・feat: 最後のバックアップ日時を表示し、.knitの書き出しを勧める #120 の機能が入っていること
• feat: 編み図で使っている色の一覧から色を選べるようにする #115: ツール列の「色」から「記号の色」ダイアログが開き、何も置いていない盤面では「まだ記号を置いていません。」と出る。「ほかの色」で色を変えて描くと、「この編み図で使っている色」に2色が並ぶ（読み上げは「赤 #d33c32、記号1個」など、今の色に aria-pressed）。「消す」モードから一覧の赤を選ぶと、ダイアログが閉じて「描く」モードに戻り、その色で描ける（端末内の保存データで色を確認）。スマホ幅では下から出るシート、デスクトップ幅では中央のダイアログで表示されることを、スクリーンショットで確かめました。