| name | ui-design-impl |
| description | Ravel の UI（パネル・ウィジェット・アイコン）を設計・実装するときの手順。 3層構造（ravel-core / ravel-ui / ravel-app）への切り分け、gpui-component ウィジェット選定、テーマカラー、t! による i18n、Lucide アイコンの オンデマンド vendoring と RavelIcon 登録までを一気通貫で扱う。 トリガー: "/ui-design-impl"、新しいパネル・ウィジェット・アイコンの追加、 「UIを作って」「アイコンを追加して」（Ravel リポジトリ内）。 |
ui-design-impl
Ravel の UI 実装ワークフロー。着手前に必ず読むもの:
.agents/rules/gpui.md（render 純粋性・focus 所有権・Command 経路）docs/gpui-ui-guide.md（canvas 描画・テーマ・イベントの実践知）docs/agent-api-reference.md（ravel-ui / ravel-app の API マップ）- ウィジェット選定は
gpui-component スキル、GPUI 基礎 API は gpui-ce スキル
1. 層の切り分け
| 置く場所 | 内容 |
|---|
ravel-core | ドメイン型・純ロジック（UI 依存禁止） |
ravel-ui | ヘッドレス状態（選択・スクロール・展開等）+ ユニットテスト |
ravel-app | GPUI ビュー（Panel 実装、canvas、イベント） |
新パネルは PanelKind 追加 → panel_for_kind() と register_panels() の
両方に concrete パネルを登録（片方だけだと reattach で Placeholder に戻る）。
コンストラクタは new(window, cx)、focus は track_panel_focus()。
2. 表示テキストと色
- ユーザー可視文字列は必ず
t! / locale キー経由。
assets/locales/en.toml と ja.toml の両方に追加する。
ヘッドレス層（ravel-ui）はキーを発行し、ravel-app が translate する
（properties.section.* 方式）。
- 色はハードコードせず
cx.theme().colors.*（ActiveTheme import）。
3. アイコン
方針: 使う分だけ vendoring。Lucide 全部盛りは禁止。
gpui-component ウィジェット内蔵アイコン（chevron 等）は
gpui-component-assets フォールバックが配信するので何もしなくてよい。
新しいアイコンが必要になったら:
-
https://lucide.dev で名前を確認し、pinned バージョンでダウンロード:
V=0.462.0
curl -sf "https://unpkg.com/lucide-static@$V/icons/<name>.svg" \
-o assets/icons/<name>.svg
（ISC ライセンスは assets/icons/LICENSE に配置済み。バージョンを
上げる場合は全アイコンを同時に更新し LICENSE も差し替える）
-
crates/ravel-app/src/assets.rs の RavelIcon enum に variant を追加し、
path() にマッピングを追加。
-
使用側: gpui_component::Icon::new(RavelIcon::X).text_color(color)。
パネルタブは panels::tab_title() ヘルパーが icon+label を統一描画する。
-
cargo test -p ravel-app assets — every_panel_icon_is_embedded 等の
埋め込み検証テストが通ること。enum に追加したのに SVG を置き忘れると
ここで落ちる。
アセット配信の仕組み: RavelAssets（rust-embed、assets/icons/**/*.svg）
→ miss 時 gpui_component_assets::Assets へフォールバック。
main.rs の .with_assets(RavelAssets) で登録済み。
4. 検証
mise run check（fmt + pattern lint + clippy -D warnings + tests）- 見た目の変更は
cargo run で起動確認（テーマ両対応を意識）
- PR 前に
ravel-review スキル（render 純粋性等の文脈依存チェック + gate）
