Ely

https://elygpui.com/docs
Admin
Ely is a component library for GPUI, the Rust UI framework behind Zed, providing accessible, themed...
Tokens:23,629
Snippets:179
Trust Score:3.2
Update:3 days ago
Show doc for...
Tokens:
Raw
### Run the example application

Source: https://elygpui.com/docs/gpui-kit

Command to run the example application that demonstrates Ely and Kit integration.

```bash
cargo run --manifest-path compat/kit/Cargo.toml --example start
```

--------------------------------

### Create a theme-aware window in Ely

Source: https://elygpui.com/docs/getting-started

This example demonstrates a complete Ely application setup, including asset registration, theme initialization, and a window that supports toggling between light and dark modes.

```rust
use ely_gpui_component::(
    Assets,
    buttons::Button,
    primitives::FocusScope,
    theme::{ActiveTheme, Mode, Theme},
    typography::{Heading, Paragraph},
);
use gpui::(
    App, AppContext, Bounds, Context, FocusHandle, IntoElement, ParentElement, Render, Styled,
    TitlebarOptions, Window, WindowBounds, WindowOptions, px, size,
);

struct Start {
    focus: FocusHandle,
}

impl Render for Start {
    fn render(&mut self, _: &mut Window, cx: &mut Context<Self>) -> impl IntoElement {
        let theme = cx.theme();
        let next = if theme.is_dark() {
            Mode::Light
        } else {
            Mode::Dark
        };
        FocusScope::new(&self.focus)
            .root()
            .size_full()
            .flex()
            .flex_col()
            .gap_4()
            .p_8()
            .bg(theme.colors.bg)
            .child(Heading::h1("Start"))
            .child(Paragraph::new(
                "Every Ely component reads the theme, so one call turns them all.",
            ))
            .child(
                Button::new("mode", format!("{next:?} mode"))
                    .on_click(move |_, _, cx| Theme::set_mode(next, cx)),
            )
    }
}

fn main() {
    gpui_platform::application()
        .with_assets(Assets)
        .run(|cx: &mut App| {
            ely_gpui_component::init(cx).expect("Ely failed to start");
            Theme::set_mode_now(Mode::Dark, cx);
            let bounds = Bounds::centered(None, size(px(640.0), px(400.0)), cx);
            let options = WindowOptions {
                window_bounds: Some(WindowBounds::Windowed(bounds)),
                titlebar: Some(TitlebarOptions {
                    title: Some("Start".into()),
                    ..Default::default()
                }),
                ..Default::default()
            };
            cx.open_window(options, |window, cx| {
                cx.new(|cx| {
                    let focus = cx.focus_handle();
                    window.focus(&focus, cx);
                    Start { focus }
                })
            })
            .expect("window failed to open");
            cx.activate(true);
        });
}
```

--------------------------------

### First window example: docs_hello.rs

Source: https://elygpui.com/docs

Runs with `cargo run --example docs_hello` from a repository clone. Opens a window with a counter and a Button, using FocusScope for keyboard navigation.

```Rust
use ely_gpui_component::{Assets, buttons::Button, primitives::FocusScope, theme::ActiveTheme};
use gpui::{
    App, AppContext, Context, FocusHandle, IntoElement, ParentElement, Render, Styled, Window,
    WindowOptions,
};

struct Hello {
    focus: FocusHandle,
    presses: usize,
}

impl Render for Hello {
    fn render(&mut self, _: &mut Window, cx: &mut Context<Self>) -> impl IntoElement {
        let colors = &cx.theme().colors;
        let this = cx.entity();
        FocusScope::new(&self.focus)
            .root()
            .size_full()
            .flex()
            .flex_col()
            .items_center()
            .justify_center()
            .gap_4()
            .bg(colors.bg)
            .text_color(colors.fg)
            .child(format!("Pressed {} times", self.presses))
            .child(
                Button::new("press", "Press")
                    .primary()
                    .on_click(move |_, _, cx| {
                        this.update(cx, |hello, cx| {
                            hello.presses += 1;
                            cx.notify();
                        });
                    }),
            )
    }
}

fn main() {
    gpui_platform::application()
        .with_assets(Assets)
        .run(|cx: &mut App| {
            ely_gpui_component::init(cx).expect("Ely failed to start");
            cx.open_window(WindowOptions::default(), |window, cx| {
                cx.new(|cx| {
                    let focus = cx.focus_handle();
                    window.focus(&focus, cx);
                    Hello { focus, presses: 0 }
                })
            })
            .expect("window failed to open");
            cx.activate(true);
        });
}
```

--------------------------------

### Motion example imports and struct definition

Source: https://elygpui.com/docs/motion

Initial setup for the motion example, including imports from ely_gpui_component and gpui, and the definition of the Moves struct.

```rust
use ely_gpui_component::{
    Assets,
    buttons::Button,
    motion::{self, Entrance, Flash, Spinner, Transition},
    primitives::FocusScope,
    theme::{ActiveTheme, Radius, Theme},
};
use gpui::{
    Animation, AnimationExt, App, AppContext, Context, FocusHandle, IntoElement, ParentElement,
    Render, Styled, Window, WindowOptions, div,
};

struct Moves {
    focus: FocusHandle,
    shown: bool,
    count: usize,
}
```

--------------------------------

### Example: A window with a surface

Source: https://elygpui.com/docs/rendering

Complete example from the documentation showing how to create a window with a RenderSurface that draws stripes and adds two more stripes each time a button is pressed.

```APIDOC
## Example: A window with a surface

### Description
This example demonstrates how to use RenderSurface in a GPUI application. It draws vertical stripes across the surface and adds two more stripes each time the button is pressed.

### Code
```rust
use ely_gpui_component::{
    Assets, buttons::Button, primitives::FocusScope, rendering::RenderSurface, theme::ActiveTheme,
};
use gpui::{
    App, AppContext, Context, DevicePixels, FocusHandle, IntoElement, ParentElement, Render,
    RenderImage, Size, Styled, Window, WindowOptions,
};
use image::{Frame, RgbaImage};

struct Stripes {
    focus: FocusHandle,
    count: u32,
}

/// `count` vertical stripes across `size`, in BGRA as gpui holds frames.
fn stripes(size: Size<DevicePixels>, count: u32) -> RenderImage {
    let (width, height) = (size.width.0 as u32, size.height.0 as u32);
    let pixels = RgbaImage::from_fn(width, height, |x, _| {
        let lit = (x * count / width).is_multiple_of(2);
        let shade = if lit { 220 } else { 40 };
        image::Rgba([shade, shade, shade, 255])
    });
    RenderImage::new(vec![Frame::new(pixels)])
}

impl Render for Stripes {
    fn render(&mut self, _: &mut Window, cx: &mut Context<Self>) -> impl IntoElement {
        let colors = &cx.theme().colors;
        let count = self.count;
        let this = cx.entity();
        FocusScope::new(&self.focus)
            .root()
            .size_full()
            .flex()
            .flex_col()
            .gap_4()
            .p_6()
            .bg(colors.bg)
            .text_color(colors.fg)
            .child(
                RenderSurface::new("stripes", 2.0, move |size, _| stripes(size, count))
                    .revision(u64::from(count)),
            )
            .child(
                Button::new("more", "More stripes").on_click(move |_, _, cx| {
                    this.update(cx, |stripes, cx| {
                        stripes.count += 2;
                        cx.notify();
                    });
                }),
            )
    }
}

fn main() {
    gpui_platform::application()
        .with_assets(Assets)
        .run(|cx: &mut App| {
            ely_gpui_component::init(cx).expect("Ely failed to start");
            cx.open_window(WindowOptions::default(), |window, cx| {
                cx.new(|cx| {
                    let focus = cx.focus_handle();
                    window.focus(&focus, cx);
                    Stripes { focus, count: 8 }
                })
            })
            .expect("window failed to open");
            cx.activate(true);
        });
}
```
```

--------------------------------

### Run the application

Source: https://elygpui.com/docs/installation

Execute the application using cargo run to verify the installation.

```sh
cargo run
```

--------------------------------

### Initialize GPUI Kit and Ely components

Source: https://elygpui.com/docs/gpui-kit

Initialization steps for the application, including asset configuration, library initialization, window opening, and focus scope setup.

```rust
gpui_kit::application().with_assets(Assets::before(gpui_kit::assets::Assets))
```

```rust
gpui_kit::init(cx) and ely_gpui_component::init(cx)?
```

```rust
gpui_kit::open_window(options, cx, build)
```

```rust
FocusScope::new(&handle).root() around the view, handle focused
```

--------------------------------

### Bilingual i18n example with locale switching (examples/docs/i18n.rs)

Source: https://elygpui.com/docs/i18n

Complete runnable example that greets in English and Hebrew, formats a count by locale, mirrors the row direction, and switches locale with a button. Run with: cargo run --example docs_i18n. It sets up two catalogs (en-US and he-IL) and uses I18n::set_locale on button click.

```rust
use ely_gpui_component::{
    Assets,
    buttons::Button,
    i18n::{Direction, I18n},
    primitives::FocusScope,
    theme::ActiveTheme,
};
use gpui::{
    App, AppContext, Context, FocusHandle, IntoElement, ParentElement, Render, Styled, Window,
    WindowOptions, div,
};

struct Words {
    focus: FocusHandle,
}

impl Render for Words {
    fn render(&mut self, _: &mut Window, cx: &mut Context<Self>) -> impl IntoElement {
        let theme = cx.theme();
        let i18n = cx.global::<I18n>();
        let locale = i18n.locale();
        let greeting = i18n.text("greeting", &[("name", "Ada")]);
        let files = i18n.text("files", &[("count", &locale.number(1234.0, 0))]);
        let next = if locale.direction == Direction::Rtl {
            "en-US"
        } else {
            "he-IL"
        };
        let row = locale
            .direction
            .row(div())
            .gap_4()
            .child(greeting)
            .child(files);
        FocusScope::new(&self.focus)
            .root()
            .size_full()
            .flex()
            .flex_col()
            .gap_4()
            .p_8()
            .bg(theme.colors.bg)
            .text_color(theme.colors.fg)
            .child(row)
            .child(
                Button::new("locale", i18n.text("switch", &[]))
                    .on_click(move |_, _, cx| I18n::set_locale(next, cx)),
            )
    }
}

fn main() {
    gpui_platform::application()
        .with_assets(Assets)
        .run(|cx: &mut App| {
            ely_gpui_component::init(cx).expect("Ely failed to start");
            cx.set_global(
                I18n::new("en-US")
                    .catalog(
                        "en-US",
                        &[
                            ("greeting", "Hello, {name}"),
                            ("files", "{count} files"),
                            ("switch", "עברית"),
                        ],
                    )
                    .catalog(
                        "he-IL",
                        &[
                            ("greeting", "שלום, {name}"),
                            ("files", "{count} קבצים"),
                            ("switch", "English"),
                        ],
                    ),
            );
            cx.open_window(WindowOptions::default(), |window, cx| {
                cx.new(|cx| {
                    let focus = cx.focus_handle();
                    window.focus(&focus, cx);
                    Words { focus }
                })
            })
            .expect("window failed to open");
            cx.activate(true);
        });
}

```

--------------------------------

### Install Ely inspector

Source: https://elygpui.com/docs/gpui-kit

Install the Ely inspector after the Kit inspector has been initialized in debug builds.

```rust
ely_gpui_component::tooling::install_inspector(cx)
```

--------------------------------

### Implement a focusable panel with tab stops

Source: https://elygpui.com/docs/focus

This example demonstrates creating a panel with a custom focusable tile and buttons. It uses FocusScope::new to manage the root focus and applies focus_ring and track_focus to make the tile a tab stop.

```rust
use ely_gpui_component::{
    Assets,
    buttons::Button,
    primitives::{FocusRing, FocusScope},
    theme::{ActiveTheme, Radius},
};
use gpui::{
    App, AppContext, Context, FocusHandle, InteractiveElement, IntoElement, ParentElement, Render,
    StatefulInteractiveElement, Styled, Window, WindowOptions, div, transparent_black,
};

struct Panel {
    root: FocusHandle,
    tile: FocusHandle,
    on: bool,
}

impl Render for Panel {
    fn render(&mut self, _: &mut Window, cx: &mut Context<Self>) -> impl IntoElement {
        let theme = cx.theme();
        let this = cx.entity();
        let tile = div()
            .id("tile")
            .track_focus(&self.tile)
            .p_4()
            .border_1()
            .border_color(transparent_black())
            .rounded(theme.radius(Radius::Md))
            .bg(theme.colors.surface)
            .focus_ring(cx)
            .child(if self.on { "On" } else { "Off" })
            .on_click(move |_, _, cx| {
                this.update(cx, |panel, cx| {
                    panel.on = !panel.on;
                    cx.notify();
                })
            });
        FocusScope::new(&self.root)
            .root()
            .size_full()
            .flex()
            .flex_col()
            .gap_4()
            .p_8()
            .bg(theme.colors.bg)
            .text_color(theme.colors.fg)
            .child(Button::new("first", "First"))
            .child(tile)
            .child(Button::new("last", "Last"))
    }
}

fn main() {
    gpui_platform::application()
        .with_assets(Assets)
        .run(|cx: &mut App| {
            ely_gpui_component::init(cx).expect("Ely failed to start");
            cx.open_window(WindowOptions::default(), |window, cx| {
                cx.new(|cx| {
                    let root = cx.focus_handle();
                    window.focus(&root, cx);
                    Panel {
                        root,
                        tile: cx.focus_handle().tab_stop(true),
                        on: false,
                    }
                })
            })
            .expect("window failed to open");
            cx.activate(true);
        });
}
```

--------------------------------

### Render a surface with stripes

Source: https://elygpui.com/docs/rendering

This example demonstrates how to implement a RenderSurface that draws vertical stripes, updating the count of stripes via a button click.

```rust
use ely_gpui_component::{
    Assets, buttons::Button, primitives::FocusScope, rendering::RenderSurface, theme::ActiveTheme,
};
use gpui::{
    App, AppContext, Context, DevicePixels, FocusHandle, IntoElement, ParentElement, Render,
    RenderImage, Size, Styled, Window, WindowOptions,
};
use image::{Frame, RgbaImage};

struct Stripes {
    focus: FocusHandle,
    count: u32,
}

/// `count` vertical stripes across `size`, in BGRA as gpui holds frames.
fn stripes(size: Size<DevicePixels>, count: u32) -> RenderImage {
    let (width, height) = (size.width.0 as u32, size.height.0 as u32);
    let pixels = RgbaImage::from_fn(width, height, |x, _| {
        let lit = (x * count / width).is_multiple_of(2);
        let shade = if lit { 220 } else { 40 };
        image::Rgba([shade, shade, shade, 255])
    });
    RenderImage::new(vec![Frame::new(pixels)])
}

impl Render for Stripes {
    fn render(&mut self, _: &mut Window, cx: &mut Context<Self>) -> impl IntoElement {
        let colors = &cx.theme().colors;
        let count = self.count;
        let this = cx.entity();
        FocusScope::new(&self.focus)
            .root()
            .size_full()
            .flex()
            .flex_col()
            .gap_4()
            .p_6()
            .bg(colors.bg)
            .text_color(colors.fg)
            .child(
                RenderSurface::new("stripes", 2.0, move |size, _| stripes(size, count))
                    .revision(u64::from(count)),
            )
            .child(
                Button::new("more", "More stripes").on_click(move |_, _, cx| {
                    this.update(cx, |stripes, cx| {
                        stripes.count += 2;
                        cx.notify();
                    });
                }),
            )
    }
}

fn main() {
    gpui_platform::application()
        .with_assets(Assets)
        .run(|cx: &mut App| {
            ely_gpui_component::init(cx).expect("Ely failed to start");
            cx.open_window(WindowOptions::default(), |window, cx| {
                cx.new(|cx| {
                    let focus = cx.focus_handle();
                    window.focus(&focus, cx);
                    Stripes { focus, count: 8 }
                })
            })
            .expect("window failed to open");
            cx.activate(true);
        });
}
```

--------------------------------

### Implement popovers, dialogs, and toasts in Rust

Source: https://elygpui.com/docs/overlays

This example demonstrates a component that manages a popover for details, a confirmation dialog for deletion, and a toaster to display success notifications.

```rust
use ely_gpui_component::{
    Assets,
    buttons::Button,
    feedback::{Toast, ToastViewport, Toaster},
    overlays::{Dialog, Popover},
    primitives::{FocusScope, Severity},
    theme::ActiveTheme,
};
use gpui::{
    App, AppContext, Context, Entity, FocusHandle, IntoElement, ParentElement, Render, Styled,
    Window, WindowOptions, div,
};

struct Layers {
    focus: FocusHandle,
    toaster: Entity<Toaster>,
    open: bool,
}

impl Render for Layers {
    fn render(&mut self, _: &mut Window, cx: &mut Context<Self>) -> impl IntoElement {
        let theme = cx.theme();
        let (opener, closer) = (cx.entity(), cx.entity());
        let toaster = self.toaster.clone();
        let dialog = self.open.then(|| {
            Dialog::new("delete", "Delete notes.txt?", move |_, cx| {
                closer.update(cx, |layers, cx| {
                    layers.open = false;
                    cx.notify();
                })
            })
            .detail("It leaves the trash after 30 days.")
            .action(|close| {
                Button::new("cancel", "Cancel").on_click(move |_, window, cx| close(window, cx))
            })
            .action(move |close| {
                Button::new("confirm", "Delete")
                    .primary()
                    .on_click(move |_, window, cx| {
                        close(window, cx);
                        toaster.update(cx, |toaster, cx| {
                            toaster.push(Toast::new("Deleted").severity(Severity::Success), cx);
                        });
                    })
            })
        });
        FocusScope::new(&self.focus)
            .root()
            .size_full()
            .flex()
            .flex_col()
            .gap_4()
            .p_8()
            .bg(theme.colors.bg)
            .text_color(theme.colors.fg)
            .child(
                div()
                    .flex()
                    .gap_2()
                    .child(Popover::new("details", "Details", |_, _| {
                        div().p_3().child("Size 4 KB · Edited today")
                    }))
                    .child(
                        Button::new("delete-open", "Delete…").on_click(move |_, _, cx| {
                            opener.update(cx, |layers, cx| {
                                layers.open = true;
                                cx.notify();
                            })
                        }),
                    ),
            )
            .children(dialog)
            .child(ToastViewport::new("toasts", &self.toaster))
    }
}

fn main() {
    gpui_platform::application()
        .with_assets(Assets)
        .run(|cx: &mut App| {
            ely_gpui_component::init(cx).expect("Ely failed to start");
            cx.open_window(WindowOptions::default(), |window, cx| {
                cx.new(|cx| {
                    let focus = cx.focus_handle();
                    window.focus(&focus, cx);
                    Layers {
                        focus,
                        toaster: cx.new(|_| Toaster::default()),
                        open: false,
                    }
                })
            })
            .expect("window failed to open");
            cx.activate(true);
        });
}
```

--------------------------------

### Implement a theme-aware card component

Source: https://elygpui.com/docs/theme

This example demonstrates a component that uses theme tokens for colors, radius, shadow, and density, while providing controls to toggle theme settings like mode, contrast, density, and accent color.

```rust
use ely_gpui_component::{
    Assets,
    buttons::Button,
    primitives::FocusScope,
    theme::{ActiveTheme, Density, Elevation, Mode, Radius, TextSize, Theme},
    typography::Paragraph,
};
use gpui::{
    App, AppContext, Context, FocusHandle, IntoElement, ParentElement, Render, Styled, Window,
    WindowOptions, div, rgb,
};

struct Tokens {
    focus: FocusHandle,
}

impl Render for Tokens {
    fn render(&mut self, _: &mut Window, cx: &mut Context<Self>) -> impl IntoElement {
        let theme = cx.theme();
        let dark = theme.is_dark();
        let contrast = theme.high_contrast();
        let compact = theme.density == Density::Compact;
        let card = div()
            .flex()
            .flex_col()
            .gap_2()
            .p_4()
            .bg(theme.colors.surface)
            .border_1()
            .border_color(theme.colors.border)
            .rounded(theme.radius(Radius::Lg))
            .shadow(theme.elevation(Elevation::Floating))
            .text_size(theme.text_size(TextSize::Lg))
            .text_color(theme.colors.fg)
            .child("A card made of tokens")
            .child(Paragraph::new(
                "Its colors, radius, shadow and text size come from the theme.",
            ));
        let controls = div()
            .flex()
            .flex_wrap()
            .gap_2()
            .child(
                Button::new("mode", if dark { "Light mode" } else { "Dark mode" }).on_click(
                    move |_, _, cx| {
                        Theme::set_mode(if dark { Mode::Light } else { Mode::Dark }, cx)
                    },
                ),
            )
            .child(
                Button::new(
                    "contrast",
                    if contrast {
                        "Usual contrast"
                    } else {
                        "High contrast"
                    },
                )
                .on_click(move |_, _, cx| Theme::set_high_contrast(!contrast, cx)),
            )
            .child(
                Button::new(
                    "density",
                    if compact {
                        "Standard density"
                    } else {
                        "Compact"
                    },
                )
                .on_click(move |_, _, cx| {
                    Theme::update(cx, |theme| {
                        theme.density = if compact {
                            Density::Standard
                        } else {
                            Density::Compact
                        };
                    })
                }),
            )
            .child(Button::new("accent", "Green accent").on_click(|_, _, cx| {
                let mode = cx.theme().mode();
                let mut palette = cx.theme().palette();
                *palette.token_mut("accent") = rgb(0x2f7d4f).into();
                Theme::set_palette(mode, Some(palette), cx);
            }));
        FocusScope::new(&self.focus)
            .root()
            .size_full()
            .flex()
            .flex_col()
            .gap_6()
            .p_8()
            .bg(theme.colors.bg)
            .child(card)
            .child(controls)
    }
}

fn main() {
    gpui_platform::application()
        .with_assets(Assets)
        .run(|cx: &mut App| {
            ely_gpui_component::init(cx).expect("Ely failed to start");
            cx.open_window(WindowOptions::default(), |window, cx| {
                cx.new(|cx| {
                    let focus = cx.focus_handle();
                    window.focus(&focus, cx);
                    Tokens { focus }
                })
            })
            .expect("window failed to open");
            cx.activate(true);
        });
}
```

--------------------------------

### Render icons and custom assets in a window

Source: https://elygpui.com/docs/icons

This example demonstrates implementing a custom AssetSource to load a local SVG file and rendering various icons using Icon and FileIcon components within an Ely GPUI application.

```rust
use std::{borrow::Cow, f32::consts::FRAC_PI_4};

use ely_gpui_component::{
    Assets,
    files::FileIcon,
    primitives::{FocusScope, Icon, IconName, IconTheme},
    theme::{ActiveTheme, IconSize},
};
use gpui::{
    App, AppContext, AssetSource, Context, FocusHandle, IntoElement, ParentElement, Radians,
    Render, SharedString, Styled, Window, WindowOptions, div,
};

const CUSTOM_ICON: &str = "app-icons/mark.svg";

struct AppAssets;

impl AssetSource for AppAssets {
    fn load(&self, path: &str) -> gpui::Result<Option<Cow<'static, [u8]>>> {
        if path == CUSTOM_ICON {
            return Ok(Some(Cow::Borrowed(include_bytes!("../assets/mark.svg"))));
        }
        Assets.load(path)
    }

    fn list(&self, path: &str) -> gpui::Result<Vec<SharedString>> {
        let mut assets = Assets.list(path)?;
        if CUSTOM_ICON.starts_with(path) {
            assets.push(CUSTOM_ICON.into());
        }
        Ok(assets)
    }
}

struct Icons {
    focus: FocusHandle,
}

impl Render for Icons {
    fn render(&mut self, _: &mut Window, cx: &mut Context<Self>) -> impl IntoElement {
        let theme = cx.theme();
        let file = |name: &'static str| {
            div()
                .flex()
                .items_center()
                .gap_2()
                .child(FileIcon::file(name))
                .child(name)
        };
        FocusScope::new(&self.focus)
            .root()
            .size_full()
            .flex()
            .flex_col()
            .gap_6()
            .p_8()
            .bg(theme.colors.bg)
            .text_color(theme.colors.fg)
            .child(
                div()
                    .flex()
                    .items_center()
                    .gap_4()
                    .child(Icon::new(IconName::Check))
                    .child(Icon::new(IconName::Rocket).size(IconSize::Xl))
                    .child(Icon::new(IconName::CircleCheck).color(theme.colors.success))
                    .child(Icon::new(IconName::Package).rotate(Radians(FRAC_PI_4)))
                    .child(
                        Icon::from_path(CUSTOM_ICON)
                            .size(IconSize::Xl)
                            .color(theme.colors.accent),
                    ),
            )
            .child(
                div()
                    .flex()
                    .flex_col()
                    .gap_2()
                    .child(file("main.rs"))
                    .child(file("Cargo.toml"))
                    .child(file("notes.txt")),
            )
    }
}

fn main() {
    gpui_platform::application()
        .with_assets(AppAssets)
        .run(|cx: &mut App| {
            ely_gpui_component::init(cx).expect("Ely failed to start");
            IconTheme::default()
                .name("Cargo.toml", IconName::Package)
                .apply(cx);
            cx.open_window(WindowOptions::default(), |window, cx| {
                cx.new(|cx| {
                    let focus = cx.focus_handle();
                    window.focus(&focus, cx);
                    Icons { focus }
                })
            })
            .expect("window failed to open");
            cx.activate(true);
        });
}
```

--------------------------------

### Initialize GPUI application

Source: https://elygpui.com/docs/motion

The main function initializes the GPUI application, sets up assets, and opens the initial window with the Moves component.

```rust
fn main() {
    gpui_platform::application()
        .with_assets(Assets)
        .run(|cx: &mut App| {
            ely_gpui_component::init(cx).expect("Ely failed to start");
            cx.open_window(WindowOptions::default(), |window, cx| {
                cx.new(|cx| {
                    let focus = cx.focus_handle();
                    window.focus(&focus, cx);
                    Moves {
                        focus,
                        shown: true,
                        count: 0,
                    }
                })
            })
            .expect("window failed to open");
            cx.activate(true);
        });
}
```

--------------------------------

### IconTheme::default().apply(cx)

Source: https://elygpui.com/docs/icons

Applies the icon theme to every window from then on and repaints.

```APIDOC
## IconTheme::default().apply(cx)

### Description
Applies the icon theme to every window from then on and repaints.

### Method
Method

### Parameters
- **cx** (context) - Required - The application context.
```

--------------------------------

### Check the WebAssembly build with rustup and cargo check

Source: https://elygpui.com/docs/webassembly

Adds the wasm32-unknown-unknown target and runs cargo check with RUSTC_BOOTSTRAP=1 because gpui_web uses an unstable feature for its threads.

```sh
rustup target add wasm32-unknown-unknown
RUSTC_BOOTSTRAP=1 cargo check --lib --target wasm32-unknown-unknown
```

--------------------------------

### Add an icon with scripts/icons.sh

Source: https://elygpui.com/docs/icons

Run from a clone of the repository to fetch Lucide 1.48.0 with npm and copy each SVG into assets/icons/. Then add a line to the icons! list in src/primitives/icon.rs.

```shell
scripts/icons.sh <lucide-name>...
```

--------------------------------

### cx.theme()

Source: https://elygpui.com/docs/theme

Reads the current global theme. Returns a Theme reference with properties for colors, sizes, radii, elevations, and mode settings.

```APIDOC
## cx.theme()

### Description
Reads the current global theme. Returns a Theme reference with properties for colors, sizes, radii, elevations, and mode settings.

### Method
Read

### Endpoint
cx.theme()

### Parameters
None

### Response
- **colors** (Palette) - The palette with 36 named colors including bg, surface, fg, fg_muted, accent, border, focus, danger, chart, ansi, and syntax.
- **text_size(TextSize)** (Rems) - Text size from Xs (11px) to Display (32px), scaled by font_scale.
- **radius(Radius)** (Rems) - Corner radius from Sm (4px) to Xl (12px), scaled by radius_scale.
- **elevation(Elevation)** (Shadows) - Shadows for Raised, Floating, and Modal; darker in dark mode.
- **control_height(ControlSize)** (px) - Control height: Sm 24px, Md 28px, Lg 32px; adjusted by density.
- **mode()** (Mode) - Current mode (Light or Dark).
- **is_dark()** (bool) - Whether dark mode is active.
- **high_contrast()** (bool) - Whether high contrast is enabled.
- **color_blind_safe()** (bool) - Whether color blind safe mode is enabled.
```

--------------------------------

### Icon::new(name)

Source: https://elygpui.com/docs/icons

Creates an icon from an IconName variant and draws it at the default size and color.

```APIDOC
## Icon::new(name)

### Description
Creates an icon from an IconName variant and draws it at the default size and color.

### Method
Constructor

### Parameters
- **name** (IconName) - Required - The icon variant to draw.

### Behavior
Draws the icon at IconSize::Md in the theme's fg color.
```

--------------------------------

### Theme::set_mode_now(mode, cx)

Source: https://elygpui.com/docs/theme

Switches the mode immediately without cross-fade. Use before a window opens to set its first frame.

```APIDOC
## Theme::set_mode_now(mode, cx)

### Description
Switches the mode immediately without cross-fade. Use before a window opens to set its first frame.

### Method
Call

### Endpoint
Theme::set_mode_now(mode, cx)

### Parameters
- **mode** (Mode) - Required - The target mode: Mode::Light or Mode::Dark.
- **cx** (Context) - Required - The context used for repainting.

### Response
None
```

--------------------------------

### IconTheme::default().extension("md", IconName::BookOpen)

Source: https://elygpui.com/docs/icons

Adds a rule mapping a file extension (without dot) to an icon.

```APIDOC
## IconTheme::default().extension("md", IconName::BookOpen)

### Description
Adds a rule mapping a file extension (without dot) to an icon.

### Method
Method

### Parameters
- **extension** (string) - Required - The file extension without the dot.
- **icon** (IconName) - Required - The icon to use.
```

--------------------------------

### Icon::from_path(path)

Source: https://elygpui.com/docs/icons

Draws an SVG from the application's asset source with the same defaults as Icon::new.

```APIDOC
## Icon::from_path(path)

### Description
Draws an SVG from the application's asset source with the same defaults as Icon::new.

### Method
Constructor

### Parameters
- **path** (path) - Required - The path to the SVG asset.

### Behavior
Draws the SVG at IconSize::Md in the theme's fg color.
```

--------------------------------

### Theme::set_high_contrast(on, cx)

Source: https://elygpui.com/docs/theme

Enables or disables high contrast mode, which adjusts muted text, borders, and glass transparency.

```APIDOC
## Theme::set_high_contrast(on, cx)

### Description
Enables or disables high contrast mode, which adjusts muted text, borders, and glass transparency.

### Method
Call

### Endpoint
Theme::set_high_contrast(on, cx)

### Parameters
- **on** (bool) - Required - Whether to enable high contrast.
- **cx** (Context) - Required - The context used for repainting.

### Response
None
```

--------------------------------

### Add dependencies to Cargo.toml

Source: https://elygpui.com/docs/installation

Add these dependencies to your Cargo.toml file to include the Ely GPUI component and the required GPUI snapshot.

```toml
[dependencies]
ely-gpui-component = { git = "https://git.zacharyzhang.com/ZacharyZhang-NY/Ely-GPUI-Components" }
gpui = { package = "gpui-pre", version = "=0.3.8" }
gpui_platform = { package = "gpui-pre-platform", version = "=0.3.8", features = ["font-kit"] }
```

--------------------------------

### I18n::new

Source: https://elygpui.com/docs/i18n

Creates a new I18n instance with the given locale tag as the initial locale.

```APIDOC
## I18n::new

### Description
Creates a new I18n instance with the given locale tag as the initial locale.

### Method
Constructor

### Parameters
- **tag** (string) - Required - The locale tag, e.g., "en-US".

### Returns
- **I18n** - A new I18n instance.

### Example
```rust
let i18n = I18n::new("en-US");
```
```

--------------------------------

### Add GPUI Kit dependencies to Cargo.toml

Source: https://elygpui.com/docs/gpui-kit

Add the required gpui-kit and ely-gpui-component dependencies to your project's Cargo.toml file.

```toml
[dependencies]
gpui-kit = "0.7"
ely-gpui-component = { git = "https://git.zacharyzhang.com/ZacharyZhang-NY/Ely-GPUI-Components" }
```

--------------------------------

### Shake::new(id, key)

Source: https://elygpui.com/docs/motion

Applies a shake each time the key changes. Stays still under reduced motion.

```APIDOC
## Shake::new(id, key)

### Description
Creates a shake effect that shakes its content each time the key changes. It reads the time since the key changed and does not restart the animation. Under reduced motion, it stays still.

### Parameters
- **id** (ElementId) - Required - Unique identifier.
- **key** (Hashable) - Required - A value that triggers the shake when it changes.
```

--------------------------------

### cx.global::<I18n>().text(key, &[(name, value)])

Source: https://elygpui.com/docs/i18n

Retrieves the message for the given key, filling in any placeholders. Panics if the key, argument, or catalog is missing.

```APIDOC
## cx.global::<I18n>().text(key, &[(name, value)])

### Description
Retrieves the message for the given key, filling in any placeholders. Panics if the key, argument, or catalog is missing.

### Method
Method

### Parameters
- **key** (string) - Required - The message key.
- **args** (array of (name, value) tuples) - Required - The placeholder values to fill.

### Returns
- **string** - The localized message.

### Example
```rust
let greeting = cx.global::<I18n>().text("greeting", &[("name", "Ada")]);
```
```

--------------------------------

### Set theme mode for Ely and Kit

Source: https://elygpui.com/docs/gpui-kit

Commands to set the theme mode for Ely and Kit respectively.

```rust
Theme::set_mode(Mode::Dark, cx)
```

```rust
Theme::change(ThemeMode::Dark, Some(window), cx)
```

--------------------------------

### Theme::set_high_contrast(enabled, cx)

Source: https://elygpui.com/docs/theme

Toggles high contrast mode for the theme.

```APIDOC
## Theme::set_high_contrast(enabled, cx)

### Description
Enables or disables high contrast mode.

### Method
Static method call

### Endpoint
Theme::set_high_contrast(enabled, cx)

### Parameters
- enabled (boolean) - Required - Whether to enable high contrast
- cx (Context) - Required - The application context

### Returns
None

### Example
```rust
Theme::set_high_contrast(!contrast, cx)
```
```

--------------------------------

### IconTheme::default().name("Cargo.toml", IconName::Package)

Source: https://elygpui.com/docs/icons

Adds a rule mapping an exact file name (case-insensitive) to an icon.

```APIDOC
## IconTheme::default().name("Cargo.toml", IconName::Package)

### Description
Adds a rule mapping an exact file name (case-insensitive) to an icon.

### Method
Method

### Parameters
- **name** (string) - Required - The exact file name, case-insensitive.
- **icon** (IconName) - Required - The icon to use.
```

--------------------------------

### Transition::new(id, shown)

Source: https://elygpui.com/docs/motion

Animates its children in and out as the shown flag turns. Supports Entrance::Fade, Rise, or Slide.

```APIDOC
## Transition::new(id, shown)

### Description
Creates a transition component that animates its children in and out based on the shown flag.

### Parameters
- **id** (ElementId) - Required - Unique identifier for the transition.
- **shown** (bool) - Required - Whether the children are shown.

### Usage
- **Entrance::Fade** - Fade in/out.
- **Entrance::Rise** - Rise in/out.
- **Entrance::Slide** - Slide in/out.
```

--------------------------------

### Flash::new(id, key)

Source: https://elygpui.com/docs/motion

Applies a tint each time the key changes, fading out. Reads the time since the key changed and does not restart the animation.

```APIDOC
## Flash::new(id, key)

### Description
Creates a flash effect that tints its content each time the key changes, then fades out. It reads the time since the key changed and does not restart the animation.

### Parameters
- **id** (ElementId) - Required - Unique identifier.
- **key** (Hashable) - Required - A value that triggers the flash when it changes.
```

--------------------------------

### Dialog::new(id, title, on_close)

Source: https://elygpui.com/docs/overlays

Creates a dialog overlay that appears as a card over a scrim. Render it while open and set the open flag false in on_close.

```APIDOC
## Dialog::new(id, title, on_close)

### Description
Creates a dialog overlay that appears as a card over a scrim. Render it while open and set the open flag false in on_close.

### Parameters
- **id** - The identifier for the dialog.
- **title** - The title of the dialog.
- **on_close** - Callback invoked when the dialog closes (Escape, scrim press, or fullscreen close button).

### Methods
- **.detail(text)** - Adds a line under the title.
- **.child(..)** - Adds the owner's content.
- **.action(|close| ..)** - Adds a button in the row at the bottom, in the order given. The closure gets the dialog's close; a button that ends the dialog calls it.
- **.fullscreen()** - Fills the window below its title bar, under a bar with the title and a close button.

### Behavior
Escape, a press on the scrim, and a fullscreen dialog's close button all run on_close. Tab stays inside the dialog, and focus returns to what held it before, on every way out. The card fits the window; its body scrolls and its actions stay. AlertDialog, ConfirmDialog, and PromptDialog build on Dialog.
```

--------------------------------

### Skeleton, Shimmer

Source: https://elygpui.com/docs/motion

Skeleton shows a placeholder while content loads. Shimmer is a band that sweeps over what it holds.

```APIDOC
## Skeleton

### Description
A placeholder component shown while content loads.

## Shimmer

### Description
A band that sweeps over its content, providing a shimmer effect.
```

--------------------------------

### Theme::set_mode(mode, cx)

Source: https://elygpui.com/docs/theme

Sets the theme mode (Light or Dark) for the application.

```APIDOC
## Theme::set_mode(mode, cx)

### Description
Sets the theme mode to either Light or Dark.

### Method
Static method call

### Endpoint
Theme::set_mode(mode, cx)

### Parameters
- mode (Mode) - Required - The mode to set (Mode::Light or Mode::Dark)
- cx (Context) - Required - The application context

### Returns
None

### Example
```rust
Theme::set_mode(if dark { Mode::Light } else { Mode::Dark }, cx)
```
```

--------------------------------

### FileIcon::folder(open)

Source: https://elygpui.com/docs/icons

Shows a folder icon, optionally open.

```APIDOC
## FileIcon::folder(open)

### Description
Shows a folder icon, optionally open.

### Method
Constructor

### Parameters
- **open** (boolean) - Required - Whether the folder is open.
```

--------------------------------

### Theme::set_palette(mode, palette, cx)

Source: https://elygpui.com/docs/theme

Sets the palette for a given mode.

```APIDOC
## Theme::set_palette(mode, palette, cx)

### Description
Assigns a palette to a specific mode.

### Method
Static method call

### Endpoint
Theme::set_palette(mode, palette, cx)

### Parameters
- mode (Mode) - Required - The mode to set the palette for
- palette (Option<Palette>) - Required - The palette to set, or None to reset
- cx (Context) - Required - The application context

### Returns
None

### Example
```rust
Theme::set_palette(mode, Some(palette), cx)
```
```

--------------------------------

### FileIcon::file(name)

Source: https://elygpui.com/docs/icons

Shows the icon a file's name suggests.

```APIDOC
## FileIcon::file(name)

### Description
Shows the icon a file's name suggests.

### Method
Constructor

### Parameters
- **name** (string) - Required - The file name.
```

--------------------------------

### cx.theme().palette()

Source: https://elygpui.com/docs/theme

Returns the palette that the shown mode fades to. Use token_mut to change a color by its field's name, then hand the palette back for that mode.

```APIDOC
## cx.theme().palette()

### Description
Returns the palette that the shown mode fades to. Change a color by its field's name with token_mut, then hand the palette back for that mode.

### Method
Function call

### Endpoint
cx.theme().palette()

### Parameters
None

### Returns
Palette object

### Example
```rust
let mut palette = cx.theme().palette();
*palette.token_mut("accent") = rgb(0x2f7d4f).into();
Theme::set_palette(mode, Some(palette), cx);
```
```

--------------------------------

### Icon.size(IconSize::Xl)

Source: https://elygpui.com/docs/icons

Sets the icon size from the theme's icon sizes.

```APIDOC
## Icon.size(IconSize::Xl)

### Description
Sets the icon size from the theme's icon sizes.

### Method
Method

### Parameters
- **size** (IconSize) - Required - The size variant, from Xs to Xxl.
```

--------------------------------

### Spinner, ProgressBar, ProgressRing

Source: https://elygpui.com/docs/motion

Components that show progress. They hold still under reduced motion where they repeat.

```APIDOC
## Spinner

### Description
A spinner component that indicates progress. Under reduced motion, it holds still.

## ProgressBar

### Description
A progress bar component. Under reduced motion, it holds still where it repeats.

## ProgressRing

### Description
A progress ring component. Under reduced motion, it holds still where it repeats.
```
Tokens:
Raw