Sonner: replace the JS runtime with a pure Rust/Leptos toast system

app/src/domain/docs/routing/docs_layout.rs

@@ -14,7 +14,7 @@ use crate::utils::page_transition::{PAGE_OUTLET, retrigger_page_fade};
 
 #[derive(Clone)]
 pub struct DocsTocContext {
-    pub toc_items: RwSignal<Vec<TocItem>>,
+    pub toc_items: ArcRwSignal<Vec<TocItem>>,
 }
 
 #[component]
@@ -23,7 +23,7 @@ pub fn DocsLayout() -> impl IntoView {
     let params_demo_name = ParamsUtils::extract(PARAM::NAME);
     let params_demo_name_arc = Arc::new(params_demo_name);
 
-    let toc_items = RwSignal::new(Vec::<TocItem>::new());
+    let toc_items: ArcRwSignal<Vec<TocItem>> = RwSignal::new(Vec::<TocItem>::new()).into();
     let toc_context = DocsTocContext { toc_items };
     provide_context(toc_context.clone());
 

app/src/domain/markdown_ui/components/md_shared_with_toc.rs

@@ -8,7 +8,7 @@ use crate::domain::markdown_ui::components::md_skeleton::MdSkeletonDemo;
 #[component]
 pub fn SharedDemoMdWithToc(
     md_path: &'static str,
-    #[prop(into)] toc_signal: WriteSignal<Vec<TocItem>>,
+    #[prop(into)] toc_signal: ArcWriteSignal<Vec<TocItem>>,
 ) -> impl IntoView {
     let md_file_resource = Resource::new(|| (), move |_| async move { read_md_file_typed(md_path.to_string()).await });
 

app/src/domain/markdown_ui/components/resizable_wrapper.rs

@@ -9,13 +9,17 @@ use crate::domain::markdown_ui::components::my_resizable::{
 /* ========================================================== */
 
 #[component]
-pub fn ResizableWrapper(children: Children, #[prop(into, optional)] preview_class: String) -> impl IntoView {
+pub fn ResizableWrapper(
+    children: Children,
+    #[prop(into, optional)] preview_class: String,
+    #[prop(into, optional)] demo_name: String,
+) -> impl IntoView {
     let preview_classes = format!("flex justify-center items-center w-full min-h-[370px] {}", preview_class);
 
     view! {
         <Resizable>
             <ResizableContainer>
-                <div data-name="Preview" class=preview_classes style="--radius: 0.5rem;">
+                <div data-name="Preview" data-demo-name=demo_name class=preview_classes style="--radius: 0.5rem;">
                     {children()}
                 </div>
             </ResizableContainer>

app/src/domain/markdown_ui/components/static_demo_wrapper.rs

@@ -140,7 +140,7 @@ pub fn StaticDemoWrapper(demo_type: MarkdownType, children: Children) -> impl In
 
             // TODO 🚑 Show does not work at the moment. Using display as shortfix solution.
             <div style:display=move || { if current_tab.get() == Tab::Preview { "block" } else { "none" } }>
-                <ResizableWrapper preview_class="px-4">{children_view}</ResizableWrapper>
+                <ResizableWrapper preview_class="px-4" demo_name=demo_name>{children_view}</ResizableWrapper>
             </div>
 
             <div style:display=move || { if current_tab.get() == Tab::Code { "block" } else { "none" } }>

app/src/domain/tests/drawer_tofix.rs

@@ -1,13 +1,15 @@
 use std::time::Duration;
 
-use leptos::{ev, html, leptos_dom::helpers::window_event_listener, prelude::*};
+use leptos::leptos_dom::helpers::window_event_listener;
+use leptos::prelude::*;
+use leptos::{ev, html};
 use leptos_ui::clx;
+use registry::ui::button::{Button, ButtonSize, ButtonVariant};
 use tw_merge::*;
-use wasm_bindgen::{JsCast, closure::Closure};
+use wasm_bindgen::JsCast;
+use wasm_bindgen::closure::Closure;
 use web_sys::{Element, HtmlElement, KeyboardEvent, PointerEvent};
 
-use crate::ui::button::{Button, ButtonSize, ButtonVariant};
-
 const VELOCITY_THRESHOLD: f64 = 0.4;
 const CLOSE_THRESHOLD: f64 = 0.25;
 const TRANSITION_DURATION_MS: u64 = 500;
@@ -341,19 +343,15 @@ pub fn DrawerContent(
             let delta = current_pos.get_untracked() - start_pos.get_untracked();
             let closing_direction = dragging_in_closing_direction(delta, position);
 
-            if !is_allowed_to_drag.get()
-                && !should_drag(event.target(), &drawer, open_time, last_time_drag_prevented)
-            {
+            if !is_allowed_to_drag.get() && !should_drag(event.target(), &drawer, open_time, last_time_drag_prevented) {
                 return;
             }
 
             is_allowed_to_drag.set(true);
 
             if closing_direction {
                 let abs_delta = delta.abs();
-                let _ = drawer
-                    .style()
-                    .set_property("transform", &drag_transform(delta, closing_direction, position));
+                let _ = drawer.style().set_property("transform", &drag_transform(delta, closing_direction, position));
 
                 if let Some(wrapper) = query_drawer_wrapper() {
                     let percentage_dragged = percentage_dragged(abs_delta, drawer_size.get_untracked());
@@ -372,9 +370,7 @@ pub fn DrawerContent(
                 let _ = overlay.style().set_property("transition", "none");
                 let _ = overlay.style().set_property("opacity", &opacity.to_string());
             } else {
-                let _ = drawer
-                    .style()
-                    .set_property("transform", &drag_transform(delta, closing_direction, position));
+                let _ = drawer.style().set_property("transform", &drag_transform(delta, closing_direction, position));
             }
         }
     };
@@ -388,11 +384,8 @@ pub fn DrawerContent(
         DrawerPosition::Right => "right-0 top-0 bottom-0 max-w-[96vw] rounded-l-[10px]",
     };
 
-    let merged_class = tw_merge!(
-        "flex flex-col pt-3 pb-6 px-6 fixed z-210 bg-background hidden outline-none",
-        position_class,
-        class
-    );
+    let merged_class =
+        tw_merge!("flex flex-col pt-3 pb-6 px-6 fixed z-210 bg-background hidden outline-none", position_class, class);
 
     let class_ctx = ctx.clone();
     let content_animate_ctx = ctx.clone();
@@ -534,12 +527,7 @@ fn should_close_from_drag(delta: f64, velocity: f64, drawer_size: f64, position:
     }
 }
 
-fn finish_pointer_drag(
-    ctx: &DrawerContext,
-    event: PointerEvent,
-    position: DrawerPosition,
-    drag_state: DragState,
-) {
+fn finish_pointer_drag(ctx: &DrawerContext, event: PointerEvent, position: DrawerPosition, drag_state: DragState) {
     if !drag_state.is_dragging.get() || !ctx.dismissible.get() {
         return;
     }
@@ -552,9 +540,7 @@ fn finish_pointer_drag(
     let elapsed = (now_ms() - drag_state.drag_start_time.get_untracked()).max(1.0);
     let velocity = delta.abs() / elapsed;
 
-    let _ = drawer
-        .style()
-        .set_property("transition", &format!("transform 0.5s {TRANSITION_EASING}"));
+    let _ = drawer.style().set_property("transition", &format!("transform 0.5s {TRANSITION_EASING}"));
 
     if let Some(wrapper) = query_drawer_wrapper() {
         let _ = wrapper.style().set_property(
@@ -564,9 +550,7 @@ fn finish_pointer_drag(
     }
 
     if let Some(overlay) = &overlay {
-        let _ = overlay
-            .style()
-            .set_property("transition", &format!("opacity 0.5s {TRANSITION_EASING}"));
+        let _ = overlay.style().set_property("transition", &format!("opacity 0.5s {TRANSITION_EASING}"));
     }
 
     let size = drag_state.drawer_size.get_untracked().max(1.0);
@@ -647,8 +631,7 @@ fn should_drag(
 }
 
 fn focusable_elements(drawer: &HtmlElement) -> Vec<HtmlElement> {
-    const FOCUSABLE_SELECTOR: &str =
-        "a[href], button:not([disabled]), textarea:not([disabled]), input:not([disabled]), select:not([disabled]), [tabindex]:not([tabindex=\"-1\"])";
+    const FOCUSABLE_SELECTOR: &str = "a[href], button:not([disabled]), textarea:not([disabled]), input:not([disabled]), select:not([disabled]), [tabindex]:not([tabindex=\"-1\"])";
 
     let Ok(elements) = drawer.query_selector_all(FOCUSABLE_SELECTOR) else {
         return Vec::new();
@@ -682,10 +665,7 @@ fn focus_first_drawer_element(ctx: &DrawerContext) {
             }
 
             let is_only_close_button = focusable.len() == 1
-                && focusable
-                    .first()
-                    .and_then(|element| element.get_attribute("data-name"))
-                    .as_deref()
+                && focusable.first().and_then(|element| element.get_attribute("data-name")).as_deref()
                     == Some("DrawerClose");
 
             if is_only_close_button {
@@ -718,8 +698,8 @@ fn fix_drawer_position(drawer: &HtmlElement) {
 fn lock_body_scroll() {
     let Some(document) = window().document() else { return };
     let Some(body) = document.body() else { return };
-    let scrollbar_width =
-        window().inner_width().ok().and_then(|width| width.as_f64()).unwrap_or_default() - f64::from(body.client_width());
+    let scrollbar_width = window().inner_width().ok().and_then(|width| width.as_f64()).unwrap_or_default()
+        - f64::from(body.client_width());
 
     let _ = body.set_attribute("data-state", "open");
     if scrollbar_width > 0.0 {
@@ -861,14 +841,10 @@ fn close_drawer_dom(ctx: &DrawerContext, position: DrawerPosition, variant: Draw
     ctx.content_animate.set(false);
     ctx.overlay_animate.set(false);
 
-    let _ = drawer
-        .style()
-        .set_property("transition", &format!("transform 0.5s {TRANSITION_EASING}"));
+    let _ = drawer.style().set_property("transition", &format!("transform 0.5s {TRANSITION_EASING}"));
     let _ = drawer.style().set_property("transform", &close_transform(size, position, variant));
 
-    let _ = overlay
-        .style()
-        .set_property("transition", &format!("opacity 0.5s {TRANSITION_EASING}"));
+    let _ = overlay.style().set_property("transition", &format!("opacity 0.5s {TRANSITION_EASING}"));
     let _ = overlay.style().set_property("opacity", "0");
 
     reset_wrapper_styles();

app/src/shell.rs

@@ -132,16 +132,9 @@ pub fn shell(options: LeptosOptions) -> impl IntoView {
                 <link rel="preload" href=CSS_BUNDLE_URL r#as="style" fetchpriority="high" />
                 <link rel="stylesheet" href=CSS_BUNDLE_URL />
 
-                // Preload and async load Sonner CSS (non-critical)
-                <link rel="preload" href="/app_components/sonner.css" r#as="style" />
-                <link rel="stylesheet" href="/app_components/sonner.css" media="print" onload="this.media='all'" />
-                <noscript>
-                    <link rel="stylesheet" href="/app_components/sonner.css" />
-                </noscript>
                 // Load scripts (async for non-blocking parallel download, executes as soon as ready)
                 <script async src="/app_components/resizable.bundle.js"></script>
                 <script async src="/app_components/shimmer_init.js?v=3"></script>
-                <script async src="/app_components/lazy_load_sonner.js"></script>
                 <script async src="/app_components/sidenav.js?v=1"></script>
 
                 // JSON-LD Structured Data for SEO (inlined at compile time — readable by AI crawlers)

app_crates/registry/src/demos/demo_sonner.rs

@@ -1,12 +1,15 @@
 use leptos::prelude::*;
 
-use crate::ui::sonner::SonnerTrigger;
+use crate::ui::sonner::{SonnerToaster, SonnerTrigger};
 
 #[component]
 pub fn DemoSonner() -> impl IntoView {
     view! {
-        <SonnerTrigger title="You got a message" description="You toasted me!">
-            "Toast Me!"
-        </SonnerTrigger>
+        <>
+            <SonnerTrigger title="You got a message" description="You toasted me!">
+                "Toast Me!"
+            </SonnerTrigger>
+            <SonnerToaster />
+        </>
     }
 }

app_crates/registry/src/demos/demo_sonner_positions.rs

@@ -50,6 +50,7 @@ pub fn DemoSonnerPositions() -> impl IntoView {
                 title="Bottom Right"
                 description="Toast positioned at bottom-right (default)"
                 position="BottomRight"
+                class="bg-secondary text-secondary-foreground hover:bg-secondary/80"
             >
                 "Bottom Right (Default)"
             </SonnerTrigger>
@@ -61,5 +62,6 @@ pub fn DemoSonnerPositions() -> impl IntoView {
         <SonnerToaster position=SonnerPosition::TopRight />
         <SonnerToaster position=SonnerPosition::BottomLeft />
         <SonnerToaster position=SonnerPosition::BottomCenter />
+        <SonnerToaster position=SonnerPosition::BottomRight />
     }
 }

app_crates/registry/src/demos/demo_sonner_variants.rs

@@ -1,30 +1,35 @@
 use leptos::prelude::*;
 
-use crate::ui::sonner::{SonnerTrigger, ToastType};
+use crate::ui::sonner::SonnerTrigger;
+use crate::ui::sonner::SonnerToaster;
+use crate::ui::toast_custom::_data::ToastLevel;
 
 #[component]
 pub fn DemoSonnerVariants() -> impl IntoView {
     view! {
-        <div class="flex flex-wrap gap-2 justify-center">
-            <SonnerTrigger title="You got a message" description="You toasted me!">
-                "Default"
-            </SonnerTrigger>
+        <>
+            <div class="flex flex-wrap gap-2 justify-center">
+                <SonnerTrigger title="You got a message" description="You toasted me!">
+                    "Default"
+                </SonnerTrigger>
 
-            <SonnerTrigger title="You got a message" description="You toasted me!" variant=ToastType::Success>
-                "Success"
-            </SonnerTrigger>
-            <SonnerTrigger title="You got a message" description="You toasted me!" variant=ToastType::Error>
-                "Error"
-            </SonnerTrigger>
-            <SonnerTrigger title="You got a message" description="You toasted me!" variant=ToastType::Warning>
-                "Warning"
-            </SonnerTrigger>
-            <SonnerTrigger title="You got a message" description="You toasted me!" variant=ToastType::Info>
-                "Info"
-            </SonnerTrigger>
-            <SonnerTrigger title="You got a message" description="You toasted me!" variant=ToastType::Loading>
-                "Loading"
-            </SonnerTrigger>
-        </div>
+                <SonnerTrigger title="You got a message" description="You toasted me!" variant=ToastLevel::Success>
+                    "Success"
+                </SonnerTrigger>
+                <SonnerTrigger title="You got a message" description="You toasted me!" variant=ToastLevel::Error>
+                    "Error"
+                </SonnerTrigger>
+                <SonnerTrigger title="You got a message" description="You toasted me!" variant=ToastLevel::Warn>
+                    "Warning"
+                </SonnerTrigger>
+                <SonnerTrigger title="You got a message" description="You toasted me!" variant=ToastLevel::Info>
+                    "Info"
+                </SonnerTrigger>
+                <SonnerTrigger title="You got a message" description="You toasted me!" variant=ToastLevel::Loading>
+                    "Loading"
+                </SonnerTrigger>
+            </div>
+            <SonnerToaster />
+        </>
     }
 }