pnpm desktop

use celestia_ui::components::primitive::typography::{    Heading, Typography, TypographyTone, TypographyVariant,};
Heading::h1("Page title");Heading::h2("Section");Typography::lead("Supporting intro under a title.");Typography::body("Default reading size.");Typography::muted("Secondary helper line.");Typography::caption("Footnote / meta");Typography::overline("SECTION"); // already uppercased — GPUI has no text-transformTypography::code("pnpm desktop");
Typography::new("Accent body")    .variant(TypographyVariant::Body)    .tone(TypographyTone::Accent);

use celestia_ui::components::primitive::toggle::{Toggle, ToggleGroup};use celestia_ui::components::primitive::icon::{Phosphor, PhosphorIcon};use gpui::px;
// Outline chip togglesToggle::new("bold")    .outline()    .label("Bold")    .checked(bold)    .on_click(|next, _, cx| { /* set bold = *next; cx.notify() */ });
// Segmented exclusive group (toolbar align)ToggleGroup::new("align")    .outline()    .segmented()    .exclusive()    .child(Toggle::new("l").checked(align == 0).child(        Phosphor::new(PhosphorIcon::TextAlignLeft).size(px(14.0)),    ))    .child(Toggle::new("c").checked(align == 1).child(        Phosphor::new(PhosphorIcon::TextAlignCenter).size(px(14.0)),    ))    .child(Toggle::new("r").checked(align == 2).child(        Phosphor::new(PhosphorIcon::TextAlignRight).size(px(14.0)),    ))    .on_click(|checks, _, cx| {        // checks[i] is the new pressed state of child i    });

use celestia_ui::components::primitive::aspect_ratio::AspectRatio;use gpui::{div, relative};
AspectRatio::widescreen() // 16 / 9    .child(        div()            .size_full()            .bg(/* theme.muted */),    );
AspectRatio::square();      // 1 / 1AspectRatio::new(4.0 / 3.0);

use celestia_ui::components::primitive::item::{    Item, ItemActions, ItemContent, ItemDescription, ItemGroup, ItemMedia, ItemTitle,};use celestia_ui::components::primitive::button::{Button, ButtonVariant};use celestia_ui::components::primitive::icon::{Phosphor, PhosphorIcon};use gpui::px;
ItemGroup::new()    .child(        Item::new()            .id("readme")            .outline()            .child(                ItemMedia::new().icon().child(                    Phosphor::new(PhosphorIcon::File).size(px(16.0)),                ),            )            .child(                ItemContent::new()                    .child(ItemTitle::new("README.md"))                    .child(ItemDescription::new("Project overview")),            )            .child(                ItemActions::new().child(                    Button::new("open")                        .variant(ButtonVariant::Ghost)                        .label("Open"),                ),            ),    );

use celestia_ui::components::primitive::menubar::{Menubar, MenubarMenu};use celestia_ui::components::composite::menu::PopupMenuItem;
Menubar::new("app-menubar")    .menu(MenubarMenu::new("file", "File", |menu, _, _| {        menu.item(PopupMenuItem::new("New").on_click(|_, _, _| {}))            .item(PopupMenuItem::new("Open…").on_click(|_, _, _| {}))            .separator()            .item(PopupMenuItem::new("Quit").on_click(|_, _, _| {}))    }))    .menu(MenubarMenu::new("edit", "Edit", |menu, _, _| {        menu.item(PopupMenuItem::new("Undo").on_click(|_, _, _| {}))    }));

use celestia_ui::components::primitive::navigation_menu::{    NavigationMenu, NavigationMenuItem,};use celestia_ui::components::composite::menu::PopupMenuItem;
NavigationMenu::new("site-nav")    .item(NavigationMenuItem::link("home", "Home").active(true))    .item(NavigationMenuItem::flyout("product", "Product", |menu, _, _| {        menu.item(PopupMenuItem::new("Features").on_click(|_, _, _| {}))            .item(PopupMenuItem::new("Pricing").on_click(|_, _, _| {}))    }))    .item(NavigationMenuItem::link("docs", "Docs"));

use celestia_ui::components::primitive::chip::Chip;use celestia_ui::components::primitive::initials::Initials;use celestia_ui::components::primitive::number_stepper::NumberStepper;use celestia_ui::components::primitive::meter::Meter;
Chip::new("lang", "Rust").outline().selected(true);Initials::new("av", "Ada Lovelace");NumberStepper::new("qty", 3).range(0, 10);Meter::new("disk").label("Disk").value(0.75);

use celestia_ui::components::composite::drawer::Drawer;use celestia_ui::components::composite::file_tree::{FileTree, FileTreeFile, FileTreeFolder};use celestia_ui::components::composite::modal::{Modal, ModalSize};use celestia_ui::components::composite::sheet_panel::{SheetPanel, SheetSide};
Modal::new("edit-profile")    .title("Edit profile")    .description("Update how your name appears across Celestia.")    .size(ModalSize::Medium)    .child(/* body */)    .footer(/* actions */)    .on_close(|_, _, _| { /* close */ });
SheetPanel::new("inspector")    .side(SheetSide::Right)    .title("Inspector")    .description("Edit the selection.")    .child(/* body */)    .on_close(|_, _, _| { /* close */ });
Drawer::new("share")    .title("Share")    .child(/* body */)    .footer(/* actions */);
FileTree::new("workspace")    .child(        FileTreeFolder::new("apps", "apps")            .expanded(true)            .child(                FileTreeFolder::new("apps/api", "api")                    .expanded(true)                    .child(FileTreeFile::new("apps/api/src/index.ts", "index.ts").selected(true)),            ),    );

use celestia_ui::components::composite::window::{    self as app_window, AppMenu, WindowChrome, bind_window_keys, open_window,};
app_window::Window::new("app", "Celestia")    .chrome(WindowChrome::Native)    .title_bar(/* TrafficLights / tabs / actions */)    .child(/* body */);
AppMenu::standard("Celestia").install(cx);bind_window_keys(cx);open_window("Untitled", cx, |window, cx| { /* Root::new(...) */ });

use celestia_ui::components::composite::dnd::{    reorder_vec, DropTarget, Draggable, ItemDrag,};use celestia_ui::components::composite::drop_zone::DropZone;use celestia_ui::components::composite::kanban_board::{    apply_kanban_drop, KanbanCard, KanbanColumn, KanbanDrop,};use celestia_ui::components::composite::sortable_list::{SortableItem, SortableList};
DropZone::new("uploads")    .on_files(|paths, _, _| { /* Vec<PathBuf> */ });
Draggable::new("src", ItemDrag::new("board", "card-1", 0, "Ship it"))    .child(/* label */);
DropTarget::new("lane")    .on_item_drop(|drag, _, _| { /* accept ItemDrag */ });
SortableItem::new("row-0", "tasks", "a", 0, "Inbox")    .on_reorder(|&(from, to), _, cx| {        // host: reorder_vec(&mut items, from, to); cx.notify();    });
KanbanColumn::new("todo", "To do")    .board_id("sprint")    .on_card_drop(|drop: &KanbanDrop, _, _| {        // apply_kanban_drop(&mut columns, drop, |c| c.id.clone());    })    .card(        KanbanCard::new("c1", "Ship it")            .draggable("sprint", "todo", "c1", 0)            .on_card_drop(|drop, _, _| { /* insert before */ }),    );