cronixui 1.0.6 → 1.1.1

package/packages/rust/cronixui/src/components/card.rs

@@ -0,0 +1,259 @@
+//! Card component
+
+use egui::*;
+use crate::{colors::*, tokens::*};
+
+/// Icon component for Card header
+pub struct CardIcon {
+    pub icon: String,
+    pub size: f32,
+}
+
+impl CardIcon {
+    pub fn new(icon: impl Into<String>) -> Self {
+        Self { icon: icon.into(), size: tokens::FONT_SIZE_LG }
+    }
+
+    pub fn size(mut self, size: f32) -> Self {
+        self.size = size;
+        self
+    }
+
+    pub fn show(&self, ui: &mut Ui) {
+        let colors = Colors::default();
+        ui.label(
+            RichText::new(&self.icon)
+                .size(self.size)
+                .color(colors.text_muted),
+        );
+    }
+}
+
+/// Title component
+pub struct CardTitle {
+    pub text: String,
+    pub size: f32,
+}
+
+impl CardTitle {
+    pub fn new(text: impl Into<String>) -> Self {
+        Self { text: text.into(), size: tokens::FONT_SIZE_MD }
+    }
+
+    pub fn size(mut self, size: f32) -> Self {
+        self.size = size;
+        self
+    }
+
+    pub fn show(&self, ui: &mut Ui) {
+        let colors = Colors::default();
+        ui.label(
+            RichText::new(&self.text)
+                .size(self.size)
+                .color(colors.text)
+                .strong(),
+        );
+    }
+}
+
+/// Subtitle component
+pub struct CardSubtitle {
+    pub text: String,
+    pub size: f32,
+}
+
+impl CardSubtitle {
+    pub fn new(text: impl Into<String>) -> Self {
+        Self { text: text.into(), size: tokens::FONT_SIZE_SM }
+    }
+
+    pub fn size(mut self, size: f32) -> Self {
+        self.size = size;
+        self
+    }
+
+    pub fn show(&self, ui: &mut Ui) {
+        let colors = Colors::default();
+        ui.label(
+            RichText::new(&self.text)
+                .size(self.size)
+                .color(colors.text_muted),
+        );
+    }
+}
+
+/// Card header component (combines icon, title, subtitle)
+pub struct CardHeader {
+    pub icon: Option<CardIcon>,
+    pub title: Option<CardTitle>,
+    pub subtitle: Option<CardSubtitle>,
+}
+
+impl CardHeader {
+    pub fn new() -> Self {
+        Self { icon: None, title: None, subtitle: None }
+    }
+
+    pub fn icon(mut self, icon: CardIcon) -> Self {
+        self.icon = Some(icon);
+        self
+    }
+
+    pub fn title(mut self, title: CardTitle) -> Self {
+        self.title = Some(title);
+        self
+    }
+
+    pub fn subtitle(mut self, subtitle: CardSubtitle) -> Self {
+        self.subtitle = Some(subtitle);
+        self
+    }
+
+    pub fn show(&self, ui: &mut Ui) {
+        ui.horizontal(|ui| {
+            if let Some(icon) = &self.icon {
+                icon.show(ui);
+                ui.add_space(tokens::SPACE_2);
+            }
+
+            ui.vertical(|ui| {
+                if let Some(title) = &self.title {
+                    title.show(ui);
+                }
+                if let Some(subtitle) = &self.subtitle {
+                    subtitle.show(ui);
+                }
+            });
+        });
+    }
+}
+
+impl Default for CardHeader {
+    fn default() -> Self {
+        Self::new()
+    }
+}
+
+/// Card body component
+pub struct CardBody;
+
+impl CardBody {
+    pub fn new() -> Self {
+        Self
+    }
+
+    pub fn show<R>(&self, ui: &mut Ui, add_contents: impl FnOnce(&mut Ui) -> R) {
+        add_contents(ui);
+    }
+}
+
+impl Default for CardBody {
+    fn default() -> Self {
+        Self::new()
+    }
+}
+
+/// Card footer component
+pub struct CardFooter {
+    pub separator: bool,
+}
+
+impl CardFooter {
+    pub fn new() -> Self {
+        Self { separator: true }
+    }
+
+    pub fn separator(mut self, separator: bool) -> Self {
+        self.separator = separator;
+        self
+    }
+
+    pub fn show<R>(&self, ui: &mut Ui, add_contents: impl FnOnce(&mut Ui) -> R) {
+        if self.separator {
+            ui.separator();
+            ui.add_space(tokens::SPACE_2);
+        }
+        add_contents(ui);
+    }
+}
+
+impl Default for CardFooter {
+    fn default() -> Self {
+        Self::new()
+    }
+}
+
+/// Main Card component with builder pattern
+pub struct Card {
+    pub header: Option<CardHeader>,
+    pub clickable: bool,
+}
+
+impl Card {
+    pub fn new() -> Self {
+        Self { header: None, clickable: false }
+    }
+
+    pub fn title(mut self, title: impl Into<String>) -> Self {
+        let title_comp = CardTitle::new(title);
+        self.header = Some(
+            self.header.unwrap_or_else(CardHeader::new).title(title_comp),
+        );
+        self
+    }
+
+    pub fn subtitle(mut self, subtitle: impl Into<String>) -> Self {
+        let subtitle_comp = CardSubtitle::new(subtitle);
+        self.header = Some(
+            self.header.unwrap_or_else(CardHeader::new).subtitle(subtitle_comp),
+        );
+        self
+    }
+
+    pub fn icon(mut self, icon: impl Into<String>) -> Self {
+        let icon_comp = CardIcon::new(icon);
+        self.header = Some(
+            self.header.unwrap_or_else(CardHeader::new).icon(icon_comp),
+        );
+        self
+    }
+
+    pub fn header(mut self, header: CardHeader) -> Self {
+        self.header = Some(header);
+        self
+    }
+
+    pub fn clickable(mut self, clickable: bool) -> Self {
+        self.clickable = clickable;
+        self
+    }
+
+    pub fn show<R>(&self, ui: &mut Ui, add_contents: impl FnOnce(&mut Ui) -> R) -> Response {
+        let colors = Colors::default();
+
+        let frame = egui::Frame::none()
+            .fill(colors.surface)
+            .stroke(Stroke::new(1.0, colors.border))
+            .rounding(Rounding::same(RADIUS_LG))
+            .inner_margin(SPACE_5);
+
+        let inner_response = frame.show(ui, |ui| {
+            // Render header if present
+            if let Some(header) = &self.header {
+                header.show(ui);
+                ui.add_space(SPACE_4);
+            }
+
+            // Render body
+            add_contents(ui)
+        });
+
+        inner_response.response
+    }
+}
+
+impl Default for Card {
+    fn default() -> Self {
+        Self::new()
+    }
+}

package/packages/rust/cronixui/src/components/command_palette.rs

@@ -0,0 +1,254 @@
+//! Command palette component
+
+use egui::*;
+use crate::{colors::*, tokens::*};
+
+pub struct CommandItem {
+    pub title: String,
+    pub subtitle: Option<String>,
+    pub kbd: Option<String>,
+}
+
+impl CommandItem {
+    pub fn new(title: impl Into<String>) -> Self {
+        Self { title: title.into(), subtitle: None, kbd: None }
+    }
+
+    pub fn subtitle(mut self, subtitle: impl Into<String>) -> Self {
+        self.subtitle = Some(subtitle.into());
+        self
+    }
+
+    pub fn kbd(mut self, kbd: impl Into<String>) -> Self {
+        self.kbd = Some(kbd.into());
+        self
+    }
+}
+
+pub struct CommandPalette {
+    pub items: Vec<CommandItem>,
+    pub query: String,
+    pub open: bool,
+    pub selected_index: usize,
+    id: Id,
+}
+
+impl CommandPalette {
+    pub fn new(id: impl Into<Id>) -> Self {
+        Self { items: Vec::new(), query: String::new(), open: false, selected_index: 0, id: id.into() }
+    }
+
+    pub fn item(mut self, item: CommandItem) -> Self {
+        self.items.push(item);
+        self
+    }
+
+    pub fn set_items(&mut self, items: Vec<CommandItem>) {
+        self.items = items;
+    }
+
+    pub fn open(&mut self) {
+        self.open = true;
+        self.query.clear();
+        self.selected_index = 0;
+    }
+
+    pub fn close(&mut self) {
+        self.open = false;
+        self.query.clear();
+        self.selected_index = 0;
+    }
+
+    pub fn toggle(&mut self) {
+        if self.open {
+            self.close();
+        } else {
+            self.open();
+        }
+    }
+
+    pub fn filter(&self) -> Vec<&CommandItem> {
+        if self.query.is_empty() {
+            return self.items.iter().collect();
+        }
+        self.items
+            .iter()
+            .filter(|item| item.title.to_lowercase().contains(&self.query.to_lowercase()))
+            .collect()
+    }
+
+    /// Render the command palette as a modal dialog
+    /// Returns the index of the selected command (into the filtered list)
+    pub fn show(&mut self, ctx: &egui::Context) -> Option<usize> {
+        if !self.open {
+            return None;
+        }
+
+        let colors = Colors::default();
+        let mut result = None;
+
+        // Modal backdrop
+        egui::Area::new(self.id.with("backdrop"))
+            .order(Order::Foreground)
+            .interactable(true)
+            .show(ctx, |ui| {
+                let screen_size = ctx.screen_rect().size();
+                ui.set_min_size(screen_size);
+
+                // Semi-transparent backdrop
+                let painter = ui.painter_at(ui.max_rect());
+                painter.rect_filled(
+                    ui.max_rect(),
+                    Rounding::ZERO,
+                    Color32::from_black_alpha(150),
+                );
+
+                // Command palette panel centered on screen
+                let panel_width = 500.0;
+                let panel_height = 400.0;
+
+                egui::Frame::none()
+                    .fill(colors.surface)
+                    .stroke(egui::Stroke::new(1.0, colors.border))
+                    .rounding(Rounding::same(tokens::RADIUS_LG))
+                    .shadow(egui::Shadow {
+                        offset: [0.0, 8.0].into(),
+                        blur: 24.0,
+                        spread: 0.0,
+                        color: Color32::from_black_alpha(100),
+                    })
+                    .show(ui, |ui| {
+                        ui.set_min_size(vec2(panel_width, panel_height));
+
+                        // Search input at top
+                        ui.horizontal(|ui| {
+                            ui.label("⌘");
+                            let response = ui.add(
+                                TextEdit::singleline(&mut self.query)
+                                    .hint_text("Type a command...")
+                                    .desired_width(f32::INFINITY)
+                                    .font(FontId::new(tokens::FONT_SIZE_BASE, FontFamily::Proportional)),
+                            );
+
+                            if response.has_focus() {
+                                // Handle keyboard navigation
+                                if ui.input(|i| i.key_pressed(Key::ArrowDown)) {
+                                    let filtered = self.filter();
+                                    if !filtered.is_empty() {
+                                        self.selected_index = (self.selected_index + 1) % filtered.len();
+                                    }
+                                }
+                                if ui.input(|i| i.key_pressed(Key::ArrowUp)) {
+                                    let filtered = self.filter();
+                                    if !filtered.is_empty() {
+                                        self.selected_index = if self.selected_index == 0 {
+                                            filtered.len() - 1
+                                        } else {
+                                            self.selected_index - 1
+                                        };
+                                    }
+                                }
+                                if ui.input(|i| i.key_pressed(Key::Enter)) {
+                                    result = Some(self.selected_index);
+                                }
+                                if ui.input(|i| i.key_pressed(Key::Escape)) {
+                                    self.close();
+                                }
+                            }
+                        });
+
+                        ui.add_space(SPACE_2);
+
+                        // Separator
+                        ui.separator();
+
+                        ui.add_space(SPACE_2);
+
+                        // Command list
+                        let filtered = self.filter();
+                        if !filtered.is_empty() {
+                            // Ensure selected_index is valid
+                            if self.selected_index >= filtered.len() {
+                                self.selected_index = 0;
+                            }
+
+                            egui::ScrollArea::vertical()
+                                .max_height(280.0)
+                                .show(ui, |ui| {
+                                    for (idx, item) in filtered.iter().enumerate() {
+                                        let is_selected = idx == self.selected_index;
+
+                                        let response = ui.horizontal(|ui| {
+                                            if is_selected {
+                                                ui.label(
+                                                    RichText::new("→")
+                                                        .size(tokens::FONT_SIZE_BASE)
+                                                        .color(colors.accent_text),
+                                                );
+                                            } else {
+                                                ui.add_space(SPACE_4);
+                                            }
+
+                                            ui.label(
+                                                RichText::new(&item.title)
+                                                    .size(tokens::FONT_SIZE_BASE)
+                                                    .color(if is_selected { colors.accent_text } else { colors.text }),
+                                            );
+
+                                            if let Some(subtitle) = &item.subtitle {
+                                                ui.label(
+                                                    RichText::new(subtitle)
+                                                        .size(tokens::FONT_SIZE_SM)
+                                                        .color(colors.text_muted),
+                                                );
+                                            }
+
+                                            if let Some(kbd) = &item.kbd {
+                                                ui.with_layout(egui::Layout::right_to_left(Align::Center), |ui| {
+                                                    egui::Frame::none()
+                                                        .fill(colors.surface_3)
+                                                        .stroke(egui::Stroke::new(1.0, colors.border))
+                                                        .rounding(Rounding::same(tokens::RADIUS_SM))
+                                                        .inner_margin(vec2(SPACE_2, SPACE_1))
+                                                        .show(ui, |ui| {
+                                                            ui.label(
+                                                                RichText::new(kbd)
+                                                                    .size(tokens::FONT_SIZE_XS)
+                                                                    .color(colors.text_muted)
+                                                                    .font(FontFamily::Monospace),
+                                                            );
+                                                        });
+                                                });
+                                            }
+                                        });
+
+                                        if response.response.clicked() {
+                                            result = Some(idx);
+                                        }
+                                    }
+                                });
+                        } else if !self.query.is_empty() {
+                            ui.centered_and_justified(|ui| {
+                                ui.label(
+                                    RichText::new("No commands found")
+                                        .size(tokens::FONT_SIZE_SM)
+                                        .color(colors.text_muted),
+                                );
+                            });
+                        }
+                    });
+            });
+
+        if result.is_some() {
+            self.close();
+        }
+
+        result
+    }
+}
+
+impl Default for CommandPalette {
+    fn default() -> Self {
+        Self::new("default_command_palette")
+    }
+}

package/packages/rust/cronixui/src/components/dropdown.rs

@@ -0,0 +1,179 @@
+//! Dropdown component
+
+use egui::*;
+use crate::{colors::*, tokens::*};
+
+/// Dropdown component with full rendering
+pub struct Dropdown {
+    pub items: Vec<String>,
+    pub selected: Option<usize>,
+    pub open: bool,
+    id: Id,
+}
+
+impl Dropdown {
+    pub fn new(id: impl Into<Id>, items: impl IntoIterator<Item = impl Into<String>>) -> Self {
+        Self {
+            id: id.into(),
+            items: items.into_iter().map(|s| s.into()).collect(),
+            selected: None,
+            open: false,
+        }
+    }
+
+    pub fn selected(mut self, index: usize) -> Self {
+        if index < self.items.len() {
+            self.selected = Some(index);
+        }
+        self
+    }
+
+    pub fn select(&mut self, index: usize) {
+        if index < self.items.len() {
+            self.selected = Some(index);
+        }
+    }
+
+    pub fn toggle(&mut self) {
+        self.open = !self.open;
+    }
+
+    pub fn close(&mut self) {
+        self.open = false;
+    }
+
+    pub fn selected_text(&self) -> Option<&str> {
+        self.selected.map(|i| self.items[i].as_str())
+    }
+
+    /// Render the dropdown trigger button and popup.
+    /// Returns Some(index) when an item is selected.
+    pub fn show(&mut self, ui: &mut Ui) -> Option<usize> {
+        let colors = Colors::default();
+        let label = self.selected_text().unwrap_or("Select an option...");
+
+        let response = ui.add_sized(
+            [ui.available_width(), 28.0],
+            egui::Button::new(label)
+                .fill(colors.surface_2)
+                .stroke(egui::Stroke::new(1.0, colors.border))
+                .rounding(Rounding::same(tokens::RADIUS)),
+        );
+
+        if response.clicked() {
+            self.open = !self.open;
+        }
+
+        // Sync open state with egui memory
+        if self.open {
+            ui.memory_mut(|mem| mem.open_popup(self.id));
+        } else {
+            ui.memory_mut(|mem| mem.close_popup());
+        }
+
+        if !self.open {
+            return None;
+        }
+
+        let items = &self.items;
+        let selected = self.selected;
+        let popup_id = self.id;
+
+        egui::popup::popup_below_widget(ui, popup_id, &response, |ui| {
+            // popup_below_widget already wraps in Frame::popup
+            // Customize the style colors for our theme
+            for (i, item) in items.iter().enumerate() {
+                let is_selected = selected == Some(i);
+                let text = if is_selected {
+                    format!("✓ {}", item)
+                } else {
+                    item.clone()
+                };
+
+                if ui.selectable_label(is_selected, text).clicked() {
+                    ui.memory_mut(|m| {
+                        m.data.insert_temp(popup_id.with("chosen"), Some(i));
+                        m.close_popup();
+                    });
+                }
+            }
+        });
+
+        // Check if popup is still open
+        let still_open = ui.memory(|mem| mem.is_popup_open(popup_id));
+        if !still_open {
+            self.open = false;
+            let chosen = ui.memory_mut(|m| m.data.get_temp::<usize>(popup_id.with("chosen")));
+            if let Some(idx) = chosen {
+                self.selected = Some(idx);
+                ui.memory_mut(|m| m.data.remove::<usize>(popup_id.with("chosen")));
+                return Some(idx);
+            }
+        }
+
+        // Also check result for chosen item stored in memory
+        let chosen = ui.memory_mut(|m| m.data.get_temp::<usize>(popup_id.with("chosen")));
+        if let Some(idx) = chosen {
+            self.selected = Some(idx);
+            self.open = false;
+            ui.memory_mut(|m| m.data.remove::<usize>(popup_id.with("chosen")));
+            return Some(idx);
+        }
+
+        None
+    }
+}
+
+/// Functional dropdown helper
+pub fn dropdown(ui: &mut Ui, id: impl Into<Id>, items: &[String], selected: &mut Option<usize>) {
+    let colors = Colors::default();
+    let popup_id = id.into();
+
+    let label = selected
+        .and_then(|i| items.get(i))
+        .map(|s| s.as_str())
+        .unwrap_or("Select an option...");
+
+    let response = ui.add_sized(
+        [ui.available_width(), 28.0],
+        egui::Button::new(label)
+            .fill(colors.surface_2)
+            .stroke(egui::Stroke::new(1.0, colors.border))
+            .rounding(Rounding::same(tokens::RADIUS)),
+    );
+
+    if response.clicked() {
+        ui.memory_mut(|mem| {
+            if mem.is_popup_open(popup_id) {
+                mem.close_popup();
+            } else {
+                mem.open_popup(popup_id);
+            }
+        });
+    }
+
+    let is_open = ui.memory(|mem| mem.is_popup_open(popup_id));
+
+    if is_open {
+        let current_selected = *selected;
+        egui::popup::popup_below_widget(ui, popup_id, &response, |ui| {
+            for (i, item) in items.iter().enumerate() {
+                let is_sel = current_selected == Some(i);
+                let text = if is_sel { format!("✓ {}", item) } else { item.clone() };
+                if ui.selectable_label(is_sel, text).clicked() {
+                    ui.memory_mut(|m| {
+                        m.data.insert_temp(popup_id.with("result"), i);
+                        m.close_popup();
+                    });
+                }
+            }
+        });
+
+        // Check result
+        let result = ui.memory_mut(|m| m.data.get_temp::<usize>(popup_id.with("result")));
+        if let Some(idx) = result {
+            *selected = Some(idx);
+            ui.memory_mut(|m| m.data.remove::<usize>(popup_id.with("result")));
+        }
+    }
+}