feat: llimphi standalone — framework UI soberano extraído del monorepo

Motor gráfico Llimphi como workspace independiente: bucle Elm
(input→update→view→layout→raster→present) sobre wgpu+vello+taffy+parley.
Núcleo (hal/raster/layout/text/ui/theme/surface/motion/icons) + ~40 widgets
+ módulos, sin dependencias al resto del monorepo. cargo check --workspace
pasa (64 crates). Puerta de entrada: cargo run -p llimphi-ui --example counter.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

widgets/gallery/Cargo.toml

@@ -0,0 +1,31 @@
+[package]
+name = "llimphi-widget-gallery"
+version.workspace = true
+edition.workspace = true
+license.workspace = true
+authors.workspace = true
+publish.workspace = true
+description = "llimphi-widget-gallery — app demo que pinta todos los widgets de llimphi en una sola ventana. Pensado como referencia visual y como smoke test al introducir cambios al theme o a los widgets."
+
+[[bin]]
+name = "llimphi-widget-gallery"
+path = "src/main.rs"
+
+[dependencies]
+llimphi-ui = { workspace = true }
+llimphi-theme = { workspace = true }
+llimphi-widget-app-header = { workspace = true }
+llimphi-widget-banner = { workspace = true }
+llimphi-widget-button = { workspace = true }
+llimphi-widget-card = { workspace = true }
+llimphi-widget-list = { workspace = true }
+llimphi-widget-splitter = { workspace = true }
+llimphi-widget-stat-card = { workspace = true }
+llimphi-widget-tabs = { workspace = true }
+llimphi-widget-theme-switcher = { workspace = true }
+llimphi-widget-text-input = { workspace = true }
+llimphi-widget-tiled = { workspace = true }
+llimphi-widget-tree = { workspace = true }
+llimphi-widget-menubar = { workspace = true }
+llimphi-widget-context-menu = { workspace = true }
+app-bus = { workspace = true }

widgets/gallery/LEEME.md

@@ -0,0 +1,5 @@
+# llimphi-widget-gallery
+
+> Grid virtualizada de cards para [llimphi](../../README.md).
+
+Layout responsive con columnas auto-fit; cada card es `View<Msg>` libre. Reutiliza [`card`](../card/README.md).

widgets/gallery/README.md

@@ -0,0 +1,5 @@
+# llimphi-widget-gallery
+
+> Virtualized card grid for [llimphi](../../README.md).
+
+Responsive layout with auto-fit columns; each card is a free `View<Msg>`. Reuses [`card`](../card/README.md).

widgets/gallery/src/main.rs

@@ -0,0 +1,569 @@
+//! `llimphi-widget-gallery` — todos los widgets de Llimphi en una sola
+//! ventana. Útil como referencia visual y smoke test al cambiar el
+//! theme o cualquier widget.
+//!
+//! Corré con: `cargo run -p llimphi-widget-gallery --release`.
+
+use std::sync::Arc;
+
+use llimphi_theme::Theme;
+use llimphi_ui::llimphi_layout::taffy::{
+    prelude::{length, percent, FlexDirection, Size, Style},
+    Rect,
+};
+use llimphi_ui::llimphi_raster::peniko::Color;
+use llimphi_ui::llimphi_text::Alignment;
+use llimphi_ui::{App, DragPhase, Handle, View};
+use llimphi_widget_app_header::{app_header, AppHeaderPalette};
+use llimphi_widget_banner::{banner_view, BannerKind};
+use llimphi_widget_button::{button_view, ButtonPalette};
+use llimphi_widget_list::{list_view, ListPalette, ListRow, ListSpec};
+use llimphi_widget_splitter::{splitter_two, Direction, PaneSize, SplitterPalette};
+use llimphi_widget_stat_card::{stat_card_view, StatCardPalette};
+use llimphi_widget_tabs::{tabs_view, TabsPalette, TabsSpec};
+use llimphi_widget_text_input::{text_input_view, TextInputPalette, TextInputState};
+use llimphi_widget_theme_switcher::theme_switcher_view;
+use llimphi_widget_tiled::{tiled_view_reorderable, TileSpec, TiledPalette};
+use llimphi_widget_context_menu::{
+    context_menu_view, ContextMenuItem, ContextMenuPalette, ContextMenuSpec,
+};
+use llimphi_widget_menubar::{menubar_overlay, menubar_view, MenuBarSpec, DEFAULT_HEIGHT as MENU_H};
+
+use app_bus::{AppMenu, Menu, MenuItem};
+
+#[derive(Clone)]
+enum Msg {
+    EditKey(llimphi_ui::KeyEvent),
+    SelectRow(usize),
+    SelectTab(usize),
+    ClickAction(u32),
+    ResizeOuter(f32),
+    SwapTile { from: usize, to: usize },
+    ChangeTheme(Theme),
+    CycleTheme,
+    // --- Barra de menú + contextual ---
+    MenuOpen(Option<usize>),
+    MenuCommand(String),
+    CloseMenus,
+    ContextMenuOpen(f32, f32),
+}
+
+struct Model {
+    text: TextInputState,
+    list_sel: usize,
+    tab: usize,
+    last_action: Option<u32>,
+    left_w: f32,
+    tile_order: Vec<usize>,
+    theme: Theme,
+    /// Índice del menú raíz abierto en la barra (None = ninguno).
+    menu_open: Option<usize>,
+    /// Posición (en coords de ventana) del menú contextual, si está abierto.
+    context_menu: Option<(f32, f32)>,
+}
+
+struct Gallery;
+
+impl App for Gallery {
+    type Model = Model;
+    type Msg = Msg;
+
+    fn title() -> &'static str {
+        "llimphi · widget gallery"
+    }
+
+    fn initial_size() -> (u32, u32) {
+        (1280, 820)
+    }
+
+    fn init(_: &Handle<Msg>) -> Model {
+        Model {
+            text: TextInputState::new(),
+            list_sel: 0,
+            tab: 0,
+            last_action: None,
+            left_w: 380.0,
+            tile_order: vec![0, 1, 2, 3],
+            theme: Theme::dark(),
+            menu_open: None,
+            context_menu: None,
+        }
+    }
+
+    fn on_key(_: &Model, e: &llimphi_ui::KeyEvent) -> Option<Msg> {
+        Some(Msg::EditKey(e.clone()))
+    }
+
+    fn update(model: Model, msg: Msg, handle: &Handle<Msg>) -> Model {
+        let mut m = model;
+        match msg {
+            Msg::EditKey(ev) => {
+                m.text.apply_key(&ev);
+            }
+            Msg::SelectRow(i) => m.list_sel = i,
+            Msg::SelectTab(i) => m.tab = i,
+            Msg::ClickAction(id) => m.last_action = Some(id),
+            Msg::ResizeOuter(dx) => m.left_w = (m.left_w + dx).clamp(220.0, 800.0),
+            Msg::SwapTile { from, to } => {
+                if from != to && from < m.tile_order.len() && to < m.tile_order.len() {
+                    m.tile_order.swap(from, to);
+                }
+            }
+            Msg::ChangeTheme(t) => m.theme = t,
+            Msg::CycleTheme => m.theme = Theme::next_after(m.theme.name),
+            Msg::MenuOpen(which) => {
+                m.menu_open = which;
+                // Abrir un menú raíz cierra cualquier contextual.
+                m.context_menu = None;
+            }
+            Msg::CloseMenus => {
+                m.menu_open = None;
+                m.context_menu = None;
+            }
+            Msg::ContextMenuOpen(x, y) => {
+                m.menu_open = None;
+                m.context_menu = Some((x, y));
+            }
+            Msg::MenuCommand(cmd) => {
+                m.menu_open = None;
+                m.context_menu = None;
+                handle_menu_command(&cmd, &mut m, handle);
+            }
+        }
+        m
+    }
+
+    fn view(model: &Model) -> View<Msg> {
+        let theme = model.theme;
+        let menu = app_menu();
+        let menubar = menubar_view(&menubar_spec(&menu, model));
+        let header_palette = AppHeaderPalette::from_theme(&theme);
+        let btn_palette = ButtonPalette::from_theme(&theme);
+        let list_palette = ListPalette::from_theme(&theme);
+        let splitter_palette = SplitterPalette::from_theme(&theme);
+        let tabs_palette = TabsPalette::from_theme(&theme);
+        let stat_palette = StatCardPalette::from_theme(&theme);
+        let input_palette = TextInputPalette::from_theme(&theme);
+
+        // --- Header con acción a la derecha ---
+        let header = app_header(
+            format!(
+                "llimphi widget gallery · última acción: {}",
+                match model.last_action {
+                    Some(i) => format!("button #{i}"),
+                    None => "ninguna".to_string(),
+                }
+            ),
+            vec![
+                {
+                    let mut btn = button_view("acción A", &btn_palette, Msg::ClickAction(1));
+                    btn.style.size = Size {
+                        width: length(110.0_f32),
+                        height: length(28.0_f32),
+                    };
+                    btn
+                },
+                {
+                    let mut btn = button_view("acción B", &btn_palette, Msg::ClickAction(2));
+                    btn.style.size = Size {
+                        width: length(110.0_f32),
+                        height: length(28.0_f32),
+                    };
+                    btn
+                },
+                theme_switcher_view::<Msg>(&theme, Msg::ChangeTheme),
+            ],
+            &header_palette,
+        );
+
+        // --- Panel izquierdo: lista virtualizada ---
+        let entries = (0..40)
+            .map(|i| format!("entry {:02}", i))
+            .collect::<Vec<_>>();
+        let visible_rows: Vec<ListRow<Msg>> = entries
+            .iter()
+            .enumerate()
+            .take(20)
+            .map(|(i, label)| ListRow {
+                label: label.clone(),
+                selected: i == model.list_sel,
+                on_click: Msg::SelectRow(i),
+            })
+            .collect();
+        let list = list_view(ListSpec {
+            rows: visible_rows,
+            total: entries.len(),
+            caption: Some(format!("{} entradas", entries.len())),
+            truncated_hint: Some(format!("… y {} más", entries.len() - 20)),
+            row_height: 22.0,
+            palette: list_palette,
+        });
+
+        // --- Panel derecho: tabs con stat cards + banners + input + tiled ---
+        let tiled_palette = TiledPalette::from_theme(&theme);
+        let tab_content = match model.tab {
+            0 => stats_pane(&theme, &stat_palette),
+            1 => alerts_pane(),
+            2 => input_pane(&model.text, &input_palette, &theme),
+            _ => tiled_pane(&theme, &tiled_palette, &model.tile_order),
+        };
+        let tabs = tabs_view(TabsSpec {
+            labels: vec!["Stats".into(), "Banners".into(), "Input".into(), "Tiled".into()],
+            active: model.tab,
+            on_select: Msg::SelectTab,
+            content: tab_content,
+            tab_height: 32.0,
+            palette: tabs_palette,
+            tab_width: Some(120.0),
+        });
+
+        let body = splitter_two(
+            Direction::Row,
+            list,
+            PaneSize::Fixed(model.left_w),
+            tabs,
+            PaneSize::Flex,
+            |phase, dx| match phase {
+                DragPhase::Move => Some(Msg::ResizeOuter(dx)),
+                DragPhase::End => None,
+            },
+            &splitter_palette,
+        );
+
+        View::new(Style {
+            flex_direction: FlexDirection::Column,
+            size: Size {
+                width: percent(1.0_f32),
+                height: percent(1.0_f32),
+            },
+            ..Default::default()
+        })
+        .fill(theme.bg_app)
+        // Origen (0,0) ⇒ las coords locales del right-click son coords de
+        // ventana, listas para anclar el contextual.
+        .on_right_click_at(|x, y, _, _| Some(Msg::ContextMenuOpen(x, y)))
+        .children(vec![menubar, header, body])
+    }
+
+    fn view_overlay(model: &Model) -> Option<View<Msg>> {
+        // Prioridad: contextual sobre el dropdown del menú principal.
+        if let Some((x, y)) = model.context_menu {
+            return Some(context_menu_for_gallery(model, x, y));
+        }
+        let menu = app_menu();
+        menubar_overlay(&menubar_spec(&menu, model))
+    }
+}
+
+// ---------------------------------------------------------------------
+// Menú principal (barra) + contextual
+// ---------------------------------------------------------------------
+
+/// Viewport para clampear overlays. La gallery no trackea el tamaño real
+/// de ventana, así que usamos las constantes de `initial_size()`.
+fn viewport_of(_model: &Model) -> (f32, f32) {
+    let (w, h) = Gallery::initial_size();
+    (w as f32, h as f32)
+}
+
+/// `MenuBarSpec` compartido por `menubar_view` y `menubar_overlay`.
+fn menubar_spec<'a>(menu: &'a AppMenu, model: &'a Model) -> MenuBarSpec<'a, Msg> {
+    MenuBarSpec {
+        menu,
+        open: model.menu_open,
+        theme: &model.theme,
+        viewport: viewport_of(model),
+        height: MENU_H,
+        on_open: Arc::new(Msg::MenuOpen),
+        on_command: Arc::new(|c: &str| Msg::MenuCommand(c.to_string())),
+    }
+}
+
+/// Menú principal de la vitrina. Archivo / Ver / Ayuda — sólo comandos que
+/// mapean a `Msg` reales. No hay "Editar": el único campo de texto es el
+/// `text_input` del tab Input, que ya recibe teclas por `on_key`.
+fn app_menu() -> AppMenu {
+    AppMenu::new()
+        .menu(
+            Menu::new("Archivo").item(MenuItem::new("Salir", "file.quit").shortcut("Esc")),
+        )
+        .menu(
+            Menu::new("Ver")
+                .item(MenuItem::new("Cambiar tema", "view.theme"))
+                .item(MenuItem::new("Pestaña: Stats", "view.tab.0").separated())
+                .item(MenuItem::new("Pestaña: Banners", "view.tab.1"))
+                .item(MenuItem::new("Pestaña: Input", "view.tab.2"))
+                .item(MenuItem::new("Pestaña: Tiled", "view.tab.3")),
+        )
+        .menu(Menu::new("Ayuda").item(MenuItem::new("Acerca de", "help.about")))
+}
+
+/// Traduce un command id (de la barra o del contextual) al `Msg` real y lo
+/// aplica. `file.quit` cierra el proceso directo (no hay diálogo).
+fn handle_menu_command(cmd: &str, m: &mut Model, handle: &Handle<Msg>) {
+    match cmd {
+        "file.quit" => std::process::exit(0),
+        // Reusa el Msg de ciclo de tema en vez de duplicar la lógica.
+        "view.theme" => handle.dispatch(Msg::CycleTheme),
+        "view.tab.0" => m.tab = 0,
+        "view.tab.1" => m.tab = 1,
+        "view.tab.2" => m.tab = 2,
+        "view.tab.3" => m.tab = 3,
+        // "help.about" y desconocidos: no-op (sin diálogo todavía).
+        _ => {}
+    }
+}
+
+/// Menú contextual de la vitrina. No hay objeto seleccionable en un canvas:
+/// el "ítem seleccionado" es la entrada resaltada de la lista izquierda, así
+/// que el contextual la nombra y ofrece navegar las pestañas + cambiar tema.
+fn context_menu_for_gallery(model: &Model, x: f32, y: f32) -> View<Msg> {
+    let header = format!("entrada seleccionada: {:02}", model.list_sel);
+
+    let items = vec![
+        ContextMenuItem::action("Cambiar tema"),
+        ContextMenuItem::separator(),
+        ContextMenuItem::action("Pestaña: Stats"),
+        ContextMenuItem::action("Pestaña: Banners"),
+        ContextMenuItem::action("Pestaña: Input"),
+        ContextMenuItem::action("Pestaña: Tiled"),
+    ];
+    // Mapeo índice de item → command id de `handle_menu_command`.
+    let cmds: Vec<&'static str> = vec![
+        "view.theme",
+        "",
+        "view.tab.0",
+        "view.tab.1",
+        "view.tab.2",
+        "view.tab.3",
+    ];
+    let on_pick: Arc<dyn Fn(usize) -> Msg + Send + Sync> = Arc::new(move |i: usize| {
+        Msg::MenuCommand(cmds.get(i).copied().unwrap_or("").to_string())
+    });
+
+    context_menu_view(ContextMenuSpec {
+        anchor: (x, y),
+        viewport: viewport_of(model),
+        header: Some(header),
+        items,
+        active: usize::MAX,
+        on_pick,
+        on_dismiss: Msg::CloseMenus,
+        palette: ContextMenuPalette::from_theme(&model.theme),
+    })
+}
+
+// ---------------------------------------------------------------------
+// Paneles de tabs
+// ---------------------------------------------------------------------
+
+fn stats_pane(theme: &Theme, palette: &StatCardPalette) -> View<Msg> {
+    let valid = Color::from_rgba8(94, 184, 124, 255);
+    let warn = Color::from_rgba8(238, 178, 53, 255);
+    let danger = Color::from_rgba8(225, 84, 75, 255);
+
+    let row = View::new(Style {
+        flex_direction: FlexDirection::Row,
+        size: Size {
+            width: percent(1.0_f32),
+            height: length(160.0_f32),
+        },
+        gap: Size {
+            width: length(12.0_f32),
+            height: length(0.0_f32),
+        },
+        ..Default::default()
+    })
+    .children(vec![
+        wrap_card_cell(stat_card_view::<Msg>(
+            "Coherencia",
+            "247",
+            "átomos válidos",
+            valid,
+            &[],
+            palette,
+        )),
+        wrap_card_cell(stat_card_view::<Msg>(
+            "Por evaluar",
+            "12",
+            "esperando re-cómputo",
+            warn,
+            &[],
+            palette,
+        )),
+        wrap_card_cell(stat_card_view::<Msg>(
+            "En conflicto",
+            "3",
+            "contradicen su origen",
+            danger,
+            &[
+                "puerta_amanecer".into(),
+                "muelle_soledad".into(),
+                "viento_nuevo".into(),
+            ],
+            palette,
+        )),
+    ]);
+
+    let _ = theme;
+    View::new(Style {
+        flex_direction: FlexDirection::Column,
+        size: Size {
+            width: percent(1.0_f32),
+            height: percent(1.0_f32),
+        },
+        padding: Rect {
+            left: length(20.0_f32),
+            right: length(20.0_f32),
+            top: length(20.0_f32),
+            bottom: length(20.0_f32),
+        },
+        ..Default::default()
+    })
+    .children(vec![row])
+}
+
+fn wrap_card_cell(view: View<Msg>) -> View<Msg> {
+    View::new(Style {
+        size: Size {
+            width: percent(1.0_f32),
+            height: percent(1.0_f32),
+        },
+        flex_grow: 1.0,
+        ..Default::default()
+    })
+    .children(vec![view])
+}
+
+fn alerts_pane() -> View<Msg> {
+    View::new(Style {
+        flex_direction: FlexDirection::Column,
+        size: Size {
+            width: percent(1.0_f32),
+            height: percent(1.0_f32),
+        },
+        gap: Size {
+            width: length(0.0_f32),
+            height: length(10.0_f32),
+        },
+        padding: Rect {
+            left: length(20.0_f32),
+            right: length(20.0_f32),
+            top: length(20.0_f32),
+            bottom: length(20.0_f32),
+        },
+        ..Default::default()
+    })
+    .children(vec![
+        banner_view(BannerKind::Info, "info: gallery iniciada con widgets verdes"),
+        banner_view(BannerKind::Success, "success: 12 widgets cargados ok"),
+        banner_view(BannerKind::Warning, "warning: el tema light aún tiene contraste subóptimo"),
+        banner_view(BannerKind::Error, "error: ningún error real — sólo un demo"),
+    ])
+}
+
+fn input_pane(state: &TextInputState, palette: &TextInputPalette, theme: &Theme) -> View<Msg> {
+    let label = View::new(Style {
+        size: Size {
+            width: percent(1.0_f32),
+            height: length(18.0_f32),
+        },
+        ..Default::default()
+    })
+    .text_aligned(
+        "Probá tipear acá:".to_string(),
+        12.0,
+        theme.fg_muted,
+        Alignment::Start,
+    );
+    let input = text_input_view(
+        state,
+        "lo que sea",
+        true, // siempre focado en este demo
+        palette,
+        Msg::ClickAction(0),
+    );
+
+    View::new(Style {
+        flex_direction: FlexDirection::Column,
+        size: Size {
+            width: percent(1.0_f32),
+            height: percent(1.0_f32),
+        },
+        gap: Size {
+            width: length(0.0_f32),
+            height: length(8.0_f32),
+        },
+        padding: Rect {
+            left: length(20.0_f32),
+            right: length(20.0_f32),
+            top: length(20.0_f32),
+            bottom: length(20.0_f32),
+        },
+        ..Default::default()
+    })
+    .children(vec![label, input])
+}
+
+fn tiled_pane(theme: &Theme, palette: &TiledPalette, order: &[usize]) -> View<Msg> {
+    let body = |text: &str, size: f32, color: Color, align: Alignment| -> View<Msg> {
+        View::new(Style {
+            size: Size {
+                width: percent(1.0_f32),
+                height: percent(1.0_f32),
+            },
+            flex_grow: 1.0,
+            padding: Rect {
+                left: length(12.0_f32),
+                right: length(12.0_f32),
+                top: length(10.0_f32),
+                bottom: length(10.0_f32),
+            },
+            ..Default::default()
+        })
+        .text_aligned(text.to_string(), size, color, align)
+    };
+
+    let make_tile = |id: usize| -> TileSpec<Msg> {
+        match id {
+            0 => TileSpec {
+                label: "logs".into(),
+                content: body(
+                    "[12:01] boot\n[12:02] config ok\n[12:03] esperando…",
+                    12.0,
+                    theme.fg_text,
+                    Alignment::Start,
+                ),
+            },
+            1 => TileSpec {
+                label: "métricas".into(),
+                content: body("cpu 37%\nram 1.2 G\nnet 12 kB/s", 12.0, theme.fg_text, Alignment::Start),
+            },
+            2 => TileSpec {
+                label: "uptime".into(),
+                content: body("4d 12h", 26.0, theme.accent, Alignment::Center),
+            },
+            _ => TileSpec {
+                label: "queue".into(),
+                content: body(
+                    "pending 7\nin-flight 2\ndone 1842",
+                    12.0,
+                    theme.fg_text,
+                    Alignment::Start,
+                ),
+            },
+        }
+    };
+
+    let tiles: Vec<TileSpec<Msg>> = order.iter().map(|&id| make_tile(id)).collect();
+
+    tiled_view_reorderable(
+        tiles,
+        |from, to| Some(Msg::SwapTile { from, to }),
+        palette,
+    )
+}
+
+fn main() {
+    llimphi_ui::run::<Gallery>();
+}