@effindomv2/fui-rs 0.1.20 → 0.1.22

package/Cargo.toml

@@ -1,6 +1,6 @@
 [package]
 name = "fui-rs"
-version = "0.1.20"
+version = "0.1.22"
 edition = "2021"
 license = "AGPL-3.0-only OR LicenseRef-EffinDom-Commercial"
 

package/README.md

@@ -7,27 +7,35 @@ macros for browser-hosted Rust WASM apps.
 
 ## Quickstart
 
+Create a FUI-RS application with the published scaffolder:
+
 ```bash
-# Prerequisites: Rust + wasm32-unknown-unknown target + Binaryen
+# Install Rust and the WebAssembly target once
 curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh
+source "$HOME/.cargo/env"
 rustup target add wasm32-unknown-unknown
-brew install binaryen
-
-# Clone and build
-git clone https://github.com/zion-sati/fui-rs.git
-cd fui-rs
-npm ci
-npm run build
-npm run serve
+
+# Create and run an app
+npx @effindomv2/create-fui-rs-app my-app
+cd my-app
+npm install
+npm run dev
 ```
 
-Open:
+For a routed application with one independently built WASM module per route:
 
-```text
-http://127.0.0.1:8080/v2/fui-rs/demo/index.html
+```bash
+npx @effindomv2/create-fui-rs-app my-routed-app -- --template routed
+cd my-routed-app
+npm install
+npm run dev
 ```
 
-Full quickstart: [docs/v2/fui-rs/QUICKSTART.md](../../docs/v2/fui-rs/QUICKSTART.md)
+Install [Binaryen](https://github.com/WebAssembly/binaryen) to make release
+builds run `wasm-opt`. Development builds do not require it.
+
+Application setup, retained-mode guidance, and entrypoint examples are covered
+in the [FUI-RS developer quickstart](../../docs/v2/fui-rs/QUICKSTART.md).
 
 ## Minimal app
 
@@ -46,6 +54,23 @@ fn build_page() -> FlexBox {
 fui_app!(FlexBox, build_page);
 ```
 
+## Rich text
+
+Use `rich_text!` to create retained rich text without manually constructing a
+span vector. String literals become spans, braced expressions provide dynamic
+text, and `span => expression` accepts an existing `RichTextSpan`:
+
+```rust
+let value = 42;
+let suffix = span("!").underline();
+let label = rich_text![
+    "Current value: ".italic(),
+    { format!("{value}") }.bold().text_color(rgb(0x3a, 0xc5, 0x6c)),
+    span => suffix,
+]
+.font_size(18.0);
+```
+
 ## SDK docs
 
 - [SDK docs index](../../docs/v2/fui-rs/SDK_INDEX.md)
@@ -56,6 +81,14 @@ fui_app!(FlexBox, build_page);
 - [Forms and autofill](../../docs/v2/fui-rs/FORMS_AND_AUTOFILL.md)
 - [Theming and style matrix](../../docs/v2/fui-rs/THEMING_STYLE_MATRIX.md)
 
+## Contributing to FUI-RS
+
+The commands above are for developers building applications with the published
+FUI-RS SDK. Contributors working on the SDK, EffinDom runtime, browser bridge,
+or repository demos should follow the
+[FUI-RS contributor quickstart](../../docs/v2/fui-rs/CONTRIBUTOR_QUICKSTART.md).
+It covers the standalone repository toolchain, SDK build, lint, and test lanes.
+
 ## What is included
 
 | Area | Status |

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@effindomv2/fui-rs",
-  "version": "0.1.20",
+  "version": "0.1.22",
   "private": false,
   "license": "AGPL-3.0-only OR LicenseRef-EffinDom-Commercial",
   "description": "EffinDom v2 Rust frontend framework SDK and host generators",
@@ -33,11 +33,12 @@
     "generate:host": "npm run generate:host-services && npm run generate:host-events:home && npm run generate:host-events:workbench && npm run generate:host-events:stage4 && npm run generate:host-events:stage5 && npm run generate:host-events:immediate-drawing && npm run generate:worker-host-services && npm run generate:framework-host-services",
     "guard:runtime-dependency": "bash scripts/check-runtime-dependency.sh",
     "lint": "cd ../.. && npm run lint:v2",
+    "lint:rust": "bash -lc 'source \"$HOME/.cargo/env\" && cargo clippy --manifest-path Cargo.toml --all-targets -- -D warnings'",
     "build": "npm run guard:runtime-dependency && npm run check:abi && bash scripts/build.sh",
     "test:unit": "npm run guard:runtime-dependency && npm run check:abi && npm run generate:host && bash -lc 'source \"$HOME/.cargo/env\" && cargo test --manifest-path Cargo.toml'",
     "test:integration": "npm --prefix ../.. run build:v2:browser-bridge && npm run build && playwright test -c playwright.config.ts",
     "typecheck": "npm run guard:runtime-dependency && npm run check:abi && tsc -p tsconfig.json --noEmit",
-    "prepublishOnly": "npm run check:abi && npm run lint && npm run typecheck"
+    "prepublishOnly": "npm run check:abi && npm run lint && npm run lint:rust && npm run typecheck"
   },
   "dependencies": {
     "@effindomv2/runtime": "0.1.26"

package/src/app.rs

@@ -3,7 +3,7 @@ use crate::context_menu_manager;
 use crate::ffi::HandleValue;
 use crate::frame_scheduler;
 use crate::mobile_text_selection_toolbar;
-use crate::node::{flex_box, FlexBox, Node, NodeRef};
+use crate::node::{flex_box, FlexBox, Node, NodeRef, ThemeBindable};
 use crate::panic_hook;
 use crate::selection_handle_adorner;
 use crate::theme;
@@ -95,6 +95,9 @@ fn application_shell<T: Node>(root: &T) -> FlexBox {
         .child(&focus_adorner::create_default_host())
         .child(&tool_tip_manager::ToolTipManager::create_default_host())
         .child(&context_menu_manager::create_default_menu());
+    shell.bind_theme(|shell, theme| {
+        shell.bg_color(theme.colors.background);
+    });
     shell
 }
 

package/src/color.rs

@@ -106,7 +106,10 @@ mod tests {
     #[test]
     fn color_helpers_mask_channels_and_interpolate() {
         assert_eq!(rgba(0x112, 0x134, 0x156, 0x178), 0x12345678);
-        assert_eq!(mix_color(rgb(0, 0, 0), rgb(255, 255, 255), 0.5), rgba(128, 128, 128, 255));
+        assert_eq!(
+            mix_color(rgb(0, 0, 0), rgb(255, 255, 255), 0.5),
+            rgba(128, 128, 128, 255)
+        );
         assert_eq!(hsl_to_color(0.0, 1.0, 0.5), rgb(255, 0, 0));
     }
 }

package/src/controls/context_menu.rs

@@ -1,6 +1,6 @@
 use super::ContextMenuAppearance;
 use crate::bindings::ui;
-use crate::event::{self, PointerEventArgs, PointerType};
+use crate::event::{self, PointerButton, PointerEventArgs, PointerType};
 use crate::ffi::{
     BorderStyle, CursorStyle, HandleValue, KeyEventType, SemanticRole, TextAlign, TextOverflow,
     Unit,
@@ -29,7 +29,7 @@ thread_local! {
 }
 
 fn is_primary_activation_pointer(event: &PointerEventArgs) -> bool {
-    event.button == 0
+    event.button == PointerButton::Primary
         || event.pointer_type == PointerType::Touch
         || event.pointer_type == PointerType::Pen
 }

package/src/controls/nav_link.rs

@@ -1,6 +1,6 @@
 use super::*;
 use crate::bindings::ui;
-use crate::event::PointerType;
+use crate::event::{PointerButton, PointerType};
 use crate::ffi::{CursorStyle, HandleValue, SemanticRole};
 use crate::navigation;
 use crate::node::{text, NodeHandle, NodeRef, WeakFlexBox};
@@ -14,8 +14,13 @@ thread_local! {
     static ACTIVE_PREVIEW_OWNER: Cell<u64> = const { Cell::new(HandleValue::Invalid as u64) };
 }
 
-fn is_primary_activation_pointer(event: &PointerEventArgs) -> bool {
-    event.button == 0
+fn is_middle_mouse_button(event: &PointerEventArgs) -> bool {
+    event.pointer_type == PointerType::Mouse && event.button == PointerButton::Auxiliary
+}
+
+fn is_activation_pointer(event: &PointerEventArgs) -> bool {
+    event.button == PointerButton::Primary
+        || is_middle_mouse_button(event)
         || event.pointer_type == PointerType::Touch
         || event.pointer_type == PointerType::Pen
 }
@@ -126,21 +131,22 @@ impl NavLink {
         });
         let target = self.event_target();
         self.root.on_pointer_down(move |event| {
-            if !is_primary_activation_pointer(event) {
+            if !is_activation_pointer(event) {
                 target.pointer_pressed.set(false);
                 target.pointer_pressed_open_in_new_tab.set(false);
                 return;
             }
             target.pointer_pressed.set(true);
-            target
-                .pointer_pressed_open_in_new_tab
-                .set(target.should_open_in_new_tab(event.modifiers));
+            target.pointer_pressed_open_in_new_tab.set(
+                is_middle_mouse_button(event) || target.should_open_in_new_tab(event.modifiers),
+            );
             event.handled = true;
         });
         let target = self.event_target();
         self.root.on_pointer_up(move |event| {
-            if target.pointer_pressed.replace(false) && is_primary_activation_pointer(event) {
+            if target.pointer_pressed.replace(false) && is_activation_pointer(event) {
                 let open_in_new_tab = target.pointer_pressed_open_in_new_tab.get()
+                    || is_middle_mouse_button(event)
                     || target.should_open_in_new_tab(event.modifiers);
                 target.activate(open_in_new_tab);
                 event.handled = true;
@@ -442,7 +448,9 @@ impl NavLinkEventTarget {
         let color = if self.hovered.get() {
             theme.colors.accent_hovered
         } else {
-            self.text_color_override.get().unwrap_or(theme.colors.accent)
+            self.text_color_override
+                .get()
+                .unwrap_or(theme.colors.accent)
         };
         if self.label.handle() != NodeHandle::INVALID {
             ui::set_text_color(self.label.handle().raw(), color);

package/src/controls/slider.rs

@@ -528,7 +528,7 @@ impl SliderEventTarget {
     }
 
     fn handle_pointer_move(&self, event: &mut PointerEventArgs) {
-        if !self.is_enabled() || !self.dragging_state.get() || event.buttons == 0 {
+        if !self.is_enabled() || !self.dragging_state.get() || event.buttons.is_empty() {
             return;
         }
         self.update_value_from_pointer(event.scene_x, event.scene_y, true, true);

package/src/event.rs

@@ -43,6 +43,58 @@ impl PointerType {
     }
 }
 
+#[repr(i32)]
+#[derive(Clone, Copy, Debug, PartialEq, Eq)]
+pub enum PointerButton {
+    None = -1,
+    Primary = 0,
+    Auxiliary = 1,
+    Secondary = 2,
+    Back = 3,
+    Forward = 4,
+}
+
+impl PointerButton {
+    pub fn from_raw(value: i32) -> Self {
+        match value {
+            0 => Self::Primary,
+            1 => Self::Auxiliary,
+            2 => Self::Secondary,
+            3 => Self::Back,
+            4 => Self::Forward,
+            _ => Self::None,
+        }
+    }
+}
+
+#[derive(Clone, Copy, Debug, Default, PartialEq, Eq)]
+pub struct PointerButtons(u32);
+
+impl PointerButtons {
+    pub const NONE: Self = Self(0);
+    pub const PRIMARY: Self = Self(1 << 0);
+    pub const SECONDARY: Self = Self(1 << 1);
+    pub const AUXILIARY: Self = Self(1 << 2);
+    pub const BACK: Self = Self(1 << 3);
+    pub const FORWARD: Self = Self(1 << 4);
+
+    pub const fn from_raw(value: u32) -> Self {
+        Self(value)
+    }
+
+    pub const fn bits(self) -> u32 {
+        self.0
+    }
+
+    pub const fn is_empty(self) -> bool {
+        self.0 == 0
+    }
+
+    pub const fn contains(self, buttons: Self) -> bool {
+        self.0 & buttons.0 == buttons.0
+    }
+}
+
 #[derive(Clone, Copy, Debug, PartialEq, Eq)]
 pub enum GestureIntent {
     None = 0,
@@ -109,8 +161,8 @@ pub struct PointerEventArgs {
     pub modifiers: u32,
     pub pointer_id: i32,
     pub pointer_type: PointerType,
-    pub button: i32,
-    pub buttons: u32,
+    pub button: PointerButton,
+    pub buttons: PointerButtons,
     pub pressure: f32,
     pub width: f32,
     pub height: f32,
@@ -145,8 +197,8 @@ impl PointerEventArgs {
             modifiers,
             pointer_id,
             pointer_type,
-            button,
-            buttons,
+            button: PointerButton::from_raw(button),
+            buttons: PointerButtons::from_raw(buttons),
             pressure,
             width,
             height,

package/src/lib.rs

@@ -4,9 +4,9 @@ pub mod assets;
 #[doc(hidden)]
 pub mod bindings;
 pub mod bitmap;
-pub mod color;
 #[doc(hidden)]
 pub mod bridge_callbacks;
+pub mod color;
 pub(crate) mod context_menu_manager;
 pub mod controls;
 pub mod debug;
@@ -63,6 +63,45 @@ macro_rules! children {
     };
 }
 
+#[doc(hidden)]
+#[macro_export]
+macro_rules! __fui_rs_rich_text_spans {
+    (@collect [$($span:expr,)*]) => {
+        vec![$($span,)*]
+    };
+    (@collect [$($span:expr,)*] , $($rest:tt)*) => {
+        $crate::__fui_rs_rich_text_spans!(@collect [$($span,)*] $($rest)*)
+    };
+    (@collect [$($span:expr,)*] span => $value:expr, $($rest:tt)*) => {
+        $crate::__fui_rs_rich_text_spans!(@collect [$($span,)* $value,] $($rest)*)
+    };
+    (@collect [$($span:expr,)*] { $text:expr } $(.$method:ident($($argument:expr),* $(,)?))* , $($rest:tt)*) => {
+        $crate::__fui_rs_rich_text_spans!(@collect [
+            $($span,)*
+            $crate::text::span($text)$(.$method($($argument),*))*,
+        ] $($rest)*)
+    };
+    (@collect [$($span:expr,)*] $text:literal $(.$method:ident($($argument:expr),* $(,)?))* , $($rest:tt)*) => {
+        $crate::__fui_rs_rich_text_spans!(@collect [
+            $($span,)*
+            $crate::text::span($text)$(.$method($($argument),*))*,
+        ] $($rest)*)
+    };
+}
+
+/// Builds retained rich text with fluent span styling.
+///
+/// String literals become spans automatically. Wrap a dynamic text expression
+/// in braces, or use `span => expression` to provide a prebuilt span.
+#[macro_export]
+macro_rules! rich_text {
+    ($($span:tt)*) => {
+        $crate::text::RichText::new(
+            $crate::__fui_rs_rich_text_spans!(@collect [] $($span)* ,)
+        )
+    };
+}
+
 pub trait Configure: Sized {
     fn configure(self, configure: impl FnOnce(&Self)) -> Self {
         configure(&self);
@@ -456,8 +495,9 @@ pub mod prelude {
     pub use crate::drawing::{DrawContext, Paint, Path};
     pub use crate::event::{
         FocusChangedEventArgs, GestureEventArgs, GestureEventKind, GestureEventPhase,
-        GestureIntent, KeyEventArgs, LongPressEventArgs, PointerEventArgs, PointerType,
-        SelectionChangedEventArgs, TextChangedEventArgs, WheelEventArgs,
+        GestureIntent, KeyEventArgs, LongPressEventArgs, PointerButton, PointerButtons,
+        PointerEventArgs, PointerType, SelectionChangedEventArgs, TextChangedEventArgs,
+        WheelEventArgs,
     };
     pub use crate::external_drop::{
         ExternalDropEventArgs, ExternalDropItemInfo, ExternalDropItemKind,
@@ -524,7 +564,7 @@ pub mod prelude {
     pub use crate::worker_job::{WorkerJob, WorkerJobState};
     #[cfg(feature = "worker-runtime")]
     pub use crate::worker_runtime::{file_read_chunk, file_worker_write_chunk, WorkerRuntime};
-    pub use crate::{children, fui_app, fui_managed_app, ui, Configure};
+    pub use crate::{children, fui_app, fui_managed_app, rich_text, ui, Configure};
 }
 
 pub use animation::{
@@ -581,8 +621,8 @@ pub use drag_drop::{
 pub use drawing::{DrawContext, Paint, Path};
 pub use event::{
     FocusChangedEventArgs, GestureEventArgs, GestureEventKind, GestureEventPhase, GestureIntent,
-    KeyEventArgs, LongPressEventArgs, PointerEventArgs, PointerType, SelectionChangedEventArgs,
-    TextChangedEventArgs, WheelEventArgs,
+    KeyEventArgs, LongPressEventArgs, PointerButton, PointerButtons, PointerEventArgs, PointerType,
+    SelectionChangedEventArgs, TextChangedEventArgs, WheelEventArgs,
 };
 pub use external_drop::{ExternalDropEventArgs, ExternalDropItemInfo, ExternalDropItemKind};
 pub use fetch::{Fetch, FetchErrorEventArgs, FetchRequest, FetchResponse};

package/src/node/core.rs

@@ -3,7 +3,7 @@ use crate::drag_drop::{
     DragCompletedEventArgs, DragDataObject, DragDropEffects, DragEventArgs, DropProposal,
 };
 use crate::drag_gesture::{DragCompletedEvent, DragGesture, DragStartedEvent};
-use crate::event::{SelectionChangedEventArgs, TextChangedEventArgs};
+use crate::event::{PointerButton, SelectionChangedEventArgs, TextChangedEventArgs};
 use crate::external_drop::ExternalDropEventArgs;
 use crate::persisted::PersistedStateAdapter;
 use crate::tool_tip::ToolTip;
@@ -31,7 +31,7 @@ pub(crate) type ExternalDragEventCallback = Rc<dyn Fn(ExternalDropEventArgs)>;
 pub(crate) type EffectiveEnabledChangedCallback = Rc<dyn Fn(bool)>;
 
 pub(crate) fn is_primary_activation_pointer(event: &PointerEventArgs) -> bool {
-    event.button == 0
+    event.button == PointerButton::Primary
         || event.pointer_type == PointerType::Touch
         || event.pointer_type == PointerType::Pen
 }
@@ -513,11 +513,7 @@ impl NodeRef {
         self.inner.borrow().handle
     }
 
-    pub(crate) fn set_semantic_checked(
-        &self,
-        state: SemanticCheckedState,
-        announce: bool,
-    ) {
+    pub(crate) fn set_semantic_checked(&self, state: SemanticCheckedState, announce: bool) {
         let handle = {
             let mut core = self.inner.borrow_mut();
             core.behavior.semantic_checked = Some(state);

package/src/theme.rs

@@ -1,7 +1,7 @@
-use crate::generated::framework_host_services;
 use crate::color::{
     color_alpha, color_blue, color_green, color_red, mix_color, rgb, rgba, with_alpha,
 };
+use crate::generated::framework_host_services;
 use crate::signal::{Callback, Signal, SubscriptionGuard};
 use crate::typography::{FontFamily, FontStack};
 use std::cell::RefCell;