start on elements

crates/gpuikit-theme/src/lib.rs

···
 //! A simple theme system for gpui-kit
 
-use gpui::{App, Global, Hsla, SharedString};
+use gpui::{hsla, App, Global, Hsla, SharedString};
 use std::collections::HashMap;
 use std::sync::Arc;
+
+pub fn init(cx: &mut App) {
+    cx.set_global(GlobalTheme::default());
+}
 
 /// Available theme variants
 #[derive(Debug, Clone, Copy, PartialEq, Eq)]
···
 
     /// Outline color for focus states
     pub outline: Hsla,
+
+    /// Muted foreground color for secondary text
+    pub fg_muted: Hsla,
+
+    /// Disabled foreground color
+    pub fg_disabled: Hsla,
+
+    /// Secondary surface color for nested cards/panels
+    pub surface_secondary: Hsla,
+
+    /// Tertiary surface color for deeply nested elements
+    pub surface_tertiary: Hsla,
+
+    /// Secondary border color for hover states
+    pub border_secondary: Hsla,
+
+    /// Subtle border color for minimal separation
+    pub border_subtle: Hsla,
+
+    /// Accent color for primary actions
+    pub accent: Hsla,
+
+    /// Accent background color
+    pub accent_bg: Hsla,
+
+    /// Accent background hover color
+    pub accent_bg_hover: Hsla,
+
+    /// Danger color for errors and destructive actions
+    pub danger: Hsla,
+
+    /// Selection color for text and items
+    pub selection: Hsla,
+
+    // UI element specific colors
+    /// Button background color
+    pub button_bg: Hsla,
+
+    /// Button background hover color
+    pub button_bg_hover: Hsla,
+
+    /// Button background active/pressed color
+    pub button_bg_active: Hsla,
+
+    /// Button border color
+    pub button_border: Hsla,
+
+    /// Input background color
+    pub input_bg: Hsla,
+
+    /// Input border color
+    pub input_border: Hsla,
+
+    /// Input border hover color
+    pub input_border_hover: Hsla,
+
+    /// Input border focused color
+    pub input_border_focused: Hsla,
 }
 
 impl Theme {
···
             surface: parse_hex("#3c3836"),
             border: parse_hex("#504945"),
             outline: parse_hex("#458588"),
+            fg_muted: parse_hex("#a89984"),
+            fg_disabled: parse_hex("#7c6f64"),
+            surface_secondary: parse_hex("#504945"),
+            surface_tertiary: parse_hex("#665c54"),
+            border_secondary: parse_hex("#7c6f64"),
+            border_subtle: parse_hex("#3c3836"),
+            accent: parse_hex("#8ec07c"),
+            accent_bg: hsla(104.0 / 360.0, 0.35, 0.63, 0.15),
+            accent_bg_hover: hsla(104.0 / 360.0, 0.35, 0.63, 0.25),
+            danger: parse_hex("#fb4934"),
+            selection: hsla(55.0 / 360.0, 0.56, 0.64, 0.25),
+            button_bg: parse_hex("#504945"),
+            button_bg_hover: parse_hex("#665c54"),
+            button_bg_active: parse_hex("#7c6f64"),
+            button_border: parse_hex("#7c6f64"),
+            input_bg: parse_hex("#3c3836"),
+            input_border: parse_hex("#504945"),
+            input_border_hover: parse_hex("#665c54"),
+            input_border_focused: parse_hex("#8ec07c"),
         }
     }
 
···
             surface: parse_hex("#ebdbb2"),
             border: parse_hex("#d5c4a1"),
             outline: parse_hex("#076678"),
+            fg_muted: parse_hex("#665c54"),
+            fg_disabled: parse_hex("#a89984"),
+            surface_secondary: parse_hex("#d5c4a1"),
+            surface_tertiary: parse_hex("#bdae93"),
+            border_secondary: parse_hex("#a89984"),
+            border_subtle: parse_hex("#ebdbb2"),
+            accent: parse_hex("#427b58"),
+            accent_bg: hsla(145.0 / 360.0, 0.30, 0.38, 0.10),
+            accent_bg_hover: hsla(145.0 / 360.0, 0.30, 0.38, 0.15),
+            danger: parse_hex("#cc241d"),
+            selection: hsla(48.0 / 360.0, 0.87, 0.61, 0.15),
+            button_bg: parse_hex("#ebdbb2"),
+            button_bg_hover: parse_hex("#d5c4a1"),
+            button_bg_active: parse_hex("#bdae93"),
+            button_border: parse_hex("#a89984"),
+            input_bg: parse_hex("#fbf1c7"),
+            input_border: parse_hex("#d5c4a1"),
+            input_border_hover: parse_hex("#bdae93"),
+            input_border_focused: parse_hex("#427b58"),
         }
     }
 
···
             surface: parse_hex("#111111"),
             border: parse_hex("#222222"),
             outline: parse_hex("#0066cc"),
+            fg_muted: parse_hex("#888888"),
+            fg_disabled: parse_hex("#555555"),
+            surface_secondary: parse_hex("#1a1a1a"),
+            surface_tertiary: parse_hex("#222222"),
+            border_secondary: parse_hex("#333333"),
+            border_subtle: parse_hex("#111111"),
+            accent: parse_hex("#0066cc"),
+            accent_bg: hsla(210.0 / 360.0, 1.0, 0.4, 0.15),
+            accent_bg_hover: hsla(210.0 / 360.0, 1.0, 0.4, 0.25),
+            danger: parse_hex("#cc0000"),
+            selection: hsla(210.0 / 360.0, 1.0, 0.5, 0.25),
+            button_bg: parse_hex("#222222"),
+            button_bg_hover: parse_hex("#333333"),
+            button_bg_active: parse_hex("#444444"),
+            button_border: parse_hex("#333333"),
+            input_bg: parse_hex("#111111"),
+            input_border: parse_hex("#222222"),
+            input_border_hover: parse_hex("#333333"),
+            input_border_focused: parse_hex("#0066cc"),
         };
 
         themes.add(custom);

crates/gpuikit/Cargo.toml

···
 [dev-dependencies]
 gpui = { workspace = true, features = ["test-support"] }
 
-[[example]]
-name = "file_dialog"
-path = "../../examples/file_dialog.rs"
-
 [features]
 default = []
 

crates/gpuikit/src/elements.rs

···
+pub mod avatar;
+pub mod button;

crates/gpuikit/src/elements/avatar.rs

···
+use gpui::{
+    div, img, prelude::FluentBuilder, px, rems, AbsoluteLength, App, Hsla, ImageSource, Img,
+    IntoElement, ParentElement, RenderOnce, Styled, Window,
+};
+use gpuikit_theme::ActiveTheme;
+
+#[derive(IntoElement)]
+pub struct Avatar {
+    image: Img,
+    size: Option<AbsoluteLength>,
+    border_color: Option<Hsla>,
+}
+
+impl Avatar {
+    pub fn new(src: impl Into<ImageSource>) -> Self {
+        Avatar {
+            image: img(src),
+            size: None,
+            border_color: None,
+        }
+    }
+
+    pub fn border_color(mut self, color: impl Into<Hsla>) -> Self {
+        self.border_color = Some(color.into());
+        self
+    }
+
+    pub fn size<L: Into<AbsoluteLength>>(mut self, size: impl Into<Option<L>>) -> Self {
+        self.size = size.into().map(Into::into);
+        self
+    }
+}
+
+impl RenderOnce for Avatar {
+    fn render(self, window: &mut Window, cx: &mut App) -> impl IntoElement {
+        let border_width = if self.border_color.is_some() {
+            px(2.)
+        } else {
+            px(0.)
+        };
+
+        let image_size = self.size.unwrap_or_else(|| rems(1.).into());
+        let container_size = image_size.to_pixels(window.rem_size()) + border_width * 2.;
+
+        div()
+            .size(container_size)
+            .rounded_full()
+            .when_some(self.border_color, |this, color| {
+                this.border(border_width).border_color(color)
+            })
+            .child(
+                self.image
+                    .size(image_size)
+                    .rounded_full()
+                    .bg(cx.theme().surface),
+            )
+    }
+}

crates/gpuikit/src/elements/button.rs

···
+use gpui::{
+    div, rems, App, ClickEvent, ElementId, FontWeight, InteractiveElement, IntoElement,
+    MouseButton, ParentElement, RenderOnce, SharedString, StatefulInteractiveElement, Styled,
+    Window,
+};
+use gpuikit_theme::ActiveTheme;
+
+use crate::utils::element_manager::ElementManagerExt;
+
+pub fn button(cx: &App, label: impl Into<SharedString>) -> Button {
+    let label = label.into();
+    let id = cx.next_id_named(label.clone());
+    Button::new(id, label)
+}
+
+#[derive(IntoElement)]
+pub struct Button {
+    id: ElementId,
+    label: SharedString,
+    disabled: bool,
+    handler: Option<Box<dyn Fn(&ClickEvent, &mut Window, &mut App) + 'static>>,
+}
+
+impl Button {
+    pub fn new(id: impl Into<ElementId>, label: impl Into<SharedString>) -> Self {
+        let id = id.into();
+        let label = label.into();
+
+        Button {
+            id,
+            label,
+            disabled: false,
+            handler: None,
+        }
+    }
+
+    pub fn on_click(
+        mut self,
+        handler: impl Fn(&ClickEvent, &mut Window, &mut App) + 'static,
+    ) -> Self {
+        self.handler = Some(Box::new(handler));
+        self
+    }
+
+    pub fn disabled(mut self, disabled: bool) -> Self {
+        self.disabled = disabled;
+        self
+    }
+}
+
+impl RenderOnce for Button {
+    fn render(self, _window: &mut Window, cx: &mut App) -> impl IntoElement {
+        let theme = cx.theme();
+
+        let mut button = div()
+            .id(self.id)
+            .h(rems(1.0))
+            .px(rems(0.125))
+            .gap(rems(0.125))
+            .flex()
+            .flex_none()
+            .items_center()
+            .justify_center()
+            .rounded(rems(0.125))
+            .text_xs()
+            .font_weight(FontWeight::MEDIUM)
+            .bg(cx.theme().button_bg)
+            .text_color(theme.fg)
+            .whitespace_nowrap();
+
+        if !self.disabled {
+            button = button
+                .hover(|div| div.bg(cx.theme().button_bg_hover))
+                .active(|div| div.bg(cx.theme().button_bg_active))
+        } else {
+            button = button
+                .opacity(0.65)
+                .cursor_not_allowed()
+                .text_color(theme.fg_muted)
+        }
+
+        if !self.disabled {
+            if let Some(handler) = self.handler {
+                button = button
+                    .on_mouse_down(MouseButton::Left, |_, window, _| window.prevent_default())
+                    .on_click(move |event, window, cx| {
+                        cx.stop_propagation();
+                        handler(event, window, cx)
+                    });
+            }
+        }
+
+        button.child(self.label)
+    }
+}

crates/gpuikit/src/lib.rs

···
 //! gpuikit
 
+use gpui::App;
 pub use gpuikit_theme as theme;
 
+pub mod elements;
 pub mod error;
 pub mod fs;
 pub mod layout;
 pub mod resource;
+pub mod traits;
+pub mod utils;
 
-pub mod style {
-    use gpuikit_theme::Theme;
-
-    pub trait Themed {
-        fn themed(self, theme: &Theme) -> Self;
-    }
-
-    // todo: is Themed useful?
-    //
-    // I could see most gpuikit components being something like:
-    //
-    // pub trait Component: IntoElement + Themed {}
-    //
-    // where Themed eventually gets more style helpers...
+/// Initialize gpuikit - this sets up & loads themes, sets up global state, etc.
+///
+/// This must be called as soon as possible after your `gpui::Application` is created,
+/// as calling a gpuikit component before initialization will panic.
+pub fn init(cx: &mut App) {
+    gpuikit_theme::init(cx);
+    utils::element_manager::init(cx);
 }

crates/gpuikit/src/traits.rs

···
+pub mod button;
+pub mod clickable;
+pub mod visual_focus;

crates/gpuikit/src/traits/button.rs

···
+use super::clickable::Clickable;
+
+/// A button is a clickable element that dispatches some
+/// handler when clicked.
+pub trait Button: Clickable {
+    type Variant;
+
+    fn variant(&self) -> Self::Variant;
+}

crates/gpuikit/src/traits/clickable.rs

···
+use gpui::{App, ClickEvent, Window};
+
+/// Trait for elements that can be clicked
+pub trait Clickable {
+    /// Check if this element is disabled
+    fn disabled(&self) -> bool;
+
+    /// Set the click handler
+    fn on_click(self, handler: impl Fn(&ClickEvent, &mut Window, &mut App) + 'static) -> Self;
+}

crates/gpuikit/src/traits/visual_focus.rs

···
+/// Indicates what kind of visual focus style an element should use
+///
+/// - Ring: A focus ring is drawn around the element
+/// - Highlight: Element is highlighted (e.g. background color change)
+pub enum FocusStyle {
+    Ring,
+    Highlight,
+}
+
+// A trait for elements that can receive visual focus
+// usually denoted by a focus ring or highlight
+pub trait VisualFocus: gpui::Focusable {
+    fn focus_style(&self) -> FocusStyle;
+}

crates/gpuikit/src/utils.rs

···
+pub mod element_manager;

crates/gpuikit/src/utils/element_manager.rs

···
+use gpui::{App, Global, SharedString};
+use std::sync::atomic::{AtomicUsize, Ordering};
+use std::sync::Arc;
+
+/// Powers gpuikit's syntactic sugar, allowing elements to not
+/// have to specify ids manually when created.
+#[derive(Debug, Clone)]
+pub struct ElementManager {
+    next_id: Arc<AtomicUsize>,
+}
+
+impl ElementManager {
+    pub fn new() -> Self {
+        Self {
+            next_id: Arc::new(AtomicUsize::new(0)),
+        }
+    }
+
+    /// Get the next button ID, incrementing the counter
+    pub fn id(&self) -> usize {
+        self.next_id.fetch_add(1, Ordering::SeqCst)
+    }
+
+    // Note: this is intentionally not pub
+    // we don't want to expose the current ID publicly
+    // as it could get used multiple times leading to collisions
+    #[allow(dead_code)]
+    fn current(&self) -> usize {
+        self.next_id.load(Ordering::SeqCst)
+    }
+}
+
+impl Default for ElementManager {
+    fn default() -> Self {
+        Self::new()
+    }
+}
+
+/// Global wrapper for ElementManager to make it accessible throughout the app
+#[derive(Debug, Clone)]
+pub struct GlobalElementManager(pub Arc<ElementManager>);
+
+impl GlobalElementManager {
+    pub fn new() -> Self {
+        Self(Arc::new(ElementManager::new()))
+    }
+}
+
+impl Default for GlobalElementManager {
+    fn default() -> Self {
+        Self::new()
+    }
+}
+
+impl std::ops::Deref for GlobalElementManager {
+    type Target = Arc<ElementManager>;
+
+    fn deref(&self) -> &Self::Target {
+        &self.0
+    }
+}
+
+impl std::ops::DerefMut for GlobalElementManager {
+    fn deref_mut(&mut self) -> &mut Self::Target {
+        &mut self.0
+    }
+}
+
+impl Global for GlobalElementManager {}
+
+/// Extension trait for App to access the element manager
+pub trait ElementManagerExt {
+    /// Get a reference to the global element manager
+    fn element_manager(&self) -> &Arc<ElementManager>;
+
+    /// Get the next button ID
+    fn next_id(&self) -> usize;
+
+    /// Get the next id as a `gpui::ElementId::NamedInteger`
+    fn next_id_named(&self, name: impl Into<SharedString>) -> gpui::ElementId;
+}
+
+impl ElementManagerExt for App {
+    fn element_manager(&self) -> &Arc<ElementManager> {
+        &self.global::<GlobalElementManager>().0
+    }
+
+    fn next_id(&self) -> usize {
+        self.element_manager().id()
+    }
+
+    fn next_id_named(&self, name: impl Into<SharedString>) -> gpui::ElementId {
+        let name = name.into();
+        let id = self.next_id();
+
+        gpui::ElementId::named_usize(name, id)
+    }
+}
+
+pub fn init(cx: &mut App) {
+    cx.set_global(GlobalElementManager::new());
+}
+
+#[cfg(test)]
+mod tests {
+    use super::*;
+
+    #[test]
+    fn test_element_manager_next() {
+        let manager = ElementManager::new();
+
+        assert_eq!(manager.id(), 0);
+        assert_eq!(manager.id(), 1);
+        assert_eq!(manager.id(), 2);
+    }
+
+    #[test]
+    fn test_element_manager_thread_safe() {
+        let manager = Arc::new(ElementManager::new());
+        let mut handles = vec![];
+
+        for _ in 0..10 {
+            let manager_clone = Arc::clone(&manager);
+            let handle = std::thread::spawn(move || {
+                for _ in 0..100 {
+                    manager_clone.id();
+                }
+            });
+            handles.push(handle);
+        }
+
+        for handle in handles {
+            handle.join().unwrap();
+        }
+
+        // Should have incremented 1000 times (10 threads * 100 increments each)
+        assert_eq!(manager.current(), 1000);
+    }
+}