From 67edb42fbe972c013fc33a70f43d3a600e2b6068 Mon Sep 17 00:00:00 2001
From: Marc Espin <mespinsanz@gmail.com>
Date: Thu, 28 Mar 2024 21:56:55 +0100
Subject: [PATCH 01/23] feat: Incremental viewport creation (#542)

* feat: Make viewports a Node state

* clean up

* fix

* clean up
---
 crates/core/src/events/events_measurer.rs     | 24 +++--
 crates/core/src/layout/layout_measurer.rs     |  7 +-
 crates/core/src/layout/mod.rs                 |  2 -
 crates/core/src/layout/viewports.rs           | 89 -------------------
 crates/core/src/plugins.rs                    |  4 -
 crates/core/src/render.rs                     | 29 +++---
 crates/dom/src/dom.rs                         |  3 +-
 .../freya/src/plugins/performance_overlay.rs  |  8 --
 crates/native-core/src/dioxus.rs              |  5 +-
 crates/native-core/src/tags.rs                |  4 -
 crates/renderer/src/app.rs                    | 16 +---
 crates/renderer/src/renderer.rs               | 36 ++++----
 crates/state/src/lib.rs                       |  2 +
 crates/state/src/viewport.rs                  | 78 ++++++++++++++++
 crates/testing/src/launch.rs                  |  7 +-
 crates/testing/src/test_handler.rs            |  4 +-
 crates/testing/src/test_node.rs               | 24 ++---
 crates/testing/src/test_utils.rs              |  6 --
 18 files changed, 147 insertions(+), 201 deletions(-)
 delete mode 100644 crates/core/src/layout/viewports.rs
 create mode 100644 crates/state/src/viewport.rs

diff --git a/crates/core/src/events/events_measurer.rs b/crates/core/src/events/events_measurer.rs
index c6520988a..2a3b0cbab 100644
--- a/crates/core/src/events/events_measurer.rs
+++ b/crates/core/src/events/events_measurer.rs
@@ -1,11 +1,11 @@
-use crate::layout::{Layers, Viewports};
+use crate::layout::Layers;
 use dioxus_native_core::real_dom::NodeImmutable;
 use dioxus_native_core::NodeId;
 use dioxus_native_core::{prelude::NodeImmutableDioxusExt, tree::TreeRef};
 use freya_dom::{dom::DioxusDOM, prelude::FreyaDOM};
 
 use freya_engine::prelude::*;
-use freya_node_state::{Fill, Style};
+use freya_node_state::{Fill, Style, ViewportState};
 
 pub use crate::events::{DomEvent, NodesState, PlatformEvent};
 
@@ -20,14 +20,13 @@ pub fn process_events(
     events: &mut EventsQueue,
     event_emitter: &EventEmitter,
     nodes_state: &mut NodesState,
-    viewports: &Viewports,
     scale_factor: f64,
 ) {
     // 1. Get global events created from the incoming events
     let global_events = measure_global_events(events);
 
     // 2. Get potential events that could be emitted based on the elements layout and viewports
-    let potential_events = measure_potential_event_listeners(layers, events, viewports, dom);
+    let potential_events = measure_potential_event_listeners(layers, events, dom);
 
     // 3. Get what events can be actually emitted based on what elements are listening
     let dom_events = measure_dom_events(potential_events, dom, scale_factor);
@@ -74,12 +73,12 @@ pub fn measure_global_events(events: &EventsQueue) -> Vec<PlatformEvent> {
 pub fn measure_potential_event_listeners(
     layers: &Layers,
     events: &EventsQueue,
-    viewports: &Viewports,
     fdom: &FreyaDOM,
 ) -> PotentialEvents {
     let mut potential_events = PotentialEvents::default();
 
     let layout = fdom.layout();
+    let rdom = fdom.rdom();
 
     // Propagate events from the top to the bottom
     for (layer, layer_nodes) in layers.layers() {
@@ -106,17 +105,14 @@ pub fn measure_potential_event_listeners(
 
                             // Make sure the cursor is inside the node area
                             if cursor_is_inside {
-                                let node_viewports = viewports.get(node_id);
+                                let node = rdom.get(*node_id).unwrap();
+                                let node_viewports = node.get::<ViewportState>().unwrap();
 
                                 // Make sure the cursor is inside all the applicable viewports from the element
-                                if let Some((_, node_viewports)) = node_viewports {
-                                    for viewport_id in node_viewports {
-                                        let viewport = viewports.get(viewport_id).unwrap().0;
-                                        if let Some(viewport) = viewport {
-                                            if !viewport.contains(cursor.to_f32()) {
-                                                continue 'events;
-                                            }
-                                        }
+                                for viewport_id in &node_viewports.viewports {
+                                    let viewport = layout.get(*viewport_id).unwrap().visible_area();
+                                    if !viewport.contains(cursor.to_f32()) {
+                                        continue 'events;
                                     }
                                 }
 
diff --git a/crates/core/src/layout/layout_measurer.rs b/crates/core/src/layout/layout_measurer.rs
index 8ae0473b4..f6cf0c1e7 100644
--- a/crates/core/src/layout/layout_measurer.rs
+++ b/crates/core/src/layout/layout_measurer.rs
@@ -9,7 +9,7 @@ pub fn process_layout(
     area: Area,
     font_collection: &mut FontCollection,
     scale_factor: f32,
-) -> (Layers, Viewports) {
+) -> Layers {
     let rdom = fdom.rdom();
     let mut dom_adapter = DioxusDOMAdapter::new_with_cache(rdom);
     let skia_measurer = SkiaMeasurer::new(rdom, font_collection);
@@ -26,8 +26,5 @@ pub fn process_layout(
     // Create the layers
     let layers = Layers::new(rdom, &fdom.layout(), scale_factor);
 
-    // Calculate the viewports
-    let viewports = Viewports::new(&layers, fdom);
-
-    (layers, viewports)
+    layers
 }
diff --git a/crates/core/src/layout/mod.rs b/crates/core/src/layout/mod.rs
index 8aa293399..e9d5eb251 100644
--- a/crates/core/src/layout/mod.rs
+++ b/crates/core/src/layout/mod.rs
@@ -1,9 +1,7 @@
 pub mod layers;
 pub mod layout_measurer;
 pub mod skia_measurer;
-pub mod viewports;
 
 pub use layers::*;
 pub use layout_measurer::*;
 pub use skia_measurer::*;
-pub use viewports::*;
diff --git a/crates/core/src/layout/viewports.rs b/crates/core/src/layout/viewports.rs
deleted file mode 100644
index 10b783be9..000000000
--- a/crates/core/src/layout/viewports.rs
+++ /dev/null
@@ -1,89 +0,0 @@
-use dioxus_native_core::node::ElementNode;
-use dioxus_native_core::real_dom::NodeImmutable;
-use dioxus_native_core::{node::NodeType, NodeId};
-use torin::prelude::Area;
-
-use crate::layout::*;
-use freya_dom::prelude::FreyaDOM;
-
-use freya_node_state::{OverflowMode, Style};
-use rustc_hash::FxHashMap;
-
-/// Viewports of all elegible DOM elements.
-#[derive(Default)]
-pub struct Viewports {
-    viewports: FxHashMap<NodeId, (Option<Area>, Vec<NodeId>)>,
-}
-
-impl Viewports {
-    // Calculate all the applicable viewports for the given nodes
-    pub fn new(layers: &Layers, fdom: &FreyaDOM) -> Self {
-        let mut viewports = FxHashMap::default();
-        let layout = fdom.layout();
-        let rdom = fdom.rdom();
-
-        for (_, layer) in layers.layers() {
-            for node_id in layer {
-                let node = rdom.get(*node_id);
-                let layout_node = layout.get(*node_id);
-
-                if let Some((node, layout_node)) = node.zip(layout_node) {
-                    let node_type = &*node.node_type();
-
-                    if let NodeType::Element(ElementNode { tag, .. }) = node_type {
-                        // No need to consider text spans
-                        if !tag.has_intrinsic_layout() {
-                            continue;
-                        }
-
-                        let style = node.get::<Style>().unwrap();
-
-                        // Clip any overflow from it's children
-                        if style.overflow == OverflowMode::Clip {
-                            let viewport = viewports
-                                .entry(*node_id)
-                                .or_insert_with(|| (None, Vec::new()));
-                            viewport.0 = Some(layout_node.visible_area());
-                        }
-
-                        // Pass viewports to the children
-                        if let Some((_, mut inherited_viewports)) = viewports.get(node_id).cloned()
-                        {
-                            // Only pass the inherited viewports if they are not empty
-                            // or this same element has a clipped overflow
-                            if !inherited_viewports.is_empty()
-                                || style.overflow == OverflowMode::Clip
-                            {
-                                // Add itself
-                                inherited_viewports.push(*node_id);
-
-                                if tag.has_children_with_intrinsic_layout() {
-                                    for child in node.children() {
-                                        if let NodeType::Element(ElementNode { .. }) =
-                                            &*child.node_type()
-                                        {
-                                            viewports
-                                                .entry(child.id())
-                                                .or_insert_with(|| (None, Vec::new()))
-                                                .1 = inherited_viewports.clone();
-                                        }
-                                    }
-                                }
-                            }
-                        }
-                    }
-                }
-            }
-        }
-
-        Self { viewports }
-    }
-
-    pub fn get(&self, node_id: &NodeId) -> Option<&(Option<Area>, Vec<NodeId>)> {
-        self.viewports.get(node_id)
-    }
-
-    pub fn size(&self) -> usize {
-        self.viewports.len()
-    }
-}
diff --git a/crates/core/src/plugins.rs b/crates/core/src/plugins.rs
index 556d6bb38..7062891e1 100644
--- a/crates/core/src/plugins.rs
+++ b/crates/core/src/plugins.rs
@@ -4,8 +4,6 @@ use freya_engine::prelude::{Canvas, FontCollection};
 use torin::torin::Torin;
 use winit::window::Window;
 
-use crate::layout::Viewports;
-
 /// Manages all loaded plugins.
 #[derive(Default)]
 pub struct PluginsManager {
@@ -34,7 +32,6 @@ pub enum PluginEvent<'a> {
         canvas: &'a Canvas,
         font_collection: &'a FontCollection,
         freya_dom: &'a FreyaDOM,
-        viewports: &'a Viewports,
     },
 
     /// After rendering the app to the Canvas.
@@ -42,7 +39,6 @@ pub enum PluginEvent<'a> {
         canvas: &'a Canvas,
         font_collection: &'a FontCollection,
         freya_dom: &'a FreyaDOM,
-        viewports: &'a Viewports,
     },
 
     /// Before starting to measure the layout.
diff --git a/crates/core/src/render.rs b/crates/core/src/render.rs
index 28e05c64f..8a11a49e5 100644
--- a/crates/core/src/render.rs
+++ b/crates/core/src/render.rs
@@ -1,39 +1,38 @@
 use crate::layout::*;
-use dioxus_native_core::NodeId;
+use dioxus_native_core::{real_dom::NodeImmutable, NodeId};
 use freya_dom::prelude::FreyaDOM;
 use freya_engine::prelude::*;
-use torin::prelude::LayoutNode;
+use freya_node_state::ViewportState;
+use torin::prelude::{LayoutNode, Torin};
 
 /// Call the render function for the nodes that should be rendered.
 pub fn process_render(
-    viewports: &Viewports,
     fdom: &FreyaDOM,
     font_collection: &mut FontCollection,
     layers: &Layers,
-    mut render_fn: impl FnMut(&FreyaDOM, &NodeId, &LayoutNode, &mut FontCollection, &Viewports),
+    mut render_fn: impl FnMut(&FreyaDOM, &NodeId, &LayoutNode, &mut FontCollection, &Torin<NodeId>),
 ) {
+    let layout = fdom.layout();
+    let rdom = fdom.rdom();
     // Render all the layers from the bottom to the top
     for (_, layer) in layers.layers() {
         'elements: for node_id in layer {
-            let node_viewports = viewports.get(node_id);
-            let layout = fdom.layout();
+            let node = rdom.get(*node_id).unwrap();
+            let node_viewports = node.get::<ViewportState>().unwrap();
+
             let layout_node = layout.get(*node_id);
 
             if let Some(layout_node) = layout_node {
                 // Skip elements that are completely out of any their parent's viewport
-                if let Some((_, node_viewports)) = node_viewports {
-                    for viewport_id in node_viewports {
-                        let viewport = viewports.get(viewport_id).unwrap().0;
-                        if let Some(viewport) = viewport {
-                            if !viewport.intersects(&layout_node.area) {
-                                continue 'elements;
-                            }
-                        }
+                for viewport_id in &node_viewports.viewports {
+                    let viewport = layout.get(*viewport_id).unwrap().visible_area();
+                    if !viewport.intersects(&layout_node.area) {
+                        continue 'elements;
                     }
                 }
 
                 // Render the element
-                render_fn(fdom, node_id, layout_node, font_collection, viewports)
+                render_fn(fdom, node_id, layout_node, font_collection, &layout)
             }
         }
     }
diff --git a/crates/dom/src/dom.rs b/crates/dom/src/dom.rs
index 15f2c5c39..1a007862f 100644
--- a/crates/dom/src/dom.rs
+++ b/crates/dom/src/dom.rs
@@ -9,7 +9,7 @@ use dioxus_native_core::{
 
 use freya_node_state::{
     AccessibilityNodeState, CursorSettings, CustomAttributeValues, FontStyleState, LayoutState,
-    References, Style, Transform,
+    References, Style, Transform, ViewportState,
 };
 use std::sync::MutexGuard;
 use torin::prelude::*;
@@ -106,6 +106,7 @@ impl Default for FreyaDOM {
             Style::to_type_erased(),
             Transform::to_type_erased(),
             AccessibilityNodeState::to_type_erased(),
+            ViewportState::to_type_erased(),
         ]);
         let dioxus_integration_state = DioxusState::create(&mut rdom);
         Self {
diff --git a/crates/freya/src/plugins/performance_overlay.rs b/crates/freya/src/plugins/performance_overlay.rs
index 83d986720..19aeb38a3 100644
--- a/crates/freya/src/plugins/performance_overlay.rs
+++ b/crates/freya/src/plugins/performance_overlay.rs
@@ -25,7 +25,6 @@ impl FreyaPlugin for PerformanceOverlayPlugin {
                 canvas,
                 font_collection,
                 freya_dom,
-                viewports,
             } => {
                 let started_render = self.started_render.take().unwrap();
                 let finished_layout = self.finished_layout.unwrap();
@@ -86,13 +85,6 @@ impl FreyaPlugin for PerformanceOverlayPlugin {
                     14.0,
                 );
 
-                // Viewports
-                add_text(
-                    &mut paragraph_builder,
-                    format!("{} Nodes viewports \n", viewports.size()),
-                    14.0,
-                );
-
                 let mut paragraph = paragraph_builder.build();
                 paragraph.layout(f32::MAX);
                 paragraph.paint(canvas, (5.0, 0.0));
diff --git a/crates/native-core/src/dioxus.rs b/crates/native-core/src/dioxus.rs
index e64f6ed35..34c14bc03 100644
--- a/crates/native-core/src/dioxus.rs
+++ b/crates/native-core/src/dioxus.rs
@@ -106,9 +106,10 @@ impl<V: FromAnyValue + Send + Sync> WriteMutations for DioxusNativeCoreMutationW
 
     fn append_children(&mut self, id: ElementId, m: usize) {
         let children = self.state.stack.split_off(self.state.stack.len() - m);
-        let parent = self.state.element_to_node_id(id);
+        let parent_id = self.state.element_to_node_id(id);
+        let mut parent = self.rdom.get_mut(parent_id).unwrap();
         for child in children {
-            self.rdom.get_mut(parent).unwrap().add_child(child);
+            parent.add_child(child);
         }
     }
 
diff --git a/crates/native-core/src/tags.rs b/crates/native-core/src/tags.rs
index 40a3e1ef4..728a84c4c 100644
--- a/crates/native-core/src/tags.rs
+++ b/crates/native-core/src/tags.rs
@@ -15,10 +15,6 @@ impl TagName {
     pub fn has_intrinsic_layout(&self) -> bool {
         *self != Self::Text
     }
-
-    pub fn has_children_with_intrinsic_layout(&self) -> bool {
-        *self != Self::Paragraph && *self != Self::Text
-    }
 }
 
 impl FromStr for TagName {
diff --git a/crates/renderer/src/app.rs b/crates/renderer/src/app.rs
index 7cbff1c01..fd5e717db 100644
--- a/crates/renderer/src/app.rs
+++ b/crates/renderer/src/app.rs
@@ -39,7 +39,6 @@ pub struct App<State: 'static + Clone> {
     pub(crate) window_env: WindowEnv<State>,
     pub(crate) layers: Layers,
     pub(crate) nodes_state: NodesState,
-    pub(crate) viewports: Viewports,
     pub(crate) focus_sender: FocusSender,
     pub(crate) focus_receiver: FocusReceiver,
     pub(crate) accessibility: AccessKitManager,
@@ -101,7 +100,6 @@ impl<State: 'static + Clone> App<State> {
             window_env,
             layers: Layers::default(),
             nodes_state: NodesState::default(),
-            viewports: Viewports::default(),
             accessibility,
             focus_sender,
             focus_receiver,
@@ -206,7 +204,6 @@ impl<State: 'static + Clone> App<State> {
             &mut self.events,
             &self.event_emitter,
             &mut self.nodes_state,
-            &self.viewports,
             scale_factor,
         )
     }
@@ -245,7 +242,6 @@ impl<State: 'static + Clone> App<State> {
             canvas: self.window_env.canvas(),
             font_collection: &self.font_collection,
             freya_dom: &self.sdom.get(),
-            viewports: &self.viewports,
         });
 
         self.start_render(hovered_node);
@@ -257,7 +253,6 @@ impl<State: 'static + Clone> App<State> {
             canvas: self.window_env.canvas(),
             font_collection: &self.font_collection,
             freya_dom: &self.sdom.get(),
-            viewports: &self.viewports,
         });
 
         self.finish_render();
@@ -305,7 +300,7 @@ impl<State: 'static + Clone> App<State> {
 
             let window_size = self.window_env.window.inner_size();
             let scale_factor = self.window_env.window.scale_factor() as f32;
-            let (layers, viewports) = process_layout(
+            let layers = process_layout(
                 &fdom,
                 Area::from_size(Size2D::from((
                     window_size.width as f32,
@@ -315,7 +310,6 @@ impl<State: 'static + Clone> App<State> {
                 scale_factor,
             );
             self.layers = layers;
-            self.viewports = viewports;
 
             self.plugins
                 .send(PluginEvent::FinishedLayout(&fdom.layout()));
@@ -332,7 +326,6 @@ impl<State: 'static + Clone> App<State> {
             self.layers.len_layers(),
             self.layers.len_paragraph_elements()
         );
-        info!("Processed {} viewports", self.viewports.size());
     }
 
     /// Start rendering the RealDOM to Window
@@ -346,11 +339,10 @@ impl<State: 'static + Clone> App<State> {
         let mut opacities: Vec<(f32, Vec<NodeId>)> = Vec::default();
 
         process_render(
-            &self.viewports,
             &fdom,
             &mut self.font_collection,
             &self.layers,
-            |dom, node_id, area, font_collection, viewports| {
+            |fdom, node_id, area, font_collection, layout| {
                 let render_wireframe = if let Some(hovered_node) = &hovered_node {
                     hovered_node
                         .lock()
@@ -360,17 +352,17 @@ impl<State: 'static + Clone> App<State> {
                 } else {
                     false
                 };
-                if let Some(dioxus_node) = dom.rdom().get(*node_id) {
+                if let Some(dioxus_node) = fdom.rdom().get(*node_id) {
                     render_skia(
                         canvas,
                         area,
                         &dioxus_node,
                         font_collection,
                         &self.font_mgr,
-                        viewports,
                         render_wireframe,
                         &mut matrices,
                         &mut opacities,
+                        layout,
                     );
                 }
             },
diff --git a/crates/renderer/src/renderer.rs b/crates/renderer/src/renderer.rs
index 83f7da938..fd17f2716 100644
--- a/crates/renderer/src/renderer.rs
+++ b/crates/renderer/src/renderer.rs
@@ -2,11 +2,13 @@ use dioxus_native_core::prelude::ElementNode;
 use dioxus_native_core::real_dom::NodeImmutable;
 use dioxus_native_core::NodeId;
 use dioxus_native_core::{node::NodeType, tags::TagName};
-use freya_core::prelude::*;
 use freya_dom::prelude::DioxusNode;
 use freya_engine::prelude::*;
-use freya_node_state::{Style, Transform};
-use torin::{geometry::Area, prelude::LayoutNode};
+use freya_node_state::{Style, Transform, ViewportState};
+use torin::{
+    geometry::Area,
+    prelude::{LayoutNode, Torin},
+};
 
 use crate::elements::{render_image, render_label, render_paragraph, render_rect, render_svg};
 
@@ -31,10 +33,10 @@ pub fn render_skia(
     dioxus_node: &DioxusNode,
     font_collection: &mut FontCollection,
     font_manager: &FontMgr,
-    viewports: &Viewports,
     render_wireframe: bool,
     matrices: &mut Vec<(Matrix, Vec<NodeId>)>,
     opacities: &mut Vec<(f32, Vec<NodeId>)>,
+    layout: &Torin<NodeId>,
 ) {
     let area = layout_node.visible_area();
     let data = &layout_node.data;
@@ -86,21 +88,17 @@ pub fn render_skia(
         }
 
         // Clip all elements with their corresponding viewports
-        if let Some((element_viewport, node_viewports)) = viewports.get(&dioxus_node.id()) {
-            // Only clip the element iself when it's paragraph because
-            // it will render the inner text spans on it's own, so if these spans overflow the paragraph,
-            // It is the paragraph job to make sure they are clipped
-            if *tag == TagName::Paragraph {
-                if let Some(element_viewport) = element_viewport {
-                    clip_viewport(canvas, element_viewport);
-                }
-            }
-            for viewport_id in node_viewports {
-                let viewport = viewports.get(viewport_id).unwrap().0;
-                if let Some(viewport) = viewport {
-                    clip_viewport(canvas, &viewport);
-                }
-            }
+        let node_viewports = dioxus_node.get::<ViewportState>().unwrap();
+        // Only clip the element iself when it's paragraph because
+        // it will render the inner text spans on it's own, so if these spans overflow the paragraph,
+        // It is the paragraph job to make sure they are clipped
+        if !node_viewports.viewports.is_empty() && *tag == TagName::Paragraph {
+            clip_viewport(canvas, &layout_node.visible_area());
+        }
+
+        for viewport_id in &node_viewports.viewports {
+            let viewport = layout.get(*viewport_id).unwrap().visible_area();
+            clip_viewport(canvas, &viewport);
         }
 
         match tag {
diff --git a/crates/state/src/lib.rs b/crates/state/src/lib.rs
index a8b918a24..b76866018 100644
--- a/crates/state/src/lib.rs
+++ b/crates/state/src/lib.rs
@@ -8,6 +8,7 @@ mod references;
 mod style;
 mod transform;
 mod values;
+mod viewport;
 
 pub use accessibility::*;
 pub use cursor::*;
@@ -19,3 +20,4 @@ pub use references::*;
 pub use style::*;
 pub use transform::*;
 pub use values::*;
+pub use viewport::*;
diff --git a/crates/state/src/viewport.rs b/crates/state/src/viewport.rs
new file mode 100644
index 000000000..d1d2244fb
--- /dev/null
+++ b/crates/state/src/viewport.rs
@@ -0,0 +1,78 @@
+use dioxus_native_core::{
+    attributes::AttributeName,
+    exports::shipyard::Component,
+    node_ref::NodeView,
+    prelude::{AttributeMaskBuilder, Dependancy, NodeMaskBuilder, State},
+    NodeId, SendAnyMap,
+};
+use dioxus_native_core_macro::partial_derive_state;
+
+use crate::{CustomAttributeValues, OverflowMode, Parse};
+
+#[derive(Default, PartialEq, Clone, Debug, Component)]
+pub struct ViewportState {
+    pub viewports: Vec<NodeId>,
+    pub node_id: NodeId,
+    pub overflow: OverflowMode,
+}
+
+#[partial_derive_state]
+impl State<CustomAttributeValues> for ViewportState {
+    type ParentDependencies = (Self,);
+
+    type ChildDependencies = ();
+
+    type NodeDependencies = ();
+
+    const NODE_MASK: NodeMaskBuilder<'static> = NodeMaskBuilder::new()
+        .with_attrs(AttributeMaskBuilder::Some(&[AttributeName::Overflow]))
+        .with_tag();
+
+    fn update<'a>(
+        &mut self,
+        node_view: NodeView<CustomAttributeValues>,
+        _node: <Self::NodeDependencies as Dependancy>::ElementBorrowed<'a>,
+        parent: Option<<Self::ParentDependencies as Dependancy>::ElementBorrowed<'a>>,
+        _children: Vec<<Self::ChildDependencies as Dependancy>::ElementBorrowed<'a>>,
+        _context: &SendAnyMap,
+    ) -> bool {
+        if let Some(tag) = node_view.tag() {
+            // No need to consider text spans
+            if !tag.has_intrinsic_layout() {
+                return false;
+            }
+        }
+
+        let mut viewports_state = ViewportState {
+            node_id: node_view.node_id(),
+            ..Default::default()
+        };
+
+        if let Some(attributes) = node_view.attributes() {
+            for attr in attributes {
+                #[allow(clippy::single_match)]
+                match attr.attribute {
+                    AttributeName::Overflow => {
+                        if let Some(value) = attr.value.as_text() {
+                            if let Ok(overflow) = OverflowMode::parse(value) {
+                                viewports_state.overflow = overflow;
+                            }
+                        }
+                    }
+                    _ => {}
+                }
+            }
+        }
+
+        if let Some((parent,)) = parent {
+            viewports_state.viewports.extend(parent.viewports.clone());
+            if parent.overflow == OverflowMode::Clip {
+                viewports_state.viewports.push(parent.node_id);
+            }
+        }
+
+        let changed = &viewports_state != self;
+        *self = viewports_state;
+        changed
+    }
+}
diff --git a/crates/testing/src/launch.rs b/crates/testing/src/launch.rs
index 04f44238b..51b9bfa1e 100644
--- a/crates/testing/src/launch.rs
+++ b/crates/testing/src/launch.rs
@@ -32,7 +32,6 @@ pub fn launch_test_with_config(root: AppComponent, config: TestingConfig) -> Tes
     let (event_emitter, event_receiver) = unbounded_channel::<DomEvent>();
     let (platform_event_emitter, platform_event_receiver) = unbounded_channel::<EventMessage>();
     let layers = Arc::default();
-    let viewports = Arc::default();
     let mut font_collection = FontCollection::new();
     font_collection.set_dynamic_font_manager(FontMgr::default());
 
@@ -43,11 +42,7 @@ pub fn launch_test_with_config(root: AppComponent, config: TestingConfig) -> Tes
         font_collection,
         event_emitter,
         event_receiver,
-        utils: TestUtils {
-            sdom,
-            layers,
-            viewports,
-        },
+        utils: TestUtils { sdom, layers },
         config,
         platform_event_emitter,
         platform_event_receiver,
diff --git a/crates/testing/src/test_handler.rs b/crates/testing/src/test_handler.rs
index b6eb068de..42c1c59a4 100644
--- a/crates/testing/src/test_handler.rs
+++ b/crates/testing/src/test_handler.rs
@@ -135,7 +135,7 @@ impl TestingHandler {
         self.utils.sdom().get_mut().layout().reset();
 
         // Measure layout
-        let (layers, viewports) = process_layout(
+        let layers = process_layout(
             &self.utils.sdom().get(),
             Area {
                 origin: (0.0, 0.0).into(),
@@ -146,7 +146,6 @@ impl TestingHandler {
         );
 
         *self.utils.layers().lock().unwrap() = layers;
-        *self.utils.viewports().lock().unwrap() = viewports;
 
         let dom = &self.utils.sdom().get_mut();
 
@@ -163,7 +162,6 @@ impl TestingHandler {
             &mut self.events_queue,
             &self.event_emitter,
             &mut self.nodes_state,
-            &self.utils.viewports().lock().unwrap(),
             SCALE_FACTOR,
         );
     }
diff --git a/crates/testing/src/test_node.rs b/crates/testing/src/test_node.rs
index cfca84714..837c0b0bf 100644
--- a/crates/testing/src/test_node.rs
+++ b/crates/testing/src/test_node.rs
@@ -1,7 +1,7 @@
 use dioxus_native_core::NodeId;
 use dioxus_native_core::{node::NodeType, real_dom::NodeImmutable};
 use freya_core::node::NodeState;
-use freya_node_state::{CustomAttributeValues, Style};
+use freya_node_state::{CustomAttributeValues, Style, ViewportState};
 use torin::{geometry::Area, prelude::LayoutNode};
 
 use crate::test_utils::TestUtils;
@@ -91,21 +91,23 @@ impl TestNode {
 
     /// Check if the Node is visible given it's viewports.
     pub fn is_visible(&self) -> bool {
-        let viewports = self.utils.viewports().lock().unwrap();
-        let node_viewports = viewports.get(&self.node_id);
         let Some(area) = self.area() else {
             return false;
         };
 
+        let sdom = self.utils().sdom();
+        let fdom = sdom.get();
+        let dom = fdom.rdom();
+        let node = dom.get(self.node_id).unwrap();
+        let node_viewports = node.get::<ViewportState>().unwrap();
+
+        let layout = fdom.layout();
+
         // Skip elements that are completely out of any their parent's viewport
-        if let Some((_, node_viewports)) = node_viewports {
-            for viewport_id in node_viewports {
-                let viewport = viewports.get(viewport_id).unwrap().0;
-                if let Some(viewport) = viewport {
-                    if !viewport.intersects(&area) {
-                        return false;
-                    }
-                }
+        for viewport_id in &node_viewports.viewports {
+            let viewport = layout.get(*viewport_id).unwrap().visible_area();
+            if !viewport.intersects(&area) {
+                return false;
             }
         }
 
diff --git a/crates/testing/src/test_utils.rs b/crates/testing/src/test_utils.rs
index 0679d8bbb..378bff144 100644
--- a/crates/testing/src/test_utils.rs
+++ b/crates/testing/src/test_utils.rs
@@ -11,7 +11,6 @@ use crate::test_node::TestNode;
 pub struct TestUtils {
     pub(crate) sdom: SafeDOM,
     pub(crate) layers: Arc<Mutex<Layers>>,
-    pub(crate) viewports: Arc<Mutex<Viewports>>,
 }
 
 impl TestUtils {
@@ -25,11 +24,6 @@ impl TestUtils {
         &self.layers
     }
 
-    /// Get the Viewports.
-    pub fn viewports(&self) -> &Arc<Mutex<Viewports>> {
-        &self.viewports
-    }
-
     /// Get a Node by the given ID
     pub fn get_node_by_id(&self, node_id: NodeId) -> TestNode {
         let utils = self.clone();

From 481933d64905a388665fce7ca848eefb53bed5f6 Mon Sep 17 00:00:00 2001
From: Marc Espin <mespinsanz@gmail.com>
Date: Thu, 28 Mar 2024 22:00:02 +0100
Subject: [PATCH 02/23] feat: Incremental layer ordering (#546)

* feat: Make viewports a Node state

* clean up

* fix

* clean up

* feat: Incremental layer ordering

* clean up, improvements and fixes

* tweka

* fixes

* clean up

* clean up

* fix

* clean up

* fix
---
 crates/common/Cargo.toml                  |   9 ++
 crates/common/src/layers.rs               |  34 +++++
 crates/common/src/layout.rs               |  11 ++
 crates/common/src/lib.rs                  |   4 +
 crates/common/src/paragraphs.rs           |  37 +++++
 crates/components/src/menu.rs             |   4 +-
 crates/core/src/accessibility/mod.rs      |  44 +++---
 crates/core/src/events/events_measurer.rs |  16 +--
 crates/core/src/layout/layers.rs          | 165 ----------------------
 crates/core/src/layout/layout_measurer.rs |  27 ++--
 crates/core/src/layout/mod.rs             |   2 -
 crates/core/src/layout/skia_measurer.rs   | 133 ++++-------------
 crates/core/src/render.rs                 |   7 +-
 crates/dom/Cargo.toml                     |   2 +
 crates/dom/src/dom.rs                     |  58 +++++++-
 crates/dom/src/lib.rs                     |   1 +
 crates/dom/src/mutations_writer.rs        |  56 ++++++--
 crates/dom/src/paragraph_utils.rs         |  92 ++++++++++++
 crates/native-core-macro/src/lib.rs       |   4 +-
 crates/native-core/src/node_ref.rs        |   9 +-
 crates/native-core/src/passes.rs          |   8 +-
 crates/native-core/src/tags.rs            |   4 +
 crates/native-core/src/tree.rs            |   1 -
 crates/renderer/Cargo.toml                |   1 +
 crates/renderer/src/app.rs                |  16 +--
 crates/renderer/src/elements/label.rs     |   2 +-
 crates/renderer/src/elements/paragraph.rs |   3 +-
 crates/renderer/src/lib.rs                |  13 +-
 crates/state/Cargo.toml                   |   1 +
 crates/state/src/cursor.rs                |  40 +++++-
 crates/state/src/layer.rs                 |  81 +++++++++++
 crates/state/src/lib.rs                   |   2 +
 crates/state/src/references.rs            |  33 ++---
 crates/state/src/style.rs                 |   8 --
 crates/testing/src/launch.rs              |   3 +-
 crates/testing/src/test_handler.rs        |   6 +-
 crates/testing/src/test_utils.rs          |   7 -
 crates/torin/src/custom_measurer.rs       |   4 +-
 crates/torin/src/measure.rs               |   5 +
 crates/torin/src/torin.rs                 |   5 +
 examples/floating_editors.rs              |   2 +-
 41 files changed, 538 insertions(+), 422 deletions(-)
 create mode 100644 crates/common/src/layers.rs
 create mode 100644 crates/common/src/paragraphs.rs
 delete mode 100644 crates/core/src/layout/layers.rs
 create mode 100644 crates/dom/src/paragraph_utils.rs
 create mode 100644 crates/state/src/layer.rs

diff --git a/crates/common/Cargo.toml b/crates/common/Cargo.toml
index f73056ed4..ad203c9dc 100644
--- a/crates/common/Cargo.toml
+++ b/crates/common/Cargo.toml
@@ -11,6 +11,12 @@ repository = "https://github.com/marc2332/freya"
 keywords = ["gui", "ui", "desktop", "skia", "dioxus"]
 categories = ["gui", "asynchronous"]
 
+[package.metadata.docs.rs]
+features = ["freya-engine/mocked-engine"]
+
+[features]
+skia-engine = ["freya-engine/skia-engine"]
+
 [dependencies]
 torin = { workspace = true }
 
@@ -19,5 +25,8 @@ dioxus-core = { workspace = true }
 accesskit = { workspace = true }
 accesskit_winit = { workspace = true }
 winit = { workspace = true }
+freya-engine = { workspace = true }
+dioxus-native-core = { workspace = true }
+rustc-hash= { workspace = true }
 
 uuid = { workspace = true }
diff --git a/crates/common/src/layers.rs b/crates/common/src/layers.rs
new file mode 100644
index 000000000..966908352
--- /dev/null
+++ b/crates/common/src/layers.rs
@@ -0,0 +1,34 @@
+use dioxus_native_core::NodeId;
+use rustc_hash::FxHashMap;
+use std::sync::{Arc, Mutex, MutexGuard};
+
+#[derive(Default, Clone)]
+pub struct Layers {
+    pub layers: Arc<Mutex<FxHashMap<i16, Vec<NodeId>>>>,
+}
+
+impl Layers {
+    pub fn insert_node_in_layer(&self, node_id: NodeId, layer_n: i16) {
+        let mut layers = self.layers.lock().unwrap();
+        let layer = layers.entry(layer_n).or_default();
+        layer.push(node_id);
+    }
+
+    pub fn remove_node_from_layer(&self, node_id: NodeId, layer_n: i16) {
+        let mut layers = self.layers.lock().unwrap();
+        let layer = layers.get_mut(&layer_n).unwrap();
+        layer.retain(|id| *id != node_id);
+
+        if layer.is_empty() {
+            layers.remove(&layer_n);
+        }
+    }
+
+    pub fn layers(&self) -> MutexGuard<FxHashMap<i16, Vec<NodeId>>> {
+        self.layers.lock().unwrap()
+    }
+
+    pub fn len_layers(&self) -> usize {
+        self.layers.lock().unwrap().len()
+    }
+}
diff --git a/crates/common/src/layout.rs b/crates/common/src/layout.rs
index bca720bd0..228e3c4de 100644
--- a/crates/common/src/layout.rs
+++ b/crates/common/src/layout.rs
@@ -1,3 +1,4 @@
+use freya_engine::prelude::Paragraph;
 use std::ops::Div;
 use torin::geometry::{Area, Size2D};
 
@@ -21,3 +22,13 @@ pub enum CursorLayoutResponse {
     CursorPosition { position: usize, id: usize },
     TextSelection { from: usize, to: usize, id: usize },
 }
+
+pub struct CachedParagraph(pub Paragraph);
+
+/// # Safety
+/// Skia `Paragraph` are neither Sync or Send, but in order to store them in the Associated
+/// data of the Nodes in Torin (which will be used across threads when making the attributes diffing),
+/// we must manually mark the Paragraph as Send and Sync, this is fine because `Paragraph`s will only be accessed and modified
+/// In the main thread when measuring the layout and painting.
+unsafe impl Send for CachedParagraph {}
+unsafe impl Sync for CachedParagraph {}
diff --git a/crates/common/src/lib.rs b/crates/common/src/lib.rs
index d71f7f8ca..19513673d 100644
--- a/crates/common/src/lib.rs
+++ b/crates/common/src/lib.rs
@@ -1,5 +1,9 @@
 mod event_messages;
+mod layers;
 mod layout;
+mod paragraphs;
 
 pub use event_messages::*;
+pub use layers::*;
 pub use layout::*;
+pub use paragraphs::*;
diff --git a/crates/common/src/paragraphs.rs b/crates/common/src/paragraphs.rs
new file mode 100644
index 000000000..e7ccbe57e
--- /dev/null
+++ b/crates/common/src/paragraphs.rs
@@ -0,0 +1,37 @@
+use dioxus_native_core::NodeId;
+use rustc_hash::FxHashMap;
+use std::sync::{Arc, Mutex, MutexGuard};
+use uuid::Uuid;
+
+#[derive(Default, Clone)]
+pub struct ParagraphElements {
+    pub paragraphs: Arc<Mutex<FxHashMap<Uuid, Vec<NodeId>>>>,
+}
+
+impl ParagraphElements {
+    pub fn insert_paragraph(&self, node_id: NodeId, text_id: Uuid) {
+        let mut paragraphs = self.paragraphs.lock().unwrap();
+        let text_group = paragraphs.entry(text_id).or_default();
+
+        text_group.push(node_id);
+    }
+
+    pub fn paragraphs(&self) -> MutexGuard<FxHashMap<Uuid, Vec<NodeId>>> {
+        self.paragraphs.lock().unwrap()
+    }
+
+    pub fn remove_paragraph(&self, node_id: NodeId, text_id: &Uuid) {
+        let mut paragraphs = self.paragraphs.lock().unwrap();
+        let text_group = paragraphs.get_mut(text_id).unwrap();
+
+        text_group.retain(|id| *id != node_id);
+
+        if text_group.is_empty() {
+            paragraphs.remove(text_id);
+        }
+    }
+
+    pub fn len_paragraphs(&self) -> usize {
+        self.paragraphs.lock().unwrap().len()
+    }
+}
diff --git a/crates/components/src/menu.rs b/crates/components/src/menu.rs
index fe5429676..df416d5fe 100644
--- a/crates/components/src/menu.rs
+++ b/crates/components/src/menu.rs
@@ -125,10 +125,10 @@ pub enum MenuItemStatus {
 }
 
 /// `MenuItem` component.
-/// 
+///
 /// # Styling
 /// Inherits the [`MenuItemTheme`](freya_hooks::MenuItemTheme) theme.
-/// 
+///
 #[allow(non_snake_case)]
 #[component]
 pub fn MenuItem(
diff --git a/crates/core/src/accessibility/mod.rs b/crates/core/src/accessibility/mod.rs
index 9a54e6285..40bb86206 100644
--- a/crates/core/src/accessibility/mod.rs
+++ b/crates/core/src/accessibility/mod.rs
@@ -1,14 +1,12 @@
 pub mod accessibility_manager;
 pub use accessibility_manager::*;
 
-use dioxus_native_core::{node::NodeType, real_dom::NodeImmutable, NodeId};
+use crate::types::AccessibilityId;
+use dioxus_native_core::{node::NodeType, real_dom::NodeImmutable, tags::TagName, NodeId};
 use freya_dom::dom::{DioxusDOM, DioxusNode};
 use freya_node_state::AccessibilityNodeState;
 use torin::torin::Torin;
 
-use crate::layout::Layers;
-use crate::types::AccessibilityId;
-
 /// Direction for the next Accessibility Node to be focused.
 #[derive(PartialEq)]
 pub enum AccessibilityFocusDirection {
@@ -51,26 +49,32 @@ impl NodeAccessibility for DioxusNode<'_> {
 }
 
 pub fn process_accessibility(
-    layers: &Layers,
     layout: &Torin<NodeId>,
     rdom: &DioxusDOM,
     accessibility_manager: &mut AccessibilityManager,
 ) {
-    for layer in layers.layers.values() {
-        for node_id in layer {
-            let layout_node = layout.get(*node_id).unwrap();
-            let dioxus_node = rdom.get(*node_id);
-            if let Some(dioxus_node) = dioxus_node {
-                let node_accessibility = &*dioxus_node.get::<AccessibilityNodeState>().unwrap();
-                if let Some(accessibility_id) = node_accessibility.accessibility_id {
-                    accessibility_manager.add_node(
-                        &dioxus_node,
-                        layout_node,
-                        accessibility_id,
-                        node_accessibility,
-                    );
-                }
+    rdom.traverse_depth_first_advanced(|node| {
+        if !node.node_type().is_element() {
+            return false;
+        }
+
+        let layout_node = layout.get(node.id()).unwrap();
+        let node_accessibility = &*node.get::<AccessibilityNodeState>().unwrap();
+        if let Some(accessibility_id) = node_accessibility.accessibility_id {
+            accessibility_manager.add_node(
+                &node,
+                layout_node,
+                accessibility_id,
+                node_accessibility,
+            );
+        }
+
+        if let Some(tag) = node.node_type().tag() {
+            if *tag == TagName::Paragraph || *tag == TagName::Label {
+                return false;
             }
         }
-    }
+
+        true
+    });
 }
diff --git a/crates/core/src/events/events_measurer.rs b/crates/core/src/events/events_measurer.rs
index 2a3b0cbab..c79dd9e58 100644
--- a/crates/core/src/events/events_measurer.rs
+++ b/crates/core/src/events/events_measurer.rs
@@ -1,11 +1,11 @@
-use crate::layout::Layers;
 use dioxus_native_core::real_dom::NodeImmutable;
 use dioxus_native_core::NodeId;
 use dioxus_native_core::{prelude::NodeImmutableDioxusExt, tree::TreeRef};
-use freya_dom::{dom::DioxusDOM, prelude::FreyaDOM};
+use freya_dom::prelude::*;
 
 use freya_engine::prelude::*;
 use freya_node_state::{Fill, Style, ViewportState};
+use itertools::sorted;
 
 pub use crate::events::{DomEvent, NodesState, PlatformEvent};
 
@@ -16,7 +16,6 @@ use super::potential_event::PotentialEvent;
 /// Process the events and emit them to the VirtualDOM
 pub fn process_events(
     dom: &FreyaDOM,
-    layers: &Layers,
     events: &mut EventsQueue,
     event_emitter: &EventEmitter,
     nodes_state: &mut NodesState,
@@ -26,7 +25,7 @@ pub fn process_events(
     let global_events = measure_global_events(events);
 
     // 2. Get potential events that could be emitted based on the elements layout and viewports
-    let potential_events = measure_potential_event_listeners(layers, events, dom);
+    let potential_events = measure_potential_event_listeners(events, dom);
 
     // 3. Get what events can be actually emitted based on what elements are listening
     let dom_events = measure_dom_events(potential_events, dom, scale_factor);
@@ -70,18 +69,15 @@ pub fn measure_global_events(events: &EventsQueue) -> Vec<PlatformEvent> {
 }
 
 /// Measure what potential event listeners could be triggered
-pub fn measure_potential_event_listeners(
-    layers: &Layers,
-    events: &EventsQueue,
-    fdom: &FreyaDOM,
-) -> PotentialEvents {
+pub fn measure_potential_event_listeners(events: &EventsQueue, fdom: &FreyaDOM) -> PotentialEvents {
     let mut potential_events = PotentialEvents::default();
 
     let layout = fdom.layout();
     let rdom = fdom.rdom();
+    let layers = fdom.layers();
 
     // Propagate events from the top to the bottom
-    for (layer, layer_nodes) in layers.layers() {
+    for (layer, layer_nodes) in sorted(layers.layers().iter()) {
         for node_id in layer_nodes {
             let layout_node = layout.get(*node_id);
             if let Some(layout_node) = layout_node {
diff --git a/crates/core/src/layout/layers.rs b/crates/core/src/layout/layers.rs
deleted file mode 100644
index 34fbe8533..000000000
--- a/crates/core/src/layout/layers.rs
+++ /dev/null
@@ -1,165 +0,0 @@
-use std::vec::IntoIter;
-
-use dioxus_native_core::real_dom::NodeImmutable;
-use dioxus_native_core::{node::NodeType, NodeId};
-use dioxus_native_core::{prelude::ElementNode, tags::TagName};
-use freya_common::NodeReferenceLayout;
-use freya_dom::prelude::{DioxusDOM, FreyaDOM};
-use freya_node_state::{CursorMode, CursorSettings, LayoutState, References, Style};
-use itertools::sorted;
-use rustc_hash::FxHashMap;
-use torin::torin::Torin;
-use uuid::Uuid;
-
-use crate::layout::*;
-
-#[derive(Default, Clone)]
-pub struct Layers {
-    pub layers: FxHashMap<i16, Vec<NodeId>>,
-    pub paragraph_elements: FxHashMap<Uuid, Vec<NodeId>>,
-}
-
-impl Layers {
-    pub fn new(rdom: &DioxusDOM, layout: &Torin<NodeId>, scale_factor: f32) -> Self {
-        let mut layers = Layers::default();
-        let mut inherit_layers = FxHashMap::default();
-
-        rdom.traverse_depth_first_advanced(|node| {
-            let layout_node = layout.get(node.id());
-
-            // Some elements like placeholders are not measured
-            if let Some(layout_node) = layout_node {
-                // Add the Node to a Layer
-                let node_style = node.get::<Style>().unwrap();
-
-                let inherited_relative_layer = node
-                    .parent_id()
-                    .map(|p| *inherit_layers.get(&p).unwrap())
-                    .unwrap_or(0);
-
-                let (node_layer, node_relative_layer) = Layers::calculate_layer(
-                    node_style.relative_layer,
-                    node.height() as i16,
-                    inherited_relative_layer,
-                );
-
-                inherit_layers.insert(node.id(), node_relative_layer);
-                layers.add_element(node.id(), node_layer);
-
-                // Register paragraph elements
-
-                let traverse_inner_children =
-                    if let NodeType::Element(ElementNode { tag, .. }) = &*node.node_type() {
-                        let is_paragraph = *tag == TagName::Paragraph;
-                        if is_paragraph {
-                            let cursor_settings = node.get::<CursorSettings>().unwrap();
-                            let is_editable = CursorMode::Editable == cursor_settings.mode;
-
-                            let references = node.get::<References>().unwrap();
-                            if is_editable {
-                                if let Some(cursor_ref) = &references.cursor_ref {
-                                    let text_group = layers
-                                        .paragraph_elements
-                                        .entry(cursor_ref.text_id)
-                                        .or_default();
-
-                                    text_group.push(node.id());
-                                }
-                            }
-                        }
-
-                        // Traverse all elements except paragraphs
-                        !is_paragraph
-                    } else {
-                        false
-                    };
-
-                // Notify layout references
-
-                let size_state = &*node.get::<LayoutState>().unwrap();
-
-                if let Some(reference) = &size_state.node_ref {
-                    let mut node_layout = NodeReferenceLayout {
-                        area: layout_node.area,
-                        inner: layout_node.inner_sizes,
-                    };
-                    node_layout.div(scale_factor);
-                    reference.0.send(node_layout).ok();
-                }
-
-                traverse_inner_children
-            } else {
-                false
-            }
-        });
-
-        layers.measure_all_paragraph_elements(rdom, layout, scale_factor);
-
-        layers
-    }
-
-    pub fn layers(&self) -> IntoIter<(&i16, &Vec<NodeId>)> {
-        sorted(self.layers.iter())
-    }
-
-    pub fn len_paragraph_elements(&self) -> usize {
-        self.paragraph_elements.len()
-    }
-
-    pub fn len_layers(&self) -> usize {
-        self.layers.len()
-    }
-
-    /// Measure all the paragraphs
-    pub fn measure_all_paragraph_elements(
-        &self,
-        rdom: &DioxusDOM,
-        layout: &Torin<NodeId>,
-        scale_factor: f32,
-    ) {
-        for group in self.paragraph_elements.values() {
-            for node_id in group {
-                let node = rdom.get(*node_id);
-                let layout_node = layout.get(*node_id);
-                if let Some((node, layout_node)) = node.zip(layout_node) {
-                    measure_paragraph(&node, layout_node, true, scale_factor);
-                }
-            }
-        }
-    }
-
-    /// Measure all the paragraphs registered under the given TextId
-    pub fn measure_paragraph_elements(&self, text_id: &Uuid, dom: &FreyaDOM, scale_factor: f32) {
-        let group = self.paragraph_elements.get(text_id);
-        let layout = dom.layout();
-        if let Some(group) = group {
-            for node_id in group {
-                let node = dom.rdom().get(*node_id);
-                let layout_node = layout.get(*node_id);
-
-                if let Some((node, layout_node)) = node.zip(layout_node) {
-                    measure_paragraph(&node, layout_node, true, scale_factor);
-                }
-            }
-        }
-    }
-
-    /// Given the height in the DOM of the Node, it's inherited layer from it's parent
-    /// and the defined layer via the `layer` attribute,
-    /// calculate it's corresponding layer and it's relative layer for it's children to inherit
-    pub fn calculate_layer(
-        relative_layer: i16,
-        height: i16,
-        inherited_relative_layer: i16,
-    ) -> (i16, i16) {
-        let element_layer = -relative_layer + height - inherited_relative_layer;
-        (element_layer, relative_layer + inherited_relative_layer)
-    }
-
-    /// Insert a Node into a layer
-    pub fn add_element(&mut self, node_id: NodeId, node_layer: i16) {
-        let layer = self.layers.entry(node_layer).or_default();
-
-        layer.push(node_id);
-    }
-}
diff --git a/crates/core/src/layout/layout_measurer.rs b/crates/core/src/layout/layout_measurer.rs
index f6cf0c1e7..391d9dfce 100644
--- a/crates/core/src/layout/layout_measurer.rs
+++ b/crates/core/src/layout/layout_measurer.rs
@@ -9,22 +9,21 @@ pub fn process_layout(
     area: Area,
     font_collection: &mut FontCollection,
     scale_factor: f32,
-) -> Layers {
-    let rdom = fdom.rdom();
-    let mut dom_adapter = DioxusDOMAdapter::new_with_cache(rdom);
-    let skia_measurer = SkiaMeasurer::new(rdom, font_collection);
+) {
+    {
+        let rdom = fdom.rdom();
+        let mut dom_adapter = DioxusDOMAdapter::new_with_cache(rdom);
+        let skia_measurer = SkiaMeasurer::new(rdom, font_collection, scale_factor);
 
-    // Finds the best Node from where to start measuring
-    fdom.layout().find_best_root(&mut dom_adapter);
+        // Finds the best Node from where to start measuring
+        fdom.layout().find_best_root(&mut dom_adapter);
 
-    let root_id = fdom.rdom().root_id();
+        let root_id = fdom.rdom().root_id();
 
-    // Measure the layout
-    fdom.layout()
-        .measure(root_id, area, &mut Some(skia_measurer), &mut dom_adapter);
+        // Measure the layout
+        fdom.layout()
+            .measure(root_id, area, &mut Some(skia_measurer), &mut dom_adapter);
+    }
 
-    // Create the layers
-    let layers = Layers::new(rdom, &fdom.layout(), scale_factor);
-
-    layers
+    fdom.measure_all_paragraphs(scale_factor);
 }
diff --git a/crates/core/src/layout/mod.rs b/crates/core/src/layout/mod.rs
index e9d5eb251..65f1b2acd 100644
--- a/crates/core/src/layout/mod.rs
+++ b/crates/core/src/layout/mod.rs
@@ -1,7 +1,5 @@
-pub mod layers;
 pub mod layout_measurer;
 pub mod skia_measurer;
 
-pub use layers::*;
 pub use layout_measurer::*;
 pub use skia_measurer::*;
diff --git a/crates/core/src/layout/skia_measurer.rs b/crates/core/src/layout/skia_measurer.rs
index d4eb03886..802141ea5 100644
--- a/crates/core/src/layout/skia_measurer.rs
+++ b/crates/core/src/layout/skia_measurer.rs
@@ -1,4 +1,4 @@
-use std::{ops::Mul, sync::Arc};
+use std::sync::Arc;
 
 use dioxus_native_core::{
     prelude::{ElementNode, NodeType, SendAnyMap},
@@ -6,37 +6,29 @@ use dioxus_native_core::{
     tags::TagName,
     NodeId,
 };
-use freya_common::CursorLayoutResponse;
+use freya_common::{CachedParagraph, NodeReferenceLayout};
 use freya_dom::prelude::{DioxusDOM, DioxusNode};
-use freya_node_state::{CursorReference, CursorSettings, FontStyleState, References, TextOverflow};
+use freya_node_state::{FontStyleState, LayoutState, TextOverflow};
 
 use freya_engine::prelude::*;
-use torin::{
-    geometry::CursorPoint,
-    prelude::{LayoutMeasurer, LayoutNode, Node, Size2D},
-};
-
-pub struct CachedParagraph(pub Paragraph);
-
-/// # Safety
-/// Skia `Paragraph` are neither Sync or Send, but in order to store them in the Associated
-/// data of the Nodes in Torin (which will be used across threads when making the attributes diffing),
-/// we must manually mark the Paragraph as Send and Sync, this is fine because `Paragraph`s will only be accessed and modified
-/// In the main thread when measuring the layout and painting.
-unsafe impl Send for CachedParagraph {}
-unsafe impl Sync for CachedParagraph {}
-
+use torin::prelude::{LayoutMeasurer, LayoutNode, Node, Size2D};
 /// Provides Text measurements using Skia APIs like SkParagraph
 pub struct SkiaMeasurer<'a> {
     pub font_collection: &'a FontCollection,
     pub rdom: &'a DioxusDOM,
+    pub scale_factor: f32,
 }
 
 impl<'a> SkiaMeasurer<'a> {
-    pub fn new(rdom: &'a DioxusDOM, font_collection: &'a FontCollection) -> Self {
+    pub fn new(
+        rdom: &'a DioxusDOM,
+        font_collection: &'a FontCollection,
+        scale_factor: f32,
+    ) -> Self {
         Self {
             font_collection,
             rdom,
+            scale_factor,
         }
     }
 }
@@ -74,7 +66,24 @@ impl<'a> LayoutMeasurer<NodeId> for SkiaMeasurer<'a> {
         let node = self.rdom.get(node_id).unwrap();
         let node_type: &NodeType<_> = &node.node_type();
 
-        !matches!(node_type.tag(), Some(TagName::Label | TagName::Paragraph))
+        node_type
+            .tag()
+            .map(|tag| tag.has_children_with_intrinsic_layout())
+            .unwrap_or_default()
+    }
+
+    fn notify_layout_references(&self, node_id: NodeId, layout_node: &LayoutNode) {
+        let node = self.rdom.get(node_id).unwrap();
+        let size_state = &*node.get::<LayoutState>().unwrap();
+
+        if let Some(reference) = &size_state.node_ref {
+            let mut node_layout = NodeReferenceLayout {
+                area: layout_node.area,
+                inner: layout_node.inner_sizes,
+            };
+            node_layout.div(self.scale_factor);
+            reference.0.send(node_layout).ok();
+        }
     }
 }
 
@@ -156,87 +165,3 @@ pub fn create_paragraph(
     paragraph.layout(area_size.width + 1.0);
     paragraph
 }
-
-pub fn measure_paragraph(
-    node: &DioxusNode,
-    layout_node: &LayoutNode,
-    is_editable: bool,
-    scale_factor: f32,
-) {
-    let paragraph = &layout_node
-        .data
-        .as_ref()
-        .unwrap()
-        .get::<CachedParagraph>()
-        .unwrap()
-        .0;
-    let scale_factors = scale_factor as f64;
-
-    if is_editable {
-        if let Some((cursor_ref, id, cursor_position, cursor_selections)) =
-            get_cursor_reference(node)
-        {
-            if let Some(cursor_position) = cursor_position {
-                // Calculate the new cursor position
-                let char_position = paragraph.get_glyph_position_at_coordinate(
-                    cursor_position.mul(scale_factors).to_i32().to_tuple(),
-                );
-
-                // Notify the cursor reference listener
-                cursor_ref
-                    .cursor_sender
-                    .send(CursorLayoutResponse::CursorPosition {
-                        position: char_position.position as usize,
-                        id,
-                    })
-                    .ok();
-            }
-
-            if let Some((origin, dist)) = cursor_selections {
-                // Calculate the start of the highlighting
-                let origin_char = paragraph.get_glyph_position_at_coordinate(
-                    origin.mul(scale_factors).to_i32().to_tuple(),
-                );
-                // Calculate the end of the highlighting
-                let dist_char = paragraph
-                    .get_glyph_position_at_coordinate(dist.mul(scale_factors).to_i32().to_tuple());
-
-                cursor_ref
-                    .cursor_sender
-                    .send(CursorLayoutResponse::TextSelection {
-                        from: origin_char.position as usize,
-                        to: dist_char.position as usize,
-                        id,
-                    })
-                    .ok();
-            }
-        }
-    }
-}
-
-/// Get the info related to a cursor reference
-#[allow(clippy::type_complexity)]
-fn get_cursor_reference(
-    node: &DioxusNode,
-) -> Option<(
-    CursorReference,
-    usize,
-    Option<CursorPoint>,
-    Option<(CursorPoint, CursorPoint)>,
-)> {
-    let node_references = node.get::<References>().unwrap();
-    let cursor_settings = node.get::<CursorSettings>().unwrap();
-
-    let cursor_ref = node_references.cursor_ref.clone()?;
-    let cursor_id = cursor_settings.cursor_id?;
-
-    let current_cursor_id = { *cursor_ref.cursor_id.lock().unwrap().as_ref()? };
-    let cursor_selections = *cursor_ref.cursor_selections.lock().unwrap();
-    let cursor_position = *cursor_ref.cursor_position.lock().unwrap();
-
-    if current_cursor_id == cursor_id {
-        Some((cursor_ref, cursor_id, cursor_position, cursor_selections))
-    } else {
-        None
-    }
-}
diff --git a/crates/core/src/render.rs b/crates/core/src/render.rs
index 8a11a49e5..6302f8df5 100644
--- a/crates/core/src/render.rs
+++ b/crates/core/src/render.rs
@@ -1,21 +1,22 @@
-use crate::layout::*;
 use dioxus_native_core::{real_dom::NodeImmutable, NodeId};
 use freya_dom::prelude::FreyaDOM;
 use freya_engine::prelude::*;
 use freya_node_state::ViewportState;
+use itertools::sorted;
 use torin::prelude::{LayoutNode, Torin};
 
 /// Call the render function for the nodes that should be rendered.
 pub fn process_render(
     fdom: &FreyaDOM,
     font_collection: &mut FontCollection,
-    layers: &Layers,
     mut render_fn: impl FnMut(&FreyaDOM, &NodeId, &LayoutNode, &mut FontCollection, &Torin<NodeId>),
 ) {
     let layout = fdom.layout();
     let rdom = fdom.rdom();
+    let layers = fdom.layers();
+
     // Render all the layers from the bottom to the top
-    for (_, layer) in layers.layers() {
+    for (_, layer) in sorted(layers.layers().iter()) {
         'elements: for node_id in layer {
             let node = rdom.get(*node_id).unwrap();
             let node_viewports = node.get::<ViewportState>().unwrap();
diff --git a/crates/dom/Cargo.toml b/crates/dom/Cargo.toml
index 490f72eb6..908f7de4f 100644
--- a/crates/dom/Cargo.toml
+++ b/crates/dom/Cargo.toml
@@ -15,6 +15,7 @@ categories = ["gui", "asynchronous"]
 shared = []
 
 [dependencies]
+freya-common = { workspace = true }
 freya-node-state = { workspace = true }
 torin = { workspace = true }
 
@@ -22,3 +23,4 @@ dioxus-native-core = { workspace = true }
 dioxus-core = { workspace = true }
 rustc-hash = { workspace = true }
 tracing = { workspace = true }
+uuid = { workspace = true }
diff --git a/crates/dom/src/dom.rs b/crates/dom/src/dom.rs
index 1a007862f..393bd4f75 100644
--- a/crates/dom/src/dom.rs
+++ b/crates/dom/src/dom.rs
@@ -7,15 +7,17 @@ use dioxus_native_core::{
     NodeId, SendAnyMap,
 };
 
+use freya_common::{Layers, ParagraphElements};
 use freya_node_state::{
-    AccessibilityNodeState, CursorSettings, CustomAttributeValues, FontStyleState, LayoutState,
-    References, Style, Transform, ViewportState,
+    AccessibilityNodeState, CursorSettings, CustomAttributeValues, FontStyleState, LayerState,
+    LayoutState, References, Style, Transform, ViewportState,
 };
 use std::sync::MutexGuard;
 use torin::prelude::*;
 use tracing::info;
+use uuid::Uuid;
 
-use crate::mutations_writer::MutationsWriter;
+use crate::{mutations_writer::MutationsWriter, paragraph_utils::measure_paragraph};
 
 pub type DioxusDOM = RealDom<CustomAttributeValues>;
 pub type DioxusNode<'a> = NodeRef<'a, CustomAttributeValues>;
@@ -94,6 +96,8 @@ pub struct FreyaDOM {
     rdom: DioxusDOM,
     dioxus_integration_state: DioxusState,
     torin: Arc<Mutex<Torin<NodeId>>>,
+    paragraphs: ParagraphElements,
+    layers: Layers,
 }
 
 impl Default for FreyaDOM {
@@ -107,12 +111,15 @@ impl Default for FreyaDOM {
             Transform::to_type_erased(),
             AccessibilityNodeState::to_type_erased(),
             ViewportState::to_type_erased(),
+            LayerState::to_type_erased(),
         ]);
         let dioxus_integration_state = DioxusState::create(&mut rdom);
         Self {
             rdom,
             dioxus_integration_state,
             torin: Arc::new(Mutex::new(Torin::new())),
+            paragraphs: ParagraphElements::default(),
+            layers: Layers::default(),
         }
     }
 }
@@ -122,6 +129,14 @@ impl FreyaDOM {
         self.torin.lock().unwrap()
     }
 
+    pub fn layers(&self) -> &Layers {
+        &self.layers
+    }
+
+    pub fn paragraphs(&self) -> &ParagraphElements {
+        &self.paragraphs
+    }
+
     /// Create the initial DOM from the given Mutations
     pub fn init_dom(&mut self, vdom: &mut VirtualDom, scale_factor: f32) {
         // Build the RealDOM
@@ -130,11 +145,14 @@ impl FreyaDOM {
                 .dioxus_integration_state
                 .create_mutation_writer(&mut self.rdom),
             layout: &mut self.torin.lock().unwrap(),
+            layers: &self.layers,
         });
 
         let mut ctx = SendAnyMap::new();
         ctx.insert(scale_factor);
         ctx.insert(self.torin.clone());
+        ctx.insert(self.layers.clone());
+        ctx.insert(self.paragraphs.clone());
 
         self.rdom.update_state(ctx);
     }
@@ -147,12 +165,15 @@ impl FreyaDOM {
                 .dioxus_integration_state
                 .create_mutation_writer(&mut self.rdom),
             layout: &mut self.torin.lock().unwrap(),
+            layers: &self.layers,
         });
 
         // Update the Nodes states
         let mut ctx = SendAnyMap::new();
         ctx.insert(scale_factor);
         ctx.insert(self.torin.clone());
+        ctx.insert(self.layers.clone());
+        ctx.insert(self.paragraphs.clone());
 
         // Update the Node's states
         let (_, diff) = self.rdom.update_state(ctx);
@@ -183,4 +204,35 @@ impl FreyaDOM {
     pub fn state_mut(&mut self) -> &mut DioxusState {
         &mut self.dioxus_integration_state
     }
+
+    pub fn measure_all_paragraphs(&self, scale_factor: f32) {
+        let layout = self.layout();
+        let rdom = self.rdom();
+        for group in self.paragraphs.paragraphs().values() {
+            for node_id in group {
+                let node = rdom.get(*node_id);
+                let layout_node = layout.get(*node_id);
+                if let Some((node, layout_node)) = node.zip(layout_node) {
+                    measure_paragraph(&node, layout_node, true, scale_factor);
+                }
+            }
+        }
+    }
+
+    /// Measure all the paragraphs registered under the given TextId
+    pub fn measure_paragraphs(&self, text_id: &Uuid, scale_factor: f32) {
+        let paragraphs = self.paragraphs.paragraphs();
+        let group = paragraphs.get(text_id);
+        let layout = self.layout();
+        if let Some(group) = group {
+            for node_id in group {
+                let node = self.rdom().get(*node_id);
+                let layout_node = layout.get(*node_id);
+
+                if let Some((node, layout_node)) = node.zip(layout_node) {
+                    measure_paragraph(&node, layout_node, true, scale_factor);
+                }
+            }
+        }
+    }
 }
diff --git a/crates/dom/src/lib.rs b/crates/dom/src/lib.rs
index 22a094f2a..fbad71fd8 100644
--- a/crates/dom/src/lib.rs
+++ b/crates/dom/src/lib.rs
@@ -1,6 +1,7 @@
 pub mod dom;
 pub mod dom_adapter;
 mod mutations_writer;
+mod paragraph_utils;
 
 pub mod prelude {
     pub use crate::dom::*;
diff --git a/crates/dom/src/mutations_writer.rs b/crates/dom/src/mutations_writer.rs
index 6afabe886..9f5029f86 100644
--- a/crates/dom/src/mutations_writer.rs
+++ b/crates/dom/src/mutations_writer.rs
@@ -1,6 +1,9 @@
-use dioxus_core::WriteMutations;
-use dioxus_native_core::{dioxus::DioxusNativeCoreMutationWriter, NodeId};
-use freya_node_state::CustomAttributeValues;
+use dioxus_core::{ElementId, WriteMutations};
+use dioxus_native_core::{
+    dioxus::DioxusNativeCoreMutationWriter, prelude::NodeImmutable, tree::TreeRef, NodeId,
+};
+use freya_common::Layers;
+use freya_node_state::{CustomAttributeValues, LayerState};
 use torin::torin::Torin;
 
 use crate::prelude::DioxusDOMAdapter;
@@ -8,6 +11,38 @@ use crate::prelude::DioxusDOMAdapter;
 pub struct MutationsWriter<'a> {
     pub native_writer: DioxusNativeCoreMutationWriter<'a, CustomAttributeValues>,
     pub layout: &'a mut Torin<NodeId>,
+    pub layers: &'a Layers,
+}
+
+impl<'a> MutationsWriter<'a> {
+    pub fn remove(&mut self, id: ElementId) {
+        let node_id = self.native_writer.state.element_to_node_id(id);
+        let mut dom_adapter = DioxusDOMAdapter::new_with_cache(self.native_writer.rdom);
+
+        // Remove from layout
+        self.layout.remove(node_id, &mut dom_adapter, true);
+
+        // Remove from layers
+        let mut stack = vec![node_id];
+        let tree = self.native_writer.rdom.tree_ref();
+        while let Some(node_id) = stack.pop() {
+            if let Some(node) = self.native_writer.rdom.get(node_id) {
+                let traverse_children = node
+                    .node_type()
+                    .tag()
+                    .map(|tag| tag.has_children_with_intrinsic_layout())
+                    .unwrap_or_default();
+                if traverse_children {
+                    let children = tree.children_ids_advanced(node_id, false);
+                    stack.extend(children.iter().copied().rev());
+                }
+
+                let layer_state = node.get::<LayerState>().unwrap();
+                self.layers
+                    .remove_node_from_layer(node_id, layer_state.layer);
+            }
+        }
+    }
 }
 
 impl<'a> WriteMutations for MutationsWriter<'a> {
@@ -41,12 +76,7 @@ impl<'a> WriteMutations for MutationsWriter<'a> {
 
     fn replace_node_with(&mut self, id: dioxus_core::ElementId, m: usize) {
         if m > 0 {
-            let mut dom_adapter = DioxusDOMAdapter::new_with_cache(self.native_writer.rdom);
-            self.layout.remove(
-                self.native_writer.state.element_to_node_id(id),
-                &mut dom_adapter,
-                true,
-            );
+            self.remove(id);
         }
 
         self.native_writer.replace_node_with(id, m);
@@ -89,12 +119,10 @@ impl<'a> WriteMutations for MutationsWriter<'a> {
     }
 
     fn remove_node(&mut self, id: dioxus_core::ElementId) {
+        let node_id = self.native_writer.state.element_to_node_id(id);
         let mut dom_adapter = DioxusDOMAdapter::new_with_cache(self.native_writer.rdom);
-        self.layout.remove(
-            self.native_writer.state.element_to_node_id(id),
-            &mut dom_adapter,
-            true,
-        );
+        self.layout.remove(node_id, &mut dom_adapter, true);
+        self.remove(id);
         self.native_writer.remove_node(id);
     }
 
diff --git a/crates/dom/src/paragraph_utils.rs b/crates/dom/src/paragraph_utils.rs
new file mode 100644
index 000000000..b58f547b4
--- /dev/null
+++ b/crates/dom/src/paragraph_utils.rs
@@ -0,0 +1,92 @@
+use dioxus_native_core::real_dom::NodeImmutable;
+
+use freya_common::{CachedParagraph, CursorLayoutResponse};
+use freya_node_state::{CursorReference, CursorSettings};
+use std::ops::Mul;
+
+use torin::prelude::*;
+
+use crate::dom::DioxusNode;
+
+pub fn measure_paragraph(
+    node: &DioxusNode,
+    layout_node: &LayoutNode,
+    is_editable: bool,
+    scale_factor: f32,
+) {
+    let paragraph = &layout_node
+        .data
+        .as_ref()
+        .unwrap()
+        .get::<CachedParagraph>()
+        .unwrap()
+        .0;
+    let scale_factors = scale_factor as f64;
+
+    if is_editable {
+        if let Some((cursor_ref, id, cursor_position, cursor_selections)) =
+            get_cursor_reference(node)
+        {
+            if let Some(cursor_position) = cursor_position {
+                // Calculate the new cursor position
+                let char_position = paragraph.get_glyph_position_at_coordinate(
+                    cursor_position.mul(scale_factors).to_i32().to_tuple(),
+                );
+
+                // Notify the cursor reference listener
+                cursor_ref
+                    .cursor_sender
+                    .send(CursorLayoutResponse::CursorPosition {
+                        position: char_position.position as usize,
+                        id,
+                    })
+                    .ok();
+            }
+
+            if let Some((origin, dist)) = cursor_selections {
+                // Calculate the start of the highlighting
+                let origin_char = paragraph.get_glyph_position_at_coordinate(
+                    origin.mul(scale_factors).to_i32().to_tuple(),
+                );
+                // Calculate the end of the highlighting
+                let dist_char = paragraph
+                    .get_glyph_position_at_coordinate(dist.mul(scale_factors).to_i32().to_tuple());
+
+                cursor_ref
+                    .cursor_sender
+                    .send(CursorLayoutResponse::TextSelection {
+                        from: origin_char.position as usize,
+                        to: dist_char.position as usize,
+                        id,
+                    })
+                    .ok();
+            }
+        }
+    }
+}
+
+/// Get the info related to a cursor reference
+#[allow(clippy::type_complexity)]
+fn get_cursor_reference(
+    node: &DioxusNode,
+) -> Option<(
+    CursorReference,
+    usize,
+    Option<CursorPoint>,
+    Option<(CursorPoint, CursorPoint)>,
+)> {
+    let cursor_settings = node.get::<CursorSettings>().unwrap();
+
+    let cursor_ref = cursor_settings.cursor_ref.clone()?;
+    let cursor_id = cursor_settings.cursor_id?;
+
+    let current_cursor_id = { *cursor_ref.cursor_id.lock().unwrap().as_ref()? };
+    let cursor_selections = *cursor_ref.cursor_selections.lock().unwrap();
+    let cursor_position = *cursor_ref.cursor_position.lock().unwrap();
+
+    if current_cursor_id == cursor_id {
+        Some((cursor_ref, cursor_id, cursor_position, cursor_selections))
+    } else {
+        None
+    }
+}
diff --git a/crates/native-core-macro/src/lib.rs b/crates/native-core-macro/src/lib.rs
index 29cdd35b3..7cd867ad0 100644
--- a/crates/native-core-macro/src/lib.rs
+++ b/crates/native-core-macro/src/lib.rs
@@ -336,7 +336,7 @@ pub fn partial_derive_state(_: TokenStream, input: TokenStream) -> TokenStream {
                     let (#(#split_views,)*) = data;
                     let tree = run_view.tree.clone();
                     let node_types = run_view.node_type.clone();
-                    dioxus_native_core::prelude::run_pass(type_id, dependants.clone(), pass_direction, run_view, |id, context| {
+                    dioxus_native_core::prelude::run_pass(type_id, dependants.clone(), pass_direction, run_view, |id, context, height| {
                         let node_data: &NodeType<_> = node_types.get(id).unwrap_or_else(|err| panic!("Failed to get node type {:?}", err));
                         if node_data.is_text() {
                             return false;
@@ -353,7 +353,7 @@ pub fn partial_derive_state(_: TokenStream, input: TokenStream) -> TokenStream {
                         #deref_parent_view
                         #deref_child_view
 
-                        let view = NodeView::new(id, node_data, &node_mask);
+                        let view = NodeView::new(id, node_data, &node_mask, height);
                         if let Some(myself) = myself {
                             myself
                                 .update(view, node, parent, children, context)
diff --git a/crates/native-core/src/node_ref.rs b/crates/native-core/src/node_ref.rs
index c8c07b471..50687eabb 100644
--- a/crates/native-core/src/node_ref.rs
+++ b/crates/native-core/src/node_ref.rs
@@ -15,15 +15,17 @@ pub struct NodeView<'a, V: FromAnyValue = ()> {
     id: NodeId,
     inner: &'a NodeType<V>,
     mask: &'a NodeMask,
+    height: u16,
 }
 
 impl<'a, V: FromAnyValue> NodeView<'a, V> {
     /// Create a new NodeView from a VNode, and mask.
-    pub fn new(id: NodeId, node: &'a NodeType<V>, view: &'a NodeMask) -> Self {
+    pub fn new(id: NodeId, node: &'a NodeType<V>, view: &'a NodeMask, height: u16) -> Self {
         Self {
             inner: node,
             mask: view,
             id,
+            height,
         }
     }
 
@@ -32,6 +34,11 @@ impl<'a, V: FromAnyValue> NodeView<'a, V> {
         self.id
     }
 
+    /// Get the node height
+    pub fn height(&self) -> u16 {
+        self.height
+    }
+
     /// Get the tag of the node if the tag is enabled in the mask
     pub fn tag(&self) -> Option<&'a TagName> {
         self.mask
diff --git a/crates/native-core/src/passes.rs b/crates/native-core/src/passes.rs
index a76dbc61c..4dea79e5d 100644
--- a/crates/native-core/src/passes.rs
+++ b/crates/native-core/src/passes.rs
@@ -194,7 +194,7 @@ pub fn run_pass<V: FromAnyValue + Send + Sync>(
     dependants: Arc<Dependants>,
     pass_direction: PassDirection,
     view: RunPassView<V>,
-    mut update_node: impl FnMut(NodeId, &SendAnyMap) -> bool,
+    mut update_node: impl FnMut(NodeId, &SendAnyMap, u16) -> bool,
 ) {
     let RunPassView {
         tree,
@@ -207,7 +207,7 @@ pub fn run_pass<V: FromAnyValue + Send + Sync>(
     match pass_direction {
         PassDirection::ParentToChild => {
             while let Some((height, id)) = dirty.pop_front(type_id) {
-                if (update_node)(id, ctx) {
+                if (update_node)(id, ctx, height) {
                     nodes_updated.insert(id);
                     dependants.mark_dirty(&dirty, id, &tree, height);
                 }
@@ -215,7 +215,7 @@ pub fn run_pass<V: FromAnyValue + Send + Sync>(
         }
         PassDirection::ChildToParent => {
             while let Some((height, id)) = dirty.pop_back(type_id) {
-                if (update_node)(id, ctx) {
+                if (update_node)(id, ctx, height) {
                     nodes_updated.insert(id);
                     dependants.mark_dirty(&dirty, id, &tree, height);
                 }
@@ -223,7 +223,7 @@ pub fn run_pass<V: FromAnyValue + Send + Sync>(
         }
         PassDirection::AnyOrder => {
             while let Some((height, id)) = dirty.pop_back(type_id) {
-                if (update_node)(id, ctx) {
+                if (update_node)(id, ctx, height) {
                     nodes_updated.insert(id);
                     dependants.mark_dirty(&dirty, id, &tree, height);
                 }
diff --git a/crates/native-core/src/tags.rs b/crates/native-core/src/tags.rs
index 728a84c4c..3cfcdd6dd 100644
--- a/crates/native-core/src/tags.rs
+++ b/crates/native-core/src/tags.rs
@@ -15,6 +15,10 @@ impl TagName {
     pub fn has_intrinsic_layout(&self) -> bool {
         *self != Self::Text
     }
+
+    pub fn has_children_with_intrinsic_layout(&self) -> bool {
+        *self != Self::Paragraph && *self != Self::Label
+    }
 }
 
 impl FromStr for TagName {
diff --git a/crates/native-core/src/tree.rs b/crates/native-core/src/tree.rs
index e7239d307..d1d681109 100644
--- a/crates/native-core/src/tree.rs
+++ b/crates/native-core/src/tree.rs
@@ -305,7 +305,6 @@ impl<'a> TreeMut for TreeMutView<'a> {
                 // Reset the height of the light root's children
                 let height = node.height;
                 for child in node.children.clone() {
-                    println!("child: {:?}", child);
                     set_height(self, child, height + 1);
                 }
 
diff --git a/crates/renderer/Cargo.toml b/crates/renderer/Cargo.toml
index cc7ee2685..73d0c839d 100644
--- a/crates/renderer/Cargo.toml
+++ b/crates/renderer/Cargo.toml
@@ -44,6 +44,7 @@ tracing = { workspace = true }
 futures-task ={ workspace = true }
 futures-util = { workspace = true }
 
+itertools = "0.11.0"
 uuid = { workspace = true }
 image = "0.24.7"
 pin-utils = "0.1.0"
diff --git a/crates/renderer/src/app.rs b/crates/renderer/src/app.rs
index fd5e717db..1a2fc457b 100644
--- a/crates/renderer/src/app.rs
+++ b/crates/renderer/src/app.rs
@@ -37,7 +37,6 @@ pub struct App<State: 'static + Clone> {
     pub(crate) event_emitter: EventEmitter,
     pub(crate) event_receiver: EventReceiver,
     pub(crate) window_env: WindowEnv<State>,
-    pub(crate) layers: Layers,
     pub(crate) nodes_state: NodesState,
     pub(crate) focus_sender: FocusSender,
     pub(crate) focus_receiver: FocusReceiver,
@@ -98,7 +97,6 @@ impl<State: 'static + Clone> App<State> {
             event_emitter,
             event_receiver,
             window_env,
-            layers: Layers::default(),
             nodes_state: NodesState::default(),
             accessibility,
             focus_sender,
@@ -200,7 +198,6 @@ impl<State: 'static + Clone> App<State> {
         let scale_factor = self.window_env.window.scale_factor();
         process_events(
             &self.sdom.get(),
-            &self.layers,
             &mut self.events,
             &self.event_emitter,
             &mut self.nodes_state,
@@ -215,10 +212,8 @@ impl<State: 'static + Clone> App<State> {
         let fdom = &self.sdom.get();
         let layout = fdom.layout();
         let rdom = fdom.rdom();
-        let layers = &self.layers;
 
         process_accessibility(
-            layers,
             &layout,
             rdom,
             &mut self.accessibility.accessibility_manager().lock().unwrap(),
@@ -269,8 +264,7 @@ impl<State: 'static + Clone> App<State> {
     /// Measure the a text group given it's ID.
     pub fn measure_text_group(&self, text_id: &Uuid) {
         let scale_factor = self.window_env.window.scale_factor() as f32;
-        self.layers
-            .measure_paragraph_elements(text_id, &self.sdom.get(), scale_factor);
+        self.sdom.get().measure_paragraphs(text_id, scale_factor);
     }
 
     pub fn focus_next_node(&self, direction: AccessibilityFocusDirection) {
@@ -300,7 +294,7 @@ impl<State: 'static + Clone> App<State> {
 
             let window_size = self.window_env.window.inner_size();
             let scale_factor = self.window_env.window.scale_factor() as f32;
-            let layers = process_layout(
+            process_layout(
                 &fdom,
                 Area::from_size(Size2D::from((
                     window_size.width as f32,
@@ -309,7 +303,6 @@ impl<State: 'static + Clone> App<State> {
                 &mut self.font_collection,
                 scale_factor,
             );
-            self.layers = layers;
 
             self.plugins
                 .send(PluginEvent::FinishedLayout(&fdom.layout()));
@@ -323,8 +316,8 @@ impl<State: 'static + Clone> App<State> {
 
         info!(
             "Processed {} layers and {} group of paragraph elements",
-            self.layers.len_layers(),
-            self.layers.len_paragraph_elements()
+            self.sdom.get().layers().len_layers(),
+            self.sdom.get().paragraphs().len_paragraphs()
         );
     }
 
@@ -341,7 +334,6 @@ impl<State: 'static + Clone> App<State> {
         process_render(
             &fdom,
             &mut self.font_collection,
-            &self.layers,
             |fdom, node_id, area, font_collection, layout| {
                 let render_wireframe = if let Some(hovered_node) = &hovered_node {
                     hovered_node
diff --git a/crates/renderer/src/elements/label.rs b/crates/renderer/src/elements/label.rs
index 839a23095..27d6e1127 100644
--- a/crates/renderer/src/elements/label.rs
+++ b/crates/renderer/src/elements/label.rs
@@ -1,7 +1,7 @@
 use std::sync::Arc;
 
 use dioxus_native_core::prelude::SendAnyMap;
-use freya_core::layout::CachedParagraph;
+use freya_common::CachedParagraph;
 use freya_engine::prelude::*;
 use torin::geometry::Area;
 
diff --git a/crates/renderer/src/elements/paragraph.rs b/crates/renderer/src/elements/paragraph.rs
index a3f681c7b..8caad6c1f 100644
--- a/crates/renderer/src/elements/paragraph.rs
+++ b/crates/renderer/src/elements/paragraph.rs
@@ -1,7 +1,8 @@
 use std::sync::Arc;
 
 use dioxus_native_core::{real_dom::NodeImmutable, SendAnyMap};
-use freya_core::layout::{create_paragraph, CachedParagraph};
+use freya_common::CachedParagraph;
+use freya_core::layout::create_paragraph;
 use freya_dom::prelude::DioxusNode;
 use freya_engine::prelude::*;
 use freya_node_state::CursorSettings;
diff --git a/crates/renderer/src/lib.rs b/crates/renderer/src/lib.rs
index 7b13ee59b..8db817516 100644
--- a/crates/renderer/src/lib.rs
+++ b/crates/renderer/src/lib.rs
@@ -51,15 +51,12 @@ impl DesktopRenderer {
         {
             use std::process::exit;
             let proxy = proxy.clone();
-            dioxus_hot_reload::connect(move |msg| {
-                println!("{msg:?}");
-                match msg {
-                    dioxus_hot_reload::HotReloadMsg::UpdateTemplate(template) => {
-                        let _ = proxy.send_event(EventMessage::UpdateTemplate(template));
-                    }
-                    dioxus_hot_reload::HotReloadMsg::Shutdown => exit(0),
-                    dioxus_hot_reload::HotReloadMsg::UpdateAsset(_) => {}
+            dioxus_hot_reload::connect(move |msg| match msg {
+                dioxus_hot_reload::HotReloadMsg::UpdateTemplate(template) => {
+                    let _ = proxy.send_event(EventMessage::UpdateTemplate(template));
                 }
+                dioxus_hot_reload::HotReloadMsg::Shutdown => exit(0),
+                dioxus_hot_reload::HotReloadMsg::UpdateAsset(_) => {}
             });
         }
 
diff --git a/crates/state/Cargo.toml b/crates/state/Cargo.toml
index 971b979c1..31e92e7a3 100644
--- a/crates/state/Cargo.toml
+++ b/crates/state/Cargo.toml
@@ -29,6 +29,7 @@ dioxus-core = { workspace = true }
 tokio = { workspace = true }
 accesskit = { workspace = true }
 shipyard = { workspace = true }
+rustc-hash= { workspace = true }
 
 uuid = { workspace = true }
 bytes = "1.5.0"
diff --git a/crates/state/src/cursor.rs b/crates/state/src/cursor.rs
index 7688dd288..494112c97 100644
--- a/crates/state/src/cursor.rs
+++ b/crates/state/src/cursor.rs
@@ -1,15 +1,19 @@
-use dioxus_native_core::{attributes::AttributeName, exports::shipyard::Component};
+use dioxus_native_core::{
+    attributes::AttributeName, exports::shipyard::Component, node::OwnedAttributeValue,
+    tags::TagName,
+};
 use dioxus_native_core::{
     node_ref::NodeView,
     prelude::{AttributeMaskBuilder, Dependancy, NodeMaskBuilder, State},
     SendAnyMap,
 };
 use dioxus_native_core_macro::partial_derive_state;
+use freya_common::ParagraphElements;
 use freya_engine::prelude::*;
 
-use crate::{CursorMode, CustomAttributeValues, Parse};
+use crate::{CursorMode, CursorReference, CustomAttributeValues, Parse};
 
-#[derive(Clone, Debug, PartialEq, Eq, Component)]
+#[derive(Clone, Debug, PartialEq, Component)]
 pub struct CursorSettings {
     pub position: Option<i32>,
     pub color: Color,
@@ -17,6 +21,7 @@ pub struct CursorSettings {
     pub cursor_id: Option<usize>,
     pub highlights: Option<Vec<(usize, usize)>>,
     pub highlight_color: Color,
+    pub cursor_ref: Option<CursorReference>,
 }
 
 impl Default for CursorSettings {
@@ -28,6 +33,7 @@ impl Default for CursorSettings {
             cursor_id: None,
             highlights: None,
             highlight_color: Color::from_rgb(87, 108, 188),
+            cursor_ref: None,
         }
     }
 }
@@ -40,15 +46,17 @@ impl State<CustomAttributeValues> for CursorSettings {
 
     type NodeDependencies = ();
 
-    const NODE_MASK: NodeMaskBuilder<'static> =
-        NodeMaskBuilder::new().with_attrs(AttributeMaskBuilder::Some(&[
+    const NODE_MASK: NodeMaskBuilder<'static> = NodeMaskBuilder::new()
+        .with_attrs(AttributeMaskBuilder::Some(&[
             AttributeName::CursorIndex,
             AttributeName::CursorColor,
             AttributeName::CursorMode,
             AttributeName::CursorId,
             AttributeName::Highlights,
             AttributeName::HighlightColor,
-        ]));
+            AttributeName::CursorReference,
+        ]))
+        .with_tag();
 
     fn update<'a>(
         &mut self,
@@ -56,8 +64,9 @@ impl State<CustomAttributeValues> for CursorSettings {
         _node: <Self::NodeDependencies as Dependancy>::ElementBorrowed<'a>,
         parent: Option<<Self::ParentDependencies as Dependancy>::ElementBorrowed<'a>>,
         _children: Vec<<Self::ChildDependencies as Dependancy>::ElementBorrowed<'a>>,
-        _context: &SendAnyMap,
+        context: &SendAnyMap,
     ) -> bool {
+        let paragraphs = context.get::<ParagraphElements>().unwrap();
         let mut cursor = parent.map(|(p,)| p.clone()).unwrap_or_default();
 
         if let Some(attributes) = node_view.attributes() {
@@ -105,11 +114,28 @@ impl State<CustomAttributeValues> for CursorSettings {
                             }
                         }
                     }
+                    AttributeName::CursorReference => {
+                        if let OwnedAttributeValue::Custom(
+                            CustomAttributeValues::CursorReference(reference),
+                        ) = attr.value
+                        {
+                            cursor.cursor_ref = Some(reference.clone());
+                        }
+                    }
                     _ => {}
                 }
             }
         }
         let changed = &cursor != self;
+
+        if changed && CursorMode::Editable == cursor.mode {
+            if let Some((tag, cursor_ref)) = node_view.tag().zip(cursor.cursor_ref.as_ref()) {
+                if *tag == TagName::Paragraph {
+                    paragraphs.insert_paragraph(node_view.node_id(), cursor_ref.text_id)
+                }
+            }
+        }
+
         *self = cursor;
         changed
     }
diff --git a/crates/state/src/layer.rs b/crates/state/src/layer.rs
new file mode 100644
index 000000000..4ae5ff409
--- /dev/null
+++ b/crates/state/src/layer.rs
@@ -0,0 +1,81 @@
+use dioxus_native_core::{
+    attributes::AttributeName,
+    exports::shipyard::Component,
+    node_ref::NodeView,
+    prelude::{AttributeMaskBuilder, Dependancy, NodeMaskBuilder, State},
+    SendAnyMap,
+};
+use dioxus_native_core_macro::partial_derive_state;
+use freya_common::Layers;
+
+use crate::CustomAttributeValues;
+
+#[derive(Default, PartialEq, Clone, Debug, Component)]
+pub struct LayerState {
+    pub layer: i16,
+    pub layer_for_children: i16,
+}
+
+#[partial_derive_state]
+impl State<CustomAttributeValues> for LayerState {
+    type ParentDependencies = (Self,);
+
+    type ChildDependencies = ();
+
+    type NodeDependencies = ();
+
+    const NODE_MASK: NodeMaskBuilder<'static> = NodeMaskBuilder::new()
+        .with_attrs(AttributeMaskBuilder::Some(&[AttributeName::Layer]))
+        .with_tag();
+
+    fn update<'a>(
+        &mut self,
+        node_view: NodeView<CustomAttributeValues>,
+        _node: <Self::NodeDependencies as Dependancy>::ElementBorrowed<'a>,
+        parent: Option<<Self::ParentDependencies as Dependancy>::ElementBorrowed<'a>>,
+        _children: Vec<<Self::ChildDependencies as Dependancy>::ElementBorrowed<'a>>,
+        context: &SendAnyMap,
+    ) -> bool {
+        if let Some(tag) = node_view.tag() {
+            // No need to consider text spans
+            if !tag.has_intrinsic_layout() {
+                return false;
+            }
+        }
+
+        let layers = context.get::<Layers>().unwrap();
+        let inherited_layer = parent.map(|(p,)| p.layer_for_children).unwrap_or(0i16);
+
+        let mut provided_layer = 0;
+
+        if let Some(attributes) = node_view.attributes() {
+            for attr in attributes {
+                #[allow(clippy::single_match)]
+                match attr.attribute {
+                    AttributeName::Layer => {
+                        if let Some(value) = attr.value.as_text() {
+                            if let Ok(relative_layer) = value.parse::<i16>() {
+                                provided_layer = relative_layer;
+                            }
+                        }
+                    }
+                    _ => {}
+                }
+            }
+        }
+
+        let layer_state = LayerState {
+            layer: -provided_layer + node_view.height() as i16 - inherited_layer,
+            layer_for_children: provided_layer + inherited_layer,
+        };
+
+        let changed = &layer_state != self;
+
+        if changed {
+            layers.insert_node_in_layer(node_view.node_id(), layer_state.layer);
+        }
+
+        *self = layer_state;
+        changed
+    }
+}
diff --git a/crates/state/src/lib.rs b/crates/state/src/lib.rs
index b76866018..4fae5a39a 100644
--- a/crates/state/src/lib.rs
+++ b/crates/state/src/lib.rs
@@ -2,6 +2,7 @@ mod accessibility;
 mod cursor;
 mod custom_attributes;
 mod font_style;
+mod layer;
 mod layout;
 mod parsing;
 mod references;
@@ -14,6 +15,7 @@ pub use accessibility::*;
 pub use cursor::*;
 pub use custom_attributes::*;
 pub use font_style::*;
+pub use layer::*;
 pub use layout::*;
 pub use parsing::*;
 pub use references::*;
diff --git a/crates/state/src/references.rs b/crates/state/src/references.rs
index 8417475f0..1a512673b 100644
--- a/crates/state/src/references.rs
+++ b/crates/state/src/references.rs
@@ -8,58 +8,42 @@ use dioxus_native_core::{
 };
 use dioxus_native_core_macro::partial_derive_state;
 
-use crate::{CanvasReference, CursorReference, CustomAttributeValues, ImageReference};
+use crate::{CanvasReference, CustomAttributeValues, ImageReference};
 
 #[derive(Default, PartialEq, Clone, Debug, Component)]
 pub struct References {
     pub image_ref: Option<ImageReference>,
-    pub cursor_ref: Option<CursorReference>,
     pub canvas_ref: Option<CanvasReference>,
 }
 
 #[partial_derive_state]
 impl State<CustomAttributeValues> for References {
-    type ParentDependencies = (Self,);
+    type ParentDependencies = ();
 
     type ChildDependencies = ();
 
     type NodeDependencies = ();
 
-    const NODE_MASK: NodeMaskBuilder<'static> =
-        NodeMaskBuilder::new().with_attrs(AttributeMaskBuilder::Some(&[
-            AttributeName::CursorReference,
+    const NODE_MASK: NodeMaskBuilder<'static> = NodeMaskBuilder::new()
+        .with_attrs(AttributeMaskBuilder::Some(&[
             AttributeName::ImageReference,
             AttributeName::CanvasReference,
-        ]));
+        ]))
+        .with_tag();
 
     fn update<'a>(
         &mut self,
         node_view: NodeView<CustomAttributeValues>,
         _node: <Self::NodeDependencies as Dependancy>::ElementBorrowed<'a>,
-        parent: Option<<Self::ParentDependencies as Dependancy>::ElementBorrowed<'a>>,
+        _parent: Option<<Self::ParentDependencies as Dependancy>::ElementBorrowed<'a>>,
         _children: Vec<<Self::ChildDependencies as Dependancy>::ElementBorrowed<'a>>,
         _context: &SendAnyMap,
     ) -> bool {
-        let mut references = References {
-            cursor_ref: if let Some(parent) = parent {
-                parent.0.cursor_ref.clone()
-            } else {
-                None
-            },
-            ..Default::default()
-        };
+        let mut references = References::default();
 
         if let Some(attributes) = node_view.attributes() {
             for attr in attributes {
                 match attr.attribute {
-                    AttributeName::CursorReference => {
-                        if let OwnedAttributeValue::Custom(
-                            CustomAttributeValues::CursorReference(reference),
-                        ) = attr.value
-                        {
-                            references.cursor_ref = Some(reference.clone());
-                        }
-                    }
                     AttributeName::ImageReference => {
                         if let OwnedAttributeValue::Custom(CustomAttributeValues::ImageReference(
                             reference,
@@ -82,6 +66,7 @@ impl State<CustomAttributeValues> for References {
         }
 
         let changed = &references != self;
+
         *self = references;
         changed
     }
diff --git a/crates/state/src/style.rs b/crates/state/src/style.rs
index 50d436b3d..98ee814e3 100644
--- a/crates/state/src/style.rs
+++ b/crates/state/src/style.rs
@@ -19,7 +19,6 @@ use crate::{
 #[derive(Default, Debug, Clone, PartialEq, Component)]
 pub struct Style {
     pub background: Fill,
-    pub relative_layer: i16,
     pub border: Border,
     pub shadows: Vec<Shadow>,
     pub corner_radius: CornerRadius,
@@ -74,13 +73,6 @@ impl State<CustomAttributeValues> for Style {
                             }
                         }
                     }
-                    AttributeName::Layer => {
-                        if let Some(value) = attr.value.as_text() {
-                            if let Ok(relative_layer) = value.parse::<i16>() {
-                                style.relative_layer = relative_layer;
-                            }
-                        }
-                    }
                     AttributeName::Border => {
                         if let Some(value) = attr.value.as_text() {
                             if let Ok(mut border) = Border::parse(value) {
diff --git a/crates/testing/src/launch.rs b/crates/testing/src/launch.rs
index 51b9bfa1e..8e5f7be40 100644
--- a/crates/testing/src/launch.rs
+++ b/crates/testing/src/launch.rs
@@ -31,7 +31,6 @@ pub fn launch_test_with_config(root: AppComponent, config: TestingConfig) -> Tes
 
     let (event_emitter, event_receiver) = unbounded_channel::<DomEvent>();
     let (platform_event_emitter, platform_event_receiver) = unbounded_channel::<EventMessage>();
-    let layers = Arc::default();
     let mut font_collection = FontCollection::new();
     font_collection.set_dynamic_font_manager(FontMgr::default());
 
@@ -42,7 +41,7 @@ pub fn launch_test_with_config(root: AppComponent, config: TestingConfig) -> Tes
         font_collection,
         event_emitter,
         event_receiver,
-        utils: TestUtils { sdom, layers },
+        utils: TestUtils { sdom },
         config,
         platform_event_emitter,
         platform_event_receiver,
diff --git a/crates/testing/src/test_handler.rs b/crates/testing/src/test_handler.rs
index 42c1c59a4..bc2d83084 100644
--- a/crates/testing/src/test_handler.rs
+++ b/crates/testing/src/test_handler.rs
@@ -135,7 +135,7 @@ impl TestingHandler {
         self.utils.sdom().get_mut().layout().reset();
 
         // Measure layout
-        let layers = process_layout(
+        process_layout(
             &self.utils.sdom().get(),
             Area {
                 origin: (0.0, 0.0).into(),
@@ -145,12 +145,9 @@ impl TestingHandler {
             SCALE_FACTOR as f32,
         );
 
-        *self.utils.layers().lock().unwrap() = layers;
-
         let dom = &self.utils.sdom().get_mut();
 
         process_accessibility(
-            &self.utils.layers().lock().unwrap(),
             &dom.layout(),
             dom.rdom(),
             &mut self.accessibility_manager.lock().unwrap(),
@@ -158,7 +155,6 @@ impl TestingHandler {
 
         process_events(
             dom,
-            &self.utils.layers().lock().unwrap(),
             &mut self.events_queue,
             &self.event_emitter,
             &mut self.nodes_state,
diff --git a/crates/testing/src/test_utils.rs b/crates/testing/src/test_utils.rs
index 378bff144..e14a83f25 100644
--- a/crates/testing/src/test_utils.rs
+++ b/crates/testing/src/test_utils.rs
@@ -3,14 +3,12 @@ use dioxus_native_core::tree::TreeRef;
 use dioxus_native_core::NodeId;
 use freya_core::prelude::*;
 use freya_dom::prelude::{DioxusDOM, DioxusNode, SafeDOM};
-use std::sync::{Arc, Mutex};
 
 use crate::test_node::TestNode;
 
 #[derive(Clone)]
 pub struct TestUtils {
     pub(crate) sdom: SafeDOM,
-    pub(crate) layers: Arc<Mutex<Layers>>,
 }
 
 impl TestUtils {
@@ -19,11 +17,6 @@ impl TestUtils {
         &self.sdom
     }
 
-    /// Get the Layers.
-    pub fn layers(&self) -> &Arc<Mutex<Layers>> {
-        &self.layers
-    }
-
     /// Get a Node by the given ID
     pub fn get_node_by_id(&self, node_id: NodeId) -> TestNode {
         let utils = self.clone();
diff --git a/crates/torin/src/custom_measurer.rs b/crates/torin/src/custom_measurer.rs
index 86e9e2dc3..514f8efff 100644
--- a/crates/torin/src/custom_measurer.rs
+++ b/crates/torin/src/custom_measurer.rs
@@ -1,7 +1,7 @@
 use dioxus_native_core::prelude::SendAnyMap;
 use std::sync::Arc;
 
-use crate::{dom_adapter::NodeKey, geometry::Size2D, node::Node};
+use crate::{dom_adapter::NodeKey, geometry::Size2D, node::Node, prelude::LayoutNode};
 
 pub trait LayoutMeasurer<Key: NodeKey> {
     fn measure(
@@ -12,4 +12,6 @@ pub trait LayoutMeasurer<Key: NodeKey> {
     ) -> Option<(Size2D, Arc<SendAnyMap>)>;
 
     fn should_measure_inner_children(&mut self, node_id: Key) -> bool;
+
+    fn notify_layout_references(&self, _node_id: Key, _layout_node: &LayoutNode) {}
 }
diff --git a/crates/torin/src/measure.rs b/crates/torin/src/measure.rs
index 6cc805b56..deb91bebc 100644
--- a/crates/torin/src/measure.rs
+++ b/crates/torin/src/measure.rs
@@ -403,6 +403,11 @@ pub fn measure_inner_nodes<Key: NodeKey>(
 
         // Cache the child layout if it was mutated and inner nodes must be cache
         if child_revalidated && must_cache_inner_nodes {
+            if let Some(measurer) = measurer {
+                if child_data.has_layout_references {
+                    measurer.notify_layout_references(child_id, &child_areas);
+                }
+            }
             layout.cache_node(child_id, child_areas);
         }
     }
diff --git a/crates/torin/src/torin.rs b/crates/torin/src/torin.rs
index f625c4e9d..a4065fad0 100644
--- a/crates/torin/src/torin.rs
+++ b/crates/torin/src/torin.rs
@@ -264,6 +264,11 @@ impl<Key: NodeKey> Torin<Key> {
 
         // Cache the root Node results if it was modified
         if root_revalidated {
+            if let Some(measurer) = measurer {
+                if root.has_layout_references {
+                    measurer.notify_layout_references(root_id, &root_layout_node);
+                }
+            }
             self.cache_node(root_id, root_layout_node);
         }
 
diff --git a/examples/floating_editors.rs b/examples/floating_editors.rs
index f3e445e17..b4ff658bd 100644
--- a/examples/floating_editors.rs
+++ b/examples/floating_editors.rs
@@ -7,7 +7,7 @@ use freya::events::MouseEvent;
 use freya::prelude::*;
 
 fn main() {
-    launch_with_title(app, "Floating Editors")
+    launch_with_props(app, "Floating Editors", (700., 600.))
 }
 
 fn app() -> Element {

From 5f66989f6271124f08bef205a547f2c7c6478f40 Mon Sep 17 00:00:00 2001
From: Marc Espin <mespinsanz@gmail.com>
Date: Thu, 28 Mar 2024 22:03:30 +0100
Subject: [PATCH 03/23] feat: Custom default fonts (#547)

---
 crates/core/src/layout/layout_measurer.rs |  3 +-
 crates/core/src/layout/skia_measurer.rs   | 25 ++++++++++---
 crates/renderer/src/app.rs                | 10 ++++--
 crates/renderer/src/config.rs             | 36 ++++++++++++++++---
 crates/renderer/src/elements/paragraph.rs |  9 ++++-
 crates/renderer/src/lib.rs                |  3 +-
 crates/renderer/src/renderer.rs           | 10 +++++-
 crates/state/Cargo.toml                   |  1 -
 crates/state/src/font_style.rs            | 44 +++++++++++------------
 crates/testing/src/test_handler.rs        |  1 +
 examples/stateful_window.rs               |  2 ++
 11 files changed, 104 insertions(+), 40 deletions(-)

diff --git a/crates/core/src/layout/layout_measurer.rs b/crates/core/src/layout/layout_measurer.rs
index 391d9dfce..06475948a 100644
--- a/crates/core/src/layout/layout_measurer.rs
+++ b/crates/core/src/layout/layout_measurer.rs
@@ -9,11 +9,12 @@ pub fn process_layout(
     area: Area,
     font_collection: &mut FontCollection,
     scale_factor: f32,
+    default_fonts: &[String],
 ) {
     {
         let rdom = fdom.rdom();
         let mut dom_adapter = DioxusDOMAdapter::new_with_cache(rdom);
-        let skia_measurer = SkiaMeasurer::new(rdom, font_collection, scale_factor);
+        let skia_measurer = SkiaMeasurer::new(rdom, font_collection, default_fonts, scale_factor);
 
         // Finds the best Node from where to start measuring
         fdom.layout().find_best_root(&mut dom_adapter);
diff --git a/crates/core/src/layout/skia_measurer.rs b/crates/core/src/layout/skia_measurer.rs
index 802141ea5..b0f7d6f84 100644
--- a/crates/core/src/layout/skia_measurer.rs
+++ b/crates/core/src/layout/skia_measurer.rs
@@ -16,6 +16,7 @@ use torin::prelude::{LayoutMeasurer, LayoutNode, Node, Size2D};
 pub struct SkiaMeasurer<'a> {
     pub font_collection: &'a FontCollection,
     pub rdom: &'a DioxusDOM,
+    pub default_fonts: &'a [String],
     pub scale_factor: f32,
 }
 
@@ -23,11 +24,13 @@ impl<'a> SkiaMeasurer<'a> {
     pub fn new(
         rdom: &'a DioxusDOM,
         font_collection: &'a FontCollection,
+        default_fonts: &'a [String],
         scale_factor: f32,
     ) -> Self {
         Self {
             font_collection,
             rdom,
+            default_fonts,
             scale_factor,
         }
     }
@@ -45,14 +48,21 @@ impl<'a> LayoutMeasurer<NodeId> for SkiaMeasurer<'a> {
 
         match &*node_type {
             NodeType::Element(ElementNode { tag, .. }) if tag == &TagName::Label => {
-                let label = create_label(&node, area_size, self.font_collection);
+                let label =
+                    create_label(&node, area_size, self.font_collection, self.default_fonts);
                 let res = Size2D::new(label.longest_line(), label.height());
                 let mut map = SendAnyMap::new();
                 map.insert(CachedParagraph(label));
                 Some((res, Arc::new(map)))
             }
             NodeType::Element(ElementNode { tag, .. }) if tag == &TagName::Paragraph => {
-                let paragraph = create_paragraph(&node, area_size, self.font_collection, false);
+                let paragraph = create_paragraph(
+                    &node,
+                    area_size,
+                    self.font_collection,
+                    false,
+                    self.default_fonts,
+                );
                 let res = Size2D::new(paragraph.longest_line(), paragraph.height());
                 let mut map = SendAnyMap::new();
                 map.insert(CachedParagraph(paragraph));
@@ -91,6 +101,7 @@ pub fn create_label(
     node: &DioxusNode,
     area_size: &Size2D,
     font_collection: &FontCollection,
+    default_font_family: &[String],
 ) -> Paragraph {
     let font_style = &*node.get::<FontStyleState>().unwrap();
 
@@ -98,7 +109,8 @@ pub fn create_label(
     paragraph_style.set_text_align(font_style.text_align);
     paragraph_style.set_max_lines(font_style.max_lines);
     paragraph_style.set_replace_tab_characters(true);
-    paragraph_style.set_text_style(&font_style.into());
+    let text_style = font_style.text_style(default_font_family);
+    paragraph_style.set_text_style(&text_style);
 
     if let Some(ellipsis) = font_style.text_overflow.get_ellipsis() {
         paragraph_style.set_ellipsis(ellipsis);
@@ -123,6 +135,7 @@ pub fn create_paragraph(
     area_size: &Size2D,
     font_collection: &FontCollection,
     is_rendering: bool,
+    default_font_family: &[String],
 ) -> Paragraph {
     let font_style = &*node.get::<FontStyleState>().unwrap();
 
@@ -137,7 +150,8 @@ pub fn create_paragraph(
 
     let mut paragraph_builder = ParagraphBuilder::new(&paragraph_style, font_collection);
 
-    paragraph_builder.push_style(&font_style.into());
+    let text_style = font_style.text_style(default_font_family);
+    paragraph_builder.push_style(&text_style);
 
     for text_span in node.children() {
         match &*text_span.node_type() {
@@ -146,7 +160,8 @@ pub fn create_paragraph(
                 let text_node = *text_nodes.first().unwrap();
                 let text_node_type = &*text_node.node_type();
                 let font_style = text_span.get::<FontStyleState>().unwrap();
-                paragraph_builder.push_style(&TextStyle::from(&*font_style));
+                let text_style = font_style.text_style(default_font_family);
+                paragraph_builder.push_style(&text_style);
 
                 if let NodeType::Text(text) = text_node_type {
                     paragraph_builder.add_text(text);
diff --git a/crates/renderer/src/app.rs b/crates/renderer/src/app.rs
index 1a2fc457b..ca1849b66 100644
--- a/crates/renderer/src/app.rs
+++ b/crates/renderer/src/app.rs
@@ -24,7 +24,7 @@ use crate::{
     accessibility::AccessKitManager, event_loop::run_event_loop, renderer::render_skia,
     winit_waker::winit_waker,
 };
-use crate::{FontsConfig, HoveredNode, WindowEnv};
+use crate::{EmbeddedFonts, HoveredNode, WindowEnv};
 
 /// Manages the Application lifecycle
 pub struct App<State: 'static + Clone> {
@@ -48,17 +48,20 @@ pub struct App<State: 'static + Clone> {
     pub(crate) navigator_state: NavigatorState,
     pub(crate) measure_layout_on_next_render: bool,
     pub(crate) platform_information: Arc<Mutex<PlatformInformation>>,
+    pub(crate) default_fonts: Vec<String>,
 }
 
 impl<State: 'static + Clone> App<State> {
+    #[allow(clippy::too_many_arguments)]
     pub fn new(
         sdom: SafeDOM,
         vdom: VirtualDom,
         proxy: &EventLoopProxy<EventMessage>,
         mutations_notifier: Option<Arc<Notify>>,
         window_env: WindowEnv<State>,
-        fonts_config: FontsConfig,
+        fonts_config: EmbeddedFonts,
         mut plugins: PluginsManager,
+        default_fonts: Vec<String>,
     ) -> Self {
         let accessibility = AccessKitManager::new(&window_env.window, proxy.clone());
 
@@ -108,6 +111,7 @@ impl<State: 'static + Clone> App<State> {
             navigator_state: NavigatorState::new(NavigationMode::NotKeyboard),
             measure_layout_on_next_render: false,
             platform_information,
+            default_fonts,
         }
     }
 
@@ -302,6 +306,7 @@ impl<State: 'static + Clone> App<State> {
                 ))),
                 &mut self.font_collection,
                 scale_factor,
+                &self.default_fonts,
             );
 
             self.plugins
@@ -354,6 +359,7 @@ impl<State: 'static + Clone> App<State> {
                         render_wireframe,
                         &mut matrices,
                         &mut opacities,
+                        &self.default_fonts,
                         layout,
                     );
                 }
diff --git a/crates/renderer/src/config.rs b/crates/renderer/src/config.rs
index 3cc7f64fb..f105746f5 100644
--- a/crates/renderer/src/config.rs
+++ b/crates/renderer/src/config.rs
@@ -7,7 +7,7 @@ use image::io::Reader;
 use winit::window::{Icon, Window, WindowBuilder};
 
 pub type WindowBuilderHook = Box<dyn Fn(WindowBuilder) -> WindowBuilder>;
-pub type FontsConfig<'a> = Vec<(&'a str, &'a [u8])>;
+pub type EmbeddedFonts<'a> = Vec<(&'a str, &'a [u8])>;
 
 /// Configuration for a Window.
 pub struct WindowConfig<T: Clone> {
@@ -50,11 +50,22 @@ impl<T: Clone> Default for WindowConfig<T> {
 }
 
 /// Launch configuration.
-#[derive(Default)]
 pub struct LaunchConfig<'a, T: Clone> {
     pub window: WindowConfig<T>,
-    pub fonts: FontsConfig<'a>,
+    pub embedded_fonts: EmbeddedFonts<'a>,
     pub plugins: PluginsManager,
+    pub default_fonts: Vec<String>,
+}
+
+impl<'a, T: Clone> Default for LaunchConfig<'a, T> {
+    fn default() -> Self {
+        Self {
+            window: Default::default(),
+            embedded_fonts: Default::default(),
+            plugins: Default::default(),
+            default_fonts: vec!["Fira Sans".to_string()],
+        }
+    }
 }
 
 impl<'a, T: Clone> LaunchConfig<'a, T> {
@@ -99,6 +110,7 @@ pub struct LaunchConfigBuilder<'a, T> {
     pub(crate) on_exit: Option<WindowCallback>,
     pub(crate) plugins: PluginsManager,
     pub(crate) window_builder_hook: Option<WindowBuilderHook>,
+    pub(crate) default_fonts: Vec<String>,
 }
 
 impl<T> Default for LaunchConfigBuilder<'_, T> {
@@ -121,6 +133,7 @@ impl<T> Default for LaunchConfigBuilder<'_, T> {
             on_exit: None,
             plugins: PluginsManager::default(),
             window_builder_hook: None,
+            default_fonts: vec!["Fira Sans".to_string()],
         }
     }
 }
@@ -192,12 +205,24 @@ impl<'a, T: Clone> LaunchConfigBuilder<'a, T> {
         self
     }
 
-    /// Register a font.
+    /// Embed a font.
     pub fn with_font(mut self, font_name: &'a str, font: &'a [u8]) -> Self {
         self.fonts.push((font_name, font));
         self
     }
 
+    /// Clear default fonts.
+    pub fn without_default_fonts(mut self) -> Self {
+        self.default_fonts.clear();
+        self
+    }
+
+    /// Resgiter a default font.
+    pub fn with_default_font(mut self, font_name: &str) -> Self {
+        self.default_fonts.push(font_name.to_string());
+        self
+    }
+
     /// Specify the Window icon.
     pub fn with_icon(mut self, icon: Icon) -> Self {
         self.icon = Some(icon);
@@ -251,8 +276,9 @@ impl<'a, T: Clone> LaunchConfigBuilder<'a, T> {
                 on_exit: self.on_exit,
                 window_builder_hook: self.window_builder_hook,
             },
-            fonts: self.fonts,
+            embedded_fonts: self.fonts,
             plugins: self.plugins,
+            default_fonts: self.default_fonts,
         }
     }
 }
diff --git a/crates/renderer/src/elements/paragraph.rs b/crates/renderer/src/elements/paragraph.rs
index 8caad6c1f..529323f65 100644
--- a/crates/renderer/src/elements/paragraph.rs
+++ b/crates/renderer/src/elements/paragraph.rs
@@ -15,6 +15,7 @@ pub fn render_paragraph(
     dioxus_node: &DioxusNode,
     canvas: &Canvas,
     font_collection: &mut FontCollection,
+    default_fonts: &[String],
 ) {
     let (x, y) = area.origin.to_tuple();
     let node_cursor_settings = &*dioxus_node.get::<CursorSettings>().unwrap();
@@ -30,7 +31,13 @@ pub fn render_paragraph(
     };
 
     if node_cursor_settings.position.is_some() {
-        let paragraph = create_paragraph(dioxus_node, &area.size, font_collection, true);
+        let paragraph = create_paragraph(
+            dioxus_node,
+            &area.size,
+            font_collection,
+            true,
+            default_fonts,
+        );
         paint(&paragraph);
     } else {
         let paragraph = &data.as_ref().unwrap().get::<CachedParagraph>().unwrap().0;
diff --git a/crates/renderer/src/lib.rs b/crates/renderer/src/lib.rs
index 8db817516..7a75dc8b5 100644
--- a/crates/renderer/src/lib.rs
+++ b/crates/renderer/src/lib.rs
@@ -68,8 +68,9 @@ impl DesktopRenderer {
             &proxy,
             mutations_notifier,
             window_env,
-            config.fonts,
+            config.embedded_fonts,
             config.plugins,
+            config.default_fonts,
         );
 
         app.init_doms();
diff --git a/crates/renderer/src/renderer.rs b/crates/renderer/src/renderer.rs
index fd17f2716..6c2190349 100644
--- a/crates/renderer/src/renderer.rs
+++ b/crates/renderer/src/renderer.rs
@@ -36,6 +36,7 @@ pub fn render_skia(
     render_wireframe: bool,
     matrices: &mut Vec<(Matrix, Vec<NodeId>)>,
     opacities: &mut Vec<(f32, Vec<NodeId>)>,
+    default_fonts: &[String],
     layout: &Torin<NodeId>,
 ) {
     let area = layout_node.visible_area();
@@ -109,7 +110,14 @@ pub fn render_skia(
                 render_label(&area, data, canvas);
             }
             TagName::Paragraph => {
-                render_paragraph(&area, data, dioxus_node, canvas, font_collection);
+                render_paragraph(
+                    &area,
+                    data,
+                    dioxus_node,
+                    canvas,
+                    font_collection,
+                    default_fonts,
+                );
             }
             TagName::Svg => {
                 render_svg(&area, dioxus_node, canvas, font_manager);
diff --git a/crates/state/Cargo.toml b/crates/state/Cargo.toml
index 31e92e7a3..dbadd0b68 100644
--- a/crates/state/Cargo.toml
+++ b/crates/state/Cargo.toml
@@ -33,5 +33,4 @@ rustc-hash= { workspace = true }
 
 uuid = { workspace = true }
 bytes = "1.5.0"
-smallvec = { workspace = true }
 serde_json = "1.0.107"
diff --git a/crates/state/src/font_style.rs b/crates/state/src/font_style.rs
index d8a52d95d..9154fe417 100644
--- a/crates/state/src/font_style.rs
+++ b/crates/state/src/font_style.rs
@@ -9,7 +9,6 @@ use dioxus_native_core::{
 };
 use dioxus_native_core_macro::partial_derive_state;
 use freya_engine::prelude::*;
-use smallvec::{smallvec, SmallVec};
 use torin::torin::Torin;
 
 use crate::{CustomAttributeValues, ExtSplit, Parse, TextOverflow};
@@ -18,7 +17,7 @@ use crate::{CustomAttributeValues, ExtSplit, Parse, TextOverflow};
 pub struct FontStyleState {
     pub color: Color,
     pub text_shadows: Vec<TextShadow>,
-    pub font_family: SmallVec<[String; 2]>,
+    pub font_family: Vec<String>,
     pub font_size: f32,
     pub font_slant: Slant,
     pub font_weight: Weight,
@@ -39,31 +38,32 @@ impl FontStyleState {
             ..FontStyleState::default()
         }
     }
-}
 
-impl From<&FontStyleState> for TextStyle {
-    fn from(value: &FontStyleState) -> Self {
+    pub fn text_style(&self, default_font_family: &[String]) -> TextStyle {
         let mut text_style = TextStyle::new();
+        let mut font_family = self.font_family.clone();
+
+        font_family.extend_from_slice(default_font_family);
 
         text_style
-            .set_color(value.color)
+            .set_color(self.color)
             .set_font_style(freya_engine::prelude::FontStyle::new(
-                value.font_weight,
-                value.font_width,
-                value.font_slant,
+                self.font_weight,
+                self.font_width,
+                self.font_slant,
             ))
-            .set_font_size(value.font_size)
-            .set_font_families(&value.font_family)
-            .set_word_spacing(value.word_spacing)
-            .set_letter_spacing(value.letter_spacing)
+            .set_font_size(self.font_size)
+            .set_font_families(&font_family)
+            .set_word_spacing(self.word_spacing)
+            .set_letter_spacing(self.letter_spacing)
             .set_height_override(true)
-            .set_height(value.line_height);
+            .set_height(self.line_height);
 
-        for shadow in value.text_shadows.iter() {
+        for shadow in self.text_shadows.iter() {
             text_style.add_shadow(*shadow);
         }
 
-        text_style.set_decoration(&value.decoration);
+        text_style.set_decoration(&self.decoration);
 
         text_style
     }
@@ -74,7 +74,7 @@ impl Default for FontStyleState {
         Self {
             color: Color::BLACK,
             text_shadows: Vec::new(),
-            font_family: smallvec!["Fira Sans".to_string()],
+            font_family: Vec::new(),
             font_size: 16.0,
             font_weight: Weight::NORMAL,
             font_slant: Slant::Upright,
@@ -163,12 +163,10 @@ impl State<CustomAttributeValues> for FontStyleState {
                     AttributeName::FontFamily => {
                         if let Some(value) = attr.value.as_text() {
                             let families = value.split(',');
-                            font_style.font_family = SmallVec::from(
-                                families
-                                    .into_iter()
-                                    .map(|f| f.trim().to_string())
-                                    .collect::<Vec<String>>(),
-                            );
+                            font_style.font_family = families
+                                .into_iter()
+                                .map(|f| f.trim().to_string())
+                                .collect::<Vec<String>>();
                         }
                     }
                     AttributeName::FontSize => {
diff --git a/crates/testing/src/test_handler.rs b/crates/testing/src/test_handler.rs
index bc2d83084..20b3b5fbe 100644
--- a/crates/testing/src/test_handler.rs
+++ b/crates/testing/src/test_handler.rs
@@ -143,6 +143,7 @@ impl TestingHandler {
             },
             &mut self.font_collection,
             SCALE_FACTOR as f32,
+            &["Fira Sans".to_string()],
         );
 
         let dom = &self.utils.sdom().get_mut();
diff --git a/examples/stateful_window.rs b/examples/stateful_window.rs
index a6e0a45ec..4cd9fcacf 100644
--- a/examples/stateful_window.rs
+++ b/examples/stateful_window.rs
@@ -11,6 +11,8 @@ fn main() {
         LaunchConfig::builder()
             .with_title("Window with state")
             .with_state(10)
+            .without_default_fonts()
+            .with_default_font("Impact")
             .build(),
     );
 }

From 123f1195b4b2a66188d65748d587b74ebec1f189 Mon Sep 17 00:00:00 2001
From: Marc Espin <mespinsanz@gmail.com>
Date: Thu, 28 Mar 2024 22:03:49 +0100
Subject: [PATCH 04/23] feat: Skia-safe v0.72 (#549)

* feat: Skia-safe v0.72

* fix

* fix render_canvas example
---
 Cargo.toml                    |  2 +-
 crates/renderer/src/window.rs |  2 +-
 examples/render_canvas.rs     | 10 +++++++---
 3 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/Cargo.toml b/Cargo.toml
index 206d2b9a6..51ea3806b 100644
--- a/Cargo.toml
+++ b/Cargo.toml
@@ -50,7 +50,7 @@ dioxus-hot-reload = { version = "0.5.0-alpha.0", features = ["file_watcher"], de
 dioxus-router = { version = "0.5.0-alpha.0", default-features = false }
 dioxus-std = { git = "https://github.com/marc2332/dioxus-std", rev = "4d8ae33b94537d54471cd924c32f03c1d949430f", features = ["clipboard"]}
 
-skia-safe = { version = "0.70.0", features = ["gl", "textlayout", "svg"] }
+skia-safe = { version = "0.72.0", features = ["gl", "textlayout", "svg"] }
 
 gl = "0.14.0"
 glutin = "0.31.2"
diff --git a/crates/renderer/src/window.rs b/crates/renderer/src/window.rs
index 382444b5d..df620c38b 100644
--- a/crates/renderer/src/window.rs
+++ b/crates/renderer/src/window.rs
@@ -154,7 +154,7 @@ impl<T: Clone> WindowEnv<T> {
         .expect("Could not create interface");
 
         let mut gr_context =
-            DirectContext::new_gl(Some(interface), None).expect("Could not create direct context");
+            DirectContext::new_gl(interface, None).expect("Could not create direct context");
 
         let fb_info = {
             let mut fboid: GLint = 0;
diff --git a/examples/render_canvas.rs b/examples/render_canvas.rs
index c8563289e..54ed5d1c2 100644
--- a/examples/render_canvas.rs
+++ b/examples/render_canvas.rs
@@ -4,7 +4,7 @@
 )]
 
 use freya::{common::EventMessage, prelude::*};
-use skia_safe::{Color, Font, FontStyle, Paint, Typeface};
+use skia_safe::{Color, Font, FontStyle, Paint};
 
 fn main() {
     launch(app);
@@ -19,14 +19,18 @@ fn app() -> Element {
     });
 
     let canvas = use_canvas(&*state.read(), |state| {
-        Box::new(move |canvas, _, region| {
+        Box::new(move |canvas, font_collection, region| {
             canvas.translate((region.min_x(), region.min_y()));
 
             let mut text_paint = Paint::default();
             text_paint.set_anti_alias(true);
             text_paint.set_color(Color::WHITE);
+            let typefaces =
+                font_collection.find_typefaces(&["Times New Roman"], FontStyle::default());
             let font = Font::new(
-                Typeface::from_name("Inter", FontStyle::default()).unwrap(),
+                typefaces
+                    .first()
+                    .expect("'Times New Roman' font not found."),
                 50.0,
             );
 

From 37b0920dddfca8da3f82b0e5ef9cc9fb638405b8 Mon Sep 17 00:00:00 2001
From: Marc Espin <mespinsanz@gmail.com>
Date: Thu, 28 Mar 2024 22:03:57 +0100
Subject: [PATCH 05/23] feat: Simplified `use_animation` (#551)

* feat: Simplified use_animation

* fixes

* fix
---
 crates/components/src/accordion.rs     |   6 +-
 crates/components/src/loader.rs        |   2 +-
 crates/components/src/snackbar.rs      |   8 +-
 crates/components/src/switch.rs        |  10 +-
 crates/freya/src/_docs/animating.rs    |  10 +-
 crates/hooks/src/use_animation.rs      | 127 ++++++++++++++-----------
 crates/hooks/tests/use_animation.rs    |  16 ++--
 examples/animation.rs                  |   7 +-
 examples/performance_overlay_plugin.rs |   8 +-
 examples/progress_bar.rs               |   4 +-
 examples/snackbar.rs                   |   6 +-
 11 files changed, 111 insertions(+), 93 deletions(-)

diff --git a/crates/components/src/accordion.rs b/crates/components/src/accordion.rs
index 0c017ad8f..80d980de1 100644
--- a/crates/components/src/accordion.rs
+++ b/crates/components/src/accordion.rs
@@ -49,7 +49,7 @@ pub fn Accordion(props: AccordionProps) -> Element {
     let mut status = use_signal(AccordionStatus::default);
     let platform = use_platform();
 
-    let animation_value = animation.read().get().read().as_f32();
+    let animation_value = animation.get().read().as_f32();
     let AccordionTheme {
         background,
         color,
@@ -59,9 +59,9 @@ pub fn Accordion(props: AccordionProps) -> Element {
     let onclick = move |_: MouseEvent| {
         open.toggle();
         if *open.read() {
-            animation.read().start();
+            animation.start();
         } else {
-            animation.read().reverse();
+            animation.reverse();
         }
     };
 
diff --git a/crates/components/src/loader.rs b/crates/components/src/loader.rs
index a46e2f173..e18c28bdc 100644
--- a/crates/components/src/loader.rs
+++ b/crates/components/src/loader.rs
@@ -27,7 +27,7 @@ pub fn Loader(props: LoaderProps) -> Element {
 
     let LoaderTheme { primary_color } = theme;
 
-    let degrees = anim.read().get().read().as_f32();
+    let degrees = anim.get().read().as_f32();
 
     rsx!(svg {
         rotate: "{degrees}deg",
diff --git a/crates/components/src/snackbar.rs b/crates/components/src/snackbar.rs
index bb9570bab..eceafd495 100644
--- a/crates/components/src/snackbar.rs
+++ b/crates/components/src/snackbar.rs
@@ -55,13 +55,13 @@ pub fn SnackBar(
 
     use_effect(move || {
         if *show.read() {
-            animation.read().start();
-        } else if animation.read().peek_has_run_yet() {
-            animation.read().reverse();
+            animation.start();
+        } else if animation.peek_has_run_yet() {
+            animation.reverse();
         }
     });
 
-    let offset_y = animation.read().get().read().as_f32();
+    let offset_y = animation.get().read().as_f32();
 
     rsx!(
         rect {
diff --git a/crates/components/src/switch.rs b/crates/components/src/switch.rs
index d63afe090..89d45a311 100644
--- a/crates/components/src/switch.rs
+++ b/crates/components/src/switch.rs
@@ -112,13 +112,13 @@ pub fn Switch(props: SwitchProps) -> Element {
     let (offset_x, background, circle) = {
         if props.enabled {
             (
-                animation.read().get().read().as_f32(),
+                animation.get().read().as_f32(),
                 theme.enabled_background,
                 theme.enabled_thumb_background,
             )
         } else {
             (
-                animation.read().get().read().as_f32(),
+                animation.get().read().as_f32(),
                 theme.background,
                 theme.thumb_background,
             )
@@ -136,9 +136,9 @@ pub fn Switch(props: SwitchProps) -> Element {
 
     use_effect(use_reactive(&props.enabled, move |enabled| {
         if enabled {
-            animation.read().start();
-        } else if animation.read().peek_has_run_yet() {
-            animation.read().reverse();
+            animation.start();
+        } else if animation.peek_has_run_yet() {
+            animation.reverse();
         }
     }));
 
diff --git a/crates/freya/src/_docs/animating.rs b/crates/freya/src/_docs/animating.rs
index b78786a4c..c80db07e2 100644
--- a/crates/freya/src/_docs/animating.rs
+++ b/crates/freya/src/_docs/animating.rs
@@ -17,12 +17,11 @@
 //! fn app() -> Element {
 //!     let animation = use_animation(|ctx| ctx.with(AnimNum::new(0., 100.).time(50)));
 //!
-//!     let animations = animation.read();
-//!     let width = animations.get().read().as_f32();
+//!     let width = animation.get().read().as_f32();
 //!
 //!     use_hook(move || {
 //!         // Start animation as soon as this component runs.
-//!         animation.read().start();
+//!         animation.start();
 //!     });
 //!
 //!     rsx!(
@@ -47,11 +46,10 @@
 //!         )
 //!     });
 //!
-//!     let animations = animation.read();
-//!     let (width, color) = animations.get();
+//!     let (width, color) = animation.get();
 //!
 //!     use_hook(move || {
-//!         animation.read().start();
+//!         animation.start();
 //!     });
 //!
 //!     rsx!(
diff --git a/crates/hooks/src/use_animation.rs b/crates/hooks/src/use_animation.rs
index 2a4b85b51..cc0e81a54 100644
--- a/crates/hooks/src/use_animation.rs
+++ b/crates/hooks/src/use_animation.rs
@@ -1,14 +1,14 @@
 use std::time::Duration;
 
-use dioxus_core::prelude::{spawn, Task};
-use dioxus_hooks::{use_memo, use_reactive, Dependency};
+use dioxus_core::prelude::{spawn, use_hook, Task};
+use dioxus_hooks::{use_memo, use_reactive, use_signal, Dependency};
 use dioxus_signals::{Memo, ReadOnlySignal, Readable, Signal, Writable};
 use easer::functions::*;
 use freya_engine::prelude::Color;
 use freya_node_state::Parse;
 use tokio::time::Instant;
 
-use crate::UsePlatform;
+use crate::{use_platform, UsePlatform};
 
 pub fn apply_value(
     origin: f32,
@@ -387,37 +387,21 @@ impl AnimDirection {
 }
 
 /// Animate your elements. Use [`use_animation`] to use this.
-#[derive(PartialEq)]
-pub struct UseAnimator<Animated> {
-    value: Animated,
-    ctx: Context,
-    platform: UsePlatform,
-    is_running: Signal<bool>,
-    has_run_yet: Signal<bool>,
-    task: Signal<Option<Task>>,
+#[derive(PartialEq, Clone)]
+pub struct UseAnimator<Animated: PartialEq + Clone + 'static> {
+    pub(crate) value_and_ctx: Memo<(Animated, Context)>,
+    pub(crate) platform: UsePlatform,
+    pub(crate) is_running: Signal<bool>,
+    pub(crate) has_run_yet: Signal<bool>,
+    pub(crate) task: Signal<Option<Task>>,
 }
 
-impl<Animated> UseAnimator<Animated> {
-    pub fn new(value: Animated, ctx: Context, platform: UsePlatform) -> Self {
-        let animator = Self {
-            value,
-            ctx,
-            platform,
-            is_running: Signal::default(),
-            task: Signal::default(),
-            has_run_yet: Signal::default(),
-        };
-
-        if animator.ctx.auto_start {
-            animator.run(AnimDirection::Forward);
-        }
+impl<T: PartialEq + Clone + 'static> Copy for UseAnimator<T> {}
 
-        animator
-    }
-
-    /// Get the containing animated value.
-    pub fn get(&self) -> &Animated {
-        &self.value
+impl<Animated: PartialEq + Clone + 'static> UseAnimator<Animated> {
+    /// Get the animated value.
+    pub fn get(&self) -> Animated {
+        self.value_and_ctx.read().0.clone()
     }
 
     /// Reset the animation to the default state.
@@ -428,7 +412,7 @@ impl<Animated> UseAnimator<Animated> {
             task.cancel();
         }
 
-        for value in &self.ctx.animated_values {
+        for value in &self.value_and_ctx.read().1.animated_values {
             let mut value = *value;
             value.write().prepare(AnimDirection::Forward);
         }
@@ -461,12 +445,13 @@ impl<Animated> UseAnimator<Animated> {
 
     /// Run the animation with a given [`AnimDirection`]
     pub fn run(&self, mut direction: AnimDirection) {
+        let ctx = &self.value_and_ctx.peek().1;
         let platform = self.platform;
         let mut is_running = self.is_running;
         let mut ticker = platform.new_ticker();
-        let mut values = self.ctx.animated_values.clone();
+        let mut values = ctx.animated_values.clone();
         let mut has_run_yet = self.has_run_yet;
-        let reverse = self.ctx.reverse;
+        let reverse = ctx.reverse;
         let mut task = self.task;
 
         // Cancel previous animations
@@ -542,11 +527,10 @@ impl<Animated> UseAnimator<Animated> {
 /// fn app() -> Element {
 ///     let animation = use_animation(|ctx| ctx.with(AnimNum::new(0., 100.).time(50)));
 ///
-///     let animations = animation.read();
-///     let width = animations.get().read().as_f32();
+///     let width = animation.get().read().as_f32();
 ///
 ///     use_hook(move || {
-///         animation.read().start();
+///         animation.start();
 ///     });
 ///
 ///     rsx!(
@@ -571,11 +555,10 @@ impl<Animated> UseAnimator<Animated> {
 ///         )
 ///     });
 ///
-///     let animations = animation.read();
-///     let (width, color) = animations.get();
+///     let (width, color) = animation.get();
 ///
 ///     use_hook(move || {
-///         animation.read().start();
+///         animation.start();
 ///     });
 ///
 ///     rsx!(
@@ -588,28 +571,66 @@ impl<Animated> UseAnimator<Animated> {
 /// }
 /// ```
 ///
-pub fn use_animation<Animated: PartialEq + 'static>(
-    run: impl Fn(&mut Context) -> Animated + 'static,
-) -> Memo<UseAnimator<Animated>> {
-    use_memo(move || {
+pub fn use_animation<Animated: PartialEq + Clone + 'static>(
+    run: impl Fn(&mut Context) -> Animated + Clone + 'static,
+) -> UseAnimator<Animated> {
+    let platform = use_platform();
+    let is_running = use_signal(|| false);
+    let has_run_yet = use_signal(|| false);
+    let task = use_signal(|| None);
+
+    let value_and_ctx = use_memo(move || {
         let mut ctx = Context::default();
-        let value = run(&mut ctx);
+        (run(&mut ctx), ctx)
+    });
+
+    let animator = UseAnimator {
+        value_and_ctx,
+        platform,
+        is_running,
+        has_run_yet,
+        task,
+    };
+
+    use_hook(move || {
+        if animator.value_and_ctx.read().1.auto_start {
+            animator.run(AnimDirection::Forward);
+        }
+    });
 
-        UseAnimator::new(value, ctx, UsePlatform::new())
-    })
+    animator
 }
 
-pub fn use_animation_with_dependencies<Animated: PartialEq + 'static, D: Dependency>(
+pub fn use_animation_with_dependencies<Animated: PartialEq + Clone + 'static, D: Dependency>(
     deps: D,
     run: impl Fn(&mut Context, D::Out) -> Animated + 'static,
-) -> Memo<UseAnimator<Animated>>
+) -> UseAnimator<Animated>
 where
     D::Out: 'static + Clone,
 {
-    use_memo(use_reactive(deps, move |vals| {
+    let platform = use_platform();
+    let is_running = use_signal(|| false);
+    let has_run_yet = use_signal(|| false);
+    let task = use_signal(|| None);
+
+    let value_and_ctx = use_memo(use_reactive(deps, move |vals| {
         let mut ctx = Context::default();
-        let value = run(&mut ctx, vals);
+        (run(&mut ctx, vals), ctx)
+    }));
+
+    let animator = UseAnimator {
+        value_and_ctx,
+        platform,
+        is_running,
+        has_run_yet,
+        task,
+    };
+
+    use_hook(move || {
+        if animator.value_and_ctx.read().1.auto_start {
+            animator.run(AnimDirection::Forward);
+        }
+    });
 
-        UseAnimator::new(value, ctx, UsePlatform::new())
-    }))
+    animator
 }
diff --git a/crates/hooks/tests/use_animation.rs b/crates/hooks/tests/use_animation.rs
index 7dac59754..db58a7fbb 100644
--- a/crates/hooks/tests/use_animation.rs
+++ b/crates/hooks/tests/use_animation.rs
@@ -13,10 +13,10 @@ pub async fn track_progress() {
     fn use_animation_app() -> Element {
         let animation = use_animation(|ctx| ctx.with(AnimNum::new(0., 100.).time(50)));
 
-        let progress = animation.read().get().read().as_f32();
+        let progress = animation.get().read().as_f32();
 
         use_hook(|| {
-            animation.read().start();
+            animation.start();
         });
 
         rsx!(rect {
@@ -59,17 +59,17 @@ pub async fn reverse_progress() {
     fn use_animation_app() -> Element {
         let animation = use_animation(|ctx| ctx.with(AnimNum::new(10., 100.).time(50)));
 
-        let progress = animation.read().get().read().as_f32();
+        let progress = animation.get().read().as_f32();
 
         use_hook(|| {
-            animation.read().start();
+            animation.start();
         });
 
         rsx!(rect {
             background: "white",
             height: "100%",
             onclick: move |_| {
-                animation.read().reverse();
+                animation.reverse();
             },
             width: "{progress}",
         })
@@ -119,10 +119,10 @@ pub async fn animate_color() {
         let animation =
             use_animation(|ctx| ctx.with(AnimColor::new("red", "rgb(50, 100, 200)").time(50)));
 
-        let progress = animation.read().get().read().as_string();
+        let progress = animation.get().read().as_string();
 
         use_hook(|| {
-            animation.read().start();
+            animation.start();
         });
 
         rsx!(rect {
@@ -175,7 +175,7 @@ pub async fn auto_start() {
             ctx.with(AnimNum::new(10., 100.).time(50))
         });
 
-        let progress = animation.read().get().read().as_f32();
+        let progress = animation.get().read().as_f32();
 
         rsx!(rect {
             background: "white",
diff --git a/examples/animation.rs b/examples/animation.rs
index 354ba6bf3..7f413b23b 100644
--- a/examples/animation.rs
+++ b/examples/animation.rs
@@ -11,7 +11,7 @@ fn main() {
 
 fn app() -> Element {
     let mut toggle = use_signal(|| true);
-    let animator = use_animation(|ctx| {
+    let animations = use_animation(|ctx| {
         (
             ctx.with(
                 AnimNum::new(100., 200.)
@@ -39,7 +39,6 @@ fn app() -> Element {
         )
     });
 
-    let animations = animator.read();
     let (size, color, rotate, radius) = animations.get();
 
     rsx!(
@@ -50,9 +49,9 @@ fn app() -> Element {
             width: "100%",
             onclick: move |_| {
                 if *toggle.peek() {
-                    animator.read().start();
+                    animations.start();
                 } else {
-                    animator.read().reverse();
+                    animations.reverse();
                 }
                 toggle.toggle();
             },
diff --git a/examples/performance_overlay_plugin.rs b/examples/performance_overlay_plugin.rs
index a200dc417..8a10db426 100644
--- a/examples/performance_overlay_plugin.rs
+++ b/examples/performance_overlay_plugin.rs
@@ -29,13 +29,13 @@ fn app() -> Element {
         )
     });
 
-    let progress = animation.read().get().read().as_f32();
+    let progress = animation.get().read().as_f32();
 
-    if !animation.read().is_running() {
+    if !animation.is_running() {
         if progress == 15.0 {
-            animation.read().start();
+            animation.start();
         } else if progress == TARGET {
-            animation.read().reverse();
+            animation.reverse();
         }
     }
 
diff --git a/examples/progress_bar.rs b/examples/progress_bar.rs
index 13688cbb3..f9d7d06ec 100644
--- a/examples/progress_bar.rs
+++ b/examples/progress_bar.rs
@@ -19,10 +19,10 @@ fn app() -> Element {
                 .function(Function::Sine),
         )
     });
-    let progress = animation.read().get().read().as_f32();
+    let progress = animation.get().read().as_f32();
 
     let set_to_max = move |_| {
-        animation.read().start();
+        animation.start();
     };
 
     let onmoved = move |value: f64| {
diff --git a/examples/snackbar.rs b/examples/snackbar.rs
index f1d43eb32..f02374d58 100644
--- a/examples/snackbar.rs
+++ b/examples/snackbar.rs
@@ -18,7 +18,7 @@ fn app() -> Element {
                 .function(Function::Sine),
         )
     });
-    let progress = animation.read().get().read().as_f32();
+    let progress = animation.get().read().as_f32();
     let mut show = use_signal(|| false);
 
     rsx!(
@@ -32,9 +32,9 @@ fn app() -> Element {
                 onclick: move |_| {
                     show.toggle();
                     if *show.read() {
-                        animation.read().start();
+                        animation.start();
                     } else {
-                        animation.read().reset();
+                        animation.reset();
                     }
                 },
                 label { "Install" }

From a9c52733f411fc177aa88c10a2e3220ea6ec8bcc Mon Sep 17 00:00:00 2001
From: Marc Espin <mespinsanz@gmail.com>
Date: Thu, 28 Mar 2024 22:04:06 +0100
Subject: [PATCH 06/23] fix: Remove unnecessary node id assert in layout state
 (#543)

---
 crates/state/src/layout.rs | 2 --
 1 file changed, 2 deletions(-)

diff --git a/crates/state/src/layout.rs b/crates/state/src/layout.rs
index 5cd2a8ed4..0c00fbf95 100644
--- a/crates/state/src/layout.rs
+++ b/crates/state/src/layout.rs
@@ -24,7 +24,6 @@ pub struct LayoutState {
     pub padding: Gaps,
     pub margin: Gaps,
     pub direction: DirectionMode,
-    pub node_id: NodeId,
     pub offset_y: Length,
     pub offset_x: Length,
     pub main_alignment: Alignment,
@@ -246,7 +245,6 @@ impl State<CustomAttributeValues> for LayoutState {
             || (layout.maximum_width != self.maximum_width)
             || (layout.maximum_height != self.maximum_height)
             || (layout.padding != self.padding)
-            || (node_view.node_id() != self.node_id)
             || (layout.direction != self.direction)
             || (layout.offset_x != self.offset_x)
             || (layout.offset_y != self.offset_y)

From aa43895ffc8f58e84a57ffaf6a1f9b4fdc54b9aa Mon Sep 17 00:00:00 2001
From: Marc Espin <mespinsanz@gmail.com>
Date: Thu, 28 Mar 2024 22:05:53 +0100
Subject: [PATCH 07/23] feat: File drop support (#530)

* feat: File drop support

* fix

* tweaks and tests

* Update file_drop.rs

* docs

* typo

* Update onglobalfilehovercancelled.md
---
 crates/core/src/events/dom_event.rs           | 20 ++++-
 crates/core/src/events/event_name.rs          |  2 +-
 crates/core/src/events/events_measurer.rs     |  1 +
 crates/core/src/events/platform_event.rs      | 10 +++
 crates/core/tests/filedrop_events.rs          | 78 +++++++++++++++++++
 .../elements/src/_docs/events/onfiledrop.md   | 19 +++++
 .../src/_docs/events/onglobalfilehover.md     | 19 +++++
 .../events/onglobalfilehovercancelled.md      | 19 +++++
 crates/elements/src/definitions.rs            | 11 +++
 crates/elements/src/events.rs                 |  2 +
 crates/elements/src/events/file.rs            | 15 ++++
 crates/native-core/src/events.rs              | 13 ++++
 crates/renderer/src/event_loop.rs             | 26 +++++++
 examples/file_drop.rs                         | 50 ++++++++++++
 14 files changed, 283 insertions(+), 2 deletions(-)
 create mode 100644 crates/core/tests/filedrop_events.rs
 create mode 100644 crates/elements/src/_docs/events/onfiledrop.md
 create mode 100644 crates/elements/src/_docs/events/onglobalfilehover.md
 create mode 100644 crates/elements/src/_docs/events/onglobalfilehovercancelled.md
 create mode 100644 crates/elements/src/events/file.rs
 create mode 100644 examples/file_drop.rs

diff --git a/crates/core/src/events/dom_event.rs b/crates/core/src/events/dom_event.rs
index 3fa95695a..927626884 100644
--- a/crates/core/src/events/dom_event.rs
+++ b/crates/core/src/events/dom_event.rs
@@ -4,7 +4,9 @@ use dioxus_core::ElementId;
 use dioxus_native_core::NodeId;
 use freya_elements::{
     elements::PlatformEventData,
-    events::{pointer::PointerType, KeyboardData, MouseData, PointerData, TouchData, WheelData},
+    events::{
+        pointer::PointerType, FileData, KeyboardData, MouseData, PointerData, TouchData, WheelData,
+    },
 };
 use torin::prelude::*;
 
@@ -136,6 +138,20 @@ impl DomEvent {
                     ))
                 };
 
+                Self {
+                    node_id,
+                    element_id,
+                    name,
+                    data: event_data,
+                    bubbles,
+                    layer,
+                }
+            }
+            PlatformEvent::File {
+                name, file_path, ..
+            } => {
+                let event_data = DomEventData::File(FileData { file_path });
+
                 Self {
                     node_id,
                     element_id,
@@ -157,6 +173,7 @@ pub enum DomEventData {
     Wheel(WheelData),
     Touch(TouchData),
     Pointer(PointerData),
+    File(FileData),
 }
 
 impl DomEventData {
@@ -167,6 +184,7 @@ impl DomEventData {
             DomEventData::Wheel(w) => Rc::new(PlatformEventData::new(Box::new(w))),
             DomEventData::Touch(t) => Rc::new(PlatformEventData::new(Box::new(t))),
             DomEventData::Pointer(p) => Rc::new(PlatformEventData::new(Box::new(p))),
+            DomEventData::File(fd) => Rc::new(PlatformEventData::new(Box::new(fd))),
         }
     }
 }
diff --git a/crates/core/src/events/event_name.rs b/crates/core/src/events/event_name.rs
index 11c43b604..0a1671907 100644
--- a/crates/core/src/events/event_name.rs
+++ b/crates/core/src/events/event_name.rs
@@ -1 +1 @@
-pub use dioxus_native_core::events::*;
+pub use dioxus_native_core::events::*;
diff --git a/crates/core/src/events/events_measurer.rs b/crates/core/src/events/events_measurer.rs
index c79dd9e58..e7158b565 100644
--- a/crates/core/src/events/events_measurer.rs
+++ b/crates/core/src/events/events_measurer.rs
@@ -94,6 +94,7 @@ pub fn measure_potential_event_listeners(events: &EventsQueue, fdom: &FreyaDOM)
                             PlatformEvent::Mouse { name, cursor, .. } => Some((name, cursor)),
                             PlatformEvent::Wheel { name, cursor, .. } => Some((name, cursor)),
                             PlatformEvent::Touch { name, location, .. } => Some((name, location)),
+                            PlatformEvent::File { name, cursor, .. } => Some((name, cursor)),
                             _ => None,
                         };
                         if let Some((name, cursor)) = data {
diff --git a/crates/core/src/events/platform_event.rs b/crates/core/src/events/platform_event.rs
index 09b0eb4d1..15f9dbed5 100644
--- a/crates/core/src/events/platform_event.rs
+++ b/crates/core/src/events/platform_event.rs
@@ -1,3 +1,5 @@
+use std::path::PathBuf;
+
 use freya_elements::events::keyboard::{Code, Key, Modifiers};
 use torin::prelude::*;
 use winit::event::{Force, MouseButton, TouchPhase};
@@ -34,6 +36,12 @@ pub enum PlatformEvent {
         phase: TouchPhase,
         force: Option<Force>,
     },
+    /// A File event.
+    File {
+        name: EventName,
+        cursor: CursorPoint,
+        file_path: Option<PathBuf>,
+    },
 }
 
 impl PlatformEvent {
@@ -43,6 +51,7 @@ impl PlatformEvent {
             Self::Wheel { name, .. } => *name,
             Self::Keyboard { name, .. } => *name,
             Self::Touch { name, .. } => *name,
+            Self::File { name, .. } => *name,
         }
     }
 
@@ -52,6 +61,7 @@ impl PlatformEvent {
             Self::Wheel { name, .. } => *name = new_name,
             Self::Keyboard { name, .. } => *name = new_name,
             Self::Touch { name, .. } => *name = new_name,
+            Self::File { name, .. } => *name = new_name,
         }
     }
 }
diff --git a/crates/core/tests/filedrop_events.rs b/crates/core/tests/filedrop_events.rs
new file mode 100644
index 000000000..d99458d7f
--- /dev/null
+++ b/crates/core/tests/filedrop_events.rs
@@ -0,0 +1,78 @@
+use std::{path::PathBuf, str::FromStr};
+
+use dioxus::prelude::*;
+use freya_core::prelude::*;
+use freya_elements::elements as dioxus_elements;
+use freya_engine::prelude::Color;
+use freya_node_state::Fill;
+use freya_testing::launch_test;
+
+#[tokio::test]
+pub async fn filedrop_events() {
+    #[derive(PartialEq)]
+    enum Status {
+        Idle,
+        Hovering,
+    }
+
+    fn filedrop_events_app() -> Element {
+        let mut path = use_signal::<Option<String>>(|| None);
+        let mut status = use_signal(|| Status::Idle);
+
+        let msg = path.read().clone().unwrap_or("Default".to_string());
+
+        let background = if *status.read() == Status::Hovering {
+            "red"
+        } else {
+            "blue"
+        };
+
+        rsx!(
+            rect {
+                height: "100%",
+                width: "100%",
+                background: "{background}",
+                onglobalfilehover: move |_| status.set(Status::Hovering),
+                onglobalfilehovercancelled: move |_| status.set(Status::Idle),
+                onfiledrop: move |e| {
+                    status.set(Status::Idle);
+                    path.set(Some(e.file_path.as_ref().unwrap().to_string_lossy().to_string()))
+                },
+                label {
+                    "{msg}"
+                }
+            }
+        )
+    }
+
+    let mut utils = launch_test(filedrop_events_app);
+
+    let root = utils.root();
+
+    assert_eq!(root.get(0).get(0).get(0).text(), Some("Default"));
+    assert_eq!(root.get(0).style().background, Fill::Color(Color::BLUE));
+
+    utils.push_event(PlatformEvent::File {
+        name: EventName::GlobalFileHover,
+        cursor: (5., 5.).into(),
+        file_path: None,
+    });
+
+    utils.wait_for_update().await;
+
+    assert_eq!(root.get(0).style().background, Fill::Color(Color::RED));
+
+    utils.push_event(PlatformEvent::File {
+        name: EventName::FileDrop,
+        cursor: (5., 5.).into(),
+        file_path: Some(PathBuf::from_str("/nice/path/right.rs").unwrap()),
+    });
+
+    utils.wait_for_update().await;
+
+    assert_eq!(
+        root.get(0).get(0).get(0).text(),
+        Some("/nice/path/right.rs")
+    );
+    assert_eq!(root.get(0).style().background, Fill::Color(Color::BLUE));
+}
diff --git a/crates/elements/src/_docs/events/onfiledrop.md b/crates/elements/src/_docs/events/onfiledrop.md
new file mode 100644
index 000000000..d55e05308
--- /dev/null
+++ b/crates/elements/src/_docs/events/onfiledrop.md
@@ -0,0 +1,19 @@
+The `filedrop` event fires when the user drops a file over the element.
+
+Event Data: [`FileData`](crate::events::FileData)
+
+### Example
+
+```rust, no_run
+# use freya::prelude::*;
+fn app() -> Element {
+    rsx!(
+        rect {
+            width: "100%",
+            height: "100%",
+            background: "black",
+            onfiledrop: |e| println!("File dropped: {e:?}")
+        }
+    )
+}
+```
\ No newline at end of file
diff --git a/crates/elements/src/_docs/events/onglobalfilehover.md b/crates/elements/src/_docs/events/onglobalfilehover.md
new file mode 100644
index 000000000..bf5afb057
--- /dev/null
+++ b/crates/elements/src/_docs/events/onglobalfilehover.md
@@ -0,0 +1,19 @@
+The `onglobalfilehover` event fires when the user hovers a file over the window.
+
+Event Data: [`FileData`](crate::events::FileData)
+
+### Example
+
+```rust, no_run
+# use freya::prelude::*;
+fn app() -> Element {
+    rsx!(
+        rect {
+            width: "100%",
+            height: "100%",
+            background: "black",
+            onglobalfilehover: |e| println!("File hover: {e:?}")
+        }
+    )
+}
+```
\ No newline at end of file
diff --git a/crates/elements/src/_docs/events/onglobalfilehovercancelled.md b/crates/elements/src/_docs/events/onglobalfilehovercancelled.md
new file mode 100644
index 000000000..ab6a91bc2
--- /dev/null
+++ b/crates/elements/src/_docs/events/onglobalfilehovercancelled.md
@@ -0,0 +1,19 @@
+The `onglobalfilehovercancelled` event fires when the user cancels the hovering of a file over the window. It's the opposite of [`onglobalfilehover`](crate::elements::onglobalfilehover).
+
+Event Data: [`FileData`](crate::events::FileData)
+
+### Example
+
+```rust, no_run
+# use freya::prelude::*;
+fn app() -> Element {
+    rsx!(
+        rect {
+            width: "100%",
+            height: "100%",
+            background: "black",
+            onglobalfilehovercancelled: |e| println!("File hover cancelled: {e:?}")
+        }
+    )
+}
+```
diff --git a/crates/elements/src/definitions.rs b/crates/elements/src/definitions.rs
index fc5a4ca1d..c30bad732 100644
--- a/crates/elements/src/definitions.rs
+++ b/crates/elements/src/definitions.rs
@@ -631,4 +631,15 @@ pub mod events {
         #[doc = include_str!("_docs/events/pointerleave.md")]
         onpointerleave
     ];
+
+    impl_event! [
+        FileData;
+
+        #[doc = include_str!("_docs/events/onfiledrop.md")]
+        onfiledrop
+        #[doc = include_str!("_docs/events/onglobalfilehover.md")]
+        onglobalfilehover
+        #[doc = include_str!("_docs/events/onglobalfilehovercancelled.md")]
+        onglobalfilehovercancelled
+    ];
 }
diff --git a/crates/elements/src/events.rs b/crates/elements/src/events.rs
index 896d02e53..dd422648f 100644
--- a/crates/elements/src/events.rs
+++ b/crates/elements/src/events.rs
@@ -1,3 +1,4 @@
+pub mod file;
 pub mod keyboard;
 pub mod mouse;
 pub mod pointer;
@@ -5,6 +6,7 @@ pub mod touch;
 pub mod wheel;
 
 use dioxus_core::Event;
+pub use file::*;
 pub use keyboard::*;
 pub use mouse::*;
 pub use pointer::*;
diff --git a/crates/elements/src/events/file.rs b/crates/elements/src/events/file.rs
new file mode 100644
index 000000000..cbb1a3850
--- /dev/null
+++ b/crates/elements/src/events/file.rs
@@ -0,0 +1,15 @@
+use std::path::PathBuf;
+
+use crate::definitions::PlatformEventData;
+
+/// Data of a Keyboard event.
+#[derive(Debug, Clone, PartialEq)]
+pub struct FileData {
+    pub file_path: Option<PathBuf>,
+}
+
+impl From<&PlatformEventData> for FileData {
+    fn from(val: &PlatformEventData) -> Self {
+        val.downcast::<FileData>().cloned().unwrap()
+    }
+}
diff --git a/crates/native-core/src/events.rs b/crates/native-core/src/events.rs
index 982bee418..137166b98 100644
--- a/crates/native-core/src/events.rs
+++ b/crates/native-core/src/events.rs
@@ -30,6 +30,10 @@ pub enum EventName {
     GlobalClick,
     GlobalMouseDown,
     GlobalMouseOver,
+    GlobalFileHover,
+    GlobalFileHoverCancelled,
+
+    FileDrop,
 }
 
 impl FromStr for EventName {
@@ -57,6 +61,9 @@ impl FromStr for EventName {
             "globalclick" => Ok(EventName::GlobalClick),
             "globalmousedown" => Ok(EventName::GlobalMouseDown),
             "globalmouseover" => Ok(EventName::GlobalMouseOver),
+            "filedrop" => Ok(EventName::FileDrop),
+            "globalfilehover" => Ok(EventName::GlobalFileHover),
+            "globalfilehovercancelled" => Ok(EventName::GlobalFileHoverCancelled),
             _ => Err(()),
         }
     }
@@ -85,6 +92,9 @@ impl From<EventName> for &str {
             EventName::GlobalClick => "globalclick",
             EventName::GlobalMouseDown => "globalmousedown",
             EventName::GlobalMouseOver => "globalmouseover",
+            EventName::FileDrop => "filedrop",
+            EventName::GlobalFileHover => "globalfilehover",
+            EventName::GlobalFileHoverCancelled => "globalfilehovercancelled",
         }
     }
 }
@@ -120,6 +130,8 @@ impl EventName {
             Self::Click => Some(Self::GlobalClick),
             Self::MouseDown => Some(Self::GlobalMouseDown),
             Self::MouseOver => Some(Self::GlobalMouseOver),
+            Self::GlobalFileHover => Some(Self::GlobalFileHover),
+            Self::GlobalFileHoverCancelled => Some(Self::GlobalFileHoverCancelled),
             _ => None,
         }
     }
@@ -139,6 +151,7 @@ impl EventName {
             Self::MouseDown | Self::TouchStart => events.push(Self::PointerDown),
             Self::Click | Self::TouchEnd => events.push(Self::PointerUp),
             Self::MouseLeave => events.push(Self::PointerLeave),
+            Self::GlobalFileHover | Self::GlobalFileHoverCancelled => events.clear(),
             _ => {}
         }
 
diff --git a/crates/renderer/src/event_loop.rs b/crates/renderer/src/event_loop.rs
index c22ca2955..704a51fbf 100644
--- a/crates/renderer/src/event_loop.rs
+++ b/crates/renderer/src/event_loop.rs
@@ -29,6 +29,7 @@ pub fn run_event_loop<State: Clone>(
 ) {
     let mut cursor_pos = CursorPoint::default();
     let mut modifiers_state = ModifiersState::empty();
+    let mut dropped_file_path = None;
 
     app.window_env.run_on_setup();
 
@@ -182,6 +183,14 @@ pub fn run_event_loop<State: Clone>(
                             cursor: cursor_pos,
                             button: None,
                         });
+
+                        if let Some(dropped_file_path) = dropped_file_path.take() {
+                            app.send_event(PlatformEvent::File {
+                                name: EventName::FileDrop,
+                                file_path: Some(dropped_file_path),
+                                cursor: cursor_pos,
+                            });
+                        }
                     }
                     WindowEvent::Touch(Touch {
                         location,
@@ -210,6 +219,23 @@ pub fn run_event_loop<State: Clone>(
                     WindowEvent::Resized(size) => {
                         app.resize(size);
                     }
+                    WindowEvent::DroppedFile(file_path) => {
+                        dropped_file_path = Some(file_path);
+                    }
+                    WindowEvent::HoveredFile(file_path) => {
+                        app.send_event(PlatformEvent::File {
+                            name: EventName::GlobalFileHover,
+                            file_path: Some(file_path),
+                            cursor: cursor_pos,
+                        });
+                    }
+                    WindowEvent::HoveredFileCancelled => {
+                        app.send_event(PlatformEvent::File {
+                            name: EventName::GlobalFileHoverCancelled,
+                            file_path: None,
+                            cursor: cursor_pos,
+                        });
+                    }
                     _ => {}
                 }
             }
diff --git a/examples/file_drop.rs b/examples/file_drop.rs
new file mode 100644
index 000000000..c80670c89
--- /dev/null
+++ b/examples/file_drop.rs
@@ -0,0 +1,50 @@
+#![cfg_attr(
+    all(not(debug_assertions), target_os = "windows"),
+    windows_subsystem = "windows"
+)]
+
+use freya::prelude::*;
+
+fn main() {
+    launch_with_props(app, "File Drop", (400.0, 350.0));
+}
+
+#[derive(PartialEq)]
+enum Status {
+    Idle,
+    Hovering,
+}
+
+fn app() -> Element {
+    let mut path = use_signal::<Option<String>>(|| None);
+    let mut status = use_signal(|| Status::Idle);
+
+    let msg = path.read().clone().unwrap_or("Drop a file!".to_string());
+
+    let background = if *status.read() == Status::Hovering {
+        "rgb(109, 198, 227)"
+    } else {
+        "rgb(0, 119, 182)"
+    };
+
+    rsx!(
+        rect {
+            height: "100%",
+            width: "100%",
+            main_align: "center",
+            cross_align: "center",
+            background: "{background}",
+            color: "white",
+            onglobalfilehover: move |_| status.set(Status::Hovering),
+            onglobalfilehovercancelled: move |_| status.set(Status::Idle),
+            onfiledrop: move |e| {
+                status.set(Status::Idle);
+                path.set(Some(e.file_path.as_ref().unwrap().to_string_lossy().to_string()))
+            },
+            label {
+                font_size: "20",
+                "{msg}"
+            }
+        }
+    )
+}

From af4b4f199277edfeef8945e3f5818f96e2d77c8c Mon Sep 17 00:00:00 2001
From: Marc Espin <mespinsanz@gmail.com>
Date: Thu, 28 Mar 2024 22:06:40 +0100
Subject: [PATCH 08/23] feat: `onrightclick`, `onmiddleclick` and
 `onglobalpointerup` events (#526)

* feat: onrightclick, onmiddleclick and onglobalpointerup events

* docs

* fix

* feat: `NativeRouter` and `ActivableRoute` components, `use_activable_route` hook and redesigned `Sidebar` and `SidebarItem` components (#527)

* feat: Add back and forward navigation for dioxus-router

* feat: ActivableRouter, use_activable_route, and redesign Sidebar and SidebarItem

* test
---
 crates/components/src/activable_route.rs      |  22 +++
 crates/components/src/lib.rs                  |   4 +
 crates/components/src/native_router.rs        | 130 ++++++++++++++++++
 crates/components/src/sidebar.rs              |  17 ++-
 crates/core/src/events/events_measurer.rs     |  31 ++++-
 crates/core/tests/pointer_events.rs           |  30 +++-
 crates/elements/src/_docs/events/click.md     |   4 +-
 .../src/_docs/events/onglobalpointerup.md     |  22 +++
 .../src/_docs/events/onmiddleclick.md         |  19 +++
 .../elements/src/_docs/events/onrightclick.md |  19 +++
 crates/elements/src/definitions.rs            |   6 +
 crates/hooks/src/lib.rs                       |   2 +
 crates/hooks/src/theming/dark.rs              |   3 +-
 crates/hooks/src/theming/light.rs             |   5 +-
 crates/hooks/src/theming/mod.rs               |   1 -
 crates/hooks/src/use_activable_route.rs       |  21 +++
 crates/native-core/src/events.rs              |  15 +-
 crates/renderer/src/event_loop.rs             |  11 +-
 examples/pointer.rs                           |  15 +-
 examples/router.rs                            |  60 ++++----
 20 files changed, 377 insertions(+), 60 deletions(-)
 create mode 100644 crates/components/src/activable_route.rs
 create mode 100644 crates/components/src/native_router.rs
 create mode 100644 crates/elements/src/_docs/events/onglobalpointerup.md
 create mode 100644 crates/elements/src/_docs/events/onmiddleclick.md
 create mode 100644 crates/elements/src/_docs/events/onrightclick.md
 create mode 100644 crates/hooks/src/use_activable_route.rs

diff --git a/crates/components/src/activable_route.rs b/crates/components/src/activable_route.rs
new file mode 100644
index 000000000..66abe6938
--- /dev/null
+++ b/crates/components/src/activable_route.rs
@@ -0,0 +1,22 @@
+use dioxus::prelude::*;
+use dioxus_router::{hooks::use_route, prelude::Routable};
+use freya_hooks::ActivableRouteContext;
+
+#[allow(non_snake_case)]
+#[component]
+pub fn ActivableRoute<T: Clone + PartialEq + Routable + 'static>(
+    children: Element,
+    route: T,
+) -> Element {
+    let current_route = use_route::<T>();
+    let is_active = current_route == route;
+    let mut ctx = use_context_provider::<ActivableRouteContext>(|| {
+        ActivableRouteContext(Signal::new(is_active))
+    });
+
+    if *ctx.0.read() != is_active {
+        *ctx.0.write() = is_active;
+    }
+
+    rsx!({ children })
+}
diff --git a/crates/components/src/lib.rs b/crates/components/src/lib.rs
index ad882c1ec..74574beb2 100644
--- a/crates/components/src/lib.rs
+++ b/crates/components/src/lib.rs
@@ -2,6 +2,7 @@
 //! A collection of basic components to be used in Freya.
 
 mod accordion;
+mod activable_route;
 mod body;
 mod button;
 mod canvas;
@@ -16,6 +17,7 @@ mod input;
 mod link;
 mod loader;
 mod menu;
+mod native_router;
 mod network_image;
 mod popup;
 mod progress_bar;
@@ -31,6 +33,7 @@ mod tile;
 mod tooltip;
 
 pub use accordion::*;
+pub use activable_route::*;
 pub use body::*;
 pub use button::*;
 pub use canvas::*;
@@ -45,6 +48,7 @@ pub use input::*;
 pub use link::*;
 pub use loader::*;
 pub use menu::*;
+pub use native_router::*;
 pub use network_image::*;
 pub use popup::*;
 pub use progress_bar::*;
diff --git a/crates/components/src/native_router.rs b/crates/components/src/native_router.rs
new file mode 100644
index 000000000..24997ad52
--- /dev/null
+++ b/crates/components/src/native_router.rs
@@ -0,0 +1,130 @@
+use dioxus::prelude::*;
+use dioxus_router::prelude::use_navigator;
+use freya_elements::elements as dioxus_elements;
+use freya_elements::events::{MouseButton, PointerEvent, PointerType};
+
+#[allow(non_snake_case)]
+#[component]
+pub fn NativeRouter(children: Element) -> Element {
+    let router = use_navigator();
+
+    let onpointerup = move |e: PointerEvent| {
+        if let PointerType::Mouse { trigger_button } = e.data().get_pointer_type() {
+            match trigger_button {
+                Some(MouseButton::Back) => router.go_back(),
+                Some(MouseButton::Forward) => router.go_forward(),
+                _ => {}
+            }
+        }
+    };
+
+    rsx!(
+        rect {
+            onpointerup,
+            {children}
+        }
+    )
+}
+
+#[cfg(test)]
+mod test {
+    use dioxus_router::prelude::{Outlet, Routable, Router};
+    use freya::prelude::*;
+    use freya_core::events::{EventName, PlatformEvent};
+    use freya_testing::*;
+
+    #[tokio::test]
+    pub async fn native_router() {
+        #[derive(Routable, Clone, PartialEq)]
+        #[rustfmt::skip]
+        pub enum Route {
+            #[layout(App)]
+                #[route("/")]
+                A,
+                #[route("/B")]
+                B,
+            #[end_layout]
+            #[route("/..route")]
+            NotFound { },
+        }
+
+        #[allow(non_snake_case)]
+        #[component]
+        fn NotFound() -> Element {
+            rsx!(
+                label {
+                    "NotFound"
+                }
+            )
+        }
+
+        #[allow(non_snake_case)]
+        #[component]
+        fn A() -> Element {
+            rsx!(
+                label {
+                    "A"
+                }
+            )
+        }
+
+        #[allow(non_snake_case)]
+        #[component]
+        fn B() -> Element {
+            rsx!(
+                label {
+                    "B"
+                }
+            )
+        }
+
+        #[allow(non_snake_case)]
+        fn App() -> Element {
+            rsx!(
+                NativeRouter {
+                    Link {
+                        to: Route::B,
+                        label {
+                            "Got to B"
+                        }
+                    },
+                    Outlet::<Route> {  }
+                }
+            )
+        }
+
+        let mut utils = launch_test(|| -> Element { rsx!(Router::<Route> {}) });
+
+        assert_eq!(utils.root().get(0).get(1).get(0).text(), Some("A"));
+
+        utils.push_event(PlatformEvent::Mouse {
+            name: EventName::Click,
+            cursor: (5.0, 5.0).into(),
+            button: Some(MouseButton::Left),
+        });
+
+        utils.wait_for_update().await;
+
+        assert_eq!(utils.root().get(0).get(1).get(0).text(), Some("B"));
+
+        utils.push_event(PlatformEvent::Mouse {
+            name: EventName::PointerUp,
+            cursor: (5.0, 5.0).into(),
+            button: Some(MouseButton::Back),
+        });
+
+        utils.wait_for_update().await;
+
+        assert_eq!(utils.root().get(0).get(1).get(0).text(), Some("A"));
+
+        utils.push_event(PlatformEvent::Mouse {
+            name: EventName::PointerUp,
+            cursor: (5.0, 5.0).into(),
+            button: Some(MouseButton::Forward),
+        });
+
+        utils.wait_for_update().await;
+
+        assert_eq!(utils.root().get(0).get(1).get(0).text(), Some("B"));
+    }
+}
diff --git a/crates/components/src/sidebar.rs b/crates/components/src/sidebar.rs
index f39c1cf8d..3a37b51dd 100644
--- a/crates/components/src/sidebar.rs
+++ b/crates/components/src/sidebar.rs
@@ -2,8 +2,8 @@ use crate::{ButtonStatus, ScrollView};
 use dioxus::prelude::*;
 use freya_elements::elements as dioxus_elements;
 use freya_hooks::{
-    theme_with, use_applied_theme, use_platform, ScrollViewThemeWith, SidebarItemTheme,
-    SidebarItemThemeWith, SidebarTheme, SidebarThemeWith,
+    theme_with, use_activable_route, use_applied_theme, use_platform, ScrollViewThemeWith,
+    SidebarItemTheme, SidebarItemThemeWith, SidebarTheme, SidebarThemeWith,
 };
 use winit::window::CursorIcon;
 
@@ -36,7 +36,7 @@ pub fn Sidebar(
                 shadow: "2 0 5 0 rgb(0, 0, 0, 30)",
                 ScrollView {
                     theme: theme_with!(ScrollViewTheme {
-                        padding: "16".into(),
+                        padding: "8".into(),
                     }),
                     {sidebar}
                 }
@@ -66,10 +66,10 @@ pub fn SidebarItem(
         hover_background,
         background,
         font_theme,
-        border_fill,
     } = use_applied_theme!(&theme, sidebar_item);
     let mut status = use_signal(ButtonStatus::default);
     let platform = use_platform();
+    let is_active = use_activable_route();
 
     use_drop(move || {
         if *status.read() == ButtonStatus::Hovering {
@@ -94,6 +94,7 @@ pub fn SidebarItem(
     };
 
     let background = match *status.read() {
+        _ if is_active => hover_background,
         ButtonStatus::Hovering => hover_background,
         ButtonStatus::Idle => background,
     };
@@ -101,17 +102,15 @@ pub fn SidebarItem(
     rsx!(
         rect {
             overflow: "clip",
-            margin: "5 0",
+            margin: "4 0",
             onclick,
             onmouseenter,
             onmouseleave,
             width: "100%",
             height: "auto",
             color: "{font_theme.color}",
-            border: "1 solid {border_fill}",
-            shadow: "0 4 5 0 rgb(0, 0, 0, 30)",
-            corner_radius: "8",
-            padding: "8",
+            corner_radius: "99",
+            padding: "8 10",
             background: "{background}",
             {children}
         }
diff --git a/crates/core/src/events/events_measurer.rs b/crates/core/src/events/events_measurer.rs
index e7158b565..0c2f60cce 100644
--- a/crates/core/src/events/events_measurer.rs
+++ b/crates/core/src/events/events_measurer.rs
@@ -38,7 +38,9 @@ pub fn process_events(
     let to_emit_dom_collateral_events =
         measure_dom_events(potential_collateral_events, dom, scale_factor);
 
-    // 6. Join both the dom and collateral dom events and sort them
+    let colateral_global_events = measure_colateral_global_events(&to_emit_dom_collateral_events);
+
+    // 6. Join both the dom and colateral dom events and sort them
     to_emit_dom_events.extend(to_emit_dom_collateral_events);
     to_emit_dom_events.sort_unstable();
 
@@ -48,12 +50,33 @@ pub fn process_events(
     }
 
     // 8. Emit the global events
-    emit_global_events_listeners(global_events, dom, event_emitter, scale_factor);
+    emit_global_events_listeners(
+        global_events,
+        colateral_global_events,
+        dom,
+        event_emitter,
+        scale_factor,
+    );
 
     // 9. Clear the events queue
     events.clear();
 }
 
+/// Measure colateral global events
+pub fn measure_colateral_global_events(events: &[DomEvent]) -> Vec<DomEvent> {
+    let mut global_events = Vec::default();
+    for event in events {
+        let Some(event_name) = event.name.get_global_event() else {
+            continue;
+        };
+        let mut global_event = event.clone();
+        global_event.name = event_name;
+        global_event.layer = None;
+        global_events.push(global_event);
+    }
+    global_events
+}
+
 /// Measure global events
 pub fn measure_global_events(events: &EventsQueue) -> Vec<PlatformEvent> {
     let mut global_events = Vec::default();
@@ -247,6 +270,7 @@ fn measure_dom_events(
 /// Emit global events
 fn emit_global_events_listeners(
     global_events: Vec<PlatformEvent>,
+    global_colateral_events: Vec<DomEvent>,
     fdom: &FreyaDOM,
     event_emitter: &EventEmitter,
     scale_factor: f64,
@@ -270,4 +294,7 @@ fn emit_global_events_listeners(
             event_emitter.send(event).unwrap();
         }
     }
+    for colateral_global_event in global_colateral_events {
+        event_emitter.send(colateral_global_event).unwrap();
+    }
 }
diff --git a/crates/core/tests/pointer_events.rs b/crates/core/tests/pointer_events.rs
index 5b17a9c43..5b122e262 100644
--- a/crates/core/tests/pointer_events.rs
+++ b/crates/core/tests/pointer_events.rs
@@ -20,6 +20,8 @@ pub async fn pointer_events_from_mouse() {
 
         let onpointerleave = move |_| state.push("leave".to_string());
 
+        let onglobalpointerup = move |_| state.push("globalup".to_string());
+
         rsx!(
             rect {
                 height: "100%",
@@ -28,11 +30,12 @@ pub async fn pointer_events_from_mouse() {
                 rect {
                     height: "100%",
                     width: "100%",
-                    onpointerdown: onpointerdown,
-                    onpointerup: onpointerup,
-                    onpointerover: onpointerover,
-                    onpointerenter: onpointerenter,
-                    onpointerleave: onpointerleave,
+                    onpointerdown,
+                    onpointerup,
+                    onpointerover,
+                    onpointerenter,
+                    onpointerleave,
+                    onglobalpointerup,
                     label { "{state:?}" }
                 }
             }
@@ -91,6 +94,23 @@ pub async fn pointer_events_from_mouse() {
         label.get(0).text(),
         Some(format!("{:?}", vec!["enter", "over", "down", "up", "leave"]).as_str())
     );
+
+    utils.push_event(PlatformEvent::Mouse {
+        name: EventName::PointerUp,
+        cursor: CursorPoint::new(0.0, 0.0),
+        button: Some(MouseButton::Left),
+    });
+    utils.wait_for_update().await;
+    assert_eq!(
+        label.get(0).text(),
+        Some(
+            format!(
+                "{:?}",
+                vec!["enter", "over", "down", "up", "leave", "globalup"]
+            )
+            .as_str()
+        )
+    );
 }
 
 #[tokio::test]
diff --git a/crates/elements/src/_docs/events/click.md b/crates/elements/src/_docs/events/click.md
index 2f65329b4..bb7c55247 100644
--- a/crates/elements/src/_docs/events/click.md
+++ b/crates/elements/src/_docs/events/click.md
@@ -1,6 +1,4 @@
-The `click` event fires when the user clicks an element with the mouse.
-Note that this fires for all mouse buttons.
-You can check the specific variant with the [`MouseData`](crate::events::MouseData)'s `trigger_button` property.
+The `click` event fires when the user clicks an element with the left button of the mouse.
 
 Event Data: [`MouseData`](crate::events::MouseData)
 
diff --git a/crates/elements/src/_docs/events/onglobalpointerup.md b/crates/elements/src/_docs/events/onglobalpointerup.md
new file mode 100644
index 000000000..c376d065b
--- /dev/null
+++ b/crates/elements/src/_docs/events/onglobalpointerup.md
@@ -0,0 +1,22 @@
+The `globalpointerup` event fires when the user releases the point anywhere in the app.
+
+Event Data: [`PointerData`](crate::events::PointerData)
+
+### Example
+
+```rust, no_run
+# use freya::prelude::*;
+fn app() -> Element {
+    rsx!(
+        rect {
+            onglobalpointerup: |_| println!("Pointer released somewhere else!")
+        }
+        rect {
+            width: "100",
+            height: "100",
+            background: "red",
+            onclick: |_| println!("Clicked!")
+        }
+    )
+}
+```
\ No newline at end of file
diff --git a/crates/elements/src/_docs/events/onmiddleclick.md b/crates/elements/src/_docs/events/onmiddleclick.md
new file mode 100644
index 000000000..e26ccd8ea
--- /dev/null
+++ b/crates/elements/src/_docs/events/onmiddleclick.md
@@ -0,0 +1,19 @@
+The `click` event fires when the user clicks an element with the middle button of the mouse.
+
+Event Data: [`MouseData`](crate::events::MouseData)
+
+### Example
+
+```rust, no_run
+# use freya::prelude::*;
+fn app() -> Element {
+    rsx!(
+        rect {
+            width: "100",
+            height: "100",
+            background: "red",
+            onmiddleclick: |_| println!("Clicked!")
+        }
+    )
+}
+```
\ No newline at end of file
diff --git a/crates/elements/src/_docs/events/onrightclick.md b/crates/elements/src/_docs/events/onrightclick.md
new file mode 100644
index 000000000..081104184
--- /dev/null
+++ b/crates/elements/src/_docs/events/onrightclick.md
@@ -0,0 +1,19 @@
+The `click` event fires when the user clicks an element with the right button of the mouse.
+
+Event Data: [`MouseData`](crate::events::MouseData)
+
+### Example
+
+```rust, no_run
+# use freya::prelude::*;
+fn app() -> Element {
+    rsx!(
+        rect {
+            width: "100",
+            height: "100",
+            background: "red",
+            onrightclick: |_| println!("Clicked!")
+        }
+    )
+}
+```
\ No newline at end of file
diff --git a/crates/elements/src/definitions.rs b/crates/elements/src/definitions.rs
index c30bad732..2bd4aae75 100644
--- a/crates/elements/src/definitions.rs
+++ b/crates/elements/src/definitions.rs
@@ -574,6 +574,10 @@ pub mod events {
         onclick
         #[doc = include_str!("_docs/events/globalclick.md")]
         onglobalclick
+        #[doc = include_str!("_docs/events/onmiddleclick.md")]
+        onmiddleclick
+        #[doc = include_str!("_docs/events/onrightclick.md")]
+        onrightclick
         #[doc = include_str!("_docs/events/mousedown.md")]
         onmousedown
         #[doc = include_str!("_docs/events/globalmousedown.md")]
@@ -624,6 +628,8 @@ pub mod events {
         onpointerdown
         #[doc = include_str!("_docs/events/pointerup.md")]
         onpointerup
+        #[doc = include_str!("_docs/events/onglobalpointerup.md")]
+        onglobalpointerup
         #[doc = include_str!("_docs/events/pointerover.md")]
         onpointerover
         #[doc = include_str!("_docs/events/pointerenter.md")]
diff --git a/crates/hooks/src/lib.rs b/crates/hooks/src/lib.rs
index a4ece1f1b..9c4cfaa6a 100644
--- a/crates/hooks/src/lib.rs
+++ b/crates/hooks/src/lib.rs
@@ -8,6 +8,7 @@ mod text_editor;
 mod theming;
 
 mod use_accessibility;
+mod use_activable_route;
 mod use_animation;
 mod use_canvas;
 mod use_editable;
@@ -26,6 +27,7 @@ pub use text_editor::*;
 pub use theming::*;
 
 pub use use_accessibility::*;
+pub use use_activable_route::*;
 pub use use_animation::*;
 pub use use_canvas::*;
 pub use use_editable::*;
diff --git a/crates/hooks/src/theming/dark.rs b/crates/hooks/src/theming/dark.rs
index c6f9be835..6d590f77a 100644
--- a/crates/hooks/src/theming/dark.rs
+++ b/crates/hooks/src/theming/dark.rs
@@ -138,9 +138,8 @@ pub const DARK_THEME: Theme = Theme {
         },
     },
     sidebar_item: SidebarItemTheme {
-        background: cow_borrowed!("rgb(35, 35, 35)"),
+        background: cow_borrowed!("transparent"),
         hover_background: cow_borrowed!("rgb(45, 45, 45)"),
-        border_fill: cow_borrowed!("rgb(80, 80, 80)"),
         font_theme: FontTheme {
             color: cow_borrowed!("white"),
         },
diff --git a/crates/hooks/src/theming/light.rs b/crates/hooks/src/theming/light.rs
index 25f469aa4..d44c9175f 100644
--- a/crates/hooks/src/theming/light.rs
+++ b/crates/hooks/src/theming/light.rs
@@ -138,12 +138,11 @@ pub const LIGHT_THEME: Theme = Theme {
         },
     },
     sidebar_item: SidebarItemTheme {
-        background: cow_borrowed!("rgb(245, 245, 245)"),
-        hover_background: cow_borrowed!("rgb(235, 235, 235)"),
+        background: cow_borrowed!("transparent"),
+        hover_background: cow_borrowed!("rgb(230, 230, 230)"),
         font_theme: FontTheme {
             color: cow_borrowed!("rgb(10, 10, 10)"),
         },
-        border_fill: cow_borrowed!("rgb(210, 210, 210)"),
     },
     tile: TileTheme {
         padding: cow_borrowed!("4 6"),
diff --git a/crates/hooks/src/theming/mod.rs b/crates/hooks/src/theming/mod.rs
index b37943a64..e1ae6076c 100644
--- a/crates/hooks/src/theming/mod.rs
+++ b/crates/hooks/src/theming/mod.rs
@@ -464,7 +464,6 @@ define_theme! {
         %[cows]
         background: str,
         hover_background: str,
-        border_fill: str,
         %[subthemes]
         font_theme: FontTheme,
     }
diff --git a/crates/hooks/src/use_activable_route.rs b/crates/hooks/src/use_activable_route.rs
new file mode 100644
index 000000000..5462a8e43
--- /dev/null
+++ b/crates/hooks/src/use_activable_route.rs
@@ -0,0 +1,21 @@
+use dioxus_hooks::try_use_context;
+use dioxus_signals::{Readable, Signal};
+
+#[derive(Default, Clone)]
+pub struct ActivableRouteContext(pub Signal<bool>);
+
+impl ActivableRouteContext {
+    pub fn is_active(&self) -> bool {
+        *self.0.read()
+    }
+}
+
+pub fn use_activable_route() -> bool {
+    let ctx = try_use_context::<ActivableRouteContext>();
+
+    if let Some(ctx) = ctx {
+        ctx.is_active()
+    } else {
+        false
+    }
+}
diff --git a/crates/native-core/src/events.rs b/crates/native-core/src/events.rs
index 137166b98..6d985630f 100644
--- a/crates/native-core/src/events.rs
+++ b/crates/native-core/src/events.rs
@@ -5,6 +5,8 @@ use smallvec::SmallVec;
 #[derive(Clone, Copy, PartialEq, Debug, Hash)]
 pub enum EventName {
     Click,
+    MiddleClick,
+    RightClick,
 
     MouseDown,
     MouseOver,
@@ -28,6 +30,7 @@ pub enum EventName {
     TouchEnd,
 
     GlobalClick,
+    GlobalPointerUp,
     GlobalMouseDown,
     GlobalMouseOver,
     GlobalFileHover,
@@ -42,6 +45,8 @@ impl FromStr for EventName {
     fn from_str(txt: &str) -> Result<Self, Self::Err> {
         match txt {
             "click" => Ok(EventName::Click),
+            "rightclick" => Ok(EventName::RightClick),
+            "middleclick" => Ok(EventName::MiddleClick),
             "mousedown" => Ok(EventName::MouseDown),
             "mouseover" => Ok(EventName::MouseOver),
             "mouseenter" => Ok(EventName::MouseEnter),
@@ -59,6 +64,7 @@ impl FromStr for EventName {
             "touchmove" => Ok(EventName::TouchMove),
             "touchend" => Ok(EventName::TouchEnd),
             "globalclick" => Ok(EventName::GlobalClick),
+            "globalpointerup" => Ok(EventName::GlobalPointerUp),
             "globalmousedown" => Ok(EventName::GlobalMouseDown),
             "globalmouseover" => Ok(EventName::GlobalMouseOver),
             "filedrop" => Ok(EventName::FileDrop),
@@ -73,6 +79,8 @@ impl From<EventName> for &str {
     fn from(event: EventName) -> Self {
         match event {
             EventName::Click => "click",
+            EventName::MiddleClick => "middleclick",
+            EventName::RightClick => "rightclick",
             EventName::MouseDown => "mousedown",
             EventName::MouseOver => "mouseover",
             EventName::MouseEnter => "mouseenter",
@@ -90,6 +98,7 @@ impl From<EventName> for &str {
             EventName::TouchMove => "touchmove",
             EventName::TouchEnd => "touchend",
             EventName::GlobalClick => "globalclick",
+            EventName::GlobalPointerUp => "globalpointerup",
             EventName::GlobalMouseDown => "globalmousedown",
             EventName::GlobalMouseOver => "globalmouseover",
             EventName::FileDrop => "filedrop",
@@ -128,6 +137,7 @@ impl EventName {
     pub fn get_global_event(&self) -> Option<Self> {
         match self {
             Self::Click => Some(Self::GlobalClick),
+            Self::PointerUp => Some(Self::GlobalPointerUp),
             Self::MouseDown => Some(Self::GlobalMouseDown),
             Self::MouseOver => Some(Self::GlobalMouseOver),
             Self::GlobalFileHover => Some(Self::GlobalFileHover),
@@ -149,7 +159,9 @@ impl EventName {
                 events.extend([Self::MouseEnter, Self::PointerEnter, Self::PointerOver])
             }
             Self::MouseDown | Self::TouchStart => events.push(Self::PointerDown),
-            Self::Click | Self::TouchEnd => events.push(Self::PointerUp),
+            Self::Click | Self::MiddleClick | Self::RightClick | Self::TouchEnd => {
+                events.push(Self::PointerUp)
+            }
             Self::MouseLeave => events.push(Self::PointerLeave),
             Self::GlobalFileHover | Self::GlobalFileHoverCancelled => events.clear(),
             _ => {}
@@ -172,6 +184,7 @@ impl EventName {
                 | Self::PointerOver
                 | Self::PointerDown
                 | Self::PointerUp
+                | Self::GlobalPointerUp
         )
     }
 
diff --git a/crates/renderer/src/event_loop.rs b/crates/renderer/src/event_loop.rs
index 704a51fbf..a5bb8399d 100644
--- a/crates/renderer/src/event_loop.rs
+++ b/crates/renderer/src/event_loop.rs
@@ -7,8 +7,8 @@ use freya_elements::events::keyboard::{
 };
 use torin::geometry::CursorPoint;
 use winit::event::{
-    ElementState, Event, Ime, KeyEvent, MouseScrollDelta, StartCause, Touch, TouchPhase,
-    WindowEvent,
+    ElementState, Event, Ime, KeyEvent, MouseButton, MouseScrollDelta, StartCause, Touch,
+    TouchPhase, WindowEvent,
 };
 use winit::event_loop::{EventLoop, EventLoopProxy};
 use winit::keyboard::{KeyCode, ModifiersState, PhysicalKey};
@@ -98,7 +98,12 @@ pub fn run_event_loop<State: Clone>(
 
                         let name = match state {
                             ElementState::Pressed => EventName::MouseDown,
-                            ElementState::Released => EventName::Click,
+                            ElementState::Released => match button {
+                                MouseButton::Middle => EventName::MiddleClick,
+                                MouseButton::Right => EventName::RightClick,
+                                MouseButton::Left => EventName::Click,
+                                _ => EventName::PointerUp,
+                            },
                         };
 
                         app.send_event(PlatformEvent::Mouse {
diff --git a/examples/pointer.rs b/examples/pointer.rs
index ced5f1514..7098ff4d1 100644
--- a/examples/pointer.rs
+++ b/examples/pointer.rs
@@ -30,6 +30,10 @@ fn app() -> Element {
         println!("Leave -> {:?}", ev.data.get_pointer_type());
     };
 
+    let onglobalpointerup = move |ev: PointerEvent| {
+        println!("Global Up -> {:?}", ev.data.get_pointer_type());
+    };
+
     rsx!(
         rect {
             overflow: "clip",
@@ -44,11 +48,12 @@ fn app() -> Element {
                 background: "rgb(168, 218, 220)",
                 color: "black",
                 padding: "12",
-                onpointerdown: onpointerdown,
-                onpointerup: onpointerup,
-                onpointerover: onpointerover,
-                onpointerenter: onpointerenter,
-                onpointerleave: onpointerleave,
+                onpointerdown,
+                onpointerup,
+                onpointerover,
+                onpointerenter,
+                onpointerleave,
+                onglobalpointerup,
                 label { "Click me" }
             }
         }
diff --git a/examples/router.rs b/examples/router.rs
index 5e3cb30d2..581e51e80 100644
--- a/examples/router.rs
+++ b/examples/router.rs
@@ -14,7 +14,7 @@ fn app() -> Element {
     rsx!(Router::<Route> {})
 }
 
-#[derive(Routable, Clone)]
+#[derive(Routable, Clone, PartialEq)]
 #[rustfmt::skip]
 pub enum Route {
     #[layout(AppSidebar)]
@@ -30,38 +30,46 @@ pub enum Route {
 #[allow(non_snake_case)]
 fn AppSidebar() -> Element {
     rsx!(
-        Sidebar {
-            sidebar: rsx!(
-                Link {
-                    to: Route::Home,
-                    SidebarItem {
-                        label {
-                            "Go to Hey ! 👋"
+        NativeRouter {
+            Sidebar {
+                sidebar: rsx!(
+                    Link {
+                        to: Route::Home,
+                        ActivableRoute {
+                            route: Route::Home,
+                            SidebarItem {
+                                label {
+                                    "Go to Hey ! 👋"
+                                }
+                            },
+                        }
+                    },
+                    Link {
+                        to: Route::Wow,
+                        ActivableRoute {
+                            route: Route::Wow,
+                            SidebarItem {
+                                label {
+                                    "Go to Wow! 👈"
+                                }
+                            },
                         }
                     },
-                },
-                Link {
-                    to: Route::Wow,
                     SidebarItem {
+                        onclick: |_| println!("Hello!"),
                         label {
-                            "Go to Wow! 👈"
+                            "Print Hello! 👀"
                         }
                     },
-                },
-                SidebarItem {
-                    onclick: |_| println!("Hello!"),
-                    label {
-                        "Print Hello! 👀"
+                ),
+                Body {
+                    rect {
+                        main_align: "center",
+                        cross_align: "center",
+                        width: "100%",
+                        height: "100%",
+                        Outlet::<Route> {  }
                     }
-                },
-            ),
-            Body {
-                rect {
-                    main_align: "center",
-                    cross_align: "center",
-                    width: "100%",
-                    height: "100%",
-                    Outlet::<Route> {  }
                 }
             }
         }

From 1df4638c2e980b3027b8934283f23f66e99b79c3 Mon Sep 17 00:00:00 2001
From: Marc Espin <mespinsanz@gmail.com>
Date: Fri, 29 Mar 2024 00:24:11 +0100
Subject: [PATCH 09/23] feat: Stop/reverse/restart on animation finish (#553)

---
 crates/components/src/loader.rs   |  3 ++-
 crates/hooks/src/use_animation.rs | 40 +++++++++++++++++++++----------
 2 files changed, 30 insertions(+), 13 deletions(-)

diff --git a/crates/components/src/loader.rs b/crates/components/src/loader.rs
index e18c28bdc..6340f17c8 100644
--- a/crates/components/src/loader.rs
+++ b/crates/components/src/loader.rs
@@ -1,6 +1,6 @@
 use dioxus::prelude::*;
 use freya_elements::elements as dioxus_elements;
-use freya_hooks::{use_animation, use_applied_theme, AnimNum, LoaderTheme, LoaderThemeWith};
+use freya_hooks::{use_animation, use_applied_theme, AnimNum, LoaderTheme, LoaderThemeWith, OnFinish};
 
 /// [`Loader`] component properties.
 #[derive(Props, Clone, PartialEq)]
@@ -22,6 +22,7 @@ pub fn Loader(props: LoaderProps) -> Element {
     let theme = use_applied_theme!(&props.theme, loader);
     let anim = use_animation(|ctx| {
         ctx.auto_start(true);
+        ctx.on_finish(OnFinish::Restart);
         ctx.with(AnimNum::new(0.0, 360.0).time(650))
     });
 
diff --git a/crates/hooks/src/use_animation.rs b/crates/hooks/src/use_animation.rs
index cc0e81a54..d6bdacec4 100644
--- a/crates/hooks/src/use_animation.rs
+++ b/crates/hooks/src/use_animation.rs
@@ -344,7 +344,7 @@ pub trait AnimatedValue {
 #[derive(Default, PartialEq, Clone)]
 pub struct Context {
     animated_values: Vec<Signal<Box<dyn AnimatedValue>>>,
-    reverse: bool,
+    on_finish: OnFinish,
     auto_start: bool,
 }
 
@@ -359,8 +359,8 @@ impl Context {
         ReadOnlySignal::new(signal)
     }
 
-    pub fn reverse(&mut self, reverse: bool) -> &mut Self {
-        self.reverse = reverse;
+    pub fn on_finish(&mut self, on_finish: OnFinish) -> &mut Self {
+        self.on_finish = on_finish;
         self
     }
 
@@ -386,6 +386,15 @@ impl AnimDirection {
     }
 }
 
+/// What to do once the animation finishes. By default it is [`Stop`](OnFinish::Stop)
+#[derive(PartialEq, Clone, Copy, Default)]
+pub enum OnFinish {
+    #[default]
+    Stop,
+    Reverse,
+    Restart,
+}
+
 /// Animate your elements. Use [`use_animation`] to use this.
 #[derive(PartialEq, Clone)]
 pub struct UseAnimator<Animated: PartialEq + Clone + 'static> {
@@ -451,7 +460,7 @@ impl<Animated: PartialEq + Clone + 'static> UseAnimator<Animated> {
         let mut ticker = platform.new_ticker();
         let mut values = ctx.animated_values.clone();
         let mut has_run_yet = self.has_run_yet;
-        let reverse = ctx.reverse;
+        let on_finish = ctx.on_finish;
         let mut task = self.task;
 
         // Cancel previous animations
@@ -486,16 +495,23 @@ impl<Animated: PartialEq + Clone + 'static> UseAnimator<Animated> {
                     .iter()
                     .all(|value| value.peek().is_finished(index, direction));
                 if is_finished {
-                    if reverse {
-                        // Restart the animation in the opposite direction
+                    if OnFinish::Reverse == on_finish {
+                        // Toggle direction
                         direction.toggle();
-                        index = 0;
-                        for value in values.iter_mut() {
-                            value.write().prepare(direction);
+                    }
+                    match on_finish {
+                        OnFinish::Restart | OnFinish::Reverse => {
+                            index = 0;
+
+                            // Restart the animation
+                            for value in values.iter_mut() {
+                                value.write().prepare(direction);
+                            }
+                        }
+                        OnFinish::Stop => {
+                            // Stop if all the animations are finished
+                            break;
                         }
-                    } else {
-                        // Stop if all the animations are finished
-                        break;
                     }
                 }
 

From 616e6f7cb143bae74713b4fd5373fc2531882aab Mon Sep 17 00:00:00 2001
From: Marc Espin <mespinsanz@gmail.com>
Date: Sat, 30 Mar 2024 15:46:54 +0100
Subject: [PATCH 10/23] fix: Attribute name parsing (#555)

* fix: Attribute name parsing

* fix highlight_color
---
 crates/native-core/src/attributes.rs | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/crates/native-core/src/attributes.rs b/crates/native-core/src/attributes.rs
index e5d53f3ec..d79f718e1 100644
--- a/crates/native-core/src/attributes.rs
+++ b/crates/native-core/src/attributes.rs
@@ -68,10 +68,10 @@ pub enum AttributeName {
 }
 
 impl FromStr for AttributeName {
-    type Err = ();
+    type Err = String;
 
-    fn from_str(txt: &str) -> Result<Self, Self::Err> {
-        match txt {
+    fn from_str(attr: &str) -> Result<Self, Self::Err> {
+        match attr {
             "width" => Ok(AttributeName::Width),
             "height" => Ok(AttributeName::Height),
             "min_width" => Ok(AttributeName::MinWidth),
@@ -130,12 +130,12 @@ impl FromStr for AttributeName {
             "cursor_mode" => Ok(AttributeName::CursorMode),
             "cursor_id" => Ok(AttributeName::CursorId),
             "highlights" => Ok(AttributeName::Highlights),
-            "highlights_color" => Ok(AttributeName::HighlightColor),
+            "highlight_color" => Ok(AttributeName::HighlightColor),
             "image_reference" => Ok(AttributeName::ImageReference),
             "image_data" => Ok(AttributeName::ImageData),
             "svg_data" => Ok(AttributeName::SvgData),
             "svg_content" => Ok(AttributeName::SvgContent),
-            _ => Err(()),
+            _ => Err(format!("{attr} not supported.")),
         }
     }
 }

From c46c92f414af75f511f78e0e025130484bcd82c8 Mon Sep 17 00:00:00 2001
From: Marc Espin <mespinsanz@gmail.com>
Date: Sat, 30 Mar 2024 15:47:08 +0100
Subject: [PATCH 11/23] fix: Measure layout from text-owned elements (#556)

---
 crates/dom/src/dom_adapter.rs  | 11 ++++++++++-
 crates/native-core/src/tags.rs |  4 ++++
 crates/torin/src/node.rs       |  3 +++
 3 files changed, 17 insertions(+), 1 deletion(-)

diff --git a/crates/dom/src/dom_adapter.rs b/crates/dom/src/dom_adapter.rs
index 61e2ece87..e2f5cc33e 100644
--- a/crates/dom/src/dom_adapter.rs
+++ b/crates/dom/src/dom_adapter.rs
@@ -1,4 +1,6 @@
-use dioxus_native_core::{prelude::NodeType, real_dom::NodeImmutable, tree::TreeRef, NodeId};
+use dioxus_native_core::{
+    prelude::NodeType, real_dom::NodeImmutable, tree::TreeRef, NodeId,
+};
 use freya_node_state::LayoutState;
 use rustc_hash::FxHashMap;
 use torin::prelude::*;
@@ -24,6 +26,12 @@ impl<'a> DioxusDOMAdapter<'a> {
 impl DOMAdapter<NodeId> for DioxusDOMAdapter<'_> {
     fn get_node(&self, node_id: &NodeId) -> Option<Node> {
         let node = self.rdom.get(*node_id)?;
+        let contains_text = node
+            .node_type()
+            .tag()
+            .map(|t| t.contains_text())
+            .unwrap_or_default();
+
         let mut layout = node
             .get::<LayoutState>()
             .expect("This should exist.")
@@ -52,6 +60,7 @@ impl DOMAdapter<NodeId> for DioxusDOMAdapter<'_> {
             has_layout_references: layout.node_ref.is_some(),
             position: layout.position,
             content: layout.content,
+            contains_text,
         })
     }
 
diff --git a/crates/native-core/src/tags.rs b/crates/native-core/src/tags.rs
index 3cfcdd6dd..75c88f471 100644
--- a/crates/native-core/src/tags.rs
+++ b/crates/native-core/src/tags.rs
@@ -19,6 +19,10 @@ impl TagName {
     pub fn has_children_with_intrinsic_layout(&self) -> bool {
         *self != Self::Paragraph && *self != Self::Label
     }
+
+    pub fn contains_text(&self) -> bool {
+        matches!(self, Self::Paragraph | Self::Label | Self::Text)
+    }
 }
 
 impl FromStr for TagName {
diff --git a/crates/torin/src/node.rs b/crates/torin/src/node.rs
index 0493c61de..4c6e20b46 100644
--- a/crates/torin/src/node.rs
+++ b/crates/torin/src/node.rs
@@ -48,6 +48,8 @@ pub struct Node {
 
     /// A Node might depend on inner sizes but have a fixed position, like scroll views.
     pub has_layout_references: bool,
+
+    pub contains_text: bool,
 }
 
 impl Node {
@@ -183,5 +185,6 @@ impl Node {
             || self.has_layout_references
             || self.cross_alignment.is_not_start()
             || self.main_alignment.is_not_start()
+            || self.contains_text
     }
 }

From 88d6dd13bc9fb1f62eac2bb709311083c699c4b9 Mon Sep 17 00:00:00 2001
From: Marc Espin <mespinsanz@gmail.com>
Date: Sat, 30 Mar 2024 15:48:06 +0100
Subject: [PATCH 12/23] feat: Optional virtual scroll view caching (#557)

---
 .../src/scroll_views/virtual_scroll_view.rs   | 33 +++++++++++++------
 examples/cloned_editor.rs                     |  2 ++
 2 files changed, 25 insertions(+), 10 deletions(-)

diff --git a/crates/components/src/scroll_views/virtual_scroll_view.rs b/crates/components/src/scroll_views/virtual_scroll_view.rs
index 6e67baab4..2482fd8a6 100644
--- a/crates/components/src/scroll_views/virtual_scroll_view.rs
+++ b/crates/components/src/scroll_views/virtual_scroll_view.rs
@@ -38,6 +38,10 @@ pub struct VirtualScrollViewProps<
     /// Enable scrolling with arrow keys.
     #[props(default = true, into)]
     pub scroll_with_arrows: bool,
+    /// Cache elements or not, changing `builder_args` will invalidate the cache if enabled.
+    /// Default is `true`.
+    #[props(default = true, into)]
+    pub cache_elements: bool,
 }
 
 impl<
@@ -325,15 +329,24 @@ pub fn VirtualScrollView<
         items_length as f32,
     );
 
-    let children = use_memo(use_reactive(
-        &(render_range, props.builder_args),
-        move |(render_range, builder_args)| {
-            render_range
-                .clone()
-                .map(|i| (props.builder)(i, &builder_args))
-                .collect::<Vec<Element>>()
-        },
-    ));
+    let children = if props.cache_elements {
+        let children = use_memo(use_reactive(
+            &(render_range, props.builder_args),
+            move |(render_range, builder_args)| {
+                render_range
+                    .clone()
+                    .map(|i| (props.builder)(i, &builder_args))
+                    .collect::<Vec<Element>>()
+            },
+        ));
+        rsx!({ children.read().iter() })
+    } else {
+        let children = render_range
+            .clone()
+            .map(|i| (props.builder)(i, &props.builder_args))
+            .collect::<Vec<Element>>();
+        rsx!({ children.iter() })
+    };
 
     let is_scrolling_x = clicking_scrollbar
         .read()
@@ -369,7 +382,7 @@ pub fn VirtualScrollView<
                     direction: "{user_direction}",
                     reference: node_ref,
                     onwheel: onwheel,
-                    {children.read().iter()}
+                    {children}
                 }
                 ScrollBar {
                     width: "100%",
diff --git a/examples/cloned_editor.rs b/examples/cloned_editor.rs
index a663bb087..270ed64ef 100644
--- a/examples/cloned_editor.rs
+++ b/examples/cloned_editor.rs
@@ -58,6 +58,7 @@ fn Body() -> Element {
                 length: editor.len_lines(),
                 item_size: 35.0,
                 scroll_with_arrows: false,
+                cache_elements: false,
                 builder: move |line_index, _: &Option<()>| {
                     let editor = editable.editor().read();
                     let line = editor.line(line_index).unwrap();
@@ -134,6 +135,7 @@ fn Body() -> Element {
                 length: editor.len_lines(),
                 item_size: 35.0,
                 scroll_with_arrows: false,
+                cache_elements: false,
                 builder: move |line_index, _: &Option<()>| {
                     let editor = editable.editor().read();
                     let line = editor.line(line_index).unwrap();

From 1b5ff46b1837467aa52dd40d314ede26793cb454 Mon Sep 17 00:00:00 2001
From: Marc Espin <mespinsanz@gmail.com>
Date: Sat, 30 Mar 2024 17:13:52 +0100
Subject: [PATCH 13/23] fix: Skip placeholder elements in layers (#558)

* fix: Measure layout from text-owned elements

* fix: Skip placeholder elements in layers

* fmt and clippy
---
 crates/components/src/loader.rs    |  4 +++-
 crates/dom/src/dom_adapter.rs      |  4 +---
 crates/dom/src/mutations_writer.rs |  4 ++++
 crates/native-core/src/node.rs     | 12 ++++++++++++
 crates/native-core/src/node_ref.rs |  4 ++++
 crates/state/src/layer.rs          |  7 ++-----
 crates/state/src/viewport.rs       |  7 ++-----
 7 files changed, 28 insertions(+), 14 deletions(-)

diff --git a/crates/components/src/loader.rs b/crates/components/src/loader.rs
index 6340f17c8..4bfb92ed6 100644
--- a/crates/components/src/loader.rs
+++ b/crates/components/src/loader.rs
@@ -1,6 +1,8 @@
 use dioxus::prelude::*;
 use freya_elements::elements as dioxus_elements;
-use freya_hooks::{use_animation, use_applied_theme, AnimNum, LoaderTheme, LoaderThemeWith, OnFinish};
+use freya_hooks::{
+    use_animation, use_applied_theme, AnimNum, LoaderTheme, LoaderThemeWith, OnFinish,
+};
 
 /// [`Loader`] component properties.
 #[derive(Props, Clone, PartialEq)]
diff --git a/crates/dom/src/dom_adapter.rs b/crates/dom/src/dom_adapter.rs
index e2f5cc33e..3ebe00290 100644
--- a/crates/dom/src/dom_adapter.rs
+++ b/crates/dom/src/dom_adapter.rs
@@ -1,6 +1,4 @@
-use dioxus_native_core::{
-    prelude::NodeType, real_dom::NodeImmutable, tree::TreeRef, NodeId,
-};
+use dioxus_native_core::{prelude::NodeType, real_dom::NodeImmutable, tree::TreeRef, NodeId};
 use freya_node_state::LayoutState;
 use rustc_hash::FxHashMap;
 use torin::prelude::*;
diff --git a/crates/dom/src/mutations_writer.rs b/crates/dom/src/mutations_writer.rs
index 9f5029f86..5774b47b4 100644
--- a/crates/dom/src/mutations_writer.rs
+++ b/crates/dom/src/mutations_writer.rs
@@ -27,6 +27,10 @@ impl<'a> MutationsWriter<'a> {
         let tree = self.native_writer.rdom.tree_ref();
         while let Some(node_id) = stack.pop() {
             if let Some(node) = self.native_writer.rdom.get(node_id) {
+                if !node.node_type().is_visible_element() {
+                    continue;
+                }
+
                 let traverse_children = node
                     .node_type()
                     .tag()
diff --git a/crates/native-core/src/node.rs b/crates/native-core/src/node.rs
index 5cb5ac553..f154577cb 100644
--- a/crates/native-core/src/node.rs
+++ b/crates/native-core/src/node.rs
@@ -29,6 +29,17 @@ pub enum NodeType<V: FromAnyValue = ()> {
 }
 
 impl<V: FromAnyValue> NodeType<V> {
+    pub fn is_visible_element(&self) -> bool {
+        if let NodeType::Element(ElementNode { tag, .. }) = self {
+            // No need to consider text spans
+            if tag.has_intrinsic_layout() {
+                return true;
+            }
+        }
+
+        false
+    }
+
     pub fn is_text(&self) -> bool {
         matches!(self, Self::Text(..))
     }
@@ -36,6 +47,7 @@ impl<V: FromAnyValue> NodeType<V> {
     pub fn is_element(&self) -> bool {
         matches!(self, Self::Element(..))
     }
+
     pub fn is_placeholder(&self) -> bool {
         matches!(self, Self::Placeholder)
     }
diff --git a/crates/native-core/src/node_ref.rs b/crates/native-core/src/node_ref.rs
index 50687eabb..772faeb55 100644
--- a/crates/native-core/src/node_ref.rs
+++ b/crates/native-core/src/node_ref.rs
@@ -29,6 +29,10 @@ impl<'a, V: FromAnyValue> NodeView<'a, V> {
         }
     }
 
+    pub fn node_type(&self) -> &'a NodeType<V> {
+        self.inner
+    }
+
     /// Get the node id of the node
     pub fn node_id(&self) -> NodeId {
         self.id
diff --git a/crates/state/src/layer.rs b/crates/state/src/layer.rs
index 4ae5ff409..513a16800 100644
--- a/crates/state/src/layer.rs
+++ b/crates/state/src/layer.rs
@@ -36,11 +36,8 @@ impl State<CustomAttributeValues> for LayerState {
         _children: Vec<<Self::ChildDependencies as Dependancy>::ElementBorrowed<'a>>,
         context: &SendAnyMap,
     ) -> bool {
-        if let Some(tag) = node_view.tag() {
-            // No need to consider text spans
-            if !tag.has_intrinsic_layout() {
-                return false;
-            }
+        if !node_view.node_type().is_visible_element() {
+            return false;
         }
 
         let layers = context.get::<Layers>().unwrap();
diff --git a/crates/state/src/viewport.rs b/crates/state/src/viewport.rs
index d1d2244fb..37f33feca 100644
--- a/crates/state/src/viewport.rs
+++ b/crates/state/src/viewport.rs
@@ -36,11 +36,8 @@ impl State<CustomAttributeValues> for ViewportState {
         _children: Vec<<Self::ChildDependencies as Dependancy>::ElementBorrowed<'a>>,
         _context: &SendAnyMap,
     ) -> bool {
-        if let Some(tag) = node_view.tag() {
-            // No need to consider text spans
-            if !tag.has_intrinsic_layout() {
-                return false;
-            }
+        if !node_view.node_type().is_visible_element() {
+            return false;
         }
 
         let mut viewports_state = ViewportState {

From b6cf6a8cb3b1e235eec812e8ccd30072af718ab3 Mon Sep 17 00:00:00 2001
From: marc2332 <mespinsanz@gmail.com>
Date: Mon, 1 Apr 2024 10:50:19 +0200
Subject: [PATCH 14/23] chore: Clean up Devtools Node component

---
 crates/devtools/src/node.rs | 12 +++++-------
 1 file changed, 5 insertions(+), 7 deletions(-)

diff --git a/crates/devtools/src/node.rs b/crates/devtools/src/node.rs
index b705a026b..5d17cb9dd 100644
--- a/crates/devtools/src/node.rs
+++ b/crates/devtools/src/node.rs
@@ -18,10 +18,8 @@ pub fn NodeElement(
         move |_| onselected.call(node.clone())
     };
 
-    let onmouseover = move |_| {
-        if *status.read() != ButtonStatus::Hovering {
-            status.set(ButtonStatus::Hovering);
-        }
+    let onmouseenter = move |_| {
+        status.set(ButtonStatus::Hovering);
     };
 
     let onmouseleave = move |_| {
@@ -47,16 +45,16 @@ pub fn NodeElement(
         rect {
             corner_radius: "7",
             padding: "5",
-            background: background,
+            background,
             width: "100%",
             height: "27",
             offset_x: "{margin_left}",
             onmousedown,
-            onmouseover,
+            onmouseenter,
             onmouseleave,
             label {
                 font_size: "14",
-                color: "{color}",
+                color,
                 "{node.tag} #{node.id:?}"
             }
         }

From 391821b6aabd340c481fd015d688cdd64372af4d Mon Sep 17 00:00:00 2001
From: marc2332 <mespinsanz@gmail.com>
Date: Mon, 1 Apr 2024 12:43:34 +0200
Subject: [PATCH 15/23] chore: Clean up VirtualScrollView

---
 crates/components/src/scroll_views/virtual_scroll_view.rs | 7 ++-----
 1 file changed, 2 insertions(+), 5 deletions(-)

diff --git a/crates/components/src/scroll_views/virtual_scroll_view.rs b/crates/components/src/scroll_views/virtual_scroll_view.rs
index 2482fd8a6..c73d85530 100644
--- a/crates/components/src/scroll_views/virtual_scroll_view.rs
+++ b/crates/components/src/scroll_views/virtual_scroll_view.rs
@@ -341,11 +341,8 @@ pub fn VirtualScrollView<
         ));
         rsx!({ children.read().iter() })
     } else {
-        let children = render_range
-            .clone()
-            .map(|i| (props.builder)(i, &props.builder_args))
-            .collect::<Vec<Element>>();
-        rsx!({ children.iter() })
+        let children = render_range.map(|i| (props.builder)(i, &props.builder_args));
+        rsx!({ children })
     };
 
     let is_scrolling_x = clicking_scrollbar

From 6372a1a4fae091a913e98ca6b0310fa9a9c1f4b7 Mon Sep 17 00:00:00 2001
From: Marc Espin <mespinsanz@gmail.com>
Date: Mon, 1 Apr 2024 12:44:01 +0200
Subject: [PATCH 16/23] fix: Horizontal scrolling with keyboard (#561)

---
 .../src/scroll_views/scroll_view.rs           | 49 ++++++++----------
 .../src/scroll_views/virtual_scroll_view.rs   | 50 ++++++++-----------
 crates/native-core/src/events.rs              |  2 +-
 3 files changed, 44 insertions(+), 57 deletions(-)

diff --git a/crates/components/src/scroll_views/scroll_view.rs b/crates/components/src/scroll_views/scroll_view.rs
index d0d8d252e..8f2ce1191 100644
--- a/crates/components/src/scroll_views/scroll_view.rs
+++ b/crates/components/src/scroll_views/scroll_view.rs
@@ -104,11 +104,26 @@ pub fn ScrollView(props: ScrollViewProps) -> Element {
             1.0
         };
 
-        if !*clicking_shift.peek() {
-            let wheel_y = e.get_delta_y() as f32 * speed_multiplier;
+        let wheel_movement = e.get_delta_y() as f32 * speed_multiplier;
 
+        if *clicking_shift.peek() {
+            let scroll_position_x = get_scroll_position_from_wheel(
+                wheel_movement,
+                size.inner.width,
+                size.area.width(),
+                corrected_scrolled_x,
+            );
+
+            // Only scroll when there is still area to scroll
+            if *scrolled_x.peek() != scroll_position_x {
+                e.stop_propagation();
+                *scrolled_x.write() = scroll_position_x;
+            } else {
+                return;
+            }
+        } else {
             let scroll_position_y = get_scroll_position_from_wheel(
-                wheel_y,
+                wheel_movement,
                 size.inner.height,
                 size.area.height(),
                 corrected_scrolled_y,
@@ -123,27 +138,6 @@ pub fn ScrollView(props: ScrollViewProps) -> Element {
             }
         }
 
-        let wheel_x = if *clicking_shift.peek() {
-            e.get_delta_y() as f32
-        } else {
-            e.get_delta_x() as f32
-        } * speed_multiplier;
-
-        let scroll_position_x = get_scroll_position_from_wheel(
-            wheel_x,
-            size.inner.width,
-            size.area.width(),
-            corrected_scrolled_x,
-        );
-
-        // Only scroll when there is still area to scroll
-        if *scrolled_x.peek() != scroll_position_x {
-            e.stop_propagation();
-            *scrolled_x.write() = scroll_position_x;
-        } else {
-            return;
-        }
-
         focus.focus();
     };
 
@@ -181,10 +175,6 @@ pub fn ScrollView(props: ScrollViewProps) -> Element {
     };
 
     let onkeydown = move |e: KeyboardEvent| {
-        if !focus.is_focused() {
-            return;
-        }
-
         match &e.key {
             Key::Shift => {
                 clicking_shift.set(true);
@@ -193,6 +183,9 @@ pub fn ScrollView(props: ScrollViewProps) -> Element {
                 clicking_alt.set(true);
             }
             k => {
+                if !focus.is_focused() {
+                    return;
+                }
                 if !scroll_with_arrows
                     && (k == &Key::ArrowUp
                         || k == &Key::ArrowRight
diff --git a/crates/components/src/scroll_views/virtual_scroll_view.rs b/crates/components/src/scroll_views/virtual_scroll_view.rs
index c73d85530..421989175 100644
--- a/crates/components/src/scroll_views/virtual_scroll_view.rs
+++ b/crates/components/src/scroll_views/virtual_scroll_view.rs
@@ -162,11 +162,26 @@ pub fn VirtualScrollView<
             1.0
         };
 
-        if !*clicking_shift.peek() {
-            let wheel_y = e.get_delta_y() as f32 * speed_multiplier;
+        let wheel_movement = e.get_delta_y() as f32 * speed_multiplier;
 
+        if *clicking_shift.peek() {
+            let scroll_position_x = get_scroll_position_from_wheel(
+                wheel_movement,
+                inner_size,
+                size.area.width(),
+                corrected_scrolled_x,
+            );
+
+            // Only scroll when there is still area to scroll
+            if *scrolled_x.peek() != scroll_position_x {
+                e.stop_propagation();
+                *scrolled_x.write() = scroll_position_x;
+            } else {
+                return;
+            }
+        } else {
             let scroll_position_y = get_scroll_position_from_wheel(
-                wheel_y,
+                wheel_movement,
                 inner_size,
                 size.area.height(),
                 corrected_scrolled_y,
@@ -181,27 +196,6 @@ pub fn VirtualScrollView<
             }
         }
 
-        let wheel_x = if *clicking_shift.peek() {
-            e.get_delta_y() as f32
-        } else {
-            e.get_delta_x() as f32
-        } * speed_multiplier;
-
-        let scroll_position_x = get_scroll_position_from_wheel(
-            wheel_x,
-            inner_size,
-            size.area.width(),
-            corrected_scrolled_x,
-        );
-
-        // Only scroll when there is still area to scroll
-        if *scrolled_x.peek() != scroll_position_x {
-            e.stop_propagation();
-            *scrolled_x.write() = scroll_position_x;
-        } else {
-            return;
-        }
-
         focus.focus();
     };
 
@@ -233,10 +227,6 @@ pub fn VirtualScrollView<
     };
 
     let onkeydown = move |e: KeyboardEvent| {
-        if !focus.is_focused() {
-            return;
-        }
-
         match &e.key {
             Key::Shift => {
                 clicking_shift.set(true);
@@ -245,6 +235,10 @@ pub fn VirtualScrollView<
                 clicking_alt.set(true);
             }
             k => {
+                if !focus.is_focused() {
+                    return;
+                }
+
                 if !scroll_with_arrows
                     && (k == &Key::ArrowUp
                         || k == &Key::ArrowRight
diff --git a/crates/native-core/src/events.rs b/crates/native-core/src/events.rs
index 6d985630f..979dbb44c 100644
--- a/crates/native-core/src/events.rs
+++ b/crates/native-core/src/events.rs
@@ -215,7 +215,7 @@ impl EventName {
 
     // Only let events that do not move the mouse, go through solid nodes
     pub fn does_go_through_solid(&self) -> bool {
-        matches!(self, Self::KeyDown)
+        matches!(self, Self::KeyDown | Self::KeyUp)
     }
 
     // Check if this event can change the hover state of a Node.

From eb8b31adce3e96a1d2385da5b0e1d243b90ac8bb Mon Sep 17 00:00:00 2001
From: Marc Espin <mespinsanz@gmail.com>
Date: Mon, 1 Apr 2024 12:44:41 +0200
Subject: [PATCH 17/23] fix: Remove paragraph elements (#562)

---
 crates/dom/src/dom.rs              |  2 ++
 crates/dom/src/mutations_writer.rs | 15 ++++++++++++---
 2 files changed, 14 insertions(+), 3 deletions(-)

diff --git a/crates/dom/src/dom.rs b/crates/dom/src/dom.rs
index 393bd4f75..2325d9084 100644
--- a/crates/dom/src/dom.rs
+++ b/crates/dom/src/dom.rs
@@ -146,6 +146,7 @@ impl FreyaDOM {
                 .create_mutation_writer(&mut self.rdom),
             layout: &mut self.torin.lock().unwrap(),
             layers: &self.layers,
+            paragraphs: &self.paragraphs,
         });
 
         let mut ctx = SendAnyMap::new();
@@ -166,6 +167,7 @@ impl FreyaDOM {
                 .create_mutation_writer(&mut self.rdom),
             layout: &mut self.torin.lock().unwrap(),
             layers: &self.layers,
+            paragraphs: &self.paragraphs,
         });
 
         // Update the Nodes states
diff --git a/crates/dom/src/mutations_writer.rs b/crates/dom/src/mutations_writer.rs
index 5774b47b4..a86ca373b 100644
--- a/crates/dom/src/mutations_writer.rs
+++ b/crates/dom/src/mutations_writer.rs
@@ -2,8 +2,8 @@ use dioxus_core::{ElementId, WriteMutations};
 use dioxus_native_core::{
     dioxus::DioxusNativeCoreMutationWriter, prelude::NodeImmutable, tree::TreeRef, NodeId,
 };
-use freya_common::Layers;
-use freya_node_state::{CustomAttributeValues, LayerState};
+use freya_common::{Layers, ParagraphElements};
+use freya_node_state::{CursorSettings, CustomAttributeValues, LayerState};
 use torin::torin::Torin;
 
 use crate::prelude::DioxusDOMAdapter;
@@ -12,6 +12,7 @@ pub struct MutationsWriter<'a> {
     pub native_writer: DioxusNativeCoreMutationWriter<'a, CustomAttributeValues>,
     pub layout: &'a mut Torin<NodeId>,
     pub layers: &'a Layers,
+    pub paragraphs: &'a ParagraphElements,
 }
 
 impl<'a> MutationsWriter<'a> {
@@ -22,7 +23,7 @@ impl<'a> MutationsWriter<'a> {
         // Remove from layout
         self.layout.remove(node_id, &mut dom_adapter, true);
 
-        // Remove from layers
+        // Remove from layers and paragraph elements
         let mut stack = vec![node_id];
         let tree = self.native_writer.rdom.tree_ref();
         while let Some(node_id) = stack.pop() {
@@ -41,9 +42,17 @@ impl<'a> MutationsWriter<'a> {
                     stack.extend(children.iter().copied().rev());
                 }
 
+                // Remove from layers
                 let layer_state = node.get::<LayerState>().unwrap();
                 self.layers
                     .remove_node_from_layer(node_id, layer_state.layer);
+
+                // Remove from paragraph elements
+                let cursor_settings = node.get::<CursorSettings>().unwrap();
+                if let Some(cursor_ref) = cursor_settings.cursor_ref.as_ref() {
+                    self.paragraphs
+                        .remove_paragraph(node_id, &cursor_ref.text_id);
+                }
             }
         }
     }

From 4014b27c658ae9677030e926db9ab27128750712 Mon Sep 17 00:00:00 2001
From: Marc Espin <mespinsanz@gmail.com>
Date: Mon, 1 Apr 2024 12:46:24 +0200
Subject: [PATCH 18/23] chore: Merge dom and core crates (#563)

* fix: Remove paragraph elements

* chore: Merge freya-dom and freya-core crates

* resolve conflicts
---
 Cargo.toml                                    |  3 +--
 crates/core/Cargo.toml                        |  6 ++---
 .../accessibility/accessibility_manager.rs    |  4 +--
 crates/core/src/accessibility/mod.rs          |  6 +++--
 .../{dom/src => core/src/dom}/dom_adapter.rs  |  0
 .../{dom/src/dom.rs => core/src/dom/doms.rs}  |  2 +-
 crates/core/src/dom/mod.rs                    |  7 +++++
 .../src => core/src/dom}/mutations_writer.rs  |  0
 .../src => core/src/dom}/paragraph_utils.rs   |  0
 crates/core/src/events/events_measurer.rs     |  5 +---
 crates/core/src/layout/layout_measurer.rs     |  3 +--
 crates/core/src/layout/skia_measurer.rs       |  4 ++-
 crates/core/src/lib.rs                        |  2 ++
 crates/core/src/node.rs                       |  4 ++-
 crates/core/src/plugins.rs                    |  3 ++-
 crates/core/src/render.rs                     |  3 ++-
 crates/devtools/Cargo.toml                    |  3 +--
 crates/devtools/src/lib.rs                    |  6 +++--
 crates/dom/Cargo.toml                         | 26 -------------------
 crates/dom/src/lib.rs                         |  9 -------
 crates/freya/Cargo.toml                       |  1 -
 crates/freya/src/launch.rs                    |  2 +-
 crates/renderer/Cargo.toml                    |  1 -
 crates/renderer/src/app.rs                    |  1 -
 crates/renderer/src/elements/image.rs         |  3 ++-
 crates/renderer/src/elements/paragraph.rs     |  4 +--
 crates/renderer/src/elements/rect.rs          |  3 ++-
 crates/renderer/src/elements/svg.rs           |  3 ++-
 crates/renderer/src/lib.rs                    |  2 +-
 crates/renderer/src/renderer.rs               |  3 ++-
 crates/testing/Cargo.toml                     |  3 +--
 crates/testing/src/launch.rs                  |  1 -
 crates/testing/src/test_handler.rs            |  1 -
 crates/testing/src/test_utils.rs              |  1 -
 34 files changed, 50 insertions(+), 75 deletions(-)
 rename crates/{dom/src => core/src/dom}/dom_adapter.rs (100%)
 rename crates/{dom/src/dom.rs => core/src/dom/doms.rs} (99%)
 create mode 100644 crates/core/src/dom/mod.rs
 rename crates/{dom/src => core/src/dom}/mutations_writer.rs (100%)
 rename crates/{dom/src => core/src/dom}/paragraph_utils.rs (100%)
 delete mode 100644 crates/dom/Cargo.toml
 delete mode 100644 crates/dom/src/lib.rs

diff --git a/Cargo.toml b/Cargo.toml
index 51ea3806b..5105095e1 100644
--- a/Cargo.toml
+++ b/Cargo.toml
@@ -4,7 +4,7 @@ version = "0.0.0"
 edition = "2021"
 
 [workspace]
-members = ["crates/renderer", "crates/state", "crates/freya", "crates/elements", "crates/components", "crates/hooks", "crates/common", "crates/core", "crates/testing", "crates/devtools", "crates/dom", "crates/torin", "crates/engine", "./examples/installer",  "crates/native-core",  "crates/native-core-macro"]
+members = ["crates/renderer", "crates/state", "crates/freya", "crates/elements", "crates/components", "crates/hooks", "crates/common", "crates/core", "crates/testing", "crates/devtools", "crates/torin", "crates/engine", "./examples/installer",  "crates/native-core",  "crates/native-core-macro"]
 
 [features]
 log = ["freya/log"]
@@ -32,7 +32,6 @@ freya-common = { path = "crates/common", version = "0.1" }
 freya-hooks = { path = "crates/hooks", version = "0.1" }
 freya-core = { path = "crates/core", version = "0.1" }
 freya-components = { path = "crates/components", version = "0.1" }
-freya-dom = { path = "crates/dom", version = "0.1" }
 freya-testing = { path = "crates/testing", version = "0.1" }
 freya-engine = { path = "crates/engine", version = "0.1" }
 torin = { path = "crates/torin", version = "0.1" }
diff --git a/crates/core/Cargo.toml b/crates/core/Cargo.toml
index d5e2f5ad3..1db99a514 100644
--- a/crates/core/Cargo.toml
+++ b/crates/core/Cargo.toml
@@ -15,14 +15,13 @@ categories = ["gui", "asynchronous"]
 features = ["freya-engine/mocked-engine"]
 
 [features]
-devtools = []
+shared = []
 skia-engine = ["freya-engine/skia-engine"]
 
 [dependencies]
 freya-node-state = { workspace = true }
 freya-elements = { workspace = true }
 freya-common = { workspace = true }
-freya-dom = { workspace = true }
 freya-engine = { workspace = true }
 torin = { workspace = true }
 
@@ -33,7 +32,8 @@ tokio = { workspace = true }
 winit = { workspace = true }
 accesskit = { workspace = true }
 
-rustc-hash= { workspace = true }
+rustc-hash = { workspace = true }
+tracing = { workspace = true }
 uuid = { workspace = true }
 itertools = "0.11.0"
 smallvec = { workspace = true }
diff --git a/crates/core/src/accessibility/accessibility_manager.rs b/crates/core/src/accessibility/accessibility_manager.rs
index 49e3b038d..3d3837886 100644
--- a/crates/core/src/accessibility/accessibility_manager.rs
+++ b/crates/core/src/accessibility/accessibility_manager.rs
@@ -1,8 +1,8 @@
-use crate::accessibility::*;
+use crate::{accessibility::*, dom::DioxusNode};
 use accesskit::{
     Action, DefaultActionVerb, Node, NodeBuilder, NodeClassSet, Rect, Role, Tree, TreeUpdate,
 };
-use freya_dom::prelude::DioxusNode;
+
 use freya_node_state::AccessibilityNodeState;
 use std::sync::{Arc, Mutex};
 use torin::prelude::LayoutNode;
diff --git a/crates/core/src/accessibility/mod.rs b/crates/core/src/accessibility/mod.rs
index 40bb86206..1621891d1 100644
--- a/crates/core/src/accessibility/mod.rs
+++ b/crates/core/src/accessibility/mod.rs
@@ -1,9 +1,11 @@
 pub mod accessibility_manager;
 pub use accessibility_manager::*;
 
-use crate::types::AccessibilityId;
+use crate::{
+    dom::{DioxusDOM, DioxusNode},
+    types::AccessibilityId,
+};
 use dioxus_native_core::{node::NodeType, real_dom::NodeImmutable, tags::TagName, NodeId};
-use freya_dom::dom::{DioxusDOM, DioxusNode};
 use freya_node_state::AccessibilityNodeState;
 use torin::torin::Torin;
 
diff --git a/crates/dom/src/dom_adapter.rs b/crates/core/src/dom/dom_adapter.rs
similarity index 100%
rename from crates/dom/src/dom_adapter.rs
rename to crates/core/src/dom/dom_adapter.rs
diff --git a/crates/dom/src/dom.rs b/crates/core/src/dom/doms.rs
similarity index 99%
rename from crates/dom/src/dom.rs
rename to crates/core/src/dom/doms.rs
index 2325d9084..05bc0bc77 100644
--- a/crates/dom/src/dom.rs
+++ b/crates/core/src/dom/doms.rs
@@ -17,7 +17,7 @@ use torin::prelude::*;
 use tracing::info;
 use uuid::Uuid;
 
-use crate::{mutations_writer::MutationsWriter, paragraph_utils::measure_paragraph};
+use super::{mutations_writer::MutationsWriter, paragraph_utils::measure_paragraph};
 
 pub type DioxusDOM = RealDom<CustomAttributeValues>;
 pub type DioxusNode<'a> = NodeRef<'a, CustomAttributeValues>;
diff --git a/crates/core/src/dom/mod.rs b/crates/core/src/dom/mod.rs
new file mode 100644
index 000000000..62aebb86b
--- /dev/null
+++ b/crates/core/src/dom/mod.rs
@@ -0,0 +1,7 @@
+pub mod dom_adapter;
+pub mod doms;
+mod mutations_writer;
+mod paragraph_utils;
+
+pub use dom_adapter::*;
+pub use doms::*;
diff --git a/crates/dom/src/mutations_writer.rs b/crates/core/src/dom/mutations_writer.rs
similarity index 100%
rename from crates/dom/src/mutations_writer.rs
rename to crates/core/src/dom/mutations_writer.rs
diff --git a/crates/dom/src/paragraph_utils.rs b/crates/core/src/dom/paragraph_utils.rs
similarity index 100%
rename from crates/dom/src/paragraph_utils.rs
rename to crates/core/src/dom/paragraph_utils.rs
diff --git a/crates/core/src/events/events_measurer.rs b/crates/core/src/events/events_measurer.rs
index 0c2f60cce..1f14f33ec 100644
--- a/crates/core/src/events/events_measurer.rs
+++ b/crates/core/src/events/events_measurer.rs
@@ -1,7 +1,6 @@
 use dioxus_native_core::real_dom::NodeImmutable;
 use dioxus_native_core::NodeId;
 use dioxus_native_core::{prelude::NodeImmutableDioxusExt, tree::TreeRef};
-use freya_dom::prelude::*;
 
 use freya_engine::prelude::*;
 use freya_node_state::{Fill, Style, ViewportState};
@@ -9,9 +8,7 @@ use itertools::sorted;
 
 pub use crate::events::{DomEvent, NodesState, PlatformEvent};
 
-use crate::types::{EventEmitter, EventsQueue, PotentialEvents};
-
-use super::potential_event::PotentialEvent;
+use crate::prelude::*;
 
 /// Process the events and emit them to the VirtualDOM
 pub fn process_events(
diff --git a/crates/core/src/layout/layout_measurer.rs b/crates/core/src/layout/layout_measurer.rs
index 06475948a..6d8dc928c 100644
--- a/crates/core/src/layout/layout_measurer.rs
+++ b/crates/core/src/layout/layout_measurer.rs
@@ -1,5 +1,4 @@
-use crate::layout::*;
-use freya_dom::prelude::{DioxusDOMAdapter, FreyaDOM};
+use crate::{dom::*, layout::*};
 use freya_engine::prelude::*;
 use torin::geometry::Area;
 
diff --git a/crates/core/src/layout/skia_measurer.rs b/crates/core/src/layout/skia_measurer.rs
index b0f7d6f84..779ea47a6 100644
--- a/crates/core/src/layout/skia_measurer.rs
+++ b/crates/core/src/layout/skia_measurer.rs
@@ -7,11 +7,13 @@ use dioxus_native_core::{
     NodeId,
 };
 use freya_common::{CachedParagraph, NodeReferenceLayout};
-use freya_dom::prelude::{DioxusDOM, DioxusNode};
 use freya_node_state::{FontStyleState, LayoutState, TextOverflow};
 
 use freya_engine::prelude::*;
 use torin::prelude::{LayoutMeasurer, LayoutNode, Node, Size2D};
+
+use crate::dom::*;
+
 /// Provides Text measurements using Skia APIs like SkParagraph
 pub struct SkiaMeasurer<'a> {
     pub font_collection: &'a FontCollection,
diff --git a/crates/core/src/lib.rs b/crates/core/src/lib.rs
index fbe6a457c..610826142 100644
--- a/crates/core/src/lib.rs
+++ b/crates/core/src/lib.rs
@@ -1,4 +1,5 @@
 pub mod accessibility;
+pub mod dom;
 pub mod events;
 pub mod layout;
 pub mod navigation_mode;
@@ -9,6 +10,7 @@ pub mod types;
 
 pub mod prelude {
     pub use crate::accessibility::*;
+    pub use crate::dom::*;
     pub use crate::events::*;
     pub use crate::layout::*;
     pub use crate::navigation_mode::*;
diff --git a/crates/core/src/node.rs b/crates/core/src/node.rs
index 84c3312f1..816a1aa28 100644
--- a/crates/core/src/node.rs
+++ b/crates/core/src/node.rs
@@ -1,5 +1,5 @@
 use dioxus_native_core::real_dom::NodeImmutable;
-use freya_dom::prelude::DioxusNode;
+
 use freya_engine::prelude::*;
 use freya_node_state::{
     Border, CornerRadius, CursorSettings, Fill, FontStyleState, LayoutState, References, Shadow,
@@ -7,6 +7,8 @@ use freya_node_state::{
 };
 use torin::{alignment::Alignment, direction::DirectionMode, gaps::Gaps, size::Size};
 
+use crate::dom::DioxusNode;
+
 #[derive(Clone, PartialEq)]
 pub struct NodeState {
     pub cursor: CursorSettings,
diff --git a/crates/core/src/plugins.rs b/crates/core/src/plugins.rs
index 7062891e1..acb6b13fb 100644
--- a/crates/core/src/plugins.rs
+++ b/crates/core/src/plugins.rs
@@ -1,9 +1,10 @@
 use dioxus_native_core::NodeId;
-use freya_dom::dom::FreyaDOM;
 use freya_engine::prelude::{Canvas, FontCollection};
 use torin::torin::Torin;
 use winit::window::Window;
 
+use crate::dom::FreyaDOM;
+
 /// Manages all loaded plugins.
 #[derive(Default)]
 pub struct PluginsManager {
diff --git a/crates/core/src/render.rs b/crates/core/src/render.rs
index 6302f8df5..4b3b85f12 100644
--- a/crates/core/src/render.rs
+++ b/crates/core/src/render.rs
@@ -1,10 +1,11 @@
 use dioxus_native_core::{real_dom::NodeImmutable, NodeId};
-use freya_dom::prelude::FreyaDOM;
 use freya_engine::prelude::*;
 use freya_node_state::ViewportState;
 use itertools::sorted;
 use torin::prelude::{LayoutNode, Torin};
 
+use crate::dom::FreyaDOM;
+
 /// Call the render function for the nodes that should be rendered.
 pub fn process_render(
     fdom: &FreyaDOM,
diff --git a/crates/devtools/Cargo.toml b/crates/devtools/Cargo.toml
index 47bc2b217..7c34bdafc 100644
--- a/crates/devtools/Cargo.toml
+++ b/crates/devtools/Cargo.toml
@@ -22,9 +22,8 @@ freya-node-state = { workspace = true }
 freya-renderer = { workspace = true }
 freya-elements = { workspace = true }
 freya-hooks = { workspace = true }
-freya-core = { workspace = true }
+freya-core = { workspace = true, features = ["shared"] }
 freya-components = { workspace = true }
-freya-dom = { workspace = true, features = ["shared"] }
 freya-engine = { workspace = true }
 torin = { workspace = true }
 
diff --git a/crates/devtools/src/lib.rs b/crates/devtools/src/lib.rs
index 0e24bc4c3..f84a64a41 100644
--- a/crates/devtools/src/lib.rs
+++ b/crates/devtools/src/lib.rs
@@ -6,8 +6,10 @@ use dioxus_native_core::tree::TreeRef;
 use dioxus_native_core::NodeId;
 use dioxus_router::prelude::*;
 use freya_components::*;
-use freya_core::node::{get_node_state, NodeState};
-use freya_dom::prelude::SafeDOM;
+use freya_core::{
+    dom::SafeDOM,
+    node::{get_node_state, NodeState},
+};
 use freya_elements::elements as dioxus_elements;
 use freya_hooks::{use_init_accessibility, use_init_theme, use_theme, DARK_THEME};
 
diff --git a/crates/dom/Cargo.toml b/crates/dom/Cargo.toml
deleted file mode 100644
index 908f7de4f..000000000
--- a/crates/dom/Cargo.toml
+++ /dev/null
@@ -1,26 +0,0 @@
-[package]
-name = "freya-dom"
-description = "Internal DOM abstractions for Freya."
-version = "0.1.2"
-edition = "2021"
-license = "MIT"
-authors = ["Marc Espín <mespinsanz@gmail.com>"]
-readme = "../../readme.md"
-homepage = "https://freyaui.dev/"
-repository = "https://github.com/marc2332/freya"
-keywords = ["gui", "ui", "desktop", "skia", "dioxus"]
-categories = ["gui", "asynchronous"]
-
-[features]
-shared = []
-
-[dependencies]
-freya-common = { workspace = true }
-freya-node-state = { workspace = true }
-torin = { workspace = true }
-
-dioxus-native-core = { workspace = true }
-dioxus-core = { workspace = true }
-rustc-hash = { workspace = true }
-tracing = { workspace = true }
-uuid = { workspace = true }
diff --git a/crates/dom/src/lib.rs b/crates/dom/src/lib.rs
deleted file mode 100644
index fbad71fd8..000000000
--- a/crates/dom/src/lib.rs
+++ /dev/null
@@ -1,9 +0,0 @@
-pub mod dom;
-pub mod dom_adapter;
-mod mutations_writer;
-mod paragraph_utils;
-
-pub mod prelude {
-    pub use crate::dom::*;
-    pub use crate::dom_adapter::*;
-}
diff --git a/crates/freya/Cargo.toml b/crates/freya/Cargo.toml
index 0a1fc8879..7ceb63906 100644
--- a/crates/freya/Cargo.toml
+++ b/crates/freya/Cargo.toml
@@ -32,7 +32,6 @@ freya-common = { workspace = true }
 freya-hooks = { workspace = true }
 freya-core = { workspace = true }
 freya-components = { workspace = true }
-freya-dom = { workspace = true }
 freya-engine = { workspace = true }
 torin = { workspace = true }
 
diff --git a/crates/freya/src/launch.rs b/crates/freya/src/launch.rs
index 2e2bf59b8..5edb75c3f 100644
--- a/crates/freya/src/launch.rs
+++ b/crates/freya/src/launch.rs
@@ -180,7 +180,7 @@ pub fn launch_with_props(app: AppComponent, title: &'static str, (width, height)
 /// }
 /// ```
 pub fn launch_cfg<T: 'static + Clone + Send>(app: AppComponent, config: LaunchConfig<T>) {
-    use freya_dom::prelude::{FreyaDOM, SafeDOM};
+    use freya_core::prelude::{FreyaDOM, SafeDOM};
 
     let fdom = FreyaDOM::default();
     let sdom = SafeDOM::new(fdom);
diff --git a/crates/renderer/Cargo.toml b/crates/renderer/Cargo.toml
index 73d0c839d..d30260fef 100644
--- a/crates/renderer/Cargo.toml
+++ b/crates/renderer/Cargo.toml
@@ -23,7 +23,6 @@ freya-node-state = { workspace = true }
 freya-elements = { workspace = true }
 freya-common = { workspace = true }
 freya-core = { workspace = true }
-freya-dom = { workspace = true }
 freya-engine = { workspace = true }
 freya-hooks = { workspace = true }
 torin = { workspace = true }
diff --git a/crates/renderer/src/app.rs b/crates/renderer/src/app.rs
index ca1849b66..ef0f785ce 100644
--- a/crates/renderer/src/app.rs
+++ b/crates/renderer/src/app.rs
@@ -2,7 +2,6 @@ use dioxus_core::{Template, VirtualDom};
 use dioxus_native_core::NodeId;
 use freya_common::EventMessage;
 use freya_core::prelude::*;
-use freya_dom::prelude::SafeDOM;
 use freya_engine::prelude::*;
 use freya_hooks::PlatformInformation;
 use futures_task::Waker;
diff --git a/crates/renderer/src/elements/image.rs b/crates/renderer/src/elements/image.rs
index 46722483d..5dc1cdf59 100644
--- a/crates/renderer/src/elements/image.rs
+++ b/crates/renderer/src/elements/image.rs
@@ -1,5 +1,6 @@
 use dioxus_native_core::real_dom::NodeImmutable;
-use freya_dom::prelude::DioxusNode;
+
+use freya_core::dom::DioxusNode;
 use freya_engine::prelude::*;
 use freya_node_state::{References, Style};
 use torin::geometry::Area;
diff --git a/crates/renderer/src/elements/paragraph.rs b/crates/renderer/src/elements/paragraph.rs
index 529323f65..82326fe59 100644
--- a/crates/renderer/src/elements/paragraph.rs
+++ b/crates/renderer/src/elements/paragraph.rs
@@ -2,8 +2,8 @@ use std::sync::Arc;
 
 use dioxus_native_core::{real_dom::NodeImmutable, SendAnyMap};
 use freya_common::CachedParagraph;
-use freya_core::layout::create_paragraph;
-use freya_dom::prelude::DioxusNode;
+use freya_core::{dom::DioxusNode, layout::create_paragraph};
+
 use freya_engine::prelude::*;
 use freya_node_state::CursorSettings;
 use torin::geometry::Area;
diff --git a/crates/renderer/src/elements/rect.rs b/crates/renderer/src/elements/rect.rs
index a317931e1..87a398530 100644
--- a/crates/renderer/src/elements/rect.rs
+++ b/crates/renderer/src/elements/rect.rs
@@ -1,5 +1,6 @@
 use dioxus_native_core::real_dom::NodeImmutable;
-use freya_dom::prelude::DioxusNode;
+
+use freya_core::dom::DioxusNode;
 use freya_engine::prelude::*;
 use freya_node_state::{BorderAlignment, BorderStyle, Fill, References, ShadowPosition, Style};
 use torin::prelude::Area;
diff --git a/crates/renderer/src/elements/svg.rs b/crates/renderer/src/elements/svg.rs
index 797feb205..b7ddbb3c8 100644
--- a/crates/renderer/src/elements/svg.rs
+++ b/crates/renderer/src/elements/svg.rs
@@ -1,5 +1,6 @@
 use dioxus_native_core::real_dom::NodeImmutable;
-use freya_dom::prelude::DioxusNode;
+
+use freya_core::dom::DioxusNode;
 use freya_engine::prelude::*;
 use freya_node_state::Style;
 use torin::geometry::Area;
diff --git a/crates/renderer/src/lib.rs b/crates/renderer/src/lib.rs
index 7a75dc8b5..ed4435709 100644
--- a/crates/renderer/src/lib.rs
+++ b/crates/renderer/src/lib.rs
@@ -3,7 +3,7 @@ pub use config::*;
 use dioxus_core::VirtualDom;
 use dioxus_native_core::NodeId;
 use freya_common::EventMessage;
-use freya_dom::prelude::SafeDOM;
+use freya_core::dom::SafeDOM;
 use std::sync::{Arc, Mutex};
 use tokio::sync::Notify;
 use winit::event_loop::EventLoopBuilder;
diff --git a/crates/renderer/src/renderer.rs b/crates/renderer/src/renderer.rs
index 6c2190349..5cc0887b3 100644
--- a/crates/renderer/src/renderer.rs
+++ b/crates/renderer/src/renderer.rs
@@ -2,7 +2,8 @@ use dioxus_native_core::prelude::ElementNode;
 use dioxus_native_core::real_dom::NodeImmutable;
 use dioxus_native_core::NodeId;
 use dioxus_native_core::{node::NodeType, tags::TagName};
-use freya_dom::prelude::DioxusNode;
+
+use freya_core::dom::DioxusNode;
 use freya_engine::prelude::*;
 use freya_node_state::{Style, Transform, ViewportState};
 use torin::{
diff --git a/crates/testing/Cargo.toml b/crates/testing/Cargo.toml
index dcc812117..3f960a90a 100644
--- a/crates/testing/Cargo.toml
+++ b/crates/testing/Cargo.toml
@@ -21,8 +21,7 @@ skia-engine = ["freya-engine/skia-engine"]
 freya-elements = { workspace = true }
 freya-common = { workspace = true }
 freya-node-state = { workspace = true }
-freya-core = { workspace = true }
-freya-dom = { workspace = true, features = ["shared"]}
+freya-core = { workspace = true, features = ["shared"] }
 freya-hooks = { workspace = true }
 freya-engine = { workspace = true }
 torin = { workspace = true }
diff --git a/crates/testing/src/launch.rs b/crates/testing/src/launch.rs
index 8e5f7be40..584504007 100644
--- a/crates/testing/src/launch.rs
+++ b/crates/testing/src/launch.rs
@@ -4,7 +4,6 @@ use dioxus_core::VirtualDom;
 use dioxus_core_macro::rsx;
 use freya_common::EventMessage;
 use freya_core::prelude::*;
-use freya_dom::prelude::{FreyaDOM, SafeDOM};
 use freya_engine::prelude::*;
 use freya_hooks::{use_init_accessibility, PlatformInformation};
 use std::sync::{Arc, Mutex};
diff --git a/crates/testing/src/test_handler.rs b/crates/testing/src/test_handler.rs
index 20b3b5fbe..433496a94 100644
--- a/crates/testing/src/test_handler.rs
+++ b/crates/testing/src/test_handler.rs
@@ -4,7 +4,6 @@ use std::time::Duration;
 use dioxus_core::VirtualDom;
 use freya_common::EventMessage;
 use freya_core::prelude::*;
-use freya_dom::prelude::SafeDOM;
 use freya_engine::prelude::FontCollection;
 use freya_hooks::PlatformInformation;
 use tokio::sync::broadcast;
diff --git a/crates/testing/src/test_utils.rs b/crates/testing/src/test_utils.rs
index e14a83f25..1cdee5b41 100644
--- a/crates/testing/src/test_utils.rs
+++ b/crates/testing/src/test_utils.rs
@@ -2,7 +2,6 @@ use dioxus_native_core::real_dom::NodeImmutable;
 use dioxus_native_core::tree::TreeRef;
 use dioxus_native_core::NodeId;
 use freya_core::prelude::*;
-use freya_dom::prelude::{DioxusDOM, DioxusNode, SafeDOM};
 
 use crate::test_node::TestNode;
 

From 05a906b1ca282ccac49d51ca21cd713b1a0cfadc Mon Sep 17 00:00:00 2001
From: Marc Espin <mespinsanz@gmail.com>
Date: Mon, 1 Apr 2024 12:53:47 +0200
Subject: [PATCH 19/23] fix: Proper state equality checks (#564)

---
 crates/state/src/font_style.rs | 10 +---------
 crates/state/src/layout.rs     | 14 +-------------
 2 files changed, 2 insertions(+), 22 deletions(-)

diff --git a/crates/state/src/font_style.rs b/crates/state/src/font_style.rs
index 9154fe417..dc36fd65d 100644
--- a/crates/state/src/font_style.rs
+++ b/crates/state/src/font_style.rs
@@ -270,15 +270,7 @@ impl State<CustomAttributeValues> for FontStyleState {
             }
         }
 
-        let changed_size = self.max_lines != font_style.max_lines
-            || self.line_height != font_style.line_height
-            || self.font_size != font_style.font_size
-            || self.font_family != font_style.font_family
-            || self.font_slant != font_style.font_slant
-            || self.font_weight != font_style.font_weight
-            || self.font_width != font_style.font_width
-            || self.word_spacing != font_style.word_spacing
-            || self.letter_spacing != font_style.letter_spacing;
+        let changed_size = font_style != *self;
 
         if changed_size {
             torin_layout.lock().unwrap().invalidate(node_view.node_id());
diff --git a/crates/state/src/layout.rs b/crates/state/src/layout.rs
index 0c00fbf95..6a74e3f4f 100644
--- a/crates/state/src/layout.rs
+++ b/crates/state/src/layout.rs
@@ -238,19 +238,7 @@ impl State<CustomAttributeValues> for LayoutState {
             }
         }
 
-        let changed = (layout.width != self.width)
-            || (layout.height != self.height)
-            || (layout.minimum_width != self.minimum_width)
-            || (layout.minimum_height != self.minimum_height)
-            || (layout.maximum_width != self.maximum_width)
-            || (layout.maximum_height != self.maximum_height)
-            || (layout.padding != self.padding)
-            || (layout.direction != self.direction)
-            || (layout.offset_x != self.offset_x)
-            || (layout.offset_y != self.offset_y)
-            || (layout.main_alignment != self.main_alignment)
-            || (layout.cross_alignment != self.cross_alignment)
-            || (layout.position != self.position);
+        let changed = layout != *self;
 
         if changed {
             torin_layout.lock().unwrap().invalidate(node_view.node_id());

From 9758ade1d68fc10bdad62071667d3b15464965e2 Mon Sep 17 00:00:00 2001
From: Marc Espin <mespinsanz@gmail.com>
Date: Mon, 1 Apr 2024 12:54:54 +0200
Subject: [PATCH 20/23] feat: Allow overriding the scrollbar theme from
 ScrollView (#565)

* feat: Allow overriding the scrollbar theme from ScrollView

* fmt

* improvements
---
 crates/components/src/scroll_views/mod.rs     |  7 ++---
 .../src/scroll_views/scroll_view.rs           | 30 ++++++++++++-------
 .../src/scroll_views/virtual_scroll_view.rs   | 30 ++++++++++++-------
 crates/hooks/src/theming/dark.rs              |  1 +
 crates/hooks/src/theming/light.rs             |  1 +
 crates/hooks/src/theming/mod.rs               |  1 +
 examples/scroll.rs                            |  2 +-
 7 files changed, 46 insertions(+), 26 deletions(-)

diff --git a/crates/components/src/scroll_views/mod.rs b/crates/components/src/scroll_views/mod.rs
index 2650e11e9..4d043b740 100644
--- a/crates/components/src/scroll_views/mod.rs
+++ b/crates/components/src/scroll_views/mod.rs
@@ -9,9 +9,6 @@ pub use scroll_thumb::*;
 pub use scroll_view::*;
 pub use virtual_scroll_view::*;
 
-#[doc(hidden)]
-pub const SCROLLBAR_SIZE: u8 = 15;
-
 // Holding alt while scrolling makes it 5x faster (VSCode behavior).
 #[doc(hidden)]
 pub const SCROLL_SPEED_MULTIPLIER: f32 = 5.0;
@@ -24,9 +21,9 @@ pub enum Axis {
 }
 
 #[doc(hidden)]
-pub fn get_container_size(is_scrollbar_visible: bool) -> String {
+pub fn get_container_size(is_scrollbar_visible: bool, scrollbar_size: &str) -> String {
     if is_scrollbar_visible {
-        format!("calc(100% - {SCROLLBAR_SIZE})")
+        format!("calc(100% - {scrollbar_size})")
     } else {
         "100%".to_string()
     }
diff --git a/crates/components/src/scroll_views/scroll_view.rs b/crates/components/src/scroll_views/scroll_view.rs
index 8f2ce1191..b02105250 100644
--- a/crates/components/src/scroll_views/scroll_view.rs
+++ b/crates/components/src/scroll_views/scroll_view.rs
@@ -1,12 +1,14 @@
 use dioxus::prelude::*;
 use freya_elements::elements as dioxus_elements;
 use freya_elements::events::{keyboard::Key, KeyboardEvent, MouseEvent, WheelEvent};
-use freya_hooks::{use_applied_theme, use_focus, use_node, ScrollViewThemeWith};
+use freya_hooks::{
+    use_applied_theme, use_focus, use_node, ScrollBarThemeWith, ScrollViewThemeWith,
+};
 
 use crate::{
     get_container_size, get_corrected_scroll_position, get_scroll_position_from_cursor,
     get_scroll_position_from_wheel, get_scrollbar_pos_and_size, is_scrollbar_visible,
-    manage_key_event, Axis, ScrollBar, ScrollThumb, SCROLLBAR_SIZE, SCROLL_SPEED_MULTIPLIER,
+    manage_key_event, Axis, ScrollBar, ScrollThumb, SCROLL_SPEED_MULTIPLIER,
 };
 
 /// [`ScrollView`] component properties.
@@ -14,6 +16,8 @@ use crate::{
 pub struct ScrollViewProps {
     /// Theme override.
     pub theme: Option<ScrollViewThemeWith>,
+    /// Theme override for the scrollbars.
+    pub scrollbar_theme: Option<ScrollBarThemeWith>,
     /// Inner children for the ScrollView.
     pub children: Element,
     /// Direction of the ScrollView, `vertical` or `horizontal`.
@@ -64,6 +68,7 @@ pub fn ScrollView(props: ScrollViewProps) -> Element {
     let (node_ref, size) = use_node();
     let mut focus = use_focus();
     let theme = use_applied_theme!(&props.theme, scroll_view);
+    let scrollbar_theme = use_applied_theme!(&props.scrollbar_theme, scroll_bar);
 
     let padding = &theme.padding;
     let user_container_width = &theme.width;
@@ -77,8 +82,9 @@ pub fn ScrollView(props: ScrollViewProps) -> Element {
     let horizontal_scrollbar_is_visible =
         is_scrollbar_visible(show_scrollbar, size.inner.width, size.area.width());
 
-    let container_width = get_container_size(vertical_scrollbar_is_visible);
-    let container_height = get_container_size(horizontal_scrollbar_is_visible);
+    let container_width = get_container_size(vertical_scrollbar_is_visible, &scrollbar_theme.size);
+    let container_height =
+        get_container_size(horizontal_scrollbar_is_visible, &scrollbar_theme.size);
 
     let corrected_scrolled_y = get_corrected_scroll_position(
         size.inner.height,
@@ -245,14 +251,14 @@ pub fn ScrollView(props: ScrollViewProps) -> Element {
     };
 
     let horizontal_scrollbar_size = if horizontal_scrollbar_is_visible {
-        SCROLLBAR_SIZE
+        &scrollbar_theme.size
     } else {
-        0
+        "0"
     };
     let vertical_scrollbar_size = if vertical_scrollbar_is_visible {
-        SCROLLBAR_SIZE
+        &scrollbar_theme.size
     } else {
-        0
+        "0"
     };
 
     let is_scrolling_x = clicking_scrollbar
@@ -298,11 +304,13 @@ pub fn ScrollView(props: ScrollViewProps) -> Element {
                     height: "{horizontal_scrollbar_size}",
                     offset_x: "{scrollbar_x}",
                     clicking_scrollbar: is_scrolling_x,
+                    theme: props.scrollbar_theme.clone(),
                     ScrollThumb {
                         clicking_scrollbar: is_scrolling_x,
                         onmousedown: onmousedown_x,
                         width: "{scrollbar_width}",
-                        height: "100%"
+                        height: "100%",
+                        theme: props.scrollbar_theme.clone().clone()
                     }
                 }
             }
@@ -311,11 +319,13 @@ pub fn ScrollView(props: ScrollViewProps) -> Element {
                 height: "100%",
                 offset_y: "{scrollbar_y}",
                 clicking_scrollbar: is_scrolling_y,
+                theme: props.scrollbar_theme.clone(),
                 ScrollThumb {
                     clicking_scrollbar: is_scrolling_y,
                     onmousedown: onmousedown_y,
                     width: "100%",
-                    height: "{scrollbar_height}"
+                    height: "{scrollbar_height}",
+                    theme: props.scrollbar_theme
                 }
             }
         }
diff --git a/crates/components/src/scroll_views/virtual_scroll_view.rs b/crates/components/src/scroll_views/virtual_scroll_view.rs
index 421989175..1eb08812a 100644
--- a/crates/components/src/scroll_views/virtual_scroll_view.rs
+++ b/crates/components/src/scroll_views/virtual_scroll_view.rs
@@ -3,13 +3,15 @@
 use dioxus::prelude::*;
 use freya_elements::elements as dioxus_elements;
 use freya_elements::events::{keyboard::Key, KeyboardEvent, MouseEvent, WheelEvent};
-use freya_hooks::{use_applied_theme, use_focus, use_node, ScrollViewThemeWith};
+use freya_hooks::{
+    use_applied_theme, use_focus, use_node, ScrollBarThemeWith, ScrollViewThemeWith,
+};
 use std::ops::Range;
 
 use crate::{
     get_container_size, get_corrected_scroll_position, get_scroll_position_from_cursor,
     get_scroll_position_from_wheel, get_scrollbar_pos_and_size, is_scrollbar_visible,
-    manage_key_event, Axis, ScrollBar, ScrollThumb, SCROLLBAR_SIZE, SCROLL_SPEED_MULTIPLIER,
+    manage_key_event, Axis, ScrollBar, ScrollThumb, SCROLL_SPEED_MULTIPLIER,
 };
 
 /// [`VirtualScrollView`] component properties.
@@ -20,6 +22,8 @@ pub struct VirtualScrollViewProps<
 > {
     /// Theme override.
     pub theme: Option<ScrollViewThemeWith>,
+    /// Theme override for the scrollbars.
+    pub scrollbar_theme: Option<ScrollBarThemeWith>,
     /// Quantity of items in the VirtualScrollView.
     pub length: usize,
     /// Size of the items, height for vertical direction and width for horizontal.
@@ -124,6 +128,7 @@ pub fn VirtualScrollView<
     let (node_ref, size) = use_node();
     let mut focus = use_focus();
     let theme = use_applied_theme!(&props.theme, scroll_view);
+    let scrollbar_theme = use_applied_theme!(&props.scrollbar_theme, scroll_bar);
 
     let padding = &theme.padding;
     let user_container_width = &theme.width;
@@ -141,8 +146,9 @@ pub fn VirtualScrollView<
     let horizontal_scrollbar_is_visible = user_direction != "vertical"
         && is_scrollbar_visible(show_scrollbar, inner_size, size.area.width());
 
-    let container_width = get_container_size(vertical_scrollbar_is_visible);
-    let container_height = get_container_size(horizontal_scrollbar_is_visible);
+    let container_width = get_container_size(vertical_scrollbar_is_visible, &scrollbar_theme.size);
+    let container_height =
+        get_container_size(horizontal_scrollbar_is_visible, &scrollbar_theme.size);
 
     let corrected_scrolled_y =
         get_corrected_scroll_position(inner_size, size.area.height(), *scrolled_y.read() as f32);
@@ -298,15 +304,15 @@ pub fn VirtualScrollView<
     };
 
     let horizontal_scrollbar_size = if horizontal_scrollbar_is_visible {
-        SCROLLBAR_SIZE
+        &scrollbar_theme.size
     } else {
-        0
+        "0"
     };
 
     let vertical_scrollbar_size = if vertical_scrollbar_is_visible {
-        SCROLLBAR_SIZE
+        &scrollbar_theme.size
     } else {
-        0
+        "0"
     };
 
     let (viewport_size, scroll_position) = if user_direction == "vertical" {
@@ -380,11 +386,13 @@ pub fn VirtualScrollView<
                     height: "{horizontal_scrollbar_size}",
                     offset_x: "{scrollbar_x}",
                     clicking_scrollbar: is_scrolling_x,
+                    theme: props.scrollbar_theme.clone(),
                     ScrollThumb {
                         clicking_scrollbar: is_scrolling_x,
                         onmousedown: onmousedown_x,
                         width: "{scrollbar_width}",
-                        height: "100%"
+                        height: "100%",
+                        theme: props.scrollbar_theme.clone(),
                     }
                 }
             }
@@ -393,11 +401,13 @@ pub fn VirtualScrollView<
                 height: "100%",
                 offset_y: "{scrollbar_y}",
                 clicking_scrollbar: is_scrolling_y,
+                theme: props.scrollbar_theme.clone(),
                 ScrollThumb {
                     clicking_scrollbar: is_scrolling_y,
                     onmousedown: onmousedown_y,
                     width: "100%",
-                    height: "{scrollbar_height}"
+                    height: "{scrollbar_height}",
+                    theme: props.scrollbar_theme,
                 }
             }
         }
diff --git a/crates/hooks/src/theming/dark.rs b/crates/hooks/src/theming/dark.rs
index 6d590f77a..580a1188c 100644
--- a/crates/hooks/src/theming/dark.rs
+++ b/crates/hooks/src/theming/dark.rs
@@ -53,6 +53,7 @@ pub const DARK_THEME: Theme = Theme {
         thumb_background: cow_borrowed!("rgb(100, 100, 100)"),
         hover_thumb_background: cow_borrowed!("rgb(120, 120, 120)"),
         active_thumb_background: cow_borrowed!("rgb(140, 140, 140)"),
+        size: LIGHT_THEME.scroll_bar.size,
     },
     scroll_view: ScrollViewTheme {
         height: LIGHT_THEME.scroll_view.height,
diff --git a/crates/hooks/src/theming/light.rs b/crates/hooks/src/theming/light.rs
index d44c9175f..b1931382f 100644
--- a/crates/hooks/src/theming/light.rs
+++ b/crates/hooks/src/theming/light.rs
@@ -53,6 +53,7 @@ pub const LIGHT_THEME: Theme = Theme {
         thumb_background: cow_borrowed!("rgb(135, 135, 135)"),
         hover_thumb_background: cow_borrowed!("rgb(115, 115, 115)"),
         active_thumb_background: cow_borrowed!("rgb(95, 95, 95)"),
+        size: cow_borrowed!("15"),
     },
     scroll_view: ScrollViewTheme {
         height: cow_borrowed!("fill"),
diff --git a/crates/hooks/src/theming/mod.rs b/crates/hooks/src/theming/mod.rs
index e1ae6076c..ff8079d0a 100644
--- a/crates/hooks/src/theming/mod.rs
+++ b/crates/hooks/src/theming/mod.rs
@@ -310,6 +310,7 @@ define_theme! {
         thumb_background: str,
         hover_thumb_background: str,
         active_thumb_background: str,
+        size: str,
     }
 }
 
diff --git a/examples/scroll.rs b/examples/scroll.rs
index 1da3f769b..bbbe93376 100644
--- a/examples/scroll.rs
+++ b/examples/scroll.rs
@@ -25,7 +25,7 @@ fn app() -> Element {
                     width: "400",
                     background: "rgb(27, 38, 59)",
                     padding: "30",
-                    label {  "Scroll support :)" }
+                    label { "Scroll support :)" }
                 }
                 rect {
                     border: "15 solid rgb(214, 40, 40)",

From 3cbc27bb1fe56ee4a197b5d25b84502f0034b73b Mon Sep 17 00:00:00 2001
From: Marc Espin <mespinsanz@gmail.com>
Date: Mon, 1 Apr 2024 12:55:13 +0200
Subject: [PATCH 21/23] fix: Adjust root offsets for incremental measurements
 (#567)

* fix: Proper state equality checks

* fix: Adjust root measurement offsets

* fixes
---
 crates/torin/src/torin.rs | 16 +++++++++++-----
 1 file changed, 11 insertions(+), 5 deletions(-)

diff --git a/crates/torin/src/torin.rs b/crates/torin/src/torin.rs
index a4065fad0..f8bd749e8 100644
--- a/crates/torin/src/torin.rs
+++ b/crates/torin/src/torin.rs
@@ -9,7 +9,7 @@ use crate::{
     dom_adapter::{DOMAdapter, LayoutNode, NodeKey},
     geometry::{Area, Size2D},
     measure::{measure_node, Phase},
-    prelude::Gaps,
+    prelude::{AreaModel, Gaps},
 };
 
 pub struct LayoutMetadata {
@@ -226,9 +226,9 @@ impl<Key: NodeKey> Torin<Key> {
         } else {
             suggested_root_id
         };
-        let root_parent = dom_adapter.parent_of(&root_id);
-        let layout_node = root_parent
-            .and_then(|root_parent| self.get(root_parent).cloned())
+        let root_parent_id = dom_adapter.parent_of(&root_id);
+        let layout_node = root_parent_id
+            .and_then(|root_parent_id| self.get(root_parent_id).cloned())
             .unwrap_or(LayoutNode {
                 area: root_area,
                 inner_area: root_area,
@@ -248,12 +248,18 @@ impl<Key: NodeKey> Torin<Key> {
 
         let metadata = LayoutMetadata { root_area };
 
+        let mut available_area = layout_node.inner_area;
+        if let Some(root_parent_id) = root_parent_id {
+            let root_parent = dom_adapter.get_node(&root_parent_id).unwrap();
+            available_area.move_with_offsets(&root_parent.offset_x, &root_parent.offset_y);
+        }
+
         let (root_revalidated, root_layout_node) = measure_node(
             root_id,
             &root,
             self,
             &layout_node.inner_area,
-            &layout_node.inner_area,
+            &available_area,
             measurer,
             true,
             dom_adapter,

From 6cca92bff3bb3101debbb5bf7449f8d094ffd1df Mon Sep 17 00:00:00 2001
From: Marc Espin <mespinsanz@gmail.com>
Date: Mon, 1 Apr 2024 14:44:00 +0200
Subject: [PATCH 22/23] fix: Bring back node id layout check (#568)

---
 crates/state/src/layout.rs | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/crates/state/src/layout.rs b/crates/state/src/layout.rs
index 6a74e3f4f..7dc305d84 100644
--- a/crates/state/src/layout.rs
+++ b/crates/state/src/layout.rs
@@ -31,6 +31,7 @@ pub struct LayoutState {
     pub position: Position,
     pub content: Content,
     pub node_ref: Option<NodeReference>,
+    pub node_id: NodeId
 }
 
 #[partial_derive_state]
@@ -76,7 +77,10 @@ impl State<CustomAttributeValues> for LayoutState {
         let torin_layout = context.get::<Arc<Mutex<Torin<NodeId>>>>().unwrap();
         let scale_factor = context.get::<f32>().unwrap();
 
-        let mut layout = LayoutState::default();
+        let mut layout = LayoutState {
+            node_id: node_view.node_id(),
+            ..Default::default()
+        };
 
         if let Some(attributes) = node_view.attributes() {
             for attr in attributes {

From 0e05a3ee87f858c3dff16a7959fe95c66b599fe2 Mon Sep 17 00:00:00 2001
From: Marc Espin <mespinsanz@gmail.com>
Date: Fri, 5 Apr 2024 22:43:46 +0200
Subject: [PATCH 23/23] feat: Performance improvements (#569)

---
 Cargo.toml                                    | 16 +++---
 crates/common/src/paragraphs.rs               | 10 ++--
 crates/components/src/switch.rs               | 11 ++---
 crates/core/src/dom/mutations_writer.rs       |  3 --
 crates/core/src/events/events_measurer.rs     | 43 +++++++---------
 crates/core/src/plugins.rs                    |  4 ++
 .../freya/src/plugins/performance_overlay.rs  | 49 ++++++++++++++++++-
 crates/native-core/src/real_dom.rs            | 23 +++++----
 crates/renderer/src/app.rs                    |  5 ++
 crates/state/src/layout.rs                    |  2 +-
 10 files changed, 106 insertions(+), 60 deletions(-)

diff --git a/Cargo.toml b/Cargo.toml
index 5105095e1..b017ee36a 100644
--- a/Cargo.toml
+++ b/Cargo.toml
@@ -13,14 +13,14 @@ use_camera = ["freya/use_camera"]
 hot-reload = ["freya/hot-reload"]
 
 [patch.crates-io]
-dioxus = { git = "https://github.com/DioxusLabs/dioxus", rev = "f266213618b9715e9df8c28fb51ca81e38b28055" }
-dioxus-rsx = { git = "https://github.com/DioxusLabs/dioxus", rev = "f266213618b9715e9df8c28fb51ca81e38b28055" }
-dioxus-core-macro = { git = "https://github.com/DioxusLabs/dioxus", rev = "f266213618b9715e9df8c28fb51ca81e38b28055" }
-dioxus-hooks = { git = "https://github.com/DioxusLabs/dioxus", rev = "f266213618b9715e9df8c28fb51ca81e38b28055" }
-dioxus-signals = { git = "https://github.com/DioxusLabs/dioxus", rev = "f266213618b9715e9df8c28fb51ca81e38b28055" }
-dioxus-core = { git = "https://github.com/DioxusLabs/dioxus", rev = "f266213618b9715e9df8c28fb51ca81e38b28055" }
-dioxus-hot-reload = { git = "https://github.com/DioxusLabs/dioxus", rev = "f266213618b9715e9df8c28fb51ca81e38b28055" }
-dioxus-router = { git = "https://github.com/DioxusLabs/dioxus", rev = "f266213618b9715e9df8c28fb51ca81e38b28055" }
+dioxus = { git = "https://github.com/DioxusLabs/dioxus", rev = "46b0eeb12cf2b388d29a9061b74e9470a8487679" }
+dioxus-rsx = { git = "https://github.com/DioxusLabs/dioxus", rev = "46b0eeb12cf2b388d29a9061b74e9470a8487679" }
+dioxus-core-macro = { git = "https://github.com/DioxusLabs/dioxus", rev = "46b0eeb12cf2b388d29a9061b74e9470a8487679" }
+dioxus-hooks = { git = "https://github.com/DioxusLabs/dioxus", rev = "46b0eeb12cf2b388d29a9061b74e9470a8487679" }
+dioxus-signals = { git = "https://github.com/DioxusLabs/dioxus", rev = "46b0eeb12cf2b388d29a9061b74e9470a8487679" }
+dioxus-core = { git = "https://github.com/DioxusLabs/dioxus", rev = "46b0eeb12cf2b388d29a9061b74e9470a8487679" }
+dioxus-hot-reload = { git = "https://github.com/DioxusLabs/dioxus", rev = "46b0eeb12cf2b388d29a9061b74e9470a8487679" }
+dioxus-router = { git = "https://github.com/DioxusLabs/dioxus", rev = "46b0eeb12cf2b388d29a9061b74e9470a8487679" }
 
 [workspace.dependencies]
 freya = { path = "crates/freya", version = "0.1" }
diff --git a/crates/common/src/paragraphs.rs b/crates/common/src/paragraphs.rs
index e7ccbe57e..a435234d7 100644
--- a/crates/common/src/paragraphs.rs
+++ b/crates/common/src/paragraphs.rs
@@ -22,12 +22,14 @@ impl ParagraphElements {
 
     pub fn remove_paragraph(&self, node_id: NodeId, text_id: &Uuid) {
         let mut paragraphs = self.paragraphs.lock().unwrap();
-        let text_group = paragraphs.get_mut(text_id).unwrap();
+        let text_group = paragraphs.get_mut(text_id);
 
-        text_group.retain(|id| *id != node_id);
+        if let Some(text_group) = text_group {
+            text_group.retain(|id| *id != node_id);
 
-        if text_group.is_empty() {
-            paragraphs.remove(text_id);
+            if text_group.is_empty() {
+                paragraphs.remove(text_id);
+            }
         }
     }
 
diff --git a/crates/components/src/switch.rs b/crates/components/src/switch.rs
index 89d45a311..5eb5cd656 100644
--- a/crates/components/src/switch.rs
+++ b/crates/components/src/switch.rs
@@ -94,13 +94,10 @@ pub fn Switch(props: SwitchProps) -> Element {
         platform.set_cursor(CursorIcon::Pointer);
     };
 
-    let onclick = {
-        let ontoggled = props.ontoggled.clone();
-        move |e: MouseEvent| {
-            e.stop_propagation();
-            focus.focus();
-            ontoggled.call(());
-        }
+    let onclick = move |e: MouseEvent| {
+        e.stop_propagation();
+        focus.focus();
+        props.ontoggled.call(());
     };
 
     let onkeydown = move |e: KeyboardEvent| {
diff --git a/crates/core/src/dom/mutations_writer.rs b/crates/core/src/dom/mutations_writer.rs
index a86ca373b..1d1b82109 100644
--- a/crates/core/src/dom/mutations_writer.rs
+++ b/crates/core/src/dom/mutations_writer.rs
@@ -132,9 +132,6 @@ impl<'a> WriteMutations for MutationsWriter<'a> {
     }
 
     fn remove_node(&mut self, id: dioxus_core::ElementId) {
-        let node_id = self.native_writer.state.element_to_node_id(id);
-        let mut dom_adapter = DioxusDOMAdapter::new_with_cache(self.native_writer.rdom);
-        self.layout.remove(node_id, &mut dom_adapter, true);
         self.remove(id);
         self.native_writer.remove_node(id);
     }
diff --git a/crates/core/src/events/events_measurer.rs b/crates/core/src/events/events_measurer.rs
index 1f14f33ec..776d15c2c 100644
--- a/crates/core/src/events/events_measurer.rs
+++ b/crates/core/src/events/events_measurer.rs
@@ -192,8 +192,6 @@ fn measure_dom_events(
         'event: for collateral_event in collateral_events {
             let mut child_node: Option<NodeId> = None;
 
-            let listeners = rdom.get_listening_sorted(&collateral_event);
-
             // Iterate over the event nodes
             for PotentialEvent {
                 node_id,
@@ -205,28 +203,25 @@ fn measure_dom_events(
                     continue;
                 };
 
-                // Iterate over the event listeners
-                for listener in &listeners {
-                    if listener.id() == *node_id {
-                        let valid_node = if let Some(child_node) = child_node {
-                            is_node_parent_of(rdom, child_node, *node_id)
-                        } else {
-                            true
-                        };
+                if rdom.is_node_listening(node_id, &collateral_event) {
+                    let valid_node = if let Some(child_node) = child_node {
+                        is_node_parent_of(rdom, child_node, *node_id)
+                    } else {
+                        true
+                    };
 
-                        if valid_node {
-                            let mut valid_event = event.clone();
-                            valid_event.set_name(collateral_event);
-                            valid_events.push(PotentialEvent {
-                                node_id: *node_id,
-                                event: valid_event,
-                                layer: *layer,
-                            });
-
-                            // Stack events that do not bubble up
-                            if event.get_name().does_bubble() {
-                                continue 'event;
-                            }
+                    if valid_node {
+                        let mut valid_event = event.clone();
+                        valid_event.set_name(collateral_event);
+                        valid_events.push(PotentialEvent {
+                            node_id: *node_id,
+                            event: valid_event,
+                            layer: *layer,
+                        });
+
+                        // Stack events that do not bubble up
+                        if event.get_name().does_bubble() {
+                            continue 'event;
                         }
                     }
                 }
@@ -274,7 +269,7 @@ fn emit_global_events_listeners(
 ) {
     for global_event in global_events {
         let event_name = global_event.get_name();
-        let listeners = fdom.rdom().get_listening_sorted(&event_name);
+        let listeners = fdom.rdom().get_listeners(&event_name);
 
         for listener in listeners {
             let element_id = listener.mounted_id().unwrap();
diff --git a/crates/core/src/plugins.rs b/crates/core/src/plugins.rs
index acb6b13fb..5a54ffa58 100644
--- a/crates/core/src/plugins.rs
+++ b/crates/core/src/plugins.rs
@@ -47,6 +47,10 @@ pub enum PluginEvent<'a> {
 
     /// After measuring the layout.
     FinishedLayout(&'a Torin<NodeId>),
+
+    StartedUpdatingDOM,
+
+    FinishedUpdatingDOM,
 }
 
 /// Skeleton for Freya plugins.
diff --git a/crates/freya/src/plugins/performance_overlay.rs b/crates/freya/src/plugins/performance_overlay.rs
index 19aeb38a3..d09f50a7a 100644
--- a/crates/freya/src/plugins/performance_overlay.rs
+++ b/crates/freya/src/plugins/performance_overlay.rs
@@ -2,7 +2,8 @@ use std::time::{Duration, Instant};
 
 use freya_core::plugins::{FreyaPlugin, PluginEvent};
 use freya_engine::prelude::{
-    Color, FontStyle, ParagraphBuilder, ParagraphStyle, Slant, TextShadow, TextStyle, Weight, Width,
+    Color, FontStyle, Paint, PaintStyle, ParagraphBuilder, ParagraphStyle, Rect, Slant, TextShadow,
+    TextStyle, Weight, Width,
 };
 
 #[derive(Default)]
@@ -11,6 +12,10 @@ pub struct PerformanceOverlayPlugin {
     started_render: Option<Instant>,
     started_layout: Option<Instant>,
     finished_layout: Option<Duration>,
+    started_dom_updates: Option<Instant>,
+    finished_dom_updates: Option<Duration>,
+    fps_historic: Vec<usize>,
+    max_fps: usize,
 }
 
 impl FreyaPlugin for PerformanceOverlayPlugin {
@@ -20,6 +25,10 @@ impl FreyaPlugin for PerformanceOverlayPlugin {
             PluginEvent::FinishedLayout(_) => {
                 self.finished_layout = Some(self.started_layout.unwrap().elapsed())
             }
+            PluginEvent::StartedUpdatingDOM => self.started_dom_updates = Some(Instant::now()),
+            PluginEvent::FinishedUpdatingDOM => {
+                self.finished_dom_updates = Some(self.started_dom_updates.unwrap().elapsed())
+            }
             PluginEvent::BeforeRender { .. } => self.started_render = Some(Instant::now()),
             PluginEvent::AfterRender {
                 canvas,
@@ -28,6 +37,7 @@ impl FreyaPlugin for PerformanceOverlayPlugin {
             } => {
                 let started_render = self.started_render.take().unwrap();
                 let finished_layout = self.finished_layout.unwrap();
+                let finished_dom_updates = self.finished_dom_updates.unwrap();
                 let rdom = freya_dom.rdom();
                 let layout = freya_dom.layout();
 
@@ -57,6 +67,11 @@ impl FreyaPlugin for PerformanceOverlayPlugin {
                     30.0,
                 );
 
+                self.fps_historic.push(self.frames.len());
+                if self.fps_historic.len() > 70 {
+                    self.fps_historic.remove(0);
+                }
+
                 // Rendering time
                 add_text(
                     &mut paragraph_builder,
@@ -71,6 +86,13 @@ impl FreyaPlugin for PerformanceOverlayPlugin {
                     18.0,
                 );
 
+                // DOM updates time
+                add_text(
+                    &mut paragraph_builder,
+                    format!("DOM Updates: {}ms \n", finished_dom_updates.as_millis()),
+                    18.0,
+                );
+
                 // DOM size
                 add_text(
                     &mut paragraph_builder,
@@ -88,6 +110,31 @@ impl FreyaPlugin for PerformanceOverlayPlugin {
                 let mut paragraph = paragraph_builder.build();
                 paragraph.layout(f32::MAX);
                 paragraph.paint(canvas, (5.0, 0.0));
+
+                let mut paint = Paint::default();
+                paint.set_anti_alias(true);
+                paint.set_style(PaintStyle::Fill);
+                paint.set_color(Color::from_argb(120, 255, 255, 255));
+
+                self.max_fps = self
+                    .max_fps
+                    .max(self.fps_historic.iter().max().copied().unwrap_or_default());
+                let start_x = 5.0;
+                let start_y = 150.0 + self.max_fps.max(60) as f32;
+
+                canvas.draw_rect(Rect::new(5., 150., 200., start_y), &paint);
+
+                for (i, fps) in self.fps_historic.iter().enumerate() {
+                    let mut paint = Paint::default();
+                    paint.set_anti_alias(true);
+                    paint.set_style(PaintStyle::Fill);
+                    paint.set_color(Color::from_rgb(63, 255, 0));
+                    paint.set_stroke_width(3.0);
+
+                    let x = start_x + (i * 2) as f32;
+                    let y = start_y - *fps as f32 + 2.0;
+                    canvas.draw_circle((x, y), 2.0, &paint);
+                }
             }
             _ => {}
         }
diff --git a/crates/native-core/src/real_dom.rs b/crates/native-core/src/real_dom.rs
index b68f08d34..bf0f5bf87 100644
--- a/crates/native-core/src/real_dom.rs
+++ b/crates/native-core/src/real_dom.rs
@@ -238,18 +238,18 @@ impl<V: FromAnyValue + Send + Sync> RealDom<V> {
         NodeMut::new(id, self)
     }
 
-    /// Find all nodes that are listening for an event, sorted by there height in the dom progressing starting at the bottom and progressing up.
-    /// This can be useful to avoid creating duplicate events.
-    pub fn get_listening_sorted(&self, event: &EventName) -> Vec<NodeRef<V>> {
+    pub fn is_node_listening(&self, node_id: &NodeId, event: &EventName) -> bool {
+        self.nodes_listening
+            .get(event)
+            .map(|listeners| listeners.contains(node_id))
+            .unwrap_or_default()
+    }
+
+    pub fn get_listeners(&self, event: &EventName) -> Vec<NodeRef<V>> {
         if let Some(nodes) = self.nodes_listening.get(event) {
-            let mut listening: Vec<_> = nodes
+            nodes
                 .iter()
-                .map(|id| (*id, self.tree_ref().height(*id).unwrap()))
-                .collect();
-            listening.sort_by(|(_, h1), (_, h2)| h1.cmp(h2).reverse());
-            listening
-                .into_iter()
-                .map(|(id, _)| NodeRef { id, dom: self })
+                .map(|id| NodeRef { id: *id, dom: self })
                 .collect()
         } else {
             Vec::new()
@@ -624,8 +624,7 @@ impl<'a, V: FromAnyValue + Send + Sync> NodeMut<'a, V> {
                 .mark_child_changed(parent_id);
         }
         let children_ids = self.child_ids();
-        let children_ids_vec = children_ids.to_vec();
-        for child in children_ids_vec {
+        for child in children_ids {
             self.dom.get_mut(child).unwrap().remove();
         }
         self.dom.tree_mut().remove(id);
diff --git a/crates/renderer/src/app.rs b/crates/renderer/src/app.rs
index ef0f785ce..205358bcd 100644
--- a/crates/renderer/src/app.rs
+++ b/crates/renderer/src/app.rs
@@ -133,20 +133,25 @@ impl<State: 'static + Clone> App<State> {
 
     /// Make the first build of the VirtualDOM and sync it with the RealDOM.
     pub fn init_doms(&mut self) {
+        self.plugins.send(PluginEvent::StartedUpdatingDOM);
         let scale_factor = self.window_env.window.scale_factor() as f32;
         self.provide_vdom_contexts();
 
         self.sdom.get_mut().init_dom(&mut self.vdom, scale_factor);
+        self.plugins.send(PluginEvent::FinishedUpdatingDOM);
     }
 
     /// Update the DOM with the mutations from the VirtualDOM.
     pub fn apply_vdom_changes(&mut self) -> (bool, bool) {
+        self.plugins.send(PluginEvent::StartedUpdatingDOM);
         let scale_factor = self.window_env.window.scale_factor() as f32;
         let (repaint, relayout) = self
             .sdom
             .get_mut()
             .render_mutations(&mut self.vdom, scale_factor);
 
+        self.plugins.send(PluginEvent::FinishedUpdatingDOM);
+
         if repaint {
             if let Some(mutations_notifier) = &self.mutations_notifier {
                 mutations_notifier.notify_one();
diff --git a/crates/state/src/layout.rs b/crates/state/src/layout.rs
index 7dc305d84..95ea43171 100644
--- a/crates/state/src/layout.rs
+++ b/crates/state/src/layout.rs
@@ -31,7 +31,7 @@ pub struct LayoutState {
     pub position: Position,
     pub content: Content,
     pub node_ref: Option<NodeReference>,
-    pub node_id: NodeId
+    pub node_id: NodeId,
 }
 
 #[partial_derive_state]