resolve conflicts

Cargo.toml

@@ -14,6 +14,7 @@ hot-reload = ["freya/hot-reload"]
 custom-tokio-rt = ["freya/custom-tokio-rt"]
 performance-overlay = ["freya/performance-overlay"]
 fade-cached-incremental-areas = ["freya/fade-cached-incremental-areas"]
+disable-zoom-shortcuts = ["freya/disable-zoom-shortcuts"]
 
 [patch.crates-io]
 # dioxus = { git = "https://github.com/DioxusLabs/dioxus", rev = "7beacdf9c76ae5412d3c2bcd55f7c5d87f486a0f" }
@@ -94,6 +95,7 @@ tree-sitter-highlight = "0.23.0"
 tree-sitter-rust = "0.23.0"
 rfd = "0.14.1"
 bytes = "1.5.0"
+dioxus-sdk = { workspace = true }
 
 [profile.release]
 lto = true

book/src/setup.md

@@ -31,6 +31,10 @@ sudo dnf install openssl-devel pkgconf cmake gtk3-devel clang-devel -y
 sudo dnf groupinstall "Development Tools" "C Development Tools and Libraries" -y
 ```
 
+#### NixOS
+
+Copy this [flake.nix](https://github.com/kuba375/freya-flake) into your project root. Then you can enter a dev shell by `nix develop`. 
+
 Don't hesitate to contribute so other distros can be added here.
 
 ### MacOS

crates/components/src/button.rs

@@ -190,7 +190,6 @@ pub fn Button(
             text_align: "center",
             main_align: "center",
             cross_align: "center",
-            line_height: "1.1",
             {&children}
         }
     )

crates/components/src/dropdown.rs

@@ -299,7 +299,7 @@ where
                         rect {
                             onglobalclick,
                             onglobalkeydown,
-                            layer: "-99",
+                            layer: "-1000",
                             margin: "{margin}",
                             border: "1 solid {border_fill}",
                             overflow: "clip",
@@ -379,7 +379,7 @@ mod test {
         utils.click_cursor((15., 15.)).await;
 
         // Click on the second option
-        utils.click_cursor((45., 100.)).await;
+        utils.click_cursor((45., 90.)).await;
         utils.wait_for_update().await;
         utils.wait_for_update().await;
 

crates/components/src/image.rs

@@ -0,0 +1,57 @@
+/// Generate a Dioxus component rendering the specified image.
+///
+/// Example:
+///
+/// ```no_run
+/// # use freya::prelude::*;
+///
+/// import_svg!(Ferris, "../../../examples/rust_logo.png", "100%", "100%");
+/// import_svg!(FerrisWithRequiredSize, "../../../examples/rust_logo.png");
+///
+/// fn app() -> Element {
+///     rsx!(Ferris {})
+/// }
+///
+/// fn another_app() -> Element {
+///     rsx!(FerrisWithRequiredSize {
+///         width: "150",
+///         height: "40%",
+///     })
+/// }
+/// ```
+#[macro_export]
+macro_rules! import_image {
+    ($component_name:ident, $path:expr, $width: expr, $height: expr) => {
+        // Generate a function with the name derived from the file name
+        #[allow(non_snake_case)]
+        #[dioxus::prelude::component]
+        pub fn $component_name(
+            #[props(default = $width.to_string())] width: String,
+            #[props(default = $height.to_string())] height: String,
+        ) -> freya::prelude::Element {
+            use freya::prelude::*;
+            let image_data = static_bytes(include_bytes!($path));
+
+            rsx!(image {
+                width,
+                height,
+                image_data
+            })
+        }
+    };
+    ($component_name:ident, $path:expr) => {
+        // Generate a function with the name derived from the file name
+        #[allow(non_snake_case)]
+        #[dioxus::prelude::component]
+        pub fn $component_name(width: String, height: String) -> freya::prelude::Element {
+            use freya::prelude::*;
+            let image_data = static_bytes(include_bytes!($path));
+
+            rsx!(image {
+                width,
+                height,
+                image_data
+            })
+        }
+    };
+}

crates/components/src/input.rs

@@ -176,7 +176,7 @@ pub fn Input(
     let (background, cursor_char) = if focus.is_focused() {
         (
             theme.hover_background,
-            editable.editor().read().visible_cursor_pos().to_string(),
+            editable.editor().read().cursor_pos().to_string(),
         )
     } else {
         (theme.background, "none".to_string())

crates/components/src/lib.rs

@@ -15,6 +15,7 @@ mod gesture_area;
 mod graph;
 mod hooks;
 mod icons;
+mod image;
 mod input;
 mod link;
 mod loader;

crates/components/src/link.rs

@@ -15,7 +15,10 @@ use freya_hooks::{
 };
 use winit::event::MouseButton;
 
-use crate::Tooltip;
+use crate::{
+    Tooltip,
+    TooltipContainer,
+};
 
 /// Tooltip configuration for the [`Link`] component.
 #[derive(Clone, PartialEq)]
@@ -159,7 +162,7 @@ pub fn Link(
         Some(LinkTooltip::Custom(str)) => Some(str),
     };
 
-    let main_rect = rsx! {
+    let link = rsx! {
         rect {
             onmouseenter,
             onmouseleave,
@@ -169,27 +172,19 @@ pub fn Link(
         }
     };
 
-    let Some(tooltip) = tooltip else {
-        return rsx!({ main_rect });
-    };
-
-    rsx! {
-        rect {
-            {main_rect}
-            rect {
-                height: "0",
-                width: "0",
-                layer: "-999",
-                rect {
-                    width: "100v",
-                    if *is_hovering.read() {
-                        Tooltip {
-                            url: tooltip
-                        }
+    if let Some(tooltip) = tooltip {
+        rsx!(
+            TooltipContainer {
+                tooltip: rsx!(
+                    Tooltip {
+                        text: tooltip
                     }
-                }
+                )
+                {link}
             }
-        }
+        )
+    } else {
+        link
     }
 }
 

crates/components/src/popup.rs

@@ -27,7 +27,7 @@ pub fn PopupBackground(children: Element) -> Element {
         position: "absolute",
         position_top: "0",
         position_left: "0",
-        layer: "-99",
+        layer: "-2000",
         main_align: "center",
         cross_align: "center",
         {children}

crates/components/src/progress_bar.rs

@@ -47,6 +47,8 @@ pub fn ProgressBar(
         height,
     } = use_applied_theme!(&theme, progress_bar);
 
+    let progress = progress.clamp(0., 100.);
+
     rsx!(
         rect {
             width: "{width}",