通知・オーバーレイ
コンテキストメニュー
ステージ上を右クリック（長押し）すると、カーソル位置にメニューが開く。アイコン付き項目・区切り線・破壊的項目を持ち、項目クリック・外側クリック・Escで閉じる。
プレビュー
クリック
操作クリック／タップで動きます。
実装メモ
プレビューは枠内に収めるため、メニューを position:absolute（ステージ基準）で実装し、座標もステージ内へクランプしています。実際のページで最前面に出すときは position:fixed に変え、body 直下など高い階層へ置き、window の幅・高さでクランプしてください。ブラウザ標準の右クリックメニューは e.preventDefault() で抑止します。
コード（コピーして使えます）
<div class="stage" id="stage">
<p class="hint" id="hint">ここを<b>右クリック</b><br>（スマホは長押し）</p>
<div class="ctx-menu" id="ctxMenu" role="menu" aria-hidden="true">
<button class="ctx-item" role="menuitem">
<svg width="14" height="14" viewBox="0 0 14 14" fill="none" aria-hidden="true">
<path d="M2 11.5h10M9 2.5l2.5 2.5-6 6-2.8.5.5-2.8 6-6z" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
編集する
</button>
<button class="ctx-item" role="menuitem">
<svg width="14" height="14" viewBox="0 0 14 14" fill="none" aria-hidden="true">
<rect x="2.5" y="4.5" width="7.5" height="7.5" rx="1.5" stroke="currentColor" stroke-width="1.4"/>
<path d="M4.5 4.5V3a1.5 1.5 0 011.5-1.5h4A1.5 1.5 0 0111.5 3v4a1.5 1.5 0 01-1.5 1.5" stroke="currentColor" stroke-width="1.4"/>
</svg>
複製する
</button>
<button class="ctx-item" role="menuitem">
<svg width="14" height="14" viewBox="0 0 14 14" fill="none" aria-hidden="true">
<path d="M7 2v7M4 6l3 3 3-3M2.5 11.5h9" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
名前を変更
</button>
<hr class="ctx-divider" aria-hidden="true"/>
<button class="ctx-item ctx-item--danger" role="menuitem">
<svg width="14" height="14" viewBox="0 0 14 14" fill="none" aria-hidden="true">
<path d="M2.5 3.5h9M5 3.5V2.5a.5.5 0 01.5-.5h3a.5.5 0 01.5.5v1M4.5 3.5l.5 8M9.5 3.5l-.5 8M3.5 3.5l.5 8h6l.5-8" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
削除する
</button>
</div>
<p class="ctx-result" id="ctxResult" role="status" aria-live="polite"></p>
</div>