[ { "path": ".cargo/config.toml", "content": "[target.x86_64-pc-windows-msvc]\nrustflags = [\"-C\", \"link-arg=/STACK:8000000\"]\n" }, { "path": ".claude/COMPONENT_TEST_RULES.md", "content": "# GPUI Component Testing Rules\n\n## Testing Principles\n\n### 1. **Simplicity First**\n\n- Avoid excessive simple tests\n- Focus on complex logic and core functionality\n\n### 2. **Builder Pattern Testing**\n\n- Every component should have a `test_*_builder` test for coverage of the builder pattern\n- Tests should cover all major configuration options\n- Use method chaining to demonstrate complete API usage\n\n#### Example:\n\n```rust\n#[gpui::test]\nfn test_button_builder(_cx: &mut gpui::TestAppContext) {\n let button = Button::new(\"complex-button\")\n .label(\"Save Changes\")\n .primary()\n .outline()\n .large()\n .tooltip(\"Click to save\")\n .compact()\n .loading(false)\n .disabled(false)\n .selected(false)\n .on_click(|_, _, _| {});\n\n // Assert all key properties\n assert_eq!(button.label, Some(\"Save Changes\".into()));\n assert_eq!(button.variant, ButtonVariant::Primary);\n assert!(button.outline);\n assert_eq!(button.size, Size::Large);\n}\n```\n\n### 3. **Complex Logic Testing**\n\n- Test conditional branching logic\n- Test state transitions and interactions\n- Test edge cases\n\n#### Example:\n\n```rust\n#[gpui::test]\nfn test_button_clickable_logic(_cx: &mut gpui::TestAppContext) {\n // Test behavior under multiple conditions\n let clickable = Button::new(\"test\").on_click(|_, _, _| {});\n assert!(clickable.clickable());\n\n let disabled = Button::new(\"test\").disabled(true).on_click(|_, _, _| {});\n assert!(!disabled.clickable());\n\n let loading = Button::new(\"test\").loading(true).on_click(|_, _, _| {});\n assert!(!loading.clickable());\n}\n```\n\n### 4. **Helper Method Testing**\n\n- Test component helper methods and validation logic\n- Combine related tests into a single function\n\n#### Example:\n\n```rust\n#[gpui::test]\nfn test_button_variant_methods(_cx: &mut gpui::TestAppContext) {\n // Test variant check methods\n assert!(ButtonVariant::Link.is_link());\n assert!(ButtonVariant::Text.is_text());\n assert!(ButtonVariant::Ghost.is_ghost());\n\n // Test related logic\n assert!(ButtonVariant::Link.no_padding());\n assert!(ButtonVariant::Text.no_padding());\n}\n```\n\n## What NOT to Test\n\n### ❌ Anti-patterns to Avoid\n\n1. **Simple getter/setter tests**\n\n```rust\n// ❌ Don't write tests like this\n#[gpui::test]\nfn test_button_with_label(_cx: &mut gpui::TestAppContext) {\n let button = Button::new(\"test\").label(\"Click Me\");\n assert_eq!(button.label, Some(\"Click Me\".into()));\n}\n```\n\n2. **Individual property tests**\n\n```rust\n// ❌ Don't write separate tests for each property\n#[gpui::test]\nfn test_button_disabled(_cx: &mut gpui::TestAppContext) {\n let button = Button::new(\"test\").disabled(true);\n assert!(button.disabled);\n}\n\n#[gpui::test]\nfn test_button_selected(_cx: &mut gpui::TestAppContext) {\n let button = Button::new(\"test\").selected(true);\n assert!(button.selected);\n}\n```\n\n_These should be merged into the builder pattern test_\n\n3. **Individual size/variant tests**\n\n```rust\n// ❌ Don't write separate tests for each size\n#[gpui::test]\nfn test_button_xsmall(_cx: &mut gpui::TestAppContext) {\n let button = Button::new(\"test\").xsmall();\n assert_eq!(button.size, Size::XSmall);\n}\n\n#[gpui::test]\nfn test_button_small(_cx: &mut gpui::TestAppContext) {\n let button = Button::new(\"test\").small();\n assert_eq!(button.size, Size::Small);\n}\n```\n\n## Test File Structure\n\n```rust\n#[cfg(test)]\nmod tests {\n use super::*;\n\n // 1. Builder pattern test (required)\n #[gpui::test]\n fn test_component_builder(_cx: &mut gpui::TestAppContext) {\n // Test complete method chaining\n }\n\n // 2. Complex logic test (if applicable)\n #[gpui::test]\n fn test_component_complex_logic(_cx: &mut gpui::TestAppContext) {\n // Test conditional branches, state transitions, etc.\n }\n\n // 3. Helper method test (if applicable)\n #[gpui::test]\n fn test_component_helper_methods(_cx: &mut gpui::TestAppContext) {\n // Test helper methods\n }\n}\n```\n\n## Test Count Guidelines\n\n| Component Type | Recommended Tests | Notes |\n| ----------------- | ----------------- | -------------------------------- |\n| Simple component | 1-2 tests | Builder + complex logic (if any) |\n| Medium component | 2-3 tests | Builder + logic + helper methods |\n| Complex component | 3-5 tests | Based on actual complexity |\n\n## Real-world Examples\n\n### Button Component (3 tests)\n\n- `test_button_builder` - Complete configuration test\n- `test_button_clickable_logic` - Click logic test\n- `test_button_variant_methods` - Variant method test\n\n### ButtonIcon Component (2 tests)\n\n- `test_button_icon_builder` - Complete configuration test\n- `test_button_icon_variant_types` - Variant type test\n\n### ButtonGroup Component (1 test)\n\n- `test_button_group_builder` - Complete configuration test (covers all important features)\n\n### DropdownButton Component (1 test)\n\n- `test_dropdown_button_builder` - Complete configuration test\n\n### Toggle Component (2 tests)\n\n- `test_toggle_builder` - Toggle configuration test\n- `test_toggle_group_builder` - ToggleGroup configuration test\n\n## GPUI Test Usage\n\n### When to Use `#[gpui::test]`\n\n- When testing UI component rendering\n- When testing window-dependent behavior\n- When testing interactive elements that require event handling\n\n### When NOT to Use `#[gpui::test]`\n\n- For pure logic tests that don't involve rendering\n- For utility function tests\n- For simple data structure tests\n- For validation logic that doesn't require app context\n\n#### Example:\n\n```rust\n// ✅ Use regular Rust test for simple logic\n#[test]\nfn test_button_variant_conversion() {\n let rounded: ButtonRounded = px(5.0).into();\n assert!(matches!(rounded, ButtonRounded::Size(_)));\n}\n\n// ✅ Use gpui::test for component behavior\n#[gpui::test]\nfn test_button_builder(_cx: &mut gpui::TestAppContext) {\n let button = Button::new(\"test\").large();\n assert_eq!(button.size, Size::Large);\n}\n```\n\n## Summary\n\n✅ **DO**:\n\n- Test complete builder patterns\n- Test complex business logic\n- Test conditional branches and state transitions\n- Combine related tests\n- Use regular `#[test]` when GPUI context is not needed\n\n❌ **DON'T**:\n\n- Test simple property setters\n- Write separate tests for each property/size/variant\n- Test obvious functionality\n- Over-fragment tests\n- Use `#[gpui::test]` unnecessarily\n\n**Goal**: Cover the most critical functionality with minimal tests while keeping code clean and maintainable.\n" }, { "path": ".claude/skills/generate-component-documentation/SKILL.md", "content": "---\nname: generate-component-documentation\ndescription: Generate documentation for new components. Use when writing docs, documenting components, or creating component documentation.\n---\n\n## Instructions\n\nWhen generating documentation for a new component:\n\n1. **Follow existing patterns**: Use the documentation styles found in the `docs` folder (examples: `button.md`, `accordion.md`, etc.)\n2. **Reference implementations**: Base the documentation on the same-named story implementation in `crates/story/src/stories`\n3. **API references**: Use markdown `code` blocks with links to docs.rs for component API references when applicable\n\n## Examples\n\nThe generated documentation should include:\n- Component description and purpose\n- Props/API documentation\n- Usage examples\n- Visual examples (if applicable)\n" }, { "path": ".claude/skills/generate-component-story/SKILL.md", "content": "---\nname: generate-component-story\ndescription: Create story examples for components. Use when writing stories, creating examples, or demonstrating component usage.\n---\n\n## Instructions\n\nWhen creating component stories:\n\n1. **Follow existing patterns**: Base stories on the styles found in `crates/story/src/stories` (examples: `tabs_story.rs`, `group_box_story.rs`, etc.)\n2. **Use sections**: Organize the story with `section!` calls for each major part\n3. **Comprehensive coverage**: Include all options, variants, and usage examples of the component\n\n## Examples\n\nA typical story structure includes:\n- Basic usage examples\n- Different variants and states\n- Interactive examples\n- Edge cases and error states\n" }, { "path": ".claude/skills/github-pull-request-description/SKILL.md", "content": "---\nname: github-pull-request-description\ndescription: Write a description to description GitHub Pull Request.\n---\n\n## Description\n\nWe less than 150 words description for a PR changes, including new features, bug fixes, and improvements. And if there have APIs break changes (Only `crates/ui` changes) we should have a section called `## Breaking Changes` to list them clearly.\n\n## Breaking changes description\n\nWhen a pull request introduces breaking changes to a codebase, it's important to clearly communicate these changes to users and developers who rely on the code. A well-written breaking changes description helps ensure that everyone understands what has changed, why it has changed, and how to adapt to the new version.\n\nWe can get the changes from the PR diff and summarize them in a clear and concise manner. Aim to provide a clear APIs changes for users to follow.\n\n### Format\n\nWe pefer the following format for breaking changes descriptions:\n\n1. Use bullet list for each breaking change item.\n2. Each item should have title and a code block showing the old and new usage by use `diff`.\n3. Use `## Breaking Changes` as the section title.\n4. Use english language.\n\n**For example:**\n\n````md\n## Breaking Changes\n\n- Added `id` parameter to `Sidebar::new`.\n\n```diff\n- Sidebar::new()\n+ Sidebar::new(\"sidebar\")\n```\n\n- Removed the `left` and `right` methods; use `side` instead.\n > Default is left.\n\n```diff\n- Sidebar::right()\n+ Sidebar::new(\"sidebar\").side(Side::Right)\n```\n````\n" }, { "path": ".claude/skills/gpui-action/SKILL.md", "content": "---\nname: gpui-action\ndescription: Action definitions and keyboard shortcuts in GPUI. Use when implementing actions, keyboard shortcuts, or key bindings.\n---\n\n## Overview\n\nActions provide declarative keyboard-driven UI interactions in GPUI.\n\n**Key Concepts:**\n- Define actions with `actions!` macro or `#[derive(Action)]`\n- Bind keys with `cx.bind_keys()`\n- Handle with `.on_action()` on elements\n- Context-aware via `key_context()`\n\n## Quick Start\n\n### Simple Actions\n\n```rust\nuse gpui::actions;\n\nactions!(editor, [MoveUp, MoveDown, Save, Quit]);\n\nconst CONTEXT: &str = \"Editor\";\n\npub fn init(cx: &mut App) {\n cx.bind_keys([\n KeyBinding::new(\"up\", MoveUp, Some(CONTEXT)),\n KeyBinding::new(\"down\", MoveDown, Some(CONTEXT)),\n KeyBinding::new(\"cmd-s\", Save, Some(CONTEXT)),\n KeyBinding::new(\"cmd-q\", Quit, Some(CONTEXT)),\n ]);\n}\n\nimpl Render for Editor {\n fn render(&mut self, _: &mut Window, cx: &mut Context) -> impl IntoElement {\n div()\n .key_context(CONTEXT)\n .on_action(cx.listener(Self::move_up))\n .on_action(cx.listener(Self::move_down))\n .on_action(cx.listener(Self::save))\n }\n}\n\nimpl Editor {\n fn move_up(&mut self, _: &MoveUp, cx: &mut Context) {\n // Handle move up\n cx.notify();\n }\n\n fn move_down(&mut self, _: &MoveDown, cx: &mut Context) {\n cx.notify();\n }\n\n fn save(&mut self, _: &Save, cx: &mut Context) {\n // Save logic\n cx.notify();\n }\n}\n```\n\n### Actions with Parameters\n\n```rust\n#[derive(Clone, PartialEq, Action, Deserialize)]\n#[action(namespace = editor)]\npub struct InsertText {\n pub text: String,\n}\n\n#[derive(Action, Clone, PartialEq, Eq, Deserialize)]\n#[action(namespace = editor, no_json)]\npub struct Digit(pub u8);\n\ncx.bind_keys([\n KeyBinding::new(\"0\", Digit(0), Some(CONTEXT)),\n KeyBinding::new(\"1\", Digit(1), Some(CONTEXT)),\n // ...\n]);\n\nimpl Editor {\n fn on_digit(&mut self, action: &Digit, cx: &mut Context) {\n self.insert_digit(action.0, cx);\n }\n}\n```\n\n## Key Formats\n\n```rust\n// Modifiers\n\"cmd-s\" // Command (macOS) / Ctrl (Windows/Linux)\n\"ctrl-c\" // Control\n\"alt-f\" // Alt\n\"shift-tab\" // Shift\n\"cmd-ctrl-f\" // Multiple modifiers\n\n// Keys\n\"a-z\", \"0-9\" // Letters and numbers\n\"f1-f12\" // Function keys\n\"up\", \"down\", \"left\", \"right\"\n\"enter\", \"escape\", \"space\", \"tab\"\n\"backspace\", \"delete\"\n\"-\", \"=\", \"[\", \"]\", etc. // Special characters\n```\n\n## Action Naming\n\nPrefer verb-noun pattern:\n\n```rust\nactions!([\n OpenFile, // ✅ Good\n CloseWindow, // ✅ Good\n ToggleSidebar, // ✅ Good\n Save, // ✅ Good (common exception)\n]);\n```\n\n## Context-Aware Bindings\n\n```rust\nconst EDITOR_CONTEXT: &str = \"Editor\";\nconst MODAL_CONTEXT: &str = \"Modal\";\n\n// Same key, different contexts\ncx.bind_keys([\n KeyBinding::new(\"escape\", CloseModal, Some(MODAL_CONTEXT)),\n KeyBinding::new(\"escape\", ClearSelection, Some(EDITOR_CONTEXT)),\n]);\n\n// Set context on element\ndiv()\n .key_context(EDITOR_CONTEXT)\n .child(editor_content)\n```\n\n## Best Practices\n\n### ✅ Use Contexts\n\n```rust\n// ✅ Good: Context-aware\ndiv()\n .key_context(\"MyComponent\")\n .on_action(cx.listener(Self::handle))\n```\n\n### ✅ Name Actions Clearly\n\n```rust\n// ✅ Good: Clear intent\nactions!([\n SaveDocument,\n CloseTab,\n TogglePreview,\n]);\n```\n\n### ✅ Handle with Listeners\n\n```rust\n// ✅ Good: Proper handler naming\nimpl MyComponent {\n fn on_action_save(&mut self, _: &Save, cx: &mut Context) {\n // Handle save\n cx.notify();\n }\n}\n\ndiv().on_action(cx.listener(Self::on_action_save))\n```\n\n## Reference Documentation\n\n- **Complete Guide**: See [reference.md](references/reference.md)\n - Action definition, keybinding, dispatch\n - Focus-based routing, best practices\n - Performance, accessibility\n" }, { "path": ".claude/skills/gpui-async/SKILL.md", "content": "---\nname: gpui-async\ndescription: Async operations and background tasks in GPUI. Use when working with async, spawn, background tasks, or concurrent operations. Essential for handling async I/O, long-running computations, and coordinating between foreground UI updates and background work.\n---\n\n## Overview\n\nGPUI provides integrated async runtime for foreground UI updates and background computation.\n\n**Key Concepts:**\n\n- **Foreground tasks**: UI thread, can update entities (`cx.spawn`)\n- **Background tasks**: Worker threads, CPU-intensive work (`cx.background_spawn`)\n- All entity updates happen on foreground thread\n\n## Quick Start\n\n### Foreground Tasks (UI Updates)\n\n```rust\nimpl MyComponent {\n fn fetch_data(&mut self, cx: &mut Context) {\n let entity = cx.entity().downgrade();\n\n cx.spawn(async move |cx| {\n // Runs on UI thread, can await and update entities\n let data = fetch_from_api().await;\n\n entity.update(cx, |state, cx| {\n state.data = Some(data);\n cx.notify();\n }).ok();\n }).detach();\n }\n}\n```\n\n### Background Tasks (Heavy Work)\n\n```rust\nimpl MyComponent {\n fn process_file(&mut self, cx: &mut Context) {\n let entity = cx.entity().downgrade();\n\n cx.background_spawn(async move {\n // Runs on background thread, CPU-intensive\n let result = heavy_computation().await;\n result\n })\n .then(cx.spawn(move |result, cx| {\n // Back to foreground to update UI\n entity.update(cx, |state, cx| {\n state.result = result;\n cx.notify();\n }).ok();\n }))\n .detach();\n }\n}\n```\n\n### Task Management\n\n```rust\nstruct MyView {\n _task: Task<()>, // Prefix with _ if stored but not accessed\n}\n\nimpl MyView {\n fn new(cx: &mut Context) -> Self {\n let entity = cx.entity().downgrade();\n\n let _task = cx.spawn(async move |cx| {\n // Task automatically cancelled when dropped\n loop {\n tokio::time::sleep(Duration::from_secs(1)).await;\n entity.update(cx, |state, cx| {\n state.tick();\n cx.notify();\n }).ok();\n }\n });\n\n Self { _task }\n }\n}\n```\n\n## Core Patterns\n\n### 1. Async Data Fetching\n\n```rust\ncx.spawn(async move |cx| {\n let data = fetch_data().await?;\n entity.update(cx, |state, cx| {\n state.data = Some(data);\n cx.notify();\n })?;\n Ok::<_, anyhow::Error>(())\n}).detach();\n```\n\n### 2. Background Computation + UI Update\n\n```rust\ncx.background_spawn(async move {\n heavy_work()\n})\n.then(cx.spawn(move |result, cx| {\n entity.update(cx, |state, cx| {\n state.result = result;\n cx.notify();\n }).ok();\n}))\n.detach();\n```\n\n### 3. Periodic Tasks\n\n```rust\ncx.spawn(async move |cx| {\n loop {\n tokio::time::sleep(Duration::from_secs(5)).await;\n // Update every 5 seconds\n }\n}).detach();\n```\n\n### 4. Task Cancellation\n\nTasks are automatically cancelled when dropped. Store in struct to keep alive.\n\n## Common Pitfalls\n\n### ❌ Don't: Update entities from background tasks\n\n```rust\n// ❌ Wrong: Can't update entities from background thread\ncx.background_spawn(async move {\n entity.update(cx, |state, cx| { // Compile error!\n state.data = data;\n });\n});\n```\n\n### ✅ Do: Use foreground task or chain\n\n```rust\n// ✅ Correct: Chain with foreground task\ncx.background_spawn(async move { data })\n .then(cx.spawn(move |data, cx| {\n entity.update(cx, |state, cx| {\n state.data = data;\n cx.notify();\n }).ok();\n }))\n .detach();\n```\n\n## Reference Documentation\n\n### Complete Guides\n\n- **API Reference**: See [api-reference.md](references/api-reference.md)\n - Task types, spawning methods, contexts\n - Executors, cancellation, error handling\n\n- **Patterns**: See [patterns.md](references/patterns.md)\n - Data fetching, background processing\n - Polling, debouncing, parallel tasks\n - Pattern selection guide\n\n- **Best Practices**: See [best-practices.md](references/best-practices.md)\n - Error handling, cancellation\n - Performance optimization, testing\n - Common pitfalls and solutions\n" }, { "path": ".claude/skills/gpui-context/SKILL.md", "content": "---\nname: gpui-context\ndescription: Context management in GPUI including App, Window, and AsyncApp. Use when working with contexts, entity updates, or window operations. Different context types provide different capabilities for UI rendering, entity management, and async operations.\n---\n\n## Overview\n\nGPUI uses different context types for different scenarios:\n\n**Context Types:**\n- **`App`**: Global app state, entity creation\n- **`Window`**: Window-specific operations, painting, layout\n- **`Context`**: Entity-specific context for component `T`\n- **`AsyncApp`**: Async context for foreground tasks\n- **`AsyncWindowContext`**: Async context with window access\n\n## Quick Start\n\n### Context - Component Context\n\n```rust\nimpl MyComponent {\n fn update_state(&mut self, cx: &mut Context) {\n self.value = 42;\n cx.notify(); // Trigger re-render\n\n // Spawn async task\n cx.spawn(async move |cx| {\n // Async work\n }).detach();\n\n // Get current entity\n let entity = cx.entity();\n }\n}\n```\n\n### App - Global Context\n\n```rust\nfn main() {\n let app = Application::new();\n app.run(|cx: &mut App| {\n // Create entities\n let entity = cx.new(|cx| MyState::default());\n\n // Open windows\n cx.open_window(WindowOptions::default(), |window, cx| {\n cx.new(|cx| Root::new(view, window, cx))\n });\n });\n}\n```\n\n### Window - Window Context\n\n```rust\nimpl Render for MyView {\n fn render(&mut self, window: &mut Window, cx: &mut Context) -> impl IntoElement {\n // Window operations\n let is_focused = window.is_window_focused();\n let bounds = window.bounds();\n\n div().child(\"Content\")\n }\n}\n```\n\n### AsyncApp - Async Context\n\n```rust\ncx.spawn(async move |cx: &mut AsyncApp| {\n let data = fetch_data().await;\n\n entity.update(cx, |state, inner_cx| {\n state.data = data;\n inner_cx.notify();\n }).ok();\n}).detach();\n```\n\n## Common Operations\n\n### Entity Operations\n\n```rust\n// Create entity\nlet entity = cx.new(|cx| MyState::default());\n\n// Update entity\nentity.update(cx, |state, cx| {\n state.value = 42;\n cx.notify();\n});\n\n// Read entity\nlet value = entity.read(cx).value;\n```\n\n### Notifications and Events\n\n```rust\n// Trigger re-render\ncx.notify();\n\n// Emit event\ncx.emit(MyEvent::Updated);\n\n// Observe entity\ncx.observe(&entity, |this, observed, cx| {\n // React to changes\n}).detach();\n\n// Subscribe to events\ncx.subscribe(&entity, |this, source, event, cx| {\n // Handle event\n}).detach();\n```\n\n### Window Operations\n\n```rust\n// Window state\nlet focused = window.is_window_focused();\nlet bounds = window.bounds();\nlet scale = window.scale_factor();\n\n// Close window\nwindow.remove_window();\n```\n\n### Async Operations\n\n```rust\n// Spawn foreground task\ncx.spawn(async move |cx| {\n // Async work with entity access\n}).detach();\n\n// Spawn background task\ncx.background_spawn(async move {\n // Heavy computation\n}).detach();\n```\n\n## Context Hierarchy\n\n```\nApp (Global)\n └─ Window (Per-window)\n └─ Context (Per-component)\n └─ AsyncApp (In async tasks)\n └─ AsyncWindowContext (Async + Window)\n```\n\n## Reference Documentation\n\n- **API Reference**: See [api-reference.md](references/api-reference.md)\n - Complete context API, methods, conversions\n - Entity operations, window operations\n - Async contexts, best practices\n" }, { "path": ".claude/skills/gpui-element/SKILL.md", "content": "---\nname: gpui-element\ndescription: Implementing custom elements using GPUI's low-level Element API (vs. high-level Render/RenderOnce APIs). Use when you need maximum control over layout, prepaint, and paint phases for complex, performance-critical custom UI components that cannot be achieved with Render/RenderOnce traits.\n---\n\n## When to Use\n\nUse the low-level `Element` trait when:\n- Need fine-grained control over layout calculation\n- Building complex, performance-critical components\n- Implementing custom layout algorithms (masonry, circular, etc.)\n- High-level `Render`/`RenderOnce` APIs are insufficient\n\n**Prefer `Render`/`RenderOnce` for:** Simple components, standard layouts, declarative UI\n\n## Quick Start\n\nThe `Element` trait provides direct control over three rendering phases:\n\n```rust\nimpl Element for MyElement {\n type RequestLayoutState = MyLayoutState; // Data passed to later phases\n type PrepaintState = MyPaintState; // Data for painting\n\n fn id(&self) -> Option {\n Some(self.id.clone())\n }\n\n fn source_location(&self) -> Option<&'static std::panic::Location<'static>> {\n None\n }\n\n // Phase 1: Calculate sizes and positions\n fn request_layout(&mut self, .., window: &mut Window, cx: &mut App)\n -> (LayoutId, Self::RequestLayoutState)\n {\n let layout_id = window.request_layout(\n Style { size: size(px(200.), px(100.)), ..default() },\n vec![],\n cx\n );\n (layout_id, MyLayoutState { /* ... */ })\n }\n\n // Phase 2: Create hitboxes, prepare for painting\n fn prepaint(&mut self, .., bounds: Bounds, layout: &mut Self::RequestLayoutState,\n window: &mut Window, cx: &mut App) -> Self::PrepaintState\n {\n let hitbox = window.insert_hitbox(bounds, HitboxBehavior::Normal);\n MyPaintState { hitbox }\n }\n\n // Phase 3: Render and handle interactions\n fn paint(&mut self, .., bounds: Bounds, layout: &mut Self::RequestLayoutState,\n paint_state: &mut Self::PrepaintState, window: &mut Window, cx: &mut App)\n {\n window.paint_quad(paint_quad(bounds, Corners::all(px(4.)), cx.theme().background));\n\n window.on_mouse_event({\n let hitbox = paint_state.hitbox.clone();\n move |event: &MouseDownEvent, phase, window, cx| {\n if hitbox.is_hovered(window) && phase.bubble() {\n // Handle interaction\n cx.stop_propagation();\n }\n }\n });\n }\n}\n\n// Enable element to be used as child\nimpl IntoElement for MyElement {\n type Element = Self;\n fn into_element(self) -> Self::Element { self }\n}\n```\n\n## Core Concepts\n\n### Three-Phase Rendering\n\n1. **request_layout**: Calculate sizes and positions, return layout ID and state\n2. **prepaint**: Create hitboxes, compute final bounds, prepare for painting\n3. **paint**: Render element, set up interactions (mouse events, cursor styles)\n\n### State Flow\n\n```\nRequestLayoutState → PrepaintState → paint\n```\n\nState flows in one direction through associated types, passed as mutable references between phases.\n\n### Key Operations\n\n- **Layout**: `window.request_layout(style, children, cx)` - Create layout node\n- **Hitboxes**: `window.insert_hitbox(bounds, behavior)` - Create interaction area\n- **Painting**: `window.paint_quad(...)` - Render visual content\n- **Events**: `window.on_mouse_event(handler)` - Handle user input\n\n## Reference Documentation\n\n### Complete API Documentation\n- **Element Trait API**: See [api-reference.md](references/api-reference.md)\n - Associated types, methods, parameters, return values\n - Hitbox system, event handling, cursor styles\n\n### Implementation Guides\n- **Examples**: See [examples.md](references/examples.md)\n - Simple text element with highlighting\n - Interactive element with selection\n - Complex element with child management\n\n- **Best Practices**: See [best-practices.md](references/best-practices.md)\n - State management, performance optimization\n - Interaction handling, layout strategies\n - Error handling, testing, common pitfalls\n\n- **Common Patterns**: See [patterns.md](references/patterns.md)\n - Text rendering, container, interactive, composite, scrollable patterns\n - Pattern selection guide\n\n- **Advanced Patterns**: See [advanced-patterns.md](references/advanced-patterns.md)\n - Custom layout algorithms (masonry, circular)\n - Element composition with traits\n - Async updates, memoization, virtual lists\n" }, { "path": ".claude/skills/gpui-element/references/advanced-patterns.md", "content": "# Advanced Element Patterns\n\nAdvanced techniques and patterns for implementing sophisticated GPUI elements.\n\n## Custom Layout Algorithms\n\nImplementing custom layout algorithms not supported by GPUI's built-in layouts.\n\n### Masonry Layout (Pinterest-Style)\n\n```rust\npub struct MasonryLayout {\n id: ElementId,\n columns: usize,\n gap: Pixels,\n children: Vec,\n}\n\nstruct MasonryLayoutState {\n column_layouts: Vec>,\n column_heights: Vec,\n}\n\nstruct MasonryPaintState {\n child_bounds: Vec>,\n}\n\nimpl Element for MasonryLayout {\n type RequestLayoutState = MasonryLayoutState;\n type PrepaintState = MasonryPaintState;\n\n fn id(&self) -> Option {\n Some(self.id.clone())\n }\n\n fn source_location(&self) -> Option<&'static std::panic::Location<'static>> {\n None\n }\n\n fn request_layout(\n &mut self,\n global_id: Option<&GlobalElementId>,\n inspector_id: Option<&InspectorElementId>,\n window: &mut Window,\n cx: &mut App\n ) -> (LayoutId, MasonryLayoutState) {\n // Initialize columns\n let mut columns: Vec> = vec![Vec::new(); self.columns];\n let mut column_heights = vec![px(0.); self.columns];\n\n // Distribute children across columns\n for child in &mut self.children {\n let (child_layout_id, _) = child.request_layout(\n global_id,\n inspector_id,\n window,\n cx\n );\n\n let child_size = window.layout_bounds(child_layout_id).size;\n\n // Find shortest column\n let min_column_idx = column_heights\n .iter()\n .enumerate()\n .min_by(|a, b| a.1.partial_cmp(b.1).unwrap())\n .unwrap()\n .0;\n\n // Add child to shortest column\n columns[min_column_idx].push(child_layout_id);\n column_heights[min_column_idx] += child_size.height + self.gap;\n }\n\n // Calculate total layout size\n let column_width = px(200.); // Fixed column width\n let total_width = column_width * self.columns as f32\n + self.gap * (self.columns - 1) as f32;\n let total_height = column_heights.iter()\n .max_by(|a, b| a.partial_cmp(b).unwrap())\n .copied()\n .unwrap_or(px(0.));\n\n let layout_id = window.request_layout(\n Style {\n size: size(total_width, total_height),\n ..default()\n },\n columns.iter().flatten().copied().collect(),\n cx\n );\n\n (layout_id, MasonryLayoutState {\n column_layouts: columns,\n column_heights,\n })\n }\n\n fn prepaint(\n &mut self,\n global_id: Option<&GlobalElementId>,\n inspector_id: Option<&InspectorElementId>,\n bounds: Bounds,\n layout_state: &mut MasonryLayoutState,\n window: &mut Window,\n cx: &mut App\n ) -> MasonryPaintState {\n let column_width = px(200.);\n let mut child_bounds = Vec::new();\n\n // Position children in columns\n for (col_idx, column) in layout_state.column_layouts.iter().enumerate() {\n let x_offset = bounds.left()\n + (column_width + self.gap) * col_idx as f32;\n let mut y_offset = bounds.top();\n\n for (child_idx, layout_id) in column.iter().enumerate() {\n let child_size = window.layout_bounds(*layout_id).size;\n let child_bound = Bounds::new(\n point(x_offset, y_offset),\n size(column_width, child_size.height)\n );\n\n self.children[child_idx].prepaint(\n global_id,\n inspector_id,\n child_bound,\n window,\n cx\n );\n\n child_bounds.push(child_bound);\n y_offset += child_size.height + self.gap;\n }\n }\n\n MasonryPaintState { child_bounds }\n }\n\n fn paint(\n &mut self,\n global_id: Option<&GlobalElementId>,\n inspector_id: Option<&InspectorElementId>,\n _bounds: Bounds,\n _layout_state: &mut MasonryLayoutState,\n paint_state: &mut MasonryPaintState,\n window: &mut Window,\n cx: &mut App\n ) {\n for (child, bounds) in self.children.iter_mut().zip(&paint_state.child_bounds) {\n child.paint(global_id, inspector_id, *bounds, window, cx);\n }\n }\n}\n```\n\n### Circular Layout\n\n```rust\npub struct CircularLayout {\n id: ElementId,\n radius: Pixels,\n children: Vec,\n}\n\nimpl Element for CircularLayout {\n type RequestLayoutState = Vec;\n type PrepaintState = Vec>;\n\n fn request_layout(\n &mut self,\n global_id: Option<&GlobalElementId>,\n inspector_id: Option<&InspectorElementId>,\n window: &mut Window,\n cx: &mut App\n ) -> (LayoutId, Vec) {\n let child_layouts: Vec<_> = self.children\n .iter_mut()\n .map(|child| child.request_layout(global_id, inspector_id, window, cx).0)\n .collect();\n\n let diameter = self.radius * 2.;\n let layout_id = window.request_layout(\n Style {\n size: size(diameter, diameter),\n ..default()\n },\n child_layouts.clone(),\n cx\n );\n\n (layout_id, child_layouts)\n }\n\n fn prepaint(\n &mut self,\n global_id: Option<&GlobalElementId>,\n inspector_id: Option<&InspectorElementId>,\n bounds: Bounds,\n layout_ids: &mut Vec,\n window: &mut Window,\n cx: &mut App\n ) -> Vec> {\n let center = bounds.center();\n let angle_step = 2.0 * std::f32::consts::PI / self.children.len() as f32;\n\n let mut child_bounds = Vec::new();\n\n for (i, (child, layout_id)) in self.children.iter_mut()\n .zip(layout_ids.iter())\n .enumerate()\n {\n let angle = angle_step * i as f32;\n let child_size = window.layout_bounds(*layout_id).size;\n\n // Position child on circle\n let x = center.x + self.radius * angle.cos() - child_size.width / 2.;\n let y = center.y + self.radius * angle.sin() - child_size.height / 2.;\n\n let child_bound = Bounds::new(point(x, y), child_size);\n\n child.prepaint(global_id, inspector_id, child_bound, window, cx);\n child_bounds.push(child_bound);\n }\n\n child_bounds\n }\n\n fn paint(\n &mut self,\n global_id: Option<&GlobalElementId>,\n inspector_id: Option<&InspectorElementId>,\n _bounds: Bounds,\n _layout_ids: &mut Vec,\n child_bounds: &mut Vec>,\n window: &mut Window,\n cx: &mut App\n ) {\n for (child, bounds) in self.children.iter_mut().zip(child_bounds) {\n child.paint(global_id, inspector_id, *bounds, window, cx);\n }\n }\n}\n```\n\n## Element Composition with Traits\n\nCreate reusable behaviors via traits for element composition.\n\n### Hoverable Trait\n\n```rust\npub trait Hoverable: Element {\n fn on_hover(&mut self, f: F) -> &mut Self\n where\n F: Fn(&mut Window, &mut App) + 'static;\n\n fn on_hover_end(&mut self, f: F) -> &mut Self\n where\n F: Fn(&mut Window, &mut App) + 'static;\n}\n\n// Implementation for custom element\npub struct HoverableElement {\n id: ElementId,\n content: AnyElement,\n hover_handlers: Vec>,\n hover_end_handlers: Vec>,\n was_hovered: bool,\n}\n\nimpl Hoverable for HoverableElement {\n fn on_hover(&mut self, f: F) -> &mut Self\n where\n F: Fn(&mut Window, &mut App) + 'static\n {\n self.hover_handlers.push(Box::new(f));\n self\n }\n\n fn on_hover_end(&mut self, f: F) -> &mut Self\n where\n F: Fn(&mut Window, &mut App) + 'static\n {\n self.hover_end_handlers.push(Box::new(f));\n self\n }\n}\n\nimpl Element for HoverableElement {\n type RequestLayoutState = LayoutId;\n type PrepaintState = Hitbox;\n\n fn paint(\n &mut self,\n _global_id: Option<&GlobalElementId>,\n _inspector_id: Option<&InspectorElementId>,\n bounds: Bounds,\n _layout: &mut LayoutId,\n hitbox: &mut Hitbox,\n window: &mut Window,\n cx: &mut App\n ) {\n let is_hovered = hitbox.is_hovered(window);\n\n // Trigger hover events\n if is_hovered && !self.was_hovered {\n for handler in &self.hover_handlers {\n handler(window, cx);\n }\n } else if !is_hovered && self.was_hovered {\n for handler in &self.hover_end_handlers {\n handler(window, cx);\n }\n }\n\n self.was_hovered = is_hovered;\n\n // Paint content\n self.content.paint(bounds, window, cx);\n }\n\n // ... other methods\n}\n```\n\n### Clickable Trait\n\n```rust\npub trait Clickable: Element {\n fn on_click(&mut self, f: F) -> &mut Self\n where\n F: Fn(&MouseUpEvent, &mut Window, &mut App) + 'static;\n\n fn on_double_click(&mut self, f: F) -> &mut Self\n where\n F: Fn(&MouseUpEvent, &mut Window, &mut App) + 'static;\n}\n\npub struct ClickableElement {\n id: ElementId,\n content: AnyElement,\n click_handlers: Vec>,\n double_click_handlers: Vec>,\n last_click_time: Option,\n}\n\nimpl Clickable for ClickableElement {\n fn on_click(&mut self, f: F) -> &mut Self\n where\n F: Fn(&MouseUpEvent, &mut Window, &mut App) + 'static\n {\n self.click_handlers.push(Box::new(f));\n self\n }\n\n fn on_double_click(&mut self, f: F) -> &mut Self\n where\n F: Fn(&MouseUpEvent, &mut Window, &mut App) + 'static\n {\n self.double_click_handlers.push(Box::new(f));\n self\n }\n}\n```\n\n## Async Element Updates\n\nElements that update based on async operations.\n\n```rust\npub struct AsyncElement {\n id: ElementId,\n state: Entity,\n loading: bool,\n data: Option,\n}\n\npub struct AsyncState {\n loading: bool,\n data: Option,\n}\n\nimpl Element for AsyncElement {\n type RequestLayoutState = ();\n type PrepaintState = Hitbox;\n\n fn paint(\n &mut self,\n _global_id: Option<&GlobalElementId>,\n _inspector_id: Option<&InspectorElementId>,\n bounds: Bounds,\n _layout: &mut (),\n hitbox: &mut Hitbox,\n window: &mut Window,\n cx: &mut App\n ) {\n // Display loading or data\n if self.loading {\n // Paint loading indicator\n self.paint_loading(bounds, window, cx);\n } else if let Some(data) = &self.data {\n // Paint data\n self.paint_data(data, bounds, window, cx);\n }\n\n // Trigger async update on click\n window.on_mouse_event({\n let state = self.state.clone();\n let hitbox = hitbox.clone();\n\n move |event: &MouseUpEvent, phase, window, cx| {\n if hitbox.is_hovered(window) && phase.bubble() {\n // Spawn async task\n cx.spawn({\n let state = state.clone();\n async move {\n // Perform async operation\n let result = fetch_data_async().await;\n\n // Update state on completion\n state.update(cx, |state, cx| {\n state.loading = false;\n state.data = Some(result);\n cx.notify();\n });\n }\n }).detach();\n\n // Set loading state immediately\n state.update(cx, |state, cx| {\n state.loading = true;\n cx.notify();\n });\n\n cx.stop_propagation();\n }\n }\n });\n }\n\n // ... other methods\n}\n\nasync fn fetch_data_async() -> String {\n // Simulate async operation\n tokio::time::sleep(Duration::from_secs(1)).await;\n \"Data loaded!\".to_string()\n}\n```\n\n## Element Memoization\n\nOptimize performance by memoizing expensive element computations.\n\n```rust\npub struct MemoizedElement {\n id: ElementId,\n value: T,\n render_fn: Box AnyElement>,\n cached_element: Option,\n last_value: Option,\n}\n\nimpl MemoizedElement {\n pub fn new(id: ElementId, value: T, render_fn: F) -> Self\n where\n F: Fn(&T) -> AnyElement + 'static,\n {\n Self {\n id,\n value,\n render_fn: Box::new(render_fn),\n cached_element: None,\n last_value: None,\n }\n }\n}\n\nimpl Element for MemoizedElement {\n type RequestLayoutState = LayoutId;\n type PrepaintState = ();\n\n fn id(&self) -> Option {\n Some(self.id.clone())\n }\n\n fn source_location(&self) -> Option<&'static std::panic::Location<'static>> {\n None\n }\n\n fn request_layout(\n &mut self,\n global_id: Option<&GlobalElementId>,\n inspector_id: Option<&InspectorElementId>,\n window: &mut Window,\n cx: &mut App\n ) -> (LayoutId, LayoutId) {\n // Check if value changed\n if self.last_value.as_ref() != Some(&self.value) || self.cached_element.is_none() {\n // Recompute element\n self.cached_element = Some((self.render_fn)(&self.value));\n self.last_value = Some(self.value.clone());\n }\n\n // Request layout for cached element\n let (layout_id, _) = self.cached_element\n .as_mut()\n .unwrap()\n .request_layout(global_id, inspector_id, window, cx);\n\n (layout_id, layout_id)\n }\n\n fn prepaint(\n &mut self,\n global_id: Option<&GlobalElementId>,\n inspector_id: Option<&InspectorElementId>,\n bounds: Bounds,\n _layout_id: &mut LayoutId,\n window: &mut Window,\n cx: &mut App\n ) -> () {\n self.cached_element\n .as_mut()\n .unwrap()\n .prepaint(global_id, inspector_id, bounds, window, cx);\n }\n\n fn paint(\n &mut self,\n global_id: Option<&GlobalElementId>,\n inspector_id: Option<&InspectorElementId>,\n bounds: Bounds,\n _layout_id: &mut LayoutId,\n _: &mut (),\n window: &mut Window,\n cx: &mut App\n ) {\n self.cached_element\n .as_mut()\n .unwrap()\n .paint(global_id, inspector_id, bounds, window, cx);\n }\n}\n\n// Usage\nfn render(&mut self, _window: &mut Window, cx: &mut Context) -> impl IntoElement {\n MemoizedElement::new(\n ElementId::Name(\"memoized\".into()),\n self.expensive_value.clone(),\n |value| {\n // Expensive rendering function only called when value changes\n div().child(format!(\"Computed: {}\", value))\n }\n )\n}\n```\n\n## Virtual List Pattern\n\nEfficiently render large lists by only rendering visible items.\n\n```rust\npub struct VirtualList {\n id: ElementId,\n item_count: usize,\n item_height: Pixels,\n viewport_height: Pixels,\n scroll_offset: Pixels,\n render_item: Box AnyElement>,\n}\n\nstruct VirtualListState {\n visible_range: Range,\n visible_item_layouts: Vec,\n}\n\nimpl Element for VirtualList {\n type RequestLayoutState = VirtualListState;\n type PrepaintState = Hitbox;\n\n fn request_layout(\n &mut self,\n global_id: Option<&GlobalElementId>,\n inspector_id: Option<&InspectorElementId>,\n window: &mut Window,\n cx: &mut App\n ) -> (LayoutId, VirtualListState) {\n // Calculate visible range\n let start_idx = (self.scroll_offset / self.item_height).floor() as usize;\n let end_idx = ((self.scroll_offset + self.viewport_height) / self.item_height)\n .ceil() as usize;\n let visible_range = start_idx..end_idx.min(self.item_count);\n\n // Request layout only for visible items\n let visible_item_layouts: Vec<_> = visible_range.clone()\n .map(|i| {\n let mut item = (self.render_item)(i);\n item.request_layout(global_id, inspector_id, window, cx).0\n })\n .collect();\n\n let total_height = self.item_height * self.item_count as f32;\n let layout_id = window.request_layout(\n Style {\n size: size(relative(1.0), self.viewport_height),\n overflow: Overflow::Hidden,\n ..default()\n },\n visible_item_layouts.clone(),\n cx\n );\n\n (layout_id, VirtualListState {\n visible_range,\n visible_item_layouts,\n })\n }\n\n fn prepaint(\n &mut self,\n _global_id: Option<&GlobalElementId>,\n _inspector_id: Option<&InspectorElementId>,\n bounds: Bounds,\n state: &mut VirtualListState,\n window: &mut Window,\n _cx: &mut App\n ) -> Hitbox {\n // Prepaint visible items at correct positions\n for (i, layout_id) in state.visible_item_layouts.iter().enumerate() {\n let item_idx = state.visible_range.start + i;\n let y = item_idx as f32 * self.item_height - self.scroll_offset;\n let item_bounds = Bounds::new(\n point(bounds.left(), bounds.top() + y),\n size(bounds.width(), self.item_height)\n );\n\n // Prepaint if visible\n if item_bounds.intersects(&bounds) {\n // Prepaint item...\n }\n }\n\n window.insert_hitbox(bounds, HitboxBehavior::Normal)\n }\n\n fn paint(\n &mut self,\n _global_id: Option<&GlobalElementId>,\n _inspector_id: Option<&InspectorElementId>,\n bounds: Bounds,\n state: &mut VirtualListState,\n hitbox: &mut Hitbox,\n window: &mut Window,\n cx: &mut App\n ) {\n // Paint visible items\n for (i, _layout_id) in state.visible_item_layouts.iter().enumerate() {\n let item_idx = state.visible_range.start + i;\n let y = item_idx as f32 * self.item_height - self.scroll_offset;\n let item_bounds = Bounds::new(\n point(bounds.left(), bounds.top() + y),\n size(bounds.width(), self.item_height)\n );\n\n if item_bounds.intersects(&bounds) {\n let mut item = (self.render_item)(item_idx);\n item.paint(item_bounds, window, cx);\n }\n }\n\n // Handle scroll\n window.on_mouse_event({\n let hitbox = hitbox.clone();\n let total_height = self.item_height * self.item_count as f32;\n\n move |event: &ScrollWheelEvent, phase, window, cx| {\n if hitbox.is_hovered(window) && phase.bubble() {\n self.scroll_offset -= event.delta.y;\n self.scroll_offset = self.scroll_offset\n .max(px(0.))\n .min(total_height - self.viewport_height);\n cx.notify();\n cx.stop_propagation();\n }\n }\n });\n }\n}\n\n// Usage: Efficiently render 10,000 items\nlet virtual_list = VirtualList {\n id: ElementId::Name(\"large-list\".into()),\n item_count: 10_000,\n item_height: px(40.),\n viewport_height: px(400.),\n scroll_offset: px(0.),\n render_item: Box::new(|index| {\n div().child(format!(\"Item {}\", index))\n }),\n};\n```\n\nThese advanced patterns enable sophisticated element implementations while maintaining performance and code quality.\n" }, { "path": ".claude/skills/gpui-element/references/api-reference.md", "content": "# Element API Reference\n\nComplete API documentation for GPUI's low-level Element trait.\n\n## Element Trait Structure\n\nThe `Element` trait requires implementing three associated types and five methods:\n\n```rust\npub trait Element: 'static + IntoElement {\n type RequestLayoutState: 'static;\n type PrepaintState: 'static;\n\n fn id(&self) -> Option;\n fn source_location(&self) -> Option<&'static std::panic::Location<'static>>;\n fn request_layout(\n &mut self,\n global_id: Option<&GlobalElementId>,\n inspector_id: Option<&InspectorElementId>,\n window: &mut Window,\n cx: &mut App,\n ) -> (LayoutId, Self::RequestLayoutState);\n fn prepaint(\n &mut self,\n global_id: Option<&GlobalElementId>,\n inspector_id: Option<&InspectorElementId>,\n bounds: Bounds,\n request_layout: &mut Self::RequestLayoutState,\n window: &mut Window,\n cx: &mut App,\n ) -> Self::PrepaintState;\n fn paint(\n &mut self,\n global_id: Option<&GlobalElementId>,\n inspector_id: Option<&InspectorElementId>,\n bounds: Bounds,\n request_layout: &mut Self::RequestLayoutState,\n prepaint: &mut Self::PrepaintState,\n window: &mut Window,\n cx: &mut App,\n );\n}\n```\n\n## Associated Types\n\n### RequestLayoutState\n\nData passed from `request_layout` to `prepaint` and `paint` phases.\n\n**Usage:**\n- Store layout calculations (styled text, child layout IDs)\n- Cache expensive computations\n- Pass child state between phases\n\n**Examples:**\n```rust\n// Simple: no state needed\ntype RequestLayoutState = ();\n\n// Single value\ntype RequestLayoutState = StyledText;\n\n// Multiple values\ntype RequestLayoutState = (StyledText, Vec);\n\n// Complex struct\npub struct MyLayoutState {\n pub styled_text: StyledText,\n pub child_layouts: Vec<(LayoutId, ChildState)>,\n pub computed_bounds: Bounds,\n}\ntype RequestLayoutState = MyLayoutState;\n```\n\n### PrepaintState\n\nData passed from `prepaint` to `paint` phase.\n\n**Usage:**\n- Store hitboxes for interaction\n- Cache visual bounds\n- Store prepaint results\n\n**Examples:**\n```rust\n// Simple: just a hitbox\ntype PrepaintState = Hitbox;\n\n// Optional hitbox\ntype PrepaintState = Option;\n\n// Multiple values\ntype PrepaintState = (Hitbox, Vec>);\n\n// Complex struct\npub struct MyPaintState {\n pub hitbox: Hitbox,\n pub child_bounds: Vec>,\n pub visible_range: Range,\n}\ntype PrepaintState = MyPaintState;\n```\n\n## Methods\n\n### id()\n\nReturns optional unique identifier for debugging and inspection.\n\n```rust\nfn id(&self) -> Option {\n Some(self.id.clone())\n}\n\n// Or if no ID needed\nfn id(&self) -> Option {\n None\n}\n```\n\n### source_location()\n\nReturns source location for debugging. Usually returns `None` unless debugging is needed.\n\n```rust\nfn source_location(&self) -> Option<&'static std::panic::Location<'static>> {\n None\n}\n```\n\n### request_layout()\n\nCalculates sizes and positions for the element tree.\n\n**Parameters:**\n- `global_id`: Global element identifier (optional)\n- `inspector_id`: Inspector element identifier (optional)\n- `window`: Mutable window reference\n- `cx`: Mutable app context\n\n**Returns:**\n- `(LayoutId, Self::RequestLayoutState)`: Layout ID and state for next phases\n\n**Responsibilities:**\n1. Calculate child layouts by calling `child.request_layout()`\n2. Create own layout using `window.request_layout()`\n3. Return layout ID and state to pass to next phases\n\n**Example:**\n```rust\nfn request_layout(\n &mut self,\n global_id: Option<&GlobalElementId>,\n inspector_id: Option<&InspectorElementId>,\n window: &mut Window,\n cx: &mut App,\n) -> (LayoutId, Self::RequestLayoutState) {\n // 1. Calculate child layouts\n let child_layout_id = self.child.request_layout(\n global_id,\n inspector_id,\n window,\n cx\n ).0;\n\n // 2. Create own layout\n let layout_id = window.request_layout(\n Style {\n size: size(px(200.), px(100.)),\n ..default()\n },\n vec![child_layout_id],\n cx\n );\n\n // 3. Return layout ID and state\n (layout_id, MyLayoutState { child_layout_id })\n}\n```\n\n### prepaint()\n\nPrepares for painting by creating hitboxes and computing final bounds.\n\n**Parameters:**\n- `global_id`: Global element identifier (optional)\n- `inspector_id`: Inspector element identifier (optional)\n- `bounds`: Final bounds calculated by layout engine\n- `request_layout`: Mutable reference to layout state\n- `window`: Mutable window reference\n- `cx`: Mutable app context\n\n**Returns:**\n- `Self::PrepaintState`: State for paint phase\n\n**Responsibilities:**\n1. Compute final child bounds based on layout bounds\n2. Call `child.prepaint()` for all children\n3. Create hitboxes using `window.insert_hitbox()`\n4. Return state for paint phase\n\n**Example:**\n```rust\nfn prepaint(\n &mut self,\n global_id: Option<&GlobalElementId>,\n inspector_id: Option<&InspectorElementId>,\n bounds: Bounds,\n request_layout: &mut Self::RequestLayoutState,\n window: &mut Window,\n cx: &mut App,\n) -> Self::PrepaintState {\n // 1. Compute child bounds\n let child_bounds = bounds; // or calculated subset\n\n // 2. Prepaint children\n self.child.prepaint(\n global_id,\n inspector_id,\n child_bounds,\n &mut request_layout.child_state,\n window,\n cx\n );\n\n // 3. Create hitboxes\n let hitbox = window.insert_hitbox(bounds, HitboxBehavior::Normal);\n\n // 4. Return paint state\n MyPaintState { hitbox }\n}\n```\n\n### paint()\n\nRenders the element and handles interactions.\n\n**Parameters:**\n- `global_id`: Global element identifier (optional)\n- `inspector_id`: Inspector element identifier (optional)\n- `bounds`: Final bounds for rendering\n- `request_layout`: Mutable reference to layout state\n- `prepaint`: Mutable reference to prepaint state\n- `window`: Mutable window reference\n- `cx`: Mutable app context\n\n**Responsibilities:**\n1. Paint children first (bottom to top)\n2. Paint own content (backgrounds, borders, etc.)\n3. Set up interactions (mouse events, cursor styles)\n\n**Example:**\n```rust\nfn paint(\n &mut self,\n global_id: Option<&GlobalElementId>,\n inspector_id: Option<&InspectorElementId>,\n bounds: Bounds,\n request_layout: &mut Self::RequestLayoutState,\n prepaint: &mut Self::PrepaintState,\n window: &mut Window,\n cx: &mut App,\n) {\n // 1. Paint children first\n self.child.paint(\n global_id,\n inspector_id,\n child_bounds,\n &mut request_layout.child_state,\n &mut prepaint.child_paint_state,\n window,\n cx\n );\n\n // 2. Paint own content\n window.paint_quad(paint_quad(\n bounds,\n Corners::all(px(4.)),\n cx.theme().background,\n ));\n\n // 3. Set up interactions\n window.on_mouse_event({\n let hitbox = prepaint.hitbox.clone();\n move |event: &MouseDownEvent, phase, window, cx| {\n if hitbox.is_hovered(window) && phase.bubble() {\n // Handle click\n cx.stop_propagation();\n }\n }\n });\n\n window.set_cursor_style(CursorStyle::PointingHand, &prepaint.hitbox);\n}\n```\n\n## IntoElement Integration\n\nElements must also implement `IntoElement` to be used as children:\n\n```rust\nimpl IntoElement for MyElement {\n type Element = Self;\n\n fn into_element(self) -> Self::Element {\n self\n }\n}\n```\n\nThis allows your custom element to be used directly in the element tree:\n\n```rust\ndiv()\n .child(MyElement::new()) // Works because of IntoElement\n```\n\n## Common Parameters\n\n### Global and Inspector IDs\n\nBoth are optional identifiers used for debugging and inspection:\n- `global_id`: Unique identifier across entire app\n- `inspector_id`: Identifier for dev tools/inspector\n\nUsually passed through to children without modification.\n\n### Window and Context\n\n- `window: &mut Window`: Window-specific operations (painting, hitboxes, events)\n- `cx: &mut App`: App-wide operations (spawning tasks, accessing globals)\n\n## Layout System Integration\n\n### window.request_layout()\n\nCreates a layout node with specified style and children:\n\n```rust\nlet layout_id = window.request_layout(\n Style {\n size: size(px(200.), px(100.)),\n flex: Flex::Column,\n gap: px(8.),\n ..default()\n },\n vec![child1_layout_id, child2_layout_id],\n cx\n);\n```\n\n### Bounds\n\nRepresents rectangular region:\n\n```rust\npub struct Bounds {\n pub origin: Point,\n pub size: Size,\n}\n\n// Create bounds\nlet bounds = Bounds::new(\n point(px(10.), px(20.)),\n size(px(100.), px(50.))\n);\n\n// Access properties\nbounds.left() // origin.x\nbounds.top() // origin.y\nbounds.right() // origin.x + size.width\nbounds.bottom() // origin.y + size.height\nbounds.center() // center point\n```\n\n## Hitbox System\n\n### Creating Hitboxes\n\n```rust\n// Normal hitbox (blocks events)\nlet hitbox = window.insert_hitbox(bounds, HitboxBehavior::Normal);\n\n// Transparent hitbox (passes events through)\nlet hitbox = window.insert_hitbox(bounds, HitboxBehavior::Transparent);\n```\n\n### Using Hitboxes\n\n```rust\n// Check if hovered\nif hitbox.is_hovered(window) {\n // ...\n}\n\n// Set cursor style\nwindow.set_cursor_style(CursorStyle::PointingHand, &hitbox);\n\n// Use in event handlers\nwindow.on_mouse_event(move |event, phase, window, cx| {\n if hitbox.is_hovered(window) && phase.bubble() {\n // Handle event\n }\n});\n```\n\n## Event Handling\n\n### Mouse Events\n\n```rust\n// Mouse down\nwindow.on_mouse_event(move |event: &MouseDownEvent, phase, window, cx| {\n if phase.bubble() && bounds.contains(&event.position) {\n // Handle mouse down\n cx.stop_propagation(); // Prevent bubbling\n }\n});\n\n// Mouse up\nwindow.on_mouse_event(move |event: &MouseUpEvent, phase, window, cx| {\n // Handle mouse up\n});\n\n// Mouse move\nwindow.on_mouse_event(move |event: &MouseMoveEvent, phase, window, cx| {\n // Handle mouse move\n});\n\n// Scroll\nwindow.on_mouse_event(move |event: &ScrollWheelEvent, phase, window, cx| {\n // Handle scroll\n});\n```\n\n### Event Phase\n\nEvents go through two phases:\n- **Capture**: Top-down (parent → child)\n- **Bubble**: Bottom-up (child → parent)\n\n```rust\nmove |event, phase, window, cx| {\n if phase.capture() {\n // Handle in capture phase\n } else if phase.bubble() {\n // Handle in bubble phase\n }\n\n cx.stop_propagation(); // Stop event from continuing\n}\n```\n\n## Cursor Styles\n\nAvailable cursor styles:\n\n```rust\nCursorStyle::Arrow\nCursorStyle::IBeam // Text selection\nCursorStyle::PointingHand // Clickable\nCursorStyle::ResizeLeft\nCursorStyle::ResizeRight\nCursorStyle::ResizeUp\nCursorStyle::ResizeDown\nCursorStyle::ResizeLeftRight\nCursorStyle::ResizeUpDown\nCursorStyle::Crosshair\nCursorStyle::OperationNotAllowed\n```\n\nUsage:\n\n```rust\nwindow.set_cursor_style(CursorStyle::PointingHand, &hitbox);\n```\n" }, { "path": ".claude/skills/gpui-element/references/best-practices.md", "content": "# Element Best Practices\n\nGuidelines and best practices for implementing high-quality GPUI elements.\n\n## State Management\n\n### Using Associated Types Effectively\n\n**Good:** Use associated types to pass meaningful data between phases\n\n```rust\n// Good: Structured state with type safety\ntype RequestLayoutState = (StyledText, Vec);\ntype PrepaintState = (Hitbox, Vec);\n```\n\n**Bad:** Using empty state when you need data\n\n```rust\n// Bad: No state when you need to pass data\ntype RequestLayoutState = ();\ntype PrepaintState = ();\n// Now you can't pass layout info to paint phase!\n```\n\n### Managing Complex State\n\nFor elements with complex state, create dedicated structs:\n\n```rust\n// Good: Dedicated struct for complex state\npub struct TextElementState {\n pub styled_text: StyledText,\n pub text_layout: TextLayout,\n pub child_states: Vec,\n}\n\ntype RequestLayoutState = TextElementState;\n```\n\n**Benefits:**\n- Clear documentation of state structure\n- Easy to extend\n- Type-safe access\n\n### State Lifecycle\n\n**Golden Rule:** State flows in one direction through the phases\n\n```\nrequest_layout → RequestLayoutState →\nprepaint → PrepaintState →\npaint\n```\n\n**Don't:**\n- Store state in the element struct that should be in associated types\n- Try to mutate element state in paint phase (use `cx.notify()` to schedule re-render)\n- Pass mutable references across phase boundaries\n\n## Performance Considerations\n\n### Minimize Allocations in Paint Phase\n\n**Critical:** Paint phase is called every frame during animations. Minimize allocations.\n\n**Good:** Pre-allocate in `request_layout` or `prepaint`\n\n```rust\nimpl Element for MyElement {\n fn request_layout(&mut self, .., window: &mut Window, cx: &mut App)\n -> (LayoutId, Vec)\n {\n // Allocate once during layout\n let styled_texts = self.children\n .iter()\n .map(|child| StyledText::new(child.text.clone()))\n .collect();\n\n (layout_id, styled_texts)\n }\n\n fn paint(&mut self, .., styled_texts: &mut Vec, ..) {\n // Just use pre-allocated styled_texts\n for text in styled_texts {\n text.paint(..);\n }\n }\n}\n```\n\n**Bad:** Allocate in `paint` phase\n\n```rust\nfn paint(&mut self, ..) {\n // Bad: Allocation in paint phase!\n let styled_texts: Vec<_> = self.children\n .iter()\n .map(|child| StyledText::new(child.text.clone()))\n .collect();\n}\n```\n\n### Cache Expensive Computations\n\nUse memoization for expensive operations:\n\n```rust\npub struct CachedElement {\n // Cache key\n last_text: Option,\n last_width: Option,\n\n // Cached result\n cached_layout: Option,\n}\n\nimpl Element for CachedElement {\n fn request_layout(&mut self, .., window: &mut Window, cx: &mut App)\n -> (LayoutId, TextLayout)\n {\n let current_width = window.bounds().width();\n\n // Check if cache is valid\n if self.last_text.as_ref() != Some(&self.text)\n || self.last_width != Some(current_width)\n || self.cached_layout.is_none()\n {\n // Recompute expensive layout\n self.cached_layout = Some(self.compute_text_layout(current_width));\n self.last_text = Some(self.text.clone());\n self.last_width = Some(current_width);\n }\n\n // Use cached layout\n let layout = self.cached_layout.as_ref().unwrap();\n (layout_id, layout.clone())\n }\n}\n```\n\n### Lazy Child Rendering\n\nOnly render visible children in scrollable containers:\n\n```rust\nfn paint(&mut self, .., bounds: Bounds, paint_state: &mut Self::PrepaintState, ..) {\n for (i, child) in self.children.iter_mut().enumerate() {\n let child_bounds = paint_state.child_bounds[i];\n\n // Only paint visible children\n if self.is_visible(&child_bounds, &bounds) {\n child.paint(..);\n }\n }\n}\n\nfn is_visible(&self, child_bounds: &Bounds, container_bounds: &Bounds) -> bool {\n child_bounds.bottom() >= container_bounds.top() &&\n child_bounds.top() <= container_bounds.bottom()\n}\n```\n\n## Interaction Handling\n\n### Proper Event Bubbling\n\nAlways check phase and bounds before handling events:\n\n```rust\nfn paint(&mut self, .., window: &mut Window, cx: &mut App) {\n window.on_mouse_event({\n let hitbox = self.hitbox.clone();\n move |event: &MouseDownEvent, phase, window, cx| {\n // Check phase first\n if !phase.bubble() {\n return;\n }\n\n // Check if event is within bounds\n if !hitbox.is_hovered(window) {\n return;\n }\n\n // Handle event\n self.handle_click(event);\n\n // Stop propagation if handled\n cx.stop_propagation();\n }\n });\n}\n```\n\n**Don't forget:**\n- Check `phase.bubble()` or `phase.capture()` as appropriate\n- Check hitbox hover state or bounds\n- Call `cx.stop_propagation()` if you handle the event\n\n### Hitbox Management\n\nCreate hitboxes in `prepaint` phase, not `paint`:\n\n**Good:**\n\n```rust\nfn prepaint(&mut self, .., bounds: Bounds, window: &mut Window, ..) -> Hitbox {\n // Create hitbox in prepaint\n window.insert_hitbox(bounds, HitboxBehavior::Normal)\n}\n\nfn paint(&mut self, .., hitbox: &mut Hitbox, window: &mut Window, ..) {\n // Use hitbox in paint\n window.set_cursor_style(CursorStyle::PointingHand, hitbox);\n}\n```\n\n**Hitbox Behaviors:**\n\n```rust\n// Normal: Blocks events from passing through\nHitboxBehavior::Normal\n\n// Transparent: Allows events to pass through to elements below\nHitboxBehavior::Transparent\n```\n\n### Cursor Style Guidelines\n\nSet appropriate cursor styles for interactivity cues:\n\n```rust\n// Text selection\nwindow.set_cursor_style(CursorStyle::IBeam, &hitbox);\n\n// Clickable elements (desktop convention: use default, not pointing hand)\nwindow.set_cursor_style(CursorStyle::Arrow, &hitbox);\n\n// Links (web convention: use pointing hand)\nwindow.set_cursor_style(CursorStyle::PointingHand, &hitbox);\n\n// Resizable edges\nwindow.set_cursor_style(CursorStyle::ResizeLeftRight, &hitbox);\n```\n\n**Desktop vs Web Convention:**\n- Desktop apps: Use `Arrow` for buttons\n- Web apps: Use `PointingHand` for links only\n\n## Layout Strategies\n\n### Fixed Size Elements\n\nFor elements with known, unchanging size:\n\n```rust\nfn request_layout(&mut self, .., window: &mut Window, cx: &mut App) -> (LayoutId, ()) {\n let layout_id = window.request_layout(\n Style {\n size: size(px(200.), px(100.)),\n ..default()\n },\n vec![], // No children\n cx\n );\n (layout_id, ())\n}\n```\n\n### Content-Based Sizing\n\nFor elements sized by their content:\n\n```rust\nfn request_layout(&mut self, .., window: &mut Window, cx: &mut App)\n -> (LayoutId, Size)\n{\n // Measure content\n let text_bounds = self.measure_text(window);\n let padding = px(16.);\n\n let layout_id = window.request_layout(\n Style {\n size: size(\n text_bounds.width() + padding * 2.,\n text_bounds.height() + padding * 2.,\n ),\n ..default()\n },\n vec![],\n cx\n );\n\n (layout_id, text_bounds)\n}\n```\n\n### Flexible Layouts\n\nFor elements that adapt to available space:\n\n```rust\nfn request_layout(&mut self, .., window: &mut Window, cx: &mut App)\n -> (LayoutId, Vec)\n{\n let mut child_layout_ids = Vec::new();\n\n for child in &mut self.children {\n let (layout_id, _) = child.request_layout(window, cx);\n child_layout_ids.push(layout_id);\n }\n\n let layout_id = window.request_layout(\n Style {\n flex_direction: FlexDirection::Row,\n gap: px(8.),\n size: Size {\n width: relative(1.0), // Fill parent width\n height: auto(), // Auto height\n },\n ..default()\n },\n child_layout_ids.clone(),\n cx\n );\n\n (layout_id, child_layout_ids)\n}\n```\n\n## Error Handling\n\n### Graceful Degradation\n\nHandle errors gracefully, don't panic:\n\n```rust\nfn request_layout(&mut self, .., window: &mut Window, cx: &mut App)\n -> (LayoutId, Option)\n{\n // Try to create styled text\n match StyledText::new(self.text.clone()).request_layout(None, None, window, cx) {\n Ok((layout_id, text_layout)) => {\n (layout_id, Some(text_layout))\n }\n Err(e) => {\n // Log error\n eprintln!(\"Failed to layout text: {}\", e);\n\n // Fallback to simple text\n let fallback_text = StyledText::new(\"(Error loading text)\".into());\n let (layout_id, _) = fallback_text.request_layout(None, None, window, cx);\n (layout_id, None)\n }\n }\n}\n```\n\n### Defensive Bounds Checking\n\nAlways validate bounds and indices:\n\n```rust\nfn paint_selection(&self, selection: &Selection, text_layout: &TextLayout, ..) {\n // Validate selection bounds\n let start = selection.start.min(self.text.len());\n let end = selection.end.min(self.text.len());\n\n if start >= end {\n return; // Invalid selection\n }\n\n let rects = text_layout.rects_for_range(start..end);\n // Paint selection...\n}\n```\n\n## Testing Element Implementations\n\n### Layout Tests\n\nTest that layout calculations are correct:\n\n```rust\n#[cfg(test)]\nmod tests {\n use super::*;\n use gpui::TestAppContext;\n\n #[gpui::test]\n fn test_element_layout(cx: &mut TestAppContext) {\n cx.update(|cx| {\n let mut window = cx.open_window(Default::default(), |_, _| ()).unwrap();\n\n window.update(cx, |window, cx| {\n let mut element = MyElement::new();\n let (layout_id, layout_state) = element.request_layout(\n None,\n None,\n window,\n cx\n );\n\n // Assert layout properties\n let bounds = window.layout_bounds(layout_id);\n assert_eq!(bounds.size.width, px(200.));\n assert_eq!(bounds.size.height, px(100.));\n });\n });\n }\n}\n```\n\n### Interaction Tests\n\nTest that interactions work correctly:\n\n```rust\n#[gpui::test]\nfn test_element_click(cx: &mut TestAppContext) {\n cx.update(|cx| {\n let mut window = cx.open_window(Default::default(), |_, cx| {\n cx.new(|_| MyElement::new())\n }).unwrap();\n\n window.update(cx, |window, cx| {\n let view = window.root_view().unwrap();\n\n // Simulate click\n let position = point(px(10.), px(10.));\n window.dispatch_event(MouseDownEvent {\n position,\n button: MouseButton::Left,\n modifiers: Modifiers::default(),\n });\n\n // Assert element responded\n view.read(cx).assert_clicked();\n });\n });\n}\n```\n\n## Common Pitfalls\n\n### ❌ Storing Layout State in Element Struct\n\n**Bad:**\n\n```rust\npub struct MyElement {\n id: ElementId,\n // Bad: This should be in RequestLayoutState\n cached_layout: Option,\n}\n```\n\n**Good:**\n\n```rust\npub struct MyElement {\n id: ElementId,\n text: SharedString,\n}\n\ntype RequestLayoutState = TextLayout; // Good: State in associated type\n```\n\n### ❌ Mutating Element in Paint Phase\n\n**Bad:**\n\n```rust\nfn paint(&mut self, ..) {\n self.counter += 1; // Bad: Mutating element in paint\n}\n```\n\n**Good:**\n\n```rust\nfn paint(&mut self, .., window: &mut Window, cx: &mut App) {\n window.on_mouse_event(move |event, phase, window, cx| {\n if phase.bubble() {\n self.counter += 1;\n cx.notify(); // Schedule re-render\n }\n });\n}\n```\n\n### ❌ Creating Hitboxes in Paint Phase\n\n**Bad:**\n\n```rust\nfn paint(&mut self, .., bounds: Bounds, window: &mut Window, ..) {\n // Bad: Creating hitbox in paint\n let hitbox = window.insert_hitbox(bounds, HitboxBehavior::Normal);\n}\n```\n\n**Good:**\n\n```rust\nfn prepaint(&mut self, .., bounds: Bounds, window: &mut Window, ..) -> Hitbox {\n // Good: Creating hitbox in prepaint\n window.insert_hitbox(bounds, HitboxBehavior::Normal)\n}\n```\n\n### ❌ Ignoring Event Phase\n\n**Bad:**\n\n```rust\nwindow.on_mouse_event(move |event, phase, window, cx| {\n // Bad: Not checking phase\n self.handle_click(event);\n});\n```\n\n**Good:**\n\n```rust\nwindow.on_mouse_event(move |event, phase, window, cx| {\n // Good: Checking phase\n if !phase.bubble() {\n return;\n }\n self.handle_click(event);\n});\n```\n\n## Performance Checklist\n\nBefore shipping an element implementation, verify:\n\n- [ ] No allocations in `paint` phase (except event handlers)\n- [ ] Expensive computations are cached/memoized\n- [ ] Only visible children are rendered in scrollable containers\n- [ ] Hitboxes created in `prepaint`, not `paint`\n- [ ] Event handlers check phase and bounds\n- [ ] Layout state is passed through associated types, not stored in element\n- [ ] Element implements proper error handling with fallbacks\n- [ ] Tests cover layout calculations and interactions\n" }, { "path": ".claude/skills/gpui-element/references/examples.md", "content": "# Element Implementation Examples\n\nComplete examples of implementing custom elements for various scenarios.\n\n## Table of Contents\n\n1. [Simple Text Element](#simple-text-element)\n2. [Interactive Element with Selection](#interactive-element-with-selection)\n3. [Complex Element with Child Management](#complex-element-with-child-management)\n\n## Simple Text Element\n\nA basic text element with syntax highlighting support.\n\n```rust\npub struct SimpleText {\n id: ElementId,\n text: SharedString,\n highlights: Vec<(Range, HighlightStyle)>,\n}\n\nimpl IntoElement for SimpleText {\n type Element = Self;\n\n fn into_element(self) -> Self::Element {\n self\n }\n}\n\nimpl Element for SimpleText {\n type RequestLayoutState = StyledText;\n type PrepaintState = Hitbox;\n\n fn id(&self) -> Option {\n Some(self.id.clone())\n }\n\n fn source_location(&self) -> Option<&'static std::panic::Location<'static>> {\n None\n }\n\n fn request_layout(\n &mut self,\n global_id: Option<&GlobalElementId>,\n inspector_id: Option<&InspectorElementId>,\n window: &mut Window,\n cx: &mut App\n ) -> (LayoutId, Self::RequestLayoutState) {\n // Create styled text with highlights\n let mut runs = Vec::new();\n let mut ix = 0;\n\n for (range, highlight) in &self.highlights {\n // Add unstyled text before highlight\n if ix < range.start {\n runs.push(window.text_style().to_run(range.start - ix));\n }\n\n // Add highlighted text\n runs.push(\n window.text_style()\n .highlight(*highlight)\n .to_run(range.len())\n );\n ix = range.end;\n }\n\n // Add remaining unstyled text\n if ix < self.text.len() {\n runs.push(window.text_style().to_run(self.text.len() - ix));\n }\n\n let styled_text = StyledText::new(self.text.clone()).with_runs(runs);\n let (layout_id, _) = styled_text.request_layout(\n global_id,\n inspector_id,\n window,\n cx\n );\n\n (layout_id, styled_text)\n }\n\n fn prepaint(\n &mut self,\n global_id: Option<&GlobalElementId>,\n inspector_id: Option<&InspectorElementId>,\n bounds: Bounds,\n styled_text: &mut Self::RequestLayoutState,\n window: &mut Window,\n cx: &mut App\n ) -> Self::PrepaintState {\n // Prepaint the styled text\n styled_text.prepaint(\n global_id,\n inspector_id,\n bounds,\n &mut (),\n window,\n cx\n );\n\n // Create hitbox for interaction\n let hitbox = window.insert_hitbox(bounds, HitboxBehavior::Normal);\n hitbox\n }\n\n fn paint(\n &mut self,\n global_id: Option<&GlobalElementId>,\n inspector_id: Option<&InspectorElementId>,\n bounds: Bounds,\n styled_text: &mut Self::RequestLayoutState,\n hitbox: &mut Self::PrepaintState,\n window: &mut Window,\n cx: &mut App\n ) {\n // Paint the styled text\n styled_text.paint(\n global_id,\n inspector_id,\n bounds,\n &mut (),\n &mut (),\n window,\n cx\n );\n\n // Set cursor style for text\n window.set_cursor_style(CursorStyle::IBeam, hitbox);\n }\n}\n```\n\n## Interactive Element with Selection\n\nA text element that supports text selection via mouse interaction.\n\n```rust\n#[derive(Clone)]\npub struct Selection {\n pub start: usize,\n pub end: usize,\n}\n\npub struct SelectableText {\n id: ElementId,\n text: SharedString,\n selectable: bool,\n selection: Option,\n}\n\nimpl IntoElement for SelectableText {\n type Element = Self;\n\n fn into_element(self) -> Self::Element {\n self\n }\n}\n\nimpl Element for SelectableText {\n type RequestLayoutState = TextLayout;\n type PrepaintState = Option;\n\n fn id(&self) -> Option {\n Some(self.id.clone())\n }\n\n fn source_location(&self) -> Option<&'static std::panic::Location<'static>> {\n None\n }\n\n fn request_layout(\n &mut self,\n global_id: Option<&GlobalElementId>,\n inspector_id: Option<&InspectorElementId>,\n window: &mut Window,\n cx: &mut App\n ) -> (LayoutId, Self::RequestLayoutState) {\n let styled_text = StyledText::new(self.text.clone());\n let (layout_id, _) = styled_text.request_layout(\n global_id,\n inspector_id,\n window,\n cx\n );\n\n // Extract text layout for selection painting\n let text_layout = styled_text.layout().clone();\n\n (layout_id, text_layout)\n }\n\n fn prepaint(\n &mut self,\n _global_id: Option<&GlobalElementId>,\n _inspector_id: Option<&InspectorElementId>,\n bounds: Bounds,\n _text_layout: &mut Self::RequestLayoutState,\n window: &mut Window,\n _cx: &mut App\n ) -> Self::PrepaintState {\n // Only create hitbox if selectable\n if self.selectable {\n Some(window.insert_hitbox(bounds, HitboxBehavior::Normal))\n } else {\n None\n }\n }\n\n fn paint(\n &mut self,\n global_id: Option<&GlobalElementId>,\n inspector_id: Option<&InspectorElementId>,\n bounds: Bounds,\n text_layout: &mut Self::RequestLayoutState,\n hitbox: &mut Self::PrepaintState,\n window: &mut Window,\n cx: &mut App\n ) {\n // Paint text\n let styled_text = StyledText::new(self.text.clone());\n styled_text.paint(\n global_id,\n inspector_id,\n bounds,\n &mut (),\n &mut (),\n window,\n cx\n );\n\n // Paint selection if any\n if let Some(selection) = &self.selection {\n Self::paint_selection(selection, text_layout, &bounds, window, cx);\n }\n\n // Handle mouse events for selection\n if let Some(hitbox) = hitbox {\n window.set_cursor_style(CursorStyle::IBeam, hitbox);\n\n // Mouse down to start selection\n window.on_mouse_event({\n let bounds = bounds.clone();\n move |event: &MouseDownEvent, phase, window, cx| {\n if bounds.contains(&event.position) && phase.bubble() {\n // Start selection at mouse position\n let char_index = Self::position_to_index(\n event.position,\n &bounds,\n text_layout\n );\n self.selection = Some(Selection {\n start: char_index,\n end: char_index,\n });\n cx.notify();\n cx.stop_propagation();\n }\n }\n });\n\n // Mouse drag to extend selection\n window.on_mouse_event({\n let bounds = bounds.clone();\n move |event: &MouseMoveEvent, phase, window, cx| {\n if let Some(selection) = &mut self.selection {\n if phase.bubble() {\n let char_index = Self::position_to_index(\n event.position,\n &bounds,\n text_layout\n );\n selection.end = char_index;\n cx.notify();\n }\n }\n }\n });\n }\n }\n}\n\nimpl SelectableText {\n fn paint_selection(\n selection: &Selection,\n text_layout: &TextLayout,\n bounds: &Bounds,\n window: &mut Window,\n cx: &mut App\n ) {\n // Calculate selection bounds from text layout\n let selection_rects = text_layout.rects_for_range(\n selection.start..selection.end\n );\n\n // Paint selection background\n for rect in selection_rects {\n window.paint_quad(paint_quad(\n Bounds::new(\n point(bounds.left() + rect.origin.x, bounds.top() + rect.origin.y),\n rect.size\n ),\n Corners::default(),\n cx.theme().selection_background,\n ));\n }\n }\n\n fn position_to_index(\n position: Point,\n bounds: &Bounds,\n text_layout: &TextLayout\n ) -> usize {\n // Convert screen position to character index\n let relative_pos = point(\n position.x - bounds.left(),\n position.y - bounds.top()\n );\n text_layout.index_for_position(relative_pos)\n }\n}\n```\n\n## Complex Element with Child Management\n\nA container element that manages multiple children with scrolling support.\n\n```rust\npub struct ComplexElement {\n id: ElementId,\n children: Vec>>,\n scrollable: bool,\n scroll_offset: Point,\n}\n\nstruct ComplexLayoutState {\n child_layouts: Vec,\n total_height: Pixels,\n}\n\nstruct ComplexPaintState {\n child_bounds: Vec>,\n hitbox: Hitbox,\n}\n\nimpl IntoElement for ComplexElement {\n type Element = Self;\n\n fn into_element(self) -> Self::Element {\n self\n }\n}\n\nimpl Element for ComplexElement {\n type RequestLayoutState = ComplexLayoutState;\n type PrepaintState = ComplexPaintState;\n\n fn id(&self) -> Option {\n Some(self.id.clone())\n }\n\n fn source_location(&self) -> Option<&'static std::panic::Location<'static>> {\n None\n }\n\n fn request_layout(\n &mut self,\n global_id: Option<&GlobalElementId>,\n inspector_id: Option<&InspectorElementId>,\n window: &mut Window,\n cx: &mut App\n ) -> (LayoutId, Self::RequestLayoutState) {\n let mut child_layouts = Vec::new();\n let mut total_height = px(0.);\n\n // Request layout for all children\n for child in &mut self.children {\n let (child_layout_id, _) = child.request_layout(\n global_id,\n inspector_id,\n window,\n cx\n );\n child_layouts.push(child_layout_id);\n\n // Get child size from layout\n let child_size = window.layout_bounds(child_layout_id).size();\n total_height += child_size.height;\n }\n\n // Create container layout\n let layout_id = window.request_layout(\n Style {\n flex_direction: FlexDirection::Column,\n gap: px(8.),\n size: Size {\n width: relative(1.0),\n height: if self.scrollable {\n // Fixed height for scrollable\n px(400.)\n } else {\n // Auto height for non-scrollable\n total_height\n },\n },\n ..default()\n },\n child_layouts.clone(),\n cx\n );\n\n (layout_id, ComplexLayoutState {\n child_layouts,\n total_height,\n })\n }\n\n fn prepaint(\n &mut self,\n global_id: Option<&GlobalElementId>,\n inspector_id: Option<&InspectorElementId>,\n bounds: Bounds,\n layout_state: &mut Self::RequestLayoutState,\n window: &mut Window,\n cx: &mut App\n ) -> Self::PrepaintState {\n let mut child_bounds = Vec::new();\n let mut y_offset = self.scroll_offset.y;\n\n // Calculate child bounds and prepaint children\n for (child, layout_id) in self.children.iter_mut()\n .zip(&layout_state.child_layouts)\n {\n let child_size = window.layout_bounds(*layout_id).size();\n let child_bound = Bounds::new(\n point(bounds.left(), bounds.top() + y_offset),\n child_size\n );\n\n // Only prepaint visible children\n if self.is_visible(&child_bound, &bounds) {\n child.prepaint(\n global_id,\n inspector_id,\n child_bound,\n &mut (),\n window,\n cx\n );\n }\n\n child_bounds.push(child_bound);\n y_offset += child_size.height + px(8.); // gap\n }\n\n let hitbox = window.insert_hitbox(bounds, HitboxBehavior::Normal);\n\n ComplexPaintState {\n child_bounds,\n hitbox,\n }\n }\n\n fn paint(\n &mut self,\n global_id: Option<&GlobalElementId>,\n inspector_id: Option<&InspectorElementId>,\n bounds: Bounds,\n layout_state: &mut Self::RequestLayoutState,\n paint_state: &mut Self::PrepaintState,\n window: &mut Window,\n cx: &mut App\n ) {\n // Paint background\n window.paint_quad(paint_quad(\n bounds,\n Corners::all(px(4.)),\n cx.theme().background,\n ));\n\n // Paint visible children only\n for (i, child) in self.children.iter_mut().enumerate() {\n let child_bounds = paint_state.child_bounds[i];\n\n if self.is_visible(&child_bounds, &bounds) {\n child.paint(\n global_id,\n inspector_id,\n child_bounds,\n &mut (),\n &mut (),\n window,\n cx\n );\n }\n }\n\n // Paint scrollbar if scrollable\n if self.scrollable {\n self.paint_scrollbar(bounds, layout_state, window, cx);\n }\n\n // Handle scroll events\n if self.scrollable {\n window.on_mouse_event({\n let hitbox = paint_state.hitbox.clone();\n let total_height = layout_state.total_height;\n let visible_height = bounds.size.height;\n\n move |event: &ScrollWheelEvent, phase, window, cx| {\n if hitbox.is_hovered(window) && phase.bubble() {\n // Update scroll offset\n self.scroll_offset.y -= event.delta.y;\n\n // Clamp scroll offset\n let max_scroll = (total_height - visible_height).max(px(0.));\n self.scroll_offset.y = self.scroll_offset.y\n .max(px(0.))\n .min(max_scroll);\n\n cx.notify();\n cx.stop_propagation();\n }\n }\n });\n }\n }\n}\n\nimpl ComplexElement {\n fn is_visible(&self, child_bounds: &Bounds, container_bounds: &Bounds) -> bool {\n // Check if child is within visible area\n child_bounds.bottom() >= container_bounds.top() &&\n child_bounds.top() <= container_bounds.bottom()\n }\n\n fn paint_scrollbar(\n &self,\n bounds: Bounds,\n layout_state: &ComplexLayoutState,\n window: &mut Window,\n cx: &mut App\n ) {\n let scrollbar_width = px(8.);\n let visible_height = bounds.size.height;\n let total_height = layout_state.total_height;\n\n if total_height <= visible_height {\n return; // No need for scrollbar\n }\n\n // Calculate scrollbar position and size\n let scroll_ratio = self.scroll_offset.y / (total_height - visible_height);\n let thumb_height = (visible_height / total_height) * visible_height;\n let thumb_y = scroll_ratio * (visible_height - thumb_height);\n\n // Paint scrollbar track\n let track_bounds = Bounds::new(\n point(bounds.right() - scrollbar_width, bounds.top()),\n size(scrollbar_width, visible_height)\n );\n window.paint_quad(paint_quad(\n track_bounds,\n Corners::default(),\n cx.theme().scrollbar_track,\n ));\n\n // Paint scrollbar thumb\n let thumb_bounds = Bounds::new(\n point(bounds.right() - scrollbar_width, bounds.top() + thumb_y),\n size(scrollbar_width, thumb_height)\n );\n window.paint_quad(paint_quad(\n thumb_bounds,\n Corners::all(px(4.)),\n cx.theme().scrollbar_thumb,\n ));\n }\n}\n```\n\n## Usage Examples\n\n### Using SimpleText\n\n```rust\nfn render(&mut self, _window: &mut Window, cx: &mut Context) -> impl IntoElement {\n div()\n .child(SimpleText {\n id: ElementId::Name(\"code-text\".into()),\n text: \"fn main() { println!(\\\"Hello\\\"); }\".into(),\n highlights: vec![\n (0..2, HighlightStyle::keyword()),\n (3..7, HighlightStyle::function()),\n ],\n })\n}\n```\n\n### Using SelectableText\n\n```rust\nfn render(&mut self, _window: &mut Window, cx: &mut Context) -> impl IntoElement {\n div()\n .child(SelectableText {\n id: ElementId::Name(\"selectable-text\".into()),\n text: \"Select this text with your mouse\".into(),\n selectable: true,\n selection: self.current_selection.clone(),\n })\n}\n```\n\n### Using ComplexElement\n\n```rust\nfn render(&mut self, _window: &mut Window, cx: &mut Context) -> impl IntoElement {\n let children: Vec>> = self.items\n .iter()\n .map(|item| Box::new(div().child(item.name.clone())) as Box<_>)\n .collect();\n\n div()\n .child(ComplexElement {\n id: ElementId::Name(\"scrollable-list\".into()),\n children,\n scrollable: true,\n scroll_offset: self.scroll_offset,\n })\n}\n```\n" }, { "path": ".claude/skills/gpui-element/references/patterns.md", "content": "# Common Element Patterns\n\nReusable patterns for implementing common element types in GPUI.\n\n## Text Rendering Elements\n\nElements that display and manipulate text content.\n\n### Pattern Characteristics\n\n- Use `StyledText` for text layout and rendering\n- Handle text selection in `paint` phase with hitbox interaction\n- Create hitboxes for text interaction in `prepaint`\n- Support text highlighting and custom styling via runs\n\n### Implementation Template\n\n```rust\npub struct TextElement {\n id: ElementId,\n text: SharedString,\n style: TextStyle,\n}\n\nimpl Element for TextElement {\n type RequestLayoutState = StyledText;\n type PrepaintState = Hitbox;\n\n fn request_layout(&mut self, .., window: &mut Window, cx: &mut App)\n -> (LayoutId, StyledText)\n {\n let styled_text = StyledText::new(self.text.clone())\n .with_style(self.style);\n let (layout_id, _) = styled_text.request_layout(None, None, window, cx);\n (layout_id, styled_text)\n }\n\n fn prepaint(&mut self, .., bounds: Bounds, styled_text: &mut StyledText,\n window: &mut Window, cx: &mut App) -> Hitbox\n {\n styled_text.prepaint(None, None, bounds, &mut (), window, cx);\n window.insert_hitbox(bounds, HitboxBehavior::Normal)\n }\n\n fn paint(&mut self, .., bounds: Bounds, styled_text: &mut StyledText,\n hitbox: &mut Hitbox, window: &mut Window, cx: &mut App)\n {\n styled_text.paint(None, None, bounds, &mut (), &mut (), window, cx);\n window.set_cursor_style(CursorStyle::IBeam, hitbox);\n }\n}\n```\n\n### Use Cases\n\n- Code editors with syntax highlighting\n- Rich text displays\n- Labels with custom formatting\n- Selectable text areas\n\n## Container Elements\n\nElements that manage and layout child elements.\n\n### Pattern Characteristics\n\n- Manage child element layouts and positions\n- Handle scrolling and clipping when needed\n- Implement flex/grid-like layouts\n- Coordinate child interactions and event delegation\n\n### Implementation Template\n\n```rust\npub struct ContainerElement {\n id: ElementId,\n children: Vec,\n direction: FlexDirection,\n gap: Pixels,\n}\n\nimpl Element for ContainerElement {\n type RequestLayoutState = Vec;\n type PrepaintState = Vec>;\n\n fn request_layout(&mut self, .., window: &mut Window, cx: &mut App)\n -> (LayoutId, Vec)\n {\n let child_layout_ids: Vec<_> = self.children\n .iter_mut()\n .map(|child| child.request_layout(window, cx).0)\n .collect();\n\n let layout_id = window.request_layout(\n Style {\n flex_direction: self.direction,\n gap: self.gap,\n ..default()\n },\n child_layout_ids.clone(),\n cx\n );\n\n (layout_id, child_layout_ids)\n }\n\n fn prepaint(&mut self, .., bounds: Bounds, layout_ids: &mut Vec,\n window: &mut Window, cx: &mut App) -> Vec>\n {\n let mut child_bounds = Vec::new();\n\n for (child, layout_id) in self.children.iter_mut().zip(layout_ids.iter()) {\n let child_bound = window.layout_bounds(*layout_id);\n child.prepaint(child_bound, window, cx);\n child_bounds.push(child_bound);\n }\n\n child_bounds\n }\n\n fn paint(&mut self, .., child_bounds: &mut Vec>,\n window: &mut Window, cx: &mut App)\n {\n for (child, bounds) in self.children.iter_mut().zip(child_bounds.iter()) {\n child.paint(*bounds, window, cx);\n }\n }\n}\n```\n\n### Use Cases\n\n- Panels and split views\n- List containers\n- Grid layouts\n- Tab containers\n\n## Interactive Elements\n\nElements that respond to user input (mouse, keyboard, touch).\n\n### Pattern Characteristics\n\n- Create appropriate hitboxes for interaction areas\n- Handle mouse/keyboard/touch events properly\n- Manage focus and cursor styles\n- Support hover, active, and disabled states\n\n### Implementation Template\n\n```rust\npub struct InteractiveElement {\n id: ElementId,\n content: AnyElement,\n on_click: Option>,\n hover_style: Option\n\t\n\t\n\t\t
\n\t\t\t

{formatGreeting(title)}

\n\n\t\t\t

Current year: {currentYear}

\n\t\t\t

\n\t\t\t\tEnvironment: {isProduction ? 'Production' : 'Development'}\n\t\t\t

\n\n\t\t\t{\n\t\t\t\tcount > 0 && (\n\t\t\t\t\t
\n\t\t\t\t\t\t

\n\t\t\t\t\t\t\tYou have {count} {count === 1 ? 'item' : 'items'}\n\t\t\t\t\t\t

\n\t\t\t\t\t
\n\t\t\t\t)\n\t\t\t}\n\n\t\t\t
    \n\t\t\t\t{\n\t\t\t\t\titems.map((item, index) => (\n\t\t\t\t\t\t
  • \n\t\t\t\t\t\t\t{item}\n\t\t\t\t\t\t
    • \n\t\t\t\t\t))\n\t\t\t\t}\n\t\t\t
\n\n\t\t\t

\n\t\t\t\t{items.length > 0 ? `Found ${items.length} technologies` : 'No technologies found'}\n\t\t\t

\n\n\t\t\t 5 }]}\n\t\t\t>\n\t\t\t\t

Interactive card with dynamic attributes

\n\t\t\t
\n\t\t\n\n\t\t\n\t\n\n" }, { "path": "crates/story/examples/fixtures/test.c", "content": "#include \n#include \n#include \n#include \n\n#define MAX_NAME_LENGTH 100\n#define BUFFER_SIZE 1024\n\n\n/* Constants for configuration limits */\n#define MIN_TIMEOUT 1000\n#define MAX_TIMEOUT 10000\n#define MAX_RETRIES 5\n\n/**\n * HelloWorld structure represents a greeter object with configuration\n * Contains:\n * - name: String identifier for the greeter (max 100 chars)\n * - created_at: Timestamp when instance was created\n * - timeout: Milliseconds to wait between greetings (1000-10000)\n * - retries: Number of retry attempts (0-5)\n */\ntypedef struct {\n char name[MAX_NAME_LENGTH];\n time_t created_at;\n int timeout;\n int retries;\n} HelloWorld;\n\nHelloWorld* hello_world_create(const char* name) {\n HelloWorld* hw = (HelloWorld*)malloc(sizeof(HelloWorld));\n if (!hw) return NULL;\n \n strncpy(hw->name, name, MAX_NAME_LENGTH - 1);\n hw->name[MAX_NAME_LENGTH - 1] = '\\0';\n hw->created_at = time(NULL);\n hw->timeout = 5000;\n hw->retries = 3;\n \n return hw;\n}\n\nvoid hello_world_destroy(HelloWorld* hw) {\n if (hw) {\n free(hw);\n }\n}\n\nvoid hello_world_greet(HelloWorld* hw, const char** names, int count) {\n for (int i = 0; i < count; i++) {\n printf(\"Hello, %s from %s!\\n\", names[i], hw->name);\n }\n}\n\nvoid hello_world_configure(HelloWorld* hw, int timeout, int retries) {\n hw->timeout = timeout;\n hw->retries = retries;\n}\n\nchar* hello_world_generate_report(const HelloWorld* hw) {\n char* report = (char*)malloc(BUFFER_SIZE);\n char time_str[26];\n ctime_r(&hw->created_at, time_str);\n time_str[24] = '\\0';\n \n snprintf(report, BUFFER_SIZE,\n \"HelloWorld Report\\n\"\n \"================\\n\"\n \"Name: %s\\n\"\n \"Created: %s\\n\"\n \"Timeout: %d\\n\"\n \"Retries: %d\\n\",\n hw->name, time_str, hw->timeout, hw->retries);\n \n return report;\n}\n\nint main() {\n HelloWorld* greeter = hello_world_create(\"C Example\");\n \n const char* names[] = {\"Alice\", \"Bob\"};\n int names_count = sizeof(names) / sizeof(names[0]);\n \n hello_world_configure(greeter, 1000, 5);\n hello_world_greet(greeter, names, names_count);\n \n char* report = hello_world_generate_report(greeter);\n printf(\"%s\\n\", report);\n free(report);\n \n hello_world_destroy(greeter);\n return 0;\n}\n" }, { "path": "crates/story/examples/fixtures/test.go", "content": "package main\n\nimport (\n\t\"context\"\n\t\"encoding/json\"\n\t\"fmt\"\n\t\"sync\"\n\t\"time\"\n)\n\n// Default timeout duration for operations\nconst timeout = 5 * time.Second\n\nvar (\n\tinstanceCount int\n\tmu sync.RWMutex\n)\n\n/**\n * HelloWorld represents a greeter with configuration options\n * Contains:\n * - name: String identifier for the greeter\n * - createdAt: Timestamp when instance was created\n * - options: Map of configuration options\n */\ntype HelloWorld struct {\n\tname string\n\tcreatedAt time.Time\n\toptions map[string]interface{}\n}\n\ntype Config struct {\n\tTimeout time.Duration `json:\"timeout\"`\n\tRetries int `json:\"retries\"`\n\tDebug bool `json:\"debug\"`\n}\n\nfunc NewHelloWorld(name string) *HelloWorld {\n\tmu.Lock()\n\tinstanceCount++\n\tmu.Unlock()\n\treturn &HelloWorld{\n\t\tname: name,\n\t\tcreatedAt: time.Now(),\n\t\toptions: make(map[string]interface{}),\n\t}\n}\n\nfunc (h *HelloWorld) Greet(ctx context.Context, names ...string) error {\n\tfor _, name := range names {\n\t\tselect {\n\t\tcase <-ctx.Done():\n\t\t\treturn ctx.Err()\n\t\tdefault:\n\t\t\tfmt.Printf(\"Hello, %s!\\n\", name)\n\t\t}\n\t}\n\treturn nil\n}\n\nfunc (h *HelloWorld) Configure(cfg Config) {\n\th.options[\"timeout\"] = cfg.Timeout\n\th.options[\"retries\"] = cfg.Retries\n\th.options[\"debug\"] = cfg.Debug\n}\n\nfunc (h *HelloWorld) generateReport() string {\n\tdata, _ := json.MarshalIndent(h.options, \"\", \" \")\n\treturn fmt.Sprintf(`\n\t\tHelloWorld Report\n\t\t================\n\t\tName: %s\n\t\tCreated: %s\n\t\tOptions: %s\n\t`, h.name, h.createdAt.Format(time.RFC3339), string(data))\n}\n\nfunc main() {\n\tctx, cancel := context.WithTimeout(context.Background(), timeout)\n\tdefer cancel()\n\n\tgreeter := NewHelloWorld(\"Go\")\n\tgreeter.Configure(Config{\n\t\tTimeout: timeout,\n\t\tRetries: 3,\n\t\tDebug: true,\n\t})\n\n\tif err := greeter.Greet(ctx, \"Alice\", \"Bob\"); err != nil {\n\t\tfmt.Printf(\"Error greeting: %v\\n\", err)\n\t}\n\tfmt.Println(greeter.generateReport())\n}\n" }, { "path": "crates/story/examples/fixtures/test.html", "content": "
\n

A simple HTML document

\n \n\n
\n

List

\n Example for Bulleted and Numbered List:\n\n

Numbered List

\n Text before the Numbered List.\n
    \n
  1. \n Numbered item 1\n
      \n
    1. Sub item 1
      2. \n
    2. Sub item 2
      3. \n
    \n
    2. \n
  2. Numbered item 2
    3. \n
  3. Numbered item 3
    4. \n
\n Text after the Numbered List.\n

Bulleted List

\n Text before the Bulleted List.\n
    \n
  • \n Bullet 1\n
      \n
    1. Sub Numbered 1
      2. \n
    2. Sub Numbered 2
      3. \n
    \n
    • \n
  • Bullet 2
    • \n
\n Text after the Bulleted List.\n
\n Text before the section.\n
\n

Table

\n Text before the table.\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
Head 1Head 2
This Cell have 2 span
Cell 3Cell 4
\n Text after the table.\n
\n Text after the section.\n
\n

Images

\n \n

\n (A Tesla Model X on display at the June 2024 Shanghai new energy\n vehicle show. Image credit: CnEVPost)\n

\n \n Text before the image.\n \n Text after the image.\n \n
\n
\n" }, { "path": "crates/story/examples/fixtures/test.js", "content": "const fs = require(\"fs\");\n\nconst getName = function () {\n return \"John Doe\";\n};\n\n/**\n * A class representing a HelloWorld greeter with various utility methods\n * @class HelloWorld\n * @param {string} name - The name to use for greetings\n */\nclass HelloWorld {\n // Version number of the HelloWorld class\n static VERSION = \"1.0.0\";\n // Counter to track number of class instances\n static #instanceCount = 0;\n\n // Private instance fields\n #name;\n #options;\n #createdAt;\n\n /**\n * Creates a new HelloWorld instance\n * @param {string} name - The name to use for greetings\n * @param {Object} options - Configuration options\n */\n constructor(name = \"World\", options = {}) {\n this.#name = name;\n this.#options = options;\n this.#createdAt = new Date();\n HelloWorld.#instanceCount++;\n }\n\n static getInstanceCount() {\n return HelloWorld.#instanceCount;\n }\n\n get name() {\n return this.#name;\n }\n\n set name(value) {\n this.#name = value;\n }\n\n async greet(...names) {\n try {\n for (const name of names) {\n await new Promise((resolve) => setTimeout(resolve, 100));\n console.log(`Hello, ${name}!`);\n }\n } catch (error) {\n console.error(`Error: ${error.message}`);\n }\n }\n\n configure(options = {}) {\n Object.assign(this.#options, options);\n }\n\n *generateSequence(start = 0, end = 10) {\n for (let i = start; i <= end; i++) yield i;\n }\n\n processNames(names) {\n return names\n .filter((name) => name.length > 0)\n .map((name) => name.toUpperCase())\n .sort();\n }\n}\n\nconst greeter = new HelloWorld(\"JavaScript\");\n\n(async () => {\n const uniqueNames = new Set([\"Alice\", \"Bob\"]);\n await greeter.greet(...uniqueNames);\n\n for (const num of greeter.generateSequence(0, 5)) {\n console.log(num);\n }\n})();\n" }, { "path": "crates/story/examples/fixtures/test.json", "content": "[\n {\n \"name\": \"GPUI Component\",\n \"description\": \"UI components for building fantastic desktop application by using GPUI.\",\n \"license\": \"Apache-2.0\",\n \"keywords\": [\"UI\", \"desktop\", \"application\"],\n \"stars\": 3000,\n \"rgb\": \"rgb(100, 200, 100)\",\n \"hsla\": \"hsla(20, 100%, 50%, .5)\",\n \"hsl\": \"hsl(225, 100%, 70%)\",\n \"中文\": \"#EEAAFF\",\n \"public\": true,\n \"repository\": \"https://github.com/longbridge/gpui-component\"\n }\n]\n" }, { "path": "crates/story/examples/fixtures/test.kt", "content": "package hello\n\nimport kotlin.math.roundToInt\n\nconst val VERSION = \"1.0.0\"\n\ndata class Config(\n val timeout: Int = 5000,\n val retries: Int = 3,\n val debug: Boolean = false,\n)\n\nenum class LogLevel(val label: String) {\n INFO(\"INFO\"), WARN(\"WARN\"), ERROR(\"ERROR\");\n companion object {\n fun fromString(s: String): LogLevel? = entries.find { it.label == s }\n }\n}\n\nsealed class Result {\n data class Success(val data: T) : Result()\n data class Error(val message: String) : Result()\n}\n\ninterface Greetable {\n fun greet(vararg names: String): List\n}\n\nclass HelloWorld(private val name: String = \"World\") : Greetable {\n private var config = Config()\n private val createdAt = System.currentTimeMillis()\n\n override fun greet(vararg names: String): List {\n return names.map { \"Hello, $it!\" }.also { lines ->\n if (config.debug) lines.forEach { println(\" [debug] $it\") }\n }\n }\n\n fun configure(block: Config.() -> Config) {\n config = config.block()\n }\n\n fun processNames(names: List?): List =\n names?.filter { it.isNotBlank() }\n ?.map { it.uppercase() }\n ?.sorted()\n ?: emptyList()\n\n fun generateReport(): String {\n val elapsed = ((System.currentTimeMillis() - createdAt) / 1000.0).roundToInt()\n return \"\"\"\n |HelloWorld Report\n |=================\n |Name: $name\n |Elapsed: ${elapsed}s\n |Config: timeout=${config.timeout}, retries=${config.retries}\n \"\"\".trimMargin()\n }\n\n override fun toString(): String = \"HelloWorld(name=$name)\"\n}\n\nfun safely(block: () -> T): Result = try {\n Result.Success(block())\n} catch (e: Exception) {\n Result.Error(e.message ?: \"unknown error\")\n}\n\nfun describe(obj: Any?): String = when (obj) {\n null -> \"null\"\n is String -> \"String(${obj.length}): \\\"${obj.take(20)}\\\"\"\n is Result.Success<*> -> \"ok: ${obj.data}\"\n is Result.Error -> \"err: ${obj.message}\"\n else -> obj::class.simpleName ?: \"unknown\"\n}\n\nfun main() {\n val greeter = HelloWorld(\"Kotlin\")\n\n greeter.configure { copy(debug = true, retries = 5) }\n greeter.greet(\"Alice\", \"Bob\", \"Charlie\")\n\n val processed = greeter.processNames(listOf(\"alice\", \"\", \"bob\"))\n println(\"Processed: $processed\")\n\n val result = safely { greeter.generateReport() }\n when (result) {\n is Result.Success -> println(result.data)\n is Result.Error -> println(\"Failed: ${result.message}\")\n }\n\n // Null safety & describe\n val items: List = listOf(\"hello\", 42, null, result)\n items.forEach { println(\" ${describe(it)}\") }\n\n println(\"Instances: $greeter (v$VERSION)\")\n}\n" }, { "path": "crates/story/examples/fixtures/test.lua", "content": "--[[\n HelloWorld module demonstrating Lua syntax highlighting\n Version: 1.0.0\n--]]\n\nlocal VERSION = \"1.0.0\"\n\n-- Module configuration with default values\nlocal Config = {\n timeout = 5000,\n retries = 3,\n debug = false\n}\n\n-- Enum-like table for log levels\nlocal LogLevel = {\n INFO = \"INFO\",\n WARN = \"WARN\",\n ERROR = \"ERROR\"\n}\n\n-- Create a class using metatables\nlocal HelloWorld = {}\nHelloWorld.__index = HelloWorld\n\nfunction HelloWorld.new(name)\n local self = setmetatable({}, HelloWorld)\n self.name = name or \"World\"\n self.config = {timeout = 5000, retries = 3, debug = false}\n self.createdAt = os.time()\n self._greetCount = 0 -- private-like field\n return self\nend\n\n-- Method using colon syntax (implicit self)\nfunction HelloWorld:greet(...)\n local names = {...}\n local results = {}\n\n for i, name in ipairs(names) do\n local greeting = string.format(\"Hello, %s!\", name)\n table.insert(results, greeting)\n self._greetCount = self._greetCount + 1\n\n if self.config.debug then\n print(string.format(\" [debug] %s\", greeting))\n end\n end\n\n return results\nend\n\nfunction HelloWorld:configure(newConfig)\n for k, v in pairs(newConfig) do\n self.config[k] = v\n end\nend\n\nfunction HelloWorld:processNames(names)\n local processed = {}\n\n for _, name in ipairs(names or {}) do\n if name ~= \"\" and name:match(\"%S\") then\n table.insert(processed, name:upper())\n end\n end\n\n table.sort(processed)\n return processed\nend\n\nfunction HelloWorld:generateReport()\n local elapsed = os.time() - self.createdAt\n local lines = {\n \"HelloWorld Report\",\n \"=================\",\n string.format(\"Name: %s\", self.name),\n string.format(\"Elapsed: %ds\", elapsed),\n string.format(\"Greetings: %d\", self._greetCount),\n string.format(\"Config: timeout=%d, retries=%d\",\n self.config.timeout, self.config.retries)\n }\n return table.concat(lines, \"\\n\")\nend\n\n-- Metatable for Result type (Success/Error)\nlocal function Success(data)\n return {success = true, data = data}\nend\n\nlocal function Error(message)\n return {success = false, message = message}\nend\n\n-- Protected call wrapper\nlocal function safely(fn)\n local status, result = pcall(fn)\n return status and Success(result) or Error(tostring(result))\nend\n\n-- Pattern matching-like function\nlocal function describe(obj)\n if obj == nil then return \"nil\"\n elseif type(obj) == \"string\" then\n return string.format('String(%d): \"%s\"', #obj, obj:sub(1, 20))\n elseif type(obj) == \"table\" and obj.success ~= nil then\n return obj.success and (\"ok: \" .. tostring(obj.data))\n or (\"err: \" .. obj.message)\n else\n return type(obj)\n end\nend\n\n-- Main execution\nlocal greeter = HelloWorld.new(\"Lua\")\n\ngreeter:configure({debug = true, retries = 5})\ngreeter:greet(\"Alice\", \"Bob\", \"Charlie\")\n\nlocal processed = greeter:processNames({\"alice\", \"\", \"bob\", \" charlie \"})\nprint(\"Processed: \" .. table.concat(processed, \", \"))\n\nlocal result = safely(function() return greeter:generateReport() end)\nif result.success then\n print(result.data)\nelse\n print(\"Failed: \" .. result.message)\nend\n\nprint(string.format(\"\\nVersion: %s\", VERSION))\n" }, { "path": "crates/story/examples/fixtures/test.md", "content": "# Hello, **World**!\n\nBuild Status [![Build Status](https://github.com/longbridge/gpui-component/actions/workflows/ci.yml/badge.svg)](https://github.com/longbridge/gpui-component/actions/workflows/ci.yml) of [GPUI Component](https://github.com/longbridge/gpui-component).\n\nThis is first paragraph, there have **BOLD**, _italic_, and ~strikethrough~, `code` text [^1] [^2].\n\nThis is an additional demonstration paragraph in English demonstrating more content for [Markdown GFM]. It includes various stylistic elements and plain text.\n\n![Img](https://miro.medium.com/v2/resize:fit:1400/format:webp/1*WgEz5f3n3lD7MfC7NeQGOA.jpeg)\n\n这是一个中文演示段落，用于展示更多的 [Markdown GFM] 内容。您可以在此尝试使用使用**粗体**、*斜体*和`代码`等样式。これは日本語のデモ段落です。Markdown の多言語サポートを示すためのテキストが含まれています。例えば、、**ボールド**、_イタリック_、および`コード`のスタイルなどを試すことができます。\n\n[Markdown GFM]: https://github.github.com/gfm/\n\n[^1]: This is a footnote example.\n\n[^2]: Here is another footnote.\n\n## Basic formatting\n\n### **Bold** text\n\nYou can mark some text as bold with **two asterisks**\nor **two underscores**.\n\n### **Italic** text\n\nYou can mark some text as italic with _asterisks_\nor _underscores_.\n\n### **_Bold and italic_**\n\nThree stars gives **_bold and italic_**\n\n### ~~Strikethrough~~\n\nUsing `~~two tildes~~` will strikethrough: ~~two tildes~~\n\n## Blockquotes\n\n> Blockquote: More complex nested inline style like **bold: _italic_**.\n> This is second paragraph, it includes a block quote.\n\nAnd this is next blockquote\n\n> Hello, world!\n\n### Nested blockquotes\n\n> First level\n>\n> > Second level\n> > Third level\n>\n> ```rs\n> const FOO: &str = \"bar\";\n> ```\n\n## Code block\n\n#### Rust\n\n```rust\nstruct Repository {\n /// Name of the repository.\n name: String,\n}\n\nfn main() {\n let _ = Repository {\n name: \"GPUI Component\".to_string(),\n };\n\n println!(\"Hello, World!\");\n}\n```\n\n#### Python\n\n```python\nclass Repository:\n \"\"\"A repository.\"\"\"\n\n def __init__(self, name: str):\n \"\"\"Initialize the repository.\n\n Args:\n name: Name of the repository.\n \"\"\"\n self.name = name\n```\n\n---\n\n## Heading for [Links](https://www.google.com)\n\nHere is a link to [Google](https://www.google.com), and another to [Rust](https://www.rust-lang.org).\n\n## Image\n\n![](https://miro.medium.com/v2/resize:fit:1400/format:webp/1*sOTh1aAl32jxKNuGO0TOcA.png)\n\n### SVG\n\n![Rust](https://rust-lang.org/static/images/rust-logo-blk.svg)\n\n## Table\n\n| Header 1 | Centered | Header 3 | Align Right |\n| -------- | :------: | ------------------------------------ | ----------: |\n| Cell 0 | Cell 1 | This is a long cell with line break. | Cell 3 |\n| Row 2 | Row 2 | Row 2
[Link](https://github.com) | Row 2 |\n| Row 3 | **Bold** | Row 3 | Row 3 |\n\nSee the way the text is aligned, depending on the position of `':'`\n\n| Syntax | Description | Test Text |\n| :-------- | :---------: | ----------: |\n| Header | Title | Here's this |\n| Paragraph | Text | And more |\n\n## Lists\n\n### Bulleted List\n\n- Bullet 1, this is very long and needs to be wrapped to the next line, display should be wrapped to the next line as well.\n- Bullet 2, the second bullet item is also long and needs to be wrapped to the next line.\n - Bullet 2.1\n - Bullet 2.1.1\n - Bullet 2.1.1.1\n - Bullet 2.1.2\n - Bullet 2.2\n- Bullet 3\n\n### Numbered List\n\n1. Numbered item 1\n 1. Numbered item 1.1\n 1. Numbered item 1.1.1\n 1. Numbered item 1.2\n2. Numbered item 2\n3. Numbered item 3\n\n### To-Do List\n\n- [x] Task 1, a long long text task, this line is very long and needs to be wrapped to the next line, display should be wrapped to the next line as well.\n- [ ] Task 2, going to do something if there is a long text that needs to be wrapped to the next line.\n- [ ] Task 3\n\n## Heading\n\nAdd `##` at the beginning of a line to set as Heading.\nYou can use up to 6 `#` symbols for the corresponding Heading levels\n\n## Heading 2\n\nThis is paragraph of the heading 2.\n\n### Heading 3\n\nThis is paragraph of the heading 3.\n\n#### Heading 4\n\nThis is paragraph of the heading 4.\n\n##### Heading 5\n\nThis is paragraph of the heading 5.\n\n###### Heading 6\n\nThis is paragraph of the heading 6.\n\n## HTML\n\n### Paragraph and Text\n\n
\n Here is a test in div.\n

This is a paragraph inside a div element, have link, bold, italic, and code text.

\n
\n

This is second paragraph.

\n
\n A text after div.\n
\n\n### List\n\n
    \n
  1. Numbered item 1
    2. \n
  2. Numbered item 2
    3. \n
\n\n
    \n
  • Bullet 1
    • \n
  • Bullet 2
    • \n
\n\n### Table\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
Head 1Head 2
Cell 1Cell 2
Cell 3Cell 4
\n\n### Image\n\n\"The\n\n## Unsupported\n\n### HTML\n\n
\nClick to expand\n
\n

This is a paragraph inside a details element.

\n

This is second paragraph.

\n
\n
\n\n### Math\n\nThis is an inline math $x^2 + y^2 = z^2$.\n\nThis is a block math:\n\n$$\n\\begin{aligned}\nx^2 + y^2 &= z^2 \\\\\nx^3 + y^3 &= z^3\n\\end{aligned}\n$$\n\nThis is final paragraph, it includes a code block and a list of items.\n" }, { "path": "crates/story/examples/fixtures/test.nv", "content": "use std.net.http.client.{HttpClient, Request};\nuse std.net.http.OK;\n\nfn main() throws {\n let client = HttpClient.new(\n max_redirect_count: 5,\n user_agent: \"navi-client\",\n );\n let req = try Request.get(\"https://httpbin.org/get\");\n let res = try client.request(req);\n\n if (res.status() != OK) {\n try println(\"Failed to fetch repo\", res.text());\n return;\n }\n\n try println(res.text());\n}\n" }, { "path": "crates/story/examples/fixtures/test.php", "content": " \"Hello, {$n}!\", $names);\n }\n\n public function report(): string\n {\n return \"HelloWorld({$this->name})\";\n }\n}\n\nfunction is_valid_email(string $email): bool\n{\n return preg_match('/^[\\w+\\-.]+@[\\w\\-]+\\.[a-z]{2,}$/i', $email) === 1;\n}\n\n$name = $_GET['name'] ?? 'PHP';\n$email = $_POST['email'] ?? 'user@example.com';\n\n$greeter = new HelloWorld((string) $name);\n$lines = $greeter->greet('Alice', 'Bob', 'Charlie');\n\n?>\n\n\n\n \n <?php echo htmlspecialchars($greeter->report(), ENT_QUOTES, 'UTF-8'); ?>\n\n\n

report(), ENT_QUOTES, 'UTF-8'); ?>

\n\n
    \n \n
    • \n \n
\n\n
\n \n \n
\n\n \n

Status:

\n \n\n\n" }, { "path": "crates/story/examples/fixtures/test.py", "content": "from __future__ import annotations\nfrom typing import Optional, List, Dict, Any\nfrom dataclasses import dataclass\nfrom datetime import datetime\nimport json\nimport asyncio\n\n# Data class for configuration settings\n@dataclass\nclass Config:\n timeout: int = 5000 # Default timeout in milliseconds\n retries: int = 3 # Number of retry attempts\n debug: bool = False # Debug mode flag\n\n\"\"\"\nHelloWorld class provides greeting functionality with configuration options.\n\nFeatures:\n- Async greetings with customizable names\n- Configuration management\n- Instance tracking\n- Report generation\n\nExample:\n greeter = HelloWorld(\"Python\")\n await greeter.greet(\"Alice\", \"Bob\")\n\"\"\"\nclass HelloWorld:\n VERSION: str = \"1.0.0\"\n _instance_count: int = 0\n \n def __init__(self, name: str = \"World\", options: Optional[Dict[str, Any]] = None):\n self._name = name\n self._options = options or {}\n self._created_at = datetime.now()\n self._config = Config()\n HelloWorld._instance_count += 1\n \n @property\n def name(self) -> str:\n return self._name\n \n @name.setter\n def name(self, value: str) -> None:\n if not value:\n raise ValueError(\"Name cannot be empty\")\n self._name = value\n \n @classmethod\n def get_instance_count(cls) -> int:\n return cls._instance_count\n \n async def greet(self, *names: str) -> None:\n try:\n for name in names:\n await asyncio.sleep(0.1)\n print(f\"Hello, {name}!\")\n except Exception as e:\n print(f\"Error: {str(e)}\")\n \n def process_names(self, names: List[str] = None) -> List[str]:\n if names is None:\n names = []\n return sorted([name.upper() for name in names if name])\n \n def _generate_report(self) -> str:\n return f\"\"\"\n HelloWorld Report\n ================\n Name: {self._name}\n Created: {self._created_at.isoformat()}\n Options: {json.dumps(self._options, indent=2)}\n \"\"\"\n \n def __str__(self) -> str:\n return f\"HelloWorld(name={self._name})\"\n\nasync def main():\n greeter = HelloWorld(\"Python\")\n await greeter.greet(\"Alice\", \"Bob\", \"Charlie\")\n print(greeter._generate_report())\n\nif __name__ == \"__main__\":\n asyncio.run(main())\n" }, { "path": "crates/story/examples/fixtures/test.rb", "content": "require 'json'\nrequire 'date'\n\n# Module for logging functionality\nmodule Logging\n LOG_LEVELS = %i[debug info warn error].freeze\nend\n\n# HelloWorld class provides greeting functionality with configuration options\n# @author Example Author\n# @version 1.0.0\n# Features:\n# - Configurable greetings with multiple names\n# - Instance tracking\n# - Report generation\n# - Logging capabilities\nclass HelloWorld < Object\n include Logging\n\n @@instances = 0\n VERSION = '1.0.0'\n\n attr_accessor :name\n attr_reader :created_at\n\n def initialize(name: 'World', options: {})\n @name = name\n @created_at = Time.now\n @options = options\n @@instances += 1\n yield self if block_given?\n end\n\n def self.instance_count(format: :short)\n case format\n when :short then @@instances.to_s\n when :long then \"Total instances: #{@@instances}\"\n end\n end\n\n def greet(*names)\n names.each { |n| puts \"Hello, #{n}!\" }\n rescue => e\n puts \"Error: #{e.message}\"\n end\n\n def configure(timeout: 5000, retries: 3)\n @options.merge!(timeout: timeout, retries: retries)\n end\n\n def configured?\n !@options.empty?\n end\n\n def process_names(names)\n names.map(&:upcase).select(&:present?)\n end\n\n private\n\n def generate_report\n <<~REPORT\n HelloWorld Report\n ================\n Name: #{@name}\n Created: #{@created_at}\n Options: #{@options.to_json}\n REPORT\n end\nend\n\n# Create new greeter instance with configuration block\ngreeter = HelloWorld.new(name: 'Ruby') { |g| g.configure(timeout: 1000) }\n\n# Process array and handle errors\nnumbers = [1, 2, 3, 4, 5]\ndoubled = numbers.map { |n| n * 2 }\n\n# Email validation\nEMAIL_REGEX = /\\A[\\w+\\-.]+@[a-z\\d\\-]+(\\.[a-z\\d\\-]+)*\\.[a-z]+\\z/i\nvalidator = ->(email) { email.match?(EMAIL_REGEX) }\n\nbegin\n greeter.greet('Alice', 'Bob')\nrescue StandardError => e\n puts \"Error occurred: #{e.message}\"\nensure\n puts \"Execution completed at #{Time.now}\"\nend\n" }, { "path": "crates/story/examples/fixtures/test.rs", "content": "use serde::{Deserialize, Serialize};\nuse std::collections::HashMap;\nuse std::time::Duration;\nuse tokio::time;\n\n// Version number of the HelloWorld struct\nconst VERSION: &str = \"1.0.0\";\n\n/// HelloWorld struct provides greeting functionality with configuration options\n/// This is CJK 中文🎊 for test line, column.\n///\n/// # Features\n/// - Async greetings with customizable names\n/// - Configuration management via HashMap\n/// - Report generation\n/// - Error handling with custom error types\n#[derive(Debug, Clone, Serialize, Deserialize)]\npub struct HelloWorld {\n name: String,\n #[serde(skip)]\n options: HashMap,\n created_at: chrono::DateTime,\n}\n\n#[derive(Debug, thiserror::Error)]\npub enum HelloError {\n #[error(\"Invalid name: {0}\")]\n InvalidName(String),\n #[error(\"Operation timeout\")]\n Timeout,\n}\n\n// Document colors: #FF0033, #00AA33, #0033FF, #FFAA33\n\ntype Result = std::result::Result;\n\nimpl HelloWorld {\n pub fn new(name: impl Into) -> Self {\n Self {\n name: name.into(),\n options: HashMap::new(),\n created_at: chrono::Utc::now(),\n }\n }\n\n // Greets multiple people asynchronously with configurable delay\n //\n // Use `Command-click` on `Duration` will jump to its definition.\n // Use `Control-click` on `String`, `HashMap` or `Result` will open its documentation page.\n pub async fn greet>(&self, names: &[T]) -> Result<()> {\n for name in names {\n time::sleep(Duration::from_millis(100)).await;\n println!(\"Hello, {}!\", name.as_ref());\n }\n Ok(())\n }\n\n fn generate_report(&self) -> String {\n format!(\n \"HelloWorld Report\\n================\\nName: {}\\nCreated: {}\\nOptions: {:?}\",\n self.name, self.created_at, self.options\n )\n }\n}\n\ntrait Configurable {\n fn configure(&mut self, options: HashMap);\n fn is_configured(&self) -> bool;\n}\n\nimpl Configurable for HelloWorld {\n fn configure(&mut self, options: HashMap) {\n self.options.extend(options);\n }\n\n fn is_configured(&self) -> bool {\n !self.options.is_empty()\n }\n}\n\n#[tokio::main]\nasync fn main() -> Result<()> {\n let mut greeter = HelloWorld::new(\"Rust\");\n\n let mut config = HashMap::new();\n config.insert(\"timeout\".to_string(), serde_json::json!(5000));\n config.insert(\"retries\".to_string(), serde_json::json!(3));\n\n greeter.configure(config);\n\n match greeter.greet(&[\"Alice\", \"Bob\"]).await {\n Ok(_) => println!(\"Greetings sent successfully\"),\n Err(e) => eprintln!(\"Error: {}\", e),\n }\n\n Ok(())\n}\nuse serde::{Deserialize, Serialize};\nuse std::collections::HashMap;\nuse std::time::Duration;\nuse tokio::time;\n\n// Version number of the HelloWorld struct\nconst VERSION: &str = \"1.0.0\";\n\n/// HelloWorld struct provides greeting functionality with configuration options\n///\n/// # Features\n/// - Async greetings with customizable names\n/// - Configuration management via HashMap\n/// - Report generation\n/// - Error handling with custom error types\n#[derive(Debug, Clone, Serialize, Deserialize)]\npub struct HelloWorld {\n name: String,\n #[serde(skip)]\n options: HashMap,\n created_at: chrono::DateTime,\n}\n\n#[derive(Debug, thiserror::Error)]\npub enum HelloError {\n #[error(\"Invalid name: {0}\")]\n InvalidName(String),\n #[error(\"Operation timeout\")]\n Timeout,\n}\n\ntype Result = std::result::Result;\n\nimpl HelloWorld {\n pub fn new(name: impl Into) -> Self {\n Self {\n name: name.into(),\n options: HashMap::new(),\n created_at: chrono::Utc::now(),\n }\n }\n\n // Greets multiple people asynchronously with configurable delay\n pub async fn greet>(&self, names: &[T]) -> Result<()> {\n for name in names {\n time::sleep(Duration::from_millis(100)).await;\n println!(\"Hello, {}!\", name.as_ref());\n }\n Ok(())\n }\n\n fn generate_report(&self) -> String {\n format!(\n \"HelloWorld Report\\n================\\nName: {}\\nCreated: {}\\nOptions: {:?}\",\n self.name, self.created_at, self.options\n )\n }\n}\n\ntrait Configurable {\n fn configure(&mut self, options: HashMap);\n fn is_configured(&self) -> bool;\n}\n\nimpl Configurable for HelloWorld {\n fn configure(&mut self, options: HashMap) {\n self.options.extend(options);\n }\n\n fn is_configured(&self) -> bool {\n !self.options.is_empty()\n }\n}\n\n#[tokio::main]\nasync fn main() -> Result<()> {\n let mut greeter = HelloWorld::new(\"Rust\");\n\n let mut config = HashMap::new();\n config.insert(\"timeout\".to_string(), serde_json::json!(5000));\n config.insert(\"retries\".to_string(), serde_json::json!(3));\n\n greeter.configure(config);\n\n match greeter.greet(&[\"Alice\", \"Bob\"]).await {\n Ok(_) => println!(\"Greetings sent successfully\"),\n Err(e) => eprintln!(\"Error: {}\", e),\n }\n\n Ok(())\n}\nuse serde::{Deserialize, Serialize};\nuse std::collections::HashMap;\nuse std::time::Duration;\nuse tokio::time;\n\n// Version number of the HelloWorld struct\nconst VERSION: &str = \"1.0.0\";\n\n/// HelloWorld struct provides greeting functionality with configuration options\n///\n/// # Features\n/// - Async greetings with customizable names\n/// - Configuration management via HashMap\n/// - Report generation\n/// - Error handling with custom error types\n#[derive(Debug, Clone, Serialize, Deserialize)]\npub struct HelloWorld {\n name: String,\n #[serde(skip)]\n options: HashMap,\n created_at: chrono::DateTime,\n}\n\n#[derive(Debug, thiserror::Error)]\npub enum HelloError {\n #[error(\"Invalid name: {0}\")]\n InvalidName(String),\n #[error(\"Operation timeout\")]\n Timeout,\n}\n\ntype Result = std::result::Result;\n\nimpl HelloWorld {\n pub fn new(name: impl Into) -> Self {\n Self {\n name: name.into(),\n options: HashMap::new(),\n created_at: chrono::Utc::now(),\n }\n }\n\n // Greets multiple people asynchronously with configurable delay\n pub async fn greet>(&self, names: &[T]) -> Result<()> {\n for name in names {\n time::sleep(Duration::from_millis(100)).await;\n println!(\"Hello, {}!\", name.as_ref());\n }\n Ok(())\n }\n\n fn generate_report(&self) -> String {\n format!(\n \"HelloWorld Report\\n================\\nName: {}\\nCreated: {}\\nOptions: {:?}\",\n self.name, self.created_at, self.options\n )\n }\n}\n\ntrait Configurable {\n fn configure(&mut self, options: HashMap);\n fn is_configured(&self) -> bool;\n}\n\nimpl Configurable for HelloWorld {\n fn configure(&mut self, options: HashMap) {\n self.options.extend(options);\n }\n\n fn is_configured(&self) -> bool {\n !self.options.is_empty()\n }\n}\n\n#[tokio::main]\nasync fn main() -> Result<()> {\n let mut greeter = HelloWorld::new(\"Rust\");\n\n let mut config = HashMap::new();\n config.insert(\"timeout\".to_string(), serde_json::json!(5000));\n config.insert(\"retries\".to_string(), serde_json::json!(3));\n\n greeter.configure(config);\n\n match greeter.greet(&[\"Alice\", \"Bob\"]).await {\n Ok(_) => println!(\"Greetings sent successfully\"),\n Err(e) => eprintln!(\"Error: {}\", e),\n }\n\n Ok(())\n}\nuse serde::{Deserialize, Serialize};\nuse std::collections::HashMap;\nuse std::time::Duration;\nuse tokio::time;\n\n// Version number of the HelloWorld struct\nconst VERSION: &str = \"1.0.0\";\n\n/// HelloWorld struct provides greeting functionality with configuration options\n///\n/// # Features\n/// - Async greetings with customizable names\n/// - Configuration management via HashMap\n/// - Report generation\n/// - Error handling with custom error types\n#[derive(Debug, Clone, Serialize, Deserialize)]\npub struct HelloWorld {\n name: String,\n #[serde(skip)]\n options: HashMap,\n created_at: chrono::DateTime,\n}\n\n#[derive(Debug, thiserror::Error)]\npub enum HelloError {\n #[error(\"Invalid name: {0}\")]\n InvalidName(String),\n #[error(\"Operation timeout\")]\n Timeout,\n}\n\ntype Result = std::result::Result;\n\nimpl HelloWorld {\n pub fn new(name: impl Into) -> Self {\n Self {\n name: name.into(),\n options: HashMap::new(),\n created_at: chrono::Utc::now(),\n }\n }\n\n // Greets multiple people asynchronously with configurable delay\n pub async fn greet>(&self, names: &[T]) -> Result<()> {\n for name in names {\n time::sleep(Duration::from_millis(100)).await;\n println!(\"Hello, {}!\", name.as_ref());\n }\n Ok(())\n }\n\n fn generate_report(&self) -> String {\n format!(\n \"HelloWorld Report\\n================\\nName: {}\\nCreated: {}\\nOptions: {:?}\",\n self.name, self.created_at, self.options\n )\n }\n}\n\ntrait Configurable {\n fn configure(&mut self, options: HashMap);\n fn is_configured(&self) -> bool;\n}\n\nimpl Configurable for HelloWorld {\n fn configure(&mut self, options: HashMap) {\n self.options.extend(options);\n }\n\n fn is_configured(&self) -> bool {\n !self.options.is_empty()\n }\n}\n\n#[tokio::main]\nasync fn main() -> Result<()> {\n let mut greeter = HelloWorld::new(\"Rust\");\n\n let mut config = HashMap::new();\n config.insert(\"timeout\".to_string(), serde_json::json!(5000));\n config.insert(\"retries\".to_string(), serde_json::json!(3));\n\n greeter.configure(config);\n\n match greeter.greet(&[\"Alice\", \"Bob\"]).await {\n Ok(_) => println!(\"Greetings sent successfully\"),\n Err(e) => eprintln!(\"Error: {}\", e),\n }\n\n Ok(())\n}\nuse serde::{Deserialize, Serialize};\nuse std::collections::HashMap;\nuse std::time::Duration;\nuse tokio::time;\n\n// Version number of the HelloWorld struct\nconst VERSION: &str = \"1.0.0\";\n\n/// HelloWorld struct provides greeting functionality with configuration options\n///\n/// # Features\n/// - Async greetings with customizable names\n/// - Configuration management via HashMap\n/// - Report generation\n/// - Error handling with custom error types\n#[derive(Debug, Clone, Serialize, Deserialize)]\npub struct HelloWorld {\n name: String,\n #[serde(skip)]\n options: HashMap,\n created_at: chrono::DateTime,\n}\n\n#[derive(Debug, thiserror::Error)]\npub enum HelloError {\n #[error(\"Invalid name: {0}\")]\n InvalidName(String),\n #[error(\"Operation timeout\")]\n Timeout,\n}\n\ntype Result = std::result::Result;\n\nimpl HelloWorld {\n pub fn new(name: impl Into) -> Self {\n Self {\n name: name.into(),\n options: HashMap::new(),\n created_at: chrono::Utc::now(),\n }\n }\n\n // Greets multiple people asynchronously with configurable delay\n pub async fn greet>(&self, names: &[T]) -> Result<()> {\n for name in names {\n time::sleep(Duration::from_millis(100)).await;\n println!(\"Hello, {}!\", name.as_ref());\n }\n Ok(())\n }\n\n fn generate_report(&self) -> String {\n format!(\n \"HelloWorld Report\\n================\\nName: {}\\nCreated: {}\\nOptions: {:?}\",\n self.name, self.created_at, self.options\n )\n }\n}\n\ntrait Configurable {\n fn configure(&mut self, options: HashMap);\n fn is_configured(&self) -> bool;\n}\n\nimpl Configurable for HelloWorld {\n fn configure(&mut self, options: HashMap) {\n self.options.extend(options);\n }\n\n fn is_configured(&self) -> bool {\n !self.options.is_empty()\n }\n}\n\n#[tokio::main]\nasync fn main() -> Result<()> {\n let mut greeter = HelloWorld::new(\"Rust\");\n\n let mut config = HashMap::new();\n config.insert(\"timeout\".to_string(), serde_json::json!(5000));\n config.insert(\"retries\".to_string(), serde_json::json!(3));\n\n greeter.configure(config);\n\n match greeter.greet(&[\"Alice\", \"Bob\"]).await {\n Ok(_) => println!(\"Greetings sent successfully\"),\n Err(e) => eprintln!(\"Error: {}\", e),\n }\n\n Ok(())\n}\nuse serde::{Deserialize, Serialize};\nuse std::collections::HashMap;\nuse std::time::Duration;\nuse tokio::time;\n\n// Version number of the HelloWorld struct\nconst VERSION: &str = \"1.0.0\";\n\n/// HelloWorld struct provides greeting functionality with configuration options\n///\n/// # Features\n/// - Async greetings with customizable names\n/// - Configuration management via HashMap\n/// - Report generation\n/// - Error handling with custom error types\n#[derive(Debug, Clone, Serialize, Deserialize)]\npub struct HelloWorld {\n name: String,\n #[serde(skip)]\n options: HashMap,\n created_at: chrono::DateTime,\n}\n\n#[derive(Debug, thiserror::Error)]\npub enum HelloError {\n #[error(\"Invalid name: {0}\")]\n InvalidName(String),\n #[error(\"Operation timeout\")]\n Timeout,\n}\n\ntype Result = std::result::Result;\n\nimpl HelloWorld {\n pub fn new(name: impl Into) -> Self {\n Self {\n name: name.into(),\n options: HashMap::new(),\n created_at: chrono::Utc::now(),\n }\n }\n\n // Greets multiple people asynchronously with configurable delay\n pub async fn greet>(&self, names: &[T]) -> Result<()> {\n for name in names {\n time::sleep(Duration::from_millis(100)).await;\n println!(\"Hello, {}!\", name.as_ref());\n }\n Ok(())\n }\n\n fn generate_report(&self) -> String {\n format!(\n \"HelloWorld Report\\n================\\nName: {}\\nCreated: {}\\nOptions: {:?}\",\n self.name, self.created_at, self.options\n )\n }\n}\n\ntrait Configurable {\n fn configure(&mut self, options: HashMap);\n fn is_configured(&self) -> bool;\n}\n\nimpl Configurable for HelloWorld {\n fn configure(&mut self, options: HashMap) {\n self.options.extend(options);\n }\n\n fn is_configured(&self) -> bool {\n !self.options.is_empty()\n }\n}\n\n#[tokio::main]\nasync fn main() -> Result<()> {\n let mut greeter = HelloWorld::new(\"Rust\");\n\n let mut config = HashMap::new();\n config.insert(\"timeout\".to_string(), serde_json::json!(5000));\n config.insert(\"retries\".to_string(), serde_json::json!(3));\n\n greeter.configure(config);\n\n match greeter.greet(&[\"Alice\", \"Bob\"]).await {\n Ok(_) => println!(\"Greetings sent successfully\"),\n Err(e) => eprintln!(\"Error: {}\", e),\n }\n\n Ok(())\n}\nuse serde::{Deserialize, Serialize};\nuse std::collections::HashMap;\nuse std::time::Duration;\nuse tokio::time;\n\n// Version number of the HelloWorld struct\nconst VERSION: &str = \"1.0.0\";\n\n/// HelloWorld struct provides greeting functionality with configuration options\n///\n/// # Features\n/// - Async greetings with customizable names\n/// - Configuration management via HashMap\n/// - Report generation\n/// - Error handling with custom error types\n#[derive(Debug, Clone, Serialize, Deserialize)]\npub struct HelloWorld {\n name: String,\n #[serde(skip)]\n options: HashMap,\n created_at: chrono::DateTime,\n}\n\n#[derive(Debug, thiserror::Error)]\npub enum HelloError {\n #[error(\"Invalid name: {0}\")]\n InvalidName(String),\n #[error(\"Operation timeout\")]\n Timeout,\n}\n\ntype Result = std::result::Result;\n\nimpl HelloWorld {\n pub fn new(name: impl Into) -> Self {\n Self {\n name: name.into(),\n options: HashMap::new(),\n created_at: chrono::Utc::now(),\n }\n }\n\n // Greets multiple people asynchronously with configurable delay\n pub async fn greet>(&self, names: &[T]) -> Result<()> {\n for name in names {\n time::sleep(Duration::from_millis(100)).await;\n println!(\"Hello, {}!\", name.as_ref());\n }\n Ok(())\n }\n\n fn generate_report(&self) -> String {\n format!(\n \"HelloWorld Report\\n================\\nName: {}\\nCreated: {}\\nOptions: {:?}\",\n self.name, self.created_at, self.options\n )\n }\n}\n\ntrait Configurable {\n fn configure(&mut self, options: HashMap);\n fn is_configured(&self) -> bool;\n}\n\nimpl Configurable for HelloWorld {\n fn configure(&mut self, options: HashMap) {\n self.options.extend(options);\n }\n\n fn is_configured(&self) -> bool {\n !self.options.is_empty()\n }\n}\n\n#[tokio::main]\nasync fn main() -> Result<()> {\n let mut greeter = HelloWorld::new(\"Rust\");\n\n let mut config = HashMap::new();\n config.insert(\"timeout\".to_string(), serde_json::json!(5000));\n config.insert(\"retries\".to_string(), serde_json::json!(3));\n\n greeter.configure(config);\n\n match greeter.greet(&[\"Alice\", \"Bob\"]).await {\n Ok(_) => println!(\"Greetings sent successfully\"),\n Err(e) => eprintln!(\"Error: {}\", e),\n }\n\n Ok(())\n}\nuse serde::{Deserialize, Serialize};\nuse std::collections::HashMap;\nuse std::time::Duration;\nuse tokio::time;\n\n// Version number of the HelloWorld struct\nconst VERSION: &str = \"1.0.0\";\n\n/// HelloWorld struct provides greeting functionality with configuration options\n///\n/// # Features\n/// - Async greetings with customizable names\n/// - Configuration management via HashMap\n/// - Report generation\n/// - Error handling with custom error types\n#[derive(Debug, Clone, Serialize, Deserialize)]\npub struct HelloWorld {\n name: String,\n #[serde(skip)]\n options: HashMap,\n created_at: chrono::DateTime,\n}\n\n#[derive(Debug, thiserror::Error)]\npub enum HelloError {\n #[error(\"Invalid name: {0}\")]\n InvalidName(String),\n #[error(\"Operation timeout\")]\n Timeout,\n}\n\ntype Result = std::result::Result;\n\nimpl HelloWorld {\n pub fn new(name: impl Into) -> Self {\n Self {\n name: name.into(),\n options: HashMap::new(),\n created_at: chrono::Utc::now(),\n }\n }\n\n // Greets multiple people asynchronously with configurable delay\n pub async fn greet>(&self, names: &[T]) -> Result<()> {\n for name in names {\n time::sleep(Duration::from_millis(100)).await;\n println!(\"Hello, {}!\", name.as_ref());\n }\n Ok(())\n }\n\n fn generate_report(&self) -> String {\n format!(\n \"HelloWorld Report\\n================\\nName: {}\\nCreated: {}\\nOptions: {:?}\",\n self.name, self.created_at, self.options\n )\n }\n}\n\ntrait Configurable {\n fn configure(&mut self, options: HashMap);\n fn is_configured(&self) -> bool;\n}\n\nimpl Configurable for HelloWorld {\n fn configure(&mut self, options: HashMap) {\n self.options.extend(options);\n }\n\n fn is_configured(&self) -> bool {\n !self.options.is_empty()\n }\n}\n\n#[tokio::main]\nasync fn main() -> Result<()> {\n let mut greeter = HelloWorld::new(\"Rust\");\n\n let mut config = HashMap::new();\n config.insert(\"timeout\".to_string(), serde_json::json!(5000));\n config.insert(\"retries\".to_string(), serde_json::json!(3));\n\n greeter.configure(config);\n\n match greeter.greet(&[\"Alice\", \"Bob\"]).await {\n Ok(_) => println!(\"Greetings sent successfully\"),\n Err(e) => eprintln!(\"Error: {}\", e),\n }\n\n Ok(())\n}\nuse serde::{Deserialize, Serialize};\nuse std::collections::HashMap;\nuse std::time::Duration;\nuse tokio::time;\n\n// Version number of the HelloWorld struct\nconst VERSION: &str = \"1.0.0\";\n\n/// HelloWorld struct provides greeting functionality with configuration options\n///\n/// # Features\n/// - Async greetings with customizable names\n/// - Configuration management via HashMap\n/// - Report generation\n/// - Error handling with custom error types\n#[derive(Debug, Clone, Serialize, Deserialize)]\npub struct HelloWorld {\n name: String,\n #[serde(skip)]\n options: HashMap,\n created_at: chrono::DateTime,\n}\n\n#[derive(Debug, thiserror::Error)]\npub enum HelloError {\n #[error(\"Invalid name: {0}\")]\n InvalidName(String),\n #[error(\"Operation timeout\")]\n Timeout,\n}\n\ntype Result = std::result::Result;\n\nimpl HelloWorld {\n pub fn new(name: impl Into) -> Self {\n Self {\n name: name.into(),\n options: HashMap::new(),\n created_at: chrono::Utc::now(),\n }\n }\n\n // Greets multiple people asynchronously with configurable delay\n pub async fn greet>(&self, names: &[T]) -> Result<()> {\n for name in names {\n time::sleep(Duration::from_millis(100)).await;\n println!(\"Hello, {}!\", name.as_ref());\n }\n Ok(())\n }\n\n fn generate_report(&self) -> String {\n format!(\n \"HelloWorld Report\\n================\\nName: {}\\nCreated: {}\\nOptions: {:?}\",\n self.name, self.created_at, self.options\n )\n }\n}\n\ntrait Configurable {\n fn configure(&mut self, options: HashMap);\n fn is_configured(&self) -> bool;\n}\n\nimpl Configurable for HelloWorld {\n fn configure(&mut self, options: HashMap) {\n self.options.extend(options);\n }\n\n fn is_configured(&self) -> bool {\n !self.options.is_empty()\n }\n}\n\n#[tokio::main]\nasync fn main() -> Result<()> {\n let mut greeter = HelloWorld::new(\"Rust\");\n\n let mut config = HashMap::new();\n config.insert(\"timeout\".to_string(), serde_json::json!(5000));\n config.insert(\"retries\".to_string(), serde_json::json!(3));\n\n greeter.configure(config);\n\n match greeter.greet(&[\"Alice\", \"Bob\"]).await {\n Ok(_) => println!(\"Greetings sent successfully\"),\n Err(e) => eprintln!(\"Error: {}\", e),\n }\n\n Ok(())\n}\nuse serde::{Deserialize, Serialize};\nuse std::collections::HashMap;\nuse std::time::Duration;\nuse tokio::time;\n\n// Version number of the HelloWorld struct\nconst VERSION: &str = \"1.0.0\";\n\n/// HelloWorld struct provides greeting functionality with configuration options\n///\n/// # Features\n/// - Async greetings with customizable names\n/// - Configuration management via HashMap\n/// - Report generation\n/// - Error handling with custom error types\n#[derive(Debug, Clone, Serialize, Deserialize)]\npub struct HelloWorld {\n name: String,\n #[serde(skip)]\n options: HashMap,\n created_at: chrono::DateTime,\n}\n\n#[derive(Debug, thiserror::Error)]\npub enum HelloError {\n #[error(\"Invalid name: {0}\")]\n InvalidName(String),\n #[error(\"Operation timeout\")]\n Timeout,\n}\n\ntype Result = std::result::Result;\n\nimpl HelloWorld {\n pub fn new(name: impl Into) -> Self {\n Self {\n name: name.into(),\n options: HashMap::new(),\n created_at: chrono::Utc::now(),\n }\n }\n\n // Greets multiple people asynchronously with configurable delay\n pub async fn greet>(&self, names: &[T]) -> Result<()> {\n for name in names {\n time::sleep(Duration::from_millis(100)).await;\n println!(\"Hello, {}!\", name.as_ref());\n }\n Ok(())\n }\n\n fn generate_report(&self) -> String {\n format!(\n \"HelloWorld Report\\n================\\nName: {}\\nCreated: {}\\nOptions: {:?}\",\n self.name, self.created_at, self.options\n )\n }\n}\n\ntrait Configurable {\n fn configure(&mut self, options: HashMap);\n fn is_configured(&self) -> bool;\n}\n\nimpl Configurable for HelloWorld {\n fn configure(&mut self, options: HashMap) {\n self.options.extend(options);\n }\n\n fn is_configured(&self) -> bool {\n !self.options.is_empty()\n }\n}\n\n#[tokio::main]\nasync fn main() -> Result<()> {\n let mut greeter = HelloWorld::new(\"Rust\");\n\n let mut config = HashMap::new();\n config.insert(\"timeout\".to_string(), serde_json::json!(5000));\n config.insert(\"retries\".to_string(), serde_json::json!(3));\n\n greeter.configure(config);\n\n match greeter.greet(&[\"Alice\", \"Bob\"]).await {\n Ok(_) => println!(\"Greetings sent successfully\"),\n Err(e) => eprintln!(\"Error: {}\", e),\n }\n\n Ok(())\n}\nuse serde::{Deserialize, Serialize};\nuse std::collections::HashMap;\nuse std::time::Duration;\nuse tokio::time;\n\n// Version number of the HelloWorld struct\nconst VERSION: &str = \"1.0.0\";\n\n/// HelloWorld struct provides greeting functionality with configuration options\n///\n/// # Features\n/// - Async greetings with customizable names\n/// - Configuration management via HashMap\n/// - Report generation\n/// - Error handling with custom error types\n#[derive(Debug, Clone, Serialize, Deserialize)]\npub struct HelloWorld {\n name: String,\n #[serde(skip)]\n options: HashMap,\n created_at: chrono::DateTime,\n}\n\n#[derive(Debug, thiserror::Error)]\npub enum HelloError {\n #[error(\"Invalid name: {0}\")]\n InvalidName(String),\n #[error(\"Operation timeout\")]\n Timeout,\n}\n\ntype Result = std::result::Result;\n\nimpl HelloWorld {\n pub fn new(name: impl Into) -> Self {\n Self {\n name: name.into(),\n options: HashMap::new(),\n created_at: chrono::Utc::now(),\n }\n }\n\n // Greets multiple people asynchronously with configurable delay\n pub async fn greet>(&self, names: &[T]) -> Result<()> {\n for name in names {\n time::sleep(Duration::from_millis(100)).await;\n println!(\"Hello, {}!\", name.as_ref());\n }\n Ok(())\n }\n\n fn generate_report(&self) -> String {\n format!(\n \"HelloWorld Report\\n================\\nName: {}\\nCreated: {}\\nOptions: {:?}\",\n self.name, self.created_at, self.options\n )\n }\n}\n\ntrait Configurable {\n fn configure(&mut self, options: HashMap);\n fn is_configured(&self) -> bool;\n}\n\nimpl Configurable for HelloWorld {\n fn configure(&mut self, options: HashMap) {\n self.options.extend(options);\n }\n\n fn is_configured(&self) -> bool {\n !self.options.is_empty()\n }\n}\n\n#[tokio::main]\nasync fn main() -> Result<()> {\n let mut greeter = HelloWorld::new(\"Rust\");\n\n let mut config = HashMap::new();\n config.insert(\"timeout\".to_string(), serde_json::json!(5000));\n config.insert(\"retries\".to_string(), serde_json::json!(3));\n\n greeter.configure(config);\n\n match greeter.greet(&[\"Alice\", \"Bob\"]).await {\n Ok(_) => println!(\"Greetings sent successfully\"),\n Err(e) => eprintln!(\"Error: {}\", e),\n }\n\n Ok(())\n}\n" }, { "path": "crates/story/examples/fixtures/test.sql", "content": "SELECT *\nFROM users\nWHERE email ilike '%test%'\n AND deleted_at IS NOT NULL\nLIMIT 1;\n" }, { "path": "crates/story/examples/fixtures/test.svelte", "content": "\n\n
\n\t

Svelte 5 Features

\n\n\t
\n\t\t

Counter

\n\t\t

Count: {state.count}

\n\n\t\t
\n\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t\n\t\t
\n\t
\n\n\t
\n\t\t

Input Binding

\n\t\t\n\t
\n\n\t
\n\t\t

List Management

\n\n\t\t
\n\t\t\t e.key === 'Enter' && addItem()}\n\t\t\t/>\n\t\t\t\n\t\t
\n\n\t\t{#if state.items.length === 0}\n\t\t\t

No items yet. Add some!

\n\t\t{:else}\n\t\t\t
    \n\t\t\t\t{#each state.items as item, i (item)}\n\t\t\t\t\t\n\t\t\t\t\t\t{item}\n\t\t\t\t\t\t removeItem(i)}\n\t\t\t\t\t\t\tclass=\"px-2 py-1 bg-red-500 text-white rounded text-sm\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\tRemove\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t{/each}\n\t\t\t
\n\t\t{/if}\n\t
\n
\n" }, { "path": "crates/story/examples/fixtures/test.ts", "content": "import fs, { readFile } from \"fs\";\n\nconst VERSION = \"1.0.0\";\n\nclass HelloWorld {\n private name: string;\n private createdAt: Date;\n private options: Record;\n\n constructor(name: string) {\n this.name = name;\n this.createdAt = new Date();\n this.options = {};\n }\n\n greet(names: string[]): void {\n for (const name of names) {\n console.log(`Hello, ${name}!`);\n }\n }\n\n configure(cfg: { timeout: number; retries: number; debug: boolean }): void {\n this.options[\"timeout\"] = cfg.timeout;\n this.options[\"retries\"] = cfg.retries;\n this.options[\"debug\"] = cfg.debug;\n }\n\n generateReport(): string {\n return `\n HelloWorld Report\n =================\n Name: ${this.name}\n Created: ${this.createdAt.toISOString()}\n Options: ${JSON.stringify(this.options, null, 2)}\n `;\n }\n}\n\nconst timeout = 5000;\n\nfunction main() {\n const greeter = new HelloWorld(\"TypeScript\");\n greeter.configure({\n timeout: timeout,\n retries: 3,\n debug: true,\n });\n\n greeter.greet([\"Alice\", \"Bob\"]);\n console.log(greeter.generateReport());\n}\n" }, { "path": "crates/story/examples/fixtures/test.zig", "content": "const std = @import(\"std\");\nconst json = std.json;\nconst time = std.time;\nconst HashMap = std.HashMap;\n\npub const VERSION = \"1.0.0\";\n\npub const HelloError = error{\n InvalidName,\n Timeout,\n};\n\npub const HelloWorld = struct {\n name: []const u8,\n options: HashMap([]const u8, json.Value),\n created_at: i64,\n\n pub fn init(allocator: *std.mem.Allocator, name: []const u8) !HelloWorld {\n return HelloWorld{\n .name = name,\n .options = HashMap([]const u8, json.Value).init(allocator),\n .created_at = time.timestamp(),\n };\n }\n\n pub fn deinit(self: *HelloWorld) void {\n self.options.deinit();\n }\n\n pub fn greet(self: *const HelloWorld, names: []const []const u8) !void {\n for (names) |name| {\n time.sleep(100 * time.millisecond);\n std.debug.print(\"Hello, {s}!\\n\", .{name});\n }\n }\n\n pub fn configure(self: *HelloWorld, options: HashMap([]const u8, json.Value)) void {\n var it = options.iterator();\n while (it.next()) |entry| {\n self.options.put(entry.key, entry.value) catch {};\n }\n }\n\n pub fn generateReport(self: *const HelloWorld) ![]const u8 {\n var report = std.ArrayList(u8).init(std.heap.page_allocator);\n defer report.deinit();\n\n try report.writer().print(\n \\\\HelloWorld Report\n \\\\================\n \\\\Name: {s}\n \\\\Created: {}\n \\\\Options: {}\n \\\\\n , .{\n self.name,\n self.created_at,\n self.options,\n });\n\n return report.toOwnedSlice();\n }\n};\n\npub fn main() !void {\n var gpa = std.heap.GeneralPurposeAllocator(.{}){};\n defer _ = gpa.deinit();\n const allocator = &gpa.allocator;\n\n var greeter = try HelloWorld.init(allocator, \"Zig\");\n defer greeter.deinit();\n\n var config = HashMap([]const u8, json.Value).init(allocator);\n try config.put(\"timeout\", json.Value{ .Integer = 5000 });\n try config.put(\"retries\", json.Value{ .Integer = 3 });\n \n greeter.configure(config);\n\n const names = [_][]const u8{ \"Alice\", \"Bob\" };\n try greeter.greet(&names);\n\n const report = try greeter.generateReport();\n std.debug.print(\"{s}\\n\", .{report});\n}\n" }, { "path": "crates/story/examples/html.rs", "content": "use gpui::*;\nuse gpui_component::{\n ActiveTheme as _,\n highlighter::Language,\n input::{Input, InputState, TabSize},\n resizable::h_resizable,\n text::html,\n};\nuse gpui_component_assets::Assets;\n\npub struct Example {\n input_state: Entity,\n _subscribe: Subscription,\n}\n\nconst EXAMPLE: &str = include_str!(\"./fixtures/test.html\");\n\nimpl Example {\n pub fn new(window: &mut Window, cx: &mut Context) -> Self {\n let input_state = cx.new(|cx| {\n InputState::new(window, cx)\n .code_editor(Language::Html)\n .tab_size(TabSize {\n tab_size: 4,\n hard_tabs: false,\n })\n .default_value(EXAMPLE)\n .placeholder(\"Enter your HTML here...\")\n });\n\n let _subscribe = cx.subscribe(\n &input_state,\n |_, _, _: &gpui_component::input::InputEvent, cx| {\n cx.notify();\n },\n );\n\n Self {\n input_state,\n _subscribe,\n }\n }\n\n fn view(window: &mut Window, cx: &mut App) -> Entity {\n cx.new(|cx| Self::new(window, cx))\n }\n}\n\nimpl Render for Example {\n fn render(&mut self, _: &mut Window, cx: &mut Context) -> impl IntoElement {\n h_resizable(\"container\")\n .child(\n div()\n .id(\"source\")\n .size_full()\n .font_family(cx.theme().mono_font_family.clone())\n .text_size(cx.theme().mono_font_size)\n .child(\n Input::new(&self.input_state)\n .h_full()\n .appearance(false)\n .focus_bordered(false),\n )\n .into_any(),\n )\n .child(\n html(self.input_state.read(cx).value().clone())\n .p_5()\n .scrollable(true)\n .selectable(true)\n .into_any(),\n )\n }\n}\n\nfn main() {\n let app = gpui_platform::application().with_assets(Assets);\n\n app.run(move |cx| {\n gpui_component_story::init(cx);\n cx.activate(true);\n\n gpui_component_story::create_new_window(\"HTML Render (native)\", Example::view, cx);\n });\n}\n" }, { "path": "crates/story/examples/large-text.rs", "content": "use gpui::*;\nuse gpui_component::{\n ActiveTheme, Selectable, Sizable, WindowExt,\n button::{Button, ButtonVariants as _},\n h_flex,\n input::{self, Input, InputEvent, InputState, TabSize},\n v_flex,\n};\nuse gpui_component_assets::Assets;\n\npub struct Example {\n editor: Entity,\n go_to_line_state: Entity,\n soft_wrap: bool,\n _subscribes: Vec,\n}\n\nimpl Example {\n pub fn new(window: &mut Window, cx: &mut Context) -> Self {\n // 10K lines\n let text = \"这是一个中文演示段落，用于展示更多的 [Markdown GFM] 内容。您可以在此尝试使用使用**粗体**、*斜体*和`代码`等样式。これは日本語のデモ段落です。Markdown の多言語サポートを示すためのテキストが含まれています。例えば、、**ボールド**、_イタリック_、および`コード`のスタイルなどを試すことができます。\\n\".repeat(10000);\n\n let editor = cx.new(|cx| {\n InputState::new(window, cx)\n .multi_line(true)\n .tab_size(TabSize { tab_size: 4, hard_tabs: false })\n .soft_wrap(true)\n .placeholder(\"Enter your code here...\")\n .default_value(text)\n });\n let go_to_line_state = cx.new(|cx| InputState::new(window, cx));\n\n let _subscribes = vec![cx.subscribe(&editor, |_, _, _: &InputEvent, cx| {\n cx.notify();\n })];\n\n Self { editor, go_to_line_state, soft_wrap: false, _subscribes }\n }\n\n fn view(window: &mut Window, cx: &mut App) -> Entity {\n cx.new(|cx| Self::new(window, cx))\n }\n\n fn go_to_line(&mut self, _: &ClickEvent, window: &mut Window, cx: &mut Context) {\n let editor = self.editor.clone();\n let input_state = self.go_to_line_state.clone();\n\n window.open_dialog(cx, move |dialog, window, cx| {\n input_state.update(cx, |state, cx| {\n let position = editor.read(cx).cursor_position();\n state.set_placeholder(\n format!(\"{}:{}\", position.line, position.character),\n window,\n cx,\n );\n state.focus(window, cx);\n });\n\n dialog.title(\"Go to line\").child(Input::new(&input_state)).on_ok({\n let editor = editor.clone();\n let input_state = input_state.clone();\n move |_, window, cx| {\n let query = input_state.read(cx).value();\n let mut parts = query\n .split(':')\n .map(|s| s.trim().parse::().ok())\n .collect::>()\n .into_iter();\n let Some(line) = parts.next().and_then(|l| l) else {\n return false;\n };\n let line = line.saturating_sub(1);\n let column = parts.next().and_then(|c| c).unwrap_or(1).saturating_sub(1);\n\n editor.update(cx, |state, cx| {\n state.set_cursor_position(\n input::Position::new(line as u32, column as u32),\n window,\n cx,\n );\n });\n\n true\n }\n })\n });\n }\n\n fn toggle_soft_wrap(&mut self, _: &ClickEvent, window: &mut Window, cx: &mut Context) {\n self.soft_wrap = !self.soft_wrap;\n self.editor.update(cx, |state, cx| {\n state.set_soft_wrap(self.soft_wrap, window, cx);\n });\n cx.notify();\n }\n}\n\nimpl Render for Example {\n fn render(&mut self, _: &mut Window, cx: &mut Context) -> impl IntoElement {\n v_flex().size_full().child(\n v_flex()\n .id(\"source\")\n .w_full()\n .flex_1()\n .child(Input::new(&self.editor).bordered(false).h_full().focus_bordered(false))\n .child(\n h_flex()\n .justify_between()\n .text_sm()\n .bg(cx.theme().secondary)\n .py_1p5()\n .px_4()\n .border_t_1()\n .border_color(cx.theme().border)\n .text_color(cx.theme().muted_foreground)\n .child(h_flex().gap_3().child({\n Button::new(\"soft-wrap\")\n .ghost()\n .xsmall()\n .label(\"Soft Wrap\")\n .selected(self.soft_wrap)\n .on_click(cx.listener(Self::toggle_soft_wrap))\n }))\n .child({\n let loc = self.editor.read(cx).cursor_position();\n let cursor = self.editor.read(cx).cursor();\n\n Button::new(\"line-column\")\n .ghost()\n .xsmall()\n .label(format!(\"{}:{} ({} c)\", loc.line, loc.character, cursor))\n .on_click(cx.listener(Self::go_to_line))\n }),\n ),\n )\n }\n}\n\nfn main() {\n let app = gpui_platform::application().with_assets(Assets);\n\n app.run(move |cx| {\n gpui_component_story::init(cx);\n cx.activate(true);\n\n gpui_component_story::create_new_window(\"Large Text Editor\", Example::view, cx);\n });\n}\n" }, { "path": "crates/story/examples/markdown.rs", "content": "use gpui::{prelude::FluentBuilder as _, *};\nuse gpui_component::{\n ActiveTheme as _, IconName, Sizable as _,\n button::{Button, ButtonVariants as _},\n clipboard::Clipboard,\n h_flex,\n highlighter::Language,\n input::{Input, InputEvent, InputState, TabSize},\n resizable::{h_resizable, resizable_panel},\n text::markdown,\n};\nuse gpui_component_assets::Assets;\nuse gpui_component_story::Open;\n\npub struct Example {\n input_state: Entity,\n _subscriptions: Vec,\n}\n\nconst EXAMPLE: &str = include_str!(\"./fixtures/test.md\");\n\nimpl Example {\n pub fn new(window: &mut Window, cx: &mut Context) -> Self {\n let input_state = cx.new(|cx| {\n InputState::new(window, cx)\n .code_editor(Language::Markdown)\n .line_number(true)\n .tab_size(TabSize {\n tab_size: 2,\n ..Default::default()\n })\n .searchable(true)\n .placeholder(\"Enter your Markdown here...\")\n .default_value(EXAMPLE)\n });\n\n let _subscriptions = vec![cx.subscribe(&input_state, |_, _, _: &InputEvent, _| {})];\n\n Self {\n input_state,\n _subscriptions,\n }\n }\n\n fn on_action_open(&mut self, _: &Open, window: &mut Window, cx: &mut Context) {\n let path = cx.prompt_for_paths(PathPromptOptions {\n files: true,\n directories: true,\n multiple: false,\n prompt: Some(\"Select a Markdown file\".into()),\n });\n\n let input_state = self.input_state.clone();\n cx.spawn_in(window, async move |_, window| {\n let path = path.await.ok()?.ok()??.iter().next()?.clone();\n\n let content = std::fs::read_to_string(&path).ok()?;\n\n window\n .update(|window, cx| {\n _ = input_state.update(cx, |this, cx| {\n this.set_value(content, window, cx);\n });\n })\n .ok();\n\n Some(())\n })\n .detach();\n }\n\n fn view(window: &mut Window, cx: &mut App) -> Entity {\n cx.new(|cx| Self::new(window, cx))\n }\n}\n\nimpl Render for Example {\n fn render(&mut self, _: &mut Window, cx: &mut Context) -> impl IntoElement {\n div()\n .id(\"editor\")\n .size_full()\n .on_action(cx.listener(Self::on_action_open))\n .child(\n h_resizable(\"container\")\n .child(\n resizable_panel().child(\n div()\n .id(\"source\")\n .size_full()\n .font_family(cx.theme().mono_font_family.clone())\n .text_size(cx.theme().mono_font_size)\n .child(\n Input::new(&self.input_state)\n .h_full()\n .p_0()\n .border_0()\n .focus_bordered(false),\n ),\n ),\n )\n .child(\n resizable_panel().child(\n markdown(self.input_state.read(cx).value().clone())\n .code_block_actions(|code_block, _window, _cx| {\n let code = code_block.code();\n let lang = code_block.lang();\n\n h_flex()\n .gap_1()\n .child(Clipboard::new(\"copy\").value(code.clone()))\n .when_some(lang, |this, lang| {\n // Only show run terminal button for certain languages\n if lang.as_ref() == \"rust\" || lang.as_ref() == \"python\"\n {\n this.child(\n Button::new(\"run-terminal\")\n .icon(IconName::SquareTerminal)\n .ghost()\n .xsmall()\n .on_click(move |_, _, _cx| {\n println!(\n \"Running {} code: {}\",\n lang, code\n );\n }),\n )\n } else {\n this\n }\n })\n })\n .flex_none()\n .p_5()\n .scrollable(true)\n .selectable(true),\n ),\n ),\n )\n }\n}\n\nfn main() {\n let app = gpui_platform::application().with_assets(Assets);\n\n app.run(move |cx| {\n gpui_component_story::init(cx);\n cx.activate(true);\n\n gpui_component_story::create_new_window(\"Markdown Editor\", Example::view, cx);\n });\n}\n" }, { "path": "crates/story/examples/stream_markdown.rs", "content": "use gpui::*;\nuse gpui_component::{\n button::Button,\n h_flex,\n text::{TextView, TextViewState},\n v_flex,\n};\nuse gpui_component_assets::Assets;\n\npub struct Example {\n markdown_state: Entity,\n tx: smol::channel::Sender,\n scroll_handle: ScrollHandle,\n _task: Task<()>,\n _update_task: Task<()>,\n}\n\nconst EXAMPLE: &str = include_str!(\"./fixtures/test.md\");\n\nimpl Example {\n pub fn new(_: &mut Window, cx: &mut Context) -> Self {\n let markdown_state =\n cx.new(|cx| TextViewState::markdown(\"# Streaming Markdown Parse\\n\\n\", cx));\n let scroll_handle = ScrollHandle::new();\n\n let (tx, rx) = smol::channel::unbounded::();\n let _task = cx.spawn({\n let scroll_handle = scroll_handle.clone();\n let weak_state = markdown_state.downgrade();\n async move |_, cx| {\n while let Ok(chunk) = rx.recv().await {\n _ = weak_state.update(cx, |state, cx| {\n // Push the new chunk to the markdown state,\n // it will reparse and re-render automatically.\n state.push_str(&chunk, cx);\n scroll_handle.scroll_to_bottom();\n });\n }\n }\n });\n\n Self {\n markdown_state,\n scroll_handle,\n tx,\n _task,\n _update_task: Task::ready(()),\n }\n }\n\n fn view(window: &mut Window, cx: &mut App) -> Entity {\n cx.new(|cx| Self::new(window, cx))\n }\n\n /// Simulate streaming by updating markdown state in chunks\n /// 50ms for a iteration, every time adding about 5 - 20 characters\n /// This is just for demonstration; in a real app, you'd stream from a source.\n fn replay(&mut self, _window: &mut Window, cx: &mut Context) {\n let tx = self.tx.clone();\n let mut current = 0;\n self.markdown_state.update(cx, |state, cx| {\n state.set_text(\"\", cx);\n });\n\n self._update_task = cx.background_executor().spawn(async move {\n let chars: Vec = EXAMPLE.chars().collect();\n while current < chars.len() {\n let chunk_size = (5 + rand::random::() % 15).min(chars.len() - current);\n let chunk: String = chars[current..current + chunk_size].iter().collect();\n _ = tx.try_send(chunk);\n current += chunk_size;\n std::thread::sleep(std::time::Duration::from_millis(50));\n }\n });\n }\n}\n\nimpl Render for Example {\n fn render(&mut self, _: &mut Window, cx: &mut Context) -> impl IntoElement {\n v_flex()\n .id(\"example\")\n .size_full()\n .p_4()\n .gap_4()\n .child(\n h_flex()\n .w_full()\n .child(\n Button::new(\"replay\")\n .outline()\n .label(\"Replay\")\n .on_click(cx.listener(move |this, _, window, cx| {\n this.replay(window, cx);\n })),\n ),\n )\n .child(\n div()\n .id(\"contents\")\n .flex_1()\n .w_full()\n .track_scroll(&self.scroll_handle)\n .overflow_y_scroll()\n .size_full()\n .child(TextView::new(&self.markdown_state).selectable(true)),\n )\n }\n}\n\nfn main() {\n let app = gpui_platform::application().with_assets(Assets);\n\n app.run(move |cx| {\n gpui_component_story::init(cx);\n cx.activate(true);\n\n gpui_component_story::create_new_window_with_size(\n \"Stream Markdown\",\n Some(size(px(600.), px(800.))),\n Example::view,\n cx,\n );\n });\n}\n" }, { "path": "crates/story/examples/tiles.rs", "content": "use anyhow::{Context as _, Result};\nuse gpui::*;\nuse gpui_component::{\n ActiveTheme, Root, Sizable, TitleBar,\n dock::{\n DockArea, DockAreaState, DockEvent, DockItem, Panel, PanelEvent, PanelInfo, PanelRegistry,\n PanelState, PanelView, register_panel,\n },\n input::{Input, InputState},\n scroll::ScrollbarShow,\n};\nuse gpui_component_assets::Assets;\nuse gpui_component_story::{ButtonStory, IconStory, StoryContainer};\nuse serde::{Deserialize, Serialize};\nuse std::{sync::Arc, time::Duration};\n\nactions!(tiles_story, [Quit]);\n\nconst TILES_DOCK_AREA: DockAreaTab = DockAreaTab {\n id: \"story-tiles\",\n version: 1,\n};\n\n/// A specification for a container panel for wrapping other panels to add some common functionality.\n///\n/// For example:\n///\n/// - Add a search bar to all panels.\nstruct ContainerPanel {\n panel: Arc,\n search_state: Entity,\n}\n\n#[derive(Clone, Serialize, Deserialize)]\nstruct ContainerPanelState {\n /// The state of the child panel.\n child: PanelState,\n}\n\nimpl ContainerPanelState {\n fn new(child: PanelState) -> Self {\n Self { child }\n }\n\n fn to_value(&self) -> serde_json::Value {\n serde_json::to_value(self).unwrap()\n }\n\n fn from_value(value: serde_json::Value) -> Result {\n serde_json::from_value(value).context(\"failed to deserialize ContainerPanelState\")\n }\n}\n\nimpl ContainerPanel {\n fn init(cx: &mut App) {\n register_panel(\n cx,\n \"ContainerPanel\",\n |dock_area, _, info, window, cx| match info {\n PanelInfo::Panel(panel_info) => {\n let container_state =\n ContainerPanelState::from_value(panel_info.clone()).unwrap();\n let child_state = container_state.child;\n let view = PanelRegistry::build_panel(\n &child_state.panel_name,\n dock_area,\n &child_state,\n &child_state.info,\n window,\n cx,\n );\n\n Box::new(ContainerPanel::new(view.into(), window, cx))\n }\n _ => unreachable!(),\n },\n );\n }\n\n fn new(panel: Arc, window: &mut Window, cx: &mut App) -> Entity {\n cx.new(|cx| {\n let search_state = cx.new(|cx| InputState::new(window, cx).placeholder(\"Search...\"));\n\n Self {\n panel,\n search_state,\n }\n })\n }\n}\n\nimpl Panel for ContainerPanel {\n fn panel_name(&self) -> &'static str {\n \"ContainerPanel\"\n }\n\n fn title(&mut self, window: &mut Window, cx: &mut Context) -> impl IntoElement {\n self.panel.title(window, cx)\n }\n\n fn title_suffix(&mut self, _: &mut Window, cx: &mut Context) -> Option {\n Some(\n div()\n .w_24()\n .h_6()\n .px_0p5()\n .rounded(cx.theme().radius_lg)\n .border_1()\n .border_color(cx.theme().input)\n .child(Input::new(&self.search_state).xsmall().appearance(false))\n .into_any_element(),\n )\n }\n\n fn dump(&self, cx: &App) -> PanelState {\n let mut state = PanelState::new(self);\n let panel_state = self.panel.dump(cx);\n let json_value = ContainerPanelState::new(panel_state).to_value();\n state.info = PanelInfo::panel(json_value);\n state\n }\n}\n\nimpl EventEmitter for ContainerPanel {}\nimpl Focusable for ContainerPanel {\n fn focus_handle(&self, cx: &App) -> FocusHandle {\n self.panel.focus_handle(cx)\n }\n}\n\nimpl Render for ContainerPanel {\n fn render(&mut self, _: &mut Window, _: &mut Context) -> impl IntoElement {\n self.panel.view().clone()\n }\n}\n\nactions!(workspace, [Open, CloseWindow]);\n\npub fn init(cx: &mut App) {\n cx.on_action(|_action: &Open, _cx: &mut App| {});\n\n gpui_component::init(cx);\n gpui_component_story::init(cx);\n}\n\npub struct StoryTiles {\n dock_area: Entity,\n last_layout_state: Option,\n _save_layout_task: Option>,\n}\n\nstruct DockAreaTab {\n id: &'static str,\n version: usize,\n}\n\nimpl StoryTiles {\n pub fn new(window: &mut Window, cx: &mut Context) -> Self {\n let dock_area = cx.new(|cx| {\n DockArea::new(\n TILES_DOCK_AREA.id,\n Some(TILES_DOCK_AREA.version),\n window,\n cx,\n )\n });\n let weak_dock_area = dock_area.downgrade();\n\n match Self::load_tiles(dock_area.clone(), window, cx) {\n Ok(_) => {\n println!(\"load tiles success\");\n }\n Err(err) => {\n eprintln!(\"load tiles error: {:?}\", err);\n Self::reset_default_layout(weak_dock_area, window, cx);\n }\n };\n\n cx.subscribe_in(\n &dock_area,\n window,\n |this, dock_area, ev: &DockEvent, window, cx| match ev {\n DockEvent::LayoutChanged => this.save_layout(dock_area, window, cx),\n DockEvent::DragDrop(item) => {\n println!(\"drag drop: {:?}\", item);\n }\n },\n )\n .detach();\n\n cx.on_app_quit({\n let dock_area = dock_area.clone();\n move |_, cx| {\n let state = dock_area.read(cx).dump(cx);\n cx.background_executor().spawn(async move {\n // Save layout before quitting\n Self::save_tiles(&state).unwrap();\n })\n }\n })\n .detach();\n\n Self {\n dock_area,\n last_layout_state: None,\n _save_layout_task: None,\n }\n }\n\n fn save_layout(\n &mut self,\n dock_area: &Entity,\n _: &mut Window,\n cx: &mut Context,\n ) {\n let dock_area = dock_area.clone();\n self._save_layout_task = Some(cx.spawn(async move |this, cx| {\n cx.background_executor()\n .timer(Duration::from_secs(10))\n .await;\n\n let _ = cx.update(|cx| {\n let dock_area = dock_area.read(cx);\n let state = dock_area.dump(cx);\n\n let last_layout_state = this.upgrade().unwrap().read(cx).last_layout_state.clone();\n if Some(&state) == last_layout_state.as_ref() {\n return;\n }\n\n Self::save_tiles(&state).unwrap();\n let _ = this.update(cx, |this, _| {\n this.last_layout_state = Some(state);\n });\n });\n }));\n }\n\n fn save_tiles(state: &DockAreaState) -> Result<()> {\n println!(\"Save tiles...\");\n let json = serde_json::to_string_pretty(state)?;\n std::fs::write(\"target/tiles.json\", json)?;\n Ok(())\n }\n\n fn set_scrollbar_show(dock_area: &mut DockArea, cx: &mut App) {\n match dock_area.center() {\n DockItem::Tiles { view, .. } => {\n view.update(cx, |this, cx| {\n this.set_scrollbar_show(Some(ScrollbarShow::Always), cx);\n });\n }\n _ => {}\n }\n }\n\n fn load_tiles(\n dock_area: Entity,\n window: &mut Window,\n cx: &mut Context,\n ) -> Result<()> {\n let fname = \"target/tiles.json\";\n let json = std::fs::read_to_string(fname)?;\n let state = serde_json::from_str::(&json)?;\n\n // Check if the saved layout version is different from the current version\n // Notify the user and ask if they want to reset the layout to default.\n if state.version != Some(TILES_DOCK_AREA.version) {\n let answer = window.prompt(\n PromptLevel::Info,\n \"The default tiles layout has been updated.\\n\\\n Do you want to reset the layout to default?\",\n None,\n &[\"Yes\", \"No\"],\n cx,\n );\n\n let weak_dock_area = dock_area.downgrade();\n cx.spawn_in(window, async move |this, window| {\n if answer.await == Ok(0) {\n _ = this.update_in(window, |_, window, cx| {\n Self::reset_default_layout(weak_dock_area, window, cx);\n });\n }\n })\n .detach();\n }\n\n dock_area.update(cx, |dock_area, cx| {\n dock_area.load(state, window, cx).context(\"load layout\")?;\n Self::set_scrollbar_show(dock_area, cx);\n Ok::<(), anyhow::Error>(())\n })\n }\n\n fn reset_default_layout(\n dock_area: WeakEntity,\n window: &mut Window,\n cx: &mut Context,\n ) {\n let dock_item = Self::init_default_layout(&dock_area, window, cx);\n _ = dock_area.update(cx, |dock_area, cx| {\n dock_area.set_version(TILES_DOCK_AREA.version, window, cx);\n dock_area.set_center(dock_item, window, cx);\n\n Self::set_scrollbar_show(dock_area, cx);\n Self::save_tiles(&dock_area.dump(cx)).unwrap();\n });\n }\n\n fn init_default_layout(\n dock_area: &WeakEntity,\n window: &mut Window,\n cx: &mut App,\n ) -> DockItem {\n const PANELS: usize = 4;\n let panels = (0..PANELS)\n .map(|i| {\n let story = if i % 2 == 0 {\n Arc::new(StoryContainer::panel::(window, cx))\n } else {\n Arc::new(StoryContainer::panel::(window, cx))\n };\n DockItem::tab(\n ContainerPanel::new(story, window, cx),\n dock_area,\n window,\n cx,\n )\n })\n .collect::>();\n\n // Panel size: 380x280, Gap: 20px, Starting position: (20, 20)\n let panel_width = px(380.);\n let panel_height = px(280.);\n let gap = px(20.);\n let start_x = px(20.);\n let start_y = px(20.);\n let cols = 4;\n\n let bounds = (0..PANELS)\n .map(|i| {\n let row = i / cols;\n let col = i % cols;\n let x = start_x + (panel_width + gap) * col as f32;\n let y = start_y + (panel_height + gap) * row as f32;\n Bounds::new(point(x, y), size(panel_width, panel_height))\n })\n .collect::>();\n\n DockItem::tiles(panels, bounds, dock_area, window, cx)\n }\n\n pub fn new_local(cx: &mut App) -> Task>> {\n let mut window_size = size(px(1600.0), px(1200.0));\n if let Some(display) = cx.primary_display() {\n let display_size = display.bounds().size;\n window_size.width = window_size.width.min(display_size.width * 0.85);\n window_size.height = window_size.height.min(display_size.height * 0.85);\n }\n let window_bounds = Bounds::centered(None, window_size, cx);\n\n cx.spawn(async move |cx| {\n let options = WindowOptions {\n window_bounds: Some(WindowBounds::Windowed(window_bounds)),\n titlebar: Some(TitlebarOptions {\n title: None,\n appears_transparent: true,\n traffic_light_position: Some(point(px(9.0), px(9.0))),\n }),\n window_min_size: Some(gpui::Size {\n width: px(640.),\n height: px(480.),\n }),\n kind: WindowKind::Normal,\n #[cfg(target_os = \"linux\")]\n window_background: gpui::WindowBackgroundAppearance::Transparent,\n #[cfg(target_os = \"linux\")]\n window_decorations: Some(gpui::WindowDecorations::Client),\n ..Default::default()\n };\n\n let window = cx.open_window(options, |window, cx| {\n let tiles_view = cx.new(|cx| Self::new(window, cx));\n cx.new(|cx| Root::new(tiles_view, window, cx))\n })?;\n\n window\n .update(cx, |_, window, _| {\n window.activate_window();\n window.set_window_title(\"Story Tiles\");\n })\n .expect(\"failed to update window\");\n\n Ok(window)\n })\n }\n}\n\npub fn open_new(\n cx: &mut App,\n init: impl FnOnce(&mut Root, &mut Window, &mut Context) + 'static + Send,\n) -> Task<()> {\n let task: Task, anyhow::Error>> =\n StoryTiles::new_local(cx);\n cx.spawn(async move |cx| {\n if let Some(root) = task.await.ok() {\n root.update(cx, |workspace, window, cx| init(workspace, window, cx))\n .expect(\"failed to init workspace\");\n }\n })\n}\n\nimpl Render for StoryTiles {\n fn render(&mut self, window: &mut Window, cx: &mut Context) -> impl IntoElement {\n let sheet_layer = Root::render_sheet_layer(window, cx);\n let dialog_layer = Root::render_dialog_layer(window, cx);\n let notification_layer = Root::render_notification_layer(window, cx);\n\n div()\n .font_family(cx.theme().font_family.clone())\n .relative()\n .size_full()\n .flex()\n .flex_col()\n .bg(cx.theme().background)\n .text_color(cx.theme().foreground)\n .child(TitleBar::new().child(div().flex().items_center().child(\"Story Tiles\")))\n .child(self.dock_area.clone())\n .children(sheet_layer)\n .children(dialog_layer)\n .children(notification_layer)\n }\n}\n\nfn main() {\n let app = gpui_platform::application().with_assets(Assets);\n\n app.run(move |cx| {\n gpui_component::init(cx);\n gpui_component_story::init(cx);\n ContainerPanel::init(cx);\n\n cx.on_action(quit);\n\n cx.set_menus(vec![Menu {\n name: \"GPUI App\".into(),\n items: vec![MenuItem::action(\"Quit\", Quit)],\n }]);\n cx.activate(true);\n\n open_new(cx, |_, _, _| {\n // do something\n })\n .detach();\n });\n}\n\nfn quit(_: &Quit, cx: &mut App) {\n cx.quit();\n}\n" }, { "path": "crates/story/src/app_menus.rs", "content": "use gpui::{App, Entity, Menu, MenuItem, SharedString};\nuse gpui_component::{\n ActiveTheme as _, GlobalState, Theme, ThemeMode, ThemeRegistry, menu::AppMenuBar,\n};\n\nuse crate::{\n About, Open, Quit, SelectLocale, ToggleSearch,\n themes::{SwitchTheme, SwitchThemeMode},\n};\n\npub fn init(title: impl Into, cx: &mut App) -> Entity {\n let app_menu_bar = AppMenuBar::new(cx);\n let title: SharedString = title.into();\n update_app_menu(title.clone(), app_menu_bar.clone(), cx);\n\n cx.on_action({\n let title = title.clone();\n let app_menu_bar = app_menu_bar.clone();\n move |s: &SelectLocale, cx: &mut App| {\n rust_i18n::set_locale(&s.0.as_str());\n update_app_menu(title.clone(), app_menu_bar.clone(), cx);\n }\n });\n\n // Observe theme changes to update the menu to refresh the checked state\n cx.observe_global::({\n let title = title.clone();\n let app_menu_bar = app_menu_bar.clone();\n move |cx| {\n update_app_menu(title.clone(), app_menu_bar.clone(), cx);\n }\n })\n .detach();\n\n app_menu_bar\n}\n\nfn update_app_menu(title: impl Into, app_menu_bar: Entity, cx: &mut App) {\n let title: SharedString = title.into();\n\n cx.set_menus(build_menus(title.clone(), cx));\n let menus = build_menus(title, cx)\n .into_iter()\n .map(|menu| menu.owned())\n .collect();\n GlobalState::global_mut(cx).set_app_menus(menus);\n\n app_menu_bar.update(cx, |menu_bar, cx| {\n menu_bar.reload(cx);\n })\n}\n\nfn build_menus(title: impl Into, cx: &App) -> Vec {\n vec![\n Menu {\n name: title.into(),\n items: vec![\n MenuItem::action(\"About\", About),\n MenuItem::Separator,\n MenuItem::action(\"Open...\", Open),\n MenuItem::Separator,\n MenuItem::Submenu(Menu {\n name: \"Appearance\".into(),\n items: vec![\n MenuItem::action(\"Light\", SwitchThemeMode(ThemeMode::Light))\n .checked(!cx.theme().mode.is_dark()),\n MenuItem::action(\"Dark\", SwitchThemeMode(ThemeMode::Dark))\n .checked(cx.theme().mode.is_dark()),\n ],\n }),\n theme_menu(cx),\n language_menu(cx),\n MenuItem::Separator,\n MenuItem::action(\"Quit\", Quit),\n ],\n },\n Menu {\n name: \"Edit\".into(),\n items: vec![\n MenuItem::action(\"Undo\", gpui_component::input::Undo),\n MenuItem::action(\"Redo\", gpui_component::input::Redo),\n MenuItem::separator(),\n MenuItem::action(\"Cut\", gpui_component::input::Cut),\n MenuItem::action(\"Copy\", gpui_component::input::Copy),\n MenuItem::action(\"Paste\", gpui_component::input::Paste),\n MenuItem::separator(),\n MenuItem::action(\"Delete\", gpui_component::input::Delete),\n MenuItem::action(\n \"Delete Previous Word\",\n gpui_component::input::DeleteToPreviousWordStart,\n ),\n MenuItem::action(\n \"Delete Next Word\",\n gpui_component::input::DeleteToNextWordEnd,\n ),\n MenuItem::separator(),\n MenuItem::action(\"Find\", gpui_component::input::Search),\n MenuItem::separator(),\n MenuItem::action(\"Select All\", gpui_component::input::SelectAll),\n ],\n },\n Menu {\n name: \"Window\".into(),\n items: vec![MenuItem::action(\"Toggle Search\", ToggleSearch)],\n },\n Menu {\n name: \"Help\".into(),\n items: vec![MenuItem::action(\"Open Website\", Open)],\n },\n ]\n}\n\nfn language_menu(_: &App) -> MenuItem {\n let locale = rust_i18n::locale().to_string();\n MenuItem::Submenu(Menu {\n name: \"Language\".into(),\n items: vec![\n MenuItem::action(\"English\", SelectLocale(\"en\".into())).checked(locale == \"en\"),\n MenuItem::action(\"简体中文\", SelectLocale(\"zh-CN\".into())).checked(locale == \"zh-CN\"),\n ],\n })\n}\n\nfn theme_menu(cx: &App) -> MenuItem {\n let themes = ThemeRegistry::global(cx).sorted_themes();\n let current_name = cx.theme().theme_name();\n MenuItem::Submenu(Menu {\n name: \"Theme\".into(),\n items: themes\n .iter()\n .map(|theme| {\n let checked = current_name == &theme.name;\n MenuItem::action(theme.name.clone(), SwitchTheme(theme.name.clone()))\n .checked(checked)\n })\n .collect(),\n })\n}\n" }, { "path": "crates/story/src/embedded_themes.rs", "content": "#[cfg(target_family = \"wasm\")]\nuse std::collections::HashMap;\n\n#[cfg(target_family = \"wasm\")]\npub fn embedded_themes() -> HashMap<&'static str, &'static str> {\n let mut themes = HashMap::new();\n\n themes.insert(\"adventure\", include_str!(\"../../../themes/adventure.json\"));\n themes.insert(\"alduin\", include_str!(\"../../../themes/alduin.json\"));\n themes.insert(\"asciinema\", include_str!(\"../../../themes/asciinema.json\"));\n themes.insert(\"ayu\", include_str!(\"../../../themes/ayu.json\"));\n themes.insert(\n \"catppuccin\",\n include_str!(\"../../../themes/catppuccin.json\"),\n );\n themes.insert(\n \"everforest\",\n include_str!(\"../../../themes/everforest.json\"),\n );\n themes.insert(\n \"fahrenheit\",\n include_str!(\"../../../themes/fahrenheit.json\"),\n );\n themes.insert(\"flexoki\", include_str!(\"../../../themes/flexoki.json\"));\n themes.insert(\"gruvbox\", include_str!(\"../../../themes/gruvbox.json\"));\n themes.insert(\"harper\", include_str!(\"../../../themes/harper.json\"));\n themes.insert(\"hybrid\", include_str!(\"../../../themes/hybrid.json\"));\n themes.insert(\n \"jellybeans\",\n include_str!(\"../../../themes/jellybeans.json\"),\n );\n themes.insert(\"kibble\", include_str!(\"../../../themes/kibble.json\"));\n themes.insert(\n \"macos-classic\",\n include_str!(\"../../../themes/macos-classic.json\"),\n );\n themes.insert(\"matrix\", include_str!(\"../../../themes/matrix.json\"));\n themes.insert(\n \"mellifluous\",\n include_str!(\"../../../themes/mellifluous.json\"),\n );\n themes.insert(\"molokai\", include_str!(\"../../../themes/molokai.json\"));\n themes.insert(\"solarized\", include_str!(\"../../../themes/solarized.json\"));\n themes.insert(\"spaceduck\", include_str!(\"../../../themes/spaceduck.json\"));\n themes.insert(\n \"tokyonight\",\n include_str!(\"../../../themes/tokyonight.json\"),\n );\n themes.insert(\"twilight\", include_str!(\"../../../themes/twilight.json\"));\n\n themes\n}\n" }, { "path": "crates/story/src/fixtures/counters.json", "content": "[\n { \"symbol\": \"AAPL\", \"name\": \"Apple Inc.\", \"market\": \"US\" },\n { \"symbol\": \"MSFT\", \"name\": \"Microsoft Corp.\", \"market\": \"US\" },\n { \"symbol\": \"GOOGL\", \"name\": \"Alphabet Inc. Class A\", \"market\": \"US\" },\n { \"symbol\": \"AMZN\", \"name\": \"Amazon.com Inc.\", \"market\": \"US\" },\n { \"symbol\": \"META\", \"name\": \"Meta Platforms Inc.\", \"market\": \"US\" },\n { \"symbol\": \"TSLA\", \"name\": \"Tesla Inc.\", \"market\": \"US\" },\n {\n \"symbol\": \"BRK.B\",\n \"name\": \"Berkshire Hathaway Inc. Class B\",\n \"market\": \"US\"\n },\n { \"symbol\": \"NVDA\", \"name\": \"NVIDIA Corp.\", \"market\": \"US\" },\n { \"symbol\": \"JPM\", \"name\": \"JPMorgan Chase & Co.\", \"market\": \"US\" },\n { \"symbol\": \"V\", \"name\": \"Visa Inc.\", \"market\": \"US\" },\n { \"symbol\": \"UNH\", \"name\": \"UnitedHealth Group Inc.\", \"market\": \"US\" },\n { \"symbol\": \"MA\", \"name\": \"Mastercard Inc.\", \"market\": \"US\" },\n { \"symbol\": \"HD\", \"name\": \"Home Depot Inc.\", \"market\": \"US\" },\n { \"symbol\": \"PG\", \"name\": \"Procter & Gamble Co.\", \"market\": \"US\" },\n { \"symbol\": \"LLY\", \"name\": \"Eli Lilly and Co.\", \"market\": \"US\" },\n { \"symbol\": \"BAC\", \"name\": \"Bank of America Corp.\", \"market\": \"US\" },\n { \"symbol\": \"XOM\", \"name\": \"Exxon Mobil Corp.\", \"market\": \"US\" },\n { \"symbol\": \"KO\", \"name\": \"Coca-Cola Co.\", \"market\": \"US\" },\n { \"symbol\": \"MRK\", \"name\": \"Merck & Co. Inc.\", \"market\": \"US\" },\n { \"symbol\": \"PEP\", \"name\": \"PepsiCo Inc.\", \"market\": \"US\" },\n { \"symbol\": \"ABBV\", \"name\": \"AbbVie Inc.\", \"market\": \"US\" },\n { \"symbol\": \"AVGO\", \"name\": \"Broadcom Inc.\", \"market\": \"US\" },\n { \"symbol\": \"COST\", \"name\": \"Costco Wholesale Corp.\", \"market\": \"US\" },\n { \"symbol\": \"WMT\", \"name\": \"Walmart Inc.\", \"market\": \"US\" },\n { \"symbol\": \"MCD\", \"name\": \"McDonald's Corp.\", \"market\": \"US\" },\n { \"symbol\": \"ADBE\", \"name\": \"Adobe Inc.\", \"market\": \"US\" },\n { \"symbol\": \"CRM\", \"name\": \"Salesforce Inc.\", \"market\": \"US\" },\n { \"symbol\": \"NFLX\", \"name\": \"Netflix Inc.\", \"market\": \"US\" },\n { \"symbol\": \"TMO\", \"name\": \"Thermo Fisher Scientific Inc.\", \"market\": \"US\" },\n { \"symbol\": \"ACN\", \"name\": \"Accenture plc\", \"market\": \"US\" },\n { \"symbol\": \"LIN\", \"name\": \"Linde plc\", \"market\": \"US\" },\n { \"symbol\": \"TXN\", \"name\": \"Texas Instruments Inc.\", \"market\": \"US\" },\n { \"symbol\": \"QCOM\", \"name\": \"Qualcomm Inc.\", \"market\": \"US\" },\n { \"symbol\": \"NEE\", \"name\": \"NextEra Energy Inc.\", \"market\": \"US\" },\n {\n \"symbol\": \"PM\",\n \"name\": \"Philip Morris International Inc.\",\n \"market\": \"US\"\n },\n { \"symbol\": \"HON\", \"name\": \"Honeywell International Inc.\", \"market\": \"US\" },\n { \"symbol\": \"ORCL\", \"name\": \"Oracle Corp.\", \"market\": \"US\" },\n { \"symbol\": \"AMGN\", \"name\": \"Amgen Inc.\", \"market\": \"US\" },\n { \"symbol\": \"INTC\", \"name\": \"Intel Corp.\", \"market\": \"US\" },\n { \"symbol\": \"DHR\", \"name\": \"Danaher Corp.\", \"market\": \"US\" },\n { \"symbol\": \"LOW\", \"name\": \"Lowe's Companies Inc.\", \"market\": \"US\" },\n { \"symbol\": \"UPS\", \"name\": \"United Parcel Service Inc.\", \"market\": \"US\" },\n { \"symbol\": \"SBUX\", \"name\": \"Starbucks Corp.\", \"market\": \"US\" },\n { \"symbol\": \"CVX\", \"name\": \"Chevron Corp.\", \"market\": \"US\" },\n { \"symbol\": \"GS\", \"name\": \"Goldman Sachs Group Inc.\", \"market\": \"US\" },\n { \"symbol\": \"MDT\", \"name\": \"Medtronic plc\", \"market\": \"US\" },\n { \"symbol\": \"AXP\", \"name\": \"American Express Co.\", \"market\": \"US\" },\n { \"symbol\": \"SPGI\", \"name\": \"S&P Global Inc.\", \"market\": \"US\" },\n { \"symbol\": \"BLK\", \"name\": \"BlackRock Inc.\", \"market\": \"US\" },\n { \"symbol\": \"SYK\", \"name\": \"Stryker Corp.\", \"market\": \"US\" },\n { \"symbol\": \"ISRG\", \"name\": \"Intuitive Surgical Inc.\", \"market\": \"US\" },\n { \"symbol\": \"DE\", \"name\": \"Deere & Co.\", \"market\": \"US\" },\n { \"symbol\": \"PLD\", \"name\": \"Prologis Inc.\", \"market\": \"US\" },\n { \"symbol\": \"SCHW\", \"name\": \"Charles Schwab Corp.\", \"market\": \"US\" },\n { \"symbol\": \"BKNG\", \"name\": \"Booking Holdings Inc.\", \"market\": \"US\" },\n { \"symbol\": \"CI\", \"name\": \"Cigna Group\", \"market\": \"US\" },\n { \"symbol\": \"CB\", \"name\": \"Chubb Ltd.\", \"market\": \"US\" },\n {\n \"symbol\": \"MMC\",\n \"name\": \"Marsh & McLennan Companies Inc.\",\n \"market\": \"US\"\n },\n { \"symbol\": \"ADP\", \"name\": \"Automatic Data Processing Inc.\", \"market\": \"US\" },\n { \"symbol\": \"LRCX\", \"name\": \"Lam Research Corp.\", \"market\": \"US\" },\n { \"symbol\": \"CME\", \"name\": \"CME Group Inc.\", \"market\": \"US\" },\n { \"symbol\": \"TGT\", \"name\": \"Target Corp.\", \"market\": \"US\" },\n { \"symbol\": \"DUK\", \"name\": \"Duke Energy Corp.\", \"market\": \"US\" },\n { \"symbol\": \"GILD\", \"name\": \"Gilead Sciences Inc.\", \"market\": \"US\" },\n { \"symbol\": \"AMAT\", \"name\": \"Applied Materials Inc.\", \"market\": \"US\" },\n { \"symbol\": \"FISV\", \"name\": \"Fiserv Inc.\", \"market\": \"US\" },\n { \"symbol\": \"MO\", \"name\": \"Altria Group Inc.\", \"market\": \"US\" },\n { \"symbol\": \"VRTX\", \"name\": \"Vertex Pharmaceuticals Inc.\", \"market\": \"US\" },\n {\n \"symbol\": \"REGN\",\n \"name\": \"Regeneron Pharmaceuticals Inc.\",\n \"market\": \"US\"\n },\n { \"symbol\": \"PGR\", \"name\": \"Progressive Corp.\", \"market\": \"US\" },\n { \"symbol\": \"ELV\", \"name\": \"Elevance Health Inc.\", \"market\": \"US\" },\n { \"symbol\": \"EOG\", \"name\": \"EOG Resources Inc.\", \"market\": \"US\" },\n { \"symbol\": \"FDX\", \"name\": \"FedEx Corp.\", \"market\": \"US\" },\n {\n \"symbol\": \"APD\",\n \"name\": \"Air Products and Chemicals Inc.\",\n \"market\": \"US\"\n },\n { \"symbol\": \"AON\", \"name\": \"Aon plc\", \"market\": \"US\" },\n { \"symbol\": \"ITW\", \"name\": \"Illinois Tool Works Inc.\", \"market\": \"US\" },\n { \"symbol\": \"BSX\", \"name\": \"Boston Scientific Corp.\", \"market\": \"US\" },\n { \"symbol\": \"GM\", \"name\": \"General Motors Co.\", \"market\": \"US\" },\n { \"symbol\": \"HCA\", \"name\": \"HCA Healthcare Inc.\", \"market\": \"US\" },\n { \"symbol\": \"GD\", \"name\": \"General Dynamics Corp.\", \"market\": \"US\" },\n { \"symbol\": \"ZTS\", \"name\": \"Zoetis Inc.\", \"market\": \"US\" },\n { \"symbol\": \"SYY\", \"name\": \"Sysco Corp.\", \"market\": \"US\" },\n {\n \"symbol\": \"AIG\",\n \"name\": \"American International Group Inc.\",\n \"market\": \"US\"\n },\n { \"symbol\": \"MCO\", \"name\": \"Moody's Corp.\", \"market\": \"US\" },\n { \"symbol\": \"MS\", \"name\": \"Morgan Stanley\", \"market\": \"US\" },\n { \"symbol\": \"SLB\", \"name\": \"Schlumberger Ltd.\", \"market\": \"US\" },\n { \"symbol\": \"SO\", \"name\": \"Southern Co.\", \"market\": \"US\" },\n { \"symbol\": \"WM\", \"name\": \"Waste Management Inc.\", \"market\": \"US\" },\n { \"symbol\": \"D\", \"name\": \"Dominion Energy Inc.\", \"market\": \"US\" },\n { \"symbol\": \"PSA\", \"name\": \"Public Storage\", \"market\": \"US\" },\n { \"symbol\": \"CNC\", \"name\": \"Centene Corp.\", \"market\": \"US\" },\n { \"symbol\": \"TRV\", \"name\": \"Travelers Companies Inc.\", \"market\": \"US\" },\n { \"symbol\": \"AFL\", \"name\": \"Aflac Inc.\", \"market\": \"US\" },\n { \"symbol\": \"VLO\", \"name\": \"Valero Energy Corp.\", \"market\": \"US\" },\n { \"symbol\": \"WELL\", \"name\": \"Welltower Inc.\", \"market\": \"US\" },\n { \"symbol\": \"F\", \"name\": \"Ford Motor Co.\", \"market\": \"US\" },\n { \"symbol\": \"STZ\", \"name\": \"Constellation Brands Inc.\", \"market\": \"US\" },\n { \"symbol\": \"NOC\", \"name\": \"Northrop Grumman Corp.\", \"market\": \"US\" },\n { \"symbol\": \"KHC\", \"name\": \"Kraft Heinz Co.\", \"market\": \"US\" },\n { \"symbol\": \"EXC\", \"name\": \"Exelon Corp.\", \"market\": \"US\" },\n { \"symbol\": \"CARR\", \"name\": \"Carrier Global Corp.\", \"market\": \"US\" },\n { \"symbol\": \"HES\", \"name\": \"Hess Corp.\", \"market\": \"US\" },\n { \"symbol\": \"WMB\", \"name\": \"Williams Companies Inc.\", \"market\": \"US\" },\n { \"symbol\": \"VTR\", \"name\": \"Ventas Inc.\", \"market\": \"US\" },\n { \"symbol\": \"DOW\", \"name\": \"Dow Inc.\", \"market\": \"US\" },\n { \"symbol\": \"BKR\", \"name\": \"Baker Hughes Co.\", \"market\": \"US\" },\n { \"symbol\": \"OKE\", \"name\": \"ONEOK Inc.\", \"market\": \"US\" },\n { \"symbol\": \"NUE\", \"name\": \"Nucor Corp.\", \"market\": \"US\" },\n { \"symbol\": \"CPB\", \"name\": \"Campbell Soup Co.\", \"market\": \"US\" },\n { \"symbol\": \"CL\", \"name\": \"Colgate-Palmolive Co.\", \"market\": \"US\" },\n { \"symbol\": \"EMR\", \"name\": \"Emerson Electric Co.\", \"market\": \"US\" },\n { \"symbol\": \"ETN\", \"name\": \"Eaton Corp. plc\", \"market\": \"US\" },\n { \"symbol\": \"ROK\", \"name\": \"Rockwell Automation Inc.\", \"market\": \"US\" },\n {\n \"symbol\": \"IFF\",\n \"name\": \"International Flavors & Fragrances Inc.\",\n \"market\": \"US\"\n },\n { \"symbol\": \"XYL\", \"name\": \"Xylem Inc.\", \"market\": \"US\" },\n {\n \"symbol\": \"WAB\",\n \"name\": \"Westinghouse Air Brake Technologies Corp.\",\n \"market\": \"US\"\n },\n { \"symbol\": \"TDG\", \"name\": \"TransDigm Group Inc.\", \"market\": \"US\" },\n { \"symbol\": \"MAS\", \"name\": \"Masco Corp.\", \"market\": \"US\" },\n { \"symbol\": \"AWK\", \"name\": \"American Water Works Co. Inc.\", \"market\": \"US\" },\n { \"symbol\": \"PNR\", \"name\": \"Pentair plc\", \"market\": \"US\" },\n { \"symbol\": \"AOS\", \"name\": \"A. O. Smith Corp.\", \"market\": \"US\" },\n { \"symbol\": \"NDSN\", \"name\": \"Nordson Corp.\", \"market\": \"US\" },\n { \"symbol\": \"ALB\", \"name\": \"Albemarle Corp.\", \"market\": \"US\" },\n { \"symbol\": \"APTV\", \"name\": \"Aptiv PLC\", \"market\": \"US\" },\n { \"symbol\": \"BWA\", \"name\": \"BorgWarner Inc.\", \"market\": \"US\" },\n { \"symbol\": \"CUM\", \"name\": \"Cummins Inc.\", \"market\": \"US\" },\n { \"symbol\": \"DOV\", \"name\": \"Dover Corp.\", \"market\": \"US\" },\n { \"symbol\": \"FLS\", \"name\": \"Flowserve Corp.\", \"market\": \"US\" },\n { \"symbol\": \"GWW\", \"name\": \"W.W. Grainger Inc.\", \"market\": \"US\" },\n { \"symbol\": \"IR\", \"name\": \"Ingersoll Rand Inc.\", \"market\": \"US\" },\n { \"symbol\": \"IT\", \"name\": \"Gartner Inc.\", \"market\": \"US\" },\n { \"symbol\": \"J\", \"name\": \"Jacobs Solutions Inc.\", \"market\": \"US\" },\n {\n \"symbol\": \"LECO\",\n \"name\": \"Lincoln Electric Holdings Inc.\",\n \"market\": \"US\"\n },\n { \"symbol\": \"MIDD\", \"name\": \"Middleby Corp.\", \"market\": \"US\" },\n { \"symbol\": \"MLI\", \"name\": \"Mueller Industries Inc.\", \"market\": \"US\" },\n { \"symbol\": \"NVT\", \"name\": \"nVent Electric plc\", \"market\": \"US\" },\n { \"symbol\": \"OSK\", \"name\": \"Oshkosh Corp.\", \"market\": \"US\" },\n { \"symbol\": \"PWR\", \"name\": \"Quanta Services Inc.\", \"market\": \"US\" },\n { \"symbol\": \"RBC\", \"name\": \"Regal Rexnord Corp.\", \"market\": \"US\" },\n { \"symbol\": \"SNA\", \"name\": \"Snap-on Inc.\", \"market\": \"US\" },\n { \"symbol\": \"SWK\", \"name\": \"Stanley Black & Decker Inc.\", \"market\": \"US\" },\n { \"symbol\": \"TT\", \"name\": \"Trane Technologies plc\", \"market\": \"US\" },\n { \"symbol\": \"VMI\", \"name\": \"Valmont Industries Inc.\", \"market\": \"US\" },\n { \"symbol\": \"WMS\", \"name\": \"Advanced Drainage Systems Inc.\", \"market\": \"US\" },\n { \"symbol\": \"XYL\", \"name\": \"Xylem Inc.\", \"market\": \"US\" },\n { \"symbol\": \"0700.HK\", \"name\": \"Tencent Holdings Ltd.\", \"market\": \"HK\" },\n { \"symbol\": \"9988.HK\", \"name\": \"Alibaba Group Holding Ltd.\", \"market\": \"HK\" },\n { \"symbol\": \"3690.HK\", \"name\": \"Meituan\", \"market\": \"HK\" },\n { \"symbol\": \"1299.HK\", \"name\": \"AIA Group Ltd.\", \"market\": \"HK\" },\n { \"symbol\": \"0005.HK\", \"name\": \"HSBC Holdings plc\", \"market\": \"HK\" },\n {\n \"symbol\": \"2318.HK\",\n \"name\": \"Ping An Insurance Group Co.\",\n \"market\": \"HK\"\n },\n {\n \"symbol\": \"2382.HK\",\n \"name\": \"Sunny Optical Technology Group Co.\",\n \"market\": \"HK\"\n },\n { \"symbol\": \"1810.HK\", \"name\": \"Xiaomi Corp.\", \"market\": \"HK\" },\n {\n \"symbol\": \"0823.HK\",\n \"name\": \"Link Real Estate Investment Trust\",\n \"market\": \"HK\"\n },\n { \"symbol\": \"0001.HK\", \"name\": \"CK Hutchison Holdings Ltd.\", \"market\": \"HK\" },\n {\n \"symbol\": \"0027.HK\",\n \"name\": \"Galaxy Entertainment Group Ltd.\",\n \"market\": \"HK\"\n },\n { \"symbol\": \"0011.HK\", \"name\": \"Hang Seng Bank Ltd.\", \"market\": \"HK\" },\n { \"symbol\": \"0002.HK\", \"name\": \"CLP Holdings Ltd.\", \"market\": \"HK\" },\n {\n \"symbol\": \"0003.HK\",\n \"name\": \"Hong Kong & China Gas Co. Ltd.\",\n \"market\": \"HK\"\n },\n { \"symbol\": \"0006.HK\", \"name\": \"Power Assets Holdings Ltd.\", \"market\": \"HK\" },\n {\n \"symbol\": \"0016.HK\",\n \"name\": \"Sun Hung Kai Properties Ltd.\",\n \"market\": \"HK\"\n },\n {\n \"symbol\": \"0017.HK\",\n \"name\": \"New World Development Co. Ltd.\",\n \"market\": \"HK\"\n },\n { \"symbol\": \"0023.HK\", \"name\": \"Bank of East Asia Ltd.\", \"market\": \"HK\" },\n { \"symbol\": \"0066.HK\", \"name\": \"MTR Corp. Ltd.\", \"market\": \"HK\" },\n { \"symbol\": \"0083.HK\", \"name\": \"Sino Land Co. Ltd.\", \"market\": \"HK\" },\n { \"symbol\": \"0101.HK\", \"name\": \"Hang Lung Properties Ltd.\", \"market\": \"HK\" },\n {\n \"symbol\": \"0144.HK\",\n \"name\": \"China Merchants Port Holdings Co. Ltd.\",\n \"market\": \"HK\"\n },\n {\n \"symbol\": \"0151.HK\",\n \"name\": \"Want Want China Holdings Ltd.\",\n \"market\": \"HK\"\n },\n {\n \"symbol\": \"0175.HK\",\n \"name\": \"Geely Automobile Holdings Ltd.\",\n \"market\": \"HK\"\n },\n { \"symbol\": \"0207.HK\", \"name\": \"Joy City Property Ltd.\", \"market\": \"HK\" },\n { \"symbol\": \"0267.HK\", \"name\": \"CITIC Ltd.\", \"market\": \"HK\" },\n { \"symbol\": \"0288.HK\", \"name\": \"WH Group Ltd.\", \"market\": \"HK\" },\n {\n \"symbol\": \"0322.HK\",\n \"name\": \"China Oilfield Services Ltd.\",\n \"market\": \"HK\"\n },\n {\n \"symbol\": \"0386.HK\",\n \"name\": \"China Petroleum & Chemical Corp.\",\n \"market\": \"HK\"\n },\n {\n \"symbol\": \"0393.HK\",\n \"name\": \"China Merchants China Direct Investments Ltd.\",\n \"market\": \"HK\"\n },\n {\n \"symbol\": \"0416.HK\",\n \"name\": \"Kwoon Chung Bus Holdings Ltd.\",\n \"market\": \"HK\"\n },\n { \"symbol\": \"0451.HK\", \"name\": \"Xinyi Glass Holdings Ltd.\", \"market\": \"HK\" },\n {\n \"symbol\": \"0522.HK\",\n \"name\": \"ASM Pacific Technology Ltd.\",\n \"market\": \"HK\"\n },\n {\n \"symbol\": \"0575.HK\",\n \"name\": \"Pacific Textiles Holdings Ltd.\",\n \"market\": \"HK\"\n },\n {\n \"symbol\": \"0606.HK\",\n \"name\": \"China Agri-Industries Holdings Ltd.\",\n \"market\": \"HK\"\n },\n {\n \"symbol\": \"0669.HK\",\n \"name\": \"Techtronic Industries Co. Ltd.\",\n \"market\": \"HK\"\n },\n {\n \"symbol\": \"0688.HK\",\n \"name\": \"China Overseas Land & Investment Ltd.\",\n \"market\": \"HK\"\n },\n {\n \"symbol\": \"0708.HK\",\n \"name\": \"China Everbright International Ltd.\",\n \"market\": \"HK\"\n },\n {\n \"symbol\": \"0762.HK\",\n \"name\": \"China Unicom (Hong Kong) Ltd.\",\n \"market\": \"HK\"\n },\n {\n \"symbol\": \"0808.HK\",\n \"name\": \"China Oilfield Services Ltd.\",\n \"market\": \"HK\"\n },\n {\n \"symbol\": \"0836.HK\",\n \"name\": \"China Resources Power Holdings Co. Ltd.\",\n \"market\": \"HK\"\n },\n { \"symbol\": \"0857.HK\", \"name\": \"PetroChina Co. Ltd.\", \"market\": \"HK\" },\n { \"symbol\": \"0883.HK\", \"name\": \"CNOOC Ltd.\", \"market\": \"HK\" },\n {\n \"symbol\": \"0939.HK\",\n \"name\": \"China Construction Bank Corp.\",\n \"market\": \"HK\"\n },\n { \"symbol\": \"0941.HK\", \"name\": \"China Mobile Ltd.\", \"market\": \"HK\" },\n { \"symbol\": \"0968.HK\", \"name\": \"Xinyi Solar Holdings Ltd.\", \"market\": \"HK\" },\n { \"symbol\": \"0992.HK\", \"name\": \"Lenovo Group Ltd.\", \"market\": \"HK\" },\n {\n \"symbol\": \"1038.HK\",\n \"name\": \"CK Infrastructure Holdings Ltd.\",\n \"market\": \"HK\"\n },\n {\n \"symbol\": \"1044.HK\",\n \"name\": \"Hengan International Group Co. Ltd.\",\n \"market\": \"HK\"\n },\n {\n \"symbol\": \"1093.HK\",\n \"name\": \"CSPC Pharmaceutical Group Ltd.\",\n \"market\": \"HK\"\n },\n { \"symbol\": \"1109.HK\", \"name\": \"China Resources Land Ltd.\", \"market\": \"HK\" },\n { \"symbol\": \"1113.HK\", \"name\": \"CK Asset Holdings Ltd.\", \"market\": \"HK\" },\n {\n \"symbol\": \"1137.HK\",\n \"name\": \"Hong Kong Technology Venture Co. Ltd.\",\n \"market\": \"HK\"\n },\n {\n \"symbol\": \"1177.HK\",\n \"name\": \"Sino Biopharmaceutical Ltd.\",\n \"market\": \"HK\"\n },\n { \"symbol\": \"1208.HK\", \"name\": \"MMG Ltd.\", \"market\": \"HK\" },\n { \"symbol\": \"1211.HK\", \"name\": \"BYD Co. Ltd.\", \"market\": \"HK\" },\n {\n \"symbol\": \"1288.HK\",\n \"name\": \"Agricultural Bank of China Ltd.\",\n \"market\": \"HK\"\n },\n {\n \"symbol\": \"1336.HK\",\n \"name\": \"New China Life Insurance Co. Ltd.\",\n \"market\": \"HK\"\n },\n {\n \"symbol\": \"1359.HK\",\n \"name\": \"China Cinda Asset Management Co. Ltd.\",\n \"market\": \"HK\"\n },\n {\n \"symbol\": \"1398.HK\",\n \"name\": \"Industrial and Commercial Bank of China Ltd.\",\n \"market\": \"HK\"\n },\n {\n \"symbol\": \"1515.HK\",\n \"name\": \"China Resources Medical Holdings Co. Ltd.\",\n \"market\": \"HK\"\n },\n {\n \"symbol\": \"1585.HK\",\n \"name\": \"Yihai International Holding Ltd.\",\n \"market\": \"HK\"\n },\n { \"symbol\": \"1658.HK\", \"name\": \"Post Holdings Ltd.\", \"market\": \"HK\" },\n { \"symbol\": \"1772.HK\", \"name\": \"Ganfeng Lithium Co. Ltd.\", \"market\": \"HK\" },\n { \"symbol\": \"1816.HK\", \"name\": \"CGN Power Co. Ltd.\", \"market\": \"HK\" },\n {\n \"symbol\": \"1876.HK\",\n \"name\": \"Budweiser Brewing Company APAC Ltd.\",\n \"market\": \"HK\"\n },\n { \"symbol\": \"1928.HK\", \"name\": \"Sands China Ltd.\", \"market\": \"HK\" },\n {\n \"symbol\": \"1997.HK\",\n \"name\": \"Wharf Real Estate Investment Co. Ltd.\",\n \"market\": \"HK\"\n },\n {\n \"symbol\": \"2007.HK\",\n \"name\": \"Country Garden Holdings Co. Ltd.\",\n \"market\": \"HK\"\n },\n {\n \"symbol\": \"2018.HK\",\n \"name\": \"AAC Technologies Holdings Inc.\",\n \"market\": \"HK\"\n },\n { \"symbol\": \"2020.HK\", \"name\": \"ANTA Sports Products Ltd.\", \"market\": \"HK\" },\n {\n \"symbol\": \"2196.HK\",\n \"name\": \"Fuyao Glass Industry Group Co. Ltd.\",\n \"market\": \"HK\"\n },\n { \"symbol\": \"2233.HK\", \"name\": \"West China Cement Ltd.\", \"market\": \"HK\" },\n {\n \"symbol\": \"2313.HK\",\n \"name\": \"Shenzhou International Group Holdings Ltd.\",\n \"market\": \"HK\"\n },\n {\n \"symbol\": \"2328.HK\",\n \"name\": \"PICC Property and Casualty Co. Ltd.\",\n \"market\": \"HK\"\n },\n { \"symbol\": \"2331.HK\", \"name\": \"Li Ning Co. Ltd.\", \"market\": \"HK\" },\n {\n \"symbol\": \"2388.HK\",\n \"name\": \"BOC Hong Kong Holdings Ltd.\",\n \"market\": \"HK\"\n },\n {\n \"symbol\": \"2412.HK\",\n \"name\": \"China Merchants Bank Co. Ltd.\",\n \"market\": \"HK\"\n },\n { \"symbol\": \"2428.HK\", \"name\": \"YTO Express Group Co. Ltd.\", \"market\": \"HK\" },\n {\n \"symbol\": \"2600.HK\",\n \"name\": \"China Aluminum International Engineering Corp. Ltd.\",\n \"market\": \"HK\"\n },\n {\n \"symbol\": \"2628.HK\",\n \"name\": \"China Life Insurance Co. Ltd.\",\n \"market\": \"HK\"\n },\n { \"symbol\": \"2688.HK\", \"name\": \"ENN Energy Holdings Ltd.\", \"market\": \"HK\" },\n { \"symbol\": \"2800.HK\", \"name\": \"Tracker Fund of Hong Kong\", \"market\": \"HK\" },\n { \"symbol\": \"2822.HK\", \"name\": \"CSOP FTSE China A50 ETF\", \"market\": \"HK\" },\n {\n \"symbol\": \"2883.HK\",\n \"name\": \"China Oilfield Services Ltd.\",\n \"market\": \"HK\"\n },\n {\n \"symbol\": \"2899.HK\",\n \"name\": \"Zijin Mining Group Co. Ltd.\",\n \"market\": \"HK\"\n },\n {\n \"symbol\": \"3328.HK\",\n \"name\": \"Bank of Communications Co. Ltd.\",\n \"market\": \"HK\"\n },\n { \"symbol\": \"3988.HK\", \"name\": \"Bank of China Ltd.\", \"market\": \"HK\" },\n {\n \"symbol\": \"BABA\",\n \"name\": \"Alibaba Group Holding Ltd. ADR\",\n \"market\": \"US\"\n },\n { \"symbol\": \"JD\", \"name\": \"JD.com Inc. ADR\", \"market\": \"US\" },\n { \"symbol\": \"PDD\", \"name\": \"PDD Holdings Inc. ADR\", \"market\": \"US\" },\n { \"symbol\": \"NTES\", \"name\": \"NetEase Inc. ADR\", \"market\": \"US\" },\n { \"symbol\": \"TAL\", \"name\": \"TAL Education Group ADR\", \"market\": \"US\" },\n { \"symbol\": \"YUMC\", \"name\": \"Yum China Holdings Inc.\", \"market\": \"US\" },\n { \"symbol\": \"ZTO\", \"name\": \"ZTO Express (Cayman) Inc. ADR\", \"market\": \"US\" },\n { \"symbol\": \"BGNE\", \"name\": \"BeiGene Ltd. ADR\", \"market\": \"US\" },\n { \"symbol\": \"GDS\", \"name\": \"GDS Holdings Ltd. ADR\", \"market\": \"US\" },\n { \"symbol\": \"HUYA\", \"name\": \"HUYA Inc. ADR\", \"market\": \"US\" },\n { \"symbol\": \"WB\", \"name\": \"Weibo Corp. ADR\", \"market\": \"US\" },\n { \"symbol\": \"IQ\", \"name\": \"iQIYI Inc. ADR\", \"market\": \"US\" },\n { \"symbol\": \"MOMO\", \"name\": \"Hello Group Inc. ADR\", \"market\": \"US\" },\n { \"symbol\": \"SINA\", \"name\": \"Sina Corp.\", \"market\": \"US\" },\n { \"symbol\": \"BIDU\", \"name\": \"Baidu Inc. ADR\", \"market\": \"US\" },\n { \"symbol\": \"XPEV\", \"name\": \"XPeng Inc. ADR\", \"market\": \"US\" },\n { \"symbol\": \"LI\", \"name\": \"Li Auto Inc. ADR\", \"market\": \"US\" },\n { \"symbol\": \"NIO\", \"name\": \"NIO Inc. ADR\", \"market\": \"US\" },\n { \"symbol\": \"EH\", \"name\": \"EHang Holdings Ltd. ADR\", \"market\": \"US\" },\n {\n \"symbol\": \"TME\",\n \"name\": \"Tencent Music Entertainment Group ADR\",\n \"market\": \"US\"\n },\n { \"symbol\": \"DIDI\", \"name\": \"DiDi Global Inc. ADR\", \"market\": \"US\" },\n { \"symbol\": \"QFIN\", \"name\": \"360 DigiTech Inc. ADR\", \"market\": \"US\" },\n {\n \"symbol\": \"KC\",\n \"name\": \"Kingsoft Cloud Holdings Ltd. ADR\",\n \"market\": \"US\"\n },\n {\n \"symbol\": \"JKS\",\n \"name\": \"JinkoSolar Holding Co. Ltd. ADR\",\n \"market\": \"US\"\n },\n { \"symbol\": \"SOL\", \"name\": \"Emeren Group Ltd. ADR\", \"market\": \"US\" },\n { \"symbol\": \"DQ\", \"name\": \"Daqo New Energy Corp. ADR\", \"market\": \"US\" },\n { \"symbol\": \"CAN\", \"name\": \"Canaan Inc. ADR\", \"market\": \"US\" },\n {\n \"symbol\": \"EDU\",\n \"name\": \"New Oriental Education & Technology Group Inc. ADR\",\n \"market\": \"US\"\n },\n { \"symbol\": \"ATHM\", \"name\": \"Autohome Inc. ADR\", \"market\": \"US\" },\n { \"symbol\": \"BZUN\", \"name\": \"Baozun Inc. ADR\", \"market\": \"US\" },\n { \"symbol\": \"LK\", \"name\": \"Luckin Coffee Inc. ADR\", \"market\": \"US\" },\n { \"symbol\": \"YJ\", \"name\": \"Yunji Inc. ADR\", \"market\": \"US\" },\n { \"symbol\": \"VIOT\", \"name\": \"Viomi Technology Co. Ltd. ADR\", \"market\": \"US\" },\n { \"symbol\": \"WBAI\", \"name\": \"500.com Ltd. ADR\", \"market\": \"US\" },\n { \"symbol\": \"SFUN\", \"name\": \"Fang Holdings Ltd. ADR\", \"market\": \"US\" },\n { \"symbol\": \"CTRP\", \"name\": \"Trip.com Group Ltd. ADR\", \"market\": \"US\" },\n { \"symbol\": \"HTHT\", \"name\": \"H World Group Ltd. ADR\", \"market\": \"US\" },\n { \"symbol\": \"VIPS\", \"name\": \"Vipshop Holdings Ltd. ADR\", \"market\": \"US\" },\n { \"symbol\": \"YY\", \"name\": \"JOYY Inc. ADR\", \"market\": \"US\" },\n {\n \"symbol\": \"ZNH\",\n \"name\": \"China Southern Airlines Co. Ltd. ADR\",\n \"market\": \"US\"\n },\n {\n \"symbol\": \"CEA\",\n \"name\": \"China Eastern Airlines Corp. Ltd. ADR\",\n \"market\": \"US\"\n },\n {\n \"symbol\": \"SNP\",\n \"name\": \"China Petroleum & Chemical Corp. ADR\",\n \"market\": \"US\"\n },\n { \"symbol\": \"PTR\", \"name\": \"PetroChina Co. Ltd. ADR\", \"market\": \"US\" },\n {\n \"symbol\": \"ACH\",\n \"name\": \"Aluminum Corp. of China Ltd. ADR\",\n \"market\": \"US\"\n },\n {\n \"symbol\": \"SHI\",\n \"name\": \"Sinopec Shanghai Petrochemical Co. Ltd. ADR\",\n \"market\": \"US\"\n },\n {\n \"symbol\": \"HNP\",\n \"name\": \"Huaneng Power International Inc. ADR\",\n \"market\": \"US\"\n },\n { \"symbol\": \"CHA\", \"name\": \"China Telecom Corp. Ltd. ADR\", \"market\": \"US\" },\n { \"symbol\": \"CHL\", \"name\": \"China Mobile Ltd. ADR\", \"market\": \"US\" },\n { \"symbol\": \"CMCM\", \"name\": \"Cheetah Mobile Inc. ADR\", \"market\": \"US\" },\n { \"symbol\": \"CJJD\", \"name\": \"China Jo-Jo Drugstores Inc.\", \"market\": \"US\" },\n {\n \"symbol\": \"CNTF\",\n \"name\": \"China TechFaith Wireless Communication Technology Ltd.\",\n \"market\": \"US\"\n },\n {\n \"symbol\": \"CNET\",\n \"name\": \"ZW Data Action Technologies Inc.\",\n \"market\": \"US\"\n },\n { \"symbol\": \"CTK\", \"name\": \"CooTek (Cayman) Inc. ADR\", \"market\": \"US\" },\n { \"symbol\": \"DOGZ\", \"name\": \"Dogness (International) Corp.\", \"market\": \"US\" },\n { \"symbol\": \"FANH\", \"name\": \"Fanhua Inc. ADR\", \"market\": \"US\" },\n {\n \"symbol\": \"GSMG\",\n \"name\": \"Glory Star New Media Group Holdings Ltd.\",\n \"market\": \"US\"\n },\n { \"symbol\": \"JFIN\", \"name\": \"Jiayin Group Inc. ADR\", \"market\": \"US\" },\n { \"symbol\": \"KZIA\", \"name\": \"Kazia Therapeutics Ltd. ADR\", \"market\": \"US\" },\n { \"symbol\": \"LIZI\", \"name\": \"Lizhi Inc. ADR\", \"market\": \"US\" },\n { \"symbol\": \"MDJH\", \"name\": \"MDJM Ltd.\", \"market\": \"US\" },\n { \"symbol\": \"MTC\", \"name\": \"MMTec Inc.\", \"market\": \"US\" },\n { \"symbol\": \"MY\", \"name\": \"MYR Group Inc.\", \"market\": \"US\" },\n { \"symbol\": \"NCTY\", \"name\": \"The9 Ltd. ADR\", \"market\": \"US\" },\n { \"symbol\": \"PUYI\", \"name\": \"Puyi Inc. ADR\", \"market\": \"US\" },\n {\n \"symbol\": \"RAAS\",\n \"name\": \"Cloopen Group Holding Ltd. ADR\",\n \"market\": \"US\"\n },\n { \"symbol\": \"RENN\", \"name\": \"Renren Inc. ADR\", \"market\": \"US\" },\n { \"symbol\": \"SECO\", \"name\": \"Secoo Holding Ltd. ADR\", \"market\": \"US\" },\n { \"symbol\": \"SISI\", \"name\": \"Shineco Inc.\", \"market\": \"US\" },\n { \"symbol\": \"SOS\", \"name\": \"SOS Ltd. ADR\", \"market\": \"US\" },\n { \"symbol\": \"TC\", \"name\": \"TuanChe Ltd. ADR\", \"market\": \"US\" },\n { \"symbol\": \"TEDU\", \"name\": \"Tarena International Inc. ADR\", \"market\": \"US\" },\n { \"symbol\": \"TIGR\", \"name\": \"UP Fintech Holding Ltd. ADR\", \"market\": \"US\" },\n { \"symbol\": \"TOUR\", \"name\": \"Tuniu Corp. ADR\", \"market\": \"US\" },\n { \"symbol\": \"WAFU\", \"name\": \"Wah Fu Education Group Ltd.\", \"market\": \"US\" },\n { \"symbol\": \"XNET\", \"name\": \"Xunlei Ltd. ADR\", \"market\": \"US\" },\n { \"symbol\": \"YRD\", \"name\": \"Yiren Digital Ltd. ADR\", \"market\": \"US\" },\n { \"symbol\": \"ZEPP\", \"name\": \"Zepp Health Corp. ADR\", \"market\": \"US\" },\n {\n \"symbol\": \"ZKIN\",\n \"name\": \"ZK International Group Co. Ltd.\",\n \"market\": \"US\"\n },\n { \"symbol\": \"ZLAB\", \"name\": \"Zai Lab Ltd. ADR\", \"market\": \"US\" },\n { \"symbol\": \"ZM\", \"name\": \"Zoom Video Communications Inc.\", \"market\": \"US\" },\n { \"symbol\": \"SNAP\", \"name\": \"Snap Inc.\", \"market\": \"US\" },\n { \"symbol\": \"SQ\", \"name\": \"Block Inc.\", \"market\": \"US\" },\n { \"symbol\": \"ROKU\", \"name\": \"Roku Inc.\", \"market\": \"US\" },\n { \"symbol\": \"DOCU\", \"name\": \"DocuSign Inc.\", \"market\": \"US\" },\n { \"symbol\": \"SHOP\", \"name\": \"Shopify Inc.\", \"market\": \"US\" },\n { \"symbol\": \"TWLO\", \"name\": \"Twilio Inc.\", \"market\": \"US\" },\n { \"symbol\": \"CRWD\", \"name\": \"CrowdStrike Holdings Inc.\", \"market\": \"US\" },\n { \"symbol\": \"OKTA\", \"name\": \"Okta Inc.\", \"market\": \"US\" },\n { \"symbol\": \"ZS\", \"name\": \"Zscaler Inc.\", \"market\": \"US\" },\n { \"symbol\": \"DDOG\", \"name\": \"Datadog Inc.\", \"market\": \"US\" },\n { \"symbol\": \"MDB\", \"name\": \"MongoDB Inc.\", \"market\": \"US\" },\n { \"symbol\": \"TEAM\", \"name\": \"Atlassian Corp.\", \"market\": \"US\" },\n { \"symbol\": \"FSLY\", \"name\": \"Fastly Inc.\", \"market\": \"US\" },\n { \"symbol\": \"NET\", \"name\": \"Cloudflare Inc.\", \"market\": \"US\" },\n { \"symbol\": \"PLAN\", \"name\": \"Anaplan Inc.\", \"market\": \"US\" },\n { \"symbol\": \"ESTC\", \"name\": \"Elastic N.V.\", \"market\": \"US\" },\n { \"symbol\": \"SMAR\", \"name\": \"Smartsheet Inc.\", \"market\": \"US\" },\n { \"symbol\": \"WORK\", \"name\": \"Slack Technologies Inc.\", \"market\": \"US\" },\n { \"symbol\": \"DOCS\", \"name\": \"Doximity Inc.\", \"market\": \"US\" },\n { \"symbol\": \"BILL\", \"name\": \"Bill Holdings Inc.\", \"market\": \"US\" },\n { \"symbol\": \"U\", \"name\": \"Unity Software Inc.\", \"market\": \"US\" },\n { \"symbol\": \"RBLX\", \"name\": \"Roblox Corp.\", \"market\": \"US\" },\n { \"symbol\": \"COIN\", \"name\": \"Coinbase Global Inc.\", \"market\": \"US\" },\n { \"symbol\": \"HOOD\", \"name\": \"Robinhood Markets Inc.\", \"market\": \"US\" },\n { \"symbol\": \"ABNB\", \"name\": \"Airbnb Inc.\", \"market\": \"US\" },\n { \"symbol\": \"LYFT\", \"name\": \"Lyft Inc.\", \"market\": \"US\" },\n { \"symbol\": \"UBER\", \"name\": \"Uber Technologies Inc.\", \"market\": \"US\" },\n { \"symbol\": \"DD\", \"name\": \"DuPont de Nemours Inc.\", \"market\": \"US\" },\n { \"symbol\": \"VEEV\", \"name\": \"Veeva Systems Inc.\", \"market\": \"US\" },\n { \"symbol\": \"FTNT\", \"name\": \"Fortinet Inc.\", \"market\": \"US\" },\n { \"symbol\": \"PINS\", \"name\": \"Pinterest Inc.\", \"market\": \"US\" },\n { \"symbol\": \"ETSY\", \"name\": \"Etsy Inc.\", \"market\": \"US\" },\n { \"symbol\": \"ALGN\", \"name\": \"Align Technology Inc.\", \"market\": \"US\" },\n { \"symbol\": \"TDOC\", \"name\": \"Teladoc Health Inc.\", \"market\": \"US\" },\n { \"symbol\": \"DOCS\", \"name\": \"Doximity Inc.\", \"market\": \"US\" },\n { \"symbol\": \"MTCH\", \"name\": \"Match Group Inc.\", \"market\": \"US\" },\n { \"symbol\": \"SPLK\", \"name\": \"Splunk Inc.\", \"market\": \"US\" },\n { \"symbol\": \"WDAY\", \"name\": \"Workday Inc.\", \"market\": \"US\" },\n { \"symbol\": \"HUBS\", \"name\": \"HubSpot Inc.\", \"market\": \"US\" },\n { \"symbol\": \"TTD\", \"name\": \"The Trade Desk Inc.\", \"market\": \"US\" },\n { \"symbol\": \"PAYC\", \"name\": \"Paycom Software Inc.\", \"market\": \"US\" },\n { \"symbol\": \"NOW\", \"name\": \"ServiceNow Inc.\", \"market\": \"US\" },\n { \"symbol\": \"SNOW\", \"name\": \"Snowflake Inc.\", \"market\": \"US\" },\n { \"symbol\": \"ZS\", \"name\": \"Zscaler Inc.\", \"market\": \"US\" },\n { \"symbol\": \"DDOG\", \"name\": \"Datadog Inc.\", \"market\": \"US\" },\n { \"symbol\": \"MDB\", \"name\": \"MongoDB Inc.\", \"market\": \"US\" },\n { \"symbol\": \"TEAM\", \"name\": \"Atlassian Corp.\", \"market\": \"US\" },\n { \"symbol\": \"FSLY\", \"name\": \"Fastly Inc.\", \"market\": \"US\" },\n { \"symbol\": \"NET\", \"name\": \"Cloudflare Inc.\", \"market\": \"US\" },\n { \"symbol\": \"PLAN\", \"name\": \"Anaplan Inc.\", \"market\": \"US\" },\n { \"symbol\": \"ESTC\", \"name\": \"Elastic N.V.\", \"market\": \"US\" },\n { \"symbol\": \"SMAR\", \"name\": \"Smartsheet Inc.\", \"market\": \"US\" },\n { \"symbol\": \"WORK\", \"name\": \"Slack Technologies Inc.\", \"market\": \"US\" },\n { \"symbol\": \"DOCS\", \"name\": \"Doximity Inc.\", \"market\": \"US\" },\n { \"symbol\": \"BILL\", \"name\": \"Bill Holdings Inc.\", \"market\": \"US\" },\n { \"symbol\": \"U\", \"name\": \"Unity Software Inc.\", \"market\": \"US\" },\n { \"symbol\": \"RBLX\", \"name\": \"Roblox Corp.\", \"market\": \"US\" },\n { \"symbol\": \"COIN\", \"name\": \"Coinbase Global Inc.\", \"market\": \"US\" },\n { \"symbol\": \"HOOD\", \"name\": \"Robinhood Markets Inc.\", \"market\": \"US\" },\n { \"symbol\": \"ABNB\", \"name\": \"Airbnb Inc.\", \"market\": \"US\" },\n { \"symbol\": \"LYFT\", \"name\": \"Lyft Inc.\", \"market\": \"US\" },\n { \"symbol\": \"UBER\", \"name\": \"Uber Technologies Inc.\", \"market\": \"US\" },\n { \"symbol\": \"DD\", \"name\": \"DuPont de Nemours Inc.\", \"market\": \"US\" },\n { \"symbol\": \"VEEV\", \"name\": \"Veeva Systems Inc.\", \"market\": \"US\" },\n { \"symbol\": \"FTNT\", \"name\": \"Fortinet Inc.\", \"market\": \"US\" },\n { \"symbol\": \"PINS\", \"name\": \"Pinterest Inc.\", \"market\": \"US\" },\n { \"symbol\": \"ETSY\", \"name\": \"Etsy Inc.\", \"market\": \"US\" },\n { \"symbol\": \"ALGN\", \"name\": \"Align Technology Inc.\", \"market\": \"US\" },\n { \"symbol\": \"TDOC\", \"name\": \"Teladoc Health Inc.\", \"market\": \"US\" },\n { \"symbol\": \"MTCH\", \"name\": \"Match Group Inc.\", \"market\": \"US\" },\n { \"symbol\": \"SPLK\", \"name\": \"Splunk Inc.\", \"market\": \"US\" },\n { \"symbol\": \"WDAY\", \"name\": \"Workday Inc.\", \"market\": \"US\" },\n { \"symbol\": \"HUBS\", \"name\": \"HubSpot Inc.\", \"market\": \"US\" },\n { \"symbol\": \"TTD\", \"name\": \"The Trade Desk Inc.\", \"market\": \"US\" },\n { \"symbol\": \"PAYC\", \"name\": \"Paycom Software Inc.\", \"market\": \"US\" },\n { \"symbol\": \"NOW\", \"name\": \"ServiceNow Inc.\", \"market\": \"US\" },\n { \"symbol\": \"SNOW\", \"name\": \"Snowflake Inc.\", \"market\": \"US\" },\n { \"symbol\": \"DOCU\", \"name\": \"DocuSign Inc.\", \"market\": \"US\" },\n { \"symbol\": \"SHOP\", \"name\": \"Shopify Inc.\", \"market\": \"US\" },\n { \"symbol\": \"TWLO\", \"name\": \"Twilio Inc.\", \"market\": \"US\" },\n { \"symbol\": \"CRWD\", \"name\": \"CrowdStrike Holdings Inc.\", \"market\": \"US\" },\n { \"symbol\": \"OKTA\", \"name\": \"Okta Inc.\", \"market\": \"US\" },\n { \"symbol\": \"ZS\", \"name\": \"Zscaler Inc.\", \"market\": \"US\" },\n { \"symbol\": \"DDOG\", \"name\": \"Datadog Inc.\", \"market\": \"US\" },\n { \"symbol\": \"MDB\", \"name\": \"MongoDB Inc.\", \"market\": \"US\" },\n { \"symbol\": \"TEAM\", \"name\": \"Atlassian Corp.\", \"market\": \"US\" },\n { \"symbol\": \"FSLY\", \"name\": \"Fastly Inc.\", \"market\": \"US\" },\n { \"symbol\": \"NET\", \"name\": \"Cloudflare Inc.\", \"market\": \"US\" },\n { \"symbol\": \"PLAN\", \"name\": \"Anaplan Inc.\", \"market\": \"US\" },\n { \"symbol\": \"ESTC\", \"name\": \"Elastic N.V.\", \"market\": \"US\" },\n { \"symbol\": \"SMAR\", \"name\": \"Smartsheet Inc.\", \"market\": \"US\" },\n { \"symbol\": \"WORK\", \"name\": \"Slack Technologies Inc.\", \"market\": \"US\" },\n { \"symbol\": \"DOCS\", \"name\": \"Doximity Inc.\", \"market\": \"US\" },\n { \"symbol\": \"BILL\", \"name\": \"Bill Holdings Inc.\", \"market\": \"US\" },\n { \"symbol\": \"U\", \"name\": \"Unity Software Inc.\", \"market\": \"US\" },\n { \"symbol\": \"RBLX\", \"name\": \"Roblox Corp.\", \"market\": \"US\" },\n { \"symbol\": \"COIN\", \"name\": \"Coinbase Global Inc.\", \"market\": \"US\" },\n { \"symbol\": \"HOOD\", \"name\": \"Robinhood Markets Inc.\", \"market\": \"US\" },\n { \"symbol\": \"ABNB\", \"name\": \"Airbnb Inc.\", \"market\": \"US\" },\n { \"symbol\": \"LYFT\", \"name\": \"Lyft Inc.\", \"market\": \"US\" },\n { \"symbol\": \"UBER\", \"name\": \"Uber Technologies Inc.\", \"market\": \"US\" }\n]\n" }, { "path": "crates/story/src/fixtures/countries.json", "content": "[\n { \"name\": \"Afghanistan\", \"code\": \"AF\" },\n { \"name\": \"Åland Islands\", \"code\": \"AX\" },\n { \"name\": \"Albania\", \"code\": \"AL\" },\n { \"name\": \"Algeria\", \"code\": \"DZ\" },\n { \"name\": \"American Samoa\", \"code\": \"AS\" },\n { \"name\": \"AndorrA\", \"code\": \"AD\" },\n { \"name\": \"Angola\", \"code\": \"AO\" },\n { \"name\": \"Anguilla\", \"code\": \"AI\" },\n { \"name\": \"Antarctica\", \"code\": \"AQ\" },\n { \"name\": \"Antigua and Barbuda\", \"code\": \"AG\" },\n { \"name\": \"Argentina\", \"code\": \"AR\" },\n { \"name\": \"Armenia\", \"code\": \"AM\" },\n { \"name\": \"Aruba\", \"code\": \"AW\" },\n { \"name\": \"Australia\", \"code\": \"AU\" },\n { \"name\": \"Austria\", \"code\": \"AT\" },\n { \"name\": \"Azerbaijan\", \"code\": \"AZ\" },\n { \"name\": \"Bahamas\", \"code\": \"BS\" },\n { \"name\": \"Bahrain\", \"code\": \"BH\" },\n { \"name\": \"Bangladesh\", \"code\": \"BD\" },\n { \"name\": \"Barbados\", \"code\": \"BB\" },\n { \"name\": \"Belarus\", \"code\": \"BY\" },\n { \"name\": \"Belgium\", \"code\": \"BE\" },\n { \"name\": \"Belize\", \"code\": \"BZ\" },\n { \"name\": \"Benin\", \"code\": \"BJ\" },\n { \"name\": \"Bermuda\", \"code\": \"BM\" },\n { \"name\": \"Bhutan\", \"code\": \"BT\" },\n { \"name\": \"Bolivia\", \"code\": \"BO\" },\n { \"name\": \"Bosnia and Herzegovina\", \"code\": \"BA\" },\n { \"name\": \"Botswana\", \"code\": \"BW\" },\n { \"name\": \"Bouvet Island\", \"code\": \"BV\" },\n { \"name\": \"Brazil\", \"code\": \"BR\" },\n { \"name\": \"British Indian Ocean Territory\", \"code\": \"IO\" },\n { \"name\": \"Brunei Darussalam\", \"code\": \"BN\" },\n { \"name\": \"Bulgaria\", \"code\": \"BG\" },\n { \"name\": \"Burkina Faso\", \"code\": \"BF\" },\n { \"name\": \"Burundi\", \"code\": \"BI\" },\n { \"name\": \"Cambodia\", \"code\": \"KH\" },\n { \"name\": \"Cameroon\", \"code\": \"CM\" },\n { \"name\": \"Canada\", \"code\": \"CA\" },\n { \"name\": \"Cape Verde\", \"code\": \"CV\" },\n { \"name\": \"Cayman Islands\", \"code\": \"KY\" },\n { \"name\": \"Central African Republic\", \"code\": \"CF\" },\n { \"name\": \"Chad\", \"code\": \"TD\" },\n { \"name\": \"Chile\", \"code\": \"CL\" },\n { \"name\": \"China\", \"code\": \"CN\" },\n { \"name\": \"Christmas Island\", \"code\": \"CX\" },\n { \"name\": \"Cocos (Keeling) Islands\", \"code\": \"CC\" },\n { \"name\": \"Colombia\", \"code\": \"CO\" },\n { \"name\": \"Comoros\", \"code\": \"KM\" },\n { \"name\": \"Congo\", \"code\": \"CG\" },\n { \"name\": \"Congo, The Democratic Republic of the\", \"code\": \"CD\" },\n { \"name\": \"Cook Islands\", \"code\": \"CK\" },\n { \"name\": \"Costa Rica\", \"code\": \"CR\" },\n { \"name\": \"Cote D'Ivoire\", \"code\": \"CI\" },\n { \"name\": \"Croatia\", \"code\": \"HR\" },\n { \"name\": \"Cuba\", \"code\": \"CU\" },\n { \"name\": \"Cyprus\", \"code\": \"CY\" },\n { \"name\": \"Czech Republic\", \"code\": \"CZ\" },\n { \"name\": \"Denmark\", \"code\": \"DK\" },\n { \"name\": \"Djibouti\", \"code\": \"DJ\" },\n { \"name\": \"Dominica\", \"code\": \"DM\" },\n { \"name\": \"Dominican Republic\", \"code\": \"DO\" },\n { \"name\": \"Ecuador\", \"code\": \"EC\" },\n { \"name\": \"Egypt\", \"code\": \"EG\" },\n { \"name\": \"El Salvador\", \"code\": \"SV\" },\n { \"name\": \"Equatorial Guinea\", \"code\": \"GQ\" },\n { \"name\": \"Eritrea\", \"code\": \"ER\" },\n { \"name\": \"Estonia\", \"code\": \"EE\" },\n { \"name\": \"Ethiopia\", \"code\": \"ET\" },\n { \"name\": \"Falkland Islands (Malvinas)\", \"code\": \"FK\" },\n { \"name\": \"Faroe Islands\", \"code\": \"FO\" },\n { \"name\": \"Fiji\", \"code\": \"FJ\" },\n { \"name\": \"Finland\", \"code\": \"FI\" },\n { \"name\": \"France\", \"code\": \"FR\" },\n { \"name\": \"French Guiana\", \"code\": \"GF\" },\n { \"name\": \"French Polynesia\", \"code\": \"PF\" },\n { \"name\": \"French Southern Territories\", \"code\": \"TF\" },\n { \"name\": \"Gabon\", \"code\": \"GA\" },\n { \"name\": \"Gambia\", \"code\": \"GM\" },\n { \"name\": \"Georgia\", \"code\": \"GE\" },\n { \"name\": \"Germany\", \"code\": \"DE\" },\n { \"name\": \"Ghana\", \"code\": \"GH\" },\n { \"name\": \"Gibraltar\", \"code\": \"GI\" },\n { \"name\": \"Greece\", \"code\": \"GR\" },\n { \"name\": \"Greenland\", \"code\": \"GL\" },\n { \"name\": \"Grenada\", \"code\": \"GD\" },\n { \"name\": \"Guadeloupe\", \"code\": \"GP\" },\n { \"name\": \"Guam\", \"code\": \"GU\" },\n { \"name\": \"Guatemala\", \"code\": \"GT\" },\n { \"name\": \"Guernsey\", \"code\": \"GG\" },\n { \"name\": \"Guinea\", \"code\": \"GN\" },\n { \"name\": \"Guinea-Bissau\", \"code\": \"GW\" },\n { \"name\": \"Guyana\", \"code\": \"GY\" },\n { \"name\": \"Haiti\", \"code\": \"HT\" },\n { \"name\": \"Heard Island and Mcdonald Islands\", \"code\": \"HM\" },\n { \"name\": \"Holy See (Vatican City State)\", \"code\": \"VA\" },\n { \"name\": \"Honduras\", \"code\": \"HN\" },\n { \"name\": \"Hong Kong\", \"code\": \"HK\" },\n { \"name\": \"Hungary\", \"code\": \"HU\" },\n { \"name\": \"Iceland\", \"code\": \"IS\" },\n { \"name\": \"India\", \"code\": \"IN\" },\n { \"name\": \"Indonesia\", \"code\": \"ID\" },\n { \"name\": \"Iran, Islamic Republic Of\", \"code\": \"IR\" },\n { \"name\": \"Iraq\", \"code\": \"IQ\" },\n { \"name\": \"Ireland\", \"code\": \"IE\" },\n { \"name\": \"Isle of Man\", \"code\": \"IM\" },\n { \"name\": \"Israel\", \"code\": \"IL\" },\n { \"name\": \"Italy\", \"code\": \"IT\" },\n { \"name\": \"Jamaica\", \"code\": \"JM\" },\n { \"name\": \"Japan\", \"code\": \"JP\" },\n { \"name\": \"Jersey\", \"code\": \"JE\" },\n { \"name\": \"Jordan\", \"code\": \"JO\" },\n { \"name\": \"Kazakhstan\", \"code\": \"KZ\" },\n { \"name\": \"Kenya\", \"code\": \"KE\" },\n { \"name\": \"Kiribati\", \"code\": \"KI\" },\n { \"name\": \"Korea, Democratic People'S Republic of\", \"code\": \"KP\" },\n { \"name\": \"Korea, Republic of\", \"code\": \"KR\" },\n { \"name\": \"Kuwait\", \"code\": \"KW\" },\n { \"name\": \"Kyrgyzstan\", \"code\": \"KG\" },\n { \"name\": \"Lao People'S Democratic Republic\", \"code\": \"LA\" },\n { \"name\": \"Latvia\", \"code\": \"LV\" },\n { \"name\": \"Lebanon\", \"code\": \"LB\" },\n { \"name\": \"Lesotho\", \"code\": \"LS\" },\n { \"name\": \"Liberia\", \"code\": \"LR\" },\n { \"name\": \"Libyan Arab Jamahiriya\", \"code\": \"LY\" },\n { \"name\": \"Liechtenstein\", \"code\": \"LI\" },\n { \"name\": \"Lithuania\", \"code\": \"LT\" },\n { \"name\": \"Luxembourg\", \"code\": \"LU\" },\n { \"name\": \"Macao\", \"code\": \"MO\" },\n { \"name\": \"Macedonia, The Former Yugoslav Republic of\", \"code\": \"MK\" },\n { \"name\": \"Madagascar\", \"code\": \"MG\" },\n { \"name\": \"Malawi\", \"code\": \"MW\" },\n { \"name\": \"Malaysia\", \"code\": \"MY\" },\n { \"name\": \"Maldives\", \"code\": \"MV\" },\n { \"name\": \"Mali\", \"code\": \"ML\" },\n { \"name\": \"Malta\", \"code\": \"MT\" },\n { \"name\": \"Marshall Islands\", \"code\": \"MH\" },\n { \"name\": \"Martinique\", \"code\": \"MQ\" },\n { \"name\": \"Mauritania\", \"code\": \"MR\" },\n { \"name\": \"Mauritius\", \"code\": \"MU\" },\n { \"name\": \"Mayotte\", \"code\": \"YT\" },\n { \"name\": \"Mexico\", \"code\": \"MX\" },\n { \"name\": \"Micronesia, Federated States of\", \"code\": \"FM\" },\n { \"name\": \"Moldova, Republic of\", \"code\": \"MD\" },\n { \"name\": \"Monaco\", \"code\": \"MC\" },\n { \"name\": \"Mongolia\", \"code\": \"MN\" },\n { \"name\": \"Montserrat\", \"code\": \"MS\" },\n { \"name\": \"Morocco\", \"code\": \"MA\" },\n { \"name\": \"Mozambique\", \"code\": \"MZ\" },\n { \"name\": \"Myanmar\", \"code\": \"MM\" },\n { \"name\": \"Namibia\", \"code\": \"NA\" },\n { \"name\": \"Nauru\", \"code\": \"NR\" },\n { \"name\": \"Nepal\", \"code\": \"NP\" },\n { \"name\": \"Netherlands\", \"code\": \"NL\" },\n { \"name\": \"Netherlands Antilles\", \"code\": \"AN\" },\n { \"name\": \"New Caledonia\", \"code\": \"NC\" },\n { \"name\": \"New Zealand\", \"code\": \"NZ\" },\n { \"name\": \"Nicaragua\", \"code\": \"NI\" },\n { \"name\": \"Niger\", \"code\": \"NE\" },\n { \"name\": \"Nigeria\", \"code\": \"NG\" },\n { \"name\": \"Niue\", \"code\": \"NU\" },\n { \"name\": \"Norfolk Island\", \"code\": \"NF\" },\n { \"name\": \"Northern Mariana Islands\", \"code\": \"MP\" },\n { \"name\": \"Norway\", \"code\": \"NO\" },\n { \"name\": \"Oman\", \"code\": \"OM\" },\n { \"name\": \"Pakistan\", \"code\": \"PK\" },\n { \"name\": \"Palau\", \"code\": \"PW\" },\n { \"name\": \"Palestinian Territory, Occupied\", \"code\": \"PS\" },\n { \"name\": \"Panama\", \"code\": \"PA\" },\n { \"name\": \"Papua New Guinea\", \"code\": \"PG\" },\n { \"name\": \"Paraguay\", \"code\": \"PY\" },\n { \"name\": \"Peru\", \"code\": \"PE\" },\n { \"name\": \"Philippines\", \"code\": \"PH\" },\n { \"name\": \"Pitcairn\", \"code\": \"PN\" },\n { \"name\": \"Poland\", \"code\": \"PL\" },\n { \"name\": \"Portugal\", \"code\": \"PT\" },\n { \"name\": \"Puerto Rico\", \"code\": \"PR\" },\n { \"name\": \"Qatar\", \"code\": \"QA\" },\n { \"name\": \"Reunion\", \"code\": \"RE\" },\n { \"name\": \"Romania\", \"code\": \"RO\" },\n { \"name\": \"Russian Federation\", \"code\": \"RU\" },\n { \"name\": \"RWANDA\", \"code\": \"RW\" },\n { \"name\": \"Saint Helena\", \"code\": \"SH\" },\n { \"name\": \"Saint Kitts and Nevis\", \"code\": \"KN\" },\n { \"name\": \"Saint Lucia\", \"code\": \"LC\" },\n { \"name\": \"Saint Pierre and Miquelon\", \"code\": \"PM\" },\n { \"name\": \"Saint Vincent and the Grenadines\", \"code\": \"VC\" },\n { \"name\": \"Samoa\", \"code\": \"WS\" },\n { \"name\": \"San Marino\", \"code\": \"SM\" },\n { \"name\": \"Sao Tome and Principe\", \"code\": \"ST\" },\n { \"name\": \"Saudi Arabia\", \"code\": \"SA\" },\n { \"name\": \"Senegal\", \"code\": \"SN\" },\n { \"name\": \"Serbia and Montenegro\", \"code\": \"CS\" },\n { \"name\": \"Seychelles\", \"code\": \"SC\" },\n { \"name\": \"Sierra Leone\", \"code\": \"SL\" },\n { \"name\": \"Singapore\", \"code\": \"SG\" },\n { \"name\": \"Slovakia\", \"code\": \"SK\" },\n { \"name\": \"Slovenia\", \"code\": \"SI\" },\n { \"name\": \"Solomon Islands\", \"code\": \"SB\" },\n { \"name\": \"Somalia\", \"code\": \"SO\" },\n { \"name\": \"South Africa\", \"code\": \"ZA\" },\n { \"name\": \"South Georgia and the South Sandwich Islands\", \"code\": \"GS\" },\n { \"name\": \"Spain\", \"code\": \"ES\" },\n { \"name\": \"Sri Lanka\", \"code\": \"LK\" },\n { \"name\": \"Sudan\", \"code\": \"SD\" },\n { \"name\": \"Suriname\", \"code\": \"SR\" },\n { \"name\": \"Svalbard and Jan Mayen\", \"code\": \"SJ\" },\n { \"name\": \"Swaziland\", \"code\": \"SZ\" },\n { \"name\": \"Sweden\", \"code\": \"SE\" },\n { \"name\": \"Switzerland\", \"code\": \"CH\" },\n { \"name\": \"Syrian Arab Republic\", \"code\": \"SY\" },\n { \"name\": \"Tajikistan\", \"code\": \"TJ\" },\n { \"name\": \"Tanzania, United Republic of\", \"code\": \"TZ\" },\n { \"name\": \"Thailand\", \"code\": \"TH\" },\n { \"name\": \"Timor-Leste\", \"code\": \"TL\" },\n { \"name\": \"Togo\", \"code\": \"TG\" },\n { \"name\": \"Tokelau\", \"code\": \"TK\" },\n { \"name\": \"Tonga\", \"code\": \"TO\" },\n { \"name\": \"Trinidad and Tobago\", \"code\": \"TT\" },\n { \"name\": \"Tunisia\", \"code\": \"TN\" },\n { \"name\": \"Turkey\", \"code\": \"TR\" },\n { \"name\": \"Turkmenistan\", \"code\": \"TM\" },\n { \"name\": \"Turks and Caicos Islands\", \"code\": \"TC\" },\n { \"name\": \"Tuvalu\", \"code\": \"TV\" },\n { \"name\": \"Uganda\", \"code\": \"UG\" },\n { \"name\": \"Ukraine\", \"code\": \"UA\" },\n { \"name\": \"United Arab Emirates\", \"code\": \"AE\" },\n { \"name\": \"United Kingdom\", \"code\": \"GB\" },\n { \"name\": \"United States\", \"code\": \"US\" },\n { \"name\": \"United States Minor Outlying Islands\", \"code\": \"UM\" },\n { \"name\": \"Uruguay\", \"code\": \"UY\" },\n { \"name\": \"Uzbekistan\", \"code\": \"UZ\" },\n { \"name\": \"Vanuatu\", \"code\": \"VU\" },\n { \"name\": \"Venezuela\", \"code\": \"VE\" },\n { \"name\": \"Viet Nam\", \"code\": \"VN\" },\n { \"name\": \"Virgin Islands, British\", \"code\": \"VG\" },\n { \"name\": \"Virgin Islands, U.S.\", \"code\": \"VI\" },\n { \"name\": \"Wallis and Futuna\", \"code\": \"WF\" },\n { \"name\": \"Western Sahara\", \"code\": \"EH\" },\n { \"name\": \"Yemen\", \"code\": \"YE\" },\n { \"name\": \"Zambia\", \"code\": \"ZM\" },\n { \"name\": \"Zimbabwe\", \"code\": \"ZW\" }\n]\n" }, { "path": "crates/story/src/fixtures/daily-devices.json", "content": "[\n {\n \"date\": \"Apr 1\",\n \"desktop\": 222,\n \"mobile\": 111,\n \"tablet\": 67,\n \"watch\": 28\n },\n {\n \"date\": \"Apr 2\",\n \"desktop\": 97,\n \"mobile\": 48,\n \"tablet\": 29,\n \"watch\": 12\n },\n {\n \"date\": \"Apr 3\",\n \"desktop\": 167,\n \"mobile\": 84,\n \"tablet\": 50,\n \"watch\": 21\n },\n {\n \"date\": \"Apr 4\",\n \"desktop\": 242,\n \"mobile\": 121,\n \"tablet\": 73,\n \"watch\": 30\n },\n {\n \"date\": \"Apr 5\",\n \"desktop\": 373,\n \"mobile\": 187,\n \"tablet\": 112,\n \"watch\": 47\n },\n {\n \"date\": \"Apr 6\",\n \"desktop\": 301,\n \"mobile\": 151,\n \"tablet\": 91,\n \"watch\": 38\n },\n {\n \"date\": \"Apr 7\",\n \"desktop\": 245,\n \"mobile\": 123,\n \"tablet\": 74,\n \"watch\": 31\n },\n {\n \"date\": \"Apr 8\",\n \"desktop\": 409,\n \"mobile\": 205,\n \"tablet\": 123,\n \"watch\": 51\n },\n {\n \"date\": \"Apr 9\",\n \"desktop\": 59,\n \"mobile\": 30,\n \"tablet\": 18,\n \"watch\": 8\n },\n {\n \"date\": \"Apr 10\",\n \"desktop\": 261,\n \"mobile\": 131,\n \"tablet\": 79,\n \"watch\": 33\n },\n {\n \"date\": \"Apr 11\",\n \"desktop\": 327,\n \"mobile\": 164,\n \"tablet\": 98,\n \"watch\": 41\n },\n {\n \"date\": \"Apr 12\",\n \"desktop\": 292,\n \"mobile\": 146,\n \"tablet\": 88,\n \"watch\": 36\n },\n {\n \"date\": \"Apr 13\",\n \"desktop\": 342,\n \"mobile\": 171,\n \"tablet\": 103,\n \"watch\": 43\n },\n {\n \"date\": \"Apr 14\",\n \"desktop\": 137,\n \"mobile\": 69,\n \"tablet\": 41,\n \"watch\": 17\n },\n {\n \"date\": \"Apr 15\",\n \"desktop\": 120,\n \"mobile\": 60,\n \"tablet\": 36,\n \"watch\": 15\n },\n {\n \"date\": \"Apr 16\",\n \"desktop\": 138,\n \"mobile\": 69,\n \"tablet\": 41,\n \"watch\": 17\n },\n {\n \"date\": \"Apr 17\",\n \"desktop\": 446,\n \"mobile\": 223,\n \"tablet\": 134,\n \"watch\": 56\n },\n {\n \"date\": \"Apr 18\",\n \"desktop\": 364,\n \"mobile\": 182,\n \"tablet\": 109,\n \"watch\": 46\n },\n {\n \"date\": \"Apr 19\",\n \"desktop\": 243,\n \"mobile\": 122,\n \"tablet\": 73,\n \"watch\": 30\n },\n {\n \"date\": \"Apr 20\",\n \"desktop\": 89,\n \"mobile\": 44,\n \"tablet\": 26,\n \"watch\": 11\n },\n {\n \"date\": \"Apr 21\",\n \"desktop\": 137,\n \"mobile\": 69,\n \"tablet\": 41,\n \"watch\": 17\n },\n {\n \"date\": \"Apr 22\",\n \"desktop\": 224,\n \"mobile\": 112,\n \"tablet\": 67,\n \"watch\": 28\n },\n {\n \"date\": \"Apr 23\",\n \"desktop\": 138,\n \"mobile\": 69,\n \"tablet\": 41,\n \"watch\": 17\n },\n {\n \"date\": \"Apr 24\",\n \"desktop\": 387,\n \"mobile\": 194,\n \"tablet\": 116,\n \"watch\": 48\n },\n {\n \"date\": \"Apr 25\",\n \"desktop\": 215,\n \"mobile\": 108,\n \"tablet\": 65,\n \"watch\": 27\n },\n {\n \"date\": \"Apr 26\",\n \"desktop\": 75,\n \"mobile\": 38,\n \"tablet\": 23,\n \"watch\": 10\n },\n {\n \"date\": \"Apr 27\",\n \"desktop\": 383,\n \"mobile\": 192,\n \"tablet\": 115,\n \"watch\": 48\n },\n {\n \"date\": \"Apr 28\",\n \"desktop\": 122,\n \"mobile\": 61,\n \"tablet\": 37,\n \"watch\": 15\n },\n {\n \"date\": \"Apr 29\",\n \"desktop\": 315,\n \"mobile\": 158,\n \"tablet\": 95,\n \"watch\": 40\n },\n {\n \"date\": \"Apr 30\",\n \"desktop\": 454,\n \"mobile\": 227,\n \"tablet\": 136,\n \"watch\": 57\n },\n {\n \"date\": \"May 1\",\n \"desktop\": 165,\n \"mobile\": 82,\n \"tablet\": 49,\n \"watch\": 20\n },\n {\n \"date\": \"May 2\",\n \"desktop\": 293,\n \"mobile\": 146,\n \"tablet\": 88,\n \"watch\": 36\n },\n {\n \"date\": \"May 3\",\n \"desktop\": 247,\n \"mobile\": 124,\n \"tablet\": 74,\n \"watch\": 31\n },\n {\n \"date\": \"May 4\",\n \"desktop\": 385,\n \"mobile\": 192,\n \"tablet\": 115,\n \"watch\": 48\n },\n {\n \"date\": \"May 5\",\n \"desktop\": 481,\n \"mobile\": 241,\n \"tablet\": 145,\n \"watch\": 60\n },\n {\n \"date\": \"May 6\",\n \"desktop\": 498,\n \"mobile\": 249,\n \"tablet\": 149,\n \"watch\": 62\n },\n {\n \"date\": \"May 7\",\n \"desktop\": 388,\n \"mobile\": 194,\n \"tablet\": 116,\n \"watch\": 48\n },\n {\n \"date\": \"May 8\",\n \"desktop\": 149,\n \"mobile\": 74,\n \"tablet\": 44,\n \"watch\": 18\n },\n {\n \"date\": \"May 9\",\n \"desktop\": 227,\n \"mobile\": 114,\n \"tablet\": 68,\n \"watch\": 28\n },\n {\n \"date\": \"May 10\",\n \"desktop\": 293,\n \"mobile\": 146,\n \"tablet\": 88,\n \"watch\": 36\n },\n {\n \"date\": \"May 11\",\n \"desktop\": 335,\n \"mobile\": 168,\n \"tablet\": 101,\n \"watch\": 42\n },\n {\n \"date\": \"May 12\",\n \"desktop\": 197,\n \"mobile\": 98,\n \"tablet\": 59,\n \"watch\": 24\n },\n {\n \"date\": \"May 13\",\n \"desktop\": 197,\n \"mobile\": 98,\n \"tablet\": 59,\n \"watch\": 24\n },\n {\n \"date\": \"May 14\",\n \"desktop\": 448,\n \"mobile\": 224,\n \"tablet\": 134,\n \"watch\": 56\n },\n {\n \"date\": \"May 15\",\n \"desktop\": 473,\n \"mobile\": 236,\n \"tablet\": 142,\n \"watch\": 59\n },\n {\n \"date\": \"May 16\",\n \"desktop\": 338,\n \"mobile\": 169,\n \"tablet\": 101,\n \"watch\": 42\n },\n {\n \"date\": \"May 17\",\n \"desktop\": 499,\n \"mobile\": 250,\n \"tablet\": 150,\n \"watch\": 62\n },\n {\n \"date\": \"May 18\",\n \"desktop\": 315,\n \"mobile\": 158,\n \"tablet\": 95,\n \"watch\": 40\n },\n {\n \"date\": \"May 19\",\n \"desktop\": 235,\n \"mobile\": 118,\n \"tablet\": 71,\n \"watch\": 30\n },\n {\n \"date\": \"May 20\",\n \"desktop\": 177,\n \"mobile\": 88,\n \"tablet\": 53,\n \"watch\": 22\n },\n {\n \"date\": \"May 21\",\n \"desktop\": 82,\n \"mobile\": 41,\n \"tablet\": 25,\n \"watch\": 10\n },\n {\n \"date\": \"May 22\",\n \"desktop\": 81,\n \"mobile\": 41,\n \"tablet\": 25,\n \"watch\": 10\n },\n {\n \"date\": \"May 23\",\n \"desktop\": 252,\n \"mobile\": 126,\n \"tablet\": 76,\n \"watch\": 32\n },\n {\n \"date\": \"May 24\",\n \"desktop\": 294,\n \"mobile\": 147,\n \"tablet\": 88,\n \"watch\": 37\n },\n {\n \"date\": \"May 25\",\n \"desktop\": 201,\n \"mobile\": 100,\n \"tablet\": 60,\n \"watch\": 25\n },\n {\n \"date\": \"May 26\",\n \"desktop\": 213,\n \"mobile\": 106,\n \"tablet\": 64,\n \"watch\": 26\n },\n {\n \"date\": \"May 27\",\n \"desktop\": 420,\n \"mobile\": 210,\n \"tablet\": 126,\n \"watch\": 52\n },\n {\n \"date\": \"May 28\",\n \"desktop\": 233,\n \"mobile\": 116,\n \"tablet\": 70,\n \"watch\": 29\n },\n {\n \"date\": \"May 29\",\n \"desktop\": 78,\n \"mobile\": 39,\n \"tablet\": 23,\n \"watch\": 10\n },\n {\n \"date\": \"May 30\",\n \"desktop\": 340,\n \"mobile\": 170,\n \"tablet\": 102,\n \"watch\": 42\n },\n {\n \"date\": \"May 31\",\n \"desktop\": 178,\n \"mobile\": 89,\n \"tablet\": 53,\n \"watch\": 22\n },\n {\n \"date\": \"Jun 1\",\n \"desktop\": 178,\n \"mobile\": 89,\n \"tablet\": 53,\n \"watch\": 22\n },\n {\n \"date\": \"Jun 2\",\n \"desktop\": 470,\n \"mobile\": 235,\n \"tablet\": 141,\n \"watch\": 59\n },\n {\n \"date\": \"Jun 3\",\n \"desktop\": 103,\n \"mobile\": 52,\n \"tablet\": 31,\n \"watch\": 13\n },\n {\n \"date\": \"Jun 4\",\n \"desktop\": 439,\n \"mobile\": 220,\n \"tablet\": 132,\n \"watch\": 55\n },\n {\n \"date\": \"Jun 5\",\n \"desktop\": 88,\n \"mobile\": 44,\n \"tablet\": 26,\n \"watch\": 11\n },\n {\n \"date\": \"Jun 6\",\n \"desktop\": 294,\n \"mobile\": 147,\n \"tablet\": 88,\n \"watch\": 37\n },\n {\n \"date\": \"Jun 7\",\n \"desktop\": 323,\n \"mobile\": 162,\n \"tablet\": 97,\n \"watch\": 40\n },\n {\n \"date\": \"Jun 8\",\n \"desktop\": 385,\n \"mobile\": 192,\n \"tablet\": 115,\n \"watch\": 48\n },\n {\n \"date\": \"Jun 9\",\n \"desktop\": 438,\n \"mobile\": 219,\n \"tablet\": 131,\n \"watch\": 55\n },\n {\n \"date\": \"Jun 10\",\n \"desktop\": 155,\n \"mobile\": 78,\n \"tablet\": 47,\n \"watch\": 20\n },\n {\n \"date\": \"Jun 11\",\n \"desktop\": 92,\n \"mobile\": 46,\n \"tablet\": 28,\n \"watch\": 12\n },\n {\n \"date\": \"Jun 12\",\n \"desktop\": 492,\n \"mobile\": 246,\n \"tablet\": 148,\n \"watch\": 62\n },\n {\n \"date\": \"Jun 13\",\n \"desktop\": 81,\n \"mobile\": 41,\n \"tablet\": 25,\n \"watch\": 10\n },\n {\n \"date\": \"Jun 14\",\n \"desktop\": 426,\n \"mobile\": 213,\n \"tablet\": 128,\n \"watch\": 53\n },\n {\n \"date\": \"Jun 15\",\n \"desktop\": 307,\n \"mobile\": 154,\n \"tablet\": 92,\n \"watch\": 38\n },\n {\n \"date\": \"Jun 16\",\n \"desktop\": 371,\n \"mobile\": 186,\n \"tablet\": 112,\n \"watch\": 46\n },\n {\n \"date\": \"Jun 17\",\n \"desktop\": 475,\n \"mobile\": 238,\n \"tablet\": 143,\n \"watch\": 60\n },\n {\n \"date\": \"Jun 18\",\n \"desktop\": 107,\n \"mobile\": 54,\n \"tablet\": 32,\n \"watch\": 14\n },\n {\n \"date\": \"Jun 19\",\n \"desktop\": 341,\n \"mobile\": 171,\n \"tablet\": 103,\n \"watch\": 43\n },\n {\n \"date\": \"Jun 20\",\n \"desktop\": 408,\n \"mobile\": 204,\n \"tablet\": 122,\n \"watch\": 51\n },\n {\n \"date\": \"Jun 21\",\n \"desktop\": 169,\n \"mobile\": 84,\n \"tablet\": 50,\n \"watch\": 21\n },\n {\n \"date\": \"Jun 22\",\n \"desktop\": 317,\n \"mobile\": 158,\n \"tablet\": 95,\n \"watch\": 40\n },\n {\n \"date\": \"Jun 23\",\n \"desktop\": 480,\n \"mobile\": 240,\n \"tablet\": 144,\n \"watch\": 60\n },\n {\n \"date\": \"Jun 24\",\n \"desktop\": 132,\n \"mobile\": 66,\n \"tablet\": 40,\n \"watch\": 16\n },\n {\n \"date\": \"Jun 25\",\n \"desktop\": 141,\n \"mobile\": 70,\n \"tablet\": 42,\n \"watch\": 18\n },\n {\n \"date\": \"Jun 26\",\n \"desktop\": 434,\n \"mobile\": 217,\n \"tablet\": 130,\n \"watch\": 54\n },\n {\n \"date\": \"Jun 27\",\n \"desktop\": 448,\n \"mobile\": 224,\n \"tablet\": 134,\n \"watch\": 56\n },\n {\n \"date\": \"Jun 28\",\n \"desktop\": 149,\n \"mobile\": 74,\n \"tablet\": 44,\n \"watch\": 18\n },\n {\n \"date\": \"Jun 29\",\n \"desktop\": 103,\n \"mobile\": 52,\n \"tablet\": 31,\n \"watch\": 13\n },\n {\n \"date\": \"Jun 30\",\n \"desktop\": 446,\n \"mobile\": 223,\n \"tablet\": 134,\n \"watch\": 56\n }\n]" }, { "path": "crates/story/src/fixtures/monthly-devices.json", "content": "[\n {\n \"month\": \"Jan\",\n \"desktop\": 186.0,\n \"color_alpha\": 0.5\n },\n {\n \"month\": \"Feb\",\n \"desktop\": 305.0,\n \"color_alpha\": 0.6\n },\n {\n \"month\": \"March\",\n \"desktop\": 237.0,\n \"color_alpha\": 0.7\n },\n {\n \"month\": \"April\",\n \"desktop\": 73.0,\n \"color_alpha\": 0.8\n },\n {\n \"month\": \"May\",\n \"desktop\": 209.0,\n \"color_alpha\": 0.9\n },\n {\n \"month\": \"June\",\n \"desktop\": 214.0,\n \"color_alpha\": 1.0\n }\n]" }, { "path": "crates/story/src/fixtures/stock-prices.json", "content": "[\n {\n \"date\": \"Jan\",\n \"open\": 100.0,\n \"high\": 112.0,\n \"low\": 95.0,\n \"close\": 110.0\n },\n {\n \"date\": \"Feb\",\n \"open\": 110.0,\n \"high\": 112.0,\n \"low\": 108.0,\n \"close\": 111.0\n },\n {\n \"date\": \"Mar\",\n \"open\": 111.0,\n \"high\": 118.0,\n \"low\": 110.0,\n \"close\": 116.0\n },\n {\n \"date\": \"Apr\",\n \"open\": 116.0,\n \"high\": 120.0,\n \"low\": 108.0,\n \"close\": 110.0\n },\n {\n \"date\": \"May\",\n \"open\": 110.0,\n \"high\": 118.0,\n \"low\": 105.0,\n \"close\": 115.0\n },\n {\n \"date\": \"Jun\",\n \"open\": 115.0,\n \"high\": 125.0,\n \"low\": 113.0,\n \"close\": 123.0\n }\n]\n" }, { "path": "crates/story/src/gallery.rs", "content": "use gpui::{prelude::*, *};\nuse gpui_component::{\n ActiveTheme as _, Icon, IconName, h_flex,\n input::{Input, InputEvent, InputState},\n resizable::{h_resizable, resizable_panel},\n sidebar::{Sidebar, SidebarGroup, SidebarHeader, SidebarMenu, SidebarMenuItem},\n v_flex,\n};\n\nuse crate::*;\n\npub struct Gallery {\n stories: Vec<(&'static str, Vec>)>,\n active_group_index: Option,\n active_index: Option,\n collapsed: bool,\n search_input: Entity,\n _subscriptions: Vec,\n}\n\nimpl Gallery {\n pub fn new(init_story: Option<&str>, window: &mut Window, cx: &mut Context) -> Self {\n let search_input = cx.new(|cx| InputState::new(window, cx).placeholder(\"Search...\"));\n let _subscriptions = vec![cx.subscribe(&search_input, |this, _, e, cx| match e {\n InputEvent::Change => {\n this.active_group_index = Some(0);\n this.active_index = Some(0);\n cx.notify()\n }\n _ => {}\n })];\n let stories = vec![\n (\n \"Getting Started\",\n vec![StoryContainer::panel::(window, cx)],\n ),\n (\n \"Components\",\n vec![\n StoryContainer::panel::(window, cx),\n StoryContainer::panel::(window, cx),\n StoryContainer::panel::(window, cx),\n StoryContainer::panel::(window, cx),\n StoryContainer::panel::(window, cx),\n StoryContainer::panel::(window, cx),\n StoryContainer::panel::(window, cx),\n StoryContainer::panel::(window, cx),\n StoryContainer::panel::(window, cx),\n StoryContainer::panel::(window, cx),\n StoryContainer::panel::(window, cx),\n StoryContainer::panel::(window, cx),\n StoryContainer::panel::(window, cx),\n StoryContainer::panel::(window, cx),\n StoryContainer::panel::(window, cx),\n StoryContainer::panel::(window, cx),\n StoryContainer::panel::(window, cx),\n StoryContainer::panel::(window, cx),\n StoryContainer::panel::(window, cx),\n StoryContainer::panel::(window, cx),\n StoryContainer::panel::(window, cx),\n StoryContainer::panel::(window, cx),\n StoryContainer::panel::(window, cx),\n StoryContainer::panel::(window, cx),\n StoryContainer::panel::(window, cx),\n StoryContainer::panel::(window, cx),\n StoryContainer::panel::(window, cx),\n StoryContainer::panel::(window, cx),\n StoryContainer::panel::(window, cx),\n StoryContainer::panel::(window, cx),\n StoryContainer::panel::(window, cx),\n StoryContainer::panel::(window, cx),\n StoryContainer::panel::(window, cx),\n StoryContainer::panel::(window, cx),\n StoryContainer::panel::(window, cx),\n StoryContainer::panel::(window, cx),\n StoryContainer::panel::(window, cx),\n StoryContainer::panel::(window, cx),\n StoryContainer::panel::(window, cx),\n StoryContainer::panel::(window, cx),\n StoryContainer::panel::(window, cx),\n StoryContainer::panel::(window, cx),\n StoryContainer::panel::(window, cx),\n StoryContainer::panel::(window, cx),\n StoryContainer::panel::(window, cx),\n StoryContainer::panel::(window, cx),\n StoryContainer::panel::(window, cx),\n StoryContainer::panel::(window, cx),\n StoryContainer::panel::(window, cx),\n StoryContainer::panel::(window, cx),\n StoryContainer::panel::(window, cx),\n StoryContainer::panel::(window, cx),\n StoryContainer::panel::(window, cx),\n StoryContainer::panel::(window, cx),\n StoryContainer::panel::(window, cx),\n StoryContainer::panel::(window, cx),\n StoryContainer::panel::(window, cx),\n StoryContainer::panel::(window, cx),\n ],\n ),\n ];\n\n let mut this = Self {\n search_input,\n stories,\n active_group_index: Some(0),\n active_index: Some(0),\n collapsed: false,\n _subscriptions,\n };\n\n if let Some(init_story) = init_story {\n this.set_active_story(init_story, window, cx);\n }\n\n this\n }\n\n fn set_active_story(&mut self, name: &str, window: &mut Window, cx: &mut App) {\n let name = name.to_string();\n self.search_input.update(cx, |this, cx| {\n this.set_value(&name, window, cx);\n })\n }\n\n pub fn view(init_story: Option<&str>, window: &mut Window, cx: &mut App) -> Entity {\n cx.new(|cx| Self::new(init_story, window, cx))\n }\n}\n\nimpl Render for Gallery {\n fn render(&mut self, _: &mut Window, cx: &mut Context) -> impl IntoElement {\n let query = self.search_input.read(cx).value().trim().to_lowercase();\n\n let stories: Vec<_> = self\n .stories\n .iter()\n .filter_map(|(name, items)| {\n let filtered_items: Vec<_> = items\n .iter()\n .filter(|story| story.read(cx).name.to_lowercase().contains(&query))\n .cloned()\n .collect();\n\n if !filtered_items.is_empty() {\n Some((name, filtered_items))\n } else {\n None\n }\n })\n .collect();\n\n let active_group = self.active_group_index.and_then(|index| stories.get(index));\n let active_story = self\n .active_index\n .and(active_group)\n .and_then(|group| group.1.get(self.active_index.unwrap()));\n let (story_name, description) =\n if let Some(story) = active_story.as_ref().map(|story| story.read(cx)) {\n (story.name.clone(), story.description.clone())\n } else {\n (\"\".into(), \"\".into())\n };\n\n h_resizable(\"gallery-container\")\n .child(\n resizable_panel()\n .size(px(255.))\n .size_range(px(200.)..px(320.))\n .child(\n Sidebar::new(\"gallery-sidebar\")\n .w(relative(1.))\n .border_0()\n .collapsed(self.collapsed)\n .header(\n v_flex()\n .w_full()\n .gap_4()\n .child(\n SidebarHeader::new()\n .w_full()\n .child(\n div()\n .flex()\n .items_center()\n .justify_center()\n .rounded(cx.theme().radius_lg)\n .bg(cx.theme().primary)\n .text_color(cx.theme().primary_foreground)\n .size_8()\n .flex_shrink_0()\n .when(!self.collapsed, |this| {\n this.child(Icon::new(\n IconName::GalleryVerticalEnd,\n ))\n })\n .when(self.collapsed, |this| {\n this.size_4()\n .bg(cx.theme().transparent)\n .text_color(cx.theme().foreground)\n .child(Icon::new(\n IconName::GalleryVerticalEnd,\n ))\n }),\n )\n .when(!self.collapsed, |this| {\n this.child(\n v_flex()\n .gap_0()\n .text_sm()\n .flex_1()\n .line_height(relative(1.25))\n .overflow_hidden()\n .text_ellipsis()\n .child(\"GPUI Component\")\n .child(\n div()\n .text_color(\n cx.theme().muted_foreground,\n )\n .child(\"Gallery\")\n .text_xs(),\n ),\n )\n }),\n )\n .child(\n div()\n .bg(cx.theme().sidebar_accent)\n .rounded_full()\n .px_1()\n .when(cx.theme().radius.is_zero(), |this| {\n this.rounded(px(0.))\n })\n .flex_1()\n .mx_1()\n .child(\n Input::new(&self.search_input)\n .appearance(false)\n .cleanable(true),\n ),\n ),\n )\n .children(stories.clone().into_iter().enumerate().map(\n |(group_ix, (group_name, sub_stories))| {\n SidebarGroup::new(*group_name).child(\n SidebarMenu::new().children(\n sub_stories.iter().enumerate().map(|(ix, story)| {\n SidebarMenuItem::new(story.read(cx).name.clone())\n .active(\n self.active_group_index == Some(group_ix)\n && self.active_index == Some(ix),\n )\n .on_click(cx.listener(\n move |this, _: &ClickEvent, _, cx| {\n this.active_group_index =\n Some(group_ix);\n this.active_index = Some(ix);\n cx.notify();\n },\n ))\n }),\n ),\n )\n },\n )),\n ),\n )\n .child(\n v_flex()\n .flex_1()\n .h_full()\n .overflow_x_hidden()\n .child(\n h_flex()\n .id(\"header\")\n .p_4()\n .border_b_1()\n .border_color(cx.theme().border)\n .justify_between()\n .items_start()\n .child(\n v_flex()\n .gap_1()\n .child(div().text_xl().child(story_name))\n .child(\n div()\n .text_color(cx.theme().muted_foreground)\n .child(description),\n ),\n ),\n )\n .child(\n div()\n .id(\"story\")\n .flex_1()\n .overflow_y_scroll()\n .when_some(active_story, |this, active_story| {\n this.child(active_story.clone())\n }),\n )\n .into_any_element(),\n )\n }\n}\n" }, { "path": "crates/story/src/lib.rs", "content": "use gpui::{\n Action, AnyElement, AnyView, App, AppContext, Bounds, Context, Div, Entity, EventEmitter,\n FocusHandle, Focusable, Global, Hsla, InteractiveElement, IntoElement, KeyBinding,\n ParentElement, Pixels, Render, RenderOnce, SharedString, Size, StyleRefinement, Styled, Window,\n WindowBounds, WindowKind, WindowOptions, actions, div, prelude::FluentBuilder as _, px, rems,\n size,\n};\nuse gpui_component::{\n ActiveTheme, IconName, Root, TitleBar, WindowExt,\n button::Button,\n dock::{Panel, PanelControl, PanelEvent, PanelInfo, PanelState, TitleStyle, register_panel},\n group_box::{GroupBox, GroupBoxVariants as _},\n h_flex,\n menu::PopupMenu,\n notification::Notification,\n scroll::{ScrollableElement as _, ScrollbarShow},\n text::markdown,\n v_flex,\n};\nuse serde::{Deserialize, Serialize};\n\nmod app_menus;\nmod embedded_themes;\nmod gallery;\nmod stories;\nmod themes;\nmod title_bar;\npub use crate::title_bar::AppTitleBar;\npub use gallery::Gallery;\npub use stories::*;\n\n#[derive(Action, Clone, PartialEq, Eq, Deserialize)]\n#[action(namespace = story, no_json)]\npub struct SelectScrollbarShow(ScrollbarShow);\n\n#[derive(Action, Clone, PartialEq, Eq, Deserialize)]\n#[action(namespace = story, no_json)]\npub struct SelectLocale(SharedString);\n\n#[derive(Action, Clone, PartialEq, Eq, Deserialize)]\n#[action(namespace = story, no_json)]\npub struct SelectFont(usize);\n\n#[derive(Action, Clone, PartialEq, Eq, Deserialize)]\n#[action(namespace = story, no_json)]\npub struct SelectRadius(usize);\n\nactions!(\n story,\n [\n About,\n Open,\n Quit,\n ToggleSearch,\n TestAction,\n Tab,\n TabPrev,\n ShowPanelInfo,\n ToggleListActiveHighlight\n ]\n);\n\nconst PANEL_NAME: &str = \"StoryContainer\";\n\npub struct AppState {\n pub invisible_panels: Entity>,\n}\nimpl AppState {\n fn init(cx: &mut App) {\n let state = Self {\n invisible_panels: cx.new(|_| Vec::new()),\n };\n cx.set_global::(state);\n }\n\n pub fn global(cx: &App) -> &Self {\n cx.global::()\n }\n\n pub fn global_mut(cx: &mut App) -> &mut Self {\n cx.global_mut::()\n }\n}\n\npub fn create_new_window(title: &str, crate_view_fn: F, cx: &mut App)\nwhere\n E: Into,\n F: FnOnce(&mut Window, &mut App) -> E + Send + 'static,\n{\n create_new_window_with_size(title, None, crate_view_fn, cx);\n}\n\npub fn create_new_window_with_size(\n title: &str,\n window_size: Option>,\n crate_view_fn: F,\n cx: &mut App,\n) where\n E: Into,\n F: FnOnce(&mut Window, &mut App) -> E + Send + 'static,\n{\n let mut window_size = window_size.unwrap_or(size(px(1600.0), px(1200.0)));\n if let Some(display) = cx.primary_display() {\n let display_size = display.bounds().size;\n window_size.width = window_size.width.min(display_size.width * 0.85);\n window_size.height = window_size.height.min(display_size.height * 0.85);\n }\n let window_bounds = Bounds::centered(None, window_size, cx);\n let title = SharedString::from(title.to_string());\n\n cx.spawn(async move |cx| {\n let options = WindowOptions {\n window_bounds: Some(WindowBounds::Windowed(window_bounds)),\n titlebar: Some(TitleBar::title_bar_options()),\n window_min_size: Some(gpui::Size {\n width: px(480.),\n height: px(320.),\n }),\n kind: WindowKind::Normal,\n #[cfg(target_os = \"linux\")]\n window_background: gpui::WindowBackgroundAppearance::Transparent,\n #[cfg(target_os = \"linux\")]\n window_decorations: Some(gpui::WindowDecorations::Client),\n ..Default::default()\n };\n\n let window = cx\n .open_window(options, |window, cx| {\n let view = crate_view_fn(window, cx);\n let story_root = cx.new(|cx| StoryRoot::new(title.clone(), view, window, cx));\n\n // Set focus to the StoryRoot to enable it's actions.\n let focus_handle = story_root.focus_handle(cx);\n window.defer(cx, move |window, cx| {\n focus_handle.focus(window, cx);\n });\n\n cx.new(|cx| Root::new(story_root, window, cx))\n })\n .expect(\"failed to open window\");\n\n window.update(cx, |_, window, _| {\n window.activate_window();\n window.set_window_title(&title);\n })?;\n\n Ok::<_, anyhow::Error>(())\n })\n .detach();\n}\n\nimpl Global for AppState {}\n\npub fn init(cx: &mut App) {\n // Try to initialize tracing subscriber, but ignore if already initialized\n #[cfg(not(target_family = \"wasm\"))]\n {\n use tracing_subscriber::{layer::SubscriberExt as _, util::SubscriberInitExt as _};\n let _ = tracing_subscriber::registry()\n .with(tracing_subscriber::fmt::layer())\n .with(\n tracing_subscriber::EnvFilter::from_default_env()\n .add_directive(\"gpui_component=trace\".parse().unwrap()),\n )\n .try_init();\n }\n\n // For WASM, use a subscriber without time support\n #[cfg(target_family = \"wasm\")]\n {\n use tracing_subscriber::{layer::SubscriberExt as _, util::SubscriberInitExt as _};\n let _ = tracing_subscriber::registry()\n .with(tracing_subscriber::fmt::layer().without_time())\n .with(\n tracing_subscriber::EnvFilter::from_default_env()\n .add_directive(\"gpui_component=trace\".parse().unwrap()),\n )\n .try_init();\n }\n\n gpui_component::init(cx);\n AppState::init(cx);\n themes::init(cx);\n stories::init(cx);\n\n #[cfg(not(target_family = \"wasm\"))]\n {\n let http_client =\n reqwest_client::ReqwestClient::user_agent(\"gpui-component/story\").unwrap();\n cx.set_http_client(std::sync::Arc::new(http_client));\n }\n\n #[cfg(target_family = \"wasm\")]\n {\n // Safety: the web examples run single-threaded; the client is\n // created and used exclusively on the main thread.\n let http_client = unsafe {\n gpui_web::FetchHttpClient::with_user_agent(\"gpui-component/story\")\n .expect(\"failed to create FetchHttpClient\")\n };\n cx.set_http_client(std::sync::Arc::new(http_client));\n }\n\n cx.bind_keys([\n KeyBinding::new(\"/\", ToggleSearch, None),\n #[cfg(target_os = \"macos\")]\n KeyBinding::new(\"cmd-o\", Open, None),\n #[cfg(not(target_os = \"macos\"))]\n KeyBinding::new(\"ctrl-o\", Open, None),\n #[cfg(target_os = \"macos\")]\n KeyBinding::new(\"cmd-q\", Quit, None),\n #[cfg(not(target_os = \"macos\"))]\n KeyBinding::new(\"alt-f4\", Quit, None),\n ]);\n\n cx.on_action(|_: &Quit, cx: &mut App| {\n cx.quit();\n });\n\n cx.on_action(|_: &About, cx: &mut App| {\n if let Some(window) = cx.active_window().and_then(|w| w.downcast::()) {\n cx.defer(move |cx| {\n window\n .update(cx, |_, window, cx| {\n window.defer(cx, |window, cx| {\n window.open_alert_dialog(cx, |alert, _, _| {\n alert.title(\"About\").description(markdown(\n \"GPUI Component Storybook\\n\\n\\\n Version 0.1.0\\n\\n\\\n https://longbridge.github.io/gpui-component\",\n ))\n });\n });\n })\n .unwrap();\n });\n }\n });\n\n register_panel(cx, PANEL_NAME, |_, _, info, window, cx| {\n let story_state = match info {\n PanelInfo::Panel(value) => StoryState::from_value(value.clone()),\n _ => {\n unreachable!(\"Invalid PanelInfo: {:?}\", info)\n }\n };\n\n let view = cx.new(|cx| {\n let (title, description, closable, zoomable, story, on_active) =\n story_state.to_story(window, cx);\n let mut container = StoryContainer::new(window, cx)\n .story(story, story_state.story_klass)\n .on_active(on_active);\n\n cx.on_focus_in(\n &container.focus_handle,\n window,\n |this: &mut StoryContainer, _, _| {\n println!(\"StoryContainer focus in: {}\", this.name);\n },\n )\n .detach();\n\n container.name = title.into();\n container.description = description.into();\n container.closable = closable;\n container.zoomable = zoomable;\n container\n });\n Box::new(view)\n });\n\n cx.activate(true);\n}\n\n#[derive(IntoElement)]\nstruct StorySection {\n base: Div,\n title: SharedString,\n sub_title: Vec,\n children: Vec,\n}\n\nimpl StorySection {\n pub fn sub_title(mut self, sub_title: impl IntoElement) -> Self {\n self.sub_title.push(sub_title.into_any_element());\n self\n }\n\n #[allow(unused)]\n fn max_w_md(mut self) -> Self {\n self.base = self.base.max_w(rems(48.));\n self\n }\n\n #[allow(unused)]\n fn max_w_lg(mut self) -> Self {\n self.base = self.base.max_w(rems(64.));\n self\n }\n\n #[allow(unused)]\n fn max_w_xl(mut self) -> Self {\n self.base = self.base.max_w(rems(80.));\n self\n }\n\n #[allow(unused)]\n fn max_w_2xl(mut self) -> Self {\n self.base = self.base.max_w(rems(96.));\n self\n }\n}\n\nimpl ParentElement for StorySection {\n fn extend(&mut self, elements: impl IntoIterator) {\n self.children.extend(elements);\n }\n}\n\nimpl Styled for StorySection {\n fn style(&mut self) -> &mut gpui::StyleRefinement {\n self.base.style()\n }\n}\n\nimpl RenderOnce for StorySection {\n fn render(self, _: &mut Window, cx: &mut App) -> impl IntoElement {\n GroupBox::new()\n .id(self.title.clone())\n .outline()\n .title(\n h_flex()\n .justify_between()\n .w_full()\n .gap_4()\n .child(self.title)\n .children(self.sub_title),\n )\n .content_style(\n StyleRefinement::default()\n .rounded(cx.theme().radius_lg)\n .overflow_x_hidden()\n .items_center()\n .justify_center(),\n )\n .child(self.base.children(self.children))\n }\n}\n\npub(crate) fn section(title: impl Into) -> StorySection {\n StorySection {\n title: title.into(),\n sub_title: vec![],\n base: h_flex()\n .w_full()\n .flex_wrap()\n .justify_center()\n .items_center()\n .gap_4(),\n children: vec![],\n }\n}\n\npub struct StoryContainer {\n focus_handle: gpui::FocusHandle,\n pub name: SharedString,\n pub title_bg: Option,\n pub description: SharedString,\n width: Option,\n height: Option,\n story: Option,\n story_klass: Option,\n closable: bool,\n zoomable: Option,\n paddings: Pixels,\n on_active: Option,\n}\n\n#[derive(Debug)]\npub enum ContainerEvent {\n Close,\n}\n\nimpl EventEmitter for StoryContainer {}\n\nimpl StoryContainer {\n pub fn new(_window: &mut Window, cx: &mut App) -> Self {\n let focus_handle = cx.focus_handle();\n\n Self {\n focus_handle,\n name: \"\".into(),\n title_bg: None,\n description: \"\".into(),\n width: None,\n height: None,\n story: None,\n story_klass: None,\n closable: true,\n zoomable: Some(PanelControl::default()),\n paddings: px(16.),\n on_active: None,\n }\n }\n\n pub fn panel(window: &mut Window, cx: &mut App) -> Entity {\n let name = S::title();\n let description = S::description();\n let story = S::new_view(window, cx);\n let story_klass = S::klass();\n\n let view = cx.new(|cx| {\n let mut story = Self::new(window, cx)\n .story(story.into(), story_klass)\n .on_active(S::on_active_any);\n story.focus_handle = cx.focus_handle();\n story.closable = S::closable();\n story.zoomable = S::zoomable();\n story.name = name.into();\n story.description = description.into();\n story.title_bg = S::title_bg();\n story.paddings = S::paddings();\n story\n });\n\n view\n }\n\n pub fn width(mut self, width: gpui::Pixels) -> Self {\n self.width = Some(width);\n self\n }\n\n pub fn height(mut self, height: gpui::Pixels) -> Self {\n self.height = Some(height);\n self\n }\n\n pub fn story(mut self, story: AnyView, story_klass: impl Into) -> Self {\n self.story = Some(story);\n self.story_klass = Some(story_klass.into());\n self\n }\n\n pub fn on_active(mut self, on_active: fn(AnyView, bool, &mut Window, &mut App)) -> Self {\n self.on_active = Some(on_active);\n self\n }\n}\n\n#[derive(Debug, Serialize, Deserialize)]\npub struct StoryState {\n pub story_klass: SharedString,\n}\n\nimpl StoryState {\n fn to_value(&self) -> serde_json::Value {\n serde_json::json!({\n \"story_klass\": self.story_klass,\n })\n }\n\n fn from_value(value: serde_json::Value) -> Self {\n serde_json::from_value(value).unwrap()\n }\n\n fn to_story(\n &self,\n window: &mut Window,\n cx: &mut App,\n ) -> (\n &'static str,\n &'static str,\n bool,\n Option,\n AnyView,\n fn(AnyView, bool, &mut Window, &mut App),\n ) {\n macro_rules! story {\n ($klass:tt) => {\n (\n $klass::title(),\n $klass::description(),\n $klass::closable(),\n $klass::zoomable(),\n $klass::view(window, cx).into(),\n $klass::on_active_any,\n )\n };\n }\n\n match self.story_klass.to_string().as_str() {\n \"BreadcrumbStory\" => story!(BreadcrumbStory),\n \"ButtonStory\" => story!(ButtonStory),\n \"CalendarStory\" => story!(CalendarStory),\n \"SelectStory\" => story!(SelectStory),\n \"IconStory\" => story!(IconStory),\n \"ImageStory\" => story!(ImageStory),\n \"InputStory\" => story!(InputStory),\n \"ListStory\" => story!(ListStory),\n \"DialogStory\" => story!(DialogStory),\n \"DividerStory\" => story!(DividerStory),\n \"PopoverStory\" => story!(PopoverStory),\n \"ProgressStory\" => story!(ProgressStory),\n \"ResizableStory\" => story!(ResizableStory),\n \"ScrollbarStory\" => story!(ScrollbarStory),\n \"SwitchStory\" => story!(SwitchStory),\n \"DataTableStory\" => story!(DataTableStory),\n \"TableStory\" => story!(TableStory),\n \"LabelStory\" => story!(LabelStory),\n \"TooltipStory\" => story!(TooltipStory),\n \"AccordionStory\" => story!(AccordionStory),\n \"SidebarStory\" => story!(SidebarStory),\n \"FormStory\" => story!(FormStory),\n \"NotificationStory\" => story!(NotificationStory),\n \"ThemeColorsStory\" => story!(ThemeColorsStory),\n _ => {\n unreachable!(\"Invalid story klass: {}\", self.story_klass)\n }\n }\n }\n}\n\nimpl Panel for StoryContainer {\n fn panel_name(&self) -> &'static str {\n \"StoryContainer\"\n }\n\n fn title(&mut self, _window: &mut Window, _cx: &mut Context) -> impl IntoElement {\n self.name.clone().into_any_element()\n }\n\n fn title_style(&self, cx: &App) -> Option {\n if let Some(bg) = self.title_bg {\n Some(TitleStyle {\n background: bg,\n foreground: cx.theme().foreground,\n })\n } else {\n None\n }\n }\n\n fn closable(&self, _cx: &App) -> bool {\n self.closable\n }\n\n fn zoomable(&self, _cx: &App) -> Option {\n self.zoomable\n }\n\n fn visible(&self, cx: &App) -> bool {\n !AppState::global(cx)\n .invisible_panels\n .read(cx)\n .contains(&self.name)\n }\n\n fn set_zoomed(&mut self, zoomed: bool, _window: &mut Window, _cx: &mut Context) {\n println!(\"panel: {} zoomed: {}\", self.name, zoomed);\n }\n\n fn set_active(&mut self, active: bool, _window: &mut Window, cx: &mut Context) {\n println!(\"panel: {} active: {}\", self.name, active);\n if let Some(on_active) = self.on_active {\n if let Some(story) = self.story.clone() {\n on_active(story, active, _window, cx);\n }\n }\n }\n\n fn dropdown_menu(\n &mut self,\n menu: PopupMenu,\n _window: &mut Window,\n _cx: &mut Context,\n ) -> PopupMenu {\n menu.menu(\"Info\", Box::new(ShowPanelInfo))\n }\n\n fn toolbar_buttons(\n &mut self,\n _window: &mut Window,\n _cx: &mut Context,\n ) -> Option> {\n Some(vec![\n Button::new(\"info\")\n .icon(IconName::Info)\n .on_click(|_, window, cx| {\n window.push_notification(\"You have clicked info button\", cx);\n }),\n Button::new(\"search\")\n .icon(IconName::Search)\n .on_click(|_, window, cx| {\n window.push_notification(\"You have clicked search button\", cx);\n }),\n ])\n }\n\n fn dump(&self, _cx: &App) -> PanelState {\n let mut state = PanelState::new(self);\n let story_state = StoryState {\n story_klass: self.story_klass.clone().unwrap(),\n };\n state.info = PanelInfo::panel(story_state.to_value());\n state\n }\n}\n\nimpl EventEmitter for StoryContainer {}\nimpl Focusable for StoryContainer {\n fn focus_handle(&self, _: &App) -> gpui::FocusHandle {\n self.focus_handle.clone()\n }\n}\nimpl Render for StoryContainer {\n fn render(&mut self, _: &mut Window, _: &mut Context) -> impl IntoElement {\n div()\n .id(\"story-container\")\n .size_full()\n .overflow_y_scrollbar()\n .track_focus(&self.focus_handle)\n .when_some(self.story.clone(), |this, story| {\n this.child(div().size_full().p(self.paddings).child(story))\n })\n }\n}\n\npub struct StoryRoot {\n pub(crate) focus_handle: FocusHandle,\n pub(crate) title_bar: Entity,\n pub(crate) view: AnyView,\n}\n\nimpl StoryRoot {\n pub fn new(\n title: impl Into,\n view: impl Into,\n window: &mut Window,\n cx: &mut Context,\n ) -> Self {\n let title_bar = cx.new(|cx| AppTitleBar::new(title, window, cx));\n Self {\n focus_handle: cx.focus_handle(),\n title_bar,\n view: view.into(),\n }\n }\n\n fn on_action_panel_info(\n &mut self,\n _: &ShowPanelInfo,\n window: &mut Window,\n cx: &mut Context,\n ) {\n struct Info;\n let note = Notification::new()\n .message(\"You have clicked panel info.\")\n .id::();\n window.push_notification(note, cx);\n }\n\n fn on_action_toggle_search(\n &mut self,\n _: &ToggleSearch,\n window: &mut Window,\n cx: &mut Context,\n ) {\n cx.propagate();\n if window.has_focused_input(cx) {\n return;\n }\n\n struct Search;\n let note = Notification::new()\n .message(\"You have toggled search.\")\n .id::();\n window.push_notification(note, cx);\n }\n}\n\nimpl Focusable for StoryRoot {\n fn focus_handle(&self, _: &App) -> FocusHandle {\n self.focus_handle.clone()\n }\n}\n\nimpl Render for StoryRoot {\n fn render(&mut self, window: &mut Window, cx: &mut Context) -> impl IntoElement {\n let sheet_layer = Root::render_sheet_layer(window, cx);\n let dialog_layer = Root::render_dialog_layer(window, cx);\n let notification_layer = Root::render_notification_layer(window, cx);\n\n div()\n .id(\"story-root\")\n .on_action(cx.listener(Self::on_action_panel_info))\n .on_action(cx.listener(Self::on_action_toggle_search))\n .size_full()\n .child(\n v_flex()\n .size_full()\n .child(self.title_bar.clone())\n .child(\n div()\n .track_focus(&self.focus_handle)\n .flex_1()\n .overflow_hidden()\n .child(self.view.clone()),\n )\n .children(sheet_layer)\n .children(dialog_layer)\n .children(notification_layer),\n )\n }\n}\n" }, { "path": "crates/story/src/main.rs", "content": "use gpui_component_assets::Assets;\nuse gpui_component_story::{Gallery, init, create_new_window};\n\nfn main() {\n let app = gpui_platform::application().with_assets(Assets);\n\n // Parse `cargo run -- `\n let name = std::env::args().nth(1);\n\n app.run(move |cx| {\n init(cx);\n cx.activate(true);\n\n create_new_window(\n \"GPUI Component\",\n move |window, cx| Gallery::view(name.as_deref(), window, cx),\n cx,\n );\n });\n}\n" }, { "path": "crates/story/src/stories/accordion_story.rs", "content": "use gpui::{\n App, AppContext, Context, Entity, FocusHandle, Focusable, IntoElement, ParentElement as _,\n Render, Styled as _, Window, prelude::FluentBuilder as _,\n};\nuse gpui_component::{\n IconName, Selectable, Sizable, Size,\n accordion::Accordion,\n button::{Button, ButtonGroup},\n checkbox::Checkbox,\n h_flex,\n switch::Switch,\n v_flex,\n};\n\nuse crate::section;\n\npub struct AccordionStory {\n open_ixs: Vec,\n size: Size,\n bordered: bool,\n disabled: bool,\n multiple: bool,\n show_icon: bool,\n focus_handle: FocusHandle,\n}\n\nimpl super::Story for AccordionStory {\n fn title() -> &'static str {\n \"Accordion\"\n }\n\n fn description() -> &'static str {\n \"The accordion uses collapse internally to make it collapsible.\"\n }\n\n fn new_view(window: &mut Window, cx: &mut App) -> Entity {\n Self::view(window, cx)\n }\n}\n\nimpl AccordionStory {\n pub fn view(window: &mut Window, cx: &mut App) -> Entity {\n cx.new(|cx| Self::new(window, cx))\n }\n\n fn new(_: &mut Window, cx: &mut Context) -> Self {\n Self {\n bordered: false,\n open_ixs: vec![0, 1, 2],\n size: Size::default(),\n disabled: false,\n multiple: true,\n show_icon: false,\n focus_handle: cx.focus_handle(),\n }\n }\n\n fn toggle_accordion(&mut self, open_ixs: Vec, _: &mut Window, cx: &mut Context) {\n self.open_ixs = open_ixs;\n cx.notify();\n }\n\n fn set_size(&mut self, size: Size, _: &mut Window, cx: &mut Context) {\n self.size = size;\n cx.notify();\n }\n}\n\nimpl Focusable for AccordionStory {\n fn focus_handle(&self, _: &gpui::App) -> gpui::FocusHandle {\n self.focus_handle.clone()\n }\n}\n\nimpl Render for AccordionStory {\n fn render(&mut self, _: &mut Window, cx: &mut Context) -> impl IntoElement {\n v_flex()\n .gap_5()\n .child(\n h_flex()\n .items_center()\n .justify_between()\n .gap_4()\n .flex_wrap()\n .child(\n ButtonGroup::new(\"toggle-size\")\n .outline()\n .compact()\n .child(\n Button::new(\"xsmall\")\n .label(\"XSmall\")\n .selected(self.size == Size::XSmall),\n )\n .child(\n Button::new(\"small\")\n .label(\"Small\")\n .selected(self.size == Size::Small),\n )\n .child(\n Button::new(\"medium\")\n .label(\"Medium\")\n .selected(self.size == Size::Medium),\n )\n .child(\n Button::new(\"large\")\n .label(\"Large\")\n .selected(self.size == Size::Large),\n )\n .on_click(cx.listener(|this, selecteds: &Vec, window, cx| {\n let size = match selecteds[0] {\n 0 => Size::XSmall,\n 1 => Size::Small,\n 2 => Size::Medium,\n 3 => Size::Large,\n _ => unreachable!(),\n };\n this.set_size(size, window, cx);\n })),\n )\n .child(\n h_flex()\n .gap_2()\n .child(\n Checkbox::new(\"multiple\")\n .label(\"Multiple\")\n .checked(self.multiple)\n .on_click(cx.listener(|this, checked, _, cx| {\n this.multiple = *checked;\n cx.notify();\n })),\n )\n .child(\n Checkbox::new(\"show_icon\")\n .label(\"Icon\")\n .checked(self.show_icon)\n .on_click(cx.listener(|this, checked, _, cx| {\n this.show_icon = *checked;\n cx.notify();\n })),\n )\n .child(\n Checkbox::new(\"disabled\")\n .label(\"Disabled\")\n .checked(self.disabled)\n .on_click(cx.listener(|this, checked, _, cx| {\n this.disabled = *checked;\n cx.notify();\n })),\n )\n .child(\n Checkbox::new(\"bordered\")\n .label(\"Bordered\")\n .checked(self.bordered)\n .on_click(cx.listener(|this, checked, _, cx| {\n this.bordered = *checked;\n cx.notify();\n })),\n ),\n ),\n )\n .child(\n section(\"Normal\").max_w_md().child(\n Accordion::new(\"test\")\n .bordered(self.bordered)\n .with_size(self.size)\n .disabled(self.disabled)\n .multiple(self.multiple)\n .item(|this| {\n this.open(self.open_ixs.contains(&0))\n .when(self.show_icon, |this| this.icon(IconName::Info))\n .title(\"Is it accessible?\")\n .child(\"Yes. It adheres to the WAI-ARIA design pattern.\")\n })\n .item(|this| {\n this.open(self.open_ixs.contains(&1))\n .when(self.show_icon, |this| this.icon(IconName::Inbox))\n .title(\"Is it styled with complex elements?\")\n .child(\n v_flex()\n .gap_4()\n .child(\n \"We can put any view here, like a v_flex with a text view\",\n )\n .child(\n h_flex()\n .gap_4()\n .child(Switch::new(\"switch1\").label(\"Switch\"))\n .child(\n Checkbox::new(\"checkbox1\").label(\"Or a Checkbox\"),\n ),\n ),\n )\n })\n .item(|this| {\n this.open(self.open_ixs.contains(&2))\n .when(self.show_icon, |this| this.icon(IconName::Moon))\n .title(\"This is third accordion\")\n .child(\n \"This is the third accordion content. \\\n It can be any view, like a text view or a button.\",\n )\n })\n .on_toggle_click(cx.listener(|this, open_ixs: &[usize], window, cx| {\n this.toggle_accordion(open_ixs.to_vec(), window, cx);\n })),\n ),\n )\n }\n}\n" }, { "path": "crates/story/src/stories/alert_dialog_story.rs", "content": "use gpui::{\n App, AppContext, Context, Entity, FocusHandle, Focusable, InteractiveElement as _, IntoElement,\n ParentElement, Render, Styled, Window, div, px,\n};\n\nuse gpui_component::{\n ActiveTheme, Icon, IconName, StyledExt, WindowExt as _,\n button::{Button, ButtonVariant, ButtonVariants},\n dialog::{\n AlertDialog, DialogAction, DialogButtonProps, DialogClose, DialogDescription, DialogFooter,\n DialogHeader, DialogTitle,\n },\n v_flex,\n};\n\nuse crate::section;\n\npub struct AlertDialogStory {\n focus_handle: FocusHandle,\n}\n\nimpl super::Story for AlertDialogStory {\n fn title() -> &'static str {\n \"AlertDialog\"\n }\n\n fn description() -> &'static str {\n \"A modal dialog that interrupts the user with important content\"\n }\n\n fn new_view(window: &mut Window, cx: &mut App) -> Entity {\n Self::view(window, cx)\n }\n}\n\nimpl AlertDialogStory {\n pub fn view(window: &mut Window, cx: &mut App) -> Entity {\n cx.new(|cx| Self::new(window, cx))\n }\n\n fn new(_: &mut Window, cx: &mut Context) -> Self {\n Self {\n focus_handle: cx.focus_handle(),\n }\n }\n}\n\nimpl Focusable for AlertDialogStory {\n fn focus_handle(&self, _cx: &gpui::App) -> FocusHandle {\n self.focus_handle.clone()\n }\n}\n\nimpl Render for AlertDialogStory {\n fn render(&mut self, _: &mut Window, cx: &mut Context) -> impl IntoElement {\n div().id(\"alert-dialog-story\").track_focus(&self.focus_handle).size_full().child(\n v_flex()\n .gap_6()\n .child(\n section(\"AlertDialog\").child(\n AlertDialog::new(cx)\n .p_0()\n .trigger(Button::new(\"info-alert\").outline().label(\"Show Info Alert\"))\n .on_ok(|_, window, cx| {\n window.push_notification(\"You have confirmed the alert\", cx);\n true\n })\n .on_cancel(|_, window, cx| {\n window.push_notification(\"Ok, you canceled the alert\", cx);\n true\n })\n .content(|content, _, cx| {\n content\n .child(DialogHeader::new().p_4().child(DialogTitle::new().child(\"Are you absolutely sure?\")).child(\n DialogDescription::new().child(\n \"This action cannot be undone. \\\n This will permanently delete your account from our servers.\",\n ),\n ))\n .child(DialogFooter::new()\n .p_4()\n .border_t_1()\n .border_color(cx.theme().border)\n .bg(cx.theme().muted)\n .child(\n DialogClose::new().child(\n Button::new(\"cancel\").outline().label(\"Cancel\")\n )\n )\n .child(\n DialogAction::new().child(\n Button::new(\"ok\").label(\"Continue\").primary()\n )\n )\n )\n }),\n ),\n )\n .child(section(\"With open_alert_dialog\").child(\n Button::new(\"confirm-alert\").outline().label(\"Show Confirmation\").on_click(cx.listener(\n |_, _, window, cx| {\n use gpui_component::dialog::DialogButtonProps;\n\n window.open_alert_dialog(cx, |alert, _, _| {\n alert\n .title(\"Delete File\")\n .description(\n \"Are you sure you want to delete this file? \\\n This action cannot be undone.\",\n )\n .button_props(\n DialogButtonProps::default()\n .ok_variant(ButtonVariant::Danger)\n .ok_text(\"Delete\")\n .cancel_text(\"Cancel\")\n .show_cancel(true),\n )\n .on_ok(|_, window, cx| {\n window.push_notification(\"File deleted\", cx);\n true\n })\n });\n },\n )),\n ))\n .child(section(\"With Icon\").child(\n AlertDialog::new(cx).w(px(320.)).trigger(\n Button::new(\"icon-alert\").outline().label(\"Request Permission\"),\n ).on_ok(|_, window, cx| {\n window.push_notification(\"Thank you for allowing network access\", cx);\n true\n })\n .content(|content, _, cx| {\n content\n .child(\n DialogHeader::new()\n .items_center()\n .child(Icon::new(IconName::TriangleAlert).size_10().text_color(cx.theme().warning))\n .child(\n DialogTitle::new().child(\"Network Permission Required\"),\n ).child(\n DialogDescription::new().child(\n \"We need your permission to access the network to provide better services. \\\n Please allow network access in your system settings.\",\n ),\n ),\n )\n .child(\n DialogFooter::new()\n .v_flex()\n .child(\n DialogAction::new().child(\n Button::new(\"agree\").w_full().primary().label(\"Allow\")\n )\n )\n .child(\n DialogClose::new().child(\n Button::new(\"disagree\").w_full().outline().label(\"Don't Allow\")\n )\n )\n )\n }),\n ))\n .child(\n section(\"Destructive Action\").child(\n AlertDialog::new(cx)\n .trigger(Button::new(\"destructive-action\").outline().danger().label(\"Delete Account\"))\n .on_ok(|_, window, cx| {\n window.push_notification(\"Your account has been deleted\", cx);\n true\n })\n .content(|content, _, _| {\n content\n .child(DialogHeader::new().child(DialogTitle::new().child(\"Delete Account\")).child(\n DialogDescription::new().child(\n \"This will permanently delete your account \\\n and all associated data. This action cannot be undone.\",\n ),\n ))\n .child(\n DialogFooter::new()\n .child(\n DialogClose::new().child(\n Button::new(\"cancel\").flex_1().outline().label(\"Cancel\")\n )\n )\n .child(\n DialogAction::new().child(\n Button::new(\"delete\")\n .flex_1()\n .outline()\n .danger()\n .label(\"Delete Forever\")\n )\n )\n )\n }),\n ),\n )\n .child(section(\"Without Title\").child(\n Button::new(\"without-title\").outline().label(\"Dialog without Title\").on_click(cx.listener(\n |_, _, window, cx| {\n window.open_alert_dialog(cx, |alert, _, _| {\n alert\n .confirm()\n .child(\"This is a AlertDialog with `confirm` mode.\\\n Will have OK, CANCEL buttons.\")\n });\n },\n )),\n ))\n .child(section(\"Session Timeout\").child(\n Button::new(\"session-timeout\").outline().label(\"Session Timeout\").on_click(cx.listener(\n |_, _, window, cx| {\n window.open_alert_dialog(cx, |alert, _, _| {\n alert\n .on_ok(|_, window, cx| {\n window.push_notification(\"Redirecting to login...\", cx);\n true\n })\n .title(\"Session Expired\")\n .description(\"Your session has expired due to inactivity.\\\n Please log in again to continue.\")\n .footer(\n DialogFooter::new().child(\n Button::new(\"sign-in\").label(\"Sign in\").primary().flex_1().on_click(\n move |_, window, cx| {\n window.push_notification(\"Redirecting to login...\", cx);\n window.close_dialog(cx);\n },\n ),\n )\n )\n });\n },\n )),\n ))\n .child(section(\"Update Available\").child(\n AlertDialog::new(cx)\n .trigger(Button::new(\"update\").outline().label(\"Update Available\"))\n .on_cancel(|_, window, cx| {\n window.push_notification(\"Update postponed\", cx);\n true\n })\n .on_ok(|_, window, cx| {\n window.push_notification(\"Starting update...\", cx);\n true\n })\n .content(\n |content, _, cx| {\n content\n .child(DialogHeader::new().child(DialogTitle::new().child(\"Update Available\")).child(\n DialogDescription::new().child(\n \"A new version (v2.0.0) is available.\\\n This update includes new features and bug fixes.\",\n ),\n ))\n .child(\n DialogFooter::new()\n .bg(cx.theme().muted)\n .child(\n DialogClose::new().child(\n Button::new(\"later\").flex_1().outline().label(\"Later\")\n ),\n )\n .child(\n DialogAction::new().child(\n Button::new(\"update-now\").flex_1().primary().label(\"Update Now\")\n )\n )\n )\n },\n ),\n ))\n .child(section(\"Keyboard Disabled\").child(\n Button::new(\"keyboard-disabled\").outline().label(\"Keyboard Disabled\").on_click(cx.listener(\n |_, _, window, cx| {\n window.open_alert_dialog(cx, |alert, _, _| {\n alert\n .title(\"Important Notice\")\n .description(\n \"Please read this important notice \\\n carefully before proceeding.\",\n )\n .keyboard(false)\n });\n },\n )),\n ))\n .child(section(\"With confirm mode\").child(\n Button::new(\"overlay-closable\").outline().label(\"Confirm Mode\").on_click(cx.listener(\n |_, _, window, cx| {\n window.open_alert_dialog(cx, |alert, _, _| {\n alert\n .confirm()\n .title(\"Are you sure?\")\n .child(\"This is a AlertDialog with `confirm` mode.\\\n Will have OK, CANCEL buttons.\")\n });\n },\n )),\n ))\n .child(section(\"Overlay Closable\").child(\n Button::new(\"overlay-closable\").outline().label(\"Overlay Closable\").on_click(cx.listener(\n |_, _, window, cx| {\n window.open_alert_dialog(cx, |alert, _, _| {\n alert\n .title(\"Overlay Closable\")\n .description(\"Click outside this dialog or press ESC to close it.\")\n .overlay_closable(true)\n });\n },\n )),\n ))\n .child(section(\"Prevent Close\").child(\n Button::new(\"prevent-close\").outline().label(\"Prevent Close\").on_click(cx.listener(\n |_, _, window, cx| {\n window.open_alert_dialog(cx, |alert, _, _| {\n alert\n .title(\"Processing\")\n .close_button(true)\n .description(\n \"A process is running. \\\n Click Continue to stop it or Cancel to keep waiting.\",\n )\n .button_props(DialogButtonProps::default().ok_text(\"Continue\").show_cancel(true))\n .on_ok(|_, window, cx| {\n // Return false to prevent closing\n window.push_notification(\"Cannot close: Process still running\", cx);\n false\n })\n .on_cancel(|_, window, cx| {\n window.push_notification(\"Waiting...\", cx);\n false\n })\n });\n },\n )),\n ))\n )\n }\n}\n" }, { "path": "crates/story/src/stories/alert_story.rs", "content": "use gpui::{\n App, AppContext, Context, Entity, FocusHandle, Focusable, IntoElement, ParentElement, Render,\n Styled, Window,\n};\nuse gpui_component::{\n IconName, Selectable as _, Sizable as _, Size,\n alert::Alert,\n button::{Button, ButtonGroup},\n dock::PanelControl,\n text::markdown,\n v_flex,\n};\n\nuse crate::section;\n\npub struct AlertStory {\n size: Size,\n banner_visible: bool,\n focus_handle: gpui::FocusHandle,\n}\n\nimpl AlertStory {\n fn new(_: &mut Window, cx: &mut Context) -> Self {\n Self { size: Size::default(), banner_visible: true, focus_handle: cx.focus_handle() }\n }\n\n pub fn view(window: &mut Window, cx: &mut App) -> Entity {\n cx.new(|cx| Self::new(window, cx))\n }\n\n fn set_size(&mut self, size: Size, _: &mut Window, cx: &mut Context) {\n self.size = size;\n cx.notify();\n }\n}\n\nimpl super::Story for AlertStory {\n fn title() -> &'static str {\n \"Alert\"\n }\n\n fn description() -> &'static str {\n \"Displays a callout for user attention.\"\n }\n\n fn new_view(window: &mut Window, cx: &mut App) -> Entity {\n Self::view(window, cx)\n }\n\n fn zoomable() -> Option {\n None\n }\n}\n\nimpl Focusable for AlertStory {\n fn focus_handle(&self, _: &App) -> FocusHandle {\n self.focus_handle.clone()\n }\n}\n\nimpl Render for AlertStory {\n fn render(&mut self, _: &mut Window, cx: &mut Context) -> impl IntoElement {\n v_flex()\n .gap_4()\n .child(\n ButtonGroup::new(\"toggle-size\")\n .outline()\n .compact()\n .child(\n Button::new(\"xsmall\").label(\"XSmall\").selected(self.size == Size::XSmall),\n )\n .child(Button::new(\"small\").label(\"Small\").selected(self.size == Size::Small))\n .child(\n Button::new(\"medium\").label(\"Medium\").selected(self.size == Size::Medium),\n )\n .child(Button::new(\"large\").label(\"Large\").selected(self.size == Size::Large))\n .on_click(cx.listener(|this, selecteds: &Vec, window, cx| {\n let size = match selecteds[0] {\n 0 => Size::XSmall,\n 1 => Size::Small,\n 2 => Size::Medium,\n 3 => Size::Large,\n _ => unreachable!(),\n };\n this.set_size(size, window, cx);\n })),\n )\n .child(\n section(\"Default\").w_2_3().child(\n Alert::new(\n \"alert-default\",\n markdown(\n \"This is an alert with icon, title and description (in Markdown).\\n\\\n - This is a **list** item.\\n\\\n - This is another list item.\",\n ),\n )\n .with_size(self.size)\n .title(\"Success! Your changes have been saved\"),\n ),\n )\n .child(\n section(\"With variant\").w_2_3().child(\n v_flex()\n .w_full()\n .gap_3()\n .child(\n Alert::info(\"info1\", \"This is an info alert.\")\n .with_size(self.size)\n .title(\"Info message\")\n .on_close(cx.listener(|_, _, _, _| {\n println!(\"Info alert closed\");\n })),\n )\n .child(\n Alert::success(\n \"success-1\",\n \"You have successfully submitted your form.\\n\\\n Thank you for your submission!\",\n )\n .with_size(self.size)\n .title(\"Submit Successful\"),\n )\n .child(\n Alert::warning(\n \"warning-1\",\n \"This is a warning alert with icon, but no title.\\n\\\n This is second line of text to test is the line-height is correct.\",\n )\n .with_size(self.size),\n )\n .child(\n Alert::error(\n \"error-1\",\n markdown(\n \"Please verify your billing information and try again.\\n\\\n - Check your card details\\n\\\n - Ensure sufficient funds\\n\\\n - Verify billing address\",\n ),\n )\n .with_size(self.size)\n .title(\"Unable to process your payment.\"),\n ),\n ),\n )\n .child(\n section(\"Banner\").w_2_3().child(\n v_flex()\n .w_full()\n .gap_2()\n .child(\n Alert::new(\n \"banner-1\",\n \"This is a banner alert, it will take \\\n the full width of the container.\",\n )\n .banner()\n .on_close(cx.listener(|this, _, _, cx| {\n this.banner_visible = !this.banner_visible;\n cx.notify();\n }))\n .visible(self.banner_visible)\n .with_size(self.size),\n )\n .child(\n Alert::info(\n \"banner-info\",\n \"This is a banner alert, it will take the full width of the\\\n container.\",\n )\n .banner()\n .with_size(self.size),\n )\n .child(\n Alert::success(\n \"banner-success\",\n \"This is a banner alert, it will take the full width of the\\\n container.\",\n )\n .banner()\n .with_size(self.size),\n )\n .child(\n Alert::warning(\n \"banner-warning\",\n \"This is a banner alert, it will take the full width of the\\\n container.\",\n )\n .banner()\n .with_size(self.size),\n )\n .child(\n Alert::error(\n \"banner-error\",\n \"This is a banner alert, it will take the full width of the\\\n container.\",\n )\n .banner()\n .with_size(self.size),\n ),\n ),\n )\n .child(\n section(\"Custom Icon\").w_2_3().child(\n Alert::new(\n \"other-1\",\n \"Custom icon with info alert with long \\\n long long long long long long long long \\\n long long long long long long long long long \\\n long long messageeeeeeeee.\",\n )\n .title(\"Custom Icon\")\n .with_size(self.size)\n .icon(IconName::Calendar),\n ),\n )\n }\n}\n" }, { "path": "crates/story/src/stories/avatar_story.rs", "content": "use gpui::{\n App, AppContext, Context, Entity, FocusHandle, Focusable, IntoElement, ParentElement, Render,\n Styled, Window, px,\n};\nuse gpui_component::{\n ActiveTheme, IconName, Sizable as _, StyledExt,\n avatar::{Avatar, AvatarGroup},\n dock::PanelControl,\n v_flex,\n};\n\nuse crate::section;\n\npub struct AvatarStory {\n focus_handle: gpui::FocusHandle,\n}\n\nimpl AvatarStory {\n fn new(_: &mut Window, cx: &mut Context) -> Self {\n Self {\n focus_handle: cx.focus_handle(),\n }\n }\n\n pub fn view(window: &mut Window, cx: &mut App) -> Entity {\n cx.new(|cx| Self::new(window, cx))\n }\n}\n\nimpl super::Story for AvatarStory {\n fn title() -> &'static str {\n \"Avatar\"\n }\n\n fn description() -> &'static str {\n \"Avatar is an image that represents a user or organization.\"\n }\n\n fn new_view(window: &mut Window, cx: &mut App) -> Entity {\n Self::view(window, cx)\n }\n\n fn zoomable() -> Option {\n None\n }\n}\n\nimpl Focusable for AvatarStory {\n fn focus_handle(&self, _: &App) -> FocusHandle {\n self.focus_handle.clone()\n }\n}\n\nimpl Render for AvatarStory {\n fn render(&mut self, _: &mut Window, cx: &mut Context) -> impl IntoElement {\n v_flex()\n .gap_4()\n .child(\n section(\"Avatar with image\")\n .max_w_md()\n .child(\n Avatar::new()\n .name(\"Jason lee\")\n .src(\"https://avatars.githubusercontent.com/u/5518?v=4\")\n .with_size(px(100.)),\n )\n .child(\n Avatar::new()\n .src(\"https://avatars.githubusercontent.com/u/28998859?v=4\")\n .large(),\n )\n .child(\n Avatar::new()\n .src(\"https://avatars.githubusercontent.com/u/10757551?s=64&v=4\"),\n )\n .child(\n Avatar::new()\n .src(\"https://avatars.githubusercontent.com/u/20092316?v=4\")\n .small(),\n )\n .child(\n Avatar::new()\n .src(\"https://avatars.githubusercontent.com/u/150917089?v=4\")\n .xsmall(),\n ),\n )\n .child(\n section(\"Avatar with text\")\n .max_w_md()\n .child(Avatar::new().name(\"Jason Lee\").large())\n .child(Avatar::new().name(\"Floyd Wang\"))\n .child(Avatar::new().name(\"xda\").small())\n .child(Avatar::new().name(\"ihavecoke\").xsmall()),\n )\n .child(\n section(\"Placeholder\")\n .max_w_md()\n .child(Avatar::new().large())\n .child(Avatar::new())\n .child(Avatar::new().small())\n .child(Avatar::new().xsmall())\n .child(Avatar::new().placeholder(IconName::Building2)),\n )\n .child(\n section(\"Avatar Group\")\n .v_flex()\n .max_w_md()\n .child(\n AvatarGroup::new()\n .child(\n Avatar::new()\n .src(\"https://avatars.githubusercontent.com/u/5518?v=4\"),\n )\n .child(\n Avatar::new()\n .src(\"https://avatars.githubusercontent.com/u/28998859?v=4\"),\n )\n .child(\n Avatar::new()\n .src(\"https://avatars.githubusercontent.com/u/20092316?v=4\"),\n )\n .child(\n Avatar::new()\n .src(\"https://avatars.githubusercontent.com/u/22312482?v=4\"),\n )\n .child(\n Avatar::new()\n .src(\"https://avatars.githubusercontent.com/u/150917089?v=4\"),\n )\n .child(\n Avatar::new()\n .src(\"https://avatars.githubusercontent.com/u/1253486?v=4\"),\n ),\n )\n .child(\n AvatarGroup::new()\n .small()\n .limit(5)\n .child(\n Avatar::new()\n .src(\"https://avatars.githubusercontent.com/u/5518?v=4\"),\n )\n .child(\n Avatar::new()\n .src(\"https://avatars.githubusercontent.com/u/28998859?v=4\"),\n )\n .child(\n Avatar::new()\n .src(\"https://avatars.githubusercontent.com/u/20092316?v=4\"),\n )\n .child(\n Avatar::new()\n .src(\"https://avatars.githubusercontent.com/u/22312482?v=4\"),\n )\n .child(\n Avatar::new()\n .src(\"https://avatars.githubusercontent.com/u/150917089?v=4\"),\n )\n .child(\n Avatar::new()\n .src(\"https://avatars.githubusercontent.com/u/20337280?v=4\"),\n )\n .child(\n Avatar::new()\n .src(\"https://avatars.githubusercontent.com/u/629429?v=4\"),\n )\n .child(\n Avatar::new()\n .src(\"https://avatars.githubusercontent.com/u/583231?v=4\"),\n )\n .child(\n Avatar::new()\n .src(\"https://avatars.githubusercontent.com/u/1264109?v=4\"),\n )\n .child(\n Avatar::new()\n .src(\"https://avatars.githubusercontent.com/u/2936367?v=4\"),\n )\n .child(\n Avatar::new()\n .src(\"https://avatars.githubusercontent.com/u/1253486?v=4\"),\n ),\n )\n .child(\n AvatarGroup::new()\n .xsmall()\n .limit(6)\n .ellipsis()\n .child(\n Avatar::new()\n .src(\"https://avatars.githubusercontent.com/u/5518?v=4\"),\n )\n .child(\n Avatar::new()\n .src(\"https://avatars.githubusercontent.com/u/28998859?v=4\"),\n )\n .child(\n Avatar::new()\n .src(\"https://avatars.githubusercontent.com/u/20092316?v=4\"),\n )\n .child(\n Avatar::new()\n .src(\"https://avatars.githubusercontent.com/u/22312482?v=4\"),\n )\n .child(\n Avatar::new()\n .src(\"https://avatars.githubusercontent.com/u/150917089?v=4\"),\n )\n .child(\n Avatar::new()\n .src(\"https://avatars.githubusercontent.com/u/20337280?v=4\"),\n )\n .child(\n Avatar::new()\n .src(\"https://avatars.githubusercontent.com/u/2936367?v=4\"),\n )\n .child(\n Avatar::new()\n .src(\"https://avatars.githubusercontent.com/u/583231?v=4\"),\n )\n .child(\n Avatar::new()\n .src(\"https://avatars.githubusercontent.com/u/1264109?v=4\"),\n )\n .child(\n Avatar::new()\n .src(\"https://avatars.githubusercontent.com/u/10757551?v=4\"),\n )\n .child(\n Avatar::new()\n .src(\"https://avatars.githubusercontent.com/u/1506323?v=4\"),\n ),\n ),\n )\n .child(\n section(\"Custom rounded\").child(\n Avatar::new()\n .src(\"https://avatars.githubusercontent.com/u/5518?v=4\")\n .with_size(px(100.))\n .rounded(px(20.)),\n ),\n )\n .child(\n section(\"Custom Style\").child(\n Avatar::new()\n .src(\"https://avatars.githubusercontent.com/u/20092316?v=4\")\n .with_size(px(100.))\n .border_3()\n .border_color(cx.theme().foreground)\n .shadow_sm(),\n ),\n )\n }\n}\n" }, { "path": "crates/story/src/stories/badge_story.rs", "content": "use gpui::{\n App, AppContext, Context, Entity, FocusHandle, Focusable, IntoElement, ParentElement, Render,\n Styled, Window,\n};\nuse gpui_component::{\n avatar::Avatar, badge::Badge, dock::PanelControl, v_flex, ActiveTheme as _, Icon, IconName,\n Sizable as _,\n};\n\nuse crate::section;\n\npub struct BadgeStory {\n focus_handle: gpui::FocusHandle,\n}\n\nimpl BadgeStory {\n fn new(_: &mut Window, cx: &mut Context) -> Self {\n Self {\n focus_handle: cx.focus_handle(),\n }\n }\n\n pub fn view(window: &mut Window, cx: &mut App) -> Entity {\n cx.new(|cx| Self::new(window, cx))\n }\n}\n\nimpl super::Story for BadgeStory {\n fn title() -> &'static str {\n \"Badge\"\n }\n\n fn description() -> &'static str {\n \"A red dot that indicates the number of unread messages.\"\n }\n\n fn new_view(window: &mut Window, cx: &mut App) -> Entity {\n Self::view(window, cx)\n }\n\n fn zoomable() -> Option {\n None\n }\n}\n\nimpl Focusable for BadgeStory {\n fn focus_handle(&self, _: &App) -> FocusHandle {\n self.focus_handle.clone()\n }\n}\n\nimpl Render for BadgeStory {\n fn render(&mut self, _: &mut Window, cx: &mut Context) -> impl IntoElement {\n v_flex()\n .gap_4()\n .child(\n section(\"Badge on icon\")\n .max_w_md()\n .child(\n Badge::new()\n .count(3)\n .child(Icon::new(IconName::Bell).large()),\n )\n .child(\n Badge::new()\n .count(103)\n .child(Icon::new(IconName::Inbox).large()),\n ),\n )\n .child(\n section(\"Badge with count\")\n .max_w_md()\n .child(Badge::new().count(3).child(\n Avatar::new().src(\"https://avatars.githubusercontent.com/u/5518?v=4\"),\n ))\n .child(Badge::new().count(103).child(\n Avatar::new().src(\"https://avatars.githubusercontent.com/u/28998859?v=4\"),\n )),\n )\n .child(\n section(\"Badge with icon\")\n .max_w_md()\n .child(\n Badge::new()\n .icon(IconName::Check)\n .color(cx.theme().cyan)\n .child(\n Avatar::new()\n .src(\"https://avatars.githubusercontent.com/u/5518?v=4\"),\n ),\n )\n .child(\n Badge::new()\n .icon(IconName::Star)\n .color(cx.theme().yellow)\n .child(\n Avatar::new()\n .src(\"https://avatars.githubusercontent.com/u/20092316?v=4\"),\n ),\n ),\n )\n .child(\n section(\"Badge with dot\").max_w_md().child(\n Badge::new().dot().count(1).child(\n Avatar::new().src(\"https://avatars.githubusercontent.com/u/5518?v=4\"),\n ),\n ),\n )\n .child(\n section(\"Badge with color\")\n .max_w_md()\n .child(Badge::new().count(3).color(cx.theme().blue).child(\n Avatar::new().src(\"https://avatars.githubusercontent.com/u/5518?v=4\"),\n ))\n .child(Badge::new().dot().color(cx.theme().green).count(1).child(\n Avatar::new().src(\"https://avatars.githubusercontent.com/u/5518?v=4\"),\n )),\n )\n .child(\n section(\"Complex use\")\n .max_w_md()\n .child(\n Badge::new().count(212).large().child(\n Badge::new()\n .icon(IconName::Check)\n .large()\n .color(cx.theme().cyan)\n .child(\n Avatar::new()\n .large()\n .src(\"https://avatars.githubusercontent.com/u/5518?v=4\"),\n ),\n ),\n )\n .child(\n Badge::new().count(2).color(cx.theme().green).large().child(\n Badge::new()\n .icon(IconName::Star)\n .large()\n .color(cx.theme().yellow)\n .child(\n Avatar::new().large().src(\n \"https://avatars.githubusercontent.com/u/20092316?v=4\",\n ),\n ),\n ),\n )\n .child(\n Badge::new().count(3).color(cx.theme().green).child(\n Badge::new()\n .icon(IconName::Asterisk)\n .color(cx.theme().green)\n .child(\n Avatar::new().src(\n \"https://avatars.githubusercontent.com/u/22312482?v=4\",\n ),\n ),\n ),\n )\n .child(\n Badge::new().dot().child(\n Badge::new()\n .icon(IconName::Sun)\n .small()\n .color(cx.theme().red)\n .child(\n Avatar::new().small().src(\n \"https://avatars.githubusercontent.com/u/150917089?v=4\",\n ),\n ),\n ),\n ),\n )\n }\n}\n" }, { "path": "crates/story/src/stories/breadcrumb_story.rs", "content": "use gpui::{\n App, AppContext, Context, Entity, FocusHandle, Focusable, IntoElement, ParentElement, Render,\n Styled, Window, prelude::FluentBuilder as _,\n};\n\nuse gpui_component::{\n breadcrumb::{Breadcrumb, BreadcrumbItem},\n v_flex,\n};\n\nuse crate::section;\n\npub struct BreadcrumbStory {\n focus_handle: gpui::FocusHandle,\n clicked_item: Option,\n}\n\nimpl BreadcrumbStory {\n fn new(_: &mut Window, cx: &mut Context) -> Self {\n Self {\n focus_handle: cx.focus_handle(),\n clicked_item: None,\n }\n }\n\n pub fn view(window: &mut Window, cx: &mut App) -> Entity {\n cx.new(|cx| Self::new(window, cx))\n }\n}\n\nimpl super::Story for BreadcrumbStory {\n fn title() -> &'static str {\n \"Breadcrumb\"\n }\n\n fn description() -> &'static str {\n \"A breadcrumb navigation element that shows the current location in a hierarchy.\"\n }\n\n fn new_view(window: &mut Window, cx: &mut App) -> Entity {\n Self::view(window, cx)\n }\n}\n\nimpl Focusable for BreadcrumbStory {\n fn focus_handle(&self, _: &App) -> FocusHandle {\n self.focus_handle.clone()\n }\n}\n\nimpl Render for BreadcrumbStory {\n fn render(&mut self, _: &mut Window, cx: &mut Context) -> impl IntoElement {\n v_flex()\n .gap_6()\n .child(\n section(\"Basic Breadcrumb\").max_w_md().child(\n Breadcrumb::new()\n .child(\"Home\")\n .child(\"Documents\")\n .child(\"Projects\"),\n ),\n )\n .child(\n section(\"Click Handlers\").max_w_md().child(\n v_flex()\n .gap_4()\n .items_center()\n .child(\n Breadcrumb::new()\n .child(\"Home\")\n .child(BreadcrumbItem::new(\"Documents\").on_click(cx.listener(\n |this, _, _, cx| {\n this.clicked_item = Some(\"Documents\".to_string());\n cx.notify();\n },\n )))\n .child(BreadcrumbItem::new(\"Projects\").on_click(cx.listener(\n |this, _, _, cx| {\n this.clicked_item = Some(\"Projects\".to_string());\n cx.notify();\n },\n )))\n .child(BreadcrumbItem::new(\"Current\").on_click(cx.listener(\n |this, _, _, cx| {\n this.clicked_item = Some(\"Current\".to_string());\n cx.notify();\n },\n ))),\n )\n .when_some(self.clicked_item.clone(), |this, item| {\n this.child(format!(\"Clicked: {}\", item))\n }),\n ),\n )\n }\n}\n" }, { "path": "crates/story/src/stories/button_story.rs", "content": "use gpui::{\n Action, App, AppContext as _, Axis, ClickEvent, Context, Entity, Focusable, InteractiveElement,\n IntoElement, ParentElement as _, Render, Styled as _, Window, prelude::FluentBuilder, px,\n};\n\nuse gpui_component::{\n ActiveTheme, Disableable as _, Icon, IconName, Selectable as _, Sizable as _, Theme,\n button::{Button, ButtonCustomVariant, ButtonGroup, ButtonVariants as _},\n checkbox::Checkbox,\n h_flex,\n progress::ProgressCircle,\n v_flex,\n};\nuse serde::Deserialize;\n\nuse crate::section;\n\n#[derive(Clone, Action, PartialEq, Eq, Deserialize)]\n#[action(namespace = button_story, no_json)]\nenum ButtonAction {\n Disabled,\n Loading,\n Selected,\n Compact,\n}\n\npub struct ButtonStory {\n focus_handle: gpui::FocusHandle,\n disabled: bool,\n loading: bool,\n selected: bool,\n compact: bool,\n toggle_multiple: bool,\n}\n\nimpl ButtonStory {\n pub fn view(_: &mut Window, cx: &mut App) -> Entity {\n cx.new(|cx| Self {\n focus_handle: cx.focus_handle(),\n disabled: false,\n loading: false,\n selected: false,\n compact: false,\n toggle_multiple: false,\n })\n }\n\n fn on_click(ev: &ClickEvent, _: &mut Window, _: &mut App) {\n println!(\"Button clicked {:?}\", ev);\n }\n\n fn on_hover(hovered: &bool, _: &mut Window, _: &mut App) {\n println!(\"Button hovered {:?}\", hovered);\n }\n}\n\nimpl super::Story for ButtonStory {\n fn title() -> &'static str {\n \"Button\"\n }\n\n fn description() -> &'static str {\n \"Displays a button or a component that looks like a button.\"\n }\n\n fn closable() -> bool {\n false\n }\n\n fn new_view(window: &mut Window, cx: &mut App) -> Entity {\n Self::view(window, cx)\n }\n}\n\nimpl Focusable for ButtonStory {\n fn focus_handle(&self, _: &gpui::App) -> gpui::FocusHandle {\n self.focus_handle.clone()\n }\n}\n\nimpl Render for ButtonStory {\n fn render(&mut self, _: &mut Window, cx: &mut Context) -> impl IntoElement {\n let disabled = self.disabled;\n let loading = self.loading;\n let selected = self.selected;\n let compact = self.compact;\n let toggle_multiple = self.toggle_multiple;\n\n let custom_variant = ButtonCustomVariant::new(cx)\n .color(cx.theme().magenta)\n .foreground(cx.theme().magenta)\n .hover(cx.theme().magenta.opacity(0.1))\n .active(cx.theme().magenta);\n\n v_flex()\n .on_action(\n cx.listener(|this, action: &ButtonAction, _, _| match action {\n ButtonAction::Disabled => this.disabled = !this.disabled,\n ButtonAction::Loading => this.loading = !this.loading,\n ButtonAction::Selected => this.selected = !this.selected,\n ButtonAction::Compact => this.compact = !this.compact,\n }),\n )\n .gap_6()\n .child(\n h_flex()\n .gap_3()\n .child(\n Checkbox::new(\"disabled-button\")\n .label(\"Disabled\")\n .checked(self.disabled)\n .on_click(cx.listener(|view, _, _, cx| {\n view.disabled = !view.disabled;\n cx.notify();\n })),\n )\n .child(\n Checkbox::new(\"loading-button\")\n .label(\"Loading\")\n .checked(self.loading)\n .on_click(cx.listener(|view, _, _, cx| {\n view.loading = !view.loading;\n cx.notify();\n })),\n )\n .child(\n Checkbox::new(\"selected-button\")\n .label(\"Selected\")\n .checked(self.selected)\n .on_click(cx.listener(|view, _, _, cx| {\n view.selected = !view.selected;\n cx.notify();\n })),\n )\n .child(\n Checkbox::new(\"compact-button\")\n .label(\"Compact\")\n .checked(self.compact)\n .on_click(cx.listener(|view, _, _, cx| {\n view.compact = !view.compact;\n cx.notify();\n })),\n )\n .child(\n Checkbox::new(\"shadow-button\")\n .label(\"Shadow\")\n .checked(cx.theme().shadow)\n .on_click(cx.listener(|_, _, window, cx| {\n let mut theme = cx.theme().clone();\n theme.shadow = !theme.shadow;\n cx.set_global::(theme);\n window.refresh();\n })),\n ),\n )\n .child(\n section(\"Normal Button\")\n .max_w_lg()\n .child(\n Button::new(\"button-0\")\n .label(\"Default\")\n .disabled(disabled)\n .selected(selected)\n .loading(loading)\n .when(compact, |this| this.compact())\n .on_click(Self::on_click)\n .on_hover(Self::on_hover),\n )\n .child(\n Button::new(\"button-1\")\n .primary()\n .label(\"Primary\")\n .disabled(disabled)\n .selected(selected)\n .loading(loading)\n .when(compact, |this| this.compact())\n .on_click(Self::on_click)\n .on_hover(Self::on_hover),\n )\n .child(\n Button::new(\"button-2\")\n .secondary()\n .label(\"Secondary\")\n .disabled(disabled)\n .selected(selected)\n .loading(loading)\n .when(compact, |this| this.compact())\n .on_click(Self::on_click)\n .on_hover(Self::on_hover),\n )\n .child(\n Button::new(\"button-4\")\n .danger()\n .label(\"Danger\")\n .disabled(disabled)\n .selected(selected)\n .loading(loading)\n .when(compact, |this| this.compact())\n .on_click(Self::on_click)\n .on_hover(Self::on_hover),\n )\n .child(\n Button::new(\"button-4-warning\")\n .warning()\n .label(\"Warning\")\n .disabled(disabled)\n .selected(selected)\n .loading(loading)\n .when(compact, |this| this.compact())\n .on_click(Self::on_click)\n .on_hover(Self::on_hover),\n )\n .child(\n Button::new(\"button-4-success\")\n .success()\n .label(\"Success\")\n .disabled(disabled)\n .selected(selected)\n .loading(loading)\n .when(compact, |this| this.compact())\n .on_click(Self::on_click)\n .on_hover(Self::on_hover),\n )\n .child(\n Button::new(\"button-5-info\")\n .info()\n .label(\"Info\")\n .disabled(disabled)\n .selected(selected)\n .loading(loading)\n .when(compact, |this| this.compact())\n .on_click(Self::on_click)\n .on_hover(Self::on_hover),\n )\n .child(\n Button::new(\"button-5-ghost\")\n .ghost()\n .label(\"Ghost\")\n .disabled(disabled)\n .selected(selected)\n .loading(loading)\n .when(compact, |this| this.compact())\n .on_click(Self::on_click)\n .on_hover(Self::on_hover),\n )\n .child(\n Button::new(\"button-5-link\")\n .link()\n .label(\"Link\")\n .disabled(disabled)\n .selected(selected)\n .loading(loading)\n .when(compact, |this| this.compact())\n .on_click(Self::on_click)\n .on_hover(Self::on_hover),\n )\n .child(\n Button::new(\"button-5-text\")\n .text()\n .label(\"Text\")\n .disabled(disabled)\n .selected(selected)\n .loading(loading)\n .when(compact, |this| this.compact())\n .on_click(Self::on_click)\n .on_hover(Self::on_hover),\n ),\n )\n .child(\n section(\"Button with Icon\")\n .child(\n Button::new(\"button-icon-1\")\n .outline()\n .label(\"Confirm\")\n .icon(IconName::Check)\n .disabled(disabled)\n .selected(selected)\n .loading(loading)\n .when(compact, |this| this.compact())\n .on_click(Self::on_click),\n )\n .child(\n Button::new(\"button-icon-2\")\n .outline()\n .label(\"Abort\")\n .icon(IconName::Close)\n .disabled(disabled)\n .selected(selected)\n .loading(loading)\n .when(compact, |this| this.compact())\n .on_click(Self::on_click),\n )\n .child(\n Button::new(\"button-icon-3\")\n .outline()\n .label(\"Maximize\")\n .icon(Icon::new(IconName::Maximize))\n .disabled(disabled)\n .selected(selected)\n .loading(loading)\n .when(compact, |this| this.compact())\n .on_click(Self::on_click),\n )\n .child(\n Button::new(\"button-icon-4\")\n .child(\n h_flex()\n .items_center()\n .gap_2()\n .child(\"Custom Child\")\n .child(IconName::ChevronDown)\n .child(IconName::Eye),\n )\n .disabled(disabled)\n .selected(selected)\n .loading(loading)\n .when(compact, |this| this.compact())\n .on_click(Self::on_click),\n )\n .child(\n Button::new(\"button-icon-5-ghost\")\n .ghost()\n .icon(IconName::Check)\n .label(\"Confirm\")\n .disabled(disabled)\n .selected(selected)\n .loading(loading)\n .when(compact, |this| this.compact())\n .on_click(Self::on_click),\n )\n .child(\n Button::new(\"button-icon-6-link\")\n .link()\n .icon(IconName::Check)\n .label(\"Link\")\n .disabled(disabled)\n .selected(selected)\n .loading(loading)\n .when(compact, |this| this.compact())\n .on_click(Self::on_click),\n )\n .child(\n Button::new(\"button-icon-6-text\")\n .text()\n .icon(IconName::Check)\n .label(\"Text Button\")\n .disabled(disabled)\n .selected(selected)\n .loading(loading)\n .when(compact, |this| this.compact())\n .on_click(Self::on_click),\n ),\n )\n .child(\n section(\"With Progress\").child(\n h_flex()\n .gap_4()\n .child(\n Button::new(\"progress-button-1\")\n .primary()\n .large()\n .icon(\n ProgressCircle::new(\"circle-progress-1\")\n .color(cx.theme().primary_foreground)\n .value(25.),\n )\n .label(\"Installing...\"),\n )\n .child(\n Button::new(\"progress-button-2\")\n .icon(ProgressCircle::new(\"circle-progress-2\").value(35.))\n .label(\"Installing...\"),\n )\n .child(\n Button::new(\"progress-button-3\")\n .small()\n .icon(ProgressCircle::new(\"circle-progress-3\").value(68.))\n .label(\"Installing...\"),\n )\n .child(\n Button::new(\"progress-button-4\")\n .xsmall()\n .icon(ProgressCircle::new(\"circle-progress-4\").value(85.))\n .label(\"Installing...\"),\n ),\n ),\n )\n .child(\n section(\"Outline Button\")\n .max_w_lg()\n .child(\n Button::new(\"button-outline-1\")\n .primary()\n .outline()\n .label(\"Primary Button\")\n .disabled(disabled)\n .selected(selected)\n .loading(loading)\n .when(compact, |this| this.compact())\n .on_click(Self::on_click),\n )\n .child(\n Button::new(\"button-outline-2\")\n .outline()\n .label(\"Normal Button\")\n .disabled(disabled)\n .selected(selected)\n .loading(loading)\n .when(compact, |this| this.compact())\n .on_click(Self::on_click),\n )\n .child(\n Button::new(\"button-outline-4-danger\")\n .danger()\n .outline()\n .label(\"Danger Button\")\n .disabled(disabled)\n .selected(selected)\n .loading(loading)\n .when(compact, |this| this.compact())\n .on_click(Self::on_click),\n )\n .child(\n Button::new(\"button-outline-4-warning\")\n .warning()\n .outline()\n .label(\"Warning Button\")\n .disabled(disabled)\n .selected(selected)\n .loading(loading)\n .when(compact, |this| this.compact())\n .on_click(Self::on_click),\n )\n .child(\n Button::new(\"button-outline-4-success\")\n .success()\n .outline()\n .label(\"Success Button\")\n .disabled(disabled)\n .selected(selected)\n .loading(loading)\n .when(compact, |this| this.compact())\n .on_click(Self::on_click),\n )\n .child(\n Button::new(\"button-outline-5-info\")\n .info()\n .outline()\n .label(\"Info Button\")\n .disabled(disabled)\n .selected(selected)\n .loading(loading)\n .when(compact, |this| this.compact())\n .on_click(Self::on_click),\n )\n .child(\n Button::new(\"button-outline-5-ghost\")\n .ghost()\n .outline()\n .label(\"Ghost Button\")\n .disabled(disabled)\n .selected(selected)\n .loading(loading)\n .when(compact, |this| this.compact())\n .on_click(Self::on_click),\n )\n .child(\n Button::new(\"button-outline-5-link\")\n .link()\n .outline()\n .label(\"Link Button\")\n .disabled(disabled)\n .selected(selected)\n .loading(loading)\n .when(compact, |this| this.compact())\n .on_click(Self::on_click),\n )\n .child(\n Button::new(\"button-outline-5-text\")\n .text()\n .outline()\n .label(\"Text Button\")\n .disabled(disabled)\n .selected(selected)\n .loading(loading)\n .when(compact, |this| this.compact())\n .on_click(Self::on_click),\n ),\n )\n .child(\n section(\"With Dropdown Caret\")\n .max_w_lg()\n .child(\n Button::new(\"button-outline-1\")\n .primary()\n .dropdown_caret(true)\n .label(\"Primary Button\")\n .disabled(disabled)\n .selected(selected)\n .loading(loading)\n .when(compact, |this| this.compact())\n .on_click(Self::on_click),\n )\n .child(\n Button::new(\"button-outline-2\")\n .label(\"Default Button\")\n .dropdown_caret(true)\n .disabled(disabled)\n .selected(selected)\n .loading(loading)\n .when(compact, |this| this.compact())\n .on_click(Self::on_click),\n )\n .child(\n Button::new(\"button-outline-2\")\n .secondary()\n .label(\"Secondary Button\")\n .dropdown_caret(true)\n .disabled(disabled)\n .selected(selected)\n .loading(loading)\n .when(compact, |this| this.compact())\n .on_click(Self::on_click),\n )\n .child(\n Button::new(\"button-outline-5-ghost\")\n .ghost()\n .dropdown_caret(true)\n .label(\"Ghost Button\")\n .disabled(disabled)\n .selected(selected)\n .loading(loading)\n .when(compact, |this| this.compact())\n .on_click(Self::on_click),\n )\n .child(\n Button::new(\"button-outline-5-link\")\n .link()\n .dropdown_caret(true)\n .label(\"Link Button\")\n .disabled(disabled)\n .selected(selected)\n .loading(loading)\n .when(compact, |this| this.compact())\n .on_click(Self::on_click),\n )\n .child(\n Button::new(\"button-outline-5-text\")\n .outline()\n .small()\n .dropdown_caret(true)\n .label(\"Small Button\")\n .disabled(disabled)\n .selected(selected)\n .loading(loading)\n .when(compact, |this| this.compact())\n .on_click(Self::on_click),\n ),\n )\n .child(\n section(\"Small Size\")\n .child(\n Button::new(\"button-6\")\n .label(\"Primary Button\")\n .icon(IconName::Check)\n .primary()\n .small()\n .loading(true)\n .disabled(disabled)\n .selected(selected)\n .loading(loading)\n .when(compact, |this| this.compact())\n .on_click(Self::on_click),\n )\n .child(\n Button::new(\"button-7\")\n .label(\"Secondary Button\")\n .small()\n .disabled(disabled)\n .selected(selected)\n .loading(loading)\n .when(compact, |this| this.compact())\n .on_click(Self::on_click),\n )\n .child(\n Button::new(\"button-8\")\n .label(\"Danger Button\")\n .danger()\n .small()\n .disabled(disabled)\n .selected(selected)\n .loading(loading)\n .when(compact, |this| this.compact())\n .on_click(Self::on_click),\n )\n .child(\n Button::new(\"button-8-outline\")\n .label(\"Outline Button\")\n .outline()\n .small()\n .disabled(disabled)\n .selected(selected)\n .loading(loading)\n .when(compact, |this| this.compact())\n .on_click(Self::on_click),\n )\n .child(\n Button::new(\"button-8-ghost\")\n .label(\"Ghost Button\")\n .ghost()\n .small()\n .disabled(disabled)\n .selected(selected)\n .loading(loading)\n .when(compact, |this| this.compact())\n .on_click(Self::on_click),\n )\n .child(\n Button::new(\"button-8-link\")\n .label(\"Link Button\")\n .link()\n .small()\n .disabled(disabled)\n .selected(selected)\n .loading(loading)\n .when(compact, |this| this.compact())\n .on_click(Self::on_click),\n ),\n )\n .child(\n section(\"XSmall Size\")\n .child(\n Button::new(\"button-xs-1\")\n .label(\"Primary Button\")\n .primary()\n .icon(IconName::Check)\n .xsmall()\n .disabled(disabled)\n .selected(selected)\n .loading(loading)\n .when(compact, |this| this.compact())\n .on_click(Self::on_click),\n )\n .child(\n Button::new(\"button-xs-2\")\n .label(\"Secondary Button\")\n .xsmall()\n .loading(true)\n .disabled(disabled)\n .selected(selected)\n .loading(loading)\n .when(compact, |this| this.compact())\n .on_click(Self::on_click),\n )\n .child(\n Button::new(\"button-xs-3\")\n .label(\"Danger Button\")\n .danger()\n .xsmall()\n .disabled(disabled)\n .selected(selected)\n .loading(loading)\n .when(compact, |this| this.compact())\n .on_click(Self::on_click),\n )\n .child(\n Button::new(\"button-xs-3-ghost\")\n .label(\"Ghost Button\")\n .ghost()\n .xsmall()\n .disabled(disabled)\n .selected(selected)\n .loading(loading)\n .when(compact, |this| this.compact())\n .on_click(Self::on_click),\n )\n .child(\n Button::new(\"button-xs-3-outline\")\n .label(\"Outline Button\")\n .outline()\n .xsmall()\n .disabled(disabled)\n .selected(selected)\n .loading(loading)\n .when(compact, |this| this.compact())\n .on_click(Self::on_click),\n )\n .child(\n Button::new(\"button-xs-3-link\")\n .label(\"Link Button\")\n .link()\n .xsmall()\n .disabled(disabled)\n .selected(selected)\n .loading(loading)\n .when(compact, |this| this.compact())\n .on_click(Self::on_click),\n ),\n )\n .child(\n section(\"Button Group\").child(\n ButtonGroup::new(\"button-group\")\n .outline()\n .disabled(disabled)\n .child(\n Button::new(\"button-one\")\n .label(\"One\")\n .disabled(disabled)\n .selected(selected)\n .when(compact, |this| this.compact())\n .on_click(Self::on_click),\n )\n .child(\n Button::new(\"button-two\")\n .label(\"Two\")\n .disabled(disabled)\n .selected(selected)\n .when(compact, |this| this.compact())\n .on_click(Self::on_click),\n )\n .child(\n Button::new(\"button-three\")\n .label(\"Three\")\n .disabled(disabled)\n .selected(selected)\n .when(compact, |this| this.compact())\n .on_click(Self::on_click),\n ),\n ),\n )\n .child(\n section(\"Button Group (Vertical)\").child(\n ButtonGroup::new(\"button-group-vertical\")\n .outline()\n .layout(Axis::Vertical)\n .disabled(disabled)\n .child(\n Button::new(\"button-one\")\n .label(\"One\")\n .disabled(disabled)\n .selected(selected)\n .when(compact, |this| this.compact())\n .on_click(Self::on_click),\n )\n .child(\n Button::new(\"button-two\")\n .label(\"Two\")\n .disabled(disabled)\n .selected(selected)\n .when(compact, |this| this.compact())\n .on_click(Self::on_click),\n )\n .child(\n Button::new(\"button-three\")\n .label(\"Three\")\n .disabled(disabled)\n .selected(selected)\n .when(compact, |this| this.compact())\n .on_click(Self::on_click),\n ),\n ),\n )\n .child(\n section(\"Toggle Button Group\")\n .sub_title(\n Checkbox::new(\"multiple-button\")\n .text_sm()\n .label(\"Multiple\")\n .checked(toggle_multiple)\n .on_click(cx.listener(|view, _, _, cx| {\n view.toggle_multiple = !view.toggle_multiple;\n cx.notify();\n })),\n )\n .child(\n ButtonGroup::new(\"toggle-button-group\")\n .outline()\n .compact()\n .multiple(toggle_multiple)\n .child(\n Button::new(\"disabled-toggle-button\")\n .label(\"Disabled\")\n .selected(disabled),\n )\n .child(\n Button::new(\"loading-toggle-button\")\n .label(\"Loading\")\n .selected(loading),\n )\n .child(\n Button::new(\"selected-toggle-button\")\n .label(\"Selected\")\n .selected(selected),\n )\n .child(\n Button::new(\"compact-toggle-button\")\n .label(\"Compact\")\n .selected(compact),\n )\n .on_click(cx.listener(|view, selected: &Vec, _, cx| {\n view.disabled = selected.contains(&0);\n view.loading = selected.contains(&1);\n view.selected = selected.contains(&2);\n view.compact = selected.contains(&3);\n cx.notify();\n })),\n ),\n )\n .child(\n section(\"Icon Button\")\n .child(\n Button::new(\"icon-button-primary\")\n .icon(IconName::Search)\n .loading_icon(IconName::LoaderCircle)\n .primary()\n .disabled(disabled)\n .selected(selected)\n .loading(loading)\n .when(compact, |this| this.compact()),\n )\n .child(\n Button::new(\"icon-button-secondary\")\n .icon(IconName::Info)\n .loading(true)\n .disabled(disabled)\n .selected(selected)\n .loading(loading)\n .when(compact, |this| this.compact()),\n )\n .child(\n Button::new(\"icon-button-danger\")\n .icon(IconName::Close)\n .danger()\n .disabled(disabled)\n .selected(selected)\n .loading(loading)\n .when(compact, |this| this.compact()),\n )\n .child(\n Button::new(\"icon-button-small-primary\")\n .icon(IconName::Search)\n .small()\n .primary()\n .disabled(disabled)\n .selected(selected)\n .loading(loading)\n .when(compact, |this| this.compact()),\n )\n .child(\n Button::new(\"icon-button-outline\")\n .icon(IconName::Search)\n .outline()\n .disabled(disabled)\n .selected(selected)\n .loading(loading)\n .when(compact, |this| this.compact()),\n )\n .child(\n Button::new(\"icon-button-ghost\")\n .icon(IconName::ArrowLeft)\n .loading_icon(IconName::LoaderCircle)\n .ghost()\n .disabled(disabled)\n .selected(selected)\n .loading(loading)\n .when(compact, |this| this.compact()),\n ),\n )\n .child(\n section(\"Icon Button\")\n .child(\n Button::new(\"icon-button-4\")\n .icon(IconName::Info)\n .small()\n .disabled(disabled)\n .selected(selected)\n .loading(loading)\n .when(compact, |this| this.compact()),\n )\n .child(\n Button::new(\"icon-button-5\")\n .icon(IconName::Close)\n .small()\n .danger()\n .disabled(disabled)\n .selected(selected)\n .loading(loading)\n .when(compact, |this| this.compact()),\n )\n .child(\n Button::new(\"icon-button-6\")\n .icon(IconName::Search)\n .small()\n .primary()\n .disabled(disabled)\n .selected(selected)\n .loading(loading)\n .when(compact, |this| this.compact()),\n )\n .child(\n Button::new(\"icon-button-7\")\n .icon(IconName::Info)\n .xsmall()\n .disabled(disabled)\n .selected(selected)\n .loading(loading)\n .when(compact, |this| this.compact()),\n )\n .child(\n Button::new(\"icon-button-8\")\n .icon(IconName::Close)\n .xsmall()\n .danger()\n .disabled(disabled)\n .selected(selected)\n .loading(loading)\n .when(compact, |this| this.compact()),\n )\n .child(\n Button::new(\"icon-button-9\")\n .icon(IconName::Heart)\n .size(px(24.))\n .ghost()\n .disabled(disabled)\n .selected(selected)\n .loading(loading)\n .when(compact, |this| this.compact()),\n ),\n )\n .child(\n section(\"Custom Button\")\n .child(\n Button::new(\"button-6-custom\")\n .custom(custom_variant)\n .label(\"Custom Button\")\n .disabled(disabled)\n .selected(selected)\n .loading(loading)\n .when(compact, |this| this.compact())\n .on_click(Self::on_click),\n )\n .child(\n Button::new(\"button-outline-6-custom\")\n .outline()\n .custom(custom_variant)\n .label(\"Outline Button\")\n .disabled(disabled)\n .selected(selected)\n .loading(loading)\n .when(compact, |this| this.compact())\n .on_click(Self::on_click),\n )\n .child(\n Button::new(\"button-outline-6-custom-1\")\n .outline()\n .icon(IconName::Bell)\n .custom(custom_variant)\n .label(\"Icon Button\")\n .disabled(disabled)\n .selected(selected)\n .loading(loading)\n .when(compact, |this| this.compact())\n .on_click(Self::on_click),\n ),\n )\n }\n}\n" }, { "path": "crates/story/src/stories/calendar_story.rs", "content": "use gpui::{\n App, AppContext, Context, Entity, FocusHandle, Focusable, IntoElement, ParentElement as _,\n Render, Styled as _, Window,\n};\nuse gpui_component::{\n calendar::{Calendar, CalendarState},\n v_flex,\n};\n\nuse crate::section;\n\npub struct CalendarStory {\n focus_handle: FocusHandle,\n calendar: Entity,\n calendar_wide: Entity,\n calendar_with_disabled_matcher: Entity,\n}\n\nimpl super::Story for CalendarStory {\n fn title() -> &'static str {\n \"Calendar\"\n }\n\n fn description() -> &'static str {\n \"A calendar to select a date or date range.\"\n }\n\n fn new_view(window: &mut Window, cx: &mut App) -> Entity {\n Self::view(window, cx)\n }\n}\n\nimpl CalendarStory {\n pub fn view(window: &mut Window, cx: &mut App) -> Entity {\n cx.new(|cx| Self::new(window, cx))\n }\n\n fn new(window: &mut Window, cx: &mut Context) -> Self {\n let calendar = cx.new(|cx| CalendarState::new(window, cx));\n let calendar_wide = cx.new(|cx| CalendarState::new(window, cx));\n let calendar_with_disabled_matcher =\n cx.new(|cx| CalendarState::new(window, cx).disabled_matcher(vec![0, 3, 6]));\n\n Self {\n calendar,\n calendar_wide,\n calendar_with_disabled_matcher,\n focus_handle: cx.focus_handle(),\n }\n }\n}\n\nimpl Focusable for CalendarStory {\n fn focus_handle(&self, _: &App) -> FocusHandle {\n self.focus_handle.clone()\n }\n}\n\nimpl Render for CalendarStory {\n fn render(&mut self, _: &mut Window, _: &mut Context) -> impl IntoElement {\n v_flex()\n .gap_3()\n .child(\n section(\"Normal\")\n .max_w_md()\n .child(Calendar::new(&self.calendar)),\n )\n .child(\n section(\"With 3 Months\")\n .max_w_md()\n .child(Calendar::new(&self.calendar_wide).number_of_months(3)),\n )\n .child(\n section(\"With Disabled matcher (Sundays, Wednesdays, Saturdays)\")\n .max_w_md()\n .child(Calendar::new(&self.calendar_with_disabled_matcher)),\n )\n }\n}\n" }, { "path": "crates/story/src/stories/chart_story/chart_story.rs", "content": "use gpui::{\n App, AppContext, Context, Entity, FocusHandle, Focusable, Hsla, IntoElement, ParentElement,\n Render, SharedString, Styled, Window, div, linear_color_stop, linear_gradient,\n prelude::FluentBuilder, px,\n};\nuse gpui_component::{\n ActiveTheme, StyledExt,\n chart::{AreaChart, BarChart, CandlestickChart, LineChart, PieChart},\n divider::Divider,\n dock::PanelControl,\n h_flex, v_flex,\n};\nuse serde::Deserialize;\n\nuse super::StackedBarChart;\nuse crate::Story;\n\n#[derive(Clone, Deserialize)]\nstruct MonthlyDevice {\n pub month: SharedString,\n pub desktop: f64,\n pub color_alpha: f32,\n}\n\nimpl MonthlyDevice {\n pub fn color(&self, color: Hsla) -> Hsla {\n color.alpha(self.color_alpha)\n }\n}\n\n#[derive(Clone, Deserialize)]\npub struct DailyDevice {\n pub date: SharedString,\n pub desktop: f64,\n pub mobile: f64,\n pub tablet: f64,\n pub watch: f64,\n}\n\n#[derive(Clone, Deserialize)]\npub struct StockPrice {\n pub date: SharedString,\n pub open: f64,\n pub high: f64,\n pub low: f64,\n pub close: f64,\n}\n\npub struct ChartStory {\n focus_handle: FocusHandle,\n daily_devices: Vec,\n monthly_devices: Vec,\n stock_prices: Vec,\n}\n\nimpl ChartStory {\n fn new(_: &mut Window, cx: &mut Context) -> Self {\n let daily_devices = serde_json::from_str::>(include_str!(\n \"../../fixtures/daily-devices.json\"\n ))\n .unwrap();\n let monthly_devices = serde_json::from_str::>(include_str!(\n \"../../fixtures/monthly-devices.json\"\n ))\n .unwrap();\n let stock_prices = serde_json::from_str::>(include_str!(\n \"../../fixtures/stock-prices.json\"\n ))\n .unwrap();\n\n Self {\n daily_devices,\n monthly_devices,\n stock_prices,\n focus_handle: cx.focus_handle(),\n }\n }\n\n pub fn view(window: &mut Window, cx: &mut App) -> Entity {\n cx.new(|cx| Self::new(window, cx))\n }\n}\n\nimpl Story for ChartStory {\n fn title() -> &'static str {\n \"Chart\"\n }\n\n fn description() -> &'static str {\n \"Beautiful Charts & Graphs.\"\n }\n\n fn new_view(window: &mut Window, cx: &mut App) -> Entity {\n Self::view(window, cx)\n }\n\n fn zoomable() -> Option {\n None\n }\n}\n\nimpl Focusable for ChartStory {\n fn focus_handle(&self, _: &App) -> FocusHandle {\n self.focus_handle.clone()\n }\n}\n\nfn chart_container(\n title: &str,\n chart: impl IntoElement,\n center: bool,\n cx: &mut Context,\n) -> impl IntoElement {\n v_flex()\n .flex_1()\n .h(px(400.))\n .border_1()\n .border_color(cx.theme().border)\n .rounded(cx.theme().radius_lg)\n .p_4()\n .child(\n div()\n .when(center, |this| this.text_center())\n .font_semibold()\n .child(title.to_string()),\n )\n .child(\n div()\n .when(center, |this| this.text_center())\n .text_color(cx.theme().muted_foreground)\n .text_sm()\n .child(\"January-June 2025\"),\n )\n .child(div().flex_1().py_4().child(chart))\n .child(\n div()\n .when(center, |this| this.text_center())\n .font_semibold()\n .text_sm()\n .child(\"Trending up by 5.2% this month\"),\n )\n .child(\n div()\n .when(center, |this| this.text_center())\n .text_color(cx.theme().muted_foreground)\n .text_sm()\n .child(\"Showing total visitors for the last 6 months\"),\n )\n}\n\nimpl Render for ChartStory {\n fn render(&mut self, _: &mut Window, cx: &mut Context) -> impl IntoElement {\n let color = cx.theme().chart_3;\n v_flex()\n .size_full()\n .gap_y_4()\n .bg(cx.theme().background)\n .child(\n div().child(chart_container(\n \"Area Chart - Stacked\",\n AreaChart::new(self.daily_devices.clone())\n .x(|d| d.date.clone())\n .y(|d| d.desktop)\n .stroke(cx.theme().chart_1)\n .fill(linear_gradient(\n 0.,\n linear_color_stop(cx.theme().chart_1.opacity(0.4), 1.),\n linear_color_stop(cx.theme().background.opacity(0.3), 0.),\n ))\n .y(|d| d.mobile)\n .stroke(cx.theme().chart_2)\n .fill(linear_gradient(\n 0.,\n linear_color_stop(cx.theme().chart_2.opacity(0.4), 1.),\n linear_color_stop(cx.theme().background.opacity(0.3), 0.),\n ))\n .tick_margin(8),\n false,\n cx,\n )),\n )\n .child(\n h_flex()\n .flex_wrap()\n .gap_4()\n .child(chart_container(\n \"Pie Chart\",\n PieChart::new(self.monthly_devices.clone())\n .value(|d| d.desktop as f32)\n .outer_radius(100.)\n .color(move |d| d.color(color)),\n true,\n cx,\n ))\n .child(chart_container(\n \"Pie Chart - Donut\",\n PieChart::new(self.monthly_devices.clone())\n .value(|d| d.desktop as f32)\n .inner_radius(60.)\n .outer_radius_fn(|d| 100. - d.index as f32 * 4.)\n .color(move |d| d.color(color)),\n true,\n cx,\n ))\n .child(chart_container(\n \"Pie Chart - Pad Angle\",\n PieChart::new(self.monthly_devices.clone())\n .value(|d| d.desktop as f32)\n .inner_radius(60.)\n .outer_radius(100.)\n .pad_angle(4. / 100.)\n .color(move |d| d.color(color)),\n true,\n cx,\n )),\n )\n .child(Divider::horizontal())\n .child(\n h_flex()\n .flex_wrap()\n .gap_4()\n .child(chart_container(\n \"Bar Chart\",\n BarChart::new(self.monthly_devices.clone())\n .x(|d| d.month.clone())\n .y(|d| d.desktop),\n false,\n cx,\n ))\n .child(chart_container(\n \"Bar Chart - Mixed\",\n BarChart::new(self.monthly_devices.clone())\n .x(|d| d.month.clone())\n .y(|d| d.desktop)\n .fill(move |d| d.color(color)),\n false,\n cx,\n ))\n .child({\n let data = self.daily_devices.iter().take(8).cloned().collect();\n chart_container(\n \"Bar Chart - Stacked\",\n StackedBarChart::new(data),\n false,\n cx,\n )\n })\n .child(chart_container(\n \"Bar Chart - Label\",\n BarChart::new(self.monthly_devices.clone())\n .x(|d| d.month.clone())\n .y(|d| d.desktop)\n .label(|d| d.desktop.to_string()),\n false,\n cx,\n )),\n )\n .child(Divider::horizontal())\n .child(\n h_flex()\n .flex_wrap()\n .gap_4()\n .child(chart_container(\n \"Line Chart\",\n LineChart::new(self.monthly_devices.clone())\n .x(|d| d.month.clone())\n .y(|d| d.desktop),\n false,\n cx,\n ))\n .child(chart_container(\n \"Line Chart - Linear\",\n LineChart::new(self.monthly_devices.clone())\n .x(|d| d.month.clone())\n .y(|d| d.desktop)\n .linear(),\n false,\n cx,\n ))\n .child(chart_container(\n \"Line Chart - Step After\",\n LineChart::new(self.monthly_devices.clone())\n .x(|d| d.month.clone())\n .y(|d| d.desktop)\n .step_after(),\n false,\n cx,\n ))\n .child(chart_container(\n \"Line Chart - Dots\",\n LineChart::new(self.monthly_devices.clone())\n .x(|d| d.month.clone())\n .y(|d| d.desktop)\n .dot()\n .stroke(cx.theme().chart_5),\n false,\n cx,\n )),\n )\n .child(Divider::horizontal())\n .child(\n h_flex()\n .flex_wrap()\n .gap_4()\n .child(chart_container(\n \"Area Chart\",\n AreaChart::new(self.monthly_devices.clone())\n .x(|d| d.month.clone())\n .y(|d| d.desktop),\n false,\n cx,\n ))\n .child(chart_container(\n \"Area Chart - Linear\",\n AreaChart::new(self.monthly_devices.clone())\n .x(|d| d.month.clone())\n .y(|d| d.desktop)\n .linear(),\n false,\n cx,\n ))\n .child(chart_container(\n \"Area Chart - Step After\",\n AreaChart::new(self.monthly_devices.clone())\n .x(|d| d.month.clone())\n .y(|d| d.desktop)\n .step_after(),\n false,\n cx,\n ))\n .child(chart_container(\n \"Area Chart - Linear Gradient\",\n AreaChart::new(self.monthly_devices.clone())\n .x(|d| d.month.clone())\n .y(|d| d.desktop)\n .fill(linear_gradient(\n 0.,\n linear_color_stop(cx.theme().chart_1.opacity(0.4), 1.),\n linear_color_stop(cx.theme().background.opacity(0.3), 0.),\n )),\n false,\n cx,\n )),\n )\n .child(Divider::horizontal())\n .child(\n h_flex()\n .flex_wrap()\n .gap_4()\n .child(chart_container(\n \"Candlestick Chart\",\n CandlestickChart::new(self.stock_prices.clone())\n .x(|d| d.date.clone())\n .open(|d| d.open)\n .high(|d| d.high)\n .low(|d| d.low)\n .close(|d| d.close),\n false,\n cx,\n ))\n .child(chart_container(\n \"Candlestick Chart - Narrow\",\n CandlestickChart::new(self.stock_prices.clone())\n .x(|d| d.date.clone())\n .open(|d| d.open)\n .high(|d| d.high)\n .low(|d| d.low)\n .close(|d| d.close)\n .body_width_ratio(0.5),\n false,\n cx,\n ))\n .child(chart_container(\n \"Candlestick Chart - Wide\",\n CandlestickChart::new(self.stock_prices.clone())\n .x(|d| d.date.clone())\n .open(|d| d.open)\n .high(|d| d.high)\n .low(|d| d.low)\n .close(|d| d.close)\n .body_width_ratio(1.0),\n false,\n cx,\n ))\n .child(chart_container(\n \"Candlestick Chart - Tick Margin\",\n CandlestickChart::new(self.stock_prices.clone())\n .x(|d| d.date.clone())\n .open(|d| d.open)\n .high(|d| d.high)\n .low(|d| d.low)\n .close(|d| d.close)\n .tick_margin(2),\n false,\n cx,\n )),\n )\n }\n}\n" }, { "path": "crates/story/src/stories/chart_story/stacked_bar_chart.rs", "content": "// You can draw any chart you want by using the `Plot`.\n\nuse gpui::{App, Bounds, Pixels, TextAlign, Window, px};\nuse gpui_component::{\n ActiveTheme,\n plot::{\n AXIS_GAP, AxisText, Grid, IntoPlot, Plot, PlotAxis,\n scale::{Scale, ScaleBand, ScaleLinear, ScaleOrdinal},\n shape::{Bar, Stack, StackSeries},\n },\n};\n\nuse super::DailyDevice;\n\n#[derive(IntoPlot)]\npub struct StackedBarChart {\n data: Vec,\n series: Vec>,\n}\n\nimpl StackedBarChart {\n pub fn new(data: Vec) -> Self {\n // 1. Calculate the stacked data\n let series = Stack::new()\n .data(data.clone())\n .keys(vec![\"desktop\", \"mobile\", \"tablet\", \"watch\"])\n .value(move |d: &DailyDevice, key| match key {\n \"desktop\" => Some(d.desktop as f32),\n \"mobile\" => Some(d.mobile as f32),\n \"tablet\" => Some(d.tablet as f32),\n \"watch\" => Some(d.watch as f32),\n _ => None,\n })\n .series();\n\n Self { data, series }\n }\n}\n\nimpl Plot for StackedBarChart {\n fn paint(&mut self, bounds: Bounds, window: &mut Window, cx: &mut App) {\n let width = bounds.size.width.as_f32();\n let height = bounds.size.height.as_f32() - AXIS_GAP;\n\n // 2. Calculate X/Y scales\n let x = ScaleBand::new(\n self.data.iter().map(|v| v.date.clone()).collect(),\n vec![0., width],\n )\n .padding_inner(0.4)\n .padding_outer(0.2);\n let band_width = x.band_width();\n\n let max = self\n .series\n .iter()\n .flat_map(|s| s.points.iter().map(|p| p.y1))\n .fold(0., f32::max) as f64;\n\n let y = ScaleLinear::new(vec![0., max], vec![height, 10.]);\n\n // 3. Draw X axis labels\n let x_label = self.data.iter().filter_map(|d| {\n x.tick(&d.date.clone()).map(|x_tick| {\n AxisText::new(\n d.date.clone(),\n x_tick + band_width / 2.,\n cx.theme().muted_foreground,\n )\n .align(TextAlign::Center)\n })\n });\n PlotAxis::new()\n .x(height)\n .x_label(x_label)\n .stroke(cx.theme().border)\n .paint(&bounds, window, cx);\n\n // 4. Setup color scale\n let keys = self.series.iter().map(|s| s.key.clone()).collect();\n let colors = vec![\n cx.theme().chart_4,\n cx.theme().chart_3,\n cx.theme().chart_2,\n cx.theme().chart_1,\n ];\n let ordinal = ScaleOrdinal::new(keys, colors);\n\n // 5. Draw grid lines\n Grid::new()\n .y((0..=3).map(|i| height * i as f32 / 4.0).collect())\n .stroke(cx.theme().border)\n .dash_array(&[px(4.), px(2.)])\n .paint(&bounds, window);\n\n // 6. Draw stacked bars\n for series in self.series.iter() {\n let x = x.clone();\n let y0 = y.clone();\n let y1 = y.clone();\n\n let key = &series.key;\n let fill = ordinal.map(&key).unwrap_or(cx.theme().chart_4);\n\n Bar::new()\n .data(&series.points)\n .band_width(band_width)\n .x(move |d| x.tick(&d.data.date.clone()))\n .y0(move |d| y0.tick(&(d.y0 as f64)).unwrap_or(height))\n .y1(move |d| y1.tick(&(d.y1 as f64)))\n .fill(move |_| fill)\n .paint(&bounds, window, cx);\n }\n }\n}\n" }, { "path": "crates/story/src/stories/chart_story.rs", "content": "mod chart_story;\nmod stacked_bar_chart;\n\npub use chart_story::*;\npub use stacked_bar_chart::StackedBarChart;\n" }, { "path": "crates/story/src/stories/checkbox_story.rs", "content": "use gpui::{\n App, AppContext, Context, Entity, Focusable, IntoElement, ParentElement, Render, Styled,\n Window, div, px,\n};\n\nuse gpui_component::{\n ActiveTheme, Disableable as _, Sizable, checkbox::Checkbox, h_flex, text::markdown, v_flex,\n};\n\nuse crate::section;\n\npub struct CheckboxStory {\n focus_handle: gpui::FocusHandle,\n check1: bool,\n check2: bool,\n check3: bool,\n check4: bool,\n check5: bool,\n}\n\nimpl super::Story for CheckboxStory {\n fn title() -> &'static str {\n \"Checkbox\"\n }\n\n fn description() -> &'static str {\n \"A control that allows the user to toggle between checked and not checked.\"\n }\n\n fn new_view(window: &mut Window, cx: &mut App) -> Entity {\n Self::view(window, cx)\n }\n}\n\nimpl CheckboxStory {\n pub fn view(window: &mut Window, cx: &mut App) -> Entity {\n cx.new(|cx| Self::new(window, cx))\n }\n\n fn new(_: &mut Window, cx: &mut Context) -> Self {\n Self {\n focus_handle: cx.focus_handle(),\n check1: false,\n check2: false,\n check3: false,\n check4: false,\n check5: false,\n }\n }\n}\n\nimpl Focusable for CheckboxStory {\n fn focus_handle(&self, _: &gpui::App) -> gpui::FocusHandle {\n self.focus_handle.clone()\n }\n}\n\nimpl Render for CheckboxStory {\n fn render(&mut self, _: &mut Window, cx: &mut Context) -> impl IntoElement {\n v_flex()\n .size_full()\n .justify_start()\n .gap_3()\n .child(\n section(\"Checkbox\")\n .child(\n Checkbox::new(\"1\")\n .checked(self.check1)\n .label(\"A normal checkbox\")\n .on_click(cx.listener(|this, checked: &bool, _, cx| {\n this.check1 = *checked;\n cx.notify();\n })),\n )\n .child(\n Checkbox::new(\"2\")\n .checked(self.check2)\n .label(\"Remember me\")\n .on_click(cx.listener(|this, checked: &bool, _, cx| {\n this.check2 = *checked;\n cx.notify();\n })),\n ),\n )\n .child(\n section(\"Without label\").child(Checkbox::new(\"3\").checked(self.check3).on_click(\n cx.listener(|this, checked: &bool, _, _| {\n this.check3 = *checked;\n }),\n )),\n )\n .child(\n section(\"Small size\").max_w_md().child(\n Checkbox::new(\"4\")\n .small()\n .checked(self.check4)\n .label(\"A small checkbox\")\n .on_click(cx.listener(|this, checked: &bool, _, _| {\n this.check4 = *checked;\n })),\n ),\n )\n .child(\n section(\"Large size\").max_w_md().child(\n Checkbox::new(\"check5\")\n .large()\n .checked(self.check2)\n .label(\"A large checkbox\")\n .on_click(cx.listener(|this, checked: &bool, _, _| {\n this.check2 = *checked;\n })),\n ),\n )\n .child(\n section(\"Disabled\").max_w_md().child(\n h_flex()\n .items_center()\n .gap_6()\n .child(\n Checkbox::new(\"check3\")\n .label(\"Disabled Checked\")\n .checked(true)\n .disabled(true),\n )\n .child(\n Checkbox::new(\"check3_1\")\n .label(\"Disabled Unchecked\")\n .checked(false)\n .disabled(true),\n ),\n ),\n )\n .child(\n section(\"Multi-line\").child(\n v_flex().gap_4().child(\n Checkbox::new(\"multi-line-checkbox\")\n .w(px(300.))\n .checked(self.check4)\n .label(\"A multi-line checkbox.\")\n .child(div().text_color(cx.theme().muted_foreground).child(\n \"This is a long long label text that \\\n should wrap when the text is too long.\",\n ))\n .on_click(cx.listener(|this, checked: &bool, _, _| {\n this.check4 = *checked;\n })),\n ),\n ),\n )\n .child(\n section(\"Rich description (Markdown)\").child(\n Checkbox::new(\"longlong-markdown-checkbox\")\n .w(px(300.))\n .checked(self.check5)\n .label(\"Label with description (Markdown)\")\n .child(\n div()\n .text_color(cx.theme().muted_foreground)\n .child(markdown(\n \"The [long long label](https://github.com) \\\n text used **Markdown**, \\\n it should wrap when the text is too long.\",\n )),\n )\n .on_click(cx.listener(|this, checked: &bool, _, _| {\n this.check5 = *checked;\n })),\n ),\n )\n }\n}\n" }, { "path": "crates/story/src/stories/clipboard_story.rs", "content": "use gpui::{\n App, AppContext, Context, Entity, Focusable, IntoElement, ParentElement, Render, SharedString,\n Styled, Window,\n};\n\nuse gpui_component::{\n WindowExt,\n clipboard::Clipboard,\n h_flex,\n input::{Input, InputState},\n label::Label,\n v_flex,\n};\n\nuse crate::section;\n\npub struct ClipboardStory {\n focus_handle: gpui::FocusHandle,\n url_state: Entity,\n masked: bool,\n}\n\nimpl super::Story for ClipboardStory {\n fn title() -> &'static str {\n \"Clipboard\"\n }\n\n fn description() -> &'static str {\n \"A button that helps you copy text or other content to your clipboard.\"\n }\n\n fn new_view(window: &mut Window, cx: &mut App) -> Entity {\n Self::view(window, cx)\n }\n}\n\nimpl ClipboardStory {\n pub(crate) fn new(window: &mut Window, cx: &mut App) -> Self {\n let url_state =\n cx.new(|cx| InputState::new(window, cx).default_value(\"https://github.com\"));\n\n Self {\n url_state,\n focus_handle: cx.focus_handle(),\n masked: false,\n }\n }\n\n pub fn view(window: &mut Window, cx: &mut App) -> Entity {\n cx.new(|cx| Self::new(window, cx))\n }\n}\nimpl Focusable for ClipboardStory {\n fn focus_handle(&self, _: &gpui::App) -> gpui::FocusHandle {\n self.focus_handle.clone()\n }\n}\nimpl Render for ClipboardStory {\n fn render(&mut self, _: &mut Window, cx: &mut Context) -> impl IntoElement {\n v_flex()\n .size_full()\n .justify_start()\n .gap_3()\n .child(\n section(\"Clipboard\").max_w_md().child(\n h_flex()\n .gap_2()\n .child(Label::new(\"A clipboard button\"))\n .child(\n Clipboard::new(\"clipboard1\")\n .value_fn({\n let view = cx.entity().clone();\n move |_, cx| {\n SharedString::from(format!(\n \"masked :{}\",\n view.read(cx).masked\n ))\n }\n })\n .on_copied(|value, window, cx| {\n window.push_notification(format!(\"Copied value: {}\", value), cx)\n }),\n ),\n ),\n )\n .child(\n section(\"With in an Input\").max_w_md().child(\n Input::new(&self.url_state).suffix(\n Clipboard::new(\"clipboard2\")\n .value_fn({\n let state = self.url_state.clone();\n move |_, cx| state.read(cx).value()\n })\n .on_copied(|value, window, cx| {\n window.push_notification(format!(\"Copied value: {}\", value), cx)\n }),\n ),\n ),\n )\n }\n}\n" }, { "path": "crates/story/src/stories/collapsible_story.rs", "content": "use gpui::div;\nuse gpui::{\n App, AppContext, Context, Entity, FocusHandle, Focusable, IntoElement, ParentElement, Render,\n Styled, Window, prelude::FluentBuilder as _,\n};\n\nuse gpui_component::group_box::{GroupBox, GroupBoxVariants as _};\nuse gpui_component::label::Label;\nuse gpui_component::tag::Tag;\nuse gpui_component::{ActiveTheme, IconName, StyledExt, h_flex};\nuse gpui_component::{\n Sizable,\n button::{Button, ButtonVariants},\n collapsible::Collapsible,\n v_flex,\n};\n\nuse crate::section;\n\npub struct CollapsibleStory {\n focus_handle: FocusHandle,\n item1_open: bool,\n item2_open: bool,\n}\n\nimpl super::Story for CollapsibleStory {\n fn title() -> &'static str {\n \"Collapsible\"\n }\n\n fn description() -> &'static str {\n \"An interactive element that expands/collapses.\"\n }\n\n fn new_view(window: &mut Window, cx: &mut App) -> Entity {\n Self::view(window, cx)\n }\n}\n\nimpl CollapsibleStory {\n pub(crate) fn new(_: &mut Window, cx: &mut App) -> Self {\n Self {\n focus_handle: cx.focus_handle(),\n item1_open: false,\n item2_open: false,\n }\n }\n\n pub fn view(window: &mut Window, cx: &mut App) -> Entity {\n cx.new(|cx| Self::new(window, cx))\n }\n}\n\nimpl Focusable for CollapsibleStory {\n fn focus_handle(&self, _: &App) -> FocusHandle {\n self.focus_handle.clone()\n }\n}\n\nimpl Render for CollapsibleStory {\n fn render(&mut self, _: &mut Window, cx: &mut Context) -> impl IntoElement {\n let items = [\n [\"TSLA.US\", \"$423.00\", \"+30.25%\"],\n [\"NVDA.US\", \"$312.00\", \"+12.12%\"],\n [\"AAPL.US\", \"$145.00\", \"-8.50%\"],\n ];\n\n v_flex()\n .gap_6()\n .child(\n section(\"Expland Paragraphs\").v_flex().child(\n Collapsible::new()\n .max_w_128()\n .gap_1()\n .open(self.item1_open)\n .child(\n \"This is a collapsible component. \\\n Click the header to expand or collapse the content.\",\n )\n .content(\n \"This is the full content of the Collapsible component. \\\n It is only visible when the component is expanded. \\n\\\n You can put any content you like here, including text, images, \\\n or other UI elements.\n \",\n )\n .child(\n h_flex().justify_center().child(\n Button::new(\"toggle1\")\n .icon(IconName::ChevronDown)\n .label(\"Show more\")\n .when(self.item1_open, |this| {\n this.icon(IconName::ChevronUp).label(\"Show less\")\n })\n .xsmall()\n .link()\n .on_click({\n cx.listener(move |this, _, _, cx| {\n this.item1_open = !this.item1_open;\n cx.notify();\n })\n }),\n ),\n ),\n ),\n )\n .child(\n section(\"Card\").child(\n GroupBox::new()\n .outline()\n .w_80()\n .title(\"Collapsible in a Card\")\n .child(\n Collapsible::new()\n .gap_1()\n .open(self.item2_open)\n .child(\n h_flex()\n .justify_between()\n .child(\n v_flex().child(\"Total Return\").child(\n h_flex()\n .gap_1()\n .child(\n Label::new(\"123.5%\")\n .text_2xl()\n .font_semibold(),\n )\n .child(\n Tag::info()\n .child(\"+4.5%\")\n .outline()\n .rounded_full()\n .small(),\n ),\n ),\n )\n .child(\n Button::new(\"toggle2\")\n .small()\n .outline()\n .icon(IconName::ChevronDown)\n .label(\"Details\")\n .when(self.item2_open, |this| {\n this.icon(IconName::ChevronUp)\n })\n .on_click({\n cx.listener(move |this, _, _, cx| {\n this.item2_open = !this.item2_open;\n cx.notify();\n })\n }),\n ),\n )\n .content(v_flex().gap_2().children(items.iter().map(|item| {\n let is_up = item[2].starts_with('+');\n\n h_flex().justify_between().child(item[0]).child(\n h_flex()\n .flex_1()\n .justify_end()\n .gap_4()\n .child(div().w_16().justify_end().child(item[1]))\n .child(\n Label::new(item[2])\n .text_xs()\n .w_16()\n .justify_end()\n .when(is_up, |this| {\n this.text_color(cx.theme().green)\n })\n .when(!is_up, |this| {\n this.text_color(cx.theme().red)\n }),\n ),\n )\n }))),\n ),\n ),\n )\n }\n}\n" }, { "path": "crates/story/src/stories/color_picker_story.rs", "content": "use gpui::{\n App, AppContext, Context, Entity, Focusable, Hsla, IntoElement, ParentElement as _, Render,\n Styled as _, Subscription, Window, div, prelude::FluentBuilder as _,\n};\nuse gpui_component::{\n ActiveTheme as _, Colorize, Sizable,\n color_picker::{ColorPicker, ColorPickerEvent, ColorPickerState},\n v_flex,\n};\n\nuse crate::section;\n\npub struct ColorPickerStory {\n color: Entity,\n selected_color: Option,\n _subscriptions: Vec,\n}\n\nimpl super::Story for ColorPickerStory {\n fn title() -> &'static str {\n \"ColorPicker\"\n }\n\n fn description() -> &'static str {\n \"A color picker to select color.\"\n }\n\n fn new_view(window: &mut Window, cx: &mut App) -> Entity {\n Self::view(window, cx)\n }\n}\n\nimpl ColorPickerStory {\n pub fn view(window: &mut Window, cx: &mut App) -> Entity {\n cx.new(|cx| Self::new(window, cx))\n }\n\n fn new(window: &mut Window, cx: &mut Context) -> Self {\n let color =\n cx.new(|cx| ColorPickerState::new(window, cx).default_value(cx.theme().primary));\n\n let _subscriptions = vec![cx.subscribe(&color, |this, _, ev, _| match ev {\n ColorPickerEvent::Change(color) => {\n this.selected_color = *color;\n }\n })];\n\n Self {\n color,\n selected_color: Some(cx.theme().primary),\n _subscriptions,\n }\n }\n}\n\nimpl Focusable for ColorPickerStory {\n fn focus_handle(&self, cx: &gpui::App) -> gpui::FocusHandle {\n self.color.read(cx).focus_handle(cx)\n }\n}\n\nimpl Render for ColorPickerStory {\n fn render(&mut self, _: &mut Window, _: &mut Context) -> impl IntoElement {\n v_flex().gap_3().child(\n section(\"Normal\")\n .max_w_md()\n .child(ColorPicker::new(&self.color).small())\n .when_some(self.selected_color, |this, color| {\n this.child(div().w_24().child(color.to_hex()))\n }),\n )\n }\n}\n" }, { "path": "crates/story/src/stories/data_table_story.rs", "content": "use std::{\n ops::Range,\n sync::LazyLock,\n time::{self, Duration},\n};\n\nuse fake::Fake;\nuse gpui::{\n Action, AnyElement, App, AppContext, ClickEvent, Context, Div, Entity, Focusable,\n InteractiveElement, IntoElement, ParentElement, Render, SharedString, Stateful,\n StatefulInteractiveElement, Styled, Subscription, Task, TextAlign, Window, div,\n prelude::FluentBuilder as _,\n};\nuse gpui_component::{\n ActiveTheme as _, Selectable, Sizable as _, Size, StyleSized as _, StyledExt,\n button::Button,\n checkbox::Checkbox,\n h_flex,\n input::{Input, InputEvent, InputState},\n label::Label,\n menu::{DropdownMenu, PopupMenu},\n spinner::Spinner,\n table::{Column, ColumnFixed, ColumnSort, DataTable, TableDelegate, TableEvent, TableState},\n v_flex,\n};\nuse serde::{Deserialize, Serialize};\n\n#[derive(Action, Clone, PartialEq, Eq, Deserialize)]\n#[action(namespace = data_table_story, no_json)]\nstruct ChangeSize(Size);\n\n#[derive(Action, Clone, PartialEq, Eq, Deserialize)]\n#[action(namespace = data_table_story, no_json)]\nstruct OpenDetail(usize);\n\n#[derive(Debug, Clone, Serialize, Deserialize, Default)]\nstruct Counter {\n symbol: SharedString,\n market: SharedString,\n name: SharedString,\n}\n\nstatic ALL_COUNTERS: LazyLock> =\n LazyLock::new(|| serde_json::from_str(include_str!(\"../fixtures/counters.json\")).unwrap());\nstatic INCREMENT_ID: LazyLock> = LazyLock::new(|| std::sync::Mutex::new(0));\n\nimpl Counter {\n fn random() -> Self {\n let len = ALL_COUNTERS.len();\n let ix = rand::random::() % len;\n ALL_COUNTERS[ix].clone()\n }\n\n fn symbol_code(&self) -> SharedString {\n format!(\"{}.{}\", self.symbol, self.market).into()\n }\n}\n\n#[derive(Clone, Debug, Default)]\nstruct Stock {\n id: usize,\n counter: Counter,\n price: f64,\n change: f64,\n change_percent: f64,\n volume: f64,\n turnover: f64,\n market_cap: f64,\n ttm: f64,\n five_mins_ranking: f64,\n th60_days_ranking: f64,\n year_change_percent: f64,\n bid: f64,\n bid_volume: f64,\n ask: f64,\n ask_volume: f64,\n open: f64,\n prev_close: f64,\n high: f64,\n low: f64,\n turnover_rate: f64,\n rise_rate: f64,\n amplitude: f64,\n pe_status: f64,\n pb_status: f64,\n volume_ratio: f64,\n bid_ask_ratio: f64,\n latest_pre_close: f64,\n latest_post_close: f64,\n pre_market_cap: f64,\n pre_market_percent: f64,\n pre_market_change: f64,\n post_market_cap: f64,\n post_market_percent: f64,\n post_market_change: f64,\n float_cap: f64,\n shares: i64,\n shares_float: i64,\n day_5_ranking: f64,\n day_10_ranking: f64,\n day_30_ranking: f64,\n day_120_ranking: f64,\n day_250_ranking: f64,\n}\n\nimpl Stock {\n fn random_update(&mut self) {\n self.price = (-300.0..999.999).fake::();\n self.change = (-0.1..5.0).fake::();\n self.change_percent = (-0.1..0.1).fake::();\n self.volume = (-300.0..999.999).fake::();\n self.turnover = (-300.0..999.999).fake::();\n self.market_cap = (-1000.0..9999.999).fake::();\n self.ttm = (-1000.0..9999.999).fake::();\n self.five_mins_ranking = self.five_mins_ranking * (1.0 + (-0.2..0.2).fake::());\n self.bid = self.price * (1.0 + (-0.2..0.2).fake::());\n self.bid_volume = (100.0..1000.0).fake::();\n self.ask = self.price * (1.0 + (-0.2..0.2).fake::());\n self.ask_volume = (100.0..1000.0).fake::();\n self.bid_ask_ratio = self.bid / self.ask;\n self.volume_ratio = self.volume / self.turnover;\n self.high = self.price * (1.0 + (0.0..1.5).fake::());\n self.low = self.price * (1.0 + (-1.5..0.0).fake::());\n }\n}\n\nfn random_stocks(size: usize) -> Vec {\n // Incremental ID with size.\n let start = {\n let mut id_lock = INCREMENT_ID.lock().unwrap();\n let start = *id_lock;\n *id_lock += size + 1;\n start\n };\n\n (start..start + size)\n .map(|id| Stock {\n id,\n counter: Counter::random(),\n change: (-100.0..100.0).fake(),\n change_percent: (-0.1..0.1).fake(),\n volume: (0.0..1000.0).fake(),\n turnover: (0.0..1000.0).fake(),\n market_cap: (0.0..1000.0).fake(),\n ttm: (0.0..1000.0).fake(),\n five_mins_ranking: (0.0..1000.0).fake(),\n th60_days_ranking: (0.0..1000.0).fake(),\n year_change_percent: (-1.0..1.0).fake(),\n bid: (0.0..1000.0).fake(),\n bid_volume: (0.0..1000.0).fake(),\n ask: (0.0..1000.0).fake(),\n ask_volume: (0.0..1000.0).fake(),\n open: (0.0..1000.0).fake(),\n prev_close: (0.0..1000.0).fake(),\n high: (0.0..1000.0).fake(),\n low: (0.0..1000.0).fake(),\n turnover_rate: (0.0..1.0).fake(),\n rise_rate: (0.0..1.0).fake(),\n amplitude: (0.0..1000.0).fake(),\n pe_status: (0.0..1000.0).fake(),\n pb_status: (0.0..1000.0).fake(),\n volume_ratio: (0.0..1.0).fake(),\n bid_ask_ratio: (0.0..1.0).fake(),\n latest_pre_close: (0.0..1000.0).fake(),\n latest_post_close: (0.0..1000.0).fake(),\n pre_market_cap: (0.0..1000.0).fake(),\n pre_market_percent: (-1.0..1.0).fake(),\n pre_market_change: (-100.0..100.0).fake(),\n post_market_cap: (0.0..1000.0).fake(),\n post_market_percent: (-1.0..1.0).fake(),\n post_market_change: (-100.0..100.0).fake(),\n float_cap: (0.0..1000.0).fake(),\n shares: (100000..9999999).fake(),\n shares_float: (100000..9999999).fake(),\n day_5_ranking: (0.0..1000.0).fake(),\n day_10_ranking: (0.0..1000.0).fake(),\n day_30_ranking: (0.0..1000.0).fake(),\n day_120_ranking: (0.0..1000.0).fake(),\n day_250_ranking: (0.0..1000.0).fake(),\n ..Default::default()\n })\n .collect()\n}\n\nstruct StockTableDelegate {\n stocks: Vec,\n columns: Vec,\n size: Size,\n loading: bool,\n lazy_load: bool,\n full_loading: bool,\n clicked_row: Option,\n eof: bool,\n visible_rows: Range,\n visible_cols: Range,\n\n _load_task: Task<()>,\n}\n\nimpl StockTableDelegate {\n fn new(size: usize) -> Self {\n Self {\n size: Size::default(),\n stocks: random_stocks(size),\n lazy_load: false,\n clicked_row: None,\n columns: vec![\n Column::new(\"id\", \"ID\")\n .width(60.)\n .fixed(ColumnFixed::Left)\n .resizable(true)\n .min_width(40.)\n .max_width(100.)\n .text_center(),\n Column::new(\"market\", \"Market\")\n .width(60.)\n .fixed(ColumnFixed::Left)\n .resizable(true)\n .min_width(50.),\n Column::new(\"name\", \"Name\").width(180.).fixed(ColumnFixed::Left).max_width(300.),\n Column::new(\"symbol\", \"Symbol\").width(100.).fixed(ColumnFixed::Left).sortable(),\n Column::new(\"price\", \"Price\").sortable().text_right().p_0(),\n Column::new(\"change\", \"Chg\").sortable().text_right().p_0(),\n Column::new(\"change_percent\", \"Chg%\").sortable().text_right().p_0(),\n Column::new(\"volume\", \"Volume\").p_0(),\n Column::new(\"turnover\", \"Turnover\").p_0(),\n Column::new(\"market_cap\", \"Market Cap\").p_0(),\n Column::new(\"ttm\", \"TTM\").p_0(),\n Column::new(\"five_mins_ranking\", \"5m Ranking\").text_right().p_0(),\n Column::new(\"th60_days_ranking\", \"60d Ranking\"),\n Column::new(\"year_change_percent\", \"Year Chg%\"),\n Column::new(\"bid\", \"Bid\").text_right().p_0(),\n Column::new(\"bid_volume\", \"Bid Vol\").text_right().p_0(),\n Column::new(\"ask\", \"Ask\").text_right().p_0(),\n Column::new(\"ask_volume\", \"Ask Vol\").text_right().p_0(),\n Column::new(\"open\", \"Open\").text_right().p_0(),\n Column::new(\"prev_close\", \"Prev Close\").text_right().p_0(),\n Column::new(\"high\", \"High\").text_right().p_0(),\n Column::new(\"low\", \"Low\").text_right().p_0(),\n Column::new(\"turnover_rate\", \"Turnover Rate\"),\n Column::new(\"rise_rate\", \"Rise Rate\"),\n Column::new(\"amplitude\", \"Amplitude\"),\n Column::new(\"pe_status\", \"P/E\"),\n Column::new(\"pb_status\", \"P/B\"),\n Column::new(\"volume_ratio\", \"Volume Ratio\").text_right().p_0(),\n Column::new(\"bid_ask_ratio\", \"Bid Ask Ratio\").text_right().p_0(),\n Column::new(\"latest_pre_close\", \"Latest Pre Close\"),\n Column::new(\"latest_post_close\", \"Latest Post Close\"),\n Column::new(\"pre_market_cap\", \"Pre Mkt Cap\"),\n Column::new(\"pre_market_percent\", \"Pre Mkt%\"),\n Column::new(\"pre_market_change\", \"Pre Mkt Chg\"),\n Column::new(\"post_market_cap\", \"Post Mkt Cap\"),\n Column::new(\"post_market_percent\", \"Post Mkt%\"),\n Column::new(\"post_market_change\", \"Post Mkt Chg\"),\n Column::new(\"float_cap\", \"Float Cap\"),\n Column::new(\"shares\", \"Shares\"),\n Column::new(\"shares_float\", \"Float Shares\"),\n Column::new(\"day_5_ranking\", \"5d Ranking\"),\n Column::new(\"day_10_ranking\", \"10d Ranking\"),\n Column::new(\"day_30_ranking\", \"30d Ranking\"),\n Column::new(\"day_120_ranking\", \"120d Ranking\"),\n Column::new(\"day_250_ranking\", \"250d Ranking\"),\n ],\n loading: false,\n full_loading: false,\n eof: false,\n visible_cols: Range::default(),\n visible_rows: Range::default(),\n _load_task: Task::ready(()),\n }\n }\n\n fn update_stocks(&mut self, size: usize) {\n // Reset incremental ID\n {\n let mut id_lock = INCREMENT_ID.lock().unwrap();\n *id_lock = 0;\n }\n\n self.stocks = random_stocks(size);\n self.eof = size <= 50;\n self.loading = false;\n self.full_loading = false;\n }\n\n fn render_percent(&self, col: &Column, val: f64, cx: &mut App) -> AnyElement {\n let right_num = ((val - val.floor()) * 1000.).floor() as i32;\n\n div()\n .h_full()\n .table_cell_size(self.size)\n .when(col.align == TextAlign::Right, |this| this.h_flex().justify_end())\n .map(|this| {\n if right_num % 3 == 0 {\n this.text_color(cx.theme().red).bg(cx.theme().red_light.alpha(0.05))\n } else if right_num % 3 == 1 {\n this.text_color(cx.theme().green).bg(cx.theme().green_light.alpha(0.05))\n } else {\n this\n }\n })\n .child(format!(\"{:.2}%\", val * 100.))\n .into_any_element()\n }\n\n fn render_value_cell(&self, col: &Column, val: f64, cx: &mut App) -> AnyElement {\n let this = div().h_full().table_cell_size(self.size).child(format!(\"{:.3}\", val));\n // Val is a 0.0 .. n.0\n // 30% to red, 30% to green, others to default\n let right_num = ((val - val.floor()) * 1000.).floor() as i32;\n\n let this = if right_num % 3 == 0 {\n this.text_color(cx.theme().red).bg(cx.theme().red_light.alpha(0.05))\n } else if right_num % 3 == 1 {\n this.text_color(cx.theme().green).bg(cx.theme().green_light.alpha(0.05))\n } else {\n this\n };\n\n this.when(col.align == TextAlign::Right, |this| this.h_flex().justify_end())\n .into_any_element()\n }\n}\n\nimpl TableDelegate for StockTableDelegate {\n fn columns_count(&self, _: &App) -> usize {\n self.columns.len()\n }\n\n fn rows_count(&self, _: &App) -> usize {\n self.stocks.len()\n }\n\n fn column(&self, col_ix: usize, _cx: &App) -> Column {\n self.columns[col_ix].clone()\n }\n\n fn render_th(\n &mut self,\n col_ix: usize,\n _: &mut Window,\n _: &mut Context>,\n ) -> impl IntoElement {\n let col = self.columns.get(col_ix).unwrap();\n\n div()\n .child(col.name.clone())\n .when(col_ix >= 3 && col_ix <= 10, |this| this.table_cell_size(self.size))\n .when(col.align == TextAlign::Center, |this| this.h_flex().w_full().justify_center())\n .when(col.align == TextAlign::Right, |this| this.h_flex().w_full().justify_end())\n }\n\n fn context_menu(\n &mut self,\n row_ix: usize,\n menu: PopupMenu,\n _window: &mut Window,\n _: &mut Context>,\n ) -> PopupMenu {\n menu.menu(format!(\"Selected Row: {}\", row_ix), Box::new(OpenDetail(row_ix)))\n .separator()\n .menu(\"Size Large\", Box::new(ChangeSize(Size::Large)))\n .menu(\"Size Medium\", Box::new(ChangeSize(Size::Medium)))\n .menu(\"Size Small\", Box::new(ChangeSize(Size::Small)))\n .menu(\"Size XSmall\", Box::new(ChangeSize(Size::XSmall)))\n }\n\n fn render_tr(\n &mut self,\n row_ix: usize,\n _: &mut Window,\n cx: &mut Context>,\n ) -> Stateful
{\n div().id(row_ix).on_click(cx.listener(move |table, ev: &ClickEvent, _window, cx| {\n println!(\"You have clicked row with secondary: {}\", ev.modifiers().secondary());\n\n table.delegate_mut().clicked_row = Some(row_ix);\n cx.notify();\n }))\n }\n\n /// NOTE: Performance metrics\n ///\n /// last render 561 cells total: 232.745µs, avg: 414ns\n /// frame duration: 8.825083ms\n ///\n /// This is means render the full table cells takes 232.745µs. Then 232.745µs / 8.82ms = 2.6% of the frame duration.\n ///\n /// If we improve the td rendering, we can reduce the time to render the full table cells.\n fn render_td(\n &mut self,\n row_ix: usize,\n col_ix: usize,\n _: &mut Window,\n cx: &mut Context>,\n ) -> impl IntoElement {\n let stock = self.stocks.get(row_ix).unwrap();\n let col = self.columns.get(col_ix).unwrap();\n\n match col.key.as_ref() {\n \"id\" => div()\n .child(stock.id.to_string())\n .when(col.align == TextAlign::Center, |this| this.text_center())\n .into_any_element(),\n \"market\" => div()\n .map(|this| {\n if stock.counter.market == \"US\" {\n this.text_color(cx.theme().blue)\n } else {\n this.text_color(cx.theme().magenta)\n }\n })\n .child(stock.counter.market.clone())\n .into_any_element(),\n \"symbol\" => stock.counter.symbol_code().into_any_element(),\n \"name\" => stock.counter.name.clone().into_any_element(),\n \"price\" => self.render_value_cell(&col, stock.price, cx),\n \"change\" => self.render_value_cell(&col, stock.change, cx),\n \"change_percent\" => self.render_percent(&col, stock.change_percent, cx),\n \"volume\" => self.render_value_cell(&col, stock.volume, cx),\n \"turnover\" => self.render_value_cell(&col, stock.turnover, cx),\n \"market_cap\" => self.render_value_cell(&col, stock.market_cap, cx),\n \"ttm\" => self.render_value_cell(&col, stock.ttm, cx),\n \"five_mins_ranking\" => self.render_value_cell(&col, stock.five_mins_ranking, cx),\n \"th60_days_ranking\" => stock.th60_days_ranking.floor().to_string().into_any_element(),\n \"year_change_percent\" => self.render_percent(&col, stock.year_change_percent, cx),\n \"bid\" => self.render_value_cell(&col, stock.bid, cx),\n \"bid_volume\" => self.render_value_cell(&col, stock.bid_volume, cx),\n \"ask\" => self.render_value_cell(&col, stock.ask, cx),\n \"ask_volume\" => self.render_value_cell(&col, stock.ask_volume, cx),\n \"open\" => self.render_value_cell(&col, stock.open, cx),\n \"prev_close\" => self.render_value_cell(&col, stock.prev_close, cx),\n \"high\" => self.render_value_cell(&col, stock.high, cx),\n \"low\" => self.render_value_cell(&col, stock.low, cx),\n \"turnover_rate\" => (stock.turnover_rate * 100.0).floor().to_string().into_any_element(),\n \"rise_rate\" => (stock.rise_rate * 100.0).floor().to_string().into_any_element(),\n \"amplitude\" => (stock.amplitude * 100.0).floor().to_string().into_any_element(),\n \"pe_status\" => stock.pe_status.floor().to_string().into_any_element(),\n \"pb_status\" => stock.pb_status.floor().to_string().into_any_element(),\n \"volume_ratio\" => self.render_value_cell(&col, stock.volume_ratio, cx),\n \"bid_ask_ratio\" => self.render_value_cell(&col, stock.bid_ask_ratio, cx),\n \"latest_pre_close\" => stock.latest_pre_close.floor().to_string().into_any_element(),\n \"latest_post_close\" => stock.latest_post_close.floor().to_string().into_any_element(),\n \"pre_market_cap\" => stock.pre_market_cap.floor().to_string().into_any_element(),\n \"pre_market_percent\" => self.render_percent(&col, stock.pre_market_percent, cx),\n \"pre_market_change\" => stock.pre_market_change.floor().to_string().into_any_element(),\n \"post_market_cap\" => stock.post_market_cap.floor().to_string().into_any_element(),\n \"post_market_percent\" => self.render_percent(&col, stock.post_market_percent, cx),\n \"post_market_change\" => stock.post_market_change.floor().to_string().into_any_element(),\n \"float_cap\" => stock.float_cap.floor().to_string().into_any_element(),\n \"shares\" => stock.shares.to_string().into_any_element(),\n \"shares_float\" => stock.shares_float.to_string().into_any_element(),\n \"day_5_ranking\" => stock.day_5_ranking.floor().to_string().into_any_element(),\n \"day_10_ranking\" => stock.day_10_ranking.floor().to_string().into_any_element(),\n \"day_30_ranking\" => stock.day_30_ranking.floor().to_string().into_any_element(),\n \"day_120_ranking\" => stock.day_120_ranking.floor().to_string().into_any_element(),\n \"day_250_ranking\" => stock.day_250_ranking.floor().to_string().into_any_element(),\n _ => \"--\".to_string().into_any_element(),\n }\n }\n\n fn move_column(\n &mut self,\n col_ix: usize,\n to_ix: usize,\n _: &mut Window,\n _: &mut Context>,\n ) {\n let col = self.columns.remove(col_ix);\n self.columns.insert(to_ix, col);\n }\n\n fn perform_sort(\n &mut self,\n col_ix: usize,\n sort: ColumnSort,\n _: &mut Window,\n _: &mut Context>,\n ) {\n if let Some(col) = self.columns.get_mut(col_ix) {\n match col.key.as_ref() {\n \"id\" => self.stocks.sort_by(|a, b| match sort {\n ColumnSort::Descending => b.id.cmp(&a.id),\n _ => a.id.cmp(&b.id),\n }),\n \"symbol\" => self.stocks.sort_by(|a, b| match sort {\n ColumnSort::Descending => b.counter.symbol.cmp(&a.counter.symbol),\n _ => a.id.cmp(&b.id),\n }),\n \"change\" | \"change_percent\" => self.stocks.sort_by(|a, b| match sort {\n ColumnSort::Descending => {\n b.change.partial_cmp(&a.change).unwrap_or(std::cmp::Ordering::Equal)\n }\n _ => a.id.cmp(&b.id),\n }),\n _ => {}\n }\n }\n }\n\n fn loading(&self, _: &App) -> bool {\n self.full_loading\n }\n\n fn has_more(&self, _: &App) -> bool {\n if !self.lazy_load {\n return false;\n }\n if self.loading {\n return false;\n }\n\n return !self.eof;\n }\n\n fn load_more_threshold(&self) -> usize {\n 150\n }\n\n fn load_more(&mut self, _: &mut Window, cx: &mut Context>) {\n if !self.lazy_load {\n return;\n }\n\n self.loading = true;\n\n self._load_task = cx.spawn(async move |view, cx| {\n // Simulate network request, delay 1s to load data.\n cx.background_executor().timer(Duration::from_secs(1)).await;\n\n _ = cx.update(|cx| {\n let _ = view.update(cx, |view, _| {\n view.delegate_mut().stocks.extend(random_stocks(200));\n view.delegate_mut().loading = false;\n view.delegate_mut().eof = view.delegate().stocks.len() >= 6000;\n });\n });\n });\n }\n\n fn visible_rows_changed(\n &mut self,\n visible_range: Range,\n _: &mut Window,\n _: &mut Context>,\n ) {\n self.visible_rows = visible_range;\n }\n\n fn visible_columns_changed(\n &mut self,\n visible_range: Range,\n _: &mut Window,\n _: &mut Context>,\n ) {\n self.visible_cols = visible_range;\n }\n\n fn cell_text(&self, row_ix: usize, col_ix: usize, _cx: &App) -> String {\n let Some(stock) = self.stocks.get(row_ix) else {\n return String::new();\n };\n let Some(col) = self.columns.get(col_ix) else {\n return String::new();\n };\n\n match col.key.as_ref() {\n \"id\" => stock.id.to_string(),\n \"market\" => stock.counter.market.to_string(),\n \"symbol\" => stock.counter.symbol_code().to_string(),\n \"name\" => stock.counter.name.to_string(),\n \"price\" => format!(\"{:.3}\", stock.price),\n \"change\" => format!(\"{:.3}\", stock.change),\n \"change_percent\" => format!(\"{:.2}%\", stock.change_percent * 100.),\n \"volume\" => format!(\"{:.3}\", stock.volume),\n \"turnover\" => format!(\"{:.3}\", stock.turnover),\n \"market_cap\" => format!(\"{:.3}\", stock.market_cap),\n \"ttm\" => format!(\"{:.3}\", stock.ttm),\n \"five_mins_ranking\" => format!(\"{:.3}\", stock.five_mins_ranking),\n \"th60_days_ranking\" => stock.th60_days_ranking.floor().to_string(),\n \"year_change_percent\" => format!(\"{:.2}%\", stock.year_change_percent * 100.),\n \"bid\" => format!(\"{:.3}\", stock.bid),\n \"bid_volume\" => format!(\"{:.3}\", stock.bid_volume),\n \"ask\" => format!(\"{:.3}\", stock.ask),\n \"ask_volume\" => format!(\"{:.3}\", stock.ask_volume),\n \"open\" => format!(\"{:.3}\", stock.open),\n \"prev_close\" => format!(\"{:.3}\", stock.prev_close),\n \"high\" => format!(\"{:.3}\", stock.high),\n \"low\" => format!(\"{:.3}\", stock.low),\n \"turnover_rate\" => format!(\"{:.0}\", stock.turnover_rate * 100.),\n \"rise_rate\" => format!(\"{:.0}\", stock.rise_rate * 100.),\n \"amplitude\" => format!(\"{:.0}\", stock.amplitude * 100.),\n \"pe_status\" => stock.pe_status.floor().to_string(),\n \"pb_status\" => stock.pb_status.floor().to_string(),\n \"volume_ratio\" => format!(\"{:.3}\", stock.volume_ratio),\n \"bid_ask_ratio\" => format!(\"{:.3}\", stock.bid_ask_ratio),\n \"latest_pre_close\" => stock.latest_pre_close.floor().to_string(),\n \"latest_post_close\" => stock.latest_post_close.floor().to_string(),\n \"pre_market_cap\" => stock.pre_market_cap.floor().to_string(),\n \"pre_market_percent\" => format!(\"{:.2}%\", stock.pre_market_percent * 100.),\n \"pre_market_change\" => stock.pre_market_change.floor().to_string(),\n \"post_market_cap\" => stock.post_market_cap.floor().to_string(),\n \"post_market_percent\" => format!(\"{:.2}%\", stock.post_market_percent * 100.),\n \"post_market_change\" => stock.post_market_change.floor().to_string(),\n \"float_cap\" => stock.float_cap.floor().to_string(),\n \"shares\" => stock.shares.to_string(),\n \"shares_float\" => stock.shares_float.to_string(),\n \"day_5_ranking\" => stock.day_5_ranking.floor().to_string(),\n \"day_10_ranking\" => stock.day_10_ranking.floor().to_string(),\n \"day_30_ranking\" => stock.day_30_ranking.floor().to_string(),\n \"day_120_ranking\" => stock.day_120_ranking.floor().to_string(),\n \"day_250_ranking\" => stock.day_250_ranking.floor().to_string(),\n _ => String::new(),\n }\n }\n}\n\npub struct DataTableStory {\n table: Entity>,\n num_stocks_input: Entity,\n stripe: bool,\n refresh_data: bool,\n size: Size,\n\n _subscriptions: Vec,\n _load_task: Task<()>,\n}\n\nimpl super::Story for DataTableStory {\n fn title() -> &'static str {\n \"DataTable\"\n }\n\n fn description() -> &'static str {\n \"A complex data table with selection, sorting, column moving, and loading more.\"\n }\n\n fn new_view(window: &mut Window, cx: &mut App) -> Entity {\n Self::view(window, cx)\n }\n\n fn closable() -> bool {\n false\n }\n}\n\nimpl Focusable for DataTableStory {\n fn focus_handle(&self, cx: &gpui::App) -> gpui::FocusHandle {\n self.table.focus_handle(cx)\n }\n}\n\nimpl DataTableStory {\n pub fn view(window: &mut Window, cx: &mut App) -> Entity {\n cx.new(|cx| Self::new(window, cx))\n }\n\n fn new(window: &mut Window, cx: &mut Context) -> Self {\n // Create the number input field with validation for positive integers\n let num_stocks_input = cx.new(|cx| {\n let mut input = InputState::new(window, cx)\n .placeholder(\"Enter number of Stocks to display\")\n .validate(|s, _| s.parse::().is_ok());\n input.set_value(\"5000\", window, cx);\n input\n });\n\n let delegate = StockTableDelegate::new(5000);\n let table = cx.new(|cx| TableState::new(delegate, window, cx));\n\n let _subscriptions = vec![\n cx.subscribe_in(&table, window, Self::on_table_event),\n cx.subscribe_in(&num_stocks_input, window, Self::on_num_stocks_input_change),\n // Spawn a background to random refresh the list\n ];\n\n let _load_task = cx.spawn(async move |this, cx| {\n loop {\n cx.background_executor().timer(time::Duration::from_millis(33)).await;\n\n this.update(cx, |this, cx| {\n if !this.refresh_data {\n return;\n }\n\n this.table.update(cx, |table, _| {\n table.delegate_mut().stocks.iter_mut().enumerate().for_each(\n |(i, stock)| {\n let n = (3..10).fake::();\n // update 30% of the stocks\n if i % n == 0 {\n stock.random_update();\n }\n },\n );\n });\n cx.notify();\n })\n .ok();\n }\n });\n\n Self {\n table,\n num_stocks_input,\n stripe: false,\n refresh_data: false,\n size: Size::default(),\n _subscriptions,\n _load_task,\n }\n }\n\n // Event handler for changes in the number input field\n fn on_num_stocks_input_change(\n &mut self,\n _: &Entity,\n event: &InputEvent,\n _: &mut Window,\n cx: &mut Context,\n ) {\n match event {\n // Update when the user presses Enter or the input loses focus\n InputEvent::PressEnter { .. } | InputEvent::Blur => {\n let text = self.num_stocks_input.read(cx).value().to_string();\n if let Ok(total_count) = text.parse::() {\n if total_count == self.table.read(cx).delegate().stocks.len() {\n return;\n }\n\n self.table.update(cx, |table, _| {\n table.delegate_mut().update_stocks(total_count);\n });\n cx.notify();\n }\n }\n _ => {}\n }\n }\n\n fn toggle_loop_selection(&mut self, checked: &bool, _: &mut Window, cx: &mut Context) {\n self.table.update(cx, |table, cx| {\n table.loop_selection = *checked;\n cx.notify();\n });\n }\n\n fn toggle_col_resize(&mut self, checked: &bool, _: &mut Window, cx: &mut Context) {\n self.table.update(cx, |table, cx| {\n table.col_resizable = *checked;\n cx.notify();\n });\n }\n\n fn toggle_col_order(&mut self, checked: &bool, _: &mut Window, cx: &mut Context) {\n self.table.update(cx, |table, cx| {\n table.col_movable = *checked;\n cx.notify();\n });\n }\n\n fn toggle_col_sort(&mut self, checked: &bool, _: &mut Window, cx: &mut Context) {\n self.table.update(cx, |table, cx| {\n table.sortable = *checked;\n cx.notify();\n });\n }\n\n fn toggle_col_fixed(&mut self, checked: &bool, _: &mut Window, cx: &mut Context) {\n self.table.update(cx, |table, cx| {\n table.col_fixed = *checked;\n cx.notify();\n });\n }\n\n fn toggle_col_selection(&mut self, checked: &bool, _: &mut Window, cx: &mut Context) {\n self.table.update(cx, |table, cx| {\n table.col_selectable = *checked;\n cx.notify();\n });\n }\n\n fn toggle_row_selection(&mut self, checked: &bool, _: &mut Window, cx: &mut Context) {\n self.table.update(cx, |table, cx| {\n table.row_selectable = *checked;\n cx.notify();\n });\n }\n\n fn toggle_cell_selection(&mut self, checked: &bool, _: &mut Window, cx: &mut Context) {\n self.table.update(cx, |table, cx| {\n table.cell_selectable = *checked;\n cx.notify();\n });\n }\n\n fn toggle_stripe(&mut self, checked: &bool, _: &mut Window, cx: &mut Context) {\n self.stripe = *checked;\n cx.notify();\n }\n\n fn on_change_size(&mut self, a: &ChangeSize, _: &mut Window, cx: &mut Context) {\n self.size = a.0;\n cx.notify();\n }\n\n fn toggle_refresh_data(&mut self, checked: &bool, _: &mut Window, cx: &mut Context) {\n self.refresh_data = *checked;\n cx.notify();\n }\n\n fn on_table_event(\n &mut self,\n _: &Entity>,\n event: &TableEvent,\n _window: &mut Window,\n _cx: &mut Context,\n ) {\n match event {\n TableEvent::ColumnWidthsChanged(col_widths) => {\n println!(\"Column widths changed: {:?}\", col_widths)\n }\n TableEvent::SelectColumn(ix) => println!(\"Select col: {}\", ix),\n TableEvent::SelectCell(row_ix, col_ix) => {\n println!(\"Select cell: row={}, col={}\", row_ix, col_ix)\n }\n TableEvent::DoubleClickedCell(row_ix, col_ix) => {\n println!(\"Double clicked cell: row={}, col={}\", row_ix, col_ix)\n }\n TableEvent::DoubleClickedRow(ix) => println!(\"Double clicked row: {}\", ix),\n TableEvent::SelectRow(ix) => println!(\"Select row: {}\", ix),\n TableEvent::MoveColumn(origin_idx, target_idx) => {\n println!(\"Move col index: {} -> {}\", origin_idx, target_idx);\n }\n TableEvent::RightClickedRow(ix) => println!(\"Right clicked row: {:?}\", ix),\n TableEvent::RightClickedCell(row_ix, col_ix) => {\n println!(\"Right clicked cell: row={}, col={}\", row_ix, col_ix)\n }\n TableEvent::ClearSelection => {\n println!(\"Selection cleared\");\n }\n }\n }\n\n fn dump_csv(&mut self, _: &ClickEvent, window: &mut Window, cx: &mut Context) {\n match self.write_csv(cx) {\n Ok(csv_content) => {\n let Some(path) = dirs::download_dir() else {\n eprintln!(\"Failed to get download directory\");\n return;\n };\n let receiver = cx.prompt_for_new_path(&path, Some(\"export.csv\"));\n cx.spawn_in(window, async move |_, _| {\n if let Some(path) = receiver.await.ok().into_iter().flatten().flatten().next() {\n match std::fs::write(&path, csv_content) {\n Ok(_) => {\n println!(\"CSV exported successfully to: {:?}\", path);\n }\n Err(e) => {\n eprintln!(\"Failed to save CSV file: {}\", e);\n }\n }\n } else {\n println!(\"CSV export cancelled by user\");\n };\n })\n .detach();\n }\n Err(e) => {\n eprintln!(\"Failed to export CSV: {}\", e);\n }\n }\n }\n\n fn write_csv(&mut self, cx: &mut Context) -> anyhow::Result {\n let (headers, rows) = self.table.update(cx, |table, cx| table.dump(cx));\n\n // Convert to CSV format using rust-csv\n let mut wtr = csv::Writer::from_writer(vec![]);\n\n // Write header\n wtr.write_record(&headers)?;\n\n // Write data rows\n for row in rows {\n wtr.write_record(&row)?;\n }\n\n // Flush and get the CSV data\n wtr.flush()?;\n let data = wtr.into_inner().map_err(csv::IntoInnerError::into_error)?;\n let csv_content = String::from_utf8(data)?;\n\n Ok(csv_content)\n }\n}\n\nimpl Render for DataTableStory {\n fn render(&mut self, _: &mut Window, cx: &mut Context) -> impl gpui::IntoElement {\n let table = &self.table.read(cx);\n let delegate = table.delegate();\n let rows_count = delegate.rows_count(cx);\n let size = self.size;\n\n v_flex()\n .on_action(cx.listener(Self::on_change_size))\n .size_full()\n .text_sm()\n .gap_4()\n .child(\n h_flex()\n .items_center()\n .gap_3()\n .flex_wrap()\n .child(\n Checkbox::new(\"loop-selection\")\n .label(\"Loop Selection\")\n .selected(table.loop_selection)\n .on_click(cx.listener(Self::toggle_loop_selection)),\n )\n .child(\n Checkbox::new(\"col-resize\")\n .label(\"Column Resize\")\n .selected(table.col_resizable)\n .on_click(cx.listener(Self::toggle_col_resize)),\n )\n .child(\n Checkbox::new(\"col-order\")\n .label(\"Column Order\")\n .selected(table.col_movable)\n .on_click(cx.listener(Self::toggle_col_order)),\n )\n .child(\n Checkbox::new(\"col-sort\")\n .label(\"Sortable\")\n .selected(table.sortable)\n .on_click(cx.listener(Self::toggle_col_sort)),\n )\n .child(\n Checkbox::new(\"col-selection\")\n .label(\"Column Selectable\")\n .selected(table.col_selectable)\n .on_click(cx.listener(Self::toggle_col_selection)),\n )\n .child(\n Checkbox::new(\"row-selection\")\n .label(\"Row Selectable\")\n .selected(table.row_selectable)\n .on_click(cx.listener(Self::toggle_row_selection)),\n )\n .child(\n Checkbox::new(\"cell-selection\")\n .label(\"Cell Selectable\")\n .selected(table.cell_selectable)\n .on_click(cx.listener(Self::toggle_cell_selection)),\n )\n .child(\n Checkbox::new(\"fixed\")\n .label(\"Column Fixed\")\n .selected(table.col_fixed)\n .on_click(cx.listener(Self::toggle_col_fixed)),\n )\n .child(\n Checkbox::new(\"stripe\")\n .label(\"Stripe\")\n .selected(self.stripe)\n .on_click(cx.listener(Self::toggle_stripe)),\n )\n .child(\n Checkbox::new(\"loading\")\n .label(\"Loading\")\n .checked(self.table.read(cx).delegate().full_loading)\n .on_click(cx.listener(|this, check: &bool, _, cx| {\n this.table.update(cx, |this, cx| {\n this.delegate_mut().full_loading = *check;\n cx.notify();\n })\n })),\n )\n .child(\n Checkbox::new(\"refresh-data\")\n .label(\"Refresh Data\")\n .selected(self.refresh_data)\n .on_click(cx.listener(Self::toggle_refresh_data)),\n ),\n )\n .child(\n h_flex()\n .gap_2()\n .child(\n Button::new(\"size\")\n .outline()\n .small()\n .label(format!(\"size: {:?}\", self.size))\n .dropdown_menu(move |menu, _, _| {\n menu.menu_with_check(\n \"Large\",\n size == Size::Large,\n Box::new(ChangeSize(Size::Large)),\n )\n .menu_with_check(\n \"Medium\",\n size == Size::Medium,\n Box::new(ChangeSize(Size::Medium)),\n )\n .menu_with_check(\n \"Small\",\n size == Size::Small,\n Box::new(ChangeSize(Size::Small)),\n )\n .menu_with_check(\n \"XSmall\",\n size == Size::XSmall,\n Box::new(ChangeSize(Size::XSmall)),\n )\n }),\n )\n .child(\n Button::new(\"scroll-top\")\n .outline()\n .small()\n .child(\"Scroll to Top\")\n .on_click(cx.listener(|this, _, _, cx| {\n this.table.update(cx, |table, cx| {\n table.scroll_to_row(0, cx);\n })\n })),\n )\n .child(\n Button::new(\"scroll-bottom\")\n .outline()\n .small()\n .child(\"Scroll to Bottom\")\n .on_click(cx.listener(|this, _, _, cx| {\n this.table.update(cx, |table, cx| {\n table.scroll_to_row(table.delegate().rows_count(cx) - 1, cx);\n })\n })),\n )\n .child(\n Button::new(\"dump-csv\")\n .outline()\n .small()\n .label(\"Dump CSV\")\n .on_click(cx.listener(Self::dump_csv)),\n )\n .child(\n Button::new(\"select-cell-5-3\")\n .outline()\n .small()\n .child(\"Select Cell (5, 3)\")\n .on_click(cx.listener(|this, _, _, cx| {\n this.table.update(cx, |table, cx| {\n table.set_selected_cell(5, 3, cx);\n })\n })),\n )\n .child(\n Button::new(\"select-cell-10-7\")\n .outline()\n .small()\n .child(\"Select Cell (10, 7)\")\n .on_click(cx.listener(|this, _, _, cx| {\n this.table.update(cx, |table, cx| {\n table.set_selected_cell(10, 7, cx);\n })\n })),\n )\n .child(\n Button::new(\"clear-selection\")\n .outline()\n .small()\n .child(\"Clear Selection\")\n .on_click(cx.listener(|this, _, _, cx| {\n this.table.update(cx, |table, cx| {\n table.clear_selection(cx);\n })\n })),\n ),\n )\n .child(\n h_flex().items_center().gap_2().child(\n h_flex()\n .w_full()\n .items_center()\n .justify_between()\n .gap_2()\n .child(\n h_flex()\n .gap_2()\n .flex_1()\n .child(Label::new(\"Number of Stocks:\"))\n .child(\n h_flex()\n .min_w_32()\n .child(Input::new(&self.num_stocks_input).small())\n .into_any_element(),\n )\n .when(delegate.loading, |this| {\n this.child(\n h_flex().gap_1().child(Spinner::new()).child(\"Loading...\"),\n )\n })\n .child(\n Checkbox::new(\"lazy-load\")\n .label(\"Lazy Load\")\n .checked(delegate.lazy_load)\n .on_click(cx.listener(|this, check: &bool, _, cx| {\n this.table.update(cx, |table, cx| {\n table.delegate_mut().lazy_load = *check;\n cx.notify();\n })\n })),\n ),\n )\n .child(\n h_flex()\n .gap_2()\n .child(format!(\"Total Rows: {}\", rows_count))\n .child(format!(\"Visible Rows: {:?}\", delegate.visible_rows))\n .child(format!(\"Visible Cols: {:?}\", delegate.visible_cols))\n .when_some(table.selected_cell(), |this, (row, col)| {\n this.child(format!(\"Selected Cell: ({}, {})\", row, col))\n })\n .when(delegate.eof, |this| this.child(\"All data loaded.\")),\n ),\n ),\n )\n .child(DataTable::new(&self.table).with_size(self.size).stripe(self.stripe))\n }\n}\n" }, { "path": "crates/story/src/stories/date_picker_story.rs", "content": "use chrono::{Datelike, Days, Duration, Utc};\nuse gpui::{\n App, AppContext, Context, Entity, Focusable, IntoElement, ParentElement as _, Render,\n Styled as _, Subscription, Window, div, px,\n};\nuse gpui_component::{\n ActiveTheme as _, Sizable as _, calendar,\n date_picker::{DatePicker, DatePickerEvent, DatePickerState, DateRangePreset},\n v_flex,\n};\n\nuse crate::section;\n\npub struct DatePickerStory {\n date_picker: Entity,\n date_picker_small: Entity,\n date_picker_large: Entity,\n data_picker_custom: Entity,\n date_picker_value: Option,\n date_range_picker: Entity,\n default_range_mode_picker: Entity,\n without_appearance_picker: Entity,\n _subscriptions: Vec,\n}\n\nimpl super::Story for DatePickerStory {\n fn title() -> &'static str {\n \"DatePicker\"\n }\n\n fn description() -> &'static str {\n \"A date picker to select a date or date range.\"\n }\n\n fn new_view(window: &mut Window, cx: &mut App) -> Entity {\n Self::view(window, cx)\n }\n}\n\nimpl DatePickerStory {\n pub fn view(window: &mut Window, cx: &mut App) -> Entity {\n cx.new(|cx| Self::new(window, cx))\n }\n\n fn new(window: &mut Window, cx: &mut Context) -> Self {\n let now = chrono::Local::now().naive_local().date();\n let date_picker = cx.new(|cx| {\n let mut picker = DatePickerState::new(window, cx).disabled_matcher(vec![0, 6]);\n picker.set_date(now, window, cx);\n picker\n });\n let date_picker_large = cx.new(|cx| {\n let mut picker = DatePickerState::new(window, cx)\n .date_format(\"%Y-%m-%d\")\n .disabled_matcher(calendar::Matcher::range(\n Some(now),\n now.checked_add_days(Days::new(7)),\n ));\n picker.set_date(\n now.checked_sub_days(Days::new(1)).unwrap_or_default(),\n window,\n cx,\n );\n picker\n });\n let date_picker_small = cx.new(|cx| {\n let mut picker = DatePickerState::new(window, cx).disabled_matcher(\n calendar::Matcher::interval(Some(now), now.checked_add_days(Days::new(5))),\n );\n picker.set_date(now, window, cx);\n picker\n });\n let data_picker_custom = cx.new(|cx| {\n let mut picker = DatePickerState::new(window, cx)\n .disabled_matcher(calendar::Matcher::custom(|date| date.day0() < 5));\n picker.set_date(now, window, cx);\n picker\n });\n let date_range_picker = cx.new(|cx| {\n let mut picker = DatePickerState::new(window, cx);\n picker.set_date(\n (now, now.checked_add_days(Days::new(4)).unwrap()),\n window,\n cx,\n );\n picker\n });\n\n let default_range_mode_picker = cx.new(|cx| DatePickerState::range(window, cx));\n\n let without_appearance_picker = cx.new(|cx| DatePickerState::new(window, cx));\n\n let _subscriptions = vec![\n cx.subscribe(&date_picker, |this, _, ev, _| match ev {\n DatePickerEvent::Change(date) => {\n this.date_picker_value = date.format(\"%Y-%m-%d\").map(|s| s.to_string());\n }\n }),\n cx.subscribe(&date_range_picker, |this, _, ev, _| match ev {\n DatePickerEvent::Change(date) => {\n this.date_picker_value = date.format(\"%Y-%m-%d\").map(|s| s.to_string());\n }\n }),\n cx.subscribe(&default_range_mode_picker, |this, _, ev, _| match ev {\n DatePickerEvent::Change(date) => {\n this.date_picker_value = date.format(\"%Y-%m-%d\").map(|s| s.to_string());\n }\n }),\n ];\n\n Self {\n date_picker,\n date_picker_large,\n date_picker_small,\n data_picker_custom,\n date_range_picker,\n default_range_mode_picker,\n without_appearance_picker,\n date_picker_value: None,\n _subscriptions,\n }\n }\n}\n\nimpl Focusable for DatePickerStory {\n fn focus_handle(&self, cx: &gpui::App) -> gpui::FocusHandle {\n self.date_picker.focus_handle(cx)\n }\n}\n\nimpl Render for DatePickerStory {\n fn render(&mut self, _: &mut Window, cx: &mut Context) -> impl IntoElement {\n let presets = vec![\n DateRangePreset::single(\n \"Yesterday\",\n (Utc::now() - Duration::days(1)).naive_local().date(),\n ),\n DateRangePreset::single(\n \"Last Week\",\n (Utc::now() - Duration::weeks(1)).naive_local().date(),\n ),\n DateRangePreset::single(\n \"Last Month\",\n (Utc::now() - Duration::days(30)).naive_local().date(),\n ),\n ];\n let range_presets = vec![\n DateRangePreset::range(\n \"Last 7 Days\",\n (Utc::now() - Duration::days(7)).naive_local().date(),\n Utc::now().naive_local().date(),\n ),\n DateRangePreset::range(\n \"Last 14 Days\",\n (Utc::now() - Duration::days(14)).naive_local().date(),\n Utc::now().naive_local().date(),\n ),\n DateRangePreset::range(\n \"Last 30 Days\",\n (Utc::now() - Duration::days(30)).naive_local().date(),\n Utc::now().naive_local().date(),\n ),\n DateRangePreset::range(\n \"Last 90 Days\",\n (Utc::now() - Duration::days(90)).naive_local().date(),\n Utc::now().naive_local().date(),\n ),\n ];\n\n v_flex()\n .gap_3()\n .child(\n section(\"Normal\").max_w_128().child(\n DatePicker::new(&self.date_picker)\n .cleanable(true)\n .presets(presets),\n ),\n )\n .child(\n section(\"Small with 180px width\")\n .max_w_128()\n .child(DatePicker::new(&self.date_picker_small).small().w(px(180.))),\n )\n .child(\n section(\"Large\")\n .max_w_128()\n .child(DatePicker::new(&self.date_picker_large).large().w(px(300.))),\n )\n .child(\n section(\"Custom (First 5 days of each month disabled)\")\n .max_w_128()\n .child(DatePicker::new(&self.data_picker_custom)),\n )\n .child(\n section(\"Date Range\").max_w_128().child(\n DatePicker::new(&self.date_range_picker)\n .number_of_months(2)\n .cleanable(true)\n .presets(range_presets.clone()),\n ),\n )\n .child(\n section(\"Default Range Mode\").max_w_128().child(\n DatePicker::new(&self.default_range_mode_picker)\n .placeholder(\"Range mode picker\")\n .cleanable(true)\n .presets(range_presets.clone()),\n ),\n )\n .child(\n section(\"Date Picker Value\").max_w_128().child(\n format!(\"Date picker value: {:?}\", self.date_picker_value).into_element(),\n ),\n )\n .child(\n section(\"Without Appearance\").max_w_128().child(\n div().w_full().bg(cx.theme().secondary).child(\n DatePicker::new(&self.without_appearance_picker)\n .appearance(false)\n .placeholder(\"Without appearance\"),\n ),\n ),\n )\n }\n}\n" }, { "path": "crates/story/src/stories/description_list_story.rs", "content": "use gpui::*;\nuse gpui::{\n Action, App, AppContext, Axis, Context, Entity, FocusHandle, Focusable, IntoElement,\n ParentElement, Render, Styled, Window,\n};\nuse gpui_component::{AxisExt, h_flex, menu::DropdownMenu as _};\nuse gpui_component::{\n Sizable as _, Size,\n button::Button,\n checkbox::Checkbox,\n description_list::{DescriptionItem, DescriptionList},\n dock::PanelControl,\n text::TextView,\n v_flex,\n};\nuse serde::Deserialize;\n\n#[derive(Action, Clone, PartialEq, Eq, Deserialize)]\n#[action(namespace = description_list_story, no_json)]\nstruct ChangeSize(Size);\n\npub struct DescriptionListStory {\n focus_handle: FocusHandle,\n layout: Axis,\n bordered: bool,\n size: Size,\n items: Vec<(&'static str, &'static str, usize)>,\n}\n\nimpl DescriptionListStory {\n fn new(_: &mut Window, cx: &mut Context) -> Self {\n let items = vec![\n (\"Name\", \"GPUI Component\", 1),\n (\n \"Description\",\n \"UI components for building fantastic desktop application by using [GPUI](https://gpui.rs).\\\n \\n\\n \\\n Contains a lot of useful UI components, such as **Button**, **Input**, **Table**, **List**, **Select**, **DatePicker** ... \\\n \\n\\n \\\n You can easily create your native desktop application by using GPUI Component.\n \",\n 3,\n ),\n (\"Version\", \"0.1.0\", 1),\n (\"License\", \"Apache-2.0\", 1),\n (\"Author\", \"Longbridge\", 1),\n (\"--\", \"--\", 1),\n (\n \"Repository\",\n \"https://github.com/longbridge/gpui-component\",\n 2,\n ),\n (\n \"Category\",\n \"UI, Desktop, Framework\",\n 1,\n ),\n (\n \"This is a long label for Platform\",\n \"macOS, Windows, Linux\",\n 1,\n ),\n ];\n\n Self {\n items,\n bordered: true,\n size: Size::default(),\n layout: Axis::Horizontal,\n focus_handle: cx.focus_handle(),\n }\n }\n\n pub fn view(window: &mut Window, cx: &mut App) -> Entity {\n cx.new(|cx| Self::new(window, cx))\n }\n\n fn set_layout(&mut self, layout: Axis, cx: &mut Context) {\n self.layout = layout;\n cx.notify();\n }\n\n fn set_bordered(&mut self, bordered: bool, cx: &mut Context) {\n self.bordered = bordered;\n cx.notify();\n }\n\n fn on_change_size(&mut self, a: &ChangeSize, _: &mut Window, cx: &mut Context) {\n self.size = a.0;\n cx.notify();\n }\n}\n\nimpl super::Story for DescriptionListStory {\n fn title() -> &'static str {\n \"DescriptionList\"\n }\n\n fn description() -> &'static str {\n \"Use to display details with a tidy layout.\"\n }\n\n fn new_view(window: &mut Window, cx: &mut App) -> Entity {\n Self::view(window, cx)\n }\n\n fn zoomable() -> Option {\n None\n }\n}\n\nimpl Focusable for DescriptionListStory {\n fn focus_handle(&self, _: &App) -> FocusHandle {\n self.focus_handle.clone()\n }\n}\n\nimpl Render for DescriptionListStory {\n fn render(&mut self, _: &mut Window, cx: &mut Context) -> impl IntoElement {\n v_flex()\n .id(\"example\")\n .on_action(cx.listener(Self::on_change_size))\n .p_4()\n .size_full()\n .gap_2()\n .child(\n h_flex()\n .gap_3()\n .child(\n Checkbox::new(\"layout\")\n .checked(self.layout.is_vertical())\n .label(\"Vertical Layout\")\n .on_click(cx.listener(|this, checked: &bool, _, cx| {\n let new_layout = if *checked {\n Axis::Vertical\n } else {\n Axis::Horizontal\n };\n this.set_layout(new_layout, cx);\n })),\n )\n .child(\n Checkbox::new(\"bordered\")\n .checked(self.bordered)\n .label(\"Bordered\")\n .on_click(cx.listener(|this, checked: &bool, _, cx| {\n this.set_bordered(*checked, cx);\n })),\n )\n .child(\n Button::new(\"size\")\n .small()\n .outline()\n .label(format!(\"size: {:?}\", self.size))\n .dropdown_menu({\n let size = self.size;\n move |menu, _, _| {\n menu.menu_with_check(\n \"Large\",\n size == Size::Large,\n Box::new(ChangeSize(Size::Large)),\n )\n .menu_with_check(\n \"Medium\",\n size == Size::Medium,\n Box::new(ChangeSize(Size::Medium)),\n )\n .menu_with_check(\n \"Small\",\n size == Size::Small,\n Box::new(ChangeSize(Size::Small)),\n )\n }\n }),\n ),\n )\n .child(\n DescriptionList::new()\n .columns(3)\n .layout(self.layout)\n .bordered(self.bordered)\n .with_size(self.size)\n .children(self.items.clone().into_iter().enumerate().map(\n |(ix, (label, value, span))| {\n if label == \"--\" {\n return DescriptionItem::Divider;\n }\n\n DescriptionItem::new(label)\n .value(TextView::markdown(ix, value).into_any_element())\n .span(span)\n },\n )),\n )\n }\n}\n" }, { "path": "crates/story/src/stories/dialog_story.rs", "content": "use gpui::{\n App, AppContext, Context, Entity, FocusHandle, Focusable, InteractiveElement as _, IntoElement,\n ParentElement, Render, SharedString, Styled, Window, div, px,\n};\n\nuse gpui_component::{\n ActiveTheme, Icon, IconName, WindowExt as _,\n button::{Button, ButtonVariants as _},\n checkbox::Checkbox,\n date_picker::{DatePicker, DatePickerState},\n dialog::{\n Dialog, DialogAction, DialogClose, DialogDescription, DialogFooter, DialogHeader,\n DialogTitle,\n },\n h_flex,\n input::{Input, InputState},\n select::{Select, SelectState},\n table::{Column, DataTable, TableDelegate, TableState},\n text::markdown,\n v_flex,\n};\n\nuse crate::{TestAction, section};\n\npub struct DialogStory {\n focus_handle: FocusHandle,\n selected_value: Option,\n input1: Entity,\n input2: Entity,\n date: Entity,\n select: Entity>>,\n table: Entity>,\n dialog_overlay: bool,\n close_button: bool,\n keyboard: bool,\n overlay_closable: bool,\n}\n\nstruct MyTable {\n columns: Vec,\n}\nimpl MyTable {\n fn new(_: &mut App) -> Self {\n let columns = vec![\n Column::new(\"id\", \"ID\").width(px(50.)),\n Column::new(\"name\", \"Name\").width(px(150.)),\n Column::new(\"email\", \"Email\").width(px(250.)),\n Column::new(\"role\", \"Role\").width(px(150.)),\n Column::new(\"status\", \"Status\").width(px(100.)),\n ];\n\n Self { columns }\n }\n}\nimpl TableDelegate for MyTable {\n fn columns_count(&self, _: &App) -> usize {\n 5\n }\n\n fn rows_count(&self, _: &App) -> usize {\n 200\n }\n\n fn column(&self, col_ix: usize, _: &App) -> Column {\n self.columns[col_ix].clone()\n }\n\n fn render_td(\n &mut self,\n row_ix: usize,\n col_ix: usize,\n _: &mut Window,\n _: &mut Context>,\n ) -> impl IntoElement {\n match col_ix {\n 0 => format!(\"{}\", row_ix).into_any_element(),\n 1 => format!(\"User {}\", row_ix).into_any_element(),\n 2 => format!(\"user-{}@mail.com\", row_ix).into_any_element(),\n 3 => \"User\".into_any_element(),\n 4 => \"Active\".into_any_element(),\n _ => panic!(\"Invalid column index\"),\n }\n }\n}\n\nimpl super::Story for DialogStory {\n fn title() -> &'static str {\n \"Dialog\"\n }\n\n fn description() -> &'static str {\n \"A dialog dialog\"\n }\n\n fn new_view(window: &mut Window, cx: &mut App) -> Entity {\n Self::view(window, cx)\n }\n}\n\nimpl DialogStory {\n pub fn view(window: &mut Window, cx: &mut App) -> Entity {\n cx.new(|cx| Self::new(window, cx))\n }\n\n fn new(window: &mut Window, cx: &mut Context) -> Self {\n let input1 = cx.new(|cx| InputState::new(window, cx).placeholder(\"Your Name\"));\n let input2 = cx.new(|cx| {\n InputState::new(window, cx).placeholder(\"For test focus back on dialog close.\")\n });\n let date = cx.new(|cx| DatePickerState::new(window, cx));\n let select = cx.new(|cx| {\n SelectState::new(\n vec![\"Option 1\".to_string(), \"Option 2\".to_string(), \"Option 3\".to_string()],\n None,\n window,\n cx,\n )\n });\n\n let table = cx.new(|cx| TableState::new(MyTable::new(cx), window, cx));\n\n Self {\n focus_handle: cx.focus_handle(),\n selected_value: None,\n input1,\n input2,\n date,\n select,\n dialog_overlay: true,\n close_button: true,\n keyboard: true,\n overlay_closable: true,\n table,\n }\n }\n\n fn on_action_test_action(\n &mut self,\n _: &TestAction,\n window: &mut Window,\n cx: &mut Context,\n ) {\n window.push_notification(\"You have clicked the TestAction.\", cx);\n }\n\n fn render_basic_dialog(&self, cx: &mut Context) -> impl IntoElement {\n let dialog_overlay = self.dialog_overlay;\n let overlay_closable = self.overlay_closable;\n let input1 = self.input1.clone();\n let date = self.date.clone();\n let select = self.select.clone();\n let view = cx.entity();\n\n section(\"Basic Dialog\").child(\n Dialog::new(cx)\n .trigger(Button::new(\"show-dialog\").outline().label(\"Open Dialog\"))\n .overlay(dialog_overlay)\n .keyboard(self.keyboard)\n .close_button(self.close_button)\n .overlay_closable(overlay_closable)\n .on_ok({\n let view = view.clone();\n let input1 = input1.clone();\n let date = date.clone();\n move |_, window, cx| {\n view.update(cx, |view, cx| {\n view.selected_value = Some(\n format!(\n \"Hello, {}, date: {}\",\n input1.read(cx).value(),\n date.read(cx).date()\n )\n .into(),\n )\n });\n window.push_notification(\"You have pressed confirm.\", cx);\n true\n }\n })\n .p_0()\n .content({\n move |content, _, cx| {\n content\n .child(\n DialogHeader::new()\n .p_4()\n .child(DialogTitle::new().child(\"Basic Dialog\"))\n .child(DialogDescription::new().child(\n \"This is a basic dialog created \\\n using the declarative API.\",\n )),\n )\n .child(\n v_flex()\n .px_4()\n .pb_4()\n .gap_3()\n .child(\n \"This is a dialog dialog, \\\n you can put anything here.\",\n )\n .child(Input::new(&input1))\n .child(Select::new(&select))\n .child(DatePicker::new(&date).placeholder(\"Date of Birth\")),\n )\n .child(\n DialogFooter::new()\n .p_4()\n .bg(cx.theme().muted)\n .justify_between()\n .child(\n Button::new(\"new-dialog\")\n .label(\"Open Other Dialog\")\n .outline()\n .on_click(move |_, window, cx| {\n window.open_dialog(cx, move |dialog, _, _| {\n dialog\n .title(\"Other Dialog\")\n .child(\"This is another dialog.\")\n .min_h(px(100.))\n .overlay_closable(overlay_closable)\n });\n }),\n )\n .child(\n h_flex()\n .gap_2()\n .child(DialogClose::new().child(\n Button::new(\"cancel\").label(\"Cancel\").outline(),\n ))\n .child(DialogAction::new().child(\n Button::new(\"confirm\").primary().label(\"Confirm\"),\n )),\n ),\n )\n }\n }),\n )\n }\n\n fn render_focus_back_test(&self, _cx: &mut Context) -> impl IntoElement {\n section(\"Focus back test\").max_w_md().child(Input::new(&self.input2)).child(\n Button::new(\"test-action\")\n .outline()\n .label(\"Test Action\")\n .flex_shrink_0()\n .on_click(|_, window, cx| {\n window.dispatch_action(Box::new(TestAction), cx);\n })\n .tooltip(\n \"This button for test dispatch action, \\\n to make sure when Dialog close,\\\n \\nthis still can handle the action.\",\n ),\n )\n }\n\n fn render_dialog_without_title(&self, cx: &mut Context) -> impl IntoElement {\n let dialog_overlay = self.dialog_overlay;\n let overlay_closable = self.overlay_closable;\n\n section(\"Dialog without Title\").child(\n Button::new(\"dialog-no-title\").outline().label(\"Dialog without Title\").on_click(\n cx.listener(move |_, _, window, cx| {\n window.open_dialog(cx, move |dialog, _, _| {\n dialog.overlay(dialog_overlay).overlay_closable(overlay_closable).child(\n \"This is a dialog without title, \\\n you can use it when the title is not necessary.\",\n )\n });\n }),\n ),\n )\n }\n\n fn render_custom_buttons(&self, cx: &mut Context) -> impl IntoElement {\n let dialog_overlay = self.dialog_overlay;\n let overlay_closable = self.overlay_closable;\n\n section(\"Custom buttons\").child(\n Button::new(\"confirm-dialog1\").outline().label(\"Custom Buttons\").on_click(cx.listener(\n move |_, _, window, cx| {\n window.open_dialog(cx, move |dialog, _, cx| {\n dialog\n .rounded(cx.theme().radius_lg)\n .overlay(dialog_overlay)\n .overlay_closable(overlay_closable)\n .child(\n v_flex()\n .gap_3()\n .items_center()\n .child(\n div()\n .flex()\n .items_center()\n .justify_center()\n .rounded(cx.theme().radius_lg)\n .bg(cx.theme().warning.opacity(0.2))\n .size_12()\n .text_color(cx.theme().warning)\n .child(Icon::new(IconName::TriangleAlert).size_8()),\n )\n .child(\n \"Update successful, \\\n we need to restart the application.\",\n ),\n )\n .footer(\n DialogFooter::new()\n .child(\n DialogClose::new()\n .child(Button::new(\"cancel\").label(\"Later\").outline()),\n )\n .child(\n DialogAction::new().child(\n Button::new(\"ok\").label(\"Restart Now\").primary(),\n ),\n ),\n )\n .on_ok(|_, window, cx| {\n window.push_notification(\"You have pressed restart.\", cx);\n true\n })\n .on_cancel(|_, window, cx| {\n window.push_notification(\"You have pressed later.\", cx);\n true\n })\n });\n },\n )),\n )\n }\n\n fn render_scrollable_dialog(&self, cx: &mut Context) -> impl IntoElement {\n let dialog_overlay = self.dialog_overlay;\n let overlay_closable = self.overlay_closable;\n\n section(\"Scrollable Dialog\").child(\n Button::new(\"scrollable-dialog\").outline().label(\"Scrollable Dialog\").on_click(\n cx.listener(move |_, _, window, cx| {\n window.open_dialog(cx, move |dialog, _, _| {\n dialog\n .w(px(720.))\n .h(px(600.))\n .overlay(dialog_overlay)\n .overlay_closable(overlay_closable)\n .title(\"Dialog with scrollbar\")\n .child(markdown(include_str!(\"../../../../README.md\")))\n .footer(\n DialogFooter::new()\n .gap_2()\n .child(\n DialogClose::new()\n .child(Button::new(\"cancel\").label(\"Cancel\").outline()),\n )\n .child(\n DialogAction::new().child(\n Button::new(\"confirm\").label(\"Confirm\").primary(),\n ),\n ),\n )\n });\n }),\n ),\n )\n }\n\n fn render_table_in_dialog(&self, cx: &mut Context) -> impl IntoElement {\n let dialog_overlay = self.dialog_overlay;\n let overlay_closable = self.overlay_closable;\n\n section(\"Table in Dialog\").child(\n Button::new(\"table-dialog\").outline().label(\"Table Dialog\").on_click(cx.listener({\n move |this, _, window, cx| {\n window.open_dialog(cx, {\n let table = this.table.clone();\n move |dialog, _, _| {\n dialog\n .w(px(800.))\n .h(px(600.))\n .overlay(dialog_overlay)\n .overlay_closable(overlay_closable)\n .title(\"Dialog with Table\")\n .child(\n v_flex()\n .size_full()\n .gap_3()\n .child(\"This is a dialog contains a table component.\")\n .child(DataTable::new(&table)),\n )\n }\n });\n }\n })),\n )\n }\n\n fn render_custom_paddings(&self, cx: &mut Context) -> impl IntoElement {\n section(\"Custom Paddings\").child(\n Button::new(\"custom-dialog-paddings\").outline().label(\"Custom Paddings\").on_click(\n cx.listener(move |_, _, window, cx| {\n window.open_dialog(cx, move |dialog, _, _| {\n dialog.p_3().title(\"Custom Dialog Title\").child(\n \"This is a custom dialog content, we can use \\\n paddings to control the layout and spacing within \\\n the dialog.\",\n )\n });\n }),\n ),\n )\n }\n\n fn render_custom_style(&self, cx: &mut Context) -> impl IntoElement {\n section(\"Custom Style\").child(\n Button::new(\"custom-dialog-style\").outline().label(\"Custom Dialog Style\").on_click(\n cx.listener(move |_, _, window, cx| {\n window.open_dialog(cx, move |dialog, _, cx| {\n dialog\n .rounded(cx.theme().radius_lg)\n .bg(cx.theme().cyan)\n .text_color(cx.theme().info_foreground)\n .title(\"Custom Dialog Title\")\n .child(\"This is a custom dialog content.\")\n });\n }),\n ),\n )\n }\n\n fn render_dialog_with_content(&self, cx: &mut Context) -> impl IntoElement {\n section(\"Open Dialog with DialogContent\").sub_title(\"Declarative API\").child(\n Button::new(\"custom-width-dialog-btn\")\n .outline()\n .label(\"Custom Width (400px)\")\n .on_click(cx.listener(move |_, _, window, cx| {\n window.open_dialog(cx, move |dialog, _, _| {\n dialog.w(px(400.)).content(|content, _, _| {\n content\n .child(\n DialogHeader::new()\n .child(DialogTitle::new().child(\"Custom Width\"))\n .child(\n DialogDescription::new()\n .child(\"This dialog has a custom width of 400px.\"),\n ),\n )\n .child(\n \"Content area with custom width configuration, \\\n and the footer is used flex 1 button widths.\",\n )\n .child(\n DialogFooter::new()\n .justify_center()\n .child(\n Button::new(\"cancel\")\n .flex_1()\n .outline()\n .label(\"Cancel\")\n .on_click(|_, window, cx| {\n window.close_dialog(cx);\n }),\n )\n .child(\n Button::new(\"done\")\n .flex_1()\n .primary()\n .label(\"Done\")\n .on_click(|_, window, cx| {\n window.close_dialog(cx);\n }),\n ),\n )\n })\n })\n })),\n )\n }\n}\n\nimpl Focusable for DialogStory {\n fn focus_handle(&self, _cx: &gpui::App) -> FocusHandle {\n self.focus_handle.clone()\n }\n}\n\nimpl Render for DialogStory {\n fn render(&mut self, _: &mut Window, cx: &mut Context) -> impl IntoElement {\n div()\n .id(\"dialog-story\")\n .track_focus(&self.focus_handle)\n .on_action(cx.listener(Self::on_action_test_action))\n .size_full()\n .child(\n v_flex()\n .gap_6()\n .child(\n h_flex()\n .items_center()\n .gap_3()\n .child(\n Checkbox::new(\"dialog-overlay\")\n .label(\"Dialog Overlay\")\n .checked(self.dialog_overlay)\n .on_click(cx.listener(|view, _, _, cx| {\n view.dialog_overlay = !view.dialog_overlay;\n cx.notify();\n })),\n )\n .child(\n Checkbox::new(\"overlay-closable\")\n .label(\"Overlay Closable\")\n .checked(self.overlay_closable)\n .on_click(cx.listener(|view, _, _, cx| {\n view.overlay_closable = !view.overlay_closable;\n cx.notify();\n })),\n )\n .child(\n Checkbox::new(\"dialog-show-close\")\n .label(\"Model Close Button\")\n .checked(self.close_button)\n .on_click(cx.listener(|view, _, _, cx| {\n view.close_button = !view.close_button;\n cx.notify();\n })),\n )\n .child(\n Checkbox::new(\"dialog-keyboard\")\n .label(\"Keyboard\")\n .checked(self.keyboard)\n .on_click(cx.listener(|view, _, _, cx| {\n view.keyboard = !view.keyboard;\n cx.notify();\n })),\n ),\n )\n .child(self.render_basic_dialog(cx))\n .child(self.render_focus_back_test(cx))\n .child(self.render_custom_buttons(cx))\n .child(self.render_scrollable_dialog(cx))\n .child(self.render_table_in_dialog(cx))\n .child(self.render_dialog_without_title(cx))\n .child(self.render_custom_paddings(cx))\n .child(self.render_custom_style(cx))\n .child(self.render_dialog_with_content(cx)),\n )\n }\n}\n" }, { "path": "crates/story/src/stories/divider_story.rs", "content": "use crate::section;\nuse gpui::{\n App, AppContext, Context, Entity, Focusable, IntoElement, ParentElement, Render, Styled,\n Window, px,\n};\nuse gpui_component::{ActiveTheme, divider::Divider, h_flex, label::Label, v_flex};\n\nconst DESCRIPTION: &str = \"GPUI Component is a Rust GUI components for building fantastic cross-platform desktop application by using GPUI.\";\n\npub struct DividerStory {\n focus_handle: gpui::FocusHandle,\n}\n\nimpl super::Story for DividerStory {\n fn title() -> &'static str {\n \"Divider\"\n }\n\n fn description() -> &'static str {\n \"A divider that can be either vertical or horizontal.\"\n }\n\n fn new_view(window: &mut Window, cx: &mut App) -> Entity {\n Self::view(window, cx)\n }\n}\n\nimpl DividerStory {\n pub fn view(_window: &mut Window, cx: &mut App) -> Entity {\n cx.new(|cx| Self {\n focus_handle: cx.focus_handle(),\n })\n }\n}\n\nimpl Focusable for DividerStory {\n fn focus_handle(&self, _: &gpui::App) -> gpui::FocusHandle {\n self.focus_handle.clone()\n }\n}\n\nimpl Render for DividerStory {\n fn render(&mut self, _: &mut Window, cx: &mut Context) -> impl IntoElement {\n v_flex()\n .gap_6()\n .child(\n section(\"Horizontal Dividers\").child(\n v_flex()\n .gap_4()\n .w_full()\n .mt_4()\n .child(Divider::horizontal())\n .child(Divider::horizontal().label(\"With Label\"))\n .child(Divider::horizontal_dashed())\n .child(Divider::horizontal_dashed().label(\"Dashed With Label\")),\n ),\n )\n .child(\n section(\"Vertical Dividers\").child(\n h_flex()\n .gap_4()\n .h(px(100.))\n .child(Divider::vertical())\n .child(Divider::vertical().label(\"Solid\"))\n .child(Divider::vertical_dashed())\n .child(Divider::vertical_dashed().label(\"Dashed\")),\n ),\n )\n .child(\n section(\"Combination Dividers\").child(\n v_flex()\n .gap_y_4()\n .child(\n v_flex().gap_y_2().child(\"Hello GPUI Component\").child(\n Label::new(DESCRIPTION)\n .text_color(cx.theme().muted_foreground)\n .text_sm(),\n ),\n )\n .child(Divider::horizontal())\n .child(\n h_flex()\n .gap_x_4()\n .child(\"Docs\")\n .child(Divider::vertical().dashed())\n .child(\"Github\")\n .child(Divider::vertical().dashed())\n .child(\"Source\"),\n ),\n ),\n )\n }\n}\n" }, { "path": "crates/story/src/stories/dropdown_button_story.rs", "content": "use gpui::{\n Action, App, AppContext as _, Context, Corner, Entity, Focusable, IntoElement,\n ParentElement as _, Render, Styled as _, Window, prelude::FluentBuilder as _,\n};\nuse serde::Deserialize;\n\nuse crate::section;\nuse gpui_component::{\n ActiveTheme, Disableable, Selectable as _, Sizable as _, Theme,\n button::{Button, ButtonVariants as _, DropdownButton},\n checkbox::Checkbox,\n h_flex, v_flex,\n};\n\n#[derive(Clone, Action, PartialEq, Eq, Deserialize)]\n#[action(namespace = dropdown_button_story, no_json)]\nenum ButtonAction {\n Disabled,\n Loading,\n Selected,\n Compact,\n}\n\npub struct DropdownButtonStory {\n focus_handle: gpui::FocusHandle,\n disabled: bool,\n loading: bool,\n selected: bool,\n compact: bool,\n}\n\nimpl DropdownButtonStory {\n pub fn view(_: &mut Window, cx: &mut App) -> Entity {\n cx.new(|cx| Self {\n focus_handle: cx.focus_handle(),\n disabled: false,\n loading: false,\n selected: false,\n compact: false,\n })\n }\n}\n\nimpl super::Story for DropdownButtonStory {\n fn title() -> &'static str {\n \"DropdownButton\"\n }\n\n fn description() -> &'static str {\n \"A button with an attached dropdown menu for additional options.\"\n }\n\n fn closable() -> bool {\n false\n }\n\n fn new_view(window: &mut Window, cx: &mut App) -> Entity {\n Self::view(window, cx)\n }\n}\n\nimpl Focusable for DropdownButtonStory {\n fn focus_handle(&self, _: &gpui::App) -> gpui::FocusHandle {\n self.focus_handle.clone()\n }\n}\n\nimpl Render for DropdownButtonStory {\n fn render(&mut self, _: &mut Window, cx: &mut Context) -> impl IntoElement {\n let disabled = self.disabled;\n let loading = self.loading;\n let selected = self.selected;\n let compact = self.compact;\n\n v_flex()\n .gap_6()\n .child(\n h_flex()\n .gap_3()\n .child(\n Checkbox::new(\"disabled-button\")\n .label(\"Disabled\")\n .checked(self.disabled)\n .on_click(cx.listener(|view, _, _, cx| {\n view.disabled = !view.disabled;\n cx.notify();\n })),\n )\n .child(\n Checkbox::new(\"loading-button\")\n .label(\"Loading\")\n .checked(self.loading)\n .on_click(cx.listener(|view, _, _, cx| {\n view.loading = !view.loading;\n cx.notify();\n })),\n )\n .child(\n Checkbox::new(\"selected-button\")\n .label(\"Selected\")\n .checked(self.selected)\n .on_click(cx.listener(|view, _, _, cx| {\n view.selected = !view.selected;\n cx.notify();\n })),\n )\n .child(\n Checkbox::new(\"compact-button\")\n .label(\"Compact\")\n .checked(self.compact)\n .on_click(cx.listener(|view, _, _, cx| {\n view.compact = !view.compact;\n cx.notify();\n })),\n )\n .child(\n Checkbox::new(\"shadow-button\")\n .label(\"Shadow\")\n .checked(cx.theme().shadow)\n .on_click(cx.listener(|_, _, window, cx| {\n let mut theme = cx.theme().clone();\n theme.shadow = !theme.shadow;\n cx.set_global::(theme);\n window.refresh();\n })),\n ),\n )\n .child(\n section(\"Dropdown Button\").child(\n DropdownButton::new(\"btn0\")\n .primary()\n .button(Button::new(\"btn\").label(\"Primary Dropdown\"))\n .when(self.compact, |this| this.compact())\n .loading(self.loading)\n .disabled(self.disabled)\n .selected(selected)\n .dropdown_menu_with_anchor(Corner::BottomRight, move |this, _, _| {\n this.menu_with_check(\n \"Disabled\",\n disabled,\n Box::new(ButtonAction::Disabled),\n )\n .menu_with_check(\"Loading\", loading, Box::new(ButtonAction::Loading))\n .menu_with_check(\"Selected\", selected, Box::new(ButtonAction::Selected))\n .menu_with_check(\n \"Compact\",\n compact,\n Box::new(ButtonAction::Compact),\n )\n }),\n ),\n )\n .child(\n section(\"Small Size\").child(\n DropdownButton::new(\"btn-sm\")\n .small()\n .button(Button::new(\"btn\").label(\"Small Dropdown\"))\n .when(self.compact, |this| this.compact())\n .loading(self.loading)\n .disabled(self.disabled)\n .selected(selected)\n .dropdown_menu(move |this, _, _| {\n this.menu_with_check(\n \"Disabled\",\n disabled,\n Box::new(ButtonAction::Disabled),\n )\n .menu_with_check(\"Loading\", loading, Box::new(ButtonAction::Loading))\n .menu_with_check(\"Selected\", selected, Box::new(ButtonAction::Selected))\n .menu_with_check(\n \"Compact\",\n compact,\n Box::new(ButtonAction::Compact),\n )\n }),\n ),\n )\n .child(\n section(\"Outline\").child(\n DropdownButton::new(\"btn-outline\")\n .outline()\n .danger()\n .button(Button::new(\"btn\").label(\"Outline Dropdown\"))\n .when(self.compact, |this| this.compact())\n .loading(self.loading)\n .disabled(self.disabled)\n .selected(selected)\n .dropdown_menu(move |this, _, _| {\n this.menu_with_check(\n \"Disabled\",\n disabled,\n Box::new(ButtonAction::Disabled),\n )\n .menu_with_check(\"Loading\", loading, Box::new(ButtonAction::Loading))\n .menu_with_check(\"Selected\", selected, Box::new(ButtonAction::Selected))\n .menu_with_check(\n \"Compact\",\n compact,\n Box::new(ButtonAction::Compact),\n )\n }),\n ),\n )\n .child(\n section(\"Ghost\").child(\n DropdownButton::new(\"btn-ghost\")\n .ghost()\n .button(Button::new(\"btn\").label(\"Ghost Dropdown\"))\n .when(self.compact, |this| this.compact())\n .loading(self.loading)\n .disabled(self.disabled)\n .selected(selected)\n .dropdown_menu(move |this, _, _| {\n this.menu_with_check(\n \"Disabled\",\n disabled,\n Box::new(ButtonAction::Disabled),\n )\n .menu_with_check(\"Loading\", loading, Box::new(ButtonAction::Loading))\n .menu_with_check(\"Selected\", selected, Box::new(ButtonAction::Selected))\n .menu_with_check(\n \"Compact\",\n compact,\n Box::new(ButtonAction::Compact),\n )\n }),\n ),\n )\n }\n}\n" }, { "path": "crates/story/src/stories/editor_story.rs", "content": "use gpui::{App, AppContext as _, Context, Entity, IntoElement, Render, Styled, Window};\n\nuse gpui_component::input::*;\n\nconst EXAMPLE_CODE: &str = include_str!(\"./editor_story.rs\");\n\npub struct EditorStory {\n editor_state: Entity,\n}\n\nimpl super::Story for EditorStory {\n fn title() -> &'static str {\n \"Editor\"\n }\n\n fn description() -> &'static str {\n \"Code editor with syntax highlighting by tree-sitter.\"\n }\n\n fn closable() -> bool {\n false\n }\n\n fn new_view(window: &mut Window, cx: &mut App) -> Entity {\n Self::view(window, cx)\n }\n}\n\nimpl EditorStory {\n pub fn view(window: &mut Window, cx: &mut App) -> Entity {\n cx.new(|cx| Self::new(window, cx))\n }\n\n fn new(window: &mut Window, cx: &mut Context) -> Self {\n let editor_state = cx.new(|cx| {\n InputState::new(window, cx)\n .code_editor(\"rust\")\n .multi_line(true)\n .tab_size(TabSize {\n tab_size: 4,\n ..Default::default()\n })\n .default_value(EXAMPLE_CODE)\n });\n\n Self { editor_state }\n }\n}\n\nimpl Render for EditorStory {\n fn render(&mut self, _: &mut Window, _: &mut Context) -> impl IntoElement {\n Input::new(&self.editor_state).size_full()\n }\n}\n" }, { "path": "crates/story/src/stories/form_story.rs", "content": "use gpui::{\n App, AppContext, Axis, Context, Entity, FocusHandle, Focusable, InteractiveElement,\n IntoElement, ParentElement as _, Render, Styled, Window, div, prelude::FluentBuilder as _, px,\n};\nuse gpui_component::{\n ActiveTheme, AxisExt, IndexPath, Selectable, Sizable, Size,\n button::{Button, ButtonGroup},\n checkbox::Checkbox,\n color_picker::{ColorPicker, ColorPickerState},\n date_picker::{DatePicker, DatePickerState},\n divider::Divider,\n form::{field, v_form},\n h_flex,\n input::{Input, InputState},\n select::{Select, SelectState},\n switch::Switch,\n v_flex,\n};\n\npub struct FormStory {\n focus_handle: FocusHandle,\n name_prefix_state: Entity>>,\n name_input: Entity,\n email_input: Entity,\n bio_input: Entity,\n color_state: Entity,\n subscribe_email: bool,\n date: Entity,\n layout: Axis,\n size: Size,\n columns: usize,\n}\n\nimpl super::Story for FormStory {\n fn title() -> &'static str {\n \"Form\"\n }\n\n fn description() -> &'static str {\n \"Form to collect multiple inputs.\"\n }\n\n fn closable() -> bool {\n false\n }\n\n fn new_view(window: &mut Window, cx: &mut App) -> Entity {\n Self::view(window, cx)\n }\n}\n\nimpl FormStory {\n pub fn view(window: &mut Window, cx: &mut App) -> Entity {\n cx.new(|cx| Self::new(window, cx))\n }\n\n fn new(window: &mut Window, cx: &mut Context) -> Self {\n let name_prefix_state = cx.new(|cx| {\n SelectState::new(\n vec![\n \"Mr.\".to_string(),\n \"Mrs.\".to_string(),\n \"Ms.\".to_string(),\n \"Dr.\".to_string(),\n ],\n Some(IndexPath::default()),\n window,\n cx,\n )\n });\n\n let name_input = cx.new(|cx| InputState::new(window, cx).default_value(\"Jason Lee\"));\n let color_state = cx.new(|cx| ColorPickerState::new(window, cx));\n\n let email_input =\n cx.new(|cx| InputState::new(window, cx).placeholder(\"Enter text here...\"));\n let bio_input = cx.new(|cx| {\n InputState::new(window, cx)\n .auto_grow(5, 20)\n .placeholder(\"Enter text here...\")\n .default_value(\"Hello 世界，this is GPUI component.\")\n });\n let date = cx.new(|cx| DatePickerState::new(window, cx));\n\n Self {\n focus_handle: cx.focus_handle(),\n name_prefix_state,\n name_input,\n email_input,\n bio_input,\n date,\n color_state,\n subscribe_email: false,\n layout: Axis::Vertical,\n size: Size::default(),\n columns: 1,\n }\n }\n}\n\nimpl Focusable for FormStory {\n fn focus_handle(&self, _: &gpui::App) -> gpui::FocusHandle {\n self.focus_handle.clone()\n }\n}\n\nimpl Render for FormStory {\n fn render(&mut self, _: &mut Window, cx: &mut Context) -> impl IntoElement {\n let is_multi_column = self.columns > 1;\n let is_horizontal = self.layout.is_horizontal();\n\n v_flex()\n .id(\"form-story\")\n .size_full()\n .p_4()\n .justify_start()\n .gap_3()\n .child(\n h_flex()\n .gap_3()\n .flex_wrap()\n .justify_between()\n .child(\n h_flex()\n .gap_x_3()\n .child(\n Switch::new(\"layout\")\n .checked(self.layout.is_horizontal())\n .label(\"Horizontal\")\n .on_click(cx.listener(|this, checked: &bool, _, cx| {\n if *checked {\n this.layout = Axis::Horizontal;\n } else {\n this.layout = Axis::Vertical;\n }\n cx.notify();\n })),\n )\n .child(\n Switch::new(\"column\")\n .checked(self.columns > 1)\n .label(\"Multi Columns\")\n .on_click(cx.listener(|this, checked: &bool, _, cx| {\n if *checked {\n this.columns = 2;\n } else {\n this.columns = 1;\n }\n cx.notify();\n })),\n ),\n )\n .child(\n ButtonGroup::new(\"size\")\n .outline()\n .small()\n .child(\n Button::new(\"large\")\n .selected(self.size == Size::Large)\n .child(\"Large\"),\n )\n .child(\n Button::new(\"medium\")\n .child(\"Medium\")\n .selected(self.size == Size::Medium),\n )\n .child(\n Button::new(\"small\")\n .child(\"Small\")\n .selected(self.size == Size::Small),\n )\n .on_click(cx.listener(|this, selecteds: &Vec, _, cx| {\n if selecteds.contains(&0) {\n this.size = Size::Large;\n } else if selecteds.contains(&1) {\n this.size = Size::Medium;\n } else if selecteds.contains(&2) {\n this.size = Size::Small;\n }\n cx.notify();\n })),\n ),\n )\n .child(Divider::horizontal())\n .child(\n v_form()\n .layout(self.layout)\n .with_size(self.size)\n .columns(self.columns)\n .label_width(px(if is_multi_column { 100. } else { 140. }))\n .child(\n field().label_fn(|_, _| \"Name\").child(\n h_flex()\n .gap_2()\n .border_1()\n .border_color(cx.theme().input)\n .bg(cx.theme().input_background())\n .rounded(cx.theme().radius)\n .child(\n div().w(px(90.)).child(\n Select::new(&self.name_prefix_state)\n .pr_0()\n .appearance(false),\n ),\n )\n .child(\n div().flex_1().child(\n Input::new(&self.name_input).pl_0().appearance(false),\n ),\n ),\n ),\n )\n .child(\n field()\n .label(\"Email\")\n .child(Input::new(&self.email_input))\n .required(true),\n )\n .child(\n field()\n .label(\"Bio\")\n .when(self.layout.is_vertical(), |this| this.items_start())\n .child(Input::new(&self.bio_input))\n .description_fn(|_, _| {\n div().child(\"Use at most 100 words to describe yourself.\")\n }),\n )\n .child(\n field()\n .label_indent(false)\n .when(is_multi_column, |this| this.col_span(2))\n .child(\"This is a full width form field.\"),\n )\n .child(\n field()\n .label(\"Please select your birthday\")\n .description(\"Select your birthday, we will send you a gift.\")\n .child(DatePicker::new(&self.date)),\n )\n .child(\n field()\n .when(is_horizontal && is_multi_column, |this| {\n this.label_indent(false)\n })\n .when(is_multi_column, |this| this.col_start(1))\n .child(\n Switch::new(\"subscribe-newsletter\")\n .label(\"Subscribe our newsletter\")\n .checked(self.subscribe_email)\n .on_click(cx.listener(|this, checked: &bool, _, cx| {\n this.subscribe_email = *checked;\n cx.notify();\n })),\n ),\n )\n .child(\n field()\n .when(is_horizontal && is_multi_column, |this| {\n this.label_indent(false)\n })\n .child(\n ColorPicker::new(&self.color_state)\n .small()\n .label(\"Theme color\"),\n ),\n )\n .child(\n field()\n .when(is_horizontal && is_multi_column, |this| {\n this.label_indent(false)\n })\n .child(\n Checkbox::new(\"use-vertical-layout\")\n .label(\"Vertical layout\")\n .checked(self.layout.is_vertical())\n .on_click(cx.listener(|this, checked: &bool, _, cx| {\n this.layout = if *checked {\n Axis::Vertical\n } else {\n Axis::Horizontal\n };\n cx.notify();\n })),\n ),\n ),\n )\n }\n}\n" }, { "path": "crates/story/src/stories/group_box_story.rs", "content": "use gpui::{\n App, AppContext, Context, Entity, Focusable, IntoElement, ParentElement, Render,\n StyleRefinement, Styled, Window, relative,\n};\n\nuse gpui_component::{\n ActiveTheme as _, StyledExt,\n button::{Button, ButtonVariants},\n checkbox::Checkbox,\n group_box::{GroupBox, GroupBoxVariants as _},\n h_flex,\n radio::{Radio, RadioGroup},\n switch::Switch,\n text::markdown,\n v_flex,\n};\n\nuse crate::section;\n\npub struct GroupBoxStory {\n focus_handle: gpui::FocusHandle,\n}\n\nimpl super::Story for GroupBoxStory {\n fn title() -> &'static str {\n \"GroupBox\"\n }\n\n fn description() -> &'static str {\n \"A styled container element that with an optional title \\\n to groups related content together.\"\n }\n\n fn new_view(window: &mut Window, cx: &mut App) -> Entity {\n Self::view(window, cx)\n }\n}\n\nimpl GroupBoxStory {\n pub fn view(window: &mut Window, cx: &mut App) -> Entity {\n cx.new(|cx| Self::new(window, cx))\n }\n\n fn new(_: &mut Window, cx: &mut Context) -> Self {\n Self {\n focus_handle: cx.focus_handle(),\n }\n }\n}\n\nimpl Focusable for GroupBoxStory {\n fn focus_handle(&self, _: &gpui::App) -> gpui::FocusHandle {\n self.focus_handle.clone()\n }\n}\n\nimpl Render for GroupBoxStory {\n fn render(&mut self, _: &mut Window, cx: &mut Context) -> impl IntoElement {\n v_flex()\n .size_full()\n .justify_center()\n .gap_4()\n .child(\n section(\"Default Style\").w_128().child(\n GroupBox::new()\n .child(\"Subscriptions\")\n .child(Checkbox::new(\"all\").label(\"All\"))\n .child(Checkbox::new(\"news-letter\").label(\"News Letter\"))\n .child(Checkbox::new(\"account-activity\").label(\"Account Activity\"))\n .child(Button::new(\"ok\").primary().label(\"Update Subscriptions\")),\n ),\n )\n .child(\n section(\"Fill Style\").w_128().child(\n GroupBox::new()\n .id(\"activity\")\n .fill()\n .title(\"Contributions & activity\")\n .child(\n h_flex()\n .justify_between()\n .child(\"Make profile private and hide activity\")\n .child(Switch::new(\"toggle-0\").checked(true)),\n )\n .child(\n h_flex()\n .justify_between()\n .child(\"Include private contributions on my profile\")\n .child(Switch::new(\"toggle-1\").checked(false)),\n )\n .child(Button::new(\"btn-1\").primary().label(\"Save\")),\n ),\n )\n .child(\n section(\"Outline Style\").w_128().child(\n GroupBox::new()\n .id(\"appearance\")\n .outline()\n .title(\"Appearance\")\n .child(\n RadioGroup::vertical(\"theme\")\n .child(Radio::new(\"light\").label(\"Light\"))\n .child(Radio::new(\"dark\").label(\"Dark\"))\n .child(Radio::new(\"system\").label(\"System\")),\n ),\n ),\n )\n .child(\n section(\"Without Title\").w_128().child(\n GroupBox::new().outline().child(\n h_flex()\n .justify_between()\n .child(\"Make profile private and hide activity\")\n .child(Switch::new(\"toggle-1\").checked(true)),\n ),\n ),\n )\n .child(\n section(\"Custom style\").w_128().child(\n GroupBox::new()\n .outline()\n .bg(cx.theme().group_box)\n .rounded_xl()\n .p_5()\n .title(\"This is a custom style\")\n .title_style(\n StyleRefinement::default()\n .font_semibold()\n .line_height(relative(1.0))\n .px_3(),\n )\n .content_style(\n StyleRefinement::default()\n .rounded_xl()\n .py_3()\n .px_4()\n .border_2(),\n )\n .child(markdown(\n \"You can use `title_style` to customize the style \\\n of the title. \\n \\\n And any style in `GroupBox` will apply to the content container.\",\n )),\n ),\n )\n }\n}\n" }, { "path": "crates/story/src/stories/hover_card_story.rs", "content": "use gpui::{\n App, AppContext as _, Context, Entity, IntoElement, ParentElement as _, Render, Styled as _,\n Window, div, px, relative,\n};\nuse gpui_component::{\n ActiveTheme, Anchor, StyledExt, avatar::Avatar, button::Button, h_flex, hover_card::HoverCard,\n v_flex,\n};\nuse std::time::Duration;\n\nuse crate::{Story, section};\n\npub struct HoverCardStory {}\n\nimpl HoverCardStory {\n fn new(_: &mut Window, _: &mut Context) -> Self {\n Self {}\n }\n\n pub fn view(window: &mut Window, cx: &mut App) -> Entity {\n cx.new(|cx| Self::new(window, cx))\n }\n}\n\nimpl Render for HoverCardStory {\n fn render(&mut self, _: &mut Window, cx: &mut Context) -> impl IntoElement {\n v_flex()\n .gap_6()\n .child(self.render_basic_example(cx))\n .child(self.render_user_profile_example(cx))\n .child(self.render_custom_timing_example(cx))\n .child(self.render_positioning_examples(cx))\n }\n}\n\nimpl HoverCardStory {\n /// Basic hover card example\n fn render_basic_example(&self, cx: &mut Context) -> impl IntoElement {\n section(\"Basic\").child(\n HoverCard::new(\"basic\")\n .trigger(\n div()\n .child(\"Hover over me\")\n .text_color(cx.theme().primary)\n .cursor_pointer()\n .text_sm(),\n )\n .child(\n v_flex()\n .gap_1()\n .w(px(450.))\n .child(\n div()\n .child(\"This is a hover card\")\n .font_semibold()\n .text_sm(),\n )\n .child(\n div()\n .child(\"You can display rich content when hovering over a trigger element.\")\n .text_color(cx.theme().muted_foreground)\n .text_sm(),\n ),\n ),\n )\n }\n\n fn render_user_profile_example(&self, cx: &mut Context) -> impl IntoElement {\n section(\"User Profile Preview\").child(\n h_flex()\n .child(\"Hover over \")\n .child(\n HoverCard::new(\"user-profile\")\n .trigger(\n div()\n .child(\"@huacnlee\")\n .cursor_pointer()\n .text_color(cx.theme().link),\n )\n .content(|_, _, cx| {\n h_flex()\n .w(px(320.))\n .gap_3()\n .items_start()\n .child(\n Avatar::new()\n .src(\"https://avatars.githubusercontent.com/u/5518?s=64\"),\n )\n .child(\n v_flex()\n .gap_1()\n .line_height(relative(1.))\n .child(div().child(\"Jason Lee\").font_semibold())\n .child(\n div()\n .child(\"@huacnlee\")\n .text_color(cx.theme().link)\n .text_sm(),\n )\n .child(div().mt_1().child(\"The author of GPUI Component.\")),\n )\n }),\n )\n .child(\" to see their profile\"),\n )\n }\n\n /// Custom timing configuration example\n fn render_custom_timing_example(&self, _: &mut Context) -> impl IntoElement {\n section(\"Custom Timing\").child(\n h_flex()\n .gap_4()\n .child(\n HoverCard::new(\"fast-open\")\n .open_delay(Duration::from_millis(200))\n .close_delay(Duration::from_millis(100))\n .trigger(Button::new(\"fast\").label(\"Fast Open (200ms)\").outline())\n .child(div().child(\"This hover card opens after 200ms\").text_sm()),\n )\n .child(\n HoverCard::new(\"slow-open\")\n .open_delay(Duration::from_secs(1))\n .close_delay(Duration::from_secs_f32(0.5))\n .trigger(Button::new(\"slow\").label(\"Slow Open (1000ms)\").outline())\n .child(div().child(\"This hover card opens after 1000ms\").text_sm()),\n ),\n )\n }\n\n /// All positioning options\n fn render_positioning_examples(&self, _: &mut Context) -> impl IntoElement {\n section(\"Positioning\").child(\n v_flex()\n .gap_4()\n .items_center()\n .justify_center()\n .child(\n h_flex()\n .gap_4()\n .child(\n HoverCard::new(\"anchor-top-left\")\n .anchor(Anchor::TopLeft)\n .trigger(Button::new(\"tl\").label(\"Top Left\").outline())\n .child(div().child(\"Positioned at Top Left\").text_sm()),\n )\n .child(\n HoverCard::new(\"anchor-top-center\")\n .anchor(Anchor::TopCenter)\n .trigger(Button::new(\"tc\").label(\"Top Center\").outline())\n .child(div().child(\"Positioned at Top Center\").text_sm()),\n )\n .child(\n HoverCard::new(\"anchor-top-right\")\n .anchor(Anchor::TopRight)\n .trigger(Button::new(\"tr\").label(\"Top Right\").outline())\n .child(div().child(\"Positioned at Top Right\").text_sm()),\n ),\n )\n // Bottom row\n .child(\n h_flex()\n .gap_4()\n .child(\n HoverCard::new(\"anchor-bottom-left\")\n .anchor(Anchor::BottomLeft)\n .trigger(Button::new(\"bl\").label(\"Bottom Left\").outline())\n .child(div().child(\"Positioned at Bottom Left\").text_sm()),\n )\n .child(\n HoverCard::new(\"anchor-bottom-center\")\n .anchor(Anchor::BottomCenter)\n .trigger(Button::new(\"bc\").label(\"Bottom Center\").outline())\n .child(div().child(\"Positioned at Bottom Center\").text_sm()),\n )\n .child(\n HoverCard::new(\"anchor-bottom-right\")\n .anchor(Anchor::BottomRight)\n .trigger(Button::new(\"br\").label(\"Bottom Right\").outline())\n .child(div().child(\"Positioned at Bottom Right\").text_sm()),\n ),\n ),\n )\n }\n}\n\nimpl Story for HoverCardStory {\n fn title() -> &'static str {\n \"HoverCard\"\n }\n\n fn description() -> &'static str {\n \"A hover card displays content when hovering over a trigger element, with configurable delays.\"\n }\n\n fn new_view(window: &mut Window, cx: &mut App) -> Entity {\n Self::view(window, cx)\n }\n}\n" }, { "path": "crates/story/src/stories/icon_story.rs", "content": "use gpui::{\n App, AppContext, Context, Entity, FocusHandle, Focusable, IntoElement, ParentElement, Render,\n Styled, Window,\n};\nuse gpui_component::{\n button::{Button, ButtonVariant, ButtonVariants},\n dock::PanelControl,\n h_flex, neutral_500, v_flex, ActiveTheme as _, Icon, IconName, Sizable,\n};\n\nuse crate::section;\n\npub struct IconStory {\n focus_handle: gpui::FocusHandle,\n}\n\nimpl IconStory {\n fn new(_: &mut Window, cx: &mut Context) -> Self {\n Self {\n focus_handle: cx.focus_handle(),\n }\n }\n\n pub fn view(window: &mut Window, cx: &mut App) -> Entity {\n cx.new(|cx| Self::new(window, cx))\n }\n}\n\nimpl super::Story for IconStory {\n fn title() -> &'static str {\n \"Icon\"\n }\n\n fn description() -> &'static str {\n \"SVG Icons based on Lucide.dev\"\n }\n\n fn new_view(window: &mut Window, cx: &mut App) -> Entity {\n Self::view(window, cx)\n }\n\n fn zoomable() -> Option {\n None\n }\n}\n\nimpl Focusable for IconStory {\n fn focus_handle(&self, _: &App) -> FocusHandle {\n self.focus_handle.clone()\n }\n}\n\nimpl Render for IconStory {\n fn render(&mut self, _: &mut Window, cx: &mut Context) -> impl IntoElement {\n v_flex()\n .gap_4()\n .child(\n section(\"Icon\")\n .text_lg()\n .child(IconName::Info)\n .child(IconName::Map)\n .child(IconName::Bot)\n .child(IconName::Github)\n .child(IconName::Calendar)\n .child(IconName::Globe)\n .child(IconName::Heart),\n )\n .child(\n section(\"Color Icon\")\n .child(\n Icon::new(IconName::Maximize)\n .size_6()\n .text_color(cx.theme().green),\n )\n .child(\n Icon::new(IconName::Minimize)\n .size_6()\n .text_color(cx.theme().red),\n ),\n )\n .child(\n section(\"Icon Button\").child(\n h_flex()\n .gap_4()\n .child(\n Button::new(\"like1\")\n .icon(\n Icon::new(IconName::Heart)\n .text_color(neutral_500())\n .size_6(),\n )\n .with_variant(ButtonVariant::Ghost),\n )\n .child(\n Button::new(\"like2\")\n .icon(\n Icon::new(IconName::HeartOff)\n .text_color(cx.theme().red)\n .size_6(),\n )\n .with_variant(ButtonVariant::Ghost),\n )\n .child(\n Button::new(\"like3\")\n .icon(\n Icon::new(IconName::Heart)\n .text_color(cx.theme().green)\n .size_6(),\n )\n .with_variant(ButtonVariant::Ghost),\n ),\n ),\n )\n .child(\n section(\"Button with size\").child(\n Button::new(\"button-with-size\")\n .outline()\n .size_5()\n .small()\n .px_0()\n .label(\"10\"),\n ),\n )\n }\n}\n" }, { "path": "crates/story/src/stories/image_story.rs", "content": "use crate::section;\nuse gpui::{\n App, AppContext, Context, Entity, FocusHandle, Focusable, IntoElement, ParentElement as _,\n Render, Styled, Window, img,\n};\nuse gpui_component::{dock::PanelControl, v_flex};\n\npub struct ImageStory {\n focus_handle: gpui::FocusHandle,\n}\n\nimpl super::Story for ImageStory {\n fn title() -> &'static str {\n \"Image\"\n }\n\n fn description() -> &'static str {\n \"Image and SVG image supported.\"\n }\n\n fn new_view(window: &mut Window, cx: &mut App) -> Entity {\n Self::view(window, cx)\n }\n\n fn zoomable() -> Option {\n Some(PanelControl::Toolbar)\n }\n}\n\nimpl ImageStory {\n pub fn new(_: &mut Window, cx: &mut App) -> Self {\n Self {\n focus_handle: cx.focus_handle(),\n }\n }\n\n pub fn view(window: &mut Window, cx: &mut App) -> Entity {\n cx.new(|cx| Self::new(window, cx))\n }\n}\n\nimpl Focusable for ImageStory {\n fn focus_handle(&self, _: &App) -> FocusHandle {\n self.focus_handle.clone()\n }\n}\n\nimpl Render for ImageStory {\n fn render(&mut self, _: &mut Window, _: &mut Context) -> impl IntoElement {\n v_flex().gap_4().size_full().child(\n section(\"SVG from URL\")\n .child(img(\"https://pub.lbkrs.com/files/202503/vEnnmgUM6bo362ya/sdk.svg\").h_24()),\n )\n }\n}\n" }, { "path": "crates/story/src/stories/input_story.rs", "content": "use gpui::{\n App, AppContext as _, ClickEvent, Context, Entity, InteractiveElement, IntoElement,\n ParentElement as _, Render, Styled, Subscription, Window, div,\n};\n\nuse crate::section;\nuse gpui_component::{button::*, input::*, *};\n\nconst CODE_EXAMPLE: &str = r#\"{\"single_line\":\"code editor\"}\"#;\n\npub fn init(_: &mut App) {}\n\npub struct InputStory {\n input1: Entity,\n input2: Entity,\n input_esc: Entity,\n input_text_centered: Entity,\n input_text_right: Entity,\n mask_input: Entity,\n disabled_input: Entity,\n prefix_input1: Entity,\n suffix_input1: Entity,\n both_input1: Entity,\n large_input: Entity,\n small_input: Entity,\n phone_input: Entity,\n mask_input2: Entity,\n currency_input: Entity,\n custom_input: Entity,\n code_input: Entity,\n\n _subscriptions: Vec,\n}\n\nimpl super::Story for InputStory {\n fn title() -> &'static str {\n \"Input\"\n }\n\n fn closable() -> bool {\n false\n }\n\n fn new_view(window: &mut Window, cx: &mut App) -> Entity {\n Self::view(window, cx)\n }\n}\n\nimpl InputStory {\n pub fn view(window: &mut Window, cx: &mut App) -> Entity {\n cx.new(|cx| Self::new(window, cx))\n }\n\n fn new(window: &mut Window, cx: &mut Context) -> Self {\n let input1 = cx.new(|cx| {\n InputState::new(window, cx)\n .default_value(\"Hello 世界，this is GPUI component, this is a long text.\")\n });\n\n let input2 = cx.new(|cx| InputState::new(window, cx).placeholder(\"Enter text here...\"));\n let input_esc = cx.new(|cx| {\n InputState::new(window, cx)\n .placeholder(\"Enter text and clear it by pressing ESC\")\n .clean_on_escape()\n });\n\n let mask_input = cx.new(|cx| {\n InputState::new(window, cx)\n .masked(true)\n .placeholder(\"Enter your password...\")\n .default_value(\"this-is-password-中文🚀🎉\")\n });\n\n let prefix_input1 =\n cx.new(|cx| InputState::new(window, cx).placeholder(\"Search some thing...\"));\n let suffix_input1 = cx.new(|cx| {\n InputState::new(window, cx)\n .placeholder(\"This input only support [a-zA-Z0-9] characters.\")\n .pattern(regex::Regex::new(r\"^[a-zA-Z0-9]*$\").unwrap())\n });\n let both_input1 = cx.new(|cx| {\n InputState::new(window, cx).placeholder(\"This input have prefix and suffix.\")\n });\n\n let phone_input = cx.new(|cx| InputState::new(window, cx).mask_pattern(\"(999)-999-9999\"));\n let mask_input2 = cx.new(|cx| InputState::new(window, cx).mask_pattern(\"AAA-###-AAA\"));\n let currency_input = cx.new(|cx| {\n InputState::new(window, cx).mask_pattern(MaskPattern::Number {\n separator: Some(','),\n fraction: Some(3),\n })\n });\n let custom_input = cx.new(|cx| {\n InputState::new(window, cx).placeholder(\"Custom Input use monospace, 0123456789.\")\n });\n\n let code_input = cx.new(|cx| {\n InputState::new(window, cx)\n .code_editor(\"json\")\n .multi_line(false)\n .show_whitespaces(true)\n .default_value(CODE_EXAMPLE)\n });\n\n let input_text_centered = cx.new(|cx| {\n InputState::new(window, cx)\n .placeholder(\"Enter text to test center layout...\")\n .default_value(\"Centered Text\")\n });\n\n let input_text_right = cx.new(|cx| {\n InputState::new(window, cx)\n .placeholder(\"Enter text to test right layout...\")\n .default_value(\"Right Aligned Text\")\n });\n\n let _subscriptions = vec![\n cx.subscribe_in(&input1, window, Self::on_input_event),\n cx.subscribe_in(&input2, window, Self::on_input_event),\n cx.subscribe_in(&phone_input, window, Self::on_input_event),\n ];\n\n Self {\n input1,\n input2,\n input_esc,\n mask_input,\n disabled_input: cx\n .new(|cx| InputState::new(window, cx).default_value(\"This is disabled input\")),\n large_input: cx.new(|cx| InputState::new(window, cx).placeholder(\"Large input\")),\n small_input: cx.new(|cx| {\n InputState::new(window, cx)\n .validate(|s, _| s.parse::().is_ok())\n .placeholder(\"validate to limit float number.\")\n }),\n prefix_input1,\n suffix_input1,\n both_input1,\n phone_input,\n mask_input2,\n currency_input,\n custom_input,\n code_input,\n input_text_centered,\n input_text_right,\n _subscriptions,\n }\n }\n\n fn on_input_event(\n &mut self,\n state: &Entity,\n event: &InputEvent,\n window: &mut Window,\n cx: &mut Context,\n ) {\n match event {\n InputEvent::Change => {\n let text = state.read(cx).value();\n if state == &self.input2 {\n println!(\"Set disabled value: {}\", text);\n self.disabled_input.update(cx, |this, cx| {\n this.set_value(text, window, cx);\n })\n } else {\n println!(\"Change: {}\", text)\n }\n }\n InputEvent::PressEnter { secondary } => println!(\"PressEnter secondary: {}\", secondary),\n InputEvent::Focus => println!(\"Focus\"),\n InputEvent::Blur => println!(\"Blur\"),\n };\n }\n\n fn on_click_reset(&mut self, _: &ClickEvent, window: &mut Window, cx: &mut Context) {\n self.code_input.update(cx, |input_state, cx| {\n input_state.set_value(CODE_EXAMPLE, window, cx);\n });\n }\n}\n\nimpl Render for InputStory {\n fn render(&mut self, window: &mut Window, cx: &mut Context) -> impl IntoElement {\n v_flex()\n .id(\"input-story\")\n .size_full()\n .justify_start()\n .gap_3()\n .child(\n section(\"Normal Input\")\n .max_w_md()\n .child(Input::new(&self.input1).cleanable(true))\n .child(Input::new(&self.input2)),\n )\n .child(\n section(\"Input State\")\n .max_w_md()\n .child(Input::new(&self.disabled_input).disabled(true))\n .child(Input::new(&self.mask_input).mask_toggle().cleanable(true)),\n )\n .child(\n section(\"Text Align\").max_w_lg().child(\n h_flex()\n .w_full()\n .gap_4()\n .flex_wrap()\n .child(Input::new(&self.input_text_centered).text_center().flex_1())\n .child(Input::new(&self.input_text_right).text_right().flex_1()),\n ),\n )\n .child(\n section(\"Prefix and Suffix\")\n .max_w_md()\n .child(\n Input::new(&self.prefix_input1)\n .cleanable(true)\n .prefix(Icon::new(IconName::Search).small()),\n )\n .child(\n Input::new(&self.both_input1)\n .cleanable(true)\n .prefix(div().child(Icon::new(IconName::Search).small()))\n .suffix(Button::new(\"info\").ghost().icon(IconName::Info).xsmall()),\n )\n .child(\n Input::new(&self.suffix_input1)\n .cleanable(true)\n .suffix(Button::new(\"info\").ghost().icon(IconName::Info).xsmall()),\n ),\n )\n .child(\n section(\"Currency Input with thousands separator\")\n .max_w_md()\n .child(Input::new(&self.currency_input))\n .child(\n div().child(format!(\"Value: {:?}\", self.currency_input.read(cx).value())),\n ),\n )\n .child(\n section(\"Input with mask pattern: (999)-999-9999\")\n .max_w_md()\n .child(Input::new(&self.phone_input))\n .child(\n v_flex()\n .child(format!(\"Value: {:?}\", self.phone_input.read(cx).value()))\n .child(format!(\n \"Unmask Value: {:?}\",\n self.phone_input.read(cx).unmask_value()\n )),\n ),\n )\n .child(\n section(\"Input with mask pattern: AAA-###-AAA\")\n .max_w_md()\n .child(Input::new(&self.mask_input2))\n .child(\n v_flex()\n .child(format!(\"Value: {:?}\", self.mask_input2.read(cx).value()))\n .child(format!(\n \"Unmask Value: {:?}\",\n self.mask_input2.read(cx).unmask_value()\n )),\n ),\n )\n .child(\n section(\"Input Size\")\n .max_w_md()\n .child(Input::new(&self.large_input).large())\n .child(Input::new(&self.small_input).small()),\n )\n .child(\n section(\"Cleanable and ESC to clean\")\n .max_w_md()\n .child(Input::new(&self.input_esc).cleanable(true)),\n )\n .child(\n section(\"Focused Input\")\n .max_w_md()\n .whitespace_normal()\n .overflow_hidden()\n .child(div().child(format!(\n \"Value: {:?}\",\n window.focused_input(cx).map(|input| input.read(cx).value())\n ))),\n )\n .child(\n section(\"Custom Appearance\").max_w_md().child(\n div()\n .border_b_2()\n .px_6()\n .py_3()\n .font_family(cx.theme().mono_font_family.clone())\n .border_color(cx.theme().border)\n .bg(cx.theme().secondary)\n .text_color(cx.theme().secondary_foreground)\n .w_full()\n .child(Input::new(&self.custom_input).appearance(false)),\n ),\n )\n .child(\n section(\"Single line code editor\").max_w_md().child(\n Input::new(&self.code_input).suffix(\n Button::new(\"code-reset\")\n .ghost()\n .label(\"Reset\")\n .xsmall()\n .on_click(cx.listener(Self::on_click_reset)),\n ),\n ),\n )\n }\n}\n" }, { "path": "crates/story/src/stories/kbd_story.rs", "content": "use gpui::{\n App, AppContext, Context, Entity, Focusable, IntoElement, Keystroke, ParentElement, Render,\n Styled, Window,\n};\n\nuse gpui_component::{h_flex, kbd::Kbd, v_flex};\n\nuse crate::section;\n\npub struct KbdStory {\n focus_handle: gpui::FocusHandle,\n}\n\nimpl super::Story for KbdStory {\n fn title() -> &'static str {\n \"Kbd\"\n }\n\n fn description() -> &'static str {\n \"A tag style to display keyboard shortcuts\"\n }\n\n fn new_view(window: &mut Window, cx: &mut App) -> Entity {\n Self::view(window, cx)\n }\n}\n\nimpl KbdStory {\n pub(crate) fn new(_: &mut Window, cx: &mut App) -> Self {\n Self {\n focus_handle: cx.focus_handle(),\n }\n }\n\n pub fn view(window: &mut Window, cx: &mut App) -> Entity {\n cx.new(|cx| Self::new(window, cx))\n }\n}\nimpl Focusable for KbdStory {\n fn focus_handle(&self, _: &gpui::App) -> gpui::FocusHandle {\n self.focus_handle.clone()\n }\n}\nimpl Render for KbdStory {\n fn render(&mut self, _: &mut Window, _: &mut Context) -> impl IntoElement {\n v_flex()\n .gap_6()\n .child(\n section(\"Kbd\").child(\n h_flex()\n .gap_2()\n .child(Kbd::new(Keystroke::parse(\"cmd-shift-p\").unwrap()))\n .child(Kbd::new(Keystroke::parse(\"cmd-ctrl-t\").unwrap()))\n .child(Kbd::new(Keystroke::parse(\"cmd--\").unwrap()))\n .child(Kbd::new(Keystroke::parse(\"cmd-+\").unwrap()))\n .child(Kbd::new(Keystroke::parse(\"escape\").unwrap()))\n .child(Kbd::new(Keystroke::parse(\"backspace\").unwrap()))\n .child(Kbd::new(Keystroke::parse(\"/\").unwrap()))\n .child(Kbd::new(Keystroke::parse(\"enter\").unwrap())),\n ),\n )\n .child(\n section(\"Outline Style\").child(\n h_flex()\n .gap_2()\n .child(Kbd::new(Keystroke::parse(\"cmd-shift-p\").unwrap()).outline())\n .child(Kbd::new(Keystroke::parse(\"cmd-ctrl-t\").unwrap()).outline())\n .child(Kbd::new(Keystroke::parse(\"enter\").unwrap()).outline()),\n ),\n )\n }\n}\n" }, { "path": "crates/story/src/stories/label_story.rs", "content": "use gpui::{\n App, AppContext, Context, Entity, Focusable, IntoElement, ParentElement, Render, SharedString,\n Styled, Subscription, Window, div, px, rems,\n};\n\nuse gpui_component::{\n IconName, StyledExt,\n button::{Button, ButtonVariant, ButtonVariants as _},\n checkbox::Checkbox,\n green_500, h_flex,\n input::{Input, InputEvent, InputState},\n label::{HighlightsMatch, Label},\n v_flex,\n};\n\nuse crate::section;\n\npub struct LabelStory {\n focus_handle: gpui::FocusHandle,\n masked: bool,\n highlights_text: SharedString,\n highlights_input: Entity,\n prefix: bool,\n _subscriptions: Vec,\n}\n\nimpl super::Story for LabelStory {\n fn title() -> &'static str {\n \"Label\"\n }\n\n fn description() -> &'static str {\n \"Label used to display text or other content.\"\n }\n\n fn new_view(window: &mut Window, cx: &mut App) -> Entity {\n Self::view(window, cx)\n }\n}\n\nimpl LabelStory {\n pub(crate) fn new(window: &mut Window, cx: &mut Context) -> Self {\n let highlights_input = cx.new(|cx| {\n InputState::new(window, cx)\n .placeholder(\"Enter text to highlight in the label\")\n .clean_on_escape()\n });\n\n let _subscriptions =\n vec![\n cx.subscribe(&highlights_input, |this, state, e: &InputEvent, cx| {\n if let InputEvent::Change = e {\n this.highlights_text = state.read(cx).value();\n cx.notify();\n }\n }),\n ];\n\n Self {\n focus_handle: cx.focus_handle(),\n masked: false,\n highlights_text: Default::default(),\n highlights_input,\n prefix: false,\n _subscriptions,\n }\n }\n\n pub fn view(window: &mut Window, cx: &mut App) -> Entity {\n cx.new(|cx| Self::new(window, cx))\n }\n\n #[allow(unused)]\n fn on_click(checked: &bool, window: &mut Window, cx: &mut App) {\n println!(\"Check value changed: {}\", checked);\n }\n\n fn highlights_text(&self) -> HighlightsMatch {\n if self.prefix {\n HighlightsMatch::Prefix(self.highlights_text.clone())\n } else {\n HighlightsMatch::Full(self.highlights_text.clone())\n }\n }\n}\nimpl Focusable for LabelStory {\n fn focus_handle(&self, _: &gpui::App) -> gpui::FocusHandle {\n self.focus_handle.clone()\n }\n}\nimpl Render for LabelStory {\n fn render(&mut self, _: &mut Window, cx: &mut Context) -> impl IntoElement {\n let ht = self.highlights_text();\n\n v_flex()\n .gap_6()\n .child(\n h_flex()\n .gap_x_3()\n .child(Input::new(&self.highlights_input).w_1_3())\n .child(\n Checkbox::new(\"prefix\")\n .label(\"Prefix\")\n .checked(self.prefix)\n .on_click(cx.listener(|view, _, _, cx| {\n view.prefix = !view.prefix;\n cx.notify();\n })),\n ),\n )\n .child(\n section(\"Label\").max_w_md().items_start().child(\n v_flex()\n .gap_y_4()\n .child(Label::new(\"This is a label\").highlights(ht.clone()))\n // This case for test match CJK with ASCII, it was has a crash bug before.\n // Try to input \"AA\" to see the highlights effect.\n .child(Label::new(\"AAA中文BB\").highlights(ht.clone())),\n ),\n )\n .child(\n section(\"Label with secondary text\")\n .max_w_md()\n .items_start()\n .child(\n Label::new(\"Company Address\")\n .secondary(\"(optional)\")\n .highlights(ht.clone()),\n ),\n )\n .child(\n section(\"Alignment\").max_w_md().child(\n v_flex()\n .w_full()\n .gap_4()\n .child(Label::new(\"Text align left\").highlights(ht.clone()))\n .child(\n Label::new(\"Text align center\")\n .text_center()\n .highlights(ht.clone()),\n )\n .child(\n Label::new(\"Text align right\")\n .text_right()\n .highlights(ht.clone()),\n ),\n ),\n )\n .child(\n section(\"Label with color\").max_w_md().child(\n Label::new(\"Color Label\")\n .text_color(green_500())\n .highlights(ht.clone()),\n ),\n )\n .child(\n section(\"Font Size\").max_w_md().child(\n Label::new(\"Font Size Label\")\n .text_size(px(20.))\n .font_semibold()\n .line_height(rems(1.8))\n .highlights(ht.clone()),\n ),\n )\n .child(\n section(\"Multi-line, line-height and text wrap\")\n .max_w_md()\n .child(\n div().w(px(200.)).child(\n Label::new(\n \"Label should support text wrap in default, \\\n if the text is too long, it should wrap to the next line.\",\n )\n .line_height(rems(1.8))\n .highlights(ht.clone()),\n ),\n ),\n )\n .child(\n section(\"Masked Label\").max_w_md().child(\n v_flex()\n .w_full()\n .gap_4()\n .child(\n h_flex()\n .child(\n Label::new(\"9,182,1 USD\")\n .text_2xl()\n .masked(self.masked)\n .highlights(ht.clone()),\n )\n .child(\n Button::new(\"btn-mask\")\n .with_variant(ButtonVariant::Ghost)\n .icon(if self.masked {\n IconName::EyeOff\n } else {\n IconName::Eye\n })\n .on_click(cx.listener(|this, _, _, _| {\n this.masked = !this.masked;\n })),\n ),\n )\n .child(\n Label::new(\"500 USD\")\n .text_xl()\n .masked(self.masked)\n .highlights(ht.clone()),\n ),\n ),\n )\n }\n}\n" }, { "path": "crates/story/src/stories/list_story.rs", "content": "use std::{rc::Rc, time::Duration};\n\nuse fake::Fake;\nuse gpui::{\n App, AppContext, Context, ElementId, Entity, FocusHandle, Focusable, InteractiveElement,\n IntoElement, ParentElement, Render, RenderOnce, ScrollStrategy, SharedString, Styled,\n Subscription, Task, Window, actions, div, px,\n};\n\nuse gpui_component::{\n ActiveTheme, Icon, IconName, IndexPath, Selectable, Sizable,\n button::Button,\n checkbox::Checkbox,\n h_flex,\n label::Label,\n list::{List, ListDelegate, ListEvent, ListItem, ListState},\n v_flex,\n};\n\nactions!(list_story, [SelectedCompany]);\n\n#[derive(Clone, Default)]\nstruct Company {\n name: SharedString,\n industry: SharedString,\n last_done: f64,\n prev_close: f64,\n\n change_percent: f64,\n change_percent_str: SharedString,\n last_done_str: SharedString,\n prev_close_str: SharedString,\n // description: String,\n}\n\nimpl Company {\n fn prepare(mut self) -> Self {\n self.change_percent = (self.last_done - self.prev_close) / self.prev_close;\n self.change_percent_str = format!(\"{:.2}%\", self.change_percent).into();\n self.last_done_str = format!(\"{:.2}\", self.last_done).into();\n self.prev_close_str = format!(\"{:.2}\", self.prev_close).into();\n self\n }\n}\n\n#[derive(IntoElement)]\nstruct CompanyListItem {\n base: ListItem,\n company: Rc,\n selected: bool,\n}\n\nimpl CompanyListItem {\n pub fn new(id: impl Into, company: Rc, selected: bool) -> Self {\n CompanyListItem {\n company,\n base: ListItem::new(id).selected(selected),\n selected,\n }\n }\n}\n\nimpl Selectable for CompanyListItem {\n fn selected(mut self, selected: bool) -> Self {\n self.selected = selected;\n self\n }\n\n fn is_selected(&self) -> bool {\n self.selected\n }\n}\n\nimpl RenderOnce for CompanyListItem {\n fn render(self, _: &mut Window, cx: &mut App) -> impl IntoElement {\n let text_color = if self.selected {\n cx.theme().accent_foreground\n } else {\n cx.theme().foreground\n };\n\n let trend_color = match self.company.change_percent {\n change if change > 0.0 => cx.theme().green,\n change if change < 0.0 => cx.theme().red,\n _ => cx.theme().foreground,\n };\n\n self.base\n .px_2()\n .py_1()\n .overflow_x_hidden()\n .border_1()\n .rounded(cx.theme().radius)\n .child(\n h_flex()\n .items_center()\n .justify_between()\n .gap_2()\n .text_color(text_color)\n .child(\n h_flex().gap_2().child(\n v_flex()\n .gap_1()\n .max_w(px(500.))\n .overflow_x_hidden()\n .flex_nowrap()\n .child(Label::new(self.company.name.clone()).whitespace_nowrap()),\n ),\n )\n .child(\n h_flex()\n .gap_2()\n .items_center()\n .justify_end()\n .child(\n div()\n .w(px(65.))\n .text_color(text_color)\n .child(self.company.last_done_str.clone()),\n )\n .child(\n h_flex().w(px(65.)).justify_end().child(\n div()\n .rounded(cx.theme().radius)\n .whitespace_nowrap()\n .text_size(px(12.))\n .px_1()\n .text_color(trend_color)\n .child(self.company.change_percent_str.clone()),\n ),\n ),\n ),\n )\n }\n}\n\nstruct CompanyListDelegate {\n industries: Vec,\n _companies: Vec>,\n matched_companies: Vec>>,\n selected_index: Option,\n confirmed_index: Option,\n query: SharedString,\n loading: bool,\n eof: bool,\n lazy_load: bool,\n}\n\nimpl CompanyListDelegate {\n fn prepare(&mut self, query: impl Into) {\n self.query = query.into();\n let companies: Vec> = self\n ._companies\n .iter()\n .filter(|company| {\n company\n .name\n .to_lowercase()\n .contains(&self.query.to_lowercase())\n })\n .cloned()\n .collect();\n for company in companies.into_iter() {\n if let Some(ix) = self.industries.iter().position(|s| s == &company.industry) {\n self.matched_companies[ix].push(company);\n } else {\n self.industries.push(company.industry.clone());\n self.matched_companies.push(vec![company]);\n }\n }\n }\n\n fn extend_more(&mut self, len: usize) {\n self._companies\n .extend((0..len).map(|_| Rc::new(random_company())));\n self.prepare(self.query.clone());\n }\n\n fn selected_company(&self) -> Option> {\n let Some(ix) = self.selected_index else {\n return None;\n };\n\n self.matched_companies\n .get(ix.section)\n .and_then(|c| c.get(ix.row))\n .cloned()\n }\n}\n\nimpl ListDelegate for CompanyListDelegate {\n type Item = CompanyListItem;\n\n fn sections_count(&self, _: &App) -> usize {\n self.industries.len()\n }\n\n fn items_count(&self, section: usize, _: &App) -> usize {\n if matches!(section, 0 | 2 | 3) {\n // Return some empty sections for testing.\n return 0;\n }\n\n self.matched_companies[section].len()\n }\n\n fn perform_search(\n &mut self,\n query: &str,\n _: &mut Window,\n _: &mut Context>,\n ) -> Task<()> {\n self.prepare(query.to_owned());\n Task::ready(())\n }\n\n fn confirm(&mut self, secondary: bool, window: &mut Window, cx: &mut Context>) {\n println!(\"Confirmed with secondary: {}\", secondary);\n window.dispatch_action(Box::new(SelectedCompany), cx);\n }\n\n fn set_selected_index(\n &mut self,\n ix: Option,\n _: &mut Window,\n cx: &mut Context>,\n ) {\n self.selected_index = ix;\n cx.notify();\n }\n\n fn set_right_clicked_index(\n &mut self,\n ix: Option,\n _: &mut Window,\n _: &mut Context>,\n ) {\n println!(\"right_clicked_index: {:?}\", ix);\n }\n\n fn render_section_header(\n &mut self,\n section: usize,\n _: &mut Window,\n cx: &mut Context>,\n ) -> Option {\n let Some(industry) = self.industries.get(section) else {\n return None;\n };\n\n Some(\n h_flex()\n .pb_1()\n .px_2()\n .gap_2()\n .text_sm()\n .text_color(cx.theme().muted_foreground)\n .child(Icon::new(IconName::Folder))\n .child(industry.clone())\n .child(format!(\"(section: {})\", section)),\n )\n }\n\n fn render_section_footer(\n &mut self,\n section: usize,\n _: &mut Window,\n cx: &mut Context>,\n ) -> Option {\n let Some(_) = self.industries.get(section) else {\n return None;\n };\n\n Some(\n div()\n .pt_1()\n .pb_5()\n .px_2()\n .text_xs()\n .text_color(cx.theme().muted_foreground)\n .child(format!(\n \"Total {} items in section.\",\n self.matched_companies[section].len()\n )),\n )\n }\n\n fn render_item(\n &mut self,\n ix: IndexPath,\n _: &mut Window,\n _: &mut Context>,\n ) -> Option {\n let selected = Some(ix) == self.selected_index || Some(ix) == self.confirmed_index;\n if let Some(company) = self.matched_companies[ix.section].get(ix.row) {\n return Some(CompanyListItem::new(ix, company.clone(), selected));\n }\n\n None\n }\n\n fn loading(&self, _: &App) -> bool {\n self.loading\n }\n\n fn has_more(&self, _: &App) -> bool {\n if self.loading {\n return false;\n }\n\n return !self.eof;\n }\n\n fn load_more_threshold(&self) -> usize {\n 150\n }\n\n fn load_more(&mut self, window: &mut Window, cx: &mut Context>) {\n if !self.lazy_load {\n return;\n }\n\n cx.spawn_in(window, async move |view, window| {\n // Simulate network request, delay 1s to load data.\n window\n .background_executor()\n .timer(Duration::from_secs(1))\n .await;\n\n _ = view.update_in(window, move |view, window, cx| {\n let query = view.delegate().query.clone();\n view.delegate_mut().extend_more(200);\n _ = view.delegate_mut().perform_search(&query, window, cx);\n view.delegate_mut().eof = view.delegate()._companies.len() >= 6000;\n });\n })\n .detach();\n }\n}\n\npub struct ListStory {\n focus_handle: FocusHandle,\n company_list: Entity>,\n selected_company: Option>,\n selectable: bool,\n searchable: bool,\n _subscriptions: Vec,\n}\n\nimpl super::Story for ListStory {\n fn title() -> &'static str {\n \"List\"\n }\n\n fn description() -> &'static str {\n \"A list displays a series of items.\"\n }\n\n fn new_view(window: &mut Window, cx: &mut App) -> Entity {\n Self::view(window, cx)\n }\n}\n\nimpl ListStory {\n pub fn view(window: &mut Window, cx: &mut App) -> Entity {\n cx.new(|cx| Self::new(window, cx))\n }\n\n fn new(window: &mut Window, cx: &mut Context) -> Self {\n let mut delegate = CompanyListDelegate {\n industries: vec![],\n matched_companies: vec![vec![]],\n _companies: vec![],\n selected_index: Some(IndexPath::default()),\n confirmed_index: None,\n query: \"\".into(),\n loading: false,\n eof: false,\n lazy_load: false,\n };\n delegate.extend_more(100);\n\n let company_list = cx.new(|cx| ListState::new(delegate, window, cx).searchable(true));\n\n let _subscriptions =\n vec![\n cx.subscribe(&company_list, |_, _, ev: &ListEvent, _| match ev {\n ListEvent::Select(ix) => {\n println!(\"List Selected: {:?}\", ix);\n }\n ListEvent::Confirm(ix) => {\n println!(\"List Confirmed: {:?}\", ix);\n }\n ListEvent::Cancel => {\n println!(\"List Cancelled\");\n }\n }),\n ];\n\n // Spawn a background to random refresh the list\n cx.spawn(async move |this, cx| {\n this.update(cx, |this, cx| {\n this.company_list.update(cx, |picker, _| {\n picker\n .delegate_mut()\n ._companies\n .iter_mut()\n .for_each(|company| {\n let mut new_company = random_company();\n new_company.name = company.name.clone();\n new_company.industry = company.industry.clone();\n *company = Rc::new(new_company);\n });\n picker.delegate_mut().prepare(\"\");\n });\n cx.notify();\n })\n .ok();\n })\n .detach();\n\n Self {\n focus_handle: cx.focus_handle(),\n searchable: true,\n selectable: true,\n company_list,\n selected_company: None,\n _subscriptions,\n }\n }\n\n fn selected_company(&mut self, _: &SelectedCompany, _: &mut Window, cx: &mut Context) {\n let picker = self.company_list.read(cx);\n if let Some(company) = picker.delegate().selected_company() {\n self.selected_company = Some(company);\n }\n }\n\n fn toggle_selectable(&mut self, selectable: bool, _: &mut Window, cx: &mut Context) {\n self.selectable = selectable;\n self.company_list.update(cx, |list, cx| {\n list.set_selectable(self.selectable, cx);\n })\n }\n\n fn toggle_searchable(&mut self, searchable: bool, _: &mut Window, cx: &mut Context) {\n self.searchable = searchable;\n self.company_list.update(cx, |list, cx| {\n list.set_searchable(self.searchable, cx);\n })\n }\n}\n\nfn random_company() -> Company {\n let last_done = (0.0..999.0).fake::();\n let prev_close = last_done * (-0.1..0.1).fake::();\n\n Company {\n name: fake::faker::company::en::CompanyName()\n .fake::()\n .into(),\n industry: fake::faker::company::en::Industry().fake::().into(),\n last_done,\n prev_close,\n ..Default::default()\n }\n .prepare()\n}\n\nimpl Focusable for ListStory {\n fn focus_handle(&self, _cx: &gpui::App) -> FocusHandle {\n self.focus_handle.clone()\n }\n}\n\nimpl Render for ListStory {\n fn render(&mut self, _: &mut Window, cx: &mut Context) -> impl IntoElement {\n let lazy_load = self.company_list.read(cx).delegate().lazy_load;\n\n v_flex()\n .track_focus(&self.focus_handle)\n .on_action(cx.listener(Self::selected_company))\n .size_full()\n .gap_4()\n .child(\n h_flex()\n .gap_2()\n .child(\n Button::new(\"scroll-top\")\n .outline()\n .child(\"Scroll to Top\")\n .small()\n .on_click(cx.listener(|this, _, window, cx| {\n this.company_list.update(cx, |list, cx| {\n list.scroll_to_item(\n IndexPath::default(),\n ScrollStrategy::Top,\n window,\n cx,\n );\n cx.notify();\n })\n })),\n )\n .child(\n Button::new(\"scroll-selected\")\n .outline()\n .child(\"Scroll to selected\")\n .small()\n .on_click(cx.listener(|this, _, window, cx| {\n this.company_list.update(cx, |list, cx| {\n list.scroll_to_selected_item(window, cx);\n })\n })),\n )\n .child(\n Button::new(\"scroll-to-item\")\n .outline()\n .child(\"Scroll to (5, 1)\")\n .small()\n .on_click(cx.listener(|this, _, window, cx| {\n this.company_list.update(cx, |list, cx| {\n list.scroll_to_item(\n IndexPath::new(1).section(5),\n ScrollStrategy::Center,\n window,\n cx,\n );\n })\n })),\n )\n .child(\n Button::new(\"scroll-bottom\")\n .outline()\n .child(\"Scroll to Bottom\")\n .small()\n .on_click(cx.listener(|this, _, window, cx| {\n this.company_list.update(cx, |list, cx| {\n let last_section =\n list.delegate().sections_count(cx).saturating_sub(1);\n\n list.scroll_to_item(\n IndexPath::default().section(last_section).row(\n list.delegate()\n .items_count(last_section, cx)\n .saturating_sub(1),\n ),\n ScrollStrategy::Top,\n window,\n cx,\n );\n })\n })),\n )\n .child(\n Checkbox::new(\"selectable\")\n .label(\"Selectable\")\n .checked(self.selectable)\n .on_click(cx.listener(|this, check: &bool, window, cx| {\n this.toggle_selectable(*check, window, cx)\n })),\n )\n .child(\n Checkbox::new(\"searchable\")\n .label(\"Searchable\")\n .checked(self.searchable)\n .on_click(cx.listener(|this, check: &bool, window, cx| {\n this.toggle_searchable(*check, window, cx)\n })),\n )\n .child(\n Checkbox::new(\"loading\")\n .label(\"Loading\")\n .checked(self.company_list.read(cx).delegate().loading)\n .on_click(cx.listener(|this, check: &bool, _, cx| {\n this.company_list.update(cx, |this, cx| {\n this.delegate_mut().loading = *check;\n cx.notify();\n })\n })),\n )\n .child(\n Checkbox::new(\"lazy_load\")\n .label(\"Lazy Load\")\n .checked(lazy_load)\n .on_click(cx.listener(|this, check: &bool, _, cx| {\n this.company_list.update(cx, |this, cx| {\n this.delegate_mut().lazy_load = *check;\n cx.notify();\n })\n })),\n ),\n )\n .child(\n List::new(&self.company_list)\n .p(px(8.))\n .flex_1()\n .w_full()\n .border_1()\n .border_color(cx.theme().border)\n .rounded(cx.theme().radius),\n )\n }\n}\n" }, { "path": "crates/story/src/stories/menu_story.rs", "content": "use gpui::{\n Action, App, AppContext, Context, Corner, Entity, InteractiveElement, IntoElement, KeyBinding,\n ParentElement as _, Render, SharedString, Styled as _, Window, actions, div, px,\n};\nuse gpui_component::{\n ActiveTheme as _, IconName, Side, StyledExt,\n button::Button,\n h_flex,\n menu::{ContextMenuExt, DropdownMenu as _, PopupMenuItem},\n v_flex,\n};\nuse serde::Deserialize;\n\nuse crate::section;\n\n#[derive(Action, Clone, PartialEq, Deserialize)]\n#[action(namespace = menu_story, no_json)]\nstruct Info(usize);\n\nactions!(menu_story, [Copy, Paste, Cut, SearchAll, ToggleCheck]);\n\nconst CONTEXT: &str = \"menu_story\";\npub fn init(cx: &mut App) {\n cx.bind_keys([\n #[cfg(target_os = \"macos\")]\n KeyBinding::new(\"cmd-c\", Copy, Some(CONTEXT)),\n #[cfg(not(target_os = \"macos\"))]\n KeyBinding::new(\"ctrl-c\", Copy, Some(CONTEXT)),\n #[cfg(target_os = \"macos\")]\n KeyBinding::new(\"cmd-v\", Paste, Some(CONTEXT)),\n #[cfg(not(target_os = \"macos\"))]\n KeyBinding::new(\"ctrl-v\", Paste, Some(CONTEXT)),\n #[cfg(target_os = \"macos\")]\n KeyBinding::new(\"cmd-x\", Cut, Some(CONTEXT)),\n #[cfg(not(target_os = \"macos\"))]\n KeyBinding::new(\"ctrl-x\", Cut, Some(CONTEXT)),\n #[cfg(target_os = \"macos\")]\n KeyBinding::new(\"cmd-shift-f\", SearchAll, Some(CONTEXT)),\n #[cfg(not(target_os = \"macos\"))]\n KeyBinding::new(\"ctrl-shift-f\", SearchAll, Some(CONTEXT)),\n KeyBinding::new(\"ctrl-shift-alt-t\", ToggleCheck, Some(CONTEXT)),\n ])\n}\n\npub struct MenuStory {\n check_side: Option,\n message: String,\n}\n\nimpl super::Story for MenuStory {\n fn title() -> &'static str {\n \"Menu\"\n }\n\n fn description() -> &'static str {\n \"Popup menu and context menu\"\n }\n\n fn new_view(window: &mut Window, cx: &mut App) -> Entity {\n Self::view(window, cx)\n }\n}\n\nimpl MenuStory {\n pub fn view(window: &mut Window, cx: &mut App) -> Entity {\n cx.new(|cx| Self::new(window, cx))\n }\n\n fn new(_: &mut Window, _: &mut Context) -> Self {\n Self {\n check_side: None,\n message: \"\".to_string(),\n }\n }\n\n fn on_copy(&mut self, _: &Copy, _: &mut Window, cx: &mut Context) {\n self.message = \"You have clicked copy\".to_string();\n cx.notify()\n }\n\n fn on_cut(&mut self, _: &Cut, _: &mut Window, cx: &mut Context) {\n self.message = \"You have clicked cut\".to_string();\n cx.notify()\n }\n\n fn on_paste(&mut self, _: &Paste, _: &mut Window, cx: &mut Context) {\n self.message = \"You have clicked paste\".to_string();\n cx.notify()\n }\n\n fn on_search_all(&mut self, _: &SearchAll, _: &mut Window, cx: &mut Context) {\n self.message = \"You have clicked search all\".to_string();\n cx.notify()\n }\n\n fn on_action_info(&mut self, info: &Info, _: &mut Window, cx: &mut Context) {\n self.message = format!(\"You have clicked info: {}\", info.0);\n cx.notify()\n }\n\n fn on_action_toggle_check(&mut self, _: &ToggleCheck, _: &mut Window, cx: &mut Context) {\n self.check_side = if self.check_side == Some(Side::Left) {\n Some(Side::Right)\n } else if self.check_side == Some(Side::Right) {\n None\n } else {\n Some(Side::Left)\n };\n\n self.message = format!(\"You have used check at side: {:?}\", self.check_side);\n cx.notify()\n }\n}\n\nimpl Render for MenuStory {\n fn render(&mut self, _: &mut Window, cx: &mut Context) -> impl IntoElement {\n let check_side = self.check_side;\n let view = cx.entity();\n\n v_flex()\n .key_context(CONTEXT)\n .on_action(cx.listener(Self::on_copy))\n .on_action(cx.listener(Self::on_cut))\n .on_action(cx.listener(Self::on_paste))\n .on_action(cx.listener(Self::on_search_all))\n .on_action(cx.listener(Self::on_action_info))\n .on_action(cx.listener(Self::on_action_toggle_check))\n .size_full()\n .min_h(px(400.))\n .gap_6()\n .child(\n section(\"Popup Menu\")\n .child(\n Button::new(\"popup-menu-1\")\n .outline()\n .label(\"Edit\")\n .dropdown_menu(move |this, window, cx| {\n this.link(\"About\", \"https://github.com/longbridge/gpui-component\")\n .check_side(check_side.unwrap_or(Side::Left))\n .separator()\n .item(PopupMenuItem::new(\"Handle Click\").on_click(\n window.listener_for(&view, |this, _, _, cx| {\n this.message =\n \"You have clicked Handle Click\".to_string();\n cx.notify();\n }),\n ))\n .separator()\n .menu(\"Copy\", Box::new(Copy))\n .menu(\"Cut\", Box::new(Cut))\n .menu(\"Paste\", Box::new(Paste))\n .separator()\n .menu_with_check(\n format!(\"Check Side {:?}\", check_side),\n check_side.is_some(),\n Box::new(ToggleCheck),\n )\n .separator()\n .menu_with_icon(\"Search\", IconName::Search, Box::new(SearchAll))\n .separator()\n .item(\n PopupMenuItem::element(|_, cx| {\n v_flex().child(\"Custom Element\").child(\n div()\n .text_xs()\n .text_color(cx.theme().muted_foreground)\n .child(\"This is sub-title\"),\n )\n })\n .on_click(\n window.listener_for(&view, |this, _, _, cx| {\n this.message = \"You have clicked on custom element\"\n .to_string();\n cx.notify();\n }),\n ),\n )\n .menu_element_with_check(\n check_side.is_some(),\n Box::new(ToggleCheck),\n |_, cx| {\n h_flex().gap_1().child(\"Custom Element\").child(\n div()\n .text_xs()\n .text_color(cx.theme().muted_foreground)\n .child(\"checked\"),\n )\n },\n )\n .menu_element_with_icon(\n IconName::Info,\n Box::new(Info(0)),\n |_, cx| {\n h_flex().gap_1().child(\"Custom\").child(\n div()\n .text_sm()\n .text_color(cx.theme().muted_foreground)\n .child(\"element\"),\n )\n },\n )\n .separator()\n .menu_with_disabled(\"Disabled Item\", Box::new(Info(0)), true)\n .separator()\n .submenu(\"Links\", window, cx, |menu, _, _| {\n menu.link_with_icon(\n \"GPUI Component\",\n IconName::Github,\n \"https://github.com/longbridge/gpui-component\",\n )\n .separator()\n .link(\"GPUI\", \"https://gpui.rs\")\n .link(\"Zed\", \"https://zed.dev\")\n })\n .separator()\n .submenu(\"Other Links\", window, cx, |menu, _, _| {\n menu.link(\"Crates\", \"https://crates.io\")\n .link(\"Rust Docs\", \"https://docs.rs\")\n })\n }),\n )\n .child(self.message.clone()),\n )\n .child(\n section(\"Context Menu\")\n .v_flex()\n .gap_4()\n .child(\n v_flex()\n .w_full()\n .p_4()\n .items_center()\n .justify_center()\n .min_h_20()\n .rounded(cx.theme().radius_lg)\n .border_2()\n .border_dashed()\n .border_color(cx.theme().border)\n .child(\"Right click to open ContextMenu\")\n .context_menu({\n move |this, window, cx| {\n this.check_side(check_side.unwrap_or(Side::Left))\n .external_link_icon(false)\n .link(\n \"About\",\n \"https://github.com/longbridge/gpui-component\",\n )\n .separator()\n .menu(\"Cut\", Box::new(Cut))\n .menu(\"Copy\", Box::new(Copy))\n .menu(\"Paste\", Box::new(Paste))\n .separator()\n .label(\"This is a label\")\n .menu_with_check(\n format!(\"Check Side {:?}\", check_side),\n check_side.is_some(),\n Box::new(ToggleCheck),\n )\n .separator()\n .submenu(\"Settings\", window, cx, move |menu, _, _| {\n menu.menu(\"Info 0\", Box::new(Info(0)))\n .separator()\n .menu(\"Item 1\", Box::new(Info(1)))\n .menu(\"Item 2\", Box::new(Info(2)))\n })\n .separator()\n .menu(\"Search All\", Box::new(SearchAll))\n .separator()\n }\n })\n .child(\n div()\n .text_sm()\n .text_color(cx.theme().muted_foreground)\n .child(\n \"You can right click anywhere in \\\n this area to open the context menu.\",\n ),\n ),\n )\n .child(\n div()\n .id(\"other\")\n .flex()\n .w_full()\n .p_4()\n .items_center()\n .justify_center()\n .min_h_20()\n .rounded(cx.theme().radius_lg)\n .border_2()\n .border_dashed()\n .border_color(cx.theme().border)\n .child(\"Here is another area with context menu.\")\n .context_menu({\n move |this, _, _| {\n this.link(\n \"About\",\n \"https://github.com/longbridge/gpui-component\",\n )\n .separator()\n .menu(\"Item 1\", Box::new(Info(1)))\n }\n }),\n )\n .child(\n div()\n .id(\"other1\")\n .flex()\n .w_full()\n .p_4()\n .items_center()\n .justify_center()\n .min_h_20()\n .rounded(cx.theme().radius_lg)\n .border_2()\n .border_dashed()\n .border_color(cx.theme().border)\n .child(\"ContextMenu area 1\")\n .context_menu({\n move |this, _, _| {\n this.link(\n \"About\",\n \"https://github.com/longbridge/gpui-component\",\n )\n .separator()\n .menu(\"Item 1\", Box::new(Info(1)))\n }\n }),\n ),\n )\n .child(\n section(\"Menu with scrollbar\")\n .child(\n Button::new(\"dropdown-menu-scrollable-1\")\n .outline()\n .label(\"Scrollable Menu (100 items)\")\n .dropdown_menu_with_anchor(Corner::TopRight, move |this, _, _| {\n let mut this = this\n .scrollable(true)\n .max_h(px(300.))\n .label(format!(\"Total {} items\", 100));\n for i in 0..100 {\n if i % 5 == 0 {\n this = this.separator();\n }\n\n this = this.menu(\n SharedString::from(format!(\"Item {}\", i)),\n Box::new(Info(i)),\n )\n }\n this.min_w(px(100.))\n }),\n )\n .child(\n Button::new(\"dropdown-menu-scrollable-2\")\n .outline()\n .label(\"Scrollable Menu (5 items)\")\n .dropdown_menu_with_anchor(Corner::TopRight, move |this, _, _| {\n let mut this = this\n .scrollable(true)\n .max_h(px(300.))\n .label(format!(\"Total {} items\", 100));\n for i in 0..5 {\n this = this.menu(\n SharedString::from(format!(\"Item {}\", i)),\n Box::new(Info(i)),\n )\n }\n this.min_w(px(100.))\n }),\n ),\n )\n }\n}\n" }, { "path": "crates/story/src/stories/mod.rs", "content": "use gpui::{AnyView, App, AppContext as _, Entity, Hsla, Pixels, Render, Window, px};\nuse gpui_component::dock::PanelControl;\n\nmod accordion_story;\nmod alert_dialog_story;\nmod alert_story;\nmod avatar_story;\nmod badge_story;\nmod breadcrumb_story;\nmod button_story;\nmod calendar_story;\nmod chart_story;\nmod checkbox_story;\nmod clipboard_story;\nmod collapsible_story;\nmod color_picker_story;\nmod data_table_story;\nmod date_picker_story;\nmod description_list_story;\nmod dialog_story;\nmod divider_story;\nmod dropdown_button_story;\nmod editor_story;\nmod form_story;\nmod group_box_story;\nmod hover_card_story;\nmod icon_story;\nmod image_story;\nmod input_story;\nmod kbd_story;\nmod label_story;\nmod list_story;\nmod menu_story;\nmod notification_story;\nmod number_input_story;\nmod otp_input_story;\nmod pagination_story;\nmod popover_story;\nmod progress_story;\nmod radio_story;\nmod rating_story;\nmod resizable_story;\nmod scrollbar_story;\nmod select_story;\nmod settings_story;\nmod sheet_story;\nmod sidebar_story;\nmod skeleton_story;\nmod slider_story;\nmod spinner_story;\nmod stepper_story;\nmod switch_story;\nmod table_story;\nmod tabs_story;\nmod tag_story;\nmod textarea_story;\nmod theme_story;\nmod toggle_story;\nmod tooltip_story;\nmod tree_story;\nmod virtual_list_story;\nmod welcome_story;\n\npub use accordion_story::AccordionStory;\npub use alert_dialog_story::AlertDialogStory;\npub use alert_story::AlertStory;\npub use avatar_story::AvatarStory;\npub use badge_story::BadgeStory;\npub use breadcrumb_story::BreadcrumbStory;\npub use button_story::ButtonStory;\npub use calendar_story::CalendarStory;\npub use chart_story::ChartStory;\npub use checkbox_story::CheckboxStory;\npub use clipboard_story::ClipboardStory;\npub use collapsible_story::CollapsibleStory;\npub use color_picker_story::ColorPickerStory;\npub use data_table_story::DataTableStory;\npub use date_picker_story::DatePickerStory;\npub use description_list_story::DescriptionListStory;\npub use dialog_story::DialogStory;\npub use divider_story::DividerStory;\npub use dropdown_button_story::DropdownButtonStory;\npub use editor_story::EditorStory;\npub use form_story::FormStory;\npub use group_box_story::GroupBoxStory;\npub use hover_card_story::HoverCardStory;\npub use icon_story::IconStory;\npub use image_story::ImageStory;\npub use input_story::InputStory;\npub use kbd_story::KbdStory;\npub use label_story::LabelStory;\npub use list_story::ListStory;\npub use menu_story::MenuStory;\npub use notification_story::NotificationStory;\npub use number_input_story::NumberInputStory;\npub use otp_input_story::OtpInputStory;\npub use pagination_story::PaginationStory;\npub use popover_story::PopoverStory;\npub use progress_story::ProgressStory;\npub use radio_story::RadioStory;\npub use rating_story::RatingStory;\npub use resizable_story::ResizableStory;\npub use scrollbar_story::ScrollbarStory;\npub use select_story::SelectStory;\npub use settings_story::SettingsStory;\npub use sheet_story::SheetStory;\npub use sidebar_story::SidebarStory;\npub use skeleton_story::SkeletonStory;\npub use slider_story::SliderStory;\npub use spinner_story::SpinnerStory;\npub use stepper_story::StepperStory;\npub use switch_story::SwitchStory;\npub use table_story::TableStory;\npub use tabs_story::TabsStory;\npub use tag_story::TagStory;\npub use textarea_story::TextareaStory;\npub use theme_story::ThemeColorsStory;\npub use toggle_story::ToggleStory;\npub use tooltip_story::TooltipStory;\npub use tree_story::TreeStory;\npub use virtual_list_story::VirtualListStory;\n\npub use welcome_story::WelcomeStory;\n\npub(crate) fn init(cx: &mut App) {\n input_story::init(cx);\n rating_story::init(cx);\n number_input_story::init(cx);\n textarea_story::init(cx);\n select_story::init(cx);\n popover_story::init(cx);\n menu_story::init(cx);\n tooltip_story::init(cx);\n otp_input_story::init(cx);\n tree_story::init(cx);\n}\n\npub trait Story: Render + Sized {\n fn klass() -> &'static str {\n std::any::type_name::().split(\"::\").last().unwrap()\n }\n\n fn title() -> &'static str;\n\n fn description() -> &'static str {\n \"\"\n }\n\n fn closable() -> bool {\n true\n }\n\n fn zoomable() -> Option {\n Some(PanelControl::default())\n }\n\n fn title_bg() -> Option {\n None\n }\n\n fn paddings() -> Pixels {\n px(16.)\n }\n\n fn new_view(window: &mut Window, cx: &mut App) -> Entity;\n\n fn on_active(&mut self, active: bool, window: &mut Window, cx: &mut App) {\n let _ = active;\n let _ = window;\n let _ = cx;\n }\n\n fn on_active_any(view: AnyView, active: bool, window: &mut Window, cx: &mut App)\n where\n Self: 'static,\n {\n if let Some(story) = view.downcast::().ok() {\n cx.update_entity(&story, |story, cx| {\n story.on_active(active, window, cx);\n });\n }\n }\n}\n" }, { "path": "crates/story/src/stories/notification_story.rs", "content": "use gpui::{\n App, AppContext, Context, Entity, FocusHandle, Focusable, InteractiveElement as _, IntoElement,\n ParentElement, Render, Styled, Window,\n};\n\nuse gpui_component::{\n ActiveTheme, Anchor, Theme, WindowExt as _,\n button::{Button, ButtonVariants},\n h_flex,\n menu::{DropdownMenu as _, PopupMenuItem},\n notification::{Notification, NotificationType},\n text::markdown,\n v_flex,\n};\n\nuse crate::section;\n\nconst NOTIFICATION_MARKDOWN: &str = r#\"\nThis is a custom notification.\n- List item 1\n- List item 2\n- [Click here](https://github.com/longbridge/gpui-component)\n\"#;\n\npub struct NotificationStory {\n focus_handle: FocusHandle,\n}\n\nimpl super::Story for NotificationStory {\n fn title() -> &'static str {\n \"Notification\"\n }\n\n fn description() -> &'static str {\n \"Push notifications to display a message at the top right of the window\"\n }\n\n fn new_view(window: &mut Window, cx: &mut App) -> Entity {\n Self::view(window, cx)\n }\n}\n\nimpl NotificationStory {\n pub fn view(window: &mut Window, cx: &mut App) -> Entity {\n cx.new(|cx| Self::new(window, cx))\n }\n\n fn new(_: &mut Window, cx: &mut Context) -> Self {\n Self {\n focus_handle: cx.focus_handle(),\n }\n }\n}\n\nimpl Focusable for NotificationStory {\n fn focus_handle(&self, _cx: &gpui::App) -> FocusHandle {\n self.focus_handle.clone()\n }\n}\n\nimpl Render for NotificationStory {\n fn render(&mut self, _: &mut Window, cx: &mut Context) -> impl IntoElement {\n const ANCHORS: [Anchor; 6] = [\n Anchor::TopLeft,\n Anchor::TopCenter,\n Anchor::TopRight,\n Anchor::BottomLeft,\n Anchor::BottomCenter,\n Anchor::BottomRight,\n ];\n\n let view = cx.entity();\n\n v_flex()\n .id(\"notification-story\")\n .track_focus(&self.focus_handle)\n .size_full()\n .gap_3()\n .child(\n h_flex().gap_3().child(\n Button::new(\"placement\")\n .outline()\n .label(cx.theme().notification.placement.to_string())\n .dropdown_menu(move |menu, window, cx| {\n let menu = ANCHORS.into_iter().fold(menu, |menu, placement| {\n menu.item(\n PopupMenuItem::new(placement.to_string())\n .checked(cx.theme().notification.placement == placement)\n .on_click(window.listener_for(\n &view,\n move |_, _, _, cx| {\n Theme::global_mut(cx).notification.placement =\n placement;\n cx.notify();\n },\n )),\n )\n });\n\n menu\n }),\n ),\n )\n .child(\n section(\"Simple Notification\").child(\n Button::new(\"show-notify-0\")\n .outline()\n .label(\"Show Notification\")\n .on_click(cx.listener(|_, _, window, cx| {\n window.push_notification(\"This is a notification.\", cx)\n })),\n ),\n )\n .child(\n section(\"Notification with Type\")\n .child(\n Button::new(\"show-notify-info\")\n .info()\n .label(\"Info\")\n .on_click(cx.listener(|_, _, window, cx| {\n window.push_notification(\n (\n NotificationType::Info,\n \"You have been saved file successfully.\",\n ),\n cx,\n )\n })),\n )\n .child(\n Button::new(\"show-notify-error\")\n .danger()\n .label(\"Error\")\n .on_click(cx.listener(|_, _, window, cx| {\n window.push_notification(\n (\n NotificationType::Error,\n \"There have some error occurred. Please try again later.\",\n ),\n cx,\n )\n })),\n )\n .child(\n Button::new(\"show-notify-success\")\n .success()\n .label(\"Success\")\n .on_click(cx.listener(|_, _, window, cx| {\n window.push_notification(\n (\n NotificationType::Success,\n \"We have received your payment successfully.\",\n ),\n cx,\n )\n })),\n )\n .child(\n Button::new(\"show-notify-warning\")\n .warning()\n .label(\"Warning\")\n .on_click(cx.listener(|_, _, window, cx| {\n window.push_notification(\n (\n NotificationType::Warning,\n \"The network is not stable, please check your connection.\",\n ),\n cx,\n )\n })),\n ),\n )\n .child(\n section(\"Unique Notification\").child(\n Button::new(\"show-notify-unique\")\n .outline()\n .label(\"Unique Notification\")\n .on_click(cx.listener(|_, _, window, cx| {\n window.push_notification(\n Notification::info(\"This is a unique notification.\")\n .id::()\n .message(\"This is a unique notification.\"),\n cx,\n )\n })),\n ),\n )\n .child(\n section(\"Unique with Key\").child(\n h_flex()\n .gap_3()\n .child(\n Button::new(\"show-notify-unique-key0\")\n .outline()\n .label(\"A Notification\")\n .on_click(cx.listener(|_, _, window, cx| {\n window.push_notification(\n Notification::info(\"This is A unique notification.\")\n .id1::(1),\n cx,\n )\n })),\n )\n .child(\n Button::new(\"show-notify-unique-key1\")\n .outline()\n .label(\"B Notification\")\n .on_click(cx.listener(|_, _, window, cx| {\n window.push_notification(\n Notification::info(\"This is B unique notification.\")\n .id1::(2),\n cx,\n )\n })),\n ),\n ),\n )\n .child(\n section(\"With title and action\").child(\n Button::new(\"show-notify-with-title\")\n .outline()\n .label(\"Notification with Title\")\n .on_click(cx.listener(|_, _, window, cx| {\n struct TestNotification;\n\n window.push_notification(\n Notification::new()\n .id::()\n .title(\"Uh oh! Something went wrong.\")\n .message(\"There was a problem with your request.\")\n .action(|_, _, cx| {\n Button::new(\"try-again\").primary().label(\"Retry\").on_click(\n cx.listener(|this, _, window, cx| {\n println!(\"You have clicked the try again action.\");\n this.dismiss(window, cx);\n }),\n )\n })\n .on_click(cx.listener(|_, _, _, cx| {\n println!(\"Notification clicked\");\n cx.notify();\n })),\n cx,\n )\n })),\n ),\n )\n .child(\n section(\"Custom Notification\").child(\n Button::new(\"show-notify-custom\")\n .outline()\n .label(\"Show Custom Notification\")\n .on_click(cx.listener(|_, _, window, cx| {\n window.push_notification(\n Notification::new().content(|_, _, _| {\n markdown(NOTIFICATION_MARKDOWN).into_any_element()\n }),\n cx,\n )\n })),\n ),\n )\n .child({\n struct ManualOpenNotification;\n\n section(\"Manual Close Notification\")\n .child(\n Button::new(\"manual-open-notify\")\n .outline()\n .label(\"Show\")\n .on_click(cx.listener(|_, _, window, cx| {\n window.push_notification(\n Notification::new()\n .id::()\n .message(\n \"You can close this notification by \\\n clicking the Close button.\",\n )\n .autohide(false),\n cx,\n );\n })),\n )\n .child(\n Button::new(\"manual-close-notify\")\n .outline()\n .label(\"Dismiss All\")\n .on_click(cx.listener(|_, _, window, cx| {\n window.remove_notification::(cx);\n })),\n )\n })\n }\n}\n" }, { "path": "crates/story/src/stories/number_input_story.rs", "content": "use gpui::{\n App, AppContext as _, Context, Entity, Focusable, InteractiveElement, IntoElement,\n ParentElement as _, Render, Styled, Subscription, Window, px,\n};\nuse regex::Regex;\n\nuse crate::section;\nuse gpui_component::{\n ActiveTheme, Disableable, IconName, Sizable,\n button::{Button, ButtonVariants},\n input::{InputEvent, InputState, MaskPattern, NumberInput, NumberInputEvent, StepAction},\n v_flex,\n};\n\npub fn init(_: &mut App) {}\n\npub struct NumberInputStory {\n number_input1_value: i64,\n number_input1: Entity,\n number_input2: Entity,\n number_input2_value: u64,\n number_input3: Entity,\n number_input3_value: f64,\n number_input4: Entity,\n number_input4_value: f64,\n disabled_input: Entity,\n\n _subscriptions: Vec,\n}\n\nimpl super::Story for NumberInputStory {\n fn title() -> &'static str {\n \"NumberInput\"\n }\n\n fn description() -> &'static str {\n \"NumberInput design to support + - to adjust the input value.\"\n }\n\n fn closable() -> bool {\n false\n }\n\n fn new_view(window: &mut Window, cx: &mut App) -> Entity {\n Self::view(window, cx)\n }\n}\n\nimpl NumberInputStory {\n pub fn view(window: &mut Window, cx: &mut App) -> Entity {\n cx.new(|cx| Self::new(window, cx))\n }\n\n fn new(window: &mut Window, cx: &mut Context) -> Self {\n let number_input1_value = 1;\n let number_input1 = cx.new(|cx| {\n InputState::new(window, cx)\n .placeholder(\"Normal Integer\")\n .default_value(number_input1_value.to_string())\n });\n\n let number_input2 = cx.new(|cx| {\n InputState::new(window, cx)\n .placeholder(\"Unsized Integer\")\n .pattern(Regex::new(r\"^\\d+$\").unwrap())\n });\n\n let number_input3 = cx.new(|cx| {\n InputState::new(window, cx)\n .placeholder(\"Mask pattern\")\n .mask_pattern(MaskPattern::Number {\n separator: Some(','),\n fraction: Some(2),\n })\n });\n\n let number_input4 = cx.new(|cx| {\n InputState::new(window, cx)\n .placeholder(\"Styling\")\n .mask_pattern(MaskPattern::Number {\n separator: Some(','),\n fraction: Some(2),\n })\n });\n\n let disabled_input = cx.new(|cx| {\n InputState::new(window, cx)\n .default_value(\"100\")\n .placeholder(\"Disabled\")\n });\n\n let _subscriptions = vec![\n cx.subscribe_in(&number_input1, window, Self::on_input_event),\n cx.subscribe_in(&number_input1, window, Self::on_number_input_event),\n cx.subscribe_in(&number_input2, window, Self::on_input_event),\n cx.subscribe_in(&number_input2, window, Self::on_number_input_event),\n cx.subscribe_in(&number_input3, window, Self::on_input_event),\n cx.subscribe_in(&number_input3, window, Self::on_number_input_event),\n cx.subscribe_in(&number_input4, window, Self::on_input_event),\n cx.subscribe_in(&number_input4, window, Self::on_number_input_event),\n cx.subscribe_in(&disabled_input, window, Self::on_input_event),\n cx.subscribe_in(&disabled_input, window, Self::on_number_input_event),\n ];\n\n Self {\n number_input1,\n number_input1_value,\n number_input2,\n number_input2_value: 0,\n number_input3,\n number_input3_value: 0.0,\n number_input4,\n number_input4_value: 0.0,\n disabled_input,\n _subscriptions,\n }\n }\n\n fn on_input_event(\n &mut self,\n state: &Entity,\n event: &InputEvent,\n _: &mut Window,\n cx: &mut Context,\n ) {\n match event {\n InputEvent::Change => {\n let text = state.read(cx).value();\n if state == &self.number_input1 {\n if let Ok(value) = text.parse::() {\n self.number_input1_value = value;\n }\n } else if state == &self.number_input2 {\n if let Ok(value) = text.parse::() {\n self.number_input2_value = value;\n }\n } else if state == &self.number_input3 {\n if let Ok(value) = text.parse::() {\n self.number_input3_value = value;\n }\n }\n println!(\"Change: {}\", text);\n }\n InputEvent::PressEnter { secondary } => {\n println!(\"PressEnter secondary: {}\", secondary)\n }\n InputEvent::Focus => println!(\"Focus\"),\n InputEvent::Blur => println!(\"Blur\"),\n }\n }\n\n fn on_number_input_event(\n &mut self,\n this: &Entity,\n event: &NumberInputEvent,\n window: &mut Window,\n cx: &mut Context,\n ) {\n match event {\n NumberInputEvent::Step(step_action) => match step_action {\n StepAction::Decrement => {\n if this == &self.number_input1 {\n self.number_input1_value = self.number_input1_value - 1;\n this.update(cx, |input, cx| {\n input.set_value(self.number_input1_value.to_string(), window, cx);\n });\n } else if this == &self.number_input2 {\n self.number_input2_value = self.number_input2_value.saturating_sub(1);\n this.update(cx, |input, cx| {\n input.set_value(self.number_input2_value.to_string(), window, cx);\n });\n } else if this == &self.number_input3 {\n self.number_input3_value = self.number_input3_value - 1.0;\n this.update(cx, |input, cx| {\n input.set_value(self.number_input3_value.to_string(), window, cx);\n });\n } else if this == &self.number_input4 {\n self.number_input4_value = self.number_input4_value - 1.0;\n this.update(cx, |input, cx| {\n input.set_value(self.number_input4_value.to_string(), window, cx);\n });\n }\n }\n StepAction::Increment => {\n if this == &self.number_input1 {\n self.number_input1_value = self.number_input1_value + 1;\n this.update(cx, |input, cx| {\n input.set_value(self.number_input1_value.to_string(), window, cx);\n });\n } else if this == &self.number_input2 {\n self.number_input2_value = self.number_input2_value + 1;\n this.update(cx, |input, cx| {\n input.set_value(self.number_input2_value.to_string(), window, cx);\n });\n } else if this == &self.number_input3 {\n self.number_input3_value = self.number_input3_value + 1.0;\n this.update(cx, |input, cx| {\n input.set_value(self.number_input3_value.to_string(), window, cx);\n });\n } else if this == &self.number_input4 {\n self.number_input4_value = self.number_input4_value + 1.0;\n this.update(cx, |input, cx| {\n input.set_value(self.number_input4_value.to_string(), window, cx);\n });\n }\n }\n },\n }\n }\n}\n\nimpl Focusable for NumberInputStory {\n fn focus_handle(&self, cx: &gpui::App) -> gpui::FocusHandle {\n self.number_input1.focus_handle(cx)\n }\n}\n\nimpl Render for NumberInputStory {\n fn render(&mut self, _: &mut Window, cx: &mut Context) -> impl IntoElement {\n v_flex()\n .id(\"input-story\")\n .size_full()\n .justify_start()\n .gap_3()\n .child(\n section(\"Normal Size\")\n .max_w(px(200.))\n .child(NumberInput::new(&self.number_input1)),\n )\n .child(\n section(\"Disabled\")\n .max_w(px(200.))\n .child(NumberInput::new(&self.disabled_input).disabled(true)),\n )\n .child(\n section(\"Small Size with suffix\").max_w(px(200.)).child(\n NumberInput::new(&self.number_input2)\n .small()\n .suffix(Button::new(\"info\").ghost().icon(IconName::Info).xsmall()),\n ),\n )\n .child(\n section(\"With mask pattern\")\n .max_w(px(200.))\n .child(NumberInput::new(&self.number_input3)),\n )\n .child(\n section(\"Without appearance\").max_w(px(200.)).child(\n NumberInput::new(&self.number_input4)\n .appearance(false)\n .bg(cx.theme().secondary),\n ),\n )\n }\n}\n" }, { "path": "crates/story/src/stories/otp_input_story.rs", "content": "use gpui::{\n prelude::FluentBuilder as _, px, App, AppContext as _, Context, Entity, Focusable,\n InteractiveElement, IntoElement, ParentElement as _, Render, SharedString, Styled,\n Subscription, Window,\n};\nuse gpui_component::{\n checkbox::Checkbox,\n h_flex,\n input::{InputEvent, OtpInput, OtpState},\n v_flex, Disableable as _, Sizable, StyledExt,\n};\n\nuse crate::section;\n\npub fn init(_: &mut App) {}\n\npub struct OtpInputStory {\n otp_masked: bool,\n otp_state: Entity,\n otp_value: Option,\n otp_state_small: Entity,\n otp_state_large: Entity,\n otp_state_sized: Entity,\n otp_state_disabled: Entity,\n\n _subscriptions: Vec,\n}\n\nimpl super::Story for OtpInputStory {\n fn title() -> &'static str {\n \"OtpInput\"\n }\n\n fn description() -> &'static str {\n \"OTP Input uses to one-time password (OTP) input field or number password input field.\"\n }\n\n fn closable() -> bool {\n false\n }\n\n fn new_view(window: &mut Window, cx: &mut App) -> Entity {\n Self::view(window, cx)\n }\n}\n\nimpl OtpInputStory {\n pub fn view(window: &mut Window, cx: &mut App) -> Entity {\n cx.new(|cx| Self::new(window, cx))\n }\n\n fn new(window: &mut Window, cx: &mut Context) -> Self {\n let otp_state = cx.new(|cx| OtpState::new(6, window, cx).masked(true));\n\n let _subscriptions = vec![\n cx.subscribe(&otp_state, |this, state, ev: &InputEvent, cx| match ev {\n InputEvent::Change => {\n let text = state.read(cx).value();\n this.otp_value = Some(text.clone());\n cx.notify();\n }\n _ => {}\n }),\n ];\n\n Self {\n otp_masked: true,\n otp_state,\n otp_value: None,\n otp_state_small: cx.new(|cx| {\n OtpState::new(6, window, cx)\n .default_value(\"123456\")\n .masked(true)\n }),\n otp_state_large: cx.new(|cx| {\n OtpState::new(6, window, cx)\n .default_value(\"012345\")\n .masked(true)\n }),\n otp_state_sized: cx.new(|cx| {\n OtpState::new(4, window, cx)\n .masked(true)\n .default_value(\"654321\")\n }),\n otp_state_disabled: cx.new(|cx| {\n OtpState::new(6, window, cx)\n .masked(true)\n .default_value(\"123456\")\n }),\n _subscriptions,\n }\n }\n\n fn toggle_opt_masked(&mut self, _: &bool, window: &mut Window, cx: &mut Context) {\n self.otp_masked = !self.otp_masked;\n self.otp_state.update(cx, |state, cx| {\n state.set_masked(self.otp_masked, window, cx)\n });\n self.otp_state_small.update(cx, |state, cx| {\n state.set_masked(self.otp_masked, window, cx)\n });\n self.otp_state_large.update(cx, |state, cx| {\n state.set_masked(self.otp_masked, window, cx)\n });\n self.otp_state_sized.update(cx, |state, cx| {\n state.set_masked(self.otp_masked, window, cx)\n });\n self.otp_state_disabled.update(cx, |state, cx| {\n state.set_masked(self.otp_masked, window, cx)\n });\n }\n}\n\nimpl Focusable for OtpInputStory {\n fn focus_handle(&self, cx: &gpui::App) -> gpui::FocusHandle {\n self.otp_state.focus_handle(cx)\n }\n}\n\nimpl Render for OtpInputStory {\n fn render(&mut self, _: &mut Window, cx: &mut Context) -> impl IntoElement {\n v_flex()\n .id(\"otp-input-story\")\n .size_full()\n .gap_5()\n .child(\n h_flex().items_center().child(\n Checkbox::new(\"otp-mask\")\n .label(\"Masked\")\n .checked(self.otp_masked)\n .on_click(cx.listener(Self::toggle_opt_masked)),\n ),\n )\n .child(\n section(\"Normal\")\n .v_flex()\n .child(OtpInput::new(&self.otp_state))\n .when_some(self.otp_value.clone(), |this, otp| {\n this.child(format!(\"Your OTP: {}\", otp))\n }),\n )\n .child(section(\"Small\").child(OtpInput::new(&self.otp_state_small).groups(1).small()))\n .child(section(\"Large\").child(OtpInput::new(&self.otp_state_large).groups(3).large()))\n .child(\n section(\"With Size\").child(\n OtpInput::new(&self.otp_state_sized)\n .groups(1)\n .with_size(px(55.)),\n ),\n )\n .child(\n section(\"Disabled\").child(OtpInput::new(&self.otp_state_disabled).disabled(true)),\n )\n }\n}\n" }, { "path": "crates/story/src/stories/pagination_story.rs", "content": "use gpui::{\n App, AppContext, Context, Entity, FocusHandle, Focusable, IntoElement, ParentElement, Render,\n Styled, Window,\n};\nuse gpui_component::{\n Disableable, Selectable as _, Sizable, Size,\n button::{Button, ButtonGroup},\n pagination::Pagination,\n v_flex,\n};\n\nuse crate::section;\n\npub struct PaginationStory {\n basic_page: usize,\n many_pages_page: usize,\n compact_page: usize,\n focus_handle: FocusHandle,\n size: Size,\n}\n\nimpl super::Story for PaginationStory {\n fn title() -> &'static str {\n \"Pagination\"\n }\n\n fn description() -> &'static str {\n \"Pagination with page navigation, next and previous links.\"\n }\n\n fn new_view(window: &mut Window, cx: &mut App) -> Entity {\n Self::view(window, cx)\n }\n}\n\nimpl PaginationStory {\n pub fn view(_window: &mut Window, cx: &mut App) -> Entity {\n cx.new(|cx| Self {\n basic_page: 5,\n many_pages_page: 1,\n compact_page: 3,\n focus_handle: cx.focus_handle(),\n size: Size::default(),\n })\n }\n\n fn set_size(&mut self, size: Size, _: &mut Window, cx: &mut Context) {\n self.size = size;\n cx.notify();\n }\n}\n\nimpl Focusable for PaginationStory {\n fn focus_handle(&self, _: &gpui::App) -> gpui::FocusHandle {\n self.focus_handle.clone()\n }\n}\n\nimpl Render for PaginationStory {\n fn render(&mut self, _window: &mut Window, cx: &mut Context) -> impl IntoElement {\n let entity = cx.entity();\n\n v_flex()\n .gap_6()\n .child(\n ButtonGroup::new(\"toggle-size\")\n .outline()\n .compact()\n .child(\n Button::new(\"xsmall\")\n .label(\"XSmall\")\n .selected(self.size == Size::XSmall),\n )\n .child(\n Button::new(\"small\")\n .label(\"Small\")\n .selected(self.size == Size::Small),\n )\n .child(\n Button::new(\"medium\")\n .label(\"Medium\")\n .selected(self.size == Size::Medium),\n )\n .child(\n Button::new(\"large\")\n .label(\"Large\")\n .selected(self.size == Size::Large),\n )\n .on_click(cx.listener(|this, selecteds: &Vec, window, cx| {\n let size = match selecteds[0] {\n 0 => Size::XSmall,\n 1 => Size::Small,\n 2 => Size::Medium,\n 3 => Size::Large,\n _ => Size::Medium,\n };\n this.set_size(size, window, cx);\n })),\n )\n .child(\n section(\"Basic\").child(\n Pagination::new(\"basic-pagination\")\n .current_page(self.basic_page)\n .total_pages(10)\n .with_size(self.size)\n .on_click({\n let entity = entity.clone();\n move |page, _, cx| {\n entity.update(cx, |this, cx| {\n this.basic_page = *page;\n cx.notify();\n });\n }\n }),\n ),\n )\n .child(\n section(\"Pagination with 10 visible pages\").child(\n Pagination::new(\"many-pages-pagination\")\n .current_page(self.many_pages_page)\n .total_pages(50)\n .visible_pages(10)\n .with_size(self.size)\n .on_click({\n let entity = entity.clone();\n move |page, _, cx| {\n entity.update(cx, |this, cx| {\n this.many_pages_page = *page;\n cx.notify();\n });\n }\n }),\n ),\n )\n .child(\n section(\"Compact Style\").child(\n Pagination::new(\"compact-pagination\")\n .compact()\n .current_page(self.compact_page)\n .total_pages(10)\n .with_size(self.size)\n .on_click({\n let entity = entity.clone();\n move |page, _, cx| {\n entity.update(cx, |this, cx| {\n this.compact_page = *page;\n cx.notify();\n });\n }\n }),\n ),\n )\n .child(\n section(\"Disabled\").child(\n Pagination::new(\"disabled-pagination\")\n .current_page(4)\n .total_pages(10)\n .with_size(self.size)\n .disabled(true)\n .on_click(|_, _, _| {}),\n ),\n )\n }\n}\n" }, { "path": "crates/story/src/stories/popover_story.rs", "content": "use gpui::{\n Action, App, AppContext, Context, DismissEvent, Entity, EventEmitter, FocusHandle, Focusable,\n Half, InteractiveElement, IntoElement, KeyBinding, MouseButton, ParentElement as _, Render,\n Styled as _, Window, actions, div, px,\n};\nuse gpui_component::{\n ActiveTheme, Anchor, StyledExt, WindowExt,\n button::{Button, ButtonVariants as _},\n divider::Divider,\n h_flex,\n input::{Input, InputState},\n list::{List, ListDelegate, ListItem, ListState},\n popover::Popover,\n v_flex,\n};\nuse serde::Deserialize;\n\nuse crate::section;\n\n#[derive(Action, Clone, PartialEq, Eq, Deserialize)]\n#[action(namespace = popover_story, no_json)]\nstruct Info(usize);\n\nactions!(popover_story, [Copy, Paste, Cut, SearchAll, ToggleCheck]);\nconst CONTEXT: &str = \"popover-story\";\npub fn init(cx: &mut App) {\n cx.bind_keys([\n #[cfg(target_os = \"macos\")]\n KeyBinding::new(\"cmd-c\", Copy, Some(CONTEXT)),\n #[cfg(not(target_os = \"macos\"))]\n KeyBinding::new(\"ctrl-c\", Copy, Some(CONTEXT)),\n #[cfg(target_os = \"macos\")]\n KeyBinding::new(\"cmd-v\", Paste, Some(CONTEXT)),\n #[cfg(not(target_os = \"macos\"))]\n KeyBinding::new(\"ctrl-v\", Paste, Some(CONTEXT)),\n #[cfg(target_os = \"macos\")]\n KeyBinding::new(\"cmd-x\", Cut, Some(CONTEXT)),\n #[cfg(not(target_os = \"macos\"))]\n KeyBinding::new(\"ctrl-x\", Cut, Some(CONTEXT)),\n #[cfg(target_os = \"macos\")]\n KeyBinding::new(\"cmd-shift-f\", SearchAll, Some(CONTEXT)),\n #[cfg(not(target_os = \"macos\"))]\n KeyBinding::new(\"ctrl-shift-f\", SearchAll, Some(CONTEXT)),\n ])\n}\n\nstruct Form {\n parent: Entity,\n input1: Entity,\n}\n\nimpl Form {\n fn new(parent: Entity, window: &mut Window, cx: &mut App) -> Entity {\n cx.new(|cx| Self {\n parent,\n input1: cx.new(|cx| InputState::new(window, cx)),\n })\n }\n}\n\nimpl Focusable for Form {\n fn focus_handle(&self, cx: &App) -> FocusHandle {\n self.input1.focus_handle(cx)\n }\n}\n\nstruct DropdownListDelegate {\n parent: Entity,\n}\nimpl ListDelegate for DropdownListDelegate {\n type Item = ListItem;\n\n fn items_count(&self, _: usize, _: &App) -> usize {\n 10\n }\n\n fn render_item(\n &mut self,\n ix: gpui_component::IndexPath,\n _: &mut Window,\n _: &mut Context>,\n ) -> Option {\n Some(ListItem::new(ix).child(format!(\"Item {}\", ix.row)))\n }\n\n fn set_selected_index(\n &mut self,\n _: Option,\n _: &mut Window,\n _: &mut Context>,\n ) {\n }\n\n fn confirm(&mut self, _: bool, _: &mut Window, cx: &mut Context>) {\n self.parent.update(cx, |this, cx| {\n this.list_popover_open = false;\n cx.notify();\n })\n }\n\n fn cancel(&mut self, _: &mut Window, cx: &mut Context>) {\n self.parent.update(cx, |this, cx| {\n this.list_popover_open = false;\n cx.notify();\n })\n }\n}\n\nimpl EventEmitter for Form {}\n\nimpl Render for Form {\n fn render(&mut self, _: &mut Window, cx: &mut Context) -> impl IntoElement {\n let parent = self.parent.clone();\n v_flex()\n .gap_2()\n .p_3()\n .size_full()\n .child(\"This is a form container.\")\n .child(\"Click submit to dismiss the popover.\")\n .child(Input::new(&self.input1))\n .child(\n Button::new(\"submit\")\n .label(\"Submit\")\n .primary()\n .on_click(cx.listener(move |_, _, _, cx| {\n parent.update(cx, |this, cx| {\n this.form_popover_open = false;\n cx.notify();\n })\n })),\n )\n }\n}\n\npub struct PopoverStory {\n focus_handle: FocusHandle,\n form: Entity
,\n list: Entity>,\n form_popover_open: bool,\n list_popover_open: bool,\n checked: bool,\n message: String,\n}\n\nimpl super::Story for PopoverStory {\n fn title() -> &'static str {\n \"Popover\"\n }\n\n fn description() -> &'static str {\n \"A popup displays content on top of the main page.\"\n }\n\n fn new_view(window: &mut Window, cx: &mut App) -> Entity {\n Self::view(window, cx)\n }\n}\n\nimpl PopoverStory {\n pub fn view(window: &mut Window, cx: &mut App) -> Entity {\n cx.new(|cx| Self::new(window, cx))\n }\n\n fn new(window: &mut Window, cx: &mut Context) -> Self {\n let form = Form::new(cx.entity(), window, cx);\n let parent = cx.entity();\n let list = cx\n .new(|cx| ListState::new(DropdownListDelegate { parent }, window, cx).searchable(true));\n\n cx.focus_self(window);\n\n Self {\n form,\n list,\n checked: true,\n form_popover_open: false,\n list_popover_open: false,\n focus_handle: cx.focus_handle(),\n message: \"\".to_string(),\n }\n }\n\n fn on_copy(&mut self, _: &Copy, _: &mut Window, cx: &mut Context) {\n self.message = \"You have clicked copy\".to_string();\n cx.notify()\n }\n\n fn on_cut(&mut self, _: &Cut, _: &mut Window, cx: &mut Context) {\n self.message = \"You have clicked cut\".to_string();\n cx.notify()\n }\n\n fn on_paste(&mut self, _: &Paste, _: &mut Window, cx: &mut Context) {\n self.message = \"You have clicked paste\".to_string();\n cx.notify()\n }\n\n fn on_search_all(&mut self, _: &SearchAll, _: &mut Window, cx: &mut Context) {\n self.message = \"You have clicked search all\".to_string();\n cx.notify()\n }\n\n fn on_action_info(&mut self, info: &Info, _: &mut Window, cx: &mut Context) {\n self.message = format!(\"You have clicked info: {}\", info.0);\n cx.notify()\n }\n\n fn on_action_toggle_check(&mut self, _: &ToggleCheck, _: &mut Window, cx: &mut Context) {\n self.checked = !self.checked;\n self.message = format!(\"You have clicked toggle check: {}\", self.checked);\n cx.notify()\n }\n}\n\nimpl Focusable for PopoverStory {\n fn focus_handle(&self, _cx: &App) -> FocusHandle {\n self.focus_handle.clone()\n }\n}\n\nimpl Render for PopoverStory {\n fn render(&mut self, _: &mut Window, cx: &mut Context) -> impl IntoElement {\n let form = self.form.clone();\n\n v_flex()\n .key_context(CONTEXT)\n .track_focus(&self.focus_handle)\n .on_action(cx.listener(Self::on_copy))\n .on_action(cx.listener(Self::on_cut))\n .on_action(cx.listener(Self::on_paste))\n .on_action(cx.listener(Self::on_search_all))\n .on_action(cx.listener(Self::on_action_info))\n .on_action(cx.listener(Self::on_action_toggle_check))\n .size_full()\n .gap_6()\n .child(\n section(\"Basic Popover\").child(\n Popover::new(\"popover-0\")\n .max_w(px(600.))\n .trigger(Button::new(\"btn\").outline().label(\"Popover\"))\n .gap_2()\n .text_sm()\n .w(px(400.))\n .child(\"Hello, this is a Popover.\")\n .child(Divider::horizontal())\n .child(\n \"You can put any content here, including text,\\\n buttons, forms, and more.\",\n ),\n ),\n )\n .child(\n section(\"Popover with Form\").child(\n Popover::new(\"popover-form\")\n .p_0()\n .text_sm()\n .trigger(Button::new(\"pop\").outline().label(\"Popup Form\"))\n .track_focus(&form.focus_handle(cx))\n .open(self.form_popover_open)\n .on_open_change(cx.listener(move |this, open, _, cx| {\n println!(\"Popover form open changed: {}\", open);\n this.form_popover_open = *open;\n cx.notify();\n }))\n .child(form.clone()),\n ),\n )\n .child(\n section(\"Popover with List\").child(\n Popover::new(\"popover-list\")\n .p_0()\n .text_sm()\n .open(self.list_popover_open)\n .on_open_change(cx.listener(move |this, open, _, cx| {\n this.list_popover_open = *open;\n cx.notify();\n }))\n .trigger(Button::new(\"pop\").outline().label(\"Popup List\"))\n .track_focus(&self.list.focus_handle(cx))\n .child(List::new(&self.list))\n .w_64()\n .h(px(200.)),\n ),\n )\n .child(\n section(\"Right click to open Popover\").child(\n Popover::new(\"popover-right-click\")\n .mouse_button(MouseButton::Right)\n .trigger(Button::new(\"btn\").outline().label(\"Right Click Popover\"))\n .max_w(px(600.))\n .content(|_, _, cx| {\n v_flex()\n .gap_2()\n .child(\"Hello, this is a Popover on the Bottom Right.\")\n .child(Divider::horizontal())\n .child(\n Button::new(\"info1\")\n .primary()\n .label(\"Dismiss\")\n .w(px(80.))\n .on_click(cx.listener(|_, _, window, cx| {\n window.push_notification(\n \"You have clicked dismiss via DismissEvent.\",\n cx,\n );\n cx.emit(DismissEvent);\n })),\n )\n }),\n ),\n )\n .child(\n section(\"Styling Popover\").child(\n Popover::new(\"popover-1\")\n .trigger(Button::new(\"btn\").outline().label(\"Style Popover\"))\n .appearance(false)\n .py_1()\n .px_2()\n .bg(cx.theme().primary)\n .text_color(cx.theme().primary_foreground)\n .max_w(px(600.))\n .rounded(cx.theme().radius.half())\n .text_sm()\n .shadow_2xl()\n .child(\"A styled Popover with custom background and text color.\"),\n ),\n )\n .child(\n section(\"Default Open\").child(\n Popover::new(\"default-open-popover\")\n .default_open(true)\n .trigger(\n Button::new(\"default-open-btn\")\n .label(\"Default Open\")\n .outline(),\n )\n .child(\"This popover is open by default when first rendered.\"),\n ),\n )\n .child(\n section(\"Popover Anchor\")\n .min_h(px(360.))\n .v_flex()\n .child(\n div().absolute().top_0().left_0().w_full().h_10().child(\n h_flex()\n .items_center()\n .justify_between()\n .child(\n Popover::new(\"anchor-top-left\")\n .max_w(px(600.))\n .anchor(Anchor::TopLeft)\n .trigger(Button::new(\"btn\").outline().label(\"TopLeft\"))\n .child(\"This is a Popover on the Top Left.\"),\n )\n .child(\n Popover::new(\"anchor-top-center\")\n .max_w(px(600.))\n .anchor(Anchor::TopCenter)\n .trigger(Button::new(\"btn\").outline().label(\"TopCenter\"))\n .child(\"This is a Popover on the Top Center.\"),\n )\n .child(\n Popover::new(\"anchor-top-right\")\n .anchor(Anchor::TopRight)\n .trigger(Button::new(\"btn\").outline().label(\"TopRight\"))\n .child(\"This is a Popover on the Top Right.\"),\n ),\n ),\n )\n .child(\n div().absolute().bottom_0().left_0().w_full().h_10().child(\n h_flex()\n .items_center()\n .justify_between()\n .child(\n Popover::new(\"anchor-bottom-left\")\n .trigger(Button::new(\"btn\").outline().label(\"BottomLeft\"))\n .anchor(Anchor::BottomLeft)\n .child(\"This is a Popover on the Bottom Left.\"),\n )\n .child(\n Popover::new(\"anchor-bottom-center\")\n .trigger(Button::new(\"btn\").outline().label(\"BottomCenter\"))\n .anchor(Anchor::BottomCenter)\n .child(\"This is a Popover on the Bottom Center.\"),\n )\n .child(\n Popover::new(\"anchor-bottom-right\")\n .anchor(Anchor::BottomRight)\n .trigger(Button::new(\"btn\").outline().label(\"BottomRight\"))\n .child(\"This is a Popover on the Bottom Right.\"),\n ),\n ),\n ),\n )\n }\n}\n" }, { "path": "crates/story/src/stories/progress_story.rs", "content": "use gpui::{\n App, AppContext, Context, Entity, Focusable, IntoElement, ParentElement, Render, Styled, Task,\n Window, div, px,\n};\nuse gpui_component::{\n ActiveTheme, IconName, Sizable,\n button::Button,\n h_flex,\n progress::{Progress, ProgressCircle},\n v_flex,\n};\nuse std::time::Duration;\n\nuse crate::section;\n\npub struct ProgressStory {\n focus_handle: gpui::FocusHandle,\n value: f32,\n _task: Option>,\n}\n\nimpl super::Story for ProgressStory {\n fn title() -> &'static str {\n \"Progress\"\n }\n\n fn description() -> &'static str {\n \"Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.\"\n }\n\n fn new_view(window: &mut Window, cx: &mut App) -> Entity {\n Self::view(window, cx)\n }\n}\n\nimpl ProgressStory {\n pub fn view(window: &mut Window, cx: &mut App) -> Entity {\n cx.new(|cx| Self::new(window, cx))\n }\n\n fn new(_: &mut Window, cx: &mut Context) -> Self {\n Self {\n focus_handle: cx.focus_handle(),\n value: 25.,\n _task: None,\n }\n }\n\n pub fn set_value(&mut self, value: f32) {\n self.value = value;\n }\n\n fn start_animation(&mut self, cx: &mut Context) {\n self.value = 0.;\n\n self._task = Some(cx.spawn({\n let entity = cx.entity();\n async move |_, cx| {\n loop {\n cx.background_executor()\n .timer(Duration::from_millis(15))\n .await;\n\n let mut need_break = false;\n _ = entity.update(cx, |this, cx| {\n this.value = (this.value + 2.).min(100.);\n cx.notify();\n\n if this.value >= 100. {\n this._task = None;\n need_break = true;\n }\n });\n\n if need_break {\n break;\n }\n }\n }\n }));\n }\n}\n\nimpl Focusable for ProgressStory {\n fn focus_handle(&self, _: &gpui::App) -> gpui::FocusHandle {\n self.focus_handle.clone()\n }\n}\n\nimpl Render for ProgressStory {\n fn render(&mut self, _: &mut Window, cx: &mut Context) -> impl IntoElement {\n v_flex()\n .w_full()\n .gap_3()\n .child(\n h_flex()\n .w_full()\n .gap_3()\n .justify_between()\n .child(\n h_flex()\n .gap_2()\n .child(Button::new(\"button-1\").small().label(\"0%\").on_click(\n cx.listener(|this, _, _, _| {\n this.set_value(0.);\n }),\n ))\n .child(Button::new(\"button-2\").small().label(\"25%\").on_click(\n cx.listener(|this, _, _, _| {\n this.set_value(25.);\n }),\n ))\n .child(Button::new(\"button-3\").small().label(\"75%\").on_click(\n cx.listener(|this, _, _, _| {\n this.set_value(75.);\n }),\n ))\n .child(Button::new(\"button-4\").small().label(\"100%\").on_click(\n cx.listener(|this, _, _, _| {\n this.set_value(100.);\n }),\n ))\n .child(\n Button::new(\"circle-animation-button\")\n .small()\n .icon(IconName::Play)\n .on_click(cx.listener(|this, _, _, cx| {\n this.start_animation(cx);\n })),\n ),\n )\n .child(\n h_flex()\n .gap_2()\n .child(\n Button::new(\"circle-button-5\")\n .icon(IconName::Minus)\n .on_click(cx.listener(|this, _, _, _| {\n this.set_value((this.value - 1.).max(0.));\n })),\n )\n .child(\n Button::new(\"circle-button-6\")\n .icon(IconName::Plus)\n .on_click(cx.listener(|this, _, _, _| {\n this.set_value((this.value + 1.).min(100.));\n })),\n ),\n ),\n )\n .child(\n section(\"Progress Bar\")\n .max_w_md()\n .child(Progress::new(\"progress-1\").value(self.value)),\n )\n .child(\n section(\"Custom Style\").max_w_md().child(\n Progress::new(\"progress-2\")\n .value(32.)\n .h(px(16.))\n .rounded(px(2.))\n .color(cx.theme().green_light)\n .border_2()\n .border_color(cx.theme().green),\n ),\n )\n .child(\n section(\"Circle Progress\").max_w_md().child(\n ProgressCircle::new(\"circle-progress-1\")\n .value(self.value)\n .size_20()\n .child(\n v_flex()\n .size_full()\n .items_center()\n .justify_center()\n .gap_1()\n .child(\n div()\n .child(format!(\"{}%\", self.value))\n .text_color(cx.theme().progress_bar),\n )\n .child(div().child(\"Loading\").text_xs()),\n ),\n ),\n )\n .child(\n section(\"With size\").max_w_md().child(\n h_flex()\n .gap_2()\n .child(\n ProgressCircle::new(\"circle-progress-1\")\n .value(self.value)\n .large(),\n )\n .child(ProgressCircle::new(\"circle-progress-1\").value(self.value))\n .child(\n ProgressCircle::new(\"circle-progress-1\")\n .value(self.value)\n .small(),\n )\n .child(\n ProgressCircle::new(\"circle-progress-1\")\n .value(self.value)\n .xsmall(),\n ),\n ),\n )\n .child(\n section(\"With Label\").max_w_md().child(\n h_flex()\n .gap_2()\n .child(\n ProgressCircle::new(\"circle-progress-1\")\n .color(cx.theme().primary)\n .value(self.value)\n .size_4(),\n )\n .child(\"Downloading...\"),\n ),\n )\n .child(\n section(\"Circle with Color\").max_w_md().child(\n ProgressCircle::new(\"circle-progress-1\")\n .color(cx.theme().yellow)\n .value(self.value)\n .size_12(),\n ),\n )\n }\n}\n" }, { "path": "crates/story/src/stories/radio_story.rs", "content": "use gpui::{\n App, AppContext, Context, Entity, Focusable, IntoElement, ParentElement, Render, Styled,\n Window, div, px,\n};\n\nuse gpui_component::{\n ActiveTheme, Sizable, h_flex,\n radio::{Radio, RadioGroup},\n v_flex,\n};\n\nuse crate::section;\n\npub struct RadioStory {\n focus_handle: gpui::FocusHandle,\n radio_check1: bool,\n radio_check2: bool,\n radio_group_checked: Option,\n}\n\nimpl super::Story for RadioStory {\n fn title() -> &'static str {\n \"Radio\"\n }\n\n fn description() -> &'static str {\n \"A set of checkable buttons—known as radio buttons—where no more than one of the buttons can be checked at a time.\"\n }\n\n fn new_view(window: &mut Window, cx: &mut App) -> Entity {\n Self::view(window, cx)\n }\n}\n\nimpl RadioStory {\n pub fn view(window: &mut Window, cx: &mut App) -> Entity {\n cx.new(|cx| Self::new(window, cx))\n }\n\n fn new(_: &mut Window, cx: &mut Context) -> Self {\n Self {\n focus_handle: cx.focus_handle(),\n radio_check1: false,\n radio_check2: true,\n radio_group_checked: Some(1),\n }\n }\n}\n\nimpl Focusable for RadioStory {\n fn focus_handle(&self, _: &gpui::App) -> gpui::FocusHandle {\n self.focus_handle.clone()\n }\n}\n\nimpl Render for RadioStory {\n fn render(&mut self, _: &mut Window, cx: &mut Context) -> impl IntoElement {\n v_flex()\n .gap_6()\n .child(\n section(\"Radio\")\n .max_w_md()\n .child(\n Radio::new(\"radio1\")\n .checked(self.radio_check1)\n .on_click(cx.listener(|this, checked, _, _| {\n this.radio_check1 = *checked;\n })),\n )\n .child(\n Radio::new(\"radio2\")\n .label(\"Radio 2\")\n .checked(self.radio_check2)\n .on_click(cx.listener(|this, checked, _, _| {\n this.radio_check2 = *checked;\n })),\n ),\n )\n .child(\n section(\"Disabled\")\n .child(Radio::new(\"a\").label(\"Disabled\").disabled(true))\n .child(\n Radio::new(\"b\")\n .label(\"Disabled with Checked\")\n .checked(true)\n .disabled(true),\n ),\n )\n .child(\n section(\"Multi-line Label\").child(\n Radio::new(\"radio3\")\n .label(\"The long long label text.\")\n .child(\n div()\n .text_color(cx.theme().muted_foreground)\n .child(\"This line should wrap when the text is too long.\"),\n )\n .w(px(300.))\n .checked(true)\n .disabled(true),\n ),\n )\n .child(\n section(\"Sizeable\").child(\n h_flex()\n .h_full()\n .gap_x_4()\n .child(\n Radio::new(\"xsmall\")\n .label(\"Small\")\n .xsmall()\n .checked(self.radio_check2)\n .on_click(cx.listener(|this, v, _, _| {\n this.radio_check2 = *v;\n })),\n )\n .child(\n Radio::new(\"large\")\n .label(\"Large\")\n .large()\n .checked(self.radio_check2)\n .on_click(cx.listener(|this, v, _, _| {\n this.radio_check2 = *v;\n })),\n ),\n ),\n )\n .child(\n section(\"Radio Group\").max_w_md().child(\n v_flex().child(\n RadioGroup::horizontal(\"radio_group_1\")\n .children([\"One\", \"Two\", \"Three\"])\n .selected_index(self.radio_group_checked)\n .on_click(cx.listener(|this, selected_ix: &usize, _, cx| {\n this.radio_group_checked = Some(*selected_ix);\n cx.notify();\n })),\n ),\n ),\n )\n .child(\n section(\"Radio Group Vertical (With container style)\")\n .max_w_md()\n .child(\n v_flex().items_center().content_center().child(\n RadioGroup::vertical(\"radio_group_2\")\n .w(px(220.))\n .p_2()\n .border_1()\n .border_color(cx.theme().border)\n .rounded(cx.theme().radius)\n .disabled(true)\n .child(Radio::new(\"one1\").label(\"United States\"))\n .child(Radio::new(\"one2\").label(\"Canada\"))\n .child(Radio::new(\"one3\").label(\"Mexico\"))\n .selected_index(Some(1)),\n ),\n ),\n )\n }\n}\n" }, { "path": "crates/story/src/stories/rating_story.rs", "content": "use gpui::{\n App, AppContext, Context, Entity, Focusable, IntoElement, ParentElement, Render, Styled, Window,\n};\nuse gpui_component::{\n ActiveTheme, IconName, Selectable as _, Sizable as _, Size,\n button::{Button, ButtonGroup},\n h_flex,\n rating::Rating,\n v_flex,\n};\n\nuse crate::section;\n\npub struct RatingStory {\n focus_handle: gpui::FocusHandle,\n size: Size,\n value: usize,\n}\n\nimpl super::Story for RatingStory {\n fn title() -> &'static str {\n \"Rating\"\n }\n\n fn description() -> &'static str {\n \"A simple interactive star rating component.\"\n }\n\n fn new_view(window: &mut Window, cx: &mut App) -> Entity {\n Self::view(window, cx)\n }\n}\n\nimpl RatingStory {\n pub fn view(window: &mut Window, cx: &mut App) -> Entity {\n cx.new(|cx| Self::new(window, cx))\n }\n\n fn new(_: &mut Window, cx: &mut Context) -> Self {\n Self {\n focus_handle: cx.focus_handle(),\n size: Size::default(),\n value: 3,\n }\n }\n}\n\nimpl Focusable for RatingStory {\n fn focus_handle(&self, _: &gpui::App) -> gpui::FocusHandle {\n self.focus_handle.clone()\n }\n}\n\npub fn init(_cx: &mut App) {\n // No global init required for RatingStory\n}\n\nimpl Render for RatingStory {\n fn render(&mut self, _: &mut Window, cx: &mut Context) -> impl IntoElement {\n v_flex()\n .w_full()\n .gap_3()\n .child(\n h_flex().w_full().gap_3().child(\n ButtonGroup::new(\"toggle-size\")\n .outline()\n .compact()\n .child(\n Button::new(\"xsmall\")\n .label(\"XSmall\")\n .selected(self.size == Size::XSmall),\n )\n .child(\n Button::new(\"small\")\n .label(\"Small\")\n .selected(self.size == Size::Small),\n )\n .child(\n Button::new(\"medium\")\n .label(\"Medium\")\n .selected(self.size == Size::Medium),\n )\n .child(\n Button::new(\"large\")\n .label(\"Large\")\n .selected(self.size == Size::Large),\n )\n .on_click(cx.listener(|this, selecteds: &Vec, _, cx| {\n let size = match selecteds[0] {\n 0 => Size::XSmall,\n 1 => Size::Small,\n 2 => Size::Medium,\n 3 => Size::Large,\n _ => unreachable!(),\n };\n this.size = size;\n cx.notify();\n })),\n ),\n )\n .child(\n section(\"Basic Rating\").max_w_md().child(\n v_flex()\n .w_full()\n .gap_3()\n .justify_center()\n .items_center()\n .child(\n Rating::new(\"rating-1\")\n .with_size(self.size)\n .value(self.value)\n .max(5)\n .on_click(cx.listener(|this, value: &usize, _, cx| {\n this.value = *value;\n cx.notify();\n })),\n )\n .child(\n h_flex()\n .gap_x_2()\n .child(\n Button::new(\"r-dec\")\n .small()\n .outline()\n .icon(IconName::Minus)\n .on_click(cx.listener(|this, _, _, cx| {\n let v = this.value.saturating_sub(1);\n this.value = v;\n cx.notify();\n })),\n )\n .child(\n Button::new(\"r-inc\")\n .small()\n .outline()\n .icon(IconName::Plus)\n .on_click(cx.listener(|this, _, _, cx| {\n let v = (this.value + 1).min(5);\n this.value = v;\n cx.notify();\n })),\n ),\n ),\n ),\n )\n .child(\n section(\"Disabled\").max_w_md().child(\n Rating::new(\"rating-2\")\n .with_size(self.size)\n .value(2)\n .color(cx.theme().green)\n .max(5)\n .disabled(true),\n ),\n )\n .child(\n section(\"Custom Color\").max_w_md().child(\n Rating::new(\"rating-3\")\n .large()\n .value(self.value)\n .color(cx.theme().green)\n .max(5),\n ),\n )\n }\n}\n" }, { "path": "crates/story/src/stories/resizable_story.rs", "content": "use gpui::{\n AnyElement, App, AppContext, Context, Entity, FocusHandle, Focusable, IntoElement,\n ParentElement as _, Pixels, Render, SharedString, Styled, Window, div, px,\n};\nuse gpui_component::{\n ActiveTheme,\n resizable::{h_resizable, resizable_panel, v_resizable},\n v_flex,\n};\n\npub struct ResizableStory {\n focus_handle: FocusHandle,\n}\n\nimpl super::Story for ResizableStory {\n fn title() -> &'static str {\n \"Resizable\"\n }\n\n fn description() -> &'static str {\n \"The resizable panels.\"\n }\n\n fn new_view(window: &mut Window, cx: &mut App) -> Entity {\n Self::view(window, cx)\n }\n}\n\nimpl Focusable for ResizableStory {\n fn focus_handle(&self, _: &gpui::App) -> gpui::FocusHandle {\n self.focus_handle.clone()\n }\n}\n\nimpl ResizableStory {\n pub fn view(window: &mut Window, cx: &mut App) -> Entity {\n cx.new(|cx| Self::new(window, cx))\n }\n\n fn new(_: &mut Window, cx: &mut App) -> Self {\n Self {\n focus_handle: cx.focus_handle(),\n }\n }\n}\n\nfn panel_box(content: impl Into, _: &App) -> AnyElement {\n div()\n .p_4()\n .size_full()\n .child(content.into())\n .into_any_element()\n}\n\nimpl Render for ResizableStory {\n fn render(&mut self, _: &mut Window, cx: &mut Context) -> impl IntoElement {\n v_flex()\n .size_full()\n .gap_6()\n .child(\n div()\n .h(px(600.))\n .border_1()\n .border_color(cx.theme().border)\n .child(\n v_resizable(\"resizable-1\")\n .on_resize(|state, _, cx| {\n println!(\"Resized: {:?}\", state.read(cx).sizes());\n })\n .child(\n h_resizable(\"resizable-1.1\")\n .size(px(150.))\n .child(\n resizable_panel()\n .size(px(150.))\n .size_range(px(120.)..px(300.))\n .child(panel_box(\"Left (120px .. 300px)\", cx)),\n )\n .child(panel_box(\"Center\", cx))\n .child(\n resizable_panel()\n .size(px(300.))\n .child(panel_box(\"Right\", cx)),\n ),\n )\n .child(panel_box(\"Center\", cx))\n .child(\n resizable_panel()\n .size(px(80.))\n .size_range(px(80.)..Pixels::MAX)\n .child(panel_box(\"Bottom (80px .. 150px)\", cx)),\n ),\n ),\n )\n .child(\n div()\n .h(px(400.))\n .border_1()\n .border_color(cx.theme().border)\n .child(\n h_resizable(\"resizable-3\")\n .child(\n resizable_panel()\n .size(px(200.))\n .size_range(px(200.)..px(400.))\n .child(panel_box(\"Left 2\", cx)),\n )\n .child(panel_box(\"Right (Grow)\", cx)),\n ),\n )\n }\n}\n" }, { "path": "crates/story/src/stories/scrollbar_story.rs", "content": "use std::rc::Rc;\n\nuse gpui::{\n App, AppContext, Context, Entity, FocusHandle, Focusable, IntoElement, ParentElement, Pixels,\n Render, Size, Styled, UniformListScrollHandle, Window, div, px, size, uniform_list,\n};\nuse gpui_component::{\n ActiveTheme as _, Selectable,\n button::{Button, ButtonGroup},\n h_flex,\n scroll::ScrollableElement,\n v_flex,\n};\n\npub struct ScrollbarStory {\n focus_handle: FocusHandle,\n items: Rc>,\n item_sizes: Rc>>,\n test_width: Pixels,\n size_mode: usize,\n scroll_handle: UniformListScrollHandle,\n}\n\nconst ITEM_HEIGHT: Pixels = px(50.);\n\nimpl ScrollbarStory {\n fn new(_: &mut Window, cx: &mut Context) -> Self {\n let items: Rc> = Rc::new((0..5000).map(|i| format!(\"Item {}\", i)).collect());\n let test_width = px(3000.);\n let item_sizes = items\n .iter()\n .map(|_| size(test_width, ITEM_HEIGHT))\n .collect::>();\n\n Self {\n focus_handle: cx.focus_handle(),\n items,\n item_sizes: Rc::new(item_sizes),\n test_width,\n size_mode: 0,\n scroll_handle: UniformListScrollHandle::new(),\n }\n }\n\n pub fn view(window: &mut Window, cx: &mut App) -> Entity {\n cx.new(|cx| Self::new(window, cx))\n }\n\n pub fn change_test_cases(&mut self, n: usize, cx: &mut Context) {\n self.size_mode = n;\n if n == 0 {\n self.items = Rc::new((0..5000).map(|i| format!(\"Item {}\", i)).collect());\n self.test_width = px(3000.);\n } else if n == 1 {\n self.items = Rc::new((0..100).map(|i| format!(\"Item {}\", i)).collect());\n self.test_width = px(10000.);\n } else if n == 2 {\n self.items = Rc::new((0..500000).map(|i| format!(\"Item {}\", i)).collect());\n self.test_width = px(10000.);\n } else {\n self.items = Rc::new((0..5).map(|i| format!(\"Item {}\", i)).collect());\n self.test_width = px(10000.);\n }\n\n self.item_sizes = self\n .items\n .iter()\n .map(|_| size(self.test_width, ITEM_HEIGHT))\n .collect::>()\n .into();\n cx.notify();\n }\n\n fn render_buttons(&mut self, cx: &mut Context) -> impl IntoElement {\n h_flex().gap_2().justify_between().child(\n h_flex().gap_2().child(\n ButtonGroup::new(\"test-cases\")\n .outline()\n .compact()\n .child(\n Button::new(\"test-0\")\n .label(\"Size 0\")\n .selected(self.size_mode == 0),\n )\n .child(\n Button::new(\"test-1\")\n .label(\"Size 1\")\n .selected(self.size_mode == 1),\n )\n .child(\n Button::new(\"test-2\")\n .label(\"Size 2\")\n .selected(self.size_mode == 2),\n )\n .child(\n Button::new(\"test-3\")\n .label(\"Size 3\")\n .selected(self.size_mode == 3),\n )\n .on_click(cx.listener(|view, clicks: &Vec, _, cx| {\n if clicks.contains(&0) {\n view.change_test_cases(0, cx)\n } else if clicks.contains(&1) {\n view.change_test_cases(1, cx)\n } else if clicks.contains(&2) {\n view.change_test_cases(2, cx)\n } else if clicks.contains(&3) {\n view.change_test_cases(3, cx)\n }\n })),\n ),\n )\n }\n}\n\nimpl super::Story for ScrollbarStory {\n fn title() -> &'static str {\n \"Scrollbar\"\n }\n\n fn description() -> &'static str {\n \"Add scrollbar to a scrollable element.\"\n }\n\n fn new_view(window: &mut Window, cx: &mut App) -> Entity {\n Self::view(window, cx)\n }\n}\n\nimpl Focusable for ScrollbarStory {\n fn focus_handle(&self, _: &gpui::App) -> gpui::FocusHandle {\n self.focus_handle.clone()\n }\n}\n\nimpl Render for ScrollbarStory {\n fn render(\n &mut self,\n _: &mut gpui::Window,\n cx: &mut gpui::Context,\n ) -> impl gpui::IntoElement {\n v_flex()\n .size_full()\n .gap_4()\n .child(self.render_buttons(cx))\n .child({\n div()\n .relative()\n .border_1()\n .border_color(cx.theme().border)\n .flex_1()\n .child(\n uniform_list(\"list\", self.items.len(), {\n let items = self.items.clone();\n move |visible_range, _, cx| {\n let mut elements = Vec::with_capacity(visible_range.len());\n for ix in visible_range {\n let item = &items[ix];\n elements.push(\n div()\n .h(ITEM_HEIGHT)\n .pt_1()\n .items_center()\n .justify_center()\n .text_sm()\n .child(\n div()\n .p_2()\n .bg(cx.theme().secondary)\n .child(item.to_string()),\n ),\n );\n }\n elements\n }\n })\n .py_1()\n .px_3()\n .size_full()\n .track_scroll(&self.scroll_handle),\n )\n .vertical_scrollbar(&self.scroll_handle)\n })\n }\n}\n" }, { "path": "crates/story/src/stories/select_story.rs", "content": "use gpui::*;\nuse gpui_component::{button::*, checkbox::*, divider::*, input::*, select::*, *};\nuse itertools::Itertools as _;\nuse serde::{Deserialize, Serialize};\n\nuse crate::section;\n\npub fn init(_: &mut App) {}\n\n#[derive(Debug, Clone, PartialEq, Eq, Serialize, Deserialize)]\nstruct Country {\n name: SharedString,\n code: SharedString,\n}\n\nimpl Country {\n pub fn letter_prefix(&self) -> char {\n self.name.chars().next().unwrap_or(' ')\n }\n}\n\nimpl SelectItem for Country {\n type Value = SharedString;\n\n fn title(&self) -> SharedString {\n self.name.clone()\n }\n\n fn display_title(&self) -> Option {\n Some(format!(\"{} ({})\", self.name, self.code).into_any_element())\n }\n\n fn value(&self) -> &Self::Value {\n &self.code\n }\n}\n\npub struct SelectStory {\n disabled: bool,\n country_select: Entity>>>,\n fruit_select: Entity>>,\n simple_select1: Entity>>,\n simple_select2: Entity>>,\n simple_select3: Entity>>,\n disabled_select: Entity>>,\n appearance_select: Entity>>,\n input_state: Entity,\n}\n\nimpl super::Story for SelectStory {\n fn title() -> &'static str {\n \"Select\"\n }\n\n fn description() -> &'static str {\n \"Displays a list of options for the user to pick from—triggered by a button.\"\n }\n\n fn new_view(window: &mut Window, cx: &mut App) -> Entity {\n Self::view(window, cx)\n }\n}\n\nimpl Focusable for SelectStory {\n fn focus_handle(&self, cx: &gpui::App) -> gpui::FocusHandle {\n self.fruit_select.focus_handle(cx)\n }\n}\n\nimpl SelectStory {\n fn new(window: &mut Window, cx: &mut App) -> Entity {\n let countries =\n serde_json::from_str::>(include_str!(\"../fixtures/countries.json\"))\n .unwrap();\n let mut grouped_countries: SearchableVec> = SearchableVec::new(vec![]);\n for (prefix, items) in countries.iter().chunk_by(|c| c.letter_prefix()).into_iter() {\n let items = items.cloned().collect::>();\n grouped_countries.push(SelectGroup::new(prefix.to_string()).items(items));\n }\n\n let country_select = cx.new(|cx| {\n SelectState::new(\n grouped_countries,\n Some(IndexPath::default().row(8).section(2)),\n window,\n cx,\n )\n .searchable(true)\n });\n let appearance_select = cx.new(|cx| {\n SelectState::new(\n vec![\n \"CN\".into(),\n \"US\".into(),\n \"HK\".into(),\n \"JP\".into(),\n \"KR\".into(),\n ],\n Some(IndexPath::default()),\n window,\n cx,\n )\n });\n let input_state = cx.new(|cx| InputState::new(window, cx).placeholder(\"Your phone number\"));\n\n let fruits = SearchableVec::new(vec![\n \"Apple\",\n \"Orange\",\n \"Banana\",\n \"Grape\",\n \"Pineapple\",\n \"Watermelon & This is a long long long long long long long long long title\",\n \"Avocado\",\n ]);\n let fruit_select = cx.new(|cx| SelectState::new(fruits, None, window, cx).searchable(true));\n\n cx.new(|cx| {\n cx.subscribe_in(&country_select, window, Self::on_select_event)\n .detach();\n\n Self {\n disabled: false,\n country_select,\n fruit_select,\n simple_select1: cx.new(|cx| {\n SelectState::new(\n vec![\n \"GPUI\", \"Iced\", \"egui\", \"Makepad\", \"Slint\", \"QT\", \"ImGui\", \"Cocoa\",\n \"WinUI\",\n ],\n Some(IndexPath::default()),\n window,\n cx,\n )\n }),\n simple_select2: cx.new(|cx| {\n let mut select = SelectState::new(SearchableVec::new(vec![]), None, window, cx)\n .searchable(true);\n\n select.set_items(\n SearchableVec::new(vec![\"Rust\", \"Go\", \"C++\", \"JavaScript\"]),\n window,\n cx,\n );\n\n select\n }),\n simple_select3: cx\n .new(|cx| SelectState::new(Vec::::new(), None, window, cx)),\n disabled_select: cx\n .new(|cx| SelectState::new(Vec::::new(), None, window, cx)),\n appearance_select,\n input_state,\n }\n })\n }\n\n pub fn view(window: &mut Window, cx: &mut App) -> Entity {\n Self::new(window, cx)\n }\n\n fn on_select_event(\n &mut self,\n _: &Entity>>>,\n event: &SelectEvent>>,\n _window: &mut Window,\n _cx: &mut Context,\n ) {\n match event {\n SelectEvent::Confirm(value) => println!(\"Selected country: {:?}\", value),\n }\n }\n\n fn toggle_disabled(&mut self, disabled: bool, _: &mut Window, cx: &mut Context) {\n self.disabled = disabled;\n cx.notify();\n }\n}\n\nimpl Render for SelectStory {\n fn render(&mut self, _: &mut Window, cx: &mut Context) -> impl IntoElement {\n v_flex()\n .size_full()\n .gap_4()\n .child(\n Checkbox::new(\"disable-selects\")\n .label(\"Disabled\")\n .checked(self.disabled)\n .on_click(cx.listener(|this, checked, window, cx| {\n this.toggle_disabled(*checked, window, cx);\n })),\n )\n .child(\n section(\"Select\").max_w_128().child(\n Select::new(&self.country_select)\n .search_placeholder(\"Search country by name or code\")\n .cleanable(true)\n .disabled(self.disabled),\n ),\n )\n .child(\n section(\"Searchable\").max_w_128().child(\n Select::new(&self.fruit_select)\n .disabled(self.disabled)\n .icon(IconName::Search)\n .w(px(320.))\n .menu_width(px(400.)),\n ),\n )\n .child(\n section(\"Disabled\")\n .max_w_128()\n .child(Select::new(&self.disabled_select).disabled(true)),\n )\n .child(\n section(\"With preview label\").max_w_128().child(\n Select::new(&self.simple_select1)\n .disabled(self.disabled)\n .small()\n .placeholder(\"UI\")\n .title_prefix(\"UI: \"),\n ),\n )\n .child(\n section(\"Searchable Select\").max_w_128().child(\n Select::new(&self.simple_select2)\n .disabled(self.disabled)\n .small()\n .placeholder(\"Language\")\n .title_prefix(\"Language: \"),\n ),\n )\n .child(\n section(\"Empty Items\").max_w_128().child(\n Select::new(&self.simple_select3)\n .disabled(self.disabled)\n .small()\n .empty(\n h_flex()\n .h_24()\n .justify_center()\n .text_color(cx.theme().muted_foreground)\n .child(\"No Data\"),\n ),\n ),\n )\n .child(\n section(\"Appearance false with Input\").max_w_128().child(\n h_flex()\n .border_1()\n .border_color(cx.theme().input)\n .rounded(cx.theme().radius_lg)\n .text_color(cx.theme().secondary_foreground)\n .w_full()\n .gap_1()\n .child(\n div().w(px(140.)).child(\n Select::new(&self.appearance_select)\n .appearance(false)\n .py_2()\n .pl_3(),\n ),\n )\n .child(Divider::vertical())\n .child(\n div().flex_1().child(\n Input::new(&self.input_state)\n .appearance(false)\n .pr_3()\n .py_2(),\n ),\n )\n .child(\n div()\n .p_2()\n .child(Button::new(\"send\").small().ghost().label(\"Send\")),\n ),\n ),\n )\n .child(\n section(\"Selected Values\").max_w_lg().child(\n v_flex()\n .gap_3()\n .child(format!(\n \"Country: {:?}\",\n self.country_select.read(cx).selected_value()\n ))\n .child(format!(\n \"fruit: {:?}\",\n self.fruit_select.read(cx).selected_value()\n ))\n .child(format!(\n \"UI: {:?}\",\n self.simple_select1.read(cx).selected_value()\n ))\n .child(format!(\n \"Language: {:?}\",\n self.simple_select2.read(cx).selected_value()\n ))\n .child(\"This is other text.\"),\n ),\n )\n }\n}\n" }, { "path": "crates/story/src/stories/settings_story.rs", "content": "use gpui::{\n App, AppContext, Axis, Context, Element, Entity, FocusHandle, Focusable, Global, IntoElement,\n ParentElement as _, Render, SharedString, Styled, Window, px,\n};\n\nuse gpui_component::{\n ActiveTheme, Icon, IconName, Sizable, Size, Theme, ThemeMode,\n button::Button,\n group_box::GroupBoxVariant,\n h_flex,\n label::Label,\n setting::{\n NumberFieldOptions, RenderOptions, SettingField, SettingFieldElement, SettingGroup,\n SettingItem, SettingPage, Settings,\n },\n text::markdown,\n v_flex,\n};\n\nstruct AppSettings {\n auto_switch_theme: bool,\n cli_path: SharedString,\n font_family: SharedString,\n font_size: f64,\n line_height: f64,\n notifications_enabled: bool,\n auto_update: bool,\n resettable: bool,\n}\n\nimpl Default for AppSettings {\n fn default() -> Self {\n Self {\n auto_switch_theme: false,\n cli_path: \"/usr/local/bin/bash\".into(),\n font_family: \"Arial\".into(),\n font_size: 14.0,\n line_height: 12.0,\n notifications_enabled: true,\n auto_update: true,\n resettable: true,\n }\n }\n}\n\nimpl Global for AppSettings {}\n\nimpl AppSettings {\n fn global(cx: &App) -> &AppSettings {\n cx.global::()\n }\n\n pub fn global_mut(cx: &mut App) -> &mut AppSettings {\n cx.global_mut::()\n }\n}\n\npub struct SettingsStory {\n focus_handle: FocusHandle,\n group_variant: GroupBoxVariant,\n size: Size,\n}\n\nstruct OpenURLSettingField {\n label: SharedString,\n url: SharedString,\n}\n\nimpl OpenURLSettingField {\n fn new(label: impl Into, url: impl Into) -> Self {\n Self {\n label: label.into(),\n url: url.into(),\n }\n }\n}\n\nimpl SettingFieldElement for OpenURLSettingField {\n type Element = Button;\n fn render_field(&self, options: &RenderOptions, _: &mut Window, _: &mut App) -> Self::Element {\n let url = self.url.clone();\n Button::new(\"open-url\")\n .outline()\n .label(self.label.clone())\n .with_size(options.size)\n .on_click(move |_, _window, cx| {\n cx.open_url(url.as_str());\n })\n }\n}\n\nimpl super::Story for SettingsStory {\n fn title() -> &'static str {\n \"Settings\"\n }\n\n fn description() -> &'static str {\n \"A collection of settings groups and items for the application.\"\n }\n\n fn new_view(window: &mut Window, cx: &mut App) -> Entity {\n Self::view(window, cx)\n }\n\n fn paddings() -> gpui::Pixels {\n px(0.)\n }\n}\n\nimpl SettingsStory {\n pub fn view(window: &mut Window, cx: &mut App) -> Entity {\n cx.new(|cx| Self::new(window, cx))\n }\n\n fn new(_: &mut Window, cx: &mut Context) -> Self {\n cx.set_global::(AppSettings::default());\n\n Self {\n focus_handle: cx.focus_handle(),\n group_variant: GroupBoxVariant::Outline,\n size: Size::default(),\n }\n }\n\n fn setting_pages(&self, _: &mut Window, cx: &mut Context) -> Vec {\n let view = cx.entity();\n let default_settings = AppSettings::default();\n let resettable = AppSettings::global(cx).resettable;\n\n vec![\n SettingPage::new(\"General\")\n .resettable(resettable)\n .default_open(true)\n .icon(Icon::new(IconName::Settings2))\n .groups(vec![\n SettingGroup::new().title(\"Appearance\").items(vec![\n SettingItem::new(\n \"Dark Mode\",\n SettingField::switch(\n |cx: &App| cx.theme().mode.is_dark(),\n |val: bool, cx: &mut App| {\n let mode = if val {\n ThemeMode::Dark\n } else {\n ThemeMode::Light\n };\n Theme::global_mut(cx).mode = mode;\n Theme::change(mode, None, cx);\n },\n )\n .default_value(false),\n )\n .description(\"Switch between light and dark themes.\"),\n SettingItem::new(\n \"Auto Switch Theme\",\n SettingField::checkbox(\n |cx: &App| AppSettings::global(cx).auto_switch_theme,\n |val: bool, cx: &mut App| {\n AppSettings::global_mut(cx).auto_switch_theme = val;\n },\n )\n .default_value(default_settings.auto_switch_theme),\n )\n .description(\"Automatically switch theme based on system settings.\"),\n SettingItem::new(\n \"resettable\",\n SettingField::switch(\n |cx: &App| AppSettings::global(cx).resettable,\n |checked: bool, cx: &mut App| {\n AppSettings::global_mut(cx).resettable = checked\n },\n ),\n )\n .description(\"Enable/Disable reset button for settings.\"),\n SettingItem::new(\n \"Group Variant\",\n SettingField::dropdown(\n vec![\n (GroupBoxVariant::Normal.as_str().into(), \"Normal\".into()),\n (GroupBoxVariant::Outline.as_str().into(), \"Outline\".into()),\n (GroupBoxVariant::Fill.as_str().into(), \"Fill\".into()),\n ],\n {\n let view = view.clone();\n move |cx: &App| {\n SharedString::from(\n view.read(cx).group_variant.as_str().to_string(),\n )\n }\n },\n {\n let view = view.clone();\n move |val: SharedString, cx: &mut App| {\n view.update(cx, |view, cx| {\n view.group_variant =\n GroupBoxVariant::from_str(val.as_str());\n cx.notify();\n });\n }\n },\n )\n .default_value(GroupBoxVariant::Outline.as_str().to_string()),\n )\n .description(\"Select the variant for setting groups.\"),\n SettingItem::new(\n \"Group Size\",\n SettingField::dropdown(\n vec![\n (Size::Medium.as_str().into(), \"Medium\".into()),\n (Size::Small.as_str().into(), \"Small\".into()),\n (Size::XSmall.as_str().into(), \"XSmall\".into()),\n ],\n {\n let view = view.clone();\n move |cx: &App| {\n SharedString::from(view.read(cx).size.as_str().to_string())\n }\n },\n {\n let view = view.clone();\n move |val: SharedString, cx: &mut App| {\n view.update(cx, |view, cx| {\n view.size = Size::from_str(val.as_str());\n cx.notify();\n });\n }\n },\n )\n .default_value(Size::default().as_str().to_string()),\n )\n .description(\"Select the size for the setting group.\"),\n ]),\n SettingGroup::new()\n .title(\"Font\")\n .item(\n SettingItem::new(\n \"Font Family\",\n SettingField::dropdown(\n vec![\n (\"Arial\".into(), \"Arial\".into()),\n (\"Helvetica\".into(), \"Helvetica\".into()),\n (\"Times New Roman\".into(), \"Times New Roman\".into()),\n (\"Courier New\".into(), \"Courier New\".into()),\n ],\n |cx: &App| AppSettings::global(cx).font_family.clone(),\n |val: SharedString, cx: &mut App| {\n AppSettings::global_mut(cx).font_family = val;\n },\n )\n .default_value(default_settings.font_family),\n )\n .description(\"Select the font family for the story.\"),\n )\n .item(\n SettingItem::new(\n \"Font Size\",\n SettingField::number_input(\n NumberFieldOptions {\n min: 8.0,\n max: 72.0,\n ..Default::default()\n },\n |cx: &App| AppSettings::global(cx).font_size,\n |val: f64, cx: &mut App| {\n AppSettings::global_mut(cx).font_size = val;\n },\n )\n .default_value(default_settings.font_size),\n )\n .description(\n \"Adjust the font size for better readability between 8 and 72.\",\n ),\n )\n .item(\n SettingItem::new(\n \"Line Height\",\n SettingField::number_input(\n NumberFieldOptions {\n min: 8.0,\n max: 32.0,\n ..Default::default()\n },\n |cx: &App| AppSettings::global(cx).line_height,\n |val: f64, cx: &mut App| {\n AppSettings::global_mut(cx).line_height = val;\n },\n )\n .default_value(default_settings.line_height),\n )\n .description(\n \"Adjust the line height for better readability between 8 and 32.\",\n ),\n ),\n SettingGroup::new().title(\"Other\").items(vec![\n SettingItem::render(|options, _, _| {\n h_flex()\n .w_full()\n .justify_between()\n .flex_wrap()\n .gap_3()\n .child(\"This is a custom element item by use SettingItem::element.\")\n .child(\n Button::new(\"action\")\n .icon(IconName::Globe)\n .label(\"Repository...\")\n .outline()\n .with_size(options.size)\n .on_click(|_, _, cx| {\n cx.open_url(\n \"https://github.com/longbridge/gpui-component\",\n );\n }),\n )\n .into_any_element()\n }),\n SettingItem::new(\n \"CLI Path\",\n SettingField::input(\n |cx: &App| AppSettings::global(cx).cli_path.clone(),\n |val: SharedString, cx: &mut App| {\n println!(\"cli-path set value: {}\", val);\n AppSettings::global_mut(cx).cli_path = val;\n },\n )\n .default_value(default_settings.cli_path),\n )\n .layout(Axis::Vertical)\n .description(\n \"Path to the CLI executable. \\n\\\n This item uses Vertical layout. The title,\\\n description, and field are all aligned vertically with width 100%.\",\n ),\n ]),\n ]),\n SettingPage::new(\"Software Update\")\n .resettable(resettable)\n .icon(Icon::new(IconName::Cpu))\n .groups(vec![SettingGroup::new().title(\"Updates\").items(vec![\n SettingItem::new(\n \"Enable Notifications\",\n SettingField::switch(\n |cx: &App| AppSettings::global(cx).notifications_enabled,\n |val: bool, cx: &mut App| {\n AppSettings::global_mut(cx).notifications_enabled = val;\n },\n )\n .default_value(default_settings.notifications_enabled),\n )\n .description(\"Receive notifications about updates and news.\"),\n SettingItem::new(\n \"Auto Update\",\n SettingField::switch(\n |cx: &App| AppSettings::global(cx).auto_update,\n |val: bool, cx: &mut App| {\n AppSettings::global_mut(cx).auto_update = val;\n },\n )\n .default_value(default_settings.auto_update),\n )\n .description(\"Automatically download and install updates.\"),\n ])]),\n SettingPage::new(\"About\")\n .resettable(resettable)\n .icon(Icon::new(IconName::Info))\n .group(\n SettingGroup::new().item(SettingItem::render(|_options, _, cx| {\n v_flex()\n .gap_3()\n .w_full()\n .items_center()\n .justify_center()\n .child(Icon::new(IconName::GalleryVerticalEnd).size_16())\n .child(\"GPUI Component\")\n .child(\n Label::new(\n \"Rust GUI components for building fantastic cross-platform \\\n desktop application by using GPUI.\",\n )\n .text_sm()\n .text_color(cx.theme().muted_foreground),\n )\n .into_any()\n })),\n )\n .group(SettingGroup::new().title(\"Links\").items(vec![\n SettingItem::new(\n \"GitHub Repository\",\n SettingField::element(OpenURLSettingField::new(\n \"Repository...\",\n \"https://github.com/longbridge/gpui-component\",\n )),\n )\n .description(\"Open the GitHub repository in your default browser.\"),\n SettingItem::new(\n \"Documentation\",\n SettingField::element(OpenURLSettingField::new(\n \"Rust Docs...\",\n \"https://docs.rs/gpui-component\"\n )),\n )\n .description(markdown(\n \"Rust doc for the `gpui-component` crate.\",\n )),\n SettingItem::new(\n \"Website\",\n SettingField::render(|options, _window, _cx| {\n Button::new(\"open-url\")\n .outline()\n .label(\"Website...\")\n .with_size(options.size)\n .on_click(|_, _window, cx| {\n cx.open_url(\"https://longbridge.github.io/gpui-component/\");\n })\n }),\n )\n .description(\"Official website and documentation for the GPUI Component.\"),\n ])),\n ]\n }\n}\n\nimpl Focusable for SettingsStory {\n fn focus_handle(&self, _: &gpui::App) -> gpui::FocusHandle {\n self.focus_handle.clone()\n }\n}\n\nimpl Render for SettingsStory {\n fn render(&mut self, window: &mut Window, cx: &mut Context) -> impl IntoElement {\n Settings::new(\"app-settings\")\n .with_size(self.size)\n .with_group_variant(self.group_variant)\n .pages(self.setting_pages(window, cx))\n }\n}\n" }, { "path": "crates/story/src/stories/sheet_story.rs", "content": "use std::{sync::Arc, time::Duration};\n\nuse fake::Fake;\nuse gpui::{\n App, AppContext, Context, Entity, FocusHandle, Focusable, InteractiveElement as _, IntoElement,\n ParentElement, Render, SharedString, Styled, Task, WeakEntity, Window, div,\n prelude::FluentBuilder as _, px,\n};\n\nuse gpui_component::{\n ActiveTheme as _, Icon, IconName, IndexPath, Placement, WindowExt,\n button::{Button, ButtonVariant, ButtonVariants as _},\n checkbox::Checkbox,\n date_picker::{DatePicker, DatePickerState},\n h_flex,\n input::{Input, InputState},\n list::{List, ListDelegate, ListItem, ListState},\n v_flex,\n};\n\nuse crate::TestAction;\nuse crate::{Story, section};\n\npub struct ListItemDeletegate {\n story: WeakEntity,\n confirmed_index: Option,\n selected_index: Option,\n items: Vec>,\n matches: Vec>,\n}\n\nimpl ListDelegate for ListItemDeletegate {\n type Item = ListItem;\n\n fn items_count(&self, _: usize, _: &App) -> usize {\n self.matches.len()\n }\n\n fn perform_search(\n &mut self,\n query: &str,\n _: &mut Window,\n cx: &mut Context>,\n ) -> Task<()> {\n let query = query.to_string();\n cx.spawn(async move |this, cx| {\n // Simulate a slow search.\n let sleep = (0.05..0.1).fake();\n cx.background_executor().timer(Duration::from_secs_f64(sleep)).await;\n\n this.update(cx, |this, cx| {\n this.delegate_mut().matches = this\n .delegate()\n .items\n .iter()\n .filter(|item| item.to_lowercase().contains(&query.to_lowercase()))\n .cloned()\n .collect();\n cx.notify();\n })\n .ok();\n })\n }\n\n fn render_item(\n &mut self,\n ix: IndexPath,\n _: &mut Window,\n _: &mut Context>,\n ) -> Option {\n let confirmed = Some(ix.row) == self.confirmed_index;\n\n if let Some(item) = self.matches.get(ix.row) {\n let list_item = ListItem::new((\"item\", ix.row))\n .check_icon(IconName::Check)\n .confirmed(confirmed)\n .child(h_flex().items_center().justify_between().child(item.to_string()))\n .suffix(|_, _| {\n Button::new(\"like\")\n .tab_stop(false)\n .icon(IconName::Heart)\n .with_variant(ButtonVariant::Ghost)\n .size(px(18.))\n .on_click(move |_, window, cx| {\n cx.stop_propagation();\n window.prevent_default();\n\n println!(\"You have clicked like.\");\n })\n });\n Some(list_item)\n } else {\n None\n }\n }\n\n fn render_empty(\n &mut self,\n _: &mut Window,\n cx: &mut Context>,\n ) -> impl IntoElement {\n v_flex()\n .size_full()\n .child(Icon::new(IconName::Inbox).size(px(50.)).text_color(cx.theme().muted_foreground))\n .child(\"No matches found\")\n .items_center()\n .justify_center()\n .p_3()\n .bg(cx.theme().muted)\n .text_color(cx.theme().muted_foreground)\n }\n\n fn cancel(&mut self, window: &mut Window, cx: &mut Context>) {\n _ = self.story.update(cx, |this, cx| {\n this.close_sheet(window, cx);\n });\n }\n\n fn confirm(&mut self, _secondary: bool, _: &mut Window, cx: &mut Context>) {\n _ = self.story.update(cx, |this, _| {\n self.confirmed_index = self.selected_index;\n if let Some(ix) = self.confirmed_index {\n if let Some(item) = self.matches.get(ix) {\n this.selected_value = Some(SharedString::from(item.to_string()));\n }\n }\n });\n }\n\n fn set_selected_index(\n &mut self,\n ix: Option,\n _: &mut Window,\n cx: &mut Context>,\n ) {\n self.selected_index = ix.map(|ix| ix.row);\n\n if let Some(_) = ix {\n cx.notify();\n }\n }\n}\n\npub struct SheetStory {\n focus_handle: FocusHandle,\n placement: Option,\n selected_value: Option,\n list: Entity>,\n input1: Entity,\n input2: Entity,\n date: Entity,\n overlay: bool,\n overlay_closable: bool,\n}\n\nimpl Story for SheetStory {\n fn title() -> &'static str {\n \"Sheet\"\n }\n\n fn description() -> &'static str {\n \"Sheet for open a popup in the edge of the window\"\n }\n\n fn new_view(window: &mut Window, cx: &mut App) -> Entity {\n Self::view(window, cx)\n }\n}\n\nimpl SheetStory {\n pub fn view(window: &mut Window, cx: &mut App) -> Entity {\n cx.new(|cx| Self::new(window, cx))\n }\n\n fn new(window: &mut Window, cx: &mut Context) -> Self {\n let items: Vec> = [\n \"Baguette (France)\",\n \"Baklava (Turkey)\",\n \"Beef Wellington (UK)\",\n \"Biryani (India)\",\n \"Borscht (Ukraine)\",\n \"Bratwurst (Germany)\",\n \"Bulgogi (Korea)\",\n \"Burrito (USA)\",\n \"Ceviche (Peru)\",\n \"Chicken Tikka Masala (India)\",\n \"Churrasco (Brazil)\",\n \"Couscous (North Africa)\",\n \"Croissant (France)\",\n \"Dim Sum (China)\",\n \"Empanada (Argentina)\",\n \"Fajitas (Mexico)\",\n \"Falafel (Middle East)\",\n \"Feijoada (Brazil)\",\n \"Fish and Chips (UK)\",\n \"Fondue (Switzerland)\",\n \"Goulash (Hungary)\",\n \"Haggis (Scotland)\",\n \"Kebab (Middle East)\",\n \"Kimchi (Korea)\",\n \"Lasagna (Italy)\",\n \"Maple Syrup Pancakes (Canada)\",\n \"Moussaka (Greece)\",\n \"Pad Thai (Thailand)\",\n \"Paella (Spain)\",\n \"Pancakes (USA)\",\n \"Pasta Carbonara (Italy)\",\n \"Pavlova (Australia)\",\n \"Peking Duck (China)\",\n \"Pho (Vietnam)\",\n \"Pierogi (Poland)\",\n \"Pizza (Italy)\",\n \"Poutine (Canada)\",\n \"Pretzel (Germany)\",\n \"Ramen (Japan)\",\n \"Rendang (Indonesia)\",\n \"Sashimi (Japan)\",\n \"Satay (Indonesia)\",\n \"Shepherd's Pie (Ireland)\",\n \"Sushi (Japan)\",\n \"Tacos (Mexico)\",\n \"Tandoori Chicken (India)\",\n \"Tortilla (Spain)\",\n \"Tzatziki (Greece)\",\n \"Wiener Schnitzel (Austria)\",\n ]\n .iter()\n .map(|s| Arc::new(s.to_string()))\n .collect();\n\n let story = cx.entity().downgrade();\n let delegate = ListItemDeletegate {\n story,\n selected_index: None,\n confirmed_index: None,\n items: items.clone(),\n matches: items.clone(),\n };\n let list = cx.new(|cx| ListState::new(delegate, window, cx).searchable(true));\n let input1 = cx.new(|cx| InputState::new(window, cx).placeholder(\"Your Name\"));\n let input2 = cx.new(|cx| {\n InputState::new(window, cx).placeholder(\"For test focus back on dialog close.\")\n });\n let date = cx.new(|cx| DatePickerState::new(window, cx));\n\n Self {\n focus_handle: cx.focus_handle(),\n placement: None,\n selected_value: None,\n list,\n input1,\n input2,\n date,\n overlay: true,\n overlay_closable: true,\n }\n }\n\n fn open_sheet_at(&mut self, placement: Placement, window: &mut Window, cx: &mut Context) {\n let list = self.list.clone();\n\n let drawer_h = match placement {\n Placement::Left | Placement::Right => px(400.),\n Placement::Top | Placement::Bottom => px(540.),\n };\n\n let overlay = self.overlay;\n let overlay_closable = self.overlay_closable;\n let input1 = self.input1.clone();\n let date = self.date.clone();\n window.open_sheet_at(placement, cx, move |this, _, cx| {\n this.overlay(overlay)\n .overlay_closable(overlay_closable)\n .size(drawer_h)\n .title(\"Sheet Title\")\n .child(\n v_flex()\n .size_full()\n .gap_3()\n .child(Input::new(&input1))\n .child(DatePicker::new(&date).placeholder(\"Date of Birth\"))\n .child(\n Button::new(\"send-notification\").child(\"Test Notification\").on_click(\n |_, window, cx| {\n window\n .push_notification(\"Hello this is message from Sheet.\", cx)\n },\n ),\n )\n .child(\n Button::new(\"confirm-dialog-from-sheet\")\n .child(\"Open Confirm Dialog\")\n .on_click(|_, window, cx| {\n window.open_alert_dialog(cx, move |dialog, _, _| {\n dialog\n .child(\"Confirm dialog opened from sheet.\")\n .on_ok(|_, window, cx| {\n window\n .push_notification(\"You have pressed ok.\", cx);\n true\n })\n .on_cancel(|_, window, cx| {\n window.push_notification(\n \"You have pressed cancel.\",\n cx,\n );\n true\n })\n });\n }),\n )\n .child(\n List::new(&list)\n .border_1()\n .border_color(cx.theme().border)\n .rounded(cx.theme().radius),\n ),\n )\n .footer(\n h_flex()\n .gap_6()\n .items_center()\n .child(Button::new(\"confirm\").primary().label(\"Confirm\").on_click(\n |_, window, cx| {\n window.close_sheet(cx);\n },\n ))\n .child(Button::new(\"cancel\").label(\"Cancel\").on_click(|_, window, cx| {\n window.close_sheet(cx);\n })),\n )\n });\n }\n\n fn close_sheet(&mut self, _: &mut Window, cx: &mut Context) {\n self.placement = None;\n cx.notify();\n }\n\n fn on_action_test_action(\n &mut self,\n _: &TestAction,\n window: &mut Window,\n cx: &mut Context,\n ) {\n window.push_notification(\"You have clicked the TestAction.\", cx);\n }\n}\n\nimpl Focusable for SheetStory {\n fn focus_handle(&self, _cx: &gpui::App) -> FocusHandle {\n self.focus_handle.clone()\n }\n}\n\nimpl Render for SheetStory {\n fn render(&mut self, _: &mut Window, cx: &mut Context) -> impl IntoElement {\n div()\n .id(\"sheet-story\")\n .track_focus(&self.focus_handle)\n .on_action(cx.listener(Self::on_action_test_action))\n .size_full()\n .child(\n v_flex()\n .gap_6()\n .child(\n h_flex()\n .id(\"state\")\n .items_center()\n .gap_3()\n .child(\n Checkbox::new(\"overlay\")\n .label(\"Overlay\")\n .checked(self.overlay)\n .on_click(cx.listener(|view, _, _, cx| {\n view.overlay = !view.overlay;\n cx.notify();\n })),\n )\n .child(\n Checkbox::new(\"closable\")\n .label(\"Overlay Closable\")\n .checked(self.overlay_closable)\n .on_click(cx.listener(|view, _, _, cx| {\n view.overlay_closable = !view.overlay_closable;\n cx.notify();\n })),\n ),\n )\n .child(\n section(\"Normal Sheet\")\n .child(\n Button::new(\"show-sheet-left\")\n .outline()\n .label(\"Left Sheet...\")\n .on_click(cx.listener(|this, _, window, cx| {\n this.open_sheet_at(Placement::Left, window, cx)\n })),\n )\n .child(\n Button::new(\"show-sheet-top\")\n .outline()\n .label(\"Top Sheet...\")\n .on_click(cx.listener(|this, _, window, cx| {\n this.open_sheet_at(Placement::Top, window, cx)\n })),\n )\n .child(\n Button::new(\"show-sheet-right\")\n .outline()\n .label(\"Right Sheet...\")\n .on_click(cx.listener(|this, _, window, cx| {\n this.open_sheet_at(Placement::Right, window, cx)\n })),\n )\n .child(\n Button::new(\"show-sheet-bottom\")\n .outline()\n .label(\"Bottom Sheet...\")\n .on_click(cx.listener(|this, _, window, cx| {\n this.open_sheet_at(Placement::Bottom, window, cx)\n })),\n ),\n )\n .child(\n section(\"Scrollable Sheet\").max_w_md().child(\n Button::new(\"show-scrollable-sheet\")\n .outline()\n .label(\"Scrollable Sheet...\")\n .on_click(cx.listener(|_, _, window, cx| {\n window.open_sheet_at(\n Placement::Right,\n cx,\n move |this, _, _| {\n this.title(\"Scrollable Sheet\")\n .child(\"This is a scrollable sheet.\\n\".repeat(150))\n },\n );\n })),\n ),\n )\n .child(\n section(\"Focus back test\")\n .max_w_md()\n .child(Input::new(&self.input2))\n .child(\n Button::new(\"test-action\")\n .outline()\n .label(\"Test Action\")\n .flex_shrink_0()\n .on_click(|_, window, cx| {\n window.dispatch_action(Box::new(TestAction), cx);\n })\n .tooltip(\n \"This button for test dispatch action, \\\n to make sure when Dialog close,\\\n \\nthis still can handle the action.\",\n ),\n ),\n )\n .when_some(self.selected_value.clone(), |this, selected_value| {\n this.child(\n h_flex().gap_1().child(\"You have selected:\").child(\n div().child(selected_value.to_string()).text_color(gpui::red()),\n ),\n )\n }),\n )\n }\n}\n" }, { "path": "crates/story/src/stories/sidebar_story.rs", "content": "use std::collections::HashMap;\n\nuse gpui::{\n Action, App, AppContext, ClickEvent, Context, Entity, Focusable, IntoElement, ParentElement,\n Render, SharedString, Styled, Window, div, prelude::FluentBuilder, px, relative,\n};\n\nuse gpui_component::{\n ActiveTheme, Icon, IconName, Side, Sizable,\n badge::Badge,\n breadcrumb::{Breadcrumb, BreadcrumbItem},\n divider::Divider,\n h_flex,\n menu::DropdownMenu,\n sidebar::{\n Sidebar, SidebarFooter, SidebarGroup, SidebarHeader, SidebarMenu, SidebarMenuItem,\n SidebarToggleButton,\n },\n switch::Switch,\n v_flex,\n};\nuse serde::Deserialize;\n\n#[derive(Action, Clone, PartialEq, Eq, Deserialize)]\n#[action(namespace = sidebar_story, no_json)]\npub struct SelectCompany(SharedString);\n\npub struct SidebarStory {\n active_items: HashMap,\n last_active_item: Item,\n active_subitem: Option,\n collapsed: bool,\n side: Side,\n click_to_open_submenu: bool,\n focus_handle: gpui::FocusHandle,\n checked: bool,\n}\n\nimpl SidebarStory {\n pub fn view(window: &mut Window, cx: &mut App) -> Entity {\n cx.new(|cx| Self::new(window, cx))\n }\n\n fn new(_: &mut Window, cx: &mut Context) -> Self {\n let mut active_items = HashMap::new();\n active_items.insert(Item::Playground, true);\n\n Self {\n active_items,\n last_active_item: Item::Playground,\n active_subitem: None,\n collapsed: false,\n side: Side::Left,\n focus_handle: cx.focus_handle(),\n checked: false,\n click_to_open_submenu: false,\n }\n }\n\n fn render_content(&mut self, _: &mut Window, cx: &mut Context) -> impl IntoElement {\n v_flex().gap_3().child(\n h_flex()\n .gap_3()\n .child(\n Switch::new(\"side\")\n .label(\"Placement Right\")\n .checked(self.side.is_right())\n .on_click(cx.listener(|this, checked: &bool, _, cx| {\n this.side = if *checked { Side::Right } else { Side::Left };\n cx.notify();\n })),\n )\n .child(\n Switch::new(\"click-to-open\")\n .checked(self.click_to_open_submenu)\n .label(\"Click to open submenu\")\n .on_click(cx.listener(|this, checked: &bool, _, cx| {\n this.click_to_open_submenu = *checked;\n cx.notify();\n })),\n ),\n )\n }\n\n fn switch_checked_handler(\n &mut self,\n checked: &bool,\n _: &mut Window,\n _: &mut Context,\n ) {\n self.checked = *checked;\n }\n}\n\n#[derive(Clone, Copy, PartialEq, Eq, Hash)]\nenum Item {\n Playground,\n Models,\n Documentation,\n Settings,\n DesignEngineering,\n SalesAndMarketing,\n Travel,\n}\n\n#[derive(Clone, Copy, PartialEq, Eq)]\nenum SubItem {\n History,\n Starred,\n General,\n Team,\n Billing,\n Limits,\n Settings,\n Genesis,\n Explorer,\n Quantum,\n Introduction,\n GetStarted,\n Tutorial,\n Changelog,\n}\n\nimpl Item {\n pub fn label(&self) -> &'static str {\n match self {\n Self::Playground => \"Playground\",\n Self::Models => \"Models\",\n Self::Documentation => \"Documentation\",\n Self::Settings => \"Settings\",\n Self::DesignEngineering => \"Design Engineering\",\n Self::SalesAndMarketing => \"Sales and Marketing\",\n Self::Travel => \"Travel\",\n }\n }\n\n pub fn is_disabled(&self) -> bool {\n match self {\n Self::Travel => true,\n _ => false,\n }\n }\n\n pub fn icon(&self) -> IconName {\n match self {\n Self::Playground => IconName::SquareTerminal,\n Self::Models => IconName::Bot,\n Self::Documentation => IconName::BookOpen,\n Self::Settings => IconName::Settings2,\n Self::DesignEngineering => IconName::Frame,\n Self::SalesAndMarketing => IconName::ChartPie,\n Self::Travel => IconName::Map,\n }\n }\n\n pub fn handler(\n &self,\n ) -> impl Fn(&mut SidebarStory, &ClickEvent, &mut Window, &mut Context) + 'static\n {\n let item = *self;\n move |this, _, _, cx| {\n if this.active_items.contains_key(&item) {\n this.active_items.remove(&item);\n } else {\n this.active_items.insert(item, true);\n }\n\n this.last_active_item = item;\n this.active_subitem = None;\n cx.notify();\n }\n }\n\n pub fn items(&self) -> Vec {\n match self {\n Self::Playground => vec![SubItem::History, SubItem::Starred, SubItem::Settings],\n Self::Models => vec![SubItem::Genesis, SubItem::Explorer, SubItem::Quantum],\n Self::Documentation => vec![\n SubItem::Introduction,\n SubItem::GetStarted,\n SubItem::Tutorial,\n SubItem::Changelog,\n ],\n Self::Settings => vec![\n SubItem::General,\n SubItem::Team,\n SubItem::Billing,\n SubItem::Limits,\n ],\n _ => Vec::new(),\n }\n }\n}\n\nimpl SubItem {\n pub fn label(&self) -> &'static str {\n match self {\n Self::History => \"History\",\n Self::Starred => \"Starred\",\n Self::Settings => \"Settings\",\n Self::Genesis => \"Genesis\",\n Self::Explorer => \"Explorer\",\n Self::Quantum => \"Quantum\",\n Self::Introduction => \"Introduction\",\n Self::GetStarted => \"Get Started\",\n Self::Tutorial => \"Tutorial\",\n Self::Changelog => \"Changelog\",\n Self::Team => \"Team\",\n Self::Billing => \"Billing\",\n Self::Limits => \"Limits\",\n Self::General => \"General\",\n }\n }\n\n pub fn is_disabled(&self) -> bool {\n match self {\n Self::Quantum => true,\n _ => false,\n }\n }\n\n pub fn handler(\n &self,\n item: &Item,\n ) -> impl Fn(&mut SidebarStory, &ClickEvent, &mut Window, &mut Context) + 'static\n {\n let item = *item;\n let subitem = *self;\n move |this, _, _, cx| {\n println!(\n \"Clicked on item: {}, child: {}\",\n item.label(),\n subitem.label()\n );\n this.active_items.insert(item, true);\n this.last_active_item = item;\n this.active_subitem = Some(subitem);\n cx.notify();\n }\n }\n}\n\nimpl super::Story for SidebarStory {\n fn title() -> &'static str {\n \"Sidebar\"\n }\n\n fn description() -> &'static str {\n \"A composable, themeable and customizable sidebar component.\"\n }\n\n fn new_view(window: &mut Window, cx: &mut App) -> Entity {\n Self::view(window, cx)\n }\n}\n\nimpl Focusable for SidebarStory {\n fn focus_handle(&self, _: &gpui::App) -> gpui::FocusHandle {\n self.focus_handle.clone()\n }\n}\n\nimpl Render for SidebarStory {\n fn render(\n &mut self,\n window: &mut gpui::Window,\n cx: &mut gpui::Context,\n ) -> impl gpui::IntoElement {\n let groups: [Vec; 2] = [\n vec![\n Item::Playground,\n Item::Models,\n Item::Documentation,\n Item::Settings,\n ],\n vec![\n Item::DesignEngineering,\n Item::SalesAndMarketing,\n Item::Travel,\n ],\n ];\n\n h_flex()\n .rounded(cx.theme().radius)\n .border_1()\n .border_color(cx.theme().border)\n .h_full()\n .when(self.side.is_right(), |this| this.flex_row_reverse())\n .child(\n Sidebar::new(\"sidebar-story\")\n .side(self.side)\n .collapsed(self.collapsed)\n .w(px(220.))\n .gap_0()\n .header(\n SidebarHeader::new()\n .child(\n div()\n .flex()\n .items_center()\n .justify_center()\n .rounded(cx.theme().radius)\n .bg(cx.theme().success)\n .text_color(cx.theme().success_foreground)\n .size_8()\n .flex_shrink_0()\n .when(!self.collapsed, |this| {\n this.child(Icon::new(IconName::GalleryVerticalEnd))\n })\n .when(self.collapsed, |this| {\n this.size_4()\n .bg(cx.theme().transparent)\n .text_color(cx.theme().foreground)\n .child(Icon::new(IconName::GalleryVerticalEnd))\n }),\n )\n .when(!self.collapsed, |this| {\n this.child(\n v_flex()\n .gap_0()\n .text_sm()\n .flex_1()\n .line_height(relative(1.25))\n .overflow_hidden()\n .text_ellipsis()\n .child(\"Company Name\")\n .child(div().child(\"Enterprise\").text_xs()),\n )\n })\n .when(!self.collapsed, |this| {\n this.child(\n Icon::new(IconName::ChevronsUpDown).size_4().flex_shrink_0(),\n )\n })\n .dropdown_menu(|menu, _, _| {\n menu.menu(\n \"Twitter Inc.\",\n Box::new(SelectCompany(SharedString::from(\"twitter\"))),\n )\n .menu(\n \"Meta Platforms\",\n Box::new(SelectCompany(SharedString::from(\"meta\"))),\n )\n .menu(\n \"Google Inc.\",\n Box::new(SelectCompany(SharedString::from(\"google\"))),\n )\n }),\n )\n .child(\n SidebarGroup::new(\"Platform\").child(SidebarMenu::new().children(\n groups[0].iter().enumerate().map(|(ix, item)| {\n let is_active =\n self.last_active_item == *item && self.active_subitem == None;\n SidebarMenuItem::new(item.label())\n .icon(item.icon())\n .active(is_active)\n .default_open(ix == 0)\n .click_to_open(self.click_to_open_submenu)\n .when(ix == 0, |this| {\n this.context_menu({\n move |this, _, _| {\n this.link(\n \"About\",\n \"https://github.com/longbridge/gpui-component\",\n )\n }\n })\n })\n .children(item.items().into_iter().enumerate().map(\n |(ix, sub_item)| {\n SidebarMenuItem::new(sub_item.label())\n .active(self.active_subitem == Some(sub_item))\n .disable(sub_item.is_disabled())\n .when(ix == 0, |this| {\n this.suffix({\n let checked = self.checked;\n let view = cx.entity();\n move |window, _| {\n Switch::new(\"switch\")\n .xsmall()\n .checked(checked)\n .on_click(window.listener_for(\n &view,\n Self::switch_checked_handler,\n ))\n }\n })\n .context_menu({\n move |this, _, _| {\n this.label(\"This is a label\")\n }\n })\n })\n .on_click(cx.listener(sub_item.handler(&item)))\n },\n ))\n .on_click(cx.listener(item.handler()))\n }),\n )),\n )\n .child(\n SidebarGroup::new(\"Projects\").child(SidebarMenu::new().children(\n groups[1].iter().enumerate().map(|(ix, item)| {\n let is_active =\n self.last_active_item == *item && self.active_subitem == None;\n SidebarMenuItem::new(item.label())\n .icon(item.icon())\n .active(is_active)\n .disable(item.is_disabled())\n .click_to_open(self.click_to_open_submenu)\n .when(ix == 0, |this| {\n this.suffix(|_, _| {\n Badge::new().dot().count(1).child(\n div().p_0p5().child(Icon::new(IconName::Bell)),\n )\n })\n })\n .when(ix == 1, |this| {\n this.suffix(|_, _| Icon::new(IconName::Settings2))\n })\n .on_click(cx.listener(item.handler()))\n }),\n )),\n )\n .footer(\n SidebarFooter::new()\n .justify_between()\n .child(\n h_flex()\n .gap_2()\n .child(IconName::CircleUser)\n .when(!self.collapsed, |this| this.child(\"Jason Lee\")),\n )\n .when(!self.collapsed, |this| {\n this.child(Icon::new(IconName::ChevronsUpDown).size_4())\n }),\n ),\n )\n .child(\n v_flex()\n .size_full()\n .gap_4()\n .p_4()\n .child(\n h_flex()\n .items_center()\n .gap_3()\n .when(self.side.is_right(), |this| {\n this.flex_row_reverse().justify_between()\n })\n .child(\n SidebarToggleButton::new()\n .side(self.side)\n .collapsed(self.collapsed)\n .on_click(cx.listener(|this, _, _, cx| {\n this.collapsed = !this.collapsed;\n cx.notify();\n })),\n )\n .child(Divider::vertical().h_4())\n .child(\n Breadcrumb::new()\n .child(\"Breadcrumb\")\n .child(BreadcrumbItem::new(\"Home\").on_click(cx.listener(\n |this, _, _, cx| {\n this.last_active_item = Item::Playground;\n cx.notify();\n },\n )))\n .child(\n BreadcrumbItem::new(self.last_active_item.label())\n .on_click(cx.listener(|this, _, _, cx| {\n this.active_subitem = None;\n cx.notify();\n })),\n )\n .when_some(self.active_subitem, |this, subitem| {\n this.child(BreadcrumbItem::new(subitem.label()))\n }),\n ),\n )\n .child(self.render_content(window, cx)),\n )\n }\n}\n" }, { "path": "crates/story/src/stories/skeleton_story.rs", "content": "use gpui::{\n App, AppContext, Context, Entity, Focusable, IntoElement, ParentElement, Render, Styled,\n Window, px,\n};\nuse gpui_component::{ActiveTheme as _, skeleton::Skeleton, v_flex};\n\nuse crate::section;\n\npub struct SkeletonStory {\n focus_handle: gpui::FocusHandle,\n value: f32,\n}\n\nimpl super::Story for SkeletonStory {\n fn title() -> &'static str {\n \"Skeleton\"\n }\n\n fn description() -> &'static str {\n \"Use to show a placeholder while content is loading.\"\n }\n\n fn new_view(window: &mut Window, cx: &mut App) -> Entity {\n Self::view(window, cx)\n }\n}\n\nimpl SkeletonStory {\n pub fn view(window: &mut Window, cx: &mut App) -> Entity {\n cx.new(|cx| Self::new(window, cx))\n }\n\n fn new(_: &mut Window, cx: &mut Context) -> Self {\n Self {\n focus_handle: cx.focus_handle(),\n value: 50.,\n }\n }\n\n pub fn set_value(&mut self, value: f32) {\n self.value = value;\n }\n}\n\nimpl Focusable for SkeletonStory {\n fn focus_handle(&self, _: &gpui::App) -> gpui::FocusHandle {\n self.focus_handle.clone()\n }\n}\n\nimpl Render for SkeletonStory {\n fn render(&mut self, _: &mut Window, cx: &mut Context) -> impl IntoElement {\n v_flex()\n .w_full()\n .gap_3()\n .child(\n section(\"Skeleton\")\n .max_w_md()\n .child(Skeleton::new().size_12().rounded_full())\n .child(\n v_flex()\n .gap_2()\n .child(Skeleton::new().w(px(250.)).h_4().rounded(cx.theme().radius))\n .child(Skeleton::new().w(px(200.)).h_4().rounded(cx.theme().radius)),\n ),\n )\n .child(\n section(\"Card\").max_w_md().child(\n v_flex()\n .gap_2()\n .child(\n Skeleton::new()\n .w(px(250.))\n .h(px(125.))\n .rounded(cx.theme().radius),\n )\n .child(\n v_flex()\n .gap_2()\n .child(Skeleton::new().w(px(250.)).h_4().rounded(cx.theme().radius))\n .child(\n Skeleton::new().w(px(200.)).h_4().rounded(cx.theme().radius),\n ),\n ),\n ),\n )\n }\n}\n" }, { "path": "crates/story/src/stories/slider_story.rs", "content": "use gpui::{\n App, AppContext, Context, Entity, Focusable, Hsla, IntoElement, ParentElement, Render,\n SharedString, Styled, Subscription, Window, hsla, px,\n};\nuse gpui_component::{\n ActiveTheme, Colorize as _, StyledExt, WindowExt,\n checkbox::Checkbox,\n clipboard::Clipboard,\n h_flex,\n slider::{Slider, SliderEvent, SliderScale, SliderState},\n v_flex,\n};\n\nuse crate::section;\n\npub struct SliderStory {\n focus_handle: gpui::FocusHandle,\n slider1: Entity,\n slider1_value: f32,\n slider2: Entity,\n slider2_value: f32,\n slider3: Entity,\n slider_hsl: [Entity; 4],\n slider_hsl_value: Hsla,\n slider4: Entity,\n slider_logarithmic: Entity,\n disabled: bool,\n _subscritions: Vec,\n}\n\nimpl super::Story for SliderStory {\n fn title() -> &'static str {\n \"Slider\"\n }\n\n fn description() -> &'static str {\n \"Displays a slider control for selecting a value within a range.\"\n }\n\n fn new_view(window: &mut Window, cx: &mut App) -> Entity {\n Self::view(window, cx)\n }\n}\n\nimpl SliderStory {\n pub fn view(window: &mut Window, cx: &mut App) -> Entity {\n cx.new(|cx| Self::new(window, cx))\n }\n\n fn new(_: &mut Window, cx: &mut Context) -> Self {\n let slider1 = cx.new(|_| {\n SliderState::new()\n .min(-255.)\n .max(255.)\n .default_value(75.)\n .step(15.)\n });\n\n let slider2 = cx.new(|_| {\n SliderState::new()\n .min(0.)\n .max(5.)\n .step(1.0)\n .default_value(2.)\n });\n let slider_hsl = [\n cx.new(|_| {\n SliderState::new()\n .min(0.)\n .max(1.)\n .step(0.01)\n .default_value(0.38)\n }),\n cx.new(|_| {\n SliderState::new()\n .min(0.)\n .max(1.)\n .step(0.01)\n .default_value(0.5)\n }),\n cx.new(|_| {\n SliderState::new()\n .min(0.)\n .max(1.)\n .step(0.01)\n .default_value(0.5)\n }),\n cx.new(|_| {\n SliderState::new()\n .min(0.)\n .max(1.)\n .step(0.01)\n .default_value(0.5)\n }),\n ];\n\n let slider3 = cx.new(|_| {\n SliderState::new()\n .min(0.)\n .max(100.)\n .default_value(12.0..45.0)\n .step(1.)\n });\n\n let slider4 = cx.new(|_| {\n SliderState::new()\n .min(0.)\n .max(360.)\n .default_value(100.0..300.0)\n .step(1.)\n });\n\n let slider_logarithmic = cx.new(|_| {\n SliderState::new()\n .min(0.25)\n .max(4.0)\n .default_value(1.0)\n .step(0.05)\n .scale(SliderScale::Logarithmic)\n });\n\n let mut _subscritions = vec![\n cx.subscribe(&slider1, |this, _, event: &SliderEvent, cx| match event {\n SliderEvent::Change(value) => {\n this.slider1_value = value.start();\n cx.notify();\n }\n }),\n cx.subscribe(&slider2, |this, _, event: &SliderEvent, cx| match event {\n SliderEvent::Change(value) => {\n this.slider2_value = value.start();\n cx.notify();\n }\n }),\n ];\n\n _subscritions.extend(\n slider_hsl\n .iter()\n .map(|slider| {\n cx.subscribe(slider, |this, _, event: &SliderEvent, cx| match event {\n SliderEvent::Change(_) => {\n this.slider_hsl_value = hsla(\n this.slider_hsl[0].read(cx).value().start(),\n this.slider_hsl[1].read(cx).value().start(),\n this.slider_hsl[2].read(cx).value().start(),\n this.slider_hsl[3].read(cx).value().start(),\n );\n cx.notify();\n }\n })\n })\n .collect::>(),\n );\n\n slider_hsl[0].update(cx, |slider, cx| {\n cx.emit(SliderEvent::Change(slider.value()));\n });\n\n Self {\n focus_handle: cx.focus_handle(),\n slider1_value: 0.,\n slider2_value: 0.,\n slider1,\n slider2,\n slider3,\n slider4,\n slider_hsl,\n slider_hsl_value: gpui::red(),\n slider_logarithmic,\n disabled: false,\n _subscritions,\n }\n }\n}\n\nimpl Focusable for SliderStory {\n fn focus_handle(&self, _: &gpui::App) -> gpui::FocusHandle {\n self.focus_handle.clone()\n }\n}\n\nimpl Render for SliderStory {\n fn render(&mut self, _: &mut Window, cx: &mut Context) -> impl IntoElement {\n let rgb = SharedString::from(self.slider_hsl_value.to_hex());\n\n v_flex()\n .w_full()\n .gap_3()\n .child(\n h_flex().child(\n Checkbox::new(\"disabled\")\n .checked(self.disabled)\n .label(\"Disabled\")\n .on_click(cx.listener(|this, check: &bool, _, cx| {\n this.disabled = *check;\n cx.notify();\n })),\n ),\n )\n .child(\n section(\"Horizontal Slider\")\n .max_w_md()\n .v_flex()\n .child(Slider::new(&self.slider1).disabled(self.disabled))\n .child(format!(\"Value: {}\", self.slider1_value)),\n )\n .child(\n section(\"Slider (0 - 5) and with color\")\n .max_w_md()\n .v_flex()\n .child(\n Slider::new(&self.slider2)\n .disabled(self.disabled)\n .bg(cx.theme().success)\n .text_color(cx.theme().success_foreground),\n )\n .child(format!(\"Value: {}\", self.slider2_value)),\n )\n .child(\n section(\"Range Mode\")\n .max_w_md()\n .v_flex()\n .child(Slider::new(&self.slider3).disabled(self.disabled))\n .child(format!(\"Value: {}\", self.slider3.read(cx).value())),\n )\n .child(\n section(\"Vertical with Range\")\n .max_w_md()\n .v_flex()\n .child(\n Slider::new(&self.slider4)\n .vertical()\n .h(px(200.))\n .rounded(px(2.))\n .disabled(self.disabled),\n )\n .child(format!(\"Value: {}\", self.slider4.read(cx).value())),\n )\n .child(\n section(\"Color Picker\")\n .sub_title(\n h_flex()\n .gap_2()\n .items_center()\n .child(\n h_flex()\n .text_color(self.slider_hsl_value)\n .child(rgb.clone()),\n )\n .child(Clipboard::new(\"copy-hsl\").value(rgb).on_copied(\n |_, window, cx| {\n window.push_notification(\"Color copied to clipboard.\", cx)\n },\n )),\n )\n .max_w_md()\n .justify_around()\n .child(\n v_flex()\n .h_32()\n .gap_3()\n .items_center()\n .justify_center()\n .child(\n Slider::new(&self.slider_hsl[0])\n .vertical()\n .disabled(self.disabled),\n )\n .child(\n v_flex()\n .items_center()\n .child(\"Hue\")\n .child(format!(\"{:.0}\", self.slider_hsl_value.h * 360.)),\n ),\n )\n .child(\n v_flex()\n .h_32()\n .gap_3()\n .items_center()\n .justify_center()\n .child(\n Slider::new(&self.slider_hsl[1])\n .vertical()\n .disabled(self.disabled),\n )\n .child(\n v_flex()\n .items_center()\n .child(\"Saturation\")\n .child(format!(\"{:.0}\", self.slider_hsl_value.s * 100.)),\n ),\n )\n .child(\n v_flex()\n .h_32()\n .gap_3()\n .items_center()\n .justify_center()\n .child(\n Slider::new(&self.slider_hsl[2])\n .vertical()\n .disabled(self.disabled),\n )\n .child(\n v_flex()\n .items_center()\n .child(\"Lightness\")\n .child(format!(\"{:.0}\", self.slider_hsl_value.l * 100.)),\n ),\n )\n .child(\n v_flex()\n .h_32()\n .gap_3()\n .items_center()\n .justify_center()\n .child(\n Slider::new(&self.slider_hsl[3])\n .vertical()\n .disabled(self.disabled),\n )\n .child(\n v_flex()\n .items_center()\n .child(\"Alpha\")\n .child(format!(\"{:.0}\", self.slider_hsl_value.a * 100.)),\n ),\n ),\n )\n .child(\n section(\"Logarithmic Slider\")\n .max_w_md()\n .v_flex()\n .child(\n Slider::new(&self.slider_logarithmic)\n .horizontal()\n .disabled(self.disabled),\n )\n .child(format!(\n \"Playback Speed: {:.2}\",\n self.slider_logarithmic.read(cx).value().start()\n )),\n )\n }\n}\n" }, { "path": "crates/story/src/stories/spinner_story.rs", "content": "use gpui::{\n App, AppContext, Context, Entity, Focusable, IntoElement, ParentElement, Render, Styled,\n Window, px,\n};\nuse gpui_component::{ActiveTheme as _, IconName, Sizable, spinner::Spinner, v_flex};\n\nuse crate::section;\n\npub struct SpinnerStory {\n focus_handle: gpui::FocusHandle,\n value: f32,\n}\n\nimpl super::Story for SpinnerStory {\n fn title() -> &'static str {\n \"Spinner\"\n }\n\n fn description() -> &'static str {\n \"Displays an spinner showing the completion progress of a task.\"\n }\n\n fn new_view(window: &mut Window, cx: &mut App) -> Entity {\n Self::view(window, cx)\n }\n}\n\nimpl SpinnerStory {\n pub fn view(window: &mut Window, cx: &mut App) -> Entity {\n cx.new(|cx| Self::new(window, cx))\n }\n\n fn new(_: &mut Window, cx: &mut Context) -> Self {\n Self {\n focus_handle: cx.focus_handle(),\n value: 50.,\n }\n }\n\n pub fn set_value(&mut self, value: f32) {\n self.value = value;\n }\n}\n\nimpl Focusable for SpinnerStory {\n fn focus_handle(&self, _: &gpui::App) -> gpui::FocusHandle {\n self.focus_handle.clone()\n }\n}\n\nimpl Render for SpinnerStory {\n fn render(&mut self, _: &mut Window, cx: &mut Context) -> impl IntoElement {\n v_flex()\n .w_full()\n .gap_3()\n .child(section(\"Spinner\").gap_x_2().child(Spinner::new()))\n .child(\n section(\"Spinner with color\")\n .gap_x_2()\n .child(Spinner::new().color(cx.theme().blue))\n .child(Spinner::new().color(cx.theme().green)),\n )\n .child(\n section(\"Spinner with size\")\n .gap_x_2()\n .child(Spinner::new().with_size(px(64.)))\n .child(Spinner::new().large())\n .child(Spinner::new())\n .child(Spinner::new().small())\n .child(Spinner::new().xsmall()),\n )\n .child(\n section(\"Spinner with Icon\")\n .gap_x_2()\n .child(Spinner::new().icon(IconName::LoaderCircle))\n .child(\n Spinner::new()\n .icon(IconName::LoaderCircle)\n .large()\n .color(cx.theme().cyan),\n ),\n )\n }\n}\n" }, { "path": "crates/story/src/stories/stepper_story.rs", "content": "use gpui::{\n App, AppContext, Context, Entity, Focusable, IntoElement, ParentElement, Render, Styled,\n Subscription, Window,\n};\nuse gpui_component::{\n IconName, Selectable as _, Sizable, Size, StyledExt,\n button::{Button, ButtonGroup},\n checkbox::Checkbox,\n h_flex,\n stepper::{Stepper, StepperItem},\n v_flex,\n};\n\nuse crate::section;\n\npub struct StepperStory {\n focus_handle: gpui::FocusHandle,\n size: Size,\n stepper0_step: usize,\n stepper1_step: usize,\n stepper2_step: usize,\n stepper3_step: usize,\n disabled: bool,\n _subscritions: Vec,\n}\n\nimpl super::Story for StepperStory {\n fn title() -> &'static str {\n \"Stepper\"\n }\n\n fn description() -> &'static str {\n \"A step-by-step process for users to navigate through a series of steps.\"\n }\n\n fn new_view(window: &mut Window, cx: &mut App) -> Entity {\n Self::view(window, cx)\n }\n}\n\nimpl StepperStory {\n pub fn view(window: &mut Window, cx: &mut App) -> Entity {\n cx.new(|cx| Self::new(window, cx))\n }\n\n fn new(_: &mut Window, cx: &mut Context) -> Self {\n Self {\n focus_handle: cx.focus_handle(),\n size: Size::default(),\n stepper0_step: 1,\n stepper1_step: 0,\n stepper2_step: 2,\n stepper3_step: 0,\n disabled: false,\n _subscritions: vec![],\n }\n }\n}\n\nimpl Focusable for StepperStory {\n fn focus_handle(&self, _: &gpui::App) -> gpui::FocusHandle {\n self.focus_handle.clone()\n }\n}\n\nimpl Render for StepperStory {\n fn render(&mut self, _: &mut Window, cx: &mut Context) -> impl IntoElement {\n v_flex()\n .w_full()\n .gap_3()\n .child(\n h_flex()\n .gap_3()\n .child(\n ButtonGroup::new(\"toggle-size\")\n .outline()\n .compact()\n .child(\n Button::new(\"xsmall\")\n .label(\"XSmall\")\n .selected(self.size == Size::XSmall),\n )\n .child(\n Button::new(\"small\")\n .label(\"Small\")\n .selected(self.size == Size::Small),\n )\n .child(\n Button::new(\"medium\")\n .label(\"Medium\")\n .selected(self.size == Size::Medium),\n )\n .child(\n Button::new(\"large\")\n .label(\"Large\")\n .selected(self.size == Size::Large),\n )\n .on_click(cx.listener(|this, selecteds: &Vec, _, cx| {\n let size = match selecteds[0] {\n 0 => Size::XSmall,\n 1 => Size::Small,\n 2 => Size::Medium,\n 3 => Size::Large,\n _ => unreachable!(),\n };\n this.size = size;\n cx.notify();\n })),\n )\n .child(\n Checkbox::new(\"disabled\")\n .checked(self.disabled)\n .label(\"Disabled\")\n .on_click(cx.listener(|this, check: &bool, _, cx| {\n this.disabled = *check;\n cx.notify();\n })),\n ),\n )\n .child(\n section(\"Horizontal Stepper\").max_w_md().v_flex().child(\n Stepper::new(\"stepper0\")\n .w_full()\n .with_size(self.size)\n .disabled(self.disabled)\n .selected_index(self.stepper0_step)\n .items([\n StepperItem::new().child(\"Step 1\"),\n StepperItem::new().child(\"Step 2\"),\n StepperItem::new().child(\"Step 3\"),\n ])\n .on_click(cx.listener(|this, step, _, cx| {\n this.stepper0_step = *step;\n cx.notify();\n })),\n ),\n )\n .child(\n section(\"Icon Stepper\").max_w_md().v_flex().child(\n Stepper::new(\"stepper1\")\n .w_full()\n .with_size(self.size)\n .disabled(self.disabled)\n .selected_index(self.stepper1_step)\n .items([\n StepperItem::new()\n .icon(IconName::Calendar)\n .child(\"Order Details\"),\n StepperItem::new().icon(IconName::Inbox).child(\"Shipping\"),\n StepperItem::new().icon(IconName::Frame).child(\"Preview\"),\n StepperItem::new().icon(IconName::Info).child(\"Finish\"),\n ])\n .on_click(cx.listener(|this, step, _, cx| {\n this.stepper1_step = *step;\n cx.notify();\n })),\n ),\n )\n .child(\n section(\"Vertical Stepper\").max_w_md().v_flex().child(\n Stepper::new(\"stepper3\")\n .vertical()\n .with_size(self.size)\n .disabled(self.disabled)\n .selected_index(self.stepper2_step)\n .items_center()\n .items([\n StepperItem::new()\n .pb_8()\n .icon(IconName::Building2)\n .child(v_flex().child(\"Step 1\").child(\"Description for step 1.\")),\n StepperItem::new()\n .pb_8()\n .icon(IconName::Asterisk)\n .child(v_flex().child(\"Step 2\").child(\"Description for step 2.\")),\n StepperItem::new()\n .pb_8()\n .icon(IconName::Folder)\n .child(v_flex().child(\"Step 3\").child(\"Description for step 3.\")),\n StepperItem::new()\n .icon(IconName::CircleCheck)\n .child(v_flex().child(\"Step 4\").child(\"Description for step 4.\")),\n ])\n .on_click(cx.listener(|this, step, _, cx| {\n this.stepper2_step = *step;\n cx.notify();\n })),\n ),\n )\n .child(\n section(\"Text Center\").max_w_md().v_flex().child(\n Stepper::new(\"stepper4\")\n .with_size(self.size)\n .disabled(self.disabled)\n .selected_index(self.stepper3_step)\n .text_center(true)\n .items([\n StepperItem::new().child(\n v_flex()\n .items_center()\n .child(\"Step 1\")\n .child(\"Desc for step 1.\"),\n ),\n StepperItem::new().child(\n v_flex()\n .items_center()\n .child(\"Step 2\")\n .child(\"Desc for step 2.\"),\n ),\n StepperItem::new().child(\n v_flex()\n .items_center()\n .child(\"Step 3\")\n .child(\"Desc for step 3.\"),\n ),\n ])\n .on_click(cx.listener(|this, step, _, cx| {\n this.stepper3_step = *step;\n cx.notify();\n })),\n ),\n )\n }\n}\n" }, { "path": "crates/story/src/stories/switch_story.rs", "content": "use gpui::{\n App, AppContext, Context, Div, Entity, FocusHandle, Focusable, IntoElement, ParentElement,\n Render, SharedString, Styled, Window, px,\n};\n\nuse gpui_component::{\n ActiveTheme, Disableable as _, Sizable, h_flex, label::Label, switch::Switch, v_flex,\n};\n\nuse crate::section;\n\npub struct SwitchStory {\n focus_handle: FocusHandle,\n switch1: bool,\n switch2: bool,\n switch3: bool,\n}\n\nimpl super::Story for SwitchStory {\n fn title() -> &'static str {\n \"Switch\"\n }\n\n fn description() -> &'static str {\n \"A control that allows the user to toggle between checked and not checked.\"\n }\n\n fn new_view(window: &mut Window, cx: &mut App) -> Entity {\n Self::view(window, cx)\n }\n}\n\nimpl SwitchStory {\n pub fn view(window: &mut Window, cx: &mut App) -> Entity {\n cx.new(|cx| Self::new(window, cx))\n }\n\n fn new(_: &mut Window, cx: &mut Context) -> Self {\n Self {\n focus_handle: cx.focus_handle(),\n switch1: true,\n switch2: false,\n switch3: true,\n }\n }\n}\n\nimpl Focusable for SwitchStory {\n fn focus_handle(&self, _: &gpui::App) -> gpui::FocusHandle {\n self.focus_handle.clone()\n }\n}\n\nimpl Render for SwitchStory {\n fn render(&mut self, _: &mut Window, cx: &mut Context) -> impl IntoElement {\n let theme = cx.theme();\n\n fn title(title: impl Into) -> Div {\n v_flex().flex_1().gap_2().child(Label::new(title).text_xl())\n }\n\n fn card(cx: &Context) -> Div {\n h_flex()\n .items_center()\n .gap_4()\n .p_4()\n .w_full()\n .rounded(cx.theme().radius)\n .border_1()\n .border_color(cx.theme().border)\n }\n\n v_flex()\n .w_full()\n .gap_3()\n .child(\n card(cx)\n .child(\n title(\"Marketing emails\").child(\n Label::new(\"Receive emails about new products, features, and more.\")\n .text_color(theme.muted_foreground),\n ),\n )\n .child(\n h_flex().gap_2().child(\"Subscribe\").child(\n Switch::new(\"switch1\")\n .checked(self.switch1)\n .on_click(cx.listener(move |view, checked, _, cx| {\n view.switch1 = *checked;\n cx.notify();\n })),\n ),\n ),\n )\n .child(\n card(cx)\n .child(\n title(\"Security emails\").child(\n Label::new(\n \"Receive emails about your account security. \\\n When turn off, you never receive email again.\",\n )\n .text_color(theme.muted_foreground),\n ),\n )\n .child(\n Switch::new(\"switch2\")\n .checked(self.switch2)\n .on_click(cx.listener(move |view, checked, _, cx| {\n view.switch2 = *checked;\n cx.notify();\n })),\n ),\n )\n .child(\n section(\"Disabled\")\n .child(Switch::new(\"switch3\").disabled(true).on_click(|v, _, _| {\n println!(\"Switch value changed: {:?}\", v);\n }))\n .child(\n Switch::new(\"switch3_1\")\n .w(px(200.))\n .label(\"Airplane Mode\")\n .checked(true)\n .disabled(true)\n .on_click(|ev, _, _| {\n println!(\"Switch value changed: {:?}\", ev);\n }),\n ),\n )\n .child(\n section(\"Small Size\").child(\n Switch::new(\"switch3\")\n .checked(self.switch3)\n .label(\"Small Size\")\n .small()\n .on_click(cx.listener(move |view, checked, _, cx| {\n view.switch3 = *checked;\n cx.notify();\n })),\n ),\n )\n }\n}\n" }, { "path": "crates/story/src/stories/table_story.rs", "content": "use gpui::{\n App, AppContext as _, Context, Entity, FocusHandle, Focusable, IntoElement, ParentElement,\n Render, Styled, Window, prelude::FluentBuilder as _, px,\n};\nuse gpui_component::{\n ActiveTheme, Selectable as _, Sizable, Size,\n button::{Button, ButtonGroup},\n h_flex,\n table::{\n Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow,\n },\n tag::Tag,\n v_flex,\n};\n\nuse crate::section;\n\npub struct TableStory {\n focus_handle: FocusHandle,\n size: Size,\n}\n\nimpl TableStory {\n fn new(_: &mut Window, cx: &mut Context) -> Self {\n Self {\n focus_handle: cx.focus_handle(),\n size: Size::default(),\n }\n }\n\n pub fn view(window: &mut Window, cx: &mut App) -> Entity {\n cx.new(|cx| Self::new(window, cx))\n }\n\n fn set_size(&mut self, size: Size, _: &mut Window, cx: &mut Context) {\n self.size = size;\n cx.notify();\n }\n}\n\nimpl super::Story for TableStory {\n fn title() -> &'static str {\n \"Table\"\n }\n\n fn description() -> &'static str {\n \"A basic table component for directly rendering tabular data.\"\n }\n\n fn new_view(window: &mut Window, cx: &mut App) -> Entity {\n Self::view(window, cx)\n }\n}\n\nimpl Focusable for TableStory {\n fn focus_handle(&self, _: &App) -> FocusHandle {\n self.focus_handle.clone()\n }\n}\n\nfn status_tag(status: &str) -> Tag {\n match status {\n \"Paid\" => Tag::success().outline().child(status.to_string()),\n \"Pending\" => Tag::warning().outline().child(status.to_string()),\n \"Unpaid\" => Tag::danger().outline().child(status.to_string()),\n _ => Tag::new().child(status.to_string()),\n }\n .xsmall()\n}\n\nimpl Render for TableStory {\n fn render(&mut self, _: &mut Window, cx: &mut Context) -> impl IntoElement {\n let invoices: Vec<(&str, &str, &str, &str, &str)> = vec![\n (\"INV001\", \"Paid\", \"Credit Card\", \"$250.00\", \"2024-01-15\"),\n (\"INV002\", \"Pending\", \"PayPal\", \"$150.00\", \"2024-02-01\"),\n (\"INV003\", \"Unpaid\", \"Bank Transfer\", \"$350.00\", \"2024-02-15\"),\n (\n \"INV004\",\n \"Paid\",\n \"Credit Card\\nMaster Card / Visa\",\n \"$450.00\",\n \"2024-03-01\",\n ),\n (\"INV005\", \"Paid\", \"PayPal\", \"$550.00\", \"2024-03-15\"),\n (\n \"INV006\",\n \"Pending\",\n \"Bank Transfer\",\n \"$200.00\",\n \"2024-04-01\",\n ),\n (\"INV007\", \"Unpaid\", \"Credit Card\", \"$300.00\", \"2024-04-15\"),\n ];\n\n v_flex()\n .size_full()\n .gap_6()\n .child(\n h_flex().gap_3().child(\n ButtonGroup::new(\"toggle-size\")\n .outline()\n .compact()\n .child(\n Button::new(\"xsmall\")\n .label(\"XSmall\")\n .selected(self.size == Size::XSmall),\n )\n .child(\n Button::new(\"small\")\n .label(\"Small\")\n .selected(self.size == Size::Small),\n )\n .child(\n Button::new(\"medium\")\n .label(\"Medium\")\n .selected(self.size == Size::Medium),\n )\n .child(\n Button::new(\"large\")\n .label(\"Large\")\n .selected(self.size == Size::Large),\n )\n .on_click(cx.listener(|this, selecteds: &Vec, window, cx| {\n let size = match selecteds[0] {\n 0 => Size::XSmall,\n 1 => Size::Small,\n 2 => Size::Medium,\n 3 => Size::Large,\n _ => unreachable!(),\n };\n this.set_size(size, window, cx);\n })),\n ),\n )\n .child(\n section(\"Table\").child(\n Table::new()\n .with_size(self.size)\n .child(\n TableHeader::new().child(\n TableRow::new()\n .child(TableHead::new().w(px(150.)).child(\"Invoice\"))\n .child(TableHead::new().col_span(2).child(\"Status\"))\n .child(TableHead::new().text_right().child(\"Amount\"))\n .child(TableHead::new().text_right().child(\"Date\")),\n ),\n )\n .child(TableBody::new().children(invoices.iter().map(\n |(invoice, status, method, amount, date)| {\n TableRow::new()\n .child(TableCell::new().w(px(150.)).child(invoice.to_string()))\n .child(TableCell::new().child(status_tag(status)))\n .child(TableCell::new().child(method.to_string()))\n .child(TableCell::new().text_right().child(amount.to_string()))\n .child(TableCell::new().text_right().child(date.to_string()))\n },\n )))\n .child(\n TableFooter::new().child(\n TableRow::new()\n .child(TableCell::new().col_span(3).child(\"Total\"))\n .child(\n TableCell::new()\n .col_span(2)\n .text_right()\n .child(\"$2,250.00\"),\n ),\n ),\n )\n .child(TableCaption::new().child(\"A list of your recent invoices.\")),\n ),\n )\n .child(\n section(\"With Border\").child(\n Table::new()\n .with_size(self.size)\n .border_1()\n .border_color(cx.theme().border)\n .rounded(cx.theme().radius)\n .child(\n TableHeader::new().child(\n TableRow::new()\n .child(TableHead::new().w(px(100.)).child(\"Invoice\"))\n .child(TableHead::new().child(\"Method\"))\n .child(TableHead::new().text_right().child(\"Amount\"))\n .child(TableHead::new().text_right().child(\"Date\")),\n ),\n )\n .child(\n TableBody::new().children(invoices.iter().enumerate().take(6).map(\n |(ix, (invoice, _, method, amount, date))| {\n TableRow::new()\n .when(ix % 2 != 0, |this| this.bg(cx.theme().table_even))\n .child(\n TableCell::new().w(px(100.)).child(invoice.to_string()),\n )\n .child(TableCell::new().child(method.to_string()))\n .child(\n TableCell::new().text_right().child(amount.to_string()),\n )\n .child(\n TableCell::new().text_right().child(date.to_string()),\n )\n },\n )),\n ),\n ),\n )\n }\n}\n" }, { "path": "crates/story/src/stories/tabs_story.rs", "content": "use gpui::{\n App, AppContext, Context, Entity, FocusHandle, Focusable, IntoElement, ParentElement, Render,\n Styled, Window,\n};\n\nuse gpui_component::{\n ActiveTheme as _, IconName, Selectable as _, Sizable, Size,\n button::{Button, ButtonGroup, ButtonVariants},\n checkbox::Checkbox,\n h_flex,\n tab::{Tab, TabBar},\n v_flex,\n};\n\nuse crate::section;\n\npub struct TabsStory {\n focus_handle: FocusHandle,\n active_tab_ix: usize,\n size: Size,\n menu: bool,\n}\n\nimpl super::Story for TabsStory {\n fn title() -> &'static str {\n \"Tabs\"\n }\n\n fn description() -> &'static str {\n \"A set of layered sections of content—known as tab panels—that are displayed one at a time.\"\n }\n\n fn new_view(window: &mut Window, cx: &mut App) -> Entity {\n Self::view(window, cx)\n }\n}\n\nimpl TabsStory {\n pub fn view(window: &mut Window, cx: &mut App) -> Entity {\n cx.new(|cx| Self::new(window, cx))\n }\n\n fn new(_: &mut Window, cx: &mut Context) -> Self {\n Self {\n focus_handle: cx.focus_handle(),\n active_tab_ix: 0,\n size: Size::default(),\n menu: false,\n }\n }\n\n fn set_active_tab(&mut self, ix: usize, _: &mut Window, cx: &mut Context) {\n self.active_tab_ix = ix;\n cx.notify();\n }\n\n fn set_size(&mut self, size: Size, _: &mut Window, cx: &mut Context) {\n self.size = size;\n cx.notify();\n }\n}\n\nimpl Focusable for TabsStory {\n fn focus_handle(&self, _: &gpui::App) -> gpui::FocusHandle {\n self.focus_handle.clone()\n }\n}\n\nimpl Render for TabsStory {\n fn render(&mut self, _: &mut Window, cx: &mut Context) -> impl IntoElement {\n v_flex()\n .w_full()\n .gap_3()\n .child(\n h_flex()\n .gap_3()\n .child(\n ButtonGroup::new(\"toggle-size\")\n .outline()\n .compact()\n .child(\n Button::new(\"xsmall\")\n .label(\"XSmall\")\n .selected(self.size == Size::XSmall),\n )\n .child(\n Button::new(\"small\")\n .label(\"Small\")\n .selected(self.size == Size::Small),\n )\n .child(\n Button::new(\"medium\")\n .label(\"Medium\")\n .selected(self.size == Size::Medium),\n )\n .child(\n Button::new(\"large\")\n .label(\"Large\")\n .selected(self.size == Size::Large),\n )\n .on_click(cx.listener(|this, selecteds: &Vec, window, cx| {\n let size = match selecteds[0] {\n 0 => Size::XSmall,\n 1 => Size::Small,\n 2 => Size::Medium,\n 3 => Size::Large,\n _ => unreachable!(),\n };\n this.set_size(size, window, cx);\n })),\n )\n .child(\n Checkbox::new(\"show-menu\")\n .label(\"More menu\")\n .checked(self.menu)\n .on_click(cx.listener(|this, _, _, cx| {\n this.menu = !this.menu;\n cx.notify();\n })),\n ),\n )\n .child(\n section(\"Tabs\").max_w_md().child(\n TabBar::new(\"tabs\")\n .w_full()\n .with_size(self.size)\n .menu(self.menu)\n .selected_index(self.active_tab_ix)\n .on_click(cx.listener(|this, ix: &usize, window, cx| {\n this.set_active_tab(*ix, window, cx);\n }))\n .border_t_1()\n .border_color(cx.theme().border)\n .prefix(\n h_flex()\n .mx_1()\n .child(\n Button::new(\"back\")\n .ghost()\n .xsmall()\n .icon(IconName::ArrowLeft),\n )\n .child(\n Button::new(\"forward\")\n .ghost()\n .xsmall()\n .icon(IconName::ArrowRight),\n ),\n )\n .child(Tab::new().label(\"Account\"))\n .child(Tab::new().label(\"Profile\").disabled(true))\n .child(Tab::new().label(\"Documents\"))\n .child(Tab::new().label(\"Mail\"))\n .child(Tab::new().label(\"Appearance\"))\n .child(Tab::new().label(\"Settings\"))\n .child(Tab::new().label(\"About\"))\n .child(Tab::new().label(\"License\"))\n .suffix(\n h_flex()\n .mx_1()\n .child(Button::new(\"inbox\").ghost().xsmall().icon(IconName::Inbox))\n .child(\n Button::new(\"more\")\n .ghost()\n .xsmall()\n .icon(IconName::Ellipsis),\n ),\n ),\n ),\n )\n .child(\n section(\"Underline Tabs\").max_w_md().child(\n TabBar::new(\"underline\")\n .w_full()\n .underline()\n .with_size(self.size)\n .menu(self.menu)\n .selected_index(self.active_tab_ix)\n .on_click(cx.listener(|this, ix: &usize, window, cx| {\n this.set_active_tab(*ix, window, cx);\n }))\n .child(\"Account\")\n .child(\"Profile\")\n .child(\"Documents\")\n .child(\"Mail\")\n .child(\"Appearance\")\n .child(\"Settings\")\n .child(\"About\")\n .child(\"License\"),\n ),\n )\n .child(\n section(\"Pill Tabs\").max_w_md().child(\n TabBar::new(\"pill\")\n .w_full()\n .pill()\n .with_size(self.size)\n .menu(self.menu)\n .selected_index(self.active_tab_ix)\n .on_click(cx.listener(|this, ix: &usize, window, cx| {\n this.set_active_tab(*ix, window, cx);\n }))\n .child(Tab::new().label(\"Account\"))\n .child(Tab::new().label(\"Profile\").disabled(true))\n .child(Tab::new().label(\"Documents & Files\"))\n .child(Tab::new().label(\"Mail\"))\n .child(Tab::new().label(\"Appearance\"))\n .child(Tab::new().label(\"Settings\"))\n .child(Tab::new().label(\"About\"))\n .child(Tab::new().label(\"License\")),\n ),\n )\n .child(\n section(\"Outline Tabs\").max_w_md().child(\n TabBar::new(\"outline\")\n .w_full()\n .outline()\n .with_size(self.size)\n .menu(self.menu)\n .selected_index(self.active_tab_ix)\n .on_click(cx.listener(|this, ix: &usize, window, cx| {\n this.set_active_tab(*ix, window, cx);\n }))\n .child(Tab::new().label(\"Account\"))\n .child(Tab::new().label(\"Profile\").disabled(true))\n .child(Tab::new().label(\"Documents & Files\"))\n .child(Tab::new().label(\"Mail\"))\n .child(Tab::new().label(\"Appearance\"))\n .child(Tab::new().label(\"Settings\"))\n .child(Tab::new().label(\"About\"))\n .child(Tab::new().label(\"License\")),\n ),\n )\n .child(\n section(\"Segmented Tabs\").max_w_md().child(\n TabBar::new(\"segmented\")\n .w_full()\n .segmented()\n .with_size(self.size)\n .menu(self.menu)\n .selected_index(self.active_tab_ix)\n .on_click(cx.listener(|this, ix: &usize, window, cx| {\n this.set_active_tab(*ix, window, cx);\n }))\n .child(IconName::Bot)\n .child(IconName::Calendar)\n .child(IconName::Map)\n .children(vec![\"Appearance\", \"Settings\", \"About\", \"License\"]),\n ),\n )\n .child(\n section(\"Segmented Tabs (With filling space)\")\n .max_w_md()\n .child(\n TabBar::new(\"flex tabs\")\n .w_full()\n .segmented()\n .with_size(self.size)\n .selected_index(self.active_tab_ix)\n .on_click(cx.listener(|this, ix: &usize, window, cx| {\n this.set_active_tab(*ix, window, cx);\n }))\n .child(Tab::new().flex_1().label(\"About\"))\n .child(Tab::new().flex_1().label(\"Profile\")),\n ),\n )\n }\n}\n" }, { "path": "crates/story/src/stories/tag_story.rs", "content": "use gpui::{\n App, AppContext, Context, Entity, FocusHandle, Focusable, IntoElement, ParentElement, Render,\n Styled, Window, px,\n};\n\nuse gpui_component::{ColorName, Sizable, h_flex, indigo_50, indigo_500, tag::Tag, v_flex};\n\nuse crate::section;\n\npub struct TagStory {\n focus_handle: FocusHandle,\n}\n\nimpl super::Story for TagStory {\n fn title() -> &'static str {\n \"Tag\"\n }\n\n fn description() -> &'static str {\n \"A short item that can be used to categorize or label content.\"\n }\n\n fn new_view(window: &mut Window, cx: &mut App) -> Entity {\n Self::view(window, cx)\n }\n}\n\nimpl TagStory {\n pub(crate) fn new(_: &mut Window, cx: &mut App) -> Self {\n Self {\n focus_handle: cx.focus_handle(),\n }\n }\n\n pub fn view(window: &mut Window, cx: &mut App) -> Entity {\n cx.new(|cx| Self::new(window, cx))\n }\n}\nimpl Focusable for TagStory {\n fn focus_handle(&self, _: &App) -> FocusHandle {\n self.focus_handle.clone()\n }\n}\nimpl Render for TagStory {\n fn render(&mut self, _: &mut Window, _: &mut Context) -> impl IntoElement {\n v_flex()\n .w_full()\n .gap_3()\n .child(\n section(\"Tag (default)\").child(\n h_flex()\n .gap_2()\n .child(Tag::primary().child(\"Tag\"))\n .child(Tag::secondary().child(\"Secondary\"))\n .child(Tag::danger().child(\"Danger\"))\n .child(Tag::success().child(\"Success\"))\n .child(Tag::warning().child(\"Warning\"))\n .child(Tag::info().child(\"Info\"))\n .child(\n Tag::custom(indigo_500(), indigo_50(), indigo_500()).child(\"Custom\"),\n ),\n ),\n )\n .child(\n section(\"Tag (outline)\").child(\n h_flex()\n .gap_2()\n .child(Tag::primary().outline().child(\"Tag\"))\n .child(Tag::secondary().outline().child(\"Secondary\"))\n .child(Tag::danger().outline().child(\"Danger\"))\n .child(Tag::success().outline().child(\"Success\"))\n .child(Tag::warning().outline().child(\"Warning\"))\n .child(Tag::info().outline().child(\"Info\"))\n .child(\n Tag::custom(indigo_500(), indigo_500(), indigo_500())\n .outline()\n .child(\"Custom\"),\n ),\n ),\n )\n .child(\n section(\"Tag (small)\").child(\n h_flex()\n .gap_2()\n .child(Tag::primary().small().child(\"Tag\"))\n .child(Tag::secondary().small().child(\"Secondary\"))\n .child(Tag::danger().small().child(\"Danger\"))\n .child(Tag::success().small().child(\"Success\"))\n .child(Tag::warning().small().child(\"Warning\"))\n .child(Tag::info().small().child(\"Info\")),\n ),\n )\n .child(\n section(\"Tag (rounded full)\").child(\n h_flex()\n .gap_2()\n .child(Tag::primary().rounded_full().child(\"Tag\"))\n .child(Tag::secondary().rounded_full().child(\"Secondary\"))\n .child(Tag::danger().rounded_full().child(\"Danger\"))\n .child(Tag::success().rounded_full().child(\"Success\"))\n .child(Tag::warning().rounded_full().child(\"Warning\"))\n .child(Tag::info().rounded_full().child(\"Info\")),\n ),\n )\n .child(\n section(\"Tag (small with rounded full)\").child(\n h_flex()\n .gap_2()\n .child(Tag::primary().small().rounded_full().child(\"Tag\"))\n .child(Tag::secondary().small().rounded_full().child(\"Secondary\"))\n .child(Tag::danger().small().rounded_full().child(\"Danger\"))\n .child(Tag::success().small().rounded_full().child(\"Success\"))\n .child(Tag::warning().small().rounded_full().child(\"Warning\"))\n .child(Tag::info().small().rounded_full().child(\"Info\")),\n ),\n )\n .child(\n section(\"Tag (rounded 0px)\").child(\n h_flex()\n .gap_2()\n .child(Tag::primary().small().rounded(px(0.)).child(\"Tag\"))\n .child(Tag::secondary().small().rounded(px(0.)).child(\"Secondary\"))\n .child(Tag::danger().small().rounded(px(0.)).child(\"Danger\"))\n .child(Tag::success().small().rounded(px(0.)).child(\"Success\"))\n .child(Tag::warning().small().rounded(px(0.)).child(\"Warning\"))\n .child(Tag::info().small().rounded(px(0.)).child(\"Info\")),\n ),\n )\n .child(\n section(\"Color Tags\").child(\n v_flex().gap_4().child(\n h_flex().gap_2().flex_wrap().children(\n ColorName::all()\n .into_iter()\n .filter(|color| *color != ColorName::Gray)\n .map(|color| Tag::color(color).child(color.to_string())),\n ),\n ),\n ),\n )\n }\n}\n" }, { "path": "crates/story/src/stories/textarea_story.rs", "content": "use gpui::{\n App, AppContext as _, ClickEvent, Context, Entity, Focusable, IntoElement, ParentElement as _,\n Render, Styled, Window, px,\n};\n\nuse crate::section;\nuse gpui_component::{\n Sizable,\n button::Button,\n h_flex,\n input::{Input, InputState},\n v_flex,\n};\n\npub fn init(_: &mut App) {}\n\npub struct TextareaStory {\n textarea: Entity,\n textarea_auto_grow: Entity,\n textarea_no_wrap: Entity,\n textarea_auto_grow_no_wrap: Entity,\n}\n\nimpl super::Story for TextareaStory {\n fn title() -> &'static str {\n \"Textarea\"\n }\n\n fn description() -> &'static str {\n \"Input with multi-line mode.\"\n }\n\n fn closable() -> bool {\n false\n }\n\n fn new_view(window: &mut Window, cx: &mut App) -> Entity {\n Self::view(window, cx)\n }\n}\n\nimpl TextareaStory {\n pub fn view(window: &mut Window, cx: &mut App) -> Entity {\n cx.new(|cx| Self::new(window, cx))\n }\n\n fn new(window: &mut Window, cx: &mut Context) -> Self {\n let textarea = cx.new(|cx| {\n InputState::new(window, cx)\n .multi_line(true)\n .rows(10)\n .placeholder(\"Enter text here...\")\n .searchable(true)\n .default_value(\n unindent::unindent(\n r#\"Hello 世界，this is GPUI component.\n\n The GPUI Component is a collection of UI components for GPUI framework, including.\n\n Button, Input, Checkbox, Radio, Dropdown, Tab, and more...\n\n Here is an application that is built by using GPUI Component.\n\n > This application is still under development, not published yet.\n\n ![image](https://github.com/user-attachments/assets/559a648d-19df-4b5a-b563-b78cc79c8894)\n\n ![image](https://github.com/user-attachments/assets/5e06ad5d-7ea0-43db-8d13-86a240da4c8d)\n\n ## Demo\n\n If you want to see the demo, here is a some demo applications.\n \"#,\n )\n )\n });\n\n let textarea_no_wrap = cx.new(|cx| {\n InputState::new(window, cx)\n .multi_line(true)\n .rows(6)\n .soft_wrap(false)\n .default_value(\"This is a very long line of text to test if the horizontal scrolling function is working properly, and it should not wrap automatically but display a horizontal scrollbar.\\nThe second line is also very long text, used to test the horizontal scrolling effect under multiple lines, and you can input more content to test.\\nThe third line: Here you can input other long text content that requires horizontal scrolling.\\n\")\n });\n\n let textarea_auto_grow = cx.new(|cx| {\n InputState::new(window, cx)\n .auto_grow(1, 5)\n .placeholder(\"Enter text here...\")\n .default_value(\n \"Hello 世界 this is a very long line of text \\\n to test if the horizontal scrolling function is working \\\n properly, and it should not wrap automatically but display \\\n a horizontal scrollbar.\\n\\\n The second line is also very long text, used to test the \\\n horizontal scrolling effect under multiple lines, and you \\\n can input more content to test.\\nThe third line: Here you \\\n can input other long text content that requires \\\n horizontal scrolling.\\n\",\n )\n });\n\n let textarea_auto_grow_no_wrap = cx.new(|cx| {\n InputState::new(window, cx)\n .auto_grow(1, 5)\n .soft_wrap(false)\n .placeholder(\"Enter text here...\")\n .default_value(\"Hello 世界，this is GPUI component.\")\n });\n\n Self {\n textarea,\n textarea_auto_grow,\n textarea_no_wrap,\n textarea_auto_grow_no_wrap,\n }\n }\n\n fn on_insert_text_to_textarea(\n &mut self,\n _: &ClickEvent,\n window: &mut Window,\n cx: &mut Context,\n ) {\n self.textarea.update(cx, |input, cx| {\n input.insert(\"Hello 你好\", window, cx);\n });\n }\n\n fn on_replace_text_to_textarea(\n &mut self,\n _: &ClickEvent,\n window: &mut Window,\n cx: &mut Context,\n ) {\n self.textarea.update(cx, |input, cx| {\n input.replace(\"Hello 你好\", window, cx);\n });\n }\n}\n\nimpl Focusable for TextareaStory {\n fn focus_handle(&self, cx: &gpui::App) -> gpui::FocusHandle {\n self.textarea.focus_handle(cx)\n }\n}\n\nimpl Render for TextareaStory {\n fn render(&mut self, _: &mut Window, cx: &mut Context) -> impl IntoElement {\n let loc = self.textarea.read(cx).cursor_position();\n\n v_flex()\n .w_full()\n .gap_3()\n .child(\n section(\"Textarea\").child(\n v_flex()\n .gap_2()\n .w_full()\n .child(Input::new(&self.textarea).h(px(320.)))\n .child(\n h_flex()\n .justify_between()\n .child(\n h_flex()\n .gap_2()\n .child(\n Button::new(\"btn-insert-text\")\n .outline()\n .xsmall()\n .label(\"Insert Text\")\n .on_click(\n cx.listener(Self::on_insert_text_to_textarea),\n ),\n )\n .child(\n Button::new(\"btn-replace-text\")\n .outline()\n .xsmall()\n .label(\"Replace Text\")\n .on_click(\n cx.listener(Self::on_replace_text_to_textarea),\n ),\n ),\n )\n .child(format!(\"{}:{}\", loc.line, loc.character)),\n ),\n ),\n )\n .child(\n section(\"No Wrap\")\n .max_w_md()\n .child(Input::new(&self.textarea_no_wrap).h(px(200.))),\n )\n .child(\n section(\"Auto Grow\")\n .max_w_md()\n .child(Input::new(&self.textarea_auto_grow)),\n )\n .child(\n section(\"Auto Grow with No Wrap\")\n .max_w_md()\n .child(Input::new(&self.textarea_auto_grow_no_wrap)),\n )\n }\n}\n" }, { "path": "crates/story/src/stories/theme_story/checkerboard.rs", "content": "use gpui::*;\nuse gpui_component::ActiveTheme as _;\n\n#[derive(IntoElement)]\npub struct Checkerboard {\n children: Vec,\n is_dark: bool,\n}\n\nimpl Checkerboard {\n pub fn new(is_dark: bool) -> Self {\n Self {\n children: Vec::new(),\n is_dark,\n }\n }\n}\n\nimpl ParentElement for Checkerboard {\n fn extend(&mut self, elements: impl IntoIterator) {\n self.children.extend(elements);\n }\n}\n\nimpl RenderOnce for Checkerboard {\n fn render(self, _window: &mut Window, cx: &mut App) -> impl IntoElement {\n let square_size = px(12.);\n // Use a subtle difference for the checkerboard\n let (c1, c2) = if self.is_dark {\n // Dark mode: dark grey and slightly lighter grey\n (hsla(0., 0., 0.1, 1.), hsla(0., 0., 0.13, 1.))\n } else {\n // Light mode: white and light grey\n (hsla(0., 0., 1.0, 1.), hsla(0., 0., 0.95, 1.))\n };\n\n div()\n .bg(c1)\n .rounded(cx.theme().radius_lg)\n .overflow_hidden()\n .size_full()\n .child(\n gpui::canvas(\n move |_, _, _| (),\n move |bounds, _, window, _| {\n let size = square_size;\n let rows = (bounds.size.height / size).ceil() as i32;\n let cols = (bounds.size.width / size).ceil() as i32;\n\n for row in 0..rows {\n for col in 0..cols {\n if (row + col) % 2 == 0 {\n let origin = bounds.origin\n + gpui::point(size * (col as f32), size * (row as f32));\n\n window.paint_quad(gpui::PaintQuad {\n bounds: gpui::Bounds {\n origin,\n size: gpui::size(size, size),\n },\n corner_radii: gpui::Corners::default(),\n background: c2.into(),\n border_widths: gpui::Edges::default(),\n border_color: gpui::transparent_black(),\n border_style: gpui::BorderStyle::default(),\n });\n }\n }\n }\n },\n )\n .absolute()\n .size_full(),\n )\n .children(self.children)\n }\n}\n" }, { "path": "crates/story/src/stories/theme_story/color_theme_story.rs", "content": "use gpui::{prelude::FluentBuilder, *};\nuse gpui_component::{\n ActiveTheme as _, Icon, IconName, IndexPath, StyledExt as _, ThemeColor,\n button::{Button, ButtonVariants as _},\n h_flex,\n input::{Input, InputEvent, InputState},\n menu::PopupMenuItem,\n scroll::ScrollableElement,\n select::{Select, SelectEvent, SelectItem, SelectState},\n sidebar::{Sidebar, SidebarMenu, SidebarMenuItem},\n switch::Switch,\n v_flex,\n};\n\nuse crate::stories::theme_story::checkerboard::Checkerboard;\n\nuse std::collections::BTreeMap;\nuse std::rc::Rc;\n\n#[derive(Clone)]\nstruct ColorEntry {\n name: String,\n color: Hsla,\n hex: String,\n is_explicit: bool,\n}\n\n#[derive(Clone)]\nstruct ColorCategory {\n name: String,\n entries: Vec,\n}\n\n#[derive(Clone, PartialEq)]\nstruct ThemeItem {\n name: SharedString,\n is_active: bool,\n}\n\nimpl ThemeItem {\n fn new(name: impl Into, is_active: bool) -> Self {\n Self {\n name: name.into(),\n is_active,\n }\n }\n}\n\nimpl SelectItem for ThemeItem {\n type Value = SharedString;\n\n fn title(&self) -> SharedString {\n self.name.clone()\n }\n\n fn value(&self) -> &Self::Value {\n &self.name\n }\n\n fn render(&self, _window: &mut Window, cx: &mut App) -> impl IntoElement {\n h_flex()\n .w_full()\n .items_center()\n .gap_2()\n .child(\n div()\n .size(rems(1.0))\n .flex_shrink_0()\n .when(self.is_active, |this| {\n this.child(\n Icon::new(IconName::Check)\n .size(rems(1.0))\n .text_color(cx.theme().primary),\n )\n }),\n )\n .child(self.name.clone())\n }\n}\n\npub struct ThemeColorsStory {\n select_state: Entity>>,\n selected_theme_name: SharedString,\n show_all_colors: bool,\n sidebar_render_key: usize,\n force_open_state: Option,\n filter_by_value: Option,\n filter_input: Entity,\n all_categories: Vec,\n categories: Vec,\n}\n\nimpl crate::stories::Story for ThemeColorsStory {\n fn title() -> &'static str {\n \"Theme Colors\"\n }\n\n fn description() -> &'static str {\n \"A color theme viewer to explore colors organized by categories.\"\n // Themes are loaded by applying user-defined color overrides to a default base theme,\n // with inherited colors marked by an indicator dot.\n }\n\n fn new_view(window: &mut Window, cx: &mut App) -> Entity {\n Self::view(window, cx)\n }\n}\n\nimpl ThemeColorsStory {\n pub fn view(window: &mut Window, cx: &mut App) -> Entity {\n cx.new(|cx| Self::new(window, cx))\n }\n\n fn new(window: &mut Window, cx: &mut Context) -> Self {\n use gpui_component::ThemeRegistry;\n\n let registry = ThemeRegistry::global(cx);\n let mut themes = registry.sorted_themes();\n\n themes.sort_by(|a, b| a.name.to_lowercase().cmp(&b.name.to_lowercase()));\n\n let active_theme_name = cx.theme().theme_name().clone();\n let items: Vec = themes\n .iter()\n .map(|theme| ThemeItem::new(theme.name.clone(), theme.name == active_theme_name))\n .collect();\n\n let current_theme = active_theme_name.clone();\n let selected_index = items.iter().position(|item| item.name == current_theme);\n let selected_path = selected_index.map(|idx| IndexPath::default().row(idx));\n let select_state = cx.new(|cx| SelectState::new(items, selected_path, window, cx));\n\n let mut this = Self {\n select_state: select_state.clone(),\n selected_theme_name: current_theme,\n show_all_colors: false,\n sidebar_render_key: 0,\n force_open_state: None,\n filter_by_value: None,\n filter_input: cx.new(|cx| InputState::new(window, cx).placeholder(\"Search...\")),\n all_categories: Vec::new(),\n categories: Vec::new(),\n };\n\n cx.subscribe(\n &select_state,\n |this, _, event: &SelectEvent>, cx| {\n let SelectEvent::Confirm(theme_name) = event;\n if let Some(theme_name) = theme_name {\n this.selected_theme_name = theme_name.clone();\n this.filter_by_value = None;\n this.all_categories.clear();\n this.compute_categories(cx);\n cx.notify();\n }\n },\n )\n .detach();\n\n cx.subscribe(&this.filter_input, |this, _, event, cx| {\n if let InputEvent::Change = event {\n this.compute_categories(cx);\n cx.notify();\n }\n })\n .detach();\n\n this.compute_categories(cx);\n this\n }\n\n fn get_theme_colors(&self, cx: &Context) -> ThemeColor {\n use gpui_component::{Theme as UITheme, ThemeRegistry};\n\n if let Some(theme_config) = ThemeRegistry::global(cx)\n .themes()\n .get(&self.selected_theme_name)\n .cloned()\n {\n let mut temp_theme = if theme_config.mode.is_dark() {\n UITheme::from(ThemeColor::dark().as_ref())\n } else {\n UITheme::from(ThemeColor::light().as_ref())\n };\n\n // Apply the config to get proper colors using the public API\n temp_theme.apply_config(&theme_config);\n temp_theme.colors\n } else {\n // Fallback to current theme if selected theme not found\n **cx.theme()\n }\n }\n\n fn get_isolated_theme(&self, cx: &App) -> (ThemeColor, bool) {\n use gpui_component::{Theme as UITheme, ThemeRegistry};\n\n let registry = ThemeRegistry::global(cx);\n\n // Look up the selected theme configuration\n let selected_theme_config = registry.themes().get(&self.selected_theme_name);\n\n let is_dark = if let Some(config) = selected_theme_config {\n config.mode.is_dark()\n } else {\n // Fallback to system appearance if selected theme lookup fails\n let appearance = cx.window_appearance();\n appearance == WindowAppearance::Dark || appearance == WindowAppearance::VibrantDark\n };\n\n let theme_config = if is_dark {\n registry.default_dark_theme()\n } else {\n registry.default_light_theme()\n };\n\n let mut temp_theme = if theme_config.mode.is_dark() {\n UITheme::from(ThemeColor::dark().as_ref())\n } else {\n UITheme::from(ThemeColor::light().as_ref())\n };\n\n temp_theme.apply_config(theme_config);\n (temp_theme.colors, is_dark)\n }\n\n fn compute_categories(&mut self, cx: &Context) {\n use gpui_component::ThemeRegistry;\n\n if self.all_categories.is_empty() {\n let theme = self.get_theme_colors(cx);\n let registry = ThemeRegistry::global(cx);\n let theme_config = registry.themes().get(&self.selected_theme_name).cloned();\n\n self.all_categories = format_colors(&theme, theme_config.as_ref().map(|c| &c.colors));\n }\n\n let mut categories = self.all_categories.clone();\n\n if let Some(filter_value) = self.filter_by_value {\n categories = filter_categories(categories, |entry| {\n colors_equal_u8(entry.color, filter_value)\n });\n } else if !self.show_all_colors {\n categories = filter_categories(categories, |entry| entry.is_explicit);\n }\n\n let query = self.filter_input.read(cx).value().trim().to_lowercase();\n if !query.is_empty() {\n let normalized_query = query.strip_prefix('#').unwrap_or(&query);\n categories = categories\n .into_iter()\n .filter_map(\n |ColorCategory {\n name: category,\n entries: colors,\n }| {\n let category_matches = category.to_lowercase().contains(&query);\n let filtered_colors: Vec<_> = colors\n .into_iter()\n .filter(|entry| {\n if category_matches || entry.name.to_lowercase().contains(&query) {\n return true;\n }\n\n // Hex matching\n entry.hex.starts_with(normalized_query)\n })\n .collect();\n\n if filtered_colors.is_empty() {\n None\n } else {\n Some(ColorCategory {\n name: category,\n entries: filtered_colors,\n })\n }\n },\n )\n .collect();\n }\n\n self.categories = categories;\n }\n\n fn render_color_swatch(\n name: String,\n color: Hsla,\n hex: String,\n is_explicit: bool,\n isolated_theme: &ThemeColor,\n cx: &App,\n ) -> impl IntoElement {\n use gpui_component::{WindowExt as _, clipboard::Clipboard};\n\n let rgb_str = format!(\"#{}\", hex);\n let swatch_group = format!(\"swatch-{}\", name);\n\n h_flex()\n .group(swatch_group.clone())\n .gap_3()\n .items_center()\n .child(\n div()\n .size_16()\n .rounded(cx.theme().radius)\n .bg(color)\n .border_1()\n .border_color(isolated_theme.border)\n .flex_shrink_0(),\n )\n .child(\n v_flex()\n .gap_1()\n .flex_1()\n .child(\n h_flex()\n .gap_2()\n .items_center()\n .when(!is_explicit, |this| {\n this.child(\n div()\n .size_1p5()\n .rounded_full()\n .bg(isolated_theme.foreground)\n .flex_shrink_0(),\n )\n })\n .child(\n div()\n .text_sm()\n .font_medium()\n .when(!is_explicit, |this: Div| {\n this.text_color(isolated_theme.muted_foreground)\n })\n .when(is_explicit, |this| {\n this.text_color(isolated_theme.foreground)\n })\n .child(name.clone()),\n ),\n )\n .child(\n h_flex()\n .gap_1()\n .items_center()\n .child(\n div()\n .text_sm()\n .text_color(isolated_theme.muted_foreground)\n .child(rgb_str.clone()),\n )\n .child(\n div()\n .invisible()\n .group_hover(swatch_group, |this| this.visible())\n .child(\n Clipboard::new(format!(\"copy-{}\", name))\n .value(rgb_str)\n .on_copied(move |value, window, cx| {\n window.push_notification(\n format!(\"Copied {} to clipboard\", value),\n cx,\n )\n }),\n ),\n ),\n ),\n )\n }\n\n fn render_left_panel(&self, _: &mut Window, cx: &mut Context) -> Sidebar {\n let categories = &self.categories;\n let is_filtering = self.filter_by_value.is_some();\n let entity_ref = cx.entity().clone();\n\n let expand_all = Rc::new(cx.listener(\n |this: &mut Self, _: &ClickEvent, _: &mut Window, cx: &mut Context| {\n this.sidebar_render_key += 1;\n this.force_open_state = Some(true);\n cx.notify();\n },\n ));\n\n let collapse_all = Rc::new(cx.listener(\n |this: &mut Self, _: &ClickEvent, _: &mut Window, cx: &mut Context| {\n this.sidebar_render_key += 1;\n this.force_open_state = Some(false);\n cx.notify();\n },\n ));\n\n Sidebar::new(format!(\"color-theme-sidebar-{}\", self.sidebar_render_key))\n .w(px(300.))\n .border_0()\n .header(Input::new(&self.filter_input).prefix(IconName::Search))\n .child(\n SidebarMenu::new().children(categories.iter().enumerate().map(\n |(\n idx,\n ColorCategory {\n name: category_name,\n entries: colors,\n },\n )| {\n let is_open = self.force_open_state.unwrap_or_else(|| idx == 0);\n\n SidebarMenuItem::new(category_name.clone())\n .default_open(is_open)\n .click_to_open(true)\n .context_menu({\n let expand_all = expand_all.clone();\n let collapse_all = collapse_all.clone();\n move |menu, _, _| {\n menu.item(PopupMenuItem::new(\"Expand All\").on_click({\n let expand_all = expand_all.clone();\n move |ev, window, cx| (expand_all)(ev, window, cx)\n }))\n .item(\n PopupMenuItem::new(\"Collapse All\").on_click({\n let collapse_all = collapse_all.clone();\n move |ev, window, cx| (collapse_all)(ev, window, cx)\n }),\n )\n }\n })\n .children(colors.iter().map(|entry| {\n let color_value = entry.color;\n let is_explicit = entry.is_explicit;\n let color_view = entity_ref.clone();\n SidebarMenuItem::new(entry.name.clone())\n .suffix(move |_, cx| {\n h_flex()\n .gap_2()\n .items_center()\n .when(!is_explicit, |this| {\n this.child(\n div()\n .size_1p5()\n .rounded_full()\n .bg(cx.theme().foreground),\n )\n })\n .child(\n div()\n .size_4()\n .rounded(cx.theme().radius.half())\n .bg(color_value)\n .border_1()\n .border_color(cx.theme().border)\n .flex_shrink_0(),\n )\n })\n .context_menu(move |menu, _, _| {\n let menu_view = color_view.clone();\n if is_filtering {\n menu.item(\n PopupMenuItem::new(\"Show All Values\").on_click(\n move |_, _, cx| {\n menu_view.update(cx, |this, cx| {\n this.filter_by_value = None;\n this.compute_categories(cx);\n cx.notify();\n })\n },\n ),\n )\n } else {\n menu.item(\n PopupMenuItem::new(\"Filter By Value\").on_click(\n move |_, _, cx| {\n menu_view.update(cx, |this, cx| {\n this.filter_by_value =\n Some(color_value);\n this.compute_categories(cx);\n cx.notify();\n })\n },\n ),\n )\n }\n })\n }))\n },\n )),\n )\n }\n\n fn render_right_panel(&self, window: &mut Window, cx: &mut Context) -> impl IntoElement {\n let (isolated_theme, is_dark) = self.get_isolated_theme(cx);\n\n let categories = self.categories.clone();\n let categories_count = categories.len();\n let list_state = window\n .use_keyed_state(\"color-theme-right-panel-list-state\", cx, |_, _| {\n ListState::new(19, ListAlignment::Top, px(1000.))\n })\n .read(cx)\n .clone();\n if list_state.item_count() != categories_count {\n list_state.reset(categories_count);\n }\n\n div()\n .border_1()\n .border_color(isolated_theme.border)\n .rounded(cx.theme().radius_lg)\n .size_full()\n .overflow_hidden()\n .child(\n Checkerboard::new(is_dark).child(\n v_flex()\n .size_full()\n .overflow_hidden()\n .rounded(cx.theme().radius_lg)\n .px_4()\n .child(\n list(list_state.clone(), {\n move |ix, _, cx| {\n let ColorCategory {\n name: category_name,\n entries: colors,\n } = categories[ix].clone();\n let is_last = categories_count > 0\n && ix == categories_count.saturating_sub(1);\n\n v_flex()\n .w_full()\n .gap_3()\n .pt_4()\n .when(is_last, |this| this.pb_4())\n .child(\n div()\n .text_base()\n .font_semibold()\n .pb_2()\n .border_b_1()\n .border_color(isolated_theme.border)\n .text_color(isolated_theme.foreground)\n .child(category_name.clone()),\n )\n .child(div().flex().flex_wrap().gap_4().children(\n colors.iter().map(|entry| {\n div().w(px(220.)).child(Self::render_color_swatch(\n entry.name.to_string(),\n entry.color,\n entry.hex.clone(),\n entry.is_explicit,\n &isolated_theme,\n cx,\n ))\n }),\n ))\n .into_any_element()\n }\n })\n .size_full(),\n )\n .vertical_scrollbar(&list_state),\n ),\n )\n }\n}\n\nfn format_colors(\n theme: &ThemeColor,\n config: Option<&gpui_component::theme::ThemeConfigColors>,\n) -> Vec {\n let json_theme = serde_json::to_value(theme).unwrap_or(serde_json::Value::Null);\n let mut categories: BTreeMap> = BTreeMap::new();\n\n // Create a set of keys present in the config (if available)\n let config_keys: Option> = config.map(|c| {\n let json_config = serde_json::to_value(c).unwrap_or(serde_json::Value::Null);\n if let serde_json::Value::Object(map) = json_config {\n map.into_iter()\n .filter(|(_, v)| !v.is_null())\n .map(|(k, _)| k)\n .collect()\n } else {\n std::collections::HashSet::new()\n }\n });\n\n if let serde_json::Value::Object(map) = json_theme {\n for (key, value) in map {\n if let Ok(color) = serde_json::from_value::(value) {\n let parsed = super::mapper::parse_theme_key(&key);\n let category = parsed.category;\n let name = parsed.name;\n\n // Check if this key is explicit in the user config\n let is_explicit = config_keys\n .as_ref()\n .map_or(false, |k| k.contains(&parsed.canonical_key));\n\n categories.entry(category).or_default().push(ColorEntry {\n name,\n color,\n hex: hsla_to_hex(color),\n is_explicit,\n });\n }\n }\n }\n\n for colors in categories.values_mut() {\n colors.sort_by(|a, b| a.name.cmp(&b.name));\n }\n\n let mut categories_vec: Vec<_> = categories\n .into_iter()\n .map(|(name, entries)| ColorCategory { name, entries })\n .collect();\n\n // Custom sort: Global first, then Primary, then others\n categories_vec.sort_by(|a, b| {\n let priority_order = [\n \"Global\",\n \"Primary\",\n \"Secondary\",\n \"Accent\",\n \"Base\",\n \"Background\",\n \"Foreground\",\n \"Structure\",\n ];\n\n let a_priority = priority_order.iter().position(|&x| x == a.name.as_str());\n let b_priority = priority_order.iter().position(|&x| x == b.name.as_str());\n\n match (a_priority, b_priority) {\n (Some(a_pos), Some(b_pos)) => a_pos.cmp(&b_pos),\n (Some(_), None) => std::cmp::Ordering::Less,\n (None, Some(_)) => std::cmp::Ordering::Greater,\n (None, None) => a.name.cmp(&b.name),\n }\n });\n\n categories_vec\n}\n\nfn hsla_to_hex(color: Hsla) -> String {\n let rgb = color.to_rgb();\n if color.a < 1.0 {\n format!(\n \"{:02x}{:02x}{:02x}{:02x}\",\n (rgb.r * 255.0) as u8,\n (rgb.g * 255.0) as u8,\n (rgb.b * 255.0) as u8,\n (color.a * 255.0) as u8\n )\n } else {\n format!(\n \"{:02x}{:02x}{:02x}\",\n (rgb.r * 255.0) as u8,\n (rgb.g * 255.0) as u8,\n (rgb.b * 255.0) as u8\n )\n }\n}\n\n/// Compares two HSLA colors for equality at 8-bit precision.\nfn colors_equal_u8(c1: Hsla, c2: Hsla) -> bool {\n let rgb1 = c1.to_rgb();\n let rgb2 = c2.to_rgb();\n let eq = |a: f32, b: f32| (a * 255.0).round() as u8 == (b * 255.0).round() as u8;\n eq(rgb1.r, rgb2.r) && eq(rgb1.g, rgb2.g) && eq(rgb1.b, rgb2.b) && eq(c1.a, c2.a)\n}\n\n/// Filters categories by a predicate on color entries, removing empty categories.\nfn filter_categories(\n categories: Vec,\n predicate: impl Fn(&ColorEntry) -> bool,\n) -> Vec {\n categories\n .into_iter()\n .filter_map(\n |ColorCategory {\n name: category,\n entries: colors,\n }| {\n let filtered: Vec<_> = colors.into_iter().filter(|e| predicate(e)).collect();\n if filtered.is_empty() {\n None\n } else {\n Some(ColorCategory {\n name: category,\n entries: filtered,\n })\n }\n },\n )\n .collect()\n}\n\nimpl Render for ThemeColorsStory {\n fn render(&mut self, window: &mut Window, cx: &mut Context) -> impl IntoElement {\n v_flex()\n .gap_4()\n .size_full()\n .overflow_hidden()\n .child(\n // Theme selector at the top\n h_flex()\n .gap_x_3()\n .child(div().w(px(300.)).child(Select::new(&self.select_state)))\n .child(\n Button::new(\"set_theme\")\n .primary()\n .label(\"Set Theme\")\n .on_click(cx.listener(|this, _, window, cx| {\n use gpui_component::{Theme, ThemeRegistry};\n\n let registry = ThemeRegistry::global(cx);\n if let Some(theme_config) =\n registry.themes().get(&this.selected_theme_name).cloned()\n {\n let mode = theme_config.mode;\n let theme = Theme::global_mut(cx);\n if mode.is_dark() {\n theme.dark_theme = theme_config;\n } else {\n theme.light_theme = theme_config;\n }\n Theme::change(mode, None, cx);\n cx.refresh_windows();\n\n // Refresh the select items to update the active checkmark\n let active_theme_name = cx.theme().theme_name().clone();\n let themes = ThemeRegistry::global(cx).sorted_themes();\n\n // Re-create items with new active state\n let mut items: Vec = themes\n .iter()\n .map(|theme| {\n ThemeItem::new(\n theme.name.clone(),\n // Note: we need to handle case sensitivity if names differ,\n // but usually accurate.\n theme.name == active_theme_name,\n )\n })\n .collect();\n\n // Sort again to be safe/consistent\n items.sort_by(|a, b| {\n a.name.to_lowercase().cmp(&b.name.to_lowercase())\n });\n\n // Update the select state\n this.select_state.update(cx, |state, cx| {\n state.set_items(items, window, cx);\n });\n }\n })),\n )\n .child(\n Switch::new(\"show_all_colors\")\n .checked(self.show_all_colors)\n .label(\"Show Inherited Colors\")\n .on_click(cx.listener(|this, checked: &bool, _window, cx| {\n this.show_all_colors = *checked;\n this.compute_categories(cx);\n cx.notify();\n })),\n )\n .child(\n Switch::new(\"expand_collapse_switch\")\n .checked(self.force_open_state == Some(true))\n .label(if self.force_open_state == Some(true) {\n \"Collapse All\"\n } else {\n \"Expand All\"\n })\n .on_click(cx.listener(|this, checked: &bool, _window, cx| {\n this.sidebar_render_key += 1;\n this.force_open_state = Some(*checked);\n cx.notify();\n })),\n ),\n )\n .child(\n h_flex()\n .flex_1()\n .items_start()\n .gap_4()\n .child(self.render_left_panel(window, cx))\n .child(self.render_right_panel(window, cx)),\n )\n }\n}\n" }, { "path": "crates/story/src/stories/theme_story/mapper.rs", "content": "/// A compatibility bridge for mapping theme color keys.\n///\n/// This module provides a way to translate between the legacy snake_case keys\n/// used in `ThemeColor` and the logical categories/names expected by the\n/// Color Theme Viewer.\n///\n/// ### How to eliminate this mapper\n///\n/// If the project decides to unify the theme schema project-wide (using dot-notation),\n/// follow these steps to remove this \"temporary bridge\":\n///\n/// 1. **Update `ThemeColor`**:\n/// In `crates/ui/src/theme/theme_color.rs`, add `#[serde(rename = \"...\")]` attributes\n/// to all fields of the `ThemeColor` struct to match their canonical dot-notation\n/// names (e.g., `accent_foreground` -> `#[serde(rename = \"accent.foreground\")]`).\n///\n/// 2. **Update JSON Themes**:\n/// Ensure `crates/ui/src/theme/default-theme.json` and any files in `themes/`\n/// strictly use the dot-notation keys.\n///\n/// 3. **Refactor the Viewer**:\n/// In `crates/story/src/stories/theme_story/color_theme_story.rs`, remove the call\n/// to `super::mapper::parse_theme_key` and replace it with a simple split on the '.' character.\n///\n/// 4. **Delete this file**:\n/// Remove `mapper.rs` and its module declaration in `mod.rs`.\n///\n/// Represents a parsed theme key with a category, a display name, and a canonical dot-notation key.\npub struct ParsedKey {\n pub category: String,\n pub name: String,\n pub canonical_key: String,\n}\n\n/// Parses a theme key (either snake_case or dot-notation) into a logical category and name.\npub fn parse_theme_key(key: &str) -> ParsedKey {\n // 1. Check for dot-notation (e.g., \"accent.background\")\n if key.contains('.') {\n let parts: Vec<&str> = key.splitn(2, '.').collect();\n return ParsedKey {\n category: to_title_case_full(parts[0]),\n name: to_title_case_full(parts[1]),\n canonical_key: key.to_string(),\n };\n }\n\n // 2. Handle legacy snake_case remapping (e.g., \"accent_foreground\" -> \"Accent\" / \"Foreground\")\n // This list attempts to reconstruct the hierarchy from the flat ThemeColor struct.\n let (category, name, canonical) = match key {\n // Accent\n \"accent\" => (\"Accent\", \"Background\", \"accent.background\"),\n \"accent_foreground\" => (\"Accent\", \"Foreground\", \"accent.foreground\"),\n\n // Primary\n \"primary\" => (\"Primary\", \"Background\", \"primary.background\"),\n \"primary_active\" => (\"Primary\", \"Active Background\", \"primary.active.background\"),\n \"primary_foreground\" => (\"Primary\", \"Foreground\", \"primary.foreground\"),\n \"primary_hover\" => (\"Primary\", \"Hover Background\", \"primary.hover.background\"),\n\n // Secondary\n \"secondary\" => (\"Secondary\", \"Background\", \"secondary.background\"),\n \"secondary_active\" => (\n \"Secondary\",\n \"Active Background\",\n \"secondary.active.background\",\n ),\n \"secondary_foreground\" => (\"Secondary\", \"Foreground\", \"secondary.foreground\"),\n \"secondary_hover\" => (\n \"Secondary\",\n \"Hover Background\",\n \"secondary.hover.background\",\n ),\n\n // Sidebar\n \"sidebar\" => (\"Sidebar\", \"Background\", \"sidebar.background\"),\n \"sidebar_accent\" => (\"Sidebar\", \"Accent Background\", \"sidebar.accent.background\"),\n \"sidebar_accent_foreground\" => {\n (\"Sidebar\", \"Accent Foreground\", \"sidebar.accent.foreground\")\n }\n \"sidebar_border\" => (\"Sidebar\", \"Border\", \"sidebar.border\"),\n \"sidebar_foreground\" => (\"Sidebar\", \"Foreground\", \"sidebar.foreground\"),\n \"sidebar_primary\" => (\n \"Sidebar\",\n \"Primary Background\",\n \"sidebar.primary.background\",\n ),\n \"sidebar_primary_foreground\" => (\n \"Sidebar\",\n \"Primary Foreground\",\n \"sidebar.primary.foreground\",\n ),\n\n // List\n \"list\" => (\"List\", \"Background\", \"list.background\"),\n \"list_active\" => (\"List\", \"Active Background\", \"list.active.background\"),\n \"list_active_border\" => (\"List\", \"Active Border\", \"list.active.border\"),\n \"list_even\" => (\"List\", \"Even Background\", \"list.even.background\"),\n \"list_head\" => (\"List\", \"Head Background\", \"list.head.background\"),\n \"list_hover\" => (\"List\", \"Hover Background\", \"list.hover.background\"),\n\n // Table\n \"table\" => (\"Table\", \"Background\", \"table.background\"),\n \"table_active\" => (\"Table\", \"Active Background\", \"table.active.background\"),\n \"table_active_border\" => (\"Table\", \"Active Border\", \"table.active.border\"),\n \"table_even\" => (\"Table\", \"Even Background\", \"table.even.background\"),\n \"table_head\" => (\"Table\", \"Head Background\", \"table.head.background\"),\n \"table_head_foreground\" => (\"Table\", \"Head Foreground\", \"table.head.foreground\"),\n \"table_hover\" => (\"Table\", \"Hover Background\", \"table.hover.background\"),\n \"table_row_border\" => (\"Table\", \"Row Border\", \"table.row.border\"),\n\n // Tabs\n \"tab\" => (\"Tab\", \"Background\", \"tab.background\"),\n \"tab_active\" => (\"Tab\", \"Active Background\", \"tab.active.background\"),\n \"tab_active_foreground\" => (\"Tab\", \"Active Foreground\", \"tab.active.foreground\"),\n \"tab_bar\" => (\"Tab Bar\", \"Background\", \"tab_bar.background\"),\n \"tab_bar_segmented\" => (\n \"Tab Bar\",\n \"Segmented Background\",\n \"tab_bar.segmented.background\",\n ),\n \"tab_foreground\" => (\"Tab\", \"Foreground\", \"tab.foreground\"),\n\n // Input\n \"input\" => (\"Input\", \"Border\", \"input.border\"),\n \"caret\" => (\"Input\", \"Caret\", \"caret\"),\n \"selection\" => (\"Input\", \"Selection\", \"selection.background\"),\n\n // Slider / Switch\n \"slider_bar\" => (\"Slider\", \"Bar\", \"slider.background\"),\n \"slider_thumb\" => (\"Slider\", \"Thumb\", \"slider.thumb.background\"),\n \"switch\" => (\"Switch\", \"Background\", \"switch.background\"),\n \"switch_thumb\" => (\"Switch\", \"Thumb\", \"switch.thumb.background\"),\n\n // Muted / Skeleton\n \"muted\" => (\"Muted\", \"Background\", \"muted.background\"),\n \"muted_foreground\" => (\"Muted\", \"Foreground\", \"muted.foreground\"),\n \"skeleton\" => (\"Skeleton\", \"Background\", \"skeleton.background\"),\n\n // Charts\n \"chart_1\" => (\"Chart\", \"Color 1\", \"chart.1\"),\n \"chart_2\" => (\"Chart\", \"Color 2\", \"chart.2\"),\n \"chart_3\" => (\"Chart\", \"Color 3\", \"chart.3\"),\n \"chart_4\" => (\"Chart\", \"Color 4\", \"chart.4\"),\n \"chart_5\" => (\"Chart\", \"Color 5\", \"chart.5\"),\n\n // Danger / Success / Warning / Info\n \"danger\" => (\"Danger\", \"Background\", \"danger.background\"),\n \"danger_active\" => (\"Danger\", \"Active\", \"danger.active.background\"),\n \"danger_foreground\" => (\"Danger\", \"Foreground\", \"danger.foreground\"),\n \"danger_hover\" => (\"Danger\", \"Hover\", \"danger.hover.background\"),\n\n \"success\" => (\"Success\", \"Background\", \"success.background\"),\n \"success_active\" => (\"Success\", \"Active\", \"success.active.background\"),\n \"success_foreground\" => (\"Success\", \"Foreground\", \"success.foreground\"),\n \"success_hover\" => (\"Success\", \"Hover\", \"success.hover.background\"),\n\n \"warning\" => (\"Warning\", \"Background\", \"warning.background\"),\n \"warning_active\" => (\"Warning\", \"Active\", \"warning.active.background\"),\n \"warning_foreground\" => (\"Warning\", \"Foreground\", \"warning.foreground\"),\n \"warning_hover\" => (\"Warning\", \"Hover\", \"warning.hover.background\"),\n\n \"info\" => (\"Info\", \"Background\", \"info.background\"),\n \"info_active\" => (\"Info\", \"Active\", \"info.active.background\"),\n \"info_foreground\" => (\"Info\", \"Foreground\", \"info.foreground\"),\n \"info_hover\" => (\"Info\", \"Hover\", \"info.hover.background\"),\n\n // Base Colors\n \"red\" => (\"Base\", \"Red\", \"base.red\"),\n \"red_light\" => (\"Base\", \"Red Light\", \"base.red.light\"),\n \"green\" => (\"Base\", \"Green\", \"base.green\"),\n \"green_light\" => (\"Base\", \"Green Light\", \"base.green.light\"),\n \"blue\" => (\"Base\", \"Blue\", \"base.blue\"),\n \"blue_light\" => (\"Base\", \"Blue Light\", \"base.blue.light\"),\n \"yellow\" => (\"Base\", \"Yellow\", \"base.yellow\"),\n \"yellow_light\" => (\"Base\", \"Yellow Light\", \"base.yellow.light\"),\n \"magenta\" => (\"Base\", \"Magenta\", \"base.magenta\"),\n \"magenta_light\" => (\"Base\", \"Magenta Light\", \"base.magenta.light\"),\n \"cyan\" => (\"Base\", \"Cyan\", \"base.cyan\"),\n \"cyan_light\" => (\"Base\", \"Cyan Light\", \"base.cyan.light\"),\n\n // Everything else remains in Global or attempts a split\n _ => {\n if key.contains('_') {\n let parts: Vec<&str> = key.splitn(2, '_').collect();\n (parts[0], parts[1], key)\n } else {\n (\"Global\", key, key)\n }\n }\n };\n\n ParsedKey {\n category: to_title_case_full(category),\n name: to_title_case_full(name),\n canonical_key: canonical.to_string(),\n }\n}\n\nfn to_title_case(s: &str) -> String {\n let mut c = s.chars();\n match c.next() {\n None => String::new(),\n Some(f) => f.to_uppercase().collect::() + c.as_str(),\n }\n}\n\nfn to_title_case_full(s: &str) -> String {\n s.split(|c| c == '_' || c == '.')\n .map(to_title_case)\n .collect::>()\n .join(\" \")\n}\n" }, { "path": "crates/story/src/stories/theme_story/mod.rs", "content": "mod checkerboard;\nmod color_theme_story;\nmod mapper;\n\npub use color_theme_story::*;" }, { "path": "crates/story/src/stories/toggle_story.rs", "content": "use gpui::{\n App, AppContext as _, Context, Entity, FocusHandle, Focusable, IntoElement, ParentElement as _,\n Render, Styled as _, Window,\n};\n\nuse gpui_component::{\n IconName, Sizable, StyledExt,\n button::{Toggle, ToggleGroup, ToggleVariants},\n v_flex,\n};\n\nuse crate::section;\n\npub struct ToggleStory {\n focus_handle: FocusHandle,\n single_toggle: usize,\n checked: Vec,\n}\n\nimpl ToggleStory {\n pub fn view(_: &mut Window, cx: &mut App) -> Entity {\n cx.new(|cx| Self {\n focus_handle: cx.focus_handle(),\n single_toggle: 0,\n checked: vec![false; 20],\n })\n }\n}\n\nimpl super::Story for ToggleStory {\n fn title() -> &'static str {\n \"ToggleButton\"\n }\n\n fn description() -> &'static str {\n \"\"\n }\n\n fn closable() -> bool {\n false\n }\n\n fn new_view(window: &mut Window, cx: &mut App) -> Entity {\n Self::view(window, cx)\n }\n}\n\nimpl Focusable for ToggleStory {\n fn focus_handle(&self, _: &gpui::App) -> gpui::FocusHandle {\n self.focus_handle.clone()\n }\n}\n\nimpl Render for ToggleStory {\n fn render(&mut self, _: &mut Window, cx: &mut Context) -> impl IntoElement {\n v_flex()\n .w_full()\n .gap_3()\n .child(\n section(\"Toggle\")\n .child(\n Toggle::new(\"item1\")\n .label(\"Single Toggle Item 1\")\n .large()\n .checked(self.single_toggle == 1)\n .on_click(cx.listener(|view, checked, _, cx| {\n if *checked {\n view.single_toggle = 1;\n }\n cx.notify();\n })),\n )\n .child(\n Toggle::new(\"item2\")\n .label(\"Single Toggle Item 2\")\n .large()\n .checked(self.single_toggle == 2)\n .on_click(cx.listener(|view, checked, _, cx| {\n if *checked {\n view.single_toggle = 2;\n }\n cx.notify();\n })),\n )\n .child(\n Toggle::new(\"item3\")\n .icon(IconName::Eye)\n .large()\n .checked(self.single_toggle == 3)\n .on_click(cx.listener(|view, checked, _, cx| {\n if *checked {\n view.single_toggle = 3;\n }\n cx.notify();\n })),\n ),\n )\n .child(\n section(\"Toggle Group with Ghost Style\")\n .v_flex()\n .gap_4()\n .child(\n ToggleGroup::new(\"toggle-button-group1\")\n .child(Toggle::new(0).icon(IconName::Bell).checked(self.checked[0]))\n .child(Toggle::new(1).icon(IconName::Bot).checked(self.checked[1]))\n .child(\n Toggle::new(2)\n .icon(IconName::Inbox)\n .checked(self.checked[2]),\n )\n .child(\n Toggle::new(3)\n .icon(IconName::Check)\n .checked(self.checked[3]),\n )\n .child(Toggle::new(4).label(\"Other\").checked(self.checked[4]))\n .on_click(cx.listener(|view, checkeds: &Vec, _, cx| {\n view.checked[0] = checkeds[0];\n view.checked[1] = checkeds[1];\n view.checked[2] = checkeds[2];\n view.checked[3] = checkeds[3];\n view.checked[4] = checkeds[4];\n cx.notify();\n })),\n )\n .child(\n ToggleGroup::new(\"toggle-button-group1-sm\")\n .small()\n .child(Toggle::new(0).icon(IconName::Bell).checked(self.checked[0]))\n .child(Toggle::new(1).icon(IconName::Bot).checked(self.checked[1]))\n .child(\n Toggle::new(2)\n .icon(IconName::Inbox)\n .checked(self.checked[2]),\n )\n .child(\n Toggle::new(3)\n .icon(IconName::Check)\n .checked(self.checked[3]),\n )\n .child(Toggle::new(4).label(\"Other\").checked(self.checked[4]))\n .on_click(cx.listener(|view, checkeds: &Vec, _, cx| {\n view.checked[0] = checkeds[0];\n view.checked[1] = checkeds[1];\n view.checked[2] = checkeds[2];\n view.checked[3] = checkeds[3];\n view.checked[4] = checkeds[4];\n cx.notify();\n })),\n )\n .child(\n ToggleGroup::new(\"toggle-button-group1-xs\")\n .xsmall()\n .child(Toggle::new(0).icon(IconName::Bell).checked(self.checked[0]))\n .child(Toggle::new(1).icon(IconName::Bot).checked(self.checked[1]))\n .child(\n Toggle::new(2)\n .icon(IconName::Inbox)\n .checked(self.checked[2]),\n )\n .child(\n Toggle::new(3)\n .icon(IconName::Check)\n .checked(self.checked[3]),\n )\n .child(Toggle::new(4).label(\"Other\").checked(self.checked[4]))\n .on_click(cx.listener(|view, checkeds: &Vec, _, cx| {\n view.checked[0] = checkeds[0];\n view.checked[1] = checkeds[1];\n view.checked[2] = checkeds[2];\n view.checked[3] = checkeds[3];\n view.checked[4] = checkeds[4];\n cx.notify();\n })),\n ),\n )\n .child(\n section(\"Toggle Group with Outline Style\")\n .v_flex()\n .gap_4()\n .child(\n ToggleGroup::new(\"toggle-button-group2\")\n .outline()\n .child(Toggle::new(0).icon(IconName::Bell).checked(self.checked[0]))\n .child(Toggle::new(1).icon(IconName::Bot).checked(self.checked[1]))\n .child(\n Toggle::new(2)\n .icon(IconName::Inbox)\n .checked(self.checked[2]),\n )\n .child(\n Toggle::new(3)\n .icon(IconName::Check)\n .checked(self.checked[3]),\n )\n .child(Toggle::new(4).label(\"Other\").checked(self.checked[4]))\n .on_click(cx.listener(|view, checkeds: &Vec, _, cx| {\n view.checked[0] = checkeds[0];\n view.checked[1] = checkeds[1];\n view.checked[2] = checkeds[2];\n view.checked[3] = checkeds[3];\n view.checked[4] = checkeds[4];\n cx.notify();\n })),\n )\n .child(\n ToggleGroup::new(\"toggle-button-group2-sm\")\n .outline()\n .small()\n .child(Toggle::new(0).icon(IconName::Bell).checked(self.checked[0]))\n .child(Toggle::new(1).icon(IconName::Bot).checked(self.checked[1]))\n .child(\n Toggle::new(2)\n .icon(IconName::Inbox)\n .checked(self.checked[2]),\n )\n .child(\n Toggle::new(3)\n .icon(IconName::Check)\n .checked(self.checked[3]),\n )\n .child(Toggle::new(4).label(\"Other\").checked(self.checked[4]))\n .on_click(cx.listener(|view, checkeds: &Vec, _, cx| {\n view.checked[0] = checkeds[0];\n view.checked[1] = checkeds[1];\n view.checked[2] = checkeds[2];\n view.checked[3] = checkeds[3];\n view.checked[4] = checkeds[4];\n cx.notify();\n })),\n )\n .child(\n ToggleGroup::new(\"toggle-button-group2-xs\")\n .outline()\n .xsmall()\n .child(Toggle::new(0).icon(IconName::Bell).checked(self.checked[0]))\n .child(Toggle::new(1).icon(IconName::Bot).checked(self.checked[1]))\n .child(\n Toggle::new(2)\n .icon(IconName::Inbox)\n .checked(self.checked[2]),\n )\n .child(\n Toggle::new(3)\n .icon(IconName::Check)\n .checked(self.checked[3]),\n )\n .child(Toggle::new(4).label(\"Other\").checked(self.checked[4]))\n .on_click(cx.listener(|view, checkeds: &Vec, _, cx| {\n view.checked[0] = checkeds[0];\n view.checked[1] = checkeds[1];\n view.checked[2] = checkeds[2];\n view.checked[3] = checkeds[3];\n view.checked[4] = checkeds[4];\n cx.notify();\n })),\n ),\n )\n }\n}\n" }, { "path": "crates/story/src/stories/tooltip_story.rs", "content": "use gpui::{\n App, AppContext, Context, Entity, Focusable, InteractiveElement, KeyBinding, ParentElement,\n Render, StatefulInteractiveElement, Styled, Window, actions, div,\n};\n\nuse gpui_component::{\n ActiveTheme, IconName,\n button::{Button, ButtonVariant, ButtonVariants},\n checkbox::Checkbox,\n dock::PanelControl,\n h_flex,\n radio::Radio,\n switch::Switch,\n tooltip::Tooltip,\n v_flex,\n};\n\nuse crate::{Story, section};\n\nactions!(tooltip_story, [Info]);\n\npub fn init(cx: &mut App) {\n cx.bind_keys([KeyBinding::new(\"ctrl-shift-delete\", Info, Some(\"Tooltip\"))]);\n}\n\npub struct TooltipStory {\n focus_handle: gpui::FocusHandle,\n}\n\nimpl TooltipStory {\n pub fn view(window: &mut Window, cx: &mut App) -> Entity {\n cx.new(|cx| Self::new(window, cx))\n }\n\n fn new(_: &mut Window, cx: &mut Context) -> Self {\n Self {\n focus_handle: cx.focus_handle(),\n }\n }\n}\n\nimpl Story for TooltipStory {\n fn title() -> &'static str {\n \"Tooltip\"\n }\n\n fn new_view(window: &mut Window, cx: &mut App) -> Entity {\n Self::view(window, cx)\n }\n\n fn zoomable() -> Option {\n None\n }\n}\n\nimpl Focusable for TooltipStory {\n fn focus_handle(&self, _: &gpui::App) -> gpui::FocusHandle {\n self.focus_handle.clone()\n }\n}\n\nimpl Render for TooltipStory {\n fn render(\n &mut self,\n _: &mut gpui::Window,\n _cx: &mut gpui::Context,\n ) -> impl gpui::IntoElement {\n v_flex()\n .w_full()\n .gap_3()\n .child(\n section(\"Tooltip for Button\")\n .child(\n Button::new(\"btn0\")\n .label(\"Search\")\n .with_variant(ButtonVariant::Primary)\n .tooltip(\"This is a search Button.\"),\n )\n .child(Button::new(\"btn1\").label(\"Info\").tooltip_with_action(\n \"This is a tooltip with Action for display keybinding.\",\n &Info,\n Some(\"Tooltip\"),\n ))\n .child(\n div()\n .child(Button::new(\"btn3\").label(\"Hover me\"))\n .id(\"tooltip-4\")\n .tooltip(|window, cx| {\n Tooltip::element(|_, cx| {\n h_flex()\n .gap_x_1()\n .child(IconName::Info)\n .child(\n div()\n .child(\"Muted Foreground\")\n .text_color(cx.theme().muted_foreground),\n )\n .child(div().child(\"Danger\").text_color(cx.theme().danger))\n .child(IconName::ArrowUp)\n })\n .build(window, cx)\n }),\n ),\n )\n .child(\n section(\"Label Tooltip\").child(div().child(\"Hover me\").id(\"tooltip-2\").tooltip(\n |window, cx| {\n Tooltip::new(\"This is a Label\")\n .action(&Info, Some(\"Tooltip\"))\n .build(window, cx)\n },\n )),\n )\n .child(\n section(\"Checkbox Tooltip\").child(\n Checkbox::new(\"check\")\n .label(\"Remember me\")\n .checked(true)\n .tooltip(|window, cx| Tooltip::new(\"This is a checkbox\").build(window, cx)),\n ),\n )\n .child(\n section(\"Radio Tooltip\").child(\n Radio::new(\"radio\")\n .label(\"Radio with tooltip\")\n .checked(true)\n .tooltip(|window, cx| {\n Tooltip::new(\"This is a radio button\").build(window, cx)\n }),\n ),\n )\n .child(\n section(\"Switch Tooltip\").child(\n Switch::new(\"switch\")\n .checked(true)\n .tooltip(\"This is a switch\"),\n ),\n )\n }\n}\n" }, { "path": "crates/story/src/stories/tree_story.rs", "content": "use std::path::PathBuf;\n\nuse autocorrect::ignorer::Ignorer;\nuse gpui::{\n App, AppContext, Context, Entity, InteractiveElement, KeyBinding, ParentElement, Render,\n Styled, Window, actions, px,\n};\n\nuse gpui_component::{\n ActiveTheme as _, IconName, StyledExt as _,\n button::Button,\n dock::PanelControl,\n h_flex,\n label::Label,\n list::ListItem,\n tree::{TreeItem, TreeState, tree},\n v_flex,\n};\nuse rand::seq::SliceRandom as _;\n\nuse crate::{Story, section};\n\nactions!(story, [Rename]);\n\nconst CONTEXT: &str = \"TreeStory\";\npub(crate) fn init(cx: &mut App) {\n cx.bind_keys([KeyBinding::new(\"enter\", Rename, Some(CONTEXT))]);\n}\n\npub struct TreeStory {\n tree_state: Entity,\n items: Vec,\n}\n\nfn build_file_items(ignorer: &Ignorer, root: &PathBuf, path: &PathBuf) -> Vec {\n let mut items = Vec::new();\n if let Ok(entries) = std::fs::read_dir(path) {\n for entry in entries.flatten() {\n let path = entry.path();\n let relative_path = path.strip_prefix(root).unwrap_or(&path);\n if ignorer.is_ignored(&relative_path.to_string_lossy())\n || relative_path.ends_with(\".git\")\n {\n continue;\n }\n let file_name = path\n .file_name()\n .and_then(|n| n.to_str())\n .unwrap_or(\"Unknown\")\n .to_string();\n let id = path.to_string_lossy().to_string();\n if path.is_dir() {\n let children = build_file_items(ignorer, &root, &path);\n items.push(TreeItem::new(id, file_name).children(children));\n } else {\n items.push(TreeItem::new(id, file_name));\n }\n }\n }\n items.sort_by(|a, b| {\n b.is_folder()\n .cmp(&a.is_folder())\n .then(a.label.cmp(&b.label))\n });\n items\n}\n\nimpl TreeStory {\n pub fn view(window: &mut Window, cx: &mut App) -> Entity {\n cx.new(|cx| Self::new(window, cx))\n }\n\n fn load_files(state: Entity, path: PathBuf, cx: &mut Context) {\n cx.spawn(async move |weak_self, cx| {\n let ignorer = Ignorer::new(&path.to_string_lossy());\n let items = build_file_items(&ignorer, &path, &path);\n _ = state.update(cx, |state, cx| {\n state.set_items(items.clone(), cx);\n });\n\n _ = weak_self.update(cx, |this, cx| {\n this.items = items;\n cx.notify();\n })\n })\n .detach();\n }\n\n fn new(_: &mut Window, cx: &mut Context) -> Self {\n let tree_state = cx.new(|cx| TreeState::new(cx));\n\n Self::load_files(tree_state.clone(), PathBuf::from(\"./\"), cx);\n\n Self {\n tree_state,\n items: Vec::new(),\n }\n }\n\n fn on_action_rename(&mut self, _: &Rename, _: &mut Window, cx: &mut gpui::Context) {\n if let Some(entry) = self.tree_state.read(cx).selected_entry() {\n let item = entry.item();\n println!(\"Renaming item: {} ({})\", item.label, item.id);\n // Here you could implement actual renaming logic\n }\n }\n}\n\nimpl Story for TreeStory {\n fn title() -> &'static str {\n \"Tree\"\n }\n\n fn new_view(window: &mut Window, cx: &mut App) -> Entity {\n Self::view(window, cx)\n }\n\n fn zoomable() -> Option {\n None\n }\n}\n\nimpl Render for TreeStory {\n fn render(\n &mut self,\n _: &mut gpui::Window,\n cx: &mut gpui::Context,\n ) -> impl gpui::IntoElement {\n let view = cx.entity();\n v_flex()\n .w_full()\n .gap_3()\n .id(\"tree-story\")\n .key_context(CONTEXT)\n .on_action(cx.listener(Self::on_action_rename))\n .child(\n h_flex().gap_3().child(\n Button::new(\"select-item\")\n .outline()\n .label(\"Select Item\")\n .on_click(cx.listener(|this, _, _, cx| {\n if let Some(random_item) = this.items.choose(&mut rand::thread_rng()) {\n this.tree_state.update(cx, |state, cx| {\n state.set_selected_item(Some(random_item), cx);\n });\n }\n })),\n ),\n )\n .child(\n section(\"File tree\")\n .sub_title(\"Press `space` to select, `enter` to rename.\")\n .v_flex()\n .max_w_md()\n .child(\n tree(\n &self.tree_state,\n move |ix, entry, _selected, _window, cx| {\n view.update(cx, |_, cx| {\n let item = entry.item();\n let icon = if !entry.is_folder() {\n IconName::File\n } else if entry.is_expanded() {\n IconName::FolderOpen\n } else {\n IconName::Folder\n };\n\n ListItem::new(ix)\n .w_full()\n .rounded(cx.theme().radius)\n .px_3()\n .pl(px(16.) * entry.depth() + px(12.))\n .child(\n h_flex().gap_2().child(icon).child(item.label.clone()),\n )\n .on_click(cx.listener({\n let item = item.clone();\n move |_, _, _window, _| {\n println!(\n \"Clicked on item: {} ({})\",\n item.label, item.id\n );\n }\n }))\n })\n },\n )\n .p_1()\n .border_1()\n .border_color(cx.theme().border)\n .rounded(cx.theme().radius)\n .h(px(540.)),\n )\n .child(\n h_flex()\n .w_full()\n .justify_between()\n .gap_3()\n .children(\n self.tree_state\n .read(cx)\n .selected_index()\n .map(|ix| format!(\"Selected Index: {}\", ix)),\n )\n .children(\n self.tree_state\n .read(cx)\n .selected_item()\n .map(|item| Label::new(\"Selected:\").secondary(item.id.clone())),\n ),\n ),\n )\n }\n}\n" }, { "path": "crates/story/src/stories/virtual_list_story.rs", "content": "use std::{ops::Range, rc::Rc};\n\nuse gpui::{\n App, AppContext, Context, Div, Entity, FocusHandle, Focusable, InteractiveElement, IntoElement,\n ParentElement, Pixels, Render, ScrollStrategy, Size, Styled, Window, div, px, size,\n};\nuse gpui_component::{\n ActiveTheme as _, Selectable, Sizable, VirtualListScrollHandle,\n button::{Button, ButtonGroup},\n divider::Divider,\n h_flex,\n scroll::{ScrollableElement, ScrollbarAxis},\n v_flex, v_virtual_list,\n};\n\npub struct VirtualListStory {\n focus_handle: FocusHandle,\n scroll_handle: VirtualListScrollHandle,\n items: Vec,\n item_sizes: Rc>>,\n columns_count: usize,\n axis: ScrollbarAxis,\n size_mode: usize,\n visible_range: Range,\n}\n\nconst ITEM_SIZE: Size = size(px(100.), px(30.));\n\nimpl VirtualListStory {\n fn new(_: &mut Window, cx: &mut Context) -> Self {\n let items = (0..5000).map(|i| format!(\"Item {}\", i)).collect::>();\n let item_sizes = items.iter().map(|_| ITEM_SIZE).collect::>();\n\n Self {\n focus_handle: cx.focus_handle(),\n scroll_handle: VirtualListScrollHandle::new(),\n items,\n item_sizes: Rc::new(item_sizes),\n columns_count: 100,\n axis: ScrollbarAxis::Both,\n size_mode: 0,\n visible_range: (0..0),\n }\n }\n\n pub fn view(window: &mut Window, cx: &mut App) -> Entity {\n cx.new(|cx| Self::new(window, cx))\n }\n\n pub fn change_test_cases(&mut self, n: usize, cx: &mut Context) {\n self.size_mode = n;\n if n == 0 {\n self.items = (0..5000).map(|i| format!(\"Item {}\", i)).collect::>();\n self.columns_count = 30;\n } else if n == 1 {\n self.items = (0..100).map(|i| format!(\"Item {}\", i)).collect::>();\n self.columns_count = 100;\n } else if n == 2 {\n self.items = (0..500000)\n .map(|i| format!(\"Item {}\", i))\n .collect::>();\n self.columns_count = 100;\n } else {\n self.items = (0..5).map(|i| format!(\"Item {}\", i)).collect::>();\n self.columns_count = 10;\n }\n\n self.item_sizes = Rc::new(self.items.iter().map(|_| ITEM_SIZE).collect());\n cx.notify();\n }\n\n pub fn change_axis(&mut self, axis: ScrollbarAxis, cx: &mut Context) {\n self.axis = axis;\n cx.notify();\n }\n\n fn render_buttons(&mut self, cx: &mut Context) -> impl IntoElement {\n v_flex()\n .gap_2()\n .child(\n h_flex()\n .gap_2()\n .justify_between()\n .child(\n h_flex()\n .gap_2()\n .child(\n ButtonGroup::new(\"test-cases\")\n .outline()\n .compact()\n .child(\n Button::new(\"test-0\")\n .label(\"Size 0\")\n .selected(self.size_mode == 0),\n )\n .child(\n Button::new(\"test-1\")\n .label(\"Size 1\")\n .selected(self.size_mode == 1),\n )\n .child(\n Button::new(\"test-2\")\n .label(\"Size 2\")\n .selected(self.size_mode == 2),\n )\n .child(\n Button::new(\"test-3\")\n .label(\"Size 3\")\n .selected(self.size_mode == 3),\n )\n .on_click(cx.listener(|view, clicks: &Vec, _, cx| {\n if clicks.contains(&0) {\n view.change_test_cases(0, cx)\n } else if clicks.contains(&1) {\n view.change_test_cases(1, cx)\n } else if clicks.contains(&2) {\n view.change_test_cases(2, cx)\n } else if clicks.contains(&3) {\n view.change_test_cases(3, cx)\n }\n })),\n )\n .child(Divider::vertical().px_2())\n .child(\n ButtonGroup::new(\"scrollbars\")\n .outline()\n .compact()\n .child(\n Button::new(\"test-axis-both\")\n .label(\"Both Scrollbar\")\n .selected(self.axis.is_both()),\n )\n .child(\n Button::new(\"test-axis-vertical\")\n .label(\"Vertical\")\n .selected(self.axis.is_vertical()),\n )\n .child(\n Button::new(\"test-axis-horizontal\")\n .label(\"Horizontal\")\n .selected(self.axis.is_horizontal()),\n )\n .on_click(cx.listener(|view, clicks: &Vec, _, cx| {\n if clicks.contains(&0) {\n view.change_axis(ScrollbarAxis::Both, cx)\n } else if clicks.contains(&1) {\n view.change_axis(ScrollbarAxis::Vertical, cx)\n } else if clicks.contains(&2) {\n view.change_axis(ScrollbarAxis::Horizontal, cx)\n }\n })),\n ),\n )\n .child(format!(\"visible_range: {:?}\", self.visible_range)),\n )\n .child(\n h_flex()\n .gap_2()\n .child(\n Button::new(\"scroll-to0\")\n .small()\n .outline()\n .label(\"Scroll to Top\")\n .on_click(cx.listener(|this, _, _, cx| {\n this.scroll_handle.scroll_to_item(0, ScrollStrategy::Top);\n cx.notify();\n })),\n )\n .child(\n Button::new(\"scroll-to1\")\n .small()\n .outline()\n .label(\"Scroll to 50\")\n .on_click(cx.listener(|this, _, _, cx| {\n this.scroll_handle.scroll_to_item(50, ScrollStrategy::Top);\n cx.notify();\n })),\n )\n .child(\n Button::new(\"scroll-to2\")\n .small()\n .outline()\n .label(\"Scroll to 25 (center)\")\n .on_click(cx.listener(|this, _, _, cx| {\n this.scroll_handle\n .scroll_to_item(25, ScrollStrategy::Center);\n cx.notify();\n })),\n )\n .child(\n Button::new(\"scroll-to-bottom\")\n .small()\n .outline()\n .label(\"Scroll to Bottom\")\n .on_click(cx.listener(|this, _, _, cx| {\n this.scroll_handle.scroll_to_bottom();\n cx.notify();\n })),\n ),\n )\n }\n}\n\nimpl super::Story for VirtualListStory {\n fn title() -> &'static str {\n \"VirtualList\"\n }\n\n fn description() -> &'static str {\n \"Add vertical or horizontal, or both scrollbars to a container, \\\n and use `virtual_list` to render a large number of items.\"\n }\n\n fn new_view(window: &mut Window, cx: &mut App) -> Entity {\n Self::view(window, cx)\n }\n}\n\nimpl Focusable for VirtualListStory {\n fn focus_handle(&self, _: &gpui::App) -> gpui::FocusHandle {\n self.focus_handle.clone()\n }\n}\n\nimpl Render for VirtualListStory {\n fn render(\n &mut self,\n _: &mut gpui::Window,\n cx: &mut gpui::Context,\n ) -> impl gpui::IntoElement {\n let columns_count = self.columns_count;\n\n fn render_item(cx: &App) -> Div {\n div()\n .flex()\n .h_full()\n .items_center()\n .justify_center()\n .text_sm()\n .w(ITEM_SIZE.width)\n .h(ITEM_SIZE.height)\n .bg(cx.theme().secondary)\n }\n\n v_flex()\n .size_full()\n .gap_4()\n .child(self.render_buttons(cx))\n .child(\n div().w_full().flex_1().min_h_64().child(\n div().relative().size_full().child(\n v_flex()\n .id(\"list\")\n .relative()\n .size_full()\n .child(\n v_virtual_list(\n cx.entity().clone(),\n \"items\",\n self.item_sizes.clone(),\n move |story, visible_range, _, cx| {\n story.visible_range = visible_range.clone();\n\n visible_range\n .map(|ix| {\n h_flex().gap_1().items_center().children(\n (0..columns_count).map(|i| {\n render_item(cx).child(if i == 0 {\n format!(\"row: {}\", ix)\n } else {\n format!(\"{}\", i)\n })\n }),\n )\n })\n .collect()\n },\n )\n .track_scroll(&self.scroll_handle)\n .p_4()\n .border_1()\n .border_color(cx.theme().border)\n .gap_1(),\n )\n .scrollbar(&self.scroll_handle, self.axis),\n ),\n ),\n )\n }\n}\n" }, { "path": "crates/story/src/stories/welcome_story.rs", "content": "use gpui::{\n App, AppContext, Context, Entity, FocusHandle, Focusable, Render, Styled as _, Window, px,\n};\n\nuse gpui_component::{dock::PanelControl, text::markdown};\n\nuse crate::Story;\n\npub struct WelcomeStory {\n focus_handle: FocusHandle,\n}\n\nimpl WelcomeStory {\n pub fn view(window: &mut Window, cx: &mut App) -> Entity {\n cx.new(|cx| Self::new(window, cx))\n }\n\n fn new(_: &mut Window, cx: &mut Context) -> Self {\n Self {\n focus_handle: cx.focus_handle(),\n }\n }\n}\n\nimpl Story for WelcomeStory {\n fn title() -> &'static str {\n \"Introduction\"\n }\n\n fn description() -> &'static str {\n \"UI components for building fantastic desktop application by using GPUI.\"\n }\n\n fn new_view(window: &mut Window, cx: &mut App) -> Entity {\n Self::view(window, cx)\n }\n\n fn zoomable() -> Option {\n None\n }\n\n fn paddings() -> gpui::Pixels {\n px(0.)\n }\n}\n\nimpl Focusable for WelcomeStory {\n fn focus_handle(&self, _: &gpui::App) -> gpui::FocusHandle {\n self.focus_handle.clone()\n }\n}\n\nimpl Render for WelcomeStory {\n fn render(\n &mut self,\n _: &mut gpui::Window,\n _: &mut gpui::Context,\n ) -> impl gpui::IntoElement {\n markdown(include_str!(\"../../../../README.md\"))\n .px_4()\n .scrollable(true)\n .selectable(true)\n }\n}\n" }, { "path": "crates/story/src/themes.rs", "content": "use gpui::{Action, App, SharedString};\nuse gpui_component::{Theme, ThemeMode, ThemeRegistry, scroll::ScrollbarShow};\nuse serde::{Deserialize, Serialize};\n\n#[cfg(not(target_family = \"wasm\"))]\nuse gpui_component::ActiveTheme;\n\n#[cfg(target_family = \"wasm\")]\nuse crate::embedded_themes;\n\nconst STATE_FILE: &str = \"target/state.json\";\n\n#[derive(Debug, Clone, Serialize, Deserialize)]\nstruct State {\n theme: SharedString,\n scrollbar_show: Option,\n}\n\nimpl Default for State {\n fn default() -> Self {\n Self {\n theme: \"Default Light\".into(),\n scrollbar_show: None,\n }\n }\n}\n\npub fn init(cx: &mut App) {\n #[cfg(target_family = \"wasm\")]\n {\n tracing::info!(\"Loading embedded themes for WASM...\");\n let embedded = embedded_themes::embedded_themes();\n let registry = ThemeRegistry::global_mut(cx);\n\n for (name, content) in embedded {\n if let Err(e) = registry.load_themes_from_str(content) {\n tracing::error!(\"Failed to load embedded theme {}: {}\", name, e);\n } else {\n tracing::info!(\"Loaded embedded theme: {}\", name);\n }\n }\n }\n\n let state = if cfg!(not(target_family = \"wasm\")) {\n let json = std::fs::read_to_string(STATE_FILE).unwrap_or(String::default());\n serde_json::from_str::(&json).unwrap_or_default()\n } else {\n State::default()\n };\n\n #[cfg(not(target_family = \"wasm\"))]\n if let Err(err) =\n ThemeRegistry::watch_dir(std::path::PathBuf::from(\"./themes\"), cx, move |cx| {\n if let Some(theme) = ThemeRegistry::global(cx)\n .themes()\n .get(&state.theme)\n .cloned()\n {\n Theme::global_mut(cx).apply_config(&theme);\n }\n })\n {\n tracing::error!(\"Failed to watch themes directory: {}\", err);\n }\n\n if let Some(scrollbar_show) = state.scrollbar_show {\n Theme::global_mut(cx).scrollbar_show = scrollbar_show;\n }\n cx.refresh_windows();\n\n #[cfg(not(target_family = \"wasm\"))]\n cx.observe_global::(|cx| {\n let state = State {\n theme: cx.theme().theme_name().clone(),\n scrollbar_show: Some(cx.theme().scrollbar_show),\n };\n\n if let Ok(json) = serde_json::to_string_pretty(&state) {\n // Ignore write errors - if STATE_FILE doesn't exist or can't be written, do nothing\n let _ = std::fs::write(STATE_FILE, json);\n }\n })\n .detach();\n\n cx.on_action(|switch: &SwitchTheme, cx| {\n let theme_name = switch.0.clone();\n if let Some(theme_config) = ThemeRegistry::global(cx).themes().get(&theme_name).cloned() {\n Theme::global_mut(cx).apply_config(&theme_config);\n }\n cx.refresh_windows();\n });\n cx.on_action(|switch: &SwitchThemeMode, cx| {\n let mode = switch.0;\n Theme::change(mode, None, cx);\n cx.refresh_windows();\n });\n}\n\n#[derive(Action, Clone, PartialEq)]\n#[action(namespace = themes, no_json)]\npub(crate) struct SwitchTheme(pub(crate) SharedString);\n\n#[derive(Action, Clone, PartialEq)]\n#[action(namespace = themes, no_json)]\npub(crate) struct SwitchThemeMode(pub(crate) ThemeMode);\n" }, { "path": "crates/story/src/title_bar.rs", "content": "use std::rc::Rc;\n\nuse gpui::{\n AnyElement, App, AppContext, Context, Corner, Entity, FocusHandle, InteractiveElement as _,\n IntoElement, MouseButton, ParentElement as _, Render, SharedString, Styled as _, Subscription,\n Window, div, px,\n};\nuse gpui_component::{\n ActiveTheme as _, IconName, Side, Sizable as _, Theme, TitleBar, WindowExt as _,\n badge::Badge,\n button::{Button, ButtonVariants as _},\n label::Label,\n menu::{AppMenuBar, DropdownMenu as _},\n scroll::ScrollbarShow,\n};\n\nuse crate::{SelectFont, SelectRadius, SelectScrollbarShow, ToggleListActiveHighlight, app_menus};\n\npub struct AppTitleBar {\n app_menu_bar: Entity,\n font_size_selector: Entity,\n child: Rc AnyElement>,\n _subscriptions: Vec,\n}\n\nimpl AppTitleBar {\n pub fn new(\n title: impl Into,\n window: &mut Window,\n cx: &mut Context,\n ) -> Self {\n let app_menu_bar = app_menus::init(title, cx);\n let font_size_selector = cx.new(|cx| FontSizeSelector::new(window, cx));\n\n Self {\n app_menu_bar,\n font_size_selector,\n child: Rc::new(|_, _| div().into_any_element()),\n _subscriptions: vec![],\n }\n }\n\n pub fn child(mut self, f: F) -> Self\n where\n E: IntoElement,\n F: Fn(&mut Window, &mut App) -> E + 'static,\n {\n self.child = Rc::new(move |window, cx| f(window, cx).into_any_element());\n self\n }\n}\n\nimpl Render for AppTitleBar {\n fn render(&mut self, window: &mut Window, cx: &mut Context) -> impl IntoElement {\n let notifications_count = window.notifications(cx).len();\n\n TitleBar::new()\n // left side\n .child(div().flex().items_center().child(self.app_menu_bar.clone()))\n .child(\n div()\n .flex()\n .items_center()\n .justify_end()\n .px_2()\n .gap_2()\n .on_mouse_down(MouseButton::Left, |_, _, cx| cx.stop_propagation())\n .child((self.child.clone())(window, cx))\n .child(\n Label::new(\"theme:\")\n .secondary(cx.theme().theme_name())\n .text_sm(),\n )\n .child(self.font_size_selector.clone())\n .child(\n Button::new(\"github\")\n .icon(IconName::Github)\n .small()\n .ghost()\n .on_click(|_, _, cx| {\n cx.open_url(\"https://github.com/longbridge/gpui-component\")\n }),\n )\n .child(\n div().relative().child(\n Badge::new().count(notifications_count).max(99).child(\n Button::new(\"bell\")\n .small()\n .ghost()\n .compact()\n .icon(IconName::Bell),\n ),\n ),\n ),\n )\n }\n}\n\nstruct FontSizeSelector {\n focus_handle: FocusHandle,\n}\n\nimpl FontSizeSelector {\n pub fn new(_: &mut Window, cx: &mut Context) -> Self {\n Self {\n focus_handle: cx.focus_handle(),\n }\n }\n\n fn on_select_font(\n &mut self,\n font_size: &SelectFont,\n window: &mut Window,\n cx: &mut Context,\n ) {\n Theme::global_mut(cx).font_size = px(font_size.0 as f32);\n window.refresh();\n }\n\n fn on_select_radius(\n &mut self,\n radius: &SelectRadius,\n window: &mut Window,\n cx: &mut Context,\n ) {\n Theme::global_mut(cx).radius = px(radius.0 as f32);\n Theme::global_mut(cx).radius_lg = if cx.theme().radius > px(0.) {\n cx.theme().radius + px(2.)\n } else {\n px(0.)\n };\n window.refresh();\n }\n\n fn on_select_scrollbar_show(\n &mut self,\n show: &SelectScrollbarShow,\n window: &mut Window,\n cx: &mut Context,\n ) {\n Theme::global_mut(cx).scrollbar_show = show.0;\n window.refresh();\n }\n\n fn on_toggle_list_active_highlight(\n &mut self,\n _: &ToggleListActiveHighlight,\n window: &mut Window,\n cx: &mut Context,\n ) {\n let theme = Theme::global_mut(cx);\n theme.list.active_highlight = !theme.list.active_highlight;\n window.refresh();\n }\n}\n\nimpl Render for FontSizeSelector {\n fn render(&mut self, _: &mut Window, cx: &mut Context) -> impl IntoElement {\n let focus_handle = self.focus_handle.clone();\n let font_size = cx.theme().font_size.as_f32() as i32;\n let radius = cx.theme().radius.as_f32() as i32;\n let scroll_show = cx.theme().scrollbar_show;\n\n div()\n .id(\"font-size-selector\")\n .track_focus(&focus_handle)\n .on_action(cx.listener(Self::on_select_font))\n .on_action(cx.listener(Self::on_select_radius))\n .on_action(cx.listener(Self::on_select_scrollbar_show))\n .on_action(cx.listener(Self::on_toggle_list_active_highlight))\n .child(\n Button::new(\"btn\")\n .small()\n .ghost()\n .icon(IconName::Settings2)\n .dropdown_menu(move |this, _, cx| {\n this.scrollable(true)\n .check_side(Side::Right)\n .max_h(px(480.))\n .label(\"Font Size\")\n .menu_with_check(\"Large\", font_size == 18, Box::new(SelectFont(18)))\n .menu_with_check(\n \"Medium (default)\",\n font_size == 16,\n Box::new(SelectFont(16)),\n )\n .menu_with_check(\"Small\", font_size == 14, Box::new(SelectFont(14)))\n .separator()\n .label(\"Border Radius\")\n .menu_with_check(\"8px\", radius == 8, Box::new(SelectRadius(8)))\n .menu_with_check(\n \"6px (default)\",\n radius == 6,\n Box::new(SelectRadius(6)),\n )\n .menu_with_check(\"4px\", radius == 4, Box::new(SelectRadius(4)))\n .menu_with_check(\"0px\", radius == 0, Box::new(SelectRadius(0)))\n .separator()\n .label(\"Scrollbar\")\n .menu_with_check(\n \"Scrolling to show\",\n scroll_show == ScrollbarShow::Scrolling,\n Box::new(SelectScrollbarShow(ScrollbarShow::Scrolling)),\n )\n .menu_with_check(\n \"Hover to show\",\n scroll_show == ScrollbarShow::Hover,\n Box::new(SelectScrollbarShow(ScrollbarShow::Hover)),\n )\n .menu_with_check(\n \"Always show\",\n scroll_show == ScrollbarShow::Always,\n Box::new(SelectScrollbarShow(ScrollbarShow::Always)),\n )\n .separator()\n .menu_with_check(\n \"List Active Highlight\",\n cx.theme().list.active_highlight,\n Box::new(ToggleListActiveHighlight),\n )\n })\n .anchor(Corner::TopRight),\n )\n }\n}\n" }, { "path": "crates/story-web/.cargo/config.toml", "content": "[target.wasm32-unknown-unknown]\nrustflags = []\n" }, { "path": "crates/story-web/Cargo.toml", "content": "[package]\nname = \"gpui-component-story-web\"\nversion = \"0.5.1\"\npublish = false\nedition.workspace = true\n\n[lib]\ncrate-type = [\"cdylib\", \"rlib\"]\n\n[dependencies]\ngpui.workspace = true\ngpui_platform.workspace = true\ngpui-component = { path = \"../ui\", default-features = false }\ngpui-component-assets.workspace = true\ngpui-component-story = { path = \"../story\", default-features = false }\n\n# Web specific dependencies\nconsole_error_panic_hook = \"0.1\"\nlog.workspace = true\ntracing-wasm = \"0.2\"\nconsole_log = \"1.0\"\nwasm-bindgen = \"0.2\"\n\n[lints]\nworkspace = true\n" }, { "path": "crates/story-web/Makefile", "content": ".PHONY: help dev build-wasm build-web build clean install\n\nhelp: ## Show help information\n\t@echo \"GPUI Component Story Web - Available commands:\"\n\t@echo \"\"\n\t@grep -E '^[a-zA-Z_-]+:.*?## .*$$' $(MAKEFILE_LIST) | awk 'BEGIN {FS = \":.*?## \"}; {printf \" \\033[36m%-15s\\033[0m %s\\n\", $$1, $$2}'\n\ninstall: ## Install all dependencies\n\t@echo \"Checking Rust WASM target...\"\n\t@rustup target add wasm32-unknown-unknown || true\n\t@echo \"Checking wasm-bindgen-cli...\"\n\t@cargo install wasm-bindgen-cli || true\n\t@echo \"Installing frontend dependencies...\"\n\t@cd www && bun install\n\nbuild-wasm: ## Build WASM (release mode)\n\t@./scripts/build-wasm.sh --release\n\nbuild-wasm-dev: ## Build WASM (debug mode)\n\t@./scripts/build-wasm.sh\n\nbuild-web: ## Build frontend\n\t@cd www && bun run build\n\nbuild-web-prod: ## Build frontend for production (GitHub Pages)\n\t@cd www && bun install && NODE_ENV=production bun run build\n\nbuild: build-wasm build-web ## Build complete project (WASM + frontend)\n\nbuild-prod: build-wasm build-web-prod ## Build complete project for production\n\ndev: build-wasm-dev ## Start development server\n\t@cd www && bun install && bun run dev\n\npreview: ## Preview production build\n\t@cd www && bun run preview\n\nclean: ## Clean build artifacts\n\t@echo \"Cleaning build artifacts...\"\n\t@rm -rf www/dist\n\t@rm -rf www/src/wasm/*.js www/src/wasm/*.wasm\n\t@cargo clean\n\nwatch-wasm: ## Watch Rust code changes and auto-rebuild WASM\n\t@echo \"Watching WASM changes...\"\n\t@cargo watch -x 'build --target wasm32-unknown-unknown' -s './scripts/build-wasm.sh'\n" }, { "path": "crates/story-web/README.md", "content": "# GPUI Component Story Web\n\nWeb-based component gallery for GPUI Component library.\n\n**Live Demo**: https://longbridge.github.io/gpui-component/gallery/\n\n## Prerequisites\n\n- Rust toolchain with `wasm32-unknown-unknown` target\n- [Bun](https://bun.sh) (recommended) or Node.js\n- wasm-bindgen-cli\n\n### Install Dependencies\n\n```bash\n# Add WASM target\nrustup target add wasm32-unknown-unknown\n\n# Install wasm-bindgen-cli\ncargo install wasm-bindgen-cli\n\n# Install Bun (macOS/Linux)\ncurl -fsSL https://bun.sh/install | bash\n```\n\n## Development\n\n### Start Development Server\n\n```bash\nmake dev\n```\n\nThis will:\n1. Build WASM in debug mode\n2. Generate JavaScript bindings\n3. Start Vite dev server on http://localhost:3000\n\n## Production Build\n\n### Build for Production\n\n```bash\nmake build-prod\n```\n\nThis builds the project with:\n- Release mode WASM\n- Production optimizations\n- Base path set to `/gpui-component/gallery/` for GitHub Pages\n\nThe output will be in `www/dist/` directory.\n\n## Deployment\n\nThe gallery is automatically deployed to GitHub Pages at `/gpui-component/gallery/` when docs are released.\n\nThe deployment is handled by `.github/workflows/release-docs.yml` which:\n1. Builds WASM in release mode\n2. Builds frontend with production settings\n3. Copies output to `docs/.vitepress/dist/gallery/`\n4. Deploys to GitHub Pages\n" }, { "path": "crates/story-web/rust-toolchain.toml", "content": "[toolchain]\nchannel = \"nightly\"\ncomponents = [\"rustfmt\", \"clippy\"]\ntargets = [\"wasm32-unknown-unknown\"]\n" }, { "path": "crates/story-web/scripts/build-wasm.sh", "content": "#!/bin/bash\nset -e\n\n# Colors for output\nRED='\\033[0;31m'\nGREEN='\\033[0;32m'\nYELLOW='\\033[1;33m'\nNC='\\033[0m' # No Color\n\necho -e \"${GREEN}Building GPUI Component Story Web...${NC}\"\n\n# Get the script directory\nSCRIPT_DIR=\"$( cd \"$( dirname \"${BASH_SOURCE[0]}\" )\" && pwd )\"\nPROJECT_ROOT=\"$SCRIPT_DIR/..\"\n\n# Parse arguments\nRELEASE_FLAG=\"\"\nif [[ \"$1\" == \"--release\" ]]; then\n RELEASE_FLAG=\"--release\"\n echo -e \"${YELLOW}Building in release mode${NC}\"\nfi\n\n# Step 1: Build WASM\necho -e \"${GREEN}Step 1: Building WASM...${NC}\"\ncd \"$PROJECT_ROOT\"\ncargo build --target wasm32-unknown-unknown $RELEASE_FLAG\n\n# Determine the build directory\nif [[ \"$RELEASE_FLAG\" == \"--release\" ]]; then\n BUILD_MODE=\"release\"\nelse\n BUILD_MODE=\"debug\"\nfi\n\n# WASM file is in workspace target directory\nWORKSPACE_ROOT=\"$PROJECT_ROOT/../..\"\nWASM_PATH=\"$WORKSPACE_ROOT/target/wasm32-unknown-unknown/$BUILD_MODE/gpui_component_story_web.wasm\"\n\n# Check if WASM file exists\nif [[ ! -f \"$WASM_PATH\" ]]; then\n echo -e \"${RED}Error: WASM file not found at: $WASM_PATH${NC}\"\n exit 1\nfi\n\n# Step 2: Generate JavaScript bindings\necho -e \"${GREEN}Step 2: Generating JavaScript bindings...${NC}\"\nwasm-bindgen \"$WASM_PATH\" \\\n --out-dir \"$PROJECT_ROOT/www/src/wasm\" \\\n --target web \\\n --no-typescript\n\necho -e \"${GREEN}✓ Build completed successfully!${NC}\"\necho -e \"${YELLOW}Next steps:${NC}\"\necho -e \" cd www\"\necho -e \" bun install\"\necho -e \" bun run dev\"\n" }, { "path": "crates/story-web/src/lib.rs", "content": "use gpui::{prelude::*, *};\nuse gpui_component::Root;\nuse gpui_component_assets::Assets;\nuse gpui_component_story::{Gallery, StoryRoot};\nuse wasm_bindgen::prelude::*;\n\n#[wasm_bindgen]\npub fn run() -> Result<(), JsValue> {\n console_error_panic_hook::set_once();\n\n // Initialize logging to browser console\n console_log::init_with_level(log::Level::Info).expect(\"Failed to initialize logger\");\n\n // Also initialize tracing for WASM\n tracing_wasm::set_as_global_default();\n\n #[cfg(target_family = \"wasm\")]\n gpui_platform::web_init();\n #[cfg(not(target_family = \"wasm\"))]\n let app = gpui_platform::application();\n #[cfg(target_family = \"wasm\")]\n let app = gpui_platform::single_threaded_web();\n\n app.with_assets(Assets::new(\n \"https://longbridge.github.io/gpui-component/gallery/\",\n ))\n .run(|cx: &mut App| {\n gpui_component_story::init(cx);\n\n cx.open_window(WindowOptions::default(), |window, cx| {\n let view = Gallery::view(None, window, cx);\n let story_root = cx.new(|cx| StoryRoot::new(\"GPUI Component\", view, window, cx));\n cx.new(|cx| Root::new(story_root, window, cx))\n })\n .expect(\"Failed to open window\");\n cx.activate(true);\n });\n\n Ok(())\n}\n" }, { "path": "crates/story-web/www/.gitignore", "content": "# Dependencies\nnode_modules/\nbun.lockb\n\n# Build outputs\ndist/\n*.local\n\n# WASM generated files\nsrc/wasm/\n!src/wasm/.gitkeep\n\n# Environment\n.env\n.env.local\n.env.*.local\n\n# Editor\n.vscode/\n.idea/\n*.swp\n*.swo\n*~\n\n# OS\n.DS_Store\nThumbs.db\n" }, { "path": "crates/story-web/www/.prettierrc", "content": "{\n \"semi\": true,\n \"singleQuote\": true,\n \"tabWidth\": 2,\n \"trailingComma\": \"es5\",\n \"printWidth\": 100,\n \"arrowParens\": \"avoid\"\n}\n" }, { "path": "crates/story-web/www/index.html", "content": "\n\n \n \n \n GPUI Component Story Gallery\n \n \n \n
\n \n
\n
\n

Loading GPUI Component Story Gallery...

\n
\n
\n \n \n\n" }, { "path": "crates/story-web/www/package.json", "content": "{\n \"name\": \"gpui-component-story-web\",\n \"version\": \"0.5.1\",\n \"private\": true,\n \"type\": \"module\",\n \"scripts\": {\n \"dev\": \"vite\",\n \"build\": \"vite build\",\n \"preview\": \"vite preview\",\n \"wasm\": \"cargo build --target wasm32-unknown-unknown --release && wasm-bindgen ../../../target/wasm32-unknown-unknown/release/gpui_component_story_web.wasm --out-dir ./src/wasm --target web --no-typescript\"\n },\n \"devDependencies\": {\n \"vite\": \"^8\",\n \"vite-plugin-static-copy\": \"^3.2.0\",\n \"vite-plugin-wasm\": \"^3.3.0\"\n }\n}\n" }, { "path": "crates/story-web/www/src/main.js", "content": "async function init() {\n const loadingEl = document.getElementById('loading');\n const appEl = document.getElementById('app');\n\n try {\n // Import the WASM module\n const wasm = await import('./wasm/gpui_component_story_web.js');\n await wasm.default();\n\n // Initialize the story gallery\n await wasm.run();\n\n // Hide loading indicator\n if (loadingEl) {\n loadingEl.remove();\n }\n } catch (error) {\n console.error('Failed to initialize:', error);\n\n // Show error message\n if (loadingEl) {\n loadingEl.innerHTML = `\n
\n

Failed to load the application

\n

${error.message || error}

\n

\n Please check the console for more details.\n

\n
\n `;\n }\n }\n}\n\ninit();\n" }, { "path": "crates/story-web/www/vite.config.js", "content": "import { defineConfig } from 'vite';\nimport wasm from 'vite-plugin-wasm';\nimport { viteStaticCopy } from 'vite-plugin-static-copy';\nimport path from 'path';\nimport { fileURLToPath } from 'url';\n\nconst __dirname = path.dirname(fileURLToPath(import.meta.url));\n\nexport default defineConfig({\n plugins: [\n wasm(),\n viteStaticCopy({\n targets: [\n {\n src: path.resolve(__dirname, '../../assets/assets/icons'),\n dest: 'assets',\n },\n ],\n }),\n {\n name: 'serve-assets',\n configureServer(server) {\n server.middlewares.use('/gpui-component/gallery/assets', (req, res, next) => {\n const assetsPath = path.resolve(__dirname, '../../assets/assets');\n const filePath = path.join(assetsPath, req.url.replace('/assets', ''));\n\n // Try to serve the file\n import('fs').then(({ default: fs }) => {\n if (fs.existsSync(filePath) && fs.statSync(filePath).isFile()) {\n res.setHeader('Access-Control-Allow-Origin', '*');\n if (filePath.endsWith('.svg')) {\n res.setHeader('Content-Type', 'image/svg+xml');\n }\n fs.createReadStream(filePath).pipe(res);\n } else {\n next();\n }\n });\n });\n },\n },\n ],\n build: {\n target: 'esnext',\n minify: true,\n sourcemap: false,\n rollupOptions: {\n output: {\n manualChunks: undefined,\n },\n },\n },\n server: {\n port: 3000,\n open: true,\n fs: {\n strict: false,\n allow: ['..'],\n },\n headers: {\n 'Cross-Origin-Embedder-Policy': 'require-corp',\n 'Cross-Origin-Opener-Policy': 'same-origin',\n },\n },\n optimizeDeps: {\n exclude: ['./src/wasm'],\n },\n base: '/gpui-component/gallery/',\n});\n" }, { "path": "crates/ui/Cargo.toml", "content": "[package]\ndescription = \"UI components for building fantastic desktop application by using GPUI.\"\nkeywords = [\"desktop\", \"gpui\", \"shadcn\", \"ui\", \"uikit\"]\nlicense = \"Apache-2.0\"\nname = \"gpui-component\"\ndocumentation = \"https://docs.rs/gpui-component\"\nhomepage = \"https://longbridge.github.io/gpui-component\"\nrepository = \"https://github.com/longbridge/gpui-component\"\nreadme = \"../../README.md\"\nversion = \"0.5.1\"\npublish = true\nedition.workspace = true\n\n[lib]\ndoctest = false\n\n[features]\ndecimal = [\"dep:rust_decimal\"]\ninspector = [\"gpui_macros/inspector\", \"gpui/inspector\"]\n\n# For syntax highlighting in Markdown and CodeEditor.\ntree-sitter-languages = [\n \"dep:tree-sitter-astro-next\",\n \"dep:tree-sitter-bash\",\n \"dep:tree-sitter-c\",\n \"dep:tree-sitter-c-sharp\",\n \"dep:tree-sitter-cmake\",\n \"dep:tree-sitter-cpp\",\n \"dep:tree-sitter-css\",\n \"dep:tree-sitter-diff\",\n \"dep:tree-sitter-elixir\",\n \"dep:tree-sitter-embedded-template\",\n \"dep:tree-sitter-go\",\n \"dep:tree-sitter-graphql\",\n \"dep:tree-sitter-html\",\n \"dep:tree-sitter-java\",\n \"dep:tree-sitter-javascript\",\n \"dep:tree-sitter-jsdoc\",\n \"dep:tree-sitter-kotlin-sg\",\n \"dep:tree-sitter-lua\",\n \"dep:tree-sitter-make\",\n \"dep:tree-sitter-md\",\n \"dep:tree-sitter-php\",\n \"dep:tree-sitter-proto\",\n \"dep:tree-sitter-python\",\n \"dep:tree-sitter-ruby\",\n \"dep:tree-sitter-rust\",\n \"dep:tree-sitter-scala\",\n \"dep:tree-sitter-sequel\",\n \"dep:tree-sitter-swift\",\n \"dep:tree-sitter-toml-ng\",\n \"dep:tree-sitter-typescript\",\n \"dep:tree-sitter-svelte-next\",\n \"dep:tree-sitter-yaml\",\n \"dep:tree-sitter-zig\",\n]\n\n[dependencies]\nanyhow.workspace = true\ngpui = { workspace = true }\ngpui_macros.workspace = true\ngpui-component-macros = { workspace = true }\nnotify.workspace = true\nropey.workspace = true\nrust-i18n.workspace = true\nschemars.workspace = true\nserde.workspace = true\nserde_json.workspace = true\nserde_repr.workspace = true\nsmallvec.workspace = true\nsum-tree.workspace = true\ntracing.workspace = true\nlog.workspace = true\n\nenum-iterator = \"2.1.0\"\nitertools = \"0.13.0\"\nonce_cell = \"1.19.0\"\npaste = \"1\"\nregex = \"1\"\nunicode-segmentation = \"1.12.0\"\nuuid = \"1.10\"\n\n# Async primitives (cross-platform, including WASM)\nasync-channel = \"2.3.1\"\nfutures = \"0.3\"\n\n# Chart\nnum-traits = \"0.2\"\nrust_decimal = { version = \"1.37.0\", optional = true }\n\n# Markdown Parser\nmarkdown = { version = \"1.0.0\", features = [\"serde\"] }\n\n# HTML Parser\nhtml5ever = \"0.27\"\nmarkup5ever_rcdom = \"0.3.0\"\n\n# Calendar\nchrono = \"0.4.38\"\n\n# Code Editor\naho-corasick = \"1.1.3\"\nlsp-types.workspace = true\n\n# Cross-platform time APIs (zero-cost on native, uses web APIs on WASM)\ninstant = { version = \"0.1\", features = [\"wasm-bindgen\"] }\n\n# Native-only dependencies (not available on WASM)\n[target.'cfg(not(target_family = \"wasm\"))'.dependencies]\nsmol.workspace = true\ntree-sitter = \"0.25.4\"\ntree-sitter-astro-next = { version=\"0.1.1\", optional = true }\ntree-sitter-bash = { version = \"0.23.3\", optional = true }\ntree-sitter-c = { version = \"0.24.1\", optional = true }\ntree-sitter-c-sharp = { version = \"0.23.1\", optional = true }\ntree-sitter-cmake = { version = \"0.7.1\", optional = true }\ntree-sitter-cpp = { version = \"0.23.4\", optional = true }\ntree-sitter-css = { version = \"0.23.2\", optional = true }\ntree-sitter-diff = { version = \"0.1.0\", optional = true }\ntree-sitter-elixir = { version = \"0.3\", optional = true }\ntree-sitter-embedded-template = { version = \"0.23.0\", optional = true }\ntree-sitter-go = { version = \"0.23.4\", optional = true }\ntree-sitter-graphql = { version = \"0.1.0\", optional = true }\ntree-sitter-html = { version = \"0.23.2\", optional = true }\ntree-sitter-java = { version = \"0.23.5\", optional = true }\ntree-sitter-javascript = { version = \"0.23.1\", optional = true }\ntree-sitter-jsdoc = { version = \"0.23.2\", optional = true }\ntree-sitter-json = \"0.24.8\"\ntree-sitter-kotlin-sg = { version = \"0.4.0\", optional = true }\ntree-sitter-lua = { version = \"0.4.1\", optional = true }\ntree-sitter-make = { version = \"1.1.1\", optional = true }\ntree-sitter-md = { version = \"0.5.1\", optional = true }\ntree-sitter-php = { version = \"0.24.2\", optional = true }\ntree-sitter-proto = { version = \"0.2.0\", optional = true }\ntree-sitter-python = { version = \"0.23.6\", optional = true }\ntree-sitter-ruby = { version = \"0.23.1\", optional = true }\ntree-sitter-rust = { version = \"0.24.0\", optional = true }\ntree-sitter-scala = { version = \"0.23.4\", optional = true }\ntree-sitter-sequel = { version = \"0.3.8\", optional = true }\ntree-sitter-svelte-next = { version = \"0.1.1\", optional = true }\ntree-sitter-swift = { version = \"0.7.0\", optional = true }\ntree-sitter-toml-ng = { version = \"0.7.0\", optional = true }\ntree-sitter-typescript = { version = \"0.23.2\", optional = true }\ntree-sitter-yaml = { version = \"0.7.1\", optional = true }\ntree-sitter-zig = { version = \"1.1.2\", optional = true }\n\n[target.'cfg(target_os = \"macos\")'.dependencies]\ncore-text = \"=21.0.0\"\n\n[dev-dependencies]\ngpui = { workspace = true, features = [\"test-support\"] }\nindoc = \"2\"\n\n[lints]\nworkspace = true\n" }, { "path": "crates/ui/LICENSE-APACHE", "content": "Copyright 2024 - 2025 Longbridge \n\nLicensed under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License.\nYou may obtain a copy of the License at\n\n\thttp://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software\ndistributed under the License is distributed on an \"AS IS\" BASIS,\nWITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\nSee the License for the specific language governing permissions and\nlimitations under the License.\n\n\n Apache License\n Version 2.0, January 2004\n http://www.apache.org/licenses/\n\nTERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION\n\n1. Definitions.\n\n \"License\" shall mean the terms and conditions for use, reproduction,\n and distribution as defined by Sections 1 through 9 of this document.\n\n \"Licensor\" shall mean the copyright owner or entity authorized by\n the copyright owner that is granting the License.\n\n \"Legal Entity\" shall mean the union of the acting entity and all\n other entities that control, are controlled by, or are under common\n control with that entity. For the purposes of this definition,\n \"control\" means (i) the power, direct or indirect, to cause the\n direction or management of such entity, whether by contract or\n otherwise, or (ii) ownership of fifty percent (50%) or more of the\n outstanding shares, or (iii) beneficial ownership of such entity.\n\n \"You\" (or \"Your\") shall mean an individual or Legal Entity\n exercising permissions granted by this License.\n\n \"Source\" form shall mean the preferred form for making modifications,\n including but not limited to software source code, documentation\n source, and configuration files.\n\n \"Object\" form shall mean any form resulting from mechanical\n transformation or translation of a Source form, including but\n not limited to compiled object code, generated documentation,\n and conversions to other media types.\n\n \"Work\" shall mean the work of authorship, whether in Source or\n Object form, made available under the License, as indicated by a\n copyright notice that is included in or attached to the work\n (an example is provided in the Appendix below).\n\n \"Derivative Works\" shall mean any work, whether in Source or Object\n form, that is based on (or derived from) the Work and for which the\n editorial revisions, annotations, elaborations, or other modifications\n represent, as a whole, an original work of authorship. For the purposes\n of this License, Derivative Works shall not include works that remain\n separable from, or merely link (or bind by name) to the interfaces of,\n the Work and Derivative Works thereof.\n\n \"Contribution\" shall mean any work of authorship, including\n the original version of the Work and any modifications or additions\n to that Work or Derivative Works thereof, that is intentionally\n submitted to Licensor for inclusion in the Work by the copyright owner\n or by an individual or Legal Entity authorized to submit on behalf of\n the copyright owner. For the purposes of this definition, \"submitted\"\n means any form of electronic, verbal, or written communication sent\n to the Licensor or its representatives, including but not limited to\n communication on electronic mailing lists, source code control systems,\n and issue tracking systems that are managed by, or on behalf of, the\n Licensor for the purpose of discussing and improving the Work, but\n excluding communication that is conspicuously marked or otherwise\n designated in writing by the copyright owner as \"Not a Contribution.\"\n\n \"Contributor\" shall mean Licensor and any individual or Legal Entity\n on behalf of whom a Contribution has been received by Licensor and\n subsequently incorporated within the Work.\n\n2. Grant of Copyright License. Subject to the terms and conditions of\n this License, each Contributor hereby grants to You a perpetual,\n worldwide, non-exclusive, no-charge, royalty-free, irrevocable\n copyright license to reproduce, prepare Derivative Works of,\n publicly display, publicly perform, sublicense, and distribute the\n Work and such Derivative Works in Source or Object form.\n\n3. Grant of Patent License. Subject to the terms and conditions of\n this License, each Contributor hereby grants to You a perpetual,\n worldwide, non-exclusive, no-charge, royalty-free, irrevocable\n (except as stated in this section) patent license to make, have made,\n use, offer to sell, sell, import, and otherwise transfer the Work,\n where such license applies only to those patent claims licensable\n by such Contributor that are necessarily infringed by their\n Contribution(s) alone or by combination of their Contribution(s)\n with the Work to which such Contribution(s) was submitted. If You\n institute patent litigation against any entity (including a\n cross-claim or counterclaim in a lawsuit) alleging that the Work\n or a Contribution incorporated within the Work constitutes direct\n or contributory patent infringement, then any patent licenses\n granted to You under this License for that Work shall terminate\n as of the date such litigation is filed.\n\n4. Redistribution. You may reproduce and distribute copies of the\n Work or Derivative Works thereof in any medium, with or without\n modifications, and in Source or Object form, provided that You\n meet the following conditions:\n\n (a) You must give any other recipients of the Work or\n Derivative Works a copy of this License; and\n\n (b) You must cause any modified files to carry prominent notices\n stating that You changed the files; and\n\n (c) You must retain, in the Source form of any Derivative Works\n that You distribute, all copyright, patent, trademark, and\n attribution notices from the Source form of the Work,\n excluding those notices that do not pertain to any part of\n the Derivative Works; and\n\n (d) If the Work includes a \"NOTICE\" text file as part of its\n distribution, then any Derivative Works that You distribute must\n include a readable copy of the attribution notices contained\n within such NOTICE file, excluding those notices that do not\n pertain to any part of the Derivative Works, in at least one\n of the following places: within a NOTICE text file distributed\n as part of the Derivative Works; within the Source form or\n documentation, if provided along with the Derivative Works; or,\n within a display generated by the Derivative Works, if and\n wherever such third-party notices normally appear. The contents\n of the NOTICE file are for informational purposes only and\n do not modify the License. You may add Your own attribution\n notices within Derivative Works that You distribute, alongside\n or as an addendum to the NOTICE text from the Work, provided\n that such additional attribution notices cannot be construed\n as modifying the License.\n\n You may add Your own copyright statement to Your modifications and\n may provide additional or different license terms and conditions\n for use, reproduction, or distribution of Your modifications, or\n for any such Derivative Works as a whole, provided Your use,\n reproduction, and distribution of the Work otherwise complies with\n the conditions stated in this License.\n\n5. Submission of Contributions. Unless You explicitly state otherwise,\n any Contribution intentionally submitted for inclusion in the Work\n by You to the Licensor shall be under the terms and conditions of\n this License, without any additional terms or conditions.\n Notwithstanding the above, nothing herein shall supersede or modify\n the terms of any separate license agreement you may have executed\n with Licensor regarding such Contributions.\n\n6. Trademarks. This License does not grant permission to use the trade\n names, trademarks, service marks, or product names of the Licensor,\n except as required for reasonable and customary use in describing the\n origin of the Work and reproducing the content of the NOTICE file.\n\n7. Disclaimer of Warranty. Unless required by applicable law or\n agreed to in writing, Licensor provides the Work (and each\n Contributor provides its Contributions) on an \"AS IS\" BASIS,\n WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or\n implied, including, without limitation, any warranties or conditions\n of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A\n PARTICULAR PURPOSE. You are solely responsible for determining the\n appropriateness of using or redistributing the Work and assume any\n risks associated with Your exercise of permissions under this License.\n\n8. Limitation of Liability. In no event and under no legal theory,\n whether in tort (including negligence), contract, or otherwise,\n unless required by applicable law (such as deliberate and grossly\n negligent acts) or agreed to in writing, shall any Contributor be\n liable to You for damages, including any direct, indirect, special,\n incidental, or consequential damages of any character arising as a\n result of this License or out of the use or inability to use the\n Work (including but not limited to damages for loss of goodwill,\n work stoppage, computer failure or malfunction, or any and all\n other commercial damages or losses), even if such Contributor\n has been advised of the possibility of such damages.\n\n9. Accepting Warranty or Additional Liability. While redistributing\n the Work or Derivative Works thereof, You may choose to offer,\n and charge a fee for, acceptance of support, warranty, indemnity,\n or other liability obligations and/or rights consistent with this\n License. However, in accepting such obligations, You may act only\n on Your own behalf and on Your sole responsibility, not on behalf\n of any other Contributor, and only if You agree to indemnify,\n defend, and hold each Contributor harmless for any liability\n incurred by, or claims asserted against, such Contributor by reason\n of your accepting any such warranty or additional liability.\n\nEND OF TERMS AND CONDITIONS\n" }, { "path": "crates/ui/build.rs", "content": "use std::{fs, path::Path};\n\nfn main() {\n // Tell Cargo to rerun this build script if any SVG file in assets/icons changes.\n let icons_dir = Path::new(\"../assets/assets/icons\");\n\n // Watch the icons directory itself.\n println!(\"cargo:rerun-if-changed=../assets/assets/icons\");\n\n // Watch each SVG file in the directory.\n if let Ok(entries) = fs::read_dir(icons_dir) {\n for entry in entries.flatten() {\n let path = entry.path();\n if path.extension().and_then(|s| s.to_str()) == Some(\"svg\") {\n println!(\"cargo:rerun-if-changed={}\", path.display());\n }\n }\n }\n}\n" }, { "path": "crates/ui/locales/ui.yml", "content": "_version: 2\nCalendar:\n week.0:\n en: Su\n zh-CN: 日\n zh-HK: 日\n it: Do\n week.1:\n en: Mo\n zh-CN: 一\n zh-HK: 一\n it: Lu\n week.2:\n en: Tu\n zh-CN: 二\n zh-HK: 二\n it: Ma\n week.3:\n en: We\n zh-CN: 三\n zh-HK: 三\n it: Me\n week.4:\n en: Th\n zh-CN: 四\n zh-HK: 四\n it: Gi\n week.5:\n en: Fr\n zh-CN: 五\n zh-HK: 五\n it: Ve\n week.6:\n en: Sa\n zh-CN: 六\n zh-HK: 六\n it: Sa\n month.January:\n en: January\n zh-CN: 一月\n zh-HK: 一月\n it: Gennaio\n month.February:\n en: February\n zh-CN: 二月\n zh-HK: 二月\n it: Febbraio\n month.March:\n en: March\n zh-CN: 三月\n zh-HK: 三月\n it: Marzo\n month.April:\n en: April\n zh-CN: 四月\n zh-HK: 四月\n it: Aprile\n month.May:\n en: May\n zh-CN: 五月\n zh-HK: 五月\n it: Maggio\n month.June:\n en: June\n zh-CN: 六月\n zh-HK: 六月\n it: Giugno\n month.July:\n en: July\n zh-CN: 七月\n zh-HK: 七月\n it: Luglio\n month.August:\n en: August\n zh-CN: 八月\n zh-HK: 八月\n it: Agosto\n month.September:\n en: September\n zh-CN: 九月\n zh-HK: 九月\n it: Settembre\n month.October:\n en: October\n zh-CN: 十月\n zh-HK: 十月\n it: Ottobre\n month.November:\n en: November\n zh-CN: 十一月\n zh-HK: 十一月\n it: Novembre\n month.December:\n en: December\n zh-CN: 十二月\n zh-HK: 十二月\n it: Dicembre\nDatePicker:\n placeholder:\n en: \"Select date\"\n zh-CN: 选择日期\n zh-HK: 選擇日期\n it: \"Seleziona data\"\nSelect:\n placeholder:\n en: \"Please select\"\n zh-CN: \"请选择\"\n zh-HK: \"請選擇\"\n it: Seleziona\nDock:\n Unnamed:\n en: Unnamed\n zh-CN: 未命名\n zh-HK: 未命名\n it: \"Senza nome\"\n Close:\n en: Close\n zh-CN: 关闭\n zh-HK: 關閉\n it: Chiudi\n Zoom In:\n en: Zoom In\n zh-CN: 放大\n zh-HK: 放大\n it: Zoom In\n Zoom Out:\n en: Zoom Out\n zh-CN: 缩小\n zh-HK: 縮小\n it: Zoom Out\n Collapse:\n en: Collapse\n zh-CN: 隐藏\n zh-HK: 隱藏\n it: Nascondi\n Expand:\n en: Expand\n zh-CN: 展开\n zh-HK: 展開\n it: Espandi\nColorPicker:\n Palette:\n en: Palette\n zh-CN: 调色板\n zh-HK: 調色板\n it: Tavolozza\n HSLA:\n en: HSLA\n zh-CN: HSLA\n zh-HK: HSLA\n it: HSLA\n Hue:\n en: Hue\n zh-CN: 色相\n zh-HK: 色相\n it: Tonalità\n Saturation:\n en: Saturation\n zh-CN: 饱和度\n zh-HK: 飽和度\n it: Saturazione\n Lightness:\n en: Lightness\n zh-CN: 亮度\n zh-HK: 亮度\n it: Luminosità\n Alpha:\n en: Alpha\n zh-CN: 透明度\n zh-HK: 透明度\n it: Alfa\nDialog:\n ok:\n en: OK\n zh-CN: 确定\n zh-HK: 確定\n it: OK\n cancel:\n en: Cancel\n zh-CN: 取消\n zh-HK: 取消\n it: Annulla\nList:\n search_placeholder:\n en: Search...\n zh-CN: 搜索...\n zh-HK: 搜索...\n it: Ricerca...\nInput:\n Replace:\n en: Replace\n zh-CN: 替换\n zh-HK: 替換\n Replace All:\n en: Replace All\n zh-CN: 全部替换\n zh-HK: 全部替換\n Cut:\n en: Cut\n zh-CN: 剪切\n zh-HK: 剪切\n Copy:\n en: Copy\n zh-CN: 复制\n zh-HK: 複製\n Paste:\n en: Paste\n zh-CN: 粘贴\n zh-HK: 貼上\n Select All:\n en: Select All\n zh-CN: 全选\n zh-HK: 全選\n Go to Definition:\n en: Go to Definition\n zh-CN: 跳转到定义\n zh-HK: 跳轉到定義\n Show Code Actions:\n en: Show Code Actions\n zh-CN: 显示代码操作\n zh-HK: 顯示代碼操作\nSettings:\n search_placeholder:\n en: Search...\n zh-CN: 搜索...\n zh-HK: 搜索...\n it: Ricerca...\n Reset All:\n en: Reset All\n zh-CN: 重置全部\n zh-HK: 重置全部\n it: Resetta Tutto\nPagination:\n previous:\n en: Previous\n zh-CN: 上一页\n zh-HK: 上一頁\n next:\n en: Next\n zh-CN: 下一页\n zh-HK: 下一頁\n" }, { "path": "crates/ui/src/accordion.rs", "content": "use std::{cell::RefCell, collections::HashSet, rc::Rc, sync::Arc};\n\nuse gpui::{\n AnyElement, App, ElementId, InteractiveElement as _, IntoElement, ParentElement, RenderOnce,\n SharedString, StatefulInteractiveElement as _, Styled, Window, div,\n prelude::FluentBuilder as _, rems,\n};\n\nuse crate::{ActiveTheme as _, Icon, IconName, Sizable, Size, h_flex, v_flex};\n\n/// Accordion element.\n#[derive(IntoElement)]\npub struct Accordion {\n id: ElementId,\n multiple: bool,\n size: Size,\n bordered: bool,\n disabled: bool,\n children: Vec,\n on_toggle_click: Option>,\n}\n\nimpl Accordion {\n /// Create a new Accordion with the given ID.\n pub fn new(id: impl Into) -> Self {\n Self {\n id: id.into(),\n multiple: false,\n size: Size::default(),\n bordered: true,\n children: Vec::new(),\n disabled: false,\n on_toggle_click: None,\n }\n }\n\n /// Set whether multiple accordion items can be opened simultaneously, default: false\n pub fn multiple(mut self, multiple: bool) -> Self {\n self.multiple = multiple;\n self\n }\n\n /// Set whether the accordion items have borders, default: true\n pub fn bordered(mut self, bordered: bool) -> Self {\n self.bordered = bordered;\n self\n }\n\n /// Set whether the accordion is disabled, default: false\n pub fn disabled(mut self, disabled: bool) -> Self {\n self.disabled = disabled;\n self\n }\n\n /// Adds an AccordionItem to the Accordion.\n pub fn item(mut self, child: F) -> Self\n where\n F: FnOnce(AccordionItem) -> AccordionItem,\n {\n let item = child(AccordionItem::new());\n self.children.push(item);\n self\n }\n\n /// Sets the on_toggle_click callback for the AccordionGroup.\n ///\n /// The first argument `Vec` is the indices of the open accordions.\n pub fn on_toggle_click(\n mut self,\n on_toggle_click: impl Fn(&[usize], &mut Window, &mut App) + Send + Sync + 'static,\n ) -> Self {\n self.on_toggle_click = Some(Arc::new(on_toggle_click));\n self\n }\n}\n\nimpl Sizable for Accordion {\n fn with_size(mut self, size: impl Into) -> Self {\n self.size = size.into();\n self\n }\n}\n\nimpl RenderOnce for Accordion {\n fn render(self, _window: &mut Window, _cx: &mut App) -> impl IntoElement {\n let open_ixs = Rc::new(RefCell::new(HashSet::new()));\n let is_multiple = self.multiple;\n\n v_flex()\n .id(self.id)\n .size_full()\n .when(self.bordered, |this| this.gap_y_2())\n .children(\n self.children\n .into_iter()\n .enumerate()\n .map(|(ix, accordion)| {\n if accordion.open {\n open_ixs.borrow_mut().insert(ix);\n }\n\n accordion\n .index(ix)\n .with_size(self.size)\n .bordered(self.bordered)\n .disabled(self.disabled)\n .on_toggle_click({\n let open_ixs = Rc::clone(&open_ixs);\n move |open, _, _| {\n let mut open_ixs = open_ixs.borrow_mut();\n if *open {\n if !is_multiple {\n open_ixs.clear();\n }\n open_ixs.insert(ix);\n } else {\n open_ixs.remove(&ix);\n }\n }\n })\n }),\n )\n .when_some(\n self.on_toggle_click.filter(|_| !self.disabled),\n move |this, on_toggle_click| {\n let open_ixs = Rc::clone(&open_ixs);\n this.on_click(move |_, window, cx| {\n let open_ixs: Vec = open_ixs.borrow().iter().map(|&ix| ix).collect();\n\n on_toggle_click(&open_ixs, window, cx);\n })\n },\n )\n }\n}\n\n/// An Accordion is a vertically stacked list of items, each of which can be expanded to reveal the content associated with it.\n#[derive(IntoElement)]\npub struct AccordionItem {\n index: usize,\n icon: Option,\n title: AnyElement,\n children: Vec,\n open: bool,\n size: Size,\n bordered: bool,\n disabled: bool,\n on_toggle_click: Option>,\n}\n\nimpl AccordionItem {\n /// Create a new AccordionItem.\n pub fn new() -> Self {\n Self {\n index: 0,\n icon: None,\n title: SharedString::default().into_any_element(),\n children: Vec::new(),\n open: false,\n disabled: false,\n on_toggle_click: None,\n size: Size::default(),\n bordered: true,\n }\n }\n\n /// Set the icon for the accordion item.\n pub fn icon(mut self, icon: impl Into) -> Self {\n self.icon = Some(icon.into());\n self\n }\n\n /// Set the title for the accordion item.\n pub fn title(mut self, title: impl IntoElement) -> Self {\n self.title = title.into_any_element();\n self\n }\n\n pub fn bordered(mut self, bordered: bool) -> Self {\n self.bordered = bordered;\n self\n }\n\n pub fn open(mut self, open: bool) -> Self {\n self.open = open;\n self\n }\n\n pub fn disabled(mut self, disabled: bool) -> Self {\n self.disabled = disabled;\n self\n }\n\n fn index(mut self, index: usize) -> Self {\n self.index = index;\n self\n }\n\n fn on_toggle_click(\n mut self,\n on_toggle_click: impl Fn(&bool, &mut Window, &mut App) + 'static,\n ) -> Self {\n self.on_toggle_click = Some(Arc::new(on_toggle_click));\n self\n }\n}\n\nimpl ParentElement for AccordionItem {\n fn extend(&mut self, elements: impl IntoIterator) {\n self.children.extend(elements);\n }\n}\n\nimpl Sizable for AccordionItem {\n fn with_size(mut self, size: impl Into) -> Self {\n self.size = size.into();\n self\n }\n}\n\nimpl RenderOnce for AccordionItem {\n fn render(self, _: &mut Window, cx: &mut App) -> impl IntoElement {\n let text_size = match self.size {\n Size::XSmall => rems(0.875),\n Size::Small => rems(0.875),\n _ => rems(1.0),\n };\n\n div().flex_1().child(\n v_flex()\n .w_full()\n .bg(cx.theme().accordion)\n .overflow_hidden()\n .when(self.bordered, |this| {\n this.border_1()\n .rounded(cx.theme().radius)\n .border_color(cx.theme().border)\n })\n .text_size(text_size)\n .child(\n h_flex()\n .id(self.index)\n .justify_between()\n .gap_3()\n .map(|this| match self.size {\n Size::XSmall => this.py_0().px_1p5(),\n Size::Small => this.py_0p5().px_2(),\n Size::Large => this.py_1p5().px_4(),\n _ => this.py_1().px_3(),\n })\n .when(self.open, |this| {\n this.when(self.bordered, |this| {\n this.text_color(cx.theme().foreground)\n .border_b_1()\n .border_color(cx.theme().border)\n })\n })\n .when(!self.bordered, |this| {\n this.border_b_1().border_color(cx.theme().border)\n })\n .child(\n h_flex()\n .items_center()\n .map(|this| match self.size {\n Size::XSmall => this.gap_1(),\n Size::Small => this.gap_1(),\n _ => this.gap_2(),\n })\n .when_some(self.icon, |this, icon| {\n this.child(\n icon.with_size(self.size)\n .text_color(cx.theme().muted_foreground),\n )\n })\n .child(self.title),\n )\n .when(!self.disabled, |this| {\n this.hover(|this| this.bg(cx.theme().accordion_hover))\n .child(\n Icon::new(if self.open {\n IconName::ChevronUp\n } else {\n IconName::ChevronDown\n })\n .xsmall()\n .text_color(cx.theme().muted_foreground),\n )\n .when_some(self.on_toggle_click, |this, on_toggle_click| {\n this.on_click({\n move |_, window, cx| {\n on_toggle_click(&!self.open, window, cx);\n }\n })\n })\n }),\n )\n .when(self.open, |this| {\n this.child(\n div()\n .map(|this| match self.size {\n Size::XSmall => this.p_1p5(),\n Size::Small => this.p_2(),\n Size::Large => this.p_4(),\n _ => this.p_3(),\n })\n .children(self.children),\n )\n }),\n )\n }\n}\n" }, { "path": "crates/ui/src/actions.rs", "content": "use gpui::{actions, Action};\nuse serde::Deserialize;\n\n#[derive(Clone, Action, PartialEq, Eq, Deserialize)]\n#[action(namespace = ui, no_json)]\npub struct Confirm {\n /// Is confirm with secondary.\n pub secondary: bool,\n}\n\nactions!(ui, [Cancel, SelectUp, SelectDown, SelectLeft, SelectRight, SelectFirst, SelectLast, SelectPrevColumn, SelectNextColumn, SelectPageUp, SelectPageDown]);\n\n" }, { "path": "crates/ui/src/alert.rs", "content": "use std::rc::Rc;\n\nuse gpui::{\n App, ClickEvent, ElementId, Empty, Hsla, InteractiveElement, IntoElement, ParentElement as _,\n RenderOnce, SharedString, StatefulInteractiveElement, StyleRefinement, Styled, Window, div,\n prelude::FluentBuilder as _, px, rems, transparent_white,\n};\n\nuse crate::{\n ActiveTheme as _, Colorize, Icon, IconName, Sizable, Size, StyledExt, h_flex,\n text::{Text, TextViewStyle},\n};\n\n/// The variant of the [`Alert`].\n#[derive(Debug, Default, Clone, Copy, PartialEq, Eq)]\npub enum AlertVariant {\n #[default]\n Default,\n Info,\n Success,\n Warning,\n Error,\n}\n\nimpl AlertVariant {\n fn fg(&self, cx: &App) -> Hsla {\n match self {\n Self::Default => cx.theme().foreground,\n Self::Info => cx.theme().info,\n Self::Success => cx.theme().success,\n Self::Warning => cx.theme().warning,\n Self::Error => cx.theme().danger,\n }\n }\n\n fn bg(&self, cx: &App) -> Hsla {\n match self {\n Self::Default => cx.theme().background,\n Self::Info => cx.theme().info.mix_oklab(transparent_white(), 0.04),\n Self::Success => cx.theme().success.mix_oklab(transparent_white(), 0.04),\n Self::Warning => cx.theme().warning.mix_oklab(transparent_white(), 0.04),\n Self::Error => cx.theme().danger.mix_oklab(transparent_white(), 0.04),\n }\n }\n\n fn border_color(&self, cx: &App) -> Hsla {\n match self {\n Self::Default => cx.theme().border,\n Self::Info => cx.theme().info.mix_oklab(transparent_white(), 0.3),\n Self::Success => cx.theme().success.mix_oklab(transparent_white(), 0.3),\n Self::Warning => cx.theme().warning.mix_oklab(transparent_white(), 0.3),\n Self::Error => cx.theme().danger.mix_oklab(transparent_white(), 0.3),\n }\n }\n}\n\n/// Alert used to display a message to the user.\n#[derive(IntoElement)]\npub struct Alert {\n id: ElementId,\n style: StyleRefinement,\n variant: AlertVariant,\n icon: Icon,\n title: Option,\n message: Text,\n size: Size,\n banner: bool,\n on_close: Option>,\n visible: bool,\n}\n\nimpl Alert {\n /// Create a new alert with the given message.\n pub fn new(id: impl Into, message: impl Into) -> Self {\n Self {\n id: id.into(),\n style: StyleRefinement::default(),\n variant: AlertVariant::default(),\n icon: Icon::new(IconName::Info),\n title: None,\n message: message.into(),\n size: Size::default(),\n banner: false,\n visible: true,\n on_close: None,\n }\n }\n\n /// Create a new info [`AlertVariant::Info`] with the given message.\n pub fn info(id: impl Into, message: impl Into) -> Self {\n Self::new(id, message)\n .with_variant(AlertVariant::Info)\n .icon(IconName::Info)\n }\n\n /// Create a new [`AlertVariant::Success`] alert with the given message.\n pub fn success(id: impl Into, message: impl Into) -> Self {\n Self::new(id, message)\n .with_variant(AlertVariant::Success)\n .icon(IconName::CircleCheck)\n }\n\n /// Create a new [`AlertVariant::Warning`] alert with the given message.\n pub fn warning(id: impl Into, message: impl Into) -> Self {\n Self::new(id, message)\n .with_variant(AlertVariant::Warning)\n .icon(IconName::TriangleAlert)\n }\n\n /// Create a new [`AlertVariant::Error`] alert with the given message.\n pub fn error(id: impl Into, message: impl Into) -> Self {\n Self::new(id, message)\n .with_variant(AlertVariant::Error)\n .icon(IconName::CircleX)\n }\n\n /// Sets the [`AlertVariant`] of the alert.\n pub fn with_variant(mut self, variant: AlertVariant) -> Self {\n self.variant = variant;\n self\n }\n\n /// Set the icon for the alert.\n pub fn icon(mut self, icon: impl Into) -> Self {\n self.icon = icon.into();\n self\n }\n\n /// Set the title for the alert.\n pub fn title(mut self, title: impl Into) -> Self {\n self.title = Some(title.into());\n self\n }\n\n /// Set alert as banner style.\n ///\n /// The `banner` style will make the alert take the full width of the container and not border and radius.\n /// This mode will not display `title`.\n pub fn banner(mut self) -> Self {\n self.banner = true;\n self\n }\n\n /// Set the visibility of the alert.\n pub fn visible(mut self, visible: bool) -> Self {\n self.visible = visible;\n self\n }\n\n /// Set alert as closable, true will show Close icon.\n pub fn on_close(\n mut self,\n on_close: impl Fn(&ClickEvent, &mut Window, &mut App) + 'static,\n ) -> Self {\n self.on_close = Some(Rc::new(on_close));\n self\n }\n}\n\nimpl Sizable for Alert {\n fn with_size(mut self, size: impl Into) -> Self {\n self.size = size.into();\n self\n }\n}\n\nimpl Styled for Alert {\n fn style(&mut self) -> &mut gpui::StyleRefinement {\n &mut self.style\n }\n}\n\nimpl RenderOnce for Alert {\n fn render(self, _: &mut Window, cx: &mut App) -> impl IntoElement {\n if !self.visible {\n return Empty.into_any_element();\n }\n\n let (radius, padding_x, padding_y, gap) = match self.size {\n Size::XSmall => (cx.theme().radius, px(12.), px(6.), px(6.)),\n Size::Small => (cx.theme().radius, px(12.), px(8.), px(6.)),\n Size::Large => (cx.theme().radius_lg, px(20.), px(14.), px(12.)),\n _ => (cx.theme().radius, px(16.), px(10.), px(12.)),\n };\n\n let bg = self.variant.bg(cx);\n let fg = self.variant.fg(cx);\n let border_color = self.variant.border_color(cx);\n\n h_flex()\n .id(self.id)\n .w_full()\n .text_color(fg)\n .bg(bg)\n .px(padding_x)\n .py(padding_y)\n .gap(gap)\n .justify_between()\n .text_sm()\n .border_1()\n .border_color(border_color)\n .when(!self.banner, |this| this.rounded(radius).items_start())\n .refine_style(&self.style)\n .child(\n div()\n .flex()\n .flex_1()\n .when(self.banner, |this| this.items_center())\n .overflow_hidden()\n .gap(gap)\n .child(\n div()\n .when(!self.banner, |this| this.mt(px(5.)))\n .child(self.icon),\n )\n .child(\n div()\n .flex_1()\n .overflow_hidden()\n .gap_3()\n .when(!self.banner, |this| {\n this.when_some(self.title, |this, title| {\n this.child(\n div().w_full().truncate().font_semibold().child(title),\n )\n })\n })\n .child(\n self.message\n .style(TextViewStyle::default().paragraph_gap(rems(0.2))),\n ),\n ),\n )\n .when_some(self.on_close, |this, on_close| {\n this.child(\n div()\n .id(\"close\")\n .p_0p5()\n .rounded(cx.theme().radius)\n .hover(|this| this.bg(bg.opacity(0.8)))\n .active(|this| this.bg(bg.opacity(0.9)))\n .on_click(move |ev, window, cx| {\n on_close(ev, window, cx);\n })\n .child(\n Icon::new(IconName::Close)\n .with_size(self.size.max(Size::Medium))\n .flex_shrink_0(),\n ),\n )\n })\n .into_any_element()\n }\n}\n" }, { "path": "crates/ui/src/anchored.rs", "content": "//! This is a fork of gpui's anchored element that adds support for offsetting\n//! https://github.com/zed-industries/zed/blob/b06f4088a3565c5e30663106ff79c1ced645d87a/crates/gpui/src/elements/anchored.rs\nuse gpui::{\n AnyElement, App, Axis, Bounds, Display, Edges, Element, GlobalElementId, Half,\n InspectorElementId, IntoElement, LayoutId, ParentElement, Pixels, Point, Position, Size, Style,\n Window, point, px,\n};\nuse smallvec::SmallVec;\n\nuse crate::Anchor;\n\n/// The state that the anchored element element uses to track its children.\npub struct AnchoredState {\n child_layout_ids: SmallVec<[LayoutId; 4]>,\n}\n\n/// An anchored element that can be used to display UI that\n/// will avoid overflowing the window bounds.\npub(crate) struct Anchored {\n children: SmallVec<[AnyElement; 2]>,\n anchor_corner: Anchor,\n fit_mode: AnchoredFitMode,\n anchor_position: Option>,\n position_mode: AnchoredPositionMode,\n offset: Option>,\n}\n\n/// anchored gives you an element that will avoid overflowing the window bounds.\n/// Its children should have no margin to avoid measurement issues.\npub(crate) fn anchored() -> Anchored {\n Anchored {\n children: SmallVec::new(),\n anchor_corner: Anchor::TopLeft,\n fit_mode: AnchoredFitMode::SwitchAnchor,\n anchor_position: None,\n position_mode: AnchoredPositionMode::Window,\n offset: None,\n }\n}\n\n#[allow(dead_code)]\nimpl Anchored {\n /// Sets which corner of the anchored element should be anchored to the current position.\n pub fn anchor(mut self, anchor: Anchor) -> Self {\n self.anchor_corner = anchor;\n self\n }\n\n /// Sets the position in window coordinates\n /// (otherwise the location the anchored element is rendered is used)\n pub fn position(mut self, anchor: Point) -> Self {\n self.anchor_position = Some(anchor);\n self\n }\n\n /// Offset the final position by this amount.\n /// Useful when you want to anchor to an element but offset from it, such as in PopoverMenu.\n pub fn offset(mut self, offset: Point) -> Self {\n self.offset = Some(offset);\n self\n }\n\n /// Sets the position mode for this anchored element. Local will have this\n /// interpret its [`Anchored::position`] as relative to the parent element.\n /// While Window will have it interpret the position as relative to the window.\n pub fn position_mode(mut self, mode: AnchoredPositionMode) -> Self {\n self.position_mode = mode;\n self\n }\n\n /// Snap to window edge instead of switching anchor corner when an overflow would occur.\n pub fn snap_to_window(mut self) -> Self {\n self.fit_mode = AnchoredFitMode::SnapToWindow;\n self\n }\n\n /// Snap to window edge and leave some margins.\n pub fn snap_to_window_with_margin(mut self, edges: impl Into>) -> Self {\n self.fit_mode = AnchoredFitMode::SnapToWindowWithMargin(edges.into());\n self\n }\n}\n\nimpl ParentElement for Anchored {\n fn extend(&mut self, elements: impl IntoIterator) {\n self.children.extend(elements)\n }\n}\n\nimpl Element for Anchored {\n type RequestLayoutState = AnchoredState;\n type PrepaintState = ();\n\n fn id(&self) -> Option {\n None\n }\n\n fn source_location(&self) -> Option<&'static core::panic::Location<'static>> {\n None\n }\n\n fn request_layout(\n &mut self,\n _id: Option<&GlobalElementId>,\n _inspector_id: Option<&InspectorElementId>,\n window: &mut Window,\n cx: &mut App,\n ) -> (gpui::LayoutId, Self::RequestLayoutState) {\n let child_layout_ids = self\n .children\n .iter_mut()\n .map(|child| child.request_layout(window, cx))\n .collect::>();\n\n let anchored_style = Style {\n position: Position::Absolute,\n display: Display::Flex,\n ..Style::default()\n };\n\n let layout_id = window.request_layout(anchored_style, child_layout_ids.iter().copied(), cx);\n\n (layout_id, AnchoredState { child_layout_ids })\n }\n\n fn prepaint(\n &mut self,\n _id: Option<&GlobalElementId>,\n _inspector_id: Option<&InspectorElementId>,\n bounds: Bounds,\n request_layout: &mut Self::RequestLayoutState,\n window: &mut Window,\n cx: &mut App,\n ) {\n if request_layout.child_layout_ids.is_empty() {\n return;\n }\n\n let mut child_min = point(Pixels::MAX, Pixels::MAX);\n let mut child_max = Point::default();\n for child_layout_id in &request_layout.child_layout_ids {\n let child_bounds = window.layout_bounds(*child_layout_id);\n child_min = child_min.min(&child_bounds.origin);\n child_max = child_max.max(&child_bounds.bottom_right());\n }\n let size: Size = (child_max - child_min).into();\n\n let (origin, mut desired) = self.position_mode.get_position_and_bounds(\n self.anchor_position,\n self.anchor_corner,\n size,\n bounds,\n self.offset,\n );\n\n let limits = Bounds {\n origin: Point::default(),\n size: window.viewport_size(),\n };\n\n if self.fit_mode == AnchoredFitMode::SwitchAnchor {\n let mut anchor_corner = self.anchor_corner;\n\n if desired.left() < limits.left() || desired.right() > limits.right() {\n let switched = Bounds::from_corner_and_size(\n anchor_corner\n .other_side_corner_along(Axis::Horizontal)\n .into(),\n origin,\n size,\n );\n if !(switched.left() < limits.left() || switched.right() > limits.right()) {\n anchor_corner = anchor_corner.other_side_corner_along(Axis::Horizontal);\n desired = switched\n }\n }\n\n if desired.top() < limits.top() || desired.bottom() > limits.bottom() {\n let switched = Bounds::from_corner_and_size(\n anchor_corner.other_side_corner_along(Axis::Vertical).into(),\n origin,\n size,\n );\n if !(switched.top() < limits.top() || switched.bottom() > limits.bottom()) {\n desired = switched;\n }\n }\n }\n\n let client_inset = window.client_inset().unwrap_or(px(0.));\n let edges = match self.fit_mode {\n AnchoredFitMode::SnapToWindowWithMargin(edges) => edges,\n _ => Edges::default(),\n }\n .map(|edge| *edge + client_inset);\n\n // Snap the horizontal edges of the anchored element to the horizontal edges of the window if\n // its horizontal bounds overflow, aligning to the left if it is wider than the limits.\n if desired.right() > limits.right() {\n desired.origin.x -= desired.right() - limits.right() + edges.right;\n }\n if desired.left() < limits.left() {\n desired.origin.x = limits.origin.x + edges.left;\n }\n\n // Snap the vertical edges of the anchored element to the vertical edges of the window if\n // its vertical bounds overflow, aligning to the top if it is taller than the limits.\n if desired.bottom() > limits.bottom() {\n desired.origin.y -= desired.bottom() - limits.bottom() + edges.bottom;\n }\n if desired.top() < limits.top() {\n desired.origin.y = limits.origin.y + edges.top;\n }\n\n let offset = desired.origin - bounds.origin;\n let offset = point(offset.x.round(), offset.y.round());\n\n window.with_element_offset(offset, |window| {\n for child in &mut self.children {\n child.prepaint(window, cx);\n }\n })\n }\n\n fn paint(\n &mut self,\n _id: Option<&GlobalElementId>,\n _inspector_id: Option<&InspectorElementId>,\n _bounds: Bounds,\n _request_layout: &mut Self::RequestLayoutState,\n _prepaint: &mut Self::PrepaintState,\n window: &mut Window,\n cx: &mut App,\n ) {\n for child in &mut self.children {\n child.paint(window, cx);\n }\n }\n}\n\nimpl IntoElement for Anchored {\n type Element = Self;\n\n fn into_element(self) -> Self::Element {\n self\n }\n}\n\n/// Which algorithm to use when fitting the anchored element to be inside the window.\n#[allow(dead_code)]\n#[derive(Copy, Clone, PartialEq)]\npub enum AnchoredFitMode {\n /// Snap the anchored element to the window edge.\n SnapToWindow,\n /// Snap to window edge and leave some margins.\n SnapToWindowWithMargin(Edges),\n /// Switch which corner anchor this anchored element is attached to.\n SwitchAnchor,\n}\n\n/// Which algorithm to use when positioning the anchored element.\n#[allow(dead_code)]\n#[derive(Copy, Clone, PartialEq)]\npub enum AnchoredPositionMode {\n /// Position the anchored element relative to the window.\n Window,\n /// Position the anchored element relative to its parent.\n Local,\n}\n\nimpl AnchoredPositionMode {\n fn get_position_and_bounds(\n &self,\n anchor_position: Option>,\n anchor_corner: Anchor,\n size: Size,\n bounds: Bounds,\n offset: Option>,\n ) -> (Point, Bounds) {\n let offset = offset.unwrap_or_default();\n\n match self {\n AnchoredPositionMode::Window => {\n let anchor_position = anchor_position.unwrap_or(bounds.origin);\n let bounds =\n Self::from_corner_and_size(anchor_corner, anchor_position + offset, size);\n (anchor_position, bounds)\n }\n AnchoredPositionMode::Local => {\n let anchor_position = anchor_position.unwrap_or_default();\n let bounds = Self::from_corner_and_size(\n anchor_corner,\n bounds.origin + anchor_position + offset,\n size,\n );\n (anchor_position, bounds)\n }\n }\n }\n\n // Ref https://github.com/zed-industries/zed/blob/b06f4088a3565c5e30663106ff79c1ced645d87a/crates/gpui/src/geometry.rs#L863\n fn from_corner_and_size(\n anchor: Anchor,\n origin: Point,\n size: Size,\n ) -> Bounds {\n let origin = match anchor {\n Anchor::TopLeft => origin,\n Anchor::TopCenter => Point {\n x: origin.x - size.width.half(),\n y: origin.y,\n },\n Anchor::TopRight => Point {\n x: origin.x - size.width,\n y: origin.y,\n },\n Anchor::BottomLeft => Point {\n x: origin.x,\n y: origin.y - size.height,\n },\n Anchor::BottomCenter => Point {\n x: origin.x - size.width.half(),\n y: origin.y - size.height,\n },\n Anchor::BottomRight => Point {\n x: origin.x - size.width,\n y: origin.y - size.height,\n },\n };\n\n Bounds { origin, size }\n }\n}\n" }, { "path": "crates/ui/src/animation.rs", "content": "/// A cubic bezier function like CSS `cubic-bezier`.\n///\n/// Builder:\n///\n/// https://cubic-bezier.com\npub fn cubic_bezier(x1: f32, y1: f32, x2: f32, y2: f32) -> impl Fn(f32) -> f32 {\n move |t: f32| {\n let one_t = 1.0 - t;\n let one_t2 = one_t * one_t;\n let t2 = t * t;\n let t3 = t2 * t;\n\n // The Bezier curve function for x and y, where x0 = 0, y0 = 0, x3 = 1, y3 = 1\n let _x = 3.0 * x1 * one_t2 * t + 3.0 * x2 * one_t * t2 + t3;\n let y = 3.0 * y1 * one_t2 * t + 3.0 * y2 * one_t * t2 + t3;\n\n y\n }\n}\n" }, { "path": "crates/ui/src/async_util.rs", "content": "//! Cross-platform async utilities for both native and WASM targets.\n\n// For native targets, re-export smol's primitives\n#[cfg(not(target_family = \"wasm\"))]\npub use smol::channel::{Receiver, Sender, unbounded};\n\n// For WASM targets, use async-channel\n#[cfg(target_family = \"wasm\")]\npub use async_channel::{Receiver, Sender, unbounded};\n" }, { "path": "crates/ui/src/avatar/avatar.rs", "content": "use gpui::{\n App, Div, Hsla, ImageSource, InteractiveElement, Interactivity, IntoElement,\n ParentElement as _, RenderOnce, SharedString, StyleRefinement, Styled, Window, div, img,\n prelude::FluentBuilder,\n};\n\nuse crate::{\n ActiveTheme, Colorize, Icon, IconName, Sizable, Size, StyledExt,\n avatar::{AvatarSized as _, avatar_size},\n};\n\n/// User avatar element.\n///\n/// We can use [`Sizable`] trait to set the size of the avatar (see also: [`avatar_size`] about the size in pixels).\n#[derive(IntoElement)]\npub struct Avatar {\n base: Div,\n style: StyleRefinement,\n src: Option,\n name: Option,\n short_name: SharedString,\n placeholder: Icon,\n size: Size,\n}\n\nimpl Avatar {\n pub fn new() -> Self {\n Self {\n base: div(),\n style: StyleRefinement::default(),\n src: None,\n name: None,\n short_name: SharedString::default(),\n placeholder: Icon::new(IconName::User),\n size: Size::Medium,\n }\n }\n\n /// Set to use image source for the avatar.\n pub fn src(mut self, source: impl Into) -> Self {\n self.src = Some(source.into());\n self\n }\n\n /// Set name of the avatar user, if `src` is none, will use this name as placeholder.\n pub fn name(mut self, name: impl Into) -> Self {\n let name: SharedString = name.into();\n let short: SharedString = extract_text_initials(&name).into();\n\n self.name = Some(name);\n self.short_name = short;\n self\n }\n\n /// Set placeholder icon, default: [`IconName::User`]\n pub fn placeholder(mut self, icon: impl Into) -> Self {\n self.placeholder = icon.into();\n self\n }\n}\n\nimpl Sizable for Avatar {\n fn with_size(mut self, size: impl Into) -> Self {\n self.size = size.into();\n self\n }\n}\n\nimpl Styled for Avatar {\n fn style(&mut self) -> &mut StyleRefinement {\n &mut self.style\n }\n}\n\nimpl InteractiveElement for Avatar {\n fn interactivity(&mut self) -> &mut Interactivity {\n self.base.interactivity()\n }\n}\n\nimpl RenderOnce for Avatar {\n fn render(self, _: &mut Window, cx: &mut App) -> impl IntoElement {\n let corner_radii = self.style.corner_radii.clone();\n let mut inner_style = StyleRefinement::default();\n inner_style.corner_radii = corner_radii;\n\n const COLOR_COUNT: u64 = 360 / 15;\n fn default_color(ix: u64, cx: &mut App) -> Hsla {\n let h = (ix * 15).clamp(0, 360) as f32;\n cx.theme().blue.hue(h / 360.0)\n }\n\n const BG_OPACITY: f32 = 0.2;\n\n self.base\n .avatar_size(self.size)\n .flex()\n .items_center()\n .justify_center()\n .flex_shrink_0()\n .rounded_full()\n .overflow_hidden()\n .bg(cx.theme().secondary)\n .text_color(cx.theme().background)\n .border_1()\n .border_color(cx.theme().border)\n .when(self.name.is_none() && self.src.is_none(), |this| {\n this.text_size(avatar_size(self.size) * 0.6)\n .child(self.placeholder)\n })\n .map(|this| match self.src {\n None => this.when(self.name.is_some(), |this| {\n let color_ix = gpui::hash(&self.short_name) % COLOR_COUNT;\n let color = default_color(color_ix, cx);\n\n this.bg(color.opacity(BG_OPACITY))\n .text_color(color)\n .child(div().avatar_text_size(self.size).child(self.short_name))\n }),\n Some(src) => this.child(\n img(src)\n .avatar_size(self.size)\n .rounded_full()\n .refine_style(&inner_style),\n ),\n })\n .refine_style(&self.style)\n }\n}\n\nfn extract_text_initials(text: &str) -> String {\n let mut result = text\n .split(\" \")\n .flat_map(|word| word.chars().next().map(|c| c.to_string()))\n .take(2)\n .collect::>()\n .join(\"\");\n\n if result.len() == 1 {\n result = text.chars().take(2).collect::();\n }\n\n result.to_uppercase()\n}\n\n#[cfg(test)]\nmod tests {\n use super::*;\n\n #[test]\n fn test_avatar_text_initials() {\n assert_eq!(extract_text_initials(&\"Jason Lee\"), \"JL\".to_string());\n assert_eq!(extract_text_initials(&\"Foo Bar Dar\"), \"FB\".to_string());\n assert_eq!(extract_text_initials(&\"huacnlee\"), \"HU\".to_string());\n }\n\n #[gpui::test]\n fn test_avatar_builder(_cx: &mut gpui::TestAppContext) {\n let avatar = Avatar::new()\n .name(\"Jason Lee\")\n .placeholder(Icon::new(IconName::User))\n .large();\n\n assert_eq!(avatar.name, Some(SharedString::from(\"Jason Lee\")));\n assert_eq!(avatar.short_name, SharedString::from(\"JL\"));\n assert_eq!(avatar.size, Size::Large);\n }\n}\n" }, { "path": "crates/ui/src/avatar/avatar_group.rs", "content": "use gpui::{\n div, prelude::FluentBuilder as _, Div, InteractiveElement, Interactivity, IntoElement,\n ParentElement as _, RenderOnce, StyleRefinement, Styled,\n};\n\nuse crate::{avatar::Avatar, ActiveTheme, Sizable, Size, StyledExt as _};\n\n/// A grouped avatars to display in a compact layout.\n#[derive(IntoElement)]\npub struct AvatarGroup {\n base: Div,\n style: StyleRefinement,\n avatars: Vec,\n size: Size,\n limit: usize,\n ellipsis: bool,\n}\n\nimpl AvatarGroup {\n /// Create a new AvatarGroup.\n pub fn new() -> Self {\n Self {\n base: div(),\n style: StyleRefinement::default(),\n avatars: Vec::new(),\n size: Size::default(),\n limit: 3,\n ellipsis: false,\n }\n }\n\n /// Add a child avatar to the group.\n pub fn child(mut self, avatar: Avatar) -> Self {\n self.avatars.push(avatar);\n self\n }\n\n /// Add multiple child avatars to the group.\n pub fn children(mut self, avatars: impl IntoIterator) -> Self {\n self.avatars.extend(avatars);\n self\n }\n\n /// Set the maximum number of avatars to display before showing a \"more\" avatar.\n pub fn limit(mut self, limit: usize) -> Self {\n self.limit = limit;\n self\n }\n\n /// Set whether to show an ellipsis when the limit is reached, default: false\n pub fn ellipsis(mut self) -> Self {\n self.ellipsis = true;\n self\n }\n}\n\nimpl Sizable for AvatarGroup {\n fn with_size(mut self, size: impl Into) -> Self {\n self.size = size.into();\n self\n }\n}\n\nimpl Styled for AvatarGroup {\n fn style(&mut self) -> &mut StyleRefinement {\n &mut self.style\n }\n}\n\nimpl InteractiveElement for AvatarGroup {\n fn interactivity(&mut self) -> &mut Interactivity {\n self.base.interactivity()\n }\n}\n\nimpl RenderOnce for AvatarGroup {\n fn render(self, _: &mut gpui::Window, cx: &mut gpui::App) -> impl IntoElement {\n let item_ml = -super::avatar_size(self.size) * 0.3;\n let avatars_len = self.avatars.len();\n\n self.base\n .h_flex()\n .flex_row_reverse()\n .refine_style(&self.style)\n .children(if self.ellipsis && avatars_len > self.limit {\n Some(\n Avatar::new()\n .name(\"⋯\")\n .bg(cx.theme().secondary)\n .text_color(cx.theme().muted_foreground)\n .with_size(self.size)\n .ml_1(),\n )\n } else {\n None\n })\n .children(\n self.avatars\n .into_iter()\n .take(self.limit)\n .enumerate()\n .rev()\n .map(|(ix, item)| {\n item.with_size(self.size)\n .when(ix > 0, |this| this.ml(item_ml))\n }),\n )\n }\n}\n\n#[cfg(test)]\nmod tests {\n use super::*;\n\n #[gpui::test]\n fn test_avatar_group_builder(_cx: &mut gpui::TestAppContext) {\n let group = AvatarGroup::new()\n .child(Avatar::new().name(\"Alice\"))\n .child(Avatar::new().name(\"Bob\"))\n .child(Avatar::new().name(\"Charlie\"))\n .child(Avatar::new().name(\"David\"))\n .large()\n .limit(3)\n .ellipsis();\n\n assert_eq!(group.avatars.len(), 4);\n assert_eq!(group.size, Size::Large);\n assert_eq!(group.limit, 3);\n assert!(group.ellipsis);\n }\n}\n" }, { "path": "crates/ui/src/avatar/mod.rs", "content": "mod avatar;\nmod avatar_group;\n\npub use avatar::*;\npub use avatar_group::*;\n\nuse crate::{Icon, Size, StyledExt as _};\nuse gpui::{Div, Img, IntoElement, Pixels, Styled, px, rems};\n\n/// Returns the size of the avatar based on the given [`Size`].\npub(super) fn avatar_size(size: Size) -> Pixels {\n match size {\n Size::Large => px(80.),\n Size::Medium => px(48.),\n Size::Small => px(24.),\n Size::XSmall => px(16.),\n Size::Size(size) => size,\n }\n}\n\n/// Extension for add `avatar_size` method to `IntoElement` to apply avatar size to element.\npub(super) trait AvatarSized: IntoElement + Styled {\n fn avatar_size(self, size: Size) -> Self {\n self.size(avatar_size(size))\n }\n\n fn avatar_text_size(self, size: Size) -> Self {\n match size {\n Size::Large => self.text_3xl().font_semibold(),\n Size::Medium => self.text_sm(),\n Size::Small => self.text_xs(),\n Size::XSmall => self.text_size(rems(0.65)),\n Size::Size(size) => self.size(size * 0.5),\n }\n }\n}\nimpl AvatarSized for Div {}\nimpl AvatarSized for Icon {}\nimpl AvatarSized for Img {}\n" }, { "path": "crates/ui/src/badge.rs", "content": "use gpui::{\n div, prelude::FluentBuilder, px, relative, AnyElement, App, Hsla, IntoElement, ParentElement,\n RenderOnce, StyleRefinement, Styled, Window,\n};\n\nuse crate::{h_flex, white, ActiveTheme, Icon, Sizable, Size, StyledExt};\n\n#[derive(Default, Clone)]\nenum BadgeVariant {\n #[default]\n Number,\n Dot,\n Icon(Box),\n}\n\n#[allow(unused)]\nimpl BadgeVariant {\n #[inline]\n fn is_icon(&self) -> bool {\n matches!(self, BadgeVariant::Icon(_))\n }\n\n #[inline]\n fn is_number(&self) -> bool {\n matches!(self, BadgeVariant::Number)\n }\n}\n\n/// A badge for displaying a count, dot, or icon on an element.\n#[derive(IntoElement)]\npub struct Badge {\n style: StyleRefinement,\n count: usize,\n max: usize,\n variant: BadgeVariant,\n children: Vec,\n color: Option,\n size: Size,\n}\n\nimpl Badge {\n /// Create a new badge.\n pub fn new() -> Self {\n Self {\n style: StyleRefinement::default(),\n count: 0,\n max: 99,\n variant: Default::default(),\n color: None,\n children: Vec::new(),\n size: Size::default(),\n }\n }\n\n /// Set to use [`BadgeVariant::Dot`] to show a dot.\n pub fn dot(mut self) -> Self {\n self.variant = BadgeVariant::Dot;\n self\n }\n\n /// Set to use [`BadgeVariant::Number`] to show a count.\n ///\n /// If count is 0, the badge will be hidden.\n pub fn count(mut self, count: usize) -> Self {\n self.count = count;\n self\n }\n\n /// Set to use [`BadgeVariant::Icon`] to show an icon.\n pub fn icon(mut self, icon: impl Into) -> Self {\n self.variant = BadgeVariant::Icon(Box::new(icon.into()));\n self\n }\n\n /// Set the maximum count to show (Only if [`BadgeVariant::Number`] is used).\n pub fn max(mut self, max: usize) -> Self {\n self.max = max;\n self\n }\n\n /// Set the color (background) of the badge.\n pub fn color(mut self, color: impl Into) -> Self {\n self.color = Some(color.into());\n self\n }\n}\n\nimpl ParentElement for Badge {\n fn extend(&mut self, elements: impl IntoIterator) {\n self.children.extend(elements);\n }\n}\n\nimpl Sizable for Badge {\n fn with_size(mut self, size: impl Into) -> Self {\n self.size = size.into();\n self\n }\n}\n\nimpl RenderOnce for Badge {\n fn render(self, _window: &mut Window, cx: &mut App) -> impl IntoElement {\n let visible = match self.variant {\n BadgeVariant::Number => self.count > 0,\n BadgeVariant::Dot | BadgeVariant::Icon(_) => true,\n };\n\n let (size, text_size) = match self.size {\n Size::Large => (px(24.), px(14.)),\n Size::Medium | Size::Size(_) => (px(16.), px(10.)),\n Size::Small | Size::XSmall => (px(10.), px(8.)),\n };\n\n div()\n .relative()\n .refine_style(&self.style)\n .children(self.children)\n .when(visible, |this| {\n this.child(\n h_flex()\n .absolute()\n .justify_center()\n .items_center()\n .rounded_full()\n .bg(self.color.unwrap_or(cx.theme().red))\n .text_color(white())\n .text_size(text_size)\n .map(|this| match self.variant {\n BadgeVariant::Dot => this.top_0().right_0().size(px(6.)),\n BadgeVariant::Number => {\n let count = if self.count > self.max {\n format!(\"{}+\", self.max)\n } else {\n self.count.to_string()\n };\n\n let (top, left) = match self.size {\n Size::Large => (px(2.), -px(count.len() as f32)),\n Size::Medium | Size::Size(_) => {\n (-px(3.), -px(3.) * count.len())\n }\n Size::Small | Size::XSmall => (-px(4.), -px(4.) * count.len()),\n };\n\n this.top(top)\n .right(left)\n .py_0p5()\n .px_0p5()\n .min_w_3p5()\n .text_size(px(10.))\n .line_height(relative(1.))\n .child(count)\n }\n BadgeVariant::Icon(icon) => this\n .right_0()\n .bottom_0()\n .size(size)\n .border_1()\n .border_color(cx.theme().background)\n .child(*icon),\n }),\n )\n })\n }\n}\n" }, { "path": "crates/ui/src/breadcrumb.rs", "content": "use std::rc::Rc;\n\nuse gpui::{\n div, prelude::FluentBuilder as _, App, ClickEvent, ElementId, InteractiveElement as _,\n IntoElement, ParentElement, RenderOnce, SharedString, StatefulInteractiveElement,\n StyleRefinement, Styled, Window,\n};\n\nuse crate::{h_flex, ActiveTheme, Icon, IconName, StyledExt};\n\n/// A breadcrumb navigation element.\n#[derive(IntoElement)]\npub struct Breadcrumb {\n style: StyleRefinement,\n items: Vec,\n}\n\n/// Item for the [`Breadcrumb`].\n#[derive(IntoElement)]\npub struct BreadcrumbItem {\n id: ElementId,\n style: StyleRefinement,\n label: SharedString,\n on_click: Option>,\n disabled: bool,\n is_last: bool,\n}\n\nimpl BreadcrumbItem {\n /// Create a new BreadcrumbItem with the given id and label.\n pub fn new(label: impl Into) -> Self {\n Self {\n id: ElementId::Integer(0),\n style: StyleRefinement::default(),\n label: label.into(),\n on_click: None,\n disabled: false,\n is_last: false,\n }\n }\n\n pub fn disabled(mut self, disabled: bool) -> Self {\n self.disabled = disabled;\n self\n }\n\n pub fn on_click(\n mut self,\n on_click: impl Fn(&ClickEvent, &mut Window, &mut App) + 'static,\n ) -> Self {\n self.on_click = Some(Rc::new(on_click));\n self\n }\n\n fn id(mut self, id: impl Into) -> Self {\n self.id = id.into();\n self\n }\n\n /// For internal use only.\n fn is_last(mut self, is_last: bool) -> Self {\n self.is_last = is_last;\n self\n }\n}\n\nimpl Styled for BreadcrumbItem {\n fn style(&mut self) -> &mut StyleRefinement {\n &mut self.style\n }\n}\n\nimpl From<&'static str> for BreadcrumbItem {\n fn from(value: &'static str) -> Self {\n Self::new(value)\n }\n}\n\nimpl From for BreadcrumbItem {\n fn from(value: String) -> Self {\n Self::new(value)\n }\n}\n\nimpl From for BreadcrumbItem {\n fn from(value: SharedString) -> Self {\n Self::new(value)\n }\n}\n\nimpl RenderOnce for BreadcrumbItem {\n fn render(self, _: &mut Window, cx: &mut App) -> impl IntoElement {\n div()\n .id(self.id)\n .child(self.label)\n .text_color(cx.theme().muted_foreground)\n .when(self.is_last, |this| this.text_color(cx.theme().foreground))\n .when(self.disabled, |this| {\n this.text_color(cx.theme().muted_foreground)\n })\n .refine_style(&self.style)\n .when(!self.disabled, |this| {\n this.when_some(self.on_click, |this, on_click| {\n this.cursor_pointer().on_click(move |event, window, cx| {\n on_click(event, window, cx);\n })\n })\n })\n }\n}\n\nimpl Breadcrumb {\n /// Create a new breadcrumb.\n pub fn new() -> Self {\n Self {\n items: Vec::new(),\n style: StyleRefinement::default(),\n }\n }\n\n /// Add an [`BreadcrumbItem`] to the breadcrumb.\n pub fn child(mut self, item: impl Into) -> Self {\n self.items.push(item.into());\n self\n }\n\n /// Add multiple [`BreadcrumbItem`] items to the breadcrumb.\n pub fn children(mut self, items: impl IntoIterator>) -> Self {\n self.items.extend(items.into_iter().map(Into::into));\n self\n }\n}\n\n#[derive(IntoElement)]\nstruct BreadcrumbSeparator;\nimpl RenderOnce for BreadcrumbSeparator {\n fn render(self, _: &mut Window, cx: &mut App) -> impl IntoElement {\n Icon::new(IconName::ChevronRight)\n .text_color(cx.theme().muted_foreground)\n .size_3p5()\n .into_any_element()\n }\n}\n\nimpl Styled for Breadcrumb {\n fn style(&mut self) -> &mut StyleRefinement {\n &mut self.style\n }\n}\n\nimpl RenderOnce for Breadcrumb {\n fn render(self, _: &mut Window, cx: &mut App) -> impl IntoElement {\n let items_count = self.items.len();\n\n let mut children = vec![];\n for (ix, item) in self.items.into_iter().enumerate() {\n let is_last = ix == items_count - 1;\n\n let item = item.id(ix);\n children.push(item.is_last(is_last).into_any_element());\n if !is_last {\n children.push(BreadcrumbSeparator.into_any_element());\n }\n }\n\n h_flex()\n .gap_1p5()\n .text_sm()\n .text_color(cx.theme().muted_foreground)\n .refine_style(&self.style)\n .children(children)\n }\n}\n" }, { "path": "crates/ui/src/button/button.rs", "content": "use std::rc::Rc;\n\nuse crate::{\n ActiveTheme, Colorize as _, Disableable, FocusableExt as _, Icon, IconName, Selectable,\n Sizable, Size, StyleSized, StyledExt, button::ButtonIcon, h_flex, tooltip::Tooltip,\n};\nuse gpui::{\n Action, AnyElement, App, ClickEvent, Corners, Div, Edges, ElementId, Hsla, InteractiveElement,\n Interactivity, IntoElement, MouseButton, ParentElement, Pixels, RenderOnce, SharedString,\n Stateful, StatefulInteractiveElement as _, StyleRefinement, Styled, Window, div,\n prelude::FluentBuilder as _, px, relative, transparent_white,\n};\n\n#[derive(Default, Clone, Copy)]\npub enum ButtonRounded {\n None,\n Small,\n #[default]\n Medium,\n Large,\n Size(Pixels),\n}\n\nimpl From for ButtonRounded {\n fn from(px: Pixels) -> Self {\n ButtonRounded::Size(px)\n }\n}\n\n#[derive(Clone, Copy, PartialEq, Eq, Debug)]\npub struct ButtonCustomVariant {\n color: Hsla,\n foreground: Hsla,\n shadow: bool,\n hover: Hsla,\n active: Hsla,\n}\n\npub trait ButtonVariants: Sized {\n fn with_variant(self, variant: ButtonVariant) -> Self;\n\n /// With the primary style for the Button.\n fn primary(self) -> Self {\n self.with_variant(ButtonVariant::Primary)\n }\n\n /// With the secondary style for the Button.\n fn secondary(self) -> Self {\n self.with_variant(ButtonVariant::Secondary)\n }\n\n /// With the danger style for the Button.\n fn danger(self) -> Self {\n self.with_variant(ButtonVariant::Danger)\n }\n\n /// With the warning style for the Button.\n fn warning(self) -> Self {\n self.with_variant(ButtonVariant::Warning)\n }\n\n /// With the success style for the Button.\n fn success(self) -> Self {\n self.with_variant(ButtonVariant::Success)\n }\n\n /// With the info style for the Button.\n fn info(self) -> Self {\n self.with_variant(ButtonVariant::Info)\n }\n\n /// With the ghost style for the Button.\n fn ghost(self) -> Self {\n self.with_variant(ButtonVariant::Ghost)\n }\n\n /// With the link style for the Button.\n fn link(self) -> Self {\n self.with_variant(ButtonVariant::Link)\n }\n\n /// With the text style for the Button, it will no padding look like a normal text.\n fn text(self) -> Self {\n self.with_variant(ButtonVariant::Text)\n }\n\n /// With the custom style for the Button.\n fn custom(self, style: ButtonCustomVariant) -> Self {\n self.with_variant(ButtonVariant::Custom(style))\n }\n}\n\nimpl ButtonCustomVariant {\n pub fn new(cx: &App) -> Self {\n Self {\n color: cx.theme().transparent,\n foreground: cx.theme().foreground,\n hover: cx.theme().transparent,\n active: cx.theme().transparent,\n shadow: false,\n }\n }\n\n /// Set background color, default is transparent.\n pub fn color(mut self, color: Hsla) -> Self {\n self.color = color;\n self\n }\n\n /// Set foreground color, default is theme foreground.\n pub fn foreground(mut self, color: Hsla) -> Self {\n self.foreground = color;\n self\n }\n\n /// Set hover background color, default is transparent.\n pub fn hover(mut self, color: Hsla) -> Self {\n self.hover = color;\n self\n }\n\n /// Set active background color, default is transparent.\n pub fn active(mut self, color: Hsla) -> Self {\n self.active = color;\n self\n }\n\n /// Set shadow, default is false.\n pub fn shadow(mut self, shadow: bool) -> Self {\n self.shadow = shadow;\n self\n }\n}\n\n/// The variant of the Button.\n#[derive(Clone, Copy, PartialEq, Eq, Default, Debug)]\npub enum ButtonVariant {\n #[default]\n Default,\n Primary,\n Secondary,\n Danger,\n Info,\n Success,\n Warning,\n Ghost,\n Link,\n Text,\n Custom(ButtonCustomVariant),\n}\n\nimpl ButtonVariant {\n #[inline]\n pub fn is_link(&self) -> bool {\n matches!(self, Self::Link)\n }\n\n #[inline]\n pub fn is_text(&self) -> bool {\n matches!(self, Self::Text)\n }\n\n #[inline]\n pub fn is_ghost(&self) -> bool {\n matches!(self, Self::Ghost)\n }\n\n #[inline]\n fn no_padding(&self) -> bool {\n self.is_link() || self.is_text()\n }\n\n #[inline]\n fn is_default(&self) -> bool {\n matches!(self, Self::Default)\n }\n}\n\n/// A Button element.\n#[derive(IntoElement)]\npub struct Button {\n id: ElementId,\n base: Stateful
,\n style: StyleRefinement,\n icon: Option,\n label: Option,\n children: Vec,\n disabled: bool,\n pub(crate) selected: bool,\n variant: ButtonVariant,\n rounded: ButtonRounded,\n outline: bool,\n border_corners: Corners,\n border_edges: Edges,\n dropdown_caret: bool,\n size: Size,\n compact: bool,\n tooltip: Option<(\n SharedString,\n Option<(Rc>, Option)>,\n )>,\n on_click: Option>,\n on_hover: Option>,\n loading: bool,\n loading_icon: Option,\n\n tab_index: isize,\n tab_stop: bool,\n}\n\nimpl From\",\n \"

Some text

\",\n false,\n false,\n ),\n ] {\n let mut w = vec![];\n let mut minifier = Minifier::new(&mut w);\n minifier\n .omit_doctype(true)\n .collapse_whitespace(collapse_whitespace)\n .preserve_comments(preserve_comments);\n minifier.minify(&mut input.as_bytes()).unwrap();\n\n let s = str::from_utf8(&w).unwrap();\n\n assert_eq!(expected, s);\n }\n }\n}\n" }, { "path": "crates/ui/src/text/format/markdown.rs", "content": "use gpui::SharedString;\nuse markdown::{\n ParseOptions,\n mdast::{self, Node},\n};\n\nuse crate::{\n highlighter::HighlightTheme,\n text::{\n document::ParsedDocument,\n node::{\n self, BlockNode, CodeBlock, ImageNode, InlineNode, LinkMark, NodeContext, Paragraph,\n Span, Table, TableRow, TextMark,\n },\n },\n};\n\n/// Parse Markdown into a tree of nodes.\n///\n/// TODO: Remove `highlight_theme` option, this should in render stage.\npub(crate) fn parse(\n source: &str,\n cx: &mut NodeContext,\n highlight_theme: &HighlightTheme,\n) -> Result {\n markdown::to_mdast(&source, &ParseOptions::gfm())\n .map(|n| ast_to_document(source, n, cx, highlight_theme))\n .map_err(|e| e.to_string().into())\n}\n\nfn parse_table_row(table: &mut Table, node: &mdast::TableRow, cx: &mut NodeContext) {\n let mut row = TableRow::default();\n node.children.iter().for_each(|c| {\n match c {\n Node::TableCell(cell) => {\n parse_table_cell(&mut row, cell, cx);\n }\n _ => {}\n };\n });\n table.children.push(row);\n}\n\nfn parse_table_cell(row: &mut node::TableRow, node: &mdast::TableCell, cx: &mut NodeContext) {\n let mut paragraph = Paragraph::default();\n node.children.iter().for_each(|c| {\n parse_paragraph(&mut paragraph, c, cx);\n });\n let table_cell = node::TableCell {\n children: paragraph,\n ..Default::default()\n };\n row.children.push(table_cell);\n}\n\nfn parse_paragraph(paragraph: &mut Paragraph, node: &mdast::Node, cx: &mut NodeContext) -> String {\n let span = node.position().map(|pos| Span {\n start: cx.offset + pos.start.offset,\n end: cx.offset + pos.end.offset,\n });\n if let Some(span) = span {\n paragraph.set_span(span);\n }\n\n let mut text = String::new();\n\n match node {\n Node::Paragraph(val) => {\n val.children.iter().for_each(|c| {\n text.push_str(&parse_paragraph(paragraph, c, cx));\n });\n }\n Node::Text(val) => {\n text = val.value.clone();\n paragraph.push_str(&val.value)\n }\n Node::Emphasis(val) => {\n let mut child_paragraph = Paragraph::default();\n for child in val.children.iter() {\n text.push_str(&parse_paragraph(&mut child_paragraph, &child, cx));\n }\n paragraph.push(\n InlineNode::new(&text).marks(vec![(0..text.len(), TextMark::default().italic())]),\n );\n }\n Node::Strong(val) => {\n let mut child_paragraph = Paragraph::default();\n for child in val.children.iter() {\n text.push_str(&parse_paragraph(&mut child_paragraph, &child, cx));\n }\n paragraph.push(\n InlineNode::new(&text).marks(vec![(0..text.len(), TextMark::default().bold())]),\n );\n }\n Node::Delete(val) => {\n let mut child_paragraph = Paragraph::default();\n for child in val.children.iter() {\n text.push_str(&parse_paragraph(&mut child_paragraph, &child, cx));\n }\n paragraph.push(\n InlineNode::new(&text)\n .marks(vec![(0..text.len(), TextMark::default().strikethrough())]),\n );\n }\n Node::InlineCode(val) => {\n text = val.value.clone();\n paragraph.push(\n InlineNode::new(&text).marks(vec![(0..text.len(), TextMark::default().code())]),\n );\n }\n Node::Link(val) => {\n let link_mark = Some(LinkMark {\n url: val.url.clone().into(),\n title: val.title.clone().map(|s| s.into()),\n ..Default::default()\n });\n\n let mut child_paragraph = Paragraph::default();\n for child in val.children.iter() {\n text.push_str(&parse_paragraph(&mut child_paragraph, &child, cx));\n }\n\n // FIXME: GPUI InteractiveText does not support inline images yet.\n // So here we push images to the paragraph directly.\n for child in child_paragraph.children.iter_mut() {\n if let Some(image) = child.image.as_mut() {\n image.link = link_mark.clone();\n }\n\n child.marks.push((\n 0..child.text.len(),\n TextMark {\n link: link_mark.clone(),\n ..Default::default()\n },\n ));\n }\n\n paragraph.merge(child_paragraph);\n }\n Node::Image(raw) => {\n paragraph.push_image(ImageNode {\n url: raw.url.clone().into(),\n title: raw.title.clone().map(|t| t.into()),\n alt: Some(raw.alt.clone().into()),\n ..Default::default()\n });\n }\n Node::InlineMath(raw) => {\n text = raw.value.clone();\n paragraph.push(\n InlineNode::new(&text).marks(vec![(0..text.len(), TextMark::default().code())]),\n );\n }\n Node::MdxTextExpression(raw) => {\n text = raw.value.clone();\n paragraph\n .push(InlineNode::new(&text).marks(vec![(0..text.len(), TextMark::default())]));\n }\n Node::Html(val) => match super::html::parse(&val.value, cx) {\n Ok(el) => {\n if el\n .blocks\n .first()\n .map(|node| node.is_break())\n .unwrap_or(false)\n {\n text = \"\\n\".to_owned();\n paragraph.push(InlineNode::new(&text));\n } else {\n if cfg!(debug_assertions) {\n tracing::warn!(\"unsupported inline html tag: {:#?}\", el);\n }\n }\n }\n Err(err) => {\n if cfg!(debug_assertions) {\n tracing::warn!(\"failed parsing html: {:#?}\", err);\n }\n\n text.push_str(&val.value);\n }\n },\n Node::FootnoteReference(foot) => {\n let prefix = format!(\"[{}]\", foot.identifier);\n paragraph.push(InlineNode::new(&prefix).marks(vec![(\n 0..prefix.len(),\n TextMark {\n italic: true,\n ..Default::default()\n },\n )]));\n }\n Node::LinkReference(link) => {\n let mut child_paragraph = Paragraph::default();\n let mut child_text = String::new();\n for child in link.children.iter() {\n child_text.push_str(&parse_paragraph(&mut child_paragraph, child, cx));\n }\n\n let link_mark = LinkMark {\n url: \"\".into(),\n title: link.label.clone().map(Into::into),\n identifier: Some(link.identifier.clone().into()),\n };\n\n paragraph.push(InlineNode::new(&child_text).marks(vec![(\n 0..child_text.len(),\n TextMark {\n link: Some(link_mark),\n ..Default::default()\n },\n )]));\n }\n _ => {\n if cfg!(debug_assertions) {\n tracing::warn!(\"unsupported inline node: {:#?}\", node);\n }\n }\n }\n\n text\n}\n\nfn ast_to_document(\n source: &str,\n root: mdast::Node,\n cx: &mut NodeContext,\n highlight_theme: &HighlightTheme,\n) -> ParsedDocument {\n let root = match root {\n Node::Root(r) => r,\n _ => panic!(\"expected root node\"),\n };\n\n let blocks = root\n .children\n .into_iter()\n .map(|c| ast_to_node(c, cx, highlight_theme))\n .collect();\n ParsedDocument {\n source: source.to_string().into(),\n blocks,\n }\n}\n\nfn new_span(pos: Option, cx: &NodeContext) -> Option {\n let pos = pos?;\n\n Some(Span {\n start: cx.offset + pos.start.offset,\n end: cx.offset + pos.end.offset,\n })\n}\n\nfn ast_to_node(\n value: mdast::Node,\n cx: &mut NodeContext,\n highlight_theme: &HighlightTheme,\n) -> BlockNode {\n match value {\n Node::Root(_) => unreachable!(\"node::Root should be handled separately\"),\n Node::Paragraph(val) => {\n let mut paragraph = Paragraph::default();\n val.children.iter().for_each(|c| {\n parse_paragraph(&mut paragraph, c, cx);\n });\n paragraph.span = new_span(val.position, cx);\n BlockNode::Paragraph(paragraph)\n }\n Node::Blockquote(val) => {\n let children = val\n .children\n .into_iter()\n .map(|c| ast_to_node(c, cx, highlight_theme))\n .collect();\n BlockNode::Blockquote {\n children,\n span: new_span(val.position, cx),\n }\n }\n Node::List(list) => {\n let children = list\n .children\n .into_iter()\n .map(|c| ast_to_node(c, cx, highlight_theme))\n .collect();\n BlockNode::List {\n ordered: list.ordered,\n children,\n span: new_span(list.position, cx),\n }\n }\n Node::ListItem(val) => {\n let children = val\n .children\n .into_iter()\n .map(|c| ast_to_node(c, cx, highlight_theme))\n .collect();\n BlockNode::ListItem {\n children,\n spread: val.spread,\n checked: val.checked,\n span: new_span(val.position, cx),\n }\n }\n Node::Break(val) => BlockNode::Break {\n html: false,\n span: new_span(val.position, cx),\n },\n Node::Code(raw) => BlockNode::CodeBlock(CodeBlock::new(\n raw.value.into(),\n raw.lang.map(|s| s.into()),\n highlight_theme,\n new_span(raw.position, cx),\n )),\n Node::Heading(val) => {\n let mut paragraph = Paragraph::default();\n val.children.iter().for_each(|c| {\n parse_paragraph(&mut paragraph, c, cx);\n });\n\n BlockNode::Heading {\n level: val.depth,\n children: paragraph,\n span: new_span(val.position, cx),\n }\n }\n Node::Math(val) => BlockNode::CodeBlock(CodeBlock::new(\n val.value.into(),\n None,\n highlight_theme,\n new_span(val.position, cx),\n )),\n Node::Html(val) => match super::html::parse(&val.value, cx) {\n Ok(el) => BlockNode::Root {\n children: el.blocks,\n span: new_span(val.position, cx),\n },\n Err(err) => {\n if cfg!(debug_assertions) {\n tracing::warn!(\"error parsing html: {:#?}\", err);\n }\n\n BlockNode::Paragraph(Paragraph::new(val.value))\n }\n },\n Node::MdxFlowExpression(val) => BlockNode::CodeBlock(CodeBlock::new(\n val.value.into(),\n Some(\"mdx\".into()),\n highlight_theme,\n new_span(val.position, cx),\n )),\n Node::Yaml(val) => BlockNode::CodeBlock(CodeBlock::new(\n val.value.into(),\n Some(\"yml\".into()),\n highlight_theme,\n new_span(val.position, cx),\n )),\n Node::Toml(val) => BlockNode::CodeBlock(CodeBlock::new(\n val.value.into(),\n Some(\"toml\".into()),\n highlight_theme,\n new_span(val.position, cx),\n )),\n Node::MdxJsxTextElement(val) => {\n let mut paragraph = Paragraph::default();\n val.children.iter().for_each(|c| {\n parse_paragraph(&mut paragraph, c, cx);\n });\n paragraph.span = new_span(val.position, cx);\n BlockNode::Paragraph(paragraph)\n }\n Node::MdxJsxFlowElement(val) => {\n let mut paragraph = Paragraph::default();\n val.children.iter().for_each(|c| {\n parse_paragraph(&mut paragraph, c, cx);\n });\n paragraph.span = new_span(val.position, cx);\n BlockNode::Paragraph(paragraph)\n }\n Node::ThematicBreak(val) => BlockNode::Divider {\n span: new_span(val.position, cx),\n },\n Node::Table(val) => {\n let mut table = Table::default();\n table.column_aligns = val\n .align\n .clone()\n .into_iter()\n .map(|align| align.into())\n .collect();\n val.children.iter().for_each(|c| {\n if let Node::TableRow(row) = c {\n parse_table_row(&mut table, row, cx);\n }\n });\n table.span = new_span(val.position, cx);\n\n BlockNode::Table(table)\n }\n Node::FootnoteDefinition(def) => {\n let mut paragraph = Paragraph::default();\n let prefix = format!(\"[{}]: \", def.identifier);\n paragraph.push(InlineNode::new(&prefix).marks(vec![(\n 0..prefix.len(),\n TextMark {\n italic: true,\n ..Default::default()\n },\n )]));\n\n def.children.iter().for_each(|c| {\n parse_paragraph(&mut paragraph, c, cx);\n });\n paragraph.span = new_span(def.position, cx);\n BlockNode::Paragraph(paragraph)\n }\n Node::Definition(def) => {\n cx.add_ref(\n def.identifier.clone().into(),\n LinkMark {\n url: def.url.clone().into(),\n identifier: Some(def.identifier.clone().into()),\n title: def.title.clone().map(Into::into),\n },\n );\n\n BlockNode::Definition {\n identifier: def.identifier.clone().into(),\n url: def.url.clone().into(),\n title: def.title.clone().map(|s| s.into()),\n span: new_span(def.position, cx),\n }\n }\n _ => {\n if cfg!(debug_assertions) {\n tracing::warn!(\"unsupported node: {:#?}\", value);\n }\n BlockNode::Unknown\n }\n }\n}\n" }, { "path": "crates/ui/src/text/format/mod.rs", "content": "pub(super) mod html;\nmod html5minify;\npub(super) mod markdown;\n" }, { "path": "crates/ui/src/text/inline.rs", "content": "use std::{\n ops::Range,\n rc::Rc,\n sync::{Arc, Mutex},\n};\n\nuse gpui::{\n App, BorderStyle, Bounds, CursorStyle, Edges, Element, ElementId, GlobalElementId, Half,\n HighlightStyle, Hitbox, HitboxBehavior, InspectorElementId, IntoElement, LayoutId,\n MouseMoveEvent, MouseUpEvent, Pixels, Point, SharedString, StyledText, TextLayout, Window,\n point, px, quad,\n};\n\nuse crate::{ActiveTheme, global_state::GlobalState, input::Selection, text::node::LinkMark};\n\n/// A inline element used to render a inline text and support selectable.\n///\n/// All text in TextView (including the CodeBlock) used this for text rendering.\npub(super) struct Inline {\n id: ElementId,\n text: SharedString,\n links: Rc, LinkMark)>>,\n highlights: Vec<(Range, HighlightStyle)>,\n styled_text: StyledText,\n\n state: Arc>,\n}\n\n/// The inline text state, used RefCell to keep the selection state.\n#[derive(Debug, Default, PartialEq)]\npub(crate) struct InlineState {\n hovered_index: Option,\n /// The text that actually rendering, matched with selection.\n pub(super) text: SharedString,\n pub(super) selection: Option,\n}\n\nimpl InlineState {\n /// Save actually rendered text for selected text to use.\n pub(crate) fn set_text(&mut self, text: SharedString) {\n self.text = text;\n }\n}\n\nimpl Inline {\n pub(super) fn new(\n id: impl Into,\n state: Arc>,\n links: Vec<(Range, LinkMark)>,\n highlights: Vec<(Range, HighlightStyle)>,\n ) -> Self {\n let text = state.lock().unwrap().text.clone();\n Self {\n id: id.into(),\n links: Rc::new(links),\n highlights,\n text: text.clone(),\n styled_text: StyledText::new(text),\n state,\n }\n }\n\n /// Get link at given mouse position.\n fn link_for_position(\n layout: &TextLayout,\n links: &Vec<(Range, LinkMark)>,\n position: Point,\n ) -> Option {\n let offset = layout.index_for_position(position).ok()?;\n for (range, link) in links.iter() {\n if range.contains(&offset) {\n return Some(link.clone());\n }\n }\n\n None\n }\n\n /// Paint selected bounds for debug.\n #[allow(unused)]\n fn paint_selected_bounds(&self, bounds: Bounds, window: &mut Window, cx: &mut App) {\n window.paint_quad(gpui::PaintQuad {\n bounds,\n background: cx.theme().blue.alpha(0.01).into(),\n corner_radii: gpui::Corners::default(),\n border_color: gpui::transparent_black(),\n border_style: BorderStyle::default(),\n border_widths: gpui::Edges::all(px(0.)),\n });\n }\n\n fn layout_selections(\n &self,\n text_layout: &TextLayout,\n window: &mut Window,\n cx: &mut App,\n ) -> (bool, bool, Option) {\n let Some(text_view_state) = GlobalState::global(cx).text_view_state() else {\n return (false, false, None);\n };\n\n let text_view_state = text_view_state.read(cx);\n let is_selectable = text_view_state.is_selectable();\n if !text_view_state.has_selection() {\n return (is_selectable, false, None);\n }\n\n let Some((selection_start, selection_end)) = text_view_state.selection_points() else {\n return (is_selectable, false, None);\n };\n let line_height = window.line_height();\n\n // Use for debug selection bounds\n // self.paint_selected_bounds(Bounds::from_corners(selection_start, selection_end), window, cx);\n\n let mut selection: Option = None;\n let mut offset = 0;\n let mut chars = self.text.chars().peekable();\n while let Some(c) = chars.next() {\n let Some(pos) = text_layout.position_for_index(offset) else {\n offset += c.len_utf8();\n continue;\n };\n\n let mut char_width = line_height.half();\n if let Some(next_pos) = text_layout.position_for_index(offset + 1) {\n if next_pos.y == pos.y {\n char_width = next_pos.x - pos.x;\n }\n }\n\n if point_in_text_selection(pos, char_width, selection_start, selection_end, line_height)\n {\n if selection.is_none() {\n selection = Some((offset..offset).into());\n }\n\n let next_offset = offset + c.len_utf8();\n selection.as_mut().unwrap().end = next_offset;\n }\n\n offset += c.len_utf8();\n }\n\n (true, true, selection)\n }\n\n /// Paint the selection background.\n fn paint_selection(\n selection: &Selection,\n text_layout: &TextLayout,\n bounds: &Bounds,\n window: &mut Window,\n cx: &mut App,\n ) {\n let mut start = selection.start;\n let mut end = selection.end;\n if end < start {\n std::mem::swap(&mut start, &mut end);\n }\n let Some(start_position) = text_layout.position_for_index(start) else {\n return;\n };\n let Some(end_position) = text_layout.position_for_index(end) else {\n return;\n };\n\n let line_height = text_layout.line_height();\n if start_position.y == end_position.y {\n window.paint_quad(quad(\n Bounds::from_corners(\n start_position,\n point(end_position.x, end_position.y + line_height),\n ),\n px(0.),\n cx.theme().selection,\n Edges::default(),\n gpui::transparent_black(),\n BorderStyle::default(),\n ));\n } else {\n window.paint_quad(quad(\n Bounds::from_corners(\n start_position,\n point(bounds.right(), start_position.y + line_height),\n ),\n px(0.),\n cx.theme().selection,\n Edges::default(),\n gpui::transparent_black(),\n BorderStyle::default(),\n ));\n\n if end_position.y > start_position.y + line_height {\n window.paint_quad(quad(\n Bounds::from_corners(\n point(bounds.left(), start_position.y + line_height),\n point(bounds.right(), end_position.y),\n ),\n px(0.),\n cx.theme().selection,\n Edges::default(),\n gpui::transparent_black(),\n BorderStyle::default(),\n ));\n }\n\n window.paint_quad(quad(\n Bounds::from_corners(\n point(bounds.left(), end_position.y),\n point(end_position.x, end_position.y + line_height),\n ),\n px(0.),\n cx.theme().selection,\n Edges::default(),\n gpui::transparent_black(),\n BorderStyle::default(),\n ));\n }\n }\n}\n\nimpl IntoElement for Inline {\n type Element = Self;\n\n fn into_element(self) -> Self::Element {\n self\n }\n}\n\nimpl Element for Inline {\n type RequestLayoutState = ();\n type PrepaintState = Hitbox;\n\n fn id(&self) -> Option {\n Some(self.id.clone())\n }\n\n fn source_location(&self) -> Option<&'static std::panic::Location<'static>> {\n None\n }\n\n fn request_layout(\n &mut self,\n global_element_id: Option<&GlobalElementId>,\n inspector_id: Option<&InspectorElementId>,\n window: &mut Window,\n cx: &mut App,\n ) -> (LayoutId, Self::RequestLayoutState) {\n let text_style = window.text_style();\n\n let mut runs = Vec::new();\n let mut ix = 0;\n for (range, highlight) in self.highlights.iter() {\n if ix < range.start {\n runs.push(text_style.clone().to_run(range.start - ix));\n }\n runs.push(text_style.clone().highlight(*highlight).to_run(range.len()));\n ix = range.end;\n }\n if ix < self.text.len() {\n runs.push(text_style.to_run(self.text.len() - ix));\n }\n\n self.styled_text = StyledText::new(self.text.clone()).with_runs(runs);\n let (layout_id, _) =\n self.styled_text\n .request_layout(global_element_id, inspector_id, window, cx);\n\n (layout_id, ())\n }\n\n fn prepaint(\n &mut self,\n id: Option<&GlobalElementId>,\n inspector_id: Option<&InspectorElementId>,\n bounds: Bounds,\n _: &mut Self::RequestLayoutState,\n window: &mut Window,\n cx: &mut App,\n ) -> Self::PrepaintState {\n self.styled_text\n .prepaint(id, inspector_id, bounds, &mut (), window, cx);\n\n let hitbox = window.insert_hitbox(bounds, HitboxBehavior::Normal);\n hitbox\n }\n\n fn paint(\n &mut self,\n global_id: Option<&GlobalElementId>,\n _: Option<&InspectorElementId>,\n bounds: Bounds,\n _: &mut Self::RequestLayoutState,\n prepaint: &mut Self::PrepaintState,\n window: &mut Window,\n cx: &mut App,\n ) {\n let current_view = window.current_view();\n let hitbox = prepaint;\n let mut state = self.state.lock().unwrap();\n\n let text_layout = self.styled_text.layout().clone();\n self.styled_text\n .paint(global_id, None, bounds, &mut (), &mut (), window, cx);\n\n // layout selections\n let (is_selectable, is_selection, selection) =\n self.layout_selections(&text_layout, window, cx);\n\n state.selection = selection;\n\n if is_selection || is_selectable {\n window.set_cursor_style(CursorStyle::IBeam, &hitbox);\n }\n\n // link cursor pointer\n let mouse_position = window.mouse_position();\n if let Some(_) = Self::link_for_position(&text_layout, &self.links, mouse_position) {\n window.set_cursor_style(CursorStyle::PointingHand, &hitbox);\n }\n\n if let Some(selection) = &state.selection {\n Self::paint_selection(selection, &text_layout, &bounds, window, cx);\n }\n\n // mouse move, update hovered link\n window.on_mouse_event({\n let hitbox = hitbox.clone();\n let text_layout = text_layout.clone();\n let mut hovered_index = state.hovered_index;\n move |event: &MouseMoveEvent, phase, window, cx| {\n if !phase.bubble() || !hitbox.is_hovered(window) {\n return;\n }\n\n let current = hovered_index;\n let updated = text_layout.index_for_position(event.position).ok();\n // notify update when hovering over different links\n if current != updated {\n hovered_index = updated;\n cx.notify(current_view);\n }\n }\n });\n\n if !is_selection {\n // click to open link\n window.on_mouse_event({\n let links = self.links.clone();\n let text_layout = text_layout.clone();\n let hitbox = hitbox.clone();\n\n move |event: &MouseUpEvent, phase, window, cx| {\n if !phase.bubble() || !hitbox.is_hovered(window) {\n return;\n }\n\n if let Some(link) =\n Self::link_for_position(&text_layout, &links, event.position)\n {\n cx.stop_propagation();\n cx.open_url(&link.url);\n }\n }\n });\n }\n }\n}\n\n/// Check if a `pos` is within a `bounds`, considering multi-line selections.\nfn point_in_text_selection(\n pos: Point,\n char_width: Pixels,\n selection_start: Point,\n selection_end: Point,\n line_height: Pixels,\n) -> bool {\n let point_in_line = |point: Point| point.y >= pos.y && point.y < pos.y + line_height;\n let top = selection_start.y.min(selection_end.y);\n let bottom = selection_start.y.max(selection_end.y);\n let x = pos.x + char_width.half();\n\n // Out of the vertical bounds\n if pos.y + line_height <= top || pos.y > bottom {\n return false;\n }\n\n // Treat the selection as single-line when both drag points fall within the\n // same rendered line, even if their y coordinates differ inside that line.\n if point_in_line(selection_start) && point_in_line(selection_end) {\n let left = selection_start.x.min(selection_end.x);\n let right = selection_start.x.max(selection_end.x);\n return x >= left && x <= right;\n }\n\n let (top_point, bottom_point) = if selection_start.y < selection_end.y {\n (selection_start, selection_end)\n } else {\n (selection_end, selection_start)\n };\n let is_top_line = point_in_line(top_point);\n let is_bottom_line = point_in_line(bottom_point);\n\n if is_top_line {\n return x >= top_point.x;\n } else if is_bottom_line {\n return x <= bottom_point.x;\n } else {\n return true;\n }\n}\n\n#[cfg(test)]\nmod tests {\n use super::point_in_text_selection;\n use gpui::{point, px};\n\n #[test]\n fn test_point_in_text_selection() {\n let line_height = px(20.);\n let char_width = px(10.);\n let start = point(px(50.), px(50.));\n let end = point(px(150.), px(150.));\n\n // First line but haft line height, true\n // | p --------|\n // | selection |\n // |-----------|\n assert!(point_in_text_selection(\n point(px(50.), px(40.)),\n char_width,\n start,\n end,\n line_height\n ));\n\n // First line in selection, true\n // | p --------|\n // | selection |\n // |-----------|\n assert!(point_in_text_selection(\n point(px(50.), px(50.)),\n char_width,\n start,\n end,\n line_height\n ));\n // First line, but left out of selection, false\n // p |-----------|\n // | selection |\n // |-----------|\n assert!(!point_in_text_selection(\n point(px(40.), px(50.)),\n char_width,\n start,\n end,\n line_height\n ));\n // First line but right out of selection, true\n // |-----------| p\n // | selection |\n // |-----------|\n assert!(point_in_text_selection(\n point(px(160.), px(50.)),\n char_width,\n start,\n end,\n line_height\n ));\n\n // Middle line in selection, true\n // |-----------|\n // | p |\n // |-----------|\n assert!(point_in_text_selection(\n point(px(100.), px(70.)),\n char_width,\n start,\n end,\n line_height\n ));\n // Middle line, but left out of selection, true\n // |-----------|\n // p | selection |\n // |-----------|\n assert!(point_in_text_selection(\n point(px(40.), px(70.)),\n char_width,\n start,\n end,\n line_height\n ));\n // Middle line, but right out of selection, true\n // |-----------|\n // | selection | p\n // |-----------|\n assert!(point_in_text_selection(\n point(px(160.), px(70.)),\n char_width,\n start,\n end,\n line_height\n ));\n\n // Last line in selection, true\n // |-----------|\n // | selection |\n // |------- p -|\n assert!(point_in_text_selection(\n point(px(100.), px(140.)),\n char_width,\n start,\n end,\n line_height\n ));\n // Last line, but left out of selection, true\n //\n // |-----------|\n // | selection |\n // p |-----------|\n assert!(point_in_text_selection(\n point(px(40.), px(140.)),\n char_width,\n start,\n end,\n line_height\n ));\n // Last line, but right out of selection, false\n // |-----------|\n // | selection |\n // |-----------| p\n assert!(!point_in_text_selection(\n point(px(160.), px(140.)),\n char_width,\n start,\n end,\n line_height\n ));\n\n // Out of vertical bounds (top), false\n // p\n // |-----------|\n // | selection |\n // |-----------|\n assert!(!point_in_text_selection(\n point(px(100.), px(20.)),\n char_width,\n start,\n end,\n line_height\n ));\n // Out of vertical bounds (bottom), false\n // |-----------|\n // | selection |\n // |-----------|\n // p\n assert!(!point_in_text_selection(\n point(px(100.), px(160.)),\n char_width,\n start,\n end,\n line_height\n ));\n }\n\n #[test]\n fn test_point_in_text_selection_reversed_drag_direction() {\n let line_height = px(20.);\n let char_width = px(10.);\n\n // Mouse down on lower line then drag upward to x=150.\n // Top line should follow current mouse x, bottom line should keep anchor x.\n let start = point(px(80.), px(150.));\n let end = point(px(150.), px(50.));\n\n // On top line, selection starts from top cursor x (150), so x=140 should be excluded.\n assert!(!point_in_text_selection(\n point(px(140.), px(50.)),\n char_width,\n start,\n end,\n line_height\n ));\n assert!(point_in_text_selection(\n point(px(150.), px(50.)),\n char_width,\n start,\n end,\n line_height\n ));\n\n // On bottom line, selection ends at anchor x (80), so x=90 should be excluded.\n assert!(point_in_text_selection(\n point(px(75.), px(140.)),\n char_width,\n start,\n end,\n line_height\n ));\n assert!(!point_in_text_selection(\n point(px(80.), px(140.)),\n char_width,\n start,\n end,\n line_height\n ));\n }\n\n #[test]\n fn test_point_in_text_selection_same_visual_line_with_different_y() {\n let line_height = px(20.);\n let char_width = px(10.);\n let start = point(px(100.), px(55.));\n let end = point(px(60.), px(58.));\n\n assert!(!point_in_text_selection(\n point(px(40.), px(50.)),\n char_width,\n start,\n end,\n line_height\n ));\n assert!(point_in_text_selection(\n point(px(70.), px(50.)),\n char_width,\n start,\n end,\n line_height\n ));\n assert!(!point_in_text_selection(\n point(px(110.), px(50.)),\n char_width,\n start,\n end,\n line_height\n ));\n }\n\n #[test]\n fn test_point_in_text_selection_same_visual_line_with_reversed_y() {\n let line_height = px(20.);\n let char_width = px(10.);\n let start = point(px(60.), px(58.));\n let end = point(px(100.), px(55.));\n\n assert!(!point_in_text_selection(\n point(px(40.), px(50.)),\n char_width,\n start,\n end,\n line_height\n ));\n assert!(point_in_text_selection(\n point(px(70.), px(50.)),\n char_width,\n start,\n end,\n line_height\n ));\n assert!(!point_in_text_selection(\n point(px(110.), px(50.)),\n char_width,\n start,\n end,\n line_height\n ));\n }\n}\n" }, { "path": "crates/ui/src/text/mod.rs", "content": "mod document;\nmod format;\nmod inline;\nmod node;\nmod state;\nmod style;\nmod text_view;\nmod utils;\n\nuse gpui::{App, ElementId, IntoElement, RenderOnce, SharedString, Window};\npub use state::*;\npub use style::*;\npub use text_view::*;\n\npub(crate) fn init(cx: &mut App) {\n state::init(cx);\n}\n\n/// Create a new markdown text view with code location as id.\n#[track_caller]\npub fn markdown(source: impl Into) -> TextView {\n let id: ElementId = ElementId::CodeLocation(*std::panic::Location::caller());\n TextView::markdown(id, source)\n}\n\n/// Create a new html text view with code location as id.\n#[track_caller]\npub fn html(source: impl Into) -> TextView {\n let id: ElementId = ElementId::CodeLocation(*std::panic::Location::caller());\n TextView::html(id, source)\n}\n\n#[derive(IntoElement, Clone)]\npub enum Text {\n String(SharedString),\n TextView(Box),\n}\n\nimpl From for Text {\n fn from(s: SharedString) -> Self {\n Self::String(s)\n }\n}\n\nimpl From<&str> for Text {\n fn from(s: &str) -> Self {\n Self::String(SharedString::from(s.to_string()))\n }\n}\n\nimpl From for Text {\n fn from(s: String) -> Self {\n Self::String(s.into())\n }\n}\n\nimpl From for Text {\n fn from(e: TextView) -> Self {\n Self::TextView(Box::new(e))\n }\n}\n\nimpl Text {\n /// Set the style for [`TextView`].\n ///\n /// Do nothing if this is `String`.\n pub fn style(self, style: TextViewStyle) -> Self {\n match self {\n Self::String(s) => Self::String(s),\n Self::TextView(e) => Self::TextView(Box::new(e.style(style))),\n }\n }\n\n /// Get the text content.\n pub(crate) fn get_text(&self, cx: &App) -> SharedString {\n match self {\n Self::String(s) => s.clone(),\n Self::TextView(view) => {\n if let Some(state) = &view.state {\n state.read(cx).source()\n } else {\n SharedString::default()\n }\n }\n }\n }\n}\n\nimpl RenderOnce for Text {\n fn render(self, _: &mut Window, _: &mut App) -> impl IntoElement {\n match self {\n Self::String(s) => s.into_any_element(),\n Self::TextView(e) => e.into_any_element(),\n }\n }\n}\n" }, { "path": "crates/ui/src/text/node.rs", "content": "use std::{\n collections::HashMap,\n ops::Range,\n sync::{Arc, Mutex},\n};\n\nuse gpui::{\n AnyElement, App, DefiniteLength, Div, ElementId, FontStyle, FontWeight, Half, HighlightStyle,\n InteractiveElement as _, IntoElement, Length, ObjectFit, ParentElement, SharedString,\n SharedUri, StatefulInteractiveElement, Styled, StyledImage as _, Window, div, img,\n prelude::FluentBuilder as _, px, relative, rems,\n};\nuse markdown::mdast;\nuse ropey::Rope;\n\nuse crate::{\n ActiveTheme as _, Icon, IconName, StyledExt, h_flex,\n highlighter::{HighlightTheme, SyntaxHighlighter},\n text::{\n CodeBlockActionsFn,\n document::NodeRenderOptions,\n inline::{Inline, InlineState},\n },\n tooltip::Tooltip,\n v_flex,\n};\n\nuse super::{TextViewStyle, utils::list_item_prefix};\n\n/// The block-level nodes.\n#[derive(Debug, Clone, PartialEq)]\npub(crate) enum BlockNode {\n /// Something like a Div container in HTML.\n Root {\n children: Vec,\n span: Option,\n },\n Paragraph(Paragraph),\n Heading {\n level: u8,\n children: Paragraph,\n span: Option,\n },\n Blockquote {\n children: Vec,\n span: Option,\n },\n List {\n /// Only contains ListItem, others will be ignored\n children: Vec,\n ordered: bool,\n span: Option,\n },\n ListItem {\n children: Vec,\n spread: bool,\n /// Whether the list item is checked, if None, it's not a checkbox\n checked: Option,\n span: Option,\n },\n CodeBlock(CodeBlock),\n Table(Table),\n Break {\n html: bool,\n span: Option,\n },\n Divider {\n span: Option,\n },\n /// Use for to_markdown get raw definition\n Definition {\n identifier: SharedString,\n url: SharedString,\n title: Option,\n span: Option,\n },\n Unknown,\n}\n\nimpl BlockNode {\n pub(super) fn is_list_item(&self) -> bool {\n matches!(self, Self::ListItem { .. })\n }\n\n pub(super) fn is_break(&self) -> bool {\n matches!(self, Self::Break { .. })\n }\n\n /// Combine all children, omitting the empt parent nodes.\n pub(super) fn compact(self) -> BlockNode {\n match self {\n Self::Root { mut children, .. } if children.len() == 1 => children.remove(0).compact(),\n _ => self,\n }\n }\n\n /// Get the span of the node.\n pub(super) fn span(&self) -> Option {\n match self {\n BlockNode::Root { span, .. } => *span,\n BlockNode::Paragraph(paragraph) => paragraph.span,\n BlockNode::Heading { span, .. } => *span,\n BlockNode::Blockquote { span, .. } => *span,\n BlockNode::List { span, .. } => *span,\n BlockNode::ListItem { span, .. } => *span,\n BlockNode::CodeBlock(code_block) => code_block.span,\n BlockNode::Table(table) => table.span,\n BlockNode::Break { span, .. } => *span,\n BlockNode::Divider { span, .. } => *span,\n BlockNode::Definition { span, .. } => *span,\n BlockNode::Unknown { .. } => None,\n }\n }\n\n pub(super) fn selected_text(&self) -> String {\n let mut text = String::new();\n match self {\n BlockNode::Root { children, .. } => {\n let mut block_text = String::new();\n for c in children.iter() {\n block_text.push_str(&c.selected_text());\n }\n if !block_text.is_empty() {\n text.push_str(&block_text);\n text.push('\\n');\n }\n }\n BlockNode::Paragraph(paragraph) => {\n let mut block_text = String::new();\n block_text.push_str(¶graph.selected_text());\n if !block_text.is_empty() {\n text.push_str(&block_text);\n text.push('\\n');\n }\n }\n BlockNode::Heading { children, .. } => {\n let mut block_text = String::new();\n block_text.push_str(&children.selected_text());\n if !block_text.is_empty() {\n text.push_str(&block_text);\n text.push('\\n');\n }\n }\n BlockNode::List { children, .. } => {\n for c in children.iter() {\n text.push_str(&c.selected_text());\n }\n }\n BlockNode::ListItem { children, .. } => {\n for c in children.iter() {\n text.push_str(&c.selected_text());\n }\n }\n BlockNode::Blockquote { children, .. } => {\n let mut block_text = String::new();\n for c in children.iter() {\n block_text.push_str(&c.selected_text());\n }\n\n if !block_text.is_empty() {\n text.push_str(&block_text);\n text.push('\\n');\n }\n }\n BlockNode::Table(table) => {\n let mut block_text = String::new();\n for row in table.children.iter() {\n let mut row_texts = vec![];\n for cell in row.children.iter() {\n row_texts.push(cell.children.selected_text());\n }\n if !row_texts.is_empty() {\n block_text.push_str(&row_texts.join(\" \"));\n block_text.push('\\n');\n }\n }\n\n if !block_text.is_empty() {\n text.push_str(&block_text);\n text.push('\\n');\n }\n }\n BlockNode::CodeBlock(code_block) => {\n let block_text = code_block.selected_text();\n if !block_text.is_empty() {\n text.push_str(&block_text);\n text.push('\\n');\n }\n }\n BlockNode::Definition { .. }\n | BlockNode::Break { .. }\n | BlockNode::Divider { .. }\n | BlockNode::Unknown { .. } => {}\n }\n\n text\n }\n}\n\n#[allow(unused)]\n#[derive(Debug, Default, Clone, PartialEq)]\npub struct LinkMark {\n pub url: SharedString,\n /// Optional identifier for footnotes.\n pub identifier: Option,\n pub title: Option,\n}\n\n#[derive(Debug, Default, Clone, PartialEq)]\npub struct TextMark {\n pub bold: bool,\n pub italic: bool,\n pub strikethrough: bool,\n pub code: bool,\n pub link: Option,\n}\n\nimpl TextMark {\n pub fn bold(mut self) -> Self {\n self.bold = true;\n self\n }\n\n pub fn italic(mut self) -> Self {\n self.italic = true;\n self\n }\n\n pub fn strikethrough(mut self) -> Self {\n self.strikethrough = true;\n self\n }\n\n pub fn code(mut self) -> Self {\n self.code = true;\n self\n }\n\n pub fn link(mut self, link: impl Into) -> Self {\n self.link = Some(link.into());\n self\n }\n\n pub fn merge(&mut self, other: TextMark) {\n self.bold |= other.bold;\n self.italic |= other.italic;\n self.strikethrough |= other.strikethrough;\n self.code |= other.code;\n if let Some(link) = other.link {\n self.link = Some(link);\n }\n }\n}\n\n/// The bytes\n#[derive(Debug, Default, Copy, Clone, PartialEq)]\npub struct Span {\n pub start: usize,\n pub end: usize,\n}\n\nimpl From for ElementId {\n fn from(value: Span) -> Self {\n ElementId::Name(format!(\"md-{}:{}\", value.start, value.end).into())\n }\n}\n\n#[allow(unused)]\n#[derive(Debug, Default, Clone)]\npub struct ImageNode {\n pub url: SharedUri,\n pub link: Option,\n pub title: Option,\n pub alt: Option,\n pub width: Option,\n pub height: Option,\n}\n\nimpl ImageNode {\n pub fn title(&self) -> String {\n self.title\n .clone()\n .unwrap_or_else(|| self.alt.clone().unwrap_or_default())\n .to_string()\n }\n}\n\nimpl PartialEq for ImageNode {\n fn eq(&self, other: &Self) -> bool {\n self.url == other.url\n && self.link == other.link\n && self.title == other.title\n && self.alt == other.alt\n && self.width == other.width\n && self.height == other.height\n }\n}\n\n#[derive(Default, Clone, Debug)]\npub(crate) struct InlineNode {\n /// The text content.\n pub(crate) text: SharedString,\n pub(crate) image: Option,\n /// The text styles, each tuple contains the range of the text and the style.\n pub(crate) marks: Vec<(Range, TextMark)>,\n\n state: Arc>,\n}\n\nimpl PartialEq for InlineNode {\n fn eq(&self, other: &Self) -> bool {\n self.text == other.text && self.image == other.image && self.marks == other.marks\n }\n}\n\nimpl InlineNode {\n pub(crate) fn new(text: impl Into) -> Self {\n Self {\n text: text.into(),\n image: None,\n marks: vec![],\n state: Arc::new(Mutex::new(InlineState::default())),\n }\n }\n\n pub(crate) fn image(image: ImageNode) -> Self {\n let mut this = Self::new(\"\");\n this.image = Some(image);\n this\n }\n\n pub(crate) fn marks(mut self, marks: Vec<(Range, TextMark)>) -> Self {\n self.marks = marks;\n self\n }\n}\n\n/// The paragraph element, contains multiple text nodes.\n///\n/// Unlike other Element, this is cloneable, because it is used in the Node AST.\n/// We are keep the selection state inside this AST Nodes.\n#[derive(Debug, Clone, Default)]\npub(crate) struct Paragraph {\n pub(super) span: Option,\n pub(super) children: Vec,\n /// The link references in this paragraph, used for reference links.\n ///\n /// The key is the identifier, the value is the url.\n pub(super) link_refs: HashMap,\n\n pub(crate) state: Arc>,\n}\n\nimpl PartialEq for Paragraph {\n fn eq(&self, other: &Self) -> bool {\n self.span == other.span\n && self.children == other.children\n && self.link_refs == other.link_refs\n }\n}\n\nimpl Paragraph {\n pub(crate) fn new(text: String) -> Self {\n Self {\n span: None,\n children: vec![InlineNode::new(&text)],\n link_refs: HashMap::new(),\n state: Arc::new(Mutex::new(InlineState::default())),\n }\n }\n\n pub(super) fn selected_text(&self) -> String {\n let mut text = String::new();\n\n for c in self.children.iter() {\n let state = c.state.lock().unwrap();\n if let Some(selection) = &state.selection {\n let part_text = state.text.clone();\n text.push_str(&part_text[selection.start..selection.end]);\n }\n }\n\n let state = self.state.lock().unwrap();\n if let Some(selection) = &state.selection {\n let all_text = state.text.clone();\n text.push_str(&all_text[selection.start..selection.end]);\n }\n\n text\n }\n}\n\n#[derive(Debug, Clone, Default, PartialEq)]\npub(crate) struct Table {\n pub(crate) children: Vec,\n pub(crate) column_aligns: Vec,\n pub(crate) span: Option,\n}\n\nimpl Table {\n pub(crate) fn column_align(&self, index: usize) -> ColumnumnAlign {\n self.column_aligns.get(index).copied().unwrap_or_default()\n }\n}\n\n#[derive(Debug, Default, Copy, Clone, PartialEq)]\npub(crate) enum ColumnumnAlign {\n #[default]\n Left,\n Center,\n Right,\n}\n\nimpl From for ColumnumnAlign {\n fn from(value: mdast::AlignKind) -> Self {\n match value {\n mdast::AlignKind::None => ColumnumnAlign::Left,\n mdast::AlignKind::Left => ColumnumnAlign::Left,\n mdast::AlignKind::Center => ColumnumnAlign::Center,\n mdast::AlignKind::Right => ColumnumnAlign::Right,\n }\n }\n}\n\n#[derive(Debug, Clone, Default, PartialEq)]\npub(crate) struct TableRow {\n pub children: Vec,\n}\n\n#[derive(Debug, Clone, Default, PartialEq)]\npub(crate) struct TableCell {\n pub children: Paragraph,\n pub width: Option,\n}\n\nimpl Paragraph {\n pub(crate) fn take(&mut self) -> Paragraph {\n std::mem::replace(\n self,\n Paragraph {\n span: None,\n children: vec![],\n link_refs: Default::default(),\n state: Arc::new(Mutex::new(InlineState::default())),\n },\n )\n }\n\n pub(crate) fn is_image(&self) -> bool {\n false\n }\n\n pub(crate) fn set_span(&mut self, span: Span) {\n self.span = Some(span);\n }\n\n pub(crate) fn push_str(&mut self, text: &str) {\n self.children.push(\n InlineNode::new(text.to_string()).marks(vec![(0..text.len(), TextMark::default())]),\n );\n }\n\n pub(crate) fn push(&mut self, text: InlineNode) {\n self.children.push(text);\n }\n\n pub(crate) fn push_image(&mut self, image: ImageNode) {\n self.children.push(InlineNode::image(image));\n }\n\n pub(crate) fn is_empty(&self) -> bool {\n self.children.is_empty()\n || self\n .children\n .iter()\n .all(|node| node.text.is_empty() && node.image.is_none())\n }\n\n /// Return length of children text.\n pub(crate) fn text_len(&self) -> usize {\n self.children\n .iter()\n .map(|node| node.text.len())\n .sum::()\n }\n\n pub(crate) fn merge(&mut self, other: Self) {\n self.children.extend(other.children);\n }\n}\n\n#[derive(Debug, Clone)]\npub struct CodeBlock {\n lang: Option,\n styles: Vec<(Range, HighlightStyle)>,\n state: Arc>,\n pub span: Option,\n}\n\nimpl PartialEq for CodeBlock {\n fn eq(&self, other: &Self) -> bool {\n self.lang == other.lang && self.styles == other.styles\n }\n}\n\nimpl CodeBlock {\n /// Get the language of the code block.\n pub fn lang(&self) -> Option {\n self.lang.clone()\n }\n\n /// Get the code content of the code block.\n pub fn code(&self) -> SharedString {\n self.state.lock().unwrap().text.clone()\n }\n\n pub(crate) fn new(\n code: SharedString,\n lang: Option,\n highlight_theme: &HighlightTheme,\n span: Option>,\n ) -> Self {\n let mut styles = vec![];\n if let Some(lang) = &lang {\n let mut highlighter = SyntaxHighlighter::new(&lang);\n highlighter.update(None, &Rope::from_str(code.as_str()), None);\n styles = highlighter.styles(&(0..code.len()), highlight_theme);\n };\n\n let state = Arc::new(Mutex::new(InlineState::default()));\n state.lock().unwrap().set_text(code);\n\n Self {\n lang,\n styles,\n state,\n span: span.map(|s| s.into()),\n }\n }\n\n pub(super) fn selected_text(&self) -> String {\n let mut text = String::new();\n let state = self.state.lock().unwrap();\n if let Some(selection) = &state.selection {\n let part_text = state.text.clone();\n text.push_str(&part_text[selection.start..selection.end]);\n }\n text\n }\n\n fn render(\n &self,\n options: &NodeRenderOptions,\n node_cx: &NodeContext,\n window: &mut Window,\n cx: &mut App,\n ) -> AnyElement {\n let style = &node_cx.style;\n\n div()\n .when(!options.is_last, |this| this.pb(style.paragraph_gap))\n .child(\n div()\n .id((\"codeblock\", options.ix))\n .p_3()\n .rounded(cx.theme().radius)\n .bg(cx.theme().muted)\n .font_family(cx.theme().mono_font_family.clone())\n .text_size(cx.theme().mono_font_size)\n .relative()\n .refine_style(&style.code_block)\n .child(Inline::new(\n \"code\",\n self.state.clone(),\n vec![],\n self.styles.clone(),\n ))\n .when_some(node_cx.code_block_actions.clone(), |this, actions| {\n this.child(\n div()\n .id(\"actions\")\n .absolute()\n .top_2()\n .right_2()\n .bg(cx.theme().muted)\n .rounded(cx.theme().radius)\n .child(actions(&self, window, cx)),\n )\n }),\n )\n .into_any_element()\n }\n}\n\n/// A context for rendering nodes, contains link references.\n#[derive(Default, Clone)]\npub(crate) struct NodeContext {\n /// The byte offset of the node in the original markdown text.\n /// Used for incremental updates.\n pub(crate) offset: usize,\n pub(crate) link_refs: HashMap,\n pub(crate) style: TextViewStyle,\n pub(crate) code_block_actions: Option>,\n}\n\nimpl NodeContext {\n pub(super) fn add_ref(&mut self, identifier: SharedString, link: LinkMark) {\n self.link_refs.insert(identifier, link);\n }\n}\n\nimpl PartialEq for NodeContext {\n fn eq(&self, other: &Self) -> bool {\n self.link_refs == other.link_refs && self.style == other.style\n // Note: code_block_buttons is intentionally not compared (closures can't be compared)\n }\n}\n\nimpl Paragraph {\n fn render(\n &self,\n node_cx: &NodeContext,\n _window: &mut Window,\n cx: &mut App,\n ) -> impl IntoElement {\n let span = self.span;\n let children = &self.children;\n\n let mut child_nodes: Vec = vec![];\n\n let mut text = String::new();\n let mut highlights: Vec<(Range, HighlightStyle)> = vec![];\n let mut links: Vec<(Range, LinkMark)> = vec![];\n let mut offset = 0;\n\n let mut ix = 0;\n for inline_node in children {\n let text_len = inline_node.text.len();\n text.push_str(&inline_node.text);\n\n if let Some(image) = &inline_node.image {\n if text.len() > 0 {\n inline_node\n .state\n .lock()\n .unwrap()\n .set_text(text.clone().into());\n child_nodes.push(\n Inline::new(\n ix,\n inline_node.state.clone(),\n links.clone(),\n highlights.clone(),\n )\n .into_any_element(),\n );\n }\n child_nodes.push(\n img(image.url.clone())\n .id(ix)\n .object_fit(ObjectFit::Contain)\n .max_w(relative(1.))\n .when_some(image.width, |this, width| this.w(width))\n .when_some(image.link.clone(), |this, link| {\n let title = image.title();\n this.cursor_pointer()\n .tooltip(move |window, cx| {\n Tooltip::new(title.clone()).build(window, cx)\n })\n .on_click(move |_, _, cx| {\n cx.stop_propagation();\n cx.open_url(&link.url);\n })\n })\n .into_any_element(),\n );\n\n text.clear();\n links.clear();\n highlights.clear();\n offset = 0;\n } else {\n let mut node_highlights = vec![];\n for (range, style) in &inline_node.marks {\n let inner_range = (offset + range.start)..(offset + range.end);\n\n let mut highlight = HighlightStyle::default();\n if style.bold {\n highlight.font_weight = Some(FontWeight::BOLD);\n }\n if style.italic {\n highlight.font_style = Some(FontStyle::Italic);\n }\n if style.strikethrough {\n highlight.strikethrough = Some(gpui::StrikethroughStyle {\n thickness: gpui::px(1.),\n ..Default::default()\n });\n }\n if style.code {\n highlight.background_color = Some(cx.theme().accent);\n }\n\n if let Some(mut link_mark) = style.link.clone() {\n highlight.color = Some(cx.theme().link);\n highlight.underline = Some(gpui::UnderlineStyle {\n thickness: gpui::px(1.),\n ..Default::default()\n });\n\n // convert link references, replace link\n if let Some(identifier) = link_mark.identifier.as_ref() {\n if let Some(mark) = node_cx.link_refs.get(identifier) {\n link_mark = mark.clone();\n }\n }\n\n links.push((inner_range.clone(), link_mark));\n }\n\n node_highlights.push((inner_range, highlight));\n }\n\n highlights = gpui::combine_highlights(highlights, node_highlights).collect();\n offset += text_len;\n }\n ix += 1;\n }\n\n // Add the last text node\n if text.len() > 0 {\n self.state.lock().unwrap().set_text(text.into());\n child_nodes\n .push(Inline::new(ix, self.state.clone(), links, highlights).into_any_element());\n }\n\n div().id(span.unwrap_or_default()).children(child_nodes)\n }\n}\n\nimpl Paragraph {\n fn to_markdown(&self) -> String {\n let mut text = self\n .children\n .iter()\n .map(|text_node| {\n let mut text = text_node.text.to_string();\n for (range, style) in &text_node.marks {\n if style.bold {\n text = format!(\"**{}**\", &text_node.text[range.clone()]);\n }\n if style.italic {\n text = format!(\"*{}*\", &text_node.text[range.clone()]);\n }\n if style.strikethrough {\n text = format!(\"~~{}~~\", &text_node.text[range.clone()]);\n }\n if style.code {\n text = format!(\"`{}`\", &text_node.text[range.clone()]);\n }\n if let Some(link) = &style.link {\n text = format!(\"[{}]({})\", &text_node.text[range.clone()], link.url);\n }\n }\n\n if let Some(image) = &text_node.image {\n let alt = image.alt.clone().unwrap_or_default();\n let title = image\n .title\n .clone()\n .map_or(String::new(), |t| format!(\" \\\"{}\\\"\", t));\n text.push_str(&format!(\"![{}]({}{})\", alt, image.url, title))\n }\n\n text\n })\n .collect::>()\n .join(\"\");\n\n text.push_str(\"\\n\\n\");\n text\n }\n}\n\nimpl BlockNode {\n /// Converts the node to markdown format.\n ///\n /// This is used to generate markdown for test.\n #[allow(dead_code)]\n pub(crate) fn to_markdown(&self) -> String {\n match self {\n BlockNode::Root { children, .. } => children\n .iter()\n .map(|child| child.to_markdown())\n .collect::>()\n .join(\"\\n\\n\"),\n BlockNode::Paragraph(paragraph) => paragraph.to_markdown(),\n BlockNode::Heading {\n level, children, ..\n } => {\n let hashes = \"#\".repeat(*level as usize);\n format!(\"{} {}\", hashes, children.to_markdown())\n }\n BlockNode::Blockquote { children, .. } => {\n let content = children\n .iter()\n .map(|child| child.to_markdown())\n .collect::>()\n .join(\"\\n\\n\");\n\n content\n .lines()\n .map(|line| format!(\"> {}\", line))\n .collect::>()\n .join(\"\\n\")\n }\n BlockNode::List {\n children, ordered, ..\n } => children\n .iter()\n .enumerate()\n .map(|(i, child)| {\n let prefix = if *ordered {\n format!(\"{}. \", i + 1)\n } else {\n \"- \".to_string()\n };\n format!(\"{}{}\", prefix, child.to_markdown())\n })\n .collect::>()\n .join(\"\\n\"),\n BlockNode::ListItem {\n children, checked, ..\n } => {\n let checkbox = if let Some(checked) = checked {\n if *checked { \"[x] \" } else { \"[ ] \" }\n } else {\n \"\"\n };\n format!(\n \"{}{}\",\n checkbox,\n children\n .iter()\n .map(|child| child.to_markdown())\n .collect::>()\n .join(\"\\n\")\n )\n }\n BlockNode::CodeBlock(code_block) => {\n format!(\n \"```{}\\n{}\\n```\",\n code_block.lang.clone().unwrap_or_default(),\n code_block.code()\n )\n }\n BlockNode::Table(table) => {\n let header = table\n .children\n .first()\n .map(|row| {\n row.children\n .iter()\n .map(|cell| cell.children.to_markdown())\n .collect::>()\n .join(\" | \")\n })\n .unwrap_or_default();\n let alignments = table\n .column_aligns\n .iter()\n .map(|align| {\n match align {\n ColumnumnAlign::Left => \":--\",\n ColumnumnAlign::Center => \":-:\",\n ColumnumnAlign::Right => \"--:\",\n }\n .to_string()\n })\n .collect::>()\n .join(\" | \");\n let rows = table\n .children\n .iter()\n .skip(1)\n .map(|row| {\n row.children\n .iter()\n .map(|cell| cell.children.to_markdown())\n .collect::>()\n .join(\" | \")\n })\n .collect::>()\n .join(\"\\n\");\n format!(\"{}\\n{}\\n{}\", header, alignments, rows)\n }\n BlockNode::Break { html, .. } => {\n if *html {\n \"
\".to_string()\n } else {\n \"\\n\".to_string()\n }\n }\n BlockNode::Divider { .. } => \"---\".to_string(),\n BlockNode::Definition {\n identifier,\n url,\n title,\n ..\n } => {\n if let Some(title) = title {\n format!(\"[{}]: {} \\\"{}\\\"\", identifier, url, title)\n } else {\n format!(\"[{}]: {}\", identifier, url)\n }\n }\n BlockNode::Unknown { .. } => \"\".to_string(),\n }\n .trim()\n .to_string()\n }\n}\n\nimpl BlockNode {\n fn render_list_item(\n item: &BlockNode,\n ix: usize,\n options: NodeRenderOptions,\n node_cx: &NodeContext,\n window: &mut Window,\n cx: &mut App,\n ) -> AnyElement {\n match item {\n BlockNode::ListItem {\n children,\n spread,\n checked,\n ..\n } => v_flex()\n .id((\"li\", options.ix))\n .w_full()\n .min_w_0()\n .when(*spread, |this| this.child(div()))\n .children({\n let mut items: Vec
= Vec::with_capacity(children.len());\n\n for (child_ix, child) in children.iter().enumerate() {\n match child {\n BlockNode::Paragraph { .. } => {\n let last_not_list = child_ix > 0\n && !matches!(children[child_ix - 1], BlockNode::List { .. });\n\n let text = child.render_block(\n NodeRenderOptions {\n depth: options.depth + 1,\n todo: checked.is_some(),\n is_last: true,\n ..options\n },\n node_cx,\n window,\n cx,\n );\n\n // merge content into last item.\n if last_not_list {\n if let Some(item_item) = items.last_mut() {\n item_item.extend(vec![\n div()\n .flex_1()\n .min_w_0()\n .overflow_hidden()\n .child(text)\n .into_any_element(),\n ]);\n continue;\n }\n }\n\n items.push(\n h_flex()\n .w_full()\n .flex_1()\n .min_w_0()\n .relative()\n .items_start()\n .content_start()\n .when(!options.todo && checked.is_none(), |this| {\n this.child(list_item_prefix(\n ix,\n options.ordered,\n options.depth,\n ))\n })\n .when_some(*checked, |this, checked| {\n // Todo list checkbox\n this.child(\n div()\n .flex()\n .mt(rems(0.4))\n .mr_1p5()\n .size(rems(0.875))\n .items_center()\n .justify_center()\n .rounded(cx.theme().radius.half())\n .border_1()\n .border_color(cx.theme().primary)\n .text_color(cx.theme().primary_foreground)\n .when(checked, |this| {\n this.bg(cx.theme().primary).child(\n Icon::new(IconName::Check)\n .size_2()\n .text_xs(),\n )\n }),\n )\n })\n .child(\n div()\n .flex_1()\n .min_w_0()\n .overflow_hidden()\n .child(text),\n ),\n );\n }\n BlockNode::List { .. } => {\n items.push(div().ml(rems(1.)).child(child.render_block(\n NodeRenderOptions {\n depth: options.depth + 1,\n todo: checked.is_some(),\n is_last: true,\n ..options\n },\n node_cx,\n window,\n cx,\n )));\n }\n _ => {}\n }\n }\n items\n })\n .into_any_element(),\n _ => div().into_any_element(),\n }\n }\n\n fn render_table(\n item: &BlockNode,\n options: &NodeRenderOptions,\n node_cx: &NodeContext,\n window: &mut Window,\n cx: &mut App,\n ) -> impl IntoElement {\n const DEFAULT_LENGTH: usize = 5;\n const MAX_LENGTH: usize = 150;\n let col_lens = match item {\n BlockNode::Table(table) => {\n let mut col_lens = vec![];\n for row in table.children.iter() {\n for (ix, cell) in row.children.iter().enumerate() {\n if col_lens.len() <= ix {\n col_lens.push(DEFAULT_LENGTH);\n }\n\n let len = cell.children.text_len();\n if len > col_lens[ix] {\n col_lens[ix] = len;\n }\n }\n }\n col_lens\n }\n _ => vec![],\n };\n\n match item {\n BlockNode::Table(table) => div()\n .pb(rems(1.))\n .w_full()\n .child(\n div()\n .id((\"table\", options.ix))\n .w_full()\n .border_1()\n .border_color(cx.theme().border)\n .rounded(cx.theme().radius)\n .children({\n let mut rows = Vec::with_capacity(table.children.len());\n for (row_ix, row) in table.children.iter().enumerate() {\n rows.push(\n div()\n .id(\"row\")\n .w_full()\n .when(row_ix < table.children.len() - 1, |this| {\n this.border_b_1()\n })\n .border_color(cx.theme().border)\n .flex()\n .flex_row()\n .children({\n let mut cells = Vec::with_capacity(row.children.len());\n for (ix, cell) in row.children.iter().enumerate() {\n let align = table.column_align(ix);\n let is_last_col = ix == row.children.len() - 1;\n let len = col_lens\n .get(ix)\n .copied()\n .unwrap_or(MAX_LENGTH)\n .min(MAX_LENGTH);\n\n cells.push(\n div()\n .id(\"cell\")\n .flex()\n .when(\n align == ColumnumnAlign::Center,\n |this| this.justify_center(),\n )\n .when(\n align == ColumnumnAlign::Right,\n |this| this.justify_end(),\n )\n .w(Length::Definite(relative(len as f32)))\n .px_2()\n .py_1()\n .when(!is_last_col, |this| {\n this.border_r_1()\n .border_color(cx.theme().border)\n })\n .truncate()\n .child(\n cell.children\n .render(node_cx, window, cx),\n ),\n )\n }\n cells\n }),\n )\n }\n rows\n }),\n )\n .into_any_element(),\n _ => div().into_any_element(),\n }\n }\n\n pub(crate) fn render_block(\n &self,\n options: NodeRenderOptions,\n node_cx: &NodeContext,\n window: &mut Window,\n cx: &mut App,\n ) -> AnyElement {\n let ix = options.ix;\n let mb = if options.in_list || options.is_last {\n rems(0.)\n } else {\n node_cx.style.paragraph_gap\n };\n\n match self {\n BlockNode::Root { children, .. } => div()\n .id((\"div\", ix))\n .children(children.into_iter().enumerate().map(move |(ix, node)| {\n node.render_block(NodeRenderOptions { ix, ..options }, node_cx, window, cx)\n }))\n .into_any_element(),\n BlockNode::Paragraph(paragraph) => div()\n .id((\"p\", ix))\n .pb(mb)\n .child(paragraph.render(node_cx, window, cx))\n .into_any_element(),\n BlockNode::Heading {\n level, children, ..\n } => {\n let (text_size, font_weight) = match level {\n 1 => (rems(2.), FontWeight::BOLD),\n 2 => (rems(1.5), FontWeight::SEMIBOLD),\n 3 => (rems(1.25), FontWeight::SEMIBOLD),\n 4 => (rems(1.125), FontWeight::SEMIBOLD),\n 5 => (rems(1.), FontWeight::SEMIBOLD),\n 6 => (rems(1.), FontWeight::MEDIUM),\n _ => (rems(1.), FontWeight::NORMAL),\n };\n\n let mut text_size = text_size.to_pixels(node_cx.style.heading_base_font_size);\n if let Some(f) = node_cx.style.heading_font_size.as_ref() {\n text_size = (f)(*level, node_cx.style.heading_base_font_size);\n }\n\n h_flex()\n .id(SharedString::from(format!(\"h{}-{}\", level, ix)))\n .pb(rems(0.3))\n .whitespace_normal()\n .text_size(text_size)\n .font_weight(font_weight)\n .child(children.render(node_cx, window, cx))\n .into_any_element()\n }\n BlockNode::Blockquote { children, .. } => div()\n .w_full()\n .pb(mb)\n .child(\n div()\n .id((\"blockquote\", ix))\n .w_full()\n .text_color(cx.theme().muted_foreground)\n .border_l_3()\n .border_color(cx.theme().secondary_active)\n .px_4()\n .children({\n let children_len = children.len();\n children.into_iter().enumerate().map(move |(index, c)| {\n let is_last = index == children_len - 1;\n c.render_block(options.is_last(is_last), node_cx, window, cx)\n })\n }),\n )\n .into_any_element(),\n BlockNode::List {\n children, ordered, ..\n } => v_flex()\n .id((if *ordered { \"ol\" } else { \"ul\" }, ix))\n .pb(mb)\n .children({\n let mut items = Vec::with_capacity(children.len());\n let mut item_index = 0;\n for (ix, item) in children.into_iter().enumerate() {\n let is_item = item.is_list_item();\n\n items.push(Self::render_list_item(\n item,\n item_index,\n NodeRenderOptions {\n ix,\n ordered: *ordered,\n ..options\n },\n node_cx,\n window,\n cx,\n ));\n\n if is_item {\n item_index += 1;\n }\n }\n items\n })\n .into_any_element(),\n BlockNode::CodeBlock(code_block) => code_block.render(&options, node_cx, window, cx),\n BlockNode::Table { .. } => {\n Self::render_table(self, &options, node_cx, window, cx).into_any_element()\n }\n BlockNode::Divider { .. } => div()\n .pb(mb)\n .child(div().id(\"divider\").bg(cx.theme().border).h(px(2.)))\n .into_any_element(),\n BlockNode::Break { .. } => div().id(\"break\").into_any_element(),\n BlockNode::Unknown { .. } | BlockNode::Definition { .. } => div().into_any_element(),\n _ => {\n if cfg!(debug_assertions) {\n tracing::warn!(\"unknown implementation: {:?}\", self);\n }\n\n div().into_any_element()\n }\n }\n }\n}\n" }, { "path": "crates/ui/src/text/state.rs", "content": "use std::{\n pin::Pin,\n task::Poll,\n};\nuse futures::Stream as _;\n\nuse gpui::{\n App, AppContext as _, Bounds, ClipboardItem, Context, FocusHandle, IntoElement, KeyBinding,\n ListState, ParentElement as _, Pixels, Point, Render, SharedString, Styled as _, Task, Window,\n prelude::FluentBuilder as _, px,\n};\n\nuse crate::{\n ActiveTheme, ElementExt,\n async_util::{Sender, Receiver, unbounded},\n highlighter::HighlightTheme,\n input::{self, Copy},\n text::{\n CodeBlockActionsFn, TextViewStyle,\n document::ParsedDocument,\n format,\n node::{self, NodeContext},\n },\n v_flex,\n};\n\nconst CONTEXT: &'static str = \"TextView\";\npub(crate) fn init(cx: &mut App) {\n cx.bind_keys(vec![\n #[cfg(target_os = \"macos\")]\n KeyBinding::new(\"cmd-c\", input::Copy, Some(CONTEXT)),\n #[cfg(not(target_os = \"macos\"))]\n KeyBinding::new(\"ctrl-c\", input::Copy, Some(CONTEXT)),\n ]);\n}\n\n/// The content format of the text view.\n#[derive(Clone, Copy, PartialEq, Eq)]\npub(super) enum TextViewFormat {\n /// Markdown view\n Markdown,\n /// HTML view\n Html,\n}\n\n/// The state of a TextView.\npub struct TextViewState {\n pub(super) focus_handle: FocusHandle,\n pub(super) list_state: ListState,\n\n /// The bounds of the text view\n bounds: Bounds,\n\n pub(super) selectable: bool,\n pub(super) scrollable: bool,\n pub(super) text_view_style: TextViewStyle,\n pub(super) code_block_actions: Option>,\n\n pub(super) is_selecting: bool,\n /// The local (in TextView) position of the selection.\n selection_positions: (Option>, Option>),\n\n pub(super) parsed_content: ParsedContent,\n text: SharedString,\n parsed_error: Option,\n tx: Sender,\n _parse_task: Task<()>,\n _receive_task: Task<()>,\n}\n\nimpl TextViewState {\n /// Create a Markdown TextViewState.\n pub fn markdown(text: &str, cx: &mut Context) -> Self {\n Self::new(TextViewFormat::Markdown, text, cx)\n }\n\n /// Create a HTML TextViewState.\n pub fn html(text: &str, cx: &mut Context) -> Self {\n Self::new(TextViewFormat::Html, text, cx)\n }\n\n /// Create a new TextViewState.\n fn new(format: TextViewFormat, text: &str, cx: &mut Context) -> Self {\n let focus_handle = cx.focus_handle();\n\n let (tx, rx) = unbounded::();\n let (tx_result, rx_result) = unbounded::>();\n let _receive_task = cx.spawn({\n async move |weak_self, cx| {\n while let Ok(parsed_result) = rx_result.recv().await {\n _ = weak_self.update(cx, |state, cx| {\n match parsed_result {\n Ok(content) => {\n state.parsed_content = content;\n state.parsed_error = None;\n }\n Err(err) => {\n state.parsed_error = Some(err);\n }\n }\n state.clear_selection();\n cx.notify();\n });\n }\n }\n });\n\n let _parse_task = cx.background_spawn(UpdateFuture::new(format, rx, tx_result, cx));\n\n let mut this = Self {\n focus_handle,\n bounds: Bounds::default(),\n selection_positions: (None, None),\n selectable: false,\n scrollable: false,\n list_state: ListState::new(0, gpui::ListAlignment::Top, px(1000.)),\n text_view_style: TextViewStyle::default(),\n code_block_actions: None,\n is_selecting: false,\n parsed_content: Default::default(),\n parsed_error: None,\n text: text.to_string().into(),\n tx,\n _parse_task,\n _receive_task,\n };\n this.increment_update(&text, false, cx);\n this\n }\n\n /// Get the text content.\n pub(crate) fn source(&self) -> SharedString {\n self.parsed_content.document.source.clone()\n }\n\n /// Set whether the text is selectable, default false.\n pub fn selectable(mut self, selectable: bool) -> Self {\n self.selectable = selectable;\n self\n }\n\n /// Set whether the text is selectable, default false.\n pub fn set_selectable(&mut self, selectable: bool, cx: &mut Context) {\n self.selectable = selectable;\n cx.notify();\n }\n\n /// Set whether the text is selectable, default false.\n pub fn scrollable(mut self, scrollable: bool) -> Self {\n self.scrollable = scrollable;\n self\n }\n\n /// Set whether the text is selectable, default false.\n pub fn set_scrollable(&mut self, scrollable: bool, cx: &mut Context) {\n self.scrollable = scrollable;\n cx.notify();\n }\n\n /// Set the text content.\n pub fn set_text(&mut self, text: &str, cx: &mut Context) {\n if self.text.as_str() == text {\n return;\n }\n\n self.text = text.to_string().into();\n self.parsed_error = None;\n self.increment_update(text, false, cx);\n }\n\n /// Append partial text content to the existing text.\n pub fn push_str(&mut self, new_text: &str, cx: &mut Context) {\n if new_text.is_empty() {\n return;\n }\n self.increment_update(new_text, true, cx);\n }\n\n /// Return the selected text.\n pub fn selected_text(&self) -> String {\n self.parsed_content.document.selected_text()\n }\n\n fn increment_update(&mut self, text: &str, append: bool, cx: &mut Context) {\n let update_options = UpdateOptions {\n append,\n content: self.parsed_content.clone(),\n pending_text: text.to_string(),\n highlight_theme: cx.theme().highlight_theme.clone(),\n };\n\n _ = self.tx.try_send(update_options);\n }\n\n /// Save bounds and unselect if bounds changed.\n pub(super) fn update_bounds(&mut self, bounds: Bounds) {\n if self.bounds.size != bounds.size {\n self.clear_selection();\n }\n self.bounds = bounds;\n }\n\n pub(super) fn clear_selection(&mut self) {\n self.selection_positions = (None, None);\n self.is_selecting = false;\n }\n\n pub(super) fn start_selection(&mut self, pos: Point) {\n // Store content coordinates (not affected by scrolling)\n let scroll_offset = if self.scrollable {\n self.list_state.scroll_px_offset_for_scrollbar()\n } else {\n Point::default()\n };\n let pos = pos - self.bounds.origin - scroll_offset;\n self.selection_positions = (Some(pos), Some(pos));\n self.is_selecting = true;\n }\n\n pub(super) fn update_selection(&mut self, pos: Point) {\n let scroll_offset = if self.scrollable {\n self.list_state.scroll_px_offset_for_scrollbar()\n } else {\n Point::default()\n };\n let pos = pos - self.bounds.origin - scroll_offset;\n if let (Some(start), Some(_)) = self.selection_positions {\n self.selection_positions = (Some(start), Some(pos))\n }\n }\n\n pub(super) fn end_selection(&mut self) {\n self.is_selecting = false;\n }\n\n pub(crate) fn has_selection(&self) -> bool {\n if let (Some(start), Some(end)) = self.selection_positions {\n start != end\n } else {\n false\n }\n }\n\n /// Return the selection start/end in window coordinates.\n pub(crate) fn selection_points(&self) -> Option<(Point, Point)> {\n let scroll_offset = if self.scrollable {\n self.list_state.scroll_px_offset_for_scrollbar()\n } else {\n Point::default()\n };\n\n selection_points(\n self.selection_positions.0,\n self.selection_positions.1,\n self.bounds,\n scroll_offset,\n )\n }\n\n pub(super) fn on_action_copy(&mut self, _: &Copy, _: &mut Window, cx: &mut Context) {\n let selected_text = self.selected_text().trim().to_string();\n if selected_text.is_empty() {\n return;\n }\n\n cx.write_to_clipboard(ClipboardItem::new_string(selected_text));\n }\n\n pub(crate) fn is_selectable(&self) -> bool {\n self.selectable\n }\n}\n\nimpl Render for TextViewState {\n fn render(&mut self, window: &mut Window, cx: &mut Context) -> impl IntoElement {\n let state = cx.entity();\n let document = self.parsed_content.document.clone();\n let mut node_cx = self.parsed_content.node_cx.clone();\n\n node_cx.code_block_actions = self.code_block_actions.clone();\n node_cx.style = self.text_view_style.clone();\n\n v_flex()\n .size_full()\n .map(|this| match &mut self.parsed_error {\n None => this.child(document.render_root(\n if self.scrollable {\n Some(self.list_state.clone())\n } else {\n None\n },\n &node_cx,\n window,\n cx,\n )),\n Some(err) => this.child(\n v_flex()\n .gap_1()\n .child(\"Failed to parse content\")\n .child(err.to_string()),\n ),\n })\n .on_prepaint(move |bounds, _, cx| {\n state.update(cx, |state, _| {\n state.update_bounds(bounds);\n })\n })\n }\n}\n\n#[derive(Clone, PartialEq, Default)]\npub(crate) struct ParsedContent {\n pub(crate) document: ParsedDocument,\n pub(crate) node_cx: node::NodeContext,\n}\n\nstruct UpdateFuture {\n format: TextViewFormat,\n options: UpdateOptions,\n pending_text: String,\n rx: Pin>>,\n tx_result: Sender>,\n}\n\nimpl UpdateFuture {\n fn new(\n format: TextViewFormat,\n rx: Receiver,\n tx_result: Sender>,\n cx: &App,\n ) -> Self {\n Self {\n format,\n pending_text: String::new(),\n options: UpdateOptions {\n append: false,\n pending_text: String::new(),\n content: Default::default(),\n highlight_theme: cx.theme().highlight_theme.clone(),\n },\n rx: Box::pin(rx),\n tx_result,\n }\n }\n}\n\nimpl Future for UpdateFuture {\n type Output = ();\n\n fn poll(mut self: Pin<&mut Self>, cx: &mut std::task::Context<'_>) -> Poll {\n loop {\n match self.rx.as_mut().poll_next(cx) {\n Poll::Ready(Some(options)) => {\n if options.append {\n self.pending_text.push_str(options.pending_text.as_str());\n } else {\n self.pending_text = options.pending_text.clone();\n }\n self.options = options;\n\n // Process immediately without debounce\n let pending_text = std::mem::take(&mut self.pending_text);\n let res = parse_content(\n self.format,\n &UpdateOptions {\n pending_text,\n ..self.options.clone()\n },\n );\n _ = self.tx_result.try_send(res);\n continue;\n }\n Poll::Ready(None) => return Poll::Ready(()),\n Poll::Pending => return Poll::Pending,\n }\n }\n }\n}\n\n#[derive(Clone)]\nstruct UpdateOptions {\n content: ParsedContent,\n pending_text: String,\n append: bool,\n highlight_theme: std::sync::Arc,\n}\n\nfn parse_content(format: TextViewFormat, options: &UpdateOptions) -> Result {\n let mut node_cx = NodeContext {\n ..NodeContext::default()\n };\n\n let mut content = options.content.clone();\n let mut source = String::new();\n if options.append\n && let Some(last_block) = content.document.blocks.pop()\n && let Some(span) = last_block.span()\n {\n node_cx.offset = span.start;\n let last_source = &content.document.source[span.start..];\n source.push_str(last_source);\n source.push_str(&options.pending_text);\n } else {\n source = options.pending_text.to_string();\n }\n\n let new_document = match format {\n TextViewFormat::Markdown => {\n format::markdown::parse(&source, &mut node_cx, &options.highlight_theme)\n }\n TextViewFormat::Html => format::html::parse(&source, &mut node_cx),\n }?;\n\n if options.append {\n content.document.source =\n format!(\"{}{}\", content.document.source, options.pending_text).into();\n content.document.blocks.extend(new_document.blocks);\n } else {\n content.document = new_document;\n }\n\n Ok(content)\n}\n\nfn selection_points(\n start: Option>,\n end: Option>,\n bounds: Bounds,\n scroll_offset: Point,\n) -> Option<(Point, Point)> {\n if let (Some(start), Some(end)) = (start, end) {\n // Convert content coordinates to window coordinates\n let start = start + scroll_offset + bounds.origin;\n let end = end + scroll_offset + bounds.origin;\n return Some((start, end));\n }\n\n None\n}\n\n#[cfg(test)]\nmod tests {\n use super::*;\n use gpui::point;\n\n #[test]\n fn test_text_view_state_selection_points() {\n assert_eq!(\n selection_points(None, None, Default::default(), Point::default()),\n None\n );\n assert_eq!(\n selection_points(\n None,\n Some(point(px(10.), px(20.))),\n Default::default(),\n Point::default()\n ),\n None\n );\n assert_eq!(\n selection_points(\n Some(point(px(10.), px(20.))),\n None,\n Default::default(),\n Point::default()\n ),\n None\n );\n\n // 10,10 start\n // |------|\n // | |\n // |------|\n // 50,50\n assert_eq!(\n selection_points(\n Some(point(px(10.), px(10.))),\n Some(point(px(50.), px(50.))),\n Default::default(),\n Point::default()\n ),\n Some((point(px(10.), px(10.)), point(px(50.), px(50.))))\n );\n\n // 10,10\n // |------|\n // | |\n // |------|\n // 50,50 start\n assert_eq!(\n selection_points(\n Some(point(px(50.), px(50.))),\n Some(point(px(10.), px(10.))),\n Default::default(),\n Point::default()\n ),\n Some((point(px(50.), px(50.)), point(px(10.), px(10.))))\n );\n\n // 50,10 start\n // |------|\n // | |\n // |------|\n // 10,50\n assert_eq!(\n selection_points(\n Some(point(px(50.), px(10.))),\n Some(point(px(10.), px(50.))),\n Default::default(),\n Point::default()\n ),\n Some((point(px(50.), px(10.)), point(px(10.), px(50.))))\n );\n\n // 50,10\n // |------|\n // | |\n // |------|\n // 10,50 start\n assert_eq!(\n selection_points(\n Some(point(px(10.), px(50.))),\n Some(point(px(50.), px(10.))),\n Default::default(),\n Point::default()\n ),\n Some((point(px(10.), px(50.)), point(px(50.), px(10.))))\n );\n }\n}\n" }, { "path": "crates/ui/src/text/style.rs", "content": "use std::sync::Arc;\n\nuse gpui::{Pixels, Rems, StyleRefinement, px, rems};\n\nuse crate::highlighter::HighlightTheme;\n\n/// TextViewStyle used to customize the style for [`TextView`].\n#[derive(Clone)]\npub struct TextViewStyle {\n /// Gap of each paragraphs, default is 1 rem.\n pub paragraph_gap: Rems,\n /// Base font size for headings, default is 14px.\n pub heading_base_font_size: Pixels,\n /// Function to calculate heading font size based on heading level (1-6).\n ///\n /// The first parameter is the heading level (1-6), the second parameter is the base font size.\n /// The second parameter is the base font size.\n pub heading_font_size: Option Pixels + Send + Sync + 'static>>,\n /// Highlight theme for code blocks. Default: [`HighlightTheme::default_light()`]\n pub highlight_theme: Arc,\n /// The style refinement for code blocks.\n pub code_block: StyleRefinement,\n pub is_dark: bool,\n}\n\nimpl PartialEq for TextViewStyle {\n fn eq(&self, other: &Self) -> bool {\n self.paragraph_gap == other.paragraph_gap\n && self.heading_base_font_size == other.heading_base_font_size\n && self.highlight_theme == other.highlight_theme\n }\n}\n\nimpl Default for TextViewStyle {\n fn default() -> Self {\n Self {\n paragraph_gap: rems(1.),\n heading_base_font_size: px(14.),\n heading_font_size: None,\n highlight_theme: HighlightTheme::default_light().clone(),\n code_block: StyleRefinement::default(),\n is_dark: false,\n }\n }\n}\n\nimpl TextViewStyle {\n /// Set paragraph gap, default is 1 rem.\n pub fn paragraph_gap(mut self, gap: Rems) -> Self {\n self.paragraph_gap = gap;\n self\n }\n\n pub fn heading_font_size(mut self, f: F) -> Self\n where\n F: Fn(u8, Pixels) -> Pixels + Send + Sync + 'static,\n {\n self.heading_font_size = Some(Arc::new(f));\n self\n }\n\n /// Set style for code blocks.\n pub fn code_block(mut self, style: StyleRefinement) -> Self {\n self.code_block = style;\n self\n }\n}\n" }, { "path": "crates/ui/src/text/text_view.rs", "content": "use std::sync::Arc;\n\nuse gpui::prelude::FluentBuilder as _;\nuse gpui::{\n AnyElement, App, Bounds, Element, ElementId, Entity, GlobalElementId, Hitbox, HitboxBehavior,\n InspectorElementId, InteractiveElement, IntoElement, LayoutId, MouseDownEvent, MouseMoveEvent,\n MouseUpEvent, ParentElement, Pixels, SharedString, StyleRefinement, Styled, Window, div,\n};\n\nuse crate::StyledExt;\nuse crate::scroll::ScrollableElement;\nuse crate::text::TextViewFormat;\nuse crate::text::node::CodeBlock;\nuse crate::text::state::TextViewState;\nuse crate::{global_state::GlobalState, text::TextViewStyle};\n\n/// Type for code block actions generator function.\npub(crate) type CodeBlockActionsFn =\n dyn Fn(&CodeBlock, &mut Window, &mut App) -> AnyElement + Send + Sync;\n\n/// A text view that can render Markdown or HTML.\n///\n/// ## Goals\n///\n/// - Provide a rich text rendering component for such as Markdown or HTML,\n/// used to display rich text in GPUI application (e.g., Help messages, Release notes)\n/// - Support Markdown GFM and HTML (Simple HTML like Safari Reader Mode) for showing most common used markups.\n/// - Support Heading, Paragraph, Bold, Italic, StrikeThrough, Code, Link, Image, Blockquote, List, Table, HorizontalRule, CodeBlock ...\n///\n/// ## Not Goals\n///\n/// - Customization of the complex style (some simple styles will be supported)\n/// - As a Markdown editor or viewer (If you want to like this, you must fork your version).\n/// - As a HTML viewer, we not support CSS, we only support basic HTML tags for used to as a content reader.\n///\n/// See also [`MarkdownElement`], [`HtmlElement`]\n#[derive(Clone)]\npub struct TextView {\n id: ElementId,\n format: Option,\n text: Option,\n pub(crate) state: Option>,\n text_view_style: TextViewStyle,\n style: StyleRefinement,\n selectable: bool,\n scrollable: bool,\n code_block_actions: Option>,\n}\n\nimpl Styled for TextView {\n fn style(&mut self) -> &mut StyleRefinement {\n &mut self.style\n }\n}\n\nimpl TextView {\n /// Create new TextView with managed state.\n pub fn new(state: &Entity) -> Self {\n Self {\n id: ElementId::Name(state.entity_id().to_string().into()),\n state: Some(state.clone()),\n format: None,\n text: None,\n text_view_style: TextViewStyle::default(),\n style: StyleRefinement::default(),\n selectable: false,\n scrollable: false,\n code_block_actions: None,\n }\n }\n\n /// Create a new markdown text view.\n pub fn markdown(id: impl Into, markdown: impl Into) -> Self {\n Self {\n id: id.into(),\n format: Some(TextViewFormat::Markdown),\n text: Some(markdown.into()),\n text_view_style: TextViewStyle::default(),\n style: StyleRefinement::default(),\n state: None,\n selectable: false,\n scrollable: false,\n code_block_actions: None,\n }\n }\n\n /// Create a new html text view.\n pub fn html(id: impl Into, html: impl Into) -> Self {\n Self {\n id: id.into(),\n format: Some(TextViewFormat::Html),\n text: Some(html.into()),\n text_view_style: TextViewStyle::default(),\n style: StyleRefinement::default(),\n state: None,\n selectable: false,\n scrollable: false,\n code_block_actions: None,\n }\n }\n\n /// Set [`TextViewStyle`].\n pub fn style(mut self, style: TextViewStyle) -> Self {\n self.text_view_style = style;\n self\n }\n\n /// Set the text view to be selectable, default is false.\n pub fn selectable(mut self, selectable: bool) -> Self {\n self.selectable = selectable;\n self\n }\n\n /// Set the text view to be scrollable, default is false.\n ///\n /// ## If true for `scrollable`\n ///\n /// The `scrollable` mode used for large content,\n /// will show scrollbar, but requires the parent to have a fixed height,\n /// and use [`gpui::list`] to render the content in a virtualized way.\n ///\n /// ## If false to fit content\n ///\n /// The TextView will expand to fit all content, no scrollbar.\n /// This mode is suitable for small content, such as a few lines of text, a label, etc.\n pub fn scrollable(mut self, scrollable: bool) -> Self {\n self.scrollable = scrollable;\n self\n }\n\n /// Set custom block actions for code blocks.\n ///\n /// The closure receives the [`CodeBlock`],\n /// and returns an element to display.\n pub fn code_block_actions(mut self, f: F) -> Self\n where\n F: Fn(&CodeBlock, &mut Window, &mut App) -> E + Send + Sync + 'static,\n E: IntoElement,\n {\n self.code_block_actions = Some(Arc::new(move |code_block, window, cx| {\n f(&code_block, window, cx).into_any_element()\n }));\n self\n }\n}\n\nimpl IntoElement for TextView {\n type Element = Self;\n\n fn into_element(self) -> Self::Element {\n self\n }\n}\n\npub struct TextViewLayoutState {\n state: Entity,\n element: AnyElement,\n}\n\nimpl Element for TextView {\n type RequestLayoutState = TextViewLayoutState;\n type PrepaintState = Hitbox;\n\n fn id(&self) -> Option {\n Some(self.id.clone())\n }\n\n fn source_location(&self) -> Option<&'static std::panic::Location<'static>> {\n None\n }\n\n fn request_layout(\n &mut self,\n _: Option<&GlobalElementId>,\n _: Option<&InspectorElementId>,\n window: &mut Window,\n cx: &mut App,\n ) -> (LayoutId, Self::RequestLayoutState) {\n let state = if let Some(state) = self.state.clone() {\n state\n } else {\n let default_format = self.format.unwrap_or(TextViewFormat::Markdown);\n let default_text = self.text.clone().unwrap_or_default();\n\n let state = window.use_keyed_state(\n SharedString::from(format!(\"{}/state\", self.id)),\n cx,\n move |_, cx| {\n if default_format == TextViewFormat::Markdown {\n TextViewState::markdown(default_text.as_str(), cx)\n } else {\n TextViewState::html(default_text.as_str(), cx)\n }\n },\n );\n self.state = Some(state.clone());\n state\n };\n\n state.update(cx, |state, cx| {\n state.code_block_actions = self.code_block_actions.clone();\n state.selectable = self.selectable;\n state.scrollable = self.scrollable;\n state.text_view_style = self.text_view_style.clone();\n\n if let Some(text) = self.text.clone() {\n state.set_text(text.as_str(), cx);\n }\n });\n\n let focus_handle = state.read(cx).focus_handle.clone();\n let list_state = state.read(cx).list_state.clone();\n\n let mut el = div()\n .key_context(\"TextView\")\n .track_focus(&focus_handle)\n .when(self.scrollable, |this| {\n this.size_full().vertical_scrollbar(&list_state)\n })\n .relative()\n .on_action(window.listener_for(&state, TextViewState::on_action_copy))\n .child(state.clone())\n .refine_style(&self.style)\n .into_any_element();\n let layout_id = el.request_layout(window, cx);\n (layout_id, TextViewLayoutState { state, element: el })\n }\n\n fn prepaint(\n &mut self,\n _: Option<&GlobalElementId>,\n _: Option<&InspectorElementId>,\n bounds: Bounds,\n request_layout: &mut Self::RequestLayoutState,\n window: &mut Window,\n cx: &mut App,\n ) -> Self::PrepaintState {\n request_layout.element.prepaint(window, cx);\n window.insert_hitbox(bounds, HitboxBehavior::Normal)\n }\n\n fn paint(\n &mut self,\n _: Option<&GlobalElementId>,\n _: Option<&InspectorElementId>,\n _bounds: Bounds,\n request_layout: &mut Self::RequestLayoutState,\n hitbox: &mut Self::PrepaintState,\n window: &mut Window,\n cx: &mut App,\n ) {\n let state = &request_layout.state;\n GlobalState::global_mut(cx)\n .text_view_state_stack\n .push(state.clone());\n request_layout.element.paint(window, cx);\n GlobalState::global_mut(cx).text_view_state_stack.pop();\n\n if self.selectable {\n let is_selecting = state.read(cx).is_selecting;\n let has_selection = state.read(cx).has_selection();\n let parent_view_id = window.current_view();\n\n window.on_mouse_event({\n let state = state.clone();\n let hitbox = hitbox.clone();\n move |event: &MouseDownEvent, phase, window, cx| {\n if !phase.bubble() || !hitbox.is_hovered(window) {\n return;\n }\n\n state.update(cx, |state, _| {\n state.start_selection(event.position);\n });\n cx.notify(parent_view_id);\n }\n });\n\n if is_selecting {\n // move to update end position.\n window.on_mouse_event({\n let state = state.clone();\n move |event: &MouseMoveEvent, phase, _, cx| {\n if !phase.bubble() {\n return;\n }\n\n state.update(cx, |state, _| {\n state.update_selection(event.position);\n });\n cx.notify(parent_view_id);\n }\n });\n\n // up to end selection\n window.on_mouse_event({\n let state = state.clone();\n move |_: &MouseUpEvent, phase, _, cx| {\n if !phase.bubble() {\n return;\n }\n\n state.update(cx, |state, _| {\n state.end_selection();\n });\n cx.notify(parent_view_id);\n }\n });\n }\n\n if has_selection {\n // down outside to clear selection\n window.on_mouse_event({\n let state = state.clone();\n let hitbox = hitbox.clone();\n move |_: &MouseDownEvent, _, window, cx| {\n if hitbox.is_hovered(window) {\n return;\n }\n\n state.update(cx, |state, _| {\n state.clear_selection();\n });\n cx.notify(parent_view_id);\n }\n });\n }\n }\n }\n}\n\n#[cfg(test)]\nmod tests {\n use super::TextView;\n use crate::text::TextViewState;\n use gpui::{\n AppContext as _, Context, Entity, IntoElement, Modifiers, MouseButton, ParentElement as _,\n Render, Styled as _, TestAppContext, VisualTestContext, Window, div, point, px,\n };\n\n struct TextViewTestRoot {\n text_view: Entity,\n }\n\n impl TextViewTestRoot {\n fn new(text: &str, cx: &mut Context) -> Self {\n let text = text.to_string();\n let text_view = cx.new(|cx| TextViewState::markdown(&text, cx));\n Self { text_view }\n }\n }\n\n impl Render for TextViewTestRoot {\n fn render(&mut self, _window: &mut Window, _cx: &mut Context) -> impl IntoElement {\n div()\n .w(px(160.))\n .child(\n div()\n .h(px(24.))\n .overflow_hidden()\n .child(TextView::new(&self.text_view).selectable(true)),\n )\n .child(div().h(px(40.)).child(\"footer\"))\n }\n }\n\n #[gpui::test]\n fn clipped_markdown_link_does_not_open(cx: &mut TestAppContext) {\n cx.update(crate::init);\n let (_, cx) = cx.add_window_view(|_, cx| {\n TextViewTestRoot::new(\"visible\\n\\n[hidden](https://example.com)\", cx)\n });\n let cx: &mut VisualTestContext = cx;\n\n cx.simulate_click(point(px(10.), px(34.)), Modifiers::default());\n\n assert_eq!(cx.opened_url(), None);\n }\n\n #[gpui::test]\n fn clipped_markdown_cannot_start_selection(cx: &mut TestAppContext) {\n cx.update(crate::init);\n let (view, cx) = cx\n .add_window_view(|_, cx| TextViewTestRoot::new(\"visible\\n\\nhidden selection text\", cx));\n let cx: &mut VisualTestContext = cx;\n\n cx.simulate_mouse_down(\n point(px(10.), px(34.)),\n MouseButton::Left,\n Modifiers::default(),\n );\n cx.simulate_mouse_move(\n point(px(90.), px(34.)),\n Some(MouseButton::Left),\n Modifiers::default(),\n );\n cx.simulate_mouse_up(\n point(px(90.), px(34.)),\n MouseButton::Left,\n Modifiers::default(),\n );\n\n let selected_text = view.read_with(cx, |root, cx| root.text_view.read(cx).selected_text());\n assert!(\n selected_text.is_empty(),\n \"unexpected selection: {selected_text:?}\"\n );\n }\n}\n" }, { "path": "crates/ui/src/text/utils.rs", "content": "const NUMBERED_PREFIXES_1: &str = \"ABCDEFGHIJKLMNOPQRSTUVWXYZ\";\nconst NUMBERED_PREFIXES_2: &str = \"abcdefghijklmnopqrstuvwxyz\";\n\nconst BULLETS: [&str; 5] = [\"•\", \"◦\", \"▪\", \"‣\", \"⁃\"];\n\n/// Returns the prefix for a list item.\npub(super) fn list_item_prefix(ix: usize, ordered: bool, depth: usize) -> String {\n if ordered {\n if depth == 0 {\n return format!(\"{}. \", ix + 1);\n }\n\n if depth == 1 {\n return format!(\n \"{}. \",\n NUMBERED_PREFIXES_1\n .chars()\n .nth(ix % NUMBERED_PREFIXES_1.len())\n .unwrap()\n );\n } else {\n return format!(\n \"{}. \",\n NUMBERED_PREFIXES_2\n .chars()\n .nth(ix % NUMBERED_PREFIXES_2.len())\n .unwrap()\n );\n }\n } else {\n let depth = depth.min(BULLETS.len() - 1);\n let bullet = BULLETS[depth];\n return format!(\"{} \", bullet);\n }\n}\n\n#[cfg(test)]\nmod tests {\n use crate::text::utils::list_item_prefix;\n\n #[test]\n fn test_list_item_prefix() {\n assert_eq!(list_item_prefix(0, true, 0), \"1. \");\n assert_eq!(list_item_prefix(1, true, 0), \"2. \");\n assert_eq!(list_item_prefix(2, true, 0), \"3. \");\n assert_eq!(list_item_prefix(10, true, 0), \"11. \");\n assert_eq!(list_item_prefix(0, true, 1), \"A. \");\n assert_eq!(list_item_prefix(1, true, 1), \"B. \");\n assert_eq!(list_item_prefix(2, true, 1), \"C. \");\n assert_eq!(list_item_prefix(0, true, 2), \"a. \");\n assert_eq!(list_item_prefix(1, true, 2), \"b. \");\n assert_eq!(list_item_prefix(6, true, 2), \"g. \");\n assert_eq!(list_item_prefix(0, true, 1), \"A. \");\n assert_eq!(list_item_prefix(0, true, 2), \"a. \");\n assert_eq!(list_item_prefix(0, false, 0), \"• \");\n assert_eq!(list_item_prefix(0, false, 1), \"◦ \");\n assert_eq!(list_item_prefix(0, false, 2), \"▪ \");\n assert_eq!(list_item_prefix(0, false, 3), \"‣ \");\n assert_eq!(list_item_prefix(0, false, 4), \"⁃ \");\n }\n}\n" }, { "path": "crates/ui/src/theme/color.rs", "content": "use std::{collections::HashMap, fmt::Display};\n\nuse gpui::{Hsla, SharedString, hsla};\nuse serde::{Deserialize, Deserializer, de::Error as _};\n\nuse anyhow::{Error, Result, anyhow};\n\n/// Create a [`gpui::Hsla`] color.\n///\n/// - h: 0..360.0\n/// - s: 0.0..100.0\n/// - l: 0.0..100.0\n#[inline]\npub fn hsl(h: f32, s: f32, l: f32) -> Hsla {\n hsla(h / 360., s / 100.0, l / 100.0, 1.0)\n}\n\npub trait Colorize: Sized {\n /// Returns a new color with the given opacity.\n ///\n /// The opacity is a value between 0.0 and 1.0, where 0.0 is fully transparent and 1.0 is fully opaque.\n fn opacity(&self, opacity: f32) -> Self;\n /// Returns a new color with each channel divided by the given divisor.\n ///\n /// The divisor in range of 0.0 .. 1.0\n fn divide(&self, divisor: f32) -> Self;\n /// Return inverted color\n fn invert(&self) -> Self;\n /// Return inverted lightness\n fn invert_l(&self) -> Self;\n /// Return a new color with the lightness increased by the given factor.\n ///\n /// factor range: 0.0 .. 1.0\n fn lighten(&self, amount: f32) -> Self;\n /// Return a new color with the darkness increased by the given factor.\n ///\n /// factor range: 0.0 .. 1.0\n fn darken(&self, amount: f32) -> Self;\n /// Return a new color with the same lightness and alpha but different hue and saturation.\n fn apply(&self, base_color: Self) -> Self;\n\n /// Mix two colors together, the `factor` is a value between 0.0 and 1.0 for first color.\n fn mix(&self, other: Self, factor: f32) -> Self;\n /// Mix two colors together in Oklab color space, the `factor` is a value between 0.0 and 1.0 for first color.\n ///\n /// This is similar to CSS `color-mix(in oklab, color1 factor%, color2)`.\n fn mix_oklab(&self, other: Self, factor: f32) -> Self;\n /// Change the `Hue` of the color by the given in range: 0.0 .. 1.0\n fn hue(&self, hue: f32) -> Self;\n /// Change the `Saturation` of the color by the given value in range: 0.0 .. 1.0\n fn saturation(&self, saturation: f32) -> Self;\n /// Change the `Lightness` of the color by the given value in range: 0.0 .. 1.0\n fn lightness(&self, lightness: f32) -> Self;\n\n /// Convert the color to a hex string. For example, \"#F8FAFC\".\n fn to_hex(&self) -> String;\n /// Parse a hex string to a color.\n fn parse_hex(hex: &str) -> Result;\n}\n\n/// Helper functions for Oklab color space conversions\nmod oklab {\n use gpui::Rgba;\n\n /// Convert sRGB component to linear RGB\n #[inline]\n fn to_linear(c: f32) -> f32 {\n if c <= 0.04045 {\n c / 12.92\n } else {\n ((c + 0.055) / 1.055).powf(2.4)\n }\n }\n\n /// Convert linear RGB component to sRGB\n #[inline]\n fn from_linear(c: f32) -> f32 {\n if c <= 0.0031308 {\n c * 12.92\n } else {\n 1.055 * c.powf(1.0 / 2.4) - 0.055\n }\n }\n\n /// Convert RGB to Oklab color space\n #[allow(non_snake_case)]\n pub fn rgb_to_oklab(rgb: Rgba) -> (f32, f32, f32) {\n // sRGB to linear RGB\n let lr = to_linear(rgb.r);\n let lg = to_linear(rgb.g);\n let lb = to_linear(rgb.b);\n\n // Linear RGB to LMS\n let l = 0.4122214708 * lr + 0.5363325363 * lg + 0.0514459929 * lb;\n let m = 0.2119034982 * lr + 0.6806995451 * lg + 0.1073969566 * lb;\n let s = 0.0883024619 * lr + 0.2817188376 * lg + 0.6299787005 * lb;\n\n // LMS to Oklab (using cube root)\n let l_ = l.cbrt();\n let m_ = m.cbrt();\n let s_ = s.cbrt();\n\n let L = 0.2104542553 * l_ + 0.7936177850 * m_ - 0.0040720468 * s_;\n let a = 1.9779984951 * l_ - 2.4285922050 * m_ + 0.4505937099 * s_;\n let b = 0.0259040371 * l_ + 0.7827717662 * m_ - 0.8086757660 * s_;\n\n (L, a, b)\n }\n\n /// Convert Oklab to RGB color space\n #[allow(non_snake_case)]\n pub fn oklab_to_rgb(L: f32, a: f32, b: f32) -> Rgba {\n // Oklab to LMS\n let l_ = L + 0.3963377774 * a + 0.2158037573 * b;\n let m_ = L - 0.1055613458 * a - 0.0638541728 * b;\n let s_ = L - 0.0894841775 * a - 1.2914855480 * b;\n\n let l = l_ * l_ * l_;\n let m = m_ * m_ * m_;\n let s = s_ * s_ * s_;\n\n // LMS to Linear RGB\n let lr = 4.0767416621 * l - 3.3077115913 * m + 0.2309699292 * s;\n let lg = -1.2684380046 * l + 2.6097574011 * m - 0.3413193965 * s;\n let lb = -0.0041960863 * l - 0.7034186147 * m + 1.7076147010 * s;\n\n // Linear RGB to sRGB\n Rgba {\n r: from_linear(lr).clamp(0.0, 1.0),\n g: from_linear(lg).clamp(0.0, 1.0),\n b: from_linear(lb).clamp(0.0, 1.0),\n a: 1.0,\n }\n }\n}\n\nimpl Colorize for Hsla {\n fn opacity(&self, factor: f32) -> Self {\n Self {\n a: self.a * factor.clamp(0.0, 1.0),\n ..*self\n }\n }\n\n fn divide(&self, divisor: f32) -> Self {\n Self {\n a: divisor,\n ..*self\n }\n }\n\n fn invert(&self) -> Self {\n Self {\n h: 1.0 - self.h,\n s: 1.0 - self.s,\n l: 1.0 - self.l,\n a: self.a,\n }\n }\n\n fn invert_l(&self) -> Self {\n Self {\n l: 1.0 - self.l,\n ..*self\n }\n }\n\n fn lighten(&self, factor: f32) -> Self {\n let l = self.l * (1.0 + factor.clamp(0.0, 1.0));\n\n Hsla { l, ..*self }\n }\n\n fn darken(&self, factor: f32) -> Self {\n let l = self.l * (1.0 - factor.clamp(0.0, 1.0));\n\n Self { l, ..*self }\n }\n\n fn apply(&self, new_color: Self) -> Self {\n Hsla {\n h: new_color.h,\n s: new_color.s,\n l: self.l,\n a: self.a,\n }\n }\n\n /// Reference:\n /// https://github.com/bevyengine/bevy/blob/85eceb022da0326b47ac2b0d9202c9c9f01835bb/crates/bevy_color/src/hsla.rs#L112\n fn mix(&self, other: Self, factor: f32) -> Self {\n let factor = factor.clamp(0.0, 1.0);\n let inv = 1.0 - factor;\n\n #[inline]\n fn lerp_hue(a: f32, b: f32, t: f32) -> f32 {\n let diff = (b - a + 180.0).rem_euclid(360.) - 180.;\n (a + diff * t).rem_euclid(360.0)\n }\n\n Hsla {\n h: lerp_hue(self.h * 360., other.h * 360., factor) / 360.,\n s: self.s * factor + other.s * inv,\n l: self.l * factor + other.l * inv,\n a: self.a * factor + other.a * inv,\n }\n }\n\n #[allow(non_snake_case)]\n fn mix_oklab(&self, other: Self, factor: f32) -> Self {\n let factor = factor.clamp(0.0, 1.0);\n let inv = 1.0 - factor;\n\n // Interpolate alpha first\n let result_alpha = self.a * factor + other.a * inv;\n\n // Handle the case where result alpha is zero\n if result_alpha == 0.0 {\n return Self {\n h: 0.0,\n s: 0.0,\n l: 0.0,\n a: 0.0,\n };\n }\n\n // Convert both colors to RGB\n let rgb1 = self.to_rgb();\n let rgb2 = other.to_rgb();\n\n // Convert to Oklab color space\n let (l1, a1, b1) = oklab::rgb_to_oklab(rgb1);\n let (l2, a2, b2) = oklab::rgb_to_oklab(rgb2);\n\n // Premultiply alpha in Oklab space (using alpha-premultiplied interpolation)\n // This matches CSS color-mix behavior\n let alpha1 = self.a;\n let alpha2 = other.a;\n\n // Premultiply\n let l1_pm = l1 * alpha1;\n let a1_pm = a1 * alpha1;\n let b1_pm = b1 * alpha1;\n\n let l2_pm = l2 * alpha2;\n let a2_pm = a2 * alpha2;\n let b2_pm = b2 * alpha2;\n\n // Interpolate premultiplied values\n let L_pm = l1_pm * factor + l2_pm * inv;\n let a_pm = a1_pm * factor + a2_pm * inv;\n let b_pm = b1_pm * factor + b2_pm * inv;\n\n // Unpremultiply\n let L = L_pm / result_alpha;\n let a = a_pm / result_alpha;\n let b = b_pm / result_alpha;\n\n // Convert back to RGB\n let mut rgb = oklab::oklab_to_rgb(L, a, b);\n rgb.a = result_alpha;\n\n // Convert RGB to HSLA\n rgb.into()\n }\n\n fn to_hex(&self) -> String {\n let rgb = self.to_rgb();\n\n if rgb.a < 1. {\n return format!(\n \"#{:02X}{:02X}{:02X}{:02X}\",\n ((rgb.r * 255.) as u32),\n ((rgb.g * 255.) as u32),\n ((rgb.b * 255.) as u32),\n ((self.a * 255.) as u32)\n );\n }\n\n format!(\n \"#{:02X}{:02X}{:02X}\",\n ((rgb.r * 255.) as u32),\n ((rgb.g * 255.) as u32),\n ((rgb.b * 255.) as u32)\n )\n }\n\n fn parse_hex(hex: &str) -> Result {\n let hex = hex.trim_start_matches('#');\n let len = hex.len();\n if len != 6 && len != 8 {\n return Err(anyhow::anyhow!(\"invalid hex color\"));\n }\n\n let r = u8::from_str_radix(&hex[0..2], 16)? as f32 / 255.;\n let g = u8::from_str_radix(&hex[2..4], 16)? as f32 / 255.;\n let b = u8::from_str_radix(&hex[4..6], 16)? as f32 / 255.;\n let a = if len == 8 {\n u8::from_str_radix(&hex[6..8], 16)? as f32 / 255.\n } else {\n 1.\n };\n\n let v = gpui::Rgba { r, g, b, a };\n let color: Hsla = v.into();\n Ok(color)\n }\n\n fn hue(&self, hue: f32) -> Self {\n let mut color = *self;\n color.h = hue.clamp(0., 1.);\n color\n }\n\n fn saturation(&self, saturation: f32) -> Self {\n let mut color = *self;\n color.s = saturation.clamp(0., 1.);\n color\n }\n\n fn lightness(&self, lightness: f32) -> Self {\n let mut color = *self;\n color.l = lightness.clamp(0., 1.);\n color\n }\n}\n\npub(crate) static DEFAULT_COLORS: once_cell::sync::Lazy =\n once_cell::sync::Lazy::new(|| {\n serde_json::from_str(include_str!(\"./default-colors.json\"))\n .expect(\"failed to parse default-colors.json\")\n });\n\ntype ColorScales = HashMap;\n\nmod color_scales {\n use std::collections::HashMap;\n\n use super::{ColorScales, ShadcnColor};\n\n use serde::de::{Deserialize, Deserializer};\n\n pub fn deserialize<'de, D>(deserializer: D) -> Result\n where\n D: Deserializer<'de>,\n {\n let mut map = HashMap::new();\n for color in Vec::::deserialize(deserializer)? {\n map.insert(color.scale, color);\n }\n Ok(map)\n }\n}\n\n/// Enum representing the available color names.\n#[derive(Debug, Clone, Copy, PartialEq, Eq, Hash)]\npub enum ColorName {\n White,\n Black,\n Neutral,\n Gray,\n Red,\n Orange,\n Amber,\n Yellow,\n Lime,\n Green,\n Emerald,\n Teal,\n Cyan,\n Sky,\n Blue,\n Indigo,\n Violet,\n Purple,\n Fuchsia,\n Pink,\n Rose,\n}\n\nimpl Display for ColorName {\n fn fmt(&self, f: &mut std::fmt::Formatter<'_>) -> std::fmt::Result {\n write!(f, \"{:?}\", self)\n }\n}\n\n// Strict color name parser.\nimpl TryFrom<&str> for ColorName {\n type Error = anyhow::Error;\n fn try_from(value: &str) -> std::result::Result {\n match value.to_lowercase().as_str() {\n \"white\" => Ok(ColorName::White),\n \"black\" => Ok(ColorName::Black),\n \"neutral\" => Ok(ColorName::Neutral),\n \"gray\" => Ok(ColorName::Gray),\n \"red\" => Ok(ColorName::Red),\n \"orange\" => Ok(ColorName::Orange),\n \"amber\" => Ok(ColorName::Amber),\n \"yellow\" => Ok(ColorName::Yellow),\n \"lime\" => Ok(ColorName::Lime),\n \"green\" => Ok(ColorName::Green),\n \"emerald\" => Ok(ColorName::Emerald),\n \"teal\" => Ok(ColorName::Teal),\n \"cyan\" => Ok(ColorName::Cyan),\n \"sky\" => Ok(ColorName::Sky),\n \"blue\" => Ok(ColorName::Blue),\n \"indigo\" => Ok(ColorName::Indigo),\n \"violet\" => Ok(ColorName::Violet),\n \"purple\" => Ok(ColorName::Purple),\n \"fuchsia\" => Ok(ColorName::Fuchsia),\n \"pink\" => Ok(ColorName::Pink),\n \"rose\" => Ok(ColorName::Rose),\n _ => Err(anyhow::anyhow!(\"Invalid color name\")),\n }\n }\n}\n\nimpl TryFrom for ColorName {\n type Error = anyhow::Error;\n fn try_from(value: SharedString) -> std::result::Result {\n value.as_ref().try_into()\n }\n}\n\nimpl ColorName {\n /// Returns all available color names.\n pub fn all() -> [Self; 19] {\n [\n ColorName::Neutral,\n ColorName::Gray,\n ColorName::Red,\n ColorName::Orange,\n ColorName::Amber,\n ColorName::Yellow,\n ColorName::Lime,\n ColorName::Green,\n ColorName::Emerald,\n ColorName::Teal,\n ColorName::Cyan,\n ColorName::Sky,\n ColorName::Blue,\n ColorName::Indigo,\n ColorName::Violet,\n ColorName::Purple,\n ColorName::Fuchsia,\n ColorName::Pink,\n ColorName::Rose,\n ]\n }\n\n /// Returns the color for the given scale.\n ///\n /// The `scale` is any of `[50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950]`\n /// falls back to 500 if out of range.\n pub fn scale(&self, scale: usize) -> Hsla {\n if self == &ColorName::White {\n return DEFAULT_COLORS.white.hsla;\n }\n if self == &ColorName::Black {\n return DEFAULT_COLORS.black.hsla;\n }\n\n let colors = match self {\n ColorName::Neutral => &DEFAULT_COLORS.neutral,\n ColorName::Gray => &DEFAULT_COLORS.gray,\n ColorName::Red => &DEFAULT_COLORS.red,\n ColorName::Orange => &DEFAULT_COLORS.orange,\n ColorName::Amber => &DEFAULT_COLORS.amber,\n ColorName::Yellow => &DEFAULT_COLORS.yellow,\n ColorName::Lime => &DEFAULT_COLORS.lime,\n ColorName::Green => &DEFAULT_COLORS.green,\n ColorName::Emerald => &DEFAULT_COLORS.emerald,\n ColorName::Teal => &DEFAULT_COLORS.teal,\n ColorName::Cyan => &DEFAULT_COLORS.cyan,\n ColorName::Sky => &DEFAULT_COLORS.sky,\n ColorName::Blue => &DEFAULT_COLORS.blue,\n ColorName::Indigo => &DEFAULT_COLORS.indigo,\n ColorName::Violet => &DEFAULT_COLORS.violet,\n ColorName::Purple => &DEFAULT_COLORS.purple,\n ColorName::Fuchsia => &DEFAULT_COLORS.fuchsia,\n ColorName::Pink => &DEFAULT_COLORS.pink,\n ColorName::Rose => &DEFAULT_COLORS.rose,\n _ => unreachable!(),\n };\n\n if let Some(color) = colors.get(&scale) {\n color.hsla\n } else {\n colors.get(&500).unwrap().hsla\n }\n }\n}\n\n#[derive(Debug, Clone, PartialEq, Eq, serde::Deserialize)]\npub(crate) struct ShadcnColors {\n pub(crate) black: ShadcnColor,\n pub(crate) white: ShadcnColor,\n #[serde(with = \"color_scales\")]\n pub(crate) slate: ColorScales,\n #[serde(with = \"color_scales\")]\n pub(crate) gray: ColorScales,\n #[serde(with = \"color_scales\")]\n pub(crate) zinc: ColorScales,\n #[serde(with = \"color_scales\")]\n pub(crate) neutral: ColorScales,\n #[serde(with = \"color_scales\")]\n pub(crate) stone: ColorScales,\n #[serde(with = \"color_scales\")]\n pub(crate) red: ColorScales,\n #[serde(with = \"color_scales\")]\n pub(crate) orange: ColorScales,\n #[serde(with = \"color_scales\")]\n pub(crate) amber: ColorScales,\n #[serde(with = \"color_scales\")]\n pub(crate) yellow: ColorScales,\n #[serde(with = \"color_scales\")]\n pub(crate) lime: ColorScales,\n #[serde(with = \"color_scales\")]\n pub(crate) green: ColorScales,\n #[serde(with = \"color_scales\")]\n pub(crate) emerald: ColorScales,\n #[serde(with = \"color_scales\")]\n pub(crate) teal: ColorScales,\n #[serde(with = \"color_scales\")]\n pub(crate) cyan: ColorScales,\n #[serde(with = \"color_scales\")]\n pub(crate) sky: ColorScales,\n #[serde(with = \"color_scales\")]\n pub(crate) blue: ColorScales,\n #[serde(with = \"color_scales\")]\n pub(crate) indigo: ColorScales,\n #[serde(with = \"color_scales\")]\n pub(crate) violet: ColorScales,\n #[serde(with = \"color_scales\")]\n pub(crate) purple: ColorScales,\n #[serde(with = \"color_scales\")]\n pub(crate) fuchsia: ColorScales,\n #[serde(with = \"color_scales\")]\n pub(crate) pink: ColorScales,\n #[serde(with = \"color_scales\")]\n pub(crate) rose: ColorScales,\n}\n\n#[derive(Debug, Clone, Copy, PartialEq, Eq, Hash, serde::Deserialize)]\npub(crate) struct ShadcnColor {\n #[serde(default)]\n pub(crate) scale: usize,\n #[serde(deserialize_with = \"from_hsl_channel\", alias = \"hslChannel\")]\n pub(crate) hsla: Hsla,\n}\n\n/// Deserialize Hsla from a string in the format \"210 40% 98%\"\nfn from_hsl_channel<'de, D>(deserializer: D) -> Result\nwhere\n D: Deserializer<'de>,\n{\n let s: String = Deserialize::deserialize(deserializer).unwrap();\n\n let mut parts = s.split_whitespace();\n if parts.clone().count() != 3 {\n return Err(D::Error::custom(\n \"expected hslChannel has 3 parts, e.g: '210 40% 98%'\",\n ));\n }\n\n fn parse_number(s: &str) -> f32 {\n s.trim_end_matches('%')\n .parse()\n .expect(\"failed to parse number\")\n }\n\n let (h, s, l) = (\n parse_number(parts.next().unwrap()),\n parse_number(parts.next().unwrap()),\n parse_number(parts.next().unwrap()),\n );\n\n Ok(hsl(h, s, l))\n}\n\nmacro_rules! color_method {\n ($color:tt, $scale:tt) => {\n paste::paste! {\n #[inline]\n #[allow(unused)]\n pub fn [<$color _ $scale>]() -> Hsla {\n if let Some(color) = DEFAULT_COLORS.$color.get(&($scale as usize)) {\n return color.hsla;\n }\n\n black()\n }\n }\n };\n}\n\nmacro_rules! color_methods {\n ($color:tt) => {\n paste::paste! {\n /// Get color by scale number.\n ///\n /// The possible scale numbers are:\n /// 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950\n ///\n /// If the scale number is not found, it will return black color.\n #[inline]\n pub fn [<$color>](scale: usize) -> Hsla {\n if let Some(color) = DEFAULT_COLORS.$color.get(&scale) {\n return color.hsla;\n }\n\n black()\n }\n }\n\n color_method!($color, 50);\n color_method!($color, 100);\n color_method!($color, 200);\n color_method!($color, 300);\n color_method!($color, 400);\n color_method!($color, 500);\n color_method!($color, 600);\n color_method!($color, 700);\n color_method!($color, 800);\n color_method!($color, 900);\n color_method!($color, 950);\n };\n}\n\npub fn black() -> Hsla {\n DEFAULT_COLORS.black.hsla\n}\n\npub fn white() -> Hsla {\n DEFAULT_COLORS.white.hsla\n}\n\ncolor_methods!(slate);\ncolor_methods!(gray);\ncolor_methods!(zinc);\ncolor_methods!(neutral);\ncolor_methods!(stone);\ncolor_methods!(red);\ncolor_methods!(orange);\ncolor_methods!(amber);\ncolor_methods!(yellow);\ncolor_methods!(lime);\ncolor_methods!(green);\ncolor_methods!(emerald);\ncolor_methods!(teal);\ncolor_methods!(cyan);\ncolor_methods!(sky);\ncolor_methods!(blue);\ncolor_methods!(indigo);\ncolor_methods!(violet);\ncolor_methods!(purple);\ncolor_methods!(fuchsia);\ncolor_methods!(pink);\ncolor_methods!(rose);\n\n/// Try to parse the color, HEX or [Tailwind Color](https://tailwindcss.com/docs/colors) expression.\n///\n/// # Parameter `color` should be one string value listed below:\n///\n/// - `#RRGGBB` - The HEX color string.\n/// - `#RRGGBBAA` - The HEX color string with alpha.\n///\n/// Or the Tailwind Color format:\n///\n/// - `name` - The color name `black`, `white`, or any other defined in `crate::color`.\n/// - `name-scale` - The color name with scale.\n/// - `name/opacity` - The color name with opacity, `opacity` should be an integer between 0 and 100.\n/// - `name-scale/opacity` - The color name with scale and opacity.\n///\npub fn try_parse_color(color: &str) -> Result {\n if color.starts_with(\"#\") {\n let rgba = gpui::Rgba::try_from(color)?;\n return Ok(rgba.into());\n }\n\n let mut name = String::new();\n let mut scale = None;\n let mut opacity = None;\n // 0: name, 1: scale, 2: opacity\n let mut state = 0;\n let mut part = String::new();\n\n for c in color.chars() {\n match c {\n '-' if state == 0 => {\n name = std::mem::take(&mut part);\n state = 1;\n }\n '/' if state <= 1 => {\n if state == 0 {\n name = std::mem::take(&mut part);\n } else if state == 1 {\n scale = part.parse::().ok();\n part.clear();\n }\n state = 2;\n }\n _ => part.push(c),\n }\n }\n\n match state {\n 0 => name = part,\n 1 => scale = part.parse::().ok(),\n 2 => opacity = part.parse::().ok(),\n _ => {}\n }\n\n if name.is_empty() {\n return Err(anyhow!(\"Empty color name\"));\n }\n\n let mut hsla = match name.as_str() {\n \"black\" => Ok::(crate::black()),\n \"white\" => Ok(crate::white()),\n _ => {\n let color_name = ColorName::try_from(name.as_str())?;\n if let Some(scale) = scale {\n Ok(color_name.scale(scale))\n } else {\n Ok(color_name.scale(500))\n }\n }\n }?;\n\n if let Some(opacity) = opacity {\n if opacity > 100. {\n return Err(anyhow!(\"Invalid color opacity\"));\n }\n hsla = hsla.opacity(opacity / 100.);\n }\n\n Ok(hsla)\n}\n\n#[cfg(test)]\nmod tests {\n use gpui::{rgb, rgba};\n\n use super::*;\n\n #[test]\n fn test_default_colors() {\n assert_eq!(white(), hsl(0.0, 0.0, 100.0));\n assert_eq!(black(), hsl(0.0, 0.0, 0.0));\n\n assert_eq!(slate_50(), hsl(210.0, 40.0, 98.0));\n assert_eq!(slate_100(), hsl(210.0, 40.0, 96.1));\n assert_eq!(slate_900(), hsl(222.2, 47.4, 11.2));\n\n assert_eq!(red_50(), hsl(0.0, 85.7, 97.3));\n assert_eq!(yellow_100(), hsl(54.9, 96.7, 88.0));\n assert_eq!(green_200(), hsl(141.0, 78.9, 85.1));\n assert_eq!(cyan_300(), hsl(187.0, 92.4, 69.0));\n assert_eq!(blue_400(), hsl(213.1, 93.9, 67.8));\n assert_eq!(indigo_500(), hsl(238.7, 83.5, 66.7));\n }\n\n #[test]\n fn test_to_hex_string() {\n let color: Hsla = rgb(0xf8fafc).into();\n assert_eq!(color.to_hex(), \"#F8FAFC\");\n\n let color: Hsla = rgb(0xfef2f2).into();\n assert_eq!(color.to_hex(), \"#FEF2F2\");\n\n let color: Hsla = rgba(0x0413fcaa).into();\n assert_eq!(color.to_hex(), \"#0413FCAA\");\n }\n\n #[test]\n fn test_from_hex_string() {\n let color: Hsla = Hsla::parse_hex(\"#F8FAFC\").unwrap();\n assert_eq!(color, rgb(0xf8fafc).into());\n\n let color: Hsla = Hsla::parse_hex(\"#FEF2F2\").unwrap();\n assert_eq!(color, rgb(0xfef2f2).into());\n\n let color: Hsla = Hsla::parse_hex(\"#0413FCAA\").unwrap();\n assert_eq!(color, rgba(0x0413fcaa).into());\n }\n\n #[test]\n fn test_lighten() {\n let color = super::hsl(240.0, 5.0, 30.0);\n let color = color.lighten(0.5);\n assert_eq!(color.l, 0.45000002);\n let color = color.lighten(0.5);\n assert_eq!(color.l, 0.675);\n let color = color.lighten(0.1);\n assert_eq!(color.l, 0.7425);\n }\n\n #[test]\n fn test_darken() {\n let color = super::hsl(240.0, 5.0, 96.0);\n let color = color.darken(0.5);\n assert_eq!(color.l, 0.48);\n let color = color.darken(0.5);\n assert_eq!(color.l, 0.24);\n }\n\n #[test]\n fn test_mix() {\n let red = Hsla::parse_hex(\"#FF0000\").unwrap();\n let blue = Hsla::parse_hex(\"#0000FF\").unwrap();\n let green = Hsla::parse_hex(\"#00FF00\").unwrap();\n let yellow = Hsla::parse_hex(\"#FFFF00\").unwrap();\n\n assert_eq!(red.mix(blue, 0.5).to_hex(), \"#FF00FF\");\n assert_eq!(green.mix(red, 0.5).to_hex(), \"#FFFF00\");\n assert_eq!(blue.mix(yellow, 0.2).to_hex(), \"#0098FF\");\n }\n\n #[test]\n fn test_mix_oklab() {\n let red = Hsla::parse_hex(\"#FF0000\").unwrap();\n let blue = Hsla::parse_hex(\"#0000FF\").unwrap();\n let transparent = gpui::Hsla {\n h: 0.0,\n s: 0.0,\n l: 0.0,\n a: 0.0,\n };\n\n // Test mixing red with transparent (similar to CSS color-mix example)\n // color-mix(in oklab, red 20%, transparent) should give red with 20% opacity\n let result = red.mix_oklab(transparent, 0.2);\n assert!((result.a - 0.2).abs() < 0.01); // Alpha should be 20%\n\n // The color should remain red (hue should be preserved)\n let rgb_result = result.to_rgb();\n let rgb_red = red.to_rgb();\n // Allow some tolerance due to color space conversions\n assert!(\n (rgb_result.r - rgb_red.r).abs() < 0.05,\n \"Red channel should be preserved\"\n );\n assert!(rgb_result.g < 0.05, \"Green channel should be near 0\");\n assert!(rgb_result.b < 0.05, \"Blue channel should be near 0\");\n\n // Test basic color mixing in Oklab space\n let purple = red.mix_oklab(blue, 0.5);\n // Oklab mixing should produce different results than HSL mixing\n let purple_hsl = red.mix(blue, 0.5);\n assert_ne!(purple.to_hex(), purple_hsl.to_hex());\n\n // Test factor boundaries (allowing small floating point errors)\n let result_0 = red.mix_oklab(blue, 0.0);\n let result_1 = red.mix_oklab(blue, 1.0);\n\n // Check that result is close to expected (within 1 color unit per channel)\n let rgb_0 = result_0.to_rgb();\n let rgb_blue = blue.to_rgb();\n assert!((rgb_0.r - rgb_blue.r).abs() < 0.01);\n assert!((rgb_0.g - rgb_blue.g).abs() < 0.01);\n assert!((rgb_0.b - rgb_blue.b).abs() < 0.01);\n\n let rgb_1 = result_1.to_rgb();\n let rgb_red = red.to_rgb();\n assert!((rgb_1.r - rgb_red.r).abs() < 0.01);\n assert!((rgb_1.g - rgb_red.g).abs() < 0.01);\n assert!((rgb_1.b - rgb_red.b).abs() < 0.01);\n }\n\n #[test]\n fn test_color_name() {\n assert_eq!(ColorName::Purple.to_string(), \"Purple\");\n assert_eq!(format!(\"{}\", ColorName::Green), \"Green\");\n assert_eq!(format!(\"{:?}\", ColorName::Yellow), \"Yellow\");\n\n let color = ColorName::Green;\n assert_eq!(color.scale(500).to_hex(), \"#21C55E\");\n assert_eq!(color.scale(1500).to_hex(), \"#21C55E\");\n\n for name in ColorName::all().iter() {\n let name1: ColorName = name.to_string().as_str().try_into().unwrap();\n assert_eq!(name1, *name);\n }\n }\n\n #[test]\n fn test_h_s_l() {\n let color = hsl(260., 94., 80.);\n assert_eq!(color.hue(200. / 360.), hsl(200., 94., 80.));\n assert_eq!(color.saturation(74. / 100.), hsl(260., 74., 80.));\n assert_eq!(color.lightness(74. / 100.), hsl(260., 94., 74.));\n }\n\n #[test]\n fn test_try_parse_color() {\n assert_eq!(\n try_parse_color(\"#F2F200\").ok(),\n Some(hsla(0.16666667, 1., 0.4745098, 1.0))\n );\n assert_eq!(\n try_parse_color(\"#00f21888\").ok(),\n Some(hsla(0.34986225, 1.0, 0.4745098, 0.53333336))\n );\n assert_eq!(try_parse_color(\"black\").ok(), Some(crate::black()));\n assert_eq!(try_parse_color(\"white-800\").ok(), Some(crate::white()));\n assert_eq!(try_parse_color(\"red\").ok(), Some(crate::red_500()));\n assert_eq!(try_parse_color(\"blue-600\").ok(), Some(crate::blue_600()));\n assert_eq!(\n try_parse_color(\"pink/33\").ok(),\n Some(crate::pink_500().opacity(0.33))\n );\n assert_eq!(\n try_parse_color(\"orange-300/66\").ok(),\n Some(crate::orange_300().opacity(0.66))\n );\n }\n}\n" }, { "path": "crates/ui/src/theme/default-colors.json", "content": "{\n \"inherit\": \"inherit\",\n \"_doc\": \"https://github.com/shadcn-ui/ui/blob/a46eea77a6680fc40cee9fa1f209e77931068f35/apps/v4/public/r/colors/index.json\",\n \"current\": \"currentColor\",\n \"transparent\": \"transparent\",\n \"black\": {\n \"hex\": \"#000000\",\n \"rgb\": \"rgb(0,0,0)\",\n \"hsl\": \"hsl(0,0%,0%)\",\n \"oklch\": \"oklch(0.00,0.00,0)\",\n \"rgbChannel\": \"0 0 0\",\n \"hslChannel\": \"0 0% 0%\"\n },\n \"white\": {\n \"hex\": \"#ffffff\",\n \"rgb\": \"rgb(255,255,255)\",\n \"hsl\": \"hsl(0,0%,100%)\",\n \"oklch\": \"oklch(1.00,0.00,0)\",\n \"rgbChannel\": \"255 255 255\",\n \"hslChannel\": \"0 0% 100%\"\n },\n \"slate\": [\n {\n \"scale\": 50,\n \"hex\": \"#f8fafc\",\n \"rgb\": \"rgb(248,250,252)\",\n \"hsl\": \"hsl(210,40%,98%)\",\n \"oklch\": \"oklch(0.98,0.00,248)\",\n \"rgbChannel\": \"248 250 252\",\n \"hslChannel\": \"210 40% 98%\"\n },\n {\n \"scale\": 100,\n \"hex\": \"#f1f5f9\",\n \"rgb\": \"rgb(241,245,249)\",\n \"hsl\": \"hsl(210,40%,96.1%)\",\n \"oklch\": \"oklch(0.97,0.01,248)\",\n \"rgbChannel\": \"241 245 249\",\n \"hslChannel\": \"210 40% 96.1%\"\n },\n {\n \"scale\": 200,\n \"hex\": \"#e2e8f0\",\n \"rgb\": \"rgb(226,232,240)\",\n \"hsl\": \"hsl(214.3,31.8%,91.4%)\",\n \"oklch\": \"oklch(0.93,0.01,256)\",\n \"rgbChannel\": \"226 232 240\",\n \"hslChannel\": \"214.3 31.8% 91.4%\"\n },\n {\n \"scale\": 300,\n \"hex\": \"#cbd5e1\",\n \"rgb\": \"rgb(203,213,225)\",\n \"hsl\": \"hsl(212.7,26.8%,83.9%)\",\n \"oklch\": \"oklch(0.87,0.02,253)\",\n \"rgbChannel\": \"203 213 225\",\n \"hslChannel\": \"212.7 26.8% 83.9%\"\n },\n {\n \"scale\": 400,\n \"hex\": \"#94a3b8\",\n \"rgb\": \"rgb(148,163,184)\",\n \"hsl\": \"hsl(215,20.2%,65.1%)\",\n \"oklch\": \"oklch(0.71,0.04,257)\",\n \"rgbChannel\": \"148 163 184\",\n \"hslChannel\": \"215 20.2% 65.1%\"\n },\n {\n \"scale\": 500,\n \"hex\": \"#64748b\",\n \"rgb\": \"rgb(100,116,139)\",\n \"hsl\": \"hsl(215.4,16.3%,46.9%)\",\n \"oklch\": \"oklch(0.55,0.04,257)\",\n \"rgbChannel\": \"100 116 139\",\n \"hslChannel\": \"215.4 16.3% 46.9%\"\n },\n {\n \"scale\": 600,\n \"hex\": \"#475569\",\n \"rgb\": \"rgb(71,85,105)\",\n \"hsl\": \"hsl(215.3,19.3%,34.5%)\",\n \"oklch\": \"oklch(0.45,0.04,257)\",\n \"rgbChannel\": \"71 85 105\",\n \"hslChannel\": \"215.3 19.3% 34.5%\"\n },\n {\n \"scale\": 700,\n \"hex\": \"#334155\",\n \"rgb\": \"rgb(51,65,85)\",\n \"hsl\": \"hsl(215.3,25%,26.7%)\",\n \"oklch\": \"oklch(0.37,0.04,257)\",\n \"rgbChannel\": \"51 65 85\",\n \"hslChannel\": \"215.3 25% 26.7%\"\n },\n {\n \"scale\": 800,\n \"hex\": \"#1e293b\",\n \"rgb\": \"rgb(30,41,59)\",\n \"hsl\": \"hsl(217.2,32.6%,17.5%)\",\n \"oklch\": \"oklch(0.28,0.04,260)\",\n \"rgbChannel\": \"30 41 59\",\n \"hslChannel\": \"217.2 32.6% 17.5%\"\n },\n {\n \"scale\": 900,\n \"hex\": \"#0f172a\",\n \"rgb\": \"rgb(15,23,42)\",\n \"hsl\": \"hsl(222.2,47.4%,11.2%)\",\n \"oklch\": \"oklch(0.21,0.04,266)\",\n \"rgbChannel\": \"15 23 42\",\n \"hslChannel\": \"222.2 47.4% 11.2%\"\n },\n {\n \"scale\": 950,\n \"hex\": \"#020617\",\n \"rgb\": \"rgb(2,6,23)\",\n \"hsl\": \"hsl(222.2,84%,4.9%)\",\n \"oklch\": \"oklch(0.13,0.04,265)\",\n \"rgbChannel\": \"2 6 23\",\n \"hslChannel\": \"222.2 84% 4.9%\"\n }\n ],\n \"gray\": [\n {\n \"scale\": 50,\n \"hex\": \"#f9fafb\",\n \"rgb\": \"rgb(249,250,251)\",\n \"hsl\": \"hsl(210,20%,98%)\",\n \"oklch\": \"oklch(0.98,0.00,248)\",\n \"rgbChannel\": \"249 250 251\",\n \"hslChannel\": \"210 20% 98%\"\n },\n {\n \"scale\": 100,\n \"hex\": \"#f3f4f6\",\n \"rgb\": \"rgb(243,244,246)\",\n \"hsl\": \"hsl(220,14.3%,95.9%)\",\n \"oklch\": \"oklch(0.97,0.00,265)\",\n \"rgbChannel\": \"243 244 246\",\n \"hslChannel\": \"220 14.3% 95.9%\"\n },\n {\n \"scale\": 200,\n \"hex\": \"#e5e7eb\",\n \"rgb\": \"rgb(229,231,235)\",\n \"hsl\": \"hsl(220,13%,91%)\",\n \"oklch\": \"oklch(0.93,0.01,265)\",\n \"rgbChannel\": \"229 231 235\",\n \"hslChannel\": \"220 13% 91%\"\n },\n {\n \"scale\": 300,\n \"hex\": \"#d1d5db\",\n \"rgb\": \"rgb(209,213,219)\",\n \"hsl\": \"hsl(216,12.2%,83.9%)\",\n \"oklch\": \"oklch(0.87,0.01,258)\",\n \"rgbChannel\": \"209 213 219\",\n \"hslChannel\": \"216 12.2% 83.9%\"\n },\n {\n \"scale\": 400,\n \"hex\": \"#9ca3af\",\n \"rgb\": \"rgb(156,163,175)\",\n \"hsl\": \"hsl(217.9,10.6%,64.9%)\",\n \"oklch\": \"oklch(0.71,0.02,261)\",\n \"rgbChannel\": \"156 163 175\",\n \"hslChannel\": \"217.9 10.6% 64.9%\"\n },\n {\n \"scale\": 500,\n \"hex\": \"#6b7280\",\n \"rgb\": \"rgb(107,114,128)\",\n \"hsl\": \"hsl(220,8.9%,46.1%)\",\n \"oklch\": \"oklch(0.55,0.02,264)\",\n \"rgbChannel\": \"107 114 128\",\n \"hslChannel\": \"220 8.9% 46.1%\"\n },\n {\n \"scale\": 600,\n \"hex\": \"#4b5563\",\n \"rgb\": \"rgb(75,85,99)\",\n \"hsl\": \"hsl(215,13.8%,34.1%)\",\n \"oklch\": \"oklch(0.45,0.03,257)\",\n \"rgbChannel\": \"75 85 99\",\n \"hslChannel\": \"215 13.8% 34.1%\"\n },\n {\n \"scale\": 700,\n \"hex\": \"#374151\",\n \"rgb\": \"rgb(55,65,81)\",\n \"hsl\": \"hsl(216.9,19.1%,26.7%)\",\n \"oklch\": \"oklch(0.37,0.03,260)\",\n \"rgbChannel\": \"55 65 81\",\n \"hslChannel\": \"216.9 19.1% 26.7%\"\n },\n {\n \"scale\": 800,\n \"hex\": \"#1f2937\",\n \"rgb\": \"rgb(31,41,55)\",\n \"hsl\": \"hsl(215,27.9%,16.9%)\",\n \"oklch\": \"oklch(0.28,0.03,257)\",\n \"rgbChannel\": \"31 41 55\",\n \"hslChannel\": \"215 27.9% 16.9%\"\n },\n {\n \"scale\": 900,\n \"hex\": \"#111827\",\n \"rgb\": \"rgb(17,24,39)\",\n \"hsl\": \"hsl(220.9,39.3%,11%)\",\n \"oklch\": \"oklch(0.21,0.03,265)\",\n \"rgbChannel\": \"17 24 39\",\n \"hslChannel\": \"220.9 39.3% 11%\"\n },\n {\n \"scale\": 950,\n \"hex\": \"#030712\",\n \"rgb\": \"rgb(3,7,18)\",\n \"hsl\": \"hsl(224,71.4%,4.1%)\",\n \"oklch\": \"oklch(0.13,0.03,262)\",\n \"rgbChannel\": \"3 7 18\",\n \"hslChannel\": \"224 71.4% 4.1%\"\n }\n ],\n \"zinc\": [\n {\n \"scale\": 50,\n \"hex\": \"#fafafa\",\n \"rgb\": \"rgb(250,250,250)\",\n \"hsl\": \"hsl(0,0%,98%)\",\n \"oklch\": \"oklch(0.99,0.00,0)\",\n \"rgbChannel\": \"250 250 250\",\n \"hslChannel\": \"0 0% 98%\"\n },\n {\n \"scale\": 100,\n \"hex\": \"#f4f4f5\",\n \"rgb\": \"rgb(244,244,245)\",\n \"hsl\": \"hsl(240,4.8%,95.9%)\",\n \"oklch\": \"oklch(0.97,0.00,286)\",\n \"rgbChannel\": \"244 244 245\",\n \"hslChannel\": \"240 4.8% 95.9%\"\n },\n {\n \"scale\": 200,\n \"hex\": \"#e4e4e7\",\n \"rgb\": \"rgb(228,228,231)\",\n \"hsl\": \"hsl(240,5.9%,90%)\",\n \"oklch\": \"oklch(0.92,0.00,286)\",\n \"rgbChannel\": \"228 228 231\",\n \"hslChannel\": \"240 5.9% 90%\"\n },\n {\n \"scale\": 300,\n \"hex\": \"#d4d4d8\",\n \"rgb\": \"rgb(212,212,216)\",\n \"hsl\": \"hsl(240,4.9%,83.9%)\",\n \"oklch\": \"oklch(0.87,0.01,286)\",\n \"rgbChannel\": \"212 212 216\",\n \"hslChannel\": \"240 4.9% 83.9%\"\n },\n {\n \"scale\": 400,\n \"hex\": \"#a1a1aa\",\n \"rgb\": \"rgb(161,161,170)\",\n \"hsl\": \"hsl(240,5%,64.9%)\",\n \"oklch\": \"oklch(0.71,0.01,286)\",\n \"rgbChannel\": \"161 161 170\",\n \"hslChannel\": \"240 5% 64.9%\"\n },\n {\n \"scale\": 500,\n \"hex\": \"#71717a\",\n \"rgb\": \"rgb(113,113,122)\",\n \"hsl\": \"hsl(240,3.8%,46.1%)\",\n \"oklch\": \"oklch(0.55,0.01,286)\",\n \"rgbChannel\": \"113 113 122\",\n \"hslChannel\": \"240 3.8% 46.1%\"\n },\n {\n \"scale\": 600,\n \"hex\": \"#52525b\",\n \"rgb\": \"rgb(82,82,91)\",\n \"hsl\": \"hsl(240,5.2%,33.9%)\",\n \"oklch\": \"oklch(0.44,0.01,286)\",\n \"rgbChannel\": \"82 82 91\",\n \"hslChannel\": \"240 5.2% 33.9%\"\n },\n {\n \"scale\": 700,\n \"hex\": \"#3f3f46\",\n \"rgb\": \"rgb(63,63,70)\",\n \"hsl\": \"hsl(240,5.3%,26.1%)\",\n \"oklch\": \"oklch(0.37,0.01,286)\",\n \"rgbChannel\": \"63 63 70\",\n \"hslChannel\": \"240 5.3% 26.1%\"\n },\n {\n \"scale\": 800,\n \"hex\": \"#27272a\",\n \"rgb\": \"rgb(39,39,42)\",\n \"hsl\": \"hsl(240,3.7%,15.9%)\",\n \"oklch\": \"oklch(0.27,0.01,286)\",\n \"rgbChannel\": \"39 39 42\",\n \"hslChannel\": \"240 3.7% 15.9%\"\n },\n {\n \"scale\": 900,\n \"hex\": \"#18181b\",\n \"rgb\": \"rgb(24,24,27)\",\n \"hsl\": \"hsl(240,5.9%,10%)\",\n \"oklch\": \"oklch(0.21,0.01,286)\",\n \"rgbChannel\": \"24 24 27\",\n \"hslChannel\": \"240 5.9% 10%\"\n },\n {\n \"scale\": 950,\n \"hex\": \"#09090b\",\n \"rgb\": \"rgb(9,9,11)\",\n \"hsl\": \"hsl(240,10%,3.9%)\",\n \"oklch\": \"oklch(0.14,0.00,286)\",\n \"rgbChannel\": \"9 9 11\",\n \"hslChannel\": \"240 10% 3.9%\"\n }\n ],\n \"neutral\": [\n {\n \"scale\": 50,\n \"hex\": \"#fafafa\",\n \"rgb\": \"rgb(250,250,250)\",\n \"hsl\": \"hsl(0,0%,98%)\",\n \"oklch\": \"oklch(0.99,0.00,0)\",\n \"rgbChannel\": \"250 250 250\",\n \"hslChannel\": \"0 0% 98%\"\n },\n {\n \"scale\": 100,\n \"hex\": \"#f5f5f5\",\n \"rgb\": \"rgb(245,245,245)\",\n \"hsl\": \"hsl(0,0%,96.1%)\",\n \"oklch\": \"oklch(0.97,0.00,0)\",\n \"rgbChannel\": \"245 245 245\",\n \"hslChannel\": \"0 0% 96.1%\"\n },\n {\n \"scale\": 200,\n \"hex\": \"#e5e5e5\",\n \"rgb\": \"rgb(229,229,229)\",\n \"hsl\": \"hsl(0,0%,89.8%)\",\n \"oklch\": \"oklch(0.92,0.00,0)\",\n \"rgbChannel\": \"229 229 229\",\n \"hslChannel\": \"0 0% 89.8%\"\n },\n {\n \"scale\": 300,\n \"hex\": \"#d4d4d4\",\n \"rgb\": \"rgb(212,212,212)\",\n \"hsl\": \"hsl(0,0%,83.1%)\",\n \"oklch\": \"oklch(0.87,0.00,0)\",\n \"rgbChannel\": \"212 212 212\",\n \"hslChannel\": \"0 0% 83.1%\"\n },\n {\n \"scale\": 400,\n \"hex\": \"#a3a3a3\",\n \"rgb\": \"rgb(163,163,163)\",\n \"hsl\": \"hsl(0,0%,63.9%)\",\n \"oklch\": \"oklch(0.72,0.00,0)\",\n \"rgbChannel\": \"163 163 163\",\n \"hslChannel\": \"0 0% 63.9%\"\n },\n {\n \"scale\": 500,\n \"hex\": \"#737373\",\n \"rgb\": \"rgb(115,115,115)\",\n \"hsl\": \"hsl(0,0%,45.1%)\",\n \"oklch\": \"oklch(0.56,0.00,0)\",\n \"rgbChannel\": \"115 115 115\",\n \"hslChannel\": \"0 0% 45.1%\"\n },\n {\n \"scale\": 600,\n \"hex\": \"#525252\",\n \"rgb\": \"rgb(82,82,82)\",\n \"hsl\": \"hsl(0,0%,32.2%)\",\n \"oklch\": \"oklch(0.44,0.00,0)\",\n \"rgbChannel\": \"82 82 82\",\n \"hslChannel\": \"0 0% 32.2%\"\n },\n {\n \"scale\": 700,\n \"hex\": \"#404040\",\n \"rgb\": \"rgb(64,64,64)\",\n \"hsl\": \"hsl(0,0%,25.1%)\",\n \"oklch\": \"oklch(0.37,0.00,0)\",\n \"rgbChannel\": \"64 64 64\",\n \"hslChannel\": \"0 0% 25.1%\"\n },\n {\n \"scale\": 800,\n \"hex\": \"#262626\",\n \"rgb\": \"rgb(38,38,38)\",\n \"hsl\": \"hsl(0,0%,14.9%)\",\n \"oklch\": \"oklch(0.27,0.00,0)\",\n \"rgbChannel\": \"38 38 38\",\n \"hslChannel\": \"0 0% 14.9%\"\n },\n {\n \"scale\": 900,\n \"hex\": \"#171717\",\n \"rgb\": \"rgb(23,23,23)\",\n \"hsl\": \"hsl(0,0%,9%)\",\n \"oklch\": \"oklch(0.20,0.00,0)\",\n \"rgbChannel\": \"23 23 23\",\n \"hslChannel\": \"0 0% 9%\"\n },\n {\n \"scale\": 950,\n \"hex\": \"#0a0a0a\",\n \"rgb\": \"rgb(10,10,10)\",\n \"hsl\": \"hsl(0,0%,3.9%)\",\n \"oklch\": \"oklch(0.14,0.00,0)\",\n \"rgbChannel\": \"10 10 10\",\n \"hslChannel\": \"0 0% 3.9%\"\n }\n ],\n \"stone\": [\n {\n \"scale\": 50,\n \"hex\": \"#fafaf9\",\n \"rgb\": \"rgb(250,250,249)\",\n \"hsl\": \"hsl(60,9.1%,97.8%)\",\n \"oklch\": \"oklch(0.98,0.00,106)\",\n \"rgbChannel\": \"250 250 249\",\n \"hslChannel\": \"60 9.1% 97.8%\"\n },\n {\n \"scale\": 100,\n \"hex\": \"#f5f5f4\",\n \"rgb\": \"rgb(245,245,244)\",\n \"hsl\": \"hsl(60,4.8%,95.9%)\",\n \"oklch\": \"oklch(0.97,0.00,106)\",\n \"rgbChannel\": \"245 245 244\",\n \"hslChannel\": \"60 4.8% 95.9%\"\n },\n {\n \"scale\": 200,\n \"hex\": \"#e7e5e4\",\n \"rgb\": \"rgb(231,229,228)\",\n \"hsl\": \"hsl(20,5.9%,90%)\",\n \"oklch\": \"oklch(0.92,0.00,49)\",\n \"rgbChannel\": \"231 229 228\",\n \"hslChannel\": \"20 5.9% 90%\"\n },\n {\n \"scale\": 300,\n \"hex\": \"#d6d3d1\",\n \"rgb\": \"rgb(214,211,209)\",\n \"hsl\": \"hsl(24,5.7%,82.9%)\",\n \"oklch\": \"oklch(0.87,0.00,56)\",\n \"rgbChannel\": \"214 211 209\",\n \"hslChannel\": \"24 5.7% 82.9%\"\n },\n {\n \"scale\": 400,\n \"hex\": \"#a8a29e\",\n \"rgb\": \"rgb(168,162,158)\",\n \"hsl\": \"hsl(24,5.4%,63.9%)\",\n \"oklch\": \"oklch(0.72,0.01,56)\",\n \"rgbChannel\": \"168 162 158\",\n \"hslChannel\": \"24 5.4% 63.9%\"\n },\n {\n \"scale\": 500,\n \"hex\": \"#78716c\",\n \"rgb\": \"rgb(120,113,108)\",\n \"hsl\": \"hsl(25,5.3%,44.7%)\",\n \"oklch\": \"oklch(0.55,0.01,58)\",\n \"rgbChannel\": \"120 113 108\",\n \"hslChannel\": \"25 5.3% 44.7%\"\n },\n {\n \"scale\": 600,\n \"hex\": \"#57534e\",\n \"rgb\": \"rgb(87,83,78)\",\n \"hsl\": \"hsl(33.3,5.5%,32.4%)\",\n \"oklch\": \"oklch(0.44,0.01,74)\",\n \"rgbChannel\": \"87 83 78\",\n \"hslChannel\": \"33.3 5.5% 32.4%\"\n },\n {\n \"scale\": 700,\n \"hex\": \"#44403c\",\n \"rgb\": \"rgb(68,64,60)\",\n \"hsl\": \"hsl(30,6.3%,25.1%)\",\n \"oklch\": \"oklch(0.37,0.01,68)\",\n \"rgbChannel\": \"68 64 60\",\n \"hslChannel\": \"30 6.3% 25.1%\"\n },\n {\n \"scale\": 800,\n \"hex\": \"#292524\",\n \"rgb\": \"rgb(41,37,36)\",\n \"hsl\": \"hsl(12,6.5%,15.1%)\",\n \"oklch\": \"oklch(0.27,0.01,34)\",\n \"rgbChannel\": \"41 37 36\",\n \"hslChannel\": \"12 6.5% 15.1%\"\n },\n {\n \"scale\": 900,\n \"hex\": \"#1c1917\",\n \"rgb\": \"rgb(28,25,23)\",\n \"hsl\": \"hsl(24,9.8%,10%)\",\n \"oklch\": \"oklch(0.22,0.01,56)\",\n \"rgbChannel\": \"28 25 23\",\n \"hslChannel\": \"24 9.8% 10%\"\n },\n {\n \"scale\": 950,\n \"hex\": \"#0c0a09\",\n \"rgb\": \"rgb(12,10,9)\",\n \"hsl\": \"hsl(20,14.3%,4.1%)\",\n \"oklch\": \"oklch(0.15,0.00,49)\",\n \"rgbChannel\": \"12 10 9\",\n \"hslChannel\": \"20 14.3% 4.1%\"\n }\n ],\n \"red\": [\n {\n \"scale\": 50,\n \"hex\": \"#fef2f2\",\n \"rgb\": \"rgb(254,242,242)\",\n \"hsl\": \"hsl(0,85.7%,97.3%)\",\n \"oklch\": \"oklch(0.97,0.01,17)\",\n \"rgbChannel\": \"254 242 242\",\n \"hslChannel\": \"0 85.7% 97.3%\"\n },\n {\n \"scale\": 100,\n \"hex\": \"#fee2e2\",\n \"rgb\": \"rgb(254,226,226)\",\n \"hsl\": \"hsl(0,93.3%,94.1%)\",\n \"oklch\": \"oklch(0.94,0.03,18)\",\n \"rgbChannel\": \"254 226 226\",\n \"hslChannel\": \"0 93.3% 94.1%\"\n },\n {\n \"scale\": 200,\n \"hex\": \"#fecaca\",\n \"rgb\": \"rgb(254,202,202)\",\n \"hsl\": \"hsl(0,96.3%,89.4%)\",\n \"oklch\": \"oklch(0.88,0.06,18)\",\n \"rgbChannel\": \"254 202 202\",\n \"hslChannel\": \"0 96.3% 89.4%\"\n },\n {\n \"scale\": 300,\n \"hex\": \"#fca5a5\",\n \"rgb\": \"rgb(252,165,165)\",\n \"hsl\": \"hsl(0,93.5%,81.8%)\",\n \"oklch\": \"oklch(0.81,0.10,20)\",\n \"rgbChannel\": \"252 165 165\",\n \"hslChannel\": \"0 93.5% 81.8%\"\n },\n {\n \"scale\": 400,\n \"hex\": \"#f87171\",\n \"rgb\": \"rgb(248,113,113)\",\n \"hsl\": \"hsl(0,90.6%,70.8%)\",\n \"oklch\": \"oklch(0.71,0.17,22)\",\n \"rgbChannel\": \"248 113 113\",\n \"hslChannel\": \"0 90.6% 70.8%\"\n },\n {\n \"scale\": 500,\n \"hex\": \"#ef4444\",\n \"rgb\": \"rgb(239,68,68)\",\n \"hsl\": \"hsl(0,84.2%,60.2%)\",\n \"oklch\": \"oklch(0.64,0.21,25)\",\n \"rgbChannel\": \"239 68 68\",\n \"hslChannel\": \"0 84.2% 60.2%\"\n },\n {\n \"scale\": 600,\n \"hex\": \"#dc2626\",\n \"rgb\": \"rgb(220,38,38)\",\n \"hsl\": \"hsl(0,72.2%,50.6%)\",\n \"oklch\": \"oklch(0.58,0.22,27)\",\n \"rgbChannel\": \"220 38 38\",\n \"hslChannel\": \"0 72.2% 50.6%\"\n },\n {\n \"scale\": 700,\n \"hex\": \"#b91c1c\",\n \"rgb\": \"rgb(185,28,28)\",\n \"hsl\": \"hsl(0,73.7%,41.8%)\",\n \"oklch\": \"oklch(0.51,0.19,28)\",\n \"rgbChannel\": \"185 28 28\",\n \"hslChannel\": \"0 73.7% 41.8%\"\n },\n {\n \"scale\": 800,\n \"hex\": \"#991b1b\",\n \"rgb\": \"rgb(153,27,27)\",\n \"hsl\": \"hsl(0,70%,35.3%)\",\n \"oklch\": \"oklch(0.44,0.16,27)\",\n \"rgbChannel\": \"153 27 27\",\n \"hslChannel\": \"0 70% 35.3%\"\n },\n {\n \"scale\": 900,\n \"hex\": \"#7f1d1d\",\n \"rgb\": \"rgb(127,29,29)\",\n \"hsl\": \"hsl(0,62.8%,30.6%)\",\n \"oklch\": \"oklch(0.40,0.13,26)\",\n \"rgbChannel\": \"127 29 29\",\n \"hslChannel\": \"0 62.8% 30.6%\"\n },\n {\n \"scale\": 950,\n \"hex\": \"#450a0a\",\n \"rgb\": \"rgb(69,10,10)\",\n \"hsl\": \"hsl(0,74.7%,15.5%)\",\n \"oklch\": \"oklch(0.26,0.09,26)\",\n \"rgbChannel\": \"69 10 10\",\n \"hslChannel\": \"0 74.7% 15.5%\"\n }\n ],\n \"orange\": [\n {\n \"scale\": 50,\n \"hex\": \"#fff7ed\",\n \"rgb\": \"rgb(255,247,237)\",\n \"hsl\": \"hsl(33.3,100%,96.5%)\",\n \"oklch\": \"oklch(0.98,0.02,74)\",\n \"rgbChannel\": \"255 247 237\",\n \"hslChannel\": \"33.3 100% 96.5%\"\n },\n {\n \"scale\": 100,\n \"hex\": \"#ffedd5\",\n \"rgb\": \"rgb(255,237,213)\",\n \"hsl\": \"hsl(34.3,100%,91.8%)\",\n \"oklch\": \"oklch(0.95,0.04,75)\",\n \"rgbChannel\": \"255 237 213\",\n \"hslChannel\": \"34.3 100% 91.8%\"\n },\n {\n \"scale\": 200,\n \"hex\": \"#fed7aa\",\n \"rgb\": \"rgb(254,215,170)\",\n \"hsl\": \"hsl(32.1,97.7%,83.1%)\",\n \"oklch\": \"oklch(0.90,0.07,71)\",\n \"rgbChannel\": \"254 215 170\",\n \"hslChannel\": \"32.1 97.7% 83.1%\"\n },\n {\n \"scale\": 300,\n \"hex\": \"#fdba74\",\n \"rgb\": \"rgb(253,186,116)\",\n \"hsl\": \"hsl(30.7,97.2%,72.4%)\",\n \"oklch\": \"oklch(0.84,0.12,66)\",\n \"rgbChannel\": \"253 186 116\",\n \"hslChannel\": \"30.7 97.2% 72.4%\"\n },\n {\n \"scale\": 400,\n \"hex\": \"#fb923c\",\n \"rgb\": \"rgb(251,146,60)\",\n \"hsl\": \"hsl(27,96%,61%)\",\n \"oklch\": \"oklch(0.76,0.16,56)\",\n \"rgbChannel\": \"251 146 60\",\n \"hslChannel\": \"27 96% 61%\"\n },\n {\n \"scale\": 500,\n \"hex\": \"#f97316\",\n \"rgb\": \"rgb(249,115,22)\",\n \"hsl\": \"hsl(24.6,95%,53.1%)\",\n \"oklch\": \"oklch(0.70,0.19,48)\",\n \"rgbChannel\": \"249 115 22\",\n \"hslChannel\": \"24.6 95% 53.1%\"\n },\n {\n \"scale\": 600,\n \"hex\": \"#ea580c\",\n \"rgb\": \"rgb(234,88,12)\",\n \"hsl\": \"hsl(20.5,90.2%,48.2%)\",\n \"oklch\": \"oklch(0.65,0.19,41)\",\n \"rgbChannel\": \"234 88 12\",\n \"hslChannel\": \"20.5 90.2% 48.2%\"\n },\n {\n \"scale\": 700,\n \"hex\": \"#c2410c\",\n \"rgb\": \"rgb(194,65,12)\",\n \"hsl\": \"hsl(17.5,88.3%,40.4%)\",\n \"oklch\": \"oklch(0.55,0.17,38)\",\n \"rgbChannel\": \"194 65 12\",\n \"hslChannel\": \"17.5 88.3% 40.4%\"\n },\n {\n \"scale\": 800,\n \"hex\": \"#9a3412\",\n \"rgb\": \"rgb(154,52,18)\",\n \"hsl\": \"hsl(15,79.1%,33.7%)\",\n \"oklch\": \"oklch(0.47,0.14,37)\",\n \"rgbChannel\": \"154 52 18\",\n \"hslChannel\": \"15 79.1% 33.7%\"\n },\n {\n \"scale\": 900,\n \"hex\": \"#7c2d12\",\n \"rgb\": \"rgb(124,45,18)\",\n \"hsl\": \"hsl(15.3,74.6%,27.8%)\",\n \"oklch\": \"oklch(0.41,0.12,38)\",\n \"rgbChannel\": \"124 45 18\",\n \"hslChannel\": \"15.3 74.6% 27.8%\"\n },\n {\n \"scale\": 950,\n \"hex\": \"#431407\",\n \"rgb\": \"rgb(67,20,7)\",\n \"hsl\": \"hsl(13,81.1%,14.5%)\",\n \"oklch\": \"oklch(0.27,0.08,36)\",\n \"rgbChannel\": \"67 20 7\",\n \"hslChannel\": \"13 81.1% 14.5%\"\n }\n ],\n \"amber\": [\n {\n \"scale\": 50,\n \"hex\": \"#fffbeb\",\n \"rgb\": \"rgb(255,251,235)\",\n \"hsl\": \"hsl(48,100%,96.1%)\",\n \"oklch\": \"oklch(0.99,0.02,95)\",\n \"rgbChannel\": \"255 251 235\",\n \"hslChannel\": \"48 100% 96.1%\"\n },\n {\n \"scale\": 100,\n \"hex\": \"#fef3c7\",\n \"rgb\": \"rgb(254,243,199)\",\n \"hsl\": \"hsl(48,96.5%,88.8%)\",\n \"oklch\": \"oklch(0.96,0.06,96)\",\n \"rgbChannel\": \"254 243 199\",\n \"hslChannel\": \"48 96.5% 88.8%\"\n },\n {\n \"scale\": 200,\n \"hex\": \"#fde68a\",\n \"rgb\": \"rgb(253,230,138)\",\n \"hsl\": \"hsl(48,96.6%,76.7%)\",\n \"oklch\": \"oklch(0.92,0.12,96)\",\n \"rgbChannel\": \"253 230 138\",\n \"hslChannel\": \"48 96.6% 76.7%\"\n },\n {\n \"scale\": 300,\n \"hex\": \"#fcd34d\",\n \"rgb\": \"rgb(252,211,77)\",\n \"hsl\": \"hsl(45.9,96.7%,64.5%)\",\n \"oklch\": \"oklch(0.88,0.15,92)\",\n \"rgbChannel\": \"252 211 77\",\n \"hslChannel\": \"45.9 96.7% 64.5%\"\n },\n {\n \"scale\": 400,\n \"hex\": \"#fbbf24\",\n \"rgb\": \"rgb(251,191,36)\",\n \"hsl\": \"hsl(43.3,96.4%,56.3%)\",\n \"oklch\": \"oklch(0.84,0.16,84)\",\n \"rgbChannel\": \"251 191 36\",\n \"hslChannel\": \"43.3 96.4% 56.3%\"\n },\n {\n \"scale\": 500,\n \"hex\": \"#f59e0b\",\n \"rgb\": \"rgb(245,158,11)\",\n \"hsl\": \"hsl(37.7,92.1%,50.2%)\",\n \"oklch\": \"oklch(0.77,0.16,70)\",\n \"rgbChannel\": \"245 158 11\",\n \"hslChannel\": \"37.7 92.1% 50.2%\"\n },\n {\n \"scale\": 600,\n \"hex\": \"#d97706\",\n \"rgb\": \"rgb(217,119,6)\",\n \"hsl\": \"hsl(32.1,94.6%,43.7%)\",\n \"oklch\": \"oklch(0.67,0.16,58)\",\n \"rgbChannel\": \"217 119 6\",\n \"hslChannel\": \"32.1 94.6% 43.7%\"\n },\n {\n \"scale\": 700,\n \"hex\": \"#b45309\",\n \"rgb\": \"rgb(180,83,9)\",\n \"hsl\": \"hsl(26,90.5%,37.1%)\",\n \"oklch\": \"oklch(0.56,0.15,49)\",\n \"rgbChannel\": \"180 83 9\",\n \"hslChannel\": \"26 90.5% 37.1%\"\n },\n {\n \"scale\": 800,\n \"hex\": \"#92400e\",\n \"rgb\": \"rgb(146,64,14)\",\n \"hsl\": \"hsl(22.7,82.5%,31.4%)\",\n \"oklch\": \"oklch(0.47,0.12,46)\",\n \"rgbChannel\": \"146 64 14\",\n \"hslChannel\": \"22.7 82.5% 31.4%\"\n },\n {\n \"scale\": 900,\n \"hex\": \"#78350f\",\n \"rgb\": \"rgb(120,53,15)\",\n \"hsl\": \"hsl(21.7,77.8%,26.5%)\",\n \"oklch\": \"oklch(0.41,0.11,46)\",\n \"rgbChannel\": \"120 53 15\",\n \"hslChannel\": \"21.7 77.8% 26.5%\"\n },\n {\n \"scale\": 950,\n \"hex\": \"#451a03\",\n \"rgb\": \"rgb(69,26,3)\",\n \"hsl\": \"hsl(20.9,91.7%,14.1%)\",\n \"oklch\": \"oklch(0.28,0.07,46)\",\n \"rgbChannel\": \"69 26 3\",\n \"hslChannel\": \"20.9 91.7% 14.1%\"\n }\n ],\n \"yellow\": [\n {\n \"scale\": 50,\n \"hex\": \"#fefce8\",\n \"rgb\": \"rgb(254,252,232)\",\n \"hsl\": \"hsl(54.5,91.7%,95.3%)\",\n \"oklch\": \"oklch(0.99,0.03,102)\",\n \"rgbChannel\": \"254 252 232\",\n \"hslChannel\": \"54.5 91.7% 95.3%\"\n },\n {\n \"scale\": 100,\n \"hex\": \"#fef9c3\",\n \"rgb\": \"rgb(254,249,195)\",\n \"hsl\": \"hsl(54.9,96.7%,88%)\",\n \"oklch\": \"oklch(0.97,0.07,103)\",\n \"rgbChannel\": \"254 249 195\",\n \"hslChannel\": \"54.9 96.7% 88%\"\n },\n {\n \"scale\": 200,\n \"hex\": \"#fef08a\",\n \"rgb\": \"rgb(254,240,138)\",\n \"hsl\": \"hsl(52.8,98.3%,76.9%)\",\n \"oklch\": \"oklch(0.95,0.12,102)\",\n \"rgbChannel\": \"254 240 138\",\n \"hslChannel\": \"52.8 98.3% 76.9%\"\n },\n {\n \"scale\": 300,\n \"hex\": \"#fde047\",\n \"rgb\": \"rgb(253,224,71)\",\n \"hsl\": \"hsl(50.4,97.8%,63.5%)\",\n \"oklch\": \"oklch(0.91,0.17,98)\",\n \"rgbChannel\": \"253 224 71\",\n \"hslChannel\": \"50.4 97.8% 63.5%\"\n },\n {\n \"scale\": 400,\n \"hex\": \"#facc15\",\n \"rgb\": \"rgb(250,204,21)\",\n \"hsl\": \"hsl(47.9,95.8%,53.1%)\",\n \"oklch\": \"oklch(0.86,0.17,92)\",\n \"rgbChannel\": \"250 204 21\",\n \"hslChannel\": \"47.9 95.8% 53.1%\"\n },\n {\n \"scale\": 500,\n \"hex\": \"#eab308\",\n \"rgb\": \"rgb(234,179,8)\",\n \"hsl\": \"hsl(45.4,93.4%,47.5%)\",\n \"oklch\": \"oklch(0.80,0.16,86)\",\n \"rgbChannel\": \"234 179 8\",\n \"hslChannel\": \"45.4 93.4% 47.5%\"\n },\n {\n \"scale\": 600,\n \"hex\": \"#ca8a04\",\n \"rgb\": \"rgb(202,138,4)\",\n \"hsl\": \"hsl(40.6,96.1%,40.4%)\",\n \"oklch\": \"oklch(0.68,0.14,76)\",\n \"rgbChannel\": \"202 138 4\",\n \"hslChannel\": \"40.6 96.1% 40.4%\"\n },\n {\n \"scale\": 700,\n \"hex\": \"#a16207\",\n \"rgb\": \"rgb(161,98,7)\",\n \"hsl\": \"hsl(35.5,91.7%,32.9%)\",\n \"oklch\": \"oklch(0.55,0.12,66)\",\n \"rgbChannel\": \"161 98 7\",\n \"hslChannel\": \"35.5 91.7% 32.9%\"\n },\n {\n \"scale\": 800,\n \"hex\": \"#854d0e\",\n \"rgb\": \"rgb(133,77,14)\",\n \"hsl\": \"hsl(31.8,81%,28.8%)\",\n \"oklch\": \"oklch(0.48,0.10,62)\",\n \"rgbChannel\": \"133 77 14\",\n \"hslChannel\": \"31.8 81% 28.8%\"\n },\n {\n \"scale\": 900,\n \"hex\": \"#713f12\",\n \"rgb\": \"rgb(113,63,18)\",\n \"hsl\": \"hsl(28.4,72.5%,25.7%)\",\n \"oklch\": \"oklch(0.42,0.09,58)\",\n \"rgbChannel\": \"113 63 18\",\n \"hslChannel\": \"28.4 72.5% 25.7%\"\n },\n {\n \"scale\": 950,\n \"hex\": \"#422006\",\n \"rgb\": \"rgb(66,32,6)\",\n \"hsl\": \"hsl(26,83.3%,14.1%)\",\n \"oklch\": \"oklch(0.29,0.06,54)\",\n \"rgbChannel\": \"66 32 6\",\n \"hslChannel\": \"26 83.3% 14.1%\"\n }\n ],\n \"lime\": [\n {\n \"scale\": 50,\n \"hex\": \"#f7fee7\",\n \"rgb\": \"rgb(247,254,231)\",\n \"hsl\": \"hsl(78.3,92%,95.1%)\",\n \"oklch\": \"oklch(0.99,0.03,121)\",\n \"rgbChannel\": \"247 254 231\",\n \"hslChannel\": \"78.3 92% 95.1%\"\n },\n {\n \"scale\": 100,\n \"hex\": \"#ecfccb\",\n \"rgb\": \"rgb(236,252,203)\",\n \"hsl\": \"hsl(79.6,89.1%,89.2%)\",\n \"oklch\": \"oklch(0.97,0.07,122)\",\n \"rgbChannel\": \"236 252 203\",\n \"hslChannel\": \"79.6 89.1% 89.2%\"\n },\n {\n \"scale\": 200,\n \"hex\": \"#d9f99d\",\n \"rgb\": \"rgb(217,249,157)\",\n \"hsl\": \"hsl(80.9,88.5%,79.6%)\",\n \"oklch\": \"oklch(0.94,0.12,124)\",\n \"rgbChannel\": \"217 249 157\",\n \"hslChannel\": \"80.9 88.5% 79.6%\"\n },\n {\n \"scale\": 300,\n \"hex\": \"#bef264\",\n \"rgb\": \"rgb(190,242,100)\",\n \"hsl\": \"hsl(82,84.5%,67.1%)\",\n \"oklch\": \"oklch(0.90,0.18,127)\",\n \"rgbChannel\": \"190 242 100\",\n \"hslChannel\": \"82 84.5% 67.1%\"\n },\n {\n \"scale\": 400,\n \"hex\": \"#a3e635\",\n \"rgb\": \"rgb(163,230,53)\",\n \"hsl\": \"hsl(82.7,78%,55.5%)\",\n \"oklch\": \"oklch(0.85,0.21,129)\",\n \"rgbChannel\": \"163 230 53\",\n \"hslChannel\": \"82.7 78% 55.5%\"\n },\n {\n \"scale\": 500,\n \"hex\": \"#84cc16\",\n \"rgb\": \"rgb(132,204,22)\",\n \"hsl\": \"hsl(83.7,80.5%,44.3%)\",\n \"oklch\": \"oklch(0.77,0.20,131)\",\n \"rgbChannel\": \"132 204 22\",\n \"hslChannel\": \"83.7 80.5% 44.3%\"\n },\n {\n \"scale\": 600,\n \"hex\": \"#65a30d\",\n \"rgb\": \"rgb(101,163,13)\",\n \"hsl\": \"hsl(84.8,85.2%,34.5%)\",\n \"oklch\": \"oklch(0.65,0.18,132)\",\n \"rgbChannel\": \"101 163 13\",\n \"hslChannel\": \"84.8 85.2% 34.5%\"\n },\n {\n \"scale\": 700,\n \"hex\": \"#4d7c0f\",\n \"rgb\": \"rgb(77,124,15)\",\n \"hsl\": \"hsl(85.9,78.4%,27.3%)\",\n \"oklch\": \"oklch(0.53,0.14,132)\",\n \"rgbChannel\": \"77 124 15\",\n \"hslChannel\": \"85.9 78.4% 27.3%\"\n },\n {\n \"scale\": 800,\n \"hex\": \"#3f6212\",\n \"rgb\": \"rgb(63,98,18)\",\n \"hsl\": \"hsl(86.3,69%,22.7%)\",\n \"oklch\": \"oklch(0.45,0.11,131)\",\n \"rgbChannel\": \"63 98 18\",\n \"hslChannel\": \"86.3 69% 22.7%\"\n },\n {\n \"scale\": 900,\n \"hex\": \"#365314\",\n \"rgb\": \"rgb(54,83,20)\",\n \"hsl\": \"hsl(87.6,61.2%,20.2%)\",\n \"oklch\": \"oklch(0.41,0.10,131)\",\n \"rgbChannel\": \"54 83 20\",\n \"hslChannel\": \"87.6 61.2% 20.2%\"\n },\n {\n \"scale\": 950,\n \"hex\": \"#1a2e05\",\n \"rgb\": \"rgb(26,46,5)\",\n \"hsl\": \"hsl(89.3,80.4%,10%)\",\n \"oklch\": \"oklch(0.27,0.07,132)\",\n \"rgbChannel\": \"26 46 5\",\n \"hslChannel\": \"89.3 80.4% 10%\"\n }\n ],\n \"green\": [\n {\n \"scale\": 50,\n \"hex\": \"#f0fdf4\",\n \"rgb\": \"rgb(240,253,244)\",\n \"hsl\": \"hsl(138.5,76.5%,96.7%)\",\n \"oklch\": \"oklch(0.98,0.02,156)\",\n \"rgbChannel\": \"240 253 244\",\n \"hslChannel\": \"138.5 76.5% 96.7%\"\n },\n {\n \"scale\": 100,\n \"hex\": \"#dcfce7\",\n \"rgb\": \"rgb(220,252,231)\",\n \"hsl\": \"hsl(140.6,84.2%,92.5%)\",\n \"oklch\": \"oklch(0.96,0.04,157)\",\n \"rgbChannel\": \"220 252 231\",\n \"hslChannel\": \"140.6 84.2% 92.5%\"\n },\n {\n \"scale\": 200,\n \"hex\": \"#bbf7d0\",\n \"rgb\": \"rgb(187,247,208)\",\n \"hsl\": \"hsl(141,78.9%,85.1%)\",\n \"oklch\": \"oklch(0.93,0.08,156)\",\n \"rgbChannel\": \"187 247 208\",\n \"hslChannel\": \"141 78.9% 85.1%\"\n },\n {\n \"scale\": 300,\n \"hex\": \"#86efac\",\n \"rgb\": \"rgb(134,239,172)\",\n \"hsl\": \"hsl(141.7,76.6%,73.1%)\",\n \"oklch\": \"oklch(0.87,0.14,154)\",\n \"rgbChannel\": \"134 239 172\",\n \"hslChannel\": \"141.7 76.6% 73.1%\"\n },\n {\n \"scale\": 400,\n \"hex\": \"#4ade80\",\n \"rgb\": \"rgb(74,222,128)\",\n \"hsl\": \"hsl(141.9,69.2%,58%)\",\n \"oklch\": \"oklch(0.80,0.18,152)\",\n \"rgbChannel\": \"74 222 128\",\n \"hslChannel\": \"141.9 69.2% 58%\"\n },\n {\n \"scale\": 500,\n \"hex\": \"#22c55e\",\n \"rgb\": \"rgb(34,197,94)\",\n \"hsl\": \"hsl(142.1,70.6%,45.3%)\",\n \"oklch\": \"oklch(0.72,0.19,150)\",\n \"rgbChannel\": \"34 197 94\",\n \"hslChannel\": \"142.1 70.6% 45.3%\"\n },\n {\n \"scale\": 600,\n \"hex\": \"#16a34a\",\n \"rgb\": \"rgb(22,163,74)\",\n \"hsl\": \"hsl(142.1,76.2%,36.3%)\",\n \"oklch\": \"oklch(0.63,0.17,149)\",\n \"rgbChannel\": \"22 163 74\",\n \"hslChannel\": \"142.1 76.2% 36.3%\"\n },\n {\n \"scale\": 700,\n \"hex\": \"#15803d\",\n \"rgb\": \"rgb(21,128,61)\",\n \"hsl\": \"hsl(142.4,71.8%,29.2%)\",\n \"oklch\": \"oklch(0.53,0.14,150)\",\n \"rgbChannel\": \"21 128 61\",\n \"hslChannel\": \"142.4 71.8% 29.2%\"\n },\n {\n \"scale\": 800,\n \"hex\": \"#166534\",\n \"rgb\": \"rgb(22,101,52)\",\n \"hsl\": \"hsl(142.8,64.2%,24.1%)\",\n \"oklch\": \"oklch(0.45,0.11,151)\",\n \"rgbChannel\": \"22 101 52\",\n \"hslChannel\": \"142.8 64.2% 24.1%\"\n },\n {\n \"scale\": 900,\n \"hex\": \"#14532d\",\n \"rgb\": \"rgb(20,83,45)\",\n \"hsl\": \"hsl(143.8,61.2%,20.2%)\",\n \"oklch\": \"oklch(0.39,0.09,153)\",\n \"rgbChannel\": \"20 83 45\",\n \"hslChannel\": \"143.8 61.2% 20.2%\"\n },\n {\n \"scale\": 950,\n \"hex\": \"#052e16\",\n \"rgb\": \"rgb(5,46,22)\",\n \"hsl\": \"hsl(144.9,80.4%,10%)\",\n \"oklch\": \"oklch(0.27,0.06,153)\",\n \"rgbChannel\": \"5 46 22\",\n \"hslChannel\": \"144.9 80.4% 10%\"\n }\n ],\n \"emerald\": [\n {\n \"scale\": 50,\n \"hex\": \"#ecfdf5\",\n \"rgb\": \"rgb(236,253,245)\",\n \"hsl\": \"hsl(151.8,81%,95.9%)\",\n \"oklch\": \"oklch(0.98,0.02,166)\",\n \"rgbChannel\": \"236 253 245\",\n \"hslChannel\": \"151.8 81% 95.9%\"\n },\n {\n \"scale\": 100,\n \"hex\": \"#d1fae5\",\n \"rgb\": \"rgb(209,250,229)\",\n \"hsl\": \"hsl(149.3,80.4%,90%)\",\n \"oklch\": \"oklch(0.95,0.05,163)\",\n \"rgbChannel\": \"209 250 229\",\n \"hslChannel\": \"149.3 80.4% 90%\"\n },\n {\n \"scale\": 200,\n \"hex\": \"#a7f3d0\",\n \"rgb\": \"rgb(167,243,208)\",\n \"hsl\": \"hsl(152.4,76%,80.4%)\",\n \"oklch\": \"oklch(0.90,0.09,164)\",\n \"rgbChannel\": \"167 243 208\",\n \"hslChannel\": \"152.4 76% 80.4%\"\n },\n {\n \"scale\": 300,\n \"hex\": \"#6ee7b7\",\n \"rgb\": \"rgb(110,231,183)\",\n \"hsl\": \"hsl(156.2,71.6%,66.9%)\",\n \"oklch\": \"oklch(0.85,0.13,165)\",\n \"rgbChannel\": \"110 231 183\",\n \"hslChannel\": \"156.2 71.6% 66.9%\"\n },\n {\n \"scale\": 400,\n \"hex\": \"#34d399\",\n \"rgb\": \"rgb(52,211,153)\",\n \"hsl\": \"hsl(158.1,64.4%,51.6%)\",\n \"oklch\": \"oklch(0.77,0.15,163)\",\n \"rgbChannel\": \"52 211 153\",\n \"hslChannel\": \"158.1 64.4% 51.6%\"\n },\n {\n \"scale\": 500,\n \"hex\": \"#10b981\",\n \"rgb\": \"rgb(16,185,129)\",\n \"hsl\": \"hsl(160.1,84.1%,39.4%)\",\n \"oklch\": \"oklch(0.70,0.15,162)\",\n \"rgbChannel\": \"16 185 129\",\n \"hslChannel\": \"160.1 84.1% 39.4%\"\n },\n {\n \"scale\": 600,\n \"hex\": \"#059669\",\n \"rgb\": \"rgb(5,150,105)\",\n \"hsl\": \"hsl(161.4,93.5%,30.4%)\",\n \"oklch\": \"oklch(0.60,0.13,163)\",\n \"rgbChannel\": \"5 150 105\",\n \"hslChannel\": \"161.4 93.5% 30.4%\"\n },\n {\n \"scale\": 700,\n \"hex\": \"#047857\",\n \"rgb\": \"rgb(4,120,87)\",\n \"hsl\": \"hsl(162.9,93.5%,24.3%)\",\n \"oklch\": \"oklch(0.51,0.10,166)\",\n \"rgbChannel\": \"4 120 87\",\n \"hslChannel\": \"162.9 93.5% 24.3%\"\n },\n {\n \"scale\": 800,\n \"hex\": \"#065f46\",\n \"rgb\": \"rgb(6,95,70)\",\n \"hsl\": \"hsl(163.1,88.1%,19.8%)\",\n \"oklch\": \"oklch(0.43,0.09,167)\",\n \"rgbChannel\": \"6 95 70\",\n \"hslChannel\": \"163.1 88.1% 19.8%\"\n },\n {\n \"scale\": 900,\n \"hex\": \"#064e3b\",\n \"rgb\": \"rgb(6,78,59)\",\n \"hsl\": \"hsl(164.2,85.7%,16.5%)\",\n \"oklch\": \"oklch(0.38,0.07,169)\",\n \"rgbChannel\": \"6 78 59\",\n \"hslChannel\": \"164.2 85.7% 16.5%\"\n },\n {\n \"scale\": 950,\n \"hex\": \"#022c22\",\n \"rgb\": \"rgb(2,44,34)\",\n \"hsl\": \"hsl(165.7,91.3%,9%)\",\n \"oklch\": \"oklch(0.26,0.05,173)\",\n \"rgbChannel\": \"2 44 34\",\n \"hslChannel\": \"165.7 91.3% 9%\"\n }\n ],\n \"teal\": [\n {\n \"scale\": 50,\n \"hex\": \"#f0fdfa\",\n \"rgb\": \"rgb(240,253,250)\",\n \"hsl\": \"hsl(166.2,76.5%,96.7%)\",\n \"oklch\": \"oklch(0.98,0.01,181)\",\n \"rgbChannel\": \"240 253 250\",\n \"hslChannel\": \"166.2 76.5% 96.7%\"\n },\n {\n \"scale\": 100,\n \"hex\": \"#ccfbf1\",\n \"rgb\": \"rgb(204,251,241)\",\n \"hsl\": \"hsl(167.2,85.5%,89.2%)\",\n \"oklch\": \"oklch(0.95,0.05,181)\",\n \"rgbChannel\": \"204 251 241\",\n \"hslChannel\": \"167.2 85.5% 89.2%\"\n },\n {\n \"scale\": 200,\n \"hex\": \"#99f6e4\",\n \"rgb\": \"rgb(153,246,228)\",\n \"hsl\": \"hsl(168.4,83.8%,78.2%)\",\n \"oklch\": \"oklch(0.91,0.09,180)\",\n \"rgbChannel\": \"153 246 228\",\n \"hslChannel\": \"168.4 83.8% 78.2%\"\n },\n {\n \"scale\": 300,\n \"hex\": \"#5eead4\",\n \"rgb\": \"rgb(94,234,212)\",\n \"hsl\": \"hsl(170.6,76.9%,64.3%)\",\n \"oklch\": \"oklch(0.85,0.13,181)\",\n \"rgbChannel\": \"94 234 212\",\n \"hslChannel\": \"170.6 76.9% 64.3%\"\n },\n {\n \"scale\": 400,\n \"hex\": \"#2dd4bf\",\n \"rgb\": \"rgb(45,212,191)\",\n \"hsl\": \"hsl(172.5,66%,50.4%)\",\n \"oklch\": \"oklch(0.78,0.13,182)\",\n \"rgbChannel\": \"45 212 191\",\n \"hslChannel\": \"172.5 66% 50.4%\"\n },\n {\n \"scale\": 500,\n \"hex\": \"#14b8a6\",\n \"rgb\": \"rgb(20,184,166)\",\n \"hsl\": \"hsl(173.4,80.4%,40%)\",\n \"oklch\": \"oklch(0.70,0.12,183)\",\n \"rgbChannel\": \"20 184 166\",\n \"hslChannel\": \"173.4 80.4% 40%\"\n },\n {\n \"scale\": 600,\n \"hex\": \"#0d9488\",\n \"rgb\": \"rgb(13,148,136)\",\n \"hsl\": \"hsl(174.7,83.9%,31.6%)\",\n \"oklch\": \"oklch(0.60,0.10,185)\",\n \"rgbChannel\": \"13 148 136\",\n \"hslChannel\": \"174.7 83.9% 31.6%\"\n },\n {\n \"scale\": 700,\n \"hex\": \"#0f766e\",\n \"rgb\": \"rgb(15,118,110)\",\n \"hsl\": \"hsl(175.3,77.4%,26.1%)\",\n \"oklch\": \"oklch(0.51,0.09,186)\",\n \"rgbChannel\": \"15 118 110\",\n \"hslChannel\": \"175.3 77.4% 26.1%\"\n },\n {\n \"scale\": 800,\n \"hex\": \"#115e59\",\n \"rgb\": \"rgb(17,94,89)\",\n \"hsl\": \"hsl(176.1,69.4%,21.8%)\",\n \"oklch\": \"oklch(0.44,0.07,188)\",\n \"rgbChannel\": \"17 94 89\",\n \"hslChannel\": \"176.1 69.4% 21.8%\"\n },\n {\n \"scale\": 900,\n \"hex\": \"#134e4a\",\n \"rgb\": \"rgb(19,78,74)\",\n \"hsl\": \"hsl(175.9,60.8%,19%)\",\n \"oklch\": \"oklch(0.39,0.06,188)\",\n \"rgbChannel\": \"19 78 74\",\n \"hslChannel\": \"175.9 60.8% 19%\"\n },\n {\n \"scale\": 950,\n \"hex\": \"#042f2e\",\n \"rgb\": \"rgb(4,47,46)\",\n \"hsl\": \"hsl(178.6,84.3%,10%)\",\n \"oklch\": \"oklch(0.28,0.04,193)\",\n \"rgbChannel\": \"4 47 46\",\n \"hslChannel\": \"178.6 84.3% 10%\"\n }\n ],\n \"cyan\": [\n {\n \"scale\": 50,\n \"hex\": \"#ecfeff\",\n \"rgb\": \"rgb(236,254,255)\",\n \"hsl\": \"hsl(183.2,100%,96.3%)\",\n \"oklch\": \"oklch(0.98,0.02,201)\",\n \"rgbChannel\": \"236 254 255\",\n \"hslChannel\": \"183.2 100% 96.3%\"\n },\n {\n \"scale\": 100,\n \"hex\": \"#cffafe\",\n \"rgb\": \"rgb(207,250,254)\",\n \"hsl\": \"hsl(185.1,95.9%,90.4%)\",\n \"oklch\": \"oklch(0.96,0.04,203)\",\n \"rgbChannel\": \"207 250 254\",\n \"hslChannel\": \"185.1 95.9% 90.4%\"\n },\n {\n \"scale\": 200,\n \"hex\": \"#a5f3fc\",\n \"rgb\": \"rgb(165,243,252)\",\n \"hsl\": \"hsl(186.2,93.5%,81.8%)\",\n \"oklch\": \"oklch(0.92,0.08,205)\",\n \"rgbChannel\": \"165 243 252\",\n \"hslChannel\": \"186.2 93.5% 81.8%\"\n },\n {\n \"scale\": 300,\n \"hex\": \"#67e8f9\",\n \"rgb\": \"rgb(103,232,249)\",\n \"hsl\": \"hsl(187,92.4%,69%)\",\n \"oklch\": \"oklch(0.87,0.12,207)\",\n \"rgbChannel\": \"103 232 249\",\n \"hslChannel\": \"187 92.4% 69%\"\n },\n {\n \"scale\": 400,\n \"hex\": \"#22d3ee\",\n \"rgb\": \"rgb(34,211,238)\",\n \"hsl\": \"hsl(187.9,85.7%,53.3%)\",\n \"oklch\": \"oklch(0.80,0.13,212)\",\n \"rgbChannel\": \"34 211 238\",\n \"hslChannel\": \"187.9 85.7% 53.3%\"\n },\n {\n \"scale\": 500,\n \"hex\": \"#06b6d4\",\n \"rgb\": \"rgb(6,182,212)\",\n \"hsl\": \"hsl(188.7,94.5%,42.7%)\",\n \"oklch\": \"oklch(0.71,0.13,215)\",\n \"rgbChannel\": \"6 182 212\",\n \"hslChannel\": \"188.7 94.5% 42.7%\"\n },\n {\n \"scale\": 600,\n \"hex\": \"#0891b2\",\n \"rgb\": \"rgb(8,145,178)\",\n \"hsl\": \"hsl(191.6,91.4%,36.5%)\",\n \"oklch\": \"oklch(0.61,0.11,222)\",\n \"rgbChannel\": \"8 145 178\",\n \"hslChannel\": \"191.6 91.4% 36.5%\"\n },\n {\n \"scale\": 700,\n \"hex\": \"#0e7490\",\n \"rgb\": \"rgb(14,116,144)\",\n \"hsl\": \"hsl(192.9,82.3%,31%)\",\n \"oklch\": \"oklch(0.52,0.09,223)\",\n \"rgbChannel\": \"14 116 144\",\n \"hslChannel\": \"192.9 82.3% 31%\"\n },\n {\n \"scale\": 800,\n \"hex\": \"#155e75\",\n \"rgb\": \"rgb(21,94,117)\",\n \"hsl\": \"hsl(194.4,69.6%,27.1%)\",\n \"oklch\": \"oklch(0.45,0.08,224)\",\n \"rgbChannel\": \"21 94 117\",\n \"hslChannel\": \"194.4 69.6% 27.1%\"\n },\n {\n \"scale\": 900,\n \"hex\": \"#164e63\",\n \"rgb\": \"rgb(22,78,99)\",\n \"hsl\": \"hsl(196.4,63.6%,23.7%)\",\n \"oklch\": \"oklch(0.40,0.07,227)\",\n \"rgbChannel\": \"22 78 99\",\n \"hslChannel\": \"196.4 63.6% 23.7%\"\n },\n {\n \"scale\": 950,\n \"hex\": \"#083344\",\n \"rgb\": \"rgb(8,51,68)\",\n \"hsl\": \"hsl(197,78.9%,14.9%)\",\n \"oklch\": \"oklch(0.30,0.05,230)\",\n \"rgbChannel\": \"8 51 68\",\n \"hslChannel\": \"197 78.9% 14.9%\"\n }\n ],\n \"sky\": [\n {\n \"scale\": 50,\n \"hex\": \"#f0f9ff\",\n \"rgb\": \"rgb(240,249,255)\",\n \"hsl\": \"hsl(204,100%,97.1%)\",\n \"oklch\": \"oklch(0.98,0.01,237)\",\n \"rgbChannel\": \"240 249 255\",\n \"hslChannel\": \"204 100% 97.1%\"\n },\n {\n \"scale\": 100,\n \"hex\": \"#e0f2fe\",\n \"rgb\": \"rgb(224,242,254)\",\n \"hsl\": \"hsl(204,93.8%,93.7%)\",\n \"oklch\": \"oklch(0.95,0.03,237)\",\n \"rgbChannel\": \"224 242 254\",\n \"hslChannel\": \"204 93.8% 93.7%\"\n },\n {\n \"scale\": 200,\n \"hex\": \"#bae6fd\",\n \"rgb\": \"rgb(186,230,253)\",\n \"hsl\": \"hsl(200.6,94.4%,86.1%)\",\n \"oklch\": \"oklch(0.90,0.06,231)\",\n \"rgbChannel\": \"186 230 253\",\n \"hslChannel\": \"200.6 94.4% 86.1%\"\n },\n {\n \"scale\": 300,\n \"hex\": \"#7dd3fc\",\n \"rgb\": \"rgb(125,211,252)\",\n \"hsl\": \"hsl(199.4,95.5%,73.9%)\",\n \"oklch\": \"oklch(0.83,0.10,230)\",\n \"rgbChannel\": \"125 211 252\",\n \"hslChannel\": \"199.4 95.5% 73.9%\"\n },\n {\n \"scale\": 400,\n \"hex\": \"#38bdf8\",\n \"rgb\": \"rgb(56,189,248)\",\n \"hsl\": \"hsl(198.4,93.2%,59.6%)\",\n \"oklch\": \"oklch(0.75,0.14,233)\",\n \"rgbChannel\": \"56 189 248\",\n \"hslChannel\": \"198.4 93.2% 59.6%\"\n },\n {\n \"scale\": 500,\n \"hex\": \"#0ea5e9\",\n \"rgb\": \"rgb(14,165,233)\",\n \"hsl\": \"hsl(198.6,88.7%,48.4%)\",\n \"oklch\": \"oklch(0.68,0.15,237)\",\n \"rgbChannel\": \"14 165 233\",\n \"hslChannel\": \"198.6 88.7% 48.4%\"\n },\n {\n \"scale\": 600,\n \"hex\": \"#0284c7\",\n \"rgb\": \"rgb(2,132,199)\",\n \"hsl\": \"hsl(200.4,98%,39.4%)\",\n \"oklch\": \"oklch(0.59,0.14,242)\",\n \"rgbChannel\": \"2 132 199\",\n \"hslChannel\": \"200.4 98% 39.4%\"\n },\n {\n \"scale\": 700,\n \"hex\": \"#0369a1\",\n \"rgb\": \"rgb(3,105,161)\",\n \"hsl\": \"hsl(201.3,96.3%,32.2%)\",\n \"oklch\": \"oklch(0.50,0.12,243)\",\n \"rgbChannel\": \"3 105 161\",\n \"hslChannel\": \"201.3 96.3% 32.2%\"\n },\n {\n \"scale\": 800,\n \"hex\": \"#075985\",\n \"rgb\": \"rgb(7,89,133)\",\n \"hsl\": \"hsl(201,90%,27.5%)\",\n \"oklch\": \"oklch(0.44,0.10,241)\",\n \"rgbChannel\": \"7 89 133\",\n \"hslChannel\": \"201 90% 27.5%\"\n },\n {\n \"scale\": 900,\n \"hex\": \"#0c4a6e\",\n \"rgb\": \"rgb(12,74,110)\",\n \"hsl\": \"hsl(202,80.3%,23.9%)\",\n \"oklch\": \"oklch(0.39,0.08,241)\",\n \"rgbChannel\": \"12 74 110\",\n \"hslChannel\": \"202 80.3% 23.9%\"\n },\n {\n \"scale\": 950,\n \"hex\": \"#082f49\",\n \"rgb\": \"rgb(8,47,73)\",\n \"hsl\": \"hsl(204,80.2%,15.9%)\",\n \"oklch\": \"oklch(0.29,0.06,243)\",\n \"rgbChannel\": \"8 47 73\",\n \"hslChannel\": \"204 80.2% 15.9%\"\n }\n ],\n \"blue\": [\n {\n \"scale\": 50,\n \"hex\": \"#eff6ff\",\n \"rgb\": \"rgb(239,246,255)\",\n \"hsl\": \"hsl(213.8,100%,96.9%)\",\n \"oklch\": \"oklch(0.97,0.01,255)\",\n \"rgbChannel\": \"239 246 255\",\n \"hslChannel\": \"213.8 100% 96.9%\"\n },\n {\n \"scale\": 100,\n \"hex\": \"#dbeafe\",\n \"rgb\": \"rgb(219,234,254)\",\n \"hsl\": \"hsl(214.3,94.6%,92.7%)\",\n \"oklch\": \"oklch(0.93,0.03,256)\",\n \"rgbChannel\": \"219 234 254\",\n \"hslChannel\": \"214.3 94.6% 92.7%\"\n },\n {\n \"scale\": 200,\n \"hex\": \"#bfdbfe\",\n \"rgb\": \"rgb(191,219,254)\",\n \"hsl\": \"hsl(213.3,96.9%,87.3%)\",\n \"oklch\": \"oklch(0.88,0.06,254)\",\n \"rgbChannel\": \"191 219 254\",\n \"hslChannel\": \"213.3 96.9% 87.3%\"\n },\n {\n \"scale\": 300,\n \"hex\": \"#93c5fd\",\n \"rgb\": \"rgb(147,197,253)\",\n \"hsl\": \"hsl(211.7,96.4%,78.4%)\",\n \"oklch\": \"oklch(0.81,0.10,252)\",\n \"rgbChannel\": \"147 197 253\",\n \"hslChannel\": \"211.7 96.4% 78.4%\"\n },\n {\n \"scale\": 400,\n \"hex\": \"#60a5fa\",\n \"rgb\": \"rgb(96,165,250)\",\n \"hsl\": \"hsl(213.1,93.9%,67.8%)\",\n \"oklch\": \"oklch(0.71,0.14,255)\",\n \"rgbChannel\": \"96 165 250\",\n \"hslChannel\": \"213.1 93.9% 67.8%\"\n },\n {\n \"scale\": 500,\n \"hex\": \"#3b82f6\",\n \"rgb\": \"rgb(59,130,246)\",\n \"hsl\": \"hsl(217.2,91.2%,59.8%)\",\n \"oklch\": \"oklch(0.62,0.19,260)\",\n \"rgbChannel\": \"59 130 246\",\n \"hslChannel\": \"217.2 91.2% 59.8%\"\n },\n {\n \"scale\": 600,\n \"hex\": \"#2563eb\",\n \"rgb\": \"rgb(37,99,235)\",\n \"hsl\": \"hsl(221.2,83.2%,53.3%)\",\n \"oklch\": \"oklch(0.55,0.22,263)\",\n \"rgbChannel\": \"37 99 235\",\n \"hslChannel\": \"221.2 83.2% 53.3%\"\n },\n {\n \"scale\": 700,\n \"hex\": \"#1d4ed8\",\n \"rgb\": \"rgb(29,78,216)\",\n \"hsl\": \"hsl(224.3,76.3%,48%)\",\n \"oklch\": \"oklch(0.49,0.22,264)\",\n \"rgbChannel\": \"29 78 216\",\n \"hslChannel\": \"224.3 76.3% 48%\"\n },\n {\n \"scale\": 800,\n \"hex\": \"#1e40af\",\n \"rgb\": \"rgb(30,64,175)\",\n \"hsl\": \"hsl(225.9,70.7%,40.2%)\",\n \"oklch\": \"oklch(0.42,0.18,266)\",\n \"rgbChannel\": \"30 64 175\",\n \"hslChannel\": \"225.9 70.7% 40.2%\"\n },\n {\n \"scale\": 900,\n \"hex\": \"#1e3a8a\",\n \"rgb\": \"rgb(30,58,138)\",\n \"hsl\": \"hsl(224.4,64.3%,32.9%)\",\n \"oklch\": \"oklch(0.38,0.14,266)\",\n \"rgbChannel\": \"30 58 138\",\n \"hslChannel\": \"224.4 64.3% 32.9%\"\n },\n {\n \"scale\": 950,\n \"hex\": \"#172554\",\n \"rgb\": \"rgb(23,37,84)\",\n \"hsl\": \"hsl(226.2,57%,21%)\",\n \"oklch\": \"oklch(0.28,0.09,268)\",\n \"rgbChannel\": \"23 37 84\",\n \"hslChannel\": \"226.2 57% 21%\"\n }\n ],\n \"indigo\": [\n {\n \"scale\": 50,\n \"hex\": \"#eef2ff\",\n \"rgb\": \"rgb(238,242,255)\",\n \"hsl\": \"hsl(225.9,100%,96.7%)\",\n \"oklch\": \"oklch(0.96,0.02,272)\",\n \"rgbChannel\": \"238 242 255\",\n \"hslChannel\": \"225.9 100% 96.7%\"\n },\n {\n \"scale\": 100,\n \"hex\": \"#e0e7ff\",\n \"rgb\": \"rgb(224,231,255)\",\n \"hsl\": \"hsl(226.5,100%,93.9%)\",\n \"oklch\": \"oklch(0.93,0.03,273)\",\n \"rgbChannel\": \"224 231 255\",\n \"hslChannel\": \"226.5 100% 93.9%\"\n },\n {\n \"scale\": 200,\n \"hex\": \"#c7d2fe\",\n \"rgb\": \"rgb(199,210,254)\",\n \"hsl\": \"hsl(228,96.5%,88.8%)\",\n \"oklch\": \"oklch(0.87,0.06,274)\",\n \"rgbChannel\": \"199 210 254\",\n \"hslChannel\": \"228 96.5% 88.8%\"\n },\n {\n \"scale\": 300,\n \"hex\": \"#a5b4fc\",\n \"rgb\": \"rgb(165,180,252)\",\n \"hsl\": \"hsl(229.7,93.5%,81.8%)\",\n \"oklch\": \"oklch(0.79,0.10,275)\",\n \"rgbChannel\": \"165 180 252\",\n \"hslChannel\": \"229.7 93.5% 81.8%\"\n },\n {\n \"scale\": 400,\n \"hex\": \"#818cf8\",\n \"rgb\": \"rgb(129,140,248)\",\n \"hsl\": \"hsl(234.5,89.5%,73.9%)\",\n \"oklch\": \"oklch(0.68,0.16,277)\",\n \"rgbChannel\": \"129 140 248\",\n \"hslChannel\": \"234.5 89.5% 73.9%\"\n },\n {\n \"scale\": 500,\n \"hex\": \"#6366f1\",\n \"rgb\": \"rgb(99,102,241)\",\n \"hsl\": \"hsl(238.7,83.5%,66.7%)\",\n \"oklch\": \"oklch(0.59,0.20,277)\",\n \"rgbChannel\": \"99 102 241\",\n \"hslChannel\": \"238.7 83.5% 66.7%\"\n },\n {\n \"scale\": 600,\n \"hex\": \"#4f46e5\",\n \"rgb\": \"rgb(79,70,229)\",\n \"hsl\": \"hsl(243.4,75.4%,58.6%)\",\n \"oklch\": \"oklch(0.51,0.23,277)\",\n \"rgbChannel\": \"79 70 229\",\n \"hslChannel\": \"243.4 75.4% 58.6%\"\n },\n {\n \"scale\": 700,\n \"hex\": \"#4338ca\",\n \"rgb\": \"rgb(67,56,202)\",\n \"hsl\": \"hsl(244.5,57.9%,50.6%)\",\n \"oklch\": \"oklch(0.46,0.21,277)\",\n \"rgbChannel\": \"67 56 202\",\n \"hslChannel\": \"244.5 57.9% 50.6%\"\n },\n {\n \"scale\": 800,\n \"hex\": \"#3730a3\",\n \"rgb\": \"rgb(55,48,163)\",\n \"hsl\": \"hsl(243.7,54.5%,41.4%)\",\n \"oklch\": \"oklch(0.40,0.18,277)\",\n \"rgbChannel\": \"55 48 163\",\n \"hslChannel\": \"243.7 54.5% 41.4%\"\n },\n {\n \"scale\": 900,\n \"hex\": \"#312e81\",\n \"rgb\": \"rgb(49,46,129)\",\n \"hsl\": \"hsl(242.2,47.4%,34.3%)\",\n \"oklch\": \"oklch(0.36,0.14,279)\",\n \"rgbChannel\": \"49 46 129\",\n \"hslChannel\": \"242.2 47.4% 34.3%\"\n },\n {\n \"scale\": 950,\n \"hex\": \"#1e1b4b\",\n \"rgb\": \"rgb(30,27,75)\",\n \"hsl\": \"hsl(243.8,47.1%,20%)\",\n \"oklch\": \"oklch(0.26,0.09,281)\",\n \"rgbChannel\": \"30 27 75\",\n \"hslChannel\": \"243.8 47.1% 20%\"\n }\n ],\n \"violet\": [\n {\n \"scale\": 50,\n \"hex\": \"#f5f3ff\",\n \"rgb\": \"rgb(245,243,255)\",\n \"hsl\": \"hsl(250,100%,97.6%)\",\n \"oklch\": \"oklch(0.97,0.02,294)\",\n \"rgbChannel\": \"245 243 255\",\n \"hslChannel\": \"250 100% 97.6%\"\n },\n {\n \"scale\": 100,\n \"hex\": \"#ede9fe\",\n \"rgb\": \"rgb(237,233,254)\",\n \"hsl\": \"hsl(251.4,91.3%,95.5%)\",\n \"oklch\": \"oklch(0.94,0.03,295)\",\n \"rgbChannel\": \"237 233 254\",\n \"hslChannel\": \"251.4 91.3% 95.5%\"\n },\n {\n \"scale\": 200,\n \"hex\": \"#ddd6fe\",\n \"rgb\": \"rgb(221,214,254)\",\n \"hsl\": \"hsl(250.5,95.2%,91.8%)\",\n \"oklch\": \"oklch(0.89,0.05,293)\",\n \"rgbChannel\": \"221 214 254\",\n \"hslChannel\": \"250.5 95.2% 91.8%\"\n },\n {\n \"scale\": 300,\n \"hex\": \"#c4b5fd\",\n \"rgb\": \"rgb(196,181,253)\",\n \"hsl\": \"hsl(252.5,94.7%,85.1%)\",\n \"oklch\": \"oklch(0.81,0.10,294)\",\n \"rgbChannel\": \"196 181 253\",\n \"hslChannel\": \"252.5 94.7% 85.1%\"\n },\n {\n \"scale\": 400,\n \"hex\": \"#a78bfa\",\n \"rgb\": \"rgb(167,139,250)\",\n \"hsl\": \"hsl(255.1,91.7%,76.3%)\",\n \"oklch\": \"oklch(0.71,0.16,294)\",\n \"rgbChannel\": \"167 139 250\",\n \"hslChannel\": \"255.1 91.7% 76.3%\"\n },\n {\n \"scale\": 500,\n \"hex\": \"#8b5cf6\",\n \"rgb\": \"rgb(139,92,246)\",\n \"hsl\": \"hsl(258.3,89.5%,66.3%)\",\n \"oklch\": \"oklch(0.61,0.22,293)\",\n \"rgbChannel\": \"139 92 246\",\n \"hslChannel\": \"258.3 89.5% 66.3%\"\n },\n {\n \"scale\": 600,\n \"hex\": \"#7c3aed\",\n \"rgb\": \"rgb(124,58,237)\",\n \"hsl\": \"hsl(262.1,83.3%,57.8%)\",\n \"oklch\": \"oklch(0.54,0.25,293)\",\n \"rgbChannel\": \"124 58 237\",\n \"hslChannel\": \"262.1 83.3% 57.8%\"\n },\n {\n \"scale\": 700,\n \"hex\": \"#6d28d9\",\n \"rgb\": \"rgb(109,40,217)\",\n \"hsl\": \"hsl(263.4,70%,50.4%)\",\n \"oklch\": \"oklch(0.49,0.24,293)\",\n \"rgbChannel\": \"109 40 217\",\n \"hslChannel\": \"263.4 70% 50.4%\"\n },\n {\n \"scale\": 800,\n \"hex\": \"#5b21b6\",\n \"rgb\": \"rgb(91,33,182)\",\n \"hsl\": \"hsl(263.4,69.3%,42.2%)\",\n \"oklch\": \"oklch(0.43,0.21,293)\",\n \"rgbChannel\": \"91 33 182\",\n \"hslChannel\": \"263.4 69.3% 42.2%\"\n },\n {\n \"scale\": 900,\n \"hex\": \"#4c1d95\",\n \"rgb\": \"rgb(76,29,149)\",\n \"hsl\": \"hsl(263.5,67.4%,34.9%)\",\n \"oklch\": \"oklch(0.38,0.18,294)\",\n \"rgbChannel\": \"76 29 149\",\n \"hslChannel\": \"263.5 67.4% 34.9%\"\n },\n {\n \"scale\": 950,\n \"hex\": \"#1e1b4b\",\n \"rgb\": \"rgb(46,16,101)\",\n \"hsl\": \"hsl(261.2,72.6%,22.9%)\",\n \"oklch\": \"oklch(0.28,0.14,291)\",\n \"rgbChannel\": \"46 16 101\",\n \"hslChannel\": \"261.2 72.6% 22.9%\"\n }\n ],\n \"purple\": [\n {\n \"scale\": 50,\n \"hex\": \"#faf5ff\",\n \"rgb\": \"rgb(250,245,255)\",\n \"hsl\": \"hsl(270,100%,98%)\",\n \"oklch\": \"oklch(0.98,0.01,308)\",\n \"rgbChannel\": \"250 245 255\",\n \"hslChannel\": \"270 100% 98%\"\n },\n {\n \"scale\": 100,\n \"hex\": \"#f3e8ff\",\n \"rgb\": \"rgb(243,232,255)\",\n \"hsl\": \"hsl(268.7,100%,95.5%)\",\n \"oklch\": \"oklch(0.95,0.03,307)\",\n \"rgbChannel\": \"243 232 255\",\n \"hslChannel\": \"268.7 100% 95.5%\"\n },\n {\n \"scale\": 200,\n \"hex\": \"#e9d5ff\",\n \"rgb\": \"rgb(233,213,255)\",\n \"hsl\": \"hsl(268.6,100%,91.8%)\",\n \"oklch\": \"oklch(0.90,0.06,307)\",\n \"rgbChannel\": \"233 213 255\",\n \"hslChannel\": \"268.6 100% 91.8%\"\n },\n {\n \"scale\": 300,\n \"hex\": \"#d8b4fe\",\n \"rgb\": \"rgb(216,180,254)\",\n \"hsl\": \"hsl(269.2,97.4%,85.1%)\",\n \"oklch\": \"oklch(0.83,0.11,306)\",\n \"rgbChannel\": \"216 180 254\",\n \"hslChannel\": \"269.2 97.4% 85.1%\"\n },\n {\n \"scale\": 400,\n \"hex\": \"#c084fc\",\n \"rgb\": \"rgb(192,132,252)\",\n \"hsl\": \"hsl(270,95.2%,75.3%)\",\n \"oklch\": \"oklch(0.72,0.18,306)\",\n \"rgbChannel\": \"192 132 252\",\n \"hslChannel\": \"270 95.2% 75.3%\"\n },\n {\n \"scale\": 500,\n \"hex\": \"#a855f7\",\n \"rgb\": \"rgb(168,85,247)\",\n \"hsl\": \"hsl(270.7,91%,65.1%)\",\n \"oklch\": \"oklch(0.63,0.23,304)\",\n \"rgbChannel\": \"168 85 247\",\n \"hslChannel\": \"270.7 91% 65.1%\"\n },\n {\n \"scale\": 600,\n \"hex\": \"#9333ea\",\n \"rgb\": \"rgb(147,51,234)\",\n \"hsl\": \"hsl(271.5,81.3%,55.9%)\",\n \"oklch\": \"oklch(0.56,0.25,302)\",\n \"rgbChannel\": \"147 51 234\",\n \"hslChannel\": \"271.5 81.3% 55.9%\"\n },\n {\n \"scale\": 700,\n \"hex\": \"#7e22ce\",\n \"rgb\": \"rgb(126,34,206)\",\n \"hsl\": \"hsl(272.1,71.7%,47.1%)\",\n \"oklch\": \"oklch(0.50,0.24,302)\",\n \"rgbChannel\": \"126 34 206\",\n \"hslChannel\": \"272.1 71.7% 47.1%\"\n },\n {\n \"scale\": 800,\n \"hex\": \"#6b21a8\",\n \"rgb\": \"rgb(107,33,168)\",\n \"hsl\": \"hsl(272.9,67.2%,39.4%)\",\n \"oklch\": \"oklch(0.44,0.20,304)\",\n \"rgbChannel\": \"107 33 168\",\n \"hslChannel\": \"272.9 67.2% 39.4%\"\n },\n {\n \"scale\": 900,\n \"hex\": \"#581c87\",\n \"rgb\": \"rgb(88,28,135)\",\n \"hsl\": \"hsl(273.6,65.6%,32%)\",\n \"oklch\": \"oklch(0.38,0.17,305)\",\n \"rgbChannel\": \"88 28 135\",\n \"hslChannel\": \"273.6 65.6% 32%\"\n },\n {\n \"scale\": 950,\n \"hex\": \"#3b0764\",\n \"rgb\": \"rgb(59,7,100)\",\n \"hsl\": \"hsl(273.5,86.9%,21%)\",\n \"oklch\": \"oklch(0.29,0.14,303)\",\n \"rgbChannel\": \"59 7 100\",\n \"hslChannel\": \"273.5 86.9% 21%\"\n }\n ],\n \"fuchsia\": [\n {\n \"scale\": 50,\n \"hex\": \"#fdf4ff\",\n \"rgb\": \"rgb(253,244,255)\",\n \"hsl\": \"hsl(289.1,100%,97.8%)\",\n \"oklch\": \"oklch(0.98,0.02,320)\",\n \"rgbChannel\": \"253 244 255\",\n \"hslChannel\": \"289.1 100% 97.8%\"\n },\n {\n \"scale\": 100,\n \"hex\": \"#fae8ff\",\n \"rgb\": \"rgb(250,232,255)\",\n \"hsl\": \"hsl(287,100%,95.5%)\",\n \"oklch\": \"oklch(0.95,0.04,319)\",\n \"rgbChannel\": \"250 232 255\",\n \"hslChannel\": \"287 100% 95.5%\"\n },\n {\n \"scale\": 200,\n \"hex\": \"#f5d0fe\",\n \"rgb\": \"rgb(245,208,254)\",\n \"hsl\": \"hsl(288.3,95.8%,90.6%)\",\n \"oklch\": \"oklch(0.90,0.07,320)\",\n \"rgbChannel\": \"245 208 254\",\n \"hslChannel\": \"288.3 95.8% 90.6%\"\n },\n {\n \"scale\": 300,\n \"hex\": \"#f0abfc\",\n \"rgb\": \"rgb(240,171,252)\",\n \"hsl\": \"hsl(291.1,93.1%,82.9%)\",\n \"oklch\": \"oklch(0.83,0.13,321)\",\n \"rgbChannel\": \"240 171 252\",\n \"hslChannel\": \"291.1 93.1% 82.9%\"\n },\n {\n \"scale\": 400,\n \"hex\": \"#e879f9\",\n \"rgb\": \"rgb(232,121,249)\",\n \"hsl\": \"hsl(292,91.4%,72.5%)\",\n \"oklch\": \"oklch(0.75,0.21,322)\",\n \"rgbChannel\": \"232 121 249\",\n \"hslChannel\": \"292 91.4% 72.5%\"\n },\n {\n \"scale\": 500,\n \"hex\": \"#d946ef\",\n \"rgb\": \"rgb(217,70,239)\",\n \"hsl\": \"hsl(292.2,84.1%,60.6%)\",\n \"oklch\": \"oklch(0.67,0.26,322)\",\n \"rgbChannel\": \"217 70 239\",\n \"hslChannel\": \"292.2 84.1% 60.6%\"\n },\n {\n \"scale\": 600,\n \"hex\": \"#c026d3\",\n \"rgb\": \"rgb(192,38,211)\",\n \"hsl\": \"hsl(293.4,69.5%,48.8%)\",\n \"oklch\": \"oklch(0.59,0.26,323)\",\n \"rgbChannel\": \"192 38 211\",\n \"hslChannel\": \"293.4 69.5% 48.8%\"\n },\n {\n \"scale\": 700,\n \"hex\": \"#a21caf\",\n \"rgb\": \"rgb(162,28,175)\",\n \"hsl\": \"hsl(294.7,72.4%,39.8%)\",\n \"oklch\": \"oklch(0.52,0.23,324)\",\n \"rgbChannel\": \"162 28 175\",\n \"hslChannel\": \"294.7 72.4% 39.8%\"\n },\n {\n \"scale\": 800,\n \"hex\": \"#86198f\",\n \"rgb\": \"rgb(134,25,143)\",\n \"hsl\": \"hsl(295.4,70.2%,32.9%)\",\n \"oklch\": \"oklch(0.45,0.19,325)\",\n \"rgbChannel\": \"134 25 143\",\n \"hslChannel\": \"295.4 70.2% 32.9%\"\n },\n {\n \"scale\": 900,\n \"hex\": \"#701a75\",\n \"rgb\": \"rgb(112,26,117)\",\n \"hsl\": \"hsl(296.7,63.6%,28%)\",\n \"oklch\": \"oklch(0.40,0.16,326)\",\n \"rgbChannel\": \"112 26 117\",\n \"hslChannel\": \"296.7 63.6% 28%\"\n },\n {\n \"scale\": 950,\n \"hex\": \"#4a044e\",\n \"rgb\": \"rgb(74,4,78)\",\n \"hsl\": \"hsl(296.8,90.2%,16.1%)\",\n \"oklch\": \"oklch(0.29,0.13,326)\",\n \"rgbChannel\": \"74 4 78\",\n \"hslChannel\": \"296.8 90.2% 16.1%\"\n }\n ],\n \"pink\": [\n {\n \"scale\": 50,\n \"hex\": \"#fdf2f8\",\n \"rgb\": \"rgb(253,242,248)\",\n \"hsl\": \"hsl(327.3,73.3%,97.1%)\",\n \"oklch\": \"oklch(0.97,0.01,343)\",\n \"rgbChannel\": \"253 242 248\",\n \"hslChannel\": \"327.3 73.3% 97.1%\"\n },\n {\n \"scale\": 100,\n \"hex\": \"#fce7f3\",\n \"rgb\": \"rgb(252,231,243)\",\n \"hsl\": \"hsl(325.7,77.8%,94.7%)\",\n \"oklch\": \"oklch(0.95,0.03,342)\",\n \"rgbChannel\": \"252 231 243\",\n \"hslChannel\": \"325.7 77.8% 94.7%\"\n },\n {\n \"scale\": 200,\n \"hex\": \"#fbcfe8\",\n \"rgb\": \"rgb(251,207,232)\",\n \"hsl\": \"hsl(325.9,84.6%,89.8%)\",\n \"oklch\": \"oklch(0.90,0.06,343)\",\n \"rgbChannel\": \"251 207 232\",\n \"hslChannel\": \"325.9 84.6% 89.8%\"\n },\n {\n \"scale\": 300,\n \"hex\": \"#f9a8d4\",\n \"rgb\": \"rgb(249,168,212)\",\n \"hsl\": \"hsl(327.4,87.1%,81.8%)\",\n \"oklch\": \"oklch(0.82,0.11,346)\",\n \"rgbChannel\": \"249 168 212\",\n \"hslChannel\": \"327.4 87.1% 81.8%\"\n },\n {\n \"scale\": 400,\n \"hex\": \"#f472b6\",\n \"rgb\": \"rgb(244,114,182)\",\n \"hsl\": \"hsl(328.6,85.5%,70.2%)\",\n \"oklch\": \"oklch(0.73,0.18,350)\",\n \"rgbChannel\": \"244 114 182\",\n \"hslChannel\": \"328.6 85.5% 70.2%\"\n },\n {\n \"scale\": 500,\n \"hex\": \"#ec4899\",\n \"rgb\": \"rgb(236,72,153)\",\n \"hsl\": \"hsl(330.4,81.2%,60.4%)\",\n \"oklch\": \"oklch(0.66,0.21,354)\",\n \"rgbChannel\": \"236 72 153\",\n \"hslChannel\": \"330.4 81.2% 60.4%\"\n },\n {\n \"scale\": 600,\n \"hex\": \"#db2777\",\n \"rgb\": \"rgb(219,39,119)\",\n \"hsl\": \"hsl(333.3,71.4%,50.6%)\",\n \"oklch\": \"oklch(0.59,0.22,1)\",\n \"rgbChannel\": \"219 39 119\",\n \"hslChannel\": \"333.3 71.4% 50.6%\"\n },\n {\n \"scale\": 700,\n \"hex\": \"#be185d\",\n \"rgb\": \"rgb(190,24,93)\",\n \"hsl\": \"hsl(335.1,77.6%,42%)\",\n \"oklch\": \"oklch(0.52,0.20,4)\",\n \"rgbChannel\": \"190 24 93\",\n \"hslChannel\": \"335.1 77.6% 42%\"\n },\n {\n \"scale\": 800,\n \"hex\": \"#9d174d\",\n \"rgb\": \"rgb(157,23,77)\",\n \"hsl\": \"hsl(335.8,74.4%,35.3%)\",\n \"oklch\": \"oklch(0.46,0.17,4)\",\n \"rgbChannel\": \"157 23 77\",\n \"hslChannel\": \"335.8 74.4% 35.3%\"\n },\n {\n \"scale\": 900,\n \"hex\": \"#831843\",\n \"rgb\": \"rgb(131,24,67)\",\n \"hsl\": \"hsl(335.9,69%,30.4%)\",\n \"oklch\": \"oklch(0.41,0.14,2)\",\n \"rgbChannel\": \"131 24 67\",\n \"hslChannel\": \"335.9 69% 30.4%\"\n },\n {\n \"scale\": 950,\n \"hex\": \"#500724\",\n \"rgb\": \"rgb(80,7,36)\",\n \"hsl\": \"hsl(336.2,83.9%,17.1%)\",\n \"oklch\": \"oklch(0.28,0.10,4)\",\n \"rgbChannel\": \"80 7 36\",\n \"hslChannel\": \"336.2 83.9% 17.1%\"\n }\n ],\n \"rose\": [\n {\n \"scale\": 50,\n \"hex\": \"#fff1f2\",\n \"rgb\": \"rgb(255,241,242)\",\n \"hsl\": \"hsl(355.7,100%,97.3%)\",\n \"oklch\": \"oklch(0.97,0.02,12)\",\n \"rgbChannel\": \"255 241 242\",\n \"hslChannel\": \"355.7 100% 97.3%\"\n },\n {\n \"scale\": 100,\n \"hex\": \"#ffe4e6\",\n \"rgb\": \"rgb(255,228,230)\",\n \"hsl\": \"hsl(355.6,100%,94.7%)\",\n \"oklch\": \"oklch(0.94,0.03,13)\",\n \"rgbChannel\": \"255 228 230\",\n \"hslChannel\": \"355.6 100% 94.7%\"\n },\n {\n \"scale\": 200,\n \"hex\": \"#fecdd3\",\n \"rgb\": \"rgb(254,205,211)\",\n \"hsl\": \"hsl(352.7,96.1%,90%)\",\n \"oklch\": \"oklch(0.89,0.06,10)\",\n \"rgbChannel\": \"254 205 211\",\n \"hslChannel\": \"352.7 96.1% 90%\"\n },\n {\n \"scale\": 300,\n \"hex\": \"#fda4af\",\n \"rgb\": \"rgb(253,164,175)\",\n \"hsl\": \"hsl(352.6,95.7%,81.8%)\",\n \"oklch\": \"oklch(0.81,0.11,12)\",\n \"rgbChannel\": \"253 164 175\",\n \"hslChannel\": \"352.6 95.7% 81.8%\"\n },\n {\n \"scale\": 400,\n \"hex\": \"#fb7185\",\n \"rgb\": \"rgb(251,113,133)\",\n \"hsl\": \"hsl(351.3,94.5%,71.4%)\",\n \"oklch\": \"oklch(0.72,0.17,13)\",\n \"rgbChannel\": \"251 113 133\",\n \"hslChannel\": \"351.3 94.5% 71.4%\"\n },\n {\n \"scale\": 500,\n \"hex\": \"#f43f5e\",\n \"rgb\": \"rgb(244,63,94)\",\n \"hsl\": \"hsl(349.7,89.2%,60.2%)\",\n \"oklch\": \"oklch(0.65,0.22,16)\",\n \"rgbChannel\": \"244 63 94\",\n \"hslChannel\": \"349.7 89.2% 60.2%\"\n },\n {\n \"scale\": 600,\n \"hex\": \"#e11d48\",\n \"rgb\": \"rgb(225,29,72)\",\n \"hsl\": \"hsl(346.8,77.2%,49.8%)\",\n \"oklch\": \"oklch(0.59,0.22,18)\",\n \"rgbChannel\": \"225 29 72\",\n \"hslChannel\": \"346.8 77.2% 49.8%\"\n },\n {\n \"scale\": 700,\n \"hex\": \"#be123c\",\n \"rgb\": \"rgb(190,18,60)\",\n \"hsl\": \"hsl(345.3,82.7%,40.8%)\",\n \"oklch\": \"oklch(0.51,0.20,17)\",\n \"rgbChannel\": \"190 18 60\",\n \"hslChannel\": \"345.3 82.7% 40.8%\"\n },\n {\n \"scale\": 800,\n \"hex\": \"#9f1239\",\n \"rgb\": \"rgb(159,18,57)\",\n \"hsl\": \"hsl(343.4,79.7%,34.7%)\",\n \"oklch\": \"oklch(0.45,0.17,14)\",\n \"rgbChannel\": \"159 18 57\",\n \"hslChannel\": \"343.4 79.7% 34.7%\"\n },\n {\n \"scale\": 900,\n \"hex\": \"#881337\",\n \"rgb\": \"rgb(136,19,55)\",\n \"hsl\": \"hsl(341.5,75.5%,30.4%)\",\n \"oklch\": \"oklch(0.41,0.15,10)\",\n \"rgbChannel\": \"136 19 55\",\n \"hslChannel\": \"341.5 75.5% 30.4%\"\n },\n {\n \"scale\": 950,\n \"hex\": \"#4c0519\",\n \"rgb\": \"rgb(76,5,25)\",\n \"hsl\": \"hsl(343.1,87.7%,15.9%)\",\n \"oklch\": \"oklch(0.27,0.10,12)\",\n \"rgbChannel\": \"76 5 25\",\n \"hslChannel\": \"343.1 87.7% 15.9%\"\n }\n ]\n}\n" }, { "path": "crates/ui/src/theme/default-theme.json", "content": "{\n \"$schema\": \"https://github.com/longbridge/gpui-component/raw/refs/heads/main/.theme-schema.json\",\n \"name\": \"Default\",\n \"author\": \"shadcn\",\n \"url\": \"https://ui.shadcn.com\",\n \"_ref\": \"https://github.com/shadcn-ui/ui/blob/main/apps/v4/public/r/colors/neutral.json\",\n \"themes\": [\n {\n \"is_default\": true,\n \"name\": \"Default Light\",\n \"mode\": \"light\",\n \"colors\": {\n \"accent.background\": \"neutral-100\",\n \"accent.foreground\": \"neutral-900\",\n \"accordion.background\": \"white\",\n \"background\": \"white\",\n \"border\": \"neutral-200\",\n \"group_box.background\": \"#f5f5f5\",\n \"group_box.foreground\": \"#171717\",\n \"caret\": \"#0a0a0a\",\n \"chart_1\": \"#93c5fd\",\n \"chart_2\": \"#3b82f6\",\n \"chart_3\": \"#2563eb\",\n \"chart_4\": \"#1d4ed8\",\n \"chart_5\": \"#1e40af\",\n \"chart_bullish\": \"green-600\",\n \"chart_bearish\": \"red-600\",\n \"danger.background\": \"red-500\",\n \"danger.foreground\": \"neutral-50\",\n \"description_list_label.foreground\": \"#171717\",\n \"drag_border\": \"#3b82f6\",\n \"drop_target.background\": \"#3b82f640\",\n \"foreground\": \"neutral-950\",\n \"info.background\": \"cyan-500\",\n \"info.foreground\": \"neutral-50\",\n \"input.border\": \"neutral-200\",\n \"link.foreground\": \"#0a0a0a\",\n \"link.active.foreground\": \"#0a0a0a\",\n \"link.hover.foreground\": \"#404040\",\n \"list.background\": \"white\",\n \"list.active.background\": \"#bfdbfe33\",\n \"list.active.border\": \"#60a5fa\",\n \"list.even.background\": \"#fafafa\",\n \"list.head.background\": \"#fafafa\",\n \"list.hover.background\": \"#f5f5f5\",\n \"muted.background\": \"neutral-100\",\n \"muted.foreground\": \"neutral-500\",\n \"popover.background\": \"white\",\n \"popover.foreground\": \"neutral-950\",\n \"primary.background\": \"neutral-900\",\n \"primary.active.background\": \"neutral-950\",\n \"primary.foreground\": \"neutral-50\",\n \"primary.hover.background\": \"neutral-800\",\n \"progress_bar.background\": \"#171717\",\n \"ring\": \"neutral-950\",\n \"scrollbar.background\": \"#fafafa00\",\n \"scrollbar.thumb.background\": \"#a3a3a3e6\",\n \"scrollbar.thumb.hover.background\": \"#a3a3a3\",\n \"secondary.background\": \"neutral-200\",\n \"secondary.active.background\": \"neutral-300\",\n \"secondary.foreground\": \"neutral-900\",\n \"secondary.hover.background\": \"neutral-200\",\n \"selection.background\": \"#55a0fc\",\n \"sidebar.background\": \"#fafafa\",\n \"sidebar.accent.background\": \"#e5e5e5\",\n \"sidebar.accent.foreground\": \"#171717\",\n \"sidebar.border\": \"#e5e5e5\",\n \"sidebar.foreground\": \"#171717\",\n \"sidebar.primary.background\": \"#171717\",\n \"sidebar.primary.foreground\": \"#fafafa\",\n \"skeleton.background\": \"#f5f5f5\",\n \"slider.bar.background\": \"#171717\",\n \"slider.thumb.background\": \"white\",\n \"success.background\": \"green-500\",\n \"success.foreground\": \"neutral-50\",\n \"switch.background\": \"#d4d4d4\",\n \"tab.background\": \"#00000000\",\n \"tab.active.background\": \"white\",\n \"tab.active.foreground\": \"#171717\",\n \"tab_bar.background\": \"#f5f5f5\",\n \"tab_bar.segmented.background\": \"#f5f5f5\",\n \"tab.foreground\": \"#404040\",\n \"table.background\": \"white\",\n \"table.active.background\": \"#bfdbfe33\",\n \"table.active.border\": \"#60a5fa\",\n \"table.even.background\": \"#fafafa\",\n \"table.head.background\": \"#fafafa\",\n \"table.head.foreground\": \"#737373\",\n \"table.hover.background\": \"#f5f5f5\",\n \"table.row.border\": \"#e5e5e5b3\",\n \"tiles.background\": \"#fafafa\",\n \"title_bar.background\": \"#F8F8F8\",\n \"title_bar.border\": \"#e5e5e5\",\n \"warning.background\": \"yellow-500\",\n \"warning.foreground\": \"neutral-50\",\n \"overlay\": \"#0000000d\",\n \"window.border\": \"#e5e5e5\",\n \"base.red\": \"red-600\",\n \"base.red.light\": \"red-400\",\n \"base.green\": \"green-600\",\n \"base.green.light\": \"green-400\",\n \"base.blue\": \"blue-600\",\n \"base.blue.light\": \"blue-400\",\n \"base.yellow\": \"yellow-600\",\n \"base.yellow.light\": \"yellow-400\",\n \"base.magenta\": \"purple-600\",\n \"base.magenta.light\": \"purple-400\",\n \"base.cyan\": \"cyan-600\",\n \"base.cyan.light\": \"cyan-400\"\n },\n \"highlight\": {\n \"editor.foreground\": \"#000000\",\n \"editor.background\": \"#ffffff\",\n \"editor.active_line.background\": \"#F5F5F5\",\n \"editor.line_number\": \"#929292\",\n \"editor.active_line_number\": \"#000000\",\n \"editor.invisible\": \"#73737366\",\n \"conflict\": \"#C5060B\",\n \"created\": \"#1642FF\",\n \"hidden\": \"#6D6D6D\",\n \"hint\": \"#9e5dff\",\n \"modified\": \"#9e7008\",\n \"predictive\": \"#A4ABB6\",\n \"warning\": \"#C99401\",\n \"syntax\": {\n \"attribute\": {\n \"color\": \"#957931\"\n },\n \"boolean\": {\n \"color\": \"#C5060B\"\n },\n \"comment\": {\n \"color\": \"#007fff\"\n },\n \"comment.doc\": {\n \"color\": \"#007fff\"\n },\n \"constant\": {\n \"color\": \"#C5060B\"\n },\n \"constructor\": {\n \"color\": \"#0433ff\"\n },\n \"embedded\": {\n \"color\": \"#333333\"\n },\n \"function\": {\n \"color\": \"#0000A2\"\n },\n \"keyword\": {\n \"color\": \"#0433ff\"\n },\n \"link_text\": {\n \"color\": \"#0000A2\",\n \"font_style\": \"normal\"\n },\n \"link_uri\": {\n \"color\": \"#6A7293\",\n \"font_style\": \"italic\"\n },\n \"number\": {\n \"color\": \"#0433ff\"\n },\n \"string\": {\n \"color\": \"#036A07\"\n },\n \"string.escape\": {\n \"color\": \"#036A07\"\n },\n \"string.regex\": {\n \"color\": \"#036A07\"\n },\n \"string.special\": {\n \"color\": \"#d21f07\"\n },\n \"string.special.symbol\": {\n \"color\": \"#d21f07\"\n },\n \"tag\": {\n \"color\": \"#0433ff\"\n },\n \"text.literal\": {\n \"color\": \"#6F42C1\"\n },\n \"title\": {\n \"color\": \"#0433FF\"\n },\n \"type\": {\n \"color\": \"#6f42c1\"\n },\n \"property\": {\n \"color\": \"#333333\"\n },\n \"variable\": {\n \"color\": \"#333333\"\n },\n \"variable.special\": {\n \"color\": \"#C5060B\"\n }\n }\n }\n },\n {\n \"is_default\": true,\n \"name\": \"Default Dark\",\n \"mode\": \"dark\",\n \"colors\": {\n \"accent.background\": \"neutral-800\",\n \"accent.foreground\": \"neutral-50\",\n \"accordion.background\": \"#0a0a0a\",\n \"background\": \"neutral-950\",\n \"border\": \"neutral-800\",\n \"group_box.background\": \"neutral-950\",\n \"group_box.foreground\": \"neutral-50\",\n \"caret\": \"#fafafa\",\n \"chart_1\": \"#93c5fd\",\n \"chart_2\": \"#3b82f6\",\n \"chart_3\": \"#2563eb\",\n \"chart_4\": \"#1d4ed8\",\n \"chart_5\": \"#1e40af\",\n \"chart_bullish\": \"green-600\",\n \"chart_bearish\": \"red-600\",\n \"danger.background\": \"red-400\",\n \"danger.foreground\": \"red-600\",\n \"description_list_label.background\": \"#171717\",\n \"description_list_label.foreground\": \"#f5f5f5\",\n \"drag_border\": \"#3b82f6\",\n \"drop_target.background\": \"#3b82f619\",\n \"foreground\": \"neutral-50\",\n \"info.background\": \"cyan-400\",\n \"info.foreground\": \"cyan-600\",\n \"input.border\": \"#2f2f2f\",\n \"link.foreground\": \"#fafafa\",\n \"link.active.foreground\": \"#d4d4d4\",\n \"link.hover.foreground\": \"#ffffff\",\n \"list.background\": \"#0a0a0a\",\n \"list.active.background\": \"#1e40af33\",\n \"list.active.border\": \"#1d4ed8\",\n \"list.even.background\": \"#17171766\",\n \"list.head.background\": \"#17171766\",\n \"muted.background\": \"neutral-800\",\n \"muted.foreground\": \"neutral-400\",\n \"popover.background\": \"neutral-950\",\n \"popover.foreground\": \"neutral-50\",\n \"primary.background\": \"neutral-50\",\n \"primary.active.background\": \"neutral-200\",\n \"primary.foreground\": \"neutral-900\",\n \"primary.hover.background\": \"neutral-100\",\n \"progress_bar.background\": \"#f5f5f5\",\n \"ring\": \"neutral-300\",\n \"scrollbar.background\": \"#17171700\",\n \"scrollbar.thumb.background\": \"#525252e6\",\n \"scrollbar.thumb.hover.background\": \"#525252\",\n \"secondary.background\": \"neutral-800\",\n \"secondary.active.background\": \"#212121\",\n \"secondary.foreground\": \"neutral-50\",\n \"secondary.hover.background\": \"#292929\",\n \"selection.background\": \"#1d4ed8\",\n \"sidebar.background\": \"#0a0a0a\",\n \"sidebar.accent.background\": \"#262626\",\n \"sidebar.accent.foreground\": \"#f5f5f5\",\n \"sidebar.border\": \"#262626\",\n \"sidebar.foreground\": \"#f5f5f5\",\n \"sidebar.primary.background\": \"#f5f5f5\",\n \"sidebar.primary.foreground\": \"#0a0a0a\",\n \"skeleton.background\": \"#171717\",\n \"slider.bar.background\": \"#fafafa\",\n \"slider.thumb.background\": \"#0a0a0a\",\n \"success.background\": \"green-400\",\n \"success.foreground\": \"green-600\",\n \"switch.background\": \"#404040\",\n \"tab.background\": \"#00000000\",\n \"tab.active.background\": \"#0a0a0a\",\n \"tab.active.foreground\": \"#fafafa\",\n \"tab_bar.background\": \"#171717\",\n \"tab_bar.segmented.background\": \"#171717\",\n \"tab.foreground\": \"#d4d4d4\",\n \"table.background\": \"#0a0a0a\",\n \"table.head.foreground\": \"#525252\",\n \"table.row.border\": \"#262626b3\",\n \"tiles.background\": \"#171717\",\n \"title_bar.background\": \"#171717\",\n \"title_bar.border\": \"#262626\",\n \"warning.background\": \"yellow-400\",\n \"warning.foreground\": \"yellow-600\",\n \"overlay\": \"#ffffff08\",\n \"window.border\": \"#262626\",\n \"base.red\": \"red-400\",\n \"base.red.light\": \"red-300\",\n \"base.green\": \"green-400\",\n \"base.green.light\": \"green-300\",\n \"base.blue\": \"blue-400\",\n \"base.blue.light\": \"blue-300\",\n \"base.yellow\": \"yellow-400\",\n \"base.yellow.light\": \"yellow-300\",\n \"base.magenta\": \"purple-400\",\n \"base.magenta.light\": \"purple-300\",\n \"base.cyan\": \"cyan-400\",\n \"base.cyan.light\": \"cyan-300\"\n },\n \"highlight\": {\n \"editor.foreground\": \"#CACCCA\",\n \"editor.background\": \"#0a0a0a\",\n \"editor.active_line.background\": \"#171717\",\n \"editor.line_number\": \"#8F8F8F\",\n \"editor.active_line_number\": \"#DDDDDD\",\n \"editor.invisible\": \"#73737366\",\n \"conflict\": \"#D2602D\",\n \"created\": \"#3f72e2\",\n \"created.background\": \"#0C4619\",\n \"deleted.background\": \"#46190C\",\n \"error.background\": \"#46190C\",\n \"error.border\": \"#802207\",\n \"hidden\": \"#9E9E9E\",\n \"hint\": \"#b283f8\",\n \"hint.background\": \"#250c4b\",\n \"hint.border\": \"#3f0891\",\n \"info.background\": \"#0059D1\",\n \"info.border\": \"#0059D1\",\n \"modified\": \"#B0A878\",\n \"modified.background\": \"#3A310E\",\n \"predictive\": \"#5D5945\",\n \"success.background\": \"#0C4619\",\n \"warning.background\": \"#3A310E\",\n \"warning.border\": \"#7B6508\",\n \"syntax\": {\n \"attribute\": {\n \"color\": \"#e7cb8f\"\n },\n \"boolean\": {\n \"color\": \"#E1D797\"\n },\n \"comment\": {\n \"color\": \"#9E9E9E\"\n },\n \"comment.doc\": {\n \"color\": \"#9E9E9E\"\n },\n \"constant\": {\n \"color\": \"#E1D797\"\n },\n \"constructor\": {\n \"color\": \"#b5af9a\"\n },\n \"embedded\": {\n \"color\": \"#CACCCA\"\n },\n \"function\": {\n \"color\": \"#fdd888\"\n },\n \"keyword\": {\n \"color\": \"#c28b12\"\n },\n \"link_text\": {\n \"color\": \"#307BF6\",\n \"font_style\": \"normal\"\n },\n \"link_uri\": {\n \"color\": \"#7faef9\",\n \"font_style\": \"italic\"\n },\n \"number\": {\n \"color\": \"#E1D797\"\n },\n \"string\": {\n \"color\": \"#62BA46\"\n },\n \"string.escape\": {\n \"color\": \"#62BA46\"\n },\n \"string.regex\": {\n \"color\": \"#62BA46\"\n },\n \"string.special\": {\n \"color\": \"#E1D797\"\n },\n \"string.special.symbol\": {\n \"color\": \"#E1D797\"\n },\n \"tag\": {\n \"color\": \"#b5af9a\"\n },\n \"text.literal\": {\n \"color\": \"#E1D797\"\n },\n \"title\": {\n \"color\": \"#fdd888\",\n \"font_weight\": 600\n },\n \"type\": {\n \"color\": \"#c75828\"\n },\n \"property\": {\n \"color\": \"#CACCCA\"\n },\n \"variable.special\": {\n \"color\": \"#E19773\"\n }\n }\n }\n }\n ]\n}\n" }, { "path": "crates/ui/src/theme/mod.rs", "content": "use crate::{\n highlighter::HighlightTheme, list::ListSettings, notification::NotificationSettings,\n scroll::ScrollbarShow, sheet::SheetSettings,\n};\nuse gpui::{App, Global, Hsla, Pixels, SharedString, Window, WindowAppearance, px};\nuse schemars::JsonSchema;\nuse serde::{Deserialize, Serialize};\nuse std::{\n ops::{Deref, DerefMut},\n rc::Rc,\n sync::Arc,\n};\n\nmod color;\nmod registry;\nmod schema;\nmod theme_color;\n\npub use color::*;\npub use registry::*;\npub use schema::*;\npub use theme_color::*;\n\npub fn init(cx: &mut App) {\n registry::init(cx);\n\n // Ensure theme is loaded directly on startup for WASM compatibility\n Theme::change(ThemeMode::Light, None, cx);\n Theme::sync_scrollbar_appearance(cx);\n}\n\npub trait ActiveTheme {\n fn theme(&self) -> &Theme;\n}\n\nimpl ActiveTheme for App {\n #[inline(always)]\n fn theme(&self) -> &Theme {\n Theme::global(self)\n }\n}\n\n/// The global theme configuration.\n#[derive(Debug, Clone, Serialize, Deserialize, JsonSchema)]\npub struct Theme {\n pub colors: ThemeColor,\n pub highlight_theme: Arc,\n pub light_theme: Rc,\n pub dark_theme: Rc,\n\n pub mode: ThemeMode,\n /// The font family for the application, default is `.SystemUIFont`.\n pub font_family: SharedString,\n /// The base font size for the application, default is 16px.\n pub font_size: Pixels,\n /// The monospace font family for the application.\n ///\n /// Defaults to:\n ///\n /// - macOS: `Menlo`\n /// - Windows: `Consolas`\n /// - Linux: `DejaVu Sans Mono`\n pub mono_font_family: SharedString,\n /// The monospace font size for the application, default is 13px.\n pub mono_font_size: Pixels,\n /// Radius for the general elements.\n pub radius: Pixels,\n /// Radius for the large elements, e.g.: Dialog, Notification border radius.\n pub radius_lg: Pixels,\n pub shadow: bool,\n pub transparent: Hsla,\n /// Show the scrollbar mode, default: Scrolling\n pub scrollbar_show: ScrollbarShow,\n /// The notification setting.\n pub notification: NotificationSettings,\n /// Tile grid size, default is 4px.\n pub tile_grid_size: Pixels,\n /// The shadow of the tile panel.\n pub tile_shadow: bool,\n /// The border radius of the tile panel, default is 0px.\n pub tile_radius: Pixels,\n /// The list settings.\n pub list: ListSettings,\n /// The sheet settings.\n pub sheet: SheetSettings,\n}\n\nimpl Default for Theme {\n fn default() -> Self {\n Self::from(&ThemeColor::default())\n }\n}\n\nimpl Deref for Theme {\n type Target = ThemeColor;\n\n fn deref(&self) -> &Self::Target {\n &self.colors\n }\n}\n\nimpl DerefMut for Theme {\n fn deref_mut(&mut self) -> &mut Self::Target {\n &mut self.colors\n }\n}\n\nimpl Global for Theme {}\n\nimpl Theme {\n /// Returns the global theme reference\n #[inline(always)]\n pub fn global(cx: &App) -> &Theme {\n cx.global::()\n }\n\n /// Returns the global theme mutable reference\n #[inline(always)]\n pub fn global_mut(cx: &mut App) -> &mut Theme {\n cx.global_mut::()\n }\n\n /// Returns true if the theme is dark.\n #[inline(always)]\n pub fn is_dark(&self) -> bool {\n self.mode.is_dark()\n }\n\n /// Returns the current theme name.\n pub fn theme_name(&self) -> &SharedString {\n if self.is_dark() {\n &self.dark_theme.name\n } else {\n &self.light_theme.name\n }\n }\n\n /// Sync the theme with the system appearance\n pub fn sync_system_appearance(window: Option<&mut Window>, cx: &mut App) {\n // Better use window.appearance() for avoid error on Linux.\n // https://github.com/longbridge/gpui-component/issues/104\n let appearance = window\n .as_ref()\n .map(|window| window.appearance())\n .unwrap_or_else(|| cx.window_appearance());\n\n Self::change(appearance, window, cx);\n }\n\n /// Sync the Scrollbar showing behavior with the system\n pub fn sync_scrollbar_appearance(cx: &mut App) {\n Theme::global_mut(cx).scrollbar_show = if cx.should_auto_hide_scrollbars() {\n ScrollbarShow::Scrolling\n } else {\n ScrollbarShow::Hover\n };\n }\n\n /// Change the theme mode.\n pub fn change(mode: impl Into, window: Option<&mut Window>, cx: &mut App) {\n let mode = mode.into();\n if !cx.has_global::() {\n let mut theme = Theme::default();\n theme.light_theme = ThemeRegistry::global(cx).default_light_theme().clone();\n theme.dark_theme = ThemeRegistry::global(cx).default_dark_theme().clone();\n cx.set_global(theme);\n }\n\n let theme = cx.global_mut::();\n theme.mode = mode;\n if mode.is_dark() {\n theme.apply_config(&theme.dark_theme.clone());\n } else {\n theme.apply_config(&theme.light_theme.clone());\n }\n\n if let Some(window) = window {\n window.refresh();\n }\n }\n\n /// Get the input background color.\n ///\n /// For dark, use a transparent color mixed with the input border: `cx.theme().input`,\n /// otherwise use the `cx.theme().background` color.\n #[inline]\n pub fn input_background(&self) -> Hsla {\n if self.is_dark() {\n self.input.mix_oklab(self.transparent, 0.3)\n } else {\n self.background\n }\n }\n\n /// Get the editor background color, if not set, use the input background color.\n #[inline]\n pub(crate) fn editor_background(&self) -> Hsla {\n self.highlight_theme\n .style\n .editor_background\n .unwrap_or_else(|| self.input_background())\n }\n}\n\nimpl From<&ThemeColor> for Theme {\n fn from(colors: &ThemeColor) -> Self {\n Theme {\n mode: ThemeMode::default(),\n transparent: Hsla::transparent_black(),\n font_family: \".SystemUIFont\".into(),\n font_size: px(16.),\n mono_font_family: if cfg!(target_os = \"macos\") {\n // https://en.wikipedia.org/wiki/Menlo_(typeface)\n \"Menlo\".into()\n } else if cfg!(target_os = \"windows\") {\n \"Consolas\".into()\n } else {\n \"DejaVu Sans Mono\".into()\n },\n mono_font_size: px(13.),\n radius: px(6.),\n radius_lg: px(8.),\n shadow: true,\n scrollbar_show: ScrollbarShow::default(),\n notification: NotificationSettings::default(),\n tile_grid_size: px(8.),\n tile_shadow: true,\n tile_radius: px(0.),\n list: ListSettings::default(),\n colors: *colors,\n light_theme: Rc::new(ThemeConfig::default()),\n dark_theme: Rc::new(ThemeConfig::default()),\n highlight_theme: HighlightTheme::default_light(),\n sheet: SheetSettings::default(),\n }\n }\n}\n\n#[derive(\n Debug,\n Clone,\n Copy,\n Default,\n PartialEq,\n PartialOrd,\n Eq,\n Ord,\n Hash,\n Serialize,\n Deserialize,\n JsonSchema,\n)]\n#[serde(rename_all = \"snake_case\")]\npub enum ThemeMode {\n #[default]\n Light,\n Dark,\n}\n\nimpl ThemeMode {\n #[inline(always)]\n pub fn is_dark(&self) -> bool {\n matches!(self, Self::Dark)\n }\n\n /// Return lower_case theme name: `light`, `dark`.\n pub fn name(&self) -> &'static str {\n match self {\n ThemeMode::Light => \"light\",\n ThemeMode::Dark => \"dark\",\n }\n }\n}\n\nimpl From for ThemeMode {\n fn from(appearance: WindowAppearance) -> Self {\n match appearance {\n WindowAppearance::Dark | WindowAppearance::VibrantDark => Self::Dark,\n WindowAppearance::Light | WindowAppearance::VibrantLight => Self::Light,\n }\n }\n}\n" }, { "path": "crates/ui/src/theme/registry.rs", "content": "use crate::{Theme, ThemeColor, ThemeConfig, ThemeMode, ThemeSet, highlighter::HighlightTheme};\n#[allow(unused)]\nuse anyhow::Result;\nuse gpui::{App, Global, SharedString};\nuse std::{\n collections::HashMap,\n path::PathBuf,\n rc::Rc,\n sync::{Arc, LazyLock},\n};\n\nconst DEFAULT_THEME: &str = include_str!(\"./default-theme.json\");\npub(crate) static DEFAULT_THEME_COLORS: LazyLock<\n HashMap, Arc)>,\n> = LazyLock::new(|| {\n let mut colors = HashMap::new();\n\n let themes: Vec = serde_json::from_str::(DEFAULT_THEME)\n .expect(\"Failed to parse themes/default.json\")\n .themes;\n\n for theme in themes {\n let mut theme_color = ThemeColor::default();\n theme_color.apply_config(&theme, &ThemeColor::default());\n\n let highlight_theme = HighlightTheme {\n name: theme.name.to_string(),\n appearance: theme.mode,\n style: theme.highlight.unwrap_or_default(),\n };\n\n colors.insert(\n theme.mode,\n (Arc::new(theme_color), Arc::new(highlight_theme)),\n );\n }\n\n colors\n});\n\npub(super) fn init(cx: &mut App) {\n cx.set_global(ThemeRegistry::default());\n ThemeRegistry::global_mut(cx).init_default_themes();\n\n // Observe changes to the theme registry to apply changes to the active theme\n cx.observe_global::(|cx| {\n let mode = Theme::global(cx).mode;\n let light_theme = Theme::global(cx).light_theme.name.clone();\n let dark_theme = Theme::global(cx).dark_theme.name.clone();\n\n if let Some(theme) = ThemeRegistry::global(cx)\n .themes()\n .get(&light_theme)\n .cloned()\n {\n Theme::global_mut(cx).light_theme = theme;\n }\n if let Some(theme) = ThemeRegistry::global(cx).themes().get(&dark_theme).cloned() {\n Theme::global_mut(cx).dark_theme = theme;\n }\n\n let theme_name = if mode.is_dark() {\n dark_theme\n } else {\n light_theme\n };\n\n tracing::info!(\"Reload active theme: {:?}...\", theme_name);\n Theme::change(mode, None, cx);\n cx.refresh_windows();\n })\n .detach();\n}\n\n#[derive(Default, Debug)]\npub struct ThemeRegistry {\n themes_dir: PathBuf,\n default_themes: HashMap>,\n themes: HashMap>,\n has_custom_themes: bool,\n}\n\nimpl Global for ThemeRegistry {}\n\nimpl ThemeRegistry {\n pub fn global(cx: &App) -> &Self {\n cx.global::()\n }\n\n pub fn global_mut(cx: &mut App) -> &mut Self {\n cx.global_mut::()\n }\n\n /// Watch themes directory.\n ///\n /// And reload themes to trigger the `on_load` callback.\n #[cfg(not(target_family = \"wasm\"))]\n pub fn watch_dir(themes_dir: PathBuf, cx: &mut App, on_load: F) -> Result<()>\n where\n F: Fn(&mut App) + 'static,\n {\n Self::global_mut(cx).themes_dir = themes_dir.clone();\n\n // Load theme in the background.\n cx.spawn(async move |cx| {\n _ = cx.update(|cx| {\n if let Err(err) = Self::_watch_themes_dir(themes_dir, cx) {\n tracing::error!(\"Failed to watch themes directory: {}\", err);\n }\n\n Self::reload_themes(cx);\n on_load(cx);\n });\n })\n .detach();\n\n Ok(())\n }\n\n /// Returns a reference to the map of themes (including default themes).\n pub fn themes(&self) -> &HashMap> {\n &self.themes\n }\n\n /// Returns a sorted list of themes.\n pub fn sorted_themes(&self) -> Vec<&Rc> {\n let mut themes = self.themes.values().collect::>();\n // sort by is_default true first, then light first dark later, then by name case-insensitive\n themes.sort_by(|a, b| {\n b.is_default\n .cmp(&a.is_default)\n .then(a.mode.cmp(&b.mode))\n .then(a.name.to_lowercase().cmp(&b.name.to_lowercase()))\n });\n themes\n }\n\n /// Returns a reference to the map of default themes.\n pub fn default_themes(&self) -> &HashMap> {\n &self.default_themes\n }\n\n pub fn default_light_theme(&self) -> &Rc {\n &self.default_themes[&ThemeMode::Light]\n }\n\n pub fn default_dark_theme(&self) -> &Rc {\n &self.default_themes[&ThemeMode::Dark]\n }\n\n pub fn load_themes_from_str(&mut self, content: &str) -> anyhow::Result<()> {\n let theme_set = serde_json::from_str::(content)?;\n for theme in theme_set.themes {\n if !self.themes.contains_key(&theme.name) {\n let theme_name = theme.name.clone();\n self.themes.insert(theme_name, Rc::new(theme));\n self.has_custom_themes = true;\n }\n }\n Ok(())\n }\n\n fn init_default_themes(&mut self) {\n let default_themes: Vec = serde_json::from_str::(DEFAULT_THEME)\n .expect(\"failed to parse default theme.\")\n .themes;\n for theme in default_themes.into_iter() {\n if theme.mode.is_dark() {\n self.default_themes.insert(ThemeMode::Dark, Rc::new(theme));\n } else {\n self.default_themes.insert(ThemeMode::Light, Rc::new(theme));\n }\n }\n self.themes_dir = PathBuf::from(\"./themes\");\n self.themes = self\n .default_themes\n .values()\n .map(|theme| {\n let name = theme.name.clone();\n (name, Rc::clone(theme))\n })\n .collect();\n }\n\n #[cfg(not(target_family = \"wasm\"))]\n fn _watch_themes_dir(themes_dir: PathBuf, cx: &mut App) -> anyhow::Result<()> {\n if !themes_dir.exists() {\n std::fs::create_dir_all(&themes_dir)?;\n }\n\n let (tx, rx) = smol::channel::bounded(100);\n let mut watcher =\n notify::recommended_watcher(move |res: notify::Result| {\n if let Ok(event) = &res {\n match event.kind {\n notify::EventKind::Create(_)\n | notify::EventKind::Modify(_)\n | notify::EventKind::Remove(_) => {\n if let Err(err) = tx.send_blocking(res) {\n tracing::error!(\"Failed to send theme event: {:?}\", err);\n }\n }\n _ => {}\n }\n }\n })?;\n\n cx.spawn(async move |cx| {\n use notify::Watcher as _;\n\n if let Err(err) = watcher.watch(&themes_dir, notify::RecursiveMode::Recursive) {\n tracing::error!(\"Failed to watch themes directory: {:?}\", err);\n }\n\n while (rx.recv().await).is_ok() {\n tracing::info!(\"Reloading themes...\");\n _ = cx.update(Self::reload_themes);\n }\n })\n .detach();\n\n Ok(())\n }\n\n #[cfg(not(target_family = \"wasm\"))]\n fn reload_themes(cx: &mut App) {\n let registry = Self::global_mut(cx);\n match registry.reload() {\n Ok(_) => {\n tracing::info!(\"Themes reloaded successfully.\");\n }\n Err(e) => tracing::error!(\"Failed to reload themes: {:?}\", e),\n }\n }\n\n #[cfg(not(target_family = \"wasm\"))]\n /// Reload themes from the `themes_dir`.\n fn reload(&mut self) -> Result<()> {\n let mut themes = vec![];\n\n if self.themes_dir.exists() {\n for entry in std::fs::read_dir(&self.themes_dir)? {\n let entry = entry?;\n let path = entry.path();\n if path.is_file() && path.extension().and_then(|s| s.to_str()) == Some(\"json\") {\n let file_content = std::fs::read_to_string(path.clone())?;\n\n match serde_json::from_str::(&file_content) {\n Ok(theme_set) => {\n themes.extend(theme_set.themes);\n }\n Err(e) => {\n tracing::error!(\n \"ignored invalid theme file: {}, {}\",\n path.display(),\n e\n );\n }\n }\n }\n }\n }\n\n self.themes.clear();\n for theme in self.default_themes.values() {\n self.themes\n .insert(theme.name.clone(), Rc::new((**theme).clone()));\n }\n\n for theme in themes.iter() {\n if self.themes.contains_key(&theme.name) {\n continue;\n }\n\n if theme.is_default {\n self.default_themes\n .insert(theme.mode, Rc::new(theme.clone()));\n }\n\n self.has_custom_themes = true;\n self.themes\n .insert(theme.name.clone(), Rc::new(theme.clone()));\n }\n\n Ok(())\n }\n}\n" }, { "path": "crates/ui/src/theme/schema.rs", "content": "use std::{rc::Rc, sync::Arc};\n\nuse gpui::{SharedString, px};\nuse schemars::JsonSchema;\nuse serde::{Deserialize, Serialize};\n\nuse crate::{\n Colorize, Theme, ThemeColor, ThemeMode,\n highlighter::{HighlightTheme, HighlightThemeStyle},\n try_parse_color,\n};\n\n/// Represents a theme configuration.\n#[derive(Debug, Clone, Default, Serialize, Deserialize, JsonSchema)]\n#[serde(default)]\npub struct ThemeSet {\n /// The name of the theme set.\n pub name: SharedString,\n /// The author of the theme.\n pub author: Option,\n /// The URL of the theme.\n pub url: Option,\n /// The theme list of the theme set.\n #[serde(rename = \"themes\")]\n pub themes: Vec,\n}\n\n#[derive(Debug, Clone, Default, Serialize, Deserialize, JsonSchema)]\n#[serde(default)]\npub struct ThemeConfig {\n /// Whether this theme is the default theme.\n pub is_default: bool,\n /// The name of the theme.\n pub name: SharedString,\n /// The mode of the theme, default is light.\n pub mode: ThemeMode,\n\n /// The base font size, default is 16.\n #[serde(rename = \"font.size\")]\n pub font_size: Option,\n /// The base font family, default is system font: `.SystemUIFont`.\n #[serde(rename = \"font.family\")]\n pub font_family: Option,\n /// The monospace font family, default is platform specific:\n /// - macOS: `Menlo`\n /// - Windows: `Consolas`\n /// - Linux: `DejaVu Sans Mono`\n #[serde(rename = \"mono_font.family\")]\n pub mono_font_family: Option,\n /// The monospace font size, default is 13.\n #[serde(rename = \"mono_font.size\")]\n pub mono_font_size: Option,\n\n /// The border radius for general elements, default is 6.\n #[serde(rename = \"radius\")]\n pub radius: Option,\n /// The border radius for large elements like Dialogs and Notifications, default is 8.\n #[serde(rename = \"radius.lg\")]\n pub radius_lg: Option,\n /// Set shadows in the theme, for example the Input and Button, default is true.\n #[serde(rename = \"shadow\")]\n pub shadow: Option,\n\n /// The colors of the theme.\n pub colors: ThemeConfigColors,\n /// The highlight theme, this part is combilbility with `style` section in Zed theme.\n ///\n /// https://github.com/zed-industries/zed/blob/f50041779dcfd7a76c8aec293361c60c53f02d51/assets/themes/ayu/ayu.json#L9\n pub highlight: Option,\n}\n\n#[derive(Debug, Default, Clone, JsonSchema, Serialize, Deserialize)]\npub struct ThemeConfigColors {\n /// Used for accents such as hover background on MenuItem, ListItem, etc.\n #[serde(rename = \"accent.background\")]\n pub accent: Option,\n /// Used for accent text color.\n #[serde(rename = \"accent.foreground\")]\n pub accent_foreground: Option,\n /// Accordion background color.\n #[serde(rename = \"accordion.background\")]\n pub accordion: Option,\n /// Accordion hover background color.\n #[serde(rename = \"accordion.hover.background\")]\n pub accordion_hover: Option,\n /// Default background color.\n #[serde(rename = \"background\")]\n pub background: Option,\n /// Default border color\n #[serde(rename = \"border\")]\n pub border: Option,\n /// Button primary background color, fallback to `primary`.\n #[serde(rename = \"button.primary.background\")]\n pub button_primary: Option,\n /// Button primary active background color, fallback to `primary_active`.\n #[serde(rename = \"button.primary.active.background\")]\n pub button_primary_active: Option,\n /// Button primary text color, fallback to `primary_foreground`.\n #[serde(rename = \"button.primary.foreground\")]\n pub button_primary_foreground: Option,\n /// Button primary hover background color, fallback to `primary_hover`.\n #[serde(rename = \"button.primary.hover.background\")]\n pub button_primary_hover: Option,\n /// Background color for GroupBox.\n #[serde(rename = \"group_box.background\")]\n pub group_box: Option,\n /// Text color for GroupBox.\n #[serde(rename = \"group_box.foreground\")]\n pub group_box_foreground: Option,\n /// Title text color for GroupBox.\n #[serde(rename = \"group_box.title.foreground\")]\n pub group_box_title_foreground: Option,\n /// Input caret color (Blinking cursor).\n #[serde(rename = \"caret\")]\n pub caret: Option,\n /// Chart 1 color.\n #[serde(rename = \"chart.1\")]\n pub chart_1: Option,\n /// Chart 2 color.\n #[serde(rename = \"chart.2\")]\n pub chart_2: Option,\n /// Chart 3 color.\n #[serde(rename = \"chart.3\")]\n pub chart_3: Option,\n /// Chart 4 color.\n #[serde(rename = \"chart.4\")]\n pub chart_4: Option,\n /// Chart 5 color.\n #[serde(rename = \"chart.5\")]\n pub chart_5: Option,\n /// Bullish color for candlestick charts (upward price movement).\n #[serde(rename = \"chart_bullish\")]\n pub chart_bullish: Option,\n /// Bearish color for candlestick charts (downward price movement).\n #[serde(rename = \"chart_bearish\")]\n pub chart_bearish: Option,\n /// Danger background color.\n #[serde(rename = \"danger.background\")]\n pub danger: Option,\n /// Danger active background color.\n #[serde(rename = \"danger.active.background\")]\n pub danger_active: Option,\n /// Danger text color.\n #[serde(rename = \"danger.foreground\")]\n pub danger_foreground: Option,\n /// Danger hover background color.\n #[serde(rename = \"danger.hover.background\")]\n pub danger_hover: Option,\n /// Description List label background color.\n #[serde(rename = \"description_list.label.background\")]\n pub description_list_label: Option,\n /// Description List label foreground color.\n #[serde(rename = \"description_list.label.foreground\")]\n pub description_list_label_foreground: Option,\n /// Drag border color.\n #[serde(rename = \"drag.border\")]\n pub drag_border: Option,\n /// Drop target background color.\n #[serde(rename = \"drop_target.background\")]\n pub drop_target: Option,\n /// Default text color.\n #[serde(rename = \"foreground\")]\n pub foreground: Option,\n /// Info background color.\n #[serde(rename = \"info.background\")]\n pub info: Option,\n /// Info active background color.\n #[serde(rename = \"info.active.background\")]\n pub info_active: Option,\n /// Info text color.\n #[serde(rename = \"info.foreground\")]\n pub info_foreground: Option,\n /// Info hover background color.\n #[serde(rename = \"info.hover.background\")]\n pub info_hover: Option,\n /// Border color for inputs such as Input, Select, etc.\n #[serde(rename = \"input.border\")]\n pub input: Option,\n /// Link text color.\n #[serde(rename = \"link\")]\n pub link: Option,\n /// Active link text color.\n #[serde(rename = \"link.active\")]\n pub link_active: Option,\n /// Hover link text color.\n #[serde(rename = \"link.hover\")]\n pub link_hover: Option,\n /// Background color for List and ListItem.\n #[serde(rename = \"list.background\")]\n pub list: Option,\n /// Background color for active ListItem.\n #[serde(rename = \"list.active.background\")]\n pub list_active: Option,\n /// Border color for active ListItem.\n #[serde(rename = \"list.active.border\")]\n pub list_active_border: Option,\n /// Stripe background color for even ListItem.\n #[serde(rename = \"list.even.background\")]\n pub list_even: Option,\n /// Background color for List header.\n #[serde(rename = \"list.head.background\")]\n pub list_head: Option,\n /// Hover background color for ListItem.\n #[serde(rename = \"list.hover.background\")]\n pub list_hover: Option,\n /// Muted backgrounds such as Skeleton and Switch.\n #[serde(rename = \"muted.background\")]\n pub muted: Option,\n /// Muted text color, as used in disabled text.\n #[serde(rename = \"muted.foreground\")]\n pub muted_foreground: Option,\n /// Background color for Popover.\n #[serde(rename = \"popover.background\")]\n pub popover: Option,\n /// Text color for Popover.\n #[serde(rename = \"popover.foreground\")]\n pub popover_foreground: Option,\n /// Primary background color.\n #[serde(rename = \"primary.background\")]\n pub primary: Option,\n /// Active primary background color.\n #[serde(rename = \"primary.active.background\")]\n pub primary_active: Option,\n /// Primary text color.\n #[serde(rename = \"primary.foreground\")]\n pub primary_foreground: Option,\n /// Hover primary background color.\n #[serde(rename = \"primary.hover.background\")]\n pub primary_hover: Option,\n /// Progress bar background color.\n #[serde(rename = \"progress.bar.background\")]\n pub progress_bar: Option,\n /// Used for focus ring.\n #[serde(rename = \"ring\")]\n pub ring: Option,\n /// Scrollbar background color.\n #[serde(rename = \"scrollbar.background\")]\n pub scrollbar: Option,\n /// Scrollbar thumb background color.\n #[serde(rename = \"scrollbar.thumb.background\")]\n pub scrollbar_thumb: Option,\n /// Scrollbar thumb hover background color.\n #[serde(rename = \"scrollbar.thumb.hover.background\")]\n pub scrollbar_thumb_hover: Option,\n /// Secondary background color.\n #[serde(rename = \"secondary.background\")]\n pub secondary: Option,\n /// Active secondary background color.\n #[serde(rename = \"secondary.active.background\")]\n pub secondary_active: Option,\n /// Secondary text color, used for secondary Button text color or secondary text.\n #[serde(rename = \"secondary.foreground\")]\n pub secondary_foreground: Option,\n /// Hover secondary background color.\n #[serde(rename = \"secondary.hover.background\")]\n pub secondary_hover: Option,\n /// Input selection background color.\n #[serde(rename = \"selection.background\")]\n pub selection: Option,\n /// Sidebar background color.\n #[serde(rename = \"sidebar.background\")]\n pub sidebar: Option,\n /// Sidebar accent background color.\n #[serde(rename = \"sidebar.accent.background\")]\n pub sidebar_accent: Option,\n /// Sidebar accent text color.\n #[serde(rename = \"sidebar.accent.foreground\")]\n pub sidebar_accent_foreground: Option,\n /// Sidebar border color.\n #[serde(rename = \"sidebar.border\")]\n pub sidebar_border: Option,\n /// Sidebar text color.\n #[serde(rename = \"sidebar.foreground\")]\n pub sidebar_foreground: Option,\n /// Sidebar primary background color.\n #[serde(rename = \"sidebar.primary.background\")]\n pub sidebar_primary: Option,\n /// Sidebar primary text color.\n #[serde(rename = \"sidebar.primary.foreground\")]\n pub sidebar_primary_foreground: Option,\n /// Skeleton background color.\n #[serde(rename = \"skeleton.background\")]\n pub skeleton: Option,\n /// Slider bar background color.\n #[serde(rename = \"slider.background\")]\n pub slider_bar: Option,\n /// Slider thumb background color.\n #[serde(rename = \"slider.thumb.background\")]\n pub slider_thumb: Option,\n /// Success background color.\n #[serde(rename = \"success.background\")]\n pub success: Option,\n /// Success text color.\n #[serde(rename = \"success.foreground\")]\n pub success_foreground: Option,\n /// Success hover background color.\n #[serde(rename = \"success.hover.background\")]\n pub success_hover: Option,\n /// Success active background color.\n #[serde(rename = \"success.active.background\")]\n pub success_active: Option,\n /// Switch background color.\n #[serde(rename = \"switch.background\")]\n pub switch: Option,\n /// Switch thumb background color.\n #[serde(rename = \"switch.thumb.background\")]\n pub switch_thumb: Option,\n /// Tab background color.\n #[serde(rename = \"tab.background\")]\n pub tab: Option,\n /// Tab active background color.\n #[serde(rename = \"tab.active.background\")]\n pub tab_active: Option,\n /// Tab active text color.\n #[serde(rename = \"tab.active.foreground\")]\n pub tab_active_foreground: Option,\n /// TabBar background color.\n #[serde(rename = \"tab_bar.background\")]\n pub tab_bar: Option,\n /// TabBar segmented background color.\n #[serde(rename = \"tab_bar.segmented.background\")]\n pub tab_bar_segmented: Option,\n /// Tab text color.\n #[serde(rename = \"tab.foreground\")]\n pub tab_foreground: Option,\n /// Table background color.\n #[serde(rename = \"table.background\")]\n pub table: Option,\n /// Table active item background color.\n #[serde(rename = \"table.active.background\")]\n pub table_active: Option,\n /// Table active item border color.\n #[serde(rename = \"table.active.border\")]\n pub table_active_border: Option,\n /// Stripe background color for even TableRow.\n #[serde(rename = \"table.even.background\")]\n pub table_even: Option,\n /// Table header background color.\n #[serde(rename = \"table.head.background\")]\n pub table_head: Option,\n /// Table header text color.\n #[serde(rename = \"table.head.foreground\")]\n pub table_head_foreground: Option,\n /// Table footer background color.\n #[serde(rename = \"table.foot.background\")]\n pub table_foot: Option,\n /// Table footer text color.\n #[serde(rename = \"table.foot.foreground\")]\n pub table_foot_foreground: Option,\n /// Table item hover background color.\n #[serde(rename = \"table.hover.background\")]\n pub table_hover: Option,\n /// Table row border color.\n #[serde(rename = \"table.row.border\")]\n pub table_row_border: Option,\n /// TitleBar background color, use for Window title bar.\n #[serde(rename = \"title_bar.background\")]\n pub title_bar: Option,\n /// TitleBar border color.\n #[serde(rename = \"title_bar.border\")]\n pub title_bar_border: Option,\n /// Background color for Tiles.\n #[serde(rename = \"tiles.background\")]\n pub tiles: Option,\n /// Warning background color.\n #[serde(rename = \"warning.background\")]\n pub warning: Option,\n /// Warning active background color.\n #[serde(rename = \"warning.active.background\")]\n pub warning_active: Option,\n /// Warning hover background color.\n #[serde(rename = \"warning.hover.background\")]\n pub warning_hover: Option,\n /// Warning foreground color.\n #[serde(rename = \"warning.foreground\")]\n pub warning_foreground: Option,\n /// Overlay background color.\n #[serde(rename = \"overlay\")]\n pub overlay: Option,\n /// Window border color.\n ///\n /// # Platform specific:\n ///\n /// This is only works on Linux, other platforms we can't change the window border color.\n #[serde(rename = \"window.border\")]\n pub window_border: Option,\n\n /// Base blue color.\n #[serde(rename = \"base.blue\")]\n blue: Option,\n /// Base light blue color.\n #[serde(rename = \"base.blue.light\")]\n blue_light: Option,\n /// Base cyan color.\n #[serde(rename = \"base.cyan\")]\n cyan: Option,\n /// Base light cyan color.\n #[serde(rename = \"base.cyan.light\")]\n cyan_light: Option,\n /// Base green color.\n #[serde(rename = \"base.green\")]\n green: Option,\n /// Base light green color.\n #[serde(rename = \"base.green.light\")]\n green_light: Option,\n /// Base magenta color.\n #[serde(rename = \"base.magenta\")]\n magenta: Option,\n #[serde(rename = \"base.magenta.light\")]\n magenta_light: Option,\n /// Base red color.\n #[serde(rename = \"base.red\")]\n red: Option,\n /// Base light red color.\n #[serde(rename = \"base.red.light\")]\n red_light: Option,\n /// Base yellow color.\n #[serde(rename = \"base.yellow\")]\n yellow: Option,\n /// Base light yellow color.\n #[serde(rename = \"base.yellow.light\")]\n yellow_light: Option,\n}\n\nimpl ThemeColor {\n /// Create a new `ThemeColor` from a `ThemeConfig`.\n pub(crate) fn apply_config(&mut self, config: &ThemeConfig, default_theme: &ThemeColor) {\n let colors = config.colors.clone();\n\n macro_rules! apply_color {\n ($config_field:ident) => {\n if let Some(value) = colors.$config_field {\n if let Ok(color) = try_parse_color(&value) {\n self.$config_field = color;\n } else {\n self.$config_field = default_theme.$config_field;\n }\n } else {\n self.$config_field = default_theme.$config_field;\n }\n };\n // With fallback\n ($config_field:ident, fallback = $fallback:expr) => {\n if let Some(value) = colors.$config_field {\n if let Ok(color) = try_parse_color(&value) {\n self.$config_field = color;\n }\n } else {\n self.$config_field = $fallback;\n }\n };\n }\n\n apply_color!(background);\n\n // Base colors for fallback\n apply_color!(red);\n apply_color!(\n red_light,\n fallback = self.background.blend(self.red.opacity(0.8))\n );\n apply_color!(green);\n apply_color!(\n green_light,\n fallback = self.background.blend(self.green.opacity(0.8))\n );\n apply_color!(blue);\n apply_color!(\n blue_light,\n fallback = self.background.blend(self.blue.opacity(0.8))\n );\n apply_color!(magenta);\n apply_color!(\n magenta_light,\n fallback = self.background.blend(self.magenta.opacity(0.8))\n );\n apply_color!(yellow);\n apply_color!(\n yellow_light,\n fallback = self.background.blend(self.yellow.opacity(0.8))\n );\n apply_color!(cyan);\n apply_color!(\n cyan_light,\n fallback = self.background.blend(self.cyan.opacity(0.8))\n );\n\n apply_color!(border);\n apply_color!(foreground);\n apply_color!(muted);\n apply_color!(\n muted_foreground,\n fallback = self.muted.blend(self.foreground.opacity(0.7))\n );\n\n // Button colors\n let active_darken = if config.mode.is_dark() { 0.2 } else { 0.1 };\n let hover_opacity = 0.9;\n apply_color!(primary);\n apply_color!(primary_foreground, fallback = self.foreground);\n apply_color!(\n primary_hover,\n fallback = self.background.blend(self.primary.opacity(hover_opacity))\n );\n apply_color!(\n primary_active,\n fallback = self.primary.darken(active_darken)\n );\n apply_color!(button_primary, fallback = self.primary);\n apply_color!(\n button_primary_foreground,\n fallback = self.primary_foreground\n );\n apply_color!(button_primary_hover, fallback = self.primary_hover);\n apply_color!(button_primary_active, fallback = self.primary_active);\n apply_color!(secondary);\n apply_color!(secondary_foreground, fallback = self.foreground);\n apply_color!(\n secondary_hover,\n fallback = self.background.blend(self.secondary.opacity(hover_opacity))\n );\n apply_color!(\n secondary_active,\n fallback = self.secondary.darken(active_darken)\n );\n apply_color!(success, fallback = self.green);\n apply_color!(success_foreground, fallback = self.primary_foreground);\n apply_color!(\n success_hover,\n fallback = self.background.blend(self.success.opacity(hover_opacity))\n );\n apply_color!(\n success_active,\n fallback = self.success.darken(active_darken)\n );\n apply_color!(info, fallback = self.cyan);\n apply_color!(info_foreground, fallback = self.primary_foreground);\n apply_color!(\n info_hover,\n fallback = self.background.blend(self.info.opacity(hover_opacity))\n );\n apply_color!(info_active, fallback = self.info.darken(active_darken));\n apply_color!(warning, fallback = self.yellow);\n apply_color!(warning_foreground, fallback = self.primary_foreground);\n apply_color!(\n warning_hover,\n fallback = self.background.blend(self.warning.opacity(0.9))\n );\n apply_color!(\n warning_active,\n fallback = self.background.blend(self.warning.darken(active_darken))\n );\n\n // Other colors\n apply_color!(accent, fallback = self.secondary);\n apply_color!(accent_foreground, fallback = self.foreground);\n apply_color!(accordion, fallback = self.background);\n apply_color!(accordion_hover, fallback = self.accent.opacity(0.8));\n apply_color!(\n group_box,\n fallback = self\n .background\n .blend(\n self.secondary\n .opacity(if config.mode.is_dark() { 0.3 } else { 0.4 })\n )\n );\n apply_color!(group_box_foreground, fallback = self.foreground);\n apply_color!(caret, fallback = self.primary);\n apply_color!(chart_1, fallback = self.blue.lighten(0.4));\n apply_color!(chart_2, fallback = self.blue.lighten(0.2));\n apply_color!(chart_3, fallback = self.blue);\n apply_color!(chart_4, fallback = self.blue.darken(0.2));\n apply_color!(chart_5, fallback = self.blue.darken(0.4));\n apply_color!(chart_bullish, fallback = self.green);\n apply_color!(chart_bearish, fallback = self.red);\n apply_color!(danger, fallback = self.red);\n apply_color!(danger_active, fallback = self.danger.darken(active_darken));\n apply_color!(danger_foreground, fallback = self.primary_foreground);\n apply_color!(\n danger_hover,\n fallback = self.background.blend(self.danger.opacity(0.9))\n );\n apply_color!(\n description_list_label,\n fallback = self.background.blend(self.border.opacity(0.2))\n );\n apply_color!(\n description_list_label_foreground,\n fallback = self.muted_foreground\n );\n apply_color!(drag_border, fallback = self.primary.opacity(0.65));\n apply_color!(drop_target, fallback = self.primary.opacity(0.2));\n apply_color!(input, fallback = self.border);\n apply_color!(link, fallback = self.primary);\n apply_color!(link_active, fallback = self.link);\n apply_color!(link_hover, fallback = self.link);\n apply_color!(list, fallback = self.background);\n apply_color!(\n list_active,\n fallback = self.background.blend(self.primary.opacity(0.1))\n );\n apply_color!(\n list_active_border,\n fallback = self.background.blend(self.primary.opacity(0.6))\n );\n apply_color!(list_even, fallback = self.list);\n apply_color!(list_head, fallback = self.list);\n apply_color!(list_hover, fallback = self.accent.opacity(0.6));\n apply_color!(popover, fallback = self.background);\n apply_color!(popover_foreground, fallback = self.foreground);\n apply_color!(progress_bar, fallback = self.primary);\n apply_color!(ring, fallback = self.blue);\n apply_color!(scrollbar, fallback = self.background);\n apply_color!(scrollbar_thumb, fallback = self.accent);\n apply_color!(scrollbar_thumb_hover, fallback = self.scrollbar_thumb);\n apply_color!(selection, fallback = self.primary);\n apply_color!(\n sidebar,\n fallback = self.background.blend(self.border.opacity(0.15))\n );\n apply_color!(sidebar_accent, fallback = self.accent);\n apply_color!(sidebar_accent_foreground, fallback = self.accent_foreground);\n apply_color!(sidebar_border, fallback = self.border);\n apply_color!(sidebar_foreground, fallback = self.foreground);\n apply_color!(sidebar_primary, fallback = self.primary);\n apply_color!(\n sidebar_primary_foreground,\n fallback = self.primary_foreground\n );\n apply_color!(skeleton, fallback = self.secondary);\n apply_color!(slider_bar, fallback = self.primary);\n apply_color!(slider_thumb, fallback = self.primary_foreground);\n apply_color!(switch, fallback = self.secondary_active);\n apply_color!(switch_thumb, fallback = self.background);\n apply_color!(tab, fallback = self.background);\n apply_color!(tab_active, fallback = self.background);\n apply_color!(tab_active_foreground, fallback = self.foreground);\n apply_color!(tab_bar, fallback = self.background);\n apply_color!(tab_bar_segmented, fallback = self.secondary);\n apply_color!(tab_foreground, fallback = self.foreground);\n apply_color!(table, fallback = self.list);\n apply_color!(table_active, fallback = self.list_active);\n apply_color!(table_active_border, fallback = self.list_active_border);\n apply_color!(table_even, fallback = self.list_even);\n apply_color!(table_head, fallback = self.list_head);\n apply_color!(table_head_foreground, fallback = self.muted_foreground);\n apply_color!(table_foot, fallback = self.list_head);\n apply_color!(table_foot_foreground, fallback = self.muted_foreground);\n apply_color!(table_hover, fallback = self.list_hover);\n apply_color!(table_row_border, fallback = self.border);\n apply_color!(title_bar, fallback = self.background);\n apply_color!(title_bar_border, fallback = self.border);\n apply_color!(tiles, fallback = self.background);\n apply_color!(overlay);\n apply_color!(window_border, fallback = self.border);\n\n // TODO: Apply default fallback colors to highlight.\n\n // Ensure opacity for list_active, table_active\n self.list_active = self.list_active.alpha(self.list_active.a.min(0.2));\n self.table_active = self.table_active.alpha(self.table_active.a.min(0.2));\n self.selection = self.selection.alpha(self.selection.a.min(0.3));\n }\n}\n\nimpl Theme {\n /// Apply the given theme configuration to the current theme.\n pub fn apply_config(&mut self, config: &Rc) {\n if config.mode.is_dark() {\n self.dark_theme = config.clone();\n } else {\n self.light_theme = config.clone();\n }\n if let Some(style) = &config.highlight {\n let highlight_theme = Arc::new(HighlightTheme {\n name: config.name.to_string(),\n appearance: config.mode,\n style: style.clone(),\n });\n self.highlight_theme = highlight_theme.clone();\n }\n\n let default_theme = if config.mode.is_dark() {\n Self::from(ThemeColor::dark().as_ref())\n } else {\n Self::from(ThemeColor::light().as_ref())\n };\n\n if let Some(font_size) = config.font_size {\n self.font_size = px(font_size);\n } else {\n self.font_size = default_theme.font_size;\n }\n if let Some(font_family) = &config.font_family {\n self.font_family = font_family.clone();\n } else {\n self.font_family = default_theme.font_family.clone();\n }\n if let Some(mono_font_family) = &config.mono_font_family {\n self.mono_font_family = mono_font_family.clone();\n } else {\n self.mono_font_family = default_theme.mono_font_family.clone();\n }\n if let Some(mono_font_size) = config.mono_font_size {\n self.mono_font_size = px(mono_font_size);\n } else {\n self.mono_font_size = default_theme.mono_font_size;\n }\n if let Some(radius) = config.radius {\n self.radius = px(radius as f32);\n } else {\n self.radius = default_theme.radius;\n }\n if let Some(radius_lg) = config.radius_lg {\n self.radius_lg = px(radius_lg as f32);\n } else {\n self.radius_lg = default_theme.radius_lg;\n }\n if let Some(shadow) = config.shadow {\n self.shadow = shadow;\n } else {\n self.shadow = default_theme.shadow;\n }\n\n self.colors.apply_config(&config, &default_theme.colors);\n self.mode = config.mode;\n }\n}\n" }, { "path": "crates/ui/src/theme/theme_color.rs", "content": "use std::sync::Arc;\n\nuse crate::{ThemeMode, theme::DEFAULT_THEME_COLORS};\n\nuse gpui::Hsla;\nuse schemars::JsonSchema;\nuse serde::{Deserialize, Serialize};\n\n/// Theme colors used throughout the UI components.\n#[derive(Debug, Default, Clone, Copy, Serialize, Deserialize, JsonSchema)]\npub struct ThemeColor {\n /// Used for accents such as hover background on MenuItem, ListItem, etc.\n pub accent: Hsla,\n /// Used for accent text color.\n pub accent_foreground: Hsla,\n /// Accordion background color.\n pub accordion: Hsla,\n /// Accordion hover background color.\n pub accordion_hover: Hsla,\n /// Default background color.\n pub background: Hsla,\n /// Default border color\n pub border: Hsla,\n /// Button primary background color, fallback to `primary`.\n pub button_primary: Hsla,\n /// Button primary active background color, fallback to `primary_active`.\n pub button_primary_active: Hsla,\n /// Button primary text color, fallback to `primary_foreground`.\n pub button_primary_foreground: Hsla,\n /// Button primary hover background color, fallback to `primary_hover`.\n pub button_primary_hover: Hsla,\n /// Background color for GroupBox.\n pub group_box: Hsla,\n /// Text color for GroupBox.\n pub group_box_foreground: Hsla,\n /// Input caret color (Blinking cursor).\n pub caret: Hsla,\n /// Chart 1 color.\n pub chart_1: Hsla,\n /// Chart 2 color.\n pub chart_2: Hsla,\n /// Chart 3 color.\n pub chart_3: Hsla,\n /// Chart 4 color.\n pub chart_4: Hsla,\n /// Chart 5 color.\n pub chart_5: Hsla,\n /// Bullish color for candlestick charts (upward price movement).\n pub chart_bullish: Hsla,\n /// Bearish color for candlestick charts (downward price movement).\n pub chart_bearish: Hsla,\n /// Danger background color.\n pub danger: Hsla,\n /// Danger active background color.\n pub danger_active: Hsla,\n /// Danger text color.\n pub danger_foreground: Hsla,\n /// Danger hover background color.\n pub danger_hover: Hsla,\n /// Description List label background color.\n pub description_list_label: Hsla,\n /// Description List label foreground color.\n pub description_list_label_foreground: Hsla,\n /// Drag border color.\n pub drag_border: Hsla,\n /// Drop target background color.\n pub drop_target: Hsla,\n /// Default text color.\n pub foreground: Hsla,\n /// Info background color.\n pub info: Hsla,\n /// Info active background color.\n pub info_active: Hsla,\n /// Info text color.\n pub info_foreground: Hsla,\n /// Info hover background color.\n pub info_hover: Hsla,\n /// Border color for inputs such as Input, Select, etc.\n pub input: Hsla,\n /// Link text color.\n pub link: Hsla,\n /// Active link text color.\n pub link_active: Hsla,\n /// Hover link text color.\n pub link_hover: Hsla,\n /// Background color for List and ListItem.\n pub list: Hsla,\n /// Background color for active ListItem.\n pub list_active: Hsla,\n /// Border color for active ListItem.\n pub list_active_border: Hsla,\n /// Stripe background color for even ListItem.\n pub list_even: Hsla,\n /// Background color for List header.\n pub list_head: Hsla,\n /// Hover background color for ListItem.\n pub list_hover: Hsla,\n /// Muted backgrounds such as Skeleton and Switch.\n pub muted: Hsla,\n /// Muted text color, as used in disabled text.\n pub muted_foreground: Hsla,\n /// Background color for Popover.\n pub popover: Hsla,\n /// Text color for Popover.\n pub popover_foreground: Hsla,\n /// Primary background color.\n pub primary: Hsla,\n /// Active primary background color.\n pub primary_active: Hsla,\n /// Primary text color.\n pub primary_foreground: Hsla,\n /// Hover primary background color.\n pub primary_hover: Hsla,\n /// Progress bar background color.\n pub progress_bar: Hsla,\n /// Used for focus ring.\n pub ring: Hsla,\n /// Scrollbar background color.\n pub scrollbar: Hsla,\n /// Scrollbar thumb background color.\n pub scrollbar_thumb: Hsla,\n /// Scrollbar thumb hover background color.\n pub scrollbar_thumb_hover: Hsla,\n /// Secondary background color.\n pub secondary: Hsla,\n /// Active secondary background color.\n pub secondary_active: Hsla,\n /// Secondary text color, used for secondary Button text color or secondary text.\n pub secondary_foreground: Hsla,\n /// Hover secondary background color.\n pub secondary_hover: Hsla,\n /// Input selection background color.\n pub selection: Hsla,\n /// Sidebar background color.\n pub sidebar: Hsla,\n /// Sidebar accent background color.\n pub sidebar_accent: Hsla,\n /// Sidebar accent text color.\n pub sidebar_accent_foreground: Hsla,\n /// Sidebar border color.\n pub sidebar_border: Hsla,\n /// Sidebar text color.\n pub sidebar_foreground: Hsla,\n /// Sidebar primary background color.\n pub sidebar_primary: Hsla,\n /// Sidebar primary text color.\n pub sidebar_primary_foreground: Hsla,\n /// Skeleton background color.\n pub skeleton: Hsla,\n /// Slider bar background color.\n pub slider_bar: Hsla,\n /// Slider thumb background color.\n pub slider_thumb: Hsla,\n /// Success background color.\n pub success: Hsla,\n /// Success text color.\n pub success_foreground: Hsla,\n /// Success hover background color.\n pub success_hover: Hsla,\n /// Success active background color.\n pub success_active: Hsla,\n /// Switch background color.\n pub switch: Hsla,\n /// Switch thumb background color.\n pub switch_thumb: Hsla,\n /// Tab background color.\n pub tab: Hsla,\n /// Tab active background color.\n pub tab_active: Hsla,\n /// Tab active text color.\n pub tab_active_foreground: Hsla,\n /// TabBar background color.\n pub tab_bar: Hsla,\n /// TabBar segmented background color.\n pub tab_bar_segmented: Hsla,\n /// Tab text color.\n pub tab_foreground: Hsla,\n /// Table background color.\n pub table: Hsla,\n /// Table active item background color.\n pub table_active: Hsla,\n /// Table active item border color.\n pub table_active_border: Hsla,\n /// Stripe background color for even TableRow.\n pub table_even: Hsla,\n /// Table head background color.\n pub table_head: Hsla,\n /// Table head text color.\n pub table_head_foreground: Hsla,\n /// Table footer background color.\n pub table_foot: Hsla,\n /// Table footer text color.\n pub table_foot_foreground: Hsla,\n /// Table item hover background color.\n pub table_hover: Hsla,\n /// Table row border color.\n pub table_row_border: Hsla,\n /// TitleBar background color, use for Window title bar.\n pub title_bar: Hsla,\n /// TitleBar border color.\n pub title_bar_border: Hsla,\n /// Background color for Tiles.\n pub tiles: Hsla,\n /// Warning background color.\n pub warning: Hsla,\n /// Warning active background color.\n pub warning_active: Hsla,\n /// Warning hover background color.\n pub warning_hover: Hsla,\n /// Warning foreground color.\n pub warning_foreground: Hsla,\n /// Overlay background color.\n pub overlay: Hsla,\n /// Window border color.\n ///\n /// # Platform specific:\n ///\n /// This is only works on Linux, other platforms we can't change the window border color.\n pub window_border: Hsla,\n\n /// The base red color.\n pub red: Hsla,\n /// The base red light color.\n pub red_light: Hsla,\n /// The base green color.\n pub green: Hsla,\n /// The base green light color.\n pub green_light: Hsla,\n /// The base blue color.\n pub blue: Hsla,\n /// The base blue light color.\n pub blue_light: Hsla,\n /// The base yellow color.\n pub yellow: Hsla,\n /// The base yellow light color.\n pub yellow_light: Hsla,\n /// The base magenta color.\n pub magenta: Hsla,\n /// The base magenta light color.\n pub magenta_light: Hsla,\n /// The base cyan color.\n pub cyan: Hsla,\n /// The base cyan light color.\n pub cyan_light: Hsla,\n}\n\nimpl ThemeColor {\n /// Get the default light theme colors.\n pub fn light() -> Arc {\n DEFAULT_THEME_COLORS[&ThemeMode::Light].0.clone()\n }\n\n /// Get the default dark theme colors.\n pub fn dark() -> Arc {\n DEFAULT_THEME_COLORS[&ThemeMode::Dark].0.clone()\n }\n}\n" }, { "path": "crates/ui/src/time/calendar.rs", "content": "use std::{borrow::Cow, rc::Rc};\n\nuse chrono::{Datelike, Local, NaiveDate};\nuse gpui::{\n App, ClickEvent, Context, Div, ElementId, Empty, Entity, EventEmitter, FocusHandle,\n InteractiveElement, IntoElement, ParentElement, Render, RenderOnce, SharedString, Stateful,\n StatefulInteractiveElement, StyleRefinement, Styled, Window, prelude::FluentBuilder as _, px,\n relative,\n};\nuse rust_i18n::t;\n\nuse crate::{\n ActiveTheme, Disableable as _, IconName, Selectable, Sizable, Size, StyledExt as _,\n button::{Button, ButtonVariants as _},\n h_flex, v_flex,\n};\n\nuse super::utils::days_in_month;\n\n/// Events emitted by the calendar.\npub enum CalendarEvent {\n /// The user selected a date.\n Selected(Date),\n}\n\n/// The date of the calendar.\n#[derive(Debug, Clone, Copy, PartialEq, Eq)]\npub enum Date {\n Single(Option),\n Range(Option, Option),\n}\n\nimpl std::fmt::Display for Date {\n fn fmt(&self, f: &mut std::fmt::Formatter<'_>) -> std::fmt::Result {\n match self {\n Self::Single(Some(date)) => write!(f, \"{}\", date),\n Self::Single(None) => write!(f, \"nil\"),\n Self::Range(Some(start), Some(end)) => write!(f, \"{} - {}\", start, end),\n Self::Range(None, None) => write!(f, \"nil\"),\n Self::Range(Some(start), None) => write!(f, \"{} - nil\", start),\n Self::Range(None, Some(end)) => write!(f, \"nil - {}\", end),\n }\n }\n}\n\nimpl From for Date {\n fn from(date: NaiveDate) -> Self {\n Self::Single(Some(date))\n }\n}\n\nimpl From<(NaiveDate, NaiveDate)> for Date {\n fn from((start, end): (NaiveDate, NaiveDate)) -> Self {\n Self::Range(Some(start), Some(end))\n }\n}\n\nimpl Date {\n /// Check if the date is set.\n pub fn is_some(&self) -> bool {\n match self {\n Self::Single(Some(_)) | Self::Range(Some(_), _) => true,\n _ => false,\n }\n }\n\n /// Check if the date is complete.\n pub fn is_complete(&self) -> bool {\n match self {\n Self::Range(Some(_), Some(_)) => true,\n Self::Single(Some(_)) => true,\n _ => false,\n }\n }\n\n /// Get the start date.\n pub fn start(&self) -> Option {\n match self {\n Self::Single(Some(date)) => Some(*date),\n Self::Range(Some(start), _) => Some(*start),\n _ => None,\n }\n }\n\n /// Get the end date.\n pub fn end(&self) -> Option {\n match self {\n Self::Range(_, Some(end)) => Some(*end),\n _ => None,\n }\n }\n\n /// Return formatted date string.\n pub fn format(&self, format: &str) -> Option {\n match self {\n Self::Single(Some(date)) => Some(date.format(format).to_string().into()),\n Self::Range(Some(start), Some(end)) => {\n Some(format!(\"{} - {}\", start.format(format), end.format(format)).into())\n }\n _ => None,\n }\n }\n\n fn is_active(&self, v: &NaiveDate) -> bool {\n let v = *v;\n match self {\n Self::Single(d) => Some(v) == *d,\n Self::Range(start, end) => Some(v) == *start || Some(v) == *end,\n }\n }\n\n fn is_single(&self) -> bool {\n matches!(self, Self::Single(_))\n }\n\n fn is_in_range(&self, v: &NaiveDate) -> bool {\n let v = *v;\n match self {\n Self::Range(start, end) => {\n if let Some(start) = start {\n if let Some(end) = end {\n v >= *start && v <= *end\n } else {\n false\n }\n } else {\n false\n }\n }\n _ => false,\n }\n }\n}\n\n#[derive(Debug, Clone, Copy, PartialEq, Eq)]\nenum ViewMode {\n Day,\n Month,\n Year,\n}\n\nimpl ViewMode {\n fn is_day(&self) -> bool {\n matches!(self, Self::Day)\n }\n\n fn is_month(&self) -> bool {\n matches!(self, Self::Month)\n }\n\n fn is_year(&self) -> bool {\n matches!(self, Self::Year)\n }\n}\n\n/// Matcher to match dates before and after the interval.\npub struct IntervalMatcher {\n before: Option,\n after: Option,\n}\n\n/// Matcher to match dates within the range.\npub struct RangeMatcher {\n from: Option,\n to: Option,\n}\n\n/// Matcher to match dates.\npub enum Matcher {\n /// Match declare days of the week.\n ///\n /// Matcher::DayOfWeek(vec![0, 6])\n /// Will match the days of the week that are Sunday and Saturday.\n DayOfWeek(Vec),\n /// Match the included days, except for those before and after the interval.\n ///\n /// Matcher::Interval(IntervalMatcher {\n /// before: Some(NaiveDate::from_ymd(2020, 1, 2)),\n /// after: Some(NaiveDate::from_ymd(2020, 1, 3)),\n /// })\n /// Will match the days that are not between 2020-01-02 and 2020-01-03.\n Interval(IntervalMatcher),\n /// Match the days within the range.\n ///\n /// Matcher::Range(RangeMatcher {\n /// from: Some(NaiveDate::from_ymd(2020, 1, 1)),\n /// to: Some(NaiveDate::from_ymd(2020, 1, 3)),\n /// })\n /// Will match the days that are between 2020-01-01 and 2020-01-03.\n Range(RangeMatcher),\n /// Match dates using a custom function.\n ///\n /// let matcher = Matcher::Custom(Box::new(|date: &NaiveDate| {\n /// date.day0() < 5\n /// }));\n /// Will match first 5 days of each month\n Custom(Box bool + Send + Sync>),\n}\n\nimpl From> for Matcher {\n fn from(days: Vec) -> Self {\n Matcher::DayOfWeek(days)\n }\n}\n\nimpl From for Matcher\nwhere\n F: Fn(&NaiveDate) -> bool + Send + Sync + 'static,\n{\n fn from(f: F) -> Self {\n Matcher::Custom(Box::new(f))\n }\n}\n\nimpl Matcher {\n /// Create a new interval matcher.\n pub fn interval(before: Option, after: Option) -> Self {\n Matcher::Interval(IntervalMatcher { before, after })\n }\n\n /// Create a new range matcher.\n pub fn range(from: Option, to: Option) -> Self {\n Matcher::Range(RangeMatcher { from, to })\n }\n\n /// Create a new custom matcher.\n pub fn custom(f: F) -> Self\n where\n F: Fn(&NaiveDate) -> bool + Send + Sync + 'static,\n {\n Matcher::Custom(Box::new(f))\n }\n\n /// Check if the date matches the matcher.\n pub fn is_match(&self, date: &Date) -> bool {\n match date {\n Date::Single(Some(date)) => self.matched(date),\n Date::Range(Some(start), Some(end)) => self.matched(start) || self.matched(end),\n _ => false,\n }\n }\n\n fn matched(&self, date: &NaiveDate) -> bool {\n match self {\n Matcher::DayOfWeek(days) => days.contains(&date.weekday().num_days_from_sunday()),\n Matcher::Interval(interval) => {\n let before_check = interval.before.map_or(false, |before| date < &before);\n let after_check = interval.after.map_or(false, |after| date > &after);\n before_check || after_check\n }\n Matcher::Range(range) => {\n let from_check = range.from.map_or(false, |from| date < &from);\n let to_check = range.to.map_or(false, |to| date > &to);\n !from_check && !to_check\n }\n Matcher::Custom(f) => f(date),\n }\n }\n}\n\n#[derive(IntoElement)]\npub struct Calendar {\n id: ElementId,\n size: Size,\n state: Entity,\n style: StyleRefinement,\n /// Number of the months view to show.\n number_of_months: usize,\n}\n\n/// Use to store the state of the calendar.\npub struct CalendarState {\n focus_handle: FocusHandle,\n view_mode: ViewMode,\n date: Date,\n current_year: i32,\n current_month: u8,\n years: Vec>,\n year_page: i32,\n today: NaiveDate,\n /// Number of the months view to show.\n number_of_months: usize,\n pub(crate) disabled_matcher: Option>,\n}\n\nimpl CalendarState {\n /// Create a new calendar state.\n pub fn new(_: &mut Window, cx: &mut Context) -> Self {\n let today = Local::now().naive_local().date();\n Self {\n focus_handle: cx.focus_handle(),\n view_mode: ViewMode::Day,\n date: Date::Single(None),\n current_month: today.month() as u8,\n current_year: today.year(),\n years: vec![],\n year_page: 0,\n today,\n number_of_months: 1,\n disabled_matcher: None,\n }\n .year_range((today.year() - 50, today.year() + 50))\n }\n\n /// Set the disabled matcher of the calendar state.\n pub fn disabled_matcher(mut self, matcher: impl Into) -> Self {\n self.disabled_matcher = Some(Rc::new(matcher.into()));\n self\n }\n\n /// Set the disabled matcher of the calendar.\n ///\n /// The disabled matcher will be used to disable the days that match the matcher.\n pub fn set_disabled_matcher(\n &mut self,\n disabled: impl Into,\n _: &mut Window,\n _: &mut Context,\n ) {\n self.disabled_matcher = Some(Rc::new(disabled.into()));\n }\n\n /// Set the date of the calendar.\n ///\n /// When you set a range date, the mode will be automatically set to `Mode::Range`.\n pub fn set_date(&mut self, date: impl Into, _: &mut Window, cx: &mut Context) {\n let date = date.into();\n\n let invalid = self\n .disabled_matcher\n .as_ref()\n .map_or(false, |matcher| matcher.is_match(&date));\n\n if invalid {\n return;\n }\n\n self.date = date;\n match self.date {\n Date::Single(Some(date)) => {\n self.current_month = date.month() as u8;\n self.current_year = date.year();\n }\n Date::Range(Some(start), _) => {\n self.current_month = start.month() as u8;\n self.current_year = start.year();\n }\n _ => {}\n }\n\n cx.notify()\n }\n\n /// Get the date of the calendar.\n pub fn date(&self) -> Date {\n self.date\n }\n\n /// Set number of months to show.\n pub fn set_number_of_months(\n &mut self,\n number_of_months: usize,\n _: &mut Window,\n cx: &mut Context,\n ) {\n self.number_of_months = number_of_months;\n cx.notify();\n }\n\n /// Set the year range of the calendar, default is 50 years before and after the current year.\n ///\n /// Each year page contains 20 years, so the range will be divided into chunks of 20 years is better.\n pub fn year_range(mut self, range: (i32, i32)) -> Self {\n self.years = (range.0..range.1)\n .collect::>()\n .chunks(20)\n .map(|chunk| chunk.to_vec())\n .collect::>();\n self.year_page = self\n .years\n .iter()\n .position(|years| years.contains(&self.current_year))\n .unwrap_or(0) as i32;\n self\n }\n\n /// Get year and month by offset month.\n fn offset_year_month(&self, offset_month: usize) -> (i32, u32) {\n let mut month = self.current_month as i32 + offset_month as i32;\n let mut year = self.current_year;\n while month < 1 {\n month += 12;\n year -= 1;\n }\n while month > 12 {\n month -= 12;\n year += 1;\n }\n\n (year, month as u32)\n }\n\n /// Returns the days of the month in a 2D vector to render on calendar.\n fn days(&self) -> Vec> {\n (0..self.number_of_months)\n .flat_map(|offset| {\n days_in_month(self.current_year, self.current_month as u32 + offset as u32)\n })\n .collect()\n }\n\n fn has_prev_year_page(&self) -> bool {\n self.year_page > 0\n }\n\n fn has_next_year_page(&self) -> bool {\n self.year_page < self.years.len() as i32 - 1\n }\n\n fn prev_year_page(&mut self, _: &ClickEvent, _: &mut Window, cx: &mut Context) {\n if !self.has_prev_year_page() {\n return;\n }\n\n self.year_page -= 1;\n cx.notify()\n }\n\n fn next_year_page(&mut self, _: &ClickEvent, _: &mut Window, cx: &mut Context) {\n if !self.has_next_year_page() {\n return;\n }\n\n self.year_page += 1;\n cx.notify()\n }\n\n fn prev_month(&mut self, _: &ClickEvent, _: &mut Window, cx: &mut Context) {\n self.current_month = if self.current_month == 1 {\n 12\n } else {\n self.current_month - 1\n };\n self.current_year = if self.current_month == 12 {\n self.current_year - 1\n } else {\n self.current_year\n };\n cx.notify()\n }\n\n fn next_month(&mut self, _: &ClickEvent, _: &mut Window, cx: &mut Context) {\n self.current_month = if self.current_month == 12 {\n 1\n } else {\n self.current_month + 1\n };\n self.current_year = if self.current_month == 1 {\n self.current_year + 1\n } else {\n self.current_year\n };\n cx.notify()\n }\n\n fn month_name(&self, offset_month: usize) -> SharedString {\n let (_, month) = self.offset_year_month(offset_month);\n match month {\n 1 => t!(\"Calendar.month.January\"),\n 2 => t!(\"Calendar.month.February\"),\n 3 => t!(\"Calendar.month.March\"),\n 4 => t!(\"Calendar.month.April\"),\n 5 => t!(\"Calendar.month.May\"),\n 6 => t!(\"Calendar.month.June\"),\n 7 => t!(\"Calendar.month.July\"),\n 8 => t!(\"Calendar.month.August\"),\n 9 => t!(\"Calendar.month.September\"),\n 10 => t!(\"Calendar.month.October\"),\n 11 => t!(\"Calendar.month.November\"),\n 12 => t!(\"Calendar.month.December\"),\n _ => Cow::Borrowed(\"\"),\n }\n .into()\n }\n\n fn year_name(&self, offset_month: usize) -> SharedString {\n let (year, _) = self.offset_year_month(offset_month);\n year.to_string().into()\n }\n\n fn set_view_mode(&mut self, mode: ViewMode, _: &mut Window, cx: &mut Context) {\n self.view_mode = mode;\n cx.notify();\n }\n\n fn months(&self) -> Vec {\n [\n t!(\"Calendar.month.January\"),\n t!(\"Calendar.month.February\"),\n t!(\"Calendar.month.March\"),\n t!(\"Calendar.month.April\"),\n t!(\"Calendar.month.May\"),\n t!(\"Calendar.month.June\"),\n t!(\"Calendar.month.July\"),\n t!(\"Calendar.month.August\"),\n t!(\"Calendar.month.September\"),\n t!(\"Calendar.month.October\"),\n t!(\"Calendar.month.November\"),\n t!(\"Calendar.month.December\"),\n ]\n .iter()\n .map(|s| s.clone().into())\n .collect()\n }\n}\n\nimpl Render for CalendarState {\n fn render(&mut self, _: &mut Window, _: &mut Context) -> impl IntoElement {\n Empty\n }\n}\n\nimpl Calendar {\n /// Create a new calendar element with [`CalendarState`].\n pub fn new(state: &Entity) -> Self {\n Self {\n id: (\"calendar\", state.entity_id()).into(),\n size: Size::default(),\n state: state.clone(),\n style: StyleRefinement::default(),\n number_of_months: 1,\n }\n }\n\n /// Set number of months to show, default is 1.\n pub fn number_of_months(mut self, number_of_months: usize) -> Self {\n self.number_of_months = number_of_months;\n self\n }\n\n fn render_day(\n &self,\n d: &NaiveDate,\n offset_month: usize,\n window: &mut Window,\n cx: &mut App,\n ) -> Stateful
{\n let state = self.state.read(cx);\n let (_, month) = state.offset_year_month(offset_month);\n let day = d.day();\n let is_current_month = d.month() == month;\n let is_active = state.date.is_active(d);\n let is_in_range = state.date.is_in_range(d);\n\n let date = *d;\n let is_today = *d == state.today;\n let disabled = state\n .disabled_matcher\n .as_ref()\n .map_or(false, |disabled| disabled.matched(&date));\n\n let date_id: SharedString = format!(\"{}_{}\", date.format(\"%Y-%m-%d\"), offset_month).into();\n\n self.item_button(\n date_id.clone(),\n day.to_string(),\n is_active,\n is_in_range,\n !is_current_month || disabled,\n disabled,\n window,\n cx,\n )\n .when(is_today && !is_active, |this| {\n this.border_1().border_color(cx.theme().border)\n }) // Add border for today\n .when(!disabled, |this| {\n this.on_click(window.listener_for(\n &self.state,\n move |view, _: &ClickEvent, window, cx| {\n if view.date.is_single() {\n view.set_date(date, window, cx);\n cx.emit(CalendarEvent::Selected(view.date()));\n } else {\n let start = view.date.start();\n let end = view.date.end();\n\n if start.is_none() && end.is_none() {\n view.set_date(Date::Range(Some(date), None), window, cx);\n } else if start.is_some() && end.is_none() {\n if date < start.unwrap() {\n view.set_date(Date::Range(Some(date), None), window, cx);\n } else {\n view.set_date(\n Date::Range(Some(start.unwrap()), Some(date)),\n window,\n cx,\n );\n }\n } else {\n view.set_date(Date::Range(Some(date), None), window, cx);\n }\n\n if view.date.is_complete() {\n cx.emit(CalendarEvent::Selected(view.date()));\n }\n }\n },\n ))\n })\n }\n\n fn render_header(&self, window: &mut Window, cx: &mut App) -> impl IntoElement {\n let state = self.state.read(cx);\n let current_year = state.current_year;\n let view_mode = state.view_mode;\n let disabled = view_mode.is_month();\n let multiple_months = self.number_of_months > 1;\n let icon_size = match self.size {\n Size::Small => Size::Small,\n Size::Large => Size::Medium,\n _ => Size::Medium,\n };\n\n h_flex()\n .gap_0p5()\n .justify_between()\n .items_center()\n .child(\n Button::new(\"prev\")\n .icon(IconName::ArrowLeft)\n .tab_stop(false)\n .ghost()\n .disabled(disabled)\n .with_size(icon_size)\n .when(view_mode.is_day(), |this| {\n this.on_click(window.listener_for(&self.state, CalendarState::prev_month))\n })\n .when(view_mode.is_year(), |this| {\n this.when(!state.has_prev_year_page(), |this| this.disabled(true))\n .on_click(\n window.listener_for(&self.state, CalendarState::prev_year_page),\n )\n }),\n )\n .when(!multiple_months, |this| {\n this.child(\n h_flex()\n .justify_center()\n .gap_3()\n .child(\n Button::new(\"month\")\n .ghost()\n .label(state.month_name(0))\n .compact()\n .tab_stop(false)\n .with_size(self.size)\n .selected(view_mode.is_month())\n .on_click(window.listener_for(\n &self.state,\n move |view, _, window, cx| {\n if view_mode.is_month() {\n view.set_view_mode(ViewMode::Day, window, cx);\n } else {\n view.set_view_mode(ViewMode::Month, window, cx);\n }\n cx.notify();\n },\n )),\n )\n .child(\n Button::new(\"year\")\n .ghost()\n .label(current_year.to_string())\n .compact()\n .tab_stop(false)\n .with_size(self.size)\n .selected(view_mode.is_year())\n .on_click(window.listener_for(\n &self.state,\n |view, _, window, cx| {\n if view.view_mode.is_year() {\n view.set_view_mode(ViewMode::Day, window, cx);\n } else {\n view.set_view_mode(ViewMode::Year, window, cx);\n }\n cx.notify();\n },\n )),\n ),\n )\n })\n .when(multiple_months, |this| {\n this.child(h_flex().flex_1().justify_around().children(\n (0..self.number_of_months).map(|n| {\n h_flex()\n .justify_center()\n .map(|this| match self.size {\n Size::Small => this.gap_2(),\n Size::Large => this.gap_4(),\n _ => this.gap_3(),\n })\n .child(state.month_name(n))\n .child(state.year_name(n))\n }),\n ))\n })\n .child(\n Button::new(\"next\")\n .icon(IconName::ArrowRight)\n .ghost()\n .tab_stop(false)\n .disabled(disabled)\n .with_size(icon_size)\n .when(view_mode.is_day(), |this| {\n this.on_click(window.listener_for(&self.state, CalendarState::next_month))\n })\n .when(view_mode.is_year(), |this| {\n this.when(!state.has_next_year_page(), |this| this.disabled(true))\n .on_click(\n window.listener_for(&self.state, CalendarState::next_year_page),\n )\n }),\n )\n }\n\n #[allow(clippy::too_many_arguments)]\n fn item_button(\n &self,\n id: impl Into,\n label: impl Into,\n active: bool,\n secondary_active: bool,\n muted: bool,\n disabled: bool,\n _: &mut Window,\n cx: &mut App,\n ) -> Stateful
{\n h_flex()\n .id(id.into())\n .map(|this| match self.size {\n Size::Small => this.size_7().rounded(cx.theme().radius / 2.),\n Size::Large => this.size_10().rounded(cx.theme().radius * 2.),\n _ => this.size_9().rounded(cx.theme().radius),\n })\n .justify_center()\n .when(muted, |this| {\n this.text_color(if disabled {\n cx.theme().muted_foreground.opacity(0.3)\n } else {\n cx.theme().muted_foreground\n })\n })\n .when(secondary_active, |this| {\n this.bg(if muted {\n cx.theme().accent.opacity(0.5)\n } else {\n cx.theme().accent\n })\n .text_color(cx.theme().accent_foreground)\n })\n .when(!active && !disabled, |this| {\n this.hover(|this| {\n this.bg(cx.theme().accent)\n .text_color(cx.theme().accent_foreground)\n })\n })\n .when(active, |this| {\n this.bg(cx.theme().primary)\n .text_color(cx.theme().primary_foreground)\n })\n .child(label.into())\n }\n\n fn render_days(&self, window: &mut Window, cx: &mut App) -> impl IntoElement {\n let state = self.state.read(cx);\n let weeks = [\n t!(\"Calendar.week.0\"),\n t!(\"Calendar.week.1\"),\n t!(\"Calendar.week.2\"),\n t!(\"Calendar.week.3\"),\n t!(\"Calendar.week.4\"),\n t!(\"Calendar.week.5\"),\n t!(\"Calendar.week.6\"),\n ];\n\n h_flex()\n .map(|this| match self.size {\n Size::Small => this.gap_3().text_sm(),\n Size::Large => this.gap_5().text_base(),\n _ => this.gap_4().text_sm(),\n })\n .justify_between()\n .children(\n state\n .days()\n .chunks(5)\n .enumerate()\n .map(|(offset_month, days)| {\n v_flex()\n .gap_0p5()\n .child(\n h_flex().gap_0p5().justify_between().children(\n weeks\n .iter()\n .map(|week| self.render_week(week.clone(), window, cx)),\n ),\n )\n .children(days.iter().map(|week| {\n h_flex().gap_0p5().justify_between().children(\n week.iter()\n .map(|d| self.render_day(d, offset_month, window, cx)),\n )\n }))\n }),\n )\n }\n\n fn render_week(&self, week: impl Into, _: &mut Window, cx: &mut App) -> Div {\n h_flex()\n .map(|this| match self.size {\n Size::Small => this.size_7().rounded(cx.theme().radius / 2.0),\n Size::Large => this.size_10().rounded(cx.theme().radius),\n _ => this.size_9().rounded(cx.theme().radius),\n })\n .justify_center()\n .text_color(cx.theme().muted_foreground)\n .text_sm()\n .child(week.into())\n }\n\n fn render_months(&self, window: &mut Window, cx: &mut App) -> impl IntoElement {\n let state = self.state.read(cx);\n let months = state.months();\n let current_month = state.current_month;\n\n h_flex()\n .mt_3()\n .gap_0p5()\n .gap_y_3()\n .map(|this| match self.size {\n Size::Small => this.mt_2().gap_y_2().w(px(208.)),\n Size::Large => this.mt_4().gap_y_4().w(px(292.)),\n _ => this.mt_3().gap_y_3().w(px(264.)),\n })\n .justify_between()\n .flex_wrap()\n .children(\n months\n .iter()\n .enumerate()\n .map(|(ix, month)| {\n let active = (ix + 1) as u8 == current_month;\n\n self.item_button(\n ix,\n month.to_string(),\n active,\n false,\n false,\n false,\n window,\n cx,\n )\n .w(relative(0.3))\n .text_sm()\n .on_click(window.listener_for(\n &self.state,\n move |view, _, window, cx| {\n view.current_month = (ix + 1) as u8;\n view.set_view_mode(ViewMode::Day, window, cx);\n cx.notify();\n },\n ))\n })\n .collect::>(),\n )\n }\n\n fn render_years(&self, window: &mut Window, cx: &mut App) -> impl IntoElement {\n let state = self.state.read(cx);\n let current_year = state.current_year;\n let current_page_years = &self.state.read(cx).years[state.year_page as usize].clone();\n\n h_flex()\n .id(\"years\")\n .gap_0p5()\n .map(|this| match self.size {\n Size::Small => this.mt_2().gap_y_2().w(px(208.)),\n Size::Large => this.mt_4().gap_y_4().w(px(292.)),\n _ => this.mt_3().gap_y_3().w(px(264.)),\n })\n .justify_between()\n .flex_wrap()\n .children(\n current_page_years\n .iter()\n .enumerate()\n .map(|(ix, year)| {\n let year = *year;\n let active = year == current_year;\n\n self.item_button(\n ix,\n year.to_string(),\n active,\n false,\n false,\n false,\n window,\n cx,\n )\n .w(relative(0.2))\n .on_click(window.listener_for(\n &self.state,\n move |view, _, window, cx| {\n view.current_year = year;\n view.set_view_mode(ViewMode::Day, window, cx);\n cx.notify();\n },\n ))\n })\n .collect::>(),\n )\n }\n}\n\nimpl Sizable for Calendar {\n fn with_size(mut self, size: impl Into) -> Self {\n self.size = size.into();\n self\n }\n}\n\nimpl Styled for Calendar {\n fn style(&mut self) -> &mut StyleRefinement {\n &mut self.style\n }\n}\n\nimpl EventEmitter for CalendarState {}\nimpl RenderOnce for Calendar {\n fn render(self, window: &mut Window, cx: &mut App) -> impl IntoElement {\n let view_mode = self.state.read(cx).view_mode;\n let number_of_months = self.number_of_months;\n self.state.update(cx, |state, _| {\n state.number_of_months = number_of_months;\n });\n\n v_flex()\n .id(self.id.clone())\n .track_focus(&self.state.read(cx).focus_handle)\n .border_1()\n .border_color(cx.theme().border)\n .rounded(cx.theme().radius_lg)\n .p_3()\n .gap_0p5()\n .refine_style(&self.style)\n .child(self.render_header(window, cx))\n .child(\n v_flex()\n .when(view_mode.is_day(), |this| {\n this.child(self.render_days(window, cx))\n })\n .when(view_mode.is_month(), |this| {\n this.child(self.render_months(window, cx))\n })\n .when(view_mode.is_year(), |this| {\n this.child(self.render_years(window, cx))\n }),\n )\n }\n}\n\n#[cfg(test)]\nmod tests {\n use chrono::NaiveDate;\n\n use super::Date;\n\n #[test]\n fn test_date_to_string() {\n let date = Date::Single(Some(NaiveDate::from_ymd_opt(2024, 8, 3).unwrap()));\n assert_eq!(date.to_string(), \"2024-08-03\");\n\n let date = Date::Single(None);\n assert_eq!(date.to_string(), \"nil\");\n\n let date = Date::Range(\n Some(NaiveDate::from_ymd_opt(2024, 8, 3).unwrap()),\n Some(NaiveDate::from_ymd_opt(2024, 8, 5).unwrap()),\n );\n assert_eq!(date.to_string(), \"2024-08-03 - 2024-08-05\");\n\n let date = Date::Range(Some(NaiveDate::from_ymd_opt(2024, 8, 3).unwrap()), None);\n assert_eq!(date.to_string(), \"2024-08-03 - nil\");\n\n let date = Date::Range(None, Some(NaiveDate::from_ymd_opt(2024, 8, 5).unwrap()));\n assert_eq!(date.to_string(), \"nil - 2024-08-05\");\n\n let date = Date::Range(None, None);\n assert_eq!(date.to_string(), \"nil\");\n }\n}\n" }, { "path": "crates/ui/src/time/date_picker.rs", "content": "use std::rc::Rc;\n\nuse chrono::NaiveDate;\nuse gpui::{\n App, AppContext, ClickEvent, Context, ElementId, Empty, Entity, EventEmitter, FocusHandle,\n Focusable, InteractiveElement as _, IntoElement, KeyBinding, MouseButton, ParentElement as _,\n Render, RenderOnce, SharedString, StatefulInteractiveElement as _, StyleRefinement, Styled,\n Subscription, Window, anchored, deferred, div, prelude::FluentBuilder as _, px,\n};\nuse rust_i18n::t;\n\nuse crate::{\n ActiveTheme, Disableable, Icon, IconName, Sizable, Size, StyleSized as _, StyledExt as _,\n actions::{Cancel, Confirm},\n button::{Button, ButtonVariants as _},\n h_flex,\n input::{Delete, clear_button, input_style},\n v_flex,\n};\n\nuse super::calendar::{Calendar, CalendarEvent, CalendarState, Date, Matcher};\n\nconst CONTEXT: &'static str = \"DatePicker\";\npub(crate) fn init(cx: &mut App) {\n cx.bind_keys([\n KeyBinding::new(\"enter\", Confirm { secondary: false }, Some(CONTEXT)),\n KeyBinding::new(\"escape\", Cancel, Some(CONTEXT)),\n KeyBinding::new(\"delete\", Delete, Some(CONTEXT)),\n KeyBinding::new(\"backspace\", Delete, Some(CONTEXT)),\n ])\n}\n\n/// Events emitted by the DatePicker.\n#[derive(Clone)]\npub enum DatePickerEvent {\n Change(Date),\n}\n\n/// Preset value for DateRangePreset.\n#[derive(Clone)]\npub enum DateRangePresetValue {\n Single(NaiveDate),\n Range(NaiveDate, NaiveDate),\n}\n\n/// Preset for date range selection.\n#[derive(Clone)]\npub struct DateRangePreset {\n label: SharedString,\n value: DateRangePresetValue,\n}\n\nimpl DateRangePreset {\n /// Creates a new DateRangePreset with a date.\n pub fn single(label: impl Into, date: NaiveDate) -> Self {\n DateRangePreset {\n label: label.into(),\n value: DateRangePresetValue::Single(date),\n }\n }\n /// Creates a new DateRangePreset with a range of dates.\n pub fn range(label: impl Into, start: NaiveDate, end: NaiveDate) -> Self {\n DateRangePreset {\n label: label.into(),\n value: DateRangePresetValue::Range(start, end),\n }\n }\n}\n\n/// Use to store the state of the date picker.\npub struct DatePickerState {\n focus_handle: FocusHandle,\n date: Date,\n open: bool,\n calendar: Entity,\n date_format: SharedString,\n number_of_months: usize,\n disabled_matcher: Option>,\n _subscriptions: Vec,\n}\n\nimpl Focusable for DatePickerState {\n fn focus_handle(&self, _: &App) -> FocusHandle {\n self.focus_handle.clone()\n }\n}\nimpl EventEmitter for DatePickerState {}\n\nimpl DatePickerState {\n /// Create a date state.\n pub fn new(window: &mut Window, cx: &mut Context) -> Self {\n Self::new_with_range(false, window, cx)\n }\n\n /// Create a date state with range mode.\n pub fn range(window: &mut Window, cx: &mut Context) -> Self {\n Self::new_with_range(true, window, cx)\n }\n\n fn new_with_range(is_range: bool, window: &mut Window, cx: &mut Context) -> Self {\n let date = if is_range {\n Date::Range(None, None)\n } else {\n Date::Single(None)\n };\n\n let calendar = cx.new(|cx| {\n let mut this = CalendarState::new(window, cx);\n this.set_date(date, window, cx);\n this\n });\n\n let _subscriptions = vec![cx.subscribe_in(\n &calendar,\n window,\n |this, _, ev: &CalendarEvent, window, cx| match ev {\n CalendarEvent::Selected(date) => {\n this.update_date(*date, true, window, cx);\n this.focus_handle.focus(window, cx);\n }\n },\n )];\n\n Self {\n focus_handle: cx.focus_handle(),\n date,\n calendar,\n open: false,\n date_format: \"%Y/%m/%d\".into(),\n number_of_months: 1,\n disabled_matcher: None,\n _subscriptions,\n }\n }\n\n /// Set the date format of the date picker to display in Input, default: \"%Y/%m/%d\".\n pub fn date_format(mut self, format: impl Into) -> Self {\n self.date_format = format.into();\n self\n }\n\n /// Set the number of months calendar view to display, default is 1.\n pub fn number_of_months(mut self, number_of_months: usize) -> Self {\n self.number_of_months = number_of_months;\n self\n }\n\n /// Get the date of the date picker.\n pub fn date(&self) -> Date {\n self.date\n }\n\n /// Set the date of the date picker.\n pub fn set_date(&mut self, date: impl Into, window: &mut Window, cx: &mut Context) {\n self.update_date(date.into(), false, window, cx);\n }\n\n /// Set the disabled match for the calendar.\n pub fn disabled_matcher(mut self, disabled: impl Into) -> Self {\n self.disabled_matcher = Some(Rc::new(disabled.into()));\n self\n }\n\n fn update_date(&mut self, date: Date, emit: bool, window: &mut Window, cx: &mut Context) {\n self.date = date;\n self.calendar.update(cx, |view, cx| {\n view.set_date(date, window, cx);\n });\n self.open = false;\n if emit {\n cx.emit(DatePickerEvent::Change(date));\n }\n cx.notify();\n }\n\n /// Set the disabled matcher of the date picker.\n fn set_canlendar_disabled_matcher(&mut self, _: &mut Window, cx: &mut Context) {\n let matcher = self.disabled_matcher.clone();\n self.calendar.update(cx, |state, _| {\n state.disabled_matcher = matcher;\n });\n }\n\n fn on_escape(&mut self, _: &Cancel, window: &mut Window, cx: &mut Context) {\n if !self.open {\n cx.propagate();\n }\n\n self.focus_back_if_need(window, cx);\n self.open = false;\n\n cx.notify();\n }\n\n fn on_enter(&mut self, _: &Confirm, _: &mut Window, cx: &mut Context) {\n if !self.open {\n self.open = true;\n cx.notify();\n }\n }\n\n fn on_delete(&mut self, _: &Delete, window: &mut Window, cx: &mut Context) {\n self.clean(&ClickEvent::default(), window, cx);\n }\n\n // To focus the Picker Input, if current focus in is on the container.\n //\n // This is because mouse down out the Calendar, GPUI will move focus to the container.\n // So we need to move focus back to the Picker Input.\n //\n // But if mouse down target is some other focusable element (e.g.: [`crate::Input`]), we should not move focus.\n fn focus_back_if_need(&mut self, window: &mut Window, cx: &mut Context) {\n if !self.open {\n return;\n }\n\n if let Some(focused) = window.focused(cx) {\n if focused.contains(&self.focus_handle, window) {\n self.focus_handle.focus(window, cx);\n }\n }\n }\n\n fn clean(&mut self, _: &gpui::ClickEvent, window: &mut Window, cx: &mut Context) {\n cx.stop_propagation();\n match self.date {\n Date::Single(_) => {\n self.update_date(Date::Single(None), true, window, cx);\n }\n Date::Range(_, _) => {\n self.update_date(Date::Range(None, None), true, window, cx);\n }\n }\n }\n\n fn toggle_calendar(&mut self, _: &gpui::ClickEvent, _: &mut Window, cx: &mut Context) {\n self.open = !self.open;\n cx.notify();\n }\n\n fn select_preset(\n &mut self,\n preset: &DateRangePreset,\n window: &mut Window,\n cx: &mut Context,\n ) {\n match preset.value {\n DateRangePresetValue::Single(single) => {\n self.update_date(Date::Single(Some(single)), true, window, cx)\n }\n DateRangePresetValue::Range(start, end) => {\n self.update_date(Date::Range(Some(start), Some(end)), true, window, cx)\n }\n }\n }\n}\n\n/// A DatePicker element.\n#[derive(IntoElement)]\npub struct DatePicker {\n id: ElementId,\n style: StyleRefinement,\n state: Entity,\n cleanable: bool,\n placeholder: Option,\n size: Size,\n number_of_months: usize,\n presets: Option>,\n appearance: bool,\n disabled: bool,\n}\n\nimpl Sizable for DatePicker {\n fn with_size(mut self, size: impl Into) -> Self {\n self.size = size.into();\n self\n }\n}\nimpl Focusable for DatePicker {\n fn focus_handle(&self, cx: &App) -> FocusHandle {\n self.state.focus_handle(cx)\n }\n}\n\nimpl Styled for DatePicker {\n fn style(&mut self) -> &mut StyleRefinement {\n &mut self.style\n }\n}\n\nimpl Disableable for DatePicker {\n fn disabled(mut self, disabled: bool) -> Self {\n self.disabled = disabled;\n self\n }\n}\n\nimpl Render for DatePickerState {\n fn render(&mut self, _: &mut Window, _: &mut Context) -> impl gpui::IntoElement {\n Empty\n }\n}\n\nimpl DatePicker {\n /// Create a new DatePicker with the given [`DatePickerState`].\n pub fn new(state: &Entity) -> Self {\n Self {\n id: (\"date-picker\", state.entity_id()).into(),\n state: state.clone(),\n cleanable: false,\n placeholder: None,\n size: Size::default(),\n style: StyleRefinement::default(),\n number_of_months: 2,\n presets: None,\n appearance: true,\n disabled: false,\n }\n }\n\n /// Set the placeholder of the date picker, default: \"\".\n pub fn placeholder(mut self, placeholder: impl Into) -> Self {\n self.placeholder = Some(placeholder.into());\n self\n }\n\n /// Set whether to show the clear button when the input field is not empty, default is false.\n pub fn cleanable(mut self, cleanable: bool) -> Self {\n self.cleanable = cleanable;\n self\n }\n\n /// Set preset ranges for the date picker.\n pub fn presets(mut self, presets: Vec) -> Self {\n self.presets = Some(presets);\n self\n }\n\n /// Set number of months to display in the calendar, default is 2.\n pub fn number_of_months(mut self, number_of_months: usize) -> Self {\n self.number_of_months = number_of_months;\n self\n }\n\n /// Set appearance of the date picker, if false, the date picker will be in a minimal style.\n pub fn appearance(mut self, appearance: bool) -> Self {\n self.appearance = appearance;\n self\n }\n}\n\nimpl RenderOnce for DatePicker {\n fn render(self, window: &mut Window, cx: &mut App) -> impl IntoElement {\n self.state.update(cx, |state, cx| {\n state.set_canlendar_disabled_matcher(window, cx);\n });\n\n // This for keep focus border style, when click on the popup.\n let is_focused = self.focus_handle(cx).contains_focused(window, cx);\n let state = self.state.read(cx);\n let show_clean = self.cleanable && state.date.is_some();\n let placeholder = self\n .placeholder\n .clone()\n .unwrap_or_else(|| t!(\"DatePicker.placeholder\").into());\n let display_title = state\n .date\n .format(&state.date_format)\n .unwrap_or(placeholder.clone());\n\n let (bg, fg) = input_style(self.disabled, cx);\n\n div()\n .id(self.id.clone())\n .key_context(CONTEXT)\n .track_focus(&self.focus_handle(cx).tab_stop(true))\n .on_action(window.listener_for(&self.state, DatePickerState::on_enter))\n .on_action(window.listener_for(&self.state, DatePickerState::on_delete))\n .when(state.open, |this| {\n this.on_action(window.listener_for(&self.state, DatePickerState::on_escape))\n })\n .flex_none()\n .w_full()\n .relative()\n .input_text_size(self.size)\n .refine_style(&self.style)\n .child(\n div()\n .id(\"date-picker-input\")\n .relative()\n .flex()\n .items_center()\n .justify_between()\n .when(self.appearance, |this| {\n this.bg(bg)\n .text_color(fg)\n .when(self.disabled, |this| this.opacity(0.5))\n .border_1()\n .border_color(cx.theme().input)\n .rounded(cx.theme().radius)\n .when(cx.theme().shadow, |this| this.shadow_xs())\n .when(is_focused, |this| this.focused_border(cx))\n })\n .overflow_hidden()\n .input_text_size(self.size)\n .input_size(self.size)\n .when(!state.open && !self.disabled, |this| {\n this.on_click(\n window.listener_for(&self.state, DatePickerState::toggle_calendar),\n )\n })\n .child(\n h_flex()\n .w_full()\n .items_center()\n .justify_between()\n .gap_1()\n .child(\n div()\n .w_full()\n .overflow_hidden()\n .when(!state.date.is_some(), |this| {\n this.text_color(cx.theme().muted_foreground)\n })\n .child(display_title),\n )\n .when(!self.disabled, |this| {\n this.when(show_clean, |this| {\n this.child(clear_button(cx).on_click(\n window.listener_for(&self.state, DatePickerState::clean),\n ))\n })\n .when(!show_clean, |this| {\n this.child(\n Icon::new(IconName::Calendar)\n .xsmall()\n .text_color(cx.theme().muted_foreground),\n )\n })\n }),\n ),\n )\n .when(state.open, |this| {\n this.child(\n deferred(\n anchored().snap_to_window_with_margin(px(8.)).child(\n div()\n .occlude()\n .mt_1p5()\n .p_3()\n .border_1()\n .border_color(cx.theme().border)\n .shadow_lg()\n .rounded((cx.theme().radius * 2.).min(px(8.)))\n .bg(cx.theme().popover)\n .text_color(cx.theme().popover_foreground)\n .on_mouse_up_out(\n MouseButton::Left,\n window.listener_for(&self.state, |view, _, window, cx| {\n view.on_escape(&Cancel, window, cx);\n }),\n )\n .child(\n h_flex()\n .gap_3()\n .h_full()\n .items_start()\n .when_some(self.presets.clone(), |this, presets| {\n this.child(\n v_flex().my_1().gap_2().justify_end().children(\n presets.into_iter().enumerate().map(\n |(i, preset)| {\n Button::new((\"preset\", i))\n .small()\n .ghost()\n .tab_stop(false)\n .label(preset.label.clone())\n .on_click(window.listener_for(\n &self.state,\n move |this, _, window, cx| {\n this.select_preset(\n &preset, window, cx,\n );\n },\n ))\n },\n ),\n ),\n )\n })\n .child(\n Calendar::new(&state.calendar)\n .number_of_months(self.number_of_months)\n .border_0()\n .rounded_none()\n .p_0()\n .with_size(self.size),\n ),\n ),\n ),\n )\n .with_priority(2),\n )\n })\n }\n}\n" }, { "path": "crates/ui/src/time/mod.rs", "content": "pub mod calendar;\npub mod date_picker;\nmod utils;\n" }, { "path": "crates/ui/src/time/utils.rs", "content": "use chrono::{Datelike, Duration, NaiveDate};\n\ntrait NaiveDateExt {\n fn days_in_month(&self) -> i32;\n fn is_leap_year(&self) -> bool;\n}\n\nimpl NaiveDateExt for chrono::NaiveDate {\n fn days_in_month(&self) -> i32 {\n let month = self.month();\n match month {\n 1 | 3 | 5 | 7 | 8 | 10 | 12 => 31,\n 4 | 6 | 9 | 11 => 30,\n 2 => {\n if self.is_leap_year() {\n 29\n } else {\n 28\n }\n }\n _ => panic!(\"Invalid month: {}\", month),\n }\n }\n\n fn is_leap_year(&self) -> bool {\n let year = self.year();\n return year % 4 == 0 && (year % 100 != 0 || year % 400 == 0);\n }\n}\n\npub(crate) fn days_in_month(year: i32, month: u32) -> Vec> {\n let mut year = year;\n let mut month = month;\n if month > 12 {\n year += 1;\n month = 1;\n }\n if month < 1 {\n year -= 1;\n month = 12;\n }\n\n let date = NaiveDate::from_ymd_opt(year, month, 1).unwrap();\n let num_days = date.days_in_month();\n let start_weekday = date.weekday().num_days_from_sunday();\n\n // Get the days in the month, 2023-02 will returns\n // \"29|30|31| 1| 2| 3| 4\",\n // \" 5| 6| 7| 8| 9|10|11\",\n // \"12|13|14|15|16|17|18\",\n // \"19|20|21|22|23|24|25\",\n // \"26|27|28| 1| 2| 3| 4\",\n let mut days = vec![];\n for n in 0..5 {\n let mut week_days = vec![];\n for weekday in 0..7 {\n let (mut y, mut m) = (year, month);\n\n // If the day is less than the start weekday, we need to go back to the previous month.\n if n == 0 && weekday < start_weekday {\n m = if m == 1 { 12 } else { m - 1 };\n y = if m == 1 { year - 1 } else { y };\n }\n\n // If start_weekday is 3, and n is 0 and weekday is 3, then day is 1.\n // If start_weekday is 3, and n is 1 and weekday is 4, then day is 9.\n let day = n * 7 + weekday as i32 - start_weekday as i32;\n\n // If the day is greater than the number of days in the month, we need to go to the next month.\n if day > num_days {\n m = if m == 12 { 1 } else { m + 1 };\n y = if m == 1 { year + 1 } else { y };\n }\n\n #[allow(clippy::expect_fun_call)]\n let date = date\n .checked_add_signed(Duration::days(day as i64))\n .expect(&format!(\"invalid date {}-{} days {}\", y, m, day));\n week_days.push(date);\n }\n\n days.push(week_days);\n }\n\n days\n}\n\n#[cfg(test)]\nmod tests {\n use chrono::{Datelike, NaiveDate};\n\n use super::{days_in_month, NaiveDateExt};\n\n #[test]\n fn test_days_in_month() {\n assert_eq!(\n NaiveDate::from_ymd_opt(2024, 2, 1).unwrap().days_in_month(),\n 29\n );\n assert_eq!(\n NaiveDate::from_ymd_opt(2023, 2, 1).unwrap().days_in_month(),\n 28\n );\n assert_eq!(\n NaiveDate::from_ymd_opt(2023, 1, 1).unwrap().days_in_month(),\n 31\n );\n assert_eq!(\n NaiveDate::from_ymd_opt(2023, 4, 1).unwrap().days_in_month(),\n 30\n );\n }\n\n #[test]\n fn test_days() {\n #[track_caller]\n fn assert_case(date: NaiveDate, expected: Vec<&str>) {\n let out = days_in_month(date.year(), date.month())\n .iter()\n .map(|week| {\n week.iter()\n .map(|d| {\n if d.year() == date.year() && d.month() == date.month() {\n format!(\"{:2}\", d.day())\n } else if d.year() == date.year() {\n format!(\"{}-{}\", d.month(), d.day())\n } else {\n format!(\"{}-{}-{}\", d.year(), d.month(), d.day())\n }\n })\n .collect::>()\n .join(\"|\")\n })\n .collect::>();\n\n assert_eq!(out, expected);\n }\n\n assert_case(\n NaiveDate::from_ymd_opt(2024, 8, 1).unwrap(),\n vec![\n \"7-28|7-29|7-30|7-31| 1| 2| 3\",\n \" 4| 5| 6| 7| 8| 9|10\",\n \"11|12|13|14|15|16|17\",\n \"18|19|20|21|22|23|24\",\n \"25|26|27|28|29|30|31\",\n ],\n );\n assert_case(\n NaiveDate::from_ymd_opt(2025, 1, 1).unwrap(),\n vec![\n \"2024-12-29|2024-12-30|2024-12-31| 1| 2| 3| 4\",\n \" 5| 6| 7| 8| 9|10|11\",\n \"12|13|14|15|16|17|18\",\n \"19|20|21|22|23|24|25\",\n \"26|27|28|29|30|31|2-1\",\n ],\n );\n\n assert_case(\n NaiveDate::from_ymd_opt(2024, 2, 1).unwrap(),\n vec![\n \"1-28|1-29|1-30|1-31| 1| 2| 3\",\n \" 4| 5| 6| 7| 8| 9|10\",\n \"11|12|13|14|15|16|17\",\n \"18|19|20|21|22|23|24\",\n \"25|26|27|28|29|3-1|3-2\",\n ],\n );\n assert_case(\n NaiveDate::from_ymd_opt(2023, 2, 20).unwrap(),\n vec![\n \"1-29|1-30|1-31| 1| 2| 3| 4\",\n \" 5| 6| 7| 8| 9|10|11\",\n \"12|13|14|15|16|17|18\",\n \"19|20|21|22|23|24|25\",\n \"26|27|28|3-1|3-2|3-3|3-4\",\n ],\n );\n }\n}\n" }, { "path": "crates/ui/src/title_bar.rs", "content": "use std::rc::Rc;\n\nuse crate::{\n ActiveTheme, Icon, IconName, InteractiveElementExt as _, Sizable as _, StyledExt, h_flex,\n};\nuse gpui::{\n AnyElement, App, ClickEvent, Context, Decorations, Hsla, InteractiveElement, IntoElement,\n MouseButton, ParentElement, Pixels, Render, RenderOnce, StatefulInteractiveElement as _,\n StyleRefinement, Styled, TitlebarOptions, Window, WindowControlArea, div,\n prelude::FluentBuilder as _, px,\n};\nuse smallvec::SmallVec;\n\npub const TITLE_BAR_HEIGHT: Pixels = px(34.);\n#[cfg(target_os = \"macos\")]\nconst TITLE_BAR_LEFT_PADDING: Pixels = px(80.);\n#[cfg(not(target_os = \"macos\"))]\nconst TITLE_BAR_LEFT_PADDING: Pixels = px(12.);\n\n/// TitleBar used to customize the appearance of the title bar.\n///\n/// We can put some elements inside the title bar.\n#[derive(IntoElement)]\npub struct TitleBar {\n style: StyleRefinement,\n children: SmallVec<[AnyElement; 1]>,\n on_close_window: Option>>,\n}\n\nimpl TitleBar {\n /// Create a new TitleBar.\n pub fn new() -> Self {\n Self {\n style: StyleRefinement::default(),\n children: SmallVec::new(),\n on_close_window: None,\n }\n }\n\n /// Returns the default title bar options for compatible with the [`crate::TitleBar`].\n pub fn title_bar_options() -> TitlebarOptions {\n TitlebarOptions {\n title: None,\n appears_transparent: true,\n traffic_light_position: Some(gpui::point(px(9.0), px(9.0))),\n }\n }\n\n /// Add custom for close window event, default is None, then click X button will call `window.remove_window()`.\n /// Linux only, this will do nothing on other platforms.\n pub fn on_close_window(\n mut self,\n f: impl Fn(&ClickEvent, &mut Window, &mut App) + 'static,\n ) -> Self {\n if cfg!(target_os = \"linux\") {\n self.on_close_window = Some(Rc::new(Box::new(f)));\n }\n self\n }\n}\n\n// The Windows control buttons have a fixed width of 35px.\n//\n// We don't need implementation the click event for the control buttons.\n// If user clicked in the bounds, the window event will be triggered.\n#[derive(IntoElement, Clone)]\nenum ControlIcon {\n Minimize,\n Restore,\n Maximize,\n Close {\n on_close_window: Option>>,\n },\n}\n\nimpl ControlIcon {\n fn minimize() -> Self {\n Self::Minimize\n }\n\n fn restore() -> Self {\n Self::Restore\n }\n\n fn maximize() -> Self {\n Self::Maximize\n }\n\n fn close(on_close_window: Option>>) -> Self {\n Self::Close { on_close_window }\n }\n\n fn id(&self) -> &'static str {\n match self {\n Self::Minimize => \"minimize\",\n Self::Restore => \"restore\",\n Self::Maximize => \"maximize\",\n Self::Close { .. } => \"close\",\n }\n }\n\n fn icon(&self) -> IconName {\n match self {\n Self::Minimize => IconName::WindowMinimize,\n Self::Restore => IconName::WindowRestore,\n Self::Maximize => IconName::WindowMaximize,\n Self::Close { .. } => IconName::WindowClose,\n }\n }\n\n fn window_control_area(&self) -> WindowControlArea {\n match self {\n Self::Minimize => WindowControlArea::Min,\n Self::Restore | Self::Maximize => WindowControlArea::Max,\n Self::Close { .. } => WindowControlArea::Close,\n }\n }\n\n fn is_close(&self) -> bool {\n matches!(self, Self::Close { .. })\n }\n\n #[inline]\n fn hover_fg(&self, cx: &App) -> Hsla {\n if self.is_close() {\n cx.theme().danger_foreground\n } else {\n cx.theme().secondary_foreground\n }\n }\n\n #[inline]\n fn hover_bg(&self, cx: &App) -> Hsla {\n if self.is_close() {\n cx.theme().danger\n } else {\n cx.theme().secondary_hover\n }\n }\n\n #[inline]\n fn active_bg(&self, cx: &mut App) -> Hsla {\n if self.is_close() {\n cx.theme().danger_active\n } else {\n cx.theme().secondary_active\n }\n }\n}\n\nimpl RenderOnce for ControlIcon {\n fn render(self, _: &mut Window, cx: &mut App) -> impl IntoElement {\n let is_linux = cfg!(target_os = \"linux\");\n let is_windows = cfg!(target_os = \"windows\");\n let hover_fg = self.hover_fg(cx);\n let hover_bg = self.hover_bg(cx);\n let active_bg = self.active_bg(cx);\n let icon = self.clone();\n let on_close_window = match &self {\n ControlIcon::Close { on_close_window } => on_close_window.clone(),\n _ => None,\n };\n\n div()\n .id(self.id())\n .flex()\n .w(TITLE_BAR_HEIGHT)\n .h_full()\n .flex_shrink_0()\n .justify_center()\n .content_center()\n .items_center()\n .text_color(cx.theme().foreground)\n .hover(|style| style.bg(hover_bg).text_color(hover_fg))\n .active(|style| style.bg(active_bg).text_color(hover_fg))\n .when(is_windows, |this| {\n this.window_control_area(self.window_control_area())\n })\n .when(is_linux, |this| {\n this.on_mouse_down(MouseButton::Left, move |_, window, cx| {\n window.prevent_default();\n cx.stop_propagation();\n })\n .on_click(move |_, window, cx| {\n cx.stop_propagation();\n match icon {\n Self::Minimize => window.minimize_window(),\n Self::Restore | Self::Maximize => window.zoom_window(),\n Self::Close { .. } => {\n if let Some(f) = on_close_window.clone() {\n f(&ClickEvent::default(), window, cx);\n } else {\n window.remove_window();\n }\n }\n }\n })\n })\n .child(Icon::new(self.icon()).small())\n }\n}\n\n#[derive(IntoElement)]\nstruct WindowControls {\n on_close_window: Option>>,\n}\n\nimpl RenderOnce for WindowControls {\n fn render(self, window: &mut Window, _: &mut App) -> impl IntoElement {\n if cfg!(target_os = \"macos\") || cfg!(target_family = \"wasm\") {\n return div().id(\"window-controls\");\n }\n\n h_flex()\n .id(\"window-controls\")\n .items_center()\n .flex_shrink_0()\n .h_full()\n .child(ControlIcon::minimize())\n .child(if window.is_maximized() {\n ControlIcon::restore()\n } else {\n ControlIcon::maximize()\n })\n .child(ControlIcon::close(self.on_close_window))\n }\n}\n\nimpl Styled for TitleBar {\n fn style(&mut self) -> &mut gpui::StyleRefinement {\n &mut self.style\n }\n}\n\nimpl ParentElement for TitleBar {\n fn extend(&mut self, elements: impl IntoIterator) {\n self.children.extend(elements);\n }\n}\n\nstruct TitleBarState {\n should_move: bool,\n}\n\n// TODO: Remove this when GPUI has released v0.2.3\nimpl Render for TitleBarState {\n fn render(&mut self, _: &mut Window, _: &mut Context) -> impl IntoElement {\n div()\n }\n}\n\nimpl RenderOnce for TitleBar {\n fn render(self, window: &mut Window, cx: &mut App) -> impl IntoElement {\n let is_client_decorated = matches!(window.window_decorations(), Decorations::Client { .. });\n let is_web = cfg!(target_family = \"wasm\");\n let is_linux = cfg!(target_os = \"linux\");\n let is_macos = cfg!(target_os = \"macos\");\n\n let state = window.use_state(cx, |_, _| TitleBarState { should_move: false });\n\n div().flex_shrink_0().child(\n div()\n .id(\"title-bar\")\n .flex()\n .flex_row()\n .items_center()\n .justify_between()\n .h(TITLE_BAR_HEIGHT)\n .pl(TITLE_BAR_LEFT_PADDING)\n .border_b_1()\n .border_color(cx.theme().title_bar_border)\n .bg(cx.theme().title_bar)\n .refine_style(&self.style)\n .when(is_linux, |this| {\n this.on_double_click(|_, window, _| window.zoom_window())\n })\n .when(is_macos, |this| {\n this.on_double_click(|_, window, _| window.titlebar_double_click())\n })\n .on_mouse_down_out(window.listener_for(&state, |state, _, _, _| {\n state.should_move = false;\n }))\n .on_mouse_down(\n MouseButton::Left,\n window.listener_for(&state, |state, _, _, _| {\n state.should_move = true;\n }),\n )\n .on_mouse_up(\n MouseButton::Left,\n window.listener_for(&state, |state, _, _, _| {\n state.should_move = false;\n }),\n )\n .on_mouse_move(window.listener_for(&state, |state, _, window, _| {\n if state.should_move {\n state.should_move = false;\n window.start_window_move();\n }\n }))\n .child(\n h_flex()\n .id(\"bar\")\n .h_full()\n .justify_between()\n .flex_shrink_0()\n .flex_1()\n .when(!is_web, |this| {\n this.window_control_area(WindowControlArea::Drag)\n .when(window.is_fullscreen(), |this| this.pl_3())\n .when(is_linux && is_client_decorated, |this| {\n this.child(\n div()\n .top_0()\n .left_0()\n .absolute()\n .size_full()\n .h_full()\n .on_mouse_down(\n MouseButton::Right,\n move |ev, window, _| {\n window.show_window_menu(ev.position)\n },\n ),\n )\n })\n })\n .children(self.children),\n )\n .child(WindowControls {\n on_close_window: self.on_close_window,\n }),\n )\n }\n}\n" }, { "path": "crates/ui/src/tooltip.rs", "content": "use gpui::{\n div, prelude::FluentBuilder, px, Action, AnyElement, AnyView, App, AppContext, Context,\n IntoElement, ParentElement, Render, SharedString, StyleRefinement, Styled, Window,\n};\n\nuse crate::{h_flex, kbd::Kbd, text::Text, ActiveTheme, StyledExt};\n\nenum TooltipContext {\n Text(Text),\n Element(Box AnyElement>),\n}\n\n/// A Tooltip element that can display text or custom content,\n/// with optional key binding information.\npub struct Tooltip {\n style: StyleRefinement,\n content: TooltipContext,\n key_binding: Option,\n action: Option<(Box, Option)>,\n}\n\nimpl Tooltip {\n /// Create a Tooltip with a text content.\n pub fn new(text: impl Into) -> Self {\n Self {\n style: StyleRefinement::default(),\n content: TooltipContext::Text(text.into()),\n key_binding: None,\n action: None,\n }\n }\n\n /// Create a Tooltip with a custom element.\n pub fn element(builder: F) -> Self\n where\n E: IntoElement,\n F: Fn(&mut Window, &mut App) -> E + 'static,\n {\n Self {\n style: StyleRefinement::default(),\n key_binding: None,\n action: None,\n content: TooltipContext::Element(Box::new(move |window, cx| {\n builder(window, cx).into_any_element()\n })),\n }\n }\n\n /// Set Action to display key binding information for the tooltip if it exists.\n pub fn action(mut self, action: &dyn Action, context: Option<&str>) -> Self {\n self.action = Some((action.boxed_clone(), context.map(SharedString::new)));\n self\n }\n\n /// Set KeyBinding information for the tooltip.\n pub fn key_binding(mut self, key_binding: Option) -> Self {\n self.key_binding = key_binding;\n self\n }\n\n /// Build the tooltip and return it as an `AnyView`.\n pub fn build(self, _: &mut Window, cx: &mut App) -> AnyView {\n cx.new(|_| self).into()\n }\n}\n\nimpl FluentBuilder for Tooltip {}\nimpl Styled for Tooltip {\n fn style(&mut self) -> &mut StyleRefinement {\n &mut self.style\n }\n}\nimpl Render for Tooltip {\n fn render(&mut self, window: &mut Window, cx: &mut Context) -> impl IntoElement {\n let key_binding = if let Some(key_binding) = &self.key_binding {\n Some(key_binding.clone())\n } else {\n if let Some((action, context)) = &self.action {\n Kbd::binding_for_action(\n action.as_ref(),\n context.as_ref().map(|s| s.as_ref()),\n window,\n )\n } else {\n None\n }\n };\n\n div().child(\n // Wrap in a child, to ensure the left margin is applied to the tooltip\n h_flex()\n .font_family(cx.theme().font_family.clone())\n .m_3()\n .bg(cx.theme().popover)\n .text_color(cx.theme().popover_foreground)\n .bg(cx.theme().popover)\n .border_1()\n .border_color(cx.theme().border)\n .shadow_md()\n .rounded(px(6.))\n .justify_between()\n .py_0p5()\n .px_2()\n .text_sm()\n .gap_3()\n .refine_style(&self.style)\n .map(|this| {\n this.child(div().map(|this| match self.content {\n TooltipContext::Text(ref text) => this.child(text.clone()),\n TooltipContext::Element(ref builder) => this.child(builder(window, cx)),\n }))\n })\n .when_some(key_binding, |this, kbd| {\n this.child(\n div()\n .text_xs()\n .flex_shrink_0()\n .text_color(cx.theme().muted_foreground)\n .child(kbd.appearance(false)),\n )\n }),\n )\n }\n}\n" }, { "path": "crates/ui/src/tree.rs", "content": "use std::{cell::RefCell, ops::Range, rc::Rc};\n\nuse gpui::{\n App, Context, ElementId, Entity, FocusHandle, InteractiveElement as _, IntoElement, KeyBinding,\n ListSizingBehavior, MouseButton, ParentElement, Render, RenderOnce, SharedString,\n StyleRefinement, Styled, UniformListScrollHandle, Window, div, prelude::FluentBuilder as _,\n uniform_list,\n};\n\nuse crate::{\n StyledExt,\n actions::{Confirm, SelectDown, SelectLeft, SelectRight, SelectUp},\n list::ListItem,\n scroll::ScrollableElement,\n};\n\nconst CONTEXT: &str = \"Tree\";\npub(crate) fn init(cx: &mut App) {\n cx.bind_keys([\n KeyBinding::new(\"up\", SelectUp, Some(CONTEXT)),\n KeyBinding::new(\"down\", SelectDown, Some(CONTEXT)),\n KeyBinding::new(\"left\", SelectLeft, Some(CONTEXT)),\n KeyBinding::new(\"right\", SelectRight, Some(CONTEXT)),\n ]);\n}\n\n/// Create a [`Tree`].\n///\n/// # Arguments\n///\n/// * `state` - The shared state managing the tree items.\n/// * `render_item` - A closure to render each tree item.\n///\n/// ```ignore\n/// let state = cx.new(|_| {\n/// TreeState::new().items(vec![\n/// TreeItem::new(\"src\")\n/// .child(TreeItem::new(\"lib.rs\"),\n/// TreeItem::new(\"Cargo.toml\"),\n/// TreeItem::new(\"README.md\"),\n/// ])\n/// });\n///\n/// tree(&state, |ix, entry, selected, window, cx| {\n/// let item = entry.item();\n/// ListItem::new(ix).pl(px(16.) * entry.depth()).child(item.label.clone())\n/// })\n/// ```\npub fn tree(state: &Entity, render_item: R) -> Tree\nwhere\n R: Fn(usize, &TreeEntry, bool, &mut Window, &mut App) -> ListItem + 'static,\n{\n Tree::new(state, render_item)\n}\n\nstruct TreeItemState {\n expanded: bool,\n disabled: bool,\n}\n\n/// A tree item with a label, children, and an expanded state.\n#[derive(Clone)]\npub struct TreeItem {\n pub id: SharedString,\n pub label: SharedString,\n pub children: Vec,\n state: Rc>,\n}\n\n/// A flat representation of a tree item with its depth.\n#[derive(Clone)]\npub struct TreeEntry {\n item: TreeItem,\n depth: usize,\n}\n\nimpl TreeEntry {\n /// Get the source tree item.\n #[inline]\n pub fn item(&self) -> &TreeItem {\n &self.item\n }\n\n /// The depth of this item in the tree.\n #[inline]\n pub fn depth(&self) -> usize {\n self.depth\n }\n\n #[inline]\n fn is_root(&self) -> bool {\n self.depth == 0\n }\n\n /// Whether this item is a folder (has children).\n #[inline]\n pub fn is_folder(&self) -> bool {\n self.item.is_folder()\n }\n\n /// Return true if the item is expanded.\n #[inline]\n pub fn is_expanded(&self) -> bool {\n self.item.is_expanded()\n }\n\n #[inline]\n pub fn is_disabled(&self) -> bool {\n self.item.is_disabled()\n }\n}\n\nimpl TreeItem {\n /// Create a new tree item with the given label.\n ///\n /// - The `id` for you to uniquely identify this item, then later you can use it for selection or other purposes.\n /// - The `label` is the text to display for this item.\n ///\n /// For example, the `id` is the full file path, and the `label` is the file name.\n ///\n /// ```ignore\n /// TreeItem::new(\"src/ui/button.rs\", \"button.rs\")\n /// ```\n pub fn new(id: impl Into, label: impl Into) -> Self {\n Self {\n id: id.into(),\n label: label.into(),\n children: Vec::new(),\n state: Rc::new(RefCell::new(TreeItemState {\n expanded: false,\n disabled: false,\n })),\n }\n }\n\n /// Add a child item to this tree item.\n pub fn child(mut self, child: TreeItem) -> Self {\n self.children.push(child);\n self\n }\n\n /// Add multiple child items to this tree item.\n pub fn children(mut self, children: impl IntoIterator) -> Self {\n self.children.extend(children);\n self\n }\n\n /// Set expanded state for this tree item.\n pub fn expanded(self, expanded: bool) -> Self {\n self.state.borrow_mut().expanded = expanded;\n self\n }\n\n /// Set disabled state for this tree item.\n pub fn disabled(self, disabled: bool) -> Self {\n self.state.borrow_mut().disabled = disabled;\n self\n }\n\n /// Whether this item is a folder (has children).\n #[inline]\n pub fn is_folder(&self) -> bool {\n self.children.len() > 0\n }\n\n /// Return true if the item is disabled.\n pub fn is_disabled(&self) -> bool {\n self.state.borrow().disabled\n }\n\n /// Return true if the item is expanded.\n #[inline]\n pub fn is_expanded(&self) -> bool {\n self.state.borrow().expanded\n }\n\n fn find_ancestors(&self, target_id: &SharedString) -> Option> {\n if self.id == *target_id {\n return Some(vec![]);\n }\n\n for child in &self.children {\n if let Some(mut path) = child.find_ancestors(target_id) {\n path.push(self.clone());\n return Some(path);\n }\n }\n\n None\n }\n}\n\n/// State for managing tree items.\npub struct TreeState {\n focus_handle: FocusHandle,\n entries: Vec,\n scroll_handle: UniformListScrollHandle,\n selected_ix: Option,\n render_item: Rc ListItem>,\n}\n\nimpl TreeState {\n /// Create a new empty tree state.\n pub fn new(cx: &mut App) -> Self {\n Self {\n selected_ix: None,\n focus_handle: cx.focus_handle(),\n scroll_handle: UniformListScrollHandle::default(),\n entries: Vec::new(),\n render_item: Rc::new(|_, _, _, _, _| ListItem::new(0)),\n }\n }\n\n /// Set the tree items.\n pub fn items(mut self, items: impl Into>) -> Self {\n let items = items.into();\n self.entries.clear();\n for item in items.into_iter() {\n self.add_entry(item, 0);\n }\n self\n }\n\n /// Set the tree items.\n pub fn set_items(&mut self, items: impl Into>, cx: &mut Context) {\n let items = items.into();\n self.entries.clear();\n for item in items.into_iter() {\n self.add_entry(item, 0);\n }\n self.selected_ix = None;\n cx.notify();\n }\n\n /// Get the currently selected index, if any.\n pub fn selected_index(&self) -> Option {\n self.selected_ix\n }\n\n /// Set the selected index, or `None` to clear selection.\n pub fn set_selected_index(&mut self, ix: Option, cx: &mut Context) {\n self.selected_ix = ix;\n cx.notify();\n }\n\n /// Set the selected index by tree item, or `None` to clear selection.\n pub fn set_selected_item(&mut self, item: Option<&TreeItem>, cx: &mut Context) {\n if let Some(item) = item {\n let ix = self\n .entries\n .iter()\n .position(|entry| entry.item.id == item.id);\n if ix.is_some() {\n self.selected_ix = ix;\n } else {\n self.expand_ancestors(item.id.clone());\n self.selected_ix = self\n .entries\n .iter()\n .position(|entry| entry.item.id == item.id);\n }\n } else {\n self.selected_ix = None;\n }\n cx.notify();\n }\n\n /// Get the currently selected tree item, if any.\n pub fn selected_item(&self) -> Option<&TreeItem> {\n self.selected_ix\n .and_then(|ix| self.entries.get(ix).map(|entry| &entry.item))\n }\n\n pub fn scroll_to_item(&mut self, ix: usize, strategy: gpui::ScrollStrategy) {\n self.scroll_handle.scroll_to_item(ix, strategy);\n }\n\n /// Get the currently selected entry, if any.\n pub fn selected_entry(&self) -> Option<&TreeEntry> {\n self.selected_ix.and_then(|ix| self.entries.get(ix))\n }\n\n fn expand_ancestors(&mut self, target_id: SharedString) {\n let mut ancestors = Vec::new();\n\n for entry in &self.entries {\n if let Some(found_ancestors) = entry.item.find_ancestors(&target_id) {\n ancestors = found_ancestors;\n break;\n }\n }\n\n if ancestors.is_empty() {\n return;\n }\n\n for ancestor in ancestors {\n ancestor.state.borrow_mut().expanded = true;\n }\n\n self.rebuild_entries();\n }\n\n fn add_entry(&mut self, item: TreeItem, depth: usize) {\n self.entries.push(TreeEntry {\n item: item.clone(),\n depth,\n });\n if item.is_expanded() {\n for child in &item.children {\n self.add_entry(child.clone(), depth + 1);\n }\n }\n }\n\n fn toggle_expand(&mut self, ix: usize) {\n let Some(entry) = self.entries.get_mut(ix) else {\n return;\n };\n if !entry.is_folder() {\n return;\n }\n\n entry.item.state.borrow_mut().expanded = !entry.is_expanded();\n self.rebuild_entries();\n }\n\n fn rebuild_entries(&mut self) {\n let root_items: Vec = self\n .entries\n .iter()\n .filter(|e| e.is_root())\n .map(|e| e.item.clone())\n .collect();\n self.entries.clear();\n for item in root_items.into_iter() {\n self.add_entry(item, 0);\n }\n }\n\n pub fn focus(&mut self, window: &mut Window, cx: &mut App) {\n self.focus_handle.focus(window, cx);\n }\n\n fn on_action_confirm(&mut self, _: &Confirm, _: &mut Window, cx: &mut Context) {\n if let Some(selected_ix) = self.selected_ix {\n if let Some(entry) = self.entries.get(selected_ix) {\n if entry.is_folder() {\n self.toggle_expand(selected_ix);\n cx.notify();\n }\n }\n }\n }\n\n fn on_action_left(&mut self, _: &SelectLeft, _: &mut Window, cx: &mut Context) {\n if let Some(selected_ix) = self.selected_ix {\n if let Some(entry) = self.entries.get(selected_ix) {\n if entry.is_folder() && entry.is_expanded() {\n self.toggle_expand(selected_ix);\n cx.notify();\n }\n }\n }\n }\n\n fn on_action_right(&mut self, _: &SelectRight, _: &mut Window, cx: &mut Context) {\n if let Some(selected_ix) = self.selected_ix {\n if let Some(entry) = self.entries.get(selected_ix) {\n if entry.is_folder() && !entry.is_expanded() {\n self.toggle_expand(selected_ix);\n cx.notify();\n }\n }\n }\n }\n\n fn on_action_up(&mut self, _: &SelectUp, _: &mut Window, cx: &mut Context) {\n let mut selected_ix = self.selected_ix.unwrap_or(0);\n\n if selected_ix > 0 {\n selected_ix = selected_ix - 1;\n } else {\n selected_ix = self.entries.len().saturating_sub(1);\n }\n\n self.selected_ix = Some(selected_ix);\n self.scroll_handle\n .scroll_to_item(selected_ix, gpui::ScrollStrategy::Top);\n cx.notify();\n }\n\n fn on_action_down(&mut self, _: &SelectDown, _: &mut Window, cx: &mut Context) {\n let mut selected_ix = self.selected_ix.unwrap_or(0);\n if selected_ix + 1 < self.entries.len() {\n selected_ix = selected_ix + 1;\n } else {\n selected_ix = 0;\n }\n\n self.selected_ix = Some(selected_ix);\n self.scroll_handle\n .scroll_to_item(selected_ix, gpui::ScrollStrategy::Bottom);\n cx.notify();\n }\n\n fn on_entry_click(&mut self, ix: usize, _: &mut Window, cx: &mut Context) {\n self.selected_ix = Some(ix);\n self.toggle_expand(ix);\n cx.notify();\n }\n}\n\nimpl Render for TreeState {\n fn render(&mut self, _: &mut Window, cx: &mut Context) -> impl IntoElement {\n let render_item = self.render_item.clone();\n\n div().id(\"tree-state\").size_full().relative().child(\n uniform_list(\"entries\", self.entries.len(), {\n cx.processor(move |state, visible_range: Range, window, cx| {\n let mut items = Vec::with_capacity(visible_range.len());\n for ix in visible_range {\n let entry = &state.entries[ix];\n let selected = Some(ix) == state.selected_ix;\n let item = (render_item)(ix, entry, selected, window, cx);\n\n let el = div()\n .id(ix)\n .child(item.disabled(entry.item().is_disabled()).selected(selected))\n .when(!entry.item().is_disabled(), |this| {\n this.on_mouse_down(\n MouseButton::Left,\n cx.listener({\n move |this, _, window, cx| {\n this.on_entry_click(ix, window, cx);\n }\n }),\n )\n });\n\n items.push(el)\n }\n\n items\n })\n })\n .flex_grow()\n .size_full()\n .track_scroll(&self.scroll_handle)\n .with_sizing_behavior(ListSizingBehavior::Auto)\n .into_any_element(),\n )\n }\n}\n\n/// A tree view element that displays hierarchical data.\n#[derive(IntoElement)]\npub struct Tree {\n id: ElementId,\n state: Entity,\n style: StyleRefinement,\n render_item: Rc ListItem>,\n}\n\nimpl Tree {\n pub fn new(state: &Entity, render_item: R) -> Self\n where\n R: Fn(usize, &TreeEntry, bool, &mut Window, &mut App) -> ListItem + 'static,\n {\n Self {\n id: ElementId::Name(format!(\"tree-{}\", state.entity_id()).into()),\n state: state.clone(),\n style: StyleRefinement::default(),\n render_item: Rc::new(move |ix, item, selected, window, app| {\n render_item(ix, item, selected, window, app)\n }),\n }\n }\n}\n\nimpl Styled for Tree {\n fn style(&mut self) -> &mut StyleRefinement {\n &mut self.style\n }\n}\n\nimpl RenderOnce for Tree {\n fn render(self, window: &mut Window, cx: &mut App) -> impl IntoElement {\n let focus_handle = self.state.read(cx).focus_handle.clone();\n let scroll_handle = self.state.read(cx).scroll_handle.clone();\n\n self.state\n .update(cx, |state, _| state.render_item = self.render_item);\n\n div()\n .id(self.id)\n .key_context(CONTEXT)\n .track_focus(&focus_handle)\n .on_action(window.listener_for(&self.state, TreeState::on_action_confirm))\n .on_action(window.listener_for(&self.state, TreeState::on_action_left))\n .on_action(window.listener_for(&self.state, TreeState::on_action_right))\n .on_action(window.listener_for(&self.state, TreeState::on_action_up))\n .on_action(window.listener_for(&self.state, TreeState::on_action_down))\n .size_full()\n .child(self.state)\n .refine_style(&self.style)\n .vertical_scrollbar(&scroll_handle)\n }\n}\n\n#[cfg(test)]\nmod tests {\n use indoc::indoc;\n\n use super::TreeState;\n use gpui::AppContext as _;\n\n fn assert_entries(entries: &Vec, expected: &str) {\n let actual: Vec = entries\n .iter()\n .map(|e| {\n let mut s = String::new();\n s.push_str(&\" \".repeat(e.depth));\n s.push_str(e.item().label.as_str());\n s\n })\n .collect();\n let actual = actual.join(\"\\n\");\n assert_eq!(actual.trim(), expected.trim());\n }\n\n #[gpui::test]\n fn test_tree_entry(cx: &mut gpui::TestAppContext) {\n use super::TreeItem;\n\n let items = vec![\n TreeItem::new(\"src\", \"src\")\n .expanded(true)\n .child(\n TreeItem::new(\"src/ui\", \"ui\")\n .expanded(true)\n .child(TreeItem::new(\"src/ui/button.rs\", \"button.rs\"))\n .child(TreeItem::new(\"src/ui/icon.rs\", \"icon.rs\"))\n .child(TreeItem::new(\"src/ui/mod.rs\", \"mod.rs\")),\n )\n .child(TreeItem::new(\"src/lib.rs\", \"lib.rs\")),\n TreeItem::new(\"Cargo.toml\", \"Cargo.toml\"),\n TreeItem::new(\"Cargo.lock\", \"Cargo.lock\").disabled(true),\n TreeItem::new(\"README.md\", \"README.md\"),\n ];\n\n let state = cx.new(|cx| TreeState::new(cx).items(items));\n state.update(cx, |state, _| {\n assert_entries(\n &state.entries,\n indoc! {\n r#\"\n src\n ui\n button.rs\n icon.rs\n mod.rs\n lib.rs\n Cargo.toml\n Cargo.lock\n README.md\n \"#\n },\n );\n\n let entry = state.entries.get(0).unwrap();\n assert_eq!(entry.depth(), 0);\n assert_eq!(entry.is_root(), true);\n assert_eq!(entry.is_folder(), true);\n assert_eq!(entry.is_expanded(), true);\n\n let entry = state.entries.get(1).unwrap();\n assert_eq!(entry.depth(), 1);\n assert_eq!(entry.is_root(), false);\n assert_eq!(entry.is_folder(), true);\n assert_eq!(entry.is_expanded(), true);\n assert_eq!(entry.item().label.as_str(), \"ui\");\n\n state.toggle_expand(1);\n let entry = state.entries.get(1).unwrap();\n assert_eq!(entry.is_expanded(), false);\n assert_entries(\n &state.entries,\n indoc! {\n r#\"\n src\n ui\n lib.rs\n Cargo.toml\n Cargo.lock\n README.md\n \"#\n },\n );\n })\n }\n}\n" }, { "path": "crates/ui/src/virtual_list.rs", "content": "//! Virtual List for render a large number of differently sized rows/columns.\n//!\n//! > NOTE: This must ensure each column width or row height.\n//!\n//! Only visible range are rendered for performance reasons.\n//!\n//! Inspired by `gpui::uniform_list`.\n//! https://github.com/zed-industries/zed/blob/0ae1603610ab6b265bdfbee7b8dbc23c5ab06edc/crates/gpui/src/elements/uniform_list.rs\n//!\n//! Unlike the `uniform_list`, the each item can have different size.\n//!\n//! This is useful for more complex layout, for example, a table with different row height.\nuse std::{\n cell::RefCell,\n cmp,\n ops::{Deref, Range},\n rc::Rc,\n};\n\nuse gpui::{\n Along, AnyElement, App, AvailableSpace, Axis, Bounds, ContentMask, Context,\n DeferredScrollToItem, Div, Element, ElementId, Entity, GlobalElementId, Half, Hitbox,\n InteractiveElement, IntoElement, IsZero as _, ListSizingBehavior, Pixels, Point, Render,\n ScrollHandle, ScrollStrategy, Size, Stateful, StatefulInteractiveElement, StyleRefinement,\n Styled, Window, div, point, px, size,\n};\nuse smallvec::SmallVec;\n\nuse crate::{AxisExt, scroll::ScrollbarHandle};\n\nstruct VirtualListScrollHandleState {\n axis: Axis,\n items_count: usize,\n pub deferred_scroll_to_item: Option,\n}\n\n/// A scroll handle for [`VirtualList`].\n///\n/// See also [`ScrollHandle`].\n#[derive(Clone)]\npub struct VirtualListScrollHandle {\n state: Rc>,\n base_handle: ScrollHandle,\n}\n\nimpl From for VirtualListScrollHandle {\n fn from(handle: ScrollHandle) -> Self {\n let mut this = VirtualListScrollHandle::new();\n this.base_handle = handle;\n this\n }\n}\n\nimpl AsRef for VirtualListScrollHandle {\n fn as_ref(&self) -> &ScrollHandle {\n &self.base_handle\n }\n}\n\nimpl ScrollbarHandle for VirtualListScrollHandle {\n fn offset(&self) -> Point {\n self.base_handle.offset()\n }\n\n fn set_offset(&self, offset: Point) {\n self.base_handle.set_offset(offset);\n }\n\n fn content_size(&self) -> Size {\n self.base_handle.content_size()\n }\n}\n\nimpl Deref for VirtualListScrollHandle {\n type Target = ScrollHandle;\n\n fn deref(&self) -> &Self::Target {\n &self.base_handle\n }\n}\n\nimpl VirtualListScrollHandle {\n /// Create a new VirtualListScrollHandle.\n pub fn new() -> Self {\n VirtualListScrollHandle {\n state: Rc::new(RefCell::new(VirtualListScrollHandleState {\n axis: Axis::Vertical,\n items_count: 0,\n deferred_scroll_to_item: None,\n })),\n base_handle: ScrollHandle::default(),\n }\n }\n\n /// Get the base scroll handle.\n pub fn base_handle(&self) -> &ScrollHandle {\n &self.base_handle\n }\n\n /// Scroll to the item at the given index.\n pub fn scroll_to_item(&self, ix: usize, strategy: ScrollStrategy) {\n self.scroll_to_item_with_offset(ix, strategy, 0);\n }\n\n /// Scroll to the item at the given index, with an additional offset items.\n fn scroll_to_item_with_offset(&self, ix: usize, strategy: ScrollStrategy, offset: usize) {\n let mut state = self.state.borrow_mut();\n state.deferred_scroll_to_item = Some(DeferredScrollToItem {\n item_index: ix,\n strategy,\n offset,\n scroll_strict: false,\n });\n }\n\n /// Scrolls to the bottom of the list.\n pub fn scroll_to_bottom(&self) {\n let items_count = self.state.borrow().items_count;\n self.scroll_to_item(items_count.saturating_sub(1), ScrollStrategy::Top);\n }\n}\n\n/// Create a [`VirtualList`] in vertical direction.\n///\n/// This is like `uniform_list` in GPUI, but support two axis.\n///\n/// The `item_sizes` is the size of each column,\n/// only the `height` is used, `width` is ignored and VirtualList will measure the first item width.\n///\n/// See also [`h_virtual_list`]\n#[inline]\npub fn v_virtual_list(\n view: Entity,\n id: impl Into,\n item_sizes: Rc>>,\n f: impl 'static + Fn(&mut V, Range, &mut Window, &mut Context) -> Vec,\n) -> VirtualList\nwhere\n R: IntoElement,\n V: Render,\n{\n virtual_list(view, id, Axis::Vertical, item_sizes, f)\n}\n\n/// Create a [`VirtualList`] in horizontal direction.\n///\n/// The `item_sizes` is the size of each column,\n/// only the `width` is used, `height` is ignored and VirtualList will measure the first item height.\n///\n/// See also [`v_virtual_list`]\n#[inline]\npub fn h_virtual_list(\n view: Entity,\n id: impl Into,\n item_sizes: Rc>>,\n f: impl 'static + Fn(&mut V, Range, &mut Window, &mut Context) -> Vec,\n) -> VirtualList\nwhere\n R: IntoElement,\n V: Render,\n{\n virtual_list(view, id, Axis::Horizontal, item_sizes, f)\n}\n\npub(crate) fn virtual_list(\n view: Entity,\n id: impl Into,\n axis: Axis,\n item_sizes: Rc>>,\n f: impl 'static + Fn(&mut V, Range, &mut Window, &mut Context) -> Vec,\n) -> VirtualList\nwhere\n R: IntoElement,\n V: Render,\n{\n let id: ElementId = id.into();\n let scroll_handle = VirtualListScrollHandle::new();\n let render_range = move |visible_range, window: &mut Window, cx: &mut App| {\n view.update(cx, |this, cx| {\n f(this, visible_range, window, cx)\n .into_iter()\n .map(|component| component.into_any_element())\n .collect()\n })\n };\n\n VirtualList {\n id: id.clone(),\n axis,\n base: div()\n .id(id)\n .size_full()\n .overflow_scroll()\n .track_scroll(&scroll_handle),\n scroll_handle,\n items_count: item_sizes.len(),\n item_sizes,\n render_items: Box::new(render_range),\n sizing_behavior: ListSizingBehavior::default(),\n }\n}\n\n/// VirtualList component for rendering a large number of differently sized items.\npub struct VirtualList {\n id: ElementId,\n axis: Axis,\n base: Stateful
,\n scroll_handle: VirtualListScrollHandle,\n items_count: usize,\n item_sizes: Rc>>,\n render_items: Box<\n dyn for<'a> Fn(Range, &'a mut Window, &'a mut App) -> SmallVec<[AnyElement; 64]>,\n >,\n sizing_behavior: ListSizingBehavior,\n}\n\nimpl Styled for VirtualList {\n fn style(&mut self) -> &mut StyleRefinement {\n self.base.style()\n }\n}\n\nimpl VirtualList {\n pub fn track_scroll(mut self, scroll_handle: &VirtualListScrollHandle) -> Self {\n self.base = self.base.track_scroll(&scroll_handle);\n self.scroll_handle = scroll_handle.clone();\n self\n }\n\n /// Set the sizing behavior for the list.\n pub fn with_sizing_behavior(mut self, behavior: ListSizingBehavior) -> Self {\n self.sizing_behavior = behavior;\n self\n }\n\n /// Specify for table.\n ///\n /// Table is special, because the `scroll_handle` is based on Table head (That is not a virtual list).\n pub(crate) fn with_scroll_handle(mut self, scroll_handle: &VirtualListScrollHandle) -> Self {\n self.base = div().id(self.id.clone()).size_full();\n self.scroll_handle = scroll_handle.clone();\n self\n }\n\n fn scroll_to_deferred_item(\n &self,\n scroll_offset: Point,\n items_bounds: &[Bounds],\n content_bounds: &Bounds,\n scroll_to_item: DeferredScrollToItem,\n ) -> Point {\n let Some(bounds) = items_bounds\n .get(scroll_to_item.item_index + scroll_to_item.offset)\n .cloned()\n else {\n return scroll_offset;\n };\n\n let mut scroll_offset = scroll_offset;\n match scroll_to_item.strategy {\n ScrollStrategy::Center => {\n if self.axis.is_vertical() {\n scroll_offset.y = content_bounds.top() + content_bounds.size.height.half()\n - bounds.top()\n - bounds.size.height.half()\n } else {\n scroll_offset.x = content_bounds.left() + content_bounds.size.width.half()\n - bounds.left()\n - bounds.size.width.half()\n }\n }\n _ => {\n // Ref: https://github.com/zed-industries/zed/blob/0d145289e0867a8d5d63e5e1397a5ca69c9d49c3/crates/gpui/src/elements/div.rs#L3026\n if self.axis.is_vertical() {\n if bounds.top() + scroll_offset.y < content_bounds.top() {\n scroll_offset.y = content_bounds.top() - bounds.top()\n } else if bounds.bottom() + scroll_offset.y > content_bounds.bottom() {\n scroll_offset.y = content_bounds.bottom() - bounds.bottom();\n }\n } else {\n if bounds.left() + scroll_offset.x < content_bounds.left() {\n scroll_offset.x = content_bounds.left() - bounds.left();\n } else if bounds.right() + scroll_offset.x > content_bounds.right() {\n scroll_offset.x = content_bounds.right() - bounds.right();\n }\n }\n }\n }\n self.scroll_handle.set_offset(scroll_offset);\n scroll_offset\n }\n\n /// Ref from: https://github.com/zed-industries/zed/blob/83f9f9d9e3f5914392cab9a09e3472711a1d7b38/crates/gpui/src/elements/uniform_list.rs#L660\n fn measure_item(\n &self,\n list_width: Option,\n window: &mut Window,\n cx: &mut App,\n ) -> Size {\n if self.items_count == 0 {\n return Size::default();\n }\n\n let item_ix = 0;\n let mut items = (self.render_items)(item_ix..item_ix + 1, window, cx);\n let Some(mut item_to_measure) = items.pop() else {\n return Size::default();\n };\n let available_space = size(\n list_width.map_or(AvailableSpace::MinContent, |width| {\n AvailableSpace::Definite(width)\n }),\n AvailableSpace::MinContent,\n );\n item_to_measure.layout_as_root(available_space, window, cx)\n }\n}\n\n/// Frame state used by the [VirtualItem].\npub struct VirtualListFrameState {\n /// Visible items to be painted.\n items: SmallVec<[AnyElement; 32]>,\n size_layout: ItemSizeLayout,\n}\n\n#[derive(Default, Clone)]\npub struct ItemSizeLayout {\n items_sizes: Rc>>,\n content_size: Size,\n sizes: Vec,\n origins: Vec,\n last_layout_bounds: Bounds,\n}\n\nimpl IntoElement for VirtualList {\n type Element = Self;\n\n fn into_element(self) -> Self::Element {\n self\n }\n}\n\nimpl Element for VirtualList {\n type RequestLayoutState = VirtualListFrameState;\n type PrepaintState = Option;\n\n fn id(&self) -> Option {\n Some(self.id.clone())\n }\n\n fn source_location(&self) -> Option<&'static std::panic::Location<'static>> {\n None\n }\n\n fn request_layout(\n &mut self,\n global_id: Option<&GlobalElementId>,\n inspector_id: Option<&gpui::InspectorElementId>,\n window: &mut Window,\n cx: &mut App,\n ) -> (gpui::LayoutId, Self::RequestLayoutState) {\n let rem_size = window.rem_size();\n let font_size = window.text_style().font_size.to_pixels(rem_size);\n let mut size_layout = ItemSizeLayout::default();\n let longest_item_size = self.measure_item(None, window, cx);\n\n let layout_id = self.base.interactivity().request_layout(\n global_id,\n inspector_id,\n window,\n cx,\n |style, window, cx| {\n size_layout = window.with_element_state(\n global_id.unwrap(),\n |state: Option, _window| {\n let mut state = state.unwrap_or(ItemSizeLayout::default());\n\n // Including the gap between items for calculate the item size\n let gap = style\n .gap\n .along(self.axis)\n .to_pixels(font_size.into(), rem_size);\n\n if state.items_sizes != self.item_sizes {\n state.items_sizes = self.item_sizes.clone();\n // Prepare each item's size by axis\n state.sizes = self\n .item_sizes\n .iter()\n .enumerate()\n .map(|(i, size)| {\n let size = size.along(self.axis);\n if i + 1 == self.items_count {\n size\n } else {\n size + gap\n }\n })\n .collect::>();\n\n // Prepare each item's origin by axis\n state.origins = state\n .sizes\n .iter()\n .scan(px(0.), |cumulative, size| match self.axis {\n Axis::Horizontal => {\n let x = *cumulative;\n *cumulative += *size;\n Some(x)\n }\n Axis::Vertical => {\n let y = *cumulative;\n *cumulative += *size;\n Some(y)\n }\n })\n .collect::>();\n\n state.content_size = if self.axis.is_horizontal() {\n Size {\n width: px(state\n .sizes\n .iter()\n .map(|size| size.as_f32())\n .sum::()),\n height: longest_item_size.height,\n }\n } else {\n Size {\n width: longest_item_size.width,\n height: px(state\n .sizes\n .iter()\n .map(|size| size.as_f32())\n .sum::()),\n }\n };\n }\n\n (state.clone(), state)\n },\n );\n\n let axis = self.axis;\n let layout_id =\n match self.sizing_behavior {\n ListSizingBehavior::Infer => {\n window.with_text_style(style.text_style().cloned(), |window| {\n let size_layout = size_layout.clone();\n\n window.request_measured_layout(style, {\n move |known_dimensions, available_space, _, _| {\n let mut size = Size::default();\n if axis.is_horizontal() {\n size.width = known_dimensions.width.unwrap_or(\n match available_space.width {\n AvailableSpace::Definite(x) => x,\n AvailableSpace::MinContent\n | AvailableSpace::MaxContent => {\n size_layout.content_size.width\n }\n },\n );\n size.height = known_dimensions.width.unwrap_or(\n match available_space.height {\n AvailableSpace::Definite(x) => x,\n AvailableSpace::MinContent\n | AvailableSpace::MaxContent => {\n size_layout.content_size.height\n }\n },\n );\n } else {\n size.width = known_dimensions.width.unwrap_or(\n match available_space.width {\n AvailableSpace::Definite(x) => x,\n AvailableSpace::MinContent\n | AvailableSpace::MaxContent => {\n size_layout.content_size.width\n }\n },\n );\n size.height = known_dimensions.height.unwrap_or(\n match available_space.height {\n AvailableSpace::Definite(x) => x,\n AvailableSpace::MinContent\n | AvailableSpace::MaxContent => {\n size_layout.content_size.height\n }\n },\n );\n }\n\n size\n }\n })\n })\n }\n ListSizingBehavior::Auto => window\n .with_text_style(style.text_style().cloned(), |window| {\n window.request_layout(style, None, cx)\n }),\n };\n\n layout_id\n },\n );\n\n (\n layout_id,\n VirtualListFrameState {\n items: SmallVec::new(),\n size_layout,\n },\n )\n }\n\n fn prepaint(\n &mut self,\n global_id: Option<&GlobalElementId>,\n inspector_id: Option<&gpui::InspectorElementId>,\n bounds: Bounds,\n layout: &mut Self::RequestLayoutState,\n window: &mut Window,\n cx: &mut App,\n ) -> Self::PrepaintState {\n layout.size_layout.last_layout_bounds = bounds;\n\n let style = self\n .base\n .interactivity()\n .compute_style(global_id, None, window, cx);\n let border_widths = style.border_widths.to_pixels(window.rem_size());\n let paddings = style\n .padding\n .to_pixels(bounds.size.into(), window.rem_size());\n\n let item_sizes = &layout.size_layout.sizes;\n let item_origins = &layout.size_layout.origins;\n\n let content_bounds = Bounds::from_corners(\n bounds.origin\n + point(\n border_widths.left + paddings.left,\n border_widths.top + paddings.top,\n ),\n bounds.bottom_right()\n - point(\n border_widths.right + paddings.right,\n border_widths.bottom + paddings.bottom,\n ),\n );\n\n // Update scroll_handle with the item bounds\n let items_bounds = item_origins\n .iter()\n .enumerate()\n .map(|(i, &origin)| {\n let item_size = item_sizes[i];\n\n Bounds {\n origin: match self.axis {\n Axis::Horizontal => point(content_bounds.left() + origin, px(0.)),\n Axis::Vertical => point(px(0.), content_bounds.top() + origin),\n },\n size: match self.axis {\n Axis::Horizontal => size(item_size, content_bounds.size.height),\n Axis::Vertical => size(content_bounds.size.width, item_size),\n },\n }\n })\n .collect::>();\n\n let axis = self.axis;\n\n let mut scroll_state = self.scroll_handle.state.borrow_mut();\n scroll_state.axis = axis;\n scroll_state.items_count = self.items_count;\n\n let mut scroll_offset = self.scroll_handle.offset();\n if let Some(scroll_to_item) = scroll_state.deferred_scroll_to_item.take() {\n scroll_offset = self.scroll_to_deferred_item(\n scroll_offset,\n &items_bounds,\n &content_bounds,\n scroll_to_item,\n );\n }\n\n scroll_offset = scroll_offset\n .max(&point(\n content_bounds.size.width - layout.size_layout.content_size.width,\n content_bounds.size.height - layout.size_layout.content_size.height,\n ))\n .min(&point(px(0.), px(0.)));\n if scroll_offset != self.scroll_handle.offset() {\n self.scroll_handle.set_offset(scroll_offset);\n }\n\n self.base.interactivity().prepaint(\n global_id,\n inspector_id,\n bounds,\n layout.size_layout.content_size,\n window,\n cx,\n |_style, _, hitbox, window, cx| {\n if self.items_count > 0 {\n let min_scroll_offset = content_bounds.size.along(self.axis)\n - layout.size_layout.content_size.along(self.axis);\n\n let is_scrolled = !scroll_offset.along(self.axis).is_zero();\n if is_scrolled {\n match self.axis {\n Axis::Horizontal if scroll_offset.x < min_scroll_offset => {\n scroll_offset.x = min_scroll_offset;\n self.scroll_handle.set_offset(scroll_offset);\n }\n Axis::Vertical if scroll_offset.y < min_scroll_offset => {\n scroll_offset.y = min_scroll_offset;\n self.scroll_handle.set_offset(scroll_offset);\n }\n _ => {}\n }\n }\n\n let (first_visible_element_ix, last_visible_element_ix) = match self.axis {\n Axis::Horizontal => {\n let mut cumulative_size = px(0.);\n let mut first_visible_element_ix = 0;\n for (i, &size) in item_sizes.iter().enumerate() {\n cumulative_size += size;\n if cumulative_size > -(scroll_offset.x + paddings.left) {\n first_visible_element_ix = i;\n break;\n }\n }\n\n cumulative_size = px(0.);\n let mut last_visible_element_ix = 0;\n for (i, &size) in item_sizes.iter().enumerate() {\n cumulative_size += size;\n if cumulative_size > (-scroll_offset.x + content_bounds.size.width)\n {\n last_visible_element_ix = i + 1;\n break;\n }\n }\n if last_visible_element_ix == 0 {\n last_visible_element_ix = self.items_count;\n } else {\n last_visible_element_ix += 1;\n }\n (first_visible_element_ix, last_visible_element_ix)\n }\n Axis::Vertical => {\n let mut cumulative_size = px(0.);\n let mut first_visible_element_ix = 0;\n for (i, &size) in item_sizes.iter().enumerate() {\n cumulative_size += size;\n if cumulative_size > -(scroll_offset.y + paddings.top) {\n first_visible_element_ix = i;\n break;\n }\n }\n\n cumulative_size = px(0.);\n let mut last_visible_element_ix = 0;\n for (i, &size) in item_sizes.iter().enumerate() {\n cumulative_size += size;\n if cumulative_size > (-scroll_offset.y + content_bounds.size.height)\n {\n last_visible_element_ix = i + 1;\n break;\n }\n }\n if last_visible_element_ix == 0 {\n last_visible_element_ix = self.items_count;\n } else {\n last_visible_element_ix += 1;\n }\n (first_visible_element_ix, last_visible_element_ix)\n }\n };\n\n let visible_range = first_visible_element_ix\n ..cmp::min(last_visible_element_ix, self.items_count);\n\n let items = (self.render_items)(visible_range.clone(), window, cx);\n\n let content_mask = ContentMask { bounds };\n window.with_content_mask(Some(content_mask), |window| {\n for (mut item, ix) in items.into_iter().zip(visible_range.clone()) {\n let item_origin = match self.axis {\n Axis::Horizontal => {\n content_bounds.origin\n + point(item_origins[ix] + scroll_offset.x, scroll_offset.y)\n }\n Axis::Vertical => {\n content_bounds.origin\n + point(scroll_offset.x, item_origins[ix] + scroll_offset.y)\n }\n };\n\n let available_space = match self.axis {\n Axis::Horizontal => size(\n AvailableSpace::Definite(item_sizes[ix]),\n AvailableSpace::Definite(content_bounds.size.height),\n ),\n Axis::Vertical => size(\n AvailableSpace::Definite(content_bounds.size.width),\n AvailableSpace::Definite(item_sizes[ix]),\n ),\n };\n\n item.layout_as_root(available_space, window, cx);\n item.prepaint_at(item_origin, window, cx);\n layout.items.push(item);\n }\n });\n }\n\n hitbox\n },\n )\n }\n\n fn paint(\n &mut self,\n global_id: Option<&GlobalElementId>,\n inspector_id: Option<&gpui::InspectorElementId>,\n bounds: Bounds,\n layout: &mut Self::RequestLayoutState,\n hitbox: &mut Self::PrepaintState,\n window: &mut Window,\n cx: &mut App,\n ) {\n self.base.interactivity().paint(\n global_id,\n inspector_id,\n bounds,\n hitbox.as_ref(),\n window,\n cx,\n |_, window, cx| {\n for item in &mut layout.items {\n item.paint(window, cx);\n }\n },\n )\n }\n}\n" }, { "path": "crates/ui/src/window_border.rs", "content": "// From:\n// https://github.com/zed-industries/zed/blob/56daba28d40301ee4c05546fadb691d070b7b2b6/crates/gpui/examples/window_shadow.rs\nuse gpui::{\n AnyElement, App, Bounds, CursorStyle, Decorations, Edges, HitboxBehavior, Hsla,\n InteractiveElement as _, IntoElement, MouseButton, ParentElement, Pixels, Point, RenderOnce,\n ResizeEdge, Size, Styled as _, Window, canvas, div, point, prelude::FluentBuilder as _, px,\n};\n\nuse crate::ActiveTheme;\n\n#[cfg(not(target_os = \"linux\"))]\npub(crate) const SHADOW_SIZE: Pixels = px(0.0);\n#[cfg(target_os = \"linux\")]\npub(crate) const SHADOW_SIZE: Pixels = px(12.0);\nconst BORDER_SIZE: Pixels = px(1.0);\npub(crate) const BORDER_RADIUS: Pixels = px(0.0);\n\n/// Create a new window border.\npub fn window_border() -> WindowBorder {\n WindowBorder::new()\n}\n\n/// Window border use to render a custom window border and shadow for Linux.\n#[derive(IntoElement)]\npub struct WindowBorder {\n shadow_size: Pixels,\n children: Vec,\n}\n\nimpl Default for WindowBorder {\n fn default() -> Self {\n Self {\n shadow_size: SHADOW_SIZE,\n children: Vec::new(),\n }\n }\n}\n\nimpl WindowBorder {\n pub fn new() -> Self {\n Self::default()\n }\n\n /// Set the shadow size for typical Linux client-side decorations.\n ///\n /// Default: [`SHADOW_SIZE`]\n pub fn shadow_size(mut self, size: impl Into) -> Self {\n self.shadow_size = size.into();\n self\n }\n}\n\n/// Get the window paddings.\npub fn window_paddings(window: &Window) -> Edges {\n let shadow_size = window.client_inset().unwrap_or(SHADOW_SIZE);\n match window.window_decorations() {\n Decorations::Server => Edges::all(px(0.0)),\n Decorations::Client { tiling } => {\n let mut paddings = Edges::all(shadow_size);\n if tiling.top {\n paddings.top = px(0.0);\n }\n if tiling.bottom {\n paddings.bottom = px(0.0);\n }\n if tiling.left {\n paddings.left = px(0.0);\n }\n if tiling.right {\n paddings.right = px(0.0);\n }\n paddings\n }\n }\n}\n\nimpl ParentElement for WindowBorder {\n fn extend(&mut self, elements: impl IntoIterator) {\n self.children.extend(elements);\n }\n}\n\nimpl RenderOnce for WindowBorder {\n fn render(self, window: &mut Window, cx: &mut App) -> impl IntoElement {\n let decorations = window.window_decorations();\n let shadow_size = match decorations {\n Decorations::Client { tiling }\n if tiling.top && tiling.bottom && tiling.left && tiling.right =>\n {\n px(0.0)\n }\n _ => self.shadow_size,\n };\n window.set_client_inset(shadow_size);\n\n div()\n .id(\"window-backdrop\")\n .bg(gpui::transparent_black())\n .map(|div| match decorations {\n Decorations::Server => div,\n Decorations::Client { tiling, .. } => div\n .bg(gpui::transparent_black())\n .child(\n canvas(\n |_bounds, window, _| {\n window.insert_hitbox(\n Bounds::new(\n point(px(0.0), px(0.0)),\n window.window_bounds().get_bounds().size,\n ),\n HitboxBehavior::Normal,\n )\n },\n move |_bounds, hitbox, window, _| {\n let mouse = window.mouse_position();\n let size = window.window_bounds().get_bounds().size;\n let Decorations::Client { tiling } = window.window_decorations() else {\n return;\n };\n if tiling.top && tiling.bottom && tiling.left && tiling.right {\n return;\n }\n let Some(edge) = resize_edge(mouse, shadow_size, size) else {\n return;\n };\n window.set_cursor_style(\n match edge {\n ResizeEdge::Top | ResizeEdge::Bottom => {\n CursorStyle::ResizeUpDown\n }\n ResizeEdge::Left | ResizeEdge::Right => {\n CursorStyle::ResizeLeftRight\n }\n ResizeEdge::TopLeft | ResizeEdge::BottomRight => {\n CursorStyle::ResizeUpLeftDownRight\n }\n ResizeEdge::TopRight | ResizeEdge::BottomLeft => {\n CursorStyle::ResizeUpRightDownLeft\n }\n },\n &hitbox,\n );\n },\n )\n .size_full()\n .absolute(),\n )\n .when(!(tiling.top || tiling.right), |div| {\n div.rounded_tr(BORDER_RADIUS)\n })\n .when(!(tiling.top || tiling.left), |div| {\n div.rounded_tl(BORDER_RADIUS)\n })\n .when(!tiling.top, |div| div.pt(shadow_size))\n .when(!tiling.bottom, |div| div.pb(shadow_size))\n .when(!tiling.left, |div| div.pl(shadow_size))\n .when(!tiling.right, |div| div.pr(shadow_size))\n .on_mouse_down(MouseButton::Left, move |_, window, _| {\n let Decorations::Client { tiling } = window.window_decorations() else {\n return;\n };\n if tiling.top && tiling.bottom && tiling.left && tiling.right {\n return;\n }\n let size = window.window_bounds().get_bounds().size;\n let pos = window.mouse_position();\n\n match resize_edge(pos, shadow_size, size) {\n Some(edge) => window.start_window_resize(edge),\n None => {}\n };\n }),\n })\n .size_full()\n .child(\n div()\n .cursor(CursorStyle::default())\n .map(|div| match decorations {\n Decorations::Server => div,\n Decorations::Client { tiling } => div\n .when(!(tiling.top || tiling.right), |div| {\n div.rounded_tr(BORDER_RADIUS)\n })\n .when(!(tiling.top || tiling.left), |div| {\n div.rounded_tl(BORDER_RADIUS)\n })\n .border_color(cx.theme().window_border)\n .when(!tiling.top, |div| div.border_t(BORDER_SIZE))\n .when(!tiling.bottom, |div| div.border_b(BORDER_SIZE))\n .when(!tiling.left, |div| div.border_l(BORDER_SIZE))\n .when(!tiling.right, |div| div.border_r(BORDER_SIZE))\n .when(!tiling.is_tiled(), |div| {\n div.shadow(vec![gpui::BoxShadow {\n color: Hsla {\n h: 0.,\n s: 0.,\n l: 0.,\n a: 0.3,\n },\n blur_radius: shadow_size / 2.,\n spread_radius: px(0.),\n offset: point(px(0.0), px(0.0)),\n }])\n }),\n })\n .on_mouse_move(|_e, _, cx| {\n cx.stop_propagation();\n })\n .bg(gpui::transparent_black())\n .size_full()\n .children(self.children),\n )\n }\n}\n\nfn resize_edge(pos: Point, shadow_size: Pixels, size: Size) -> Option {\n let edge = if pos.y < shadow_size && pos.x < shadow_size {\n ResizeEdge::TopLeft\n } else if pos.y < shadow_size && pos.x > size.width - shadow_size {\n ResizeEdge::TopRight\n } else if pos.y < shadow_size {\n ResizeEdge::Top\n } else if pos.y > size.height - shadow_size && pos.x < shadow_size {\n ResizeEdge::BottomLeft\n } else if pos.y > size.height - shadow_size && pos.x > size.width - shadow_size {\n ResizeEdge::BottomRight\n } else if pos.y > size.height - shadow_size {\n ResizeEdge::Bottom\n } else if pos.x < shadow_size {\n ResizeEdge::Left\n } else if pos.x > size.width - shadow_size {\n ResizeEdge::Right\n } else {\n return None;\n };\n Some(edge)\n}\n" }, { "path": "crates/ui/src/window_ext.rs", "content": "use crate::{\n Placement, Root,\n dialog::{AlertDialog, Dialog},\n input::InputState,\n notification::Notification,\n sheet::Sheet,\n};\nuse gpui::{App, Entity, Window};\nuse std::rc::Rc;\n\n/// Extension trait for [`Window`] to add dialog, sheet .. functionality.\npub trait WindowExt: Sized {\n /// Opens a Sheet at right placement.\n fn open_sheet(&mut self, cx: &mut App, build: F)\n where\n F: Fn(Sheet, &mut Window, &mut App) -> Sheet + 'static;\n\n /// Opens a Sheet at the given placement.\n fn open_sheet_at(&mut self, placement: Placement, cx: &mut App, build: F)\n where\n F: Fn(Sheet, &mut Window, &mut App) -> Sheet + 'static;\n\n /// Return true, if there is an active Sheet.\n fn has_active_sheet(&mut self, cx: &mut App) -> bool;\n\n /// Closes the active Sheet.\n fn close_sheet(&mut self, cx: &mut App);\n\n /// Opens a Dialog.\n fn open_dialog(&mut self, cx: &mut App, build: F)\n where\n F: Fn(Dialog, &mut Window, &mut App) -> Dialog + 'static;\n\n /// Opens an AlertDialog.\n ///\n /// This is a convenience method for opening an alert dialog with opinionated defaults.\n /// The footer buttons are center-aligned and include an icon based on the variant.\n ///\n /// # Examples\n ///\n /// ```ignore\n /// use gpui_component::{AlertDialog, alert::AlertVariant};\n ///\n /// window.open_alert_dialog(cx, |alert, _, _| {\n /// alert.warning()\n /// .title(\"Unsaved Changes\")\n /// .description(\"You have unsaved changes. Are you sure you want to leave?\")\n /// .show_cancel(true)\n /// });\n /// ```\n fn open_alert_dialog(&mut self, cx: &mut App, build: F)\n where\n F: Fn(AlertDialog, &mut Window, &mut App) -> AlertDialog + 'static;\n\n /// Return true, if there is an active Dialog.\n fn has_active_dialog(&mut self, cx: &mut App) -> bool;\n\n /// Closes the last active Dialog.\n fn close_dialog(&mut self, cx: &mut App);\n\n /// Closes all active Dialogs.\n fn close_all_dialogs(&mut self, cx: &mut App);\n\n /// Pushes a notification to the notification list.\n fn push_notification(&mut self, note: impl Into, cx: &mut App);\n\n /// Removes the notification with the given id.\n fn remove_notification(&mut self, cx: &mut App);\n\n /// Clears all notifications.\n fn clear_notifications(&mut self, cx: &mut App);\n\n /// Returns number of notifications.\n fn notifications(&mut self, cx: &mut App) -> Rc>>;\n\n /// Return current focused Input entity.\n fn focused_input(&mut self, cx: &mut App) -> Option>;\n /// Returns true if there is a focused Input entity.\n fn has_focused_input(&mut self, cx: &mut App) -> bool;\n}\n\nimpl WindowExt for Window {\n #[inline]\n fn open_sheet(&mut self, cx: &mut App, build: F)\n where\n F: Fn(Sheet, &mut Window, &mut App) -> Sheet + 'static,\n {\n self.open_sheet_at(Placement::Right, cx, build)\n }\n\n #[inline]\n fn open_sheet_at(&mut self, placement: Placement, cx: &mut App, build: F)\n where\n F: Fn(Sheet, &mut Window, &mut App) -> Sheet + 'static,\n {\n Root::update(self, cx, move |root, window, cx| {\n root.open_sheet_at(placement, build, window, cx);\n })\n }\n\n #[inline]\n fn has_active_sheet(&mut self, cx: &mut App) -> bool {\n Root::read(self, cx).active_sheet.is_some()\n }\n\n #[inline]\n fn close_sheet(&mut self, cx: &mut App) {\n Root::update(self, cx, |root, window, cx| {\n root.close_sheet(window, cx);\n })\n }\n\n #[inline]\n fn open_dialog(&mut self, cx: &mut App, build: F)\n where\n F: Fn(Dialog, &mut Window, &mut App) -> Dialog + 'static,\n {\n Root::update(self, cx, move |root, window, cx| {\n root.open_dialog(build, window, cx);\n })\n }\n\n #[inline]\n fn open_alert_dialog(&mut self, cx: &mut App, build: F)\n where\n F: Fn(AlertDialog, &mut Window, &mut App) -> AlertDialog + 'static,\n {\n self.open_dialog(cx, move |_, window, cx| {\n build(AlertDialog::new(cx), window, cx).into_dialog(window, cx)\n })\n }\n\n #[inline]\n fn has_active_dialog(&mut self, cx: &mut App) -> bool {\n Root::read(self, cx).active_dialogs.len() > 0\n }\n\n #[inline]\n fn close_dialog(&mut self, cx: &mut App) {\n Root::update(self, cx, |root, window, cx| {\n root.close_dialog(window, cx);\n })\n }\n\n #[inline]\n fn close_all_dialogs(&mut self, cx: &mut App) {\n Root::update(self, cx, |root, window, cx| {\n root.close_all_dialogs(window, cx);\n })\n }\n\n #[inline]\n fn push_notification(&mut self, note: impl Into, cx: &mut App) {\n let note = note.into();\n Root::update(self, cx, |root, window, cx| {\n root.push_notification(note, window, cx);\n })\n }\n\n #[inline]\n fn remove_notification(&mut self, cx: &mut App) {\n Root::update(self, cx, |root, window, cx| {\n root.remove_notification::(window, cx);\n })\n }\n\n #[inline]\n fn clear_notifications(&mut self, cx: &mut App) {\n Root::update(self, cx, |root, window, cx| {\n root.clear_notifications(window, cx);\n })\n }\n\n #[inline]\n fn notifications(&mut self, cx: &mut App) -> Rc>> {\n Rc::new(Root::read(self, cx).notification.read(cx).notifications())\n }\n\n #[inline]\n fn has_focused_input(&mut self, cx: &mut App) -> bool {\n Root::read(self, cx).focused_input.is_some()\n }\n\n #[inline]\n fn focused_input(&mut self, cx: &mut App) -> Option> {\n Root::read(self, cx).focused_input.clone()\n }\n}\n" }, { "path": "crates/webview/Cargo.toml", "content": "[package]\nname = \"gpui-wry\"\ndescription = \"WebView support for GPUI, based on Wry.\"\nkeywords = [\"webview\", \"gpui\",\"wry\"]\nlicense = \"Apache-2.0\"\ndocumentation = \"https://docs.rs/gpui-component\"\nhomepage = \"https://longbridge.github.io/gpui-component\"\nrepository = \"https://github.com/longbridge/gpui-component/tree/main/crates/webview\"\nreadme = \"README.md\"\nedition.workspace = true\npublish = true\nversion = \"0.5.0\"\n\n[features]\ninspector = [\"wry/devtools\"]\n\n[lib]\ndoctest = false\n\n[dependencies]\nanyhow.workspace = true\ngpui.workspace = true\nwry = { version = \"0.53.3\", package = \"lb-wry\" }\n" }, { "path": "crates/webview/README.md", "content": "# Wry for GPUI\n\nA webview supports for GPUI, based on [Wry](https://github.com/tauri-apps/wry).\n\nThis still a experimental with limited features, please file issues for any bugs or missing features.\n\n- The WebView will render on top of the GPUI window, any GPUI elements behind the WebView bounds will be covered.\n- Only supports macOS and Windows currently.\n\nSo, we recommend using the webview in a separate window or in a Popup layer.\n\n## Run Example\n\nIn the root of the repository, run:\n\n```\ncargo run -p webview\n```\n\n## License\n\nApache-2.0\n" }, { "path": "crates/webview/src/lib.rs", "content": "use std::{ops::Deref, rc::Rc};\n\nuse wry::{\n Rect,\n dpi::{self, LogicalSize},\n};\n\nuse gpui::{\n App, Bounds, ContentMask, DismissEvent, Element, ElementId, Entity, EventEmitter, FocusHandle,\n Focusable, GlobalElementId, Hitbox, InteractiveElement, IntoElement, LayoutId, MouseDownEvent,\n ParentElement as _, Pixels, Render, Size, Style, Styled as _, Window, canvas, div,\n};\n\n/// A webview based on wry WebView.\n///\n/// [experimental]\npub struct WebView {\n focus_handle: FocusHandle,\n webview: Rc,\n visible: bool,\n bounds: Bounds,\n}\n\nimpl Drop for WebView {\n fn drop(&mut self) {\n self.hide();\n }\n}\n\nimpl WebView {\n /// Create a new WebView from a wry WebView.\n pub fn new(webview: wry::WebView, _: &mut Window, cx: &mut App) -> Self {\n let _ = webview.set_bounds(Rect::default());\n\n Self {\n focus_handle: cx.focus_handle(),\n visible: true,\n bounds: Bounds::default(),\n webview: Rc::new(webview),\n }\n }\n\n /// Show the webview.\n pub fn show(&mut self) {\n let _ = self.webview.set_visible(true);\n self.visible = true;\n }\n\n /// Hide the webview.\n pub fn hide(&mut self) {\n _ = self.webview.focus_parent();\n _ = self.webview.set_visible(false);\n self.visible = false;\n }\n\n /// Get whether the webview is visible.\n pub fn visible(&self) -> bool {\n self.visible\n }\n\n /// Get the current bounds of the webview.\n pub fn bounds(&self) -> Bounds {\n self.bounds\n }\n\n /// Go back in the webview history.\n pub fn back(&mut self) -> anyhow::Result<()> {\n Ok(self.webview.evaluate_script(\"history.back();\")?)\n }\n\n /// Load a URL in the webview.\n pub fn load_url(&mut self, url: &str) {\n let _ = self.webview.load_url(url);\n }\n\n /// Get the raw wry webview.\n pub fn raw(&self) -> &wry::WebView {\n &self.webview\n }\n}\n\nimpl Deref for WebView {\n type Target = wry::WebView;\n\n fn deref(&self) -> &Self::Target {\n &self.webview\n }\n}\n\nimpl Focusable for WebView {\n fn focus_handle(&self, _cx: &gpui::App) -> FocusHandle {\n self.focus_handle.clone()\n }\n}\n\nimpl EventEmitter for WebView {}\n\nimpl Render for WebView {\n fn render(\n &mut self,\n window: &mut gpui::Window,\n cx: &mut gpui::Context,\n ) -> impl IntoElement {\n let view = cx.entity().clone();\n\n div()\n .track_focus(&self.focus_handle)\n .size_full()\n .child({\n let view = cx.entity().clone();\n canvas(\n move |bounds, _, cx| view.update(cx, |r, _| r.bounds = bounds),\n |_, _, _, _| {},\n )\n .absolute()\n .size_full()\n })\n .child(WebViewElement::new(self.webview.clone(), view, window, cx))\n }\n}\n\n/// A webview element can display a wry webview.\npub struct WebViewElement {\n parent: Entity,\n view: Rc,\n}\n\nimpl WebViewElement {\n /// Create a new webview element from a wry WebView.\n pub fn new(\n view: Rc,\n parent: Entity,\n _window: &mut Window,\n _cx: &mut App,\n ) -> Self {\n Self { view, parent }\n }\n}\n\nimpl IntoElement for WebViewElement {\n type Element = WebViewElement;\n\n fn into_element(self) -> Self::Element {\n self\n }\n}\n\nimpl Element for WebViewElement {\n type RequestLayoutState = ();\n type PrepaintState = Option;\n\n fn id(&self) -> Option {\n None\n }\n\n fn source_location(&self) -> Option<&'static std::panic::Location<'static>> {\n None\n }\n\n fn request_layout(\n &mut self,\n _: Option<&GlobalElementId>,\n _: Option<&gpui::InspectorElementId>,\n window: &mut Window,\n cx: &mut App,\n ) -> (LayoutId, Self::RequestLayoutState) {\n let style = Style {\n size: Size::full(),\n flex_shrink: 1.,\n ..Default::default()\n };\n\n // If the parent view is no longer visible, we don't need to layout the webview\n let id = window.request_layout(style, [], cx);\n (id, ())\n }\n\n fn prepaint(\n &mut self,\n _: Option<&GlobalElementId>,\n _: Option<&gpui::InspectorElementId>,\n bounds: Bounds,\n _: &mut Self::RequestLayoutState,\n window: &mut Window,\n cx: &mut App,\n ) -> Self::PrepaintState {\n if !self.parent.read(cx).visible() {\n return None;\n }\n\n let _ = self.view.set_bounds(Rect {\n size: dpi::Size::Logical(LogicalSize {\n width: bounds.size.width.into(),\n height: bounds.size.height.into(),\n }),\n position: dpi::Position::Logical(dpi::LogicalPosition::new(\n bounds.origin.x.into(),\n bounds.origin.y.into(),\n )),\n });\n\n // Create a hitbox to handle mouse event\n Some(window.insert_hitbox(bounds, gpui::HitboxBehavior::Normal))\n }\n\n fn paint(\n &mut self,\n _: Option<&GlobalElementId>,\n _: Option<&gpui::InspectorElementId>,\n bounds: Bounds,\n _: &mut Self::RequestLayoutState,\n hitbox: &mut Self::PrepaintState,\n window: &mut Window,\n _: &mut App,\n ) {\n let bounds = hitbox.clone().map(|h| h.bounds).unwrap_or(bounds);\n window.with_content_mask(Some(ContentMask { bounds }), |window| {\n let webview = self.view.clone();\n window.on_mouse_event(move |event: &MouseDownEvent, _, _, _| {\n if !bounds.contains(&event.position) {\n // Click white space to blur the input focus\n let _ = webview.focus_parent();\n }\n });\n });\n }\n}\n" }, { "path": "docs/.gitignore", "content": ".vitepress/cache\n.vitepress/dist\nbun.lockb\n" }, { "path": "docs/.vitepress/config.mts", "content": "import { defineConfig } from \"vitepress\";\nimport type { UserConfig } from \"vitepress\";\nimport { generateSidebar } from \"vitepress-sidebar\";\nimport llmstxt from \"vitepress-plugin-llms\";\nimport tailwindcss from \"@tailwindcss/vite\";\nimport { lightTheme, darkTheme } from \"./language\";\nimport { ViteToml } from \"vite-plugin-toml\";\n\n/**\n * https://github.com/jooy2/vitepress-sidebar\n */\nconst sidebar = generateSidebar([\n {\n scanStartPath: \"/docs/\",\n rootGroupText: \"Introduction\",\n collapsed: false,\n useTitleFromFrontmatter: true,\n useTitleFromFileHeading: true,\n sortMenusByFrontmatterOrder: true,\n includeRootIndexFile: false,\n },\n]);\n\n// https://vitepress.dev/reference/site-config\nconst config: UserConfig = {\n title: \"GPUI Component\",\n base: \"/gpui-component/\",\n description:\n \"Rust GUI components for building fantastic cross-platform desktop application by using GPUI.\",\n cleanUrls: true,\n head: [\n [\n \"link\",\n {\n rel: \"icon\",\n href: \"/gpui-component/logo.svg\",\n media: \"(prefers-color-scheme: light)\",\n },\n ],\n [\n \"link\",\n {\n rel: \"icon\",\n href: \"/gpui-component/logo-dark.svg\",\n media: \"(prefers-color-scheme: dark)\",\n },\n ],\n ],\n vite: {\n plugins: [llmstxt(), tailwindcss(), ViteToml()],\n },\n themeConfig: {\n logo: {\n light: \"/logo.svg\",\n dark: \"/logo-dark.svg\",\n },\n footer: {\n message: `GPUI Component is an open source project under the Apache-2.0 License,\n developed by Longbridge.`,\n copyright: `\n GPUI\n |\n Gallery\n |\n Contributors\n |\n Skills\n |\n llms-full.txt\n |\n Report Bug\n |\n Discussion\n
\n Icon resources are used Lucide,\n Isocons.\n `,\n },\n // https://vitepress.dev/reference/default-theme-config\n nav: [\n { text: \"Home\", link: \"/\" },\n { text: \"Getting Started\", link: \"/docs/getting-started\" },\n { text: \"Components\", link: \"/docs/components\" },\n { text: \"Gallery\", link: \"/gallery/\", target: \"_blank\" },\n { text: \"API Doc\", link: \"https://docs.rs/gpui-component\" },\n {\n text: \"Resources\",\n items: [\n {\n text: \"Contributors\",\n link: \"/contributors\",\n },\n {\n text: \"Releases\",\n link: \"https://github.com/longbridge/gpui-component/releases\",\n },\n {\n text: \"Issues\",\n link: \"https://github.com/longbridge/gpui-component/issues\",\n },\n {\n text: \"Discussion\",\n link: \"https://github.com/longbridge/gpui-component/discussions\",\n },\n ],\n },\n {\n component: \"GitHubStar\",\n },\n ],\n\n sidebar: sidebar as any,\n\n socialLinks: null,\n editLink: {\n pattern:\n \"https://github.com/longbridge/gpui-component/edit/main/docs/:path\",\n },\n search: {\n provider: \"local\",\n },\n },\n markdown: {\n math: true,\n defaultHighlightLang: \"rs\",\n theme: {\n light: lightTheme,\n dark: darkTheme,\n },\n },\n};\n\nexport default defineConfig(config);\n" }, { "path": "docs/.vitepress/language.ts", "content": "import { readFileSync } from \"fs\";\n\nconst lightTheme = JSON.parse(readFileSync(\"src/light.theme.json\").toString());\nconst darkTheme = JSON.parse(readFileSync(\"src/dark.theme.json\").toString());\n\nexport { darkTheme, lightTheme };\n" }, { "path": "docs/.vitepress/theme/components/GitHubStar.vue", "content": "\n\n\n\n\n" }, { "path": "docs/.vitepress/theme/index.ts", "content": "// https://vitepress.dev/guide/custom-theme\nimport { h } from \"vue\";\nimport type { Theme } from \"vitepress\";\nimport DefaultTheme from \"vitepress/theme\";\nimport \"./style.css\";\nimport GitHubStar from \"./components/GitHubStar.vue\";\nimport config from \"../../../crates/ui/Cargo.toml\";\n\n/** @type {import('vitepress').Theme} */\nexport default {\n extends: DefaultTheme,\n Layout: () => {\n return h(DefaultTheme.Layout, null, {\n // https://vitepress.dev/guide/extending-default-theme#layout-slots\n });\n },\n enhanceApp({ app, router, siteData }) {\n // ...\n app.component(\"GitHubStar\", GitHubStar);\n\n app.config.globalProperties.GPUI_VERSION = \"0.2.2\";\n app.config.globalProperties.VERSION = config.package.version;\n },\n} satisfies Theme;\n" }, { "path": "docs/.vitepress/theme/style.css", "content": "/**\n * Customize default theme styling by overriding CSS variables:\n * https://github.com/vuejs/vitepress/blob/main/src/client/theme-default/styles/vars.css\n */\n\n@import \"tailwindcss\";\n@custom-variant dark (&:where(.dark, .dark *));\n\n:root {\n --radius: 0.875rem;\n --background: oklch(1 0 0);\n --foreground: oklch(0.145 0 0);\n --card: oklch(1 0 0);\n --card-foreground: oklch(0.145 0 0);\n --popover: oklch(1 0 0);\n --popover-foreground: oklch(0.145 0 0);\n --primary: oklch(0.205 0 0);\n --primary-foreground: oklch(0.985 0 0);\n --secondary: oklch(0.97 0 0);\n --secondary-foreground: oklch(0.205 0 0);\n --muted: oklch(0.97 0 0);\n --muted-foreground: oklch(0.556 0 0);\n --accent: oklch(0.97 0 0);\n --accent-foreground: oklch(0.205 0 0);\n --destructive: oklch(0.577 0.245 27.325);\n --border: oklch(0.922 0 0);\n --input: oklch(0.922 0 0);\n --ring: oklch(0.708 0 0);\n --chart-1: oklch(0.646 0.222 41.116);\n --chart-2: oklch(0.6 0.118 184.704);\n --chart-3: oklch(0.398 0.07 227.392);\n --chart-4: oklch(0.828 0.189 84.429);\n --chart-5: oklch(0.769 0.188 70.08);\n --sidebar: oklch(0.985 0 0);\n --sidebar-foreground: oklch(0.145 0 0);\n --sidebar-primary: oklch(0.205 0 0);\n --sidebar-primary-foreground: oklch(0.985 0 0);\n --sidebar-accent: oklch(0.97 0 0);\n --sidebar-accent-foreground: oklch(0.205 0 0);\n --sidebar-border: oklch(0.922 0 0);\n --sidebar-ring: oklch(0.708 0 0);\n\n --vp-c-bg: var(--background);\n --vp-c-bg-alt: var(--secondary);\n --vp-c-bg-elv: var(--popover);\n --vp-c-bg-soft: var(--secondary);\n\n --vp-c-text-1: var(--foreground);\n --vp-c-brand-1: var(--primary);\n --vp-c-default-1: var(--secondary);\n --vp-c-default-2: var(--muted);\n\n --vp-nav-bg-color: var(--background);\n --vp-custom-block-tip-border: var(--vp-c-default-3);\n --vp-custom-block-tip-text: var(--vp-c-text-1);\n --vp-custom-block-tip-bg: transparent;\n --vp-custom-block-tip-code-bg: var(--vp-c-default-soft);\n --vp-input-switch-bg-color: var(--secondary);\n --vp-input-border-color: var(--input);\n --vp-c-divider: var(--border);\n}\n\n.dark {\n --background: oklch(0.145 0 0);\n --foreground: oklch(0.985 0 0);\n --card: oklch(0.205 0 0);\n --card-foreground: oklch(0.985 0 0);\n --popover: oklch(0.269 0 0);\n --popover-foreground: oklch(0.985 0 0);\n --primary: oklch(0.922 0 0);\n --primary-foreground: oklch(0.205 0 0);\n --secondary: oklch(0.269 0 0);\n --secondary-foreground: oklch(0.985 0 0);\n --muted: oklch(0.269 0 0);\n --muted-foreground: oklch(0.708 0 0);\n --accent: oklch(0.371 0 0);\n --accent-foreground: oklch(0.985 0 0);\n --destructive: oklch(0.704 0.191 22.216);\n --border: oklch(1 0 0 / 10%);\n --input: oklch(1 0 0 / 15%);\n --ring: oklch(0.556 0 0);\n --chart-1: oklch(0.488 0.243 264.376);\n --chart-2: oklch(0.696 0.17 162.48);\n --chart-3: oklch(0.769 0.188 70.08);\n --chart-4: oklch(0.627 0.265 303.9);\n --chart-5: oklch(0.645 0.246 16.439);\n --sidebar: oklch(0.205 0 0);\n --sidebar-foreground: oklch(0.985 0 0);\n --sidebar-primary: oklch(0.488 0.243 264.376);\n --sidebar-primary-foreground: oklch(0.985 0 0);\n --sidebar-accent: oklch(0.269 0 0);\n --sidebar-accent-foreground: oklch(0.985 0 0);\n --sidebar-border: oklch(1 0 0 / 10%);\n --sidebar-ring: oklch(0.439 0 0);\n}\n\n#app {\n .VPMenu {\n @apply p-1 rounded-md bg-(--popover);\n\n .link {\n @apply text-sm py-1;\n }\n }\n\n .DocSearch-Button {\n @apply rounded-full py-0 px-2 h-8 lg:w-56 xl:w-64;\n\n .DocSearch-Button-Keys {\n @apply rounded-full p-1;\n }\n }\n\n .VPNav {\n @apply bg-(--background) border-b border-(--border);\n\n .divider {\n @apply hidden;\n }\n }\n\n .VPSwitch {\n @apply border-(--secondary) bg-(--secondary) hover:border-(--border);\n }\n\n .VPFooter {\n @apply border-dashed;\n }\n\n .VPSidebar {\n @apply border-r border-(--border) bg-(--background);\n }\n\n .VPNavBarTitle {\n a.title {\n border-bottom: 0 !important;\n }\n }\n\n .prev-next {\n @apply border-0 pt-0;\n\n .pager-link {\n @apply border-dashed;\n }\n }\n}\n\n.VPContent.has-sidebar {\n .VPDoc {\n @apply pt-32;\n background: url(\"/components.svg\") no-repeat;\n background-position: top -45px right 320px;\n }\n}\n\n.vp-doc {\n h2 {\n @apply border-t-0 mt-10 pt-0 pb-3 border-b border-dashed border-(--border);\n\n .header-anchor {\n @apply top-0;\n }\n }\n [class*=\"language-\"] pre {\n @apply rounded-md py-5 text-base font-mono;\n }\n\n [class*=\"language-\"] pre code {\n @apply px-5;\n }\n\n [class*=\"language-\"] > button.copy {\n /*rtl:ignore*/\n direction: ltr;\n position: absolute;\n top: 12px;\n /*rtl:ignore*/\n z-index: 3;\n border: 1px solid var(--vp-code-copy-code-border-color);\n border-radius: 4px;\n background-color: var(--vp-code-copy-code-bg);\n opacity: 0;\n cursor: pointer;\n background-image: var(--vp-icon-copy);\n background-position: 50%;\n background-repeat: no-repeat;\n transition:\n border-color 0.25s,\n background-color 0.25s,\n opacity 0.25s;\n\n width: 24px;\n height: 24px;\n background-size: 14px;\n\n &:hover,\n &.copy.copied {\n border-color: var(--vp-code-copy-code-hover-border-color);\n background-color: var(--vp-code-copy-code-hover-bg);\n }\n\n &:hover.copied::before,\n &.copied::before {\n height: 24px;\n line-height: 24px;\n padding: 0 8px;\n }\n }\n\n [class*=\"language-\"] > button.copy {\n right: 12px;\n }\n}\n" }, { "path": "docs/README.md", "content": "# gpui-component-docs\n\nTo install dependencies:\n\n```bash\nbun install\n```\n\nTo run:\n\n```bash\nbun run dev\n```\n\nThis project was created using `bun init` in bun v1.2.23. [Bun](https://bun.com) is a fast all-in-one JavaScript runtime.\n" }, { "path": "docs/contributors.md", "content": "---\nlayout: home\n---\n\n\n\n\n" }, { "path": "docs/contributors.vue", "content": "\n\n\n\n\n" }, { "path": "docs/data/contributors.data.js", "content": "const IGNORE_LOGINS = [\"dependabot[bot]\", \"copilot\"];\nconst API_URL =\n \"https://api.github.com/repos/longbridge/gpui-component/contributors\";\n\nexport default {\n async load() {\n return await fetch(API_URL)\n .then((res) => res.json())\n .then((items) => {\n let filtered = items.filter(\n (item) => !IGNORE_LOGINS.includes(item.login.toLowerCase()),\n );\n return filtered.slice(0, 24);\n });\n },\n};\n" }, { "path": "docs/data/repo.data.js", "content": "const API_URL = \"https://api.github.com/repos/longbridge/gpui-component\";\n\nexport default {\n async load() {\n return await fetch(API_URL).then((res) => res.json());\n },\n};\n" }, { "path": "docs/data/skills.data.js", "content": "import { readdirSync, readFileSync } from \"fs\";\nimport { join } from \"path\";\nimport { fileURLToPath } from \"url\";\nimport { dirname } from \"path\";\n\nconst __filename = fileURLToPath(import.meta.url);\nconst __dirname = dirname(__filename);\n\nfunction parseFrontmatter(content) {\n const frontmatterRegex = /^---\\s*\\n([\\s\\S]*?)\\n---\\s*\\n([\\s\\S]*)$/;\n const match = content.match(frontmatterRegex);\n \n if (!match) {\n return { frontmatter: {}, content: content.trim() };\n }\n \n const frontmatterText = match[1];\n const body = match[2];\n \n const frontmatter = {};\n frontmatterText.split('\\n').forEach(line => {\n const colonIndex = line.indexOf(':');\n if (colonIndex > 0) {\n const key = line.substring(0, colonIndex).trim();\n let value = line.substring(colonIndex + 1).trim();\n // Remove quotes if present\n if ((value.startsWith('\"') && value.endsWith('\"')) || \n (value.startsWith(\"'\") && value.endsWith(\"'\"))) {\n value = value.slice(1, -1);\n }\n frontmatter[key] = value;\n }\n });\n \n return { frontmatter, content: body.trim() };\n}\n\nexport default {\n async load() {\n const skillsDir = join(__dirname, \"../../.claude/skills\");\n const skills = [];\n \n try {\n const skillDirs = readdirSync(skillsDir, { withFileTypes: true })\n .filter(dirent => dirent.isDirectory())\n .map(dirent => dirent.name);\n \n for (const skillDir of skillDirs) {\n const skillPath = join(skillsDir, skillDir, \"SKILL.md\");\n try {\n const content = readFileSync(skillPath, \"utf-8\");\n const { frontmatter, content: body } = parseFrontmatter(content);\n \n skills.push({\n id: skillDir,\n name: frontmatter.name || skillDir,\n description: frontmatter.description || \"\",\n content: body,\n path: skillPath,\n });\n } catch (err) {\n console.warn(`Failed to read skill ${skillDir}:`, err.message);\n }\n }\n \n // Sort skills by name\n skills.sort((a, b) => a.name.localeCompare(b.name));\n \n return skills;\n } catch (err) {\n console.error(\"Failed to load skills:\", err);\n return [];\n }\n },\n};\n" }, { "path": "docs/docs/assets.md", "content": "---\ntitle: Icons & Assets\norder: -4\n---\n\n# Icons & Assets\n\nThe [IconName] and [Icon] in GPUI Component provide a comprehensive set of icons and assets that can be easily integrated into your GPUI applications.\n\nBut for minimal size applications, **we have not embedded any icon assets by default** in `gpui-component` crate.\n\nWe split the icon assets into a separate crate [gpui-component-assets] to allow developers to choose whether to include the icon assets in their applications or if you don't need the icons at all, you can build your own assets.\n\n## Use default bundled assets\n\nThe [gpui-component-assets] crate provides a default bundled assets implementation that includes all the icon files in the `assets/icons` folder.\n\nTo use the default bundled assets, you need to add the `gpui-component-assets` crate as a dependency in your `Cargo.toml`:\n\n```toml-vue\n[dependencies]\ngpui-component = \"{{ VERSION }}\"\ngpui-component-assets = \"{{ VERSION }}\"\n```\n\nThen we need call the `with_assets` method when creating the GPUI application to register the asset source:\n\n```rs\nuse gpui::*;\nuse gpui_component_assets::Assets;\n\nlet app = gpui_platform::application().with_assets(Assets);\n```\n\nNow, we can use `IconName` and `Icon` in our application as usual, the all icon assets are loaded from the default bundled assets.\n\nContinue [Use the icons](#use-the-icons) section to see how to use the icons in your application.\n\n## Build you own assets\n\nYou may have a specific set of icons that you want to use in your application, or you may want to reduce the size of your application binary by including only the icons you need.\n\nIn this case, you can build your own assets by following these steps.\n\nThe [assets](https://github.com/longbridge/gpui-component/tree/main/crates/assets/assets/) folder in source code contains all the available icons in SVG format, every file is that GPUI Component support, it matched with the [IconName] enum.\n\nYou can download the SVG files you need from the [assets] folder, or you can use your own SVG files by following the [IconName] naming convention.\n\nIn GPUI application, we can use the [rust-embed] crate to embed the SVG files into the application binary.\n\nAnd GPUI Application providers an `AssetSource` trait to load the assets.\n\n```rs\nuse anyhow::anyhow;\nuse gpui::*;\nuse gpui_component::{v_flex, IconName, Root};\nuse rust_embed::RustEmbed;\nuse std::borrow::Cow;\n\n/// An asset source that loads assets from the `./assets` folder.\n#[derive(RustEmbed)]\n#[folder = \"./assets\"]\n#[include = \"icons/**/*.svg\"]\npub struct Assets;\n\nimpl AssetSource for Assets {\n fn load(&self, path: &str) -> Result>> {\n if path.is_empty() {\n return Ok(None);\n }\n\n Self::get(path)\n .map(|f| Some(f.data))\n .ok_or_else(|| anyhow!(\"could not find asset at path \\\"{path}\\\"\"))\n }\n\n fn list(&self, path: &str) -> Result> {\n Ok(Self::iter()\n .filter_map(|p| p.starts_with(path).then(|| p.into()))\n .collect())\n }\n}\n```\n\nWe need call the `with_assets` method when creating the GPUI application to register the asset source:\n\n```rs\nfn main() {\n // Register Assets to GPUI application.\n let app = gpui_platform::application().with_assets(Assets);\n\n app.run(move |cx| {\n // We must initialize gpui_component before using it.\n gpui_component::init(cx);\n\n cx.spawn(async move |cx| {\n cx.open_window(WindowOptions::default(), |window, cx| {\n let view = cx.new(|_| Example);\n // The first level on the window must be Root.\n cx.new(|cx| Root::new(view, window, cx))\n })\n .expect(\"Failed to open window\");\n })\n .detach();\n });\n}\n```\n\n## Use the icons\n\nNow we can use the icons in our application:\n\n```rs\npub struct Example;\n\nimpl Render for Example {\n fn render(&mut self, _: &mut Window, _: &mut Context) -> impl IntoElement {\n v_flex()\n .gap_2()\n .size_full()\n .items_center()\n .justify_center()\n .text_center()\n .child(IconName::Inbox)\n .child(IconName::Bot)\n }\n}\n```\n\n## Resources\n\n- [Lucide Icons](https://lucide.dev/) - The icon set used in GPUI Component is based on the open-source Lucide Icons library, which provides a wide range of customizable SVG icons.\n\n[rust-embed]: https://docs.rs/rust-embed/latest/rust_embed/\n[IconName]: https://docs.rs/gpui_component/latest/gpui_component/icon/enum.IconName.html\n[Icon]: https://docs.rs/gpui_component/latest/gpui_component/icon/struct.Icon.html\n[assets]: https://github.com/longbridge/gpui-component/tree/main/crates/assets/assets/\n[gpui-component-assets]: https://crates.io/crates/gpui-component-assets\n" }, { "path": "docs/docs/components/accordion.md", "content": "---\ntitle: Accordion\ndescription: The accordion uses collapse internally to make it collapsible.\n---\n\n# Accordion\n\nAn accordion component that allows users to show and hide sections of content. It uses collapse functionality internally to create collapsible panels.\n\n## Import\n\n```rust\nuse gpui_component::accordion::Accordion;\n```\n\n## Usage\n\n### Basic Accordion\n\n```rust\nAccordion::new(\"my-accordion\")\n .item(|item| {\n item.title(\"Section 1\")\n .child(\"Content for section 1\")\n })\n .item(|item| {\n item.title(\"Section 2\")\n .child(\"Content for section 2\")\n })\n .item(|item| {\n item.title(\"Section 3\")\n .child(\"Content for section 3\")\n })\n```\n\n### Multiple Open Items\n\nBy default, only one accordion item can be open at a time. Use `multiple()` to allow multiple items to be open:\n\n```rust\nAccordion::new(\"my-accordion\")\n .multiple(true)\n .item(|item| item.title(\"Section 1\").child(\"Content 1\"))\n .item(|item| item.title(\"Section 2\").child(\"Content 2\"))\n```\n\n### With Borders\n\n```rust\nAccordion::new(\"my-accordion\")\n .bordered(true)\n .item(|item| item.title(\"Section 1\").child(\"Content 1\"))\n```\n\n### Different Sizes\n\n```rust\nuse gpui_component::{Sizable as _, Size};\n\nAccordion::new(\"my-accordion\")\n .small()\n .item(|item| item.title(\"Small Section\").child(\"Content\"))\n\nAccordion::new(\"my-accordion\")\n .large()\n .item(|item| item.title(\"Large Section\").child(\"Content\"))\n```\n\n### Handle Toggle Events\n\n```rust\nAccordion::new(\"my-accordion\")\n .on_toggle_click(|open_indices, window, cx| {\n println!(\"Open items: {:?}\", open_indices);\n })\n .item(|item| item.title(\"Section 1\").child(\"Content 1\"))\n```\n\n### Disabled State\n\n```rust\nAccordion::new(\"my-accordion\")\n .disabled(true)\n .item(|item| item.title(\"Disabled Section\").child(\"Content\"))\n```\n\n## API Reference\n\n- [Accordion]\n- [AccordionItem]\n\n### Sizing\n\nImplements [Sizable] trait:\n\n- `small()` - Small size\n- `medium()` - Medium size (default)\n- `large()` - Large size\n- `xsmall()` - Extra small size\n\n## Examples\n\n### With Custom Icons\n\n```rust\nAccordion::new(\"my-accordion\")\n .item(|item| {\n item.title(\n h_flex()\n .gap_2()\n .child(Icon::new(IconName::Settings))\n .child(\"Settings\")\n )\n .child(\"Settings content here\")\n })\n```\n\n### Nested Accordions\n\n```rust\nAccordion::new(\"outer\")\n .item(|item| {\n item.title(\"Parent Section\")\n .child(\n Accordion::new(\"inner\")\n .item(|item| item.title(\"Child 1\").child(\"Content\"))\n .item(|item| item.title(\"Child 2\").child(\"Content\"))\n )\n })\n```\n\n[Accordion]: https://docs.rs/gpui-component/latest/gpui_component/accordion/struct.Accordion.html\n[AccordionItem]: https://docs.rs/gpui-component/latest/gpui_component/accordion/struct.AccordionItem.html\n[Sizable]: https://docs.rs/gpui-component/latest/gpui_component/trait.Sizable.html\n" }, { "path": "docs/docs/components/alert-dialog.md", "content": "---\ntitle: AlertDialog\ndescription: A modal dialog that interrupts the user with important content and expects a response.\n---\n\n# AlertDialog\n\nAlertDialog is a modal dialog component that interrupts the user with important content and expects a response. It is built on top of the [Dialog] component with opinionated defaults and a simplified API.\n\n## Differences from Dialog\n\nAlertDialog provides these defaults on top of Dialog:\n\n- Not overlay closable by default (can be changed with `overlay_closable(true)`)\n- No close button by default (can be changed with `close_button(true)`)\n- Footer buttons are center-aligned (Dialog uses right-alignment)\n- Simplified API focused on alert and confirmation scenarios\n\n## Import\n\n```rust\nuse gpui_component::dialog::{AlertDialog, DialogAction, DialogClose};\nuse gpui_component::WindowExt;\n```\n\n## Usage\n\n### Setup Application Root View\n\nLike Dialog, you need to set up your application's root view to render the dialog layer. See [Dialog documentation](./dialog.md#setup-application-root-view) for details.\n\n### Basic AlertDialog (Declarative API)\n\nCreate a fully declarative AlertDialog using `trigger` and `content`:\n\n```rust\nuse gpui_component::dialog::{AlertDialog, DialogHeader, DialogTitle, DialogDescription, DialogFooter};\n\nAlertDialog::new(cx)\n .trigger(\n Button::new(\"show-alert\")\n .outline()\n .label(\"Show Alert\")\n )\n .content(|content, _, cx| {\n content\n .child(\n DialogHeader::new()\n .child(DialogTitle::new().child(\"Are you absolutely sure?\"))\n .child(DialogDescription::new().child(\n \"This action cannot be undone. \\\n This will permanently delete your account from our servers.\"\n ))\n )\n .child(\n DialogFooter::new()\n .child(\n Button::new(\"cancel\")\n .outline()\n .label(\"Cancel\")\n .on_click(|_, window, cx| {\n window.close_dialog(cx);\n })\n )\n .child(\n Button::new(\"ok\")\n .primary()\n .label(\"Continue\")\n .on_click(|_, window, cx| {\n window.push_notification(\"Confirmed\", cx);\n window.close_dialog(cx);\n })\n )\n )\n })\n```\n\n### Using DialogAction and DialogClose\n\n`DialogAction` and `DialogClose` are wrapper components that simplify button click handling by automatically triggering the appropriate actions:\n\n- **DialogClose**: Wraps a button to trigger the `Cancel` action, invoking `on_cancel` callback\n- **DialogAction**: Wraps a button to trigger the `Confirm` action, invoking `on_ok` callback\n\nThese components eliminate the need to manually call `window.close_dialog(cx)`:\n\n```rust\nAlertDialog::new(cx)\n .trigger(Button::new(\"show-alert\").outline().label(\"Show Alert\"))\n .on_ok(|_, window, cx| {\n window.push_notification(\"You confirmed!\", cx);\n true // Return true to close dialog\n })\n .on_cancel(|_, window, cx| {\n window.push_notification(\"You cancelled!\", cx);\n true\n })\n .content(|content, _, cx| {\n content\n .child(\n DialogHeader::new()\n .child(DialogTitle::new().child(\"Confirm Action\"))\n .child(DialogDescription::new().child(\"Do you want to proceed?\"))\n )\n .child(\n DialogFooter::new()\n .child(\n DialogClose::new().child(\n Button::new(\"cancel\").outline().label(\"Cancel\")\n )\n )\n .child(\n DialogAction::new().child(\n Button::new(\"ok\").primary().label(\"Confirm\")\n )\n )\n )\n })\n```\n\n**Benefits:**\n- No need to manually close the dialog\n- Automatically connects to `on_ok` and `on_cancel` callbacks\n- Cleaner, more declarative code\n- Supports returning `false` from callbacks to prevent closing\n\n### Basic AlertDialog (Imperative API)\n\nOpen a dialog imperatively using `WindowExt::open_alert_dialog`:\n\n```rust\nwindow.open_alert_dialog(cx, |alert, _, _| {\n alert\n .title(\"Delete File\")\n .description(\"Are you sure you want to delete this file? This action cannot be undone.\")\n .show_cancel(true)\n .on_ok(|_, window, cx| {\n window.push_notification(\"File deleted\", cx);\n true // Return true to close dialog\n })\n})\n```\n\n### Custom Button Props\n\nUse `button_props` to customize button text and styles:\n\n```rust\nuse gpui_component::dialog::DialogButtonProps;\nuse gpui_component::button::ButtonVariant;\n\nwindow.open_alert_dialog(cx, |alert, _, _| {\n alert\n .title(\"Delete Account\")\n .description(\"This will permanently delete your account and all associated data.\")\n .button_props(\n DialogButtonProps::default()\n .ok_text(\"Delete\")\n .ok_variant(ButtonVariant::Danger)\n .cancel_text(\"Keep\")\n .show_cancel(true)\n )\n .on_ok(|_, window, cx| {\n window.push_notification(\"Account deleted\", cx);\n true\n })\n})\n```\n\n### AlertDialog with Icon\n\nUsing icon in declarative API:\n\n```rust\nuse gpui_component::{Icon, IconName, ActiveTheme};\n\nAlertDialog::new(cx)\n .w(px(320.))\n .trigger(Button::new(\"permission\").outline().label(\"Request Permission\"))\n .on_ok(|_, window, cx| {\n window.push_notification(\"Permission granted\", cx);\n true\n })\n .content(|content, _, cx| {\n content\n .child(\n DialogHeader::new()\n .items_center()\n .child(\n Icon::new(IconName::TriangleAlert)\n .size_10()\n .text_color(cx.theme().warning)\n )\n .child(DialogTitle::new().child(\"Network Permission Required\"))\n .child(DialogDescription::new().child(\n \"We need your permission to access the network to provide better services.\"\n ))\n )\n .child(\n DialogFooter::new()\n .v_flex()\n .child(\n DialogAction::new().child(\n Button::new(\"allow\").w_full().primary().label(\"Allow\")\n )\n )\n .child(\n DialogClose::new().child(\n Button::new(\"deny\").w_full().outline().label(\"Don't Allow\")\n )\n )\n )\n })\n```\n\nUsing icon in imperative API:\n\n```rust\nwindow.open_alert_dialog(cx, |alert, _, cx| {\n alert\n .title(\"Warning\")\n .description(\"This action requires confirmation.\")\n .icon(\n Icon::new(IconName::AlertTriangle)\n .size_8()\n .text_color(cx.theme().warning)\n )\n})\n```\n\n### Destructive Action Confirmation\n\n```rust\nAlertDialog::new(cx)\n .trigger(\n Button::new(\"delete-account\")\n .outline()\n .danger()\n .label(\"Delete Account\")\n )\n .on_ok(|_, window, cx| {\n window.push_notification(\"Account deletion initiated\", cx);\n true\n })\n .content(|content, _, _| {\n content\n .child(\n DialogHeader::new()\n .child(DialogTitle::new().child(\"Delete Account\"))\n .child(DialogDescription::new().child(\n \"This will permanently delete your account \\\n and all associated data. This action cannot be undone.\"\n ))\n )\n .child(\n DialogFooter::new()\n .child(\n DialogClose::new().child(\n Button::new(\"cancel\").flex_1().outline().label(\"Cancel\")\n )\n )\n .child(\n DialogAction::new().child(\n Button::new(\"delete\")\n .flex_1()\n .outline()\n .danger()\n .label(\"Delete Forever\")\n )\n )\n )\n })\n```\n\n### Custom Width\n\n```rust\nAlertDialog::new(cx)\n .width(px(500.))\n .trigger(Button::new(\"custom-width\").label(\"Custom Width\"))\n .content(|content, _, _| {\n // ... dialog content\n })\n```\n\n### Controlling Dialog Close Behavior\n\n#### Allow Overlay Click to Close\n\n```rust\nwindow.open_alert_dialog(cx, |alert, _, _| {\n alert\n .title(\"Notice\")\n .description(\"Click outside this dialog or press ESC to close it.\")\n .overlay_closable(true)\n})\n```\n\n#### Disable Keyboard ESC to Close\n\n```rust\nwindow.open_alert_dialog(cx, |alert, _, _| {\n alert\n .title(\"Important Notice\")\n .description(\"Please read this carefully before proceeding.\")\n .keyboard(false)\n})\n```\n\n#### Show Close Button\n\n```rust\nwindow.open_alert_dialog(cx, |alert, _, _| {\n alert\n .title(\"Information\")\n .description(\"Some information...\")\n .close_button(true)\n})\n```\n\n### Prevent Dialog from Closing\n\nReturn `false` from `on_ok` or `on_cancel` callbacks to prevent the dialog from closing:\n\n```rust\nuse gpui_component::dialog::DialogButtonProps;\n\nwindow.open_alert_dialog(cx, |alert, _, _| {\n alert\n .title(\"Processing\")\n .description(\"A process is running. Click Continue to stop it or Cancel to keep waiting.\")\n .button_props(\n DialogButtonProps::default()\n .ok_text(\"Continue\")\n .show_cancel(true)\n )\n .on_ok(|_, window, cx| {\n // Return false to prevent closing\n window.push_notification(\"Cannot close: Process still running\", cx);\n false\n })\n .on_cancel(|_, window, cx| {\n window.push_notification(\"Waiting...\", cx);\n false\n })\n})\n```\n\n### Dialog Close Callback\n\nUse `on_close` to execute actions after the dialog closes (called after `on_ok` or `on_cancel`):\n\n```rust\nwindow.open_alert_dialog(cx, |alert, _, _| {\n alert\n .title(\"Confirm\")\n .description(\"Are you sure?\")\n .on_close(|_, window, cx| {\n window.push_notification(\"Dialog closed\", cx);\n })\n})\n```\n\n## API Reference\n\n### AlertDialog\n\n| Method | Description |\n| ------------------------ | ------------------------------------------------------------- |\n| `new(cx)` | Create a new AlertDialog |\n| `trigger(element)` | Set trigger element that opens the dialog when clicked |\n| `content(builder)` | Set dialog content using a builder function (declarative API) |\n| `title(title)` | Set dialog title (imperative API) |\n| `description(desc)` | Set dialog description (imperative API) |\n| `icon(icon)` | Set dialog icon (imperative API) |\n| `button_props(props)` | Set button properties (text, style, visibility) |\n| `show_cancel(bool)` | Show/hide cancel button, default `false` |\n| `width(px)` | Set dialog width, default `420px` |\n| `overlay_closable(bool)` | Allow clicking overlay to close, default `false` |\n| `close_button(bool)` | Show/hide close button, default `false` |\n| `keyboard(bool)` | Support ESC key to close, default `true` |\n| `on_ok(callback)` | Set OK button callback, return `true` to close dialog |\n| `on_cancel(callback)` | Set cancel button callback, return `true` to close dialog |\n| `on_close(callback)` | Set callback after dialog closes |\n\n### DialogButtonProps\n\n| Method | Description |\n| ------------------------- | ---------------------------------------- |\n| `ok_text(text)` | Set OK button text, default \"OK\" |\n| `cancel_text(text)` | Set cancel button text, default \"Cancel\" |\n| `ok_variant(variant)` | Set OK button variant |\n| `cancel_variant(variant)` | Set cancel button variant |\n| `show_cancel(bool)` | Show/hide cancel button |\n| `on_ok(callback)` | Set OK callback |\n| `on_cancel(callback)` | Set cancel callback |\n\n### DialogAction\n\nA wrapper component that automatically triggers the `Confirm` action when its child element is clicked. This invokes the `on_ok` callback set on the AlertDialog.\n\n**Usage:**\n```rust\nDialogAction::new().child(\n Button::new(\"ok\").primary().label(\"Confirm\")\n)\n```\n\n**Behavior:**\n- Dispatches `Confirm` action on click\n- Invokes the `on_ok` callback\n- Dialog closes if callback returns `true`\n- Dialog stays open if callback returns `false`\n\n### DialogClose\n\nA wrapper component that automatically triggers the `Cancel` action when its child element is clicked. This invokes the `on_cancel` callback set on the AlertDialog.\n\n**Usage:**\n```rust\nDialogClose::new().child(\n Button::new(\"cancel\").outline().label(\"Cancel\")\n)\n```\n\n**Behavior:**\n- Dispatches `Cancel` action on click\n- Invokes the `on_cancel` callback\n- Dialog closes if callback returns `true` (or if no callback is set)\n- Dialog stays open if callback returns `false`\n\n## Examples\n\n### Delete Confirmation\n\nUsing imperative API with button props:\n\n```rust\nButton::new(\"delete\")\n .danger()\n .label(\"Delete\")\n .on_click(|_, window, cx| {\n window.open_alert_dialog(cx, |alert, _, _| {\n alert\n .title(\"Delete File?\")\n .description(\"This action cannot be undone.\")\n .button_props(\n DialogButtonProps::default()\n .ok_text(\"Delete\")\n .ok_variant(ButtonVariant::Danger)\n .show_cancel(true)\n )\n .on_ok(|_, window, cx| {\n // Perform delete operation\n window.push_notification(\"File deleted\", cx);\n true\n })\n });\n })\n```\n\nOr using declarative API with DialogAction/DialogClose:\n\n```rust\nAlertDialog::new(cx)\n .trigger(Button::new(\"delete\").danger().label(\"Delete\"))\n .on_ok(|_, window, cx| {\n window.push_notification(\"File deleted\", cx);\n true\n })\n .content(|content, _, cx| {\n content\n .child(\n DialogHeader::new()\n .child(DialogTitle::new().child(\"Delete File?\"))\n .child(DialogDescription::new().child(\"This action cannot be undone.\"))\n )\n .child(\n DialogFooter::new()\n .child(\n DialogClose::new().child(\n Button::new(\"cancel\").outline().label(\"Cancel\")\n )\n )\n .child(\n DialogAction::new().child(\n Button::new(\"delete-confirm\").danger().label(\"Delete\")\n )\n )\n )\n })\n```\n\n### Session Timeout\n\n```rust\nwindow.open_alert_dialog(cx, |alert, _, _| {\n alert\n .content(|content, _, _| {\n content\n .child(\n DialogHeader::new()\n .items_center()\n .child(DialogTitle::new().child(\"Session Expired\"))\n .child(DialogDescription::new().child(\n \"Your session has expired due to inactivity. \\\n Please log in again to continue.\"\n ))\n )\n .child(\n DialogFooter::new()\n .child(\n Button::new(\"sign-in\")\n .label(\"Sign in\")\n .primary()\n .flex_1()\n .on_click(|_, window, cx| {\n window.push_notification(\"Redirecting to login...\", cx);\n window.close_dialog(cx);\n })\n )\n )\n })\n})\n```\n\n### Update Available\n\n```rust\nAlertDialog::new(cx)\n .trigger(Button::new(\"update\").outline().label(\"Update Available\"))\n .on_cancel(|_, window, cx| {\n window.push_notification(\"Update postponed\", cx);\n true\n })\n .on_ok(|_, window, cx| {\n window.push_notification(\"Starting update...\", cx);\n true\n })\n .content(|content, _, _| {\n content\n .child(\n DialogHeader::new()\n .child(DialogTitle::new().child(\"Update Available\"))\n .child(DialogDescription::new().child(\n \"A new version (v2.0.0) is available. \\\n This update includes new features and bug fixes.\"\n ))\n )\n .child(\n DialogFooter::new()\n .child(\n DialogClose::new().child(\n Button::new(\"later\").flex_1().outline().label(\"Later\")\n )\n )\n .child(\n DialogAction::new().child(\n Button::new(\"update-now\").flex_1().primary().label(\"Update Now\")\n )\n )\n )\n })\n```\n\n## Best Practices\n\n1. **Choose the Right API**: Use imperative API (`open_alert_dialog`) for simple confirmations; use declarative API (`trigger` + `content`) for complex layouts or integration with other components\n2. **Use DialogAction and DialogClose**: Prefer wrapping buttons with `DialogAction` and `DialogClose` over manual `window.close_dialog()` calls for cleaner, more declarative code\n3. **Clarify Intent**: Use appropriate button variants (e.g., `ButtonVariant::Danger` for delete operations) to communicate the importance of actions\n4. **Provide Clear Descriptions**: Ensure users understand the consequences of their actions, especially for destructive operations\n5. **Use Icons Wisely**: Icons can enhance attention for warnings and errors, but use them appropriately\n6. **Prevent Closing Carefully**: Only prevent dialog closing when user confirmation is truly necessary (e.g., a process is running)\n7. **Maintain Consistency**: Keep dialog button order and styles consistent throughout your application\n\n## Related Components\n\n- [Dialog] - More flexible dialog component\n- [DialogHeader] - Dialog header component\n- [DialogTitle] - Dialog title component\n- [DialogDescription] - Dialog description component\n- [DialogFooter] - Dialog footer component\n- [DialogAction] - Wrapper component for confirm/OK buttons\n- [DialogClose] - Wrapper component for cancel/close buttons\n\n[AlertDialog]: https://docs.rs/gpui-component/latest/gpui_component/dialog/struct.AlertDialog.html\n[Dialog]: https://docs.rs/gpui-component/latest/gpui_component/dialog/struct.Dialog.html\n[DialogHeader]: https://docs.rs/gpui-component/latest/gpui_component/dialog/struct.DialogHeader.html\n[DialogTitle]: https://docs.rs/gpui-component/latest/gpui_component/dialog/struct.DialogTitle.html\n[DialogDescription]: https://docs.rs/gpui-component/latest/gpui_component/dialog/struct.DialogDescription.html\n[DialogFooter]: https://docs.rs/gpui-component/latest/gpui_component/dialog/struct.DialogFooter.html\n[DialogAction]: https://docs.rs/gpui-component/latest/gpui_component/dialog/struct.DialogAction.html\n[DialogClose]: https://docs.rs/gpui-component/latest/gpui_component/dialog/struct.DialogClose.html\n" }, { "path": "docs/docs/components/alert.md", "content": "---\ntitle: Alert\ndescription: Displays a callout for user attention.\n---\n\n# Alert\n\nA versatile alert component for displaying important messages to users. Supports multiple variants (info, success, warning, error), custom icons, optional titles, closable functionality, and banner mode. Perfect for notifications, status messages, and user feedback.\n\n## Import\n\n```rust\nuse gpui_component::alert::Alert;\n```\n\n## Usage\n\n### Basic Alert\n\n```rust\nAlert::new(\"alert-id\", \"This is a basic alert message.\")\n```\n\n### Alert with Title\n\n```rust\nAlert::new(\"alert-with-title\", \"Your changes have been saved successfully.\")\n .title(\"Success!\")\n```\n\n### Alert Variants\n\n```rust\n// Info alert (blue)\nAlert::info(\"info-alert\", \"This is an informational message.\")\n .title(\"Information\")\n\n// Success alert (green)\nAlert::success(\"success-alert\", \"Your operation completed successfully.\")\n .title(\"Success!\")\n\n// Warning alert (yellow/orange)\nAlert::warning(\"warning-alert\", \"Please review your settings before proceeding.\")\n .title(\"Warning\")\n\n// Error alert (red)\nAlert::error(\"error-alert\", \"An error occurred while processing your request.\")\n .title(\"Error\")\n```\n\n### Alert Sizes\n\n```rust\nuse gpui_component::{alert::Alert, Sizable as _};\n\nAlert::info(\"alert\", \"Message content\")\n .xsmall()\n .title(\"XSmall Alert\")\nAlert::info(\"alert\", \"Message content\")\n .small()\n .title(\"Small Alert\")\n\nAlert::info(\"alert\", \"Message content\")\n .title(\"Medium Alert\")\n\nAlert::info(\"alert\", \"Message content\")\n .large()\n .title(\"Large Alert\")\n```\n\n### Closable Alerts\n\nWhen you add an `on_close` handler, a close button appears on the alert:\n\n```rust\nAlert::info(\"closable-alert\", \"This alert can be dismissed.\")\n .title(\"Dismissible\")\n .on_close(|_event, _window, _cx| {\n println!(\"Alert was closed\");\n // Handle alert dismissal\n })\n```\n\n### Banner Mode\n\nBanner alerts take full width and don't display titles:\n\n```rust\nAlert::info(\"banner-alert\", \"This is a banner alert that spans the full width.\")\n .banner()\n\nAlert::success(\"banner-success\", \"Operation completed successfully!\")\n .banner()\n\nAlert::warning(\"banner-warning\", \"System maintenance scheduled for tonight.\")\n .banner()\n\nAlert::error(\"banner-error\", \"Service temporarily unavailable.\")\n .banner()\n```\n\n### Custom Icons\n\n```rust\nuse gpui_component::IconName;\n\nAlert::new(\"custom-icon\", \"Meeting scheduled for tomorrow at 3 PM.\")\n .title(\"Calendar Reminder\")\n .icon(IconName::Calendar)\n```\n\n### With Markdown Content\n\nWe can use `TextView` to render formatted (Markdown or HTML) text within the alert,\nfor displaying lists, bold text, links, etc.\n\n```rust\nuse gpui_component::text::markdown;\n\nAlert::error(\n \"error-with-markdown\",\n markdown(\n \"Please verify your billing information and try again.\\n\\\n - Check your card details\\n\\\n - Ensure sufficient funds\\n\\\n - Verify billing address\"\n ),\n)\n.title(\"Payment Failed\")\n```\n\n### Conditional Visibility\n\n```rust\nAlert::info(\"conditional-alert\", \"This alert may be hidden.\")\n .title(\"Conditional\")\n .visible(should_show_alert) // boolean condition\n```\n\n## API Reference\n\n- [Alert]\n\n## Examples\n\n### Form Validation Errors\n\n```rust\nAlert::error(\n \"validation-error\",\n \"Please correct the following errors before submitting:\\n\\\n - Email address is required\\n\\\n - Password must be at least 8 characters\\n\\\n - Terms of service must be accepted\"\n)\n.title(\"Validation Failed\")\n```\n\n### Success Notification\n\n```rust\nAlert::success(\"save-success\", \"Your profile has been updated successfully.\")\n .title(\"Changes Saved\")\n .on_close(|_, _, _| {\n // Auto-dismiss after showing\n })\n```\n\n### System Status Banner\n\n```rust\nAlert::warning(\n \"maintenance-banner\",\n \"Scheduled maintenance will occur tonight from 2:00 AM to 4:00 AM EST. \\\n Some services may be temporarily unavailable.\"\n)\n.banner()\n.large()\n```\n\n### Interactive Alert with Custom Action\n\n```rust\nAlert::info(\"update-available\", \"A new version of the application is available.\")\n .title(\"Update Available\")\n .icon(IconName::Download)\n .on_close(cx.listener(|this, _, _, cx| {\n // Handle update or dismiss\n this.handle_update_notification(cx);\n }))\n```\n\n### Multi-line Content with Formatting\n\n```rust\nuse gpui_component::text::markdown;\n\nAlert::warning(\n \"security-alert\",\n markdown(\n \"**Security Notice**: Unusual activity detected on your account.\\n\\n\\\n Recent activity:\\n\\\n - Login from new device (Chrome on Windows)\\n\\\n - Location: San Francisco, CA\\n\\\n - Time: Today at 2:30 PM\\n\\n\\\n If this wasn't you, please [change your password](/) immediately.\"\n )\n)\n.title(\"Security Alert\")\n.icon(IconName::Shield)\n```\n\n[Alert]: https://docs.rs/gpui-component/latest/gpui_component/alert/struct.Alert.html\n" }, { "path": "docs/docs/components/avatar.md", "content": "---\ntitle: Avatar\ndescription: Displays a user avatar image with fallback options.\n---\n\n# Avatar\n\nThe Avatar component displays user profile images with intelligent fallbacks. When no image is provided, it shows user initials or a placeholder icon. The component supports various sizes and can be grouped together for team displays.\n\n## Import\n\n```rust\nuse gpui_component::avatar::{Avatar, AvatarGroup};\n```\n\n## Usage\n\n### Basic Avatar\n\nYou can create an [Avatar] by providing an image source URL and a user name:\n\n```rust\nAvatar::new()\n .name(\"John Doe\")\n .src(\"https://example.com/avatar.jpg\")\n```\n\n### Avatar with Fallback Text\n\nWhen no image source is provided, the Avatar displays user initials with an automatically generated color background:\n\n```rust\n// Shows \"JD\" initials with colored background\nAvatar::new()\n .name(\"John Doe\")\n\n// Shows \"JS\" initials\nAvatar::new()\n .name(\"Jane Smith\")\n```\n\n### Avatar Placeholder\n\nFor anonymous users or when no name is provided:\n\n```rust\nuse gpui_component::IconName;\n\n// Default user icon placeholder\nAvatar::new()\n\n// Custom placeholder icon\nAvatar::new()\n .placeholder(IconName::Building2)\n```\n\n### Avatar Sizes\n\n```rust\nAvatar::new()\n .name(\"John Doe\")\n .xsmall()\n\nAvatar::new()\n .name(\"John Doe\")\n .small()\n\nAvatar::new()\n .name(\"John Doe\") // 48px (default medium)\n\nAvatar::new()\n .name(\"John Doe\")\n .large()\n\n// Custom size\nAvatar::new()\n .name(\"John Doe\")\n .with_size(px(100.))\n```\n\n### Custom Styling\n\n```rust\nAvatar::new()\n .src(\"https://example.com/avatar.jpg\")\n .with_size(px(100.))\n .border_3()\n .border_color(cx.theme().foreground)\n .shadow_sm()\n .rounded(px(20.)) // Custom border radius\n```\n\n## AvatarGroup\n\nThe [AvatarGroup] component allows you to display multiple avatars in a compact, overlapping layout:\n\n### Basic Group\n\n```rust\nAvatarGroup::new()\n .child(Avatar::new().src(\"https://example.com/user1.jpg\"))\n .child(Avatar::new().src(\"https://example.com/user2.jpg\"))\n .child(Avatar::new().src(\"https://example.com/user3.jpg\"))\n .child(Avatar::new().name(\"John Doe\"))\n```\n\n### Group with Limit\n\n```rust\nAvatarGroup::new()\n .limit(3) // Show maximum 3 avatars\n .child(Avatar::new().src(\"https://example.com/user1.jpg\"))\n .child(Avatar::new().src(\"https://example.com/user2.jpg\"))\n .child(Avatar::new().src(\"https://example.com/user3.jpg\"))\n .child(Avatar::new().src(\"https://example.com/user4.jpg\")) // Hidden\n .child(Avatar::new().src(\"https://example.com/user5.jpg\")) // Hidden\n```\n\n### Group with Ellipsis\n\nShow an ellipsis indicator when avatars are hidden due to the limit.\n\nIn this example, only 3 avatars are shown, and \"...\" indicates there are more:\n\n```rust\nAvatarGroup::new()\n .limit(3)\n .ellipsis() // Shows \"...\" when limit is exceeded\n .child(Avatar::new().src(\"https://example.com/user1.jpg\"))\n .child(Avatar::new().src(\"https://example.com/user2.jpg\"))\n .child(Avatar::new().src(\"https://example.com/user3.jpg\"))\n .child(Avatar::new().src(\"https://example.com/user4.jpg\"))\n .child(Avatar::new().src(\"https://example.com/user5.jpg\"))\n```\n\n### Group Sizes\n\nThe [Sizeable] trait can also be applied to AvatarGroup, and it will set the size for all contained avatars.\n\n```rust\n// Extra small group\nAvatarGroup::new()\n .xsmall()\n .child(Avatar::new().name(\"A\"))\n .child(Avatar::new().name(\"B\"))\n .child(Avatar::new().name(\"C\"))\n\n// Small group\nAvatarGroup::new()\n .small()\n .child(Avatar::new().name(\"A\"))\n .child(Avatar::new().name(\"B\"))\n\n// Medium group (default)\nAvatarGroup::new()\n .child(Avatar::new().name(\"A\"))\n .child(Avatar::new().name(\"B\"))\n\n// Large group\nAvatarGroup::new()\n .large()\n .child(Avatar::new().name(\"A\"))\n .child(Avatar::new().name(\"B\"))\n```\n\n### Adding Multiple Avatars\n\n```rust\nlet avatars = vec![\n Avatar::new().src(\"https://example.com/user1.jpg\"),\n Avatar::new().src(\"https://example.com/user2.jpg\"),\n Avatar::new().name(\"John Doe\"),\n];\n\nAvatarGroup::new()\n .children(avatars)\n .limit(5)\n .ellipsis()\n```\n\n## API Reference\n\n- [Avatar]\n- [AvatarGroup]\n\n## Examples\n\n### Team Display\n\n```rust\nuse gpui_component::{h_flex, v_flex};\n\nv_flex()\n .gap_4()\n .child(\"Development Team\")\n .child(\n AvatarGroup::new()\n .limit(4)\n .ellipsis()\n .child(Avatar::new().name(\"Alice Johnson\").src(\"https://example.com/alice.jpg\"))\n .child(Avatar::new().name(\"Bob Smith\").src(\"https://example.com/bob.jpg\"))\n .child(Avatar::new().name(\"Charlie Brown\"))\n .child(Avatar::new().name(\"Diana Prince\"))\n .child(Avatar::new().name(\"Eve Wilson\"))\n )\n```\n\n### User Profile Header\n\n```rust\nh_flex()\n .items_center()\n .gap_4()\n .child(\n Avatar::new()\n .src(\"https://example.com/profile.jpg\")\n .name(\"John Doe\")\n .large()\n .border_2()\n .border_color(cx.theme().primary)\n )\n .child(\n v_flex()\n .child(\"John Doe\")\n .child(\"Software Engineer\")\n )\n```\n\n### Anonymous User\n\n```rust\nuse gpui_component::IconName;\n\nAvatar::new()\n .placeholder(IconName::UserCircle)\n .medium()\n```\n\n### Avatar with Custom Colors\n\n```rust\n// The avatar automatically generates colors based on the name\n// Different names will get different colors from the color palette\nAvatar::new().name(\"Alice\") // Gets one color\nAvatar::new().name(\"Bob\") // Gets a different color\nAvatar::new().name(\"Charlie\") // Gets another color\n```\n\n[Avatar]: https://docs.rs/gpui-component/latest/gpui_component/avatar/struct.Avatar.html\n[AvatarGroup]: https://docs.rs/gpui-component/latest/gpui_component/avatar/struct.AvatarGroup.html\n[Sizable]: https://docs.rs/gpui-component/latest/gpui_component/trait.Sizable.html\n" }, { "path": "docs/docs/components/badge.md", "content": "---\ntitle: Badge\ndescription: A red dot that indicates the number of unread messages, status, or other notifications.\n---\n\n# Badge\n\nA versatile badge component that can display counts, dots, or icons on elements. Perfect for indicating notifications, status, or other contextual information on avatars, icons, or other UI elements.\n\n## Import\n\n```rust\nuse gpui_component::badge::Badge;\n```\n\n## Usage\n\n### Badge with Count\n\nUse `count` to display a numeric badge, if the count is greater than zero (`> 0`) the badge will be shown, otherwise it will be hidden.\n\nThere is a default maximum count of `99`, any count above this will be displayed as `99+`. You can customize this maximum using the [max](https://docs.rs/gpui-component/latest/gpui_component/badge/struct.Badge.html#method.max) method.\n\n```rust\nBadge::new()\n .count(3)\n .child(Icon::new(IconName::Bell))\n```\n\n### Variants\n\n- Default: Displays a numeric count.\n- Dot: A small dot indicator, typically used for status.\n- Icon: Displays an icon instead of a number.\n\n```rust\n// Number badge (default)\nBadge::new()\n .count(5)\n .child(Avatar::new().src(\"https://example.com/avatar.jpg\"))\n\n// Dot badge\nBadge::new()\n .dot()\n .child(Icon::new(IconName::Inbox))\n\n// Icon badge\nBadge::new()\n .icon(IconName::Check)\n .child(Avatar::new().src(\"https://example.com/avatar.jpg\"))\n```\n\n### Badge Sizes\n\nThe Badge is also implemented with the [Sizable] trait, allowing you to set small, medium (default), or large sizes.\n\n```rust\n// Small badge\nBadge::new()\n .small()\n .count(1)\n .child(Avatar::new().small())\n\n// Medium badge (default)\nBadge::new()\n .count(5)\n .child(Avatar::new())\n\n// Large badge\nBadge::new()\n .large()\n .count(10)\n .child(Avatar::new().large())\n```\n\n### Badge Colors\n\n```rust\nuse gpui_component::ActiveTheme;\n\n// Custom colors\nBadge::new()\n .count(3)\n .color(cx.theme().blue)\n .child(Avatar::new())\n\nBadge::new()\n .icon(IconName::Star)\n .color(cx.theme().yellow)\n .child(Avatar::new())\n\nBadge::new()\n .dot()\n .color(cx.theme().green)\n .child(Icon::new(IconName::Bell))\n```\n\n### Badge on Icons\n\n```rust\nuse gpui_component::{Icon, IconName};\n\n// Badge with count on icon\nBadge::new()\n .count(3)\n .child(Icon::new(IconName::Bell).large())\n\n// Badge with high count (shows max)\nBadge::new()\n .count(103)\n .child(Icon::new(IconName::Inbox).large())\n\n// Custom max count\nBadge::new()\n .count(150)\n .max(999)\n .child(Icon::new(IconName::Mail))\n```\n\n### Badge on Avatars\n\n```rust\nuse gpui_component::avatar::Avatar;\n\n// Basic count badge\nBadge::new()\n .count(5)\n .child(Avatar::new().src(\"https://example.com/avatar.jpg\"))\n\n// Status badge with icon\nBadge::new()\n .icon(IconName::Check)\n .color(cx.theme().green)\n .child(Avatar::new().src(\"https://example.com/avatar.jpg\"))\n\n// Online indicator with dot\nBadge::new()\n .dot()\n .color(cx.theme().green)\n .child(Avatar::new().src(\"https://example.com/avatar.jpg\"))\n```\n\n### Complex Nested Badges\n\n```rust\n// Badge on badge for complex status\nBadge::new()\n .count(212)\n .large()\n .child(\n Badge::new()\n .icon(IconName::Check)\n .large()\n .color(cx.theme().cyan)\n .child(Avatar::new().large().src(\"https://example.com/avatar.jpg\"))\n )\n\n// Multiple status indicators\nBadge::new()\n .count(2)\n .color(cx.theme().green)\n .large()\n .child(\n Badge::new()\n .icon(IconName::Star)\n .large()\n .color(cx.theme().yellow)\n .child(Avatar::new().large().src(\"https://example.com/avatar.jpg\"))\n )\n```\n\n## API Reference\n\n- [Badge]\n\n## Examples\n\n### Notification Indicators\n\n```rust\n// Unread messages\nBadge::new()\n .count(12)\n .child(Icon::new(IconName::Mail).large())\n\n// New notifications\nBadge::new()\n .count(3)\n .color(cx.theme().red)\n .child(Icon::new(IconName::Bell).large())\n\n// High priority with custom max\nBadge::new()\n .count(1234)\n .max(999)\n .color(cx.theme().orange)\n .child(Icon::new(IconName::AlertTriangle))\n```\n\n### Status Indicators\n\n```rust\n// Online status\nBadge::new()\n .dot()\n .color(cx.theme().green)\n .child(Avatar::new().src(\"https://example.com/user.jpg\"))\n\n// Verified status\nBadge::new()\n .icon(IconName::CheckCircle)\n .color(cx.theme().blue)\n .child(Avatar::new().src(\"https://example.com/verified-user.jpg\"))\n\n// Warning status\nBadge::new()\n .icon(IconName::AlertTriangle)\n .color(cx.theme().yellow)\n .child(Avatar::new().src(\"https://example.com/user.jpg\"))\n```\n\n### Different Badge Positions\n\n```rust\n// The badge automatically positions itself based on variant:\n// - Dot: top-right corner (small dot)\n// - Number: top-right with dynamic sizing\n// - Icon: bottom-right corner with border\n```\n\n### Count Formatting\n\n```rust\n// Numbers 1-99 show as-is\nBadge::new().count(5) // Shows \"5\"\nBadge::new().count(99) // Shows \"99\"\n\n// Numbers above max show with \"+\"\nBadge::new().count(100) // Shows \"99+\" (default max)\nBadge::new().count(1000).max(999) // Shows \"999+\"\n\n// Zero count hides the badge\nBadge::new().count(0) // Badge not visible\n```\n\n[Badge]: https://docs.rs/gpui_component/latest/gpui_component/badge/struct.Badge.html\n[Sizable]: https://docs.rs/gpui-component/latest/gpui_component/trait.Sizable.html\n" }, { "path": "docs/docs/components/button.md", "content": "---\ntitle: Button\ndescription: Displays a button or a component that looks like a button.\n---\n\n# Button\n\nThe [Button] element with multiple variants, sizes, and states. Supports icons, loading states, and can be grouped together.\n\n## Import\n\n```rust\nuse gpui_component::button::{Button, ButtonGroup};\n```\n\n## Usage\n\n### Basic Button\n\n```rust\nButton::new(\"my-button\")\n .label(\"Click me\")\n .on_click(|_, _, _| {\n println!(\"Button clicked!\");\n })\n```\n\n### Variants\n\n```rust\n// Primary button\nButton::new(\"btn-primary\").primary().label(\"Primary\")\n\n// Secondary button (default)\nButton::new(\"btn-secondary\").label(\"Secondary\")\n\n// Danger button\nButton::new(\"btn-danger\").danger().label(\"Delete\")\n\n// Warning button\nButton::new(\"btn-warning\").warning().label(\"Warning\")\n\n// Success button\nButton::new(\"btn-success\").success().label(\"Success\")\n\n// Info button\nButton::new(\"btn-info\").info().label(\"Info\")\n\n// Ghost button\nButton::new(\"btn-ghost\").ghost().label(\"Ghost\")\n\n// Link button\nButton::new(\"btn-link\").link().label(\"Link\")\n\n// Text button\nButton::new(\"btn-text\").text().label(\"Text\")\n```\n\n### Outline Buttons\n\nOutline style is not a variant itself, but can be combined with other variants.\n\n```rust\nButton::new(\"btn\").primary().outline().label(\"Primary Outline\")\nButton::new(\"btn\").danger().outline().label(\"Danger Outline\")\n```\n\n### Compact Button\n\nThe `compact` method reduces the padding of the button for a more condensed appearance.\n\n```rust\n// Compact (reduced padding)\nButton::new(\"btn\")\n .label(\"Compact\")\n .compact()\n```\n\n### Sizeable\n\nThe Button supports the [Sizable] trait for different sizes.\n\n```rust\nButton::new(\"btn\").xsmall().label(\"Extra Small\")\nButton::new(\"btn\").small().label(\"Small\")\nButton::new(\"btn\").label(\"Medium\") // default\nButton::new(\"btn\").large().label(\"Large\")\n```\n\n### With Icons\n\nThe `icon` method supports multiple types, allowing you to use different visual indicators:\n\n- **[Icon] / [IconName]** - Static icons for actions and visual cues\n- **[Spinner]** - Animated loading indicator for async operations\n- **[ProgressCircle]** - Circular progress indicator showing completion percentage\n\nAll icon types automatically adapt to the button's size and can be customized with colors and other properties.\n\n#### Icon Types\n\n```rust\nuse gpui_component::{Icon, IconName};\n\n// Using IconName (simplest)\nButton::new(\"btn\")\n .icon(IconName::Check)\n .label(\"Confirm\")\n\n// Using Icon with custom size\nButton::new(\"btn\")\n .icon(Icon::new(IconName::Heart))\n .label(\"Like\")\n\n// Icon only (no label)\nButton::new(\"btn\")\n .icon(IconName::Search)\n```\n\n#### Spinner Icon\n\nUse a [Spinner] to indicate loading or processing state:\n\n```rust\nuse gpui_component::spinner::Spinner;\n\n// Basic spinner\nButton::new(\"btn\")\n .icon(Spinner::new())\n .label(\"Loading...\")\n\n// Spinner with custom color\nButton::new(\"btn\")\n .icon(Spinner::new().color(cx.theme().blue))\n .label(\"Processing\")\n\n// Spinner with icon\nButton::new(\"btn\")\n .icon(Spinner::new().icon(IconName::LoaderCircle))\n .label(\"Syncing\")\n```\n\n#### ProgressCircle Icon\n\nUse a [ProgressCircle] to show progress percentage:\n\n```rust\nuse gpui_component::progress::ProgressCircle;\n\n// Basic progress circle\nButton::new(\"btn\")\n .icon(ProgressCircle::new(\"install-progress\").value(45.0))\n .label(\"Installing...\")\n\n// Progress circle with custom color\nButton::new(\"btn\")\n .primary()\n .icon(\n ProgressCircle::new(\"download-progress\")\n .value(75.0)\n .color(cx.theme().primary_foreground)\n )\n .label(\"Downloading\")\n\n// Different sizes\nButton::new(\"btn\")\n .small()\n .icon(ProgressCircle::new(\"progress-1\").value(60.0))\n .label(\"Installing...\")\n\nButton::new(\"btn\")\n .large()\n .icon(ProgressCircle::new(\"progress-2\").value(80.0))\n .label(\"Installing...\")\n```\n\n#### Dynamic Icon Updates\n\nIcons can be updated dynamically based on component state:\n\n```rust\nstruct InstallButton {\n progress: f32,\n is_installing: bool,\n}\n\nimpl InstallButton {\n fn render(&mut self, _: &mut Window, cx: &mut Context) -> impl IntoElement {\n let button = Button::new(\"install-btn\")\n .label(if self.is_installing {\n \"Installing...\"\n } else {\n \"Install\"\n });\n\n if self.is_installing {\n button.icon(\n ProgressCircle::new(\"install-progress\")\n .value(self.progress)\n )\n } else {\n button.icon(IconName::Download)\n }\n }\n}\n```\n\n#### Loading State with Icons\n\nWhen a button is in loading state, it automatically handles icon transitions:\n\n```rust\n// If icon is already a Spinner or ProgressCircle, it will be shown during loading\nButton::new(\"btn\")\n .icon(Spinner::new())\n .label(\"Processing\")\n .loading(true) // Spinner will continue to show\n\n// If icon is a regular Icon, it will be replaced with a Spinner during loading\nButton::new(\"btn\")\n .icon(IconName::Save)\n .label(\"Saving\")\n .loading(true) // Icon will be replaced with Spinner\n```\n\n### With a dropdown caret icon\n\nThe `.dropdown_caret` method can allows adding a dropdown caret icon to end of the button.\n\n```rust\nButton::new(\"btn\")\n .label(\"Options\")\n .dropdown_caret(true)\n```\n\n### Button States\n\nThere have `disabled`, `loading`, `selected` state for buttons to indicate different statuses.\n\n```rust\n// Disabled\nButton::new(\"btn\")\n .label(\"Disabled\")\n .disabled(true)\n\n// Loading\nButton::new(\"btn\")\n .label(\"Loading\")\n .loading(true)\n\n// Selected\nButton::new(\"btn\")\n .label(\"Selected\")\n .selected(true)\n```\n\n## Button Group\n\n```rust\nButtonGroup::new(\"btn-group\")\n .child(Button::new(\"btn1\").label(\"One\"))\n .child(Button::new(\"btn2\").label(\"Two\"))\n .child(Button::new(\"btn3\").label(\"Three\"))\n```\n\n### Toggle Button Group\n\n```rust\nButtonGroup::new(\"toggle-group\")\n .multiple(true) // Allow multiple selections\n .child(Button::new(\"btn1\").label(\"Option 1\").selected(true))\n .child(Button::new(\"btn2\").label(\"Option 2\"))\n .child(Button::new(\"btn3\").label(\"Option 3\"))\n .on_click(|selected_indices, _, _| {\n println!(\"Selected: {:?}\", selected_indices);\n })\n```\n\n## Custom Variant\n\n```rust\nuse gpui_component::button::ButtonCustomVariant;\n\nlet custom = ButtonCustomVariant::new(cx)\n .color(cx.theme().magenta)\n .foreground(cx.theme().primary_foreground)\n .border(cx.theme().magenta)\n .hover(cx.theme().magenta.opacity(0.1))\n .active(cx.theme().magenta);\n\nButton::new(\"custom-btn\")\n .custom(custom)\n .label(\"Custom Button\")\n```\n\n## API Reference\n\n- [Button]\n- [ButtonGroup]\n- [ButtonCustomVariant]\n\n## Examples\n\n### With Tooltip\n\n```rust\nButton::new(\"btn\")\n .label(\"Hover me\")\n .tooltip(\"This is a helpful tooltip\")\n```\n\n### Custom Children\n\n```rust\nButton::new(\"btn\")\n .child(\n h_flex()\n .items_center()\n .gap_2()\n .child(\"Custom Content\")\n .child(IconName::ChevronDown)\n .child(IconName::Eye)\n )\n```\n\n[Button]: https://docs.rs/gpui-component/latest/gpui_component/button/struct.Button.html\n[ButtonGroup]: https://docs.rs/gpui-component/latest/gpui_component/button/struct.ButtonGroup.html\n[ButtonCustomVariant]: https://docs.rs/gpui-component/latest/gpui_component/button/struct.ButtonCustomVariant.html\n[Sizable]: https://docs.rs/gpui-component/latest/gpui_component/trait.Sizable.html\n[Spinner]: https://docs.rs/gpui-component/latest/gpui_component/spinner/struct.Spinner.html\n[ProgressCircle]: https://docs.rs/gpui-component/latest/gpui_component/progress/struct.ProgressCircle.html\n[Icon]: https://docs.rs/gpui-component/latest/gpui_component/icon/struct.Icon.html\n[IconName]: https://docs.rs/gpui-component/latest/gpui_component/icon/enum.IconName.html\n" }, { "path": "docs/docs/components/calendar.md", "content": "---\ntitle: Calendar\ndescription: A flexible calendar component for displaying months, navigating dates, and selecting single dates or date ranges.\n---\n\n# Calendar\n\nA standalone calendar component that provides a rich interface for date selection and navigation. The Calendar component supports single date selection, date range selection, multiple month views, custom disabled dates, and comprehensive keyboard navigation.\n\n- [CalendarState]: For managing calendar state and selection.\n- [Calendar]: For rendering the calendar UI.\n\n## Import\n\n```rust\nuse gpui_component::{\n calendar::{Calendar, CalendarState, CalendarEvent, Date, Matcher},\n};\n```\n\n## Usage\n\n### Basic Calendar\n\n```rust\nlet state = cx.new(|cx| CalendarState::new(window, cx));\nCalendar::new(&state)\n```\n\n### Calendar with Initial Date\n\n```rust\nuse chrono::Local;\n\nlet state = cx.new(|cx| {\n let mut state = CalendarState::new(window, cx);\n state.set_date(Local::now().naive_local().date(), window, cx);\n state\n});\n\nCalendar::new(&state)\n```\n\n### Date Range Calendar\n\n```rust\nuse chrono::{Local, Days};\n\nlet state = cx.new(|cx| {\n let mut state = CalendarState::new(window, cx);\n let now = Local::now().naive_local().date();\n state.set_date(\n Date::Range(Some(now), now.checked_add_days(Days::new(7))),\n window,\n cx\n );\n state\n});\n\nCalendar::new(&state)\n```\n\n### Multiple Months Display\n\n```rust\n// Show 2 months side by side\nCalendar::new(&state)\n .number_of_months(2)\n\n// Show 3 months\nCalendar::new(&state)\n .number_of_months(3)\n```\n\n### Calendar Sizes\n\n```rust\nCalendar::new(&state).large()\nCalendar::new(&state) // medium (default)\nCalendar::new(&state).small()\n```\n\n## Date Restrictions\n\n### Disabled Weekends\n\n```rust\nlet state = cx.new(|cx| {\n CalendarState::new(window, cx)\n .disabled_matcher(vec![0, 6]) // Sunday=0, Saturday=6\n});\n\nCalendar::new(&state)\n```\n\n### Disabled Specific Weekdays\n\n```rust\n// Disable Sundays, Wednesdays, and Saturdays\nlet state = cx.new(|cx| {\n CalendarState::new(window, cx)\n .disabled_matcher(vec![0, 3, 6])\n});\n\nCalendar::new(&state)\n```\n\n### Disabled Date Range\n\n```rust\nuse chrono::{Local, Days};\n\nlet now = Local::now().naive_local().date();\n\nlet state = cx.new(|cx| {\n CalendarState::new(window, cx)\n .disabled_matcher(Matcher::range(\n Some(now),\n now.checked_add_days(Days::new(7)),\n ))\n});\n\nCalendar::new(&state)\n```\n\n### Disabled Date Interval\n\n```rust\n// Disable dates outside the interval (before/after specified dates)\nlet state = cx.new(|cx| {\n CalendarState::new(window, cx)\n .disabled_matcher(Matcher::interval(\n Some(now.checked_sub_days(Days::new(30)).unwrap()),\n now.checked_add_days(Days::new(30))\n ))\n});\n\nCalendar::new(&state)\n```\n\n### Custom Disabled Dates\n\n```rust\n// Disable first 5 days of each month\nlet state = cx.new(|cx| {\n CalendarState::new(window, cx)\n .disabled_matcher(Matcher::custom(|date| {\n date.day0() < 5 // day0() returns 0-based day\n }))\n});\n\nCalendar::new(&state)\n\n// Disable all Mondays\nlet state = cx.new(|cx| {\n CalendarState::new(window, cx)\n .disabled_matcher(Matcher::custom(|date| {\n date.weekday() == chrono::Weekday::Mon\n }))\n});\n\nCalendar::new(&state)\n\n// Disable past dates\nlet state = cx.new(|cx| {\n CalendarState::new(window, cx)\n .disabled_matcher(Matcher::custom(|date| {\n *date < Local::now().naive_local().date()\n }))\n});\n\nCalendar::new(&state)\n```\n\n## Month/Year Navigation\n\nThe Calendar automatically provides navigation controls:\n\n- **Previous/Next Month**: Arrow buttons in the header\n- **Month Selection**: Click on month name to open month picker\n- **Year Selection**: Click on year to open year picker\n- **Year Pages**: Navigate through 20-year pages in year view\n\n### Custom Year Range\n\n```rust\nlet state = cx.new(|cx| {\n CalendarState::new(window, cx)\n .year_range((2020, 2030)) // Limit to specific year range\n});\n\nCalendar::new(&state)\n```\n\n## Handle Selection Events\n\n```rust\nlet state = cx.new(|cx| CalendarState::new(window, cx));\n\ncx.subscribe(&state, |view, _, event, _| {\n match event {\n CalendarEvent::Selected(date) => {\n match date {\n Date::Single(Some(selected_date)) => {\n println!(\"Date selected: {}\", selected_date);\n }\n Date::Range(Some(start), Some(end)) => {\n println!(\"Range selected: {} to {}\", start, end);\n }\n Date::Range(Some(start), None) => {\n println!(\"Range start: {}\", start);\n }\n _ => {\n println!(\"Selection cleared\");\n }\n }\n }\n }\n});\n\nCalendar::new(&state)\n```\n\n## Advanced Examples\n\n### Business Days Only Calendar\n\n```rust\nuse chrono::Weekday;\n\nlet state = cx.new(|cx| {\n CalendarState::new(window, cx)\n .disabled_matcher(Matcher::custom(|date| {\n matches!(date.weekday(), Weekday::Sat | Weekday::Sun)\n }))\n});\n\nCalendar::new(&state)\n```\n\n### Holiday Calendar\n\n```rust\nuse chrono::NaiveDate;\nuse std::collections::HashSet;\n\n// Define holidays\nlet holidays: HashSet = [\n NaiveDate::from_ymd_opt(2024, 1, 1).unwrap(), // New Year\n NaiveDate::from_ymd_opt(2024, 7, 4).unwrap(), // Independence Day\n NaiveDate::from_ymd_opt(2024, 12, 25).unwrap(), // Christmas\n].into_iter().collect();\n\nlet state = cx.new(|cx| {\n CalendarState::new(window, cx)\n .disabled_matcher(Matcher::custom(move |date| {\n holidays.contains(date)\n }))\n});\n\nCalendar::new(&state)\n```\n\n### Multi-Month Range Selector\n\n```rust\nlet state = cx.new(|cx| {\n let mut state = CalendarState::new(window, cx);\n state.set_date(Date::Range(None, None), window, cx); // Range mode\n state\n});\n\nCalendar::new(&state)\n .number_of_months(3) // Show 3 months for easier range selection\n```\n\n### Quarterly View Calendar\n\n```rust\nlet state = cx.new(|cx| CalendarState::new(window, cx));\n\n// Update to show current quarter's months\nCalendar::new(&state)\n .number_of_months(3)\n```\n\n## Custom Styling\n\n```rust\nuse gpui::{px, relative};\n\nCalendar::new(&calendar)\n .p_4() // Custom padding\n .bg(cx.theme().secondary) // Custom background\n .border_2() // Custom border\n .border_color(cx.theme().primary) // Custom border color\n .rounded(px(12.)) // Custom border radius\n .w(px(400.)) // Custom width\n .h(px(350.)) // Custom height\n```\n\n## API Reference\n\n- [Calendar]\n- [CalendarState]\n- [RangeMatcher]\n\n## Examples\n\n### Event Planning Calendar\n\n```rust\nlet event_calendar = cx.new(|cx| {\n let mut state = CalendarState::new(window, cx);\n // Disable past dates and weekends\n state = state.disabled_matcher(Matcher::custom(|date| {\n let now = Local::now().naive_local().date();\n *date < now || matches!(date.weekday(), Weekday::Sat | Weekday::Sun)\n }));\n state\n});\n\nCalendar::new(&event_calendar)\n .large() // Easier to see and interact with\n```\n\n### Vacation Booking Calendar\n\n```rust\nlet vacation_calendar = cx.new(|cx| {\n let mut state = CalendarState::new(window, cx);\n state.set_date(Date::Range(None, None), window, cx); // Range mode\n state\n});\n\nCalendar::new(&vacation_calendar)\n .number_of_months(2) // Show 2 months for range selection\n```\n\n### Report Date Range Selector\n\n```rust\nlet report_calendar = cx.new(|cx| {\n let mut state = CalendarState::new(window, cx)\n .year_range((2020, 2025)); // Limit to business years\n\n state.set_date(Date::Range(None, None), window, cx);\n state\n});\n\nCalendar::new(&report_calendar)\n .number_of_months(3)\n .small() // Compact for dashboard use\n```\n\n### Availability Calendar\n\n```rust\nuse std::collections::HashSet;\n\nlet unavailable_dates: HashSet = get_unavailable_dates();\n\nlet availability_calendar = cx.new(|cx| {\n CalendarState::new(window, cx)\n .disabled_matcher(Matcher::custom(move |date| {\n unavailable_dates.contains(date)\n }))\n});\n\nCalendar::new(&availability_calendar)\n .number_of_months(2)\n```\n\nThe Calendar component provides a foundation for any date-related UI requirements, from simple date pickers to complex scheduling interfaces.\n\n[Calendar]: https://docs.rs/gpui-component/latest/gpui_component/calendar/struct.Calendar.html\n[CalendarState]: https://docs.rs/gpui-component/latest/gpui_component/calendar/struct.CalendarState.html\n[RangeMatcher]: https://docs.rs/gpui-component/latest/gpui_component/calendar/struct.RangeMatcher.html\n" }, { "path": "docs/docs/components/chart.md", "content": "---\ntitle: Chart\ndescription: Beautiful charts and graphs for data visualization including line, bar, area, pie, and candlestick charts.\n---\n\n# Chart\n\nA comprehensive charting library providing Line, Bar, Area, Pie, and Candlestick charts for data visualization. The charts feature smooth animations, customizable styling, tooltips, legends, and automatic theming that adapts to your application's theme.\n\n## Import\n\n```rust\nuse gpui_component::chart::{LineChart, BarChart, AreaChart, PieChart, CandlestickChart};\n```\n\n## Chart Types\n\n### LineChart\n\nA line chart displays data points connected by straight line segments, perfect for showing trends over time.\n\n#### Basic Line Chart\n\n```rust\n#[derive(Clone)]\nstruct DataPoint {\n x: String,\n y: f64,\n}\n\nlet data = vec![\n DataPoint { x: \"Jan\".to_string(), y: 100.0 },\n DataPoint { x: \"Feb\".to_string(), y: 150.0 },\n DataPoint { x: \"Mar\".to_string(), y: 120.0 },\n];\n\nLineChart::new(data)\n .x(|d| d.x.clone())\n .y(|d| d.y)\n```\n\n#### Line Chart Variants\n\n```rust\n// Basic curved line (default)\nLineChart::new(data)\n .x(|d| d.month.clone())\n .y(|d| d.value)\n\n// Linear interpolation\nLineChart::new(data)\n .x(|d| d.month.clone())\n .y(|d| d.value)\n .linear()\n\n// Step after interpolation\nLineChart::new(data)\n .x(|d| d.month.clone())\n .y(|d| d.value)\n .step_after()\n\n// With dots at data points\nLineChart::new(data)\n .x(|d| d.month.clone())\n .y(|d| d.value)\n .dot()\n\n// Custom stroke color\nLineChart::new(data)\n .x(|d| d.month.clone())\n .y(|d| d.value)\n .stroke(cx.theme().success)\n```\n\n#### Tick Control\n\n```rust\n// Show every tick\nLineChart::new(data)\n .x(|d| d.month.clone())\n .y(|d| d.value)\n .tick_margin(1)\n\n// Show every 2nd tick\nLineChart::new(data)\n .x(|d| d.month.clone())\n .y(|d| d.value)\n .tick_margin(2)\n```\n\n### BarChart\n\nA bar chart uses rectangular bars to show comparisons among categories.\n\n#### Basic Bar Chart\n\n```rust\nBarChart::new(data)\n .x(|d| d.category.clone())\n .y(|d| d.value)\n```\n\n#### Bar Chart Customization\n\n```rust\n// Custom fill colors\nBarChart::new(data)\n .x(|d| d.category.clone())\n .y(|d| d.value)\n .fill(|d| d.color)\n\n// With labels on bars\nBarChart::new(data)\n .x(|d| d.category.clone())\n .y(|d| d.value)\n .label(|d| format!(\"{}\", d.value))\n\n// Custom tick spacing\nBarChart::new(data)\n .x(|d| d.category.clone())\n .y(|d| d.value)\n .tick_margin(2)\n```\n\n### AreaChart\n\nAn area chart displays quantitative data visually, similar to a line chart but with the area below the line filled.\n\n#### Basic Area Chart\n\n```rust\nAreaChart::new(data)\n .x(|d| d.time.clone())\n .y(|d| d.value)\n```\n\n#### Stacked Area Charts\n\n```rust\n// Multi-series area chart\nAreaChart::new(data)\n .x(|d| d.date.clone())\n .y(|d| d.desktop) // First series\n .stroke(cx.theme().chart_1)\n .fill(cx.theme().chart_1.opacity(0.4))\n .y(|d| d.mobile) // Second series\n .stroke(cx.theme().chart_2)\n .fill(cx.theme().chart_2.opacity(0.4))\n```\n\n#### Area Chart Styling\n\n```rust\nuse gpui::{linear_gradient, linear_color_stop};\n\n// With gradient fill\nAreaChart::new(data)\n .x(|d| d.month.clone())\n .y(|d| d.value)\n .fill(linear_gradient(\n 0.,\n linear_color_stop(cx.theme().chart_1.opacity(0.4), 1.),\n linear_color_stop(cx.theme().background.opacity(0.3), 0.),\n ))\n\n// Different interpolation styles\nAreaChart::new(data)\n .x(|d| d.month.clone())\n .y(|d| d.value)\n .linear() // or .step_after()\n```\n\n### PieChart\n\nA pie chart displays data as slices of a circular chart, ideal for showing proportions.\n\n#### Basic Pie Chart\n\n```rust\nPieChart::new(data)\n .value(|d| d.amount as f32)\n .outer_radius(100.)\n```\n\n#### Donut Chart\n\n```rust\nPieChart::new(data)\n .value(|d| d.amount as f32)\n .outer_radius(100.)\n .inner_radius(60.) // Creates donut effect\n```\n\n#### Pie Chart Customization\n\n```rust\n// Custom colors\nPieChart::new(data)\n .value(|d| d.amount as f32)\n .outer_radius(100.)\n .color(|d| d.color)\n\n// With padding between slices\nPieChart::new(data)\n .value(|d| d.amount as f32)\n .outer_radius(100.)\n .inner_radius(60.)\n .pad_angle(4. / 100.) // 4% padding\n```\n\n### CandlestickChart\n\nA candlestick chart displays financial data using OHLC (Open, High, Low, Close) values, perfect for visualizing stock prices and market trends.\n\n#### Basic Candlestick Chart\n\n```rust\n#[derive(Clone)]\nstruct StockPrice {\n pub date: String,\n pub open: f64,\n pub high: f64,\n pub low: f64,\n pub close: f64,\n}\n\nlet data = vec![\n StockPrice { date: \"Jan\".to_string(), open: 100.0, high: 110.0, low: 95.0, close: 105.0 },\n StockPrice { date: \"Feb\".to_string(), open: 105.0, high: 115.0, low: 100.0, close: 112.0 },\n StockPrice { date: \"Mar\".to_string(), open: 112.0, high: 120.0, low: 108.0, close: 115.0 },\n];\n\nCandlestickChart::new(data)\n .x(|d| d.date.clone())\n .open(|d| d.open)\n .high(|d| d.high)\n .low(|d| d.low)\n .close(|d| d.close)\n```\n\n#### Candlestick Chart Customization\n\n```rust\n// Adjust body width ratio (default: 0.6)\nCandlestickChart::new(data)\n .x(|d| d.date.clone())\n .open(|d| d.open)\n .high(|d| d.high)\n .low(|d| d.low)\n .close(|d| d.close)\n .body_width_ratio(0.4) // Narrower bodies\n\n// Custom tick spacing\nCandlestickChart::new(data)\n .x(|d| d.date.clone())\n .open(|d| d.open)\n .high(|d| d.high)\n .low(|d| d.low)\n .close(|d| d.close)\n .tick_margin(2) // Show every 2nd tick\n```\n\n#### Candlestick Chart Colors\n\nThe candlestick chart automatically uses theme colors:\n\n- **Bullish** (close > open): `bullish` color (green)\n- **Bearish** (close < open): `bearish` color (red)\n\n## Data Structures\n\n### Example Data Types\n\n```rust\n// Time series data\n#[derive(Clone)]\nstruct DailyDevice {\n pub date: String,\n pub desktop: f64,\n pub mobile: f64,\n}\n\n// Category data with styling\n#[derive(Clone)]\nstruct MonthlyDevice {\n pub month: String,\n pub desktop: f64,\n pub color_alpha: f32,\n}\n\nimpl MonthlyDevice {\n pub fn color(&self, base_color: Hsla) -> Hsla {\n base_color.alpha(self.color_alpha)\n }\n}\n\n// Financial data\n#[derive(Clone)]\nstruct StockPrice {\n pub date: String,\n pub open: f64,\n pub high: f64,\n pub low: f64,\n pub close: f64,\n pub volume: u64,\n}\n```\n\n## Chart Configuration\n\n### Container Setup\n\n```rust\nfn chart_container(\n title: &str,\n chart: impl IntoElement,\n center: bool,\n cx: &mut Context,\n) -> impl IntoElement {\n v_flex()\n .flex_1()\n .h_full()\n .border_1()\n .border_color(cx.theme().border)\n .rounded(cx.theme().radius_lg)\n .p_4()\n .child(\n div()\n .when(center, |this| this.text_center())\n .font_semibold()\n .child(title.to_string()),\n )\n .child(\n div()\n .when(center, |this| this.text_center())\n .text_color(cx.theme().muted_foreground)\n .text_sm()\n .child(\"Data period label\"),\n )\n .child(div().flex_1().py_4().child(chart))\n .child(\n div()\n .when(center, |this| this.text_center())\n .font_semibold()\n .text_sm()\n .child(\"Summary statistic\"),\n )\n .child(\n div()\n .when(center, |this| this.text_center())\n .text_color(cx.theme().muted_foreground)\n .text_sm()\n .child(\"Additional context\"),\n )\n}\n```\n\n### Theme Integration\n\n```rust\n// Charts automatically use theme colors\nlet chart = LineChart::new(data)\n .x(|d| d.date.clone())\n .y(|d| d.value)\n .stroke(cx.theme().chart_1); // Uses theme chart colors\n\n// Available theme chart colors:\n// cx.theme().chart_1\n// cx.theme().chart_2\n// cx.theme().chart_3\n// ... up to chart_5\n```\n\n## API Reference\n\n- [LineChart]\n- [BarChart]\n- [AreaChart]\n- [PieChart]\n- [CandlestickChart]\n\n## Examples\n\n### Sales Dashboard\n\n```rust\n#[derive(Clone)]\nstruct SalesData {\n month: String,\n revenue: f64,\n profit: f64,\n region: String,\n}\n\nfn sales_dashboard(data: Vec, cx: &mut Context) -> impl IntoElement {\n v_flex()\n .gap_4()\n .child(\n h_flex()\n .gap_4()\n .child(\n chart_container(\n \"Monthly Revenue\",\n LineChart::new(data.clone())\n .x(|d| d.month.clone())\n .y(|d| d.revenue)\n .stroke(cx.theme().chart_1)\n .dot(),\n false,\n cx,\n )\n )\n .child(\n chart_container(\n \"Profit Breakdown\",\n PieChart::new(data.clone())\n .value(|d| d.profit as f32)\n .outer_radius(80.)\n .color(|d| match d.region.as_str() {\n \"North\" => cx.theme().chart_1,\n \"South\" => cx.theme().chart_2,\n \"East\" => cx.theme().chart_3,\n \"West\" => cx.theme().chart_4,\n _ => cx.theme().chart_5,\n }),\n true,\n cx,\n )\n )\n )\n .child(\n chart_container(\n \"Regional Performance\",\n BarChart::new(data)\n .x(|d| d.region.clone())\n .y(|d| d.revenue)\n .fill(|d| match d.region.as_str() {\n \"North\" => cx.theme().chart_1,\n \"South\" => cx.theme().chart_2,\n \"East\" => cx.theme().chart_3,\n \"West\" => cx.theme().chart_4,\n _ => cx.theme().chart_5,\n })\n .label(|d| format!(\"${:.0}k\", d.revenue / 1000.)),\n false,\n cx,\n )\n )\n}\n```\n\n### Multi-Series Time Chart\n\n```rust\n#[derive(Clone)]\nstruct DeviceUsage {\n date: String,\n desktop: f64,\n mobile: f64,\n tablet: f64,\n}\n\nfn device_usage_chart(data: Vec, cx: &mut Context) -> impl IntoElement {\n chart_container(\n \"Device Usage Over Time\",\n AreaChart::new(data)\n .x(|d| d.date.clone())\n .y(|d| d.desktop)\n .stroke(cx.theme().chart_1)\n .fill(linear_gradient(\n 0.,\n linear_color_stop(cx.theme().chart_1.opacity(0.4), 1.),\n linear_color_stop(cx.theme().background.opacity(0.3), 0.),\n ))\n .y(|d| d.mobile)\n .stroke(cx.theme().chart_2)\n .fill(linear_gradient(\n 0.,\n linear_color_stop(cx.theme().chart_2.opacity(0.4), 1.),\n linear_color_stop(cx.theme().background.opacity(0.3), 0.),\n ))\n .y(|d| d.tablet)\n .stroke(cx.theme().chart_3)\n .fill(linear_gradient(\n 0.,\n linear_color_stop(cx.theme().chart_3.opacity(0.4), 1.),\n linear_color_stop(cx.theme().background.opacity(0.3), 0.),\n ))\n .tick_margin(3),\n false,\n cx,\n )\n}\n```\n\n### Financial Chart\n\n```rust\n#[derive(Clone)]\nstruct StockData {\n date: String,\n price: f64,\n volume: u64,\n}\n\n#[derive(Clone)]\nstruct StockOHLC {\n date: String,\n open: f64,\n high: f64,\n low: f64,\n close: f64,\n}\n\nfn stock_chart(ohlc_data: Vec, price_data: Vec, cx: &mut Context) -> impl IntoElement {\n v_flex()\n .gap_4()\n .child(\n chart_container(\n \"Stock Price - Candlestick\",\n CandlestickChart::new(ohlc_data.clone())\n .x(|d| d.date.clone())\n .open(|d| d.open)\n .high(|d| d.high)\n .low(|d| d.low)\n .close(|d| d.close)\n .tick_margin(3),\n false,\n cx,\n )\n )\n .child(\n chart_container(\n \"Stock Price - Line\",\n LineChart::new(price_data.clone())\n .x(|d| d.date.clone())\n .y(|d| d.price)\n .stroke(cx.theme().chart_1)\n .linear()\n .tick_margin(5),\n false,\n cx,\n )\n )\n .child(\n chart_container(\n \"Trading Volume\",\n BarChart::new(price_data)\n .x(|d| d.date.clone())\n .y(|d| d.volume as f64)\n .fill(|d| {\n if d.volume > 1000000 {\n cx.theme().chart_1\n } else {\n cx.theme().muted_foreground.opacity(0.6)\n }\n })\n .tick_margin(5),\n false,\n cx,\n )\n )\n}\n```\n\n## Customization Options\n\n### Color Schemes\n\n```rust\n// Theme-based colors (recommended)\nLineChart::new(data)\n .x(|d| d.x.clone())\n .y(|d| d.y)\n .stroke(cx.theme().chart_1)\n\n// Custom color palette\nlet colors = [\n cx.theme().success,\n cx.theme().warning,\n cx.theme().destructive,\n cx.theme().info,\n cx.theme().chart_1,\n];\n\nBarChart::new(data)\n .x(|d| d.category.clone())\n .y(|d| d.value)\n .fill(|d| colors[d.category_index % colors.len()])\n```\n\n### Responsive Design\n\n```rust\n// Container with responsive sizing\ndiv()\n .flex_1()\n .min_h(px(300.))\n .max_h(px(600.))\n .w_full()\n .child(\n LineChart::new(data)\n .x(|d| d.x.clone())\n .y(|d| d.y)\n )\n```\n\n### Grid and Axis Styling\n\nCharts automatically include:\n\n- Grid lines with dashed appearance\n- X-axis labels with smart positioning\n- Y-axis scaling starting from zero\n- Responsive tick spacing based on `tick_margin`\n\n## Performance Considerations\n\n### Large Datasets\n\n```rust\n// For large datasets, consider data sampling\nlet sampled_data: Vec<_> = data\n .iter()\n .step_by(5) // Show every 5th point\n .cloned()\n .collect();\n\nLineChart::new(sampled_data)\n .x(|d| d.date.clone())\n .y(|d| d.value)\n .tick_margin(3) // Reduce tick density\n```\n\n### Memory Optimization\n\n```rust\n// Use efficient data accessors\nLineChart::new(data)\n .x(|d| d.date.clone()) // Clone only when necessary\n .y(|d| d.value) // Direct field access\n```\n\n## Integration Examples\n\n### With State Management\n\n```rust\nstruct ChartComponent {\n data: Vec,\n chart_type: ChartType,\n time_range: TimeRange,\n}\n\nimpl ChartComponent {\n fn render_chart(&self, cx: &mut Context) -> impl IntoElement {\n match self.chart_type {\n ChartType::Line => LineChart::new(self.filtered_data())\n .x(|d| d.date.clone())\n .y(|d| d.value)\n .into_any_element(),\n ChartType::Bar => BarChart::new(self.filtered_data())\n .x(|d| d.date.clone())\n .y(|d| d.value)\n .into_any_element(),\n ChartType::Area => AreaChart::new(self.filtered_data())\n .x(|d| d.date.clone())\n .y(|d| d.value)\n .into_any_element(),\n }\n }\n\n fn filtered_data(&self) -> Vec {\n self.data\n .iter()\n .filter(|d| self.time_range.contains(&d.date))\n .cloned()\n .collect()\n }\n}\n```\n\n### Real-time Updates\n\n```rust\nstruct LiveChart {\n data: Vec,\n max_points: usize,\n}\n\nimpl LiveChart {\n fn add_data_point(&mut self, point: DataPoint) {\n self.data.push(point);\n if self.data.len() > self.max_points {\n self.data.remove(0); // Remove oldest point\n }\n }\n\n fn render(&self, cx: &mut Context) -> impl IntoElement {\n LineChart::new(self.data.clone())\n .x(|d| d.timestamp.clone())\n .y(|d| d.value)\n .linear()\n .dot()\n }\n}\n```\n\n[LineChart]: https://docs.rs/gpui-component/latest/gpui_component/chart/struct.LineChart.html\n[BarChart]: https://docs.rs/gpui-component/latest/gpui_component/chart/struct.BarChart.html\n[AreaChart]: https://docs.rs/gpui-component/latest/gpui_component/chart/struct.AreaChart.html\n[PieChart]: https://docs.rs/gpui-component/latest/gpui_component/chart/struct.PieChart.html\n[CandlestickChart]: https://docs.rs/gpui-component/latest/gpui_component/chart/struct.CandlestickChart.html\n" }, { "path": "docs/docs/components/checkbox.md", "content": "---\ntitle: Checkbox\ndescription: A control that allows the user to toggle between checked and not checked.\n---\n\n# Checkbox\n\nA checkbox component for binary choices. Supports labels, disabled state, and different sizes.\n\n## Import\n\n```rust\nuse gpui_component::checkbox::Checkbox;\n```\n\n## Usage\n\n### Basic Checkbox\n\n```rust\nCheckbox::new(\"my-checkbox\")\n .label(\"Accept terms and conditions\")\n .checked(false)\n .on_click(|checked, _, _| {\n println!(\"Checkbox is now: {}\", checked);\n })\n```\n\nThe `on_click` callback is triggered when the user toggles the checkbox, receiving the **new checked state**.\n\n### Controlled Checkbox\n\n```rust\nstruct MyView {\n is_checked: bool,\n}\n\nimpl Render for MyView {\n fn render(&mut self, _: &mut Window, cx: &mut Context) -> impl IntoElement {\n Checkbox::new(\"checkbox\")\n .label(\"Option\")\n .checked(self.is_checked)\n .on_click(cx.listener(|view, checked, _, cx| {\n view.is_checked = *checked;\n cx.notify();\n }))\n }\n}\n```\n\n### Different Sizes\n\n```rust\nCheckbox::new(\"cb\").text_xs().label(\"Extra Small\")\nCheckbox::new(\"cb\").text_sm().label(\"Small\")\nCheckbox::new(\"cb\").label(\"Medium\") // default\nCheckbox::new(\"cb\").text_lg().label(\"Large\")\n```\n\n### Disabled State\n\n```rust\nCheckbox::new(\"checkbox\")\n .label(\"Disabled checkbox\")\n .disabled(true)\n .checked(false)\n```\n\n### Without Label\n\n```rust\nCheckbox::new(\"checkbox\")\n .checked(true)\n```\n\n### Custom Tab Order\n\n```rust\nCheckbox::new(\"checkbox\")\n .label(\"Custom tab order\")\n .tab_index(2)\n .tab_stop(true)\n```\n\n## API Reference\n\n- [Checkbox]\n\n### Styling\n\nImplements `Sizable` and `Disableable` traits:\n\n- `text_xs()` - Extra small text\n- `text_sm()` - Small text\n- `text_base()` - Base text (default)\n- `text_lg()` - Large text\n- `disabled(bool)` - Disabled state\n\n## Examples\n\n### Checkbox List\n\n```rust\nv_flex()\n .gap_2()\n .child(Checkbox::new(\"cb1\").label(\"Option 1\").checked(true))\n .child(Checkbox::new(\"cb2\").label(\"Option 2\").checked(false))\n .child(Checkbox::new(\"cb3\").label(\"Option 3\").checked(false))\n```\n\n### Form Integration\n\n```rust\nstruct FormView {\n agree_terms: bool,\n subscribe: bool,\n}\n\nv_flex()\n .gap_3()\n .child(\n Checkbox::new(\"terms\")\n .label(\"I agree to the terms and conditions\")\n .checked(self.agree_terms)\n .on_click(cx.listener(|view, checked, _, cx| {\n view.agree_terms = *checked;\n cx.notify();\n }))\n )\n .child(\n Checkbox::new(\"subscribe\")\n .label(\"Subscribe to newsletter\")\n .checked(self.subscribe)\n .on_click(cx.listener(|view, checked, _, cx| {\n view.subscribe = *checked;\n cx.notify();\n }))\n )\n```\n\n[Checkbox]: https://docs.rs/gpui-component/latest/gpui_component/checkbox/struct.Checkbox.html\n" }, { "path": "docs/docs/components/clipboard.md", "content": "---\ntitle: Clipboard\ndescription: A button component that helps you copy text or other content to your clipboard.\n---\n\n# Clipboard\n\nThe Clipboard component provides an easy way to copy text or other data to the user's clipboard. It renders as a button with a copy icon that changes to a checkmark when content is successfully copied. The component supports both static values and dynamic content through callback functions.\n\n## Import\n\n```rust\nuse gpui_component::clipboard::Clipboard;\n```\n\n## Usage\n\n### Basic Clipboard\n\n```rust\nClipboard::new(\"my-clipboard\")\n .value(\"Text to copy\")\n .on_copied(|value, window, cx| {\n window.push_notification(format!(\"Copied: {}\", value), cx)\n })\n```\n\n### Using Dynamic Values\n\nThe `value_fn` method allows you to provide a closure that generates the content to be copied at the time of the copy action.\n\n- This is useful when the content to be copied depends on the current state of the application.\n- And in some cases, it may have a larger overhead to compute, so you only want to do it when the user actually clicks the copy button.\n\n```rust\nlet state = some_state.clone();\nClipboard::new(\"dynamic-clipboard\")\n .value_fn(move |_, cx| {\n state.read(cx).get_current_value()\n })\n .on_copied(|value, window, cx| {\n window.push_notification(format!(\"Copied: {}\", value), cx)\n })\n```\n\n### With Custom Content\n\n```rust\nuse gpui_component::label::Label;\n\n h_flex()\n .gap_2()\n .child(Label::new(\"Share URL\"))\n .child(Icon::new(IconName::Share))\n .child(\n Clipboard::new(\"custom-clipboard\")\n .value(\"https://example.com\")\n )\n```\n\n### In Input Fields\n\nThe Clipboard component is commonly used as a suffix in input fields:\n\n```rust\nuse gpui_component::input::{InputState, Input};\n\nlet url_state = cx.new(|cx| InputState::new(window, cx).default_value(\"https://github.com\"));\n\nInput::new(&url_state)\n .suffix(\n Clipboard::new(\"url-clipboard\")\n .value_fn({\n let state = url_state.clone();\n move |_, cx| state.read(cx).value()\n })\n .on_copied(|value, window, cx| {\n window.push_notification(format!(\"URL copied: {}\", value), cx)\n })\n )\n```\n\n## API Reference\n\n- [Clipboard]\n\n## Examples\n\n### Simple Text Copy\n\n```rust\nClipboard::new(\"simple\")\n .value(\"Hello, World!\")\n```\n\n### With User Feedback\n\n```rust\nh_flex()\n .gap_2()\n .child(Label::new(\"Your API Key:\"))\n .child(\n Clipboard::new(\"feedback\")\n .value(\"sk-1234567890abcdef\")\n .on_copied(|_, window, cx| {\n window.push_notification(\"API key copied to clipboard\", cx)\n })\n )\n```\n\n### Form Field Integration\n\n```rust\nuse gpui_component::{\n input::{InputState, Input},\n h_flex, label::Label\n};\n\nlet api_key = \"sk-1234567890abcdef\";\n\nh_flex()\n .gap_2()\n .items_center()\n .child(Label::new(\"API Key:\"))\n .child(\n Input::new(&input_state)\n .value(api_key)\n .readonly(true)\n .suffix(\n Clipboard::new(\"api-key-copy\")\n .value(api_key)\n .on_copied(|_, window, cx| {\n window.push_notification(\"API key copied!\", cx)\n })\n )\n )\n```\n\n### Dynamic Content Copy\n\n```rust\nstruct AppState {\n current_url: String,\n}\n\nlet app_state = cx.new(|_| AppState {\n current_url: \"https://example.com\".to_string()\n});\n\nClipboard::new(\"current-url\")\n .value_fn({\n let state = app_state.clone();\n move |_, cx| {\n SharedString::from(state.read(cx).current_url.clone())\n }\n })\n .on_copied(|url, window, cx| {\n window.push_notification(format!(\"Shared: {}\", url), cx)\n })\n```\n\n## Data Types\n\nThe Clipboard component currently supports copying text strings to the clipboard. It uses GPUI's `ClipboardItem::new_string()` method, which handles:\n\n- Plain text strings\n- UTF-8 encoded content\n- Cross-platform clipboard integration\n\n[Clipboard]: https://docs.rs/gpui-component/latest/gpui_component/clipboard/struct.Clipboard.html\n" }, { "path": "docs/docs/components/collapsible.md", "content": "---\ntitle: Collapsible\ndescription: An interactive element which expands/collapses.\n---\n\n# Collapsible\n\nAn interactive element which expands/collapses.\n\n## Import\n\n```rust\nuse gpui_component::collapsible::Collapsible;\n```\n\n## Usage\n\n### Basic Use\n\n```rust\nCollapsible::new()\n .max_w_128()\n .gap_1()\n .open(self.open)\n .child(\n \"This is a collapsible component. \\\n Click the header to expand or collapse the content.\",\n )\n .content(\n \"This is the full content of the Collapsible component. \\\n It is only visible when the component is expanded. \\n\\\n You can put any content you like here, including text, images, \\\n or other UI elements.\",\n )\n .child(\n h_flex().justify_center().child(\n Button::new(\"toggle1\")\n .icon(IconName::ChevronDown)\n .label(\"Show more\")\n .when(open, |this| {\n this.icon(IconName::ChevronUp).label(\"Show less\")\n })\n .xsmall()\n .link()\n .on_click({\n cx.listener(move |this, _, _, cx| {\n this.open = !this.open;\n cx.notify();\n })\n }),\n ),\n )\n```\n\nWe can use `open` method to control the collapsed state. If false, the `content` method added child elements will be hidden.\n\n[Collapsible]: https://docs.rs/gpui-component/latest/gpui_component/collapsible/struct.Collapsible.html\n" }, { "path": "docs/docs/components/color-picker.md", "content": "---\ntitle: ColorPicker\ndescription: A comprehensive color selection interface with support for multiple color formats, presets, and alpha channel.\n---\n\n# ColorPicker\n\nA versatile color picker component that provides an intuitive interface for color selection. Features include color palettes, hex input, featured colors, and support for various color formats including RGB, HSL, and hex values with alpha channel support.\n\n## Import\n\n```rust\nuse gpui_component::color_picker::{ColorPicker, ColorPickerState, ColorPickerEvent};\n```\n\n## Usage\n\n### Basic Color Picker\n\n```rust\nuse gpui::{Entity, Window, Context};\n\n// Create color picker state\nlet color_picker = cx.new(|cx|\n ColorPickerState::new(window, cx)\n .default_value(cx.theme().primary)\n);\n\n// Create the color picker component\nColorPicker::new(&color_picker)\n```\n\n### With Event Handling\n\n```rust\nuse gpui::{Subscription, Entity};\n\nlet color_picker = cx.new(|cx| ColorPickerState::new(window, cx));\n\nlet _subscription = cx.subscribe(&color_picker, |this, _, ev, _| match ev {\n ColorPickerEvent::Change(color) => {\n if let Some(color) = color {\n println!(\"Selected color: {}\", color.to_hex());\n // Handle color change\n }\n }\n});\n\nColorPicker::new(&color_picker)\n```\n\n### Setting Default Color\n\n```rust\nuse gpui::Hsla;\n\nlet color_picker = cx.new(|cx|\n ColorPickerState::new(window, cx)\n .default_value(cx.theme().blue) // Set default color\n);\n```\n\n### Different Sizes\n\n```rust\n// Small color picker\nColorPicker::new(&color_picker).small()\n\n// Medium color picker (default)\nColorPicker::new(&color_picker)\n\n// Large color picker\nColorPicker::new(&color_picker).large()\n\n// Extra small color picker\nColorPicker::new(&color_picker).xsmall()\n```\n\n### With Custom Featured Colors\n\n```rust\nuse gpui::Hsla;\n\nlet featured_colors = vec![\n cx.theme().red,\n cx.theme().green,\n cx.theme().blue,\n cx.theme().yellow,\n // Add your custom colors\n];\n\nColorPicker::new(&color_picker)\n .featured_colors(featured_colors)\n```\n\n### With Icon Instead of Color Square\n\n```rust\nuse gpui_component::IconName;\n\nColorPicker::new(&color_picker)\n .icon(IconName::Palette)\n```\n\n### With Label\n\n```rust\nColorPicker::new(&color_picker)\n .label(\"Background Color\")\n```\n\n### Custom Anchor Position\n\n```rust\nuse gpui::Corner;\n\nColorPicker::new(&color_picker)\n .anchor(Corner::TopRight) // Dropdown opens to top-right\n```\n\n## Color Selection Interface\n\n### Color Palettes\n\nThe color picker includes predefined color palettes organized by color family:\n\n- **Stone**: Neutral grays and stone colors\n- **Red**: Red color variations from light to dark\n- **Orange**: Orange color variations\n- **Yellow**: Yellow color variations\n- **Green**: Green color variations\n- **Cyan**: Cyan color variations\n- **Blue**: Blue color variations\n- **Purple**: Purple color variations\n- **Pink**: Pink color variations\n\nEach palette provides multiple shades and tints of the base color, allowing for precise color selection.\n\n### Featured Colors Section\n\nA customizable section at the top of the picker that displays frequently used or brand colors. If not specified, defaults to theme colors:\n\n- Primary colors from the current theme\n- Light variants of theme colors\n- Essential UI colors (red, blue, green, yellow, cyan, magenta)\n\n### Hex Input Field\n\nA text input field that allows direct entry of hex color values:\n\n- Supports standard 6-digit hex format (#RRGGBB)\n- Real-time validation and preview\n- Updates color picker state automatically\n- Press Enter to confirm selection\n\n## Color Formats\n\n### RGB (Red, Green, Blue)\n\nColors are internally represented using GPUI's `Hsla` format but can be converted to RGB:\n\n```rust\nlet color = cx.theme().blue;\n// Access RGB components through Hsla methods\n```\n\n### HSL (Hue, Saturation, Lightness)\n\nNative format used by the color picker:\n\n```rust\nuse gpui::Hsla;\n\n// Create HSL color\nlet color = Hsla::hsl(240.0, 100.0, 50.0); // Blue color\n\n// Access components\nlet hue = color.h;\nlet saturation = color.s;\nlet lightness = color.l;\n```\n\n### Hex Format\n\nStandard web hex format with # prefix:\n\n```rust\n// Convert color to hex\nlet hex_string = color.to_hex(); // Returns \"#3366FF\"\n\n// Parse hex string to color\nif let Ok(color) = Hsla::parse_hex(\"#3366FF\") {\n // Use parsed color\n}\n```\n\n## Alpha Channel\n\nFull alpha channel support for transparency:\n\n```rust\nuse gpui::hsla;\n\n// Create color with alpha\nlet semi_transparent = hsla(0.5, 0.8, 0.6, 0.7); // 70% opacity\n\n// Modify existing color opacity\nlet transparent_blue = cx.theme().blue.opacity(0.5);\n```\n\nThe color picker preserves alpha values when selecting colors and allows modification through the alpha component of HSLA colors.\n\n## API Reference\n\n- [ColorPicker]\n- [ColorPickerState]\n- [ColorPickerEvent]\n\n## Examples\n\n### Color Theme Editor\n\n```rust\nstruct ThemeEditor {\n primary_color: Entity,\n secondary_color: Entity,\n accent_color: Entity,\n}\n\nimpl ThemeEditor {\n fn new(window: &mut Window, cx: &mut Context) -> Self {\n let primary_color = cx.new(|cx|\n ColorPickerState::new(window, cx)\n .default_value(cx.theme().primary)\n );\n\n let secondary_color = cx.new(|cx|\n ColorPickerState::new(window, cx)\n .default_value(cx.theme().secondary)\n );\n\n let accent_color = cx.new(|cx|\n ColorPickerState::new(window, cx)\n .default_value(cx.theme().accent)\n );\n\n Self {\n primary_color,\n secondary_color,\n accent_color,\n }\n }\n\n fn render(&mut self, window: &mut Window, cx: &mut Context) -> impl IntoElement {\n v_flex()\n .gap_4()\n .child(\n h_flex()\n .gap_2()\n .items_center()\n .child(\"Primary Color:\")\n .child(ColorPicker::new(&self.primary_color))\n )\n .child(\n h_flex()\n .gap_2()\n .items_center()\n .child(\"Secondary Color:\")\n .child(ColorPicker::new(&self.secondary_color))\n )\n .child(\n h_flex()\n .gap_2()\n .items_center()\n .child(\"Accent Color:\")\n .child(ColorPicker::new(&self.accent_color))\n )\n }\n}\n```\n\n### Brand Color Selector\n\n```rust\nuse gpui_component::{Sizable as _};\n\nlet brand_colors = vec![\n Hsla::parse_hex(\"#FF6B6B\").unwrap(), // Brand Red\n Hsla::parse_hex(\"#4ECDC4\").unwrap(), // Brand Teal\n Hsla::parse_hex(\"#45B7D1\").unwrap(), // Brand Blue\n Hsla::parse_hex(\"#96CEB4\").unwrap(), // Brand Green\n Hsla::parse_hex(\"#FFEAA7\").unwrap(), // Brand Yellow\n];\n\nColorPicker::new(&color_picker)\n .featured_colors(brand_colors)\n .label(\"Brand Color\")\n .large()\n```\n\n### Toolbar Color Picker\n\n```rust\nuse gpui_component::{Sizable as _, IconName);\n\nColorPicker::new(&text_color_picker)\n .icon(IconName::Type)\n .small()\n .anchor(Corner::BottomLeft)\n```\n\n### Color Palette Builder\n\n```rust\nstruct ColorPalette {\n colors: Vec>,\n}\n\nimpl ColorPalette {\n fn add_color(&mut self, window: &mut Window, cx: &mut Context) {\n let color_picker = cx.new(|cx| ColorPickerState::new(window, cx));\n\n // Subscribe to color changes\n cx.subscribe(&color_picker, |this, _, ev, _| match ev {\n ColorPickerEvent::Change(color) => {\n if let Some(color) = color {\n this.update_palette_preview();\n }\n }\n });\n\n self.colors.push(color_picker);\n cx.notify();\n }\n\n fn render(&mut self, window: &mut Window, cx: &mut Context) -> impl IntoElement {\n h_flex()\n .gap_2()\n .children(\n self.colors.iter().map(|color_picker| {\n ColorPicker::new(color_picker).small()\n })\n )\n .child(\n Button::new(\"add-color\")\n .icon(IconName::Plus)\n .ghost()\n .on_click(cx.listener(|this, _, window, cx| {\n this.add_color(window, cx);\n }))\n )\n }\n}\n```\n\n### With Color Validation\n\n```rust\nlet color_picker = cx.new(|cx| ColorPickerState::new(window, cx));\n\nlet _subscription = cx.subscribe(&color_picker, |this, _, ev, _| match ev {\n ColorPickerEvent::Change(color) => {\n if let Some(color) = color {\n // Validate color accessibility\n if this.validate_contrast(color) {\n this.apply_color(color);\n } else {\n this.show_contrast_warning();\n }\n }\n }\n});\n```\n\n[ColorPicker]: https://docs.rs/gpui-component/latest/gpui_component/color_picker/struct.ColorPicker.html\n[ColorPickerState]: https://docs.rs/gpui-component/latest/gpui_component/color_picker/struct.ColorPickerState.html\n[ColorPickerEvent]: https://docs.rs/gpui-component/latest/gpui_component/color_picker/enum.ColorPickerEvent.html\n" }, { "path": "docs/docs/components/data-table.md", "content": "---\ntitle: DataTable\ndescription: High-performance data table with virtual scrolling, sorting, filtering, and column management.\n---\n\n# Data Table\n\nA comprehensive data table component designed for handling large datasets with high performance. Features virtual scrolling, column configuration, sorting, filtering, row/column/cell selection, and custom cell rendering. Perfect for displaying tabular data with thousands of rows while maintaining smooth performance.\n\n## Key Features\n\n- **Multiple Selection Modes**: Row, column, and individual cell selection\n- **Virtual Scrolling**: Handle thousands of rows with smooth performance\n- **Column Management**: Resizable, movable, and fixed columns\n- **Sorting**: Built-in column sorting support\n- **Keyboard Navigation**: Full keyboard support for all selection modes\n- **Custom Cell Rendering**: Render any content in table cells\n- **Context Menus**: Right-click support for rows and cells\n- **Infinite Loading**: Load more data as user scrolls\n- **Events**: Comprehensive event system for user interactions\n\n## Import\n\n```rust\nuse gpui_component::table::{\n DataTable, TableState, TableDelegate,\n Column, ColumnSort, ColumnFixed,\n TableEvent\n};\n```\n\n## Usage\n\n### Basic Table\n\nTo create a table, you need to implement the `TableDelegate` trait and provide column definitions, and use `TableState` to manage the table state.\n\n```rust\nuse std::ops::Range;\nuse gpui::{App, Context, Window, IntoElement};\nuse gpui_component::table::{DataTable, TableDelegate, Column, ColumnSort};\n\nstruct MyData {\n id: usize,\n name: String,\n age: u32,\n email: String,\n}\n\nstruct MyTableDelegate {\n data: Vec,\n columns: Vec,\n}\n\nimpl MyTableDelegate {\n fn new() -> Self {\n Self {\n data: vec![\n MyData { id: 1, name: \"John\".to_string(), age: 30, email: \"john@example.com\".to_string() },\n MyData { id: 2, name: \"Jane\".to_string(), age: 25, email: \"jane@example.com\".to_string() },\n ],\n columns: vec![\n Column::new(\"id\", \"ID\").width(60.),\n Column::new(\"name\", \"Name\").width(150.).sortable(),\n Column::new(\"age\", \"Age\").width(80.).sortable(),\n Column::new(\"email\", \"Email\").width(200.),\n ],\n }\n }\n}\n\nimpl TableDelegate for MyTableDelegate {\n fn columns_count(&self, _: &App) -> usize {\n self.columns.len()\n }\n\n fn rows_count(&self, _: &App) -> usize {\n self.data.len()\n }\n\n fn column(&self, col_ix: usize, _: &App) -> &Column {\n &self.columns[col_ix]\n }\n\n fn render_td(&mut self, row_ix: usize, col_ix: usize, _: &mut Window, _: &mut Context>) -> impl IntoElement {\n let row = &self.data[row_ix];\n let col = &self.columns[col_ix];\n\n match col.key.as_ref() {\n \"id\" => row.id.to_string(),\n \"name\" => row.name.clone(),\n \"age\" => row.age.to_string(),\n \"email\" => row.email.clone(),\n _ => \"\".to_string(),\n }\n }\n}\n\n// Create the table\nlet delegate = MyTableDelegate::new();\nlet state = cx.new(|cx| TableState::new(delegate, window, cx));\n```\n\n### Column Configuration\n\nColumns provide extensive configuration options:\n\n```rust\n// Basic column\nColumn::new(\"id\", \"ID\")\n\n// Sortable column\nColumn::new(\"name\", \"Name\")\n .sortable()\n .width(150.)\n\n// Right-aligned column\nColumn::new(\"price\", \"Price\")\n .text_right()\n .sortable()\n\n// Fixed column (pinned to left)\nColumn::new(\"actions\", \"Actions\")\n .fixed(ColumnFixed::Left)\n .resizable(false)\n .movable(false)\n\n// Column with custom padding\nColumn::new(\"description\", \"Description\")\n .width(200.)\n .paddings(px(8.))\n\n// Non-resizable column\nColumn::new(\"status\", \"Status\")\n .width(100.)\n .resizable(false)\n\n// Custom sort orders\nColumn::new(\"created\", \"Created\")\n .ascending() // Default ascending\n// or\nColumn::new(\"modified\", \"Modified\")\n .descending() // Default descending\n```\n\n### Virtual Scrolling for Large Datasets\n\nThe table automatically handles virtual scrolling for optimal performance:\n\n```rust\nstruct LargeDataDelegate {\n data: Vec, // Could be 10,000+ items\n columns: Vec,\n}\n\nimpl TableDelegate for LargeDataDelegate {\n fn rows_count(&self, _: &App) -> usize {\n self.data.len() // No performance impact regardless of size\n }\n\n // Only visible rows are rendered\n fn render_td(&mut self, row_ix: usize, col_ix: usize, _: &mut Window, _: &mut Context>) -> impl IntoElement {\n // This is only called for visible rows\n // Efficiently render cell content\n let row = &self.data[row_ix];\n format_cell_data(row, col_ix)\n }\n\n // Track visible range for optimizations\n fn visible_rows_changed(&mut self, visible_range: Range, _: &mut Window, _: &mut Context>) {\n // Only update data for visible rows if needed\n // This is called when user scrolls\n }\n}\n```\n\n### Sorting Implementation\n\nImplement sorting in your delegate:\n\n```rust\nimpl TableDelegate for MyTableDelegate {\n fn perform_sort(&mut self, col_ix: usize, sort: ColumnSort, _: &mut Window, _: &mut Context>) {\n let col = &self.columns[col_ix];\n\n match col.key.as_ref() {\n \"name\" => {\n match sort {\n ColumnSort::Ascending => self.data.sort_by(|a, b| a.name.cmp(&b.name)),\n ColumnSort::Descending => self.data.sort_by(|a, b| b.name.cmp(&a.name)),\n ColumnSort::Default => {\n // Reset to original order or default sort\n self.data.sort_by(|a, b| a.id.cmp(&b.id));\n }\n }\n }\n \"age\" => {\n match sort {\n ColumnSort::Ascending => self.data.sort_by(|a, b| a.age.cmp(&b.age)),\n ColumnSort::Descending => self.data.sort_by(|a, b| b.age.cmp(&a.age)),\n ColumnSort::Default => self.data.sort_by(|a, b| a.id.cmp(&b.id)),\n }\n }\n _ => {}\n }\n }\n}\n```\n\n### ContextMenu\n\n```rust\nimpl TableDelegate for MyTableDelegate {\n // Context menu for right-click\n fn context_menu(&mut self, row_ix: usize, menu: PopupMenu, _: &mut Window, _: &mut Context>) -> PopupMenu {\n let row = &self.data[row_ix];\n menu.menu(format!(\"Edit {}\", row.name), Box::new(EditRowAction(row_ix)))\n .menu(\"Delete\", Box::new(DeleteRowAction(row_ix)))\n .separator()\n .menu(\"Duplicate\", Box::new(DuplicateRowAction(row_ix)))\n }\n}\n```\n\n### Cell Rendering\n\nCreate rich cell content with custom rendering:\n\n```rust\nimpl TableDelegate for MyTableDelegate {\n fn render_td(&mut self, row_ix: usize, col_ix: usize, _: &mut Window, cx: &mut Context>) -> impl IntoElement {\n let row = &self.data[row_ix];\n let col = &self.columns[col_ix];\n\n match col.key.as_ref() {\n \"status\" => {\n // Custom status badge\n let (color, text) = match row.status {\n Status::Active => (cx.theme().green, \"Active\"),\n Status::Inactive => (cx.theme().red, \"Inactive\"),\n Status::Pending => (cx.theme().yellow, \"Pending\"),\n };\n\n div()\n .px_2()\n .py_1()\n .rounded(px(4.))\n .bg(color.opacity(0.1))\n .text_color(color)\n .child(text)\n }\n \"progress\" => {\n // Progress bar\n div()\n .w_full()\n .h(px(8.))\n .bg(cx.theme().muted)\n .rounded(px(4.))\n .child(\n div()\n .h_full()\n .w(percentage(row.progress))\n .bg(cx.theme().primary)\n .rounded(px(4.))\n )\n }\n \"actions\" => {\n // Action buttons\n h_flex()\n .gap_1()\n .child(Button::new(format!(\"edit-{}\", row_ix)).text().icon(IconName::Edit))\n .child(Button::new(format!(\"delete-{}\", row_ix)).text().icon(IconName::Trash))\n }\n \"avatar\" => {\n // User avatar with image\n h_flex()\n .items_center()\n .gap_2()\n .child(\n div()\n .w(px(32.))\n .h(px(32.))\n .rounded_full()\n .bg(cx.theme().accent)\n .flex()\n .items_center()\n .justify_center()\n .child(row.name.chars().next().unwrap_or('?').to_string())\n )\n .child(row.name.clone())\n }\n _ => row.get_field_value(col.key.as_ref()).into_any_element(),\n }\n }\n}\n```\n\n### Selection Modes\n\nThe table supports three distinct selection modes:\n\n```rust\n// Row selection mode (default)\nlet state = cx.new(|cx| {\n TableState::new(delegate, window, cx)\n .row_selectable(true) // Enable row selection\n .col_selectable(false)\n .cell_selectable(false)\n});\n\n// Column selection mode\nlet state = cx.new(|cx| {\n TableState::new(delegate, window, cx)\n .row_selectable(false)\n .col_selectable(true) // Enable column selection\n .cell_selectable(false)\n});\n\n// Cell selection mode\nlet state = cx.new(|cx| {\n TableState::new(delegate, window, cx)\n .row_selectable(true) // Keep row selection for row selector column\n .col_selectable(false)\n .cell_selectable(true) // Enable cell selection\n});\n```\n\n### Column Resizing and Moving\n\nEnable dynamic column management:\n\n```rust\n// Configure table features\nlet state = cx.new(|cx| {\n TableState::new(delegate, window, cx)\n .col_resizable(true) // Allow column resizing\n .col_movable(true) // Allow column reordering\n .sortable(true) // Enable sorting\n .col_selectable(true) // Allow column selection\n .row_selectable(true) // Allow row selection\n});\n\n// Listen for column changes\ncx.subscribe_in(&state, window, |view, table, event, _, cx| {\n match event {\n TableEvent::ColumnWidthsChanged(widths) => {\n // Save column widths to user preferences\n save_column_widths(widths);\n }\n TableEvent::MoveColumn(from_ix, to_ix) => {\n // Save column order\n save_column_order(from_ix, to_ix);\n }\n _ => {}\n }\n}).detach();\n```\n\n### Infinite Loading / Pagination\n\nImplement loading more data as user scrolls:\n\n```rust\nimpl TableDelegate for MyTableDelegate {\n fn has_more(&self, _: &App) -> bool {\n self.has_more_data\n }\n\n fn load_more_threshold(&self) -> usize {\n 50 // Load more when 50 rows from bottom\n }\n\n fn load_more(&mut self, _: &mut Window, cx: &mut Context>) {\n if self.loading {\n return; // Prevent multiple loads\n }\n\n self.loading = true;\n\n // Spawn async task to load data\n cx.spawn(async move |view, cx| {\n let new_data = fetch_more_data().await;\n\n cx.update(|cx| {\n view.update(cx, |view, _| {\n let delegate = view.table.delegate_mut();\n delegate.data.extend(new_data);\n delegate.loading = false;\n delegate.has_more_data = !new_data.is_empty();\n });\n })\n }).detach();\n }\n\n fn loading(&self, _: &App) -> bool {\n self.loading\n }\n}\n```\n\n### Table Styling\n\nCustomize table appearance:\n\n```rust\nlet state = cx.new(|cx| {\n TableState::new(delegate, window, cx)\n});\n\n// In render\nDataTable::new(&state)\n .stripe(true) // Alternating row colors\n .bordered(true) // Border around table\n .scrollbar_visible(true, true) // Vertical, horizontal scrollbars\n```\n\n## Examples\n\n### Financial Data Table\n\n```rust\nstruct StockData {\n symbol: String,\n price: f64,\n change: f64,\n change_percent: f64,\n volume: u64,\n}\n\nimpl TableDelegate for StockTableDelegate {\n fn render_td(&mut self, row_ix: usize, col_ix: usize, _: &mut Window, cx: &mut Context>) -> impl IntoElement {\n let stock = &self.stocks[row_ix];\n let col = &self.columns[col_ix];\n\n match col.key.as_ref() {\n \"symbol\" => div().font_weight(FontWeight::BOLD).child(stock.symbol.clone()),\n \"price\" => div().text_right().child(format!(\"${:.2}\", stock.price)),\n \"change\" => {\n let color = if stock.change >= 0.0 { cx.theme().green } else { cx.theme().red };\n div()\n .text_right()\n .text_color(color)\n .child(format!(\"{:+.2}\", stock.change))\n }\n \"change_percent\" => {\n let color = if stock.change_percent >= 0.0 { cx.theme().green } else { cx.theme().red };\n div()\n .text_right()\n .text_color(color)\n .child(format!(\"{:+.1}%\", stock.change_percent * 100.0))\n }\n \"volume\" => div().text_right().child(format!(\"{:,}\", stock.volume)),\n _ => div(),\n }\n }\n}\n```\n\n### User Management Table\n\n```rust\nstruct UserTableDelegate {\n users: Vec,\n columns: Vec,\n}\n\nimpl UserTableDelegate {\n fn new() -> Self {\n Self {\n users: Vec::new(),\n columns: vec![\n Column::new(\"avatar\", \"\").width(50.).resizable(false).movable(false),\n Column::new(\"name\", \"Name\").width(150.).sortable().fixed_left(),\n Column::new(\"email\", \"Email\").width(200.).sortable(),\n Column::new(\"role\", \"Role\").width(100.).sortable(),\n Column::new(\"status\", \"Status\").width(100.),\n Column::new(\"last_login\", \"Last Login\").width(120.).sortable(),\n Column::new(\"actions\", \"Actions\").width(100.).resizable(false),\n ],\n }\n }\n}\n```\n\n### Cell Selection\n\nEnable individual cell selection for more granular control:\n\n```rust\nlet state = cx.new(|cx| {\n TableState::new(delegate, window, cx)\n .cell_selectable(true) // Enable cell selection\n .row_selectable(true) // Also allow row selection\n});\n\n// Listen for cell events\ncx.subscribe_in(&state, window, |view, table, event, _, cx| {\n match event {\n TableEvent::SelectCell(row_ix, col_ix) => {\n println!(\"Selected cell: ({}, {})\", row_ix, col_ix);\n }\n TableEvent::DoubleClickedCell(row_ix, col_ix) => {\n // Open editor or detail view\n open_cell_editor(row_ix, col_ix);\n }\n TableEvent::RightClickedCell(row_ix, col_ix) => {\n // Show cell-specific context menu\n show_cell_context_menu(row_ix, col_ix);\n }\n TableEvent::ClearSelection => {\n println!(\"Selection cleared\");\n }\n _ => {}\n }\n}).detach();\n```\n\n#### Cell Selection Features\n\nWhen cell selection is enabled:\n\n- **Click to select**: Click on any cell to select it\n- **Row selector column**: A dedicated column appears on the left for selecting entire rows\n- **Keyboard navigation**: Arrow keys navigate between cells (not rows/columns)\n- **Double-click support**: Trigger actions like editing by double-clicking cells\n- **Right-click support**: Show context menus specific to cell content\n- **Visual feedback**: Selected cells show highlight with border\n\n#### Programmatic Cell Selection\n\n```rust\n// Get the currently selected cell\nif let Some((row_ix, col_ix)) = state.read(cx).selected_cell() {\n println!(\"Current cell: ({}, {})\", row_ix, col_ix);\n}\n\n// Select a specific cell programmatically\nstate.update(cx, |state, cx| {\n state.set_selected_cell(5, 3, cx); // Select row 5, column 3\n});\n\n// Clear all selections\nstate.update(cx, |state, cx| {\n state.clear_selection(cx);\n});\n```\n\n#### Non-selectable Columns\n\nPrevent specific columns from being selected (useful for action columns):\n\n```rust\nColumn::new(\"actions\", \"Actions\")\n .width(100.)\n .selectable(false) // This column's cells cannot be selected\n .resizable(false)\n```\n\n#### Cell Selection with Custom Rendering\n\n```rust\nimpl TableDelegate for MyTableDelegate {\n fn render_td(&mut self, row_ix: usize, col_ix: usize, _: &mut Window, cx: &mut Context>) -> impl IntoElement {\n let row = &self.data[row_ix];\n let col = &self.columns[col_ix];\n\n // Render different content based on whether cell is selected\n let is_selected = cx.entity().read(cx).selected_cell() == Some((row_ix, col_ix));\n\n match col.key.as_ref() {\n \"editable_field\" => {\n if is_selected {\n // Show input when selected\n Input::new(format!(\"cell-{}-{}\", row_ix, col_ix))\n .value(row.field_value.clone())\n .into_any_element()\n } else {\n // Show plain text when not selected\n div().child(row.field_value.clone()).into_any_element()\n }\n }\n _ => div().child(row.get_value(col.key.as_ref())).into_any_element()\n }\n }\n}\n```\n\n## Keyboard Shortcuts\n\n### Row Selection Mode (default)\n\n- `↑/↓` - Navigate rows\n- `←/→` - Navigate columns\n- `Home` - Jump to first row/column\n- `End` - Jump to last row/column\n- `PageUp/PageDown` - Navigate by page\n- `Escape` - Clear selection\n\n### Cell Selection Mode\n\n- `↑/↓` - Navigate up/down within current column\n- `←/→` - Navigate left/right within current row\n- `Tab` - Move to next cell (right, then next row)\n- `Shift+Tab` - Move to previous cell\n- `Home` - Jump to first cell in current row\n- `End` - Jump to last cell in current row\n- `PageUp/PageDown` - Navigate by page within current column\n- `Escape` - Clear selection\n\n## API Reference\n\n### Core Types\n\n- [DataTable] - The data table component\n- [TableState] - Table state management\n- [TableDelegate] - Trait for implementing table data source\n- [Column] - Column configuration\n- [TableEvent] - Table events (selection, clicks, etc.)\n\n### Column Types\n\n- [ColumnSort] - Column sort direction enum\n- [ColumnFixed] - Column fixed position enum\n\n### Methods\n\n#### TableState\n\n- `new(delegate, window, cx)` - Create a new table state\n- `cell_selectable(bool)` - Enable/disable cell selection\n- `row_selectable(bool)` - Enable/disable row selection\n- `col_selectable(bool)` - Enable/disable column selection\n- `selected_cell()` - Get currently selected cell\n- `set_selected_cell(row_ix, col_ix, cx)` - Select a specific cell\n- `selected_row()` - Get currently selected row\n- `selected_col()` - Get currently selected column\n- `clear_selection(cx)` - Clear all selections\n- `scroll_to_row(row_ix, cx)` - Scroll to specific row\n- `scroll_to_col(col_ix, cx)` - Scroll to specific column\n\n#### Column\n\n- `new(key, name)` - Create a new column\n- `width(pixels)` - Set column width\n- `sortable()` - Make column sortable\n- `ascending()` - Set default sort to ascending\n- `descending()` - Set default sort to descending\n- `text_right()` - Right-align column text\n- `text_center()` - Center-align column text\n- `fixed(ColumnFixed)` - Pin column to left\n- `resizable(bool)` - Enable/disable column resizing\n- `movable(bool)` - Enable/disable column moving\n- `selectable(bool)` - Enable/disable column/cell selection\n- `paddings(edges)` - Set custom padding\n- `min_width(pixels)` - Set minimum width\n- `max_width(pixels)` - Set maximum width\n\n### Events\n\n- `SelectRow(usize)` - Row selected\n- `DoubleClickedRow(usize)` - Row double-clicked\n- `SelectColumn(usize)` - Column selected\n- `SelectCell(usize, usize)` - Cell selected (row_ix, col_ix)\n- `DoubleClickedCell(usize, usize)` - Cell double-clicked (row_ix, col_ix)\n- `RightClickedCell(usize, usize)` - Cell right-clicked (row_ix, col_ix)\n- `RightClickedRow(Option)` - Row right-clicked\n- `ColumnWidthsChanged(Vec)` - Column widths changed\n- `MoveColumn(usize, usize)` - Column moved (from_ix, to_ix)\n\n[DataTable]: https://docs.rs/gpui-component/latest/gpui_component/table/struct.DataTable.html\n[TableState]: https://docs.rs/gpui-component/latest/gpui_component/table/struct.TableState.html\n[TableDelegate]: https://docs.rs/gpui-component/latest/gpui_component/table/trait.TableDelegate.html\n[Column]: https://docs.rs/gpui-component/latest/gpui_component/table/struct.Column.html\n[TableEvent]: https://docs.rs/gpui-component/latest/gpui_component/table/enum.TableEvent.html\n[ColumnSort]: https://docs.rs/gpui-component/latest/gpui_component/table/enum.ColumnSort.html\n[ColumnFixed]: https://docs.rs/gpui-component/latest/gpui_component/table/enum.ColumnFixed.html\n" }, { "path": "docs/docs/components/date-picker.md", "content": "---\ntitle: DatePicker\ndescription: A date picker component for selecting single dates or date ranges with calendar interface.\n---\n\n# DatePicker\n\nA flexible date picker component with calendar interface that supports single date selection, date range selection, custom date formatting, disabled dates, and preset ranges.\n\n## Import\n\n```rust\nuse gpui_component::{\n date_picker::{DatePicker, DatePickerState, DateRangePreset, DatePickerEvent},\n calendar::{Date, Matcher},\n};\n```\n\n## Usage\n\n### Basic Date Picker\n\n```rust\nlet date_picker = cx.new(|cx| DatePickerState::new(window, cx));\n\nDatePicker::new(&date_picker)\n```\n\n### With Initial Date\n\n```rust\nuse chrono::Local;\n\nlet date_picker = cx.new(|cx| {\n let mut picker = DatePickerState::new(window, cx);\n picker.set_date(Local::now().naive_local().date(), window, cx);\n picker\n});\n\nDatePicker::new(&date_picker)\n```\n\n### Date Range Picker\n\n```rust\nuse chrono::{Local, Days};\n\n// Range mode picker\nlet range_picker = cx.new(|cx| DatePickerState::range(window, cx));\n\nDatePicker::new(&range_picker)\n .number_of_months(2) // Show 2 months for easier range selection\n\n// With initial range\nlet range_picker = cx.new(|cx| {\n let now = Local::now().naive_local().date();\n let mut picker = DatePickerState::new(window, cx);\n picker.set_date(\n (now, now.checked_add_days(Days::new(7)).unwrap()),\n window,\n cx,\n );\n picker\n});\n\nDatePicker::new(&range_picker)\n .number_of_months(2)\n```\n\n### With Custom Date Format\n\n```rust\nlet date_picker = cx.new(|cx| {\n DatePickerState::new(window, cx)\n .date_format(\"%Y-%m-%d\") // ISO format\n});\n\nDatePicker::new(&date_picker)\n\n// Other format examples:\n// \"%m/%d/%Y\" -> 12/25/2023\n// \"%B %d, %Y\" -> December 25, 2023\n// \"%d %b %Y\" -> 25 Dec 2023\n```\n\n### With Placeholder\n\n```rust\nDatePicker::new(&date_picker)\n .placeholder(\"Select a date...\")\n```\n\n### Cleanable Date Picker\n\n```rust\nDatePicker::new(&date_picker)\n .cleanable(true) // Show clear button when date is selected\n```\n\n### Different Sizes\n\n```rust\nDatePicker::new(&date_picker).large()\nDatePicker::new(&date_picker) // medium (default)\nDatePicker::new(&date_picker).small()\n```\n\n### Disabled State\n\n```rust\nDatePicker::new(&date_picker).disabled(true)\n```\n\n### Custom Appearance\n\n```rust\n// Without default styling\nDatePicker::new(&date_picker).appearance(false)\n\n// Use in custom container\ndiv()\n .border_b_2()\n .px_6()\n .py_3()\n .border_color(cx.theme().border)\n .bg(cx.theme().secondary)\n .child(DatePicker::new(&date_picker).appearance(false))\n```\n\n## Date Restrictions\n\n### Disabled Weekends\n\n```rust\nuse gpui_component::calendar;\n\nlet date_picker = cx.new(|cx| {\n DatePickerState::new(window, cx)\n .disabled_matcher(vec![0, 6]) // Sunday=0, Saturday=6\n});\n\nDatePicker::new(&date_picker)\n```\n\n### Disabled Date Range\n\n```rust\nuse chrono::{Local, Days};\n\nlet now = Local::now().naive_local().date();\n\nlet date_picker = cx.new(|cx| {\n DatePickerState::new(window, cx)\n .disabled_matcher(calendar::Matcher::range(\n Some(now),\n now.checked_add_days(Days::new(7)),\n ))\n});\n\nDatePicker::new(&date_picker)\n```\n\n### Disabled Date Interval\n\n```rust\nlet date_picker = cx.new(|cx| {\n DatePickerState::new(window, cx)\n .disabled_matcher(calendar::Matcher::interval(\n Some(now),\n now.checked_add_days(Days::new(5))\n ))\n});\n\nDatePicker::new(&date_picker)\n```\n\n### Custom Disabled Dates\n\n```rust\n// Disable first 5 days of each month\nlet date_picker = cx.new(|cx| {\n DatePickerState::new(window, cx)\n .disabled_matcher(calendar::Matcher::custom(|date| {\n date.day0() < 5\n }))\n});\n\nDatePicker::new(&date_picker)\n\n// Disable all Mondays\nlet date_picker = cx.new(|cx| {\n DatePickerState::new(window, cx)\n .disabled_matcher(calendar::Matcher::custom(|date| {\n date.weekday() == chrono::Weekday::Mon\n }))\n});\n```\n\n## Preset Ranges\n\n### Single Date Presets\n\n```rust\nuse chrono::{Utc, Duration};\n\nlet presets = vec![\n DateRangePreset::single(\n \"Yesterday\",\n (Utc::now() - Duration::days(1)).naive_local().date(),\n ),\n DateRangePreset::single(\n \"Last Week\",\n (Utc::now() - Duration::weeks(1)).naive_local().date(),\n ),\n DateRangePreset::single(\n \"Last Month\",\n (Utc::now() - Duration::days(30)).naive_local().date(),\n ),\n];\n\nDatePicker::new(&date_picker)\n .presets(presets)\n```\n\n### Date Range Presets\n\n```rust\nlet range_presets = vec![\n DateRangePreset::range(\n \"Last 7 Days\",\n (Utc::now() - Duration::days(7)).naive_local().date(),\n Utc::now().naive_local().date(),\n ),\n DateRangePreset::range(\n \"Last 30 Days\",\n (Utc::now() - Duration::days(30)).naive_local().date(),\n Utc::now().naive_local().date(),\n ),\n DateRangePreset::range(\n \"Last 90 Days\",\n (Utc::now() - Duration::days(90)).naive_local().date(),\n Utc::now().naive_local().date(),\n ),\n];\n\nDatePicker::new(&date_picker)\n .number_of_months(2)\n .presets(range_presets)\n```\n\n## Handle Date Selection Events\n\n```rust\nlet date_picker = cx.new(|cx| DatePickerState::new(window, cx));\n\ncx.subscribe(&date_picker, |view, _, event, _| {\n match event {\n DatePickerEvent::Change(date) => {\n match date {\n Date::Single(Some(selected_date)) => {\n println!(\"Single date selected: {}\", selected_date);\n }\n Date::Range(Some(start), Some(end)) => {\n println!(\"Date range selected: {} to {}\", start, end);\n }\n Date::Range(Some(start), None) => {\n println!(\"Range start selected: {}\", start);\n }\n _ => {\n println!(\"Date cleared\");\n }\n }\n }\n }\n});\n```\n\n## Multiple Months Display\n\n```rust\n// Show 2 months side by side (useful for date ranges)\nDatePicker::new(&date_picker)\n .number_of_months(2)\n\n// Show 3 months\nDatePicker::new(&date_picker)\n .number_of_months(3)\n```\n\n## Advanced Examples\n\n### Business Days Only\n\n```rust\nuse chrono::Weekday;\n\nlet business_days_picker = cx.new(|cx| {\n DatePickerState::new(window, cx)\n .disabled_matcher(calendar::Matcher::custom(|date| {\n matches!(date.weekday(), Weekday::Sat | Weekday::Sun)\n }))\n});\n\nDatePicker::new(&business_days_picker)\n .placeholder(\"Select business day\")\n```\n\n### Date Range with Max Duration\n\n```rust\nuse chrono::Days;\n\nlet max_30_days_picker = cx.new(|cx| DatePickerState::range(window, cx));\n\ncx.subscribe(&max_30_days_picker, |view, picker, event, _| {\n match event {\n DatePickerEvent::Change(Date::Range(Some(start), Some(end))) => {\n let duration = end.signed_duration_since(*start).num_days();\n if duration > 30 {\n // Reset to start date only if range exceeds 30 days\n picker.update(cx, |state, cx| {\n state.set_date(Date::Range(Some(*start), None), window, cx);\n });\n }\n }\n _ => {}\n }\n});\n\nDatePicker::new(&max_30_days_picker)\n .number_of_months(2)\n .placeholder(\"Select up to 30 days\")\n```\n\n### Quarter Presets\n\n```rust\nuse chrono::{NaiveDate, Datelike};\n\nfn quarter_start(year: i32, quarter: u32) -> NaiveDate {\n let month = (quarter - 1) * 3 + 1;\n NaiveDate::from_ymd_opt(year, month, 1).unwrap()\n}\n\nfn quarter_end(year: i32, quarter: u32) -> NaiveDate {\n let month = quarter * 3;\n let start = NaiveDate::from_ymd_opt(year, month, 1).unwrap();\n NaiveDate::from_ymd_opt(year, month, start.days_in_month()).unwrap()\n}\n\nlet year = Local::now().year();\nlet quarterly_presets = vec![\n DateRangePreset::range(\"Q1\", quarter_start(year, 1), quarter_end(year, 1)),\n DateRangePreset::range(\"Q2\", quarter_start(year, 2), quarter_end(year, 2)),\n DateRangePreset::range(\"Q3\", quarter_start(year, 3), quarter_end(year, 3)),\n DateRangePreset::range(\"Q4\", quarter_start(year, 4), quarter_end(year, 4)),\n];\n\nDatePicker::new(&date_picker)\n .presets(quarterly_presets)\n```\n\n## Examples\n\n### Event Date Picker\n\n```rust\nlet event_date = cx.new(|cx| {\n let mut picker = DatePickerState::new(window, cx)\n .date_format(\"%B %d, %Y\")\n .disabled_matcher(calendar::Matcher::custom(|date| {\n // Disable past dates\n *date < Local::now().naive_local().date()\n }));\n picker\n});\n\nDatePicker::new(&event_date)\n .placeholder(\"Choose event date\")\n .cleanable(true)\n```\n\n### Booking System Date Range\n\n```rust\nlet booking_range = cx.new(|cx| DatePickerState::range(window, cx));\n\nlet booking_presets = vec![\n DateRangePreset::range(\"This Weekend\", /* weekend dates */),\n DateRangePreset::range(\"Next Week\", /* next week dates */),\n DateRangePreset::range(\"This Month\", /* this month dates */),\n];\n\nDatePicker::new(&booking_range)\n .number_of_months(2)\n .presets(booking_presets)\n .placeholder(\"Select check-in and check-out dates\")\n```\n\n### Financial Period Selector\n\n```rust\nlet financial_period = cx.new(|cx| {\n DatePickerState::range(window, cx)\n .date_format(\"%Y-%m-%d\")\n});\n\nDatePicker::new(&financial_period)\n .number_of_months(3)\n .presets(quarterly_presets)\n .placeholder(\"Select reporting period\")\n```\n" }, { "path": "docs/docs/components/description-list.md", "content": "---\ntitle: DescriptionList\ndescription: Use to display details with a tidy layout for key-value pairs.\n---\n\n# DescriptionList\n\nA versatile component for displaying key-value pairs in a structured, organized layout. Supports both horizontal and vertical layouts, multiple columns, borders, and different sizes. Perfect for showing detailed information like metadata, specifications, or summary data.\n\n## Import\n\n```rust\nuse gpui_component::description_list::{DescriptionList, DescriptionItem, DescriptionText};\n```\n\n## Usage\n\n### Basic Description List\n\n```rust\nDescriptionList::new()\n .item(\"Name\", \"GPUI Component\", 1)\n .item(\"Version\", \"0.1.0\", 1)\n .item(\"License\", \"Apache-2.0\", 1)\n```\n\n### Using DescriptionItem Builder\n\n```rust\nDescriptionList::new()\n .children([\n DescriptionItem::new(\"Name\").value(\"GPUI Component\"),\n DescriptionItem::new(\"Description\").value(\"UI components for building desktop applications\"),\n DescriptionItem::new(\"Version\").value(\"0.1.0\"),\n ])\n```\n\n### Different Layouts\n\n```rust\n// Horizontal layout (default)\nDescriptionList::horizontal()\n .item(\"Platform\", \"macOS, Windows, Linux\", 1)\n .item(\"Repository\", \"https://github.com/longbridge/gpui-component\", 1)\n\n// Vertical layout\nDescriptionList::vertical()\n .item(\"Name\", \"GPUI Component\", 1)\n .item(\"Description\", \"A comprehensive UI component library\", 1)\n```\n\n### Multiple Columns with Spans\n\n```rust\nDescriptionList::new()\n .columns(3)\n .child(DescriptionItem::new(\"Name\").value(\"GPUI Component\").span(1))\n .children([\n DescriptionItem::new(\"Version\").value(\"0.1.0\").span(1),\n DescriptionItem::new(\"License\").value(\"Apache-2.0\").span(1),\n DescriptionItem::new(\"Description\")\n .value(\"Full-featured UI components for desktop applications\")\n .span(3), // Spans all 3 columns\n DescriptionItem::new(\"Repository\")\n .value(\"https://github.com/longbridge/gpui-component\")\n .span(2), // Spans 2 columns\n ])\n```\n\n### With Dividers\n\n```rust\nDescriptionList::new()\n .item(\"Name\", \"GPUI Component\", 1)\n .item(\"Version\", \"0.1.0\", 1)\n .divider() // Add a visual separator\n .item(\"Author\", \"Longbridge\", 1)\n .item(\"License\", \"Apache-2.0\", 1)\n```\n\n### Different Sizes\n\n```rust\n// Large size\nDescriptionList::new()\n .large()\n .item(\"Title\", \"Large Description List\", 1)\n\n// Medium size (default)\nDescriptionList::new()\n .item(\"Title\", \"Medium Description List\", 1)\n\n// Small size\nDescriptionList::new()\n .small()\n .item(\"Title\", \"Small Description List\", 1)\n```\n\n### Without Borders\n\n```rust\nDescriptionList::new()\n .bordered(false) // Remove borders for a cleaner look\n .item(\"Name\", \"GPUI Component\", 1)\n .item(\"Type\", \"UI Library\", 1)\n```\n\n### Custom Label Width (Horizontal Layout)\n\n```rust\nuse gpui::px;\n\nDescriptionList::horizontal()\n .label_width(px(200.0)) // Set custom label width\n .item(\"Very Long Label Name\", \"Short Value\", 1)\n .item(\"Short\", \"Very long value that needs more space\", 1)\n```\n\n### Rich Content with Custom Elements\n\n```rust\nuse gpui_component::text::markdown;\n\nDescriptionList::new()\n .columns(2)\n .children([\n DescriptionItem::new(\"Name\").value(\"GPUI Component\"),\n DescriptionItem::new(\"Description\").value(\n markdown(\n \"UI components for building **fantastic** desktop applications.\",\n ).into_any_element()\n ),\n ])\n```\n\n### Complex Example with Mixed Content\n\n```rust\nDescriptionList::new()\n .columns(3)\n .label_width(px(150.0))\n .children([\n DescriptionItem::new(\"Project Name\").value(\"GPUI Component\").span(1),\n DescriptionItem::new(\"Version\").value(\"0.1.0\").span(1),\n DescriptionItem::new(\"Status\").value(\"Active\").span(1),\n\n DescriptionItem::Divider, // Full-width divider\n\n DescriptionItem::new(\"Description\").value(\n \"A comprehensive UI component library for building desktop applications with GPUI\"\n ).span(3),\n\n DescriptionItem::new(\"Repository\").value(\n \"https://github.com/longbridge/gpui-component\"\n ).span(2),\n DescriptionItem::new(\"License\").value(\"Apache-2.0\").span(1),\n\n DescriptionItem::new(\"Platforms\").value(\"macOS, Windows, Linux\").span(2),\n DescriptionItem::new(\"Language\").value(\"Rust\").span(1),\n ])\n```\n\n## Examples\n\n### User Profile Information\n\n```rust\nDescriptionList::new()\n .columns(2)\n .bordered(true)\n .children([\n DescriptionItem::new(\"Full Name\").value(\"John Doe\"),\n DescriptionItem::new(\"Email\").value(\"john@example.com\"),\n DescriptionItem::new(\"Phone\").value(\"+1 (555) 123-4567\"),\n DescriptionItem::new(\"Department\").value(\"Engineering\"),\n DescriptionItem::Divider,\n DescriptionItem::new(\"Bio\").value(\n \"Senior software engineer with 10+ years of experience in Rust and system programming.\"\n ).span(2),\n ])\n```\n\n### System Information\n\n```rust\nDescriptionList::vertical()\n .small()\n .bordered(false)\n .children([\n DescriptionItem::new(\"Operating System\").value(\"macOS 14.0\"),\n DescriptionItem::new(\"Architecture\").value(\"Apple Silicon (M2)\"),\n DescriptionItem::new(\"Memory\").value(\"16 GB\"),\n DescriptionItem::new(\"Storage\").value(\"512 GB SSD\"),\n DescriptionItem::new(\"GPU\").value(\"Apple M2 10-core GPU\"),\n ])\n```\n\n### Product Specifications\n\n```rust\nDescriptionList::new()\n .columns(3)\n .large()\n .children([\n DescriptionItem::new(\"Model\").value(\"MacBook Pro\").span(1),\n DescriptionItem::new(\"Year\").value(\"2023\").span(1),\n DescriptionItem::new(\"Screen Size\").value(\"14-inch\").span(1),\n\n DescriptionItem::new(\"Processor\").value(\"Apple M2 Pro\").span(2),\n DescriptionItem::new(\"Base Price\").value(\"$1,999\").span(1),\n\n DescriptionItem::Divider,\n\n DescriptionItem::new(\"Key Features\").value(\n \"Liquid Retina XDR display, ProMotion technology, P3 wide color gamut\"\n ).span(3),\n ])\n```\n\n### Configuration Settings\n\n```rust\nDescriptionList::horizontal()\n .label_width(px(180.0))\n .bordered(false)\n .children([\n DescriptionItem::new(\"Theme\").value(\"Dark Mode\"),\n DescriptionItem::new(\"Font Size\").value(\"14px\"),\n DescriptionItem::new(\"Auto Save\").value(\"Enabled\"),\n DescriptionItem::new(\"Backup Frequency\").value(\"Every 30 minutes\"),\n DescriptionItem::new(\"Language\").value(\"English (US)\"),\n ])\n```\n\n## Design Guidelines\n\n- Use horizontal layout for simple key-value pairs\n- Use vertical layout when values are lengthy or complex\n- Limit columns to 3-4 for optimal readability\n- Use dividers to group related information\n- Keep labels concise and descriptive\n- Use consistent spacing with the size prop\n- Consider removing borders for embedded contexts\n" }, { "path": "docs/docs/components/dialog.md", "content": "---\ntitle: Dialog\ndescription: A dialog dialog for displaying content in a layer above the app.\n---\n\n# Dialog\n\nDialog component for creating dialogs, confirmations, and alerts. Supports overlay, keyboard shortcuts, and various customizations.\n\n## Import\n\n```rust\nuse gpui_component::dialog::DialogButtonProps;\nuse gpui_component::WindowExt;\n```\n\n## Usage\n\n### Setup application root view for display of dialogs\n\nYou need to set up your application's root view to render the dialog layer. This is typically done in your main application struct's render method.\n\nThe [Root::render_dialog_layer](https://docs.rs/gpui-component/latest/gpui_component/struct.Root.html#method.render_dialog_layer) function handles rendering any active dialogs on top of your app content.\n\n```rust\nuse gpui_component::TitleBar;\n\nstruct MyApp {\n view: AnyView,\n}\n\nimpl Render for MyApp {\n fn render(&mut self, window: &mut Window, cx: &mut Context) -> impl IntoElement {\n let dialog_layer = Root::render_dialog_layer(window, cx);\n\n div()\n .size_full()\n .child(\n v_flex()\n .size_full()\n .child(TitleBar::new())\n .child(div().flex_1().overflow_hidden().child(self.view.clone())),\n )\n // Render the dialog layer on top of the app content\n .children(dialog_layer)\n }\n}\n```\n\n### Basic Dialog\n\n```rust\nwindow.open_dialog(cx, |dialog, _, _| {\n dialog\n .title(\"Welcome\")\n .child(\"This is a dialog dialog.\")\n})\n```\n\n### Form Dialog\n\n```rust\nlet input = cx.new(|cx| InputState::new(window, cx));\n\nwindow.open_dialog(cx, |dialog, _, _| {\n dialog\n .title(\"User Information\")\n .child(\n v_flex()\n .gap_3()\n .child(\"Please enter your details:\")\n .child(Input::new(&input))\n )\n .footer(|_, _, _, _| {\n vec![\n Button::new(\"ok\")\n .primary()\n .label(\"Submit\")\n .on_click(|_, window, cx| {\n window.close_dialog(cx);\n }),\n Button::new(\"cancel\")\n .label(\"Cancel\")\n .on_click(|_, window, cx| {\n window.close_dialog(cx);\n }),\n ]\n })\n})\n```\n\n### Dialog with Icon\n\n```rust\nwindow.open_dialog(cx, |dialog, _, cx| {\n dialog\n .child(\n h_flex()\n .gap_3()\n .child(Icon::new(IconName::TriangleAlert)\n .size_6()\n .text_color(cx.theme().warning))\n .child(\"This action cannot be undone.\")\n )\n})\n```\n\n### Scrollable Dialog\n\n```rust\nuse gpui_component::text::markdown;\n\nwindow.open_dialog(cx, |dialog, window, cx| {\n dialog\n .h(px(450.))\n .title(\"Long Content\")\n .child(markdown(long_markdown_text))\n})\n```\n\n### Dialog Options\n\n```rust\nwindow.open_dialog(cx, |dialog, _, _| {\n dialog\n .title(\"Custom Dialog\")\n .overlay(true) // Show overlay (default: true)\n .overlay_closable(true) // Click overlay to close (default: true)\n .keyboard(true) // ESC to close (default: true)\n .close_button(false) // Show close button (default: true)\n .child(\"Dialog content\")\n})\n```\n\n### Nested Dialogs\n\n```rust\nwindow.open_dialog(cx, |dialog, _, _| {\n dialog\n .title(\"First Dialog\")\n .child(\"This is the first dialog\")\n .footer(|_, _, _, _| {\n vec![\n Button::new(\"open-another\")\n .label(\"Open Another Dialog\")\n .on_click(|_, window, cx| {\n window.open_dialog(cx, |dialog, _, _| {\n dialog\n .title(\"Second Dialog\")\n .child(\"This is nested\")\n });\n }),\n ]\n })\n})\n```\n\n### Custom Styling\n\n```rust\nwindow.open_dialog(cx, |dialog, _, cx| {\n dialog\n .rounded(cx.theme().radius_lg)\n .bg(cx.theme().cyan)\n .text_color(cx.theme().info_foreground)\n .title(\"Custom Style\")\n .child(\"Styled dialog content\")\n})\n```\n\n### Custom Padding\n\n```rust\nwindow.open_dialog(cx, |dialog, _, _| {\n dialog\n .p_3() // Custom padding\n .title(\"Custom Padding\")\n .child(\"Dialog with custom spacing\")\n})\n```\n\n### Close Dialog Programmatically\n\nThe `close_dialog` method can be used to close the active dialog from anywhere within the window context.\n\n```rust\n// Close top level active dialog.\nwindow.close_dialog(cx);\n\n// Close and perform action\nButton::new(\"submit\")\n .primary()\n .label(\"Submit\")\n .on_click(|_, window, cx| {\n // Do something\n window.close_dialog(cx);\n })\n```\n\n## Declarative API\n\nThe Dialog component now supports a declarative API that provides a more React-like component composition pattern using dedicated header, title, description, and footer components.\n\n### Import\n\n```rust\nuse gpui_component::dialog::{\n Dialog, DialogHeader, DialogTitle, DialogDescription, DialogFooter,\n};\n```\n\n### Trigger-based Dialog\n\nThe trigger-based approach allows you to create a dialog that opens when a trigger element is clicked. The dialog is defined inline with the trigger.\n\n```rust\nDialog::new(cx)\n .trigger(\n Button::new(\"open-dialog\")\n .outline()\n .label(\"Open Dialog\")\n )\n .content(|content, _, cx| {\n content\n .child(\n DialogHeader::new()\n .child(DialogTitle::new().child(\"Account Created\"))\n .child(DialogDescription::new().child(\n \"Your account has been created successfully!\",\n ))\n )\n .child(\n DialogFooter::new()\n .border_t_1()\n .border_color(cx.theme().border)\n .bg(cx.theme().muted)\n .child(\n Button::new(\"cancel\")\n .outline()\n .label(\"Cancel\")\n .on_click(|_, window, cx| {\n window.close_dialog(cx);\n })\n )\n .child(\n Button::new(\"ok\")\n .primary()\n .label(\"Save Changes\")\n )\n )\n })\n```\n\n### Content Builder Pattern\n\nUse the content builder pattern with `window.open_dialog` for more control over dialog creation:\n\n```rust\nwindow.open_dialog(cx, |dialog, _, _| {\n dialog\n .w(px(400.))\n .content(|content, _, _| {\n content\n .child(\n DialogHeader::new()\n .child(DialogTitle::new().child(\"Custom Width\"))\n .child(DialogDescription::new().child(\n \"This dialog has a custom width of 400px.\",\n ))\n )\n .child(div().child(\n \"Content area with custom width configuration.\"\n ))\n .child(\n DialogFooter::new()\n .justify_center()\n .child(\n Button::new(\"cancel\")\n .flex_1()\n .outline()\n .label(\"Cancel\")\n .on_click(|_, window, cx| {\n window.close_dialog(cx);\n })\n )\n .child(\n Button::new(\"done\")\n .flex_1()\n .primary()\n .label(\"Done\")\n .on_click(|_, window, cx| {\n window.close_dialog(cx);\n })\n )\n )\n })\n})\n```\n\n### Declarative Components\n\n#### DialogHeader\n\nContainer for the dialog's title and description section.\n\n```rust\nDialogHeader::new()\n .child(DialogTitle::new().child(\"Title\"))\n .child(DialogDescription::new().child(\"Description\"))\n```\n\n#### DialogTitle\n\nDisplays the main title of the dialog with semantic styling.\n\n```rust\nDialogTitle::new()\n .child(\"Account Settings\")\n```\n\n#### DialogDescription\n\nDisplays descriptive text below the title with muted styling.\n\n```rust\nDialogDescription::new()\n .child(\"Update your account settings and preferences here.\")\n```\n\n#### DialogFooter\n\nContainer for action buttons and footer content. Automatically applies proper spacing and alignment.\n\n```rust\nDialogFooter::new()\n .bg(cx.theme().muted)\n .border_t_1()\n .border_color(cx.theme().border)\n .child(Button::new(\"cancel\").outline().label(\"Cancel\"))\n .child(Button::new(\"save\").primary().label(\"Save\"))\n```\n\n### Form Dialog with Declarative API\n\n```rust\nlet name_input = cx.new(|cx| InputState::new(window, cx));\nlet email_input = cx.new(|cx| InputState::new(window, cx));\n\nDialog::new(cx)\n .trigger(Button::new(\"edit-profile\").label(\"Edit Profile\"))\n .content(|content, _, cx| {\n content\n .child(\n DialogHeader::new()\n .child(DialogTitle::new().child(\"Edit Profile\"))\n .child(DialogDescription::new().child(\n \"Make changes to your profile here. Click save when done.\"\n ))\n )\n .child(\n v_flex()\n .gap_4()\n .py_4()\n .child(\n v_flex()\n .gap_2()\n .child(\"Name\")\n .child(Input::new(&name_input).placeholder(\"Enter your name\"))\n )\n .child(\n v_flex()\n .gap_2()\n .child(\"Email\")\n .child(Input::new(&email_input).placeholder(\"Enter your email\"))\n )\n )\n .child(\n DialogFooter::new()\n .child(Button::new(\"cancel\").outline().label(\"Cancel\"))\n .child(Button::new(\"save\").primary().label(\"Save Changes\"))\n )\n })\n```\n\n### Styled Footer\n\nCustomize the footer appearance with background colors, borders, and alignment:\n\n```rust\nDialogFooter::new()\n .justify_center() // Center align buttons\n .bg(cx.theme().muted) // Background color\n .border_t_1() // Top border\n .border_color(cx.theme().border)\n .child(Button::new(\"btn1\").flex_1().label(\"Cancel\"))\n .child(Button::new(\"btn2\").flex_1().primary().label(\"Confirm\"))\n```\n\n### DialogContent Container\n\nThe `DialogContent` component provides a flexible container for dialog body content:\n\n```rust\nuse gpui_component::dialog::DialogContent;\n\nwindow.open_dialog(cx, |dialog, _, _| {\n dialog.content(|content, _, cx| {\n content\n .child(DialogHeader::new()\n .child(DialogTitle::new().child(\"Settings\"))\n .child(DialogDescription::new().child(\"Configure your preferences\"))\n )\n .child(\n div()\n .py_4()\n .child(\"Main content area\")\n )\n .child(DialogFooter::new()\n .child(Button::new(\"close\").label(\"Close\"))\n )\n })\n})\n```\n\n## API Reference - Declarative Components\n\n### Dialog\n\n| Method | Description |\n| ------------------------ | ----------------------------------------------------- |\n| `new(cx)` | Create a new Dialog (no longer requires window param) |\n| `trigger(element)` | Set trigger element that opens the dialog |\n| `content(builder)` | Set content using a builder function |\n| `w(px)` / `width(px)` | Set dialog width |\n| `max_w(px)` | Set maximum width |\n| `margin_top(px)` | Set top margin |\n| `overlay(bool)` | Show/hide overlay (default: true) |\n| `overlay_closable(bool)` | Allow closing by clicking overlay (default: true) |\n| `keyboard(bool)` | Allow closing with ESC key (default: true) |\n| `close_button(bool)` | Show/hide close button (default: true) |\n\n### DialogContent\n\nContainer for dialog body content. Automatically applies padding and flex layout.\n\n```rust\nDialogContent::new()\n .child(DialogHeader::new()...)\n .child(/* your content */)\n .child(DialogFooter::new()...)\n```\n\n### DialogHeader\n\nContainer for title and description. Automatically applies vertical flex layout with proper gap.\n\n```rust\nDialogHeader::new()\n .child(DialogTitle::new().child(\"Title\"))\n .child(DialogDescription::new().child(\"Description\"))\n```\n\n### DialogTitle\n\nDisplays the dialog title with semantic styling (font-semibold, proper line-height).\n\n```rust\nDialogTitle::new()\n .child(\"Dialog Title\")\n```\n\n### DialogDescription\n\nDisplays descriptive text with muted foreground color and proper text sizing.\n\n```rust\nDialogDescription::new()\n .child(\"This is a description text that provides more context.\")\n```\n\n### DialogFooter\n\nContainer for footer buttons with automatic spacing and alignment.\n\n```rust\nDialogFooter::new()\n .justify_end() // Right align (default)\n .child(Button::new(\"btn1\").label(\"Cancel\"))\n .child(Button::new(\"btn2\").primary().label(\"OK\"))\n```\n\n## Breaking Changes\n\n### Dialog::new() Signature Change\n\nThe `Dialog::new()` constructor no longer requires a `window` parameter:\n\n```rust\n// Old API (deprecated)\nDialog::new(window, cx)\n\n// New API\nDialog::new(cx)\n```\n\n### Content Builder Function\n\nThe `.content()` method now accepts a builder function instead of a pre-built `DialogContent`:\n\n```rust\n// Old approach (still works)\ndialog.child(DialogHeader::new()...)\n\n// New declarative API\ndialog.content(|content, window, cx| {\n content\n .child(DialogHeader::new()...)\n .child(DialogFooter::new()...)\n})\n```\n\n## Best Practices\n\n1. **Use Declarative Components**: Prefer `DialogHeader`, `DialogTitle`, `DialogDescription`, and `DialogFooter` for consistent styling\n2. **Trigger-based for Simple Cases**: Use the trigger pattern for straightforward dialogs that open from a button\n3. **Builder Pattern for Complex Dialogs**: Use `window.open_dialog` with content builder for dialogs requiring complex logic or state\n4. **Semantic Structure**: Always include `DialogHeader` with title and description for accessibility\n5. **Consistent Footer**: Use `DialogFooter` for all action buttons to maintain visual consistency\n6. **Proper Sizing**: Explicitly set dialog width when content requires specific dimensions\n" }, { "path": "docs/docs/components/dropdown_button.md", "content": "---\ntitle: DropdownButton\ndescription: A DropdownButton is a combination of a button and a trigger button. It allows us to display a dropdown menu when the trigger is clicked, but the left Button can still respond to independent events.\n---\n\n# DropdownButton\n\nA [DropdownButton] is a combination of a button and a trigger button. It allows us to display a dropdown menu when the trigger is clicked, but the left Button can still respond to independent events.\n\nAnd more option methods of [Button] are also available for the DropdownButton, such as setting different variants using [ButtonCustomVariant], sizes using [Sizable], adding icons, loading states.\n\n## Import\n\n```rust\nuse gpui_component::button::{Button, DropdownButton};\n```\n\n## Usage\n\n```rust\nuse gpui::Corner;\n\nDropdownButton::new(\"dropdown\")\n .button(Button::new(\"btn\").label(\"Click Me\"))\n .dropdown_menu(|menu, _, _| {\n menu.menu(\"Option 1\", Box::new(MyAction))\n .menu(\"Option 2\", Box::new(MyAction))\n .separator()\n .menu(\"Option 3\", Box::new(MyAction))\n })\n```\n\n### Variants\n\nSame as [Button], DropdownButton supports different variants.\n\n````rust\nDropdownButton::new(\"dropdown\")\n .primary()\n .button(Button::new(\"btn\").label(\"Primary\"))\n .dropdown_menu(|menu, _, _| {\n menu.menu(\"Option 1\", Box::new(MyAction))\n })\n```\n\n### With custom anchor\n\n```rust\n// With custom anchor\nDropdownButton::new(\"dropdown\")\n .button(Button::new(\"btn\").label(\"Click Me\"))\n .dropdown_menu_with_anchor(Corner::BottomRight, |menu, _, _| {\n menu.menu(\"Option 1\", Box::new(MyAction))\n })\n````\n\n[Button]: https://docs.rs/gpui-component/latest/gpui_component/button/struct.Button.html\n[DropdownButton]: https://docs.rs/gpui-component/latest/gpui_component/button/struct.DropdownButton.html\n[ButtonCustomVariant]: https://docs.rs/gpui-component/latest/gpui_component/button/struct.ButtonCustomVariant.html\n[Sizable]: https://docs.rs/gpui-component/latest/gpui_component/trait.Sizable.html\n" }, { "path": "docs/docs/components/editor.md", "content": "---\ntitle: Editor\ndescription: Multi-line text input component with auto-resize, validation, and advanced editing features.\n---\n\n# Editor\n\nA powerful multi-line text input component that extends the basic input functionality with support for multiple lines, auto-resizing, syntax highlighting, line numbers, and code editing features. Perfect for forms, code editors, and content editing.\n\n## Import\n\n```rust\nuse gpui_component::input::{InputState, Input};\n```\n\n## Usage\n\n### Textarea\n\n```rust\nlet state = cx.new(|cx|\n InputState::new(window, cx)\n .multi_line(true)\n .placeholder(\"Enter your message...\")\n);\n\nInput::new(&state)\n```\n\nWith fixed height Textarea:\n\n```rust\nlet state = cx.new(|cx|\n InputState::new(window, cx)\n .multi_line(true)\n .rows(10) // Set number of rows\n .placeholder(\"Enter text here...\")\n);\n\nInput::new(&state)\n .h(px(320.)) // Set explicit height\n```\n\n### AutoGrow\n\n```rust\nlet state = cx.new(|cx|\n InputState::new(window, cx)\n .auto_grow(1, 5) // min_rows: 1, max_rows: 5\n .placeholder(\"Type here and watch it grow...\")\n);\n\nInput::new(&state)\n```\n\n### CodeEditor\n\nGPUI Component's `InputState` supports a code editor mode with syntax highlighting, line numbers, and search functionality.\n\nIt design for high performance and can handle large files efficiently. We\nused [tree-sitter](https://tree-sitter.github.io/tree-sitter/) for syntax highlighting, and [ropey](https://github.com/cessen/ropey) for text storage and manipulation.\n\n```rust\nlet state = cx.new(|cx|\n InputState::new(window, cx)\n .code_editor(\"rust\") // Language for syntax highlighting\n .line_number(true) // Show line numbers\n .searchable(true) // Enable search functionality\n .show_whitespaces(true) // Show whitespace characters\n .default_value(\"fn main() {\\n println!(\\\"Hello, world!\\\");\\n}\")\n);\n\nInput::new(&state)\n .h_full() // Full height\n```\n\n#### Single Line Mode\n\nSometimes you may want to use the code editor features but restrict input to a single line, for example for code snippets or commands.\n\n```rust\nlet state = cx.new(|cx|\n InputState::new(window, cx)\n .code_editor(\"rust\")\n .multi_line(false) // Single line\n .default_value(\"println!(\\\"Hello, world!\\\");\")\n);\n\nInput::new(&state)\n```\n\n### TabSize\n\n```rust\nuse gpui_component::input::TabSize;\n\nlet state = cx.new(|cx|\n InputState::new(window, cx)\n .multi_line(true)\n .tab_size(TabSize {\n tab_size: 4,\n hard_tabs: false, // Use spaces instead of tabs\n })\n);\n\nInput::new(&state)\n```\n\n### Searchable\n\nThe search feature allows for all multi-line inputs to support searching through the content using `Ctrl+F` (or `Cmd+F` on Mac).\n\nIt provides a search bar with options to navigate between matches and highlight them.\n\nUse `searchable` method to enable:\n\n```rust\nlet state = cx.new(|cx|\n InputState::new(window, cx)\n .multi_line(true)\n .searchable(true) // Enable Ctrl+F search\n .rows(15)\n .default_value(\"Search through this content...\")\n);\n\nInput::new(&state)\n```\n\n### SoftWrap\n\nBy default multi-line inputs have soft wrapping enabled, meaning long lines will wrap to fit the width of the textarea.\n\nYou can disable soft wrapping to allow horizontal scrolling instead:\n\n```rust\n// With soft wrap (default)\nlet state = cx.new(|cx|\n InputState::new(window, cx)\n .multi_line(true)\n .soft_wrap(true)\n .rows(6)\n);\n\n// Without soft wrap (horizontal scrolling)\nlet state = cx.new(|cx|\n InputState::new(window, cx)\n .multi_line(true)\n .soft_wrap(false)\n .rows(6)\n .default_value(\"This is a very long line that will not wrap automatically but will show horizontal scrollbar instead.\")\n);\n```\n\n### Text Manipulation\n\n```rust\n// Insert text at cursor position\nstate.update(cx, |state, cx| {\n state.insert(\"inserted text\", window, cx);\n});\n\n// Replace all content\nstate.update(cx, |state, cx| {\n state.replace(\"new content\", window, cx);\n});\n\n// Set cursor position\nstate.update(cx, |state, cx| {\n state.set_cursor_position(Position { line: 2, character: 5 }, window, cx);\n});\n\n// Get cursor position\nlet position = state.read(cx).cursor_position();\nprintln!(\"Line: {}, Column: {}\", position.line, position.character);\n```\n\n### Validation\n\n```rust\nlet state = cx.new(|cx|\n InputState::new(window, cx)\n .multi_line(true)\n .validate(|text, _| {\n // Validate that content is not empty and under 1000 chars\n !text.trim().is_empty() && text.len() <= 1000\n })\n);\n\nInput::new(&state)\n```\n\n### Handle Events\n\n```rust\ncx.subscribe_in(&state, window, |view, state, event, window, cx| {\n match event {\n InputEvent::Change => {\n let content = state.read(cx).value();\n println!(\"Content changed: {} characters\", content.len());\n }\n InputEvent::PressEnter { secondary } => {\n if secondary {\n println!(\"Shift+Enter pressed - insert line break\");\n } else {\n println!(\"Enter pressed - could submit form\");\n }\n }\n InputEvent::Focus => println!(\"Textarea focused\"),\n InputEvent::Blur => println!(\"Textarea blurred\"),\n }\n});\n```\n\n### Disabled State\n\n```rust\nInput::new(&state)\n .disabled(true)\n .h(px(200.))\n```\n\n### Custom Styling\n\n```rust\n// Without default appearance\nInput::new(&state)\n .appearance(false)\n .h(px(200.))\n\n// Custom container styling\ndiv()\n .bg(cx.theme().background)\n .border_2()\n .border_color(cx.theme().input)\n .rounded(cx.theme().radius_lg)\n .p_4()\n .child(\n Input::new(&state)\n .appearance(false)\n .h(px(150.))\n )\n```\n\n## Examples\n\n### Comment Box\n\n```rust\nstruct CommentBox {\n state: Entity,\n char_limit: usize,\n}\n\nimpl CommentBox {\n fn new(window: &mut Window, cx: &mut Context) -> Self {\n let state = cx.new(|cx|\n InputState::new(window, cx)\n .auto_grow(3, 8)\n .placeholder(\"Write your comment...\")\n .validate(|text, _| text.len() <= 500)\n );\n\n Self {\n state,\n char_limit: 500,\n }\n }\n}\n\nimpl Render for CommentBox {\n fn render(&mut self, _: &mut Window, cx: &mut Context) -> impl IntoElement {\n let content = self.state.read(cx).value();\n let char_count = content.len();\n let remaining = self.char_limit.saturating_sub(char_count);\n\n v_flex()\n .gap_2()\n .child(Input::new(&self.state))\n .child(\n h_flex()\n .justify_between()\n .child(\n div()\n .text_xs()\n .text_color(cx.theme().muted_foreground)\n .child(format!(\"{} characters remaining\", remaining))\n )\n .child(\n Button::new(\"submit\")\n .primary()\n .disabled(char_count == 0 || char_count > self.char_limit)\n .label(\"Post Comment\")\n )\n )\n }\n}\n```\n\n### Code Editor with Language Selection\n\n```rust\nstruct CodeEditor {\n editor: Entity,\n language: String,\n}\n\nimpl CodeEditor {\n fn set_language(&mut self, language: String, window: &mut Window, cx: &mut Context) {\n self.language = language.clone();\n self.editor.update(cx, |editor, cx| {\n editor.set_highlighter(language, cx);\n });\n }\n}\n\nimpl Render for CodeEditor {\n fn render(&mut self, _: &mut Window, cx: &mut Context) -> impl IntoElement {\n v_flex()\n .gap_3()\n .child(\n h_flex()\n .gap_2()\n .child(\"Language:\")\n .child(\n // Language selector dropdown would go here\n div().child(self.language.clone())\n )\n )\n .child(\n Input::new(&self.editor)\n .h(px(400.))\n .bordered(true)\n )\n }\n}\n```\n\n### Text Editor with Toolbar\n\n```rust\nstruct TextEditor {\n editor: Entity,\n}\n\nimpl TextEditor {\n fn format_bold(&mut self, window: &mut Window, cx: &mut Context) {\n self.editor.update(cx, |editor, cx| {\n if !editor.selected_range.is_empty() {\n let selected = editor.selected_text().to_string();\n editor.replace(&format!(\"**{}**\", selected), window, cx);\n }\n });\n }\n}\n\nimpl Render for TextEditor {\n fn render(&mut self, _: &mut Window, cx: &mut Context) -> impl IntoElement {\n v_flex()\n .gap_2()\n .child(\n h_flex()\n .gap_1()\n .p_2()\n .border_b_1()\n .border_color(cx.theme().border)\n .child(\n Button::new(\"bold\")\n .ghost()\n .icon(IconName::Bold)\n .on_click(cx.listener(Self::format_bold))\n )\n .child(\n Button::new(\"italic\")\n .ghost()\n .icon(IconName::Italic)\n )\n )\n .child(\n Input::new(&self.editor)\n .h(px(300.))\n )\n }\n}\n```\n" }, { "path": "docs/docs/components/focus-trap.md", "content": "---\ntitle: Focus Trap\ndescription: A utility element that traps keyboard focus within a container, preventing Tab navigation from escaping.\n---\n\n# Focus Trap\n\nFocus trap utility for constraining keyboard focus within a specific container. Essential for modal dialogs, sheets, and overlay components to provide proper keyboard navigation accessibility.\n\n**Note:** [Dialog](/docs/components/dialog) and [Sheet](/docs/components/sheet) components have focus trap built-in. You only need to manually use `focus_trap()` for custom modal-like components.\n\n## Import\n\n```rust\nuse gpui_component::FocusTrapElement;\n```\n\n## Usage\n\n### Basic Focus Trap\n\n```rust\nlet container_handle = cx.focus_handle();\n\nv_flex()\n .child(Button::new(\"btn1\").label(\"Button 1\"))\n .child(Button::new(\"btn2\").label(\"Button 2\"))\n .child(Button::new(\"btn3\").label(\"Button 3\"))\n .focus_trap(\"trap1\", &container_handle)\n// Pressing Tab will cycle: btn1 -> btn2 -> btn3 -> btn1\n// Focus will not escape to elements outside this container\n```\n\n### Multiple Focus Traps\n\nYou can have multiple independent focus trap areas in your application. Each trap operates independently:\n\n```rust\nlet trap1_handle = cx.focus_handle();\nlet trap2_handle = cx.focus_handle();\n\nv_flex()\n .gap_4()\n // First focus trap area\n .child(\n h_flex()\n .gap_2()\n .child(Button::new(\"trap1-1\").label(\"Area 1 - Button 1\"))\n .child(Button::new(\"trap1-2\").label(\"Area 1 - Button 2\"))\n .child(Button::new(\"trap1-3\").label(\"Area 1 - Button 3\"))\n .focus_trap(\"trap1\", &trap1_handle)\n )\n // Second focus trap area\n .child(\n h_flex()\n .gap_2()\n .child(Button::new(\"trap2-1\").label(\"Area 2 - Button 1\"))\n .child(Button::new(\"trap2-2\").label(\"Area 2 - Button 2\"))\n .focus_trap(\"trap2\", &trap2_handle)\n )\n```\n\n### Focus Trap with Dialog\n\n[Dialog] components have focus trap built-in automatically. You don't need to manually add `focus_trap()`:\n\n```rust\nwindow.open_dialog(cx, |dialog, _, _| {\n dialog\n .title(\"Settings\")\n .child(\n v_flex()\n .gap_3()\n .child(Button::new(\"save\").label(\"Save\"))\n .child(Button::new(\"cancel\").label(\"Cancel\"))\n .child(Button::new(\"reset\").label(\"Reset\"))\n )\n // Dialog internally uses focus_trap()\n // Tab navigation automatically cycles: save -> cancel -> reset -> save\n})\n```\n\n### Focus Trap with Sheet\n\n[Sheet] components also have focus trap built-in automatically:\n\n```rust\nwindow.open_sheet(cx, |sheet, _, _| {\n sheet\n .title(\"Filter Options\")\n .child(\n v_flex()\n .gap_2()\n .child(Checkbox::new(\"option1\").label(\"Option 1\"))\n .child(Checkbox::new(\"option2\").label(\"Option 2\"))\n .child(Button::new(\"apply\").label(\"Apply Filters\"))\n )\n // Sheet internally uses focus_trap()\n // Focus automatically cycles within the sheet panel\n})\n```\n\n## How It Works\n\nThe focus trap system consists of three key components:\n\n1. **FocusTrapContainer**: Wraps any container element and registers it as a focus trap area\n2. **FocusTrapManager**: Global state manager that tracks all active focus traps\n3. **Root Integration**: The [Root] view intercepts Tab/Shift-Tab events and enforces focus cycling\n\nWhen Tab or Shift-Tab is pressed:\n\n1. [Root] detects if the currently focused element is inside a focus trap\n2. If yes, it calculates the next focusable element within the same trap\n3. If focus would escape the trap, it cycles back to the beginning (Tab) or end (Shift-Tab)\n4. This prevents focus from leaving the trapped container\n\n### Built-in Focus Trap Components\n\nThe following components have focus trap functionality built-in and don't require manual `focus_trap()` calls:\n\n- **[Dialog]** - Modal dialogs automatically trap focus (see `dialog.rs:437`)\n- **[Sheet]** - Side panels automatically trap focus (see `sheet.rs:197`)\n\n## API Reference\n\n- [FocusTrapElement](https://docs.rs/gpui-component/latest/gpui_component/trait.FocusTrapElement.html)\n- [FocusTrapContainer](https://docs.rs/gpui-component/latest/gpui_component/struct.FocusTrapContainer.html)\n\n## Examples\n\n### Custom Modal with Focus Trap\n\n```rust\nstruct CustomModal {\n container_handle: FocusHandle,\n}\n\nimpl CustomModal {\n fn new(cx: &mut App) -> Self {\n Self {\n container_handle: cx.focus_handle(),\n }\n }\n}\n\nimpl Render for CustomModal {\n fn render(&mut self, _: &mut Window, cx: &mut Context) -> impl IntoElement {\n div()\n .absolute()\n .inset_0()\n .flex()\n .items_center()\n .justify_center()\n .child(\n v_flex()\n .gap_4()\n .p_6()\n .bg(cx.theme().background)\n .rounded(cx.theme().radius_lg)\n .shadow_lg()\n .border_1()\n .border_color(cx.theme().border)\n .child(\"This is a modal dialog\")\n .child(\n h_flex()\n .gap_2()\n .child(Button::new(\"ok\").primary().label(\"OK\"))\n .child(Button::new(\"cancel\").label(\"Cancel\"))\n )\n .focus_trap(\"modal\", &self.container_handle)\n )\n }\n}\n```\n\n### Nested Focus Traps\n\nFocus traps support nesting. When multiple traps are active, the innermost trap takes precedence:\n\n```rust\nlet outer_handle = cx.focus_handle();\nlet inner_handle = cx.focus_handle();\n\ndiv()\n .child(\n v_flex()\n .gap_4()\n .p_4()\n .border_1()\n .border_color(cx.theme().border)\n .child(Button::new(\"outer-1\").label(\"Outer Button 1\"))\n .child(\n // Inner trap takes precedence when focused\n h_flex()\n .gap_2()\n .p_4()\n .bg(cx.theme().accent.opacity(0.1))\n .child(Button::new(\"inner-1\").label(\"Inner Button 1\"))\n .child(Button::new(\"inner-2\").label(\"Inner Button 2\"))\n .focus_trap(\"inner\", &inner_handle)\n )\n .child(Button::new(\"outer-2\").label(\"Outer Button 2\"))\n .focus_trap(\"outer\", &outer_handle)\n )\n```\n\n### Conditional Focus Trap\n\nYou can conditionally apply focus trapping based on application state:\n\n```rust\nstruct ModalView {\n is_modal: bool,\n container_handle: FocusHandle,\n}\n\nimpl Render for ModalView {\n fn render(&mut self, _: &mut Window, cx: &mut Context) -> impl IntoElement {\n let content = v_flex()\n .gap_2()\n .child(Button::new(\"btn1\").label(\"Button 1\"))\n .child(Button::new(\"btn2\").label(\"Button 2\"))\n .child(Button::new(\"btn3\").label(\"Button 3\"));\n\n if self.is_modal {\n // Apply focus trap when in modal mode\n content.focus_trap(\"conditional\", &self.container_handle)\n .into_any_element()\n } else {\n // Normal behavior without focus trap\n content.into_any_element()\n }\n }\n}\n```\n\n## Accessibility Notes\n\n- Focus trapping is essential for modal dialogs and overlays to meet WCAG accessibility guidelines\n- Always provide a way to close or dismiss trapped focus areas (ESC key, close button)\n- The first focusable element in the trap should receive focus when the trap is activated\n- Use focus traps sparingly - only for truly modal interactions\n- Ensure keyboard navigation order is logical within the trapped area\n\n## See Also\n\n- [Root View System](/docs/root) - Manages focus trap behavior at the window level\n- [Dialog](/docs/components/dialog) - Uses focus trap automatically\n- [Sheet](/docs/components/sheet) - Uses focus trap automatically\n- [focus-trap-react](https://github.com/focus-trap/focus-trap-react) - Similar concept for React applications\n\n[Root]: https://docs.rs/gpui-component/latest/gpui_component/struct.Root.html\n[FocusTrapElement]: https://docs.rs/gpui-component/latest/gpui_component/trait.FocusTrapElement.html\n[Dialog]: /docs/components/dialog\n[Sheet]: /docs/components/sheet\n" }, { "path": "docs/docs/components/form.md", "content": "---\ntitle: Form\ndescription: Flexible form container with support for field layout, validation, and multi-column layouts.\n---\n\n# Form\n\nA comprehensive form component that provides structured layout for form fields with support for vertical/horizontal layouts, validation, field groups, and responsive multi-column layouts.\n\n## Import\n\n```rust\nuse gpui_component::form::{field, v_form, h_form, Form, Field};\n```\n\n## Usage\n\n### Basic Form\n\n```rust\nv_form()\n .child(\n field()\n .label(\"Name\")\n .child(Input::new(&name_input))\n )\n .child(\n field()\n .label(\"Email\")\n .child(Input::new(&email_input))\n .required(true)\n )\n```\n\n### Horizontal Form Layout\n\n```rust\nh_form()\n .label_width(px(120.))\n .child(\n field()\n .label(\"First Name\")\n .child(Input::new(&first_name))\n )\n .child(\n field()\n .label(\"Last Name\")\n .child(Input::new(&last_name))\n )\n```\n\n### Multi-Column Form\n\n```rust\nv_form()\n .columns(2) // Two-column layout\n .child(\n field()\n .label(\"First Name\")\n .child(Input::new(&first_name))\n )\n .child(\n field()\n .label(\"Last Name\")\n .child(Input::new(&last_name))\n )\n .child(\n field()\n .label(\"Bio\")\n .col_span(2) // Span across both columns\n .child(Input::new(&bio_input))\n )\n```\n\n## Form Container and Layout\n\n### Vertical Layout (Default)\n\n```rust\nv_form()\n .gap(px(12.))\n .child(field().label(\"Name\").child(input))\n .child(field().label(\"Email\").child(email_input))\n```\n\n### Horizontal Layout\n\n```rust\nh_form()\n .label_width(px(100.))\n .child(field().label(\"Name\").child(input))\n .child(field().label(\"Email\").child(email_input))\n```\n\n### Custom Sizing\n\n```rust\nv_form()\n .large() // Large form size\n .label_text_size(rems(1.2))\n .child(field().label(\"Title\").child(input))\n\nv_form()\n .small() // Small form size\n .child(field().label(\"Code\").child(input))\n```\n\n## Form Validation\n\n### Required Fields\n\n```rust\nfield()\n .label(\"Email\")\n .required(true) // Shows asterisk (*) next to label\n .child(Input::new(&email_input))\n```\n\n### Field Descriptions\n\n```rust\nfield()\n .label(\"Password\")\n .description(\"Must be at least 8 characters long\")\n .child(Input::new(&password_input))\n```\n\n### Dynamic Descriptions\n\n```rust\nfield()\n .label(\"Bio\")\n .description_fn(|_, _| {\n div().child(\"Use at most 100 words to describe yourself.\")\n })\n .child(Input::new(&bio_input))\n```\n\n### Field Visibility\n\n```rust\nfield()\n .label(\"Admin Settings\")\n .visible(user.is_admin()) // Conditionally show field\n .child(Switch::new(\"admin-mode\"))\n```\n\n## Submit Handling\n\n### Basic Submit Pattern\n\n```rust\nstruct FormView {\n name_input: Entity,\n email_input: Entity,\n}\n\nimpl FormView {\n fn submit(&mut self, cx: &mut Context) {\n let name = self.name_input.read(cx).value();\n let email = self.email_input.read(cx).value();\n\n // Validate inputs\n if name.is_empty() || email.is_empty() {\n // Show validation error\n return;\n }\n\n // Submit form data\n self.handle_submit(name, email, cx);\n }\n}\n\n// Form with submit button\nv_form()\n .child(field().label(\"Name\").child(Input::new(&self.name_input)))\n .child(field().label(\"Email\").child(Input::new(&self.email_input)))\n .child(\n field()\n .label_indent(false)\n .child(\n Button::new(\"submit\")\n .primary()\n .child(\"Submit\")\n .on_click(cx.listener(|this, _, _, cx| this.submit(cx)))\n )\n )\n```\n\n### Form with Action Buttons\n\n```rust\nv_form()\n .child(field().label(\"Title\").child(Input::new(&title)))\n .child(field().label(\"Content\").child(Input::new(&content)))\n .child(\n field()\n .label_indent(false)\n .child(\n h_flex()\n .gap_2()\n .child(Button::new(\"save\").primary().child(\"Save\"))\n .child(Button::new(\"cancel\").child(\"Cancel\"))\n .child(Button::new(\"preview\").outline().child(\"Preview\"))\n )\n )\n```\n\n## Field Groups\n\n### Related Fields\n\n```rust\nv_form()\n .child(\n field()\n .label(\"Name\")\n .child(\n h_flex()\n .gap_2()\n .child(div().flex_1().child(Input::new(&first_name)))\n .child(div().flex_1().child(Input::new(&last_name)))\n )\n )\n .child(\n field()\n .label(\"Address\")\n .items_start() // Align to start for multi-line content\n .child(\n v_flex()\n .gap_2()\n .child(Input::new(&street))\n .child(\n h_flex()\n .gap_2()\n .child(div().flex_1().child(Input::new(&city)))\n .child(div().w(px(100.)).child(Input::new(&zip)))\n )\n )\n )\n```\n\n### Custom Field Components\n\n```rust\nfield()\n .label(\"Theme Color\")\n .child(ColorPicker::new(&color_state).small())\n\nfield()\n .label(\"Birth Date\")\n .description(\"We'll send you a birthday gift!\")\n .child(DatePicker::new(&date_state))\n\nfield()\n .label(\"Notifications\")\n .child(\n v_flex()\n .gap_2()\n .child(Switch::new(\"email\").label(\"Email notifications\"))\n .child(Switch::new(\"push\").label(\"Push notifications\"))\n .child(Switch::new(\"sms\").label(\"SMS notifications\"))\n )\n```\n\n### Conditional Fields\n\n```rust\nv_form()\n .child(\n field()\n .label(\"Account Type\")\n .child(Select::new(&account_type))\n )\n .child(\n field()\n .label(\"Company Name\")\n .visible(is_business_account) // Show only for business accounts\n .child(Input::new(&company_name))\n )\n .child(\n field()\n .label(\"Tax ID\")\n .visible(is_business_account)\n .required(is_business_account)\n .child(Input::new(&tax_id))\n )\n```\n\n## Grid Layout and Positioning\n\n### Column Spanning\n\n```rust\nv_form()\n .columns(3) // Three-column grid\n .child(field().label(\"First\").child(input1))\n .child(field().label(\"Second\").child(input2))\n .child(field().label(\"Third\").child(input3))\n .child(\n field()\n .label(\"Full Width\")\n .col_span(3) // Spans all three columns\n .child(Input::new(&full_width))\n )\n```\n\n### Column Positioning\n\n```rust\nv_form()\n .columns(4)\n .child(field().label(\"A\").child(input_a))\n .child(field().label(\"B\").child(input_b))\n .child(\n field()\n .label(\"Positioned\")\n .col_start(1) // Start at column 1\n .col_span(2) // Span 2 columns\n .child(input_positioned)\n )\n```\n\n### Responsive Layout\n\n```rust\nv_form()\n .columns(if is_mobile { 1 } else { 2 })\n .child(field().label(\"Name\").child(name_input))\n .child(field().label(\"Email\").child(email_input))\n .child(\n field()\n .label(\"Bio\")\n .when(!is_mobile, |field| field.col_span(2))\n .child(bio_input)\n )\n```\n\n## Examples\n\n### User Registration Form\n\n```rust\nstruct RegistrationForm {\n first_name: Entity,\n last_name: Entity,\n email: Entity,\n password: Entity,\n confirm_password: Entity,\n terms_accepted: bool,\n}\n\nimpl Render for RegistrationForm {\n fn render(&mut self, _: &mut Window, cx: &mut Context) -> impl IntoElement {\n v_form()\n .large()\n .child(\n field()\n .label(\"Personal Information\")\n .label_indent(false)\n .child(\n h_flex()\n .gap_3()\n .child(\n div().flex_1().child(\n Input::new(&self.first_name)\n .placeholder(\"First name\")\n )\n )\n .child(\n div().flex_1().child(\n Input::new(&self.last_name)\n .placeholder(\"Last name\")\n )\n )\n )\n )\n .child(\n field()\n .label(\"Email\")\n .required(true)\n .child(Input::new(&self.email))\n )\n .child(\n field()\n .label(\"Password\")\n .required(true)\n .description(\"Must be at least 8 characters\")\n .child(Input::new(&self.password))\n )\n .child(\n field()\n .label(\"Confirm Password\")\n .required(true)\n .child(Input::new(&self.confirm_password))\n )\n .child(\n field()\n .label_indent(false)\n .child(\n Checkbox::new(\"terms\")\n .label(\"I agree to the Terms of Service\")\n .checked(self.terms_accepted)\n .on_click(cx.listener(|this, checked, _, cx| {\n this.terms_accepted = *checked;\n cx.notify();\n }))\n )\n )\n .child(\n field()\n .label_indent(false)\n .child(\n Button::new(\"register\")\n .primary()\n .large()\n .w_full()\n .child(\"Create Account\")\n )\n )\n }\n}\n```\n\n### Settings Form with Sections\n\n```rust\nv_form()\n .column(2)\n .child(\n field()\n .label(\"Profile\")\n .label_indent(false)\n .col_span(2)\n .child(Divider::horizontal())\n )\n .child(\n field()\n .label(\"Display Name\")\n .child(Input::new(&display_name))\n )\n .child(\n field()\n .label(\"Email\")\n .child(Input::new(&email))\n )\n .child(\n field()\n .label(\"Bio\")\n .col_span(2)\n .items_start()\n .child(Input::new(&bio))\n )\n .child(\n field()\n .label(\"Preferences\")\n .label_indent(false)\n .col_span(2)\n .child(Divider::horizontal())\n )\n .child(\n field()\n .label(\"Theme\")\n .child(Select::new(&theme_state))\n )\n .child(\n field()\n .label(\"Language\")\n .child(Select::new(&language_state))\n )\n .child(\n field()\n .label_indent(false)\n .child(Switch::new(\"notifications\").label(\"Enable notifications\"))\n )\n .child(\n field()\n .label_indent(false)\n .child(Switch::new(\"marketing\").label(\"Marketing emails\"))\n )\n```\n\n### Contact Form\n\n```rust\nv_form()\n .child(\n field()\n .label(\"Contact Information\")\n .child(\n h_flex()\n .gap_2()\n .child(\n Select::new(&prefix_state)\n .w(px(80.))\n )\n .child(\n div().flex_1().child(\n Input::new(&name_input)\n .placeholder(\"Your name\")\n )\n )\n )\n )\n .child(\n field()\n .label(\"Email\")\n .required(true)\n .child(Input::new(&email_input))\n )\n .child(\n field()\n .label(\"Subject\")\n .child(Select::new(&subject_state))\n )\n .child(\n field()\n .label(\"Message\")\n .required(true)\n .items_start()\n .description(\"Please describe your inquiry in detail\")\n .child(Input::new(&message_input))\n )\n .child(\n field()\n .label_indent(false)\n .child(\n h_flex()\n .gap_2()\n .justify_between()\n .child(\n Checkbox::new(\"copy\")\n .label(\"Send me a copy\")\n )\n .child(\n h_flex()\n .gap_2()\n .child(Button::new(\"cancel\").child(\"Cancel\"))\n .child(Button::new(\"send\").primary().child(\"Send Message\"))\n )\n )\n )\n```\n" }, { "path": "docs/docs/components/group-box.md", "content": "---\ntitle: GroupBox\ndescription: A styled container element with an optional title to group related content together.\n---\n\n# GroupBox\n\nThe GroupBox component is a versatile container that groups related content together with optional borders, backgrounds, and titles. It provides visual organization and semantic grouping for form controls, settings panels, and other related UI elements.\n\n## Import\n\n```rust\nuse gpui_component::group_box::{GroupBox, GroupBoxVariant, GroupBoxVariants as _};\n```\n\n## Usage\n\n### Basic GroupBox\n\n```rust\nGroupBox::new()\n .child(\"Subscriptions\")\n .child(Checkbox::new(\"all\").label(\"All\"))\n .child(Checkbox::new(\"newsletter\").label(\"Newsletter\"))\n .child(Button::new(\"save\").primary().label(\"Save\"))\n```\n\n### GroupBox Variants\n\n```rust\n// Normal variant (default) - no background or border\nGroupBox::new()\n .child(\"Content without visual container\")\n\n// Fill variant - with background color\nGroupBox::new()\n .fill()\n .title(\"Settings\")\n .child(\"Content with background\")\n\n// Outline variant - with border, no background\nGroupBox::new()\n .outline()\n .title(\"Preferences\")\n .child(\"Content with border\")\n```\n\n### With Title\n\n```rust\nGroupBox::new()\n .fill()\n .title(\"Account Settings\")\n .child(\n h_flex()\n .justify_between()\n .child(\"Make profile private\")\n .child(Switch::new(\"privacy\").checked(false))\n )\n .child(Button::new(\"save\").primary().label(\"Save Changes\"))\n```\n\n### Custom ID\n\n```rust\nGroupBox::new()\n .id(\"user-preferences\")\n .outline()\n .title(\"User Preferences\")\n .child(\"Preference controls...\")\n```\n\n### Custom Title Styling\n\n```rust\nuse gpui::{StyleRefinement, relative};\n\nGroupBox::new()\n .outline()\n .title(\"Custom Title\")\n .title_style(\n StyleRefinement::default()\n .font_semibold()\n .line_height(relative(1.0))\n .px_3()\n .text_color(cx.theme().accent)\n )\n .child(\"Content with custom title styling\")\n```\n\n### Custom Content Styling\n\n```rust\nGroupBox::new()\n .fill()\n .title(\"Custom Content Area\")\n .content_style(\n StyleRefinement::default()\n .rounded_xl()\n .py_3()\n .px_4()\n .border_2()\n .border_color(cx.theme().accent)\n )\n .child(\"Content with custom styling\")\n```\n\n### Complex Example\n\n```rust\nGroupBox::new()\n .id(\"notification-settings\")\n .outline()\n .bg(cx.theme().group_box)\n .rounded_xl()\n .p_5()\n .title(\"Notification Preferences\")\n .title_style(\n StyleRefinement::default()\n .font_semibold()\n .line_height(relative(1.0))\n .px_3()\n )\n .content_style(\n StyleRefinement::default()\n .rounded_xl()\n .py_3()\n .px_4()\n .border_2()\n )\n .child(\n v_flex()\n .gap_3()\n .child(\n h_flex()\n .justify_between()\n .child(\"Email notifications\")\n .child(Switch::new(\"email\").checked(true))\n )\n .child(\n h_flex()\n .justify_between()\n .child(\"Push notifications\")\n .child(Switch::new(\"push\").checked(false))\n )\n .child(\n h_flex()\n .justify_between()\n .child(\"SMS notifications\")\n .child(Switch::new(\"sms\").checked(false))\n )\n )\n .child(\n h_flex()\n .justify_end()\n .gap_2()\n .child(Button::new(\"cancel\").label(\"Cancel\"))\n .child(Button::new(\"save\").primary().label(\"Save Settings\"))\n )\n```\n\n## Examples\n\n### Form Section\n\n```rust\nGroupBox::new()\n .fill()\n .title(\"Personal Information\")\n .child(\n v_flex()\n .gap_4()\n .child(\n h_flex()\n .gap_2()\n .child(Input::new(\"first-name\").placeholder(\"First Name\"))\n .child(Input::new(\"last-name\").placeholder(\"Last Name\"))\n )\n .child(Input::new(\"email\").placeholder(\"Email Address\"))\n .child(\n h_flex()\n .justify_end()\n .child(Button::new(\"update\").primary().label(\"Update Profile\"))\n )\n )\n```\n\n### Settings Panel\n\n```rust\nGroupBox::new()\n .outline()\n .title(\"Display Settings\")\n .child(\n v_flex()\n .gap_3()\n .child(\n h_flex()\n .justify_between()\n .child(Label::new(\"Theme\"))\n .child(\n RadioGroup::horizontal(\"theme\")\n .child(Radio::new(\"light\").label(\"Light\"))\n .child(Radio::new(\"dark\").label(\"Dark\"))\n .child(Radio::new(\"auto\").label(\"Auto\"))\n )\n )\n .child(\n h_flex()\n .justify_between()\n .child(Label::new(\"Font Size\"))\n .child(\n Select::new(\"font-size\")\n .option(\"small\", \"Small\")\n .option(\"medium\", \"Medium\")\n .option(\"large\", \"Large\")\n )\n )\n )\n```\n\n### Subscription Management\n\n```rust\nGroupBox::new()\n .title(\"Email Subscriptions\")\n .child(\n v_flex()\n .gap_2()\n .child(Checkbox::new(\"newsletter\").label(\"Weekly Newsletter\"))\n .child(Checkbox::new(\"updates\").label(\"Product Updates\"))\n .child(Checkbox::new(\"security\").label(\"Security Alerts\"))\n .child(Checkbox::new(\"marketing\").label(\"Marketing Communications\"))\n )\n .child(\n h_flex()\n .justify_between()\n .mt_4()\n .child(Button::new(\"unsubscribe-all\").link().label(\"Unsubscribe All\"))\n .child(Button::new(\"save\").primary().label(\"Update Preferences\"))\n )\n```\n\n### Without Title\n\n```rust\nGroupBox::new()\n .outline()\n .child(\n h_flex()\n .justify_between()\n .items_center()\n .child(\"Enable two-factor authentication\")\n .child(Switch::new(\"2fa\").checked(false))\n )\n```\n\n## Styling\n\nThe GroupBox component supports extensive customization through both built-in variants and custom styling:\n\n### Theme Integration\n\n```rust\n// Using theme colors\nGroupBox::new()\n .fill()\n .bg(cx.theme().group_box)\n .title(\"Themed Group Box\")\n```\n\n### Custom Appearance\n\n```rust\nGroupBox::new()\n .outline()\n .border_2()\n .border_color(cx.theme().accent)\n .rounded(cx.theme().radius_lg)\n .title(\"Custom Styled Group Box\")\n .title_style(\n StyleRefinement::default()\n .text_color(cx.theme().accent)\n .font_bold()\n )\n```\n\n## Best Practices\n\n1. **Use titles for clarity** - Always include a descriptive title when grouping form controls\n2. **Choose appropriate variants** - Use `fill()` for primary content groups, `outline()` for secondary groupings\n3. **Maintain visual hierarchy** - Use GroupBox to create clear sections without overwhelming the interface\n4. **Group related content** - Only group logically related controls and information\n5. **Consider spacing** - The component automatically handles internal spacing, but consider external margins\n6. **Responsive design** - GroupBox adapts well to different screen sizes and container widths\n\n## Related Components\n\n- **Form**: Use GroupBox within forms to organize sections\n- **Dialog**: GroupBox works well within dialogs for organizing content\n- **Accordion**: For collapsible grouped content, consider using Accordion instead\n- **Card**: For elevated content containers with more visual weight\n" }, { "path": "docs/docs/components/hover-card.md", "content": "---\ntitle: HoverCard\ndescription: A floating overlay that displays rich content when hovering over a trigger element.\n---\n\n# HoverCard\n\nHoverCard component for displaying rich content that appears when the mouse hovers over a trigger element. Ideal for previewing user profiles, link previews, and other contextual information without requiring a click. Features configurable delays for both opening and closing to prevent flickering during quick mouse movements.\n\nThis is most like the [Popover] component, but triggered by hover instead of click, and with timing controls for a smoother user experience.\n\n## Import\n\n```rust\nuse gpui_component::hover_card::HoverCard;\n```\n\n## Usage\n\n### Basic HoverCard\n\n```rust\nuse gpui::{ParentElement as _, Styled as _};\nuse gpui_component::{hover_card::HoverCard, v_flex};\n\nHoverCard::new(\"basic\")\n .trigger(\n div()\n .child(\"Hover over me\")\n .text_color(cx.theme().primary)\n .cursor_pointer()\n .text_sm()\n )\n .child(\n v_flex()\n .gap_2()\n .child(\n div()\n .child(\"This is a hover card\")\n .font_semibold()\n .text_sm()\n )\n .child(\n div()\n .child(\"You can display rich content when hovering over a trigger element.\")\n .text_color(cx.theme().muted_foreground)\n .text_sm()\n )\n )\n```\n\n### User Profile Preview\n\nA common use case is showing user profiles when hovering over a username, similar to GitHub or Twitter:\n\n```rust\nuse gpui::{px, relative, Styled as _};\nuse gpui_component::{\n avatar::Avatar,\n hover_card::HoverCard,\n h_flex,\n v_flex,\n};\n\nh_flex()\n .child(\"Hover over \")\n .text_sm()\n .child(\n HoverCard::new(\"user-profile\")\n .trigger(\n div()\n .child(\"@huacnlee\")\n .cursor_pointer()\n .text_color(cx.theme().link)\n )\n .child(\n h_flex()\n .w(px(320.))\n .gap_4()\n .items_start()\n .child(\n Avatar::new()\n .src(\"https://avatars.githubusercontent.com/u/5518?s=64\")\n )\n .child(\n v_flex()\n .gap_1()\n .line_height(relative(1.))\n .child(div().child(\"Jason Lee\").font_semibold())\n .child(\n div()\n .child(\"@huacnlee\")\n .text_color(cx.theme().muted_foreground)\n .text_sm()\n )\n .child(\"The author of GPUI Component.\")\n )\n )\n )\n .child(\" to see their profile\")\n```\n\n### Custom Timing\n\nAdjust the opening and closing delays to suit your needs:\n\n```rust\nuse std::time::Duration;\nuse gpui::Styled as _;\nuse gpui_component::{\n button::{Button, ButtonVariants as _},\n h_flex,\n};\n\nh_flex()\n .gap_4()\n .child(\n HoverCard::new(\"fast-open\")\n .open_delay(Duration::from_millis(200))\n .close_delay(Duration::from_millis(100))\n .trigger(Button::new(\"fast\").label(\"Fast Open (200ms)\").outline())\n .child(div().child(\"This hover card opens after 200ms\").text_sm())\n )\n .child(\n HoverCard::new(\"slow-open\")\n .open_delay(Duration::from_secs(1))\n .close_delay(Duration::from_secs_f32(0.5))\n .trigger(Button::new(\"slow\").label(\"Slow Open (1000ms)\").outline())\n .child(div().child(\"This hover card opens after 1000ms\").text_sm())\n )\n```\n\n### Positioning\n\nHoverCard supports 6 positioning options using the [Anchor] type:\n\n- TopLeft\n- TopCenter\n- TopRight\n- BottomLeft\n- BottomCenter\n- BottomRight\n\n### Custom Content Builder\n\nFor performance optimization, you can provide a content builder function for more complex case, which only calls when the HoverCard is opened:\n\n```rust\nHoverCard::new(\"complex\")\n .trigger(Button::new(\"btn\").label(\"Hover me\"))\n .content(|state, window, cx| {\n v_flex()\n .child(\"Dynamic content\")\n .child(format!(\"Open: {}\", state.is_open()))\n })\n```\n\n### Styling\n\nHoverCard inherits all `Styled` trait methods:\n\n```rust\nHoverCard::new(\"styled\")\n .trigger(Button::new(\"btn\").label(\"Styled\"))\n .w(px(400.))\n .max_h(px(500.))\n .text_sm()\n .gap_2()\n .child(\"Styled content\")\n```\n\nDisable default appearance and apply custom styles:\n\n```rust\nHoverCard::new(\"custom-styled\")\n .appearance(false) // Disable default popover styling\n .trigger(Button::new(\"btn\").label(\"Custom\"))\n .bg(cx.theme().background)\n .border_2()\n .border_color(cx.theme().primary)\n .rounded(px(12.))\n .p_4()\n .child(\"Custom styled content\")\n```\n\n## API Reference\n\n### HoverCard Methods\n\n- `new(id: impl Into)` - Create a new HoverCard with a unique ID\n- `trigger(trigger: T)` - Set the element that triggers the hover\n- `content(content: F)` - Set a content builder function that receives `(&mut HoverCardState, &mut Window, &mut Context)`\n- `open_delay(duration: Duration)` - Set delay before showing (default: 600ms)\n- `close_delay(duration: Duration)` - Set delay before hiding (default: 300ms)\n- `anchor(anchor: impl Into)` - Set positioning (default: TopCenter)\n- `on_open_change(callback: F)` - Callback when open state changes, receives `(&bool, &mut Window, &mut App)`\n- `appearance(appearance: bool)` - Enable/disable default styling (default: true)\n\n### HoverCardState Methods\n\n- `is_open() -> bool` - Check if the hover card is currently open\n\n## Behavior Details\n\n### Hover Timing\n\nThe HoverCard uses a sophisticated timing system to provide a smooth user experience:\n\n1. **Open Delay (600ms default)**: Prevents the card from flickering when the mouse quickly passes over the trigger\n2. **Close Delay (300ms default)**: Gives users time to move their mouse from the trigger to the content area without the card closing\n3. **Interactive Content**: Users can move their mouse into the content area, and the card will remain open as long as the mouse is either on the trigger or in the content\n\n### Edge Cases Handled\n\n- **Quick Mouse Sweep**: If the mouse quickly moves across the trigger, the card won't open (cancelled by the open delay)\n- **Trigger to Content Movement**: The card stays open when moving the mouse from the trigger to the content area\n- **Rapid Hovering**: Multiple rapid hover events are debounced using an epoch-based timer system\n- **Multiple HoverCards**: Each HoverCard has independent state, so multiple cards can coexist without interfering\n\n## Best Practices\n\n1. **Use appropriate delays**:\n - Standard content: 600ms open, 300ms close\n - Quick previews: 500ms open, 200ms close\n - Tooltips: 300ms open, 100ms close\n\n2. **Keep content concise**: HoverCards should provide preview information, not full content\n\n3. **Make triggers visually distinct**: Use colors, underlines, or cursor changes to indicate hoverable elements\n\n4. **Consider accessibility**: HoverCards are visual-only and don't support keyboard navigation. For keyboard-accessible content, consider using a Popover instead\n\n5. **Avoid nested HoverCards**: They can create confusing user experiences\n\n## Differences from [Popover]\n\n| Feature | HoverCard | Popover |\n| ------------------------ | ---------------- | ------------------ |\n| Trigger | Mouse hover | Click/right-click |\n| Keyboard navigation | No | Yes (with focus) |\n| Dismiss on outside click | No | Yes (configurable) |\n| Timing delays | Yes (open/close) | No |\n| Primary use case | Previews | Actions/forms |\n\n[Popover]: ./popover.md\n[Anchor]: https://docs.rs/gpui-component/latest/gpui_component/enum.Anchor.html\n[Avatar]: ./avatar.md\n" }, { "path": "docs/docs/components/icon.md", "content": "---\ntitle: Icon\ndescription: Display SVG icons with various sizes, colors, and transformations.\n---\n\n# Icon\n\nA flexible icon component that renders SVG icons from the built-in icon library. Icons are based on Lucide.dev and support customization of size, color, and rotation. The component requires SVG files to be provided by the user in the assets bundle.\n\nBefore you start, please make sure you have read: [Icons & Assets](../assets.md) to understand how use SVG in GPUI & GPUI Component application.\n\n## Import\n\n```rust\nuse gpui_component::{Icon, IconName};\n```\n\n## Usage\n\n### Basic Icon\n\n```rust\n// Using IconName enum directly\nIconName::Heart\n\n// Or creating an Icon explicitly\nIcon::new(IconName::Heart)\n```\n\n### Icon with Custom Size\n\n```rust\n// Predefined sizes\nIcon::new(IconName::Search).xsmall() // size_3()\nIcon::new(IconName::Search).small() // size_3p5()\nIcon::new(IconName::Search).medium() // size_4() (default)\nIcon::new(IconName::Search).large() // size_6()\n\n// Custom pixel size\nIcon::new(IconName::Search).with_size(px(20.))\n```\n\n### Icon with Custom Color\n\n```rust\n// Using theme colors\nIcon::new(IconName::Heart)\n .text_color(cx.theme().red)\n\n// Using custom colors\nIcon::new(IconName::Star)\n .text_color(gpui::red())\n```\n\n### Rotated Icons\n\n```rust\nuse gpui::Radians;\n\n// Rotate by radians\nIcon::new(IconName::ArrowUp)\n .rotate(Radians::from_degrees(90.))\n\n// Transform with custom transformation\nIcon::new(IconName::ChevronRight)\n .transform(Transformation::rotate(Radians::PI))\n```\n\n### Custom SVG Path\n\n```rust\n// Using a custom SVG file from assets\nIcon::new(Icon::empty())\n .path(\"icons/my-custom-icon.svg\")\n```\n\n## Available Icons\n\nThe `IconName` enum provides access to a curated set of icons. Here are some commonly used ones:\n\n### Navigation\n\n- `ArrowUp`, `ArrowDown`, `ArrowLeft`, `ArrowRight`\n- `ChevronUp`, `ChevronDown`, `ChevronLeft`, `ChevronRight`\n- `ChevronsUpDown`\n\n### Actions\n\n- `Check`, `Close`, `Plus`, `Minus`\n- `Copy`, `Delete`, `Search`, `Replace`\n- `Maximize`, `Minimize`, `WindowRestore`\n\n### Files & Folders\n\n- `File`, `Folder`, `FolderOpen`, `FolderClosed`\n- `BookOpen`, `Inbox`\n\n### UI Elements\n\n- `Menu`, `Settings`, `Settings2`, `Ellipsis`, `EllipsisVertical`\n- `Eye`, `EyeOff`, `Bell`, `Info`\n\n### Social & External\n\n- `GitHub`, `Globe`, `ExternalLink`\n- `Heart`, `HeartOff`, `Star`, `StarOff`\n- `ThumbsUp`, `ThumbsDown`\n\n### Status & Alerts\n\n- `CircleCheck`, `CircleX`, `TriangleAlert`\n- `Loader`, `LoaderCircle`\n\n### Panels & Layout\n\n- `PanelLeft`, `PanelRight`, `PanelBottom`\n- `PanelLeftOpen`, `PanelRightOpen`, `PanelBottomOpen`\n- `LayoutDashboard`, `Frame`\n\n### Users & Profile\n\n- `User`, `CircleUser`, `Bot`\n\n### Other\n\n- `Calendar`, `Map`, `Palette`, `Inspector`\n- `Sun`, `Moon`, `Building2`\n\n## Icon Sizes\n\nThe Icon component supports several predefined sizes:\n\n| Size | Method | CSS Class | Pixels |\n| ----------- | --------------------- | ------------ | ------ |\n| Extra Small | `.xsmall()` | `size_3()` | 12px |\n| Small | `.small()` | `size_3p5()` | 14px |\n| Medium | `.medium()` (default) | `size_4()` | 16px |\n| Large | `.large()` | `size_6()` | 24px |\n| Custom | `.with_size(px(n))` | - | n px |\n\n## Build you own `IconName`.\n\nYou can define your own `IconName` to have more specific icons for your application. We have `IconNamed` trait for you to implement for your.\n\n```rust\nuse gpui_component::IconNamed;\n\npub enum IconName {\n Encounters,\n Monsters,\n Spells,\n}\n\nimpl IconNamed for IconName {\n fn path(self) -> gpui::SharedString {\n match self {\n IconName::Encounters => \"icons/encounters.svg\",\n IconName::Monsters => \"icons/monsters.svg\",\n IconName::Spells => \"icons/spells.svg\",\n }\n .into()\n }\n}\n\n// This allows for the following interactions (works with anything that has the `.icon(icon)` method.\nButton::new(\"my-button\").icon(IconName::Spells);\nIcon::new(IconName::Monsters);\n```\n\nIf you want to directly `render` a custom `IconName` you must implement the `RenderOnce` trait and derive `IntoElement` on the `IconName`.\n\n```rust\nimpl RenderOnce for IconName {\n fn render(self, _: &mut Window, _: &mut App) -> impl IntoElement {\n Icon::empty().path(self.path())\n }\n}\n\n// Now you can use it directly in your element tree:\ndiv()\n .child(IconName::Monsters)\n```\n\n## Examples\n\n### Icon in Button\n\n```rust\nuse gpui_component::button::Button;\n\nButton::new(\"like-btn\")\n .icon(\n Icon::new(IconName::Heart)\n .text_color(cx.theme().red)\n .large()\n )\n .label(\"Like\")\n```\n\n### Animated Loading Icon\n\n```rust\nIcon::new(IconName::LoaderCircle)\n .text_color(cx.theme().muted_foreground)\n .medium()\n // Add rotation animation in your render logic\n```\n\n### Status Icons\n\n```rust\n// Success\nIcon::new(IconName::CircleCheck)\n .text_color(cx.theme().green)\n\n// Error\nIcon::new(IconName::CircleX)\n .text_color(cx.theme().red)\n\n// Warning\nIcon::new(IconName::TriangleAlert)\n .text_color(cx.theme().yellow)\n```\n\n### Navigation Icons\n\n```rust\n// Back button\nIcon::new(IconName::ArrowLeft)\n .medium()\n .text_color(cx.theme().foreground)\n\n// Dropdown indicator\nIcon::new(IconName::ChevronDown)\n .small()\n .text_color(cx.theme().muted_foreground)\n```\n\n### Custom Icon from Assets\n\n```rust\n// Using a custom SVG file\nIcon::empty()\n .path(\"icons/my-brand-logo.svg\")\n .large()\n .text_color(cx.theme().primary)\n```\n\n## Notes\n\n- Icons are rendered as SVG elements and support full CSS styling\n- The default size matches the current text size if no explicit size is set\n- Icons are flex-shrink-0 by default to prevent unwanted shrinking in flex layouts\n- All icon paths are relative to the assets bundle root\n- Icons from Lucide.dev are designed to work well at 16px and scale nicely to other sizes\n" }, { "path": "docs/docs/components/image.md", "content": "---\ntitle: Image\ndescription: A flexible image display component with loading states, fallbacks, and responsive sizing options.\n---\n\n# Image\n\nThe Image component provides a robust way to display images with comprehensive fallback handling, loading states, and responsive sizing. Built on GPUI's native image support, it handles various image sources including URLs, local files, and SVG graphics with proper error handling and accessibility features.\n\n## Import\n\n```rust\nuse gpui::{img, ImageSource, ObjectFit};\nuse gpui_component::{v_flex, h_flex, div, Icon, IconName};\n```\n\n## Usage\n\n### Basic Image\n\n```rust\n// Simple image from URL\nimg(\"https://example.com/image.jpg\")\n\n// Local image file\nimg(\"assets/logo.png\")\n\n// SVG image\nimg(\"icons/star.svg\")\n```\n\n### Image with Sizing\n\n```rust\n// Fixed dimensions\nimg(\"https://example.com/photo.jpg\")\n .w(px(300.))\n .h(px(200.))\n\n// Responsive width with aspect ratio\nimg(\"https://example.com/banner.jpg\")\n .w(relative(1.)) // Full width\n .max_w(px(800.))\n .h(px(400.))\n\n// Square image\nimg(\"https://example.com/avatar.jpg\")\n .size(px(100.)) // 100x100px\n```\n\n### Object Fit Options\n\nControl how images are scaled and positioned within their containers:\n\n```rust\n// Cover - scales to fill container, may crop\nimg(\"https://example.com/photo.jpg\")\n .w(px(300.))\n .h(px(200.))\n .object_fit(ObjectFit::Cover)\n\n// Contain - scales to fit within container, preserves aspect ratio\nimg(\"https://example.com/photo.jpg\")\n .w(px(300.))\n .h(px(200.))\n .object_fit(ObjectFit::Contain)\n\n// Fill - stretches to fill container, may distort\nimg(\"https://example.com/photo.jpg\")\n .w(px(300.))\n .h(px(200.))\n .object_fit(ObjectFit::Fill)\n\n// Scale Down - acts like contain, but never scales up\nimg(\"https://example.com/photo.jpg\")\n .w(px(300.))\n .h(px(200.))\n .object_fit(ObjectFit::ScaleDown)\n\n// None - original size, may overflow or be smaller than container\nimg(\"https://example.com/photo.jpg\")\n .w(px(300.))\n .h(px(200.))\n .object_fit(ObjectFit::None)\n```\n\n### Image with Fallback Handling\n\n```rust\n// Basic fallback with placeholder\nfn image_with_fallback(src: &str, alt_text: &str) -> impl IntoElement {\n div()\n .w(px(300.))\n .h(px(200.))\n .bg(cx.theme().surface)\n .border_1()\n .border_color(cx.theme().border)\n .rounded(px(8.))\n .overflow_hidden()\n .child(\n img(src)\n .w_full()\n .h_full()\n .object_fit(ObjectFit::Cover)\n // Add error handling in practice\n )\n}\n\n// Fallback with icon placeholder\nfn image_with_icon_fallback(src: &str) -> impl IntoElement {\n div()\n .size(px(200.))\n .bg(cx.theme().surface)\n .border_1()\n .border_color(cx.theme().border)\n .rounded(px(8.))\n .flex()\n .items_center()\n .justify_center()\n .child(\n img(src)\n .size_full()\n .object_fit(ObjectFit::Cover)\n // On error, show icon:\n // Icon::new(IconName::Image)\n // .size(px(48.))\n // .text_color(cx.theme().muted_foreground)\n )\n}\n```\n\n### Loading States\n\n```rust\n// Image with loading skeleton\nfn image_with_loading(src: &str, is_loading: bool) -> impl IntoElement {\n div()\n .w(px(400.))\n .h(px(300.))\n .rounded(px(8.))\n .overflow_hidden()\n .map(|this| {\n if is_loading {\n this.bg(cx.theme().muted)\n .flex()\n .items_center()\n .justify_center()\n .child(\"Loading...\")\n } else {\n this.child(\n img(src)\n .w_full()\n .h_full()\n .object_fit(ObjectFit::Cover)\n )\n }\n })\n}\n\n// Progressive loading with placeholder\nfn progressive_image(src: &str, placeholder_src: &str) -> impl IntoElement {\n div()\n .relative()\n .w(px(400.))\n .h(px(300.))\n .rounded(px(8.))\n .overflow_hidden()\n .child(\n // Low-quality placeholder\n img(placeholder_src)\n .absolute()\n .inset_0()\n .w_full()\n .h_full()\n .object_fit(ObjectFit::Cover)\n .opacity(0.5)\n )\n .child(\n // High-quality image\n img(src)\n .absolute()\n .inset_0()\n .w_full()\n .h_full()\n .object_fit(ObjectFit::Cover)\n )\n}\n```\n\n### Responsive Images\n\n```rust\n// Responsive grid images\nfn responsive_image_grid() -> impl IntoElement {\n div()\n .grid()\n .grid_cols(3)\n .gap_4()\n .child(\n img(\"https://example.com/photo1.jpg\")\n .w_full()\n .aspect_ratio(1.0) // Square aspect ratio\n .object_fit(ObjectFit::Cover)\n .rounded(px(8.))\n )\n .child(\n img(\"https://example.com/photo2.jpg\")\n .w_full()\n .aspect_ratio(1.0)\n .object_fit(ObjectFit::Cover)\n .rounded(px(8.))\n )\n .child(\n img(\"https://example.com/photo3.jpg\")\n .w_full()\n .aspect_ratio(1.0)\n .object_fit(ObjectFit::Cover)\n .rounded(px(8.))\n )\n}\n\n// Hero image with text overlay\nfn hero_image() -> impl IntoElement {\n div()\n .relative()\n .w_full()\n .h(px(500.))\n .rounded(px(12.))\n .overflow_hidden()\n .child(\n img(\"https://example.com/hero-image.jpg\")\n .absolute()\n .inset_0()\n .w_full()\n .h_full()\n .object_fit(ObjectFit::Cover)\n )\n .child(\n div()\n .absolute()\n .inset_0()\n .bg(rgba(0, 0, 0, 0.4)) // Dark overlay\n .flex()\n .items_center()\n .justify_center()\n .child(\n v_flex()\n .items_center()\n .gap_4()\n .child(\"Hero Title\")\n .child(\"Subtitle text here\")\n )\n )\n}\n```\n\n### Image Gallery\n\n```rust\n// Simple image gallery\nfn image_gallery(images: Vec<&str>) -> impl IntoElement {\n v_flex()\n .gap_6()\n .child(\n // Main image\n div()\n .w_full()\n .h(px(400.))\n .rounded(px(12.))\n .overflow_hidden()\n .child(\n img(images[0])\n .w_full()\n .h_full()\n .object_fit(ObjectFit::Cover)\n )\n )\n .child(\n // Thumbnail row\n h_flex()\n .gap_3()\n .children(\n images.iter().map(|src| {\n div()\n .size(px(80.))\n .rounded(px(6.))\n .overflow_hidden()\n .border_2()\n .border_color(cx.theme().border)\n .cursor_pointer()\n .hover(|this| this.border_color(cx.theme().primary))\n .child(\n img(*src)\n .size_full()\n .object_fit(ObjectFit::Cover)\n )\n })\n )\n )\n}\n```\n\n### SVG Images\n\n```rust\n// SVG icon with custom styling\nimg(\"assets/icons/logo.svg\")\n .size(px(64.))\n .text_color(cx.theme().primary) // SVG color\n\n// Inline SVG handling\nimg(\"data:image/svg+xml;base64,...\")\n .w(px(32.))\n .h(px(32.))\n\n// SVG with animation-friendly setup\nimg(\"assets/spinner.svg\")\n .size(px(24.))\n .text_color(cx.theme().primary)\n // Add rotation animation in practice\n```\n\n## API Reference\n\n### Core Image Function\n\n| Function | Description |\n| ------------- | ------------------------------------- |\n| `img(source)` | Create image element from ImageSource |\n\n### Image Sources (ImageSource)\n\n| Type | Description | Example |\n| ----------- | ---------------------- | --------------------------------- |\n| String/&str | URL or file path | `\"https://example.com/image.jpg\"` |\n| SharedUri | Shared URI reference | `SharedUri::from(\"file://path\")` |\n| Local Path | Local file system path | `\"assets/logo.png\"` |\n| Data URI | Base64 encoded image | `\"data:image/png;base64,...\"` |\n\n### Sizing Methods\n\n| Method | Description |\n| --------------- | ------------------------- |\n| `w(length)` | Set width |\n| `h(length)` | Set height |\n| `size(length)` | Set both width and height |\n| `w_full()` | Full width of container |\n| `h_full()` | Full height of container |\n| `size_full()` | Full size of container |\n| `max_w(length)` | Maximum width |\n| `max_h(length)` | Maximum height |\n| `min_w(length)` | Minimum width |\n| `min_h(length)` | Minimum height |\n\n### Object Fit Options\n\n| Value | Description |\n| ---------------------- | --------------------------------- |\n| `ObjectFit::Cover` | Scale to fill container, may crop |\n| `ObjectFit::Contain` | Scale to fit within container |\n| `ObjectFit::Fill` | Stretch to fill container |\n| `ObjectFit::ScaleDown` | Like contain, but never scale up |\n| `ObjectFit::None` | Original size |\n\n### Styling Methods\n\n| Method | Description |\n| --------------------- | ----------------------- |\n| `rounded(radius)` | Border radius |\n| `border_1()` | 1px border |\n| `border_color(color)` | Border color |\n| `opacity(value)` | Image opacity (0.0-1.0) |\n| `shadow_sm()` | Small shadow |\n| `shadow_lg()` | Large shadow |\n\n## Examples\n\n### Product Image Card\n\n```rust\nuse gpui_component::{v_flex, div, Icon, IconName};\n\nfn product_card(image_src: &str, title: &str, price: &str) -> impl IntoElement {\n v_flex()\n .gap_3()\n .p_4()\n .bg(cx.theme().card)\n .rounded(px(12.))\n .shadow_sm()\n .child(\n div()\n .relative()\n .w_full()\n .h(px(200.))\n .rounded(px(8.))\n .overflow_hidden()\n .bg(cx.theme().muted)\n .child(\n img(image_src)\n .w_full()\n .h_full()\n .object_fit(ObjectFit::Cover)\n )\n .child(\n // Wishlist button\n div()\n .absolute()\n .top_2()\n .right_2()\n .size(px(32.))\n .bg(rgba(255, 255, 255, 0.9))\n .rounded_full()\n .flex()\n .items_center()\n .justify_center()\n .cursor_pointer()\n .child(Icon::new(IconName::Heart).size(px(16.)))\n )\n )\n .child(title)\n .child(price)\n}\n```\n\n### Avatar with Image\n\n```rust\nfn custom_avatar(src: &str, name: &str, size: f32) -> impl IntoElement {\n div()\n .size(px(size))\n .rounded_full()\n .overflow_hidden()\n .border_2()\n .border_color(cx.theme().background)\n .shadow_sm()\n .child(\n img(src)\n .size_full()\n .object_fit(ObjectFit::Cover)\n )\n}\n```\n\n### Image Comparison Slider\n\n```rust\nfn image_comparison(before_src: &str, after_src: &str) -> impl IntoElement {\n div()\n .relative()\n .w_full()\n .h(px(400.))\n .rounded(px(12.))\n .overflow_hidden()\n .child(\n // Before image\n img(before_src)\n .absolute()\n .inset_0()\n .w_full()\n .h_full()\n .object_fit(ObjectFit::Cover)\n )\n .child(\n // After image with clip\n div()\n .absolute()\n .top_0()\n .left_0()\n .w(relative(0.5)) // Show 50% initially\n .h_full()\n .overflow_hidden()\n .child(\n img(after_src)\n .w(px(800.)) // Full width of container\n .h_full()\n .object_fit(ObjectFit::Cover)\n )\n )\n .child(\n // Divider line\n div()\n .absolute()\n .top_0()\n .left(relative(0.5))\n .w(px(2.))\n .h_full()\n .bg(cx.theme().primary)\n )\n}\n```\n\n### Error Handling Pattern\n\n```rust\nenum ImageState {\n Loading,\n Loaded,\n Error,\n}\n\nfn robust_image(src: &str, state: ImageState) -> impl IntoElement {\n div()\n .w(px(300.))\n .h(px(200.))\n .bg(cx.theme().muted)\n .rounded(px(8.))\n .border_1()\n .border_color(cx.theme().border)\n .flex()\n .items_center()\n .justify_center()\n .map(|this| {\n match state {\n ImageState::Loading => {\n this.child(\n v_flex()\n .items_center()\n .gap_2()\n .child(Icon::new(IconName::Loader2).size(px(24.)))\n .child(\"Loading...\")\n )\n }\n ImageState::Loaded => {\n this.p_0()\n .overflow_hidden()\n .child(\n img(src)\n .w_full()\n .h_full()\n .object_fit(ObjectFit::Cover)\n )\n }\n ImageState::Error => {\n this.child(\n v_flex()\n .items_center()\n .gap_2()\n .child(\n Icon::new(IconName::ImageOff)\n .size(px(32.))\n .text_color(cx.theme().muted_foreground)\n )\n .child(\"Failed to load image\")\n )\n }\n }\n })\n}\n```\n\n## Best Practices\n\n### Image Optimization\n\n- Use appropriate image dimensions for display size\n- Compress images without sacrificing quality\n- Consider using modern image formats (WebP, AVIF)\n- Implement responsive images for different screen sizes\n\n### Error Handling\n\n- Always provide meaningful fallbacks for failed image loads\n- Use skeleton loading states to maintain layout stability\n- Implement retry mechanisms for temporary network failures\n- Provide user feedback for permanent load failures\n\n### Performance\n\n- Use lazy loading for images not immediately visible\n- Implement proper caching strategies\n- Consider using placeholder images during loading\n- Optimize image sizes for their display context\n\n### User Experience\n\n- Maintain consistent aspect ratios in image grids\n- Provide smooth loading transitions\n- Use appropriate object-fit values for content type\n- Consider providing zoom functionality for detailed images\n\n## Implementation Notes\n\n### GPUI Integration\n\n- Built on GPUI's native image rendering capabilities\n- Supports all GPUI ImageSource types automatically\n- Inherits GPUI's styling and layout system\n- Compatible with GPUI's animation and interaction systems\n\n### SVG Support\n\n- Full support for SVG graphics with proper scaling\n- SVG images can be styled with text colors for theming\n- Vector graphics maintain sharpness at all sizes\n- Supports both external SVG files and inline data URIs\n\n### Memory Management\n\n- GPUI handles image caching and memory management automatically\n- Large images are efficiently managed by the graphics backend\n- No manual memory cleanup required for image components\n\n### Cross-Platform Compatibility\n\n- Consistent behavior across Windows, macOS, and Linux\n- Native image format support varies by platform\n- Uses platform-optimized rendering where available\n" }, { "path": "docs/docs/components/index.md", "content": "---\ntitle: Components\norder: 2\ncollapsed: false\n---\n\n# Components\n\n### Basic Components\n\n- [Accordion](accordion) - Collapsible content panels\n- [Alert](alert) - Alert messages with different variants\n- [Avatar](avatar) - User avatars with fallback text\n- [Badge](badge) - Count badges and indicators\n- [Button](button) - Interactive buttons with multiple variants\n- [Checkbox](checkbox) - Binary selection control\n- [Collapsible](collapsible) - Expandable/collapsible content\n- [DropdownButton](dropdown_button) - Button with dropdown menu\n- [Icon](icon) - Icon display component\n- [Image](image) - Image display with fallbacks\n- [Kbd](kbd) - Keyboard shortcut display\n- [Label](label) - Text labels for form elements\n- [Pagination](pagination) - Page navigation controls\n- [Progress](progress) - Progress bars\n- [Radio](radio) - Single selection from multiple options\n- [Rating](rating) - Interactive star rating component\n- [Skeleton](skeleton) - Loading placeholders\n- [Slider](slider) - Value selection from a range\n- [Spinner](spinner) - Loading and status spinners\n- [Stepper](stepper) - Step-by-step progress indicator\n- [Switch](switch) - Toggle on/off control\n- [Tag](tag) - Labels and categories\n- [Toggle](toggle) - Toggle button states\n- [Tooltip](tooltip) - Helpful hints on hover\n\n### Form Components\n\n- [Input](input) - An input field or a component that looks like an input field.\n- [Select](select) - A list of options for the user to pick.\n- [NumberInput](number-input) - Numeric input with increment/decrement\n- [DatePicker](date-picker) - Date selection with calendar\n- [OtpInput](otp-input) - One-time password input\n- [ColorPicker](color-picker) - Color selection interface\n- [Editor](editor) - Multi-line text editor and code editor\n- [Form](form) - Form container and layout\n\n### Layout Components\n\n- [DescriptionList](description-list) - Key-value pair display\n- [GroupBox](group-box) - Grouped content with borders\n- [Dialog](dialog) - Dialog and modal windows\n- [Notification](notification) - Toast notifications\n- [Popover](popover) - Floating content display\n- [Resizable](resizable) - Resizable panels and containers\n- [Scrollable](scrollable) - Scrollable containers\n- [Sheet](sheet) - Slide-in panel from edges\n- [Sidebar](sidebar) - Navigation sidebar\n\n### Advanced Components\n\n- [Calendar](calendar) - Calendar display and navigation\n- [Chart](chart) - Data visualization charts (Line, Bar, Area, Pie, Candlestick)\n- [List](list) - List display with items\n- [Menu](menu) - Menu and context menu and dropdown menu.\n- [Settings](settings) - Settings UI\n- [DataTable](data-table) - High-performance data tables\n- [Tabs](tabs) - Tabbed interface\n- [Tree](tree) - Hierarchical tree data display\n- [VirtualList](virtual-list) - Virtualized list for large datasets\n" }, { "path": "docs/docs/components/input.md", "content": "---\ntitle: Input\ndescription: Text input component with validation, masking, and various features.\n---\n\n# Input\n\nA flexible text input component with support for validation, masking, prefix/suffix elements, and different states.\n\n## Import\n\n```rust\nuse gpui_component::input::{InputState, Input};\n```\n\n## Usage\n\n### Basic Input\n\n```rust\nlet input = cx.new(|cx| InputState::new(window, cx));\n\nInput::new(&input)\n```\n\n### With Placeholder\n\n```rust\nlet input = cx.new(|cx|\n InputState::new(window, cx)\n .placeholder(\"Enter your name...\")\n);\n\nInput::new(&input)\n```\n\n### With Default Value\n\n```rust\nlet input = cx.new(|cx|\n InputState::new(window, cx)\n .default_value(\"John Doe\")\n);\n\nInput::new(&input)\n```\n\n### Cleanable Input\n\n```rust\nInput::new(&input)\n .cleanable(true) // Show clear button when input has value\n```\n\n### With Prefix and Suffix\n\n```rust\nuse gpui_component::{Icon, IconName};\n\n// With prefix icon\nInput::new(&input)\n .prefix(Icon::new(IconName::Search).small())\n\n// With suffix button\nInput::new(&input)\n .suffix(\n Button::new(\"info\")\n .ghost()\n .icon(IconName::Info)\n .xsmall()\n )\n\n// With both\nInput::new(&input)\n .prefix(Icon::new(IconName::Search).small())\n .suffix(Button::new(\"btn\").ghost().icon(IconName::Info).xsmall())\n```\n\n### Password Input (Masked)\n\n```rust\nlet input = cx.new(|cx|\n InputState::new(window, cx)\n .masked(true)\n .default_value(\"password123\")\n);\n\nInput::new(&input)\n .mask_toggle() // Shows toggle button to reveal password\n```\n\n### Input Sizes\n\n```rust\nInput::new(&input).large()\nInput::new(&input) // medium (default)\nInput::new(&input).small()\n```\n\n### Disabled Input\n\n```rust\nInput::new(&input).disabled(true)\n```\n\n### Clean on ESC\n\n```rust\nlet input = cx.new(|cx|\n InputState::new(window, cx)\n .clean_on_escape() // Clear input when ESC is pressed\n);\n\nInput::new(&input)\n```\n\n### Input Validation\n\n```rust\n// Validate float numbers\nlet input = cx.new(|cx|\n InputState::new(window, cx)\n .validate(|s, _| s.parse::().is_ok())\n);\n\n// Regex pattern validation\nlet input = cx.new(|cx|\n InputState::new(window, cx)\n .pattern(regex::Regex::new(r\"^[a-zA-Z0-9]*$\").unwrap())\n);\n```\n\n### Input Masking\n\n```rust\n// Phone number mask\nlet input = cx.new(|cx|\n InputState::new(window, cx)\n .mask_pattern(\"(999)-999-9999\")\n);\n\n// Custom pattern: AAA-###-AAA (A=letter, #=digit, 9=digit optional)\nlet input = cx.new(|cx|\n InputState::new(window, cx)\n .mask_pattern(\"AAA-###-AAA\")\n);\n\n// Number with thousands separator\nuse gpui_component::input::MaskPattern;\n\nlet input = cx.new(|cx|\n InputState::new(window, cx)\n .mask_pattern(MaskPattern::Number {\n separator: Some(','),\n fraction: Some(3),\n })\n);\n```\n\n### Handle Input Events\n\n```rust\nlet input = cx.new(|cx| InputState::new(window, cx));\n\ncx.subscribe_in(&input, window, |view, state, event, window, cx| {\n match event {\n InputEvent::Change => {\n let text = state.read(cx).value();\n println!(\"Input changed: {}\", text);\n }\n InputEvent::PressEnter { secondary } => {\n println!(\"Enter pressed, secondary: {}\", secondary);\n }\n InputEvent::Focus => println!(\"Input focused\"),\n InputEvent::Blur => println!(\"Input blurred\"),\n }\n});\n```\n\n### Custom Appearance\n\n```rust\n// Without default styling\nInput::new(&input).appearance(false)\n\n// Use in custom container\ndiv()\n .border_b_2()\n .px_6()\n .py_3()\n .border_color(cx.theme().border)\n .bg(cx.theme().secondary)\n .child(Input::new(&input).appearance(false))\n```\n\n## Examples\n\n### Search Input\n\n```rust\nlet search = cx.new(|cx|\n InputState::new(window, cx)\n .placeholder(\"Search...\")\n);\n\nInput::new(&search)\n .prefix(Icon::new(IconName::Search).small())\n```\n\n### Currency Input\n\n```rust\nlet amount = cx.new(|cx|\n InputState::new(window, cx)\n .mask_pattern(MaskPattern::Number {\n separator: Some(','),\n fraction: Some(2),\n })\n);\n\ndiv()\n .child(Input::new(&amount))\n .child(format!(\"Value: {}\", amount.read(cx).value()))\n```\n\n### Form with Multiple Inputs\n\n```rust\nstruct FormView {\n name_input: Entity,\n email_input: Entity,\n}\n\nv_flex()\n .gap_3()\n .child(Input::new(&self.name_input))\n .child(Input::new(&self.email_input))\n```\n" }, { "path": "docs/docs/components/kbd.md", "content": "---\ntitle: Kbd\ndescription: Displays keyboard shortcuts with platform-specific formatting.\n---\n\n# Kbd\n\nA component for displaying keyboard shortcuts and key combinations with proper platform-specific formatting. Automatically adapts the display to match the conventions of macOS (using symbols) or Windows/Linux (using text labels).\n\n## Import\n\n```rust\nuse gpui_component::kbd::Kbd;\nuse gpui::Keystroke;\n```\n\n## Usage\n\n### Basic Keyboard Shortcut\n\n```rust\n// Create from a keystroke\nlet kbd = Kbd::new(Keystroke::parse(\"cmd-shift-p\").unwrap());\n\n// Or convert directly from keystroke\nlet kbd: Kbd = Keystroke::parse(\"escape\").unwrap().into();\n```\n\n### Common Shortcuts\n\n```rust\n// Command palette\nKbd::new(Keystroke::parse(\"cmd-shift-p\").unwrap())\n\n// New tab\nKbd::new(Keystroke::parse(\"cmd-t\").unwrap())\n\n// Zoom controls\nKbd::new(Keystroke::parse(\"cmd--\").unwrap()) // Zoom out\nKbd::new(Keystroke::parse(\"cmd-+\").unwrap()) // Zoom in\n\n// Navigation\nKbd::new(Keystroke::parse(\"escape\").unwrap())\nKbd::new(Keystroke::parse(\"enter\").unwrap())\nKbd::new(Keystroke::parse(\"backspace\").unwrap())\n```\n\n### Multiple Modifiers\n\n```rust\n// Complex combinations\nKbd::new(Keystroke::parse(\"cmd-ctrl-shift-a\").unwrap())\nKbd::new(Keystroke::parse(\"cmd-alt-backspace\").unwrap())\nKbd::new(Keystroke::parse(\"ctrl-alt-shift-a\").unwrap())\n```\n\n### Arrow Keys and Function Keys\n\n```rust\n// Arrow keys\nKbd::new(Keystroke::parse(\"left\").unwrap())\nKbd::new(Keystroke::parse(\"right\").unwrap())\nKbd::new(Keystroke::parse(\"up\").unwrap())\nKbd::new(Keystroke::parse(\"down\").unwrap())\n\n// Function keys\nKbd::new(Keystroke::parse(\"f12\").unwrap())\nKbd::new(Keystroke::parse(\"secondary-f12\").unwrap())\n\n// Page navigation\nKbd::new(Keystroke::parse(\"pageup\").unwrap())\nKbd::new(Keystroke::parse(\"pagedown\").unwrap())\n```\n\n### Without Visual Styling\n\n```rust\n// Display only the key text without the styled background\nKbd::new(Keystroke::parse(\"cmd-s\").unwrap())\n .appearance(false)\n```\n\n### From Action Bindings\n\n```rust\nuse gpui::{Action, Window, FocusHandle};\n\n// Get first keybinding for an action\nif let Some(kbd) = Kbd::binding_for_action(&MyAction {}, None, window) {\n // Display the bound shortcut\n}\n\n// Get keybinding for action within a specific context\nif let Some(kbd) = Kbd::binding_for_action(&MyAction {}, Some(\"Editor\"), window) {\n // Display context-specific shortcut\n}\n\n// Get keybinding for action within a focus handle\nif let Some(kbd) = Kbd::binding_for_action_in(&MyAction {}, &focus_handle, window) {\n // Display shortcut for focused element\n}\n```\n\n## Platform Differences\n\nThe Kbd component automatically formats shortcuts according to platform conventions:\n\n### macOS\n\n- Uses symbols: ⌃ ⌥ ⇧ ⌘\n- No separators between modifiers\n- Order: Control, Option, Shift, Command\n- Special keys: ⌫ (backspace), ⎋ (escape), ⏎ (enter), ← → ↑ ↓ (arrows)\n\n### Windows/Linux\n\n- Uses text labels: Ctrl, Alt, Shift, Win\n- Plus sign (+) separators\n- Order: Ctrl, Alt, Shift, Win\n- Special keys: Backspace, Esc, Enter, Left, Right, Up, Down\n\n### Examples by Platform\n\n| Input | macOS | Windows/Linux |\n| ------------------- | ----- | ----------------- |\n| `cmd-a` | ⌘A | Win+A |\n| `ctrl-shift-a` | ⌃⇧A | Ctrl+Shift+A |\n| `cmd-alt-backspace` | ⌥⌘⌫ | Win+Alt+Backspace |\n| `escape` | ⎋ | Esc |\n| `enter` | ⏎ | Enter |\n| `left` | ← | Left |\n\n## Examples\n\n### Keyboard Shortcut Help\n\n```rust\nuse gpui::{div, h_flex, v_flex};\n\n// Display common shortcuts\nv_flex()\n .gap_2()\n .child(\n h_flex()\n .gap_2()\n .items_center()\n .child(\"Open command palette:\")\n .child(Kbd::new(Keystroke::parse(\"cmd-shift-p\").unwrap()))\n )\n .child(\n h_flex()\n .gap_2()\n .items_center()\n .child(\"Save file:\")\n .child(Kbd::new(Keystroke::parse(\"cmd-s\").unwrap()))\n )\n .child(\n h_flex()\n .gap_2()\n .items_center()\n .child(\"Find in files:\")\n .child(Kbd::new(Keystroke::parse(\"cmd-shift-f\").unwrap()))\n )\n```\n\n### Menu Item with Shortcut\n\n```rust\nh_flex()\n .justify_between()\n .items_center()\n .child(\"New File\")\n .child(Kbd::new(Keystroke::parse(\"cmd-n\").unwrap()))\n```\n\n### Inline Documentation\n\n```rust\ndiv()\n .child(\"Press \")\n .child(Kbd::new(Keystroke::parse(\"escape\").unwrap()))\n .child(\" to cancel or \")\n .child(Kbd::new(Keystroke::parse(\"enter\").unwrap()))\n .child(\" to confirm.\")\n```\n\n### Custom Styling\n\n```rust\nKbd::new(Keystroke::parse(\"cmd-k\").unwrap())\n .text_color(cx.theme().accent)\n .border_color(cx.theme().accent)\n .bg(cx.theme().accent.opacity(0.1))\n```\n\n### Text-Only Format\n\n```rust\n// Get formatted text without styling\nlet shortcut_text = Kbd::format(&Keystroke::parse(\"cmd-shift-p\").unwrap());\ndiv().child(format!(\"Shortcut: {}\", shortcut_text))\n```\n\n## Styling\n\nThe Kbd component uses the following default styles:\n\n- Border with theme border color\n- Muted foreground text color\n- Background with theme background color\n- Small rounded corners\n- Centered text alignment\n- Extra small font size\n- Minimal padding (0.5px vertical, 1px horizontal)\n- Minimum width of 5 units\n- Flex shrink disabled to maintain size\n\nAll styles can be customized using the `Styled` trait methods.\n" }, { "path": "docs/docs/components/label.md", "content": "---\ntitle: Label\ndescription: Text labels for form elements with highlighting and styling options.\n---\n\n# Label\n\nA versatile label component for displaying text with support for secondary text, highlighting, masking, and customizable styling. Perfect for form labels, captions, and general text display with optional/required indicators.\n\n## Import\n\n```rust\nuse gpui_component::label::{Label, HighlightsMatch};\n```\n\n## Usage\n\n### Basic Label\n\n```rust\nLabel::new(\"This is a label\")\n```\n\n### Label with Secondary Text\n\n```rust\n// Label with optional indicator\nLabel::new(\"Company Address\")\n .secondary(\"(optional)\")\n\n// Label with required indicator\nLabel::new(\"Email Address\")\n .secondary(\"(required)\")\n```\n\n### Text Alignment\n\n```rust\n// Left aligned (default)\nLabel::new(\"Text align left\")\n\n// Center aligned\nLabel::new(\"Text align center\")\n .text_center()\n\n// Right aligned\nLabel::new(\"Text align right\")\n .text_right()\n```\n\n### Text Highlighting\n\n```rust\n// Full text highlighting (finds all matches)\nLabel::new(\"Hello World Hello\")\n .highlights(\"Hello\")\n\n// Prefix highlighting (only matches at start)\nLabel::new(\"Hello World\")\n .highlights(HighlightsMatch::Prefix(\"Hello\".into()))\n\n// Highlight with secondary text\nLabel::new(\"Company Name\")\n .secondary(\"(optional)\")\n .highlights(\"Company\")\n```\n\n### Color and Styling\n\n```rust\nuse gpui_component::green_500;\n\n// Custom text color\nLabel::new(\"Color Label\")\n .text_color(green_500())\n\n// Font styling\nLabel::new(\"Font Size Label\")\n .text_size(px(20.))\n .font_semibold()\n .line_height(rems(1.8))\n```\n\n### Masked Labels\n\n```rust\n// For sensitive information\nLabel::new(\"9,182,1 USD\")\n .text_2xl()\n .masked(true) // Shows as \"•••••••••••\"\n\n// Toggle masking programmatically\nLabel::new(\"500 USD\")\n .text_xl()\n .masked(self.masked)\n```\n\n### Multi-line Text\n\n```rust\n// Text wrapping with line height\ndiv().w(px(200.)).child(\n Label::new(\n \"Label should support text wrap in default, \\\n if the text is too long, it should wrap to the next line.\"\n )\n .line_height(rems(1.8))\n)\n```\n\n### Different Sizes\n\n```rust\n// Using text size utilities\nLabel::new(\"Extra Large\").text_2xl()\nLabel::new(\"Large\").text_xl()\nLabel::new(\"Medium\").text_base() // default\nLabel::new(\"Small\").text_sm()\nLabel::new(\"Extra Small\").text_xs()\n```\n\n## API Reference\n\n### Label\n\n| Method | Description |\n| ------------------- | ------------------------------------------------------------- |\n| `new(text)` | Create a new label with text |\n| `secondary(text)` | Add secondary text (usually for optional/required indicators) |\n| `masked(bool)` | Show/hide text with bullet characters |\n| `highlights(match)` | Highlight matching text |\n\n### HighlightsMatch\n\n| Variant | Description |\n| -------------- | ------------------------------------------------ |\n| `Full(text)` | Highlights all occurrences of the text |\n| `Prefix(text)` | Highlights only if text appears at the beginning |\n\n| Method | Description |\n| ------------- | ------------------------------- |\n| `as_str()` | Get the search text as string |\n| `is_prefix()` | Check if this is a prefix match |\n\n### Styling Methods (via Styled trait)\n\n| Method | Description |\n| --------------------- | --------------------------- |\n| `text_color(color)` | Set text color |\n| `text_size(size)` | Set font size |\n| `text_center()` | Center align text |\n| `text_right()` | Right align text |\n| `font_semibold()` | Set font weight to semibold |\n| `font_bold()` | Set font weight to bold |\n| `line_height(height)` | Set line height |\n| `text_xs()` | Extra small text size |\n| `text_sm()` | Small text size |\n| `text_base()` | Base text size (default) |\n| `text_lg()` | Large text size |\n| `text_xl()` | Extra large text size |\n| `text_2xl()` | 2x large text size |\n\n## Examples\n\n### Form Labels\n\n```rust\n// Required field\nLabel::new(\"Email Address\")\n .secondary(\"*\")\n .text_color(cx.theme().destructive)\n\n// Optional field\nLabel::new(\"Phone Number\")\n .secondary(\"(optional)\")\n\n// Field with description\nLabel::new(\"Password\")\n .secondary(\"(minimum 8 characters)\")\n```\n\n### Search Highlighting\n\n```rust\n// Interactive search highlighting\nlet search_term = \"Hello\";\nLabel::new(\"Hello World Hello Universe\")\n .highlights(search_term) // Highlights all \"Hello\" occurrences\n```\n\n### Sensitive Information\n\n```rust\n// Financial data with toggle\nh_flex()\n .child(\n Label::new(\"$9,182.50 USD\")\n .text_2xl()\n .masked(self.is_masked)\n )\n .child(\n Button::new(\"toggle-mask\")\n .ghost()\n .icon(if self.is_masked { IconName::EyeOff } else { IconName::Eye })\n .on_click(|this, _, _, _| {\n this.is_masked = !this.is_masked;\n })\n )\n```\n\n### Multi-language Support\n\n```rust\n// Supports Unicode text\nLabel::new(\"这是一个标签\") // Chinese text\nLabel::new(\"こんにちは世界\") // Japanese text\nLabel::new(\"🌍 Hello World 🚀\") // Emojis\n```\n\n### Status Indicators\n\n```rust\n// Success status\nLabel::new(\"✓ Verified\")\n .text_color(cx.theme().success)\n\n// Warning status\nLabel::new(\"⚠ Pending Review\")\n .text_color(cx.theme().warning)\n\n// Error status\nLabel::new(\"✗ Failed\")\n .text_color(cx.theme().destructive)\n```\n\n### Custom Layouts\n\n```rust\n// Flex layout with labels\nh_flex()\n .justify_between()\n .child(Label::new(\"Total Amount\"))\n .child(Label::new(\"$1,234.56\").font_semibold())\n\n// Grid layout\nv_flex()\n .gap_2()\n .child(Label::new(\"Name:\").font_semibold())\n .child(Label::new(\"John Doe\"))\n .child(Label::new(\"Email:\").font_semibold())\n .child(Label::new(\"john@example.com\"))\n```\n" }, { "path": "docs/docs/components/list.md", "content": "---\ntitle: List\ndescription: A flexible list component that displays a series of items with support for sections, search, selection, and infinite scrolling.\n---\n\n# List\n\nA powerful List component that provides a virtualized, searchable list interface with support for sections, headers, footers, selection states, and infinite scrolling. The component is built on a delegate pattern that allows for flexible data management and custom item rendering.\n\n## Import\n\n```rust\nuse gpui_component::list::{List, ListState, ListDelegate, ListItem, ListEvent, ListSeparatorItem};\nuse gpui_component::IndexPath;\n```\n\n## Usage\n\n### Basic List\n\nTo create a list, you need to implement the `ListDelegate` trait for your data:\n\n```rust\nstruct MyListDelegate {\n items: Vec,\n selected_index: Option,\n}\n\nimpl ListDelegate for MyListDelegate {\n type Item = ListItem;\n\n fn items_count(&self, _section: usize, _cx: &App) -> usize {\n self.items.len()\n }\n\n fn render_item(\n &mut self,\n ix: IndexPath,\n _window: &mut Window,\n _cx: &mut Context>,\n ) -> Option {\n self.items.get(ix.row).map(|item| {\n ListItem::new(ix)\n .child(Label::new(item.clone()))\n .selected(Some(ix) == self.selected_index)\n })\n }\n\n fn set_selected_index(\n &mut self,\n ix: Option,\n _window: &mut Window,\n cx: &mut Context>,\n ) {\n self.selected_index = ix;\n cx.notify();\n }\n}\n\n// Create the list\nlet delegate = MyListDelegate {\n items: vec![\"Item 1\".into(), \"Item 2\".into(), \"Item 3\".into()],\n selected_index: None,\n};\n\n/// Create a list state.\nlet state = cx.new(|cx| ListState::new(delegate, window, cx));\n```\n\nNow use [List] to render list:\n\n```rs\ndiv().child(List::new(&state))\n```\n\n### List with Sections\n\n**Note:** Sections with `items_count` of 0 will be automatically hidden (no header or footer will be rendered for empty sections).\n\n```rust\nimpl ListDelegate for MyListDelegate {\n type Item = ListItem;\n\n fn sections_count(&self, _cx: &App) -> usize {\n 3 // Number of sections\n }\n\n fn items_count(&self, section: usize, _cx: &App) -> usize {\n match section {\n 0 => 5,\n 1 => 3,\n 2 => 7,\n _ => 0,\n }\n }\n\n fn render_section_header(\n &mut self,\n section: usize,\n _window: &mut Window,\n cx: &mut Context>,\n ) -> Option {\n let title = match section {\n 0 => \"Section 1\",\n 1 => \"Section 2\",\n 2 => \"Section 3\",\n _ => return None,\n };\n\n Some(\n h_flex()\n .px_2()\n .py_1()\n .gap_2()\n .text_sm()\n .text_color(cx.theme().muted_foreground)\n .child(Icon::new(IconName::Folder))\n .child(title)\n )\n }\n\n fn render_section_footer(\n &mut self,\n section: usize,\n _window: &mut Window,\n cx: &mut Context>,\n ) -> Option {\n Some(\n div()\n .px_2()\n .py_1()\n .text_xs()\n .text_color(cx.theme().muted_foreground)\n .child(format!(\"End of section {}\", section + 1))\n )\n }\n}\n```\n\n### List Items with Icons and Actions\n\n```rust\nfn render_item(\n &mut self,\n ix: IndexPath,\n _window: &mut Window,\n cx: &mut Context>,\n) -> Option {\n self.items.get(ix.row).map(|item| {\n ListItem::new(ix)\n .child(\n h_flex()\n .items_center()\n .gap_2()\n .child(Icon::new(IconName::File))\n .child(Label::new(item.title.clone()))\n )\n .suffix(|_, _| {\n Button::new(\"action\")\n .ghost()\n .small()\n .icon(IconName::MoreHorizontal)\n })\n .selected(Some(ix) == self.selected_index)\n .on_click(cx.listener(move |this, _, window, cx| {\n this.delegate_mut().select_item(ix, window, cx);\n }))\n })\n}\n```\n\n### List with Search\n\nThe list automatically includes a search input by default. Implement `perform_search` to handle queries:\n\nAnd you should use `searchable(true)` when creating the `ListState` to show search input.\n\n```rust\nimpl ListDelegate for MyListDelegate {\n fn perform_search(\n &mut self,\n query: &str,\n _window: &mut Window,\n _cx: &mut Context>,\n ) -> Task<()> {\n // Filter items based on query\n self.filtered_items = self.all_items\n .iter()\n .filter(|item| item.to_lowercase().contains(&query.to_lowercase()))\n .cloned()\n .collect();\n\n Task::ready(())\n }\n}\n\nlet state = cx.new(|cx| ListState::new(delegate, window, cx).searchable(true));\nList::new(&state)\n```\n\n### List with Loading State\n\n```rust\nimpl ListDelegate for MyListDelegate {\n fn loading(&self, _cx: &App) -> bool {\n self.is_loading\n }\n\n fn render_loading(\n &mut self,\n _window: &mut Window,\n _cx: &mut Context>,\n ) -> impl IntoElement {\n // Custom loading view\n v_flex()\n .justify_center()\n .items_center()\n .py_4()\n .child(Skeleton::new().h_4().w_full())\n .child(Skeleton::new().h_4().w_3_4())\n }\n}\n```\n\n### Infinite Scrolling\n\n```rust\nimpl ListDelegate for MyListDelegate {\n fn has_more(&self, _cx: &App) -> bool {\n self.has_more_data\n }\n\n fn load_more_threshold(&self) -> usize {\n 20 // Trigger when 20 items from bottom\n }\n\n fn load_more(&mut self, window: &mut Window, cx: &mut Context>) {\n if self.is_loading {\n return;\n }\n\n self.is_loading = true;\n cx.spawn_in(window, async move |view, window| {\n // Simulate API call\n Timer::after(Duration::from_secs(1)).await;\n\n view.update_in(window, |view, _, cx| {\n // Add more items\n view.delegate_mut().load_more_items();\n view.delegate_mut().is_loading = false;\n cx.notify();\n });\n }).detach();\n }\n}\n```\n\n### List Events\n\n```rust\n// Subscribe to list events\nlet _subscription = cx.subscribe(&state, |_, _, event: &ListEvent, _| {\n match event {\n ListEvent::Select(ix) => {\n println!(\"Item selected at: {:?}\", ix);\n }\n ListEvent::Confirm(ix) => {\n println!(\"Item confirmed at: {:?}\", ix);\n }\n ListEvent::Cancel => {\n println!(\"Selection cancelled\");\n }\n }\n});\n```\n\n### Different Item Styles\n\n```rust\n// Basic item with hover effect\nListItem::new(ix)\n .child(Label::new(\"Basic Item\"))\n .selected(is_selected)\n\n// Item with check icon\nListItem::new(ix)\n .child(Label::new(\"Checkable Item\"))\n .check_icon(IconName::Check)\n .confirmed(is_confirmed)\n\n// Disabled item\nListItem::new(ix)\n .child(Label::new(\"Disabled Item\"))\n .disabled(true)\n\n// Separator item\nListSeparatorItem::new()\n .child(\n div()\n .h_px()\n .w_full()\n .bg(cx.theme().border)\n )\n```\n\n### Custom Empty State\n\n```rust\nimpl ListDelegate for MyListDelegate {\n fn render_empty(&mut self, _window: &mut Window, cx: &mut Context>) -> impl IntoElement {\n v_flex()\n .size_full()\n .justify_center()\n .items_center()\n .gap_2()\n .child(Icon::new(IconName::Search).size_16().text_color(cx.theme().muted_foreground))\n .child(\n Label::new(\"No items found\")\n .text_color(cx.theme().muted_foreground)\n )\n .child(\n Label::new(\"Try adjusting your search terms\")\n .text_sm()\n .text_color(cx.theme().muted_foreground.opacity(0.7))\n )\n }\n}\n```\n\n## Configuration Options\n\n### List Configuration\n\n```rust\nList::new(&state)\n .max_h(px(400.)) // Set maximum height\n .scrollbar_visible(false) // Hide scrollbar\n .paddings(Edges::all(px(8.))) // Set internal padding\n```\n\n### Scrolling Control\n\n```rust\n// Scroll to specific item\nstate.update(cx, |state, cx| {\n state.scroll_to_item(\n IndexPath::new(0).section(1), // Row 0 of section 1\n ScrollStrategy::Center,\n window,\n cx,\n );\n});\n\n// Scroll to selected item\nstate.update(cx, |state, cx| {\n state.scroll_to_selected_item(window, cx);\n});\n\n// Set selected index without scrolling\nstate.update(cx, |state, cx| {\n state.set_selected_index(Some(IndexPath::new(5)), window, cx);\n});\n```\n\n## Examples\n\n### File Browser List\n\n```rust\nstruct FileBrowserDelegate {\n files: Vec,\n selected: Option,\n}\n\n#[derive(Clone)]\nstruct FileInfo {\n name: String,\n is_directory: bool,\n size: Option,\n}\n\nimpl ListDelegate for FileBrowserDelegate {\n type Item = ListItem;\n\n fn render_item(&mut self, ix: IndexPath, window: &mut Window, cx: &mut Context>) -> Option {\n self.files.get(ix.row).map(|file| {\n let icon = if file.is_directory {\n IconName::Folder\n } else {\n IconName::File\n };\n\n ListItem::new(ix)\n .child(\n h_flex()\n .items_center()\n .justify_between()\n .w_full()\n .child(\n h_flex()\n .items_center()\n .gap_2()\n .child(Icon::new(icon))\n .child(Label::new(file.name.clone()))\n )\n .when_some(file.size, |this, size| {\n this.child(\n Label::new(format_size(size))\n .text_sm()\n .text_color(cx.theme().muted_foreground)\n )\n })\n )\n .selected(Some(ix) == self.selected)\n })\n }\n}\n```\n\n### Contact List with Sections\n\n```rust\nstruct ContactListDelegate {\n contacts_by_letter: BTreeMap>,\n selected: Option,\n}\n\nimpl ListDelegate for ContactListDelegate {\n type Item = ListItem;\n\n fn sections_count(&self, _cx: &App) -> usize {\n self.contacts_by_letter.len()\n }\n\n fn render_section_header(&mut self, section: usize, _window: &mut Window, cx: &mut Context>) -> Option {\n let letter = self.contacts_by_letter.keys().nth(section)?;\n\n Some(\n div()\n .px_3()\n .py_2()\n .bg(cx.theme().background)\n .border_b_1()\n .border_color(cx.theme().border)\n .child(\n Label::new(letter.to_string())\n .text_lg()\n .text_color(cx.theme().accent_foreground)\n .font_weight(FontWeight::BOLD)\n )\n )\n }\n}\n```\n" }, { "path": "docs/docs/components/menu.md", "content": "---\ntitle: Menu\ndescription: Context menus and popup menus with support for icons, shortcuts, submenus, and various menu item types.\n---\n\n# PopupMenu\n\nThe Menu component provides both context menus (right-click menus) and popup menus with comprehensive features including icons, keyboard shortcuts, submenus, separators, checkable items, and custom elements. Built with accessibility and keyboard navigation in mind.\n\n## Import\n\n```rust\nuse gpui_component::{\n menu::{PopupMenu, PopupMenuItem, ContextMenuExt, DropdownMenu},\n Button\n};\nuse gpui::{actions, Action};\n```\n\n## Usage\n\n### ContextMenu\n\nContext menus appear when right-clicking on an element:\n\n```rust\nuse gpui_component::menu::ContextMenuExt;\n\ndiv()\n .id(\"my-element\")\n .child(\"Right click me\")\n .context_menu(|menu, window, cx| {\n menu.menu(\"Copy\", Box::new(Copy))\n .menu(\"Paste\", Box::new(Paste))\n .separator()\n .menu(\"Delete\", Box::new(Delete))\n })\n```\n\n### DropdownMenu\n\nDropdown menus are triggered by buttons or other interactive elements:\n\n```rust\nuse gpui_component::popup_menu::{PopupMenuExt as _, PopupMenuItem};\n\nlet view = cx.entity();\nButton::new(\"menu-btn\")\n .label(\"Open Menu\")\n .dropdown_menu(|menu, window, cx| {\n menu.menu(\"New File\", Box::new(NewFile))\n .menu(\"Open File\", Box::new(OpenFile))\n .link(\"Documentation\", \"https://longbridge.github.io/gpui-component/\")\n .separator()\n .item(PopupMenuItem::new(\"Custom Action\")\n .on_click(window.listener_for(&view, |this, _, window, cx| {\n // Custom action logic here\n this.\n })\n )\n .separator()\n .menu(\"Exit\", Box::new(Exit))\n })\n```\n\n:::tip\nAs you see, the each menu item is associated with an [Action],\nwe choice this design to better integrate with GPUI's action and key binding system,\nallowing menu items to automatically display keyboard shortcuts when applicable.\n\nSo, the [Action] is the recommended way to define menu item behaviors.\n\nHowever, if you prefer not to use [Action]s, you can create custom menu items using the `item` method along with [PopupMenuItem].\nThere have a `on_click` callback to handle the click event directly.\n:::\n\n### Anchor Position\n\nControl where the dropdown menu appears relative to the trigger:\n\n```rust\nuse gpui::Corner;\n\nButton::new(\"menu-btn\")\n .label(\"Options\")\n .dropdown_menu_with_anchor(Corner::TopRight, |menu, window, cx| {\n menu.menu(\"Option 1\", Box::new(Action1))\n .menu(\"Option 2\", Box::new(Action2))\n })\n```\n\n### Icons\n\nAdd icons to menu items for better visual clarity:\n\n```rust\nuse gpui_component::IconName;\n\nmenu.menu_with_icon(\"Search\", IconName::Search, Box::new(Search))\n .menu_with_icon(\"Settings\", IconName::Settings, Box::new(OpenSettings))\n .separator()\n .menu_with_icon(\"Help\", IconName::Help, Box::new(ShowHelp))\n```\n\n### Disabled State\n\nCreate disabled menu items that cannot be activated:\n\n```rust\nmenu.menu(\"Available Action\", Box::new(Action1))\n .menu_with_disabled(\"Disabled Action\", Box::new(Action2), true)\n .menu_with_icon_and_disabled(\n \"Unavailable\",\n IconName::Lock,\n Box::new(Action3),\n true\n )\n```\n\n### Check state\n\nCreate menu items that show a check state:\n\n```rust\nlet is_enabled = true;\n\nmenu.menu_with_check(\"Enable Feature\", is_enabled, Box::new(ToggleFeature))\n .menu_with_check(\"Show Sidebar\", sidebar_visible, Box::new(ToggleSidebar))\n```\n\nBy default, the check icon will be shown on the left side of the menu item, if this menu item has an icon, the check icon will replace the icon on the left side.\n\nThere also have a `check_side` option for you to config the check icon to be shown on the right side:\n\n```rust\nmenu.check_size(Side::Right)\n .menu_with_check(\"Enable Feature\", is_enabled, Box::new(ToggleFeature))\n```\n\n### Separators\n\nUse separators to group related menu items:\n\n```rust\nmenu.menu(\"New\", Box::new(NewFile))\n .menu(\"Open\", Box::new(OpenFile))\n .separator() // Groups file operations\n .menu(\"Copy\", Box::new(Copy))\n .menu(\"Paste\", Box::new(Paste))\n .separator() // Groups edit operations\n .menu(\"Exit\", Box::new(Exit))\n```\n\n### Labels\n\nAdd non-interactive labels to organize menu sections:\n\n```rust\nmenu.label(\"File Operations\")\n .menu(\"New\", Box::new(NewFile))\n .menu(\"Open\", Box::new(OpenFile))\n .separator()\n .label(\"Edit Operations\")\n .menu(\"Copy\", Box::new(Copy))\n .menu(\"Paste\", Box::new(Paste))\n```\n\n### Link MenuItem\n\nCreate menu items that open external links:\n\n```rust\nmenu.link(\"Documentation\", \"https://docs.example.com\")\n .link_with_icon(\n \"GitHub\",\n IconName::GitHub,\n \"https://github.com/example/repo\"\n )\n .separator()\n .external_link_icon(false) // Hide external link icons\n .link(\"Support\", \"https://support.example.com\")\n```\n\n### Custom Element\n\nCreate custom menu items with complex content:\n\n```rust\nuse gpui_component::{h_flex, v_flex};\n\nmenu.menu_element(Box::new(CustomAction), |window, cx| {\n v_flex()\n .child(\"Custom Element\")\n .child(\n div()\n .text_xs()\n .text_color(cx.theme().muted_foreground)\n .child(\"This is a subtitle\")\n )\n })\n .menu_element_with_icon(\n IconName::Info,\n Box::new(InfoAction),\n |window, cx| {\n h_flex()\n .gap_1()\n .child(\"Status\")\n .child(\n div()\n .text_sm()\n .text_color(cx.theme().success)\n .child(\"✓ Connected\")\n )\n }\n )\n```\n\n### Keyboard Shortcuts\n\nMenu items automatically display keyboard shortcuts if they're bound to actions:\n\n```rust\n// First define your actions and key bindings\nactions!(my_app, [Copy, Paste, Cut]);\n\n// In your app initialization\ncx.bind_keys([\n KeyBinding::new(\"ctrl-c\", Copy, Some(\"editor\")),\n KeyBinding::new(\"ctrl-v\", Paste, Some(\"editor\")),\n KeyBinding::new(\"ctrl-x\", Cut, Some(\"editor\")),\n]);\n\n// The menu will automatically show shortcuts\nmenu.action_context(focus_handle) // Set context for shortcuts\n .menu(\"Copy\", Box::new(Copy)) // Will show \"Ctrl+C\"\n .menu(\"Paste\", Box::new(Paste)) // Will show \"Ctrl+V\"\n .menu(\"Cut\", Box::new(Cut)) // Will show \"Ctrl+X\"\n```\n\n### Submenus\n\nCreate nested menus with submenu support:\n\n```rust\nmenu.submenu(\"File\", window, cx, |submenu, window, cx| {\n submenu.menu(\"New\", Box::new(NewFile))\n .menu(\"Open\", Box::new(OpenFile))\n .separator()\n .menu(\"Recent\", Box::new(ShowRecent))\n })\n .submenu(\"Edit\", window, cx, |submenu, window, cx| {\n submenu.menu(\"Undo\", Box::new(Undo))\n .menu(\"Redo\", Box::new(Redo))\n })\n```\n\n### Submenus with Icons\n\nAdd icons to submenu headers:\n\n```rust\nmenu.submenu_with_icon(\n Some(IconName::Folder.into()),\n \"Project\",\n window,\n cx,\n |submenu, window, cx| {\n submenu.menu(\"Open Project\", Box::new(OpenProject))\n .menu(\"Close Project\", Box::new(CloseProject))\n }\n )\n```\n\n### Scrollable Menus\n\n:::warning\nWhen you have enabled `scrollable()` on a menu, avoid using submenus within it, as this can lead to usability issues.\n:::\n\nFor menus with many items, enable scrolling:\n\n```rust\nButton::new(\"large-menu\")\n .label(\"Many Options\")\n .dropdown_menu(|menu, window, cx| {\n let mut menu = menu\n .scrollable(true)\n .max_h(px(300.))\n .label(\"Select an option\");\n\n for i in 0..100 {\n menu = menu.menu(\n format!(\"Option {}\", i),\n Box::new(SelectOption(i))\n );\n }\n menu\n })\n```\n\n### Menu Sizing\n\nControl menu dimensions:\n\n```rust\nmenu.min_w(px(200.)) // Minimum width\n .max_w(px(400.)) // Maximum width\n .max_h(px(300.)) // Maximum height\n .scrollable(true) // Enable scrolling when content exceeds max height\n```\n\n### Action Context\n\nSet the focus context for handling menu actions:\n\n```rust\nlet focus_handle = cx.focus_handle();\n\nmenu.action_context(focus_handle)\n .menu(\"Copy\", Box::new(Copy))\n .menu(\"Paste\", Box::new(Paste))\n```\n\n## API Reference\n\n- [PopupMenu]\n- [context_menu]\n- [PopupMenuItem]\n\n## Examples\n\n### File Manager Context Menu\n\n```rust\ndiv()\n .id(\"file-manager\")\n .child(\"Right-click for options\")\n .context_menu(|menu, window, cx| {\n menu.menu_with_icon(\"Open\", IconName::FolderOpen, Box::new(Open))\n .separator()\n .menu_with_icon(\"Copy\", IconName::Copy, Box::new(Copy))\n .menu_with_icon(\"Cut\", IconName::Scissors, Box::new(Cut))\n .menu_with_icon(\"Paste\", IconName::Clipboard, Box::new(Paste))\n .separator()\n .submenu(\"New\", window, cx, |submenu, window, cx| {\n submenu.menu_with_icon(\"File\", IconName::File, Box::new(NewFile))\n .menu_with_icon(\"Folder\", IconName::Folder, Box::new(NewFolder))\n })\n .separator()\n .menu_with_icon(\"Delete\", IconName::Trash, Box::new(Delete))\n .separator()\n .menu(\"Properties\", Box::new(ShowProperties))\n })\n```\n\n### Add MenuItem without action\n\nSometimes you may not like to define an action for a menu item, you just want add a `on_click` handler, in this case, the `item` and [PopupMenuItem] can help you:\n\n```rust\nuse gpui_component::{menu::PopupMenuItem, Button};\n\nButton::new(\"custom-item-menu\")\n .label(\"Options\")\n .dropdown_menu(|menu, window, cx| {\n menu.item(\n PopupMenuItem::new(\"Custom Action\")\n .disabled(false)\n .icon(IconName::Star)\n .on_click(|window, cx| {\n // Custom click handler logic\n println!(\"Custom Action Clicked!\");\n })\n )\n .separator()\n .menu(\"Standard Action\", Box::new(StandardAction))\n })\n```\n\n### Editor Menu with Shortcuts\n\n```rust\n// Define actions with keyboard shortcuts\nactions!(editor, [Save, SaveAs, Find, Replace, ToggleWordWrap]);\n\n// Set up key bindings\ncx.bind_keys([\n KeyBinding::new(\"ctrl-s\", Save, Some(\"editor\")),\n KeyBinding::new(\"ctrl-shift-s\", SaveAs, Some(\"editor\")),\n KeyBinding::new(\"ctrl-f\", Find, Some(\"editor\")),\n KeyBinding::new(\"ctrl-h\", Replace, Some(\"editor\")),\n]);\n\n// Create menu with automatic shortcuts\nlet editor_focus = cx.focus_handle();\n\nButton::new(\"editor-menu\")\n .label(\"Edit\")\n .dropdown_menu(|menu, window, cx| {\n menu.action_context(editor_focus)\n .menu(\"Save\", Box::new(Save)) // Shows \"Ctrl+S\"\n .menu(\"Save As...\", Box::new(SaveAs)) // Shows \"Ctrl+Shift+S\"\n .separator()\n .menu(\"Find\", Box::new(Find)) // Shows \"Ctrl+F\"\n .menu(\"Replace\", Box::new(Replace)) // Shows \"Ctrl+H\"\n .separator()\n .menu_with_check(\"Word Wrap\", true, Box::new(ToggleWordWrap))\n })\n```\n\n### Settings Menu with Custom Elements\n\n```rust\nButton::new(\"settings\")\n .label(\"Settings\")\n .dropdown_menu(|menu, window, cx| {\n menu.label(\"Display\")\n .menu_element_with_check(dark_mode, Box::new(ToggleDarkMode), |window, cx| {\n h_flex()\n .gap_2()\n .child(\"Dark Mode\")\n .child(\n div()\n .text_xs()\n .text_color(cx.theme().muted_foreground)\n .child(if dark_mode { \"On\" } else { \"Off\" })\n )\n })\n .separator()\n .label(\"Account\")\n .menu_element_with_icon(\n IconName::User,\n Box::new(ShowProfile),\n |window, cx| {\n v_flex()\n .child(\"John Doe\")\n .child(\n div()\n .text_xs()\n .text_color(cx.theme().muted_foreground)\n .child(\"john@example.com\")\n )\n }\n )\n .separator()\n .link_with_icon(\"Help Center\", IconName::Help, \"https://help.example.com\")\n .menu(\"Sign Out\", Box::new(SignOut))\n })\n```\n\n## Keyboard Shortcuts\n\n| Key | Action |\n| ----------------- | --------------------------------- |\n| `↑` / `↓` | Navigate menu items |\n| `←` / `→` | Navigate submenus |\n| `Enter` / `Space` | Activate menu item |\n| `Escape` | Close menu |\n| `Tab` | Close menu and focus next element |\n\n## Best Practices\n\n1. **Group Related Items**: Use separators to group related functionality\n2. **Consistent Icons**: Use consistent iconography across your application\n3. **Logical Order**: Place most common actions at the top\n4. **Keyboard Shortcuts**: Provide shortcuts for frequently used actions\n5. **Context Awareness**: Show only relevant items for the current context\n6. **Progressive Disclosure**: Use submenus for complex hierarchies\n7. **Clear Labels**: Use descriptive, action-oriented labels\n8. **Reasonable Limits**: Use scrollable menus for more than 10-15 items\n\n[PopupMenu]: https://docs.rs/gpui-component/latest/gpui_component/menu/struct.PopupMenu.html\n[PopupMenuItem]: https://docs.rs/gpui-component/latest/gpui_component/menu/struct.PopupMenuItem.html\n[context_menu]: https://docs.rs/gpui-component/latest/gpui_component/menu/trait.ContextMenuExt.html#method.context_menu\n[Action]: https://docs.rs/gpui/latest/gpui/trait.Action.html\n" }, { "path": "docs/docs/components/notification.md", "content": "---\ntitle: Notification\ndescription: Display toast notifications that appear at the top right of the window with auto-dismiss functionality.\n---\n\n# Notification\n\nA toast notification system for displaying temporary messages to users. Notifications appear at the top right of the window and can auto-dismiss after a timeout. Supports multiple variants (info, success, warning, error), custom content, titles, and action buttons. Perfect for status updates, confirmations, and user feedback.\n\n## Import\n\n```rust\nuse gpui_component::{\n notification::{Notification, NotificationType},\n WindowExt\n};\n```\n\n## Usage\n\n### Setup application root view for display of notifications\n\nYou need to set up your application's root view to render the notification layer. This is typically done in your main application struct's render method.\n\nThe [Root::render_notification_layer](https://docs.rs/gpui-component/latest/gpui_component/struct.Root.html#method.render_notification_layer) function handles rendering any active modals on top of your app content.\n\n```rust\nuse gpui_component::{TitleBar, Root};\n\nstruct Example {}\n\nimpl Render for Example {\n fn render(&mut self, window: &mut Window, cx: &mut Context) -> impl IntoElement {\n let notification_layer = Root::render_notification_layer(window, cx);\n\n div()\n .size_full()\n .child(\n v_flex()\n .size_full()\n .child(TitleBar::new())\n .child(div().flex_1().child(\"Hello world!\")),\n )\n // Render the notification layer on top of the app content\n .children(notification_layer)\n }\n}\n```\n\n### Basic Notification\n\n```rust\n// Simple string notification\nwindow.push_notification(\"This is a notification.\", cx);\n\n// Using Notification builder\nNotification::new()\n .message(\"Your changes have been saved.\")\n```\n\n### Notification Types\n\n```rust\n// Info notification (blue)\nwindow.push_notification(\n (NotificationType::Info, \"File saved successfully.\"),\n cx,\n);\n\n// Success notification (green)\nwindow.push_notification(\n (NotificationType::Success, \"Payment processed successfully.\"),\n cx,\n);\n\n// Warning notification (yellow/orange)\nwindow.push_notification(\n (NotificationType::Warning, \"Network connection is unstable.\"),\n cx,\n);\n\n// Error notification (red)\nwindow.push_notification(\n (NotificationType::Error, \"Failed to save file. Please try again.\"),\n cx,\n);\n```\n\n### Notification with Title\n\n```rust\nNotification::new()\n .title(\"Update Available\")\n .message(\"A new version of the application is ready to install.\")\n .with_type(NotificationType::Info)\n```\n\n### Auto-hide Control\n\n```rust\n// Disable auto-hide (manual dismiss only)\nNotification::new()\n .message(\"This notification stays until manually closed.\")\n .autohide(false)\n\n// Default auto-hide after 5 seconds\nNotification::new()\n .message(\"This will disappear automatically.\")\n .autohide(true) // default\n```\n\n### With Action Button\n\n```rust\nNotification::new()\n .title(\"Connection Lost\")\n .message(\"Unable to connect to server.\")\n .with_type(NotificationType::Error)\n .autohide(false)\n .action(|_, cx| {\n Button::new(\"retry\")\n .primary()\n .label(\"Retry\")\n .on_click(cx.listener(|this, _, window, cx| {\n // Perform retry action\n println!(\"Retrying connection...\");\n this.dismiss(window, cx);\n }))\n })\n```\n\n### Clickable Notifications\n\n```rust\nNotification::new()\n .message(\"Click to view details\")\n .on_click(cx.listener(|_, _, _, cx| {\n println!(\"Notification clicked\");\n // Handle notification click\n cx.notify();\n }))\n```\n\n### Custom Content\n\n```rust\nuse gpui_component::text::markdown;\n\nlet markdown_content = r#\"\n## Custom Notification\n- **Feature**: New dashboard available\n- **Status**: Ready to use\n- [Learn more](https://example.com)\n\"#;\n\nNotification::new()\n .content(|_, window, cx| {\n markdown(markdown_content).into_any_element()\n })\n```\n\n### Unique Notifications\n\nWhen you need to manage notifications manually, such as for long-running processes or persistent alerts, you can use unique IDs to push and remove notifications as needed.\n\nIn this case, you can create a special `struct` in local scope, and use `id` methods with this struct to identify the notification.\n\nThen you can push the notification when needed, and later remove it using the same ID.\n\nLike this:\n\n```rust\n// Using type-based ID for uniqueness\nstruct UpdateNotification;\n\nNotification::new()\n .id::()\n .message(\"System update available\")\n .autohide(false)\n\n// Using type + element ID for multiple unique notifications\nstruct TaskNotification;\n\nNotification::warning(\"Task failed to complete\")\n .id1::(\"task-123\")\n .title(\"Task Failed\")\n```\n\nThen remove the notification with `window.remove_notification::`, like this:\n\n```rust\n// Later, dismiss the notification\nwindow.remove_notification::(cx);\n```\n\n## Examples\n\n### Form Validation Error\n\n```rust\nNotification::error(\"Please correct the following errors before submitting.\")\n .title(\"Validation Failed\")\n .autohide(false)\n .action(|_, _, cx| {\n Button::new(\"review\")\n .outline()\n .label(\"Review Form\")\n .on_click(cx.listener(|this, _, window, cx| {\n // Navigate to form\n this.dismiss(window, cx);\n }))\n })\n```\n\n### File Upload Progress\n\n```rust\nstruct UploadNotification;\n\n// Start upload notification\nwindow.push_notification(\n Notification::info(\"Uploading file...\")\n .id::()\n .title(\"File Upload\")\n .autohide(false),\n cx,\n);\n\n// Update to success when complete\nwindow.push_notification(\n Notification::success(\"File uploaded successfully!\")\n .id::()\n .title(\"Upload Complete\"),\n cx,\n);\n```\n\n### System Status Updates\n\n```rust\n// Warning about maintenance\nNotification::warning(\"System maintenance will begin in 30 minutes.\")\n .title(\"Scheduled Maintenance\")\n .autohide(false)\n .action(|_, cx| {\n Button::new(\"details\")\n .link()\n .label(\"View Details\")\n .on_click(cx.listener(|this, _, window, cx| {\n // Show maintenance details\n this.dismiss(window, cx);\n }))\n })\n```\n\n### Batch Operation Results\n\n```rust\nuse gpui_component::text::markdown;\n\nlet results_content = r#\"\n## Batch Operation Complete\n\n**Processed**: 150 items\n**Success**: 147 items\n**Failed**: 3 items\n\n[View failed items](/)\n\"#;\n\nNotification::success(\"Batch operation completed with some failures.\")\n .title(\"Operation Results\")\n .content(|window, cx| {\n markdown(results_content).into_any_element()\n })\n .autohide(false)\n```\n\n### Interactive Confirmation\n\n```rust\nstruct SaveConfirmation;\n\nNotification::new()\n .id::()\n .title(\"Unsaved Changes\")\n .message(\"You have unsaved changes. Save before leaving?\")\n .autohide(false)\n .action(|_, cx| {\n Button::new(\"save\")\n .primary()\n .label(\"Save\")\n .on_click(cx.listener(|this, _, window, cx| {\n // Perform save\n println!(\"Saving changes...\");\n this.dismiss(window, cx);\n }))\n })\n .on_click(cx.listener(|_, _, _, cx| {\n println!(\"Save reminder clicked\");\n cx.notify();\n }))\n```\n" }, { "path": "docs/docs/components/number-input.md", "content": "---\ntitle: NumberInput\ndescription: Number input component with increment/decrement controls and numeric formatting.\n---\n\n# NumberInput\n\nA specialized input component for numeric values with built-in increment/decrement buttons and support for min/max values, step values, and number formatting with thousands separators.\n\n## Import\n\n```rust\nuse gpui_component::input::{InputState, NumberInput, NumberInputEvent, StepAction};\n```\n\n## Usage\n\n### Basic Number Input\n\n```rust\nlet number_input = cx.new(|cx|\n InputState::new(window, cx)\n .placeholder(\"Enter number\")\n .default_value(\"1\")\n);\n\nNumberInput::new(&number_input)\n```\n\n### With Min/Max Validation\n\n```rust\n// Integer input with validation\nlet integer_input = cx.new(|cx|\n InputState::new(window, cx)\n .placeholder(\"Integer value\")\n .pattern(Regex::new(r\"^\\d+$\").unwrap()) // Only positive integers\n);\n\nNumberInput::new(&integer_input)\n```\n\n### With Number Formatting\n\n```rust\nuse gpui_component::input::MaskPattern;\n\n// Currency input with thousands separator\nlet currency_input = cx.new(|cx|\n InputState::new(window, cx)\n .placeholder(\"Amount\")\n .mask_pattern(MaskPattern::Number {\n separator: Some(','),\n fraction: Some(2), // 2 decimal places\n })\n);\n\nNumberInput::new(¤cy_input)\n```\n\n### Different Sizes\n\n```rust\n// Large size\nNumberInput::new(&input).large()\n\n// Medium size (default)\nNumberInput::new(&input)\n\n// Small size\nNumberInput::new(&input).small()\n```\n\n### With Prefix and Suffix\n\n```rust\nuse gpui_component::{button::{Button, ButtonVariants}, IconName};\n\n// With currency prefix\nNumberInput::new(&input)\n .prefix(div().child(\"$\"))\n\n// With info button suffix\nNumberInput::new(&input)\n .suffix(\n Button::new(\"info\")\n .ghost()\n .icon(IconName::Info)\n .xsmall()\n )\n```\n\n### Disabled State\n\n```rust\nNumberInput::new(&input).disabled(true)\n```\n\n### Without Default Styling\n\n```rust\n// For custom container styling\ndiv()\n .w_full()\n .bg(cx.theme().secondary)\n .rounded(cx.theme().radius)\n .child(NumberInput::new(&input).appearance(false))\n```\n\n### Handle Number Input Events\n\n```rust\nlet number_input = cx.new(|cx| InputState::new(window, cx));\nlet mut value: i64 = 0;\n\n// Subscribe to input changes\ncx.subscribe_in(&number_input, window, |view, state, event, window, cx| {\n match event {\n InputEvent::Change => {\n let text = state.read(cx).value();\n if let Ok(new_value) = text.parse::() {\n view.value = new_value;\n }\n }\n _ => {}\n }\n});\n\n// Subscribe to increment/decrement actions\ncx.subscribe_in(&number_input, window, |view, state, event, window, cx| {\n match event {\n NumberInputEvent::Step(step_action) => {\n match step_action {\n StepAction::Increment => {\n view.value += 1;\n state.update(cx, |input, cx| {\n input.set_value(view.value.to_string(), window, cx);\n });\n }\n StepAction::Decrement => {\n view.value -= 1;\n state.update(cx, |input, cx| {\n input.set_value(view.value.to_string(), window, cx);\n });\n }\n }\n }\n }\n});\n```\n\n### Programmatic Control\n\n```rust\n// Increment programmatically\nNumberInput::increment(&number_input, window, cx);\n\n// Decrement programmatically\nNumberInput::decrement(&number_input, window, cx);\n```\n\n## API Reference\n\n### NumberInput\n\n| Method | Description |\n| ------------------------------ | ------------------------------------------ |\n| `new(state)` | Create number input with InputState entity |\n| `placeholder(str)` | Set placeholder text |\n| `size(size)` | Set input size (small, medium, large) |\n| `prefix(el)` | Add prefix element |\n| `suffix(el)` | Add suffix element |\n| `appearance(bool)` | Enable/disable default styling |\n| `disabled(bool)` | Set disabled state |\n| `increment(state, window, cx)` | Increment value programmatically |\n| `decrement(state, window, cx)` | Decrement value programmatically |\n\n### NumberInputEvent\n\n| Event | Description |\n| ------------------ | ---------------------------------- |\n| `Step(StepAction)` | Increment/decrement button pressed |\n\n### StepAction\n\n| Action | Description |\n| ----------- | ------------------------- |\n| `Increment` | Value should be increased |\n| `Decrement` | Value should be decreased |\n\n### InputState (Number-specific methods)\n\n| Method | Description |\n| ----------------------------------- | ------------------------------------------------------- |\n| `pattern(regex)` | Set regex pattern for validation (e.g., digits only) |\n| `mask_pattern(MaskPattern::Number)` | Set number formatting with separator and decimal places |\n| `value()` | Get current display value (formatted) |\n| `unmask_value()` | Get actual numeric value (unformatted) |\n\n### MaskPattern::Number\n\n| Field | Type | Description |\n| ----------- | --------------- | -------------------------------------- |\n| `separator` | `Option` | Thousands separator (e.g., ',' or ' ') |\n| `fraction` | `Option` | Number of decimal places |\n\n## Keyboard Navigation\n\n| Key | Action |\n| ----------- | -------------------------- |\n| `↑` | Increment value |\n| `↓` | Decrement value |\n| `Tab` | Navigate to next field |\n| `Shift+Tab` | Navigate to previous field |\n| `Enter` | Submit/confirm value |\n| `Escape` | Clear input (if enabled) |\n\n## Examples\n\n### Integer Counter\n\n```rust\nstruct CounterView {\n counter_input: Entity,\n counter_value: i32,\n}\n\nimpl CounterView {\n fn new(window: &mut Window, cx: &mut Context) -> Self {\n let counter_input = cx.new(|cx|\n InputState::new(window, cx)\n .placeholder(\"Count\")\n .default_value(\"0\")\n .pattern(Regex::new(r\"^-?\\d+$\").unwrap()) // Allow negative integers\n );\n\n let _subscription = cx.subscribe_in(&counter_input, window, Self::on_number_event);\n\n Self {\n counter_input,\n counter_value: 0,\n }\n }\n\n fn on_number_event(\n &mut self,\n state: &Entity,\n event: &NumberInputEvent,\n window: &mut Window,\n cx: &mut Context,\n ) {\n match event {\n NumberInputEvent::Step(StepAction::Increment) => {\n self.counter_value += 1;\n state.update(cx, |input, cx| {\n input.set_value(self.counter_value.to_string(), window, cx);\n });\n }\n NumberInputEvent::Step(StepAction::Decrement) => {\n self.counter_value -= 1;\n state.update(cx, |input, cx| {\n input.set_value(self.counter_value.to_string(), window, cx);\n });\n }\n }\n }\n}\n\n// Usage\nNumberInput::new(&self.counter_input)\n```\n\n### Currency Input\n\n```rust\nstruct PriceInput {\n price_input: Entity,\n price_value: f64,\n}\n\nimpl PriceInput {\n fn new(window: &mut Window, cx: &mut Context) -> Self {\n let price_input = cx.new(|cx|\n InputState::new(window, cx)\n .placeholder(\"0.00\")\n .mask_pattern(MaskPattern::Number {\n separator: Some(','),\n fraction: Some(2),\n })\n );\n\n Self {\n price_input,\n price_value: 0.0,\n }\n }\n}\n\n// Usage with currency prefix\nh_flex()\n .gap_2()\n .child(div().child(\"$\"))\n .child(NumberInput::new(&self.price_input))\n```\n\n### Quantity Selector with Limits\n\n```rust\nstruct QuantitySelector {\n quantity_input: Entity,\n quantity: u32,\n min_quantity: u32,\n max_quantity: u32,\n}\n\nimpl QuantitySelector {\n fn new(window: &mut Window, cx: &mut Context) -> Self {\n let min_quantity = 1;\n let max_quantity = 99;\n\n let quantity_input = cx.new(|cx|\n InputState::new(window, cx)\n .default_value(min_quantity.to_string())\n .pattern(Regex::new(&format!(r\"^[{}-{}]\\d*$\", min_quantity, max_quantity)).unwrap())\n );\n\n let _subscription = cx.subscribe_in(&quantity_input, window, Self::on_quantity_event);\n\n Self {\n quantity_input,\n quantity: min_quantity,\n min_quantity,\n max_quantity,\n }\n }\n\n fn on_quantity_event(\n &mut self,\n state: &Entity,\n event: &NumberInputEvent,\n window: &mut Window,\n cx: &mut Context,\n ) {\n match event {\n NumberInputEvent::Step(StepAction::Increment) => {\n if self.quantity < self.max_quantity {\n self.quantity += 1;\n state.update(cx, |input, cx| {\n input.set_value(self.quantity.to_string(), window, cx);\n });\n }\n }\n NumberInputEvent::Step(StepAction::Decrement) => {\n if self.quantity > self.min_quantity {\n self.quantity -= 1;\n state.update(cx, |input, cx| {\n input.set_value(self.quantity.to_string(), window, cx);\n });\n }\n }\n }\n }\n}\n\n// Usage\nNumberInput::new(&self.quantity_input).small()\n```\n\n### Floating Point Input\n\n```rust\nstruct FloatInput {\n float_input: Entity,\n float_value: f64,\n step: f64,\n}\n\nimpl FloatInput {\n fn new(window: &mut Window, cx: &mut Context) -> Self {\n let float_input = cx.new(|cx|\n InputState::new(window, cx)\n .placeholder(\"0.0\")\n .pattern(Regex::new(r\"^-?\\d*\\.?\\d*$\").unwrap()) // Allow decimal numbers\n );\n\n Self {\n float_input,\n float_value: 0.0,\n step: 0.1,\n }\n }\n\n fn on_float_event(\n &mut self,\n state: &Entity,\n event: &NumberInputEvent,\n window: &mut Window,\n cx: &mut Context,\n ) {\n match event {\n NumberInputEvent::Step(StepAction::Increment) => {\n self.float_value += self.step;\n state.update(cx, |input, cx| {\n input.set_value(format!(\"{:.1}\", self.float_value), window, cx);\n });\n }\n NumberInputEvent::Step(StepAction::Decrement) => {\n self.float_value -= self.step;\n state.update(cx, |input, cx| {\n input.set_value(format!(\"{:.1}\", self.float_value), window, cx);\n });\n }\n }\n }\n}\n```\n\n## Best Practices\n\n1. **Validation**: Always validate numeric input on both client and server side\n2. **Range Limits**: Implement min/max validation for user safety\n3. **Step Size**: Choose appropriate step values for your use case\n4. **Error Handling**: Provide clear feedback for invalid input\n5. **Formatting**: Use consistent number formatting across your application\n6. **Performance**: Debounce rapid increment/decrement actions if needed\n7. **Accessibility**: Always provide proper labels and descriptions\n" }, { "path": "docs/docs/components/otp-input.md", "content": "---\ntitle: OtpInput\ndescription: One-time password input component with multiple fields, auto-focus, and paste handling.\n---\n\n# OtpInput\n\nA specialized input component for one-time passwords (OTP) that displays multiple input fields in a grid layout. Perfect for SMS verification codes, authenticator app codes, and other numeric verification scenarios.\n\n## Import\n\n```rust\nuse gpui_component::input::{OtpInput, OtpState};\n```\n\n## Usage\n\n### Basic OTP Input\n\n```rust\nlet otp_state = cx.new(|cx| OtpState::new(6, window, cx));\n\nOtpInput::new(&otp_state)\n```\n\n### With Default Value\n\n```rust\nlet otp_state = cx.new(|cx|\n OtpState::new(6, window, cx)\n .default_value(\"123456\")\n);\n\nOtpInput::new(&otp_state)\n```\n\n### Masked OTP Input\n\n```rust\nlet otp_state = cx.new(|cx|\n OtpState::new(6, window, cx)\n .masked(true)\n .default_value(\"123456\")\n);\n\nOtpInput::new(&otp_state)\n```\n\n### Different Sizes\n\n```rust\n// Small size\nOtpInput::new(&otp_state).small()\n\n// Medium size (default)\nOtpInput::new(&otp_state)\n\n// Large size\nOtpInput::new(&otp_state).large()\n\n// Custom size\nOtpInput::new(&otp_state).with_size(px(55.))\n```\n\n### Grouped Layout\n\n```rust\n// Single group (all fields together)\nOtpInput::new(&otp_state).groups(1)\n\n// Two groups (default) - splits fields in half\nOtpInput::new(&otp_state).groups(2)\n\n// Three groups - splits fields into thirds\nOtpInput::new(&otp_state).groups(3)\n```\n\n### Disabled State\n\n```rust\nOtpInput::new(&otp_state).disabled(true)\n```\n\n### Different Length Codes\n\n```rust\n// 4-digit PIN\nlet pin_state = cx.new(|cx| OtpState::new(4, window, cx));\nOtpInput::new(&pin_state).groups(1)\n\n// 6-digit SMS code (most common)\nlet sms_state = cx.new(|cx| OtpState::new(6, window, cx));\nOtpInput::new(&sms_state)\n\n// 8-digit authenticator code\nlet auth_state = cx.new(|cx| OtpState::new(8, window, cx));\nOtpInput::new(&auth_state).groups(2)\n```\n\n### Handle OTP Events\n\n```rust\nlet otp_state = cx.new(|cx| OtpState::new(6, window, cx));\n\ncx.subscribe(&otp_state, |this, state, event: &InputEvent, cx| {\n match event {\n InputEvent::Change => {\n let code = state.read(cx).value();\n if code.len() == 6 {\n println!(\"Complete OTP: {}\", code);\n // Automatically submit when complete\n this.verify_otp(&code, cx);\n }\n }\n InputEvent::Focus => println!(\"OTP input focused\"),\n InputEvent::Blur => println!(\"OTP input lost focus\"),\n _ => {}\n }\n});\n```\n\n### Programmatic Control\n\n```rust\n// Set value programmatically\notp_state.update(cx, |state, cx| {\n state.set_value(\"123456\", window, cx);\n});\n\n// Toggle masking\notp_state.update(cx, |state, cx| {\n state.set_masked(true, window, cx);\n});\n\n// Focus the input\notp_state.update(cx, |state, cx| {\n state.focus(window, cx);\n});\n\n// Get current value\nlet current_value = otp_state.read(cx).value();\n```\n\n## API Reference\n\n### OtpState\n\n| Method | Description |\n| ------------------------------ | -------------------------------------------- |\n| `new(length, window, cx)` | Create a new OTP state with specified length |\n| `default_value(str)` | Set initial value |\n| `masked(bool)` | Enable masked display (shows asterisks) |\n| `set_value(str, window, cx)` | Set OTP value programmatically |\n| `value()` | Get current OTP value |\n| `set_masked(bool, window, cx)` | Toggle masked display |\n| `focus(window, cx)` | Focus the OTP input |\n| `focus_handle(cx)` | Get focus handle |\n\n### OtpInput\n\n| Method | Description |\n| ---------------- | ---------------------------------------- |\n| `new(state)` | Create OTP input with state entity |\n| `groups(n)` | Set number of visual groups (default: 2) |\n| `disabled(bool)` | Set disabled state |\n| `small()` | Small size (6x6 px fields) |\n| `large()` | Large size (11x11 px fields) |\n| `with_size(px)` | Custom field size |\n\n### InputEvent\n\n| Event | Description |\n| -------- | ------------------------------------------------- |\n| `Change` | Emitted when OTP is complete (all digits entered) |\n| `Focus` | Input received focus |\n| `Blur` | Input lost focus |\n\n## Examples\n\n### SMS Verification\n\n```rust\nstruct SmsVerification {\n otp_state: Entity,\n phone_number: String,\n is_verifying: bool,\n}\n\nimpl SmsVerification {\n fn new(window: &mut Window, cx: &mut Context) -> Self {\n let otp_state = cx.new(|cx| OtpState::new(6, window, cx));\n\n cx.subscribe(&otp_state, |this, state, event: &InputEvent, cx| {\n if let InputEvent::Change = event {\n let code = state.read(cx).value();\n this.verify_sms_code(&code, cx);\n }\n });\n\n Self {\n otp_state,\n phone_number: \"+1234567890\".to_string(),\n is_verifying: false,\n }\n }\n\n fn verify_sms_code(&mut self, code: &str, cx: &mut Context) {\n self.is_verifying = true;\n // API call to verify SMS code\n println!(\"Verifying SMS code: {}\", code);\n cx.notify();\n }\n}\n\nimpl Render for SmsVerification {\n fn render(&mut self, window: &mut Window, cx: &mut Context) -> impl IntoElement {\n v_flex()\n .gap_4()\n .child(format!(\"Enter the 6-digit code sent to {}\", self.phone_number))\n .child(OtpInput::new(&self.otp_state))\n .when(self.is_verifying, |this| {\n this.child(\"Verifying...\")\n })\n }\n}\n```\n\n### Two-Factor Authentication\n\n```rust\nstruct TwoFactorAuth {\n otp_state: Entity,\n is_masked: bool,\n}\n\nimpl TwoFactorAuth {\n fn new(window: &mut Window, cx: &mut Context) -> Self {\n let otp_state = cx.new(|cx|\n OtpState::new(6, window, cx)\n .masked(true)\n );\n\n Self {\n otp_state,\n is_masked: true,\n }\n }\n\n fn toggle_visibility(&mut self, window: &mut Window, cx: &mut Context) {\n self.is_masked = !self.is_masked;\n self.otp_state.update(cx, |state, cx| {\n state.set_masked(self.is_masked, window, cx);\n });\n }\n}\n\nimpl Render for TwoFactorAuth {\n fn render(&mut self, window: &mut Window, cx: &mut Context) -> impl IntoElement {\n v_flex()\n .gap_4()\n .child(\"Enter your authenticator code\")\n .child(OtpInput::new(&self.otp_state))\n .child(\n Button::new(\"toggle-visibility\")\n .label(if self.is_masked { \"Show\" } else { \"Hide\" })\n .on_click(cx.listener(Self::toggle_visibility))\n )\n }\n}\n```\n\n### PIN Entry\n\n```rust\nstruct PinEntry {\n pin_state: Entity,\n attempts: usize,\n max_attempts: usize,\n}\n\nimpl PinEntry {\n fn new(window: &mut Window, cx: &mut Context) -> Self {\n let pin_state = cx.new(|cx|\n OtpState::new(4, window, cx)\n .masked(true)\n );\n\n cx.subscribe(&pin_state, |this, state, event: &InputEvent, cx| {\n if let InputEvent::Change = event {\n let pin = state.read(cx).value();\n this.verify_pin(&pin, cx);\n }\n });\n\n Self {\n pin_state,\n attempts: 0,\n max_attempts: 3,\n }\n }\n\n fn verify_pin(&mut self, pin: &str, cx: &mut Context) {\n self.attempts += 1;\n\n // Simulate PIN verification\n if pin == \"1234\" {\n println!(\"PIN verified successfully!\");\n } else {\n println!(\"Incorrect PIN. Attempts: {}/{}\", self.attempts, self.max_attempts);\n\n // Clear PIN on incorrect attempt\n self.pin_state.update(cx, |state, cx| {\n state.set_value(\"\", window, cx);\n });\n }\n\n cx.notify();\n }\n}\n\nimpl Render for PinEntry {\n fn render(&mut self, window: &mut Window, cx: &mut Context) -> impl IntoElement {\n let is_locked = self.attempts >= self.max_attempts;\n\n v_flex()\n .gap_4()\n .child(\"Enter your 4-digit PIN\")\n .child(\n OtpInput::new(&self.pin_state)\n .groups(1)\n .disabled(is_locked)\n )\n .when(is_locked, |this| {\n this.child(\"Too many attempts. Please try again later.\")\n })\n .when(self.attempts > 0 && !is_locked, |this| {\n this.child(format!(\n \"Incorrect PIN. {} attempts remaining.\",\n self.max_attempts - self.attempts\n ))\n })\n }\n}\n```\n\n## Behavior\n\n### Input Handling\n\n- **Numeric Only**: Accepts only digits (0-9)\n- **Auto-Focus**: Automatically moves to next field when digit is entered\n- **Backspace**: Removes current digit and moves to previous field\n- **Length Limit**: Prevents input beyond specified length\n- **Auto-Complete**: Emits `Change` event when all fields are filled\n\n### Visual Feedback\n\n- **Focus Indicator**: Blue border and blinking cursor on active field\n- **Masking**: Shows asterisk icons instead of numbers when enabled\n- **Grouping**: Visual separation of fields into groups for better readability\n- **Disabled State**: Grayed out appearance when disabled\n\n### Keyboard Navigation\n\n- **Arrow Keys**: Navigate between fields\n- **Tab**: Move to next focusable element\n- **Shift+Tab**: Move to previous focusable element\n- **Backspace**: Delete current digit and move backward\n- **Delete**: Clear current field\n\n## Common Patterns\n\n### Auto-Submit on Complete\n\n```rust\ncx.subscribe(&otp_state, |this, state, event: &InputEvent, cx| {\n if let InputEvent::Change = event {\n let code = state.read(cx).value();\n if code.len() == 6 {\n // Auto-submit when complete\n this.submit_verification_code(&code, cx);\n }\n }\n});\n```\n\n### Clear on Focus\n\n```rust\ncx.subscribe(&otp_state, |this, state, event: &InputEvent, cx| {\n if let InputEvent::Focus = event {\n // Clear previous value when user starts entering new code\n state.update(cx, |state, cx| {\n state.set_value(\"\", window, cx);\n });\n }\n});\n```\n\n### Resend Code Timer\n\n```rust\nstruct OtpWithResend {\n otp_state: Entity,\n resend_timer: Option,\n can_resend: bool,\n}\n\n// Implementation would include timer logic for resend functionality\n```\n" }, { "path": "docs/docs/components/pagination.md", "content": "---\ntitle: Pagination\ndescription: Pagination with page navigation, next and previous links.\n---\n\n# Pagination\n\nThe [Pagination] component provides page navigation with next and previous links. It displays page numbers and allows users to navigate through multiple pages of content.\n\n## Import\n\n```rust\nuse gpui_component::pagination::Pagination;\n```\n\n## Usage\n\n### Basic Pagination\n\n```rust\nPagination::new(\"my-pagination\")\n .current_page(5)\n .total_pages(10)\n .on_click(|page, _, cx| {\n println!(\"Navigated to page: {}\", page);\n })\n```\n\n### With Visible Pages\n\nBy default, the pagination shows up to 5 visible page buttons. You can customize this with `visible_pages()`:\n\n```rust\nPagination::new(\"my-pagination\")\n .current_page(1)\n .total_pages(50)\n .visible_pages(10)\n .on_click(|page, _, cx| {\n // Handle page change\n })\n```\n\n### Compact Style\n\nThe compact style only shows the previous and next buttons with icons, without displaying page numbers.\n\nUse `compact` method to enable compact style:\n\n```rust\nPagination::new(\"my-pagination\")\n .compact()\n .current_page(3)\n .total_pages(10)\n .on_click(|page, _, cx| {\n // Handle page change\n })\n```\n\n### Different Sizes\n\nThe Pagination supports the [Sizable] trait for different sizes:\n\n```rust\nuse gpui_component::{Sizable as _, Size};\n\nPagination::new(\"my-pagination\")\n .xsmall()\n .current_page(1)\n .total_pages(10)\n\nPagination::new(\"my-pagination\")\n .small()\n .current_page(1)\n .total_pages(10)\n\nPagination::new(\"my-pagination\")\n .current_page(1)\n .total_pages(10) // Medium (default)\n\nPagination::new(\"my-pagination\")\n .large()\n .current_page(1)\n .total_pages(10)\n```\n\n### Disabled State\n\n```rust\nPagination::new(\"my-pagination\")\n .current_page(4)\n .total_pages(10)\n .disabled(true)\n .on_click(|_, _, _| {})\n```\n\n### Handle Page Change Events\n\nThe `on_click` callback receives the new page number when users click on page numbers, previous, or next buttons:\n\n```rust\nPagination::new(\"my-pagination\")\n .current_page(current_page)\n .total_pages(total_pages)\n .on_click(|page, _, cx| {\n // Update your state with the new page\n // The page number is 1-based\n })\n```\n\n## API Reference\n\n- [Pagination]\n\n### Sizing\n\nImplements [Sizable] trait:\n\n- `xsmall()` - Extra small size\n- `small()` - Small size\n- `medium()` - Medium size (default)\n- `large()` - Large size\n- `with_size(size)` - Set custom size\n\n### Methods\n\n- `current_page(page: usize)` - Set the current page number (1-based). The value will be clamped between 1 and total_pages.\n- `total_pages(pages: usize)` - Set the total number of pages.\n- `visible_pages(max: usize)` - Set the maximum number of visible page buttons (default: 5).\n- `compact()` - Enable compact style (only shows prev/next buttons with icons).\n- `disabled(bool)` - Set the disabled state.\n- `on_click(handler)` - Set the handler for page change events.\n\n## Examples\n\n### With State Management\n\n```rust\nlet mut current_page = 1;\nlet total_pages = 20;\n\nPagination::new(\"pagination\")\n .current_page(current_page)\n .total_pages(total_pages)\n .on_click({\n let entity = entity.clone();\n move |page, _, cx| {\n entity.update(cx, |this, cx| {\n this.current_page = *page;\n cx.notify();\n });\n }\n })\n```\n\n### Large Dataset Pagination\n\nFor large datasets, use `visible_pages()` to show more page options:\n\n```rust\nPagination::new(\"large-pagination\")\n .current_page(25)\n .total_pages(100)\n .visible_pages(10)\n .on_click(|page, _, cx| {\n // Load data for the new page\n })\n```\n\n[Pagination]: https://docs.rs/gpui-component/latest/gpui_component/pagination/struct.Pagination.html\n[Sizable]: https://docs.rs/gpui-component/latest/gpui_component/trait.Sizable.html\n" }, { "path": "docs/docs/components/plot.md", "content": "---\ntitle: Plot\ndescription: A low-level plotting library for creating custom charts and data visualizations.\n---\n\n# Plot\n\nThe `plot` module provides low-level building blocks for creating custom charts. It includes scales, shapes, and utilities that power the high-level `Chart` components.\n\n## Import\n\n```rust\nuse gpui_component::plot::{\n scale::{Scale, ScaleLinear, ScaleBand, ScalePoint, ScaleOrdinal},\n shape::{Bar, Stack, Line, Area, Pie, Arc},\n PlotAxis, AxisText\n};\n```\n\n## Scales\n\nScales map a dimension of abstract data to a visual representation.\n\n### ScaleLinear\n\nMaps a continuous quantitative domain to a continuous range.\n\n```rust\nlet scale = ScaleLinear::new(\n vec![0., 100.], // Domain (data values)\n vec![0., 500.] // Range (pixel coordinates)\n);\n\nscale.tick(&50.); // Returns pixel position\n```\n\n### ScaleBand\n\nMaps a discrete domain to a continuous range, useful for bar charts.\n\n```rust\nlet scale = ScaleBand::new(\n vec![\"A\", \"B\", \"C\"], // Domain\n vec![0., 300.] // Range\n)\n.padding_inner(0.1)\n.padding_outer(0.1);\n\nscale.band_width(); // Returns width of each band\nscale.tick(&\"A\"); // Returns start position of band \"A\"\n```\n\n### ScalePoint\n\nMaps a discrete domain to a set of points in a continuous range, useful for scatter plots or line charts with categorical axes.\n\n```rust\nlet scale = ScalePoint::new(\n vec![\"A\", \"B\", \"C\"], // Domain\n vec![0., 300.] // Range\n);\n\nscale.tick(&\"A\"); // Returns position of point \"A\"\n```\n\n### ScaleOrdinal\n\nMaps a discrete domain to a discrete range.\n\n```rust\nlet scale = ScaleOrdinal::new(\n vec![\"A\", \"B\", \"C\"], // Domain\n vec![color1, color2, color3] // Range\n);\n\nscale.map(&\"A\"); // Returns color1\n```\n\n## Shapes\n\n### Bar\n\nRenders a bar shape, commonly used in bar charts.\n\n```rust\nBar::new()\n .data(data)\n .band_width(30.)\n .x(|d| x_scale.tick(&d.category))\n .y0(|d| y_scale.tick(&0.).unwrap())\n .y1(|d| y_scale.tick(&d.value))\n .fill(|d| color_scale.map(&d.category))\n .paint(&bounds, window, cx);\n```\n\n### Line\n\nRenders a line shape, commonly used in line charts.\n\n```rust\nLine::new()\n .data(data)\n .x(|d| x_scale.tick(&d.date))\n .y(|d| y_scale.tick(&d.value))\n .stroke(cx.theme().chart_1)\n .stroke_width(px(2.))\n .paint(&bounds, window);\n```\n\n#### Line with Dots\n\nSupports rendering dots at data points.\n\n```rust\nLine::new()\n .data(data)\n .x(|d| x_scale.tick(&d.date))\n .y(|d| y_scale.tick(&d.value))\n .dot()\n .dot_size(px(4.))\n .paint(&bounds, window);\n```\n\n### Area\n\nRenders an area shape, commonly used in area charts.\n\n```rust\nArea::new()\n .data(data)\n .x(|d| x_scale.tick(&d.date))\n .y0(height) // Baseline\n .y1(|d| y_scale.tick(&d.value))\n .fill(cx.theme().chart_1.opacity(0.5))\n .stroke(cx.theme().chart_1)\n .paint(&bounds, window);\n```\n\n### Pie & Arc\n\nRenders pie charts and donut charts using `Pie` layout and `Arc` shape.\n\n```rust\n// 1. Compute pie layout\nlet pie = Pie::new()\n .value(|d| Some(d.value))\n .pad_angle(0.05);\n\nlet arcs = pie.arcs(&data);\n\n// 2. Render arcs\nlet arc_shape = Arc::new()\n .inner_radius(0.)\n .outer_radius(100.);\n\nfor arc_data in arcs {\n arc_shape.paint(\n &arc_data,\n color_scale.map(&arc_data.data.category), // Color\n None, // Override inner radius\n None, // Override outer radius\n &bounds,\n window\n );\n}\n```\n\n### Stack\n\nComputes stacked layout for data series.\n\n```rust\nlet stack = Stack::new()\n .data(data)\n .keys(vec![\"series1\", \"series2\"])\n .value(|d, key| match key {\n \"series1\" => Some(d.val1),\n \"series2\" => Some(d.val2),\n _ => None\n });\n\nlet series = stack.series(); // Returns Vec>\n```\n\n## Components\n\n### PlotAxis\n\nRenders chart axes with labels and ticks.\n\n```rust\nPlotAxis::new()\n .x(height) // Y position for X axis\n .x_label(labels) // Iterator of AxisText\n .stroke(cx.theme().border)\n .paint(&bounds, window, cx);\n```\n\n## Examples\n\n### Custom Bar Chart Implementation\n\nHere's how to implement a custom stacked bar chart using low-level plot primitives:\n\n```rust\nstruct StackedBarChart {\n data: Vec,\n series: Vec>,\n}\n\nimpl StackedBarChart {\n pub fn new(data: Vec) -> Self {\n let series = Stack::new()\n .data(data.clone())\n .keys(vec![\"desktop\", \"mobile\"])\n .value(|d, key| match key {\n \"desktop\" => Some(d.desktop),\n \"mobile\" => Some(d.mobile),\n _ => None,\n })\n .series();\n\n Self { data, series }\n }\n}\n\nimpl Plot for StackedBarChart {\n fn paint(&mut self, bounds: Bounds, window: &mut Window, cx: &mut App) {\n // 1. Setup Scales\n let x = ScaleBand::new(\n self.data.iter().map(|v| v.date.clone()).collect(),\n vec![0., width],\n );\n \n let y = ScaleLinear::new(vec![0., max_value], vec![height, 0.]);\n\n // 2. Draw Axis\n // ... (axis rendering logic)\n\n // 3. Draw Stacked Bars\n let bar = Bar::new()\n .stack_data(&self.series)\n .band_width(x.band_width())\n .x(move |d| x.tick(&d.data.date))\n .fill(move |_| cx.theme().chart_1);\n\n bar.paint(&bounds, window, cx);\n }\n}\n```\n" }, { "path": "docs/docs/components/popover.md", "content": "---\ntitle: Popover\ndescription: A floating overlay that displays rich content relative to a trigger element.\n---\n\n# Popover\n\nPopover component for displaying floating content that appears when interacting with a trigger element. Supports multiple positioning options, custom content, different trigger methods, and automatic dismissal behaviors. Perfect for tooltips, menus, forms, and other contextual information.\n\n## Import\n\n```rust\nuse gpui_component::popover::{Popover};\n```\n\n## Usage\n\n### Basic Popover\n\n:::info\nAny element that implements [Selectable] can be used as a trigger, for example, a [Button].\n\nAny element that implements [RenderOnce] or [Render] can be used as popover content, use `.child(...)` to add children directly.\n:::\n\n```rust\nuse gpui::ParentElement as _;\nuse gpui_component::{button::Button, popover::Popover};\n\nPopover::new(\"basic-popover\")\n .trigger(Button::new(\"trigger\").label(\"Click me\").outline())\n .child(\"Hello, this is a popover!\")\n .child(\"It appears when you click the button.\")\n```\n\n### Popover with Custom Positioning\n\nThe `anchor` method allows you to specify where the popover appears relative to the trigger element. It accepts both `Corner` and `Anchor` types.\n\n**Using `Corner` type** (4 corner positions):\n\n```rust\nuse gpui::Corner;\n\nPopover::new(\"positioned-popover\")\n .anchor(Corner::TopRight)\n .trigger(Button::new(\"top-right\").label(\"Top Right\").outline())\n .child(\"This popover appears at the top right\")\n```\n\n**Using `Anchor` type** (6 positions including center):\n\nThe `Anchor` type provides more positioning options, including center positions:\n\n```rust\nuse gpui_component::Anchor;\n\n// Top positions\nPopover::new(\"top-left\")\n .anchor(Anchor::TopLeft)\n .trigger(Button::new(\"btn\").label(\"Top Left\").outline())\n .child(\"Anchored to top left\")\n\nPopover::new(\"top-center\")\n .anchor(Anchor::TopCenter)\n .trigger(Button::new(\"btn\").label(\"Top Center\").outline())\n .child(\"Anchored to top center\")\n\nPopover::new(\"top-right\")\n .anchor(Anchor::TopRight)\n .trigger(Button::new(\"btn\").label(\"Top Right\").outline())\n .child(\"Anchored to top right\")\n\n// Bottom positions\nPopover::new(\"bottom-left\")\n .anchor(Anchor::BottomLeft)\n .trigger(Button::new(\"btn\").label(\"Bottom Left\").outline())\n .child(\"Anchored to bottom left\")\n\nPopover::new(\"bottom-center\")\n .anchor(Anchor::BottomCenter)\n .trigger(Button::new(\"btn\").label(\"Bottom Center\").outline())\n .child(\"Anchored to bottom center\")\n\nPopover::new(\"bottom-right\")\n .anchor(Anchor::BottomRight)\n .trigger(Button::new(\"btn\").label(\"Bottom Right\").outline())\n .child(\"Anchored to bottom right\")\n```\n\n### View in Popover\n\nYou can add any `Entity` that implemented [Render] as the popover content.\n\n```rust\nlet view = cx.new(|_| MyView::new());\n\nPopover::new(\"form-popover\")\n .anchor(Corner::BottomLeft)\n .trigger(Button::new(\"show-form\").label(\"Open Form\").outline())\n .child(view.clone())\n```\n\n### Add content by `content` method\n\nThe `content` method allows you to create more complex popover content using a closure. This is useful when\nyou need to build dynamic content or need access to the popover's context.\n\nThis method will let us to have `&mut PopoverState`, `&mut Window` and `&mut Context` parameters in the\nclosure is to allow you to interact with the popover's state and the overall application context if needed.\n\n:::warning\nThis `content` callback will called every time on render the popover.\nSo, you should avoid creating new elements or entities in the content closure\nor other heavy operations that may impact performance.\n:::\n\nAnd `content` will works with `child`, `children` methods together.\n\n```rust\nuse gpui::ParentElement as _;\nuse gpui_component::popover::Popover;\n\nPopover::new(\"complex-popover\")\n .anchor(Corner::BottomLeft)\n .trigger(Button::new(\"complex\").label(\"Complex Content\").outline())\n .content(|_, _, _| {\n div()\n .child(\"This popover has complex content.\")\n .child(\n Button::new(\"action-btn\")\n .label(\"Perform Action\")\n .outline()\n )\n })\n```\n\n### Right-Click Popover\n\nSometimes you may want to show a popover on right-click, for example, to create a special your ownen context menu. The `mouse_button` method allows you to specify which mouse button triggers the popover.\n\n```rust\nuse gpui::MouseButton;\n\nPopover::new(\"context-menu\")\n .anchor(Corner::BottomRight)\n .mouse_button(MouseButton::Right)\n .trigger(Button::new(\"right-click\").label(\"Right Click Me\").outline())\n .child(\"Context Menu\")\n .child(Divider::horizontal())\n .child(\"This is a custom context menu.\")\n```\n\n### Dismiss Popover manually\n\nIf you want to dismiss the popover programmatically from within the content, you can emit a `DismissEvent`. In this case, you should use `content` method to create the popover content so you have access to the `cx: &mut Context`.\n\n```rust\nuse gpui_component::{DismissEvent, popover::Popover};\n\nPopover::new(\"dismiss-popover\")\n .trigger(Button::new(\"dismiss\").label(\"Dismiss Popover\").outline())\n .content(|_, cx| {\n div()\n .child(\"Click the button below to dismiss this popover.\")\n .child(\n Button::new(\"close-btn\")\n .label(\"Close Popover\")\n .on_click(cx.listener(|_, _, _, cx| {\n // NOTE: Here `cx` is `&mut Context` type, so we can emit DismissEvent.\n cx.emit(DismissEvent);\n }))\n )\n })\n```\n\n### Styling Popover\n\nLike the others components in GPUI Component, the `appearance(false)` method can be used to disable the default styling of the popover, allowing you to fully customize its appearance.\n\nAnd the `Popover` has implemented the [Styled] trait, so you can use all the styling methods provided by GPUI to style the popover content as you like.\n\n```rust\n// For custom styled popovers or when you want full control\nPopover::new(\"custom-popover\")\n .appearance(false)\n .trigger(Button::new(\"custom\").label(\"Custom Style\"))\n .bg(cx.theme().accent)\n .text_color(cx.theme().accent_foreground)\n .p_6()\n .rounded_xl()\n .shadow_2xl()\n .child(\"Fully custom styled popover\")\n```\n\n### Control Open State\n\nThere have `open` and `on_open_change` methods to control the open state of the popover programmatically.\n\nThis is useful when you want to synchronize the popover's open state with other UI elements or application state.\n\n:::tip\nWhen you use `open` to control the popover's open state, that means you have take full control of it,\nso you need to update the state in `on_open_change` callback to keep the popover working correctly.\n:::\n\n```rust\nuse gpui_component::popover::Popover;\n\nstruct MyView {\n popover_open: bool,\n}\n\nPopover::new(\"controlled-popover\")\n .open(self.open)\n .on_open_change(cx.listener(|this, open: &bool, _, cx| {\n this.popover_open = *open;\n cx.notify();\n }))\n .trigger(Button::new(\"control-btn\").label(\"Control Popover\").outline())\n .child(\"This popover's open state is controlled programmatically.\")\n```\n\n### Default Open\n\nThe `default_open` method allows you to set the initial open state of the popover when it is first rendered.\n\nPlease note that if you use the `open` method to control the popover's open state, the `default_open` setting will be ignored.\n\n```rust\nuse gpui_component::popover::Popover;\n\nPopover::new(\"default-open-popover\")\n .default_open(true)\n .trigger(Button::new(\"default-open-btn\").label(\"Default Open\").outline())\n .child(\"This popover is open by default when first rendered.\")\n```\n\n[Button]: https://docs.rs/gpui-component/latest/gpui_component/button/struct.Button.html\n[Selectable]: https://docs.rs/gpui-component/latest/gpui_component/trait.Selectable.html\n[Render]: https://docs.rs/gpui/latest/gpui/trait.Render.html\n[RenderOnce]: https://docs.rs/gpui/latest/gpui/trait.RenderOnce.html\n[Styled]: https://docs.rs/gpui/latest/gpui/trait.Styled.html\n" }, { "path": "docs/docs/components/progress.md", "content": "---\ntitle: Progress\ndescription: Displays an indicator showing the completion progress of a task, typically displayed as a progress bar or circular indicator.\n---\n\n# Progress\n\nProgress components visually represent the completion percentage of a task. The library provides two variants:\n\n- **[Progress](#progress)** - A linear horizontal progress bar\n- **[ProgressCircle](#progresscircle)** - A circular progress indicator\n\nBoth components feature smooth animations, customizable colors, and automatic styling that adapts to the current theme.\n\n## Progress\n\n```rust\nuse gpui_component::progress::{Progress, ProgressCircle};\n```\n\n### Usage\n\n```rust\nProgress::new(\"my-progress\")\n .value(50.0) // 50% complete\n```\n\n### Different Progress Values\n\n```rust\n// Starting state (0%)\nProgress::new(\"progress-0\")\n .value(0.0)\n\n// Partially complete (25%)\nProgress::new(\"progress-25\")\n .value(25.0)\n\n// Nearly complete (75%)\nProgress::new(\"progress-75\")\n .value(75.0)\n\n// Complete (100%)\nProgress::new(\"progress-100\")\n .value(100.0)\n```\n\n### Indeterminate State\n\n```rust\n// For unknown progress duration\nProgress::new(\"indeterminate\")\n .value(-1.0) // Any negative value shows as 0%\n\n// Or explicitly set to 0 for starting state\nProgress::new(\"starting\")\n .value(0.0)\n```\n\n### Dynamic Progress Updates\n\n```rust\nstruct MyComponent {\n progress_value: f32,\n}\n\nimpl MyComponent {\n fn update_progress(&mut self, new_value: f32) {\n self.progress_value = new_value.clamp(0.0, 100.0);\n }\n\n fn render(&mut self, _: &mut Window, cx: &mut Context) -> impl IntoElement {\n v_flex()\n .gap_3()\n .child(\n h_flex()\n .gap_2()\n .child(Button::new(\"decrease\").label(\"-\").on_click(\n cx.listener(|this, _, _, _| {\n this.update_progress(this.progress_value - 10.0);\n })\n ))\n .child(Button::new(\"increase\").label(\"+\").on_click(\n cx.listener(|this, _, _, _| {\n this.update_progress(this.progress_value + 10.0);\n })\n ))\n )\n .child(Progress::new(\"progress\").value(self.progress_value))\n .child(format!(\"{}%\", self.progress_value as i32))\n }\n}\n```\n\n### File Upload Progress\n\n```rust\nstruct FileUpload {\n bytes_uploaded: u64,\n total_bytes: u64,\n}\n\nimpl FileUpload {\n fn progress_percentage(&self) -> f32 {\n if self.total_bytes == 0 {\n 0.0\n } else {\n (self.bytes_uploaded as f32 / self.total_bytes as f32) * 100.0\n }\n }\n\n fn render(&mut self, _: &mut Window, _: &mut Context) -> impl IntoElement {\n v_flex()\n .gap_2()\n .child(\"Uploading file...\")\n .child(Progress::new(\"upload-progress\").value(self.progress_percentage()))\n .child(format!(\n \"{} / {} bytes\",\n self.bytes_uploaded,\n self.total_bytes\n ))\n }\n}\n```\n\n### Loading States\n\n```rust\nstruct LoadingComponent {\n is_loading: bool,\n progress: f32,\n}\n\nimpl LoadingComponent {\n fn render(&mut self, _: &mut Window, _: &mut Context) -> impl IntoElement {\n v_flex()\n .gap_3()\n .when(self.is_loading, |this| {\n this.child(\"Loading...\")\n .child(Progress::new(\"loading-progress\").value(self.progress))\n })\n .when(!self.is_loading, |this| {\n this.child(\"Task completed!\")\n .child(Progress::new(\"loading-progress\").value(100.0))\n })\n }\n}\n```\n\n### Multi-Step Process\n\n```rust\nenum ProcessStep {\n Initializing,\n Processing,\n Finalizing,\n Complete,\n}\n\nstruct MultiStepProcess {\n current_step: ProcessStep,\n step_progress: f32,\n}\n\nimpl MultiStepProcess {\n fn overall_progress(&self) -> f32 {\n let base_progress = match self.current_step {\n ProcessStep::Initializing => 0.0,\n ProcessStep::Processing => 33.33,\n ProcessStep::Finalizing => 66.66,\n ProcessStep::Complete => 100.0,\n };\n\n if matches!(self.current_step, ProcessStep::Complete) {\n 100.0\n } else {\n base_progress + (self.step_progress / 3.0)\n }\n }\n\n fn render(&mut self, _: &mut Window, _: &mut Context) -> impl IntoElement {\n v_flex()\n .gap_3()\n .child(match self.current_step {\n ProcessStep::Initializing => \"Initializing...\",\n ProcessStep::Processing => \"Processing data...\",\n ProcessStep::Finalizing => \"Finalizing...\",\n ProcessStep::Complete => \"Complete!\",\n })\n .child(Progress::new(\"overall-progress\").value(self.overall_progress()))\n .child(format!(\"{:.1}% complete\", self.overall_progress()))\n }\n}\n```\n\n## ProgressCircle\n\nA circular progress indicator component that displays progress as an arc around a circle. Perfect for compact spaces, button icons, or when you want a more modern, space-efficient progress display.\n\n```rust\nuse gpui_component::progress::ProgressCircle;\n```\n\n### Basic ProgressCircle\n\n```rust\nProgressCircle::new(\"my-progress-circle\")\n .value(50.0) // 50% complete\n```\n\n### Different Sizes\n\nProgressCircle supports different sizes through the `Sizable` trait:\n\n```rust\n// Extra small\nProgressCircle::new(\"progress-xs\")\n .value(25.0)\n .xsmall()\n\n// Small\nProgressCircle::new(\"progress-sm\")\n .value(50.0)\n .small()\n\n// Medium (default)\nProgressCircle::new(\"progress-md\")\n .value(75.0)\n .medium()\n\n// Large\nProgressCircle::new(\"progress-lg\")\n .value(100.0)\n .large()\n\n// Custom size\nProgressCircle::new(\"progress-custom\")\n .value(60.0)\n .size(px(80.))\n```\n\n### Custom Colors\n\n```rust\n// Use theme colors (default)\nProgressCircle::new(\"progress-default\")\n .value(50.0)\n\n// Custom color\nProgressCircle::new(\"progress-green\")\n .value(75.0)\n .color(cx.theme().green)\n\n// Different color variants\nProgressCircle::new(\"progress-blue\")\n .value(60.0)\n .color(cx.theme().blue)\n\nProgressCircle::new(\"progress-yellow\")\n .value(40.0)\n .color(cx.theme().yellow)\n\nProgressCircle::new(\"progress-red\")\n .value(80.0)\n .color(cx.theme().red)\n```\n\n### With Labels\n\n```rust\nh_flex()\n .gap_2()\n .items_center()\n .child(\n ProgressCircle::new(\"download-progress\")\n .value(65.0)\n .size_4()\n )\n .child(\"Downloading... 65%\")\n```\n\n## Examples\n\n### Task Progress with Status\n\n```rust\nstruct TaskProgress {\n completed_tasks: usize,\n total_tasks: usize,\n}\n\nimpl TaskProgress {\n fn progress_value(&self) -> f32 {\n if self.total_tasks == 0 {\n 0.0\n } else {\n (self.completed_tasks as f32 / self.total_tasks as f32) * 100.0\n }\n }\n\n fn render(&mut self, _: &mut Window, _: &mut Context) -> impl IntoElement {\n v_flex()\n .gap_2()\n .child(\n h_flex()\n .justify_between()\n .child(\"Task Progress\")\n .child(format!(\"{}/{}\", self.completed_tasks, self.total_tasks))\n )\n .child(Progress::new(\"task-progress\").value(self.progress_value()))\n .when(self.completed_tasks == self.total_tasks, |this| {\n this.child(\"All tasks completed!\")\n })\n }\n}\n```\n\n### Download Progress with Speed\n\n```rust\nstruct DownloadProgress {\n downloaded: u64,\n total_size: u64,\n speed_mbps: f32,\n}\n\nimpl DownloadProgress {\n fn eta_seconds(&self) -> u64 {\n if self.speed_mbps == 0.0 {\n 0\n } else {\n let remaining_mb = (self.total_size - self.downloaded) as f32 / 1_000_000.0;\n (remaining_mb / self.speed_mbps) as u64\n }\n }\n\n fn render(&mut self, _: &mut Window, _: &mut Context) -> impl IntoElement {\n let progress = (self.downloaded as f32 / self.total_size as f32) * 100.0;\n\n v_flex()\n .gap_2()\n .child(\n h_flex()\n .justify_between()\n .child(\"Downloading...\")\n .child(format!(\"{:.1}%\", progress))\n )\n .child(Progress::new(\"download-progress\").value(progress))\n .child(\n h_flex()\n .justify_between()\n .child(format!(\"{:.1} MB/s\", self.speed_mbps))\n .child(format!(\"ETA: {}s\", self.eta_seconds()))\n )\n }\n}\n```\n\n### Installation Progress\n\n```rust\nstruct InstallationProgress {\n current_package: String,\n package_index: usize,\n total_packages: usize,\n package_progress: f32,\n}\n\nimpl InstallationProgress {\n fn overall_progress(&self) -> f32 {\n if self.total_packages == 0 {\n 0.0\n } else {\n let completed_packages = self.package_index as f32;\n let current_package_contribution = self.package_progress / 100.0;\n let total_progress = (completed_packages + current_package_contribution)\n / self.total_packages as f32;\n total_progress * 100.0\n }\n }\n\n fn render(&mut self, _: &mut Window, _: &mut Context) -> impl IntoElement {\n v_flex()\n .gap_3()\n .child(\"Installing packages...\")\n .child(\n v_flex()\n .gap_2()\n .child(\n h_flex()\n .justify_between()\n .child(format!(\"Overall Progress\"))\n .child(format!(\"{}/{}\", self.package_index + 1, self.total_packages))\n )\n .child(Progress::new(\"overall-progress\").value(self.overall_progress()))\n )\n .child(\n v_flex()\n .gap_2()\n .child(format!(\"Installing: {}\", self.current_package))\n .child(Progress::new(\"package-progress\").value(self.package_progress))\n )\n }\n}\n```\n\n## Styling and Theming\n\nThe Progress component automatically adapts to the current theme:\n\n### Theme Colors\n\n```rust\n// The progress bar uses theme colors automatically\n// Background: theme.progress_bar with 20% opacity\n// Fill: theme.progress_bar at full opacity\n\n// These colors adapt to light/dark theme automatically\nProgress::new(\"themed-progress\").value(75.0) // Uses theme colors\n```\n" }, { "path": "docs/docs/components/radio.md", "content": "---\ntitle: Radio\ndescription: A set of checkable buttons—known as radio buttons—where no more than one of the buttons can be checked at a time.\n---\n\n# Radio\n\nRadio buttons allow users to select a single option from a set of mutually exclusive choices. Use radio buttons when you want to give users a choice between multiple options and only one selection is allowed.\n\n## Import\n\n```rust\nuse gpui_component::radio::{Radio, RadioGroup};\n```\n\n## Usage\n\n### Basic Radio Button\n\n```rust\nRadio::new(\"radio-option-1\")\n .label(\"Option 1\")\n .checked(false)\n .on_click(|checked, _, _| {\n println!(\"Radio is now: {}\", checked);\n })\n```\n\n### Controlled Radio Button\n\n```rust\nstruct MyView {\n radio_checked: bool,\n}\n\nimpl Render for MyView {\n fn render(&mut self, _: &mut Window, cx: &mut Context) -> impl IntoElement {\n Radio::new(\"radio\")\n .label(\"Select this option\")\n .checked(self.radio_checked)\n .on_click(cx.listener(|view, checked, _, cx| {\n view.radio_checked = *checked;\n cx.notify();\n }))\n }\n}\n```\n\n### Radio Group (Recommended)\n\n```rust\nstruct MyView {\n selected_option: Option,\n}\n\nimpl Render for MyView {\n fn render(&mut self, _: &mut Window, cx: &mut Context) -> impl IntoElement {\n RadioGroup::horizontal(\"options\")\n .children([\"Option 1\", \"Option 2\", \"Option 3\"])\n .selected_index(self.selected_option)\n .on_change(cx.listener(|view, selected_index: &usize, _, cx| {\n view.selected_option = Some(*selected_index);\n cx.notify();\n }))\n }\n}\n```\n\n### Different Sizes\n\n```rust\nRadio::new(\"small\").label(\"Small\").xsmall()\nRadio::new(\"medium\").label(\"Medium\") // default\nRadio::new(\"large\").label(\"Large\").large()\n```\n\n### Disabled State\n\n```rust\nRadio::new(\"disabled\")\n .label(\"Disabled option\")\n .disabled(true)\n .checked(false)\n\nRadio::new(\"disabled-checked\")\n .label(\"Disabled and checked\")\n .checked(true)\n .disabled(true)\n```\n\n### Multi-line Label with Custom Content\n\n```rust\nRadio::new(\"custom\")\n .label(\"Primary option\")\n .child(\n div()\n .text_color(cx.theme().muted_foreground)\n .child(\"This is additional descriptive text that provides more context.\")\n )\n .w(px(300.))\n```\n\n### Custom Tab Order\n\n```rust\nRadio::new(\"radio\")\n .label(\"Custom tab order\")\n .tab_index(2)\n .tab_stop(true)\n```\n\n## Radio Group Usage\n\n### Horizontal Layout\n\n```rust\nRadioGroup::horizontal(\"horizontal-group\")\n .children([\"First\", \"Second\", \"Third\"])\n .selected_index(Some(0))\n .on_change(cx.listener(|view, index, _, cx| {\n println!(\"Selected index: {}\", index);\n cx.notify();\n }))\n```\n\n### Vertical Layout\n\n```rust\nRadioGroup::vertical(\"vertical-group\")\n .child(Radio::new(\"option1\").label(\"United States\"))\n .child(Radio::new(\"option2\").label(\"Canada\"))\n .child(Radio::new(\"option3\").label(\"Mexico\"))\n .selected_index(Some(1))\n .disabled(false)\n```\n\n### Styled Radio Group\n\n```rust\nRadioGroup::vertical(\"styled-group\")\n .w(px(220.))\n .p_2()\n .border_1()\n .border_color(cx.theme().border)\n .rounded(cx.theme().radius)\n .child(Radio::new(\"option1\").label(\"Option 1\"))\n .child(Radio::new(\"option2\").label(\"Option 2\"))\n .child(Radio::new(\"option3\").label(\"Option 3\"))\n .selected_index(Some(0))\n```\n\n### Disabled Radio Group\n\n```rust\nRadioGroup::vertical(\"disabled-group\")\n .children([\"Option A\", \"Option B\", \"Option C\"])\n .selected_index(Some(1))\n .disabled(true) // Disables all radio buttons in the group\n```\n\n## API Reference\n\n### Radio\n\n| Method | Description |\n| ------------------ | ----------------------------------------------------------- |\n| `new(id)` | Create a new radio button with the given ID |\n| `label(text)` | Set label text |\n| `checked(bool)` | Set checked state |\n| `disabled(bool)` | Set disabled state |\n| `on_click(fn)` | Callback when clicked, receives `&bool` (new checked state) |\n| `tab_stop(bool)` | Enable/disable tab navigation (default: true) |\n| `tab_index(isize)` | Set tab order index (default: 0) |\n\n### RadioGroup\n\n| Method | Description |\n| ------------------------------- | ------------------------------------------------------------------- |\n| `horizontal(id)` | Create a new horizontal radio group |\n| `vertical(id)` | Create a new vertical radio group |\n| `layout(Axis)` | Set layout direction (Vertical or Horizontal) |\n| `child(Radio)` | Add a single radio button to the group |\n| `children(items)` | Add multiple radio buttons from an iterator |\n| `selected_index(Option)` | Set the selected option by index |\n| `disabled(bool)` | Disable all radio buttons in the group |\n| `on_change(fn)` | Callback when selection changes, receives `&usize` (selected index) |\n\n### Styling\n\nBoth Radio and RadioGroup implement `Styled` trait for custom styling:\n\nRadio also implements `Sizable` trait:\n\n- `xsmall()` - Extra small size\n- `small()` - Small size\n- `medium()` - Medium size (default)\n- `large()` - Large size\n\n## Examples\n\n### Settings Panel\n\n```rust\nstruct SettingsView {\n theme: Option, // 0: Light, 1: Dark, 2: Auto\n language: Option, // 0: English, 1: Spanish, 2: French\n}\n\nimpl Render for SettingsView {\n fn render(&mut self, _: &mut Window, cx: &mut Context) -> impl IntoElement {\n v_flex()\n .gap_6()\n .child(\n v_flex()\n .gap_2()\n .child(div().text_sm().font_semibold().child(\"Theme\"))\n .child(\n RadioGroup::vertical(\"theme\")\n .child(Radio::new(\"light\").label(\"Light\"))\n .child(Radio::new(\"dark\").label(\"Dark\"))\n .child(Radio::new(\"auto\").label(\"Auto\"))\n .selected_index(self.theme)\n .on_change(cx.listener(|view, index, _, cx| {\n view.theme = Some(*index);\n cx.notify();\n }))\n )\n )\n .child(\n v_flex()\n .gap_2()\n .child(div().text_sm().font_semibold().child(\"Language\"))\n .child(\n RadioGroup::horizontal(\"language\")\n .children([\"English\", \"Español\", \"Français\"])\n .selected_index(self.language)\n .on_change(cx.listener(|view, index, _, cx| {\n view.language = Some(*index);\n cx.notify();\n }))\n )\n )\n }\n}\n```\n\n### Survey Form\n\n```rust\nstruct SurveyView {\n satisfaction: Option,\n recommendation: Option,\n}\n\nimpl Render for SurveyView {\n fn render(&mut self, _: &mut Window, cx: &mut Context) -> impl IntoElement {\n v_flex()\n .gap_8()\n .child(\n v_flex()\n .gap_3()\n .child(\n div()\n .text_base()\n .font_medium()\n .child(\"How satisfied are you with our service?\")\n )\n .child(\n RadioGroup::vertical(\"satisfaction\")\n .child(Radio::new(\"very-satisfied\").label(\"Very satisfied\"))\n .child(Radio::new(\"satisfied\").label(\"Satisfied\"))\n .child(Radio::new(\"neutral\").label(\"Neutral\"))\n .child(Radio::new(\"dissatisfied\").label(\"Dissatisfied\"))\n .child(Radio::new(\"very-dissatisfied\").label(\"Very dissatisfied\"))\n .selected_index(self.satisfaction)\n .on_change(cx.listener(|view, index, _, cx| {\n view.satisfaction = Some(*index);\n cx.notify();\n }))\n )\n )\n .child(\n v_flex()\n .gap_3()\n .child(\n div()\n .text_base()\n .font_medium()\n .child(\"How likely are you to recommend us?\")\n )\n .child(\n RadioGroup::horizontal(\"recommendation\")\n .children((0..=10).map(|i| i.to_string()))\n .selected_index(self.recommendation)\n .on_change(cx.listener(|view, index, _, cx| {\n view.recommendation = Some(*index);\n cx.notify();\n }))\n )\n )\n }\n}\n```\n\n### Payment Method Selection\n\n```rust\nstruct PaymentView {\n payment_method: Option,\n}\n\nimpl Render for PaymentView {\n fn render(&mut self, _: &mut Window, cx: &mut Context) -> impl IntoElement {\n v_flex()\n .gap_4()\n .child(\n div()\n .text_lg()\n .font_semibold()\n .child(\"Select Payment Method\")\n )\n .child(\n RadioGroup::vertical(\"payment\")\n .child(\n Radio::new(\"credit-card\")\n .label(\"Credit Card\")\n .child(\n div()\n .text_color(cx.theme().muted_foreground)\n .child(\"Visa, MasterCard, American Express\")\n )\n )\n .child(\n Radio::new(\"paypal\")\n .label(\"PayPal\")\n .child(\n div()\n .text_color(cx.theme().muted_foreground)\n .child(\"Pay with your PayPal account\")\n )\n )\n .child(\n Radio::new(\"bank-transfer\")\n .label(\"Bank Transfer\")\n .child(\n div()\n .text_color(cx.theme().muted_foreground)\n .child(\"Direct bank account transfer\")\n )\n )\n .selected_index(self.payment_method)\n .on_change(cx.listener(|view, index, _, cx| {\n view.payment_method = Some(*index);\n cx.notify();\n }))\n )\n }\n}\n```\n\n## Best Practices\n\n1. **Use RadioGroup**: Always prefer `RadioGroup` over individual `Radio` components for mutually exclusive choices\n2. **Clear Labels**: Provide descriptive labels that clearly indicate what each option represents\n3. **Default Selection**: Consider providing a sensible default selection, especially for required fields\n4. **Logical Order**: Arrange options in a logical order (alphabetical, frequency of use, or importance)\n5. **Limit Options**: Keep the number of radio options reasonable (typically 2-7 options)\n6. **Group Related Options**: Use visual grouping and clear headings for multiple radio groups\n7. **Responsive Design**: Consider using horizontal layout for fewer options and vertical for more options\n" }, { "path": "docs/docs/components/rating.md", "content": "---\ntitle: Rating\ndescription: A simple interactive star rating component.\n---\n\n# Rating\n\nA star rating component that allows users to select a rating value. Supports different sizes, custom colors, disabled state, and click handlers.\n\n## Import\n\n```rust\nuse gpui_component::rating::Rating;\n```\n\n## Usage\n\n### Basic Rating\n\n```rust\nRating::new(\"my-rating\")\n .value(3)\n .max(5)\n .on_click(|value, _, _| {\n println!(\"Rating changed to: {}\", value);\n })\n```\n\n### Controlled Rating\n\n```rust\nstruct MyView {\n rating: usize,\n}\n\nimpl Render for MyView {\n fn render(&mut self, _: &mut Window, cx: &mut Context) -> impl IntoElement {\n Rating::new(\"rating\")\n .value(self.rating)\n .max(5)\n .on_click(cx.listener(|view, value: &usize, _, cx| {\n view.rating = *value;\n cx.notify();\n }))\n }\n}\n```\n\n### Different Sizes\n\nThe Rating component supports the [Sizable] trait for different sizes.\n\n```rust\nRating::new(\"rating\").xsmall().value(3).max(5)\nRating::new(\"rating\").small().value(3).max(5)\nRating::new(\"rating\").value(3).max(5) // default (Medium)\nRating::new(\"rating\").large().value(3).max(5)\n```\n\n### Custom Color\n\nBy default, the rating uses the theme's `yellow` color. You can customize it with the `color` method.\n\n```rust\nRating::new(\"rating\")\n .value(4)\n .max(5)\n .color(cx.theme().green)\n```\n\n### Disabled State\n\n```rust\nRating::new(\"rating\")\n .value(2)\n .max(5)\n .disabled(true)\n```\n\n### Custom Maximum\n\nThe default maximum is 5 stars, but you can set a different maximum value.\n\n```rust\nRating::new(\"rating\")\n .value(7)\n .max(10)\n```\n\n### Click Behavior\n\nThe rating component has special click behavior:\n\n- Clicking on a star that's already filled will reduce the rating by 1\n- Clicking on an unfilled star will set the rating to that star's value\n\nThe `on_click` callback receives the new rating value as `&usize`.\n\n```rust\nRating::new(\"rating\")\n .value(3)\n .max(5)\n .on_click(|new_value, _, _| {\n println!(\"New rating: {}\", new_value);\n })\n```\n\n## API Reference\n\n- [Rating]\n\n### Methods\n\n- `new(id: impl Into)` - Create a new Rating component\n- `with_size(size: impl Into)` - Set the star size (implements [Sizable])\n- `value(value: usize)` - Set the initial rating value (0..=max)\n- `max(max: usize)` - Set the maximum number of stars (default: 5)\n- `color(color: impl Into)` - Set the active color (default: theme yellow)\n- `disabled(disabled: bool)` - Disable interaction (implements [Disableable])\n- `on_click(handler: Fn(&usize, &mut Window, &mut App))` - Set click handler\n\n## Examples\n\n### Read-only Display\n\n```rust\nRating::new(\"rating\")\n .value(4)\n .max(5)\n .disabled(true)\n```\n\n### Interactive Rating with State\n\n```rust\nstruct ProductView {\n user_rating: usize,\n}\n\nimpl Render for ProductView {\n fn render(&mut self, _: &mut Window, cx: &mut Context) -> impl IntoElement {\n v_flex()\n .gap_3()\n .child(\n Rating::new(\"product-rating\")\n .value(self.user_rating)\n .max(5)\n .on_click(cx.listener(|view, value: &usize, _, cx| {\n view.user_rating = *value;\n // Save rating to backend, etc.\n cx.notify();\n }))\n )\n .child(format!(\"Your rating: {}/5\", self.user_rating))\n }\n}\n```\n\n### Large Rating with Custom Color\n\n```rust\nRating::new(\"rating\")\n .large()\n .value(5)\n .max(5)\n .color(cx.theme().orange)\n```\n\n[Rating]: https://docs.rs/gpui-component/latest/gpui_component/rating/struct.Rating.html\n[Sizable]: https://docs.rs/gpui-component/latest/gpui_component/trait.Sizable.html\n[Disableable]: https://docs.rs/gpui-component/latest/gpui_component/trait.Disableable.html\n" }, { "path": "docs/docs/components/resizable.md", "content": "---\ntitle: Resizable\ndescription: A flexible panel layout system with draggable resize handles and adjustable panels.\n---\n\n# Resizable\n\nThe resizable component system provides a flexible way to create layouts with resizable panels. It supports both horizontal and vertical resizing, nested layouts, size constraints, and drag handles. Perfect for creating paned interfaces, split views, and adjustable dashboards.\n\n## Import\n\n```rust\nuse gpui_component::resizable::{\n h_resizable, v_resizable, resizable_panel,\n ResizablePanelGroup, ResizablePanel, ResizableState, ResizablePanelEvent\n};\n```\n\n## Usage\n\nUse `h_resizable` to create a horizontal layout, `v_resizable` to create a vertical layout.\n\nThe first argument is the `id` for this [ResizablePanelGroup].\n\n:::tip\nIn GPUI, the `id` must be unique within the layout scope (The nearest parent has presents `id`).\n:::\n\n```rust\nh_resizable(\"my-layout\")\n .on_resize(|state, window, cx| {\n // Handle resize event\n // You can read the panel sizes from the state.\n let state = state.read(cx);\n let sizes = state.sizes();\n })\n .child(\n // Use resizable_panel() to create a sized panel.\n resizable_panel()\n .size(px(200.))\n .child(\"Left Panel\")\n )\n .child(\n // Or you can just add AnyElement without a size.\n div()\n .child(\"Right Panel\")\n .into_any_element()\n )\n```\n\nThe `v_resizable` component is used to create a vertical layout.\n\n```rust\nv_resizable(\"vertical-layout\")\n .child(\n resizable_panel()\n .size(px(100.))\n .child(\"Top Panel\")\n )\n .child(\n div()\n .child(\"Bottom Panel\")\n .into_any_element()\n )\n```\n\n### Panel Size Constraints\n\n```rust\nresizable_panel()\n .size(px(200.)) // Initial size\n .size_range(px(150.)..px(400.)) // Min and max size\n .child(\"Constrained Panel\")\n```\n\n### Multiple Panels\n\n```rust\nh_resizable(\"multi-panel\", state)\n .child(\n resizable_panel()\n .size(px(200.))\n .size_range(px(150.)..px(300.))\n .child(\"Left Panel\")\n )\n .child(\n resizable_panel()\n .child(\"Center Panel\")\n )\n .child(\n resizable_panel()\n .size(px(250.))\n .child(\"Right Panel\")\n )\n```\n\n### Nested Layouts\n\n```rust\nv_resizable(\"main-layout\", window, cx)\n .child(\n resizable_panel()\n .size(px(300.))\n .child(\n h_resizable(\"nested-layout\", window, cx)\n .child(\n resizable_panel()\n .size(px(200.))\n .child(\"Top Left\")\n )\n .child(\n resizable_panel()\n .child(\"Top Right\")\n )\n )\n )\n .child(\n resizable_panel()\n .child(\"Bottom Panel\")\n )\n```\n\n### Nested Panel Groups\n\n```rust\nh_resizable(\"outer\", window, cx)\n .child(\n resizable_panel()\n .size(px(200.))\n .child(\"Left Panel\")\n )\n .group(\n v_resizable(\"inner\", window, cx)\n .child(\n resizable_panel()\n .size(px(150.))\n .child(\"Top Right\")\n )\n .child(\n resizable_panel()\n .child(\"Bottom Right\")\n )\n )\n```\n\n### Conditional Panel Visibility\n\n```rust\nresizable_panel()\n .visible(self.show_sidebar)\n .size(px(250.))\n .child(\"Sidebar Content\")\n```\n\n### Panel with Size Limits\n\n```rust\n// Panel with minimum size only\nresizable_panel()\n .size_range(px(100.)..Pixels::MAX)\n .child(\"Flexible Panel\")\n\n// Panel with both min and max\nresizable_panel()\n .size_range(px(200.)..px(500.))\n .child(\"Constrained Panel\")\n\n// Panel with exact constraints\nresizable_panel()\n .size(px(300.))\n .size_range(px(300.)..px(300.)) // Fixed size\n .child(\"Fixed Panel\")\n```\n\n## Examples\n\n### File Explorer Layout\n\n```rust\nstruct FileExplorer {\n show_sidebar: bool,\n}\n\nimpl Render for FileExplorer {\n fn render(&mut self, _: &mut Window, cx: &mut Context) -> impl IntoElement {\n h_resizable(\"file-explorer\", window, cx)\n .child(\n resizable_panel()\n .visible(self.show_sidebar)\n .size(px(250.))\n .size_range(px(200.)..px(400.))\n .child(\n v_flex()\n .p_4()\n .child(\"📁 Folders\")\n .child(\"• Documents\")\n .child(\"• Pictures\")\n .child(\"• Downloads\")\n )\n )\n .child(\n v_flex()\n .p_4()\n .child(\"📄 Files\")\n .child(\"file1.txt\")\n .child(\"file2.pdf\")\n .child(\"image.png\")\n .into_any_element()\n )\n }\n}\n```\n\n### IDE Layout\n\n```rust\nstruct IDELayout {\n main_state: Entity,\n sidebar_state: Entity,\n bottom_state: Entity,\n}\n\nimpl Render for IDELayout {\n fn render(&mut self, _: &mut Window, _: &mut Context) -> impl IntoElement {\n h_resizable(\"ide-main\", self.main_state.clone())\n .child(\n resizable_panel()\n .size(px(300.))\n .size_range(px(200.)..px(500.))\n .child(\n v_resizable(\"sidebar\", self.sidebar_state.clone())\n .child(\n resizable_panel()\n .size(px(200.))\n .child(\"File Explorer\")\n )\n .child(\n resizable_panel()\n .child(\"Outline\")\n )\n )\n )\n .child(\n resizable_panel()\n .child(\n v_resizable(\"editor-area\", self.bottom_state.clone())\n .child(\n resizable_panel()\n .child(\"Code Editor\")\n )\n .child(\n resizable_panel()\n .size(px(150.))\n .size_range(px(100.)..px(300.))\n .child(\"Terminal / Output\")\n )\n )\n )\n }\n}\n```\n\n### Dashboard with Widgets\n\n```rust\nstruct Dashboard {\n layout_state: Entity,\n widget_state: Entity,\n}\n\nimpl Render for Dashboard {\n fn render(&mut self, _: &mut Window, _: &mut Context) -> impl IntoElement {\n v_resizable(\"dashboard\", self.layout_state.clone())\n .child(\n resizable_panel()\n .size(px(120.))\n .child(\"Header / Navigation\")\n )\n .child(\n resizable_panel()\n .child(\n h_resizable(\"widgets\", self.widget_state.clone())\n .child(\n resizable_panel()\n .size(px(300.))\n .child(\"Chart Widget\")\n )\n .child(\n resizable_panel()\n .child(\"Data Table\")\n )\n .child(\n resizable_panel()\n .size(px(250.))\n .child(\"Stats Panel\")\n )\n )\n )\n .child(\n resizable_panel()\n .size(px(60.))\n .child(\"Footer\")\n )\n }\n}\n```\n\n### Settings Panel\n\n```rust\nstruct SettingsPanel {\n settings_state: Entity,\n}\n\nimpl SettingsPanel {\n fn new(cx: &mut Context) -> Self {\n let settings_state = ResizableState::new(cx);\n\n // Listen for resize events to save layout preferences\n cx.subscribe(&settings_state, |this, _, event: &ResizablePanelEvent, cx| {\n match event {\n ResizablePanelEvent::Resized => {\n this.save_layout_preferences(cx);\n }\n }\n });\n\n Self { settings_state }\n }\n\n fn save_layout_preferences(&self, cx: &mut Context) {\n let sizes = self.settings_state.read(cx).sizes();\n // Save to preferences\n println!(\"Saving layout: {:?}\", sizes);\n }\n}\n\nimpl Render for SettingsPanel {\n fn render(&mut self, _: &mut Window, _: &mut Context) -> impl IntoElement {\n h_resizable(\"settings\", self.settings_state.clone())\n .child(\n resizable_panel()\n .size(px(200.))\n .size_range(px(150.)..px(300.))\n .child(\n v_flex()\n .gap_2()\n .p_4()\n .child(\"Categories\")\n .child(\"• General\")\n .child(\"• Appearance\")\n .child(\"• Advanced\")\n )\n )\n .child(\n resizable_panel()\n .child(\n div()\n .p_6()\n .child(\"Settings Content Area\")\n )\n )\n }\n}\n```\n\n## Best Practices\n\n1. **State Management**: Use separate ResizableState for independent layouts\n2. **Size Constraints**: Always set reasonable min/max sizes for panels\n3. **Event Handling**: Subscribe to ResizablePanelEvent for layout persistence\n4. **Nested Layouts**: Use `.group()` method for clean nested structures\n5. **Performance**: Avoid excessive nesting for better performance\n6. **User Experience**: Provide adequate handle padding for easier interaction\n" }, { "path": "docs/docs/components/scrollable.md", "content": "---\ntitle: Scrollable\ndescription: Scrollable container with custom scrollbars, scroll tracking, and virtualization support.\n---\n\n# Scrollable\n\nA comprehensive scrollable container component that provides custom scrollbars, scroll tracking, and virtualization capabilities. Supports both vertical and horizontal scrolling with customizable appearance and behavior.\n\n## Import\n\n```rust\nuse gpui_component::{\n scroll::{ScrollableElement, ScrollbarAxis, ScrollbarShow},\n StyledExt as _,\n};\n```\n\n## Usage\n\n### Basic Scrollable Container\n\nThe simplest way to make any element scrollable is using the `overflow_scrollbar()` method from `ScrollableElement` trait.\n\nThis method is almost like the `overflow_scroll()` method, but it adds scrollbars.\n\n- `overflow_scrollbar()` - Adds scrollbars for both axes as needed.\n- `overflow_x_scrollbar()` - Adds horizontal scrollbar as needed.\n- `overflow_y_scrollbar()` - Adds vertical scrollbar as needed.\n\n```rust\nuse gpui::{div, Axis};\nuse gpui_component::ScrollableElement;\n\ndiv()\n .id(\"scrollable-container\")\n .size_full()\n .child(\"Your content here\")\n .overflow_scrollbar()\n```\n\n### Vertical Scrolling\n\n```rust\nv_flex()\n .id(\"scrollable-container\")\n .overflow_y_scrollbar()\n .gap_2()\n .p_4()\n .child(\"Scrollable Content\")\n .children((0..100).map(|i| {\n div()\n .h(px(40.))\n .w_full()\n .bg(cx.theme().secondary)\n .child(format!(\"Item {}\", i))\n }))\n```\n\n### Horizontal Scrolling\n\n```rust\nh_flex()\n .id(\"scrollable-container\")\n .overflow_x_scrollbar()\n .gap_2()\n .p_4()\n .children((0..50).map(|i| {\n div()\n .min_w(px(120.))\n .h(px(80.))\n .bg(cx.theme().accent)\n .child(format!(\"Card {}\", i))\n }))\n```\n\n### Both Directions\n\n```rust\ndiv()\n .id(\"scrollable-container\")\n .size_full()\n .overflow_scrollbar()\n .child(\n div()\n .w(px(2000.)) // Wide content\n .h(px(2000.)) // Tall content\n .bg(cx.theme().background)\n .child(\"Large content area\")\n )\n```\n\n## Custom Scrollbars\n\n### Manual Scrollbar Creation\n\nFor more control, you can create scrollbars manually:\n\n```rust\nuse gpui_component::scroll::{ScrollableElement};\n\npub struct ScrollableView {\n scroll_handle: ScrollHandle,\n}\n\nimpl Render for ScrollableView {\n fn render(&mut self, _: &mut Window, cx: &mut Context) -> impl IntoElement {\n div()\n .relative()\n .size_full()\n .child(\n div()\n .id(\"content\")\n .track_scroll(&self.scroll_handle)\n .overflow_scroll()\n .size_full()\n .child(\"Your scrollable content\")\n )\n .vertical_scrollbar(&self.scroll_handle)\n }\n}\n```\n\n## Virtualization\n\n### VirtualList for Large Datasets\n\nFor rendering large lists efficiently, use `VirtualList`:\n\n```rust\nuse gpui_component::{VirtualList, VirtualListScrollHandle};\n\npub struct LargeListView {\n items: Vec,\n scroll_handle: VirtualListScrollHandle,\n}\n\nimpl Render for LargeListView {\n fn render(&mut self, _: &mut Window, cx: &mut Context) -> impl IntoElement {\n let item_count = self.items.len();\n\n VirtualList::new(\n self.scroll_handle.clone(),\n item_count,\n |ix, window, cx| {\n // Item sizes - can be different for each item\n size(px(300.), px(40.))\n },\n |ix, bounds, selected, window, cx| {\n // Render each item\n div()\n .size(bounds.size)\n .bg(if selected {\n cx.theme().accent\n } else {\n cx.theme().background\n })\n .child(format!(\"Item {}: {}\", ix, self.items[ix]))\n .into_any_element()\n },\n )\n }\n}\n```\n\n### Scrolling to Specific Items\n\n```rust\nimpl LargeListView {\n fn scroll_to_item(&mut self, index: usize) {\n self.scroll_handle.scroll_to_item(index, ScrollStrategy::Top);\n }\n\n fn scroll_to_item_centered(&mut self, index: usize) {\n self.scroll_handle.scroll_to_item(index, ScrollStrategy::Center);\n }\n}\n```\n\n### Variable Item Sizes\n\n```rust\nVirtualList::new(\n scroll_handle,\n items.len(),\n |ix, window, cx| {\n // Different heights based on content\n let height = if items[ix].len() > 50 {\n px(80.) // Tall items for long content\n } else {\n px(40.) // Normal height\n };\n size(px(300.), height)\n },\n |ix, bounds, selected, window, cx| {\n // Render logic\n },\n)\n```\n\n## Theme Customization\n\n### Scrollbar Appearance\n\nCustomize scrollbar appearance through theme configuration:\n\n```rust\n// In your theme JSON\n{\n \"scrollbar.background\": \"#ffffff20\",\n \"scrollbar.thumb.background\": \"#00000060\",\n \"scrollbar.thumb.hover.background\": \"#000000\"\n}\n```\n\n### Scrollbar Show Modes\n\nControl when scrollbars are visible:\n\n```rust\nuse gpui_component::scroll::ScrollbarShow;\n\n// In theme initialization\ntheme.scrollbar_show = ScrollbarShow::Scrolling; // Show only when scrolling\ntheme.scrollbar_show = ScrollbarShow::Hover; // Show on hover\ntheme.scrollbar_show = ScrollbarShow::Always; // Always visible\n```\n\n### System Integration\n\nSync scrollbar behavior with system preferences:\n\n```rust\n// Automatically sync with system settings\nTheme::sync_scrollbar_appearance(cx);\n```\n\n## Examples\n\n### File Browser with Scrolling\n\n```rust\npub struct FileBrowser {\n files: Vec,\n}\n\nimpl Render for FileBrowser {\n fn render(&mut self, _: &mut Window, cx: &mut Context) -> impl IntoElement {\n div()\n .border_1()\n .border_color(cx.theme().border)\n .size_full()\n .child(\n v_flex()\n .gap_1()\n .p_2()\n .overflow_y_scrollbar()\n .children(self.files.iter().map(|file| {\n div()\n .h(px(32.))\n .w_full()\n .px_2()\n .flex()\n .items_center()\n .hover(|style| style.bg(cx.theme().secondary_hover))\n .child(file.clone())\n }))\n )\n }\n}\n```\n\n### Chat Messages with Auto-scroll\n\n```rust\npub struct ChatView {\n messages: Vec,\n scroll_handle: ScrollHandle,\n should_auto_scroll: bool,\n}\n\nimpl ChatView {\n fn add_message(&mut self, message: String) {\n self.messages.push(message);\n\n if self.should_auto_scroll {\n // Scroll to bottom for new messages\n let max_offset = self.scroll_handle.max_offset();\n self.scroll_handle.set_offset(point(px(0.), max_offset.y));\n }\n }\n}\n```\n\n### Data Table with Virtual Scrolling\n\n```rust\npub struct DataTable {\n data: Vec>,\n scroll_handle: VirtualListScrollHandle,\n}\n\nimpl Render for DataTable {\n fn render(&mut self, _: &mut Window, cx: &mut Context) -> impl IntoElement {\n VirtualList::new(\n self.scroll_handle.clone(),\n self.data.len(),\n |_ix, _window, _cx| size(px(800.), px(32.)), // Fixed row height\n |ix, bounds, _selected, _window, cx| {\n h_flex()\n .size(bounds.size)\n .border_b_1()\n .border_color(cx.theme().border)\n .children(self.data[ix].iter().map(|cell| {\n div()\n .flex_1()\n .px_2()\n .flex()\n .items_center()\n .child(cell.clone())\n }))\n .into_any_element()\n },\n )\n }\n}\n```\n" }, { "path": "docs/docs/components/select.md", "content": "---\ntitle: Select\ndescription: Displays a list of options for the user to pick from—triggered by a button.\n---\n\n# Select\n\n:::info\nThis component was named `Dropdown` in `<= 0.3.x`.\n\nIt has been renamed to `Select` to better reflect its purpose.\n:::\n\nA select component that allows users to choose from a list of options.\n\nSupports search functionality, grouped items, custom rendering, and various states. Built with keyboard navigation and accessibility in mind.\n\n## Import\n\n```rust\nuse gpui_component::select::{\n Select, SelectState, SelectItem, SelectDelegate,\n SelectEvent, SearchableVec, SelectGroup\n};\n```\n\n## Usage\n\n### Basic Select\n\nYou can create a basic select dropdown by initializing a `SelectState` with a list of items.\n\nThe first type parameter of `SelectState` is the items for the state, which must implement the [SelectItem] trait.\n\nThe built-in implementations of `SelectItem` include common types like `String`, `SharedString`, and `&'static str`.\n\n```rust\nlet state = cx.new(|cx| {\n SelectState::new(\n vec![\"Apple\", \"Orange\", \"Banana\"],\n Some(IndexPath::default()), // Select first item\n window,\n cx,\n )\n});\n\nSelect::new(&state)\n```\n\n### Placeholder\n\n```rust\nlet state = cx.new(|cx| {\n SelectState::new(\n vec![\"Rust\", \"Go\", \"JavaScript\"],\n None, // No initial selection\n window,\n cx,\n )\n});\n\nSelect::new(&state)\n .placeholder(\"Select a language...\")\n```\n\n### Searchable\n\nUse `searchable(true)` to enable search functionality within the dropdown.\n\n```rust\nlet fruits = SearchableVec::new(vec![\n \"Apple\", \"Orange\", \"Banana\", \"Grape\", \"Pineapple\",\n]);\n\nlet state = cx.new(|cx| {\n SelectState::new(fruits, None, window, cx).searchable(true)\n});\n\nSelect::new(&state)\n .icon(IconName::Search) // Shows search icon\n```\n\n### Impl SelectItem\n\nBy default, we have implmemented `SelectItem` for common types like `String`, `SharedString` and `&'static str`. You can also create your own item types by implementing the `SelectItem` trait.\n\nThis is useful when you want to display complex data structures, and also want get that data type from `select_value` method.\n\nYou can also customize the search logic by overriding the `matches` method.\n\n```rust\n#[derive(Debug, Clone)]\nstruct Country {\n name: SharedString,\n code: SharedString,\n}\n\nimpl SelectItem for Country {\n type Value = SharedString;\n\n fn title(&self) -> SharedString {\n self.name.clone()\n }\n\n fn display_title(&self) -> Option {\n // Custom display for selected item\n Some(format!(\"{} ({})\", self.name, self.code).into_any_element())\n }\n\n fn value(&self) -> &Self::Value {\n &self.code\n }\n\n fn matches(&self, query: &str) -> bool {\n // Custom search logic\n self.name.to_lowercase().contains(&query.to_lowercase()) ||\n self.code.to_lowercase().contains(&query.to_lowercase())\n }\n}\n```\n\n### Group Items\n\n```rust\nlet mut grouped_items = SearchableVec::new(vec![]);\n\n// Group countries by first letter\ngrouped_items.push(\n SelectGroup::new(\"A\")\n .items(vec![\n Country { name: \"Australia\".into(), code: \"AU\".into() },\n Country { name: \"Austria\".into(), code: \"AT\".into() },\n ])\n);\ngrouped_items.push(\n SelectGroup::new(\"B\")\n .items(vec![\n Country { name: \"Brazil\".into(), code: \"BR\".into() },\n Country { name: \"Belgium\".into(), code: \"BE\".into() },\n ])\n);\n\nlet state = cx.new(|cx| {\n SelectState::new(grouped_items, None, window, cx)\n});\n\nSelect::new(&state)\n```\n\n### Sizes\n\n```rust\nSelect::new(&state).large()\nSelect::new(&state) // medium (default)\nSelect::new(&state).small()\n```\n\n### Disabled State\n\n```rust\nSelect::new(&state).disabled(true)\n```\n\n### Cleanable\n\n```rust\nSelect::new(&state)\n .cleanable(true) // Show clear button when item is selected\n```\n\n### Custom Appearance\n\n```rust\nSelect::new(&state)\n .w(px(320.)) // Set dropdown width\n .menu_width(px(400.)) // Set menu popup width\n .appearance(false) // Remove default styling\n .title_prefix(\"Country: \") // Add prefix to selected title\n```\n\n### Empty State\n\n```rust\nlet state = cx.new(|cx| {\n SelectState::new(Vec::::new(), None, window, cx)\n});\n\nSelect::new(&state)\n .empty(\n h_flex()\n .h_24()\n .justify_center()\n .text_color(cx.theme().muted_foreground)\n .child(\"No options available\")\n )\n```\n\n### Events\n\n```rust\ncx.subscribe_in(&state, window, |view, state, event, window, cx| {\n match event {\n SelectEvent::Confirm(value) => {\n if let Some(selected_value) = value {\n println!(\"Selected: {:?}\", selected_value);\n } else {\n println!(\"Selection cleared\");\n }\n }\n }\n});\n```\n\n### Mutating\n\n```rust\n// Set by index\nstate.update(cx, |state, cx| {\n state.set_selected_index(Some(IndexPath::default().row(2)), window, cx);\n});\n\n// Set by value (requires PartialEq on Value type)\nstate.update(cx, |state, cx| {\n state.set_selected_value(&\"US\".into(), window, cx);\n});\n\n// Get current selection\nlet current_value = state.read(cx).selected_value();\n```\n\nUpdate items:\n\n```rust\nstate.update(cx, |state, cx| {\n let new_items = vec![\"New Option 1\".into(), \"New Option 2\".into()];\n state.set_items(new_items, window, cx);\n});\n```\n\n## Examples\n\n### Language Selector\n\n```rust\nlet languages = SearchableVec::new(vec![\n \"Rust\".into(),\n \"TypeScript\".into(),\n \"Go\".into(),\n \"Python\".into(),\n \"JavaScript\".into(),\n]);\n\nlet state = cx.new(|cx| {\n SelectState::new(languages, None, window, cx)\n});\n\nSelect::new(&state)\n .placeholder(\"Select language...\")\n .title_prefix(\"Language: \")\n```\n\n### Country/Region Selector\n\n```rust\n#[derive(Debug, Clone)]\nstruct Region {\n name: SharedString,\n code: SharedString,\n flag: SharedString,\n}\n\nimpl SelectItem for Region {\n type Value = SharedString;\n\n fn title(&self) -> SharedString {\n self.name.clone()\n }\n\n fn display_title(&self) -> Option {\n Some(\n h_flex()\n .items_center()\n .gap_2()\n .child(self.flag.clone())\n .child(format!(\"{} ({})\", self.name, self.code))\n .into_any_element()\n )\n }\n\n fn value(&self) -> &Self::Value {\n &self.code\n }\n}\n\nlet regions = vec![\n Region {\n name: \"United States\".into(),\n code: \"US\".into(),\n flag: \"🇺🇸\".into()\n },\n Region {\n name: \"Canada\".into(),\n code: \"CA\".into(),\n flag: \"🇨🇦\".into()\n },\n];\n\nlet state = cx.new(|cx| {\n SelectState::new(regions, None, window, cx)\n});\n\nSelect::new(&state)\n .placeholder(\"Select country...\")\n```\n\n### Integrated with Input Field\n\n```rust\n// Combined country code + phone input\nh_flex()\n .border_1()\n .border_color(cx.theme().input)\n .rounded(cx.theme().radius_lg)\n .w_full()\n .gap_1()\n .child(\n div().w(px(140.)).child(\n Select::new(&country_state)\n .appearance(false) // No border/background\n .py_2()\n .pl_3()\n )\n )\n .child(Divider::vertical())\n .child(\n div().flex_1().child(\n Input::new(&phone_input)\n .appearance(false)\n .placeholder(\"Phone number\")\n .pr_3()\n .py_2()\n )\n )\n```\n\n### Multi-level Grouped Select\n\n```rust\nlet mut grouped_countries = SearchableVec::new(vec![]);\n\nfor (continent, countries) in countries_by_continent {\n grouped_countries.push(\n SelectGroup::new(continent)\n .items(countries)\n );\n}\n\nlet state = cx.new(|cx| {\n SelectState::new(grouped_countries, None, window, cx)\n});\n\nSelect::new(&state)\n .menu_width(px(350.))\n .placeholder(\"Select country...\")\n```\n\n## Keyboard Shortcuts\n\n| Key | Action |\n| --------- | --------------------------------------- |\n| `Tab` | Focus dropdown |\n| `Enter` | Open menu or select current item |\n| `Up/Down` | Navigate options (opens menu if closed) |\n| `Escape` | Close menu |\n| `Space` | Open menu |\n\n## Theming\n\nThe dropdown respects the current theme and uses the following theme tokens:\n\n- `background` - Dropdown input background\n- `input` - Border color\n- `foreground` - Text color\n- `muted_foreground` - Placeholder and disabled text\n- `accent` - Selected item background\n- `accent_foreground` - Placeholder text color\n- `border` - Menu border\n- `radius` - Border radius\n\n[SelectItem]: https://docs.rs/gpui-component/latest/gpui_component/select/trait.SelectItem.html\n" }, { "path": "docs/docs/components/settings.md", "content": "---\ntitle: Settings\ndescription: A settings UI with grouped setting items and pages.\n---\n\n# Settings\n\n> Since: v0.5.0\n\nThe Settings component provides a UI for managing application settings. It includes grouped setting items and pages.\nWe can search by title and description to filter the settings to display only relevant settings (Like this macOS, iOS Settings).\n\n## Import\n\n```rust\nuse gpui_component::setting::{Settings, SettingPage, SettingGroup, SettingItem, SettingField};\n```\n\n## Usage\n\n### Build a settings\n\nHere we have components that can be used to build a settings page.\n\n- [Settings] - The main settings component that holds multiple setting pages.\n- [SettingPage] - A page of related setting groups.\n- [SettingGroup] - A group of related setting items based on [GroupBox] style.\n- [SettingItem] - A single setting item with title, description, and field.\n- [SettingField] - Provide different field types like Input, Dropdown, Switch, etc.\n\nThe layout of the settings is like this:\n\n```\nSettings\n SettingPage\n SettingGroup\n SettingItem\n Title\n Description (optional)\n SettingField\n```\n\n### Basic Settings\n\n```rust\nuse gpui_component::setting::{Settings, SettingPage, SettingGroup, SettingItem, SettingField};\n\nSettings::new(\"my-settings\")\n .pages(vec![\n SettingPage::new(\"General\")\n .group(\n SettingGroup::new()\n .title(\"Basic Options\")\n .item(\n SettingItem::new(\n \"Enable Feature\",\n SettingField::switch(\n |cx: &App| true,\n |val: bool, cx: &mut App| {\n println!(\"Feature enabled: {}\", val);\n },\n )\n )\n )\n )\n ])\n```\n\n### With Multiple Pages\n\n:::info\nWhen you want default expland a page, you can use `default_open(true)` on the [SettingPage].\n:::\n\n```rust\nSettings::new(\"app-settings\")\n .pages(vec![\n SettingPage::new(\"General\")\n .default_open(true)\n .group(SettingGroup::new().title(\"Appearance\").items(vec![...])),\n SettingPage::new(\"Software Update\")\n .group(SettingGroup::new().title(\"Updates\").items(vec![...])),\n SettingPage::new(\"About\")\n .group(SettingGroup::new().items(vec![...])),\n ])\n```\n\n### Group Variants\n\n```rust\nuse gpui_component::group_box::GroupBoxVariant;\n\nSettings::new(\"my-settings\")\n .with_group_variant(GroupBoxVariant::Outline)\n .pages(vec![...])\n\nSettings::new(\"my-settings\")\n .with_group_variant(GroupBoxVariant::Fill)\n .pages(vec![...])\n```\n\n## Setting Page\n\n### Basic Page\n\n```rust\nSettingPage::new(\"General\")\n .group(SettingGroup::new().title(\"Options\").items(vec![...]))\n```\n\n### Multiple Groups\n\n```rust\nSettingPage::new(\"General\")\n .groups(vec![\n SettingGroup::new().title(\"Appearance\").items(vec![...]),\n SettingGroup::new().title(\"Font\").items(vec![...]),\n SettingGroup::new().title(\"Other\").items(vec![...]),\n ])\n```\n\n### Icon\n\n```rust\nSettingPage::new(\"General\")\n .icon(IconName::Settings)\n .groups(vec![...])\n```\n\n### Default Open\n\n```rust\nSettingPage::new(\"General\")\n .default_open(true)\n .groups(vec![...])\n```\n\n### resettable\n\nEnable reset functionality for a page:\n\n```rust\nSettingPage::new(\"General\")\n .resettable(true)\n .groups(vec![...])\n```\n\n## Setting Group\n\n### Basic Group\n\n```rust\nSettingGroup::new()\n .title(\"Appearance\")\n .items(vec![\n SettingItem::new(...),\n SettingItem::new(...),\n ])\n```\n\n### Single Item\n\n```rust\nSettingGroup::new()\n .title(\"Font\")\n .item(SettingItem::new(...))\n```\n\n### Without Title\n\n```rust\nSettingGroup::new()\n .items(vec![...])\n```\n\n## Setting Item\n\n### Basic Item\n\n```rust\nSettingItem::new(\"Title\", SettingField::switch(...))\n .description(\"Description text\")\n```\n\n### Custom Item with a render closure\n\nYou can create a fully custom setting item using `SettingItem::render`:\n\n```rust\nSettingItem::render(|options, _, _| {\n h_flex()\n .w_full()\n .justify_between()\n .child(\"Custom content\")\n .child(\n Button::new(\"action\")\n .label(\"Action\")\n .with_size(options.size)\n )\n .into_any_element()\n})\n```\n\n### Vertical Layout\n\nBy default, setting items use horizontal layout. Use `layout(Axis::Vertical)` for vertical layout:\n\n```rust\nSettingItem::new(\n \"CLI Path\",\n SettingField::input(...)\n)\n.layout(Axis::Vertical)\n.description(\"This item uses vertical layout.\")\n```\n\n### With Markdown Description\n\n```rust\nuse gpui_component::text::markdown;\n\nSettingItem::new(\n \"Documentation\",\n SettingField::element(...)\n)\n.description(markdown(\"Rust doc for the `gpui-component` crate.\"))\n```\n\n## Setting Fields\n\nThe [SettingField] enum provides different field types for various input needs.\n\n### Switch\n\nThe switch field represents a `boolean` on/off state.\n\n```rust\nSettingItem::new(\n \"Dark Mode\",\n SettingField::switch(\n |cx: &App| cx.theme().mode.is_dark(),\n |val: bool, cx: &mut App| {\n // Handle value change\n },\n )\n .default_value(false)\n)\n```\n\n### Checkbox\n\nLike the switch, but uses a checkbox UI.\n\n```rust\nSettingItem::new(\n \"Auto Switch Theme\",\n SettingField::checkbox(\n |cx: &App| AppSettings::global(cx).auto_switch_theme,\n |val: bool, cx: &mut App| {\n AppSettings::global_mut(cx).auto_switch_theme = val;\n },\n )\n .default_value(false)\n)\n```\n\n### Input\n\nDisplay a single line text input.\n\n```rust\nSettingItem::new(\n \"CLI Path\",\n SettingField::input(\n |cx: &App| AppSettings::global(cx).cli_path.clone(),\n |val: SharedString, cx: &mut App| {\n AppSettings::global_mut(cx).cli_path = val;\n },\n )\n .default_value(\"/usr/local/bin/bash\".into())\n)\n.layout(Axis::Vertical)\n.description(\"Path to the CLI executable.\")\n```\n\n### Dropdown\n\nA dropdown with a list of options.\n\n```rust\nSettingItem::new(\n \"Font Family\",\n SettingField::dropdown(\n vec![\n (\"Arial\".into(), \"Arial\".into()),\n (\"Helvetica\".into(), \"Helvetica\".into()),\n (\"Times New Roman\".into(), \"Times New Roman\".into()),\n ],\n |cx: &App| AppSettings::global(cx).font_family.clone(),\n |val: SharedString, cx: &mut App| {\n AppSettings::global_mut(cx).font_family = val;\n },\n )\n .default_value(\"Arial\".into())\n)\n```\n\n### NumberInput\n\n```rust\nuse gpui_component::setting::NumberFieldOptions;\n\nSettingItem::new(\n \"Font Size\",\n SettingField::number_input(\n NumberFieldOptions {\n min: 8.0,\n max: 72.0,\n ..Default::default()\n },\n |cx: &App| AppSettings::global(cx).font_size,\n |val: f64, cx: &mut App| {\n AppSettings::global_mut(cx).font_size = val;\n },\n )\n .default_value(14.0)\n)\n```\n\n### Custom Field by Render Closure\n\nThe `SettingField::render` method allows you to create a custom field using a closure that returns an element.\n\n```rust\nSettingItem::new(\n \"GitHub Repository\",\n SettingField::render(|options, _window, _cx| {\n Button::new(\"open-url\")\n .outline()\n .label(\"Repository...\")\n .with_size(options.size)\n .on_click(|_, _window, cx| {\n cx.open_url(\"https://github.com/example/repo\");\n })\n })\n)\n```\n\n### Custom Field Element\n\nYou may have a complex field that you want to reuse, you may want split the element into a separate struct to do the complex logic.\n\nIn this case, the [SettingFieldElement] trait can help you to create a custom field element.\n\n```rust\nuse gpui_component::setting::{SettingFieldElement, RenderOptions};\n\nstruct OpenURLSettingField {\n label: SharedString,\n url: SharedString,\n}\n\nimpl SettingFieldElement for OpenURLSettingField {\n type Element = Button;\n\n fn render_field(&self, options: &RenderOptions, _: &mut Window, _: &mut App) -> Self::Element {\n let url = self.url.clone();\n Button::new(\"open-url\")\n .outline()\n .label(self.label.clone())\n .with_size(options.size)\n .on_click(move |_, _window, cx| {\n cx.open_url(url.as_str());\n })\n }\n}\n```\n\nThen use it in the setting item:\n\n```rust\nSettingItem::new(\n \"GitHub Repository\",\n SettingField::element(OpenURLSettingField {\n label: \"Repository...\".into(),\n url: \"https://github.com/longbridge/gpui-component\".into(),\n })\n)\n```\n\n## API Reference\n\n- [Settings]\n- [SettingPage]\n- [SettingGroup]\n- [SettingItem]\n- [SettingField]\n- [NumberFieldOptions]\n\n### Sizing\n\nImplements [Sizable] trait:\n\n- `xsmall()` - Extra small size\n- `small()` - Small size\n- `medium()` - Medium size (default)\n- `large()` - Large size\n- `with_size(Size)` - Set specific size\n\n## Examples\n\n### Complete Settings Example\n\n```rust\nuse gpui::{App, SharedString};\nuse gpui_component::{\n Settings, SettingPage, SettingGroup, SettingItem, SettingField,\n setting::NumberFieldOptions,\n group_box::GroupBoxVariant,\n Size,\n};\n\nSettings::new(\"app-settings\")\n .with_size(Size::Medium)\n .with_group_variant(GroupBoxVariant::Outline)\n .pages(vec![\n SettingPage::new(\"General\")\n .resettable(true)\n .default_open(true)\n .groups(vec![\n SettingGroup::new()\n .title(\"Appearance\")\n .items(vec![\n SettingItem::new(\n \"Dark Mode\",\n SettingField::switch(\n |cx: &App| cx.theme().mode.is_dark(),\n |val: bool, cx: &mut App| {\n // Handle theme change\n },\n )\n )\n .description(\"Switch between light and dark themes.\"),\n ]),\n SettingGroup::new()\n .title(\"Font\")\n .items(vec![\n SettingItem::new(\n \"Font Family\",\n SettingField::dropdown(\n vec![\n (\"Arial\".into(), \"Arial\".into()),\n (\"Helvetica\".into(), \"Helvetica\".into()),\n ],\n |cx: &App| \"Arial\".into(),\n |val: SharedString, cx: &mut App| {\n // Handle font change\n },\n )\n ),\n SettingItem::new(\n \"Font Size\",\n SettingField::number_input(\n NumberFieldOptions {\n min: 8.0,\n max: 72.0,\n ..Default::default()\n },\n |cx: &App| 14.0,\n |val: f64, cx: &mut App| {\n // Handle size change\n },\n )\n ),\n ]),\n ]),\n SettingPage::new(\"Software Update\")\n .resettable(true)\n .group(\n SettingGroup::new()\n .title(\"Updates\")\n .items(vec![\n SettingItem::new(\n \"Auto Update\",\n SettingField::switch(\n |cx: &App| true,\n |val: bool, cx: &mut App| {\n // Handle auto update\n },\n )\n )\n .description(\"Automatically download and install updates.\"),\n ])\n ),\n ])\n```\n\n[Settings]: https://docs.rs/gpui-component/latest/gpui_component/setting/struct.Settings.html\n[SettingPage]: https://docs.rs/gpui-component/latest/gpui_component/setting/struct.SettingPage.html\n[SettingGroup]: https://docs.rs/gpui-component/latest/gpui_component/setting/struct.SettingGroup.html\n[SettingItem]: https://docs.rs/gpui-component/latest/gpui_component/setting/struct.SettingItem.html\n[SettingField]: https://docs.rs/gpui-component/latest/gpui_component/setting/enum.SettingField.html\n[SettingFieldElement]: https://docs.rs/gpui-component/latest/gpui_component/setting/trait.SettingFieldElement.html\n[NumberFieldOptions]: https://docs.rs/gpui-component/latest/gpui_component/setting/struct.NumberFieldOptions.html\n[GroupBox]: ./group-box.md\n[Sizable]: https://docs.rs/gpui-component/latest/gpui_component/trait.Sizable.html\n" }, { "path": "docs/docs/components/sheet.md", "content": "---\ntitle: Sheet\ndescription: A sliding panel that appears from the edges of the screen for displaying content.\n---\n\n# Sheet\n\nA Sheet (also known as a sidebar or slide-out panel) is a navigation component that slides in from the edges of the screen. It provides additional space for content without taking up the main view, and can be used for navigation menus, forms, or any supplementary content.\n\n## Import\n\n```rust\nuse gpui_component::WindowExt;\nuse gpui_component::Placement;\n```\n\n## Usage\n\n### Setup application root view for display of sheets\n\nYou need to set up your application's root view to render the sheet layer. This is typically done in your main application struct's render method.\n\nThe [Root::render_sheet_layer](https://docs.rs/gpui-component/latest/gpui_component/struct.Root.html#method.render_sheet_layer) function handles rendering any active modals on top of your app content.\n\n```rust\nuse gpui_component::TitleBar;\n\nstruct MyApp {\n view: AnyView,\n}\n\nimpl Render for MyApp {\n fn render(&mut self, window: &mut Window, cx: &mut Context) -> impl IntoElement {\n let sheet_layer = Root::render_sheet_layer(window, cx);\n\n div()\n .size_full()\n .child(\n v_flex()\n .size_full()\n .child(TitleBar::new())\n .child(div().flex_1().overflow_hidden().child(self.view.clone())),\n )\n // Render the sheet layer on top of the app content\n .children(sheet_layer)\n }\n}\n```\n\n### Basic Sheet\n\n```rust\nwindow.open_sheet(cx, |sheet, _, _| {\n sheet\n .title(\"Navigation\")\n .child(\"Sheet content goes here\")\n})\n```\n\n### Sheet with Placement\n\n```rust\n// Left sheet (default)\nwindow.open_sheet_at(Placement::Left, cx, |sheet, _, _| {\n sheet.title(\"Left Sheet\")\n})\n\n// Right sheet\nwindow.open_sheet_at(Placement::Right, cx, |sheet, _, _| {\n sheet.title(\"Right Sheet\")\n})\n\n// Top sheet\nwindow.open_sheet_at(Placement::Top, cx, |sheet, _, _| {\n sheet.title(\"Top Sheet\")\n})\n\n// Bottom sheet\nwindow.open_sheet_at(Placement::Bottom, cx, |sheet, _, _| {\n sheet.title(\"Bottom Sheet\")\n})\n```\n\n### Sheet with Custom Size\n\n```rust\nwindow.open_sheet(cx, |sheet, _, _| {\n sheet\n .title(\"Wide Sheet\")\n .size(px(500.)) // Custom width for left/right, height for top/bottom\n .child(\"This sheet is 500px wide\")\n})\n```\n\n### Sheet with Form Content\n\n```rust\nlet input = cx.new(|cx| InputState::new(window, cx));\nlet date = cx.new(|cx| DatePickerState::new(window, cx));\n\nwindow.open_sheet(cx, |sheet, _, _| {\n sheet\n .title(\"User Profile\")\n .child(\n v_flex()\n .gap_4()\n .child(\"Enter your information:\")\n .child(Input::new(&input).placeholder(\"Full Name\"))\n .child(DatePicker::new(&date).placeholder(\"Date of Birth\"))\n )\n .footer(\n h_flex()\n .gap_3()\n .child(Button::new(\"save\").primary().label(\"Save\"))\n .child(Button::new(\"cancel\").label(\"Cancel\"))\n )\n})\n```\n\n### Overlay Options\n\n```rust\nwindow.open_sheet(cx, |sheet, _, _| {\n sheet\n .title(\"Settings\")\n .overlay(true) // Show overlay background (default: true)\n .overlay_closable(true) // Click overlay to close (default: true)\n .child(\"Sheet settings content\")\n})\n\n// No overlay\nwindow.open_sheet(cx, |sheet, _, _| {\n sheet\n .title(\"Side Panel\")\n .overlay(false) // No overlay background\n .child(\"This sheet has no overlay\")\n})\n```\n\n### Resizable Sheet\n\n```rust\nwindow.open_sheet(cx, |sheet, _, _| {\n sheet\n .title(\"Resizable Panel\")\n .resizable(true) // Allow user to resize (default: true)\n .size(px(300.))\n .child(\"You can resize this sheet by dragging the edge\")\n})\n```\n\n### Custom Margin and Positioning\n\n```rust\nwindow.open_sheet(cx, |sheet, _, _| {\n sheet\n .title(\"Below Title Bar\")\n .margin_top(px(32.)) // Space for window title bar\n .child(\"This sheet appears below the title bar\")\n})\n```\n\n### Sheet with List\n\n```rust\nlet delegate = ListDelegate::new(items);\nlet list = cx.new(|cx| List::new(delegate, window, cx));\n\nwindow.open_sheet_at(Placement::Left, cx, |sheet, _, _| {\n sheet\n .title(\"File Explorer\")\n .size(px(400.))\n .child(\n div()\n .border_1()\n .border_color(cx.theme().border)\n .rounded(cx.theme().radius)\n .size_full()\n .child(list.clone())\n )\n})\n```\n\n### Close Event Handling\n\n```rust\nwindow.open_sheet(cx, |sheet, _, _| {\n sheet\n .title(\"Sheet with Handler\")\n .child(\"This sheet has a custom close handler\")\n .on_close(|_, window, cx| {\n window.push_notification(\"Sheet was closed\", cx);\n })\n})\n```\n\n### Navigation Sheet\n\n```rust\nwindow.open_sheet_at(Placement::Left, cx, |sheet, _, _| {\n sheet\n .title(\"Navigation\")\n .size(px(280.))\n .child(\n v_flex()\n .gap_2()\n .child(Button::new(\"home\").ghost().label(\"Home\").w_full())\n .child(Button::new(\"profile\").ghost().label(\"Profile\").w_full())\n .child(Button::new(\"settings\").ghost().label(\"Settings\").w_full())\n .child(Button::new(\"logout\").ghost().label(\"Logout\").w_full())\n )\n})\n```\n\n### Custom Styling\n\n```rust\nwindow.open_sheet(cx, |sheet, _, cx| {\n sheet\n .title(\"Styled Sheet\")\n .bg(cx.theme().accent)\n .text_color(cx.theme().accent_foreground)\n .border_color(cx.theme().primary)\n .child(\"Custom styled sheet content\")\n})\n```\n\n### Programmatic Close\n\n```rust\n// Close sheet from inside\nButton::new(\"close\")\n .label(\"Close Sheet\")\n .on_click(|_, window, cx| {\n window.close_sheet(cx);\n })\n\n// Close sheet from outside\nwindow.close_sheet(cx);\n```\n\n## API Reference\n\n### Window Extensions\n\n| Method | Description |\n| ---------------------------------- | ----------------------------------------- |\n| `open_sheet(cx, fn)` | Open sheet with default placement (Right) |\n| `open_sheet_at(placement, cx, fn)` | Open sheet at specific placement |\n| `close_sheet(cx)` | Close current sheet |\n\n### Sheet Builder\n\n| Method | Description |\n| ------------------------ | --------------------------------------- |\n| `title(str)` | Set sheet title |\n| `child(el)` | Add content to sheet body |\n| `footer(el)` | Set footer content |\n| `size(px)` | Set sheet size (width or height) |\n| `margin_top(px)` | Set top margin (for title bars) |\n| `resizable(bool)` | Allow resizing (default: true) |\n| `overlay(bool)` | Show overlay background (default: true) |\n| `overlay_closable(bool)` | Click overlay to close (default: true) |\n| `on_close(fn)` | Close event callback |\n\n### Placement Options\n\n| Value | Description |\n| ------------------- | ----------------------------------- |\n| `Placement::Left` | Slides in from left edge |\n| `Placement::Right` | Slides in from right edge (default) |\n| `Placement::Top` | Slides in from top edge |\n| `Placement::Bottom` | Slides in from bottom edge |\n\n### Styling Methods\n\n| Method | Description |\n| --------------------- | ------------------------ |\n| `bg(color)` | Set background color |\n| `text_color(color)` | Set text color |\n| `border_color(color)` | Set border color |\n| `px_*()/py_*()` | Custom padding |\n| `gap_*()` | Spacing between children |\n\n## Examples\n\n### Settings Panel\n\n```rust\nwindow.open_sheet_at(Placement::Right, cx, |sheet, _, _| {\n sheet\n .title(\"Settings\")\n .size(px(350.))\n .child(\n v_flex()\n .gap_4()\n .child(\"Appearance\")\n .child(Checkbox::new(\"dark-mode\").label(\"Dark Mode\"))\n .child(Checkbox::new(\"animations\").label(\"Enable Animations\"))\n .child(\"Notifications\")\n .child(Checkbox::new(\"push-notifications\").label(\"Push Notifications\"))\n )\n .footer(\n h_flex()\n .justify_end()\n .gap_2()\n .child(Button::new(\"apply\").primary().label(\"Apply\"))\n .child(Button::new(\"cancel\").label(\"Cancel\"))\n )\n})\n```\n\n### File Browser\n\n```rust\nwindow.open_sheet_at(Placement::Left, cx, |sheet, _, _| {\n sheet\n .title(\"Files\")\n .size(px(300.))\n .child(\n v_flex()\n .size_full()\n .child(\n h_flex()\n .gap_2()\n .p_2()\n .child(Button::new(\"new-folder\").small().icon(IconName::FolderPlus))\n .child(Button::new(\"upload\").small().icon(IconName::Upload))\n )\n .child(\n div()\n .flex_1()\n .overflow_hidden()\n .child(file_tree_list)\n )\n )\n})\n```\n\n### Help Panel\n\n```rust\nwindow.open_sheet_at(Placement::Bottom, cx, |sheet, _, _| {\n sheet\n .title(\"Help & Documentation\")\n .size(px(200.))\n .child(\n h_flex()\n .gap_4()\n .child(\"Keyboard Shortcuts\")\n .child(Kbd::new(\"⌘\").child(\"K\"))\n .child(\"Search\")\n .child(Kbd::new(\"⌘\").child(\"P\"))\n .child(\"Command Palette\")\n )\n})\n```\n\n## Best Practices\n\n1. **Appropriate Placement**: Use left/right for navigation, top/bottom for temporary content\n2. **Consistent Sizing**: Maintain consistent sheet sizes across your application\n3. **Clear Headers**: Always provide descriptive titles\n4. **Close Options**: Provide multiple ways to close (ESC, overlay click, close button)\n5. **Content Organization**: Use proper spacing and grouping for sheet content\n6. **Responsive Design**: Consider sheet behavior on smaller screens\n7. **Performance**: Lazy load sheet content when possible for better performance\n" }, { "path": "docs/docs/components/sidebar.md", "content": "---\ntitle: Sidebar\ndescription: A composable, themeable and customizable sidebar component for navigation and content organization.\n---\n\n# Sidebar\n\nA flexible sidebar component that provides navigation structure for applications. Features collapsible states, nested menu items, header and footer sections, and responsive design. Perfect for creating application navigation panels, admin dashboards, and complex hierarchical interfaces.\n\n## Import\n\n```rust\nuse gpui_component::sidebar::{\n Sidebar, SidebarHeader, SidebarFooter, SidebarGroup,\n SidebarMenu, SidebarMenuItem, SidebarToggleButton\n};\n```\n\n## Usage\n\n### Basic Sidebar\n\n```rust\nuse gpui_component::{sidebar::*, Side};\n\nSidebar::new()\n .header(\n SidebarHeader::new()\n .child(\"My Application\")\n )\n .child(\n SidebarGroup::new(\"Navigation\")\n .child(\n SidebarMenu::new()\n .child(\n SidebarMenuItem::new(\"Dashboard\")\n .icon(IconName::LayoutDashboard)\n .on_click(|_, _, _| println!(\"Dashboard clicked\"))\n )\n .child(\n SidebarMenuItem::new(\"Settings\")\n .icon(IconName::Settings)\n .on_click(|_, _, _| println!(\"Settings clicked\"))\n )\n )\n )\n .footer(\n SidebarFooter::new()\n .child(\"User Profile\")\n )\n```\n\n### Collapsible Sidebar\n\n```rust\nlet mut collapsed = false;\n\nSidebar::new()\n .collapsed(collapsed)\n .collapsible(true)\n .header(\n SidebarHeader::new()\n .child(\n h_flex()\n .child(Icon::new(IconName::Home))\n .when(!collapsed, |this| this.child(\"Home\"))\n )\n )\n .child(\n SidebarGroup::new(\"Menu\")\n .child(\n SidebarMenu::new()\n .child(\n SidebarMenuItem::new(\"Files\")\n .icon(IconName::Folder)\n )\n )\n )\n\n// Toggle button\nSidebarToggleButton::new()\n .collapsed(collapsed)\n .on_click(|_, _, _| {\n collapsed = !collapsed;\n })\n```\n\n### Nested Menu Items\n\n```rust\nSidebarMenuItem::new(\"Projects\")\n .icon(IconName::FolderOpen)\n .active(true)\n .children([\n SidebarMenuItem::new(\"Web App\")\n .active(false)\n .on_click(|_, _, _| println!(\"Web App selected\")),\n SidebarMenuItem::new(\"Mobile App\")\n .active(true)\n .on_click(|_, _, _| println!(\"Mobile App selected\")),\n SidebarMenuItem::new(\"Desktop App\")\n .on_click(|_, _, _| println!(\"Desktop App selected\")),\n ])\n .on_click(|_, _, _| {\n // Toggle project group\n })\n```\n\n### Multiple Groups\n\n```rust\nSidebar::new()\n .child(\n SidebarGroup::new(\"Main\")\n .child(\n SidebarMenu::new()\n .child(SidebarMenuItem::new(\"Dashboard\").icon(IconName::Home))\n .child(SidebarMenuItem::new(\"Analytics\").icon(IconName::BarChart))\n )\n )\n .child(\n SidebarGroup::new(\"Content\")\n .child(\n SidebarMenu::new()\n .child(SidebarMenuItem::new(\"Posts\").icon(IconName::FileText))\n .child(SidebarMenuItem::new(\"Media\").icon(IconName::Image))\n .child(SidebarMenuItem::new(\"Comments\").icon(IconName::MessageCircle))\n )\n )\n .child(\n SidebarGroup::new(\"Settings\")\n .child(\n SidebarMenu::new()\n .child(SidebarMenuItem::new(\"General\").icon(IconName::Settings))\n .child(SidebarMenuItem::new(\"Users\").icon(IconName::Users))\n )\n )\n```\n\n### With Badges and Suffixes\n\n```rust\nuse gpui_component::{Badge, Switch};\n\nSidebarMenuItem::new(\"Notifications\")\n .icon(IconName::Bell)\n .suffix(\n Badge::new()\n .count(5)\n .child(\"5\")\n )\n\nSidebarMenuItem::new(\"Dark Mode\")\n .icon(IconName::Moon)\n .suffix(\n Switch::new(\"dark-mode\")\n .checked(true)\n .xsmall()\n )\n\nSidebarMenuItem::new(\"Settings\")\n .icon(IconName::Settings)\n .suffix(IconName::ChevronRight)\n```\n\n### Right-Side Placement\n\n```rust\nSidebar::new()\n .side(Side::Right)\n .width(300)\n .header(\n SidebarHeader::new()\n .child(\"Right Panel\")\n )\n .child(\n SidebarGroup::new(\"Tools\")\n .child(\n SidebarMenu::new()\n .child(SidebarMenuItem::new(\"Inspector\").icon(IconName::Search))\n .child(SidebarMenuItem::new(\"Console\").icon(IconName::Terminal))\n )\n )\n```\n\n### Context Menus\n\nAdd right-click context menus to sidebar menu items for additional actions:\n\n```rust\nuse gpui_component::menu::PopupMenu;\n\nSidebarMenuItem::new(\"Project Files\")\n .icon(IconName::Folder)\n .context_menu(|menu, _, _| {\n menu.link(\"Open in Editor\", \"https://editor.example.com\")\n .separator()\n .menu_with_description(\"Rename\", \"Rename this project\", Box::new(RenameAction))\n .menu_with_description(\"Delete\", \"Delete this project\", Box::new(DeleteAction))\n .separator()\n .submenu(\"Share\", |submenu| {\n submenu.menu(\"Copy Link\", Box::new(CopyLinkAction))\n .menu(\"Send via Email\", Box::new(EmailAction))\n })\n })\n\n// Multiple items with context menus\nSidebarMenu::new()\n .child(\n SidebarMenuItem::new(\"Documentation\")\n .icon(IconName::BookOpen)\n .context_menu(|menu, _, _| {\n menu.menu(\"View Online\", Box::new(ViewOnlineAction))\n .menu(\"Download PDF\", Box::new(DownloadPdfAction))\n })\n )\n .child(\n SidebarMenuItem::new(\"Settings\")\n .icon(IconName::Settings)\n .children([\n SidebarMenuItem::new(\"General\")\n .context_menu(|menu, _, _| {\n menu.menu(\"Reset to Defaults\", Box::new(ResetAction))\n }),\n SidebarMenuItem::new(\"Advanced\")\n .context_menu(|menu, _, _| {\n menu.menu(\"Export Settings\", Box::new(ExportAction))\n .menu(\"Import Settings\", Box::new(ImportAction))\n })\n ])\n )\n```\n\n### Custom Width and Styling\n\n```rust\nSidebar::new()\n .width(280) // Custom width in pixels\n .border_width(2) // Custom border width\n .header(\n SidebarHeader::new()\n .p_4() // Custom padding\n .rounded(cx.theme().radius)\n .child(\"Custom Styled Sidebar\")\n )\n```\n\n### Interactive Header with Popup Menu\n\n```rust\nuse gpui_component::menu::DropdownMenu;\n\nSidebarHeader::new()\n .child(\n h_flex()\n .gap_2()\n .child(Icon::new(IconName::Building))\n .child(\"Company Name\")\n .child(Icon::new(IconName::ChevronsUpDown))\n )\n .dropdown_menu(|menu, _, _| {\n menu.menu(\"Acme Corp\", Box::new(SelectCompany(\"acme\")))\n .menu(\"Tech Solutions\", Box::new(SelectCompany(\"tech\")))\n .separator()\n .menu(\"Switch Organization\", Box::new(SwitchOrg))\n })\n```\n\n### Footer with User Information\n\n```rust\nSidebarFooter::new()\n .justify_between()\n .child(\n h_flex()\n .gap_2()\n .child(Icon::new(IconName::User))\n .when(!collapsed, |this| {\n this.child(\n v_flex()\n .child(\"John Doe\")\n .child(div().text_xs().text_color(cx.theme().muted_foreground).child(\"john@example.com\"))\n )\n })\n )\n .when(!collapsed, |this| {\n this.child(Icon::new(IconName::MoreHorizontal))\n })\n```\n\n### Responsive Sidebar\n\n```rust\nlet is_mobile = window_width < 768;\n\nSidebar::new()\n .collapsed(is_mobile || manually_collapsed)\n .width(if is_mobile { 60 } else { 240 })\n .header(\n SidebarHeader::new()\n .child(\n div()\n .when(!is_mobile, |this| this.child(\"Full App Name\"))\n .when(is_mobile, |this| this.child(Icon::new(IconName::Menu)))\n )\n )\n```\n\n## Theming\n\nThe sidebar uses dedicated theme colors:\n\n```rust\n// Theme colors used by sidebar\ncx.theme().sidebar // Background\ncx.theme().sidebar_foreground // Text color\ncx.theme().sidebar_border // Border color\ncx.theme().sidebar_accent // Hover/active background\ncx.theme().sidebar_accent_foreground // Hover/active text\ncx.theme().sidebar_primary // Primary elements\ncx.theme().sidebar_primary_foreground // Primary text\n```\n\n## Examples\n\n### File Explorer Sidebar\n\n```rust\nSidebar::new()\n .header(\n SidebarHeader::new()\n .child(\n h_flex()\n .gap_2()\n .child(IconName::Folder)\n .child(\"Explorer\")\n )\n )\n .child(\n SidebarGroup::new(\"Folders\")\n .child(\n SidebarMenu::new()\n .child(\n SidebarMenuItem::new(\"src\")\n .icon(IconName::FolderOpen)\n .active(true)\n .children([\n SidebarMenuItem::new(\"components\")\n .icon(IconName::Folder),\n SidebarMenuItem::new(\"utils\")\n .icon(IconName::Folder),\n SidebarMenuItem::new(\"main.rs\")\n .icon(IconName::FileCode)\n .active(true),\n ])\n )\n .child(\n SidebarMenuItem::new(\"tests\")\n .icon(IconName::Folder)\n )\n .child(\n SidebarMenuItem::new(\"Cargo.toml\")\n .icon(IconName::FileText)\n )\n )\n )\n```\n\n### Admin Dashboard Sidebar\n\n```rust\nSidebar::new()\n .header(\n SidebarHeader::new()\n .child(\n h_flex()\n .gap_2()\n .child(\n div()\n .size_8()\n .rounded_full()\n .bg(cx.theme().primary)\n .child(Icon::new(IconName::Crown))\n )\n .child(\"Admin Panel\")\n )\n )\n .child(\n SidebarGroup::new(\"Overview\")\n .child(\n SidebarMenu::new()\n .child(\n SidebarMenuItem::new(\"Dashboard\")\n .icon(IconName::LayoutDashboard)\n .active(true)\n )\n .child(\n SidebarMenuItem::new(\"Analytics\")\n .icon(IconName::TrendingUp)\n .suffix(Badge::new().count(2))\n )\n )\n )\n .child(\n SidebarGroup::new(\"Management\")\n .child(\n SidebarMenu::new()\n .child(\n SidebarMenuItem::new(\"Users\")\n .icon(IconName::Users)\n .suffix(\"1,234\")\n )\n .child(\n SidebarMenuItem::new(\"Orders\")\n .icon(IconName::ShoppingCart)\n .suffix(Badge::new().dot().variant_destructive())\n )\n .child(\n SidebarMenuItem::new(\"Products\")\n .icon(IconName::Package)\n )\n )\n )\n .footer(\n SidebarFooter::new()\n .child(\n h_flex()\n .gap_2()\n .child(IconName::User)\n .child(\"Administrator\")\n )\n .child(IconName::LogOut)\n )\n```\n\n### Settings Sidebar\n\n```rust\nSidebar::new()\n .width(300)\n .header(\n SidebarHeader::new()\n .child(\"Settings\")\n )\n .child(\n SidebarGroup::new(\"General\")\n .child(\n SidebarMenu::new()\n .child(\n SidebarMenuItem::new(\"Appearance\")\n .icon(IconName::Palette)\n .active(true)\n )\n .child(\n SidebarMenuItem::new(\"Notifications\")\n .icon(IconName::Bell)\n .suffix(\n Switch::new(\"notifications\")\n .checked(true)\n .xsmall()\n )\n )\n .child(\n SidebarMenuItem::new(\"Privacy\")\n .icon(IconName::Shield)\n )\n )\n )\n .child(\n SidebarGroup::new(\"Advanced\")\n .child(\n SidebarMenu::new()\n .child(\n SidebarMenuItem::new(\"Developer\")\n .icon(IconName::Code)\n .children([\n SidebarMenuItem::new(\"Debug Mode\")\n .suffix(\n Switch::new(\"debug\")\n .checked(false)\n .xsmall()\n ),\n SidebarMenuItem::new(\"Console\")\n .on_click(|_, _, _| println!(\"Open console\")),\n ])\n )\n .child(\n SidebarMenuItem::new(\"Performance\")\n .icon(IconName::Zap)\n )\n )\n )\n```\n" }, { "path": "docs/docs/components/skeleton.md", "content": "---\ntitle: Skeleton\ndescription: Use to show a placeholder while content is loading.\n---\n\n# Skeleton\n\nThe Skeleton component displays animated placeholder content while actual content is loading. It provides visual feedback to users that content is being loaded and helps maintain layout structure during loading states.\n\n## Import\n\n```rust\nuse gpui_component::skeleton::Skeleton;\n```\n\n## Usage\n\n### Basic Skeleton\n\n```rust\nSkeleton::new()\n```\n\n### Text Line Skeleton\n\n```rust\n// Single line of text\nSkeleton::new()\n .w(px(250.))\n .h_4()\n .rounded_md()\n\n// Multiple text lines\nv_flex()\n .gap_2()\n .child(Skeleton::new().w(px(250.)).h_4().rounded_md())\n .child(Skeleton::new().w(px(200.)).h_4().rounded_md())\n .child(Skeleton::new().w(px(180.)).h_4().rounded_md())\n```\n\n### Circle Skeleton\n\n```rust\n// Avatar placeholder\nSkeleton::new()\n .size_12()\n .rounded_full()\n\n// Profile picture placeholder\nSkeleton::new()\n .w(px(64.))\n .h(px(64.))\n .rounded_full()\n```\n\n### Rectangle Skeleton\n\n```rust\n// Card image placeholder\nSkeleton::new()\n .w(px(250.))\n .h(px(125.))\n .rounded_md()\n\n// Button placeholder\nSkeleton::new()\n .w(px(120.))\n .h(px(40.))\n .rounded_md()\n```\n\n### Different Shapes\n\n```rust\n// Text content\nSkeleton::new().w(px(200.)).h_4().rounded_sm()\n\n// Square image\nSkeleton::new().size_20().rounded_md()\n\n// Wide banner\nSkeleton::new().w_full().h(px(200.)).rounded_lg()\n\n// Small icon\nSkeleton::new().size_6().rounded_md()\n```\n\n### Secondary Variant\n\n```rust\n// Use secondary color (more subtle)\nSkeleton::new()\n .secondary()\n .w(px(200.))\n .h_4()\n .rounded_md()\n```\n\n## Animation\n\nThe Skeleton component includes a built-in pulse animation that:\n\n- Runs continuously with a 2-second duration\n- Uses a bounce easing function with ease-in-out\n- Animates opacity from 100% to 50% and back\n- Automatically repeats to indicate loading state\n\nThe animation cannot be disabled as it's essential for indicating loading state.\n\n## Sizes\n\nThe Skeleton component doesn't have predefined size variants. Instead, use gpui's sizing utilities:\n\n```rust\n// Height utilities\nSkeleton::new().h_3() // 12px height\nSkeleton::new().h_4() // 16px height\nSkeleton::new().h_5() // 20px height\nSkeleton::new().h_6() // 24px height\n\n// Width utilities\nSkeleton::new().w(px(100.)) // 100px width\nSkeleton::new().w(px(200.)) // 200px width\nSkeleton::new().w_full() // Full width\nSkeleton::new().w_1_2() // 50% width\n\n// Square sizes\nSkeleton::new().size_4() // 16x16px\nSkeleton::new().size_8() // 32x32px\nSkeleton::new().size_12() // 48x48px\nSkeleton::new().size_16() // 64x64px\n```\n\n## Examples\n\n### Loading Profile Card\n\n```rust\nv_flex()\n .gap_4()\n .p_4()\n .border_1()\n .border_color(cx.theme().border)\n .rounded(cx.theme().radius_lg)\n .child(\n h_flex()\n .gap_3()\n .items_center()\n .child(Skeleton::new().size_12().rounded_full()) // Avatar\n .child(\n v_flex()\n .gap_2()\n .child(Skeleton::new().w(px(120.)).h_4().rounded_md()) // Name\n .child(Skeleton::new().w(px(100.)).h_3().rounded_md()) // Email\n )\n )\n .child(\n v_flex()\n .gap_2()\n .child(Skeleton::new().w_full().h_4().rounded_md()) // Bio line 1\n .child(Skeleton::new().w(px(200.)).h_4().rounded_md()) // Bio line 2\n )\n```\n\n### Loading Article List\n\n```rust\nv_flex()\n .gap_6()\n .children((0..3).map(|_| {\n h_flex()\n .gap_4()\n .child(Skeleton::new().w(px(120.)).h(px(80.)).rounded_md()) // Thumbnail\n .child(\n v_flex()\n .gap_2()\n .flex_1()\n .child(Skeleton::new().w_full().h_5().rounded_md()) // Title\n .child(Skeleton::new().w(px(300.)).h_4().rounded_md()) // Excerpt line 1\n .child(Skeleton::new().w(px(250.)).h_4().rounded_md()) // Excerpt line 2\n .child(Skeleton::new().w(px(100.)).h_3().rounded_md()) // Date\n )\n }))\n```\n\n### Loading Table Rows\n\n```rust\nv_flex()\n .gap_2()\n .children((0..5).map(|_| {\n h_flex()\n .gap_4()\n .p_3()\n .border_b_1()\n .border_color(cx.theme().border)\n .child(Skeleton::new().size_8().rounded_full()) // Status indicator\n .child(Skeleton::new().w(px(150.)).h_4().rounded_md()) // Name\n .child(Skeleton::new().w(px(200.)).h_4().rounded_md()) // Email\n .child(Skeleton::new().w(px(80.)).h_4().rounded_md()) // Role\n .child(Skeleton::new().w(px(60.)).h_4().rounded_md()) // Actions\n }))\n```\n\n### Loading Button States\n\n```rust\nh_flex()\n .gap_3()\n .child(Skeleton::new().w(px(80.)).h(px(36.)).rounded_md()) // Primary button\n .child(Skeleton::new().w(px(70.)).h(px(36.)).rounded_md()) // Secondary button\n .child(Skeleton::new().size_9().rounded_md()) // Icon button\n```\n\n### Loading Form Fields\n\n```rust\nv_flex()\n .gap_4()\n .child(\n v_flex()\n .gap_1()\n .child(Skeleton::new().w(px(60.)).h_4().rounded_md()) // Label\n .child(Skeleton::new().w_full().h(px(40.)).rounded_md()) // Input\n )\n .child(\n v_flex()\n .gap_1()\n .child(Skeleton::new().w(px(80.)).h_4().rounded_md()) // Label\n .child(Skeleton::new().w_full().h(px(120.)).rounded_md()) // Textarea\n )\n```\n\n### Conditional Loading\n\n```rust\nif loading {\n Skeleton::new().w(px(200.)).h_4().rounded_md()\n} else {\n div().child(\"Actual content here\")\n}\n```\n\n## Theming\n\nThe Skeleton component uses the theme's `skeleton` color, which defaults to the `secondary` color if not specified. You can customize it in your theme:\n\n```json\n{\n \"skeleton.background\": \"#e2e8f0\"\n}\n```\n\nThe `secondary(true)` variant applies 50% opacity to the skeleton color for more subtle loading indicators.\n" }, { "path": "docs/docs/components/slider.md", "content": "---\ntitle: Slider\ndescription: A control that allows the user to select values from a range using a draggable thumb.\n---\n\n# Slider\n\nA slider component for selecting numeric values within a specified range. Supports both single value and range selection modes, horizontal and vertical orientations, custom styling, and step intervals.\n\n## Import\n\n```rust\nuse gpui_component::slider::{Slider, SliderState, SliderEvent, SliderValue};\n```\n\n## Usage\n\n### Basic Slider\n\n```rust\nlet slider_state = cx.new(|_| {\n SliderState::new()\n .min(0.0)\n .max(100.0)\n .default_value(50.0)\n .step(1.0)\n});\n\nSlider::new(&slider_state)\n```\n\n### Slider with Event Handling\n\n```rust\nstruct MyView {\n slider_state: Entity,\n current_value: f32,\n}\n\nimpl MyView {\n fn new(cx: &mut Context) -> Self {\n let slider_state = cx.new(|_| {\n SliderState::new()\n .min(0.0)\n .max(100.0)\n .default_value(25.0)\n .step(5.0)\n });\n\n let subscription = cx.subscribe(&slider_state, |this, _, event: &SliderEvent, cx| {\n match event {\n SliderEvent::Change(value) => {\n this.current_value = value.start();\n cx.notify();\n }\n }\n });\n\n Self {\n slider_state,\n current_value: 25.0,\n }\n }\n}\n\nimpl Render for MyView {\n fn render(&mut self, _: &mut Window, cx: &mut Context) -> impl IntoElement {\n v_flex()\n .gap_2()\n .child(Slider::new(&self.slider_state))\n .child(format!(\"Value: {}\", self.current_value))\n }\n}\n```\n\n### Range Slider\n\n```rust\nlet range_slider = cx.new(|_| {\n SliderState::new()\n .min(0.0)\n .max(100.0)\n .default_value(20.0..80.0) // Range from 20 to 80\n .step(1.0)\n});\n\nSlider::new(&range_slider)\n```\n\n### Vertical Slider\n\n```rust\nSlider::new(&slider_state)\n .vertical()\n .h(px(200.))\n```\n\n### Custom Step Intervals\n\n```rust\n// Integer steps\nlet integer_slider = cx.new(|_| {\n SliderState::new()\n .min(0.0)\n .max(10.0)\n .step(1.0)\n .default_value(5.0)\n});\n\n// Decimal steps\nlet decimal_slider = cx.new(|_| {\n SliderState::new()\n .min(0.0)\n .max(1.0)\n .step(0.01)\n .default_value(0.5)\n});\n```\n\n### Min/Max Configuration\n\n```rust\n// Temperature slider\nlet temp_slider = cx.new(|_| {\n SliderState::new()\n .min(-10.0)\n .max(40.0)\n .default_value(20.0)\n .step(0.5)\n});\n\n// Percentage slider\nlet percent_slider = cx.new(|_| {\n SliderState::new()\n .min(0.0)\n .max(100.0)\n .default_value(75.0)\n .step(5.0)\n});\n```\n\n### Disabled State\n\n```rust\nSlider::new(&slider_state)\n .disabled(true)\n```\n\n### Custom Styling\n\n```rust\nSlider::new(&slider_state)\n .bg(cx.theme().success)\n .text_color(cx.theme().success_foreground)\n .rounded(px(4.))\n```\n\n### Scale\n\nThere have 2 types of scale for the slider:\n\n- `Linear` (default)\n- `Logarithmic`\n\nThe logarithmic scale is useful when the range of values is large and you want to give more precision to smaller values.\n\n```rust\nlet log_slider = cx.new(|_| {\n SliderState::new()\n .min(1.0) // min must be greater than 0 for log scale\n .max(1000.0)\n .default_value(10.0)\n .step(1.0)\n .scale(SliderScale::Logarithmic)\n});\n```\n\nIn this case:\n\n:::info\n$$ v = min \\times (max/min)^p $$\n\nThe value `v` is calculated using the formula above, where `p` is the slider percentage (0 to 1).\n:::\n\n- If slider at 25%, value will be approximately `5.62`.\n- If slider at 50%, value will be approximately `31.62`.\n- If slider at 75%, value will be approximately `177.83`.\n- If slider at 100%, value will be `1000.0`.\n\n#### Conversions\n\n```rust\n// From f32\nlet single_value: SliderValue = 42.0.into();\n\n// From tuple\nlet range_value: SliderValue = (10.0, 90.0).into();\n\n// From Range\nlet range_value: SliderValue = (10.0..90.0).into();\n```\n\n### SliderEvent\n\n| Event | Description |\n| --------------------- | --------------------------------- |\n| `Change(SliderValue)` | Emitted when slider value changes |\n\n### Styling\n\nThe slider component implements `Styled` trait and supports:\n\n- Background color for track and thumb\n- Text color for thumb\n- Border radius\n- Size customization\n\n## Examples\n\n### Color Picker\n\n```rust\nstruct ColorPicker {\n hue_slider: Entity,\n saturation_slider: Entity,\n lightness_slider: Entity,\n alpha_slider: Entity,\n current_color: Hsla,\n}\n\nimpl ColorPicker {\n fn new(cx: &mut Context) -> Self {\n let hue_slider = cx.new(|_| {\n SliderState::new()\n .min(0.0)\n .max(1.0)\n .step(0.01)\n .default_value(0.5)\n });\n\n let saturation_slider = cx.new(|_| {\n SliderState::new()\n .min(0.0)\n .max(1.0)\n .step(0.01)\n .default_value(1.0)\n });\n\n // Subscribe to all sliders to update color\n let subscriptions = [&hue_slider, &saturation_slider /* ... */]\n .iter()\n .map(|slider| {\n cx.subscribe(slider, |this, _, event: &SliderEvent, cx| {\n match event {\n SliderEvent::Change(_) => {\n this.update_color(cx);\n }\n }\n })\n })\n .collect::>();\n\n Self {\n hue_slider,\n saturation_slider,\n // ... other fields\n }\n }\n\n fn update_color(&mut self, cx: &mut Context) {\n let h = self.hue_slider.read(cx).value().start();\n let s = self.saturation_slider.read(cx).value().start();\n // ... calculate color\n self.current_color = hsla(h, s, l, a);\n cx.notify();\n }\n}\n\nimpl Render for ColorPicker {\n fn render(&mut self, _: &mut Window, cx: &mut Context) -> impl IntoElement {\n h_flex()\n .gap_4()\n .child(\n v_flex()\n .gap_2()\n .child(\"Hue\")\n .child(Slider::new(&self.hue_slider).vertical().h(px(120.)))\n )\n .child(\n v_flex()\n .gap_2()\n .child(\"Saturation\")\n .child(Slider::new(&self.saturation_slider).vertical().h(px(120.)))\n )\n // ... other sliders\n }\n}\n```\n\n### Volume Control\n\n```rust\nstruct VolumeControl {\n volume_slider: Entity,\n volume: f32,\n}\n\nimpl VolumeControl {\n fn new(cx: &mut Context) -> Self {\n let volume_slider = cx.new(|_| {\n SliderState::new()\n .min(0.0)\n .max(100.0)\n .step(1.0)\n .default_value(50.0)\n });\n\n let subscription = cx.subscribe(&volume_slider, |this, _, event: &SliderEvent, cx| {\n match event {\n SliderEvent::Change(value) => {\n this.volume = value.start();\n this.apply_volume_change();\n cx.notify();\n }\n }\n });\n\n Self {\n volume_slider,\n volume: 50.0,\n }\n }\n\n fn apply_volume_change(&self) {\n // Apply volume change to audio system\n println!(\"Volume changed to: {}%\", self.volume);\n }\n}\n\nimpl Render for VolumeControl {\n fn render(&mut self, _: &mut Window, _: &mut Context) -> impl IntoElement {\n h_flex()\n .items_center()\n .gap_3()\n .child(\"🔊\")\n .child(Slider::new(&self.volume_slider).flex_1())\n .child(format!(\"{}%\", self.volume as i32))\n }\n}\n```\n\n### Price Range Filter\n\n```rust\nstruct PriceFilter {\n price_range: Entity,\n min_price: f32,\n max_price: f32,\n}\n\nimpl PriceFilter {\n fn new(cx: &mut Context) -> Self {\n let price_range = cx.new(|_| {\n SliderState::new()\n .min(0.0)\n .max(1000.0)\n .step(10.0)\n .default_value(100.0..500.0) // Range slider\n });\n\n let subscription = cx.subscribe(&price_range, |this, _, event: &SliderEvent, cx| {\n match event {\n SliderEvent::Change(value) => {\n this.min_price = value.start();\n this.max_price = value.end();\n this.filter_products();\n cx.notify();\n }\n }\n });\n\n Self {\n price_range,\n min_price: 100.0,\n max_price: 500.0,\n }\n }\n\n fn filter_products(&self) {\n println!(\"Filtering products: ${} - ${}\", self.min_price, self.max_price);\n }\n}\n\nimpl Render for PriceFilter {\n fn render(&mut self, _: &mut Window, _: &mut Context) -> impl IntoElement {\n v_flex()\n .gap_2()\n .child(\"Price Range\")\n .child(Slider::new(&self.price_range))\n .child(format!(\"${} - ${}\", self.min_price as i32, self.max_price as i32))\n }\n}\n```\n\n### Temperature Slider with Custom Styling\n\n```rust\nstruct TemperatureControl {\n temp_slider: Entity,\n temperature: f32,\n}\n\nimpl Render for TemperatureControl {\n fn render(&mut self, _: &mut Window, cx: &mut Context) -> impl IntoElement {\n let temp_color = if self.temperature < 10.0 {\n cx.theme().info // Cold - blue\n } else if self.temperature > 25.0 {\n cx.theme().destructive // Hot - red\n } else {\n cx.theme().success // Comfortable - green\n };\n\n v_flex()\n .gap_3()\n .child(\"Temperature Control\")\n .child(\n Slider::new(&self.temp_slider)\n .bg(temp_color)\n .text_color(cx.theme().background)\n .rounded(px(8.))\n )\n .child(format!(\"{}°C\", self.temperature as i32))\n }\n}\n```\n\n## Keyboard Shortcuts\n\n| Key | Action |\n| ------------- | ------------------------------ |\n| `←` / `↓` | Decrease value by step |\n| `→` / `↑` | Increase value by step |\n| `Page Down` | Decrease by larger amount |\n| `Page Up` | Increase by larger amount |\n| `Home` | Set to minimum value |\n| `End` | Set to maximum value |\n| `Tab` | Move focus to next element |\n| `Shift + Tab` | Move focus to previous element |\n" }, { "path": "docs/docs/components/spinner.md", "content": "---\ntitle: Spinner\ndescription: Displays an animated loading showing the completion progress of a task.\n---\n\n# Spinner\n\nSpinner element displays an animated loading. Perfect for showing loading states, progress spinners, and other visual feedback during asynchronous operations. Features customizable icons, colors, sizes, and rotation animations.\n\n## Import\n\n```rust\nuse gpui_component::spinner::Spinner;\n```\n\n## Usage\n\n### Basic\n\n```rust\n// Default loader icon\nSpinner::new()\n```\n\n### Spinner with Custom Color\n\n```rust\nuse gpui_component::ActiveTheme;\n\n// Blue spinner\nSpinner::new()\n .color(cx.theme().blue)\n\n// Green spinner for success states\nSpinner::new()\n .color(cx.theme().green)\n\n// Custom color\nSpinner::new()\n .color(cx.theme().cyan)\n```\n\n### Spinner Sizes\n\n```rust\n// Extra small spinner\nSpinner::new().xsmall()\n\n// Small spinner\nSpinner::new().small()\n\n// Medium spinner (default)\nSpinner::new()\n\n// Large spinner\nSpinner::new().large()\n\n// Custom size\nSpinner::new().with_size(px(64.))\n```\n\n### Spinner with Custom Icon\n\n```rust\nuse gpui_component::IconName;\n\n// Loading circle icon\nSpinner::new()\n .icon(IconName::LoaderCircle)\n\n// Large loading circle with custom color\nSpinner::new()\n .icon(IconName::LoaderCircle)\n .large()\n .color(cx.theme().cyan)\n\n// Different loading icons\nSpinner::new()\n .icon(IconName::Loader)\n .color(cx.theme().primary)\n```\n\n## Available Icons\n\nThe Spinner component supports various loading and progress icons:\n\n### Loading Icons\n\n- `Loader` (default) - Rotating line spinner\n- `LoaderCircle` - Circular loading spinner\n\n### Other Compatible Icons\n\n- Any icon from the `IconName` enum can be used, though loading-specific icons work best with the rotation animation\n\n## Animation\n\nThe Spinner component features a built-in rotation animation:\n\n- **Duration**: 0.8 seconds (configurable via speed parameter)\n- **Easing**: Ease-in-out transition\n- **Repeat**: Infinite loop\n- **Transform**: 360-degree rotation\n\n## Size Reference\n\n| Size | Method | Approximate Pixels |\n| ----------- | ------------------- | ------------------ |\n| Extra Small | `.xsmall()` | ~12px |\n| Small | `.small()` | ~14px |\n| Medium | (default) | ~16px |\n| Large | `.large()` | ~24px |\n| Custom | `.with_size(px(n))` | n px |\n\n## Examples\n\n### Loading States\n\n```rust\n// Simple loading spinner\nSpinner::new()\n\n// Loading with custom color\nSpinner::new()\n .color(cx.theme().blue)\n\n// Large loading spinner\nSpinner::new()\n .large()\n .color(cx.theme().primary)\n```\n\n### Different Loading Icons\n\n```rust\n// Default loader (line spinner)\nSpinner::new()\n .color(cx.theme().muted_foreground)\n\n// Circle loader\nSpinner::new()\n .icon(IconName::LoaderCircle)\n .color(cx.theme().blue)\n\n// Large circle loader with custom color\nSpinner::new()\n .icon(IconName::LoaderCircle)\n .large()\n .color(cx.theme().green)\n```\n\n### Status Spinners\n\n```rust\n// Loading state\nSpinner::new()\n .small()\n .color(cx.theme().muted_foreground)\n\n// Processing state\nSpinner::new()\n .icon(IconName::LoaderCircle)\n .color(cx.theme().blue)\n\n// Success processing (still animating)\nSpinner::new()\n .icon(IconName::LoaderCircle)\n .color(cx.theme().green)\n```\n\n### Size Variations\n\n```rust\n// Extra small for inline text\nSpinner::new()\n .xsmall()\n .color(cx.theme().muted_foreground)\n\n// Small for buttons\nSpinner::new()\n .small()\n .color(cx.theme().primary_foreground)\n\n// Medium for general use (default)\nSpinner::new()\n .color(cx.theme().primary)\n\n// Large for prominent loading states\nSpinner::new()\n .large()\n .color(cx.theme().blue)\n\n// Custom size for specific requirements\nSpinner::new()\n .with_size(px(32.))\n .color(cx.theme().orange)\n```\n\n### In UI Components\n\n```rust\n// In a button\nButton::new(\"submit-btn\")\n .loading(true)\n .icon(\n Spinner::new()\n .small()\n .color(cx.theme().primary_foreground)\n )\n .label(\"Loading...\")\n\n// In a card header\ndiv()\n .flex()\n .items_center()\n .gap_2()\n .child(\"Processing...\")\n .child(\n Spinner::new()\n .small()\n .color(cx.theme().muted_foreground)\n )\n\n// Full-screen loading\ndiv()\n .flex()\n .items_center()\n .justify_center()\n .h_full()\n .w_full()\n .child(\n Spinner::new()\n .large()\n .color(cx.theme().primary)\n )\n```\n\n## Performance Considerations\n\n- The animation uses CSS transforms for optimal performance\n- Multiple spinners on the same page share the same animation timing\n- The component is lightweight and suitable for frequent updates\n- Consider using smaller sizes for better performance with many spinners\n\n## Common Patterns\n\n### Conditional Loading\n\n```rust\n// Show spinner only when loading\n.when(is_loading, |this| {\n this.child(\n Spinner::new()\n .small()\n .color(cx.theme().muted_foreground)\n )\n})\n```\n\n### Loading with Text\n\n```rust\n// Loading text with spinner\nh_flex()\n .items_center()\n .gap_2()\n .child(\n Spinner::new()\n .small()\n .color(cx.theme().primary)\n )\n .child(\"Loading data...\")\n```\n\n### Overlay Loading\n\n```rust\n// Full overlay with spinner\ndiv()\n .absolute()\n .inset_0()\n .flex()\n .items_center()\n .justify_center()\n .bg(cx.theme().background.alpha(0.8))\n .child(\n v_flex()\n .items_center()\n .gap_3()\n .child(\n Spinner::new()\n .large()\n .color(cx.theme().primary)\n )\n .child(\"Loading...\")\n )\n```\n" }, { "path": "docs/docs/components/stepper.md", "content": "---\ntitle: Stepper\ndescription: A step-by-step progress for users to navigate through a series of steps or stages.\n---\n\n# Stepper\n\nA step-by-step progress component that guides users through a series of steps or stages. Supports horizontal and vertical layouts, custom icons, and different sizes.\n\n## Import\n\n```rust\nuse gpui_component::stepper::{Stepper, StepperItem};\n```\n\n## Usage\n\n### Basic Stepper\n\nUse `selected_index` method to set current active step by index (0-based), default is `0`.\n\n```rust\nStepper::new(\"my-stepper\")\n .selected_index(0)\n .items([\n StepperItem::new().child(\"Step 1\"),\n StepperItem::new().child(\"Step 2\"),\n StepperItem::new().child(\"Step 3\"),\n ])\n .on_click(|step, _, _| {\n println!(\"Clicked step: {}\", step);\n })\n```\n\n### With Icons\n\n```rust\nuse gpui_component::IconName;\n\nStepper::new(\"icon-stepper\")\n .selected_index(0)\n .items([\n StepperItem::new()\n .icon(IconName::Calendar)\n .child(\"Order Details\"),\n StepperItem::new()\n .icon(IconName::Inbox)\n .child(\"Shipping\"),\n StepperItem::new()\n .icon(IconName::Frame)\n .child(\"Preview\"),\n StepperItem::new()\n .icon(IconName::Info)\n .child(\"Finish\"),\n ])\n```\n\n### Vertical Layout\n\n```rust\nStepper::new(\"vertical-stepper\")\n .vertical()\n .selected_index(2)\n .items_center()\n .items([\n StepperItem::new()\n .pb_8()\n .icon(IconName::Building2)\n .child(v_flex().child(\"Step 1\").child(\"Description for step 1.\")),\n StepperItem::new()\n .pb_8()\n .icon(IconName::Asterisk)\n .child(v_flex().child(\"Step 2\").child(\"Description for step 2.\")),\n StepperItem::new()\n .pb_8()\n .icon(IconName::Folder)\n .child(v_flex().child(\"Step 3\").child(\"Description for step 3.\")),\n StepperItem::new()\n .icon(IconName::CircleCheck)\n .child(v_flex().child(\"Step 4\").child(\"Description for step 4.\")),\n ])\n```\n\n### Text Center\n\nThe `text_center` method centers the text within each step item.\n\n```rust\nStepper::new(\"center-stepper\")\n .selected_index(0)\n .text_center(true)\n .items([\n StepperItem::new().child(\n v_flex()\n .items_center()\n .child(\"Step 1\")\n .child(\"Desc for step 1.\"),\n ),\n StepperItem::new().child(\n v_flex()\n .items_center()\n .child(\"Step 2\")\n .child(\"Desc for step 2.\"),\n ),\n StepperItem::new().child(\n v_flex()\n .items_center()\n .child(\"Step 3\")\n .child(\"Desc for step 3.\"),\n ),\n ])\n```\n\n### Different Sizes\n\n```rust\nuse gpui_component::{Sizable as _, Size};\n\nStepper::new(\"stepper\")\n .xsmall()\n .items([...])\n\nStepper::new(\"stepper\")\n .small()\n .items([...])\n\nStepper::new(\"stepper\")\n .large()\n .items([...])\n```\n\n### Disabled State\n\n```rust\nStepper::new(\"disabled-stepper\")\n .disabled(true)\n .items([\n StepperItem::new().child(\"Step 1\"),\n StepperItem::new().child(\"Step 2\"),\n ])\n```\n\n### Handle Click Events\n\n```rust\nStepper::new(\"my-stepper\")\n .selected_index(current_step)\n .items([\n StepperItem::new().child(\"Step 1\"),\n StepperItem::new().child(\"Step 2\"),\n StepperItem::new().child(\"Step 3\"),\n ])\n .on_click(cx.listener(|this, step, _, cx| {\n this.current_step = *step;\n cx.notify();\n }))\n```\n\n## API Reference\n\n- [Stepper]\n- [StepperItem]\n\n### Sizing\n\nImplements [Sizable] trait:\n\n- `xsmall()` - Extra small size\n- `small()` - Small size\n- `medium()` - Medium size (default)\n- `large()` - Large size\n\n## Examples\n\n### Multi-step Form\n\n```rust\nStepper::new(\"form-stepper\")\n .w_full()\n .selected_index(form_step)\n .items([\n StepperItem::new()\n .icon(IconName::User)\n .child(\"Personal Info\"),\n StepperItem::new()\n .icon(IconName::CreditCard)\n .child(\"Payment\"),\n StepperItem::new()\n .icon(IconName::CircleCheck)\n .child(\"Confirmation\"),\n ])\n .on_click(cx.listener(|this, step, _, cx| {\n this.form_step = *step;\n cx.notify();\n }))\n```\n\n### Disabled Individual Steps\n\n```rust\nStepper::new(\"stepper\")\n .selected_index(0)\n .items([\n StepperItem::new().child(\"Available\"),\n StepperItem::new().disabled(true).child(\"Locked\"),\n StepperItem::new().child(\"Available\"),\n ])\n```\n\n[Stepper]: https://docs.rs/gpui-component/latest/gpui_component/stepper/struct.Stepper.html\n[StepperItem]: https://docs.rs/gpui-component/latest/gpui_component/stepper/struct.StepperItem.html\n[Sizable]: https://docs.rs/gpui-component/latest/gpui_component/trait.Sizable.html\n" }, { "path": "docs/docs/components/switch.md", "content": "---\ntitle: Switch\ndescription: A control that allows the user to toggle between checked and not checked.\n---\n\n# Switch\n\nA toggle switch component for binary on/off states. Features smooth animations, different sizes, labels, disabled state, and customizable positioning.\n\n## Import\n\n```rust\nuse gpui_component::switch::Switch;\n```\n\n## Usage\n\n### Basic Switch\n\n```rust\nSwitch::new(\"my-switch\")\n .checked(false)\n .on_click(|checked, _, _| {\n println!(\"Switch is now: {}\", checked);\n })\n```\n\n### Controlled Switch\n\n```rust\nstruct MyView {\n is_enabled: bool,\n}\n\nimpl Render for MyView {\n fn render(&mut self, _: &mut Window, cx: &mut Context) -> impl IntoElement {\n Switch::new(\"switch\")\n .checked(self.is_enabled)\n .on_click(cx.listener(|view, checked, _, cx| {\n view.is_enabled = *checked;\n cx.notify();\n }))\n }\n}\n```\n\n### With Label\n\n```rust\nSwitch::new(\"notifications\")\n .label(\"Enable notifications\")\n .checked(true)\n .on_click(|checked, _, _| {\n println!(\"Notifications: {}\", if *checked { \"enabled\" } else { \"disabled\" });\n })\n```\n\n### Different Sizes\n\n```rust\n// Small switch\nSwitch::new(\"small-switch\")\n .small()\n .label(\"Small switch\")\n\n// Medium switch (default)\nSwitch::new(\"medium-switch\")\n .label(\"Medium switch\")\n\n// Using explicit size\nSwitch::new(\"custom-switch\")\n .with_size(Size::Small)\n .label(\"Custom size\")\n```\n\n### Disabled State\n\n```rust\n// Disabled unchecked\nSwitch::new(\"disabled-off\")\n .label(\"Disabled (off)\")\n .disabled(true)\n .checked(false)\n\n// Disabled checked\nSwitch::new(\"disabled-on\")\n .label(\"Disabled (on)\")\n .disabled(true)\n .checked(true)\n```\n\n### With Tooltip\n\n```rust\nSwitch::new(\"switch\")\n .label(\"Airplane mode\")\n .tooltip(\"Enable airplane mode to disable all wireless connections\")\n .checked(false)\n```\n\n## API Reference\n\n### Switch\n\n| Method | Description |\n| ------------------ | ----------------------------------------------------------- |\n| `new(id)` | Create a new switch with the given ID |\n| `checked(bool)` | Set the checked/toggled state |\n| `label(text)` | Set label text for the switch |\n| `label_side(side)` | Position label (Side::Left or Side::Right) |\n| `disabled(bool)` | Set disabled state |\n| `tooltip(text)` | Add tooltip text |\n| `on_click(fn)` | Callback when clicked, receives `&bool` (new checked state) |\n\n### Styling\n\nImplements `Sizable` and `Disableable` traits:\n\n- `small()` - Small switch size (28x16px toggle area)\n- `medium()` - Medium switch size (36x20px toggle area, default)\n- `with_size(size)` - Set explicit size\n- `disabled(bool)` - Disabled state\n\n### Styling Properties\n\nThe switch can also be styled using GPUI's styling methods:\n\n- `w(width)` - Custom width\n- `h(height)` - Custom height\n- Standard margin, padding, and positioning methods\n\n## Examples\n\n### Settings Panel\n\n```rust\nstruct SettingsView {\n marketing_emails: bool,\n security_emails: bool,\n push_notifications: bool,\n}\n\nv_flex()\n .gap_4()\n .child(\n // Setting with description\n v_flex()\n .gap_2()\n .child(\n h_flex()\n .items_center()\n .justify_between()\n .child(\n v_flex()\n .child(Label::new(\"Marketing emails\").text_lg())\n .child(\n Label::new(\"Receive emails about new products and features\")\n .text_color(theme.muted_foreground)\n )\n )\n .child(\n Switch::new(\"marketing\")\n .checked(self.marketing_emails)\n .on_click(cx.listener(|view, checked, _, cx| {\n view.marketing_emails = *checked;\n cx.notify();\n }))\n )\n )\n )\n .child(\n // Simple setting\n h_flex()\n .items_center()\n .justify_between()\n .child(Label::new(\"Push notifications\"))\n .child(\n Switch::new(\"push\")\n .checked(self.push_notifications)\n .on_click(cx.listener(|view, checked, _, cx| {\n view.push_notifications = *checked;\n cx.notify();\n }))\n )\n )\n```\n\n### Compact Settings List\n\n```rust\nv_flex()\n .gap_3()\n .child(\n Switch::new(\"wifi\")\n .label(\"Wi-Fi\")\n .label_side(Side::Left)\n .checked(true)\n .small()\n )\n .child(\n Switch::new(\"bluetooth\")\n .label(\"Bluetooth\")\n .label_side(Side::Left)\n .checked(false)\n .small()\n )\n .child(\n Switch::new(\"airplane\")\n .label(\"Airplane Mode\")\n .label_side(Side::Left)\n .checked(false)\n .disabled(true)\n .small()\n )\n```\n\n### Form Integration\n\n```rust\nstruct FormData {\n subscribe_newsletter: bool,\n enable_notifications: bool,\n remember_me: bool,\n}\n\nv_flex()\n .gap_4()\n .p_4()\n .border_1()\n .border_color(theme.border)\n .rounded(theme.radius)\n .child(\n Switch::new(\"newsletter\")\n .label(\"Subscribe to newsletter\")\n .checked(self.subscribe_newsletter)\n .tooltip(\"Receive monthly updates about new features\")\n .on_click(cx.listener(|view, checked, _, cx| {\n view.subscribe_newsletter = *checked;\n cx.notify();\n }))\n )\n .child(\n Switch::new(\"notifications\")\n .label(\"Enable notifications\")\n .checked(self.enable_notifications)\n .on_click(cx.listener(|view, checked, _, cx| {\n view.enable_notifications = *checked;\n cx.notify();\n }))\n )\n .child(\n Switch::new(\"remember\")\n .label(\"Remember me\")\n .checked(self.remember_me)\n .small()\n .on_click(cx.listener(|view, checked, _, cx| {\n view.remember_me = *checked;\n cx.notify();\n }))\n )\n```\n\n### Custom Styling\n\n```rust\nSwitch::new(\"custom\")\n .label(\"Custom styled switch\")\n .w(px(200.))\n .checked(true)\n .on_click(|checked, _, _| {\n println!(\"Custom switch: {}\", checked);\n })\n```\n\n## Animation\n\nThe switch features smooth animations:\n\n- **Toggle animation**: 150ms duration when switching states\n- **Background color transition**: Changes from switch color to primary color\n- **Position animation**: Smooth movement of the toggle indicator\n- **Disabled state**: Animations are disabled when the switch is disabled\n" }, { "path": "docs/docs/components/table.md", "content": "---\ntitle: Table\ndescription: A basic table component for directly rendering tabular data.\n---\n\n# Table\n\nA simple, stateless, composable table component for rendering tabular data. Unlike [DataTable], this component does not include virtual scrolling, sorting, or column management — it is designed for straightforward data display using a declarative API.\n\n## Import\n\n```rust\nuse gpui_component::table::{\n Table, TableHeader, TableBody, TableFooter,\n TableRow, TableHead, TableCell, TableCaption,\n};\n```\n\n## Usage\n\n### Basic Table\n\n```rust\nTable::new()\n .child(TableHeader::new().child(\n TableRow::new()\n .child(TableHead::new().child(\"Name\"))\n .child(TableHead::new().child(\"Email\"))\n .child(TableHead::new().text_right().child(\"Amount\"))\n ))\n .child(TableBody::new()\n .child(TableRow::new()\n .child(TableCell::new().child(\"John\"))\n .child(TableCell::new().child(\"john@example.com\"))\n .child(TableCell::new().text_right().child(\"$100.00\")))\n .child(TableRow::new()\n .child(TableCell::new().child(\"Jane\"))\n .child(TableCell::new().child(\"jane@example.com\"))\n .child(TableCell::new().text_right().child(\"$200.00\")))\n )\n .child(TableCaption::new().child(\"A list of recent invoices.\"))\n```\n\n### With Footer\n\n```rust\nTable::new()\n .child(TableHeader::new().child(\n TableRow::new()\n .child(TableHead::new().child(\"Invoice\"))\n .child(TableHead::new().child(\"Status\"))\n .child(TableHead::new().text_right().child(\"Amount\"))\n ))\n .child(TableBody::new()\n .child(TableRow::new()\n .child(TableCell::new().child(\"INV001\"))\n .child(TableCell::new().child(\"Paid\"))\n .child(TableCell::new().text_right().child(\"$250.00\")))\n )\n .child(TableFooter::new().child(\n TableRow::new()\n .child(TableCell::new().child(\"Total\"))\n .child(TableCell::new().child(\"\"))\n .child(TableCell::new().text_right().child(\"$250.00\"))\n ))\n```\n\n### Column Widths\n\nUse `.w()` on `TableHead` and `TableCell` to set fixed column widths:\n\n```rust\nTableRow::new()\n .child(TableHead::new().w(px(80.)).child(\"ID\"))\n .child(TableHead::new().child(\"Name\")) // flex-1\n .child(TableHead::new().w(px(120.)).child(\"Date\"))\n```\n\n### Text Alignment\n\n```rust\n// Center-aligned header\nTableHead::new().text_center().child(\"Status\")\n\n// Right-aligned cell (e.g., for numbers)\nTableCell::new().text_right().child(\"$1,000.00\")\n```\n\n### Without Border (via Styled)\n\nAll table sub-components implement the `Styled` trait, so you can customize styles directly:\n\n```rust\n// Remove border and rounded corners\nTable::new()\n .border_0()\n .rounded_none()\n .child(/* ... */)\n```\n\n### Custom Styling\n\nSince all components implement `Styled`, you can apply any GPUI style:\n\n```rust\n// Custom row hover\nTableRow::new()\n .bg(cx.theme().table_even)\n .child(/* ... */)\n\n// Custom cell padding\nTableCell::new()\n .px_4()\n .child(\"Custom padded content\")\n```\n\n## Sub-components\n\n| Component | Description |\n|-----------|-------------|\n| `Table` | Root container with border, rounded corners, and background |\n| `TableHeader` | Header section with distinct background and font weight |\n| `TableBody` | Body section wrapping data rows |\n| `TableFooter` | Footer section with top border |\n| `TableRow` | A flex row with bottom border |\n| `TableHead` | Header cell with alignment and width options |\n| `TableCell` | Data cell with alignment and width options |\n| `TableCaption` | Caption text below the table |\n\n## API Reference\n\n### Table\n\n- `new()` - Create a new table\n- Implements `Styled`, `ParentElement`, `Sizable`, `RenderOnce`\n\n### TableHead / TableCell\n\n- `new()` - Create a new head/cell\n- `w(width)` - Set fixed width (otherwise flex-1)\n- `text_center()` - Center-align content\n- `text_right()` - Right-align content\n- Implements `Styled`, `ParentElement`, `RenderOnce`\n\n### TableHeader / TableBody / TableFooter / TableRow / TableCaption\n\n- `new()` - Create a new instance\n- Implements `Styled`, `ParentElement`, `RenderOnce`\n\n## Table vs DataTable\n\n| Feature | Table | DataTable |\n|---------|-------|-----------|\n| Virtual scrolling | No | Yes |\n| Column sorting | No | Yes |\n| Column resizing | No | Yes |\n| Column moving | No | Yes |\n| Cell selection | No | Yes |\n| Row selection | No | Yes |\n| Infinite loading | No | Yes |\n| Keyboard navigation | No | Yes |\n| State management | Stateless | TableState |\n| Best for | Small, static data | Large, interactive datasets |\n\n[DataTable]: ./data-table.md\n" }, { "path": "docs/docs/components/tabs.md", "content": "---\ntitle: Tabs\ndescription: A set of layered sections of content—known as tab panels—that are displayed one at a time.\n---\n\n# Tabs\n\nA tabbed interface component for organizing content into separate sections. Supports multiple variants, sizes, navigation controls, and interactive features like reordering and prefix/suffix elements.\n\n## Import\n\n```rust\nuse gpui_component::tab::{Tab, TabBar};\n```\n\n## Usage\n\n### Basic Tabs\n\n```rust\nTabBar::new(\"tabs\")\n .selected_index(0)\n .on_click(|selected_index, _, _| {\n println!(\"Tab {} selected\", selected_index);\n })\n .child(Tab::new().label(\"Account\"))\n .child(Tab::new().label(\"Profile\"))\n .child(Tab::new().label(\"Settings\"))\n```\n\n### Tab Variants\n\n#### Default Tabs\n\n```rust\nTabBar::new(\"default-tabs\")\n .selected_index(0)\n .child(Tab::new().label(\"Account\"))\n .child(Tab::new().label(\"Profile\"))\n .child(Tab::new().label(\"Documents\"))\n```\n\n#### Underline Tabs\n\n```rust\nTabBar::new(\"underline-tabs\")\n .underline()\n .selected_index(0)\n .child(Tab::new().label(\"Account\"))\n .child(Tab::new().label(\"Profile\"))\n .child(Tab::new().label(\"Documents\"))\n```\n\n#### Pill Tabs\n\n```rust\nTabBar::new(\"pill-tabs\")\n .pill()\n .selected_index(0)\n .child(Tab::new().label(\"Account\"))\n .child(Tab::new().label(\"Profile\"))\n .child(Tab::new().label(\"Documents\"))\n```\n\n#### Outline Tabs\n\n```rust\nTabBar::new(\"outline-tabs\")\n .outline()\n .selected_index(0)\n .child(Tab::new().label(\"Account\"))\n .child(Tab::new().label(\"Profile\"))\n .child(Tab::new().label(\"Documents\"))\n```\n\n#### Segmented Tabs\n\n```rust\nuse gpui_component::IconName;\n\nTabBar::new(\"segmented-tabs\")\n .segmented()\n .selected_index(0)\n .child(IconName::Bot)\n .child(IconName::Calendar)\n .child(IconName::Map)\n .children(vec![\"Settings\", \"About\"])\n```\n\n### Tab Sizes\n\n```rust\n// Extra Small\nTabBar::new(\"tabs\").xsmall()\n .child(Tab::new().label(\"Small\"))\n\n// Small\nTabBar::new(\"tabs\").small()\n .child(Tab::new().label(\"Small\"))\n\n// Medium (default)\nTabBar::new(\"tabs\")\n .child(Tab::new().label(\"Medium\"))\n\n// Large\nTabBar::new(\"tabs\").large()\n .child(Tab::new().label(\"Large\"))\n```\n\n### Tabs with Icons\n\n```rust\nuse gpui_component::{Icon, IconName};\n\nTabBar::new(\"icon-tabs\")\n .child(Tab::default().icon(IconName::User).with_variant(TabVariant::Tab))\n .child(Tab::default().icon(IconName::Settings).with_variant(TabVariant::Tab))\n .child(Tab::default().icon(IconName::Mail).with_variant(TabVariant::Tab))\n```\n\n### Tabs with Prefix and Suffix\n\n```rust\nuse gpui_component::button::Button;\nuse gpui_component::{h_flex, IconName};\n\nTabBar::new(\"tabs-with-controls\")\n .prefix(\n h_flex()\n .gap_1()\n .child(Button::new(\"back\").ghost().xsmall().icon(IconName::ArrowLeft))\n .child(Button::new(\"forward\").ghost().xsmall().icon(IconName::ArrowRight))\n )\n .suffix(\n h_flex()\n .gap_1()\n .child(Button::new(\"inbox\").ghost().xsmall().icon(IconName::Inbox))\n .child(Button::new(\"more\").ghost().xsmall().icon(IconName::Ellipsis))\n )\n .child(Tab::new().label(\"Account\"))\n .child(Tab::new().label(\"Profile\"))\n .child(Tab::new().label(\"Settings\"))\n```\n\n### Disabled Tabs\n\n```rust\nTabBar::new(\"tabs-with-disabled\")\n .child(Tab::new().label(\"Account\"))\n .child(Tab::new().label(\"Profile\").disabled(true))\n .child(Tab::new().label(\"Settings\"))\n```\n\n### Dynamic Tabs\n\n```rust\nstruct TabsView {\n active_tab: usize,\n tabs: Vec,\n}\n\nimpl Render for TabsView {\n fn render(&mut self, _: &mut Window, cx: &mut Context) -> impl IntoElement {\n TabBar::new(\"dynamic-tabs\")\n .selected_index(self.active_tab)\n .on_click(cx.listener(|view, index, _, cx| {\n view.active_tab = *index;\n cx.notify();\n }))\n .children(\n self.tabs\n .iter()\n .map(|tab_name| Tab::new().label(tab_name.clone()))\n )\n }\n}\n```\n\n### Tabs with Menu\n\nUse `menu` option to enable a dropdown menu for tab selection when there are many tabs,\nthis is default `false`.\n\nIf enable, the will have a dropdown button at the end of the tab bar to show all tabs in a menu.\n\n```rust\nTabBar::new(\"tabs-with-menu\")\n .menu(true)\n .selected_index(0)\n .child(Tab::new().label(\"Account\"))\n .child(Tab::new().label(\"Profile\"))\n .child(Tab::new().label(\"Documents\"))\n .child(Tab::new().label(\"Mail\"))\n .child(Tab::new().label(\"Settings\"))\n```\n\n### Scrollable Tabs\n\n```rust\nuse gpui::ScrollHandle;\n\nstruct ScrollableTabsView {\n scroll_handle: ScrollHandle,\n}\n\nimpl Render for ScrollableTabsView {\n fn render(&mut self, _: &mut Window, _: &mut Context) -> impl IntoElement {\n TabBar::new(\"scrollable-tabs\")\n .track_scroll(&self.scroll_handle)\n .child(Tab::new().label(\"Very Long Tab Name 1\"))\n .child(Tab::new().label(\"Very Long Tab Name 2\"))\n .child(Tab::new().label(\"Very Long Tab Name 3\"))\n .child(Tab::new().label(\"Very Long Tab Name 4\"))\n .child(Tab::new().label(\"Very Long Tab Name 5\"))\n }\n}\n```\n\n### Individual Tab Configuration\n\n```rust\nTabBar::new(\"custom-tabs\")\n .child(\n Tab::new().label(\"Custom Tab\")\n .id(\"custom-id\")\n .prefix(IconName::Star)\n .suffix(IconName::X)\n .on_click(|_, _, _| {\n println!(\"Custom tab clicked\");\n })\n )\n```\n\n## API Reference\n\n### TabBar\n\n| Method | Description |\n| --------------------------- | -------------------------------------------------- |\n| `new(id)` | Create a new tab bar with the given ID |\n| `child(tab)` | Add a tab to the bar |\n| `children(tabs)` | Add multiple tabs to the bar |\n| `selected_index(index)` | Set the active tab index |\n| `on_click(fn)` | Callback when a tab is clicked, receives tab index |\n| `prefix(element)` | Add element before the tabs |\n| `suffix(element)` | Add element after the tabs |\n| `last_empty_space(element)` | Custom element for empty space at the end |\n| `track_scroll(handle)` | Enable scrolling with a scroll handle |\n| `with_menu(bool)` | Enable dropdown menu for tab selection |\n\n### TabBar Variants\n\n| Method | Description |\n| ----------------------- | ------------------------------------ |\n| `with_variant(variant)` | Set the tab variant for all children |\n| `underline()` | Use underline variant |\n| `pill()` | Use pill variant |\n| `outline()` | Use outline variant |\n| `segmented()` | Use segmented variant |\n\n### Tab\n\n| Method | Description |\n| ----------------------- | ---------------------------------------------- |\n| `new(label)` | Create a new tab with a label |\n| `empty()` | Create an empty tab |\n| `icon(icon)` | Create a tab with only an icon |\n| `id(id)` | Set custom ID for the tab |\n| `with_variant(variant)` | Set the tab variant |\n| `pill()` | Use pill variant |\n| `outline()` | Use outline variant |\n| `segmented()` | Use segmented variant |\n| `underline()` | Use underline variant |\n| `prefix(element)` | Add element before tab content |\n| `suffix(element)` | Add element after tab content |\n| `disabled(bool)` | Set disabled state |\n| `selected(bool)` | Set selected state (usually handled by TabBar) |\n| `on_click(fn)` | Custom click handler for individual tab |\n\n### TabVariant\n\n```rust\npub enum TabVariant {\n Tab, // Default bordered tabs\n Outline, // Rounded outline tabs\n Pill, // Rounded pill-shaped tabs\n Segmented, // Segmented control style\n Underline, // Underline indicator tabs\n}\n```\n\n### Styling\n\nBoth `TabBar` and `Tab` implement `Sizable` trait:\n\n- `xsmall()` - Extra small size\n- `small()` - Small size\n- `medium()` - Medium size (default)\n- `large()` - Large size\n\n## Advanced Examples\n\n### Custom Tab Content\n\n```rust\nTab::empty()\n .child(\n h_flex()\n .items_center()\n .gap_2()\n .child(IconName::Folder)\n .child(\"Documents\")\n .child(\n div()\n .px_1()\n .py_0p5()\n .text_xs()\n .bg(cx.theme().accent)\n .text_color(cx.theme().accent_foreground)\n .rounded(cx.theme().radius.half())\n .child(\"12\")\n )\n )\n```\n\n### Tabs with State Management\n\n```rust\nstruct TabsWithContent {\n active_tab: usize,\n tab_contents: Vec,\n}\n\nimpl TabsWithContent {\n fn render_tab_content(&self, cx: &mut Context) -> impl IntoElement {\n match self.active_tab {\n 0 => div().child(\"Account content\"),\n 1 => div().child(\"Profile content\"),\n 2 => div().child(\"Settings content\"),\n _ => div().child(\"Unknown content\"),\n }\n }\n}\n\nimpl Render for TabsWithContent {\n fn render(&mut self, _: &mut Window, cx: &mut Context) -> impl IntoElement {\n v_flex()\n .child(\n TabBar::new(\"content-tabs\")\n .selected_index(self.active_tab)\n .on_click(cx.listener(|view, index, _, cx| {\n view.active_tab = *index;\n cx.notify();\n }))\n .child(Tab::new().label(\"Account\"))\n .child(Tab::new().label(\"Profile\"))\n .child(Tab::new().label(\"Settings\"))\n )\n .child(\n div()\n .flex_1()\n .p_4()\n .child(self.render_tab_content(cx))\n )\n }\n}\n```\n\n### Tabs with Close Buttons\n\nWhile the basic Tab component doesn't include closeable functionality, you can create closeable tabs using suffix elements:\n\n```rust\nstruct CloseableTabsView {\n tabs: Vec,\n active_tab: usize,\n}\n\nimpl CloseableTabsView {\n fn close_tab(&mut self, index: usize, cx: &mut Context) {\n if self.tabs.len() > 1 {\n self.tabs.remove(index);\n if self.active_tab >= index && self.active_tab > 0 {\n self.active_tab -= 1;\n }\n cx.notify();\n }\n }\n}\n\nimpl Render for CloseableTabsView {\n fn render(&mut self, _: &mut Window, cx: &mut Context) -> impl IntoElement {\n TabBar::new(\"closeable-tabs\")\n .selected_index(self.active_tab)\n .on_click(cx.listener(|view, index, _, cx| {\n view.active_tab = *index;\n cx.notify();\n }))\n .children(\n self.tabs\n .iter()\n .enumerate()\n .map(|(index, tab_name)| {\n Tab::new().label(tab_name.clone())\n .suffix(\n Button::new(format!(\"close-{}\", index))\n .icon(IconName::X)\n .ghost()\n .xsmall()\n .on_click(cx.listener(move |view, _, _, cx| {\n view.close_tab(index, cx);\n }))\n )\n })\n )\n }\n}\n```\n\n## Notes\n\n- The `TabBar` manages the selection state of all child tabs\n- Individual tab `on_click` handlers are ignored when `TabBar.on_click` is set\n- Tabs automatically inherit the variant and size from their parent `TabBar`\n- The `with_menu` option adds a dropdown for tab selection when there are many tabs\n- Scrolling is automatically enabled when tabs overflow the container width\n- The dock system provides advanced closeable tab functionality for complex layouts\n" }, { "path": "docs/docs/components/tag.md", "content": "---\ntitle: Tag\ndescription: A short item that can be used to categorize or label content.\n---\n\n# Tag\n\nA versatile tag component for categorizing and labeling content. Tags are compact visual indicators that help organize information and display metadata like categories, status, or properties.\n\n## Import\n\n```rust\nuse gpui_component::tag::Tag;\n```\n\n## Usage\n\n### Basic Tags\n\n```rust\n// Primary tag (default filled style)\nTag::primary().child(\"Primary\")\n\n// Secondary tag\nTag::secondary().child(\"Secondary\")\n\n// Status tags\nTag::danger().child(\"Danger\")\nTag::success().child(\"Success\")\nTag::warning().child(\"Warning\")\nTag::info().child(\"Info\")\n```\n\n### Tag Variants\n\n```rust\n// Semantic variants\nTag::primary().child(\"Featured\")\nTag::secondary().child(\"Category\")\nTag::danger().child(\"Critical\")\nTag::success().child(\"Completed\")\nTag::warning().child(\"Pending\")\nTag::info().child(\"Information\")\n```\n\n### Outline Tags\n\n```rust\n// Outline style variants\nTag::primary().outline().child(\"Primary Outline\")\nTag::secondary().outline().child(\"Secondary Outline\")\nTag::danger().outline().child(\"Error Outline\")\nTag::success().outline().child(\"Success Outline\")\nTag::warning().outline().child(\"Warning Outline\")\nTag::info().outline().child(\"Info Outline\")\n```\n\n### Tag Sizes\n\n```rust\n// Small size\nTag::primary().small().child(\"Small Tag\")\n\n// Medium size (default)\nTag::primary().child(\"Medium Tag\")\n```\n\n### Custom Colors\n\n```rust\nuse gpui_component::ColorName;\n\n// Using predefined color names\nTag::color(ColorName::Blue).child(\"Blue Tag\")\nTag::color(ColorName::Green).child(\"Green Tag\")\nTag::color(ColorName::Purple).child(\"Purple Tag\")\nTag::color(ColorName::Pink).child(\"Pink Tag\")\nTag::color(ColorName::Indigo).child(\"Indigo Tag\")\nTag::color(ColorName::Yellow).child(\"Yellow Tag\")\nTag::color(ColorName::Red).child(\"Red Tag\")\n```\n\n### Custom HSLA Colors\n\n```rust\nuse gpui::{hsla, Hsla};\n\n// Custom colors with HSLA values\nlet color = hsla(220.0 / 360.0, 0.8, 0.5, 1.0);\nlet foreground = hsla(0.0, 0.0, 1.0, 1.0);\nlet border = hsla(220.0 / 360.0, 0.8, 0.4, 1.0);\n\nTag::custom(color, foreground, border).child(\"Custom Color\")\n```\n\n### Rounded Corners\n\n```rust\nuse gpui::px;\n\n// Fully rounded tags\nTag::primary().rounded_full().child(\"Rounded Full\")\n\n// Custom border radius\nTag::primary().rounded(px(4.0)).child(\"Custom Radius\")\n\n// Square corners\nTag::primary().rounded(px(0.0)).child(\"Square Tag\")\n```\n\n### Combined Styles\n\n```rust\n// Small tags with full rounding\nTag::primary().small().rounded_full().child(\"Small Pill\")\nTag::success().small().rounded_full().child(\"Success Pill\")\n\n// Outline tags with custom rounding\nTag::warning().outline().rounded(px(2.0)).child(\"Custom Outline\")\n\n// Color tags with outline style\nTag::color(ColorName::Purple).outline().child(\"Purple Outline\")\n```\n\n## Tag Categories and Use Cases\n\n### Status Tags\n\n```rust\n// Task or item status\nTag::success().child(\"Completed\")\nTag::warning().child(\"In Progress\")\nTag::danger().child(\"Failed\")\nTag::info().child(\"Pending Review\")\n```\n\n### Category Labels\n\n```rust\n// Content categorization\nTag::secondary().child(\"Technology\")\nTag::color(ColorName::Blue).child(\"Design\")\nTag::color(ColorName::Green).child(\"Development\")\nTag::color(ColorName::Purple).child(\"Marketing\")\n```\n\n### Priority Indicators\n\n```rust\n// Priority levels\nTag::danger().child(\"High Priority\")\nTag::warning().child(\"Medium Priority\")\nTag::secondary().child(\"Low Priority\")\n```\n\n### Feature Tags\n\n```rust\n// Feature flags or attributes\nTag::primary().small().child(\"New\")\nTag::success().small().child(\"Popular\")\nTag::info().small().child(\"Beta\")\nTag::warning().small().child(\"Limited\")\n```\n\n## API Reference\n\n### Tag Creation Methods\n\n| Method | Description |\n| --------------------------- | ------------------------------------------ |\n| `primary()` | Create a primary tag (blue theme) |\n| `secondary()` | Create a secondary tag (gray theme) |\n| `danger()` | Create a danger tag (red theme) |\n| `success()` | Create a success tag (green theme) |\n| `warning()` | Create a warning tag (yellow/orange theme) |\n| `info()` | Create an info tag (blue theme) |\n| `color(ColorName)` | Create a tag with predefined color |\n| `custom(color, fg, border)` | Create a tag with custom HSLA colors |\n\n### Style Methods\n\n| Method | Description |\n| ----------------- | -------------------------------------------- |\n| `outline()` | Apply outline style (transparent background) |\n| `rounded(radius)` | Set custom border radius |\n| `rounded_full()` | Apply full rounding (pill shape) |\n\n### Size Methods (from Sizable trait)\n\n| Method | Description |\n| ----------------- | -------------------------------- |\n| `small()` | Small tag size (reduced padding) |\n| `with_size(size)` | Set custom size |\n\n### Content Methods (from ParentElement trait)\n\n| Method | Description |\n| ---------------- | ---------------------------- |\n| `child(element)` | Add child content to the tag |\n\n## Examples\n\n### Tag Collections\n\n```rust\nuse gpui_component::{h_flex, v_flex};\n\n// Horizontal tag group\nh_flex()\n .gap_2()\n .child(Tag::primary().child(\"React\"))\n .child(Tag::success().child(\"TypeScript\"))\n .child(Tag::info().child(\"Next.js\"))\n .child(Tag::warning().child(\"Beta\"))\n\n// Vertical tag stack\nv_flex()\n .gap_1()\n .child(Tag::danger().small().child(\"Critical\"))\n .child(Tag::warning().small().child(\"Important\"))\n .child(Tag::secondary().small().child(\"Normal\"))\n```\n\n### Status Dashboard Tags\n\n```rust\n// System status indicators\nh_flex()\n .gap_3()\n .child(\n v_flex()\n .child(\"API Status:\")\n .child(Tag::success().child(\"Operational\"))\n )\n .child(\n v_flex()\n .child(\"Database:\")\n .child(Tag::warning().child(\"Maintenance\"))\n )\n .child(\n v_flex()\n .child(\"Cache:\")\n .child(Tag::danger().child(\"Down\"))\n )\n```\n\n### Interactive Tag Lists\n\n```rust\n// Note: Event handling would require additional state management\n// Tags themselves are display components\n\n// Filter tags (would need click handlers)\nh_flex()\n .gap_2()\n .child(Tag::primary().small().child(\"All\"))\n .child(Tag::secondary().outline().small().child(\"Active\"))\n .child(Tag::secondary().outline().small().child(\"Completed\"))\n .child(Tag::secondary().outline().small().child(\"Archived\"))\n```\n\n### Color-Coded Categories\n\n```rust\nuse gpui_component::ColorName;\n\n// Content type tags\nh_flex()\n .gap_2()\n .flex_wrap()\n .child(Tag::color(ColorName::Red).child(\"Bug\"))\n .child(Tag::color(ColorName::Blue).child(\"Feature\"))\n .child(Tag::color(ColorName::Green).child(\"Enhancement\"))\n .child(Tag::color(ColorName::Purple).child(\"Documentation\"))\n .child(Tag::color(ColorName::Yellow).child(\"Question\"))\n .child(Tag::color(ColorName::Pink).child(\"Discussion\"))\n```\n\n### Pill-Style Tags\n\n```rust\n// Skill tags with pill styling\nh_flex()\n .gap_2()\n .flex_wrap()\n .child(Tag::color(ColorName::Blue).rounded_full().small().child(\"Rust\"))\n .child(Tag::color(ColorName::Green).rounded_full().small().child(\"JavaScript\"))\n .child(Tag::color(ColorName::Purple).rounded_full().small().child(\"Python\"))\n .child(Tag::color(ColorName::Red).rounded_full().small().child(\"Go\"))\n```\n\n## Behavior Notes\n\n- Tags automatically adjust their appearance based on the current theme\n- Outline tags maintain border visibility across different backgrounds\n- Small tags use reduced padding and border radius for compact layouts\n- Custom colors support both light and dark theme adaptations\n- Tags are display components and don't include built-in interaction handlers\n- Multiple tags can be combined in flex layouts for tag clouds or lists\n- Border radius automatically scales based on tag size unless explicitly overridden\n\n## Design Guidelines\n\n### When to Use Tags\n\n- **Categorization**: Group content by type, topic, or theme\n- **Status Indication**: Show state, progress, or health status\n- **Metadata Display**: Present attributes, properties, or classifications\n- **Filtering**: Visual indicators for active filters or selections\n- **Feature Flags**: Highlight new, beta, or special features\n\n### Color Usage\n\n- **Semantic Colors**: Use danger (red) for errors, success (green) for completion, warning (yellow) for caution, info (blue) for information\n- **Category Colors**: Use the ColorName variants for content categorization where color coding helps with recognition\n- **Custom Colors**: Reserve for brand colors or specific design system requirements\n\n### Size Guidelines\n\n- **Small Tags**: Use for compact layouts, metadata, or when space is limited\n- **Medium Tags**: Default size for most use cases, provides good readability and click targets\n- **Rounding**: Use `rounded_full()` for pill-style tags, custom `rounded()` for specific design requirements\n" }, { "path": "docs/docs/components/title-bar.md", "content": "---\ntitle: TitleBar\ndescription: A custom window title bar component with window controls and custom content support.\n---\n\n# TitleBar\n\nTitleBar provides a customizable window title bar that can replace the default OS title bar. It includes platform-specific window controls (minimize, maximize, close) and supports custom content and styling. The component automatically adapts to different operating systems (macOS, Windows, Linux) with appropriate behaviors and visual styles.\n\n## Import\n\n```rust\nuse gpui_component::TitleBar;\n```\n\n## Usage\n\n### Basic Title Bar\n\n```rust\nTitleBar::new()\n .child(div().child(\"My Application\"))\n```\n\n### Title Bar with Custom Content\n\n```rust\nTitleBar::new()\n .child(\n div()\n .flex()\n .items_center()\n .gap_3()\n .child(\"App Name\")\n .child(Badge::new().count(5))\n )\n .child(\n div()\n .flex()\n .items_center()\n .gap_2()\n .child(Button::new(\"settings\").icon(IconName::Settings))\n .child(Button::new(\"profile\").icon(IconName::User))\n )\n```\n\n### Title Bar with Menu Bar\n\n```rust\nTitleBar::new()\n .child(\n div()\n .flex()\n .items_center()\n .child(AppMenuBar::new(window, cx))\n )\n .child(\n div()\n .flex()\n .items_center()\n .justify_end()\n .gap_2()\n .child(Button::new(\"github\").icon(IconName::GitHub))\n .child(Button::new(\"notifications\").icon(IconName::Bell))\n )\n```\n\n### Title Bar with Window Controls (Linux only)\n\n```rust\nTitleBar::new()\n .on_close_window(|_, window, cx| {\n // Custom close behavior\n window.push_notification(\"Saving before close...\", cx);\n // Perform cleanup\n window.remove_window();\n })\n .child(div().child(\"Custom Close Behavior\"))\n```\n\n### Styled Title Bar\n\n```rust\nTitleBar::new()\n .bg(cx.theme().primary)\n .border_color(cx.theme().primary_border)\n .child(\n div()\n .text_color(cx.theme().primary_foreground)\n .child(\"Styled Title Bar\")\n )\n```\n\n### Title Bar Options for Window\n\n```rust\nuse gpui::{WindowOptions, TitlebarOptions};\n\nWindowOptions {\n titlebar: Some(TitleBar::title_bar_options()),\n ..Default::default()\n}\n```\n\n## Platform Differences\n\n### macOS\n\n- Uses native traffic light buttons (minimize, maximize, close)\n- Traffic light position is automatically set to `(9px, 9px)`\n- Double-click behavior calls `window.titlebar_double_click()`\n- Left padding accounts for traffic light buttons (80px)\n- Appears transparent by default\n\n### Windows\n\n- Custom window control buttons with system integration\n- Uses `WindowControlArea` for proper window management\n- Control buttons have hover and active states\n- Fixed button width of 34px each\n- Left padding is 12px\n\n### Linux\n\n- Custom window control buttons with manual event handling\n- Supports custom close window callback via `on_close_window()`\n- Double-click to maximize/restore window\n- Right-click shows window context menu\n- Window dragging supported in title bar area\n\n## API Reference\n\n### TitleBar\n\n| Method | Description |\n| --------------------- | ---------------------------------------- |\n| `new()` | Create a new title bar |\n| `child(element)` | Add child element to the title bar |\n| `on_close_window(fn)` | Custom close window handler (Linux only) |\n| `title_bar_options()` | Get default titlebar options for window |\n\n### Window Configuration\n\n| Property | Description |\n| ------------------------ | --------------------------------------------------- |\n| `appears_transparent` | Make title bar transparent (default: true) |\n| `traffic_light_position` | Position of macOS traffic lights |\n| `title` | Window title (optional when using custom title bar) |\n\n### Title Bar Element (Internal)\n\nThe `TitleBarElement` provides window dragging functionality on Linux platforms.\n\n### Constants\n\n| Constant | Value | Description |\n| ------------------------ | ------------------------------- | ------------------------- |\n| `TITLE_BAR_HEIGHT` | `34px` | Standard title bar height |\n| `TITLE_BAR_LEFT_PADDING` | `80px` (macOS), `12px` (others) | Left padding for content |\n\n## Examples\n\n### Application Title Bar\n\n```rust\nuse gpui_component::{TitleBar, button::Button, menu::AppMenuBar};\n\nstruct AppTitleBar {\n app_menu_bar: Entity,\n}\n\nimpl Render for AppTitleBar {\n fn render(&mut self, window: &mut Window, cx: &mut Context) -> impl IntoElement {\n TitleBar::new()\n .child(\n div()\n .flex()\n .items_center()\n .child(self.app_menu_bar.clone())\n )\n .child(\n div()\n .flex()\n .items_center()\n .justify_end()\n .gap_2()\n .child(\n Button::new(\"settings\")\n .ghost()\n .icon(IconName::Settings)\n )\n .child(\n Button::new(\"help\")\n .ghost()\n .icon(IconName::HelpCircle)\n )\n )\n }\n}\n```\n\n### Title Bar with Breadcrumbs\n\n```rust\nTitleBar::new()\n .child(\n div()\n .flex()\n .items_center()\n .gap_2()\n .child(\"Home\")\n .child(IconName::ChevronRight)\n .child(\"Documents\")\n .child(IconName::ChevronRight)\n .child(\"Project\")\n )\n .child(\n div()\n .flex()\n .items_center()\n .gap_1()\n .child(Button::new(\"search\").icon(IconName::Search).ghost())\n .child(Button::new(\"more\").icon(IconName::MoreHorizontal).ghost())\n )\n```\n\n### Custom Themed Title Bar\n\n```rust\nTitleBar::new()\n .h(px(40.)) // Custom height\n .bg(cx.theme().accent)\n .border_b_2()\n .border_color(cx.theme().accent_border)\n .child(\n div()\n .flex()\n .items_center()\n .text_color(cx.theme().accent_foreground)\n .font_weight_semibold()\n .child(\"Custom Theme App\")\n )\n```\n\n### Title Bar with Status\n\n```rust\nTitleBar::new()\n .child(\n div()\n .flex()\n .items_center()\n .gap_3()\n .child(\"My Editor\")\n .child(\n div()\n .text_xs()\n .text_color(cx.theme().muted_foreground)\n .child(\"● Unsaved changes\")\n )\n )\n .child(\n div()\n .flex()\n .items_center()\n .gap_2()\n .child(\n div()\n .text_xs()\n .text_color(cx.theme().muted_foreground)\n .child(\"Line 42, Col 12\")\n )\n .child(\n Button::new(\"sync\")\n .small()\n .ghost()\n .icon(IconName::RotateCcw)\n .tooltip(\"Sync changes\")\n )\n )\n```\n\n### Minimal Title Bar\n\n```rust\nTitleBar::new()\n .child(\n div()\n .text_center()\n .flex_1()\n .child(\"Document.txt\")\n )\n```\n\n### Title Bar with Search\n\n```rust\nTitleBar::new()\n .child(\n div()\n .flex()\n .items_center()\n .gap_3()\n .child(\"File Explorer\")\n .child(\n Input::new(\"search\")\n .placeholder(\"Search files...\")\n .w(px(200.))\n .small()\n )\n )\n```\n\n## Notes\n\n- The title bar automatically handles platform-specific styling and behavior\n- Window controls are only rendered on Windows and Linux platforms\n- The component integrates with GPUI's window management system\n- Custom styling should consider platform conventions\n- Window dragging is handled automatically in appropriate areas\n" }, { "path": "docs/docs/components/toggle.md", "content": "---\ntitle: Toggle\ndescription: A button-style toggle component for binary on/off or selected states.\n---\n\n# Toggle\n\nA button-style toggle component that represents on/off or selected states. Unlike a traditional switch, toggles appear as buttons that can be pressed in or out. They're perfect for toolbar buttons, filter options, or any binary choice that benefits from a button-like appearance.\n\n## Import\n\n```rust\nuse gpui_component::button::{Toggle, ToggleGroup};\n```\n\n## Usage\n\n### Basic Toggle\n\n```rust\nToggle::new(\"toggle1\").\n .label(\"Toggle me\")\n .checked(false)\n .on_click(|checked, _, _| {\n println!(\"Toggle is now: {}\", checked);\n })\n```\n\nHere, we can use `on_click` to handle toggle state changes. The callback receives the **new checked state** as a `bool`.\n\n### Icon Toggle\n\n```rust\nuse gpui_component::IconName;\n\nToggle::new(\"toggle2\")\n .icon(IconName::Eye)\n .checked(true)\n .on_click(|checked, _, _| {\n println!(\"Visibility: {}\", if *checked { \"shown\" } else { \"hidden\" });\n })\n```\n\n### Controlled Toggle\n\n```rust\nstruct MyView {\n is_active: bool,\n}\n\nimpl Render for MyView {\n fn render(&mut self, _: &mut Window, cx: &mut Context) -> impl IntoElement {\n Toggle::new(\"active\")\n .label(\"Active\")\n .checked(self.is_active)\n .on_click(cx.listener(|view, checked, _, cx| {\n view.is_active = *checked;\n cx.notify();\n }))\n }\n}\n```\n\n### Toggle Variants\n\n```rust\n// Ghost toggle (default)\nToggle::new(\"ghost-toggle\")\n .ghost()\n .label(\"Ghost\")\n\n// Outline toggle\nToggle::new(\"outline-toggle\")\n .outline()\n .label(\"Outline\")\n```\n\n### Different Sizes\n\n```rust\n// Extra small\nToggle::new(\"xs-toggle\")\n .icon(IconName::Star)\n .xsmall()\n\n// Small\nToggle::new(\"small-toggle\")\n .label(\"Small\")\n .small()\n\n// Medium (default)\nToggle::new(\"medium-toggle\")\n .label(\"Medium\")\n\n\n// Large\nToggle::new(\"large-toggle\")\n .label(\"Large\")\n .large()\n```\n\n### Disabled State\n\n```rust\n// Disabled unchecked\nToggle::new(\"disabled-toggle\")\n .label(\"Disabled\")\n .disabled(true)\n .checked(false)\n\n// Disabled checked\nToggle::new(\"disabled-checked-toggle\")\n .label(\"Selected (Disabled)\")\n .disabled(true)\n .checked(true)\n```\n\n## Toggle vs Switch\n\n| Feature | Toggle | Switch |\n| ---------------------- | ------------------------------------------- | ----------------------------------------- |\n| **Appearance** | Button-like, can be pressed in/out | Traditional switch with sliding indicator |\n| **Use Cases** | Toolbar buttons, filters, binary options | Settings, preferences, on/off states |\n| **Visual Style** | Rectangular button shape | Rounded switch track with thumb |\n| **State Indication** | Background color change, pressed appearance | Position of sliding thumb |\n| **Multiple Selection** | Supports groups with multiple selection | Individual switches only |\n\n**Use Toggle when you want:**\n\n- Button-like appearance for binary states\n- Grouping multiple related options\n- Toolbar or filter interfaces\n- Options that feel like \"selections\" rather than \"settings\"\n\n**Use Switch when you want:**\n\n- Traditional on/off control appearance\n- Settings or preferences interface\n- Clear visual indication of state with sliding animation\n- Individual boolean controls\n\n## Integration with ToggleGroup\n\nToggle buttons can be grouped together using `ToggleGroup` for related options:\n\n### Basic Toggle Group\n\n```rust\nToggleGroup::new(\"filter-group\")\n .child(Toggle::new(0).icon(IconName::Bell))\n .child(Toggle::new(1).icon(IconName::Bot))\n .child(Toggle::new(2).icon(IconName::Inbox))\n .child(Toggle::new(3).label(\"Other\"))\n .on_click(|checkeds, _, _| {\n println!(\"Selected toggles: {:?}\", checkeds);\n })\n```\n\nThe `on_click` callback receives a `Vec` representing the **new checked state** of each toggle in the group.\n\n### Toggle Group with Controlled State\n\n```rust\nstruct FilterView {\n notifications: bool,\n bots: bool,\n inbox: bool,\n other: bool,\n}\n\nimpl Render for FilterView {\n fn render(&mut self, _: &mut Window, cx: &mut Context) -> impl IntoElement {\n ToggleGroup::new(\"filters\")\n .child(Toggle::new(0).icon(IconName::Bell).checked(self.notifications))\n .child(Toggle::new(1).icon(IconName::Bot).checked(self.bots))\n .child(Toggle::new(2).icon(IconName::Inbox).checked(self.inbox))\n .child(Toggle::new(3).label(\"Other\").checked(self.other))\n .on_click(cx.listener(|view, checkeds, _, cx| {\n view.notifications = checkeds[0];\n view.bots = checkeds[1];\n view.inbox = checkeds[2];\n view.other = checkeds[3];\n cx.notify();\n }))\n }\n}\n```\n\n### Toggle Group Variants and Sizes\n\n```rust\n// Outline variant, small size\nToggleGroup::new(\"compact-filters\")\n .outline()\n .small()\n .child(Toggle::new(0).icon(IconName::Filter))\n .child(Toggle::new(1).icon(IconName::Sort))\n .child(Toggle::new(2).icon(IconName::Search))\n\n// Ghost variant (default), extra small\nToggleGroup::new(\"mini-toolbar\")\n .xsmall()\n .child(Toggle::new(0).icon(IconName::Bold))\n .child(Toggle::new(1).icon(IconName::Italic))\n .child(Toggle::new(2).icon(IconName::Underline))\n```\n\n## Event Handling\n\n### Individual Toggle Events\n\n```rust\nToggle::new(\"subscribe-toggle\")\n .label(\"Subscribe\")\n .on_click(|checked, window, cx| {\n if *checked {\n // Handle subscription logic\n println!(\"Subscribed!\");\n } else {\n // Handle unsubscription logic\n println!(\"Unsubscribed!\");\n }\n })\n```\n\n## Examples\n\n### Toolbar with Toggle Buttons\n\n```rust\nstruct EditorToolbar {\n bold: bool,\n italic: bool,\n underline: bool,\n strikethrough: bool,\n}\n\nh_flex()\n .gap_1()\n .p_2()\n .bg(cx.theme().background)\n .border_1()\n .border_color(cx.theme().border)\n .child(\n ToggleGroup::new(\"formatting\")\n .small()\n .child(Toggle::new(0).icon(IconName::Bold).checked(self.bold))\n .child(Toggle::new(1).icon(IconName::Italic).checked(self.italic))\n .child(Toggle::new(2).icon(IconName::Underline).checked(self.underline))\n .child(Toggle::new(3).icon(IconName::Strikethrough).checked(self.strikethrough))\n .on_click(cx.listener(|view, states, _, cx| {\n view.bold = states[0];\n view.italic = states[1];\n view.underline = states[2];\n view.strikethrough = states[3];\n cx.notify();\n }))\n )\n```\n\n### Filter Interface\n\n```rust\nstruct FilterPanel {\n show_completed: bool,\n show_pending: bool,\n show_cancelled: bool,\n show_urgent: bool,\n}\n\nv_flex()\n .gap_3()\n .p_4()\n .child(Label::new(\"Filter by status\"))\n .child(\n ToggleGroup::new(\"status-filters\")\n .outline()\n .child(Toggle::new(0).label(\"Completed\").checked(self.show_completed))\n .child(Toggle::new(1).label(\"Pending\").checked(self.show_pending))\n .child(Toggle::new(2).label(\"Cancelled\").checked(self.show_cancelled))\n .on_click(cx.listener(|view, states, _, cx| {\n view.show_completed = states[0];\n view.show_pending = states[1];\n view.show_cancelled = states[2];\n cx.notify();\n }))\n )\n .child(\n Toggle::new(\"urgent-filter\")\n .label(\"Show urgent only\")\n .checked(self.show_urgent)\n .on_click(cx.listener(|view, checked, _, cx| {\n view.show_urgent = *checked;\n cx.notify();\n }))\n )\n```\n\n### Settings with Individual Toggles\n\n```rust\nstruct NotificationSettings {\n email_notifications: bool,\n push_notifications: bool,\n marketing_emails: bool,\n}\n\nv_flex()\n .gap_4()\n .child(\n h_flex()\n .items_center()\n .justify_between()\n .child(\n v_flex()\n .child(Label::new(\"Email notifications\"))\n .child(\n Label::new(\"Receive notifications via email\")\n .text_color(cx.theme().muted_foreground)\n .text_sm()\n )\n )\n .child(\n Toggle::new(\"email-notifications\")\n .icon(IconName::Mail)\n .checked(self.email_notifications)\n .on_click(cx.listener(|view, checked, _, cx| {\n view.email_notifications = *checked;\n cx.notify();\n }))\n )\n )\n .child(\n h_flex()\n .items_center()\n .justify_between()\n .child(Label::new(\"Push notifications\"))\n .child(\n Toggle::new(\"push-notifications\")\n .icon(IconName::Bell)\n .checked(self.push_notifications)\n .on_click(cx.listener(|view, checked, _, cx| {\n view.push_notifications = *checked;\n cx.notify();\n }))\n )\n )\n```\n\n### Multi-select Options\n\n```rust\nstruct SelectionView {\n selected_categories: Vec,\n}\n\nimpl SelectionView {\n fn categories() -> Vec<&'static str> {\n vec![\"Technology\", \"Design\", \"Business\", \"Science\", \"Art\"]\n }\n}\n\nv_flex()\n .gap_3()\n .child(Label::new(\"Select categories of interest\"))\n .child(\n ToggleGroup::new(\"categories\")\n .children(\n Self::categories()\n .into_iter()\n .enumerate()\n .map(|(i, category)| {\n Toggle::new(i)\n .label(category)\n .checked(self.selected_categories.get(i).copied().unwrap_or(false))\n })\n )\n .on_click(cx.listener(|view, states, _, cx| {\n view.selected_categories = states.clone();\n cx.notify();\n }))\n )\n```\n\n## Best Practices\n\n1. **Use meaningful labels**: Choose clear, descriptive text for toggle labels\n2. **Group related options**: Use ToggleGroup for logically related binary choices\n3. **Provide visual feedback**: The checked state should be clearly distinguishable\n4. **Consider context**: Use toggles for options that feel like \"selections\" rather than \"settings\"\n5. **Maintain state consistency**: Ensure toggle state reflects the actual application state\n6. **Accessible labels**: Provide tooltips or ARIA labels for icon-only toggles\n" }, { "path": "docs/docs/components/tooltip.md", "content": "---\ntitle: Tooltip\ndescription: Display helpful information on hover or focus, with support for keyboard shortcuts and custom content.\n---\n\n# Tooltip\n\nA versatile tooltip component that displays helpful information when hovering over or focusing on elements. Supports text content, custom elements, keyboard shortcuts, different trigger methods, and positioning options.\n\n## Import\n\n```rust\nuse gpui_component::tooltip::Tooltip;\n```\n\n## Usage\n\n### Basic Tooltip with Text\n\n```rust\n// Simple text tooltip\ndiv()\n .child(\"Hover me\")\n .id(\"basic-tooltip\")\n .tooltip(|window, cx| {\n Tooltip::new(\"This is a helpful tooltip\").build(window, cx)\n })\n```\n\n### Button with Tooltip\n\n```rust\nButton::new(\"save-btn\")\n .label(\"Save\")\n .tooltip(\"Save the current document\")\n```\n\n### Tooltip with Action/Keybinding\n\n```rust\nactions!(my_actions, [SaveDocument]);\n\nButton::new(\"save-btn\")\n .label(\"Save\")\n .tooltip_with_action(\n \"Save the current document\",\n &SaveDocument,\n Some(\"MyContext\")\n )\n```\n\n### Custom Element Tooltip\n\n```rust\ndiv()\n .child(\"Hover for rich content\")\n .id(\"rich-tooltip\")\n .tooltip(|window, cx| {\n Tooltip::element(|_, cx| {\n h_flex()\n .gap_x_1()\n .child(IconName::Info)\n .child(\n div()\n .child(\"Muted Text\")\n .text_color(cx.theme().muted_foreground)\n )\n .child(\n div()\n .child(\"Danger Text\")\n .text_color(cx.theme().danger)\n )\n .child(IconName::ArrowUp)\n })\n .build(window, cx)\n })\n```\n\n### Tooltip with Manual Keybinding\n\n```rust\ndiv()\n .child(\"Custom keybinding\")\n .id(\"custom-kb\")\n .tooltip(|window, cx| {\n Tooltip::new(\"Delete item\")\n .key_binding(Some(Kbd::new(\"Delete\")))\n .build(window, cx)\n })\n```\n\n## Advanced Usage\n\n### Components with Built-in Tooltip Support\n\nMany components have built-in tooltip methods:\n\n```rust\n// Button\nButton::new(\"btn\")\n .label(\"Click me\")\n .tooltip(\"This button performs an action\")\n\n// Switch\nSwitch::new(\"toggle\")\n .label(\"Enable notifications\")\n .tooltip(\"Toggle push notifications on/off\")\n\n// Checkbox\nCheckbox::new(\"check\")\n .label(\"Remember me\")\n .tooltip(\"Keep me logged in for 30 days\")\n\n// Radio\nRadio::new(\"option\")\n .label(\"Option 1\")\n .tooltip(\"Select this option to enable feature X\")\n```\n\n### Complex Tooltip Content\n\n```rust\ndiv()\n .child(\"Hover for details\")\n .id(\"complex-tooltip\")\n .tooltip(|window, cx| {\n Tooltip::element(|_, cx| {\n v_flex()\n .gap_2()\n .child(\n h_flex()\n .gap_1()\n .child(IconName::User)\n .child(\"User Information\")\n .text_sm()\n .font_semibold()\n )\n .child(\n div()\n .child(\"Last login: 2 hours ago\")\n .text_xs()\n .text_color(cx.theme().muted_foreground)\n )\n .child(\n div()\n .child(\"Status: Active\")\n .text_xs()\n .text_color(cx.theme().success)\n )\n })\n .build(window, cx)\n })\n```\n\n### Tooltip in Form Elements\n\n```rust\nv_flex()\n .gap_4()\n .child(\n Input::new(\"email\")\n .placeholder(\"Enter your email\")\n .tooltip(\"We'll never share your email address\")\n )\n .child(\n Input::new(\"password\")\n .input_type(InputType::Password)\n .placeholder(\"Password\")\n .tooltip(\"Must be at least 8 characters with special characters\")\n )\n```\n\n## API Reference\n\n### Tooltip\n\n| Method | Description |\n| ------------------------- | -------------------------------------------- |\n| `new(text)` | Create a tooltip with text content |\n| `element(builder)` | Create a tooltip with custom element content |\n| `action(action, context)` | Set action to display keybinding information |\n| `key_binding(kbd)` | Set manual keybinding information |\n| `build(window, cx)` | Build and return the tooltip as AnyView |\n\n### Built-in Tooltip Methods\n\nComponents with tooltip support typically provide these methods:\n\n| Method | Description |\n| -------------------------------------------- | --------------------------------------- |\n| `tooltip(text)` | Add simple text tooltip |\n| `tooltip_with_action(text, action, context)` | Add tooltip with action keybinding |\n| `tooltip(closure)` | Add custom tooltip with builder closure |\n\n### Tooltip Styling\n\nThe tooltip automatically applies theme-appropriate styling:\n\n- Background: `theme.popover`\n- Text color: `theme.popover_foreground`\n- Border: `theme.border`\n- Shadow: Medium drop shadow\n- Border radius: 6px\n- Font: System UI font\n\nYou can apply additional styling using the `Styled` trait:\n\n```rust\nTooltip::new(\"Custom styled tooltip\")\n .bg(cx.theme().accent)\n .text_color(cx.theme().accent_foreground)\n .build(window, cx)\n```\n\n## Examples\n\n### Toolbar with Tooltips\n\n```rust\nh_flex()\n .gap_1()\n .child(\n Button::new(\"new\")\n .icon(IconName::Plus)\n .tooltip_with_action(\"Create new file\", &NewFile, Some(\"Editor\"))\n )\n .child(\n Button::new(\"open\")\n .icon(IconName::FolderOpen)\n .tooltip_with_action(\"Open file\", &OpenFile, Some(\"Editor\"))\n )\n .child(\n Button::new(\"save\")\n .icon(IconName::Save)\n .tooltip_with_action(\"Save file\", &SaveFile, Some(\"Editor\"))\n )\n```\n\n### Status Indicators with Tooltips\n\n```rust\nh_flex()\n .gap_2()\n .child(\n div()\n .size_3()\n .rounded_full()\n .bg(cx.theme().success)\n .tooltip(|window, cx| {\n Tooltip::new(\"Connected to server\").build(window, cx)\n })\n )\n .child(\n div()\n .size_3()\n .rounded_full()\n .bg(cx.theme().warning)\n .tooltip(|window, cx| {\n Tooltip::new(\"Limited connectivity\").build(window, cx)\n })\n )\n```\n\n### Interactive Elements with Rich Tooltips\n\n```rust\nv_flex()\n .gap_3()\n .child(\n div()\n .p_2()\n .border_1()\n .border_color(cx.theme().border)\n .rounded(cx.theme().radius)\n .child(\"File: document.txt\")\n .id(\"file-item\")\n .tooltip(|window, cx| {\n Tooltip::element(|_, cx| {\n v_flex()\n .gap_1()\n .child(\n h_flex()\n .gap_2()\n .child(IconName::File)\n .child(\"document.txt\")\n .text_sm()\n .font_medium()\n )\n .child(\n div()\n .child(\"Size: 2.4 KB\")\n .text_xs()\n .text_color(cx.theme().muted_foreground)\n )\n .child(\n div()\n .child(\"Modified: 2 hours ago\")\n .text_xs()\n .text_color(cx.theme().muted_foreground)\n )\n .child(\n h_flex()\n .gap_1()\n .child(Kbd::new(\"Enter\"))\n .child(\"to open\")\n .text_xs()\n .text_color(cx.theme().muted_foreground)\n )\n })\n .build(window, cx)\n })\n )\n```\n\n### Form Validation with Tooltips\n\n```rust\nstruct FormView {\n email_error: Option,\n password_error: Option,\n}\n\nv_flex()\n .gap_4()\n .child(\n Input::new(\"email\")\n .placeholder(\"Email address\")\n .when_some(self.email_error.clone(), |this, error| {\n this.tooltip(move |window, cx| {\n Tooltip::element(|_, cx| {\n h_flex()\n .gap_1()\n .child(IconName::AlertCircle)\n .child(error.clone())\n .text_color(cx.theme().destructive)\n })\n .build(window, cx)\n })\n })\n )\n```\n\n## Best Practices\n\n### Content Guidelines\n\n- **Be concise**: Keep tooltip text short and to the point\n- **Be helpful**: Provide additional context, not redundant information\n- **Use proper tone**: Match your application's voice and tone\n- **Avoid critical info**: Don't put essential information only in tooltips\n\n### Usage Guidelines\n\n- **Progressive disclosure**: Use tooltips for additional context, not primary information\n- **Consistency**: Use consistent tooltip patterns throughout your application\n- **Performance**: Avoid complex content in frequently triggered tooltips\n- **Testing**: Test tooltips with both mouse and keyboard interaction\n\n### Examples of Good Tooltip Content\n\n```rust\n// Good: Provides helpful context\nButton::new(\"delete\")\n .icon(IconName::Trash)\n .tooltip(\"Delete this item permanently\")\n\n// Good: Explains abbreviation\ndiv()\n .child(\"CPU: 45%\")\n .tooltip(\"Central Processing Unit usage\")\n\n// Good: Describes action with keybinding\nButton::new(\"undo\")\n .icon(IconName::Undo)\n .tooltip_with_action(\"Undo last action\", &Undo, Some(\"Editor\"))\n```\n\n### Examples to Avoid\n\n```rust\n// Avoid: Redundant information\nButton::new(\"save\")\n .label(\"Save\")\n .tooltip(\"Save\") // Doesn't add value\n\n// Avoid: Critical information\nButton::new(\"delete\")\n .tooltip(\"This will permanently delete all your files\") // Too important for tooltip only\n```\n" }, { "path": "docs/docs/components/tree.md", "content": "---\ntitle: Tree\ndescription: A hierarchical tree view component for displaying and navigating tree-structured data.\n---\n\n# Tree\n\nA versatile tree component for displaying hierarchical data with expand/collapse functionality, keyboard navigation, and custom item rendering. Perfect for file explorers, navigation menus, or any nested data structure.\n\n## Import\n\n```rust\nuse gpui_component::tree::{tree, TreeState, TreeItem, TreeEntry};\n```\n\n## Usage\n\n### Basic Tree\n\n```rust\n// Create tree state\nlet tree_state = cx.new(|cx| {\n TreeState::new(cx).items(vec![\n TreeItem::new(\"src\", \"src\")\n .expanded(true)\n .child(TreeItem::new(\"src/lib.rs\", \"lib.rs\"))\n .child(TreeItem::new(\"src/main.rs\", \"main.rs\")),\n TreeItem::new(\"Cargo.toml\", \"Cargo.toml\"),\n TreeItem::new(\"README.md\", \"README.md\"),\n ])\n});\n\n// Render tree\ntree(&tree_state, |ix, entry, selected, window, cx| {\n ListItem::new(ix)\n .child(\n h_flex()\n .gap_2()\n .child(entry.item().label.clone())\n )\n})\n```\n\n### File Tree with Icons\n\n```rust\nuse gpui_component::{ListItem, IconName, h_flex};\n\ntree(&tree_state, |ix, entry, selected, window, cx| {\n let item = entry.item();\n let icon = if !entry.is_folder() {\n IconName::File\n } else if entry.is_expanded() {\n IconName::FolderOpen\n } else {\n IconName::Folder\n };\n\n ListItem::new(ix)\n .selected(selected)\n .pl(px(16.) * entry.depth() + px(12.)) // Indent based on depth\n .child(\n h_flex()\n .gap_2()\n .child(icon)\n .child(item.label.clone())\n )\n .on_click(cx.listener(move |_, _, _, _| {\n // Handle item click\n }))\n})\n```\n\n### Dynamic Tree Loading\n\n```rust\nimpl MyView {\n fn load_files(&mut self, path: PathBuf, cx: &mut Context) {\n let tree_state = self.tree_state.clone();\n cx.spawn(async move |cx| {\n let items = build_file_items(&path).await;\n tree_state.update(cx, |state, cx| {\n state.set_items(items, cx);\n })\n }).detach();\n }\n}\n\nfn build_file_items(path: &Path) -> Vec {\n let mut items = Vec::new();\n if let Ok(entries) = std::fs::read_dir(path) {\n for entry in entries.flatten() {\n let path = entry.path();\n let name = path.file_name()\n .and_then(|n| n.to_str())\n .unwrap_or(\"Unknown\")\n .to_string();\n\n if path.is_dir() {\n let children = build_file_items(&path);\n items.push(TreeItem::new(path.to_string_lossy(), name)\n .children(children));\n } else {\n items.push(TreeItem::new(path.to_string_lossy(), name));\n }\n }\n }\n items\n}\n```\n\n### Tree with Selection Handling\n\n```rust\nstruct MyTreeView {\n tree_state: Entity,\n selected_item: Option,\n}\n\nimpl MyTreeView {\n fn handle_selection(&mut self, item: TreeItem, cx: &mut Context) {\n self.selected_item = Some(item.clone());\n println!(\"Selected: {} ({})\", item.label, item.id);\n cx.notify();\n }\n}\n\n// In render method\ntree(&self.tree_state, {\n let view = cx.entity();\n move |ix, entry, selected, window, cx| {\n view.update(cx, |this, cx| {\n ListItem::new(ix)\n .selected(selected)\n .child(entry.item().label.clone())\n .on_click(cx.listener({\n let item = entry.item().clone();\n move |this, _, _, cx| {\n this.handle_selection(item.clone(), cx);\n }\n }))\n })\n }\n})\n```\n\n### Disabled Items\n\n```rust\nTreeItem::new(\"protected\", \"Protected Folder\")\n .disabled(true)\n .child(TreeItem::new(\"secret.txt\", \"secret.txt\"))\n```\n\n### Programmatic Tree Control\n\n```rust\n// Get current selection\nif let Some(entry) = tree_state.read(cx).selected_entry() {\n println!(\"Current selection: {}\", entry.item().label);\n}\n\n// Set selection programmatically (by selected_index)\ntree_state.update(cx, |state, cx| {\n state.set_selected_index(Some(2), cx); // Select third item\n});\n\n// Set selection programmatically (by tree item)\ntree_state.update(cx, |state, cx| {\n state.set_selected_item(Some(item), cx); // Select third item\n});\n\n// Scroll to specific item\ntree_state.update(cx, |state, _| {\n state.scroll_to_item(5, gpui::ScrollStrategy::Center);\n});\n\n// Clear selection (by selected_index)\ntree_state.update(cx, |state, cx| {\n state.set_selected_index(None, cx);\n});\n\n// Clear selection (by tree item)\ntree_state.update(cx, |state, cx| {\n state.set_selected_item(None, cx);\n});\n```\n\n## API Reference\n\n### TreeState\n\n| Method | Description |\n|--------------------------------|----------------------------------|\n| `new(cx)` | Create a new tree state |\n| `items(items)` | Set initial tree items |\n| `set_items(items, cx)` | Update tree items and notify |\n| `selected_index()` | Get currently selected index |\n| `set_selected_index(ix, cx)` | Set selected index |\n| `set_selected_item(item, cx)` | Set selected by tree item |\n| `selected_item(item, cx)` | Get currently selected tree item |\n| `selected_entry()` | Get currently selected entry |\n| `scroll_to_item(ix, strategy)` | Scroll to specific item |\n\n### TreeItem\n\n| Method | Description |\n| ----------------- | -------------------------------------- |\n| `new(id, label)` | Create new tree item with ID and label |\n| `child(item)` | Add single child item |\n| `children(items)` | Add multiple child items |\n| `expanded(bool)` | Set expanded state |\n| `disabled(bool)` | Set disabled state |\n| `is_folder()` | Check if item has children |\n| `is_expanded()` | Check if item is expanded |\n| `is_disabled()` | Check if item is disabled |\n\n### TreeEntry\n\n| Method | Description |\n| --------------- | --------------------------- |\n| `item()` | Get the source TreeItem |\n| `depth()` | Get item depth in tree |\n| `is_folder()` | Check if entry has children |\n| `is_expanded()` | Check if entry is expanded |\n| `is_disabled()` | Check if entry is disabled |\n\n### tree() Function\n\n| Parameter | Description |\n| ------------- | ------------------------------------- |\n| `state` | `Entity` for managing tree |\n| `render_item` | Closure for rendering each item |\n\n#### Render Item Closure\n\n```rust\nFn(usize, &TreeEntry, bool, &mut Window, &mut App) -> ListItem\n```\n\n- `usize`: Item index in flattened tree\n- `&TreeEntry`: Tree entry with item and metadata\n- `bool`: Whether item is currently selected\n- `&mut Window`: Current window context\n- `&mut App`: Application context\n- Returns: `ListItem` for rendering\n\n## Examples\n\n### Lazy Loading Tree\n\n```rust\nstruct LazyTreeView {\n tree_state: Entity,\n loaded_paths: HashSet,\n}\n\nimpl LazyTreeView {\n fn load_children(&mut self, item_id: &str, cx: &mut Context) {\n if self.loaded_paths.contains(item_id) {\n return;\n }\n\n let path = PathBuf::from(item_id);\n if path.is_dir() {\n let tree_state = self.tree_state.clone();\n let item_id = item_id.to_string();\n\n cx.spawn(async move |cx| {\n let children = load_directory_children(&path).await;\n tree_state.update(cx, |state, cx| {\n // Update specific item with loaded children\n state.update_item_children(&item_id, children, cx);\n })\n }).detach();\n\n self.loaded_paths.insert(item_id.to_string());\n }\n }\n}\n```\n\n### Search and Filter\n\n```rust\nstruct SearchableTree {\n tree_state: Entity,\n original_items: Vec,\n search_query: String,\n}\n\nimpl SearchableTree {\n fn filter_tree(&mut self, query: &str, cx: &mut Context) {\n self.search_query = query.to_string();\n\n let filtered_items = if query.is_empty() {\n self.original_items.clone()\n } else {\n filter_tree_items(&self.original_items, query)\n };\n\n self.tree_state.update(cx, |state, cx| {\n state.set_items(filtered_items, cx);\n });\n }\n}\n\nfn filter_tree_items(items: &[TreeItem], query: &str) -> Vec {\n items.iter()\n .filter_map(|item| {\n if item.label.to_lowercase().contains(&query.to_lowercase()) {\n Some(item.clone().expanded(true)) // Auto-expand matches\n } else {\n // Check if any children match\n let filtered_children = filter_tree_items(&item.children, query);\n if !filtered_children.is_empty() {\n Some(item.clone()\n .children(filtered_children)\n .expanded(true))\n } else {\n None\n }\n }\n })\n .collect()\n}\n```\n\n### Multi-Select Tree\n\n```rust\nstruct MultiSelectTree {\n tree_state: Entity,\n selected_items: HashSet,\n}\n\nimpl MultiSelectTree {\n fn toggle_selection(&mut self, item_id: &str, cx: &mut Context) {\n if self.selected_items.contains(item_id) {\n self.selected_items.remove(item_id);\n } else {\n self.selected_items.insert(item_id.to_string());\n }\n cx.notify();\n }\n\n fn is_selected(&self, item_id: &str) -> bool {\n self.selected_items.contains(item_id)\n }\n}\n\n// In render method\ntree(&self.tree_state, {\n let view = cx.entity();\n move |ix, entry, _selected, window, cx| {\n view.update(cx, |this, cx| {\n let item = entry.item();\n let is_multi_selected = this.is_selected(&item.id);\n\n ListItem::new(ix)\n .selected(is_multi_selected)\n .child(\n h_flex()\n .gap_2()\n .child(checkbox().checked(is_multi_selected))\n .child(item.label.clone())\n )\n .on_click(cx.listener({\n let item_id = item.id.clone();\n move |this, _, _, cx| {\n this.toggle_selection(&item_id, cx);\n }\n }))\n })\n }\n})\n```\n\n## Keyboard Navigation\n\nThe Tree component supports comprehensive keyboard navigation:\n\n| Key | Action |\n| ------- | ----------------------------------------- |\n| `↑` | Select previous item |\n| `↓` | Select next item |\n| `←` | Collapse current folder or move to parent |\n| `→` | Expand current folder |\n| `Enter` | Toggle expand/collapse for folders |\n| `Space` | Custom action (configurable) |\n\n```rust\n// Custom keyboard handling\ntree(&tree_state)\n .key_context(\"MyTree\")\n .on_action(cx.listener(|this, action: &MyCustomAction, _, cx| {\n // Handle custom actions\n }))\n```\n" }, { "path": "docs/docs/components/virtual-list.md", "content": "---\ntitle: VirtualList\ndescription: High-performance virtualized list component for rendering large datasets with variable item sizes.\n---\n\n# VirtualList\n\nVirtualList is a high-performance component designed for efficiently rendering large datasets by only rendering visible items. Unlike uniform lists, VirtualList supports variable item sizes, making it perfect for complex layouts like tables with different row heights or dynamic content.\n\n## Import\n\n```rust\nuse gpui_component::{\n v_virtual_list, h_virtual_list, VirtualListScrollHandle,\n scroll::{Scrollbar, ScrollbarState, ScrollbarAxis},\n};\nuse std::rc::Rc;\nuse gpui::{px, size, ScrollStrategy, Size, Pixels};\n```\n\n## Usage\n\n### Basic Vertical Virtual List\n\n```rust\nuse std::rc::Rc;\nuse gpui::{px, size, Size, Pixels};\n\npub struct ListViewExample {\n items: Vec,\n item_sizes: Rc>>,\n scroll_handle: VirtualListScrollHandle,\n}\n\nimpl ListViewExample {\n fn new(cx: &mut Context) -> Self {\n let items = (0..5000).map(|i| format!(\"Item {}\", i)).collect::>();\n let item_sizes = Rc::new(items.iter().map(|_| size(px(200.), px(30.))).collect());\n\n Self {\n items,\n item_sizes,\n scroll_handle: VirtualListScrollHandle::new(),\n }\n }\n}\n\nimpl Render for ListViewExample {\n fn render(&mut self, _: &mut Window, cx: &mut Context) -> impl IntoElement {\n v_virtual_list(\n cx.entity().clone(),\n \"my-list\",\n self.item_sizes.clone(),\n |view, visible_range, _, cx| {\n visible_range\n .map(|ix| {\n div()\n .h(px(30.))\n .w_full()\n .bg(cx.theme().secondary)\n .child(format!(\"Item {}\", ix))\n })\n .collect()\n },\n )\n .track_scroll(&self.scroll_handle)\n }\n}\n```\n\n### Horizontal Virtual List\n\n```rust\nh_virtual_list(\n cx.entity().clone(),\n \"horizontal-list\",\n item_sizes.clone(),\n |view, visible_range, _, cx| {\n visible_range\n .map(|ix| {\n div()\n .w(px(120.)) // Width is used for horizontal lists\n .h_full()\n .bg(cx.theme().accent)\n .child(format!(\"Card {}\", ix))\n })\n .collect()\n },\n)\n.track_scroll(&scroll_handle)\n```\n\n### Variable Item Sizes\n\nVirtualList excels at handling items with different sizes:\n\n```rust\nlet item_sizes = Rc::new(\n (0..1000)\n .map(|i| {\n // Different heights based on index\n let height = if i % 5 == 0 {\n px(60.) // Header items are taller\n } else if i % 3 == 0 {\n px(45.) // Some items are medium\n } else {\n px(30.) // Regular items\n };\n size(px(300.), height)\n })\n .collect::>()\n);\n\nv_virtual_list(\n cx.entity().clone(),\n \"variable-list\",\n item_sizes.clone(),\n |view, visible_range, _, cx| {\n visible_range\n .map(|ix| {\n let content = if ix % 5 == 0 {\n format!(\"Header {}\", ix / 5)\n } else {\n format!(\"Item {}\", ix)\n };\n\n let bg_color = if ix % 5 == 0 {\n cx.theme().accent\n } else {\n cx.theme().secondary\n };\n\n div()\n .w_full()\n .h(item_sizes[ix].height)\n .bg(bg_color)\n .flex()\n .items_center()\n .px_4()\n .child(content)\n })\n .collect()\n },\n)\n```\n\n### Table-like Layout with Multiple Columns\n\nVirtualList can render complex layouts like tables:\n\n```rust\nv_virtual_list(\n cx.entity().clone(),\n \"table-list\",\n item_sizes.clone(),\n |view, visible_range, _, cx| {\n visible_range\n .map(|row_ix| {\n h_flex()\n .w_full()\n .h(px(40.))\n .border_b_1()\n .border_color(cx.theme().border)\n .children(\n // Multiple columns per row\n (0..5).map(|col_ix| {\n div()\n .flex_1()\n .h_full()\n .px_3()\n .flex()\n .items_center()\n .child(format!(\"R{}C{}\", row_ix, col_ix))\n })\n )\n })\n .collect()\n },\n)\n```\n\n## Scroll Handling\n\n### Basic Scroll Control\n\n```rust\npub struct ScrollableList {\n scroll_handle: VirtualListScrollHandle,\n scroll_state: ScrollbarState,\n}\n\nimpl Render for ScrollableList {\n fn render(&mut self, _: &mut Window, cx: &mut Context) -> impl IntoElement {\n div()\n .relative()\n .size_full()\n .child(\n v_virtual_list(/* ... */)\n .track_scroll(&self.scroll_handle)\n .p_4()\n .border_1()\n .border_color(cx.theme().border)\n )\n .child(\n // Add scrollbars\n div()\n .absolute()\n .top_0()\n .left_0()\n .right_0()\n .bottom_0()\n .child(\n Scrollbar::both(&self.scroll_state, &self.scroll_handle)\n .axis(ScrollbarAxis::Vertical)\n )\n )\n }\n}\n```\n\n### Programmatic Scrolling\n\n```rust\nimpl ScrollableList {\n // Scroll to specific item\n fn scroll_to_item(&self, index: usize) {\n self.scroll_handle.scroll_to_item(index, ScrollStrategy::Top);\n }\n\n // Center item in view\n fn center_item(&self, index: usize) {\n self.scroll_handle.scroll_to_item(index, ScrollStrategy::Center);\n }\n\n // Scroll to bottom\n fn scroll_to_bottom(&self) {\n self.scroll_handle.scroll_to_bottom();\n }\n\n // Get current scroll position\n fn get_scroll_offset(&self) -> Point {\n self.scroll_handle.offset()\n }\n\n // Set scroll position manually\n fn set_scroll_position(&self, offset: Point) {\n self.scroll_handle.set_offset(offset);\n }\n}\n```\n\n### Both Axis Scrolling\n\nFor content that scrolls in both directions:\n\n```rust\nv_virtual_list(\n cx.entity().clone(),\n \"both-axis\",\n item_sizes.clone(),\n |view, visible_range, _, cx| {\n visible_range\n .map(|ix| {\n // Wide content that requires horizontal scrolling\n h_flex()\n .gap_2()\n .children((0..20).map(|col| {\n div()\n .min_w(px(100.))\n .h(px(30.))\n .bg(cx.theme().secondary)\n .child(format!(\"R{}C{}\", ix, col))\n }))\n })\n .collect()\n },\n)\n.track_scroll(&scroll_handle)\n.child(\n Scrollbar::both(&scroll_state, &scroll_handle)\n .axis(ScrollbarAxis::Both)\n)\n```\n\n## Performance Optimization\n\n### Efficient Item Rendering\n\nOnly visible items are rendered, making VirtualList highly performant:\n\n```rust\n// The render function is only called for visible items\nv_virtual_list(\n cx.entity().clone(),\n \"efficient-list\",\n item_sizes.clone(),\n |view, visible_range, _, cx| {\n // visible_range contains only the items currently visible\n // This typically contains 10-20 items, not all 10,000\n println!(\"Rendering {} items out of {}\",\n visible_range.len(),\n view.total_items);\n\n visible_range\n .map(|ix| {\n // Complex rendering logic here\n // Only executed for visible items\n expensive_item_renderer(ix, cx)\n })\n .collect()\n },\n)\n```\n\n### Memory Management\n\nVirtualList automatically manages memory by:\n\n- Only rendering visible items\n- Reusing rendered elements when scrolling\n- Calculating precise visible ranges\n\n```rust\n// Large dataset - only visible items use memory\nlet large_dataset = (0..1_000_000).map(|i| format!(\"Item {}\", i)).collect();\n\n// Memory usage remains constant regardless of dataset size\nv_virtual_list(/* render only visible items */)\n```\n\n### Variable Heights with Caching\n\nFor dynamic content with calculated heights:\n\n```rust\nstruct DynamicItem {\n content: String,\n calculated_height: Option,\n}\n\nimpl MyView {\n fn calculate_item_size(&mut self, ix: usize) -> Size {\n if let Some(height) = self.items[ix].calculated_height {\n return size(px(300.), height);\n }\n\n // Calculate height based on content\n let content_lines = self.items[ix].content.lines().count();\n let height = px(20. + content_lines as f32 * 16.);\n\n // Cache the calculated height\n self.items[ix].calculated_height = Some(height);\n\n size(px(300.), height)\n }\n}\n```\n\n## Examples\n\n### File Explorer with Virtual Scrolling\n\n```rust\npub struct FileExplorer {\n files: Vec,\n item_sizes: Rc>>,\n scroll_handle: VirtualListScrollHandle,\n selected_index: Option,\n}\n\nimpl FileExplorer {\n fn calculate_item_heights(&mut self) {\n let sizes = self.files.iter().map(|file| {\n // Different heights for different file types\n let height = match file.file_type {\n FileType::Directory => px(40.),\n FileType::Image => px(60.), // Larger for thumbnails\n FileType::Document => px(35.),\n _ => px(30.),\n };\n size(px(400.), height)\n }).collect();\n\n self.item_sizes = Rc::new(sizes);\n }\n}\n\nimpl Render for FileExplorer {\n fn render(&mut self, _: &mut Window, cx: &mut Context) -> impl IntoElement {\n v_virtual_list(\n cx.entity().clone(),\n \"file-list\",\n self.item_sizes.clone(),\n |view, visible_range, _, cx| {\n visible_range\n .map(|ix| {\n let file = &view.files[ix];\n let is_selected = view.selected_index == Some(ix);\n\n div()\n .w_full()\n .h(view.item_sizes[ix].height)\n .px_3()\n .py_1()\n .flex()\n .items_center()\n .gap_2()\n .bg(if is_selected {\n cx.theme().accent\n } else {\n Color::transparent()\n })\n .hover(|style| style.bg(cx.theme().secondary_hover))\n .child(file_icon(&file.file_type))\n .child(file.name.clone())\n .child(\n div()\n .flex_1()\n .text_right()\n .text_xs()\n .text_color(cx.theme().muted_foreground)\n .child(format_file_size(file.size))\n )\n .on_click(cx.listener(move |view, _, _, cx| {\n view.selected_index = Some(ix);\n cx.notify();\n }))\n })\n .collect()\n },\n )\n .track_scroll(&self.scroll_handle)\n }\n}\n```\n\n### Chat Messages with Auto-scroll\n\n```rust\npub struct ChatWindow {\n messages: Vec,\n scroll_handle: VirtualListScrollHandle,\n auto_scroll: bool,\n}\n\nimpl ChatWindow {\n fn add_message(&mut self, message: ChatMessage, cx: &mut Context) {\n self.messages.push(message);\n\n // Recalculate item sizes\n self.update_item_sizes();\n\n if self.auto_scroll {\n // Scroll to bottom for new messages\n self.scroll_handle.scroll_to_bottom();\n }\n\n cx.notify();\n }\n\n fn update_item_sizes(&mut self) {\n let sizes = self.messages.iter().map(|msg| {\n // Calculate height based on message content\n let lines = msg.content.lines().count().max(1);\n let height = px(40. + (lines.saturating_sub(1)) as f32 * 16.);\n size(px(350.), height)\n }).collect();\n\n self.item_sizes = Rc::new(sizes);\n }\n}\n\nimpl Render for ChatWindow {\n fn render(&mut self, _: &mut Window, cx: &mut Context) -> impl IntoElement {\n v_flex()\n .size_full()\n .child(\n v_virtual_list(\n cx.entity().clone(),\n \"chat-messages\",\n self.item_sizes.clone(),\n |view, visible_range, _, cx| {\n visible_range\n .map(|ix| {\n let msg = &view.messages[ix];\n\n div()\n .w_full()\n .px_4()\n .py_2()\n .child(\n v_flex()\n .gap_1()\n .child(\n h_flex()\n .justify_between()\n .child(\n div()\n .text_sm()\n .font_weight(FontWeight::SEMIBOLD)\n .child(msg.author.clone())\n )\n .child(\n div()\n .text_xs()\n .text_color(cx.theme().muted_foreground)\n .child(format_timestamp(msg.timestamp))\n )\n )\n .child(\n div()\n .text_sm()\n .child(msg.content.clone())\n )\n )\n })\n .collect()\n },\n )\n .track_scroll(&self.scroll_handle)\n .flex_1()\n )\n .child(\n // Chat input at bottom\n div()\n .w_full()\n .h(px(60.))\n .border_t_1()\n .border_color(cx.theme().border)\n .child(\"Chat input here...\")\n )\n }\n}\n```\n\n### Data Grid with Fixed Headers\n\n```rust\npub struct DataGrid {\n headers: Vec,\n data: Vec>,\n column_widths: Vec,\n scroll_handle: VirtualListScrollHandle,\n}\n\nimpl Render for DataGrid {\n fn render(&mut self, _: &mut Window, cx: &mut Context) -> impl IntoElement {\n v_flex()\n .size_full()\n .child(\n // Fixed header\n h_flex()\n .w_full()\n .h(px(40.))\n .bg(cx.theme().secondary)\n .border_b_1()\n .border_color(cx.theme().border)\n .children(\n self.headers.iter().zip(&self.column_widths).map(|(header, &width)| {\n div()\n .w(width)\n .h_full()\n .px_3()\n .flex()\n .items_center()\n .font_weight(FontWeight::SEMIBOLD)\n .child(header.clone())\n })\n )\n )\n .child(\n // Virtual list for data rows\n v_virtual_list(\n cx.entity().clone(),\n \"data-rows\",\n Rc::new(vec![size(px(800.), px(32.)); self.data.len()]),\n |view, visible_range, _, cx| {\n visible_range\n .map(|row_ix| {\n h_flex()\n .w_full()\n .h(px(32.))\n .border_b_1()\n .border_color(cx.theme().border.opacity(0.5))\n .children(\n view.data[row_ix].iter().zip(&view.column_widths).map(|(cell, &width)| {\n div()\n .w(width)\n .h_full()\n .px_3()\n .flex()\n .items_center()\n .child(cell.clone())\n })\n )\n })\n .collect()\n },\n )\n .track_scroll(&self.scroll_handle)\n .flex_1()\n )\n }\n}\n```\n\n## Best Practices\n\n1. **Item Sizing**: Pre-calculate item sizes when possible for best performance\n2. **Memory Management**: Use VirtualList for any list with >50 items\n3. **Scroll Performance**: Avoid heavy computations in render functions\n4. **State Management**: Keep item state separate from rendering logic\n5. **Error Handling**: Handle edge cases like empty lists gracefully\n6. **Testing**: Test with various data sizes and scroll positions\n\n## Performance Tips\n\n1. **Pre-calculate Sizes**: Calculate item sizes upfront rather than during render\n2. **Minimize Re-renders**: Use stable item keys and avoid recreating render functions\n3. **Batch Updates**: Group multiple data changes together\n4. **Efficient Rendering**: Keep item render functions lightweight\n5. **Memory Monitoring**: Monitor memory usage with very large datasets\n" }, { "path": "docs/docs/context.md", "content": "---\ntitle: Context\ndescription: Learn about the Window and Context in GPUI.\norder: -4\n---\n\nThe [Window], [App], [Context] and [Entity] are most important things in GPUI, it appears everywhere.\n\n- [Window] - The current window instance, which for handle the **Window Level** things.\n- [App] - The current application instance, which for handle the **Application Level** things.\n- [Context] - The Entity Context instance, which for handle the **Context Level** things.\n- [Entity] - The Entity instance, which for handle the **Entity Level** things.\n\nFor example:\n\n```rs\nfn new(window: &mut Window, cx: &mut App) {}\n\nimpl RenderOnce for MyElement {\n fn render(self, window: &mut Window, cx: &mut App) {}\n}\n\nimpl Render for MyView {\n fn render(&mut self, window: &mut Window, cx: &mut Context) {}\n}\n```\n\n:::info\nAs you can see, we always use `cx` to represent `App` and `Context`,\nwhich is the standard naming convention for GPUI,\nwe can follow this convention to make our code more readable and maintainable.\n:::\n\n[Window]: https://docs.rs/gpui/latest/gpui/struct.Window.html\n[App]: https://docs.rs/gpui/latest/gpui/struct.App.html\n[Context]: https://docs.rs/gpui/latest/gpui/struct.Context.html\n[Entity]: https://docs.rs/gpui/latest/gpui/struct.Entity.html\n" }, { "path": "docs/docs/element_id.md", "content": "---\ntitle: ElementId\ndescription: To introduce the ElementId concept in GPUI.\norder: -4\n---\n\nThe [ElementId] is a unique identifier for a GPUI element. It is used to reference elements in the GPUI component tree.\n\nBefore you start using GPUI and GPUI Component, you need to understand the [ElementId].\n\nFor example:\n\n```rs\ndiv().id(\"my-element\").child(\"Hello, World!\")\n```\n\nIn this case, the `div` element has an `id` of `\"my-element\"`. The add `id` is used for GPUI for binding events, for example `on_click` or `on_mouse_move`, the `element` with `id` in GPUI we call [Stateful\\].\n\nWe also use `id` (actually, it uses [GlobalElementId] internally in GPUI) to manage the `state` in some elements, by using `window.use_keyed_state`, so it is important to keep the `id` unique.\n\n## Unique\n\nThe `id` should be unique within the layout scope (In a same [Stateful\\] parent).\n\nFor example we have a list with multiple items:\n\n```rs\ndiv().id(\"app\").child(\n div().id(\"list1\").child(vec![\n div().id(1).child(\"Item 1\"),\n div().id(2).child(\"Item 2\"),\n div().id(3).child(\"Item 3\"),\n ])\n).child(\n div().id(\"list2\").child(vec![\n div().id(1).child(\"Item 1\"),\n ])\n)\n```\n\nIn this case, we can named the child items with a very simple id, because they are have a parent `list1` element with an `id`.\n\nGPUI internal will generate [GlobalElementId] with the parent elements's `id`, in this example, the `Item 1` will have global_id:\n\n```rs\n[\"app\", \"list1\", 1]\n```\n\nAnd the `Item 1` in `list2` will have global_id:\n\n```rs\n[\"app\", \"list2\", 1]\n```\n\nSo we can named the child items with a very simple id.\n\n[ElementId]: https://docs.rs/gpui/latest/gpui/enum.ElementId.html\n[GlobalElementId]: https://docs.rs/gpui/latest/gpui/struct.GlobalElementId.html\n[Stateful]: https://docs.rs/gpui/latest/gpui/struct.Stateful.html\n[Stateful\\]: https://docs.rs/gpui/latest/gpui/struct.Stateful.html\n" }, { "path": "docs/docs/getting-started.md", "content": "---\ntitle: Getting Started\ndescription: Learn how to set up and use GPUI Component in your project\norder: -2\n---\n\n# Getting Started\n\n## Installation\n\nAdd dependencies to your `Cargo.toml`:\n\n```toml-vue\n[dependencies]\ngpui = \"{{ GPUI_VERSION }}\"\ngpui-component = \"{{ VERSION }}\"\n# Optional, for default bundled assets\ngpui-component-assets = \"{{ VERSION }}\"\nanyhow = \"1.0\"\n```\n\n:::tip\nThe `gpui-component-assets` crate is optional.\n\nIt provides a default set of icon assets. If you want to manage your own assets, you can skip adding this dependency.\n\nSee [Icons & Assets](./assets.md) for more details.\n:::\n\n## Quick Start\n\nHere's a simple example to get you started:\n\n```rust\nuse gpui::*;\nuse gpui_component::{button::*, *};\n\npub struct HelloWorld;\n\nimpl Render for HelloWorld {\n fn render(&mut self, _: &mut Window, _: &mut Context) -> impl IntoElement {\n div()\n .v_flex()\n .gap_2()\n .size_full()\n .items_center()\n .justify_center()\n .child(\"Hello, World!\")\n .child(\n Button::new(\"ok\")\n .primary()\n .label(\"Let's Go!\")\n .on_click(|_, _, _| println!(\"Clicked!\")),\n )\n }\n}\n\nfn main() {\n let app = gpui_platform::application().with_assets(gpui_component_assets::Assets);\n\n app.run(move |cx| {\n // This must be called before using any GPUI Component features.\n gpui_component::init(cx);\n\n cx.spawn(async move |cx| {\n cx.open_window(WindowOptions::default(), |window, cx| {\n let view = cx.new(|_| HelloWorld);\n // This first level on the window, should be a Root.\n cx.new(|cx| Root::new(view, window, cx))\n })\n .expect(\"Failed to open window\");\n })\n .detach();\n });\n}\n```\n\n:::info\nMake sure to call `gpui_component::init(cx);` at first line inside the `app.run` closure. This initializes the GPUI Component system.\n\nThis is required for theming and other global settings to work correctly.\n:::\n\n## Basic Concepts\n\n### Stateless Elements\n\nGPUI Component uses stateless [RenderOnce] elements, making them simple and predictable. State management is handled at the view level, not in individual components.\n\nThe are all implemented [IntoElement] types.\n\nFor example:\n\n```rs\nstruct MyView;\n\nimpl Render for MyView {\n fn render(&mut self, _: &mut Window, cx: &mut Context) -> impl IntoElement {\n div()\n .child(Button::new(\"btn\").label(\"Click Me\"))\n .child(Tag::secondary().child(\"Secondary\"))\n }\n}\n```\n\n### Stateful Components\n\nThere are some stateful components like `Dropdown`, `List`, and `Table` that manage their own internal state for convenience, these components implement the [Render] trait.\n\nThose components to use are a bit different, we need create the [Entity] and hold it in the view struct.\n\n```rs\nstruct MyView {\n input: Entity,\n}\n\nimpl MyView {\n fn new(window: &Window, cx: &mut Context) -> Self {\n let input = cx.new(|cx| InputState::new(window, cx).default_value(\"Hello 世界\"));\n Self { input }\n }\n}\n\nimpl Render for MyView {\n fn render(&mut self, _: &mut Window, cx: &mut Context) -> impl IntoElement {\n self.input.clone()\n }\n}\n```\n\n### Theming\n\nAll components support theming through the built-in `Theme` system:\n\n```rust\nuse gpui_component::{ActiveTheme, Theme};\n\n// Access theme colors in your components\ncx.theme().primary\ncx.theme().background\ncx.theme().foreground\n```\n\n### Sizing\n\nMost components support multiple sizes:\n\n```rust\nButton::new(\"btn\").small()\nButton::new(\"btn\").medium() // default\nButton::new(\"btn\").large()\nButton::new(\"btn\").xsmall()\n```\n\n### Variants\n\nComponents offer different visual variants:\n\n```rust\nButton::new(\"btn\").primary()\nButton::new(\"btn\").danger()\nButton::new(\"btn\").warning()\nButton::new(\"btn\").success()\nButton::new(\"btn\").ghost()\nButton::new(\"btn\").outline()\n```\n\n## Icons\n\n:::info\nIcons are not bundled with GPUI Component to keep the library lightweight.\n\nContinue read [Icons & Assets](./assets.md) to learn how to add icons to your project.\n:::\n\nGPUI Component has an `Icon` element, but does not include SVG files by default.\n\nThe examples use [Lucide](https://lucide.dev) icons. You can use any icons you like by naming the SVG files as defined in `IconName`. Add the icons you need to your project.\n\n```rust\nuse gpui_component::{Icon, IconName};\n\nIcon::new(IconName::Check)\nIcon::new(IconName::Search).small()\n```\n\n## Next Steps\n\nExplore the component documentation to learn more about each component:\n\n- [Button](./components/button) - Interactive button component\n- [Input](./components/input) - Text input with validation\n- [Dialog](./components/dialog) - Dialog and modal windows\n- [DataTable](./components/data-table) - High-performance data tables\n- [More components...](./components/index)\n\n## Development\n\nTo run the component gallery:\n\n```bash\ncargo run\n```\n\nMore examples can be found in the `examples` directory:\n\n```bash\ncargo run --example \n```\n\n[RenderOnce]: https://docs.rs/gpui/latest/gpui/trait.RenderOnce.html\n[IntoElement]: https://docs.rs/gpui/latest/gpui/trait.IntoElement.html\n[Render]: https://docs.rs/gpui/latest/gpui/trait.Render.html\n" }, { "path": "docs/docs/index.md", "content": "---\ntitle: Introduction\ndescription: Rust GUI components for building fantastic cross-platform desktop application by using GPUI.\n---\n\n# GPUI Component Introduction\n\nGPUI Component is a Rust UI component library for building fantastic desktop applications using [GPUI](https://gpui.rs).\n\nGPUI Component is a comprehensive UI component library for building fantastic desktop applications using [GPUI](https://gpui.rs). It provides 60+ cross-platform components with modern design, theming support, and high performance.\n\n## Features\n\n- **Richness**: 60+ cross-platform desktop UI components\n- **Native**: Inspired by macOS and Windows controls, combined with shadcn/ui design\n- **Ease of Use**: Stateless `RenderOnce` components, simple and user-friendly\n- **Customizable**: Built-in `Theme` and `ThemeColor`, supporting multi-theme\n- **Versatile**: Supports sizes like `xs`, `sm`, `md`, and `lg`\n- **Flexible Layout**: Dock layout for panel arrangements, resizing, and freeform (Tiles) layouts\n- **High Performance**: Virtualized Table and List components for smooth large-data rendering\n- **Content Rendering**: Native support for Markdown and simple HTML\n- **Charting**: Built-in charts for visualization\n- **Editor**: High performance code editor with LSP support\n- **Syntax Highlighting**: Using Tree Sitter\n\n## Quick Example\n\nAdd `gpui` and `gpui-component` to your `Cargo.toml`:\n\n```toml-vue\n[dependencies]\ngpui = \"{{ VERSION }}\"\ngpui-component = \"{{ VERSION }}\"\n```\n\nThen create a simple \"Hello, World!\" application with a button:\n\n```rust\nuse gpui::*;\nuse gpui_component::{button::*, *};\n\npub struct HelloWorld;\nimpl Render for HelloWorld {\n fn render(&mut self, _: &mut Window, _: &mut Context) -> impl IntoElement {\n div()\n .v_flex()\n .gap_2()\n .size_full()\n .items_center()\n .justify_center()\n .child(\"Hello, World!\")\n .child(\n Button::new(\"ok\")\n .primary()\n .label(\"Let's Go!\")\n .on_click(|_, _, _| println!(\"Clicked!\")),\n )\n }\n}\n\nfn main() {\n let app = Application::new();\n\n app.run(move |cx| {\n // This must be called before using any GPUI Component features.\n gpui_component::init(cx);\n\n cx.spawn(async move |cx| {\n cx.open_window(WindowOptions::default(), |window, cx| {\n let view = cx.new(|_| HelloWorld);\n // This first level on the window, should be a Root.\n cx.new(|cx| Root::new(view, window, cx))\n })\n .expect(\"Failed to open window\");\n })\n .detach();\n });\n}\n```\n\n## Community & Support\n\n- [GitHub Repository](https://github.com/longbridge/gpui-component)\n- [Issue Tracker](https://github.com/longbridge/gpui-component/issues)\n- [Contributing Guide](https://github.com/longbridge/gpui-component/blob/main/CONTRIBUTING.md)\n\n## License\n\nApache-2.0\n" }, { "path": "docs/docs/installation.md", "content": "---\ntitle: Installation\norder: -1\n---\n\n# Installation\n\nBefore you start to build your application with `gpui-component`, you need to install the library.\n\n## System Requirements\n\nWe can development application on macOS, Windows or Linux.\n\n### macOS\n\n- macOS 15 or later\n- Xcode command line tools\n\n## Windows\n\n- Windows 10 or later\n\nThere have a bootstrap script to help install the required toolchain and dependencies.\n\nYou can run the script in PowerShell:\n\n```ps\n.\\script\\install-window.ps1\n```\n\n## Linux\n\nRun `./script/bootstrap` to install system dependencies.\n\n## Rust and Cargo\n\nWe use Rust programming language to build the `gpui-component` library. Make sure you have Rust and Cargo installed on your system.\n\n- Rust 1.90 or later\n- Cargo (comes with Rust)\n\nTo install the `gpui-component` library, you can use Cargo, the Rust package manager. Add the following line to your `Cargo.toml` file under the `[dependencies]` section:\n\n```toml-vue\ngpui = \"{{ GPUI_VERSION }}\"\ngpui-component = \"{{ VERSION }}\"\n```\n" }, { "path": "docs/docs/root.md", "content": "---\norder: -7\n---\n\n# Root View\n\nThe [Root] component for as the root provider of GPUI Component features in a window. We must to use [Root] as the **first level child** of a window to enable GPUI Component features.\n\nThis is important, if we don't use [Root] as the first level child of a window, there will have some unexpected behaviors.\n\n```rs\nfn main() {\n let app = Application::new();\n\n app.run(move |cx| {\n // This must be called before using any GPUI Component features.\n gpui_component::init(cx);\n\n cx.spawn(async move |cx| {\n cx.open_window(WindowOptions::default(), |window, cx| {\n let view = cx.new(|_| Example);\n // This first level on the window, should be a Root.\n cx.new(|cx| Root::new(view, window, cx))\n })\n .expect(\"Failed to open window\");\n })\n .detach();\n });\n}\n```\n\n## Overlays\n\nWe have dialogs, sheets, notifications, we need placement for them to show, so [Root] provides methods to render these overlays:\n\n- [Root::render_dialog_layer](https://docs.rs/gpui-component/latest/gpui_component/struct.Root.html#method.render_dialog_layer) - Render the current opened modals.\n- [Root::render_sheet_layer](https://docs.rs/gpui-component/latest/gpui_component/struct.Root.html#method.render_sheet_layer) - Render the current opened drawers.\n- [Root::render_notification_layer](https://docs.rs/gpui-component/latest/gpui_component/struct.Root.html#method.render_notification_layer) - Render the notification list.\n\nWe can put these layers in the `render` method your first level view (Root > YourFirstView):\n\n```rs\nstruct MyApp;\n\nimpl Render for MyApp {\n fn render(&mut self, window: &mut Window, cx: &mut Context) -> impl IntoElement {\n div()\n .size_full()\n .child(\"My App Content\")\n .children(Root::render_dialog_layer(cx))\n .children(Root::render_sheet_layer(cx))\n .children(Root::render_notification_layer(cx))\n }\n}\n```\n\n:::tip\nHere the example we used `children` method, it because if there is no opened dialogs, sheets, notifications, these methods will return `None`, so GPUI will not render anything.\n:::\n\n[Root]: https://docs.rs/gpui-component/latest/gpui_component/root/struct.Root.html\n" }, { "path": "docs/docs/theme.md", "content": "---\norder: -4\n---\n\n# Theme\n\nAll components support theming through the built-in Theme system, the [ActiveTheme] trait provides access to the current theme colors:\n\n```rs\nuse gpui_component::{ActiveTheme as _};\n\n// Access theme colors in your components\ncx.theme().primary\ncx.theme().background\ncx.theme().foreground\n```\n\nSo if you want use the colors from the current theme, you should keep your component or view have [App] context.\n\n## Theme Registry\n\nThere have more than 20 built-in themes available in [themes](https://github.com/longbridge/gpui-component/tree/main/themes) folder.\n\nhttps://github.com/longbridge/gpui-component/tree/main/themes\n\nAnd we have a [ThemeRegistry] to help us to load themes.\n\n```rs\nuse std::path::PathBuf;\nuse gpui::{App, SharedString};\nuse gpui_component::{Theme, ThemeRegistry};\n\npub fn init(cx: &mut App) {\n let theme_name = SharedString::from(\"Ayu Light\");\n // Load and watch themes from ./themes directory\n if let Err(err) = ThemeRegistry::watch_dir(PathBuf::from(\"./themes\"), cx, move |cx| {\n if let Some(theme) = ThemeRegistry::global(cx)\n .themes()\n .get(&theme_name)\n .cloned()\n {\n Theme::global_mut(cx).apply_config(&theme);\n }\n }) {\n tracing::error!(\"Failed to watch themes directory: {}\", err);\n }\n}\n```\n\n[ActiveTheme]: https://docs.rs/gpui-component/latest/gpui_component/theme/trait.ActiveTheme.html\n[ThemeRegistry]: https://docs.rs/gpui-component/latest/gpui_component/theme/struct.ThemeRegistry.html\n[App]: https://docs.rs/gpui/latest/gpui/struct.App.html\n" }, { "path": "docs/index.md", "content": "---\nlayout: home\n---\n\n\n\n\n\n## Simple and Intuitive API\n\nGet started with just a few lines of code. Stateless components\nmake it easy to build complex UIs.\n\n```rs\nButton::new(\"ok\")\n .primary()\n .label(\"Click Me\")\n .on_click(|_, _, _| println!(\"Button clicked!\"))\n```\n\n## Install GPUI Component\n\nAdd the following to your `Cargo.toml`:\n\nGPUI and GPUI Component are under active development, recently GPUI have some new features not published on crates.io, so we recommend using the git version for now.\n\nThe documentation on this site are based on the **Git main branch**, if you use the crates.io version, there may be some differences.\n\n```toml-vue\ngpui = { git = \"https://github.com/zed-industries/zed\" }\ngpui-component = { git = \"https://github.com/longbridge/gpui-component\" }\n```\n\nIf you prefer to use the versions on crates.io. Please visit [docs.rs](https://docs.rs/gpui-component/latest/gpui_component/) to check the API differences.\n\n```toml-vue\ngpui = \"{{ GPUI_VERSION }}\"\ngpui-component = \"{{ VERSION }}\"\n```\n\n## Hello World\n\nThe following `src/main.rs` is a simple \"Hello, World!\" application:\n\n```rs\nuse gpui::*;\nuse gpui_component::{button::*, *};\n\npub struct HelloWorld;\nimpl Render for HelloWorld {\n fn render(&mut self, _: &mut Window, _: &mut Context) -> impl IntoElement {\n div()\n .v_flex()\n .gap_2()\n .size_full()\n .items_center()\n .justify_center()\n .child(\"Hello, World!\")\n .child(\n Button::new(\"ok\")\n .primary()\n .label(\"Let's Go!\")\n .on_click(|_, _, _| println!(\"Clicked!\")),\n )\n }\n}\n\nfn main() {\n let app = Application::new();\n\n app.run(move |cx| {\n // This must be called before using any GPUI Component features.\n gpui_component::init(cx);\n\n cx.spawn(async move |cx| {\n cx.open_window(WindowOptions::default(), |window, cx| {\n let view = cx.new(|_| HelloWorld);\n // This first level on the window, should be a Root.\n cx.new(|cx| Root::new(view, window, cx))\n })\n .expect(\"Failed to open window\");\n })\n .detach();\n });\n}\n```\n\nRun the program with the following command:\n\n```sh\n$ cargo run\n```\n" }, { "path": "docs/index.vue", "content": "\n\n\n\n\n" }, { "path": "docs/package.json", "content": "{\n \"name\": \"gpui-component-docs\",\n \"dependencies\": {\n \"@tailwindcss/postcss\": \"^4.1.15\",\n \"@tailwindcss/vite\": \"^4.1.15\",\n \"lucide-react\": \"^0.546.0\",\n \"lucide-vue-next\": \"^0.546.0\",\n \"markdown-it-mathjax3\": \"^4\",\n \"postcss\": \"^8.5.6\",\n \"tailwindcss\": \"^4.1.15\",\n \"vite-plugin-toml\": \"^0.8.5\"\n },\n \"devDependencies\": {\n \"@types/bun\": \"^1.3.2\",\n \"sass\": \"^1\",\n \"vitepress\": \"^2.0.0-alpha.12\",\n \"vitepress-plugin-llms\": \"^1.8.0\",\n \"vitepress-sidebar\": \"^1.18.0\"\n },\n \"scripts\": {\n \"dev\": \"vitepress dev\",\n \"build\": \"vitepress build\",\n \"preview\": \"vitepress preview\"\n },\n \"private\": true,\n \"peerDependencies\": {\n \"typescript\": \"^5\"\n }\n}\n" }, { "path": "docs/postcss.config.mjs", "content": "export default {\n plugins: {\n \"@tailwindcss/postcss\": {},\n },\n};\n" }, { "path": "docs/skills.md", "content": "---\ntitle: Skills\nlayout: home\ndescription: GPUI Component Skills - Available skills for working with GPUI Component\n---\n\n\n\n\n" }, { "path": "docs/skills.vue", "content": "\n\n\n\n\n" }, { "path": "docs/src/dark.theme.json", "content": "{\n \"name\": \"macos-classic-dark\",\n \"author\": \"Jason Lee\",\n \"doc\": \"Based on macOS classic Dark 2 theme.\",\n \"maintainers\": [\"Jason Lee \"],\n \"type\": \"dark\",\n \"semanticClass\": \"theme.macos-classic-dark2\",\n \"colors\": {\n \"editor.background\": \"#151515\",\n \"editor.foreground\": \"#CACCCA\",\n \"editor.lineHighlightBackground\": \"#272727\",\n \"editorIndentGuide.background\": \"#303030\",\n \"editorLineNumber.foreground\": \"#8F8F8F\",\n \"editorLineNumber.background\": \"#2C2C2C\",\n \"editorBracketMatch.background\": \"#1E1D1E\",\n \"editorBracketMatch.border\": \"#303030\",\n \"editorGroupHeader.tabsBackground\": \"#1B1B1B\",\n \"editorGroupHeader.tabsBorder\": \"#444444\",\n \"editorGroup.border\": \"#393939\",\n \"editorGroupHeader.border\": \"#393939\",\n \"tab.border\": \"#3F3F3F\",\n \"tab.activeBackground\": \"#101010\",\n \"tab.activeForeground\": \"#FFFFFF\",\n \"tab.activeBorder\": \"#101010\",\n \"tab.activeBorderTop\": \"#101010\",\n \"tab.inactiveBackground\": \"#242424\",\n \"tab.inactiveForeground\": \"#9E9E9E\",\n \"statusBar.foreground\": \"#B2B2B2\",\n \"statusBar.noFolderForeground\": \"#B2B2B2\",\n \"statusBar.background\": \"#262626\",\n \"statusBar.noFolderBackground\": \"#262626\",\n \"statusBar.border\": \"#4A494A\",\n \"statusBar.debuggingBackground\": \"#262626\",\n \"statusBar.debuggingForeground\": \"#B2B2B2\",\n \"activityBar.background\": \"#262626\",\n \"activityBar.border\": \"#2A2A2A\",\n \"activityBar.foreground\": \"#6A6A69\",\n \"activityBar.inactiveForeground\": \"#5A5A59\",\n \"activityBarBadge.background\": \"#010101\",\n \"activityBarBadge.foreground\": \"#E0E0E0\",\n \"sideBar.background\": \"#1c1c1c\",\n \"sideBar.foreground\": \"#B2B2B2\",\n \"sideBar.border\": \"#3A3A3A\",\n \"sidebarTitle.background\": \"#302F30\",\n \"sideBarTitle.foreground\": \"#898989\",\n \"sideBarSectionHeader.background\": \"#302F30\",\n \"sideBarSectionHeader.foreground\": \"#898989\",\n \"sideBarSectionHeader.border\": \"#363636\",\n \"list.hoverBackground\": \"#252426\",\n \"list.hoverForeground\": \"#B2B2B2\",\n \"list.activeSelectionBackground\": \"#353436\",\n \"list.activeSelectionForeground\": \"#E3E4E4\",\n \"list.inactiveSelectionBackground\": \"#353436\",\n \"list.inactiveSelectionForeground\": \"#B2B2B2\",\n \"titleBar.inactiveBackground\": \"#333333\",\n \"titleBar.activeBackground\": \"#292929\",\n \"titleBar.border\": \"#3A393A\",\n \"notification.background\": \"#54a3ff\",\n \"panel.background\": \"#1E1D1E\",\n \"panel.border\": \"#3A3A3A\",\n \"panelInput.border\": \"#303030\",\n \"panelTitle.activeBorder\": \"#3A3A3A\",\n \"panelTitle.activeForeground\": \"#B2B2B2\",\n \"inputOption.activeBackground\": \"#303030\",\n \"input.background\": \"#1E1D1E\",\n \"input.foreground\": \"#DDDDDD\",\n \"input.border\": \"#303030\",\n \"focusBorder\": \"#3A3A3AFF\",\n \"dropdown.background\": \"#1E1D1E\",\n \"dropdown.border\": \"#303030\",\n \"dropdown.foreground\": \"#B2B2B2\",\n \"scrollbarSlider.background\": \"#2C2D2D\",\n \"scrollbarSlider.hoverBackground\": \"#2C2D2D\",\n \"scrollbarSlider.activeBackground\": \"#2C2D2D\",\n \"scrollbar.shadow\": \"#1e1f2099\",\n \"editorCursor.foreground\": \"#CACCCA\",\n \"selection.background\": \"#004a9e\",\n \"editor.selectionBackground\": \"#004a9e\",\n \"editor.selectedForeground\": \"#FFFFFF\",\n \"editor.findMatchHighlightBackground\": \"#705f00\",\n \"editor.findMatchBackground\": \"#194dbd\",\n \"editor.wordHighlightBackground\": \"#444547\",\n \"terminal.ansiBlue\": \"#282BFF\",\n \"terminal.ansiBrightBlue\": \"#272BFF\",\n \"terminal.ansiCyan\": \"#0B0098\",\n \"terminal.ansiBrightCyan\": \"#301CAE\",\n \"terminal.ansiGreen\": \"#277F2B\",\n \"terminal.ansiBrightGreen\": \"#449444\",\n \"terminal.ansiMagenta\": \"#AE30C2\",\n \"terminal.ansiBrightMagenta\": \"#BA3DCA\",\n \"terminal.ansiRed\": \"#C71211\",\n \"terminal.ansiBrightRed\": \"#D9564E\",\n \"terminal.ansiWhite\": \"#131313\",\n \"terminal.ansiBrightWhite\": \"#eeeeee\",\n \"editorWidget.background\": \"#272727\",\n \"editorWidget.border\": \"#272727\",\n \"button.border\": \"#252425\",\n \"button.background\": \"#0854D0\",\n \"button.hoverBackground\": \"#1f6ae2\",\n \"button.secondaryBackground\": \"#3d3d3d\",\n \"button.secondaryHoverBackground\": \"#4c4c4c\",\n \"widget.shadow\": \"#191919\",\n \"widget.border\": \"#3a3a3a\",\n \"editorSuggestWidget.background\": \"#363636\",\n \"editorSuggestWidget.selectedBackground\": \"#6a6a6a\",\n \"editorSuggestWidget.selectedForeground\": \"#ffffff\",\n \"editorSuggestWidget.border\": \"#3A3A3A\",\n \"editorSuggestWidget.highlightForeground\": \"#ffff00\",\n \"editorHoverWidget.background\": \"#363636\",\n \"editorHoverWidget.selectedBackground\": \"#464646\",\n \"editorHoverWidget.border\": \"#3A3A3A\",\n \"problemsWarningIcon.foreground\": \"#f26d0d\"\n },\n \"tokenColors\": [\n {\n \"settings\": {\n \"foreground\": \"#CACCCA\",\n \"background\": \"#131313\"\n }\n },\n {\n \"scope\": \"emphasis\",\n \"settings\": {\n \"fontStyle\": \"italic\"\n }\n },\n {\n \"scope\": [\"strong\", \"markup.heading.markdown\", \"markup.bold.markdown\"],\n \"settings\": {\n \"fontStyle\": \"bold\"\n }\n },\n {\n \"scope\": [\"markup.italic.markdown\"],\n \"settings\": {\n \"fontStyle\": \"italic\"\n }\n },\n {\n \"scope\": \"meta.link.inline.markdown\",\n \"settings\": {\n \"fontStyle\": \"underline\",\n \"foreground\": \"#4C9BE9\"\n }\n },\n {\n \"scope\": [\"comment\", \"markup.fenced_code\", \"markup.inline\"],\n \"settings\": {\n \"foreground\": \"#9E9E9E\"\n }\n },\n {\n \"scope\": \"string\",\n \"settings\": {\n \"foreground\": \"#76BA53\"\n }\n },\n {\n \"scope\": [\n \"variable.other.constant\",\n \"variable.other.class\",\n \"meta.property-name\",\n \"meta.property-value\",\n \"support\",\n \"constant.language.boolean\",\n \"support.function.kernel\"\n ],\n \"settings\": {\n \"foreground\": \"#CACCCA\"\n }\n },\n {\n \"scope\": [\"constant.language\", \"constant.other.color\"],\n \"settings\": {\n \"foreground\": \"#ca8a04\"\n }\n },\n {\n \"scope\": [\n \"keyword\",\n \"storage.modifier\",\n \"storage.type\",\n \"variable.language.this\",\n \"punctuation.definition.template-expression\",\n \"constant.numeric\",\n \"entity.other.attribute-name\"\n ],\n \"settings\": {\n \"foreground\": \"#c28b12\"\n }\n },\n {\n \"scope\": [\"meta.tag.structure\", \"entity.name.tag\"],\n \"settings\": {\n \"foreground\": \"#9a9576\"\n }\n },\n {\n \"scope\": [\n \"keyword.operator.accessor\",\n \"meta.group.braces.round.function.arguments\",\n \"meta.template.expression\"\n ],\n \"settings\": {\n \"foreground\": \"#AE9513\"\n }\n },\n {\n \"scope\": [\n \"entity.name.type.class\",\n \"entity.other.inherited-class\",\n \"source.css\",\n \"entity.name.tag.css\",\n \"entity.other.attribute-name.class.css\",\n \"punctuation.definition.entity.css\",\n \"meta.attribute-selector.scss\",\n \"entity.other.attribute-name.attribute.scss\"\n ],\n \"settings\": {\n \"foreground\": \"#AC98AD\"\n }\n },\n {\n \"scope\": [\n \"variable.language.self\",\n \"variable.other.readwrite.instance\",\n \"meta.definition.variable.scss\"\n ],\n \"settings\": {\n \"foreground\": \"#E1D797\"\n }\n },\n {\n \"scope\": [\n \"entity.name.type\",\n \"entity.other.inherited-class\",\n \"variable.other.object.property\",\n \"meta.instance.constructor\"\n ],\n \"settings\": {\n \"foreground\": \"#b54e05\"\n }\n },\n {\n \"scope\": [\n \"support.constant.property-value\",\n \"support.variable.property.dom\",\n \"support.type.property-name.json\",\n \"punctuation.separator.key-value\"\n ],\n \"settings\": {\n \"foreground\": \"#CACCCA\"\n }\n },\n {\n \"scope\": [\"meta.function-call\", \"variable.parameter.function\"],\n \"settings\": {\n \"foreground\": \"#CACCCA\"\n }\n },\n {\n \"scope\": [\"support.function\", \"entity.name.function\"],\n \"settings\": {\n \"foreground\": \"#fdd888\"\n }\n },\n {\n \"scope\": [\"variable.other.constant\", \"variable.language.this\"],\n \"settings\": {\n \"foreground\": \"#7D7A68\"\n }\n },\n {\n \"scope\": [\"constant.other.symbol\"],\n \"settings\": {\n \"foreground\": \"#7D7A68\"\n }\n },\n {\n \"scope\": [\n \"string.quoted\",\n \"string.regexp\",\n \"string.interpolated\",\n \"string.template\",\n \"keyword.other.template\"\n ],\n \"settings\": {\n \"foreground\": \"#62BA46\"\n }\n },\n {\n \"scope\": \"token.info-token\",\n \"settings\": {\n \"foreground\": \"#316bcd\"\n }\n },\n {\n \"scope\": \"token.warn-token\",\n \"settings\": {\n \"foreground\": \"#cd9731\"\n }\n },\n {\n \"scope\": \"token.error-token\",\n \"settings\": {\n \"foreground\": \"#cd3131\"\n }\n },\n {\n \"scope\": \"token.debug-token\",\n \"settings\": {\n \"foreground\": \"#800080\"\n }\n }\n ]\n}\n" }, { "path": "docs/src/light.theme.json", "content": "{\n \"name\": \"macos-classic-light\",\n \"author\": \"Jason Lee\",\n \"doc\": \"Based on macOS classic theme.\",\n \"maintainers\": [\"Jason Lee \"],\n \"type\": \"light\",\n \"semanticClass\": \"theme.macos-classic\",\n \"colors\": {\n \"editor.background\": \"#f6f6f7\",\n \"editor.foreground\": \"#000000\",\n \"editor.lineHighlightBackground\": \"#F5F5F5\",\n \"editorIndentGuide.activeBackground\": \"#D2D2D2\",\n \"editorIndentGuide.background\": \"#E3E4E4\",\n \"editorLineNumber.foreground\": \"#929292\",\n \"editorLineNumber.background\": \"#e4e4e4\",\n \"editorBracketMatch.background\": \"#f1f8ff\",\n \"editorBracketMatch.border\": \"#c8e1ff\",\n \"editorGroupHeader.tabsBackground\": \"#EAEAEA\",\n \"editorGroupHeader.tabsBorder\": \"#D2D2D2\",\n \"editorGroup.border\": \"#a09ea0\",\n \"editorGroupHeader.border\": \"#C3C3C3\",\n \"tab.activeBackground\": \"#F9F9F9\",\n \"tab.activeForeground\": \"#474747\",\n \"tab.activeBorder\": \"#DADADA\",\n \"tab.activeBorderTop\": \"#FFFFFF\",\n \"tab.inactiveBackground\": \"#ECECEC\",\n \"tab.inactiveForeground\": \"#6D6D6D\",\n \"tab.border\": \"#D2D2D2\",\n \"statusBar.background\": \"#F5F6F6\",\n \"statusBar.foreground\": \"#494949\",\n \"statusBar.noFolderForeground\": \"#575557\",\n \"statusBar.noFolderBackground\": \"#ededed\",\n \"statusBar.border\": \"#DCDBDA\",\n \"statusBar.debuggingBackground\": \"#fafbfc\",\n \"statusBar.debuggingForeground\": \"#24292e\",\n \"activityBar.background\": \"#ECECEC\",\n \"activityBar.border\": \"#D8D8D8\",\n \"activityBar.foreground\": \"#6A6A69\",\n \"activityBar.inactiveForeground\": \"#6A6A69\",\n \"activityBarBadge.background\": \"#FFFFFF\",\n \"activityBarBadge.foreground\": \"#575557\",\n \"sideBar.background\": \"#EAEAEA\",\n \"sideBar.foreground\": \"#464646\",\n \"sideBar.border\": \"#D2D2D2\",\n \"sidebarTitle.background\": \"#f6f6f6\",\n \"sideBarTitle.foreground\": \"#575557\",\n \"sideBarSectionHeader.background\": \"#f6f6f6\",\n \"sideBarSectionHeader.foreground\": \"#808080\",\n \"sideBarSectionHeader.border\": \"#d5d5d5\",\n \"list.hoverBackground\": \"#D0D0D0\",\n \"list.hoverForeground\": \"#262426\",\n \"list.activeSelectionBackground\": \"#0069d9\",\n \"list.activeSelectionForeground\": \"#ffffff\",\n \"list.inactiveSelectionBackground\": \"#0069d9\",\n \"list.inactiveSelectionForeground\": \"#ffffff\",\n \"list.focusHighlightForeground\": \"#9dddff\",\n \"titlebar.inactiveForeground\": \"#E0E0E0\",\n \"titleBar.activeBackground\": \"#FDFDFD\",\n \"titleBar.border\": \"#D2D2D2\",\n \"panel.background\": \"#F9F9F9\",\n \"panel.border\": \"#DCDBDA\",\n \"panelInput.border\": \"#DCDBDA\",\n \"panelTitle.activeBorder\": \"#101010\",\n \"panelTitle.activeForeground\": \"#24292e\",\n \"input.background\": \"#ffffff\",\n \"input.foreground\": \"#262426\",\n \"input.border\": \"#e0e0e0\",\n \"inputOption.activeBackground\": \"#e0e0e0\",\n \"focusBorder\": \"#eeeeee\",\n \"dropdown.background\": \"#ffffff\",\n \"dropdown.border\": \"#c4c4c4\",\n \"dropdown.foreground\": \"#262426\",\n \"scrollbarSlider.background\": \"#CACACA\",\n \"scrollbarSlider.hoverBackground\": \"#C0C0C0\",\n \"scrollbarSlider.activeBackground\": \"#C0C0C0\",\n \"scrollbar.shadow\": \"#f0f0f0\",\n \"editorCursor.foreground\": \"#101010\",\n \"editor.wordHighlightBackground\": \"#DFEDFF\",\n \"terminal.ansiBlue\": \"#282BFF\",\n \"terminal.ansiBrightBlue\": \"#272BFF\",\n \"terminal.ansiCyan\": \"#0B0098\",\n \"terminal.ansiBrightCyan\": \"#301CAE\",\n \"terminal.ansiGreen\": \"#277F2B\",\n \"terminal.ansiBrightGreen\": \"#449444\",\n \"terminal.ansiMagenta\": \"#AE30C2\",\n \"terminal.ansiBrightMagenta\": \"#BA3DCA\",\n \"terminal.ansiRed\": \"#C71211\",\n \"terminal.ansiBrightRed\": \"#D9564E\",\n \"terminal.ansiWhite\": \"#ffffff\",\n \"terminal.ansiBrightWhite\": \"#eeeeee\",\n \"editorWidget.background\": \"#EAEAEA\",\n \"editorWidget.border\": \"#eaeaea\",\n \"button.secondaryBackground\": \"#505050\",\n \"button.secondaryHoverBackground\": \"#505050\",\n \"button.border\": \"#EAEAEA\",\n \"button.background\": \"#1f6ae2\",\n \"button.hoverBackground\": \"#1f6ae2\",\n \"widget.shadow\": \"#cecece\",\n \"widget.border\": \"#cfcfcf\",\n \"notificationCenterHeader.background\": \"#f7f7f7\",\n \"notifications.border\": \"#e5e5e6\",\n \"notification.background\": \"#54a3ff\",\n \"editorSuggestWidget.background\": \"#FBFBFB\",\n \"editorSuggestWidget.selectedBackground\": \"#0069D9\",\n \"editorSuggestWidget.selectedForeground\": \"#FFFFFF\",\n \"editorSuggestWidget.highlightForeground\": \"#0069D9\",\n \"editorSuggestWidget.border\": \"#E0E0E0\",\n \"editorHoverWidget.background\": \"#FBFBFB\",\n \"editorHoverWidget.selectedBackground\": \"#0069D9\",\n \"editorHoverWidget.border\": \"#E0E0E0\",\n \"problemsWarningIcon.foreground\": \"#f26d0d\"\n },\n \"tokenColors\": [\n {\n \"settings\": {\n \"foreground\": \"#000000\",\n \"background\": \"#f6f6f7\"\n }\n },\n {\n \"scope\": \"emphasis\",\n \"settings\": {\n \"fontStyle\": \"italic\"\n }\n },\n {\n \"scope\": [\"strong\", \"markup.heading.markdown\", \"markup.bold.markdown\"],\n \"settings\": {\n \"fontStyle\": \"bold\"\n }\n },\n {\n \"scope\": [\"markup.italic.markdown\"],\n \"settings\": {\n \"fontStyle\": \"italic\"\n }\n },\n {\n \"scope\": \"meta.link.inline.markdown\",\n \"settings\": {\n \"fontStyle\": \"underline\",\n \"foreground\": \"#005cc5\"\n }\n },\n {\n \"scope\": [\"comment\", \"markup.fenced_code\", \"markup.inline\"],\n \"settings\": {\n \"foreground\": \"#9a9a9a\"\n }\n },\n {\n \"scope\": \"string\",\n \"settings\": {\n \"foreground\": \"#036A07\"\n }\n },\n {\n \"scope\": [\n \"variable.other.constant\",\n \"variable.other.class\",\n \"meta.property-name\",\n \"meta.property-value\",\n \"support\",\n \"constant.language.boolean\",\n \"support.function.kernel\"\n ],\n \"settings\": {\n \"foreground\": \"#8090e5\"\n }\n },\n {\n \"scope\": [\"constant.language\", \"constant.other.color\"],\n \"settings\": {\n \"foreground\": \"#C5060B\"\n }\n },\n {\n \"scope\": [\n \"keyword\",\n \"storage.modifier\",\n \"storage.type\",\n \"support.function\",\n \"variable.language.this\",\n \"punctuation.definition.template-expression\",\n \"constant.numeric\",\n \"entity.name.tag\"\n ],\n \"settings\": {\n \"foreground\": \"#0433ff\"\n }\n },\n {\n \"scope\": [\"entity.other.attribute-name\", \"meta.tag.structure\"],\n \"settings\": {\n \"foreground\": \"#0000A2\"\n }\n },\n {\n \"scope\": [\n \"keyword.operator.accessor\",\n \"meta.group.braces.round.function.arguments\",\n \"meta.template.expression\"\n ],\n \"settings\": {\n \"foreground\": \"#000000\"\n }\n },\n {\n \"scope\": [\n \"entity.name.type.class\",\n \"entity.other.inherited-class\",\n \"meta.property-value\",\n \"source.css\",\n \"entity.name.tag.css\",\n \"entity.other.attribute-name.class.css\",\n \"punctuation.definition.entity.css\",\n \"meta.attribute-selector.scss\",\n \"entity.other.attribute-name.attribute.scss\"\n ],\n \"settings\": {\n \"foreground\": \"#000000\"\n }\n },\n {\n \"scope\": [\n \"variable.language.self\",\n \"variable.other.readwrite.instance\",\n \"meta.definition.variable.scss\"\n ],\n \"settings\": {\n \"foreground\": \"#318495\"\n }\n },\n {\n \"scope\": [\n \"entity.name.type\",\n \"entity.other.inherited-class\",\n \"variable.other.object.property\",\n \"meta.instance.constructor\"\n ],\n \"settings\": {\n \"foreground\": \"#571ab7\"\n }\n },\n {\n \"scope\": [\"support.constant.property-value\"],\n \"settings\": {\n \"foreground\": \"#119605\"\n }\n },\n {\n \"scope\": [\n \"meta.function-call\",\n \"variable.parameter.function\",\n \"support.variable.property.dom\",\n \"support.type.property-name.json\",\n \"punctuation.separator.key-value\"\n ],\n \"settings\": {\n \"foreground\": \"#333333\"\n }\n },\n {\n \"scope\": [\"entity.name.function\"],\n \"settings\": {\n \"foreground\": \"#0000A2\"\n }\n },\n {\n \"scope\": [\"variable.other.constant\", \"variable.language.this\"],\n \"settings\": {\n \"foreground\": \"#3b96a6\"\n }\n },\n {\n \"scope\": [\"constant.other.symbol\"],\n \"settings\": {\n \"foreground\": \"#d21f07\"\n }\n },\n {\n \"scope\": [\n \"string.quoted\",\n \"string.regexp\",\n \"string.interpolated\",\n \"string.template\",\n \"keyword.other.template\"\n ],\n \"settings\": {\n \"foreground\": \"#036A07\"\n }\n },\n {\n \"scope\": \"token.info-token\",\n \"settings\": {\n \"foreground\": \"#316bcd\"\n }\n },\n {\n \"scope\": \"token.warn-token\",\n \"settings\": {\n \"foreground\": \"#cd9731\"\n }\n },\n {\n \"scope\": \"token.error-token\",\n \"settings\": {\n \"foreground\": \"#cd3131\"\n }\n },\n {\n \"scope\": \"token.debug-token\",\n \"settings\": {\n \"foreground\": \"#800080\"\n }\n }\n ]\n}\n" }, { "path": "examples/README.md", "content": "# GPUI Component basic examples\n\nThis folder contains basic examples of how to use the GPUI Component library. Each example demonstrates a specific feature or functionality of the library.\n\nUnlike the examples in the `story` folder, these examples focus on 1 example for 1 feature, making it easier to understand and implement specific functionalities in your own projects.\n\n## Contributing\n\nFeel free to contribute more examples to this folder!\n\nIf you have a specific use case or feature you'd like to demonstrate, please create a new example file and submit a pull request. We will happy to merge it into the repository.\n\nWhen creating a new example, please follow these guidelines:\n\n1. Keep 1 example just doing 1 thing for more clarity.\n2. Testing the example to ensure it works as expected.\n3. Write some comment at some key parts of the code to explain what it does.\n4. Following the code style and name style used in the existing examples or in entire of GPUI Component.\n" }, { "path": "examples/app_assets/Cargo.toml", "content": "[package]\nname = \"app_assets\"\ndescription = \"Example to load icons or images from assets folder.\"\nversion = \"0.5.1\"\npublish = false\nedition.workspace = true\n\n[dependencies]\nanyhow.workspace = true\ngpui.workspace = true\ngpui_platform.workspace = true\ngpui-component = { workspace = true }\nrust-embed = { version = \"8\", features = [\"interpolate-folder-path\"] }\n\n[lints]\nworkspace = true\n" }, { "path": "examples/app_assets/README.md", "content": "## Icon assets in GPUI Component\n\nThe [IconName](https://github.com/longbridge/gpui-component/blob/6998708b817024c2ac0f1ea164d74ddfc024e124/crates/ui/src/icon.rs#L9) is a enum that defined a bunch of icon names, because some internal components in GPUI Component will use them.\n\nYou can see, we have a lot of svg icon files in the `assets/icons` folder, but we are not embed all of the icon files in the library by default. This for keep the library size small.\n\nSo you must have your own icon files to use the `Icon` component in GPUI Component.\n\nYou can download the icon files from [here](https://lucide.dev/) or use your own icon files as you wish, just use the same filename as the icon name (match with the `IconName` defined) you want to use.\n\nFor example your assets folder:\n\n```\napp_root\n assets\n icons\n close.svg\n menu.svg\n ...\n src\n main.rs\n Cargo.toml\n```\n\nYou also can just copy the svg files you want from the `assets/icons` folder in GPUI Component repo to your own assets folder.\n\n## How to use\n\nYou need define a `Assets` struct with rust-embed to register assets to GPUI application.\n\n```rs\nuse anyhow::anyhow;\nuse gpui::*;\nuse rust_embed::RustEmbed;\nuse std::borrow::Cow;\n\n#[derive(RustEmbed)]\n#[folder = \"./assets\"]\n#[include = \"icons/**/*.svg\"]\npub struct Assets;\n\nimpl AssetSource for Assets {\n fn load(&self, path: &str) -> Result>> {\n Self::get(path)\n .map(|f| Some(f.data))\n .ok_or_else(|| anyhow!(\"could not find asset at path \\\"{path}\\\"\"))\n }\n\n fn list(&self, path: &str) -> Result> {\n Ok(Self::iter()\n .filter_map(|p| p.starts_with(path).then(|| p.into()))\n .collect())\n }\n}\n\nfn main() {\n // Call with_assets to register assets\n let app = gpui_platform::application().with_assets(Assets);\n\n // ...\n}\n```\n\n## Use default bundled assets.\n\nThe `gpui-component-assets` crate provide a default bundled assets implementation that include all the icon files in the `assets/icons` folder.\n\nIf you don't want to manage your own icon files, you can just use the default bundled assets.\n\nJust add `gpui-component-assets` as a dependency in your `Cargo.toml`:\n\n```toml\n[dependencies]\ngpui-component = \"*\"\ngpui-component-assets = \"*\"\n```\n\nAnd then use it in your application:\n\n```rs\nlet app = gpui_platform::application().with_assets(gpui_component_assets::Assets);\n```\n" }, { "path": "examples/app_assets/src/main.rs", "content": "use anyhow::anyhow;\nuse gpui::*;\nuse gpui_component::{IconName, Root, v_flex};\nuse rust_embed::RustEmbed;\nuse std::borrow::Cow;\n\n/// An asset source that loads assets from the `./assets` folder.\n#[derive(RustEmbed)]\n#[folder = \"./assets\"]\n#[include = \"icons/**/*.svg\"]\npub struct Assets;\n\nimpl AssetSource for Assets {\n fn load(&self, path: &str) -> Result>> {\n if path.is_empty() {\n return Ok(None);\n }\n\n Self::get(path)\n .map(|f| Some(f.data))\n .ok_or_else(|| anyhow!(\"could not find asset at path \\\"{path}\\\"\"))\n }\n\n fn list(&self, path: &str) -> Result> {\n Ok(Self::iter()\n .filter_map(|p| p.starts_with(path).then(|| p.into()))\n .collect())\n }\n}\n\npub struct Example;\nimpl Render for Example {\n fn render(&mut self, _: &mut Window, _: &mut Context) -> impl IntoElement {\n v_flex()\n .gap_2()\n .size_full()\n .items_center()\n .justify_center()\n .text_center()\n .child(IconName::Inbox)\n .child(IconName::Bot)\n }\n}\n\nfn main() {\n // Register Assets to GPUI application.\n let app = gpui_platform::application().with_assets(Assets);\n\n app.run(move |cx| {\n // We must initialize gpui_component before using it.\n gpui_component::init(cx);\n\n cx.spawn(async move |cx| {\n cx.open_window(WindowOptions::default(), |window, cx| {\n let view = cx.new(|_| Example);\n // The first level on the window must be Root.\n cx.new(|cx| Root::new(view, window, cx))\n })\n .expect(\"Failed to open window\");\n })\n .detach();\n });\n}\n" }, { "path": "examples/color_mix_oklab.rs", "content": "use gpui::*;\nuse gpui_component::{\n h_flex,\n theme::{ActiveTheme, Colorize},\n v_flex, Root, Sizable,\n};\n\nactions!(demo, [Quit]);\n\nstruct ColorMixDemo {\n focus_handle: FocusHandle,\n}\n\nimpl ColorMixDemo {\n fn new(cx: &mut WindowContext) -> Self {\n Self {\n focus_handle: cx.focus_handle(),\n }\n }\n}\n\nimpl Render for ColorMixDemo {\n fn render(&mut self, cx: &mut ViewContext) -> impl IntoElement {\n let destructive = cx.theme().destructive;\n let transparent = hsla(0.0, 0.0, 0.0, 0.0);\n\n // 类似 CSS: color-mix(in oklab, var(--destructive) 20%, transparent)\n let mixed_20 = destructive.mix_oklab(transparent, 0.2);\n let mixed_50 = destructive.mix_oklab(transparent, 0.5);\n let mixed_80 = destructive.mix_oklab(transparent, 0.8);\n\n v_flex()\n .gap_4()\n .p_4()\n .track_focus(&self.focus_handle)\n .child(\n v_flex()\n .gap_2()\n .child(\"Oklab mix with transparent (使用 premultiplied alpha):\")\n .child(\n h_flex()\n .gap_2()\n .child(\n div()\n .size_20()\n .bg(destructive)\n .child(\"100%\")\n .text_color(gpui::white()),\n )\n .child(\n div()\n .size_20()\n .bg(mixed_80)\n .child(\"80%\")\n .text_color(gpui::white()),\n )\n .child(\n div()\n .size_20()\n .bg(mixed_50)\n .child(\"50%\")\n .text_color(gpui::white()),\n )\n .child(\n div()\n .size_20()\n .bg(mixed_20)\n .child(\"20%\")\n .text_color(gpui::white()),\n ),\n ),\n )\n .child(\n v_flex()\n .gap_2()\n .child(format!(\n \"原始颜色: {} (alpha: {:.2})\",\n destructive.to_hex(),\n destructive.a\n ))\n .child(format!(\n \"80% 混合: {} (alpha: {:.2})\",\n mixed_80.to_hex(),\n mixed_80.a\n ))\n .child(format!(\n \"50% 混合: {} (alpha: {:.2})\",\n mixed_50.to_hex(),\n mixed_50.a\n ))\n .child(format!(\n \"20% 混合: {} (alpha: {:.2})\",\n mixed_20.to_hex(),\n mixed_20.a\n )),\n )\n .child(\n v_flex()\n .mt_4()\n .gap_2()\n .child(\"比较 HSL 和 Oklab 混合的差异 (50% transparent):\")\n .child(\n h_flex()\n .gap_4()\n .child(\n v_flex()\n .gap_1()\n .child(\"HSL 混合:\")\n .child(\n div()\n .size_16()\n .bg(destructive.mix(transparent, 0.5))\n .text_color(gpui::white())\n .child(\"HSL\"),\n )\n .child(format!(\n \"{}\",\n destructive.mix(transparent, 0.5).to_hex()\n )),\n )\n .child(\n v_flex()\n .gap_1()\n .child(\"Oklab 混合 (正确):\")\n .child(\n div()\n .size_16()\n .bg(destructive.mix_oklab(transparent, 0.5))\n .text_color(gpui::white())\n .child(\"Oklab\"),\n )\n .child(format!(\"{}\", mixed_50.to_hex())),\n ),\n ),\n )\n .child(\n v_flex()\n .mt_4()\n .gap_2()\n .child(\"说明:\")\n .child(\"- Oklab 混合保持了原始颜色的色调，只改变透明度\")\n .child(\"- HSL 混合会使颜色变暗（因为与黑色透明混合）\")\n .child(\"- Oklab 使用 premultiplied alpha 算法，符合 CSS color-mix 规范\"),\n )\n }\n}\n\nfn main() {\n env_logger::init();\n\n Application::new().run(move |cx| {\n gpui_component::init(cx);\n\n cx.activate(true);\n cx.on_action(|_: &Quit, cx: &mut AppContext| {\n cx.quit();\n });\n cx.bind_keys([KeyBinding::new(\"cmd-q\", Quit, None)]);\n\n cx.spawn(|cx| async move {\n cx.open_window(\n WindowOptions {\n window_bounds: Some(WindowBounds::Windowed(Bounds::centered(\n None,\n size(px(600.), px(400.)),\n cx,\n ))),\n ..Default::default()\n },\n |window, cx| {\n let view = cx.new(|cx| ColorMixDemo::new(cx));\n cx.new(|cx| Root::new(view, window, cx))\n },\n )\n .unwrap();\n })\n .detach();\n });\n}\n" }, { "path": "examples/dialog_overlay/Cargo.toml", "content": "[package]\nname = \"dialog_overlay\"\ndescription = \"An example of using gpui-component to create a Dialog with overlay.\"\nversion = \"0.5.1\"\npublish = false\nedition.workspace = true\n\n[dependencies]\nanyhow.workspace = true\ngpui.workspace = true\ngpui_platform.workspace = true\ngpui-component.workspace = true\ngpui-component-assets.workspace = true\n\n[lints]\nworkspace = true\n" }, { "path": "examples/dialog_overlay/src/main.rs", "content": "use gpui::*;\nuse gpui_component::{button::*, menu::ContextMenuExt, *};\nuse gpui_component_assets::Assets;\n\nactions!(class_menu, [Open, Delete, Export, Info]);\n\npub struct HelloWorld;\n\nimpl HelloWorld {\n fn show_dialog(&mut self, _: &ClickEvent, window: &mut Window, cx: &mut Context) {\n window.open_dialog(cx, move |dialog, _, _| {\n dialog.title(\"Test dialog\").child(\"Hello from dialog!\")\n });\n }\n\n fn show_drawer(&mut self, _: &ClickEvent, window: &mut Window, cx: &mut Context) {\n window.open_sheet(cx, move |drawer, _, _| {\n drawer.title(\"Test Drawer\").child(\"Hello from Drawer!\")\n });\n }\n}\n\nimpl Render for HelloWorld {\n fn render(&mut self, window: &mut Window, cx: &mut Context) -> impl IntoElement {\n div()\n .bg(gpui::white())\n .size_full()\n .child(TitleBar::new().child(\"dialog & Drawer\"))\n .child(\n div()\n .p_8()\n .v_flex()\n .gap_2()\n .size_full()\n .child(\n h_flex()\n .gap_4()\n .child(\n Button::new(\"btn1\")\n .outline()\n .label(\"Open dialog\")\n .on_click(cx.listener(Self::show_dialog)),\n )\n .child(\n Button::new(\"btn2\")\n .outline()\n .label(\"Open Drawer\")\n .on_click(cx.listener(Self::show_drawer)),\n ),\n )\n .child(\n div()\n .id(\"second-area\")\n .v_flex()\n .h_40()\n .border_1()\n .border_dashed()\n .border_color(gpui::black())\n .items_center()\n .justify_center()\n .hover(|this| this.bg(gpui::yellow().opacity(0.2)))\n .child(\"Hover test here.\")\n .child(\"Right click to show Context Menu\")\n .context_menu({\n move |this, _, _| {\n this.separator()\n .menu(\"Open\", Box::new(Open))\n .menu(\"Delete\", Box::new(Delete))\n .menu(\"Export\", Box::new(Export))\n .menu(\"Info\", Box::new(Info))\n .separator()\n }\n }),\n ),\n )\n .children(Root::render_dialog_layer(window, cx))\n .children(Root::render_sheet_layer(window, cx))\n }\n}\n\nfn main() {\n let app = gpui_platform::application().with_assets(Assets);\n\n app.run(move |cx| {\n gpui_component::init(cx);\n\n cx.spawn(async move |cx| {\n cx.open_window(\n WindowOptions {\n titlebar: Some(TitleBar::title_bar_options()),\n ..Default::default()\n },\n |window, cx| {\n let view = cx.new(|_| HelloWorld);\n // This first level on the window, should be a Root.\n cx.new(|cx| Root::new(view, window, cx))\n },\n )\n .expect(\"Failed to open window\");\n })\n .detach();\n });\n}\n" }, { "path": "examples/focus_trap/Cargo.toml", "content": "[package]\nname = \"focus_trap\"\ndescription = \"Example demonstrating focus trap functionality.\"\nversion = \"0.5.0\"\npublish = false\nedition.workspace = true\n\n[dependencies]\nanyhow.workspace = true\ngpui.workspace = true\ngpui_platform.workspace = true\ngpui-component = { workspace = true }\n\n[lints]\nworkspace = true\n" }, { "path": "examples/focus_trap/src/main.rs", "content": "use gpui::*;\nuse gpui_component::{button::*, h_flex, v_flex, *};\n\npub struct Example {\n trap1_handle: FocusHandle,\n trap2_handle: FocusHandle,\n}\nimpl Example {\n fn new(cx: &mut App) -> Self {\n Self {\n trap1_handle: cx.focus_handle(),\n trap2_handle: cx.focus_handle(),\n }\n }\n}\n\nimpl Render for Example {\n fn render(&mut self, _: &mut Window, cx: &mut Context) -> impl IntoElement {\n v_flex()\n .size_full()\n .gap_6()\n .p_8()\n .child(div().text_xl().font_bold().child(\"Focus Trap Example\"))\n .child(\n div()\n .text_sm()\n .text_color(cx.theme().muted_foreground)\n .child(\"Press Tab to navigate between buttons. Notice how focus cycles within different areas.\"),\n )\n // Outside buttons - not in focus trap\n .child(\n v_flex()\n .gap_3()\n .child(\n div()\n .text_base()\n .font_semibold()\n .child(\"Outside Area (No Focus Trap)\"),\n )\n .child(\n h_flex()\n .gap_2()\n .child(Button::new(\"outside-1\").label(\"Outside Button 1\"))\n .child(Button::new(\"outside-2\").label(\"Outside Button 2\"))\n .child(Button::new(\"outside-3\").label(\"Outside Button 3\")),\n ),\n )\n // Focus trap area 1\n .child(\n v_flex()\n .gap_3()\n .child(div().text_base().font_semibold().child(\"Focus Trap Area 1\"))\n .child(\n h_flex()\n .gap_2()\n .p_4()\n .bg(cx.theme().secondary)\n .rounded(cx.theme().radius)\n .border_1()\n .border_color(cx.theme().border)\n .child(\n Button::new(\"trap1-1\")\n .label(\"Trap 1 - Button 1\")\n .on_click(|_, _, _| println!(\"Trap 1 - Button 1 clicked\")),\n )\n .child(\n Button::new(\"trap1-2\")\n .label(\"Trap 1 - Button 2\")\n .on_click(|_, _, _| println!(\"Trap 1 - Button 2 clicked\")),\n )\n .child(\n Button::new(\"trap1-3\")\n .label(\"Trap 1 - Button 3\")\n .on_click(|_, _, _| println!(\"Trap 1 - Button 3 clicked\")),\n )\n .focus_trap(\"trap1\", &self.trap1_handle),\n )\n .child(\n div()\n .text_xs()\n .text_color(cx.theme().muted_foreground)\n .child(\"→ Press Tab in this area, focus cycles through 3 buttons without escaping\"),\n ),\n )\n // Middle outside buttons\n .child(\n v_flex()\n .gap_3()\n .child(\n div()\n .text_base()\n .font_semibold()\n .child(\"Outside Area (No Focus Trap)\"),\n )\n .child(\n h_flex()\n .gap_2()\n .child(Button::new(\"outside-4\").label(\"Outside Button 4\"))\n .child(Button::new(\"outside-5\").label(\"Outside Button 5\")),\n ),\n )\n // Focus trap area 2\n .child(\n v_flex()\n .gap_3()\n .child(div().text_base().font_semibold().child(\"Focus Trap Area 2\"))\n .child(\n v_flex()\n .focus_trap(\"trap2\", &self.trap2_handle)\n .gap_2()\n .p_4()\n .grid()\n .grid_cols(4)\n .bg(cx.theme().accent.opacity(0.1))\n .rounded(cx.theme().radius)\n .border_1()\n .border_color(cx.theme().accent)\n .child(Button::new(\"trap2-1\").label(\"Trap 2 - Button 1\"))\n .child(Button::new(\"trap2-2\").label(\"Trap 2 - Button 2\"))\n .child(\n Button::new(\"trap2-3\").label(\"Trap 2 - Button 3\"),\n )\n .child(Button::new(\"trap2-4\").label(\"Trap 2 - Button 4\"))\n )\n .child(\n div()\n .text_xs()\n .text_color(cx.theme().muted_foreground)\n .child(\"→ Press Tab in this area, focus cycles through 4 buttons without escaping\"),\n ),\n )\n }\n}\n\nfn main() {\n let app = gpui_platform::application();\n\n app.run(move |cx| {\n gpui_component::init(cx);\n\n let window_options = WindowOptions {\n window_bounds: Some(WindowBounds::centered(size(px(800.), px(600.)), cx)),\n ..Default::default()\n };\n\n cx.spawn(async move |cx| {\n cx.open_window(window_options, |window, cx| {\n let view = cx.new(|cx| Example::new(cx));\n cx.new(|cx| Root::new(view, window, cx).bg(cx.theme().background))\n })\n .expect(\"Failed to open window\");\n })\n .detach();\n });\n}\n" }, { "path": "examples/hello_world/Cargo.toml", "content": "[package]\nname = \"hello_world\"\ndescription = \"A minimal example of application development with GPUI Component.\"\nversion = \"0.5.1\"\npublish = false\nedition.workspace = true\n\n[dependencies]\nanyhow.workspace = true\ngpui.workspace = true\ngpui_platform.workspace = true\ngpui-component = { workspace = true }\n\n[lints]\nworkspace = true\n" }, { "path": "examples/hello_world/src/main.rs", "content": "use gpui::*;\nuse gpui_component::{button::*, *};\n\npub struct Example;\nimpl Render for Example {\n fn render(&mut self, _: &mut Window, _: &mut Context) -> impl IntoElement {\n div()\n .v_flex()\n .gap_2()\n .size_full()\n .items_center()\n .justify_center()\n .child(\"Hello, World!\")\n .child(\n Button::new(\"ok\")\n .primary()\n .label(\"Let's Go!\")\n .on_click(|_, _, _| println!(\"Clicked!\")),\n )\n }\n}\n\nfn main() {\n gpui_platform::application().run(move |cx| {\n // This must be called before using any GPUI Component features.\n gpui_component::init(cx);\n\n cx.spawn(async move |cx| {\n cx.open_window(WindowOptions::default(), |window, cx| {\n let view = cx.new(|_| Example);\n // This first level on the window, should be a Root.\n cx.new(|cx| {\n // You can refine the root view style by yourself.\n Root::new(view, window, cx).bg(cx.theme().background)\n })\n })\n .expect(\"Failed to open window\");\n })\n .detach();\n });\n}\n" }, { "path": "examples/input/Cargo.toml", "content": "[package]\nname = \"input\"\nversion = \"0.5.1\"\npublish = false\nedition.workspace = true\n\n[dependencies]\nanyhow.workspace = true\ngpui.workspace = true\ngpui_platform.workspace = true\ngpui-component.workspace = true\ngpui-component-assets.workspace = true\n\n[lints]\nworkspace = true\n" }, { "path": "examples/input/src/main.rs", "content": "use gpui::*;\nuse gpui_component::{\n input::{Input, InputEvent, InputState},\n *,\n};\nuse gpui_component_assets::Assets;\n\npub struct Example {\n input_state: Entity,\n display_text: SharedString,\n\n /// We need to keep the subscriptions alive with the Example entity.\n ///\n /// So if the Example entity is dropped, the subscriptions are also dropped.\n /// This is important to avoid memory leaks.\n _subscriptions: Vec,\n}\n\nimpl Example {\n fn new(window: &mut Window, cx: &mut Context) -> Self {\n let input_state = cx.new(|cx| InputState::new(window, cx).placeholder(\"Enter your name\"));\n\n let _subscriptions = vec![cx.subscribe_in(&input_state, window, {\n let input_state = input_state.clone();\n move |this, _, ev: &InputEvent, _window, cx| match ev {\n InputEvent::Change => {\n let value = input_state.read(cx).value();\n this.display_text = format!(\"Hello, {}!\", value).into();\n cx.notify()\n }\n _ => {}\n }\n })];\n\n Self {\n input_state,\n display_text: SharedString::default(),\n _subscriptions,\n }\n }\n}\n\nimpl Render for Example {\n fn render(&mut self, _: &mut Window, _: &mut Context) -> impl IntoElement {\n v_flex()\n .p_5()\n .gap_2()\n .size_full()\n .items_center()\n .justify_center()\n .child(Input::new(&self.input_state))\n .child(self.display_text.clone())\n }\n}\n\nfn main() {\n let app = gpui_platform::application().with_assets(Assets);\n\n app.run(move |cx| {\n // This must be called before using any GPUI Component features.\n gpui_component::init(cx);\n\n let window_options = WindowOptions {\n window_bounds: Some(WindowBounds::centered(size(px(800.), px(600.)), cx)),\n ..Default::default()\n };\n\n cx.spawn(async move |cx| {\n cx.open_window(window_options, |window, cx| {\n let view = cx.new(|cx| Example::new(window, cx));\n // This first level on the window, should be a Root.\n cx.new(|cx| Root::new(view, window, cx))\n })\n .expect(\"Failed to open window\");\n })\n .detach();\n });\n}\n" }, { "path": "examples/system_monitor/Cargo.toml", "content": "[package]\nname = \"system_monitor\"\ndescription = \"A real-time system resource monitor using GPUI Component charts.\"\nversion = \"0.5.0\"\npublish = false\nedition = \"2024\"\n\n[dependencies]\nanyhow.workspace = true\ngpui.workspace = true\ngpui_platform.workspace = true\ngpui-component-assets.workspace = true\ngpui-component.workspace = true\nsysinfo = \"0.37\"\nsmol = \"2\"\nbattery = \"0.7\"\n\n[target.'cfg(target_os = \"macos\")'.dependencies]\nmetal = \"0.33\"\ncore-foundation = \"0.10\"\n\n[target.'cfg(target_os = \"windows\")'.dependencies]\nwindows = { version = \"0.62\", features = [\n \"Win32_Graphics_Direct3D\",\n \"Win32_Graphics_Direct3D11\",\n \"Win32_Graphics_Dxgi\",\n] }\n\n[lints.clippy]\ndbg_macro = \"deny\"\ntodo = \"deny\"\n" }, { "path": "examples/system_monitor/src/main.rs", "content": "use std::collections::VecDeque;\nuse std::time::Duration;\n\nuse gpui::{actions, prelude::FluentBuilder as _, *};\nuse gpui_component::ThemeMode;\nuse gpui_component::{\n ActiveTheme, Icon, IconName, Root, Sizable, Theme, TitleBar,\n chart::AreaChart,\n h_flex,\n progress::Progress,\n tab::{Tab, TabBar},\n table::{Column, ColumnSort, DataTable, TableDelegate, TableState},\n v_flex,\n};\nuse smol::Timer;\nuse sysinfo::{Disks, Pid, System};\n\n// Define the Quit action\nactions!(system_monitor, [Quit]);\n\nconst INTERVAL: Duration = Duration::from_millis(500);\nconst MAX_DATA_POINTS: usize = 120;\n\n/// Tab indices\n#[derive(Debug, Clone, Copy, PartialEq, Eq, Default)]\nenum MonitorTab {\n #[default]\n System = 0,\n Processes = 1,\n}\n\nimpl MonitorTab {\n fn from_index(index: usize) -> Self {\n match index {\n 0 => MonitorTab::System,\n 1 => MonitorTab::Processes,\n _ => MonitorTab::System,\n }\n }\n}\n\n/// A single data point for system metrics\n#[derive(Clone)]\nstruct MetricPoint {\n time: String,\n cpu: f64,\n memory: f64,\n}\n\n/// Process info for display\n#[derive(Clone)]\nstruct ProcessInfo {\n pid: Pid,\n name: String,\n cpu_usage: f32,\n memory: u64,\n}\n\n/// Disk info for display\n#[derive(Clone)]\nstruct DiskInfo {\n #[allow(dead_code)]\n name: String,\n total: u64,\n used: u64,\n}\n\n/// Battery info for display\n#[derive(Clone)]\nstruct BatteryInfo {\n #[allow(dead_code)]\n model: String,\n icon: IconName,\n percentage: f32,\n}\n\n/// Sort field for processes\n#[derive(Debug, Clone, Copy, PartialEq, Eq, Default)]\nenum ProcessSortField {\n Pid,\n Name,\n #[default]\n Cpu,\n Memory,\n}\n\n/// Process table delegate\nstruct ProcessTableDelegate {\n processes: Vec,\n columns: Vec,\n sort_field: ProcessSortField,\n sort_order: ColumnSort,\n}\n\nimpl ProcessTableDelegate {\n fn new() -> Self {\n Self {\n processes: Vec::new(),\n columns: vec![\n Column::new(\"pid\", \"PID\").width(70.).sortable(),\n Column::new(\"name\", \"Name\").width(380.).sortable(),\n Column::new(\"cpu\", \"CPU %\")\n .width(80.)\n .sortable()\n .sort(ColumnSort::Descending),\n Column::new(\"memory\", \"Memory\").width(100.).sortable(),\n ],\n sort_field: ProcessSortField::Cpu,\n sort_order: ColumnSort::Descending,\n }\n }\n\n fn update_processes(&mut self, sys: &System) {\n self.processes = sys\n .processes()\n .iter()\n .map(|(pid, process)| ProcessInfo {\n pid: *pid,\n name: process.name().to_string_lossy().to_string(),\n cpu_usage: process.cpu_usage(),\n memory: process.memory(),\n })\n .collect();\n\n self.sort_processes();\n }\n\n fn sort_processes(&mut self) {\n let is_descending = matches!(self.sort_order, ColumnSort::Descending);\n\n match self.sort_field {\n ProcessSortField::Pid => {\n self.processes.sort_by(|a, b| {\n let cmp = a.pid.as_u32().cmp(&b.pid.as_u32());\n if is_descending { cmp.reverse() } else { cmp }\n });\n }\n ProcessSortField::Name => {\n self.processes.sort_by(|a, b| {\n let cmp = a.name.to_lowercase().cmp(&b.name.to_lowercase());\n if is_descending { cmp.reverse() } else { cmp }\n });\n }\n ProcessSortField::Cpu => {\n self.processes.sort_by(|a, b| {\n let cmp = a\n .cpu_usage\n .partial_cmp(&b.cpu_usage)\n .unwrap_or(std::cmp::Ordering::Equal);\n if is_descending { cmp.reverse() } else { cmp }\n });\n }\n ProcessSortField::Memory => {\n self.processes.sort_by(|a, b| {\n let cmp = a.memory.cmp(&b.memory);\n if is_descending { cmp.reverse() } else { cmp }\n });\n }\n }\n\n // Keep top 200 processes\n self.processes.truncate(200);\n }\n}\n\nimpl TableDelegate for ProcessTableDelegate {\n fn columns_count(&self, _cx: &App) -> usize {\n self.columns.len()\n }\n\n fn rows_count(&self, _cx: &App) -> usize {\n self.processes.len()\n }\n\n fn column(&self, col_ix: usize, _cx: &App) -> Column {\n self.columns[col_ix].clone()\n }\n\n fn render_td(\n &mut self,\n row_ix: usize,\n col_ix: usize,\n _window: &mut Window,\n cx: &mut Context>,\n ) -> impl IntoElement {\n let Some(process) = self.processes.get(row_ix) else {\n return div().into_any_element();\n };\n\n match col_ix {\n 0 => div()\n .text_xs()\n .text_color(cx.theme().muted_foreground)\n .child(format!(\"{}\", process.pid))\n .into_any_element(),\n 1 => div()\n .text_sm()\n .text_color(cx.theme().foreground)\n .truncate()\n .child(process.name.clone())\n .into_any_element(),\n 2 => div()\n .text_xs()\n .text_color(if process.cpu_usage > 50.0 {\n cx.theme().red\n } else if process.cpu_usage > 20.0 {\n cx.theme().yellow\n } else {\n cx.theme().blue\n })\n .child(format!(\"{:.1}%\", process.cpu_usage))\n .into_any_element(),\n 3 => div()\n .text_xs()\n .text_color(cx.theme().green)\n .child(format_bytes(process.memory))\n .into_any_element(),\n _ => div().into_any_element(),\n }\n }\n\n fn perform_sort(\n &mut self,\n col_ix: usize,\n sort: ColumnSort,\n _window: &mut Window,\n _cx: &mut Context>,\n ) {\n self.sort_order = sort;\n self.sort_field = match col_ix {\n 0 => ProcessSortField::Pid,\n 1 => ProcessSortField::Name,\n 2 => ProcessSortField::Cpu,\n 3 => ProcessSortField::Memory,\n _ => ProcessSortField::Cpu,\n };\n self.sort_processes();\n }\n}\n\n/// Format bytes to human readable string\nfn format_bytes(bytes: u64) -> String {\n const KB: u64 = 1024;\n const MB: u64 = KB * 1024;\n const GB: u64 = MB * 1024;\n\n if bytes >= GB {\n format!(\"{:.1} GB\", bytes as f64 / GB as f64)\n } else if bytes >= MB {\n format!(\"{:.1} MB\", bytes as f64 / MB as f64)\n } else if bytes >= KB {\n format!(\"{:.1} KB\", bytes as f64 / KB as f64)\n } else {\n format!(\"{} B\", bytes)\n }\n}\n\n/// System monitor that collects and displays real-time metrics\npub struct SystemMonitor {\n sys: System,\n disks: Disks,\n data: VecDeque,\n time_index: usize,\n active_tab: MonitorTab,\n process_table: Entity>,\n disk_info: Vec,\n battery_info: Vec,\n}\n\nimpl SystemMonitor {\n fn new(window: &mut Window, cx: &mut Context) -> Self {\n let mut sys = System::new_all();\n sys.refresh_all();\n\n let disks = Disks::new_with_refreshed_list();\n\n // Create process table\n let process_delegate = ProcessTableDelegate::new();\n let process_table = cx.new(|cx| {\n TableState::new(process_delegate, window, cx)\n .col_selectable(false)\n .col_movable(false)\n });\n\n let mut monitor = Self {\n sys,\n disks,\n data: VecDeque::with_capacity(MAX_DATA_POINTS),\n time_index: 0,\n active_tab: MonitorTab::System,\n process_table,\n disk_info: Vec::new(),\n battery_info: Vec::new(),\n };\n\n // Collect initial data\n monitor.collect_metrics(cx);\n\n // Start the update loop\n cx.spawn(async move |this, cx| {\n loop {\n Timer::after(INTERVAL).await;\n\n let result = this.update(cx, |this, cx| {\n this.collect_metrics(cx);\n cx.notify();\n });\n\n if result.is_err() {\n break;\n }\n }\n })\n .detach();\n\n monitor\n }\n\n fn collect_metrics(&mut self, cx: &mut Context) {\n // Refresh system info\n self.sys.refresh_all();\n self.disks.refresh(true);\n\n // Calculate CPU usage\n let cpu_usage = self.sys.global_cpu_usage() as f64;\n\n // Calculate memory usage\n let total_memory = self.sys.total_memory() as f64;\n let used_memory = self.sys.used_memory() as f64;\n let memory_usage = if total_memory > 0.0 {\n (used_memory / total_memory * 100.0).min(100.0)\n } else {\n 0.0\n };\n\n // Create data point\n let point = MetricPoint {\n time: format!(\"{}s\", self.time_index),\n cpu: cpu_usage,\n memory: memory_usage,\n };\n\n // Add to history\n if self.data.len() >= MAX_DATA_POINTS {\n self.data.pop_front();\n }\n self.data.push_back(point);\n self.time_index += 1;\n\n // Update process table\n self.process_table.update(cx, |table, cx| {\n table.delegate_mut().update_processes(&self.sys);\n cx.notify();\n });\n\n // Update disk info (take first disk for status bar)\n self.disk_info = self\n .disks\n .iter()\n .map(|disk| DiskInfo {\n name: disk.name().to_string_lossy().to_string(),\n total: disk.total_space(),\n used: disk.total_space() - disk.available_space(),\n })\n .collect();\n\n // Update battery info\n self.update_battery_info();\n }\n\n fn update_battery_info(&mut self) {\n self.battery_info.clear();\n\n if let Ok(manager) = battery::Manager::new()\n && let Ok(batteries) = manager.batteries()\n {\n for battery in batteries.flatten() {\n let icon = match battery.state() {\n battery::State::Charging => IconName::BatteryCharging,\n battery::State::Discharging => IconName::BatteryMedium,\n battery::State::Full => IconName::BatteryFull,\n battery::State::Empty => IconName::Battery,\n _ => IconName::Battery,\n };\n\n self.battery_info.push(BatteryInfo {\n model: battery\n .model()\n .map(|s| s.to_string())\n .unwrap_or_else(|| \"Battery\".to_string()),\n icon,\n percentage: battery.state_of_charge().value * 100.0,\n });\n }\n }\n }\n\n fn set_active_tab(&mut self, index: usize, _window: &mut Window, cx: &mut Context) {\n self.active_tab = MonitorTab::from_index(index);\n cx.notify();\n }\n\n fn render_chart(\n &self,\n title: &str,\n data: Vec,\n value_fn: impl Fn(&MetricPoint) -> f64 + 'static,\n color: Hsla,\n cx: &Context,\n ) -> impl IntoElement {\n v_flex()\n .min_h(px(160.))\n .flex_1()\n .gap_2()\n .border_1()\n .border_color(cx.theme().border)\n .child(\n h_flex()\n .justify_between()\n .py_1()\n .px_3()\n .child(\n div()\n .text_sm()\n .text_color(cx.theme().foreground)\n .child(title.to_string()),\n )\n .child({\n let current_value = data.last().map(&value_fn).unwrap_or(0.0);\n div()\n .text_sm()\n .text_color(color)\n .child(format!(\"{:.1}%\", current_value))\n }),\n )\n .child(\n AreaChart::new(data)\n .x(|d| d.time.clone())\n .y(value_fn)\n .stroke(color)\n .fill(linear_gradient(\n 0.,\n linear_color_stop(color.opacity(0.4), 1.),\n linear_color_stop(cx.theme().background.opacity(0.1), 0.),\n ))\n .tick_margin(15),\n )\n }\n\n fn render_system_tab(&self, cx: &Context) -> impl IntoElement {\n let data: Vec = self.data.iter().cloned().collect();\n v_flex()\n .p_3()\n .gap_4()\n .flex_1()\n .child(self.render_chart(\"CPU Usage\", data.clone(), |d| d.cpu, cx.theme().red, cx))\n .child(self.render_chart(\n \"Memory Usage\",\n data.clone(),\n |d| d.memory,\n cx.theme().blue,\n cx,\n ))\n }\n\n fn render_processes_tab(&self, _cx: &Context) -> impl IntoElement {\n v_flex().size_full().child(\n DataTable::new(&self.process_table)\n .bordered(false)\n .stripe(true)\n .small(),\n )\n }\n\n fn render_status_bar(&self, cx: &Context) -> impl IntoElement {\n let primary_disk = self.disk_info.first();\n let primary_battery = self.battery_info.first();\n\n h_flex()\n .px_3()\n .gap_4()\n .h_7()\n .text_sm()\n .items_center()\n .justify_between()\n .border_t_1()\n .border_color(cx.theme().border)\n .bg(cx.theme().tab_bar)\n .text_color(cx.theme().muted_foreground)\n .child(\n h_flex()\n .gap_4()\n // Disk info\n .when_some(primary_disk, |this, disk| {\n let used_percent = if disk.total > 0 {\n (disk.used as f64 / disk.total as f64 * 100.0) as f32\n } else {\n 0.0\n };\n this.child(\n h_flex()\n .gap_2()\n .w(px(135.))\n .items_center()\n .child(Icon::new(IconName::HardDrive))\n .child(\n Progress::new(\"status-disk\")\n .w_12()\n .h_2()\n .value(used_percent),\n )\n .child(format!(\"{:.0}%\", used_percent)),\n )\n })\n // Memory info\n .child({\n let mem_percent = self.data.back().map(|p| p.memory as f32).unwrap_or(0.0);\n h_flex()\n .gap_2()\n .w(px(135.))\n .items_center()\n .child(Icon::new(IconName::MemoryStick))\n .child(Progress::new(\"status-mem\").w_12().h_2().value(mem_percent))\n .child(format!(\"{:.0}%\", mem_percent))\n })\n // CPU info\n .child({\n let cpu_percent = self.data.back().map(|p| p.cpu as f32).unwrap_or(0.0);\n h_flex()\n .gap_2()\n .w(px(135.))\n .items_center()\n .child(Icon::new(IconName::Cpu))\n .child(Progress::new(\"status-cpu\").w_12().h_2().value(cpu_percent))\n .child(format!(\"{:.0}%\", cpu_percent))\n }),\n )\n .child(\n // Battery info\n div().when_some(primary_battery, |this, battery| {\n this.child(\n h_flex()\n .gap_2()\n .items_center()\n .child(Icon::new(battery.icon.clone()))\n .child(format!(\"{:.0}%\", battery.percentage)),\n )\n }),\n )\n }\n}\n\nimpl Render for SystemMonitor {\n fn render(&mut self, _window: &mut Window, cx: &mut Context) -> impl IntoElement {\n let active_tab_index = self.active_tab as usize;\n\n v_flex()\n .size_full()\n .child(\n TitleBar::new()\n .child(\n TabBar::new(\"monitor-tabs\")\n .mt(px(1.))\n .segmented()\n .px_0()\n .py(px(2.))\n .bg(cx.theme().title_bar)\n .selected_index(active_tab_index)\n .on_click(cx.listener(|this, ix: &usize, window, cx| {\n this.set_active_tab(*ix, window, cx);\n }))\n .child(Tab::new().label(\"System\"))\n .child(Tab::new().label(\"Processes\")),\n )\n .child(\n div()\n .mr_4()\n .text_xs()\n .text_color(cx.theme().muted_foreground)\n .child(format!(\n \"{:.1} GB\",\n self.sys.total_memory() as f64 / 1024.0 / 1024.0 / 1024.0\n )),\n ),\n )\n .bg(cx.theme().background)\n .child(\n div()\n .id(\"tab-content\")\n .flex_1()\n .overflow_y_scroll()\n .map(|this| match self.active_tab {\n MonitorTab::System => this.child(self.render_system_tab(cx)),\n MonitorTab::Processes => this.child(self.render_processes_tab(cx)),\n }),\n )\n .child(self.render_status_bar(cx))\n }\n}\n\nfn main() {\n let app = gpui_platform::application().with_assets(gpui_component_assets::Assets);\n\n app.run(move |cx| {\n gpui_component::init(cx);\n\n cx.bind_keys([\n #[cfg(target_os = \"macos\")]\n KeyBinding::new(\"cmd-q\", Quit, None),\n #[cfg(not(target_os = \"macos\"))]\n KeyBinding::new(\"alt-f4\", Quit, None),\n ]);\n\n // Handle the Quit action\n cx.on_action(|_: &Quit, cx: &mut App| {\n cx.quit();\n });\n\n let window_options = WindowOptions {\n titlebar: Some(TitleBar::title_bar_options()),\n window_bounds: Some(WindowBounds::centered(size(px(680.), px(600.)), cx)),\n ..Default::default()\n };\n\n cx.spawn(async move |cx| {\n cx.open_window(window_options, |window, cx| {\n window.activate_window();\n window.set_window_title(\"System Monitor\");\n\n Theme::change(ThemeMode::Dark, Some(window), cx);\n\n let view = cx.new(|cx| SystemMonitor::new(window, cx));\n cx.new(|cx| Root::new(view, window, cx))\n })\n .expect(\"Failed to open window\");\n })\n .detach();\n });\n}\n" }, { "path": "examples/webview/Cargo.toml", "content": "[package]\nname = \"webview\"\ndescription = \"A minimal example of webview inside the GPUI application.\"\nversion = \"0.5.0\"\npublish = false\nedition.workspace = true\n\n[features]\ninspector = []\n\n[dependencies]\nanyhow.workspace = true\ngpui.workspace = true\ngpui_platform.workspace = true\ngpui-component = { workspace = true }\n\n# WebView dependencies\ngpui-wry = { path = \"../../crates/webview\" }\nwry = { version = \"0.53.3\", package = \"lb-wry\" }\nraw-window-handle = { version = \"0.6\", features = [\"std\"] }\n\n[target.\"cfg(target_os = \\\"linux\\\")\".dependencies]\ngtk = \"0.18.2\"\n\n[lints]\nworkspace = true\n" }, { "path": "examples/webview/src/main.rs", "content": "use gpui::*;\nuse gpui_component::{\n ActiveTheme as _, Root, h_flex,\n input::{Input, InputEvent, InputState},\n v_flex,\n};\nuse gpui_wry::WebView;\n\npub struct Example {\n focus_handle: FocusHandle,\n webview: Entity,\n address_input: Entity,\n}\n\nimpl Example {\n pub fn new(window: &mut Window, cx: &mut App) -> Entity {\n let webview = cx.new(|cx| {\n let builder = wry::WebViewBuilder::new();\n #[cfg(any(debug_assertions, feature = \"inspector\"))]\n let builder = builder.with_devtools(true);\n\n #[cfg(not(any(\n target_os = \"windows\",\n target_os = \"macos\",\n target_os = \"ios\",\n target_os = \"android\"\n )))]\n let webview = {\n use gtk::prelude::*;\n use wry::WebViewBuilderExtUnix;\n // borrowed from https://github.com/tauri-apps/wry/blob/dev/examples/gtk_multiwebview.rs\n // doesn't work yet\n // TODO: How to initialize this fixed?\n let fixed = gtk::Fixed::builder().build();\n fixed.show_all();\n builder.build_gtk(&fixed).unwrap()\n };\n #[cfg(any(\n target_os = \"windows\",\n target_os = \"macos\",\n target_os = \"ios\",\n target_os = \"android\"\n ))]\n let webview = {\n use raw_window_handle::HasWindowHandle;\n\n let window_handle = window.window_handle().expect(\"No window handle\");\n builder.build_as_child(&window_handle).unwrap()\n };\n\n WebView::new(webview, window, cx)\n });\n\n let address_input = cx.new(|cx| {\n InputState::new(window, cx).default_value(\"https://longbridge.github.io/gpui-component\")\n });\n\n let url = address_input.read(cx).value().clone();\n webview.update(cx, |view, _| {\n view.load_url(&url);\n });\n\n cx.new(|cx| {\n let this = Self {\n focus_handle: cx.focus_handle(),\n webview,\n address_input: address_input.clone(),\n };\n\n cx.subscribe(\n &address_input,\n |this: &mut Self, input, event: &InputEvent, cx| match event {\n InputEvent::PressEnter { .. } => {\n let url = input.read(cx).value().clone();\n this.webview.update(cx, |view, _| {\n view.load_url(&url);\n });\n }\n _ => {}\n },\n )\n .detach();\n\n this\n })\n }\n\n pub fn hide(&self, _: &mut Window, cx: &mut App) {\n self.webview.update(cx, |webview, _| webview.hide())\n }\n\n #[allow(unused)]\n fn go_back(&mut self, _: &ClickEvent, window: &mut Window, cx: &mut Context) {\n self.webview.update(cx, |webview, _| {\n webview.back().unwrap();\n });\n }\n}\n\nimpl Focusable for Example {\n fn focus_handle(&self, _cx: &gpui::App) -> FocusHandle {\n self.focus_handle.clone()\n }\n}\n\nimpl Render for Example {\n fn render(&mut self, _: &mut Window, cx: &mut Context) -> impl IntoElement {\n let webview = self.webview.clone();\n\n v_flex()\n .p_2()\n .gap_3()\n .size_full()\n .child(\n h_flex()\n .gap_2()\n .items_center()\n .child(Input::new(&self.address_input)),\n )\n .child(\n div()\n .flex_1()\n .border_1()\n .h(gpui::px(400.))\n .border_color(cx.theme().border)\n .child(webview.clone()),\n )\n }\n}\n\nfn main() {\n // Required this for Windows to render the WebView.\n #[cfg(target_os = \"windows\")]\n unsafe {\n std::env::set_var(\"GPUI_DISABLE_DIRECT_COMPOSITION\", \"true\");\n }\n\n gpui_platform::application().run(move |cx| {\n // This must be called before using any GPUI Component features.\n gpui_component::init(cx);\n\n cx.spawn(async move |cx| {\n cx.open_window(WindowOptions::default(), |window, cx| {\n let view = Example::new(window, cx);\n cx.new(|cx| Root::new(view, window, cx))\n })\n .expect(\"Failed to open window\");\n })\n .detach();\n });\n}\n" }, { "path": "examples/window_title/Cargo.toml", "content": "[package]\nname = \"window_title\"\ndescription = \"An example of using gpui-component to create a window with a custom title bar.\"\nversion = \"0.5.1\"\npublish = false\nedition.workspace = true\n\n[dependencies]\nanyhow.workspace = true\ngpui.workspace = true\ngpui_platform.workspace = true\ngpui-component.workspace = true\ngpui-component-assets.workspace = true\n\n[lints]\nworkspace = true\n" }, { "path": "examples/window_title/src/main.rs", "content": "use gpui::*;\nuse gpui_component::{\n Root, TitleBar,\n button::{Button, ButtonVariants},\n h_flex, v_flex,\n};\n\npub struct Example;\nimpl Render for Example {\n fn render(&mut self, _: &mut Window, _: &mut Context) -> impl IntoElement {\n v_flex()\n .size_full()\n .child(\n // Render custom title bar on top of Root view.\n TitleBar::new().child(\n h_flex()\n .w_full()\n .pr_2()\n .justify_between()\n .child(\"App with Custom title bar\")\n .child(\"Right Item\"),\n ),\n )\n .child(\n div()\n .id(\"window-body\")\n .p_5()\n .size_full()\n .items_center()\n .justify_center()\n .child(\"Hello, World!\")\n .child(\n Button::new(\"ok\")\n .primary()\n .label(\"Let's Go!\")\n .on_click(|_, _, _| println!(\"Clicked!\")),\n ),\n )\n }\n}\n\nfn main() {\n let app = gpui_platform::application().with_assets(gpui_component_assets::Assets);\n\n app.run(move |cx| {\n gpui_component::init(cx);\n\n cx.spawn(async move |cx| {\n let window_options = WindowOptions {\n // Setup GPUI to use custom title bar\n titlebar: Some(TitleBar::title_bar_options()),\n ..Default::default()\n };\n\n cx.open_window(window_options, |window, cx| {\n let view = cx.new(|_| Example);\n cx.new(|cx| Root::new(view, window, cx))\n })\n .expect(\"Failed to open window\");\n })\n .detach();\n });\n}\n" }, { "path": "flake.nix", "content": "{\n description = \"gpui-component\";\n\n inputs = {\n nixpkgs.url = \"github:NixOS/nixpkgs/nixos-unstable\";\n rust-overlay.url = \"github:oxalica/rust-overlay\";\n flake-utils.url = \"github:numtide/flake-utils\";\n };\n\n outputs = { self, nixpkgs, rust-overlay, flake-utils, ... }:\n flake-utils.lib.eachDefaultSystem (system:\n let\n overlays = [ (import rust-overlay) ];\n pkgs = import nixpkgs {\n inherit system overlays;\n };\n in\n {\n devShells.default = with pkgs; mkShell {\n buildInputs = [\n openssl\n pkg-config\n xorg.libX11\n glib\n pango\n atkmm\n gdk-pixbuf\n gtk3\n libsoup_3\n webkitgtk_4_1\n libxkbcommon\n vulkan-loader\n (rust-bin.beta.latest.default.override {\n extensions = [ \"rust-src\" ];\n })\n ];\n\n env = {\n RUST_BACKTRACE = \"1\";\n LD_LIBRARY_PATH = lib.makeLibraryPath [ vulkan-loader ];\n };\n };\n }\n );\n}\n" }, { "path": "script/bootstrap", "content": "#!/usr/bin/env bash\n\nif [[ \"$OSTYPE\" == \"linux-gnu\"* ]]; then\n echo \"Install Linux dependencies...\"\n script/install-linux.sh\nelse\n echo \"Install macOS dependencies...\"\nfi\n" }, { "path": "script/bump-version.sh", "content": "#!/bin/bash\n\n# Colors\nRED='\\033[0;31m'\nGREEN='\\033[0;32m'\nYELLOW='\\033[1;33m'\nBLUE='\\033[0;34m'\nMAGENTA='\\033[0;35m'\nCYAN='\\033[0;36m'\nBOLD='\\033[1m'\nRESET='\\033[0m'\n\n# Check if version argument is provided\nnew_version=$1\nif [ -z \"$new_version\" ]\nthen\n echo -e \"${RED}${BOLD}Error:${RESET} Version argument is required\"\n echo -e \"${YELLOW}USAGE:${RESET} ./bump.sh [VERSION]\"\n exit 1\nfi\n\n# Logging functions\nfunction log_header() {\n local message=$1\n echo \"\"\n echo -e \"${BOLD}${BLUE}╔════════════════════════════════════════════════════════╗${RESET}\"\n echo -e \"${BOLD}${BLUE}║${RESET} ${CYAN}${BOLD}$message${RESET}\"\n echo -e \"${BOLD}${BLUE}╚════════════════════════════════════════════════════════╝${RESET}\"\n echo \"\"\n}\n\nfunction log_step() {\n local step=$1\n local message=$2\n echo -e \"${MAGENTA}${BOLD}[$step]${RESET} ${message}\"\n}\n\nfunction log_success() {\n local message=$1\n echo -e \"${GREEN}${BOLD}✓${RESET} ${message}\"\n}\n\nfunction log_info() {\n local message=$1\n echo -e \"${CYAN}ℹ${RESET} ${message}\"\n}\n\nfunction log_error() {\n local message=$1\n echo -e \"${RED}${BOLD}✗${RESET} ${message}\"\n}\n\n# Start release process\nlog_header \"Starting Release Process for v$new_version\"\n\n# Step 1: Update crates version\nlog_step \"1/4\" \"Updating crates to version ${BOLD}v$new_version${RESET}\"\nif cargo set-version \"$new_version\"; then\n log_success \"Crates version updated successfully\"\nelse\n log_error \"Failed to update crates version\"\n exit 1\nfi\necho \"\"\n\n# Step 2: Stage changes\nlog_step \"2/4\" \"Staging modified files\"\nif git add -u .; then\n log_success \"Files staged successfully\"\nelse\n log_error \"Failed to stage files\"\n exit 1\nfi\necho \"\"\n\n# Step 3: Create commit and tag\nlog_step \"3/4\" \"Creating commit and tag\"\nif git commit -m \"Bump v$new_version\"; then\n log_success \"Commit created: ${BOLD}Bump v$new_version${RESET}\"\nelse\n log_error \"Failed to create commit\"\n exit 1\nfi\n\nif git tag \"v$new_version\"; then\n log_success \"Tag created: ${BOLD}v$new_version${RESET}\"\nelse\n log_error \"Failed to create tag\"\n exit 1\nfi\necho \"\"\n\n# Step 4: Push to remote\nlog_step \"4/4\" \"Pushing tag to remote\"\nlog_info \"Pushing ${BOLD}v$new_version${RESET} to origin...\"\nif git push origin \"v$new_version\"; then\n log_success \"Tag pushed to remote successfully\"\nelse\n log_error \"Failed to push tag to remote\"\n exit 1\nfi\necho \"\"\n\n# Success message\necho -e \"${GREEN}${BOLD}╔════════════════════════════════════════════════════════╗${RESET}\"\necho -e \"${GREEN}${BOLD}║${RESET} ${BOLD}🚀 Release v$new_version standby!${RESET}\"\necho -e \"${GREEN}${BOLD}║${RESET} ${GREEN}Let's ship it!${RESET}\"\necho -e \"${GREEN}${BOLD}╚════════════════════════════════════════════════════════╝${RESET}\"\necho \"\"\n" }, { "path": "script/install-linux.sh", "content": "#!/usr/bin/env bash\n\nsudo apt update\n# Test on Ubuntu 24.04\nsudo apt install -y \\\n gcc g++ clang libfontconfig-dev libwayland-dev \\\n libwebkit2gtk-4.1-dev libxkbcommon-x11-dev libx11-xcb-dev \\\n libssl-dev libzstd-dev \\\n vulkan-validationlayers libvulkan1\n" }, { "path": "script/install-window.ps1", "content": "Set-ExecutionPolicy -ExecutionPolicy RemoteSigned -Scope CurrentUser\nInvoke-RestMethod -Uri https://get.scoop.sh | Invoke-Expression\n\nwinget install Microsoft.VisualStudio.2022.Community --silent --override \"--wait --quiet --add ProductLang En-us --add Microsoft.VisualStudio.Workload.NativeDesktop --includeRecommended\"\nscoop bucket add extras\nscoop install cmake\n" }, { "path": "themes/adventure.json", "content": "{\n \"$schema\": \"https://github.com/longbridge/gpui-component/raw/refs/heads/main/.theme-schema.json\",\n \"name\": \"Adventure\",\n \"author\": \"iTerm2-Color-Schemes\",\n \"url\": \"https://github.com/mbadolato/iTerm2-Color-Schemes\",\n \"themes\": [\n {\n \"name\": \"Adventure\",\n \"mode\": \"dark\",\n \"colors\": {\n \"accent.background\": \"#25292d\",\n \"accent.foreground\": \"#feffff\",\n \"background\": \"#040404\",\n \"border\": \"#282828\",\n \"danger.background\": \"#d84a33\",\n \"foreground\": \"#feffff\",\n \"input.border\": \"#333333\",\n \"link.active.foreground\": \"#417AB3\",\n \"link.foreground\": \"#417AB3\",\n \"link.hover.foreground\": \"#417AB3\",\n \"list.active.background\": \"#5da60222\",\n \"list.active.border\": \"#5da602\",\n \"list.even.background\": \"#0e0e0e\",\n \"muted.background\": \"#171717\",\n \"muted.foreground\": \"#5d6165\",\n \"panel.background\": \"#003a5b\",\n \"popover.background\": \"#040404\",\n \"popover.foreground\": \"#feffff\",\n \"primary.active.background\": \"#0265a799\",\n \"primary.background\": \"#4384ad\",\n \"primary.foreground\": \"#feffff\",\n \"primary.hover.background\": \"#417AB3\",\n \"scrollbar.background\": \"#003a5b00\",\n \"scrollbar.thumb.background\": \"#606060\",\n \"secondary.background\": \"#171a1c\",\n \"secondary.active.background\": \"#191d1e\",\n \"secondary.foreground\": \"#e4d5c7\",\n \"secondary.hover.background\": \"#1e2224\",\n \"tab.active.background\": \"#040404\",\n \"tab.active.foreground\": \"#feffff\",\n \"tab.background\": \"#04040400\",\n \"tab.foreground\": \"#677179\",\n \"tab_bar.background\": \"#040404\",\n \"table.background\": \"#040404\",\n \"table.head.foreground\": \"#feffffb3\",\n \"table.row.border\": \"#4b647970\",\n \"title_bar.background\": \"#0f1112\",\n \"ring\": \"#5da602\",\n \"base.red\": \"#d84a33\",\n \"base.red.light\": \"#d76b42\",\n \"base.green\": \"#5da602\",\n \"base.green.light\": \"#99b52c\",\n \"base.blue\": \"#417ab3\",\n \"base.blue.light\": \"#97d7ef\",\n \"base.cyan\": \"#41b3a9\",\n \"base.cyan.light\": \"#97efd6\",\n \"base.magenta\": \"#882252\",\n \"base.magenta.light\": \"#e599bc\",\n \"base.yellow\": \"#aa7900\",\n \"base.yellow.light\": \"#ffb670\"\n },\n \"highlight\": {\n \"editor.foreground\": \"#feffff\",\n \"editor.background\": \"#040404\",\n \"editor.active_line.background\": \"#0e0e0e\",\n \"editor.line_number\": \"#5d6165\",\n \"editor.active_line_number\": \"#feffff\",\n \"editor.invisible\": \"#5d616566\",\n \"conflict\": \"#d84a33\",\n \"created\": \"#5da602\",\n \"deleted\": \"#d84a33\",\n \"error\": \"#d84a33\",\n \"hidden\": \"#5d6165\",\n \"hint\": \"#99b52c\",\n \"ignored\": \"#5d6165\",\n \"info\": \"#417ab3\",\n \"modified\": \"#eebb6e\",\n \"predictive\": \"#5d6165\",\n \"renamed\": \"#5da602\",\n \"success\": \"#5da602\",\n \"unreachable\": \"#5d6165\",\n \"warning\": \"#eebb6e\",\n \"syntax\": {\n \"attribute\": {\n \"color\": \"#eebb6e\"\n },\n \"boolean\": {\n \"color\": \"#5da602\"\n },\n \"comment\": {\n \"color\": \"#5d6165\",\n \"font_style\": \"italic\"\n },\n \"comment.doc\": {\n \"color\": \"#5d6165\",\n \"font_style\": \"italic\"\n },\n \"constant\": {\n \"color\": \"#d84a33\"\n },\n \"constructor\": {\n \"color\": \"#eebb6e\"\n },\n \"embedded\": {\n \"color\": \"#feffff\"\n },\n \"function\": {\n \"color\": \"#5da602\"\n },\n \"keyword\": {\n \"color\": \"#417ab3\"\n },\n \"link_text\": {\n \"color\": \"#97d7ef\",\n \"font_style\": \"normal\"\n },\n \"link_uri\": {\n \"color\": \"#4b6479\",\n \"font_style\": \"italic\"\n },\n \"number\": {\n \"color\": \"#d84a33\"\n },\n \"string\": {\n \"color\": \"#5da602\"\n },\n \"string.escape\": {\n \"color\": \"#5da602\"\n },\n \"string.regex\": {\n \"color\": \"#5da602\"\n },\n \"string.special\": {\n \"color\": \"#eebb6e\"\n },\n \"string.special.symbol\": {\n \"color\": \"#eebb6e\"\n },\n \"tag\": {\n \"color\": \"#eebb6e\"\n },\n \"text.literal\": {\n \"color\": \"#d84a33\"\n },\n \"title\": {\n \"color\": \"#97d7ef\",\n \"font_weight\": 600\n },\n \"type\": {\n \"color\": \"#eebb6e\"\n },\n \"property\": {\n \"color\": \"#feffff\"\n },\n \"variable.special\": {\n \"color\": \"#d84a33\"\n }\n }\n }\n },\n {\n \"name\": \"Adventure Time\",\n \"mode\": \"dark\",\n \"colors\": {\n \"accent.background\": \"#36345f\",\n \"accent.foreground\": \"#C7C7D4\",\n \"background\": \"#1f1d45\",\n \"border\": \"#333150\",\n \"foreground\": \"#C7C7D4\",\n \"input.border\": \"#555465\",\n \"link.active.foreground\": \"#4b61bf\",\n \"link.foreground\": \"#5f72c6\",\n \"link.hover.foreground\": \"#8593d3\",\n \"list.active.background\": \"#4ab11822\",\n \"list.active.border\": \"#549235\",\n \"list.even.background\": \"#1c1a37\",\n \"muted.background\": \"#29274a\",\n \"muted.foreground\": \"#717192\",\n \"panel.background\": \"#003a5b\",\n \"popover.background\": \"#1f1d45\",\n \"popover.foreground\": \"#C7C7D4\",\n \"primary.active.background\": \"#5f72c699\",\n \"primary.background\": \"#5f72c6\",\n \"primary.foreground\": \"#ffffff\",\n \"primary.hover.background\": \"#5f72c6aa\",\n \"scrollbar.background\": \"#003a5b00\",\n \"scrollbar.thumb.background\": \"#555465\",\n \"secondary.background\": \"#2e2c51\",\n \"secondary.active.background\": \"#36345f\",\n \"secondary.foreground\": \"#C7C7D4\",\n \"secondary.hover.background\": \"#34325b\",\n \"tab.active.background\": \"#1f1d45\",\n \"tab.active.foreground\": \"#C7C7D4\",\n \"tab.background\": \"#1f1d4500\",\n \"tab.foreground\": \"#aeab9e\",\n \"tab_bar.background\": \"#1f1d45\",\n \"table.active.background\": \"#4ab11811\",\n \"table.active.border\": \"#549235\",\n \"table.head.foreground\": \"#f8dcc0b3\",\n \"table.row.border\": \"#333333\",\n \"title_bar.background\": \"#1c1a3e\",\n \"title_bar.border\": \"#333150\",\n \"base.red\": \"#a02733\",\n \"base.red.light\": \"#fc5f5a\",\n \"base.green\": \"#549235\",\n \"base.green.light\": \"#9eff6e\",\n \"base.blue\": \"#2b53ab\",\n \"base.blue.light\": \"#1997c6\",\n \"base.cyan\": \"#26977b\",\n \"base.cyan.light\": \"#5afcd4\",\n \"base.magenta\": \"#665993\",\n \"base.magenta.light\": \"#9b5953\",\n \"base.yellow\": \"#ce7837\",\n \"base.yellow.light\": \"#efc11a\"\n },\n \"highlight\": {\n \"editor.foreground\": \"#f8dcc0\",\n \"editor.background\": \"#1f1d45\",\n \"editor.active_line.background\": \"#36345f\",\n \"editor.line_number\": \"#8F8F8F\",\n \"editor.active_line_number\": \"#DDDDDD\",\n \"editor.invisible\": \"#5d616566\",\n \"conflict\": \"#D2602D\",\n \"created\": \"#3f72e2\",\n \"hidden\": \"#9E9E9E\",\n \"hint\": \"#b283f8\",\n \"modified\": \"#B0A878\",\n \"predictive\": \"#5D5945\",\n \"syntax\": {\n \"attribute\": {\n \"color\": \"#be9a52\"\n },\n \"boolean\": {\n \"color\": \"#E1D797\"\n },\n \"comment\": {\n \"color\": \"#9E9E9E\"\n },\n \"comment.doc\": {\n \"color\": \"#9E9E9E\"\n },\n \"constant\": {\n \"color\": \"#E1D797\"\n },\n \"constructor\": {\n \"color\": \"#b5af9a\"\n },\n \"embedded\": {\n \"color\": \"#CACCCA\"\n },\n \"function\": {\n \"color\": \"#E1D797\"\n },\n \"keyword\": {\n \"color\": \"#E19773\"\n },\n \"link_text\": {\n \"color\": \"#A86D3B\",\n \"font_style\": \"normal\"\n },\n \"link_uri\": {\n \"color\": \"#6F6D66\",\n \"font_style\": \"italic\"\n },\n \"number\": {\n \"color\": \"#E19773\"\n },\n \"string\": {\n \"color\": \"#76BA53\"\n },\n \"string.escape\": {\n \"color\": \"#76BA53\"\n },\n \"string.regex\": {\n \"color\": \"#76BA53\"\n },\n \"string.special\": {\n \"color\": \"#E1D797\"\n },\n \"string.special.symbol\": {\n \"color\": \"#E1D797\"\n },\n \"tag\": {\n \"color\": \"#b5af9a\"\n },\n \"text.literal\": {\n \"color\": \"#E1D797\"\n },\n \"title\": {\n \"color\": \"#A76D3B\",\n \"font_weight\": 600\n },\n \"type\": {\n \"color\": \"#A86D3B\"\n },\n \"property\": {\n \"color\": \"#CACCCA\"\n },\n \"variable.special\": {\n \"color\": \"#E19773\"\n }\n }\n }\n }\n ]\n}\n" }, { "path": "themes/alduin.json", "content": "{\n \"$schema\": \"https://github.com/longbridge/gpui-component/raw/refs/heads/main/.theme-schema.json\",\n \"name\": \"Alduin\",\n \"author\": \"AlessandroYorba\",\n \"url\": \"https://github.com/AlessandroYorba/Alduin\",\n \"themes\": [\n {\n \"name\": \"Alduin\",\n \"mode\": \"dark\",\n \"colors\": {\n \"accent.background\": \"#2e2b29\",\n \"accent.foreground\": \"#ebdbb2\",\n \"background\": \"#1C1C1C\",\n \"border\": \"#3a3a3a\",\n \"danger.background\": \"#cc241d\",\n \"danger.active.background\": \"#cc241d\",\n \"danger.hover.background\": \"#fb4934\",\n \"foreground\": \"#9E9E9E\",\n \"input.border\": \"#504945\",\n \"link.active.foreground\": \"#83a598\",\n \"link.foreground\": \"#83a598\",\n \"link.hover.foreground\": \"#83a598\",\n \"list.active.background\": \"#262626\",\n \"list.active.border\": \"#9E9E9E\",\n \"list.even.background\": \"#262626\",\n \"list.head.background\": \"#1C1C1C\",\n \"muted.background\": \"#262626\",\n \"muted.foreground\": \"#878787\",\n \"panel.background\": \"#282828\",\n \"primary.active.background\": \"#45858899\",\n \"primary.background\": \"#458588\",\n \"primary.foreground\": \"#F0F0F0\",\n \"primary.hover.background\": \"#458588AA\",\n \"scrollbar.background\": \"#28282800\",\n \"scrollbar.thumb.background\": \"#504945\",\n \"secondary.background\": \"#282828\",\n \"secondary.active.background\": \"#35322f\",\n \"secondary.foreground\": \"#9E9E9E\",\n \"secondary.hover.background\": \"#36323099\",\n \"tab.active.background\": \"#1C1C1C\",\n \"tab.active.foreground\": \"#ebdbb2\",\n \"tab.background\": \"#14141400\",\n \"tab.foreground\": \"#848382\",\n \"table.row.border\": \"#50494570\",\n \"title_bar.background\": \"#262626\",\n \"title_bar.border\": \"#3a3a3a\",\n \"ring\": \"#9E9E9E\",\n \"base.blue\": \"#87afaf\",\n \"base.cyan\": \"#878787\",\n \"base.green\": \"#7a875f\",\n \"base.magenta\": \"#af8787\",\n \"base.magenta.light\": \"#af878788\",\n \"base.red\": \"#8b5f61\",\n \"base.yellow\": \"#9d906c\"\n },\n \"highlight\": {\n \"editor.foreground\": \"#DDDDDD\",\n \"editor.background\": \"#000000\",\n \"editor.active_line.background\": \"#131313\",\n \"editor.line_number\": \"#8F8F8F\",\n \"editor.active_line_number\": \"#DDDDDD\",\n \"editor.invisible\": \"#9E9E9E66\",\n \"conflict\": \"#8b5f61\",\n \"created\": \"#87afaf\",\n \"error\": \"#8b5f61\",\n \"hidden\": \"#9E9E9E\",\n \"hint\": \"#af8787\",\n \"info\": \"#878787\",\n \"modified\": \"#B0A878\",\n \"predictive\": \"#5D5945\",\n \"syntax\": {\n \"attribute\": {\n \"color\": \"#be9a52\"\n },\n \"boolean\": {\n \"color\": \"#E1D797\"\n },\n \"comment\": {\n \"color\": \"#9E9E9E\"\n },\n \"comment.doc\": {\n \"color\": \"#9E9E9E\"\n },\n \"constant\": {\n \"color\": \"#E1D797\"\n },\n \"constructor\": {\n \"color\": \"#b5af9a\"\n },\n \"embedded\": {\n \"color\": \"#CACCCA\"\n },\n \"function\": {\n \"color\": \"#E1D797\"\n },\n \"keyword\": {\n \"color\": \"#E19773\"\n },\n \"link_text\": {\n \"color\": \"#A86D3B\",\n \"font_style\": \"normal\"\n },\n \"link_uri\": {\n \"color\": \"#6F6D66\",\n \"font_style\": \"italic\"\n },\n \"number\": {\n \"color\": \"#E19773\"\n },\n \"string\": {\n \"color\": \"#76BA53\"\n },\n \"string.escape\": {\n \"color\": \"#76BA53\"\n },\n \"string.regex\": {\n \"color\": \"#76BA53\"\n },\n \"string.special\": {\n \"color\": \"#E1D797\"\n },\n \"string.special.symbol\": {\n \"color\": \"#E1D797\"\n },\n \"tag\": {\n \"color\": \"#b5af9a\"\n },\n \"text.literal\": {\n \"color\": \"#E1D797\"\n },\n \"title\": {\n \"color\": \"#A76D3B\",\n \"font_weight\": 600\n },\n \"type\": {\n \"color\": \"#A86D3B\"\n },\n \"property\": {\n \"color\": \"#CACCCA\"\n },\n \"variable.special\": {\n \"color\": \"#E19773\"\n }\n }\n }\n }\n ]\n}\n" }, { "path": "themes/asciinema.json", "content": "{\n \"$schema\": \"https://github.com/longbridge/gpui-component/raw/refs/heads/main/.theme-schema.json\",\n \"name\": \"Asciinema\",\n \"author\": \"asciinema.org\",\n \"url\": \"https://asciinema.org\",\n \"themes\": [\n {\n \"name\": \"Asciinema\",\n \"mode\": \"dark\",\n \"colors\": {\n \"accent.background\": \"#262829\",\n \"accent.foreground\": \"#cccccc\",\n \"background\": \"#121314\",\n \"border\": \"#3a3a3a\",\n \"danger.background\": \"#dd3c69\",\n \"danger.active.background\": \"#dd3c69\",\n \"danger.hover.background\": \"#e94f7a\",\n \"foreground\": \"#cccccc\",\n \"input.border\": \"#3a3a3a\",\n \"link.active.foreground\": \"#26b0d7\",\n \"link.foreground\": \"#26b0d7\",\n \"link.hover.foreground\": \"#3cc0e7\",\n \"list.active.background\": \"#1a1b1c\",\n \"list.active.border\": \"#cccccc\",\n \"list.even.background\": \"#1a1b1c\",\n \"list.head.background\": \"#121314\",\n \"muted.background\": \"#1a1b1c\",\n \"muted.foreground\": \"#6d6d6d\",\n \"panel.background\": \"#181919\",\n \"primary.active.background\": \"#26b0d799\",\n \"primary.background\": \"#26b0d7\",\n \"primary.foreground\": \"#ffffff\",\n \"primary.hover.background\": \"#26b0d7AA\",\n \"scrollbar.background\": \"#12131400\",\n \"scrollbar.thumb.background\": \"#2a2a2a\",\n \"secondary.background\": \"#181919\",\n \"secondary.active.background\": \"#1f2020\",\n \"secondary.foreground\": \"#cccccc\",\n \"secondary.hover.background\": \"#1f202099\",\n \"tab.active.background\": \"#121314\",\n \"tab.active.foreground\": \"#cccccc\",\n \"tab.background\": \"#12131400\",\n \"tab.foreground\": \"#6d6d6d\",\n \"table.row.border\": \"#2a2a2a70\",\n \"title_bar.background\": \"#1a1b1c\",\n \"title_bar.border\": \"#3a3a3a\",\n \"ring\": \"#5d5d5d\",\n \"base.blue\": \"#26b0d7\",\n \"base.cyan\": \"#54e1b9\",\n \"base.green\": \"#4ebf22\",\n \"base.magenta\": \"#b954e1\",\n \"base.red\": \"#dd3c69\",\n \"base.yellow\": \"#ddaf3c\"\n },\n \"highlight\": {\n \"editor.foreground\": \"#cccccc\",\n \"editor.background\": \"#121314\",\n \"editor.active_line.background\": \"#1a1b1c\",\n \"editor.line_number\": \"#6d6d6d\",\n \"editor.active_line_number\": \"#cccccc\",\n \"editor.invisible\": \"#6d6d6d66\",\n \"conflict\": \"#dd3c69\",\n \"created\": \"#4ebf22\",\n \"error\": \"#dd3c69\",\n \"hidden\": \"#6d6d6d\",\n \"hint\": \"#b954e1\",\n \"info\": \"#26b0d7\",\n \"modified\": \"#ddaf3c\",\n \"predictive\": \"#2a2a2a\",\n \"syntax\": {\n \"attribute\": {\n \"color\": \"#ddaf3c\"\n },\n \"boolean\": {\n \"color\": \"#b954e1\"\n },\n \"comment\": {\n \"color\": \"#5d5d5d\"\n },\n \"comment.doc\": {\n \"color\": \"#5d5d5d\"\n },\n \"constant\": {\n \"color\": \"#b954e1\"\n },\n \"constructor\": {\n \"color\": \"#26b0d7\"\n },\n \"embedded\": {\n \"color\": \"#cccccc\"\n },\n \"function\": {\n \"color\": \"#54e1b9\"\n },\n \"keyword\": {\n \"color\": \"#dd3c69\"\n },\n \"link_text\": {\n \"color\": \"#26b0d7\",\n \"font_style\": \"normal\"\n },\n \"link_uri\": {\n \"color\": \"#54e1b9\",\n \"font_style\": \"italic\"\n },\n \"number\": {\n \"color\": \"#b954e1\"\n },\n \"string\": {\n \"color\": \"#4ebf22\"\n },\n \"string.escape\": {\n \"color\": \"#54e1b9\"\n },\n \"string.regex\": {\n \"color\": \"#4ebf22\"\n },\n \"string.special\": {\n \"color\": \"#ddaf3c\"\n },\n \"string.special.symbol\": {\n \"color\": \"#ddaf3c\"\n },\n \"tag\": {\n \"color\": \"#dd3c69\"\n },\n \"text.literal\": {\n \"color\": \"#cccccc\"\n },\n \"title\": {\n \"color\": \"#ddaf3c\",\n \"font_weight\": 600\n },\n \"type\": {\n \"color\": \"#26b0d7\"\n },\n \"property\": {\n \"color\": \"#cccccc\"\n },\n \"variable.special\": {\n \"color\": \"#dd3c69\"\n }\n }\n }\n }\n ]\n}\n" }, { "path": "themes/ayu.json", "content": "{\n \"$schema\": \"https://github.com/longbridge/gpui-component/raw/refs/heads/main/.theme-schema.json\",\n \"name\": \"Ayu Light\",\n \"author\": \"Zed Industries\",\n \"url\": \"https://github.com/zed-industries/zed/blob/e62dd2a0e584154886ff86cc1e9e3e060558b977/assets/themes/ayu\",\n \"themes\": [\n {\n \"name\": \"Ayu Light\",\n \"mode\": \"light\",\n \"colors\": {\n \"accent.background\": \"#dadadc\",\n \"accent.foreground\": \"#5C6773\",\n \"background\": \"#FCFCFC\",\n \"foreground\": \"#5c6166\",\n \"border\": \"#cfd1d2ff\",\n \"ring\": \"#FF9940\",\n \"input.border\": \"#D9DCE3\",\n \"list.active.background\": \"#55B4D422\",\n \"list.active.border\": \"#55B4D4\",\n \"list.even.background\": \"#E6E6E6\",\n \"list.head.background\": \"#F4F4F599\",\n \"muted.background\": \"#F4F4F5\",\n \"muted.foreground\": \"#99a0a6\",\n \"panel.background\": \"#F3F4F5\",\n \"popover.background\": \"#ECECED\",\n \"popover.foreground\": \"#5C6773\",\n \"primary.active.background\": \"#42accf\",\n \"primary.background\": \"#55b4d3\",\n \"primary.foreground\": \"#FAFAFA\",\n \"primary.hover.background\": \"#5fb9d7\",\n \"scrollbar.background\": \"#FAFAFA00\",\n \"scrollbar.thumb.background\": \"#5c61664c\",\n \"secondary.active.background\": \"#CECECE\",\n \"secondary.background\": \"#ECECED\",\n \"secondary.foreground\": \"#5C6773\",\n \"secondary.hover.background\": \"#e0e0e0\",\n \"tab.active.background\": \"#FCFCFC\",\n \"tab.active.foreground\": \"#5C6773\",\n \"tab.background\": \"#ECECED00\",\n \"tab_bar.background\": \"#F4F4F5\",\n \"title_bar.background\": \"#ECECED\",\n \"title_bar.border\": \"#CFD1D2\",\n \"base.yellow\": \"#F1AD49\",\n \"base.red\": \"#F07171\",\n \"base.blue\": \"#55b4d3\",\n \"base.green\": \"#85b304\",\n \"base.magenta\": \"#9371f0\",\n \"base.cyan\": \"#4dbf99\"\n },\n \"highlight\": {\n \"editor.foreground\": \"#5C6773\",\n \"editor.background\": \"#FCFCFC\",\n \"editor.active_line.background\": \"#ECECED\",\n \"editor.line_number\": \"#ABB0B6\",\n \"editor.active_line_number\": \"#5C6773\",\n \"editor.invisible\": \"#73777b66\",\n \"conflict\": \"#f1ad49ff\",\n \"conflict.background\": \"#ffeedaff\",\n \"conflict.border\": \"#ffe1beff\",\n \"created\": \"#85b304ff\",\n \"created.background\": \"#e9efd2ff\",\n \"created.border\": \"#d7e3aeff\",\n \"deleted\": \"#ef7271ff\",\n \"deleted.background\": \"#ffe3e1ff\",\n \"deleted.border\": \"#ffcdcaff\",\n \"error\": \"#ef7271ff\",\n \"error.background\": \"#ffe3e1ff\",\n \"error.border\": \"#ffcdcaff\",\n \"hidden\": \"#a9acaeff\",\n \"hidden.background\": \"#dcdddeff\",\n \"hidden.border\": \"#d5d6d8ff\",\n \"hint\": \"#8ca7c2ff\",\n \"hint.background\": \"#deebfaff\",\n \"hint.border\": \"#c4daf6ff\",\n \"ignored\": \"#a9acaeff\",\n \"ignored.background\": \"#dcdddeff\",\n \"ignored.border\": \"#cfd1d2ff\",\n \"info\": \"#3b9ee5ff\",\n \"info.background\": \"#deebfaff\",\n \"info.border\": \"#c4daf6ff\",\n \"modified\": \"#f1ad49ff\",\n \"modified.background\": \"#ffeedaff\",\n \"modified.border\": \"#ffe1beff\",\n \"predictive\": \"#9eb9d3ff\",\n \"predictive.background\": \"#e9efd2ff\",\n \"predictive.border\": \"#d7e3aeff\",\n \"renamed\": \"#3b9ee5ff\",\n \"renamed.background\": \"#deebfaff\",\n \"renamed.border\": \"#c4daf6ff\",\n \"success\": \"#85b304ff\",\n \"success.background\": \"#e9efd2ff\",\n \"success.border\": \"#d7e3aeff\",\n \"unreachable\": \"#8b8e92ff\",\n \"unreachable.background\": \"#dcdddeff\",\n \"unreachable.border\": \"#cfd1d2ff\",\n \"warning\": \"#f1ad49ff\",\n \"warning.background\": \"#ffeedaff\",\n \"warning.border\": \"#ffe1beff\",\n \"syntax\": {\n \"attribute\": {\n \"color\": \"#3b9ee5ff\"\n },\n \"boolean\": {\n \"color\": \"#a37accff\"\n },\n \"comment\": {\n \"color\": \"#898d90ff\"\n },\n \"comment.doc\": {\n \"color\": \"#898d90ff\"\n },\n \"constant\": {\n \"color\": \"#a37accff\"\n },\n \"constructor\": {\n \"color\": \"#3b9ee5ff\"\n },\n \"embedded\": {\n \"color\": \"#5c6166ff\"\n },\n \"emphasis\": {\n \"color\": \"#3b9ee5ff\"\n },\n \"emphasis.strong\": {\n \"color\": \"#3b9ee5ff\",\n \"font_weight\": 700\n },\n \"enum\": {\n \"color\": \"#f98d3fff\"\n },\n \"function\": {\n \"color\": \"#f2ad48ff\"\n },\n \"hint\": {\n \"color\": \"#8ca7c2ff\",\n \"font_weight\": 700\n },\n \"keyword\": {\n \"color\": \"#fa8d3eff\"\n },\n \"label\": {\n \"color\": \"#3b9ee5ff\"\n },\n \"link_text\": {\n \"color\": \"#f98d3fff\",\n \"font_style\": \"italic\"\n },\n \"link_uri\": {\n \"color\": \"#85b304ff\"\n },\n \"namespace\": {\n \"color\": \"#5c6166ff\"\n },\n \"number\": {\n \"color\": \"#a37accff\"\n },\n \"operator\": {\n \"color\": \"#ed9365ff\"\n },\n \"predictive\": {\n \"color\": \"#9eb9d3ff\",\n \"font_style\": \"italic\"\n },\n \"preproc\": {\n \"color\": \"#5c6166ff\"\n },\n \"primary\": {\n \"color\": \"#5c6166ff\"\n },\n \"property\": {\n \"color\": \"#3b9ee5ff\"\n },\n \"punctuation\": {\n \"color\": \"#73777bff\"\n },\n \"punctuation.bracket\": {\n \"color\": \"#73777bff\"\n },\n \"punctuation.delimiter\": {\n \"color\": \"#73777bff\"\n },\n \"punctuation.list_marker\": {\n \"color\": \"#73777bff\"\n },\n \"punctuation.markup\": {\n \"color\": \"#73777bff\"\n },\n \"punctuation.special\": {\n \"color\": \"#a37accff\"\n },\n \"selector\": {\n \"color\": \"#a37accff\"\n },\n \"selector.pseudo\": {\n \"color\": \"#3b9ee5ff\"\n },\n \"string\": {\n \"color\": \"#86b300ff\"\n },\n \"string.escape\": {\n \"color\": \"#898d90ff\"\n },\n \"string.regex\": {\n \"color\": \"#4bbf98ff\"\n },\n \"string.special\": {\n \"color\": \"#e6ba7eff\"\n },\n \"string.special.symbol\": {\n \"color\": \"#f98d3fff\"\n },\n \"tag\": {\n \"color\": \"#3b9ee5ff\"\n },\n \"text.literal\": {\n \"color\": \"#f98d3fff\"\n },\n \"title\": {\n \"color\": \"#5c6166ff\",\n \"font_weight\": 700\n },\n \"type\": {\n \"color\": \"#389ee6ff\"\n },\n \"variable\": {\n \"color\": \"#5c6166ff\"\n },\n \"variant\": {\n \"color\": \"#3b9ee5ff\"\n }\n }\n }\n },\n {\n \"name\": \"Ayu Dark\",\n \"mode\": \"dark\",\n \"colors\": {\n \"accent.background\": \"#20242b\",\n \"accent.foreground\": \"#B3B1AD\",\n \"background\": \"#0D1016\",\n \"border\": \"#292a2c\",\n \"ring\": \"#FFB454\",\n \"foreground\": \"#B3B1AD\",\n \"input.border\": \"#2D2F34\",\n \"list.active.background\": \"#36A3D922\",\n \"list.active.border\": \"#36A3D9\",\n \"list.even.background\": \"#191F2A99\",\n \"muted.background\": \"#16191F\",\n \"muted.foreground\": \"#52514f\",\n \"popover.background\": \"#0D1016\",\n \"popover.foreground\": \"#B3B1AD\",\n \"primary.active.background\": \"#36A3D9\",\n \"primary.background\": \"#5ac1fe\",\n \"primary.foreground\": \"#1F2430\",\n \"primary.hover.background\": \"#3DAEE9\",\n \"scrollbar.background\": \"#0A0E1400\",\n \"scrollbar.thumb.background\": \"#bfbdb64c\",\n \"secondary.active.background\": \"#26282f\",\n \"secondary.background\": \"#1F2127\",\n \"secondary.foreground\": \"#B3B1AD\",\n \"secondary.hover.background\": \"#26282f99\",\n \"tab.active.foreground\": \"#B3B1AD\",\n \"tab.active.background\": \"#0D1016\",\n \"tab_bar.background\": \"#16191F\",\n \"title_bar.background\": \"#16191F\",\n \"title_bar.border\": \"#38393b\",\n \"base.yellow\": \"#FEB454\",\n \"base.red\": \"#ef7177\",\n \"base.blue\": \"#5ac1fe\",\n \"base.green\": \"#aad84c\",\n \"base.magenta\": \"#d2a6ff\",\n \"base.cyan\": \"#5a728b\"\n },\n \"highlight\": {\n \"editor.foreground\": \"#bfbdb6\",\n \"editor.background\": \"#0d1016\",\n \"editor.active_line.background\": \"#1f2127bf\",\n \"editor.line_number\": \"#4b4c4e\",\n \"editor.active_line_number\": \"#DDDDDD\",\n \"editor.invisible\": \"#73777b66\",\n \"conflict\": \"#feb454ff\",\n \"conflict.background\": \"#572815ff\",\n \"conflict.border\": \"#754221ff\",\n \"created\": \"#aad84cff\",\n \"created.background\": \"#294113ff\",\n \"created.border\": \"#405c1cff\",\n \"deleted\": \"#ef7177ff\",\n \"deleted.background\": \"#48161bff\",\n \"deleted.border\": \"#66272dff\",\n \"error\": \"#ef7177ff\",\n \"error.background\": \"#48161bff\",\n \"error.border\": \"#66272dff\",\n \"hidden\": \"#696a6aff\",\n \"hidden.background\": \"#313337ff\",\n \"hidden.border\": \"#383a3eff\",\n \"hint\": \"#628b80ff\",\n \"hint.background\": \"#0d2f4eff\",\n \"hint.border\": \"#1b4a6eff\",\n \"ignored\": \"#696a6aff\",\n \"ignored.background\": \"#313337ff\",\n \"ignored.border\": \"#3f4043ff\",\n \"info\": \"#5ac1feff\",\n \"info.background\": \"#0d2f4eff\",\n \"info.border\": \"#1b4a6eff\",\n \"modified\": \"#feb454ff\",\n \"modified.background\": \"#572815ff\",\n \"modified.border\": \"#754221ff\",\n \"predictive\": \"#5a728bff\",\n \"predictive.background\": \"#294113ff\",\n \"predictive.border\": \"#405c1cff\",\n \"renamed\": \"#5ac1feff\",\n \"renamed.background\": \"#0d2f4eff\",\n \"renamed.border\": \"#1b4a6eff\",\n \"success\": \"#aad84cff\",\n \"success.background\": \"#294113ff\",\n \"success.border\": \"#405c1cff\",\n \"unreachable\": \"#8a8986ff\",\n \"unreachable.background\": \"#313337ff\",\n \"unreachable.border\": \"#3f4043ff\",\n \"warning\": \"#feb454ff\",\n \"warning.background\": \"#572815ff\",\n \"warning.border\": \"#754221ff\",\n \"syntax\": {\n \"attribute\": {\n \"color\": \"#5ac1feff\"\n },\n \"boolean\": {\n \"color\": \"#d2a6ffff\"\n },\n \"comment\": {\n \"color\": \"#8c8b88ff\"\n },\n \"comment.doc\": {\n \"color\": \"#8c8b88ff\"\n },\n \"constant\": {\n \"color\": \"#d2a6ffff\"\n },\n \"constructor\": {\n \"color\": \"#5ac1feff\"\n },\n \"embedded\": {\n \"color\": \"#bfbdb6ff\"\n },\n \"emphasis\": {\n \"color\": \"#5ac1feff\"\n },\n \"emphasis.strong\": {\n \"color\": \"#5ac1feff\",\n \"font_weight\": 700\n },\n \"enum\": {\n \"color\": \"#fe8f40ff\"\n },\n \"function\": {\n \"color\": \"#ffb353ff\"\n },\n \"hint\": {\n \"color\": \"#628b80ff\",\n \"font_weight\": 700\n },\n \"keyword\": {\n \"color\": \"#ff8f3fff\"\n },\n \"label\": {\n \"color\": \"#5ac1feff\"\n },\n \"link_text\": {\n \"color\": \"#fe8f40ff\",\n \"font_style\": \"italic\"\n },\n \"link_uri\": {\n \"color\": \"#aad84cff\"\n },\n \"namespace\": {\n \"color\": \"#bfbdb6ff\"\n },\n \"number\": {\n \"color\": \"#d2a6ffff\"\n },\n \"operator\": {\n \"color\": \"#f29668ff\"\n },\n \"predictive\": {\n \"color\": \"#5a728bff\",\n \"font_style\": \"italic\"\n },\n \"preproc\": {\n \"color\": \"#bfbdb6ff\"\n },\n \"primary\": {\n \"color\": \"#bfbdb6ff\"\n },\n \"property\": {\n \"color\": \"#5ac1feff\"\n },\n \"punctuation\": {\n \"color\": \"#a6a5a0ff\"\n },\n \"punctuation.bracket\": {\n \"color\": \"#a6a5a0ff\"\n },\n \"punctuation.delimiter\": {\n \"color\": \"#a6a5a0ff\"\n },\n \"punctuation.list_marker\": {\n \"color\": \"#a6a5a0ff\"\n },\n \"punctuation.markup\": {\n \"color\": \"#a6a5a0ff\"\n },\n \"punctuation.special\": {\n \"color\": \"#d2a6ffff\"\n },\n \"selector\": {\n \"color\": \"#d2a6ffff\"\n },\n \"selector.pseudo\": {\n \"color\": \"#5ac1feff\"\n },\n \"string\": {\n \"color\": \"#a9d94bff\"\n },\n \"string.escape\": {\n \"color\": \"#8c8b88ff\"\n },\n \"string.regex\": {\n \"color\": \"#95e6cbff\"\n },\n \"string.special\": {\n \"color\": \"#e5b572ff\"\n },\n \"string.special.symbol\": {\n \"color\": \"#fe8f40ff\"\n },\n \"tag\": {\n \"color\": \"#5ac1feff\"\n },\n \"text.literal\": {\n \"color\": \"#fe8f40ff\"\n },\n \"title\": {\n \"color\": \"#bfbdb6ff\",\n \"font_weight\": 700\n },\n \"type\": {\n \"color\": \"#59c2ffff\"\n },\n \"variable\": {\n \"color\": \"#bfbdb6ff\"\n },\n \"variant\": {\n \"color\": \"#5ac1feff\"\n }\n }\n }\n }\n ]\n}\n" }, { "path": "themes/catppuccin.json", "content": "{\n \"$schema\": \"https://github.com/longbridge/gpui-component/raw/refs/heads/main/.theme-schema.json\",\n \"name\": \"Catppuccin\",\n \"author\": \"Catppuccino\",\n \"url\": \"https://github.com/catppuccin/catppuccin\",\n \"themes\": [\n {\n \"name\": \"Catppuccin Latte\",\n \"mode\": \"light\",\n \"colors\": {\n \"accent.background\": \"#d3d8e0\",\n \"accent.foreground\": \"#4c4f69\",\n \"background\": \"#E5E9EF\",\n \"border\": \"#CCD0DA\",\n \"ring\": \"#7287fd\",\n \"foreground\": \"#4c4f69\",\n \"input.border\": \"#acb0be\",\n \"link.active.foreground\": \"#7287fd\",\n \"link.foreground\": \"#7287fd\",\n \"link.hover.foreground\": \"#7287fd\",\n \"list.active.background\": \"#7287fd22\",\n \"list.active.border\": \"#7287fd\",\n \"list.even.background\": \"#EFF1F5\",\n \"list.head.background\": \"#dce0e8\",\n \"muted.background\": \"#dce0e8\",\n \"muted.foreground\": \"#9a9db2\",\n \"panel.background\": \"#dce0e8\",\n \"primary.active.background\": \"#7287fd\",\n \"primary.background\": \"#7287fd\",\n \"primary.foreground\": \"#EFF1F5\",\n \"scrollbar.background\": \"#EFF1F500\",\n \"scrollbar.thumb.background\": \"#acb0be\",\n \"secondary.active.background\": \"#CCD2DE\",\n \"secondary.background\": \"#dce0e8\",\n \"secondary.foreground\": \"#4c4f69\",\n \"secondary.hover.background\": \"#CCD2DE99\",\n \"tab.active.background\": \"#E5E9EF\",\n \"tab.active.foreground\": \"#4c4f69\",\n \"tab.background\": \"#D2D7E200\",\n \"tab.foreground\": \"#82848c\",\n \"tab_bar.background\": \"#DCE0E8\",\n \"title_bar.background\": \"#DCE0E8\",\n \"title_bar.border\": \"#bec3d0\",\n \"base.red\": \"#d26a53\",\n \"base.green\": \"#5aa93b\",\n \"base.yellow\": \"#df8e1d\",\n \"base.blue\": \"#78acdc\",\n \"base.magenta\": \"#8778dc\",\n \"base.magenta.light\": \"#9978dc66\",\n \"base.cyan\": \"#53d2b0\"\n },\n \"highlight\": {\n \"editor.foreground\": \"#4c4f69\",\n \"editor.background\": \"#EFF1F5\",\n \"editor.active_line.background\": \"#dce0e8\",\n \"editor.line_number\": \"#9a9db2\",\n \"editor.active_line_number\": \"#4c4f69\",\n \"editor.invisible\": \"#7c7f9366\",\n \"conflict\": \"#d20f39\",\n \"created\": \"#85dc78\",\n \"deleted\": \"#dc8a78\",\n \"error\": \"#d20f39\",\n \"hidden\": \"#9a9db2\",\n \"hint\": \"#7287fd\",\n \"ignored\": \"#acb0be\",\n \"info\": \"#1e66f5\",\n \"modified\": \"#df8e1d\",\n \"predictive\": \"#9a9db2\",\n \"renamed\": \"#9978dc\",\n \"success\": \"#85dc78\",\n \"unreachable\": \"#acb0be\",\n \"warning\": \"#df8e1d\",\n \"syntax\": {\n \"variable\": {\n \"color\": \"#4c4f69\"\n },\n \"variable.builtin\": {\n \"color\": \"#d20f39\"\n },\n \"variable.parameter\": {\n \"color\": \"#e64553\"\n },\n \"variable.member\": {\n \"color\": \"#1e66f5\"\n },\n \"variable.special\": {\n \"color\": \"#d20f39\",\n \"font_style\": \"italic\"\n },\n \"constant\": {\n \"color\": \"#fe640b\"\n },\n \"constant.builtin\": {\n \"color\": \"#fe640b\"\n },\n \"constant.macro\": {\n \"color\": \"#8839ef\"\n },\n \"module\": {\n \"color\": \"#df8e1d\",\n \"font_style\": \"italic\"\n },\n \"label\": {\n \"color\": \"#209fb5\"\n },\n \"string\": {\n \"color\": \"#85dc78\"\n },\n \"string.documentation\": {\n \"color\": \"#179299\"\n },\n \"string.regexp\": {\n \"color\": \"#fe640b\"\n },\n \"string.escape\": {\n \"color\": \"#ea76cb\"\n },\n \"string.special\": {\n \"color\": \"#ea76cb\"\n },\n \"string.special.path\": {\n \"color\": \"#ea76cb\"\n },\n \"string.special.symbol\": {\n \"color\": \"#dd7878\"\n },\n \"string.special.url\": {\n \"color\": \"#dc8a78\",\n \"font_style\": \"italic\"\n },\n \"character\": {\n \"color\": \"#179299\"\n },\n \"character.special\": {\n \"color\": \"#ea76cb\"\n },\n \"boolean\": {\n \"color\": \"#fe640b\"\n },\n \"number\": {\n \"color\": \"#fe640b\"\n },\n \"number.float\": {\n \"color\": \"#fe640b\"\n },\n \"type\": {\n \"color\": \"#df8e1d\"\n },\n \"type.builtin\": {\n \"color\": \"#8839ef\",\n \"font_style\": \"italic\"\n },\n \"type.definition\": {\n \"color\": \"#df8e1d\"\n },\n \"type.interface\": {\n \"color\": \"#df8e1d\",\n \"font_style\": \"italic\"\n },\n \"type.super\": {\n \"color\": \"#df8e1d\",\n \"font_style\": \"italic\"\n },\n \"attribute\": {\n \"color\": \"#fe640b\"\n },\n \"property\": {\n \"color\": \"#1e66f5\"\n },\n \"function\": {\n \"color\": \"#1e66f5\"\n },\n \"function.builtin\": {\n \"color\": \"#fe640b\"\n },\n \"function.call\": {\n \"color\": \"#1e66f5\"\n },\n \"function.macro\": {\n \"color\": \"#179299\"\n },\n \"function.method\": {\n \"color\": \"#1e66f5\"\n },\n \"function.method.call\": {\n \"color\": \"#1e66f5\"\n },\n \"constructor\": {\n \"color\": \"#dd7878\"\n },\n \"operator\": {\n \"color\": \"#04a5e5\"\n },\n \"keyword\": {\n \"color\": \"#8839ef\"\n },\n \"keyword.modifier\": {\n \"color\": \"#8839ef\"\n },\n \"keyword.type\": {\n \"color\": \"#8839ef\"\n },\n \"keyword.coroutine\": {\n \"color\": \"#8839ef\"\n },\n \"keyword.function\": {\n \"color\": \"#8839ef\"\n },\n \"keyword.operator\": {\n \"color\": \"#8839ef\"\n },\n \"keyword.import\": {\n \"color\": \"#8839ef\"\n },\n \"keyword.repeat\": {\n \"color\": \"#8839ef\"\n },\n \"keyword.return\": {\n \"color\": \"#8839ef\"\n },\n \"keyword.debug\": {\n \"color\": \"#8839ef\"\n },\n \"keyword.exception\": {\n \"color\": \"#8839ef\"\n },\n \"keyword.conditional\": {\n \"color\": \"#8839ef\"\n },\n \"keyword.conditional.ternary\": {\n \"color\": \"#8839ef\"\n },\n \"keyword.directive\": {\n \"color\": \"#ea76cb\"\n },\n \"keyword.directive.define\": {\n \"color\": \"#ea76cb\"\n },\n \"keyword.export\": {\n \"color\": \"#04a5e5\"\n },\n \"punctuation\": {\n \"color\": \"#7c7f93\"\n },\n \"punctuation.delimiter\": {\n \"color\": \"#7c7f93\"\n },\n \"punctuation.bracket\": {\n \"color\": \"#7c7f93\"\n },\n \"punctuation.special\": {\n \"color\": \"#ea76cb\"\n },\n \"punctuation.special.symbol\": {\n \"color\": \"#dd7878\"\n },\n \"punctuation.list_marker\": {\n \"color\": \"#179299\"\n },\n \"comment\": {\n \"color\": \"#7c7f93\",\n \"font_style\": \"italic\"\n },\n \"comment.doc\": {\n \"color\": \"#7c7f93\",\n \"font_style\": \"italic\"\n },\n \"comment.documentation\": {\n \"color\": \"#7c7f93\",\n \"font_style\": \"italic\"\n },\n \"comment.error\": {\n \"color\": \"#d20f39\",\n \"font_style\": \"italic\"\n },\n \"comment.warning\": {\n \"color\": \"#df8e1d\",\n \"font_style\": \"italic\"\n },\n \"comment.hint\": {\n \"color\": \"#1e66f5\",\n \"font_style\": \"italic\"\n },\n \"comment.todo\": {\n \"color\": \"#dd7878\",\n \"font_style\": \"italic\"\n },\n \"comment.note\": {\n \"color\": \"#dc8a78\",\n \"font_style\": \"italic\"\n },\n \"diff.plus\": {\n \"color\": \"#40a02b\"\n },\n \"diff.minus\": {\n \"color\": \"#d20f39\"\n },\n \"tag\": {\n \"color\": \"#1e66f5\"\n },\n \"tag.attribute\": {\n \"color\": \"#df8e1d\",\n \"font_style\": \"italic\"\n },\n \"tag.delimiter\": {\n \"color\": \"#179299\"\n },\n \"parameter\": {\n \"color\": \"#e64553\"\n },\n \"field\": {\n \"color\": \"#7287fd\"\n },\n \"namespace\": {\n \"color\": \"#df8e1d\",\n \"font_style\": \"italic\"\n },\n \"float\": {\n \"color\": \"#fe640b\"\n },\n \"symbol\": {\n \"color\": \"#ea76cb\"\n },\n \"string.regex\": {\n \"color\": \"#fe640b\"\n },\n \"text\": {\n \"color\": \"#4c4f69\"\n },\n \"emphasis.strong\": {\n \"color\": \"#e64553\",\n \"font_weight\": 700\n },\n \"emphasis\": {\n \"color\": \"#e64553\",\n \"font_style\": \"italic\"\n },\n \"embedded\": {\n \"color\": \"#e64553\"\n },\n \"text.literal\": {\n \"color\": \"#40a02b\"\n },\n \"concept\": {\n \"color\": \"#209fb5\"\n },\n \"enum\": {\n \"color\": \"#179299\",\n \"font_weight\": 700\n },\n \"function.decorator\": {\n \"color\": \"#fe640b\"\n },\n \"type.class.definition\": {\n \"color\": \"#df8e1d\",\n \"font_weight\": 700\n },\n \"hint\": {\n \"color\": \"#acb0be\",\n \"font_style\": \"italic\"\n },\n \"link_text\": {\n \"color\": \"#7287fd\"\n },\n \"link_uri\": {\n \"color\": \"#1e66f5\",\n \"font_style\": \"italic\"\n },\n \"parent\": {\n \"color\": \"#fe640b\"\n },\n \"predictive\": {\n \"color\": \"#9ca0b0\"\n },\n \"predoc\": {\n \"color\": \"#d20f39\"\n },\n \"primary\": {\n \"color\": \"#e64553\"\n },\n \"tag.doctype\": {\n \"color\": \"#8839ef\"\n },\n \"string.doc\": {\n \"color\": \"#179299\",\n \"font_style\": \"italic\"\n },\n \"title\": {\n \"color\": \"#4c4f69\",\n \"font_weight\": 800\n },\n \"variant\": {\n \"color\": \"#d20f39\"\n }\n }\n }\n },\n {\n \"name\": \"Catppuccin Frappe\",\n \"mode\": \"dark\",\n \"colors\": {\n \"accent.background\": \"#3b3f4f\",\n \"accent.foreground\": \"#c6d0f5\",\n \"background\": \"#232634\",\n \"border\": \"#3e4255\",\n \"ring\": \"#f2d5cf\",\n \"foreground\": \"#c6d0f5\",\n \"input.border\": \"#51576d\",\n \"list.active.background\": \"#8caaee15\",\n \"list.even.background\": \"#303446\",\n \"list.head.background\": \"#2A2C3C\",\n \"muted.background\": \"#2c303f\",\n \"muted.foreground\": \"#979db5\",\n \"panel.background\": \"#414559\",\n \"popover.background\": \"#1E202B\",\n \"popover.foreground\": \"#c6d0f5\",\n \"primary.active.background\": \"#8caaee\",\n \"primary.background\": \"#8caaee\",\n \"primary.foreground\": \"#232634\",\n \"primary.hover.background\": \"#8caaee\",\n \"scrollbar.background\": \"#30344600\",\n \"scrollbar.thumb.background\": \"#51576d\",\n \"secondary.active.background\": \"#313445\",\n \"secondary.background\": \"#414559\",\n \"secondary.foreground\": \"#c6d0f5\",\n \"secondary.hover.background\": \"#31344599\",\n \"tab.active.background\": \"#232634\",\n \"tab.active.foreground\": \"#dce2f9\",\n \"tab.background\": \"#1E202B00\",\n \"tab.foreground\": \"#abb5d9\",\n \"tab_bar.background\": \"#1E202B\",\n \"title_bar.background\": \"#1D202B\",\n \"title_bar.border\": \"#30354b\",\n \"base.red\": \"#e78284\",\n \"base.green\": \"#a6d189\",\n \"base.yellow\": \"#e7d682\",\n \"base.blue\": \"#8caaee\",\n \"base.magenta\": \"#9882e7\",\n \"base.magenta.light\": \"#9882e766\",\n \"base.cyan\": \"#81c8be\"\n },\n \"highlight\": {\n \"editor.foreground\": \"#c6d0f5\",\n \"editor.background\": \"#232634\",\n \"editor.active_line.background\": \"#41455977\",\n \"editor.line_number\": \"#979db5\",\n \"editor.active_line_number\": \"#c6d0f5\",\n \"editor.invisible\": \"#7c7f9366\",\n \"conflict\": \"#e78284\",\n \"created\": \"#a6d189\",\n \"deleted\": \"#3b2e2e\",\n \"error\": \"#3b2e2e\",\n \"hidden\": \"#51576d\",\n \"hint\": \"#8caaee\",\n \"info\": \"#1e2b4d\",\n \"modified\": \"#e7d682\",\n \"predictive\": \"#51576d\",\n \"syntax\": {\n \"attribute\": {\n \"color\": \"#e7d682\"\n },\n \"boolean\": {\n \"color\": \"#e78284\"\n },\n \"comment\": {\n \"color\": \"#51576d\"\n },\n \"comment.doc\": {\n \"color\": \"#51576d\"\n },\n \"constant\": {\n \"color\": \"#e7d682\"\n },\n \"constructor\": {\n \"color\": \"#a6d189\"\n },\n \"embedded\": {\n \"color\": \"#c6d0f5\"\n },\n \"function\": {\n \"color\": \"#8caaee\"\n },\n \"keyword\": {\n \"color\": \"#e78284\"\n },\n \"link_text\": {\n \"color\": \"#8caaee\",\n \"font_style\": \"normal\"\n },\n \"link_uri\": {\n \"color\": \"#51576d\",\n \"font_style\": \"italic\"\n },\n \"number\": {\n \"color\": \"#e78284\"\n },\n \"string\": {\n \"color\": \"#a6d189\"\n },\n \"string.escape\": {\n \"color\": \"#a6d189\"\n },\n \"string.regex\": {\n \"color\": \"#a6d189\"\n },\n \"string.special\": {\n \"color\": \"#e7d682\"\n },\n \"string.special.symbol\": {\n \"color\": \"#e7d682\"\n },\n \"tag\": {\n \"color\": \"#8caaee\"\n },\n \"text.literal\": {\n \"color\": \"#c6d0f5\"\n },\n \"title\": {\n \"color\": \"#e78284\",\n \"font_weight\": 600\n },\n \"type\": {\n \"color\": \"#8caaee\"\n },\n \"property\": {\n \"color\": \"#c6d0f5\"\n },\n \"variable.special\": {\n \"color\": \"#e78284\"\n }\n }\n }\n },\n {\n \"name\": \"Catppuccin Macchiato\",\n \"mode\": \"dark\",\n \"colors\": {\n \"accent.background\": \"#30344d\",\n \"accent.foreground\": \"#cad3f5\",\n \"action_bar.background\": \"#1E2030\",\n \"background\": \"#1E2030\",\n \"border\": \"#494d64\",\n \"ring\": \"#f4dbd6\",\n \"danger.background\": \"#ed8796\",\n \"foreground\": \"#cad3f5\",\n \"input.border\": \"#494d64\",\n \"link.active.foreground\": \"#8aadf4\",\n \"link.foreground\": \"#8aadf4\",\n \"link.hover.foreground\": \"#8aadf4\",\n \"list.active.background\": \"#8aadf420\",\n \"list.active.border\": \"#8aadf4\",\n \"list.even.background\": \"#24273a\",\n \"list.head.background\": \"#363a4f33\",\n \"muted.background\": \"#282a3a\",\n \"muted.foreground\": \"#b8c0e0\",\n \"popover.foreground\": \"#cad3f5\",\n \"primary.active.background\": \"#8aadf499\",\n \"primary.background\": \"#8aadf4\",\n \"primary.foreground\": \"#24273a\",\n \"primary.hover.background\": \"#8aadf4\",\n \"scrollbar.background\": \"#24273a00\",\n \"scrollbar.thumb.background\": \"#494d64\",\n \"secondary.active.background\": \"#3a3f55\",\n \"secondary.background\": \"#363a4f\",\n \"secondary.foreground\": \"#cad3f5\",\n \"secondary.hover.background\": \"#24273a99\",\n \"tab.background\": \"#17192600\",\n \"tab.foreground\": \"#aeb8db\",\n \"tab_bar.background\": \"#171926\",\n \"title_bar.background\": \"#171926\",\n \"title_bar.border\": \"#363A4F\",\n \"base.red\": \"#ed8796\",\n \"base.green\": \"#a6da95\",\n \"base.yellow\": \"#eed49f\",\n \"base.blue\": \"#8aadf4\",\n \"base.magenta\": \"#f5bde6\",\n \"base.magenta.light\": \"#f5bde666\",\n \"base.cyan\": \"#8bd5ca\"\n },\n \"highlight\": {\n \"editor.foreground\": \"#cad3f5\",\n \"editor.background\": \"#1E2030\",\n \"editor.active_line.background\": \"#363a4f\",\n \"editor.line_number\": \"#b8c0e0\",\n \"editor.active_line_number\": \"#cad3f5\",\n \"editor.invisible\": \"#7c7f9366\",\n \"conflict\": \"#ed8796\",\n \"created\": \"#a6da95\",\n \"deleted\": \"#ed8796\",\n \"error\": \"#ed8796\",\n \"hidden\": \"#b8c0e0\",\n \"hint\": \"#8aadf4\",\n \"ignored\": \"#494d64\",\n \"info\": \"#8aadf4\",\n \"modified\": \"#eed49f\",\n \"predictive\": \"#b8c0e0\",\n \"renamed\": \"#f5bde6\",\n \"success\": \"#a6da95\",\n \"unreachable\": \"#b8c0e0\",\n \"warning\": \"#eed49f\",\n \"syntax\": {\n \"attribute\": {\n \"color\": \"#eed49f\"\n },\n \"boolean\": {\n \"color\": \"#f5bde6\"\n },\n \"comment\": {\n \"color\": \"#b8c0e0\",\n \"font_style\": \"italic\"\n },\n \"comment.doc\": {\n \"color\": \"#b8c0e0\",\n \"font_style\": \"italic\"\n },\n \"constant\": {\n \"color\": \"#eed49f\"\n },\n \"constructor\": {\n \"color\": \"#8aadf4\"\n },\n \"embedded\": {\n \"color\": \"#cad3f5\"\n },\n \"function\": {\n \"color\": \"#8aadf4\"\n },\n \"keyword\": {\n \"color\": \"#f5bde6\"\n },\n \"link_text\": {\n \"color\": \"#8aadf4\",\n \"font_style\": \"normal\"\n },\n \"link_uri\": {\n \"color\": \"#b8c0e0\",\n \"font_style\": \"italic\"\n },\n \"number\": {\n \"color\": \"#eed49f\"\n },\n \"string\": {\n \"color\": \"#a6da95\"\n },\n \"string.escape\": {\n \"color\": \"#a6da95\"\n },\n \"string.regex\": {\n \"color\": \"#a6da95\"\n },\n \"string.special\": {\n \"color\": \"#eed49f\"\n },\n \"string.special.symbol\": {\n \"color\": \"#eed49f\"\n },\n \"tag\": {\n \"color\": \"#8aadf4\"\n },\n \"text.literal\": {\n \"color\": \"#cad3f5\"\n },\n \"title\": {\n \"color\": \"#f5bde6\",\n \"font_weight\": 600\n },\n \"type\": {\n \"color\": \"#8aadf4\"\n },\n \"property\": {\n \"color\": \"#cad3f5\"\n },\n \"variable.special\": {\n \"color\": \"#f5bde6\"\n }\n }\n }\n },\n {\n \"name\": \"Catppuccin Mocha\",\n \"mode\": \"dark\",\n \"colors\": {\n \"accent.background\": \"#2e2e3e\",\n \"accent.foreground\": \"#cdd6f4\",\n \"background\": \"#181825\",\n \"border\": \"#313244\",\n \"ring\": \"#cba6f7\",\n \"danger.background\": \"#f38ba8\",\n \"danger.active.background\": \"#eba0ac\",\n \"danger.hover.background\": \"#f38ba8\",\n \"foreground\": \"#cdd6f4\",\n \"input.border\": \"#6c7086\",\n \"link.active.foreground\": \"#89b4fa\",\n \"link.foreground\": \"#89b4fa\",\n \"link.hover.foreground\": \"#89b4fa\",\n \"list.active.background\": \"#89b4fa15\",\n \"list.active.border\": \"#89b4fa77\",\n \"list.hover.background\": \"#202031\",\n \"list.even.background\": \"#161622\",\n \"list.head.background\": \"#1E1E2E\",\n \"muted.background\": \"#302d41\",\n \"muted.foreground\": \"#6c7086\",\n \"panel.background\": \"#302d41\",\n \"popover.background\": \"#1e1e2e\",\n \"popover.foreground\": \"#cdd6f4\",\n \"primary.active.background\": \"#89b4fa\",\n \"primary.background\": \"#89b4fa\",\n \"primary.foreground\": \"#1e1e2e\",\n \"primary.hover.background\": \"#74c7ec\",\n \"scrollbar.background\": \"#1e1e2e00\",\n \"scrollbar.thumb.background\": \"#4e4e5e\",\n \"secondary.active.background\": \"#45475a\",\n \"secondary.background\": \"#302d41\",\n \"secondary.foreground\": \"#cdd6f4\",\n \"secondary.hover.background\": \"#575268\",\n \"tab.background\": \"#0B0B1100\",\n \"tab.foreground\": \"#aeb7d5\",\n \"tab_bar.background\": \"#0B0B11\",\n \"title_bar.background\": \"#11111B\",\n \"title_bar.border\": \"#313244\",\n \"base.red\": \"#f38ba8\",\n \"base.green\": \"#a6e3a1\",\n \"base.yellow\": \"#f9e2af\",\n \"base.blue\": \"#89b4fa\",\n \"base.magenta\": \"#f5c2e7\",\n \"base.magenta.light\": \"#f38ba866\",\n \"base.cyan\": \"#94e2d5\"\n },\n \"highlight\": {\n \"editor.foreground\": \"#cdd6f4\",\n \"editor.background\": \"#181825\",\n \"editor.active_line.background\": \"#222230AA\",\n \"editor.line_number\": \"#6c7086\",\n \"editor.active_line_number\": \"#cdd6f4\",\n \"editor.invisible\": \"#7c7f9366\",\n \"conflict\": \"#f38ba8\",\n \"created\": \"#a6e3a1\",\n \"deleted\": \"#f38ba8\",\n \"error\": \"#f38ba8\",\n \"hidden\": \"#6c7086\",\n \"hint\": \"#89b4fa\",\n \"ignored\": \"#6c7086\",\n \"info\": \"#89b4fa\",\n \"modified\": \"#f9e2af\",\n \"predictive\": \"#6c7086\",\n \"renamed\": \"#f5c2e7\",\n \"success\": \"#a6e3a1\",\n \"unreachable\": \"#6c7086\",\n \"warning\": \"#f9e2af\",\n \"syntax\": {\n \"attribute\": {\n \"color\": \"#f9e2af\"\n },\n \"boolean\": {\n \"color\": \"#f5c2e7\"\n },\n \"comment\": {\n \"color\": \"#6c7086\",\n \"font_style\": \"italic\"\n },\n \"comment.doc\": {\n \"color\": \"#6c7086\",\n \"font_style\": \"italic\"\n },\n \"constant\": {\n \"color\": \"#f9e2af\"\n },\n \"constructor\": {\n \"color\": \"#89b4fa\"\n },\n \"embedded\": {\n \"color\": \"#cdd6f4\"\n },\n \"function\": {\n \"color\": \"#89b4fa\"\n },\n \"keyword\": {\n \"color\": \"#f5c2e7\"\n },\n \"link_text\": {\n \"color\": \"#89b4fa\",\n \"font_style\": \"normal\"\n },\n \"link_uri\": {\n \"color\": \"#6c7086\",\n \"font_style\": \"italic\"\n },\n \"number\": {\n \"color\": \"#f9e2af\"\n },\n \"string\": {\n \"color\": \"#a6e3a1\"\n },\n \"string.escape\": {\n \"color\": \"#a6e3a1\"\n },\n \"string.regex\": {\n \"color\": \"#a6e3a1\"\n },\n \"string.special\": {\n \"color\": \"#f9e2af\"\n },\n \"string.special.symbol\": {\n \"color\": \"#f9e2af\"\n },\n \"tag\": {\n \"color\": \"#89b4fa\"\n },\n \"text.literal\": {\n \"color\": \"#cdd6f4\"\n },\n \"title\": {\n \"color\": \"#f5c2e7\",\n \"font_weight\": 600\n },\n \"type\": {\n \"color\": \"#89b4fa\"\n },\n \"property\": {\n \"color\": \"#cdd6f4\"\n },\n \"variable.special\": {\n \"color\": \"#f5c2e7\"\n }\n }\n }\n }\n ]\n}\n" }, { "path": "themes/everforest.json", "content": "{\n \"$schema\": \"https://github.com/longbridge/gpui-component/raw/refs/heads/main/.theme-schema.json\",\n \"name\": \"Everforest\",\n \"author\": \"sainnhe\",\n \"url\": \"https://github.com/sainnhe/everforest\",\n \"themes\": [\n {\n \"name\": \"Everforest Light\",\n \"mode\": \"light\",\n \"colors\": {\n \"accent.background\": \"#E7E5D4\",\n \"accent.foreground\": \"#5F6D75\",\n \"background\": \"#FEFCEE\",\n \"border\": \"#E7E5D4\",\n \"danger.background\": \"#e67e80\",\n \"danger.foreground\": \"#ffffff\",\n \"foreground\": \"#5F6D75\",\n \"input.border\": \"#E7E5D4\",\n \"link.active.foreground\": \"#7fbbb3\",\n \"link.foreground\": \"#7fbbb3\",\n \"link.hover.foreground\": \"#7fbbb3\",\n \"list.active.background\": \"#a7c08025\",\n \"list.active.border\": \"#a7c080\",\n \"list.even.background\": \"#F4F1E2\",\n \"list.head.background\": \"#F4F1E2\",\n \"muted.background\": \"#f1f0e2\",\n \"muted.foreground\": \"#959a9d\",\n \"popover.background\": \"#FEFCEE\",\n \"popover.foreground\": \"#5F6D75\",\n \"primary.background\": \"#e69875\",\n \"primary.foreground\": \"#FEFCEE\",\n \"scrollbar.background\": \"#e0e0e000\",\n \"scrollbar.thumb.background\": \"#D7D5C4\",\n \"secondary.background\": \"#EEEADA\",\n \"secondary.foreground\": \"#5F6D75\",\n \"tab.active.background\": \"#FEFCEE\",\n \"tab.active.foreground\": \"#5F6D75\",\n \"tab.background\": \"#F4F1E200\",\n \"tab.foreground\": \"#6b7b84\",\n \"tab_bar.background\": \"#F4F1E2\",\n \"title_bar.background\": \"#F9F5E4\",\n \"title_bar.border\": \"#E7E5D4\",\n \"base.red\": \"#e67e80\",\n \"base.green\": \"#a7c080\",\n \"base.yellow\": \"#dbbc7f\",\n \"base.blue\": \"#7fbbb3\",\n \"base.magenta\": \"#d699b6\",\n \"base.magenta.light\": \"#d699b699\",\n \"base.cyan\": \"#83c092\"\n },\n \"highlight\": {\n \"editor.foreground\": \"#5F6D75\",\n \"editor.background\": \"#FEFCEE\",\n \"editor.active_line.background\": \"#E7E5D4\",\n \"editor.line_number\": \"#959a9d\",\n \"editor.active_line_number\": \"#5F6D75\",\n \"editor.invisible\": \"#959a9d66\",\n \"conflict\": \"#e67e80\",\n \"created\": \"#a7c080\",\n \"deleted\": \"#e67e80\",\n \"error\": \"#e67e80\",\n \"hidden\": \"#959a9d\",\n \"hint\": \"#7fbbb3\",\n \"ignored\": \"#959a9d\",\n \"info\": \"#7fbbb3\",\n \"modified\": \"#dbbc7f\",\n \"predictive\": \"#5F6D75\",\n \"renamed\": \"#a7c080\",\n \"success\": \"#a7c080\",\n \"unreachable\": \"#959a9d\",\n \"warning\": \"#dbbc7f\",\n \"syntax\": {\n \"attribute\": {\n \"color\": \"#dbbc7f\"\n },\n \"boolean\": {\n \"color\": \"#e69875\"\n },\n \"comment\": {\n \"color\": \"#959a9d\",\n \"font_style\": \"italic\"\n },\n \"comment.doc\": {\n \"color\": \"#959a9d\",\n \"font_style\": \"italic\"\n },\n \"constant\": {\n \"color\": \"#e69875\"\n },\n \"constructor\": {\n \"color\": \"#a7c080\"\n },\n \"embedded\": {\n \"color\": \"#5F6D75\"\n },\n \"function\": {\n \"color\": \"#a7c080\"\n },\n \"keyword\": {\n \"color\": \"#e67e80\"\n },\n \"link_text\": {\n \"color\": \"#7fbbb3\",\n \"font_style\": \"normal\"\n },\n \"link_uri\": {\n \"color\": \"#5F6D75\",\n \"font_style\": \"italic\"\n },\n \"number\": {\n \"color\": \"#e69875\"\n },\n \"string\": {\n \"color\": \"#a7c080\"\n },\n \"string.escape\": {\n \"color\": \"#a7c080\"\n },\n \"string.regex\": {\n \"color\": \"#a7c080\"\n },\n \"string.special\": {\n \"color\": \"#dbbc7f\"\n },\n \"string.special.symbol\": {\n \"color\": \"#dbbc7f\"\n },\n \"tag\": {\n \"color\": \"#a7c080\"\n },\n \"text.literal\": {\n \"color\": \"#dbbc7f\"\n },\n \"title\": {\n \"color\": \"#e69875\",\n \"font_weight\": 600\n },\n \"type\": {\n \"color\": \"#7fbbb3\"\n },\n \"property\": {\n \"color\": \"#5F6D75\"\n },\n \"variable.special\": {\n \"color\": \"#e67e80\"\n }\n }\n }\n },\n {\n \"name\": \"Everforest Dark\",\n \"mode\": \"dark\",\n \"colors\": {\n \"accent.background\": \"#3c4448\",\n \"accent.foreground\": \"#d3c6aa\",\n \"background\": \"#262E34\",\n \"border\": \"#40484c\",\n \"foreground\": \"#d3c6aa\",\n \"input.border\": \"#485156\",\n \"link.active.foreground\": \"#7fbbb3\",\n \"link.foreground\": \"#7fbbb3\",\n \"link.hover.foreground\": \"#7fbbb3\",\n \"list.active.background\": \"#a7c08022\",\n \"list.active.border\": \"#a7c08088\",\n \"list.even.background\": \"#2E383B\",\n \"list.head.background\": \"#2E383B\",\n \"muted.background\": \"#2E383B\",\n \"muted.foreground\": \"#6D7873\",\n \"panel.background\": \"#2E383B\",\n \"popover.background\": \"#262E34\",\n \"popover.foreground\": \"#d3c6aa\",\n \"primary.background\": \"#e69875\",\n \"primary.foreground\": \"#262E34\",\n \"scrollbar.background\": \"#2E383B00\",\n \"scrollbar.thumb.background\": \"#485156\",\n \"secondary.background\": \"#2E383B\",\n \"secondary.foreground\": \"#849087\",\n \"secondary.active.background\": \"#303b3e\",\n \"secondary.hover.background\": \"#3E474B99\",\n \"tab.active.background\": \"#262E34\",\n \"tab.active.foreground\": \"#d3c6aa\",\n \"tab.background\": \"#262E3400\",\n \"tab.foreground\": \"#849087\",\n \"tab_bar.background\": \"#2E383B\",\n \"title_bar.background\": \"#1f262b\",\n \"title_bar.border\": \"#40484c\",\n \"base.red\": \"#e67e80\",\n \"base.green\": \"#a7c080\",\n \"base.yellow\": \"#dbbc7f\",\n \"base.blue\": \"#7fbbb3\",\n \"base.magenta\": \"#844d64\",\n \"base.magenta.light\": \"#844d6499\",\n \"base.cyan\": \"#83c092\"\n },\n \"highlight\": {\n \"editor.foreground\": \"#d3c6aa\",\n \"editor.background\": \"#262E34\",\n \"editor.active_line.background\": \"#3c4448\",\n \"editor.line_number\": \"#8F8F8F\",\n \"editor.active_line_number\": \"#DDDDDD\",\n \"editor.invisible\": \"#959a9d66\",\n \"conflict\": \"#D2602D\",\n \"created\": \"#3f72e2\",\n \"hidden\": \"#9E9E9E\",\n \"hint\": \"#b283f8\",\n \"modified\": \"#B0A878\",\n \"predictive\": \"#5D5945\",\n \"syntax\": {\n \"attribute\": {\n \"color\": \"#be9a52\"\n },\n \"boolean\": {\n \"color\": \"#E1D797\"\n },\n \"comment\": {\n \"color\": \"#9E9E9E\"\n },\n \"comment.doc\": {\n \"color\": \"#9E9E9E\"\n },\n \"constant\": {\n \"color\": \"#E1D797\"\n },\n \"constructor\": {\n \"color\": \"#b5af9a\"\n },\n \"embedded\": {\n \"color\": \"#CACCCA\"\n },\n \"function\": {\n \"color\": \"#E1D797\"\n },\n \"keyword\": {\n \"color\": \"#E19773\"\n },\n \"link_text\": {\n \"color\": \"#A86D3B\",\n \"font_style\": \"normal\"\n },\n \"link_uri\": {\n \"color\": \"#6F6D66\",\n \"font_style\": \"italic\"\n },\n \"number\": {\n \"color\": \"#E19773\"\n },\n \"string\": {\n \"color\": \"#76BA53\"\n },\n \"string.escape\": {\n \"color\": \"#76BA53\"\n },\n \"string.regex\": {\n \"color\": \"#76BA53\"\n },\n \"string.special\": {\n \"color\": \"#E1D797\"\n },\n \"string.special.symbol\": {\n \"color\": \"#E1D797\"\n },\n \"tag\": {\n \"color\": \"#b5af9a\"\n },\n \"text.literal\": {\n \"color\": \"#E1D797\"\n },\n \"title\": {\n \"color\": \"#A76D3B\",\n \"font_weight\": 600\n },\n \"type\": {\n \"color\": \"#A86D3B\"\n },\n \"property\": {\n \"color\": \"#CACCCA\"\n },\n \"variable.special\": {\n \"color\": \"#E19773\"\n }\n }\n }\n }\n ]\n}\n" }, { "path": "themes/fahrenheit.json", "content": "{\n \"$schema\": \"https://github.com/longbridge/gpui-component/raw/refs/heads/main/.theme-schema.json\",\n \"name\": \"Fahrenheit\",\n \"author\": \"iTerm2-Color-Schemes\",\n \"url\": \"https://github.com/mbadolato/iTerm2-Color-Schemes\",\n \"themes\": [\n {\n \"name\": \"Fahrenheit\",\n \"mode\": \"dark\",\n \"colors\": {\n \"accent.background\": \"#171717\",\n \"accent.foreground\": \"#FFFFCE\",\n \"background\": \"#000000\",\n \"border\": \"#252525\",\n \"danger.background\": \"#593002\",\n \"foreground\": \"#FFFFCE\",\n \"input.border\": \"#252525\",\n \"list.active.background\": \"#72020222\",\n \"list.active.border\": \"#720202\",\n \"list.even.background\": \"#090909\",\n \"list.hover.background\": \"#111111\",\n \"muted.background\": \"#20202099\",\n \"muted.foreground\": \"#828282\",\n \"panel.background\": \"#1e1e1e\",\n \"popover.background\": \"#090909\",\n \"popover.foreground\": \"#FFFFCE\",\n \"primary.background\": \"#720202\",\n \"primary.foreground\": \"#FFFFCE\",\n \"scrollbar.background\": \"#1e1e1e00\",\n \"scrollbar.thumb.background\": \"#3e3e3e\",\n \"secondary.background\": \"#202020\",\n \"secondary.active.background\": \"#202020DD\",\n \"secondary.foreground\": \"#979797\",\n \"secondary.hover.background\": \"#20202099\",\n \"tab.foreground\": \"#808080\",\n \"title_bar.background\": \"#0e0e0e\",\n \"table.background\": \"#1e1e1e00\",\n \"table.hover.background\": \"#1E1E1E\",\n \"ring\": \"#570101\",\n \"base.red\": \"#723202\",\n \"base.red.light\": \"#c97636\",\n \"base.green\": \"#027225\",\n \"base.green.light\": \"#39c936\",\n \"base.yellow\": \"#726302\",\n \"base.yellow.light\": \"#c9b536\",\n \"base.blue\": \"#022d72\",\n \"base.blue.light\": \"#0551cb\",\n \"base.magenta\": \"#3a286c\",\n \"base.magenta.light\": \"#58197a\",\n \"base.cyan\": \"#027272\",\n \"base.cyan.light\": \"#36c9c9\"\n },\n \"highlight\": {\n \"editor.foreground\": \"#FFFFCE\",\n \"editor.background\": \"#000000\",\n \"editor.active_line.background\": \"#1e1e1e\",\n \"editor.line_number\": \"#828282\",\n \"editor.invisible\": \"#82828266\",\n \"warning.border\": \"#720202\",\n \"syntax\": {\n \"attribute\": {\n \"color\": \"#fecf75\"\n },\n \"boolean\": {\n \"color\": \"#fd9f4d\"\n },\n \"comment\": {\n \"color\": \"#828282\"\n },\n \"comment.doc\": {\n \"color\": \"#828282\"\n },\n \"constant\": {\n \"color\": \"#fd9f4d\"\n },\n \"constructor\": {\n \"color\": \"#cb4a05\"\n },\n \"embedded\": {\n \"color\": \"#dcdcdc\"\n },\n \"function\": {\n \"color\": \"#fd9f4d\"\n },\n \"keyword\": {\n \"color\": \"#cb4a05\"\n },\n \"link_text\": {\n \"color\": \"#cda074\",\n \"font_style\": \"normal\"\n },\n \"link_uri\": {\n \"color\": \"#9e744d\",\n \"font_style\": \"italic\"\n },\n \"number\": {\n \"color\": \"#cb4a05\"\n },\n \"string\": {\n \"color\": \"#cc734d\"\n },\n \"string.escape\": {\n \"color\": \"#cc734d\"\n },\n \"string.regex\": {\n \"color\": \"#cc734d\"\n },\n \"string.special\": {\n \"color\": \"#fd9f4d\"\n },\n \"string.special.symbol\": {\n \"color\": \"#fd9f4d\"\n },\n \"tag\": {\n \"color\": \"#cb4a05\"\n },\n \"text.literal\": {\n \"color\": \"#fd9f4d\"\n },\n \"title\": {\n \"color\": \"#cda074\",\n \"font_weight\": 600\n },\n \"type\": {\n \"color\": \"#cda074\"\n },\n \"property\": {\n \"color\": \"#dcdcdc\"\n },\n \"variable.special\": {\n \"color\": \"#cb4a05\"\n }\n }\n }\n }\n ]\n}\n" }, { "path": "themes/flexoki.json", "content": "{\n \"$schema\": \"https://github.com/longbridge/gpui-component/raw/refs/heads/main/.theme-schema.json\",\n \"name\": \"Flexoki\",\n \"author\": \"kepano\",\n \"url\": \"https://github.com/kepano/flexoki\",\n \"themes\": [\n {\n \"name\": \"Flexoki Light\",\n \"mode\": \"light\",\n \"colors\": {\n \"accent.background\": \"#E8E4CE\",\n \"accent.foreground\": \"#100F0F\",\n \"background\": \"#FFFCF0\",\n \"foreground\": \"#100F0F\",\n \"border\": \"#E6E4D9\",\n \"ring\": \"#D0A215\",\n \"selection.background\": \"#D0A21577\",\n \"input.border\": \"#E6E4D9\",\n \"list.active.background\": \"#D0A21520\",\n \"list.active.border\": \"#D0A215\",\n \"list.background\": \"#FFFCF0\",\n \"list.even.background\": \"#F2F0E5\",\n \"muted.background\": \"#F2F0E5\",\n \"muted.foreground\": \"#6F6E69\",\n \"primary.background\": \"#3AA99F\",\n \"primary.foreground\": \"#FAFAFA\",\n \"info.background\": \"#4385BE\",\n \"scrollbar.background\": \"#FAFAFA00\",\n \"scrollbar.thumb.background\": \"#E6E4D9\",\n \"scrollbar.thumb.hover.background\": \"#DAD8CE\",\n \"secondary.active.background\": \"#DAD8CE\",\n \"secondary.background\": \"#F2F0E5\",\n \"secondary.foreground\": \"#100F0F\",\n \"secondary.hover.background\": \"#E6E4D9\",\n \"tab.active.background\": \"#FFFCF0\",\n \"tab.active.foreground\": \"#100F0F\",\n \"tab.background\": \"#ECECED00\",\n \"tab.foreground\": \"#8d8986\",\n \"tab_bar.background\": \"#F2F0E5\",\n \"title_bar.background\": \"#F2F0E5\",\n \"title_bar.border\": \"#DAD8CE\",\n \"base.yellow\": \"#D0A215\",\n \"base.red\": \"#D14D41\",\n \"base.blue\": \"#4385BE\",\n \"base.green\": \"#879A39\",\n \"base.magenta\": \"#CE5D97\",\n \"base.cyan\": \"#3AA99F\"\n },\n \"highlight\": {\n \"editor.foreground\": \"#100F0F\",\n \"editor.background\": \"#FFFCF0\",\n \"editor.active_line.background\": \"#F2F0E5\",\n \"editor.line_number\": \"#B7B5AC\",\n \"editor.active_line_number\": \"#24837B\",\n \"editor.invisible\": \"#B7B5AC66\",\n \"conflict\": \"#AD8301\",\n \"conflict.background\": \"#FAEEC6\",\n \"conflict.border\": \"#AD8301\",\n \"created\": \"#66800B\",\n \"created.background\": \"#EDEECF\",\n \"created.border\": \"#66800B\",\n \"deleted\": \"#AF3029\",\n \"deleted.background\": \"#FFE1D5\",\n \"deleted.border\": \"#AF3029\",\n \"error\": \"#AF3029\",\n \"error.background\": \"#FFE1D5\",\n \"error.border\": \"#AF3029\",\n \"hidden\": \"#B7B5AC\",\n \"hidden.background\": \"#F2F0E5\",\n \"hidden.border\": \"#B7B5AC\",\n \"hint\": \"#B7B5AC\",\n \"hint.background\": \"#F2F0E5\",\n \"hint.border\": \"#B7B5AC\",\n \"ignored\": \"#B7B5AC\",\n \"ignored.background\": \"#F2F0E5\",\n \"ignored.border\": \"#B7B5AC\",\n \"info\": \"#24837B\",\n \"info.background\": \"#DDF1E4\",\n \"info.border\": \"#24837B\",\n \"modified\": \"#AD8301\",\n \"modified.background\": \"#FAEEC6\",\n \"modified.border\": \"#AD8301\",\n \"predictive\": \"#B7B5AC\",\n \"renamed\": \"#24837B\",\n \"renamed.background\": \"#DDF1E4\",\n \"renamed.border\": \"#24837B\",\n \"success\": \"#66800B\",\n \"success.background\": \"#EDEECF\",\n \"success.border\": \"#66800B\",\n \"unreachable\": \"#6F6E69\",\n \"unreachable.background\": \"#F2F0E5\",\n \"unreachable.border\": \"#6F6E69\",\n \"warning\": \"#AD8301\",\n \"warning.background\": \"#FAEEC6\",\n \"warning.border\": \"#AD8301\",\n \"syntax\": {\n \"attribute\": {\n \"color\": \"#205EA6\"\n },\n \"boolean\": {\n \"color\": \"#BC5215\"\n },\n \"comment\": {\n \"color\": \"#B7B5AC\"\n },\n \"comment.doc\": {\n \"color\": \"#B7B5AC\"\n },\n \"constant\": {\n \"color\": \"#F07171\"\n },\n \"constructor\": {\n \"color\": \"#205EA6\"\n },\n \"embedded\": {\n \"color\": \"#5C6773\"\n },\n \"function\": {\n \"color\": \"#BC5215\"\n },\n \"keyword\": {\n \"color\": \"#66800B\"\n },\n \"link_text\": {\n \"color\": \"#24837B\"\n },\n \"link_uri\": {\n \"color\": \"#24837B\"\n },\n \"number\": {\n \"color\": \"#5E409D\"\n },\n \"string\": {\n \"color\": \"#24837B\"\n },\n \"string.escape\": {\n \"color\": \"#24837B\"\n },\n \"string.regex\": {\n \"color\": \"#24837B\"\n },\n \"string.special\": {\n \"color\": \"#24837B\"\n },\n \"string.special.symbol\": {\n \"color\": \"#24837B\"\n },\n \"tag\": {\n \"color\": \"#205EA6\"\n },\n \"text.literal\": {\n \"color\": \"#24837B\"\n },\n \"title\": {\n \"color\": \"#24837B\",\n \"font_weight\": 600\n },\n \"type\": {\n \"color\": \"#AD8301\"\n },\n \"property\": {\n \"color\": \"#BC5215\"\n },\n \"variable.special\": {\n \"color\": \"#205EA6\"\n }\n }\n }\n },\n {\n \"name\": \"Flexoki Dark\",\n \"mode\": \"dark\",\n \"colors\": {\n \"accent.background\": \"#242221\",\n \"accent.foreground\": \"#CECDC3\",\n \"background\": \"#100F0F\",\n \"border\": \"#282726\",\n \"ring\": \"#AD8301\",\n \"selection.background\": \"#D0A21577\",\n \"foreground\": \"#CECDC3\",\n \"input.border\": \"#282726\",\n \"list.active.background\": \"#D0A21515\",\n \"list.active.border\": \"#AD8301\",\n \"list.even.background\": \"#1C1B1A\",\n \"muted.background\": \"#1C1B1A\",\n \"muted.foreground\": \"#878580\",\n \"panel.background\": \"#1C1B1A\",\n \"popover.background\": \"#100F0F\",\n \"popover.foreground\": \"#CECDC3\",\n \"primary.background\": \"#24837B\",\n \"primary.foreground\": \"#FFFCF0\",\n \"info.background\": \"#205EA6\",\n \"scrollbar.background\": \"#100F0F00\",\n \"scrollbar.thumb.background\": \"#282726\",\n \"scrollbar.thumb.hover.background\": \"#343331\",\n \"secondary.background\": \"#232221\",\n \"secondary.active.background\": \"#262423\",\n \"secondary.foreground\": \"#CECDC3\",\n \"secondary.hover.background\": \"#232221\",\n \"tab.active.background\": \"#100F0F\",\n \"tab.active.foreground\": \"#CECDC3\",\n \"tab.background\": \"#1C1B1A\",\n \"tab.foreground\": \"#878580\",\n \"tab_bar.background\": \"#1C1B1A99\",\n \"title_bar.background\": \"#191818\",\n \"base.yellow\": \"#AD8301\",\n \"base.yellow.light\": \"#D0A215\",\n \"base.red\": \"#AF3029\",\n \"base.red.light\": \"#D14D41\",\n \"base.blue\": \"#205EA6\",\n \"base.blue.light\": \"#4385BE\",\n \"base.green\": \"#66800B\",\n \"base.green.light\": \"#879A39\",\n \"base.magenta\": \"#A02F6F\",\n \"base.magenta.light\": \"#CE5D97\",\n \"base.cyan\": \"#24837B\",\n \"base.cyan.light\": \"#3AA99F\"\n },\n \"highlight\": {\n \"editor.foreground\": \"#CECDC3\",\n \"editor.background\": \"#100F0F\",\n \"editor.active_line.background\": \"#1C1B1A\",\n \"editor.line_number\": \"#575653\",\n \"editor.active_line_number\": \"#3AA99F\",\n \"editor.invisible\": \"#B7B5AC66\",\n \"conflict\": \"#D0A215\",\n \"created\": \"#879A39\",\n \"hidden\": \"#575653\",\n \"hint\": \"#575653\",\n \"modified\": \"#D0A215\",\n \"predictive\": \"#878580\",\n \"syntax\": {\n \"attribute\": {\n \"color\": \"#4385BE\"\n },\n \"boolean\": {\n \"color\": \"#DA702C\"\n },\n \"comment\": {\n \"color\": \"#575653\"\n },\n \"comment.doc\": {\n \"color\": \"#575653\"\n },\n \"constant\": {\n \"color\": \"#CE5D97\"\n },\n \"constructor\": {\n \"color\": \"#4385BE\"\n },\n \"embedded\": {\n \"color\": \"#878580\"\n },\n \"function\": {\n \"color\": \"#DA702C\"\n },\n \"keyword\": {\n \"color\": \"#879A39\"\n },\n \"link_text\": {\n \"color\": \"#3AA99F\"\n },\n \"link_uri\": {\n \"color\": \"#3AA99F\"\n },\n \"number\": {\n \"color\": \"#8B7EC8\"\n },\n \"string\": {\n \"color\": \"#3AA99F\"\n },\n \"string.escape\": {\n \"color\": \"#3AA99F\"\n },\n \"string.regex\": {\n \"color\": \"#3AA99F\"\n },\n \"string.special\": {\n \"color\": \"#3AA99F\"\n },\n \"string.special.symbol\": {\n \"color\": \"#3AA99F\"\n },\n \"tag\": {\n \"color\": \"#4385BE\"\n },\n \"text.literal\": {\n \"color\": \"#3AA99F\"\n },\n \"title\": {\n \"color\": \"#D0A215\",\n \"font_weight\": 600\n },\n \"type\": {\n \"color\": \"#D0A215\"\n },\n \"property\": {\n \"color\": \"#DA702C\"\n },\n \"variable.special\": {\n \"color\": \"#4385BE\"\n }\n }\n }\n }\n ]\n}\n" }, { "path": "themes/gruvbox.json", "content": "{\n \"$schema\": \"https://github.com/longbridge/gpui-component/raw/refs/heads/main/.theme-schema.json\",\n \"name\": \"Gruvbox\",\n \"author\": \"Pavel Pertsev\",\n \"url\": \"https://github.com/morhetz/gruvbox\",\n \"themes\": [\n {\n \"name\": \"Gruvbox Light\",\n \"mode\": \"light\",\n \"colors\": {\n \"accent.background\": \"#e6d19e\",\n \"accent.foreground\": \"#3c3836\",\n \"background\": \"#fbf1c7\",\n \"border\": \"#d5c4a1\",\n \"danger.background\": \"#fb4934\",\n \"danger.active.background\": \"#cc241d\",\n \"danger.foreground\": \"#fbf1c7\",\n \"foreground\": \"#3c3836\",\n \"input.border\": \"#d5c4a1\",\n \"link.active.foreground\": \"#458588\",\n \"link.foreground\": \"#458588\",\n \"link.hover.foreground\": \"#458588\",\n \"list.active.background\": \"#d7992122\",\n \"list.hover.background\": \"#ebdbb2\",\n \"list.active.border\": \"#d79921\",\n \"list.even.background\": \"#f9ecba\",\n \"muted.background\": \"#d5c4a166\",\n \"muted.foreground\": \"#928374\",\n \"panel.background\": \"#ebdbb2\",\n \"popover.background\": \"#fbf1c7\",\n \"popover.foreground\": \"#3c3836\",\n \"primary.active.background\": \"#b7841f\",\n \"primary.background\": \"#d79921\",\n \"primary.foreground\": \"#fbf1c7\",\n \"primary.hover.background\": \"#d79921ee\",\n \"ring\": \"#d79921\",\n \"scrollbar.background\": \"#fbf1c700\",\n \"scrollbar.thumb.background\": \"#d5c4a1\",\n \"secondary.background\": \"#EBDBB2\",\n \"secondary.active.background\": \"#d5c4a1\",\n \"secondary.foreground\": \"#3c3836\",\n \"secondary.hover.background\": \"#e8d5a6\",\n \"tab.active.background\": \"#fbf1c7\",\n \"tab.active.foreground\": \"#3c3836\",\n \"tab.background\": \"#ebdbb200\",\n \"tab.foreground\": \"#928374\",\n \"tab_bar.background\": \"#ebdbb2\",\n \"title_bar.background\": \"#ebdbb2\",\n \"title_bar.border\": \"#d5c4a1\",\n \"base.magenta.light\": \"#D3869B66\",\n \"base.red\": \"#fb4934\",\n \"base.green\": \"#67a64f\",\n \"base.yellow\": \"#b57614\",\n \"base.blue\": \"#076678\",\n \"base.magenta\": \"#8f3f71\",\n \"base.cyan\": \"#427b58\"\n },\n \"highlight\": {\n \"editor.foreground\": \"#3c3836\",\n \"editor.background\": \"#fbf1c7\",\n \"editor.active_line.background\": \"#ebdbb2\",\n \"editor.line_number\": \"#928374\",\n \"editor.active_line_number\": \"#3c3836\",\n \"editor.invisible\": \"#92837466\",\n \"conflict\": \"#cc241d\",\n \"created\": \"#79740e\",\n \"deleted\": \"#9d0006\",\n \"error\": \"#cc241d\",\n \"hidden\": \"#928374\",\n \"hint\": \"#458588\",\n \"ignored\": \"#928374\",\n \"info\": \"#458588\",\n \"modified\": \"#b57614\",\n \"predictive\": \"#928374\",\n \"renamed\": \"#b57614\",\n \"success\": \"#79740e\",\n \"unreachable\": \"#928374\",\n \"warning\": \"#d79921\",\n \"syntax\": {\n \"attribute\": {\n \"color\": \"#b57614\"\n },\n \"boolean\": {\n \"color\": \"#d79921\"\n },\n \"comment\": {\n \"color\": \"#928374\",\n \"font_style\": \"italic\"\n },\n \"comment.doc\": {\n \"color\": \"#928374\",\n \"font_style\": \"italic\"\n },\n \"constant\": {\n \"color\": \"#d79921\"\n },\n \"constructor\": {\n \"color\": \"#b57614\"\n },\n \"embedded\": {\n \"color\": \"#3c3836\"\n },\n \"function\": {\n \"color\": \"#d79921\"\n },\n \"keyword\": {\n \"color\": \"#cc241d\"\n },\n \"link_text\": {\n \"color\": \"#458588\",\n \"font_style\": \"normal\"\n },\n \"link_uri\": {\n \"color\": \"#076678\",\n \"font_style\": \"italic\"\n },\n \"number\": {\n \"color\": \"#cc241d\"\n },\n \"string\": {\n \"color\": \"#79740e\"\n },\n \"string.escape\": {\n \"color\": \"#79740e\"\n },\n \"string.regex\": {\n \"color\": \"#79740e\"\n },\n \"string.special\": {\n \"color\": \"#d79921\"\n },\n \"string.special.symbol\": {\n \"color\": \"#d79921\"\n },\n \"tag\": {\n \"color\": \"#b57614\"\n },\n \"text.literal\": {\n \"color\": \"#d79921\"\n },\n \"title\": {\n \"color\": \"#b57614\",\n \"font_weight\": 600\n },\n \"type\": {\n \"color\": \"#b57614\"\n },\n \"property\": {\n \"color\": \"#3c3836\"\n },\n \"variable.special\": {\n \"color\": \"#cc241d\"\n }\n }\n }\n },\n {\n \"name\": \"Gruvbox Dark\",\n \"mode\": \"dark\",\n \"colors\": {\n \"accent.background\": \"#303030\",\n \"accent.foreground\": \"#ebdbb2\",\n \"background\": \"#1d2021\",\n \"border\": \"#3e3936\",\n \"danger.active.background\": \"#fb4934\",\n \"foreground\": \"#ebdbb2\",\n \"input.border\": \"#504945\",\n \"link.active.foreground\": \"#83a598\",\n \"link.foreground\": \"#83a598\",\n \"link.hover.foreground\": \"#83a598\",\n \"list.active.background\": \"#d7992111\",\n \"list.active.border\": \"#b17f1b\",\n \"list.even.background\": \"#282828\",\n \"muted.background\": \"#3c383655\",\n \"muted.foreground\": \"#928374\",\n \"panel.background\": \"#282828\",\n \"popover.background\": \"#1d2021\",\n \"popover.foreground\": \"#ebdbb2\",\n \"primary.background\": \"#d79921\",\n \"primary.foreground\": \"#282828\",\n \"primary.hover.background\": \"#fabd2f\",\n \"ring\": \"#b17f1b\",\n \"scrollbar.background\": \"#1d202100\",\n \"scrollbar.thumb.background\": \"#504945\",\n \"secondary.active.background\": \"#333332\",\n \"secondary.background\": \"#282828\",\n \"secondary.foreground\": \"#ebdbb2\",\n \"secondary.hover.background\": \"#33333299\",\n \"tab.active.background\": \"#1d2021\",\n \"tab.active.foreground\": \"#ebdbb2\",\n \"tab.background\": \"#28282800\",\n \"tab.foreground\": \"#928374\",\n \"tab_bar.background\": \"#28282899\",\n \"title_bar.background\": \"#252525\",\n \"title_bar.border\": \"#3e3936\",\n \"base.magenta.light\": \"#D3869B66\",\n \"base.red\": \"#f06555\",\n \"base.green\": \"#98971a\",\n \"base.yellow\": \"#d79921\",\n \"base.blue\": \"#458588\",\n \"base.magenta\": \"#b16286\",\n \"base.cyan\": \"#689d6a\"\n },\n \"highlight\": {\n \"editor.foreground\": \"#DDDDDD\",\n \"editor.background\": \"#1d2021\",\n \"editor.active_line.background\": \"#131313\",\n \"editor.line_number\": \"#8F8F8F\",\n \"editor.active_line_number\": \"#DDDDDD\",\n \"editor.invisible\": \"#92837466\",\n \"conflict\": \"#f06555\",\n \"created\": \"#3f72e2\",\n \"deleted\": \"#9d0006\",\n \"error\": \"#cc241d\",\n \"hidden\": \"#9E9E9E\",\n \"hint\": \"#b283f8\",\n \"ignored\": \"#928374\",\n \"info\": \"#458588\",\n \"modified\": \"#B0A878\",\n \"predictive\": \"#5D5945\",\n \"renamed\": \"#b57614\",\n \"success\": \"#79740e\",\n \"unreachable\": \"#928374\",\n \"warning\": \"#d79921\",\n \"syntax\": {\n \"attribute\": {\n \"color\": \"#be9a52\"\n },\n \"boolean\": {\n \"color\": \"#E1D797\"\n },\n \"comment\": {\n \"color\": \"#9E9E9E\"\n },\n \"comment.doc\": {\n \"color\": \"#9E9E9E\"\n },\n \"constant\": {\n \"color\": \"#E1D797\"\n },\n \"constructor\": {\n \"color\": \"#b5af9a\"\n },\n \"embedded\": {\n \"color\": \"#CACCCA\"\n },\n \"function\": {\n \"color\": \"#E1D797\"\n },\n \"keyword\": {\n \"color\": \"#E19773\"\n },\n \"link_text\": {\n \"color\": \"#A86D3B\",\n \"font_style\": \"normal\"\n },\n \"link_uri\": {\n \"color\": \"#6F6D66\",\n \"font_style\": \"italic\"\n },\n \"number\": {\n \"color\": \"#E19773\"\n },\n \"string\": {\n \"color\": \"#76BA53\"\n },\n \"string.escape\": {\n \"color\": \"#76BA53\"\n },\n \"string.regex\": {\n \"color\": \"#76BA53\"\n },\n \"string.special\": {\n \"color\": \"#E1D797\"\n },\n \"string.special.symbol\": {\n \"color\": \"#E1D797\"\n },\n \"tag\": {\n \"color\": \"#b5af9a\"\n },\n \"text.literal\": {\n \"color\": \"#E1D797\"\n },\n \"title\": {\n \"color\": \"#A76D3B\",\n \"font_weight\": 600\n },\n \"type\": {\n \"color\": \"#A86D3B\"\n },\n \"property\": {\n \"color\": \"#CACCCA\"\n },\n \"variable.special\": {\n \"color\": \"#E19773\"\n }\n }\n }\n }\n ]\n}\n" }, { "path": "themes/harper.json", "content": "{\n \"$schema\": \"https://github.com/longbridge/gpui-component/raw/refs/heads/main/.theme-schema.json\",\n \"name\": \"Harper\",\n \"author\": \"iTerm2-Color-Schemes\",\n \"url\": \"https://github.com/mbadolato/iTerm2-Color-Schemes\",\n \"themes\": [\n {\n \"name\": \"Harper\",\n \"mode\": \"dark\",\n \"colors\": {\n \"accent.background\": \"#27222c\",\n \"accent.foreground\": \"#a8a49d\",\n \"background\": \"#010101\",\n \"border\": \"#333333\",\n \"foreground\": \"#a8a49d\",\n \"input.border\": \"#333333\",\n \"list.active.background\": \"#B196C622\",\n \"list.active.border\": \"#B196C699\",\n \"list.even.background\": \"#18151B77\",\n \"muted.background\": \"#171717\",\n \"muted.foreground\": \"#726E69\",\n \"panel.background\": \"#003a5b\",\n \"popover.background\": \"#010101\",\n \"popover.foreground\": \"#a8a49d\",\n \"primary.background\": \"#B196C6\",\n \"primary.foreground\": \"#000000\",\n \"scrollbar.background\": \"#003a5b00\",\n \"scrollbar.thumb.background\": \"#726E69\",\n \"secondary.background\": \"#1b1b1b\",\n \"secondary.active.background\": \"#2c2632\",\n \"secondary.foreground\": \"#A8A49D\",\n \"secondary.hover.background\": \"#23232399\",\n \"tab.active.background\": \"#010101\",\n \"tab.active.foreground\": \"#a8a49d\",\n \"tab.foreground\": \"#787878\",\n \"title_bar.background\": \"#101010\",\n \"base.red\": \"#ff5874\",\n \"base.red.light\": \"#ff587499\",\n \"base.green\": \"#489e48\",\n \"base.green.light\": \"#489e4899\",\n \"base.blue\": \"#7fb5e1\",\n \"base.blue.light\": \"#7fb5e199\",\n \"base.cyan\": \"#bff5e5\",\n \"base.cyan.light\": \"#bff5e599\",\n \"base.magenta\": \"#b296c6\",\n \"base.magenta.light\": \"#b296c699\",\n \"base.yellow\": \"#f8b63f\",\n \"base.yellow.light\": \"#f8b63f99\"\n },\n \"highlight\": {\n \"editor.foreground\": \"#a8a49d\",\n \"editor.background\": \"#010101\",\n \"editor.active_line.background\": \"#18151B\",\n \"editor.line_number\": \"#726E69\",\n \"editor.active_line_number\": \"#a8a49d\",\n \"editor.invisible\": \"#726E6966\",\n \"conflict\": \"#ff5874\",\n \"created\": \"#489e48\",\n \"deleted\": \"#ff5874\",\n \"error\": \"#ff5874\",\n \"hidden\": \"#726E69\",\n \"hint\": \"#7fb5e1\",\n \"ignored\": \"#726E69\",\n \"info\": \"#7fb5e1\",\n \"modified\": \"#b296c6\",\n \"predictive\": \"#726E69\",\n \"renamed\": \"#b296c6\",\n \"success\": \"#489e48\",\n \"unreachable\": \"#726E69\",\n \"warning\": \"#f8b63f\",\n \"syntax\": {\n \"attribute\": {\n \"color\": \"#b296c6\"\n },\n \"boolean\": {\n \"color\": \"#f8b63f\"\n },\n \"comment\": {\n \"color\": \"#726E69\",\n \"font_style\": \"italic\"\n },\n \"comment.doc\": {\n \"color\": \"#726E69\",\n \"font_style\": \"italic\"\n },\n \"constant\": {\n \"color\": \"#f8b63f\"\n },\n \"constructor\": {\n \"color\": \"#b296c6\"\n },\n \"embedded\": {\n \"color\": \"#a8a49d\"\n },\n \"function\": {\n \"color\": \"#f8b63f\"\n },\n \"keyword\": {\n \"color\": \"#ff5874\"\n },\n \"link_text\": {\n \"color\": \"#7fb5e1\",\n \"font_style\": \"normal\"\n },\n \"link_uri\": {\n \"color\": \"#bff5e5\",\n \"font_style\": \"italic\"\n },\n \"number\": {\n \"color\": \"#ff5874\"\n },\n \"string\": {\n \"color\": \"#489e48\"\n },\n \"string.escape\": {\n \"color\": \"#489e48\"\n },\n \"string.regex\": {\n \"color\": \"#489e48\"\n },\n \"string.special\": {\n \"color\": \"#f8b63f\"\n },\n \"string.special.symbol\": {\n \"color\": \"#f8b63f\"\n },\n \"tag\": {\n \"color\": \"#b296c6\"\n },\n \"text.literal\": {\n \"color\": \"#f8b63f\"\n },\n \"title\": {\n \"color\": \"#b296c6\",\n \"font_weight\": 600\n },\n \"type\": {\n \"color\": \"#b296c6\"\n },\n \"property\": {\n \"color\": \"#a8a49d\"\n },\n \"variable.special\": {\n \"color\": \"#ff5874\"\n }\n }\n }\n }\n ]\n}\n" }, { "path": "themes/hybrid.json", "content": "{\n \"$schema\": \"https://github.com/longbridge/gpui-component/raw/refs/heads/main/.theme-schema.json\",\n \"name\": \"Hybrid\",\n \"author\": \"Andrew Wong\",\n \"url\": \"https://github.com/w0ng/vim-hybrid\",\n \"themes\": [\n {\n \"name\": \"Hybrid Light\",\n \"mode\": \"light\",\n \"shadow\": false,\n \"colors\": {\n \"accent.background\": \"#c8ced1\",\n \"accent.foreground\": \"#1c1c1c\",\n \"background\": \"#E4E4E4\",\n \"border\": \"#CACACA\",\n \"danger.background\": \"#ff5f5f\",\n \"danger.foreground\": \"#ffffff\",\n \"foreground\": \"#1c1c1c\",\n \"input.border\": \"#CACACA\",\n \"link.active.foreground\": \"#005f87\",\n \"link.foreground\": \"#005f87\",\n \"link.hover.foreground\": \"#005f87\",\n \"list.active.background\": \"#79792C20\",\n \"list.active.border\": \"#79792C\",\n \"list.hover.background\": \"#D5D5D5\",\n \"list.even.background\": \"#DFDFDF\",\n \"muted.background\": \"#d7d7d7\",\n \"muted.foreground\": \"#5f5f5f\",\n \"primary.background\": \"#005f87\",\n \"primary.foreground\": \"#ffffff\",\n \"scrollbar.background\": \"#E0E0E000\",\n \"scrollbar.thumb.background\": \"#8f8f8f\",\n \"secondary.background\": \"#D0D0D0\",\n \"secondary.active.background\": \"#c4c4c4\",\n \"secondary.foreground\": \"#1c1c1c\",\n \"secondary.hover.background\": \"#c4c4c499\",\n \"tab.active.background\": \"#E4E4E4\",\n \"tab.active.foreground\": \"#1c1c1c\",\n \"tab.background\": \"#e8e8e800\",\n \"tab.foreground\": \"#5f5f5f\",\n \"tab_bar.background\": \"#e8e8e8\",\n \"title_bar.background\": \"#D0D0D0\",\n \"title_bar.border\": \"#B3B3B3\",\n \"base.red\": \"#5F0000\",\n \"base.green\": \"#005F00\",\n \"base.yellow\": \"#948000\",\n \"base.blue\": \"#00195f\",\n \"base.magenta\": \"#5f1c51\",\n \"base.magenta.light\": \"#5f1c5111\",\n \"base.cyan\": \"#005a5f\"\n },\n \"highlight\": {\n \"editor.foreground\": \"#1c1c1c\",\n \"editor.background\": \"#E4E4E4\",\n \"editor.active_line.background\": \"#D3D3D3\",\n \"editor.line_number\": \"#5F5F5F\",\n \"editor.active_line_number\": \"#1C1C1C\",\n \"editor.invisible\": \"#5F5F5F66\",\n \"conflict\": \"#D2602D\",\n \"created\": \"#3F72E2\",\n \"deleted\": \"#FF5F5F\",\n \"error\": \"#FF5F5F\",\n \"hidden\": \"#9E9E9E\",\n \"hint\": \"#5F87AF\",\n \"ignored\": \"#B3B3B3\",\n \"info\": \"#005F87\",\n \"modified\": \"#B0A878\",\n \"predictive\": \"#5D5945\",\n \"renamed\": \"#5F87AF\",\n \"success\": \"#005F00\",\n \"unreachable\": \"#9E9E9E\",\n \"warning\": \"#948000\",\n \"syntax\": {\n \"attribute\": {\n \"color\": \"#948000\"\n },\n \"boolean\": {\n \"color\": \"#005F00\"\n },\n \"comment\": {\n \"color\": \"#5F5F5F\",\n \"font_style\": \"italic\"\n },\n \"comment.doc\": {\n \"color\": \"#5F5F5F\",\n \"font_style\": \"italic\"\n },\n \"constant\": {\n \"color\": \"#005F87\"\n },\n \"constructor\": {\n \"color\": \"#79792C\"\n },\n \"embedded\": {\n \"color\": \"#1C1C1C\"\n },\n \"function\": {\n \"color\": \"#005F87\"\n },\n \"keyword\": {\n \"color\": \"#5F1C51\"\n },\n \"link_text\": {\n \"color\": \"#005F87\",\n \"font_style\": \"underline\"\n },\n \"link_uri\": {\n \"color\": \"#005F87\",\n \"font_style\": \"italic\"\n },\n \"number\": {\n \"color\": \"#005F00\"\n },\n \"string\": {\n \"color\": \"#005F00\"\n },\n \"string.escape\": {\n \"color\": \"#005F00\"\n },\n \"string.regex\": {\n \"color\": \"#005F00\"\n },\n \"string.special\": {\n \"color\": \"#005F87\"\n },\n \"string.special.symbol\": {\n \"color\": \"#005F87\"\n },\n \"tag\": {\n \"color\": \"#79792C\"\n },\n \"text.literal\": {\n \"color\": \"#005F87\"\n },\n \"title\": {\n \"color\": \"#005F87\",\n \"font_weight\": 600\n },\n \"type\": {\n \"color\": \"#5F1C51\"\n },\n \"property\": {\n \"color\": \"#1C1C1C\"\n },\n \"variable.special\": {\n \"color\": \"#5F1C51\"\n }\n }\n }\n },\n {\n \"name\": \"Hybrid Dark\",\n \"mode\": \"dark\",\n \"colors\": {\n \"accent.background\": \"#31393a\",\n \"accent.foreground\": \"#e8e8e8\",\n \"background\": \"#1D1F21\",\n \"border\": \"#34373c\",\n \"foreground\": \"#e8e8e8\",\n \"input.border\": \"#34373c\",\n \"link.active.foreground\": \"#87d7ff\",\n \"link.foreground\": \"#81A2BE\",\n \"link.hover.foreground\": \"#006f9f\",\n \"list.active.background\": \"#15678a10\",\n \"list.active.border\": \"#15678a\",\n \"list.even.background\": \"#282A2E\",\n \"muted.background\": \"#282A2E99\",\n \"muted.foreground\": \"#878787\",\n \"panel.background\": \"#1D1F21\",\n \"popover.background\": \"#1D1F21\",\n \"popover.foreground\": \"#e8e8e8\",\n \"primary.background\": \"#15678a\",\n \"primary.foreground\": \"#e8e8e8\",\n \"scrollbar.background\": \"#1D1F2100\",\n \"scrollbar.thumb.background\": \"#5f5f5f\",\n \"secondary.background\": \"#303336\",\n \"secondary.active.background\": \"#33363b\",\n \"secondary.foreground\": \"#e8e8e8\",\n \"secondary.hover.background\": \"#373b3e\",\n \"tab.active.background\": \"#1D1F21\",\n \"tab.active.foreground\": \"#d4d4d4\",\n \"tab.background\": \"#24262700\",\n \"tab.foreground\": \"#999999\",\n \"tab_bar.background\": \"#242627\",\n \"title_bar.background\": \"#242629\",\n \"title_bar.border\": \"#34373c\",\n \"base.red\": \"#8a1515\",\n \"base.red.light\": \"#ff5f5f\",\n \"base.green\": \"#7c8a15\",\n \"base.green.light\": \"#b3bf5a\",\n \"base.yellow\": \"#8a7c15\",\n \"base.yellow.light\": \"#e4b55e\",\n \"base.blue\": \"#15678a\",\n \"base.blue.light\": \"#6e90b0\",\n \"base.magenta\": \"#8a1567\",\n \"base.magenta.light\": \"#B294BB\",\n \"base.cyan\": \"#15678a\",\n \"base.cyan.light\": \"#7fbfb4\"\n },\n \"highlight\": {\n \"editor.foreground\": \"#DDDDDD\",\n \"editor.background\": \"#000000\",\n \"editor.active_line.background\": \"#131313\",\n \"editor.line_number\": \"#8F8F8F\",\n \"editor.active_line_number\": \"#DDDDDD\",\n \"editor.invisible\": \"#5F5F5F66\",\n \"conflict\": \"#D2602D\",\n \"created\": \"#3f72e2\",\n \"created.background\": \"#0C4619\",\n \"deleted.background\": \"#46190C\",\n \"error.background\": \"#46190C\",\n \"error.border\": \"#802207\",\n \"hidden\": \"#9E9E9E\",\n \"hint\": \"#b283f8\",\n \"hint.background\": \"#250c4b\",\n \"hint.border\": \"#3f0891\",\n \"info.background\": \"#0C194D\",\n \"info.border\": \"#082190\",\n \"modified\": \"#B0A878\",\n \"modified.background\": \"#3A310E\",\n \"predictive\": \"#5D5945\",\n \"success.background\": \"#0C4619\",\n \"warning.background\": \"#3A310E\",\n \"warning.border\": \"#7B6508\",\n \"syntax\": {\n \"attribute\": {\n \"color\": \"#be9a52\"\n },\n \"boolean\": {\n \"color\": \"#E1D797\"\n },\n \"comment\": {\n \"color\": \"#9E9E9E\"\n },\n \"comment.doc\": {\n \"color\": \"#9E9E9E\"\n },\n \"constant\": {\n \"color\": \"#E1D797\"\n },\n \"constructor\": {\n \"color\": \"#b5af9a\"\n },\n \"embedded\": {\n \"color\": \"#CACCCA\"\n },\n \"function\": {\n \"color\": \"#E1D797\"\n },\n \"keyword\": {\n \"color\": \"#E19773\"\n },\n \"link_text\": {\n \"color\": \"#A86D3B\",\n \"font_style\": \"normal\"\n },\n \"link_uri\": {\n \"color\": \"#6F6D66\",\n \"font_style\": \"italic\"\n },\n \"number\": {\n \"color\": \"#E19773\"\n },\n \"string\": {\n \"color\": \"#76BA53\"\n },\n \"string.escape\": {\n \"color\": \"#76BA53\"\n },\n \"string.regex\": {\n \"color\": \"#76BA53\"\n },\n \"string.special\": {\n \"color\": \"#E1D797\"\n },\n \"string.special.symbol\": {\n \"color\": \"#E1D797\"\n },\n \"tag\": {\n \"color\": \"#b5af9a\"\n },\n \"text.literal\": {\n \"color\": \"#E1D797\"\n },\n \"title\": {\n \"color\": \"#A76D3B\",\n \"font_weight\": 600\n },\n \"type\": {\n \"color\": \"#A86D3B\"\n },\n \"property\": {\n \"color\": \"#CACCCA\"\n },\n \"variable.special\": {\n \"color\": \"#E19773\"\n }\n }\n }\n }\n ]\n}\n" }, { "path": "themes/jellybeans.json", "content": "{\n \"$schema\": \"https://github.com/longbridge/gpui-component/raw/refs/heads/main/.theme-schema.json\",\n \"name\": \"Jellybeans\",\n \"author\": \"nanotech\",\n \"url\": \"https://github.com/nanotech/jellybeans.vim\",\n \"themes\": [\n {\n \"name\": \"Jellybeans\",\n \"mode\": \"dark\",\n \"colors\": {\n \"accent.background\": \"#292929\",\n \"accent.foreground\": \"#e8e8e8\",\n \"background\": \"#151515\",\n \"border\": \"#2e2e2e\",\n \"danger.foreground\": \"#151515\",\n \"foreground\": \"#E8E8D3\",\n \"input.border\": \"#4E4847\",\n \"link.active.foreground\": \"#97bedc\",\n \"link.foreground\": \"#97bedc\",\n \"link.hover.foreground\": \"#97bedc\",\n \"list.active.background\": \"#97bedc15\",\n \"list.active.border\": \"#97bedc\",\n \"list.even.background\": \"#1C1C1C\",\n \"muted.background\": \"#242424\",\n \"muted.foreground\": \"#767676\",\n \"panel.background\": \"#151515\",\n \"popover.background\": \"#151515\",\n \"popover.foreground\": \"#e8e8e8\",\n \"primary.background\": \"#97bedc\",\n \"primary.foreground\": \"#151515\",\n \"scrollbar.background\": \"#26262600\",\n \"scrollbar.thumb.background\": \"#6e6e6e\",\n \"secondary.background\": \"#2F2F2F\",\n \"secondary.active.background\": \"#2f2f2f\",\n \"secondary.foreground\": \"#e8e8e8\",\n \"secondary.hover.background\": \"#252525\",\n \"tab.active.background\": \"#151515\",\n \"tab.active.foreground\": \"#e8e8e8\",\n \"tab.background\": \"#10101000\",\n \"tab.foreground\": \"#969696\",\n \"tab_bar.background\": \"#101010\",\n \"title_bar.background\": \"#101010\",\n \"title_bar.border\": \"#2e2e2e\",\n \"base.red\": \"#e27373\",\n \"base.red.light\": \"#ffa1a1\",\n \"base.green\": \"#94b979\",\n \"base.green.light\": \"#bddeab\",\n \"base.yellow\": \"#ffba7b\",\n \"base.yellow.light\": \"#ffdca0\",\n \"base.blue\": \"#97bedc\",\n \"base.blue.light\": \"#b1d8f6\",\n \"base.magenta\": \"#B294BB\",\n \"base.magenta.light\": \"#fbdaff\",\n \"base.cyan\": \"#00988e\",\n \"base.cyan.light\": \"#1ab2a8\"\n },\n \"highlight\": {\n \"editor.foreground\": \"#DDDDDD\",\n \"editor.background\": \"#000000\",\n \"editor.active_line.background\": \"#131313\",\n \"editor.line_number\": \"#8F8F8F\",\n \"editor.active_line_number\": \"#DDDDDD\",\n \"editor.invisible\": \"#9E9E9E66\",\n \"conflict\": \"#D2602D\",\n \"created\": \"#3f72e2\",\n \"hidden\": \"#9E9E9E\",\n \"hint\": \"#b283f8\",\n \"modified\": \"#B0A878\",\n \"predictive\": \"#5D5945\",\n \"syntax\": {\n \"attribute\": {\n \"color\": \"#be9a52\"\n },\n \"boolean\": {\n \"color\": \"#E1D797\"\n },\n \"comment\": {\n \"color\": \"#9E9E9E\"\n },\n \"comment.doc\": {\n \"color\": \"#9E9E9E\"\n },\n \"constant\": {\n \"color\": \"#E1D797\"\n },\n \"constructor\": {\n \"color\": \"#b5af9a\"\n },\n \"embedded\": {\n \"color\": \"#CACCCA\"\n },\n \"function\": {\n \"color\": \"#E1D797\"\n },\n \"keyword\": {\n \"color\": \"#E19773\"\n },\n \"link_text\": {\n \"color\": \"#A86D3B\",\n \"font_style\": \"normal\"\n },\n \"link_uri\": {\n \"color\": \"#6F6D66\",\n \"font_style\": \"italic\"\n },\n \"number\": {\n \"color\": \"#E19773\"\n },\n \"string\": {\n \"color\": \"#76BA53\"\n },\n \"string.escape\": {\n \"color\": \"#76BA53\"\n },\n \"string.regex\": {\n \"color\": \"#76BA53\"\n },\n \"string.special\": {\n \"color\": \"#E1D797\"\n },\n \"string.special.symbol\": {\n \"color\": \"#E1D797\"\n },\n \"tag\": {\n \"color\": \"#b5af9a\"\n },\n \"text.literal\": {\n \"color\": \"#E1D797\"\n },\n \"title\": {\n \"color\": \"#A76D3B\",\n \"font_weight\": 600\n },\n \"type\": {\n \"color\": \"#A86D3B\"\n },\n \"property\": {\n \"color\": \"#CACCCA\"\n },\n \"variable.special\": {\n \"color\": \"#E19773\"\n }\n }\n }\n }\n ]\n}\n" }, { "path": "themes/kibble.json", "content": "{\n \"$schema\": \"https://github.com/longbridge/gpui-component/raw/refs/heads/main/.theme-schema.json\",\n \"name\": \"Kibble\",\n \"author\": \"iTerm2-Color-Schemes\",\n \"url\": \"https://github.com/mbadolato/iTerm2-Color-Schemes\",\n \"themes\": [\n {\n \"name\": \"Kibble\",\n \"mode\": \"dark\",\n \"colors\": {\n \"accent.background\": \"#252525\",\n \"accent.foreground\": \"#f7f7f7\",\n \"background\": \"#0e100a\",\n \"border\": \"#292a24\",\n \"danger.background\": \"#e07b5c\",\n \"foreground\": \"#f7f7f7\",\n \"input.border\": \"#333333\",\n \"list.active.background\": \"#2BCF1315\",\n \"list.active.border\": \"#2BCF13\",\n \"list.hover.background\": \"#2c292b54\",\n \"list.even.background\": \"#24222355\",\n \"muted.background\": \"#292a2455\",\n \"muted.foreground\": \"#777777\",\n \"panel.background\": \"#003a5b\",\n \"popover.background\": \"#0e100a\",\n \"popover.foreground\": \"#f7f7f7\",\n \"primary.active.background\": \"#6ce05c99\",\n \"primary.background\": \"#6ce05c\",\n \"primary.foreground\": \"#101010\",\n \"scrollbar.background\": \"#003a5b00\",\n \"scrollbar.thumb.background\": \"#726E69\",\n \"secondary.background\": \"#22231f\",\n \"secondary.active.background\": \"#292825\",\n \"secondary.foreground\": \"#f7f7f7\",\n \"secondary.hover.background\": \"#22231f\",\n \"success.background\": \"#5c6ee0\",\n \"warning.background\": \"#e0c85c\",\n \"info.background\": \"#5cd1e0\",\n \"selection.background\": \"#9ba787\",\n \"tab.active.background\": \"#0e100a\",\n \"tab.active.foreground\": \"#f7f7f7\",\n \"tab.foreground\": \"#969696\",\n \"title_bar.background\": \"#161712\",\n \"base.red\": \"#C70231\",\n \"base.red.light\": \"#e07b5c\",\n \"base.green\": \"#2BCF13\",\n \"base.green.light\": \"#6ce05c\",\n \"base.blue\": \"#3449d1\",\n \"base.blue.light\": \"#5c6ee0\",\n \"base.cyan\": \"#0798ab\",\n \"base.cyan.light\": \"#5cd1e0\",\n \"base.magenta\": \"#8400ff\",\n \"base.magenta.light\": \"#C495F0\",\n \"base.yellow\": \"#c7a302\",\n \"base.yellow.light\": \"#e0c85c\"\n },\n \"highlight\": {\n \"editor.foreground\": \"#f7f7f7\",\n \"editor.background\": \"#0e100a\",\n \"editor.active_line.background\": \"#242223\",\n \"editor.line_number\": \"#726E69\",\n \"editor.active_line_number\": \"#f7f7f7\",\n \"editor.invisible\": \"#726E6966\",\n \"conflict\": \"#c70031\",\n \"created\": \"#2BCF13\",\n \"deleted\": \"#c70031\",\n \"error\": \"#c70031\",\n \"hidden\": \"#726E69\",\n \"hint\": \"#0798ab\",\n \"ignored\": \"#726E69\",\n \"info\": \"#0798ab\",\n \"modified\": \"#3449d1\",\n \"predictive\": \"#726E69\",\n \"renamed\": \"#3449d1\",\n \"success\": \"#2BCF13\",\n \"unreachable\": \"#726E69\",\n \"warning\": \"#c7a302\",\n \"syntax\": {\n \"attribute\": {\n \"color\": \"#3449d1\"\n },\n \"boolean\": {\n \"color\": \"#c7a302\"\n },\n \"comment\": {\n \"color\": \"#726E69\",\n \"font_style\": \"italic\"\n },\n \"comment.doc\": {\n \"color\": \"#726E69\",\n \"font_style\": \"italic\"\n },\n \"constant\": {\n \"color\": \"#c7a302\"\n },\n \"constructor\": {\n \"color\": \"#3449d1\"\n },\n \"embedded\": {\n \"color\": \"#f7f7f7\"\n },\n \"function\": {\n \"color\": \"#c7a302\"\n },\n \"keyword\": {\n \"color\": \"#c70031\"\n },\n \"link_text\": {\n \"color\": \"#0798ab\",\n \"font_style\": \"normal\"\n },\n \"link_uri\": {\n \"color\": \"#68f2e0\",\n \"font_style\": \"italic\"\n },\n \"number\": {\n \"color\": \"#c70031\"\n },\n \"string\": {\n \"color\": \"#2BCF13\"\n },\n \"string.escape\": {\n \"color\": \"#2BCF13\"\n },\n \"string.regex\": {\n \"color\": \"#2BCF13\"\n },\n \"string.special\": {\n \"color\": \"#c7a302\"\n },\n \"string.special.symbol\": {\n \"color\": \"#c7a302\"\n },\n \"tag\": {\n \"color\": \"#3449d1\"\n },\n \"text.literal\": {\n \"color\": \"#c7a302\"\n },\n \"title\": {\n \"color\": \"#3449d1\",\n \"font_weight\": 600\n },\n \"type\": {\n \"color\": \"#3449d1\"\n },\n \"property\": {\n \"color\": \"#f7f7f7\"\n },\n \"variable.special\": {\n \"color\": \"#c70031\"\n }\n }\n }\n }\n ]\n}\n" }, { "path": "themes/macos-classic.json", "content": "{\n \"$schema\": \"https://github.com/longbridge/gpui-component/raw/refs/heads/main/.theme-schema.json\",\n \"name\": \"macOS Classic\",\n \"author\": \"huacnlee\",\n \"url\": \"https://github.com/huacnlee/zed-theme-macos-classic\",\n \"themes\": [\n {\n \"name\": \"macOS Classic Light\",\n \"mode\": \"light\",\n \"shadow\": false,\n \"colors\": {\n \"accent.background\": \"#E0E0E0\",\n \"accent.foreground\": \"#000000\",\n \"background\": \"#F9F9F9\",\n \"foreground\": \"#000000\",\n \"border\": \"#D2D2D2\",\n \"ring\": \"#0060de\",\n \"danger.foreground\": \"#FFFFFF\",\n \"list.active.background\": \"#0060de15\",\n \"list.active.border\": \"#0060de\",\n \"list.even.background\": \"#EFEFEF\",\n \"list.hover.background\": \"#E7E7E7\",\n \"muted.background\": \"#EAEAEA\",\n \"muted.foreground\": \"#707070\",\n \"popover.background\": \"#F5F5F5\",\n \"popover.foreground\": \"#000000\",\n \"primary.background\": \"#0060de\",\n \"primary.foreground\": \"#FFFFFF\",\n \"scrollbar.background\": \"#FFFFFF00\",\n \"scrollbar.thumb.background\": \"#C8C8C8\",\n \"secondary.active.background\": \"#D9D9D9\",\n \"secondary.background\": \"#E0E0E0\",\n \"secondary.foreground\": \"#000000\",\n \"secondary.hover.background\": \"#E5E5E5\",\n \"tab.active.foreground\": \"#000000\",\n \"tab.background\": \"#E9E9E9\",\n \"tab.foreground\": \"#606060\",\n \"tab_bar.background\": \"#E9E9E9\",\n \"title_bar.background\": \"#FEFEFE\",\n \"title_bar.border\": \"#DADADA\",\n \"base.yellow\": \"#B59A00\",\n \"base.red\": \"#d21f07\",\n \"base.blue\": \"#0060de\",\n \"base.green\": \"#319a00\",\n \"base.magenta\": \"#9A0068\",\n \"base.cyan\": \"#007E8A\"\n },\n \"highlight\": {\n \"editor.foreground\": \"#000000\",\n \"editor.background\": \"#ffffff\",\n \"editor.active_line.background\": \"#F5F5F5\",\n \"editor.line_number\": \"#929292\",\n \"editor.active_line_number\": \"#000000\",\n \"editor.invisible\": \"#007fff66\",\n \"conflict\": \"#d21f07\",\n \"created\": \"#0060de\",\n \"hidden\": \"#6D6D6D\",\n \"hint\": \"#9A0068\",\n \"modified\": \"#319a00\",\n \"predictive\": \"#A4ABB6\",\n \"warning\": \"#B59A00\",\n \"syntax\": {\n \"attribute\": {\n \"color\": \"#957931\"\n },\n \"boolean\": {\n \"color\": \"#C5060B\"\n },\n \"comment\": {\n \"color\": \"#007fff\"\n },\n \"comment.doc\": {\n \"color\": \"#007fff\"\n },\n \"constant\": {\n \"color\": \"#C5060B\"\n },\n \"constructor\": {\n \"color\": \"#0433ff\"\n },\n \"embedded\": {\n \"color\": \"#333333\"\n },\n \"function\": {\n \"color\": \"#0000A2\"\n },\n \"keyword\": {\n \"color\": \"#0433ff\"\n },\n \"link_text\": {\n \"color\": \"#0000A2\",\n \"font_style\": \"normal\"\n },\n \"link_uri\": {\n \"color\": \"#6A7293\",\n \"font_style\": \"italic\"\n },\n \"number\": {\n \"color\": \"#0433ff\"\n },\n \"string\": {\n \"color\": \"#036A07\"\n },\n \"string.escape\": {\n \"color\": \"#036A07\"\n },\n \"string.regex\": {\n \"color\": \"#036A07\"\n },\n \"string.special\": {\n \"color\": \"#d21f07\"\n },\n \"string.special.symbol\": {\n \"color\": \"#d21f07\"\n },\n \"tag\": {\n \"color\": \"#0433ff\"\n },\n \"text.literal\": {\n \"color\": \"#6F42C1\"\n },\n \"title\": {\n \"color\": \"#0433FF\"\n },\n \"type\": {\n \"color\": \"#6f42c1\"\n },\n \"property\": {\n \"color\": \"#333333\"\n },\n \"variable\": {\n \"color\": \"#333333\"\n },\n \"variable.special\": {\n \"color\": \"#C5060B\"\n }\n }\n }\n },\n {\n \"name\": \"macOS Classic Dark\",\n \"mode\": \"dark\",\n \"shadow\": false,\n \"colors\": {\n \"accent.background\": \"#282629\",\n \"accent.foreground\": \"#CACCCA\",\n \"background\": \"#131313\",\n \"border\": \"#303030\",\n \"ring\": \"#077CFD\",\n \"foreground\": \"#DEDEDE\",\n \"list.even.background\": \"#232323\",\n \"list.active.background\": \"#0059D115\",\n \"list.active.border\": \"#077CFD\",\n \"muted.background\": \"#202020\",\n \"muted.foreground\": \"#9D9D9D\",\n \"popover.background\": \"#101010\",\n \"popover.foreground\": \"#CACCCA\",\n \"primary.background\": \"#077CFD\",\n \"primary.foreground\": \"#F2F9FF\",\n \"switch.background\": \"#393939\",\n \"switch.thumb.background\": \"#DAECFF\",\n \"scrollbar.background\": \"#13131300\",\n \"scrollbar.thumb.background\": \"#9F9F9F\",\n \"secondary.active.background\": \"#353535\",\n \"secondary.background\": \"#353535\",\n \"secondary.foreground\": \"#DEDEDE\",\n \"secondary.hover.background\": \"#35353599\",\n \"link\": \"#419CFF\",\n \"tab_bar.background\": \"#1C1C1E\",\n \"tab.active.background\": \"#131313\",\n \"tab.foreground\": \"#8F8F8F\",\n \"title_bar.background\": \"#1C1C1E\",\n \"selection.background\": \"#3F638B\",\n \"base.blue\": \"#419CFF\",\n \"base.cyan\": \"#07FDD3\",\n \"base.green\": \"#30D158\",\n \"base.magenta\": \"#A550A7\",\n \"base.red\": \"#FF5257\",\n \"base.yellow\": \"#FFC600\"\n },\n \"highlight\": {\n \"editor.foreground\": \"#CACCCA\",\n \"editor.background\": \"#131313\",\n \"editor.active_line.background\": \"#35343666\",\n \"editor.line_number\": \"#8F8F8F\",\n \"editor.active_line_number\": \"#DDDDDD\",\n \"editor.invisible\": \"#007fff66\",\n \"conflict\": \"#D2602D\",\n \"created\": \"#3f72e2\",\n \"created.background\": \"#0C4619\",\n \"deleted.background\": \"#46190C\",\n \"error.background\": \"#46190C\",\n \"error.border\": \"#802207\",\n \"hidden\": \"#9E9E9E\",\n \"hint\": \"#b283f8\",\n \"hint.background\": \"#250c4b\",\n \"hint.border\": \"#3f0891\",\n \"info.background\": \"#0059D1\",\n \"info.border\": \"#0059D1\",\n \"modified\": \"#B0A878\",\n \"modified.background\": \"#3A310E\",\n \"predictive\": \"#5D5945\",\n \"success.background\": \"#0C4619\",\n \"warning.background\": \"#3A310E\",\n \"warning.border\": \"#7B6508\",\n \"syntax\": {\n \"attribute\": {\n \"color\": \"#e7cb8f\"\n },\n \"boolean\": {\n \"color\": \"#E1D797\"\n },\n \"comment\": {\n \"color\": \"#9E9E9E\"\n },\n \"comment.doc\": {\n \"color\": \"#9E9E9E\"\n },\n \"constant\": {\n \"color\": \"#E1D797\"\n },\n \"constructor\": {\n \"color\": \"#b5af9a\"\n },\n \"embedded\": {\n \"color\": \"#CACCCA\"\n },\n \"function\": {\n \"color\": \"#fdd888\"\n },\n \"keyword\": {\n \"color\": \"#c28b12\"\n },\n \"link_text\": {\n \"color\": \"#307BF6\",\n \"font_style\": \"normal\"\n },\n \"link_uri\": {\n \"color\": \"#7faef9\",\n \"font_style\": \"italic\"\n },\n \"number\": {\n \"color\": \"#E1D797\"\n },\n \"string\": {\n \"color\": \"#62BA46\"\n },\n \"string.escape\": {\n \"color\": \"#62BA46\"\n },\n \"string.regex\": {\n \"color\": \"#62BA46\"\n },\n \"string.special\": {\n \"color\": \"#E1D797\"\n },\n \"string.special.symbol\": {\n \"color\": \"#E1D797\"\n },\n \"tag\": {\n \"color\": \"#b5af9a\"\n },\n \"text.literal\": {\n \"color\": \"#E1D797\"\n },\n \"title\": {\n \"color\": \"#fdd888\",\n \"font_weight\": 600\n },\n \"type\": {\n \"color\": \"#c75828\"\n },\n \"property\": {\n \"color\": \"#CACCCA\"\n },\n \"variable.special\": {\n \"color\": \"#E19773\"\n }\n }\n }\n }\n ]\n}\n" }, { "path": "themes/matrix.json", "content": "{\n \"$schema\": \"https://github.com/longbridge/gpui-component/raw/refs/heads/main/.theme-schema.json\",\n \"name\": \"Matrix\",\n \"author\": \"iruzo\",\n \"url\": \"https://github.com/iruzo/matrix-nvim\",\n \"themes\": [\n {\n \"name\": \"Matrix\",\n \"mode\": \"dark\",\n \"radius\": 0,\n \"radius.lg\": 0,\n \"colors\": {\n \"accent.background\": \"#002d00\",\n \"accent.foreground\": \"#00FF00\",\n \"background\": \"#020D02\",\n \"border\": \"#12410E\",\n \"window_border\": \"#156B12\",\n \"ring\": \"#00FF00\",\n \"danger.background\": \"#FF0000\",\n \"danger.active.background\": \"#FF0000\",\n \"danger.foreground\": \"#0D0208\",\n \"danger.hover.background\": \"#FF0000\",\n \"foreground\": \"#88FF88\",\n \"input.border\": \"#003200\",\n \"link.active.foreground\": \"#00FF00\",\n \"link.foreground\": \"#00FF00\",\n \"link.hover.foreground\": \"#00FF00\",\n \"list.active.background\": \"#00FF0011\",\n \"list.active.border\": \"#00FF00\",\n \"list.even.background\": \"#00190066\",\n \"muted.background\": \"#001900\",\n \"muted.foreground\": \"#007700\",\n \"panel.background\": \"#001900\",\n \"popover.background\": \"#020D02\",\n \"popover.foreground\": \"#00FF00\",\n \"primary.active.background\": \"#00FF0099\",\n \"primary.background\": \"#00FF00\",\n \"primary.foreground\": \"#0D0208\",\n \"primary.hover.background\": \"#00FF00AA\",\n \"scrollbar.background\": \"#0D020800\",\n \"scrollbar.thumb.background\": \"#003d00\",\n \"secondary.active.background\": \"#001B00\",\n \"secondary.background\": \"#002900\",\n \"secondary.foreground\": \"#3fd43a\",\n \"secondary.hover.background\": \"#003300\",\n \"tab.active.foreground\": \"#00FF00\",\n \"tab.background\": \"#0D020800\",\n \"tab.foreground\": \"#88FF88\",\n \"title_bar.background\": \"#020d02\",\n \"title_bar.border\": \"#12410E\",\n \"base.red\": \"#FF0000\",\n \"base.green\": \"#00FF00\",\n \"base.yellow\": \"#ffea00\",\n \"base.blue\": \"#0000ff\",\n \"base.magenta\": \"#FF00FF\",\n \"base.cyan\": \"#00ffd5\"\n },\n \"highlight\": {\n \"editor.foreground\": \"#88FF88\",\n \"editor.background\": \"#020d02\",\n \"editor.active_line.background\": \"#001900\",\n \"editor.line_number\": \"#007700\",\n \"editor.active_line_number\": \"#00FF00\",\n \"editor.invisible\": \"#00770066\",\n \"conflict\": \"#FF0000\",\n \"created\": \"#82d967\",\n \"deleted\": \"#FF0000\",\n \"error\": \"#FF0000\",\n \"hidden\": \"#007700\",\n \"hint\": \"#3fd43a\",\n \"ignored\": \"#007700\",\n \"info\": \"#3fd43a\",\n \"modified\": \"#82d967\",\n \"predictive\": \"#007700\",\n \"renamed\": \"#82d967\",\n \"success\": \"#82d967\",\n \"unreachable\": \"#007700\",\n \"warning\": \"#ffd700\",\n \"syntax\": {\n \"attribute\": {\n \"color\": \"#82d967\"\n },\n \"boolean\": {\n \"color\": \"#ffd700\"\n },\n \"comment\": {\n \"color\": \"#007700\",\n \"font_style\": \"italic\"\n },\n \"comment.doc\": {\n \"color\": \"#007700\",\n \"font_style\": \"italic\"\n },\n \"constant\": {\n \"color\": \"#ffd700\"\n },\n \"constructor\": {\n \"color\": \"#82d967\"\n },\n \"embedded\": {\n \"color\": \"#88FF88\"\n },\n \"function\": {\n \"color\": \"#ffd700\"\n },\n \"keyword\": {\n \"color\": \"#FF0000\"\n },\n \"link_text\": {\n \"color\": \"#3fd43a\",\n \"font_style\": \"normal\"\n },\n \"link_uri\": {\n \"color\": \"#00FF00\",\n \"font_style\": \"italic\"\n },\n \"number\": {\n \"color\": \"#FF0000\"\n },\n \"string\": {\n \"color\": \"#82d967\"\n },\n \"string.escape\": {\n \"color\": \"#82d967\"\n },\n \"string.regex\": {\n \"color\": \"#82d967\"\n },\n \"string.special\": {\n \"color\": \"#ffd700\"\n },\n \"string.special.symbol\": {\n \"color\": \"#ffd700\"\n },\n \"tag\": {\n \"color\": \"#82d967\"\n },\n \"text.literal\": {\n \"color\": \"#ffd700\"\n },\n \"title\": {\n \"color\": \"#82d967\",\n \"font_weight\": 600\n },\n \"type\": {\n \"color\": \"#82d967\"\n },\n \"property\": {\n \"color\": \"#88FF88\"\n },\n \"variable.special\": {\n \"color\": \"#FF0000\"\n }\n }\n }\n }\n ]\n}\n" }, { "path": "themes/mellifluous.json", "content": "{\n \"$schema\": \"https://github.com/longbridge/gpui-component/raw/refs/heads/main/.theme-schema.json\",\n \"name\": \"Mellifluous\",\n \"author\": \"Ramojus Lapinskas\",\n \"url\": \"https://github.com/ramojus/mellifluous.nvim\",\n \"themes\": [\n {\n \"name\": \"Mellifluous Light\",\n \"mode\": \"light\",\n \"shadow\": false,\n \"colors\": {\n \"accent.background\": \"#d4d4d4\",\n \"accent.foreground\": \"#383a42\",\n \"background\": \"#E7E7E7\",\n \"border\": \"#CACACA\",\n \"danger.active.background\": \"#e06c75\",\n \"danger.hover.background\": \"#be5046\",\n \"foreground\": \"#383a42\",\n \"link.active.foreground\": \"#5A6599\",\n \"link.foreground\": \"#5A6599\",\n \"link.hover.foreground\": \"#5A6599\",\n \"list.hover.background\": \"#d5d5d5\",\n \"list.active.background\": \"#5A659912\",\n \"list.active.border\": \"#5A6599\",\n \"list.even.background\": \"#F0F0F0\",\n \"muted.background\": \"#E0E0E0\",\n \"muted.foreground\": \"#828997\",\n \"panel.background\": \"#fafafa\",\n \"popover.background\": \"#E4E4E4\",\n \"popover.foreground\": \"#383a42\",\n \"primary.active.background\": \"#5A6599AA\",\n \"primary.background\": \"#5A6599\",\n \"primary.foreground\": \"#F0F0F0\",\n \"primary.hover.background\": \"#626ca2\",\n \"scrollbar.background\": \"#fafafa00\",\n \"scrollbar.thumb.background\": \"#c0c0c0\",\n \"secondary.background\": \"#d0d0d0\",\n \"secondary.active.background\": \"#cccccc\",\n \"secondary.foreground\": \"#383a42\",\n \"secondary.hover.background\": \"#d7d7d7\",\n \"tab.active.background\": \"#E7E7E7\",\n \"tab.active.foreground\": \"#383a42\",\n \"tab.background\": \"#F0F0F000\",\n \"tab.foreground\": \"#727272\",\n \"tab_bar.background\": \"#E7E7E7\",\n \"title_bar.background\": \"#dfdfdf\",\n \"title_bar.border\": \"#CACACA\",\n \"base.red\": \"#C95954\",\n \"base.green\": \"#828040\",\n \"base.yellow\": \"#c98f54\",\n \"base.blue\": \"#a8a1be\",\n \"base.magenta\": \"#b39fb0\",\n \"base.magenta.light\": \"#9C699588\",\n \"base.cyan\": \"#54c981\"\n },\n \"highlight\": {\n \"editor.foreground\": \"#383a42\",\n \"editor.background\": \"#E7E7E7\",\n \"editor.active_line.background\": \"#d5d5d5\",\n \"editor.line_number\": \"#727272\",\n \"editor.active_line_number\": \"#383a42\",\n \"editor.invisible\": \"#A0A0A066\",\n \"conflict\": \"#e06c75\",\n \"created\": \"#828040\",\n \"deleted\": \"#be5046\",\n \"error\": \"#e06c75\",\n \"hidden\": \"#727272\",\n \"hint\": \"#5A6599\",\n \"ignored\": \"#727272\",\n \"info\": \"#5A6599\",\n \"modified\": \"#727272\",\n \"predictive\": \"#727272\",\n \"renamed\": \"#727272\",\n \"success\": \"#828040\",\n \"unreachable\": \"#727272\",\n \"warning\": \"#cbaa89\",\n \"syntax\": {\n \"attribute\": {\n \"color\": \"#727272\"\n },\n \"boolean\": {\n \"color\": \"#cbaa89\"\n },\n \"comment\": {\n \"color\": \"#A0A0A0\",\n \"font_style\": \"italic\"\n },\n \"comment.doc\": {\n \"color\": \"#A0A0A0\",\n \"font_style\": \"italic\"\n },\n \"constant\": {\n \"color\": \"#cbaa89\"\n },\n \"constructor\": {\n \"color\": \"#727272\"\n },\n \"embedded\": {\n \"color\": \"#383a42\"\n },\n \"function\": {\n \"color\": \"#cbaa89\"\n },\n \"keyword\": {\n \"color\": \"#e06c75\"\n },\n \"link_text\": {\n \"color\": \"#5A6599\",\n \"font_style\": \"normal\"\n },\n \"link_uri\": {\n \"color\": \"#5A6599\",\n \"font_style\": \"italic\"\n },\n \"number\": {\n \"color\": \"#e06c75\"\n },\n \"string\": {\n \"color\": \"#828040\"\n },\n \"string.escape\": {\n \"color\": \"#828040\"\n },\n \"string.regex\": {\n \"color\": \"#828040\"\n },\n \"string.special\": {\n \"color\": \"#cbaa89\"\n },\n \"string.special.symbol\": {\n \"color\": \"#cbaa89\"\n },\n \"tag\": {\n \"color\": \"#727272\"\n },\n \"text.literal\": {\n \"color\": \"#cbaa89\"\n },\n \"title\": {\n \"color\": \"#727272\",\n \"font_weight\": 600\n },\n \"type\": {\n \"color\": \"#727272\"\n },\n \"property\": {\n \"color\": \"#383a42\"\n },\n \"variable.special\": {\n \"color\": \"#e06c75\"\n }\n }\n }\n },\n {\n \"name\": \"Mellifluous Dark\",\n \"mode\": \"dark\",\n \"shadow\": false,\n \"colors\": {\n \"accent.background\": \"#2f2f2f\",\n \"accent.foreground\": \"#abb2bf\",\n \"background\": \"#1A1A1A\",\n \"border\": \"#444444\",\n \"foreground\": \"#abb2bf\",\n \"input.border\": \"#444444\",\n \"link.active.foreground\": \"#5A6599\",\n \"link.foreground\": \"#5A6599\",\n \"link.hover.foreground\": \"#5A6599\",\n \"list.active.background\": \"#5A659922\",\n \"list.active.border\": \"#5A6599\",\n \"list.even.background\": \"#29292988\",\n \"muted.background\": \"#44444455\",\n \"muted.foreground\": \"#828997\",\n \"panel.background\": \"#282c34\",\n \"popover.background\": \"#1A1A1A\",\n \"popover.foreground\": \"#abb2bf\",\n \"primary.active.background\": \"#5A6599AA\",\n \"primary.background\": \"#5A6599\",\n \"primary.foreground\": \"#ecedf4\",\n \"primary.hover.background\": \"#626ca2\",\n \"scrollbar.background\": \"#282c3400\",\n \"scrollbar.thumb.background\": \"#444444\",\n \"secondary.background\": \"#292929\",\n \"secondary.active.background\": \"#323232\",\n \"secondary.foreground\": \"#abb2bf\",\n \"secondary.hover.background\": \"#292929\",\n \"tab.active.background\": \"#1A1A1A\",\n \"tab.active.foreground\": \"#abb2bf\",\n \"tab.background\": \"#1A1A1A00\",\n \"tab.foreground\": \"#abb2bf\",\n \"title_bar.background\": \"#171717\",\n \"title_bar.border\": \"#444444\",\n \"base.red\": \"#C95954\",\n \"base.green\": \"#828040\",\n \"base.yellow\": \"#c98d54\",\n \"base.blue\": \"#5481c9\",\n \"base.magenta\": \"#9C6995\",\n \"base.magenta.light\": \"#9C699577\",\n \"base.cyan\": \"#54c9bd\"\n },\n \"highlight\": {\n \"editor.foreground\": \"#abb2bf\",\n \"editor.background\": \"#1A1A1A\",\n \"editor.active_line.background\": \"#29292977\",\n \"editor.line_number\": \"#828997\",\n \"editor.active_line_number\": \"#abb2bf\",\n \"editor.invisible\": \"#A0A0A066\",\n \"conflict\": \"#e06c75\",\n \"conflict.background\": \"#1A1A1A\",\n \"conflict.border\": \"#be5046\",\n \"created\": \"#828040\",\n \"created.background\": \"#292929\",\n \"created.border\": \"#929292\",\n \"deleted\": \"#be5046\",\n \"deleted.background\": \"#1A1A1A\",\n \"deleted.border\": \"#e06c75\",\n \"error\": \"#e06c75\",\n \"error.background\": \"#1A1A1A\",\n \"error.border\": \"#be5046\",\n \"hidden\": \"#828997\",\n \"hidden.background\": \"#292929\",\n \"hidden.border\": \"#444444\",\n \"hint\": \"#5A6599\",\n \"hint.background\": \"#292929\",\n \"hint.border\": \"#626ca2\",\n \"ignored\": \"#828997\",\n \"ignored.background\": \"#292929\",\n \"ignored.border\": \"#444444\",\n \"info\": \"#5A6599\",\n \"info.background\": \"#292929\",\n \"info.border\": \"#626ca2\",\n \"modified\": \"#929292\",\n \"modified.background\": \"#292929\",\n \"modified.border\": \"#444444\",\n \"predictive\": \"#828997\",\n \"predictive.background\": \"#292929\",\n \"predictive.border\": \"#444444\",\n \"renamed\": \"#929292\",\n \"renamed.background\": \"#292929\",\n \"renamed.border\": \"#444444\",\n \"success\": \"#828040\",\n \"success.background\": \"#292929\",\n \"success.border\": \"#929292\",\n \"unreachable\": \"#828997\",\n \"unreachable.background\": \"#292929\",\n \"unreachable.border\": \"#444444\",\n \"warning\": \"#d19a66\",\n \"warning.background\": \"#292929\",\n \"warning.border\": \"#929292\",\n \"syntax\": {\n \"attribute\": {\n \"color\": \"#929292\"\n },\n \"boolean\": {\n \"color\": \"#d19a66\"\n },\n \"comment\": {\n \"color\": \"#828997\",\n \"font_style\": \"italic\"\n },\n \"comment.doc\": {\n \"color\": \"#828997\",\n \"font_style\": \"italic\"\n },\n \"constant\": {\n \"color\": \"#d19a66\"\n },\n \"constructor\": {\n \"color\": \"#929292\"\n },\n \"embedded\": {\n \"color\": \"#abb2bf\"\n },\n \"function\": {\n \"color\": \"#d19a66\"\n },\n \"keyword\": {\n \"color\": \"#e06c75\"\n },\n \"link_text\": {\n \"color\": \"#5A6599\",\n \"font_style\": \"normal\"\n },\n \"link_uri\": {\n \"color\": \"#5A6599\",\n \"font_style\": \"italic\"\n },\n \"number\": {\n \"color\": \"#e06c75\"\n },\n \"string\": {\n \"color\": \"#828040\"\n },\n \"string.escape\": {\n \"color\": \"#828040\"\n },\n \"string.regex\": {\n \"color\": \"#828040\"\n },\n \"string.special\": {\n \"color\": \"#d19a66\"\n },\n \"string.special.symbol\": {\n \"color\": \"#d19a66\"\n },\n \"tag\": {\n \"color\": \"#929292\"\n },\n \"text.literal\": {\n \"color\": \"#d19a66\"\n },\n \"title\": {\n \"color\": \"#929292\",\n \"font_weight\": 600\n },\n \"type\": {\n \"color\": \"#929292\"\n },\n \"property\": {\n \"color\": \"#abb2bf\"\n },\n \"variable.special\": {\n \"color\": \"#e06c75\"\n }\n }\n }\n }\n ]\n}\n" }, { "path": "themes/molokai.json", "content": "{\n \"$schema\": \"https://github.com/longbridge/gpui-component/raw/refs/heads/main/.theme-schema.json\",\n \"name\": \"Molokai\",\n \"author\": \"Tomas Restrepo\",\n \"url\": \"https://github.com/tomasr/molokai\",\n \"themes\": [\n {\n \"name\": \"Molokai Light\",\n \"mode\": \"light\",\n \"shadow\": false,\n \"colors\": {\n \"accent.background\": \"#EBE4E1\",\n \"accent.foreground\": \"#060606\",\n \"background\": \"#FEFAF9\",\n \"border\": \"#E4DEDA\",\n \"window_border\": \"#d6d6d6\",\n \"ring\": \"#a0a0ab\",\n \"foreground\": \"#0a0a0a\",\n \"input.border\": \"#E4DEDA\",\n \"list.active.background\": \"#E1477411\",\n \"list.active.border\": \"#E14774AA\",\n \"list.even.background\": \"#E4DEDA33\",\n \"muted.background\": \"#f1eded\",\n \"muted.foreground\": \"#767676\",\n \"panel.background\": \"#FEFAF9\",\n \"popover.background\": \"#FEFAF9\",\n \"popover.foreground\": \"#0a0a0a\",\n \"primary.background\": \"#E14774\",\n \"primary.foreground\": \"#fafafa\",\n \"scrollbar.background\": \"#FEFAF900\",\n \"scrollbar.thumb.background\": \"#ADADB0\",\n \"secondary.background\": \"#E4DEDA\",\n \"secondary.foreground\": \"#060606\",\n \"secondary.hover.background\": \"#E4DEDA99\",\n \"title_bar.background\": \"#e8e3e0\",\n \"title_bar.border\": \"#d5ccc6\",\n \"base.red\": \"#e17047\",\n \"base.green\": \"#82cc0a\",\n \"base.yellow\": \"#ccac0a\",\n \"base.blue\": \"#e16032\",\n \"base.blue.light\": \"#e16032\",\n \"base.magenta\": \"#7058be\",\n \"base.cyan\": \"#0acc78\"\n },\n \"highlight\": {\n \"editor.foreground\": \"#0a0a0a\",\n \"editor.background\": \"#FEFAF9\",\n \"editor.active_line.background\": \"#E4DEDA\",\n \"editor.line_number\": \"#767676\",\n \"editor.active_line_number\": \"#0a0a0a\",\n \"editor.invisible\": \"#76767666\",\n \"conflict\": \"#e14775\",\n \"created\": \"#269D69\",\n \"deleted\": \"#e14775\",\n \"error\": \"#e14775\",\n \"hidden\": \"#767676\",\n \"hint\": \"#7058be\",\n \"ignored\": \"#767676\",\n \"info\": \"#1c8ca8\",\n \"modified\": \"#cc7a0a\",\n \"predictive\": \"#ADADB0\",\n \"renamed\": \"#E14774\",\n \"success\": \"#269D69\",\n \"unreachable\": \"#767676\",\n \"warning\": \"#cc7a0a\",\n \"syntax\": {\n \"attribute\": {\n \"color\": \"#e14775\"\n },\n \"boolean\": {\n \"color\": \"#cc7a0a\"\n },\n \"comment\": {\n \"color\": \"#767676\",\n \"font_style\": \"italic\"\n },\n \"comment.doc\": {\n \"color\": \"#767676\",\n \"font_style\": \"italic\"\n },\n \"constant\": {\n \"color\": \"#7058be\"\n },\n \"constructor\": {\n \"color\": \"#269D69\"\n },\n \"embedded\": {\n \"color\": \"#1c8ca8\"\n },\n \"function\": {\n \"color\": \"#e14775\"\n },\n \"keyword\": {\n \"color\": \"#e14775\",\n \"font_style\": \"normal\"\n },\n \"link_text\": {\n \"color\": \"#cc7a0a\",\n \"font_style\": \"underline\"\n },\n \"link_uri\": {\n \"color\": \"#7058be\",\n \"font_style\": \"italic\"\n },\n \"number\": {\n \"color\": \"#cc7a0a\"\n },\n \"string\": {\n \"color\": \"#269D69\"\n },\n \"string.escape\": {\n \"color\": \"#7058be\"\n },\n \"string.regex\": {\n \"color\": \"#269D69\"\n },\n \"string.special\": {\n \"color\": \"#e14775\"\n },\n \"string.special.symbol\": {\n \"color\": \"#e14775\"\n },\n \"tag\": {\n \"color\": \"#e14775\"\n },\n \"text.literal\": {\n \"color\": \"#7058be\"\n },\n \"title\": {\n \"color\": \"#cc7a0a\",\n \"font_weight\": 600\n },\n \"type\": {\n \"color\": \"#1c8ca8\"\n },\n \"property\": {\n \"color\": \"#7058be\"\n },\n \"variable.special\": {\n \"color\": \"#e14775\"\n }\n }\n }\n },\n {\n \"name\": \"Molokai Dark\",\n \"mode\": \"dark\",\n \"colors\": {\n \"accent.background\": \"#2b2f30\",\n \"accent.foreground\": \"#f8f8f2\",\n \"background\": \"#1b1d1e\",\n \"border\": \"#393939\",\n \"foreground\": \"#f8f8f2\",\n \"input.border\": \"#3b3b3b\",\n \"list.active.background\": \"#f9267211\",\n \"list.active.border\": \"#f9267288\",\n \"list.even.background\": \"#292c2e\",\n \"muted.background\": \"#232526\",\n \"muted.foreground\": \"#5b5a54\",\n \"panel.background\": \"#1b1d1e\",\n \"popover.background\": \"#1b1d1e\",\n \"popover.foreground\": \"#f8f8f2\",\n \"primary.background\": \"#dc1860\",\n \"primary.foreground\": \"#f8f8f2\",\n \"scrollbar.background\": \"#1b1d1e00\",\n \"scrollbar.thumb.background\": \"#4b4b4b\",\n \"secondary.background\": \"#292c2e\",\n \"secondary.active.background\": \"#303436\",\n \"secondary.foreground\": \"#f5f5f4\",\n \"secondary.hover.background\": \"#30343699\",\n \"table.row.border\": \"#3b3b3b70\",\n \"title_bar.background\": \"#202223\",\n \"title_bar.border\": \"#3b3b3b\",\n \"base.red\": \"#dc1860\",\n \"base.green\": \"#82cc0a\",\n \"base.yellow\": \"#807607\",\n \"base.blue\": \"#075880\",\n \"base.magenta\": \"#800780\",\n \"base.cyan\": \"#07807e\"\n },\n \"highlight\": {\n \"editor.foreground\": \"#DDDDDD\",\n \"editor.background\": \"#000000\",\n \"editor.active_line.background\": \"#131313\",\n \"editor.line_number\": \"#8F8F8F\",\n \"editor.active_line_number\": \"#DDDDDD\",\n \"editor.invisible\": \"#76767666\",\n \"conflict\": \"#D2602D\",\n \"created\": \"#3f72e2\",\n \"created.background\": \"#0C4619\",\n \"deleted.background\": \"#46190C\",\n \"error.background\": \"#46190C\",\n \"error.border\": \"#802207\",\n \"hidden\": \"#9E9E9E\",\n \"hint\": \"#b283f8\",\n \"hint.background\": \"#250c4b\",\n \"hint.border\": \"#3f0891\",\n \"info.background\": \"#0C194D\",\n \"info.border\": \"#082190\",\n \"modified\": \"#B0A878\",\n \"modified.background\": \"#3A310E\",\n \"predictive\": \"#5D5945\",\n \"success.background\": \"#0C4619\",\n \"warning.background\": \"#3A310E\",\n \"warning.border\": \"#7B6508\",\n \"syntax\": {\n \"attribute\": {\n \"color\": \"#be9a52\"\n },\n \"boolean\": {\n \"color\": \"#E1D797\"\n },\n \"comment\": {\n \"color\": \"#9E9E9E\"\n },\n \"comment.doc\": {\n \"color\": \"#9E9E9E\"\n },\n \"constant\": {\n \"color\": \"#E1D797\"\n },\n \"constructor\": {\n \"color\": \"#b5af9a\"\n },\n \"embedded\": {\n \"color\": \"#CACCCA\"\n },\n \"function\": {\n \"color\": \"#E1D797\"\n },\n \"keyword\": {\n \"color\": \"#E19773\"\n },\n \"link_text\": {\n \"color\": \"#A86D3B\",\n \"font_style\": \"normal\"\n },\n \"link_uri\": {\n \"color\": \"#6F6D66\",\n \"font_style\": \"italic\"\n },\n \"number\": {\n \"color\": \"#E19773\"\n },\n \"string\": {\n \"color\": \"#76BA53\"\n },\n \"string.escape\": {\n \"color\": \"#76BA53\"\n },\n \"string.regex\": {\n \"color\": \"#76BA53\"\n },\n \"string.special\": {\n \"color\": \"#E1D797\"\n },\n \"string.special.symbol\": {\n \"color\": \"#E1D797\"\n },\n \"tag\": {\n \"color\": \"#b5af9a\"\n },\n \"text.literal\": {\n \"color\": \"#E1D797\"\n },\n \"title\": {\n \"color\": \"#A76D3B\",\n \"font_weight\": 600\n },\n \"type\": {\n \"color\": \"#A86D3B\"\n },\n \"property\": {\n \"color\": \"#CACCCA\"\n },\n \"variable.special\": {\n \"color\": \"#E19773\"\n }\n }\n }\n }\n ]\n}" }, { "path": "themes/solarized.json", "content": "{\n \"$schema\": \"https://github.com/longbridge/gpui-component/raw/refs/heads/main/.theme-schema.json\",\n \"name\": \"Solarized\",\n \"author\": \"Ethan Schoonover\",\n \"url\": \"https://ethanschoonover.com/solarized\",\n \"themes\": [\n {\n \"name\": \"Solarized Light\",\n \"mode\": \"light\",\n \"colors\": {\n \"accent.background\": \"#ebe4ce\",\n \"accent.foreground\": \"#073642\",\n \"background\": \"#FDF6E3\",\n \"border\": \"#DCD4BC\",\n \"foreground\": \"#586E75\",\n \"input.border\": \"#DCD4BC\",\n \"link.foreground\": \"#587573\",\n \"list.active.background\": \"#586E75\",\n \"list.active.border\": \"#586E75\",\n \"list.even.background\": \"#EEE8D599\",\n \"muted.background\": \"#eee8d5\",\n \"muted.foreground\": \"#93a1a1\",\n \"panel.background\": \"#fdf6e3\",\n \"popover.background\": \"#fdf6e3\",\n \"popover.foreground\": \"#073642\",\n \"primary.background\": \"#586E75\",\n \"primary.foreground\": \"#fdf6e3\",\n \"scrollbar.background\": \"#EEE8D500\",\n \"scrollbar.thumb.background\": \"#d5cbaf\",\n \"secondary.background\": \"#EEE8D5\",\n \"secondary.active.background\": \"#DCD4BC\",\n \"secondary.foreground\": \"#073642\",\n \"secondary.hover.background\": \"#DCD4BC88\",\n \"tab.active.background\": \"#fdf6e3\",\n \"tab.active.foreground\": \"#073642\",\n \"tab.background\": \"#fdf6e300\",\n \"tab.foreground\": \"#657b83\",\n \"tab_bar.background\": \"#eee8d5\",\n \"title_bar.background\": \"#f4ecd7\",\n \"title_bar.border\": \"#dcd4bc\",\n \"chart.grid\": \"#ebe5d4\",\n \"base.red\": \"#755858\",\n \"base.green\": \"#717558\",\n \"base.yellow\": \"#756e58\",\n \"base.blue\": \"#586975\",\n \"base.magenta\": \"#755866\",\n \"base.cyan\": \"#587573\"\n },\n \"highlight\": {\n \"editor.foreground\": \"#586E75\",\n \"editor.background\": \"#FDF6E3\",\n \"editor.active_line.background\": \"#EEE8D5\",\n \"editor.line_number\": \"#93A1A1\",\n \"editor.active_line_number\": \"#073642\",\n \"editor.invisible\": \"#93A1A166\",\n \"conflict\": \"#DC322F\",\n \"created\": \"#859900\",\n \"deleted\": \"#DC322F\",\n \"error\": \"#DC322F\",\n \"hidden\": \"#93A1A1\",\n \"hint\": \"#2AA198\",\n \"ignored\": \"#93A1A1\",\n \"info\": \"#268BD2\",\n \"modified\": \"#B58900\",\n \"predictive\": \"#586E75\",\n \"renamed\": \"#2AA198\",\n \"success\": \"#859900\",\n \"unreachable\": \"#DC322F\",\n \"warning\": \"#B58900\",\n \"syntax\": {\n \"attribute\": {\n \"color\": \"#B58900\"\n },\n \"boolean\": {\n \"color\": \"#CB4B16\"\n },\n \"comment\": {\n \"color\": \"#93A1A1\",\n \"font_style\": \"italic\"\n },\n \"comment.doc\": {\n \"color\": \"#93A1A1\",\n \"font_style\": \"italic\"\n },\n \"constant\": {\n \"color\": \"#268BD2\"\n },\n \"constructor\": {\n \"color\": \"#859900\"\n },\n \"embedded\": {\n \"color\": \"#2AA198\"\n },\n \"function\": {\n \"color\": \"#268BD2\"\n },\n \"keyword\": {\n \"color\": \"#DC322F\"\n },\n \"link_text\": {\n \"color\": \"#268BD2\",\n \"font_style\": \"underline\"\n },\n \"link_uri\": {\n \"color\": \"#2AA198\",\n \"font_style\": \"italic\"\n },\n \"number\": {\n \"color\": \"#D33682\"\n },\n \"string\": {\n \"color\": \"#859900\"\n },\n \"string.escape\": {\n \"color\": \"#2AA198\"\n },\n \"string.regex\": {\n \"color\": \"#D33682\"\n },\n \"string.special\": {\n \"color\": \"#B58900\"\n },\n \"string.special.symbol\": {\n \"color\": \"#B58900\"\n },\n \"tag\": {\n \"color\": \"#268BD2\"\n },\n \"text.literal\": {\n \"color\": \"#586E75\"\n },\n \"title\": {\n \"color\": \"#073642\",\n \"font_weight\": 600\n },\n \"type\": {\n \"color\": \"#2AA198\"\n },\n \"property\": {\n \"color\": \"#586E75\"\n },\n \"variable.special\": {\n \"color\": \"#DC322F\"\n }\n }\n }\n },\n {\n \"name\": \"Solarized Dark\",\n \"author\": \"Ethan Schoonover\",\n \"url\": \"https://ethanschoonover.com/solarized\",\n \"mode\": \"dark\",\n \"colors\": {\n \"accent.background\": \"#073945\",\n \"accent.foreground\": \"#fdf6e3\",\n \"background\": \"#002B36\",\n \"border\": \"#103a44\",\n \"foreground\": \"#fdf6e3\",\n \"input.border\": \"#083e4c\",\n \"list.active.background\": \"#0d667d25\",\n \"list.active.border\": \"#0d667d\",\n \"list.even.background\": \"#15333A99\",\n \"muted.background\": \"#073642\",\n \"muted.foreground\": \"#839496\",\n \"panel.background\": \"#002b36\",\n \"popover.background\": \"#002b36\",\n \"popover.foreground\": \"#fdf6e3\",\n \"primary.background\": \"#0d667d\",\n \"primary.foreground\": \"#fdf6e3\",\n \"scrollbar.background\": \"#002b3600\",\n \"scrollbar.thumb.background\": \"#586e75\",\n \"secondary.background\": \"#073642\",\n \"secondary.active.background\": \"#083e4b\",\n \"secondary.foreground\": \"#fdf6e3\",\n \"secondary.hover.background\": \"#073945\",\n \"tab.active.background\": \"#002b36\",\n \"tab.active.foreground\": \"#fdf6e3\",\n \"tab.foreground\": \"#93a1a1\",\n \"tab_bar.background\": \"#07364266\",\n \"title_bar.background\": \"#09323d\",\n \"title_bar.border\": \"#16404b\",\n \"base.red\": \"#7d2f0d\",\n \"base.green\": \"#0d7d3f\",\n \"base.yellow\": \"#7d650d\",\n \"base.blue\": \"#0d507d\",\n \"base.magenta\": \"#7d0d43\",\n \"base.cyan\": \"#0d7d70\"\n },\n \"highlight\": {\n \"editor.foreground\": \"#DDDDDD\",\n \"editor.background\": \"#002B36\",\n \"editor.active_line.background\": \"#073642\",\n \"editor.line_number\": \"#8F8F8F\",\n \"editor.active_line_number\": \"#DDDDDD\",\n \"editor.invisible\": \"#93A1A166\",\n \"conflict\": \"#D2602D\",\n \"created\": \"#3f72e2\",\n \"created.background\": \"#0C4619\",\n \"deleted.background\": \"#46190C\",\n \"error.background\": \"#46190C\",\n \"error.border\": \"#802207\",\n \"hidden\": \"#9E9E9E\",\n \"hint\": \"#b283f8\",\n \"hint.background\": \"#250c4b\",\n \"hint.border\": \"#3f0891\",\n \"info.background\": \"#0C194D\",\n \"info.border\": \"#082190\",\n \"modified\": \"#B0A878\",\n \"modified.background\": \"#3A310E\",\n \"predictive\": \"#5D5945\",\n \"success.background\": \"#0C4619\",\n \"warning.background\": \"#3A310E\",\n \"warning.border\": \"#7B6508\",\n \"syntax\": {\n \"attribute\": {\n \"color\": \"#be9a52\"\n },\n \"boolean\": {\n \"color\": \"#E1D797\"\n },\n \"comment\": {\n \"color\": \"#9E9E9E\"\n },\n \"comment.doc\": {\n \"color\": \"#9E9E9E\"\n },\n \"constant\": {\n \"color\": \"#E1D797\"\n },\n \"constructor\": {\n \"color\": \"#b5af9a\"\n },\n \"embedded\": {\n \"color\": \"#CACCCA\"\n },\n \"function\": {\n \"color\": \"#E1D797\"\n },\n \"keyword\": {\n \"color\": \"#E19773\"\n },\n \"link_text\": {\n \"color\": \"#A86D3B\",\n \"font_style\": \"normal\"\n },\n \"link_uri\": {\n \"color\": \"#6F6D66\",\n \"font_style\": \"italic\"\n },\n \"number\": {\n \"color\": \"#E19773\"\n },\n \"string\": {\n \"color\": \"#76BA53\"\n },\n \"string.escape\": {\n \"color\": \"#76BA53\"\n },\n \"string.regex\": {\n \"color\": \"#76BA53\"\n },\n \"string.special\": {\n \"color\": \"#E1D797\"\n },\n \"string.special.symbol\": {\n \"color\": \"#E1D797\"\n },\n \"tag\": {\n \"color\": \"#b5af9a\"\n },\n \"text.literal\": {\n \"color\": \"#E1D797\"\n },\n \"title\": {\n \"color\": \"#A76D3B\",\n \"font_weight\": 600\n },\n \"type\": {\n \"color\": \"#A86D3B\"\n },\n \"property\": {\n \"color\": \"#CACCCA\"\n },\n \"variable.special\": {\n \"color\": \"#E19773\"\n }\n }\n }\n }\n ]\n}\n" }, { "path": "themes/spaceduck.json", "content": "{\n \"name\": \"Spaceduck\",\n \"author\": \"Guillermo Rodriguez\",\n \"url\": \"https://github.com/pineapplegiant/spaceduck\",\n \"$schema\": \"https://github.com/longbridge/gpui-component/raw/refs/heads/main/.theme-schema.json\",\n \"themes\": [\n {\n \"name\": \"Spaceduck\",\n \"mode\": \"dark\",\n \"colors\": {\n \"accent.background\": \"#212440\",\n \"accent.foreground\": \"#a3a49d\",\n \"background\": \"#0F111B\",\n \"border\": \"#272C42\",\n \"foreground\": \"#a3a49d\",\n \"input.border\": \"#272C42\",\n \"link.active.foreground\": \"#089CC5\",\n \"link.foreground\": \"#089CC5\",\n \"link.hover.foreground\": \"#089CC5\",\n \"list.active.background\": \"#089CC511\",\n \"list.active.border\": \"#089CC5\",\n \"list.even.background\": \"#161928\",\n \"muted.background\": \"#272C4255\",\n \"muted.foreground\": \"#4b6479\",\n \"panel.background\": \"#003a5b\",\n \"popover.background\": \"#0F111B\",\n \"popover.foreground\": \"#a3a49d\",\n \"primary.background\": \"#089CC5\",\n \"primary.foreground\": \"#ecf0c1\",\n \"scrollbar.background\": \"#003a5b00\",\n \"scrollbar.thumb.background\": \"#24303a\",\n \"secondary.background\": \"#242547\",\n \"secondary.active.background\": \"#292b51\",\n \"secondary.foreground\": \"#a3a49d\",\n \"secondary.hover.background\": \"#242547\",\n \"tab.active.background\": \"#0F111B\",\n \"tab.foreground\": \"#838182\",\n \"title_bar.background\": \"#141724\",\n \"title_bar.border\": \"#272C42\",\n \"base.red\": \"#e33400\",\n \"base.green\": \"#5ccc96\",\n \"base.blue\": \"#00a3cc\",\n \"base.cyan\": \"#089CC5\",\n \"base.magenta\": \"#C86D8C\",\n \"base.magenta.light\": \"#C86D8C33\",\n \"base.yellow\": \"#b89c00\"\n },\n \"highlight\": {\n \"editor.foreground\": \"#ecf0c1\",\n \"editor.background\": \"#0F111B\",\n \"editor.active_line.background\": \"#1c1d39\",\n \"editor.line_number\": \"#4b6479\",\n \"editor.active_line_number\": \"#ecf0c1\",\n \"editor.invisible\": \"#4b647966\",\n \"conflict\": \"#e33400\",\n \"created\": \"#5ccc96\",\n \"deleted\": \"#e33400\",\n \"error\": \"#e33400\",\n \"hidden\": \"#4b6479\",\n \"hint\": \"#C86D8C\",\n \"ignored\": \"#4b6479\",\n \"info\": \"#089CC5\",\n \"modified\": \"#f2ce00\",\n \"predictive\": \"#5D5945\",\n \"renamed\": \"#089CC5\",\n \"success\": \"#5ccc96\",\n \"unreachable\": \"#4b6479\",\n \"warning\": \"#f2ce00\",\n \"syntax\": {\n \"attribute\": {\n \"color\": \"#f2ce00\"\n },\n \"boolean\": {\n \"color\": \"#f2ce00\"\n },\n \"comment\": {\n \"color\": \"#4b6479\",\n \"font_style\": \"italic\"\n },\n \"comment.doc\": {\n \"color\": \"#4b6479\",\n \"font_style\": \"italic\"\n },\n \"constant\": {\n \"color\": \"#e33400\"\n },\n \"constructor\": {\n \"color\": \"#5ccc96\"\n },\n \"embedded\": {\n \"color\": \"#ecf0c1\"\n },\n \"function\": {\n \"color\": \"#089CC5\"\n },\n \"keyword\": {\n \"color\": \"#C86D8C\"\n },\n \"link_text\": {\n \"color\": \"#089CC5\",\n \"font_style\": \"underline\"\n },\n \"link_uri\": {\n \"color\": \"#089CC5\",\n \"font_style\": \"italic\"\n },\n \"number\": {\n \"color\": \"#f2ce00\"\n },\n \"string\": {\n \"color\": \"#5ccc96\"\n },\n \"string.escape\": {\n \"color\": \"#5ccc96\"\n },\n \"string.regex\": {\n \"color\": \"#5ccc96\"\n },\n \"string.special\": {\n \"color\": \"#f2ce00\"\n },\n \"string.special.symbol\": {\n \"color\": \"#f2ce00\"\n },\n \"tag\": {\n \"color\": \"#C86D8C\"\n },\n \"text.literal\": {\n \"color\": \"#ecf0c1\"\n },\n \"title\": {\n \"color\": \"#f2ce00\",\n \"font_weight\": 600\n },\n \"type\": {\n \"color\": \"#089CC5\"\n },\n \"property\": {\n \"color\": \"#ecf0c1\"\n },\n \"variable.special\": {\n \"color\": \"#C86D8C\"\n }\n }\n }\n }\n ]\n}\n" }, { "path": "themes/tokyonight.json", "content": "{\n \"name\": \"Tokyo\",\n \"author\": \"Folke Lemaitre\",\n \"url\": \"https://github.com/folke/tokyonight.nvim\",\n \"$schema\": \"https://github.com/longbridge/gpui-component/raw/refs/heads/main/.theme-schema.json\",\n \"themes\": [\n {\n \"name\": \"Tokyo Night\",\n \"mode\": \"dark\",\n \"colors\": {\n \"accent.background\": \"#2C3045\",\n \"accent.foreground\": \"#c0caf5\",\n \"background\": \"#1a1b26\",\n \"border\": \"#292e42\",\n \"window_border\": \"#3d4462\",\n \"ring\": \"#7aa2f7\",\n \"foreground\": \"#c0caf5\",\n \"link.active.foreground\": \"#7aa2f722\",\n \"link.foreground\": \"#7aa2f7\",\n \"link.hover.foreground\": \"#7aa2f7\",\n \"list.active.background\": \"#7aa2f722\",\n \"list.active.border\": \"#7aa2f7\",\n \"list.even.background\": \"#2C304599\",\n \"muted.background\": \"#2C304544\",\n \"muted.foreground\": \"#565f89\",\n \"panel.background\": \"#292e42\",\n \"popover.background\": \"#1a1b26\",\n \"popover.foreground\": \"#c0caf5\",\n \"primary.background\": \"#7aa2f7\",\n \"primary.foreground\": \"#1a1b26\",\n \"scrollbar.background\": \"#1a1b2600\",\n \"scrollbar.thumb.background\": \"#414868\",\n \"secondary.active.background\": \"#292e42\",\n \"secondary.background\": \"#292e42\",\n \"secondary.foreground\": \"#C0CAF5\",\n \"secondary.hover.background\": \"#2d3349\",\n \"title_bar.background\": \"#161720\",\n \"title_bar.border\": \"#292e42\",\n \"chart.grid\": \"#222332\",\n \"base.red\": \"#f7768e\",\n \"base.green\": \"#9ece6a\",\n \"base.yellow\": \"#e0af68\",\n \"base.blue\": \"#7aa2f7\",\n \"base.magenta\": \"#565f89\",\n \"base.cyan\": \"#7dcfff\"\n },\n \"highlight\": {\n \"editor.foreground\": \"#c0caf5\",\n \"editor.background\": \"#1a1b26\",\n \"editor.active_line.background\": \"#292e42\",\n \"editor.line_number\": \"#565f89\",\n \"editor.active_line_number\": \"#c0caf5\",\n \"editor.invisible\": \"#565f8966\",\n \"conflict\": \"#f7768e\",\n \"created\": \"#9ece6a\",\n \"deleted\": \"#f7768e\",\n \"error\": \"#f7768e\",\n \"hidden\": \"#565f89\",\n \"hint\": \"#7dcfff\",\n \"ignored\": \"#565f89\",\n \"info\": \"#7aa2f7\",\n \"modified\": \"#e0af68\",\n \"predictive\": \"#565f89\",\n \"renamed\": \"#7aa2f7\",\n \"success\": \"#9ece6a\",\n \"unreachable\": \"#565f89\",\n \"warning\": \"#e0af68\",\n \"syntax\": {\n \"attribute\": {\n \"color\": \"#e0af68\"\n },\n \"boolean\": {\n \"color\": \"#9ece6a\"\n },\n \"comment\": {\n \"color\": \"#565f89\",\n \"font_style\": \"italic\"\n },\n \"comment.doc\": {\n \"color\": \"#565f89\",\n \"font_style\": \"italic\"\n },\n \"constant\": {\n \"color\": \"#7aa2f7\"\n },\n \"constructor\": {\n \"color\": \"#e0af68\"\n },\n \"embedded\": {\n \"color\": \"#c0caf5\"\n },\n \"function\": {\n \"color\": \"#7aa2f7\"\n },\n \"keyword\": {\n \"color\": \"#f7768e\"\n },\n \"link_text\": {\n \"color\": \"#7dcfff\",\n \"font_style\": \"underline\"\n },\n \"link_uri\": {\n \"color\": \"#7aa2f7\",\n \"font_style\": \"italic\"\n },\n \"number\": {\n \"color\": \"#e0af68\"\n },\n \"string\": {\n \"color\": \"#9ece6a\"\n },\n \"string.escape\": {\n \"color\": \"#7dcfff\"\n },\n \"string.regex\": {\n \"color\": \"#9ece6a\"\n },\n \"string.special\": {\n \"color\": \"#e0af68\"\n },\n \"string.special.symbol\": {\n \"color\": \"#e0af68\"\n },\n \"tag\": {\n \"color\": \"#f7768e\"\n },\n \"text.literal\": {\n \"color\": \"#c0caf5\"\n },\n \"title\": {\n \"color\": \"#7aa2f7\",\n \"font_weight\": 600\n },\n \"type\": {\n \"color\": \"#7dcfff\"\n },\n \"property\": {\n \"color\": \"#c0caf5\"\n },\n \"variable.special\": {\n \"color\": \"#f7768e\"\n }\n }\n }\n },\n {\n \"name\": \"Tokyo Storm\",\n \"mode\": \"dark\",\n \"colors\": {\n \"accent.background\": \"#414868\",\n \"accent.foreground\": \"#c0caf5\",\n \"background\": \"#24283b\",\n \"border\": \"#3d4462\",\n \"window_border\": \"#3d4462\",\n \"ring\": \"#7aa2f7\",\n \"foreground\": \"#c0caf5\",\n \"input.border\": \"#414868\",\n \"link.active.foreground\": \"#7aa2f7\",\n \"link.foreground\": \"#7aa2f7\",\n \"link.hover.foreground\": \"#7aa2f7\",\n \"list.active.background\": \"#7aa2f711\",\n \"list.active.border\": \"#7aa2f7\",\n \"list.even.background\": \"#41486844\",\n \"muted.background\": \"#292e42\",\n \"muted.foreground\": \"#565f89\",\n \"panel.background\": \"#292e42\",\n \"popover.background\": \"#24283b\",\n \"popover.foreground\": \"#c0caf5\",\n \"primary.background\": \"#7aa2f7\",\n \"primary.foreground\": \"#24283b\",\n \"scrollbar.background\": \"#24283b00\",\n \"scrollbar.thumb.background\": \"#414868\",\n \"secondary.active.background\": \"#323750\",\n \"secondary.background\": \"#292e42\",\n \"secondary.foreground\": \"#c0caf5\",\n \"secondary.hover.background\": \"#32375099\",\n \"title_bar.background\": \"#202435\",\n \"title_bar.border\": \"#3d4462\",\n \"base.red\": \"#f7768e\",\n \"base.green\": \"#9ece6a\",\n \"base.yellow\": \"#e0af68\",\n \"base.blue\": \"#7aa2f7\",\n \"base.magenta\": \"#b283f8\",\n \"base.cyan\": \"#7dcfff\"\n },\n \"highlight\": {\n \"editor.foreground\": \"#B0B9E2\",\n \"editor.background\": \"#24283B\",\n \"editor.active_line.background\": \"#292E42\",\n \"editor.line_number\": \"#363C58\",\n \"editor.active_line_number\": \"#B0B9E2\",\n \"editor.invisible\": \"#565f8966\",\n \"conflict\": \"#D2602D\",\n \"created\": \"#3f72e2\",\n \"deleted\": \"#f7768e\",\n \"error\": \"#f7768e\",\n \"hidden\": \"#9E9E9E\",\n \"hint\": \"#b283f8\",\n \"modified\": \"#B0A878\",\n \"predictive\": \"#5D5945\",\n \"success\": \"#9ece6a\",\n \"warning\": \"#e0af68\",\n \"syntax\": {\n \"attribute\": {\n \"color\": \"#be9a52\"\n },\n \"boolean\": {\n \"color\": \"#E1D797\"\n },\n \"comment\": {\n \"color\": \"#9E9E9E\"\n },\n \"comment.doc\": {\n \"color\": \"#9E9E9E\"\n },\n \"constant\": {\n \"color\": \"#E1D797\"\n },\n \"constructor\": {\n \"color\": \"#b5af9a\"\n },\n \"embedded\": {\n \"color\": \"#CACCCA\"\n },\n \"function\": {\n \"color\": \"#E1D797\"\n },\n \"keyword\": {\n \"color\": \"#E19773\"\n },\n \"link_text\": {\n \"color\": \"#A86D3B\",\n \"font_style\": \"normal\"\n },\n \"link_uri\": {\n \"color\": \"#6F6D66\",\n \"font_style\": \"italic\"\n },\n \"number\": {\n \"color\": \"#E19773\"\n },\n \"string\": {\n \"color\": \"#76BA53\"\n },\n \"string.escape\": {\n \"color\": \"#76BA53\"\n },\n \"string.regex\": {\n \"color\": \"#76BA53\"\n },\n \"string.special\": {\n \"color\": \"#E1D797\"\n },\n \"string.special.symbol\": {\n \"color\": \"#E1D797\"\n },\n \"tag\": {\n \"color\": \"#b5af9a\"\n },\n \"text.literal\": {\n \"color\": \"#E1D797\"\n },\n \"title\": {\n \"color\": \"#A76D3B\",\n \"font_weight\": 600\n },\n \"type\": {\n \"color\": \"#A86D3B\"\n },\n \"property\": {\n \"color\": \"#CACCCA\"\n },\n \"variable.special\": {\n \"color\": \"#E19773\"\n }\n }\n }\n },\n {\n \"name\": \"Tokyo Moon\",\n \"mode\": \"dark\",\n \"colors\": {\n \"accent.background\": \"#32364E\",\n \"accent.foreground\": \"#c0caf5\",\n \"background\": \"#222436\",\n \"border\": \"#323752\",\n \"window_border\": \"#404668\",\n \"ring\": \"#82aaff\",\n \"foreground\": \"#c0caf5\",\n \"input.border\": \"#444b6a\",\n \"link.active.foreground\": \"#82aaff\",\n \"link.foreground\": \"#82aaff\",\n \"link.hover.foreground\": \"#82aaff\",\n \"list.active.background\": \"#82aaff22\",\n \"list.active.border\": \"#82aaff\",\n \"list.background\": \"#222436\",\n \"list.even.background\": \"#282a40\",\n \"muted.background\": \"#2d3149\",\n \"muted.foreground\": \"#6e738d\",\n \"panel.background\": \"#2d3149\",\n \"popover.background\": \"#222436\",\n \"popover.foreground\": \"#c0caf5\",\n \"primary.background\": \"#82aaff\",\n \"primary.foreground\": \"#222436\",\n \"scrollbar.background\": \"#22243600\",\n \"scrollbar.thumb.background\": \"#444b6a\",\n \"secondary.active.background\": \"#2f334c\",\n \"secondary.background\": \"#2d3149\",\n \"secondary.foreground\": \"#8c94b5\",\n \"secondary.hover.background\": \"#31354f\",\n \"table.row.border\": \"#2d3149\",\n \"title_bar.background\": \"#1e2030\",\n \"title_bar.border\": \"#323752\",\n \"base.red\": \"#ff757f\",\n \"base.green\": \"#c3e88d\",\n \"base.yellow\": \"#ffc777\",\n \"base.blue\": \"#82aaff\",\n \"base.magenta\": \"#6e738d\",\n \"base.cyan\": \"#86e1fc\"\n },\n \"highlight\": {\n \"editor.foreground\": \"#c0caf5\",\n \"editor.background\": \"#222436\",\n \"editor.active_line.background\": \"#2d3149\",\n \"editor.line_number\": \"#6e738d\",\n \"editor.active_line_number\": \"#c0caf5\",\n \"editor.invisible\": \"#565f8966\",\n \"conflict\": \"#ed8796\",\n \"created\": \"#c3e88d\",\n \"deleted\": \"#ed8796\",\n \"error\": \"#ed8796\",\n \"hidden\": \"#6e738d\",\n \"hint\": \"#86e1fc\",\n \"ignored\": \"#6e738d\",\n \"info\": \"#82aaff\",\n \"modified\": \"#ffc777\",\n \"predictive\": \"#6e738d\",\n \"renamed\": \"#82aaff\",\n \"success\": \"#c3e88d\",\n \"unreachable\": \"#6e738d\",\n \"warning\": \"#ffc777\",\n \"syntax\": {\n \"attribute\": {\n \"color\": \"#ffc777\"\n },\n \"boolean\": {\n \"color\": \"#c3e88d\"\n },\n \"comment\": {\n \"color\": \"#6e738d\",\n \"font_style\": \"italic\"\n },\n \"comment.doc\": {\n \"color\": \"#6e738d\",\n \"font_style\": \"italic\"\n },\n \"constant\": {\n \"color\": \"#82aaff\"\n },\n \"constructor\": {\n \"color\": \"#ffc777\"\n },\n \"embedded\": {\n \"color\": \"#c0caf5\"\n },\n \"function\": {\n \"color\": \"#82aaff\"\n },\n \"keyword\": {\n \"color\": \"#ed8796\"\n },\n \"link_text\": {\n \"color\": \"#86e1fc\",\n \"font_style\": \"underline\"\n },\n \"link_uri\": {\n \"color\": \"#82aaff\",\n \"font_style\": \"italic\"\n },\n \"number\": {\n \"color\": \"#ffc777\"\n },\n \"string\": {\n \"color\": \"#c3e88d\"\n },\n \"string.escape\": {\n \"color\": \"#86e1fc\"\n },\n \"string.regex\": {\n \"color\": \"#c3e88d\"\n },\n \"string.special\": {\n \"color\": \"#ffc777\"\n },\n \"string.special.symbol\": {\n \"color\": \"#ffc777\"\n },\n \"tag\": {\n \"color\": \"#ed8796\"\n },\n \"text.literal\": {\n \"color\": \"#c0caf5\"\n },\n \"title\": {\n \"color\": \"#82aaff\",\n \"font_weight\": 600\n },\n \"type\": {\n \"color\": \"#86e1fc\"\n },\n \"property\": {\n \"color\": \"#c0caf5\"\n },\n \"variable.special\": {\n \"color\": \"#ed8796\"\n }\n }\n }\n }\n ]\n}\n" }, { "path": "themes/twilight.json", "content": "{\n \"$schema\": \"https://github.com/longbridge/gpui-component/raw/refs/heads/main/.theme-schema.json\",\n \"name\": \"Twilight\",\n \"author\": \"MacroMates\",\n \"url\": \"https://macromates.com\",\n \"themes\": [\n {\n \"name\": \"Twilight\",\n \"mode\": \"dark\",\n \"colors\": {\n \"accent.background\": \"#2b2b2b\",\n \"accent.foreground\": \"#dcdcdc\",\n \"background\": \"#141414\",\n \"border\": \"#343434\",\n \"foreground\": \"#dcdcdc\",\n \"input.border\": \"#3e3e3e\",\n \"list.active.background\": \"#CDA86911\",\n \"list.active.border\": \"#CDA86988\",\n \"list.even.background\": \"#1E1E1E99\",\n \"muted.background\": \"#2e2e2e88\",\n \"muted.foreground\": \"#828282\",\n \"primary.background\": \"#CDA869\",\n \"primary.foreground\": \"#1e1e1e\",\n \"scrollbar.background\": \"#1e1e1e00\",\n \"scrollbar.thumb.background\": \"#3e3e3e\",\n \"secondary.background\": \"#262626\",\n \"secondary.active.background\": \"#2a2a2a\",\n \"secondary.foreground\": \"#dcdcdc\",\n \"secondary.hover.background\": \"#272727\",\n \"tab.active.background\": \"#141414\",\n \"tab.active.foreground\": \"#dcdcdc\",\n \"tab.background\": \"#1E1E1E00\",\n \"tab.foreground\": \"#A9A9A9\",\n \"tab_bar.background\": \"#1E1E1E\",\n \"table.background\": \"#1e1e1e00\",\n \"title_bar.background\": \"#1e1e1e\",\n \"title_bar.border\": \"#343434\",\n \"base.red\": \"#c06d44\",\n \"base.red.light\": \"#de7c4c\",\n \"base.green\": \"#afb97a\",\n \"base.green.light\": \"#ccd88c\",\n \"base.yellow\": \"#c2a86c\",\n \"base.yellow.light\": \"#e2c47e\",\n \"base.blue\": \"#44474a\",\n \"base.blue.light\": \"#5a5e62\",\n \"base.magenta\": \"#b4be7c\",\n \"base.magenta.light\": \"#d0dc8e99\",\n \"base.cyan\": \"#778385\",\n \"base.cyan.light\": \"#8a989b\"\n },\n \"highlight\": {\n \"editor.foreground\": \"#DDDDDD\",\n \"editor.background\": \"#000000\",\n \"editor.active_line.background\": \"#131313\",\n \"editor.line_number\": \"#8F8F8F\",\n \"editor.active_line_number\": \"#DDDDDD\",\n \"editor.invisible\": \"#9E9E9E66\",\n \"conflict\": \"#D2602D\",\n \"created\": \"#3f72e2\",\n \"hidden\": \"#9E9E9E\",\n \"hint\": \"#b283f8\",\n \"modified\": \"#B0A878\",\n \"predictive\": \"#5D5945\",\n \"syntax\": {\n \"attribute\": {\n \"color\": \"#be9a52\"\n },\n \"boolean\": {\n \"color\": \"#E1D797\"\n },\n \"comment\": {\n \"color\": \"#9E9E9E\"\n },\n \"comment.doc\": {\n \"color\": \"#9E9E9E\"\n },\n \"constant\": {\n \"color\": \"#E1D797\"\n },\n \"constructor\": {\n \"color\": \"#b5af9a\"\n },\n \"embedded\": {\n \"color\": \"#CACCCA\"\n },\n \"function\": {\n \"color\": \"#E1D797\"\n },\n \"keyword\": {\n \"color\": \"#E19773\"\n },\n \"link_text\": {\n \"color\": \"#A86D3B\",\n \"font_style\": \"normal\"\n },\n \"link_uri\": {\n \"color\": \"#6F6D66\",\n \"font_style\": \"italic\"\n },\n \"number\": {\n \"color\": \"#E19773\"\n },\n \"string\": {\n \"color\": \"#76BA53\"\n },\n \"string.escape\": {\n \"color\": \"#76BA53\"\n },\n \"string.regex\": {\n \"color\": \"#76BA53\"\n },\n \"string.special\": {\n \"color\": \"#E1D797\"\n },\n \"string.special.symbol\": {\n \"color\": \"#E1D797\"\n },\n \"tag\": {\n \"color\": \"#b5af9a\"\n },\n \"text.literal\": {\n \"color\": \"#E1D797\"\n },\n \"title\": {\n \"color\": \"#A76D3B\",\n \"font_weight\": 600\n },\n \"type\": {\n \"color\": \"#A86D3B\"\n },\n \"property\": {\n \"color\": \"#CACCCA\"\n },\n \"variable.special\": {\n \"color\": \"#E19773\"\n }\n }\n }\n }\n ]\n}\n" } ]