Desktop

cargo test --workspace                # unit + gpui TestAppContext tests (theme pins)
cargo fmt --all
cargo clippy --workspace --all-targets -- -D warnings

# a crate inside packages/desktop — inherit the workspace entry
[dependencies]
celestia-ui = { workspace = true }

# an app outside the workspace — point at the library crate
[dependencies]
celestia-ui = { path = "../packages/desktop/crates/ui" }

use gpui::App;

fn main() {
    gpui_platform::application().run(|cx: &mut App| {
        celestia_ui::init(cx); // runtime + Celestia light/dark themes
        // open windows — see "Bootstrap" below
    });
}

use celestia_ui::components::badge::{Badge, BadgeVariant};
use celestia_ui::components::button::{Button, ButtonVariant};
use celestia_ui::components::input::{Input, InputState};
use celestia_ui::components::Card;
use gpui::{Entity, Window};
use gpui_component::{h_flex, v_flex};
use gpui::prelude::*;

struct InviteView {
    email: Entity<InputState>,
}

impl InviteView {
    pub fn new(window: &mut Window, cx: &mut Context<Self>) -> Self {
        Self {
            // Stateful primitives are entities: create them in the
            // constructor, render them by reference below.
            email: cx.new(|cx| {
                InputState::new(window, cx).placeholder("[email protected]")
            }),
        }
    }
}

impl Render for InviteView {
    fn render(&mut self, _window: &mut Window, cx: &mut Context<Self>) -> impl IntoElement {
        v_flex().gap_3().child(
            Card::new()
                .title("Invite your team")
                .description("Teammates get a magic link by email.")
                .child(Input::new(&self.email).cleanable(true))
                .child(
                    h_flex()
                        .gap_2()
                        .items_center()
                        .child(Badge::new("Beta").variant(BadgeVariant::Brand))
                        .child(
                            Button::new("send")
                                .label("Send invite")
                                .variant(ButtonVariant::Primary)
                                .on_click(|_, _, _| {
                                    // handle it — event/window/cx come in here
                                }),
                        )
                        .child(
                            Button::new("later")
                                .label("Later")
                                .variant(ButtonVariant::Ghost),
                        ),
                ),
        )
    }
}

use celestia_ui::theme::ActiveTheme;
use gpui::{div, px};

let theme = cx.theme();
let row = div()
    .flex()
    .gap_2()
    .rounded(px(8.0))
    .bg(theme.muted)                       // semantic role — flips in dark mode
    .border_1()
    .border_color(theme.border)
    .text_color(theme.muted_foreground);

let wash = celestia_ui::palette(cx).brand().opacity(0.08); // product color, mode-independent

use celestia_ui::components::context_badge::{BadgeDetail, MessageBadge, context_badge};
use celestia_ui::components::primitive::icon::PhosphorIcon;
use celestia_ui::components::loaders::{gradient_spinner, progress_ring, pulse_loader};
use celestia_ui::components::notice::{NoticeChipIcon, notice_chip};
use celestia_ui::motion;

// entrances — gpui Animations, snapped automatically under reduced motion
motion::fade_in("invite-enter", my_card)

// loaders — pass your view's id so the pulse clock can invalidate it
pulse_loader(8.0, cx.entity_id(), cx)
gradient_spinner(6.0, cx.entity_id(), cx)
progress_ring(65, 40.0, cx.theme().foreground)

// failure notice — tinted card, copy button, wrapping message
notice_chip(false, "Build failed", "cargo build exited with 101", NoticeChipIcon::Tile, cx)

// context pill — hovers into a card of location/tag/body rows
context_badge(
    "ctx-comments",
    &MessageBadge {
        icon: PhosphorIcon::FileCode,
        label: "2 comments".into(),
        details: vec![BadgeDetail {
            location: "src/main.rs:42".into(),
            tag: Some("R".into()),
            body: "early-return here".into(),
        }],
    },
    cx,
)

use celestia_ui::theme::ActiveTheme;
use gpui::{App, IntoElement, RenderOnce, SharedString, Window, div, px};

#[derive(IntoElement)]
pub struct Pill {
    label: SharedString,
}

impl RenderOnce for Pill {
    fn render(self, _window: &mut Window, cx: &mut App) -> impl IntoElement {
        let theme = cx.theme();
        div()
            .px(px(6.0))
            .rounded(px(4.0))
            .bg(theme.muted)
            .border_1()
            .border_color(theme.border)
            .text_color(theme.muted_foreground)
            .child(self.label)
    }
}

use celestia_ui::theme::{hex, AppFont, AppTheme, Scheme};
use gpui::px;

let config = AppTheme {
    radius: px(10.),                    // one knob — radius_lg derives +4px
    font: AppFont {
        family: Some("Georgia".into()), // None = Geist (embedded)
        size: Some(px(18.)),            // None = 16px, also the rem size
        ..Default::default()
    },
    light: Scheme {
        primary: Some(hex(0x2563eb)),   // None = keep the theme.json value
        ..Default::default()
    },
    dark: Scheme {
        primary: Some(hex(0x6aa5ff)),
        ..Default::default()
    },
};

// Re-themes every window on the next frame — and survives later
// Theme::change / system-appearance switches.
config.apply(cx);

use celestia_ui::theme::{active, families, select, AppTheme, Scheme, hex};

// Register a named light+dark family from tokens — and activate it:
AppTheme {
    dark: Scheme {
        background: Some(hex(0x0b1120)),
        primary: Some(hex(0x38bdf8)),
        ..Default::default()
    },
    ..Default::default()
}
.register("Nocturne", cx);

select("Celestia", cx);  // switch back — light/dark mode is preserved
families(cx);            // ["Celestia", "Nocturne"]
active(cx);              // "Celestia"

gpui_platform::application().run(|cx: &mut App| {
    celestia_ui::init(cx);                    // runtime + Celestia light/dark themes
    cx.open_window(WindowOptions { ..TitleBar::window_options() }, |window, cx| {
        let view = cx.new(|cx| MyApp::new(window, cx));
        cx.new(|cx| Root::new(view, window, cx))
    })?;
    cx.activate(true);
});

// inside MyApp::render — dialogs, sheets and toasts are invisible until
// the root view mounts their layers:
let dialog_layer = Root::render_dialog_layer(window, cx);
let sheet_layer = Root::render_sheet_layer(window, cx);
let notification_layer = Root::render_notification_layer(window, cx);
div().child(self.content(cx))
    .children(dialog_layer)
    .children(sheet_layer)
    .children(notification_layer)