From 04eb825ac07fac79d7e211ccdebe12dddcfdf805 Mon Sep 17 00:00:00 2001
From: Adoo <adoo@outlook.com>
Date: Sun, 3 Sep 2023 16:06:25 +0800
Subject: [PATCH 01/10] =?UTF-8?q?feat(algo):=20=F0=9F=8E=B8=20add=20a=20st?=
 =?UTF-8?q?rong=20reference=20counter=20only=20smart=20pointer?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 algo/src/lib.rs |   2 +
 algo/src/sc.rs  | 227 ++++++++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 229 insertions(+)
 create mode 100644 algo/src/sc.rs

diff --git a/algo/src/lib.rs b/algo/src/lib.rs
index 272de592c..1caaa9fe2 100644
--- a/algo/src/lib.rs
+++ b/algo/src/lib.rs
@@ -4,3 +4,5 @@ pub use cow_rc::{CowArc, Substr};
 pub use frame_cache::*;
 mod resource;
 pub use resource::*;
+mod sc;
+pub use sc::*;
diff --git a/algo/src/sc.rs b/algo/src/sc.rs
new file mode 100644
index 000000000..326cc7eb2
--- /dev/null
+++ b/algo/src/sc.rs
@@ -0,0 +1,227 @@
+use std::{
+  any::Any,
+  cell::Cell,
+  fmt::{Debug, Display, Formatter, Pointer},
+  ptr::NonNull,
+};
+
+/// A single-thread smart pointer with strong reference count only.
+/// This is a simplified version of `std::rc::Sc` with the weak reference count.
+/// Use it when you are sure that there is no cycle in the reference graph or in
+/// a inner resource manage that will break the cycle by itself.
+pub struct Sc<T: ?Sized>(NonNull<ScBox<T>>);
+
+struct ScBox<T: ?Sized> {
+  ref_cnt: Cell<usize>,
+  value: T,
+}
+
+impl<T> Sc<T> {
+  /// Constructs a new `Sc<T>`.
+  ///
+  /// # Examples
+  ///
+  /// ```
+  /// use ribir_algo::Sc;
+  ///
+  /// let five = Sc::new(5);
+  /// ```
+  #[inline]
+  pub fn new(value: T) -> Self {
+    Self::from_inner(Box::leak(Box::new(ScBox { ref_cnt: Cell::new(1), value })).into())
+  }
+
+  /// Returns the inner value, if the `Sc` has exactly one strong reference.
+  ///
+  /// Otherwise, an [`Err`] is returned with the same `Sc` that was
+  /// passed in.
+  ///
+  /// This will succeed even if there are outstanding weak references.
+  ///
+  /// # Examples
+  ///
+  /// ```
+  /// use ribir_algo::Sc;
+  ///
+  /// let x = Sc::new(3);
+  /// assert_eq!(Sc::try_unwrap(x), Ok(3));
+  ///
+  /// let x = Sc::new(4);
+  /// let _y = Sc::clone(&x);
+  /// assert_eq!(*Sc::try_unwrap(x).unwrap_err(), 4);
+  /// ```
+  #[inline]
+  pub fn try_unwrap(this: Self) -> Result<T, Self> {
+    if Sc::ref_count(&this) == 1 {
+      unsafe {
+        let val = std::ptr::read(&*this); // copy the contained object
+
+        // avoid to call `drop` but release the memory.
+        let layout = std::alloc::Layout::for_value(this.0.as_ref());
+        let ptr = this.0.as_ptr();
+        std::mem::forget(this);
+        std::alloc::dealloc(ptr as *mut _, layout);
+
+        Ok(val)
+      }
+    } else {
+      Err(this)
+    }
+  }
+}
+
+impl Sc<dyn Any> {
+  ///
+  /// todo: prefer implement `CoerceUnsized` if it stable.
+  #[inline]
+  pub fn new_any<T: Any>(value: T) -> Self {
+    let inner: Box<ScBox<dyn Any>> = Box::new(ScBox { ref_cnt: Cell::new(1), value });
+    Self::from_inner(Box::leak(inner).into())
+  }
+}
+
+impl<T: ?Sized> Sc<T> {
+  // Gets the number of pointers to this allocation.
+  ///
+  /// # Examples
+  ///
+  /// ```
+  /// use ribir_algo::Sc;
+  ///
+  /// let five = Sc::new(5);
+  /// let _also_five = Sc::clone(&five);
+  ///
+  /// assert_eq!(2, Sc::ref_count(&five));
+  /// ```
+  #[inline]
+  pub fn ref_count(&self) -> usize { self.inner().ref_cnt() }
+
+  /// Returns `true` if the two `Sc`s point to the same allocation in a vein
+  /// similar to [`ptr::eq`]. See [that function][`ptr::eq`] for caveats when
+  /// comparing `dyn Trait` pointers.
+  ///
+  /// # Examples
+  ///
+  /// ```
+  /// use ribir_algo::Sc;
+  ///
+  /// let five = Sc::new(5);
+  /// let same_five = Sc::clone(&five);
+  /// let other_five = Sc::new(5);
+  ///
+  /// assert!(Sc::ptr_eq(&five, &same_five));
+  /// assert!(!Sc::ptr_eq(&five, &other_five));
+  /// ```
+  pub fn ptr_eq(this: &Self, other: &Self) -> bool { this.0.as_ptr() == other.0.as_ptr() }
+
+  fn from_inner(ptr: NonNull<ScBox<T>>) -> Self { Self(ptr) }
+
+  fn inner(&self) -> &ScBox<T> {
+    // Safety: we're guaranteed that the inner pointer is valid when the `Sc` is
+    // alive
+    unsafe { self.0.as_ref() }
+  }
+}
+
+impl Sc<dyn Any> {
+  /// Attempt to downcast the `Sc<dyn Any>` to a concrete type.
+  ///
+  /// # Examples
+  ///
+  /// ```
+  /// use std::any::Any;
+  /// use ribir_algo::Sc;
+  ///
+  /// fn print_if_string(value: Sc<dyn Any>) {
+  ///     if let Ok(string) = value.downcast::<String>() {
+  ///         println!("String ({}): {}", string.len(), string);
+  ///     }
+  /// }
+  ///
+  /// let my_string = "Hello World".to_string();
+  /// print_if_string(Sc::new_any(my_string));
+  /// print_if_string(Sc::new_any(0i8));
+  /// ```
+  pub fn downcast<T: Any>(self) -> Result<Sc<T>, Sc<dyn Any>> {
+    if (*self).is::<T>() {
+      let ptr = self.0.cast::<ScBox<T>>();
+      std::mem::forget(self);
+      Ok(Sc::from_inner(ptr))
+    } else {
+      Err(self)
+    }
+  }
+}
+
+impl<T: ?Sized> ScBox<T> {
+  fn inc(&self) { self.ref_cnt.set(self.ref_cnt.get() + 1); }
+  fn dec(&self) { self.ref_cnt.set(self.ref_cnt.get() - 1) }
+  fn ref_cnt(&self) -> usize { self.ref_cnt.get() }
+}
+
+impl<T: ?Sized> std::ops::Deref for Sc<T> {
+  type Target = T;
+  #[inline]
+  fn deref(&self) -> &Self::Target { &self.inner().value }
+}
+
+impl<T: ?Sized> Drop for Sc<T> {
+  fn drop(&mut self) {
+    self.inner().dec();
+    if self.inner().ref_cnt() == 0 {
+      unsafe {
+        let layout = std::alloc::Layout::for_value(self.0.as_ref());
+        let ptr = self.0.as_ptr();
+        std::ptr::drop_in_place(ptr);
+        std::alloc::dealloc(ptr as *mut _, layout)
+      }
+    }
+  }
+}
+
+impl<T> Clone for Sc<T> {
+  #[inline]
+  fn clone(&self) -> Self {
+    self.inner().inc();
+    Self(self.0)
+  }
+}
+
+impl<T: ?Sized + Display> Display for Sc<T> {
+  fn fmt(&self, f: &mut Formatter<'_>) -> std::fmt::Result { Display::fmt(&**self, f) }
+}
+
+impl<T: ?Sized + Debug> Debug for Sc<T> {
+  fn fmt(&self, f: &mut Formatter<'_>) -> std::fmt::Result { Debug::fmt(&**self, f) }
+}
+
+impl<T: ?Sized> Pointer for Sc<T> {
+  fn fmt(&self, f: &mut Formatter<'_>) -> std::fmt::Result {
+    Pointer::fmt(&(&**self as *const T), f)
+  }
+}
+
+impl<T: Default> Default for Sc<T> {
+  #[inline]
+  fn default() -> Sc<T> { Sc::new(Default::default()) }
+}
+
+impl<T: ?Sized + PartialEq> PartialEq for Sc<T> {
+  #[inline]
+  fn eq(&self, other: &Sc<T>) -> bool { **self == **other }
+}
+
+#[cfg(test)]
+mod tests {
+  use super::*;
+  #[test]
+  fn test_sc() {
+    let a = Sc::new(1);
+    assert_eq!(Sc::ref_count(&a), 1);
+    let b = Sc::clone(&a);
+    assert_eq!(Sc::ref_count(&b), 2);
+    drop(a);
+    assert_eq!(Sc::ref_count(&b), 1);
+    drop(b);
+  }
+}

From 26334cf221a0af1035dde6b3b22bbb8cd4ce93af Mon Sep 17 00:00:00 2001
From: Adoo <Adoo@outlook.com>
Date: Tue, 4 Jul 2023 21:52:24 +0800
Subject: [PATCH 02/10] =?UTF-8?q?feat(macros):=20=F0=9F=8E=B8=20the=20new?=
 =?UTF-8?q?=20syntax=20split=20`widget`=20into=20several=20small=20macros,?=
 =?UTF-8?q?=20more=20flexible=20and=20consistent.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 core/src/animation/animate.rs                 |   2 +-
 core/src/assign_observable.rs                 |  45 --
 core/src/builtin_widgets.rs                   | 148 +++++++
 core/src/builtin_widgets/align.rs             |   4 +-
 core/src/builtin_widgets/anchor.rs            |   8 +-
 core/src/builtin_widgets/box_decoration.rs    |   2 +-
 core/src/builtin_widgets/cursor.rs            |   2 +-
 core/src/builtin_widgets/delay_drop_widget.rs |   2 +-
 core/src/builtin_widgets/fitted_box.rs        |   2 +-
 core/src/builtin_widgets/focus_node.rs        |   4 +-
 core/src/builtin_widgets/has_focus.rs         |   2 +-
 core/src/builtin_widgets/layout_box.rs        |   2 +-
 core/src/builtin_widgets/lifecycle.rs         |  44 +-
 core/src/builtin_widgets/margin.rs            |   2 +-
 core/src/builtin_widgets/mouse_hover.rs       |   2 +-
 core/src/builtin_widgets/opacity.rs           |   2 +-
 core/src/builtin_widgets/padding.rs           |   2 +-
 core/src/builtin_widgets/pointer_pressed.rs   |   2 +-
 core/src/builtin_widgets/scrollable.rs        |   2 +-
 core/src/builtin_widgets/theme.rs             |   2 +
 core/src/builtin_widgets/transform_widget.rs  |   2 +-
 core/src/builtin_widgets/visibility.rs        |   2 +-
 core/src/builtin_widgets/void.rs              |   2 +-
 core/src/context/app_ctx.rs                   |   9 +-
 core/src/context/build_context.rs             |  94 ++++-
 core/src/declare.rs                           |  74 +++-
 core/src/dynamic_widget.rs                    |  18 +-
 core/src/events/listener_impl_helper.rs       |  49 ++-
 core/src/lib.rs                               |  15 +-
 core/src/pipe.rs                              | 255 ++++++++++++
 core/src/state.rs                             | 111 ++++-
 core/src/state/readonly.rs                    |   4 +-
 core/src/state/stateful.rs                    |  40 +-
 core/src/test_helper.rs                       |  20 +-
 core/src/widget.rs                            |  55 +--
 core/src/widget_children.rs                   |  36 +-
 core/src/widget_children/child_convert.rs     |  20 +-
 .../src/widget_children/compose_child_impl.rs |  26 +-
 core/src/widget_children/multi_child_impl.rs  |  54 +--
 core/src/widget_children/single_child_impl.rs |  71 ++--
 core/src/widget_tree.rs                       |  41 +-
 core/src/widget_tree/layout_info.rs           |   2 +-
 core/src/widget_tree/widget_id.rs             |  12 +-
 core/src/window.rs                            |  33 +-
 dev-helper/src/example_framework.rs           |   2 +-
 docs/essentials/widget_language.md            |   2 +-
 examples/counter/src/counter.rs               |  22 +-
 examples/messages/src/messages.rs             | 120 +++---
 examples/todos/src/todos.rs                   |   9 +-
 macros/Cargo.toml                             |   8 +-
 macros/src/child_template.rs                  |   6 +
 macros/src/declare_derive.rs                  |   1 -
 macros/src/declare_derive2.rs                 | 353 ++++++++++++++++
 macros/src/declare_obj.rs                     | 186 +++++++++
 macros/src/fn_widget_macro.rs                 |  35 ++
 macros/src/lib.rs                             | 130 +++++-
 macros/src/pipe_macro.rs                      |  73 ++++
 macros/src/rdl_macro.rs                       | 181 +++++++++
 macros/src/symbol_process.rs                  | 334 +++++++++++++++
 macros/src/watch_macro.rs                     |  42 ++
 macros/src/widget_macro/code_gen.rs           |   2 +-
 macros/src/widget_macro/visit_mut.rs          |   2 +-
 ribir/src/app.rs                              |   2 +
 tests/Cargo.toml                              |   7 +-
 ...only_allow_in_init_and_finally_fail.stderr |   4 +-
 .../declare/dollar_position_fail.rs           |  11 +
 .../declare/dollar_position_fail.stderr       |  13 +
 .../compile_msg/declare/duplicate_id_fail.rs  |  66 ---
 .../declare/duplicate_id_fail.stderr          |  64 ---
 tests/declare_builder_test.rs                 |  12 +-
 tests/{code_gen_test.rs => rdl_macro_test.rs} | 383 +++++++++++++++++-
 widgets/src/avatar.rs                         |   2 +-
 widgets/src/buttons/filled_button.rs          |   2 +-
 widgets/src/checkbox.rs                       |  14 +-
 widgets/src/common_widget.rs                  |   8 +-
 widgets/src/divider.rs                        |   2 +-
 widgets/src/icon.rs                           |  28 +-
 widgets/src/input/handle.rs                   |  10 +-
 widgets/src/input/text_selectable.rs          |  14 +-
 widgets/src/layout/column.rs                  |   2 +-
 widgets/src/layout/flex.rs                    |   2 +-
 widgets/src/layout/row.rs                     |   2 +-
 widgets/src/layout/sized_box.rs               |   2 +-
 widgets/src/layout/stack.rs                   |   2 +-
 widgets/src/lists.rs                          |   6 +-
 widgets/src/scrollbar.rs                      |   2 +-
 widgets/src/tabs.rs                           |   6 +-
 widgets/src/text.rs                           |   6 +-
 widgets/src/text_field.rs                     |  10 +-
 89 files changed, 2973 insertions(+), 543 deletions(-)
 delete mode 100644 core/src/assign_observable.rs
 create mode 100644 core/src/pipe.rs
 create mode 100644 macros/src/declare_derive2.rs
 create mode 100644 macros/src/declare_obj.rs
 create mode 100644 macros/src/fn_widget_macro.rs
 create mode 100644 macros/src/pipe_macro.rs
 create mode 100644 macros/src/rdl_macro.rs
 create mode 100644 macros/src/symbol_process.rs
 create mode 100644 macros/src/watch_macro.rs
 create mode 100644 tests/compile_msg/declare/dollar_position_fail.rs
 create mode 100644 tests/compile_msg/declare/dollar_position_fail.stderr
 delete mode 100644 tests/compile_msg/declare/duplicate_id_fail.rs
 delete mode 100644 tests/compile_msg/declare/duplicate_id_fail.stderr
 rename tests/{code_gen_test.rs => rdl_macro_test.rs} (59%)

diff --git a/core/src/animation/animate.rs b/core/src/animation/animate.rs
index b3c577289..db9d1d93e 100644
--- a/core/src/animation/animate.rs
+++ b/core/src/animation/animate.rs
@@ -36,7 +36,7 @@ pub struct AnimateInfo<V> {
   _tick_msg_guard: Option<SubscriptionGuard<BoxSubscription<'static>>>,
 }
 
-impl<'a, T: Roc, P: AnimateProperty> StateRef<'a, Animate<T, P>>
+impl<'a, T: Roc, P: AnimateProperty> StatefulRef<'a, Animate<T, P>>
 where
   Animate<T, P>: 'static,
 {
diff --git a/core/src/assign_observable.rs b/core/src/assign_observable.rs
deleted file mode 100644
index 3a0431b5a..000000000
--- a/core/src/assign_observable.rs
+++ /dev/null
@@ -1,45 +0,0 @@
-use std::convert::Infallible;
-
-use rxrust::{ops::map::MapOp, prelude::ObservableExt};
-
-/// Is a struct contain a initialize value and an observable that should be
-/// subscribed to update the value.
-pub struct AssignObservable<V, S: ObservableExt<V, Infallible>> {
-  value: V,
-  observable: S,
-}
-
-impl<V, S> AssignObservable<V, S>
-where
-  S: ObservableExt<V, Infallible>,
-{
-  #[inline]
-  pub fn new(init: V, observable: S) -> Self { Self { value: init, observable } }
-
-  /// map the inner observable stream to another observable that emit same type
-  /// value.
-  pub fn stream_map<R>(self, f: impl FnOnce(S) -> R) -> AssignObservable<V, R>
-  where
-    R: ObservableExt<V, Infallible>,
-  {
-    let Self { value, observable } = self;
-    let observable = f(observable);
-    AssignObservable { value, observable }
-  }
-
-  /// Creates a new `AssignObservable` which calls a closure on each element and
-  /// uses its return as the value.
-  pub fn map<R, F>(self, mut f: F) -> AssignObservable<R, MapOp<S, F, V>>
-  where
-    F: FnMut(V) -> R,
-  {
-    let Self { value, observable } = self;
-    AssignObservable {
-      value: f(value),
-      observable: observable.map(f),
-    }
-  }
-
-  #[inline]
-  pub fn unzip(self) -> (V, S) { (self.value, self.observable) }
-}
diff --git a/core/src/builtin_widgets.rs b/core/src/builtin_widgets.rs
index 916a85e68..e096433af 100644
--- a/core/src/builtin_widgets.rs
+++ b/core/src/builtin_widgets.rs
@@ -1,3 +1,8 @@
+//! Built-in widgets is a set of minimal widgets that describes the most common
+//! UI elements. The most of them can be used to extend other object in the
+//! declare syntax, so other objects can use the builtin fields and methods like
+//! self fields and methods.
+
 pub mod key;
 pub use key::{Key, KeyWidget};
 pub mod image_widget;
@@ -53,3 +58,146 @@ pub mod focus_node;
 pub use focus_node::*;
 pub mod focus_scope;
 pub use focus_scope::*;
+
+use crate::{prelude::*, widget::WidgetBuilder};
+
+macro_rules! impl_fat_obj {
+  ($($builtin_ty: ty),*) => {
+    paste::paste! {
+      #[doc="A fat object that extend the `T` object with all builtin widgets \
+       ability.\
+       During the compose phase, the `FatObj` will be created when a object \
+       use the builtin fields and methods. And they are only a help obj to \
+       build the finally widget, so they will be dropped after composed."
+      ]
+      pub struct FatObj<T> {
+        pub host: T,
+        $([< $builtin_ty: snake:lower >]: Option<State<$builtin_ty>>),*
+      }
+
+      impl<T> FatObj<T> {
+        pub fn new(host: T) -> Self {
+          Self {
+            host,
+            $([< $builtin_ty: snake:lower >]: None),*
+          }
+        }
+
+        $(
+          pub fn [< with_ $builtin_ty: snake:lower >](
+            mut self, builtin: State<$builtin_ty>
+          ) -> Self {
+            self.[< $builtin_ty: snake:lower >] = Some(builtin);
+            self
+          }
+        )*
+
+        $(
+          pub fn [< $builtin_ty: snake:lower >](&mut self, ctx: &BuildCtx)
+            -> &mut State<$builtin_ty>
+          {
+            self
+              .[< $builtin_ty: snake:lower >]
+              .get_or_insert_with(|| $builtin_ty::declare2_builder().build(ctx))
+          }
+        )*
+      }
+
+      impl<T: 'static> WidgetBuilder for FatObj<T>
+      where
+        T: Into<Widget>
+      {
+        fn build(self, ctx: &BuildCtx) -> WidgetId {
+          let mut host: Widget = self.host.into();
+          $(
+            if let Some(builtin) = self.[< $builtin_ty: snake:lower >] {
+              host = builtin.with_child(host, ctx).into();
+            }
+          )*
+          host.build(ctx)
+        }
+      }
+
+      impl<T: SingleWithChild<C>, C> SingleWithChild<C> for FatObj<T>{
+        type Target = FatObj<T::Target>;
+        fn with_child(self, child: C, ctx: &BuildCtx) -> Self::Target {
+          let Self { host, $([< $builtin_ty: snake:lower >]),* } = self;
+          let host = host.with_child(child, ctx);
+          FatObj {
+            host,
+            $([< $builtin_ty: snake:lower >]),*
+          }
+        }
+      }
+
+      impl<T: MultiWithChild<C>, C> MultiWithChild<C> for FatObj<T>{
+        type Target = FatObj<T::Target>;
+        fn with_child(self, child: C, ctx: &BuildCtx) -> Self::Target {
+          let Self { host, $([< $builtin_ty: snake:lower >]),* } = self;
+          let host = host.with_child(child, ctx);
+          FatObj {
+            host,
+            $([< $builtin_ty: snake:lower >]),*
+          }
+        }
+      }
+      impl<T, M, C> ComposeWithChild<C, M> for FatObj<T>
+      where
+        T: ComposeWithChild<C, M>
+      {
+        type Target = FatObj<T::Target>;
+        fn with_child(self, child: C, ctx: &BuildCtx) -> Self::Target {
+          let Self { host, $([< $builtin_ty: snake:lower >]),* } = self;
+          let host = host.with_child(child, ctx);
+          FatObj {
+            host,
+            $([< $builtin_ty: snake:lower >]),*
+          }
+        }
+      }
+    }
+  };
+}
+
+impl_fat_obj!(
+  PointerListener,
+  FocusNode,
+  RequestFocus,
+  FocusListener,
+  FocusBubbleListener,
+  HasFocus,
+  KeyboardListener,
+  CharsListener,
+  WheelListener,
+  MouseHover,
+  PointerPressed,
+  FittedBox,
+  BoxDecoration,
+  Padding,
+  LayoutBox,
+  Cursor,
+  Margin,
+  ScrollableWidget,
+  TransformWidget,
+  HAlignWidget,
+  VAlignWidget,
+  LeftAnchor,
+  RightAnchor,
+  TopAnchor,
+  BottomAnchor,
+  Visibility,
+  Opacity,
+  LifecycleListener,
+  DelayDropWidget
+);
+
+impl<T> std::ops::Deref for FatObj<T> {
+  type Target = T;
+  #[inline]
+  fn deref(&self) -> &Self::Target { &self.host }
+}
+
+impl<T> std::ops::DerefMut for FatObj<T> {
+  #[inline]
+  fn deref_mut(&mut self) -> &mut Self::Target { &mut self.host }
+}
diff --git a/core/src/builtin_widgets/align.rs b/core/src/builtin_widgets/align.rs
index 8f6650c29..979ea3992 100644
--- a/core/src/builtin_widgets/align.rs
+++ b/core/src/builtin_widgets/align.rs
@@ -54,14 +54,14 @@ pub enum VAlign {
 }
 
 /// A widget that align its child in x-axis, base on child's width.
-#[derive(Declare, SingleChild)]
+#[derive(Declare, Declare2, SingleChild)]
 pub struct HAlignWidget {
   #[declare(default, builtin)]
   pub h_align: HAlign,
 }
 
 /// A widget that align its child in y-axis, base on child's height.
-#[derive(Declare, SingleChild)]
+#[derive(Declare, Declare2, SingleChild)]
 pub struct VAlignWidget {
   #[declare(default, builtin)]
   pub v_align: VAlign,
diff --git a/core/src/builtin_widgets/anchor.rs b/core/src/builtin_widgets/anchor.rs
index be20e411e..9a4862101 100644
--- a/core/src/builtin_widgets/anchor.rs
+++ b/core/src/builtin_widgets/anchor.rs
@@ -11,21 +11,21 @@ pub enum PositionUnit {
 }
 
 /// Widget use to anchor child constraints with the left edge of parent widget.
-#[derive(Declare, SingleChild)]
+#[derive(Declare, Declare2, SingleChild)]
 pub struct LeftAnchor {
   #[declare(convert=into, builtin)]
   pub left_anchor: PositionUnit,
 }
 
 /// Widget use to anchor child constraints with the right edge of parent widget.
-#[derive(Declare, SingleChild)]
+#[derive(Declare, Declare2, SingleChild)]
 pub struct RightAnchor {
   #[declare(convert=into, builtin)]
   pub right_anchor: PositionUnit,
 }
 
 /// Widget use to anchor child constraints with the top edge of parent widget.
-#[derive(Declare, SingleChild)]
+#[derive(Declare, Declare2, SingleChild)]
 pub struct TopAnchor {
   #[declare(convert=into, builtin)]
   pub top_anchor: PositionUnit,
@@ -33,7 +33,7 @@ pub struct TopAnchor {
 
 /// Widget use to anchor child constraints with the bottom edge of parent
 /// widget.
-#[derive(Declare, SingleChild)]
+#[derive(Declare, Declare2, SingleChild)]
 pub struct BottomAnchor {
   #[declare(convert=into, builtin)]
   pub bottom_anchor: PositionUnit,
diff --git a/core/src/builtin_widgets/box_decoration.rs b/core/src/builtin_widgets/box_decoration.rs
index 70ed2ee03..aa77739cd 100644
--- a/core/src/builtin_widgets/box_decoration.rs
+++ b/core/src/builtin_widgets/box_decoration.rs
@@ -1,7 +1,7 @@
 use crate::{impl_query_self_only, prelude::*};
 
 /// The BoxDecoration provides a variety of ways to draw a box.
-#[derive(SingleChild, Default, Clone, Declare)]
+#[derive(SingleChild, Default, Clone, Declare, Declare2)]
 pub struct BoxDecoration {
   /// The background of the box.
   #[declare(builtin, default, convert=custom)]
diff --git a/core/src/builtin_widgets/cursor.rs b/core/src/builtin_widgets/cursor.rs
index ab5d407b8..3dc4d37f4 100644
--- a/core/src/builtin_widgets/cursor.rs
+++ b/core/src/builtin_widgets/cursor.rs
@@ -4,7 +4,7 @@ use winit::window::CursorIcon;
 
 /// `Cursor` is an attribute to assign an `cursor` to a widget.
 
-#[derive(Declare, Debug)]
+#[derive(Declare, Debug, Declare2)]
 pub struct Cursor {
   #[declare(convert=custom, builtin, default)]
   pub cursor: Rc<Cell<CursorIcon>>,
diff --git a/core/src/builtin_widgets/delay_drop_widget.rs b/core/src/builtin_widgets/delay_drop_widget.rs
index 989c8d405..9c11ff019 100644
--- a/core/src/builtin_widgets/delay_drop_widget.rs
+++ b/core/src/builtin_widgets/delay_drop_widget.rs
@@ -1,6 +1,6 @@
 use crate::{impl_query_self_only, prelude::*};
 
-#[derive(Declare)]
+#[derive(Declare, Declare2)]
 pub struct DelayDropWidget {
   #[declare(builtin)]
   pub delay_drop_until: bool,
diff --git a/core/src/builtin_widgets/fitted_box.rs b/core/src/builtin_widgets/fitted_box.rs
index 552424e21..b9ac76232 100644
--- a/core/src/builtin_widgets/fitted_box.rs
+++ b/core/src/builtin_widgets/fitted_box.rs
@@ -19,7 +19,7 @@ pub enum BoxFit {
 }
 
 /// Widget set how its child should be scale to fit its box.
-#[derive(Declare, SingleChild)]
+#[derive(Declare, Declare2, SingleChild)]
 pub struct FittedBox {
   #[declare(builtin)]
   pub box_fit: BoxFit,
diff --git a/core/src/builtin_widgets/focus_node.rs b/core/src/builtin_widgets/focus_node.rs
index 56c6fdda9..b36265c62 100644
--- a/core/src/builtin_widgets/focus_node.rs
+++ b/core/src/builtin_widgets/focus_node.rs
@@ -5,7 +5,7 @@ use crate::{
   prelude::*,
 };
 
-#[derive(Default, Declare)]
+#[derive(Default, Declare, Declare2)]
 pub struct FocusNode {
   /// Indicates that `widget` can be focused, and where it participates in
   /// sequential keyboard navigation (usually with the Tab key, hence the name.
@@ -97,7 +97,7 @@ pub(crate) fn dynamic_compose_focus_node(widget: Widget) -> Widget {
   })
   .into()
 }
-#[derive(Declare)]
+#[derive(Declare, Declare2)]
 pub struct RequestFocus {
   #[declare(default)]
   handle: Option<FocusHandle>,
diff --git a/core/src/builtin_widgets/has_focus.rs b/core/src/builtin_widgets/has_focus.rs
index d5d5607b5..37133b19d 100644
--- a/core/src/builtin_widgets/has_focus.rs
+++ b/core/src/builtin_widgets/has_focus.rs
@@ -1,5 +1,5 @@
 use crate::prelude::*;
-#[derive(PartialEq, Clone, Declare)]
+#[derive(PartialEq, Clone, Declare, Declare2)]
 pub struct HasFocus {
   #[declare(skip, default)]
   focused: bool,
diff --git a/core/src/builtin_widgets/layout_box.rs b/core/src/builtin_widgets/layout_box.rs
index 64c43ab64..d5e64644a 100644
--- a/core/src/builtin_widgets/layout_box.rs
+++ b/core/src/builtin_widgets/layout_box.rs
@@ -1,7 +1,7 @@
 use crate::prelude::*;
 
 /// Widget let user to access the layout result of its child.
-#[derive(Declare)]
+#[derive(Declare, Declare2)]
 pub struct LayoutBox {
   #[declare(skip)]
   /// the rect box of its child and the coordinate is relative to its parent.
diff --git a/core/src/builtin_widgets/lifecycle.rs b/core/src/builtin_widgets/lifecycle.rs
index 31e55f789..465cb974c 100644
--- a/core/src/builtin_widgets/lifecycle.rs
+++ b/core/src/builtin_widgets/lifecycle.rs
@@ -12,7 +12,7 @@ define_widget_context!(LifecycleEvent);
 
 crate::events::impl_event_subject!(Lifecycle, event_name = AllLifecycle);
 
-#[derive(Declare, Default)]
+#[derive(Declare, Declare2, Default)]
 pub struct LifecycleListener {
   #[declare(skip)]
   lifecycle: LifecycleSubject,
@@ -86,6 +86,48 @@ impl LifecycleListenerDeclarer {
   }
 }
 
+impl LifecycleListenerDeclarer2 {
+  pub fn on_mounted(
+    mut self,
+    handler: impl for<'r> FnMut(&'r mut LifecycleEvent<'_>) + 'static,
+  ) -> Self {
+    let _ = self
+      .subject()
+      .filter_map(match_closure!(Mounted))
+      .take(1)
+      .subscribe(handler);
+
+    self
+  }
+
+  pub fn on_performed_layout(mut self, handler: impl FnMut(&mut LifecycleEvent) + 'static) -> Self {
+    let _ = self
+      .subject()
+      .filter_map(match_closure!(PerformedLayout))
+      .subscribe(handler);
+
+    self
+  }
+
+  pub fn on_disposed(mut self, handler: impl FnMut(&mut LifecycleEvent) + 'static) -> Self {
+    let _ = self
+      .subject()
+      .filter_map(match_closure!(Disposed))
+      .take(1)
+      .subscribe(handler);
+
+    self
+  }
+
+  fn subject(&mut self) -> LifecycleSubject {
+    self
+      .lifecycle
+      .get_or_insert_with(DeclareInit::default)
+      .value()
+      .clone()
+  }
+}
+
 impl_query_self_only!(LifecycleListener);
 
 impl EventListener for LifecycleListener {
diff --git a/core/src/builtin_widgets/margin.rs b/core/src/builtin_widgets/margin.rs
index 2a2e0883f..8369f087b 100644
--- a/core/src/builtin_widgets/margin.rs
+++ b/core/src/builtin_widgets/margin.rs
@@ -9,7 +9,7 @@ pub struct EdgeInsets {
 }
 
 /// A widget that create space around its child.
-#[derive(SingleChild, Default, Clone, PartialEq, Declare)]
+#[derive(SingleChild, Default, Clone, PartialEq, Declare, Declare2)]
 pub struct Margin {
   #[declare(builtin, default)]
   pub margin: EdgeInsets,
diff --git a/core/src/builtin_widgets/mouse_hover.rs b/core/src/builtin_widgets/mouse_hover.rs
index 913b81a61..639c7dd2f 100644
--- a/core/src/builtin_widgets/mouse_hover.rs
+++ b/core/src/builtin_widgets/mouse_hover.rs
@@ -1,6 +1,6 @@
 use crate::prelude::*;
 
-#[derive(PartialEq, Clone, Declare)]
+#[derive(PartialEq, Clone, Declare, Declare2)]
 pub struct MouseHover {
   #[declare(skip, default)]
   hover: bool,
diff --git a/core/src/builtin_widgets/opacity.rs b/core/src/builtin_widgets/opacity.rs
index 53663c9f9..ebc611435 100644
--- a/core/src/builtin_widgets/opacity.rs
+++ b/core/src/builtin_widgets/opacity.rs
@@ -1,7 +1,7 @@
 use crate::impl_query_self_only;
 use crate::prelude::*;
 
-#[derive(Declare, Default, Clone, SingleChild)]
+#[derive(Declare, Declare2, Default, Clone, SingleChild)]
 pub struct Opacity {
   #[declare(builtin)]
   pub opacity: f32,
diff --git a/core/src/builtin_widgets/padding.rs b/core/src/builtin_widgets/padding.rs
index 4778a1956..ad33362e7 100644
--- a/core/src/builtin_widgets/padding.rs
+++ b/core/src/builtin_widgets/padding.rs
@@ -1,7 +1,7 @@
 use crate::{impl_query_self_only, prelude::*};
 
 /// A widget that insets its child by the given padding.
-#[derive(SingleChild, Clone, Declare)]
+#[derive(SingleChild, Clone, Declare, Declare2)]
 pub struct Padding {
   #[declare(builtin)]
   pub padding: EdgeInsets,
diff --git a/core/src/builtin_widgets/pointer_pressed.rs b/core/src/builtin_widgets/pointer_pressed.rs
index 18a3ee1c1..a8dcf20a7 100644
--- a/core/src/builtin_widgets/pointer_pressed.rs
+++ b/core/src/builtin_widgets/pointer_pressed.rs
@@ -2,7 +2,7 @@ use crate::prelude::*;
 
 /// Widget keep the pointer press state of its child. As a builtin widget, user
 /// can call `pointer_pressed` method to get the pressed state of a widget.
-#[derive(Declare)]
+#[derive(Declare, Declare2)]
 pub struct PointerPressed {
   #[declare(skip, builtin)]
   pointer_pressed: bool,
diff --git a/core/src/builtin_widgets/scrollable.rs b/core/src/builtin_widgets/scrollable.rs
index a8d6284f6..b26d315f5 100644
--- a/core/src/builtin_widgets/scrollable.rs
+++ b/core/src/builtin_widgets/scrollable.rs
@@ -15,7 +15,7 @@ pub enum Scrollable {
 }
 
 /// Helper struct for builtin scrollable field.
-#[derive(Declare)]
+#[derive(Declare, Declare2)]
 pub struct ScrollableWidget {
   #[declare(builtin, default)]
   pub scrollable: Scrollable,
diff --git a/core/src/builtin_widgets/theme.rs b/core/src/builtin_widgets/theme.rs
index 0650e86d5..1247c49b3 100644
--- a/core/src/builtin_widgets/theme.rs
+++ b/core/src/builtin_widgets/theme.rs
@@ -84,6 +84,8 @@ impl ComposeChild for ThemeWidget {
   fn compose_child(this: State<Self>, child: Self::Child) -> Widget {
     use crate::prelude::*;
     FnWidget::new(move |ctx| {
+      let ctx = ctx.force_as_mut();
+
       let theme = match this {
         State::Stateless(t) => t.theme,
         State::Stateful(s) => s.state_ref().theme.clone(),
diff --git a/core/src/builtin_widgets/transform_widget.rs b/core/src/builtin_widgets/transform_widget.rs
index 2e389ce89..89ebc0a04 100644
--- a/core/src/builtin_widgets/transform_widget.rs
+++ b/core/src/builtin_widgets/transform_widget.rs
@@ -1,6 +1,6 @@
 use crate::{impl_query_self_only, prelude::*, widget::hit_test_impl};
 
-#[derive(SingleChild, Declare, Clone)]
+#[derive(SingleChild, Declare, Declare2, Clone)]
 pub struct TransformWidget {
   #[declare(builtin, default)]
   pub transform: Transform,
diff --git a/core/src/builtin_widgets/visibility.rs b/core/src/builtin_widgets/visibility.rs
index cec501cf4..709925370 100644
--- a/core/src/builtin_widgets/visibility.rs
+++ b/core/src/builtin_widgets/visibility.rs
@@ -1,6 +1,6 @@
 use crate::{impl_query_self_only, prelude::*};
 
-#[derive(Declare)]
+#[derive(Declare, Declare2)]
 pub struct Visibility {
   #[declare(builtin)]
   pub visible: bool,
diff --git a/core/src/builtin_widgets/void.rs b/core/src/builtin_widgets/void.rs
index b83d44cd7..3cb635375 100644
--- a/core/src/builtin_widgets/void.rs
+++ b/core/src/builtin_widgets/void.rs
@@ -4,7 +4,7 @@ use crate::{impl_query_self_only, prelude::*};
 /// node in `widget!` macro, or hold a place in tree. When it have a child
 /// itself will be dropped when build tree, otherwise as a render widget but do
 /// nothing.
-#[derive(Declare)]
+#[derive(Declare, Declare2)]
 pub struct Void;
 
 impl Render for Void {
diff --git a/core/src/context/app_ctx.rs b/core/src/context/app_ctx.rs
index 79362a8c7..6f7bc2b07 100644
--- a/core/src/context/app_ctx.rs
+++ b/core/src/context/app_ctx.rs
@@ -189,7 +189,14 @@ impl AppCtx {
   #[track_caller]
   pub unsafe fn new_lock_scope() -> MutexGuard<'static, ()> {
     static LOCK: Mutex<()> = Mutex::new(());
-    let locker = LOCK.lock().unwrap();
+
+    let locker = LOCK.lock().unwrap_or_else(|e| {
+      // Only clear for test, so we have a clear error message.
+      #[cfg(test)]
+      LOCK.clear_poison();
+
+      e.into_inner()
+    });
     APP_CTX_INIT = Once::new();
     locker
   }
diff --git a/core/src/context/build_context.rs b/core/src/context/build_context.rs
index fe7e55856..ff2e57d2b 100644
--- a/core/src/context/build_context.rs
+++ b/core/src/context/build_context.rs
@@ -1,23 +1,43 @@
 use crate::{
   prelude::*,
-  widget::{widget_id::new_node, WidgetTree},
+  widget::{widget_id::new_node, TreeArena, WidgetTree},
+  window::{DelayEvent, WindowId},
 };
 use std::{ops::Deref, rc::Rc};
 
+/// A context provide during build the widget tree.
 pub struct BuildCtx<'a> {
   pub(crate) themes: Option<Vec<Rc<Theme>>>,
   /// The widget which this `BuildCtx` is created from. It's not means this
   /// is the parent of the widget which is builded by this `BuildCtx`.
   ctx_from: Option<WidgetId>,
-  tree: &'a mut WidgetTree,
+  pub(crate) tree: &'a mut WidgetTree,
+}
+
+/// A handle of `BuildCtx` that you can store it and access the `BuildCtx` later
+/// in anywhere.
+#[derive(Debug, Clone, Copy, PartialEq, Eq, Hash)]
+pub struct BuildCtxHandle {
+  ctx_from: Option<WidgetId>,
+  wnd_id: WindowId,
 }
 
 impl<'a> BuildCtx<'a> {
+  /// Return the window of this context is created from.
   pub fn window(&self) -> Rc<Window> { self.tree.window() }
 
   /// Get the widget which this `BuildCtx` is created from.
   pub fn ctx_from(&self) -> WidgetId { self.ctx_from.unwrap_or_else(|| self.tree.root()) }
 
+  /// Create a handle of this `BuildCtx` which support `Clone`, `Copy` and
+  /// convert back to this `BuildCtx`. This let you can store the `BuildCtx`.
+  pub fn handle(&self) -> BuildCtxHandle {
+    BuildCtxHandle {
+      wnd_id: self.tree.window().id(),
+      ctx_from: self.ctx_from,
+    }
+  }
+
   pub fn reset_ctx_from(&mut self, reset: Option<WidgetId>) -> Option<WidgetId> {
     std::mem::replace(&mut self.ctx_from, reset)
   }
@@ -51,11 +71,58 @@ impl<'a> BuildCtx<'a> {
     new_node(arena, widget)
   }
 
-  pub(crate) fn append_child(&self, parent: WidgetId, child: WidgetId) {
-    let arena = &mut self.force_as_mut().tree.arena;
-    parent.append(child, arena);
+  pub(crate) fn append_child(&mut self, parent: WidgetId, child: WidgetId) {
+    parent.append(child, &mut self.tree.arena);
+  }
+
+  /// Insert `next` after `prev`
+  pub(crate) fn insert_after(&mut self, prev: WidgetId, next: WidgetId) {
+    let arena = &mut self.tree.arena;
+    prev.insert_after(next, arena);
+  }
+
+  /// After insert new subtree to the widget tree, call this to watch the
+  /// subtree and fire mount events.
+  pub(crate) fn on_subtree_mounted(&self, id: WidgetId) {
+    id.descendants(&self.tree.arena)
+      .for_each(|w| self.on_widget_mounted(w));
+    self.tree.mark_dirty(id);
   }
 
+  /// After insert new widget to the widget tree, call this to watch the widget
+  /// and fire mount events.
+  pub(crate) fn on_widget_mounted(&self, id: WidgetId) {
+    self.assert_get(id).query_all_type(
+      |notifier: &StateChangeNotifier| {
+        let state_changed = self.tree.dirty_set.clone();
+        notifier
+          .raw_modifies()
+          .filter(|b| b.contains(ModifyScope::FRAMEWORK))
+          .subscribe(move |_| {
+            state_changed.borrow_mut().insert(id);
+          });
+        true
+      },
+      QueryOrder::OutsideFirst,
+    );
+
+    self.window().add_delay_event(DelayEvent::Mounted(id));
+  }
+
+  /// Dispose the whole subtree of `id`, include `id` itself.
+  pub(crate) fn dispose_subtree(&self, id: WidgetId) {
+    // todo: delay drop query
+    let tree = &mut self.force_as_mut().tree;
+    tree.detach(id);
+    self
+      .window()
+      .add_delay_event(DelayEvent::Disposed { id, delay_drop: false });
+    let (arena1, arena2) = unsafe { split_arena(&mut tree.arena) };
+    id.descendants(arena1).for_each(|id| id.mark_drop(arena2))
+  }
+
+  pub(crate) fn mark_dirty(&mut self, id: WidgetId) { self.tree.mark_dirty(id); }
+
   #[inline]
   pub(crate) fn push_theme(&self, theme: Rc<Theme>) { self.themes().push(theme); }
 
@@ -96,6 +163,23 @@ impl<'a> BuildCtx<'a> {
   }
 }
 
+impl BuildCtxHandle {
+  /// Acquires a reference to the `BuildCtx` in this handle, maybe not exist if
+  /// the window is closed or widget is removed.
+  pub fn with_ctx<R>(self, f: impl FnOnce(&BuildCtx) -> R) -> Option<R> {
+    AppCtx::get_window(self.wnd_id).map(|wnd| {
+      let mut tree = wnd.widget_tree.borrow_mut();
+      let ctx = BuildCtx::new(self.ctx_from, &mut tree);
+      f(&ctx)
+    })
+  }
+}
+
+pub(crate) unsafe fn split_arena(tree: &mut TreeArena) -> (&mut TreeArena, &mut TreeArena) {
+  let ptr = tree as *mut TreeArena;
+  (&mut *ptr, &mut *ptr)
+}
+
 #[cfg(test)]
 mod tests {
   use super::*;
diff --git a/core/src/declare.rs b/core/src/declare.rs
index 56f97b516..d36d77d6f 100644
--- a/core/src/declare.rs
+++ b/core/src/declare.rs
@@ -1,10 +1,19 @@
-use crate::context::BuildCtx;
+use crate::{context::BuildCtx, prelude::Pipe};
+use rxrust::ops::box_it::BoxOp;
+use std::convert::Infallible;
 
 pub trait Declare {
   type Builder: DeclareBuilder;
   fn declare_builder() -> Self::Builder;
 }
 
+/// The next version of `Declare` trait. It will replace the `Declare` trait
+/// after it is stable.
+pub trait Declare2 {
+  type Builder: DeclareBuilder;
+  fn declare2_builder() -> Self::Builder;
+}
+
 /// widget builder use to construct a widget in  `widget!`. See the [mod level
 /// document](declare) to know how to use it.
 pub trait DeclareBuilder {
@@ -12,6 +21,69 @@ pub trait DeclareBuilder {
   fn build(self, ctx: &BuildCtx) -> Self::Target;
 }
 
+/// The type use to store the init value of the field when declare a object.
+pub enum DeclareInit<V> {
+  Value(V),
+  Pipe(Pipe<V>),
+}
+
+impl<V: 'static> DeclareInit<V> {
+  pub fn unzip(self) -> (V, Option<BoxOp<'static, V, Infallible>>) {
+    match self {
+      Self::Value(v) => (v, None),
+      Self::Pipe(v) => {
+        let (v, pipe) = v.unzip();
+        (v, Some(pipe))
+      }
+    }
+  }
+
+  pub fn value(&self) -> &V {
+    match self {
+      Self::Value(v) => v,
+      Self::Pipe(v) => v.value(),
+    }
+  }
+
+  pub fn value_mut(&mut self) -> &mut V {
+    match self {
+      Self::Value(v) => v,
+      Self::Pipe(v) => v.value_mut(),
+    }
+  }
+}
+
+impl<T: Default> Default for DeclareInit<T> {
+  #[inline]
+  fn default() -> Self { Self::Value(T::default()) }
+}
+
+pub trait DeclareFrom<V, M> {
+  fn declare_from(value: V) -> Self;
+}
+
+impl<V, U: From<V>> DeclareFrom<V, ()> for DeclareInit<U> {
+  #[inline]
+  fn declare_from(value: V) -> Self { Self::Value(value.into()) }
+}
+
+impl<V, U: From<V>> DeclareFrom<V, Option<()>> for DeclareInit<Option<U>> {
+  #[inline]
+  fn declare_from(value: V) -> Self { Self::Value(Some(value.into())) }
+}
+
+impl<V: 'static, U: From<V> + 'static> DeclareFrom<Pipe<V>, Pipe<()>> for DeclareInit<U> {
+  #[inline]
+  fn declare_from(value: Pipe<V>) -> Self { Self::Pipe(value.map(U::from)) }
+}
+
+impl<V: 'static, U: From<V> + 'static> DeclareFrom<Pipe<V>, Option<Pipe<()>>>
+  for DeclareInit<Option<U>>
+{
+  #[inline]
+  fn declare_from(value: Pipe<V>) -> Self { Self::Pipe(value.map(|v| Some(v.into()))) }
+}
+
 #[derive(Debug, PartialEq, Hash)]
 pub struct DeclareStripOption<O>(O);
 
diff --git a/core/src/dynamic_widget.rs b/core/src/dynamic_widget.rs
index 69da355c7..8400c24bd 100644
--- a/core/src/dynamic_widget.rs
+++ b/core/src/dynamic_widget.rs
@@ -256,8 +256,9 @@ impl<D: 'static> DynRender<D> {
       tree: &mut WidgetTree,
     ) {
       let mut handlers = SmallVec::<[_; 1]>::new();
+      tree.detach(wid);
+
       let arena = &mut tree.arena;
-      wid.detach(arena);
       wid.assert_get(arena).query_all_type(
         |notifier: &StateChangeNotifier| {
           let state_changed = tree.dirty_set.clone();
@@ -285,7 +286,7 @@ impl<D: 'static> DynRender<D> {
         .delay(std::time::Duration::ZERO, tree.window().frame_scheduler())
         .subscribe(move |_| {
           if let Some(wnd) = AppCtx::get_window(wnd_id) {
-            wid.remove_subtree(&mut wnd.widget_tree.borrow_mut());
+            wnd.widget_tree.borrow_mut().remove_subtree(wid);
           }
           host.wids.borrow_mut().remove(&wid);
           handlers.clear();
@@ -309,7 +310,8 @@ impl<D: 'static> DynRender<D> {
       self.drop_until_widgets.add(wid);
       tree.dirty_set.borrow_mut().insert(wid);
     } else {
-      wid.detach(&mut tree.arena);
+      tree.detach(wid);
+
       let (arena1, arena2) = unsafe { split_arena(&mut tree.arena) };
       wid
         .descendants(arena1)
@@ -394,12 +396,10 @@ impl_query_self_only!(DynWidget<D>, <D>, where D: 'static);
 
 fn inspect_key(id: &WidgetId, tree: &TreeArena, mut cb: impl FnMut(&dyn AnyKey)) {
   #[allow(clippy::borrowed_box)]
-  id.assert_get(tree).query_on_first_type(
-    QueryOrder::OutsideFirst,
-    |key_widget: &Box<dyn AnyKey>| {
-      cb(&**key_widget);
-    },
-  );
+  id.assert_get(tree)
+    .query_on_first_type(QueryOrder::OutsideFirst, |key_widget: &Box<dyn AnyKey>| {
+      cb(&**key_widget)
+    });
 }
 
 fn single_down(id: WidgetId, arena: &TreeArena, mut down_level: isize) -> Option<WidgetId> {
diff --git a/core/src/events/listener_impl_helper.rs b/core/src/events/listener_impl_helper.rs
index e6e856dab..0a2742f75 100644
--- a/core/src/events/listener_impl_helper.rs
+++ b/core/src/events/listener_impl_helper.rs
@@ -43,7 +43,7 @@ macro_rules! impl_listener {
   ($doc: literal, $name: ident, $event_ty: ident) => {
     paste::paste! {
       #[doc= $doc]
-      #[derive(Declare)]
+      #[derive(Declare, Declare2)]
       pub struct [<$name Listener>]{
         #[declare(skip)]
         [<$name:snake _subject>]: [<$name Subject>]
@@ -58,6 +58,16 @@ macro_rules! impl_listener {
         }
       }
 
+      impl [<$name ListenerDeclarer2>] {
+        fn subject(&mut self) -> [<$name Subject>] {
+          self
+            .[<$name:snake _subject>]
+            .get_or_insert_with(DeclareInit::default)
+            .value()
+            .clone()
+        }
+      }
+
       impl [<$name Listener>] {
         /// Convert a observable stream of this event.
         pub fn [<$name:snake _stream>](&self) -> [<$name Subject>] {
@@ -88,6 +98,28 @@ macro_rules! impl_multi_event_listener {
       impl_all_event!($name, $($on_doc, $event_ty),+);
       impl_listener!($doc, $name, [<All $name>]);
 
+      impl [<$name ListenerDeclarer2>] {
+        $(
+          #[doc = "Sets up a function that will be called whenever the `" $event_ty "` is delivered"]
+          pub fn [<on_ $event_ty:snake>](
+            mut self,
+            handler: impl for<'r> FnMut(&'r mut [<$name Event>]<'_>) + 'static
+          ) -> Self
+          {
+            self
+            .subject()
+            .filter_map(
+              (|e| match e {
+                [<All $name>]::$event_ty(e) => Some(e),
+                _ => None,
+              }) as for<'a, 'b> fn(&'a mut [<All $name>]::<'b>) -> Option<&'a mut [<$name Event>] <'b>>
+            )
+            .subscribe(handler);
+            self
+          }
+        )+
+      }
+
       impl [<$name ListenerDeclarer>] {
         $(
           #[doc = "Sets up a function that will be called \
@@ -120,11 +152,24 @@ macro_rules! impl_single_event_listener {
     paste::paste! {
       impl_listener!($doc, $name);
 
+      impl [<$name ListenerDeclarer2>] {
+        #[doc = "Sets up a function that will be called whenever the `" [<$name Event>] "` is delivered"]
+        pub fn [<on_ $name:snake>](
+          self,
+          handler: impl FnMut(&'_ mut [<$name Event>]<'_>) + 'static
+        ) -> Self {
+          self
+            .subject()
+            .subscribe(handler);
+          self
+        }
+      }
+
       impl [<$name ListenerDeclarer>] {
         #[doc = "Sets up a function that will be called whenever the `" [<$name Event>] "` is delivered"]
         pub fn [<on_ $name:snake>](
           self,
-          handler: impl for<'r> FnMut(&'r mut [<$name Event>]<'_>) + 'static
+          handler: impl FnMut(&'_ mut [<$name Event>]<'_>) + 'static
         ) -> Self {
           self
             .subject()
diff --git a/core/src/lib.rs b/core/src/lib.rs
index cb39b7f46..b900d9138 100644
--- a/core/src/lib.rs
+++ b/core/src/lib.rs
@@ -1,4 +1,5 @@
-#![feature(test, decl_macro)]
+#![feature(decl_macro)]
+#![cfg_attr(test, feature(mutex_unpoison, test))]
 
 #[macro_use]
 extern crate bitflags;
@@ -11,11 +12,11 @@ pub mod data_widget;
 mod state;
 pub(crate) mod widget_tree;
 
-pub mod assign_observable;
 pub mod clipboard;
 pub mod declare;
 pub mod dynamic_widget;
 pub mod events;
+pub mod pipe;
 pub mod ticker;
 pub mod timer;
 pub mod widget;
@@ -25,8 +26,6 @@ pub mod window;
 pub mod prelude {
   pub use crate::animation::*;
   #[doc(no_inline)]
-  pub use crate::assign_observable::AssignObservable;
-  #[doc(no_inline)]
   pub use crate::builtin_widgets::*;
   #[doc(no_inline)]
   pub use crate::context::*;
@@ -38,6 +37,9 @@ pub mod prelude {
   pub use crate::dynamic_widget::*;
   #[doc(no_inline)]
   pub use crate::events::*;
+  pub use crate::path_state_splitter;
+  #[doc(no_inline)]
+  pub use crate::pipe::Pipe;
   #[doc(no_inline)]
   pub use crate::state::*;
   #[doc(no_inline)]
@@ -57,7 +59,10 @@ pub mod prelude {
   pub use ribir_algo::CowArc;
   pub use ribir_geom::*;
   #[doc(no_inline)]
-  pub use ribir_macros::{include_svg, widget, Declare, Lerp, MultiChild, SingleChild, Template};
+  pub use ribir_macros::{
+    ctx, fn_widget, include_svg, pipe, rdl, set_build_ctx, watch, widget, Declare, Declare2, Lerp,
+    MultiChild, SingleChild, Template, _dollar_ಠ_ಠ,
+  };
   #[doc(no_inline)]
   pub use ribir_painter::*;
   #[doc(no_inline)]
diff --git a/core/src/pipe.rs b/core/src/pipe.rs
new file mode 100644
index 000000000..87bf74063
--- /dev/null
+++ b/core/src/pipe.rs
@@ -0,0 +1,255 @@
+use rxrust::{
+  ops::box_it::BoxOp,
+  prelude::{BoxIt, ObservableExt, ObservableItem},
+  subscription::Subscription,
+};
+use std::{
+  cell::{Cell, RefCell},
+  convert::Infallible,
+  rc::Rc,
+};
+
+use crate::{
+  builtin_widgets::{key::AnyKey, Void},
+  context::BuildCtx,
+  data_widget::attach_to_id,
+  prelude::{AnonymousData, DataWidget, Multi, MultiChild, SingleChild},
+  widget::{QueryOrder, Render, Widget, WidgetBuilder, WidgetId},
+};
+
+/// A value that can be subscribed its continuous change from the observable
+/// stream.
+pub struct Pipe<V> {
+  value: V,
+  observable: BoxOp<'static, V, Infallible>,
+}
+
+impl<V> Pipe<V> {
+  #[inline]
+  pub fn new(init: V, observable: BoxOp<'static, V, Infallible>) -> Self {
+    Self { value: init, observable }
+  }
+
+  /// map the inner observable stream to another observable that emit same type
+  /// value.
+  pub fn stream_map<R>(self, f: impl FnOnce(BoxOp<'static, V, Infallible>) -> R) -> Pipe<V>
+  where
+    R: BoxIt<BoxOp<'static, V, Infallible>>,
+  {
+    let Self { value, observable } = self;
+    let observable = f(observable).box_it();
+    Pipe { value, observable }
+  }
+
+  /// Creates a new `Pipe` which calls a closure on each element and
+  /// uses its return as the value.
+  pub fn map<R: 'static, F>(self, mut f: F) -> Pipe<R>
+  where
+    F: FnMut(V) -> R + 'static,
+    V: 'static,
+  {
+    let Self { value, observable } = self;
+    Pipe {
+      value: f(value),
+      observable: observable.map(f).box_it(),
+    }
+  }
+
+  /// Unzip the `Pipe` into its inner value and the changes stream of the
+  /// value.
+  #[inline]
+  pub fn unzip(self) -> (V, BoxOp<'static, V, Infallible>) { (self.value, self.observable) }
+
+  #[inline]
+  pub fn value(&self) -> &V { &self.value }
+
+  #[inline]
+  pub fn value_mut(&mut self) -> &mut V { &mut self.value }
+}
+
+impl<W: Into<Widget>> WidgetBuilder for Pipe<W> {
+  #[inline]
+  fn build(self, ctx: &crate::context::BuildCtx) -> WidgetId {
+    let (v, modifies) = self.unzip();
+    let id = v.into().build(ctx);
+    let id_share = Rc::new(Cell::new(id));
+    let handle = ctx.handle();
+    let h = modifies
+      .subscribe(move |v| {
+        handle.with_ctx(|ctx| {
+          let id = id_share.get();
+          let ctx = ctx.force_as_mut();
+          let new_id = v.into().build(ctx);
+
+          update_key_status_single(id, new_id, ctx);
+
+          ctx.insert_after(id, new_id);
+          ctx.dispose_subtree(id);
+          ctx.on_subtree_mounted(new_id);
+          id_share.set(new_id);
+          ctx.mark_dirty(new_id)
+        });
+      })
+      .unsubscribe_when_dropped();
+
+    let h = AnonymousData::new(Box::new(h));
+    attach_to_id(id, ctx.force_as_mut(), |d| Box::new(DataWidget::new(d, h)));
+
+    id
+  }
+}
+
+impl<R: Into<Box<dyn Render>>> Pipe<R> {
+  pub(crate) fn build_as_render_parent(self, ctx: &mut BuildCtx) -> WidgetId {
+    let (v, modifies) = self.unzip();
+    let id = ctx.alloc_widget(v.into());
+    let id_share = Rc::new(Cell::new(id));
+    let handle = ctx.handle();
+    let h = modifies
+      .subscribe(move |v| {
+        handle.with_ctx(|ctx| {
+          let id = id_share.get();
+          let ctx = ctx.force_as_mut();
+          let new_id = ctx.alloc_widget(v.into());
+
+          update_key_status_single(id, new_id, ctx);
+          let mut cursor = id.first_child(&ctx.tree.arena);
+          while let Some(c) = cursor {
+            cursor = c.next_sibling(&ctx.tree.arena);
+            ctx.append_child(new_id, c);
+          }
+
+          ctx.insert_after(id, new_id);
+          ctx.dispose_subtree(id);
+
+          ctx.on_widget_mounted(new_id);
+          id_share.set(new_id);
+          ctx.mark_dirty(new_id);
+        });
+      })
+      .unsubscribe_when_dropped();
+
+    let h = AnonymousData::new(Box::new(h));
+    attach_to_id(id, ctx.force_as_mut(), |d| Box::new(DataWidget::new(d, h)));
+
+    id
+  }
+}
+
+impl<W> Pipe<Multi<W>> {
+  pub(crate) fn build_multi(self, vec: &mut Vec<WidgetId>, ctx: &mut BuildCtx)
+  where
+    W: IntoIterator,
+    W::Item: Into<Widget>,
+  {
+    fn build_multi(
+      v: Multi<impl IntoIterator<Item = impl Into<Widget>>>,
+      ctx: &mut BuildCtx,
+      s_guard: impl Clone + 'static,
+    ) -> Box<[WidgetId]> {
+      let mut ids = v
+        .into_inner()
+        .into_iter()
+        .map(|w| w.into().build(ctx))
+        .collect::<Vec<_>>();
+
+      if ids.is_empty() {
+        ids.push(Void.build(ctx));
+      }
+      for id in &ids {
+        attach_to_id(*id, ctx, |d| {
+          let h = AnonymousData::new(Box::new(s_guard.clone()));
+          Box::new(DataWidget::new(d, h))
+        });
+      }
+
+      ids.into_boxed_slice()
+    }
+
+    let s_guard = Rc::new(RefCell::new(None));
+    let (m, modifies) = self.unzip();
+
+    let ids = build_multi(m, ctx, s_guard.clone());
+    vec.extend(&*ids);
+
+    let ids_share = Rc::new(RefCell::new(ids));
+
+    let handle = ctx.handle();
+
+    let s_guard2 = s_guard.clone();
+    let guard = modifies
+      .subscribe(move |m| {
+        handle.with_ctx(|ctx| {
+          let ctx = ctx.force_as_mut();
+          let old = ids_share.borrow();
+          let new = build_multi(m, ctx, s_guard.clone());
+
+          update_key_state_multi(&new, &old, ctx);
+
+          new.iter().for_each(|w| ctx.insert_after(old[0], *w));
+          old.iter().for_each(|id| ctx.dispose_subtree(*id));
+          new.iter().for_each(|w| {
+            ctx.on_subtree_mounted(*w);
+            ctx.mark_dirty(*w)
+          });
+        });
+      })
+      .unsubscribe_when_dropped();
+
+    s_guard2.borrow_mut().replace(guard);
+  }
+}
+
+fn update_key_status_single(new: WidgetId, old: WidgetId, ctx: &BuildCtx) {
+  inspect_key(old, ctx, |old_key| {
+    inspect_key(new, ctx, |new_key| {
+      if old_key.key() == new_key.key() {
+        new_key.record_before_value(old_key);
+      } else {
+        old_key.disposed();
+        new_key.mounted();
+      }
+    })
+  })
+}
+
+fn update_key_state_multi(old: &[WidgetId], new: &[WidgetId], ctx: &BuildCtx) {
+  let mut old_key_list = ahash::HashMap::default();
+
+  for o in old {
+    inspect_key(*o, ctx, |old_key: &dyn AnyKey| {
+      let key = old_key.key();
+      old_key_list.insert(key, *o);
+    });
+  }
+
+  for n in new {
+    inspect_key(*n, ctx, |new_key: &dyn AnyKey| {
+      let key = &new_key.key();
+      if let Some(o) = old_key_list.get(key) {
+        inspect_key(*o, ctx, |old_key_widget: &dyn AnyKey| {
+          new_key.record_before_value(old_key_widget)
+        });
+        old_key_list.remove(key);
+      } else {
+        new_key.mounted();
+      }
+    });
+  }
+
+  old_key_list
+    .values()
+    .for_each(|o| inspect_key(*o, ctx, |old_key| old_key.disposed()));
+}
+
+fn inspect_key(id: WidgetId, ctx: &BuildCtx, mut cb: impl FnMut(&dyn AnyKey)) {
+  #[allow(clippy::borrowed_box)]
+  ctx
+    .assert_get(id)
+    .query_on_first_type::<Box<dyn AnyKey>, _>(QueryOrder::OutsideFirst, |key_widget| {
+      cb(&**key_widget)
+    });
+}
+
+impl<W: SingleChild> SingleChild for Pipe<W> {}
+impl<W: MultiChild> MultiChild for Pipe<W> {}
diff --git a/core/src/state.rs b/core/src/state.rs
index c95772618..c7649a412 100644
--- a/core/src/state.rs
+++ b/core/src/state.rs
@@ -1,24 +1,60 @@
 mod readonly;
 mod stateful;
-use std::rc::Rc;
+use std::{convert::Infallible, mem::MaybeUninit, rc::Rc};
 
 pub use readonly::*;
-use rxrust::prelude::ObservableItem;
+use rxrust::{ops::box_it::BoxOp, prelude::ObservableItem};
 pub use stateful::*;
 
 use crate::{
   context::BuildCtx,
   dynamic_widget::DynWidget,
-  widget::{Compose, WidgetBuilder, WidgetId},
+  prelude::{BoxMultiParent, BoxedSingleParent, MultiChild, SingleChild},
+  widget::{Compose, Render, RenderFul, WidgetBuilder, WidgetId},
 };
 
 /// Enum to store both stateless and stateful object.
-#[derive(Clone)]
 pub enum State<W> {
   Stateless(W),
   Stateful(Stateful<W>),
 }
 
+pub enum StateRef<'a, W> {
+  Stateful(StatefulRef<'a, W>),
+  Stateless(&'a mut W),
+}
+
+impl<W: SingleChild> SingleChild for State<W> {}
+impl<W: MultiChild> MultiChild for State<W> {}
+
+impl<W: SingleChild + Render + 'static> BoxedSingleParent for State<W> {
+  fn into_render(self: Box<Self>) -> Box<dyn Render> {
+    match *self {
+      State::Stateless(w) => Box::new(w),
+      State::Stateful(w) => Box::new(RenderFul(w)),
+    }
+  }
+}
+
+impl<W: MultiChild + Render + 'static> BoxMultiParent for State<W> {
+  fn into_render(self: Box<Self>) -> Box<dyn Render> {
+    match *self {
+      State::Stateless(w) => Box::new(w),
+      State::Stateful(w) => Box::new(RenderFul(w)),
+    }
+  }
+}
+
+impl<W: Render + 'static> From<State<W>> for Box<dyn Render> {
+  #[inline]
+  fn from(s: State<W>) -> Self {
+    match s {
+      State::Stateless(w) => w.into(),
+      State::Stateful(w) => w.into(),
+    }
+  }
+}
+
 impl<C: Compose> WidgetBuilder for State<C> {
   #[inline]
   fn build(self, ctx: &BuildCtx) -> WidgetId { Compose::compose(self).build(ctx) }
@@ -41,6 +77,44 @@ impl<W> State<W> {
       },
     }
   }
+
+  pub fn clone_stateful(&mut self) -> Stateful<W> { self.to_stateful().clone() }
+
+  pub fn modifies(&mut self) -> BoxOp<'static, (), Infallible> { self.to_stateful().modifies() }
+
+  pub fn clone(&mut self) -> State<W> {
+    let stateful = self.to_stateful().clone();
+    State::Stateful(stateful)
+  }
+
+  pub fn stateful_ref(&mut self) -> StatefulRef<W> { self.to_stateful().state_ref() }
+
+  pub fn to_stateful(&mut self) -> &mut Stateful<W> {
+    match self {
+      State::Stateless(w) => {
+        // convert the stateless value to stateful first.
+        let uninit: MaybeUninit<_> = MaybeUninit::zeroed();
+        let v = std::mem::replace(w, unsafe { uninit.assume_init() });
+        let stateful = State::Stateful(Stateful::new(v));
+        let uninit = std::mem::replace(self, stateful);
+        // the tmp value not init, so we need forget it.
+        std::mem::forget(uninit);
+
+        match self {
+          State::Stateful(w) => w,
+          _ => unreachable!(),
+        }
+      }
+      State::Stateful(w) => w,
+    }
+  }
+
+  pub fn state_ref(&mut self) -> StateRef<W> {
+    match self {
+      State::Stateless(w) => StateRef::Stateless(w),
+      State::Stateful(w) => StateRef::Stateful(w.state_ref()),
+    }
+  }
 }
 
 pub(crate) trait StateFrom<V> {
@@ -83,6 +157,15 @@ impl<W: 'static> StateFrom<Stateful<DynWidget<W>>> for State<W> {
   }
 }
 
+impl<'a, T> StateRef<'a, T> {
+  pub fn forget_modifies(&self) {
+    match self {
+      StateRef::Stateless(_) => {}
+      StateRef::Stateful(w) => w.forget_modifies(),
+    }
+  }
+}
+
 impl<W, T> From<T> for State<W>
 where
   Self: StateFrom<T>,
@@ -90,6 +173,26 @@ where
   fn from(value: T) -> Self { StateFrom::state_from(value) }
 }
 
+impl<'a, W> std::ops::Deref for StateRef<'a, W> {
+  type Target = W;
+
+  fn deref(&self) -> &Self::Target {
+    match self {
+      StateRef::Stateful(s) => s.deref(),
+      StateRef::Stateless(r) => r,
+    }
+  }
+}
+
+impl<'a, W> std::ops::DerefMut for StateRef<'a, W> {
+  fn deref_mut(&mut self) -> &mut Self::Target {
+    match self {
+      StateRef::Stateful(s) => s.deref_mut(),
+      StateRef::Stateless(r) => r,
+    }
+  }
+}
+
 #[cfg(test)]
 mod tests {
   use super::*;
diff --git a/core/src/state/readonly.rs b/core/src/state/readonly.rs
index ebcb77048..218f334bb 100644
--- a/core/src/state/readonly.rs
+++ b/core/src/state/readonly.rs
@@ -1,4 +1,4 @@
-use super::{ModifyScope, StateRef, Stateful};
+use super::{ModifyScope, Stateful, StatefulRef};
 use rxrust::{observable, ops::box_it::BoxOp, prelude::BoxIt, subject::Subject};
 use std::{convert::Infallible, rc::Rc};
 
@@ -8,7 +8,7 @@ pub enum Readonly<W> {
 }
 
 pub enum ReadRef<'a, W> {
-  Stateful(StateRef<'a, W>),
+  Stateful(StatefulRef<'a, W>),
   Stateless(&'a Rc<W>),
 }
 
diff --git a/core/src/state/stateful.rs b/core/src/state/stateful.rs
index 3198d462e..7f13523a0 100644
--- a/core/src/state/stateful.rs
+++ b/core/src/state/stateful.rs
@@ -3,6 +3,7 @@ pub use guards::ModifyGuard;
 use rxrust::{ops::box_it::BoxOp, prelude::*};
 use std::{
   cell::{Cell, RefCell, UnsafeCell},
+  collections::LinkedList,
   convert::Infallible,
   ops::{Deref, DerefMut},
   rc::Rc,
@@ -17,6 +18,7 @@ pub struct Stateful<W> {
 /// notify downstream when widget state changed, the value mean if the change it
 /// as silent or not.
 #[derive(Default, Clone)]
+// todo: remove rc<RefCell>
 pub(crate) struct StateChangeNotifier(Rc<RefCell<Subject<'static, ModifyScope, Infallible>>>);
 
 /// A reference of `Stateful which tracked the state change across if user
@@ -35,7 +37,7 @@ pub(crate) struct StateChangeNotifier(Rc<RefCell<Subject<'static, ModifyScope, I
 /// But in logic, first borrow needn't live as long as the statement. See
 /// relative rust issue https://github.com/rust-lang/rust/issues/37612
 
-pub struct StateRef<'a, W> {
+pub struct StatefulRef<'a, W> {
   /// - None, Not used the value
   /// - Some(false), borrow used the value
   /// - Some(true), mutable borrow used the value
@@ -107,6 +109,11 @@ struct InnerStateful<W> {
   borrowed_at: Cell<Option<&'static std::panic::Location<'static>>>,
   guard_cnt: Cell<usize>,
   data: UnsafeCell<W>,
+  /// A link list to store anonymous data, so keep it live as long as the
+  /// `Stateful` data. When this `Stateful` subscribe to a stream, append the
+  /// unsubscribe handle to this list let you can unsubscribe when this
+  /// `Stateful` drop.
+  slot_link: UnsafeCell<LinkedList<Box<dyn Any>>>,
 }
 
 impl<W> Clone for Stateful<W> {
@@ -129,6 +136,7 @@ impl<W> Stateful<W> {
         #[cfg(debug_assertions)]
         borrowed_at: Cell::new(None),
         guard_cnt: Cell::new(0),
+        slot_link: <_>::default(),
       }),
       modify_notifier: <_>::default(),
     }
@@ -141,7 +149,7 @@ impl<W> Stateful<W> {
   /// Return a reference of `Stateful`, modify across this reference will notify
   /// data and framework.
   #[inline]
-  pub fn state_ref(&self) -> StateRef<W> { StateRef::new(self, ModifyScope::BOTH) }
+  pub fn state_ref(&self) -> StatefulRef<W> { StatefulRef::new(self, ModifyScope::BOTH) }
 
   /// Return a reference of `Stateful`, modify across this reference will notify
   /// data only, the relayout or paint depends on this object will not be skip.
@@ -149,7 +157,7 @@ impl<W> Stateful<W> {
   /// If you not very clear how `silent_ref` work, use [`Stateful::state_ref`]!
   /// instead of.
   #[inline]
-  pub fn silent_ref(&self) -> StateRef<W> { StateRef::new(self, ModifyScope::DATA) }
+  pub fn silent_ref(&self) -> StatefulRef<W> { StatefulRef::new(self, ModifyScope::DATA) }
 
   /// Return a reference of `Stateful`, modify across this reference will notify
   /// framework only. That means this modify only effect framework but not
@@ -158,7 +166,9 @@ impl<W> Stateful<W> {
   /// If you not very clear how `shallow_ref` work, use [`Stateful::state_ref`]!
   /// instead of.
   #[inline]
-  pub(crate) fn shallow_ref(&self) -> StateRef<W> { StateRef::new(self, ModifyScope::FRAMEWORK) }
+  pub(crate) fn shallow_ref(&self) -> StatefulRef<W> {
+    StatefulRef::new(self, ModifyScope::FRAMEWORK)
+  }
 
   pub fn raw_modifies(&self) -> Subject<'static, ModifyScope, Infallible> {
     self.modify_notifier.raw_modifies()
@@ -179,6 +189,11 @@ impl<W> Stateful<W> {
   #[inline]
   pub fn clone_stateful(&self) -> Stateful<W> { self.clone() }
 
+  pub fn own_data(&self, data: impl Any) {
+    let ptr = self.state_ref().value.inner.slot_link.get();
+    unsafe { &mut *ptr }.push_back(Box::new(data));
+  }
+
   pub(crate) fn try_into_inner(self) -> Result<W, Self> {
     if Rc::strong_count(&self.inner) == 1 {
       let inner = Rc::try_unwrap(self.inner).unwrap_or_else(|_| unreachable!());
@@ -211,7 +226,7 @@ macro_rules! already_borrow_panic {
   };
 }
 
-impl<'a, W> Deref for StateRef<'a, W> {
+impl<'a, W> Deref for StatefulRef<'a, W> {
   type Target = W;
 
   #[track_caller]
@@ -239,7 +254,7 @@ impl<'a, W> Deref for StateRef<'a, W> {
   }
 }
 
-impl<'a, W> DerefMut for StateRef<'a, W> {
+impl<'a, W> DerefMut for StatefulRef<'a, W> {
   #[track_caller]
   fn deref_mut(&mut self) -> &mut Self::Target {
     let b = &self.value.inner.borrow_flag;
@@ -277,11 +292,11 @@ impl<'a, W> DerefMut for StateRef<'a, W> {
   }
 }
 
-impl<'a, W> StateRef<'a, W> {
+impl<'a, W> StatefulRef<'a, W> {
   /// Fork a silent reference
-  pub fn silent(&self) -> StateRef<'a, W> {
+  pub fn silent(&self) -> StatefulRef<'a, W> {
     self.release_borrow();
-    StateRef::new(self.value.inner_ref(), ModifyScope::DATA)
+    StatefulRef::new(self.value.inner_ref(), ModifyScope::DATA)
   }
 
   /// Forget all modifies record in this reference. So the downstream will no
@@ -341,10 +356,13 @@ impl<'a, W> StateRef<'a, W> {
 impl<W: SingleChild> SingleChild for Stateful<W> {}
 impl<W: MultiChild> MultiChild for Stateful<W> {}
 
-impl_proxy_query!(paths [modify_notifier, state_ref()], Stateful<R>, <R>, where R: Query + 'static );
+impl_proxy_query!(
+  paths [modify_notifier, state_ref()],
+  Stateful<R>, <R>, where R: Query + 'static
+);
 impl_query_self_only!(StateChangeNotifier);
 
-impl<'a, W> Drop for StateRef<'a, W> {
+impl<'a, W> Drop for StatefulRef<'a, W> {
   fn drop(&mut self) { self.release_borrow(); }
 }
 
diff --git a/core/src/test_helper.rs b/core/src/test_helper.rs
index 238ff4997..715f7a45f 100644
--- a/core/src/test_helper.rs
+++ b/core/src/test_helper.rs
@@ -19,19 +19,19 @@ pub struct TestWindow(pub Rc<Window>);
 
 impl TestWindow {
   /// Create a 1024x1024 window for test
-  pub fn new(root: impl Into<Widget>) -> Self {
-    let _ = NEW_TIMER_FN.set(Timer::new_timer_future);
-    let wnd = Window::new(root.into(), Box::new(TestShellWindow::new(None)));
-    AppCtx::windows().borrow_mut().insert(wnd.id(), wnd.clone());
-    Self(wnd)
-  }
+  pub fn new(root: impl Into<Widget>) -> Self { Self::new_wnd(root, None) }
 
   pub fn new_with_size(root: impl Into<Widget>, size: Size) -> Self {
+    Self::new_wnd(root, Some(size))
+  }
+
+  fn new_wnd(root: impl Into<Widget>, size: Option<Size>) -> Self {
     let _ = NEW_TIMER_FN.set(Timer::new_timer_future);
-    Self(Window::new(
-      root.into(),
-      Box::new(TestShellWindow::new(Some(size))),
-    ))
+    let wnd = Window::new(root.into(), Box::new(TestShellWindow::new(size)));
+    let id = wnd.id();
+    AppCtx::windows().borrow_mut().insert(wnd.id(), wnd.clone());
+    AppCtx::get_window(id).unwrap().emit_events();
+    Self(wnd)
   }
 
   /// Ues a index path to access widget tree and return the layout info,
diff --git a/core/src/widget.rs b/core/src/widget.rs
index 676eb32fa..23d2521a7 100644
--- a/core/src/widget.rs
+++ b/core/src/widget.rs
@@ -51,10 +51,6 @@ pub trait Render: Query {
   fn get_transform(&self) -> Option<Transform> { None }
 }
 
-pub(crate) fn hit_test_impl(ctx: &HitTestCtx, pos: Point) -> bool {
-  ctx.box_rect().map_or(false, |rect| rect.contains(pos))
-}
-
 /// The common type of all widget can convert to.
 pub struct Widget(Box<dyn FnOnce(&BuildCtx) -> WidgetId>);
 
@@ -105,7 +101,7 @@ impl<'a> dyn Render + 'a {
   pub fn query_all_type<T: Any>(&self, mut callback: impl FnMut(&T) -> bool, order: QueryOrder) {
     self.query_all(
       TypeId::of::<T>(),
-      &mut |a: &dyn Any| a.downcast_ref().map_or(true, &mut callback),
+      &mut |a| a.downcast_ref().map_or(true, &mut callback),
       order,
     )
   }
@@ -148,29 +144,17 @@ pub struct FnWidget<F>(F);
 pub(crate) trait WidgetBuilder {
   fn build(self, ctx: &BuildCtx) -> WidgetId;
 }
-pub(crate) trait WidgetOrId {
-  fn build_id(self, ctx: &BuildCtx) -> WidgetId;
-}
-
-impl<T: WidgetBuilder> WidgetOrId for T {
-  #[inline]
-  fn build_id(self, ctx: &BuildCtx) -> WidgetId { self.build(ctx) }
-}
-
-impl WidgetOrId for WidgetId {
-  #[inline]
-  fn build_id(self, _: &BuildCtx) -> WidgetId { self }
-}
 
-impl WidgetOrId for Widget {
+impl From<WidgetId> for Widget {
   #[inline]
-  fn build_id(self, ctx: &BuildCtx) -> WidgetId { self.build(ctx) }
+  fn from(id: WidgetId) -> Self { Widget(Box::new(move |_| id)) }
 }
 
 impl<F> FnWidget<F> {
+  #[inline]
   pub fn new<R>(f: F) -> Self
   where
-    F: FnOnce(&BuildCtx) -> R,
+    F: FnOnce(&BuildCtx) -> R + Into<FnWidget<F>>,
   {
     FnWidget(f)
   }
@@ -182,9 +166,9 @@ impl<F> FnWidget<F> {
 impl<F, R> WidgetBuilder for FnWidget<F>
 where
   F: FnOnce(&BuildCtx) -> R + 'static,
-  R: WidgetOrId,
+  R: Into<Widget>,
 {
-  fn build(self, ctx: &BuildCtx) -> WidgetId { (self.0)(ctx).build_id(ctx) }
+  fn build(self, ctx: &BuildCtx) -> WidgetId { (self.0)(ctx).into().build(ctx) }
 }
 
 #[macro_export]
@@ -327,6 +311,8 @@ pub(crate) struct RenderFul<R>(pub(crate) Stateful<R>);
 
 impl_proxy_query!(paths [0], RenderFul<R>, <R>, where R: Render + 'static);
 impl_proxy_render!(proxy 0.state_ref(), RenderFul<R>, <R>, where R: Render + 'static);
+impl_proxy_query!(paths[0.state_ref()], RenderFul<Box<dyn Render>>);
+impl_proxy_render!(proxy 0.state_ref(), RenderFul<Box<dyn Render>>);
 
 impl<R: Render + 'static> Compose for R {
   fn compose(this: State<Self>) -> Widget {
@@ -346,11 +332,30 @@ impl<W: WidgetBuilder + 'static> From<W> for Widget {
   fn from(value: W) -> Self { Self(Box::new(|ctx| value.build(ctx))) }
 }
 
+impl<F, R> From<F> for FnWidget<F>
+where
+  F: FnOnce(&BuildCtx) -> R,
+  R: Into<Widget>,
+{
+  #[inline]
+  fn from(value: F) -> Self { Self(value) }
+}
+
 impl Widget {
   #[inline]
   pub fn build(self, ctx: &BuildCtx) -> WidgetId { (self.0)(ctx) }
 }
 
+impl<R: Render + 'static> From<R> for Box<dyn Render> {
+  #[inline]
+  fn from(value: R) -> Self { Box::new(value) }
+}
+
+impl<R: Render + 'static> From<Stateful<R>> for Box<dyn Render> {
+  #[inline]
+  fn from(value: Stateful<R>) -> Self { Box::new(RenderFul(value)) }
+}
+
 impl_proxy_query!(paths [deref()], ShareResource<T>, <T>, where  T: Render + 'static);
 impl_proxy_render!(proxy deref(), ShareResource<T>, <T>, where  T: Render + 'static);
 impl_proxy_query!(paths [deref()], Rc<W>, <W>, where W: Query + 'static);
@@ -371,3 +376,7 @@ pub fn then<W>(b: bool, f: impl FnOnce() -> W) -> Option<W> { b.then(f) }
 /// calls the closure on `value` and returns
 #[inline]
 pub fn map<T, W>(value: T, f: impl FnOnce(T) -> W) -> W { f(value) }
+
+pub(crate) fn hit_test_impl(ctx: &HitTestCtx, pos: Point) -> bool {
+  ctx.box_rect().map_or(false, |rect| rect.contains(pos))
+}
diff --git a/core/src/widget_children.rs b/core/src/widget_children.rs
index dad605087..3d4436084 100644
--- a/core/src/widget_children.rs
+++ b/core/src/widget_children.rs
@@ -38,19 +38,19 @@ pub use multi_child_impl::*;
 pub use single_child_impl::*;
 pub mod child_convert;
 pub use child_convert::{ChildFrom, FromAnother};
-/// Trait to tell Ribir a widget can have one child.
+/// Trait to tell Ribir a object can have one child.
 pub trait SingleChild {}
 
-/// A render widget that has one child.
-pub trait RenderSingleChild: Render + SingleChild {
+/// A boxed render widget that has one child.
+pub trait BoxedSingleParent: SingleChild {
   fn into_render(self: Box<Self>) -> Box<dyn Render>;
 }
 
-/// Trait to tell Ribir a widget that has multi children.
+/// Trait to tell Ribir a object that has multi children.
 pub trait MultiChild {}
 
-/// A render widget that has multi children.
-pub trait RenderMultiChild: Render + MultiChild {
+/// A boxed render widget that has multi children.
+pub trait BoxMultiParent: MultiChild {
   fn into_render(self: Box<Self>) -> Box<dyn Render>;
 }
 
@@ -63,16 +63,20 @@ pub trait ComposeChild: Sized {
 
 /// A alias of `WidgetPair<W, Widget>`, means `Widget` is the
 /// child of the generic type.
-pub type WidgetOf<W> = WidgetPair<W, Widget>;
+pub type WidgetOf<W> = SinglePair<W, Widget>;
 
-impl<T: Render + SingleChild + 'static> RenderSingleChild for T {
-  fn into_render(self: Box<Self>) -> Box<dyn Render> { Box::new(*self) }
-}
+impl SingleChild for Box<dyn BoxedSingleParent> {}
+impl MultiChild for Box<dyn BoxMultiParent> {}
 
-impl<T: Render + MultiChild + 'static> RenderMultiChild for T {
-  fn into_render(self: Box<Self>) -> Box<dyn Render> { Box::new(*self) }
+impl From<Box<dyn BoxMultiParent>> for Box<dyn Render> {
+  #[inline]
+  fn from(v: Box<dyn BoxMultiParent>) -> Self { v.into_render() }
 }
 
+impl From<Box<dyn BoxedSingleParent>> for Box<dyn Render> {
+  #[inline]
+  fn from(value: Box<dyn BoxedSingleParent>) -> Self { value.into_render() }
+}
 #[cfg(test)]
 mod tests {
   use super::*;
@@ -124,7 +128,7 @@ mod tests {
     struct Child;
 
     impl ComposeChild for Parent {
-      type Child = Option<WidgetPair<Child, Widget>>;
+      type Child = Option<SinglePair<Child, Widget>>;
 
       fn compose_child(_: State<Self>, _: Self::Child) -> Widget {
         unreachable!("Only for syntax support check");
@@ -272,9 +276,9 @@ mod tests {
   const COMPOSE_DYNS_CHILD_SIZE: Size = Size::new(100., 200.);
   fn compose_dyns_child() -> Widget {
     #[derive(Declare)]
-    struct X;
+    struct AcceptStateChild;
 
-    impl ComposeChild for X {
+    impl ComposeChild for AcceptStateChild {
       type Child = State<MockBox>;
       fn compose_child(_: State<Self>, child: Self::Child) -> Widget { child.into() }
     }
@@ -283,7 +287,7 @@ mod tests {
 
     widget! {
       states { trigger: trigger }
-      X {
+      AcceptStateChild {
         DynWidget {
           dyns: if *trigger {
             MockBox { size: COMPOSE_DYNS_CHILD_SIZE }
diff --git a/core/src/widget_children/child_convert.rs b/core/src/widget_children/child_convert.rs
index c5a2cc174..d2101b1a4 100644
--- a/core/src/widget_children/child_convert.rs
+++ b/core/src/widget_children/child_convert.rs
@@ -1,6 +1,6 @@
 use super::{
-  decorate_tml_impl::IntoDecorateTml, ComposeChild, ComposePair, DecorateTml, Multi, TmlFlag,
-  WidgetPair,
+  decorate_tml_impl::IntoDecorateTml, ComposeChild, ComposePair, DecorateTml, Multi, SinglePair,
+  TmlFlag,
 };
 use crate::{
   dynamic_widget::{DynRender, DynWidget},
@@ -65,30 +65,30 @@ where
 }
 
 // WidgetPair<W, C> --> WidgetPair<W2, C2>
-impl<W, W2, C, C2, M1, M2> FromAnother<WidgetPair<W2, C2>, [(M1, M2); 0]> for WidgetPair<W, C>
+impl<W, W2, C, C2, M1, M2> FromAnother<SinglePair<W2, C2>, [(M1, M2); 0]> for SinglePair<W, C>
 where
   W: FromAnother<W2, M1>,
   C: ChildFrom<C2, M2>,
 {
   #[inline]
-  fn from_another(value: WidgetPair<W2, C2>) -> Self {
-    let WidgetPair { widget, child } = value;
-    WidgetPair {
+  fn from_another(value: SinglePair<W2, C2>) -> Self {
+    let SinglePair { widget, child } = value;
+    SinglePair {
       widget: W::from_another(widget),
       child: C::child_from(child),
     }
   }
 }
 
-impl<W, W2, C, C2, M1, M2> FromAnother<WidgetPair<W2, C2>, [(M1, M2); 1]> for WidgetPair<W, C>
+impl<W, W2, C, C2, M1, M2> FromAnother<SinglePair<W2, C2>, [(M1, M2); 1]> for SinglePair<W, C>
 where
   W: ChildFrom<W2, M1>,
   C: FromAnother<C2, M2>,
 {
   #[inline]
-  fn from_another(value: WidgetPair<W2, C2>) -> Self {
-    let WidgetPair { widget, child } = value;
-    WidgetPair {
+  fn from_another(value: SinglePair<W2, C2>) -> Self {
+    let SinglePair { widget, child } = value;
+    SinglePair {
       widget: W::child_from(widget),
       child: C::from_another(child),
     }
diff --git a/core/src/widget_children/compose_child_impl.rs b/core/src/widget_children/compose_child_impl.rs
index edfbdb80d..ae11b8b77 100644
--- a/core/src/widget_children/compose_child_impl.rs
+++ b/core/src/widget_children/compose_child_impl.rs
@@ -6,7 +6,7 @@ use crate::{
   widget::{Widget, WidgetBuilder, WidgetId},
 };
 
-use super::{child_convert::FillVec, ComposeChild, WidgetPair};
+use super::{child_convert::FillVec, ComposeChild, SinglePair};
 
 /// Trait specify what child a compose child widget can have, and the target
 /// type after widget compose its child.
@@ -78,15 +78,15 @@ where
   }
 }
 
-impl<M, W, C1, C2> ComposeWithChild<C2, M> for WidgetPair<W, C1>
+impl<M, W, C1, C2> ComposeWithChild<C2, M> for SinglePair<W, C1>
 where
   C1: ComposeWithChild<C2, M>,
 {
-  type Target = WidgetPair<W, C1::Target>;
+  type Target = SinglePair<W, C1::Target>;
 
   fn with_child(self, c: C2, ctx: &BuildCtx) -> Self::Target {
-    let WidgetPair { widget, child } = self;
-    WidgetPair {
+    let SinglePair { widget, child } = self;
+    SinglePair {
       widget,
       child: child.with_child(c, ctx),
     }
@@ -182,9 +182,9 @@ pub(crate) mod decorate_tml_impl {
 
   impl<T: TmlFlag, C> DecorateTmlMarker<()> for DecorateTml<T, C> {}
 
-  impl<T: TmlFlag, C> DecorateTmlMarker<[(); 0]> for WidgetPair<T, C> {}
+  impl<T: TmlFlag, C> DecorateTmlMarker<[(); 0]> for SinglePair<T, C> {}
 
-  impl<M, T, C: DecorateTmlMarker<M>> DecorateTmlMarker<[M; 1]> for WidgetPair<T, C> {}
+  impl<M, T, C: DecorateTmlMarker<M>> DecorateTmlMarker<[M; 1]> for SinglePair<T, C> {}
 
   impl<M, T, C: DecorateTmlMarker<M>> DecorateTmlMarker<M> for ComposePair<T, C> {}
 
@@ -193,7 +193,7 @@ pub(crate) mod decorate_tml_impl {
     fn into_decorate_tml(self) -> DecorateTml<Self::Flag, C>;
   }
 
-  impl<W, C, M, C2> IntoDecorateTml<C, [M; 0]> for WidgetPair<W, C2>
+  impl<W, C, M, C2> IntoDecorateTml<C, [M; 0]> for SinglePair<W, C2>
   where
     W: TmlFlag,
     C: ChildFrom<C2, M>,
@@ -201,26 +201,26 @@ pub(crate) mod decorate_tml_impl {
     type Flag = W;
 
     fn into_decorate_tml(self) -> DecorateTml<Self::Flag, C> {
-      let WidgetPair { widget: tml_flag, child } = self;
+      let SinglePair { widget: tml_flag, child } = self;
       let decorator = Box::new(|w| w);
       let child = C::child_from(child);
       DecorateTml { decorator, tml_flag, child }
     }
   }
 
-  impl<W, C, C2, M> IntoDecorateTml<C, [M; 1]> for WidgetPair<W, C2>
+  impl<W, C, C2, M> IntoDecorateTml<C, [M; 1]> for SinglePair<W, C2>
   where
     W: 'static,
     C2: IntoDecorateTml<C, M>,
-    WidgetPair<W, Widget>: WidgetBuilder,
+    SinglePair<W, Widget>: WidgetBuilder,
   {
     type Flag = C2::Flag;
 
     fn into_decorate_tml(self) -> DecorateTml<Self::Flag, C> {
-      let WidgetPair { widget, child } = self;
+      let SinglePair { widget, child } = self;
       let DecorateTml { decorator, tml_flag, child } = ChildFrom::child_from(child);
       DecorateTml {
-        decorator: Box::new(move |w| WidgetPair { widget, child: decorator(w) }.into()),
+        decorator: Box::new(move |w| SinglePair { widget, child: decorator(w) }.into()),
         tml_flag,
         child,
       }
diff --git a/core/src/widget_children/multi_child_impl.rs b/core/src/widget_children/multi_child_impl.rs
index 7d1549b6d..d839f0f6a 100644
--- a/core/src/widget_children/multi_child_impl.rs
+++ b/core/src/widget_children/multi_child_impl.rs
@@ -1,5 +1,5 @@
 use super::*;
-use crate::widget::{RenderFul, WidgetBuilder};
+use crate::widget::WidgetBuilder;
 
 /// Trait specify what child a multi child widget can have, and the target type
 /// after widget compose its child.
@@ -8,8 +8,8 @@ pub trait MultiWithChild<C> {
   fn with_child(self, child: C, ctx: &BuildCtx) -> Self::Target;
 }
 
-pub struct MultiChildWidget {
-  pub widget: Box<dyn Render>,
+pub struct MultiPair {
+  pub parent: WidgetId,
   pub children: Vec<WidgetId>,
 }
 
@@ -25,10 +25,6 @@ impl<W: IntoIterator> Multi<W> {
   pub fn into_inner(self) -> W { self.0 }
 }
 
-trait IntoMultiParent {
-  fn into_multi_parent(self) -> Box<dyn Render>;
-}
-
 // Same with ChildConvert::FillVec, but only for MultiChild,
 // There are some duplicate implementations, but better compile error for
 // users
@@ -71,34 +67,46 @@ where
   }
 }
 
-impl<R: MultiChild + Render + 'static> IntoMultiParent for R {
+impl<D> FillVec for Pipe<Multi<D>>
+where
+  D: IntoIterator + 'static,
+  D::Item: Into<Widget>,
+{
+  fn fill_vec(self, vec: &mut Vec<WidgetId>, ctx: &BuildCtx) {
+    self.build_multi(vec, ctx.force_as_mut());
+  }
+}
+
+trait MultiParent {
+  fn build_as_parent(self, ctx: &mut BuildCtx) -> WidgetId;
+}
+
+impl<R: Into<Box<dyn Render>> + MultiChild> MultiParent for R {
   #[inline]
-  fn into_multi_parent(self) -> Box<dyn Render> { Box::new(self) }
+  fn build_as_parent(self, ctx: &mut BuildCtx) -> WidgetId { ctx.alloc_widget(self.into()) }
 }
 
-impl<R: MultiChild + Render + 'static> IntoMultiParent for Stateful<R> {
+impl<W: Into<Box<dyn Render>> + MultiChild> MultiParent for Pipe<W> {
   #[inline]
-  fn into_multi_parent(self) -> Box<dyn Render> { Box::new(RenderFul(self)) }
+  fn build_as_parent(self, ctx: &mut BuildCtx) -> WidgetId { self.build_as_render_parent(ctx) }
 }
 
 impl<R, C> MultiWithChild<C> for R
 where
-  R: IntoMultiParent,
+  R: MultiParent,
   C: FillVec,
 {
-  type Target = MultiChildWidget;
+  type Target = MultiPair;
 
   fn with_child(self, child: C, ctx: &BuildCtx) -> Self::Target {
+    let parent = self.build_as_parent(ctx.force_as_mut());
     let mut children = vec![];
     child.fill_vec(&mut children, ctx);
-    MultiChildWidget {
-      widget: self.into_multi_parent(),
-      children,
-    }
+    MultiPair { parent, children }
   }
 }
 
-impl<C> MultiWithChild<C> for MultiChildWidget
+impl<C> MultiWithChild<C> for MultiPair
 where
   C: FillVec,
 {
@@ -110,13 +118,13 @@ where
   }
 }
 
-impl WidgetBuilder for MultiChildWidget {
+impl WidgetBuilder for MultiPair {
   fn build(self, ctx: &BuildCtx) -> WidgetId {
-    let MultiChildWidget { widget, children } = self;
-    let p = ctx.alloc_widget(widget);
+    let MultiPair { parent, children } = self;
     children
       .into_iter()
-      .for_each(|child| ctx.append_child(p, child));
-    p
+      .for_each(|child| ctx.force_as_mut().append_child(parent, child));
+
+    parent
   }
 }
diff --git a/core/src/widget_children/single_child_impl.rs b/core/src/widget_children/single_child_impl.rs
index 6102cba56..2de1879b8 100644
--- a/core/src/widget_children/single_child_impl.rs
+++ b/core/src/widget_children/single_child_impl.rs
@@ -1,4 +1,4 @@
-use crate::widget::{RenderFul, WidgetBuilder};
+use crate::widget::WidgetBuilder;
 
 use super::*;
 
@@ -10,7 +10,7 @@ pub trait SingleWithChild<C> {
 }
 
 /// A node of widget with not compose its child.
-pub struct WidgetPair<W, C> {
+pub struct SinglePair<W, C> {
   pub widget: W,
   pub child: C,
 }
@@ -18,59 +18,59 @@ pub struct WidgetPair<W, C> {
 impl<W: SingleChild> SingleChild for Option<W> {}
 
 impl<W: SingleChild, C> SingleWithChild<C> for W {
-  type Target = WidgetPair<W, C>;
+  type Target = SinglePair<W, C>;
 
   #[inline]
-  fn with_child(self, child: C, _: &BuildCtx) -> Self::Target { WidgetPair { widget: self, child } }
+  fn with_child(self, child: C, _: &BuildCtx) -> Self::Target { SinglePair { widget: self, child } }
 }
 
-impl<W, C1: SingleChild, C2> SingleWithChild<C2> for WidgetPair<W, C1> {
-  type Target = WidgetPair<W, WidgetPair<C1, C2>>;
+impl<W, C1: SingleChild, C2> SingleWithChild<C2> for SinglePair<W, C1> {
+  type Target = SinglePair<W, SinglePair<C1, C2>>;
 
   fn with_child(self, c: C2, ctx: &BuildCtx) -> Self::Target {
-    let WidgetPair { widget, child } = self;
-    WidgetPair {
+    let SinglePair { widget, child } = self;
+    SinglePair {
       widget,
       child: child.with_child(c, ctx),
     }
   }
 }
 
-trait IntoSingleParent {
-  fn into_single_parent(self) -> Box<dyn Render>;
+trait SingleParent {
+  fn build_as_parent(self, ctx: &mut BuildCtx) -> WidgetId;
 }
 
 trait WidgetChild {
   fn child_build(self, ctx: &BuildCtx) -> WidgetId;
 }
 
-impl IntoSingleParent for Box<dyn RenderSingleChild> {
-  fn into_single_parent(self) -> Box<dyn Render> { self.into_render() }
+impl<W: Into<Box<dyn Render>> + SingleChild + 'static> SingleParent for W {
+  fn build_as_parent(self, ctx: &mut BuildCtx) -> WidgetId { ctx.alloc_widget(self.into()) }
 }
 
-impl<W: RenderSingleChild + 'static> IntoSingleParent for W {
-  fn into_single_parent(self) -> Box<dyn Render> { Box::new(self) }
-}
-
-impl<W: RenderSingleChild + 'static> IntoSingleParent for Stateful<W> {
+impl<W: Into<Box<dyn Render>> + SingleChild + 'static> SingleParent for Pipe<W> {
   #[inline]
-  fn into_single_parent(self) -> Box<dyn Render> { Box::new(RenderFul(self)) }
+  fn build_as_parent(self, ctx: &mut BuildCtx) -> WidgetId { self.build_as_render_parent(ctx) }
 }
 
-impl<D> IntoSingleParent for Stateful<DynWidget<D>>
+impl<D> SingleParent for Stateful<DynWidget<D>>
 where
-  D: RenderSingleChild + WidgetBuilder + 'static,
+  D: Render + SingleChild + WidgetBuilder + 'static,
 {
   #[inline]
-  fn into_single_parent(self) -> Box<dyn Render> { Box::new(DynRender::single(self)) }
+  fn build_as_parent(self, ctx: &mut BuildCtx) -> WidgetId {
+    Box::new(DynRender::single(self)).build(ctx)
+  }
 }
 
-impl<D> IntoSingleParent for Stateful<DynWidget<Option<D>>>
+impl<D> SingleParent for Stateful<DynWidget<Option<D>>>
 where
-  D: RenderSingleChild + WidgetBuilder + 'static,
+  D: Render + SingleChild + WidgetBuilder + 'static,
 {
   #[inline]
-  fn into_single_parent(self) -> Box<dyn Render> { Box::new(DynRender::option(self)) }
+  fn build_as_parent(self, ctx: &mut BuildCtx) -> WidgetId {
+    Box::new(DynRender::option(self)).build(ctx)
+  }
 }
 
 impl WidgetChild for Widget {
@@ -83,47 +83,46 @@ impl<W: WidgetBuilder> WidgetChild for W {
   fn child_build(self, ctx: &BuildCtx) -> WidgetId { self.build(ctx) }
 }
 
-impl<W, C> WidgetBuilder for WidgetPair<W, C>
+impl<W, C> WidgetBuilder for SinglePair<W, C>
 where
-  W: IntoSingleParent,
+  W: SingleParent,
   C: WidgetChild,
 {
   fn build(self, ctx: &BuildCtx) -> WidgetId {
     let Self { widget, child } = self;
-    let p = ctx.alloc_widget(widget.into_single_parent());
+    let p = widget.build_as_parent(ctx.force_as_mut());
     let child = child.child_build(ctx);
-    ctx.append_child(p, child);
+    ctx.force_as_mut().append_child(p, child);
     p
   }
 }
 
-impl<W, C> WidgetBuilder for WidgetPair<Option<W>, C>
+impl<W, C> WidgetBuilder for SinglePair<Option<W>, C>
 where
-  W: IntoSingleParent,
+  W: SingleParent,
   C: WidgetChild,
 {
   fn build(self, ctx: &BuildCtx) -> WidgetId {
     let Self { widget, child } = self;
     if let Some(widget) = widget {
-      WidgetPair { widget, child }.build(ctx)
+      SinglePair { widget, child }.build(ctx)
     } else {
       child.child_build(ctx)
     }
   }
 }
 
-impl<W, C> WidgetBuilder for WidgetPair<W, Option<C>>
+impl<W, C> WidgetBuilder for SinglePair<W, Option<C>>
 where
-  W: IntoSingleParent,
+  W: SingleParent,
   C: WidgetChild,
 {
   fn build(self, ctx: &BuildCtx) -> WidgetId {
     let Self { widget, child } = self;
     if let Some(child) = child {
-      WidgetPair { widget, child }.build(ctx)
+      SinglePair { widget, child }.build(ctx)
     } else {
-      let node = widget.into_single_parent();
-      ctx.alloc_widget(node)
+      widget.build_as_parent(ctx.force_as_mut())
     }
   }
 }
diff --git a/core/src/widget_tree.rs b/core/src/widget_tree.rs
index 2c39f5ae8..428d08f5d 100644
--- a/core/src/widget_tree.rs
+++ b/core/src/widget_tree.rs
@@ -161,12 +161,41 @@ impl WidgetTree {
       needs_layout
     })
   }
+
+  pub fn detach(&mut self, id: WidgetId) {
+    if self.root() == id {
+      let root = self.root();
+      let new_root = root
+        .next_sibling(&self.arena)
+        .or_else(|| root.prev_sibling(&self.arena))
+        .expect("Try to remove the root and there is no other widget can be the new root.");
+      self.root = Some(new_root);
+    }
+
+    id.0.detach(&mut self.arena);
+  }
+
+  pub(crate) fn remove_subtree(&mut self, id: WidgetId) {
+    assert_ne!(
+      id,
+      self.root(),
+      "You should detach the root widget before remove it."
+    );
+
+    id.descendants(&self.arena).for_each(|id| {
+      self.store.remove(id);
+    });
+    id.0.remove_subtree(&mut self.arena);
+  }
 }
 
 #[cfg(test)]
 mod tests {
   extern crate test;
-  use crate::test_helper::{MockBox, MockMulti, TestWindow};
+  use crate::{
+    test_helper::{MockBox, MockMulti, TestWindow},
+    widget::widget_id::empty_node,
+  };
 
   use super::*;
   use test::Bencher;
@@ -349,11 +378,13 @@ mod tests {
 
     let root = tree.root();
     tree.mark_dirty(root);
+    let new_root = empty_node(&mut tree.arena);
+    root.insert_after(new_root, &mut tree.arena);
+    tree.mark_dirty(new_root);
+    tree.detach(root);
+    tree.remove_subtree(root);
 
-    root.remove_subtree(&mut tree);
-
-    assert_eq!(tree.layout_list(), None);
-    assert!(!tree.is_dirty());
+    assert_eq!(tree.layout_list(), Some(vec![new_root]));
   }
 
   #[bench]
diff --git a/core/src/widget_tree/layout_info.rs b/core/src/widget_tree/layout_info.rs
index 3c614bf6e..b3f8f0be4 100644
--- a/core/src/widget_tree/layout_info.rs
+++ b/core/src/widget_tree/layout_info.rs
@@ -212,7 +212,7 @@ impl<'a> Layouter<'a> {
           self.id = ctx.id;
         }
 
-        let mut info = tree2.store.layout_info_or_default(id);
+        let info = tree2.store.layout_info_or_default(id);
         let size = clamp.clamp(size);
         info.clamp = clamp;
         info.size = Some(size);
diff --git a/core/src/widget_tree/widget_id.rs b/core/src/widget_tree/widget_id.rs
index 5250c5edf..44f74807c 100644
--- a/core/src/widget_tree/widget_id.rs
+++ b/core/src/widget_tree/widget_id.rs
@@ -108,6 +108,9 @@ impl WidgetId {
   pub(crate) fn next_sibling(self, tree: &TreeArena) -> Option<WidgetId> {
     self.node_feature(tree, |node| node.next_sibling())
   }
+  pub(crate) fn prev_sibling(self, tree: &TreeArena) -> Option<WidgetId> {
+    self.node_feature(tree, Node::previous_sibling)
+  }
 
   pub(crate) fn previous_sibling(self, tree: &TreeArena) -> Option<WidgetId> {
     self.node_feature(tree, |node| node.previous_sibling())
@@ -126,15 +129,6 @@ impl WidgetId {
     self.0.descendants(tree).map(WidgetId)
   }
 
-  pub(crate) fn detach(self, tree: &mut TreeArena) { self.0.detach(tree) }
-
-  pub(crate) fn remove_subtree(self, tree: &mut WidgetTree) {
-    self.descendants(&tree.arena).for_each(|id| {
-      tree.store.remove(id);
-    });
-    self.0.remove_subtree(&mut tree.arena);
-  }
-
   pub(crate) fn on_mounted_subtree(self, tree: &WidgetTree) {
     self
       .descendants(&tree.arena)
diff --git a/core/src/window.rs b/core/src/window.rs
index e3b531017..1888040d3 100644
--- a/core/src/window.rs
+++ b/core/src/window.rs
@@ -120,6 +120,8 @@ impl Window {
   /// Draw an image what current render tree represent.
   #[track_caller]
   pub fn draw_frame(&self) {
+    self.emit_events();
+
     if !self.need_draw() || self.size().is_empty() {
       return;
     }
@@ -136,11 +138,16 @@ impl Window {
       self.frame_pool.borrow_mut().run();
 
       if !self.widget_tree.borrow().is_dirty() {
-        break;
+        self.focus_mgr.borrow_mut().refresh_focus();
+        self.emit_events();
+
+        // focus refresh and event emit may cause widget tree dirty again.
+        if !self.widget_tree.borrow().is_dirty() {
+          break;
+        }
       }
     }
 
-    self.focus_mgr.borrow_mut().refresh_focus();
     self.widget_tree.borrow().draw();
 
     let surface = match AppCtx::app_theme() {
@@ -199,7 +206,6 @@ impl Window {
       .borrow_mut()
       .init(root, Rc::downgrade(&window));
 
-    window.emit_events();
     window
   }
 
@@ -288,7 +294,7 @@ impl Window {
             });
 
           if !delay_drop {
-            id.remove_subtree(&mut self.widget_tree.borrow_mut())
+            self.widget_tree.borrow_mut().remove_subtree(id);
           }
         }
         DelayEvent::Focus(id) => {
@@ -394,14 +400,17 @@ impl Window {
   where
     L: EventListener + 'static,
   {
-    id.assert_get(&self.widget_tree.borrow().arena)
-      .query_all_type(
-        |m: &L| {
-          m.dispatch(&mut e);
-          true
-        },
-        QueryOrder::InnerFirst,
-      );
+    // Safety: we only use tree to query the inner data of a node and dispatch a
+    // event by it, and never read or write the node. And in the callback, there is
+    // no way to mut access the inner data of node or destroy the node.
+    let tree = unsafe { &*(&*self.widget_tree.borrow() as *const WidgetTree) };
+    id.assert_get(&tree.arena).query_all_type(
+      |m: &L| {
+        m.dispatch(&mut e);
+        true
+      },
+      QueryOrder::InnerFirst,
+    );
   }
 
   fn bottom_down_emit<'a, L>(&self, e: &mut L::Event<'a>, bottom: WidgetId, up: Option<WidgetId>)
diff --git a/dev-helper/src/example_framework.rs b/dev-helper/src/example_framework.rs
index 9370b579d..8777294bd 100644
--- a/dev-helper/src/example_framework.rs
+++ b/dev-helper/src/example_framework.rs
@@ -45,7 +45,7 @@ macro_rules! example_framework {
         AppCtx::set_app_theme(material::purple::light());
       }
       let name = env!("CARGO_PKG_NAME");
-      let id = App::new_window($widget_fn(), Some($size));
+      let id = App::new_window($widget_fn().into(), Some($size));
       AppCtx::get_window(id).unwrap().set_title(name);
       App::exec();
     }
diff --git a/docs/essentials/widget_language.md b/docs/essentials/widget_language.md
index 3d16ba9fa..e3f35bd18 100644
--- a/docs/essentials/widget_language.md
+++ b/docs/essentials/widget_language.md
@@ -213,7 +213,7 @@ DynWidget {
 
 We added three lines of code. 
 
-The first line is `dyns := assign_watch!(*counter > 0)`, we use operator `:=` instead of `:` to initialize the `dyns`. Unlike `:`, `:=` accepts an `AssignObservable` as its initialization value and explicitly subscribes to it to update the field. `AssignObservable` is a type that contain the initialization value and an observable stream of that value. The `assign_watch!` macro is used to convert a expression to an `AssignObservable`. 
+The first line is `dyns := assign_watch!(*counter > 0)`, we use operator `:=` instead of `:` to initialize the `dyns`. Unlike `:`, `:=` accepts an `Pipe` as its initialization value and explicitly subscribes to it to update the field. `Pipe` is a type that contain the initialization value and an observable stream of that value. The `assign_watch!` macro is used to convert a expression to an `Pipe`. 
 
 In the second line we use `stream_map` to chain `distinct_until_changed` on the stream observable. So we accept the changes only when the result of `*counter > 0` changed.
 
diff --git a/examples/counter/src/counter.rs b/examples/counter/src/counter.rs
index 40ff2a0ad..685f3422d 100644
--- a/examples/counter/src/counter.rs
+++ b/examples/counter/src/counter.rs
@@ -1,15 +1,21 @@
 use ribir::prelude::*;
 
-pub fn counter() -> Widget {
-  widget! {
-    states { cnt: Stateful::new(0) }
-    Column {
+pub fn counter() -> impl Into<Widget> {
+  fn_widget! {
+    let cnt = Stateful::new(0);
+
+    @Column {
       h_align: HAlign::Center,
       align_items: Align::Center,
-      FilledButton { on_tap: move |_| *cnt += 1, Label::new("Add") }
-      H1 { text: cnt.to_string() }
-      FilledButton { on_tap: move |_| *cnt += -1, Label::new("Sub") }
+      @FilledButton {
+        on_tap: move |_: &'_ mut PointerEvent<'_>| *$cnt += 1,
+        @ { Label::new("Add") }
+      }
+      @H1 { text: pipe!($cnt.to_string())  }
+      @FilledButton {
+        on_tap: move |_: &'_ mut PointerEvent<'_>| *$cnt += -1,
+        @ { Label::new("Sub") }
+      }
     }
   }
-  .into()
 }
diff --git a/examples/messages/src/messages.rs b/examples/messages/src/messages.rs
index d1498f092..8df9c88b5 100644
--- a/examples/messages/src/messages.rs
+++ b/examples/messages/src/messages.rs
@@ -13,7 +13,7 @@ struct MessageList {
   messages: Vec<Message>,
 }
 
-pub fn messages() -> Widget {
+pub fn messages() -> impl Into<Widget> {
   MessageList {
     messages: vec![
       Message {
@@ -38,95 +38,83 @@ pub fn messages() -> Widget {
       },
     ],
   }
-  .into()
 }
 
 impl Compose for MessageList {
-  fn compose(this: State<Self>) -> Widget {
-    widget! {
-      states { this: this.into_readonly() }
-      init ctx => {
-        let title_style = TypographyTheme::of(ctx).title_large.text.clone();
-        let title_icon_size = IconSize::of(ctx).tiny;
-        let background = Palette::of(ctx).surface();
-        let foreground = Palette::of(ctx).on_surface();
-      }
-      Column {
-        background,
-        Row {
+  fn compose(mut this: State<Self>) -> Widget {
+    fn_widget! {
+      let palette = Palette::of(ctx!());
+
+      @Column {
+        background: palette.surface(),
+        @Row {
           justify_content: JustifyContent::SpaceBetween,
           padding: EdgeInsets::new(8., 16., 8., 16.),
           align_items: Align::Center,
-          Row {
+          @Row {
             item_gap: 10.,
-            Icon {
-              size: title_icon_size,
-              svgs::MENU
-            }
-            Text {
+            @TinyIcon { @{ svgs::MENU } }
+            @Text {
               text: "Message",
-              foreground,
-              text_style: title_style.clone(),
+              foreground: palette.on_surface(),
+              text_style: TypographyTheme::of(ctx!()).title_large.text.clone(),
             }
           }
-          Row {
+          @Row {
             item_gap: 10.,
-            Icon {
-              size: title_icon_size,
-              svgs::SEARCH
-            }
-            Icon {
-              size: title_icon_size,
-              svgs::MORE_VERT
-            }
+            @TinyIcon { @{ svgs::SEARCH } }
+            @TinyIcon { @{ svgs::MORE_VERT } }
           }
         }
-        Tabs {
+        @Tabs {
           pos: Position::Bottom,
-          Tab {
-            TabItem {
-              material_svgs::SMS
-              Label::new("Messages")
+          @Tab {
+            @TabItem {
+              @{ material_svgs::SMS }
+              @{ Label::new("Messages") }
             }
-            TabPane {
-              VScrollBar {
-                Lists {
-                  Multi::new(this.messages.clone().into_iter().map(move |message| {
-                    let name = message.avatar.to_string();
-                    let mut avatar = format!("{}/examples/attachments/3DDD-{name}.png", env!("CARGO_WORKSPACE_DIR"));
-                    let img = PixelImage::from_png(&std::fs::read(avatar).unwrap());
-                    let img = ShareResource::new(img);
-
-                    widget! {
-                      Column {
-                        ListItem {
-                          line_number: 1,
-                          HeadlineText(Label::new(message.nick_name.clone()))
-                          SupportingText(Label::new(message.content.clone()))
-                          Leading { Avatar { widget::from(img) } }
-                          Trailing { svgs::MORE_HORIZ }
+            @TabPane {
+              @VScrollBar {
+                @Lists {
+                  @{
+                    let message_gen = |message: Message| {
+                      @Column {
+                        @ListItem {
+                          line_number: 1usize,
+                          @HeadlineText(Label::new(message.nick_name.clone()))
+                          @SupportingText(Label::new(message.content.clone()))
+                          @Leading {
+                            @Avatar {
+                              @{
+                                let name = message.avatar.to_string();
+                                let mut avatar = format!("{}/examples/attachments/3DDD-{name}.png", env!("CARGO_WORKSPACE_DIR"));
+                                let img = PixelImage::from_png(&std::fs::read(avatar).unwrap());
+                                ShareResource::new(img)
+                              }
+                            }
+                          }
+                          @Trailing { @{ svgs::MORE_HORIZ } }
                         }
-                        Divider {}
+                        @Divider {}
                       }
-                    }
-                  }))
+                    };
+
+                    Multi::new($this.messages.clone().into_iter().map(message_gen))
+                  }
                 }
               }
             }
           }
-          Tab {
-            TabItem {
-              material_svgs::ACCOUNT_CIRCLE
-              Label::new("Person")
-            }
-            TabPane {
-              Text {
-                text: "Person"
-              }
+          @Tab {
+            @TabItem {
+              @{ material_svgs::ACCOUNT_CIRCLE }
+              @{ Label::new("Person") }
             }
+            @TabPane { @Text { text: "Person" } }
           }
         }
       }
-    }.into()
+    }
+    .into()
   }
 }
diff --git a/examples/todos/src/todos.rs b/examples/todos/src/todos.rs
index 4d0e7bfec..3fe21d001 100644
--- a/examples/todos/src/todos.rs
+++ b/examples/todos/src/todos.rs
@@ -76,7 +76,7 @@ impl Compose for TodoMVP {
 }
 
 impl TodoMVP {
-  fn pane(this: StateRef<Self>, cond: fn(&Task) -> bool) -> Widget {
+  fn pane(this: StatefulRef<Self>, cond: fn(&Task) -> bool) -> Widget {
     let this = this.clone_stateful();
     widget! {
       states { this, mount_task_cnt: Stateful::new(0) }
@@ -105,7 +105,12 @@ impl TodoMVP {
     .into()
   }
 
-  fn task(this: StateRef<Self>, task: Task, idx: usize, mount_task_cnt: StateRef<i32>) -> Widget {
+  fn task(
+    this: StatefulRef<Self>,
+    task: Task,
+    idx: usize,
+    mount_task_cnt: StatefulRef<i32>,
+  ) -> Widget {
     let this = this.clone_stateful();
     let mount_task_cnt = mount_task_cnt.clone_stateful();
     widget! {
diff --git a/macros/Cargo.toml b/macros/Cargo.toml
index b4f2e212e..f52f71cd3 100644
--- a/macros/Cargo.toml
+++ b/macros/Cargo.toml
@@ -22,10 +22,10 @@ bitflags.workspace = true
 lazy_static.workspace = true
 proc-macro2.workspace = true
 quote.workspace = true
-ribir_builtin = {path = "./builtin", version = "0.0.1-alpha.4" }
-ribir_painter = {path = "../painter", version = "0.0.1-alpha.4" }
+ribir_builtin = {path = "./builtin", version = "0.0.1-alpha.4"}
+ribir_painter = {path = "../painter", version = "0.0.1-alpha.4"}
 smallvec.workspace = true
-syn = {workspace = true, features = ["visit-mut", "full", "extra-traits"]}
+syn = {workspace = true, features = ["visit-mut", "fold", "full", "extra-traits"]}
 
 [build-dependencies]
-ribir_builtin = {path = "./builtin", version = "0.0.1-alpha.4" }
+ribir_builtin = {path = "./builtin", version = "0.0.1-alpha.4"}
diff --git a/macros/src/child_template.rs b/macros/src/child_template.rs
index 5958d10fc..999033e80 100644
--- a/macros/src/child_template.rs
+++ b/macros/src/child_template.rs
@@ -62,6 +62,12 @@ pub(crate) fn derive_child_template(input: &mut syn::DeriveInput) -> syn::Result
           fn declare_builder() -> Self::Builder { #name::builder() }
         }
 
+        impl #g_impl Declare2 for #name #g_ty #g_where {
+          type Builder = #builder #g_ty;
+          #[inline]
+          fn declare2_builder() -> Self::Builder { #name::builder() }
+        }
+
         impl #g_impl DeclareBuilder for #builder #g_ty {
           type Target = Self;
           #[inline]
diff --git a/macros/src/declare_derive.rs b/macros/src/declare_derive.rs
index a1581a57e..966147fa2 100644
--- a/macros/src/declare_derive.rs
+++ b/macros/src/declare_derive.rs
@@ -253,7 +253,6 @@ pub(crate) fn declare_derive(input: &mut syn::DeriveInput) -> syn::Result<TokenS
         }
       }
 
-
       impl #g_impl #name #g_ty #g_where {
         #methods
       }
diff --git a/macros/src/declare_derive2.rs b/macros/src/declare_derive2.rs
new file mode 100644
index 000000000..671a7067e
--- /dev/null
+++ b/macros/src/declare_derive2.rs
@@ -0,0 +1,353 @@
+use crate::util::data_struct_unwrap;
+use proc_macro::{Diagnostic, Level};
+use proc_macro2::TokenStream;
+use quote::{quote, quote_spanned, ToTokens};
+use syn::{
+  parse::{discouraged::Speculative, Parse},
+  parse_quote,
+  punctuated::Punctuated,
+  spanned::Spanned,
+  token, DataStruct, Fields, Ident, Result,
+};
+
+const DECLARE: &str = "Declare2";
+pub const DECLARER: &str = "Declarer2";
+const DECLARE_ATTR: &str = "declare";
+
+struct DefaultMeta {
+  _default_kw: kw::default,
+  _eq_token: Option<syn::token::Eq>,
+  value: Option<syn::Expr>,
+}
+
+#[derive(Default)]
+struct DeclareAttr {
+  rename: Option<syn::Ident>,
+  builtin: Option<kw::builtin>,
+  default: Option<DefaultMeta>,
+  custom: Option<kw::custom>,
+  // field with `skip` attr, will not generate setter method and use default to init value.
+  skip: Option<kw::skip>,
+}
+
+struct DeclareField<'a> {
+  attr: Option<DeclareAttr>,
+  field: &'a syn::Field,
+}
+mod kw {
+  use syn::custom_keyword;
+  custom_keyword!(rename);
+  custom_keyword!(builtin);
+  custom_keyword!(default);
+  custom_keyword!(custom);
+  custom_keyword!(skip);
+  // todo: tmp code, only for compatibility.
+  custom_keyword!(convert);
+}
+
+impl Parse for DefaultMeta {
+  fn parse(input: syn::parse::ParseStream) -> Result<Self> {
+    Ok(Self {
+      _default_kw: input.parse()?,
+      _eq_token: input.parse()?,
+      value: {
+        let ahead = input.fork();
+        let expr = ahead.parse::<syn::Expr>();
+        if expr.is_ok() {
+          input.advance_to(&ahead);
+        }
+        expr.ok()
+      },
+    })
+  }
+}
+
+impl Parse for DeclareAttr {
+  fn parse(input: syn::parse::ParseStream) -> Result<Self> {
+    let mut attr = DeclareAttr::default();
+    while !input.is_empty() {
+      let lookahead = input.lookahead1();
+
+      // use input instead of lookahead to peek builtin, because need't complicate in
+      // compile error.
+      if input.peek(kw::builtin) {
+        attr.builtin = Some(input.parse()?);
+      } else if lookahead.peek(kw::rename) {
+        input.parse::<kw::rename>()?;
+        input.parse::<syn::Token![=]>()?;
+        attr.rename = Some(input.parse()?);
+      } else if lookahead.peek(kw::custom) {
+        attr.custom = Some(input.parse()?);
+      } else if lookahead.peek(kw::default) {
+        attr.default = Some(input.parse()?);
+      } else if lookahead.peek(kw::skip) {
+        attr.skip = Some(input.parse()?);
+      } else if lookahead.peek(kw::convert) {
+        input.parse::<kw::convert>()?;
+        input.parse::<token::Eq>()?;
+        input.parse::<Ident>()?;
+      } else {
+        return Err(lookahead.error());
+      }
+      if let (Some(rename), Some(builtin)) = (attr.rename.as_ref(), attr.builtin.as_ref()) {
+        let mut d = Diagnostic::new(
+          Level::Error,
+          "`rename` and `builtin` can not be used in same time.",
+        );
+        d.set_spans(vec![rename.span().unwrap(), builtin.span().unwrap()]);
+        d.emit();
+      }
+      if !input.is_empty() {
+        input.parse::<syn::Token![,]>()?;
+      }
+    }
+    Ok(attr)
+  }
+}
+
+pub(crate) fn declare_derive(input: &mut syn::DeriveInput) -> syn::Result<TokenStream> {
+  let syn::DeriveInput { vis, ident: name, generics, data, .. } = input;
+
+  let stt = data_struct_unwrap(data, DECLARE)?;
+
+  if stt.fields.is_empty() {
+    let tokens = quote! {
+        impl Declare2 for #name  {
+          type Builder = #name;
+          fn declare2_builder() -> Self::Builder { #name }
+        }
+
+        impl DeclareBuilder for #name {
+          type Target = #name;
+          fn build(self, _: &BuildCtx) -> Self::Target { self }
+        }
+    };
+    Ok(tokens)
+  } else {
+    struct_with_fields_gen(stt, vis, generics, name)
+  }
+}
+
+fn struct_with_fields_gen(
+  stt: &mut DataStruct,
+  vis: &syn::Visibility,
+  generics: &syn::Generics,
+  name: &syn::Ident,
+) -> syn::Result<TokenStream> {
+  let (g_impl, g_ty, g_where) = generics.split_for_impl();
+
+  let mut builder_fields = collect_filed_and_attrs(stt)?;
+
+  // reverse name check.
+  builder_fields
+    .iter_mut()
+    .for_each(DeclareField::check_reserve);
+
+  let declarer = Ident::new(&format!("{name}{DECLARER}"), name.span());
+
+  let mut builder_methods = quote! {};
+  builder_fields
+    .iter()
+    .filter(|f| f.need_set_method())
+    .for_each(|f| {
+      let field_name = f.field.ident.as_ref().unwrap();
+      let ty = &f.field.ty;
+      let set_method = f.set_method_name();
+
+      builder_methods.extend(quote! {
+        #[inline]
+        #vis fn #set_method<_M, _V>(mut self, v: _V) -> Self
+          where DeclareInit<#ty>: DeclareFrom<_V, _M>
+        {
+          self.#field_name = Some(DeclareInit::declare_from(v));
+          self
+        }
+      });
+    });
+
+  // builder define
+  let def_fields = builder_fields.pairs().map(|p| {
+    let (f, c) = p.into_tuple();
+    let mut f = f.field.clone();
+    let ty = &f.ty;
+    f.ty = parse_quote!(Option<DeclareInit<#ty>>);
+    syn::punctuated::Pair::new(f, c)
+  });
+
+  // implement declare trait
+
+  let fill_default = builder_fields.iter().filter_map(|f| {
+    let attr = f.attr.as_ref()?;
+    let field_name = f.member();
+
+    let set_default_value = match (&attr.default, &attr.skip) {
+      (Some(df), None) if df.value.is_some() => {
+        let v = df.value.as_ref();
+        let method = f.set_method_name();
+        Some(quote! { self = self.#method(#v); })
+      }
+      (Some(df), Some(_)) if df.value.is_some() => {
+        let v = df.value.as_ref();
+        Some(quote! { self.#field_name = Some(DeclareInit::declare_from(#v)); })
+      }
+      (Some(_), _) | (_, Some(_)) => {
+        Some(quote! { self.#field_name = Some(DeclareInit::default()); })
+      }
+      (None, None) => None,
+    };
+    set_default_value.map(|set_default_value| {
+      quote! {
+        if self.#field_name.is_none() {
+          #set_default_value
+        }
+      }
+    })
+  });
+
+  let unzip_fields = builder_fields.iter().map(|df| {
+    let field_name = df.field.ident.as_ref().unwrap();
+    let method = df.set_method_name();
+    quote_spanned! { field_name.span() =>
+      let #field_name = self.#field_name.expect(&format!(
+        "Required field `{}::{}` not set, use method `{}` init it",
+        stringify!(#name), stringify!(#field_name), stringify!(#method)
+      )).unzip();
+    }
+  });
+
+  let field_names = builder_fields.iter().map(|f| f.field.ident.as_ref());
+  let field_names2 = field_names.clone();
+  let field_names3 = field_names.clone();
+
+  let tokens = quote! {
+      #vis struct #declarer #g_impl #g_where {
+        #(#def_fields)*
+      }
+
+      impl #g_impl Declare2 for #name #g_ty #g_where {
+        type Builder = #declarer #g_ty;
+
+        fn declare2_builder() -> Self::Builder {
+          #declarer { #(#field_names : None ),*}
+        }
+      }
+
+      impl #g_impl #declarer #g_ty #g_where {
+        #builder_methods
+      }
+
+      impl #g_impl DeclareBuilder for #declarer #g_ty #g_where {
+        type Target = State<#name #g_ty>;
+        fn build(mut self, ctx: &BuildCtx) -> Self::Target {
+          set_build_ctx!(ctx);
+
+          #(#fill_default)*
+          #(#unzip_fields)*
+          let mut _ribir = State::Stateless(#name {
+            #(#field_names2 : #field_names2.0),*
+          });
+          #(
+            if let Some(u) = #field_names3.1 {
+              let mut _ribir2 = _ribir.clone_stateful();
+              let h = u.subscribe(move |v| _ribir2.state_ref().#field_names3 = v)
+              .unsubscribe_when_dropped();
+              _ribir.to_stateful().own_data(h);
+            }
+          );*
+
+          _ribir
+        }
+      }
+  };
+
+  Ok(tokens)
+}
+
+fn collect_filed_and_attrs(stt: &mut DataStruct) -> Result<Punctuated<DeclareField, token::Comma>> {
+  let mut builder_fields = Punctuated::default();
+  match &mut stt.fields {
+    Fields::Named(named) => {
+      named
+        .named
+        .pairs_mut()
+        .try_for_each::<_, syn::Result<()>>(|pair| {
+          let (field, comma) = pair.into_tuple();
+          let idx = field
+            .attrs
+            .iter()
+            .position(|attr| attr.path.is_ident(DECLARE_ATTR));
+          let builder_attr = if let Some(idx) = idx {
+            let attr = field.attrs.remove(idx);
+            let args: DeclareAttr = attr.parse_args()?;
+            Some(args)
+          } else {
+            None
+          };
+
+          builder_fields.push(DeclareField { attr: builder_attr, field });
+          if let Some(c) = comma {
+            builder_fields.push_punct(*c);
+          }
+
+          Ok(())
+        })?;
+    }
+    Fields::Unit => <_>::default(),
+    Fields::Unnamed(unnamed) => {
+      let err = syn::Error::new(
+        unnamed.span(),
+        format!("`{DECLARE}` not be supported to derive for tuple struct"),
+      );
+      return Err(err);
+    }
+  };
+  Ok(builder_fields)
+}
+
+impl<'a> DeclareField<'a> {
+  fn member(&self) -> &Ident { self.field.ident.as_ref().unwrap() }
+
+  fn set_method_name(&self) -> &Ident {
+    self
+      .attr
+      .as_ref()
+      .and_then(|attr| attr.rename.as_ref())
+      .or(self.field.ident.as_ref())
+      .unwrap()
+  }
+
+  fn need_set_method(&self) -> bool {
+    self
+      .attr
+      .as_ref()
+      .map_or(true, |attr| attr.custom.is_none() && attr.skip.is_none())
+  }
+
+  fn check_reserve(&mut self) {
+    // reverse name check.
+    let reserve_ident = &crate::widget_macro::RESERVE_IDENT;
+
+    let not_builtin = self
+      .attr
+      .as_ref()
+      .map_or(true, |attr| attr.builtin.is_none());
+
+    if not_builtin {
+      let method_name = self.set_method_name();
+      if let Some(r) = reserve_ident.get(method_name.to_string().as_str()) {
+        let msg = format!("the identify `{}` is reserved to {}", method_name, &r);
+        let mut field = self.field.clone();
+        // not display the attrs in the help code.
+
+        field.attrs.clear();
+        Diagnostic::spanned(vec![method_name.span().unwrap()], Level::Error, msg)
+          .help(format! {
+            "use `rename` meta to avoid the name conflict in `widget!` macro.\n\n\
+            #[declare(rename = xxx)] \n\
+            {}", field.into_token_stream()
+          })
+          .emit();
+      }
+    }
+  }
+}
diff --git a/macros/src/declare_obj.rs b/macros/src/declare_obj.rs
new file mode 100644
index 000000000..47cf5de54
--- /dev/null
+++ b/macros/src/declare_obj.rs
@@ -0,0 +1,186 @@
+use crate::{
+  rdl_macro::{DeclareField, RdlParent, StructLiteral},
+  widget_macro::{ribir_variable, WIDGETS, WIDGET_OF_BUILTIN_FIELD},
+};
+use inflector::Inflector;
+use proc_macro2::{Span, TokenStream};
+use quote::quote;
+use quote::{quote_spanned, ToTokens};
+use smallvec::SmallVec;
+use syn::{
+  parse_str,
+  spanned::Spanned,
+  token::{Brace, Comma, Paren},
+  Ident, Macro, Path,
+};
+
+pub struct DeclareObj<'a> {
+  this: ObjNode<'a>,
+  span: Span,
+  builtin: ahash::HashMap<&'static str, SmallVec<[&'a DeclareField; 1]>>,
+  children: &'a Vec<Macro>,
+}
+enum ObjNode<'a> {
+  Obj {
+    span: Span,
+    ty: &'a Path,
+    fields: SmallVec<[&'a DeclareField; 1]>,
+  },
+  Var(&'a Ident),
+}
+
+impl<'a> DeclareObj<'a> {
+  pub fn from_literal(mac: &'a StructLiteral) -> Result<Self, TokenStream> {
+    let StructLiteral { parent, brace, fields, children } = mac;
+    let mut builtin: ahash::HashMap<_, SmallVec<[&DeclareField; 1]>> = <_>::default();
+    let span = match parent {
+      RdlParent::Type(ty) => ty.span(),
+      RdlParent::Var(name) => name.span(),
+    };
+    let span = span.join(brace.span).unwrap();
+
+    let this = match parent {
+      RdlParent::Type(ty) => {
+        let mut self_fields = SmallVec::default();
+        for f in fields {
+          if let Some(ty) = WIDGET_OF_BUILTIN_FIELD
+            .get(f.member.to_string().as_str())
+            .filter(|builtin_ty| !ty.is_ident(builtin_ty))
+          {
+            builtin.entry(*ty).or_default().push(f);
+          } else {
+            self_fields.push(f)
+          }
+        }
+        ObjNode::Obj { ty, fields: self_fields, span }
+      }
+      RdlParent::Var(name) => {
+        for f in fields {
+          if let Some(ty) = WIDGET_OF_BUILTIN_FIELD.get(f.member.to_string().as_str()) {
+            builtin.entry(*ty).or_default().push(f);
+          } else {
+            return Err(quote_spanned! { f.span() =>
+              compile_error!("Not allow to declare a field of a variable parent.")
+            });
+          }
+        }
+        ObjNode::Var(name)
+      }
+    };
+
+    Ok(Self { this, span, builtin, children })
+  }
+}
+
+impl<'a> ToTokens for DeclareObj<'a> {
+  fn to_tokens(&self, tokens: &mut TokenStream) {
+    let Self { this, span, builtin, children } = self;
+
+    // if children is empty, we declare a `FatObj`, so it's can be used and
+    // referenced by others, otherwise directly composed.
+
+    if children.is_empty() && builtin.is_empty() {
+      quote_spanned! { *span => FatObj::new(#this) }.to_tokens(tokens)
+    } else {
+      Brace::default().surround(tokens, |tokens| {
+        let mut builtin_names = vec![];
+        for (ty_str, fields) in builtin {
+          // 'b is live longer than 'a, safe convert, but we can't directly convert
+          // `SmallVec<[&'b DeclareField; 1]>` to `SmallVec<[&'a DeclareField;
+          // 1]>`, because `SmallVec<T>` is invariant over `T`.
+          fn shorter_lifetime<'a, 'b: 'a>(
+            fields: SmallVec<[&'b DeclareField; 1]>,
+          ) -> SmallVec<[&'a DeclareField; 1]> {
+            unsafe { std::mem::transmute(fields.clone()) }
+          }
+          let fields = shorter_lifetime(fields.clone());
+
+          let builtin_span = fields[0].span();
+          let ty = parse_str::<Path>(ty_str).unwrap();
+          let obj = ObjNode::Obj { ty: &ty, span: builtin_span, fields };
+
+          let snaked_ty_str = ty_str.to_snake_case();
+          let name = Ident::new(&snaked_ty_str, builtin_span);
+          quote_spanned! { builtin_span => let #name = #obj; }.to_tokens(tokens);
+          builtin_names.push(name);
+        }
+
+        let mut children_names = vec![];
+        for (i, c) in children.iter().enumerate() {
+          let child = ribir_variable(&format!("child_{i}"), c.span());
+          quote_spanned! { c.span() => let #child = #c; }.to_tokens(tokens);
+          children_names.push(child)
+        }
+
+        if children.is_empty() {
+          let builtin_init = builtin_names
+            .iter()
+            .map(|name| Ident::new(&format!("with_{name}"), name.span()));
+
+          quote_spanned! {
+            *span =>FatObj::new(#this)#(.#builtin_init(#builtin_names))*
+          }
+          .to_tokens(tokens);
+        } else {
+          // todo: tmp code, we should use FatObj to compose builtin widgets in every
+          // where, so we can keep the builtin widget compose order consistent.
+          builtin_names.sort_by_key(|name| {
+            WIDGETS
+              .iter()
+              .position(|b| *name == b.ty.to_snake_case())
+              .unwrap()
+          });
+          if !builtin.is_empty() {
+            let first = &builtin_names[0];
+            let rest_builtin = &builtin_names[1..];
+
+            recursive_compose_with(first, rest_builtin.iter(), tokens, |tokens| {
+              quote_spanned! { *span =>
+                #this #(.with_child(#children_names, ctx!()))*
+              }
+              .to_tokens(tokens)
+            });
+          } else {
+            quote_spanned! { *span =>
+              #this #(.with_child(#children_names, ctx!()))*
+            }
+            .to_tokens(tokens)
+          }
+        }
+      });
+    }
+  }
+}
+
+fn recursive_compose_with(
+  p: impl ToTokens,
+  mut child_chain: impl Iterator<Item = impl ToTokens>,
+  tokens: &mut TokenStream,
+  leaf: impl FnOnce(&mut TokenStream),
+) {
+  p.to_tokens(tokens);
+  quote_spanned! { p.span() => .with_child}.to_tokens(tokens);
+  Paren(p.span()).surround(tokens, |tokens| {
+    let child = child_chain.next();
+    if let Some(c) = child {
+      recursive_compose_with(c, child_chain, tokens, leaf)
+    } else {
+      leaf(tokens)
+    }
+    Comma::default().to_tokens(tokens);
+    quote! { ctx!() }.to_tokens(tokens);
+  });
+}
+
+impl<'a> ToTokens for ObjNode<'a> {
+  fn to_tokens(&self, tokens: &mut TokenStream) {
+    match self {
+      Self::Obj { ty, span, fields } => {
+        quote_spanned! { *span => #ty::declare2_builder() }.to_tokens(tokens);
+        fields.iter().for_each(|f| f.to_tokens(tokens));
+        tokens.extend(quote_spanned! { *span => .build(ctx!()) });
+      }
+      Self::Var(var) => var.to_tokens(tokens),
+    }
+  }
+}
diff --git a/macros/src/fn_widget_macro.rs b/macros/src/fn_widget_macro.rs
new file mode 100644
index 000000000..20159c9d5
--- /dev/null
+++ b/macros/src/fn_widget_macro.rs
@@ -0,0 +1,35 @@
+use quote::{quote, ToTokens};
+use syn::{
+  fold::Fold,
+  parse::{Parse, ParseStream},
+  Stmt,
+};
+
+use crate::symbol_process::DollarRefs;
+
+pub struct FnWidgetMacro {
+  stmts: Vec<Stmt>,
+}
+
+impl Parse for FnWidgetMacro {
+  fn parse(input: ParseStream) -> syn::Result<Self> {
+    let stmts = syn::Block::parse_within(input)?;
+    let mut refs = DollarRefs::default();
+    let stmts = stmts.into_iter().map(|s| refs.fold_stmt(s)).collect();
+    Ok(Self { stmts })
+  }
+}
+
+impl ToTokens for FnWidgetMacro {
+  fn to_tokens(&self, tokens: &mut proc_macro2::TokenStream) {
+    let Self { stmts } = self;
+    quote! {
+      FnWidget::new(move |ctx: &BuildCtx| {
+        set_build_ctx!(ctx);
+        #[allow(unused_mut)]
+        { #(#stmts)* }
+      })
+    }
+    .to_tokens(tokens)
+  }
+}
diff --git a/macros/src/lib.rs b/macros/src/lib.rs
index 11da7f222..f822fc1d9 100644
--- a/macros/src/lib.rs
+++ b/macros/src/lib.rs
@@ -1,18 +1,29 @@
 #![feature(proc_macro_diagnostic, proc_macro_span)]
 extern crate proc_macro;
-extern crate proc_macro2;
 
 mod declare_derive;
+mod declare_derive2;
 mod error;
-mod widget_macro;
-
 mod lerp_derive;
 mod util;
+mod widget_macro;
+use fn_widget_macro::FnWidgetMacro;
 use proc_macro::TokenStream;
-use quote::quote;
+use quote::{quote, ToTokens};
+use symbol_process::symbol_to_macro;
 use syn::{parse_macro_input, DeriveInput};
 use widget_macro::gen_widget_macro;
 mod child_template;
+mod fn_widget_macro;
+mod pipe_macro;
+mod rdl_macro;
+mod watch_macro;
+pub(crate) use rdl_macro::*;
+
+use crate::pipe_macro::PipeExpr;
+use crate::watch_macro::WatchMacro;
+pub(crate) mod declare_obj;
+pub(crate) mod symbol_process;
 
 pub(crate) const WIDGET_MACRO_NAME: &str = "widget";
 pub(crate) const MOVE_TO_WIDGET_MACRO_NAME: &str = "move_to_widget";
@@ -76,6 +87,14 @@ pub fn declare_trait_macro_derive(input: TokenStream) -> TokenStream {
     .into()
 }
 
+#[proc_macro_derive(Declare2, attributes(declare))]
+pub fn declare_trait_macro_derive2(input: TokenStream) -> TokenStream {
+  let mut input = parse_macro_input!(input as DeriveInput);
+  declare_derive2::declare_derive(&mut input)
+    .unwrap_or_else(|e| e.into_compile_error())
+    .into()
+}
+
 #[proc_macro_derive(Template, attributes(template))]
 pub fn child_template_trait_derive(input: TokenStream) -> TokenStream {
   let mut input = parse_macro_input!(input as DeriveInput);
@@ -87,6 +106,109 @@ pub fn child_template_trait_derive(input: TokenStream) -> TokenStream {
 #[proc_macro]
 pub fn widget(input: TokenStream) -> TokenStream { gen_widget_macro(input, None) }
 
+/// The macro use to declare a object, this macro will use `ctx!()` to access
+/// the `BuildCtx`, so it can only use in the `fn_widget!` macro, or any scope
+/// that called `set_build_ctx!` macro.
+///
+/// # The Syntax
+///
+/// `rdl` accept 3 kind of syntax:
+///
+/// - 1. use struct literal syntax to declare a object tree, like `rdl!{ Row {
+///   wrap: true } }`, if the `Row` contain any child, its child can be embed in
+///   the struct literal, but must be use `rdl!` or `@` to declare, like:
+///
+///   ```ignore
+///     rdl!{ Row { wrap: true, child: rdl!{ Text { text: "hello" } } } }
+///   ```
+/// - 2. similar to the first, but use a variable as parent and not accept any
+///   fields of the parent(the builtin fields allowed), like:
+///
+///   ```ignore
+///     let row = rdl!{ Row { wrap: true } };
+///     rdl!{ $row { rdl!{ Text { text: "hello" } } } }
+///   ```
+/// - 3. use expression to declare a object and not allow declare children,
+///   like: `let row = rdl!{ Widget::new(Void) };`
+#[proc_macro]
+pub fn rdl(input: TokenStream) -> TokenStream {
+  symbol_to_macro(input).map_or_else(
+    |err| err,
+    |input| {
+      let declare = parse_macro_input! { input as RdlBody };
+      declare.to_token_stream().into()
+    },
+  )
+}
+
+/// The `fn_widget` is a macro that create a widget from a function widget from
+/// a expression. Its syntax is extended from rust syntax, you can use `@` and
+/// `$` in the expression, the `@` is a short hand of `rdl` macro, and `$name`
+/// use to expression a state reference of `name`.
+#[proc_macro]
+pub fn fn_widget(input: TokenStream) -> TokenStream {
+  symbol_to_macro(input).map_or_else(
+    |err| err,
+    |input| {
+      let widget_macro = parse_macro_input!(input as FnWidgetMacro);
+      widget_macro.to_token_stream().into()
+    },
+  )
+}
+
+/// set the `BuildCtx` to a special variable `_ctx_ಠ_ಠ`, so the user can use
+/// `ctx!` to access it.
+#[proc_macro]
+pub fn set_build_ctx(input: TokenStream) -> TokenStream {
+  let input: proc_macro2::TokenStream = input.into();
+  quote! { let _ctx_ಠ_ಠ = #input; }.into()
+}
+
+/// get the `BuildCtx` set by `set_build_ctx!` macro, if no `BuildCtx` set.
+#[proc_macro]
+pub fn ctx(input: TokenStream) -> TokenStream {
+  let tokens = if !input.is_empty() {
+    quote!(compile_error!("ctx! macro does not accept any argument"))
+  } else {
+    quote! { _ctx_ಠ_ಠ }
+  };
+  tokens.into()
+}
+
+/// `pipe` macro use to create `Pipe` object that continuous trace the
+/// expression modify. Use the `$` mark the state reference and auto subscribe
+/// to its modify.
+#[proc_macro]
+pub fn pipe(input: TokenStream) -> TokenStream {
+  symbol_to_macro(input).map_or_else(
+    |err| err,
+    |input| {
+      let expr = parse_macro_input! { input as PipeExpr };
+      expr.to_token_stream().into()
+    },
+  )
+}
+
+/// `watch!` macro use to convert a expression to a `Observable` stream. Use the
+/// `$` mark the state reference and auto subscribe to its modify.
+#[proc_macro]
+pub fn watch(input: TokenStream) -> TokenStream {
+  symbol_to_macro(input).map_or_else(
+    |err| err,
+    |input| {
+      let expr = parse_macro_input! { input as WatchMacro };
+      expr.to_token_stream().into()
+    },
+  )
+}
+
+/// The macro to use a state as its StateRef. Transplanted from the `$`.
+#[proc_macro]
+pub fn _dollar_ಠ_ಠ(input: TokenStream) -> TokenStream {
+  let name = parse_macro_input! { input as syn::Ident };
+  quote! { #name.state_ref() }.into()
+}
+
 #[proc_macro]
 pub fn include_svg(input: TokenStream) -> TokenStream {
   let w = parse_macro_input! { input as syn::LitStr };
diff --git a/macros/src/pipe_macro.rs b/macros/src/pipe_macro.rs
new file mode 100644
index 000000000..b4fba7708
--- /dev/null
+++ b/macros/src/pipe_macro.rs
@@ -0,0 +1,73 @@
+use crate::symbol_process::DollarRefs;
+use quote::{quote, ToTokens};
+use syn::{
+  fold::Fold,
+  parse::{Parse, ParseStream},
+  Stmt,
+};
+
+pub(crate) struct PipeExpr {
+  refs: DollarRefs,
+  expr: Vec<Stmt>,
+}
+
+impl Parse for PipeExpr {
+  fn parse(input: ParseStream) -> syn::Result<Self> {
+    let (refs, stmts) = fold_expr_as_in_closure(input)?;
+    Ok(Self { refs, expr: stmts })
+  }
+}
+
+pub fn fold_expr_as_in_closure(input: ParseStream) -> syn::Result<(DollarRefs, Vec<Stmt>)> {
+  let mut refs = DollarRefs::default();
+  refs.in_capture += 1;
+  let stmts = syn::Block::parse_within(input)?;
+  let stmts = stmts.into_iter().map(|s| refs.fold_stmt(s)).collect();
+  refs.in_capture -= 1;
+  if refs.is_empty() {
+    let err = syn::Error::new(
+      input.span(),
+      "expression not subscribe anything, it must contain at least one $",
+    );
+    Err(err)
+  } else {
+    refs.dedup();
+    Ok((refs, stmts))
+  }
+}
+
+impl ToTokens for PipeExpr {
+  fn to_tokens(&self, tokens: &mut proc_macro2::TokenStream) {
+    let Self { refs, expr } = self;
+
+    let upstream = refs.upstream_tokens();
+
+    if refs.used_ctx() {
+      quote! {{
+        #refs
+        let upstream = #upstream;
+        let mut expr_value = move |ctx!(): &BuildCtx<'_>| { #(#expr)* };
+        let _ctx_handle = ctx!().handle();
+
+        Pipe::new(
+          expr_value(ctx!()),
+          upstream
+            .filter_map(move |_| _ctx_handle.with_ctx(&mut expr_value))
+            .box_it()
+        )
+      }}
+      .to_tokens(tokens)
+    } else {
+      quote! {{
+        #refs
+        let upstream = #upstream;
+        let mut expr_value = move || { #(#expr)* };
+        Pipe::new(
+          expr_value(),
+          upstream.map(move |_| expr_value()).box_it()
+        )
+      }}
+      .to_tokens(tokens)
+    }
+  }
+}
diff --git a/macros/src/rdl_macro.rs b/macros/src/rdl_macro.rs
new file mode 100644
index 000000000..9a7140796
--- /dev/null
+++ b/macros/src/rdl_macro.rs
@@ -0,0 +1,181 @@
+use proc_macro2::{Span, TokenStream};
+use quote::{quote_spanned, ToTokens};
+use std::collections::HashSet;
+use syn::{
+  braced,
+  fold::Fold,
+  parse::{Parse, ParseBuffer, ParseStream},
+  parse_quote,
+  punctuated::Punctuated,
+  spanned::Spanned,
+  token::{At, Bang, Brace, Colon, Comma, Dollar},
+  Expr, Ident, Macro, Path, Result as SynResult, Stmt,
+};
+
+use crate::{
+  declare_obj::DeclareObj,
+  symbol_process::{kw, DollarRefs},
+};
+
+pub enum RdlBody {
+  Literal(StructLiteral),
+  /// Declare an expression as a object, like `rdl! { Widget::new(...) }`
+  ExprObj {
+    span: Span,
+    stmts: Vec<Stmt>,
+  },
+}
+
+/// Declare a object use struct literal, like `rdl! { Row { ... } }` or
+/// `@parent { ... }`
+pub struct StructLiteral {
+  pub parent: RdlParent,
+  pub brace: Brace,
+  pub fields: Punctuated<DeclareField, Comma>,
+  /// Declare a child in `rdl!` can use `rdl!` macro or `@` symbol.
+  /// `rdl! { Row { rdl! { SizedBox {...} } } }`
+  /// or
+  /// `rdl! { Row { @ SizedBox{ ... } } }`
+  /// but will be all processed as `rdl! { ... }`
+  pub children: Vec<Macro>,
+}
+
+pub enum RdlParent {
+  /// Declare parent use a type `Row { ... }`
+  Type(Path),
+  /// Declare parent use a variable prefixed with ` @parent { ... }`
+  Var(Ident),
+}
+
+/// Declare a field of a widget.
+pub struct DeclareField {
+  /// field member name.
+  pub member: Ident,
+  pub colon_tk: Option<Colon>,
+  pub value: Expr,
+}
+
+impl Parse for RdlBody {
+  fn parse(input: ParseStream) -> SynResult<Self> {
+    let fork = input.fork();
+    if fork.parse::<RdlParent>().is_ok() && fork.peek(Brace) {
+      Ok(RdlBody::Literal(input.parse()?))
+    } else {
+      let span = input.span();
+      let stmts = syn::Block::parse_within(input)?;
+      let mut refs = DollarRefs::default();
+      let stmts = stmts.into_iter().map(|s| refs.fold_stmt(s)).collect();
+      Ok(RdlBody::ExprObj { span, stmts })
+    }
+  }
+}
+
+impl Parse for StructLiteral {
+  fn parse(input: ParseStream) -> SynResult<Self> {
+    let parent = input.parse()?;
+    let content;
+    let brace = braced!(content in input);
+    let mut children = vec![];
+    let mut fields = Punctuated::default();
+    loop {
+      if content.is_empty() {
+        break;
+      }
+
+      if content.peek(At) || content.peek(kw::rdl) && content.peek2(Bang) {
+        children.push(content.parse()?);
+      } else if content.peek(Ident) {
+        let f: DeclareField = content.parse()?;
+        if !children.is_empty() {
+          let err_msg = "Field should always declare before children.";
+          return Err(syn::Error::new(f.span(), err_msg));
+        }
+        fields.push(f);
+        if !content.is_empty() {
+          fields.push_punct(content.parse()?);
+        }
+      } else {
+        return Err(syn::Error::new(
+          content.span(),
+          "expected a field or a child.",
+        ));
+      }
+    }
+
+    check_duplicate_field(&fields)?;
+    Ok(StructLiteral { parent, brace, fields, children })
+  }
+}
+
+impl Parse for RdlParent {
+  fn parse(input: ParseStream) -> SynResult<Self> {
+    if input.peek(kw::_dollar_ಠ_ಠ) && input.peek2(Bang) {
+      let mac: Macro = input.parse()?;
+
+      Ok(RdlParent::Var(mac.parse_body_with(
+        |input: &ParseBuffer| {
+          input.parse::<Dollar>()?;
+          input.parse()
+        },
+      )?))
+    } else {
+      Ok(RdlParent::Type(input.parse()?))
+    }
+  }
+}
+
+impl Parse for DeclareField {
+  fn parse(input: ParseStream) -> SynResult<Self> {
+    let member: Ident = input.parse()?;
+    let colon_tk: Option<_> = input.parse()?;
+    let value = if colon_tk.is_none() {
+      parse_quote!(#member)
+    } else {
+      let mut refs = DollarRefs::default();
+      refs.fold_expr(input.parse()?)
+    };
+
+    Ok(DeclareField { member, colon_tk, value })
+  }
+}
+
+impl ToTokens for RdlBody {
+  fn to_tokens(&self, tokens: &mut TokenStream) {
+    match self {
+      RdlBody::Literal(l) => match DeclareObj::from_literal(l) {
+        Ok(declare) => declare.to_tokens(tokens),
+        Err(err) => err.to_tokens(tokens),
+      },
+      RdlBody::ExprObj { span, stmts } => {
+        if stmts.len() > 1 {
+          Brace(*span).surround(tokens, |tokens| {
+            stmts.iter().for_each(|s| s.to_tokens(tokens));
+          })
+        } else {
+          stmts.iter().for_each(|s| s.to_tokens(tokens));
+        }
+      }
+    }
+  }
+}
+
+impl ToTokens for DeclareField {
+  fn to_tokens(&self, tokens: &mut TokenStream) {
+    let DeclareField { member, value, .. } = self;
+    quote_spanned! {value.span()=> .#member(#value)}.to_tokens(tokens);
+  }
+}
+
+/// Check if a field is declared more than once.
+fn check_duplicate_field(fields: &Punctuated<DeclareField, Comma>) -> syn::Result<()> {
+  let mut sets = HashSet::<&Ident, ahash::RandomState>::default();
+  for f in fields {
+    if !sets.insert(&f.member) {
+      return Err(syn::Error::new(
+        f.member.span(),
+        format!("`{}` declare more than once", f.member).as_str(),
+      ));
+    }
+  }
+  Ok(())
+}
diff --git a/macros/src/symbol_process.rs b/macros/src/symbol_process.rs
new file mode 100644
index 000000000..51519bb9e
--- /dev/null
+++ b/macros/src/symbol_process.rs
@@ -0,0 +1,334 @@
+use crate::widget_macro::{
+  ribir_suffix_variable, WIDGET_OF_BUILTIN_FIELD, WIDGET_OF_BUILTIN_METHOD,
+};
+use inflector::Inflector;
+use proc_macro2::{Ident, TokenStream};
+use quote::{quote, quote_spanned, ToTokens};
+use smallvec::SmallVec;
+use syn::{
+  fold::Fold,
+  parse::{Parse, ParseStream},
+  parse_quote,
+  spanned::Spanned,
+  token::Dollar,
+  Expr, ExprField, ExprMethodCall, Macro, Member,
+};
+
+pub const KW_DOLLAR_STR: &str = "_dollar_ಠ_ಠ";
+pub const KW_CTX: &str = "ctx";
+pub const KW_RDL: &str = "rdl";
+pub use tokens_pre_process::*;
+
+pub mod kw {
+  syn::custom_keyword!(_dollar_ಠ_ಠ);
+  syn::custom_keyword!(rdl);
+}
+
+#[derive(Hash, PartialEq, Eq, Debug, Clone)]
+pub struct DollarRef {
+  pub name: Ident,
+  pub builtin_shadow: Option<Expr>,
+}
+#[derive(Default)]
+pub struct DollarRefs {
+  refs: SmallVec<[DollarRef; 1]>,
+  ctx_used: bool,
+  pub in_capture: usize,
+}
+
+mod tokens_pre_process {
+
+  use proc_macro::{TokenTree, *};
+  use quote::quote_spanned;
+
+  use super::KW_DOLLAR_STR;
+  use crate::symbol_process::KW_RDL;
+
+  fn rdl_syntax_err<T>(span: Span) -> Result<T, TokenStream> {
+    let err_token = quote_spanned! { span.into() =>
+      compile_error!("Syntax Error: use `@` to declare object, must be: \n \
+        1. `@ XXX { ... }`, declare a new `XXX` type object;\n \
+        2. `@ $parent { ... }`, declare a variable as parent;\n \
+        3. `@ { ... } `, declare an object by an expression.")
+    };
+    Err(err_token.into())
+  }
+
+  fn dollar_err<T>(span: Span) -> Result<T, TokenStream> {
+    let err_token = quote_spanned! { span.into() =>
+      compile_error!("Syntax error: expected an identifier after `$`")
+    };
+    Err(err_token.into())
+  }
+
+  /// Convert `@` and `$` symbol to a `rdl!` or `_dollar_ಠ_ಠ!` macro, make it
+  /// conform to Rust syntax
+  pub fn symbol_to_macro(input: TokenStream) -> Result<TokenStream, TokenStream> {
+    let mut iter = input.into_iter();
+    let mut tokens = vec![];
+
+    loop {
+      match iter.next() {
+        Some(TokenTree::Punct(at))
+          // maybe rust identify bind syntax, `identify @`
+          if at.as_char() == '@' && !matches!(tokens.last(), Some(TokenTree::Ident(_))) =>
+        {
+          tokens.push(TokenTree::Ident(Ident::new(KW_RDL, at.span())));
+          tokens.push(TokenTree::Punct(Punct::new('!', Spacing::Alone)));
+
+          let body = match iter.next() {
+            // declare a new widget: `@ SizedBox { ... }`
+            Some(TokenTree::Ident(name)) => {
+              let Some(TokenTree::Group(body))  =  iter.next() else {
+                return rdl_syntax_err(at.span().join(name.span()).unwrap())
+              };
+              let tokens = TokenStream::from_iter([TokenTree::Ident(name), TokenTree::Group(body)]);
+              Group::new(Delimiter::Brace, tokens)
+            }
+            // declare a variable widget as parent,  `@ $var { ... }`
+            Some(TokenTree::Punct(dollar)) if dollar.as_char() == '$' => {
+              if let Some(TokenTree::Ident(var)) = iter.next() {
+                let Some(TokenTree::Group(body))  =  iter.next() else {
+                  let span = at.span().join(dollar.span()).unwrap().join(var.span()).unwrap();
+                  return rdl_syntax_err(span)
+                };
+                let tokens = TokenStream::from_iter([
+                  TokenTree::Punct(dollar),
+                  TokenTree::Ident(var),
+                  TokenTree::Group(body),
+                ]);
+                Group::new(Delimiter::Brace, tokens)
+              } else {
+                return dollar_err(dollar.span());
+              }
+            }
+            // declare a expression widget  `@ { ... }`
+            Some(TokenTree::Group(g)) => g,
+            n => {
+              let mut span = at.span();
+              if let Some(n) = n {
+                span = span.join(n.span()).unwrap()
+              }
+              return rdl_syntax_err(span);
+            }
+          };
+          tokens.push(TokenTree::Group(body));
+        }
+        Some(TokenTree::Punct(p)) if p.as_char() == '$' => {
+          match iter.next() {
+            Some(TokenTree::Ident(name)) => {
+              tokens.push(TokenTree::Ident(Ident::new(KW_DOLLAR_STR, p.span())));
+              tokens.push(TokenTree::Punct(Punct::new('!', Spacing::Alone)));
+              let span = name.span();
+              let mut g = Group::new(
+                Delimiter::Parenthesis,
+                [TokenTree::Punct(p), TokenTree::Ident(name)].into_iter().collect()
+              );
+              g.set_span(span);
+              tokens.push(TokenTree::Group(g));
+            }
+            Some(t) => return dollar_err(t.span()),
+            None => return dollar_err(p.span()),
+          };
+        }
+
+        Some(TokenTree::Group(mut g)) => {
+          // not process symbol in macro, because it's maybe as part of the macro syntax.
+          if !in_macro(&tokens) {
+            let mut n = Group::new(g.delimiter(), symbol_to_macro(g.stream())?);
+            n.set_span(g.span());
+            g = n;
+          }
+
+          tokens.push(TokenTree::Group(g));
+        }
+        Some(t) => tokens.push(t),
+        None => break,
+      };
+    }
+    Ok(tokens.into_iter().collect())
+  }
+
+  fn in_macro(tokens: &[TokenTree]) -> bool {
+    let [.., TokenTree::Ident(_), TokenTree::Punct(p)] = tokens else {
+    return  false;
+  };
+    p.as_char() == '!'
+  }
+}
+
+impl Fold for DollarRefs {
+  fn fold_expr_field(&mut self, mut i: ExprField) -> ExprField {
+    let ExprField { base, member, .. } = &mut i;
+    if let Member::Named(member) = member {
+      if let Some(builtin_ty) = WIDGET_OF_BUILTIN_FIELD.get(member.to_string().as_str()) {
+        self.replace_builtin_ident(&mut *base, &builtin_ty.to_snake_case());
+      }
+    }
+
+    syn::fold::fold_expr_field(self, i)
+  }
+
+  fn fold_expr_method_call(&mut self, mut i: ExprMethodCall) -> ExprMethodCall {
+    if let Some(builtin_ty) = WIDGET_OF_BUILTIN_METHOD.get(i.method.to_string().as_str()) {
+      self.replace_builtin_ident(&mut i.receiver, &builtin_ty.to_snake_case());
+    }
+
+    syn::fold::fold_expr_method_call(self, i)
+  }
+
+  fn fold_macro(&mut self, mut mac: Macro) -> Macro {
+    if let Some(DollarMacro { name, .. }) = parse_clean_dollar_macro(&mac) {
+      mac.tokens = name.to_token_stream();
+      self.refs.push(DollarRef { name, builtin_shadow: None });
+      mac
+    } else {
+      self.ctx_used = mac.path.is_ident(KW_RDL) || mac.path.is_ident(KW_CTX);
+      syn::fold::fold_macro(self, mac)
+    }
+  }
+
+  fn fold_expr(&mut self, i: Expr) -> Expr {
+    match i {
+      Expr::Closure(c) if c.capture.is_some() => {
+        let mut closure_refs = DollarRefs::default();
+        closure_refs.in_capture += 1;
+        let mut c = closure_refs.fold_expr_closure(c);
+        closure_refs.in_capture -= 1;
+
+        if !closure_refs.is_empty() || closure_refs.ctx_used {
+          closure_refs.dedup();
+
+          let body = &mut *c.body;
+          if closure_refs.ctx_used {
+            *body = Expr::Verbatim(quote_spanned!(body.span() =>
+              _ctx_handle
+                .with_ctx(|ctx!(): &'_ BuildCtx<'_>| #body )
+                .expect("The `BuildCtx` is not available.")
+            ));
+          }
+
+          let handle = closure_refs
+            .ctx_used
+            .then(|| quote_spanned! { c.span() => let _ctx_handle = ctx!().handle(); });
+
+          // todo: seems need merge `closure_refs` into `self`.
+
+          Expr::Verbatim(quote_spanned!(c.span() => {
+            #closure_refs
+            #handle
+            #c
+          }))
+        } else {
+          Expr::Closure(c)
+        }
+      }
+      _ => syn::fold::fold_expr(self, i),
+    }
+  }
+}
+
+impl ToTokens for DollarRef {
+  fn to_tokens(&self, tokens: &mut TokenStream) {
+    let DollarRef { name, builtin_shadow: shadow } = self;
+    if let Some(shadow) = shadow {
+      quote_spanned! { shadow.span() => let mut #name = #shadow.clone();}.to_tokens(tokens);
+    } else {
+      quote_spanned! { shadow.span() => let mut #name = #name.clone();}.to_tokens(tokens);
+    }
+  }
+}
+impl ToTokens for DollarRefs {
+  fn to_tokens(&self, tokens: &mut TokenStream) {
+    for dollar_ref in &self.refs {
+      dollar_ref.to_tokens(tokens);
+    }
+  }
+}
+
+impl DollarRefs {
+  pub fn used_ctx(&self) -> bool { self.ctx_used }
+
+  pub fn dedup(&mut self) {
+    self.refs.sort_by_key(|r: &_| r.name.to_string());
+    self.refs.dedup()
+  }
+
+  pub fn upstream_tokens(&self) -> TokenStream {
+    match self.len() {
+      0 => quote! {},
+      1 => {
+        let DollarRef { name, builtin_shadow: value } = &self.refs[0];
+        quote_spanned! { value.span() => #name.modifies() }
+      }
+      _ => {
+        let upstream = self.iter().map(|DollarRef { name, .. }| {
+          quote! {  #name.modifies() }
+        });
+        quote! { observable::from_iter([#(#upstream),*]).merge_all(usize::MAX) }
+      }
+    }
+  }
+
+  fn replace_builtin_ident(
+    &mut self,
+    caller: &mut Expr,
+    builtin_member: &str,
+  ) -> Option<&DollarRef> {
+    let e = match caller {
+      Expr::MethodCall(ExprMethodCall { receiver, method, args, .. })
+        if args.is_empty() && (method == "shallow" || method == "silent") =>
+      {
+        &mut **receiver
+      }
+      e => e,
+    };
+
+    let Expr::Macro(m) = e else { return None };
+    let DollarMacro { name: host, .. } = parse_clean_dollar_macro(&m.mac)?;
+    let builtin_name = ribir_suffix_variable(&host, builtin_member);
+    let builtin_member = Ident::new(builtin_member, host.span());
+
+    // When a builtin widget captured by a `move |_| {...}` closure, we need split
+    // the builtin widget from the `FatObj` so we only capture the used builtin
+    // part.
+    m.mac.tokens = if self.in_capture > 0 {
+      builtin_name.to_token_stream()
+    } else {
+      quote_spanned! { host.span() => #host.#builtin_member(ctx!()) }
+    };
+    self.refs.push(DollarRef {
+      name: builtin_name,
+      builtin_shadow: Some(parse_quote! { #host.#builtin_member(ctx!()) }),
+    });
+    self.last()
+  }
+}
+
+fn parse_clean_dollar_macro(mac: &Macro) -> Option<DollarMacro> {
+  if mac.path.is_ident(KW_DOLLAR_STR) {
+    // parse fail may occur because the macro is already fold by `DollarRefs`.
+    mac.parse_body::<DollarMacro>().ok()
+  } else {
+    None
+  }
+}
+
+impl std::ops::Deref for DollarRefs {
+  type Target = [DollarRef];
+  fn deref(&self) -> &Self::Target { &self.refs }
+}
+
+struct DollarMacro {
+  _dollar: Dollar,
+  name: Ident,
+}
+
+impl Parse for DollarMacro {
+  fn parse(input: ParseStream) -> syn::Result<Self> {
+    Ok(Self {
+      _dollar: input.parse()?,
+      name: input.parse()?,
+    })
+  }
+}
diff --git a/macros/src/watch_macro.rs b/macros/src/watch_macro.rs
new file mode 100644
index 000000000..2c4e27b9c
--- /dev/null
+++ b/macros/src/watch_macro.rs
@@ -0,0 +1,42 @@
+use crate::{pipe_macro::fold_expr_as_in_closure, symbol_process::DollarRefs};
+use quote::{quote, ToTokens};
+use syn::{
+  parse::{Parse, ParseStream},
+  Stmt,
+};
+
+pub(crate) struct WatchMacro {
+  refs: DollarRefs,
+  expr: Vec<Stmt>,
+}
+
+impl Parse for WatchMacro {
+  fn parse(input: ParseStream) -> syn::Result<Self> {
+    let (refs, stmts) = fold_expr_as_in_closure(input)?;
+    Ok(Self { refs, expr: stmts })
+  }
+}
+
+impl ToTokens for WatchMacro {
+  fn to_tokens(&self, tokens: &mut proc_macro2::TokenStream) {
+    let Self { refs, expr } = self;
+
+    let upstream = refs.upstream_tokens();
+
+    if refs.used_ctx() {
+      quote! {{
+        #refs
+        let _ctx_handle = ctx!().handle();
+        #upstream
+          .map(move |_| _ctx_handle.with_ctx(|ctx!(): &BuildCtx<'_>| { #(#expr)* }))
+      }}
+      .to_tokens(tokens)
+    } else {
+      quote! {{
+        #refs
+        #upstream.map(move |_| { #(#expr)* })
+      }}
+      .to_tokens(tokens)
+    }
+  }
+}
diff --git a/macros/src/widget_macro/code_gen.rs b/macros/src/widget_macro/code_gen.rs
index 913a1fff4..78c563765 100644
--- a/macros/src/widget_macro/code_gen.rs
+++ b/macros/src/widget_macro/code_gen.rs
@@ -86,7 +86,7 @@ pub(crate) fn gen_assign_watch(input: TokenStream, ctx: &mut VisitCtx) -> proc_m
     watch_expr.used_name_info.state_refs_tokens(tokens);
     watch_expr.to_tokens(tokens);
   });
-  quote_spanned!(watch_expr.span() => AssignObservable::new(#value, #tokens)).into()
+  quote_spanned!(watch_expr.span() => Pipe::new(#value, #tokens.box_it())).into()
 }
 
 pub(crate) fn gen_prop_macro(
diff --git a/macros/src/widget_macro/visit_mut.rs b/macros/src/widget_macro/visit_mut.rs
index 10e8257ea..062031e85 100644
--- a/macros/src/widget_macro/visit_mut.rs
+++ b/macros/src/widget_macro/visit_mut.rs
@@ -440,7 +440,7 @@ impl VisitCtx {
                 let field_subject = ribir_suffix_variable(&f.member, "subject");
                 let field_value = ribir_suffix_variable(&f.member, "init");
                 let pre_def = quote_spanned! { expr.span() =>
-                  let (#field_value, #field_subject) = AssignObservable::unzip(#expr);
+                  let (#field_value, #field_subject) = Pipe::unzip(#expr);
                 };
                 expr.expr = parse_quote_spanned! { expr.span() => #field_value };
                 let guards = guard_vec_ident();
diff --git a/ribir/src/app.rs b/ribir/src/app.rs
index 78e5e75fe..8cd99193a 100644
--- a/ribir/src/app.rs
+++ b/ribir/src/app.rs
@@ -53,6 +53,8 @@ impl App {
     let wnd = Window::new(root, Box::new(shell_wnd));
     let id = wnd.id();
     AppCtx::windows().borrow_mut().insert(id, wnd);
+    AppCtx::get_window(id).unwrap().emit_events();
+
     if app.active_wnd.is_none() {
       app.active_wnd = Some(id);
     }
diff --git a/tests/Cargo.toml b/tests/Cargo.toml
index b3079431c..9a3d45208 100644
--- a/tests/Cargo.toml
+++ b/tests/Cargo.toml
@@ -16,9 +16,8 @@ version.workspace = true
 [dev-dependencies]
 paste.workspace = true
 ribir = {path = "../ribir", features = ["material", "widgets"]}
-ribir_geom = {path = "../geom"}
-
 ribir_dev_helper = {path = "../dev-helper"}
+ribir_geom = {path = "../geom"}
 trybuild.workspace = true
 winit.workspace = true
 
@@ -27,8 +26,8 @@ name = "compile_message"
 path = "compile_message.rs"
 
 [[test]]
-name = "code_gen_logic"
-path = "code_gen_test.rs"
+name = "rdl_macro_test"
+path = "rdl_macro_test.rs"
 
 [[test]]
 name = "animations_syntax"
diff --git a/tests/compile_msg/declare/ctx_only_allow_in_init_and_finally_fail.stderr b/tests/compile_msg/declare/ctx_only_allow_in_init_and_finally_fail.stderr
index 9285dcbf2..3b17b95cc 100644
--- a/tests/compile_msg/declare/ctx_only_allow_in_init_and_finally_fail.stderr
+++ b/tests/compile_msg/declare/ctx_only_allow_in_init_and_finally_fail.stderr
@@ -1,5 +1,5 @@
-error[E0425]: cannot find value `ctx` in this scope
+error[E0423]: expected value, found macro `ctx`
   --> compile_msg/declare/ctx_only_allow_in_init_and_finally_fail.rs:31:48
    |
 31 |       size: ZERO_SIZE, background: Palette::of(ctx).primary()
-   |                                                ^^^ not found in this scope
+   |                                                ^^^ not a value
diff --git a/tests/compile_msg/declare/dollar_position_fail.rs b/tests/compile_msg/declare/dollar_position_fail.rs
new file mode 100644
index 000000000..de662418b
--- /dev/null
+++ b/tests/compile_msg/declare/dollar_position_fail.rs
@@ -0,0 +1,11 @@
+use ribir::prelude::*;
+
+fn main() {
+  let not_identify_after_dollar = fn_widget! {
+    rdl! { Row { x: $1 } }
+  };
+
+  let field_name_not_support_dollar = fn_widget! {
+    rdl! { Row { $x: 1} }
+  };
+}
diff --git a/tests/compile_msg/declare/dollar_position_fail.stderr b/tests/compile_msg/declare/dollar_position_fail.stderr
new file mode 100644
index 000000000..25ff4b875
--- /dev/null
+++ b/tests/compile_msg/declare/dollar_position_fail.stderr
@@ -0,0 +1,13 @@
+error: Syntax error: expected an identifier after `$`
+ --> compile_msg/declare/dollar_position_fail.rs:5:22
+  |
+5 |     rdl! { Row { x: $1 } }
+  |                      ^
+
+error: expected `,`
+ --> compile_msg/declare/dollar_position_fail.rs:9:5
+  |
+9 |     rdl! { Row { $x: 1} }
+  |     ^^^^^^^^^^^^^^^^^^^^^
+  |
+  = note: this error originates in the macro `rdl` (in Nightly builds, run with -Z macro-backtrace for more info)
diff --git a/tests/compile_msg/declare/duplicate_id_fail.rs b/tests/compile_msg/declare/duplicate_id_fail.rs
deleted file mode 100644
index 89402c0a4..000000000
--- a/tests/compile_msg/declare/duplicate_id_fail.rs
+++ /dev/null
@@ -1,66 +0,0 @@
-use ribir::prelude::*;
-
-fn main() {
-  let _id_must_be_unique_err = widget! {
-    BoxDecoration {
-      id: same_id,
-      background: Some(Color::RED.into()),
-      SizedBox {
-        id: same_id,
-        size: Size::zero(),
-      }
-    }
-  };
-
-  let _id_conflict_with_states_err = widget! {
-    states { same_id: Stateful::new(0) }
-    BoxDecoration {
-      id: same_id,
-      background: Some(Color::RED.into()),
-    }
-  };
-
-  let _inner_id_conflict_outside_err = widget! {
-    BoxDecoration {
-      id: same_id,
-      background: Some(Color::RED.into()),
-      DynWidget {
-        dyns: widget!{
-          SizedBox { id: same_id, size: Size::zero() }
-        }
-      }
-    }
-  };
-
-  let _inner_id_conflict_outside_states_err = widget! {
-    states { same_id: Stateful::new(0),}
-    DynWidget {
-      dyns: widget!{
-        SizedBox { id: same_id, size: Size::zero(),}
-      }
-    }
-  };
-
-  let _inner_states_id_conflict_outside_states_err = widget! {
-    states { same_id: Stateful::new(0),}
-    DynWidget {
-      dyns: widget!{
-        states { same_id: Stateful::new(0),}
-        SizedBox { size: Size::zero(),}
-      }
-    }
-  };
-
-  let _inner_states_id_conflict_outside_id_err = widget! {
-    BoxDecoration {
-      id: same_id,
-      background: Some(Color::RED.into()),
-      DynWidget {
-        dyns: widget!{
-          states { same_id: Stateful::new(0),}
-          SizedBox { size: Size::zero(),}
-        }
-      }
-    }
-  };
-}
diff --git a/tests/compile_msg/declare/duplicate_id_fail.stderr b/tests/compile_msg/declare/duplicate_id_fail.stderr
deleted file mode 100644
index b3f865d0c..000000000
--- a/tests/compile_msg/declare/duplicate_id_fail.stderr
+++ /dev/null
@@ -1,64 +0,0 @@
-error: Same `id: same_id` assign to multiple objects, id must be unique.
- --> compile_msg/declare/duplicate_id_fail.rs:6:11
-  |
-6 |       id: same_id,
-  |           ^^^^^^^
-...
-9 |         id: same_id,
-  |             ^^^^^^^
-
-error: Same `id: same_id` assign to multiple objects, id must be unique.
-  --> compile_msg/declare/duplicate_id_fail.rs:16:14
-   |
-16 |     states { same_id: Stateful::new(0) }
-   |              ^^^^^^^
-17 |     BoxDecoration {
-18 |       id: same_id,
-   |           ^^^^^^^
-
-error: Same `id: same_id` assign to multiple objects, id must be unique.
-  --> compile_msg/declare/duplicate_id_fail.rs:25:11
-   |
-25 |       id: same_id,
-   |           ^^^^^^^
-...
-29 |           SizedBox { id: same_id, size: Size::zero() }
-   |                          ^^^^^^^
-
-error: Same `id: same_id` assign to multiple objects, id must be unique.
-  --> compile_msg/declare/duplicate_id_fail.rs:36:14
-   |
-36 |     states { same_id: Stateful::new(0),}
-   |              ^^^^^^^
-...
-39 |         SizedBox { id: same_id, size: Size::zero(),}
-   |                        ^^^^^^^
-
-error: Same `id: same_id` assign to multiple objects, id must be unique.
-  --> compile_msg/declare/duplicate_id_fail.rs:45:14
-   |
-45 |     states { same_id: Stateful::new(0),}
-   |              ^^^^^^^
-...
-48 |         states { same_id: Stateful::new(0),}
-   |                  ^^^^^^^
-
-error: Same `id: same_id` assign to multiple objects, id must be unique.
-  --> compile_msg/declare/duplicate_id_fail.rs:56:11
-   |
-56 |       id: same_id,
-   |           ^^^^^^^
-...
-60 |           states { same_id: Stateful::new(0),}
-   |                    ^^^^^^^
-
-error[E0282]: type annotations needed
- --> compile_msg/declare/duplicate_id_fail.rs:4:7
-  |
-4 |   let _id_must_be_unique_err = widget! {
-  |       ^^^^^^^^^^^^^^^^^^^^^^
-  |
-help: consider giving `_id_must_be_unique_err` an explicit type
-  |
-4 |   let _id_must_be_unique_err: /* Type */ = widget! {
-  |                             ++++++++++++
diff --git a/tests/declare_builder_test.rs b/tests/declare_builder_test.rs
index 76c42357f..2621f8cd9 100644
--- a/tests/declare_builder_test.rs
+++ b/tests/declare_builder_test.rs
@@ -36,26 +36,26 @@ fn panic_if_miss_require_field() {
 
 #[test]
 
-fn empty_default_field() {
+fn default_field() {
   #[derive(Declare)]
-  struct T {
+  struct DefaultDeclare {
     #[declare(default)]
     a: f32,
   }
 
-  let t = <T as Declare>::declare_builder().build(dummy_ctx());
+  let t = <DefaultDeclare as Declare>::declare_builder().build(dummy_ctx());
   assert_eq!(t.a, 0.);
 }
 
 #[test]
 
-fn string_default_field() {
+fn default_field_with_value() {
   #[derive(Declare)]
-  struct T {
+  struct DefaultWithValue {
     #[declare(default = "hi!")]
     text: &'static str,
   }
 
-  let t = <T as Declare>::declare_builder().build(dummy_ctx());
+  let t = <DefaultWithValue as Declare>::declare_builder().build(dummy_ctx());
   assert_eq!(t.text, "hi!");
 }
diff --git a/tests/code_gen_test.rs b/tests/rdl_macro_test.rs
similarity index 59%
rename from tests/code_gen_test.rs
rename to tests/rdl_macro_test.rs
index a3da5c6dc..f783c5b69 100644
--- a/tests/code_gen_test.rs
+++ b/tests/rdl_macro_test.rs
@@ -3,6 +3,387 @@ use ribir_dev_helper::*;
 use std::{cell::Cell, rc::Rc, time::Duration};
 use winit::event::{DeviceId, ElementState, MouseButton, WindowEvent};
 
+fn simplest_leaf_rdl() -> impl Into<Widget> {
+  fn_widget! {
+    rdl! { SizedBox { size: Size::new(500.,500.) } }
+  }
+}
+widget_layout_test!(simplest_leaf_rdl, width == 500., height == 500.,);
+
+fn with_child_rdl() -> impl Into<Widget> {
+  fn_widget! {
+    rdl!{
+      Row {
+        rdl!{ SizedBox { size: Size::new(500.,500.)  } }
+      }
+    }
+  }
+}
+widget_layout_test!(with_child_rdl, width == 500., height == 500.,);
+
+fn with_builtin_child_rdl() -> impl Into<Widget> {
+  fn_widget! {
+    rdl! { SizedBox {
+      size: Size::new(500.,500.),
+      margin: EdgeInsets::all(10.)
+    }}
+  }
+}
+widget_layout_test!(with_builtin_child_rdl, width == 520., height == 520.,);
+
+fn rdl_with_child() -> impl Into<Widget> {
+  fn_widget! {
+    let single_p = rdl!{ SizedBox { size: Size::new(500.,500.)  }};
+    rdl! { $single_p { rdl! { Void } } }
+  }
+}
+widget_layout_test!(rdl_with_child, width == 500., height == 500.,);
+
+fn single_rdl_has_builtin_with_child() -> impl Into<Widget> {
+  fn_widget! {
+    let single_p = rdl!{ SizedBox {
+      size: Size::new(500.,500.),
+      margin: EdgeInsets::all(10.)
+    }};
+    rdl! { $single_p { rdl! { Void } } }
+  }
+}
+widget_layout_test!(
+  single_rdl_has_builtin_with_child,
+  width == 520.,
+  height == 520.,
+);
+
+fn multi_child_rdl_has_builtin_with_child() -> impl Into<Widget> {
+  fn_widget! {
+    let multi_p = rdl! { Flex {
+      margin: EdgeInsets::all(10.)
+    } };
+    rdl! { $multi_p { rdl!{ Void } } }
+  }
+}
+widget_layout_test!(
+  multi_child_rdl_has_builtin_with_child,
+  width == 20.,
+  height == 20.,
+);
+
+fn compose_child_rdl_has_builtin_with_child() -> impl Into<Widget> {
+  fn_widget! {
+    let multi_p = rdl!{ Row { margin: EdgeInsets::all(10.) }};
+    rdl! { $multi_p { rdl!{ Void {} }} }
+  }
+}
+widget_layout_test!(
+  compose_child_rdl_has_builtin_with_child,
+  width == 20.,
+  height == 20.,
+);
+
+fn access_rdl_widget() -> impl Into<Widget> {
+  fn_widget! {
+    let mut b = rdl! { SizedBox {size: Size::new(500.,500.)}};
+    rdl! { Row {
+      rdl! { SizedBox { size: $b.size } }
+      rdl! { b }
+    }}
+  }
+}
+widget_layout_test!(access_rdl_widget, width == 1000., height == 500.,);
+
+fn access_builtin_rdl_widget() -> impl Into<Widget> {
+  fn_widget! {
+    let mut b = rdl! { SizedBox {
+      size: Size::new(100.,100.),
+      margin: EdgeInsets::all(10.)
+    }};
+
+    rdl!{
+      Row {
+        rdl! {
+          SizedBox {
+            size: $b.size,
+            margin: $b.margin,
+          }
+        }
+        rdl! { b }
+      }
+    }
+  }
+}
+widget_layout_test!(access_builtin_rdl_widget, width == 240., height == 120.,);
+
+fn dollar_as_rdl_parent() -> impl Into<Widget> {
+  fn_widget! {
+    let b = rdl! {SizedBox { size: Size::new(500.,500.) }};
+    rdl! { $b { rdl! { Void {}} } }
+  }
+}
+widget_layout_test!(dollar_as_rdl_parent, width == 500., height == 500.,);
+
+fn dollar_as_middle_parent() -> impl Into<Widget> {
+  fn_widget! {
+    let b = rdl! { SizedBox { size: Size::new(500.,500.) }};
+    rdl! { Row { rdl! { $b { rdl! { Void {} } } } } }
+  }
+}
+widget_layout_test!(dollar_as_middle_parent, width == 500., height == 500.,);
+
+fn pipe_as_field_value() -> impl Into<Widget> {
+  let size = Stateful::new(Size::zero());
+  let size2 = size.clone();
+  let w = fn_widget! {
+    rdl! { SizedBox { size: pipe!(*$size2) }}
+  };
+  *size.state_ref() = Size::new(100., 100.);
+  w
+}
+widget_layout_test!(pipe_as_field_value, width == 100., height == 100.,);
+
+fn pipe_as_builtin_field_value() -> impl Into<Widget> {
+  let margin = Stateful::new(EdgeInsets::all(0.));
+  let margin2 = margin.clone();
+
+  let w = fn_widget! {
+    rdl! { SizedBox {
+      size: Size::zero(),
+      margin: pipe!(*$margin2)
+    }}
+  };
+  *margin.state_ref() = EdgeInsets::all(50.);
+  w
+}
+widget_layout_test!(pipe_as_builtin_field_value, width == 100., height == 100.,);
+
+fn pipe_with_ctx() -> impl Into<Widget> {
+  let scale = Stateful::new(1.);
+  let scale2 = scale.clone();
+  let w = fn_widget! {
+    rdl! { SizedBox {
+      size: pipe!(IconSize::of(ctx!()).tiny * *$scale)
+    }}
+  };
+  *scale2.state_ref() = 2.;
+  w
+}
+widget_layout_test!(pipe_with_ctx, width == 36., height == 36.,);
+
+fn pipe_with_builtin_field() -> impl Into<Widget> {
+  fn_widget! {
+    let mut box1 = @SizedBox { size: Size::zero(), margin: EdgeInsets::all(1.) };
+    let mut box2 = @SizedBox { size: $box1.size, margin: pipe!($box1.margin) };
+    @Row {
+      @{ box1 }
+      @{ box2 }
+    }
+  }
+}
+widget_layout_test!(pipe_with_builtin_field, width == 4., height == 2.,);
+
+fn capture_closure_used_ctx() -> impl Into<Widget> {
+  fn_widget! {
+    let mut size_box = @SizedBox { size: ZERO_SIZE };
+    @ $size_box {
+      on_mounted: move |_| $size_box.size = IconSize::of(ctx!()).tiny
+    }
+  }
+}
+widget_layout_test!(capture_closure_used_ctx, width == 18., height == 18.,);
+
+#[test]
+fn pipe_single_parent() {
+  let _guard = unsafe { AppCtx::new_lock_scope() };
+
+  let outside_blank = Stateful::new(true);
+  let outside_blank2 = outside_blank.clone();
+  let w = fn_widget! {
+    let edges = EdgeInsets::all(5.);
+    let blank = pipe! {
+      if *$outside_blank {
+        Box::new(rdl! { Margin { margin: edges } }) as Box<dyn BoxedSingleParent>
+      } else {
+        Box::new(rdl! { Padding { padding: edges } }) as Box<dyn BoxedSingleParent>
+      }
+    };
+    rdl! {
+      $blank {
+        rdl!{ SizedBox { size: Size::new(100., 100.) } }
+      }
+    }
+  };
+
+  let mut wnd = TestWindow::new(w);
+  wnd.draw_frame();
+  assert_layout_result_by_path!(wnd, { path = [0], width == 110., height == 110., });
+
+  *outside_blank2.state_ref() = false;
+  wnd.draw_frame();
+  assert_layout_result_by_path!(wnd, { path = [0], width == 100., height == 100., });
+}
+
+#[test]
+fn pipe_multi_parent() {
+  let _guard = unsafe { AppCtx::new_lock_scope() };
+
+  let stack_or_flex = Stateful::new(true);
+  let stack_or_flex2 = stack_or_flex.clone();
+  let w = fn_widget! {
+    let container = pipe! {
+      let c: Box<dyn BoxMultiParent> = if *$stack_or_flex {
+        Box::new(rdl! { Stack { } })
+      } else {
+        Box::new(rdl! { Flex { } })
+      };
+      c
+    };
+
+    rdl! {
+      $container {
+        rdl!{ SizedBox { size: Size::new(100., 100.) } }
+        rdl!{ SizedBox { size: Size::new(100., 100.) } }
+      }
+    }
+  };
+
+  let mut wnd = TestWindow::new(w);
+  wnd.draw_frame();
+  assert_layout_result_by_path!(wnd, { path = [0], width == 100., height == 100., });
+
+  *stack_or_flex2.state_ref() = false;
+  wnd.draw_frame();
+  assert_layout_result_by_path!(wnd, { path = [0], width == 200., height == 100., });
+}
+
+#[test]
+fn pipe_as_child() {
+  let _guard = unsafe { AppCtx::new_lock_scope() };
+
+  let box_or_not = Stateful::new(true);
+  let box_or_not2 = box_or_not.clone();
+  let w = fn_widget! {
+    let blank: Pipe<Widget> = pipe!{
+      if *$box_or_not2 {
+        rdl! { SizedBox { size: Size::new(100., 100.) } }.into()
+      } else {
+        Void.into()
+      }
+    };
+    rdl! { Stack { rdl! { blank } } }
+  };
+
+  let mut wnd = TestWindow::new(w);
+  wnd.draw_frame();
+  assert_layout_result_by_path!(wnd, { path = [0], width == 100., height == 100., });
+
+  *box_or_not.state_ref() = false;
+
+  wnd.draw_frame();
+  assert_layout_result_by_path!(wnd, { path = [0], width == 0., height == 0., });
+}
+
+#[test]
+fn pipe_as_multi_child() {
+  let _guard = unsafe { AppCtx::new_lock_scope() };
+
+  let fix_box = SizedBox { size: Size::new(100., 100.) };
+  let cnt = Stateful::new(0);
+  let cnt2 = cnt.clone();
+  let w = fn_widget! {
+    let boxes = pipe! {
+      Multi::new((0..*$cnt).map(|_| fix_box.clone()).collect::<Vec<_>>())
+    };
+    rdl! { Flex { rdl!{ boxes } } }
+  };
+
+  let mut wnd = TestWindow::new(w);
+  wnd.draw_frame();
+  assert_layout_result_by_path!(wnd, { path = [0], width == 0., height == 0., });
+
+  *cnt2.state_ref() = 3;
+  wnd.draw_frame();
+  assert_layout_result_by_path!(wnd, { path = [0], width == 300., height == 100., });
+}
+
+fn at_in_widget_macro() -> impl Into<Widget> {
+  fn_widget! {
+    @SizedBox { size: Size::new(100., 100.) }
+  }
+}
+widget_layout_test!(at_in_widget_macro, width == 100., height == 100.,);
+
+fn at_as_variable_in_widget() -> impl Into<Widget> {
+  fn_widget! {
+    let size = Size::new(100., 100.);
+    let row = @Row {};
+    @ $row {
+      // @ in @
+      @SizedBox { size }
+      // `rdl!` in @
+      rdl! { SizedBox { size } }
+    }
+  }
+}
+widget_layout_test!(at_as_variable_in_widget, width == 200., height == 100.,);
+
+fn at_as_variable_in_rdl() -> impl Into<Widget> {
+  fn_widget! {
+    let size = Size::new(100., 100.);
+    let row = @Row {};
+    rdl! {
+      $row {
+        @SizedBox { size }
+        @SizedBox { size }
+      }
+    }
+  }
+}
+widget_layout_test!(at_as_variable_in_rdl, width == 200., height == 100.,);
+
+fn access_builtin_field_by_dollar() -> impl Into<Widget> {
+  fn_widget! {
+    let size = Size::new(100., 100.);
+    let mut box1 = @SizedBox { size, margin: EdgeInsets::all(10.) };
+    let box2 = @SizedBox { size, margin: $box1.margin };
+    @Row { @ { box1 } @{ box2 } }
+  }
+}
+widget_layout_test!(
+  access_builtin_field_by_dollar,
+  width == 240.,
+  height == 120.,
+);
+
+#[test]
+fn closure_in_fn_widget_capture() {
+  let _guard = unsafe { AppCtx::new_lock_scope() };
+
+  let hi_res = Stateful::new(CowArc::borrowed(""));
+  let hi_res2 = hi_res.clone();
+  let w = fn_widget! {
+    let mut text = @ Text { text: "hi" };
+    let on_mounted = move |_: &'_ mut LifecycleEvent<'_>| {
+      *$hi_res =$text.text.clone()
+    };
+    @ $text { on_mounted }
+  };
+
+  let mut wnd = TestWindow::new(w);
+  wnd.draw_frame();
+
+  assert_eq!(&**hi_res2.state_ref(), "hi");
+}
+
+fn at_embed_in_expression() -> impl Into<Widget> {
+  fn_widget! {
+    @Row {
+      @{ Multi::new((0..3).map(|_| {
+          @SizedBox { size: Size::new(100., 100.) }
+      }))}
+    }
+  }
+}
+widget_layout_test!(at_embed_in_expression, width == 300., height == 100.,);
+
 #[test]
 fn declare_smoke() {
   let _guard = unsafe { AppCtx::new_lock_scope() };
@@ -11,7 +392,7 @@ fn declare_smoke() {
     SizedBox {
       size: Size::new(500.,500.),
       background: Color::RED,
-     }
+    }
   };
 }
 
diff --git a/widgets/src/avatar.rs b/widgets/src/avatar.rs
index 0e0c053b5..b9f7233ff 100644
--- a/widgets/src/avatar.rs
+++ b/widgets/src/avatar.rs
@@ -22,7 +22,7 @@ use ribir_core::prelude::*;
 ///   }
 /// };
 /// ```
-#[derive(Declare, Default, Clone)]
+#[derive(Declare, Declare2, Default, Clone)]
 pub struct Avatar {
   #[declare(default=Palette::of(ctx).primary())]
   pub color: Color,
diff --git a/widgets/src/buttons/filled_button.rs b/widgets/src/buttons/filled_button.rs
index 2d41698cc..fc1247d28 100644
--- a/widgets/src/buttons/filled_button.rs
+++ b/widgets/src/buttons/filled_button.rs
@@ -73,7 +73,7 @@ impl ComposeDecorator for FilledButtonDecorator {
 ///   }
 /// };
 /// ```
-#[derive(Declare, Default)]
+#[derive(Declare, Declare2, Default)]
 pub struct FilledButton {
   #[declare(default=Palette::of(ctx).primary())]
   color: Color,
diff --git a/widgets/src/checkbox.rs b/widgets/src/checkbox.rs
index 3fd5bf85f..67d3d5981 100644
--- a/widgets/src/checkbox.rs
+++ b/widgets/src/checkbox.rs
@@ -44,8 +44,8 @@ impl Checkbox {
 
 #[derive(Template)]
 pub enum CheckboxTemplate {
-  Before(WidgetPair<Leading, State<Label>>),
-  After(WidgetPair<Trailing, State<Label>>),
+  Before(SinglePair<Leading, State<Label>>),
+  After(SinglePair<Trailing, State<Label>>),
 }
 
 impl ComposeDecorator for CheckBoxDecorator {
@@ -77,7 +77,7 @@ impl Checkbox {
     .into()
   }
 
-  fn label(label: &State<Label>, label_color: Brush, text_style: CowArc<TextStyle>) -> Widget {
+  fn label(mut label: State<Label>, label_color: Brush, text_style: CowArc<TextStyle>) -> Widget {
     let label = label.clone();
     widget! {
       states { label: label.into_readonly() }
@@ -115,16 +115,16 @@ impl ComposeChild for Checkbox {
           let label_color = label_color.clone();
           child.map_or(
             Checkbox::icon(no_watch!(this.clone_stateful()), icon_size),
-            |child| widget! {
+            |mut child| widget! {
               Row {
-                Multi::new(match &child {
+                Multi::new(match &mut child {
                   CheckboxTemplate::Before(w) => [
-                    Checkbox::label(&w.child, label_color.clone(), label_style.clone()),
+                    Checkbox::label(w.child.clone(), label_color.clone(), label_style.clone()),
                     Checkbox::icon(this.clone_stateful(), icon_size),
                   ],
                   CheckboxTemplate::After(w) => [
                     Checkbox::icon(this.clone_stateful(), icon_size),
-                    Checkbox::label(&w.child, label_color.clone(), label_style.clone()),
+                    Checkbox::label(w.child.clone(), label_color.clone(), label_style.clone()),
                   ],
                 })
               }
diff --git a/widgets/src/common_widget.rs b/widgets/src/common_widget.rs
index fff052491..8dc6ad721 100644
--- a/widgets/src/common_widget.rs
+++ b/widgets/src/common_widget.rs
@@ -1,14 +1,14 @@
 use ribir_core::prelude::*;
 
-#[derive(Default, Declare, SingleChild)]
+#[derive(Default, Declare, Declare2, SingleChild)]
 pub struct Leading;
 
-#[derive(Default, Declare, SingleChild)]
+#[derive(Default, Declare, Declare2, SingleChild)]
 pub struct Trailing;
 
-pub type TrailingText = WidgetPair<Trailing, CowArc<str>>;
+pub type TrailingText = SinglePair<Trailing, CowArc<str>>;
 
-pub type LeadingText = WidgetPair<Leading, CowArc<str>>;
+pub type LeadingText = SinglePair<Leading, CowArc<str>>;
 
 impl TmlFlag for Leading {}
 impl TmlFlag for Trailing {}
diff --git a/widgets/src/divider.rs b/widgets/src/divider.rs
index 7f185d863..3c9fcb45d 100644
--- a/widgets/src/divider.rs
+++ b/widgets/src/divider.rs
@@ -36,7 +36,7 @@ use ribir_core::{impl_query_self_only, prelude::*};
 ///   }
 /// };
 /// ```
-#[derive(Default, Declare)]
+#[derive(Default, Declare, Declare2)]
 pub struct Divider {
   #[declare(default = 1.)]
   // Extent of divider
diff --git a/widgets/src/icon.rs b/widgets/src/icon.rs
index 6402cf6ed..0389e11d2 100644
--- a/widgets/src/icon.rs
+++ b/widgets/src/icon.rs
@@ -5,7 +5,7 @@ use ribir_core::prelude::*;
 /// classic frameworks, it's not draw anything and not require you to
 /// provide image or font fot it to draw, it just center align and fit size of
 /// its child. So you can declare any widget as its child to display as a icon.
-#[derive(Declare, Default, Clone)]
+#[derive(Declare, Declare2, Default, Clone, Copy)]
 pub struct Icon {
   #[declare(default = IconSize::of(ctx).small)]
   pub size: Size,
@@ -29,3 +29,29 @@ impl ComposeChild for Icon {
     .into()
   }
 }
+
+macro_rules! define_fixed_size_icon {
+  ($($name: ident, $field: ident),*) => {
+    $(
+      #[derive(Declare2, Default, Clone, Copy)]
+      pub struct $name;
+
+      impl ComposeChild for $name {
+        type Child = Widget;
+        fn compose_child(_: State<Self>, child: Self::Child) -> Widget {
+          fn_widget! {
+            let icon = @Icon { size: IconSize::of(ctx).$field };
+            @ $icon { @ { child } }
+          }
+          .into()
+        }
+      }
+    )*
+  };
+}
+
+define_fixed_size_icon!(TinyIcon, tiny);
+define_fixed_size_icon!(SmallIcon, small);
+define_fixed_size_icon!(MediumIcon, medium);
+define_fixed_size_icon!(LargeIcon, large);
+define_fixed_size_icon!(HugeIcon, huge);
diff --git a/widgets/src/input/handle.rs b/widgets/src/input/handle.rs
index 520a63db1..c1a8aafcb 100644
--- a/widgets/src/input/handle.rs
+++ b/widgets/src/input/handle.rs
@@ -1,7 +1,7 @@
 use std::ops::{Deref, DerefMut};
 
 use ribir_core::prelude::{
-  AppCtx, CharsEvent, GraphemeCursor, KeyboardEvent, StateRef, TextWriter, VirtualKeyCode,
+  AppCtx, CharsEvent, GraphemeCursor, KeyboardEvent, StatefulRef, TextWriter, VirtualKeyCode,
 };
 
 #[macro_export]
@@ -50,7 +50,7 @@ macro_rules! declare_writer {
 declare_writer!(InputWriter, TextEditorArea);
 use super::TextEditorArea;
 impl TextEditorArea {
-  pub(crate) fn edit_handle(this: &mut StateRef<TextEditorArea>, event: &mut CharsEvent) {
+  pub(crate) fn edit_handle(this: &mut StatefulRef<TextEditorArea>, event: &mut CharsEvent) {
     if event.common.with_command_key() {
       return;
     }
@@ -67,7 +67,7 @@ impl TextEditorArea {
     }
   }
 
-  pub(crate) fn key_handle(this: &mut StateRef<TextEditorArea>, event: &mut KeyboardEvent) {
+  pub(crate) fn key_handle(this: &mut StatefulRef<TextEditorArea>, event: &mut KeyboardEvent) {
     let mut deal = false;
     if event.with_command_key() {
       deal = key_with_command(this, event)
@@ -78,7 +78,7 @@ impl TextEditorArea {
   }
 }
 
-fn key_with_command(this: &mut StateRef<TextEditorArea>, event: &mut KeyboardEvent) -> bool {
+fn key_with_command(this: &mut StatefulRef<TextEditorArea>, event: &mut KeyboardEvent) -> bool {
   if !event.with_command_key() {
     return false;
   }
@@ -111,7 +111,7 @@ fn key_with_command(this: &mut StateRef<TextEditorArea>, event: &mut KeyboardEve
   }
 }
 
-fn single_key(this: &mut StateRef<TextEditorArea>, key: &mut KeyboardEvent) -> bool {
+fn single_key(this: &mut StatefulRef<TextEditorArea>, key: &mut KeyboardEvent) -> bool {
   match key.key {
     VirtualKeyCode::NumpadEnter | VirtualKeyCode::Return => {
       if this.multi_line {
diff --git a/widgets/src/input/text_selectable.rs b/widgets/src/input/text_selectable.rs
index 4e4b0b246..88a393698 100644
--- a/widgets/src/input/text_selectable.rs
+++ b/widgets/src/input/text_selectable.rs
@@ -103,7 +103,11 @@ impl TextSelectable {
   fn selected_rect(&self) -> Vec<Rect> { self.helper.selection(&self.caret.select_range()) }
 }
 
-fn key_handle(this: &mut StateRef<TextSelectable>, text: &CowArc<str>, event: &mut KeyboardEvent) {
+fn key_handle(
+  this: &mut StatefulRef<TextSelectable>,
+  text: &CowArc<str>,
+  event: &mut KeyboardEvent,
+) {
   let mut deal = false;
   if event.with_command_key() {
     deal = deal_with_command(this, text, event);
@@ -115,7 +119,7 @@ fn key_handle(this: &mut StateRef<TextSelectable>, text: &CowArc<str>, event: &m
 }
 
 fn deal_with_command(
-  this: &mut StateRef<TextSelectable>,
+  this: &mut StatefulRef<TextSelectable>,
   text: &CowArc<str>,
   event: &mut KeyboardEvent,
 ) -> bool {
@@ -146,7 +150,11 @@ fn is_move_by_word(event: &KeyboardEvent) -> bool {
   return event.with_ctrl_key();
 }
 
-fn deal_with_selection(this: &mut StateRef<TextSelectable>, text: &str, event: &mut KeyboardEvent) {
+fn deal_with_selection(
+  this: &mut StatefulRef<TextSelectable>,
+  text: &str,
+  event: &mut KeyboardEvent,
+) {
   let old_caret = this.caret;
   match event.key {
     VirtualKeyCode::Left => {
diff --git a/widgets/src/layout/column.rs b/widgets/src/layout/column.rs
index 3da998612..f09551c1a 100644
--- a/widgets/src/layout/column.rs
+++ b/widgets/src/layout/column.rs
@@ -1,7 +1,7 @@
 use super::{flex::*, Direction};
 use ribir_core::prelude::*;
 
-#[derive(Default, Declare, Clone)]
+#[derive(Default, Declare, Declare2, Clone)]
 pub struct Column {
   #[declare(default)]
   pub reverse: bool,
diff --git a/widgets/src/layout/flex.rs b/widgets/src/layout/flex.rs
index dfeb0ae6f..3d6e95078 100644
--- a/widgets/src/layout/flex.rs
+++ b/widgets/src/layout/flex.rs
@@ -31,7 +31,7 @@ pub enum JustifyContent {
   SpaceEvenly,
 }
 
-#[derive(Default, MultiChild, Declare, Clone, PartialEq)]
+#[derive(Default, MultiChild, Declare, Declare2, Clone, PartialEq)]
 pub struct Flex {
   /// Reverse the main axis.
   #[declare(default)]
diff --git a/widgets/src/layout/row.rs b/widgets/src/layout/row.rs
index c464e6264..241281680 100644
--- a/widgets/src/layout/row.rs
+++ b/widgets/src/layout/row.rs
@@ -1,7 +1,7 @@
 use super::{flex::*, Direction};
 use ribir_core::prelude::*;
 
-#[derive(Default, Declare, Clone)]
+#[derive(Default, Declare, Declare2, Clone)]
 pub struct Row {
   #[declare(default)]
   pub reverse: bool,
diff --git a/widgets/src/layout/sized_box.rs b/widgets/src/layout/sized_box.rs
index bee0862f0..ffa93153c 100644
--- a/widgets/src/layout/sized_box.rs
+++ b/widgets/src/layout/sized_box.rs
@@ -4,7 +4,7 @@ use ribir_core::{impl_query_self_only, prelude::*};
 ///
 /// This widget forces its child to have a specific width and/or height
 /// (assuming values are permitted by the parent of this widget).
-#[derive(SingleChild, Declare, Clone)]
+#[derive(SingleChild, Declare, Declare2, Clone)]
 pub struct SizedBox {
   pub size: Size,
 }
diff --git a/widgets/src/layout/stack.rs b/widgets/src/layout/stack.rs
index b799acd2a..8438d82ea 100644
--- a/widgets/src/layout/stack.rs
+++ b/widgets/src/layout/stack.rs
@@ -1,7 +1,7 @@
 use ribir_core::{impl_query_self_only, prelude::*};
 
 /// A widget that overlap children align with left top.
-#[derive(MultiChild, Declare)]
+#[derive(MultiChild, Declare, Declare2)]
 pub struct Stack {
   #[declare(default)]
   fit: StackFit,
diff --git a/widgets/src/lists.rs b/widgets/src/lists.rs
index e327f5dcd..177c1c240 100644
--- a/widgets/src/lists.rs
+++ b/widgets/src/lists.rs
@@ -121,7 +121,7 @@ use ribir_core::prelude::*;
 ///   }
 /// };
 /// ```
-#[derive(Declare)]
+#[derive(Declare, Declare2)]
 pub struct Lists;
 
 #[derive(Declare)]
@@ -353,9 +353,9 @@ impl ComposeChild for ListItem {
   }
 }
 
-#[derive(Declare)]
+#[derive(Declare, Declare2)]
 pub struct ListItem {
-  #[declare(default = 1)]
+  #[declare(default = 1usize)]
   pub line_number: usize,
   #[declare(default = Palette::of(ctx).primary())]
   pub active_background: Color,
diff --git a/widgets/src/scrollbar.rs b/widgets/src/scrollbar.rs
index 032de542f..a5f2bc76e 100644
--- a/widgets/src/scrollbar.rs
+++ b/widgets/src/scrollbar.rs
@@ -101,7 +101,7 @@ impl ComposeChild for HScrollBar {
 
 /// A control widget that enables the user to access vertical parts child that
 /// is larger than the box rect.
-#[derive(Declare, Clone)]
+#[derive(Declare, Declare2, Clone)]
 pub struct VScrollBar {
   /// Scrolled pixels of child content.
   #[declare(default)]
diff --git a/widgets/src/tabs.rs b/widgets/src/tabs.rs
index 75c59e082..0a6260bc8 100644
--- a/widgets/src/tabs.rs
+++ b/widgets/src/tabs.rs
@@ -56,11 +56,11 @@ use ribir_core::prelude::*;
 ///   }
 /// };
 /// ```
-#[derive(Declare, Clone)]
+#[derive(Declare, Declare2, Clone)]
 pub struct Tabs {
   #[declare(default = Position::Top)]
   pub pos: Position,
-  #[declare(default = 0)]
+  #[declare(default)]
   pub cur_idx: usize,
 }
 
@@ -120,7 +120,7 @@ pub struct TabItem {
   label: Option<State<Label>>,
 }
 
-#[derive(Declare, SingleChild)]
+#[derive(Declare, Declare2, SingleChild)]
 pub struct TabPane;
 
 #[derive(Declare)]
diff --git a/widgets/src/text.rs b/widgets/src/text.rs
index a8cf3b4c1..569cd4596 100644
--- a/widgets/src/text.rs
+++ b/widgets/src/text.rs
@@ -7,7 +7,7 @@ use ribir_core::{
 };
 
 /// The text widget display text with a single style.
-#[derive(Debug, Declare, Clone, PartialEq)]
+#[derive(Debug, Declare, Declare2, Clone, PartialEq)]
 pub struct Text {
   #[declare(convert=into)]
   pub text: CowArc<str>,
@@ -135,11 +135,11 @@ impl_query_self_only!(Text);
 
 macro_rules! define_text_with_theme_style {
   ($name: ident, $style: ident) => {
-    #[derive(Declare)]
+    #[derive(Declare, Declare2)]
     pub struct $name {
       #[declare(convert=into)]
       pub text: CowArc<str>,
-      #[declare(default = Brush::Color(Palette::of(ctx).on_surface_variant()), convert = into)]
+      #[declare(default = Palette::of(ctx).on_surface_variant(), convert = into)]
       pub foreground: Brush,
       #[declare(default)]
       pub overflow: Overflow,
diff --git a/widgets/src/text_field.rs b/widgets/src/text_field.rs
index 9cf63c194..79d36a3a9 100644
--- a/widgets/src/text_field.rs
+++ b/widgets/src/text_field.rs
@@ -351,13 +351,13 @@ impl ComposeChild for TextField {
 }
 
 fn build_input_area(
-  this: &mut StateRef<TextField>,
-  theme: &mut StateRef<TextFieldThemeProxy>,
+  this: &mut StatefulRef<TextField>,
+  theme: &mut StatefulRef<TextFieldThemeProxy>,
   prefix: Option<LeadingText>,
   suffix: Option<TrailingText>,
   placeholder: Option<Placeholder>,
 ) -> Widget {
-  fn text_label(text: CowArc<str>, theme: StateRef<TextFieldThemeProxy>) -> Text {
+  fn text_label(text: CowArc<str>, theme: StatefulRef<TextFieldThemeProxy>) -> Text {
     Text {
       text,
       foreground: theme.foreground.clone(),
@@ -456,8 +456,8 @@ impl Compose for TextFieldLabel {
 }
 
 fn build_content_area(
-  this: &mut StateRef<TextField>,
-  theme: &mut StateRef<TextFieldThemeProxy>,
+  this: &mut StatefulRef<TextField>,
+  theme: &mut StatefulRef<TextFieldThemeProxy>,
   mut config: TextFieldTml,
 ) -> Widget {
   widget! {

From 8c16d4c2b3a4bd64bad7744cd8fca0fcca9a65ea Mon Sep 17 00:00:00 2001
From: Adoo <Adoo@outlook.com>
Date: Thu, 3 Aug 2023 22:30:13 +0800
Subject: [PATCH 03/10] =?UTF-8?q?refactor(core):=20=F0=9F=92=A1=20remove?=
 =?UTF-8?q?=20lifetime=20in=20normal=20widget=20context?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 core/src/builtin_widgets/focus_node.rs  |   6 +-
 core/src/builtin_widgets/lifecycle.rs   |  31 +++---
 core/src/context/app_ctx.rs             |   8 ++
 core/src/context/layout_ctx.rs          |  13 +--
 core/src/context/painting_ctx.rs        |  26 +++--
 core/src/context/widget_ctx.rs          |  27 +++---
 core/src/events.rs                      | 124 +++---------------------
 core/src/events/character.rs            |  20 ++--
 core/src/events/dispatcher.rs           |   2 +-
 core/src/events/focus.rs                |  16 ++-
 core/src/events/keyboard.rs             |  20 ++--
 core/src/events/listener_impl_helper.rs |  41 ++++----
 core/src/events/pointers.rs             |  78 ++++-----------
 core/src/events/pointers/from_mouse.rs  |   6 +-
 core/src/events/wheel.rs                |  20 ++--
 core/src/widget_tree.rs                 |   8 +-
 core/src/widget_tree/layout_info.rs     |  24 +++--
 core/src/widget_tree/widget_id.rs       |   6 +-
 core/src/window.rs                      |  36 +++----
 examples/counter/src/counter.rs         |   4 +-
 tests/rdl_macro_test.rs                 |   4 +-
 21 files changed, 187 insertions(+), 333 deletions(-)

diff --git a/core/src/builtin_widgets/focus_node.rs b/core/src/builtin_widgets/focus_node.rs
index b36265c62..796ee0fb2 100644
--- a/core/src/builtin_widgets/focus_node.rs
+++ b/core/src/builtin_widgets/focus_node.rs
@@ -59,10 +59,8 @@ impl ComposeChild for FocusNode {
             subject
           });
 
-        fn subscribe_fn(
-          this: Stateful<FocusNode>,
-        ) -> impl for<'a, 'b> FnMut(&'a mut AllLifecycle<'b>) + 'static {
-          move |e: &mut AllLifecycle<'_>| match e {
+        fn subscribe_fn(this: Stateful<FocusNode>) -> impl FnMut(&'_ mut AllLifecycle) + 'static {
+          move |e| match e {
             AllLifecycle::Mounted(e) => {
               let auto_focus = this.state_ref().auto_focus;
               e.window().add_focus_node(e.id, auto_focus, FocusType::Node)
diff --git a/core/src/builtin_widgets/lifecycle.rs b/core/src/builtin_widgets/lifecycle.rs
index 465cb974c..3e50d1858 100644
--- a/core/src/builtin_widgets/lifecycle.rs
+++ b/core/src/builtin_widgets/lifecycle.rs
@@ -1,16 +1,13 @@
-use std::convert::Infallible;
-
-use crate::{impl_all_event, impl_compose_child_for_listener, impl_query_self_only, prelude::*};
-use rxrust::{
-  prelude::*,
-  rc::{MutRc, RcDeref, RcDerefMut},
-  subscriber::{Publisher, Subscriber},
+use crate::{
+  impl_all_event, impl_compose_child_for_listener, impl_query_self_only, prelude::*,
+  window::WindowId,
 };
-use smallvec::SmallVec;
+use rxrust::prelude::*;
+use std::{convert::Infallible, rc::Rc};
 
 define_widget_context!(LifecycleEvent);
 
-crate::events::impl_event_subject!(Lifecycle, event_name = AllLifecycle);
+pub type LifecycleSubject = MutRefItemSubject<'static, AllLifecycle, Infallible>;
 
 #[derive(Declare, Declare2, Default)]
 pub struct LifecycleListener {
@@ -41,15 +38,12 @@ macro_rules! match_closure {
     (|e| match e {
       AllLifecycle::$event_ty(e) => Some(e),
       _ => None,
-    }) as for<'a, 'b> fn(&'a mut AllLifecycle<'b>) -> Option<&'a mut LifecycleEvent<'b>>
+    }) as fn(&mut AllLifecycle) -> Option<&mut LifecycleEvent>
   };
 }
 
 impl LifecycleListenerDeclarer {
-  pub fn on_mounted(
-    mut self,
-    handler: impl for<'r> FnMut(&'r mut LifecycleEvent<'_>) + 'static,
-  ) -> Self {
+  pub fn on_mounted(mut self, handler: impl FnMut(&mut LifecycleEvent) + 'static) -> Self {
     let _ = self
       .subject()
       .filter_map(match_closure!(Mounted))
@@ -87,10 +81,7 @@ impl LifecycleListenerDeclarer {
 }
 
 impl LifecycleListenerDeclarer2 {
-  pub fn on_mounted(
-    mut self,
-    handler: impl for<'r> FnMut(&'r mut LifecycleEvent<'_>) + 'static,
-  ) -> Self {
+  pub fn on_mounted(mut self, handler: impl FnMut(&mut LifecycleEvent) + 'static) -> Self {
     let _ = self
       .subject()
       .filter_map(match_closure!(Mounted))
@@ -131,9 +122,9 @@ impl LifecycleListenerDeclarer2 {
 impl_query_self_only!(LifecycleListener);
 
 impl EventListener for LifecycleListener {
-  type Event<'a> = AllLifecycle<'a>;
+  type Event = AllLifecycle;
   #[inline]
-  fn dispatch(&self, event: &mut Self::Event<'_>) { self.lifecycle.clone().next(event) }
+  fn dispatch(&self, event: &mut Self::Event) { self.lifecycle.clone().next(event) }
 }
 
 #[cfg(test)]
diff --git a/core/src/context/app_ctx.rs b/core/src/context/app_ctx.rs
index 6f7bc2b07..bea2f9041 100644
--- a/core/src/context/app_ctx.rs
+++ b/core/src/context/app_ctx.rs
@@ -73,6 +73,14 @@ impl AppCtx {
     Self::shared().windows.borrow().get(&id).cloned()
   }
 
+  /// Get the window by the window id. Same as `get_window` but will panic if
+  /// the window not found.
+  #[track_caller]
+  #[inline]
+  pub fn get_window_assert(id: WindowId) -> Rc<Window> {
+    Self::get_window(id).expect("Window not found!")
+  }
+
   /// Return the windows collection of the application.
   pub fn windows() -> &'static RefCell<ahash::HashMap<WindowId, Rc<Window>>> {
     &Self::shared().windows
diff --git a/core/src/context/layout_ctx.rs b/core/src/context/layout_ctx.rs
index 6d08d80e9..768b40a8f 100644
--- a/core/src/context/layout_ctx.rs
+++ b/core/src/context/layout_ctx.rs
@@ -1,10 +1,11 @@
-use super::{WidgetCtx, WidgetCtxImpl};
+use super::{AppCtx, WidgetCtx, WidgetCtxImpl};
 use crate::{
   widget::{BoxClamp, Layouter, WidgetTree},
   widget_tree::WidgetId,
-  window::Window,
+  window::{Window, WindowId},
 };
 use ribir_geom::Size;
+use std::rc::Rc;
 
 /// A place to compute the render object's layout. Rather than holding  children
 /// directly, `Layout` perform layout across `LayoutCtx`. `LayoutCtx` provide
@@ -12,7 +13,7 @@ use ribir_geom::Size;
 /// descendants position.
 pub struct LayoutCtx<'a> {
   pub(crate) id: WidgetId,
-  pub(crate) wnd: &'a Window,
+  pub(crate) wnd_id: WindowId,
   /// The widget tree of the window, not borrow it from `wnd` is because a
   /// `LayoutCtx` always in a mutable borrow.
   pub(crate) tree: &'a mut WidgetTree,
@@ -21,7 +22,7 @@ pub struct LayoutCtx<'a> {
 impl<'a> WidgetCtxImpl for LayoutCtx<'a> {
   fn id(&self) -> WidgetId { self.id }
 
-  fn current_wnd(&self) -> &Window { self.wnd }
+  fn current_wnd(&self) -> Rc<Window> { AppCtx::get_window_assert(self.wnd_id) }
 
   fn with_tree<F: FnOnce(&WidgetTree) -> R, R>(&self, f: F) -> R { f(self.tree) }
 }
@@ -77,7 +78,7 @@ impl<'a> LayoutCtx<'a> {
   }
 
   pub(crate) fn new_layouter(&mut self, id: WidgetId) -> Layouter {
-    let LayoutCtx { wnd, tree, .. } = self;
-    Layouter::new(id, wnd, false, tree)
+    let LayoutCtx { wnd_id, tree, .. } = self;
+    Layouter::new(id, *wnd_id, false, tree)
   }
 }
diff --git a/core/src/context/painting_ctx.rs b/core/src/context/painting_ctx.rs
index ffb3b09c2..8938705e3 100644
--- a/core/src/context/painting_ctx.rs
+++ b/core/src/context/painting_ctx.rs
@@ -1,19 +1,29 @@
+use super::{AppCtx, WidgetCtxImpl};
 use crate::{
   prelude::{Painter, WidgetId},
-  window::Window,
+  window::{Window, WindowId},
 };
-use std::cell::RefMut;
+use std::rc::Rc;
 
-use super::{define_widget_context, WidgetCtxImpl};
+pub struct PaintingCtx<'a> {
+  pub(crate) id: WidgetId,
+  pub(crate) wnd_id: WindowId,
+  pub(crate) painter: &'a mut Painter,
+}
+
+impl<'a> WidgetCtxImpl for PaintingCtx<'a> {
+  #[inline]
+  fn id(&self) -> WidgetId { self.id }
 
-define_widget_context!(PaintingCtx, painter: RefMut<'a, Painter>);
+  #[inline]
+  fn current_wnd(&self) -> Rc<Window> { AppCtx::get_window_assert(self.wnd_id) }
+}
 
 impl<'a> PaintingCtx<'a> {
-  pub fn new(id: WidgetId, wnd: &'a Window) -> Self {
-    let painter = wnd.painter.borrow_mut();
-    Self { id, wnd, painter }
+  pub fn new(id: WidgetId, wnd_id: WindowId, painter: &'a mut Painter) -> Self {
+    Self { id, wnd_id, painter }
   }
   /// Return the 2d painter to draw 2d things.
   #[inline]
-  pub fn painter(&mut self) -> &mut Painter { &mut self.painter }
+  pub fn painter(&mut self) -> &mut Painter { self.painter }
 }
diff --git a/core/src/context/widget_ctx.rs b/core/src/context/widget_ctx.rs
index 55a5c9cc6..591d37ec4 100644
--- a/core/src/context/widget_ctx.rs
+++ b/core/src/context/widget_ctx.rs
@@ -1,10 +1,11 @@
 use crate::{
-  prelude::QueryOrder,
+  prelude::{AppCtx, QueryOrder},
   widget::{BoxClamp, WidgetTree},
   widget_tree::WidgetId,
-  window::Window,
+  window::{Window, WindowId},
 };
 use ribir_geom::{Point, Rect, Size};
+use std::rc::Rc;
 
 /// common action for all context of widget.
 pub trait WidgetCtx {
@@ -63,14 +64,15 @@ pub trait WidgetCtx {
     id: WidgetId,
     callback: impl FnOnce(&W) -> R,
   ) -> Option<R>;
-  /// Get the window of this context in the callback.
-  fn window(&self) -> &Window;
+  /// Get the window of this context, yous should not store the window, store
+  /// its id instead.
+  fn window(&self) -> Rc<Window>;
 }
 
 pub(crate) trait WidgetCtxImpl {
   fn id(&self) -> WidgetId;
 
-  fn current_wnd(&self) -> &Window;
+  fn current_wnd(&self) -> Rc<Window>;
 
   #[inline]
   fn with_tree<F: FnOnce(&WidgetTree) -> R, R>(&self, f: F) -> R {
@@ -171,7 +173,7 @@ impl<T: WidgetCtxImpl> WidgetCtx for T {
     })
   }
 
-  fn window(&self) -> &Window { self.current_wnd() }
+  fn window(&self) -> Rc<Window> { self.current_wnd() }
 }
 
 macro_rules! define_widget_context {
@@ -180,19 +182,18 @@ macro_rules! define_widget_context {
     $name: ident $(, $extra_name: ident: $extra_ty: ty)*
   ) => {
     $(#[$outer])*
-    pub struct $name<'a> {
+    pub struct $name {
       pub(crate) id: WidgetId,
-      /// use a reference to avoid user hold the `Window`.
-      pub(crate) wnd: &'a Window,
+      pub(crate) wnd_id: WindowId,
       $(pub(crate) $extra_name: $extra_ty,)*
     }
 
-    impl<'a> WidgetCtxImpl for $name<'a> {
+    impl WidgetCtxImpl for $name {
       #[inline]
       fn id(&self) -> WidgetId { self.id }
 
       #[inline]
-      fn current_wnd(&self) -> &Window { self.wnd }
+      fn current_wnd(&self) -> Rc<Window> { AppCtx::get_window_assert(self.wnd_id) }
     }
   };
 }
@@ -229,7 +230,7 @@ mod tests {
     let pos = Point::zero();
     let child = root.single_child(&tree.arena).unwrap();
 
-    let w_ctx = TestCtx { id: child, wnd: &wnd };
+    let w_ctx = TestCtx { id: child, wnd_id: wnd.id() };
     assert_eq!(w_ctx.map_from(pos, child), pos);
     assert_eq!(w_ctx.map_to(pos, child), pos);
   }
@@ -255,7 +256,7 @@ mod tests {
 
     let root = wnd.widget_tree.borrow().root();
     let child = get_single_child_by_depth(root, &wnd.widget_tree.borrow().arena, 4);
-    let w_ctx = TestCtx { id: root, wnd: &wnd };
+    let w_ctx = TestCtx { id: root, wnd_id: wnd.id() };
     let from_pos = Point::new(30., 30.);
     assert_eq!(w_ctx.map_from(from_pos, child), Point::new(45., 45.));
     let to_pos = Point::new(50., 50.);
diff --git a/core/src/events.rs b/core/src/events.rs
index 646f5d3f0..0afefabfc 100644
--- a/core/src/events.rs
+++ b/core/src/events.rs
@@ -1,15 +1,11 @@
+use self::dispatcher::DispatchInfo;
 use crate::{
   context::{define_widget_context, WidgetCtx, WidgetCtxImpl},
+  prelude::AppCtx,
   widget_tree::WidgetId,
-  window::Window,
-};
-
-use rxrust::{
-  prelude::*,
-  rc::{MutRc, RcDeref, RcDerefMut},
+  window::{Window, WindowId},
 };
-use smallvec::SmallVec;
-use std::convert::Infallible;
+use std::rc::Rc;
 
 pub(crate) mod dispatcher;
 mod pointers;
@@ -34,7 +30,7 @@ define_widget_context!(
   prevent_default: bool
 );
 
-impl<'a> CommonEvent<'a> {
+impl CommonEvent {
   /// The target property of the Event interface is a reference to the object
   /// onto which the event was dispatched. It is different from
   /// Event::current_target when the event handler is called during the bubbling
@@ -107,11 +103,11 @@ impl<'a> CommonEvent<'a> {
 }
 
 pub trait EventListener {
-  type Event<'a>;
-  fn dispatch(&self, event: &mut Self::Event<'_>);
+  type Event;
+  fn dispatch(&self, event: &mut Self::Event);
 }
 
-impl<'a> std::fmt::Debug for CommonEvent<'a> {
+impl std::fmt::Debug for CommonEvent {
   fn fmt(&self, f: &mut std::fmt::Formatter<'_>) -> std::fmt::Result {
     f.debug_struct("CommonEvent")
       .field("target", &self.id)
@@ -121,16 +117,16 @@ impl<'a> std::fmt::Debug for CommonEvent<'a> {
   }
 }
 
-impl<'a> CommonEvent<'a> {
+impl CommonEvent {
   /// Create a new common event.
   ///
   /// Although the `dispatcher` is contained in the `wnd`, we still need to pass
   /// it because in most case the event create in a environment that the
   /// `Dispatcher` already borrowed.
-  pub(crate) fn new(target: WidgetId, wnd: &'a Window) -> Self {
+  pub(crate) fn new(target: WidgetId, wnd_id: WindowId) -> Self {
     Self {
       target,
-      wnd,
+      wnd_id,
       id: target,
       propagation: true,
       prevent_default: false,
@@ -140,102 +136,6 @@ impl<'a> CommonEvent<'a> {
   pub(crate) fn set_current_target(&mut self, id: WidgetId) { self.id = id; }
 
   fn pick_info<R>(&self, f: impl FnOnce(&DispatchInfo) -> R) -> R {
-    f(&self.wnd.dispatcher.borrow().info)
+    f(&self.current_wnd().dispatcher.borrow().info)
   }
 }
-
-macro_rules! impl_event_subject {
-  ($name: ident) => {
-    paste::paste! {
-      impl_event_subject!($name, event_name = [<$name Event>]);
-    }
-  };
-  ($name: ident, event_name = $event: ident) => {
-    paste::paste! {
-      pub(crate) type [<$name Publisher>] =
-        MutRc<Option<SmallVec<
-          [Box<dyn for<'a, 'b> Publisher<&'a mut $event<'b>, Infallible>>; 1]
-        >>>;
-
-      #[derive(Clone)]
-      pub struct [<$name Subject>] {
-        observers: [<$name Publisher>],
-        chamber: [<$name Publisher>],
-      }
-
-      impl<'a, 'b, O> Observable<&'a mut $event<'b>, Infallible, O> for [<$name Subject>]
-      where
-        O: for<'r1, 'r2> Observer<&'r1 mut $event<'r2>, Infallible> + 'static,
-      {
-        type Unsub = Subscriber<O>;
-
-        fn actual_subscribe(self, observer: O) -> Self::Unsub {
-          if let Some(chamber) = self.chamber.rc_deref_mut().as_mut() {
-            self
-              .observers
-              .rc_deref_mut()
-              .as_mut()
-              .unwrap()
-              .retain(|p| !p.p_is_closed());
-
-            let subscriber = Subscriber::new(Some(observer));
-            chamber.push(Box::new(subscriber.clone()));
-            subscriber
-          } else {
-            Subscriber::new(None)
-          }
-        }
-      }
-      impl<'a, 'b> ObservableExt<&'a mut $event<'b>, Infallible> for [<$name Subject>] {}
-
-      impl<'a, 'b> Observer<&'a mut $event<'b>, Infallible> for [<$name Subject>] {
-        fn next(&mut self, value: &'a mut $event<'b>) {
-          self.load();
-          if let Some(observers) = self.observers.rc_deref_mut().as_mut() {
-            for p in observers.iter_mut() {
-              p.p_next(value);
-            }
-          }
-        }
-
-        fn error(self, _: Infallible) {}
-
-        fn complete(mut self) {
-          self.load();
-          if let Some(observers) = self.observers.rc_deref_mut().take() {
-            observers
-              .into_iter()
-              .filter(|o| !o.p_is_closed())
-              .for_each(|subscriber| subscriber.p_complete());
-          }
-        }
-
-        #[inline]
-        fn is_finished(&self) -> bool { self.observers.rc_deref().is_none() }
-      }
-
-      impl [<$name Subject>] {
-        fn load(&mut self) {
-          if let Some(observers) = self.observers.rc_deref_mut().as_mut() {
-            observers.append(self.chamber.rc_deref_mut().as_mut().unwrap());
-          }
-        }
-      }
-
-      impl Default for [<$name Subject>] {
-        fn default() -> Self {
-          Self {
-            observers: MutRc::own(Some(<_>::default())),
-            chamber: MutRc::own(Some(<_>::default())),
-          }
-        }
-      }
-    }
-  };
-}
-
-pub(crate) use impl_event_subject;
-
-use self::dispatcher::DispatchInfo;
-
-impl_event_subject!(Common);
diff --git a/core/src/events/character.rs b/core/src/events/character.rs
index 1b73cf53f..4fc6bcee5 100644
--- a/core/src/events/character.rs
+++ b/core/src/events/character.rs
@@ -1,21 +1,17 @@
 use crate::{
   impl_all_event, impl_common_event_deref, impl_compose_child_with_focus_for_listener,
-  impl_listener, impl_multi_event_listener, impl_query_self_only, prelude::*,
+  impl_listener, impl_multi_event_listener, impl_query_self_only, prelude::*, window::WindowId,
 };
-use rxrust::{
-  prelude::*,
-  rc::{MutRc, RcDeref, RcDerefMut},
-};
-use smallvec::SmallVec;
+use rxrust::prelude::*;
 use std::convert::Infallible;
 
 #[derive(Debug)]
-pub struct CharsEvent<'a> {
+pub struct CharsEvent {
   pub chars: String,
-  pub common: CommonEvent<'a>,
+  pub common: CommonEvent,
 }
 
-impl_event_subject!(Chars, event_name = AllChars);
+pub type CharsSubject = MutRefItemSubject<'static, AllChars, Infallible>;
 
 impl_multi_event_listener! {
   "The listener use to fire and listen chars events.",
@@ -28,12 +24,12 @@ impl_compose_child_with_focus_for_listener!(CharsListener);
 
 impl_common_event_deref!(CharsEvent);
 
-impl<'a> CharsEvent<'a> {
+impl CharsEvent {
   #[inline]
-  pub fn new(chars: String, id: WidgetId, wnd: &'a Window) -> Self {
+  pub fn new(chars: String, id: WidgetId, wnd_id: WindowId) -> Self {
     Self {
       chars,
-      common: CommonEvent::new(id, wnd),
+      common: CommonEvent::new(id, wnd_id),
     }
   }
 }
diff --git a/core/src/events/dispatcher.rs b/core/src/events/dispatcher.rs
index 5909fca81..aa833df98 100644
--- a/core/src/events/dispatcher.rs
+++ b/core/src/events/dispatcher.rs
@@ -216,7 +216,7 @@ impl Dispatcher {
     let mut pos = self.info.cursor_pos;
     while let Some(id) = w {
       let r = id.assert_get(arena);
-      let ctx = HitTestCtx { id, wnd: &wnd };
+      let ctx = HitTestCtx { id, wnd_id: wnd.id() };
       let HitTest { hit, can_hit_child } = r.hit_test(&ctx, pos);
 
       pos = tree.store.map_from_parent(id, pos, arena);
diff --git a/core/src/events/focus.rs b/core/src/events/focus.rs
index 97d376e48..518e9f93f 100644
--- a/core/src/events/focus.rs
+++ b/core/src/events/focus.rs
@@ -1,8 +1,4 @@
-use rxrust::{
-  prelude::*,
-  rc::{MutRc, RcDeref, RcDerefMut},
-};
-use smallvec::SmallVec;
+use rxrust::prelude::*;
 use std::convert::Infallible;
 
 use crate::{
@@ -10,8 +6,9 @@ use crate::{
   impl_listener, impl_multi_event_listener, impl_query_self_only, prelude::*,
 };
 
-pub type FocusEvent<'a> = CommonEvent<'a>;
-impl_event_subject!(Focus, event_name = AllFocus);
+pub type FocusEvent = CommonEvent;
+pub type FocusSubject = MutRefItemSubject<'static, AllFocus, Infallible>;
+
 impl_multi_event_listener! {
   "The listener use to fire and listen focus events.",
   Focus,
@@ -25,8 +22,9 @@ impl_multi_event_listener! {
 }
 impl_compose_child_with_focus_for_listener!(FocusListener);
 
-type FocusBubbleEvent<'a> = CommonEvent<'a>;
-impl_event_subject!(FocusBubble, event_name = AllFocusBubble);
+pub type FocusBubbleEvent = CommonEvent;
+pub type FocusBubbleSubject = MutRefItemSubject<'static, AllFocusBubble, Infallible>;
+
 impl_multi_event_listener! {
   "The listener use to fire and listen focusin and focusout events.",
   FocusBubble,
diff --git a/core/src/events/keyboard.rs b/core/src/events/keyboard.rs
index 09f842fe8..6cc77d755 100644
--- a/core/src/events/keyboard.rs
+++ b/core/src/events/keyboard.rs
@@ -1,23 +1,19 @@
-use rxrust::{
-  prelude::*,
-  rc::{MutRc, RcDeref, RcDerefMut},
-};
-use smallvec::SmallVec;
+use rxrust::prelude::*;
 use std::convert::Infallible;
 
 use crate::{
   impl_all_event, impl_common_event_deref, impl_compose_child_with_focus_for_listener,
-  impl_listener, impl_multi_event_listener, impl_query_self_only, prelude::*,
+  impl_listener, impl_multi_event_listener, impl_query_self_only, prelude::*, window::WindowId,
 };
 
 #[derive(Debug)]
-pub struct KeyboardEvent<'a> {
+pub struct KeyboardEvent {
   pub scan_code: ScanCode,
   pub key: VirtualKeyCode,
-  common: CommonEvent<'a>,
+  common: CommonEvent,
 }
 
-impl_event_subject!(Keyboard, event_name = AllKeyboard);
+pub type KeyboardSubject = MutRefItemSubject<'static, AllKeyboard, Infallible>;
 
 impl_multi_event_listener! {
   "The listener use to fire and listen keyboard events.",
@@ -36,13 +32,13 @@ impl_common_event_deref!(KeyboardEvent);
 
 impl_compose_child_with_focus_for_listener!(KeyboardListener);
 
-impl<'a> KeyboardEvent<'a> {
+impl KeyboardEvent {
   #[inline]
-  pub fn new(scan_code: ScanCode, key: VirtualKeyCode, id: WidgetId, wnd: &'a Window) -> Self {
+  pub fn new(scan_code: ScanCode, key: VirtualKeyCode, id: WidgetId, wnd_id: WindowId) -> Self {
     Self {
       scan_code,
       key,
-      common: CommonEvent::new(id, wnd),
+      common: CommonEvent::new(id, wnd_id),
     }
   }
 }
diff --git a/core/src/events/listener_impl_helper.rs b/core/src/events/listener_impl_helper.rs
index 0a2742f75..042fd9d5c 100644
--- a/core/src/events/listener_impl_helper.rs
+++ b/core/src/events/listener_impl_helper.rs
@@ -3,15 +3,15 @@ macro_rules! impl_all_event {
   ($name: ident, $($on_doc: literal, $event_ty: ident),+) => {
     paste::paste! {
       #[doc="All `" $name:snake "` related events"]
-      pub enum [<All $name>]<'a> {
+      pub enum [<All $name>] {
         $(
           #[doc = $on_doc]
-          $event_ty([<$name Event>]<'a>),
+          $event_ty([<$name Event>]),
         )+
       }
 
-      impl<'a> std::ops::Deref for [<All $name>]<'a> {
-        type Target = [<$name Event>]<'a>;
+      impl std::ops::Deref for [<All $name>] {
+        type Target = [<$name Event>];
         fn deref(&self) -> &Self::Target {
           match self {
             $([<All $name>]::$event_ty(e)) |+ => e
@@ -19,7 +19,7 @@ macro_rules! impl_all_event {
         }
       }
 
-      impl<'a> std::ops::DerefMut for [<All $name>]<'a> {
+      impl std::ops::DerefMut for [<All $name>] {
         fn deref_mut(&mut self) -> &mut Self::Target {
           match self {
             $([<All $name>]::$event_ty(e)) |+ => e
@@ -27,8 +27,8 @@ macro_rules! impl_all_event {
         }
       }
 
-      impl<'a> [<All $name>]<'a> {
-        pub fn into_inner(self) -> [<$name Event>]<'a> {
+      impl [<All $name>] {
+        pub fn into_inner(self) -> [<$name Event>] {
           match self {
             $([<All $name>]::$event_ty(e)) |+ => e
           }
@@ -76,9 +76,9 @@ macro_rules! impl_listener {
       }
 
       impl EventListener for [<$name Listener>] {
-        type Event<'a> = $event_ty<'a>;
+        type Event = $event_ty;
         #[inline]
-        fn dispatch(&self, event: &mut Self::Event<'_>) {
+        fn dispatch(&self, event: &mut Self::Event) {
           self.[<$name:snake _subject>].clone().next(event)
         }
       }
@@ -103,7 +103,7 @@ macro_rules! impl_multi_event_listener {
           #[doc = "Sets up a function that will be called whenever the `" $event_ty "` is delivered"]
           pub fn [<on_ $event_ty:snake>](
             mut self,
-            handler: impl for<'r> FnMut(&'r mut [<$name Event>]<'_>) + 'static
+            handler: impl FnMut(&mut [<$name Event>]) + 'static
           ) -> Self
           {
             self
@@ -112,7 +112,7 @@ macro_rules! impl_multi_event_listener {
               (|e| match e {
                 [<All $name>]::$event_ty(e) => Some(e),
                 _ => None,
-              }) as for<'a, 'b> fn(&'a mut [<All $name>]::<'b>) -> Option<&'a mut [<$name Event>] <'b>>
+              }) as fn(&mut [<All $name>]) -> Option<&mut [<$name Event>]>
             )
             .subscribe(handler);
             self
@@ -126,7 +126,7 @@ macro_rules! impl_multi_event_listener {
             whenever the `" $event_ty "` is delivered"]
           pub fn [<on_ $event_ty:snake>](
             mut self,
-            handler: impl for<'r> FnMut(&'r mut [<$name Event>]<'_>) + 'static
+            handler: impl FnMut(&mut [<$name Event>]) + 'static
           ) -> Self {
             self
               .subject()
@@ -134,8 +134,7 @@ macro_rules! impl_multi_event_listener {
                 (|e| match e {
                   [<All $name>]::$event_ty(e) => Some(e),
                   _ => None,
-                }) as for<'a, 'b> fn(&'a mut [<All $name>]::<'b>)
-                  -> Option<&'a mut [<$name Event>]<'b>>,
+                }) as fn(&mut [<All $name>]) -> Option<&mut [<$name Event>]>
               )
               .subscribe(handler);
             self
@@ -184,26 +183,26 @@ macro_rules! impl_single_event_listener {
 #[macro_export]
 macro_rules! impl_common_event_deref {
   ($event_name: ident) => {
-    impl<'a> std::ops::Deref for $event_name<'a> {
-      type Target = CommonEvent<'a>;
+    impl std::ops::Deref for $event_name {
+      type Target = CommonEvent;
 
       #[inline]
       fn deref(&self) -> &Self::Target { &self.common }
     }
 
-    impl<'a> std::ops::DerefMut for $event_name<'a> {
+    impl std::ops::DerefMut for $event_name {
       #[inline]
       fn deref_mut(&mut self) -> &mut Self::Target { &mut self.common }
     }
 
-    impl<'a> std::borrow::Borrow<CommonEvent<'a>> for $event_name<'a> {
+    impl std::borrow::Borrow<CommonEvent> for $event_name {
       #[inline]
-      fn borrow(&self) -> &CommonEvent<'a> { &self.common }
+      fn borrow(&self) -> &CommonEvent { &self.common }
     }
 
-    impl<'a> std::borrow::BorrowMut<CommonEvent<'a>> for $event_name<'a> {
+    impl std::borrow::BorrowMut<CommonEvent> for $event_name {
       #[inline]
-      fn borrow_mut(&mut self) -> &mut CommonEvent<'a> { &mut self.common }
+      fn borrow_mut(&mut self) -> &mut CommonEvent { &mut self.common }
     }
   };
 }
diff --git a/core/src/events/pointers.rs b/core/src/events/pointers.rs
index 8910ecd23..85c16bc94 100644
--- a/core/src/events/pointers.rs
+++ b/core/src/events/pointers.rs
@@ -3,11 +3,7 @@ use crate::{
   impl_all_event, impl_common_event_deref, impl_compose_child_for_listener, impl_listener,
   impl_multi_event_listener, impl_query_self_only, prelude::*,
 };
-use rxrust::{
-  prelude::*,
-  rc::{MutRc, RcDeref, RcDerefMut},
-};
-use smallvec::SmallVec;
+use rxrust::prelude::*;
 use std::{
   convert::Infallible,
   time::{Duration, Instant},
@@ -25,7 +21,7 @@ pub struct PointerId(usize);
 /// property to inspect the device type which produced the event.
 /// Reference: <https://developer.mozilla.org/en-US/docs/Web/API/Pointer_events#term_pointer_event>
 #[derive(Debug)]
-pub struct PointerEvent<'a> {
+pub struct PointerEvent {
   /// A unique identifier for the pointer causing the event.
   pub id: PointerId,
   /// The width (magnitude on the X axis), in pixels, of the contact geometry of
@@ -58,7 +54,7 @@ pub struct PointerEvent<'a> {
   /// type.
   pub is_primary: bool,
 
-  pub common: CommonEvent<'a>,
+  pub common: CommonEvent,
 }
 
 bitflags! {
@@ -116,7 +112,7 @@ impl_multi_event_listener!(
 
 impl_common_event_deref!(PointerEvent);
 
-impl_event_subject!(Pointer, event_name = AllPointer);
+pub type PointerSubject = MutRefItemSubject<'static, AllPointer, Infallible>;
 
 impl_compose_child_for_listener!(PointerListener);
 
@@ -124,7 +120,7 @@ fn x_times_tap_map_filter(
   x: usize,
   dur: Duration,
   capture: bool,
-) -> impl for<'a, 'b> FnMut(&'a mut AllPointer<'b>) -> Option<&'a mut PointerEvent<'b>> {
+) -> impl FnMut(&mut AllPointer) -> Option<&mut PointerEvent> {
   assert!(x > 0);
   struct TapInfo {
     pointer_id: PointerId,
@@ -166,40 +162,25 @@ fn x_times_tap_map_filter(
 }
 
 impl PointerListenerDeclarer {
-  pub fn on_double_tap(
-    self,
-    handler: impl for<'a, 'b> FnMut(&'a mut PointerEvent<'b>) + 'static,
-  ) -> Self {
+  pub fn on_double_tap(self, handler: impl FnMut(&mut PointerEvent) + 'static) -> Self {
     self.on_x_times_tap((2, handler))
   }
 
-  pub fn on_double_tap_capture(
-    self,
-    handler: impl for<'a, 'b> FnMut(&'a mut PointerEvent<'b>) + 'static,
-  ) -> Self {
+  pub fn on_double_tap_capture(self, handler: impl FnMut(&mut PointerEvent) + 'static) -> Self {
     self.on_x_times_tap_capture((2, handler))
   }
 
-  pub fn on_triple_tap(
-    self,
-    handler: impl for<'a, 'b> FnMut(&'a mut PointerEvent<'b>) + 'static,
-  ) -> Self {
+  pub fn on_triple_tap(self, handler: impl FnMut(&mut PointerEvent) + 'static) -> Self {
     self.on_x_times_tap((3, handler))
   }
 
-  pub fn on_triple_tap_capture(
-    self,
-    handler: impl for<'a, 'b> FnMut(&'a mut PointerEvent<'b>) + 'static,
-  ) -> Self {
+  pub fn on_triple_tap_capture(self, handler: impl FnMut(&mut PointerEvent) + 'static) -> Self {
     self.on_x_times_tap_capture((3, handler))
   }
 
   pub fn on_x_times_tap(
     mut self,
-    (times, handler): (
-      usize,
-      impl for<'a, 'b> FnMut(&'a mut PointerEvent<'b>) + 'static,
-    ),
+    (times, handler): (usize, impl FnMut(&mut PointerEvent) + 'static),
   ) -> Self {
     self.on_x_times_tap_impl(times, MULTI_TAP_DURATION, false, handler);
     self
@@ -207,10 +188,7 @@ impl PointerListenerDeclarer {
 
   pub fn on_x_times_tap_capture(
     mut self,
-    (times, handler): (
-      usize,
-      impl for<'a, 'b> FnMut(&'a mut PointerEvent<'b>) + 'static,
-    ),
+    (times, handler): (usize, impl FnMut(&mut PointerEvent) + 'static),
   ) -> Self {
     self.on_x_times_tap_impl(times, MULTI_TAP_DURATION, true, handler);
     self
@@ -221,7 +199,7 @@ impl PointerListenerDeclarer {
     times: usize,
     dur: Duration,
     capture: bool,
-    handler: impl for<'a, 'b> FnMut(&'a mut PointerEvent<'b>) + 'static,
+    handler: impl FnMut(&mut PointerEvent) + 'static,
   ) {
     self
       .subject()
@@ -231,40 +209,25 @@ impl PointerListenerDeclarer {
 }
 
 impl PointerListener {
-  pub fn on_double_tap(
-    self,
-    handler: impl for<'a, 'b> FnMut(&'a mut PointerEvent<'b>) + 'static,
-  ) -> Self {
+  pub fn on_double_tap(self, handler: impl FnMut(&mut PointerEvent) + 'static) -> Self {
     self.on_x_times_tap((2, handler))
   }
 
-  pub fn on_double_tap_capture(
-    self,
-    handler: impl for<'a, 'b> FnMut(&'a mut PointerEvent<'b>) + 'static,
-  ) -> Self {
+  pub fn on_double_tap_capture(self, handler: impl FnMut(&mut PointerEvent) + 'static) -> Self {
     self.on_x_times_tap_capture((2, handler))
   }
 
-  pub fn on_triple_tap(
-    self,
-    handler: impl for<'a, 'b> FnMut(&'a mut PointerEvent<'b>) + 'static,
-  ) -> Self {
+  pub fn on_triple_tap(self, handler: impl FnMut(&mut PointerEvent) + 'static) -> Self {
     self.on_x_times_tap((3, handler))
   }
 
-  pub fn on_triple_tap_capture(
-    self,
-    handler: impl for<'a, 'b> FnMut(&'a mut PointerEvent<'b>) + 'static,
-  ) -> Self {
+  pub fn on_triple_tap_capture(self, handler: impl FnMut(&mut PointerEvent) + 'static) -> Self {
     self.on_x_times_tap_capture((3, handler))
   }
 
   pub fn on_x_times_tap(
     self,
-    (times, handler): (
-      usize,
-      impl for<'a, 'b> FnMut(&'a mut PointerEvent<'b>) + 'static,
-    ),
+    (times, handler): (usize, impl FnMut(&mut PointerEvent) + 'static),
   ) -> Self {
     self.on_x_times_tap_impl(times, MULTI_TAP_DURATION, false, handler);
     self
@@ -272,10 +235,7 @@ impl PointerListener {
 
   pub fn on_x_times_tap_capture(
     self,
-    (times, handler): (
-      usize,
-      impl for<'a, 'b> FnMut(&'a mut PointerEvent<'b>) + 'static,
-    ),
+    (times, handler): (usize, impl FnMut(&mut PointerEvent) + 'static),
   ) -> Self {
     self.on_x_times_tap_impl(times, MULTI_TAP_DURATION, true, handler);
     self
@@ -286,7 +246,7 @@ impl PointerListener {
     x: usize,
     dur: Duration,
     capture: bool,
-    handler: impl for<'a, 'b> FnMut(&'a mut PointerEvent<'b>) + 'static,
+    handler: impl FnMut(&mut PointerEvent) + 'static,
   ) {
     self
       .pointer_stream()
diff --git a/core/src/events/pointers/from_mouse.rs b/core/src/events/pointers/from_mouse.rs
index 5f137ffaf..59b5107f3 100644
--- a/core/src/events/pointers/from_mouse.rs
+++ b/core/src/events/pointers/from_mouse.rs
@@ -2,8 +2,8 @@ use super::PointerId;
 use crate::prelude::*;
 use winit::event::MouseButton;
 
-impl<'a> PointerEvent<'a> {
-  pub(crate) fn from_mouse(target: WidgetId, wnd: &'a Window) -> Self {
+impl PointerEvent {
+  pub(crate) fn from_mouse(target: WidgetId, wnd: &Window) -> Self {
     let no_button = wnd.dispatcher.borrow().info.mouse_buttons().is_empty();
     PointerEvent {
       // todo: we need to trace the pressed pointer, how to generate pointer id, by device + button?
@@ -16,7 +16,7 @@ impl<'a> PointerEvent<'a> {
       twist: 0.,
       point_type: PointerType::Mouse,
       is_primary: true,
-      common: CommonEvent::new(target, wnd),
+      common: CommonEvent::new(target, wnd.id()),
     }
   }
 }
diff --git a/core/src/events/wheel.rs b/core/src/events/wheel.rs
index 0b4ffcde6..49a4c696f 100644
--- a/core/src/events/wheel.rs
+++ b/core/src/events/wheel.rs
@@ -1,22 +1,18 @@
 use crate::{
   impl_all_event, impl_common_event_deref, impl_compose_child_for_listener, impl_listener,
-  impl_multi_event_listener, impl_query_self_only, prelude::*,
+  impl_multi_event_listener, impl_query_self_only, prelude::*, window::WindowId,
 };
-use rxrust::{
-  prelude::*,
-  rc::{MutRc, RcDeref, RcDerefMut},
-};
-use smallvec::SmallVec;
+use rxrust::prelude::*;
 use std::convert::Infallible;
 
 #[derive(Debug)]
-pub struct WheelEvent<'a> {
+pub struct WheelEvent {
   pub delta_x: f32,
   pub delta_y: f32,
-  pub common: CommonEvent<'a>,
+  pub common: CommonEvent,
 }
 
-impl_event_subject!(Wheel, event_name = AllWheel);
+pub type WheelSubject = MutRefItemSubject<'static, AllWheel, Infallible>;
 
 impl_multi_event_listener! {
   "The listener use to fire and listen wheel events.",
@@ -30,13 +26,13 @@ impl_multi_event_listener! {
 impl_compose_child_for_listener!(WheelListener);
 impl_common_event_deref!(WheelEvent);
 
-impl<'a> WheelEvent<'a> {
+impl WheelEvent {
   #[inline]
-  pub fn new(delta_x: f32, delta_y: f32, id: WidgetId, wnd: &'a Window) -> Self {
+  pub fn new(delta_x: f32, delta_y: f32, id: WidgetId, wnd_id: WindowId) -> Self {
     Self {
       delta_x,
       delta_y,
-      common: CommonEvent::new(id, wnd),
+      common: CommonEvent::new(id, wnd_id),
     }
   }
 }
diff --git a/core/src/widget_tree.rs b/core/src/widget_tree.rs
index 428d08f5d..4957b5e61 100644
--- a/core/src/widget_tree.rs
+++ b/core/src/widget_tree.rs
@@ -42,7 +42,8 @@ impl WidgetTree {
   /// Draw current tree by painter.
   pub(crate) fn draw(&self) {
     let wnd = self.window();
-    let mut ctx = PaintingCtx::new(self.root(), &wnd);
+    let mut painter = wnd.painter.borrow_mut();
+    let mut ctx = PaintingCtx::new(self.root(), wnd.id(), &mut painter);
     self.root().paint_subtree(&mut ctx);
   }
 
@@ -62,10 +63,7 @@ impl WidgetTree {
           .map(|info| info.clamp)
           .unwrap_or_else(|| BoxClamp { min: Size::zero(), max: win_size });
 
-        let wnd = self.window();
-        let wnd = &*wnd;
-
-        let mut layouter = Layouter::new(wid, wnd, true, self);
+        let mut layouter = Layouter::new(wid, self.window().id(), true, self);
         layouter.perform_widget_layout(clamp);
       }
     }
diff --git a/core/src/widget_tree/layout_info.rs b/core/src/widget_tree/layout_info.rs
index b3f8f0be4..3e63656d1 100644
--- a/core/src/widget_tree/layout_info.rs
+++ b/core/src/widget_tree/layout_info.rs
@@ -2,12 +2,12 @@ use ribir_geom::ZERO_SIZE;
 
 use super::{WidgetId, WidgetTree};
 use crate::{
-  context::{LayoutCtx, WidgetCtx, WidgetCtxImpl},
+  context::{AppCtx, LayoutCtx, WidgetCtx, WidgetCtxImpl},
   prelude::{Point, Size, INFINITY_SIZE},
   widget::TreeArena,
-  window::{DelayEvent, Window},
+  window::{DelayEvent, Window, WindowId},
 };
-use std::collections::HashMap;
+use std::{collections::HashMap, rc::Rc};
 
 /// boundary limit of the render object's layout
 #[derive(Debug, Clone, PartialEq, Copy)]
@@ -102,14 +102,16 @@ pub(crate) struct LayoutStore {
 
 pub struct Layouter<'a> {
   pub(crate) id: WidgetId,
-  pub(crate) wnd: &'a Window,
+  pub(crate) wnd_id: WindowId,
   pub(crate) is_layout_root: bool,
   pub(crate) tree: &'a mut WidgetTree,
 }
 
 impl<'a> WidgetCtxImpl for Layouter<'a> {
+  #[inline]
   fn id(&self) -> WidgetId { self.id }
-  fn current_wnd(&self) -> &Window { self.wnd }
+  #[inline]
+  fn current_wnd(&self) -> Rc<Window> { AppCtx::get_window_assert(self.wnd_id) }
   fn with_tree<F: FnOnce(&WidgetTree) -> R, R>(&self, f: F) -> R { f(self.tree) }
 }
 
@@ -200,14 +202,16 @@ impl<'a> Layouter<'a> {
         // or modify it during perform layout.
         let tree2 = unsafe { &mut *(self.tree as *mut WidgetTree) };
 
-        let Self { id, wnd, ref tree, .. } = *self;
-        let mut ctx = LayoutCtx { id, wnd, tree: tree2 };
+        let Self { id, wnd_id, ref tree, .. } = *self;
+        let mut ctx = LayoutCtx { id, wnd_id, tree: tree2 };
         let size = id.assert_get(&tree.arena).perform_layout(clamp, &mut ctx);
         // The dynamic widget maybe generate a new widget to instead of self. In that
         // way we needn't add a layout event because it perform layout in another widget
         // and added the event in that widget.
         if id == ctx.id {
-          wnd.add_delay_event(DelayEvent::PerformedLayout(id));
+          self
+            .window()
+            .add_delay_event(DelayEvent::PerformedLayout(id));
         } else {
           self.id = ctx.id;
         }
@@ -270,11 +274,11 @@ impl<'a> Layouter<'a> {
 impl<'a> Layouter<'a> {
   pub(crate) fn new(
     id: WidgetId,
-    wnd: &'a Window,
+    wnd_id: WindowId,
     is_layout_root: bool,
     tree: &'a mut WidgetTree,
   ) -> Self {
-    Self { id, wnd, is_layout_root, tree }
+    Self { id, wnd_id, is_layout_root, tree }
   }
 }
 
diff --git a/core/src/widget_tree/widget_id.rs b/core/src/widget_tree/widget_id.rs
index 44f74807c..6b3216a8c 100644
--- a/core/src/widget_tree/widget_id.rs
+++ b/core/src/widget_tree/widget_id.rs
@@ -196,12 +196,13 @@ impl WidgetId {
     while let Some(id) = w {
       ctx.id = id;
       ctx.painter.save();
+      let wnd = ctx.window();
+      let arena = &wnd.widget_tree.borrow().arena;
 
       let mut need_paint = false;
       if ctx.painter.alpha() != 0. {
         if let Some(layout_box) = ctx.box_rect() {
-          let tree = ctx.wnd.widget_tree.borrow();
-          let render = id.assert_get(&tree.arena);
+          let render = id.assert_get(arena);
           ctx
             .painter
             .translate(layout_box.min_x(), layout_box.min_y());
@@ -210,7 +211,6 @@ impl WidgetId {
         }
       }
 
-      let arena = &ctx.wnd.widget_tree.borrow().arena;
       w = id.first_child(arena).filter(|_| need_paint).or_else(|| {
         let mut node = w;
         while let Some(p) = node {
diff --git a/core/src/window.rs b/core/src/window.rs
index 1888040d3..8bb0f370a 100644
--- a/core/src/window.rs
+++ b/core/src/window.rs
@@ -279,17 +279,17 @@ impl Window {
 
       match e {
         DelayEvent::Mounted(id) => {
-          let e = AllLifecycle::Mounted(LifecycleEvent { id, wnd: self });
+          let e = AllLifecycle::Mounted(LifecycleEvent { id, wnd_id: self.id() });
           self.emit::<LifecycleListener>(id, e);
         }
         DelayEvent::PerformedLayout(id) => {
-          let e = AllLifecycle::PerformedLayout(LifecycleEvent { id, wnd: self });
+          let e = AllLifecycle::PerformedLayout(LifecycleEvent { id, wnd_id: self.id() });
           self.emit::<LifecycleListener>(id, e);
         }
         DelayEvent::Disposed { id, delay_drop } => {
           id.descendants(&self.widget_tree.borrow().arena)
             .for_each(|id| {
-              let e = AllLifecycle::Disposed(LifecycleEvent { id, wnd: self });
+              let e = AllLifecycle::Disposed(LifecycleEvent { id, wnd_id: self.id() });
               self.emit::<LifecycleListener>(id, e);
             });
 
@@ -298,27 +298,27 @@ impl Window {
           }
         }
         DelayEvent::Focus(id) => {
-          let e = AllFocus::Focus(FocusEvent::new(id, self));
+          let e = AllFocus::Focus(FocusEvent::new(id, self.id()));
           self.emit::<FocusListener>(id, e);
         }
         DelayEvent::FocusIn { bottom, up } => {
-          let mut e = AllFocusBubble::FocusInCapture(FocusEvent::new(bottom, self));
+          let mut e = AllFocusBubble::FocusInCapture(FocusEvent::new(bottom, self.id()));
           self.bottom_down_emit::<FocusBubbleListener>(&mut e, bottom, up);
           let mut e = AllFocusBubble::FocusIn(e.into_inner());
           self.bottom_up_emit::<FocusBubbleListener>(&mut e, bottom, up);
         }
         DelayEvent::Blur(id) => {
-          let e = AllFocus::Blur(FocusEvent::new(id, self));
+          let e = AllFocus::Blur(FocusEvent::new(id, self.id()));
           self.emit::<FocusListener>(id, e);
         }
         DelayEvent::FocusOut { bottom, up } => {
-          let mut e = AllFocusBubble::FocusOutCapture(FocusEvent::new(bottom, self));
+          let mut e = AllFocusBubble::FocusOutCapture(FocusEvent::new(bottom, self.id()));
           self.bottom_down_emit::<FocusBubbleListener>(&mut e, bottom, up);
           let mut e = AllFocusBubble::FocusOut(e.into_inner());
           self.bottom_up_emit::<FocusBubbleListener>(&mut e, bottom, up);
         }
         DelayEvent::KeyDown { id, scancode, key } => {
-          let mut e = AllKeyboard::KeyDownCapture(KeyboardEvent::new(scancode, key, id, self));
+          let mut e = AllKeyboard::KeyDownCapture(KeyboardEvent::new(scancode, key, id, self.id()));
           self.bottom_down_emit::<KeyboardListener>(&mut e, id, None);
           let mut e = AllKeyboard::KeyDown(e.into_inner());
           self.bottom_up_emit::<KeyboardListener>(&mut e, id, None);
@@ -338,19 +338,19 @@ impl Window {
           }
         }
         DelayEvent::KeyUp { id, scancode, key } => {
-          let mut e = AllKeyboard::KeyUpCapture(KeyboardEvent::new(scancode, key, id, self));
+          let mut e = AllKeyboard::KeyUpCapture(KeyboardEvent::new(scancode, key, id, self.id()));
           self.bottom_down_emit::<KeyboardListener>(&mut e, id, None);
           let mut e = AllKeyboard::KeyUp(e.into_inner());
           self.bottom_up_emit::<KeyboardListener>(&mut e, id, None);
         }
         DelayEvent::Chars { id, chars } => {
-          let mut e = AllChars::CharsCapture(CharsEvent::new(chars, id, self));
+          let mut e = AllChars::CharsCapture(CharsEvent::new(chars, id, self.id()));
           self.bottom_down_emit::<CharsListener>(&mut e, id, None);
           let mut e = AllChars::Chars(e.into_inner());
           self.bottom_up_emit::<CharsListener>(&mut e, id, None);
         }
         DelayEvent::Wheel { id, delta_x, delta_y } => {
-          let mut e = AllWheel::WheelCapture(WheelEvent::new(delta_x, delta_y, id, self));
+          let mut e = AllWheel::WheelCapture(WheelEvent::new(delta_x, delta_y, id, self.id()));
           self.bottom_down_emit::<WheelListener>(&mut e, id, None);
           let mut e = AllWheel::Wheel(e.into_inner());
           self.bottom_up_emit::<WheelListener>(&mut e, id, None);
@@ -396,7 +396,7 @@ impl Window {
     }
   }
 
-  fn emit<L>(&self, id: WidgetId, mut e: L::Event<'_>)
+  fn emit<L>(&self, id: WidgetId, mut e: L::Event)
   where
     L: EventListener + 'static,
   {
@@ -413,11 +413,11 @@ impl Window {
     );
   }
 
-  fn bottom_down_emit<'a, L>(&self, e: &mut L::Event<'a>, bottom: WidgetId, up: Option<WidgetId>)
+  fn bottom_down_emit<L>(&self, e: &mut L::Event, bottom: WidgetId, up: Option<WidgetId>)
   where
     L: EventListener + 'static,
-    L::Event<'a>: DerefMut,
-    <L::Event<'a> as Deref>::Target: std::borrow::BorrowMut<CommonEvent<'a>>,
+    L::Event: DerefMut,
+    <L::Event as Deref>::Target: std::borrow::BorrowMut<CommonEvent>,
   {
     use std::borrow::Borrow;
 
@@ -440,11 +440,11 @@ impl Window {
     });
   }
 
-  fn bottom_up_emit<'a, L>(&self, e: &mut L::Event<'a>, bottom: WidgetId, up: Option<WidgetId>)
+  fn bottom_up_emit<L>(&self, e: &mut L::Event, bottom: WidgetId, up: Option<WidgetId>)
   where
     L: EventListener + 'static,
-    L::Event<'a>: DerefMut,
-    <L::Event<'a> as Deref>::Target: std::borrow::BorrowMut<CommonEvent<'a>>,
+    L::Event: DerefMut,
+    <L::Event as Deref>::Target: std::borrow::BorrowMut<CommonEvent>,
   {
     use std::borrow::Borrow;
     if !(**e).borrow().is_propagation() {
diff --git a/examples/counter/src/counter.rs b/examples/counter/src/counter.rs
index 685f3422d..58f2ac86b 100644
--- a/examples/counter/src/counter.rs
+++ b/examples/counter/src/counter.rs
@@ -8,12 +8,12 @@ pub fn counter() -> impl Into<Widget> {
       h_align: HAlign::Center,
       align_items: Align::Center,
       @FilledButton {
-        on_tap: move |_: &'_ mut PointerEvent<'_>| *$cnt += 1,
+        on_tap: move |_: &mut _| *$cnt += 1,
         @ { Label::new("Add") }
       }
       @H1 { text: pipe!($cnt.to_string())  }
       @FilledButton {
-        on_tap: move |_: &'_ mut PointerEvent<'_>| *$cnt += -1,
+        on_tap: move |_: &mut _| *$cnt += -1,
         @ { Label::new("Sub") }
       }
     }
diff --git a/tests/rdl_macro_test.rs b/tests/rdl_macro_test.rs
index f783c5b69..c066269c3 100644
--- a/tests/rdl_macro_test.rs
+++ b/tests/rdl_macro_test.rs
@@ -361,9 +361,7 @@ fn closure_in_fn_widget_capture() {
   let hi_res2 = hi_res.clone();
   let w = fn_widget! {
     let mut text = @ Text { text: "hi" };
-    let on_mounted = move |_: &'_ mut LifecycleEvent<'_>| {
-      *$hi_res =$text.text.clone()
-    };
+    let on_mounted = move |_: &mut _| *$hi_res =$text.text.clone();
     @ $text { on_mounted }
   };
 

From 55a4d483753dd2660c72d948cd8831691775afcf Mon Sep 17 00:00:00 2001
From: Adoo <Adoo@outlook.com>
Date: Fri, 4 Aug 2023 17:42:06 +0800
Subject: [PATCH 04/10] =?UTF-8?q?refactor(core):=20=F0=9F=92=A1=20boxed=20?=
 =?UTF-8?q?parent=20build=20id?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 core/src/builtin_widgets.rs                   | 14 +++++++++
 core/src/pipe.rs                              | 15 ++++++----
 core/src/state.rs                             | 14 +++++----
 core/src/widget_children.rs                   | 30 ++++++++++++-------
 core/src/widget_children/multi_child_impl.rs  | 12 ++++----
 core/src/widget_children/single_child_impl.rs | 22 +++++++-------
 6 files changed, 67 insertions(+), 40 deletions(-)

diff --git a/core/src/builtin_widgets.rs b/core/src/builtin_widgets.rs
index e096433af..8aeb158c0 100644
--- a/core/src/builtin_widgets.rs
+++ b/core/src/builtin_widgets.rs
@@ -201,3 +201,17 @@ impl<T> std::ops::DerefMut for FatObj<T> {
   #[inline]
   fn deref_mut(&mut self) -> &mut Self::Target { &mut self.host }
 }
+
+impl<W> BoxedSingleParent for FatObj<W>
+where
+  W: SingleChild + Into<Box<dyn Render>> + Into<Widget> + 'static,
+{
+  fn into_parent(self: Box<Self>, ctx: &mut BuildCtx) -> WidgetId { self.build(ctx) }
+}
+
+impl<W> BoxMultiParent for FatObj<W>
+where
+  W: MultiChild + Into<Box<dyn Render>> + Into<Widget> + 'static,
+{
+  fn into_parent(self: Box<Self>, ctx: &mut BuildCtx) -> WidgetId { self.build(ctx) }
+}
diff --git a/core/src/pipe.rs b/core/src/pipe.rs
index 87bf74063..2aa9279b4 100644
--- a/core/src/pipe.rs
+++ b/core/src/pipe.rs
@@ -13,8 +13,8 @@ use crate::{
   builtin_widgets::{key::AnyKey, Void},
   context::BuildCtx,
   data_widget::attach_to_id,
-  prelude::{AnonymousData, DataWidget, Multi, MultiChild, SingleChild},
-  widget::{QueryOrder, Render, Widget, WidgetBuilder, WidgetId},
+  prelude::{AnonymousData, DataWidget, Multi, MultiChild, RenderParent, SingleChild},
+  widget::{QueryOrder, Widget, WidgetBuilder, WidgetId},
 };
 
 /// A value that can be subscribed its continuous change from the observable
@@ -99,10 +99,13 @@ impl<W: Into<Widget>> WidgetBuilder for Pipe<W> {
   }
 }
 
-impl<R: Into<Box<dyn Render>>> Pipe<R> {
-  pub(crate) fn build_as_render_parent(self, ctx: &mut BuildCtx) -> WidgetId {
+impl<R> Pipe<R> {
+  pub(crate) fn into_only_parent(self, ctx: &mut BuildCtx) -> WidgetId
+  where
+    R: RenderParent,
+  {
     let (v, modifies) = self.unzip();
-    let id = ctx.alloc_widget(v.into());
+    let id = v.into_render_parent(ctx);
     let id_share = Rc::new(Cell::new(id));
     let handle = ctx.handle();
     let h = modifies
@@ -110,7 +113,7 @@ impl<R: Into<Box<dyn Render>>> Pipe<R> {
         handle.with_ctx(|ctx| {
           let id = id_share.get();
           let ctx = ctx.force_as_mut();
-          let new_id = ctx.alloc_widget(v.into());
+          let new_id = v.into_render_parent(ctx);
 
           update_key_status_single(id, new_id, ctx);
           let mut cursor = id.first_child(&ctx.tree.arena);
diff --git a/core/src/state.rs b/core/src/state.rs
index c7649a412..aab5fd52a 100644
--- a/core/src/state.rs
+++ b/core/src/state.rs
@@ -28,20 +28,22 @@ impl<W: SingleChild> SingleChild for State<W> {}
 impl<W: MultiChild> MultiChild for State<W> {}
 
 impl<W: SingleChild + Render + 'static> BoxedSingleParent for State<W> {
-  fn into_render(self: Box<Self>) -> Box<dyn Render> {
-    match *self {
+  fn into_parent(self: Box<Self>, ctx: &mut BuildCtx) -> WidgetId {
+    let r: Box<dyn Render> = match *self {
       State::Stateless(w) => Box::new(w),
       State::Stateful(w) => Box::new(RenderFul(w)),
-    }
+    };
+    ctx.alloc_widget(r)
   }
 }
 
 impl<W: MultiChild + Render + 'static> BoxMultiParent for State<W> {
-  fn into_render(self: Box<Self>) -> Box<dyn Render> {
-    match *self {
+  fn into_parent(self: Box<Self>, ctx: &mut BuildCtx) -> WidgetId {
+    let r: Box<dyn Render> = match *self {
       State::Stateless(w) => Box::new(w),
       State::Stateful(w) => Box::new(RenderFul(w)),
-    }
+    };
+    ctx.alloc_widget(r)
   }
 }
 
diff --git a/core/src/widget_children.rs b/core/src/widget_children.rs
index 3d4436084..b2dbfd092 100644
--- a/core/src/widget_children.rs
+++ b/core/src/widget_children.rs
@@ -41,17 +41,17 @@ pub use child_convert::{ChildFrom, FromAnother};
 /// Trait to tell Ribir a object can have one child.
 pub trait SingleChild {}
 
-/// A boxed render widget that has one child.
-pub trait BoxedSingleParent: SingleChild {
-  fn into_render(self: Box<Self>) -> Box<dyn Render>;
+/// A boxed render widget that support accept one child.
+pub trait BoxedSingleParent {
+  fn into_parent(self: Box<Self>, ctx: &mut BuildCtx) -> WidgetId;
 }
 
 /// Trait to tell Ribir a object that has multi children.
 pub trait MultiChild {}
 
-/// A boxed render widget that has multi children.
-pub trait BoxMultiParent: MultiChild {
-  fn into_render(self: Box<Self>) -> Box<dyn Render>;
+/// A boxed render widget that support accept multi children.
+pub trait BoxMultiParent {
+  fn into_parent(self: Box<Self>, ctx: &mut BuildCtx) -> WidgetId;
 }
 
 /// Trait mark widget can have one child and also have compose logic for widget
@@ -68,15 +68,23 @@ pub type WidgetOf<W> = SinglePair<W, Widget>;
 impl SingleChild for Box<dyn BoxedSingleParent> {}
 impl MultiChild for Box<dyn BoxMultiParent> {}
 
-impl From<Box<dyn BoxMultiParent>> for Box<dyn Render> {
-  #[inline]
-  fn from(v: Box<dyn BoxMultiParent>) -> Self { v.into_render() }
+impl RenderParent for Box<dyn BoxedSingleParent> {
+  fn into_render_parent(self, ctx: &mut BuildCtx) -> WidgetId { self.into_parent(ctx) }
+}
+
+impl RenderParent for Box<dyn BoxMultiParent> {
+  fn into_render_parent(self, ctx: &mut BuildCtx) -> WidgetId { self.into_parent(ctx) }
 }
 
-impl From<Box<dyn BoxedSingleParent>> for Box<dyn Render> {
+pub(crate) trait RenderParent {
+  fn into_render_parent(self, ctx: &mut BuildCtx) -> WidgetId;
+}
+
+impl<T: Into<Box<dyn Render>>> RenderParent for T {
   #[inline]
-  fn from(value: Box<dyn BoxedSingleParent>) -> Self { value.into_render() }
+  fn into_render_parent(self, ctx: &mut BuildCtx) -> WidgetId { ctx.alloc_widget(self.into()) }
 }
+
 #[cfg(test)]
 mod tests {
   use super::*;
diff --git a/core/src/widget_children/multi_child_impl.rs b/core/src/widget_children/multi_child_impl.rs
index d839f0f6a..76c2ce7f9 100644
--- a/core/src/widget_children/multi_child_impl.rs
+++ b/core/src/widget_children/multi_child_impl.rs
@@ -78,17 +78,17 @@ where
 }
 
 trait MultiParent {
-  fn build_as_parent(self, ctx: &mut BuildCtx) -> WidgetId;
+  fn into_multi_parent(self, ctx: &mut BuildCtx) -> WidgetId;
 }
 
-impl<R: Into<Box<dyn Render>> + MultiChild> MultiParent for R {
+impl<R: RenderParent + MultiChild> MultiParent for R {
   #[inline]
-  fn build_as_parent(self, ctx: &mut BuildCtx) -> WidgetId { ctx.alloc_widget(self.into()) }
+  fn into_multi_parent(self, ctx: &mut BuildCtx) -> WidgetId { self.into_render_parent(ctx) }
 }
 
-impl<W: Into<Box<dyn Render>> + MultiChild> MultiParent for Pipe<W> {
+impl<W: RenderParent + MultiChild> MultiParent for Pipe<W> {
   #[inline]
-  fn build_as_parent(self, ctx: &mut BuildCtx) -> WidgetId { self.build_as_render_parent(ctx) }
+  fn into_multi_parent(self, ctx: &mut BuildCtx) -> WidgetId { self.into_only_parent(ctx) }
 }
 
 impl<R, C> MultiWithChild<C> for R
@@ -99,7 +99,7 @@ where
   type Target = MultiPair;
 
   fn with_child(self, child: C, ctx: &BuildCtx) -> Self::Target {
-    let parent = self.build_as_parent(ctx.force_as_mut());
+    let parent = self.into_multi_parent(ctx.force_as_mut());
     let mut children = vec![];
     child.fill_vec(&mut children, ctx);
     MultiPair { parent, children }
diff --git a/core/src/widget_children/single_child_impl.rs b/core/src/widget_children/single_child_impl.rs
index 2de1879b8..8d01c2f24 100644
--- a/core/src/widget_children/single_child_impl.rs
+++ b/core/src/widget_children/single_child_impl.rs
@@ -1,6 +1,5 @@
-use crate::widget::WidgetBuilder;
-
 use super::*;
+use crate::widget::WidgetBuilder;
 
 /// Trait specify what child a widget can have, and the target type is the
 /// result of widget compose its child.
@@ -37,20 +36,21 @@ impl<W, C1: SingleChild, C2> SingleWithChild<C2> for SinglePair<W, C1> {
 }
 
 trait SingleParent {
-  fn build_as_parent(self, ctx: &mut BuildCtx) -> WidgetId;
+  fn into_single_parent(self, ctx: &mut BuildCtx) -> WidgetId;
 }
 
 trait WidgetChild {
   fn child_build(self, ctx: &BuildCtx) -> WidgetId;
 }
 
-impl<W: Into<Box<dyn Render>> + SingleChild + 'static> SingleParent for W {
-  fn build_as_parent(self, ctx: &mut BuildCtx) -> WidgetId { ctx.alloc_widget(self.into()) }
+impl<W: RenderParent + SingleChild + 'static> SingleParent for W {
+  #[inline]
+  fn into_single_parent(self, ctx: &mut BuildCtx) -> WidgetId { self.into_render_parent(ctx) }
 }
 
-impl<W: Into<Box<dyn Render>> + SingleChild + 'static> SingleParent for Pipe<W> {
+impl<W: RenderParent + SingleChild> SingleParent for Pipe<W> {
   #[inline]
-  fn build_as_parent(self, ctx: &mut BuildCtx) -> WidgetId { self.build_as_render_parent(ctx) }
+  fn into_single_parent(self, ctx: &mut BuildCtx) -> WidgetId { self.into_only_parent(ctx) }
 }
 
 impl<D> SingleParent for Stateful<DynWidget<D>>
@@ -58,7 +58,7 @@ where
   D: Render + SingleChild + WidgetBuilder + 'static,
 {
   #[inline]
-  fn build_as_parent(self, ctx: &mut BuildCtx) -> WidgetId {
+  fn into_single_parent(self, ctx: &mut BuildCtx) -> WidgetId {
     Box::new(DynRender::single(self)).build(ctx)
   }
 }
@@ -68,7 +68,7 @@ where
   D: Render + SingleChild + WidgetBuilder + 'static,
 {
   #[inline]
-  fn build_as_parent(self, ctx: &mut BuildCtx) -> WidgetId {
+  fn into_single_parent(self, ctx: &mut BuildCtx) -> WidgetId {
     Box::new(DynRender::option(self)).build(ctx)
   }
 }
@@ -90,7 +90,7 @@ where
 {
   fn build(self, ctx: &BuildCtx) -> WidgetId {
     let Self { widget, child } = self;
-    let p = widget.build_as_parent(ctx.force_as_mut());
+    let p = widget.into_single_parent(ctx.force_as_mut());
     let child = child.child_build(ctx);
     ctx.force_as_mut().append_child(p, child);
     p
@@ -122,7 +122,7 @@ where
     if let Some(child) = child {
       SinglePair { widget, child }.build(ctx)
     } else {
-      widget.build_as_parent(ctx.force_as_mut())
+      widget.into_single_parent(ctx.force_as_mut())
     }
   }
 }

From c84803c27cd338bbf3c6d9f649154289f1dd1e62 Mon Sep 17 00:00:00 2001
From: Adoo <Adoo@outlook.com>
Date: Tue, 22 Aug 2023 16:04:45 +0800
Subject: [PATCH 05/10] =?UTF-8?q?refactor(core):=20=F0=9F=92=A1=20let=20`K?=
 =?UTF-8?q?eyWidget`=20has=20a=20clearer=20responsibility?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 core/src/builtin_widgets/key.rs | 117 +++++++++++---------------------
 core/src/dynamic_widget.rs      |  24 +++----
 core/src/pipe.rs                |  18 ++---
 macros/src/declare_derive.rs    |   3 +
 4 files changed, 58 insertions(+), 104 deletions(-)

diff --git a/core/src/builtin_widgets/key.rs b/core/src/builtin_widgets/key.rs
index f97023c28..0526dada6 100644
--- a/core/src/builtin_widgets/key.rs
+++ b/core/src/builtin_widgets/key.rs
@@ -1,5 +1,6 @@
 use crate::{impl_query_self_only, prelude::*};
 use std::{
+  cell::Cell,
   cmp::{Eq, Ord, PartialOrd},
   fmt::Debug,
 };
@@ -29,66 +30,43 @@ pub enum Key {
   K32([u8; 32]),
 }
 
-/// The KeyStatus is the status of the Key, not the status of the KeyWidget.
-/// The change of Key status is determined by its associated KeyWidget state
-/// and its own state.
-///
-/// The KeyStatus has four status:
-/// The first status: The KeyWidget associated with the Key was constructed, the
-/// Key didn't exist in DynWidget Key List, the key status is `KeyStatus::Init`.
-///
-/// The second status: The KeyWidget associated with the Key was mounted, and
-/// now its status is `KeyStatus::Init`, the key status will be changed
-/// `KeyStatus::Mounted`.
-///
-/// The third status: The KeyWidget associated with the Key was disposed, and
-/// the same key has anther associated KeyWidget was mounted, the key status
-/// will be changed `KeyStatus::Updated`.
-///
-/// The last status: The KeyWidget associated with the Key was disposed, the
-/// same key don't has anther associated KeyWidget, the key status will be
-/// changed `KeyStatus::Disposed`.
-#[derive(PartialEq, Debug, Clone, Copy)]
-pub enum KeyStatus {
-  Init,
-  Mounted,
-  Updated,
-  Disposed,
-}
-
-impl Default for KeyStatus {
-  fn default() -> Self { Self::Init }
-}
-
 #[derive(Clone, Debug, PartialEq, Copy)]
-pub struct KeyChange<V>(pub Option<V>, pub Option<V>);
+pub struct KeyChange<V>(pub Option<V>, pub V);
 
-impl<V> Default for KeyChange<V> {
-  fn default() -> Self { KeyChange(None, None) }
+impl<V: Default> Default for KeyChange<V> {
+  fn default() -> Self { KeyChange(None, V::default()) }
 }
-#[derive(Declare)]
-pub struct KeyWidget<V = ()> {
+
+/// A widget that can be used to track if the widget is the same widget in two
+/// frames by its key. If two widget has same parent and key in two frames, the
+/// new widget in the next frame will be treated as the same widget in the last
+/// frame.
+#[derive(Declare, Declare2)]
+pub struct KeyWidget<V: Default + 'static = ()> {
   #[declare(convert=into)]
   pub key: Key,
-  pub value: Option<V>,
-
-  #[declare(default)]
+  #[declare(default, strict)]
+  pub value: V,
+  #[declare(skip)]
   before_value: Option<V>,
-  #[declare(default)]
-  status: KeyStatus,
+  #[declare(skip)]
+  has_successor: Cell<bool>,
 }
 
+/// A trait for `keyWidget` that use to record information of the previous and
+/// next key widget.
 pub(crate) trait AnyKey: Any {
   fn key(&self) -> Key;
-  fn record_before_value(&self, key: &dyn AnyKey);
-  fn disposed(&self);
-  fn mounted(&self);
+  /// Record the previous KeyWidget associated with the same key.
+  fn record_prev_key_widget(&self, key: &dyn AnyKey);
+  /// Record the next KeyWidget associated with the same key.
+  fn record_next_key_widget(&self, key: &dyn AnyKey);
   fn as_any(&self) -> &dyn Any;
 }
 
 impl<V> AnyKey for State<KeyWidget<V>>
 where
-  V: Clone + PartialEq,
+  V: Default + Clone + PartialEq,
   Self: Any,
 {
   fn key(&self) -> Key {
@@ -98,7 +76,7 @@ where
     }
   }
 
-  fn record_before_value(&self, key: &dyn AnyKey) {
+  fn record_prev_key_widget(&self, key: &dyn AnyKey) {
     assert_eq!(self.key(), key.key());
     let Some(key) = key.as_any().downcast_ref::<Self>() else {
       log::warn!("Different value type for same key.");
@@ -116,28 +94,12 @@ where
     }
   }
 
-  fn disposed(&self) {
-    match self {
-      State::Stateless(_) => (),
-      State::Stateful(this) => {
-        this.state_ref().status = KeyStatus::Disposed;
-      }
-    }
-  }
-
-  fn mounted(&self) {
-    match self {
-      State::Stateless(_) => {}
-      State::Stateful(this) => {
-        this.state_ref().status = KeyStatus::Mounted;
-      }
-    }
-  }
+  fn record_next_key_widget(&self, _: &dyn AnyKey) { self.as_ref().has_successor.set(true); }
 
   fn as_any(&self) -> &dyn Any { self }
 }
 
-impl<V: 'static + Clone + PartialEq> ComposeChild for KeyWidget<V> {
+impl<V: 'static + Default + Clone + PartialEq> ComposeChild for KeyWidget<V> {
   type Child = Widget;
   #[inline]
   fn compose_child(this: State<Self>, child: Self::Child) -> Widget {
@@ -150,24 +112,27 @@ impl_query_self_only!(Box<dyn AnyKey>);
 
 impl<V> KeyWidget<V>
 where
-  V: Clone + PartialEq,
+  V: Default + Clone + PartialEq,
 {
-  fn record_before_value(&mut self, value: Option<V>) {
-    self.status = KeyStatus::Updated;
-    self.before_value = value;
+  /// Detect if the key widget is a new widget, there is not predecessor widget
+  /// that has same key. Usually used in `on_mounted` callback.
+  pub fn is_enter(&self) -> bool { self.before_value.is_none() }
+  /// Detect if the key widget is really be disposed, there is not successor
+  /// widget has same key. Usually used in `on_disposed` callback.
+  pub fn is_leave(&self) -> bool { !self.has_successor.get() }
+
+  /// Detect if the value of the key widget is changed
+  pub fn is_changed(&self) -> bool {
+    self.before_value.is_some() && self.before_value.as_ref() != Some(&self.value)
   }
 
-  pub fn is_enter(&self) -> bool { self.status == KeyStatus::Mounted }
-
-  pub fn is_modified(&self) -> bool { self.status == KeyStatus::Updated }
-
-  pub fn is_changed(&self) -> bool { self.is_modified() && self.before_value != self.value }
-
-  pub fn is_disposed(&self) -> bool { self.status == KeyStatus::Disposed }
-
   pub fn get_change(&self) -> KeyChange<V> {
     KeyChange(self.before_value.clone(), self.value.clone())
   }
+
+  pub fn before_value(&self) -> Option<&V> { self.before_value.as_ref() }
+
+  fn record_before_value(&mut self, value: V) { self.before_value = Some(value); }
 }
 
 impl_query_self_only!(Key);
diff --git a/core/src/dynamic_widget.rs b/core/src/dynamic_widget.rs
index 8400c24bd..7f3dc4e52 100644
--- a/core/src/dynamic_widget.rs
+++ b/core/src/dynamic_widget.rs
@@ -345,18 +345,12 @@ impl<D: 'static> DynRender<D> {
         let key = &new_key_widget.key();
         if let Some(wid) = old_key_list.get(key) {
           inspect_key(wid, arena, |old_key_widget: &dyn AnyKey| {
-            new_key_widget.record_before_value(old_key_widget);
+            new_key_widget.record_prev_key_widget(old_key_widget);
+            old_key_widget.record_next_key_widget(new_key_widget);
           });
-          old_key_list.remove(key);
-        } else {
-          new_key_widget.mounted();
         }
       });
     });
-
-    old_key_list
-      .values()
-      .for_each(|wid| inspect_key(wid, arena, |old_key_widget| old_key_widget.disposed()));
   }
 }
 
@@ -588,23 +582,23 @@ mod tests {
             KeyWidget {
               id: key,
               key: Key::from(i),
-              value: Some(c),
+              value: c,
 
               MockBox {
                 size: Size::zero(),
                 on_mounted: move |_| {
                   if key.is_enter() {
-                    (*enter_list).push(key.value.unwrap());
+                    (*enter_list).push(key.value);
                   }
 
                   if key.is_changed() {
-                    (*update_list).push(key.value.unwrap());
+                    (*update_list).push(key.value);
                     *key_change = key.get_change();
                   }
                 },
                 on_disposed: move |_| {
-                  if key.is_disposed() {
-                    (*leave_list).push(key.value.unwrap());
+                  if key.is_leave() {
+                    (*leave_list).push(key.value);
                   }
                 }
               }
@@ -661,7 +655,7 @@ mod tests {
         .iter()
         .all(|item| expect_vec.contains(item))
     );
-    assert_eq!(*key_change.state_ref(), KeyChange(Some('2'), Some('b')));
+    assert_eq!(*key_change.state_ref(), KeyChange(Some('2'), 'b'));
     (*update_list.state_ref()).clear();
 
     // 4. remove the second item
@@ -690,7 +684,7 @@ mod tests {
         .iter()
         .all(|item| expect_vec.contains(item))
     );
-    assert_eq!(*key_change.state_ref(), KeyChange(Some('1'), Some('a')));
+    assert_eq!(*key_change.state_ref(), KeyChange(Some('1'), 'a'));
     (*update_list.state_ref()).clear();
   }
 
diff --git a/core/src/pipe.rs b/core/src/pipe.rs
index 2aa9279b4..d696ff4bf 100644
--- a/core/src/pipe.rs
+++ b/core/src/pipe.rs
@@ -207,10 +207,8 @@ fn update_key_status_single(new: WidgetId, old: WidgetId, ctx: &BuildCtx) {
   inspect_key(old, ctx, |old_key| {
     inspect_key(new, ctx, |new_key| {
       if old_key.key() == new_key.key() {
-        new_key.record_before_value(old_key);
-      } else {
-        old_key.disposed();
-        new_key.mounted();
+        new_key.record_prev_key_widget(old_key);
+        old_key.record_next_key_widget(new_key);
       }
     })
   })
@@ -230,19 +228,13 @@ fn update_key_state_multi(old: &[WidgetId], new: &[WidgetId], ctx: &BuildCtx) {
     inspect_key(*n, ctx, |new_key: &dyn AnyKey| {
       let key = &new_key.key();
       if let Some(o) = old_key_list.get(key) {
-        inspect_key(*o, ctx, |old_key_widget: &dyn AnyKey| {
-          new_key.record_before_value(old_key_widget)
+        inspect_key(*o, ctx, |old_key: &dyn AnyKey| {
+          new_key.record_prev_key_widget(old_key);
+          old_key.record_next_key_widget(new_key);
         });
-        old_key_list.remove(key);
-      } else {
-        new_key.mounted();
       }
     });
   }
-
-  old_key_list
-    .values()
-    .for_each(|o| inspect_key(*o, ctx, |old_key| old_key.disposed()));
 }
 
 fn inspect_key(id: WidgetId, ctx: &BuildCtx, mut cb: impl FnMut(&dyn AnyKey)) {
diff --git a/macros/src/declare_derive.rs b/macros/src/declare_derive.rs
index 966147fa2..16180f3d3 100644
--- a/macros/src/declare_derive.rs
+++ b/macros/src/declare_derive.rs
@@ -54,6 +54,7 @@ mod kw {
   custom_keyword!(into);
   custom_keyword!(custom);
   custom_keyword!(skip);
+  custom_keyword!(strict);
   custom_keyword!(strip_option);
 }
 
@@ -129,6 +130,8 @@ impl Parse for DeclareAttr {
         attr.default = Some(input.parse()?);
       } else if lookahead.peek(kw::skip) {
         attr.skip = Some(input.parse()?);
+      } else if lookahead.peek(kw::strict) {
+        let _ = input.parse::<kw::strict>();
       } else {
         return Err(lookahead.error());
       }

From b916d953339d85db958dbf7f063905955e395a94 Mon Sep 17 00:00:00 2001
From: Adoo <Adoo@outlook.com>
Date: Tue, 8 Aug 2023 18:46:24 +0800
Subject: [PATCH 06/10] =?UTF-8?q?refactor(core):=20=F0=9F=92=A1implement?=
 =?UTF-8?q?=20state=20share=20and=20split=20hierarchy.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 algo/src/cow_rc.rs                            |   9 +-
 core/src/animation.rs                         |   2 -
 core/src/animation/animate.rs                 | 280 +++---
 core/src/animation/lerp.rs                    |  27 +
 core/src/animation/property.rs                | 222 -----
 core/src/animation/transition.rs              |  75 +-
 core/src/builtin_widgets.rs                   | 200 ++--
 core/src/builtin_widgets/anchor.rs            |  18 +-
 core/src/builtin_widgets/box_decoration.rs    |   2 +-
 core/src/builtin_widgets/clip.rs              |   4 +-
 core/src/builtin_widgets/cursor.rs            |  82 +-
 core/src/builtin_widgets/delay_drop.rs        |  29 +
 core/src/builtin_widgets/delay_drop_widget.rs |  17 -
 core/src/builtin_widgets/fitted_box.rs        |   2 +-
 core/src/builtin_widgets/focus_node.rs        |  27 +-
 core/src/builtin_widgets/focus_scope.rs       |   4 +-
 core/src/builtin_widgets/ignore_pointer.rs    |   2 +-
 core/src/builtin_widgets/key.rs               |  20 +-
 core/src/builtin_widgets/opacity.rs           |   2 +-
 core/src/builtin_widgets/scrollable.rs        |  83 +-
 core/src/builtin_widgets/theme.rs             |   9 +-
 core/src/builtin_widgets/theme/icon_theme.rs  |   8 +-
 .../builtin_widgets/theme/transition_theme.rs |   7 -
 core/src/builtin_widgets/unconstrained_box.rs |   2 +-
 core/src/builtin_widgets/visibility.rs        |  22 +-
 core/src/context/app_ctx.rs                   |  93 +-
 core/src/context/build_context.rs             |  90 +-
 core/src/data_widget.rs                       |  26 +-
 core/src/declare.rs                           |  22 +-
 core/src/dynamic_widget.rs                    | 899 -----------------
 core/src/events/dispatcher.rs                 |   4 +-
 core/src/events/focus_mgr.rs                  |   4 +-
 core/src/lib.rs                               |   9 +-
 core/src/pipe.rs                              | 920 +++++++++++++++---
 core/src/state.rs                             | 397 +++++---
 core/src/state/map_state.rs                   | 259 +++++
 core/src/state/readonly.rs                    | 103 --
 core/src/state/splitted_state.rs              | 205 ++++
 core/src/state/stateful.rs                    | 625 ++++++------
 core/src/test_helper.rs                       |  18 +-
 core/src/ticker.rs                            |  18 +-
 core/src/widget.rs                            |  21 +-
 core/src/widget_children.rs                   |  91 +-
 core/src/widget_children/child_convert.rs     |  54 +-
 .../src/widget_children/compose_child_impl.rs |  21 +-
 core/src/widget_children/multi_child_impl.rs  |  47 +-
 core/src/widget_children/single_child_impl.rs |  80 +-
 core/src/widget_tree.rs                       |  51 +-
 core/src/widget_tree/widget_id.rs             |  12 +-
 core/src/window.rs                            | 219 +++--
 dev-helper/src/example_framework.rs           |   3 +-
 dev-helper/src/widget_test.rs                 |  10 +-
 examples/counter/src/counter.rs               |   6 +-
 examples/greet/Cargo.toml                     |  21 -
 examples/greet/README.md                      |   9 -
 examples/greet/src/greet.rs                   |  68 --
 examples/greet/src/main.rs                    |   8 -
 examples/todos/src/todos.rs                   | 233 ++---
 macros/src/builtin_fields_list.rs             |   2 +-
 macros/src/child_template.rs                  |   2 +-
 macros/src/declare_derive.rs                  |   2 +-
 macros/src/declare_derive2.rs                 | 108 +-
 macros/src/declare_obj.rs                     | 258 ++---
 macros/src/fn_widget_macro.rs                 |  31 +-
 macros/src/lib.rs                             |  83 +-
 macros/src/pipe_macro.rs                      |  62 +-
 macros/src/rdl_macro.rs                       |  79 +-
 macros/src/symbol_process.rs                  | 509 ++++++++--
 macros/src/watch_macro.rs                     |  38 +-
 macros/src/widget_macro/code_gen.rs           |   4 +-
 macros/src/widget_macro/name_used_info.rs     |   4 +-
 macros/src/writer_map_macro.rs                | 107 ++
 painter/src/style.rs                          |   5 +
 ribir/src/app.rs                              |  35 +-
 ribir/tests/timer_test.rs                     |  40 +-
 tests/Cargo.toml                              |   4 -
 tests/animations_syntax_test.rs               |  93 --
 .../declare/animations_base_syntax_pass.rs    |  63 --
 tests/declare_builder_test.rs                 |  10 +-
 tests/rdl_macro_test.rs                       | 153 +--
 themes/material/src/lib.rs                    | 219 +++--
 themes/material/src/ripple.rs                 | 150 ++-
 themes/material/src/state_layer.rs            |  63 +-
 widgets/src/buttons.rs                        |  60 +-
 widgets/src/checkbox.rs                       |  11 +-
 widgets/src/input.rs                          |   2 +-
 widgets/src/input/editarea.rs                 |   2 +-
 widgets/src/input/handle.rs                   |  10 +-
 widgets/src/input/text_selectable.rs          |  14 +-
 widgets/src/layout/constrained_box.rs         |   2 +-
 widgets/src/layout/container.rs               |   2 +-
 widgets/src/layout/expanded.rs                |   2 +-
 widgets/src/lists.rs                          | 148 +--
 widgets/src/path.rs                           |   2 +-
 widgets/src/text_field.rs                     | 321 +++---
 95 files changed, 4475 insertions(+), 4026 deletions(-)
 delete mode 100644 core/src/animation/property.rs
 create mode 100644 core/src/builtin_widgets/delay_drop.rs
 delete mode 100644 core/src/builtin_widgets/delay_drop_widget.rs
 delete mode 100644 core/src/dynamic_widget.rs
 create mode 100644 core/src/state/map_state.rs
 delete mode 100644 core/src/state/readonly.rs
 create mode 100644 core/src/state/splitted_state.rs
 delete mode 100644 examples/greet/Cargo.toml
 delete mode 100644 examples/greet/README.md
 delete mode 100644 examples/greet/src/greet.rs
 delete mode 100644 examples/greet/src/main.rs
 create mode 100644 macros/src/writer_map_macro.rs
 delete mode 100644 tests/animations_syntax_test.rs
 delete mode 100644 tests/compile_msg/declare/animations_base_syntax_pass.rs

diff --git a/algo/src/cow_rc.rs b/algo/src/cow_rc.rs
index f68d81c8f..9f86e09e6 100644
--- a/algo/src/cow_rc.rs
+++ b/algo/src/cow_rc.rs
@@ -1,5 +1,5 @@
 use std::{
-  borrow::Borrow,
+  borrow::{Borrow, BorrowMut},
   fmt::Debug,
   hash::Hash,
   ops::{Bound, Range},
@@ -88,6 +88,13 @@ where
   }
 }
 
+impl<B: ?Sized + ToOwned> std::ops::DerefMut for CowArc<B>
+where
+  B::Owned: Clone + std::borrow::BorrowMut<B>,
+{
+  fn deref_mut(&mut self) -> &mut B { self.to_mut().borrow_mut() }
+}
+
 impl<T: ToOwned + ?Sized + 'static> Clone for CowArc<T> {
   #[inline]
   fn clone(&self) -> Self {
diff --git a/core/src/animation.rs b/core/src/animation.rs
index fdf4ed031..e6e7466f3 100644
--- a/core/src/animation.rs
+++ b/core/src/animation.rs
@@ -11,5 +11,3 @@ mod lerp;
 pub use lerp::Lerp;
 mod repeat;
 pub use repeat::*;
-mod property;
-pub use property::{LerpProp, Prop, Property};
diff --git a/core/src/animation/animate.rs b/core/src/animation/animate.rs
index db9d1d93e..19e7e1cd9 100644
--- a/core/src/animation/animate.rs
+++ b/core/src/animation/animate.rs
@@ -1,32 +1,47 @@
-use crate::{
-  prelude::*,
-  ticker::{FrameMsg, FrameTicker},
-};
-use std::{
-  cell::RefCell,
-  ops::DerefMut,
-  rc::Rc,
-  time::{Duration, Instant},
-};
-
-use super::property::AnimateProperty;
-
-#[derive(Declare)]
-pub struct Animate<T, P: AnimateProperty> {
+use crate::{prelude::*, ticker::FrameMsg, window::WindowId};
+use std::time::Instant;
+
+#[derive(Declare2)]
+pub struct Animate<T, S>
+where
+  T: Roc + 'static,
+  S: AnimateState + 'static,
+{
+  #[declare(strict)]
   pub transition: T,
-  pub prop: P,
-  pub from: P::Value,
+  #[declare(strict)]
+  pub state: S,
+  pub from: <S::State as StateReader>::Value,
   #[declare(skip)]
-  running_info: Option<AnimateInfo<P::Value>>,
-  #[declare(skip, default = ctx.window().frame_ticker.clone())]
-  frame_ticker: FrameTicker,
-  #[declare(skip, default = ctx.window().animate_track())]
-  animate_track: AnimateTrack,
-  #[declare(skip, default = ctx.window().frame_scheduler())]
-  frame_scheduler: FuturesLocalScheduler,
+  running_info: Option<AnimateInfo<<S::State as StateReader>::Value>>,
+  #[declare(skip, default = ctx.window().id())]
+  window_id: WindowId,
+}
+
+pub trait AnimateState {
+  type State: StateWriter;
+  fn state(&self) -> &Self::State;
+
+  fn calc_lerp_value(
+    &mut self,
+    from: &<Self::State as StateReader>::Value,
+    to: &<Self::State as StateReader>::Value,
+    rate: f32,
+  ) -> <Self::State as StateReader>::Value;
 }
 
-pub struct AnimateInfo<V> {
+/// A state with a lerp function as an animation state that use the `lerp_fn`
+/// function to calc the linearly lerp value by rate, and not require the value
+/// type of the state to implement the `Lerp` trait.
+///
+/// User can use it if the value type of the state is not implement the `Lerp`
+/// or override the lerp algorithm of the value type of state.
+pub struct LerpFnState<S, F> {
+  lerp_fn: F,
+  state: S,
+}
+
+pub(crate) struct AnimateInfo<V> {
   from: V,
   to: V,
   start_at: Instant,
@@ -36,53 +51,75 @@ pub struct AnimateInfo<V> {
   _tick_msg_guard: Option<SubscriptionGuard<BoxSubscription<'static>>>,
 }
 
-impl<'a, T: Roc, P: AnimateProperty> StatefulRef<'a, Animate<T, P>>
+impl<T, S> State<Animate<T, S>>
 where
-  Animate<T, P>: 'static,
+  T: Roc + 'static,
+  S: AnimateState + 'static,
+  <S::State as StateReader>::Value: Clone,
 {
   pub fn run(&mut self) {
-    let new_to = self.prop.get();
-    // if animate is running, animate start from current value.
-    let Animate { prop, running_info, .. } = self.deref_mut();
-    if let Some(AnimateInfo { from, to, last_progress, .. }) = running_info {
-      *from = prop.calc_lerp_value(from, to, last_progress.value());
+    let mut animate_ref = self.write();
+    let this = &mut *animate_ref;
+    let wnd_id = this.window_id;
+    let new_to = this.state.state().read().clone();
+
+    if let Some(AnimateInfo { from, to, last_progress, .. }) = &mut this.running_info {
+      *from = this.state.calc_lerp_value(from, to, last_progress.value());
       *to = new_to;
-    } else {
-      let animate = self.clone_stateful();
-      let ticker = self.frame_ticker.frame_tick_stream();
-      let unsub = ticker.subscribe(move |msg| match msg {
-        FrameMsg::NewFrame(_) => {}
-        FrameMsg::LayoutReady(time) => {
-          let p = animate.shallow_ref().lerp(time);
-          if matches!(p, AnimateProgress::Finish) {
-            let scheduler = animate.silent_ref().frame_scheduler.clone();
-            let animate = animate.clone();
-            observable::of(())
-              .delay(Duration::ZERO, scheduler)
-              .subscribe(move |_| {
-                animate.silent_ref().stop();
-              });
+    } else if let Some(wnd) = AppCtx::get_window(wnd_id) {
+      drop(animate_ref);
+
+      let animate = self.clone_writer();
+      let ticker = wnd.frame_ticker.frame_tick_stream();
+      let unsub = ticker.subscribe(move |msg| {
+        match msg {
+          FrameMsg::NewFrame(time) => {
+            let p = animate.read().running_info.as_ref().unwrap().last_progress;
+            // Stop the animate at the next frame of animate finished, to ensure draw the
+            // last frame of the animate.
+            if matches!(p, AnimateProgress::Finish) {
+              let wnd = AppCtx::get_window(wnd_id).unwrap();
+              let animate = animate.clone_writer();
+              wnd
+                .frame_spawn(async move { animate.silent().stop() })
+                .unwrap();
+            } else {
+              animate.shallow().lerp_by_instant(time);
+            }
+          }
+          FrameMsg::LayoutReady(_) => {}
+          // use silent_ref because the state of animate change, bu no need to effect the framework.
+          FrameMsg::Finish(_) => {
+            let animate = &mut *animate.silent();
+            let info = animate.running_info.as_mut().unwrap();
+            *animate.state.state().shallow() = info.to.clone();
+            info.already_lerp = false;
           }
         }
-        // use silent_ref because the state of animate change, bu no need to effect the framework.
-        FrameMsg::Finish(_) => animate.silent_ref().frame_finished(),
       });
       let guard = BoxSubscription::new(unsub).unsubscribe_when_dropped();
-      self.running_info = Some(AnimateInfo {
-        from: self.from.clone(),
+      let animate = &mut *self.write();
+      animate.running_info = Some(AnimateInfo {
+        from: animate.from.clone(),
         to: new_to,
         start_at: Instant::now(),
         last_progress: AnimateProgress::Dismissed,
         _tick_msg_guard: Some(guard),
         already_lerp: false,
       });
-      self.animate_track.set_actived(true);
+      wnd.inc_running_animate();
     }
   }
 }
 
-impl<T: Roc, P: AnimateProperty> Animate<T, P> {
-  fn lerp(&mut self, now: Instant) -> AnimateProgress {
+impl<T: Roc, S> Animate<T, S>
+where
+  S: AnimateState + 'static,
+{
+  fn lerp_by_instant(&mut self, now: Instant) -> AnimateProgress
+  where
+    <S::State as StateReader>::Value: Clone,
+  {
     let AnimateInfo {
       from,
       to,
@@ -102,15 +139,15 @@ impl<T: Roc, P: AnimateProperty> Animate<T, P> {
     let elapsed = now - *start_at;
     let progress = self.transition.rate_of_change(elapsed);
 
-    let prop = &mut self.prop;
     match progress {
       AnimateProgress::Between(rate) => {
+        let value = self.state.calc_lerp_value(from, to, rate);
+        let state = &mut self.state.state().shallow();
         // the state may change during animate.
-        *to = prop.get();
-        let value = prop.calc_lerp_value(from, to, rate);
-        prop.shallow_set(value);
+        *to = state.clone();
+        **state = value;
       }
-      AnimateProgress::Dismissed => prop.set(from.clone()),
+      AnimateProgress::Dismissed => *self.state.state().shallow() = from.clone(),
       AnimateProgress::Finish => {}
     }
 
@@ -120,90 +157,89 @@ impl<T: Roc, P: AnimateProperty> Animate<T, P> {
     progress
   }
 
-  fn frame_finished(&mut self) {
-    let info = self
-      .running_info
-      .as_mut()
-      .expect("This animation is not running.");
-
-    if !matches!(info.last_progress, AnimateProgress::Finish) {
-      self.prop.set(info.to.clone())
-    }
-    info.already_lerp = false;
-  }
-
   pub fn stop(&mut self) {
-    self.animate_track.set_actived(false);
-    self.running_info.take();
+    if self.is_running() {
+      if let Some(wnd) = AppCtx::get_window(self.window_id) {
+        wnd.dec_running_animate();
+        self.running_info.take();
+      }
+    }
   }
 
   #[inline]
   pub fn is_running(&self) -> bool { self.running_info.is_some() }
 }
 
-pub struct AnimateTrack {
-  pub(crate) actived: bool,
-  pub(crate) actived_cnt: Rc<RefCell<u32>>,
-}
-
-impl Drop for AnimateTrack {
+impl<T: Roc, P> Drop for Animate<T, P>
+where
+  P: AnimateState + 'static,
+{
   fn drop(&mut self) {
-    if self.actived {
-      *self.actived_cnt.borrow_mut() -= 1;
+    if self.is_running() {
+      if let Some(wnd) = AppCtx::get_window(self.window_id).filter(|_| self.is_running()) {
+        wnd.dec_running_animate();
+      }
     }
-    self.actived = false;
   }
 }
 
-impl AnimateTrack {
-  fn set_actived(&mut self, actived: bool) {
-    if self.actived == actived {
-      return;
-    }
-    self.actived = actived;
-    match actived {
-      true => *self.actived_cnt.borrow_mut() += 1,
-      false => *self.actived_cnt.borrow_mut() -= 1,
-    };
-  }
+impl<V, S> AnimateState for S
+where
+  S: StateWriter<Value = V>,
+  V: Lerp,
+{
+  type State = S;
+
+  fn state(&self) -> &Self::State { self }
+
+  fn calc_lerp_value(&mut self, from: &V, to: &V, rate: f32) -> V { from.lerp(to, rate) }
+}
+
+impl<V, S, F> AnimateState for LerpFnState<S, F>
+where
+  S: StateWriter<Value = V>,
+  F: FnMut(&V, &V, f32) -> V,
+{
+  type State = S;
+
+  fn state(&self) -> &Self::State { &self.state }
+
+  fn calc_lerp_value(&mut self, from: &V, to: &V, rate: f32) -> V { (self.lerp_fn)(from, to, rate) }
+}
+
+impl<V, S, F> LerpFnState<S, F>
+where
+  S: StateReader<Value = V>,
+  F: FnMut(&V, &V, f32) -> V,
+{
+  #[inline]
+  pub fn new(state: S, lerp_fn: F) -> Self { Self { state, lerp_fn } }
 }
 
 #[cfg(test)]
 mod tests {
   use super::*;
-  use crate::{
-    animation::{easing, Prop},
-    declare::Declare,
-    state::Stateful,
-    test_helper::TestWindow,
-  };
+  use crate::{animation::easing, state::Stateful, test_helper::TestWindow};
+  use std::time::Duration;
 
   #[test]
   fn fix_animate_circular_mut_borrow() {
     let _guard = unsafe { AppCtx::new_lock_scope() };
 
-    let wnd = TestWindow::new(Void {});
-    let mut tree = wnd.widget_tree.borrow_mut();
-    let ctx = BuildCtx::new(None, &mut tree);
-
-    let animate = Animate::declare_builder()
-      .transition(
-        Transition::declare_builder()
-          .easing(easing::LINEAR)
-          .duration(Duration::ZERO)
-          .build(&ctx),
-      )
-      .prop(Prop::new(
-        Stateful::new(1.),
-        |v| *v,
-        |_: &mut f32, _: f32| {},
-      ))
-      .from(0.)
-      .build(&ctx);
-
-    let animate = Stateful::new(animate);
-    animate.state_ref().run();
-
-    wnd.frame_ticker.emit(FrameMsg::LayoutReady(Instant::now()));
+    let w = fn_widget! {
+      let mut animate = @Animate {
+        transition: @Transition {
+          easing: easing::LINEAR,
+          duration: Duration::ZERO,
+        }.into_inner(),
+        state: Stateful::new(1.),
+        from: 0.,
+      };
+      animate.run();
+      @Void {}
+    };
+
+    let mut wnd = TestWindow::new(w);
+    wnd.draw_frame();
   }
 }
diff --git a/core/src/animation/lerp.rs b/core/src/animation/lerp.rs
index fa3cb5b89..a2801829c 100644
--- a/core/src/animation/lerp.rs
+++ b/core/src/animation/lerp.rs
@@ -1,3 +1,5 @@
+use ribir_text::{Em, FontSize, Pixel, PIXELS_PER_EM};
+
 use crate::prelude::{
   Angle, Box2D, Brush, Color, DevicePoint, DeviceRect, DeviceSize, DeviceVector, Point, Radius,
   Rect, Size, Transform, Vector,
@@ -169,6 +171,31 @@ impl Lerp for Transform {
   }
 }
 
+impl Lerp for Pixel {
+  #[inline]
+  fn lerp(&self, to: &Self, factor: f32) -> Self {
+    let v = self.0.lerp(&to.0, factor);
+    Pixel(v.into())
+  }
+}
+
+impl Lerp for Em {
+  #[inline]
+  fn lerp(&self, to: &Self, factor: f32) -> Self {
+    let v = self.value().lerp(&to.value(), factor);
+    Em::relative_to(v, FontSize::Pixel(PIXELS_PER_EM.into()))
+  }
+}
+
+impl Lerp for FontSize {
+  fn lerp(&self, to: &Self, factor: f32) -> Self {
+    let from = self.into_pixel().value();
+    let to = to.into_pixel().value();
+    let v = from.lerp(&to, factor);
+    FontSize::Pixel(v.into())
+  }
+}
+
 #[cfg(test)]
 mod tests {
   use super::*;
diff --git a/core/src/animation/property.rs b/core/src/animation/property.rs
deleted file mode 100644
index 928a92fcb..000000000
--- a/core/src/animation/property.rs
+++ /dev/null
@@ -1,222 +0,0 @@
-use crate::state::Stateful;
-use std::convert::Infallible;
-
-use super::Lerp;
-use rxrust::{
-  observable,
-  ops::box_it::{BoxIt, BoxOp},
-  prelude::ObservableExt,
-};
-
-/// Property is a value with can be accessed and watch its changes.
-pub trait Property {
-  type Value: Clone;
-  fn get(&self) -> Self::Value;
-  fn set(&mut self, v: Self::Value);
-  fn shallow_set(&mut self, v: Self::Value);
-  fn modifies(&self) -> BoxOp<'static, (), Infallible>;
-}
-
-pub trait AnimateProperty: Property {
-  fn calc_lerp_value(&self, from: &Self::Value, to: &Self::Value, rate: f32) -> Self::Value;
-}
-
-pub struct Prop<T, G, S> {
-  target: Stateful<T>,
-  getter: G,
-  setter: S,
-}
-
-#[derive(Clone)]
-pub struct LerpProp<P, F> {
-  prop: P,
-  /// function calc the linearly lerp value by rate, three arguments are
-  /// `from` `to` and `rate`, specify `lerp_fn` when the animate state not
-  /// implement `Lerp` trait or you want to specify a custom lerp function.
-  lerp_fn: F,
-}
-
-impl<T, G, S, V> Prop<T, G, S>
-where
-  G: Fn(&T) -> V,
-  S: FnMut(&mut T, V),
-  V: Clone,
-{
-  #[inline]
-  pub fn new(target: Stateful<T>, getter: G, setter: S) -> Self { Self { target, getter, setter } }
-}
-
-impl<P, F> LerpProp<P, F>
-where
-  P: Property,
-  F: Fn(&P::Value, &P::Value, f32) -> P::Value,
-{
-  #[inline]
-  pub fn new(prop: P, lerp_fn: F) -> Self { Self { prop, lerp_fn } }
-}
-
-impl<T, G, S, V> Property for Prop<T, G, S>
-where
-  G: Fn(&T) -> V,
-  S: FnMut(&mut T, V),
-  V: Clone,
-{
-  type Value = V;
-
-  #[inline]
-  fn get(&self) -> V { (self.getter)(&*self.target.state_ref()) }
-
-  #[inline]
-  fn set(&mut self, v: V) { (self.setter)(&mut *self.target.state_ref(), v); }
-
-  #[inline]
-  fn shallow_set(&mut self, v: Self::Value) { (self.setter)(&mut *self.target.shallow_ref(), v); }
-
-  #[inline]
-  fn modifies(&self) -> BoxOp<'static, (), Infallible> { self.target.modifies().box_it() }
-}
-
-impl<T, G, S> AnimateProperty for Prop<T, G, S>
-where
-  Self: Property,
-  Self::Value: Lerp,
-{
-  #[inline]
-
-  fn calc_lerp_value(&self, from: &Self::Value, to: &Self::Value, rate: f32) -> Self::Value {
-    from.lerp(to, rate)
-  }
-}
-
-impl<T, G, S, V> Prop<T, G, S>
-where
-  Self: Property<Value = V>,
-  G: Fn(&T) -> V + Clone + 'static,
-  V: PartialEq + Clone + 'static,
-  T: 'static,
-{
-  pub fn changes(&self) -> BoxOp<'static, V, Infallible> {
-    let target = self.target.clone();
-    let getter = self.getter.clone();
-    self
-      .modifies()
-      .map(move |_| getter(&*target.state_ref()))
-      .distinct_until_changed()
-      .box_it()
-  }
-}
-
-impl<P, F> Property for LerpProp<P, F>
-where
-  P: Property,
-{
-  type Value = P::Value;
-
-  #[inline]
-  fn get(&self) -> Self::Value { self.prop.get() }
-
-  #[inline]
-  fn set(&mut self, v: Self::Value) { self.prop.set(v) }
-
-  #[inline]
-  fn shallow_set(&mut self, v: Self::Value) { self.prop.shallow_set(v) }
-
-  #[inline]
-  fn modifies(&self) -> BoxOp<'static, (), Infallible> { self.prop.modifies() }
-}
-
-impl<P, F> AnimateProperty for LerpProp<P, F>
-where
-  P: Property,
-  F: Fn(&P::Value, &P::Value, f32) -> P::Value + Clone,
-{
-  #[inline]
-  fn calc_lerp_value(&self, from: &Self::Value, to: &Self::Value, rate: f32) -> Self::Value {
-    (self.lerp_fn)(from, to, rate)
-  }
-}
-
-impl<T, G, S, F, V> LerpProp<Prop<T, G, S>, F>
-where
-  Prop<T, G, S>: Property<Value = V>,
-  V: PartialEq + Clone + 'static,
-  G: Fn(&T) -> V + Clone + 'static,
-  T: 'static,
-{
-  #[inline]
-  pub fn changes(&self) -> BoxOp<'static, V, Infallible> { self.prop.changes() }
-}
-
-macro_rules! impl_tuple_property {
-  ($ty: ident, $idx: tt $(,$other_ty: ident, $other_idx: tt)*) => {
-    impl_tuple_property!({$ty, $idx} $($other_ty, $other_idx),*);
-  };
-  (
-    {$($ty: ident, $idx: tt),+}
-    $next_ty: ident, $next_idx: tt
-    $(,$other_ty: ident, $other_idx: tt)*
-  ) => {
-      impl_tuple_property!({$($ty, $idx),+});
-      impl_tuple_property!(
-        {$($ty, $idx,)+ $next_ty, $next_idx }
-        $($other_ty, $other_idx),*
-      );
-  };
-  ({ $($ty: ident, $idx:tt),+})  => {
-    impl<$($ty),+> Property for ($($ty,)+)
-    where
-      $($ty: Property + 'static,)+
-      $($ty::Value: 'static),+
-    {
-      type Value = ($($ty::Value,)+);
-
-      #[inline]
-      fn get(&self) -> Self::Value {
-        ($(self.$idx.get(),)+)
-      }
-
-      #[inline]
-      fn set(&mut self, v: Self::Value) {
-        $(self.$idx.set(v.$idx);)+
-      }
-
-      #[inline]
-      fn shallow_set(&mut self, v: Self::Value) {
-        $(self.$idx.shallow_set(v.$idx);)+
-       }
-
-      #[inline]
-      fn modifies(&self) -> BoxOp<'static, (), Infallible> {
-        observable::from_iter([$(self.$idx.modifies()),+])
-          .merge_all(usize::MAX)
-          .box_it()
-      }
-    }
-
-    impl<$($ty),+> AnimateProperty for ($($ty,)+)
-    where
-      Self: Property<Value= ($($ty::Value,)+)>,
-      $($ty: AnimateProperty),+
-    {
-      fn calc_lerp_value(&self, from: &Self::Value, to: &Self::Value, rate: f32) -> Self::Value{
-        ($(self.$idx.calc_lerp_value(&from.$idx, &to.$idx, rate),)+)
-      }
-    }
-  }
-}
-
-impl_tuple_property! {T0, 0, T1, 1, T2, 2, T3, 3, T4, 4, T5, 5, T6, 6, T7, 7,T8, 8, T9, 9,
-  T10, 10, T11, 11, T12, 12, T13, 13, T14, 14, T15, 15, T16, 16, T17, 17,T18, 18, T19, 19,
-  T20, 20, T21, 21, T22, 22, T23, 23, T24, 24, T25, 25, T26, 26, T27, 27,T28, 28, T29, 29,
-  T30, 30, T31, 31
-}
-
-impl<T, G: Clone, S: Clone> Clone for Prop<T, G, S> {
-  fn clone(&self) -> Self {
-    Prop {
-      target: self.target.clone(),
-      getter: self.getter.clone(),
-      setter: self.setter.clone(),
-    }
-  }
-}
diff --git a/core/src/animation/transition.rs b/core/src/animation/transition.rs
index 80a263fc9..ffb038ff9 100644
--- a/core/src/animation/transition.rs
+++ b/core/src/animation/transition.rs
@@ -2,17 +2,67 @@ use super::easing::Easing;
 use crate::prelude::{BuildCtx, *};
 use std::{ops::Deref, rc::Rc, time::Duration};
 
-/// Transition describe how the state change form init to final smoothly.
-#[derive(Declare, Clone, Debug, PartialEq)]
-pub struct Transition<E> {
+/// Transition use rate to describe how the state change form init to final
+/// smoothly.
+#[derive(Declare2, Clone, Debug, PartialEq)]
+pub struct Transition<E: 'static> {
   #[declare(default, convert=strip_option)]
   pub delay: Option<Duration>,
   pub duration: Duration,
+  #[declare(strict)]
   pub easing: E,
   #[declare(default, convert=strip_option)]
   pub repeat: Option<f32>,
 }
 
+/// Trait help to transition the state.
+pub trait TransitionState: Sized + 'static {
+  /// Use an animate to transition the state after it modified.
+  fn transition<T: Roc + 'static>(self, transition: T, ctx: &BuildCtx) -> Writer<Animate<T, Self>>
+  where
+    Self: AnimateState,
+    <Self::State as StateReader>::Value: Clone,
+  {
+    let state = self.state().clone_writer();
+    let from = state.read().clone();
+    let mut animate: State<Animate<T, Self>> = Animate::declare2_builder()
+      .transition(transition)
+      .from(from)
+      .state(self)
+      .build_declare(ctx);
+
+    let c_animate = animate.clone_writer();
+    let init_value = observable::of(state.read().clone());
+    state
+      .modifies()
+      .map(move |_| state.read().clone())
+      .merge(init_value)
+      .pairwise()
+      .subscribe(move |(old, _)| {
+        animate.write().from = old;
+        animate.run();
+      });
+    c_animate
+  }
+
+  /// Transition the state with a lerp function.
+  fn transition_with<T, F>(
+    self,
+    transition: T,
+    lerp_fn: F,
+    ctx: &BuildCtx,
+  ) -> Writer<Animate<T, LerpFnState<Self, F>>>
+  where
+    Self: StateWriter,
+    Self::Value: Clone,
+    F: FnMut(&Self::Value, &Self::Value, f32) -> Self::Value + 'static,
+    T: Roc + 'static,
+  {
+    let animate_state = LerpFnState::new(self, lerp_fn);
+    animate_state.transition(transition, ctx)
+  }
+}
+
 /// Calc the rate of change over time.
 pub trait Roc {
   /// Calc the rate of change of the duration from animation start.
@@ -46,11 +96,20 @@ impl<E: Easing> Roc for Transition<E> {
   }
 }
 
-impl<T: Roc> Roc for Stateful<T> {
-  #[inline]
-  fn rate_of_change(&self, dur: Duration) -> AnimateProgress {
-    self.state_ref().rate_of_change(dur)
-  }
+impl<T: StateReader> Roc for T
+where
+  T::Value: Roc,
+{
+  fn rate_of_change(&self, dur: Duration) -> AnimateProgress { self.read().rate_of_change(dur) }
+}
+
+impl<S: StateWriter + 'static> TransitionState for S {}
+
+impl<V, S, F> TransitionState for LerpFnState<S, F>
+where
+  S: StateWriter<Value = V> + 'static,
+  F: FnMut(&V, &V, f32) -> V + 'static,
+{
 }
 
 impl Roc for Box<dyn Roc> {
diff --git a/core/src/builtin_widgets.rs b/core/src/builtin_widgets.rs
index 8aeb158c0..abed9e403 100644
--- a/core/src/builtin_widgets.rs
+++ b/core/src/builtin_widgets.rs
@@ -7,8 +7,8 @@ pub mod key;
 pub use key::{Key, KeyWidget};
 pub mod image_widget;
 pub use image_widget::*;
-pub mod delay_drop_widget;
-pub use delay_drop_widget::DelayDropWidget;
+pub mod delay_drop;
+pub use delay_drop::DelayDrop;
 mod theme;
 pub use theme::*;
 mod cursor;
@@ -61,30 +61,34 @@ pub use focus_scope::*;
 
 use crate::{prelude::*, widget::WidgetBuilder};
 
-macro_rules! impl_fat_obj {
+macro_rules! impl_builtin_obj {
   ($($builtin_ty: ty),*) => {
     paste::paste! {
-      #[doc="A fat object that extend the `T` object with all builtin widgets \
-       ability.\
-       During the compose phase, the `FatObj` will be created when a object \
-       use the builtin fields and methods. And they are only a help obj to \
-       build the finally widget, so they will be dropped after composed."
-      ]
-      pub struct FatObj<T> {
-        pub host: T,
+      #[doc="A builtin object contains all builtin widgets, and can be used to \
+      extend other object in the declare syntax, so other objects can use the \
+      builtin fields and methods like self fields and methods."]
+      #[derive(Default)]
+      pub struct BuiltinObj {
         $([< $builtin_ty: snake:lower >]: Option<State<$builtin_ty>>),*
       }
 
-      impl<T> FatObj<T> {
-        pub fn new(host: T) -> Self {
-          Self {
-            host,
-            $([< $builtin_ty: snake:lower >]: None),*
-          }
+      impl BuiltinObj {
+        pub fn is_empty(&self) -> bool {
+          $(self.[< $builtin_ty: snake:lower >].is_none())&& *
         }
 
         $(
-          pub fn [< with_ $builtin_ty: snake:lower >](
+          pub fn [< $builtin_ty: snake:lower >](&mut self, ctx: &BuildCtx)
+            -> &mut State<$builtin_ty>
+          {
+            self
+              .[< $builtin_ty: snake:lower >]
+              .get_or_insert_with(|| $builtin_ty::declare2_builder().build_declare(ctx))
+          }
+        )*
+
+        $(
+          pub fn [< set_builtin_ $builtin_ty: snake:lower >](
             mut self, builtin: State<$builtin_ty>
           ) -> Self {
             self.[< $builtin_ty: snake:lower >] = Some(builtin);
@@ -93,73 +97,39 @@ macro_rules! impl_fat_obj {
         )*
 
         $(
-          pub fn [< $builtin_ty: snake:lower >](&mut self, ctx: &BuildCtx)
+          pub fn [< get_builtin_ $builtin_ty: snake:lower >](&mut self, ctx: &BuildCtx)
             -> &mut State<$builtin_ty>
           {
             self
               .[< $builtin_ty: snake:lower >]
-              .get_or_insert_with(|| $builtin_ty::declare2_builder().build(ctx))
+              .get_or_insert_with(|| $builtin_ty::declare2_builder().build_declare(ctx))
           }
         )*
-      }
 
-      impl<T: 'static> WidgetBuilder for FatObj<T>
-      where
-        T: Into<Widget>
-      {
-        fn build(self, ctx: &BuildCtx) -> WidgetId {
-          let mut host: Widget = self.host.into();
+        pub fn compose_with_host(self, mut host: Widget, ctx: &BuildCtx) -> Widget {
           $(
             if let Some(builtin) = self.[< $builtin_ty: snake:lower >] {
               host = builtin.with_child(host, ctx).into();
             }
           )*
-          host.build(ctx)
+          host
         }
       }
 
-      impl<T: SingleWithChild<C>, C> SingleWithChild<C> for FatObj<T>{
-        type Target = FatObj<T::Target>;
-        fn with_child(self, child: C, ctx: &BuildCtx) -> Self::Target {
-          let Self { host, $([< $builtin_ty: snake:lower >]),* } = self;
-          let host = host.with_child(child, ctx);
-          FatObj {
-            host,
-            $([< $builtin_ty: snake:lower >]),*
-          }
-        }
-      }
-
-      impl<T: MultiWithChild<C>, C> MultiWithChild<C> for FatObj<T>{
-        type Target = FatObj<T::Target>;
-        fn with_child(self, child: C, ctx: &BuildCtx) -> Self::Target {
-          let Self { host, $([< $builtin_ty: snake:lower >]),* } = self;
-          let host = host.with_child(child, ctx);
-          FatObj {
-            host,
-            $([< $builtin_ty: snake:lower >]),*
-          }
-        }
-      }
-      impl<T, M, C> ComposeWithChild<C, M> for FatObj<T>
-      where
-        T: ComposeWithChild<C, M>
-      {
-        type Target = FatObj<T::Target>;
-        fn with_child(self, child: C, ctx: &BuildCtx) -> Self::Target {
-          let Self { host, $([< $builtin_ty: snake:lower >]),* } = self;
-          let host = host.with_child(child, ctx);
-          FatObj {
-            host,
-            $([< $builtin_ty: snake:lower >]),*
+      impl<T> FatObj<T> {
+        $(
+          pub fn [< get_builtin_ $builtin_ty: snake:lower >](&mut self, ctx: &BuildCtx)
+            -> &mut State<$builtin_ty>
+          {
+            self.builtin.[<get_builtin_ $builtin_ty: snake:lower >](ctx)
           }
-        }
+        )*
       }
     }
   };
 }
 
-impl_fat_obj!(
+impl_builtin_obj!(
   PointerListener,
   FocusNode,
   RequestFocus,
@@ -188,9 +158,95 @@ impl_fat_obj!(
   Visibility,
   Opacity,
   LifecycleListener,
-  DelayDropWidget
+  DelayDrop
 );
 
+/// A fat object that extend the `T` object with all builtin widgets ability. A
+/// `FatObj` will create during the compose phase, and compose with the builtin
+/// widgets it actually use, and drop after composed.
+pub struct FatObj<T> {
+  host: T,
+  builtin: BuiltinObj,
+}
+
+impl<T> FatObj<T> {
+  pub fn from_host(host: T) -> Self { Self { host, builtin: BuiltinObj::default() } }
+
+  pub fn new(host: T, builtin: BuiltinObj) -> Self { Self { host, builtin } }
+
+  pub fn unzip(self) -> (T, BuiltinObj) { (self.host, self.builtin) }
+
+  pub fn into_inner(self) -> T {
+    assert!(
+      self.builtin.is_empty(),
+      "Unwrap a FatObj with contains builtin widgets is not allowed."
+    );
+    self.host
+  }
+}
+
+impl<T: Into<Widget>> WidgetBuilder for FatObj<T> {
+  fn build(self, ctx: &BuildCtx) -> WidgetId {
+    let Self { host, builtin } = self;
+    builtin.compose_with_host(host.into(), ctx).build(ctx)
+  }
+}
+
+impl<T: SingleChild> SingleChild for FatObj<T> {}
+impl<T: MultiChild> MultiChild for FatObj<T> {}
+impl<T: ComposeChild + 'static> ComposeChild for FatObj<State<T>> {
+  type Child = T::Child;
+
+  fn compose_child(this: State<Self>, child: Self::Child) -> Widget {
+    let this = this.into_value();
+    let Self { host, builtin } = this;
+    FnWidget::new(move |ctx| {
+      let this = host.with_child(child, ctx);
+      builtin.compose_with_host(this.into(), ctx)
+    })
+    .into()
+  }
+}
+
+impl<T: ComposeChild + 'static> ComposeChild for FatObj<T> {
+  type Child = T::Child;
+
+  fn compose_child(this: State<Self>, child: Self::Child) -> Widget {
+    let this = this.into_value();
+    let Self { host, builtin } = this;
+    FnWidget::new(move |ctx| {
+      let this = host.with_child(child, ctx);
+      builtin.compose_with_host(this.into(), ctx)
+    })
+    .into()
+  }
+}
+
+impl<T: SingleParent + 'static> SingleParent for FatObj<T> {
+  fn append_child(self, child: WidgetId, ctx: &mut BuildCtx) -> WidgetId {
+    let Self { host, builtin } = self;
+    let p = host.append_child(child, ctx);
+    builtin.compose_with_host(p.into(), ctx).build(ctx)
+  }
+}
+
+impl<T: MultiParent + 'static> MultiParent for FatObj<T> {
+  fn append_children(self, children: Vec<WidgetId>, ctx: &mut BuildCtx) -> WidgetId {
+    let Self { host, builtin } = self;
+    let host = host.append_children(children, ctx);
+    builtin.compose_with_host(host.into(), ctx).build(ctx)
+  }
+}
+
+impl ComposeChild for BuiltinObj {
+  type Child = Widget;
+
+  fn compose_child(this: State<Self>, child: Self::Child) -> Widget {
+    let this = this.into_value();
+    fn_widget! { this.compose_with_host(child, ctx!()) }.into()
+  }
+}
+
 impl<T> std::ops::Deref for FatObj<T> {
   type Target = T;
   #[inline]
@@ -201,17 +257,3 @@ impl<T> std::ops::DerefMut for FatObj<T> {
   #[inline]
   fn deref_mut(&mut self) -> &mut Self::Target { &mut self.host }
 }
-
-impl<W> BoxedSingleParent for FatObj<W>
-where
-  W: SingleChild + Into<Box<dyn Render>> + Into<Widget> + 'static,
-{
-  fn into_parent(self: Box<Self>, ctx: &mut BuildCtx) -> WidgetId { self.build(ctx) }
-}
-
-impl<W> BoxMultiParent for FatObj<W>
-where
-  W: MultiChild + Into<Box<dyn Render>> + Into<Widget> + 'static,
-{
-  fn into_parent(self: Box<Self>, ctx: &mut BuildCtx) -> WidgetId { self.build(ctx) }
-}
diff --git a/core/src/builtin_widgets/anchor.rs b/core/src/builtin_widgets/anchor.rs
index 9a4862101..4726497d1 100644
--- a/core/src/builtin_widgets/anchor.rs
+++ b/core/src/builtin_widgets/anchor.rs
@@ -13,21 +13,21 @@ pub enum PositionUnit {
 /// Widget use to anchor child constraints with the left edge of parent widget.
 #[derive(Declare, Declare2, SingleChild)]
 pub struct LeftAnchor {
-  #[declare(convert=into, builtin)]
+  #[declare(convert=into, builtin, default=0.)]
   pub left_anchor: PositionUnit,
 }
 
 /// Widget use to anchor child constraints with the right edge of parent widget.
 #[derive(Declare, Declare2, SingleChild)]
 pub struct RightAnchor {
-  #[declare(convert=into, builtin)]
+  #[declare(convert=into, builtin, default=0.)]
   pub right_anchor: PositionUnit,
 }
 
 /// Widget use to anchor child constraints with the top edge of parent widget.
 #[derive(Declare, Declare2, SingleChild)]
 pub struct TopAnchor {
-  #[declare(convert=into, builtin)]
+  #[declare(convert=into, builtin, default=0.)]
   pub top_anchor: PositionUnit,
 }
 
@@ -35,7 +35,7 @@ pub struct TopAnchor {
 /// widget.
 #[derive(Declare, Declare2, SingleChild)]
 pub struct BottomAnchor {
-  #[declare(convert=into, builtin)]
+  #[declare(convert=into, builtin, default=0.)]
   pub bottom_anchor: PositionUnit,
 }
 
@@ -124,12 +124,10 @@ impl PositionUnit {
     }
   }
 
-  pub fn lerp_fn(self_size: f32) -> impl Fn(&Self, &Self, f32) -> Self + Clone {
-    move |from, to, rate| {
-      let from = from.abs_value(self_size);
-      let to = to.abs_value(self_size);
-      PositionUnit::Pixel(from.lerp(&to, rate))
-    }
+  pub fn lerp_fn(from: &Self, to: &Self, rate: f32, self_size: f32) -> PositionUnit {
+    let from = from.abs_value(self_size);
+    let to = to.abs_value(self_size);
+    PositionUnit::Pixel(from.lerp(&to, rate))
   }
 }
 
diff --git a/core/src/builtin_widgets/box_decoration.rs b/core/src/builtin_widgets/box_decoration.rs
index aa77739cd..3ab7fbb78 100644
--- a/core/src/builtin_widgets/box_decoration.rs
+++ b/core/src/builtin_widgets/box_decoration.rs
@@ -228,7 +228,7 @@ mod tests {
     let dummy = std::mem::MaybeUninit::uninit();
     // just for test, we know BoxDecoration not use `ctx` to build.
     let ctx: BuildCtx<'static> = unsafe { dummy.assume_init() };
-    let w = BoxDecoration::declare_builder().build(&ctx);
+    let w = BoxDecoration::declare_builder().build_declare(&ctx);
 
     assert_eq!(w.border, None);
     assert_eq!(w.border_radius, None);
diff --git a/core/src/builtin_widgets/clip.rs b/core/src/builtin_widgets/clip.rs
index d69884f02..fcf234b7e 100644
--- a/core/src/builtin_widgets/clip.rs
+++ b/core/src/builtin_widgets/clip.rs
@@ -7,7 +7,7 @@ pub enum ClipType {
   Path(Path),
 }
 
-#[derive(SingleChild, Clone, Declare)]
+#[derive(SingleChild, Clone, Declare, Declare2)]
 pub struct Clip {
   #[declare(default)]
   pub clip: ClipType,
@@ -27,7 +27,7 @@ impl Render for Clip {
   fn paint(&self, ctx: &mut PaintingCtx) {
     let path = match &self.clip {
       ClipType::Auto => {
-        let rect = Rect::from_size(
+        let rect: lyon_geom::euclid::Rect<f32, LogicUnit> = Rect::from_size(
           ctx
             .box_rect()
             .expect("impossible without size in painting stage")
diff --git a/core/src/builtin_widgets/cursor.rs b/core/src/builtin_widgets/cursor.rs
index 3dc4d37f4..9b4d76ef7 100644
--- a/core/src/builtin_widgets/cursor.rs
+++ b/core/src/builtin_widgets/cursor.rs
@@ -1,36 +1,31 @@
 use crate::prelude::*;
-use std::{cell::Cell, rc::Rc};
 use winit::window::CursorIcon;
 
 /// `Cursor` is an attribute to assign an `cursor` to a widget.
 
-#[derive(Declare, Debug, Declare2)]
+#[derive(Declare, Default, Debug, Declare2)]
 pub struct Cursor {
-  #[declare(convert=custom, builtin, default)]
-  pub cursor: Rc<Cell<CursorIcon>>,
+  #[declare(builtin, default)]
+  pub cursor: CursorIcon,
 }
 
 impl ComposeChild for Cursor {
   type Child = Widget;
-  fn compose_child(this: State<Self>, child: Self::Child) -> Widget {
-    widget! {
-      states {
-        save_cursor: Stateful::new(CursorIcon::Default),
-        this: this.into_readonly()
-      }
-      DynWidget {
-        dyns: child,
+  fn compose_child(mut this: State<Self>, child: Self::Child) -> Widget {
+    fn_widget! {
+      let mut save_cursor = Stateful::new(CursorIcon::Default);
+      @$child {
         on_pointer_enter: move |e: &mut PointerEvent| {
           if e.point_type == PointerType::Mouse
             && e.mouse_buttons() == MouseButtons::empty()
           {
             let wnd = e.window();
-            *save_cursor = wnd.get_cursor();
-            wnd.set_cursor(this.cursor.get());
+            *$save_cursor = wnd.get_cursor();
+            wnd.set_cursor($this.get_cursor());
           }
         },
         on_pointer_leave: move |e: &mut PointerEvent| {
-          e.window().set_cursor(*save_cursor);
+          e.window().set_cursor(*$save_cursor);
         }
       }
     }
@@ -38,53 +33,8 @@ impl ComposeChild for Cursor {
   }
 }
 
-pub trait IntoCursorIcon {
-  fn into_cursor_icon(self) -> Rc<Cell<CursorIcon>>;
-}
-
-impl IntoCursorIcon for Rc<Cell<CursorIcon>> {
-  #[inline]
-  fn into_cursor_icon(self) -> Rc<Cell<CursorIcon>> { self }
-}
-
-impl IntoCursorIcon for CursorIcon {
-  #[inline]
-  fn into_cursor_icon(self) -> Rc<Cell<CursorIcon>> { Rc::new(Cell::new(self)) }
-}
-
-impl CursorDeclarer {
-  #[inline]
-  pub fn cursor<C: IntoCursorIcon>(mut self, icon: C) -> Self {
-    self.cursor = Some(icon.into_cursor_icon());
-    self
-  }
-}
-
 impl Cursor {
-  #[inline]
-  pub fn set_declare_cursor<C: IntoCursorIcon>(&mut self, icon: C) {
-    self.cursor = icon.into_cursor_icon();
-  }
-}
-
-impl Cursor {
-  #[inline]
-  pub fn icon(&self) -> CursorIcon { self.cursor.get() }
-
-  #[inline]
-  pub fn set_icon(&self, icon: CursorIcon) { self.cursor.set(icon) }
-
-  #[inline]
-  pub fn new_icon(icon: CursorIcon) -> Rc<Cell<CursorIcon>> { Rc::new(Cell::new(icon)) }
-}
-
-impl Default for Cursor {
-  #[inline]
-  fn default() -> Self {
-    Cursor {
-      cursor: Rc::new(Cell::new(CursorIcon::Default)),
-    }
-  }
+  fn get_cursor(&self) -> CursorIcon { self.cursor }
 }
 
 #[cfg(test)]
@@ -126,7 +76,7 @@ mod tests {
       },
       1.,
     );
-    wnd.emit_events();
+    wnd.run_frame_tasks();
     assert_eq!(wnd.get_cursor(), CursorIcon::Help);
 
     let device_id = unsafe { DeviceId::dummy() };
@@ -138,7 +88,7 @@ mod tests {
       },
       1.,
     );
-    wnd.emit_events();
+    wnd.run_frame_tasks();
     assert_eq!(wnd.get_cursor(), CursorIcon::Hand);
 
     let device_id = unsafe { DeviceId::dummy() };
@@ -150,7 +100,7 @@ mod tests {
       },
       1.,
     );
-    wnd.emit_events();
+    wnd.run_frame_tasks();
     assert_eq!(wnd.get_cursor(), CursorIcon::AllScroll);
 
     let device_id = unsafe { DeviceId::dummy() };
@@ -162,7 +112,7 @@ mod tests {
       },
       1.,
     );
-    wnd.emit_events();
+    wnd.run_frame_tasks();
     assert_eq!(wnd.get_cursor(), CursorIcon::Hand);
 
     let device_id = unsafe { DeviceId::dummy() };
@@ -174,7 +124,7 @@ mod tests {
       },
       1.,
     );
-    wnd.emit_events();
+    wnd.run_frame_tasks();
     assert_eq!(wnd.get_cursor(), CursorIcon::Help);
   }
 }
diff --git a/core/src/builtin_widgets/delay_drop.rs b/core/src/builtin_widgets/delay_drop.rs
new file mode 100644
index 000000000..44d77cde8
--- /dev/null
+++ b/core/src/builtin_widgets/delay_drop.rs
@@ -0,0 +1,29 @@
+use crate::{impl_query_self_only, prelude::*};
+
+/// A widget that can delay drop its child until the `delay_drop_until` field be
+/// set to `true`.
+///
+/// This widget not effect the widget lifecycle, if the widget is dispose but
+/// the `delay_drop_until` is `false`, it's not part of the widget tree anymore
+/// but not drop immediately, is disposed in `logic`, but not release resource.
+/// It's be isolated from the widget tree and can layout and paint normally.
+///
+/// Once the `delay_drop_until` field be set to `true`, the widget will be
+/// dropped.
+///
+/// It's useful when you need run a leave animation for a widget.
+#[derive(Declare, Declare2)]
+pub struct DelayDrop {
+  #[declare(builtin)]
+  pub delay_drop_until: bool,
+}
+
+impl ComposeChild for DelayDrop {
+  type Child = Widget;
+  #[inline]
+  fn compose_child(this: State<Self>, child: Self::Child) -> Widget {
+    DataWidget::attach(child, this.into_writable())
+  }
+}
+
+impl_query_self_only!(DelayDrop);
diff --git a/core/src/builtin_widgets/delay_drop_widget.rs b/core/src/builtin_widgets/delay_drop_widget.rs
deleted file mode 100644
index 9c11ff019..000000000
--- a/core/src/builtin_widgets/delay_drop_widget.rs
+++ /dev/null
@@ -1,17 +0,0 @@
-use crate::{impl_query_self_only, prelude::*};
-
-#[derive(Declare, Declare2)]
-pub struct DelayDropWidget {
-  #[declare(builtin)]
-  pub delay_drop_until: bool,
-}
-
-impl ComposeChild for DelayDropWidget {
-  type Child = Widget;
-  #[inline]
-  fn compose_child(this: State<Self>, child: Self::Child) -> Widget {
-    DataWidget::attach(child, this.into_writable())
-  }
-}
-
-impl_query_self_only!(DelayDropWidget);
diff --git a/core/src/builtin_widgets/fitted_box.rs b/core/src/builtin_widgets/fitted_box.rs
index b9ac76232..1a6f871c4 100644
--- a/core/src/builtin_widgets/fitted_box.rs
+++ b/core/src/builtin_widgets/fitted_box.rs
@@ -111,7 +111,7 @@ mod tests {
       wnd.draw_frame();
 
       assert_layout_result_by_path!(wnd, {path = [0], size == expect,} );
-      assert_eq!(c_fit.shallow_ref().scale_cache.get(), expected_scale);
+      assert_eq!(c_fit.state_ref().scale_cache.get(), expected_scale);
     }
   }
 
diff --git a/core/src/builtin_widgets/focus_node.rs b/core/src/builtin_widgets/focus_node.rs
index 796ee0fb2..ecf90df95 100644
--- a/core/src/builtin_widgets/focus_node.rs
+++ b/core/src/builtin_widgets/focus_node.rs
@@ -53,16 +53,16 @@ impl ComposeChild for FocusNode {
           .unwrap_or_else(|| {
             let listener = LifecycleListener::default();
             let subject = listener.lifecycle_stream();
-            attach_to_id(id, ctx.force_as_mut(), |child| {
+            attach_to_id(id, &mut *ctx.tree.borrow_mut(), |child| {
               Box::new(DataWidget::new(child, listener))
             });
             subject
           });
 
-        fn subscribe_fn(this: Stateful<FocusNode>) -> impl FnMut(&'_ mut AllLifecycle) + 'static {
+        fn subscribe_fn(this: Reader<FocusNode>) -> impl FnMut(&'_ mut AllLifecycle) + 'static {
           move |e| match e {
             AllLifecycle::Mounted(e) => {
-              let auto_focus = this.state_ref().auto_focus;
+              let auto_focus = this.read().auto_focus;
               e.window().add_focus_node(e.id, auto_focus, FocusType::Node)
             }
             AllLifecycle::PerformedLayout(_) => {}
@@ -70,10 +70,10 @@ impl ComposeChild for FocusNode {
           }
         }
         let h = subject
-          .subscribe(subscribe_fn(this.clone()))
+          .subscribe(subscribe_fn(this.clone_reader()))
           .unsubscribe_when_dropped();
 
-        attach_to_id(id, ctx.force_as_mut(), |child| {
+        attach_to_id(id, &mut *ctx.tree.borrow_mut(), |child| {
           let d = DataWidget::new(child, this);
           Box::new(DataWidget::new(
             Box::new(d),
@@ -104,18 +104,17 @@ pub struct RequestFocus {
 impl ComposeChild for RequestFocus {
   type Child = Widget;
   fn compose_child(this: State<Self>, child: Self::Child) -> Widget {
-    let this = this.into_writable();
-    let w: Widget = widget! {
-      states { this: this.clone() }
-      DynWidget {
-        on_mounted: move |ctx| {
-          this.silent().handle = Some(ctx.window().focus_mgr.borrow().focus_handle(ctx.id));
-        },
-        dyns: child
+    let this2 = this.clone_reader();
+    let w: Widget = fn_widget! {
+      @$child {
+        on_mounted: move |e| {
+          let handle = e.window().focus_mgr.borrow().focus_handle(e.id);
+          $this.silent().handle = Some(handle);
+        }
       }
     }
     .into();
-    DataWidget::attach(w, this)
+    DataWidget::attach(w, this2)
   }
 }
 impl RequestFocus {
diff --git a/core/src/builtin_widgets/focus_scope.rs b/core/src/builtin_widgets/focus_scope.rs
index 15168e757..a623dee04 100644
--- a/core/src/builtin_widgets/focus_scope.rs
+++ b/core/src/builtin_widgets/focus_scope.rs
@@ -1,6 +1,6 @@
 use crate::{events::focus_mgr::FocusType, impl_query_self_only, prelude::*};
 
-#[derive(Declare, Clone, Default)]
+#[derive(Declare, Declare2, Clone, Default)]
 pub struct FocusScope {
   /// If true, the descendants can not be focused.
   /// Default value is false, then the hold FocusScope subtree can be focused
@@ -207,7 +207,7 @@ mod tests {
       is_synthetic: false,
     });
 
-    wnd.emit_events();
+    wnd.run_frame_tasks();
     wnd.draw_frame();
     assert_eq!(*result.borrow(), 2);
   }
diff --git a/core/src/builtin_widgets/ignore_pointer.rs b/core/src/builtin_widgets/ignore_pointer.rs
index fcbc367e4..4fe23d940 100644
--- a/core/src/builtin_widgets/ignore_pointer.rs
+++ b/core/src/builtin_widgets/ignore_pointer.rs
@@ -1,6 +1,6 @@
 use crate::{impl_query_self_only, prelude::*};
 
-#[derive(Declare, SingleChild, Clone)]
+#[derive(Declare, Declare2, SingleChild, Clone)]
 pub struct IgnorePointer {
   #[declare(default = true)]
   pub ignore: bool,
diff --git a/core/src/builtin_widgets/key.rs b/core/src/builtin_widgets/key.rs
index 0526dada6..5813d5eb3 100644
--- a/core/src/builtin_widgets/key.rs
+++ b/core/src/builtin_widgets/key.rs
@@ -69,12 +69,7 @@ where
   V: Default + Clone + PartialEq,
   Self: Any,
 {
-  fn key(&self) -> Key {
-    match self {
-      State::Stateless(this) => this.key.clone(),
-      State::Stateful(this) => this.state_ref().key.clone(),
-    }
-  }
+  fn key(&self) -> Key { self.read().key.clone() }
 
   fn record_prev_key_widget(&self, key: &dyn AnyKey) {
     assert_eq!(self.key(), key.key());
@@ -82,19 +77,10 @@ where
       log::warn!("Different value type for same key.");
       return;
     };
-    match self {
-      // stateless key widget needn't record before value.
-      State::Stateless(_) => {}
-      State::Stateful(this) => match key {
-        State::Stateless(key) => this.state_ref().record_before_value(key.value.clone()),
-        State::Stateful(key) => this
-          .state_ref()
-          .record_before_value(key.state_ref().value.clone()),
-      },
-    }
+    self.write().record_before_value(key.read().value.clone());
   }
 
-  fn record_next_key_widget(&self, _: &dyn AnyKey) { self.as_ref().has_successor.set(true); }
+  fn record_next_key_widget(&self, _: &dyn AnyKey) { self.write().has_successor.set(true); }
 
   fn as_any(&self) -> &dyn Any { self }
 }
diff --git a/core/src/builtin_widgets/opacity.rs b/core/src/builtin_widgets/opacity.rs
index ebc611435..b2d1a2fca 100644
--- a/core/src/builtin_widgets/opacity.rs
+++ b/core/src/builtin_widgets/opacity.rs
@@ -3,7 +3,7 @@ use crate::prelude::*;
 
 #[derive(Declare, Declare2, Default, Clone, SingleChild)]
 pub struct Opacity {
-  #[declare(builtin)]
+  #[declare(builtin, default = 1.)]
   pub opacity: f32,
 }
 
diff --git a/core/src/builtin_widgets/scrollable.rs b/core/src/builtin_widgets/scrollable.rs
index b26d315f5..128e36018 100644
--- a/core/src/builtin_widgets/scrollable.rs
+++ b/core/src/builtin_widgets/scrollable.rs
@@ -29,45 +29,34 @@ pub struct ScrollableWidget {
 
 impl ComposeChild for ScrollableWidget {
   type Child = Widget;
-  fn compose_child(this: State<Self>, child: Self::Child) -> Widget {
-    widget! {
-      states { this: this.into_writable() }
-      Clip {
-        UnconstrainedBox {
-          id: view,
-          dir: match this.scrollable {
-            Scrollable::X => UnconstrainedDir::X,
-            Scrollable::Y => UnconstrainedDir::Y,
-            Scrollable::Both => UnconstrainedDir::Both,
-          },
-          clamp_dim: ClampDim::MAX_SIZE,
-          on_wheel: move |e| this.validate_scroll(Point::new(e.delta_x, e.delta_y)),
-          DynWidget {
-            id: content,
-            dyns: child,
-            left_anchor: this.scroll_pos.x,
-            top_anchor: this.scroll_pos.y,
-          }
-        }
-      }
+  fn compose_child(mut this: State<Self>, child: Self::Child) -> Widget {
+    fn_widget! {
+      let mut view = @UnconstrainedBox {
+        dir: pipe!(match $this.get_scrollable() {
+          Scrollable::X => UnconstrainedDir::X,
+          Scrollable::Y => UnconstrainedDir::Y,
+          Scrollable::Both => UnconstrainedDir::Both,
+        }),
+        clamp_dim: ClampDim::MAX_SIZE,
+      };
+
+    let mut child = @ $child {
+      left_anchor: pipe!($this.get_scroll_pos().x),
+      top_anchor: pipe!($this.get_scroll_pos().y),
+    };
 
-      finally {
-        let_watch!(content.layout_size())
-          .distinct_until_changed()
-          .subscribe(move |v| {
-            this.content_size = v;
-            // content size update need to update scroll offset.
-            let scroll_pos = this.scroll_pos;
-            this.jump_to(scroll_pos);
-          });
-        let_watch!(view.layout_size())
-          .distinct_until_changed()
-          .subscribe(move |v| {
-              this.page = v;
-              // view size update need to update scroll offset.
-              let scroll_pos = this.scroll_pos;
-              this.jump_to(scroll_pos);
-          });
+    watch!($child.layout_size())
+      .distinct_until_changed()
+      .subscribe(move |v| $this.set_content_size(v));
+    watch!($view.layout_size())
+      .distinct_until_changed()
+      .subscribe(move |v| $this.set_page(v));
+
+      @Clip {
+        @ $view {
+          on_wheel: move |e| $this.validate_scroll(Point::new(e.delta_x, e.delta_y)),
+          @ { child }
+        }
       }
     }
     .into()
@@ -108,6 +97,22 @@ impl ScrollableWidget {
     }
     self.jump_to(new);
   }
+
+  pub fn set_content_size(&mut self, content_size: Size) {
+    self.content_size = content_size;
+    self.sync_pos()
+  }
+
+  pub fn set_page(&mut self, page: Size) {
+    self.page = page;
+    self.sync_pos()
+  }
+
+  fn get_scrollable(&self) -> Scrollable { self.scrollable }
+
+  fn get_scroll_pos(&self) -> Point { self.scroll_pos }
+
+  fn sync_pos(&mut self) { self.jump_to(self.scroll_pos) }
 }
 
 #[cfg(test)]
@@ -140,7 +145,7 @@ mod tests {
       modifiers: ModifiersState::default(),
     });
 
-    wnd.layout();
+    wnd.draw_frame();
     let pos = wnd.layout_info_by_path(&[0, 0, 0, 0]).unwrap().pos;
     assert_eq!(pos.y, expect_y);
     let pos = wnd.layout_info_by_path(&[0, 0, 0, 0, 0]).unwrap().pos;
diff --git a/core/src/builtin_widgets/theme.rs b/core/src/builtin_widgets/theme.rs
index 1247c49b3..05c758af8 100644
--- a/core/src/builtin_widgets/theme.rs
+++ b/core/src/builtin_widgets/theme.rs
@@ -81,15 +81,11 @@ pub struct ThemeWidget {
 impl ComposeChild for ThemeWidget {
   type Child = Widget;
   #[inline]
-  fn compose_child(this: State<Self>, child: Self::Child) -> Widget {
+  fn compose_child(mut this: State<Self>, child: Self::Child) -> Widget {
     use crate::prelude::*;
     FnWidget::new(move |ctx| {
       let ctx = ctx.force_as_mut();
-
-      let theme = match this {
-        State::Stateless(t) => t.theme,
-        State::Stateful(s) => s.state_ref().theme.clone(),
-      };
+      let theme = this.read().theme.clone();
 
       AppCtx::load_font_from_theme(&theme);
       ctx.push_theme(theme.clone());
@@ -110,6 +106,7 @@ impl_query_self_only!(Theme);
 impl Default for Theme {
   fn default() -> Self { Theme::Full(<_>::default()) }
 }
+
 impl Default for FullTheme {
   fn default() -> Self {
     let icon_size = IconSize {
diff --git a/core/src/builtin_widgets/theme/icon_theme.rs b/core/src/builtin_widgets/theme/icon_theme.rs
index c59c29268..52b35e129 100644
--- a/core/src/builtin_widgets/theme/icon_theme.rs
+++ b/core/src/builtin_widgets/theme/icon_theme.rs
@@ -59,12 +59,8 @@ pub const CUSTOM_ICON_START: NamedSvg = NamedSvg::new(65536);
 pub struct NamedSvg(pub usize);
 
 impl Compose for NamedSvg {
-  fn compose(this: State<Self>) -> Widget {
-    widget! {
-      states { this: this.into_readonly() }
-      FnWidget::new(move |ctx: &BuildCtx| this.of_or_miss(ctx))
-    }
-    .into()
+  fn compose(mut this: State<Self>) -> Widget {
+    fn_widget! { @ { $this.of_or_miss(ctx!()) }}.into()
   }
 }
 
diff --git a/core/src/builtin_widgets/theme/transition_theme.rs b/core/src/builtin_widgets/theme/transition_theme.rs
index 3c0e94452..b018ecfcc 100644
--- a/core/src/builtin_widgets/theme/transition_theme.rs
+++ b/core/src/builtin_widgets/theme/transition_theme.rs
@@ -47,7 +47,6 @@ pub mod transitions {
     EASE_IN,
     EASE_OUT,
     EASE_IN_OUT,
-    SMOOTH_SCROLL,
     THEME_EXTEND
   );
 
@@ -124,12 +123,6 @@ impl Default for TransitionTheme {
         duration: Duration::from_millis(250),
         easing: easing::EASE_IN_OUT,
         repeat: None,
-      },
-      transitions::SMOOTH_SCROLL:Transition {
-        delay: None,
-        duration: Duration::from_millis(200),
-        easing: easing::EASE_IN,
-        repeat: None,
       }
     }
 
diff --git a/core/src/builtin_widgets/unconstrained_box.rs b/core/src/builtin_widgets/unconstrained_box.rs
index 8e58eeedd..d8b5ac9a8 100644
--- a/core/src/builtin_widgets/unconstrained_box.rs
+++ b/core/src/builtin_widgets/unconstrained_box.rs
@@ -1,6 +1,6 @@
 use crate::prelude::*;
 
-#[derive(Declare, SingleChild)]
+#[derive(Declare, Declare2, SingleChild)]
 /// A widget that imposes no constraints on its child, allowing it to layout and
 /// display as its "natural" size. Its size is equal to its child then clamp by
 /// parent.
diff --git a/core/src/builtin_widgets/visibility.rs b/core/src/builtin_widgets/visibility.rs
index 709925370..59a0f16e5 100644
--- a/core/src/builtin_widgets/visibility.rs
+++ b/core/src/builtin_widgets/visibility.rs
@@ -8,15 +8,14 @@ pub struct Visibility {
 
 impl ComposeChild for Visibility {
   type Child = Widget;
-  fn compose_child(this: State<Self>, child: Self::Child) -> Widget {
-    widget! {
-      states { this: this.into_readonly(), }
-      FocusScope {
-        skip_descendants: !this.visible,
-        can_focus: this.visible,
-        VisibilityRender {
-          display: this.visible,
-          widget::from(child)
+  fn compose_child(mut this: State<Self>, child: Self::Child) -> Widget {
+    fn_widget! {
+      @FocusScope {
+        skip_descendants: pipe!(!$this.get_visible()),
+        can_focus: pipe!($this.get_visible()),
+        @VisibilityRender {
+          display: pipe!($this.get_visible()),
+          @ { child }
         }
       }
     }
@@ -24,7 +23,7 @@ impl ComposeChild for Visibility {
   }
 }
 
-#[derive(SingleChild, Declare, Clone)]
+#[derive(SingleChild, Declare, Declare2, Clone)]
 struct VisibilityRender {
   display: bool,
 }
@@ -59,4 +58,7 @@ impl_query_self_only!(VisibilityRender);
 impl Visibility {
   #[inline]
   pub fn new(visible: bool) -> Self { Self { visible } }
+
+  #[inline]
+  fn get_visible(&self) -> bool { self.visible }
 }
diff --git a/core/src/context/app_ctx.rs b/core/src/context/app_ctx.rs
index bea2f9041..0343803bb 100644
--- a/core/src/context/app_ctx.rs
+++ b/core/src/context/app_ctx.rs
@@ -1,7 +1,8 @@
 use crate::{
   builtin_widgets::{FullTheme, InheritTheme, Theme},
   clipboard::{Clipboard, MockClipboard},
-  window::{Window, WindowId},
+  widget::Widget,
+  window::{ShellWindow, Window, WindowId},
 };
 use pin_project_lite::pin_project;
 use std::{
@@ -44,9 +45,14 @@ pub struct AppCtx {
   typography_store: TypographyStore,
   clipboard: RefCell<Box<dyn Clipboard>>,
   runtime_waker: Box<dyn RuntimeWaker + Send>,
+  scheduler: FuturesLocalScheduler,
   executor: RefCell<LocalPool>,
+  triggers: TriggerMap,
 }
 
+type TriggerMap = RefCell<ahash::HashMap<*const (), Box<dyn FnOnce()>>>;
+pub struct AppCtxScopeGuard(MutexGuard<'static, ()>);
+
 static mut INIT_THREAD_ID: Option<ThreadId> = None;
 static mut APP_CTX_INIT: Once = Once::new();
 static mut APP_CTX: Option<AppCtx> = None;
@@ -61,6 +67,16 @@ impl AppCtx {
   #[track_caller]
   pub fn app_theme() -> &'static Theme { &Self::shared().app_theme }
 
+  pub fn new_window(shell_wnd: Box<dyn ShellWindow>, content: Widget) -> Rc<Window> {
+    let wnd = Window::new(shell_wnd);
+    let id = wnd.id();
+
+    Self::shared().windows.borrow_mut().insert(id, wnd.clone());
+    wnd.set_content_widget(content);
+
+    wnd
+  }
+
   /// Get the window by the window id. Return an count reference of the window.
   ///
   /// If you want store the `Window`, you'd better store the `WindowId` instead.
@@ -102,7 +118,7 @@ impl AppCtx {
 
   /// Get the scheduler of the application.
   #[track_caller]
-  pub fn scheduler() -> FuturesLocalScheduler { Self::shared().executor.borrow_mut().spawner() }
+  pub fn scheduler() -> FuturesLocalScheduler { Self::shared().scheduler.clone() }
 
   /// Get the clipboard of the application.
   #[track_caller]
@@ -116,10 +132,41 @@ impl AppCtx {
   #[track_caller]
   pub fn font_db() -> &'static Rc<RefCell<FontDB>> { &Self::shared().font_db }
 
+  /// Add a trigger task to the application, this task use an pointer address as
+  /// its identity. You can use the identity to trigger this task in a
+  /// deterministic time by calling `AppCtx::trigger_task`.
+  pub fn add_trigger_task(trigger: *const (), task: Box<dyn FnOnce()>) {
+    let mut tasks = AppCtx::shared().triggers.borrow_mut();
+    let task: Box<dyn FnOnce()> = if let Some(t) = tasks.remove(&trigger) {
+      Box::new(move || {
+        t();
+        task();
+      })
+    } else {
+      Box::new(task)
+    };
+    tasks.insert(trigger, Box::new(task));
+  }
+
+  /// Trigger the task by the pointer address identity. Returns true if the task
+  /// is found.
+  pub fn trigger_task(trigger: *const ()) -> bool {
+    let task = Self::shared().triggers.borrow_mut().remove(&trigger);
+    if let Some(task) = task {
+      task();
+      true
+    } else {
+      false
+    }
+  }
+
   /// Runs all tasks in the local(usually means on the main thread) pool and
   /// returns if no more progress can be made on any task.
   #[track_caller]
-  pub fn run_until_stalled() { Self::shared().executor.borrow_mut().run_until_stalled() }
+  pub fn run_until_stalled() {
+    let mut executor = Self::shared().executor.borrow_mut();
+    while executor.try_run_one() {}
+  }
 
   /// Loads the font from the theme config and import it into the font database.
   #[track_caller]
@@ -195,7 +242,7 @@ impl AppCtx {
   /// If your application want create multi `AppCtx` instances, hold a scope for
   /// every instance. Otherwise, the behavior is undefined.
   #[track_caller]
-  pub unsafe fn new_lock_scope() -> MutexGuard<'static, ()> {
+  pub unsafe fn new_lock_scope() -> AppCtxScopeGuard {
     static LOCK: Mutex<()> = Mutex::new(());
 
     let locker = LOCK.lock().unwrap_or_else(|e| {
@@ -205,14 +252,14 @@ impl AppCtx {
 
       e.into_inner()
     });
-    APP_CTX_INIT = Once::new();
-    locker
+
+    AppCtxScopeGuard(locker)
   }
 
   #[track_caller]
   pub(crate) fn end_frame() {
-    // todo: frame cache is not a good choice? because not every text will relayout
-    // in every frame.
+    // todo: frame cache is not a good algorithm? because not every text will
+    // relayout in every frame.
     let ctx = unsafe { Self::shared_mut() };
     ctx.shaper.end_frame();
     ctx.reorder.end_frame();
@@ -231,6 +278,9 @@ impl AppCtx {
       let reorder = TextReorder::default();
       let typography_store = TypographyStore::new(reorder.clone(), font_db.clone(), shaper.clone());
 
+      let executor = LocalPool::new();
+      let scheduler = executor.spawner();
+
       let ctx = AppCtx {
         font_db,
         app_theme,
@@ -238,9 +288,11 @@ impl AppCtx {
         reorder,
         typography_store,
         clipboard: RefCell::new(Box::new(MockClipboard {})),
-        executor: <_>::default(),
+        executor: RefCell::new(executor),
+        scheduler,
         runtime_waker: Box::new(MockWaker),
         windows: RefCell::new(ahash::HashMap::default()),
+        triggers: RefCell::new(ahash::HashMap::default()),
       };
 
       INIT_THREAD_ID = Some(std::thread::current().id());
@@ -261,8 +313,7 @@ impl AppCtx {
     Fut: Future<Output = ()> + 'static,
   {
     let ctx = AppCtx::shared();
-    ctx.runtime_waker.wake();
-    ctx.executor.borrow().spawner().spawn_local(LocalFuture {
+    ctx.scheduler.spawn_local(LocalFuture {
       fut: future,
       waker: ctx.runtime_waker.clone(),
     })
@@ -367,6 +418,26 @@ pub fn load_font_from_theme(theme: &Theme, font_db: &mut FontDB) {
   }
 }
 
+impl Drop for AppCtxScopeGuard {
+  fn drop(&mut self) {
+    let ctx = AppCtx::shared();
+    ctx.windows.borrow_mut().clear();
+
+    while !ctx.triggers.borrow().is_empty() {
+      // drop task may generate new trigger task, use a vector to collect the tasks
+      // to delay drop these tasks after the borrow scope.
+      let _vec = ctx.triggers.borrow_mut().drain().collect::<Vec<_>>();
+    }
+
+    // Safety: this guard guarantee only one thread can access the `AppCtx`.
+    unsafe {
+      APP_CTX = None;
+      INIT_THREAD_ID = None;
+      APP_CTX_INIT = Once::new();
+    }
+  }
+}
+
 #[cfg(test)]
 mod tests {
   use super::*;
diff --git a/core/src/context/build_context.rs b/core/src/context/build_context.rs
index ff2e57d2b..6af648750 100644
--- a/core/src/context/build_context.rs
+++ b/core/src/context/build_context.rs
@@ -3,15 +3,20 @@ use crate::{
   widget::{widget_id::new_node, TreeArena, WidgetTree},
   window::{DelayEvent, WindowId},
 };
-use std::{ops::Deref, rc::Rc};
+use std::{
+  cell::{Ref, RefCell, UnsafeCell},
+  ops::Deref,
+  rc::Rc,
+};
 
 /// A context provide during build the widget tree.
 pub struct BuildCtx<'a> {
-  pub(crate) themes: Option<Vec<Rc<Theme>>>,
+  // tmp `UnsafeCell` before use `BuildCtx` as mutable reference.
+  pub(crate) themes: UnsafeCell<Option<Vec<Rc<Theme>>>>,
   /// The widget which this `BuildCtx` is created from. It's not means this
   /// is the parent of the widget which is builded by this `BuildCtx`.
   ctx_from: Option<WidgetId>,
-  pub(crate) tree: &'a mut WidgetTree,
+  pub(crate) tree: &'a RefCell<WidgetTree>,
 }
 
 /// A handle of `BuildCtx` that you can store it and access the `BuildCtx` later
@@ -24,16 +29,16 @@ pub struct BuildCtxHandle {
 
 impl<'a> BuildCtx<'a> {
   /// Return the window of this context is created from.
-  pub fn window(&self) -> Rc<Window> { self.tree.window() }
+  pub fn window(&self) -> Rc<Window> { self.tree.borrow().window() }
 
   /// Get the widget which this `BuildCtx` is created from.
-  pub fn ctx_from(&self) -> WidgetId { self.ctx_from.unwrap_or_else(|| self.tree.root()) }
+  pub fn ctx_from(&self) -> WidgetId { self.ctx_from.unwrap_or_else(|| self.tree.borrow().root()) }
 
   /// Create a handle of this `BuildCtx` which support `Clone`, `Copy` and
   /// convert back to this `BuildCtx`. This let you can store the `BuildCtx`.
   pub fn handle(&self) -> BuildCtxHandle {
     BuildCtxHandle {
-      wnd_id: self.tree.window().id(),
+      wnd_id: self.window().id(),
       ctx_from: self.ctx_from,
     }
   }
@@ -43,8 +48,12 @@ impl<'a> BuildCtx<'a> {
   }
 
   #[inline]
-  pub(crate) fn new(from: Option<WidgetId>, tree: &'a mut WidgetTree) -> Self {
-    Self { themes: None, ctx_from: from, tree }
+  pub(crate) fn new(from: Option<WidgetId>, tree: &'a RefCell<WidgetTree>) -> Self {
+    Self {
+      themes: UnsafeCell::new(None),
+      ctx_from: from,
+      tree,
+    }
   }
 
   pub(crate) fn find_cfg<T>(&self, f: impl Fn(&Theme) -> Option<&T>) -> Option<&T> {
@@ -60,41 +69,37 @@ impl<'a> BuildCtx<'a> {
   }
 
   /// Get the widget back of `id`, panic if not exist.
-  pub(crate) fn assert_get(&self, id: WidgetId) -> &dyn Render { id.assert_get(&self.tree.arena) }
-
-  pub(crate) fn assert_get_mut(&self, id: WidgetId) -> &mut Box<dyn Render> {
-    id.assert_get_mut(&mut self.force_as_mut().tree.arena)
+  pub(crate) fn assert_get(&self, id: WidgetId) -> Ref<dyn Render> {
+    Ref::map(self.tree.borrow(), |tree| id.assert_get(&tree.arena))
   }
 
   pub(crate) fn alloc_widget(&self, widget: Box<dyn Render>) -> WidgetId {
-    let arena = &mut self.force_as_mut().tree.arena;
-    new_node(arena, widget)
+    new_node(&mut self.tree.borrow_mut().arena, widget)
   }
 
   pub(crate) fn append_child(&mut self, parent: WidgetId, child: WidgetId) {
-    parent.append(child, &mut self.tree.arena);
+    parent.append(child, &mut self.tree.borrow_mut().arena);
   }
 
   /// Insert `next` after `prev`
   pub(crate) fn insert_after(&mut self, prev: WidgetId, next: WidgetId) {
-    let arena = &mut self.tree.arena;
-    prev.insert_after(next, arena);
+    prev.insert_after(next, &mut self.tree.borrow_mut().arena);
   }
 
   /// After insert new subtree to the widget tree, call this to watch the
   /// subtree and fire mount events.
   pub(crate) fn on_subtree_mounted(&self, id: WidgetId) {
-    id.descendants(&self.tree.arena)
+    id.descendants(&self.tree.borrow().arena)
       .for_each(|w| self.on_widget_mounted(w));
-    self.tree.mark_dirty(id);
+    self.tree.borrow_mut().mark_dirty(id);
   }
 
   /// After insert new widget to the widget tree, call this to watch the widget
   /// and fire mount events.
   pub(crate) fn on_widget_mounted(&self, id: WidgetId) {
     self.assert_get(id).query_all_type(
-      |notifier: &StateChangeNotifier| {
-        let state_changed = self.tree.dirty_set.clone();
+      |notifier: &Notifier| {
+        let state_changed = self.tree.borrow().dirty_set.clone();
         notifier
           .raw_modifies()
           .filter(|b| b.contains(ModifyScope::FRAMEWORK))
@@ -111,17 +116,17 @@ impl<'a> BuildCtx<'a> {
 
   /// Dispose the whole subtree of `id`, include `id` itself.
   pub(crate) fn dispose_subtree(&self, id: WidgetId) {
-    // todo: delay drop query
-    let tree = &mut self.force_as_mut().tree;
+    let mut tree = self.tree.borrow_mut();
+    let parent = id.parent(&tree.arena);
     tree.detach(id);
-    self
+    tree
       .window()
-      .add_delay_event(DelayEvent::Disposed { id, delay_drop: false });
+      .add_delay_event(DelayEvent::Disposed { id, parent });
     let (arena1, arena2) = unsafe { split_arena(&mut tree.arena) };
     id.descendants(arena1).for_each(|id| id.mark_drop(arena2))
   }
 
-  pub(crate) fn mark_dirty(&mut self, id: WidgetId) { self.tree.mark_dirty(id); }
+  pub(crate) fn mark_dirty(&mut self, id: WidgetId) { self.tree.borrow_mut().mark_dirty(id); }
 
   #[inline]
   pub(crate) fn push_theme(&self, theme: Rc<Theme>) { self.themes().push(theme); }
@@ -141,13 +146,14 @@ impl<'a> BuildCtx<'a> {
     }
   }
 
+  #[allow(clippy::mut_from_ref)]
   fn themes(&self) -> &mut Vec<Rc<Theme>> {
     let this = self.force_as_mut();
-    this.themes.get_or_insert_with(|| {
+    unsafe { &mut *this.themes.get() }.get_or_insert_with(|| {
       let mut themes = vec![];
       let Some(p) = self.ctx_from else { return themes };
 
-      let arena = &mut this.tree.arena;
+      let arena = &this.tree.borrow().arena;
       p.ancestors(arena).any(|p| {
         p.assert_get(arena).query_all_type(
           |t: &Rc<Theme>| {
@@ -168,9 +174,8 @@ impl BuildCtxHandle {
   /// the window is closed or widget is removed.
   pub fn with_ctx<R>(self, f: impl FnOnce(&BuildCtx) -> R) -> Option<R> {
     AppCtx::get_window(self.wnd_id).map(|wnd| {
-      let mut tree = wnd.widget_tree.borrow_mut();
-      let ctx = BuildCtx::new(self.ctx_from, &mut tree);
-      f(&ctx)
+      let mut ctx = BuildCtx::new(self.ctx_from, &wnd.widget_tree);
+      f(&mut ctx)
     })
   }
 }
@@ -194,6 +199,7 @@ mod tests {
     struct LightDarkThemes(Rc<RefCell<Vec<Theme>>>);
 
     let themes: Stateful<Vec<Rc<Theme>>> = Stateful::new(vec![]);
+    let c_themes = themes.clone_writer();
     let light_palette = Palette {
       brightness: Brightness::Light,
       ..Default::default()
@@ -202,27 +208,29 @@ mod tests {
       brightness: Brightness::Dark,
       ..Default::default()
     };
-    let light_dark = widget! {
-      states { themes: themes.clone() }
-      ThemeWidget {
+    let light_dark = fn_widget! {
+      @ThemeWidget {
         theme: Rc::new(Theme::Inherit(InheritTheme {
           palette: Some(Rc::new(light_palette)),
           ..<_>::default()
 
         })),
-        MockBox {
+        @MockBox {
           size: INFINITY_SIZE,
-          ThemeWidget {
+          @ThemeWidget {
             theme: Rc::new(Theme::Inherit(InheritTheme {
               palette: Some(Rc::new(dark_palette)),
               ..<_>::default()
             })),
-            MockBox {
+            @MockBox {
               size: ZERO_SIZE,
-              FnWidget::new(move |ctx: &BuildCtx| {
-                no_watch!(*themes) = ctx.themes().clone();
-                Void
-              })
+              @ {
+                FnWidget::new(move |ctx: &BuildCtx| {
+                  *$c_themes.write() = ctx.themes().clone();
+                  Void
+                })
+              }
+
             }
           }
         }
diff --git a/core/src/data_widget.rs b/core/src/data_widget.rs
index d2b619412..e2449ce6a 100644
--- a/core/src/data_widget.rs
+++ b/core/src/data_widget.rs
@@ -2,7 +2,9 @@
 //! is same as origin widget.
 
 use crate::{
-  impl_proxy_query, impl_proxy_render, impl_query_self_only, prelude::*, widget::FnWidget,
+  impl_proxy_query, impl_proxy_render, impl_query_self_only,
+  prelude::*,
+  widget::{FnWidget, WidgetTree},
 };
 
 pub struct DataWidget<D> {
@@ -16,7 +18,7 @@ impl<D: Query + 'static> DataWidget<D> {
   pub fn attach(widget: Widget, data: D) -> Widget {
     FnWidget::new(move |ctx| {
       let id = widget.build(ctx);
-      attach_to_id(id, ctx.force_as_mut(), |child| {
+      attach_to_id(id, &mut *ctx.tree.borrow_mut(), |child| {
         Box::new(Self::new(child, data))
       });
       id
@@ -25,30 +27,34 @@ impl<D: Query + 'static> DataWidget<D> {
   }
 
   pub fn attach_state(widget: Widget, data: State<D>) -> Widget {
-    match data {
-      State::Stateless(data) => DataWidget::attach(widget, data),
-      State::Stateful(data) => DataWidget::attach(widget, data),
+    match data.0.into_inner() {
+      InnerState::Data(data) => {
+        let data = data.into_inner();
+        DataWidget::attach(widget, data)
+      }
+      InnerState::Stateful(data) => DataWidget::attach(widget, data),
     }
   }
 }
 
-pub fn attach_to_id(
+pub(crate) fn attach_to_id(
   id: WidgetId,
-  ctx: &mut BuildCtx,
+  tree: &mut WidgetTree,
   attach_data: impl FnOnce(Box<dyn Render>) -> Box<dyn Render>,
 ) {
   let mut tmp: Box<dyn Render> = Box::new(Void);
-  let node = ctx.assert_get_mut(id);
-  std::mem::swap(&mut tmp, node);
+  let node = id.assert_get_mut(&mut tree.arena);
+  std::mem::swap(&mut tmp, &mut *node);
 
   let mut attached = attach_data(tmp);
-  std::mem::swap(node, &mut attached);
+  std::mem::swap(&mut *node, &mut attached);
 }
 
 impl_proxy_query!(paths [data, render], DataWidget<D>, <D>, where D: Query + 'static);
 impl_proxy_render!(proxy render, DataWidget<D>, <D>, where D: Query + 'static);
 
 /// Data attach widget that we don't care about its type.
+/// todo: directly use Box<dyn Any> instead of AnonymousData
 pub struct AnonymousData(Box<dyn Any>);
 
 impl AnonymousData {
diff --git a/core/src/declare.rs b/core/src/declare.rs
index d36d77d6f..df23d01a9 100644
--- a/core/src/declare.rs
+++ b/core/src/declare.rs
@@ -1,4 +1,4 @@
-use crate::{context::BuildCtx, prelude::Pipe};
+use crate::{context::BuildCtx, prelude::Pipe, state::ModifyScope};
 use rxrust::ops::box_it::BoxOp;
 use std::convert::Infallible;
 
@@ -18,7 +18,9 @@ pub trait Declare2 {
 /// document](declare) to know how to use it.
 pub trait DeclareBuilder {
   type Target;
-  fn build(self, ctx: &BuildCtx) -> Self::Target;
+  /// build the object with the given context, return the object and not care
+  /// about if this object is subscribed to other or not.
+  fn build_declare(self, ctx: &BuildCtx) -> Self::Target;
 }
 
 /// The type use to store the init value of the field when declare a object.
@@ -27,8 +29,10 @@ pub enum DeclareInit<V> {
   Pipe(Pipe<V>),
 }
 
+type ValueStream<V> = BoxOp<'static, (ModifyScope, V), Infallible>;
+
 impl<V: 'static> DeclareInit<V> {
-  pub fn unzip(self) -> (V, Option<BoxOp<'static, V, Infallible>>) {
+  pub fn unzip(self) -> (V, Option<ValueStream<V>>) {
     match self {
       Self::Value(v) => (v, None),
       Self::Pipe(v) => {
@@ -67,23 +71,11 @@ impl<V, U: From<V>> DeclareFrom<V, ()> for DeclareInit<U> {
   fn declare_from(value: V) -> Self { Self::Value(value.into()) }
 }
 
-impl<V, U: From<V>> DeclareFrom<V, Option<()>> for DeclareInit<Option<U>> {
-  #[inline]
-  fn declare_from(value: V) -> Self { Self::Value(Some(value.into())) }
-}
-
 impl<V: 'static, U: From<V> + 'static> DeclareFrom<Pipe<V>, Pipe<()>> for DeclareInit<U> {
   #[inline]
   fn declare_from(value: Pipe<V>) -> Self { Self::Pipe(value.map(U::from)) }
 }
 
-impl<V: 'static, U: From<V> + 'static> DeclareFrom<Pipe<V>, Option<Pipe<()>>>
-  for DeclareInit<Option<U>>
-{
-  #[inline]
-  fn declare_from(value: Pipe<V>) -> Self { Self::Pipe(value.map(|v| Some(v.into()))) }
-}
-
 #[derive(Debug, PartialEq, Hash)]
 pub struct DeclareStripOption<O>(O);
 
diff --git a/core/src/dynamic_widget.rs b/core/src/dynamic_widget.rs
deleted file mode 100644
index 7f3dc4e52..000000000
--- a/core/src/dynamic_widget.rs
+++ /dev/null
@@ -1,899 +0,0 @@
-use smallvec::SmallVec;
-
-use crate::{
-  builtin_widgets::key::AnyKey,
-  impl_proxy_query, impl_query_self_only,
-  prelude::*,
-  widget::{
-    widget_id::{empty_node, split_arena},
-    *,
-  },
-  window::DelayEvent,
-};
-use std::{
-  cell::RefCell,
-  collections::{HashMap, HashSet},
-  rc::Rc,
-};
-
-#[derive(Clone, Copy)]
-/// the information of a widget generated by `DynWidget`.
-pub(crate) enum DynWidgetGenInfo {
-  /// DynWidget generate single result, and have static children. The depth
-  /// describe the distance from first dynamic widget (self) to the static
-  /// child.
-  DynDepth(usize),
-  /// `DynWidget` without static children, and the whole subtree of generated
-  /// widget are dynamic widgets. The value record how many dynamic siblings
-  /// have.
-  WholeSubtree(usize),
-}
-
-// todo: we can remove `DynWidget` after syntax refactor.
-//  - 1. Stateful Compose/ComposeChild as a parent needn't keep
-//    Stateful<DynWidget<W>>.
-//  - 2. Stateful Render can be directly replace the widget in the tree.
-//  - 3. Stateful Multi Widget in Stateful<DynWidget<W>> that should be include
-//    in `Multi` widget.
-
-/// Widget that as a container of dynamic widgets
-
-#[derive(Declare)]
-pub struct DynWidget<D> {
-  #[declare(convert=custom)]
-  pub(crate) dyns: Option<D>,
-}
-
-impl<D> DynWidgetDeclarer<D> {
-  pub fn dyns(mut self, d: D) -> Self {
-    self.dyns = Some(Some(d));
-    self
-  }
-}
-
-impl<D> DynWidget<D> {
-  pub fn set_declare_dyns(&mut self, dyns: D) { self.dyns = Some(dyns); }
-
-  pub fn into_inner(mut self) -> D {
-    self
-      .dyns
-      .take()
-      .unwrap_or_else(|| unreachable!("stateless `DynWidget` must be initialized."))
-  }
-}
-
-/// Widget help to limit which `DynWidget` can be a parent widget and which can
-/// be a child.
-pub(crate) struct DynRender<D> {
-  dyn_widgets: Stateful<DynWidget<D>>,
-  self_render: RefCell<Box<dyn Render>>,
-  gen_info: RefCell<Option<DynWidgetGenInfo>>,
-  dyns_to_widgets: fn(D) -> Box<dyn Iterator<Item = Widget>>,
-  drop_until_widgets: WidgetsHost,
-}
-
-// A dynamic widget must be stateful, depends others.
-impl<D: 'static> Render for DynRender<D> {
-  fn perform_layout(&self, clamp: BoxClamp, ctx: &mut LayoutCtx) -> Size {
-    if !self.regen_if_need(ctx) {
-      self.self_render.borrow().perform_layout(clamp, ctx)
-    } else {
-      ctx.new_layouter(ctx.id).perform_widget_layout(clamp)
-    }
-  }
-
-  fn paint(&self, ctx: &mut PaintingCtx) {
-    if !self.drop_until_widgets.is_empty() {
-      ctx.painter.save();
-      // set the position back to parent.
-      let rc = ctx.box_rect().unwrap();
-      ctx.painter.translate(-rc.min_x(), -rc.min_y());
-      self.drop_until_widgets.paint(ctx);
-      ctx.painter.restore();
-    }
-
-    self.self_render.borrow().paint(ctx);
-  }
-
-  fn only_sized_by_parent(&self) -> bool {
-    // Dyn widget effect the children of its parent. Even if its self render is only
-    // sized by parent, but itself effect siblings, sibling effect parent, means
-    // itself not only sized by parent but also its sibling.
-    false
-  }
-
-  fn hit_test(&self, ctx: &HitTestCtx, pos: Point) -> HitTest {
-    self.self_render.borrow().hit_test(ctx, pos)
-  }
-
-  fn get_transform(&self) -> Option<Transform> { self.self_render.borrow().get_transform() }
-}
-
-#[derive(Default, Clone)]
-struct WidgetsHost {
-  wids: Rc<RefCell<HashSet<WidgetId>>>,
-}
-
-impl WidgetsHost {
-  fn add(&self, wid: WidgetId) { self.wids.borrow_mut().insert(wid); }
-
-  fn is_empty(&self) -> bool { self.wids.borrow().is_empty() }
-
-  fn paint(&self, ctx: &mut PaintingCtx) {
-    self.wids.borrow().iter().for_each(|wid| {
-      wid.paint_subtree(ctx);
-    });
-  }
-}
-
-impl_query_self_only!(WidgetsHost);
-
-impl<D: 'static> DynRender<D> {
-  pub(crate) fn single(dyns: Stateful<DynWidget<D>>) -> Self
-  where
-    Widget: From<D>,
-  {
-    DynRender {
-      dyn_widgets: dyns,
-      self_render: RefCell::new(Box::new(Void)),
-      gen_info: <_>::default(),
-      dyns_to_widgets: move |w| Box::new(std::iter::once(w.into())),
-      drop_until_widgets: <_>::default(),
-    }
-  }
-
-  fn regen_if_need(&self, ctx: &mut LayoutCtx) -> bool {
-    let Some(new_widgets) = self.dyn_widgets.silent_ref().dyns.take() else {
-      return false;
-    };
-
-    let mut new_widgets = (self.dyns_to_widgets)(new_widgets)
-      .map(|w| {
-        let build_ctx = BuildCtx::new(ctx.parent(), ctx.tree);
-        w.build(&build_ctx)
-      })
-      .collect::<Vec<_>>();
-
-    if new_widgets.is_empty() {
-      new_widgets.push(empty_node(&mut ctx.tree.arena));
-    }
-
-    let gen_info = *self.gen_info.borrow_mut().get_or_insert_with(|| {
-      if ctx.has_child() {
-        DynWidgetGenInfo::DynDepth(1)
-      } else {
-        DynWidgetGenInfo::WholeSubtree(1)
-      }
-    });
-
-    self.update_key_state(ctx.id, &new_widgets, &ctx.tree.arena);
-
-    let mut tmp_render = std::mem::replace(&mut *self.self_render.borrow_mut(), Box::new(Void {}));
-    // Place the real old render in node.
-    std::mem::swap(&mut tmp_render, ctx.id.assert_get_mut(&mut ctx.tree.arena));
-
-    self.dyn_widgets.modify_notifier.reset();
-
-    let wrap_render = |gen_info, tree: &mut WidgetTree| {
-      let new_render = DynRender {
-        dyn_widgets: self.dyn_widgets.clone(),
-        self_render: RefCell::new(Box::new(Void {})),
-        gen_info: RefCell::new(Some(gen_info)),
-        dyns_to_widgets: self.dyns_to_widgets,
-        drop_until_widgets: self.drop_until_widgets.clone(),
-      };
-
-      // Place the first new render in `DynRender`.
-      std::mem::swap(
-        &mut *new_render.self_render.borrow_mut(),
-        new_widgets[0].assert_get_mut(&mut tree.arena),
-      );
-      // use the dyn render as the first new widget.
-      *new_widgets[0].assert_get_mut(&mut tree.arena) = Box::new(new_render);
-    };
-
-    let tree = &mut ctx.tree;
-
-    match gen_info {
-      DynWidgetGenInfo::DynDepth(depth) => {
-        assert_eq!(new_widgets.len(), 1);
-
-        let declare_child_parent = single_down(ctx.id, &tree.arena, depth as isize - 1);
-        let (new_leaf, down_level) = down_to_leaf(new_widgets[0], &tree.arena);
-        wrap_render(DynWidgetGenInfo::DynDepth(down_level + 1), tree);
-
-        if let Some(declare_child_parent) = declare_child_parent {
-          // Safety: control two subtree not intersect.
-          let (arena1, arena2) = unsafe { split_arena(&mut tree.arena) };
-          declare_child_parent
-            .children(arena1)
-            .for_each(|c| new_leaf.append(c, arena2));
-        }
-
-        ctx.id.insert_after(new_widgets[0], &mut tree.arena);
-        self.remove_old_subtree(ctx.id, self.drop_until_widgets.clone(), tree);
-
-        let mut w = new_widgets[0];
-        loop {
-          w.on_mounted(tree);
-          if w == new_leaf {
-            break;
-          }
-          w = w.single_child(&tree.arena).unwrap();
-        }
-      }
-
-      DynWidgetGenInfo::WholeSubtree(siblings) => {
-        wrap_render(DynWidgetGenInfo::WholeSubtree(new_widgets.len()), tree);
-        let mut cursor = Some(ctx.id);
-        new_widgets
-          .iter()
-          .for_each(|w| ctx.id.insert_before(*w, &mut tree.arena));
-
-        (0..siblings).for_each(|_| {
-          let o = cursor.unwrap();
-          cursor = o.next_sibling(&tree.arena);
-          self.remove_old_subtree(o, self.drop_until_widgets.clone(), tree);
-        });
-
-        new_widgets.iter().for_each(|w| w.on_mounted_subtree(tree));
-      }
-    };
-
-    if ctx.id == tree.root() {
-      tree.root = new_widgets.first().copied();
-    }
-    ctx.id = new_widgets[0];
-
-    true
-  }
-
-  fn remove_old_subtree(&self, wid: WidgetId, host: WidgetsHost, tree: &mut WidgetTree) {
-    fn detach(
-      host: WidgetsHost,
-      wid: WidgetId,
-      drop_until: Stateful<DelayDropWidget>,
-      tree: &mut WidgetTree,
-    ) {
-      let mut handlers = SmallVec::<[_; 1]>::new();
-      tree.detach(wid);
-
-      let arena = &mut tree.arena;
-      wid.assert_get(arena).query_all_type(
-        |notifier: &StateChangeNotifier| {
-          let state_changed = tree.dirty_set.clone();
-          // abandon the old subscribe
-          notifier.reset();
-          let h = notifier
-            .raw_modifies()
-            .filter(|b| b.contains(ModifyScope::FRAMEWORK))
-            .subscribe(move |_| {
-              state_changed.borrow_mut().insert(wid);
-            })
-            .unsubscribe_when_dropped();
-          handlers.push(h);
-          true
-        },
-        QueryOrder::OutsideFirst,
-      );
-
-      let wnd_id = tree.window().id();
-      let tmp = drop_until.clone();
-      drop_until
-        .raw_modifies()
-        .filter(move |b| b.contains(ModifyScope::FRAMEWORK) && tmp.state_ref().delay_drop_until)
-        .take(1)
-        .delay(std::time::Duration::ZERO, tree.window().frame_scheduler())
-        .subscribe(move |_| {
-          if let Some(wnd) = AppCtx::get_window(wnd_id) {
-            wnd.widget_tree.borrow_mut().remove_subtree(wid);
-          }
-          host.wids.borrow_mut().remove(&wid);
-          handlers.clear();
-        });
-    }
-
-    let wnd = tree.window();
-
-    let drop_until = wid
-      .assert_get(&tree.arena)
-      .query_on_first_type(QueryOrder::OutsideFirst, |w: &Stateful<DelayDropWidget>| {
-        w.clone_stateful()
-      });
-
-    let is_drop = drop_until
-      .as_ref()
-      .map_or(true, |w| w.state_ref().delay_drop_until);
-    wnd.add_delay_event(DelayEvent::Disposed { id: wid, delay_drop: !is_drop });
-    if !is_drop {
-      detach(host, wid, drop_until.unwrap(), tree);
-      self.drop_until_widgets.add(wid);
-      tree.dirty_set.borrow_mut().insert(wid);
-    } else {
-      tree.detach(wid);
-
-      let (arena1, arena2) = unsafe { split_arena(&mut tree.arena) };
-      wid
-        .descendants(arena1)
-        .for_each(|wid| wid.mark_drop(arena2))
-    }
-  }
-
-  fn update_key_state(&self, sign_id: WidgetId, new_widgets: &[WidgetId], arena: &TreeArena) {
-    let mut old_key_list = HashMap::new();
-
-    let mut gen_info = self.gen_info.borrow_mut();
-    let Some(gen_info) = &mut *gen_info else { return };
-
-    let siblings = match gen_info {
-      DynWidgetGenInfo::DynDepth(_) => 1,
-      DynWidgetGenInfo::WholeSubtree(width) => *width,
-    };
-    let mut remove = Some(sign_id);
-    (0..siblings).for_each(|_| {
-      let o = remove.unwrap();
-      inspect_key(&o, arena, |old_key_widget: &dyn AnyKey| {
-        let key = old_key_widget.key();
-        old_key_list.insert(key, o);
-      });
-
-      remove = o.next_sibling(arena);
-    });
-
-    new_widgets.iter().for_each(|n| {
-      inspect_key(n, arena, |new_key_widget: &dyn AnyKey| {
-        let key = &new_key_widget.key();
-        if let Some(wid) = old_key_list.get(key) {
-          inspect_key(wid, arena, |old_key_widget: &dyn AnyKey| {
-            new_key_widget.record_prev_key_widget(old_key_widget);
-            old_key_widget.record_next_key_widget(new_key_widget);
-          });
-        }
-      });
-    });
-  }
-}
-
-impl<D> DynRender<Multi<D>> {
-  pub(crate) fn multi(dyns: Stateful<DynWidget<Multi<D>>>) -> Self
-  where
-    D: IntoIterator + 'static,
-    Widget: From<D::Item>,
-  {
-    Self {
-      dyn_widgets: dyns,
-      self_render: RefCell::new(Box::new(Void)),
-      gen_info: <_>::default(),
-      dyns_to_widgets: move |d| Box::new(d.into_inner().into_iter().map(|w| w.into())),
-      drop_until_widgets: <_>::default(),
-    }
-  }
-}
-
-impl<D: 'static> DynRender<Option<D>>
-where
-  Widget: From<D>,
-{
-  pub(crate) fn option(dyns: Stateful<DynWidget<Option<D>>>) -> Self {
-    DynRender {
-      dyn_widgets: dyns,
-      self_render: RefCell::new(Box::new(Void)),
-      gen_info: <_>::default(),
-      dyns_to_widgets: move |w| Box::new(w.into_iter().map(From::from)),
-      drop_until_widgets: <_>::default(),
-    }
-  }
-}
-
-impl_proxy_query!(paths [self_render.borrow(), dyn_widgets], DynRender<D>, <D>, where D: 'static );
-impl_query_self_only!(DynWidget<D>, <D>, where D: 'static);
-
-fn inspect_key(id: &WidgetId, tree: &TreeArena, mut cb: impl FnMut(&dyn AnyKey)) {
-  #[allow(clippy::borrowed_box)]
-  id.assert_get(tree)
-    .query_on_first_type(QueryOrder::OutsideFirst, |key_widget: &Box<dyn AnyKey>| {
-      cb(&**key_widget)
-    });
-}
-
-fn single_down(id: WidgetId, arena: &TreeArena, mut down_level: isize) -> Option<WidgetId> {
-  let mut res = Some(id);
-  while down_level > 0 {
-    down_level -= 1;
-    res = res.unwrap().single_child(arena);
-  }
-  res
-}
-
-fn down_to_leaf(id: WidgetId, arena: &TreeArena) -> (WidgetId, usize) {
-  let mut leaf = id;
-  let mut depth = 0;
-  while let Some(c) = leaf.single_child(arena) {
-    leaf = c;
-    depth += 1;
-  }
-  (leaf, depth)
-}
-
-// impl IntoWidget
-
-// only `DynWidget` gen single widget can as a parent widget
-impl<D: 'static> WidgetBuilder for Stateful<DynWidget<D>>
-where
-  Widget: From<D>,
-{
-  fn build(self, ctx: &BuildCtx) -> WidgetId { DynRender::single(self).build(ctx) }
-}
-
-impl<D: 'static> WidgetBuilder for Stateful<DynWidget<Option<D>>>
-where
-  Widget: From<D>,
-{
-  fn build(self, ctx: &BuildCtx) -> WidgetId {
-    DynRender {
-      dyn_widgets: self,
-      self_render: RefCell::new(Box::new(Void)),
-      gen_info: <_>::default(),
-      dyns_to_widgets: move |w| Box::new(w.into_iter().map(From::from)),
-      drop_until_widgets: <_>::default(),
-    }
-    .build(ctx)
-  }
-}
-
-impl<W: SingleChild> SingleChild for DynWidget<W> {}
-
-#[cfg(test)]
-mod tests {
-  use std::{
-    cell::{Ref, RefCell},
-    rc::Rc,
-  };
-
-  use crate::{
-    builtin_widgets::key::KeyChange, impl_query_self_only, prelude::*, test_helper::*,
-    widget::TreeArena,
-  };
-
-  #[test]
-  fn expr_widget_as_root() {
-    let _guard = unsafe { AppCtx::new_lock_scope() };
-
-    let size = Stateful::new(Size::zero());
-    let w = widget! {
-      states { size: size.clone() }
-      DynWidget {
-        dyns: MockBox { size: *size },
-        Void {}
-      }
-    };
-    let wnd = TestWindow::new(w);
-    let mut tree = wnd.widget_tree.borrow_mut();
-    tree.layout(Size::zero());
-    let ids = tree.root().descendants(&tree.arena).collect::<Vec<_>>();
-    assert_eq!(ids.len(), 2);
-    {
-      *size.state_ref() = Size::new(1., 1.);
-    }
-    tree.layout(Size::zero());
-    let new_ids = tree.root().descendants(&tree.arena).collect::<Vec<_>>();
-    assert_eq!(new_ids.len(), 2);
-
-    assert_eq!(ids[1], new_ids[1]);
-  }
-
-  #[test]
-  fn expr_widget_with_declare_child() {
-    let _guard = unsafe { AppCtx::new_lock_scope() };
-
-    let size = Stateful::new(Size::zero());
-    let w = widget! {
-      states { size: size.clone() }
-      MockBox {
-        size: Size::zero(),
-        DynWidget {
-          dyns: MockBox { size: *size },
-          Void {}
-        }
-      }
-    };
-    let wnd = TestWindow::new(w);
-    let mut tree = wnd.widget_tree.borrow_mut();
-    tree.layout(Size::zero());
-    let ids = tree.root().descendants(&tree.arena).collect::<Vec<_>>();
-    assert_eq!(ids.len(), 3);
-    {
-      *size.state_ref() = Size::new(1., 1.);
-    }
-    tree.layout(Size::zero());
-    let new_ids = tree.root().descendants(&tree.arena).collect::<Vec<_>>();
-    assert_eq!(new_ids.len(), 3);
-
-    assert_eq!(ids[0], new_ids[0]);
-    assert_eq!(ids[2], new_ids[2]);
-  }
-
-  #[test]
-  fn expr_widget_mounted_new() {
-    let _guard = unsafe { AppCtx::new_lock_scope() };
-
-    let v = Stateful::new(vec![1, 2, 3]);
-
-    let new_cnt = Stateful::new(0);
-    let drop_cnt = Stateful::new(0);
-    let w = widget! {
-      states {
-        v: v.clone(),
-        new_cnt: new_cnt.clone(),
-        drop_cnt: drop_cnt.clone(),
-      }
-
-      MockMulti {
-        Multi::new(v.clone().into_iter().map(move |_| {
-          widget! {
-            MockBox{
-              size: Size::zero(),
-              on_mounted: move |_| *new_cnt += 1,
-              on_disposed: move |_| *drop_cnt += 1
-            }
-          }
-        }))
-      }
-    };
-
-    let mut wnd = TestWindow::new(w);
-    wnd.on_wnd_resize_event(Size::zero());
-    wnd.draw_frame();
-    assert_eq!(*new_cnt.state_ref(), 3);
-    assert_eq!(*drop_cnt.state_ref(), 0);
-
-    v.state_ref().push(4);
-    wnd.draw_frame();
-    assert_eq!(*new_cnt.state_ref(), 7);
-    assert_eq!(*drop_cnt.state_ref(), 3);
-
-    v.state_ref().pop();
-    wnd.draw_frame();
-    assert_eq!(*new_cnt.state_ref(), 10);
-    assert_eq!(*drop_cnt.state_ref(), 7);
-  }
-
-  #[test]
-  fn dyn_widgets_with_key() {
-    let _guard = unsafe { AppCtx::new_lock_scope() };
-
-    let v = Stateful::new(vec![(1, '1'), (2, '2'), (3, '3')]);
-    let enter_list: Stateful<Vec<char>> = Stateful::new(vec![]);
-    let update_list: Stateful<Vec<char>> = Stateful::new(vec![]);
-    let leave_list: Stateful<Vec<char>> = Stateful::new(vec![]);
-    let key_change: Stateful<KeyChange<char>> = Stateful::new(KeyChange::default());
-    let w = widget! {
-      states {
-        v: v.clone(),
-        enter_list: enter_list.clone(),
-        update_list: update_list.clone(),
-        leave_list: leave_list.clone(),
-        key_change: key_change.clone(),
-      }
-
-      MockMulti {
-        Multi::new(v.clone().into_iter().map(move |(i, c)| {
-          widget! {
-            KeyWidget {
-              id: key,
-              key: Key::from(i),
-              value: c,
-
-              MockBox {
-                size: Size::zero(),
-                on_mounted: move |_| {
-                  if key.is_enter() {
-                    (*enter_list).push(key.value);
-                  }
-
-                  if key.is_changed() {
-                    (*update_list).push(key.value);
-                    *key_change = key.get_change();
-                  }
-                },
-                on_disposed: move |_| {
-                  if key.is_leave() {
-                    (*leave_list).push(key.value);
-                  }
-                }
-              }
-            }
-          }
-        }))
-      }
-    };
-
-    // 1. 3 item enter
-    let mut wnd = TestWindow::new(w);
-    wnd.draw_frame();
-    let expect_vec = vec!['1', '2', '3'];
-    assert_eq!((*enter_list.state_ref()).len(), 3);
-    assert!(
-      (*enter_list.state_ref())
-        .iter()
-        .all(|item| expect_vec.contains(item))
-    );
-    // clear enter list vec
-    (*enter_list.state_ref()).clear();
-
-    // 2. add 1 item
-    v.state_ref().push((4, '4'));
-    wnd.on_wnd_resize_event(ZERO_SIZE);
-    wnd.draw_frame();
-
-    let expect_vec = vec!['4'];
-    assert_eq!((*enter_list.state_ref()).len(), 1);
-    assert!(
-      (*enter_list.state_ref())
-        .iter()
-        .all(|item| expect_vec.contains(item))
-    );
-    // clear enter list vec
-    (*enter_list.state_ref()).clear();
-
-    // 3. update the second item
-    v.state_ref()[1].1 = 'b';
-    wnd.draw_frame();
-
-    let expect_vec = vec![];
-    assert_eq!((*enter_list.state_ref()).len(), 0);
-    assert!(
-      (*enter_list.state_ref())
-        .iter()
-        .all(|item| expect_vec.contains(item))
-    );
-
-    let expect_vec = vec!['b'];
-    assert_eq!((*update_list.state_ref()).len(), 1);
-    assert!(
-      (*update_list.state_ref())
-        .iter()
-        .all(|item| expect_vec.contains(item))
-    );
-    assert_eq!(*key_change.state_ref(), KeyChange(Some('2'), 'b'));
-    (*update_list.state_ref()).clear();
-
-    // 4. remove the second item
-    v.state_ref().remove(1);
-    wnd.draw_frame();
-    let expect_vec = vec!['b'];
-    assert_eq!((*leave_list.state_ref()), expect_vec);
-    assert_eq!((*leave_list.state_ref()).len(), 1);
-    assert!(
-      (*leave_list.state_ref())
-        .iter()
-        .all(|item| expect_vec.contains(item))
-    );
-    (*leave_list.state_ref()).clear();
-
-    // 5. update the first item
-    v.state_ref()[0].1 = 'a';
-    wnd.draw_frame();
-
-    assert_eq!((*enter_list.state_ref()).len(), 0);
-
-    let expect_vec = vec!['a'];
-    assert_eq!((*update_list.state_ref()).len(), 1);
-    assert!(
-      (*update_list.state_ref())
-        .iter()
-        .all(|item| expect_vec.contains(item))
-    );
-    assert_eq!(*key_change.state_ref(), KeyChange(Some('1'), 'a'));
-    (*update_list.state_ref()).clear();
-  }
-
-  #[test]
-  fn delay_drop_widgets() {
-    let _guard = unsafe { AppCtx::new_lock_scope() };
-
-    #[derive(Default, Clone)]
-    struct Task {
-      mounted: u32,
-      pin: bool,
-      paint_cnt: Rc<RefCell<u32>>,
-      layout_cnt: Rc<RefCell<u32>>,
-      trigger: u32,
-      wid: Option<WidgetId>,
-    }
-
-    fn build(item: Stateful<Task>) -> Widget {
-      widget! {
-        states { task: item.clone() }
-        TaskWidget {
-          delay_drop_until: !task.pin,
-          layout_cnt: task.layout_cnt.clone(),
-          paint_cnt: task.paint_cnt.clone(),
-          trigger: task.trigger,
-          on_mounted: move |ctx| {
-            task.mounted += 1;
-            task.wid = Some(ctx.id);
-          },
-          on_disposed: move |ctx| {
-            let wid = task.wid.take();
-            assert_eq!(wid, Some(ctx.id));
-          }
-        }
-      }
-      .into()
-    }
-
-    #[derive(Declare)]
-    struct TaskWidget {
-      trigger: u32,
-      paint_cnt: Rc<RefCell<u32>>,
-      layout_cnt: Rc<RefCell<u32>>,
-    }
-
-    impl Render for TaskWidget {
-      fn perform_layout(&self, _: BoxClamp, _: &mut LayoutCtx) -> Size {
-        *self.layout_cnt.borrow_mut() += 1;
-        Size::new(1., 1.)
-      }
-
-      fn paint(&self, _: &mut PaintingCtx) { *self.paint_cnt.borrow_mut() += 1; }
-    }
-
-    impl_query_self_only!(TaskWidget);
-
-    fn child_count(wnd: &Window) -> usize {
-      let tree = wnd.widget_tree.borrow();
-      let root = tree.root();
-      root.children(&tree.arena).count()
-    }
-
-    let tasks = (0..3)
-      .map(|_| Stateful::new(Task::default()))
-      .collect::<Vec<_>>();
-    let tasks = Stateful::new(tasks);
-    let w = widget! {
-      states {tasks: tasks.clone()}
-      MockMulti {
-        Multi::new(tasks.clone().into_iter().map(build))
-      }
-    };
-
-    let mut wnd = TestWindow::new(w);
-    let mut removed = vec![];
-
-    wnd.draw_frame();
-    assert_eq!(child_count(&wnd), 3);
-
-    // the first pined widget will still paint it
-    tasks.state_ref()[0].state_ref().pin = true;
-    removed.push(tasks.state_ref().remove(0));
-    wnd.draw_frame();
-    assert_eq!(child_count(&wnd), 2);
-    assert_eq!(*removed[0].state_ref().paint_cnt.borrow(), 2);
-
-    // the remove pined widget will paint and no layout when no changed
-    let first_layout_cnt = *removed[0].state_ref().layout_cnt.borrow();
-    tasks.state_ref().get(0).unwrap().state_ref().pin = true;
-    removed.push(tasks.state_ref().remove(0));
-    wnd.draw_frame();
-    assert_eq!(child_count(&wnd), 1);
-    assert_eq!(*removed[0].state_ref().paint_cnt.borrow(), 3);
-    assert_eq!(*removed[1].state_ref().paint_cnt.borrow(), 3);
-    assert_eq!(
-      *removed[0].state_ref().layout_cnt.borrow(),
-      first_layout_cnt
-    );
-
-    // the remove pined widget only mark self dirty
-    let first_layout_cnt = *removed[0].state_ref().layout_cnt.borrow();
-    let secord_layout_cnt = *removed[1].state_ref().layout_cnt.borrow();
-    let host_layout_cnt = *tasks.state_ref()[0].state_ref().layout_cnt.borrow();
-    removed[0].state_ref().trigger += 1;
-    wnd.draw_frame();
-    assert_eq!(
-      *removed[0].state_ref().layout_cnt.borrow(),
-      first_layout_cnt + 1
-    );
-    assert_eq!(*removed[0].state_ref().paint_cnt.borrow(), 4);
-    assert_eq!(
-      *removed[1].state_ref().layout_cnt.borrow(),
-      secord_layout_cnt
-    );
-    assert_eq!(
-      *tasks.state_ref()[0].state_ref().layout_cnt.borrow(),
-      host_layout_cnt
-    );
-
-    // when unpined, it will no paint anymore
-    removed[0].state_ref().pin = false;
-    wnd.draw_frame();
-    assert_eq!(*removed[0].state_ref().paint_cnt.borrow(), 4);
-    assert_eq!(*removed[1].state_ref().paint_cnt.borrow(), 5);
-
-    // after removed, it will no paint and layout anymore
-    let first_layout_cnt = *removed[0].state_ref().layout_cnt.borrow();
-    removed[0].state_ref().trigger += 1;
-    wnd.draw_frame();
-    assert_eq!(*removed[0].state_ref().paint_cnt.borrow(), 4);
-    assert_eq!(*removed[1].state_ref().paint_cnt.borrow(), 5);
-    assert_eq!(
-      *removed[0].state_ref().layout_cnt.borrow(),
-      first_layout_cnt
-    );
-
-    // other pined widget is work fine.
-    let first_layout_cnt = *removed[0].state_ref().layout_cnt.borrow();
-    let second_layout_cnt = *removed[1].state_ref().layout_cnt.borrow();
-    removed[1].state_ref().trigger += 1;
-    wnd.draw_frame();
-    assert_eq!(*removed[0].state_ref().paint_cnt.borrow(), 4);
-    assert_eq!(*removed[1].state_ref().paint_cnt.borrow(), 6);
-    assert_eq!(
-      *removed[0].state_ref().layout_cnt.borrow(),
-      first_layout_cnt
-    );
-    assert_eq!(
-      *removed[1].state_ref().layout_cnt.borrow(),
-      second_layout_cnt + 1,
-    );
-  }
-
-  #[test]
-  fn remove_delay_drop_widgets() {
-    let _guard = unsafe { AppCtx::new_lock_scope() };
-
-    let child = Stateful::new(Some(()));
-    let child_destroy_until = Stateful::new(false);
-    let grandson = Stateful::new(Some(()));
-    let grandson_destroy_until = Stateful::new(false);
-    let w = widget! {
-    states {
-      child: child.clone(),
-      child_destroy_until: child_destroy_until.clone(),
-      grandson: grandson.clone(),
-      grandson_destroy_until: grandson_destroy_until.clone(),
-    }
-    MockMulti {
-      Option::map(child.as_ref(), move|_| widget! {
-        MockMulti {
-          delay_drop_until: *child_destroy_until,
-          Option::map(grandson.as_ref(), move|_| widget! {
-            MockBox {
-              delay_drop_until: *grandson_destroy_until,
-              size: Size::zero(),
-            }
-          })
-        }
-      })
-      }
-    };
-    let mut wnd = TestWindow::new(w);
-    wnd.draw_frame();
-
-    fn tree_arena(wnd: &TestWindow) -> Ref<TreeArena> {
-      let tree = wnd.widget_tree.borrow();
-      Ref::map(tree, |t| &t.arena)
-    }
-
-    let grandson_id = {
-      let arena = tree_arena(&wnd);
-      let root = wnd.widget_tree.borrow().root();
-      root
-        .first_child(&arena)
-        .unwrap()
-        .first_child(&arena)
-        .unwrap()
-    };
-
-    wnd.draw_frame();
-    assert!(!grandson_id.is_dropped(&tree_arena(&wnd)));
-
-    child.state_ref().take();
-    wnd.draw_frame();
-    assert!(!grandson_id.is_dropped(&tree_arena(&wnd)));
-
-    *child_destroy_until.state_ref() = true;
-    wnd.draw_frame();
-    assert!(grandson_id.is_dropped(&tree_arena(&wnd)));
-  }
-}
diff --git a/core/src/events/dispatcher.rs b/core/src/events/dispatcher.rs
index aa833df98..6b253a446 100644
--- a/core/src/events/dispatcher.rs
+++ b/core/src/events/dispatcher.rs
@@ -192,12 +192,12 @@ impl Dispatcher {
       .copied();
 
     if let Some(old) = old {
-      let ancestor = new_hit.and_then(|w| w.common_ancestors(old, &tree.arena).next());
+      let ancestor = new_hit.and_then(|w| w.lowest_common_ancestor(old, &tree.arena));
       wnd.add_delay_event(DelayEvent::PointerLeave { bottom: old, up: ancestor });
     };
 
     if let Some(new) = new_hit {
-      let ancestor = old.and_then(|o| o.common_ancestors(new, &tree.arena).next());
+      let ancestor = old.and_then(|o| o.lowest_common_ancestor(new, &tree.arena));
       wnd.add_delay_event(DelayEvent::PointerEnter { bottom: new, up: ancestor });
     }
 
diff --git a/core/src/events/focus_mgr.rs b/core/src/events/focus_mgr.rs
index 9d97b8fd4..f67bbf370 100644
--- a/core/src/events/focus_mgr.rs
+++ b/core/src/events/focus_mgr.rs
@@ -696,7 +696,7 @@ mod tests {
     log.borrow_mut().clear();
 
     wnd.focus_mgr.borrow_mut().focus(parent);
-    wnd.emit_events();
+    wnd.run_frame_tasks();
     assert_eq!(
       &*log.borrow(),
       &["blur child", "focusout child", "focus parent",]
@@ -704,7 +704,7 @@ mod tests {
     log.borrow_mut().clear();
 
     wnd.focus_mgr.borrow_mut().blur();
-    wnd.emit_events();
+    wnd.run_frame_tasks();
     assert_eq!(&*log.borrow(), &["blur parent", "focusout parent",]);
   }
 
diff --git a/core/src/lib.rs b/core/src/lib.rs
index b900d9138..283a537d9 100644
--- a/core/src/lib.rs
+++ b/core/src/lib.rs
@@ -14,7 +14,6 @@ pub(crate) mod widget_tree;
 
 pub mod clipboard;
 pub mod declare;
-pub mod dynamic_widget;
 pub mod events;
 pub mod pipe;
 pub mod ticker;
@@ -22,6 +21,7 @@ pub mod timer;
 pub mod widget;
 pub mod widget_children;
 pub mod window;
+pub use rxrust;
 
 pub mod prelude {
   pub use crate::animation::*;
@@ -34,10 +34,7 @@ pub mod prelude {
   #[doc(no_inline)]
   pub use crate::declare::*;
   #[doc(no_inline)]
-  pub use crate::dynamic_widget::*;
-  #[doc(no_inline)]
   pub use crate::events::*;
-  pub use crate::path_state_splitter;
   #[doc(no_inline)]
   pub use crate::pipe::Pipe;
   #[doc(no_inline)]
@@ -60,8 +57,8 @@ pub mod prelude {
   pub use ribir_geom::*;
   #[doc(no_inline)]
   pub use ribir_macros::{
-    ctx, fn_widget, include_svg, pipe, rdl, set_build_ctx, watch, widget, Declare, Declare2, Lerp,
-    MultiChild, SingleChild, Template, _dollar_ಠ_ಠ,
+    ctx, fn_widget, include_svg, map_writer, pipe, rdl, ribir_expanded_ಠ_ಠ, set_build_ctx,
+    split_writer, watch, widget, Declare, Declare2, Lerp, MultiChild, SingleChild, Template,
   };
   #[doc(no_inline)]
   pub use ribir_painter::*;
diff --git a/core/src/pipe.rs b/core/src/pipe.rs
index d696ff4bf..641b66a3e 100644
--- a/core/src/pipe.rs
+++ b/core/src/pipe.rs
@@ -1,3 +1,4 @@
+use ribir_algo::Sc;
 use rxrust::{
   ops::box_it::BoxOp,
   prelude::{BoxIt, ObservableExt, ObservableItem},
@@ -6,35 +7,52 @@ use rxrust::{
 use std::{
   cell::{Cell, RefCell},
   convert::Infallible,
-  rc::Rc,
+  ops::{Deref, Range},
 };
 
 use crate::{
   builtin_widgets::{key::AnyKey, Void},
-  context::BuildCtx,
+  context::{AppCtx, BuildCtx},
   data_widget::attach_to_id,
-  prelude::{AnonymousData, DataWidget, Multi, MultiChild, RenderParent, SingleChild},
-  widget::{QueryOrder, Widget, WidgetBuilder, WidgetId},
+  prelude::{
+    AnonymousData, BoxedSingleParent, DataWidget, Multi, MultiChild, MultiParent, SingleChild,
+    SingleParent,
+  },
+  ticker::FrameMsg,
+  widget::{QueryOrder, Widget, WidgetBuilder, WidgetId, WidgetTree},
+  window::WindowId,
 };
 
 /// A value that can be subscribed its continuous change from the observable
 /// stream.
 pub struct Pipe<V> {
   value: V,
-  observable: BoxOp<'static, V, Infallible>,
+  observable: BoxOp<'static, (ModifyScope, V), Infallible>,
+}
+
+macro_rules! new_frame_sampler {
+  ($ctx: ident) => {
+    $ctx
+      .window()
+      .frame_tick_stream()
+      .filter(|f| matches!(f, FrameMsg::NewFrame(_)))
+  };
 }
 
 impl<V> Pipe<V> {
   #[inline]
-  pub fn new(init: V, observable: BoxOp<'static, V, Infallible>) -> Self {
+  pub fn new(init: V, observable: BoxOp<'static, (ModifyScope, V), Infallible>) -> Self {
     Self { value: init, observable }
   }
 
   /// map the inner observable stream to another observable that emit same type
   /// value.
-  pub fn stream_map<R>(self, f: impl FnOnce(BoxOp<'static, V, Infallible>) -> R) -> Pipe<V>
+  pub fn stream_map<R>(
+    self,
+    f: impl FnOnce(BoxOp<'static, (ModifyScope, V), Infallible>) -> R,
+  ) -> Pipe<V>
   where
-    R: BoxIt<BoxOp<'static, V, Infallible>>,
+    R: BoxIt<BoxOp<'static, (ModifyScope, V), Infallible>>,
   {
     let Self { value, observable } = self;
     let observable = f(observable).box_it();
@@ -51,14 +69,16 @@ impl<V> Pipe<V> {
     let Self { value, observable } = self;
     Pipe {
       value: f(value),
-      observable: observable.map(f).box_it(),
+      observable: observable.map(move |(scope, v)| (scope, f(v))).box_it(),
     }
   }
 
   /// Unzip the `Pipe` into its inner value and the changes stream of the
   /// value.
   #[inline]
-  pub fn unzip(self) -> (V, BoxOp<'static, V, Infallible>) { (self.value, self.observable) }
+  pub fn unzip(self) -> (V, BoxOp<'static, (ModifyScope, V), Infallible>) {
+    (self.value, self.observable)
+  }
 
   #[inline]
   pub fn value(&self) -> &V { &self.value }
@@ -67,79 +87,168 @@ impl<V> Pipe<V> {
   pub fn value_mut(&mut self) -> &mut V { &mut self.value }
 }
 
-impl<W: Into<Widget>> WidgetBuilder for Pipe<W> {
-  #[inline]
+impl<W: Into<Widget> + 'static> WidgetBuilder for Pipe<W> {
   fn build(self, ctx: &crate::context::BuildCtx) -> WidgetId {
     let (v, modifies) = self.unzip();
     let id = v.into().build(ctx);
-    let id_share = Rc::new(Cell::new(id));
+    let id_share = Sc::new(Cell::new(id));
+    let id_share2 = id_share.clone();
     let handle = ctx.handle();
-    let h = modifies
-      .subscribe(move |v| {
+    let wnd_id = ctx.window().id();
+    let unsub = modifies
+      // Collects all the subtrees need to be regenerated before executing the regeneration in the
+      // `subscribe` method. Because the `sampler` will delay the `subscribe` until a new frame
+      // start.
+      .filter(|(scope, _)| scope.contains(ModifyScope::FRAMEWORK))
+      .tap(move |_| {
+        if let Some(wnd) = AppCtx::get_window(wnd_id) {
+          wnd.mark_widgets_regenerating(id_share2.get(), None)
+        }
+      })
+      .sample(new_frame_sampler!(ctx))
+      .subscribe(move |(_, v)| {
         handle.with_ctx(|ctx| {
           let id = id_share.get();
+
+          // async clean the mark when all regenerating is done to avoid other pipe
+          // regenerate in the regenerating scope.
+          let wnd = ctx.window();
+          AppCtx::spawn_local(async move { wnd.remove_regenerating_mark(id) }).unwrap();
+
           let ctx = ctx.force_as_mut();
-          let new_id = v.into().build(ctx);
+          if !ctx.window().is_in_another_regenerating(id) {
+            let new_id = v.into().build(ctx);
 
-          update_key_status_single(id, new_id, ctx);
+            update_key_status_single(id, new_id, ctx);
 
-          ctx.insert_after(id, new_id);
-          ctx.dispose_subtree(id);
-          ctx.on_subtree_mounted(new_id);
-          id_share.set(new_id);
-          ctx.mark_dirty(new_id)
+            ctx.insert_after(id, new_id);
+            ctx.dispose_subtree(id);
+            ctx.on_subtree_mounted(new_id);
+            id_share.set(new_id);
+            ctx.mark_dirty(new_id)
+          }
         });
-      })
-      .unsubscribe_when_dropped();
-
-    let h = AnonymousData::new(Box::new(h));
-    attach_to_id(id, ctx.force_as_mut(), |d| Box::new(DataWidget::new(d, h)));
+      });
+    attach_unsubscribe_guard(id, ctx.window().id(), unsub);
 
     id
   }
 }
 
-impl<R> Pipe<R> {
-  pub(crate) fn into_only_parent(self, ctx: &mut BuildCtx) -> WidgetId
-  where
-    R: RenderParent,
-  {
-    let (v, modifies) = self.unzip();
-    let id = v.into_render_parent(ctx);
-    let id_share = Rc::new(Cell::new(id));
-    let handle = ctx.handle();
-    let h = modifies
-      .subscribe(move |v| {
-        handle.with_ctx(|ctx| {
-          let id = id_share.get();
-          let ctx = ctx.force_as_mut();
-          let new_id = v.into_render_parent(ctx);
+impl<W: Into<Widget> + 'static> WidgetBuilder for Pipe<Option<W>> {
+  fn build(self, ctx: &crate::context::BuildCtx) -> WidgetId {
+    self
+      .map(|w| w.map_or_else(|| Widget::from(Void), |w| w.into()))
+      .build(ctx)
+  }
+}
 
-          update_key_status_single(id, new_id, ctx);
-          let mut cursor = id.first_child(&ctx.tree.arena);
-          while let Some(c) = cursor {
-            cursor = c.next_sibling(&ctx.tree.arena);
-            ctx.append_child(new_id, c);
-          }
+impl<W: SingleParent + 'static> SingleParent for Pipe<W> {
+  fn append_child(self, child: WidgetId, ctx: &mut BuildCtx) -> WidgetId {
+    let (v, modifies) = self.unzip();
+    let p = v.append_child(child, ctx);
+    let rg = half_to_close_interval(p..child, &ctx.tree.borrow());
+    update_pipe_parent(rg, modifies, ctx, |new_p, old_p, ctx| {
+      let child = old_p.single_child(&ctx.tree.borrow().arena).unwrap();
+      new_p.append_child(child, ctx)
+    });
+    p
+  }
+}
 
-          ctx.insert_after(id, new_id);
-          ctx.dispose_subtree(id);
+impl<W: MultiParent + 'static> MultiParent for Pipe<W> {
+  fn append_children(self, children: Vec<WidgetId>, ctx: &mut BuildCtx) -> WidgetId {
+    // if children is empty, we can let the pipe parent as the whole subtree.
+    if children.is_empty() {
+      self.build(ctx)
+    } else {
+      let (v, modifies) = self.unzip();
+      let first_child = children[0];
+      let p = v.append_children(children, ctx);
+      let rg = half_to_close_interval(p..first_child, &ctx.tree.borrow());
+      update_pipe_parent(rg, modifies, ctx, |new_p, old_p, ctx| {
+        let children = old_p.children(&ctx.tree.borrow().arena).collect::<Vec<_>>();
+        new_p.append_children(children, ctx)
+      });
+      p
+    }
+  }
+}
 
-          ctx.on_widget_mounted(new_id);
-          id_share.set(new_id);
-          ctx.mark_dirty(new_id);
-        });
+impl<W: SingleParent + 'static> SingleParent for Pipe<Option<W>> {
+  fn append_child(self, child: WidgetId, ctx: &mut BuildCtx) -> WidgetId {
+    self
+      .map(|p| -> Box<dyn BoxedSingleParent> {
+        if let Some(p) = p {
+          Box::new(p)
+        } else {
+          Box::new(Void)
+        }
       })
-      .unsubscribe_when_dropped();
+      .append_child(child, ctx)
+  }
+}
 
-    let h = AnonymousData::new(Box::new(h));
-    attach_to_id(id, ctx.force_as_mut(), |d| Box::new(DataWidget::new(d, h)));
+fn half_to_close_interval(rg: Range<WidgetId>, tree: &WidgetTree) -> Range<WidgetId> {
+  rg.start..rg.end.parent(&tree.arena).unwrap()
+}
 
-    id
-  }
+fn update_pipe_parent<W: 'static>(
+  // The range of the pipe parent widget ids.
+  parent: Range<WidgetId>,
+  // transplant the children of the old parent to the new widget.
+  modifies: BoxOp<'static, (ModifyScope, W), Infallible>,
+  ctx: &mut BuildCtx,
+  transplant: impl Fn(W, WidgetId, &mut BuildCtx) -> WidgetId + 'static,
+) {
+  let id_share = Sc::new(RefCell::new(parent.clone()));
+  let id_share2 = id_share.clone();
+  let handle = ctx.handle();
+  let wnd_id = ctx.window().id();
+  let unsub = modifies
+    .filter(|(scope, _)| scope.contains(ModifyScope::FRAMEWORK))
+    .tap(move |_| {
+      if let Some(wnd) = AppCtx::get_window(wnd_id) {
+        let rg = id_share2.borrow().clone();
+        wnd.mark_widgets_regenerating(rg.start, Some(rg.end))
+      }
+    })
+    .sample(new_frame_sampler!(ctx))
+    .subscribe(move |(_, v)| {
+      handle.with_ctx(|ctx| {
+        let ctx = ctx.force_as_mut();
+        let rg = id_share.borrow().clone();
+
+        let wnd = ctx.window();
+        // async clean the mark when all regenerating is done to avoid other pipe
+        // regenerate in the regenerating scope.
+        AppCtx::spawn_local(async move { wnd.remove_regenerating_mark(rg.start) }).unwrap();
+
+        if !ctx.window().is_in_another_regenerating(rg.start) {
+          let first_child = rg.end.first_child(&ctx.tree.borrow().arena).unwrap();
+          let p = transplant(v, rg.end, ctx.force_as_mut());
+          let new_rg = half_to_close_interval(p..first_child, &ctx.tree.borrow());
+
+          update_key_status_single(rg.start, new_rg.start, ctx);
+
+          ctx.insert_after(rg.start, new_rg.start);
+          ctx.dispose_subtree(rg.start);
+          new_rg
+            .end
+            .ancestors(&ctx.tree.borrow().arena)
+            .take_while(|w| w != &new_rg.start)
+            .for_each(|p| ctx.on_widget_mounted(p));
+
+          ctx.mark_dirty(new_rg.start);
+          *id_share.borrow_mut() = new_rg;
+        }
+      });
+    });
+
+  attach_unsubscribe_guard(parent.start, ctx.window().id(), unsub);
 }
 
-impl<W> Pipe<Multi<W>> {
+impl<W: 'static> Pipe<Multi<W>> {
   pub(crate) fn build_multi(self, vec: &mut Vec<WidgetId>, ctx: &mut BuildCtx)
   where
     W: IntoIterator,
@@ -148,8 +257,7 @@ impl<W> Pipe<Multi<W>> {
     fn build_multi(
       v: Multi<impl IntoIterator<Item = impl Into<Widget>>>,
       ctx: &mut BuildCtx,
-      s_guard: impl Clone + 'static,
-    ) -> Box<[WidgetId]> {
+    ) -> Vec<WidgetId> {
       let mut ids = v
         .into_inner()
         .into_iter()
@@ -159,92 +267,676 @@ impl<W> Pipe<Multi<W>> {
       if ids.is_empty() {
         ids.push(Void.build(ctx));
       }
-      for id in &ids {
-        attach_to_id(*id, ctx, |d| {
-          let h = AnonymousData::new(Box::new(s_guard.clone()));
-          Box::new(DataWidget::new(d, h))
-        });
-      }
 
-      ids.into_boxed_slice()
+      ids
     }
 
-    let s_guard = Rc::new(RefCell::new(None));
     let (m, modifies) = self.unzip();
 
-    let ids = build_multi(m, ctx, s_guard.clone());
-    vec.extend(&*ids);
-
-    let ids_share = Rc::new(RefCell::new(ids));
+    let ids = build_multi(m, ctx);
+    let first_id = ids[0];
+    vec.extend(&ids);
 
+    let ids_share = Sc::new(RefCell::new(ids));
+    let id_share2 = ids_share.clone();
+    let wnd_id = ctx.window().id();
     let handle = ctx.handle();
-
-    let s_guard2 = s_guard.clone();
-    let guard = modifies
-      .subscribe(move |m| {
+    let unsub = modifies
+      .filter(|(scope, _)| scope.contains(ModifyScope::FRAMEWORK))
+      // Collects all the subtrees need to be regenerated before executing the regeneration in the
+      // `subscribe` method. Because the `sampler` will delay the `subscribe` until a new frame
+      // start.
+      .tap(move |_| {
+        if let Some(wnd) = AppCtx::get_window(wnd_id) {
+          for id in id_share2.borrow().iter() {
+            wnd.mark_widgets_regenerating(*id, None)
+          }
+        }
+      })
+      .sample(new_frame_sampler!(ctx))
+      .box_it()
+      .subscribe(move |(_, m)| {
         handle.with_ctx(|ctx| {
           let ctx = ctx.force_as_mut();
-          let old = ids_share.borrow();
-          let new = build_multi(m, ctx, s_guard.clone());
+          let mut old = ids_share.borrow_mut();
+          let removed_subtree = old.clone();
+
+          // async clean the mark when all regenerating is done to avoid other pipe
+          // regenerate in the regenerating scope.
+          let wnd = ctx.window();
+          AppCtx::spawn_local(async move {
+            for id in removed_subtree {
+              wnd.remove_regenerating_mark(id);
+            }
+          })
+          .unwrap();
+
+          if !ctx.window().is_in_another_regenerating(old[0]) {
+            let new = build_multi(m, ctx);
+
+            update_key_state_multi(old.iter().copied(), new.iter().copied(), ctx);
+
+            new.iter().for_each(|w| ctx.insert_after(old[0], *w));
+            old.iter().for_each(|id| ctx.dispose_subtree(*id));
+            new.iter().for_each(|w| {
+              ctx.on_subtree_mounted(*w);
+              ctx.mark_dirty(*w)
+            });
+            *old = new;
+          }
+        });
+      });
+    attach_unsubscribe_guard(first_id, ctx.window().id(), unsub);
+  }
+}
 
-          update_key_state_multi(&new, &old, ctx);
+fn attach_unsubscribe_guard(id: WidgetId, wnd: WindowId, unsub: impl Subscription + 'static) {
+  AppCtx::spawn_local(async move {
+    let Some(wnd) = AppCtx::get_window(wnd) else {
+      unsub.unsubscribe();
+      return;
+    };
+    let mut tree = wnd.widget_tree.borrow_mut();
+
+    if tree.root() != id {
+      let guard = unsub.unsubscribe_when_dropped();
+      // auto unsubscribe when the widget is not a root and its parent is None.
+      if let Some(p) = id.parent(&tree.arena) {
+        let guard = AnonymousData::new(Box::new(guard));
+        attach_to_id(p, &mut *tree, |d| Box::new(DataWidget::new(d, guard)))
+      }
+    }
+  })
+  .unwrap();
+}
 
-          new.iter().for_each(|w| ctx.insert_after(old[0], *w));
-          old.iter().for_each(|id| ctx.dispose_subtree(*id));
-          new.iter().for_each(|w| {
-            ctx.on_subtree_mounted(*w);
-            ctx.mark_dirty(*w)
+fn update_children_key_status(old: WidgetId, new: WidgetId, ctx: &BuildCtx) {
+  let tree = &ctx.tree.borrow().arena;
+
+  match (
+    old.first_child(tree),
+    old.last_child(tree),
+    new.first_child(tree),
+    new.last_child(tree),
+  ) {
+    // old or new children is empty.
+    (None, _, _, _) | (_, _, None, _) => {}
+    (Some(_), None, _, _) | (_, _, Some(_), None) => {
+      unreachable!("first child is some, but last child is none")
+    }
+    (Some(o_first), Some(o_last), Some(n_first), Some(n_last)) => {
+      match (o_first == o_last, n_first == n_last) {
+        (true, true) => update_key_status_single(o_first, n_first, ctx),
+        (true, false) => {
+          inspect_key(o_first, ctx, |old_key| {
+            let o_key = old_key.key();
+            new.children(tree).any(|n| {
+              inspect_key(n, ctx, |new_key| {
+                let same_key = o_key == new_key.key();
+                if same_key {
+                  update_key_states(old_key, o_first, new_key, n, ctx);
+                }
+                same_key
+              })
+              .unwrap_or(false)
+            });
           });
-        });
-      })
-      .unsubscribe_when_dropped();
-
-    s_guard2.borrow_mut().replace(guard);
+        }
+        (false, true) => {
+          inspect_key(n_first, ctx, |new_key| {
+            let n_key = new_key.key();
+            old.children(tree).any(|o| {
+              inspect_key(o, ctx, |old_key| {
+                let same_key = old_key.key() == n_key;
+                if same_key {
+                  update_key_states(old_key, o, new_key, n_first, ctx);
+                }
+                same_key
+              })
+              .unwrap_or(false)
+            })
+          });
+        }
+        (false, false) => update_key_state_multi(old.children(tree), new.children(tree), ctx),
+      }
+    }
   }
 }
 
-fn update_key_status_single(new: WidgetId, old: WidgetId, ctx: &BuildCtx) {
+fn update_key_status_single(old: WidgetId, new: WidgetId, ctx: &BuildCtx) {
   inspect_key(old, ctx, |old_key| {
     inspect_key(new, ctx, |new_key| {
       if old_key.key() == new_key.key() {
-        new_key.record_prev_key_widget(old_key);
-        old_key.record_next_key_widget(new_key);
+        update_key_states(old_key, old, new_key, new, ctx)
       }
     })
-  })
+  });
 }
 
-fn update_key_state_multi(old: &[WidgetId], new: &[WidgetId], ctx: &BuildCtx) {
+fn update_key_state_multi(
+  old: impl Iterator<Item = WidgetId>,
+  new: impl Iterator<Item = WidgetId>,
+  ctx: &BuildCtx,
+) {
   let mut old_key_list = ahash::HashMap::default();
-
   for o in old {
-    inspect_key(*o, ctx, |old_key: &dyn AnyKey| {
-      let key = old_key.key();
-      old_key_list.insert(key, *o);
+    inspect_key(o, ctx, |old_key: &dyn AnyKey| {
+      old_key_list.insert(old_key.key(), o);
     });
   }
 
-  for n in new {
-    inspect_key(*n, ctx, |new_key: &dyn AnyKey| {
-      let key = &new_key.key();
-      if let Some(o) = old_key_list.get(key) {
-        inspect_key(*o, ctx, |old_key: &dyn AnyKey| {
-          new_key.record_prev_key_widget(old_key);
-          old_key.record_next_key_widget(new_key);
-        });
-      }
-    });
+  if !old_key_list.is_empty() {
+    for n in new {
+      inspect_key(n, ctx, |new_key| {
+        if let Some(o) = old_key_list.get(&new_key.key()).copied() {
+          inspect_key(o, ctx, |old_key| {
+            update_key_states(old_key, o, new_key, n, ctx)
+          });
+        }
+      });
+    }
   }
 }
 
-fn inspect_key(id: WidgetId, ctx: &BuildCtx, mut cb: impl FnMut(&dyn AnyKey)) {
-  #[allow(clippy::borrowed_box)]
+fn inspect_key<R>(id: WidgetId, ctx: &BuildCtx, mut cb: impl FnMut(&dyn AnyKey) -> R) -> Option<R> {
   ctx
     .assert_get(id)
     .query_on_first_type::<Box<dyn AnyKey>, _>(QueryOrder::OutsideFirst, |key_widget| {
-      cb(&**key_widget)
-    });
+      cb(key_widget.deref())
+    })
+}
+
+fn update_key_states(
+  old_key: &dyn AnyKey,
+  old: WidgetId,
+  new_key: &dyn AnyKey,
+  new: WidgetId,
+  ctx: &BuildCtx,
+) {
+  new_key.record_prev_key_widget(old_key);
+  old_key.record_next_key_widget(new_key);
+  update_children_key_status(old, new, ctx)
 }
 
 impl<W: SingleChild> SingleChild for Pipe<W> {}
 impl<W: MultiChild> MultiChild for Pipe<W> {}
+
+#[cfg(test)]
+mod tests {
+  use std::{
+    cell::{Cell, Ref},
+    rc::Rc,
+  };
+
+  use crate::{
+    builtin_widgets::key::KeyChange, impl_query_self_only, prelude::*, reset_test_env,
+    test_helper::*, widget::TreeArena,
+  };
+
+  #[test]
+  fn pipe_widget_as_root() {
+    reset_test_env!();
+
+    let size = Stateful::new(Size::zero());
+    let c_size = size.clone_writer();
+    let w = fn_widget! {
+      let p = pipe! { MockBox { size: *$size }};
+      @$p { @Void {} }
+    };
+    let wnd = TestWindow::new(w);
+    let mut tree = wnd.widget_tree.borrow_mut();
+    tree.layout(Size::zero());
+    let ids = tree.root().descendants(&tree.arena).collect::<Vec<_>>();
+    assert_eq!(ids.len(), 2);
+    {
+      *c_size.write() = Size::new(1., 1.);
+    }
+    tree.layout(Size::zero());
+    let new_ids = tree.root().descendants(&tree.arena).collect::<Vec<_>>();
+    assert_eq!(new_ids.len(), 2);
+
+    assert_eq!(ids[1], new_ids[1]);
+  }
+
+  #[test]
+  fn expr_widget_with_declare_child() {
+    reset_test_env!();
+
+    let size = Stateful::new(Size::zero());
+    let c_size = size.clone_writer();
+    let w = fn_widget! {
+      @MockBox {
+        size: Size::zero(),
+        @ {
+          let p = pipe! { MockBox { size: *$size }};
+          @$p { @Void {} }
+        }
+      }
+    };
+    let wnd = TestWindow::new(w);
+    let mut tree = wnd.widget_tree.borrow_mut();
+    tree.layout(Size::zero());
+    let ids = tree.root().descendants(&tree.arena).collect::<Vec<_>>();
+    assert_eq!(ids.len(), 3);
+    {
+      *c_size.write() = Size::new(1., 1.);
+    }
+    tree.layout(Size::zero());
+    let new_ids = tree.root().descendants(&tree.arena).collect::<Vec<_>>();
+    assert_eq!(new_ids.len(), 3);
+
+    assert_eq!(ids[0], new_ids[0]);
+    assert_eq!(ids[2], new_ids[2]);
+  }
+
+  #[test]
+  fn pipe_widget_mounted_new() {
+    reset_test_env!();
+
+    let v = Stateful::new(vec![1, 2, 3]);
+    let new_cnt = Stateful::new(0);
+    let drop_cnt = Stateful::new(0);
+
+    let c_v = v.clone_writer();
+    let c_new_cnt = new_cnt.clone_reader();
+    let c_drop_cnt = drop_cnt.clone_reader();
+    let w = fn_widget! {
+      @MockMulti {
+        @ {
+          pipe!($v.clone()).map(move |v| {
+            let iter = v.into_iter().map(move |_| {
+              @MockBox{
+                size: Size::zero(),
+                on_mounted: move |_| *$new_cnt.write() += 1,
+                on_disposed: move |_| *$drop_cnt.write() += 1
+              }
+            });
+            Multi::new(iter)
+          })
+        }
+      }
+    };
+
+    let mut wnd = TestWindow::new(w);
+    wnd.on_wnd_resize_event(Size::zero());
+    wnd.draw_frame();
+    assert_eq!(*c_new_cnt.read(), 3);
+    assert_eq!(*c_drop_cnt.read(), 0);
+
+    c_v.write().push(4);
+    wnd.draw_frame();
+    assert_eq!(*c_new_cnt.read(), 7);
+    assert_eq!(*c_drop_cnt.read(), 3);
+
+    c_v.write().pop();
+    wnd.draw_frame();
+    assert_eq!(*c_new_cnt.read(), 10);
+    assert_eq!(*c_drop_cnt.read(), 7);
+  }
+
+  #[test]
+  fn pipe_widget_in_pipe() {
+    reset_test_env!();
+    let p_trigger = Stateful::new(false);
+    let c_trigger = Stateful::new(false);
+    let mnt_cnt = Stateful::new(0);
+    let c_p_trigger = p_trigger.clone_writer();
+    let c_c_trigger = c_trigger.clone_writer();
+    let mnt_cnt2 = mnt_cnt.clone_reader();
+
+    let w = fn_widget! {
+      pipe!(*$p_trigger).map(move |_| {
+        @MockBox {
+          size: Size::zero(),
+          on_mounted: move |_| *$mnt_cnt.write() +=1,
+          @{
+            pipe!(*$c_trigger).map(move |_| {
+              @MockBox {
+                size: Size::zero(),
+                on_mounted: move |_| *$mnt_cnt.write() +=1,
+              }
+            })
+          }
+        }
+      })
+    };
+
+    let mut wnd = TestWindow::new(w);
+    wnd.draw_frame();
+    assert_eq!(*mnt_cnt2.read(), 2);
+
+    // trigger the parent update
+    *c_p_trigger.write() = true;
+    wnd.run_frame_tasks();
+    // then trigger the child update.
+    *c_c_trigger.write() = true;
+
+    wnd.draw_frame();
+    assert_eq!(*mnt_cnt2.read(), 4);
+  }
+
+  #[test]
+  fn pipe_widgets_with_key() {
+    reset_test_env!();
+
+    let v = Stateful::new(vec![(1, '1'), (2, '2'), (3, '3')]);
+    let enter_list: Stateful<Vec<char>> = Stateful::new(vec![]);
+    let update_list: Stateful<Vec<char>> = Stateful::new(vec![]);
+    let leave_list: Stateful<Vec<char>> = Stateful::new(vec![]);
+    let key_change: Stateful<KeyChange<char>> = Stateful::new(KeyChange::default());
+
+    let c_v = v.clone_writer();
+    let c_enter_list = enter_list.clone_writer();
+    let c_update_list = update_list.clone_writer();
+    let c_leave_list = leave_list.clone_writer();
+    let c_key_change = key_change.clone_writer();
+    let w: Widget = fn_widget! {
+      @MockMulti {
+        @ {
+          pipe!($v.clone()).map(move |v| {
+            let iter = v.into_iter().map(move |(i, c)| {
+              let mut key = @KeyWidget { key: i, value: c };
+              @$key {
+                @MockBox {
+                  size: Size::zero(),
+                  on_mounted: move |_| {
+                    if $key.is_enter() {
+                      $c_enter_list.write().push($key.value);
+                    }
+
+                    if $key.is_changed() {
+                      $c_update_list.write().push($key.value);
+                      *$c_key_change.write() = $key.get_change();
+                    }
+                  },
+                  on_disposed: move |_| if $key.is_leave() {
+                    $c_leave_list.write().push($key.value);
+                  }
+                }
+              }
+            });
+            Multi::new(iter)
+          })
+        }
+      }
+    }
+    .into();
+
+    // 1. 3 item enter
+    let mut wnd = TestWindow::new(w);
+    wnd.draw_frame();
+    let expect_vec = vec!['1', '2', '3'];
+    assert_eq!((*enter_list.state_ref()).len(), 3);
+    assert!(
+      (*enter_list.state_ref())
+        .iter()
+        .all(|item| expect_vec.contains(item))
+    );
+    // clear enter list vec
+    (*enter_list.state_ref()).clear();
+
+    // 2. add 1 item
+    c_v.write().push((4, '4'));
+    wnd.on_wnd_resize_event(ZERO_SIZE);
+    wnd.draw_frame();
+
+    let expect_vec = vec!['4'];
+    assert_eq!((*enter_list.state_ref()).len(), 1);
+    assert!(
+      (*enter_list.state_ref())
+        .iter()
+        .all(|item| expect_vec.contains(item))
+    );
+    // clear enter list vec
+    (*enter_list.state_ref()).clear();
+
+    // 3. update the second item
+    c_v.write()[1].1 = 'b';
+    wnd.draw_frame();
+
+    let expect_vec = vec![];
+    assert_eq!((*enter_list.state_ref()).len(), 0);
+    assert!(
+      (*enter_list.state_ref())
+        .iter()
+        .all(|item| expect_vec.contains(item))
+    );
+
+    let expect_vec = vec!['b'];
+    assert_eq!((*update_list.state_ref()).len(), 1);
+    assert!(
+      (*update_list.state_ref())
+        .iter()
+        .all(|item| expect_vec.contains(item))
+    );
+    assert_eq!(*key_change.state_ref(), KeyChange(Some('2'), 'b'));
+    (*update_list.state_ref()).clear();
+
+    // 4. remove the second item
+    c_v.write().remove(1);
+    wnd.draw_frame();
+    let expect_vec = vec!['b'];
+    assert_eq!((*leave_list.state_ref()), expect_vec);
+    assert_eq!((*leave_list.state_ref()).len(), 1);
+    assert!(
+      (*leave_list.state_ref())
+        .iter()
+        .all(|item| expect_vec.contains(item))
+    );
+    (*leave_list.state_ref()).clear();
+
+    // 5. update the first item
+    c_v.write()[0].1 = 'a';
+    wnd.draw_frame();
+
+    assert_eq!((*enter_list.state_ref()).len(), 0);
+
+    let expect_vec = vec!['a'];
+    assert_eq!((*update_list.state_ref()).len(), 1);
+    assert!(
+      (*update_list.state_ref())
+        .iter()
+        .all(|item| expect_vec.contains(item))
+    );
+    assert_eq!(*key_change.state_ref(), KeyChange(Some('1'), 'a'));
+    (*update_list.state_ref()).clear();
+  }
+
+  #[test]
+  fn delay_drop_widgets() {
+    reset_test_env!();
+
+    #[derive(Default, Clone)]
+    struct Task {
+      mounted: u32,
+      pin: bool,
+      paint_cnt: Rc<Cell<u32>>,
+      layout_cnt: Rc<Cell<u32>>,
+      trigger: u32,
+      wid: Option<WidgetId>,
+    }
+
+    fn build(item: Writer<Task>) -> Widget {
+      let item = item.into_inner();
+      widget! {
+        states { task: item.clone_stateful() }
+        TaskWidget {
+          delay_drop_until: !task.pin,
+          layout_cnt: task.layout_cnt.clone(),
+          paint_cnt: task.paint_cnt.clone(),
+          trigger: task.trigger,
+          on_mounted: move |ctx| {
+            task.mounted += 1;
+            task.wid = Some(ctx.id);
+          },
+          on_disposed: move |ctx| {
+            let wid = task.wid.take();
+            assert_eq!(wid, Some(ctx.id));
+          }
+        }
+      }
+      .into()
+    }
+
+    #[derive(Declare)]
+    struct TaskWidget {
+      trigger: u32,
+      paint_cnt: Rc<Cell<u32>>,
+      layout_cnt: Rc<Cell<u32>>,
+    }
+
+    impl Render for TaskWidget {
+      fn perform_layout(&self, _: BoxClamp, _: &mut LayoutCtx) -> Size {
+        self.layout_cnt.set(self.layout_cnt.get() + 1);
+        Size::new(1., 1.)
+      }
+
+      fn paint(&self, _: &mut PaintingCtx) { self.paint_cnt.set(self.paint_cnt.get() + 1); }
+    }
+
+    impl_query_self_only!(TaskWidget);
+
+    fn child_count(wnd: &Window) -> usize {
+      let tree = wnd.widget_tree.borrow();
+      let root = tree.root();
+      root.children(&tree.arena).count()
+    }
+
+    let tasks = (0..3)
+      .map(|_| Stateful::new(Task::default()))
+      .collect::<Vec<_>>();
+    let tasks = Stateful::new(tasks);
+    let c_tasks = tasks.clone_reader();
+    let w = fn_widget! {
+      @MockMulti {
+        @ { pipe!{
+          let iter = $c_tasks.iter().map(|t| build(t.clone_writer())).collect::<Vec<_>>();
+          Multi::new(iter)
+        }}
+      }
+    };
+
+    let mut wnd = TestWindow::new(w);
+    let mut removed = vec![];
+
+    wnd.draw_frame();
+    assert_eq!(child_count(&wnd), 3);
+
+    // the first pined widget will still paint it
+    tasks.state_ref()[0].state_ref().pin = true;
+    removed.push(tasks.state_ref().remove(0));
+    wnd.draw_frame();
+    assert_eq!(child_count(&wnd), 2);
+    assert_eq!(removed[0].state_ref().paint_cnt.get(), 2);
+
+    // the remove pined widget will paint and no layout when no changed
+    let first_layout_cnt = removed[0].state_ref().layout_cnt.get();
+    tasks.state_ref().get(0).unwrap().state_ref().pin = true;
+    removed.push(tasks.state_ref().remove(0));
+    wnd.draw_frame();
+    assert_eq!(child_count(&wnd), 1);
+    assert_eq!(removed[0].state_ref().paint_cnt.get(), 3);
+    assert_eq!(removed[1].state_ref().paint_cnt.get(), 3);
+    assert_eq!(removed[0].state_ref().layout_cnt.get(), first_layout_cnt);
+
+    // the remove pined widget only mark self dirty
+    let first_layout_cnt = removed[0].state_ref().layout_cnt.get();
+    let secord_layout_cnt = removed[1].state_ref().layout_cnt.get();
+    let host_layout_cnt = tasks.state_ref()[0].state_ref().layout_cnt.get();
+    removed[0].state_ref().trigger += 1;
+    wnd.draw_frame();
+    assert_eq!(
+      removed[0].state_ref().layout_cnt.get(),
+      first_layout_cnt + 1
+    );
+    assert_eq!(removed[0].state_ref().paint_cnt.get(), 4);
+    assert_eq!(removed[1].state_ref().layout_cnt.get(), secord_layout_cnt);
+    assert_eq!(
+      tasks.state_ref()[0].state_ref().layout_cnt.get(),
+      host_layout_cnt
+    );
+
+    // when unpined, it will no paint anymore
+    removed[0].state_ref().pin = false;
+    wnd.draw_frame();
+    assert_eq!(removed[0].state_ref().paint_cnt.get(), 4);
+    assert_eq!(removed[1].state_ref().paint_cnt.get(), 5);
+
+    // after removed, it will no paint and layout anymore
+    let first_layout_cnt = removed[0].state_ref().layout_cnt.get();
+    removed[0].state_ref().trigger += 1;
+    wnd.draw_frame();
+    assert_eq!(removed[0].state_ref().paint_cnt.get(), 4);
+    assert_eq!(removed[1].state_ref().paint_cnt.get(), 5);
+    assert_eq!(removed[0].state_ref().layout_cnt.get(), first_layout_cnt);
+
+    // other pined widget is work fine.
+    let first_layout_cnt = removed[0].state_ref().layout_cnt.get();
+    let second_layout_cnt = removed[1].state_ref().layout_cnt.get();
+    removed[1].state_ref().trigger += 1;
+    wnd.draw_frame();
+    assert_eq!(removed[0].state_ref().paint_cnt.get(), 4);
+    assert_eq!(removed[1].state_ref().paint_cnt.get(), 6);
+    assert_eq!(removed[0].state_ref().layout_cnt.get(), first_layout_cnt);
+    assert_eq!(
+      removed[1].state_ref().layout_cnt.get(),
+      second_layout_cnt + 1,
+    );
+  }
+
+  #[test]
+  fn remove_delay_drop_widgets() {
+    reset_test_env!();
+
+    let child = Stateful::new(Some(()));
+    let child_destroy_until = Stateful::new(false);
+    let grandson = Stateful::new(Some(()));
+    let grandson_destroy_until = Stateful::new(false);
+    let c_child = child.clone_writer();
+    let c_child_destroy_until = child_destroy_until.clone_writer();
+
+    let w = fn_widget! {
+      @MockMulti {
+        @ { pipe!(*$child).map(move |_| {
+          @MockMulti {
+            delay_drop_until: pipe!(*$child_destroy_until),
+            @ { pipe!(*$grandson).map(move |_| {
+              @MockBox {
+                delay_drop_until: pipe!(*$grandson_destroy_until),
+                size: Size::zero(),
+              }
+            })}
+          }
+        })}
+      }
+    };
+    let mut wnd = TestWindow::new(w);
+    wnd.draw_frame();
+
+    fn tree_arena(wnd: &TestWindow) -> Ref<TreeArena> {
+      let tree = wnd.widget_tree.borrow();
+      Ref::map(tree, |t| &t.arena)
+    }
+
+    let grandson_id = {
+      let arena = tree_arena(&wnd);
+      let root = wnd.widget_tree.borrow().root();
+      root
+        .first_child(&arena)
+        .unwrap()
+        .first_child(&arena)
+        .unwrap()
+    };
+
+    wnd.draw_frame();
+    assert!(!grandson_id.is_dropped(&tree_arena(&wnd)));
+
+    c_child.write().take();
+    wnd.draw_frame();
+    assert!(!grandson_id.is_dropped(&tree_arena(&wnd)));
+
+    *c_child_destroy_until.write() = true;
+    wnd.draw_frame();
+    assert!(grandson_id.is_dropped(&tree_arena(&wnd)));
+  }
+}
diff --git a/core/src/state.rs b/core/src/state.rs
index aab5fd52a..b52da0e48 100644
--- a/core/src/state.rs
+++ b/core/src/state.rs
@@ -1,58 +1,191 @@
-mod readonly;
+mod map_state;
+mod splitted_state;
 mod stateful;
-use std::{convert::Infallible, mem::MaybeUninit, rc::Rc};
 
-pub use readonly::*;
-use rxrust::{ops::box_it::BoxOp, prelude::ObservableItem};
+use std::{
+  cell::UnsafeCell,
+  convert::Infallible,
+  mem::MaybeUninit,
+  ops::{Deref, DerefMut},
+};
+
+pub use map_state::*;
+use rxrust::{ops::box_it::BoxOp, subject::Subject};
+pub use splitted_state::*;
 pub use stateful::*;
 
 use crate::{
   context::BuildCtx,
-  dynamic_widget::DynWidget,
-  prelude::{BoxMultiParent, BoxedSingleParent, MultiChild, SingleChild},
-  widget::{Compose, Render, RenderFul, WidgetBuilder, WidgetId},
+  prelude::{MultiChild, SingleChild},
+  widget::{Compose, Render, WidgetBuilder, WidgetId},
 };
 
+/// The `StateReader` trait allows for reading, clone and map the state.
+pub trait StateReader: Sized {
+  /// The value type of this state.
+  type Value;
+  /// The origin state type that this state map or split from . Otherwise
+  /// return itself.
+  type OriginReader: StateReader;
+  type Reader: StateReader<Value = Self::Value>;
+  /// The reference type that can read the value of the state.
+  type Ref<'a>: Deref<Target = Self::Value>
+  where
+    Self: 'a;
+
+  /// Return a reference of this state.
+  fn read(&'_ self) -> Self::Ref<'_>;
+  /// get a clone of this state that only can read.
+  fn clone_reader(&self) -> Self::Reader;
+  /// Maps an reader to another by applying a function to a contained
+  /// value. The return reader and the origin reader are the same reader. So
+  /// when one of them is modified, they will both be notified.
+  fn map_reader<F, Target>(&self, f: F) -> MapReader<Target, Self::Reader, F>
+  where
+    F: FnOnce(&Self::Value) -> &Target + Copy,
+  {
+    MapReader::new(self.clone_reader(), f)
+  }
+  /// Return the origin reader that this state map or split from . Otherwise
+  /// return itself.
+  fn origin_reader(&self) -> &Self::OriginReader;
+  /// Return a modifies `Rx` stream of the state, user can subscribe it to
+  /// response the state changes.
+  fn modifies(&self) -> BoxOp<'static, ModifyScope, Infallible>;
+  fn raw_modifies(&self) -> Subject<'static, ModifyScope, Infallible>;
+}
+
+pub trait StateWriter: StateReader {
+  type Writer: StateWriter<Value = Self::Value>;
+  type OriginWriter: StateWriter;
+  type RefWrite<'a>: RefWrite<Target = Self::Value>
+  where
+    Self: 'a;
+
+  /// Return a write reference of this state.
+  fn write(&'_ self) -> Self::RefWrite<'_>;
+  /// Return a silent write reference which notifies will be ignored by the
+  /// framework.
+  fn silent(&'_ self) -> Self::RefWrite<'_>;
+  /// Convert this state reference to a shallow reference. Modify across this
+  /// reference will notify framework only. That means the modifies on shallow
+  /// reference should only effect framework but not effect on data. eg.
+  /// temporary to modify the state and then modifies it back to trigger the
+  /// view update. Use it only if you know how a shallow reference works.
+  fn shallow(&'_ self) -> Self::RefWrite<'_>;
+  /// Clone this state writer.
+  fn clone_writer(&self) -> Self::Writer;
+  /// Return the origin writer that this state map or split from.
+  fn origin_writer(&self) -> &Self::OriginWriter;
+  /// Return a new writer by applying a function to the contained value.
+  ///
+  /// This writer share the same state with the origin writer. But has it's own
+  /// notifier. When modifies across the return writer, the downstream
+  /// subscribed on the origin state will not be notified. But when modifies
+  /// across the origin writer, the downstream subscribed on the return writer
+  /// will be notified.
+  ///
+  /// If you want split a new writer that has same behavior with the origin
+  /// writer, you can use `map_reader(..).into_writer(..)`.
+  fn split_writer<Target, R, W>(
+    &self,
+    read_map: R,
+    writer_map: W,
+  ) -> SplittedWriter<Target, Self::Writer, R, W>
+  where
+    R: FnOnce(&Self::Value) -> &Target + Copy,
+    W: FnOnce(&mut Self::Value) -> &mut Target + Copy,
+  {
+    SplittedWriter::new(self.clone_writer(), read_map, writer_map)
+  }
+
+  fn map_writer<Target, R, W>(
+    &self,
+    read_map: R,
+    writer_map: W,
+  ) -> MapWriter<Target, Self::Writer, R, W>
+  where
+    R: FnOnce(&Self::Value) -> &Target + Copy,
+    W: FnOnce(&mut Self::Value) -> &mut Target + Copy,
+  {
+    MapWriter::new(self.clone_writer(), read_map, writer_map)
+  }
+}
+
+pub trait RefWrite: DerefMut {
+  /// Forget all modifies of this reference. So all the modifies occurred on
+  /// this reference before this call will not be notified. Return true if there
+  /// is any modifies on this reference.
+  fn forget_modifies(&mut self) -> bool;
+}
+
 /// Enum to store both stateless and stateful object.
-pub enum State<W> {
-  Stateless(W),
+pub struct State<W>(pub(crate) UnsafeCell<InnerState<W>>);
+
+pub(crate) enum InnerState<W> {
+  Data(StateData<W>),
   Stateful(Stateful<W>),
 }
 
-pub enum StateRef<'a, W> {
-  Stateful(StatefulRef<'a, W>),
-  Stateless(&'a mut W),
-}
+impl<T> StateReader for State<T> {
+  type Value = T;
+  type OriginReader = Self;
+  type Reader = Reader<T>;
+  type Ref<'a> = ReadRef<'a,T>
+  where
+    Self: 'a;
 
-impl<W: SingleChild> SingleChild for State<W> {}
-impl<W: MultiChild> MultiChild for State<W> {}
+  fn read(&'_ self) -> Self::Ref<'_> {
+    match self.inner_ref() {
+      InnerState::Data(w) => w.read(),
+      InnerState::Stateful(w) => w.read(),
+    }
+  }
+
+  fn clone_reader(&self) -> Self::Reader { self.as_stateful().clone_reader() }
 
-impl<W: SingleChild + Render + 'static> BoxedSingleParent for State<W> {
-  fn into_parent(self: Box<Self>, ctx: &mut BuildCtx) -> WidgetId {
-    let r: Box<dyn Render> = match *self {
-      State::Stateless(w) => Box::new(w),
-      State::Stateful(w) => Box::new(RenderFul(w)),
-    };
-    ctx.alloc_widget(r)
+  #[inline]
+  fn origin_reader(&self) -> &Self::OriginReader { self }
+
+  fn modifies(&self) -> BoxOp<'static, ModifyScope, Infallible> { self.as_stateful().modifies() }
+
+  fn raw_modifies(&self) -> Subject<'static, ModifyScope, Infallible> {
+    self.as_stateful().raw_modifies()
   }
 }
 
-impl<W: MultiChild + Render + 'static> BoxMultiParent for State<W> {
-  fn into_parent(self: Box<Self>, ctx: &mut BuildCtx) -> WidgetId {
-    let r: Box<dyn Render> = match *self {
-      State::Stateless(w) => Box::new(w),
-      State::Stateful(w) => Box::new(RenderFul(w)),
-    };
-    ctx.alloc_widget(r)
-  }
+impl<T> StateWriter for State<T> {
+  type Writer = Writer<T>;
+  type OriginWriter = Self;
+  type RefWrite<'a> = WriteRef<'a,T>
+  where
+    Self: 'a;
+
+  #[inline]
+  fn write(&'_ self) -> Self::RefWrite<'_> { self.as_stateful().write() }
+
+  #[inline]
+  fn silent(&'_ self) -> Self::RefWrite<'_> { self.as_stateful().silent() }
+
+  #[inline]
+  fn shallow(&'_ self) -> Self::RefWrite<'_> { self.as_stateful().shallow() }
+
+  #[inline]
+  fn clone_writer(&self) -> Self::Writer { self.as_stateful().clone_writer() }
+
+  #[inline]
+  fn origin_writer(&self) -> &Self::OriginWriter { self }
 }
 
+impl<W: SingleChild> SingleChild for State<W> {}
+impl<W: MultiChild> MultiChild for State<W> {}
+
 impl<W: Render + 'static> From<State<W>> for Box<dyn Render> {
   #[inline]
   fn from(s: State<W>) -> Self {
-    match s {
-      State::Stateless(w) => w.into(),
-      State::Stateful(w) => w.into(),
+    match s.0.into_inner() {
+      InnerState::Data(w) => w.into_inner().into(),
+      InnerState::Stateful(w) => w.into(),
     }
   }
 }
@@ -63,59 +196,58 @@ impl<C: Compose> WidgetBuilder for State<C> {
 }
 
 impl<W> State<W> {
-  pub fn into_writable(self) -> Stateful<W> {
-    match self {
-      State::Stateless(w) => Stateful::new(w),
-      State::Stateful(w) => w,
-    }
+  pub fn stateful(stateful: Stateful<W>) -> Self {
+    State(UnsafeCell::new(InnerState::Stateful(stateful)))
   }
 
-  pub fn into_readonly(self) -> Readonly<W> {
-    match self {
-      State::Stateless(w) => Readonly::Stateless(Rc::new(w)),
-      State::Stateful(w) => match w.try_into_inner() {
-        Ok(w) => Readonly::Stateless(Rc::new(w)),
-        Err(s) => Readonly::Stateful(s),
-      },
+  pub fn value(value: W) -> Self { State(UnsafeCell::new(InnerState::Data(StateData::new(value)))) }
+
+  /// Unwrap the state and return the inner value.
+  ///
+  /// # Panics
+  /// panic if the state is stateful or already attached data.
+  pub fn into_value(self) -> W {
+    match self.0.into_inner() {
+      InnerState::Data(w) => w.into_inner(),
+      InnerState::Stateful(w) => w
+        .try_into_inner()
+        .unwrap_or_else(|_| panic!("can't convert stateful to value")),
     }
   }
 
-  pub fn clone_stateful(&mut self) -> Stateful<W> { self.to_stateful().clone() }
+  pub fn into_writable(self) -> Stateful<W> { self.as_stateful().clone_stateful() }
 
-  pub fn modifies(&mut self) -> BoxOp<'static, (), Infallible> { self.to_stateful().modifies() }
+  pub fn clone_stateful(&mut self) -> Stateful<W> { self.as_stateful().clone_stateful() }
 
-  pub fn clone(&mut self) -> State<W> {
-    let stateful = self.to_stateful().clone();
-    State::Stateful(stateful)
-  }
+  pub fn as_stateful(&self) -> &Stateful<W> {
+    match self.inner_ref() {
+      InnerState::Data(w) => {
+        w.assert_is_not_used();
+
+        let mut uninit: MaybeUninit<_> = MaybeUninit::uninit();
+        // Safety: we already check there is no other reference to the state data.
+        unsafe {
+          std::ptr::copy(w, uninit.as_mut_ptr(), 1);
+          let stateful = InnerState::Stateful(Stateful::from_state_data(uninit.assume_init()));
+          let copy = std::mem::replace(&mut *self.0.get(), stateful);
+          // this is a copy of the inner data so we need forget it.
+          std::mem::forget(copy);
+        };
 
-  pub fn stateful_ref(&mut self) -> StatefulRef<W> { self.to_stateful().state_ref() }
-
-  pub fn to_stateful(&mut self) -> &mut Stateful<W> {
-    match self {
-      State::Stateless(w) => {
-        // convert the stateless value to stateful first.
-        let uninit: MaybeUninit<_> = MaybeUninit::zeroed();
-        let v = std::mem::replace(w, unsafe { uninit.assume_init() });
-        let stateful = State::Stateful(Stateful::new(v));
-        let uninit = std::mem::replace(self, stateful);
-        // the tmp value not init, so we need forget it.
-        std::mem::forget(uninit);
-
-        match self {
-          State::Stateful(w) => w,
+        match self.inner_ref() {
+          InnerState::Stateful(w) => w,
           _ => unreachable!(),
         }
       }
-      State::Stateful(w) => w,
+      InnerState::Stateful(w) => w,
     }
   }
 
-  pub fn state_ref(&mut self) -> StateRef<W> {
-    match self {
-      State::Stateless(w) => StateRef::Stateless(w),
-      State::Stateful(w) => StateRef::Stateful(w.state_ref()),
-    }
+  fn inner_ref(&self) -> &InnerState<W> {
+    // Safety: we only use this method to get the inner state, and no way to get the
+    // mutable reference of the inner state except the `as_stateful` method and the
+    // `as_stateful` will check the inner borrow state.
+    unsafe { &*self.0.get() }
   }
 }
 
@@ -125,47 +257,12 @@ pub(crate) trait StateFrom<V> {
 
 impl<W> StateFrom<W> for State<W> {
   #[inline]
-  fn state_from(value: W) -> State<W> { State::Stateless(value) }
+  fn state_from(value: W) -> State<W> { State::value(value) }
 }
 
 impl<W> StateFrom<Stateful<W>> for State<W> {
   #[inline]
-  fn state_from(value: Stateful<W>) -> State<W> { State::Stateful(value) }
-}
-
-impl<W: 'static> StateFrom<Stateful<DynWidget<W>>> for State<W> {
-  #[inline]
-  fn state_from(value: Stateful<DynWidget<W>>) -> State<W> {
-    let c_value = value.clone();
-    let v = value.silent_ref().dyns.take().unwrap();
-    let v = Stateful::new(v);
-    let c_v = v.clone();
-    value.modifies().subscribe(move |_| {
-      if c_value.silent_ref().dyns.is_some() {
-        let mut c_value = c_value.silent_ref();
-        *c_v.state_ref() = c_value.dyns.take().unwrap();
-
-        // In this widget, we subscribed the `child` modifies, then spread it.
-        // When we spread it, we modifies it, a circular occur. So we forget
-        // the modify of take its children to break the circular.
-        //
-        // In other side, `child` is a stateful dynamic widget and use as
-        // child here, and all its content all a black box, so others
-        // should not depends on it.
-        c_value.forget_modifies();
-      }
-    });
-    State::Stateful(v)
-  }
-}
-
-impl<'a, T> StateRef<'a, T> {
-  pub fn forget_modifies(&self) {
-    match self {
-      StateRef::Stateless(_) => {}
-      StateRef::Stateful(w) => w.forget_modifies(),
-    }
-  }
+  fn state_from(value: Stateful<W>) -> State<W> { State::stateful(value) }
 }
 
 impl<W, T> From<T> for State<W>
@@ -175,32 +272,17 @@ where
   fn from(value: T) -> Self { StateFrom::state_from(value) }
 }
 
-impl<'a, W> std::ops::Deref for StateRef<'a, W> {
-  type Target = W;
-
-  fn deref(&self) -> &Self::Target {
-    match self {
-      StateRef::Stateful(s) => s.deref(),
-      StateRef::Stateless(r) => r,
-    }
-  }
-}
-
-impl<'a, W> std::ops::DerefMut for StateRef<'a, W> {
-  fn deref_mut(&mut self) -> &mut Self::Target {
-    match self {
-      StateRef::Stateful(s) => s.deref_mut(),
-      StateRef::Stateless(r) => r,
-    }
-  }
-}
-
 #[cfg(test)]
 mod tests {
+  use std::cell::Cell;
+
   use super::*;
+  use crate::{context::AppCtx, prelude::*, reset_test_env, timer::Timer};
 
   #[test]
   fn fix_dyn_widget_to_state_circular_mut_borrow_panic() {
+    let _guard = unsafe { AppCtx::new_lock_scope() };
+
     let dyn_widget = Stateful::new(DynWidget { dyns: Some(1) });
     let c_dyns = dyn_widget.clone();
     let _: State<i32> = dyn_widget.into();
@@ -208,4 +290,61 @@ mod tests {
       c_dyns.state_ref().dyns = Some(2);
     }
   }
+
+  struct Origin {
+    a: i32,
+    b: i32,
+  }
+
+  #[test]
+  fn path_state_router_test() {
+    reset_test_env!();
+
+    let mut origin = State::Stateless(Origin { a: 0, b: 0 });
+    let mut a = partial_state!($origin.a);
+    let mut b = route_state!($origin.b);
+
+    let track_origin = Rc::new(Cell::new(0));
+    let track_a = Rc::new(Cell::new(0));
+    let track_b = Rc::new(Cell::new(0));
+
+    let c_origin = track_origin.clone();
+    origin.modifies().subscribe(move |_| {
+      c_origin.set(c_origin.get() + 1);
+    });
+
+    let c_a = track_a.clone();
+    a.modifies().subscribe(move |_| {
+      c_a.set(c_a.get() + 1);
+    });
+
+    let c_b = track_b.clone();
+    b.modifies().subscribe(move |_| {
+      c_b.set(c_b.get() + 1);
+    });
+
+    origin.state_ref().a = 1;
+    Timer::wake_timeout_futures();
+    AppCtx::run_until_stalled();
+
+    assert_eq!(track_origin.get(), 1);
+    assert_eq!(track_a.get(), 1);
+    assert_eq!(track_b.get(), 1);
+
+    *a.state_ref() = 1;
+    Timer::wake_timeout_futures();
+    AppCtx::run_until_stalled();
+
+    assert_eq!(track_origin.get(), 1);
+    assert_eq!(track_a.get(), 2);
+    assert_eq!(track_b.get(), 1);
+
+    *b.state_ref() = 1;
+    Timer::wake_timeout_futures();
+    AppCtx::run_until_stalled();
+
+    assert_eq!(track_origin.get(), 2);
+    assert_eq!(track_a.get(), 3);
+    assert_eq!(track_b.get(), 2);
+  }
 }
diff --git a/core/src/state/map_state.rs b/core/src/state/map_state.rs
new file mode 100644
index 000000000..ee9100fe2
--- /dev/null
+++ b/core/src/state/map_state.rs
@@ -0,0 +1,259 @@
+use super::{ModifyScope, RefWrite, StateReader, StateWriter};
+use rxrust::{ops::box_it::BoxOp, subject::Subject};
+use std::{
+  convert::Infallible,
+  ops::{Deref, DerefMut},
+};
+
+/// A state reader that map a reader to another by applying a function on the
+/// value. This reader is the same reader with the origin reader, It's also have
+/// the same modifier with the origin state.
+// Keep the `V` as the first generic, so the user know the actual value type
+// when ide hints.
+pub struct MapReader<V, R: StateReader, F: FnOnce(&R::Value) -> &V + Copy> {
+  origin_reader: R,
+  map_fn: F,
+}
+
+pub struct MapWriter<
+  V,
+  W: StateWriter,
+  RM: FnOnce(&W::Value) -> &V + Copy,
+  WM: FnOnce(&mut W::Value) -> &mut V + Copy,
+> {
+  origin_writer: W,
+  map_reader: RM,
+  map_writer: WM,
+}
+
+/// The read reference of `MapReader`.
+pub struct MapReadRef<V, O: Deref, F: FnOnce(&O::Target) -> &V + Copy> {
+  origin_ref: O,
+  map_fn: F,
+}
+
+pub struct MapWriteRef<V, O, R, W>
+where
+  O: DerefMut,
+  R: FnOnce(&O::Target) -> &V + Copy,
+  W: FnOnce(&mut O::Target) -> &mut V + Copy,
+{
+  origin_ref: O,
+  map_read: R,
+  map_write: W,
+}
+
+impl<V, R, F> MapReader<V, R, F>
+where
+  R: StateReader,
+  F: FnOnce(&R::Value) -> &V + Copy,
+{
+  #[inline]
+  pub fn new(origin_state: R, map_fn: F) -> Self { Self { origin_reader: origin_state, map_fn } }
+}
+
+impl<V, W, RM> MapReader<V, W, RM>
+where
+  W: StateWriter,
+  RM: FnOnce(&W::Value) -> &V + Copy,
+{
+  /// Convert a `MapRender` to a `MapWriter` by add a write map function.
+  #[inline]
+  pub fn into_writer<WM: FnOnce(&mut W::Value) -> &mut V + Copy>(
+    self,
+    map_fn: WM,
+  ) -> MapWriter<V, W, RM, WM> {
+    MapWriter {
+      map_reader: self.map_fn,
+      map_writer: map_fn,
+      origin_writer: self.origin_reader,
+    }
+  }
+}
+
+impl<V, W, RM, WM> MapWriter<V, W, RM, WM>
+where
+  W: StateWriter,
+  RM: FnOnce(&W::Value) -> &V + Copy,
+  WM: FnOnce(&mut W::Value) -> &mut V + Copy,
+{
+  #[inline]
+  pub fn new(origin_state: W, map_reader: RM, map_writer: WM) -> Self {
+    Self {
+      origin_writer: origin_state,
+      map_reader,
+      map_writer,
+    }
+  }
+}
+
+impl<V, O: Deref, F: FnOnce(&O::Target) -> &V + Copy> MapReadRef<V, O, F> {
+  #[inline]
+  pub fn new(origin_ref: O, map_fn: F) -> Self { MapReadRef { origin_ref, map_fn } }
+}
+
+impl<V, R, M> StateReader for MapReader<V, R, M>
+where
+  R: StateReader,
+  M: FnOnce(&R::Value) -> &V + Copy,
+{
+  type Value = V;
+  type OriginReader = R;
+  type Reader = MapReader<V, R::Reader, M>;
+  type Ref<'a> = MapReadRef<V, R::Ref<'a>, M> where Self:'a;
+
+  #[inline]
+  fn read(&'_ self) -> Self::Ref<'_> {
+    MapReadRef {
+      origin_ref: self.origin_reader.read(),
+      map_fn: self.map_fn,
+    }
+  }
+
+  #[inline]
+  fn clone_reader(&self) -> Self::Reader {
+    let origin_state = self.origin_reader.clone_reader();
+    MapReader {
+      origin_reader: origin_state,
+      map_fn: self.map_fn,
+    }
+  }
+
+  #[inline]
+  fn origin_reader(&self) -> &Self::OriginReader { &self.origin_reader }
+  #[inline]
+  fn modifies(&self) -> BoxOp<'static, ModifyScope, Infallible> { self.origin_reader.modifies() }
+  #[inline]
+  fn raw_modifies(&self) -> Subject<'static, ModifyScope, Infallible> {
+    self.origin_reader.raw_modifies()
+  }
+}
+
+impl<V, W, RM, WM> StateReader for MapWriter<V, W, RM, WM>
+where
+  W: StateWriter,
+  RM: FnOnce(&W::Value) -> &V + Copy,
+  WM: FnOnce(&mut W::Value) -> &mut V + Copy,
+{
+  type Value = V;
+  type OriginReader = W;
+  type Reader = MapReader<V, W::Reader, RM>;
+  type Ref<'a> = MapReadRef<V, W::Ref<'a>, RM> where Self:'a;
+
+  #[inline]
+  fn read(&'_ self) -> Self::Ref<'_> {
+    MapReadRef {
+      origin_ref: self.origin_writer.read(),
+      map_fn: self.map_reader,
+    }
+  }
+
+  #[inline]
+  fn clone_reader(&self) -> Self::Reader {
+    MapReader {
+      origin_reader: self.origin_writer.clone_reader(),
+      map_fn: self.map_reader,
+    }
+  }
+
+  #[inline]
+  fn origin_reader(&self) -> &Self::OriginReader { &self.origin_writer }
+
+  #[inline]
+  fn modifies(&self) -> BoxOp<'static, ModifyScope, Infallible> { self.origin_writer.modifies() }
+
+  #[inline]
+  fn raw_modifies(&self) -> Subject<'static, ModifyScope, Infallible> {
+    self.origin_writer.raw_modifies()
+  }
+}
+
+impl<V, W, RM, WM> StateWriter for MapWriter<V, W, RM, WM>
+where
+  W: StateWriter,
+  RM: FnOnce(&W::Value) -> &V + Copy,
+  WM: FnOnce(&mut W::Value) -> &mut V + Copy,
+{
+  type Writer = MapWriter<V, W::Writer, RM, WM>;
+  type OriginWriter = W;
+  type RefWrite<'a> = MapWriteRef<V, W::RefWrite<'a>, RM, WM> where Self:'a;
+
+  fn write(&'_ self) -> Self::RefWrite<'_> {
+    MapWriteRef {
+      origin_ref: self.origin_writer.write(),
+      map_read: self.map_reader,
+      map_write: self.map_writer,
+    }
+  }
+
+  #[inline]
+  fn silent(&'_ self) -> Self::RefWrite<'_> {
+    MapWriteRef {
+      origin_ref: self.origin_writer.silent(),
+      map_read: self.map_reader,
+      map_write: self.map_writer,
+    }
+  }
+
+  #[inline]
+  fn shallow(&'_ self) -> Self::RefWrite<'_> {
+    MapWriteRef {
+      origin_ref: self.origin_writer.shallow(),
+      map_read: self.map_reader,
+      map_write: self.map_writer,
+    }
+  }
+
+  #[inline]
+  fn clone_writer(&self) -> Self::Writer {
+    MapWriter {
+      origin_writer: self.origin_writer.clone_writer(),
+      map_reader: self.map_reader,
+      map_writer: self.map_writer,
+    }
+  }
+
+  #[inline]
+  fn origin_writer(&self) -> &Self::OriginWriter { &self.origin_writer }
+}
+
+impl<V, O, F> std::ops::Deref for MapReadRef<V, O, F>
+where
+  O: Deref,
+  F: FnOnce(&O::Target) -> &V + Copy,
+{
+  type Target = V;
+  #[inline]
+  fn deref(&self) -> &Self::Target { (self.map_fn)(self.origin_ref.deref()) }
+}
+
+impl<V, O, R, W> std::ops::Deref for MapWriteRef<V, O, R, W>
+where
+  O: DerefMut,
+  R: FnOnce(&O::Target) -> &V + Copy,
+  W: FnOnce(&mut O::Target) -> &mut V + Copy,
+{
+  type Target = V;
+  #[inline]
+  fn deref(&self) -> &Self::Target { (self.map_read)(self.origin_ref.deref()) }
+}
+
+impl<V, O, R, W> std::ops::DerefMut for MapWriteRef<V, O, R, W>
+where
+  O: DerefMut,
+  R: FnOnce(&O::Target) -> &V + Copy,
+  W: FnOnce(&mut O::Target) -> &mut V + Copy,
+{
+  #[inline]
+  fn deref_mut(&mut self) -> &mut Self::Target { (self.map_write)(self.origin_ref.deref_mut()) }
+}
+
+impl<V, O, R, W> RefWrite for MapWriteRef<V, O, R, W>
+where
+  O: RefWrite,
+  R: FnOnce(&O::Target) -> &V + Copy,
+  W: FnOnce(&mut O::Target) -> &mut V + Copy,
+{
+  #[inline]
+  fn forget_modifies(&mut self) -> bool { self.origin_ref.forget_modifies() }
+}
diff --git a/core/src/state/readonly.rs b/core/src/state/readonly.rs
deleted file mode 100644
index 218f334bb..000000000
--- a/core/src/state/readonly.rs
+++ /dev/null
@@ -1,103 +0,0 @@
-use super::{ModifyScope, Stateful, StatefulRef};
-use rxrust::{observable, ops::box_it::BoxOp, prelude::BoxIt, subject::Subject};
-use std::{convert::Infallible, rc::Rc};
-
-pub enum Readonly<W> {
-  Stateful(Stateful<W>),
-  Stateless(Rc<W>),
-}
-
-pub enum ReadRef<'a, W> {
-  Stateful(StatefulRef<'a, W>),
-  Stateless(&'a Rc<W>),
-}
-
-impl<W> Readonly<W> {
-  /// Readonly never modify the inner data, use a `()` to mock the api.
-  #[inline]
-  pub fn modify_guard(&self) {}
-
-  #[inline]
-  pub fn state_ref(&self) -> ReadRef<W> {
-    match self {
-      Readonly::Stateful(s) => ReadRef::Stateful(s.state_ref()),
-      Readonly::Stateless(w) => ReadRef::Stateless(w),
-    }
-  }
-
-  #[inline]
-  pub fn silent_ref(&self) -> ReadRef<W> {
-    // For a read only reference, `state_ref` and `silent_ref` no difference.
-    self.state_ref()
-  }
-
-  pub fn raw_modifies(&self) -> Subject<'static, ModifyScope, Infallible> {
-    match self {
-      Readonly::Stateful(s) => s.raw_modifies(),
-      Readonly::Stateless(_) => Subject::default(),
-    }
-  }
-
-  /// Notify when this widget be mutable accessed, no mather if the widget
-  /// really be modified, the value is hint if it's only access by silent ref.
-  #[inline]
-  pub fn modifies(&self) -> BoxOp<'static, (), Infallible> {
-    match self {
-      Readonly::Stateful(s) => s.modifies(),
-      Readonly::Stateless(_) => observable::create(|_| {}).box_it(),
-    }
-  }
-
-  /// Clone the stateful widget of which the reference point to. Require mutable
-  /// reference because we try to early release inner borrow when clone occur.
-  #[inline]
-  pub fn clone_stateful(&self) -> Readonly<W> { self.clone() }
-}
-
-impl<'a, W> ReadRef<'a, W> {
-  #[inline]
-  pub fn silent(&self) -> &W { self }
-
-  #[inline]
-  pub fn raw_modifies(&self) -> Subject<'static, ModifyScope, Infallible> {
-    match self {
-      ReadRef::Stateful(s) => s.raw_modifies(),
-      ReadRef::Stateless(_) => Subject::default(),
-    }
-  }
-
-  #[inline]
-  pub fn modifies(&self) -> BoxOp<'static, (), Infallible> {
-    match self {
-      ReadRef::Stateful(s) => s.modifies(),
-      ReadRef::Stateless(_) => observable::create(|_| {}).box_it(),
-    }
-  }
-
-  pub fn clone_stateful(&self) -> Readonly<W> {
-    match self {
-      ReadRef::Stateful(s) => Readonly::Stateful(s.clone_stateful()),
-      ReadRef::Stateless(r) => Readonly::Stateless((*r).clone()),
-    }
-  }
-}
-
-impl<W> Clone for Readonly<W> {
-  fn clone(&self) -> Self {
-    match self {
-      Self::Stateful(arg0) => Self::Stateful(arg0.clone()),
-      Self::Stateless(arg0) => Self::Stateless(arg0.clone()),
-    }
-  }
-}
-
-impl<'a, W> std::ops::Deref for ReadRef<'a, W> {
-  type Target = W;
-
-  fn deref(&self) -> &Self::Target {
-    match self {
-      ReadRef::Stateful(s) => s.deref(),
-      ReadRef::Stateless(r) => r,
-    }
-  }
-}
diff --git a/core/src/state/splitted_state.rs b/core/src/state/splitted_state.rs
new file mode 100644
index 000000000..98205a466
--- /dev/null
+++ b/core/src/state/splitted_state.rs
@@ -0,0 +1,205 @@
+use crate::context::AppCtx;
+
+use super::{MapReadRef, MapReader, ModifyScope, Notifier, RefWrite, StateReader, StateWriter};
+use ribir_algo::Sc;
+use rxrust::{
+  ops::box_it::BoxOp,
+  prelude::{ObservableItem, Observer},
+  subject::Subject,
+  subscription::Subscription,
+};
+use std::{any::Any, cell::Cell, rc::Rc};
+
+/// A writer splitted writer from another writer, and has its own notifier.
+pub struct SplittedWriter<V, O, R, W>
+where
+  O: StateWriter,
+  R: FnOnce(&O::Value) -> &V + Copy,
+  W: FnOnce(&mut O::Value) -> &mut V + Copy,
+{
+  origin_writer: O,
+  reader: R,
+  writer: W,
+  notifier: Notifier,
+  batched_modify: Sc<Cell<ModifyScope>>,
+  connect_guard: Rc<Box<dyn Any>>,
+}
+
+impl<V, O, R, W> StateReader for SplittedWriter<V, O, R, W>
+where
+  O: StateWriter,
+  R: FnOnce(&O::Value) -> &V + Copy,
+  W: FnOnce(&mut O::Value) -> &mut V + Copy,
+{
+  type Value = V;
+  type OriginReader = O;
+  type Reader = MapReader<V, O::Reader, R>;
+
+  type Ref<'a> = MapReadRef<V, O::Ref<'a>, R> where Self: 'a;
+
+  #[inline]
+  fn read(&'_ self) -> Self::Ref<'_> { MapReadRef::new(self.origin_writer.read(), self.reader) }
+
+  #[inline]
+  fn clone_reader(&self) -> Self::Reader {
+    MapReader::new(self.origin_writer.clone_reader(), self.reader)
+  }
+
+  #[inline]
+  fn origin_reader(&self) -> &Self::OriginReader { &self.origin_writer }
+
+  #[inline]
+  fn modifies(&self) -> BoxOp<'static, ModifyScope, std::convert::Infallible> {
+    self.notifier.modifies()
+  }
+
+  #[inline]
+  fn raw_modifies(&self) -> Subject<'static, ModifyScope, std::convert::Infallible> {
+    self.notifier.raw_modifies()
+  }
+}
+
+impl<V, O, R, W> StateWriter for SplittedWriter<V, O, R, W>
+where
+  O: StateWriter,
+  R: FnOnce(&O::Value) -> &V + Copy,
+  W: FnOnce(&mut O::Value) -> &mut V + Copy,
+{
+  type Writer = SplittedWriter<V, O::Writer, R, W>;
+  type OriginWriter = O;
+  type RefWrite<'a> = SplittedWriteRef<'a, V, O::RefWrite<'a>, R, W> where Self: 'a;
+
+  #[inline]
+  fn write(&'_ self) -> Self::RefWrite<'_> { self.write_ref(ModifyScope::BOTH) }
+
+  fn silent(&'_ self) -> Self::RefWrite<'_> { self.write_ref(ModifyScope::DATA) }
+
+  fn shallow(&'_ self) -> Self::RefWrite<'_> { self.write_ref(ModifyScope::FRAMEWORK) }
+
+  #[inline]
+  fn clone_writer(&self) -> Self::Writer {
+    SplittedWriter {
+      origin_writer: self.origin_writer.clone_writer(),
+      reader: self.reader,
+      writer: self.writer,
+      notifier: self.notifier.clone(),
+      batched_modify: self.batched_modify.clone(),
+      connect_guard: self.connect_guard.clone(),
+    }
+  }
+
+  #[inline]
+  fn origin_writer(&self) -> &Self::OriginWriter { &self.origin_writer }
+}
+
+pub struct SplittedWriteRef<'a, V, O, R, W>
+where
+  O: RefWrite,
+  R: FnOnce(&O::Target) -> &V + Copy,
+  W: FnOnce(&mut O::Target) -> &mut V + Copy,
+{
+  origin_ref: O,
+  modify_scope: ModifyScope,
+  batched_modify: &'a Sc<Cell<ModifyScope>>,
+  notifier: &'a Notifier,
+  reader_fn: R,
+  writer_fn: W,
+}
+
+impl<'a, V, O, R, W> std::ops::Deref for SplittedWriteRef<'a, V, O, R, W>
+where
+  O: RefWrite,
+  R: FnOnce(&O::Target) -> &V + Copy,
+  W: FnOnce(&mut O::Target) -> &mut V + Copy,
+{
+  type Target = V;
+
+  #[inline]
+  fn deref(&self) -> &Self::Target { (self.reader_fn)(&*self.origin_ref) }
+}
+
+impl<'a, V, O, R, W> std::ops::DerefMut for SplittedWriteRef<'a, V, O, R, W>
+where
+  O: RefWrite,
+  R: FnOnce(&O::Target) -> &V + Copy,
+  W: FnOnce(&mut O::Target) -> &mut V + Copy,
+{
+  #[inline]
+  fn deref_mut(&mut self) -> &mut Self::Target { (self.writer_fn)(&mut *self.origin_ref) }
+}
+
+impl<'a, V, O, R, W> RefWrite for SplittedWriteRef<'a, V, O, R, W>
+where
+  O: RefWrite,
+  R: FnOnce(&O::Target) -> &V + Copy,
+  W: FnOnce(&mut O::Target) -> &mut V + Copy,
+{
+  #[inline]
+  fn forget_modifies(&mut self) -> bool { self.origin_ref.forget_modifies() }
+}
+
+impl<V, O, R, W> SplittedWriter<V, O, R, W>
+where
+  O: StateWriter,
+  R: FnOnce(&O::Value) -> &V + Copy,
+  W: FnOnce(&mut O::Value) -> &mut V + Copy,
+{
+  pub(super) fn new(origin_writer: O, reader: R, writer: W) -> Self {
+    let notifier = Notifier::default();
+    let c_modifier = notifier.clone();
+
+    let h = origin_writer
+      .raw_modifies()
+      .subscribe(move |v| c_modifier.raw_modifies().next(v))
+      .unsubscribe_when_dropped();
+
+    Self {
+      origin_writer,
+      reader,
+      writer,
+      notifier,
+      batched_modify: <_>::default(),
+      connect_guard: Rc::new(Box::new(h)),
+    }
+  }
+
+  fn write_ref(&'_ self, scope: ModifyScope) -> SplittedWriteRef<'_, V, O::RefWrite<'_>, R, W> {
+    SplittedWriteRef {
+      origin_ref: self.origin_writer.write(),
+      modify_scope: scope,
+      batched_modify: &self.batched_modify,
+      notifier: &self.notifier,
+      reader_fn: self.reader,
+      writer_fn: self.writer,
+    }
+  }
+}
+
+impl<'a, V, O, R, W> Drop for SplittedWriteRef<'a, V, O, R, W>
+where
+  O: RefWrite,
+  R: FnOnce(&O::Target) -> &V + Copy,
+  W: FnOnce(&mut O::Target) -> &mut V + Copy,
+{
+  fn drop(&mut self) {
+    if !self.origin_ref.forget_modifies() {
+      return;
+    }
+
+    let scope = self.modify_scope;
+    let batched_modify = self.batched_modify.get();
+    if batched_modify.is_empty() && !scope.is_empty() {
+      self.batched_modify.set(scope);
+
+      let mut subject = self.notifier.raw_modifies();
+      let batched_modify = self.batched_modify.clone();
+      AppCtx::spawn_local(async move {
+        let scope = batched_modify.replace(ModifyScope::empty());
+        subject.next(scope);
+      })
+      .unwrap();
+    } else {
+      self.batched_modify.set(batched_modify | scope);
+    }
+  }
+}
diff --git a/core/src/state/stateful.rs b/core/src/state/stateful.rs
index 7f13523a0..115500e04 100644
--- a/core/src/state/stateful.rs
+++ b/core/src/state/stateful.rs
@@ -1,56 +1,42 @@
-use crate::{impl_proxy_query, impl_query_self_only, prelude::*};
-pub use guards::ModifyGuard;
+use crate::{impl_proxy_query, impl_proxy_render, impl_query_self_only, prelude::*};
+use ribir_algo::Sc;
 use rxrust::{ops::box_it::BoxOp, prelude::*};
 use std::{
-  cell::{Cell, RefCell, UnsafeCell},
-  collections::LinkedList,
+  cell::{Cell, Ref, RefCell, RefMut},
   convert::Infallible,
   ops::{Deref, DerefMut},
-  rc::Rc,
 };
 
 /// Stateful object use to watch the modifies of the inner data.
 pub struct Stateful<W> {
-  inner: Rc<InnerStateful<W>>,
-  pub(crate) modify_notifier: StateChangeNotifier,
+  pub(crate) inner: Sc<StateData<W>>,
+  pub(crate) notifier: Notifier,
 }
 
-/// notify downstream when widget state changed, the value mean if the change it
-/// as silent or not.
-#[derive(Default, Clone)]
-// todo: remove rc<RefCell>
-pub(crate) struct StateChangeNotifier(Rc<RefCell<Subject<'static, ModifyScope, Infallible>>>);
-
-/// A reference of `Stateful which tracked the state change across if user
-/// mutable deref this reference.
-///
-/// `StateRef` also help implicit borrow inner widget mutable or not by deref or
-/// deref_mut. And early drop the inner borrow if need, so the borrow lifetime
-/// not bind to struct lifetime. Useful to avoid borrow conflict. For example
-///
-/// ```ignore
-/// (this.ref_y() > 0).then(move || this.mut_y());
-/// ```
-///
-/// Assume above code in `widget!` macro and `this` is a tracked stateful
-/// widget, Two variables of borrow result of two `this` have lifetime overlap.
-/// But in logic, first borrow needn't live as long as the statement. See
-/// relative rust issue https://github.com/rust-lang/rust/issues/37612
-
-pub struct StatefulRef<'a, W> {
-  /// - None, Not used the value
-  /// - Some(false), borrow used the value
-  /// - Some(true), mutable borrow used the value
-  mut_accessed_flag: Cell<Option<bool>>,
+pub struct Reader<W>(Stateful<W>);
+
+pub struct Writer<W>(Stateful<W>);
+
+pub struct ReadRef<'a, W>(Ref<'a, W>);
+
+pub struct WriteRef<'a, W> {
+  modified: bool,
   modify_scope: ModifyScope,
-  value: ModifyGuard<'a, W>,
+  value: RefMut<'a, W>,
+  batched_modify: &'a Sc<Cell<ModifyScope>>,
+  notifier: Option<&'a Notifier>,
 }
 
+/// The notifier is a `RxRust` stream that emit notification when the state
+/// changed.
+#[derive(Default, Clone)]
+pub struct Notifier(Subject<'static, ModifyScope, Infallible>);
+
 bitflags! {
-  #[derive(Clone, Copy, PartialEq, Eq, Debug)]
+  #[derive(Clone, Copy, PartialEq, Eq, Debug, Default)]
   pub struct ModifyScope: u8 {
     /// state change only effect the data, transparent to ribir framework.
-    const DATA  = 0x001;
+    const DATA  = 0x01;
     /// state change only effect to framework, transparent to widget data.
     const FRAMEWORK = 0x010;
     /// state change effect both widget data and framework.
@@ -58,320 +44,362 @@ bitflags! {
   }
 }
 
-mod guards {
-  use super::*;
-  pub struct ModifyGuard<'a, W>(&'a Stateful<W>);
+impl<W> StateReader for Stateful<W> {
+  type Value = W;
+  type OriginReader = Self;
+  type Reader = Reader<W>;
+  type Ref<'a> = ReadRef<'a, W> where Self: 'a,;
 
-  impl<'a, W> ModifyGuard<'a, W> {
-    pub(crate) fn new(data: &'a Stateful<W>) -> Self {
-      let guards = &data.inner.guard_cnt;
-      guards.set(guards.get() + 1);
-      Self(data)
-    }
+  #[inline]
+  fn read(&self) -> ReadRef<'_, W> { self.inner.read() }
+
+  #[inline]
+  fn clone_reader(&self) -> Self::Reader { Reader::from_stateful(self) }
+
+  #[inline]
+  fn origin_reader(&self) -> &Self::OriginReader { self }
+
+  #[inline]
+  fn modifies(&self) -> BoxOp<'static, ModifyScope, Infallible> { self.notifier.modifies() }
 
-    pub(crate) fn inner_ref(&self) -> &'a Stateful<W> { self.0 }
+  #[inline]
+  fn raw_modifies(&self) -> Subject<'static, ModifyScope, Infallible> {
+    self.notifier.raw_modifies()
   }
+}
 
-  impl<'a, W> Drop for ModifyGuard<'a, W> {
-    fn drop(&mut self) {
-      let guards = &self.0.inner.guard_cnt;
-      guards.set(guards.get() - 1);
-
-      if guards.get() == 0 {
-        let inner = &self.0.inner;
-        assert_eq!(UNUSED, inner.borrow_flag.get());
-        let scope = inner.modify_scope.take();
-        if let Some(scope) = scope {
-          self.0.raw_modifies().next(scope);
-        }
-      }
-    }
+impl<W> StateWriter for Stateful<W> {
+  type Writer = Writer<W>;
+  type OriginWriter = Self;
+  type RefWrite<'a> = WriteRef<'a, W> where Self: 'a;
+
+  fn write(&'_ self) -> Self::RefWrite<'_> { self.write_ref(ModifyScope::BOTH) }
+
+  fn silent(&'_ self) -> Self::RefWrite<'_> { self.write_ref(ModifyScope::DATA) }
+
+  fn shallow(&'_ self) -> Self::RefWrite<'_> { self.write_ref(ModifyScope::FRAMEWORK) }
+
+  fn clone_writer(&self) -> Self::Writer { Writer::from_stateful(self) }
+
+  fn origin_writer(&self) -> &Self::OriginWriter { self }
+}
+
+impl<W> StateReader for Reader<W> {
+  type Value = W;
+  type OriginReader = Self;
+  type Reader = Self;
+  type Ref<'a> = ReadRef<'a, W> where W:'a;
+
+  #[inline]
+  fn read(&'_ self) -> Self::Ref<'_> { self.0.read() }
+
+  #[inline]
+  fn clone_reader(&self) -> Self { self.0.clone_reader() }
+
+  #[inline]
+  fn origin_reader(&self) -> &Self::OriginReader { self }
+
+  #[inline]
+  fn modifies(&self) -> BoxOp<'static, ModifyScope, Infallible> { self.0.modifies() }
+
+  #[inline]
+  fn raw_modifies(&self) -> Subject<'static, ModifyScope, Infallible> { self.0.raw_modifies() }
+}
+
+impl<W> StateReader for Writer<W> {
+  type Value = W;
+  type OriginReader = Self;
+  type Reader = Reader<W>;
+  type Ref<'a> = ReadRef<'a, W> where W:'a;
+
+  #[inline]
+  fn read(&'_ self) -> Self::Ref<'_> { self.0.read() }
+
+  #[inline]
+  fn clone_reader(&self) -> Self::Reader { self.0.clone_reader() }
+
+  #[inline]
+  fn origin_reader(&self) -> &Self::OriginReader { self }
+
+  #[inline]
+  fn modifies(&self) -> BoxOp<'static, ModifyScope, Infallible> { self.0.modifies() }
+
+  #[inline]
+  fn raw_modifies(&self) -> Subject<'static, ModifyScope, Infallible> { self.0.raw_modifies() }
+}
+
+impl<W> StateWriter for Writer<W> {
+  type Writer = Self;
+  type OriginWriter = Self;
+  type RefWrite<'a> = WriteRef<'a, W> where W:'a;
+
+  #[inline]
+  fn write(&'_ self) -> Self::RefWrite<'_> { self.0.write() }
+
+  #[inline]
+  fn silent(&'_ self) -> Self::RefWrite<'_> { self.0.silent() }
+
+  #[inline]
+  fn shallow(&'_ self) -> Self::RefWrite<'_> { self.0.shallow() }
+
+  #[inline]
+  fn clone_writer(&self) -> Self { self.0.clone_writer() }
+
+  #[inline]
+  fn origin_writer(&self) -> &Self::OriginWriter { self }
+}
+
+impl<W> Drop for Reader<W> {
+  fn drop(&mut self) {
+    // The `Stateful` is a writer but used as a reader in `Reader` that not
+    // increment the writer count. So we increment the writer count before drop the
+    // `Stateful` to keep its count correct.
+    self.0.inc_writer();
   }
+}
 
-  impl<'a, W> std::ops::Deref for ModifyGuard<'a, W> {
-    type Target = Stateful<W>;
+impl<W> Drop for Stateful<W> {
+  fn drop(&mut self) {
+    self.dec_writer();
+    // can cancel the notifier, because no one will modify the data.
+    if self.writer_count() == 0 {
+      let notifier = self.notifier.clone();
+      // we use an async task to unsubscribe to wait the batched modifies to be
+      // notified.
+      AppCtx::spawn_local(async move {
+        notifier.0.unsubscribe();
+      })
+      .unwrap();
+    }
 
-    #[inline]
-    fn deref(&self) -> &Self::Target { self.0 }
+    // Declare object may add task to disconnect to upstream, trigger that task if
+    // this is the last reference. We not hold that task in `Stateful` to avoid
+    // cycle reference.
+    if self.inner.ref_count() == 1 {
+      AppCtx::trigger_task(self.heap_ptr() as *const ());
+    }
   }
 }
 
-type BorrowFlag = isize;
-const UNUSED: BorrowFlag = 0;
-
-#[inline(always)]
-fn is_reading(x: BorrowFlag) -> bool { x > UNUSED }
-
-struct InnerStateful<W> {
-  borrow_flag: Cell<BorrowFlag>,
-  modify_scope: Cell<Option<ModifyScope>>,
-  #[cfg(debug_assertions)]
-  borrowed_at: Cell<Option<&'static std::panic::Location<'static>>>,
-  guard_cnt: Cell<usize>,
-  data: UnsafeCell<W>,
-  /// A link list to store anonymous data, so keep it live as long as the
-  /// `Stateful` data. When this `Stateful` subscribe to a stream, append the
-  /// unsubscribe handle to this list let you can unsubscribe when this
-  /// `Stateful` drop.
-  slot_link: UnsafeCell<LinkedList<Box<dyn Any>>>,
+impl<W> Reader<W> {
+  fn from_stateful(stateful: &Stateful<W>) -> Self {
+    Reader(Stateful {
+      inner: stateful.inner.clone(),
+      notifier: stateful.notifier.clone(),
+    })
+  }
 }
 
-impl<W> Clone for Stateful<W> {
+impl<W> Writer<W> {
   #[inline]
-  fn clone(&self) -> Self {
-    Self {
-      inner: self.inner.clone(),
-      modify_notifier: self.modify_notifier.clone(),
-    }
+  pub fn into_inner(self) -> Stateful<W> { self.0 }
+
+  fn from_stateful(stateful: &Stateful<W>) -> Self {
+    stateful.inc_writer();
+    Writer(Stateful {
+      inner: stateful.inner.clone(),
+      notifier: stateful.notifier.clone(),
+    })
   }
 }
 
+pub(crate) struct StateData<W> {
+  data: RefCell<W>,
+  /// The batched modifies of the `State` which will be notified.
+  batch_modified: Sc<Cell<ModifyScope>>,
+  /// The counter of the writer may be modified the data.
+  writer_count: Cell<usize>,
+}
+
+#[repr(transparent)]
+pub(crate) struct RenderFul<R>(pub(crate) Stateful<R>);
+
+impl_proxy_query!(paths [0], RenderFul<R>, <R>, where R: Render + 'static);
+impl_proxy_render!(proxy 0.read(), RenderFul<R>, <R>, where R: Render + 'static);
+impl_proxy_query!(paths[0.read()], RenderFul<Box<dyn Render>>);
+impl_proxy_render!(proxy 0.read(), RenderFul<Box<dyn Render>>);
+
 impl<W> Stateful<W> {
   pub fn new(data: W) -> Self {
     Stateful {
-      inner: Rc::new(InnerStateful {
-        data: UnsafeCell::new(data),
-        borrow_flag: Cell::new(0),
-        modify_scope: Cell::new(None),
-        #[cfg(debug_assertions)]
-        borrowed_at: Cell::new(None),
-        guard_cnt: Cell::new(0),
-        slot_link: <_>::default(),
-      }),
-      modify_notifier: <_>::default(),
+      inner: Sc::new(StateData::new(data)),
+      notifier: <_>::default(),
     }
   }
 
-  /// Return a guard that batch the modify event.
+  /// Clone the stateful widget of which the reference point to. Require mutable
+  /// reference because we try to early release inner borrow when clone occur.
   #[inline]
-  pub fn modify_guard(&self) -> ModifyGuard<W> { ModifyGuard::new(self) }
+  pub fn clone_stateful(&self) -> Stateful<W> { self.clone_writer().0 }
 
-  /// Return a reference of `Stateful`, modify across this reference will notify
-  /// data and framework.
+  /// just for compatibility with `Stateful` in old syntax.
   #[inline]
-  pub fn state_ref(&self) -> StatefulRef<W> { StatefulRef::new(self, ModifyScope::BOTH) }
+  pub fn state_ref(&self) -> WriteRef<W> { self.write() }
 
-  /// Return a reference of `Stateful`, modify across this reference will notify
-  /// data only, the relayout or paint depends on this object will not be skip.
-  ///
-  /// If you not very clear how `silent_ref` work, use [`Stateful::state_ref`]!
-  /// instead of.
-  #[inline]
-  pub fn silent_ref(&self) -> StatefulRef<W> { StatefulRef::new(self, ModifyScope::DATA) }
-
-  /// Return a reference of `Stateful`, modify across this reference will notify
-  /// framework only. That means this modify only effect framework but not
-  /// effect on data. And usually use it to temporary to modify the `Stateful`.
-  ///
-  /// If you not very clear how `shallow_ref` work, use [`Stateful::state_ref`]!
-  /// instead of.
+  /// Run the `task` when the inner state data will drop.
   #[inline]
-  pub(crate) fn shallow_ref(&self) -> StatefulRef<W> {
-    StatefulRef::new(self, ModifyScope::FRAMEWORK)
-  }
-
-  pub fn raw_modifies(&self) -> Subject<'static, ModifyScope, Infallible> {
-    self.modify_notifier.raw_modifies()
+  pub fn on_state_drop(&self, task: impl FnOnce() + 'static) {
+    AppCtx::add_trigger_task(self.heap_ptr() as *const _, Box::new(task))
   }
 
-  /// Notify when this widget be mutable accessed, no mather if the widget
-  /// really be modified, the value is hint if it's only access by silent ref.
+  // unsubscribe the `subscription` when the inner state data will drop.
   #[inline]
-  pub fn modifies(&self) -> BoxOp<'static, (), Infallible> {
-    self
-      .raw_modifies()
-      .filter_map(|s: ModifyScope| s.contains(ModifyScope::DATA).then_some(()))
-      .box_it()
+  pub fn unsubscribe_on_drop(&self, subscription: impl Subscription + 'static) {
+    self.on_state_drop(move || subscription.unsubscribe())
   }
 
-  /// Clone the stateful widget of which the reference point to. Require mutable
-  /// reference because we try to early release inner borrow when clone occur.
+  /// return the heap pointer of the data.
   #[inline]
-  pub fn clone_stateful(&self) -> Stateful<W> { self.clone() }
+  fn heap_ptr(&self) -> *const W { self.inner.data.as_ptr() }
 
-  pub fn own_data(&self, data: impl Any) {
-    let ptr = self.state_ref().value.inner.slot_link.get();
-    unsafe { &mut *ptr }.push_back(Box::new(data));
+  pub(crate) fn from_state_data(data: StateData<W>) -> Self {
+    Self {
+      inner: Sc::new(data),
+      notifier: <_>::default(),
+    }
   }
 
   pub(crate) fn try_into_inner(self) -> Result<W, Self> {
-    if Rc::strong_count(&self.inner) == 1 {
-      let inner = Rc::try_unwrap(self.inner).unwrap_or_else(|_| unreachable!());
+    if Sc::ref_count(&self.inner) == 1 {
+      let inner = self.inner.clone();
+      drop(self);
+      // SAFETY: `Rc::strong_count(&self.inner) == 1` guarantees unique access.
+      let inner = unsafe { Sc::try_unwrap(inner).unwrap_unchecked() };
       Ok(inner.data.into_inner())
     } else {
       Err(self)
     }
   }
-}
 
-macro_rules! debug_borrow_location {
-  ($this: ident) => {
-    #[cfg(debug_assertions)]
-    {
-      let caller = std::panic::Location::caller();
-      $this.value.inner.borrowed_at.set(Some(caller));
-    }
-  };
+  fn write_ref(&self, scope: ModifyScope) -> WriteRef<'_, W> {
+    let value = self.inner.data.borrow_mut();
+    let batched_modify = &self.inner.batch_modified;
+    let modifier = &self.notifier;
+    WriteRef::new(value, scope, batched_modify, Some(modifier))
+  }
+
+  fn writer_count(&self) -> usize { self.inner.writer_count.get() }
+  fn inc_writer(&self) { self.inner.writer_count.set(self.writer_count() + 1); }
+  fn dec_writer(&self) { self.inner.writer_count.set(self.writer_count() - 1); }
 }
 
-macro_rules! already_borrow_panic {
-  ($this: ident) => {
-    #[cfg(debug_assertions)]
-    {
-      let location = $this.value.inner.borrowed_at.get().unwrap();
-      panic!("already borrowed at {}", location);
+impl<W> StateData<W> {
+  /// Assert the state data is not used by any reader and writer.
+  #[inline]
+  #[track_caller]
+  pub(crate) fn assert_is_not_used(&self) { self.data.borrow_mut(); }
+
+  #[inline]
+  pub(crate) fn new(data: W) -> Self {
+    Self {
+      // the `StateData` in `Stateful` or `State` is a writer
+      writer_count: Cell::new(1),
+      data: RefCell::new(data),
+      batch_modified: <_>::default(),
     }
-    #[cfg(not(debug_assertions))]
-    panic!("already borrowed");
-  };
+  }
+
+  pub(crate) fn into_inner(self) -> W { self.data.into_inner() }
+
+  pub(crate) fn read(&self) -> ReadRef<W> { ReadRef(self.data.borrow()) }
 }
 
-impl<'a, W> Deref for StatefulRef<'a, W> {
+impl<'a, W> Deref for ReadRef<'a, W> {
   type Target = W;
 
   #[track_caller]
-  fn deref(&self) -> &Self::Target {
-    if self.mut_accessed_flag.get().is_none() {
-      self.mut_accessed_flag.set(Some(false));
-      let b = &self.value.inner.borrow_flag;
-      b.set(b.get() + 1);
-
-      match b.get() {
-        1 => {
-          debug_borrow_location!(self);
-        }
-        flag if !is_reading(flag) => {
-          already_borrow_panic!(self);
-        }
-        _ => {}
-      }
-      if !is_reading(b.get()) {}
-    }
+  fn deref(&self) -> &Self::Target { &self.0 }
+}
 
-    // SAFETY: `BorrowFlag` guarantees unique access.
-    let ptr = self.value.inner.data.get();
-    unsafe { &*ptr }
-  }
+impl<'a, W> Deref for WriteRef<'a, W> {
+  type Target = W;
+  #[track_caller]
+  fn deref(&self) -> &Self::Target { &self.value }
 }
 
-impl<'a, W> DerefMut for StatefulRef<'a, W> {
+impl<'a, W> DerefMut for WriteRef<'a, W> {
   #[track_caller]
   fn deref_mut(&mut self) -> &mut Self::Target {
-    let b = &self.value.inner.borrow_flag;
-    if log::log_enabled!(log::Level::Debug) {
-      let caller = std::panic::Location::caller();
-      log::debug!("state modified at {caller}");
-    }
-
-    match self.mut_accessed_flag.get() {
-      None => {
-        debug_borrow_location!(self);
-        b.set(b.get() - 1);
-        self.mut_accessed_flag.set(Some(true))
-      }
-      Some(false) => {
-        debug_borrow_location!(self);
-
-        // current ref is borrowed value, we release the borrow and mutably
-        // borrow the value.
-        b.set(b.get() - 2);
-        self.mut_accessed_flag.set(Some(true))
-      }
-      Some(true) => {
-        // Already mutably the value, directly return.
-      }
-    }
-
-    if b.get() != -1 {
-      already_borrow_panic!(self);
-    }
-
-    // SAFETY: `BorrowFlag` guarantees unique access.
-    let ptr = self.value.inner.data.get();
-    unsafe { &mut *ptr }
+    self.modified = true;
+    &mut self.value
   }
 }
 
-impl<'a, W> StatefulRef<'a, W> {
-  /// Fork a silent reference
-  pub fn silent(&self) -> StatefulRef<'a, W> {
-    self.release_borrow();
-    StatefulRef::new(self.value.inner_ref(), ModifyScope::DATA)
-  }
-
-  /// Forget all modifies record in this reference. So the downstream will no
-  /// know the inner value be modified if this reference not be mut accessed
-  /// anymore.
-  pub fn forget_modifies(&self) {
-    let b = &self.value.inner.borrow_flag;
-    match self.mut_accessed_flag.get() {
-      Some(false) => b.set(b.get() - 1),
-      Some(true) => b.set(b.get() + 1),
-      None => {}
-    }
-    self.mut_accessed_flag.set(None);
-  }
-
-  #[inline]
-  pub fn raw_modifies(&self) -> Subject<'static, ModifyScope, Infallible> {
-    self.value.raw_modifies()
-  }
-
+impl<'a, W> RefWrite for WriteRef<'a, W> {
   #[inline]
-  pub fn modifies(&self) -> BoxOp<'static, (), Infallible> { self.value.modifies() }
+  fn forget_modifies(&mut self) -> bool { std::mem::replace(&mut self.modified, false) }
+}
 
-  fn new(value: &'a Stateful<W>, modify_scope: ModifyScope) -> Self {
+impl<'a, W> WriteRef<'a, W> {
+  pub(crate) fn new(
+    value: RefMut<'a, W>,
+    scope: ModifyScope,
+    batch_scope: &'a Sc<Cell<ModifyScope>>,
+    modifier: Option<&'a Notifier>,
+  ) -> Self {
     Self {
-      mut_accessed_flag: Cell::new(None),
-      modify_scope,
-      value: ModifyGuard::new(value),
+      modified: false,
+      modify_scope: scope,
+      value,
+      batched_modify: batch_scope,
+      notifier: modifier,
     }
   }
-
-  #[inline]
-  fn release_borrow(&self) {
-    let b = &self.value.inner.borrow_flag;
-    match self.mut_accessed_flag.get() {
-      Some(false) => b.set(b.get() - 1),
-      Some(true) => {
-        b.set(b.get() + 1);
-        let scope = &self.value.inner.modify_scope;
-        let union_scope = scope
-          .get()
-          .map_or(self.modify_scope, |s| s.union(self.modify_scope));
-        scope.set(Some(union_scope));
-      }
-      None => {}
-    }
-    self.mut_accessed_flag.set(None);
-  }
-
-  /// Clone the stateful widget of which the reference point to. Require mutable
-  /// reference because we try to early release inner borrow when clone occur.
-
-  #[inline]
-  pub fn clone_stateful(&self) -> Stateful<W> { self.value.clone() }
 }
 
 impl<W: SingleChild> SingleChild for Stateful<W> {}
 impl<W: MultiChild> MultiChild for Stateful<W> {}
 
 impl_proxy_query!(
-  paths [modify_notifier, state_ref()],
+  paths [notifier, read()],
   Stateful<R>, <R>, where R: Query + 'static
 );
-impl_query_self_only!(StateChangeNotifier);
+impl_query_self_only!(Notifier);
+impl_proxy_query!(paths [0], Reader<T>, <T>, where T: Query + 'static);
+impl_proxy_query!(paths [0], Writer<T>, <T>, where T: Query + 'static);
+
+impl<'a, W> Drop for WriteRef<'a, W> {
+  fn drop(&mut self) {
+    if !self.modified {
+      return;
+    }
 
-impl<'a, W> Drop for StatefulRef<'a, W> {
-  fn drop(&mut self) { self.release_borrow(); }
+    let scope = self.modify_scope;
+    let batch_scope = self.batched_modify.get();
+    if batch_scope.is_empty() && !scope.is_empty() {
+      self.batched_modify.set(scope);
+      if let Some(m) = self.notifier.as_mut() {
+        let mut subject = m.raw_modifies();
+        let share_scope = self.batched_modify.clone();
+        AppCtx::spawn_local(async move {
+          let scope = share_scope.replace(ModifyScope::empty());
+          subject.next(scope);
+        })
+        .unwrap();
+      }
+    } else {
+      self.batched_modify.set(batch_scope | scope);
+    }
+  }
 }
 
-impl StateChangeNotifier {
-  pub(crate) fn raw_modifies(&self) -> Subject<'static, ModifyScope, Infallible> {
-    self.0.borrow().clone()
+impl Notifier {
+  pub fn modifies(&self) -> BoxOp<'static, ModifyScope, Infallible> {
+    self
+      .raw_modifies()
+      .filter(|s| s.contains(ModifyScope::DATA))
+      .box_it()
   }
 
-  pub(crate) fn reset(&self) { *self.0.borrow_mut() = <_>::default(); }
+  pub(crate) fn raw_modifies(&self) -> Subject<'static, ModifyScope, Infallible> { self.0.clone() }
+
+  pub(crate) fn reset(&self) { *self.0.clone().complete() }
+}
+
+impl<W: std::fmt::Debug> std::fmt::Debug for Stateful<W> {
+  fn fmt(&self, f: &mut std::fmt::Formatter<'_>) -> std::fmt::Result {
+    f.debug_tuple("Stateful").field(&*self.read()).finish()
+  }
 }
 
 #[cfg(test)]
@@ -379,11 +407,11 @@ mod tests {
   use std::cell::RefCell;
 
   use super::*;
-  use crate::test_helper::*;
+  use crate::{test_helper::*, timer::Timer};
 
   #[test]
   fn smoke() {
-    let _guard = unsafe { AppCtx::new_lock_scope() };
+    crate::reset_test_env!();
 
     // Simulate `MockBox` widget need modify its size in event callback. Can use the
     // `cell_ref` in closure.
@@ -396,7 +424,7 @@ mod tests {
 
   #[test]
   fn state_notify_and_relayout() {
-    let _guard = unsafe { AppCtx::new_lock_scope() };
+    crate::reset_test_env!();
 
     use std::{cell::RefCell, rc::Rc};
     let notified_count = Rc::new(RefCell::new(0));
@@ -409,12 +437,12 @@ mod tests {
 
     let changed_size = Rc::new(RefCell::new(Size::zero()));
     let c_changed_size = changed_size.clone();
-    let c_box = sized_box.clone();
+    let c_box = sized_box.clone_writer();
     sized_box.modifies().subscribe(move |_| {
-      *c_changed_size.borrow_mut() = c_box.state_ref().size;
+      *c_changed_size.borrow_mut() = c_box.write().size;
     });
 
-    let state = sized_box.clone();
+    let state = sized_box.clone_writer();
     let mut wnd = TestWindow::new(sized_box);
     wnd.draw_frame();
     assert_eq!(*notified_count.borrow(), 0);
@@ -422,8 +450,10 @@ mod tests {
     assert_eq!(&*changed_size.borrow(), &Size::new(0., 0.));
 
     {
-      state.state_ref().size = Size::new(1., 1.);
+      state.write().size = Size::new(1., 1.);
     }
+    Timer::wake_timeout_futures();
+    AppCtx::run_until_stalled();
     assert!(wnd.widget_tree.borrow().is_dirty());
     wnd.draw_frame();
     assert_eq!(*notified_count.borrow(), 1);
@@ -432,7 +462,7 @@ mod tests {
 
   #[test]
   fn fix_pin_widget_node() {
-    let _guard = unsafe { AppCtx::new_lock_scope() };
+    crate::reset_test_env!();
 
     let mut wnd = TestWindow::new(widget! { MockBox { size: Size::new(100., 100.) } });
     wnd.draw_frame();
@@ -442,9 +472,9 @@ mod tests {
 
   #[test]
   fn change_notify() {
-    let _guard = unsafe { AppCtx::new_lock_scope() };
+    crate::reset_test_env!();
 
-    let notified = Rc::new(RefCell::new(vec![]));
+    let notified = Sc::new(RefCell::new(vec![]));
     let c_notified = notified.clone();
     let w = Stateful::new(MockBox { size: Size::zero() });
     w.raw_modifies()
@@ -453,24 +483,37 @@ mod tests {
     {
       let _ = &mut w.state_ref().size;
     }
+    Timer::wake_timeout_futures();
+    AppCtx::run_until_stalled();
+
     assert_eq!(notified.borrow().deref(), &[ModifyScope::BOTH]);
 
     {
-      let _ = &mut w.silent_ref().size;
+      let _ = &mut w.silent().size;
     }
+
+    Timer::wake_timeout_futures();
+    AppCtx::run_until_stalled();
     assert_eq!(
       notified.borrow().deref(),
       &[ModifyScope::BOTH, ModifyScope::DATA]
     );
 
     {
-      let mut state_ref = w.state_ref();
-      let mut silent_ref = w.silent_ref();
-      let _ = &mut state_ref;
-      let _ = &mut state_ref;
-      let _ = &mut silent_ref;
-      let _ = &mut silent_ref;
+      let _ = &mut w.write();
     }
+    {
+      let _ = &mut w.write();
+    }
+    {
+      let _ = &mut w.silent();
+    }
+    {
+      let _ = &mut w.silent();
+    }
+
+    Timer::wake_timeout_futures();
+    AppCtx::run_until_stalled();
     assert_eq!(
       notified.borrow().deref(),
       &[ModifyScope::BOTH, ModifyScope::DATA]
diff --git a/core/src/test_helper.rs b/core/src/test_helper.rs
index 715f7a45f..16d874592 100644
--- a/core/src/test_helper.rs
+++ b/core/src/test_helper.rs
@@ -15,8 +15,18 @@ pub struct Frame {
   pub viewport: Rect,
   pub surface: Color,
 }
+
+#[derive(Clone)]
 pub struct TestWindow(pub Rc<Window>);
 
+#[macro_export]
+macro_rules! reset_test_env {
+  () => {
+    let _ = rxrust::scheduler::NEW_TIMER_FN.set(Timer::new_timer_future);
+    let _guard = unsafe { AppCtx::new_lock_scope() };
+  };
+}
+
 impl TestWindow {
   /// Create a 1024x1024 window for test
   pub fn new(root: impl Into<Widget>) -> Self { Self::new_wnd(root, None) }
@@ -27,10 +37,8 @@ impl TestWindow {
 
   fn new_wnd(root: impl Into<Widget>, size: Option<Size>) -> Self {
     let _ = NEW_TIMER_FN.set(Timer::new_timer_future);
-    let wnd = Window::new(root.into(), Box::new(TestShellWindow::new(size)));
-    let id = wnd.id();
-    AppCtx::windows().borrow_mut().insert(wnd.id(), wnd.clone());
-    AppCtx::get_window(id).unwrap().emit_events();
+    let wnd = AppCtx::new_window(Box::new(TestShellWindow::new(size)), root.into());
+    wnd.run_frame_tasks();
     Self(wnd)
   }
 
@@ -68,6 +76,8 @@ impl TestWindow {
   pub fn draw_frame(&mut self) {
     // Test window not have a eventloop, manually wake-up every frame.
     Timer::wake_timeout_futures();
+    AppCtx::run_until_stalled();
+    self.run_frame_tasks();
 
     self.0.draw_frame();
   }
diff --git a/core/src/ticker.rs b/core/src/ticker.rs
index b4aad0b58..114bdaef8 100644
--- a/core/src/ticker.rs
+++ b/core/src/ticker.rs
@@ -12,16 +12,24 @@ pub struct FrameTicker {
 
 #[derive(Clone)]
 pub enum FrameMsg {
-  /// This msg emit when all event has processed and framework ready to do
-  /// layout & paint.
+  /// This msg emit when all event has processed and framework begin to do
+  /// layout & paint of the frame.
+  ///
+  /// only the first frame of continuous frames that do not need to be drawn
+  /// will be sent this message.
   NewFrame(Instant),
   /// This Msg emit when performed layout finished, and widget tree ready to
-  /// draw. Notice, this message may emit more than once, if someone listen
-  /// this message and do some stuff to lead to some widget need relayout, be
-  /// careful to modify widget in the listener of this message.
+  /// draw.
+  /// #  Notice  
+  /// - this message may emit more than once, if someone listen this message and
+  ///   do some stuff to lead to some widget need relayout, be careful to modify
+  ///   widget in the listener of this message.
   LayoutReady(Instant),
   /// This msg emit after render data has submitted that mean all stuffs of
   /// current frame need to processed by framework done.
+  ///
+  /// only the first frame of continuous frames that do not need to be drawn
+  /// will be sent this message.
   Finish(Instant),
 }
 
diff --git a/core/src/widget.rs b/core/src/widget.rs
index 23d2521a7..3cb1b6fa1 100644
--- a/core/src/widget.rs
+++ b/core/src/widget.rs
@@ -298,32 +298,17 @@ macro_rules! impl_proxy_render {
 
 impl<C: Compose> WidgetBuilder for C {
   #[inline]
-  fn build(self, ctx: &BuildCtx) -> WidgetId { State::Stateless(self).build(ctx) }
+  fn build(self, ctx: &BuildCtx) -> WidgetId { State::value(self).build(ctx) }
 }
 
 impl<C: Compose> WidgetBuilder for Stateful<C> {
   #[inline]
-  fn build(self, ctx: &BuildCtx) -> WidgetId { State::Stateful(self).build(ctx) }
+  fn build(self, ctx: &BuildCtx) -> WidgetId { State::stateful(self).build(ctx) }
 }
 
-#[repr(transparent)]
-pub(crate) struct RenderFul<R>(pub(crate) Stateful<R>);
-
-impl_proxy_query!(paths [0], RenderFul<R>, <R>, where R: Render + 'static);
-impl_proxy_render!(proxy 0.state_ref(), RenderFul<R>, <R>, where R: Render + 'static);
-impl_proxy_query!(paths[0.state_ref()], RenderFul<Box<dyn Render>>);
-impl_proxy_render!(proxy 0.state_ref(), RenderFul<Box<dyn Render>>);
-
 impl<R: Render + 'static> Compose for R {
   fn compose(this: State<Self>) -> Widget {
-    FnWidget::new(move |ctx| {
-      let node: Box<dyn Render> = match this {
-        State::Stateless(r) => Box::new(r),
-        State::Stateful(s) => Box::new(RenderFul(s)),
-      };
-      ctx.alloc_widget(node)
-    })
-    .into()
+    FnWidget::new(move |ctx| ctx.alloc_widget(this.into())).into()
   }
 }
 
diff --git a/core/src/widget_children.rs b/core/src/widget_children.rs
index b2dbfd092..b75b84482 100644
--- a/core/src/widget_children.rs
+++ b/core/src/widget_children.rs
@@ -29,7 +29,7 @@
 //! clone, this seems too strict and if `A` is not support clone, the compile
 //! error is too complex to diagnostic.
 
-use crate::prelude::*;
+use crate::{prelude::*, widget::WidgetBuilder};
 mod compose_child_impl;
 mod multi_child_impl;
 mod single_child_impl;
@@ -43,15 +43,21 @@ pub trait SingleChild {}
 
 /// A boxed render widget that support accept one child.
 pub trait BoxedSingleParent {
-  fn into_parent(self: Box<Self>, ctx: &mut BuildCtx) -> WidgetId;
+  fn boxed_append_child(self: Box<Self>, child: WidgetId, ctx: &mut BuildCtx) -> WidgetId;
+  fn boxed_build(self: Box<Self>, ctx: &mut BuildCtx) -> WidgetId;
 }
 
 /// Trait to tell Ribir a object that has multi children.
 pub trait MultiChild {}
 
 /// A boxed render widget that support accept multi children.
-pub trait BoxMultiParent {
-  fn into_parent(self: Box<Self>, ctx: &mut BuildCtx) -> WidgetId;
+pub trait BoxedMultiParent {
+  fn boxed_append_children(
+    self: Box<Self>,
+    children: Vec<WidgetId>,
+    ctx: &mut BuildCtx,
+  ) -> WidgetId;
+  fn boxed_build(self: Box<Self>, ctx: &mut BuildCtx) -> WidgetId;
 }
 
 /// Trait mark widget can have one child and also have compose logic for widget
@@ -66,23 +72,81 @@ pub trait ComposeChild: Sized {
 pub type WidgetOf<W> = SinglePair<W, Widget>;
 
 impl SingleChild for Box<dyn BoxedSingleParent> {}
-impl MultiChild for Box<dyn BoxMultiParent> {}
+impl MultiChild for Box<dyn BoxedMultiParent> {}
 
-impl RenderParent for Box<dyn BoxedSingleParent> {
-  fn into_render_parent(self, ctx: &mut BuildCtx) -> WidgetId { self.into_parent(ctx) }
+impl WidgetBuilder for Box<dyn BoxedSingleParent> {
+  #[inline]
+  fn build(self, ctx: &BuildCtx) -> WidgetId { self.boxed_build(ctx.force_as_mut()) }
+}
+
+impl SingleParent for Box<dyn BoxedSingleParent> {
+  #[inline]
+  fn append_child(self, child: WidgetId, ctx: &mut BuildCtx) -> WidgetId {
+    self.boxed_append_child(child, ctx)
+  }
 }
 
-impl RenderParent for Box<dyn BoxMultiParent> {
-  fn into_render_parent(self, ctx: &mut BuildCtx) -> WidgetId { self.into_parent(ctx) }
+impl WidgetBuilder for Box<dyn BoxedMultiParent> {
+  #[inline]
+  fn build(self, ctx: &BuildCtx) -> WidgetId { self.boxed_build(ctx.force_as_mut()) }
 }
 
-pub(crate) trait RenderParent {
-  fn into_render_parent(self, ctx: &mut BuildCtx) -> WidgetId;
+impl MultiParent for Box<dyn BoxedMultiParent> {
+  #[inline]
+  fn append_children(self, children: Vec<WidgetId>, ctx: &mut BuildCtx) -> WidgetId {
+    self.boxed_append_children(children, ctx)
+  }
+}
+
+pub(crate) trait SingleParent: WidgetBuilder {
+  fn append_child(self, child: WidgetId, ctx: &mut BuildCtx) -> WidgetId;
+}
+
+pub(crate) trait MultiParent: WidgetBuilder {
+  fn append_children(self, children: Vec<WidgetId>, ctx: &mut BuildCtx) -> WidgetId;
+}
+
+impl<T: Into<Box<dyn Render>> + SingleChild + WidgetBuilder> SingleParent for T {
+  fn append_child(self, child: WidgetId, ctx: &mut BuildCtx) -> WidgetId {
+    let p = self.build(ctx);
+    ctx.append_child(p, child);
+    p
+  }
 }
 
-impl<T: Into<Box<dyn Render>>> RenderParent for T {
+impl<T: Into<Box<dyn Render>> + MultiChild + WidgetBuilder> MultiParent for T {
+  #[inline]
+  fn append_children(self, children: Vec<WidgetId>, ctx: &mut BuildCtx) -> WidgetId {
+    let p = self.build(ctx);
+    for c in children {
+      ctx.append_child(p, c);
+    }
+    p
+  }
+}
+
+impl<W: SingleParent + 'static> BoxedSingleParent for W {
+  #[inline]
+  fn boxed_append_child(self: Box<Self>, child: WidgetId, ctx: &mut BuildCtx) -> WidgetId {
+    (*self).append_child(child, ctx)
+  }
+
+  #[inline]
+  fn boxed_build(self: Box<Self>, ctx: &mut BuildCtx) -> WidgetId { (*self).build(ctx) }
+}
+
+impl<W: MultiParent + 'static> BoxedMultiParent for W {
+  #[inline]
+  fn boxed_append_children(
+    self: Box<Self>,
+    children: Vec<WidgetId>,
+    ctx: &mut BuildCtx,
+  ) -> WidgetId {
+    (*self).append_children(children, ctx)
+  }
+
   #[inline]
-  fn into_render_parent(self, ctx: &mut BuildCtx) -> WidgetId { ctx.alloc_widget(self.into()) }
+  fn boxed_build(self: Box<Self>, ctx: &mut BuildCtx) -> WidgetId { (*self).build(ctx) }
 }
 
 #[cfg(test)]
@@ -91,7 +155,6 @@ mod tests {
   use crate::test_helper::*;
   use crate::widget::WidgetBuilder;
   use ribir_dev_helper::*;
-  use std::{cell::RefCell, rc::Rc};
 
   #[test]
   fn compose_template_child() {
diff --git a/core/src/widget_children/child_convert.rs b/core/src/widget_children/child_convert.rs
index d2101b1a4..76832678e 100644
--- a/core/src/widget_children/child_convert.rs
+++ b/core/src/widget_children/child_convert.rs
@@ -3,8 +3,8 @@ use super::{
   TmlFlag,
 };
 use crate::{
-  dynamic_widget::{DynRender, DynWidget},
-  state::{State, StateFrom, Stateful},
+  builtin_widgets::FatObj,
+  state::{State, StateFrom},
   widget::*,
 };
 
@@ -68,28 +68,38 @@ where
 impl<W, W2, C, C2, M1, M2> FromAnother<SinglePair<W2, C2>, [(M1, M2); 0]> for SinglePair<W, C>
 where
   W: FromAnother<W2, M1>,
-  C: ChildFrom<C2, M2>,
+  C: FromAnother<C2, M2>,
 {
   #[inline]
   fn from_another(value: SinglePair<W2, C2>) -> Self {
     let SinglePair { widget, child } = value;
     SinglePair {
       widget: W::from_another(widget),
-      child: C::child_from(child),
+      child: C::from_another(child),
     }
   }
 }
 
-impl<W, W2, C, C2, M1, M2> FromAnother<SinglePair<W2, C2>, [(M1, M2); 1]> for SinglePair<W, C>
+impl<W, W2, C, M> FromAnother<SinglePair<W2, C>, [M; 1]> for SinglePair<W, C>
 where
-  W: ChildFrom<W2, M1>,
-  C: FromAnother<C2, M2>,
+  W: FromAnother<W2, M>,
 {
   #[inline]
-  fn from_another(value: SinglePair<W2, C2>) -> Self {
+  fn from_another(value: SinglePair<W2, C>) -> Self {
+    let SinglePair { widget, child } = value;
+    SinglePair { widget: W::child_from(widget), child }
+  }
+}
+
+impl<W, C, C2, M> FromAnother<SinglePair<W, C2>, [M; 2]> for SinglePair<W, C>
+where
+  C: FromAnother<C2, M>,
+{
+  #[inline]
+  fn from_another(value: SinglePair<W, C2>) -> Self {
     let SinglePair { widget, child } = value;
     SinglePair {
-      widget: W::child_from(widget),
+      widget,
       child: C::from_another(child),
     }
   }
@@ -120,6 +130,24 @@ where
   }
 }
 
+impl<T1, T2, M> FromAnother<FatObj<T1>, [M; 0]> for FatObj<T2>
+where
+  T2: FromAnother<T1, M>,
+{
+  fn from_another(value: FatObj<T1>) -> Self {
+    let (host, builtin) = value.unzip();
+    FatObj::new(T2::from_another(host), builtin)
+  }
+}
+
+impl<T1, T2, M> FromAnother<T1, [M; 1]> for FatObj<T2>
+where
+  T2: ChildFrom<T1, M>,
+{
+  #[inline]
+  fn from_another(value: T1) -> Self { FatObj::from_host(ChildFrom::child_from(value)) }
+}
+
 pub(crate) trait FillVec<C, M> {
   fn fill_vec(self, vec: &mut Vec<C>);
 }
@@ -151,11 +179,3 @@ where
     vec.extend(self.into_inner().into_iter().map(ChildFrom::child_from))
   }
 }
-
-impl<D> FillVec<Widget, [(); 2]> for Stateful<DynWidget<Multi<D>>>
-where
-  D: IntoIterator + 'static,
-  Widget: From<D::Item>,
-{
-  fn fill_vec(self, vec: &mut Vec<Widget>) { vec.push(DynRender::multi(self).into()) }
-}
diff --git a/core/src/widget_children/compose_child_impl.rs b/core/src/widget_children/compose_child_impl.rs
index ae11b8b77..db660d400 100644
--- a/core/src/widget_children/compose_child_impl.rs
+++ b/core/src/widget_children/compose_child_impl.rs
@@ -1,6 +1,5 @@
 use crate::{
   context::BuildCtx,
-  dynamic_widget::DynWidget,
   prelude::ChildFrom,
   state::{State, Stateful},
   widget::{Widget, WidgetBuilder, WidgetId},
@@ -52,7 +51,7 @@ where
 {
   type Target = <State<T> as ComposeWithChild<C, M>>::Target;
   fn with_child(self, child: C, ctx: &BuildCtx) -> Self::Target {
-    State::Stateless(self).with_child(child, ctx)
+    State::value(self).with_child(child, ctx)
   }
 }
 
@@ -63,18 +62,7 @@ where
 {
   type Target = <State<T> as ComposeWithChild<C, M>>::Target;
   fn with_child(self, child: C, ctx: &BuildCtx) -> Self::Target {
-    State::Stateful(self).with_child(child, ctx)
-  }
-}
-
-impl<M, T, C> ComposeWithChild<C, M> for Stateful<DynWidget<T>>
-where
-  T: ComposeChild + 'static,
-  State<T>: ComposeWithChild<C, M>,
-{
-  type Target = <State<T> as ComposeWithChild<C, M>>::Target;
-  fn with_child(self, child: C, ctx: &BuildCtx) -> Self::Target {
-    State::from(self).with_child(child, ctx)
+    State::stateful(self).with_child(child, ctx)
   }
 }
 
@@ -287,7 +275,6 @@ where
 
 #[cfg(test)]
 mod tests {
-  use std::{cell::Cell, rc::Rc};
 
   use super::*;
   use crate::{prelude::*, test_helper::MockBox};
@@ -390,9 +377,7 @@ mod tests {
         .build(ctx)
     });
     let _ = FnWidget::new(|ctx| {
-      let cursor = Cursor {
-        cursor: Rc::new(Cell::new(CursorIcon::Hand)),
-      };
+      let cursor = Cursor { cursor: CursorIcon::Hand };
       let x = cursor.with_child(Tml.with_child(A, ctx), ctx);
       WithDecorate
         .with_child(mb.with_child(x, ctx), ctx)
diff --git a/core/src/widget_children/multi_child_impl.rs b/core/src/widget_children/multi_child_impl.rs
index 76c2ce7f9..c69b66be1 100644
--- a/core/src/widget_children/multi_child_impl.rs
+++ b/core/src/widget_children/multi_child_impl.rs
@@ -8,8 +8,8 @@ pub trait MultiWithChild<C> {
   fn with_child(self, child: C, ctx: &BuildCtx) -> Self::Target;
 }
 
-pub struct MultiPair {
-  pub parent: WidgetId,
+pub struct MultiPair<P> {
+  pub parent: P,
   pub children: Vec<WidgetId>,
 }
 
@@ -57,16 +57,6 @@ where
   }
 }
 
-impl<D> FillVec for Stateful<DynWidget<Multi<D>>>
-where
-  D: IntoIterator + 'static,
-  Widget: From<D::Item>,
-{
-  fn fill_vec(self, vec: &mut Vec<WidgetId>, ctx: &BuildCtx) {
-    vec.push(DynRender::multi(self).build(ctx))
-  }
-}
-
 impl<D> FillVec for Pipe<Multi<D>>
 where
   D: IntoIterator + 'static,
@@ -77,36 +67,21 @@ where
   }
 }
 
-trait MultiParent {
-  fn into_multi_parent(self, ctx: &mut BuildCtx) -> WidgetId;
-}
-
-impl<R: RenderParent + MultiChild> MultiParent for R {
-  #[inline]
-  fn into_multi_parent(self, ctx: &mut BuildCtx) -> WidgetId { self.into_render_parent(ctx) }
-}
-
-impl<W: RenderParent + MultiChild> MultiParent for Pipe<W> {
-  #[inline]
-  fn into_multi_parent(self, ctx: &mut BuildCtx) -> WidgetId { self.into_only_parent(ctx) }
-}
-
-impl<R, C> MultiWithChild<C> for R
+impl<P, C> MultiWithChild<C> for P
 where
-  R: MultiParent,
+  P: MultiChild,
   C: FillVec,
 {
-  type Target = MultiPair;
+  type Target = MultiPair<P>;
 
   fn with_child(self, child: C, ctx: &BuildCtx) -> Self::Target {
-    let parent = self.into_multi_parent(ctx.force_as_mut());
     let mut children = vec![];
     child.fill_vec(&mut children, ctx);
-    MultiPair { parent, children }
+    MultiPair { parent: self, children }
   }
 }
 
-impl<C> MultiWithChild<C> for MultiPair
+impl<C, P> MultiWithChild<C> for MultiPair<P>
 where
   C: FillVec,
 {
@@ -118,13 +93,9 @@ where
   }
 }
 
-impl WidgetBuilder for MultiPair {
+impl<P: MultiParent> WidgetBuilder for MultiPair<P> {
   fn build(self, ctx: &BuildCtx) -> WidgetId {
     let MultiPair { parent, children } = self;
-    children
-      .into_iter()
-      .for_each(|child| ctx.force_as_mut().append_child(parent, child));
-
-    parent
+    parent.append_children(children, ctx.force_as_mut())
   }
 }
diff --git a/core/src/widget_children/single_child_impl.rs b/core/src/widget_children/single_child_impl.rs
index 8d01c2f24..05d2d9306 100644
--- a/core/src/widget_children/single_child_impl.rs
+++ b/core/src/widget_children/single_child_impl.rs
@@ -10,8 +10,20 @@ pub trait SingleWithChild<C> {
 
 /// A node of widget with not compose its child.
 pub struct SinglePair<W, C> {
-  pub widget: W,
-  pub child: C,
+  pub(crate) widget: W,
+  pub(crate) child: C,
+}
+
+impl<W, C> SinglePair<W, C> {
+  #[inline]
+  pub fn unzip(self) -> (W, C) {
+    let Self { widget, child } = self;
+    (widget, child)
+  }
+  #[inline]
+  pub fn child(self) -> C { self.child }
+  #[inline]
+  pub fn parent(self) -> W { self.widget }
 }
 
 impl<W: SingleChild> SingleChild for Option<W> {}
@@ -35,79 +47,29 @@ impl<W, C1: SingleChild, C2> SingleWithChild<C2> for SinglePair<W, C1> {
   }
 }
 
-trait SingleParent {
-  fn into_single_parent(self, ctx: &mut BuildCtx) -> WidgetId;
-}
-
-trait WidgetChild {
-  fn child_build(self, ctx: &BuildCtx) -> WidgetId;
-}
-
-impl<W: RenderParent + SingleChild + 'static> SingleParent for W {
-  #[inline]
-  fn into_single_parent(self, ctx: &mut BuildCtx) -> WidgetId { self.into_render_parent(ctx) }
-}
-
-impl<W: RenderParent + SingleChild> SingleParent for Pipe<W> {
-  #[inline]
-  fn into_single_parent(self, ctx: &mut BuildCtx) -> WidgetId { self.into_only_parent(ctx) }
-}
-
-impl<D> SingleParent for Stateful<DynWidget<D>>
-where
-  D: Render + SingleChild + WidgetBuilder + 'static,
-{
-  #[inline]
-  fn into_single_parent(self, ctx: &mut BuildCtx) -> WidgetId {
-    Box::new(DynRender::single(self)).build(ctx)
-  }
-}
-
-impl<D> SingleParent for Stateful<DynWidget<Option<D>>>
-where
-  D: Render + SingleChild + WidgetBuilder + 'static,
-{
-  #[inline]
-  fn into_single_parent(self, ctx: &mut BuildCtx) -> WidgetId {
-    Box::new(DynRender::option(self)).build(ctx)
-  }
-}
-
-impl WidgetChild for Widget {
-  #[inline]
-  fn child_build(self, ctx: &BuildCtx) -> WidgetId { self.build(ctx) }
-}
-
-impl<W: WidgetBuilder> WidgetChild for W {
-  #[inline]
-  fn child_build(self, ctx: &BuildCtx) -> WidgetId { self.build(ctx) }
-}
-
 impl<W, C> WidgetBuilder for SinglePair<W, C>
 where
   W: SingleParent,
-  C: WidgetChild,
+  C: Into<Widget>,
 {
   fn build(self, ctx: &BuildCtx) -> WidgetId {
     let Self { widget, child } = self;
-    let p = widget.into_single_parent(ctx.force_as_mut());
-    let child = child.child_build(ctx);
-    ctx.force_as_mut().append_child(p, child);
-    p
+    let child = child.into().build(ctx);
+    widget.append_child(child, ctx.force_as_mut())
   }
 }
 
 impl<W, C> WidgetBuilder for SinglePair<Option<W>, C>
 where
   W: SingleParent,
-  C: WidgetChild,
+  C: Into<Widget>,
 {
   fn build(self, ctx: &BuildCtx) -> WidgetId {
     let Self { widget, child } = self;
     if let Some(widget) = widget {
       SinglePair { widget, child }.build(ctx)
     } else {
-      child.child_build(ctx)
+      child.into().build(ctx)
     }
   }
 }
@@ -115,14 +77,14 @@ where
 impl<W, C> WidgetBuilder for SinglePair<W, Option<C>>
 where
   W: SingleParent,
-  C: WidgetChild,
+  SinglePair<W, C>: WidgetBuilder,
 {
   fn build(self, ctx: &BuildCtx) -> WidgetId {
     let Self { widget, child } = self;
     if let Some(child) = child {
       SinglePair { widget, child }.build(ctx)
     } else {
-      widget.into_single_parent(ctx.force_as_mut())
+      widget.build(ctx)
     }
   }
 }
diff --git a/core/src/widget_tree.rs b/core/src/widget_tree.rs
index 4957b5e61..6590afee3 100644
--- a/core/src/widget_tree.rs
+++ b/core/src/widget_tree.rs
@@ -12,11 +12,12 @@ mod layout_info;
 use crate::prelude::*;
 pub use layout_info::*;
 
+use self::widget_id::empty_node;
+
 pub(crate) type DirtySet = Rc<RefCell<HashSet<WidgetId, ahash::RandomState>>>;
 
-#[derive(Default)]
 pub(crate) struct WidgetTree {
-  pub(crate) root: Option<WidgetId>,
+  pub(crate) root: WidgetId,
   wnd: Weak<Window>,
   pub(crate) arena: TreeArena,
   pub(crate) store: LayoutStore,
@@ -24,21 +25,16 @@ pub(crate) struct WidgetTree {
 }
 
 impl WidgetTree {
-  pub(crate) fn new() -> WidgetTree { Self::default() }
-
-  pub fn init(&mut self, widget: Widget, wnd: Weak<Window>) {
-    self.wnd = wnd;
-    let build_ctx = BuildCtx::new(None, self);
-    let root = widget.build(&build_ctx);
-    self.root = Some(root);
-    self.mark_dirty(root);
-    root.on_mounted_subtree(self);
-  }
+  pub fn init(&mut self, wnd: Weak<Window>) { self.wnd = wnd; }
 
-  pub(crate) fn root(&self) -> WidgetId {
-    self.root.expect("Try to access a not init `WidgetTree`")
+  pub fn set_root(&mut self, root: WidgetId) {
+    self.root = root;
+    self.mark_dirty(self.root);
+    self.root.on_mounted_subtree(self);
   }
 
+  pub(crate) fn root(&self) -> WidgetId { self.root }
+
   /// Draw current tree by painter.
   pub(crate) fn draw(&self) {
     let wnd = self.window();
@@ -79,7 +75,7 @@ impl WidgetTree {
     self
       .wnd
       .upgrade()
-      .expect("The window of `FocusManager` has already dropped.")
+      .expect("Must initialize the widget tree before use it.")
   }
 
   #[allow(unused)]
@@ -167,7 +163,7 @@ impl WidgetTree {
         .next_sibling(&self.arena)
         .or_else(|| root.prev_sibling(&self.arena))
         .expect("Try to remove the root and there is no other widget can be the new root.");
-      self.root = Some(new_root);
+      self.root = new_root;
     }
 
     id.0.detach(&mut self.arena);
@@ -187,6 +183,19 @@ impl WidgetTree {
   }
 }
 
+impl Default for WidgetTree {
+  fn default() -> Self {
+    let mut arena = TreeArena::new();
+    Self {
+      root: empty_node(&mut arena),
+      wnd: Weak::new(),
+      arena,
+      store: LayoutStore::default(),
+      dirty_set: Rc::new(RefCell::new(HashSet::default())),
+    }
+  }
+}
+
 #[cfg(test)]
 mod tests {
   extern crate test;
@@ -262,9 +271,8 @@ mod tests {
   fn bench_recursive_inflate(width: usize, depth: usize, b: &mut Bencher) {
     let wnd = TestWindow::new(Void {});
     b.iter(move || {
-      let mut tree = wnd.widget_tree.borrow_mut();
-      tree.init(Recursive { width, depth }.into(), Rc::downgrade(&wnd.0));
-      tree.layout(Size::new(512., 512.));
+      wnd.set_content_widget(Recursive { width, depth }.into());
+      wnd.layout();
     });
   }
 
@@ -272,12 +280,11 @@ mod tests {
     let w = Stateful::new(Recursive { width, depth });
     let trigger = w.clone();
     let wnd = TestWindow::new(w);
-    let mut tree = wnd.widget_tree.borrow_mut();
     b.iter(|| {
       {
         let _: &mut Recursive = &mut trigger.state_ref();
       }
-      tree.layout(Size::new(512., 512.));
+      wnd.layout();
     });
   }
 
@@ -392,7 +399,7 @@ mod tests {
 
     b.iter(move || {
       let post = Embed { width: 5, depth: 1000 };
-      WidgetTree::new().init(post.into(), Rc::downgrade(&wnd.0));
+      wnd.set_content_widget(post.into());
     });
   }
 
diff --git a/core/src/widget_tree/widget_id.rs b/core/src/widget_tree/widget_id.rs
index 6b3216a8c..cd1b5a0a4 100644
--- a/core/src/widget_tree/widget_id.rs
+++ b/core/src/widget_tree/widget_id.rs
@@ -5,7 +5,7 @@ use super::WidgetTree;
 use crate::{
   builtin_widgets::Void,
   context::{PaintingCtx, WidgetCtx},
-  state::{ModifyScope, StateChangeNotifier},
+  state::{ModifyScope, Notifier},
   widget::{QueryOrder, Render},
   window::DelayEvent,
 };
@@ -30,7 +30,7 @@ pub(crate) struct RenderNode {
 
 impl WidgetId {
   /// Returns a reference to the node data.
-  pub(crate) fn get(self, tree: &TreeArena) -> Option<&dyn Render> {
+  pub(crate) fn get<'a, 'b>(self, tree: &'a TreeArena) -> Option<&'a (dyn Render + 'b)> {
     self.get_node(tree).map(|n| n.data.as_ref())
   }
 
@@ -116,6 +116,10 @@ impl WidgetId {
     self.node_feature(tree, |node| node.previous_sibling())
   }
 
+  pub(crate) fn ancestor_of(self, other: WidgetId, tree: &TreeArena) -> bool {
+    other.ancestors(tree).find(|p| self == *p).is_some()
+  }
+
   pub(crate) fn ancestors(self, tree: &TreeArena) -> impl Iterator<Item = WidgetId> + '_ {
     self.0.ancestors(tree).map(WidgetId)
   }
@@ -137,7 +141,7 @@ impl WidgetId {
 
   pub(crate) fn on_mounted(self, tree: &WidgetTree) {
     self.assert_get(&tree.arena).query_all_type(
-      |notifier: &StateChangeNotifier| {
+      |notifier: &Notifier| {
         let state_changed = tree.dirty_set.clone();
         notifier
           .raw_modifies()
@@ -183,7 +187,7 @@ impl WidgetId {
     tree.get(self.0).and_then(method).map(WidgetId)
   }
 
-  pub(crate) fn assert_get(self, tree: &TreeArena) -> &dyn Render {
+  pub(crate) fn assert_get<'a, 'b>(self, tree: &'a TreeArena) -> &'a (dyn Render + 'b) {
     self.get(tree).expect("Widget not exists in the `tree`")
   }
 
diff --git a/core/src/window.rs b/core/src/window.rs
index 8bb0f370a..9e565e405 100644
--- a/core/src/window.rs
+++ b/core/src/window.rs
@@ -1,5 +1,4 @@
 use crate::{
-  animation::AnimateTrack,
   context::AppCtx,
   events::{
     dispatcher::Dispatcher,
@@ -18,7 +17,7 @@ use ribir_geom::Point;
 use rxrust::{scheduler::FuturesLocalScheduler, subject::Subject};
 use std::{
   borrow::BorrowMut,
-  cell::RefCell,
+  cell::{Cell, RefCell},
   collections::VecDeque,
   convert::Infallible,
   ops::{Deref, DerefMut},
@@ -41,7 +40,7 @@ pub struct Window {
   pub(crate) widget_tree: RefCell<WidgetTree>,
   pub(crate) frame_ticker: FrameTicker,
   pub(crate) focus_mgr: RefCell<FocusManager>,
-  pub(crate) running_animates: Rc<RefCell<u32>>,
+  pub(crate) running_animates: Rc<Cell<u32>>,
   /// This vector store the task to emit events. When perform layout, dispatch
   /// event and so on, some part of window may be already mutable borrowed and
   /// the user event callback may also query borrow that part, so we can't emit
@@ -52,6 +51,14 @@ pub struct Window {
   /// all task finished before current frame end.
   frame_pool: RefCell<FuturesLocalSchedulerPool>,
   shell_wnd: RefCell<Box<dyn ShellWindow>>,
+  /// A vector store the widget id pair of (parent, child). The child need to
+  /// drop after its `DelayDrop::delay_drop_until` be false or its parent
+  /// is dropped.
+  ///
+  /// This widgets it's detached from its parent, but still need to paint.
+  delay_drop_widgets: RefCell<Vec<(Option<WidgetId>, WidgetId)>>,
+  /// A hash set store the root of the subtree need to regenerate.
+  regenerating_subtree: RefCell<ahash::HashMap<WidgetId, Option<WidgetId>>>,
 }
 
 #[derive(Debug, Clone, Copy, PartialEq, Eq, PartialOrd, Hash)]
@@ -86,7 +93,7 @@ impl Window {
   pub fn processes_native_event(&self, event: WindowEvent) {
     let ratio = self.device_pixel_ratio() as f64;
     self.dispatcher.borrow_mut().dispatch(event, ratio);
-    self.emit_events();
+    self.run_frame_tasks();
   }
 
   /// Request switch the focus to next widget.
@@ -110,79 +117,83 @@ impl Window {
     self.frame_ticker.frame_tick_stream()
   }
 
-  pub fn animate_track(&self) -> AnimateTrack {
-    AnimateTrack {
-      actived: false,
-      actived_cnt: self.running_animates.clone(),
-    }
-  }
+  pub fn inc_running_animate(&self) { self.running_animates.set(self.running_animates.get() + 1); }
+
+  pub fn dec_running_animate(&self) { self.running_animates.set(self.running_animates.get() - 1); }
 
   /// Draw an image what current render tree represent.
   #[track_caller]
-  pub fn draw_frame(&self) {
-    self.emit_events();
-
-    if !self.need_draw() || self.size().is_empty() {
-      return;
-    }
-
+  pub fn draw_frame(&self) -> bool {
+    self.run_frame_tasks();
     self.frame_ticker.emit(FrameMsg::NewFrame(Instant::now()));
 
-    self.shell_wnd.borrow_mut().begin_frame();
+    let draw = self.need_draw() && !self.size().is_empty();
+    if draw {
+      self.shell_wnd.borrow_mut().begin_frame();
 
-    loop {
       self.layout();
-      self.emit_events();
-
-      // wait all frame task finished.
-      self.frame_pool.borrow_mut().run();
 
-      if !self.widget_tree.borrow().is_dirty() {
-        self.focus_mgr.borrow_mut().refresh_focus();
-        self.emit_events();
+      self.widget_tree.borrow().draw();
+      self.draw_delay_drop_widgets();
 
-        // focus refresh and event emit may cause widget tree dirty again.
-        if !self.widget_tree.borrow().is_dirty() {
-          break;
-        }
-      }
-    }
+      let surface = match AppCtx::app_theme() {
+        Theme::Full(theme) => theme.palette.surface(),
+        Theme::Inherit(_) => unreachable!(),
+      };
 
-    self.widget_tree.borrow().draw();
+      let mut shell = self.shell_wnd.borrow_mut();
+      let inner_size = shell.inner_size();
+      let paint_cmds = self.painter.borrow_mut().finish();
+      shell.draw_commands(Rect::from_size(inner_size), paint_cmds, surface);
 
-    let surface = match AppCtx::app_theme() {
-      Theme::Full(theme) => theme.palette.surface(),
-      Theme::Inherit(_) => unreachable!(),
-    };
-
-    let mut shell = self.shell_wnd.borrow_mut();
-    let inner_size = shell.inner_size();
-    let paint_cmds = self.painter.borrow_mut().finish();
-    shell.draw_commands(Rect::from_size(inner_size), paint_cmds, surface);
+      shell.end_frame();
+    }
 
-    shell.end_frame();
-    self.frame_ticker.emit(FrameMsg::Finish(Instant::now()));
     AppCtx::end_frame();
+    self.frame_ticker.emit(FrameMsg::Finish(Instant::now()));
+
+    draw
   }
 
   pub fn layout(&self) {
-    self
-      .widget_tree
-      .borrow_mut()
-      .layout(self.shell_wnd.borrow().inner_size());
+    loop {
+      self.run_frame_tasks();
 
-    self
-      .frame_ticker
-      .emit(FrameMsg::LayoutReady(Instant::now()));
+      self
+        .widget_tree
+        .borrow_mut()
+        .layout(self.shell_wnd.borrow().inner_size());
+
+      if !self.widget_tree.borrow().is_dirty() {
+        self.focus_mgr.borrow_mut().refresh_focus();
+      }
+
+      // we need to run frame tasks before we emit `FrameMsg::LayoutReady` to keep the
+      // task and event emit order.
+      if !self.widget_tree.borrow().is_dirty() {
+        self.run_frame_tasks();
+      }
+      if !self.widget_tree.borrow().is_dirty() {
+        let ready = FrameMsg::LayoutReady(Instant::now());
+        self.frame_ticker.emit(ready);
+      }
+
+      if !self.widget_tree.borrow().is_dirty() {
+        break;
+      }
+    }
   }
 
   pub fn need_draw(&self) -> bool {
-    self.widget_tree.borrow().is_dirty() || *self.running_animates.borrow() > 0
+    self.widget_tree.borrow().is_dirty()
+      || self.running_animates.get() > 0
+      // if a `pipe` widget is regenerating, need a new frame to finish it.
+      || !self.regenerating_subtree.borrow().is_empty()
   }
 
-  pub fn new(root: Widget, shell_wnd: Box<dyn ShellWindow>) -> Rc<Self> {
+  pub fn new(shell_wnd: Box<dyn ShellWindow>) -> Rc<Self> {
     let focus_mgr = RefCell::new(FocusManager::new());
-    let widget_tree = RefCell::new(WidgetTree::new());
+    let widget_tree = RefCell::new(WidgetTree::default());
     let dispatcher = RefCell::new(Dispatcher::new());
     let size = shell_wnd.inner_size();
     let mut painter = Painter::new(Rect::from_size(size));
@@ -194,21 +205,26 @@ impl Window {
       focus_mgr,
       delay_emitter: <_>::default(),
       frame_ticker: FrameTicker::default(),
-      running_animates: Rc::new(RefCell::new(0)),
-      frame_pool: RefCell::new(<_>::default()),
+      running_animates: <_>::default(),
+      frame_pool: <_>::default(),
       shell_wnd: RefCell::new(shell_wnd),
+      delay_drop_widgets: <_>::default(),
+      regenerating_subtree: <_>::default(),
     };
     let window = Rc::new(window);
     window.dispatcher.borrow_mut().init(Rc::downgrade(&window));
     window.focus_mgr.borrow_mut().init(Rc::downgrade(&window));
-    window
-      .widget_tree
-      .borrow_mut()
-      .init(root, Rc::downgrade(&window));
+    window.widget_tree.borrow_mut().init(Rc::downgrade(&window));
 
     window
   }
 
+  pub fn set_content_widget(&self, root: Widget) {
+    let build_ctx = BuildCtx::new(None, &self.widget_tree);
+    let root = root.build(&build_ctx);
+    self.widget_tree.borrow_mut().set_root(root)
+  }
+
   #[inline]
   pub fn id(&self) -> WindowId { self.shell_wnd.borrow().id() }
 
@@ -270,10 +286,63 @@ impl Window {
     self.delay_emitter.borrow_mut().push_back(e);
   }
 
+  pub(crate) fn is_in_another_regenerating(&self, wid: WidgetId) -> bool {
+    let regen = self.regenerating_subtree.borrow();
+    if regen.is_empty() {
+      return false;
+    }
+    let tree = self.widget_tree.borrow();
+    let Some(p) = wid.parent(&tree.arena) else { return false };
+    let in_another = p.ancestors(&tree.arena).any(|p| {
+      regen.get(&p).map_or(false, |to| {
+        to.map_or(true, |to| wid.ancestor_of(to, &tree.arena))
+      })
+    });
+    in_another
+  }
+
+  pub(crate) fn mark_widgets_regenerating(&self, from: WidgetId, to: Option<WidgetId>) {
+    self.regenerating_subtree.borrow_mut().insert(from, to);
+  }
+
+  pub(crate) fn remove_regenerating_mark(&self, from: WidgetId) {
+    self.regenerating_subtree.borrow_mut().remove(&from);
+  }
+
+  fn draw_delay_drop_widgets(&self) {
+    let mut delay_widgets = self.delay_drop_widgets.borrow_mut();
+    let mut painter = self.painter.borrow_mut();
+
+    delay_widgets.retain(|(parent, wid)| {
+      let tree = self.widget_tree.borrow();
+      let drop_conditional = wid
+        .assert_get(&self.widget_tree.borrow().arena)
+        .query_on_first_type(QueryOrder::OutsideFirst, |d: &DelayDrop| d.delay_drop_until)
+        .unwrap_or(true);
+      let parent_dropped = parent.map_or(false, |p| {
+        p.ancestors(&tree.arena).last() != Some(tree.root())
+      });
+      let need_drop = drop_conditional || parent_dropped;
+      if need_drop {
+        drop(tree);
+        self.widget_tree.borrow_mut().remove_subtree(*wid);
+      } else {
+        let mut painter = painter.save_guard();
+        if let Some(p) = parent {
+          let offset = tree.store.map_to_global(Point::zero(), *p, &tree.arena);
+          painter.translate(offset.x, offset.y);
+        }
+        let mut ctx = PaintingCtx::new(*wid, self.id(), &mut painter);
+        wid.paint_subtree(&mut ctx);
+      }
+      !need_drop
+    });
+  }
+
   /// Immediately emit all delay events. You should not call this method only if
   /// you want to interfere with the framework event dispatch process and know
   /// what you are doing.
-  pub fn emit_events(&self) {
+  fn emit_events(&self) {
     loop {
       let Some(e) = self.delay_emitter.borrow_mut().pop_front() else{ break};
 
@@ -286,14 +355,20 @@ impl Window {
           let e = AllLifecycle::PerformedLayout(LifecycleEvent { id, wnd_id: self.id() });
           self.emit::<LifecycleListener>(id, e);
         }
-        DelayEvent::Disposed { id, delay_drop } => {
+        DelayEvent::Disposed { id, parent } => {
           id.descendants(&self.widget_tree.borrow().arena)
             .for_each(|id| {
               let e = AllLifecycle::Disposed(LifecycleEvent { id, wnd_id: self.id() });
               self.emit::<LifecycleListener>(id, e);
             });
 
-          if !delay_drop {
+          let delay_drop = id
+            .assert_get(&self.widget_tree.borrow().arena)
+            .contain_type::<DelayDrop>();
+
+          if delay_drop {
+            self.delay_drop_widgets.borrow_mut().push((parent, id));
+          } else {
             self.widget_tree.borrow_mut().remove_subtree(id);
           }
         }
@@ -467,6 +542,22 @@ impl Window {
         (**e).borrow().is_propagation()
       });
   }
+
+  /// Run all async tasks need finished in current frame and emit all delay
+  /// events.
+  pub fn run_frame_tasks(&self) {
+    loop {
+      // wait all frame task finished.
+      self.frame_pool.borrow_mut().run();
+      // run all ready async tasks
+      AppCtx::run_until_stalled();
+      if !self.delay_emitter.borrow().is_empty() {
+        self.emit_events();
+      } else {
+        break;
+      }
+    }
+  }
 }
 
 /// Event that delay to emit, emit it when the window is not busy(nobody borrow
@@ -476,8 +567,8 @@ pub(crate) enum DelayEvent {
   Mounted(WidgetId),
   PerformedLayout(WidgetId),
   Disposed {
+    parent: Option<WidgetId>,
     id: WidgetId,
-    delay_drop: bool,
   },
   Focus(WidgetId),
   Blur(WidgetId),
diff --git a/dev-helper/src/example_framework.rs b/dev-helper/src/example_framework.rs
index 8777294bd..56b5526e6 100644
--- a/dev-helper/src/example_framework.rs
+++ b/dev-helper/src/example_framework.rs
@@ -45,8 +45,7 @@ macro_rules! example_framework {
         AppCtx::set_app_theme(material::purple::light());
       }
       let name = env!("CARGO_PKG_NAME");
-      let id = App::new_window($widget_fn().into(), Some($size));
-      AppCtx::get_window(id).unwrap().set_title(name);
+      App::new_window($widget_fn().into(), Some($size)).set_title(name);
       App::exec();
     }
   };
diff --git a/dev-helper/src/widget_test.rs b/dev-helper/src/widget_test.rs
index f43d79557..c12eb665b 100644
--- a/dev-helper/src/widget_test.rs
+++ b/dev-helper/src/widget_test.rs
@@ -345,11 +345,11 @@ macro_rules! assert_layout_result_by_path {
     ) => {
       $(
         let info = $test_wnd.layout_info_by_path(&$path).unwrap();
-        $(assert_eq!($x_expect, info.pos.x, "unexpected x");)?
-        $(assert_eq!($y_expect, info.pos.y, "unexpected y");)?
-        $(assert_eq!($width_expect, info.size.unwrap().width, "unexpected width");)?
-        $(assert_eq!($height_expect, info.size.unwrap().height, "unexpected height");)?
-        $(assert_eq!($size_expect, info.size.unwrap(), "unexpected size");)?
+        $(assert_eq!(info.pos.x, $x_expect, "unexpected x");)?
+        $(assert_eq!(info.pos.y, $y_expect, "unexpected y");)?
+        $(assert_eq!(info.size.unwrap().width, $width_expect, "unexpected width");)?
+        $(assert_eq!(info.size.unwrap().height, $height_expect, "unexpected height");)?
+        $(assert_eq!(info.size.unwrap(), $size_expect, "unexpected size");)?
         $(
           let size = info.size.unwrap();
           assert_eq!(Rect::new(info.pos, size), $rect_expect, "unexpected rect");
diff --git a/examples/counter/src/counter.rs b/examples/counter/src/counter.rs
index 58f2ac86b..92e457b61 100644
--- a/examples/counter/src/counter.rs
+++ b/examples/counter/src/counter.rs
@@ -2,19 +2,19 @@ use ribir::prelude::*;
 
 pub fn counter() -> impl Into<Widget> {
   fn_widget! {
-    let cnt = Stateful::new(0);
+    let mut cnt = Stateful::new(0);
 
     @Column {
       h_align: HAlign::Center,
       align_items: Align::Center,
       @FilledButton {
         on_tap: move |_: &mut _| *$cnt += 1,
-        @ { Label::new("Add") }
+        @{ Label::new("Add") }
       }
       @H1 { text: pipe!($cnt.to_string())  }
       @FilledButton {
         on_tap: move |_: &mut _| *$cnt += -1,
-        @ { Label::new("Sub") }
+        @{ Label::new("Sub") }
       }
     }
   }
diff --git a/examples/greet/Cargo.toml b/examples/greet/Cargo.toml
deleted file mode 100644
index 572ffc178..000000000
--- a/examples/greet/Cargo.toml
+++ /dev/null
@@ -1,21 +0,0 @@
-[package]
-authors.workspace = true
-categories.workspace = true
-description.workspace = true
-documentation.workspace = true
-edition.workspace = true
-homepage.workspace = true
-keywords.workspace = true
-license.workspace = true
-name = "greet"
-publish = false
-version.workspace = true
-
-[dependencies]
-paste.workspace = true
-# we disable `default-features`, because we want more control over testing.
-ribir = {path = "../../ribir", features = ["material", "widgets"]}
-ribir_dev_helper = {path = "../../dev-helper"}
-
-[features]
-wgpu = ["ribir/wgpu"]
diff --git a/examples/greet/README.md b/examples/greet/README.md
deleted file mode 100644
index 9e9757f49..000000000
--- a/examples/greet/README.md
+++ /dev/null
@@ -1,9 +0,0 @@
-# Greet
-
-This is just a `widget!` syntax teaching, demo No consideration to its completeness and reasonableness.
-
-
-You can run with:
-```
-cargo run --p greet
-```
diff --git a/examples/greet/src/greet.rs b/examples/greet/src/greet.rs
deleted file mode 100644
index b8cc10a68..000000000
--- a/examples/greet/src/greet.rs
+++ /dev/null
@@ -1,68 +0,0 @@
-//! This is just a `widget!` syntax teaching demo No consideration to its
-//! completeness and reasonableness.
-
-use ribir::prelude::*;
-
-pub fn greet() -> Widget {
-  widget! {
-    states { counter: Stateful::new(0) }
-    init ctx => {
-      let style = TypographyTheme::of(ctx).display_large.text.clone();
-    }
-    Column {
-      Row {
-        align_items: Align::Center,
-        Input {
-          id: input,
-          Placeholder::new("Enter the name you want to greet.")
-        }
-        FilledButton {
-          on_tap: move |_| *counter += 1,
-          Label::new({
-            let counter = counter.to_string();
-            format!("Greet!({counter})")
-          })
-        }
-      }
-      DynWidget {
-        dyns := assign_watch!(*counter > 0)
-          .stream_map(|o| o.distinct_until_changed())
-          .map(move |need_greet| {
-            let style = style.clone();
-            need_greet.then(move || {
-              widget! {
-                init ctx => {
-                  let ease_in = transitions::EASE_IN.of(ctx);
-                }
-                Row {
-                  Text { text: "Hello ", text_style: style.clone() }
-                  Text {
-                    id: greet,
-                    text: no_watch!(input.text()),
-                    text_style: style.clone()
-                  }
-                  Text { text: "!" , text_style: style }
-                }
-                Animate {
-                  id: greet_new,
-                  transition: ease_in,
-                  prop: prop!(greet.transform),
-                  from: Transform::translation(0., greet.layout_height() * 2.)
-                }
-                finally {
-                  let_watch!(*counter)
-                    .subscribe(move |_| {
-                      greet.text = input.text();
-                      input.set_text("");
-                    });
-                  let_watch!(greet.text.clone())
-                    .subscribe(move |_| greet_new.run());
-                }
-              }
-            })
-        })
-      }
-    }
-  }
-  .into()
-}
diff --git a/examples/greet/src/main.rs b/examples/greet/src/main.rs
deleted file mode 100644
index 95b602930..000000000
--- a/examples/greet/src/main.rs
+++ /dev/null
@@ -1,8 +0,0 @@
-#![feature(test)]
-
-mod greet;
-use greet::greet;
-use ribir::prelude::*;
-use ribir_dev_helper::*;
-
-example_framework!(greet, wnd_size = Size::new(640., 400.));
diff --git a/examples/todos/src/todos.rs b/examples/todos/src/todos.rs
index 3fe21d001..2be5f2cdd 100644
--- a/examples/todos/src/todos.rs
+++ b/examples/todos/src/todos.rs
@@ -8,65 +8,55 @@ struct Task {
   label: String,
 }
 #[derive(Debug)]
-struct TodoMVP {
+struct Todos {
   tasks: Vec<Task>,
+  id_gen: usize,
 }
 
-impl Compose for TodoMVP {
-  fn compose(this: State<Self>) -> Widget {
-    widget! {
-      states { this: this.into_writable(), id_gen: Stateful::new(this.state_ref().tasks.len()) }
-      init ctx => {
-        let surface_variant = Palette::of(ctx).surface_variant();
-        let text_style = TypographyTheme::of(ctx).display_large.text.clone();
-      }
-      Column {
+impl Compose for Todos {
+  fn compose(mut this: State<Self>) -> Widget {
+    fn_widget! {
+      @Column {
         padding: EdgeInsets::all(10.),
-        Text {
+        @H1 {
           margin: EdgeInsets::only_bottom(10.),
           text: "Todo",
-          text_style,
         }
-        Row {
-          Container {
-            size: Size::new(240., 30.),
-            border: Border::only_bottom(BorderSide { width:1., color: surface_variant.into() }),
-            Input {
-              id: input,
-              Placeholder::new("What do you want to do ?")
+        @{
+          let mut input = @Input { };
+          let add_task = move |_: &mut _| if !$input.text().is_empty() {
+              $this.new_task($input.text().to_string());
+              $input.set_text("");
+          };
+          @Row {
+            @Container {
+              size: Size::new(240., 30.),
+              border: {
+                let color = Palette::of(ctx!()).surface_variant().into();
+                Border::only_bottom(BorderSide { width:1., color })
+              },
+              @ $input { @{ Placeholder::new("What do you want to do ?") } }
+            }
+            @FilledButton {
+              margin: EdgeInsets::only_left(20.),
+              on_tap: add_task,
+              @{ Label::new("ADD") }
             }
-          }
-          FilledButton {
-            margin: EdgeInsets::only_left(20.),
-            on_tap: move |_| {
-              if !input.text().is_empty() {
-                let label = input.text().to_string();
-                this.tasks.push(Task {
-                  id: *id_gen,
-                  label,
-                  finished: false,
-                });
-                *id_gen += 1;
-                input.set_text("");
-              }
-            },
-            Label::new("ADD")
           }
         }
-
-        Tabs {
+        @Tabs {
           pos: Position::Top,
-          Tab {
-            TabItem { Label::new("ALL") }
-            TabPane { Self::pane(no_watch!(this), |_| true) }
+          @Tab {
+            @TabItem { @{ Label::new("ALL") } }
+            @TabPane { @{ Self::pane(this.clone_state(), |_| true) } }
           }
-          Tab {
-            TabItem { Label::new("ACTIVE") }
-            TabPane { Self::pane(no_watch!(this), |task| !task.finished) }
+          @Tab {
+            @TabItem { @{ Label::new("ACTIVE") } }
+            @TabPane { @{ Self::pane(this.clone_state(), |task| !task.finished)} }
           }
-          Tab {
-            TabItem { Label::new("DONE") }
-            TabPane { Self::pane(no_watch!(this), |task| task.finished) }
+          @Tab {
+            @TabItem { @{ Label::new("DONE") } }
+            @TabPane { @{ Self::pane(this.clone_state(), |task| task.finished) } }
           }
         }
       }
@@ -75,100 +65,86 @@ impl Compose for TodoMVP {
   }
 }
 
-impl TodoMVP {
-  fn pane(this: StatefulRef<Self>, cond: fn(&Task) -> bool) -> Widget {
-    let this = this.clone_stateful();
-    widget! {
-      states { this, mount_task_cnt: Stateful::new(0) }
-      VScrollBar {
-        Lists {
+impl Todos {
+  fn pane(mut this: Stateful<Self>, cond: fn(&Task) -> bool) -> Widget {
+    fn_widget! {
+
+      @VScrollBar { @ { pipe! {
+        let mut mount_task_cnt = Stateful::new(0);
+
+        @Lists {
           // when performed layout, means all task are mounted, we reset the mount count.
-          on_performed_layout: move |_| *mount_task_cnt = 0,
+          on_performed_layout: move |_| *$mount_task_cnt = 0,
           padding: EdgeInsets::vertical(8.),
-          DynWidget {
-            dyns: {
-              let tasks = this.tasks.clone();
-              Multi::new(
-                tasks
-                .into_iter()
-                .enumerate()
-                .filter(move |(_, task)| { cond(task) })
-                .map(move |(idx, task)| {
-                  no_watch!(Self::task(this, task, idx, mount_task_cnt))
-                })
-              )
-            }
+          @ {
+            let mut this2 = this.clone_state();
+            let task_widget_iter = $this
+              .tasks
+              .iter()
+              .enumerate()
+              .filter_map(move |(idx, task)| { cond(task).then_some(idx) })
+              .map(move |idx| {
+                let mut task = partial_state!($this2.tasks[idx]);
+                let mut key = @KeyWidget { key: $task.id, value: () };
+                let mut mount_idx = Stateful::new(0);
+
+                let mut mount_animate = @Animate {
+                  transition: @Transition {
+                    delay: pipe!(Duration::from_millis(100).mul_f32(*$mount_idx as f32)),
+                    duration: Duration::from_millis(150),
+                    easing: easing::EASE_IN,
+                  }.into_inner(),
+                  state: route_state!($key.transform),
+                  from: Transform::translation(-400., 0. ),
+                };
+                @ $key {
+                  @ListItem {
+                    on_mounted: move |_| if $key.is_enter() {
+                      *$mount_idx = *$mount_task_cnt;
+                      *$mount_task_cnt += 1;
+                      mount_animate.run();
+                    },
+                    @{ HeadlineText(Label::new($task.label.clone())) }
+                    @Leading {
+                      @{
+                        let mut checkbox = @Checkbox {
+                          checked: pipe!($task.finished),
+                          margin: EdgeInsets::vertical(4.),
+                        };
+                        watch!($checkbox.checked).subscribe(move |v| $task.finished = v);
+                        CustomEdgeWidget(checkbox.into())
+                      }
+                    }
+                    @Trailing {
+                      cursor: CursorIcon::Hand,
+                      visible: $key.mouse_hover(),
+                      on_tap: move |_| { $this2.tasks.remove(idx); },
+                      @{ svgs::CLOSE }
+                    }
+                  }
+                }
+              }).collect::<Vec<_>>();
+            Multi::new(task_widget_iter)
           }
+
         }
-      }
+      }}}
     }
     .into()
   }
 
-  fn task(
-    this: StatefulRef<Self>,
-    task: Task,
-    idx: usize,
-    mount_task_cnt: StatefulRef<i32>,
-  ) -> Widget {
-    let this = this.clone_stateful();
-    let mount_task_cnt = mount_task_cnt.clone_stateful();
-    widget! {
-      states { this, mount_task_cnt, mount_idx: Stateful::new(0) }
-      KeyWidget {
-        id: key,
-        key: Key::from(task.id),
-        value: Some(task.label.clone()),
-        ListItem {
-          id: item,
-          transform: Transform::default(),
-          on_mounted: move |_| {
-            if key.is_enter() {
-              *mount_idx = *mount_task_cnt;
-              *mount_task_cnt += 1;
-              mount_animate.run();
-            }
-          },
-          HeadlineText(Label::new(task.label.clone()))
-          Leading {
-            CustomEdgeWidget(widget! {
-              Checkbox {
-                id: checkbox,
-                checked: task.finished,
-                margin: EdgeInsets::vertical(4.),
-              }
-              finally {
-                let_watch!(checkbox.checked)
-                  .subscribe(move |v| this.tasks[idx].finished = v);
-              }
-            }.into())
-          }
-          Trailing {
-            cursor: CursorIcon::Hand,
-            visible: item.mouse_hover(),
-            on_tap: move |_| { this.tasks.remove(idx); },
-            svgs::CLOSE
-          }
-        }
-      }
-      Animate {
-        id: mount_animate,
-        transition: Transition {
-          delay: Some(Duration::from_millis(100).mul_f32((*mount_idx + 1) as f32)),
-          duration: Duration::from_millis(150),
-          easing: easing::EASE_IN,
-          repeat: None,
-        },
-        prop: prop!(item.transform),
-        from: Transform::translation(-400., 0. ),
-      }
-    }
-    .into()
+  fn new_task(&mut self, label: String) {
+    self.tasks.push(Task {
+      id: self.id_gen,
+      label,
+      finished: false,
+    });
+    self.id_gen += 1;
   }
 }
 
 pub fn todos() -> Widget {
-  TodoMVP {
+  Todos {
     tasks: vec![
       Task {
         id: 0,
@@ -186,6 +162,7 @@ pub fn todos() -> Widget {
         label: "Support Virtual Scroll".to_string(),
       },
     ],
+    id_gen: 3,
   }
   .into()
 }
diff --git a/macros/src/builtin_fields_list.rs b/macros/src/builtin_fields_list.rs
index 329e65f95..a16acfdd1 100644
--- a/macros/src/builtin_fields_list.rs
+++ b/macros/src/builtin_fields_list.rs
@@ -299,7 +299,7 @@ builtin! {
     lifecycle_stream: LifecycleSubject
   }
 
-  DelayDropWidget {
+  DelayDrop {
     #[doc= "The widget delay the drop of its child until the field delay_drop_until is false, but not affect its dispose event emit time. It's useful to ensure the disappear-animate display fully."]
     delay_drop_until: bool,
   }
diff --git a/macros/src/child_template.rs b/macros/src/child_template.rs
index 999033e80..ca89b5294 100644
--- a/macros/src/child_template.rs
+++ b/macros/src/child_template.rs
@@ -71,7 +71,7 @@ pub(crate) fn derive_child_template(input: &mut syn::DeriveInput) -> syn::Result
         impl #g_impl DeclareBuilder for #builder #g_ty {
           type Target = Self;
           #[inline]
-          fn build(self, _: &BuildCtx) -> Self { self }
+          fn build_declare(self, _: &BuildCtx) -> Self { self }
         }
 
 
diff --git a/macros/src/declare_derive.rs b/macros/src/declare_derive.rs
index 16180f3d3..b3a72dfaf 100644
--- a/macros/src/declare_derive.rs
+++ b/macros/src/declare_derive.rs
@@ -266,7 +266,7 @@ pub(crate) fn declare_derive(input: &mut syn::DeriveInput) -> syn::Result<TokenS
 
       impl #g_impl DeclareBuilder for #declarer #g_ty #g_where {
         type Target = #name #g_ty;
-        fn build(mut self, ctx: &BuildCtx) -> #name #g_ty  {
+        fn build_declare(mut self, ctx: &BuildCtx) -> #name #g_ty  {
           #(#fill_default)*
           #name {
             #(#fields_ident : #builder_values),* }
diff --git a/macros/src/declare_derive2.rs b/macros/src/declare_derive2.rs
index 671a7067e..2fb962fe0 100644
--- a/macros/src/declare_derive2.rs
+++ b/macros/src/declare_derive2.rs
@@ -28,6 +28,7 @@ struct DeclareAttr {
   custom: Option<kw::custom>,
   // field with `skip` attr, will not generate setter method and use default to init value.
   skip: Option<kw::skip>,
+  strict: Option<kw::strict>,
 }
 
 struct DeclareField<'a> {
@@ -41,6 +42,7 @@ mod kw {
   custom_keyword!(default);
   custom_keyword!(custom);
   custom_keyword!(skip);
+  custom_keyword!(strict);
   // todo: tmp code, only for compatibility.
   custom_keyword!(convert);
 }
@@ -82,6 +84,8 @@ impl Parse for DeclareAttr {
         attr.default = Some(input.parse()?);
       } else if lookahead.peek(kw::skip) {
         attr.skip = Some(input.parse()?);
+      } else if lookahead.peek(kw::strict) {
+        attr.strict = Some(input.parse()?);
       } else if lookahead.peek(kw::convert) {
         input.parse::<kw::convert>()?;
         input.parse::<token::Eq>()?;
@@ -97,6 +101,15 @@ impl Parse for DeclareAttr {
         d.set_spans(vec![rename.span().unwrap(), builtin.span().unwrap()]);
         d.emit();
       }
+      if let (Some(convert), Some(skip)) = (attr.strict.as_ref(), attr.skip.as_ref()) {
+        let mut d = Diagnostic::new(
+          Level::Error,
+          "field is marked as `skip` is not allowed to use `convert`.",
+        );
+        d.set_spans(vec![convert.span().unwrap(), skip.span().unwrap()]);
+        d.emit();
+      }
+
       if !input.is_empty() {
         input.parse::<syn::Token![,]>()?;
       }
@@ -111,16 +124,22 @@ pub(crate) fn declare_derive(input: &mut syn::DeriveInput) -> syn::Result<TokenS
   let stt = data_struct_unwrap(data, DECLARE)?;
 
   if stt.fields.is_empty() {
+    let construct = match &stt.fields {
+      Fields::Named(_) => quote!(#name {}),
+      Fields::Unnamed(_) => quote!(#name()),
+      Fields::Unit => quote!(#name),
+    };
     let tokens = quote! {
-        impl Declare2 for #name  {
-          type Builder = #name;
-          fn declare2_builder() -> Self::Builder { #name }
-        }
+      impl Declare2 for #name  {
+        type Builder = #name;
+        fn declare2_builder() -> Self::Builder { #construct }
+      }
 
-        impl DeclareBuilder for #name {
-          type Target = #name;
-          fn build(self, _: &BuildCtx) -> Self::Target { self }
-        }
+      impl DeclareBuilder for #name {
+        type Target = #name;
+        #[inline]
+        fn build_declare(self, _: &BuildCtx) -> Self::Target { self }
+      }
     };
     Ok(tokens)
   } else {
@@ -134,8 +153,6 @@ fn struct_with_fields_gen(
   generics: &syn::Generics,
   name: &syn::Ident,
 ) -> syn::Result<TokenStream> {
-  let (g_impl, g_ty, g_where) = generics.split_for_impl();
-
   let mut builder_fields = collect_filed_and_attrs(stt)?;
 
   // reverse name check.
@@ -153,16 +170,25 @@ fn struct_with_fields_gen(
       let field_name = f.field.ident.as_ref().unwrap();
       let ty = &f.field.ty;
       let set_method = f.set_method_name();
-
-      builder_methods.extend(quote! {
-        #[inline]
-        #vis fn #set_method<_M, _V>(mut self, v: _V) -> Self
-          where DeclareInit<#ty>: DeclareFrom<_V, _M>
-        {
-          self.#field_name = Some(DeclareInit::declare_from(v));
-          self
-        }
-      });
+      if f.attr.as_ref().map_or(false, |attr| attr.strict.is_some()) {
+        builder_methods.extend(quote! {
+          #[inline]
+          #vis fn #set_method(mut self, v: #ty) -> Self {
+            self.#field_name = Some(DeclareInit::Value(v));
+            self
+          }
+        });
+      } else {
+        builder_methods.extend(quote! {
+          #[inline]
+          #vis fn #set_method<_M, _V>(mut self, v: _V) -> Self
+            where DeclareInit<#ty>: DeclareFrom<_V, _M>
+          {
+            self.#field_name = Some(DeclareInit::declare_from(v));
+            self
+          }
+        });
+      }
     });
 
   // builder define
@@ -206,12 +232,9 @@ fn struct_with_fields_gen(
 
   let unzip_fields = builder_fields.iter().map(|df| {
     let field_name = df.field.ident.as_ref().unwrap();
-    let method = df.set_method_name();
+    let err = format!("Required field `{name}::{field_name}` not init");
     quote_spanned! { field_name.span() =>
-      let #field_name = self.#field_name.expect(&format!(
-        "Required field `{}::{}` not set, use method `{}` init it",
-        stringify!(#name), stringify!(#field_name), stringify!(#method)
-      )).unzip();
+      let #field_name = self.#field_name.expect(#err).unzip();
     }
   });
 
@@ -219,8 +242,15 @@ fn struct_with_fields_gen(
   let field_names2 = field_names.clone();
   let field_names3 = field_names.clone();
 
+  let (g_impl, g_ty, g_where) = generics.split_for_impl();
+  let syn::Generics {
+    lt_token,
+    params,
+    gt_token,
+    where_clause,
+  } = generics;
   let tokens = quote! {
-      #vis struct #declarer #g_impl #g_where {
+      #vis struct #declarer #lt_token #params #gt_token #where_clause {
         #(#def_fields)*
       }
 
@@ -238,24 +268,36 @@ fn struct_with_fields_gen(
 
       impl #g_impl DeclareBuilder for #declarer #g_ty #g_where {
         type Target = State<#name #g_ty>;
-        fn build(mut self, ctx: &BuildCtx) -> Self::Target {
+
+        #[inline]
+        fn build_declare(mut self, ctx: &BuildCtx) -> Self::Target {
           set_build_ctx!(ctx);
 
           #(#fill_default)*
           #(#unzip_fields)*
-          let mut _ribir = State::Stateless(#name {
+          let mut _ribir_ಠ_ಠ = State::value(#name {
             #(#field_names2 : #field_names2.0),*
           });
+          let mut _unsub_ಠ_ಠ = None;
+
           #(
             if let Some(u) = #field_names3.1 {
-              let mut _ribir2 = _ribir.clone_stateful();
-              let h = u.subscribe(move |v| _ribir2.state_ref().#field_names3 = v)
-              .unsubscribe_when_dropped();
-              _ribir.to_stateful().own_data(h);
+              let mut _ribir2 = _ribir_ಠ_ಠ.clone_writer();
+              let h = u.subscribe(move |(_, v)| _ribir2.write().#field_names3 = v);
+              _unsub_ಠ_ಠ = if let Some(u) = _unsub_ಠ_ಠ {
+                let unsub = ZipSubscription::new(u, h);
+                Some(BoxSubscription::new(unsub))
+              } else {
+                Some(h)
+              };
             }
           );*
 
-          _ribir
+          if let Some(unsub) = _unsub_ಠ_ಠ {
+            _ribir_ಠ_ಠ.as_stateful().unsubscribe_on_drop(unsub);
+          }
+
+          _ribir_ಠ_ಠ
         }
       }
   };
diff --git a/macros/src/declare_obj.rs b/macros/src/declare_obj.rs
index 47cf5de54..e02c38b62 100644
--- a/macros/src/declare_obj.rs
+++ b/macros/src/declare_obj.rs
@@ -1,23 +1,20 @@
 use crate::{
   rdl_macro::{DeclareField, RdlParent, StructLiteral},
-  widget_macro::{ribir_variable, WIDGETS, WIDGET_OF_BUILTIN_FIELD},
+  widget_macro::{WIDGETS, WIDGET_OF_BUILTIN_FIELD},
 };
 use inflector::Inflector;
 use proc_macro2::{Span, TokenStream};
-use quote::quote;
-use quote::{quote_spanned, ToTokens};
+use quote::{quote, quote_spanned, ToTokens};
+use smallvec::smallvec;
 use smallvec::SmallVec;
-use syn::{
-  parse_str,
-  spanned::Spanned,
-  token::{Brace, Comma, Paren},
-  Ident, Macro, Path,
-};
+use syn::{parse_str, spanned::Spanned, token::Brace, Ident, Macro, Path};
 
 pub struct DeclareObj<'a> {
-  this: ObjNode<'a>,
   span: Span,
-  builtin: ahash::HashMap<&'static str, SmallVec<[&'a DeclareField; 1]>>,
+  /// if declare a builtin widget, this is None. For example:
+  ///   `@Margin { margin: ... }`
+  this: Option<ObjNode<'a>>,
+  builtin: Vec<(&'static str, SmallVec<[&'a DeclareField; 1]>)>,
   children: &'a Vec<Macro>,
 }
 enum ObjNode<'a> {
@@ -32,144 +29,151 @@ enum ObjNode<'a> {
 impl<'a> DeclareObj<'a> {
   pub fn from_literal(mac: &'a StructLiteral) -> Result<Self, TokenStream> {
     let StructLiteral { parent, brace, fields, children } = mac;
-    let mut builtin: ahash::HashMap<_, SmallVec<[&DeclareField; 1]>> = <_>::default();
-    let span = match parent {
-      RdlParent::Type(ty) => ty.span(),
-      RdlParent::Var(name) => name.span(),
-    };
-    let span = span.join(brace.span).unwrap();
+    let mut builtin: Vec<(&'static str, SmallVec<[&'a DeclareField; 1]>)> = vec![];
 
-    let this = match parent {
-      RdlParent::Type(ty) => {
-        let mut self_fields = SmallVec::default();
-        for f in fields {
-          if let Some(ty) = WIDGET_OF_BUILTIN_FIELD
-            .get(f.member.to_string().as_str())
-            .filter(|builtin_ty| !ty.is_ident(builtin_ty))
-          {
-            builtin.entry(*ty).or_default().push(f);
-          } else {
-            self_fields.push(f)
-          }
+    let mut self_fields = SmallVec::default();
+    for f in fields {
+      if let Some(ty) = WIDGET_OF_BUILTIN_FIELD.get(f.member.to_string().as_str()) {
+        if let Some((_, fields)) = builtin.iter_mut().find(|(ty_name, _)| ty_name == ty) {
+          fields.push(f);
+        } else {
+          builtin.push((*ty, smallvec![f]));
         }
-        ObjNode::Obj { ty, fields: self_fields, span }
+      } else {
+        self_fields.push(f);
       }
-      RdlParent::Var(name) => {
+    }
+
+    fn invalid_member_err(fields: &[&DeclareField], err_msg: &str) -> Result<(), TokenStream> {
+      if fields.is_empty() {
+        Ok(())
+      } else {
+        let mut err_tokens = quote! {};
         for f in fields {
-          if let Some(ty) = WIDGET_OF_BUILTIN_FIELD.get(f.member.to_string().as_str()) {
-            builtin.entry(*ty).or_default().push(f);
-          } else {
-            return Err(quote_spanned! { f.span() =>
-              compile_error!("Not allow to declare a field of a variable parent.")
-            });
-          }
+          quote_spanned! { f.member.span() => #err_msg }.to_tokens(&mut err_tokens)
         }
-        ObjNode::Var(name)
+        Err(err_tokens)
       }
-    };
+    }
 
-    Ok(Self { this, span, builtin, children })
+    match parent {
+      RdlParent::Type(ty) => {
+        let span = ty.span().join(brace.span).unwrap();
+        if WIDGETS.iter().any(|w| ty.is_ident(w.ty)) {
+          invalid_member_err(
+            &self_fields,
+            &format!("not a valid member of {}", ty.to_token_stream()),
+          )?;
+          Ok(Self { this: None, span, builtin, children })
+        } else {
+          let this = Some(ObjNode::Obj { ty, fields: self_fields, span });
+          Ok(Self { this, span, builtin, children })
+        }
+      }
+      RdlParent::Var(name) => {
+        invalid_member_err(
+          &self_fields,
+          "only allow to declare builtin fields in a variable parent.",
+        )?;
+        let this = Some(ObjNode::Var(name));
+        let span = name.span().join(brace.span).unwrap();
+        Ok(Self { this, span, builtin, children })
+      }
+    }
   }
 }
 
 impl<'a> ToTokens for DeclareObj<'a> {
   fn to_tokens(&self, tokens: &mut TokenStream) {
-    let Self { this, span, builtin, children } = self;
+    Brace(self.span).surround(tokens, |tokens| {
+      match &self.this {
+        Some(this @ ObjNode::Obj { span, .. }) => {
+          // declare the host widget before builtin widget and children.
+          // so that we can use variable if it moved in builtin widget and children.
+          // this is consistent with the user's declaration.
 
-    // if children is empty, we declare a `FatObj`, so it's can be used and
-    // referenced by others, otherwise directly composed.
-
-    if children.is_empty() && builtin.is_empty() {
-      quote_spanned! { *span => FatObj::new(#this) }.to_tokens(tokens)
-    } else {
-      Brace::default().surround(tokens, |tokens| {
-        let mut builtin_names = vec![];
-        for (ty_str, fields) in builtin {
-          // 'b is live longer than 'a, safe convert, but we can't directly convert
-          // `SmallVec<[&'b DeclareField; 1]>` to `SmallVec<[&'a DeclareField;
-          // 1]>`, because `SmallVec<T>` is invariant over `T`.
-          fn shorter_lifetime<'a, 'b: 'a>(
-            fields: SmallVec<[&'b DeclareField; 1]>,
-          ) -> SmallVec<[&'a DeclareField; 1]> {
-            unsafe { std::mem::transmute(fields.clone()) }
-          }
-          let fields = shorter_lifetime(fields.clone());
-
-          let builtin_span = fields[0].span();
-          let ty = parse_str::<Path>(ty_str).unwrap();
-          let obj = ObjNode::Obj { ty: &ty, span: builtin_span, fields };
-
-          let snaked_ty_str = ty_str.to_snake_case();
-          let name = Ident::new(&snaked_ty_str, builtin_span);
-          quote_spanned! { builtin_span => let #name = #obj; }.to_tokens(tokens);
-          builtin_names.push(name);
+          quote_spanned! { *span => let _ribir_ಠ_ಠ = #this; }.to_tokens(tokens);
+          let name = Ident::new("_ribir_ಠ_ಠ", self.span);
+          self.compose_builtin_and_children(&name, tokens)
         }
-
-        let mut children_names = vec![];
-        for (i, c) in children.iter().enumerate() {
-          let child = ribir_variable(&format!("child_{i}"), c.span());
-          quote_spanned! { c.span() => let #child = #c; }.to_tokens(tokens);
-          children_names.push(child)
+        Some(ObjNode::Var(var)) => self.compose_builtin_and_children(var, tokens),
+        None => {
+          let (builtin_names, children) = self.declare_builtin_objs_and_children(tokens);
+          let built_obj = self.to_builtin_obj(builtin_names);
+          quote_spanned! { self.span => #built_obj #(.with_child(#children, ctx!()))* }
+            .to_tokens(tokens)
         }
+      }
+    })
+  }
+}
 
-        if children.is_empty() {
-          let builtin_init = builtin_names
-            .iter()
-            .map(|name| Ident::new(&format!("with_{name}"), name.span()));
+impl<'a> DeclareObj<'a> {
+  /// declare the builtin inner widgets, and return the name of them.
+  fn declare_builtin_objs_and_children(
+    &self,
+    tokens: &mut TokenStream,
+  ) -> (SmallVec<[Ident; 1]>, SmallVec<[Ident; 1]>) {
+    let mut builtin_names = smallvec![];
+    for (ty_str, fields) in &self.builtin {
+      // 'b is live longer than 'a, safe convert, but we can't directly convert
+      // `SmallVec<[&'b DeclareField; 1]>` to `SmallVec<[&'a DeclareField;
+      // 1]>`, because `SmallVec<T>` is invariant over `T`.
+      fn shorter_lifetime<'a, 'b: 'a>(
+        fields: SmallVec<[&'b DeclareField; 1]>,
+      ) -> SmallVec<[&'a DeclareField; 1]> {
+        unsafe { std::mem::transmute(fields.clone()) }
+      }
+      let fields = shorter_lifetime(fields.clone());
 
-          quote_spanned! {
-            *span =>FatObj::new(#this)#(.#builtin_init(#builtin_names))*
-          }
-          .to_tokens(tokens);
-        } else {
-          // todo: tmp code, we should use FatObj to compose builtin widgets in every
-          // where, so we can keep the builtin widget compose order consistent.
-          builtin_names.sort_by_key(|name| {
-            WIDGETS
-              .iter()
-              .position(|b| *name == b.ty.to_snake_case())
-              .unwrap()
-          });
-          if !builtin.is_empty() {
-            let first = &builtin_names[0];
-            let rest_builtin = &builtin_names[1..];
+      let builtin_span = fields[0].span();
+      let ty = parse_str::<Path>(ty_str).unwrap();
+      let obj = ObjNode::Obj { ty: &ty, span: builtin_span, fields };
 
-            recursive_compose_with(first, rest_builtin.iter(), tokens, |tokens| {
-              quote_spanned! { *span =>
-                #this #(.with_child(#children_names, ctx!()))*
-              }
-              .to_tokens(tokens)
-            });
-          } else {
-            quote_spanned! { *span =>
-              #this #(.with_child(#children_names, ctx!()))*
-            }
-            .to_tokens(tokens)
-          }
-        }
-      });
+      let snaked_ty_str = ty_str.to_snake_case();
+      let name = Ident::new(&snaked_ty_str, builtin_span);
+      quote_spanned! { builtin_span => let #name = #obj; }.to_tokens(tokens);
+      builtin_names.push(name);
+    }
+    let mut children_names = smallvec![];
+    for (i, c) in self.children.iter().enumerate() {
+      let child = Ident::new(&format!("_child_{i}_ಠ_ಠ"), c.span());
+      quote_spanned! { c.span() => let #child = #c; }.to_tokens(tokens);
+      children_names.push(child)
     }
+
+    (builtin_names, children_names)
   }
-}
 
-fn recursive_compose_with(
-  p: impl ToTokens,
-  mut child_chain: impl Iterator<Item = impl ToTokens>,
-  tokens: &mut TokenStream,
-  leaf: impl FnOnce(&mut TokenStream),
-) {
-  p.to_tokens(tokens);
-  quote_spanned! { p.span() => .with_child}.to_tokens(tokens);
-  Paren(p.span()).surround(tokens, |tokens| {
-    let child = child_chain.next();
-    if let Some(c) = child {
-      recursive_compose_with(c, child_chain, tokens, leaf)
+  /// compose the builtin objs as `BuiltinObj`
+  fn to_builtin_obj(&self, builtin_names: SmallVec<[Ident; 1]>) -> TokenStream {
+    if builtin_names.is_empty() {
+      quote_spanned! { self.span => BuiltinObj::default() }
     } else {
-      leaf(tokens)
+      let builtin_init = builtin_names
+        .iter()
+        .map(|name| Ident::new(&format!("set_builtin_{name}"), name.span()));
+      quote_spanned! { self.span => BuiltinObj::default()#(.#builtin_init(#builtin_names))* }
     }
-    Comma::default().to_tokens(tokens);
-    quote! { ctx!() }.to_tokens(tokens);
-  });
+  }
+
+  fn compose_builtin_and_children(&self, var: &Ident, tokens: &mut TokenStream) {
+    let (builtin_names, children) = self.declare_builtin_objs_and_children(tokens);
+    // if builtin is empty and children is not empty, we needn't to create a
+    // `FatObj`, because not support to use the builtin widget in this case.
+    if builtin_names.is_empty() && !children.is_empty() {
+      quote_spanned! { self.span =>
+        #var #(.with_child(#children, ctx!()))*
+      }
+      .to_tokens(tokens);
+    } else {
+      let built_obj = self.to_builtin_obj(builtin_names);
+      quote_spanned! { self.span =>
+        FatObj::new(#var, #built_obj)#(.with_child(#children, ctx!()))*
+      }
+      .to_tokens(tokens)
+    }
+  }
 }
 
 impl<'a> ToTokens for ObjNode<'a> {
@@ -178,7 +182,7 @@ impl<'a> ToTokens for ObjNode<'a> {
       Self::Obj { ty, span, fields } => {
         quote_spanned! { *span => #ty::declare2_builder() }.to_tokens(tokens);
         fields.iter().for_each(|f| f.to_tokens(tokens));
-        tokens.extend(quote_spanned! { *span => .build(ctx!()) });
+        tokens.extend(quote_spanned! { *span => .build_declare(ctx!()) });
       }
       Self::Var(var) => var.to_tokens(tokens),
     }
diff --git a/macros/src/fn_widget_macro.rs b/macros/src/fn_widget_macro.rs
index 20159c9d5..6a41786ab 100644
--- a/macros/src/fn_widget_macro.rs
+++ b/macros/src/fn_widget_macro.rs
@@ -1,28 +1,27 @@
+use crate::{ok, pipe_macro::BodyExpr, symbol_process::symbol_to_macro};
+use proc_macro::TokenStream as TokenStream1;
+use proc_macro2::TokenStream;
 use quote::{quote, ToTokens};
-use syn::{
-  fold::Fold,
-  parse::{Parse, ParseStream},
-  Stmt,
-};
+use syn::{fold::Fold, parse_macro_input, Stmt};
 
-use crate::symbol_process::DollarRefs;
+use crate::symbol_process::DollarRefsCtx;
 
-pub struct FnWidgetMacro {
-  stmts: Vec<Stmt>,
-}
+pub struct FnWidgetMacro(Vec<Stmt>);
 
-impl Parse for FnWidgetMacro {
-  fn parse(input: ParseStream) -> syn::Result<Self> {
-    let stmts = syn::Block::parse_within(input)?;
-    let mut refs = DollarRefs::default();
-    let stmts = stmts.into_iter().map(|s| refs.fold_stmt(s)).collect();
-    Ok(Self { stmts })
+impl FnWidgetMacro {
+  pub(crate) fn gen_code(input: TokenStream, refs_ctx: &mut DollarRefsCtx) -> TokenStream1 {
+    let input = ok!(symbol_to_macro(TokenStream1::from(input)));
+    let body = parse_macro_input!(input as BodyExpr);
+    refs_ctx.new_dollar_scope(true);
+    let stmts = body.0.into_iter().map(|s| refs_ctx.fold_stmt(s)).collect();
+    let _ = refs_ctx.pop_dollar_scope(true);
+    FnWidgetMacro(stmts).to_token_stream().into()
   }
 }
 
 impl ToTokens for FnWidgetMacro {
   fn to_tokens(&self, tokens: &mut proc_macro2::TokenStream) {
-    let Self { stmts } = self;
+    let Self(stmts) = self;
     quote! {
       FnWidget::new(move |ctx: &BuildCtx| {
         set_build_ctx!(ctx);
diff --git a/macros/src/lib.rs b/macros/src/lib.rs
index f822fc1d9..615b9160a 100644
--- a/macros/src/lib.rs
+++ b/macros/src/lib.rs
@@ -9,8 +9,8 @@ mod util;
 mod widget_macro;
 use fn_widget_macro::FnWidgetMacro;
 use proc_macro::TokenStream;
-use quote::{quote, ToTokens};
-use symbol_process::symbol_to_macro;
+use quote::quote;
+use symbol_process::DollarRefsCtx;
 use syn::{parse_macro_input, DeriveInput};
 use widget_macro::gen_widget_macro;
 mod child_template;
@@ -18,9 +18,10 @@ mod fn_widget_macro;
 mod pipe_macro;
 mod rdl_macro;
 mod watch_macro;
+mod writer_map_macro;
 pub(crate) use rdl_macro::*;
 
-use crate::pipe_macro::PipeExpr;
+use crate::pipe_macro::PipeMacro;
 use crate::watch_macro::WatchMacro;
 pub(crate) mod declare_obj;
 pub(crate) mod symbol_process;
@@ -33,13 +34,23 @@ pub(crate) const ASSIGN_WATCH_MACRO_NAME: &str = "assign_watch";
 pub(crate) const LET_WATCH_MACRO_NAME: &str = "let_watch";
 pub(crate) const PROP_MACRO_NAME: &str = "prop";
 
+macro_rules! ok {
+  ($e: expr) => {
+    match $e {
+      Ok(ok) => ok,
+      Err(err) => return err.into(),
+    }
+  };
+}
+pub(crate) use ok;
+
 #[proc_macro_derive(SingleChild)]
 pub fn single_marco_derive(input: TokenStream) -> TokenStream {
   let input = parse_macro_input!(input as DeriveInput);
   let (impl_generics, ty_generics, where_clause) = input.generics.split_for_impl();
   let name = input.ident;
   quote! {
-      impl #impl_generics SingleChild for #name #ty_generics #where_clause {}
+    impl #impl_generics SingleChild for #name #ty_generics #where_clause {}
   }
   .into()
 }
@@ -50,7 +61,7 @@ pub fn multi_macro_derive(input: TokenStream) -> TokenStream {
   let (impl_generics, ty_generics, where_clause) = input.generics.split_for_impl();
   let name = input.ident;
   quote! {
-      impl #impl_generics MultiChild for #name #ty_generics #where_clause {}
+    impl #impl_generics MultiChild for #name #ty_generics #where_clause {}
   }
   .into()
 }
@@ -132,13 +143,7 @@ pub fn widget(input: TokenStream) -> TokenStream { gen_widget_macro(input, None)
 ///   like: `let row = rdl!{ Widget::new(Void) };`
 #[proc_macro]
 pub fn rdl(input: TokenStream) -> TokenStream {
-  symbol_to_macro(input).map_or_else(
-    |err| err,
-    |input| {
-      let declare = parse_macro_input! { input as RdlBody };
-      declare.to_token_stream().into()
-    },
-  )
+  RdlMacro::gen_code(input.into(), &mut DollarRefsCtx::top_level())
 }
 
 /// The `fn_widget` is a macro that create a widget from a function widget from
@@ -147,15 +152,20 @@ pub fn rdl(input: TokenStream) -> TokenStream {
 /// use to expression a state reference of `name`.
 #[proc_macro]
 pub fn fn_widget(input: TokenStream) -> TokenStream {
-  symbol_to_macro(input).map_or_else(
-    |err| err,
-    |input| {
-      let widget_macro = parse_macro_input!(input as FnWidgetMacro);
-      widget_macro.to_token_stream().into()
-    },
-  )
+  // if input.to_string().contains("$child.layout_size()") {
+  //   println!(
+  //     "gen code\n  {}",
+  //     FnWidgetMacro::gen_code(input.clone().into(), &mut
+  // DollarRefsCtx::top_level()).to_string()   )
+  // }
+  FnWidgetMacro::gen_code(input.into(), &mut DollarRefsCtx::top_level())
 }
 
+/// This macro just return the input token stream. It's do nothing but help
+/// `ribir` mark that a macro has been expanded.
+#[proc_macro]
+pub fn ribir_expanded_ಠ_ಠ(input: TokenStream) -> TokenStream { input }
+
 /// set the `BuildCtx` to a special variable `_ctx_ಠ_ಠ`, so the user can use
 /// `ctx!` to access it.
 #[proc_macro]
@@ -180,33 +190,32 @@ pub fn ctx(input: TokenStream) -> TokenStream {
 /// to its modify.
 #[proc_macro]
 pub fn pipe(input: TokenStream) -> TokenStream {
-  symbol_to_macro(input).map_or_else(
-    |err| err,
-    |input| {
-      let expr = parse_macro_input! { input as PipeExpr };
-      expr.to_token_stream().into()
-    },
-  )
+  PipeMacro::gen_code(input.into(), &mut DollarRefsCtx::top_level())
 }
 
 /// `watch!` macro use to convert a expression to a `Observable` stream. Use the
 /// `$` mark the state reference and auto subscribe to its modify.
 #[proc_macro]
 pub fn watch(input: TokenStream) -> TokenStream {
-  symbol_to_macro(input).map_or_else(
-    |err| err,
-    |input| {
-      let expr = parse_macro_input! { input as WatchMacro };
-      expr.to_token_stream().into()
-    },
-  )
+  WatchMacro::gen_code(input.into(), &mut DollarRefsCtx::top_level())
+}
+
+/// macro split a new writer from a state writer. For example,
+/// `split_writer!($label.visible);` will return a writer of `bool` that is
+/// partial of the `Visibility`. This macros is a convenient way for
+/// `StateWriter::split_writer`
+#[proc_macro]
+pub fn split_writer(input: TokenStream) -> TokenStream {
+  writer_map_macro::gen_split_path_writer(input.into(), &mut DollarRefsCtx::top_level())
 }
 
-/// The macro to use a state as its StateRef. Transplanted from the `$`.
+/// macro map a write to another state write. For example,
+/// `map_writer!($label.visible);` will return a writer of `bool` that is
+/// partial of the `Visibility`. This macros is a convenient way for
+/// `StateWriter::map_writer`
 #[proc_macro]
-pub fn _dollar_ಠ_ಠ(input: TokenStream) -> TokenStream {
-  let name = parse_macro_input! { input as syn::Ident };
-  quote! { #name.state_ref() }.into()
+pub fn map_writer(input: TokenStream) -> TokenStream {
+  writer_map_macro::gen_map_path_writer(input.into(), &mut DollarRefsCtx::top_level())
 }
 
 #[proc_macro]
diff --git a/macros/src/pipe_macro.rs b/macros/src/pipe_macro.rs
index b4fba7708..ebc59462b 100644
--- a/macros/src/pipe_macro.rs
+++ b/macros/src/pipe_macro.rs
@@ -1,42 +1,44 @@
-use crate::symbol_process::DollarRefs;
+use crate::symbol_process::{not_subscribe_anything, DollarRefsCtx, DollarRefsScope};
+use crate::{ok, symbol_process::symbol_to_macro};
+use proc_macro::TokenStream as TokenStream1;
+use proc_macro2::TokenStream;
 use quote::{quote, ToTokens};
+use syn::fold::Fold;
 use syn::{
-  fold::Fold,
   parse::{Parse, ParseStream},
+  parse_macro_input,
+  spanned::Spanned,
   Stmt,
 };
 
-pub(crate) struct PipeExpr {
-  refs: DollarRefs,
+pub(crate) struct BodyExpr(pub(crate) Vec<Stmt>);
+pub(crate) struct PipeMacro {
+  refs: DollarRefsScope,
   expr: Vec<Stmt>,
 }
 
-impl Parse for PipeExpr {
-  fn parse(input: ParseStream) -> syn::Result<Self> {
-    let (refs, stmts) = fold_expr_as_in_closure(input)?;
-    Ok(Self { refs, expr: stmts })
+impl PipeMacro {
+  pub fn gen_code(input: TokenStream, refs_ctx: &mut DollarRefsCtx) -> TokenStream1 {
+    let span = input.span();
+    let input = ok!(symbol_to_macro(TokenStream1::from(input)));
+    let expr = parse_macro_input! { input as BodyExpr };
+
+    refs_ctx.new_dollar_scope(true);
+    let expr = expr.0.into_iter().map(|s| refs_ctx.fold_stmt(s)).collect();
+    let refs = refs_ctx.pop_dollar_scope(true);
+    if refs.is_empty() {
+      not_subscribe_anything(span).into()
+    } else {
+      PipeMacro { refs, expr }.to_token_stream().into()
+    }
   }
 }
 
-pub fn fold_expr_as_in_closure(input: ParseStream) -> syn::Result<(DollarRefs, Vec<Stmt>)> {
-  let mut refs = DollarRefs::default();
-  refs.in_capture += 1;
-  let stmts = syn::Block::parse_within(input)?;
-  let stmts = stmts.into_iter().map(|s| refs.fold_stmt(s)).collect();
-  refs.in_capture -= 1;
-  if refs.is_empty() {
-    let err = syn::Error::new(
-      input.span(),
-      "expression not subscribe anything, it must contain at least one $",
-    );
-    Err(err)
-  } else {
-    refs.dedup();
-    Ok((refs, stmts))
-  }
+impl Parse for BodyExpr {
+  fn parse(input: ParseStream) -> syn::Result<Self> { Ok(Self(syn::Block::parse_within(input)?)) }
 }
 
-impl ToTokens for PipeExpr {
+impl ToTokens for PipeMacro {
   fn to_tokens(&self, tokens: &mut proc_macro2::TokenStream) {
     let Self { refs, expr } = self;
 
@@ -46,13 +48,15 @@ impl ToTokens for PipeExpr {
       quote! {{
         #refs
         let upstream = #upstream;
+        let _ctx_handle_ಠ_ಠ = ctx!().handle();
         let mut expr_value = move |ctx!(): &BuildCtx<'_>| { #(#expr)* };
-        let _ctx_handle = ctx!().handle();
-
         Pipe::new(
           expr_value(ctx!()),
           upstream
-            .filter_map(move |_| _ctx_handle.with_ctx(&mut expr_value))
+            .filter_map(move |scope| _ctx_handle_ಠ_ಠ
+              .with_ctx(&mut expr_value)
+              .map(|v| (scope, v))
+            )
             .box_it()
         )
       }}
@@ -64,7 +68,7 @@ impl ToTokens for PipeExpr {
         let mut expr_value = move || { #(#expr)* };
         Pipe::new(
           expr_value(),
-          upstream.map(move |_| expr_value()).box_it()
+          upstream.map(move |scope| (scope, expr_value())).box_it()
         )
       }}
       .to_tokens(tokens)
diff --git a/macros/src/rdl_macro.rs b/macros/src/rdl_macro.rs
index 9a7140796..fade30cef 100644
--- a/macros/src/rdl_macro.rs
+++ b/macros/src/rdl_macro.rs
@@ -1,3 +1,9 @@
+use crate::{
+  declare_obj::DeclareObj,
+  ok,
+  symbol_process::{kw, symbol_to_macro, DollarRefsCtx},
+};
+use proc_macro::TokenStream as TokenStream1;
 use proc_macro2::{Span, TokenStream};
 use quote::{quote_spanned, ToTokens};
 use std::collections::HashSet;
@@ -5,19 +11,14 @@ use syn::{
   braced,
   fold::Fold,
   parse::{Parse, ParseBuffer, ParseStream},
-  parse_quote,
+  parse_macro_input, parse_quote,
   punctuated::Punctuated,
   spanned::Spanned,
   token::{At, Bang, Brace, Colon, Comma, Dollar},
   Expr, Ident, Macro, Path, Result as SynResult, Stmt,
 };
 
-use crate::{
-  declare_obj::DeclareObj,
-  symbol_process::{kw, DollarRefs},
-};
-
-pub enum RdlBody {
+pub enum RdlMacro {
   Literal(StructLiteral),
   /// Declare an expression as a object, like `rdl! { Widget::new(...) }`
   ExprObj {
@@ -55,17 +56,44 @@ pub struct DeclareField {
   pub value: Expr,
 }
 
-impl Parse for RdlBody {
+impl RdlMacro {
+  pub fn gen_code(input: TokenStream, refs: &mut DollarRefsCtx) -> TokenStream1 {
+    let input = ok!(symbol_to_macro(TokenStream1::from(input)));
+
+    match parse_macro_input! { input as RdlMacro } {
+      RdlMacro::Literal(mut l) => {
+        let fields = l.fields.into_iter().map(|mut f: DeclareField| {
+          f.value = refs.fold_expr(f.value);
+          f
+        });
+        l.fields = fields.collect();
+        l.children = l.children.into_iter().map(|m| refs.fold_macro(m)).collect();
+
+        let obj = ok!(DeclareObj::from_literal(&l));
+        obj.to_token_stream().into()
+      }
+      RdlMacro::ExprObj { span, stmts } => {
+        let stmts = stmts.into_iter().map(|s| refs.fold_stmt(s));
+        if stmts.len() > 1 {
+          quote_spanned! { span => { #(#stmts)* }}.into()
+        } else {
+          quote_spanned! { span => #(#stmts)* }.into()
+        }
+      }
+    }
+  }
+}
+
+impl Parse for RdlMacro {
   fn parse(input: ParseStream) -> SynResult<Self> {
     let fork = input.fork();
     if fork.parse::<RdlParent>().is_ok() && fork.peek(Brace) {
-      Ok(RdlBody::Literal(input.parse()?))
+      Ok(RdlMacro::Literal(input.parse()?))
     } else {
-      let span = input.span();
-      let stmts = syn::Block::parse_within(input)?;
-      let mut refs = DollarRefs::default();
-      let stmts = stmts.into_iter().map(|s| refs.fold_stmt(s)).collect();
-      Ok(RdlBody::ExprObj { span, stmts })
+      Ok(RdlMacro::ExprObj {
+        span: input.span(),
+        stmts: syn::Block::parse_within(input)?,
+      })
     }
   }
 }
@@ -131,34 +159,13 @@ impl Parse for DeclareField {
     let value = if colon_tk.is_none() {
       parse_quote!(#member)
     } else {
-      let mut refs = DollarRefs::default();
-      refs.fold_expr(input.parse()?)
+      input.parse()?
     };
 
     Ok(DeclareField { member, colon_tk, value })
   }
 }
 
-impl ToTokens for RdlBody {
-  fn to_tokens(&self, tokens: &mut TokenStream) {
-    match self {
-      RdlBody::Literal(l) => match DeclareObj::from_literal(l) {
-        Ok(declare) => declare.to_tokens(tokens),
-        Err(err) => err.to_tokens(tokens),
-      },
-      RdlBody::ExprObj { span, stmts } => {
-        if stmts.len() > 1 {
-          Brace(*span).surround(tokens, |tokens| {
-            stmts.iter().for_each(|s| s.to_tokens(tokens));
-          })
-        } else {
-          stmts.iter().for_each(|s| s.to_tokens(tokens));
-        }
-      }
-    }
-  }
-}
-
 impl ToTokens for DeclareField {
   fn to_tokens(&self, tokens: &mut TokenStream) {
     let DeclareField { member, value, .. } = self;
diff --git a/macros/src/symbol_process.rs b/macros/src/symbol_process.rs
index 51519bb9e..0dc82e890 100644
--- a/macros/src/symbol_process.rs
+++ b/macros/src/symbol_process.rs
@@ -1,22 +1,33 @@
-use crate::widget_macro::{
-  ribir_suffix_variable, WIDGET_OF_BUILTIN_FIELD, WIDGET_OF_BUILTIN_METHOD,
+use crate::fn_widget_macro::FnWidgetMacro;
+use crate::pipe_macro::PipeMacro;
+use crate::rdl_macro::RdlMacro;
+use crate::writer_map_macro::{gen_map_path_writer, gen_split_path_writer};
+use crate::{
+  watch_macro::WatchMacro,
+  widget_macro::{ribir_suffix_variable, WIDGET_OF_BUILTIN_FIELD, WIDGET_OF_BUILTIN_METHOD},
 };
 use inflector::Inflector;
-use proc_macro2::{Ident, TokenStream};
+use proc_macro2::{Ident, Span, TokenStream};
 use quote::{quote, quote_spanned, ToTokens};
-use smallvec::SmallVec;
+use smallvec::{smallvec, SmallVec};
 use syn::{
   fold::Fold,
   parse::{Parse, ParseStream},
-  parse_quote,
   spanned::Spanned,
   token::Dollar,
   Expr, ExprField, ExprMethodCall, Macro, Member,
 };
+use syn::{parse_quote, parse_quote_spanned};
 
 pub const KW_DOLLAR_STR: &str = "_dollar_ಠ_ಠ";
 pub const KW_CTX: &str = "ctx";
 pub const KW_RDL: &str = "rdl";
+pub const KW_PIPE: &str = "pipe";
+pub const KW_WATCH: &str = "watch";
+pub const KW_FN_WIDGET: &str = "fn_widget";
+pub const KW_SPLIT_WRITER: &str = "split_writer";
+pub const KW_MAP_WRITER: &str = "map_writer";
+
 pub use tokens_pre_process::*;
 
 pub mod kw {
@@ -24,18 +35,34 @@ pub mod kw {
   syn::custom_keyword!(rdl);
 }
 
+#[derive(Hash, PartialEq, Eq, Debug, Clone)]
+pub struct BuiltinInfo {
+  pub(crate) host: Ident,
+  pub(crate) member: Ident,
+}
+
 #[derive(Hash, PartialEq, Eq, Debug, Clone)]
 pub struct DollarRef {
   pub name: Ident,
-  pub builtin_shadow: Option<Expr>,
+  pub builtin: Option<BuiltinInfo>,
+  pub write: bool,
 }
-#[derive(Default)]
-pub struct DollarRefs {
+#[derive(Debug)]
+pub struct DollarRefsCtx {
+  scopes: SmallVec<[DollarRefsScope; 1]>,
+  // the head stack index of the variable stack for every capture level.
+  capture_level_heads: SmallVec<[usize; 1]>,
+  variable_stacks: Vec<Vec<Ident>>,
+}
+
+#[derive(Debug, Default)]
+pub struct DollarRefsScope {
   refs: SmallVec<[DollarRef; 1]>,
-  ctx_used: bool,
-  pub in_capture: usize,
+  used_ctx: bool,
 }
 
+pub struct StackGuard<'a>(&'a mut DollarRefsCtx);
+
 mod tokens_pre_process {
 
   use proc_macro::{TokenTree, *};
@@ -63,7 +90,9 @@ mod tokens_pre_process {
 
   /// Convert `@` and `$` symbol to a `rdl!` or `_dollar_ಠ_ಠ!` macro, make it
   /// conform to Rust syntax
-  pub fn symbol_to_macro(input: TokenStream) -> Result<TokenStream, TokenStream> {
+  pub fn symbol_to_macro(
+    input: impl IntoIterator<Item = TokenTree>,
+  ) -> Result<TokenStream, TokenStream> {
     let mut iter = input.into_iter();
     let mut tokens = vec![];
 
@@ -131,7 +160,6 @@ mod tokens_pre_process {
             None => return dollar_err(p.span()),
           };
         }
-
         Some(TokenTree::Group(mut g)) => {
           // not process symbol in macro, because it's maybe as part of the macro syntax.
           if !in_macro(&tokens) {
@@ -157,12 +185,82 @@ mod tokens_pre_process {
   }
 }
 
-impl Fold for DollarRefs {
+impl Fold for DollarRefsCtx {
+  fn fold_block(&mut self, i: syn::Block) -> syn::Block {
+    let mut this = self.push_code_stack();
+    syn::fold::fold_block(&mut *this, i)
+  }
+
+  fn fold_expr_closure(&mut self, i: syn::ExprClosure) -> syn::ExprClosure {
+    let mut this = self.push_code_stack();
+    syn::fold::fold_expr_closure(&mut *this, i)
+  }
+
+  fn fold_item_const(&mut self, i: syn::ItemConst) -> syn::ItemConst {
+    self.new_local_var(&i.ident);
+    syn::fold::fold_item_const(self, i)
+  }
+
+  fn fold_local(&mut self, mut i: syn::Local) -> syn::Local {
+    //  we fold right expression first, then fold pattern, because the `=` is a
+    // right operator.
+    i.init = i
+      .init
+      .map(|(assign, e)| (assign, Box::new(self.fold_expr(*e))));
+    i.pat = self.fold_pat(i.pat);
+
+    i
+  }
+
+  fn fold_expr_block(&mut self, i: syn::ExprBlock) -> syn::ExprBlock {
+    let mut this = self.push_code_stack();
+    syn::fold::fold_expr_block(&mut *this, i)
+  }
+
+  fn fold_expr_for_loop(&mut self, i: syn::ExprForLoop) -> syn::ExprForLoop {
+    let mut this = self.push_code_stack();
+    syn::fold::fold_expr_for_loop(&mut *this, i)
+  }
+
+  fn fold_expr_loop(&mut self, i: syn::ExprLoop) -> syn::ExprLoop {
+    let mut this = self.push_code_stack();
+    syn::fold::fold_expr_loop(&mut *this, i)
+  }
+
+  fn fold_expr_if(&mut self, i: syn::ExprIf) -> syn::ExprIf {
+    let mut this = self.push_code_stack();
+    syn::fold::fold_expr_if(&mut *this, i)
+  }
+
+  fn fold_arm(&mut self, i: syn::Arm) -> syn::Arm {
+    let mut this = self.push_code_stack();
+    syn::fold::fold_arm(&mut *this, i)
+  }
+
+  fn fold_expr_unsafe(&mut self, i: syn::ExprUnsafe) -> syn::ExprUnsafe {
+    let mut this = self.push_code_stack();
+    syn::fold::fold_expr_unsafe(&mut *this, i)
+  }
+
+  fn fold_expr_while(&mut self, i: syn::ExprWhile) -> syn::ExprWhile {
+    let mut this = self.push_code_stack();
+    syn::fold::fold_expr_while(&mut *this, i)
+  }
+
+  fn fold_pat_ident(&mut self, i: syn::PatIdent) -> syn::PatIdent {
+    self.new_local_var(&i.ident);
+    syn::fold::fold_pat_ident(self, i)
+  }
+
   fn fold_expr_field(&mut self, mut i: ExprField) -> ExprField {
     let ExprField { base, member, .. } = &mut i;
+
     if let Member::Named(member) = member {
-      if let Some(builtin_ty) = WIDGET_OF_BUILTIN_FIELD.get(member.to_string().as_str()) {
-        self.replace_builtin_ident(&mut *base, &builtin_ty.to_snake_case());
+      let dollar = WIDGET_OF_BUILTIN_FIELD
+        .get(member.to_string().as_str())
+        .and_then(|builtin_ty| self.replace_builtin_ident(&mut *base, &builtin_ty.to_snake_case()));
+      if dollar.is_some() {
+        return i;
       }
     }
 
@@ -170,57 +268,98 @@ impl Fold for DollarRefs {
   }
 
   fn fold_expr_method_call(&mut self, mut i: ExprMethodCall) -> ExprMethodCall {
-    if let Some(builtin_ty) = WIDGET_OF_BUILTIN_METHOD.get(i.method.to_string().as_str()) {
-      self.replace_builtin_ident(&mut i.receiver, &builtin_ty.to_snake_case());
+    // fold builtin method on state
+    let dollar = WIDGET_OF_BUILTIN_METHOD
+      .get(i.method.to_string().as_str())
+      .and_then(|builtin_ty| {
+        self.replace_builtin_ident(&mut i.receiver, &builtin_ty.to_snake_case())
+      });
+    if dollar.is_some() {
+      return i;
+    }
+
+    // fold if write on state.
+    let write_mac = is_state_write_method(&i).then(|| {
+      let Expr::Macro(m) = &mut *i.receiver else { return None };
+      parse_dollar_macro(&m.mac).map(|d| (d.name, &mut m.mac))
+    });
+    if let Some(Some((name, mac))) = write_mac {
+      mac.tokens = expand_write_method(name.to_token_stream());
+      mark_macro_expanded(mac);
+      let dollar_ref = DollarRef { name, builtin: None, write: true };
+      self.add_dollar_ref(dollar_ref);
+      return i;
     }
 
     syn::fold::fold_expr_method_call(self, i)
   }
 
   fn fold_macro(&mut self, mut mac: Macro) -> Macro {
-    if let Some(DollarMacro { name, .. }) = parse_clean_dollar_macro(&mac) {
-      mac.tokens = name.to_token_stream();
-      self.refs.push(DollarRef { name, builtin_shadow: None });
-      mac
+    if let Some(DollarMacro { name, .. }) = parse_dollar_macro(&mac) {
+      mac.tokens = expand_read(name.to_token_stream());
+      mark_macro_expanded(&mut mac);
+      let dollar_ref = DollarRef { name, builtin: None, write: false };
+      self.add_dollar_ref(dollar_ref)
+    } else if mac.path.is_ident(KW_WATCH) {
+      mac.tokens = WatchMacro::gen_code(mac.tokens, self).into();
+      mark_macro_expanded(&mut mac);
+    } else if mac.path.is_ident(KW_PIPE) {
+      self.mark_used_ctx();
+      mac.tokens = PipeMacro::gen_code(mac.tokens, self).into();
+      mark_macro_expanded(&mut mac);
+    } else if mac.path.is_ident(KW_RDL) {
+      self.mark_used_ctx();
+      mac.tokens = RdlMacro::gen_code(mac.tokens, self).into();
+      mark_macro_expanded(&mut mac);
+    } else if mac.path.is_ident(KW_FN_WIDGET) {
+      mac.tokens = FnWidgetMacro::gen_code(mac.tokens, self).into();
+      mark_macro_expanded(&mut mac);
+    } else if mac.path.is_ident(KW_SPLIT_WRITER) {
+      mac.tokens = gen_split_path_writer(mac.tokens, self).into();
+      mark_macro_expanded(&mut mac);
+    } else if mac.path.is_ident(KW_MAP_WRITER) {
+      mac.tokens = gen_map_path_writer(mac.tokens, self).into();
+      mark_macro_expanded(&mut mac);
+    } else if mac.path.is_ident(KW_CTX) {
+      self.mark_used_ctx();
     } else {
-      self.ctx_used = mac.path.is_ident(KW_RDL) || mac.path.is_ident(KW_CTX);
-      syn::fold::fold_macro(self, mac)
+      mac = syn::fold::fold_macro(self, mac);
     }
+    mac
   }
 
   fn fold_expr(&mut self, i: Expr) -> Expr {
     match i {
       Expr::Closure(c) if c.capture.is_some() => {
-        let mut closure_refs = DollarRefs::default();
-        closure_refs.in_capture += 1;
-        let mut c = closure_refs.fold_expr_closure(c);
-        closure_refs.in_capture -= 1;
-
-        if !closure_refs.is_empty() || closure_refs.ctx_used {
-          closure_refs.dedup();
-
-          let body = &mut *c.body;
-          if closure_refs.ctx_used {
-            *body = Expr::Verbatim(quote_spanned!(body.span() =>
-              _ctx_handle
-                .with_ctx(|ctx!(): &'_ BuildCtx<'_>| #body )
-                .expect("The `BuildCtx` is not available.")
-            ));
+        self.new_dollar_scope(true);
+        let mut c = self.fold_expr_closure(c);
+        let dollar_scope = self.pop_dollar_scope(true);
+
+        if dollar_scope.used_ctx() || !dollar_scope.is_empty() {
+          if dollar_scope.used_ctx() {
+            let body = &mut *c.body;
+            let body_with_ctx = quote_spanned! { body.span() =>
+              _ctx_handle.with_ctx(|ctx!()| #body).expect("ctx is not available")
+            };
+
+            if matches!(c.output, syn::ReturnType::Default) {
+              *body = parse_quote! { #body_with_ctx };
+            } else {
+              *body = parse_quote_spanned! { body.span() => { #body_with_ctx }};
+            }
           }
 
-          let handle = closure_refs
-            .ctx_used
+          let handle = dollar_scope
+            .used_ctx()
             .then(|| quote_spanned! { c.span() => let _ctx_handle = ctx!().handle(); });
 
-          // todo: seems need merge `closure_refs` into `self`.
-
           Expr::Verbatim(quote_spanned!(c.span() => {
-            #closure_refs
+            #dollar_scope
             #handle
             #c
           }))
         } else {
-          Expr::Closure(c)
+          Expr::Closure(self.fold_expr_closure(c))
         }
       }
       _ => syn::fold::fold_expr(self, i),
@@ -228,93 +367,232 @@ impl Fold for DollarRefs {
   }
 }
 
-impl ToTokens for DollarRef {
+fn mark_macro_expanded(mac: &mut Macro) {
+  mac.path = parse_quote_spanned! { mac.path.span() => ribir_expanded_ಠ_ಠ };
+}
+
+impl ToTokens for DollarRefsScope {
   fn to_tokens(&self, tokens: &mut TokenStream) {
-    let DollarRef { name, builtin_shadow: shadow } = self;
-    if let Some(shadow) = shadow {
-      quote_spanned! { shadow.span() => let mut #name = #shadow.clone();}.to_tokens(tokens);
-    } else {
-      quote_spanned! { shadow.span() => let mut #name = #name.clone();}.to_tokens(tokens);
+    for DollarRef { name, builtin, write } in &self.refs {
+      let reader_writer = if *write {
+        "clone_writer"
+      } else {
+        "clone_reader"
+      };
+      // todo: reader needn't mut
+      let reader_or_writer = Ident::new(reader_writer, name.span());
+      match builtin {
+        Some(builtin) => {
+          let BuiltinInfo { host, member } = builtin;
+          quote_spanned! {
+            name.span() => let mut #name = #host.#member(ctx!()).#reader_or_writer();
+          }
+          .to_tokens(tokens);
+        }
+        _ => {
+          quote_spanned! {
+            name.span() => let mut #name = #name.#reader_or_writer();
+          }
+          .to_tokens(tokens);
+        }
+      }
     }
   }
 }
-impl ToTokens for DollarRefs {
-  fn to_tokens(&self, tokens: &mut TokenStream) {
-    for dollar_ref in &self.refs {
-      dollar_ref.to_tokens(tokens);
+
+impl DollarRefsCtx {
+  #[inline]
+  pub fn top_level() -> Self { Self::default() }
+
+  #[inline]
+  pub fn new_dollar_scope(&mut self, has_capture: bool) {
+    if has_capture {
+      self.capture_level_heads.push(self.variable_stacks.len());
+      // new scope level, should start a new variables scope, otherwise the local
+      // variables will record in its parent level.
+      self.variable_stacks.push(vec![]);
     }
+    self.scopes.push(<_>::default());
   }
-}
 
-impl DollarRefs {
-  pub fn used_ctx(&self) -> bool { self.ctx_used }
+  /// Pop the last dollar scope, and removes duplicate elements in it and make
+  /// the builtin widget first. Keep the builtin reference before the host
+  /// because if a obj both reference builtin widget and its host, the host
+  /// reference may shadow the original.
+  ///
+  /// For example, this generate code not work:
+  ///
+  /// ```ignore
+  /// let a = a.clone_state();
+  /// // the `a` is shadowed by the before `a` variable.
+  /// let a_margin = a.get_builtin_margin(ctx!());
+  /// ```
+  ///
+  /// must generate `a_margin` first:
+  ///
+  /// ```ignore
+  /// let a_margin = a.get_builtin_margin(ctx!());
+  /// let a = a.clone_state();
+  /// ```
+  #[inline]
+  pub fn pop_dollar_scope(&mut self, has_capture: bool) -> DollarRefsScope {
+    if has_capture {
+      self.variable_stacks.pop();
+      self.capture_level_heads.pop();
+    }
+    let mut scope = self.scopes.pop().unwrap();
+
+    // sort and remove duplicate
+    scope.refs.sort_by(|a, b| {
+      a.builtin
+        .is_none()
+        .cmp(&b.builtin.is_none())
+        .then_with(|| a.name.cmp(&b.name))
+        .then_with(|| b.write.cmp(&a.write))
+    });
+    scope.refs.dedup_by(|a, b| a.name == b.name);
+
+    if !self.scopes.is_empty() {
+      self.current_dollar_scope_mut().used_ctx |= scope.used_ctx();
+
+      for r in scope.refs.iter_mut() {
+        if !self.is_local_var(r.host()) {
+          self.current_dollar_scope_mut().refs.push(r.clone());
+          // if ref variable is not a local variable of parent capture level, should
+          // remove its builtin info as a normal variable, because parent will capture the
+          // builtin object individually.
+          if has_capture {
+            r.builtin.take();
+          }
+        }
+      }
+    }
+    scope
+  }
 
-  pub fn dedup(&mut self) {
-    self.refs.sort_by_key(|r: &_| r.name.to_string());
-    self.refs.dedup()
+  pub fn push_code_stack(&mut self) -> StackGuard<'_> {
+    self.variable_stacks.push(vec![]);
+    StackGuard(self)
   }
 
-  pub fn upstream_tokens(&self) -> TokenStream {
-    match self.len() {
-      0 => quote! {},
-      1 => {
-        let DollarRef { name, builtin_shadow: value } = &self.refs[0];
-        quote_spanned! { value.span() => #name.modifies() }
-      }
-      _ => {
-        let upstream = self.iter().map(|DollarRef { name, .. }| {
-          quote! {  #name.modifies() }
-        });
-        quote! { observable::from_iter([#(#upstream),*]).merge_all(usize::MAX) }
-      }
+  pub fn builtin_host_tokens(&self, dollar_ref: &DollarRef) -> TokenStream {
+    let DollarRef { name, builtin, .. } = dollar_ref;
+    let BuiltinInfo { host, member } = builtin.as_ref().unwrap();
+
+    // if used in embedded closure, we directly use the builtin variable, the
+    // variable that capture by the closure is already a separate builtin variable.
+
+    if !self.is_local_var(host) && self.capture_level_heads.len() > 1 {
+      name.to_token_stream()
+    } else {
+      quote_spanned! { host.span() => #host.#member(ctx!()) }
     }
   }
 
+  fn mark_used_ctx(&mut self) { self.current_dollar_scope_mut().used_ctx = true; }
+
   fn replace_builtin_ident(
     &mut self,
     caller: &mut Expr,
     builtin_member: &str,
   ) -> Option<&DollarRef> {
-    let e = match caller {
-      Expr::MethodCall(ExprMethodCall { receiver, method, args, .. })
-        if args.is_empty() && (method == "shallow" || method == "silent") =>
-      {
-        &mut **receiver
-      }
-      e => e,
+    let mut write = false;
+    let e = if let Expr::MethodCall(m) = caller {
+      write = is_state_write_method(m);
+      if write { &mut *m.receiver } else { caller }
+    } else {
+      caller
     };
 
     let Expr::Macro(m) = e else { return None };
-    let DollarMacro { name: host, .. } = parse_clean_dollar_macro(&m.mac)?;
-    let builtin_name = ribir_suffix_variable(&host, builtin_member);
-    let builtin_member = Ident::new(builtin_member, host.span());
+    let DollarMacro { name: host, .. } = parse_dollar_macro(&m.mac)?;
 
     // When a builtin widget captured by a `move |_| {...}` closure, we need split
-    // the builtin widget from the `FatObj` so we only capture the used builtin
-    // part.
-    m.mac.tokens = if self.in_capture > 0 {
-      builtin_name.to_token_stream()
+    // the builtin widget from the `FatObj` so we only capture the builtin part that
+    // we used.
+    let name = ribir_suffix_variable(&host, builtin_member);
+    let get_builtin_method = Ident::new(&format!("get_builtin_{builtin_member}"), host.span());
+    let builtin = Some(BuiltinInfo { host, member: get_builtin_method });
+    let dollar_ref = DollarRef { name, builtin, write };
+
+    let state = self.builtin_host_tokens(&dollar_ref);
+    m.mac.tokens = if write {
+      expand_write_method(state)
     } else {
-      quote_spanned! { host.span() => #host.#builtin_member(ctx!()) }
+      expand_read(state)
     };
-    self.refs.push(DollarRef {
-      name: builtin_name,
-      builtin_shadow: Some(parse_quote! { #host.#builtin_member(ctx!()) }),
-    });
-    self.last()
+    mark_macro_expanded(&mut m.mac);
+
+    self.add_dollar_ref(dollar_ref);
+    self.current_dollar_scope().last()
+  }
+
+  fn new_local_var(&mut self, name: &Ident) {
+    self.variable_stacks.last_mut().unwrap().push(name.clone())
+  }
+
+  fn add_dollar_ref(&mut self, dollar_ref: DollarRef) {
+    // local variable is not a outside reference.
+    if !self.is_local_var(dollar_ref.host()) {
+      let scope = self.scopes.last_mut().expect("no dollar refs scope");
+      scope.refs.push(dollar_ref);
+    }
+  }
+
+  fn current_dollar_scope(&self) -> &DollarRefsScope {
+    self.scopes.last().expect("no dollar refs scope")
+  }
+
+  fn current_dollar_scope_mut(&mut self) -> &mut DollarRefsScope {
+    self.scopes.last_mut().expect("no dollar refs scope")
+  }
+
+  fn is_local_var(&self, name: &Ident) -> bool {
+    let stack_idx = self.capture_level_heads.last().copied().unwrap_or(0);
+    self.variable_stacks[stack_idx..]
+      .iter()
+      .any(|stack| stack.contains(name))
+  }
+}
+
+impl DollarRefsScope {
+  pub fn used_ctx(&self) -> bool { self.used_ctx }
+
+  pub fn upstream_tokens(&self) -> TokenStream {
+    match self.len() {
+      0 => quote! {},
+      1 => {
+        let DollarRef { name, .. } = &self.refs[0];
+        quote_spanned! { name.span() => #name.modifies() }
+      }
+      _ => {
+        let upstream = self
+          .iter()
+          .map(|DollarRef { name, .. }| quote! {  #name.modifies() });
+        quote! { observable::from_iter([#(#upstream),*]).merge_all(usize::MAX) }
+      }
+    }
   }
 }
 
-fn parse_clean_dollar_macro(mac: &Macro) -> Option<DollarMacro> {
+impl DollarRef {
+  pub fn host(&self) -> &Ident {
+    self
+      .builtin
+      .as_ref()
+      .map_or_else(|| &self.name, |b| &b.host)
+  }
+}
+
+fn parse_dollar_macro(mac: &Macro) -> Option<DollarMacro> {
   if mac.path.is_ident(KW_DOLLAR_STR) {
-    // parse fail may occur because the macro is already fold by `DollarRefs`.
-    mac.parse_body::<DollarMacro>().ok()
+    Some(mac.parse_body::<DollarMacro>().unwrap())
   } else {
     None
   }
 }
 
-impl std::ops::Deref for DollarRefs {
+impl std::ops::Deref for DollarRefsScope {
   type Target = [DollarRef];
   fn deref(&self) -> &Self::Target { &self.refs }
 }
@@ -332,3 +610,40 @@ impl Parse for DollarMacro {
     })
   }
 }
+
+impl<'a> std::ops::Deref for StackGuard<'a> {
+  type Target = DollarRefsCtx;
+  fn deref(&self) -> &Self::Target { self.0 }
+}
+
+impl<'a> std::ops::DerefMut for StackGuard<'a> {
+  fn deref_mut(&mut self) -> &mut Self::Target { self.0 }
+}
+
+impl<'a> Drop for StackGuard<'a> {
+  fn drop(&mut self) { self.0.variable_stacks.pop(); }
+}
+
+impl Default for DollarRefsCtx {
+  fn default() -> Self {
+    Self {
+      scopes: smallvec![DollarRefsScope::default()],
+      capture_level_heads: smallvec![],
+      variable_stacks: vec![vec![]],
+    }
+  }
+}
+
+pub fn not_subscribe_anything(span: Span) -> TokenStream {
+  quote_spanned!(span =>
+    compile_error!("expression not subscribe anything, it must contain at least one $")
+  )
+}
+
+fn is_state_write_method(m: &ExprMethodCall) -> bool {
+  m.method == "write" || m.method == "silent" || m.method == "shallow"
+}
+
+fn expand_write_method(host: TokenStream) -> TokenStream { host }
+
+fn expand_read(name: TokenStream) -> TokenStream { quote_spanned!(name.span() => #name.read()) }
diff --git a/macros/src/watch_macro.rs b/macros/src/watch_macro.rs
index 2c4e27b9c..d3b48d359 100644
--- a/macros/src/watch_macro.rs
+++ b/macros/src/watch_macro.rs
@@ -1,34 +1,46 @@
-use crate::{pipe_macro::fold_expr_as_in_closure, symbol_process::DollarRefs};
-use quote::{quote, ToTokens};
-use syn::{
-  parse::{Parse, ParseStream},
-  Stmt,
+use crate::{
+  ok,
+  pipe_macro::BodyExpr,
+  symbol_process::{not_subscribe_anything, symbol_to_macro, DollarRefsCtx, DollarRefsScope},
 };
+use proc_macro::TokenStream as TokenStream1;
+use proc_macro2::TokenStream;
+use quote::{quote, ToTokens};
+use syn::{fold::Fold, parse_macro_input, spanned::Spanned, Stmt};
 
 pub(crate) struct WatchMacro {
-  refs: DollarRefs,
+  refs: DollarRefsScope,
   expr: Vec<Stmt>,
 }
 
-impl Parse for WatchMacro {
-  fn parse(input: ParseStream) -> syn::Result<Self> {
-    let (refs, stmts) = fold_expr_as_in_closure(input)?;
-    Ok(Self { refs, expr: stmts })
+impl WatchMacro {
+  pub fn gen_code(input: TokenStream, refs_ctx: &mut DollarRefsCtx) -> TokenStream1 {
+    let span = input.span();
+    let input = ok!(symbol_to_macro(TokenStream1::from(input)));
+    let expr = parse_macro_input! { input as BodyExpr };
+    refs_ctx.new_dollar_scope(true);
+    let expr = expr.0.into_iter().map(|s| refs_ctx.fold_stmt(s)).collect();
+    let refs = refs_ctx.pop_dollar_scope(true);
+    if refs.is_empty() {
+      not_subscribe_anything(span).into()
+    } else {
+      WatchMacro { refs, expr }.to_token_stream().into()
+    }
   }
 }
 
 impl ToTokens for WatchMacro {
   fn to_tokens(&self, tokens: &mut proc_macro2::TokenStream) {
-    let Self { refs, expr } = self;
+    let Self { refs, expr, .. } = self;
 
     let upstream = refs.upstream_tokens();
 
     if refs.used_ctx() {
       quote! {{
         #refs
-        let _ctx_handle = ctx!().handle();
+        let _ctx_handle_ಠ_ಠ = ctx!().handle();
         #upstream
-          .map(move |_| _ctx_handle.with_ctx(|ctx!(): &BuildCtx<'_>| { #(#expr)* }))
+          .map(move |_| _ctx_handle_ಠ_ಠ.with_ctx(|ctx!(): &BuildCtx<'_>| { #(#expr)* }))
       }}
       .to_tokens(tokens)
     } else {
diff --git a/macros/src/widget_macro/code_gen.rs b/macros/src/widget_macro/code_gen.rs
index 78c563765..7ab0225f4 100644
--- a/macros/src/widget_macro/code_gen.rs
+++ b/macros/src/widget_macro/code_gen.rs
@@ -205,7 +205,7 @@ impl Desugared {
           quote! { .into(), #guards_vec }.to_tokens(tokens)
         });
       } else {
-        w.gen_compose_node(named_objs, tokens)
+        w.gen_compose_node(named_objs, tokens);
       }
     });
     quote! { ; FnWidget::new(#name) }.to_tokens(tokens);
@@ -442,7 +442,7 @@ impl DeclareObj {
         Paren(value.span()).surround(tokens, |tokens| value.to_tokens(tokens))
       });
       let build_ctx = ctx_ident();
-      tokens.extend(quote_spanned! { span => .build(#build_ctx) });
+      tokens.extend(quote_spanned! { span => .build_declare(#build_ctx) });
     };
     let builder = |tokens: &mut TokenStream| {
       let is_stateful = *stateful || !watch_stmts.is_empty();
diff --git a/macros/src/widget_macro/name_used_info.rs b/macros/src/widget_macro/name_used_info.rs
index 5ff38d5fc..ba8fe9932 100644
--- a/macros/src/widget_macro/name_used_info.rs
+++ b/macros/src/widget_macro/name_used_info.rs
@@ -155,9 +155,7 @@ impl ScopeUsedInfo {
   pub fn state_refs_tokens(&self, tokens: &mut TokenStream) {
     if let Some(names) = self.ref_widgets() {
       let c_names = names.clone();
-      if names.clone().nth(1).is_some() {
-        quote! {let _guard = (#(#names.modify_guard(),)*);}.to_tokens(tokens);
-      }
+
       c_names.for_each(|n| {
         quote_spanned! {n.span() => let mut #n = #n.state_ref();}.to_tokens(tokens);
       });
diff --git a/macros/src/writer_map_macro.rs b/macros/src/writer_map_macro.rs
new file mode 100644
index 000000000..a88699208
--- /dev/null
+++ b/macros/src/writer_map_macro.rs
@@ -0,0 +1,107 @@
+use crate::{ok, symbol_process::symbol_to_macro};
+use proc_macro::{TokenStream as TokenStream1, TokenTree};
+use proc_macro2::{Ident, Span, TokenStream};
+use quote::{quote, quote_spanned, ToTokens};
+use syn::{
+  fold::Fold,
+  parse::{Parse, ParseStream},
+  parse_macro_input, parse_quote,
+  spanned::Spanned,
+  Expr, ExprMacro, Result,
+};
+
+use crate::symbol_process::DollarRefsCtx;
+
+pub fn gen_map_path_writer(input: TokenStream, refs_ctx: &mut DollarRefsCtx) -> TokenStream1 {
+  gen_path_partial_writer(input, "map_writer", refs_ctx)
+}
+
+pub fn gen_split_path_writer(input: TokenStream, refs_ctx: &mut DollarRefsCtx) -> TokenStream1 {
+  gen_path_partial_writer(input, "split_writer", refs_ctx)
+}
+
+fn gen_path_partial_writer(
+  input: TokenStream,
+  method_name: &'static str,
+  refs_ctx: &mut DollarRefsCtx,
+) -> TokenStream1 {
+  fn first_dollar_err(span: Span) -> TokenStream1 {
+    quote_spanned! { span =>
+      compile_error!("expected `$` as the first token, and only one `$` is allowed")
+    }
+    .into()
+  }
+
+  let mut input = TokenStream1::from(input).into_iter();
+  let first = input.next();
+  let is_first_dollar = first.as_ref().map_or(
+    false,
+    |f| matches!(f, TokenTree::Punct(p) if p.as_char() == '$'),
+  );
+  if !is_first_dollar {
+    first_dollar_err(
+      first
+        .as_ref()
+        .map_or(Span::call_site(), |t| t.span().into()),
+    );
+  }
+
+  let input = ok!(symbol_to_macro(first.into_iter().chain(input)));
+
+  let expr = parse_macro_input! { input as Expr };
+  // Although `split_writer!` and `map_writer!` are not a capture scope, but we
+  // start a new capture scope to ensure found the dollar in the macro. We will
+  // not use the result of the `$var`, so it ok.
+  refs_ctx.new_dollar_scope(true);
+  let expr = refs_ctx.fold_expr(expr);
+  let refs = refs_ctx.pop_dollar_scope(true);
+
+  if refs.len() != 1 {
+    quote_spanned! { expr.span() =>
+      compile_error!("expected `$` as the first token, and only one `$` is allowed")
+    }
+    .into()
+  } else {
+    let dollar_ref = &refs[0];
+    let host = if dollar_ref.builtin.is_some() {
+      refs_ctx.builtin_host_tokens(dollar_ref)
+    } else {
+      dollar_ref.name.to_token_stream()
+    };
+
+    let path: RouterPath = parse_quote!(#expr);
+    RouterMacro { host, path: path.0, method_name }
+      .to_token_stream()
+      .into()
+  }
+}
+
+struct RouterPath(TokenStream);
+
+impl Parse for RouterPath {
+  fn parse(input: ParseStream) -> Result<Self> {
+    input.parse::<ExprMacro>()?;
+    Ok(Self(input.parse()?))
+  }
+}
+
+struct RouterMacro {
+  host: TokenStream,
+  path: TokenStream,
+  method_name: &'static str,
+}
+
+impl ToTokens for RouterMacro {
+  fn to_tokens(&self, tokens: &mut TokenStream) {
+    let Self { host, path, method_name } = self;
+    let method = Ident::new(method_name, Span::call_site());
+
+    quote!(
+      #host.#method(
+        move |origin: &_| &origin #path,
+        move |origin: &mut _| &mut origin #path
+      )
+    )
+    .to_tokens(tokens)
+  }
+}
diff --git a/painter/src/style.rs b/painter/src/style.rs
index bc5d08d97..d95641b8c 100644
--- a/painter/src/style.rs
+++ b/painter/src/style.rs
@@ -24,6 +24,11 @@ impl From<Color> for Brush {
   fn from(c: Color) -> Self { Brush::Color(c) }
 }
 
+impl From<Color> for Option<Brush> {
+  #[inline]
+  fn from(c: Color) -> Self { Some(c.into()) }
+}
+
 impl From<ShareResource<PixelImage>> for Brush {
   #[inline]
   fn from(img: ShareResource<PixelImage>) -> Self { Brush::Image(img) }
diff --git a/ribir/src/app.rs b/ribir/src/app.rs
index 8cd99193a..7d2edae05 100644
--- a/ribir/src/app.rs
+++ b/ribir/src/app.rs
@@ -47,18 +47,15 @@ impl App {
 
   /// create a new window with the `root` widget and return the window id.
   #[track_caller]
-  pub fn new_window(root: Widget, size: Option<Size>) -> WindowId {
+  pub fn new_window(root: Widget, size: Option<Size>) -> Rc<Window> {
     let app = unsafe { App::shared_mut() };
     let shell_wnd = WinitShellWnd::new(size, &app.event_loop);
-    let wnd = Window::new(root, Box::new(shell_wnd));
-    let id = wnd.id();
-    AppCtx::windows().borrow_mut().insert(id, wnd);
-    AppCtx::get_window(id).unwrap().emit_events();
+    let wnd = AppCtx::new_window(Box::new(shell_wnd), root);
 
     if app.active_wnd.is_none() {
-      app.active_wnd = Some(id);
+      app.active_wnd = Some(wnd.id());
     }
-    id
+    wnd
   }
 
   /// Get a event sender of the application event loop, you can use this to send
@@ -129,17 +126,19 @@ impl App {
         }
         Event::MainEventsCleared => {
           AppCtx::run_until_stalled();
-          AppCtx::windows().borrow().values().for_each(|wnd| {
-            if wnd.need_draw() {
-              let wnd = wnd.shell_wnd().borrow();
-              let shell = wnd.as_any().downcast_ref::<WinitShellWnd>().unwrap();
-              shell.winit_wnd.request_redraw();
-            }
-          })
+          AppCtx::windows()
+            .borrow()
+            .values()
+            .filter(|wnd| wnd.need_draw())
+            .for_each(|wnd| request_redraw(wnd))
         }
         Event::RedrawRequested(id) => {
           if let Some(wnd) = AppCtx::get_window(new_id(id)) {
-            wnd.draw_frame()
+            // if this frame is really draw, request another redraw. To make sure the draw
+            // always end with a empty draw and emit an extra tick cycle message.
+            if wnd.draw_frame() {
+              request_redraw(&wnd);
+            }
           }
         }
         Event::RedrawEventsCleared => {
@@ -217,3 +216,9 @@ impl RuntimeWaker for EventWaker {
 
 /// EventWaker only send `RibirEvent::FuturesWake`.
 unsafe impl Send for EventWaker {}
+
+fn request_redraw(wnd: &Window) {
+  let wnd = wnd.shell_wnd().borrow();
+  let shell = wnd.as_any().downcast_ref::<WinitShellWnd>().unwrap();
+  shell.winit_wnd.request_redraw();
+}
diff --git a/ribir/tests/timer_test.rs b/ribir/tests/timer_test.rs
index cfc052ce0..befee4648 100644
--- a/ribir/tests/timer_test.rs
+++ b/ribir/tests/timer_test.rs
@@ -2,7 +2,8 @@ use ribir::core::timer::Timer;
 use rxrust::scheduler::NEW_TIMER_FN;
 
 mod test_single_thread {
-  use futures::executor::LocalPool;
+  use super::*;
+  use ribir_core::reset_test_env;
   use ribir_core::test_helper::TestWindow;
   use ribir_dev_helper::*;
   use std::{cell::RefCell, rc::Rc};
@@ -59,10 +60,12 @@ mod test_single_thread {
     (wnd, count)
   }
 
-  fn run_until(local_pool: &mut LocalPool, cond: impl Fn() -> bool) {
+  fn run_until(wnd: &TestWindow, cond: impl Fn() -> bool) {
     loop {
-      super::Timer::wake_timeout_futures();
-      local_pool.run_until_stalled();
+      Timer::wake_timeout_futures();
+      AppCtx::run_until_stalled();
+      wnd.run_frame_tasks();
+
       if (cond)() {
         break;
       }
@@ -71,20 +74,21 @@ mod test_single_thread {
   }
 
   pub fn test_double_tap() {
+    reset_test_env!();
     let (wnd, count) = env(2);
+    let c_wnd = wnd.clone();
 
-    let mut local_pool = LocalPool::new();
     let device_id = unsafe { DeviceId::dummy() };
     let is_complete = Rc::new(RefCell::new(false));
     let is_complete2 = is_complete.clone();
-    observable::interval(Duration::from_millis(10), local_pool.spawner())
+    observable::interval(Duration::from_millis(10), AppCtx::scheduler())
       .take(8)
       .on_complete(move || {
         *is_complete.borrow_mut() = true;
       })
       .subscribe(move |i| {
         #[allow(deprecated)]
-        wnd.processes_native_event(WindowEvent::MouseInput {
+        c_wnd.processes_native_event(WindowEvent::MouseInput {
           device_id,
           state: if i % 2 == 0 {
             ElementState::Pressed
@@ -94,23 +98,24 @@ mod test_single_thread {
           button: MouseButton::Left,
           modifiers: ModifiersState::default(),
         });
-        wnd.emit_events();
       });
 
-    run_until(&mut local_pool, || *is_complete2.borrow());
+    run_until(&wnd, || *is_complete2.borrow());
     assert_eq!(*count.borrow(), 2);
 
     let (wnd, count) = env(2);
+    let c_wnd = wnd.clone();
+
     let is_complete = Rc::new(RefCell::new(false));
     let is_complete2 = is_complete.clone();
-    observable::interval(Duration::from_millis(251), local_pool.spawner())
+    observable::interval(Duration::from_millis(251), AppCtx::scheduler())
       .take(8)
       .on_complete(move || {
         *is_complete.borrow_mut() = true;
       })
       .subscribe(move |i| {
         #[allow(deprecated)]
-        wnd.processes_native_event(WindowEvent::MouseInput {
+        c_wnd.processes_native_event(WindowEvent::MouseInput {
           device_id,
           state: if i % 2 == 0 {
             ElementState::Pressed
@@ -120,28 +125,28 @@ mod test_single_thread {
           button: MouseButton::Left,
           modifiers: ModifiersState::default(),
         });
-        wnd.emit_events();
       });
 
-    run_until(&mut local_pool, || *is_complete2.borrow());
+    run_until(&wnd, || *is_complete2.borrow());
     assert_eq!(*count.borrow(), 0);
   }
 
   pub fn test_tripe_tap() {
+    reset_test_env!();
     let (wnd, count) = env(3);
+    let c_wnd = wnd.clone();
 
-    let mut local_pool = LocalPool::new();
     let device_id = unsafe { DeviceId::dummy() };
     let is_complete = Rc::new(RefCell::new(false));
     let is_complete2 = is_complete.clone();
-    observable::interval(Duration::from_millis(10), local_pool.spawner())
+    observable::interval(Duration::from_millis(10), AppCtx::scheduler())
       .take(12)
       .on_complete(move || {
         *is_complete.borrow_mut() = true;
       })
       .subscribe(move |i| {
         #[allow(deprecated)]
-        wnd.processes_native_event(WindowEvent::MouseInput {
+        c_wnd.processes_native_event(WindowEvent::MouseInput {
           device_id,
           state: if i % 2 == 0 {
             ElementState::Pressed
@@ -151,10 +156,9 @@ mod test_single_thread {
           button: MouseButton::Left,
           modifiers: ModifiersState::default(),
         });
-        wnd.emit_events();
       });
 
-    run_until(&mut local_pool, || *is_complete2.borrow());
+    run_until(&wnd, || *is_complete2.borrow());
 
     assert_eq!(*count.borrow(), 2);
   }
diff --git a/tests/Cargo.toml b/tests/Cargo.toml
index 9a3d45208..fd37439f8 100644
--- a/tests/Cargo.toml
+++ b/tests/Cargo.toml
@@ -29,10 +29,6 @@ path = "compile_message.rs"
 name = "rdl_macro_test"
 path = "rdl_macro_test.rs"
 
-[[test]]
-name = "animations_syntax"
-path = "animations_syntax_test.rs"
-
 [[test]]
 name = "child_template_derive"
 path = "child_template_derive_test.rs"
diff --git a/tests/animations_syntax_test.rs b/tests/animations_syntax_test.rs
deleted file mode 100644
index 537610574..000000000
--- a/tests/animations_syntax_test.rs
+++ /dev/null
@@ -1,93 +0,0 @@
-use ribir::{core::test_helper::*, prelude::*};
-use std::{cell::Cell, rc::Rc, time::Duration};
-use winit::event::{DeviceId, MouseScrollDelta, TouchPhase, WindowEvent};
-
-fn wheel_widget(w: Widget) -> TestWindow {
-  let mut wnd = TestWindow::new(w);
-
-  wnd.draw_frame();
-  let device_id = unsafe { DeviceId::dummy() };
-  #[allow(deprecated)]
-  wnd.processes_native_event(WindowEvent::MouseWheel {
-    device_id,
-    delta: MouseScrollDelta::LineDelta(1.0, 1.0),
-    phase: TouchPhase::Started,
-    modifiers: ModifiersState::default(),
-  });
-  wnd
-}
-
-#[test]
-fn listener_trigger_have_handler() {
-  let _guard = unsafe { AppCtx::new_lock_scope() };
-
-  let handler_call_times = Rc::new(Cell::new(0));
-  let h1 = handler_call_times.clone();
-  let animate_state = Stateful::new(false);
-
-  let w = widget! {
-    states { animate_state:  animate_state.clone() }
-    init ctx => {
-      let linear_transition = transitions::LINEAR.of(ctx);
-    }
-    SizedBox {
-      id: sized_box,
-      size: Size::new(100., 100.),
-      on_wheel: move |_| {
-        h1.set(h1.get() + 1);
-        leak_animate.run();
-      },
-    }
-    Animate {
-      id: leak_animate,
-      transition: linear_transition,
-      prop: prop!(sized_box.size),
-      from: ZERO_SIZE,
-    }
-    finally {
-      watch!(leak_animate.is_running())
-        .subscribe(move |v| *animate_state = v);
-    }
-  };
-
-  wheel_widget(w.into());
-
-  assert!(*animate_state.state_ref());
-  assert_eq!(handler_call_times.get(), 1);
-}
-
-#[test]
-fn listener_trigger() {
-  let _guard = unsafe { AppCtx::new_lock_scope() };
-
-  let animate_state = Stateful::new(false);
-
-  let w = widget! {
-    states { animate_state:  animate_state.clone() }
-    init ctx => {
-      let linear_transition = Transition::declare_builder()
-      .easing(easing::LINEAR)
-      .duration(Duration::from_millis(100))
-      .build(ctx);
-    }
-    SizedBox {
-      id: sized_box,
-      size: Size::new(100., 100.),
-      on_wheel: move |_| leak_animate.run()
-    }
-    Animate {
-      id: leak_animate,
-      prop: prop!(sized_box.size),
-      from: ZERO_SIZE,
-      transition: linear_transition,
-    }
-    finally {
-      watch!(leak_animate.is_running())
-        .subscribe(move |v| *animate_state = v);
-    }
-  };
-
-  wheel_widget(w.into());
-
-  assert!(*animate_state.state_ref());
-}
diff --git a/tests/compile_msg/declare/animations_base_syntax_pass.rs b/tests/compile_msg/declare/animations_base_syntax_pass.rs
deleted file mode 100644
index 6736a339e..000000000
--- a/tests/compile_msg/declare/animations_base_syntax_pass.rs
+++ /dev/null
@@ -1,63 +0,0 @@
-use ribir::prelude::*;
-
-fn main() {
-  let _def_ref = widget! {
-    init ctx => {
-      let linear = Transition::declare_builder()
-        .easing(easing::LINEAR)
-        .build(ctx);
-    }
-    SizedBox {
-      id: sized_box,
-      size: Size::zero()
-    }
-
-    Animate {
-      id: animate1,
-      transition: linear,
-      prop: prop!(sized_box.size),
-      from: Size::new(10., 10.),
-    }
-
-    finally {
-      let_watch!(sized_box.size)
-        .distinct_until_changed()
-        .subscribe(move |_| animate1.run());
-    }
-  };
-
-  let _implicit_from_state = widget! {
-    SizedBox {
-      id: sized_box,
-      size: Size::zero()
-    }
-    transition prop!(sized_box.size) {
-      easing: easing::LINEAR,
-      duration: std::time::Duration::from_millis(200),
-    }
-
-  };
-
-  let _transition_by = widget! {
-    init ctx => {
-      let linear = transitions::LINEAR.of(ctx);
-    }
-    SizedBox {
-      id: sized_box,
-      size: Size::zero()
-    }
-    transition prop!(sized_box.size) { by: linear }
-  };
-
-  let _fix_shorthand_with_builtin_field = widget! {
-    SizedBox {
-      id: sized_box,
-      background: Color::RED,
-      size: Size::zero()
-    }
-    transition prop!(sized_box.background) {
-      easing: easing::LINEAR,
-      duration: std::time::Duration::from_millis(200),
-    }
-  };
-}
diff --git a/tests/declare_builder_test.rs b/tests/declare_builder_test.rs
index 2621f8cd9..f55d3d45e 100644
--- a/tests/declare_builder_test.rs
+++ b/tests/declare_builder_test.rs
@@ -7,7 +7,7 @@ fn declare_builder_smoke() {
   // empty struct
   #[derive(Declare)]
   struct A;
-  let _: A = ADeclarer {}.build(dummy_ctx());
+  let _: A = ADeclarer {}.build_declare(dummy_ctx());
 
   #[derive(Declare)]
   struct B {
@@ -18,7 +18,7 @@ fn declare_builder_smoke() {
   let b = <B as Declare>::declare_builder()
     .a(1.)
     .b(1)
-    .build(dummy_ctx());
+    .build_declare(dummy_ctx());
   assert_eq!(b.a, 1.);
   assert_eq!(b.b, 1);
 }
@@ -31,7 +31,7 @@ fn panic_if_miss_require_field() {
     _a: f32,
   }
 
-  let _ = <T as Declare>::declare_builder().build(dummy_ctx());
+  let _ = <T as Declare>::declare_builder().build_declare(dummy_ctx());
 }
 
 #[test]
@@ -43,7 +43,7 @@ fn default_field() {
     a: f32,
   }
 
-  let t = <DefaultDeclare as Declare>::declare_builder().build(dummy_ctx());
+  let t = <DefaultDeclare as Declare>::declare_builder().build_declare(dummy_ctx());
   assert_eq!(t.a, 0.);
 }
 
@@ -56,6 +56,6 @@ fn default_field_with_value() {
     text: &'static str,
   }
 
-  let t = <DefaultWithValue as Declare>::declare_builder().build(dummy_ctx());
+  let t = <DefaultWithValue as Declare>::declare_builder().build_declare(dummy_ctx());
   assert_eq!(t.text, "hi!");
 }
diff --git a/tests/rdl_macro_test.rs b/tests/rdl_macro_test.rs
index c066269c3..7df49c23b 100644
--- a/tests/rdl_macro_test.rs
+++ b/tests/rdl_macro_test.rs
@@ -1,6 +1,6 @@
 use ribir::{core::test_helper::*, prelude::*};
 use ribir_dev_helper::*;
-use std::{cell::Cell, rc::Rc, time::Duration};
+use std::{cell::Cell, rc::Rc};
 use winit::event::{DeviceId, ElementState, MouseButton, WindowEvent};
 
 fn simplest_leaf_rdl() -> impl Into<Widget> {
@@ -131,7 +131,7 @@ widget_layout_test!(dollar_as_middle_parent, width == 500., height == 500.,);
 
 fn pipe_as_field_value() -> impl Into<Widget> {
   let size = Stateful::new(Size::zero());
-  let size2 = size.clone();
+  let mut size2 = size.clone();
   let w = fn_widget! {
     rdl! { SizedBox { size: pipe!(*$size2) }}
   };
@@ -142,7 +142,7 @@ widget_layout_test!(pipe_as_field_value, width == 100., height == 100.,);
 
 fn pipe_as_builtin_field_value() -> impl Into<Widget> {
   let margin = Stateful::new(EdgeInsets::all(0.));
-  let margin2 = margin.clone();
+  let mut margin2 = margin.clone();
 
   let w = fn_widget! {
     rdl! { SizedBox {
@@ -156,7 +156,7 @@ fn pipe_as_builtin_field_value() -> impl Into<Widget> {
 widget_layout_test!(pipe_as_builtin_field_value, width == 100., height == 100.,);
 
 fn pipe_with_ctx() -> impl Into<Widget> {
-  let scale = Stateful::new(1.);
+  let mut scale = Stateful::new(1.);
   let scale2 = scale.clone();
   let w = fn_widget! {
     rdl! { SizedBox {
@@ -180,29 +180,29 @@ fn pipe_with_builtin_field() -> impl Into<Widget> {
 }
 widget_layout_test!(pipe_with_builtin_field, width == 4., height == 2.,);
 
-fn capture_closure_used_ctx() -> impl Into<Widget> {
-  fn_widget! {
-    let mut size_box = @SizedBox { size: ZERO_SIZE };
-    @ $size_box {
-      on_mounted: move |_| $size_box.size = IconSize::of(ctx!()).tiny
-    }
-  }
-}
-widget_layout_test!(capture_closure_used_ctx, width == 18., height == 18.,);
+// fn capture_closure_used_ctx() -> impl Into<Widget> {
+//   fn_widget! {
+//     let mut size_box = @SizedBox { size: ZERO_SIZE };
+//     @ $size_box {
+//       on_mounted: move |_| $size_box.size = IconSize::of(ctx!()).tiny
+//     }
+//   }
+// }
+// widget_layout_test!(capture_closure_used_ctx, width == 18., height == 18.,);
 
 #[test]
 fn pipe_single_parent() {
   let _guard = unsafe { AppCtx::new_lock_scope() };
 
-  let outside_blank = Stateful::new(true);
+  let mut outside_blank = Stateful::new(true);
   let outside_blank2 = outside_blank.clone();
   let w = fn_widget! {
     let edges = EdgeInsets::all(5.);
     let blank = pipe! {
       if *$outside_blank {
-        Box::new(rdl! { Margin { margin: edges } }) as Box<dyn BoxedSingleParent>
+        Box::new(Margin { margin: edges }) as Box<dyn BoxedSingleParent>
       } else {
-        Box::new(rdl! { Padding { padding: edges } }) as Box<dyn BoxedSingleParent>
+        Box::new(Padding { padding: edges }) as Box<dyn BoxedSingleParent>
       }
     };
     rdl! {
@@ -225,11 +225,11 @@ fn pipe_single_parent() {
 fn pipe_multi_parent() {
   let _guard = unsafe { AppCtx::new_lock_scope() };
 
-  let stack_or_flex = Stateful::new(true);
+  let mut stack_or_flex = Stateful::new(true);
   let stack_or_flex2 = stack_or_flex.clone();
   let w = fn_widget! {
     let container = pipe! {
-      let c: Box<dyn BoxMultiParent> = if *$stack_or_flex {
+      let c: Box<dyn BoxedMultiParent> = if *$stack_or_flex {
         Box::new(rdl! { Stack { } })
       } else {
         Box::new(rdl! { Flex { } })
@@ -259,7 +259,7 @@ fn pipe_as_child() {
   let _guard = unsafe { AppCtx::new_lock_scope() };
 
   let box_or_not = Stateful::new(true);
-  let box_or_not2 = box_or_not.clone();
+  let mut box_or_not2 = box_or_not.clone();
   let w = fn_widget! {
     let blank: Pipe<Widget> = pipe!{
       if *$box_or_not2 {
@@ -286,7 +286,7 @@ fn pipe_as_multi_child() {
   let _guard = unsafe { AppCtx::new_lock_scope() };
 
   let fix_box = SizedBox { size: Size::new(100., 100.) };
-  let cnt = Stateful::new(0);
+  let mut cnt = Stateful::new(0);
   let cnt2 = cnt.clone();
   let w = fn_widget! {
     let boxes = pipe! {
@@ -357,7 +357,7 @@ widget_layout_test!(
 fn closure_in_fn_widget_capture() {
   let _guard = unsafe { AppCtx::new_lock_scope() };
 
-  let hi_res = Stateful::new(CowArc::borrowed(""));
+  let mut hi_res = Stateful::new(CowArc::borrowed(""));
   let hi_res2 = hi_res.clone();
   let w = fn_widget! {
     let mut text = @ Text { text: "hi" };
@@ -416,7 +416,7 @@ fn simple_ref_bind_work() {
 
   tap_at(&mut wnd, (1, 1));
 
-  wnd.layout();
+  wnd.draw_frame();
   assert_layout_result_by_path!(wnd, { path = [0], size == flex_size * 2., });
 }
 
@@ -506,7 +506,7 @@ fn expression_for_children() {
   assert_layout_result_by_path!(wnd, { path = [0, 4], size == ZERO_SIZE,});
 
   tap_at(&mut wnd, (0, 0));
-  wnd.layout();
+  wnd.draw_frame();
   assert_layout_result_by_path!(wnd, { path = [0], width == 25., height == 5.,});
   assert_layout_result_by_path!(wnd, { path = [0, 0], size == size_five,});
   assert_layout_result_by_path!(wnd, { path = [0, 1], size == size_five,});
@@ -610,8 +610,8 @@ fn builtin_ref() {
         size: Size::new(5., 5.),
         cursor: CursorIcon::Hand,
         on_tap: move |_| {
-          tap_box.cursor.set(CursorIcon::AllScroll);
-          c_icon_track.set(tap_box.cursor.get());
+          tap_box.cursor = CursorIcon::AllScroll;
+          c_icon_track.set(tap_box.cursor);
         }
       }
     }
@@ -832,7 +832,7 @@ fn fix_silent_not_relayout_dyn_widget() {
   wnd.draw_frame();
   assert_layout_result_by_path!(wnd, { path = [0], size == ZERO_SIZE,});
   {
-    *trigger_size.state_ref().silent() = Size::new(100., 100.);
+    **trigger_size.state_ref().silent() = Size::new(100., 100.);
   }
   // after silent modified, dyn widget not rebuild.
   wnd.draw_frame();
@@ -874,104 +874,3 @@ fn embed_shadow_states() {
     })
   };
 }
-
-#[test]
-fn untrack_prop_with_pure_lambda() {
-  let _guard = unsafe { AppCtx::new_lock_scope() };
-
-  let trigger = Stateful::new(0_u32);
-  let counter = Stateful::new(0_u32);
-  let w = widget! {
-    states {
-      trigger: trigger.clone(),
-      counter: counter.clone()
-    }
-    SizedBox {
-      id: host,
-      size: Size::new(50., 50.),
-    }
-    Animate {
-      id: animate,
-      transition: Transition {
-        delay:  None,
-        duration: Duration::from_millis(150),
-        easing: easing::EASE_IN,
-        repeat: None,
-      },
-      prop: prop!(host.size, move |from, to, rate| {
-        let _ = *trigger;
-        to.lerp(from, rate)
-      }),
-      from: Size::zero(),
-    }
-    finally {
-      let_watch!(animate.from)
-        .subscribe(move |_| {
-          *counter += 1;
-        });
-    }
-  };
-
-  let mut wnd = TestWindow::new(w);
-  wnd.draw_frame();
-
-  assert_eq!(*counter.state_ref(), 0);
-  *trigger.state_ref() += 1;
-  wnd.draw_frame();
-
-  assert_eq!(*counter.state_ref(), 0);
-}
-
-#[test]
-fn embed_widget() {
-  let _guard = unsafe { AppCtx::new_lock_scope() };
-
-  let _ = widget! {
-    Column {
-      widget! { // simple case & as first child
-        Container {
-          size: Size::new(10., 10.),
-        }
-      }
-      Container {
-        size: Size::zero(),
-      }
-      widget! { // all feature & as middle child
-        init ctx => {
-          let linear_transition = transitions::LINEAR.of(ctx);
-        }
-        Row {
-          SizedBox {
-            id: sized_box,
-            size: Size::new(100., 100.),
-            on_tap: move |_| {
-              leak_animate.run();
-            },
-          }
-        }
-        Animate {
-          id: leak_animate,
-          transition: linear_transition,
-          prop: prop!(sized_box.size),
-          from: ZERO_SIZE,
-        }
-        finally {
-          watch!(leak_animate.is_running())
-            .subscribe(move |v| println!("{v}"));
-        }
-      }
-      Container {
-        size: Size::zero(),
-      }
-      widget! {  // embed multi widget! & as last child
-        Row {
-          widget! {
-            Container {
-              size: Size::zero(),
-            }
-          }
-        }
-      }
-    }
-  };
-}
diff --git a/themes/material/src/lib.rs b/themes/material/src/lib.rs
index 74f815413..d490d5ff8 100644
--- a/themes/material/src/lib.rs
+++ b/themes/material/src/lib.rs
@@ -252,15 +252,11 @@ fn init_custom_style(theme: &mut FullTheme) {
 
 fn override_compose_decorator(theme: &mut FullTheme) {
   fn scrollbar_thumb(host: Widget, margin: EdgeInsets) -> Widget {
-    widget! {
-      init ctx => {
-        let background = Palette::of(ctx).primary();
-      }
-      DynWidget {
-        dyns: host,
+    fn_widget! {
+      @$host {
         margin,
         border_radius: Radius::all(4.),
-        background
+        background: Palette::of(ctx!()).primary(),
       }
     }
     .into()
@@ -268,142 +264,167 @@ fn override_compose_decorator(theme: &mut FullTheme) {
 
   let styles = &mut theme.compose_decorators;
   styles.override_compose_decorator::<HScrollBarThumbDecorator>(|this, host| {
-    widget! {
-      states { this }
-      init ctx => {
-        let  smooth_scroll = transitions::SMOOTH_SCROLL.of(ctx);
-      }
-      DynWidget {
-        id: thumb,
-        left_anchor: this.offset,
-        dyns: scrollbar_thumb(host, EdgeInsets::vertical(1.))
-      }
+    fn_widget! {
+      let host = scrollbar_thumb(host, EdgeInsets::vertical(1.));
+      let mut thumb = @ $host { left_anchor: pipe!($this.offset) };
 
-      transition prop!(thumb.left_anchor, PositionUnit::lerp_fn(thumb.layout_width())) {
-        by: smooth_scroll,
-      }
+      let left_trans = map_writer!($thumb.left_anchor);
+      left_trans.transition_with(
+        transitions::LINEAR.of(ctx!()),
+        move |from, to, rate| PositionUnit::lerp(from, to, rate, $thumb.layout_width()),
+        ctx!()
+      );
+
+      thumb
     }
     .into()
   });
   styles.override_compose_decorator::<VScrollBarThumbDecorator>(|this, host| {
-    widget! {
-      states { this }
-      init ctx => {
-        let smooth_scroll = transitions::SMOOTH_SCROLL.of(ctx);
-      }
-      DynWidget {
-        id: thumb,
-        top_anchor: this.offset,
-        dyns: scrollbar_thumb(host, EdgeInsets::vertical(1.))
-      }
+    fn_widget! {
+      let host = scrollbar_thumb(host, EdgeInsets::vertical(1.));
+      let mut thumb = @ $host { top_anchor: pipe!($this.offset) };
 
-      transition prop!(thumb.top_anchor, PositionUnit::lerp_fn(thumb.layout_height())) {
-        by: smooth_scroll
-      }
+      let top_trans = map_writer!($thumb.top_anchor);
+      top_trans.transition_with(
+        transitions::LINEAR.of(ctx!()),
+        move |from, to, rate| PositionUnit::lerp(from, to, rate, $thumb.layout_height()),
+        ctx!()
+      );
+
+      thumb
     }
     .into()
   });
   styles.override_compose_decorator::<IndicatorDecorator>(|style, host| {
-    widget! {
-      states { style }
-      init ctx => {
-        let ease_in = transitions::EASE_IN.of(ctx);
-      }
-      DynWidget {
-        id: indicator,
-        left_anchor: match style.pos {
-          Position::Top | Position::Bottom => style.rect.origin.x
-            + (style.rect.size.width - INDICATOR_SIZE) / 2.,
-          Position::Left => style.rect.size.width - style.extent,
-          Position::Right => 0.,
+    fn_widget! {
+      let mut indicator = @ $host {
+        left_anchor: pipe!{
+          let mut style = $style;
+          match style.pos {
+            Position::Top | Position::Bottom => style.rect.origin.x
+              + (style.rect.size.width - INDICATOR_SIZE) / 2.,
+            Position::Left => style.rect.size.width - style.extent,
+            Position::Right => 0.,
+          }
         },
-        top_anchor: match style.pos {
-          Position::Left | Position::Right => style.rect.origin.y
-            + (style.rect.size.height - INDICATOR_SIZE) / 2.,
-          Position::Top => style.rect.size.height - style.extent,
-          Position::Bottom => 0.,
+        top_anchor: pipe!{
+          let style = $style;
+          match style.pos {
+            Position::Left | Position::Right => style.rect.origin.y
+              + (style.rect.size.height - INDICATOR_SIZE) / 2.,
+            Position::Top => style.rect.size.height - style.extent,
+            Position::Bottom => 0.,
+          }
         },
-        dyns: host,
+      };
+
+      let ease_in = transitions::EASE_IN.of(ctx!());
+      match $style.pos {
+        Position::Top | Position::Bottom => {
+          let left = map_writer!($indicator.left_anchor);
+          left.transition_with(
+            ease_in.clone(),
+            move |from, to, rate| PositionUnit::lerp(from, to, rate, $style.rect.width()),
+            ctx!()
+          );
+
+        }
+        Position::Left | Position::Right => {
+          let top = map_writer!($indicator.top_anchor);
+          top.transition_with(
+            ease_in,
+            move |from, to, rate| PositionUnit::lerp(from, to, rate, $style.rect.height()),
+            ctx!()
+          );
+        }
       }
-      transition prop!(
-        indicator.left_anchor,
-        PositionUnit::lerp_fn(style.rect.size.width)
-      ) { by: ease_in.clone() }
-      transition prop!(
-        indicator.top_anchor,
-        PositionUnit::lerp_fn(style.rect.size.height)
-      ) { by: ease_in }
+
+      indicator
     }
     .into()
   });
   styles.override_compose_decorator::<CheckBoxDecorator>(move |style, host| {
-    widget! {
-      states { style }
-      Ripple {
+    fn_widget! {
+      @Ripple {
         center: true,
-        color: style.color,
+        color: pipe!($style.color),
         radius: 24.,
         bounded: RippleBound::Unbounded,
-        InteractiveLayer {
-          color: style.color, border_radii: Radius::all(24.),
-          DynWidget { dyns: host, margin: EdgeInsets::all(12.) }
+        @InteractiveLayer {
+          color: pipe!($style.color),
+          border_radii: Radius::all(24.),
+          @$host {
+            margin: EdgeInsets::all(12.)
+          }
         }
       }
     }
     .into()
   });
   styles.override_compose_decorator::<FilledButtonDecorator>(move |style, host| {
-    widget! {
-      init ctx => {
-        let palette1 = Palette::of(ctx).clone();
-        let palette2 = Palette::of(ctx).clone();
-      }
-      states { style }
-      Ripple {
+    fn_widget! {
+      @Ripple {
         center: false,
-        color: palette1.on_of(&palette1.base_of(&style.color)),
+        color: {
+          let palette = Palette::of(ctx!()).clone();
+          pipe!(palette.on_of(&palette.base_of(&$style.color)))
+        },
         bounded: RippleBound::Radius(Radius::all(20.)),
-        InteractiveLayer {
-          color: palette2.on_of(&palette2.base_of(&style.color)), border_radii: Radius::all(20.),
-          DynWidget { dyns: host, margin: EdgeInsets::all(0.) }
+        @InteractiveLayer {
+          border_radii: Radius::all(20.),
+          color: {
+            let palette = Palette::of(ctx!()).clone();
+            pipe!(palette.on_of(&palette.base_of(&$style.color)))
+          },
+          @$host {
+            margin: EdgeInsets::all(0.)
+          }
         }
       }
     }
     .into()
   });
   styles.override_compose_decorator::<OutlinedButtonDecorator>(move |style, host| {
-    widget! {
-      init ctx => {
-        let palette1 = Palette::of(ctx).clone();
-        let palette2 = Palette::of(ctx).clone();
-      }
-      states { style }
-      Ripple {
+    fn_widget! {
+      @Ripple {
         center: false,
-        color: palette1.base_of(&style.color),
+        color: {
+          let palette = Palette::of(ctx!()).clone();
+          pipe!(palette.base_of(&$style.color))
+        },
         bounded: RippleBound::Radius(Radius::all(20.)),
-        InteractiveLayer {
-          color: palette2.base_of(&style.color), border_radii: Radius::all(20.),
-          DynWidget { dyns: host, margin: EdgeInsets::all(0.) }
+        @InteractiveLayer {
+          border_radii: Radius::all(20.),
+          color: {
+            let palette = Palette::of(ctx!()).clone();
+            pipe!(palette.base_of(&$style.color))
+          },
+          @$host {
+            margin: EdgeInsets::all(0.)
+          }
         }
       }
     }
     .into()
   });
   styles.override_compose_decorator::<ButtonDecorator>(move |style, host| {
-    widget! {
-      init ctx => {
-        let palette1 = Palette::of(ctx).clone();
-        let palette2 = Palette::of(ctx).clone();
-      }
-      states { style }
-      Ripple {
+    fn_widget! {
+      @Ripple {
         center: false,
-        color: palette1.base_of(&style.color),
+        color: {
+          let palette = Palette::of(ctx!()).clone();
+          pipe!(palette.on_of(&palette.base_of(&$style.color)))
+        },
         bounded: RippleBound::Radius(Radius::all(20.)),
-        InteractiveLayer {
-          color: palette2.base_of(&style.color), border_radii: Radius::all(20.),
-          DynWidget { dyns: host, margin: EdgeInsets::all(0.) }
+        @InteractiveLayer {
+          border_radii: Radius::all(20.),
+          color: {
+            let palette = Palette::of(ctx!()).clone();
+            pipe!(palette.on_of(&palette.base_of(&$style.color)))
+          },
+          @$host {
+            margin: EdgeInsets::all(0.)
+          }
         }
       }
     }
diff --git a/themes/material/src/ripple.rs b/themes/material/src/ripple.rs
index aecaff681..4c4bb16f0 100644
--- a/themes/material/src/ripple.rs
+++ b/themes/material/src/ripple.rs
@@ -20,12 +20,12 @@ pub struct Ripple {
   /// How ripples show outside of the host widget box.
   pub bounded: RippleBound,
   /// The position of current animate launch start.
-  #[declare(skip)]
-  launch_pos: Option<Point>,
+  #[declare(default = Stateful::new(None))]
+  ripple_at: Stateful<Option<Point>>,
 }
 
 /// Config how ripples show outside of the host widget box.
-#[derive(Debug, PartialEq)]
+#[derive(Debug, PartialEq, Clone, Copy)]
 pub enum RippleBound {
   /// Ripples visible outside of the host widget.
   Unbounded,
@@ -38,87 +38,81 @@ pub enum RippleBound {
 impl ComposeChild for Ripple {
   type Child = Widget;
 
-  fn compose_child(this: State<Self>, child: Self::Child) -> Widget {
-    widget! {
-      states { this: this.into_writable() }
-      init ctx => {
-        let linear_transition = transitions::LINEAR.of(ctx);
-        let ease_out = transitions::EASE_OUT.of(ctx);
-      }
-      Stack {
-        id: container,
-        fit: StackFit::Passthrough,
-        on_pointer_down: move |e| this.launch_pos = if this.center {
-          let center = container.layout_size() / 2.;
-          Some(Point::new(center.width, center.height))
-        } else {
-          Some(e.position())
-        },
-        widget::from(child)
-        Option::map(this.launch_pos, |launch_at| {
-          let radius = this.radius.unwrap_or_else(|| {
-            let size = container.layout_size();
+  fn compose_child(mut this: State<Self>, child: Self::Child) -> Widget {
+    fn_widget! {
+      let mut container = @Stack { fit: StackFit::Passthrough };
+      let mut ripple_at = $this.ripple_at.clone_state();
+
+      let ripple_widget = pipe!(*$ripple_at)
+        .map(move |launch_at| {
+          let launch_at = launch_at?;
+          let radius = $this.radius.unwrap_or_else(|| {
+            let size = $container.layout_size();
             let distance_x = f32::max(launch_at.x , size.width - launch_at.x);
             let distance_y = f32::max(launch_at.y, size.height - launch_at.y);
             (distance_x.powf(2.) + distance_y.powf(2.)).sqrt()
           });
-          let linear_transition = linear_transition.clone();
-          let ease_out = ease_out.clone();
 
-          widget!{
-            IgnorePointer {
-              id: ripple,
-              opacity: 1.,
-              delay_drop_until: !ripper_fade_out.is_running(),
-              on_disposed: move |_| ripper_fade_out.run(),
-              DynWidget {
-                dyns: widget::then(this.bounded != RippleBound::Unbounded, || {
-                  let rect = Rect::from_size(container.layout_size());
-                  let path = match this.bounded {
-                    RippleBound::Unbounded => unreachable!(),
-                    RippleBound::Bounded => Path::rect(&rect),
-                    RippleBound::Radius(radius) => {
-                      Path::rect_round(&rect, &radius)
-                    }
-                  };
-                  Clip { clip: ClipType::Path(path) }
-                }),
-                Container {
-                  size: container.layout_size(),
-                  PathPaintKit {
-                    id: ripple_path,
-                    brush: StateRole::pressed().calc_color(this.color),
-                    path: Path::circle(launch_at, radius),
-                    on_mounted: move |_| { ripper_enter.run(); }
-                  }
-                }
-              }
-            }
-            Animate {
-              id: ripper_enter,
-              transition: linear_transition,
-              prop: prop!(ripple_path.path, move |_, _, rate| {
+          let mut ripple = @PathPaintKit {
+            brush: pipe!(StateRole::pressed().calc_color($this.color)),
+            path: Path::circle(launch_at, radius),
+          };
+
+          let mut ripper_enter = @Animate {
+            transition: transitions::LINEAR.of(ctx!()),
+            state: LerpFnState::new(
+              route_state!($ripple.path),
+              move |_, _, rate| {
                 let radius = Lerp::lerp(&0., &radius, rate);
-                let center = this.launch_pos.clone().unwrap();
-                Path::circle(center, radius)
-              }),
-              from: Path::circle(Point::zero(), 0.)
-            }
-            Animate {
-              id: ripper_fade_out,
-              from: 0.,
-              prop: prop!(ripple.opacity, |from, to, rate| to.lerp(from,rate)),
-              transition: ease_out,
-            }
-            finally {
-              let_watch!(!container.pointer_pressed() && !ripper_enter.is_running())
-              .filter(|b| *b)
-              .subscribe(move |_| {
-                this.launch_pos.take();
-              });
+                Path::circle(launch_at, radius)
+              }
+            ),
+            from: Path::circle(Point::zero(), 0.)
+          }.into_inner();
+
+          watch!(!$container.pointer_pressed() && !$ripper_enter.is_running())
+            .filter(|b| *b)
+            // the ripple used only once, so we unsubscribe it after the animate finished.
+            .take(1)
+            .subscribe(move |_| {
+              $ripple_at.take();
+            });
+
+
+          let mut ripper_fade_out = route_state!($ripple.opacity)
+            .transition(transitions::EASE_OUT.of(ctx!()), ctx!());
+
+          let bounded = $this.bounded;
+          let clipper = (bounded != RippleBound::Unbounded).then(|| {
+            let rect = Rect::from_size($container.layout_size());
+            let path = match bounded {
+              RippleBound::Unbounded => unreachable!(),
+              RippleBound::Bounded => Path::rect(&rect),
+              RippleBound::Radius(radius) => Path::rect_round(&rect, &radius)
+            };
+            @Clip { clip: ClipType::Path(path) }
+          });
+
+          Some(@IgnorePointer {
+            delay_drop_until: pipe!(!$ripper_fade_out.is_running()),
+            on_disposed: move |_| $ripple.opacity = 0.,
+            on_mounted: move |_| { ripper_enter.run(); },
+            @Container {
+              size: $container.layout_size(),
+              @$clipper { @ { ripple } }
             }
-          }
-        })
+          })
+      });
+
+      @ $container {
+        on_pointer_down: move |e| *$ripple_at = if $this.center {
+          let center = $container.layout_size() / 2.;
+          Some(Point::new(center.width, center.height))
+        } else {
+          Some(e.position())
+        },
+        @{ child }
+        @{ ripple_widget }
       }
     }
     .into()
@@ -127,5 +121,5 @@ impl ComposeChild for Ripple {
 
 impl Ripple {
   /// Manual launch a ripple animate at `pos`.
-  pub fn launch_at(&mut self, pos: Point) { self.launch_pos = Some(pos); }
+  pub fn launch_at(&mut self, pos: Point) { *self.ripple_at.state_ref() = Some(pos); }
 }
diff --git a/themes/material/src/state_layer.rs b/themes/material/src/state_layer.rs
index a5873fdc4..94ec49130 100644
--- a/themes/material/src/state_layer.rs
+++ b/themes/material/src/state_layer.rs
@@ -4,7 +4,7 @@ use ribir_widgets::{layout::Stack, path::PathPaintKit};
 
 /// Widget that as an visual indicator of material design used to present the
 /// interactive status of its child.
-#[derive(Declare)]
+#[derive(Declare, Declare2)]
 pub struct StateLayer {
   pub color: Color,
   pub path: Path,
@@ -23,14 +23,13 @@ pub struct InteractiveLayer {
 }
 
 impl Compose for StateLayer {
-  fn compose(this: State<Self>) -> Widget {
-    widget!(
-      states { this: this.into_readonly() }
-      PathPaintKit {
-        path: this.path.clone(),
-        brush: this.role.calc_color(this.color),
+  fn compose(mut this: State<Self>) -> Widget {
+    fn_widget! {
+      @PathPaintKit {
+        path: pipe!($this.path.clone()),
+        brush: pipe!($this.role.calc_color($this.color)),
       }
-    )
+    }
     .into()
   }
 }
@@ -38,31 +37,33 @@ impl Compose for StateLayer {
 impl ComposeChild for InteractiveLayer {
   type Child = Widget;
 
-  fn compose_child(this: State<Self>, child: Self::Child) -> Widget {
-    widget! {
-      states { this: this.into_readonly() }
-      Stack {
-        fit: StackFit::Passthrough,
-        DynWidget { id: host, dyns: child }
-        IgnorePointer {
-          Container {
-            size: host.layout_size(),
-            StateLayer {
-              color: this.color,
-              path: Path::rect_round(&host.layout_rect(), &this.border_radii),
-              role: if host.pointer_pressed() {
-                StateRole::pressed()
-              } else if host.has_focus() {
-                StateRole::focus()
-              } else if host.mouse_hover() {
-                StateRole::hover()
-              } else {
-                // todo: not support drag & drop now
-                StateRole::custom(0.)
-              }
-            }
+  fn compose_child(mut this: State<Self>, child: Self::Child) -> Widget {
+    fn_widget! {
+      let mut host = @$child { };
+      let layer = @IgnorePointer {
+        @Container {
+          size: pipe!($host.layout_size()),
+          @StateLayer {
+            color: pipe!($this.color),
+            path: pipe!(Path::rect_round(&$host.layout_rect(), &$this.border_radii)),
+            role: pipe!(if $host.pointer_pressed() {
+              StateRole::pressed()
+            } else if $host.has_focus() {
+              StateRole::focus()
+            } else if $host.mouse_hover() {
+              StateRole::hover()
+            } else {
+              // todo: not support drag & drop now
+              StateRole::custom(0.)
+            })
           }
         }
+      };
+
+      @Stack {
+        fit: StackFit::Passthrough,
+        @{ host }
+        @{ layer }
       }
     }
     .into()
diff --git a/widgets/src/buttons.rs b/widgets/src/buttons.rs
index 8ca457a82..daeb5d8df 100644
--- a/widgets/src/buttons.rs
+++ b/widgets/src/buttons.rs
@@ -50,38 +50,36 @@ pub struct ButtonTemplate {
 impl ComposeChild for ButtonImpl {
   type Child = ButtonTemplate;
 
-  fn compose_child(this: State<Self>, child: Self::Child) -> Widget {
+  fn compose_child(mut this: State<Self>, child: Self::Child) -> Widget {
     let ButtonTemplate { icon, label } = child;
-    widget! {
-      states { this: this.into_readonly() }
-      BoxDecoration {
-        border_radius: this.radius.map(Radius::all),
-        background: this.background_color.clone(),
-        border: this.border_style.clone(),
-        ConstrainedBox {
-          clamp: BoxClamp::min_width(this.min_width).with_fixed_height(this.height),
-          DynWidget {
-            dyns: Option::map(this.padding_style, |padding| Padding { padding }),
-            Row {
-              justify_content: JustifyContent::Center,
-              align_items: Align::Center,
-              Option::map(icon, |icon| widget! {
-                Icon {
-                  size: this.icon_size,
-                  widget::from(icon)
-                }
-              })
-              Option::map(label, |label| widget! {
-                states { text: label.into_readonly() }
-                Margin {
-                  margin: EdgeInsets::horizontal(this.label_gap),
-                  Text {
-                    text: text.0.clone(),
-                    foreground: this.foreground_color.clone(),
-                    text_style: this.label_style.clone()
-                  }
-                }
-              })
+    fn_widget! {
+      @BoxDecoration {
+        border_radius: pipe!($this.radius.map(Radius::all)),
+        background: pipe!($this.background_color.clone()),
+        border: pipe!($this.border_style.clone()),
+        @ConstrainedBox {
+          clamp: pipe!(BoxClamp::min_width($this.min_width)
+            .with_fixed_height($this.height)),
+          @{
+            let padding = pipe!($this.padding_style.map(|padding| Padding { padding }));
+            let icon = icon.map(|icon| @Icon {
+              size: pipe!($this.icon_size),
+              @{ icon }
+            });
+            let label = label.map(|mut label| @Text {
+              margin: pipe!(EdgeInsets::horizontal($this.label_gap)),
+              text: pipe!($label.0.clone()),
+              foreground: pipe!($this.foreground_color.clone()),
+              text_style: pipe!($this.label_style.clone())
+            });
+
+            @$ padding {
+              @Row {
+                justify_content: JustifyContent::Center,
+                align_items: Align::Center,
+                @ { icon }
+                @{ label }
+              }
             }
           }
         }
diff --git a/widgets/src/checkbox.rs b/widgets/src/checkbox.rs
index 67d3d5981..157bf4fbe 100644
--- a/widgets/src/checkbox.rs
+++ b/widgets/src/checkbox.rs
@@ -5,7 +5,7 @@ use crate::{
 use ribir_core::prelude::*;
 
 /// Represents a control that a user can select and clear.
-#[derive(Clone, Declare)]
+#[derive(Clone, Declare, Declare2)]
 pub struct Checkbox {
   #[declare(default)]
   pub checked: bool,
@@ -77,10 +77,9 @@ impl Checkbox {
     .into()
   }
 
-  fn label(mut label: State<Label>, label_color: Brush, text_style: CowArc<TextStyle>) -> Widget {
-    let label = label.clone();
+  fn label(label: Stateful<Label>, label_color: Brush, text_style: CowArc<TextStyle>) -> Widget {
     widget! {
-      states { label: label.into_readonly() }
+      states { label }
       Text {
         text: label.0.clone(),
         foreground: label_color,
@@ -119,12 +118,12 @@ impl ComposeChild for Checkbox {
               Row {
                 Multi::new(match &mut child {
                   CheckboxTemplate::Before(w) => [
-                    Checkbox::label(w.child.clone(), label_color.clone(), label_style.clone()),
+                    Checkbox::label(w.child.clone_state(), label_color.clone(), label_style.clone()),
                     Checkbox::icon(this.clone_stateful(), icon_size),
                   ],
                   CheckboxTemplate::After(w) => [
                     Checkbox::icon(this.clone_stateful(), icon_size),
-                    Checkbox::label(w.child.clone(), label_color.clone(), label_style.clone()),
+                    Checkbox::label(w.child.clone_state(), label_color.clone(), label_style.clone()),
                   ],
                 })
               }
diff --git a/widgets/src/input.rs b/widgets/src/input.rs
index d847b33fc..9ce70fc96 100644
--- a/widgets/src/input.rs
+++ b/widgets/src/input.rs
@@ -33,7 +33,7 @@ impl CustomStyle for InputStyle {
   fn default_style(_: &BuildCtx) -> Self { InputStyle { size: Some(20.) } }
 }
 
-#[derive(Declare)]
+#[derive(Declare, Declare2)]
 pub struct Input {
   #[declare(default = TypographyTheme::of(ctx).body_large.text.clone())]
   pub style: CowArc<TextStyle>,
diff --git a/widgets/src/input/editarea.rs b/widgets/src/input/editarea.rs
index ca95b34d7..478f4a295 100644
--- a/widgets/src/input/editarea.rs
+++ b/widgets/src/input/editarea.rs
@@ -105,7 +105,7 @@ impl ComposeChild for TextEditorArea {
         .filter(|msg| matches!(msg, FrameMsg::LayoutReady(_)));
 
       selectable.modifies()
-        .merge(observable::of(()))
+        .merge(observable::of(ModifyScope::BOTH))
         .sample(tick_of_layout_ready)
         .subscribe(move |_| {
           let (offset, height) = selectable.cursor_layout();
diff --git a/widgets/src/input/handle.rs b/widgets/src/input/handle.rs
index c1a8aafcb..21053cceb 100644
--- a/widgets/src/input/handle.rs
+++ b/widgets/src/input/handle.rs
@@ -1,7 +1,7 @@
 use std::ops::{Deref, DerefMut};
 
 use ribir_core::prelude::{
-  AppCtx, CharsEvent, GraphemeCursor, KeyboardEvent, StatefulRef, TextWriter, VirtualKeyCode,
+  AppCtx, CharsEvent, GraphemeCursor, KeyboardEvent, RefState, TextWriter, VirtualKeyCode,
 };
 
 #[macro_export]
@@ -50,7 +50,7 @@ macro_rules! declare_writer {
 declare_writer!(InputWriter, TextEditorArea);
 use super::TextEditorArea;
 impl TextEditorArea {
-  pub(crate) fn edit_handle(this: &mut StatefulRef<TextEditorArea>, event: &mut CharsEvent) {
+  pub(crate) fn edit_handle(this: &mut RefState<TextEditorArea>, event: &mut CharsEvent) {
     if event.common.with_command_key() {
       return;
     }
@@ -67,7 +67,7 @@ impl TextEditorArea {
     }
   }
 
-  pub(crate) fn key_handle(this: &mut StatefulRef<TextEditorArea>, event: &mut KeyboardEvent) {
+  pub(crate) fn key_handle(this: &mut RefState<TextEditorArea>, event: &mut KeyboardEvent) {
     let mut deal = false;
     if event.with_command_key() {
       deal = key_with_command(this, event)
@@ -78,7 +78,7 @@ impl TextEditorArea {
   }
 }
 
-fn key_with_command(this: &mut StatefulRef<TextEditorArea>, event: &mut KeyboardEvent) -> bool {
+fn key_with_command(this: &mut RefState<TextEditorArea>, event: &mut KeyboardEvent) -> bool {
   if !event.with_command_key() {
     return false;
   }
@@ -111,7 +111,7 @@ fn key_with_command(this: &mut StatefulRef<TextEditorArea>, event: &mut Keyboard
   }
 }
 
-fn single_key(this: &mut StatefulRef<TextEditorArea>, key: &mut KeyboardEvent) -> bool {
+fn single_key(this: &mut RefState<TextEditorArea>, key: &mut KeyboardEvent) -> bool {
   match key.key {
     VirtualKeyCode::NumpadEnter | VirtualKeyCode::Return => {
       if this.multi_line {
diff --git a/widgets/src/input/text_selectable.rs b/widgets/src/input/text_selectable.rs
index 88a393698..5e373b490 100644
--- a/widgets/src/input/text_selectable.rs
+++ b/widgets/src/input/text_selectable.rs
@@ -103,11 +103,7 @@ impl TextSelectable {
   fn selected_rect(&self) -> Vec<Rect> { self.helper.selection(&self.caret.select_range()) }
 }
 
-fn key_handle(
-  this: &mut StatefulRef<TextSelectable>,
-  text: &CowArc<str>,
-  event: &mut KeyboardEvent,
-) {
+fn key_handle(this: &mut RefState<TextSelectable>, text: &CowArc<str>, event: &mut KeyboardEvent) {
   let mut deal = false;
   if event.with_command_key() {
     deal = deal_with_command(this, text, event);
@@ -119,7 +115,7 @@ fn key_handle(
 }
 
 fn deal_with_command(
-  this: &mut StatefulRef<TextSelectable>,
+  this: &mut RefState<TextSelectable>,
   text: &CowArc<str>,
   event: &mut KeyboardEvent,
 ) -> bool {
@@ -150,11 +146,7 @@ fn is_move_by_word(event: &KeyboardEvent) -> bool {
   return event.with_ctrl_key();
 }
 
-fn deal_with_selection(
-  this: &mut StatefulRef<TextSelectable>,
-  text: &str,
-  event: &mut KeyboardEvent,
-) {
+fn deal_with_selection(this: &mut RefState<TextSelectable>, text: &str, event: &mut KeyboardEvent) {
   let old_caret = this.caret;
   match event.key {
     VirtualKeyCode::Left => {
diff --git a/widgets/src/layout/constrained_box.rs b/widgets/src/layout/constrained_box.rs
index 56c4aa166..858d29ff1 100644
--- a/widgets/src/layout/constrained_box.rs
+++ b/widgets/src/layout/constrained_box.rs
@@ -1,7 +1,7 @@
 use ribir_core::{impl_query_self_only, prelude::*};
 
 /// a widget that imposes additional constraints clamp on its child.
-#[derive(SingleChild, Declare, Clone)]
+#[derive(SingleChild, Declare, Declare2, Clone)]
 pub struct ConstrainedBox {
   pub clamp: BoxClamp,
 }
diff --git a/widgets/src/layout/container.rs b/widgets/src/layout/container.rs
index 77fe09892..fd82a9846 100644
--- a/widgets/src/layout/container.rs
+++ b/widgets/src/layout/container.rs
@@ -1,7 +1,7 @@
 use ribir_core::prelude::*;
 
 /// Widget with fixed size as a container for its child.
-#[derive(Declare, SingleChild)]
+#[derive(Declare, Declare2, SingleChild)]
 pub struct Container {
   pub size: Size,
 }
diff --git a/widgets/src/layout/expanded.rs b/widgets/src/layout/expanded.rs
index dada9ae00..5bc64c79a 100644
--- a/widgets/src/layout/expanded.rs
+++ b/widgets/src/layout/expanded.rs
@@ -5,7 +5,7 @@ use super::ConstrainedBox;
 /// A widget that expanded a child of `Flex`, so that the child fills the
 /// available space. If multiple children are expanded, the available space is
 /// divided among them according to the flex factor.
-#[derive(Clone, PartialEq, Declare)]
+#[derive(Clone, PartialEq, Declare, Declare2)]
 pub struct Expanded {
   pub flex: f32,
 }
diff --git a/widgets/src/lists.rs b/widgets/src/lists.rs
index 177c1c240..2ef031307 100644
--- a/widgets/src/lists.rs
+++ b/widgets/src/lists.rs
@@ -176,21 +176,18 @@ pub struct HeadlineText(pub Label);
 pub struct SupportingText(pub Label);
 
 #[derive(Template)]
-pub enum EdgeWidget<P: TmlFlag + Default + 'static> {
-  Text(DecorateTml<P, State<Label>>),
-  Icon(DecorateTml<P, NamedSvg>),
-  Avatar(DecorateTml<P, ComposePair<State<Avatar>, AvatarTemplate>>),
-  Image(DecorateTml<P, ShareResource<PixelImage>>),
-  Poster(DecorateTml<P, Poster>),
-  Custom(DecorateTml<P, CustomEdgeWidget>),
+pub enum EdgeWidget {
+  Text(State<Label>),
+  Icon(NamedSvg),
+  Avatar(ComposePair<State<Avatar>, AvatarTemplate>),
+  Image(ShareResource<PixelImage>),
+  Poster(Poster),
+  Custom(CustomEdgeWidget),
 }
 
 pub struct CustomEdgeWidget(pub Widget);
 
-impl<P> EdgeWidget<P>
-where
-  P: TmlFlag + Default,
-{
+impl EdgeWidget {
   fn compose_with_style(self, config: EdgeWidgetStyle) -> Widget {
     let EdgeWidgetStyle {
       icon,
@@ -206,7 +203,7 @@ where
           dyns: icon.gap.map(|margin| Margin { margin }),
           Icon {
             size: icon.size,
-            widget::from(w.decorate(|_, c| c.into()))
+            widget::from(w)
           }
         }
       }
@@ -214,21 +211,21 @@ where
       EdgeWidget::Text(w) => widget! {
         DynWidget {
           dyns: text.gap.map(|margin| Margin { margin }),
-          widget::from(w.decorate(|_, label| widget!{
-            states { label: label.into_readonly() }
+          widget!{
+            states { label: w.into_readonly() }
             Text {
               text: label.0.clone(),
               text_style: text.style.clone(),
               foreground: text.foreground.clone(),
             }
-          }.into()))
+          }
         }
       }
       .into(),
       EdgeWidget::Avatar(w) => widget! {
         DynWidget {
           dyns: avatar.gap.map(|margin| Margin { margin }),
-          DecorateTml::decorate(w, |_, c| c.into())
+          widget::from(w)
         }
       }
       .into(),
@@ -239,7 +236,7 @@ where
             size: image.size,
             DynWidget {
               box_fit: BoxFit::None,
-              dyns: w.decorate(|_, c| c.into())
+              dyns: w
             }
           }
         }
@@ -252,7 +249,7 @@ where
             size: poster.size,
             DynWidget {
               box_fit: BoxFit::None,
-              dyns: w.decorate(|_, c| c.0.into())
+              dyns: w.0
             }
           }
         }
@@ -261,7 +258,7 @@ where
       EdgeWidget::Custom(w) => widget! {
         DynWidget {
           dyns: custom.gap.map(|margin| Margin { margin }),
-          widget::from(w.decorate(|_, c| c.0))
+          widget::from(w.0)
         }
       }
       .into(),
@@ -273,78 +270,83 @@ where
 pub struct ListItemTml {
   headline: State<HeadlineText>,
   supporting: Option<State<SupportingText>>,
-  leading: Option<EdgeWidget<Leading>>,
-  trailing: Option<EdgeWidget<Trailing>>,
+  leading: Option<FatObj<SinglePair<Leading, EdgeWidget>>>,
+  trailing: Option<FatObj<SinglePair<Trailing, EdgeWidget>>>,
 }
 
 impl ComposeChild for ListItem {
   type Child = ListItemTml;
 
-  fn compose_child(this: State<Self>, child: Self::Child) -> Widget {
+  fn compose_child(mut this: State<Self>, child: Self::Child) -> Widget {
     let ListItemTml {
-      headline,
+      mut headline,
       supporting,
       leading,
       trailing,
     } = child;
 
-    widget! {
-      states {
-        this: this.into_readonly(),
-        headline: headline.into_readonly(),
-      }
-      init ctx => {
-        let palette = Palette::of(ctx);
-        let on_surface: Brush = palette.on_surface().clone().into();
-        let on_surface_variant: Brush = palette.on_surface_variant().clone().into();
-        let ListItemStyle {
-          padding_style,
-          label_gap,
-          headline_style,
-          supporting_style,
-          leading_config,
-          trailing_config,
-          item_align,
-        } = ListItemStyle::of(ctx).clone();
-        let TextStyle { line_height, font_size, .. } = *supporting_style.clone();
-        let line_height = line_height
-          .map_or(font_size, FontSize::Em)
-          .into_pixel();
-        let text_height = line_height * this.line_number as f32;
-      }
-      ListItemDecorator {
-        color: this.active_background,
+    fn_widget! {
+      let palette = Palette::of(ctx!());
+      let ListItemStyle {
+        padding_style,
+        label_gap,
+        headline_style,
+        supporting_style,
+        leading_config,
+        trailing_config,
+        item_align,
+      } = ListItemStyle::of(ctx).clone();
+
+      let padding = padding_style.map(|padding| Padding { padding });
+      let label_gap = label_gap.map(|padding| Padding { padding });
+
+      @ListItemDecorator {
+        color: pipe!($this.active_background),
         is_active: false,
-        DynWidget {
-          dyns: padding_style.map(|padding| Padding { padding }),
-          Row {
-            align_items: item_align(this.line_number),
-            Option::map(leading, |w| w.compose_with_style(leading_config))
-            Expanded {
+        @ $padding {
+          @Row {
+            align_items: pipe!(item_align($this.line_number)),
+            @{
+              leading.map(|w| {
+                let (SinglePair { child,.. }, builtin) = w.unzip();
+                builtin.compose_with_host(child.compose_with_style(leading_config), ctx!())
+              })
+            }
+            @Expanded {
               flex: 1.,
-              DynWidget {
-                dyns: label_gap.map(|padding| Padding { padding }),
-                Column {
-                  Text {
-                    text: headline.0.0.clone(),
-                    foreground: on_surface,
-                    text_style: headline_style.clone(),
+              @ $label_gap {
+                @Column {
+                  @Text {
+                    text: pipe!($headline.0.0.clone()),
+                    foreground: palette.on_surface().clone(),
+                    text_style: headline_style,
                   }
-                  Option::map(supporting, |supporting| widget! {
-                    states { supporting: supporting.into_readonly() }
-                    ConstrainedBox {
-                      clamp: BoxClamp::fixed_height(*text_height.0),
-                      Text {
-                        text: supporting.0.0.clone(),
-                        foreground: on_surface_variant.clone(),
-                        text_style: supporting_style.clone(),
+                  @{ supporting.map(|mut supporting|  {
+                    @ConstrainedBox {
+                      clamp: {
+                        let TextStyle { line_height, font_size, .. } = &*supporting_style;
+                        let line_height = line_height.map_or(*font_size, FontSize::Em).into_pixel();
+                        pipe!{
+                          let text_height = line_height * $this.line_number as f32;
+                          BoxClamp::fixed_height(*text_height.0)
+                        }
+                      } ,
+                      @Text {
+                        text: pipe!($supporting.0.0.clone()),
+                        foreground:  palette.on_surface_variant().clone(),
+                        text_style: supporting_style,
                       }
                     }
-                  })
+                  })}
                 }
               }
             }
-            Option::map(trailing, |w| w.compose_with_style(trailing_config))
+            @{
+              trailing.map(|w| {
+                let (SinglePair { child,.. }, builtin) = w.unzip();
+                builtin.compose_with_host(child.compose_with_style(trailing_config), ctx!())
+              })
+            }
           }
         }
       }
@@ -451,7 +453,7 @@ impl CustomStyle for ListItemStyle {
   }
 }
 
-#[derive(Clone, Declare)]
+#[derive(Clone, Declare, Declare2)]
 pub struct ListItemDecorator {
   pub color: Color,
   pub is_active: bool,
diff --git a/widgets/src/path.rs b/widgets/src/path.rs
index 87ca6220b..0344284bb 100644
--- a/widgets/src/path.rs
+++ b/widgets/src/path.rs
@@ -2,7 +2,7 @@ use ribir_core::{impl_query_self_only, prelude::*};
 
 /// Widget just use as a paint kit for a path and not care about its size. Use
 /// `[PathWidget]!` instead of.
-#[derive(Declare, Clone)]
+#[derive(Declare, Declare2, Clone)]
 pub struct PathPaintKit {
   pub path: Path,
   #[declare(convert=into)]
diff --git a/widgets/src/text_field.rs b/widgets/src/text_field.rs
index 79d36a3a9..29b802ef3 100644
--- a/widgets/src/text_field.rs
+++ b/widgets/src/text_field.rs
@@ -1,9 +1,4 @@
-use crate::{
-  common_widget::{Leading, LeadingText, Trailing, TrailingText},
-  input::Placeholder,
-  layout::{Column, ConstrainedBox, Container},
-  prelude::{Expanded, Icon, Input, Label, Row, Stack, Text},
-};
+use crate::prelude::*;
 use ribir_core::prelude::*;
 use std::{collections::HashMap, hash::Hash, ops::Deref};
 
@@ -94,8 +89,8 @@ where
   fn get(&self, state: S) -> Option<&T> { self.themes.get(&state) }
 }
 
-#[derive(Declare)]
-struct ThemeSuitProxy<S, T>
+#[derive(Declare, Declare2)]
+struct ThemeSuitProxy<S: 'static, T: 'static>
 where
   S: Hash + Eq,
 {
@@ -107,32 +102,27 @@ type TextFieldThemeProxy = ThemeSuitProxy<TextFieldState, TextFieldTheme>;
 
 impl ComposeChild for TextFieldThemeProxy {
   type Child = Widget;
-  fn compose_child(this: State<Self>, child: Self::Child) -> Widget
-  where
-    Self: Sized,
-  {
-    widget! {
-      states {this: this.into_writable()}
-      DynWidget {
-        dyns: {
-          child
-        },
+  fn compose_child(mut this: State<Self>, child: Self::Child) -> Widget {
+    fn_widget! {
+      @ $child {
         on_tap: move |_| {
+          let mut this = $this;
           match this.state {
             TextFieldState::Enabled => this.state = TextFieldState::Focused,
             TextFieldState::Hovered => this.state = TextFieldState::Focused,
             _ => (),
           };
         },
-
         on_pointer_move: move |_| {
+          let mut this = $this;
           if this.state == TextFieldState::Enabled { this.state = TextFieldState::Hovered }
         },
-
         on_pointer_leave: move |_| {
+          let mut this = $this;
           if this.state == TextFieldState::Hovered { this.state = TextFieldState::Enabled }
         },
         on_focus_out: move |_| {
+          let mut this = $this;
           if this.state == TextFieldState::Focused { this.state = TextFieldState::Enabled }
         },
       }
@@ -291,59 +281,46 @@ macro_rules! take_option_field {
 
 impl ComposeChild for TextField {
   type Child = Option<TextFieldTml>;
-  fn compose_child(this: State<Self>, config: Self::Child) -> Widget
-  where
-    Self: Sized,
-  {
-    let mut config = config.unwrap_or_default();
-    widget! {
-      states {
-        this: this.into_writable(),
-      }
-      init ctx => {
-        let theme_suit = TextFieldThemeSuit::of(ctx).clone();
-      }
-      init {
-        take_option_field!({leading_icon, trailing_icon}, config);
-      }
+  fn compose_child(mut this: State<Self>, config: Self::Child) -> Widget {
+    fn_widget! {
+      let mut config = config.unwrap_or_default();
+      take_option_field!({leading_icon, trailing_icon}, config);
 
-      TextFieldThemeProxy {
-        id: theme,
+      let theme_suit = TextFieldThemeSuit::of(ctx!());
+      let mut theme = @TextFieldThemeProxy {
         suit: theme_suit,
         state: TextFieldState::default(),
-
-          Stack {
-            Container {
-              size: Size::new(0., theme.container_height),
-              background: theme.container_color,
-            }
-            Row {
-              ConstrainedBox {
-                clamp: BoxClamp::EXPAND_Y,
-                DynWidget {
-                  v_align: VAlign::Center,
-                  dyns: build_icon(leading_icon.map(|l| l.child))
-                }
-              }
-              Expanded {
-                flex: 1.,
-                build_content_area(no_watch!(&mut this), no_watch!(&mut theme), config)
-              }
-              ConstrainedBox {
-                clamp: BoxClamp::EXPAND_Y,
-                DynWidget {
-                  v_align: VAlign::Center,
-                  dyns: build_icon(trailing_icon.map(|t| t.child))
-                }
-              }
-            }
-
-            Container {
-              v_align: VAlign::Bottom,
-              size: Size::new(f32::MAX, theme.indicator_height),
-              background: theme.indicator,
-            }
+      };
+      @Stack {
+        @Container {
+          size: pipe!(Size::new(0., $theme.container_height)),
+          background: pipe!($theme.container_color),
+        }
+        @Row {
+          justify_content: JustifyContent::Center,
+          align_items: Align::Stretch,
+          @{
+            leading_icon.map(|t| @Icon {
+              size: IconSize::of(ctx!()).small,
+              @{ t.child }
+            })
+          }
+          @Expanded {
+            flex: 1.,
+            @{ build_content_area(this.clone_state(), theme.clone_state(), config) }
+          }
+          @{
+            trailing_icon.map(|t| @Icon {
+              size: IconSize::of(ctx!()).small,
+              @{ t.child }
+            })
           }
+        }
+        @Container {
+          v_align: VAlign::Bottom,
+          size: pipe!(Size::new(f32::MAX, $theme.indicator_height)),
+          background: pipe!($theme.indicator),
+        }
       }
     }
     .into()
@@ -351,169 +328,113 @@ impl ComposeChild for TextField {
 }
 
 fn build_input_area(
-  this: &mut StatefulRef<TextField>,
-  theme: &mut StatefulRef<TextFieldThemeProxy>,
+  mut this: Stateful<TextField>,
+  mut theme: Stateful<TextFieldThemeProxy>,
   prefix: Option<LeadingText>,
   suffix: Option<TrailingText>,
   placeholder: Option<Placeholder>,
 ) -> Widget {
-  fn text_label(text: CowArc<str>, theme: StatefulRef<TextFieldThemeProxy>) -> Text {
-    Text {
-      text,
-      foreground: theme.foreground.clone(),
-      text_style: theme.text.clone(),
-      path_style: PathPaintStyle::Fill,
-      overflow: Overflow::Clip,
-      text_align: TextAlign::Start,
-    }
-  }
+  fn_widget! {
+    let mut input_area = @Row {
+      visible: pipe!(!$this.text.is_empty() || $theme.state == TextFieldState::Focused),
+    };
 
-  widget! {
-    states { this: this.clone_stateful(), theme: theme.clone_stateful() }
-    init ctx => {
-      let linear = transitions::LINEAR.of(ctx);
-      let prefix = prefix.map(move |p| p.child);
-      let suffix = suffix.map(move|s| s.child);
-    }
-    Row {
-      id: input_area,
-      visible: !this.text.is_empty() || theme.state == TextFieldState::Focused,
-      Option::map(prefix.clone(), move |text| text_label(text, theme))
-      Expanded {
-        flex: 1.,
-        Input {
-          id: input,
-          style: theme.text.clone(),
-          widget::from(placeholder)
-        }
-      }
-      Option::map(suffix.clone(),   move |text| text_label(text, theme))
+    let mut visible = route_state!($input_area.visible);
+    visible.transition(transitions::LINEAR.of(ctx!()), ctx!());
 
-    }
-    transition prop!(input_area.visible, move |_from, to, rate| *to && rate >= 1.) {
-      by: linear,
-    }
+    let mut input = @Input{ style: pipe!($theme.text.clone()) };
+    $input.set_text($this.text.clone());
 
-    finally {
-      input.set_text(this.text.clone());
-      let_watch!(input.text())
-        .distinct_until_changed()
-        .subscribe(move |val| {
-          this.silent().text = val;
-        });
-      let_watch!(this.text.clone())
-        .distinct_until_changed()
-        .subscribe(move |val| input.set_text(val));
-      let_watch!(theme.state)
-        .distinct_until_changed()
-        .subscribe(move |state| {
-          if state == TextFieldState::Focused {
-            input.request_focus();
-          }
-        });
+    watch!($input.text())
+      .distinct_until_changed()
+      .subscribe(move |val| $this.silent().text = val);
+
+    watch!($this.text.clone())
+      .distinct_until_changed()
+      .subscribe(move |val| $input.set_text(val));
+
+    let h = watch!($theme.state)
+      .distinct_until_changed()
+      .filter(|state| state == &TextFieldState::Focused)
+      .subscribe(move |_| $input.request_focus())
+      .unsubscribe_when_dropped();
+    input.own_data(h);
+
+
+    @Row {
+      @{
+        prefix.map(|p| @Text{
+          text: p.child,
+          foreground: pipe!($theme.foreground.clone()),
+          text_style: pipe!($theme.text.clone()),
+        })
+      }
+      @Expanded {
+        flex: 1.,
+        @ $input { @{placeholder} }
+      }
+      @{
+        suffix.map(|s| @Text{
+          text: s.child,
+          foreground: pipe!($theme.foreground.clone()),
+          text_style: pipe!($theme.text.clone()),
+        })
+      }
     }
   }
   .into()
 }
 
-#[derive(Declare)]
+#[derive(Declare, Declare2)]
 struct TextFieldLabel {
   text: CowArc<str>,
   style: CowArc<TextStyle>,
 }
 
 impl Compose for TextFieldLabel {
-  fn compose(this: State<Self>) -> Widget {
-    widget! {
-      states { this: this.into_readonly() }
-      init ctx => {
-        let linear = transitions::LINEAR.of(ctx);
-      }
-      Text {
-        id: label,
+  fn compose(mut this: State<Self>) -> Widget {
+    fn_widget! {
+      let label = @Text {
         v_align: VAlign::Top,
-        text: this.text.clone(),
-        text_style: this.style.clone(),
-      }
+        text: pipe!($this.text.clone()),
+        text_style: pipe!($this.style.clone()),
+      };
 
-      // todo: prop with inner field's property
-      // transition prop!(label.style.font_size) {
-      //   by: transitions::LINEAR.of(ctx)
-      // }
-      transition prop!(label.text_style, move |from, to, rate| {
-        let from_size = from.font_size.into_pixel();
-        let to_size = to.font_size.into_pixel();
-
-        let mut res = to.clone();
-        res.to_mut().font_size = FontSize::Pixel(Pixel(from_size.0.lerp(&to_size.0, rate).into()));
-        res
-      }) {
-        by: linear,
-      }
+      let mut font_size = route_state!($this.style.font_size);
+      font_size.transition(transitions::LINEAR.of(ctx!()), ctx!());
+
+      label
     }
     .into()
   }
 }
 
 fn build_content_area(
-  this: &mut StatefulRef<TextField>,
-  theme: &mut StatefulRef<TextFieldThemeProxy>,
+  mut this: Stateful<TextField>,
+  mut theme: Stateful<TextFieldThemeProxy>,
   mut config: TextFieldTml,
 ) -> Widget {
-  widget! {
-    states { this: this.clone_stateful(), theme: theme.clone_stateful(), }
-    init ctx => {
-      let linear = transitions::LINEAR.of(ctx);
-    }
-    init {
-      take_option_field!({label, prefix, suffix, placeholder}, config);
-    }
-    Column {
-      id: content_area,
-      padding: theme.input_padding(this.text.is_empty()),
-
-      DynWidget {
-        dyns: label.map(move |label| {
-          widget! {
-            Expanded {
-              flex: 1.,
-              TextFieldLabel {
-                text: label.0.clone(),
-                style: theme.label_style(this.text.is_empty()),
-              }
-            }
+  fn_widget! {
+    take_option_field!({label, prefix, suffix, placeholder}, config);
+    let mut content_area = @Column {
+      padding: pipe!($theme.input_padding($this.text.is_empty())),
+    };
+
+    let mut padding = route_state!($content_area.padding);
+    padding.transition(transitions::LINEAR.of(ctx!()), ctx!());
+
+    @ $content_area {
+      @ {
+        label.map(|label| @Expanded {
+          flex: 1.,
+          @TextFieldLabel {
+            text: label.0,
+            style: pipe!($theme.label_style($this.text.is_empty())),
           }
         })
       }
-      build_input_area(
-        no_watch!(&mut this),
-        no_watch!(&mut theme),
-        prefix,
-        suffix,
-        placeholder
-      )
+      @ { build_input_area(this.clone(), theme.clone(), prefix, suffix, placeholder)}
     }
-
-    transition prop!(content_area.padding) { by: linear }
   }
   .into()
 }
-
-fn build_icon(icon: Option<Widget>) -> Widget {
-  if icon.is_some() {
-    widget! {
-      init ctx => {
-        let icon_size = IconSize::of(ctx).small;
-      }
-      Icon {
-        size: icon_size,
-        DynWidget {
-          dyns: icon.unwrap()
-        }
-      }
-    }
-    .into()
-  } else {
-    Void.into()
-  }
-}

From b6ef2f26f337b34ccd0bbf4329b056d989937e82 Mon Sep 17 00:00:00 2001
From: Adoo <Adoo@outlook.com>
Date: Mon, 11 Sep 2023 14:45:26 +0800
Subject: [PATCH 07/10] =?UTF-8?q?refactor(ribir):=20=F0=9F=92=A1=20migrate?=
 =?UTF-8?q?=20to=20new=20syntax=20without=20`DynWidget`.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 core/src/builtin_widgets/anchor.rs            |   2 +-
 core/src/builtin_widgets/cursor.rs            |   4 +-
 core/src/builtin_widgets/fitted_box.rs        |  11 +-
 core/src/builtin_widgets/focus_node.rs        |  20 +-
 core/src/builtin_widgets/focus_scope.rs       |   9 +-
 core/src/builtin_widgets/has_focus.rs         |  10 +-
 core/src/builtin_widgets/layout_box.rs        |  14 +-
 core/src/builtin_widgets/lifecycle.rs         |  91 +--
 core/src/builtin_widgets/mouse_hover.rs       |  10 +-
 core/src/builtin_widgets/pointer_pressed.rs   |  10 +-
 core/src/builtin_widgets/scrollable.rs        |  24 +-
 core/src/builtin_widgets/theme.rs             |  17 +-
 .../theme/compose_decorators.rs               |   6 +-
 core/src/builtin_widgets/theme/icon_theme.rs  |   4 +-
 core/src/builtin_widgets/visibility.rs        |   2 +-
 core/src/builtin_widgets/void.rs              |   2 +-
 core/src/events/character.rs                  |   9 +-
 core/src/events/dispatcher.rs                 |  93 +--
 core/src/events/focus_mgr.rs                  |  71 +-
 core/src/events/keyboard.rs                   |  17 +-
 core/src/events/pointers.rs                   |  90 ++-
 core/src/events/wheel.rs                      |   1 +
 core/src/state.rs                             |  32 +-
 core/src/state/stateful.rs                    |   2 -
 core/src/test_helper.rs                       |  11 +-
 core/src/widget_children.rs                   | 170 ++---
 core/src/widget_tree.rs                       | 244 ++++---
 core/src/widget_tree/layout_info.rs           |  47 +-
 core/src/widget_tree/widget_id.rs             |  11 +-
 core/src/window.rs                            |   1 -
 .../src/painter_backend_eq_image_test.rs      |   2 +-
 examples/counter/src/counter.rs               |   4 +-
 examples/messages/src/main.rs                 |   2 +-
 examples/messages/src/messages.rs             |   2 +-
 examples/storybook/src/storybook.rs           | 673 +++++++++---------
 examples/todos/src/todos.rs                   |  33 +-
 ribir/src/app.rs                              |   1 +
 .../messages_with_default_by_wgpu.png         | Bin 34832 -> 29618 bytes
 .../messages_with_material_by_wgpu.png        | Bin 36099 -> 30889 bytes
 .../storybook_with_default_by_wgpu.png        | Bin 36386 -> 34428 bytes
 .../storybook_with_material_by_wgpu.png       | Bin 36940 -> 36754 bytes
 .../todos/todos_with_default_by_wgpu.png      | Bin 12960 -> 12114 bytes
 .../todos/todos_with_material_by_wgpu.png     | Bin 12939 -> 12339 bytes
 tests/child_template_derive_test.rs           |  48 +-
 .../compile_msg/declare/assign_watch_pass.rs  |  15 -
 ...ctx_only_allow_in_init_and_finally_fail.rs |  34 -
 ...only_allow_in_init_and_finally_fail.stderr |   5 -
 .../declare/dollar_position_fail.stderr       |  15 +-
 .../declare/expr_child_syntax_pass.rs         |  36 -
 .../fix_embed_used_name_warning_pass.rs       |  18 -
 .../declare/unused_warning_fail.rs            |  39 -
 .../declare/unused_warning_fail.stderr        |  17 -
 .../compile_msg/declare/watch_syntax_pass.rs  |  89 ---
 tests/path_child_test.rs                      |  24 +-
 tests/rdl_macro_test.rs                       | 273 ++++---
 themes/material/src/ripple.rs                 |  18 +-
 themes/material/src/state_layer.rs            |   6 +-
 widgets/src/avatar.rs                         |  89 ++-
 widgets/src/buttons.rs                        |   4 +-
 widgets/src/buttons/button.rs                 |  58 +-
 widgets/src/buttons/fab_button.rs             |  68 +-
 widgets/src/buttons/filled_button.rs          |  66 +-
 widgets/src/buttons/outlined_button.rs        |  74 +-
 widgets/src/checkbox.rs                       | 112 ++-
 widgets/src/icon.rs                           |  10 +-
 widgets/src/input.rs                          | 110 ++-
 widgets/src/input/caret.rs                    |  56 +-
 widgets/src/input/editarea.rs                 | 120 ++--
 widgets/src/input/handle.rs                   |  10 +-
 widgets/src/input/selected_text.rs            |  35 +-
 widgets/src/input/text_selectable.rs          |  74 +-
 widgets/src/layout.rs                         |   4 -
 widgets/src/layout/column.rs                  |  38 -
 widgets/src/layout/expanded.rs                |   9 +-
 widgets/src/layout/flex.rs                    |  90 ++-
 widgets/src/layout/row.rs                     |  38 -
 widgets/src/link.rs                           |   9 +-
 widgets/src/lists.rs                          | 236 +++---
 widgets/src/scrollbar.rs                      | 395 +++++-----
 widgets/src/tabs.rs                           | 327 ++++-----
 widgets/src/text.rs                           |  27 +-
 widgets/src/text_field.rs                     |  62 +-
 82 files changed, 2041 insertions(+), 2469 deletions(-)
 delete mode 100644 tests/compile_msg/declare/assign_watch_pass.rs
 delete mode 100644 tests/compile_msg/declare/ctx_only_allow_in_init_and_finally_fail.rs
 delete mode 100644 tests/compile_msg/declare/ctx_only_allow_in_init_and_finally_fail.stderr
 delete mode 100644 tests/compile_msg/declare/expr_child_syntax_pass.rs
 delete mode 100644 tests/compile_msg/declare/fix_embed_used_name_warning_pass.rs
 delete mode 100644 tests/compile_msg/declare/unused_warning_fail.rs
 delete mode 100644 tests/compile_msg/declare/unused_warning_fail.stderr
 delete mode 100644 tests/compile_msg/declare/watch_syntax_pass.rs
 delete mode 100644 widgets/src/layout/column.rs
 delete mode 100644 widgets/src/layout/row.rs

diff --git a/core/src/builtin_widgets/anchor.rs b/core/src/builtin_widgets/anchor.rs
index 4726497d1..ae3be6b3b 100644
--- a/core/src/builtin_widgets/anchor.rs
+++ b/core/src/builtin_widgets/anchor.rs
@@ -124,7 +124,7 @@ impl PositionUnit {
     }
   }
 
-  pub fn lerp_fn(from: &Self, to: &Self, rate: f32, self_size: f32) -> PositionUnit {
+  pub fn lerp(from: &Self, to: &Self, rate: f32, self_size: f32) -> PositionUnit {
     let from = from.abs_value(self_size);
     let to = to.abs_value(self_size);
     PositionUnit::Pixel(from.lerp(&to, rate))
diff --git a/core/src/builtin_widgets/cursor.rs b/core/src/builtin_widgets/cursor.rs
index 9b4d76ef7..af0fad5ea 100644
--- a/core/src/builtin_widgets/cursor.rs
+++ b/core/src/builtin_widgets/cursor.rs
@@ -11,7 +11,7 @@ pub struct Cursor {
 
 impl ComposeChild for Cursor {
   type Child = Widget;
-  fn compose_child(mut this: State<Self>, child: Self::Child) -> Widget {
+  fn compose_child(this: State<Self>, child: Self::Child) -> Widget {
     fn_widget! {
       let mut save_cursor = Stateful::new(CursorIcon::Default);
       @$child {
@@ -20,7 +20,7 @@ impl ComposeChild for Cursor {
             && e.mouse_buttons() == MouseButtons::empty()
           {
             let wnd = e.window();
-            *$save_cursor = wnd.get_cursor();
+            *$save_cursor.write() = wnd.get_cursor();
             wnd.set_cursor($this.get_cursor());
           }
         },
diff --git a/core/src/builtin_widgets/fitted_box.rs b/core/src/builtin_widgets/fitted_box.rs
index 1a6f871c4..ecb364ae0 100644
--- a/core/src/builtin_widgets/fitted_box.rs
+++ b/core/src/builtin_widgets/fitted_box.rs
@@ -100,18 +100,15 @@ mod tests {
         expected_scale,
       } = self;
       let fit = Stateful::new(FittedBox { box_fit, scale_cache: <_>::default() });
-      let c_fit = fit.clone();
-      let w = widget! {
-        DynWidget {
-          dyns: fit,
-          MockBox { size }
-        }
+      let c_fit = fit.clone_reader();
+      let w = fn_widget! {
+        @$fit { @MockBox { size } }
       };
       let mut wnd = TestWindow::new_with_size(w, WND_SIZE);
       wnd.draw_frame();
 
       assert_layout_result_by_path!(wnd, {path = [0], size == expect,} );
-      assert_eq!(c_fit.state_ref().scale_cache.get(), expected_scale);
+      assert_eq!(c_fit.read().scale_cache.get(), expected_scale);
     }
   }
 
diff --git a/core/src/builtin_widgets/focus_node.rs b/core/src/builtin_widgets/focus_node.rs
index ecf90df95..ba96f0543 100644
--- a/core/src/builtin_widgets/focus_node.rs
+++ b/core/src/builtin_widgets/focus_node.rs
@@ -43,21 +43,21 @@ impl ComposeChild for FocusNode {
     let this = this.into_writable();
     FnWidget::new(|ctx| {
       let id = child.build(ctx);
-
-      if !ctx.assert_get(id).contain_type::<FocusNode>() {
+      let has_focus_node = ctx.assert_get(id).contain_type::<FocusNode>();
+      if !has_focus_node {
         let subject = ctx
           .assert_get(id)
           .query_on_first_type(QueryOrder::OutsideFirst, |l: &LifecycleListener| {
             l.lifecycle_stream()
-          })
-          .unwrap_or_else(|| {
-            let listener = LifecycleListener::default();
-            let subject = listener.lifecycle_stream();
-            attach_to_id(id, &mut *ctx.tree.borrow_mut(), |child| {
-              Box::new(DataWidget::new(child, listener))
-            });
-            subject
           });
+        let subject = subject.unwrap_or_else(|| {
+          let listener = LifecycleListener::default();
+          let subject = listener.lifecycle_stream();
+          attach_to_id(id, &mut *ctx.tree.borrow_mut(), |child| {
+            Box::new(DataWidget::new(child, listener))
+          });
+          subject
+        });
 
         fn subscribe_fn(this: Reader<FocusNode>) -> impl FnMut(&'_ mut AllLifecycle) + 'static {
           move |e| match e {
diff --git a/core/src/builtin_widgets/focus_scope.rs b/core/src/builtin_widgets/focus_scope.rs
index a623dee04..0f6fa58ce 100644
--- a/core/src/builtin_widgets/focus_scope.rs
+++ b/core/src/builtin_widgets/focus_scope.rs
@@ -17,11 +17,10 @@ pub struct FocusScope {
 impl ComposeChild for FocusScope {
   type Child = Widget;
   fn compose_child(this: State<Self>, child: Self::Child) -> Widget {
-    let w = widget! {
-      DynWidget {
-        dyns: child,
-        on_mounted: move |ctx| ctx.window().add_focus_node(ctx.id, false, FocusType::Scope),
-        on_disposed: move|ctx| ctx.window().remove_focus_node(ctx.id, FocusType::Scope),
+    let w = fn_widget! {
+      @ $child {
+        on_mounted: move |e| e.window().add_focus_node(e.id, false, FocusType::Scope),
+        on_disposed: move|e| e.window().remove_focus_node(e.id, FocusType::Scope),
       }
     };
     DataWidget::attach_state(w.into(), this)
diff --git a/core/src/builtin_widgets/has_focus.rs b/core/src/builtin_widgets/has_focus.rs
index 37133b19d..39a21792b 100644
--- a/core/src/builtin_widgets/has_focus.rs
+++ b/core/src/builtin_widgets/has_focus.rs
@@ -12,12 +12,10 @@ impl HasFocus {
 impl ComposeChild for HasFocus {
   type Child = Widget;
   fn compose_child(this: State<Self>, child: Self::Child) -> Widget {
-    widget! {
-      states {this: this.into_writable()}
-      DynWidget {
-        dyns: child,
-        on_focus_in: move|_| this.focused = true,
-        on_focus_out: move |_| this.focused = false,
+    fn_widget! {
+      @ $child {
+        on_focus_in: move|_| $this.write().focused = true,
+        on_focus_out: move |_| $this.write().focused = false,
       }
     }
     .into()
diff --git a/core/src/builtin_widgets/layout_box.rs b/core/src/builtin_widgets/layout_box.rs
index d5e64644a..21102f9b1 100644
--- a/core/src/builtin_widgets/layout_box.rs
+++ b/core/src/builtin_widgets/layout_box.rs
@@ -11,14 +11,12 @@ pub struct LayoutBox {
 impl ComposeChild for LayoutBox {
   type Child = Widget;
   fn compose_child(this: State<Self>, child: Self::Child) -> Widget {
-    widget! {
-      states { this: this.into_writable() }
-      DynWidget {
-        dyns: child,
-        on_performed_layout: move |ctx| {
-          let new_rect = ctx.box_rect().unwrap();
-          if this.rect != new_rect {
-            this.silent().rect = new_rect;
+    fn_widget! {
+      @ $child {
+        on_performed_layout: move |e| {
+          let new_rect = e.box_rect().unwrap();
+          if $this.rect != new_rect {
+            $this.silent().rect = new_rect;
           }
         }
       }
diff --git a/core/src/builtin_widgets/lifecycle.rs b/core/src/builtin_widgets/lifecycle.rs
index 3e50d1858..febe15eb6 100644
--- a/core/src/builtin_widgets/lifecycle.rs
+++ b/core/src/builtin_widgets/lifecycle.rs
@@ -133,43 +133,47 @@ mod tests {
 
   use crate::{
     prelude::*,
+    reset_test_env,
     test_helper::{MockBox, MockMulti, TestWindow},
   };
 
   #[test]
   fn full_lifecycle() {
-    let _guard = unsafe { AppCtx::new_lock_scope() };
+    reset_test_env!();
 
     let trigger = Stateful::new(true);
     let lifecycle = Stateful::new(vec![]);
+    let c_lc = lifecycle.clone_reader();
+    let c_trigger = trigger.clone_writer();
 
-    let w = widget! {
-      states {
-        trigger: trigger.clone(),
-        lifecycle: lifecycle.clone()
-      }
-      MockBox {
+    let w = fn_widget! {
+      @MockBox {
         size: Size::zero(),
-        on_mounted: move |_| lifecycle.silent().push("static mounted"),
-        on_performed_layout: move |_| lifecycle.silent().push("static performed layout"),
-        on_disposed: move |_| lifecycle.silent().push("static disposed"),
-        widget::then(*trigger, || widget! {
-          MockBox {
-            size: Size::zero(),
-            on_mounted: move |_| lifecycle.silent().push("dyn mounted"),
-            on_performed_layout: move |_| lifecycle.silent().push("dyn performed layout"),
-            on_disposed: move |_| lifecycle.silent().push("dyn disposed")
-          }
-        })
+        on_mounted: move |_| $lifecycle.write().push("static mounted"),
+        on_performed_layout: move |_| $lifecycle.write().push("static performed layout"),
+        on_disposed: move |_| $lifecycle.write().push("static disposed"),
+        @ {
+          pipe!(*$trigger).map(move  |b| {
+            b.then(move || {
+              @MockBox {
+                size: Size::zero(),
+                on_mounted: move |_| $lifecycle.write().push("dyn mounted"),
+                on_performed_layout: move |_| $lifecycle.write().push("dyn performed layout"),
+                on_disposed: move |_| $lifecycle.write().push("dyn disposed")
+              }
+            })
+          })
+        }
       }
     };
 
     let mut wnd = TestWindow::new_with_size(w, Size::new(100., 100.));
-    assert_eq!(&**lifecycle.state_ref(), ["static mounted"]);
+    assert_eq!(&**c_lc.read(), ["static mounted", "dyn mounted",]);
+
     wnd.draw_frame();
 
     assert_eq!(
-      &**lifecycle.state_ref(),
+      &**c_lc.read(),
       [
         "static mounted",
         "dyn mounted",
@@ -178,11 +182,11 @@ mod tests {
       ]
     );
     {
-      *trigger.state_ref() = false;
+      *c_trigger.write() = false;
     }
     wnd.draw_frame();
     assert_eq!(
-      &**lifecycle.state_ref(),
+      &**c_lc.read(),
       [
         "static mounted",
         "dyn mounted",
@@ -196,42 +200,39 @@ mod tests {
 
   #[test]
   fn track_lifecycle() {
-    let _guard = unsafe { AppCtx::new_lock_scope() };
+    reset_test_env!();
 
     let cnt = Stateful::new(3);
     let mounted: Stateful<HashSet<WidgetId>> = Stateful::new(HashSet::default());
     let disposed: Stateful<HashSet<WidgetId>> = Stateful::new(HashSet::default());
-    let w = widget! {
-      states {
-        cnt: cnt.clone(),
-        mounted: mounted.clone(),
-        disposed: disposed.clone(),
-      }
-      MockMulti {
-        Multi::new((0..*cnt).map(move |_| widget! {
-          MockBox {
-            size: Size::zero(),
-            on_mounted: move |ctx| {
-              mounted.insert(ctx.id);
-            },
-            on_disposed: move |ctx| {
-              disposed.insert(ctx.id);
-            },
-          }
-        }))
+
+    let c_cnt = cnt.clone_writer();
+    let c_mounted = mounted.clone_reader();
+    let c_disposed = disposed.clone_reader();
+    let w = fn_widget! {
+      @MockMulti {
+        @ {
+          pipe!(*$cnt).map(move |cnt| {
+            let iter = (0..cnt).map(move |_| @MockBox {
+              size: Size::zero(),
+              on_mounted: move |e| { $mounted.write().insert(e.id); },
+              on_disposed: move |e| { $disposed.write().insert(e.id); },
+            });
+            Multi::new(iter)
+          })
+        }
       }
     };
 
     let mut wnd = TestWindow::new_with_size(w, Size::new(100., 100.));
     wnd.draw_frame();
-    let mounted_ids = (*mounted.state_ref()).clone();
+    let mounted_ids = c_mounted.read().clone();
 
-    *cnt.state_ref() = 5;
+    *c_cnt.write() = 5;
     wnd.on_wnd_resize_event(Size::zero());
     wnd.draw_frame();
 
-    let disposed_ids = (*disposed.state_ref()).clone();
     assert_eq!(mounted_ids.len(), 3);
-    assert_eq!(mounted_ids, disposed_ids);
+    assert_eq!(&mounted_ids, &*c_disposed.read());
   }
 }
diff --git a/core/src/builtin_widgets/mouse_hover.rs b/core/src/builtin_widgets/mouse_hover.rs
index 639c7dd2f..29e7726e1 100644
--- a/core/src/builtin_widgets/mouse_hover.rs
+++ b/core/src/builtin_widgets/mouse_hover.rs
@@ -13,12 +13,10 @@ impl MouseHover {
 impl ComposeChild for MouseHover {
   type Child = Widget;
   fn compose_child(this: State<Self>, child: Self::Child) -> Widget {
-    widget! {
-      states {this: this.into_writable()}
-      DynWidget {
-        dyns: child,
-        on_pointer_enter: move |_| this.hover = true,
-        on_pointer_leave: move |_| this.hover = false,
+    fn_widget! {
+      @ $child {
+        on_pointer_enter: move |_| $this.write().hover = true,
+        on_pointer_leave: move |_| $this.write().hover = false,
       }
     }
     .into()
diff --git a/core/src/builtin_widgets/pointer_pressed.rs b/core/src/builtin_widgets/pointer_pressed.rs
index a8dcf20a7..3a70daccd 100644
--- a/core/src/builtin_widgets/pointer_pressed.rs
+++ b/core/src/builtin_widgets/pointer_pressed.rs
@@ -17,12 +17,10 @@ impl PointerPressed {
 impl ComposeChild for PointerPressed {
   type Child = Widget;
   fn compose_child(this: State<Self>, child: Self::Child) -> Widget {
-    widget! {
-      states { this: this.into_writable()}
-      DynWidget {
-        dyns: child,
-        on_pointer_down: move|_| this.pointer_pressed = true,
-        on_pointer_up: move |_| this.pointer_pressed = false,
+    fn_widget! {
+      @ $child {
+        on_pointer_down: move|_| $this.write().pointer_pressed = true,
+        on_pointer_up: move |_| $this.write().pointer_pressed = false,
       }
     }
     .into()
diff --git a/core/src/builtin_widgets/scrollable.rs b/core/src/builtin_widgets/scrollable.rs
index 128e36018..a470617db 100644
--- a/core/src/builtin_widgets/scrollable.rs
+++ b/core/src/builtin_widgets/scrollable.rs
@@ -29,7 +29,7 @@ pub struct ScrollableWidget {
 
 impl ComposeChild for ScrollableWidget {
   type Child = Widget;
-  fn compose_child(mut this: State<Self>, child: Self::Child) -> Widget {
+  fn compose_child(this: State<Self>, child: Self::Child) -> Widget {
     fn_widget! {
       let mut view = @UnconstrainedBox {
         dir: pipe!(match $this.get_scrollable() {
@@ -40,21 +40,21 @@ impl ComposeChild for ScrollableWidget {
         clamp_dim: ClampDim::MAX_SIZE,
       };
 
-    let mut child = @ $child {
-      left_anchor: pipe!($this.get_scroll_pos().x),
-      top_anchor: pipe!($this.get_scroll_pos().y),
-    };
+      let mut child = @ $child {
+        left_anchor: pipe!($this.get_scroll_pos().x),
+        top_anchor: pipe!($this.get_scroll_pos().y),
+      };
 
-    watch!($child.layout_size())
-      .distinct_until_changed()
-      .subscribe(move |v| $this.set_content_size(v));
-    watch!($view.layout_size())
-      .distinct_until_changed()
-      .subscribe(move |v| $this.set_page(v));
+      watch!($child.layout_size())
+        .distinct_until_changed()
+        .subscribe(move |v| $this.write().set_content_size(v));
+      watch!($view.layout_size())
+        .distinct_until_changed()
+        .subscribe(move |v| $this.write().set_page(v));
 
       @Clip {
         @ $view {
-          on_wheel: move |e| $this.validate_scroll(Point::new(e.delta_x, e.delta_y)),
+          on_wheel: move |e| $this.write().validate_scroll(Point::new(e.delta_x, e.delta_y)),
           @ { child }
         }
       }
diff --git a/core/src/builtin_widgets/theme.rs b/core/src/builtin_widgets/theme.rs
index 05c758af8..8de5418fd 100644
--- a/core/src/builtin_widgets/theme.rs
+++ b/core/src/builtin_widgets/theme.rs
@@ -1,17 +1,10 @@
 //! Theme use to share visual config or style compose logic. It can be defined
 //! to app-wide or particular part of the application.
 
-use crate::{
-  declare::DeclareBuilder,
-  fill_svgs, impl_query_self_only,
-  prelude::include_svg,
-  prelude::{Any, BuildCtx, ComposeChild, Declare, Query, QueryFiler, QueryOrder, TypeId},
-  state::State,
-  widget::{Widget, WidgetBuilder},
-};
-use ribir_algo::CowArc;
-pub use ribir_algo::ShareResource;
+use crate::{fill_svgs, impl_query_self_only, prelude::*, widget::WidgetBuilder};
+pub use ribir_algo::{CowArc, ShareResource};
 use ribir_geom::Size;
+use ribir_macros::Declare2;
 use ribir_text::TextStyle;
 use std::{collections::HashMap, rc::Rc};
 
@@ -73,7 +66,7 @@ pub enum Theme {
   Inherit(InheritTheme),
 }
 
-#[derive(Declare)]
+#[derive(Declare, Declare2)]
 pub struct ThemeWidget {
   pub theme: Rc<Theme>,
 }
@@ -81,7 +74,7 @@ pub struct ThemeWidget {
 impl ComposeChild for ThemeWidget {
   type Child = Widget;
   #[inline]
-  fn compose_child(mut this: State<Self>, child: Self::Child) -> Widget {
+  fn compose_child(this: State<Self>, child: Self::Child) -> Widget {
     use crate::prelude::*;
     FnWidget::new(move |ctx| {
       let ctx = ctx.force_as_mut();
diff --git a/core/src/builtin_widgets/theme/compose_decorators.rs b/core/src/builtin_widgets/theme/compose_decorators.rs
index b8b71a0a6..211dff454 100644
--- a/core/src/builtin_widgets/theme/compose_decorators.rs
+++ b/core/src/builtin_widgets/theme/compose_decorators.rs
@@ -90,10 +90,10 @@ mod tests {
     theme
       .compose_decorators
       .override_compose_decorator::<Size100Style>(|_, host| {
-        widget! {
-          MockBox {
+        fn_widget! {
+          @MockBox {
             size: Size::new(100., 100.),
-            DynWidget { dyns: host }
+            @ { host }
           }
         }
         .into()
diff --git a/core/src/builtin_widgets/theme/icon_theme.rs b/core/src/builtin_widgets/theme/icon_theme.rs
index 52b35e129..6fcbf7988 100644
--- a/core/src/builtin_widgets/theme/icon_theme.rs
+++ b/core/src/builtin_widgets/theme/icon_theme.rs
@@ -59,9 +59,7 @@ pub const CUSTOM_ICON_START: NamedSvg = NamedSvg::new(65536);
 pub struct NamedSvg(pub usize);
 
 impl Compose for NamedSvg {
-  fn compose(mut this: State<Self>) -> Widget {
-    fn_widget! { @ { $this.of_or_miss(ctx!()) }}.into()
-  }
+  fn compose(this: State<Self>) -> Widget { fn_widget! { @ { $this.of_or_miss(ctx!()) }}.into() }
 }
 
 impl IconTheme {
diff --git a/core/src/builtin_widgets/visibility.rs b/core/src/builtin_widgets/visibility.rs
index 59a0f16e5..98ca5b307 100644
--- a/core/src/builtin_widgets/visibility.rs
+++ b/core/src/builtin_widgets/visibility.rs
@@ -8,7 +8,7 @@ pub struct Visibility {
 
 impl ComposeChild for Visibility {
   type Child = Widget;
-  fn compose_child(mut this: State<Self>, child: Self::Child) -> Widget {
+  fn compose_child(this: State<Self>, child: Self::Child) -> Widget {
     fn_widget! {
       @FocusScope {
         skip_descendants: pipe!(!$this.get_visible()),
diff --git a/core/src/builtin_widgets/void.rs b/core/src/builtin_widgets/void.rs
index 3cb635375..334306bac 100644
--- a/core/src/builtin_widgets/void.rs
+++ b/core/src/builtin_widgets/void.rs
@@ -4,7 +4,7 @@ use crate::{impl_query_self_only, prelude::*};
 /// node in `widget!` macro, or hold a place in tree. When it have a child
 /// itself will be dropped when build tree, otherwise as a render widget but do
 /// nothing.
-#[derive(Declare, Declare2)]
+#[derive(Declare, SingleChild, Declare2)]
 pub struct Void;
 
 impl Render for Void {
diff --git a/core/src/events/character.rs b/core/src/events/character.rs
index 4fc6bcee5..d8b9f5c17 100644
--- a/core/src/events/character.rs
+++ b/core/src/events/character.rs
@@ -37,14 +37,14 @@ impl CharsEvent {
 #[cfg(test)]
 mod tests {
   use super::*;
-  use crate::test_helper::*;
+  use crate::{reset_test_env, test_helper::*};
 
   use std::{cell::RefCell, rc::Rc};
   use winit::event::WindowEvent;
 
   #[test]
   fn smoke() {
-    let _guard = unsafe { AppCtx::new_lock_scope() };
+    reset_test_env!();
     let receive = Rc::new(RefCell::new("".to_string()));
     let c_receive = receive.clone();
 
@@ -63,13 +63,14 @@ mod tests {
     test_text_case
       .chars()
       .for_each(|c| wnd.processes_native_event(WindowEvent::ReceivedCharacter(c)));
+    wnd.run_frame_tasks();
 
     assert_eq!(&*receive.borrow(), test_text_case);
   }
 
   #[test]
   fn chars_capture() {
-    let _guard = unsafe { AppCtx::new_lock_scope() };
+    reset_test_env!();
     let receive = Rc::new(RefCell::new("".to_string()));
     let chars_receive = receive.clone();
     let capture_receive = receive.clone();
@@ -98,7 +99,7 @@ mod tests {
     test_text_case
       .chars()
       .for_each(|c| wnd.processes_native_event(WindowEvent::ReceivedCharacter(c)));
-
+    wnd.run_frame_tasks();
     assert_eq!(&*receive.borrow(), "214263");
   }
 }
diff --git a/core/src/events/dispatcher.rs b/core/src/events/dispatcher.rs
index 6b253a446..95be391c2 100644
--- a/core/src/events/dispatcher.rs
+++ b/core/src/events/dispatcher.rs
@@ -272,7 +272,7 @@ impl DispatchInfo {
 #[cfg(test)]
 mod tests {
   use super::*;
-  use crate::test_helper::*;
+  use crate::{reset_test_env, test_helper::*};
   use std::{cell::RefCell, rc::Rc};
   use winit::event::WindowEvent;
   use winit::event::{DeviceId, ElementState, ModifiersState, MouseButton};
@@ -293,9 +293,8 @@ mod tests {
         })
       }
     };
-    widget! {
-      DynWidget {
-        dyns: widget,
+    fn_widget! {
+      @$widget {
         on_pointer_down : handler_ctor(),
         on_pointer_move: handler_ctor(),
         on_pointer_up: handler_ctor(),
@@ -307,7 +306,7 @@ mod tests {
 
   #[test]
   fn mouse_pointer_bubble() {
-    let _guard = unsafe { AppCtx::new_lock_scope() };
+    reset_test_env!();
 
     let event_record = Rc::new(RefCell::new(vec![]));
     let record = record_pointer(
@@ -316,7 +315,7 @@ mod tests {
     );
     let root = record_pointer(
       event_record.clone(),
-      widget! { MockMulti { DynWidget  { dyns: record } } }.into(),
+      fn_widget! { @MockMulti { @ { record } } }.into(),
     );
     let mut wnd = TestWindow::new(root);
     wnd.draw_frame();
@@ -328,14 +327,14 @@ mod tests {
       position: (1., 1.).into(),
       modifiers: ModifiersState::default(),
     });
-
+    wnd.run_frame_tasks();
     {
       let mut records = event_record.borrow_mut();
       assert_eq!(records.len(), 2);
       assert_eq!(records[0].btns.bits().count_ones(), 0);
       records.clear();
     }
-
+    wnd.run_frame_tasks();
     #[allow(deprecated)]
     wnd.processes_native_event(WindowEvent::MouseInput {
       device_id,
@@ -343,7 +342,7 @@ mod tests {
       button: MouseButton::Left,
       modifiers: ModifiersState::default(),
     });
-
+    wnd.run_frame_tasks();
     let mut records = event_record.borrow_mut();
     assert_eq!(records[0].btns.bits().count_ones(), 1);
     assert_eq!(records[0].pos, (1., 1.).into());
@@ -352,12 +351,12 @@ mod tests {
 
   #[test]
   fn mouse_buttons() {
-    let _guard = unsafe { AppCtx::new_lock_scope() };
+    reset_test_env!();
 
     let event_record = Rc::new(RefCell::new(vec![]));
     let root = record_pointer(
       event_record.clone(),
-      widget! { MockBox { size: Size::new(100., 30.) } }.into(),
+      fn_widget! { @MockBox { size: Size::new(100., 30.) } }.into(),
     );
     let mut wnd = TestWindow::new(root);
     wnd.draw_frame();
@@ -370,6 +369,7 @@ mod tests {
       button: MouseButton::Left,
       modifiers: ModifiersState::default(),
     });
+    wnd.run_frame_tasks();
 
     #[allow(deprecated)]
     wnd.processes_native_event(WindowEvent::MouseInput {
@@ -378,6 +378,7 @@ mod tests {
       button: MouseButton::Right,
       modifiers: ModifiersState::default(),
     });
+    wnd.run_frame_tasks();
 
     #[allow(deprecated)]
     wnd.processes_native_event(WindowEvent::CursorMoved {
@@ -385,6 +386,7 @@ mod tests {
       position: (1, 1).into(),
       modifiers: ModifiersState::default(),
     });
+    wnd.run_frame_tasks();
 
     #[allow(deprecated)]
     wnd.processes_native_event(WindowEvent::MouseInput {
@@ -393,6 +395,7 @@ mod tests {
       button: MouseButton::Left,
       modifiers: ModifiersState::default(),
     });
+    wnd.run_frame_tasks();
 
     #[allow(deprecated)]
     wnd.processes_native_event(WindowEvent::MouseInput {
@@ -401,7 +404,7 @@ mod tests {
       button: MouseButton::Right,
       modifiers: ModifiersState::default(),
     });
-
+    wnd.run_frame_tasks();
     let records = event_record.borrow();
     assert_eq!(records.len(), 3);
 
@@ -417,7 +420,7 @@ mod tests {
   #[cfg(not(target_os = "macos"))]
   #[test]
   fn different_device_mouse() {
-    let _guard = unsafe { AppCtx::new_lock_scope() };
+    reset_test_env!();
 
     let event_record = Rc::new(RefCell::new(vec![]));
     let root = record_pointer(
@@ -435,7 +438,7 @@ mod tests {
       button: MouseButton::Left,
       modifiers: ModifiersState::default(),
     });
-
+    wnd.run_frame_tasks();
     assert_eq!(event_record.borrow().len(), 1);
 
     // A mouse press/release emit during another mouse's press will be ignored.
@@ -459,6 +462,7 @@ mod tests {
       button: MouseButton::Left,
       modifiers: ModifiersState::default(),
     });
+    wnd.run_frame_tasks();
     assert_eq!(event_record.borrow().len(), 1);
 
     #[allow(deprecated)]
@@ -467,7 +471,7 @@ mod tests {
       position: (1, 1).into(),
       modifiers: ModifiersState::default(),
     });
-
+    wnd.run_frame_tasks();
     // but cursor move processed.
     assert_eq!(event_record.borrow().len(), 2);
     assert_eq!(event_record.borrow().len(), 2);
@@ -480,27 +484,26 @@ mod tests {
       button: MouseButton::Left,
       modifiers: ModifiersState::default(),
     });
-
+    wnd.run_frame_tasks();
     assert_eq!(event_record.borrow().len(), 3);
   }
 
   #[test]
   fn cancel_bubble() {
-    let _guard = unsafe { AppCtx::new_lock_scope() };
+    reset_test_env!();
     #[derive(Default)]
     struct EventRecord(Rc<RefCell<Vec<WidgetId>>>);
     impl Compose for EventRecord {
       fn compose(this: State<Self>) -> Widget {
-        widget! {
-          states { this: this.into_writable() }
-          MockBox {
+        fn_widget! {
+          @MockBox {
             size: INFINITY_SIZE,
-            on_pointer_down: move |e| { this.0.borrow_mut().push(e.current_target()); },
+            on_pointer_down: move |e| { $this.0.borrow_mut().push(e.current_target()); },
 
-            MockBox {
+            @MockBox {
               size: Size::new(100., 30.),
               on_pointer_down: move |e| {
-                this.0.borrow_mut().push(e.current_target());
+                $this.0.borrow_mut().push(e.current_target());
                 e.stop_propagation();
               }
             }
@@ -523,13 +526,13 @@ mod tests {
       button: MouseButton::Left,
       modifiers: ModifiersState::default(),
     });
-
+    wnd.run_frame_tasks();
     assert_eq!(event_record.borrow().len(), 1);
   }
 
   #[test]
   fn enter_leave() {
-    let _guard = unsafe { AppCtx::new_lock_scope() };
+    reset_test_env!();
 
     #[derive(Default)]
     struct EnterLeave {
@@ -539,17 +542,16 @@ mod tests {
 
     impl Compose for EnterLeave {
       fn compose(this: State<Self>) -> Widget {
-        widget! {
-          states { this: this.into_writable() }
-          MockBox {
+        fn_widget! {
+          @MockBox {
             size: INFINITY_SIZE,
-            on_pointer_enter: move |_| { this.enter.borrow_mut().push(2); },
-            on_pointer_leave: move |_| { this.leave.borrow_mut().push(2); },
-            MockBox {
+            on_pointer_enter: move |_| { $this.enter.borrow_mut().push(2); },
+            on_pointer_leave: move |_| { $this.leave.borrow_mut().push(2); },
+            @MockBox {
               margin: EdgeInsets::all(4.),
               size: INFINITY_SIZE,
-              on_pointer_enter: move |_| { this.enter.borrow_mut().push(1); },
-              on_pointer_leave: move |_| { this.leave.borrow_mut().push(1); }
+              on_pointer_enter: move |_| { $this.enter.borrow_mut().push(1); },
+              on_pointer_leave: move |_| { $this.leave.borrow_mut().push(1); }
             }
           }
         }
@@ -572,6 +574,7 @@ mod tests {
       position: (10, 10).into(),
       modifiers: ModifiersState::default(),
     });
+    wnd.run_frame_tasks();
     assert_eq!(&*enter_event.borrow(), &[2, 1]);
 
     // leave to parent
@@ -581,6 +584,7 @@ mod tests {
       position: (99, 99).into(),
       modifiers: ModifiersState::default(),
     });
+    wnd.run_frame_tasks();
     assert_eq!(&*leave_event.borrow(), &[1]);
 
     // move in same widget,
@@ -591,6 +595,7 @@ mod tests {
       position: (99, 99).into(),
       modifiers: ModifiersState::default(),
     });
+    wnd.run_frame_tasks();
     assert_eq!(&*enter_event.borrow(), &[2, 1]);
     assert_eq!(&*leave_event.borrow(), &[1]);
 
@@ -601,7 +606,7 @@ mod tests {
       position: (999, 999).into(),
       modifiers: ModifiersState::default(),
     });
-
+    wnd.run_frame_tasks();
     assert_eq!(&*leave_event.borrow(), &[1, 2]);
 
     // leave event trigger by window left.
@@ -614,16 +619,17 @@ mod tests {
     });
     #[allow(deprecated)]
     wnd.processes_native_event(WindowEvent::CursorLeft { device_id });
+    wnd.run_frame_tasks();
     assert_eq!(&*leave_event.borrow(), &[1, 2]);
   }
 
   #[test]
   fn capture_click() {
-    let _guard = unsafe { AppCtx::new_lock_scope() };
+    reset_test_env!();
 
     let click_path = Stateful::new(vec![]) as Stateful<Vec<usize>>;
     let w = widget! {
-      states { click_path: click_path.clone() }
+      states { click_path: click_path.clone_stateful() }
       MockBox {
         size: Size::new(100., 100.),
         on_tap: move |_| (*click_path).push(4),
@@ -663,7 +669,7 @@ mod tests {
       button: MouseButton::Left,
       modifiers,
     });
-
+    wnd.run_frame_tasks();
     {
       let clicked = click_path.state_ref();
       assert_eq!(*clicked, [1, 2, 3, 4]);
@@ -672,11 +678,11 @@ mod tests {
 
   #[test]
   fn click() {
-    let _guard = unsafe { AppCtx::new_lock_scope() };
+    reset_test_env!();
 
     let click_path = Stateful::new(0);
     let w = widget! {
-      states { click_path: click_path.clone() }
+      states { click_path: click_path.clone_stateful() }
       MockMulti {
         on_tap: move |_| *click_path += 1,
         MockBox {
@@ -715,6 +721,7 @@ mod tests {
       modifiers,
     });
 
+    wnd.run_frame_tasks();
     {
       let mut clicked = click_path.state_ref();
       assert_eq!(*clicked, 2);
@@ -747,7 +754,7 @@ mod tests {
       button: MouseButton::Left,
       modifiers,
     });
-
+    wnd.run_frame_tasks();
     {
       let clicked = click_path.state_ref();
       assert_eq!(*clicked, 1);
@@ -756,7 +763,7 @@ mod tests {
 
   #[test]
   fn focus_change_by_event() {
-    let _guard = unsafe { AppCtx::new_lock_scope() };
+    reset_test_env!();
 
     let w = widget! {
       MockMulti {
@@ -817,7 +824,7 @@ mod tests {
 
   #[test]
   fn fix_hit_out_window() {
-    let _guard = unsafe { AppCtx::new_lock_scope() };
+    reset_test_env!();
 
     let w = MockBox { size: INFINITY_SIZE };
     let mut wnd = TestWindow::new(w);
@@ -831,7 +838,7 @@ mod tests {
 
   #[test]
   fn hit_test_case() {
-    let _guard = unsafe { AppCtx::new_lock_scope() };
+    reset_test_env!();
 
     fn normal_mode_search() {
       struct T {
diff --git a/core/src/events/focus_mgr.rs b/core/src/events/focus_mgr.rs
index f67bbf370..cd76f338e 100644
--- a/core/src/events/focus_mgr.rs
+++ b/core/src/events/focus_mgr.rs
@@ -531,12 +531,12 @@ impl FocusManager {
 #[cfg(test)]
 mod tests {
   use super::*;
-  use crate::test_helper::*;
+  use crate::{reset_test_env, test_helper::*};
   use std::{cell::RefCell, rc::Rc};
 
   #[test]
   fn two_auto_focus() {
-    let _guard = unsafe { AppCtx::new_lock_scope() };
+    reset_test_env!();
 
     // two auto focus widget
     let size = Size::zero();
@@ -560,7 +560,7 @@ mod tests {
 
   #[test]
   fn on_auto_focus() {
-    let _guard = unsafe { AppCtx::new_lock_scope() };
+    reset_test_env!();
     // one auto focus widget
     let size = Size::zero();
     let widget = widget! {
@@ -585,7 +585,7 @@ mod tests {
 
   #[test]
   fn tab_index() {
-    let _guard = unsafe { AppCtx::new_lock_scope() };
+    reset_test_env!();
 
     let size = Size::zero();
     let widget = widget! {
@@ -648,7 +648,7 @@ mod tests {
 
   #[test]
   fn focus_event() {
-    let _guard = unsafe { AppCtx::new_lock_scope() };
+    reset_test_env!();
 
     #[derive(Debug, Default)]
     struct EmbedFocus {
@@ -657,20 +657,35 @@ mod tests {
 
     impl Compose for EmbedFocus {
       fn compose(this: State<Self>) -> Widget {
-        widget! {
-          states { this: this.into_writable() }
-          MockBox {
+        fn_widget! {
+          @MockBox {
             size: INFINITY_SIZE,
-            on_focus: move |_| { this.log.borrow_mut().push("focus parent"); },
-            on_blur: move |_| { this.log.borrow_mut().push("blur parent"); },
-            on_focus_in: move |_| { this.log.borrow_mut().push("focusin parent"); },
-            on_focus_out: move |_| { this.log.borrow_mut().push("focusout parent"); },
-            MockBox {
+            on_focus: move |_| {
+              $this.log.borrow_mut().push("focus parent");
+            },
+            on_blur: move |_| {
+              $this.log.borrow_mut().push("blur parent");
+            },
+            on_focus_in: move |_| {
+              $this.log.borrow_mut().push("focusin parent");
+            },
+            on_focus_out: move |_| {
+              $this.log.borrow_mut().push("focusout parent");
+            },
+            @MockBox {
               size: Size::zero(),
-              on_focus: move |_| { this.log.borrow_mut().push("focus child"); },
-              on_blur: move |_| { this.log.borrow_mut().push("blur child"); },
-              on_focus_in: move |_| { this.log.borrow_mut().push("focusin child"); },
-              on_focus_out: move |_| { this.log.borrow_mut().push("focusout child"); },
+              on_focus: move |_| {
+                $this.log.borrow_mut().push("focus child");
+              },
+              on_blur: move |_| {
+                $this.log.borrow_mut().push("blur child");
+              },
+              on_focus_in: move |_| {
+                $this.log.borrow_mut().push("focusin child");
+              },
+              on_focus_out: move |_| {
+                $this.log.borrow_mut().push("focusout child");
+              },
             }
           }
         }
@@ -710,18 +725,18 @@ mod tests {
 
   #[test]
   fn dynamic_focus() {
-    let _guard = unsafe { AppCtx::new_lock_scope() };
+    reset_test_env!();
 
     let visible = Stateful::new(Some(()));
-    let w = widget! {
-      states { visible: visible.clone_stateful() }
-      MockMulti{
-        Option::map(*visible, |_| widget!{
-          MockBox {
+    let c_visible = visible.clone_writer();
+    let w = fn_widget! {
+      @MockMulti{
+        @ { pipe! {
+          $visible.map(|_| @MockBox {
             size: Size::default(),
             on_tap: move |_| {},
-          }
-        })
+          })}
+        }
       }
     };
 
@@ -730,10 +745,10 @@ mod tests {
 
     wnd.draw_frame();
 
-    *visible.state_ref() = None;
+    *c_visible.write() = None;
     wnd.draw_frame();
 
-    *visible.state_ref() = Some(());
+    *c_visible.write() = Some(());
     wnd.draw_frame();
 
     assert_eq!(wnd.focus_mgr.borrow().focusing(), focus_id);
@@ -741,7 +756,7 @@ mod tests {
 
   #[test]
   fn scope_node_request_focus() {
-    let _guard = unsafe { AppCtx::new_lock_scope() };
+    reset_test_env!();
 
     let w = widget! {
       MockMulti{
diff --git a/core/src/events/keyboard.rs b/core/src/events/keyboard.rs
index 6cc77d755..4f8e0220f 100644
--- a/core/src/events/keyboard.rs
+++ b/core/src/events/keyboard.rs
@@ -73,26 +73,25 @@ mod tests {
 
     impl Compose for Keys {
       fn compose(this: State<Self>) -> Widget {
-        widget! {
-          states { this: this.into_writable() }
-          MockBox {
+        fn_widget! {
+          @MockBox {
             size: Size::zero(),
             on_key_down_capture: move |key| {
-              this.0.borrow_mut().push(format!("key down capture {:?}", key.key));
+              $this.0.borrow_mut().push(format!("key down capture {:?}", key.key));
             },
             on_key_up_capture: move |key| {
-              this.0.borrow_mut().push(format!("key up capture {:?}", key.key));
+              $this.0.borrow_mut().push(format!("key up capture {:?}", key.key));
             },
-            MockBox {
+            @MockBox {
               size: Size::zero(),
               auto_focus: true,
               on_key_down: move |key| {
-                this.0
+                $this.0
                   .borrow_mut()
                   .push(format!("key down {:?}", key.key));
               },
               on_key_up: move |key| {
-                this.0.borrow_mut().push(format!("key up {:?}", key.key));
+                $this.0.borrow_mut().push(format!("key up {:?}", key.key));
               }
             }
           }
@@ -116,6 +115,8 @@ mod tests {
     #[allow(deprecated)]
     wnd.processes_native_event(new_key_event(VirtualKeyCode::Key1, ElementState::Released));
 
+    wnd.run_frame_tasks();
+
     assert_eq!(
       &*keys.borrow(),
       &[
diff --git a/core/src/events/pointers.rs b/core/src/events/pointers.rs
index 85c16bc94..5751dce4e 100644
--- a/core/src/events/pointers.rs
+++ b/core/src/events/pointers.rs
@@ -179,36 +179,35 @@ impl PointerListenerDeclarer {
   }
 
   pub fn on_x_times_tap(
-    mut self,
+    self,
     (times, handler): (usize, impl FnMut(&mut PointerEvent) + 'static),
   ) -> Self {
-    self.on_x_times_tap_impl(times, MULTI_TAP_DURATION, false, handler);
-    self
+    self.on_x_times_tap_impl(times, MULTI_TAP_DURATION, false, handler)
   }
 
   pub fn on_x_times_tap_capture(
-    mut self,
+    self,
     (times, handler): (usize, impl FnMut(&mut PointerEvent) + 'static),
   ) -> Self {
-    self.on_x_times_tap_impl(times, MULTI_TAP_DURATION, true, handler);
-    self
+    self.on_x_times_tap_impl(times, MULTI_TAP_DURATION, true, handler)
   }
 
   fn on_x_times_tap_impl(
-    &mut self,
+    mut self,
     times: usize,
     dur: Duration,
     capture: bool,
     handler: impl FnMut(&mut PointerEvent) + 'static,
-  ) {
+  ) -> Self {
     self
       .subject()
       .filter_map(x_times_tap_map_filter(times, dur, capture))
       .subscribe(handler);
+    self
   }
 }
 
-impl PointerListener {
+impl PointerListenerDeclarer2 {
   pub fn on_double_tap(self, handler: impl FnMut(&mut PointerEvent) + 'static) -> Self {
     self.on_x_times_tap((2, handler))
   }
@@ -229,17 +228,58 @@ impl PointerListener {
     self,
     (times, handler): (usize, impl FnMut(&mut PointerEvent) + 'static),
   ) -> Self {
-    self.on_x_times_tap_impl(times, MULTI_TAP_DURATION, false, handler);
-    self
+    self.on_x_times_tap_impl(times, MULTI_TAP_DURATION, false, handler)
   }
 
   pub fn on_x_times_tap_capture(
     self,
     (times, handler): (usize, impl FnMut(&mut PointerEvent) + 'static),
   ) -> Self {
-    self.on_x_times_tap_impl(times, MULTI_TAP_DURATION, true, handler);
+    self.on_x_times_tap_impl(times, MULTI_TAP_DURATION, true, handler)
+  }
+
+  fn on_x_times_tap_impl(
+    mut self,
+    times: usize,
+    dur: Duration,
+    capture: bool,
+    handler: impl FnMut(&mut PointerEvent) + 'static,
+  ) -> Self {
+    self
+      .subject()
+      .filter_map(x_times_tap_map_filter(times, dur, capture))
+      .subscribe(handler);
     self
   }
+}
+
+impl PointerListener {
+  pub fn on_double_tap(self, handler: impl FnMut(&mut PointerEvent) + 'static) {
+    self.on_x_times_tap((2, handler))
+  }
+
+  pub fn on_double_tap_capture(self, handler: impl FnMut(&mut PointerEvent) + 'static) {
+    self.on_x_times_tap_capture((2, handler))
+  }
+
+  pub fn on_triple_tap(self, handler: impl FnMut(&mut PointerEvent) + 'static) {
+    self.on_x_times_tap((3, handler))
+  }
+
+  pub fn on_triple_tap_capture(self, handler: impl FnMut(&mut PointerEvent) + 'static) {
+    self.on_x_times_tap_capture((3, handler))
+  }
+
+  pub fn on_x_times_tap(self, (times, handler): (usize, impl FnMut(&mut PointerEvent) + 'static)) {
+    self.on_x_times_tap_impl(times, MULTI_TAP_DURATION, false, handler);
+  }
+
+  pub fn on_x_times_tap_capture(
+    self,
+    (times, handler): (usize, impl FnMut(&mut PointerEvent) + 'static),
+  ) {
+    self.on_x_times_tap_impl(times, MULTI_TAP_DURATION, true, handler);
+  }
 
   fn on_x_times_tap_impl(
     &self,
@@ -258,7 +298,10 @@ impl PointerListener {
 #[cfg(test)]
 mod tests {
   use super::*;
-  use crate::test_helper::{MockBox, MockMulti, TestWindow};
+  use crate::{
+    reset_test_env,
+    test_helper::{MockBox, MockMulti, TestWindow},
+  };
   use std::{cell::RefCell, rc::Rc};
   use winit::{
     dpi::LogicalPosition,
@@ -292,31 +335,30 @@ mod tests {
 
   #[test]
   fn tap_focus() {
-    let _guard = unsafe { AppCtx::new_lock_scope() };
+    reset_test_env!();
 
     let tap_cnt = Rc::new(RefCell::new(0));
     let is_focused = Rc::new(RefCell::new(false));
 
     let tap_cnt1 = tap_cnt.clone();
     let tap_cnt2 = tap_cnt.clone();
-    let is_focused1 = is_focused.clone();
-    let w = widget! {
-      MockMulti {
-        id: host,
-        MockBox {
+    let is_focused2 = is_focused.clone();
+    let w = fn_widget! {
+      let mut host = @MockMulti {};
+      watch!($host.has_focus())
+        .subscribe(move |v| *is_focused2.borrow_mut() = v);
+
+      @$host {
+        @MockBox {
           size: Size::new(50., 50.,),
           on_tap: move |_| *tap_cnt1.borrow_mut() += 1,
         }
-        MockBox {
+        @MockBox {
           size: Size::new(50., 50.,),
           on_tap: move |_| *tap_cnt2.borrow_mut() += 1,
           on_key_down: move |_| println!("dummy code"),
         }
       }
-      finally {
-        let_watch!(host.has_focus())
-          .subscribe(move |v| *is_focused1.borrow_mut() = v);
-      }
     };
     let mut wnd = TestWindow::new_with_size(w, Size::new(100., 100.));
     wnd.draw_frame();
diff --git a/core/src/events/wheel.rs b/core/src/events/wheel.rs
index 49a4c696f..6a1c09571 100644
--- a/core/src/events/wheel.rs
+++ b/core/src/events/wheel.rs
@@ -85,6 +85,7 @@ mod tests {
       phase: TouchPhase::Started,
       modifiers: ModifiersState::default(),
     });
+    wnd.run_frame_tasks();
 
     assert_eq!(*source_receive_for_bubble.borrow(), (1., 1.));
     assert_eq!(*source_receive_for_capture.borrow(), (1., 1.));
diff --git a/core/src/state.rs b/core/src/state.rs
index b52da0e48..df30fae65 100644
--- a/core/src/state.rs
+++ b/core/src/state.rs
@@ -276,21 +276,11 @@ where
 mod tests {
   use std::cell::Cell;
 
+  use ribir_algo::Sc;
+
   use super::*;
   use crate::{context::AppCtx, prelude::*, reset_test_env, timer::Timer};
 
-  #[test]
-  fn fix_dyn_widget_to_state_circular_mut_borrow_panic() {
-    let _guard = unsafe { AppCtx::new_lock_scope() };
-
-    let dyn_widget = Stateful::new(DynWidget { dyns: Some(1) });
-    let c_dyns = dyn_widget.clone();
-    let _: State<i32> = dyn_widget.into();
-    {
-      c_dyns.state_ref().dyns = Some(2);
-    }
-  }
-
   struct Origin {
     a: i32,
     b: i32,
@@ -300,13 +290,13 @@ mod tests {
   fn path_state_router_test() {
     reset_test_env!();
 
-    let mut origin = State::Stateless(Origin { a: 0, b: 0 });
-    let mut a = partial_state!($origin.a);
-    let mut b = route_state!($origin.b);
+    let origin = State::value(Origin { a: 0, b: 0 });
+    let a = split_writer!($origin.a);
+    let b = map_writer!($origin.b);
 
-    let track_origin = Rc::new(Cell::new(0));
-    let track_a = Rc::new(Cell::new(0));
-    let track_b = Rc::new(Cell::new(0));
+    let track_origin = Sc::new(Cell::new(0));
+    let track_a = Sc::new(Cell::new(0));
+    let track_b = Sc::new(Cell::new(0));
 
     let c_origin = track_origin.clone();
     origin.modifies().subscribe(move |_| {
@@ -323,7 +313,7 @@ mod tests {
       c_b.set(c_b.get() + 1);
     });
 
-    origin.state_ref().a = 1;
+    origin.write().a = 1;
     Timer::wake_timeout_futures();
     AppCtx::run_until_stalled();
 
@@ -331,7 +321,7 @@ mod tests {
     assert_eq!(track_a.get(), 1);
     assert_eq!(track_b.get(), 1);
 
-    *a.state_ref() = 1;
+    *a.write() = 1;
     Timer::wake_timeout_futures();
     AppCtx::run_until_stalled();
 
@@ -339,7 +329,7 @@ mod tests {
     assert_eq!(track_a.get(), 2);
     assert_eq!(track_b.get(), 1);
 
-    *b.state_ref() = 1;
+    *b.write() = 1;
     Timer::wake_timeout_futures();
     AppCtx::run_until_stalled();
 
diff --git a/core/src/state/stateful.rs b/core/src/state/stateful.rs
index 115500e04..9032da3d4 100644
--- a/core/src/state/stateful.rs
+++ b/core/src/state/stateful.rs
@@ -392,8 +392,6 @@ impl Notifier {
   }
 
   pub(crate) fn raw_modifies(&self) -> Subject<'static, ModifyScope, Infallible> { self.0.clone() }
-
-  pub(crate) fn reset(&self) { *self.0.clone().complete() }
 }
 
 impl<W: std::fmt::Debug> std::fmt::Debug for Stateful<W> {
diff --git a/core/src/test_helper.rs b/core/src/test_helper.rs
index 16d874592..e8619ba22 100644
--- a/core/src/test_helper.rs
+++ b/core/src/test_helper.rs
@@ -1,4 +1,4 @@
-use crate::timer::Timer;
+pub use crate::timer::Timer;
 use std::{
   rc::Rc,
   sync::atomic::{AtomicU64, Ordering},
@@ -22,8 +22,8 @@ pub struct TestWindow(pub Rc<Window>);
 #[macro_export]
 macro_rules! reset_test_env {
   () => {
-    let _ = rxrust::scheduler::NEW_TIMER_FN.set(Timer::new_timer_future);
-    let _guard = unsafe { AppCtx::new_lock_scope() };
+    let _ = $crate::prelude::NEW_TIMER_FN.set($crate::timer::Timer::new_timer_future);
+    let _guard = unsafe { $crate::prelude::AppCtx::new_lock_scope() };
   };
 }
 
@@ -76,7 +76,6 @@ impl TestWindow {
   pub fn draw_frame(&mut self) {
     // Test window not have a eventloop, manually wake-up every frame.
     Timer::wake_timeout_futures();
-    AppCtx::run_until_stalled();
     self.run_frame_tasks();
 
     self.0.draw_frame();
@@ -176,10 +175,10 @@ impl Render for MockStack {
 
 impl_query_self_only!(MockStack);
 
-#[derive(Declare, MultiChild)]
+#[derive(Declare, Declare2, MultiChild)]
 pub struct MockMulti;
 
-#[derive(Declare, Clone, SingleChild)]
+#[derive(Declare, Declare2, Clone, SingleChild)]
 pub struct MockBox {
   pub size: Size,
 }
diff --git a/core/src/widget_children.rs b/core/src/widget_children.rs
index b75b84482..9f6c3079e 100644
--- a/core/src/widget_children.rs
+++ b/core/src/widget_children.rs
@@ -152,12 +152,13 @@ impl<W: MultiParent + 'static> BoxedMultiParent for W {
 #[cfg(test)]
 mod tests {
   use super::*;
-  use crate::test_helper::*;
   use crate::widget::WidgetBuilder;
+  use crate::{reset_test_env, test_helper::*};
   use ribir_dev_helper::*;
 
   #[test]
   fn compose_template_child() {
+    reset_test_env!();
     #[derive(Declare)]
     struct Page;
     #[derive(Declare, SingleChild)]
@@ -193,6 +194,8 @@ mod tests {
 
   #[test]
   fn compose_option_child() {
+    reset_test_env!();
+
     #[derive(Declare)]
     struct Parent;
     #[derive(Declare, SingleChild)]
@@ -215,16 +218,18 @@ mod tests {
 
   #[test]
   fn compose_option_dyn_parent() {
-    widget! {
-      DynWidget {
-        dyns: widget::then(true, || MockBox { size: Size::zero() }),
-        Void {}
-      }
+    reset_test_env!();
+
+    fn_widget! {
+      let p = Some(MockBox { size: Size::zero() });
+      @$p { @{ Void } }
     };
   }
 
   #[test]
   fn tuple_as_vec() {
+    reset_test_env!();
+
     #[derive(Declare)]
     struct A;
     #[derive(Declare)]
@@ -247,60 +252,61 @@ mod tests {
 
   #[test]
   fn expr_with_child() {
+    reset_test_env!();
+
     let size = Stateful::new(Size::zero());
+    let c_size = size.clone_reader();
     // with single child
-    let _e = widget! {
-      states { size: size.clone() }
-      DynWidget {
-        dyns: if size.area() > 0. {
-           MockBox { size: *size }
+    let _e = fn_widget! {
+      let p = pipe!{
+        if $c_size.area() > 0. {
+          MockBox { size: *$c_size }
         } else {
           MockBox { size: Size::new(1., 1.) }
-        },
-        MockBox { size: *size }
-      }
+        }
+      };
+      @$p { @MockBox { size: pipe!(*$c_size) } }
     };
+
     // with multi child
-    let _e = widget! {
-      DynWidget {
-        dyns: MockMulti {},
-        MockBox { size: Size::zero() }
-        MockBox { size: Size::zero() }
-        MockBox { size: Size::zero() }
+    let _e = fn_widget! {
+      @MockMulti {
+        @MockBox { size: Size::zero() }
+        @MockBox { size: Size::zero() }
+        @MockBox { size: Size::zero() }
       }
     };
 
+    let c_size = size.clone_reader();
     // option with single child
-    let _e = widget! {
-      states { size: size.clone() }
-      DynWidget {
-        dyns: widget::then(size.area() > 0., || MockBox { size: Size::zero() }),
-        MockBox { size: Size::zero() }
-      }
+    let _e = fn_widget! {
+      let p = pipe!(($c_size.area() > 0.).then(|| @MockBox { size: Size::zero() }));
+      @$p { @MockBox { size: Size::zero() } }
     };
 
     // option with `Widget`
-    let _e = widget! {
-      states { size: size }
-      DynWidget {
-        dyns: widget::then(size.area() > 0., || MockBox { size: Size::zero() }),
-        widget::from(Void)
-      }
+    let _e = fn_widget! {
+      let p = pipe!(($size.area() > 0.).then(|| @MockBox { size: Size::zero() }));
+      @$p { @ { Void }}
     };
   }
 
   #[test]
-  fn compose_const_dyn_option_widget() {
-    let _ = widget! {
-      MockBox {
+  fn compose_expr_option_widget() {
+    reset_test_env!();
+
+    let _ = fn_widget! {
+      @MockBox {
         size: ZERO_SIZE,
-        widget::then(true, || MockBox { size: Size::zero() })
+        @{ Some(@MockBox { size: Size::zero() })}
       }
     };
   }
 
   #[test]
   fn pair_to_pair() {
+    reset_test_env!();
+
     #[derive(Declare)]
     struct P;
 
@@ -316,6 +322,8 @@ mod tests {
 
   #[test]
   fn fix_multi_fill_for_pair() {
+    reset_test_env!();
+
     struct X;
     impl ComposeChild for X {
       type Child = WidgetOf<MockBox>;
@@ -328,50 +336,6 @@ mod tests {
     });
   }
 
-  fn dyns_compose_child() -> Widget {
-    #[derive(Declare)]
-    struct X;
-
-    impl ComposeChild for X {
-      type Child = MockBox;
-      fn compose_child(_: State<Self>, child: Self::Child) -> Widget { child.into() }
-    }
-
-    let dyns = Stateful::new(DynWidget { dyns: Some(X) });
-    let size = Size::new(100., 200.);
-
-    ComposeChild::compose_child(State::<X>::from(dyns), MockBox { size })
-  }
-  widget_layout_test!(dyns_compose_child, width == 100., height == 200.,);
-
-  const COMPOSE_DYNS_CHILD_SIZE: Size = Size::new(100., 200.);
-  fn compose_dyns_child() -> Widget {
-    #[derive(Declare)]
-    struct AcceptStateChild;
-
-    impl ComposeChild for AcceptStateChild {
-      type Child = State<MockBox>;
-      fn compose_child(_: State<Self>, child: Self::Child) -> Widget { child.into() }
-    }
-
-    let trigger = Stateful::new(true);
-
-    widget! {
-      states { trigger: trigger }
-      AcceptStateChild {
-        DynWidget {
-          dyns: if *trigger {
-            MockBox { size: COMPOSE_DYNS_CHILD_SIZE }
-          } else {
-            MockBox { size: ZERO_SIZE }
-          }
-        }
-      }
-    }
-    .into()
-  }
-  widget_layout_test!(compose_dyns_child, size == COMPOSE_DYNS_CHILD_SIZE,);
-
   const FIX_OPTION_TEMPLATE_EXPECT_SIZE: Size = Size::new(100., 200.);
   fn fix_option_template() -> impl Into<Widget> {
     struct Field(String);
@@ -380,60 +344,20 @@ mod tests {
     pub struct ConfigTml {
       _field: Option<Field>,
     }
-    #[derive(Declare)]
+    #[derive(Declare, Declare2)]
     struct Host {}
 
     impl ComposeChild for Host {
       type Child = Option<ConfigTml>;
       fn compose_child(_: State<Self>, _: Self::Child) -> Widget {
-        widget! { MockBox { size: FIX_OPTION_TEMPLATE_EXPECT_SIZE } }.into()
+        fn_widget! { @MockBox { size: FIX_OPTION_TEMPLATE_EXPECT_SIZE } }.into()
       }
     }
 
-    widget! { Host { Field("test".into()) }}
+    fn_widget! { @Host { @{ Field("test".into()) } }}
   }
   widget_layout_test!(
     fix_option_template,
     { path = [0], size == FIX_OPTION_TEMPLATE_EXPECT_SIZE, }
   );
-
-  #[test]
-  fn compose_dyn_multi_child() {
-    let _guard = unsafe { AppCtx::new_lock_scope() };
-
-    struct A;
-
-    impl ComposeChild for A {
-      type Child = Vec<Widget>;
-
-      fn compose_child(_: State<Self>, child: Self::Child) -> Widget {
-        FnWidget::new(move |ctx| MockMulti.with_child(Multi::new(child), ctx).build(ctx)).into()
-      }
-    }
-
-    let child = DynWidget { dyns: Some(Multi::new([Void])) };
-    let child = Stateful::new(child);
-    let cnt = Rc::new(RefCell::new(0));
-    let c_cnt = cnt.clone();
-    child
-      .modifies()
-      .subscribe(move |_| *c_cnt.borrow_mut() += 1);
-
-    let _ = TestWindow::new(FnWidget::new(|ctx| A.with_child(child, ctx).build(ctx)));
-    assert_eq!(*cnt.borrow(), 0);
-  }
-
-  #[test]
-  fn compose_multi_with_stateful_option() {
-    struct M;
-    impl ComposeChild for M {
-      type Child = Vec<Widget>;
-      fn compose_child(_: State<Self>, _: Self::Child) -> Widget { Void.into() }
-    }
-
-    let _ = FnWidget::new(|ctx| {
-      let c = Stateful::new(DynWidget { dyns: Some(Some(Void)) });
-      M.with_child(c, ctx).build(ctx)
-    });
-  }
 }
diff --git a/core/src/widget_tree.rs b/core/src/widget_tree.rs
index 6590afee3..ccda24c81 100644
--- a/core/src/widget_tree.rs
+++ b/core/src/widget_tree.rs
@@ -200,6 +200,7 @@ impl Default for WidgetTree {
 mod tests {
   extern crate test;
   use crate::{
+    reset_test_env,
     test_helper::{MockBox, MockMulti, TestWindow},
     widget::widget_id::empty_node,
   };
@@ -215,23 +216,22 @@ mod tests {
 
   impl Compose for Recursive {
     fn compose(this: State<Self>) -> Widget {
-      widget! {
-        states { this: this.into_writable() }
-        MockMulti {
-          Multi::new((0..this.width)
-          .map(move |_| {
-            if this.depth > 1 {
-              Widget::from(
-                Recursive {
-                  width: this.width,
-                  depth: this.depth - 1,
-                }
-              )
-            } else {
-              Widget::from(MockBox { size: Size::new(10., 10.)})
-            }
-          }))
-        }
+      fn_widget! {
+        @MockMulti {
+          @{
+            pipe!(($this.width, $this.depth))
+              .map(|(width, depth)| {
+                let iter = (0..width).map(move |_| -> Widget {
+                  if depth > 1 {
+                    Recursive { width, depth: depth - 1 }.into()
+                  } else {
+                    MockBox { size: Size::new(10., 10.)}.into()
+                  }
+                });
+                Multi::new(iter)
+              })
+          }
+         }
       }
       .into()
     }
@@ -245,23 +245,21 @@ mod tests {
 
   impl Compose for Embed {
     fn compose(this: State<Self>) -> Widget {
-      widget! {
-        states { this: this.into_writable()}
-        MockMulti {
-          Multi::new((0..this.width - 1)
-          .map(move |_| {
-            MockBox { size: Size::new(10., 10.)}
-          }))
-          DynWidget {
-            dyns: if this.depth > 1 {
-              Widget::from(Embed {
-                width: this.width,
-                depth: this.depth - 1,
-              })
-            } else {
-              Widget::from(MockBox { size: Size::new(10., 10.)})
-            }
-          }
+      fn_widget! {
+        let recursive_child: Widget = if $this.depth > 1 {
+          let width = $this.width;
+          let depth = $this.depth - 1;
+          Embed { width, depth }.into()
+        } else {
+          MockBox { size: Size::new(10., 10.) }.into()
+        };
+        @MockMulti {
+          @{ pipe!{
+            let leafs = (0..$this.width - 1)
+              .map(|_| MockBox { size: Size::new(10., 10.)} );
+            Multi::new(leafs)
+          }}
+          @{ recursive_child }
         }
       }
       .into()
@@ -269,36 +267,36 @@ mod tests {
   }
 
   fn bench_recursive_inflate(width: usize, depth: usize, b: &mut Bencher) {
-    let wnd = TestWindow::new(Void {});
+    let mut wnd = TestWindow::new(Void {});
     b.iter(move || {
       wnd.set_content_widget(Recursive { width, depth }.into());
-      wnd.layout();
+      wnd.draw_frame();
     });
   }
 
   fn bench_recursive_repair(width: usize, depth: usize, b: &mut Bencher) {
     let w = Stateful::new(Recursive { width, depth });
-    let trigger = w.clone();
-    let wnd = TestWindow::new(w);
+    let trigger = w.clone_writer();
+    let mut wnd = TestWindow::new(w);
     b.iter(|| {
       {
-        let _: &mut Recursive = &mut trigger.state_ref();
+        let _ = trigger.write();
       }
-      wnd.layout();
+      wnd.draw_frame();
     });
   }
 
   #[test]
   fn fix_relayout_incorrect_clamp() {
-    let _guard = unsafe { AppCtx::new_lock_scope() };
+    reset_test_env!();
 
     let expect_size = Size::new(20., 20.);
     let no_boundary_size = Stateful::new(INFINITY_SIZE);
-    let w = widget! {
-      states { size: no_boundary_size.clone() }
-      MockBox {
+    let c_size = no_boundary_size.clone_writer();
+    let w = fn_widget! {
+      @MockBox {
         size: expect_size,
-        MockBox { size: *size }
+        @MockBox { size: pipe!(*$no_boundary_size) }
       }
     };
     let mut wnd = TestWindow::new_with_size(w, Size::new(200., 200.));
@@ -309,7 +307,7 @@ mod tests {
     // when relayout the inner `MockBox`, its clamp should same with its previous
     // layout, and clamp its size.
     {
-      *no_boundary_size.state_ref() = INFINITY_SIZE;
+      *c_size.write() = INFINITY_SIZE;
     }
     wnd.draw_frame();
     let size = wnd.layout_info_by_path(&[0, 0]).unwrap().size.unwrap();
@@ -318,26 +316,29 @@ mod tests {
 
   #[test]
   fn fix_dropped_child_expr_widget() {
-    let _guard = unsafe { AppCtx::new_lock_scope() };
+    reset_test_env!();
 
     let parent = Stateful::new(true);
     let child = Stateful::new(true);
-    let w = widget! {
-      states { parent: parent.clone(), child: child.clone() }
-      widget::then(*parent, || widget!{
-        MockBox {
-          size: Size::zero(),
-          widget::then(*child, || Void)
-        }
-      })
+    let c_p = parent.clone_writer();
+    let c_c = child.clone_writer();
+    let w = fn_widget! {
+      @ {
+        pipe!(*$parent).map(move |p|{
+          p.then(|| @MockBox {
+            size: Size::zero(),
+            @ { pipe!($child.then(|| Void)) }
+          })
+        })
+      }
     };
 
     let mut wnd = TestWindow::new(w);
     wnd.draw_frame();
 
     {
-      *child.state_ref() = false;
-      *parent.state_ref() = false;
+      *c_c.write() = false;
+      *c_p.write() = false;
     }
 
     // fix crash here.
@@ -346,21 +347,17 @@ mod tests {
 
   #[test]
   fn fix_child_expr_widget_same_root_as_parent() {
-    let _guard = unsafe { AppCtx::new_lock_scope() };
+    reset_test_env!();
 
     let trigger = Stateful::new(true);
-    let w = widget! {
-      states { trigger: trigger.clone() }
-      widget::then(*trigger, || widget!{
-        widget::then(*trigger, || Void)
-      })
-    };
+    let c_trigger = trigger.clone_writer();
+    let w = fn_widget! { @ { pipe!($trigger.then(|| Void)) }};
 
     let mut wnd = TestWindow::new(w);
     wnd.draw_frame();
 
     {
-      *trigger.state_ref() = false;
+      *c_trigger.write() = false;
     }
 
     // fix crash here
@@ -373,7 +370,7 @@ mod tests {
   }
   #[test]
   fn drop_info_clear() {
-    let _guard = unsafe { AppCtx::new_lock_scope() };
+    reset_test_env!();
 
     let post = Embed { width: 5, depth: 3 };
     let wnd = TestWindow::new(post);
@@ -393,8 +390,9 @@ mod tests {
   }
 
   #[bench]
-  fn inflate_5_x_1000(b: &mut Bencher) {
-    let _guard = unsafe { AppCtx::new_lock_scope() };
+  fn new_5_x_1000(b: &mut Bencher) {
+    reset_test_env!();
+
     let wnd = TestWindow::new(Void);
 
     b.iter(move || {
@@ -404,82 +402,96 @@ mod tests {
   }
 
   #[bench]
-  fn inflate_50_pow_2(b: &mut Bencher) {
-    let _guard = unsafe { AppCtx::new_lock_scope() };
+  fn new_50_pow_2(b: &mut Bencher) {
+    reset_test_env!();
+
     bench_recursive_inflate(50, 2, b);
   }
 
   #[bench]
-  fn inflate_100_pow_2(b: &mut Bencher) {
-    let _guard = unsafe { AppCtx::new_lock_scope() };
+  fn new_100_pow_2(b: &mut Bencher) {
+    reset_test_env!();
+
     bench_recursive_inflate(100, 2, b);
   }
 
   #[bench]
-  fn inflate_10_pow_4(b: &mut Bencher) {
-    let _guard = unsafe { AppCtx::new_lock_scope() };
+  fn new_10_pow_4(b: &mut Bencher) {
+    reset_test_env!();
+
     bench_recursive_inflate(10, 4, b);
   }
 
   #[bench]
-  fn inflate_10_pow_5(b: &mut Bencher) {
-    let _guard = unsafe { AppCtx::new_lock_scope() };
+  fn new_10_pow_5(b: &mut Bencher) {
+    reset_test_env!();
+
     bench_recursive_inflate(10, 5, b);
   }
 
   #[bench]
-  fn repair_5_x_1000(b: &mut Bencher) {
-    let _guard = unsafe { AppCtx::new_lock_scope() };
+  fn regen_5_x_1000(b: &mut Bencher) {
+    reset_test_env!();
+
     let post = Stateful::new(Embed { width: 5, depth: 1000 });
-    let trigger = post.clone();
+    let trigger = post.clone_writer();
     let wnd = TestWindow::new(post);
     let mut tree = wnd.widget_tree.borrow_mut();
 
     b.iter(|| {
       {
-        let _: &mut Embed = &mut trigger.state_ref();
+        let _ = trigger.write();
       }
       tree.layout(Size::new(512., 512.));
     });
   }
 
   #[bench]
-  fn repair_50_pow_2(b: &mut Bencher) {
-    let _guard = unsafe { AppCtx::new_lock_scope() };
+  fn regen_50_pow_2(b: &mut Bencher) {
+    reset_test_env!();
+
     bench_recursive_repair(50, 2, b);
   }
 
   #[bench]
-  fn repair_100_pow_2(b: &mut Bencher) {
-    let _guard = unsafe { AppCtx::new_lock_scope() };
+  fn regen_100_pow_2(b: &mut Bencher) {
+    reset_test_env!();
+
     bench_recursive_repair(100, 2, b);
   }
 
   #[bench]
-  fn repair_10_pow_4(b: &mut Bencher) {
-    let _guard = unsafe { AppCtx::new_lock_scope() };
+  fn regen_10_pow_4(b: &mut Bencher) {
+    reset_test_env!();
+
     bench_recursive_repair(10, 4, b);
   }
 
   #[bench]
-  fn repair_10_pow_5(b: &mut Bencher) {
-    let _guard = unsafe { AppCtx::new_lock_scope() };
+  fn regen_10_pow_5(b: &mut Bencher) {
+    reset_test_env!();
+
     bench_recursive_repair(10, 5, b);
   }
 
   #[test]
   fn perf_silent_ref_should_not_dirty_expr_widget() {
-    let _guard = unsafe { AppCtx::new_lock_scope() };
+    reset_test_env!();
 
     let trigger = Stateful::new(1);
-    let widget = widget! {
-      states { trigger: trigger.clone() }
-      MockMulti {
-        Multi::new((0..3).map(move |_| if *trigger > 0 {
-          MockBox { size: Size::new(1., 1.)}
-        } else {
-          MockBox { size: Size::zero()}
-        }))
+    let c_trigger = trigger.clone_stateful();
+    let widget = fn_widget! {
+      @ MockMulti {
+        @{
+          pipe!(*$trigger).map(move |b| {
+            let size = if b > 0 {
+              Size::new(1., 1.)
+            } else {
+              Size::zero()
+            };
+            Multi::new((0..3).map(move |_| MockBox { size }))
+          })
+        }
       }
     };
 
@@ -487,37 +499,41 @@ mod tests {
     let mut tree = wnd.widget_tree.borrow_mut();
     tree.layout(Size::new(100., 100.));
     {
-      *trigger.silent_ref() = 2;
+      *c_trigger.write() = 2;
     }
     assert!(!tree.is_dirty())
   }
 
   #[test]
   fn draw_clip() {
-    let _guard = unsafe { AppCtx::new_lock_scope() };
-    let win_size = Size::new(150., 50.);
+    reset_test_env!();
 
-    let w1 = widget! {
-       MockMulti {
-        Multi::new((0..100).map(|_|
-          widget! { MockBox {
-           size: Size::new(150., 50.),
-           background: Color::BLUE,
-        }}))
+    let win_size = Size::new(150., 50.);
 
+    let w1 = fn_widget! {
+       @MockMulti {
+        @ {
+          Multi::new((0..100).map(|_|
+            widget! { MockBox {
+            size: Size::new(150., 50.),
+            background: Color::BLUE,
+          }}))
+        }
     }};
     let mut wnd = TestWindow::new_with_size(w1, win_size);
     wnd.draw_frame();
 
     let len_100_widget = wnd.painter.borrow_mut().finish().len();
 
-    let w2 = widget! {
-      MockMulti {
-        Multi::new((0..1).map(|_|
-          widget! { MockBox {
-           size: Size::new(150., 50.),
-           background: Color::BLUE,
-        }}))
+    let w2 = fn_widget! {
+      @MockMulti {
+        @ {
+          Multi::new((0..1).map(|_|
+            widget! { MockBox {
+             size: Size::new(150., 50.),
+             background: Color::BLUE,
+          }}))
+        }
     }};
 
     let mut wnd = TestWindow::new(w2);
diff --git a/core/src/widget_tree/layout_info.rs b/core/src/widget_tree/layout_info.rs
index 3e63656d1..b98b6ffeb 100644
--- a/core/src/widget_tree/layout_info.rs
+++ b/core/src/widget_tree/layout_info.rs
@@ -303,7 +303,7 @@ impl std::ops::DerefMut for LayoutStore {
 #[cfg(test)]
 mod tests {
   use super::*;
-  use crate::{impl_query_self_only, prelude::*, test_helper::*};
+  use crate::{impl_query_self_only, prelude::*, reset_test_env, test_helper::*};
   use ribir_dev_helper::*;
   use std::{cell::RefCell, rc::Rc};
 
@@ -332,50 +332,47 @@ mod tests {
 
   #[test]
   fn fix_incorrect_relayout_root() {
-    let _guard = unsafe { AppCtx::new_lock_scope() };
+    reset_test_env!();
 
     // Can't use layout info of dirty widget to detect if the ancestors path have
     // in relayout list. Because new widget insert by `DynWidget` not have layout
     // info, but its parent have.
     let child_box = Stateful::new(MockBox { size: Size::zero() });
     let root_layout_cnt = Stateful::new(0);
-    let w = widget! {
-      states {
-        child_box: child_box.clone(),
-        root_layout_cnt: root_layout_cnt.clone(),
-      }
-      MockMulti {
-        on_performed_layout: move |_| *root_layout_cnt += 1,
-        DynWidget {
-          dyns: if child_box.size.is_empty() {
+    let c_child_box = child_box.clone_writer();
+    let c_root_layout_cnt = root_layout_cnt.clone_reader();
+    let w = fn_widget! {
+      @MockMulti {
+        on_performed_layout: move |_| *$root_layout_cnt.write() += 1,
+        @ { pipe!($child_box.size.is_empty()).map(move|b| if b {
             Widget::from(MockBox { size: Size::new(1., 1.) })
           } else {
-            Widget::from(child_box.clone_stateful())
-          }
+            Widget::from(child_box.clone_writer().into_inner())
+          })
         }
       }
     };
 
     let mut wnd = TestWindow::new(w);
     wnd.draw_frame();
-    assert_eq!(*root_layout_cnt.state_ref(), 1);
+    assert_eq!(*c_root_layout_cnt.read(), 1);
     {
-      child_box.state_ref().size = Size::new(2., 2.);
+      c_child_box.write().size = Size::new(2., 2.);
     }
     wnd.draw_frame();
-    assert_eq!(*root_layout_cnt.state_ref(), 2);
+    assert_eq!(*c_root_layout_cnt.read(), 2);
   }
 
   #[test]
   fn layout_list_from_root_to_leaf() {
-    let _guard = unsafe { AppCtx::new_lock_scope() };
+    reset_test_env!();
 
     let layout_order = Stateful::new(vec![]);
     let trigger = Stateful::new(Size::zero());
     let w = widget! {
       states {
-        layout_order: layout_order.clone(),
-        trigger: trigger.clone()
+        layout_order: layout_order.clone_stateful(),
+        trigger: trigger.clone_stateful()
       }
       MockBox {
         size: *trigger,
@@ -403,11 +400,11 @@ mod tests {
 
   #[test]
   fn relayout_size() {
-    let _guard = unsafe { AppCtx::new_lock_scope() };
+    reset_test_env!();
 
     let trigger = Stateful::new(Size::zero());
     let w = widget! {
-      states {trigger: trigger.clone()}
+      states {trigger: trigger.clone_stateful()}
       OffsetBox {
         size: Size::new(100., 100.),
         offset: Point::new(50., 50.),
@@ -448,13 +445,13 @@ mod tests {
 
   #[test]
   fn relayout_from_parent() {
-    let _guard = unsafe { AppCtx::new_lock_scope() };
+    reset_test_env!();
 
     let trigger = Stateful::new(Size::zero());
     let cnt = Rc::new(RefCell::new(0));
     let cnt2 = cnt.clone();
     let w = widget! {
-      states {trigger: trigger.clone()}
+      states {trigger: trigger.clone_stateful()}
       init { let cnt = cnt2; }
       MockBox {
         size: Size::new(50., 50.),
@@ -478,7 +475,7 @@ mod tests {
 
   #[test]
   fn layout_visit_prev_position() {
-    let _guard = unsafe { AppCtx::new_lock_scope() };
+    reset_test_env!();
 
     #[derive(Declare)]
     struct MockWidget {
@@ -504,7 +501,7 @@ mod tests {
     let pos2 = pos.clone();
     let trigger = Stateful::new(Size::zero());
     let w = widget! {
-      states {trigger: trigger.clone()}
+      states {trigger: trigger.clone_stateful()}
       init {
         let pos = pos2.clone();
       }
diff --git a/core/src/widget_tree/widget_id.rs b/core/src/widget_tree/widget_id.rs
index cd1b5a0a4..7e60b1c67 100644
--- a/core/src/widget_tree/widget_id.rs
+++ b/core/src/widget_tree/widget_id.rs
@@ -117,7 +117,7 @@ impl WidgetId {
   }
 
   pub(crate) fn ancestor_of(self, other: WidgetId, tree: &TreeArena) -> bool {
-    other.ancestors(tree).find(|p| self == *p).is_some()
+    other.ancestors(tree).any(|p| self == p)
   }
 
   pub(crate) fn ancestors(self, tree: &TreeArena) -> impl Iterator<Item = WidgetId> + '_ {
@@ -161,10 +161,6 @@ impl WidgetId {
     self.0.insert_after(next.0, tree);
   }
 
-  pub(crate) fn insert_before(self, before: WidgetId, tree: &mut TreeArena) {
-    self.0.insert_before(before.0, tree);
-  }
-
   pub(crate) fn append(self, child: WidgetId, tree: &mut TreeArena) {
     self.0.append(child.0, tree);
   }
@@ -237,11 +233,6 @@ impl WidgetId {
   }
 }
 
-pub(crate) unsafe fn split_arena(tree: &mut TreeArena) -> (&mut TreeArena, &mut TreeArena) {
-  let ptr = tree as *mut TreeArena;
-  (&mut *ptr, &mut *ptr)
-}
-
 pub(crate) fn new_node(arena: &mut TreeArena, node: Box<dyn Render>) -> WidgetId {
   WidgetId(arena.new_node(RenderNode {
     flags: RenderNodeFlag::NONE,
diff --git a/core/src/window.rs b/core/src/window.rs
index 9e565e405..b031fb0d2 100644
--- a/core/src/window.rs
+++ b/core/src/window.rs
@@ -93,7 +93,6 @@ impl Window {
   pub fn processes_native_event(&self, event: WindowEvent) {
     let ratio = self.device_pixel_ratio() as f64;
     self.dispatcher.borrow_mut().dispatch(event, ratio);
-    self.run_frame_tasks();
   }
 
   /// Request switch the focus to next widget.
diff --git a/dev-helper/src/painter_backend_eq_image_test.rs b/dev-helper/src/painter_backend_eq_image_test.rs
index 44e16caa4..06622d073 100644
--- a/dev-helper/src/painter_backend_eq_image_test.rs
+++ b/dev-helper/src/painter_backend_eq_image_test.rs
@@ -86,7 +86,7 @@ pub fn assert_texture_eq_png(img: PixelImage, file_path: &std::path::Path) {
       )
       .unwrap();
 
-    const TOLERANCE: f64 = 0.000002;
+    const TOLERANCE: f64 = 0.0000025;
     let (v, _) = dssim.compare(&expected, dissim_mig);
     let v: f64 = v.into();
 
diff --git a/examples/counter/src/counter.rs b/examples/counter/src/counter.rs
index 92e457b61..584920694 100644
--- a/examples/counter/src/counter.rs
+++ b/examples/counter/src/counter.rs
@@ -8,12 +8,12 @@ pub fn counter() -> impl Into<Widget> {
       h_align: HAlign::Center,
       align_items: Align::Center,
       @FilledButton {
-        on_tap: move |_: &mut _| *$cnt += 1,
+        on_tap: move |_: &mut _| *$cnt.write() += 1,
         @{ Label::new("Add") }
       }
       @H1 { text: pipe!($cnt.to_string())  }
       @FilledButton {
-        on_tap: move |_: &mut _| *$cnt += -1,
+        on_tap: move |_: &mut _| *$cnt.write() += -1,
         @{ Label::new("Sub") }
       }
     }
diff --git a/examples/messages/src/main.rs b/examples/messages/src/main.rs
index 5b84e405a..2228c93af 100644
--- a/examples/messages/src/main.rs
+++ b/examples/messages/src/main.rs
@@ -5,4 +5,4 @@ use messages::messages;
 use ribir::prelude::*;
 use ribir_dev_helper::*;
 
-example_framework!(messages, wnd_size = Size::new(480., 960.));
+example_framework!(messages);
diff --git a/examples/messages/src/messages.rs b/examples/messages/src/messages.rs
index 8df9c88b5..d02212b3d 100644
--- a/examples/messages/src/messages.rs
+++ b/examples/messages/src/messages.rs
@@ -41,7 +41,7 @@ pub fn messages() -> impl Into<Widget> {
 }
 
 impl Compose for MessageList {
-  fn compose(mut this: State<Self>) -> Widget {
+  fn compose(this: State<Self>) -> Widget {
     fn_widget! {
       let palette = Palette::of(ctx!());
 
diff --git a/examples/storybook/src/storybook.rs b/examples/storybook/src/storybook.rs
index fb9ae35bb..8c3682571 100644
--- a/examples/storybook/src/storybook.rs
+++ b/examples/storybook/src/storybook.rs
@@ -1,358 +1,377 @@
-use material::material_svgs;
-use ribir::prelude::*;
-use std::rc::Rc;
+use ribir::{material::material_svgs, prelude::*};
 
-const NORMAL_BUTTON_SIZE: Size = Size::new(120., 40.);
+static NORMAL_BUTTON_SIZE: Size = Size::new(120., 40.);
 
-struct Storybook;
-
-impl Compose for Storybook {
-  fn compose(_: State<Self>) -> Widget {
-    widget! {
-      init ctx => {
-        let surface_container_low: Brush = Palette::of(ctx).surface_container_low().clone().into();
-        let primary: Brush = Palette::of(ctx).primary().clone().into();
-        let surface_container_lowest: Brush = Palette::of(ctx)
-          .surface_container_lowest().clone().into();
+fn header() -> Widget {
+  static HEADER_HEIGHT: f32 = 64.;
+  static TITLE: &str = "Material Design";
+  fn_widget! {
+    @ConstrainedBox {
+      clamp: BoxClamp::fixed_height(HEADER_HEIGHT),
+      @Row {
+        v_align: VAlign::Center,
+        justify_content: JustifyContent::SpaceAround,
+        @Text {
+          text: TITLE,
+        }
       }
-      ThemeWidget {
-        id: theme,
-        theme: Rc::new(Theme::Full(material::purple::light())),
-        Column {
-          background: surface_container_low.clone(),
-          ConstrainedBox {
-            clamp: BoxClamp::fixed_height(48.),
-            Row {
-              v_align: VAlign::Center,
-              justify_content: JustifyContent::SpaceAround,
-              Text {
-                text: "Material 3",
-              }
-              Checkbox {
-                id: brightness,
-                on_tap: move |_| {
-                  if brightness.checked {
-                    theme.theme = Rc::new(Theme::Full(material::purple::dark()));
-                  } else {
-                    theme.theme = Rc::new(Theme::Full(material::purple::light()));
-                  }
-                },
-                Trailing {
-                  Label::new("Dark")
+    }
+  }
+  .into()
+}
+
+fn content() -> Widget {
+  fn actions_show() -> Widget {
+    fn_widget! {
+      @VScrollBar {
+        @Column {
+          @Column {
+            align_items: Align::Center,
+            @ConstrainedBox {
+              clamp: BoxClamp::fixed_height(30.),
+              @Row {
+                h_align: HAlign::Center,
+                @Text { text: "Common buttons" }
+                @Icon {
+                  size: Size::splat(16.),
+                  @ { material_svgs::INFO }
                 }
               }
             }
-          }
-          Expanded {
-            flex: 1.,
-            Tabs {
-              pos: Position::Bottom,
-              Tab {
-                TabItem {
-                  Label::new("Actions")
+            @Column {
+              item_gap: 20.,
+              padding: EdgeInsets::new(20., 40., 20., 40.),
+              background: Palette::of(ctx!()).surface_container_low(),
+              border_radius: Radius::all(4.),
+              border: Border::all(BorderSide {
+                color: Palette::of(ctx!()).primary().into(),
+                width: 1.,
+              }),
+              @Row {
+                item_gap: 20.,
+                @SizedBox {
+                  size: NORMAL_BUTTON_SIZE,
+                  @FilledButton {
+                    @ { Label::new("Filled") }
+                  }
                 }
-                TabPane {
-                  VScrollBar {
-                    Column {
-                      Column {
-                        align_items: Align::Center,
-                        ConstrainedBox {
-                          clamp: BoxClamp::fixed_height(30.),
-                          Row {
-                            h_align: HAlign::Center,
-                            Text { text: "Common buttons" }
-                            Icon {
-                              size: Size::splat(16.),
-                              material_svgs::INFO
-                            }
-                          }
-                        }
-                        Column {
-                          item_gap: 20.,
-                          padding: EdgeInsets::new(20., 40., 20., 40.),
-                          background: surface_container_lowest.clone(),
-                          border_radius: Radius::all(4.),
-                          border: Border::all(BorderSide {
-                            color: primary.clone(),
-                            width: 1.,
-                          }),
-                          Row {
-                            item_gap: 20.,
-                            SizedBox {
-                              size: NORMAL_BUTTON_SIZE,
-                              FilledButton {
-                                Label::new("Filled")
-                              }
-                            }
-                            SizedBox {
-                              size: NORMAL_BUTTON_SIZE,
-                              FilledButton {
-                                svgs::ADD
-                                Label::new("Icon")
-                              }
-                            }
-                          }
-                          Row {
-                            item_gap: 20.,
-                            SizedBox {
-                              size: NORMAL_BUTTON_SIZE,
-                              OutlinedButton {
-                                Label::new("Outlined")
-                              }
-                            }
-                            SizedBox {
-                              size: NORMAL_BUTTON_SIZE,
-                              OutlinedButton {
-                                svgs::ADD
-                                Label::new("Icon")
-                              }
-                            }
-                          }
-                          Row {
-                            item_gap: 20.,
-                            SizedBox {
-                              size: NORMAL_BUTTON_SIZE,
-                              Button {
-                                Label::new("Text")
-                              }
-                            }
-                            SizedBox {
-                              size: NORMAL_BUTTON_SIZE,
-                              Button {
-                                svgs::ADD
-                                Label::new("Icon")
-                              }
-                            }
-                          }
-                        }
-                      }
-                      Column {
-                        align_items: Align::Center,
-                        ConstrainedBox {
-                          clamp: BoxClamp::fixed_height(30.),
-                          Row {
-                            h_align: HAlign::Center,
-                            Text { text: "Floating action buttons" }
-                            Icon {
-                              size: Size::splat(16.),
-                              material_svgs::INFO
-                            }
-                          }
-                        }
-                        Column {
-                          item_gap: 20.,
-                          padding: EdgeInsets::new(20., 40., 20., 40.),
-                          background: surface_container_lowest.clone(),
-                          border_radius: Radius::all(4.),
-                          border: Border::all(BorderSide {
-                            color: primary.clone(),
-                            width: 1.,
-                          }),
-                          Row {
-                            item_gap: 20.,
-                            FabButton {
-                              svgs::ADD
-                            }
-                            FabButton {
-                              svgs::ADD
-                              Label::new("Create")
-                            }
-                          }
-                        }
-                      }
-                      Column {
-                        align_items: Align::Center,
-                        ConstrainedBox {
-                          clamp: BoxClamp::fixed_height(30.),
-                          Row {
-                            h_align: HAlign::Center,
-                            Text { text: "Icon buttons" }
-                            Icon {
-                              size: Size::splat(16.),
-                              material_svgs::INFO
-                            }
-                          }
-                        }
-                        Column {
-                          item_gap: 20.,
-                          padding: EdgeInsets::new(20., 40., 20., 40.),
-                          background: surface_container_lowest.clone(),
-                          border_radius: Radius::all(4.),
-                          border: Border::all(BorderSide {
-                            color: primary.clone(),
-                            width: 1.,
-                          }),
-                          Row {
-                            item_gap: 20.,
-                            Button {
-                              svgs::SETTINGS
-                            }
-                            FilledButton {
-                              svgs::SETTINGS
-                            }
-                            OutlinedButton {
-                              svgs::SETTINGS
-                            }
-                          }
-                        }
-                      }
-                    }
+                @SizedBox {
+                  size: NORMAL_BUTTON_SIZE,
+                  @FilledButton {
+                    @ { svgs::ADD }
+                    @ { Label::new("Icon") }
                   }
                 }
               }
-              Tab {
-                TabItem {
-                  Label::new("Tabs")
+              @Row {
+                item_gap: 20.,
+                @SizedBox {
+                  size: NORMAL_BUTTON_SIZE,
+                  @OutlinedButton {
+                    @ { Label::new("Outlined") }
+                  }
                 }
-                TabPane {
-                  Tabs {
-                    Tab {
-                      TabItem {
-                        svgs::HOME
-                        Label::new("Video")
-                      }
-                    }
-                    Tab {
-                      TabItem {
-                        svgs::HOME
-                        Label::new("Photos")
-                      }
-                    }
-                    Tab {
-                      TabItem {
-                        svgs::HOME
-                        Label::new("Audio")
-                      }
-                    }
+                @SizedBox {
+                  size: NORMAL_BUTTON_SIZE,
+                  @OutlinedButton {
+                    @ { svgs::ADD }
+                    @ { Label::new("Icon") }
                   }
                 }
               }
-              Tab {
-                TabItem {
-                  Label::new("Containment")
+              @Row {
+                item_gap: 20.,
+                @SizedBox {
+                  size: NORMAL_BUTTON_SIZE,
+                  @Button {
+                    @ { Label::new("Text") }
+                  }
                 }
-                TabPane {
-                  Column {
-                    ConstrainedBox {
-                      clamp: BoxClamp::fixed_height(30.),
-                      Row {
-                        h_align: HAlign::Center,
-                        Text { text: "Divider" }
-                        Icon {
-                          size: Size::splat(16.),
-                          material_svgs::INFO
-                        }
-                      }
-                    }
-                    Divider {}
+                @SizedBox {
+                  size: NORMAL_BUTTON_SIZE,
+                  @Button {
+                    @ { svgs::ADD }
+                    @ { Label::new("Icon") }
                   }
                 }
               }
-              Tab {
-                TabItem {
-                  Label::new("Lists")
+            }
+          }
+          @Column {
+            align_items: Align::Center,
+            @ConstrainedBox {
+              clamp: BoxClamp::fixed_height(30.),
+              @Row {
+                h_align: HAlign::Center,
+                @Text { text: "Floating action buttons" }
+                @Icon {
+                  size: Size::splat(16.),
+                  @ { material_svgs::INFO }
                 }
-                TabPane {
-                  Column {
-                    margin: EdgeInsets::all(20.),
-                    Lists {
-                      margin: EdgeInsets::only_top(20.),
-                      Link {
-                        url: "https://ribir.org",
-                        ListItem {
-                          line_number: 1,
-                          Leading { svgs::CHECK_BOX_OUTLINE_BLANK }
-                          HeadlineText(Label::new("One line list item"))
-                          SupportingText(Label::new("One line supporting text"))
-                        }
-                      }
-                      Divider { indent: 16. }
-                      ListItem {
-                        Leading { svgs::MENU }
-                        HeadlineText(Label::new("One line list item"))
-                        Trailing { Label::new("100+") }
-                      }
-                      Divider { indent: 16. }
-                      ListItem {
-                        line_number: 2,
-                        Leading {
-                          Avatar {
-                            ShareResource::new(PixelImage::from_png(include_bytes!("../../attachments/3DDD-1.png")))
-                          }
-                        }
-                        HeadlineText(Label::new("Two lines list item"))
-                        SupportingText(Label::new("Two lines supporting text \rTwo lines supporting text"))
-                        Trailing { Label::new("100+") }
-                      }
-                      Divider { indent: 16. }
-                      ListItem {
-                        line_number: 1,
-                        Leading {
-                          ShareResource::new(PixelImage::from_png(include_bytes!("../../attachments/3DDD-2.png")))
-                        }
-                        HeadlineText(Label::new("One lines list item"))
-                        SupportingText(Label::new("One lines supporting text"))
-                        Trailing { svgs::CHECK_BOX_OUTLINE_BLANK }
-                      }
-                      Divider { indent: 16. }
-                      ListItem {
-                        line_number: 1,
-                        Leading {
-                          Avatar {
-                            Label::new("A")
-                          }
-                        }
-                        HeadlineText(Label::new("One lines list item"))
-                        SupportingText(Label::new("One lines supporting text"))
-                        Trailing { Label::new("100+") }
-                      }
-                      Divider { indent: 16. }
-                      ListItem {
-                        line_number: 1,
-                        Leading {
-                          Poster(ShareResource::new(PixelImage::from_png(include_bytes!("../../attachments/3DDD-3.png"))))
-                        }
-                        HeadlineText(Label::new("One lines list item"))
-                        SupportingText(Label::new("One lines supporting text"))
-                        Trailing { Label::new("100+") }
-                      }
-                    }
-                  }
+              }
+            }
+            @Column {
+              item_gap: 20.,
+              padding: EdgeInsets::new(20., 40., 20., 40.),
+              background: Palette::of(ctx!()).surface_container_lowest(),
+              border_radius: Radius::all(4.),
+              border: Border::all(BorderSide {
+                color: Palette::of(ctx!()).primary().into(),
+                width: 1.,
+              }),
+              @Row {
+                item_gap: 20.,
+                @FabButton {
+                  @ { svgs::ADD }
+                }
+                @FabButton {
+                  @ { svgs::ADD }
+                  @ { Label::new("Create") }
                 }
               }
-              Tab {
-                TabItem {
-                  Label::new("Selections")
+            }
+          }
+          @Column {
+            align_items: Align::Center,
+            @ConstrainedBox {
+              clamp: BoxClamp::fixed_height(30.),
+              @Row {
+                h_align: HAlign::Center,
+                @Text { text: "Icon buttons" }
+                @Icon {
+                  size: Size::splat(16.),
+                  @ { material_svgs::INFO }
                 }
-                TabPane {
-                  Column {
-                    margin: EdgeInsets::all(20.),
-                    Lists {
-                      Checkbox {
-                        Leading {
-                          Label::new("Option1")
-                        }
-                      }
-                      Checkbox {
-                        Leading {
-                          Label::new("Option2")
-                        }
-                      }
-                      Checkbox {
-                        Leading {
-                          Label::new("Option3")
-                        }
-                      }
-                    }
-                  }
+              }
+            }
+            @Column {
+              item_gap: 20.,
+              padding: EdgeInsets::new(20., 40., 20., 40.),
+              background: Palette::of(ctx!()).surface_container_lowest(),
+              border_radius: Radius::all(4.),
+              border: Border::all(BorderSide {
+                color: Palette::of(ctx!()).primary().into(),
+                width: 1.,
+              }),
+              @Row {
+                item_gap: 20.,
+                @Button {
+                  @ { svgs::SETTINGS }
+                }
+                @FilledButton {
+                  @ { svgs::SETTINGS }
                 }
+                @OutlinedButton {
+                  @ { svgs::SETTINGS }
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+    .into()
+  }
+
+  fn tabs_show() -> Widget {
+    fn_widget! {
+      @Tabs {
+        @Tab {
+          @TabItem {
+            @ { svgs::HOME }
+            @ { Label::new("Video") }
+          }
+        }
+        @Tab {
+          @TabItem {
+            @ { svgs::HOME }
+            @ { Label::new("Photos") }
+          }
+        }
+        @Tab {
+          @TabItem {
+            @ { svgs::HOME }
+            @ { Label::new("Audio") }
+          }
+        }
+      }
+    }
+    .into()
+  }
+
+  fn containment_show() -> Widget {
+    fn_widget! {
+      @Column {
+        @ConstrainedBox {
+          clamp: BoxClamp::fixed_height(30.),
+          @Row {
+            h_align: HAlign::Center,
+            @Text { text: "Divider" }
+            @Icon {
+              size: Size::splat(16.),
+              @ { material_svgs::INFO }
+            }
+          }
+        }
+        @Divider {}
+      }
+    }
+    .into()
+  }
+
+  fn lists_show() -> Widget {
+    fn_widget! {
+      @Column {
+        margin: EdgeInsets::all(20.),
+        @Lists {
+          margin: EdgeInsets::only_top(20.),
+          @Link {
+            url: "https://ribir.org",
+            @ListItem {
+              @Leading {
+                @ { svgs::CHECK_BOX_OUTLINE_BLANK }
+              }
+              @ { HeadlineText(Label::new("One line list item")) }
+              @ { SupportingText(Label::new("One line supporting text")) }
+            }
+          }
+          @Divider { indent: 16. }
+          @ListItem {
+            @Leading {
+              @ { svgs::MENU }
+            }
+            @ { HeadlineText(Label::new("One line list item")) }
+            @Trailing {
+              @ { Label::new("100+") }
+            }
+          }
+          @Divider { indent: 16. }
+          @ListItem {
+            line_number: 2usize,
+            @Leading {
+              @Avatar {
+                @ { ShareResource::new(PixelImage::from_png(include_bytes!("../../attachments/3DDD-1.png"))) }
+              }
+            }
+            @ { HeadlineText(Label::new("Two lines list item")) }
+            @ { SupportingText(Label::new("Two lines supporting text \rTwo lines supporting text")) }
+            @Trailing {
+              @ { svgs::CHECK_BOX_OUTLINE_BLANK }
+            }
+          }
+          @Divider { indent: 16. }
+          @ListItem {
+            @Leading {
+              @Avatar {
+                @ { Label::new("A") }
               }
             }
+            @ { HeadlineText(Label::new("One lines list item")) }
+            @ { SupportingText(Label::new("One lines supporting text")) }
+            @Trailing {
+              @ { Label::new("100+") }
+            }
+          }
+          @Divider { indent: 16. }
+          @ListItem {
+            @Leading {
+              @ { Poster(ShareResource::new(PixelImage::from_png(include_bytes!("../../attachments/3DDD-3.png")))) }
+            }
+            @ { HeadlineText(Label::new("One lines list item")) }
+            @ { SupportingText(Label::new("One lines supporting text")) }
+            @Trailing {
+              @ { Label::new("100+") }
+            }
           }
         }
       }
-    }.into()
+    }
+    .into()
   }
+
+  fn checkbox_show() -> Widget {
+    fn_widget! {
+      @Column {
+        margin: EdgeInsets::all(20.),
+        @Lists {
+          @Checkbox {
+            @Leading {
+              @ { Label::new("Option1") }
+            }
+          }
+          @Checkbox {
+            @Leading {
+              @ { Label::new("Option2") }
+            }
+          }
+          @Checkbox {
+            @Leading {
+              @ { Label::new("Option3") }
+            }
+          }
+        }
+      }
+    }
+    .into()
+  }
+
+  fn_widget! {
+    @Tabs {
+      pos: Position::Bottom,
+      @Tab {
+        @TabItem {
+          @ { Label::new("Actions") }
+        }
+        @TabPane {
+          @ { actions_show() }
+        }
+      }
+      @Tab {
+        @TabItem {
+          @ { Label::new("Tabs") }
+        }
+        @TabPane {
+          @ { tabs_show() }
+        }
+      }
+      @Tab {
+        @TabItem {
+          @ { Label::new("Containment") }
+        }
+        @TabPane {
+          @ { containment_show() }
+        }
+      }
+      @Tab {
+        @TabItem {
+          @ { Label::new("Lists") }
+        }
+        @TabPane {
+          @ { lists_show() }
+        }
+      }
+      @Tab {
+        @TabItem {
+          @ { Label::new("Selections") }
+        }
+        @TabPane {
+          @ { checkbox_show() }
+        }
+      }
+    }
+  }
+  .into()
 }
 
-pub fn storybook() -> Widget { Storybook {}.into() }
+pub fn storybook() -> Widget {
+  fn_widget! {
+    @Column {
+      background: Palette::of(ctx!()).surface_container_low(),
+      @ { header() }
+      @Expanded {
+        @ { content() }
+      }
+    }
+  }
+  .into()
+}
diff --git a/examples/todos/src/todos.rs b/examples/todos/src/todos.rs
index 2be5f2cdd..24c89721f 100644
--- a/examples/todos/src/todos.rs
+++ b/examples/todos/src/todos.rs
@@ -14,7 +14,7 @@ struct Todos {
 }
 
 impl Compose for Todos {
-  fn compose(mut this: State<Self>) -> Widget {
+  fn compose(this: State<Self>) -> Widget {
     fn_widget! {
       @Column {
         padding: EdgeInsets::all(10.),
@@ -25,8 +25,8 @@ impl Compose for Todos {
         @{
           let mut input = @Input { };
           let add_task = move |_: &mut _| if !$input.text().is_empty() {
-              $this.new_task($input.text().to_string());
-              $input.set_text("");
+              $this.write().new_task($input.text().to_string());
+              $input.write().set_text("");
           };
           @Row {
             @Container {
@@ -48,15 +48,15 @@ impl Compose for Todos {
           pos: Position::Top,
           @Tab {
             @TabItem { @{ Label::new("ALL") } }
-            @TabPane { @{ Self::pane(this.clone_state(), |_| true) } }
+            @TabPane { @{ Self::pane(this.clone_writer(), |_| true) } }
           }
           @Tab {
             @TabItem { @{ Label::new("ACTIVE") } }
-            @TabPane { @{ Self::pane(this.clone_state(), |task| !task.finished)} }
+            @TabPane { @{ Self::pane(this.clone_writer(), |task| !task.finished)} }
           }
           @Tab {
             @TabItem { @{ Label::new("DONE") } }
-            @TabPane { @{ Self::pane(this.clone_state(), |task| task.finished) } }
+            @TabPane { @{ Self::pane(this.clone_writer(), |task| task.finished) } }
           }
         }
       }
@@ -66,25 +66,24 @@ impl Compose for Todos {
 }
 
 impl Todos {
-  fn pane(mut this: Stateful<Self>, cond: fn(&Task) -> bool) -> Widget {
+  fn pane(this: Writer<Self>, cond: fn(&Task) -> bool) -> Widget {
     fn_widget! {
-
+      // todo: pipe only for list items, not lists
       @VScrollBar { @ { pipe! {
         let mut mount_task_cnt = Stateful::new(0);
 
         @Lists {
           // when performed layout, means all task are mounted, we reset the mount count.
-          on_performed_layout: move |_| *$mount_task_cnt = 0,
+          on_performed_layout: move |_| *$mount_task_cnt.write() = 0,
           padding: EdgeInsets::vertical(8.),
           @ {
-            let mut this2 = this.clone_state();
             let task_widget_iter = $this
               .tasks
               .iter()
               .enumerate()
               .filter_map(move |(idx, task)| { cond(task).then_some(idx) })
               .map(move |idx| {
-                let mut task = partial_state!($this2.tasks[idx]);
+                let mut task = split_writer!($this.tasks[idx]);
                 let mut key = @KeyWidget { key: $task.id, value: () };
                 let mut mount_idx = Stateful::new(0);
 
@@ -94,14 +93,14 @@ impl Todos {
                     duration: Duration::from_millis(150),
                     easing: easing::EASE_IN,
                   }.into_inner(),
-                  state: route_state!($key.transform),
+                  state: map_writer!($key.transform),
                   from: Transform::translation(-400., 0. ),
                 };
                 @ $key {
                   @ListItem {
                     on_mounted: move |_| if $key.is_enter() {
-                      *$mount_idx = *$mount_task_cnt;
-                      *$mount_task_cnt += 1;
+                      *$mount_idx.write() = *$mount_task_cnt;
+                      *$mount_task_cnt.write() += 1;
                       mount_animate.run();
                     },
                     @{ HeadlineText(Label::new($task.label.clone())) }
@@ -111,14 +110,16 @@ impl Todos {
                           checked: pipe!($task.finished),
                           margin: EdgeInsets::vertical(4.),
                         };
-                        watch!($checkbox.checked).subscribe(move |v| $task.finished = v);
+                        watch!($checkbox.checked)
+                          .distinct_until_changed()
+                          .subscribe(move |v| $task.write().finished = v);
                         CustomEdgeWidget(checkbox.into())
                       }
                     }
                     @Trailing {
                       cursor: CursorIcon::Hand,
                       visible: $key.mouse_hover(),
-                      on_tap: move |_| { $this2.tasks.remove(idx); },
+                      on_tap: move |_| { $this.write().tasks.remove(idx); },
                       @{ svgs::CLOSE }
                     }
                   }
diff --git a/ribir/src/app.rs b/ribir/src/app.rs
index 7d2edae05..9a19322a3 100644
--- a/ribir/src/app.rs
+++ b/ribir/src/app.rs
@@ -123,6 +123,7 @@ impl App {
               wnd.processes_native_event(event);
             }
           }
+          wnd.run_frame_tasks();
         }
         Event::MainEventsCleared => {
           AppCtx::run_until_stalled();
diff --git a/test_cases/messages/messages_with_default_by_wgpu.png b/test_cases/messages/messages_with_default_by_wgpu.png
index ed7b290471d0fbe8689db23287597c00a505e4f4..fb90c998b6d38f47493b491b2bb36820f212036e 100644
GIT binary patch
literal 29618
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
W`tpjmH$W{;B6{8C$jfWq%lHR{(9?|o

literal 34832
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
bbKLh+&ofzjPQFoq!N15&+ukePuvhRuCGcVn

diff --git a/test_cases/messages/messages_with_material_by_wgpu.png b/test_cases/messages/messages_with_material_by_wgpu.png
index 3264c0626bc8b418d0e85c094c9c758128200bbd..18fa093dfdead869c172a9fb9ab345e9511f40f2 100644
GIT binary patch
literal 30889
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

literal 36099
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
I?!Ci*1M?FfumAu6

diff --git a/test_cases/storybook/storybook_with_default_by_wgpu.png b/test_cases/storybook/storybook_with_default_by_wgpu.png
index 1fc9da49b3b81c7baa1243695578a85a596899c4..ef383eb24ce8880dc8f49813fe178f5e552f20f3 100644
GIT binary patch
literal 34428
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

literal 36386
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

diff --git a/test_cases/storybook/storybook_with_material_by_wgpu.png b/test_cases/storybook/storybook_with_material_by_wgpu.png
index dcd27a0d634b61dab8c62107711bafa65ffb9e2d..236373d4fb634cf20be6f439d393127bf372e31a 100644
GIT binary patch
literal 36754
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

literal 36940
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%0A$oFh#u&
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
aE&1!0>z}%`T7>@1p7ru?5B=t~b^jmE+2OSS

diff --git a/test_cases/todos/todos_with_default_by_wgpu.png b/test_cases/todos/todos_with_default_by_wgpu.png
index 8c611463a7ee1f180abee274905e2f67a9bf026a..0c8a017de5b9de47e7b2b8480d80157a1f4f8d87 100644
GIT binary patch
literal 12114
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
EAKf7y<NyEw

literal 12960
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

diff --git a/test_cases/todos/todos_with_material_by_wgpu.png b/test_cases/todos/todos_with_material_by_wgpu.png
index b134f3098bc431ddfd017d16746fb18ae3ca3ce0..fce70df59eb8ae9ea2289f718685853a812a3e2a 100644
GIT binary patch
literal 12339
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

literal 12939
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
K1?8{5yX9}%m{+&}

diff --git a/tests/child_template_derive_test.rs b/tests/child_template_derive_test.rs
index 9ce3d232b..50b244a7f 100644
--- a/tests/child_template_derive_test.rs
+++ b/tests/child_template_derive_test.rs
@@ -1,6 +1,6 @@
 use ribir::prelude::*;
 
-#[derive(Declare)]
+#[derive(Declare, Declare2)]
 struct P;
 
 struct ChildA;
@@ -20,7 +20,7 @@ impl ComposeChild for P {
   fn compose_child(_: State<Self>, _: Self::Child) -> Widget { Void.into() }
 }
 
-#[derive(Declare)]
+#[derive(Declare, Declare2)]
 struct P2;
 
 #[derive(Template)]
@@ -32,7 +32,7 @@ impl ComposeChild for P2 {
   fn compose_child(_: State<Self>, _: Self::Child) -> Widget { Void.into() }
 }
 
-#[derive(Declare)]
+#[derive(Declare, Declare2)]
 struct P3;
 
 #[derive(Template)]
@@ -50,43 +50,43 @@ impl ComposeChild for P3 {
 
 #[test]
 fn syntax_pass() {
-  let _no_care_order = widget! {
-    P {
-      self::ChildC
-      self::ChildA
-      self::ChildB
+  let _no_care_order = fn_widget! {
+    @P {
+      @{self::ChildC}
+      @{self::ChildA}
+      @{self::ChildB}
     }
   };
-  let _omit_option = widget! {
-    P {
-      self::ChildA
+  let _omit_option = fn_widget! {
+    @P {
+      @{self::ChildA}
     }
   };
 }
 
 #[test]
 fn tuple_struct_template_syntax_pass() {
-  let _no_care_order = widget! {
-    P2 {
-      self::ChildC
-      self::ChildA
-      self::ChildB
+  let _no_care_order = fn_widget! {
+    @P2 {
+      @{ self::ChildC }
+      @{ self::ChildA }
+      @{ self::ChildB }
     }
   };
-  let _omit_option = widget! {
-    P2 { self::ChildA }
+  let _omit_option = fn_widget! {
+    @P2 { @{self::ChildA} }
   };
 }
 
 #[test]
 fn enum_template() {
-  let _a = widget! {
-    P3 { self::ChildA }
+  let _a = fn_widget! {
+    @P3 { @{ self::ChildA } }
   };
-  let _b = widget! {
-    P { self::ChildB }
+  let _b = fn_widget! {
+    @P { @{ self::ChildB } }
   };
-  let _c = widget! {
-    P { self::ChildC }
+  let _c = fn_widget! {
+    @P { @{ self::ChildC } }
   };
 }
diff --git a/tests/compile_msg/declare/assign_watch_pass.rs b/tests/compile_msg/declare/assign_watch_pass.rs
deleted file mode 100644
index 1621e91f6..000000000
--- a/tests/compile_msg/declare/assign_watch_pass.rs
+++ /dev/null
@@ -1,15 +0,0 @@
-use ribir::prelude::*;
-
-fn main() {
-  let _flow_simple = widget! {
-    Flex {
-      SizedBox {
-        id: a,
-        size: Size::zero(),
-      }
-      SizedBox {
-        size:= assign_watch!(a.size).stream_map(|o| o.distinct_until_changed()),
-      }
-    }
-  };
-}
diff --git a/tests/compile_msg/declare/ctx_only_allow_in_init_and_finally_fail.rs b/tests/compile_msg/declare/ctx_only_allow_in_init_and_finally_fail.rs
deleted file mode 100644
index 8ff715824..000000000
--- a/tests/compile_msg/declare/ctx_only_allow_in_init_and_finally_fail.rs
+++ /dev/null
@@ -1,34 +0,0 @@
-use ribir::prelude::*;
-
-fn main() {
-  let _ctx_use_in_init_pass = widget! {
-    init ctx => {
-      let primary = Palette::of(ctx).primary();
-    }
-    SizedBox { size: ZERO_SIZE, background: primary }
-  };
-
-  let _ctx_use_in_finally_pass = widget! {
-    SizedBox { size: ZERO_SIZE }
-    finally ctx => {
-      let _primary = Palette::of(ctx).primary();
-    }
-  };
-
-  let _no_ctx_conflict_pass = widget! {
-    init ctx => {}
-    DynWidget {
-      dyns: widget!{
-        init ctx => {}
-        Void {}
-      }
-    }
-  };
-
-  let _ctx_not_allow_in_other_phase = widget! {
-    init ctx => {}
-    SizedBox {
-      size: ZERO_SIZE, background: Palette::of(ctx).primary()
-    }
-  };
-}
diff --git a/tests/compile_msg/declare/ctx_only_allow_in_init_and_finally_fail.stderr b/tests/compile_msg/declare/ctx_only_allow_in_init_and_finally_fail.stderr
deleted file mode 100644
index 3b17b95cc..000000000
--- a/tests/compile_msg/declare/ctx_only_allow_in_init_and_finally_fail.stderr
+++ /dev/null
@@ -1,5 +0,0 @@
-error[E0423]: expected value, found macro `ctx`
-  --> compile_msg/declare/ctx_only_allow_in_init_and_finally_fail.rs:31:48
-   |
-31 |       size: ZERO_SIZE, background: Palette::of(ctx).primary()
-   |                                                ^^^ not a value
diff --git a/tests/compile_msg/declare/dollar_position_fail.stderr b/tests/compile_msg/declare/dollar_position_fail.stderr
index 25ff4b875..24b0e8a28 100644
--- a/tests/compile_msg/declare/dollar_position_fail.stderr
+++ b/tests/compile_msg/declare/dollar_position_fail.stderr
@@ -5,9 +5,12 @@ error: Syntax error: expected an identifier after `$`
   |                      ^
 
 error: expected `,`
- --> compile_msg/declare/dollar_position_fail.rs:9:5
-  |
-9 |     rdl! { Row { $x: 1} }
-  |     ^^^^^^^^^^^^^^^^^^^^^
-  |
-  = note: this error originates in the macro `rdl` (in Nightly builds, run with -Z macro-backtrace for more info)
+  --> compile_msg/declare/dollar_position_fail.rs:8:39
+   |
+8  |     let field_name_not_support_dollar = fn_widget! {
+   |  _______________________________________^
+9  | |     rdl! { Row { $x: 1} }
+10 | |   };
+   | |___^
+   |
+   = note: this error originates in the macro `fn_widget` (in Nightly builds, run with -Z macro-backtrace for more info)
diff --git a/tests/compile_msg/declare/expr_child_syntax_pass.rs b/tests/compile_msg/declare/expr_child_syntax_pass.rs
deleted file mode 100644
index f1ae8537e..000000000
--- a/tests/compile_msg/declare/expr_child_syntax_pass.rs
+++ /dev/null
@@ -1,36 +0,0 @@
-use ribir::prelude::*;
-
-fn main() {
-  let size = Size::zero();
-  let _child_always_declare_behind_field = widget! {
-    SizedBox {
-      size,
-      DynWidget {
-        dyns: if size.area() > 0. {
-          SizedBox { size }
-        } else {
-          SizedBox { size }
-        }
-      }
-    }
-  };
-
-  let _option_child = widget! {
-    SizedBox {
-      size,
-      background: Color::RED,
-      DynWidget {
-        dyns: (size.area() == 0.).then(|| SizedBox { size } )
-      }
-    }
-  };
-
-  let _expr_child_use_named_widget = widget! {
-    Flex {
-      SizedBox { id: a, size }
-      DynWidget {
-        dyns: (a.size.area() > 0.).then(|| SizedBox { size })
-      }
-    }
-  };
-}
\ No newline at end of file
diff --git a/tests/compile_msg/declare/fix_embed_used_name_warning_pass.rs b/tests/compile_msg/declare/fix_embed_used_name_warning_pass.rs
deleted file mode 100644
index 644ebfcd3..000000000
--- a/tests/compile_msg/declare/fix_embed_used_name_warning_pass.rs
+++ /dev/null
@@ -1,18 +0,0 @@
-use ribir::prelude::*;
-
-fn main() {
-  let _ = widget! {
-    SizedBox {
-      id: outside, size: Size::zero(),
-      cursor: CursorIcon::Default,
-      DynWidget {
-        dyns: widget! {
-          SizedBox {
-            size: outside.size,
-            cursor: outside.cursor.clone(),
-          }
-        }
-      }
-    }
-  };
-}
diff --git a/tests/compile_msg/declare/unused_warning_fail.rs b/tests/compile_msg/declare/unused_warning_fail.rs
deleted file mode 100644
index 8a4a90050..000000000
--- a/tests/compile_msg/declare/unused_warning_fail.rs
+++ /dev/null
@@ -1,39 +0,0 @@
-use ribir::prelude::*;
-
-fn main() {
-  compile_error!("Test for declare syntax warning.");
-  let _unused_id_warning = widget! {
-    SizedBox {
-      id: test_id,
-      size: Size::zero()
-    }
-  };
-  let _used_id_no_warning = widget! {
-    SizedBox {
-      id: id1,
-      size: Size::new(100., 100.),
-      SizedBox {
-        size: id1.size,
-      }
-    }
-  };
-
-  let _animate_used_builtin_no_warning = widget! {
-    SizedBox {
-      id: id1,
-      size: Size::zero(),
-      background: Color::RED,
-    }
-    transition prop!(id1.background) {
-      easing: easing::LINEAR
-    }
-  };
-
-  let _fix_use_no_declared_builtin_no_warning = widget! {
-    SizedBox {
-      id: sized_box,
-      size: Size::zero(),
-      SizedBox { size: Size::zero(), background: sized_box.background }
-    }
-  };
-}
diff --git a/tests/compile_msg/declare/unused_warning_fail.stderr b/tests/compile_msg/declare/unused_warning_fail.stderr
deleted file mode 100644
index 9901dbb40..000000000
--- a/tests/compile_msg/declare/unused_warning_fail.stderr
+++ /dev/null
@@ -1,17 +0,0 @@
-error: Test for declare syntax warning.
- --> compile_msg/declare/unused_warning_fail.rs:4:3
-  |
-4 |   compile_error!("Test for declare syntax warning.");
-  |   ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
-
-warning: assigned id but not be used in anywhere.
- --> compile_msg/declare/unused_warning_fail.rs:7:11
-  |
-7 |       id: test_id,
-  |           ^^^^^^^
-  |
-help: Remove this line.
- --> compile_msg/declare/unused_warning_fail.rs:7:11
-  |
-7 |       id: test_id,
-  |           ^^^^^^^
diff --git a/tests/compile_msg/declare/watch_syntax_pass.rs b/tests/compile_msg/declare/watch_syntax_pass.rs
deleted file mode 100644
index e47186447..000000000
--- a/tests/compile_msg/declare/watch_syntax_pass.rs
+++ /dev/null
@@ -1,89 +0,0 @@
-use ribir::prelude::*;
-
-fn main() {
-  let _flow_simple = widget! {
-    Flex {
-      SizedBox {
-        id: a,
-        size: Size::zero(),
-      }
-      SizedBox {
-        id: b,
-        size: Size::zero(),
-      }
-    }
-    finally {
-      watch!(a.size)
-        .subscribe(move |v| b.size = v );
-    }
-  };
-
-  let _flow_handler = widget! {
-    Flex {
-      SizedBox {
-        id: a,
-        size: Size::zero(),
-        on_tap: move |_| {}
-      }
-      SizedBox {
-        id: b,
-        size: a.size,
-      }
-      SizedBox {
-        id: c,
-        size: Size::zero(),
-      }
-    }
-    finally {
-      let_watch!(a.size + b.size)
-        .subscribe(move |v| c.size = v);
-    }
-
-  };
-
-  let _flow_embed = widget! {
-    Flex {
-      SizedBox {
-        id: a,
-        size: Size::zero(),
-      }
-      SizedBox {
-        id: b,
-        size: Size::zero(),
-      }
-      DynWidget {
-        dyns: true.then(||{
-          widget!{
-            SizedBox {
-              id: c,
-              size: Size::zero(),
-            }
-            finally {
-              watch!(a.size + b.size)
-                .subscribe(move |v| c.size = v);
-            }
-          }
-        })
-      }
-    }
-    finally {
-      watch!(a.size)
-        .subscribe(move |v| b.size = v);
-    }
-  };
-
-  let _fix_named_obj_moved_in_flow = widget! {
-    Flex {
-      SizedBox { id: a, size: Size::zero() }
-      SizedBox { id: b, size: Size::zero() }
-      SizedBox { id: c, size: Size::zero() }
-    }
-    finally {
-      watch!(a.size)
-        .subscribe(move |v| {
-          b.size = v;
-          c.size = v;
-        });
-    }
-  };
-}
diff --git a/tests/path_child_test.rs b/tests/path_child_test.rs
index e56395a11..993d560ba 100644
--- a/tests/path_child_test.rs
+++ b/tests/path_child_test.rs
@@ -9,10 +9,9 @@ enum AB {
 const SIZE_ONE: Size = Size::new(1., 1.);
 impl Compose for AB {
   fn compose(this: State<Self>) -> Widget {
-    widget! {
-      states { this: this.into_writable() }
-      SizedBox {
-        size: match *this {
+    fn_widget! {
+      @SizedBox {
+        size: match *$this {
           AB::A => ZERO_SIZE,
           AB::B => SIZE_ONE
         }
@@ -30,23 +29,24 @@ impl AB {
 
 #[test]
 fn path_widget() {
-  let _ = widget! { AB::A };
-  let _ = widget! { AB::B };
-  let _ = widget! { AB::a() };
-  let _ = widget! { AB::b() };
+  let _ = fn_widget! { AB::A };
+  let _ = fn_widget! { AB::B };
+  let _ = fn_widget! { AB::a() };
+  let _ = fn_widget! { AB::b() };
 }
 
 fn tuple_widget() -> Widget {
   struct TupleBox(Size);
   impl Compose for TupleBox {
     fn compose(this: State<Self>) -> Widget {
-      widget! {
-        states { this: this.into_readonly() }
-        SizedBox { size: this.0 }
+      fn_widget! {
+        @SizedBox {
+          size: pipe!($this.0),
+        }
       }
       .into()
     }
   }
-  widget! { TupleBox(Size::new(1., 1.)) }.into()
+  fn_widget! { TupleBox(Size::new(1., 1.)) }.into()
 }
 widget_layout_test!(tuple_widget, width == 1., height == 1.,);
diff --git a/tests/rdl_macro_test.rs b/tests/rdl_macro_test.rs
index 7df49c23b..711ad0eaa 100644
--- a/tests/rdl_macro_test.rs
+++ b/tests/rdl_macro_test.rs
@@ -1,4 +1,7 @@
-use ribir::{core::test_helper::*, prelude::*};
+use ribir::{
+  core::{reset_test_env, test_helper::*},
+  prelude::*,
+};
 use ribir_dev_helper::*;
 use std::{cell::Cell, rc::Rc};
 use winit::event::{DeviceId, ElementState, MouseButton, WindowEvent};
@@ -131,18 +134,18 @@ widget_layout_test!(dollar_as_middle_parent, width == 500., height == 500.,);
 
 fn pipe_as_field_value() -> impl Into<Widget> {
   let size = Stateful::new(Size::zero());
-  let mut size2 = size.clone();
+  let size2 = size.clone_reader();
   let w = fn_widget! {
     rdl! { SizedBox { size: pipe!(*$size2) }}
   };
-  *size.state_ref() = Size::new(100., 100.);
+  *size.write() = Size::new(100., 100.);
   w
 }
 widget_layout_test!(pipe_as_field_value, width == 100., height == 100.,);
 
 fn pipe_as_builtin_field_value() -> impl Into<Widget> {
   let margin = Stateful::new(EdgeInsets::all(0.));
-  let mut margin2 = margin.clone();
+  let margin2 = margin.clone_reader();
 
   let w = fn_widget! {
     rdl! { SizedBox {
@@ -150,20 +153,20 @@ fn pipe_as_builtin_field_value() -> impl Into<Widget> {
       margin: pipe!(*$margin2)
     }}
   };
-  *margin.state_ref() = EdgeInsets::all(50.);
+  *margin.write() = EdgeInsets::all(50.);
   w
 }
 widget_layout_test!(pipe_as_builtin_field_value, width == 100., height == 100.,);
 
 fn pipe_with_ctx() -> impl Into<Widget> {
-  let mut scale = Stateful::new(1.);
-  let scale2 = scale.clone();
+  let scale = Stateful::new(1.);
+  let scale2 = scale.clone_writer();
   let w = fn_widget! {
     rdl! { SizedBox {
       size: pipe!(IconSize::of(ctx!()).tiny * *$scale)
     }}
   };
-  *scale2.state_ref() = 2.;
+  *scale2.write() = 2.;
   w
 }
 widget_layout_test!(pipe_with_ctx, width == 36., height == 36.,);
@@ -180,22 +183,22 @@ fn pipe_with_builtin_field() -> impl Into<Widget> {
 }
 widget_layout_test!(pipe_with_builtin_field, width == 4., height == 2.,);
 
-// fn capture_closure_used_ctx() -> impl Into<Widget> {
-//   fn_widget! {
-//     let mut size_box = @SizedBox { size: ZERO_SIZE };
-//     @ $size_box {
-//       on_mounted: move |_| $size_box.size = IconSize::of(ctx!()).tiny
-//     }
-//   }
-// }
-// widget_layout_test!(capture_closure_used_ctx, width == 18., height == 18.,);
+fn capture_closure_used_ctx() -> impl Into<Widget> {
+  fn_widget! {
+    let mut size_box = @SizedBox { size: ZERO_SIZE };
+    @ $size_box {
+      on_mounted: move |_| $size_box.write().size = IconSize::of(ctx!()).tiny
+    }
+  }
+}
+widget_layout_test!(capture_closure_used_ctx, width == 18., height == 18.,);
 
 #[test]
 fn pipe_single_parent() {
-  let _guard = unsafe { AppCtx::new_lock_scope() };
+  reset_test_env!();
 
-  let mut outside_blank = Stateful::new(true);
-  let outside_blank2 = outside_blank.clone();
+  let outside_blank = Stateful::new(true);
+  let outside_blank2 = outside_blank.clone_writer();
   let w = fn_widget! {
     let edges = EdgeInsets::all(5.);
     let blank = pipe! {
@@ -216,17 +219,17 @@ fn pipe_single_parent() {
   wnd.draw_frame();
   assert_layout_result_by_path!(wnd, { path = [0], width == 110., height == 110., });
 
-  *outside_blank2.state_ref() = false;
+  *outside_blank2.write() = false;
   wnd.draw_frame();
   assert_layout_result_by_path!(wnd, { path = [0], width == 100., height == 100., });
 }
 
 #[test]
 fn pipe_multi_parent() {
-  let _guard = unsafe { AppCtx::new_lock_scope() };
+  reset_test_env!();
 
-  let mut stack_or_flex = Stateful::new(true);
-  let stack_or_flex2 = stack_or_flex.clone();
+  let stack_or_flex = Stateful::new(true);
+  let stack_or_flex2 = stack_or_flex.clone_writer();
   let w = fn_widget! {
     let container = pipe! {
       let c: Box<dyn BoxedMultiParent> = if *$stack_or_flex {
@@ -249,17 +252,17 @@ fn pipe_multi_parent() {
   wnd.draw_frame();
   assert_layout_result_by_path!(wnd, { path = [0], width == 100., height == 100., });
 
-  *stack_or_flex2.state_ref() = false;
+  *stack_or_flex2.write() = false;
   wnd.draw_frame();
   assert_layout_result_by_path!(wnd, { path = [0], width == 200., height == 100., });
 }
 
 #[test]
 fn pipe_as_child() {
-  let _guard = unsafe { AppCtx::new_lock_scope() };
+  reset_test_env!();
 
   let box_or_not = Stateful::new(true);
-  let mut box_or_not2 = box_or_not.clone();
+  let box_or_not2 = box_or_not.clone_reader();
   let w = fn_widget! {
     let blank: Pipe<Widget> = pipe!{
       if *$box_or_not2 {
@@ -283,11 +286,11 @@ fn pipe_as_child() {
 
 #[test]
 fn pipe_as_multi_child() {
-  let _guard = unsafe { AppCtx::new_lock_scope() };
+  reset_test_env!();
 
   let fix_box = SizedBox { size: Size::new(100., 100.) };
-  let mut cnt = Stateful::new(0);
-  let cnt2 = cnt.clone();
+  let cnt = Stateful::new(0);
+  let cnt2 = cnt.clone_writer();
   let w = fn_widget! {
     let boxes = pipe! {
       Multi::new((0..*$cnt).map(|_| fix_box.clone()).collect::<Vec<_>>())
@@ -299,7 +302,7 @@ fn pipe_as_multi_child() {
   wnd.draw_frame();
   assert_layout_result_by_path!(wnd, { path = [0], width == 0., height == 0., });
 
-  *cnt2.state_ref() = 3;
+  *cnt2.write() = 3;
   wnd.draw_frame();
   assert_layout_result_by_path!(wnd, { path = [0], width == 300., height == 100., });
 }
@@ -355,20 +358,20 @@ widget_layout_test!(
 
 #[test]
 fn closure_in_fn_widget_capture() {
-  let _guard = unsafe { AppCtx::new_lock_scope() };
+  reset_test_env!();
 
-  let mut hi_res = Stateful::new(CowArc::borrowed(""));
-  let hi_res2 = hi_res.clone();
+  let hi_res = Stateful::new(CowArc::borrowed(""));
+  let hi_res2 = hi_res.clone_reader();
   let w = fn_widget! {
     let mut text = @ Text { text: "hi" };
-    let on_mounted = move |_: &mut _| *$hi_res =$text.text.clone();
+    let on_mounted = move |_: &mut _| *$hi_res.write() =$text.text.clone();
     @ $text { on_mounted }
   };
 
   let mut wnd = TestWindow::new(w);
   wnd.draw_frame();
 
-  assert_eq!(&**hi_res2.state_ref(), "hi");
+  assert_eq!(&**hi_res2.read(), "hi");
 }
 
 fn at_embed_in_expression() -> impl Into<Widget> {
@@ -384,7 +387,7 @@ widget_layout_test!(at_embed_in_expression, width == 300., height == 100.,);
 
 #[test]
 fn declare_smoke() {
-  let _guard = unsafe { AppCtx::new_lock_scope() };
+  reset_test_env!();
 
   let _ = widget! {
     SizedBox {
@@ -396,7 +399,7 @@ fn declare_smoke() {
 
 #[test]
 fn simple_ref_bind_work() {
-  let _guard = unsafe { AppCtx::new_lock_scope() };
+  reset_test_env!();
 
   let size = Size::new(100., 100.);
   let w = widget! {
@@ -422,7 +425,7 @@ fn simple_ref_bind_work() {
 
 #[test]
 fn event_attr_sugar_work() {
-  let _guard = unsafe { AppCtx::new_lock_scope() };
+  reset_test_env!();
   const BEFORE_SIZE: Size = Size::new(50., 50.);
   const AFTER_TAP_SIZE: Size = Size::new(100., 100.);
   let w = widget! {
@@ -451,7 +454,7 @@ fn event_attr_sugar_work() {
 
 #[test]
 fn widget_wrap_bind_work() {
-  let _guard = unsafe { AppCtx::new_lock_scope() };
+  reset_test_env!();
 
   let w = widget! {
     Flex {
@@ -480,19 +483,22 @@ fn widget_wrap_bind_work() {
 
 #[test]
 fn expression_for_children() {
-  let _guard = unsafe { AppCtx::new_lock_scope() };
+  reset_test_env!();
 
   let size_one = Size::new(1., 1.);
   let size_five = Size::new(5., 5.);
-  let embed_expr = widget! {
-    Flex {
-      on_tap: move |_| sized_box.size = size_five,
-      SizedBox { id: sized_box, size: size_one }
-      // todo: how should we hint user, he/she need wrap inner widget of `DynWidget` to track named widget change.
-      Multi::new((0..3).map(move |_| widget!{ SizedBox { size: sized_box.size } }))
-      DynWidget {
-         dyns: (sized_box.size.area() > 2.).then(|| widget!{ SizedBox { size: sized_box.size } })
-      }
+  let embed_expr = fn_widget! {
+    let sized_box = @SizedBox { size: size_one };
+    let multi_box = Multi::new((0..3).map(move |_| @SizedBox { size: pipe!($sized_box.size) } ))
+    ;
+    let pipe_box = pipe!($sized_box.size.area() > 2.)
+      .map(move |v| v.then(|| @SizedBox { size: pipe!($sized_box.size) }));
+
+    @Flex {
+      on_tap: move |_| $sized_box.write().size = size_five,
+      @ { sized_box }
+      @ { multi_box }
+      @ { pipe_box }
     }
   };
 
@@ -517,16 +523,14 @@ fn expression_for_children() {
 
 #[test]
 fn embed_widget_ref_outside() {
-  let _guard = unsafe { AppCtx::new_lock_scope() };
+  reset_test_env!();
 
-  let w = widget! {
-    Flex {
-      SizedBox {
-        id: first,
-        size: Size::new(1., 1.),
-        on_tap: move |_| first.size = Size::new(2., 2.)
-      }
-      Multi::new((0..3).map(move |_| widget!{ SizedBox { size: first.size } }))
+  let w = fn_widget! {
+    let first = @SizedBox { size: Size::new(1., 1.) };
+    let three_box = @{ Multi::new((0..3).map(move |_| @ SizedBox { size: pipe!($first.size) } ))};
+    @Flex {
+      @$first { on_tap: move |_| $first.write().size = Size::new(2., 2.)}
+      @{ three_box }
     }
   };
 
@@ -540,20 +544,19 @@ fn embed_widget_ref_outside() {
 }
 
 #[test]
-fn data_flow_macro() {
-  let _guard = unsafe { AppCtx::new_lock_scope() };
+fn bind_fields() {
+  reset_test_env!();
 
   let size = Size::new(1., 1.);
-  let w = widget! {
-    Flex {
-      on_tap: move |_| a.size *= 2.,
-      SizedBox { id: c, size }
-      SizedBox { id: a, size }
-      SizedBox { id: b, size: a.size }
-    }
-    finally {
-      watch!(a.size + b.size)
-        .subscribe(move |v| c.size = v);
+  let w = fn_widget! {
+    let a = @SizedBox { size };
+    let b = @SizedBox { size: pipe!($a.size) };
+    let c = @SizedBox { size };
+    watch!($a.size + $b.size)
+      .subscribe(move |v| $c.write().size = v);
+    @Flex {
+      on_tap: move |_| $a.write().size *= 2.,
+      @ { Multi::new([a, b, c]) }
     }
   };
   let mut wnd = TestWindow::new(w);
@@ -597,7 +600,7 @@ widget_layout_test!(
 #[test]
 
 fn builtin_ref() {
-  let _guard = unsafe { AppCtx::new_lock_scope() };
+  reset_test_env!();
 
   let icon_track = Rc::new(Cell::new(CursorIcon::default()));
   let c_icon_track = icon_track.clone();
@@ -627,7 +630,7 @@ fn builtin_ref() {
 
 #[test]
 fn builtin_bind_to_self() {
-  let _guard = unsafe { AppCtx::new_lock_scope() };
+  reset_test_env!();
 
   let icon_track = Rc::new(Cell::new(CursorIcon::default()));
   let c_icon_track = icon_track.clone();
@@ -683,35 +686,31 @@ fn tap_at(wnd: &mut TestWindow, pos: (i32, i32)) {
 
 #[test]
 fn builtin_method_support() {
-  let _guard = unsafe { AppCtx::new_lock_scope() };
+  reset_test_env!();
 
   let layout_size = Stateful::new(Size::zero());
-  let w = widget! {
-    states { layout_size: layout_size.clone() }
-    SizedBox {
-      id: sized_box,
-      size: Size::new(100., 100.),
-    }
-    finally{
-      watch!(sized_box.layout_size())
-        .subscribe(move |v| *layout_size = v);
-    }
+  let c_layout_size = layout_size.clone_reader();
+  let w = fn_widget! {
+    let mut sized_box  = @SizedBox { size: Size::new(100., 100.) };
+    watch!($sized_box.layout_size())
+      .subscribe(move |v| *$layout_size.write() = v);
+    sized_box
   };
 
   let mut wnd = TestWindow::new(w);
   wnd.draw_frame();
 
-  assert_eq!(&*layout_size.state_ref(), &Size::new(100., 100.));
+  assert_eq!(*c_layout_size.read(), Size::new(100., 100.));
 }
 
 #[test]
 fn fix_builtin_field_can_declare_as_widget() {
-  let _guard = unsafe { AppCtx::new_lock_scope() };
+  reset_test_env!();
 
-  let w = widget! {
-    Margin {
+  let w = fn_widget! {
+    @Margin {
       margin: EdgeInsets::all(1.),
-      Void {}
+      @Void {}
     }
   };
 
@@ -721,17 +720,12 @@ fn fix_builtin_field_can_declare_as_widget() {
 
 #[test]
 fn fix_use_builtin_field_of_builtin_widget_gen_duplicate() {
-  let _guard = unsafe { AppCtx::new_lock_scope() };
+  reset_test_env!();
 
-  let w = widget! {
-    Margin {
-      id: margin,
-      margin: EdgeInsets::all(1.),
-      Void {}
-    }
-    finally {
-      watch!(margin.margin.clone()).subscribe(|_| {});
-    }
+  let w = fn_widget! {
+    let mut margin = @Margin { margin: EdgeInsets::all(1.) };
+    watch!($margin.margin).subscribe(|_| {});
+    @$margin  { @Void {} }
   };
 
   let wnd = TestWindow::new(w);
@@ -740,13 +734,12 @@ fn fix_use_builtin_field_of_builtin_widget_gen_duplicate() {
 
 #[test]
 fn fix_access_builtin_with_gap() {
-  widget! {
-    Void {
-      id: this,
-      cursor: CursorIcon::Hand,
+  fn_widget! {
+    let mut this = @Void { cursor: CursorIcon::Hand };
+    @$this {
       on_tap: move |_| {
         // this access cursor across `silent` should compile pass.
-        let _ = this.silent().cursor;
+        let _ = $this.silent().cursor;
       }
     }
   };
@@ -754,40 +747,43 @@ fn fix_access_builtin_with_gap() {
 
 #[test]
 fn fix_subscribe_cancel_after_widget_drop() {
-  let _guard = unsafe { AppCtx::new_lock_scope() };
+  reset_test_env!();
 
   let notify_cnt = Stateful::new(0);
+  let cnt: Writer<i32> = notify_cnt.clone_writer();
   let trigger = Stateful::new(true);
-  let w = widget! {
-    states { cnt: notify_cnt.clone(), trigger: trigger.clone() }
-    SizedBox {
-      size: Size::zero(),
-      widget::then(*trigger, || widget! {
-        SizedBox { size: Size::zero() }
-        finally {
-          let_watch!(*trigger).subscribe(move |_| *cnt +=1 );
-        }
-      })
+  let c_trigger = trigger.clone_reader();
+  let w = fn_widget! {
+    let mut container = @SizedBox { size: Size::zero() };
+    let h = watch!(*$c_trigger).subscribe(move |_| *$cnt.write() +=1 );
+    container.as_stateful().unsubscribe_on_drop(h);
+
+    @$container {
+      @ {
+        pipe!{$c_trigger.then(|| {
+          @SizedBox { size: Size::zero() }
+        })}
+      }
     }
   };
 
   let mut wnd = TestWindow::new(w);
   wnd.draw_frame();
   {
-    *trigger.state_ref() = true
+    *trigger.write() = true
   }
   wnd.draw_frame();
-  assert_eq!(*notify_cnt.state_ref(), 1);
+  assert_eq!(*notify_cnt.read(), 1);
   {
-    *trigger.state_ref() = true
+    *trigger.write() = true
   }
   wnd.draw_frame();
-  assert_eq!(*notify_cnt.state_ref(), 2);
+  assert_eq!(*notify_cnt.read(), 2);
   {
-    *trigger.state_ref() = true
+    *trigger.write() = true
   }
   wnd.draw_frame();
-  assert_eq!(*notify_cnt.state_ref(), 3);
+  assert_eq!(*notify_cnt.read(), 3);
 }
 
 fn fix_local_assign_tuple() -> Widget {
@@ -814,14 +810,14 @@ widget_layout_test!(
 
 #[test]
 fn fix_silent_not_relayout_dyn_widget() {
-  let _guard = unsafe { AppCtx::new_lock_scope() };
+  reset_test_env!();
 
   let trigger_size = Stateful::new(ZERO_SIZE);
-  let w = widget! {
-    states { trigger_size: trigger_size.clone() }
-    DynWidget {
-      dyns: if trigger_size.area() > 0. {
-        SizedBox { size: *trigger_size }
+  let c_trigger_size = trigger_size.clone_writer();
+  let w = fn_widget! {
+    pipe! {
+      if $trigger_size.area() > 0. {
+        SizedBox { size: *$trigger_size }
       } else {
         SizedBox { size: ZERO_SIZE }
       }
@@ -832,7 +828,7 @@ fn fix_silent_not_relayout_dyn_widget() {
   wnd.draw_frame();
   assert_layout_result_by_path!(wnd, { path = [0], size == ZERO_SIZE,});
   {
-    **trigger_size.state_ref().silent() = Size::new(100., 100.);
+    *c_trigger_size.silent() = Size::new(100., 100.);
   }
   // after silent modified, dyn widget not rebuild.
   wnd.draw_frame();
@@ -841,11 +837,11 @@ fn fix_silent_not_relayout_dyn_widget() {
 
 #[test]
 fn no_watch() {
-  let _guard = unsafe { AppCtx::new_lock_scope() };
+  reset_test_env!();
 
   let size = Stateful::new(ZERO_SIZE);
   let w = widget! {
-    states { size: size.clone() }
+    states { size: size.clone_stateful() }
     SizedBox { size: no_watch!(*size) }
   };
 
@@ -854,23 +850,8 @@ fn no_watch() {
   assert_layout_result_by_path!(wnd, { path = [0], size == ZERO_SIZE,});
 
   {
-    *size.state_ref() = Size::new(100., 100.)
+    *size.write() = Size::new(100., 100.)
   }
   wnd.draw_frame();
   assert_layout_result_by_path!(wnd, { path = [0], size == ZERO_SIZE,});
 }
-
-#[test]
-fn embed_shadow_states() {
-  let _guard = unsafe { AppCtx::new_lock_scope() };
-
-  let _ = widget! {
-    // variable `_a` here
-    FnWidget::new(|_: &BuildCtx| widget! {
-      // states shadow `a`
-      states { _a: Stateful::new(ZERO_SIZE) }
-      // `_a` should be the state `_a`
-      SizedBox { size: *_a }
-    })
-  };
-}
diff --git a/themes/material/src/ripple.rs b/themes/material/src/ripple.rs
index 4c4bb16f0..36d881fcb 100644
--- a/themes/material/src/ripple.rs
+++ b/themes/material/src/ripple.rs
@@ -4,7 +4,7 @@ use ribir_widgets::prelude::*;
 
 /// Widget use to do ripple animate as a visual feedback to user interactive.
 /// Usually for touch and mouse.
-#[derive(Declare, Debug)]
+#[derive(Declare, Debug, Declare2)]
 pub struct Ripple {
   /// The color of ripples.
   pub color: Color,
@@ -38,10 +38,10 @@ pub enum RippleBound {
 impl ComposeChild for Ripple {
   type Child = Widget;
 
-  fn compose_child(mut this: State<Self>, child: Self::Child) -> Widget {
+  fn compose_child(this: State<Self>, child: Self::Child) -> Widget {
     fn_widget! {
       let mut container = @Stack { fit: StackFit::Passthrough };
-      let mut ripple_at = $this.ripple_at.clone_state();
+      let mut ripple_at = $this.ripple_at.clone_writer();
 
       let ripple_widget = pipe!(*$ripple_at)
         .map(move |launch_at| {
@@ -61,7 +61,7 @@ impl ComposeChild for Ripple {
           let mut ripper_enter = @Animate {
             transition: transitions::LINEAR.of(ctx!()),
             state: LerpFnState::new(
-              route_state!($ripple.path),
+              map_writer!($ripple.path),
               move |_, _, rate| {
                 let radius = Lerp::lerp(&0., &radius, rate);
                 Path::circle(launch_at, radius)
@@ -75,11 +75,11 @@ impl ComposeChild for Ripple {
             // the ripple used only once, so we unsubscribe it after the animate finished.
             .take(1)
             .subscribe(move |_| {
-              $ripple_at.take();
+              $ripple_at.write().take();
             });
 
 
-          let mut ripper_fade_out = route_state!($ripple.opacity)
+          let mut ripper_fade_out = map_writer!($ripple.opacity)
             .transition(transitions::EASE_OUT.of(ctx!()), ctx!());
 
           let bounded = $this.bounded;
@@ -95,7 +95,7 @@ impl ComposeChild for Ripple {
 
           Some(@IgnorePointer {
             delay_drop_until: pipe!(!$ripper_fade_out.is_running()),
-            on_disposed: move |_| $ripple.opacity = 0.,
+            on_disposed: move |_| $ripple.write().opacity = 0.,
             on_mounted: move |_| { ripper_enter.run(); },
             @Container {
               size: $container.layout_size(),
@@ -105,7 +105,7 @@ impl ComposeChild for Ripple {
       });
 
       @ $container {
-        on_pointer_down: move |e| *$ripple_at = if $this.center {
+        on_pointer_down: move |e| *$ripple_at.write() = if $this.center {
           let center = $container.layout_size() / 2.;
           Some(Point::new(center.width, center.height))
         } else {
@@ -121,5 +121,5 @@ impl ComposeChild for Ripple {
 
 impl Ripple {
   /// Manual launch a ripple animate at `pos`.
-  pub fn launch_at(&mut self, pos: Point) { *self.ripple_at.state_ref() = Some(pos); }
+  pub fn launch_at(&mut self, pos: Point) { *self.ripple_at.write() = Some(pos); }
 }
diff --git a/themes/material/src/state_layer.rs b/themes/material/src/state_layer.rs
index 94ec49130..e3059835f 100644
--- a/themes/material/src/state_layer.rs
+++ b/themes/material/src/state_layer.rs
@@ -13,7 +13,7 @@ pub struct StateLayer {
 /// Widget that as visual indicator of material design used to communicate the
 /// status of interactive widget, its visual state will reactive to its child
 /// interactive state.
-#[derive(Declare)]
+#[derive(Declare, Declare2)]
 pub struct InteractiveLayer {
   /// the color of the state layer, will apply a fixed opacity in different
   /// state.
@@ -23,7 +23,7 @@ pub struct InteractiveLayer {
 }
 
 impl Compose for StateLayer {
-  fn compose(mut this: State<Self>) -> Widget {
+  fn compose(this: State<Self>) -> Widget {
     fn_widget! {
       @PathPaintKit {
         path: pipe!($this.path.clone()),
@@ -37,7 +37,7 @@ impl Compose for StateLayer {
 impl ComposeChild for InteractiveLayer {
   type Child = Widget;
 
-  fn compose_child(mut this: State<Self>, child: Self::Child) -> Widget {
+  fn compose_child(this: State<Self>, child: Self::Child) -> Widget {
     fn_widget! {
       let mut host = @$child { };
       let layer = @IgnorePointer {
diff --git a/widgets/src/avatar.rs b/widgets/src/avatar.rs
index b9f7233ff..fa82d1afb 100644
--- a/widgets/src/avatar.rs
+++ b/widgets/src/avatar.rs
@@ -9,16 +9,16 @@ use ribir_core::prelude::*;
 /// # use ribir_core::prelude::*;
 /// # use ribir_widgets::prelude::*;
 ///
-/// widget! {
-///   Avatar {
-///     Label::new("A")
+/// fn_widget! {
+///   @ Avatar {
+///     @ { Label::new("A") }
 ///   }
 /// };
 ///
 /// # #[cfg(feature="png")]
-/// widget! {
-///   Avatar {
-///     ShallowImage::from_png(include_bytes!("../../gpu/examples/leaves.png"))
+/// fn_widget! {
+///   @ Avatar {
+///     @ { ShallowImage::from_png(include_bytes!("../../gpu/examples/leaves.png")) }
 ///   }
 /// };
 /// ```
@@ -63,54 +63,51 @@ impl ComposeChild for Avatar {
   type Child = AvatarTemplate;
 
   fn compose_child(this: State<Self>, child: Self::Child) -> Widget {
-    widget! {
-      states { this: this.into_readonly() }
-      init ctx => {
+    fn_widget! {
+      @ {
         let AvatarStyle {
           size, radius, text_style,
-        } = AvatarStyle::of(ctx).clone();
-        let palette1 = Palette::of(ctx).clone();
-        let palette2 = Palette::of(ctx).clone();
-      }
-      SizedBox {
-        size,
-        widget::from::<Widget>(match child {
-          AvatarTemplate::Text(text) => widget! {
-            states { text: text.into_readonly() }
-            BoxDecoration {
-              background: Brush::from(palette1.base_of(&this.color)),
+        } = AvatarStyle::of(ctx!());
+        let palette1 = Palette::of(ctx!()).clone();
+        let palette2 = Palette::of(ctx!()).clone();
+        let w: Widget = match child {
+          AvatarTemplate::Text(mut text) => {
+            @Container {
+              size,
               border_radius: radius.map(Radius::all),
-              Container {
-                size,
-                Text {
-                  h_align: HAlign::Center,
-                  v_align: VAlign::Center,
-                  text: text.0.clone(),
-                  text_style: text_style.clone(),
-                  foreground: Brush::from(palette2.on_of(&palette2.base_of(&this.color))),
-                }
+              background: pipe!(Brush::from(palette1.base_of(&$this.color))),
+              @Text {
+                h_align: HAlign::Center,
+                v_align: VAlign::Center,
+                text: $text.0.clone(),
+                text_style,
+                foreground: pipe!(Brush::from(palette2.on_of(&palette2.base_of(&$this.color)))),
               }
-            }
-          }.into(),
-          AvatarTemplate::Image(image) => widget! {
-            DynWidget {
-              dyns: radius.map(|radius| {
-                let path = Path::rect_round(
-                  &Rect::from_size(size),
-                  &Radius::all(radius),
-                );
-                Clip { clip: ClipType::Path(path) }
-              }),
-              Container {
+            }.into()
+          },
+          AvatarTemplate::Image(image) => {
+            let clip = radius.map(|radius| {
+              let path = Path::rect_round(
+                &Rect::from_size(size),
+                &Radius::all(radius),
+              );
+              Clip { clip: ClipType::Path(path) }
+            });
+            @$clip {
+              @Container {
                 size,
-                DynWidget{
+                @$image {
                   box_fit: BoxFit::Contain,
-                  dyns: image,
                 }
               }
-            }
-          }.into()
-        })
+            }.into()
+          }
+        };
+
+        @SizedBox {
+          size,
+          @ { w }
+        }
       }
     }
     .into()
diff --git a/widgets/src/buttons.rs b/widgets/src/buttons.rs
index daeb5d8df..07c1f7ff1 100644
--- a/widgets/src/buttons.rs
+++ b/widgets/src/buttons.rs
@@ -1,7 +1,7 @@
 use crate::prelude::*;
 use ribir_core::prelude::*;
 
-#[derive(Declare)]
+#[derive(Declare, Declare2)]
 pub struct ButtonImpl {
   #[declare(default = 48.)]
   pub min_width: f32,
@@ -50,7 +50,7 @@ pub struct ButtonTemplate {
 impl ComposeChild for ButtonImpl {
   type Child = ButtonTemplate;
 
-  fn compose_child(mut this: State<Self>, child: Self::Child) -> Widget {
+  fn compose_child(this: State<Self>, child: Self::Child) -> Widget {
     let ButtonTemplate { icon, label } = child;
     fn_widget! {
       @BoxDecoration {
diff --git a/widgets/src/buttons/button.rs b/widgets/src/buttons/button.rs
index e756fe0ea..a3538fee7 100644
--- a/widgets/src/buttons/button.rs
+++ b/widgets/src/buttons/button.rs
@@ -24,7 +24,7 @@ impl CustomStyle for ButtonStyle {
   }
 }
 
-#[derive(Clone, Declare)]
+#[derive(Clone, Declare, Declare2)]
 pub struct ButtonDecorator {
   #[allow(unused)]
   pub button_type: ButtonType,
@@ -45,24 +45,24 @@ impl ComposeDecorator for ButtonDecorator {
 /// # use ribir_widgets::prelude::{Button, Label};
 ///
 /// // only icon
-/// let raw_icon_button = widget! {
-///   Button { svgs::ADD }
+/// let raw_icon_button = fn_widget! {
+///   @Button { @{ svgs::ADD } }
 /// };
 ///
 /// // only label
-/// let raw_label_button = widget! {
-///   Button { Label::new("raw button") }
+/// let raw_label_button = fn_widget! {
+///   @Button { @ { Label::new("raw button") } }
 /// };
 ///
 /// // use custom color
-/// let custom_color_button = widget! {
-///   Button {
+/// let custom_color_button = fn_widget! {
+///   @Button {
 ///     color: Color::RED,
-///     Label::new("raw button")
+///     @{ Label::new("raw button") }
 ///   }
 /// };
 /// ```
-#[derive(Declare, Default)]
+#[derive(Declare, Default, Declare2)]
 pub struct Button {
   #[declare(default=Palette::of(ctx).primary())]
   color: Color,
@@ -80,9 +80,8 @@ impl ComposeChild for Button {
       (None, None) => panic!("Button content cannot be empty!"),
     };
 
-    widget! {
-      states { this: this.into_readonly() }
-      init ctx => {
+    fn_widget! {
+      @ {
         let ButtonStyle {
           height,
           icon_size,
@@ -90,25 +89,26 @@ impl ComposeChild for Button {
           icon_pos,
           label_style,
           padding_style,
-        } = ButtonStyle::of(ctx).clone();
+        } = ButtonStyle::of(ctx);
         let palette = Palette::of(ctx).clone();
-      }
-      ButtonDecorator {
-        button_type,
-        color: this.color,
-        ButtonImpl {
-          height,
-          icon_size,
-          label_gap,
-          icon_pos,
-          label_style,
-          background_color: None,
-          foreground_color: Brush::from(palette.base_of(&this.color)),
-          radius: None,
-          border_style: None,
-          padding_style,
 
-          widget::from(child)
+        @ButtonDecorator {
+          button_type,
+          color: pipe!($this.color),
+          @ButtonImpl {
+            height,
+            icon_size,
+            label_gap,
+            icon_pos,
+            label_style,
+            background_color: None,
+            foreground_color: pipe!(Brush::from(palette.base_of(&$this.color))),
+            radius: None,
+            border_style: None,
+            padding_style,
+
+            @ { child }
+          }
         }
       }
     }
diff --git a/widgets/src/buttons/fab_button.rs b/widgets/src/buttons/fab_button.rs
index d413fa6fb..35e43133e 100644
--- a/widgets/src/buttons/fab_button.rs
+++ b/widgets/src/buttons/fab_button.rs
@@ -26,7 +26,7 @@ impl CustomStyle for FabButtonStyle {
   }
 }
 
-#[derive(Clone, Declare)]
+#[derive(Clone, Declare, Declare2)]
 pub struct FabButtonDecorator {
   #[allow(unused)]
   pub button_type: ButtonType,
@@ -47,33 +47,33 @@ impl ComposeDecorator for FabButtonDecorator {
 /// # use ribir_widgets::prelude::{FabButton, Label};
 ///
 /// // only icon
-/// let fab_icon_button = widget! {
-///   FabButton { svgs::ADD }
+/// let fab_icon_button = fn_widget! {
+///   @FabButton { @{ svgs::ADD } }
 /// };
 ///
 /// // only label
-/// let fab_label_button = widget! {
-///   FabButton { Label::new("fab button") }
+/// let fab_label_button = fn_widget! {
+///   @FabButton { @ { Label::new("fab button") } }
 /// };
 ///
 /// // both icon and label
-/// let fab_button = widget! {
-///    FabButton {
-///     svgs::ADD
-///     Label::new("fab button")
+/// let fab_button = fn_widget! {
+///    @FabButton {
+///     @ { svgs::ADD }
+///     @ { Label::new("fab button") }
 ///   }
 /// };
 ///
 /// // use custom color
-/// let custom_color_button = widget! {
-///   FabButton {
+/// let custom_color_button = fn_widget! {
+///   @FabButton {
 ///     color: Color::RED,
-///     svgs::ADD
-///     Label::new("fab button")
+///     @ { svgs::ADD }
+///     @ { Label::new("fab button") }
 ///   }
 /// };
 /// ```
-#[derive(Declare, Default)]
+#[derive(Declare, Default, Declare2)]
 pub struct FabButton {
   #[declare(default=Palette::of(ctx).primary())]
   color: Color,
@@ -91,9 +91,8 @@ impl ComposeChild for FabButton {
       (None, None) => panic!("Button content cannot be empty!"),
     };
 
-    widget! {
-      states { this: this.into_readonly() }
-      init ctx => {
+    fn_widget! {
+      @ {
         let FabButtonStyle {
           height,
           icon_size,
@@ -102,26 +101,27 @@ impl ComposeChild for FabButton {
           label_style,
           radius,
           padding_style,
-        } = FabButtonStyle::of(ctx).clone();
+        } = FabButtonStyle::of(ctx);
         let palette1 = Palette::of(ctx).clone();
         let palette2 = Palette::of(ctx).clone();
-      }
-      FabButtonDecorator {
-        button_type,
-        color: this.color,
-        ButtonImpl {
-          height,
-          icon_size,
-          label_gap,
-          icon_pos,
-          label_style,
-          background_color: Brush::from(palette1.base_of(&this.color)),
-          foreground_color: Brush::from(palette2.on_of(&palette2.base_of(&this.color))),
-          radius,
-          border_style: None,
-          padding_style,
 
-          widget::from(child)
+        @FabButtonDecorator {
+          button_type,
+          color: pipe!($this.color),
+          @ButtonImpl {
+            height,
+            icon_size,
+            label_gap,
+            icon_pos,
+            label_style,
+            background_color: pipe!(Brush::from(palette1.base_of(&$this.color))),
+            foreground_color: pipe!(Brush::from(palette2.on_of(&palette2.base_of(&$this.color)))),
+            radius,
+            border_style: None,
+            padding_style,
+
+            @ { child }
+          }
         }
       }
     }
diff --git a/widgets/src/buttons/filled_button.rs b/widgets/src/buttons/filled_button.rs
index fc1247d28..16eb31bda 100644
--- a/widgets/src/buttons/filled_button.rs
+++ b/widgets/src/buttons/filled_button.rs
@@ -26,7 +26,7 @@ impl CustomStyle for FilledButtonStyle {
   }
 }
 
-#[derive(Clone, Declare)]
+#[derive(Clone, Declare, Declare2)]
 pub struct FilledButtonDecorator {
   #[allow(unused)]
   pub button_type: ButtonType,
@@ -47,29 +47,29 @@ impl ComposeDecorator for FilledButtonDecorator {
 /// # use ribir_widgets::prelude::{FilledButton, Label};
 ///
 /// // only icon
-/// let filled_icon_button = widget! {
-///   FilledButton { svgs::ADD }
+/// let filled_icon_button = fn_widget! {
+///   @FilledButton { @{ svgs::ADD } }
 /// };
 ///
 /// // only label
-/// let filled_label_button = widget! {
-///   FilledButton { Label::new("filled button") }
+/// let filled_label_button = fn_widget! {
+///   @FilledButton { @{ Label::new("filled button") } }
 /// };
 ///
 /// // both icon and label
-/// let filled_button = widget! {
-///    FilledButton {
-///     svgs::ADD
-///     Label::new("filled button")
+/// let filled_button = fn_widget! {
+///    @FilledButton {
+///     @ { svgs::ADD }
+///     @ { Label::new("filled button") }
 ///   }
 /// };
 ///
 /// // use custom color
-/// let custom_color_button = widget! {
-///   FilledButton {
+/// let custom_color_button = fn_widget! {
+///   @FilledButton {
 ///     color: Color::RED,
-///     svgs::ADD
-///     Label::new("filled button")
+///     @ { svgs::ADD }
+///     @ { Label::new("filled button") }
 ///   }
 /// };
 /// ```
@@ -91,9 +91,8 @@ impl ComposeChild for FilledButton {
       (None, None) => panic!("Button content cannot be empty!"),
     };
 
-    widget! {
-      states { this: this.into_readonly() }
-      init ctx => {
+    fn_widget! {
+      @ {
         let FilledButtonStyle {
           height,
           icon_size,
@@ -102,26 +101,27 @@ impl ComposeChild for FilledButton {
           label_style,
           radius,
           padding_style,
-        } = FilledButtonStyle::of(ctx).clone();
+        } = FilledButtonStyle::of(ctx);
         let palette1 = Palette::of(ctx).clone();
         let palette2 = Palette::of(ctx).clone();
-      }
-      FilledButtonDecorator {
-        button_type,
-        color: this.color,
-        ButtonImpl {
-          height,
-          icon_size,
-          label_gap,
-          icon_pos,
-          label_style,
-          background_color: Brush::from(palette1.base_of(&this.color)),
-          foreground_color: Brush::from(palette2.on_of(&palette2.base_of(&this.color))),
-          radius,
-          border_style: None,
-          padding_style,
 
-          widget::from(child)
+        @FilledButtonDecorator {
+          button_type,
+          color: pipe!($this.color),
+          @ButtonImpl {
+            height,
+            icon_size,
+            label_gap,
+            icon_pos,
+            label_style,
+            background_color: pipe!(Brush::from(palette1.base_of(&$this.color))),
+            foreground_color: pipe!(Brush::from(palette2.on_of(&palette2.base_of(&$this.color)))),
+            radius,
+            border_style: None,
+            padding_style,
+
+            @ { child }
+          }
         }
       }
     }
diff --git a/widgets/src/buttons/outlined_button.rs b/widgets/src/buttons/outlined_button.rs
index 34a7d7d0f..5d03c6e60 100644
--- a/widgets/src/buttons/outlined_button.rs
+++ b/widgets/src/buttons/outlined_button.rs
@@ -28,7 +28,7 @@ impl CustomStyle for OutlinedButtonStyle {
   }
 }
 
-#[derive(Clone, Declare)]
+#[derive(Clone, Declare, Declare2)]
 pub struct OutlinedButtonDecorator {
   #[allow(unused)]
   pub button_type: ButtonType,
@@ -49,33 +49,33 @@ impl ComposeDecorator for OutlinedButtonDecorator {
 /// # use ribir_widgets::prelude::{OutlinedButton, Label};
 ///
 /// // only icon
-/// let outlined_icon_button = widget! {
-///   OutlinedButton { svgs::ADD }
+/// let outlined_icon_button = fn_widget! {
+///   @OutlinedButton { @{ svgs::ADD } }
 /// };
 ///
 /// // only label
-/// let outlined_label_button = widget! {
-///   OutlinedButton { Label::new("outlined button") }
+/// let outlined_label_button = fn_widget! {
+///   @OutlinedButton { @{ Label::new("outlined button") } }
 /// };
 ///
 /// // both icon and label
-/// let outlined_button = widget! {
-///    OutlinedButton {
-///     svgs::ADD
-///     Label::new("outlined button")
+/// let outlined_button = fn_widget! {
+///    @OutlinedButton {
+///     @ { svgs::ADD }
+///     @ { Label::new("outlined button")}
 ///   }
 /// };
 ///
 /// // use custom color
-/// let custom_color_button = widget! {
-///   OutlinedButton {
+/// let custom_color_button = fn_widget! {
+///   @OutlinedButton {
 ///     color: Color::RED,
-///     svgs::ADD
-///     Label::new("outlined button")
+///     @ { svgs::ADD }
+///     @ { Label::new("outlined button") }
 ///   }
 /// };
 /// ```
-#[derive(Declare, Default)]
+#[derive(Declare, Default, Declare2)]
 pub struct OutlinedButton {
   #[declare(default=Palette::of(ctx).primary())]
   color: Color,
@@ -93,9 +93,8 @@ impl ComposeChild for OutlinedButton {
       (None, None) => panic!("Button content cannot be empty!"),
     };
 
-    widget! {
-      states { this: this.into_readonly() }
-      init ctx => {
+    fn_widget! {
+      @ {
         let OutlinedButtonStyle {
           height,
           icon_size,
@@ -105,29 +104,30 @@ impl ComposeChild for OutlinedButton {
           radius,
           padding_style,
           border_width,
-        } = OutlinedButtonStyle::of(ctx).clone();
+        } = OutlinedButtonStyle::of(ctx);
         let palette1 = Palette::of(ctx).clone();
         let palette2 = Palette::of(ctx).clone();
-      }
-      OutlinedButtonDecorator {
-        button_type,
-        color: this.color,
-        ButtonImpl {
-          height,
-          icon_size,
-          label_gap,
-          icon_pos,
-          label_style,
-          background_color: None,
-          foreground_color: Brush::from(palette1.base_of(&this.color)),
-          radius,
-          border_style: Border::all(BorderSide {
-            width: border_width,
-            color: Brush::from(palette2.base_of(&this.color))
-          }),
-          padding_style,
 
-          widget::from(child)
+        @OutlinedButtonDecorator {
+          button_type,
+          color: pipe!($this.color),
+          @ButtonImpl {
+            height,
+            icon_size,
+            label_gap,
+            icon_pos,
+            label_style,
+            background_color: None,
+            foreground_color: pipe!(Brush::from(palette1.base_of(&$this.color))),
+            radius,
+            border_style: pipe!(Border::all(BorderSide {
+              width: border_width,
+              color: Brush::from(palette2.base_of(&$this.color))
+            })),
+            padding_style,
+
+            @ { child }
+          }
         }
       }
     }
diff --git a/widgets/src/checkbox.rs b/widgets/src/checkbox.rs
index 157bf4fbe..d59e8d3fb 100644
--- a/widgets/src/checkbox.rs
+++ b/widgets/src/checkbox.rs
@@ -25,7 +25,7 @@ pub struct CheckBoxStyle {
   pub label_color: Brush,
 }
 
-#[derive(Clone, Declare)]
+#[derive(Clone, Declare, Declare2)]
 pub struct CheckBoxDecorator {
   #[declare(default=Palette::of(ctx).primary())]
   pub color: Color,
@@ -54,81 +54,57 @@ impl ComposeDecorator for CheckBoxDecorator {
   fn compose_decorator(_: State<Self>, host: Self::Host) -> Widget { host }
 }
 
-impl Checkbox {
-  fn icon(this: Stateful<Self>, size: Size) -> Widget {
-    widget! {
-      states { this }
-      CheckBoxDecorator {
-        color: this.color,
-        Icon {
-          size,
-          widget::from(
-            if this.indeterminate {
+impl ComposeChild for Checkbox {
+  type Child = Option<CheckboxTemplate>;
+
+  fn compose_child(this: State<Self>, child: Self::Child) -> Widget {
+    fn_widget! {
+      let CheckBoxStyle {
+        icon_size,
+        label_style,
+        label_color,
+      } = CheckBoxStyle::of(ctx!());
+
+      let icon: Widget = @CheckBoxDecorator {
+        color: pipe!($this.color),
+        @Icon { size: icon_size,
+          @ { pipe!{
+            if $this.indeterminate {
               svgs::INDETERMINATE_CHECK_BOX
-            } else if this.checked {
+            } else if $this.checked {
               svgs::CHECK_BOX
             } else {
               svgs::CHECK_BOX_OUTLINE_BLANK
             }
-          )
+          }}
         }
-      }
-    }
-    .into()
-  }
-
-  fn label(label: Stateful<Label>, label_color: Brush, text_style: CowArc<TextStyle>) -> Widget {
-    widget! {
-      states { label }
-      Text {
-        text: label.0.clone(),
-        foreground: label_color,
-        text_style,
-      }
-    }
-    .into()
-  }
-}
-
-impl ComposeChild for Checkbox {
-  type Child = Option<CheckboxTemplate>;
-
-  fn compose_child(this: State<Self>, child: Self::Child) -> Widget {
-    widget! {
-      states { this: this.into_writable() }
-      init ctx => {
-        let CheckBoxStyle {
-          icon_size,
-          label_style,
-          label_color,
-        } = CheckBoxStyle::of(ctx).clone();
-      }
-      DynWidget {
+      }.into();
+
+      let checkbox: Widget = if let Some(child) = child  {
+        let label = |mut label: State<Label>| @Text {
+          text: $label.0.clone(),
+          foreground: label_color,
+          text_style: label_style,
+        }.into();
+
+        @Row {
+          @ {
+            Multi::new(match child {
+              CheckboxTemplate::Before(w) => [ label(w.child()), icon ],
+              CheckboxTemplate::After(w) => [ icon, label(w.child())],
+            })
+          }
+        }.into()
+      } else {
+        icon
+      };
+
+      @ $checkbox {
         cursor: CursorIcon::Hand,
-        on_tap: move |_| this.switch_check(),
+        on_tap: move |_| $this.write().switch_check(),
         on_key_up: move |k| if k.key == VirtualKeyCode::Space {
-          this.switch_check()
-        },
-        dyns: {
-          let label_style = label_style.clone();
-          let label_color = label_color.clone();
-          child.map_or(
-            Checkbox::icon(no_watch!(this.clone_stateful()), icon_size),
-            |mut child| widget! {
-              Row {
-                Multi::new(match &mut child {
-                  CheckboxTemplate::Before(w) => [
-                    Checkbox::label(w.child.clone_state(), label_color.clone(), label_style.clone()),
-                    Checkbox::icon(this.clone_stateful(), icon_size),
-                  ],
-                  CheckboxTemplate::After(w) => [
-                    Checkbox::icon(this.clone_stateful(), icon_size),
-                    Checkbox::label(w.child.clone_state(), label_color.clone(), label_style.clone()),
-                  ],
-                })
-              }
-          }.into())
-        },
+          $this.write().switch_check()
+        }
       }
     }
     .into()
diff --git a/widgets/src/icon.rs b/widgets/src/icon.rs
index 0389e11d2..7f49ee380 100644
--- a/widgets/src/icon.rs
+++ b/widgets/src/icon.rs
@@ -14,12 +14,10 @@ pub struct Icon {
 impl ComposeChild for Icon {
   type Child = Widget;
   fn compose_child(this: State<Self>, child: Self::Child) -> Widget {
-    widget! {
-      states { this: this.into_readonly() }
-      SizedBox {
-        size: this.size,
-        DynWidget {
-          dyns: child,
+    fn_widget! {
+      @SizedBox {
+        size: pipe!($this.size),
+        @ $child {
           box_fit: BoxFit::Contain,
           h_align: HAlign::Center,
           v_align: VAlign::Center,
diff --git a/widgets/src/input.rs b/widgets/src/input.rs
index 9ce70fc96..67e1555e2 100644
--- a/widgets/src/input.rs
+++ b/widgets/src/input.rs
@@ -96,41 +96,32 @@ declare_writer!(TextAreaWriter, TextArea);
 impl ComposeChild for Input {
   type Child = Option<State<Placeholder>>;
   fn compose_child(this: State<Self>, placeholder: Self::Child) -> Widget {
-    widget! {
-      init ctx => {
-        let frame_scheduler = ctx.window().frame_scheduler();
-      }
-      states {
-        this: this.into_writable(),
-      }
-      FocusScope {
-        ConstrainedBox {
-          clamp: size_clamp(&this.style, Some(1.), this.size),
-          TextEditorArea {
-            id: area,
-            text: this.text.clone(),
-            style: this.style.clone(),
-            caret: this.caret().clone(),
-            multi_line: false,
-            auto_wrap: false,
-
-            widget::from(placeholder)
+    fn_widget! {
+      let mut area = @TextEditorArea {
+        text: pipe!($this.text.clone()),
+        style: pipe!($this.style.clone()),
+        caret: pipe!(*$this.caret()),
+        multi_line: false,
+        auto_wrap: false,
+      };
+      area.modifies()
+        .delay(Duration::ZERO, ctx!().window().frame_scheduler())
+        .subscribe(move |_| {
+          let mut this = $this.silent();
+          let area = $area;
+          if area.caret != this.caret {
+            this.caret = area.caret;
           }
+          if area.text != this.text {
+            this.text = area.text.clone();
+          }
+        });
+      @FocusScope {
+        @ConstrainedBox {
+          clamp: pipe!(size_clamp(&$this.style, Some(1.), $this.size)),
+          @$area { @{ placeholder }}
         }
       }
-      finally {
-        let_watch!(area.clone_stateful())
-          .delay(Duration::ZERO, frame_scheduler)
-          .subscribe(move |area| {
-            let area = area.state_ref();
-            if area.caret != this.caret {
-              this.silent().caret = area.caret.clone();
-            }
-            if area.text != this.text {
-              this.silent().text = area.text.clone();
-            }
-          });
-      }
     }
     .into()
   }
@@ -148,41 +139,32 @@ impl CustomStyle for TextAreaStyle {
 impl ComposeChild for TextArea {
   type Child = Option<State<Placeholder>>;
   fn compose_child(this: State<Self>, placeholder: Self::Child) -> Widget {
-    widget! {
-      init ctx => {
-        let frame_scheduler = ctx.window().frame_scheduler();
-      }
-      states {
-        this: this.into_writable(),
-      }
-      FocusScope {
-        ConstrainedBox {
-          clamp: size_clamp(&this.style, this.rows, this.cols),
-          TextEditorArea {
-            id: area,
-            text: this.text.clone(),
-            style: this.style.clone(),
-            caret: this.caret.clone(),
-            multi_line: true,
-            auto_wrap: no_watch!(this.auto_wrap),
-
-            widget::from(placeholder)
+    fn_widget! {
+      let mut area = @TextEditorArea {
+        text: pipe!($this.text.clone()),
+        style: pipe!($this.style.clone()),
+        caret: pipe!($this.caret),
+        multi_line: true,
+        auto_wrap: $this.auto_wrap,
+      };
+      area.modifies()
+        .delay(Duration::ZERO, ctx!().window().frame_scheduler())
+        .subscribe(move |_| {
+          let mut this = $this.silent();
+          let mut area = $area;
+          if area.caret != this.caret {
+            this.caret = area.caret;
           }
+          if area.text != this.text {
+            this.text = area.text.clone();
+          }
+        });
+      @FocusScope {
+        @ConstrainedBox {
+          clamp: pipe!(size_clamp(&$this.style, $this.rows, $this.cols)),
+          @$area { @{ placeholder }}
         }
       }
-      finally {
-        let_watch!(area.clone_stateful())
-          .delay(Duration::ZERO, frame_scheduler)
-          .subscribe(move |area| {
-            let area = area.state_ref();
-            if area.caret != this.caret {
-              this.silent().caret = area.caret.clone();
-            }
-            if area.text != this.text {
-              this.silent().text = area.text.clone();
-            }
-          });
-      }
     }
     .into()
   }
diff --git a/widgets/src/input/caret.rs b/widgets/src/input/caret.rs
index e2e32fccd..424697e5d 100644
--- a/widgets/src/input/caret.rs
+++ b/widgets/src/input/caret.rs
@@ -1,7 +1,7 @@
 use crate::layout::SizedBox;
 use ribir_core::prelude::*;
 use std::time::Duration;
-#[derive(Declare)]
+#[derive(Declare, Declare2)]
 pub struct Caret {
   pub focused: bool,
   pub height: f32,
@@ -12,34 +12,32 @@ pub struct Caret {
 impl Compose for Caret {
   fn compose(this: State<Self>) -> Widget {
     let blink_interval = Duration::from_millis(500);
-    widget! {
-      states { this: this.into_readonly() }
-      SizedBox {
-        left_anchor: -this.height / 2.,
-        size: Size::new(this.height, this.height),
-        DynWidget {
-          id: caret,
-          opacity: 0.,
-          dyns: this.icon,
-          box_fit: BoxFit::Fill,
-        }
-      }
-      finally {
-        let scheduler = AppCtx::scheduler();
-        let mut _guard = None;
-        let_watch!(this.focused)
-          .distinct_until_changed()
-          .subscribe(move |focused| {
-            if focused {
-              caret.opacity = 1.;
-              let unsub = interval(blink_interval, scheduler.clone())
-                            .subscribe(move |_| caret.opacity = 1. - caret.opacity);
-              _guard = Some(BoxSubscription::new(unsub).unsubscribe_when_dropped());
-            } else {
-              caret.opacity = 0.;
-              _guard = None;
-            }
-          });
+    fn_widget! {
+      let icon = $this.icon;
+      let mut caret = @ $icon {
+        opacity: 0.,
+        box_fit: BoxFit::Fill,
+      };
+      let mut _guard = None;
+      watch!($this.focused)
+        .distinct_until_changed()
+        .subscribe(move |focused| {
+          if focused {
+            $caret.write().opacity = 1.;
+            let unsub = interval(blink_interval, AppCtx::scheduler())
+              .subscribe(move |idx| $caret.write().opacity = (idx % 2) as f32)
+              .unsubscribe_when_dropped();
+            _guard = Some(unsub);
+          } else {
+            $caret.write().opacity = 0.;
+            _guard = None;
+          }
+        });
+
+      @SizedBox {
+        left_anchor: pipe!(-$this.height / 2.),
+        size: pipe!(Size::new($this.height, $this.height)),
+        @ { caret }
       }
     }
     .into()
diff --git a/widgets/src/input/editarea.rs b/widgets/src/input/editarea.rs
index 478f4a295..f50866ceb 100644
--- a/widgets/src/input/editarea.rs
+++ b/widgets/src/input/editarea.rs
@@ -6,7 +6,7 @@ use ribir_core::prelude::*;
 use ribir_core::ticker::FrameMsg;
 use std::time::Duration;
 
-#[derive(Declare)]
+#[derive(Declare, Declare2)]
 pub(crate) struct TextEditorArea {
   pub(crate) style: CowArc<TextStyle>,
   pub(crate) text: CowArc<str>,
@@ -33,70 +33,34 @@ impl CustomStyle for PlaceholderStyle {
 impl ComposeChild for TextEditorArea {
   type Child = Option<State<Placeholder>>;
   fn compose_child(this: State<Self>, placeholder: Self::Child) -> Widget {
-    widget! {
-    states {
-      this: this.into_writable(),
-    }
-    FocusScope {
-      on_key_down: move|key| Self::key_handle(&mut this, key),
-      on_chars: move|ch| Self::edit_handle(&mut this, ch),
-      ScrollableWidget {
-        id: container,
-        scrollable: this.scroll_dir(),
-        padding: EdgeInsets::horizontal(1.),
-        Stack {
-          fit: StackFit::Passthrough,
-          Option::map(placeholder, |holder| widget! {
-            states { holder: holder.into_readonly() }
-            Text {
-              visible: this.text.is_empty(),
-              text: holder.0.clone(),
-            }
-          })
-          TextSelectable {
-            id: selectable,
-            caret: this.caret,
-            Text {
-              text: this.text.clone(),
-              text_style: this.style.clone(),
-              overflow: this.overflow(),
-            }
-          }
-          IgnorePointer{
-            UnconstrainedBox {
-              dir: UnconstrainedDir::Both,
-              Caret {
-                id: caret,
-                top_anchor: 0.,
-                left_anchor: 0.,
-                focused: container.has_focus(),
-                height: 0.,
-                on_performed_layout: move |ctx| {
-                  let height = ctx.box_size().unwrap().height;
-                  let pos = ctx.map_to_global(Point::new(0., height));
-                  ctx.window().set_ime_pos(pos);
-                },
-              }
-            }
-          }
-        }
-      }
-    }
-    finally ctx => {
-      let scheduler = ctx.window().frame_scheduler();
+    fn_widget! {
+      let mut container = @Stack {
+        fit: StackFit::Passthrough,
+        scrollable: pipe!($this.scroll_dir()),
+        padding: EdgeInsets::horizontal(1.)
+      };
+      let mut selectable = @TextSelectable { caret: pipe!($this.caret) };
+      let mut caret = @Caret {
+        focused: pipe!($container.has_focus()),
+        height: 0.
+      };
 
-      let_watch!(Point::new(caret.left_anchor.abs_value(1.), caret.top_anchor.abs_value(1.)))
+      let scrollable = container.get_builtin_scrollable_widget(ctx!());
+      watch!(Point::new($caret.left_anchor.abs_value(1.), $caret.top_anchor.abs_value(1.)))
         .scan_initial((Point::zero(), Point::zero()), |pair, v| (pair.1, v))
         .subscribe(move |(before, after)| {
-          let pos = auto_scroll_pos(&container, before, after, caret.layout_size());
-          container.silent().jump_to(pos);
+          let mut scrollable = $scrollable.silent();
+          let pos = auto_scroll_pos(&scrollable, before, after, $caret.layout_size());
+          scrollable.jump_to(pos);
         });
 
       selectable.modifies()
-        .delay(Duration::ZERO, scheduler.clone())
+        .delay(Duration::ZERO, ctx!().window().frame_scheduler())
         .subscribe(move |_| {
+          let mut this = $this.silent();
+          let selectable = $selectable;
           if selectable.caret != this.caret {
-            this.silent().caret = selectable.caret.clone();
+            this.caret = selectable.caret;
           }
         });
 
@@ -108,11 +72,45 @@ impl ComposeChild for TextEditorArea {
         .merge(observable::of(ModifyScope::BOTH))
         .sample(tick_of_layout_ready)
         .subscribe(move |_| {
-          let (offset, height) = selectable.cursor_layout();
-          caret.top_anchor = PositionUnit::Pixel(offset.y);
-          caret.left_anchor = PositionUnit::Pixel(offset.x);
-          caret.height = height;
+          let (offset, height) = $selectable.cursor_layout();
+          $caret.write().top_anchor = PositionUnit::Pixel(offset.y);
+          $caret.write().left_anchor = PositionUnit::Pixel(offset.x);
+          $caret.write().height = height;
         });
+
+      @FocusScope {
+        on_key_down: move|key| Self::key_handle(&mut $this.write(), key),
+        on_chars: move|ch| Self::edit_handle(&mut $this.write(), ch),
+        @$container {
+          @{
+            placeholder.map(move |mut holder| @Text {
+              visible: pipe!($this.text.is_empty()),
+              text: pipe!($holder.0.clone()),
+            })
+          }
+          @$selectable {
+            @{
+              @Text {
+                text: pipe!($this.text.clone()),
+                text_style: pipe!($this.style.clone()),
+                overflow: pipe!($this.overflow()),
+              }.into_inner()
+            }
+
+          }
+          @IgnorePointer{
+            @UnconstrainedBox {
+              dir: UnconstrainedDir::Both,
+              @$caret {
+                on_performed_layout: move |e| {
+                  let height = e.box_size().unwrap().height;
+                  let pos = e.map_to_global(Point::new(0., height));
+                  e.window().set_ime_pos(pos);
+                }
+              }
+            }
+          }
+        }
       }
     }
     .into()
diff --git a/widgets/src/input/handle.rs b/widgets/src/input/handle.rs
index 21053cceb..a1a2bdec4 100644
--- a/widgets/src/input/handle.rs
+++ b/widgets/src/input/handle.rs
@@ -1,7 +1,7 @@
 use std::ops::{Deref, DerefMut};
 
 use ribir_core::prelude::{
-  AppCtx, CharsEvent, GraphemeCursor, KeyboardEvent, RefState, TextWriter, VirtualKeyCode,
+  AppCtx, CharsEvent, GraphemeCursor, KeyboardEvent, TextWriter, VirtualKeyCode,
 };
 
 #[macro_export]
@@ -50,7 +50,7 @@ macro_rules! declare_writer {
 declare_writer!(InputWriter, TextEditorArea);
 use super::TextEditorArea;
 impl TextEditorArea {
-  pub(crate) fn edit_handle(this: &mut RefState<TextEditorArea>, event: &mut CharsEvent) {
+  pub(crate) fn edit_handle(this: &mut TextEditorArea, event: &mut CharsEvent) {
     if event.common.with_command_key() {
       return;
     }
@@ -67,7 +67,7 @@ impl TextEditorArea {
     }
   }
 
-  pub(crate) fn key_handle(this: &mut RefState<TextEditorArea>, event: &mut KeyboardEvent) {
+  pub(crate) fn key_handle(this: &mut TextEditorArea, event: &mut KeyboardEvent) {
     let mut deal = false;
     if event.with_command_key() {
       deal = key_with_command(this, event)
@@ -78,7 +78,7 @@ impl TextEditorArea {
   }
 }
 
-fn key_with_command(this: &mut RefState<TextEditorArea>, event: &mut KeyboardEvent) -> bool {
+fn key_with_command(this: &mut TextEditorArea, event: &mut KeyboardEvent) -> bool {
   if !event.with_command_key() {
     return false;
   }
@@ -111,7 +111,7 @@ fn key_with_command(this: &mut RefState<TextEditorArea>, event: &mut KeyboardEve
   }
 }
 
-fn single_key(this: &mut RefState<TextEditorArea>, key: &mut KeyboardEvent) -> bool {
+fn single_key(this: &mut TextEditorArea, key: &mut KeyboardEvent) -> bool {
   match key.key {
     VirtualKeyCode::NumpadEnter | VirtualKeyCode::Return => {
       if this.multi_line {
diff --git a/widgets/src/input/selected_text.rs b/widgets/src/input/selected_text.rs
index 7e4bc3b1c..76238a413 100644
--- a/widgets/src/input/selected_text.rs
+++ b/widgets/src/input/selected_text.rs
@@ -1,7 +1,7 @@
 use crate::layout::{Container, Stack};
 use ribir_core::prelude::*;
 
-#[derive(Declare)]
+#[derive(Declare, Declare2)]
 pub(crate) struct SelectedText {
   pub(crate) rects: Vec<Rect>,
 }
@@ -20,26 +20,21 @@ impl CustomStyle for SelectedTextStyle {
 
 impl Compose for SelectedText {
   fn compose(this: State<Self>) -> Widget {
-    widget! {
-      states { this: this.into_readonly() }
-      init ctx => {
-        let color = SelectedTextStyle::of(ctx).brush.clone();
-      }
-      Stack {
-        Multi::new(
-          this.rects.iter().copied()
-          .map(|rc| {
-            let color = color.clone();
-            widget! {
-                Container {
-                  background: color,
-                  top_anchor: rc.origin.y,
-                  left_anchor: rc.origin.x,
-                  size: rc.size,
-                }
+    fn_widget! {
+      let color = SelectedTextStyle::of(ctx!()).brush;
+      @Stack {
+        @ { pipe!{
+          let color = color.clone();
+          let iter = $this.rects.clone().into_iter().map(move |rc| {
+            @Container {
+              background: color.clone(),
+              top_anchor: rc.origin.y,
+              left_anchor: rc.origin.x,
+              size: rc.size,
             }
-          }).collect::<Vec<_>>()
-        )
+          });
+          Multi::new(iter)
+        }}
       }
     }
     .into()
diff --git a/widgets/src/input/text_selectable.rs b/widgets/src/input/text_selectable.rs
index 5e373b490..05c4a787d 100644
--- a/widgets/src/input/text_selectable.rs
+++ b/widgets/src/input/text_selectable.rs
@@ -5,7 +5,7 @@ use crate::layout::{Stack, StackFit};
 use crate::prelude::Text;
 use ribir_core::prelude::*;
 
-#[derive(Declare, Default)]
+#[derive(Declare, Declare2, Default)]
 pub struct TextSelectable {
   #[declare(default)]
   pub caret: CaretState,
@@ -14,18 +14,18 @@ pub struct TextSelectable {
 }
 
 impl ComposeChild for TextSelectable {
-  type Child = State<Text>;
+  type Child = FatObj<State<Text>>;
   fn compose_child(this: State<Self>, text: Self::Child) -> Widget {
-    let this = this.into_writable();
-    widget! {
-      states {
-        this: this.clone(),
-        text: text.into_readonly(),
-      }
-      Stack {
-        id: host,
-        fit: StackFit::Passthrough,
+    fn_widget! {
+      let mut host = @Stack { fit: StackFit::Passthrough };
+      let mut selected = @SelectedText {
+        visible: pipe!($host.has_focus()),
+        rects: pipe!($this.selected_rect()),
+      };
+
+      @$host {
         on_pointer_move: move |e| {
+          let mut this = $this.write();
           if let CaretState::Selecting(begin, _) = this.caret {
             if e.point_type == PointerType::Mouse
               && e.mouse_buttons() == MouseButtons::PRIMARY {
@@ -37,9 +37,9 @@ impl ComposeChild for TextSelectable {
         },
         on_pointer_down: move |e| {
           let position = e.position();
-          let end = this.helper.caret_position_from_pos(position.x, position.y);
+          let end = $this.helper.caret_position_from_pos(position.x, position.y);
           let begin = if e.with_shift_key() {
-            match this.caret {
+            match $this.caret {
               CaretState::Caret(begin) |
               CaretState::Select(begin, _) |
               CaretState::Selecting(begin, _) => begin,
@@ -47,9 +47,10 @@ impl ComposeChild for TextSelectable {
           } else {
             end
           };
-          this.caret = CaretState::Selecting(begin, end);
+          $this.write().caret = CaretState::Selecting(begin, end);
         },
         on_pointer_up: move |_| {
+          let mut this = $this.write();
           if let CaretState::Selecting(begin, end) = this.caret {
             this.caret = if begin == end {
               CaretState::Caret(begin)
@@ -60,37 +61,22 @@ impl ComposeChild for TextSelectable {
         },
         on_double_tap: move |e| {
           let position = e.position();
-          let caret = this.helper.caret_position_from_pos(position.x, position.y);
-          let rg = select_word(&text.text, caret.cluster);
-          this.caret = CaretState::Select(
+          let caret = $this.helper.caret_position_from_pos(position.x, position.y);
+          let rg = select_word(&$text.text, caret.cluster);
+          $this.write().caret = CaretState::Select(
             CaretPosition { cluster: rg.start, position: None },
             CaretPosition { cluster: rg.end, position: None }
           );
         },
-
-        on_key_down: move |event| key_handle(&mut this, &text.text, event),
-        SelectedText {
-          id: selected,
-          visible: host.has_focus(),
-          rects: vec![],
-        }
-        DynWidget {
-          dyns: text.clone(),
-          on_performed_layout: move |ctx| {
-            let bound = ctx.layout_clamp().expect("layout info must exit in performed_layout");
-            this.helper.glyphs = Some(text.text_layout(
-              AppCtx::typography_store(),
-              bound.max,
-            ));
-            this.forget_modifies();
-          }
-        }
-      }
-      finally {
-        this.modifies()
-          .subscribe(move |_| {
-            selected.rects = this.selected_rect();
-          });
+        on_key_down: move |event| key_handle(&mut $this.write(), &$text.text, event),
+        on_performed_layout: move |e: &mut LifecycleEvent| {
+          let mut this = $this.write();
+          let bound = e.layout_clamp().expect("layout info must exit in performed_layout");
+          this.helper.glyphs = Some($text.text_layout(bound.max));
+          this.forget_modifies();
+        },
+        @ { selected }
+        @ { text }
       }
     }
     .into()
@@ -103,7 +89,7 @@ impl TextSelectable {
   fn selected_rect(&self) -> Vec<Rect> { self.helper.selection(&self.caret.select_range()) }
 }
 
-fn key_handle(this: &mut RefState<TextSelectable>, text: &CowArc<str>, event: &mut KeyboardEvent) {
+fn key_handle(this: &mut TextSelectable, text: &CowArc<str>, event: &mut KeyboardEvent) {
   let mut deal = false;
   if event.with_command_key() {
     deal = deal_with_command(this, text, event);
@@ -115,7 +101,7 @@ fn key_handle(this: &mut RefState<TextSelectable>, text: &CowArc<str>, event: &m
 }
 
 fn deal_with_command(
-  this: &mut RefState<TextSelectable>,
+  this: &mut TextSelectable,
   text: &CowArc<str>,
   event: &mut KeyboardEvent,
 ) -> bool {
@@ -146,7 +132,7 @@ fn is_move_by_word(event: &KeyboardEvent) -> bool {
   return event.with_ctrl_key();
 }
 
-fn deal_with_selection(this: &mut RefState<TextSelectable>, text: &str, event: &mut KeyboardEvent) {
+fn deal_with_selection(this: &mut TextSelectable, text: &str, event: &mut KeyboardEvent) {
   let old_caret = this.caret;
   match event.key {
     VirtualKeyCode::Left => {
diff --git a/widgets/src/layout.rs b/widgets/src/layout.rs
index 9f5f5f909..8edeb8078 100644
--- a/widgets/src/layout.rs
+++ b/widgets/src/layout.rs
@@ -21,14 +21,10 @@ impl Direction {
   pub fn is_vertical(&self) -> bool { matches!(self, Direction::Vertical) }
 }
 
-mod column;
 pub mod container;
 pub mod flex;
-mod row;
 mod sized_box;
-pub use column::Column;
 pub use flex::*;
-pub use row::Row;
 pub use sized_box::SizedBox;
 pub mod expanded;
 pub use container::Container;
diff --git a/widgets/src/layout/column.rs b/widgets/src/layout/column.rs
deleted file mode 100644
index f09551c1a..000000000
--- a/widgets/src/layout/column.rs
+++ /dev/null
@@ -1,38 +0,0 @@
-use super::{flex::*, Direction};
-use ribir_core::prelude::*;
-
-#[derive(Default, Declare, Declare2, Clone)]
-pub struct Column {
-  #[declare(default)]
-  pub reverse: bool,
-  #[declare(default)]
-  pub wrap: bool,
-  #[declare(default)]
-  pub align_items: Align,
-  #[declare(default)]
-  pub justify_content: JustifyContent,
-  #[declare(default)]
-  pub item_gap: f32,
-  #[declare(default)]
-  pub line_gap: f32,
-}
-
-impl ComposeChild for Column {
-  type Child = Vec<Widget>;
-  fn compose_child(this: State<Self>, children: Self::Child) -> Widget {
-    widget! {
-      states { this: this.into_readonly() }
-      Flex {
-        reverse: this.reverse,
-        wrap: this.wrap,
-        direction: Direction::Vertical,
-        align_items: this.align_items,
-        justify_content: this.justify_content,
-        main_axis_gap: this.item_gap,
-        cross_axis_gap: this.line_gap,
-        Multi::new(children)
-      }
-    }
-    .into()
-  }
-}
diff --git a/widgets/src/layout/expanded.rs b/widgets/src/layout/expanded.rs
index 5bc64c79a..40c8bdb4f 100644
--- a/widgets/src/layout/expanded.rs
+++ b/widgets/src/layout/expanded.rs
@@ -7,6 +7,7 @@ use super::ConstrainedBox;
 /// divided among them according to the flex factor.
 #[derive(Clone, PartialEq, Declare, Declare2)]
 pub struct Expanded {
+  #[declare(default = 1.)]
   pub flex: f32,
 }
 
@@ -14,15 +15,13 @@ impl ComposeChild for Expanded {
   type Child = Widget;
   #[inline]
   fn compose_child(this: State<Self>, child: Self::Child) -> Widget {
-    let w = widget! {
-      ConstrainedBox {
+    let w = fn_widget! {
+      @ConstrainedBox {
         clamp: BoxClamp {
           min: Size::new(0., 0.),
           max: Size::new(f32::INFINITY, f32::INFINITY)
         },
-        DynWidget {
-          dyns: child
-        }
+        @{ child }
       }
     };
     DataWidget::attach_state(w.into(), this)
diff --git a/widgets/src/layout/flex.rs b/widgets/src/layout/flex.rs
index 3d6e95078..3658f814f 100644
--- a/widgets/src/layout/flex.rs
+++ b/widgets/src/layout/flex.rs
@@ -58,6 +58,64 @@ pub struct Flex {
   pub cross_axis_gap: f32,
 }
 
+/// A type help to declare flex widget as horizontal.
+pub struct Row;
+
+/// A type help to declare flex widget as Vertical.
+pub struct Column;
+
+impl Declare for Row {
+  type Builder = FlexDeclarer;
+  fn declare_builder() -> Self::Builder { Flex::declare_builder().direction(Direction::Horizontal) }
+}
+
+impl FlexDeclarer {
+  pub fn item_gap(mut self, gap: f32) -> Self {
+    self.main_axis_gap = Some(gap);
+    self
+  }
+
+  pub fn line_gap(mut self, gap: f32) -> Self {
+    self.cross_axis_gap = Some(gap);
+    self
+  }
+}
+
+impl Declare2 for Row {
+  type Builder = FlexDeclarer2;
+  fn declare2_builder() -> Self::Builder {
+    Flex::declare2_builder().direction(Direction::Horizontal)
+  }
+}
+
+impl FlexDeclarer2 {
+  pub fn item_gap<M, T>(mut self, gap: T) -> Self
+  where
+    DeclareInit<f32>: DeclareFrom<T, M>,
+  {
+    self.main_axis_gap = Some(DeclareInit::declare_from(gap));
+    self
+  }
+
+  pub fn line_gap<M, T>(mut self, gap: T) -> Self
+  where
+    DeclareInit<f32>: DeclareFrom<T, M>,
+  {
+    self.cross_axis_gap = Some(DeclareInit::declare_from(gap));
+    self
+  }
+}
+
+impl Declare for Column {
+  type Builder = FlexDeclarer;
+  fn declare_builder() -> Self::Builder { Flex::declare_builder().direction(Direction::Vertical) }
+}
+
+impl Declare2 for Column {
+  type Builder = FlexDeclarer2;
+  fn declare2_builder() -> Self::Builder { Flex::declare2_builder().direction(Direction::Vertical) }
+}
+
 impl Render for Flex {
   fn perform_layout(&self, clamp: BoxClamp, ctx: &mut LayoutCtx) -> Size {
     if Align::Stretch == self.align_items && self.wrap {
@@ -366,9 +424,11 @@ mod tests {
   use ribir_dev_helper::*;
 
   fn horizontal_line() -> Widget {
-    widget! {
-      Flex {
-        Multi::new((0..10).map(|_| SizedBox { size: Size::new(10., 20.) }))
+    fn_widget! {
+      @Flex {
+        @{
+          Multi::new((0..10).map(|_| SizedBox { size: Size::new(10., 20.) }))
+        }
       }
     }
     .into()
@@ -376,10 +436,10 @@ mod tests {
   widget_layout_test!(horizontal_line, width == 100., height == 20.,);
 
   fn vertical_line() -> Widget {
-    widget! {
-      Flex {
+    fn_widget! {
+      @Flex {
         direction: Direction::Vertical,
-        Multi::new((0..10).map(|_| SizedBox { size: Size::new(10., 20.) }))
+        @{ Multi::new((0..10).map(|_| SizedBox { size: Size::new(10., 20.) }))}
       }
     }
     .into()
@@ -388,10 +448,10 @@ mod tests {
 
   fn row_wrap() -> Widget {
     let size = Size::new(200., 20.);
-    widget! {
-      Flex {
+    fn_widget! {
+      @Flex {
         wrap: true,
-        Multi::new((0..3).map(|_| SizedBox { size }))
+        @{ Multi::new((0..3).map(|_| SizedBox { size })) }
       }
     }
     .into()
@@ -407,11 +467,11 @@ mod tests {
 
   fn reverse_row_wrap() -> Widget {
     let size = Size::new(200., 20.);
-    widget! {
-      Flex {
+    fn_widget! {
+      @Flex {
         wrap: true,
         reverse: true,
-        Multi::new((0..3).map(|_| SizedBox { size }))
+        @{ Multi::new((0..3).map(|_| SizedBox { size })) }
       }
     }
     .into()
@@ -495,12 +555,12 @@ mod tests {
 
   fn cross_axis_gap() -> Widget {
     let size = Size::new(200., 20.);
-    widget! {
-      Flex {
+    fn_widget! {
+      @Flex {
         wrap: true,
         cross_axis_gap: 10.,
         align_items: Align::Center,
-        Multi::new((0..3).map(|_| SizedBox { size }))
+        @{ Multi::new((0..3).map(|_| SizedBox { size })) }
       }
     }
     .into()
diff --git a/widgets/src/layout/row.rs b/widgets/src/layout/row.rs
deleted file mode 100644
index 241281680..000000000
--- a/widgets/src/layout/row.rs
+++ /dev/null
@@ -1,38 +0,0 @@
-use super::{flex::*, Direction};
-use ribir_core::prelude::*;
-
-#[derive(Default, Declare, Declare2, Clone)]
-pub struct Row {
-  #[declare(default)]
-  pub reverse: bool,
-  #[declare(default)]
-  pub wrap: bool,
-  #[declare(default = Align::Center)]
-  pub align_items: Align,
-  #[declare(default)]
-  pub justify_content: JustifyContent,
-  #[declare(default)]
-  pub item_gap: f32,
-  #[declare(default)]
-  pub line_gap: f32,
-}
-
-impl ComposeChild for Row {
-  type Child = Vec<Widget>;
-  fn compose_child(this: State<Self>, children: Self::Child) -> Widget {
-    widget! {
-      states { this: this.into_readonly() }
-      Flex {
-        reverse: this.reverse,
-        wrap: this.wrap,
-        direction: Direction::Horizontal,
-        align_items: this.align_items,
-        justify_content: this.justify_content,
-        main_axis_gap: this.item_gap,
-        cross_axis_gap: this.line_gap,
-        Multi::new(children)
-      }
-    }
-    .into()
-  }
-}
diff --git a/widgets/src/link.rs b/widgets/src/link.rs
index 73afb0c37..0c363833d 100644
--- a/widgets/src/link.rs
+++ b/widgets/src/link.rs
@@ -2,7 +2,7 @@ use log::warn;
 use ribir_core::prelude::*;
 use webbrowser::{open_browser as open, Browser};
 
-#[derive(Declare)]
+#[derive(Declare, Declare2)]
 pub struct Link {
   /// Want to open url
   #[declare(convert=into)]
@@ -15,15 +15,14 @@ pub struct Link {
 impl ComposeChild for Link {
   type Child = Widget;
   fn compose_child(this: State<Self>, child: Self::Child) -> Widget {
-    widget! {
-      states { this: this.into_readonly() }
-      DynWidget {
+    fn_widget! {
+      @ $child {
         on_tap: move |_| {
+          let this = $this;
           if open(this.browser, &this.url).is_err() {
             warn!("Open link fail");
           }
         },
-        dyns: child,
       }
     }
     .into()
diff --git a/widgets/src/lists.rs b/widgets/src/lists.rs
index 2ef031307..b1ea2ebc0 100644
--- a/widgets/src/lists.rs
+++ b/widgets/src/lists.rs
@@ -14,10 +14,10 @@ use ribir_core::prelude::*;
 /// # use ribir_widgets::prelude::*;
 ///
 /// // only single headline text
-/// widget! {
-///   Lists {
-///     ListItem {
-///       HeadlineText(Label::new("One line list item"))
+/// fn_widget! {
+///   @Lists {
+///     @ListItem {
+///       @{ HeadlineText(Label::new("One line list item")) }
 ///     }
 ///   }
 /// };
@@ -29,11 +29,11 @@ use ribir_core::prelude::*;
 /// # use ribir_widgets::prelude::*;
 ///
 /// // single headline text and supporting text
-/// widget! {
-///   Lists {
-///     ListItem {
-///       HeadlineText(Label::new("headline text"))
-///       SupportingText(Label::new("supporting text"))
+/// fn_widget! {
+///   @Lists {
+///     @ListItem {
+///       @ { HeadlineText(Label::new("headline text")) }
+///       @ { SupportingText(Label::new("supporting text")) }
 ///     }
 ///   }
 /// };
@@ -44,27 +44,27 @@ use ribir_core::prelude::*;
 /// # use ribir_core::prelude::*;
 /// # use ribir_widgets::prelude::*;
 ///
-/// widget! {
-///   Lists {
+/// fn_widget! {
+///   @Lists {
 ///     // use leading icon
-///     ListItem {
-///       Leading { svgs::CHECK_BOX_OUTLINE_BLANK }
-///       HeadlineText(Label::new("headline text"))
+///     @ListItem {
+///       @Leading { @{ svgs::CHECK_BOX_OUTLINE_BLANK } }
+///       @HeadlineText(Label::new("headline text"))
 ///     }
 ///     // use leading label
-///     ListItem {
-///       Leading { Label::new("A") }
-///       HeadlineText(Label::new("headline text"))
+///     @ListItem {
+///       @Leading { @{ Label::new("A") } }
+///       @HeadlineText(Label::new("headline text"))
 ///     }
 ///     // use leading custom widget
-///     ListItem {
-///       Leading {
-///         CustomEdgeWidget(widget! {
-///           Container {
+///     @ListItem {
+///       @Leading {
+///         @CustomEdgeWidget(
+///           @Container {
 ///             size: Size::splat(40.),
 ///             background: Color::YELLOW,
-///           }
-///         }.into())
+///           }.into()
+///         )
 ///       }
 ///     }
 ///   }
@@ -76,28 +76,28 @@ use ribir_core::prelude::*;
 /// # use ribir_core::prelude::*;
 /// # use ribir_widgets::prelude::*;
 ///
-/// widget! {
-///   Lists {
+/// fn_widget! {
+///   @Lists {
 ///     // use trailing icon
-///     ListItem {
-///       HeadlineText(Label::new("headline text"))
-///       Trailing { svgs::CHECK_BOX_OUTLINE_BLANK }
+///     @ListItem {
+///       @HeadlineText(Label::new("headline text"))
+///       @Trailing { @{ svgs::CHECK_BOX_OUTLINE_BLANK } }
 ///     }
 ///     // use trailing label
-///     ListItem {
-///       HeadlineText(Label::new("headline text"))
-///       Trailing { Label::new("A") }
+///     @ListItem {
+///       @HeadlineText(Label::new("headline text"))
+///       @Trailing { @{ Label::new("A") } }
 ///     }
 ///     // use trailing custom widget
-///     ListItem {
-///       HeadlineText(Label::new("headline text"))
-///       Trailing {
-///         CustomEdgeWidget(widget! {
-///           Container {
+///     @ListItem {
+///       @HeadlineText(Label::new("headline text"))
+///       @Trailing {
+///         @CustomEdgeWidget(
+///           @Container {
 ///             size: Size::splat(40.),
 ///             background: Color::YELLOW,
-///           }
-///         }.into())
+///           }.into()
+///         )
 ///       }
 ///     }
 ///   }
@@ -109,14 +109,14 @@ use ribir_core::prelude::*;
 /// # use ribir_core::prelude::*;
 /// # use ribir_widgets::prelude::*;
 ///
-/// widget! {
-///   Lists {
-///     ListItem {
-///       HeadlineText(Label::new("One line list item"))
+/// fn_widget! {
+///   @Lists {
+///     @ListItem {
+///       @ { HeadlineText(Label::new("One line list item")) }
 ///     }
-///     Divider {}
-///     ListItem {
-///       HeadlineText(Label::new("One line list item"))
+///     @Divider {}
+///     @ListItem {
+///       @ { HeadlineText(Label::new("One line list item")) }
 ///     }
 ///   }
 /// };
@@ -124,7 +124,7 @@ use ribir_core::prelude::*;
 #[derive(Declare, Declare2)]
 pub struct Lists;
 
-#[derive(Declare)]
+#[derive(Declare, Declare2)]
 pub struct ListsDecorator {}
 impl ComposeDecorator for ListsDecorator {
   type Host = Widget;
@@ -136,10 +136,10 @@ impl ComposeChild for Lists {
   type Child = Vec<Widget>;
 
   fn compose_child(_: State<Self>, child: Self::Child) -> Widget {
-    widget! {
-      ListsDecorator {
-        Column {
-          Multi::new(child)
+    fn_widget! {
+      @ListsDecorator {
+        @Column {
+          @ { Multi::new(child) }
         }
       }
     }
@@ -197,72 +197,58 @@ impl EdgeWidget {
       poster,
       custom,
     } = config;
-    match self {
-      EdgeWidget::Icon(w) => widget! {
-        DynWidget {
-          dyns: icon.gap.map(|margin| Margin { margin }),
-          Icon {
-            size: icon.size,
-            widget::from(w)
-          }
-        }
-      }
-      .into(),
-      EdgeWidget::Text(w) => widget! {
-        DynWidget {
-          dyns: text.gap.map(|margin| Margin { margin }),
-          widget!{
-            states { label: w.into_readonly() }
-            Text {
-              text: label.0.clone(),
+    fn_widget! {
+      let w: Widget = match self {
+        EdgeWidget::Icon(w) => {
+          let margin = icon.gap.map(|margin| Margin { margin });
+          @ $margin {
+            @Icon {
+              size: icon.size,
+              @ { w }
+            }
+          }.into()
+        },
+        EdgeWidget::Text(mut label) => {
+          let margin =  text.gap.map(|margin| Margin { margin });
+          @ $margin {
+            @Text {
+              text: $label.0.clone(),
               text_style: text.style.clone(),
               foreground: text.foreground.clone(),
             }
-          }
-        }
-      }
-      .into(),
-      EdgeWidget::Avatar(w) => widget! {
-        DynWidget {
-          dyns: avatar.gap.map(|margin| Margin { margin }),
-          widget::from(w)
-        }
-      }
-      .into(),
-      EdgeWidget::Image(w) => widget! {
-        DynWidget {
-          dyns: image.gap.map(|margin| Margin { margin }),
-          SizedBox {
-            size: image.size,
-            DynWidget {
-              box_fit: BoxFit::None,
-              dyns: w
+          }.into()
+        },
+        EdgeWidget::Avatar(w) => {
+          let margin = avatar.gap.map(|margin| Margin { margin });
+          @ $margin { @ { w }}.into()
+        },
+        EdgeWidget::Image(w) => {
+          let margin = image.gap.map(|margin| Margin { margin });
+          @ $margin {
+            @SizedBox {
+              size: image.size,
+              @ $w { box_fit: BoxFit::None }
             }
-          }
-        }
-      }
-      .into(),
-      EdgeWidget::Poster(w) => widget! {
-        DynWidget {
-          dyns: poster.gap.map(|margin| Margin { margin }),
-          SizedBox {
-            size: poster.size,
-            DynWidget {
-              box_fit: BoxFit::None,
-              dyns: w.0
+          }.into()
+        },
+        EdgeWidget::Poster(w) => {
+          let margin = poster.gap.map(|margin| Margin { margin });
+          let w = w.0;
+          @ $margin {
+            @ SizedBox {
+              size: poster.size,
+              @ $w { box_fit: BoxFit::None }
             }
-          }
-        }
-      }
-      .into(),
-      EdgeWidget::Custom(w) => widget! {
-        DynWidget {
-          dyns: custom.gap.map(|margin| Margin { margin }),
-          widget::from(w.0)
-        }
-      }
-      .into(),
+          }.into()
+        },
+        EdgeWidget::Custom(w) => {
+          let margin = custom.gap.map(|margin| Margin { margin });
+          @$margin { @ { w.0 }}.into()
+        },
+      };
+      w
     }
+    .into()
   }
 }
 
@@ -270,16 +256,16 @@ impl EdgeWidget {
 pub struct ListItemTml {
   headline: State<HeadlineText>,
   supporting: Option<State<SupportingText>>,
-  leading: Option<FatObj<SinglePair<Leading, EdgeWidget>>>,
-  trailing: Option<FatObj<SinglePair<Trailing, EdgeWidget>>>,
+  leading: Option<SinglePair<FatObj<Leading>, EdgeWidget>>,
+  trailing: Option<SinglePair<FatObj<Trailing>, EdgeWidget>>,
 }
 
 impl ComposeChild for ListItem {
   type Child = ListItemTml;
 
-  fn compose_child(mut this: State<Self>, child: Self::Child) -> Widget {
+  fn compose_child(this: State<Self>, child: Self::Child) -> Widget {
     let ListItemTml {
-      mut headline,
+      headline,
       supporting,
       leading,
       trailing,
@@ -295,7 +281,7 @@ impl ComposeChild for ListItem {
         leading_config,
         trailing_config,
         item_align,
-      } = ListItemStyle::of(ctx).clone();
+      } = ListItemStyle::of(ctx);
 
       let padding = padding_style.map(|padding| Padding { padding });
       let label_gap = label_gap.map(|padding| Padding { padding });
@@ -308,8 +294,9 @@ impl ComposeChild for ListItem {
             align_items: pipe!(item_align($this.line_number)),
             @{
               leading.map(|w| {
-                let (SinglePair { child,.. }, builtin) = w.unzip();
-                builtin.compose_with_host(child.compose_with_style(leading_config), ctx!())
+                let (leading, widget) = w.unzip();
+                let (_, builtin)  = leading.unzip();
+                builtin.compose_with_host(widget.compose_with_style(leading_config), ctx!())
               })
             }
             @Expanded {
@@ -318,7 +305,7 @@ impl ComposeChild for ListItem {
                 @Column {
                   @Text {
                     text: pipe!($headline.0.0.clone()),
-                    foreground: palette.on_surface().clone(),
+                    foreground: palette.on_surface(),
                     text_style: headline_style,
                   }
                   @{ supporting.map(|mut supporting|  {
@@ -333,7 +320,7 @@ impl ComposeChild for ListItem {
                       } ,
                       @Text {
                         text: pipe!($supporting.0.0.clone()),
-                        foreground:  palette.on_surface_variant().clone(),
+                        foreground:  palette.on_surface_variant(),
                         text_style: supporting_style,
                       }
                     }
@@ -341,12 +328,11 @@ impl ComposeChild for ListItem {
                 }
               }
             }
-            @{
-              trailing.map(|w| {
-                let (SinglePair { child,.. }, builtin) = w.unzip();
-                builtin.compose_with_host(child.compose_with_style(trailing_config), ctx!())
-              })
-            }
+            @{ trailing.map(|w| {
+              let (trailing, widget) = w.unzip();
+              let (_, builtin)  = trailing.unzip();
+              builtin.compose_with_host(widget.compose_with_style(trailing_config), ctx!())
+            })}
           }
         }
       }
diff --git a/widgets/src/scrollbar.rs b/widgets/src/scrollbar.rs
index a5f2bc76e..c544796f9 100644
--- a/widgets/src/scrollbar.rs
+++ b/widgets/src/scrollbar.rs
@@ -1,11 +1,9 @@
-use std::time::Duration;
-
 use crate::layout::{Container, Stack, StackFit};
 use ribir_core::prelude::*;
 
 /// A control widget that enables the user to access horizontal parts child that
 /// is larger than the box rect.
-#[derive(Declare, Clone)]
+#[derive(Declare, Declare2, Clone)]
 pub struct HScrollBar {
   /// Scrolled pixels of child content.
   #[declare(default)]
@@ -24,7 +22,7 @@ pub struct ScrollBarStyle {
 
 /// Compose style that use to decoration the thumb of horizontal scrollbar,
 /// overwrite it when init theme.
-#[derive(Debug, Declare)]
+#[derive(Debug, Declare, Declare2)]
 pub struct HScrollBarThumbDecorator {
   pub offset: f32,
 }
@@ -33,17 +31,13 @@ impl ComposeDecorator for HScrollBarThumbDecorator {
   type Host = Widget;
 
   fn compose_decorator(this: State<Self>, host: Self::Host) -> Widget {
-    widget! {
-      states { this: this.into_readonly() }
-      DynWidget { left_anchor: this.offset, dyns: host }
-    }
-    .into()
+    fn_widget! { @$host { left_anchor: pipe!($this.offset) } }.into()
   }
 }
 
 /// Compose style that use to decoration the thumb of vertical scrollbar,
 /// overwrite it when init theme.
-#[derive(Debug, Declare)]
+#[derive(Debug, Declare, Declare2)]
 pub struct VScrollBarThumbDecorator {
   pub offset: f32,
 }
@@ -52,47 +46,38 @@ impl ComposeDecorator for VScrollBarThumbDecorator {
   type Host = Widget;
 
   fn compose_decorator(this: State<Self>, host: Self::Host) -> Widget {
-    widget! {
-      states { this: this.into_readonly() }
-      DynWidget {
-        top_anchor: this.offset,
-        dyns: host
-      }
-    }
-    .into()
+    fn_widget! { @$host { top_anchor: pipe!($this.offset) } }.into()
   }
 }
 
 impl ComposeChild for HScrollBar {
   type Child = Widget;
   fn compose_child(this: State<Self>, child: Self::Child) -> Widget {
-    widget! {
-      states { this: this.into_writable() }
-      Stack {
+    fn_widget! {
+      let mut scrolling = @ScrollableWidget {
+        scrollable: Scrollable::X,
+        scroll_pos: Point::new($this.offset, 0.),
+      };
+      let scrollbar = @HRawScrollbar {
+        scrolling: scrolling.get_builtin_scrollable_widget(ctx!()).clone_reader(),
+        v_align: VAlign::Bottom,
+      };
+
+      // `scrolling` and `this` have same lifetime, so we needn't unsubscribe.
+      watch!($scrolling.scroll_pos.x)
+        .distinct_until_changed()
+        .subscribe(move |v| $this.write().offset = v);
+      watch!($this.offset)
+        .distinct_until_changed()
+        .subscribe(move |v| {
+          let y = $scrolling.scroll_pos.y;
+          $scrolling.write().jump_to(Point::new(v, y));
+        });
+
+      @Stack {
         fit: StackFit::Passthrough,
-        ScrollableWidget {
-          id: scrolling,
-          scrollable: Scrollable::X,
-          scroll_pos: Point::new(this.offset, 0.),
-          DynWidget { dyns: child }
-        }
-        HRawScrollbar {
-          scrolling: scrolling.clone_stateful(),
-          v_align: VAlign::Bottom,
-        }
-      }
-      finally ctx => {
-        let_watch!(scrolling.scroll_pos.x)
-          .distinct_until_changed()
-          .debounce(Duration::ZERO, ctx.window().frame_scheduler())
-          .subscribe(move |v| this.offset = v);
-        let_watch!(this.offset)
-          .distinct_until_changed()
-          .debounce(Duration::ZERO, ctx.window().frame_scheduler())
-          .subscribe(move |v| {
-            let y = scrolling.scroll_pos.y;
-            scrolling.jump_to(Point::new(v, y));
-          });
+        @ $scrolling { @{ child } }
+        @ { scrollbar }
       }
     }
     .into()
@@ -111,33 +96,32 @@ pub struct VScrollBar {
 impl ComposeChild for VScrollBar {
   type Child = Widget;
   fn compose_child(this: State<Self>, child: Self::Child) -> Widget {
-    widget! {
-      states { this: this.into_writable() }
-      Stack {
+    fn_widget! {
+      let mut scrolling = @ScrollableWidget {
+        scrollable: Scrollable::Y,
+        scroll_pos: Point::new(0., $this.offset),
+      };
+
+      let scrollbar = @VRawScrollbar {
+        scrolling: scrolling.get_builtin_scrollable_widget(ctx!()).clone_reader(),
+        h_align: HAlign::Right
+      };
+
+      // `scrolling` and `this` have same lifetime, so we needn't unsubscribe.
+      watch!($scrolling.scroll_pos.y)
+        .distinct_until_changed()
+        .subscribe(move |v| $this.write().offset = v);
+      watch!($this.offset)
+        .distinct_until_changed()
+        .subscribe(move |v| {
+          let x = $scrolling.scroll_pos.x;
+          $scrolling.write().jump_to(Point::new(x, v));
+        });
+
+      @Stack {
         fit: StackFit::Passthrough,
-        ScrollableWidget {
-          id: scrolling,
-          scrollable: Scrollable::Y,
-          scroll_pos: Point::new(0., this.offset),
-          DynWidget { dyns: child }
-        }
-        VRawScrollbar {
-          scrolling: scrolling.clone_stateful(),
-          h_align: HAlign::Right
-        }
-      }
-      finally ctx => {
-        let_watch!(scrolling.scroll_pos.y)
-          .distinct_until_changed()
-          .debounce(Duration::ZERO, ctx.window().frame_scheduler())
-          .subscribe(move |v| this.offset = v);
-        let_watch!(this.offset)
-          .distinct_until_changed()
-          .debounce(Duration::ZERO, ctx.window().frame_scheduler())
-          .subscribe(move |v| {
-            let x = scrolling.scroll_pos.x;
-            scrolling.jump_to(Point::new(x, v));
-          });
+        @ $scrolling { @{ child } }
+        @ { scrollbar }
       }
     }
     .into()
@@ -145,7 +129,7 @@ impl ComposeChild for VScrollBar {
 }
 /// A control widget that enables the user to access horizontal parts child that
 /// is larger than the box rect.
-#[derive(Declare, Clone)]
+#[derive(Declare, Declare2, Clone)]
 pub struct BothScrollbar {
   /// Scrolled pixels of child content.
   #[declare(default)]
@@ -155,40 +139,34 @@ pub struct BothScrollbar {
 impl ComposeChild for BothScrollbar {
   type Child = Widget;
   fn compose_child(this: State<Self>, child: Self::Child) -> Widget {
-    widget! {
-      states { this: this.into_writable() }
-      Stack {
+    fn_widget! {
+      let mut scrolling = @ScrollableWidget {
+        scrollable: Scrollable::Both,
+        scroll_pos: $this.offset,
+      };
+      let mut h_bar = @HRawScrollbar {
+        scrolling: scrolling.get_builtin_scrollable_widget(ctx!()).clone_reader(),
+        v_align: VAlign::Bottom,
+      };
+      let mut v_bar = @VRawScrollbar {
+        scrolling: scrolling.get_builtin_scrollable_widget(ctx!()).clone_reader(),
+        h_align: HAlign::Right,
+        margin: EdgeInsets::only_bottom($h_bar.layout_height())
+      };
+
+      // `scrolling` and `this` have same lifetime, so we needn't unsubscribe.
+      watch!($scrolling.scroll_pos)
+        .distinct_until_changed()
+        .subscribe(move |v| $this.write().offset = v);
+      watch!($this.offset)
+        .distinct_until_changed()
+        .subscribe(move |v| $scrolling.write().jump_to(v) );
+
+      @Stack{
         fit: StackFit::Passthrough,
-        ScrollableWidget {
-          id: scrolling,
-          scrollable: Scrollable::Both,
-          scroll_pos: this.offset,
-          DynWidget { dyns: child }
-        }
-        HRawScrollbar {
-          id: h_bar,
-          scrolling: scrolling.clone_stateful(),
-          v_align: VAlign::Bottom,
-          margin: EdgeInsets::only_right(v_bar.layout_width())
-        }
-        VRawScrollbar {
-          id: v_bar,
-          scrolling: scrolling.clone_stateful(),
-          h_align: HAlign::Right,
-          margin: EdgeInsets::only_bottom(h_bar.layout_height())
-        }
-      }
-      finally ctx => {
-        let_watch!(scrolling.scroll_pos)
-          .distinct_until_changed()
-          .debounce(Duration::ZERO, ctx.window().frame_scheduler())
-          .subscribe(move |v| this.offset = v);
-        let_watch!(this.offset)
-          .distinct_until_changed()
-          .debounce(Duration::ZERO, ctx.window().frame_scheduler())
-          .subscribe(move |v| {
-            scrolling.jump_to(v);
-          });
+        @ $scrolling { @{ child } }
+        @ $h_bar{ margin: EdgeInsets::only_right($v_bar.layout_width()) }
+        @ { v_bar }
       }
     }
     .into()
@@ -197,51 +175,61 @@ impl ComposeChild for BothScrollbar {
 
 /// A widget that display the horizontal scrolling information of the
 /// `scrolling` widget.
-#[derive(Declare)]
+#[derive(Declare, Declare2)]
 pub struct HRawScrollbar {
-  scrolling: Stateful<ScrollableWidget>,
+  scrolling: Reader<ScrollableWidget>,
 }
 
 impl Compose for HRawScrollbar {
   fn compose(this: State<Self>) -> Widget {
-    let this = this.into_writable();
-    let scrolling = this.state_ref().scrolling.clone();
-
-    widget! {
-      states { scrolling, this }
-      init ctx => {
+    fn_widget! {
+      @ {
+        let mut scrolling = $this.scrolling.clone_reader();
         let ScrollBarStyle {
           thickness,
           thumb_min_size,
           track_brush,
-        } = ScrollBarStyle::of(ctx).clone();
-      }
+        } = ScrollBarStyle::of(ctx);
 
-      Stack {
-        visible: scrolling.can_scroll(),
-        Container {
-          id: track_box,
-          size: Size::new(f32::MAX, thumb_outline.layout_height()),
-          background: track_brush.clone()
-        }
-        LayoutBox {
-          id: thumb_outline,
-          HScrollBarThumbDecorator{
-            offset: {
-              let content_width = scrolling.scroll_content_size().width;
-              -scrolling.scroll_pos.x * safe_recip(content_width) * track_box.layout_width()
-            },
-            Container {
-              size: {
-                let page_width = scrolling.scroll_view_size().width;
-                let content_width = scrolling.scroll_content_size().width;
-                let width = page_width / content_width * track_box.layout_width();
-                Size::new(width.max(thumb_min_size), thickness)
-              },
-            }
-         }
+        let mut track_box = @Container {
+          size: Size::new(f32::MAX, 0.),
+          background: track_brush
+        };
+
+        let thumb_outline = @HScrollBarThumbDecorator {
+          offset: pipe!{
+            let scrolling = $scrolling;
+            let content_width = scrolling.scroll_content_size().width;
+            -scrolling.scroll_pos.x * safe_recip(content_width) * $track_box.layout_width()
+          }
+        };
+
+        let mut container = @Container {
+          size: {
+            let scrolling = $scrolling;
+            let page_width = scrolling.scroll_view_size().width;
+            let content_width = scrolling.scroll_content_size().width;
+            let width = page_width / content_width * $track_box.layout_width();
+            Size::new(width.max(thumb_min_size), thickness)
+          },
+        };
+
+        watch!($container.layout_height())
+          .distinct_until_changed()
+          .subscribe(move |v| $track_box.write().size.height = v);
+
+        @Stack {
+          visible: pipe! {
+            let scrolling = $scrolling;
+            scrolling.can_scroll()
+          },
+          @ { track_box }
+          @$thumb_outline {
+            @ { container }
+          }
         }
       }
+
     }
     .into()
   }
@@ -249,48 +237,54 @@ impl Compose for HRawScrollbar {
 
 /// A widget that display the vertical scrolling information of the
 /// `scrolling` widget.
-#[derive(Declare)]
+#[derive(Declare, Declare2)]
 pub struct VRawScrollbar {
-  scrolling: Stateful<ScrollableWidget>,
+  scrolling: Reader<ScrollableWidget>,
 }
 
 impl Compose for VRawScrollbar {
   fn compose(this: State<Self>) -> Widget {
-    let this = this.into_writable();
-    let scrolling = this.state_ref().scrolling.clone();
-
-    widget! {
-      states { scrolling, this }
-      init ctx => {
+    fn_widget! {
+      @ {
+        let mut scrolling = $this.scrolling.clone_reader();
         let ScrollBarStyle {
           thickness,
           thumb_min_size,
           ref track_brush
         } = ScrollBarStyle::of(ctx);
-      }
 
-      Stack {
-        visible: scrolling.can_scroll(),
-        Container {
-          id: track_box,
-          size: Size::new(thumb_outline.layout_width() , f32::MAX),
-          background: track_brush.clone(),
-        }
-        LayoutBox {
-          id: thumb_outline,
-          VScrollBarThumbDecorator {
-            offset: {
-              let content_height = scrolling.scroll_content_size().height;
-              -scrolling.scroll_pos.y * safe_recip(content_height) * track_box.layout_height()
-            },
-            Container {
-              size: {
-                let page_height = scrolling.scroll_view_size().height;
-                let content_height = scrolling.scroll_content_size().height;
-                let height = page_height / content_height * track_box.layout_height();
-                Size::new(thickness, height.max(thumb_min_size))
-              },
-            }
+        let mut track_box = @Container {
+          size: Size::new(0., f32::MAX),
+          background: track_brush.clone()
+        };
+
+        let thumb_outline = @VScrollBarThumbDecorator {
+          offset: pipe! {
+            let scrolling = $scrolling;
+            let content_height = scrolling.scroll_content_size().height;
+            -scrolling.scroll_pos.y * safe_recip(content_height) * $track_box.layout_height()
+          }
+        };
+
+        let mut container = @Container {
+          size: pipe! {
+            let scrolling = $scrolling;
+            let page_height = scrolling.scroll_view_size().height;
+            let content_height = scrolling.scroll_content_size().height;
+            let height = page_height / content_height * $track_box.layout_height();
+            Size::new(thickness, height.max(thumb_min_size))
+          },
+        };
+
+        watch!($container.layout_width())
+          .distinct_until_changed()
+          .subscribe(move |v| $track_box.write().size.width = v);
+
+        @Stack {
+          visible: pipe! { $scrolling.can_scroll() },
+          @ { track_box }
+          @$thumb_outline {
+            @ { container }
           }
         }
       }
@@ -316,10 +310,9 @@ impl CustomStyle for ScrollBarStyle {
 
 #[cfg(test)]
 mod test {
-  use crate::layout::{Column, ConstrainedBox};
-
   use super::*;
-  use ribir_core::test_helper::*;
+  use crate::layout::{Column, ConstrainedBox};
+  use ribir_core::{reset_test_env, test_helper::*};
   use ribir_dev_helper::*;
 
   fn content_expand_so_all_view_can_scroll() -> Widget {
@@ -352,57 +345,51 @@ mod test {
 
   #[test]
   fn scrollable() {
-    let _guard = unsafe { AppCtx::new_lock_scope() };
+    reset_test_env!();
 
     let offset = Stateful::new(Point::zero());
     let v_offset = Stateful::new(0.);
     let h_offset = Stateful::new(0.);
-    let w = widget! {
-      states { offset: offset.clone(), v_offset: v_offset.clone(), h_offset: h_offset.clone() }
-      Column {
-        Container {
+    let c_offset = offset.clone_writer();
+    let c_v_offset = v_offset.clone_reader();
+    let c_h_offset = h_offset.clone_reader();
+    let w = fn_widget! {
+      let mut both_bar = @BothScrollbar { offset: pipe!(*$offset) };
+      let mut h_bar = @HScrollBar { offset: pipe!($both_bar.offset.x) };
+      let mut v_bar = @VScrollBar { offset: pipe!($both_bar.offset.y) };
+
+      watch!($v_bar.offset)
+        .subscribe(move|v| *$v_offset.write() = v);
+      watch!($h_bar.offset)
+        .subscribe(move|v| *$h_offset.write() = v);
+
+      let container_size = Size::new(100., 100.);
+      @Column {
+        @Container {
           size: Size::new(30., 30.),
-          BothScrollbar {
-            id: both_bar,
-            offset: *offset,
-            Container { size: Size::new(100., 100.) }
-          }
+          @$both_bar { @Container { size: container_size } }
         }
-        Container {
+        @Container {
           size: Size::new(30., 30.),
-          HScrollBar {
-            id: h_bar,
-            offset: both_bar.offset.x,
-            Container { size: Size::new(100., 100.) }
-          }
+          @$h_bar { @Container { size: container_size } }
         }
-        Container {
+        @Container {
           size: Size::new(30., 30.),
-          VScrollBar {
-            id: v_bar,
-            offset: both_bar.offset.y,
-            Container { size: Size::new(100., 100.) }
-          }
+          @$v_bar { @Container { size: container_size } }
         }
       }
-
-      finally {
-        let_watch!(v_bar.offset)
-          .subscribe(move|v| *v_offset = v);
-        let_watch!(h_bar.offset)
-          .subscribe(move|v| *h_offset = v);
-      }
     };
 
     let mut wnd = TestWindow::new_with_size(w, Size::new(1024., 1024.));
+    wnd.draw_frame();
     {
-      *offset.state_ref() = Point::new(-10., -10.);
+      *c_offset.write() = Point::new(-10., -10.);
     }
     {
-      *offset.state_ref() = Point::new(-20., -20.);
+      *c_offset.write() = Point::new(-20., -20.);
     }
     wnd.draw_frame();
-    assert_eq!(*v_offset.state_ref(), offset.state_ref().y);
-    assert_eq!(*h_offset.state_ref(), offset.state_ref().x);
+    assert_eq!(*c_v_offset.read(), c_offset.read().y);
+    assert_eq!(*c_h_offset.read(), c_offset.read().x);
   }
 }
diff --git a/widgets/src/tabs.rs b/widgets/src/tabs.rs
index 0a6260bc8..930c1d7e1 100644
--- a/widgets/src/tabs.rs
+++ b/widgets/src/tabs.rs
@@ -8,49 +8,49 @@ use ribir_core::prelude::*;
 /// # use ribir_core::prelude::*;
 /// # use ribir_widgets::prelude::*;
 ///
-/// let tabs = widget! {
-///   Tabs {
-///     Tab {
-///       TabItem {
-///         svgs::HOME
-///         Label::new("Home")
+/// let tabs = fn_widget! {
+///   @Tabs {
+///     @Tab {
+///       @TabItem {
+///         @ { svgs::HOME }
+///         @ { Label::new("Home") }
 ///       }
-///       TabPane {
-///         Text { text: "content" }
+///       @TabPane {
+///         @{ Text { text: "content" } }
 ///       }
 ///     }
-///     Tab {
-///       TabItem {
-///         svgs::HOME
-///         Label::new("Home")
+///     @Tab {
+///       @TabItem {
+///         @ { svgs::HOME }
+///         @ { Label::new("Home") }
 ///       }
-///       TabPane {
-///         Text { text: "content" }
+///       @TabPane {
+///         @Text { text: "content" }
 ///       }
 ///     }
 ///   }
 /// };
 ///
 /// // bottom tabs
-/// let bottom_tabs = widget! {
-///   Tabs {
+/// let bottom_tabs = fn_widget! {
+///   @Tabs {
 ///     pos: Position::Bottom,
-///     Tab {
-///       TabItem {
-///         svgs::HOME
-///         Label::new("Home")
+///     @Tab {
+///       @TabItem {
+///         @ { svgs::HOME }
+///         @ { Label::new("Home") }
 ///       }
-///       TabPane {
-///         Text { text: "content" }
+///       @TabPane {
+///         @Text { text: "content" }
 ///       }
 ///     }
-///     Tab {
-///       TabItem {
-///         svgs::HOME
-///         Label::new("Home")
+///     @Tab {
+///       @TabItem {
+///         @ { svgs::HOME }
+///         @ { Label::new("Home") }
 ///       }
-///       TabPane {
-///         Text { text: "content" }
+///       @TabPane {
+///         @Text { text: "content" }
 ///       }
 ///     }
 ///   }
@@ -99,7 +99,7 @@ impl CustomStyle for TabsStyle {
     }
   }
 }
-#[derive(Declare)]
+#[derive(Declare, Declare2)]
 pub struct TabsDecorator {}
 
 impl ComposeDecorator for TabsDecorator {
@@ -110,20 +110,20 @@ impl ComposeDecorator for TabsDecorator {
 
 #[derive(Template)]
 pub struct Tab {
-  header: TabItem,
-  pane: Option<WidgetOf<TabPane>>,
+  label: TabItem,
+  child: Option<WidgetOf<TabPane>>,
 }
 
 #[derive(Template)]
 pub struct TabItem {
   icon: Option<NamedSvg>,
-  label: Option<State<Label>>,
+  text: Option<State<Label>>,
 }
 
 #[derive(Declare, Declare2, SingleChild)]
 pub struct TabPane;
 
-#[derive(Declare)]
+#[derive(Declare, Declare2)]
 pub struct TabDecorator {}
 
 impl ComposeDecorator for TabDecorator {
@@ -132,7 +132,7 @@ impl ComposeDecorator for TabDecorator {
   fn compose_decorator(_: State<Self>, host: Self::Host) -> Widget { host }
 }
 
-#[derive(Declare)]
+#[derive(Declare, Declare2)]
 pub struct IndicatorDecorator {
   pub pos: Position,
   pub rect: Rect,
@@ -143,22 +143,26 @@ impl ComposeDecorator for IndicatorDecorator {
   type Host = Widget;
 
   fn compose_decorator(this: State<Self>, host: Self::Host) -> Widget {
-    widget! {
-      states { this: this.into_readonly() }
-      DynWidget {
-        left_anchor: match this.pos {
-          Position::Top | Position::Bottom => this.rect.origin.x
-            + (this.rect.size.width - 60.) / 2.,
-          Position::Left => this.rect.size.width - this.extent,
-          Position::Right => 0.,
-        },
-        top_anchor: match this.pos {
-          Position::Left | Position::Right => this.rect.origin.y
-            + (this.rect.size.height - 60.) / 2.,
-          Position::Top => this.rect.size.height - this.extent,
-          Position::Bottom => 0.,
+    fn_widget! {
+      @ $host{
+        left_anchor: pipe!{
+          let this = $this;
+          match this.pos {
+            Position::Top | Position::Bottom => this.rect.origin.x
+              + (this.rect.size.width - 60.) / 2.,
+            Position::Left => this.rect.size.width - this.extent,
+            Position::Right => 0.,
+          }
         },
-        dyns: host,
+        top_anchor: pipe! {
+          let this = $this;
+          match this.pos {
+            Position::Left | Position::Right => this.rect.origin.y
+              + (this.rect.size.height - 60.) / 2.,
+            Position::Top => this.rect.size.height - this.extent,
+            Position::Bottom => 0.,
+          }
+        }
       }
     }
     .into()
@@ -169,8 +173,8 @@ impl Tabs {
   fn tab_header(
     headers: Vec<(Option<NamedSvg>, Option<State<Label>>)>,
     tabs_style: TabsStyle,
-    tabs: Stateful<Tabs>,
-    indicator: Stateful<IndicatorDecorator>,
+    tabs: impl StateWriter<Value = Tabs> + 'static,
+    indicator: impl StateWriter<Value = IndicatorDecorator> + 'static,
   ) -> impl Iterator<Item = Widget> {
     let TabsStyle {
       icon_size: size,
@@ -184,63 +188,50 @@ impl Tabs {
       .into_iter()
       .enumerate()
       .map(move |(idx, (icon, label))| {
-        let icon_widget = icon.map(|icon| {
-          widget! {
-            Icon {
-              size,
-              widget::from(icon)
-            }
-          }
-        });
-
+        let tabs = tabs.clone_writer();
         let active_color = active_color.clone();
         let foreground = foreground.clone();
         let label_style = label_style.clone();
-        let label_widget = label.map(|label| {
-          widget! {
-            states {
-              tabs: tabs.clone(),
-              text: label.into_readonly(),
-            }
-            Text {
-              text: text.0.clone(),
-              foreground: match tabs.cur_idx == idx {
+        let indicator = indicator.clone_writer();
+        fn_widget! {
+          let icon_widget = icon.map(|icon| @Icon { size, @ { icon }});
+          let label_widget = label.map(|label| {
+            @Text {
+              text: pipe!($label.0.clone()),
+              foreground: pipe!(match $tabs.cur_idx == idx {
                 true => active_color.clone(),
                 false => foreground.clone(),
-              },
+              }),
               text_style: label_style,
             }
-          }
-        });
-        let indicator = indicator.clone();
-        widget! {
-          states { tabs: tabs.clone() }
-          TabDecorator {
-            Expanded {
-              id: tab_header,
-              flex: 1.,
-              on_tap: move |_| if tabs.cur_idx != idx {
-                tabs.cur_idx = idx;
+          });
+          @ {
+            let mut tab_header = @Expanded {
+              on_tap: move |_| if $tabs.cur_idx != idx {
+                $tabs.write().cur_idx = idx;
               },
-              Flex {
-                align_items: Align::Center,
-                justify_content: JustifyContent::Center,
-                direction: match icon_pos {
-                  Position::Left | Position::Right => Direction::Horizontal,
-                  Position::Top | Position::Bottom => Direction::Vertical,
-                },
-                reverse: matches!(icon_pos, Position::Right | Position::Bottom),
-                widget::from(icon_widget)
-                // todo: insert `Spacer`
-                widget::from(label_widget)
+            };
+
+            watch!(($tabs.cur_idx == idx, $tab_header.layout_rect()))
+              .filter_map(|(active, rect)| active.then_some(rect))
+              .subscribe(move |v| $indicator.write().rect = v);
+
+            @TabDecorator {
+              @$tab_header {
+                @Flex {
+                  align_items: Align::Center,
+                  justify_content: JustifyContent::Center,
+                  direction: match icon_pos {
+                    Position::Left | Position::Right => Direction::Horizontal,
+                    Position::Top | Position::Bottom => Direction::Vertical,
+                  },
+                  reverse: matches!(icon_pos, Position::Right | Position::Bottom),
+                  @ { icon_widget }
+                  @ { label_widget }
+                }
               }
             }
           }
-          finally {
-            let_watch!((tabs.cur_idx == idx, tab_header.layout_rect()))
-              .filter_map(|(active, rect)| active.then_some(rect))
-              .subscribe(move |v| indicator.silent_ref().rect = v);
-          }
         }
         .into()
       })
@@ -255,17 +246,15 @@ impl ComposeChild for Tabs {
     let mut panes = vec![];
 
     for tab in child.into_iter() {
-      let Tab { header, pane } = tab;
-      headers.push((header.icon, header.label));
+      let Tab { label: header, child: pane } = tab;
+      headers.push((header.icon, header.text));
       if let Some(pane) = pane {
-        panes.push(pane.child)
+        panes.push(pane.child())
       }
     }
 
-    widget! {
-      states { this: this.into_writable() }
-      init ctx => {
-        let tabs_style = TabsStyle::of(ctx);
+    fn_widget! {
+      let tabs_style = TabsStyle::of(ctx!());
         let TabsStyle {
           extent_only_icon,
           extent_only_label,
@@ -274,7 +263,6 @@ impl ComposeChild for Tabs {
           indicator,
           ..
         } = tabs_style.clone();
-        let tabs_style = tabs_style.clone();
         let has_icon = headers.iter().any(|item| item.0.is_some());
         let has_label = headers.iter().any(|item| item.1.is_some());
         let extent = match (has_icon, has_label) {
@@ -285,84 +273,83 @@ impl ComposeChild for Tabs {
         };
         let mut panes = panes.into_iter()
           .enumerate()
-          .map(move |(idx, pane)| {
-            widget! {
-              Expanded {
-                flex: 1.,
-                DynWidget {
-                  visible: this.cur_idx == idx,
-                  dyns: pane,
-                }
-              }
-            }
+          .map(move |(idx, pane)| @Expanded {
+            flex: 1.,
+            @ $pane { visible: pipe!($this.cur_idx == idx) }
           });
-        let mut header = widget! {
-          Stack {
-            ConstrainedBox {
-              clamp: match this.pos {
-                Position::Top | Position::Bottom => BoxClamp::fixed_height(extent),
-                Position::Left | Position::Right => BoxClamp::fixed_width(extent),
-              },
-              Flex {
-                id: flex,
-                direction: match this.pos {
-                  Position::Top | Position::Bottom => Direction::Horizontal,
-                  Position::Left | Position::Right => Direction::Vertical,
-                },
+        let mut flex = @Flex {
+          direction: pipe!(match $this.pos {
+            Position::Top | Position::Bottom => Direction::Horizontal,
+            Position::Left | Position::Right => Direction::Vertical,
+          })
+        };
+        let divider = @Divider {
+          direction: pipe!(match $this.pos {
+            Position::Top | Position::Bottom => Direction::Horizontal,
+            Position::Left | Position::Right => Direction::Vertical,
+          }),
+          left_anchor: pipe!(match $this.pos {
+            Position::Left => $flex.layout_size().width - 1.,
+            Position::Top | Position::Right | Position::Bottom => 0.,
+          }),
+          top_anchor: pipe!(match $this.pos {
+            Position::Top => $flex.layout_size().height - 1.,
+            Position::Bottom | Position::Right | Position::Left => 0.,
+          }),
+        };
+        let mut indicator_decorator = @IndicatorDecorator {
+          pos: pipe!($this.pos),
+          extent: indicator.extent,
+          rect: Rect::zero()
+        };
+        let mut header = @Stack {
+          @ConstrainedBox {
+            clamp: pipe!(match $this.pos {
+              Position::Top | Position::Bottom => BoxClamp::fixed_height(extent),
+              Position::Left | Position::Right => BoxClamp::fixed_width(extent),
+            }),
+            @ $flex {
+              @ {
                 Multi::new(
                   Tabs::tab_header(
-                    headers, tabs_style.clone(),
-                    no_watch!(this.clone_stateful()),
-                    no_watch!(indicator_decorator.clone_stateful()),
+                    headers, tabs_style,
+                    this.clone_writer(),
+                    indicator_decorator.clone_writer()
                   )
                 )
               }
             }
-            Divider {
-              direction: match this.pos {
-                Position::Top | Position::Bottom => Direction::Horizontal,
-                Position::Left | Position::Right => Direction::Vertical,
-              },
-              left_anchor: match this.pos {
-                Position::Left => flex.layout_size().width - 1.,
-                Position::Top | Position::Right | Position::Bottom => 0.,
-              },
-              top_anchor: match this.pos {
-                Position::Top => flex.layout_size().height - 1.,
-                Position::Bottom | Position::Right | Position::Left => 0.,
-              },
-            }
-            IndicatorDecorator {
-              id: indicator_decorator,
-              pos: this.pos,
-              extent: indicator.extent,
-              rect: Rect::zero(),
-              Container {
-                background: active_color.clone(),
-                size: match this.pos {
-                  Position::Top | Position::Bottom => indicator.measure.map_or(
-                    Size::new(indicator_decorator.rect.width(), indicator.extent),
-                    |measure| Size::new(measure, indicator.extent)
-                  ),
-                  Position::Left | Position::Right => indicator.measure.map_or(
-                    Size::new(indicator.extent, indicator_decorator.rect.height()),
-                    |measure| Size::new(indicator.extent, measure)
-                  ),
-                }
-              }
+          }
+          @ { divider }
+          @ $indicator_decorator {
+            @ Container {
+              background: active_color,
+              size: pipe!(match $this.pos {
+                Position::Top | Position::Bottom => indicator.measure.map_or(
+                  Size::new($indicator_decorator.rect.width(), indicator.extent),
+                  |measure| Size::new(measure, indicator.extent)
+                ),
+                Position::Left | Position::Right => indicator.measure.map_or(
+                  Size::new(indicator.extent, $indicator_decorator.rect.height()),
+                  |measure| Size::new(indicator.extent, measure)
+                ),
+              })
             }
           }
         };
-      }
-      TabsDecorator {
-        Flex {
-          direction: match this.pos {
+
+      @TabsDecorator {
+        @Flex {
+          direction: pipe!(match  $this.pos {
             Position::Left | Position::Right => Direction::Horizontal,
             Position::Top | Position::Bottom => Direction::Vertical,
+          }),
+          reverse: pipe!{
+            let pos = $this.pos;
+            matches!(pos, Position::Right | Position::Bottom)
           },
-          reverse: matches!(this.silent_ref().pos, Position::Right | Position::Bottom),
-          widget::from(header)
-          Multi::new(panes)
+          @ { header }
+          @ { Multi::new(panes) }
         }
       }
     }
diff --git a/widgets/src/text.rs b/widgets/src/text.rs
index 569cd4596..38c7dfdad 100644
--- a/widgets/src/text.rs
+++ b/widgets/src/text.rs
@@ -24,7 +24,7 @@ pub struct Text {
 }
 
 impl Text {
-  pub fn text_layout(&self, t_store: &TypographyStore, bound: Size) -> VisualGlyphs {
+  pub fn text_layout(&self, bound: Size) -> VisualGlyphs {
     let TextStyle {
       font_size,
       letter_space,
@@ -35,8 +35,7 @@ impl Text {
 
     let width: Em = Pixel(bound.width.into()).into();
     let height: Em = Pixel(bound.height.into()).into();
-
-    t_store.typography(
+    AppCtx::typography_store().typography(
       self.text.substr(..),
       font_size,
       font_face,
@@ -54,11 +53,7 @@ impl Text {
 
 impl Render for Text {
   fn perform_layout(&self, clamp: BoxClamp, _: &mut LayoutCtx) -> Size {
-    self
-      .text_layout(AppCtx::typography_store(), clamp.max)
-      .visual_rect()
-      .size
-      .cast_unit()
+    self.text_layout(clamp.max).visual_rect().size.cast_unit()
   }
 
   #[inline]
@@ -147,16 +142,12 @@ macro_rules! define_text_with_theme_style {
 
     impl Compose for $name {
       fn compose(this: State<Self>) -> Widget {
-        widget! {
-          init ctx => {
-            let text_style = TypographyTheme::of(ctx).$style.text.clone();
-          }
-          states { this: this.into_readonly() }
-          Text {
-            text: this.text.clone(),
-            foreground: this.foreground.clone(),
-            text_style,
-            overflow: this.overflow,
+        fn_widget! {
+          @Text {
+            text: pipe!($this.text.clone()),
+            foreground: pipe!($this.foreground.clone()),
+            text_style: TypographyTheme::of(ctx).$style.text.clone(),
+            overflow: pipe!($this.overflow),
           }
         }
         .into()
diff --git a/widgets/src/text_field.rs b/widgets/src/text_field.rs
index 29b802ef3..04df03a2c 100644
--- a/widgets/src/text_field.rs
+++ b/widgets/src/text_field.rs
@@ -102,11 +102,11 @@ type TextFieldThemeProxy = ThemeSuitProxy<TextFieldState, TextFieldTheme>;
 
 impl ComposeChild for TextFieldThemeProxy {
   type Child = Widget;
-  fn compose_child(mut this: State<Self>, child: Self::Child) -> Widget {
+  fn compose_child(this: State<Self>, child: Self::Child) -> Widget {
     fn_widget! {
       @ $child {
         on_tap: move |_| {
-          let mut this = $this;
+          let mut this = $this.write();
           match this.state {
             TextFieldState::Enabled => this.state = TextFieldState::Focused,
             TextFieldState::Hovered => this.state = TextFieldState::Focused,
@@ -114,15 +114,15 @@ impl ComposeChild for TextFieldThemeProxy {
           };
         },
         on_pointer_move: move |_| {
-          let mut this = $this;
+          let mut this = $this.write();
           if this.state == TextFieldState::Enabled { this.state = TextFieldState::Hovered }
         },
         on_pointer_leave: move |_| {
-          let mut this = $this;
+          let mut this = $this.write();
           if this.state == TextFieldState::Hovered { this.state = TextFieldState::Enabled }
         },
         on_focus_out: move |_| {
-          let mut this = $this;
+          let mut this = $this.write();
           if this.state == TextFieldState::Focused { this.state = TextFieldState::Enabled }
         },
       }
@@ -281,7 +281,7 @@ macro_rules! take_option_field {
 
 impl ComposeChild for TextField {
   type Child = Option<TextFieldTml>;
-  fn compose_child(mut this: State<Self>, config: Self::Child) -> Widget {
+  fn compose_child(this: State<Self>, config: Self::Child) -> Widget {
     fn_widget! {
       let mut config = config.unwrap_or_default();
       take_option_field!({leading_icon, trailing_icon}, config);
@@ -290,7 +290,9 @@ impl ComposeChild for TextField {
       let mut theme = @TextFieldThemeProxy {
         suit: theme_suit,
         state: TextFieldState::default(),
-      };
+      }.into_inner();
+      let indicator_size = pipe!(Size::new(f32::MAX, $theme.indicator_height));
+      let indicator_bg =  pipe!($theme.indicator);
       @Stack {
         @Container {
           size: pipe!(Size::new(0., $theme.container_height)),
@@ -302,24 +304,24 @@ impl ComposeChild for TextField {
           @{
             leading_icon.map(|t| @Icon {
               size: IconSize::of(ctx!()).small,
-              @{ t.child }
+              @{ t.child() }
             })
           }
           @Expanded {
             flex: 1.,
-            @{ build_content_area(this.clone_state(), theme.clone_state(), config) }
+            @{ build_content_area(this, theme, config) }
           }
           @{
             trailing_icon.map(|t| @Icon {
               size: IconSize::of(ctx!()).small,
-              @{ t.child }
+              @{ t.child() }
             })
           }
         }
         @Container {
           v_align: VAlign::Bottom,
-          size: pipe!(Size::new(f32::MAX, $theme.indicator_height)),
-          background: pipe!($theme.indicator),
+          size: indicator_size,
+          background: indicator_bg,
         }
       }
     }
@@ -328,8 +330,8 @@ impl ComposeChild for TextField {
 }
 
 fn build_input_area(
-  mut this: Stateful<TextField>,
-  mut theme: Stateful<TextFieldThemeProxy>,
+  this: State<TextField>,
+  theme: State<TextFieldThemeProxy>,
   prefix: Option<LeadingText>,
   suffix: Option<TrailingText>,
   placeholder: Option<Placeholder>,
@@ -339,11 +341,11 @@ fn build_input_area(
       visible: pipe!(!$this.text.is_empty() || $theme.state == TextFieldState::Focused),
     };
 
-    let mut visible = route_state!($input_area.visible);
+    let mut visible = map_writer!($input_area.visible);
     visible.transition(transitions::LINEAR.of(ctx!()), ctx!());
 
     let mut input = @Input{ style: pipe!($theme.text.clone()) };
-    $input.set_text($this.text.clone());
+    $input.write().set_text($this.text.clone());
 
     watch!($input.text())
       .distinct_until_changed()
@@ -351,20 +353,18 @@ fn build_input_area(
 
     watch!($this.text.clone())
       .distinct_until_changed()
-      .subscribe(move |val| $input.set_text(val));
+      .subscribe(move |val| $input.write().set_text(val));
 
     let h = watch!($theme.state)
       .distinct_until_changed()
       .filter(|state| state == &TextFieldState::Focused)
-      .subscribe(move |_| $input.request_focus())
-      .unsubscribe_when_dropped();
-    input.own_data(h);
-
+      .subscribe(move |_| $input.request_focus());
+    input.as_stateful().unsubscribe_on_drop(h);
 
     @Row {
       @{
         prefix.map(|p| @Text{
-          text: p.child,
+          text: p.child(),
           foreground: pipe!($theme.foreground.clone()),
           text_style: pipe!($theme.text.clone()),
         })
@@ -375,7 +375,7 @@ fn build_input_area(
       }
       @{
         suffix.map(|s| @Text{
-          text: s.child,
+          text: s.child(),
           foreground: pipe!($theme.foreground.clone()),
           text_style: pipe!($theme.text.clone()),
         })
@@ -392,7 +392,7 @@ struct TextFieldLabel {
 }
 
 impl Compose for TextFieldLabel {
-  fn compose(mut this: State<Self>) -> Widget {
+  fn compose(this: State<Self>) -> Widget {
     fn_widget! {
       let label = @Text {
         v_align: VAlign::Top,
@@ -400,8 +400,8 @@ impl Compose for TextFieldLabel {
         text_style: pipe!($this.style.clone()),
       };
 
-      let mut font_size = route_state!($this.style.font_size);
-      font_size.transition(transitions::LINEAR.of(ctx!()), ctx!());
+      map_writer!($this.style.font_size)
+        .transition(transitions::LINEAR.of(ctx!()), ctx!());
 
       label
     }
@@ -410,8 +410,8 @@ impl Compose for TextFieldLabel {
 }
 
 fn build_content_area(
-  mut this: Stateful<TextField>,
-  mut theme: Stateful<TextFieldThemeProxy>,
+  this: State<TextField>,
+  theme: State<TextFieldThemeProxy>,
   mut config: TextFieldTml,
 ) -> Widget {
   fn_widget! {
@@ -420,8 +420,8 @@ fn build_content_area(
       padding: pipe!($theme.input_padding($this.text.is_empty())),
     };
 
-    let mut padding = route_state!($content_area.padding);
-    padding.transition(transitions::LINEAR.of(ctx!()), ctx!());
+    map_writer!($content_area.padding)
+      .transition(transitions::LINEAR.of(ctx!()), ctx!());
 
     @ $content_area {
       @ {
@@ -433,7 +433,7 @@ fn build_content_area(
           }
         })
       }
-      @ { build_input_area(this.clone(), theme.clone(), prefix, suffix, placeholder)}
+      @ { build_input_area(this, theme, prefix, suffix, placeholder)}
     }
   }
   .into()

From 5dde1bbfb90ed0775e526f4ee24affd069580d4b Mon Sep 17 00:00:00 2001
From: Adoo <Adoo@outlook.com>
Date: Mon, 11 Sep 2023 12:26:10 +0800
Subject: [PATCH 08/10] =?UTF-8?q?refactor(core):=20=F0=9F=92=A1=20remove?=
 =?UTF-8?q?=20RenderNodeFlag?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 core/src/context/build_context.rs |  9 +--------
 core/src/widget_tree/widget_id.rs | 28 ++--------------------------
 2 files changed, 3 insertions(+), 34 deletions(-)

diff --git a/core/src/context/build_context.rs b/core/src/context/build_context.rs
index 6af648750..11f9eb8ef 100644
--- a/core/src/context/build_context.rs
+++ b/core/src/context/build_context.rs
@@ -1,6 +1,6 @@
 use crate::{
   prelude::*,
-  widget::{widget_id::new_node, TreeArena, WidgetTree},
+  widget::{widget_id::new_node, WidgetTree},
   window::{DelayEvent, WindowId},
 };
 use std::{
@@ -122,8 +122,6 @@ impl<'a> BuildCtx<'a> {
     tree
       .window()
       .add_delay_event(DelayEvent::Disposed { id, parent });
-    let (arena1, arena2) = unsafe { split_arena(&mut tree.arena) };
-    id.descendants(arena1).for_each(|id| id.mark_drop(arena2))
   }
 
   pub(crate) fn mark_dirty(&mut self, id: WidgetId) { self.tree.borrow_mut().mark_dirty(id); }
@@ -180,11 +178,6 @@ impl BuildCtxHandle {
   }
 }
 
-pub(crate) unsafe fn split_arena(tree: &mut TreeArena) -> (&mut TreeArena, &mut TreeArena) {
-  let ptr = tree as *mut TreeArena;
-  (&mut *ptr, &mut *ptr)
-}
-
 #[cfg(test)]
 mod tests {
   use super::*;
diff --git a/core/src/widget_tree/widget_id.rs b/core/src/widget_tree/widget_id.rs
index 7e60b1c67..2f94c91be 100644
--- a/core/src/widget_tree/widget_id.rs
+++ b/core/src/widget_tree/widget_id.rs
@@ -16,15 +16,7 @@ pub struct WidgetId(pub(crate) NodeId);
 
 pub(crate) type TreeArena = Arena<RenderNode>;
 
-bitflags! {
-  #[derive(Default, PartialEq, Eq, Clone, Copy, Hash, Debug)]
-  pub(crate) struct  RenderNodeFlag: u8 {
-    const NONE = 0;
-    const DROPPED = 0b0001;
-  }
-}
 pub(crate) struct RenderNode {
-  flags: RenderNodeFlag,
   data: Box<dyn Render>,
 }
 
@@ -47,21 +39,8 @@ impl WidgetId {
     tree.get_mut(self.0).map(|n| n.get_mut())
   }
 
-  /// Mark the widget dropped but not release the node, caller has the
-  /// responsibility to release it.
-  pub(crate) fn mark_drop(self, tree: &mut TreeArena) {
-    if let Some(node) = self.get_node_mut(tree) {
-      node.flags.insert(RenderNodeFlag::DROPPED);
-    }
-  }
-
   /// detect if the widget of this id point to is dropped.
-  pub(crate) fn is_dropped(self, tree: &TreeArena) -> bool {
-    self.0.is_removed(tree)
-      || self
-        .get_node(tree)
-        .map_or(true, |n| n.flags.contains(RenderNodeFlag::DROPPED))
-  }
+  pub(crate) fn is_dropped(self, tree: &TreeArena) -> bool { self.0.is_removed(tree) }
 
   #[allow(clippy::needless_collect)]
   pub(crate) fn lowest_common_ancestor(
@@ -234,10 +213,7 @@ impl WidgetId {
 }
 
 pub(crate) fn new_node(arena: &mut TreeArena, node: Box<dyn Render>) -> WidgetId {
-  WidgetId(arena.new_node(RenderNode {
-    flags: RenderNodeFlag::NONE,
-    data: node,
-  }))
+  WidgetId(arena.new_node(RenderNode { data: node }))
 }
 
 pub(crate) fn empty_node(arena: &mut TreeArena) -> WidgetId { new_node(arena, Box::new(Void)) }

From 36cfd9edd44fbf607706c097f7156580d0560b30 Mon Sep 17 00:00:00 2001
From: Adoo <Adoo@outlook.com>
Date: Mon, 11 Sep 2023 11:02:45 +0800
Subject: [PATCH 09/10] =?UTF-8?q?fix(core):=20=F0=9F=90=9B=20keep=20static?=
 =?UTF-8?q?=20data=20is=20attached=20to=20pipe=20widget?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 core/src/builtin_widgets/focus_node.rs |   5 +-
 core/src/builtin_widgets/key.rs        |   2 -
 core/src/data_widget.rs                |  19 +---
 core/src/pipe.rs                       | 121 ++++++++++++++++++++++---
 core/src/widget.rs                     |   4 +-
 core/src/widget_tree.rs                |  22 ++++-
 core/src/widget_tree/widget_id.rs      |  43 +++++----
 7 files changed, 158 insertions(+), 58 deletions(-)

diff --git a/core/src/builtin_widgets/focus_node.rs b/core/src/builtin_widgets/focus_node.rs
index ba96f0543..f636d1120 100644
--- a/core/src/builtin_widgets/focus_node.rs
+++ b/core/src/builtin_widgets/focus_node.rs
@@ -1,5 +1,4 @@
 use crate::{
-  data_widget::attach_to_id,
   events::focus_mgr::{FocusHandle, FocusType},
   impl_query_self_only,
   prelude::*,
@@ -53,7 +52,7 @@ impl ComposeChild for FocusNode {
         let subject = subject.unwrap_or_else(|| {
           let listener = LifecycleListener::default();
           let subject = listener.lifecycle_stream();
-          attach_to_id(id, &mut *ctx.tree.borrow_mut(), |child| {
+          id.wrap_node(&mut ctx.tree.borrow_mut().arena, |child| {
             Box::new(DataWidget::new(child, listener))
           });
           subject
@@ -73,7 +72,7 @@ impl ComposeChild for FocusNode {
           .subscribe(subscribe_fn(this.clone_reader()))
           .unsubscribe_when_dropped();
 
-        attach_to_id(id, &mut *ctx.tree.borrow_mut(), |child| {
+        id.wrap_node(&mut ctx.tree.borrow_mut().arena, |child| {
           let d = DataWidget::new(child, this);
           Box::new(DataWidget::new(
             Box::new(d),
diff --git a/core/src/builtin_widgets/key.rs b/core/src/builtin_widgets/key.rs
index 5813d5eb3..e275d2336 100644
--- a/core/src/builtin_widgets/key.rs
+++ b/core/src/builtin_widgets/key.rs
@@ -121,8 +121,6 @@ where
   fn record_before_value(&mut self, value: V) { self.before_value = Some(value); }
 }
 
-impl_query_self_only!(Key);
-
 macro from_key_impl($($ty: ty : $name: ident)*) {
   $(
     impl From<$ty> for Key {
diff --git a/core/src/data_widget.rs b/core/src/data_widget.rs
index e2449ce6a..523ed8625 100644
--- a/core/src/data_widget.rs
+++ b/core/src/data_widget.rs
@@ -2,9 +2,7 @@
 //! is same as origin widget.
 
 use crate::{
-  impl_proxy_query, impl_proxy_render, impl_query_self_only,
-  prelude::*,
-  widget::{FnWidget, WidgetTree},
+  impl_proxy_query, impl_proxy_render, impl_query_self_only, prelude::*, widget::FnWidget,
 };
 
 pub struct DataWidget<D> {
@@ -18,7 +16,7 @@ impl<D: Query + 'static> DataWidget<D> {
   pub fn attach(widget: Widget, data: D) -> Widget {
     FnWidget::new(move |ctx| {
       let id = widget.build(ctx);
-      attach_to_id(id, &mut *ctx.tree.borrow_mut(), |child| {
+      id.wrap_node(&mut ctx.tree.borrow_mut().arena, |child| {
         Box::new(Self::new(child, data))
       });
       id
@@ -37,19 +35,6 @@ impl<D: Query + 'static> DataWidget<D> {
   }
 }
 
-pub(crate) fn attach_to_id(
-  id: WidgetId,
-  tree: &mut WidgetTree,
-  attach_data: impl FnOnce(Box<dyn Render>) -> Box<dyn Render>,
-) {
-  let mut tmp: Box<dyn Render> = Box::new(Void);
-  let node = id.assert_get_mut(&mut tree.arena);
-  std::mem::swap(&mut tmp, &mut *node);
-
-  let mut attached = attach_data(tmp);
-  std::mem::swap(&mut *node, &mut attached);
-}
-
 impl_proxy_query!(paths [data, render], DataWidget<D>, <D>, where D: Query + 'static);
 impl_proxy_render!(proxy render, DataWidget<D>, <D>, where D: Query + 'static);
 
diff --git a/core/src/pipe.rs b/core/src/pipe.rs
index 641b66a3e..8f09d83b9 100644
--- a/core/src/pipe.rs
+++ b/core/src/pipe.rs
@@ -5,7 +5,7 @@ use rxrust::{
   subscription::Subscription,
 };
 use std::{
-  cell::{Cell, RefCell},
+  cell::{Cell, RefCell, UnsafeCell},
   convert::Infallible,
   ops::{Deref, Range},
 };
@@ -13,13 +13,10 @@ use std::{
 use crate::{
   builtin_widgets::{key::AnyKey, Void},
   context::{AppCtx, BuildCtx},
-  data_widget::attach_to_id,
-  prelude::{
-    AnonymousData, BoxedSingleParent, DataWidget, Multi, MultiChild, MultiParent, SingleChild,
-    SingleParent,
-  },
+  impl_proxy_render,
+  prelude::*,
   ticker::FrameMsg,
-  widget::{QueryOrder, Widget, WidgetBuilder, WidgetId, WidgetTree},
+  widget::{Query, QueryOrder, Render, Widget, WidgetBuilder, WidgetId, WidgetTree},
   window::WindowId,
 };
 
@@ -88,10 +85,18 @@ impl<V> Pipe<V> {
 }
 
 impl<W: Into<Widget> + 'static> WidgetBuilder for Pipe<W> {
-  fn build(self, ctx: &crate::context::BuildCtx) -> WidgetId {
+  fn build(self, ctx: &BuildCtx) -> WidgetId {
     let (v, modifies) = self.unzip();
     let id = v.into().build(ctx);
     let id_share = Sc::new(Cell::new(id));
+
+    let mut pipe_node = None;
+    id.wrap_node(&mut ctx.tree.borrow_mut().arena, |r| {
+      let p = PipeNode::new(r);
+      pipe_node = Some(p.clone());
+      Box::new(p)
+    });
+
     let id_share2 = id_share.clone();
     let handle = ctx.handle();
     let wnd_id = ctx.window().id();
@@ -119,6 +124,28 @@ impl<W: Into<Widget> + 'static> WidgetBuilder for Pipe<W> {
           if !ctx.window().is_in_another_regenerating(id) {
             let new_id = v.into().build(ctx);
 
+            // We use a `PipeNode` wrap the initial widget node, so if the widget node is
+            // not a `PipeNode` means the node is attached some data, we need to keep the
+            // data attached when it replaced by the new widget, because the data is the
+            // static stuff.
+            //
+            // Only pipe widget as a normal widget need to do this, because compose child
+            // widget not support pipe object as its child if it's not a normal widget. Only
+            // compose child widget has the ability to apply new logic on a widget that
+            // built.
+            if let Some(pn) = pipe_node.as_mut() {
+              let mut tree = ctx.tree.borrow_mut();
+              if !id.assert_get(&tree.arena).is::<PipeNode>() {
+                let [old_node, new_node] = tree.get_many_mut(&[id, new_id]);
+
+                std::mem::swap(pn.as_mut(), new_node.as_widget_mut());
+                std::mem::swap(old_node, new_node);
+              } else {
+                // we know widget node not attached data, we can not care about it now.
+                pipe_node.take();
+              }
+            }
+
             update_key_status_single(id, new_id, ctx);
 
             ctx.insert_after(id, new_id);
@@ -343,7 +370,7 @@ fn attach_unsubscribe_guard(id: WidgetId, wnd: WindowId, unsub: impl Subscriptio
       // auto unsubscribe when the widget is not a root and its parent is None.
       if let Some(p) = id.parent(&tree.arena) {
         let guard = AnonymousData::new(Box::new(guard));
-        attach_to_id(p, &mut *tree, |d| Box::new(DataWidget::new(d, guard)))
+        p.wrap_node(&mut tree.arena, |d| Box::new(DataWidget::new(d, guard)))
       }
     }
   })
@@ -461,6 +488,39 @@ fn update_key_states(
 impl<W: SingleChild> SingleChild for Pipe<W> {}
 impl<W: MultiChild> MultiChild for Pipe<W> {}
 
+/// `PipeNode` just use to wrap a `Box<dyn Render>`, and provide a choice to
+/// change the inner `Box<dyn Render>` by `UnsafeCell` at a safe time. It's
+/// transparent except the `Pipe` widget.
+#[derive(Clone)]
+struct PipeNode(Sc<UnsafeCell<Box<dyn Render>>>);
+
+impl PipeNode {
+  fn new(value: Box<dyn Render>) -> Self { Self(Sc::new(UnsafeCell::new(value))) }
+
+  fn as_ref(&self) -> &dyn Render {
+    // safety: see the `PipeNode` document.
+    unsafe { &**self.0.get() }
+  }
+
+  fn as_mut(&mut self) -> &mut Box<dyn Render> {
+    // safety: see the `PipeNode` document.
+    unsafe { &mut *self.0.get() }
+  }
+}
+
+impl Query for PipeNode {
+  fn query_all(
+    &self,
+    type_id: std::any::TypeId,
+    callback: &mut dyn FnMut(&dyn std::any::Any) -> bool,
+    order: QueryOrder,
+  ) {
+    self.as_ref().query_all(type_id, callback, order)
+  }
+}
+
+impl_proxy_render!(proxy as_ref(), PipeNode);
+
 #[cfg(test)]
 mod tests {
   use std::{
@@ -469,8 +529,12 @@ mod tests {
   };
 
   use crate::{
-    builtin_widgets::key::KeyChange, impl_query_self_only, prelude::*, reset_test_env,
-    test_helper::*, widget::TreeArena,
+    builtin_widgets::key::{AnyKey, KeyChange},
+    impl_query_self_only,
+    prelude::*,
+    reset_test_env,
+    test_helper::*,
+    widget::TreeArena,
   };
 
   #[test]
@@ -529,6 +593,41 @@ mod tests {
     assert_eq!(ids[2], new_ids[2]);
   }
 
+  #[test]
+  fn attach_data_to_pipe_widget() {
+    reset_test_env!();
+    let trigger = Stateful::new(false);
+    let c_trigger = trigger.clone_reader();
+    let w = fn_widget! {
+      let p = pipe! {
+        // just use to force update the widget, when trigger modified.
+        $c_trigger;
+        MockBox { size: Size::zero() }
+      };
+      @KeyWidget {
+        key: 0,
+        value: (),
+        @ { p }
+      }
+    };
+
+    let mut wnd = TestWindow::new(w);
+    wnd.draw_frame();
+    {
+      *trigger.write() = true;
+    }
+    wnd.draw_frame();
+    let tree = wnd.widget_tree.borrow();
+
+    // the key should still in the root widget after pipe widget updated.
+    assert!(
+      tree
+        .root()
+        .assert_get(&tree.arena)
+        .contain_type::<Box<dyn AnyKey>>()
+    );
+  }
+
   #[test]
   fn pipe_widget_mounted_new() {
     reset_test_env!();
diff --git a/core/src/widget.rs b/core/src/widget.rs
index 3cb1b6fa1..0bfc63387 100644
--- a/core/src/widget.rs
+++ b/core/src/widget.rs
@@ -56,7 +56,7 @@ pub struct Widget(Box<dyn FnOnce(&BuildCtx) -> WidgetId>);
 
 /// A trait to query dynamic type and its inner type on runtime, use this trait
 /// to provide type information you want framework know.
-pub trait Query {
+pub trait Query: QueryFiler {
   /// A type can composed by others, this method query all type(include self)
   /// match the type id, and call the callback one by one. The callback accept
   /// an `& dyn Any` of the target type, and return if it want to continue.
@@ -137,6 +137,8 @@ impl<'a> dyn Render + 'a {
     );
     hit
   }
+
+  pub fn is<T: Any>(&self) -> bool { self.query_filter(TypeId::of::<T>()).is_some() }
 }
 
 pub struct FnWidget<F>(F);
diff --git a/core/src/widget_tree.rs b/core/src/widget_tree.rs
index ccda24c81..74abdd978 100644
--- a/core/src/widget_tree.rs
+++ b/core/src/widget_tree.rs
@@ -2,6 +2,7 @@ use std::{
   cell::RefCell,
   cmp::Reverse,
   collections::HashSet,
+  mem::MaybeUninit,
   rc::{Rc, Weak},
 };
 
@@ -12,7 +13,7 @@ mod layout_info;
 use crate::prelude::*;
 pub use layout_info::*;
 
-use self::widget_id::empty_node;
+use self::widget_id::{empty_node, RenderNode};
 
 pub(crate) type DirtySet = Rc<RefCell<HashSet<WidgetId, ahash::RandomState>>>;
 
@@ -142,7 +143,7 @@ impl WidgetTree {
           info.size.take();
         }
 
-        let r = self.arena.get(p.0).unwrap().get();
+        let r = p.assert_get(&self.arena);
         if r.only_sized_by_parent() {
           break;
         }
@@ -181,6 +182,23 @@ impl WidgetTree {
     });
     id.0.remove_subtree(&mut self.arena);
   }
+
+  pub(crate) fn get_many_mut<const N: usize>(
+    &mut self,
+    ids: &[WidgetId; N],
+  ) -> [&mut RenderNode; N] {
+    unsafe {
+      let mut outs: MaybeUninit<[&mut RenderNode; N]> = MaybeUninit::uninit();
+      let outs_ptr = outs.as_mut_ptr();
+      for (idx, wid) in ids.iter().enumerate() {
+        let arena = &mut *(&mut self.arena as *mut TreeArena);
+        let cur = wid.get_node_mut(arena).expect("Invalid widget id.");
+
+        *(*outs_ptr).get_unchecked_mut(idx) = cur;
+      }
+      outs.assume_init()
+    }
+  }
 }
 
 impl Default for WidgetTree {
diff --git a/core/src/widget_tree/widget_id.rs b/core/src/widget_tree/widget_id.rs
index 2f94c91be..a3997c05d 100644
--- a/core/src/widget_tree/widget_id.rs
+++ b/core/src/widget_tree/widget_id.rs
@@ -16,23 +16,12 @@ pub struct WidgetId(pub(crate) NodeId);
 
 pub(crate) type TreeArena = Arena<RenderNode>;
 
-pub(crate) struct RenderNode {
-  data: Box<dyn Render>,
-}
+pub(crate) struct RenderNode(Box<dyn Render>);
 
 impl WidgetId {
   /// Returns a reference to the node data.
   pub(crate) fn get<'a, 'b>(self, tree: &'a TreeArena) -> Option<&'a (dyn Render + 'b)> {
-    self.get_node(tree).map(|n| n.data.as_ref())
-  }
-
-  /// Returns a mutable reference to the node data.
-  pub(crate) fn get_mut(self, tree: &mut TreeArena) -> Option<&mut Box<dyn Render>> {
-    self.get_node_mut(tree).map(|n| &mut n.data)
-  }
-
-  pub(crate) fn get_node(self, tree: &TreeArena) -> Option<&RenderNode> {
-    tree.get(self.0).map(|n| n.get())
+    tree.get(self.0).map(|n| &*n.get().0)
   }
 
   pub(crate) fn get_node_mut(self, tree: &mut TreeArena) -> Option<&mut RenderNode> {
@@ -166,8 +155,19 @@ impl WidgetId {
     self.get(tree).expect("Widget not exists in the `tree`")
   }
 
-  pub(crate) fn assert_get_mut(self, tree: &mut TreeArena) -> &mut Box<dyn Render> {
-    self.get_mut(tree).expect("Widget not exists in the `tree`")
+  /// We assume the `f` wrap the widget into a new widget, and keep the old
+  /// widget as part of the new widget, otherwise, undefined behavior.
+  pub(crate) fn wrap_node(
+    self,
+    tree: &mut TreeArena,
+    f: impl FnOnce(Box<dyn Render>) -> Box<dyn Render>,
+  ) {
+    let node = self.get_node_mut(tree).unwrap();
+    unsafe {
+      let data = Box::from_raw(&mut *node.0 as *mut _);
+      let copied = node.replace(f(data));
+      std::mem::forget(copied)
+    }
   }
 
   pub(crate) fn paint_subtree(self, ctx: &mut PaintingCtx) {
@@ -213,16 +213,15 @@ impl WidgetId {
 }
 
 pub(crate) fn new_node(arena: &mut TreeArena, node: Box<dyn Render>) -> WidgetId {
-  WidgetId(arena.new_node(RenderNode { data: node }))
+  WidgetId(arena.new_node(RenderNode(node)))
 }
 
 pub(crate) fn empty_node(arena: &mut TreeArena) -> WidgetId { new_node(arena, Box::new(Void)) }
 
-impl std::ops::Deref for RenderNode {
-  type Target = dyn Render;
-  fn deref(&self) -> &Self::Target { self.data.as_ref() }
-}
+impl RenderNode {
+  pub(crate) fn as_widget_mut(&mut self) -> &mut Box<dyn Render> { &mut self.0 }
 
-impl std::ops::DerefMut for RenderNode {
-  fn deref_mut(&mut self) -> &mut Self::Target { self.data.as_mut() }
+  pub(crate) fn replace(&mut self, value: Box<dyn Render>) -> Box<dyn Render> {
+    std::mem::replace(&mut self.0, value)
+  }
 }

From 7ebac042d59c13c11f03d3c2970c893211f84d43 Mon Sep 17 00:00:00 2001
From: Adoo <Adoo@outlook.com>
Date: Tue, 12 Sep 2023 09:56:28 +0800
Subject: [PATCH 10/10] =?UTF-8?q?build(gpu):=20=F0=9F=8E=A1=20update=20`ze?=
 =?UTF-8?q?rocopy`=20to=20stable=20`0.7.*`?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 Cargo.toml         | 2 +-
 painter/Cargo.toml | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/Cargo.toml b/Cargo.toml
index 4c6f3ed69..d7ff51800 100644
--- a/Cargo.toml
+++ b/Cargo.toml
@@ -87,7 +87,7 @@ usvg = {version = "0.33.0", default-features = false}
 webbrowser = "0.8.8"
 wgpu = {version = "0.16.0"}
 winit = {version = "0.28.5", default-features = false, features = ["x11", "wayland", "wayland-dlopen"]}
-zerocopy = "0.7.0-alpha.3"
+zerocopy = "0.7.3"
 
 [workspace.metadata.release]
 shared-version = true
diff --git a/painter/Cargo.toml b/painter/Cargo.toml
index 4fc011ff4..7a54e3fef 100644
--- a/painter/Cargo.toml
+++ b/painter/Cargo.toml
@@ -26,7 +26,7 @@ serde = {version = "1.0", features = ["rc", "derive"]}
 serde_json.workspace = true
 tiny-skia-path = {workspace = true}
 usvg.workspace = true
-zerocopy = {workspace = true, optional = true}
+zerocopy = {workspace = true, optional = true, features = ["derive"]}
 
 [features]
 png = ["image/png"]