gpui-component

まずお読みください

UI、操作、インターフェースの言語、レイアウト、スタイル、コンポーネント、アプリケーションアーキテクチャを変更する前に、該当するガイドをお読みください：

ガイド	事前に読む内容
デザインガイド	コンポーネント、レイアウト、余白、階層、色、情報密度、操作状態、オーバーレイ、インターフェースの文言の選択
コーディングガイド	クレートのレイヤー構成、RenderOnce と Entity<T> の使い分け、状態の所有権、ElementId、フォーカス、非同期処理、パブリック API、テスト

これらのガイドは必須要件であり、任意の参考資料ではありません。この一覧にない内容についても、ガイドをお読みください。一般的なウェブの慣習をそのまま持ち込んだり、既存の画面ひとつからデザインシステムを推測したり、基盤となる機能があるというだけでコントロールを追加したりしないでください。作業完了とする前に、両方のガイドに照らして成果物を確認してください。

ガイドファイルそのものをお読みください。このページの要約、コードベース内の既存画面、トレーニングデータをもとに判断しないでください。これらは、ガイドがいつの間にか無視される主な原因です。

絶対に守ること

以下は最低限の基準であり、ガイドを読む代わりにはなりません。この一覧を超える内容については、ガイドをお読みください。

• API を作り出さないでください。 現在のソースを検索して、実際のシグネチャを確認してください。React、CSS、古い GPUI の例を類推で置き換えないでください。もっともらしく見えても実在しないメソッド名を使うことが、ここで最もよくある失敗です。
• ウェブの慣習よりデスクトップを優先してください。 キーボード操作、ウィンドウ枠、メニュー、高密度のデータ表示、サイズ変更可能な領域、永続的なナビゲーションを考慮してください。
• Button と Link を使い分けてください。 アプリ内のコマンドにはすべて Button を使います。控えめに表示する場合は ghost または outline を使ってください。Link は外部 URL とメールアドレスに限ります。
• 値よりトークンを優先してください。 アプリケーション UI で生の hex 値や rgb(...) を使わず、cx.theme() のセマンティックトークンを使ってください。ウィンドウのズームに対応できるよう、rem ベースのヘルパー（p_2()、gap_3()、text_sm()）を使ってください。記載されている余白の数値は現在の既定スケールであり、そのまま使う値ではありません。
• 状態が見えるようにしてください。 ホバー、フォーカス、選択、無効、読み込み中、入力検証、破壊的操作の各状態には、それぞれ明確で一貫した表示が必要です。
• 安定した識別子を使ってください。 繰り返し表示される要素には、リストのインデックスではなく、ドメインに基づく ElementId が必要です。
• オーバーレイについて。 Escape キーで最前面のサーフェスを閉じ、トリガーにフォーカスを戻してください。
• 文言について。 オブジェクト名と動詞を明示してください。たとえば「「ロードマップ」を削除しますか？」に Delete ボタンを付け、「よろしいですか？」に OK ボタンを付ける形にはしないでください。

ドキュメント

• リファレンス全文：https://gpui-kit.com/llms-full.txt を取得してください
• コンポーネントごとの API：https://gpui-kit.com/docs/components/{name}.md を取得してください
  • 例：button.md、input.md、select.md、dialog.md、data-table.md
• .md を URL の末尾に追加すると、サイト上の任意のページを Markdown として取得できます

クイックリファレンス

セットアップ — 常に必要です：

gpui_component::init(cx);               // in app.run(), must be first
Root::new(view, window, cx)             // first-level view in every window

ステートレス — レンダリング時に直接使用します：

Button::new("id").primary().label("OK").on_click(|_, _, _| {})

ステートフル — Entity<State> を構造体に保持し、レンダリング時に参照を渡します：

// in new():  let input = cx.new(|cx| InputState::new(window, cx));
// in render: Input::new(&self.input)

サイズ：.xsmall() .small() .medium()（デフォルト）.large()

テーマ：cx.theme().primary · .background · .foreground · .border · .muted

コンポーネントカタログ

コンポーネントが必要な場合は、こちらから探してください。API の全容については、その .md ドキュメントを取得してください。

入力とフォーム

コンポーネント	インポート	備考
Input	input::{Input, InputState}	状態あり。テキスト、パスワード、マスク、バリデーション
NumberInput	input::{NumberInput, NumberInputEvent}	状態あり。ステップ指定可能な数値入力
OtpInput	input::OtpInput	状態あり。ワンタイムパスワード
Select	select::{Select, SelectState}	状態あり。ドロップダウン式の選択
Combobox	combobox::{Combobox, ComboboxState}	状態あり。検索可能な選択
Checkbox	checkbox::Checkbox	状態なし。`on_click(
Switch	switch::Switch	状態なし。切り替え
Radio	radio::{Radio, RadioGroup}	状態なし。
Slider	slider::{Slider, SliderState}	状態あり。
Toggle	button::Toggle	状態なし。
Rating	rating::Rating	状態なし。
Stepper	stepper::Stepper	状態なし。増加／減少
ColorPicker	color_picker::{ColorPicker, ColorPickerState}	状態あり。
DatePicker	date_picker::{DatePicker, DatePickerState}	状態あり。
Form	form::{v_form, h_form, field}	フォームフィールド用のレイアウトコンテナー

表示とフィードバック

コンポーネント	インポート	備考
Button	button::{Button, ButtonGroup}	状態なし。主要な UI アクション
Icon	{Icon, IconName}	状態なし。Lucide アイコン
Badge	badge::Badge	状態なし。
Tag	tag::Tag	状態なし。閉じることができるタグ
Avatar	avatar::Avatar	状態なし。
Label	label::Label	状態なし。フォームラベル
Kbd	kbd::Kbd	状態なし。キーボードキーの表示
Alert	alert::Alert	状態なし。情報／成功／警告／エラー
Spinner	spinner::Spinner	状態なし。読み込みインジケーター
Skeleton	skeleton::Skeleton	状態なし。読み込みプレースホルダー
Progress	progress::{Progress, ProgressCircle}	状態なし。
Tooltip	tooltip::Tooltip	要素に .tooltip() を指定
HoverCard	hover_card::{HoverCard, HoverCardState}	状態あり。
Clipboard	clipboard::Clipboard	状態なし。コピーボタン

オーバーレイとポップアップ

コンポーネント	インポート	備考
Dialog	dialog::Dialog + WindowExt	window.open_dialog(...) で表示
AlertDialog	WindowExt	window.open_alert_dialog(...) で表示
Sheet	sheet::Sheet + WindowExt	サイドパネル。window.open_sheet(...) で表示
Notification	notification::Notification + WindowExt	window.push_notification(...) で表示
Popover	popover::Popover	フローティングオーバーレイ
Menu	menu::{PopupMenu, DropdownMenu}	コンテキストメニュー
DropdownButton	button::DropdownButton	ドロップダウンメニュー付きボタン

ナビゲーションとレイアウト

コンポーネント	インポート	備考
Tabs / TabBar	tab::{Tab, TabBar}	タブインターフェース
Sidebar	sidebar::{Sidebar, SidebarMenu, ...}	アプリのナビゲーションパネル
TitleBar	TitleBar	ウィンドウのタイトルバー
Breadcrumb	breadcrumb::Breadcrumb	ナビゲーション用パンくずリスト
Pagination	pagination::Pagination	ページナビゲーション
Accordion	accordion::Accordion	折りたたみ可能なセクション
Collapsible	collapsible::Collapsible	単一の折りたたみ可能な要素
GroupBox	group_box::GroupBox	ラベル付きコンテナー
Resizable	resizable::{h_resizable, v_resizable, resizable_panel, ResizableState}	ドラッグ可能な分割ペイン
Scrollable	scroll::Scrollbar	カスタムスクロールバー
FocusTrap	gpui_base::focus_trap::FocusTrapElement	モーダル内のキーボードフォーカストラップ

データ表示

コンポーネント	インポート	備考
DataTable	table::{DataTable, TableState, TableDelegate}	状態を保持します。高機能なテーブルです
Table	table::{Table, ...}	よりシンプルなテーブルです
VirtualList	{v_virtual_list, h_virtual_list}	大規模なリストを高速に表示します
List	list::{List, ListState, ListDelegate}	状態を保持します。検索可能なリストです
Tree	tree::{Tree, TreeState, TreeItem, TreeEntry}	状態を保持します。階層構造を表示します
DescriptionList	description_list::DescriptionList	キーと値のペアを表示します
Settings	setting::Settings	設定パネルです

グラフ

コンポーネント	インポート	備考
Chart	chart::{AreaChart, BarChart, LineChart, PieChart, RadarChart}	棒、折れ線、面、円グラフです
Plot	plot::Plot	データには #[derive(IntoPlot)] を使用します

リファレンスファイル

• usage.md — セットアップパターン、コンポーネントの種類、一般的な使用例
• style-guide.md — コントリビューター向けのコードスタイル