レイアウトのコンポーネント
コンテンツを配置して見せるコンポーネント。途中で反転できる高さアニメーションのアコーディオンと折りたたみ、スクロールスナップのカルーセル、サイズ変更できる分割パネル、端がフェードするスクロール領域、アスペクト比ボックス、区切り線。
閉じたパネルもブラウザの検索で見つけられ、コンテンツの読み込みで何もずれません。
- Accordionそれぞれがパネルを表示する見出しの積み重ねです。途中で反転できる高さのモーションを持ち、閉じている間もパネルの内容を検索できます。
- Aspect ratioメディアの読み込み前も形を保ち、読み込み中はシマー表示になり、メディアをフェードインさせ、失敗時はフォールバックを表示するボックスです。
- Carouselネイティブのスクロールスナップによるスライドです。タッチでの慣性、マウスドラッグ、矢印キー、ドット、サムネイル、適切なタイミングで一時停止する自動再生に対応します。
- Collapsible高さのモーションで表示と非表示を切り替えるパネルです。途中で反転でき、レイアウトが跳ねません。
- Resizableドラッグで分割できるパネルです。ホバーで目覚める控えめな区切り線、リセットや折りたたみで滑らかに動くサイズ、永続化されるレイアウトに対応します。
- Scroll area最小限のスクロールバーを備えたネイティブスクロールです。端は続きがある側だけフェードし、最後の項目を半分で切って見せるピークも任意で使えます。
- Separatorコンテンツを水平または垂直に区切る細線です。ラベルを付けたり、見た目だけの線として装飾モードにしたりできます。
Pro ブロックでの利用
これらのコンポーネントで作られた AI プロダクト向けのブロック。
- Agent Todosエージェントが作業中に保持する計画を、1 ステップ 1 行で表示します。進行中のステップ、失敗したステップ、実行途中の計画変更に対応します。
- Chat Sidebarピン留めしたチャット、プロジェクト、最近の履歴を備えたチャットアプリのサイドバー。その場での名前変更、取り消し可能な削除、返信中のチャットに対応します。
- Stack Trace開発者が読む順序でクラッシュを表示します。自分のコードが先に来て、フレームワークのフレームは折りたたまれ、原因はすべて順番に並びます。
- Subagentsエージェントがほかのエージェントに任せた実行を、1 実行 1 行で表示します。並列実行、停止と再試行、完了後の要約に対応します。
- Test Resultsエージェントのテスト実行をリアルタイムに表示します。テストはストリーミングで届いて要約に折りたたまれ、失敗したものは差分とともに開いたままになります。
- ThinkingAI チャットの思考ビュー。ライブのラベルが各ステップを追い、検索とソースは履歴に折りたたまれ、引用は回答の横に並びます。