@effindomv2/fui-rs 0.1.12 → 0.1.13

package/src/controls/radio_button.rs

@@ -1,4 +1,6 @@
-use super::internal::pressable_labeled_control::PressableLabeledControlState;
+use super::internal::pressable_labeled_control::{
+    PressableLabeledControlState, WeakPressableLabeledControl,
+};
 use super::internal::radio_indicator_presenter::{
     create_default_radio_indicator_presenter, RadioIndicatorPresenter, RadioIndicatorTemplate,
     RadioIndicatorVisualState,
@@ -250,9 +252,24 @@ impl HasFlexBoxRoot for RadioButton {
     }
 }
 
+impl ThemeBindable for RadioButton {
+    fn theme_binding_node(&self) -> NodeRef {
+        self.root.retained_node_ref()
+    }
+
+    fn weak_theme_target(&self) -> Box<dyn Fn() -> Option<Self>> {
+        let target = RadioEventTarget::from_radio(self);
+        Box::new(move || target.upgrade())
+    }
+}
+
 #[derive(Clone)]
 struct RadioEventTarget {
+    base: WeakPressableLabeledControl,
     presenter: Rc<RefCell<Rc<dyn RadioIndicatorPresenter>>>,
+    template_override: Rc<RefCell<Option<Rc<dyn RadioIndicatorTemplate>>>>,
+    sizing_value: Rc<Cell<Option<LabeledControlSizing>>>,
+    value_text: String,
     checked: Rc<Cell<bool>>,
     colors_value: Rc<Cell<Option<LabeledControlColors>>>,
     changed: Rc<RefCell<Option<RadioButtonChangedCallback>>>,
@@ -263,7 +280,11 @@ struct RadioEventTarget {
 impl RadioEventTarget {
     fn from_radio(radio: &RadioButton) -> Self {
         Self {
+            base: radio.base.downgrade(),
             presenter: radio.indicator_presenter.clone(),
+            template_override: radio.template_override.clone(),
+            sizing_value: radio.sizing_value.clone(),
+            value_text: radio.value_text.clone(),
             checked: radio.checked.clone(),
             colors_value: radio.colors_value.clone(),
             changed: radio.changed.clone(),
@@ -272,6 +293,23 @@ impl RadioEventTarget {
         }
     }
 
+    fn upgrade(&self) -> Option<RadioButton> {
+        let base = self.base.upgrade()?;
+        Some(RadioButton {
+            root: base.root(),
+            base,
+            indicator_presenter: self.presenter.clone(),
+            template_override: self.template_override.clone(),
+            sizing_value: self.sizing_value.clone(),
+            colors_value: self.colors_value.clone(),
+            value_text: self.value_text.clone(),
+            checked: self.checked.clone(),
+            changed: self.changed.clone(),
+            owner_group: self.owner_group.clone(),
+            weak_root: self.weak_root.clone(),
+        })
+    }
+
     fn activate(&self, base_state: PressableLabeledControlState) {
         if let Some(group) = self.owner_group() {
             if let Some(handle) = upgraded_handle(&self.weak_root) {

package/src/controls/selection_area.rs

@@ -80,3 +80,20 @@ impl HasFlexBoxRoot for SelectionArea {
         &self.root
     }
 }
+
+impl ThemeBindable for SelectionArea {
+    fn theme_binding_node(&self) -> NodeRef {
+        self.root.retained_node_ref()
+    }
+
+    fn weak_theme_target(&self) -> Box<dyn Fn() -> Option<Self>> {
+        let weak_root = self.root.downgrade();
+        let signal = self.selected_text_signal.clone();
+        Box::new(move || {
+            Some(SelectionArea {
+                root: weak_root.upgrade()?,
+                selected_text_signal: signal.clone(),
+            })
+        })
+    }
+}

package/src/controls/slider.rs

@@ -415,11 +415,24 @@ impl HasFlexBoxRoot for Slider {
     }
 }
 
+impl ThemeBindable for Slider {
+    fn theme_binding_node(&self) -> NodeRef {
+        self.root.retained_node_ref()
+    }
+
+    fn weak_theme_target(&self) -> Box<dyn Fn() -> Option<Self>> {
+        let target = SliderEventTarget::from_slider(self);
+        Box::new(move || target.upgrade())
+    }
+}
+
 #[derive(Clone)]
 struct SliderEventTarget {
     weak_root: Rc<WeakNodeRef>,
     weak_flex_root: WeakFlexBox,
     slider_presenter: Rc<RefCell<Rc<dyn SliderPresenter>>>,
+    template_override: Rc<RefCell<Option<Rc<dyn SliderTemplate>>>>,
+    sizing_value: Rc<Cell<Option<SliderSizing>>>,
     min: Rc<Cell<f32>>,
     max: Rc<Cell<f32>>,
     step: Rc<Cell<f32>>,
@@ -439,6 +452,8 @@ impl SliderEventTarget {
             weak_root: slider.weak_root.clone(),
             weak_flex_root: slider.weak_flex_root.clone(),
             slider_presenter: slider.slider_presenter.clone(),
+            template_override: slider.template_override.clone(),
+            sizing_value: slider.sizing_value.clone(),
             min: slider.min.clone(),
             max: slider.max.clone(),
             step: slider.step.clone(),
@@ -453,6 +468,28 @@ impl SliderEventTarget {
         }
     }
 
+    fn upgrade(&self) -> Option<Slider> {
+        Some(Slider {
+            root: self.weak_flex_root.upgrade()?,
+            slider_presenter: self.slider_presenter.clone(),
+            template_override: self.template_override.clone(),
+            sizing_value: self.sizing_value.clone(),
+            colors_value: self.colors_value.clone(),
+            min: self.min.clone(),
+            max: self.max.clone(),
+            step: self.step.clone(),
+            value: self.value.clone(),
+            length: self.length.clone(),
+            orientation: self.orientation.clone(),
+            changed: self.changed.clone(),
+            hovered_state: self.hovered_state.clone(),
+            dragging_state: self.dragging_state.clone(),
+            focused_state: self.focused_state.clone(),
+            weak_root: self.weak_root.clone(),
+            weak_flex_root: self.weak_flex_root.clone(),
+        })
+    }
+
     fn is_enabled(&self) -> bool {
         self.weak_flex_root
             .upgrade()

package/src/controls/switch.rs

@@ -1,4 +1,6 @@
-use super::internal::pressable_labeled_control::PressableLabeledControlState;
+use super::internal::pressable_labeled_control::{
+    PressableLabeledControlState, WeakPressableLabeledControl,
+};
 use super::internal::switch_indicator_presenter::{
     create_default_switch_indicator_presenter, SwitchIndicatorPresenter, SwitchIndicatorTemplate,
     SwitchIndicatorVisualState,
@@ -241,9 +243,23 @@ impl HasFlexBoxRoot for Switch {
     }
 }
 
+impl ThemeBindable for Switch {
+    fn theme_binding_node(&self) -> NodeRef {
+        self.root.retained_node_ref()
+    }
+
+    fn weak_theme_target(&self) -> Box<dyn Fn() -> Option<Self>> {
+        let target = SwitchEventTarget::from_switch(self);
+        Box::new(move || target.upgrade())
+    }
+}
+
 #[derive(Clone)]
 struct SwitchEventTarget {
+    base: WeakPressableLabeledControl,
     presenter: Rc<RefCell<Rc<dyn SwitchIndicatorPresenter>>>,
+    template_override: Rc<RefCell<Option<Rc<dyn SwitchIndicatorTemplate>>>>,
+    sizing_value: Rc<Cell<Option<LabeledControlSizing>>>,
     checked: Rc<Cell<bool>>,
     colors_value: Rc<Cell<Option<LabeledControlColors>>>,
     changed: Rc<RefCell<Option<SwitchChangedCallback>>>,
@@ -253,7 +269,10 @@ struct SwitchEventTarget {
 impl SwitchEventTarget {
     fn from_switch(switch: &Switch) -> Self {
         Self {
+            base: switch.base.downgrade(),
             presenter: switch.indicator_presenter.clone(),
+            template_override: switch.template_override.clone(),
+            sizing_value: switch.sizing_value.clone(),
             checked: switch.checked.clone(),
             colors_value: switch.colors_value.clone(),
             changed: switch.changed.clone(),
@@ -261,6 +280,21 @@ impl SwitchEventTarget {
         }
     }
 
+    fn upgrade(&self) -> Option<Switch> {
+        let base = self.base.upgrade()?;
+        Some(Switch {
+            root: base.root(),
+            base,
+            indicator_presenter: self.presenter.clone(),
+            template_override: self.template_override.clone(),
+            sizing_value: self.sizing_value.clone(),
+            colors_value: self.colors_value.clone(),
+            checked: self.checked.clone(),
+            changed: self.changed.clone(),
+            weak_root: self.weak_root.clone(),
+        })
+    }
+
     fn activate(&self, base_state: PressableLabeledControlState) {
         apply_switch_checked(
             &self.presenter,

package/src/controls/tests.rs

@@ -1185,6 +1185,149 @@ fn nav_link_bind_theme_preserves_concrete_control_dx_and_retained_lifetime() {
     use_custom_theme(previous_theme);
 }
 
+#[test]
+fn button_bind_theme_preserves_concrete_control_dx_and_retained_lifetime() {
+    ffi::test::reset();
+    let previous_theme = current_theme();
+    let parent = column();
+    let control = button("Themed action");
+    control.bind_theme(|button, theme| {
+        button.colors(
+            ButtonColors::new()
+                .background(theme.colors.accent)
+                .text_primary(theme.colors.text_on_accent),
+        );
+    });
+    parent.child(&control);
+    Application::mount(parent);
+    let handle = control.handle().raw();
+    drop(control);
+    ffi::test::take_calls();
+
+    let changed = generate_theme(false, 0x2468ACFF);
+    use_custom_theme(changed.clone());
+    let calls = ffi::test::take_calls();
+    assert!(calls.iter().any(|call| matches!(
+        call,
+        Call::SetBgColor { handle: actual, color }
+            if *actual == handle && *color == changed.colors.accent
+    )));
+
+    use_custom_theme(previous_theme);
+}
+
+#[test]
+fn flex_box_backed_controls_preserve_concrete_bind_theme_dx() {
+    ffi::test::reset();
+    let invocations = Rc::new(Cell::new(0));
+    let count = |invocations: &Rc<Cell<i32>>| {
+        let invocations = invocations.clone();
+        move || invocations.set(invocations.get() + 1)
+    };
+
+    let checkbox = checkbox("Checkbox");
+    checkbox.bind_theme({
+        let count = count(&invocations);
+        move |control, theme| {
+            count();
+            control.colors(LabeledControlColors::new().text_primary(theme.colors.text_primary));
+        }
+    });
+    let switch = switch("Switch");
+    switch.bind_theme({
+        let count = count(&invocations);
+        move |control, theme| {
+            count();
+            control.colors(LabeledControlColors::new().text_primary(theme.colors.text_primary));
+        }
+    });
+    let radio = radio_button("Radio");
+    radio.bind_theme({
+        let count = count(&invocations);
+        move |control, theme| {
+            count();
+            control.colors(LabeledControlColors::new().text_primary(theme.colors.text_primary));
+        }
+    });
+    let slider = slider();
+    slider.bind_theme({
+        let count = count(&invocations);
+        move |control, theme| {
+            count();
+            control.colors(SliderColors::new().fill(theme.colors.accent));
+        }
+    });
+    let progress = progress_bar();
+    progress.bind_theme({
+        let count = count(&invocations);
+        move |control, theme| {
+            count();
+            control.colors(ProgressBarColors::new().fill(theme.colors.accent));
+        }
+    });
+    let dropdown = dropdown();
+    dropdown.bind_theme({
+        let count = count(&invocations);
+        move |control, theme| {
+            count();
+            control.colors(DropdownColors::new().text_primary(theme.colors.text_primary));
+        }
+    });
+    let combo = combo_box();
+    combo.bind_theme({
+        let count = count(&invocations);
+        move |control, theme| {
+            count();
+            control.colors(DropdownColors::new().text_primary(theme.colors.text_primary));
+        }
+    });
+    let input = text_input();
+    input.bind_theme({
+        let count = count(&invocations);
+        move |control, theme| {
+            count();
+            control.colors(TextInputColors::new().text_primary(theme.colors.text_primary));
+        }
+    });
+    let area = text_area();
+    area.bind_theme({
+        let count = count(&invocations);
+        move |control, theme| {
+            count();
+            control.colors(TextInputColors::new().text_primary(theme.colors.text_primary));
+        }
+    });
+    let selection = selection_area();
+    selection.bind_theme({
+        let count = count(&invocations);
+        move |control, _theme| {
+            count();
+            let _ = control.selected_text();
+        }
+    });
+    let barrier = anti_selection_area();
+    barrier.bind_theme({
+        let count = count(&invocations);
+        move |control, _theme| {
+            count();
+            control.children(Vec::<Child>::new());
+        }
+    });
+
+    let scroll = crate::scroll_box();
+    scroll.bind_theme({
+        let count = count(&invocations);
+        move |_control: &crate::ScrollBox, _theme| count()
+    });
+    let list = crate::virtual_list(10, 32.0);
+    list.bind_theme({
+        let count = count(&invocations);
+        move |_control: &crate::VirtualList, _theme| count()
+    });
+
+    assert_eq!(invocations.get(), 13);
+}
+
 #[test]
 fn retained_pressable_and_slider_keep_theme_subscriptions_after_wrappers_drop() {
     ffi::test::reset();
@@ -3214,6 +3357,100 @@ fn progress_bar_invalid_sizing_warns_and_falls_back_to_defaults() {
     )));
 }
 
+#[test]
+fn progress_bar_direct_length_and_thickness_match_fui_as() {
+    ffi::test::reset();
+    let progress = progress_bar();
+    progress.length(320.0).thickness(18.0);
+    Application::mount(progress);
+    let calls = ffi::test::take_calls();
+    assert!(calls.iter().any(|call| matches!(
+        call,
+        Call::SetWidth { value, unit_enum, .. }
+            if *value == 320.0 && *unit_enum == Unit::Pixel as u32
+    )));
+    assert!(calls.iter().any(|call| matches!(
+        call,
+        Call::SetHeight { value, unit_enum, .. }
+            if *value == 18.0 && *unit_enum == Unit::Pixel as u32
+    )));
+
+    ffi::test::reset();
+    let progress = progress_bar();
+    progress.length(0.0).thickness(-2.0);
+    let calls = ffi::test::take_calls();
+    assert!(calls.iter().any(|call| matches!(
+        call,
+        Call::Log { category, message }
+            if category == "Warning/Layout"
+                && message == "ProgressBar.length() received 0; clamping to 1.0."
+    )));
+    assert!(calls.iter().any(|call| matches!(
+        call,
+        Call::Log { category, message }
+            if category == "Warning/Layout"
+                && message == "ProgressBar.thickness() received -2; clamping to 1.0."
+    )));
+}
+
+#[test]
+fn progress_bar_maps_length_and_thickness_to_orientation() {
+    ffi::test::reset();
+    let progress = progress_bar();
+    progress
+        .value(25.0)
+        .length(300.0)
+        .thickness(18.0)
+        .orientation(Orientation::Vertical);
+    Application::mount(progress.clone());
+    let calls = ffi::test::take_calls();
+    let root_handle = progress.retained_node_ref().handle().raw();
+    let fill_handle = child_handles_for_parent(&calls, root_handle)
+        .into_iter()
+        .next()
+        .expect("fill handle");
+
+    assert!(calls.iter().any(|call| matches!(
+        call,
+        Call::SetWidth { handle, value, unit_enum }
+            if *handle == root_handle && *value == 18.0 && *unit_enum == Unit::Pixel as u32
+    )));
+    assert!(calls.iter().any(|call| matches!(
+        call,
+        Call::SetHeight { handle, value, unit_enum }
+            if *handle == root_handle && *value == 300.0 && *unit_enum == Unit::Pixel as u32
+    )));
+    assert!(calls.iter().any(|call| matches!(
+        call,
+        Call::SetWidth { handle, value, unit_enum }
+            if *handle == fill_handle && *value == 18.0 && *unit_enum == Unit::Pixel as u32
+    )));
+    assert!(calls.iter().any(|call| matches!(
+        call,
+        Call::SetHeight { handle, value, unit_enum }
+            if *handle == fill_handle && *value == 75.0 && *unit_enum == Unit::Pixel as u32
+    )));
+    assert!(calls.iter().any(|call| matches!(
+        call,
+        Call::SetSemanticOrientation { handle, orientation_enum }
+            if *handle == root_handle && *orientation_enum == Orientation::Vertical as u32
+    )));
+
+    ffi::test::reset();
+    progress.orientation(Orientation::Horizontal);
+    let calls = ffi::test::take_calls();
+    assert!(calls.iter().any(|call| matches!(
+        call,
+        Call::SetWidth { handle, value, unit_enum }
+            if *handle == root_handle && *value == 300.0 && *unit_enum == Unit::Pixel as u32
+    )));
+    assert!(calls.iter().any(|call| matches!(
+        call,
+        Call::SetHeight { handle, value, unit_enum }
+            if *handle == root_handle && *value == 18.0 && *unit_enum == Unit::Pixel as u32
+    )));
+}
+
 #[test]
 fn progress_bar_theme_changes_update_default_colors() {
     ffi::test::reset();

package/src/controls/text_area.rs

@@ -198,6 +198,21 @@ impl HasFlexBoxRoot for TextArea {
     }
 }
 
+impl crate::ThemeBindable for TextArea {
+    fn theme_binding_node(&self) -> NodeRef {
+        self.core.flex_box_root().retained_node_ref()
+    }
+
+    fn weak_theme_target(&self) -> Box<dyn Fn() -> Option<Self>> {
+        let weak_core = Rc::downgrade(&self.core);
+        Box::new(move || {
+            Some(TextArea {
+                core: weak_core.upgrade()?,
+            })
+        })
+    }
+}
+
 impl Node for TextArea {
     fn retained_node_ref(&self) -> NodeRef {
         let core = self.core.clone();

package/src/controls/text_input.rs

@@ -189,6 +189,21 @@ impl HasFlexBoxRoot for TextInput {
     }
 }
 
+impl crate::ThemeBindable for TextInput {
+    fn theme_binding_node(&self) -> NodeRef {
+        self.core.flex_box_root().retained_node_ref()
+    }
+
+    fn weak_theme_target(&self) -> Box<dyn Fn() -> Option<Self>> {
+        let weak_core = Rc::downgrade(&self.core);
+        Box::new(move || {
+            Some(TextInput {
+                core: weak_core.upgrade()?,
+            })
+        })
+    }
+}
+
 impl Node for TextInput {
     fn retained_node_ref(&self) -> NodeRef {
         let core = self.core.clone();

package/src/generated/framework_host_services.rs

@@ -19,56 +19,56 @@ unsafe extern "C" {
 }
 
 pub fn fui_get_accent_color() -> u32 {
-  #[cfg(any(target_family = "wasm", feature = "native-runtime"))]
-  {
-    unsafe { __host_fui_get_accent_color() }
-  }
-  #[cfg(all(not(target_family = "wasm"), not(feature = "native-runtime")))]
-  {
-    unsafe { crate::ffi::fui_get_accent_color() }
-  }
+    #[cfg(any(target_family = "wasm", feature = "native-runtime"))]
+    {
+        unsafe { __host_fui_get_accent_color() }
+    }
+    #[cfg(all(not(target_family = "wasm"), not(feature = "native-runtime")))]
+    {
+        unsafe { crate::ffi::fui_get_accent_color() }
+    }
 }
 
 pub fn fui_get_platform_family() -> u32 {
-  #[cfg(any(target_family = "wasm", feature = "native-runtime"))]
-  {
-    unsafe { __host_fui_get_platform_family() }
-  }
-  #[cfg(all(not(target_family = "wasm"), not(feature = "native-runtime")))]
-  {
-    unsafe { crate::ffi::fui_get_platform_family() }
-  }
+    #[cfg(any(target_family = "wasm", feature = "native-runtime"))]
+    {
+        unsafe { __host_fui_get_platform_family() }
+    }
+    #[cfg(all(not(target_family = "wasm"), not(feature = "native-runtime")))]
+    {
+        unsafe { crate::ffi::fui_get_platform_family() }
+    }
 }
 
 pub fn fui_is_coarse_pointer() -> bool {
-  #[cfg(any(target_family = "wasm", feature = "native-runtime"))]
-  {
-    unsafe { __host_fui_is_coarse_pointer() }
-  }
-  #[cfg(all(not(target_family = "wasm"), not(feature = "native-runtime")))]
-  {
-    unsafe { crate::ffi::fui_is_coarse_pointer() }
-  }
+    #[cfg(any(target_family = "wasm", feature = "native-runtime"))]
+    {
+        unsafe { __host_fui_is_coarse_pointer() }
+    }
+    #[cfg(all(not(target_family = "wasm"), not(feature = "native-runtime")))]
+    {
+        unsafe { crate::ffi::fui_is_coarse_pointer() }
+    }
 }
 
 pub fn fui_is_dark_mode() -> bool {
-  #[cfg(any(target_family = "wasm", feature = "native-runtime"))]
-  {
-    unsafe { __host_fui_is_dark_mode() }
-  }
-  #[cfg(all(not(target_family = "wasm"), not(feature = "native-runtime")))]
-  {
-    unsafe { crate::ffi::fui_is_dark_mode() }
-  }
+    #[cfg(any(target_family = "wasm", feature = "native-runtime"))]
+    {
+        unsafe { __host_fui_is_dark_mode() }
+    }
+    #[cfg(all(not(target_family = "wasm"), not(feature = "native-runtime")))]
+    {
+        unsafe { crate::ffi::fui_is_dark_mode() }
+    }
 }
 
 pub fn fui_now_ms() -> f64 {
-  #[cfg(any(target_family = "wasm", feature = "native-runtime"))]
-  {
-    unsafe { __host_fui_now_ms() }
-  }
-  #[cfg(all(not(target_family = "wasm"), not(feature = "native-runtime")))]
-  {
-    crate::ffi::test::host_now_ms()
-  }
+    #[cfg(any(target_family = "wasm", feature = "native-runtime"))]
+    {
+        unsafe { __host_fui_now_ms() }
+    }
+    #[cfg(all(not(target_family = "wasm"), not(feature = "native-runtime")))]
+    {
+        crate::ffi::test::host_now_ms()
+    }
 }

package/src/lib.rs

@@ -424,7 +424,7 @@ pub mod prelude {
         Child, ContextMenuEventArgs, Corners, CustomDrawable, EdgeInsets, FlexBox, FlexBoxSurface,
         GradientStop, Grid, GridTrack, HasFlexBoxRoot, Image, ImageNode, Length, Node,
         PresenterHostStyle, ScrollBar, ScrollBarVisibility, ScrollBox, ScrollState, ScrollView,
-        Shadow, Svg, SvgNode, Text, TextCore, TextNode, VirtualList,
+        Shadow, Svg, SvgNode, Text, TextCore, TextNode, ThemeBindable, VirtualList,
     };
     pub use crate::persisted;
     pub use crate::platform;
@@ -542,7 +542,7 @@ pub use node::{
     ContextMenuEventArgs, Corners, CustomDrawable, EdgeInsets, FlexBox, FlexBoxSurface,
     GradientStop, Grid, GridTrack, HasFlexBoxRoot, Image, ImageNode, Length, Node,
     PresenterHostStyle, ScrollBar, ScrollBarVisibility, ScrollBox, ScrollState, ScrollView, Shadow,
-    Svg, SvgNode, Text, TextCore, TextNode, VirtualList,
+    Svg, SvgNode, Text, TextCore, TextNode, ThemeBindable, VirtualList,
 };
 pub use persisted::*;
 pub use platform::*;

package/src/node/mod.rs

@@ -64,25 +64,43 @@ pub trait HasFlexBoxRoot {
     fn flex_box_root(&self) -> &FlexBox;
 }
 
+pub trait ThemeBindable: Sized + 'static {
+    #[doc(hidden)]
+    fn theme_binding_node(&self) -> NodeRef;
+
+    #[doc(hidden)]
+    fn weak_theme_target(&self) -> Box<dyn Fn() -> Option<Self>>;
+
+    fn bind_theme(&self, handler: impl Fn(&Self, crate::theme::Theme) + 'static) -> &Self {
+        let target = self.weak_theme_target();
+        let guard = crate::theme::subscribe(move |theme| {
+            if let Some(control) = target() {
+                handler(&control, theme);
+            }
+        });
+        self.theme_binding_node().retain_attachment(Rc::new(guard));
+        self
+    }
+}
+
 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
+impl ThemeBindable for FlexBox {
+    fn theme_binding_node(&self) -> NodeRef {
+        self.retained_node_ref()
     }
 
+    fn weak_theme_target(&self) -> Box<dyn Fn() -> Option<Self>> {
+        let weak = self.downgrade();
+        Box::new(move || weak.upgrade())
+    }
+}
+
+pub trait FlexBoxSurface: HasFlexBoxRoot {
     fn width(&self, width: f32, unit: Unit) -> &Self {
         self.flex_box_root().width(width, unit);
         self