@effindomv2/fui-rs 0.1.4 → 0.1.6

package/Cargo.toml

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

package/README.md

@@ -62,6 +62,7 @@ fui_app!(FlexBox, build_page);
 |---|---|
 | Retained app lifecycle macros | Available |
 | `ui!` mixed child tree macro | Available |
+| `fui_component!` retained component delegation | Available |
 | Flex/Grid layout nodes | Available |
 | Text, rich text, image, SVG | Available |
 | Buttons, toggles, slider, dropdown, combobox | Available |

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@effindomv2/fui-rs",
-  "version": "0.1.4",
+  "version": "0.1.6",
   "private": false,
   "license": "AGPL-3.0-only OR LicenseRef-EffinDom-Commercial",
   "description": "EffinDom v2 Rust frontend framework SDK and host generators",
@@ -39,7 +39,7 @@
     "prepublishOnly": "npm run check:abi && npm run lint && npm run typecheck"
   },
   "dependencies": {
-    "@effindomv2/runtime": "0.1.24"
+    "@effindomv2/runtime": "0.1.26"
   },
   "devDependencies": {
     "@playwright/test": "1.59.1",

package/scripts/build.sh

@@ -196,9 +196,14 @@ if [ -f "${SHARED_DEMO_TEXTURE}" ]; then
   cp "${SHARED_DEMO_TEXTURE}" "${DEMO_OUT_DIR}/stage4/demo-texture.png"
   cp "${SHARED_DEMO_TEXTURE}" "${DEMO_OUT_DIR}/stage5/demo-texture.png"
 fi
-cat > "${OUT_DIR}/effindom-runtime-config.js" << 'RUNTIMECFG'
+RUNTIME_SET_HASH="$(node -e 'const fs=require("fs"); const value=JSON.parse(fs.readFileSync(process.argv[1], "utf8")).runtime_set_hash; if (typeof value !== "string" || value.length === 0) process.exit(1); process.stdout.write(value);' "${RUNTIME_DIST_DIR}/effindom.v2.manifest.json")"
+cat > "${OUT_DIR}/effindom-runtime-config.js" << RUNTIMECFG
 window.__effindomRuntime = Object.assign({}, window.__effindomRuntime, {
-  manifestUrl: './effindom.v2.manifest.json',
+  manifestUrls: [
+    'https://runtimes.effindom.dev/v2/manifests/${RUNTIME_SET_HASH}.json',
+    './effindom.v2.manifest.json',
+  ],
+  expectedRuntimeSetHash: '${RUNTIME_SET_HASH}',
 });
 RUNTIMECFG
 cp "${OUT_DIR}/effindom-runtime-config.js" "${DEMO_OUT_DIR}/effindom-runtime-config.js"

package/src/app.rs

@@ -109,7 +109,7 @@ impl ApplicationRegistration {
         }
     }
 
-    pub fn page<TNode: Node>(mut self, build_page: impl Fn() -> TNode + 'static) -> Self {
+    pub fn page<TNode: Node + 'static>(mut self, build_page: impl Fn() -> TNode + 'static) -> Self {
         self.build_page_fn = Rc::new(move || {
             let node = build_page();
             let shell = flex_box();
@@ -133,7 +133,7 @@ pub struct ManagedApplication<TPage: 'static> {
 }
 
 impl<TPage: 'static> ManagedApplication<TPage> {
-    pub fn new<TNode: Node>(
+    pub fn new<TNode: Node + 'static>(
         build_page: impl Fn() -> TPage + 'static,
         get_root: impl Fn(&TPage) -> TNode + 'static,
     ) -> Self {

package/src/controls/button.rs

@@ -26,6 +26,8 @@ pub struct Button {
     hover_background_override: Rc<Cell<Option<u32>>>,
     pressed_background_override: Rc<Cell<Option<u32>>>,
     border_override: Rc<Cell<Option<Border>>>,
+    font_family_override: Rc<RefCell<Option<crate::FontFamily>>>,
+    font_size_override: Rc<Cell<Option<f32>>>,
     text_color_override: Rc<Cell<Option<u32>>>,
     colors_value: Rc<Cell<Option<ButtonColors>>>,
     theme_guard: Rc<RefCell<Option<SubscriptionGuard>>>,
@@ -66,6 +68,8 @@ impl Button {
             hover_background_override: Rc::new(Cell::new(None)),
             pressed_background_override: Rc::new(Cell::new(None)),
             border_override: Rc::new(Cell::new(None)),
+            font_family_override: Rc::new(RefCell::new(None)),
+            font_size_override: Rc::new(Cell::new(None)),
             text_color_override: Rc::new(Cell::new(None)),
             colors_value: Rc::new(Cell::new(None)),
             theme_guard: Rc::new(RefCell::new(None)),
@@ -250,10 +254,19 @@ impl Button {
         self
     }
 
-    pub fn text_color(&self, color: u32) -> &Self {
+    fn set_explicit_text_color(&self, color: u32) {
         self.text_color_override.set(Some(color));
         self.sync_visual_state();
-        self
+    }
+
+    fn set_explicit_font_family(&self, family: crate::FontFamily) {
+        self.font_family_override.replace(Some(family.clone()));
+        self.label.borrow().font_family(family);
+    }
+
+    fn set_explicit_font_size(&self, size: f32) {
+        self.font_size_override.set(Some(size));
+        self.label.borrow().font_size(size);
     }
 
     fn install_visual_subscriptions(&self) {
@@ -285,6 +298,8 @@ impl Button {
             hover_background_override: self.hover_background_override.clone(),
             pressed_background_override: self.pressed_background_override.clone(),
             border_override: self.border_override.clone(),
+            font_family_override: self.font_family_override.clone(),
+            font_size_override: self.font_size_override.clone(),
             text_color_override: self.text_color_override.clone(),
             colors_value: self.colors_value.clone(),
         }
@@ -328,6 +343,8 @@ impl Button {
             self.hover_background_override.get(),
             self.pressed_background_override.get(),
             self.border_override.get(),
+            self.font_family_override.borrow().clone(),
+            self.font_size_override.get(),
             self.text_color_override.get(),
             self.colors_value.get(),
         );
@@ -380,6 +397,20 @@ impl HasFlexBoxRoot for Button {
     }
 }
 
+impl LabeledControlTextStyle for Button {
+    fn set_label_font_family(&self, family: crate::FontFamily) {
+        self.set_explicit_font_family(family);
+    }
+
+    fn set_label_font_size(&self, size: f32) {
+        self.set_explicit_font_size(size);
+    }
+
+    fn set_label_text_color(&self, color: u32) {
+        self.set_explicit_text_color(color);
+    }
+}
+
 fn sync_button_visual_state(
     root: &FlexBox,
     presenter: &Rc<RefCell<Rc<dyn ButtonPresenter>>>,
@@ -391,6 +422,8 @@ fn sync_button_visual_state(
     hover_background_override: Option<u32>,
     pressed_background_override: Option<u32>,
     border_override: Option<Border>,
+    font_family_override: Option<crate::FontFamily>,
+    font_size_override: Option<f32>,
     text_color_override: Option<u32>,
     colors: Option<ButtonColors>,
 ) {
@@ -421,6 +454,12 @@ fn sync_button_visual_state(
     if let Some(border) = border_override {
         root.border_config(border);
     }
+    if let Some(family) = font_family_override {
+        presenter.label_node().font_family(family);
+    }
+    if let Some(size) = font_size_override {
+        presenter.label_node().font_size(size);
+    }
     if let Some(color) = text_color_override {
         presenter.label_node().text_color(color);
     }
@@ -462,6 +501,8 @@ struct ButtonEventTarget {
     hover_background_override: Rc<Cell<Option<u32>>>,
     pressed_background_override: Rc<Cell<Option<u32>>>,
     border_override: Rc<Cell<Option<Border>>>,
+    font_family_override: Rc<RefCell<Option<crate::FontFamily>>>,
+    font_size_override: Rc<Cell<Option<f32>>>,
     text_color_override: Rc<Cell<Option<u32>>>,
     colors_value: Rc<Cell<Option<ButtonColors>>>,
 }
@@ -488,6 +529,8 @@ impl ButtonEventTarget {
             self.hover_background_override.get(),
             self.pressed_background_override.get(),
             self.border_override.get(),
+            self.font_family_override.borrow().clone(),
+            self.font_size_override.get(),
             self.text_color_override.get(),
             self.colors_value.get(),
         );

package/src/controls/checkbox.rs

@@ -263,6 +263,20 @@ impl Checkbox {
     }
 }
 
+impl LabeledControlTextStyle for Checkbox {
+    fn set_label_font_family(&self, family: crate::FontFamily) {
+        self.base.font_family(family);
+    }
+
+    fn set_label_font_size(&self, size: f32) {
+        self.base.font_size(size);
+    }
+
+    fn set_label_text_color(&self, color: u32) {
+        self.base.text_color(color);
+    }
+}
+
 impl Node for Checkbox {
     fn retained_node_ref(&self) -> NodeRef {
         self.root.retained_node_ref()

package/src/controls/context_menu.rs

@@ -364,7 +364,7 @@ impl ContextMenuEntry {
             )
             .text_color(theme.context_menu.item.text_color)
             .text_overflow(TextOverflow::Ellipsis)
-            .selectable(false, theme.colors.selection);
+            .selectable(false);
         let shortcut_node = TextNode::new("");
         shortcut_node
             .font_family(theme.context_menu.item.font_family.clone())
@@ -376,7 +376,7 @@ impl ContextMenuEntry {
             )
             .text_color(theme.colors.text_muted)
             .text_align(TextAlign::Left)
-            .selectable(false, theme.colors.selection);
+            .selectable(false);
 
         root.width(100.0, Unit::Percent)
             .height(theme.context_menu.item.height, Unit::Pixel)

package/src/controls/dialog.rs

@@ -118,11 +118,11 @@ impl Dialog {
         let root = portal();
         let title_node = TextNode::new("");
         title_node
-            .selectable(false, theme.colors.selection)
+            .selectable(false)
             .semantic_role(SemanticRole::Heading);
         let body_node = TextNode::new("");
         body_node
-            .selectable(false, theme.colors.selection)
+            .selectable(false)
             .semantic_role(SemanticRole::StaticText);
         let content_host = flex_box();
         content_host

package/src/controls/internal/dropdown_field_presenter.rs

@@ -138,10 +138,9 @@ pub struct DefaultDropdownFieldPresenter {
 
 impl DefaultDropdownFieldPresenter {
     pub fn new(metrics: DropdownFieldMetrics) -> Self {
-        let theme = crate::theme::current_theme();
         let value_node = text("");
         value_node
-            .selectable(false, theme.colors.selection)
+            .selectable(false)
             .fill_size()
             .text_limits(0, 1)
             .wrapping(false);

package/src/controls/internal/dropdown_option_row_presenter.rs

@@ -93,10 +93,9 @@ pub struct DefaultDropdownOptionRowPresenter {
 
 impl DefaultDropdownOptionRowPresenter {
     pub fn new(metrics: DropdownOptionRowMetrics) -> Self {
-        let theme = crate::theme::current_theme();
         let label_node = text("");
         label_node
-            .selectable(false, theme.colors.selection)
+            .selectable(false)
             .fill_size()
             .text_limits(0, 1)
             .wrapping(false);

package/src/controls/internal/pressable_labeled_control.rs

@@ -37,7 +37,9 @@ pub(crate) struct PressableLabeledControl {
     key_pressed_state: Rc<Cell<bool>>,
     pointer_pressed_state: Rc<Cell<bool>>,
     enabled_state: Rc<Cell<bool>>,
+    label_font_family_override: Rc<RefCell<Option<crate::FontFamily>>>,
     label_font_size_override: Rc<Cell<f32>>,
+    label_text_color_override: Rc<Cell<Option<u32>>>,
     colors_value: Rc<Cell<Option<LabeledControlColors>>>,
     activation: Rc<RefCell<Option<ActivationCallback>>>,
     state_changed: Rc<RefCell<Option<StateCallback>>>,
@@ -78,7 +80,9 @@ impl PressableLabeledControl {
             key_pressed_state: Rc::new(Cell::new(false)),
             pointer_pressed_state: Rc::new(Cell::new(false)),
             enabled_state: Rc::new(Cell::new(true)),
+            label_font_family_override: Rc::new(RefCell::new(None)),
             label_font_size_override: Rc::new(Cell::new(0.0)),
+            label_text_color_override: Rc::new(Cell::new(None)),
             colors_value: Rc::new(Cell::new(None)),
             activation: Rc::new(RefCell::new(None)),
             state_changed: Rc::new(RefCell::new(None)),
@@ -134,6 +138,21 @@ impl PressableLabeledControl {
         self.sync_base_theme();
     }
 
+    pub(crate) fn font_family(&self, family: crate::FontFamily) {
+        self.label_font_family_override.replace(Some(family));
+        self.sync_base_theme();
+    }
+
+    pub(crate) fn font_size(&self, size: f32) {
+        self.label_font_size_override.set(size);
+        self.sync_base_theme();
+    }
+
+    pub(crate) fn text_color(&self, color: u32) {
+        self.label_text_color_override.set(Some(color));
+        self.sync_base_theme();
+    }
+
     pub(crate) fn replace_indicator_root(&self, next_root: FlexBox) {
         if next_root
             .retained_node_ref()
@@ -251,7 +270,9 @@ impl PressableLabeledControl {
             key_pressed_state: self.key_pressed_state.clone(),
             pointer_pressed_state: self.pointer_pressed_state.clone(),
             enabled_state: self.enabled_state.clone(),
+            label_font_family_override: self.label_font_family_override.clone(),
             label_font_size_override: self.label_font_size_override.clone(),
+            label_text_color_override: self.label_text_color_override.clone(),
             colors_value: self.colors_value.clone(),
             activation: self.activation.clone(),
             state_changed: self.state_changed.clone(),
@@ -265,6 +286,8 @@ impl PressableLabeledControl {
             &self.label_node,
             &self.gap_node,
             self.label_font_size_override.get(),
+            self.label_font_family_override.borrow().clone(),
+            self.label_text_color_override.get(),
             self.colors_value.get(),
             self.enabled_state.get(),
         );
@@ -284,6 +307,8 @@ fn sync_base_theme_parts(
     label_node: &TextCore,
     gap_node: &FlexBox,
     label_font_size_override: f32,
+    label_font_family_override: Option<crate::FontFamily>,
+    label_text_color_override: Option<u32>,
     colors: Option<LabeledControlColors>,
     enabled: bool,
 ) {
@@ -304,7 +329,7 @@ fn sync_base_theme_parts(
     root.opacity(if enabled { 1.0 } else { 0.6 });
     gap_node.width(theme.spacing.sm, Unit::Pixel);
     label_node
-        .font_family(theme.fonts.body_family.clone())
+        .font_family(label_font_family_override.unwrap_or_else(|| theme.fonts.body_family.clone()))
         .font_size(if label_font_size_override > 0.0 {
             label_font_size_override
         } else {
@@ -321,7 +346,7 @@ fn sync_base_theme_parts(
             .map(|colors| colors.text_muted_color())
             .unwrap_or(theme.colors.text_muted)
     };
-    label_node.text_color(label_color);
+    label_node.text_color(label_text_color_override.unwrap_or(label_color));
 }
 
 fn sync_focus_chrome_parts(root: &FlexBox, focused: bool, enabled: bool) {
@@ -347,7 +372,9 @@ struct PressableLabeledControlEventTarget {
     key_pressed_state: Rc<Cell<bool>>,
     pointer_pressed_state: Rc<Cell<bool>>,
     enabled_state: Rc<Cell<bool>>,
+    label_font_family_override: Rc<RefCell<Option<crate::FontFamily>>>,
     label_font_size_override: Rc<Cell<f32>>,
+    label_text_color_override: Rc<Cell<Option<u32>>>,
     colors_value: Rc<Cell<Option<LabeledControlColors>>>,
     activation: Rc<RefCell<Option<ActivationCallback>>>,
     state_changed: Rc<RefCell<Option<StateCallback>>>,
@@ -373,6 +400,8 @@ impl PressableLabeledControlEventTarget {
             &self.label_node,
             &self.gap_node,
             self.label_font_size_override.get(),
+            self.label_font_family_override.borrow().clone(),
+            self.label_text_color_override.get(),
             self.colors_value.get(),
             self.enabled_state.get(),
         );

package/src/controls/internal/text_input_core.rs

@@ -174,7 +174,7 @@ impl TextInputCore {
             .semantic_role(SemanticRole::Textbox)
             .reflect_semantic_disabled_from_enabled()
             .focusable(true, 0)
-            .selectable(true, 0)
+            .selectable(true)
             .editable(true);
         let placeholder_text = TextCore::new("");
         let placeholder_host = flex_box();
@@ -891,7 +891,7 @@ impl TextInputCore {
     }
 
     fn sync_editor_editability(&self) {
-        self.editor_text.selectable(is_enabled(&self.root), 0);
+        self.editor_text.selectable(is_enabled(&self.root));
         self.editor_text
             .editable(!self.read_only_value.get() && is_enabled(&self.root));
     }

package/src/controls/mod.rs

@@ -69,6 +69,30 @@ pub struct SliderChangedEventArgs {
     pub value: f32,
 }
 
+pub trait LabeledControlTextStyle: Sized {
+    #[doc(hidden)]
+    fn set_label_font_family(&self, family: crate::FontFamily);
+    #[doc(hidden)]
+    fn set_label_font_size(&self, size: f32);
+    #[doc(hidden)]
+    fn set_label_text_color(&self, color: u32);
+
+    fn font_family(&self, family: crate::FontFamily) -> &Self {
+        self.set_label_font_family(family);
+        self
+    }
+
+    fn font_size(&self, size: f32) -> &Self {
+        self.set_label_font_size(size);
+        self
+    }
+
+    fn text_color(&self, color: u32) -> &Self {
+        self.set_label_text_color(color);
+        self
+    }
+}
+
 #[derive(Clone, Debug, PartialEq, Eq)]
 pub struct DropdownChangedEventArgs<T> {
     pub item: T,

package/src/controls/nav_link.rs

@@ -42,6 +42,7 @@ pub struct NavLink {
     enter_pressed: Rc<Cell<bool>>,
     enter_pressed_open_in_new_tab: Rc<Cell<bool>>,
     preview_pinned_for_context_menu: Rc<Cell<bool>>,
+    text_color_override: Rc<Cell<Option<u32>>>,
     theme_guard: Rc<RefCell<Option<SubscriptionGuard>>>,
     focus_visibility_guard: Rc<RefCell<Option<SubscriptionGuard>>>,
 }
@@ -88,6 +89,7 @@ impl NavLink {
             enter_pressed: Rc::new(Cell::new(false)),
             enter_pressed_open_in_new_tab: Rc::new(Cell::new(false)),
             preview_pinned_for_context_menu: Rc::new(Cell::new(false)),
+            text_color_override: Rc::new(Cell::new(None)),
             theme_guard: Rc::new(RefCell::new(None)),
             focus_visibility_guard: Rc::new(RefCell::new(None)),
         };
@@ -209,7 +211,7 @@ impl NavLink {
     fn event_target(&self) -> NavLinkEventTarget {
         NavLinkEventTarget {
             weak_root: self.root.downgrade(),
-            label: self.label.retained_node_ref(),
+            label: self.label.clone(),
             href: self.href.clone(),
             open_in_new_tab: self.open_in_new_tab.clone(),
             navigate: self.navigate.clone(),
@@ -220,9 +222,24 @@ impl NavLink {
             enter_pressed: self.enter_pressed.clone(),
             enter_pressed_open_in_new_tab: self.enter_pressed_open_in_new_tab.clone(),
             preview_pinned_for_context_menu: self.preview_pinned_for_context_menu.clone(),
+            text_color_override: self.text_color_override.clone(),
         }
     }
 
+    fn set_explicit_font_family(&self, family: crate::FontFamily) {
+        self.label.font_family(family);
+    }
+
+    fn set_explicit_font_size(&self, size: f32) {
+        self.label.font_size(size);
+    }
+
+    fn set_explicit_text_color(&self, color: u32) {
+        self.text_color_override.set(Some(color));
+        self.label.text_color(color);
+        self.sync_visual_state();
+    }
+
     pub fn href(&self) -> String {
         self.href.borrow().clone()
     }
@@ -281,10 +298,24 @@ impl HasFlexBoxRoot for NavLink {
     }
 }
 
+impl LabeledControlTextStyle for NavLink {
+    fn set_label_font_family(&self, family: crate::FontFamily) {
+        self.set_explicit_font_family(family);
+    }
+
+    fn set_label_font_size(&self, size: f32) {
+        self.set_explicit_font_size(size);
+    }
+
+    fn set_label_text_color(&self, color: u32) {
+        self.set_explicit_text_color(color);
+    }
+}
+
 #[derive(Clone)]
 struct NavLinkEventTarget {
     weak_root: WeakFlexBox,
-    label: NodeRef,
+    label: TextNode,
     href: Rc<RefCell<String>>,
     open_in_new_tab: Rc<Cell<bool>>,
     navigate: Rc<RefCell<Option<NavigateCallback>>>,
@@ -295,6 +326,7 @@ struct NavLinkEventTarget {
     enter_pressed: Rc<Cell<bool>>,
     enter_pressed_open_in_new_tab: Rc<Cell<bool>>,
     preview_pinned_for_context_menu: Rc<Cell<bool>>,
+    text_color_override: Rc<Cell<Option<u32>>>,
 }
 
 impl NavLinkEventTarget {
@@ -371,14 +403,15 @@ impl NavLinkEventTarget {
     }
 
     fn sync_visual_state(&self) {
-        let color = if self.hovered.get() {
-            current_theme().colors.accent_hovered
-        } else {
-            current_theme().colors.accent
-        };
-        let label = &self.label;
-        if label.handle() != NodeHandle::INVALID {
-            ui::set_text_color(label.handle().raw(), color);
+        let color = self.text_color_override.get().unwrap_or_else(|| {
+            if self.hovered.get() {
+                current_theme().colors.accent_hovered
+            } else {
+                current_theme().colors.accent
+            }
+        });
+        if self.label.handle() != NodeHandle::INVALID {
+            ui::set_text_color(self.label.handle().raw(), color);
         }
     }
 

package/src/controls/radio_button.rs

@@ -195,6 +195,20 @@ impl RadioButton {
     }
 }
 
+impl LabeledControlTextStyle for RadioButton {
+    fn set_label_font_family(&self, family: crate::FontFamily) {
+        self.base.font_family(family);
+    }
+
+    fn set_label_font_size(&self, size: f32) {
+        self.base.font_size(size);
+    }
+
+    fn set_label_text_color(&self, color: u32) {
+        self.base.text_color(color);
+    }
+}
+
 impl Node for RadioButton {
     fn retained_node_ref(&self) -> NodeRef {
         self.root.retained_node_ref()

package/src/controls/switch.rs

@@ -186,6 +186,20 @@ impl Switch {
     }
 }
 
+impl LabeledControlTextStyle for Switch {
+    fn set_label_font_family(&self, family: crate::FontFamily) {
+        self.base.font_family(family);
+    }
+
+    fn set_label_font_size(&self, size: f32) {
+        self.base.font_size(size);
+    }
+
+    fn set_label_text_color(&self, color: u32) {
+        self.base.text_color(color);
+    }
+}
+
 impl Node for Switch {
     fn retained_node_ref(&self) -> NodeRef {
         self.root.retained_node_ref()

package/src/lib.rs

@@ -314,6 +314,31 @@ macro_rules! ui {
     };
 }
 
+#[macro_export]
+macro_rules! fui_component {
+    ($component:ty => $root:ident) => {
+        impl $crate::Node for $component {
+            fn retained_node_ref(&self) -> $crate::node::NodeRef {
+                $crate::Node::retained_node_ref(&self.$root)
+            }
+
+            fn retained_owner_attachment(&self) -> Option<std::rc::Rc<dyn std::any::Any>> {
+                $crate::Node::retained_owner_attachment(&self.$root)
+            }
+
+            fn build_self(&self) {
+                $crate::Node::build_self(&self.$root);
+            }
+        }
+
+        impl $crate::HasFlexBoxRoot for $component {
+            fn flex_box_root(&self) -> &$crate::FlexBox {
+                $crate::HasFlexBoxRoot::flex_box_root(&self.$root)
+            }
+        }
+    };
+}
+
 pub mod prelude {
     pub use crate::animation::{
         animate_color, animate_color_with, animate_float, animate_float_with,
@@ -345,19 +370,19 @@ pub mod prelude {
         DropdownChevronVisualState, DropdownColors, DropdownFieldMetrics, DropdownFieldPresenter,
         DropdownFieldTemplate, DropdownFieldVisualState, DropdownItem, DropdownOptionRowMetrics,
         DropdownOptionRowPresenter, DropdownOptionRowTemplate, DropdownOptionRowVisualState,
-        DropdownSizing, Form, LabeledControlColors, LabeledControlSizing, MenuItem, NavLink,
-        NavigateEventArgs, Popup, PressableIndicatorMetrics, PressableIndicatorPresenter,
-        PressableIndicatorVisualState, ProgressBar, RadioButton, RadioButtonChangedEventArgs,
-        RadioGroup, RadioGroupChangedEventArgs, RadioIndicatorPresenter, RadioIndicatorTemplate,
-        RadioIndicatorVisualState, SelectionArea, Slider, SliderChangedEventArgs, SliderColors,
-        SliderPresenter, SliderPresenterMetrics, SliderSizing, SliderTemplate, SliderVisualState,
-        Switch, SwitchChangedEventArgs, SwitchIndicatorPresenter, SwitchIndicatorTemplate,
-        SwitchIndicatorVisualState, TextArea, TextInput, TextInputColors, TextInputPresenter,
-        TextInputTemplate, TextInputVisualState, DEFAULT_BUTTON_TEMPLATE,
-        DEFAULT_CHECKBOX_INDICATOR_TEMPLATE, DEFAULT_DROPDOWN_CHEVRON_TEMPLATE,
-        DEFAULT_DROPDOWN_FIELD_TEMPLATE, DEFAULT_DROPDOWN_OPTION_ROW_TEMPLATE,
-        DEFAULT_RADIO_INDICATOR_TEMPLATE, DEFAULT_SLIDER_TEMPLATE,
-        DEFAULT_SWITCH_INDICATOR_TEMPLATE, DEFAULT_TEXT_INPUT_TEMPLATE,
+        DropdownSizing, Form, LabeledControlColors, LabeledControlSizing, LabeledControlTextStyle,
+        MenuItem, NavLink, NavigateEventArgs, Popup, PressableIndicatorMetrics,
+        PressableIndicatorPresenter, PressableIndicatorVisualState, ProgressBar, RadioButton,
+        RadioButtonChangedEventArgs, RadioGroup, RadioGroupChangedEventArgs,
+        RadioIndicatorPresenter, RadioIndicatorTemplate, RadioIndicatorVisualState, SelectionArea,
+        Slider, SliderChangedEventArgs, SliderColors, SliderPresenter, SliderPresenterMetrics,
+        SliderSizing, SliderTemplate, SliderVisualState, Switch, SwitchChangedEventArgs,
+        SwitchIndicatorPresenter, SwitchIndicatorTemplate, SwitchIndicatorVisualState, TextArea,
+        TextInput, TextInputColors, TextInputPresenter, TextInputTemplate, TextInputVisualState,
+        DEFAULT_BUTTON_TEMPLATE, DEFAULT_CHECKBOX_INDICATOR_TEMPLATE,
+        DEFAULT_DROPDOWN_CHEVRON_TEMPLATE, DEFAULT_DROPDOWN_FIELD_TEMPLATE,
+        DEFAULT_DROPDOWN_OPTION_ROW_TEMPLATE, DEFAULT_RADIO_INDICATOR_TEMPLATE,
+        DEFAULT_SLIDER_TEMPLATE, DEFAULT_SWITCH_INDICATOR_TEMPLATE, DEFAULT_TEXT_INPUT_TEMPLATE,
     };
     pub use crate::drag_drop::{
         DragCompletedEventArgs, DragDataObject, DragDropEffects, DragEventArgs, DragSession,
@@ -386,6 +411,7 @@ pub mod prelude {
         FileWorkerProcessResult, FileWriteProgress,
     };
     pub use crate::focus_visibility::show_keyboard_focus_for_key_event;
+    pub use crate::fui_component;
     pub use crate::image_sampling::{ImageSampling, ImageSamplingMode};
     pub use crate::logger;
     pub use crate::navigation;

package/src/mobile_text_selection_toolbar.rs

@@ -174,7 +174,7 @@ fn create_label(label: &str, slot: i32) -> TextNode {
         .font_size(theme.context_menu.item.font_size)
         .text_color(theme.context_menu.item.text_color)
         .text_overflow(TextOverflow::Ellipsis)
-        .selectable(false, theme.colors.selection)
+        .selectable(false)
         .interactive(true)
         .preserve_selection_on_pointer_down(true)
         .on_pointer_up(move |event| {

package/src/node/core.rs

@@ -514,7 +514,7 @@ impl NodeRef {
         }
     }
 
-    pub(crate) fn from_node<T: Node>(inner: Rc<RefCell<NodeCore>>, node: T) -> Self {
+    pub(crate) fn from_node<T: Node + 'static>(inner: Rc<RefCell<NodeCore>>, node: T) -> Self {
         Self {
             inner,
             build_callback: Some(Rc::new(move || node.build())),
@@ -1561,7 +1561,7 @@ impl NodeRef {
     }
 }
 
-pub trait Node: Clone + 'static {
+pub trait Node: Clone {
     #[doc(hidden)]
     fn node_ref(&self) -> NodeRef {
         self.retained_node_ref()
@@ -2208,3 +2208,17 @@ pub trait Node: Clone + 'static {
         self
     }
 }
+
+impl<T: Node + ?Sized> Node for &T {
+    fn retained_node_ref(&self) -> NodeRef {
+        (*self).retained_node_ref()
+    }
+
+    fn retained_owner_attachment(&self) -> Option<Rc<dyn Any>> {
+        (*self).retained_owner_attachment()
+    }
+
+    fn build_self(&self) {
+        (*self).build_self();
+    }
+}

package/src/node/mod.rs

@@ -32,8 +32,10 @@ mod svg_node;
 mod text_node;
 mod virtual_list;
 
+#[doc(hidden)]
+pub use core::NodeRef;
 pub use core::{ContextMenuEventArgs, Node, NodeHandle};
-pub(crate) use core::{NodeRef, WeakFlexBox, WeakNodeRef};
+pub(crate) use core::{WeakFlexBox, WeakNodeRef};
 pub use custom_drawable::CustomDrawable;
 pub use flex_box::{Border, FlexBox, GradientStop};
 pub use grid::{Grid, GridTrack};
@@ -59,7 +61,25 @@ pub trait HasFlexBoxRoot {
     fn flex_box_root(&self) -> &FlexBox;
 }
 
+impl HasFlexBoxRoot for FlexBox {
+    fn flex_box_root(&self) -> &FlexBox {
+        self
+    }
+}
+
 pub trait FlexBoxSurface: HasFlexBoxRoot {
+    fn bind_theme(&self, handler: impl Fn(&FlexBox, crate::theme::Theme) + 'static) -> &Self {
+        let root = self.flex_box_root();
+        let weak_root = root.downgrade();
+        let guard = crate::theme::subscribe(move |theme| {
+            if let Some(root) = weak_root.upgrade() {
+                handler(&root, theme);
+            }
+        });
+        root.retained_node_ref().retain_attachment(Rc::new(guard));
+        self
+    }
+
     fn width(&self, width: f32, unit: Unit) -> &Self {
         self.flex_box_root().width(width, unit);
         self

package/src/node/text_node.rs

@@ -81,6 +81,19 @@ impl TextNode {
         self
     }
 
+    pub fn bind_theme(&self, handler: impl Fn(&TextNode, crate::theme::Theme) + 'static) -> &Self {
+        let weak_core = Rc::downgrade(&self.core);
+        let weak_props = Rc::downgrade(&self.props);
+        let guard = crate::theme::subscribe(move |theme| {
+            let (Some(core), Some(props)) = (weak_core.upgrade(), weak_props.upgrade()) else {
+                return;
+            };
+            handler(&TextNode { core, props }, theme);
+        });
+        self.retained_node_ref().retain_attachment(Rc::new(guard));
+        self
+    }
+
     pub fn width(&self, width: f32, unit: Unit) -> &Self {
         self.props.borrow_mut().width = Some((width, unit));
         {
@@ -281,15 +294,13 @@ impl TextNode {
         self
     }
 
-    pub fn selectable(&self, selectable: bool, selection_color: u32) -> &Self {
-        let resolved_selection_color = if selection_color == 0 {
-            theme::current_theme().colors.selection
-        } else {
-            selection_color
-        };
+    pub fn selectable(&self, selectable: bool) -> &Self {
         let mut props = self.props.borrow_mut();
+        let resolved_selection_color = props
+            .selectable
+            .map(|(_, color)| color)
+            .unwrap_or_else(|| theme::current_theme().colors.selection);
         props.selectable = Some((selectable, resolved_selection_color));
-        props.uses_theme_selection_color = selection_color == 0;
         drop(props);
         self.core.borrow_mut().behavior.selectable_text = selectable;
         if self.has_built_handle() {
@@ -299,6 +310,19 @@ impl TextNode {
         self
     }
 
+    pub fn selection_color(&self, color: u32) -> &Self {
+        let mut props = self.props.borrow_mut();
+        let selectable = props.selectable.map(|(value, _)| value).unwrap_or(false);
+        props.selectable = Some((selectable, color));
+        props.uses_theme_selection_color = false;
+        drop(props);
+        if self.has_built_handle() {
+            ui::set_selectable(self.handle().raw(), selectable, color);
+            self.notify_retained_mutation();
+        }
+        self
+    }
+
     pub fn editable(&self, editable: bool) -> &Self {
         if editable {
             let selection_color = self