elit 3.4.8 → 3.4.9

package/README.md

@@ -76,6 +76,8 @@ Elit now includes a practical native-generation foundation that keeps the existi
 
 That same foundation also feeds native desktop mode: Elit resolves one shared native tree and style/layout model, then emits IR, Compose, SwiftUI, or native desktop output from it. Public `elit/native` APIs stay the same while parity fixes and native CSS-subset improvements can land across outputs together.
 
+On the desktop-native backend, renderer responsibilities are now split internally by concern too: widget rendering, content and media surfaces, form controls, container layout, vector drawing, interaction dispatch, runtime support, and app orchestration no longer live in one monolithic renderer file. That does not change the public API, but it makes parity fixes for buttons, inputs, media surfaces, layout, and vector output safer to land across desktop native, IR, Compose, and SwiftUI outputs without forking the shared native tree contract.
+
 ```ts
 import { a, button, div, h1, img, input } from 'elit/el';
 import { renderNativeTree } from 'elit/native';

package/dist/cli.js

@@ -59399,7 +59399,7 @@ var require_package3 = __commonJS({
   "package.json"(exports2, module2) {
     module2.exports = {
       name: "elit",
-      version: "3.4.8",
+      version: "3.4.9",
       description: "Optimized lightweight library for creating DOM elements with reactive state",
       main: "dist/index.js",
       module: "dist/index.mjs",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "elit",
-  "version": "3.4.8",
+  "version": "3.4.9",
   "description": "Optimized lightweight library for creating DOM elements with reactive state",
   "main": "dist/index.js",
   "module": "dist/index.mjs",

package/src/desktop/native_renderer/action_widgets.rs

@@ -0,0 +1,184 @@
+use eframe::egui::{self, Vec2};
+use serde_json::Value;
+
+use super::utilities::{is_external_destination, resolve_interaction};
+use super::{DesktopNativeApp, NativeElementNode, NativeNode};
+
+impl DesktopNativeApp {
+    pub(super) fn render_button(&mut self, ui: &mut egui::Ui, ctx: &egui::Context, node: &NativeElementNode) {
+        let label = self.collect_text_content(&NativeNode::Element(node.clone()));
+        let disabled = self.is_disabled(node);
+        let base_state = self.base_pseudo_state(node);
+        let inactive_style = self.resolve_style_map_with_state(node, base_state);
+
+        let mut hovered_state = base_state;
+        hovered_state.hovered = true;
+        let hovered_style = self.resolve_style_map_with_state(node, hovered_state);
+
+        let mut active_state = hovered_state;
+        active_state.active = true;
+        let active_style = self.resolve_style_map_with_state(node, active_state);
+
+        let mut focus_state = base_state;
+        focus_state.focused = true;
+        focus_state.focus_within = true;
+        let focus_style = self.resolve_style_map_with_state(node, focus_state);
+
+        let mut disabled_state = base_state;
+        disabled_state.enabled = false;
+        disabled_state.disabled = true;
+        let disabled_style = self.resolve_style_map_with_state(node, disabled_state);
+        let inactive_gradient = Self::resolve_background_gradient_from_style(inactive_style.as_ref());
+        let hovered_gradient = Self::resolve_background_gradient_from_style(hovered_style.as_ref());
+        let active_gradient = Self::resolve_background_gradient_from_style(active_style.as_ref());
+        let focus_gradient = Self::resolve_background_gradient_from_style(focus_style.as_ref());
+        let disabled_gradient = Self::resolve_background_gradient_from_style(disabled_style.as_ref());
+        let gradient_shape_idx = if inactive_gradient.is_some() || hovered_gradient.is_some() || active_gradient.is_some() || focus_gradient.is_some() || disabled_gradient.is_some() {
+            Some(ui.painter().add(egui::Shape::Noop))
+        } else {
+            None
+        };
+        let button_corner_radius = Self::resolve_corner_radius_from_style(inactive_style.as_ref()).unwrap_or(ui.style().visuals.widgets.inactive.corner_radius);
+
+        let response = ui
+            .scope(|ui| {
+                self.apply_widget_state_visuals(
+                    ui,
+                    inactive_style.as_ref(),
+                    hovered_style.as_ref(),
+                    active_style.as_ref(),
+                    focus_style.as_ref(),
+                    disabled_style.as_ref(),
+                );
+
+                if let Some(padding) = Self::resolve_box_edges(inactive_style.as_ref(), "padding") {
+                    ui.spacing_mut().button_padding = egui::vec2(padding.average_horizontal(), padding.average_vertical());
+                }
+
+                let min_size = self.resolve_widget_min_size(inactive_style.as_ref());
+                let mut button = egui::Button::new(self.resolve_text_style_from_style(ui, inactive_style.as_ref(), label.clone(), false)).frame(true);
+                if min_size != Vec2::ZERO {
+                    button = button.min_size(min_size);
+                }
+
+                ui.add_enabled(!disabled, button)
+            })
+            .inner;
+
+        if let Some(shape_idx) = gradient_shape_idx {
+            let active_gradient = if disabled {
+                disabled_gradient.or(inactive_gradient)
+            } else if response.is_pointer_button_down_on() {
+                active_gradient.or(hovered_gradient).or(focus_gradient).or(inactive_gradient)
+            } else if response.hovered() {
+                hovered_gradient.or(focus_gradient).or(inactive_gradient)
+            } else if response.has_focus() {
+                focus_gradient.or(inactive_gradient)
+            } else {
+                inactive_gradient
+            };
+
+            if let Some(gradient) = active_gradient {
+                ui.painter().set(
+                    shape_idx,
+                    Self::gradient_shape_for_rect(response.rect, button_corner_radius, &gradient),
+                );
+            }
+        }
+
+        if response.clicked() {
+            if let Some(interaction) = resolve_interaction(node, None, None) {
+                self.dispatch_interaction(ctx, interaction);
+            } else if node.events.iter().any(|event| event == "press") {
+                self.dispatch_press_event(ctx, node);
+            }
+        }
+    }
+
+    pub(super) fn render_link(&mut self, ui: &mut egui::Ui, ctx: &egui::Context, node: &NativeElementNode) {
+        let label = self.collect_text_content(&NativeNode::Element(node.clone()));
+        let base_state = self.base_pseudo_state(node);
+        let inactive_style = self.resolve_style_map_with_state(node, base_state);
+
+        let mut hovered_state = base_state;
+        hovered_state.hovered = true;
+        let hovered_style = self.resolve_style_map_with_state(node, hovered_state);
+
+        let mut active_state = hovered_state;
+        active_state.active = true;
+        let active_style = self.resolve_style_map_with_state(node, active_state);
+
+        let mut focus_state = base_state;
+        focus_state.focused = true;
+        focus_state.focus_within = true;
+        let focus_style = self.resolve_style_map_with_state(node, focus_state);
+
+        let has_frame = Self::style_has_widget_frame(inactive_style.as_ref());
+        let inactive_gradient = Self::resolve_background_gradient_from_style(inactive_style.as_ref());
+        let hovered_gradient = Self::resolve_background_gradient_from_style(hovered_style.as_ref());
+        let active_gradient = Self::resolve_background_gradient_from_style(active_style.as_ref());
+        let focus_gradient = Self::resolve_background_gradient_from_style(focus_style.as_ref());
+        let gradient_shape_idx = if inactive_gradient.is_some() || hovered_gradient.is_some() || active_gradient.is_some() || focus_gradient.is_some() {
+            Some(ui.painter().add(egui::Shape::Noop))
+        } else {
+            None
+        };
+        let link_corner_radius = Self::resolve_corner_radius_from_style(inactive_style.as_ref()).unwrap_or(ui.style().visuals.widgets.inactive.corner_radius);
+        let destination = node.props.get("destination").and_then(Value::as_str).map(str::trim).unwrap_or("");
+        let response = ui
+            .scope(|ui| {
+                self.apply_widget_state_visuals(
+                    ui,
+                    inactive_style.as_ref(),
+                    hovered_style.as_ref(),
+                    active_style.as_ref(),
+                    focus_style.as_ref(),
+                    None,
+                );
+
+                if has_frame {
+                    if let Some(padding) = Self::resolve_box_edges(inactive_style.as_ref(), "padding") {
+                        ui.spacing_mut().button_padding = egui::vec2(padding.average_horizontal(), padding.average_vertical());
+                    }
+                }
+
+                let min_size = self.resolve_widget_min_size(inactive_style.as_ref());
+                let mut link = egui::Button::new(self.resolve_text_style_from_style(ui, inactive_style.as_ref(), label.clone(), false)).frame(has_frame);
+                if min_size != Vec2::ZERO {
+                    link = link.min_size(min_size);
+                }
+
+                ui.add(link)
+            })
+            .inner;
+
+        if let Some(shape_idx) = gradient_shape_idx {
+            let active_gradient = if response.is_pointer_button_down_on() {
+                active_gradient.or(hovered_gradient).or(focus_gradient).or(inactive_gradient)
+            } else if response.hovered() {
+                hovered_gradient.or(focus_gradient).or(inactive_gradient)
+            } else if response.has_focus() {
+                focus_gradient.or(inactive_gradient)
+            } else {
+                inactive_gradient
+            };
+
+            if let Some(gradient) = active_gradient {
+                ui.painter().set(
+                    shape_idx,
+                    Self::gradient_shape_for_rect(response.rect, link_corner_radius, &gradient),
+                );
+            }
+        }
+
+        if response.clicked() {
+            if !destination.is_empty() && is_external_destination(destination) {
+                let _ = webbrowser::open(destination);
+            } else if let Some(interaction) = resolve_interaction(node, None, None) {
+                self.dispatch_interaction(ctx, interaction);
+            } else if node.events.iter().any(|event| event == "press") {
+                self.dispatch_press_event(ctx, node);
+            }
+        }
+    }
+}

package/src/desktop/native_renderer/app_models.rs

@@ -0,0 +1,171 @@
+use std::path::PathBuf;
+
+use eframe::egui::Rect;
+use serde::Serialize;
+use serde_json::Value;
+#[cfg(target_os = "windows")]
+use wry::WebView;
+
+#[derive(Debug, Clone, PartialEq, Serialize)]
+pub(crate) struct DesktopInteraction {
+    pub(crate) action: Option<String>,
+    pub(crate) route: Option<String>,
+    pub(crate) payload: Option<Value>,
+}
+
+impl DesktopInteraction {
+    pub(crate) fn is_empty(&self) -> bool {
+        self.action.is_none() && self.route.is_none() && self.payload.is_none()
+    }
+
+    pub(crate) fn summary(&self) -> String {
+        let mut parts = Vec::new();
+        if let Some(action) = &self.action {
+            parts.push(format!("action={action}"));
+        }
+        if let Some(route) = &self.route {
+            parts.push(format!("route={route}"));
+        }
+        if let Some(payload) = &self.payload {
+            parts.push(format!("payload={payload}"));
+        }
+
+        if parts.is_empty() {
+            String::from("idle")
+        } else {
+            parts.join(" | ")
+        }
+    }
+}
+
+#[derive(Debug, Clone, Default)]
+pub(crate) struct DesktopControlEventData {
+    pub(crate) value: Option<String>,
+    pub(crate) values: Option<Vec<String>>,
+    pub(crate) checked: Option<bool>,
+}
+
+#[derive(Debug, Clone, PartialEq)]
+pub(crate) struct PickerOptionData {
+    pub(crate) label: String,
+    pub(crate) value: String,
+    pub(crate) disabled: bool,
+    pub(crate) selected: bool,
+}
+
+#[derive(Debug, Clone, Default)]
+pub(crate) struct ResolvedDesktopInteractionOutput {
+    pub(crate) file: Option<PathBuf>,
+    pub(crate) stdout: bool,
+    pub(crate) emit_ready: bool,
+}
+
+#[derive(Debug, Clone, Default)]
+pub(crate) struct DesktopNavigationState {
+    pub(crate) history: Vec<String>,
+    pub(crate) index: Option<usize>,
+}
+
+impl DesktopNavigationState {
+    pub(crate) fn current_route(&self) -> Option<&str> {
+        self.index.and_then(|index| self.history.get(index)).map(String::as_str)
+    }
+
+    pub(crate) fn can_go_back(&self) -> bool {
+        self.index.is_some()
+    }
+
+    pub(crate) fn can_go_forward(&self) -> bool {
+        match self.index {
+            Some(index) => index + 1 < self.history.len(),
+            None => !self.history.is_empty(),
+        }
+    }
+
+    pub(crate) fn navigate_to(&mut self, route: impl Into<String>) -> bool {
+        let route = route.into().trim().to_string();
+        if route.is_empty() {
+            return false;
+        }
+
+        if let Some(index) = self.index {
+            if index + 1 < self.history.len() {
+                self.history.truncate(index + 1);
+            }
+        } else {
+            self.history.clear();
+        }
+
+        self.history.push(route);
+        self.index = Some(self.history.len() - 1);
+        true
+    }
+
+    pub(crate) fn go_back(&mut self) -> bool {
+        match self.index {
+            Some(index) if index > 0 => {
+                self.index = Some(index - 1);
+                true
+            }
+            Some(_) => {
+                self.index = None;
+                true
+            }
+            None => false,
+        }
+    }
+
+    pub(crate) fn go_forward(&mut self) -> bool {
+        match self.index {
+            Some(index) if index + 1 < self.history.len() => {
+                self.index = Some(index + 1);
+                true
+            }
+            None if !self.history.is_empty() => {
+                self.index = Some(0);
+                true
+            }
+            _ => false,
+        }
+    }
+
+    pub(crate) fn clear(&mut self) {
+        self.index = None;
+    }
+}
+
+#[derive(Clone, Copy, Debug, PartialEq, Eq)]
+pub(crate) enum DesktopSurfaceWindowKind {
+    WebView,
+    Video,
+    Audio,
+}
+
+#[derive(Clone, Copy, Debug, PartialEq, Eq)]
+pub(crate) enum DesktopEmbeddedSurfaceVisibility {
+    Hidden,
+    Clipped,
+    Visible,
+}
+
+#[derive(Clone, Debug, PartialEq, Eq)]
+pub(crate) enum DesktopEmbeddedSurfaceContent {
+    Url(String),
+    Html(String),
+}
+
+#[derive(Clone, Debug)]
+pub(crate) struct DesktopEmbeddedSurfaceRequest {
+    pub(crate) kind: DesktopSurfaceWindowKind,
+    pub(crate) title: String,
+    pub(crate) rect: Rect,
+    pub(crate) content: DesktopEmbeddedSurfaceContent,
+    pub(crate) focus_requested: bool,
+}
+
+#[cfg(target_os = "windows")]
+pub(crate) struct DesktopEmbeddedSurface {
+    pub(crate) kind: DesktopSurfaceWindowKind,
+    pub(crate) content: DesktopEmbeddedSurfaceContent,
+    pub(crate) webview: WebView,
+}

package/src/desktop/native_renderer/app_runtime.rs

@@ -0,0 +1,140 @@
+use eframe::egui;
+use serde_json::Value;
+
+use super::{DesktopNativeApp, NativeElementNode, NativeNode};
+
+impl DesktopNativeApp {
+    pub(super) fn resolve_prop_number(&self, node: &NativeElementNode, key: &str) -> Option<f32> {
+        Self::parse_css_number(node.props.get(key))
+    }
+
+    pub(super) fn resolve_prop_string<'a>(&self, node: &'a NativeElementNode, key: &str) -> Option<&'a str> {
+        node.props.get(key).and_then(Value::as_str).map(str::trim).filter(|value| !value.is_empty())
+    }
+
+    pub(super) fn resolve_label(&self, node: &NativeElementNode) -> Option<String> {
+        ["aria-label", "label", "title", "name", "alt"]
+            .iter()
+            .find_map(|key| self.resolve_prop_string(node, key).map(str::to_string))
+            .or_else(|| {
+                let text = self.collect_text_content(&NativeNode::Element(node.clone()));
+                let trimmed = text.trim();
+                (!trimmed.is_empty()).then_some(trimmed.to_string())
+            })
+    }
+
+    pub(super) fn is_disabled(&self, node: &NativeElementNode) -> bool {
+        super::parse_native_bool(node.props.get("disabled")) || super::parse_native_bool(node.props.get("aria-disabled"))
+    }
+
+    pub(super) fn is_read_only(&self, node: &NativeElementNode) -> bool {
+        super::parse_native_bool(node.props.get("readOnly")) || super::parse_native_bool(node.props.get("readonly"))
+    }
+
+    pub(super) fn has_focusable_tab_index(&self, node: &NativeElementNode) -> bool {
+        node.props
+            .get("tabIndex")
+            .or_else(|| node.props.get("tabindex"))
+            .and_then(|value| match value {
+                Value::Number(number) => number.as_i64(),
+                Value::String(text) => text.trim().parse::<i64>().ok(),
+                _ => None,
+            })
+            .map(|value| value >= 0)
+            .unwrap_or(false)
+    }
+
+    pub(super) fn render_node(&mut self, ui: &mut egui::Ui, ctx: &egui::Context, node: &NativeNode, path: &str) {
+        match node {
+            NativeNode::Text(text_node) => {
+                ui.label(self.resolve_text_node_value(text_node));
+            }
+            NativeNode::Element(element_node) => match element_node.component.as_str() {
+                "Text" => self.render_text_element(ui, element_node),
+                "Button" => self.render_button(ui, ctx, element_node),
+                "Link" => self.render_link(ui, ctx, element_node),
+                "TextInput" => self.render_text_input(ui, ctx, element_node, path),
+                "Toggle" => self.render_toggle(ui, ctx, element_node, path),
+                "Slider" => self.render_slider(ui, ctx, element_node, path),
+                "Picker" => self.render_picker(ui, ctx, element_node, path),
+                "Option" => self.render_text_element(ui, element_node),
+                "Divider" => self.render_divider(ui),
+                "Progress" => self.render_progress(ui, element_node),
+                "Image" => self.render_image(ui, ctx, element_node),
+                "WebView" => self.render_web_view(ui, element_node, path),
+                "Media" => self.render_media(ui, ctx, element_node, path),
+                "Canvas" => self.render_canvas(ui, element_node),
+                "Vector" => self.render_vector(ui, element_node),
+                "Math" => self.render_math(ui, element_node),
+                "Table" => self.render_table(ui, ctx, element_node, path),
+                "Row" => self.render_row(ui, ctx, element_node, path),
+                "Cell" => self.render_cell(ui, ctx, element_node, path),
+                "ListItem" => self.render_list_item(ui, ctx, element_node, path),
+                "List" => self.render_list(ui, ctx, element_node, path),
+                "Screen" | "View" => self.render_container(ui, ctx, element_node, path),
+                _ => self.render_surface_placeholder(ui, &element_node.component, "Desktop native fallback surface"),
+            },
+        }
+    }
+
+    fn render_navigation_bar(&mut self, ui: &mut egui::Ui, ctx: &egui::Context) {
+        if self.navigation.current_route().is_none() && !self.navigation.can_go_forward() {
+            return;
+        }
+
+        ui.horizontal(|ui| {
+            if ui.add_enabled(self.navigation.can_go_back(), egui::Button::new("Back")).clicked() {
+                self.navigation.go_back();
+                self.apply_navigation_title(ctx);
+            }
+
+            if ui.add_enabled(self.navigation.can_go_forward(), egui::Button::new("Forward")).clicked() {
+                self.navigation.go_forward();
+                self.apply_navigation_title(ctx);
+            }
+
+            if ui.add_enabled(self.navigation.current_route().is_some(), egui::Button::new("Reset")).clicked() {
+                self.navigation.clear();
+                self.apply_navigation_title(ctx);
+            }
+
+            ui.small(self.navigation.current_route().unwrap_or("/"));
+        });
+        ui.separator();
+    }
+
+    fn render_last_interaction_summary(&self, ui: &mut egui::Ui) {
+        if let Some(interaction) = &self.last_interaction {
+            ui.separator();
+            ui.small(format!("Last interaction: {}", interaction.summary()));
+        }
+    }
+}
+
+impl eframe::App for DesktopNativeApp {
+    fn update(&mut self, ctx: &egui::Context, frame: &mut eframe::Frame) {
+        let roots = self.payload.tree.roots.clone();
+        self.viewport_size = ctx.screen_rect().size();
+        self.ensure_fonts_loaded(ctx);
+        self.emit_ready_interaction();
+
+        egui::CentralPanel::default().show(ctx, |ui| {
+            egui::ScrollArea::vertical().auto_shrink([false, false]).show(ui, |ui| {
+                self.render_navigation_bar(ui, ctx);
+
+                for (index, root) in roots.iter().enumerate() {
+                    self.render_node(ui, ctx, root, &format!("root-{index}"));
+                }
+
+                self.render_last_interaction_summary(ui);
+            });
+        });
+
+        self.reconcile_embedded_surfaces(frame);
+
+        if self.pending_auto_close {
+            self.pending_auto_close = false;
+            ctx.send_viewport_cmd(egui::ViewportCommand::Close);
+        }
+    }
+}