apply-comments

スライドのコメントを適用する

オープンスライドエディターにはコメントモードがあり、ユーザーはレンダリングされたページ要素をクリックするか、ページ上の領域をドラッグして、テキストコメント（例： 「これを赤にして」、「『Open Slide Rocks』に変更して」）を付けられます。各コメントは、slides/<slideId>/index.tsx 内にソースコード内の JSX マーカーとして保存されます。

あなたの作業：これらのマーカーを読み取り、記載された編集を行い、マーカーを削除してください。

ページを編集する前に必ず、slide-authoring スキルを参照してください。これは、slides/<id>/index.tsx の構成（キャンバス、文字サイズ、配色、アセット、ファイルの仕様）に関する技術資料です。*「これを大きくして」や「アクセントカラーを変更して」*といったコメントは、これらのルールに沿う方法で適用してください。

マーカーの形式

{/* @slide-comment id="c-<8hex>" ts="<ISO>" text="<base64url(JSON)>" */}

• 対象となる JSX 要素の最初の子要素として配置されます（つまり、その要素の開始タグの > と他の子要素の間です）。マーカーは対象の内部に挿入され、対象の上に浮かぶことはありません。新たに記述されるマーカーは独立した行に置かれますが、古いマーカーは後続のコンテンツと同じ行を共有している場合があります。

• text は、base64url でエンコードされた JSON です：{"note": "...", "hint"?: "...", "rect"?: {"x", "y", "w", "h"}, "page"?: n}。

  • rect は、コメントが要素上ではなくドラッグした領域に対して付けられた場合に存在します。値は、ページ左上から測定した 1920×1080 ページキャンバス上のピクセル単位です。マーカーは、その領域を含む最も深い要素の内部に置かれますが、コメントは領域内の内容を指します。複数の子要素、または囲んでいる要素の一部のみを指す場合があります。
  • page は、コメントが付けられたページの、デフォルトエクスポート配列内での 0 始まりのインデックスです。

• 検出正規表現（正式なものです。必ずそのまま使用してください）：

  /\{\/\*\s*@slide-comment\s+id="(c-[a-f0-9]+)"\s+ts="([^"]+)"\s+text="([A-Za-z0-9_\-]+={0,2})"\s*\*\/\}/g
  

手順

1. 対象のスライドを特定します。

   • ユーザーがスライドを指定した場合（getting-started、q2-roadmap など）は、そのスライドの slides/<slideId>/index.tsx のみを対象にします。
   • 「すべて」と指定された場合、または指定がない場合は、slides/*/index.tsx をすべて確認します。各スライドを1つずつ処理してください。

2. ファイルを読み、すべてのマーカーを見つけます。

   • 上記の正規表現をファイル全体に適用します。
   • 一致するものごとに、text を base64url デコードし、JSON.parse で { note, hint?, rect?, page? } を取得します。
   • 各ヒットを { id, lineIndex (0-based), note, hint, rect, page } として記録します。
   • マーカーがない場合は、その旨をユーザーに伝えて終了します。

3. 各コメントを文脈に沿って理解します。

   • 対象となる JSX 要素は、マーカーを含む外側の要素です。つまり、マーカー行から上にたどり、マーカーが本体に含まれている、閉じられていない JSX 開始タグを見つけます。その要素が対象です。（<img /> のような自己終了要素の場合、インスペクターはマーカーを最も近い自己終了でない親要素に移動します。この場合、コメントは通常、親要素そのものではなく、その子要素について述べています。どの要素を指すかは note の内容から判断してください。）
   • 変更を正確に適用できるように、周辺のコード（親要素、兄弟要素、インラインスタイル）を十分に確認します。たとえば、インラインの background スタイルが指定された <div> 内のコメントは、通常その要素のスタイルについて述べています。
   • ペイロードに rect が含まれている場合は、対象要素のどの子要素がその領域内にあるかを特定し（1920×1080 のキャンバス上で位置とサイズを rect と比較します）、対象要素全体ではなく該当する子要素に変更を適用します。
   • note が曖昧な場合は、妥当な範囲で最小限の解釈を行い、その前提を概要で伝えます。

4. 行番号の降順で編集を適用します。

   • マーカーを lineIndex の降順に並べ、1つずつ Edit ツールで処理します。
   • 上から順に処理すると、ファイルの行数が増減したときに後続のマーカーの行番号がずれてしまいます。

5. 編集の適用後、各マーカーを削除します。

   • マーカートークンを削除します。その行にほかの内容が残らない場合は、末尾の \n も含めて行全体を削除します。同じ行にほかの内容がある場合は、その内容を残します。
   • 適用した編集のマーカーを残してはいけません。残っている場合は処理に失敗したことを示します。以下のエッジケースに従って意図的にスキップしたマーカーは、そのまま残します。

6. 確認します。

   • すべての編集後にファイルを再度読み込み、残っているマーカーが報告済みのスキップ対象のみであることを確認します。
   • JSX の編集箇所が正しく構成されていること（タグの対応が取れていること、属性が宙に浮いていないこと）を確認します。プロジェクトの package.json に型チェックまたは lint のスクリプトがある場合は、プロジェクトのパッケージマネージャーで実行します。ひな形プロジェクトには TypeScript もリンターも含まれていないため、その場合は実行中の開発サーバー（または build スクリプト）でコンパイルエラーがないか確認します。導入したエラーがあれば修正します。
   • 開発サーバーが起動している場合は、slide-authoring のページの視覚的なプレビューを参照し、/s/<id>/preview?p=N から編集した各ページのスクリーンショットを撮って、変更が正しく表示されることを確認します。

7. 報告します。

   • N 件を適用、M 件をスキップ と、各変更（スライド ID を含む）の簡潔な説明をまとめます。

base64url デコード用ヘルパー

function decode(s) {
  const pad = s.length % 4 === 0 ? '' : '='.repeat(4 - (s.length % 4));
  return Buffer.from(s.replace(/-/g, '+').replace(/_/g, '/') + pad, 'base64').toString('utf8');
}

ペイロードを確認する必要があれば、これを node -e '...' でインライン実行できます。それ以外の場合は、デコード後の文字列を推測してください。

エッジケース

• 対応する JSX 要素がないマーカー（通常は発生しません。インスペクターが書き込むことはありませんが、見つけた場合）：削除し、孤立したマーカーとして記録します。
• 同じ要素内で複数のマーカーが連続する行に並んでいる場合：すべて、その要素を対象としています。ソースの順序でメモを読み、意図を組み合わせて把握してから、手順 4 に従って下から順に適用・削除します。
• コメントで対象要素の範囲外の作業を求めている場合（例：「新しいページを追加する」）：妥当な範囲で最も近い編集を行い、概要で範囲を拡大したことに言及します。
• コメントを解決できない場合（例：内容が本当に曖昧な場合や、ファイルの構造が変わって対象要素が存在しない場合）：マーカーはそのまま残し、スキップしたことを報告します。推測で対応しないでください。

禁止事項

• package.json、open-slide.config.ts、または slides/ 以外のファイルには触れないでください。
• 依存関係を追加しないでください。
• マーカーを再度追加したり、TODO の痕跡を残したりしないでください。ユーザーはすでに git に記録しています。