From 2bd97eff39e69fddc3405196b2dc959bf326190c Mon Sep 17 00:00:00 2001
From: geoffreygarrett <geoffrey@apollo.xyz>
Date: Tue, 31 Dec 2024 18:13:45 +0200
Subject: [PATCH 01/15] refactor(primitive): revamp for leptos 0.7

- Add TypedFallbackShow for attribute handling across views
- Utilize AnyNodeRef/Attr for robust node references
- Fix attribute spreading in conditional branches
---
 Cargo.toml                                    |   8 +-
 .../primitives/leptos/primitive/Cargo.toml    |   2 +
 .../leptos/primitive/src/primitive.rs         | 145 +++++++++++-------
 3 files changed, 100 insertions(+), 55 deletions(-)

diff --git a/Cargo.toml b/Cargo.toml
index 9bcec600..622e4f27 100644
--- a/Cargo.toml
+++ b/Cargo.toml
@@ -22,9 +22,11 @@ console_log = "1.0.0"
 console_error_panic_hook = "0.1.7"
 dioxus = "0.5.6"
 dioxus-router = "0.5.6"
-leptos = "0.6.13"
-leptos_dom = "0.6.13"
-leptos_router = "0.6.13"
+leptos = "0.7.2"
+leptos_dom = "0.7.2"
+leptos_router = "0.7.2"
+leptos-node-ref = { git = "https://github.com/geoffreygarrett/leptos-utils", branch = "update/leptos-0.7" }
+leptos-use = "0.15.0"
 log = "0.4.22"
 serde = "1.0.198"
 serde_json = "1.0.116"
diff --git a/packages/primitives/leptos/primitive/Cargo.toml b/packages/primitives/leptos/primitive/Cargo.toml
index a688555f..b5c2aafe 100644
--- a/packages/primitives/leptos/primitive/Cargo.toml
+++ b/packages/primitives/leptos/primitive/Cargo.toml
@@ -10,3 +10,5 @@ version.workspace = true
 
 [dependencies]
 leptos.workspace = true
+leptos-node-ref.workspace = true
+wasm-bindgen = "0.2.99"
diff --git a/packages/primitives/leptos/primitive/src/primitive.rs b/packages/primitives/leptos/primitive/src/primitive.rs
index f1f75e2b..2cb8a559 100644
--- a/packages/primitives/leptos/primitive/src/primitive.rs
+++ b/packages/primitives/leptos/primitive/src/primitive.rs
@@ -1,73 +1,114 @@
 use leptos::{
+    attr::Attribute,
+    either::Either,
     ev::Event,
-    html::{AnyElement, ElementDescriptor},
-    *,
+    html::{ElementType, HtmlElement},
+    prelude::*,
+    tachys::html::{class::IntoClass, node_ref::NodeRefContainer, style::IntoStyle},
 };
+use leptos_node_ref::{any_node_ref, AnyNodeRef};
+use wasm_bindgen::JsCast;
 
+/// We need our own show instead of leptos' Show because attribute spreading does not work
+/// across AnyView as of 0.7.3, which is required here.
 #[component]
-pub fn Primitive<El: ElementDescriptor + 'static>(
-    #[prop()] element: fn() -> HtmlElement<El>,
-    #[prop(into, optional)] as_child: MaybeProp<bool>,
-    #[prop(optional)] node_ref: NodeRef<AnyElement>,
-    #[prop(attrs)] attrs: Vec<(&'static str, Attribute)>,
-    children: ChildrenFn,
-) -> impl IntoView {
-    let attrs = StoredValue::new(attrs);
-    let children = StoredValue::new(children);
+#[allow(non_snake_case)]
+pub fn TypedFallbackShow<F, IV, W, C>(
+    children: TypedChildrenFn<C>,
+    when: W,
+    fallback: F,
+) -> impl IntoView
+where
+    W: Fn() -> bool + Send + Sync + 'static,
+    F: Fn() -> IV + Send + Sync + 'static,
+    IV: IntoView + 'static,
+    C: IntoView + 'static,
+{
+    let memoized_when = ArcMemo::new(move |_| when());
+    let children = children.into_inner();
+
+    move || match memoized_when.get() {
+        true => Either::Left(children()),
+        false => Either::Right(fallback().into_view()),
+    }
+}
+
+#[component]
+pub fn Primitive<E, C>(
+    element: fn() -> HtmlElement<E, (), ()>,
+    children: TypedChildrenFn<C>,
+    #[prop(optional, into)] as_child: MaybeProp<bool>,
+    #[prop(optional, into)] node_ref: AnyNodeRef,
+) -> impl IntoView
+where
+    E: ElementType + 'static,
+    C: IntoView + 'static,
+    View<C>: RenderHtml,
+    HtmlElement<E, (), ()>: ElementChild<View<C>>,
+    <HtmlElement<E, (), ()> as ElementChild<View<C>>>::Output: IntoView,
+    <E as ElementType>::Output: JsCast,
+    AnyNodeRef: NodeRefContainer<E>,
+{
+    let children = StoredValue::new(children.into_inner());
 
     view! {
-        <Show
+        <TypedFallbackShow
             when=move || as_child.get().unwrap_or_default()
-            fallback=move || element()
-                .attrs(attrs.get_value())
-                .child(children.with_value(|children| children()).into_view())
-                .into_any()
-                .node_ref(node_ref)
-                .into_view()
+            fallback=move || {
+                element().child(children.with_value(|children| children())).add_any_attr(any_node_ref(node_ref))
+            }
         >
-            {map_children(children.with_value(|children| children()).as_children(), node_ref, attrs.get_value())}
-        </Show>
+            {children.with_value(|children| children()).add_any_attr(any_node_ref(node_ref))}
+        </TypedFallbackShow>
     }
 }
 
-fn map_children(
-    children: &[View],
-    node_ref: NodeRef<AnyElement>,
-    attrs: Vec<(&'static str, Attribute)>,
-) -> View {
-    children
-        .iter()
-        .map(|child| match child {
-            View::Element(element) => element
-                .clone()
-                .into_html_element()
-                .node_ref(node_ref)
-                .attrs(attrs.clone())
-                .into_view(),
-            View::Component(component) => {
-                map_children(&component.children, node_ref, attrs.clone())
-            }
-            _ => child.into_view(),
-        })
-        .collect_view()
+#[component]
+pub fn VoidPrimitive<E, C>(
+    element: fn() -> HtmlElement<E, (), ()>,
+    children: TypedChildrenFn<C>,
+    #[prop(into, optional)] as_child: MaybeProp<bool>,
+    #[prop(into, optional)] node_ref: AnyNodeRef,
+) -> impl IntoView
+where
+    E: ElementType + 'static,
+    C: IntoView + 'static,
+    View<C>: RenderHtml,
+    <E as ElementType>::Output: JsCast,
+    AnyNodeRef: NodeRefContainer<E>,
+{
+    let children = StoredValue::new(children.into_inner());
+    view! {
+        <TypedFallbackShow
+            when=move || as_child.get().unwrap_or_default()
+            fallback=move || { element().add_any_attr(any_node_ref(node_ref)) }
+        >
+            {children.with_value(|children| children()).add_any_attr(any_node_ref(node_ref))}
+        </TypedFallbackShow>
+    }
 }
 
-pub fn compose_callbacks<E: Clone + Into<Event>>(
-    original_event_handler: Option<Callback<E>>,
-    our_event_handler: Option<Callback<E>>,
-    check_for_default_prevented: Option<bool>,
-) -> impl Fn(E) {
-    let check_for_default_prevented = check_for_default_prevented.unwrap_or(true);
+pub fn compose_callbacks<E>(
+    original_handler: Option<Callback<E>>,
+    our_handler: Option<Callback<E>>,
+    check_default_prevented: Option<bool>,
+) -> impl Fn(E)
+where
+    E: Clone + Into<Event> + 'static,
+{
+    let check_default_prevented = check_default_prevented.unwrap_or(true);
 
     move |event: E| {
-        if let Some(original_event_handler) = original_event_handler {
-            original_event_handler.call(event.clone());
+        // Run original handler first, matching TypeScript behavior
+        if let Some(original) = &original_handler {
+            original.run(event.clone());
         }
 
-        if !check_for_default_prevented || !event.clone().into().default_prevented() {
-            if let Some(our_event_handler) = our_event_handler {
-                our_event_handler.call(event);
+        // Only run our handler if default wasn't prevented (when checking is enabled)
+        if !check_default_prevented || !event.clone().into().default_prevented() {
+            if let Some(our) = &our_handler {
+                our.run(event);
             }
         }
     }
-}
+}
\ No newline at end of file

From 38a94671160668408becab39563f02d69c0f7afc Mon Sep 17 00:00:00 2001
From: geoffreygarrett <geoffrey@apollo.xyz>
Date: Tue, 31 Dec 2024 18:19:23 +0200
Subject: [PATCH 02/15] fix: required import

---
 packages/primitives/leptos/primitive/Cargo.toml       | 1 -
 packages/primitives/leptos/primitive/src/primitive.rs | 2 +-
 2 files changed, 1 insertion(+), 2 deletions(-)

diff --git a/packages/primitives/leptos/primitive/Cargo.toml b/packages/primitives/leptos/primitive/Cargo.toml
index b5c2aafe..e05a77a4 100644
--- a/packages/primitives/leptos/primitive/Cargo.toml
+++ b/packages/primitives/leptos/primitive/Cargo.toml
@@ -11,4 +11,3 @@ version.workspace = true
 [dependencies]
 leptos.workspace = true
 leptos-node-ref.workspace = true
-wasm-bindgen = "0.2.99"
diff --git a/packages/primitives/leptos/primitive/src/primitive.rs b/packages/primitives/leptos/primitive/src/primitive.rs
index 2cb8a559..5f2556c2 100644
--- a/packages/primitives/leptos/primitive/src/primitive.rs
+++ b/packages/primitives/leptos/primitive/src/primitive.rs
@@ -4,10 +4,10 @@ use leptos::{
     ev::Event,
     html::{ElementType, HtmlElement},
     prelude::*,
+    wasm_bindgen::JsCast,
     tachys::html::{class::IntoClass, node_ref::NodeRefContainer, style::IntoStyle},
 };
 use leptos_node_ref::{any_node_ref, AnyNodeRef};
-use wasm_bindgen::JsCast;
 
 /// We need our own show instead of leptos' Show because attribute spreading does not work
 /// across AnyView as of 0.7.3, which is required here.

From 958d944c7d0e9c6589284201255a06853bbb082e Mon Sep 17 00:00:00 2001
From: geoffreygarrett <geoffrey@apollo.xyz>
Date: Tue, 31 Dec 2024 18:27:42 +0200
Subject: [PATCH 03/15] fix: doc version of leptos

---
 packages/primitives/leptos/primitive/src/primitive.rs | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/primitives/leptos/primitive/src/primitive.rs b/packages/primitives/leptos/primitive/src/primitive.rs
index 5f2556c2..7ed1e6de 100644
--- a/packages/primitives/leptos/primitive/src/primitive.rs
+++ b/packages/primitives/leptos/primitive/src/primitive.rs
@@ -10,7 +10,7 @@ use leptos::{
 use leptos_node_ref::{any_node_ref, AnyNodeRef};
 
 /// We need our own show instead of leptos' Show because attribute spreading does not work
-/// across AnyView as of 0.7.3, which is required here.
+/// across AnyView as of 0.7.2, which is required here.
 #[component]
 #[allow(non_snake_case)]
 pub fn TypedFallbackShow<F, IV, W, C>(

From f85f380d831c43c9ed9159f7dbf9550ce1e6fc2c Mon Sep 17 00:00:00 2001
From: geoffreygarrett <geoffrey@apollo.xyz>
Date: Wed, 1 Jan 2025 09:13:06 +0200
Subject: [PATCH 04/15] chore(deps): update label to leptos 0.7

---
 packages/primitives/leptos/label/Cargo.toml   |  1 +
 packages/primitives/leptos/label/src/label.rs | 43 +++++++++++++------
 2 files changed, 30 insertions(+), 14 deletions(-)

diff --git a/packages/primitives/leptos/label/Cargo.toml b/packages/primitives/leptos/label/Cargo.toml
index a5ed04a6..1cea2245 100644
--- a/packages/primitives/leptos/label/Cargo.toml
+++ b/packages/primitives/leptos/label/Cargo.toml
@@ -12,4 +12,5 @@ version.workspace = true
 [dependencies]
 leptos.workspace = true
 radix-leptos-primitive = { path = "../primitive", version = "0.0.2" }
+leptos-node-ref.workspace = true
 web-sys.workspace = true
diff --git a/packages/primitives/leptos/label/src/label.rs b/packages/primitives/leptos/label/src/label.rs
index 92c88939..a4096c75 100644
--- a/packages/primitives/leptos/label/src/label.rs
+++ b/packages/primitives/leptos/label/src/label.rs
@@ -1,38 +1,53 @@
-use leptos::{ev::MouseEvent, html::AnyElement, *};
+use leptos::{ev::MouseEvent, html, prelude::*};
 use radix_leptos_primitive::Primitive;
+use leptos_node_ref::prelude::*;
+
+/* -------------------------------------------------------------------------------------------------
+ * Label
+ * -----------------------------------------------------------------------------------------------*/
+
+const NAME: &str = "Label";
 
 #[component]
+#[allow(non_snake_case)]
 pub fn Label(
+    children: TypedChildrenFn<impl IntoView + 'static>,
     #[prop(into, optional)] as_child: MaybeProp<bool>,
     #[prop(into, optional)] on_mouse_down: Option<Callback<MouseEvent>>,
-    #[prop(attrs)] attrs: Vec<(&'static str, Attribute)>,
-    #[prop(optional)] node_ref: NodeRef<AnyElement>,
-    children: ChildrenFn,
+    #[prop(into, optional)] node_ref: AnyNodeRef,
 ) -> impl IntoView {
     view! {
         <Primitive
+            children={children}
             element=html::label
             as_child=as_child
             on:mousedown=move |event: MouseEvent| {
-                // Only prevent text selection if clicking inside the label itself
+                // only prevent text selection if clicking inside the label itself
                 let target: web_sys::Element = event_target(&event);
-                if target.closest("button, input, select, textarea").expect("Element should be able to query closest.").is_some() {
-                    return
+                if target
+                    .closest("button, input, select, textarea")
+                    .expect("Element should be able to query closest.")
+                    .is_some()
+                {
+                    return;
                 }
 
                 if let Some(on_mouse_down) = on_mouse_down {
-                    Callable::call(&on_mouse_down, event.clone());
+                    on_mouse_down.run( event.clone());
                 }
-
-                // Prevent text selection when double clicking label
+                // prevent text selection when double-clicking label
                 if !event.default_prevented() && event.detail() > 1 {
                     event.prevent_default();
                 }
             }
             node_ref=node_ref
-            attrs=attrs
-        >
-            {children()}
-        </Primitive>
+        />
     }
 }
+
+/* -----------------------------------------------------------------------------------------------*/
+
+pub mod primitive {
+    pub use super::*;
+    pub use Label as Root;
+}

From caf5323819a1a3358a5c18af921fdba6279d7ab7 Mon Sep 17 00:00:00 2001
From: geoffreygarrett <geoffrey@apollo.xyz>
Date: Wed, 1 Jan 2025 10:09:36 +0200
Subject: [PATCH 05/15] chore(deps): update compose-refs to leptos 0.7

---
 .../primitives/leptos/compose-refs/Cargo.toml |   1 +
 .../leptos/compose-refs/src/compose_refs.rs   | 251 +++++++++++++++++-
 2 files changed, 243 insertions(+), 9 deletions(-)

diff --git a/packages/primitives/leptos/compose-refs/Cargo.toml b/packages/primitives/leptos/compose-refs/Cargo.toml
index e980a089..6771c149 100644
--- a/packages/primitives/leptos/compose-refs/Cargo.toml
+++ b/packages/primitives/leptos/compose-refs/Cargo.toml
@@ -10,3 +10,4 @@ version.workspace = true
 
 [dependencies]
 leptos.workspace = true
+leptos-node-ref.workspace = true
\ No newline at end of file
diff --git a/packages/primitives/leptos/compose-refs/src/compose_refs.rs b/packages/primitives/leptos/compose-refs/src/compose_refs.rs
index 2529cdf0..dfbf0ba5 100644
--- a/packages/primitives/leptos/compose-refs/src/compose_refs.rs
+++ b/packages/primitives/leptos/compose-refs/src/compose_refs.rs
@@ -1,21 +1,254 @@
-use leptos::{html::ElementDescriptor, Effect, NodeRef};
+use leptos::{
+    html::{self, ElementType},
+    prelude::*,
+    tachys::html::node_ref::NodeRefContainer,
+    wasm_bindgen::JsCast,
+    web_sys::Element,
+};
+use leptos_node_ref::prelude::*;
+use std::{rc::Rc, iter::IntoIterator};
 
-fn compose_refs<T: ElementDescriptor + Clone + 'static>(refs: Vec<NodeRef<T>>) -> NodeRef<T> {
-    let composed_ref = NodeRef::new();
+/// A trait for composable node references that can be combined,
+/// while maintaining static dispatch (tuples) and dynamic dispatch (iterables).
+pub trait ComposeRefs {
+    /// Applies the composition to a given DOM node.
+    fn compose_with(&self, node: &Element);
+}
+
+// -------------------------------------
+// 1. Static Implementations
+// -------------------------------------
+
+impl ComposeRefs for AnyNodeRef {
+    #[inline(always)]
+    fn compose_with(&self, node: &Element) {
+        <AnyNodeRef as NodeRefContainer<html::Div>>::load(*self, node);
+    }
+}
+
+impl<T> ComposeRefs for NodeRef<T>
+where
+    T: ElementType,
+    T::Output: JsCast,
+{
+    #[inline(always)]
+    fn compose_with(&self, node: &Element) {
+        <NodeRef<T> as NodeRefContainer<T>>::load(*self, node);
+    }
+}
+
+// NOTE: See macro ahead, replaces these. These are
+//  left for illustration for now.
+// impl<A, B> ComposeRefs for (A, B)
+// where
+//     A: ComposeRefs,
+//     B: ComposeRefs,
+// {
+//     #[inline(always)]
+//     fn compose_with(&self, node: &Element) {
+//         self.0.compose_with(node);
+//         self.1.compose_with(node);
+//     }
+// }
+
+// impl<A, B, C> ComposeRefs for (A, B, C)
+// where
+//     A: ComposeRefs,
+//     B: ComposeRefs,
+//     C: ComposeRefs,
+// {
+//     #[inline(always)]
+//     fn compose_with(&self, node: &Element) {
+//         self.0.compose_with(node);
+//         self.1.compose_with(node);
+//         self.2.compose_with(node);
+//     }
+// }
+
+macro_rules! impl_compose_refs_tuple {
+    ($($idx:tt $type:ident),+) => {
+        impl<$($type),+> ComposeRefs for ($($type),+)
+        where
+            $($type: ComposeRefs),+
+        {
+            #[inline(always)]
+            fn compose_with(&self, node: &Element) {
+                $(
+                    self.$idx.compose_with(node);
+                )+
+            }
+        }
+    }
+}
+
+impl_compose_refs_tuple!(0 A, 1 B);
+impl_compose_refs_tuple!(0 A, 1 B, 2 C);
+impl_compose_refs_tuple!(0 A, 1 B, 2 C, 3 D);
+impl_compose_refs_tuple!(0 A, 1 B, 2 C, 3 D, 4 E);
+impl_compose_refs_tuple!(0 A, 1 B, 2 C, 3 D, 4 E, 5 F);
+
+// -------------------------------------
+// 2. Dynamic Implementations
+// -------------------------------------
+
+/// Implementation for arrays of any size
+impl<T: ComposeRefs, const N: usize> ComposeRefs for [T; N] {
+    fn compose_with(&self, node: &Element) {
+        for item in self.iter() {
+            item.compose_with(node);
+        }
+    }
+}
+
+/// Implementation for slice references
+impl<T: ComposeRefs> ComposeRefs for &[T] {
+    fn compose_with(&self, node: &Element) {
+        for item in (*self).iter() {
+            item.compose_with(node);
+        }
+    }
+}
+
+/// Implementation for Vec
+impl<T: ComposeRefs> ComposeRefs for Vec<T> {
+    fn compose_with(&self, node: &Element) {
+        for item in self.iter() {
+            item.compose_with(node);
+        }
+    }
+}
+
+// -------------------------------------
+// 3. compose_refs + Hook
+// -------------------------------------
 
+/// Combines multiple node references into a single reference that, when set,
+/// updates all input references to point to the same DOM node.
+///
+/// - **Static**: Tuples (`(ref1, ref2, ...)`)—no heap allocation.
+/// - **Dynamic**: Any iterable (`Vec`, slice, array) of references.
+///
+/// # Examples
+/// ```rust
+/// use leptos::{html::Div, html::Button};
+/// use leptos::prelude::NodeRef;
+/// use leptos_node_ref::prelude::*;
+/// use radix_leptos_compose_refs::compose_refs;
+///
+/// // 1) Static composition (tuples):
+/// let div_ref = NodeRef::<Div>::new();
+/// let btn_ref = NodeRef::<Button>::new();
+/// let composed = compose_refs((div_ref, btn_ref));
+///
+/// // 2) Dynamic composition (Vec, slice):
+/// let refs = vec![div_ref.into_any(), btn_ref.into_any()];
+/// let composed = compose_refs(refs);
+/// ```
+pub fn compose_refs<T>(refs: T) -> AnyNodeRef
+where
+    T: ComposeRefs + 'static,
+{
+    let composed_ref = AnyNodeRef::new();
+    let refs = Rc::new(refs);
+
+    // Effect will re-run if `composed_ref` changes.
     Effect::new(move |_| {
         if let Some(node) = composed_ref.get() {
-            for r#ref in &refs {
-                r#ref.load(&node);
-            }
+            refs.compose_with(&node);
         }
     });
 
     composed_ref
 }
 
-pub fn use_composed_refs<T: ElementDescriptor + Clone + 'static>(
-    refs: Vec<NodeRef<T>>,
-) -> NodeRef<T> {
+/// Hook-style wrapper around `compose_refs`.
+///
+/// Identical behavior, just a `use_*` naming convention.
+pub fn use_composed_refs<T>(refs: T) -> AnyNodeRef
+where
+    T: ComposeRefs + 'static,
+{
     compose_refs(refs)
 }
+
+// -------------------------------------
+// 4. Tests
+// -------------------------------------
+#[cfg(test)]
+mod tests {
+    use super::*;
+    use leptos::html;
+
+    #[test]
+    fn test_static_any_node_ref() {
+        let any_ref1 = AnyNodeRef::new();
+        let any_ref2 = AnyNodeRef::new();
+        let composed = compose_refs((any_ref1, any_ref2));
+        assert!(composed.get().is_none());
+    }
+
+    #[test]
+    fn test_static_specific_node_ref() {
+        let div_ref = NodeRef::<html::Div>::new();
+        let btn_ref = NodeRef::<html::Button>::new();
+        let composed = compose_refs((div_ref, btn_ref));
+        assert!(composed.get().is_none());
+    }
+
+    #[test]
+    fn test_triple_static() {
+        let r1 = NodeRef::<html::Div>::new();
+        let r2 = NodeRef::<html::Button>::new();
+        let r3 = AnyNodeRef::new();
+        let composed = compose_refs((r1, r2, r3));
+        assert!(composed.get().is_none());
+    }
+
+    #[test]
+    fn test_dynamic_vec_any_node_ref() {
+        let refs = vec![AnyNodeRef::new(), AnyNodeRef::new()];
+        let composed = compose_refs(refs);
+        assert!(composed.get().is_none());
+    }
+
+    #[test]
+    fn test_dynamic_vec_specific_node_ref() {
+        let div_ref = NodeRef::<html::Div>::new();
+        let btn_ref = NodeRef::<html::Button>::new();
+        let refs = vec![div_ref.into_any(), btn_ref.into_any()];
+        let composed = compose_refs(refs);
+        assert!(composed.get().is_none());
+    }
+
+    #[test]
+    fn test_array_of_any_node_ref() {
+        let arr = [AnyNodeRef::new(), AnyNodeRef::new()];
+        let composed = compose_refs(arr);
+        assert!(composed.get().is_none());
+    }
+
+    #[test]
+    fn test_slice_of_any_node_ref() {
+        let s: &[AnyNodeRef] = &[AnyNodeRef::new(), AnyNodeRef::new()];
+        let composed = compose_refs(s);
+        assert!(composed.get().is_none());
+    }
+
+    #[test]
+    fn test_compositions() {
+        // Array
+        let arr = [AnyNodeRef::new(), AnyNodeRef::new()];
+        let composed = compose_refs(arr);
+        assert!(composed.get().is_none());
+
+        // Slice reference
+        let s: &[AnyNodeRef] = &[AnyNodeRef::new(), AnyNodeRef::new()];
+        let composed = compose_refs(s);
+        assert!(composed.get().is_none());
+
+        // Vec
+        let v = vec![AnyNodeRef::new(), AnyNodeRef::new()];
+        let composed = compose_refs(v);
+        assert!(composed.get().is_none());
+    }
+}

From 11db759bad1a6795a543b95519a6f8068b6e8c31 Mon Sep 17 00:00:00 2001
From: geoffreygarrett <geoffrey@apollo.xyz>
Date: Wed, 1 Jan 2025 13:02:11 +0200
Subject: [PATCH 06/15] chore(deps): update arrow to leptos 0.7

---
 packages/primitives/leptos/arrow/Cargo.toml   |  3 +-
 packages/primitives/leptos/arrow/src/arrow.rs | 64 ++++++++++++-------
 2 files changed, 44 insertions(+), 23 deletions(-)

diff --git a/packages/primitives/leptos/arrow/Cargo.toml b/packages/primitives/leptos/arrow/Cargo.toml
index 095e6ca2..4e5f8b18 100644
--- a/packages/primitives/leptos/arrow/Cargo.toml
+++ b/packages/primitives/leptos/arrow/Cargo.toml
@@ -10,4 +10,5 @@ version.workspace = true
 
 [dependencies]
 leptos.workspace = true
-radix-leptos-primitive = { path = "../primitive", version = "0.0.2" }
+leptos-node-ref.workspace = true
+radix-leptos-primitive = { path = "../primitive", version = "0.0.2" }
\ No newline at end of file
diff --git a/packages/primitives/leptos/arrow/src/arrow.rs b/packages/primitives/leptos/arrow/src/arrow.rs
index 2fccbab6..093bc2bc 100644
--- a/packages/primitives/leptos/arrow/src/arrow.rs
+++ b/packages/primitives/leptos/arrow/src/arrow.rs
@@ -1,42 +1,62 @@
-use leptos::{html::AnyElement, *};
-use radix_leptos_primitive::Primitive;
+use leptos::{prelude::*, svg};
+use radix_leptos_primitive::{Primitive, TypedFallbackShow};
+use leptos_node_ref::AnyNodeRef;
+
+/* -------------------------------------------------------------------------------------------------
+ * Arrow
+ * -----------------------------------------------------------------------------------------------*/
+
+const NAME: &'static str = "Arrow";
 
 #[component]
 pub fn Arrow(
-    #[prop(into, optional)] width: MaybeProp<f64>,
-    #[prop(into, optional)] height: MaybeProp<f64>,
-    #[prop(into, optional)] as_child: MaybeProp<bool>,
-    #[prop(optional)] node_ref: NodeRef<AnyElement>,
-    #[prop(attrs)] attrs: Vec<(&'static str, Attribute)>,
     #[prop(optional)] children: Option<ChildrenFn>,
+    #[prop(into, optional, default=10.0.into())] width: MaybeProp<f64>,
+    #[prop(into, optional, default=5.0.into())] height: MaybeProp<f64>,
+    #[prop(into, optional)] as_child: MaybeProp<bool>,
+    #[prop(into, optional)] node_ref: AnyNodeRef,
 ) -> impl IntoView {
-    let width = move || width.get().unwrap_or(10.0);
-    let height = move || height.get().unwrap_or(5.0);
     let children = StoredValue::new(children);
 
-    let mut attrs = attrs.clone();
-    attrs.extend([
-        ("width", width.into_attribute()),
-        ("height", height.into_attribute()),
-        ("viewBox", "0 0 30 10".into_attribute()),
-        ("preserveAspectRatio", "none".into_attribute()),
-    ]);
+    #[cfg(debug_assertions)]
+    Effect::new(move |_| {
+        leptos::logging::log!("[{NAME}] width: {:?}", width.get());
+        leptos::logging::log!("[{NAME}] height: {:?}", height.get());
+        leptos::logging::log!("[{NAME}] node_ref: {:?}", node_ref.get());
+        leptos::logging::log!("[{NAME}] as_child: {:?}", as_child.get());
+    });
 
     view! {
         <Primitive
             element=svg::svg
             as_child=as_child
+            attr:width=move || width.get()
+            attr:height=move || height.get()
             node_ref=node_ref
-            attrs=attrs
         >
-            <Show
+            <TypedFallbackShow
                 when=move || as_child.get().unwrap_or_default()
-                fallback=move || view!{
-                    <polygon points="0,0 30,0 15,10" />
+                fallback=move || view! {
+                    <polygon points="0,0 30,0 15,10"/>
                 }
             >
-                {children.with_value(|children| children.as_ref().map(|children| children()))}
-            </Show>
+                {
+                    children.with_value(|maybe_children| {
+                        maybe_children.as_ref().map(|child_fn| child_fn())
+                    })
+                }
+            </TypedFallbackShow>
         </Primitive>
     }
+    .attr("viewBox", "0 0 30 10")
+    .attr("preserveAspectRatio", "none")
+}
+
+/* -------------------------------------------------------------------------------------------------
+ * Primitive re-exports
+ * -----------------------------------------------------------------------------------------------*/
+
+pub mod primitive {
+    pub use super::*;
+    pub use Arrow as Root;
 }

From 0dfd50dc727fc2becf5f156b79ee84a3812a755a Mon Sep 17 00:00:00 2001
From: geoffreygarrett <geoffrey@apollo.xyz>
Date: Wed, 1 Jan 2025 13:12:32 +0200
Subject: [PATCH 07/15] chore(deps): update aspect-ratio to leptos 0.7

---
 .../primitives/leptos/aspect-ratio/Cargo.toml |  4 +
 .../leptos/aspect-ratio/src/aspect_ratio.rs   | 80 ++++++++++++++-----
 2 files changed, 63 insertions(+), 21 deletions(-)

diff --git a/packages/primitives/leptos/aspect-ratio/Cargo.toml b/packages/primitives/leptos/aspect-ratio/Cargo.toml
index e878a456..66d67889 100644
--- a/packages/primitives/leptos/aspect-ratio/Cargo.toml
+++ b/packages/primitives/leptos/aspect-ratio/Cargo.toml
@@ -12,3 +12,7 @@ version.workspace = true
 [dependencies]
 leptos.workspace = true
 radix-leptos-primitive = { path = "../primitive", version = "0.0.2" }
+leptos-node-ref = { workspace = true }
+
+[features]
+debug = []
\ No newline at end of file
diff --git a/packages/primitives/leptos/aspect-ratio/src/aspect_ratio.rs b/packages/primitives/leptos/aspect-ratio/src/aspect_ratio.rs
index 1cdfd320..2f1342da 100644
--- a/packages/primitives/leptos/aspect-ratio/src/aspect_ratio.rs
+++ b/packages/primitives/leptos/aspect-ratio/src/aspect_ratio.rs
@@ -1,41 +1,79 @@
-use leptos::{html::AnyElement, *};
+use leptos::{prelude::*, attr::{Attribute, AttributeValue}, html};
 use radix_leptos_primitive::Primitive;
+use leptos_node_ref::AnyNodeRef;
+
+const DEFAULT_RATIO: f64 = 1.0;
+
+/* -------------------------------------------------------------------------------------------------
+ * AspectRatio
+ * -----------------------------------------------------------------------------------------------*/
+
+const NAME: &'static str = "AspectRatio";
 
 #[component]
+#[allow(non_snake_case)]
 pub fn AspectRatio(
-    #[prop(into, optional)] ratio: MaybeProp<f64>,
-    #[prop(into, optional)] as_child: MaybeProp<bool>,
-    #[prop(optional)] node_ref: NodeRef<AnyElement>,
-    #[prop(attrs)] attrs: Vec<(&'static str, Attribute)>,
-    children: ChildrenFn,
+    /// Children passed to the AspectRatio component
+    children: TypedChildrenFn<impl IntoView + 'static>,
+
+    /// Change the default rendered element for the one passed as a child
+    #[prop(into, optional, default = false.into())]
+    as_child: MaybeProp<bool>,
+
+    /// The desired ratio when rendering the content (e.g., 16/9). Defaults to 1.0 if not specified.
+    #[prop(into, optional, default = DEFAULT_RATIO.into())]
+    ratio: MaybeProp<f64>,
+
+    /// Reference to the underlying DOM node
+    #[prop(into, optional)]
+    node_ref: AnyNodeRef,
 ) -> impl IntoView {
-    let ratio = Signal::derive(move || ratio.get().unwrap_or(1.0));
+    // calculates the percent-based padding for the aspect ratio
+    let padding_bottom = Signal::derive(move || {
+        100.0
+            / ratio
+            .get()
+            .unwrap_or(DEFAULT_RATIO)
+            .clamp(f64::EPSILON, f64::MAX)
+    });
 
-    let mut attrs = attrs.clone();
-    // TODO: merge existing style
-    attrs.extend([(
-        "style",
-        // Ensures children expand in ratio
-        "position: absolute; top: 0px; right: 0px; bottom: 0px; left: 0px;".into_attribute(),
-    )]);
+    #[cfg(debug_assertions)]
+    Effect::new(move |_| {
+        leptos::logging::log!("[{NAME}] ratio: {:?}", ratio.get());
+        leptos::logging::log!("[{NAME}] as_child: {:?}", as_child.get());
+        leptos::logging::log!("[{NAME}] node_ref: {:?}", node_ref.get());
+    });
 
     view! {
+        // ensures inner element is contained
         <div
-            // Ensures inner element is contained
             style:position="relative"
-            // Ensures padding bottom trick maths works
+            // ensures padding bottom trick works
             style:width="100%"
-            style:padding-bottom=move || format!("{}%", 100.0 / ratio.get())
+            style:padding-bottom=move || format!("{}%", padding_bottom.get())
             data-radix-aspect-ratio-wrapper=""
         >
             <Primitive
+                // ensures children expand to fill the ratio
                 element=html::div
                 as_child=as_child
                 node_ref=node_ref
-                attrs=attrs
-            >
-                {children()}
-            </Primitive>
+                children=children
+                style:position="absolute"
+                style:top="0"
+                style:right="0"
+                style:bottom="0"
+                style:left="0"
+            />
         </div>
     }
 }
+
+/* -------------------------------------------------------------------------------------------------
+ * Primitive re-exports
+ * -----------------------------------------------------------------------------------------------*/
+
+pub mod primitive {
+    pub use super::*;
+    pub use AspectRatio as Root;
+}

From dea8f9a666feb97442ac12cf29647495c69a9c1b Mon Sep 17 00:00:00 2001
From: geoffreygarrett <geoffrey@apollo.xyz>
Date: Wed, 1 Jan 2025 13:28:41 +0200
Subject: [PATCH 08/15] chore(deps): update visually-hidden to leptos 0.7

---
 .../leptos/visually-hidden/Cargo.toml         |  3 +-
 .../visually-hidden/src/visually_hidden.rs    | 58 ++++++++++++++-----
 2 files changed, 44 insertions(+), 17 deletions(-)

diff --git a/packages/primitives/leptos/visually-hidden/Cargo.toml b/packages/primitives/leptos/visually-hidden/Cargo.toml
index 675ffb04..cb9fb161 100644
--- a/packages/primitives/leptos/visually-hidden/Cargo.toml
+++ b/packages/primitives/leptos/visually-hidden/Cargo.toml
@@ -11,4 +11,5 @@ version.workspace = true
 
 [dependencies]
 leptos.workspace = true
-radix-leptos-primitive = { path = "../primitive", version = "0.0.2" }
+radix-leptos-primitive = { path = "../primitive" }
+leptos-node-ref.workspace = true
diff --git a/packages/primitives/leptos/visually-hidden/src/visually_hidden.rs b/packages/primitives/leptos/visually-hidden/src/visually_hidden.rs
index 7c25034d..c3aeb31d 100644
--- a/packages/primitives/leptos/visually-hidden/src/visually_hidden.rs
+++ b/packages/primitives/leptos/visually-hidden/src/visually_hidden.rs
@@ -1,28 +1,54 @@
-use leptos::{html::AnyElement, *};
+use leptos::{html, prelude::*};
+use leptos_node_ref::AnyNodeRef;
 use radix_leptos_primitive::Primitive;
 
+/* -------------------------------------------------------------------------------------------------
+ * VisuallyHidden
+ * -----------------------------------------------------------------------------------------------*/
+
+/// A component that visually hides its children while keeping them accessible
+/// to screen reader users. Matches the React `VisuallyHidden` component’s
+/// default styles and behavior.
 #[component]
+#[allow(non_snake_case)]
 pub fn VisuallyHidden(
-    #[prop(into, optional)] as_child: MaybeProp<bool>,
-    #[prop(optional)] node_ref: NodeRef<AnyElement>,
-    #[prop(attrs)] attrs: Vec<(&'static str, Attribute)>,
-    children: ChildrenFn,
-) -> impl IntoView {
-    // TODO: replace with style:<name> attributes once they work properly in Leptos (probably in 0.7?)
-    let mut attrs = attrs.clone();
-    attrs.extend([
-        // See: https://github.com/twbs/bootstrap/blob/master/scss/mixins/_screen-reader.scss
-        ("style", "position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; word-wrap: normal;".into_attribute()
-    )]);
+    /// The content to be visually hidden but still accessible to screen readers.
+    children: TypedChildrenFn<impl IntoView + 'static>,
 
+    /// If `true`, the `Primitive` is rendered as the child element rather than wrapped.
+    #[prop(into, optional)]
+    as_child: MaybeProp<bool>,
+
+    /// A reference to the underlying DOM node.
+    #[prop(into, optional)]
+    node_ref: AnyNodeRef,
+) -> impl IntoView {
+    // See: https://github.com/twbs/bootstrap/blob/main/scss/mixins/_visually-hidden.scss
     view! {
         <Primitive
             element=html::span
+            children=children
             as_child=as_child
             node_ref=node_ref
-            attrs=attrs
-        >
-            {children()}
-        </Primitive>
+
+            // visually hide this content but keep it available to assistive tech
+            style:position="absolute"
+            style:border="0px"
+            style:width="1px"
+            style:height="1px"
+            style:padding="0px"
+            style:margin="-1px"
+            style:overflow="hidden"
+            style:clip="rect(0, 0, 0, 0)"
+            style:white-space="nowrap"
+            style:word-wrap="normal"
+        />
     }
 }
+
+/* -----------------------------------------------------------------------------------------------*/
+
+pub mod primitive {
+    pub use super::*;
+    pub use VisuallyHidden as Root;
+}

From 0ac80969192f854b5319ec57b3e323da1cf93974 Mon Sep 17 00:00:00 2001
From: geoffreygarrett <geoffrey@apollo.xyz>
Date: Wed, 1 Jan 2025 17:06:50 +0200
Subject: [PATCH 09/15] chore(deps): update use-previous to leptos 0.7

---
 .../leptos/use-previous/src/use_previous.rs   | 25 +++++++++++--------
 1 file changed, 15 insertions(+), 10 deletions(-)

diff --git a/packages/primitives/leptos/use-previous/src/use_previous.rs b/packages/primitives/leptos/use-previous/src/use_previous.rs
index 2932aec2..7f5e3ae3 100644
--- a/packages/primitives/leptos/use-previous/src/use_previous.rs
+++ b/packages/primitives/leptos/use-previous/src/use_previous.rs
@@ -1,16 +1,21 @@
-use leptos::{Memo, RwSignal, Signal, SignalGet, SignalGetUntracked, SignalSetUntracked};
+use leptos::prelude::*;
 
-pub fn use_previous<T: Clone + PartialEq>(value: Signal<T>) -> Memo<T> {
-    let current = RwSignal::new(value.get_untracked());
-    let previous = RwSignal::new(value.get_untracked());
+/// A Leptos hook that returns the *previous* value of a reactive Signal.
+/// Similar to React's `usePrevious`, it only updates when `value` actually changes.
+pub fn use_previous<T: Clone + PartialEq + 'static>(value: Signal<T>) -> Memo<T> {
+    // Keep a store of (current, previous)
+    let container = StoredValue::new((value.get_untracked(), value.get_untracked()));
 
+    // Return a Memo that recalculates the previous value only when `value` changes
     Memo::new(move |_| {
-        let value = value.get();
-        let current_value = current.get();
-        if current_value != value {
-            previous.set_untracked(current_value);
-            current.set_untracked(value.clone());
+        let current_value = value.get();
+        let (stored_current, stored_previous) = container.get_value();
+
+        if stored_current != current_value {
+            container.set_value((current_value.clone(), stored_current));
+            stored_previous
+        } else {
+            stored_previous
         }
-        previous.get()
     })
 }

From d155d3014ff888c771dc7d343c4301274471b91c Mon Sep 17 00:00:00 2001
From: geoffreygarrett <geoffrey@apollo.xyz>
Date: Wed, 1 Jan 2025 17:41:08 +0200
Subject: [PATCH 10/15] fix: trait bound

---
 packages/primitives/leptos/use-previous/src/use_previous.rs | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/primitives/leptos/use-previous/src/use_previous.rs b/packages/primitives/leptos/use-previous/src/use_previous.rs
index 7f5e3ae3..9f795695 100644
--- a/packages/primitives/leptos/use-previous/src/use_previous.rs
+++ b/packages/primitives/leptos/use-previous/src/use_previous.rs
@@ -2,13 +2,13 @@ use leptos::prelude::*;
 
 /// A Leptos hook that returns the *previous* value of a reactive Signal.
 /// Similar to React's `usePrevious`, it only updates when `value` actually changes.
-pub fn use_previous<T: Clone + PartialEq + 'static>(value: Signal<T>) -> Memo<T> {
+pub fn use_previous<T: Clone + PartialEq + Send + Sync + 'static>(value: Signal<T>) -> Memo<T> {
     // Keep a store of (current, previous)
     let container = StoredValue::new((value.get_untracked(), value.get_untracked()));
 
     // Return a Memo that recalculates the previous value only when `value` changes
     Memo::new(move |_| {
-        let current_value = value.get();
+        let current_value = value.get_untracked();  // Changed from get() to get_untracked()
         let (stored_current, stored_previous) = container.get_value();
 
         if stored_current != current_value {
@@ -18,4 +18,4 @@ pub fn use_previous<T: Clone + PartialEq + 'static>(value: Signal<T>) -> Memo<T>
             stored_previous
         }
     })
-}
+}
\ No newline at end of file

From dba7bdc286a84167863d58b828b3ebc8db231a0f Mon Sep 17 00:00:00 2001
From: geoffreygarrett <geoffrey@apollo.xyz>
Date: Wed, 1 Jan 2025 17:42:16 +0200
Subject: [PATCH 11/15] style: comment removal

---
 packages/primitives/leptos/use-previous/src/use_previous.rs | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/primitives/leptos/use-previous/src/use_previous.rs b/packages/primitives/leptos/use-previous/src/use_previous.rs
index 9f795695..706530c0 100644
--- a/packages/primitives/leptos/use-previous/src/use_previous.rs
+++ b/packages/primitives/leptos/use-previous/src/use_previous.rs
@@ -8,7 +8,7 @@ pub fn use_previous<T: Clone + PartialEq + Send + Sync + 'static>(value: Signal<
 
     // Return a Memo that recalculates the previous value only when `value` changes
     Memo::new(move |_| {
-        let current_value = value.get_untracked();  // Changed from get() to get_untracked()
+        let current_value = value.get_untracked();
         let (stored_current, stored_previous) = container.get_value();
 
         if stored_current != current_value {

From ba44eb0d1ca822bfcb9358f2adfb3c86cb1bfc20 Mon Sep 17 00:00:00 2001
From: geoffreygarrett <geoffrey@apollo.xyz>
Date: Thu, 2 Jan 2025 15:39:16 +0200
Subject: [PATCH 12/15] chore(deps): update context to leptos 0.7

---
 .../leptos/context/src/create_context.rs      | 92 ++++++++++++++++---
 1 file changed, 81 insertions(+), 11 deletions(-)

diff --git a/packages/primitives/leptos/context/src/create_context.rs b/packages/primitives/leptos/context/src/create_context.rs
index 420826c3..92d05f46 100644
--- a/packages/primitives/leptos/context/src/create_context.rs
+++ b/packages/primitives/leptos/context/src/create_context.rs
@@ -1,14 +1,84 @@
-// pub fn create_context<ContextValueType>(
-//     root_component_name: &str,
-//     default_context: Option<ContextValueType>,
-// ) {
-// }
+/// Macro to create a context provider and a hook to consume the context.
+///
+/// # Example
+/// ```rust
+/// use leptos::prelude::*;
+/// use radix_leptos_context::create_context;
+///
+/// #[derive(Clone)]
+/// struct CountContext(i32);
+///
+/// create_context!(
+///     context_type: CountContext,
+///     provider: CountProvider,
+///     hook: use_count,
+///     root: "Count"
+/// );
+///
+/// #[component]
+/// fn Counter() -> impl IntoView {
+///     let count = use_count("Counter");
+///     view! { <div>"Count: "{count.0}</div> }
+/// }
+///
+/// #[component]
+/// fn App() -> impl IntoView {
+///     view! {
+///         <CountProvider value=CountContext(42)>
+///             <Counter/>
+///         </CountProvider>
+///     }
+/// }
+/// ```
+///
+/// # Panics
+///
+/// The hook will panic if used in a component that is not wrapped in its provider:
+/// ```should_panic
+/// use leptos::prelude::*;
+/// use radix_leptos_context::create_context;
+///
+/// #[derive(Clone)]
+/// struct CountContext(i32);
+///
+/// create_context!(
+///     context_type: CountContext,
+///     provider: CountProvider,
+///     hook: use_count,
+///     root: "Count"
+/// );
+///
+/// #[component]
+/// fn BadApp() -> impl IntoView {
+///     let count = use_count("BadApp"); // Panics: "`BadApp` must be used within `Count`"
+///     view! { <div>{count.0}</div> }
+/// }
+/// ```
+#[macro_export]
+macro_rules! create_context {
+    (
+        context_type: $context_ty:ty,
+        provider: $provider:ident,
+        hook: $hook:ident,
+        root: $root_component_name:expr
+    ) => {
+        use leptos::prelude::*;
 
-// pub struct CreateScope {}
+        #[component]
+        #[allow(non_snake_case)]
+        pub fn $provider(
+            value: $context_ty,
+            children: TypedChildren<impl IntoView + 'static>,
+        ) -> impl IntoView {
+            view! { <Provider value=value children=children/> }
+        }
 
-// pub fn create_context_scope(scope_name: &str, create_context_scope_deps: Option<Vec<CreateScope>>) {
-// }
+        pub fn $hook(component_name: &'static str) -> $context_ty {
+            use_context::<$context_ty>()
+                .expect(&format!("`{}` must be used within `{}`", component_name, $root_component_name))
+                .clone()
+        }
+    };
+}
+// TODO: Default context support
 
-// fn compose_context_scopes(scopes: Vec<CreateScope>) -> CreateScope {
-//     CreateScope {}
-// }

From ab0faf8937f957c3e394fbc13bcc82395980f136 Mon Sep 17 00:00:00 2001
From: geoffreygarrett <geoffrey@apollo.xyz>
Date: Thu, 2 Jan 2025 16:36:44 +0200
Subject: [PATCH 13/15] chore(deps): update avatar to leptos 0.7

---
 packages/primitives/leptos/avatar/Cargo.toml  |   4 +
 .../primitives/leptos/avatar/src/avatar.rs    | 308 +++++++++++-------
 .../primitives/leptos/avatar/tests/avatar.rs  | 293 +++++++++++++++++
 3 files changed, 480 insertions(+), 125 deletions(-)
 create mode 100644 packages/primitives/leptos/avatar/tests/avatar.rs

diff --git a/packages/primitives/leptos/avatar/Cargo.toml b/packages/primitives/leptos/avatar/Cargo.toml
index b02eefc0..54ad3e48 100644
--- a/packages/primitives/leptos/avatar/Cargo.toml
+++ b/packages/primitives/leptos/avatar/Cargo.toml
@@ -11,5 +11,9 @@ version.workspace = true
 
 [dependencies]
 leptos.workspace = true
+leptos-node-ref.workspace = true
+leptos-maybe-callback.workspace = true
+leptos-use.workspace = true
 radix-leptos-primitive = { path = "../primitive", version = "0.0.2" }
+radix-leptos-context = { path = "../context", version = "0.0.2" }
 web-sys.workspace = true
diff --git a/packages/primitives/leptos/avatar/src/avatar.rs b/packages/primitives/leptos/avatar/src/avatar.rs
index 573df686..1922c258 100644
--- a/packages/primitives/leptos/avatar/src/avatar.rs
+++ b/packages/primitives/leptos/avatar/src/avatar.rs
@@ -1,9 +1,18 @@
-use leptos::{html::AnyElement, *};
-use radix_leptos_primitive::Primitive;
-use web_sys::{
-    wasm_bindgen::{closure::Closure, JsCast},
-    HtmlImageElement,
-};
+use leptos::prelude::*;
+use leptos::context::Provider;
+use leptos::{html};
+use leptos::html::Img;
+use leptos::wasm_bindgen::closure::Closure;
+use leptos::wasm_bindgen::JsCast;
+use leptos_node_ref::prelude::*;
+use leptos_use::{use_timeout_fn, UseTimeoutFnReturn};
+use leptos_maybe_callback::MaybeCallback;
+use radix_leptos_context::create_context;
+use radix_leptos_primitive::{Primitive, VoidPrimitive};
+
+/* -------------------------------------------------------------------------------------------------
+ * Types
+ * -----------------------------------------------------------------------------------------------*/
 
 #[derive(Clone, Copy, Debug, Eq, Hash, PartialEq)]
 pub enum ImageLoadingStatus {
@@ -19,182 +28,231 @@ struct AvatarContextValue {
     on_image_loading_status_change: Callback<ImageLoadingStatus>,
 }
 
+/* -------------------------------------------------------------------------------------------------
+ * Avatar (Root)
+ * -----------------------------------------------------------------------------------------------*/
+
+const AVATAR_NAME: &'static str = "Avatar";
+
+create_context!(
+    context_type: AvatarContextValue,
+    provider: AvatarProvider,
+    hook: use_avatar_context,
+    root: AVATAR_NAME
+);
+
 #[component]
+#[allow(non_snake_case)]
 pub fn Avatar(
+    /// If `true`, renders only its children without a `<span>` wrapper.
     #[prop(into, optional)] as_child: MaybeProp<bool>,
-    #[prop(optional)] node_ref: NodeRef<AnyElement>,
-    #[prop(attrs)] attrs: Vec<(&'static str, Attribute)>,
-    children: ChildrenFn,
+    /// A reference to the underlying `<span>` element, if needed.
+    #[prop(into, optional)] node_ref: AnyNodeRef,
+    /// The children of the Avatar component.
+    children: TypedChildrenFn<impl IntoView + 'static>,
 ) -> impl IntoView {
-    let (image_loading_status, set_image_loading_status) = create_signal(ImageLoadingStatus::Idle);
+    let children = StoredValue::new(children.into_inner());
+
+    // Initialize the image loading status signal using `RwSignal`
+    let image_loading_status = RwSignal::new(ImageLoadingStatus::Idle);
 
+    // Define the context value with the current loading status and a callback to update it
     let context_value = AvatarContextValue {
-        image_loading_status,
-        on_image_loading_status_change: Callback::new(move |image_loading_status| {
-            set_image_loading_status.set(image_loading_status)
+        image_loading_status: image_loading_status.read_only(),
+        on_image_loading_status_change: Callback::new(move |status| {
+            image_loading_status.set(status);
         }),
     };
 
     view! {
-        <Provider value=context_value>
-             <Primitive
-                element=html::span
-                as_child=as_child
-                node_ref=node_ref
-                attrs=attrs
-            >
-                {children()}
+        <AvatarProvider value=context_value>
+            <Primitive element=leptos::html::span as_child=as_child node_ref=node_ref>
+                {children.with_value(|children| children())}
             </Primitive>
-        </Provider>
+        </AvatarProvider>
     }
 }
 
+/* -------------------------------------------------------------------------------------------------
+ * AvatarImage
+ * -----------------------------------------------------------------------------------------------*/
+
+const IMAGE_NAME: &'static str = "AvatarImage";
+
 #[component]
+#[allow(non_snake_case)]
 pub fn AvatarImage(
     #[prop(into, optional)] src: MaybeProp<String>,
-    #[prop(into, optional)] on_loading_status_change: Option<Callback<ImageLoadingStatus>>,
+    #[prop(into, optional)] referrer_policy: MaybeProp<String>,
+    #[prop(into, optional)] on_loading_status_change: MaybeCallback<ImageLoadingStatus>,
     #[prop(into, optional)] as_child: MaybeProp<bool>,
-    #[prop(optional)] node_ref: NodeRef<AnyElement>,
-    #[prop(attrs)] attrs: Vec<(&'static str, Attribute)>,
-    #[prop(optional)] children: Option<ChildrenFn>,
+    #[prop(optional)] node_ref: NodeRef<Img>,
 ) -> impl IntoView {
-    let children = StoredValue::new(children);
-
-    let context = expect_context::<AvatarContextValue>();
-    let image_loading_status = use_image_loading_status(src.clone());
-    let handle_loading_status_change = move |status: ImageLoadingStatus| {
-        if let Some(on_loading_status_change) = on_loading_status_change {
-            on_loading_status_change.call(status);
-        }
-        context.on_image_loading_status_change.call(status);
-    };
+    let context = use_avatar_context(IMAGE_NAME);
+    let loading_status = use_image_loading_status(src.clone(), referrer_policy.clone());
 
+    // Update context and callback when loading status changes
     Effect::new(move |_| {
-        let image_loading_status = image_loading_status.get();
-        if image_loading_status != ImageLoadingStatus::Idle {
-            handle_loading_status_change(image_loading_status);
-        }
+        let status = loading_status.get();
+        context.on_image_loading_status_change.run(status);
+        on_loading_status_change.run(status);
     });
 
-    let mut attrs = attrs.clone();
-    attrs.extend([("src", src.into_attribute())]);
-    let attrs = StoredValue::new(attrs);
-
     view! {
-        <Show when=move || image_loading_status.get() == ImageLoadingStatus::Loaded>
-            <Primitive
+        <Show
+            when=move || loading_status.get() == ImageLoadingStatus::Loaded
+            fallback=|| ()
+        >
+            <VoidPrimitive
                 element=html::img
                 as_child=as_child
-                node_ref=node_ref
-                attrs=attrs.get_value()
+                node_ref=node_ref.into_any()
+                attr:src=move || src.get()
+                attr:referrerpolicy=move || referrer_policy.get()
             >
-                {children.with_value(|children| children.as_ref().map(|children| children()))}
-            </Primitive>
+                {()}
+            </VoidPrimitive>
         </Show>
     }
 }
 
+/* -------------------------------------------------------------------------------------------------
+ * AvatarFallback
+ * -----------------------------------------------------------------------------------------------*/
+
+const FALLBACK_NAME: &'static str = "AvatarFallback";
+
 #[component]
 pub fn AvatarFallback(
-    #[prop(into, optional)] delay_ms: MaybeProp<i32>,
+    /// Children (for example, initials or an icon).
+    children: TypedChildrenFn<impl IntoView + 'static>,
+    /// Delay (in ms) before showing the fallback `<span>`. If no delay, fallback appears immediately.
+    #[prop(into, optional)] delay_ms: MaybeProp<f64>,
+    /// If `true`, renders only its children without a `<span>` wrapper.
     #[prop(into, optional)] as_child: MaybeProp<bool>,
-    #[prop(optional)] node_ref: NodeRef<AnyElement>,
-    #[prop(attrs)] attrs: Vec<(&'static str, Attribute)>,
-    #[prop(optional)] children: Option<ChildrenFn>,
+    /// A reference to the `<span>` element for the fallback.
+    #[prop(into, optional)] node_ref: AnyNodeRef,
 ) -> impl IntoView {
-    let attrs = StoredValue::new(attrs);
-    let children = StoredValue::new(children);
+    let children = StoredValue::new(children.into_inner());
+    let context = use_avatar_context(FALLBACK_NAME);
 
-    let context = expect_context::<AvatarContextValue>();
-    let (can_render, set_can_render) = create_signal(delay_ms.get().is_none());
+    // use_timeout_fn from leptos_use to handle the delay before showing fallback
+    let UseTimeoutFnReturn { start, stop, is_pending, .. } = use_timeout_fn(
+        move |_| {},
+        delay_ms.get().unwrap_or_default(),
+    );
 
-    let handler: Closure<dyn Fn()> = Closure::new(move || {
-        set_can_render.set(true);
-    });
+    // If no delay is set, fallback can render immediately
+    let can_render = RwSignal::new(delay_ms.get().is_none());
 
-    let timer_id = StoredValue::new(None::<i32>);
-    Effect::new(move |_| {
-        if let Some(timer_id) = timer_id.get_value() {
-            window().clear_timeout_with_handle(timer_id);
-        }
+    // Re-initialize the timer whenever `delay_ms` changes
+    Effect::new(move || {
+        stop();
+        can_render.set(delay_ms.get().is_none());
+
+        #[cfg(debug_assertions)]
+        leptos::logging::log!(
+            "[{FALLBACK_NAME}] delay_ms changed: {:?}",
+            delay_ms.get()
+        );
 
-        if let Some(delay_ms) = delay_ms.get() {
-            timer_id.set_value(Some(
-                window()
-                    .set_timeout_with_callback_and_timeout_and_arguments_0(
-                        handler.as_ref().unchecked_ref(),
-                        delay_ms,
-                    )
-                    .expect("Timeout should be set."),
-            ));
+        if let Some(ms) = delay_ms.get() {
+            #[cfg(debug_assertions)]
+            leptos::logging::log!("[{FALLBACK_NAME}] Starting timeout for {} ms", ms);
+            start(ms as i32);
         }
     });
 
-    on_cleanup(move || {
-        if let Some(timer_id) = timer_id.get_value() {
-            window().clear_timeout_with_handle(timer_id);
+    // Watch if the timer has completed
+    Effect::new(move || {
+        if !is_pending.get() && delay_ms.get().is_some() {
+            #[cfg(debug_assertions)]
+            leptos::logging::log!("[{FALLBACK_NAME}] Timer completed, can_render=true");
+            can_render.set(true);
         }
     });
 
+    // Render fallback <span> only if `can_render` is true and the image is not loaded
     view! {
-        <Show when=move || can_render.get() && context.image_loading_status.get() != ImageLoadingStatus::Loaded>
-            <Primitive
-                element=html::span
-                as_child=as_child
-                node_ref=node_ref
-                attrs=attrs.get_value()
-            >
-                {children.with_value(|children| children.as_ref().map(|children| children()))}
+        <Show
+            when=move || {
+                can_render.get() && context.image_loading_status.get() != ImageLoadingStatus::Loaded
+            }
+            fallback=|| ()
+        >
+            <Primitive element=html::span as_child=as_child node_ref=node_ref>
+                {children.with_value(|children| children())}
             </Primitive>
         </Show>
     }
 }
 
-fn use_image_loading_status(src: MaybeProp<String>) -> ReadSignal<ImageLoadingStatus> {
-    let (loading_status, set_loading_status) = create_signal(ImageLoadingStatus::Idle);
-    let is_mounted = StoredValue::new(true);
+/* -----------------------------------------------------------------------------------------------*/
 
-    let update_status_loaded: Closure<dyn Fn()> = Closure::new(move || {
-        if is_mounted.get_value() {
-            set_loading_status.set(ImageLoadingStatus::Loaded);
-        }
-    });
-    let update_status_error: Closure<dyn Fn()> = Closure::new(move || {
-        if is_mounted.get_value() {
-            set_loading_status.set(ImageLoadingStatus::Error);
-        }
-    });
+fn use_image_loading_status(
+    src: MaybeProp<String>,
+    referrer_policy: MaybeProp<String>,
+) -> ReadSignal<ImageLoadingStatus> {
+    let loading_status = RwSignal::new(ImageLoadingStatus::Idle);
 
     Effect::new(move |_| {
-        if let Some(src) = src.get() {
-            let image = document()
-                .create_element("img")
-                .map(|element| element.unchecked_into::<HtmlImageElement>())
-                .expect("Image element should be created.");
-
-            set_loading_status.set(ImageLoadingStatus::Loading);
-
-            image
-                .add_event_listener_with_callback(
-                    "load",
-                    update_status_loaded.as_ref().unchecked_ref(),
-                )
-                .expect("Load event listener should be added.");
-            image
-                .add_event_listener_with_callback(
-                    "error",
-                    update_status_error.as_ref().unchecked_ref(),
-                )
-                .expect("Error event listener should be added.");
-            image.set_src(&src);
+        if let Some(src_val) = src.get() {
+            #[cfg(debug_assertions)]
+            leptos::logging::log!("[{IMAGE_NAME}] Starting load for: {}", src_val);
+
+            loading_status.set(ImageLoadingStatus::Loading);
+
+            let image = web_sys::HtmlImageElement::new().unwrap();
+
+            // Clone image for closures
+            let image_clone = image.clone();
+            let onload = Closure::wrap(Box::new(move || {
+                if image_clone.natural_width() > 0 {
+                    #[cfg(debug_assertions)]
+                    leptos::logging::log!("[{IMAGE_NAME}] Load successful");
+                    loading_status.set(ImageLoadingStatus::Loaded);
+                } else {
+                    #[cfg(debug_assertions)]
+                    leptos::logging::log!("[{IMAGE_NAME}] Load failed - invalid image");
+                    loading_status.set(ImageLoadingStatus::Error);
+                }
+            }) as Box<dyn FnMut()>);
+
+            let onerror = Closure::wrap(Box::new(move || {
+                #[cfg(debug_assertions)]
+                leptos::logging::log!("[{IMAGE_NAME}] Load failed");
+                loading_status.set(ImageLoadingStatus::Error);
+            }) as Box<dyn FnMut()>);
+
+            image.set_onload(Some(onload.as_ref().unchecked_ref()));
+            image.set_onerror(Some(onerror.as_ref().unchecked_ref()));
+
+            if let Some(policy) = referrer_policy.get() {
+                image.set_referrer_policy(&policy);
+            }
+
+            image.set_src(&src_val);
+
+            onload.forget();
+            onerror.forget();
         } else {
-            set_loading_status.set(ImageLoadingStatus::Error);
+            #[cfg(debug_assertions)]
+            leptos::logging::log!("[{IMAGE_NAME}] No src provided");
+            loading_status.set(ImageLoadingStatus::Error);
         }
     });
 
-    on_cleanup(move || {
-        is_mounted.set_value(false);
-    });
+    loading_status.read_only()
+}
+
+/* -------------------------------------------------------------------------------------------------
+ * Primitive re-exports
+ * -----------------------------------------------------------------------------------------------*/
 
-    loading_status
+pub mod primitive {
+    // Re-export core items so consumers can use avatar::primitive::* as AvatarPrimitive
+    pub use super::*;
+    pub use Avatar as Root;
+    pub use AvatarImage as Image;
+    pub use AvatarFallback as Fallback;
 }
diff --git a/packages/primitives/leptos/avatar/tests/avatar.rs b/packages/primitives/leptos/avatar/tests/avatar.rs
new file mode 100644
index 00000000..8156fdfb
--- /dev/null
+++ b/packages/primitives/leptos/avatar/tests/avatar.rs
@@ -0,0 +1,293 @@
+// TODO: Implement
+// #![cfg(target_arch = "wasm32")]
+//
+// use std::cell::RefCell;
+// use std::rc::Rc;
+//
+// use leptos::*;
+// use wasm_bindgen::prelude::*;
+// use wasm_bindgen_test::*;
+// use web_sys::Element;
+//
+// // Import your Avatar module:
+// // (Adjust the path if your file is located elsewhere.)
+// use your_crate::avatar::primitive as Avatar;
+//
+// wasm_bindgen_test_configure!(run_in_browser);
+//
+// // For test parity, define constants
+// const ROOT_TEST_ID: &str = "avatar-root";
+// const FALLBACK_TEXT: &str = "AB";
+// const IMAGE_ALT_TEXT: &str = "Fake Avatar";
+// const DELAY_MS: i32 = 300;
+//
+// ///////////////////////////////////////////////////////////////////////////////
+// // Utility: find DOM elements
+// ///////////////////////////////////////////////////////////////////////////////
+//
+// fn query_element_by_test_id(doc: &web_sys::Document, test_id: &str) -> Option<Element> {
+//     // data-testid=...
+//     doc.query_selector(&format!(r#"[data-testid="{}"]"#, test_id))
+//         .ok()
+//         .flatten()
+// }
+//
+// fn query_element_by_text(doc: &web_sys::Document, text: &str) -> Option<Element> {
+//     // Very naive text check
+//     doc.query_selector(&format!(":contains('{}')", text)).ok().flatten()
+// }
+//
+// fn query_img_by_alt(doc: &web_sys::Document, alt: &str) -> Option<Element> {
+//     // :contains(...) won't work for alt. We do a simpler approach:
+//     let imgs = doc.get_elements_by_tag_name("img");
+//     for i in 0..imgs.length() {
+//         let el = imgs.item(i).unwrap();
+//         if el.get_attribute("alt").unwrap_or_default() == alt {
+//             return Some(el);
+//         }
+//     }
+//     None
+// }
+//
+// ///////////////////////////////////////////////////////////////////////////////
+// // Test: Avatar with fallback and no image
+// ///////////////////////////////////////////////////////////////////////////////
+//
+// #[wasm_bindgen_test]
+// fn avatar_with_fallback_no_image() {
+//     // Mount the component
+//     let container = leptos::document().create_element("div").unwrap();
+//     leptos::document().body().unwrap().append_child(&container).unwrap();
+//
+//     let view = view! {
+//       <Avatar::Root data-testid=ROOT_TEST_ID>
+//         <Avatar::Fallback>{FALLBACK_TEXT}</Avatar::Fallback>
+//       </Avatar::Root>
+//     };
+//
+//     // Render into the container
+//     leptos::mount_to(container, view);
+//
+//     // We can do a basic presence check
+//     let doc = leptos::document();
+//     let root_elem = query_element_by_test_id(&doc, ROOT_TEST_ID)
+//         .expect("Should find the avatar root by test ID");
+//     assert_eq!(root_elem.tag_name(), "SPAN"); // Usually <span>, because it's the Root
+//
+//     // Check that fallback text is present
+//     let fallback_el = query_element_by_text(&doc, FALLBACK_TEXT)
+//         .expect("Fallback text should be in the DOM");
+//     assert_eq!(fallback_el.text_content().unwrap(), FALLBACK_TEXT);
+// }
+//
+// ///////////////////////////////////////////////////////////////////////////////
+// // Test: Avatar with fallback and a "working" image
+// ///////////////////////////////////////////////////////////////////////////////
+//
+// // We can simulate a 'working' image by calling the onload callback ourselves.
+// // Alternatively, you can define a custom <img> element in JS to mock load events.
+// #[wasm_bindgen_test(async)]
+// fn avatar_with_fallback_and_working_image() -> impl std::future::Future<()> {
+//     use leptos::spawn_local;
+//     use gloo_timers::callback::Timeout;
+//
+//     // We'll store references so we can check DOM after a delay
+//     let container = leptos::document().create_element("div").unwrap();
+//     leptos::document().body().unwrap().append_child(&container).unwrap();
+//
+//     let view = view! {
+//       <Avatar::Root data-testid=ROOT_TEST_ID>
+//         <Avatar::Fallback>{FALLBACK_TEXT}</Avatar::Fallback>
+//         <Avatar::Image src="/test.jpg" alt=IMAGE_ALT_TEXT />
+//       </Avatar::Root>
+//     };
+//     leptos::mount_to(container.clone(), view);
+//
+//     let doc = leptos::document();
+//     let fallback_el = query_element_by_text(&doc, FALLBACK_TEXT)
+//         .expect("Fallback should be in the DOM initially");
+//     assert_eq!(fallback_el.text_content().unwrap(), FALLBACK_TEXT);
+//
+//     // The <img> should not be present yet (the load hasn't "fired")
+//     {
+//         let imgs = doc.get_elements_by_tag_name("img");
+//         assert_eq!(imgs.length(), 0, "No image in DOM initially");
+//     }
+//
+//     // We'll artificially "simulate" the load event after DELAY_MS
+//     // Because <Avatar::Image> uses `use_event_listener` on 'load' event,
+//     // we can dispatch it ourselves.
+//
+//     let promise = js_sys::Promise::new(&mut |resolve, _reject| {
+//         let doc_cloned = doc.clone();
+//         Timeout::new(DELAY_MS as u32, move || {
+//             // dispatch a 'load' event to the <img>
+//             let imgs = doc_cloned.get_elements_by_tag_name("img");
+//             for i in 0..imgs.length() {
+//                 let evt = web_sys::Event::new("load").unwrap();
+//                 imgs.item(i).unwrap().dispatch_event(&evt).unwrap();
+//             }
+//             resolve.call0(&JsValue::NULL).unwrap();
+//         })
+//             .forget();
+//     });
+//
+//     // Then we check if the fallback disappears and the image is present
+//     async move {
+//         wasm_bindgen_futures::JsFuture::from(promise).await.unwrap();
+//
+//         // Now check if an <img> is in the DOM
+//         let imgs = doc.get_elements_by_tag_name("img");
+//         assert_eq!(imgs.length(), 1, "Image should appear after load");
+//         let image_el = imgs.item(0).unwrap();
+//         assert_eq!(image_el.get_attribute("alt").unwrap_or_default(), IMAGE_ALT_TEXT);
+//     }
+// }
+//
+// ///////////////////////////////////////////////////////////////////////////////
+// // Test: Avatar with fallback and delayed render
+// ///////////////////////////////////////////////////////////////////////////////
+//
+// #[wasm_bindgen_test(async)]
+// fn avatar_with_fallback_delayed_render() -> impl std::future::Future<()> {
+//     use gloo_timers::callback::Timeout;
+//
+//     let container = leptos::document().create_element("div").unwrap();
+//     leptos::document().body().unwrap().append_child(&container).unwrap();
+//
+//     // The fallback is delayed by DELAY_MS
+//     let view = view! {
+//       <Avatar::Root data-testid=ROOT_TEST_ID>
+//         <Avatar::Fallback delayMs=DELAY_MS as f64>{FALLBACK_TEXT}</Avatar::Fallback>
+//       </Avatar::Root>
+//     };
+//     leptos::mount_to(container.clone(), view);
+//
+//     let doc = leptos::document();
+//
+//     // Immediately, the fallback should NOT be present
+//     assert!(
+//         query_element_by_text(&doc, FALLBACK_TEXT).is_none(),
+//         "Fallback should not be rendered yet"
+//     );
+//
+//     // After ~DELAY_MS, we expect the fallback to appear
+//     let promise = js_sys::Promise::new(&mut |resolve, _reject| {
+//         Timeout::new(DELAY_MS as u32, move || {
+//             resolve.call0(&JsValue::NULL).unwrap();
+//         })
+//             .forget();
+//     });
+//
+//     async move {
+//         wasm_bindgen_futures::JsFuture::from(promise).await.unwrap();
+//         let fallback_el = query_element_by_text(&doc, FALLBACK_TEXT)
+//             .expect("Fallback should appear after the delay");
+//         assert_eq!(fallback_el.text_content().unwrap(), FALLBACK_TEXT);
+//     }
+// }
+//
+// ///////////////////////////////////////////////////////////////////////////////
+// // Test: Avatar with an image that only loads when referrerPolicy="no-referrer"
+// ///////////////////////////////////////////////////////////////////////////////
+//
+// #[wasm_bindgen_test(async)]
+// fn avatar_image_referrer_policy_no_referrer() -> impl std::future::Future<()> {
+//     use gloo_timers::callback::Timeout;
+//
+//     let container = leptos::document().create_element("div").unwrap();
+//     leptos::document().body().unwrap().append_child(&container).unwrap();
+//
+//     let view = view! {
+//       <Avatar::Root data-testid=ROOT_TEST_ID>
+//         <Avatar::Fallback>{FALLBACK_TEXT}</Avatar::Fallback>
+//         <Avatar::Image src="/test.jpg" alt=IMAGE_ALT_TEXT referrerPolicy="no-referrer" />
+//       </Avatar::Root>
+//     };
+//     leptos::mount_to(container.clone(), view);
+//
+//     let doc = leptos::document();
+//     let fallback_el = query_element_by_text(&doc, FALLBACK_TEXT)
+//         .expect("Fallback should be in the DOM initially");
+//     assert_eq!(fallback_el.text_content().unwrap(), FALLBACK_TEXT);
+//
+//     // No images initially
+//     let imgs = doc.get_elements_by_tag_name("img");
+//     assert_eq!(imgs.length(), 0, "Image is not loaded yet");
+//
+//     // We'll artificially "simulate" that only if referrerPolicy=="no-referrer" triggers 'load'
+//     // Otherwise 'error'
+//     let promise = js_sys::Promise::new(&mut |resolve, _reject| {
+//         Timeout::new(DELAY_MS as u32, move || {
+//             let imgs = doc.get_elements_by_tag_name("img");
+//             for i in 0..imgs.length() {
+//                 let image = imgs.item(i).unwrap();
+//                 let policy = image.get_attribute("referrerPolicy").unwrap_or_default();
+//                 let evt_type = if policy == "no-referrer" { "load" } else { "error" };
+//                 let evt = web_sys::Event::new(evt_type).unwrap();
+//                 image.dispatch_event(&evt).unwrap();
+//             }
+//             resolve.call0(&JsValue::NULL).unwrap();
+//         })
+//             .forget();
+//     });
+//
+//     async move {
+//         wasm_bindgen_futures::JsFuture::from(promise).await.unwrap();
+//
+//         // After the "mock" load event, we expect an <img>
+//         let imgs = doc.get_elements_by_tag_name("img");
+//         assert_eq!(imgs.length(), 1, "We should have 1 <img> in the DOM now");
+//         let image_el = imgs.item(0).unwrap();
+//         assert_eq!(image_el.get_attribute("alt").unwrap_or_default(), IMAGE_ALT_TEXT);
+//     }
+// }
+//
+// ///////////////////////////////////////////////////////////////////////////////
+// // Test: Avatar with an image that breaks unless referrerPolicy="no-referrer"
+// ///////////////////////////////////////////////////////////////////////////////
+//
+// #[wasm_bindgen_test(async)]
+// fn avatar_image_referrer_policy_origin_breaks() -> impl std::future::Future<()> {
+//     use gloo_timers::callback::Timeout;
+//
+//     let container = leptos::document().create_element("div").unwrap();
+//     leptos::document().body().unwrap().append_child(&container).unwrap();
+//
+//     let view = view! {
+//       <Avatar::Root data-testid=ROOT_TEST_ID>
+//         <Avatar::Fallback>{FALLBACK_TEXT}</Avatar::Fallback>
+//         <Avatar::Image src="/test.jpg" alt=IMAGE_ALT_TEXT referrerPolicy="origin" />
+//       </Avatar::Root>
+//     };
+//     leptos::mount_to(container.clone(), view);
+//
+//     let doc = leptos::document();
+//     let fallback_el = query_element_by_text(&doc, FALLBACK_TEXT)
+//         .expect("Fallback should be visible initially");
+//     assert_eq!(fallback_el.text_content().unwrap(), FALLBACK_TEXT);
+//
+//     let promise = js_sys::Promise::new(&mut |resolve, _reject| {
+//         Timeout::new(DELAY_MS as u32, move || {
+//             // We'll simulate "error" if policy != "no-referrer"
+//             let imgs = doc.get_elements_by_tag_name("img");
+//             for i in 0..imgs.length() {
+//                 let image = imgs.item(i).unwrap();
+//                 let policy = image.get_attribute("referrerPolicy").unwrap_or_default();
+//                 let evt_type = if policy == "no-referrer" { "load" } else { "error" };
+//                 let evt = web_sys::Event::new(evt_type).unwrap();
+//                 image.dispatch_event(&evt).unwrap();
+//             }
+//             resolve.call0(&JsValue::NULL).unwrap();
+//         })
+//             .forget();
+//     });
+//
+//     async move {
+//         wasm_bindgen_futures::JsFuture::from(promise).await.unwrap();
+//
+//         // Because we triggered an "error" event, the <img> should never appear
+//         let imgs = doc.get_elements_by_tag_name("img");
+//         assert_eq!(imgs.length(), 0, "No <img> should be in the DOM after an error.");
+//     }
+// }

From 894582ec355a6dfa21a8583957c0429e90939020 Mon Sep 17 00:00:00 2001
From: geoffreygarrett <geoffrey@apollo.xyz>
Date: Mon, 6 Jan 2025 08:30:26 +0200
Subject: [PATCH 14/15] chore(deps): leptos-utils updates

---
 Cargo.toml                                    |  5 ++-
 packages/primitives/leptos/arrow/Cargo.toml   |  1 +
 packages/primitives/leptos/arrow/src/arrow.rs |  4 +-
 .../primitives/leptos/aspect-ratio/Cargo.toml |  3 --
 .../primitives/leptos/primitive/Cargo.toml    |  2 +
 .../leptos/primitive/src/primitive.rs         | 43 ++++++++-----------
 6 files changed, 29 insertions(+), 29 deletions(-)

diff --git a/Cargo.toml b/Cargo.toml
index 622e4f27..e2874730 100644
--- a/Cargo.toml
+++ b/Cargo.toml
@@ -25,7 +25,9 @@ dioxus-router = "0.5.6"
 leptos = "0.7.2"
 leptos_dom = "0.7.2"
 leptos_router = "0.7.2"
-leptos-node-ref = { git = "https://github.com/geoffreygarrett/leptos-utils", branch = "update/leptos-0.7" }
+leptos-node-ref = { version = "0.0.3" }
+leptos-maybe-callback = { version = "0.0.3" }
+leptos-typed-fallback-show = { version = "0.0.3" }
 leptos-use = "0.15.0"
 log = "0.4.22"
 serde = "1.0.198"
@@ -40,3 +42,4 @@ yew-style = "0.1.4"
 [patch.crates-io]
 yew = { git = "https://github.com/RustForWeb/yew.git", branch = "feature/use-composed-ref" }
 yew-router = { git = "https://github.com/RustForWeb/yew.git", branch = "feature/use-composed-ref" }
+leptos-node-ref = { git = "https://github.com/geoffreygarrett/leptos-utils", branch = "feature/any-node-ref" }
\ No newline at end of file
diff --git a/packages/primitives/leptos/arrow/Cargo.toml b/packages/primitives/leptos/arrow/Cargo.toml
index 4e5f8b18..75524f9c 100644
--- a/packages/primitives/leptos/arrow/Cargo.toml
+++ b/packages/primitives/leptos/arrow/Cargo.toml
@@ -11,4 +11,5 @@ version.workspace = true
 [dependencies]
 leptos.workspace = true
 leptos-node-ref.workspace = true
+leptos-typed-fallback-show.workspace = true
 radix-leptos-primitive = { path = "../primitive", version = "0.0.2" }
\ No newline at end of file
diff --git a/packages/primitives/leptos/arrow/src/arrow.rs b/packages/primitives/leptos/arrow/src/arrow.rs
index 093bc2bc..d257be3e 100644
--- a/packages/primitives/leptos/arrow/src/arrow.rs
+++ b/packages/primitives/leptos/arrow/src/arrow.rs
@@ -1,6 +1,7 @@
 use leptos::{prelude::*, svg};
-use radix_leptos_primitive::{Primitive, TypedFallbackShow};
+use radix_leptos_primitive::{Primitive};
 use leptos_node_ref::AnyNodeRef;
+use leptos_typed_fallback_show::TypedFallbackShow;
 
 /* -------------------------------------------------------------------------------------------------
  * Arrow
@@ -9,6 +10,7 @@ use leptos_node_ref::AnyNodeRef;
 const NAME: &'static str = "Arrow";
 
 #[component]
+#[allow(non_snake_case)]
 pub fn Arrow(
     #[prop(optional)] children: Option<ChildrenFn>,
     #[prop(into, optional, default=10.0.into())] width: MaybeProp<f64>,
diff --git a/packages/primitives/leptos/aspect-ratio/Cargo.toml b/packages/primitives/leptos/aspect-ratio/Cargo.toml
index 66d67889..9483a6a3 100644
--- a/packages/primitives/leptos/aspect-ratio/Cargo.toml
+++ b/packages/primitives/leptos/aspect-ratio/Cargo.toml
@@ -13,6 +13,3 @@ version.workspace = true
 leptos.workspace = true
 radix-leptos-primitive = { path = "../primitive", version = "0.0.2" }
 leptos-node-ref = { workspace = true }
-
-[features]
-debug = []
\ No newline at end of file
diff --git a/packages/primitives/leptos/primitive/Cargo.toml b/packages/primitives/leptos/primitive/Cargo.toml
index e05a77a4..708cff4f 100644
--- a/packages/primitives/leptos/primitive/Cargo.toml
+++ b/packages/primitives/leptos/primitive/Cargo.toml
@@ -11,3 +11,5 @@ version.workspace = true
 [dependencies]
 leptos.workspace = true
 leptos-node-ref.workspace = true
+leptos-maybe-callback.workspace = true
+leptos-typed-fallback-show.workspace = true
\ No newline at end of file
diff --git a/packages/primitives/leptos/primitive/src/primitive.rs b/packages/primitives/leptos/primitive/src/primitive.rs
index 7ed1e6de..7d4c94ab 100644
--- a/packages/primitives/leptos/primitive/src/primitive.rs
+++ b/packages/primitives/leptos/primitive/src/primitive.rs
@@ -1,6 +1,5 @@
 use leptos::{
     attr::Attribute,
-    either::Either,
     ev::Event,
     html::{ElementType, HtmlElement},
     prelude::*,
@@ -8,32 +7,14 @@ use leptos::{
     tachys::html::{class::IntoClass, node_ref::NodeRefContainer, style::IntoStyle},
 };
 use leptos_node_ref::{any_node_ref, AnyNodeRef};
+use leptos_typed_fallback_show::TypedFallbackShow;
 
-/// We need our own show instead of leptos' Show because attribute spreading does not work
-/// across AnyView as of 0.7.2, which is required here.
-#[component]
-#[allow(non_snake_case)]
-pub fn TypedFallbackShow<F, IV, W, C>(
-    children: TypedChildrenFn<C>,
-    when: W,
-    fallback: F,
-) -> impl IntoView
-where
-    W: Fn() -> bool + Send + Sync + 'static,
-    F: Fn() -> IV + Send + Sync + 'static,
-    IV: IntoView + 'static,
-    C: IntoView + 'static,
-{
-    let memoized_when = ArcMemo::new(move |_| when());
-    let children = children.into_inner();
-
-    move || match memoized_when.get() {
-        true => Either::Left(children()),
-        false => Either::Right(fallback().into_view()),
-    }
-}
+/* -------------------------------------------------------------------------------------------------
+ * Primitive
+ * -----------------------------------------------------------------------------------------------*/
 
 #[component]
+#[allow(non_snake_case)]
 pub fn Primitive<E, C>(
     element: fn() -> HtmlElement<E, (), ()>,
     children: TypedChildrenFn<C>,
@@ -64,6 +45,7 @@ where
 }
 
 #[component]
+#[allow(non_snake_case)]
 pub fn VoidPrimitive<E, C>(
     element: fn() -> HtmlElement<E, (), ()>,
     children: TypedChildrenFn<C>,
@@ -88,6 +70,10 @@ where
     }
 }
 
+/* -------------------------------------------------------------------------------------------------
+ * Utils
+ * -----------------------------------------------------------------------------------------------*/
+
 pub fn compose_callbacks<E>(
     original_handler: Option<Callback<E>>,
     our_handler: Option<Callback<E>>,
@@ -111,4 +97,13 @@ where
             }
         }
     }
+}
+
+/* -------------------------------------------------------------------------------------------------
+ * Primitive re-exports
+ * -----------------------------------------------------------------------------------------------*/
+
+pub mod primitive {
+    pub use super::*;
+    pub use Primitive as Root;
 }
\ No newline at end of file

From a2e0207bc88266d5ebf02cbf4d3d0d24c62e0136 Mon Sep 17 00:00:00 2001
From: geoffreygarrett <geoffrey@apollo.xyz>
Date: Mon, 6 Jan 2025 09:05:50 +0200
Subject: [PATCH 15/15] style: fix SVG attr IDE errors

Used explicit attribute syntax to resolve E0425 errors in IntelliJ for viewBox and preserveAspectRatio attributes
---
 packages/primitives/leptos/arrow/src/arrow.rs | 24 ++++++++++++-------
 1 file changed, 15 insertions(+), 9 deletions(-)

diff --git a/packages/primitives/leptos/arrow/src/arrow.rs b/packages/primitives/leptos/arrow/src/arrow.rs
index d257be3e..a453288b 100644
--- a/packages/primitives/leptos/arrow/src/arrow.rs
+++ b/packages/primitives/leptos/arrow/src/arrow.rs
@@ -1,4 +1,5 @@
 use leptos::{prelude::*, svg};
+use leptos::attr::{Attr, AttributeKey, AttributeValue};
 use radix_leptos_primitive::{Primitive};
 use leptos_node_ref::AnyNodeRef;
 use leptos_typed_fallback_show::TypedFallbackShow;
@@ -38,20 +39,25 @@ pub fn Arrow(
         >
             <TypedFallbackShow
                 when=move || as_child.get().unwrap_or_default()
-                fallback=move || view! {
-                    <polygon points="0,0 30,0 15,10"/>
+                fallback=move || {
+                    view! {
+                        <polygon
+                            points="0,0 30,0 15,10"
+                            viewBox="0 0 30 10"
+                            preserveAspectRatio="none"
+                        />
+                    }
                 }
             >
-                {
-                    children.with_value(|maybe_children| {
-                        maybe_children.as_ref().map(|child_fn| child_fn())
+                {children
+                    .with_value(|maybe_children| {
+                        { maybe_children.as_ref().map(|child_fn| child_fn()) }
                     })
-                }
+                    .attr("viewBox", "0 0 30 10")
+                    .attr("preserveAspectRatio", "none")}
             </TypedFallbackShow>
         </Primitive>
-    }
-    .attr("viewBox", "0 0 30 10")
-    .attr("preserveAspectRatio", "none")
+    };
 }
 
 /* -------------------------------------------------------------------------------------------------