zng_wgt/

node.rs

//! Helper nodes.
//!
//! This module defines some foundational nodes that can be used for declaring properties and widgets.

use std::{any::Any, sync::Arc};

use crate::WidgetFn;
use zng_app::{
    event::{AnyEventArgs, Command, CommandArgs, CommandHandle, CommandScope, Event, EventArgs, EventPropagationHandle},
    handler::{Handler, HandlerExt as _},
    render::{FrameBuilder, FrameValueKey},
    update::WidgetUpdates,
    widget::{
        VarLayout, WIDGET,
        border::{BORDER, BORDER_ALIGN_VAR, BORDER_OVER_VAR},
        info::Interactivity,
        node::*,
    },
    window::WINDOW,
};
use zng_app_context::{ContextLocal, LocalContext};
use zng_layout::{
    context::LAYOUT,
    unit::{PxConstraints2d, PxCornerRadius, PxPoint, PxRect, PxSideOffsets, PxSize, PxVector, SideOffsets},
};
use zng_state_map::{StateId, StateMapRef, StateValue};
use zng_var::*;

#[doc(hidden)]
pub use pastey::paste;

#[doc(hidden)]
pub mod __macro_util {
    pub use zng_app::{
        event::CommandArgs,
        handler::{Handler, hn},
        widget::{
            node::{IntoUiNode, UiNode},
            property,
        },
    };
    pub use zng_var::{IntoVar, context_var};
}

/// Helper for declaring properties that sets a context var.
///
/// The generated [`UiNode`] delegates each method to `child` inside a call to [`ContextVar::with_context`].
///
/// # Examples
///
/// A simple context property declaration:
///
/// ```
/// # fn main() -> () { }
/// # use zng_app::{*, widget::{node::*, *}};
/// # use zng_var::*;
/// # use zng_wgt::node::*;
/// #
/// context_var! {
///     pub static FOO_VAR: u32 = 0u32;
/// }
///
/// /// Sets the [`FOO_VAR`] in the widgets and its content.
/// #[property(CONTEXT, default(FOO_VAR))]
/// pub fn foo(child: impl IntoUiNode, value: impl IntoVar<u32>) -> UiNode {
///     with_context_var(child, FOO_VAR, value)
/// }
/// ```
///
/// When set in a widget, the `value` is accessible in all inner nodes of the widget, using `FOO_VAR.get`, and if `value` is set to a
/// variable the `FOO_VAR` will also reflect its [`is_new`] and [`read_only`]. If the `value` var is not read-only inner nodes
/// can modify it using `FOO_VAR.set` or `FOO_VAR.modify`.
///
/// Also note that the property [`default`] is set to the same `FOO_VAR`, this causes the property to *pass-through* the outer context
/// value, as if it was not set.
///
/// **Tip:** You can use a [`merge_var!`] to merge a new value to the previous context value:
///
/// ```
/// # fn main() -> () { }
/// # use zng_app::{*, widget::{node::*, *}};
/// # use zng_var::*;
/// # use zng_wgt::node::*;
/// #
/// #[derive(Debug, Clone, Default, PartialEq)]
/// pub struct Config {
///     pub foo: bool,
///     pub bar: bool,
/// }
///
/// context_var! {
///     pub static CONFIG_VAR: Config = Config::default();
/// }
///
/// /// Sets the *foo* config.
/// #[property(CONTEXT, default(false))]
/// pub fn foo(child: impl IntoUiNode, value: impl IntoVar<bool>) -> UiNode {
///     with_context_var(
///         child,
///         CONFIG_VAR,
///         merge_var!(CONFIG_VAR, value.into_var(), |c, &v| {
///             let mut c = c.clone();
///             c.foo = v;
///             c
///         }),
///     )
/// }
///
/// /// Sets the *bar* config.
/// #[property(CONTEXT, default(false))]
/// pub fn bar(child: impl IntoUiNode, value: impl IntoVar<bool>) -> UiNode {
///     with_context_var(
///         child,
///         CONFIG_VAR,
///         merge_var!(CONFIG_VAR, value.into_var(), |c, &v| {
///             let mut c = c.clone();
///             c.bar = v;
///             c
///         }),
///     )
/// }
/// ```
///
/// When set in a widget, the [`merge_var!`] will read the context value of the parent properties, modify a clone of the value and
/// the result will be accessible to the inner properties, the widget user can then set with the composed value in steps and
/// the final consumer of the composed value only need to monitor to a single context variable.
///
/// [`is_new`]: zng_var::AnyVar::is_new
/// [`read_only`]: zng_var::Var::read_only
/// [`default`]: zng_app::widget::property#default
/// [`merge_var!`]: zng_var::merge_var
/// [`UiNode`]: zng_app::widget::node::UiNode
/// [`ContextVar::with_context`]: zng_var::ContextVar::with_context
pub fn with_context_var<T: VarValue>(child: impl IntoUiNode, context_var: ContextVar<T>, value: impl IntoVar<T>) -> UiNode {
    let value = value.into_var();
    let mut actual_value = None;
    let mut id = None;

    match_node(child, move |child, op| {
        let mut is_deinit = false;
        match &op {
            UiNodeOp::Init => {
                id = Some(ContextInitHandle::new());
                actual_value = Some(Arc::new(value.current_context().into()));
            }
            UiNodeOp::Deinit => {
                is_deinit = true;
            }
            _ => {}
        }

        context_var.with_context(id.clone().expect("node not inited"), &mut actual_value, || child.op(op));

        if is_deinit {
            id = None;
            actual_value = None;
        }
    })
}

/// Helper for declaring properties that sets a context var to a value generated on init.
///
/// The method calls the `init_value` closure on init to produce a *value* var that is presented as the [`ContextVar<T>`]
/// in the widget and widget descendants. The closure can be called more than once if the returned node is reinited.
///
/// Apart from the value initialization this behaves just like [`with_context_var`].
///
/// [`ContextVar<T>`]: zng_var::ContextVar
pub fn with_context_var_init<T: VarValue>(
    child: impl IntoUiNode,
    var: ContextVar<T>,
    mut init_value: impl FnMut() -> Var<T> + Send + 'static,
) -> UiNode {
    let mut id = None;
    let mut value = None;
    match_node(child, move |child, op| {
        let mut is_deinit = false;
        match &op {
            UiNodeOp::Init => {
                id = Some(ContextInitHandle::new());
                value = Some(Arc::new(init_value().current_context().into()));
            }
            UiNodeOp::Deinit => {
                is_deinit = true;
            }
            _ => {}
        }

        var.with_context(id.clone().expect("node not inited"), &mut value, || child.op(op));

        if is_deinit {
            id = None;
            value = None;
        }
    })
}

///<span data-del-macro-root></span> Declare one or more event properties.
///
/// Each declaration expands to two properties `on_$event` and `on_pre_$event`.
/// The preview properties call [`on_pre_event`], the main event properties call [`on_event`].
///
/// # Examples
///
/// ```
/// # fn main() { }
/// # use zng_app::event::*;
/// # use zng_wgt::node::*;
/// # #[derive(Clone, Debug, PartialEq)] pub enum KeyState { Pressed }
/// # event_args! { pub struct KeyInputArgs { pub state: KeyState, .. fn delivery_list(&self, _l: &mut UpdateDeliveryList) { } } }
/// # event! { pub static KEY_INPUT_EVENT: KeyInputArgs; }
/// event_property! {
///     /// on_key_input docs.
///     pub fn key_input {
///         event: KEY_INPUT_EVENT,
///         args: KeyInputArgs,
///         // default filter is |args| true,
///     }
///
///     pub(crate) fn key_down {
///         event: KEY_INPUT_EVENT,
///         args: KeyInputArgs,
///         // optional filter:
///         filter: |args| args.state == KeyState::Pressed,
///     }
/// }
/// ```
///
/// # Filter
///
/// App events are delivered to all widgets that are both in the [`UpdateDeliveryList`] and event subscribers list,
/// event properties can specialize further by defining a filter predicate.
///
/// The `filter:` predicate is called if [`propagation`] is not stopped. It must return `true` if the event arguments
/// are relevant in the context of the widget and event property. If it returns `true` the `handler` closure is called.
/// See [`on_event`] and [`on_pre_event`] for more information.
///
/// If you don't provide a filter predicate the default always allows, so all app events targeting the widget and not already handled
/// are allowed by default. Note that events that represent an *interaction* with the widget are send for both [`ENABLED`] and [`DISABLED`]
/// widgets, event properties should probably distinguish if they fire on normal interactions versus on *disabled* interactions.
///
/// # Async
///
/// Async event handlers are supported by properties generated by this macro, but only the code before the first `.await` executes
/// in the event track, subsequent code runs in widget updates.
///
/// # Commands
///
/// You can use [`command_property`] to declare command event properties.
///
/// # Implement For
///
/// You can implement the new properties for a widget or mixin using the `widget_impl:` directive:
///
/// ```
/// # fn main() { }
/// # use zng_app::{event::*, widget::{node::{UiNode, IntoUiNode}, widget_mixin}};
/// # use zng_wgt::node::*;
/// # event_args! { pub struct KeyInputArgs { .. fn delivery_list(&self, _l: &mut UpdateDeliveryList) {} } }
/// # event! { pub static KEY_INPUT_EVENT: KeyInputArgs; }
/// # fn some_node(child: impl IntoUiNode) -> UiNode { child.into_node() }
/// /// Keyboard events.
/// #[widget_mixin]
/// pub struct KeyboardMix<P>(P);
///
/// event_property! {
///     pub fn key_input {
///         event: KEY_INPUT_EVENT,
///         args: KeyInputArgs,
///         widget_impl: KeyboardMix<P>,
///     }
/// }
/// ```
///
/// # With Extra Nodes
///
/// You can wrap the event handler node with extra nodes by setting the optional `with:` closure:
///
/// ```
/// # fn main() { }
/// # use zng_app::{event::*, widget::node::{UiNode, IntoUiNode}};
/// # use zng_wgt::node::*;
/// # event_args! { pub struct KeyInputArgs { .. fn delivery_list(&self, _l: &mut UpdateDeliveryList) {} } }
/// # event! { pub static KEY_INPUT_EVENT: KeyInputArgs; }
/// # fn some_node(child: impl IntoUiNode) -> UiNode { child.into_node() }
/// event_property! {
///     pub fn key_input {
///         event: KEY_INPUT_EVENT,
///         args: KeyInputArgs,
///         with: |child, _preview| some_node(child),
///     }
/// }
/// ```
///
/// The closure receives two arguments, the handler `UiNode` and a `bool` that is `true` if the closure is called in the *on_pre_*
/// property or `false` when called in the *on_* property.
///
/// [`on_pre_event`]: crate::node::on_pre_event
/// [`on_event`]: crate::node::on_event
/// [`propagation`]: zng_app::event::AnyEventArgs::propagation
/// [`ENABLED`]: zng_app::widget::info::Interactivity::ENABLED
/// [`DISABLED`]: zng_app::widget::info::Interactivity::DISABLED
/// [`UpdateDeliveryList`]: zng_app::update::UpdateDeliveryList
#[macro_export]
macro_rules! event_property {
    ($(
        $(#[$on_event_attrs:meta])*
        $vis:vis fn $event:ident {
            event: $EVENT:path,
            args: $Args:path
            $(, filter: $filter:expr)?
            $(, widget_impl: $Wgt:ty)?
            $(, with: $with:expr)?
            $(,)?
        }
    )+) => {$(
        $crate::__event_property! {
            done {
                sig { $(#[$on_event_attrs])* $vis fn $event { event: $EVENT, args: $Args, } }
            }

            $(filter: $filter,)?
            $(widget_impl: $Wgt,)?
            $(with: $with,)?
        }
    )+};
}

#[doc(hidden)]
#[macro_export]
macro_rules! __event_property {
    // match filter:
    (
        done {
            $($done:tt)+
        }
        filter: $filter:expr,
        $($rest:tt)*
    ) => {
        $crate::__event_property! {
            done {
                $($done)+
                filter { $filter }
            }
            $($rest)*
        }
    };
    // match widget_impl:
    (
        done {
            $($done:tt)+
        }
        widget_impl: $Wgt:ty,
        $($rest:tt)*
    ) => {
        $crate::__event_property! {
            done {
                $($done)+
                widget_impl { , widget_impl($Wgt) }
            }
            $($rest)*
        }
    };
    // match with:
    (
        done {
            $($done:tt)+
        }
        with: $with:expr,
    ) => {
        $crate::__event_property! {
            done {
                $($done)+
                with { $with }
            }
        }
    };
    // match done sig
    (
        done {
            sig { $($sig:tt)+ }
        }
    ) => {
        $crate::__event_property! {
            done {
                sig { $($sig)+ }
                filter { |_args| true }
                widget_impl { }
                with { }
            }
        }
    };
    // match done sig+filter
    (
        done {
            sig { $($sig:tt)+ }
            filter { $($filter:tt)+ }
        }
    ) => {
        $crate::__event_property! {
            done {
                sig { $($sig)+ }
                filter { $($filter)+ }
                widget_impl { }
                with { }
            }
        }
    };
    // match done sig+widget_impl
    (
        done {
            sig { $($sig:tt)+ }
            widget_impl { $($widget_impl:tt)+ }
        }
    ) => {
        $crate::__event_property! {
            done {
                sig { $($sig)+ }
                filter { |_args| true }
                widget_impl { $($widget_impl)+ }
                with { }
            }
        }
    };
    // match done sig+with
    (
        done {
            sig { $($sig:tt)+ }
            with { $($with:tt)+ }
        }
    ) => {
        $crate::__event_property! {
            done {
                sig { $($sig)+ }
                filter { |_args| true }
                widget_impl { }
                with { $($with)+ }
            }
        }
    };
    // match done sig+filter+widget_impl
    (
        done {
            sig { $($sig:tt)+ }
            filter { $($filter:tt)+ }
            widget_impl { $($widget_impl:tt)+ }
        }
    ) => {
        $crate::__event_property! {
            done {
                sig { $($sig)+ }
                filter { $($filter)+ }
                widget_impl { $($widget_impl)+ }
                with { }
            }
        }
    };
    // match done sig+filter+with
    (
        done {
            sig { $($sig:tt)+ }
            filter { $($filter:tt)+ }
            with { $($with:tt)+ }
        }
    ) => {
        $crate::__event_property! {
            done {
                sig { $($sig)+ }
                filter { $($filter)+ }
                widget_impl { }
                with { $($with)+ }
            }
        }
    };
    // match done sig+filter+widget_impl+with
    (
        done {
            sig { $(#[$on_event_attrs:meta])* $vis:vis fn $event:ident { event: $EVENT:path, args: $Args:path, } }
            filter { $filter:expr }
            widget_impl { $($widget_impl:tt)* }
            with { $($with:expr)? }
        }
    ) => {
        $crate::node::paste! {
            $(#[$on_event_attrs])*
            ///
            /// # Preview
            ///
            #[doc = "You can preview this event using [`on_pre_"$event "`](fn.on_pre_"$event ".html)."]
            /// Otherwise the handler is only called after the widget content has a chance to stop propagation.
            ///
            /// # Async
            ///
            /// You can use async event handlers with this property.
            #[$crate::node::__macro_util::property(
                EVENT,
                default( $crate::node::__macro_util::hn!(|_|{}) )
                $($widget_impl)*
            )]
            $vis fn [<on_ $event>](
                child: impl $crate::node::__macro_util::IntoUiNode,
                handler: $crate::node::__macro_util::Handler<$Args>,
            ) -> $crate::node::__macro_util::UiNode {
                $crate::__event_property!(=> with($crate::node::on_event(child, $EVENT, $filter, handler), false, $($with)?))
            }

            #[doc = "Preview [`on_"$event "`](fn.on_"$event ".html) event."]
            ///
            /// # Preview
            ///
            /// Preview event properties call the handler before the main event property and before the widget content, if you stop
            /// the propagation of a preview event the main event handler is not called.
            ///
            /// # Async
            ///
            /// You can use async event handlers with this property, note that only the code before the fist `.await` is *preview*,
            /// subsequent code runs in widget updates.
            #[$crate::node::__macro_util::property(
                EVENT,
                default( $crate::node::__macro_util::hn!(|_|{}) )
                $($widget_impl)*
            )]
            $vis fn [<on_pre_ $event>](
                child: impl $crate::node::__macro_util::IntoUiNode,
                handler: $crate::node::__macro_util::Handler<$Args>,
            ) -> $crate::node::__macro_util::UiNode {
                $crate::__event_property!(=> with($crate::node::on_pre_event(child, $EVENT, $filter, handler), true, $($with)?))
            }
        }
    };

    (=> with($child:expr, $preview:expr,)) => { $child };
    (=> with($child:expr, $preview:expr, $with:expr)) => { ($with)($child, $preview) };
}

/// Helper for declaring event properties.
///
/// This function is used by the [`event_property!`] macro.
///
/// # Filter
///
/// The `filter` predicate is called if [`propagation`] was not stopped. It must return `true` if the event arguments are
/// relevant in the context of the widget. If it returns `true` the `handler` closure is called. Note that events that represent
/// an *interaction* with the widget are send for both [`ENABLED`] and [`DISABLED`] targets, event properties should probably distinguish
/// if they fire on normal interactions vs on *disabled* interactions.
///
/// # Route
///
/// The event `handler` is called after the [`on_pre_event`] equivalent at the same context level. If the event
/// `filter` allows more then one widget and one widget contains the other, the `handler` is called on the inner widget first.
///
/// # Async
///
/// Async event handlers are called like normal, but code after the first `.await` only runs in subsequent updates. This means
/// that [`propagation`] must be stopped before the first `.await`, otherwise you are only signaling
/// other async tasks handling the same event, if they are monitoring the propagation handle.
///
/// # Commands
///
/// You can use [`on_command`] to declare command event properties.
///
/// [`propagation`]: zng_app::event::AnyEventArgs::propagation
/// [`ENABLED`]: zng_app::widget::info::Interactivity::ENABLED
/// [`DISABLED`]: zng_app::widget::info::Interactivity::DISABLED
pub fn on_event<C, A, F>(child: C, event: Event<A>, filter: F, handler: Handler<A>) -> UiNode
where
    C: IntoUiNode,
    A: EventArgs,
    F: FnMut(&A) -> bool + Send + 'static,
{
    on_event_impl(child.into_node(), event, filter, handler)
}
fn on_event_impl<A, F>(child: UiNode, event: Event<A>, mut filter: F, handler: Handler<A>) -> UiNode
where
    A: EventArgs,
    F: FnMut(&A) -> bool + Send + 'static,
{
    let mut handler = handler.into_wgt_runner();
    match_node(child, move |child, op| match op {
        UiNodeOp::Init => {
            WIDGET.sub_event(&event);
        }
        UiNodeOp::Deinit => {
            handler.deinit();
        }
        UiNodeOp::Event { update } => {
            child.event(update);

            if let Some(args) = event.on(update)
                && !args.propagation().is_stopped()
                && filter(args)
            {
                #[cfg(all(debug_assertions, not(target_arch = "wasm32")))]
                let t = std::time::Instant::now();
                #[cfg(all(debug_assertions, target_arch = "wasm32"))]
                let t = web_time::Instant::now();

                handler.event(args);

                #[cfg(debug_assertions)]
                {
                    let t = t.elapsed();
                    if t > std::time::Duration::from_millis(300) {
                        tracing::warn!(
                            "event handler for `{}` in {:?} blocked for {t:?}, consider using `async_hn!`",
                            event.as_any().name(),
                            WIDGET.id()
                        );
                    }
                }
            }
        }
        UiNodeOp::Update { updates } => {
            child.update(updates);
            handler.update();
        }
        _ => {}
    })
}

/// Helper for declaring preview event properties.
///
/// This function is used by the [`event_property!`] macro.
///
/// # Filter
///
/// The `filter` predicate is called if [`propagation`] was not stopped. It must return `true` if the event arguments are
/// relevant in the context of the widget. If it returns `true` the `handler` closure is called. Note that events that represent
/// an *interaction* with the widget are send for both [`ENABLED`] and [`DISABLED`] targets, event properties should probably distinguish
/// if they fire on normal interactions vs on *disabled* interactions.
///
/// # Route
///
/// The event `handler` is called before the [`on_event`] equivalent at the same context level. If the event
/// `filter` allows more then one widget and one widget contains the other, the `handler` is called on the inner widget first.
///
/// # Async
///
/// Async event handlers are called like normal, but code after the first `.await` only runs in subsequent event updates. This means
/// that [`propagation`] must be stopped before the first `.await`, otherwise you are only signaling
/// other async tasks handling the same event, if they are monitoring the propagation handle.
///
/// # Commands
///
/// You can use [`on_pre_command`] to declare command event properties.
///
/// [`propagation`]: zng_app::event::AnyEventArgs::propagation
/// [`ENABLED`]: zng_app::widget::info::Interactivity::ENABLED
/// [`DISABLED`]: zng_app::widget::info::Interactivity::DISABLED
pub fn on_pre_event<C, A, F>(child: C, event: Event<A>, filter: F, handler: Handler<A>) -> UiNode
where
    C: IntoUiNode,
    A: EventArgs,
    F: FnMut(&A) -> bool + Send + 'static,
{
    on_pre_event_impl(child.into_node(), event, filter, handler)
}
fn on_pre_event_impl<A, F>(child: UiNode, event: Event<A>, mut filter: F, handler: Handler<A>) -> UiNode
where
    A: EventArgs,
    F: FnMut(&A) -> bool + Send + 'static,
{
    let mut handler = handler.into_wgt_runner();
    match_node(child, move |_, op| match op {
        UiNodeOp::Init => {
            WIDGET.sub_event(&event);
        }
        UiNodeOp::Deinit => {
            handler.deinit();
        }
        UiNodeOp::Event { update } => {
            if let Some(args) = event.on(update)
                && !args.propagation().is_stopped()
                && filter(args)
            {
                #[cfg(debug_assertions)]
                let t = std::time::Instant::now();

                handler.event(args);

                #[cfg(debug_assertions)]
                {
                    let t = t.elapsed();
                    if t > std::time::Duration::from_millis(300) {
                        tracing::warn!(
                            "preview event handler for `{}` in {:?} blocked for {t:?}, consider using `async_hn!`",
                            event.as_any().name(),
                            WIDGET.id()
                        );
                    }
                }
            }
        }
        UiNodeOp::Update { .. } => {
            handler.update();
        }
        _ => {}
    })
}

#[doc(hidden)]
#[macro_export]
macro_rules! __command_property {
    // final match, command_property! never calls this directly
    (
        $(#[$on_cmd_attrs:meta])*
        $vis:vis fn $command:ident {
            cmd { $cmd_init:expr }
            widget_impl { $($widget_impl:tt)* }
            enabled_var { $enabled_var:expr }
            generate_can_property: false
        }
    ) => { $crate::node::paste! {
        $(#[$on_cmd_attrs])*
        ///
        /// # Preview
        ///
        #[doc = "You can preview this command event using [`on_pre_"$command "`](fn.on_pre_"$command ".html)."]
        /// Otherwise the handler is only called after the widget content has a chance to stop propagation.
        ///
        /// # Async
        ///
        /// You can use async event handlers with this property.
        #[$crate::node::__macro_util::property(EVENT, default( $crate::node::__macro_util::hn!(|_|{}) ))]
        $vis fn [<on_ $command>](
            child: impl $crate::node::__macro_util::IntoUiNode,
            handler: $crate::node::__macro_util::Handler<$crate::node::__macro_util::CommandArgs>,
        ) -> $crate::node::__macro_util::UiNode {
            $crate::node::on_command(child, || $cmd_init, || $enabled_var, handler)
        }

        #[doc = "Preview [`on_"$command "`](fn.on_"$command ".html) command."]
        ///
        /// # Preview
        ///
        /// Preview event properties call the handler before the main event property and before the widget content, if you stop
        /// the propagation of a preview event the main event handler is not called.
        ///
        /// # Async
        ///
        /// You can use async event handlers with this property, note that only the code before the fist `.await` is *preview*,
        /// subsequent code runs in widget updates.
        #[$crate::node::__macro_util::property(EVENT, default( $crate::node::__macro_util::hn!(|_|{}) ) $($widget_impl)*)]
        $vis fn [<on_pre_ $command>](
            child: impl $crate::node::__macro_util::IntoUiNode,
            handler: $crate::node::__macro_util::Handler<$crate::node::__macro_util::CommandArgs>,
        ) -> $crate::node::__macro_util::UiNode {
            $crate::node::on_pre_command(child, || $cmd_init, || $enabled_var, handler)
        }
    } };
    (
        $(#[$on_cmd_attrs:meta])*
        $vis:vis fn $command:ident {
            cmd { $cmd_init:expr }
            widget_impl { $($widget_impl:tt)* }
            generate_can_property: true
        }
    ) => { $crate::node::paste! {
        $(#[$on_cmd_attrs])*
        ///
        /// # Preview
        ///
        #[doc = "You can preview this command event using [`on_pre_"$command "`](fn.on_pre_"$command ".html)."]
        /// Otherwise the handler is only called after the widget content has a chance to stop propagation.
        ///
        /// # Async
        ///
        /// You can use async event handlers with this property.
        ///
        /// # Enabled
        ///
        #[doc = "You can use the [`can_"$command "`] context property to disable the command handle."]
        /// When disabled the `handler` is not called and the command handle signals as disabled.
        #[$crate::node::__macro_util::property(EVENT, default( $crate::node::__macro_util::hn!(|_|{}) ))]
        $vis fn [<on_ $command>](
            child: impl $crate::node::__macro_util::IntoUiNode,
            handler: $crate::node::__macro_util::Handler<$crate::node::__macro_util::CommandArgs>,
        ) -> $crate::node::__macro_util::UiNode {
            $crate::node::on_command(child, || $cmd_init, || $crate::node::__macro_util::IntoVar::into_var(self::[<CAN_ $command:upper _VAR>]), handler)
        }

        #[doc = "Preview [`on_"$command "`](fn.on_"$command ".html) command."]
        ///
        /// # Preview
        ///
        /// Preview event properties call the handler before the main event property and before the widget content, if you stop
        /// the propagation of a preview event the main event handler is not called.
        ///
        /// # Async
        ///
        /// You can use async event handlers with this property, note that only the code before the fist `.await` is *preview*,
        /// subsequent code runs in widget updates.
        ///
        /// # Enabled
        ///
        #[doc = "You can use the [`can_"$command "`](fn@can_"$command ") context property to disable the command handle."]
        #[$crate::node::__macro_util::property(EVENT, default( $crate::node::__macro_util::hn!(|_|{}) ) $($widget_impl)*)]
        $vis fn [<on_pre_ $command>](
            child: impl $crate::node::__macro_util::IntoUiNode,
            handler: $crate::node::__macro_util::Handler<$crate::node::__macro_util::CommandArgs>,
        ) -> $crate::node::__macro_util::UiNode {
            $crate::node::on_pre_command(child, || $cmd_init, || $crate::node::__macro_util::IntoVar::into_var(self::[<CAN_ $command:upper _VAR>]), handler)
        }

        $crate::node::__macro_util::context_var! {
            #[doc = "Enable/disable [`on_"$command "`](fn@on_"$command ") and [`on_pre_"$command "`](fn@on_pre_"$command ") command handles."]
            ///
            #[doc = "Enabled by default, use the [`can_"$command "`](fn@can_" $command ") property to set."]
            $vis static [<CAN_ $command:upper _VAR>]: bool = true;
        }

        #[doc = "Defines if [`on_"$command "`](fn@on_"$command ") and [`on_pre_"$command "`](fn@on_pre_"$command ") command handles"]
        /// are enabled in the context.
        ///
        /// Is enabled by default.
        ///
        #[doc = "Sets the [`CAN_"$command:upper "_VAR`]."]
        #[$crate::node::__macro_util::property(CONTEXT, default(true) $($widget_impl)*)]
        $vis fn [<can_ $command>](
            child: impl $crate::node::__macro_util::IntoUiNode,
            enabled: impl $crate::node::__macro_util::IntoVar<bool>,
        ) -> $crate::node::__macro_util::UiNode {
            $crate::node::with_context_var(child, self::[<CAN_ $command:upper _VAR>], enabled)
        }
    } };

    // custom enabled + widget_impl
    (
        $(#[$on_cmd_attrs:meta])*
        $vis:vis fn $command:ident {
            cmd { $cmd_init:expr }
            enabled { $enabled_var:expr }
            widget_impl_ty { $Wgt:ty }
        }
    ) => {
        $crate::__command_property! {
            $(#[$on_cmd_attrs])*
            $vis fn $command {
                cmd { $cmd_init }
                widget_impl { , widget_impl($Wgt) }
                enabled_var { $enabled_var }
                generate_can_property: false
            }
        }
    };

    // default enabled + widget_impl
    (
        $(#[$on_cmd_attrs:meta])*
        $vis:vis fn $command:ident {
            cmd { $cmd_init:expr }
            widget_impl_ty { $Wgt:ty }
        }
    ) => {
        $crate::node::paste! {
            $crate::__command_property! {
                $(#[$on_cmd_attrs])*
                $vis fn $command {
                    cmd { $cmd_init }
                    widget_impl { , widget_impl($Wgt) }
                    generate_can_property: true
                }
            }
        }
    };

    // custom enabled, no widget_impl
    (
        $(#[$on_cmd_attrs:meta])*
        $vis:vis fn $command:ident {
            cmd { $cmd_init:expr }
            enabled { $enabled_var:expr }
        }
    ) => {
        $crate::__command_property! {
            $(#[$on_cmd_attrs])*
            $vis fn $command {
                cmd { $cmd_init }
                widget_impl { }
                enabled_var { $enabled_var }
                generate_can_property: false
            }
        }
    };

    // default enabled, no widget_impl
    (
        $(#[$on_cmd_attrs:meta])*
        $vis:vis fn $command:ident {
            cmd { $cmd_init:expr }
        }
    ) => {
        $crate::__command_property! {
            $(#[$on_cmd_attrs])*
            $vis fn $command {
                cmd { $cmd_init }
                widget_impl { }
                generate_can_property: true
            }
        }
    };
}

///<span data-del-macro-root></span> Declare one or more command event properties.
///
/// Each declaration expands to two properties `on_$command` and `on_pre_$command`.
/// The preview properties call [`on_pre_command`], the main event properties call [`on_command`].
///
/// By default a `CAN_$COMMAND_VAR` and `can_$command` var and property are also generated.
///
/// # Examples
///
/// ```
/// # fn main() { }
/// # use zng_app::{event::*, widget::*};
/// # use zng_app::var::*;
/// # use zng_wgt::node::*;
/// # command! {
/// # pub static PASTE_CMD;
/// # }
/// command_property! {
///     /// Paste command property docs.
///     pub fn paste {
///         cmd: PASTE_CMD.scoped(WIDGET.id()),
///     }
/// }
/// ```
///
/// The example above generates event properties `on_pre_paste` and `on_paste`, context property `can_paste` and
/// context var `CAN_PASTE_VAR`.
///
/// The event properties will hold a [`CommandHandle`] when the widget is inited, the handle wil signal enabled based
/// on the contextual var value. The context property sets that var in a widget context.
///
/// # Command
///
/// The `cmd:` expression evaluates on init to generate the command, this allows for the
/// creation of widget scoped commands. The new command property event handler will receive events
/// for the command and scope that target the widget where the property is set.
///
/// If the command is scoped on the root widget and the command property is set on the same root widget a second handle
/// is taken for the window scope too, so callers can target the *window* using the window ID or the root widget ID.
///
/// # Enabled
///
/// The `enabled:` expression evaluates on init to generate a boolean variable that defines
/// if the command handle is enabled. Command event handlers track both their existence and
/// the enabled flag, see [`Command::subscribe`] for details.
///
/// If not provided a `CAN_$CMD_VAR` and `can_$cmd` contextual  var and property are generated.
///
/// ```
/// # fn main() { }
/// # use zng_app::{event::*, widget::*};
/// # use zng_app::var::*;
/// # use zng_wgt::node::*;
/// # command! {
/// # pub static PASTE_CMD;
/// # }
/// command_property! {
///     /// Paste command property docs.
///     pub fn paste {
///         cmd: PASTE_CMD.scoped(WIDGET.id()),
///         enabled: const_var(true), // command handle always enabled
///     }
/// }
/// ```
///
/// In the example above `enabled:` is set to a custom variable, so the associated
/// `CAN_PASTE_VAR` and `can_paste` will not be generated.
///
/// # Implement For
///
/// You can implement the new properties for a widget or mixin using the `widget_impl:` directive:
///
/// ```
/// # fn main() { }
/// # use zng_wgt::node::*;
/// # use zng_app::{event::*, widget::*};
/// # use zng_app::var::*;
/// # use zng_wgt::node::*;
/// # command! {
/// # pub static PASTE_CMD;
/// # }
/// /// Clipboard handler.
/// #[widget_mixin]
/// pub struct ClipboardMix<P>(P);
///
/// command_property! {
///     /// Paste command property docs.
///     pub fn paste {
///         cmd: PASTE_CMD.scoped(WIDGET.id()),
///         widget_impl: ClipboardMix<P>,
///     }
/// }
/// ```
///
/// [`Command::subscribe`]: zng_app::event::Command::subscribe
#[macro_export]
macro_rules! command_property {
    ($(
        $(#[$on_cmd_attrs:meta])*
        $vis:vis fn $command:ident {
            cmd: $cmd_init:expr
            $(, enabled: $enabled_var:expr)?
            $(, widget_impl: $Wgt:ty)?
            $(,)?
        }
    )+) => {$(
        $crate::__command_property! {
            $(#[$on_cmd_attrs])*
            $vis fn $command {
                cmd { $cmd_init }
                $( enabled { $enabled_var } )?
                $( widget_impl_ty { $Wgt } )?
            }
        }
    )+};
}

/// Helper for declaring command event properties.
///
/// This function is used by the [`command_property!`] macro.
///
/// # Command
///
/// The `command_builder` closure is called on init to generate the command, it is a closure to allow
/// creation of widget scoped commands. The event `handler` will receive events for the command
/// and scope that target the widget where it is set.
///
/// If the command is scoped on the root widget and `on_command` is set on the same root widget a second handle
/// is taken for the window scope too, so callers can target the *window* using the window ID or the root widget ID.
///
/// # Enabled
///
/// The `enabled_builder` closure is called on init to generate a boolean variable that defines
/// if the command handle is enabled. Command event handlers track both their existence and
/// the enabled flag, see [`Command::subscribe`] for details.
///
/// Note that the command handler can be enabled even when the widget is disabled, the widget
/// will receive the event while disabled in this case, you can use this to show feedback explaining
/// why the command cannot run.
///
/// # Route
///
/// The event `handler` is called after the [`on_pre_command`] equivalent at the same context level. If the command
/// event targets more then one widget and one widget contains the other, the `handler` is called on the inner widget first.
///
/// # Async
///
/// Async event handlers are called like normal, but code after the first `.await` only runs in subsequent updates. This means
/// that [`propagation`] must be stopped before the first `.await`, otherwise you are only signaling
/// other async tasks handling the same event, if they are monitoring the propagation handle.
///  
/// [`propagation`]: zng_app::event::AnyEventArgs::propagation
/// [`Command::subscribe`]: zng_app::event::Command::subscribe
pub fn on_command<U, CB, EB>(child: U, command_builder: CB, enabled_builder: EB, handler: Handler<CommandArgs>) -> UiNode
where
    U: IntoUiNode,
    CB: FnMut() -> Command + Send + 'static,
    EB: FnMut() -> Var<bool> + Send + 'static,
{
    on_command_impl(child.into_node(), command_builder, enabled_builder, handler)
}
fn on_command_impl<CB, EB>(child: UiNode, mut command_builder: CB, mut enabled_builder: EB, handler: Handler<CommandArgs>) -> UiNode
where
    CB: FnMut() -> Command + Send + 'static,
    EB: FnMut() -> Var<bool> + Send + 'static,
{
    let mut handler = handler.into_wgt_runner();
    let mut enabled = None;
    let mut handle = CommandHandle::dummy();
    let mut win_handle = CommandHandle::dummy();
    let mut command = NIL_CMD;
    let mut last_propagation = EventPropagationHandle::new();

    match_node(child, move |child, op| match op {
        UiNodeOp::Init => {
            child.init();

            let e = enabled_builder();
            WIDGET.sub_var(&e);
            let is_enabled = e.get();
            enabled = Some(e);

            command = command_builder();

            let id = WIDGET.id();
            handle = command.subscribe_wgt(is_enabled, id);
            if CommandScope::Widget(id) == command.scope() && WIDGET.parent_id().is_none() {
                // root scope, also include the window.
                win_handle = command.scoped(WINDOW.id()).subscribe_wgt(is_enabled, id);
            }
        }
        UiNodeOp::Deinit => {
            child.deinit();

            enabled = None;
            handle = CommandHandle::dummy();
            win_handle = CommandHandle::dummy();
            command = NIL_CMD;
            handler.deinit();
        }

        UiNodeOp::Event { update } => {
            child.event(update);

            if command.event().has(update) {
                if win_handle.is_dummy() {
                    if let Some(args) = command.on_unhandled(update) {
                        handler.event(args);
                    }
                } else if let Some(args) = command
                    .on_unhandled(update)
                    .or_else(|| command.scoped(WINDOW.id()).on_unhandled(update))
                    && &last_propagation != args.propagation()
                {
                    handler.event(args);
                    last_propagation = args.propagation().clone();
                }
            }
        }
        UiNodeOp::Update { updates } => {
            child.update(updates);

            handler.update();

            if let Some(enabled) = enabled.as_ref().expect("node not inited").get_new() {
                handle.set_enabled(enabled);
                win_handle.set_enabled(enabled);
            }
        }

        _ => {}
    })
}

zng_app::event::command! {
    static NIL_CMD;
}

/// Helper for declaring command preview handlers.
///
/// Other then the route this helper behaves exactly like [`on_command`].
///
/// # Route
///
/// The event `handler` is called before the [`on_command`] equivalent at the same context level. If the command event
/// targets more then one widget and one widget contains the other, the `handler` is called on the inner widget first.
pub fn on_pre_command<U, CB, EB>(child: U, command_builder: CB, enabled_builder: EB, handler: Handler<CommandArgs>) -> UiNode
where
    U: IntoUiNode,
    CB: FnMut() -> Command + Send + 'static,
    EB: FnMut() -> Var<bool> + Send + 'static,
{
    on_pre_command_impl(child.into_node(), command_builder, enabled_builder, handler)
}
fn on_pre_command_impl<CB, EB>(child: UiNode, mut command_builder: CB, mut enabled_builder: EB, handler: Handler<CommandArgs>) -> UiNode
where
    CB: FnMut() -> Command + Send + 'static,
    EB: FnMut() -> Var<bool> + Send + 'static,
{
    let mut handler = handler.into_wgt_runner();
    let mut enabled = None;
    let mut handle = CommandHandle::dummy();
    let mut win_handle = CommandHandle::dummy();
    let mut command = NIL_CMD;
    let mut last_propagation = EventPropagationHandle::new();

    match_node(child, move |child, op| match op {
        UiNodeOp::Init => {
            child.init();

            let e = enabled_builder();
            WIDGET.sub_var(&e);
            let is_enabled = e.get();
            enabled = Some(e);

            command = command_builder();

            let id = WIDGET.id();
            handle = command.subscribe_wgt(is_enabled, id);
            if CommandScope::Widget(id) == command.scope() && WIDGET.parent_id().is_none() {
                // root scope, also include the window.
                win_handle = command.scoped(WINDOW.id()).subscribe_wgt(is_enabled, id);
            }
        }
        UiNodeOp::Deinit => {
            child.deinit();

            enabled = None;
            handle = CommandHandle::dummy();
            win_handle = CommandHandle::dummy();
            command = NIL_CMD;
            handler.deinit();
        }

        UiNodeOp::Event { update } => {
            if command.event().has(update) {
                if win_handle.is_dummy() {
                    if let Some(args) = command.on_unhandled(update) {
                        handler.event(args);
                    }
                } else if let Some(args) = command
                    .on_unhandled(update)
                    .or_else(|| command.scoped(WINDOW.id()).on_unhandled(update))
                    && &last_propagation != args.propagation()
                {
                    handler.event(args);
                    last_propagation = args.propagation().clone();
                }
            }
        }
        UiNodeOp::Update { .. } => {
            handler.update();

            if let Some(enabled) = enabled.as_ref().expect("on_pre_command not initialized").get_new() {
                handle.set_enabled(enabled);
                win_handle.set_enabled(enabled);
            }
        }

        _ => {}
    })
}

/// Logs an error if the `_var` is always read-only.
pub fn validate_getter_var<T: VarValue>(_var: &Var<T>) {
    #[cfg(debug_assertions)]
    if _var.capabilities().is_always_read_only() {
        tracing::error!(
            "`is_`, `has_` or `get_` property inited with read-only var in `{}`",
            WIDGET.trace_id()
        );
    }
}

/// Helper for declaring state properties that depend on a single event.
///
/// When the `event` is received `on_event` is called, if it provides a new state the `state` variable is set.
pub fn event_state<A: EventArgs, S: VarValue>(
    child: impl IntoUiNode,
    state: impl IntoVar<S>,
    default: S,
    event: Event<A>,
    mut on_event: impl FnMut(&A) -> Option<S> + Send + 'static,
) -> UiNode {
    let state = state.into_var();
    match_node(child, move |_, op| match op {
        UiNodeOp::Init => {
            validate_getter_var(&state);
            WIDGET.sub_event(&event);
            state.set(default.clone());
        }
        UiNodeOp::Deinit => {
            state.set(default.clone());
        }
        UiNodeOp::Event { update } => {
            if let Some(args) = event.on(update)
                && let Some(s) = on_event(args)
            {
                state.set(s);
            }
        }
        _ => {}
    })
}

/// Helper for declaring state properties that depend on two other event states.
///
/// When the `event#` is received `on_event#` is called, if it provides a new value `merge` is called, if merge
/// provides a new value the `state` variable is set.
#[expect(clippy::too_many_arguments)]
pub fn event_state2<A0, A1, S0, S1, S>(
    child: impl IntoUiNode,
    state: impl IntoVar<S>,
    default: S,
    event0: Event<A0>,
    default0: S0,
    mut on_event0: impl FnMut(&A0) -> Option<S0> + Send + 'static,
    event1: Event<A1>,
    default1: S1,
    mut on_event1: impl FnMut(&A1) -> Option<S1> + Send + 'static,
    mut merge: impl FnMut(S0, S1) -> Option<S> + Send + 'static,
) -> UiNode
where
    A0: EventArgs,
    A1: EventArgs,
    S0: VarValue,
    S1: VarValue,
    S: VarValue,
{
    let state = state.into_var();
    let partial_default = (default0, default1);
    let mut partial = partial_default.clone();

    match_node(child, move |child, op| match op {
        UiNodeOp::Init => {
            validate_getter_var(&state);
            WIDGET.sub_event(&event0).sub_event(&event1);

            partial = partial_default.clone();
            state.set(default.clone());
        }
        UiNodeOp::Deinit => {
            state.set(default.clone());
        }
        UiNodeOp::Event { update } => {
            let mut updated = false;
            if let Some(args) = event0.on(update) {
                if let Some(state) = on_event0(args)
                    && partial.0 != state
                {
                    partial.0 = state;
                    updated = true;
                }
            } else if let Some(args) = event1.on(update)
                && let Some(state) = on_event1(args)
                && partial.1 != state
            {
                partial.1 = state;
                updated = true;
            }
            child.event(update);

            if updated && let Some(value) = merge(partial.0.clone(), partial.1.clone()) {
                state.set(value);
            }
        }
        _ => {}
    })
}

/// Helper for declaring state properties that depend on three other event states.
///
/// When the `event#` is received `on_event#` is called, if it provides a new value `merge` is called, if merge
/// provides a new value the `state` variable is set.
#[expect(clippy::too_many_arguments)]
pub fn event_state3<A0, A1, A2, S0, S1, S2, S>(
    child: impl IntoUiNode,
    state: impl IntoVar<S>,
    default: S,
    event0: Event<A0>,
    default0: S0,
    mut on_event0: impl FnMut(&A0) -> Option<S0> + Send + 'static,
    event1: Event<A1>,
    default1: S1,
    mut on_event1: impl FnMut(&A1) -> Option<S1> + Send + 'static,
    event2: Event<A2>,
    default2: S2,
    mut on_event2: impl FnMut(&A2) -> Option<S2> + Send + 'static,
    mut merge: impl FnMut(S0, S1, S2) -> Option<S> + Send + 'static,
) -> UiNode
where
    A0: EventArgs,
    A1: EventArgs,
    A2: EventArgs,
    S0: VarValue,
    S1: VarValue,
    S2: VarValue,
    S: VarValue,
{
    let state = state.into_var();
    let partial_default = (default0, default1, default2);
    let mut partial = partial_default.clone();

    match_node(child, move |child, op| match op {
        UiNodeOp::Init => {
            validate_getter_var(&state);
            WIDGET.sub_event(&event0).sub_event(&event1).sub_event(&event2);

            partial = partial_default.clone();
            state.set(default.clone());
        }
        UiNodeOp::Deinit => {
            state.set(default.clone());
        }
        UiNodeOp::Event { update } => {
            let mut updated = false;
            if let Some(args) = event0.on(update) {
                if let Some(state) = on_event0(args)
                    && partial.0 != state
                {
                    partial.0 = state;
                    updated = true;
                }
            } else if let Some(args) = event1.on(update) {
                if let Some(state) = on_event1(args)
                    && partial.1 != state
                {
                    partial.1 = state;
                    updated = true;
                }
            } else if let Some(args) = event2.on(update)
                && let Some(state) = on_event2(args)
                && partial.2 != state
            {
                partial.2 = state;
                updated = true;
            }
            child.event(update);

            if updated && let Some(value) = merge(partial.0.clone(), partial.1.clone(), partial.2.clone()) {
                state.set(value);
            }
        }
        _ => {}
    })
}

/// Helper for declaring state properties that depend on four other event states.
///
/// When the `event#` is received `on_event#` is called, if it provides a new value `merge` is called, if merge
/// provides a new value the `state` variable is set.
#[expect(clippy::too_many_arguments)]
pub fn event_state4<A0, A1, A2, A3, S0, S1, S2, S3, S>(
    child: impl IntoUiNode,
    state: impl IntoVar<S>,
    default: S,
    event0: Event<A0>,
    default0: S0,
    mut on_event0: impl FnMut(&A0) -> Option<S0> + Send + 'static,
    event1: Event<A1>,
    default1: S1,
    mut on_event1: impl FnMut(&A1) -> Option<S1> + Send + 'static,
    event2: Event<A2>,
    default2: S2,
    mut on_event2: impl FnMut(&A2) -> Option<S2> + Send + 'static,
    event3: Event<A3>,
    default3: S3,
    mut on_event3: impl FnMut(&A3) -> Option<S3> + Send + 'static,
    mut merge: impl FnMut(S0, S1, S2, S3) -> Option<S> + Send + 'static,
) -> UiNode
where
    A0: EventArgs,
    A1: EventArgs,
    A2: EventArgs,
    A3: EventArgs,
    S0: VarValue,
    S1: VarValue,
    S2: VarValue,
    S3: VarValue,
    S: VarValue,
{
    let state = state.into_var();
    let partial_default = (default0, default1, default2, default3);
    let mut partial = partial_default.clone();

    match_node(child, move |child, op| match op {
        UiNodeOp::Init => {
            validate_getter_var(&state);
            WIDGET.sub_event(&event0).sub_event(&event1).sub_event(&event2).sub_event(&event3);

            partial = partial_default.clone();
            state.set(default.clone());
        }
        UiNodeOp::Deinit => {
            state.set(default.clone());
        }
        UiNodeOp::Event { update } => {
            let mut updated = false;
            if let Some(args) = event0.on(update) {
                if let Some(state) = on_event0(args)
                    && partial.0 != state
                {
                    partial.0 = state;
                    updated = true;
                }
            } else if let Some(args) = event1.on(update) {
                if let Some(state) = on_event1(args)
                    && partial.1 != state
                {
                    partial.1 = state;
                    updated = true;
                }
            } else if let Some(args) = event2.on(update) {
                if let Some(state) = on_event2(args)
                    && partial.2 != state
                {
                    partial.2 = state;
                    updated = true;
                }
            } else if let Some(args) = event3.on(update)
                && let Some(state) = on_event3(args)
                && partial.3 != state
            {
                partial.3 = state;
                updated = true;
            }
            child.event(update);

            if updated && let Some(value) = merge(partial.0.clone(), partial.1.clone(), partial.2.clone(), partial.3.clone()) {
                state.set(value);
            }
        }
        _ => {}
    })
}

/// Helper for declaring state properties that are controlled by a variable.
///
/// On init the `state` variable is set to `source` and bound to it, you can use this to create state properties
/// that map from a context variable or to create composite properties that merge other state properties.
pub fn bind_state<T: VarValue>(child: impl IntoUiNode, source: impl IntoVar<T>, state: impl IntoVar<T>) -> UiNode {
    let source = source.into_var();
    let state = state.into_var();
    let mut _binding = VarHandle::dummy();

    match_node(child, move |_, op| match op {
        UiNodeOp::Init => {
            validate_getter_var(&state);
            state.set_from(&source);
            _binding = source.bind(&state);
        }
        UiNodeOp::Deinit => {
            _binding = VarHandle::dummy();
        }
        _ => {}
    })
}

/// Helper for declaring state properties that are controlled by a variable.
///
/// On init the `state` closure is called to provide a variable, the variable is set to `source` and bound to it,
/// you can use this to create state properties that map from a context variable or to create composite properties
/// that merge other state properties.
pub fn bind_state_init<T>(child: impl IntoUiNode, source: impl Fn() -> Var<T> + Send + 'static, state: impl IntoVar<T>) -> UiNode
where
    T: VarValue,
{
    let state = state.into_var();
    let mut _source_var = None;
    let mut _binding = VarHandle::dummy();

    match_node(child, move |_, op| match op {
        UiNodeOp::Init => {
            validate_getter_var(&state);
            let source = source();
            state.set_from(&source);
            _binding = source.bind(&state);
            _source_var = Some(source);
        }
        UiNodeOp::Deinit => {
            _binding = VarHandle::dummy();
            _source_var = None;
        }
        _ => {}
    })
}

/// Helper for declaring state properties that are controlled by values in the widget state map.
///
/// The `predicate` closure is called with the widget state on init and every update, if the returned value changes the `state`
/// updates. The `deinit` closure is called on deinit to get the *reset* value.
pub fn widget_state_is_state(
    child: impl IntoUiNode,
    predicate: impl Fn(StateMapRef<WIDGET>) -> bool + Send + 'static,
    deinit: impl Fn(StateMapRef<WIDGET>) -> bool + Send + 'static,
    state: impl IntoVar<bool>,
) -> UiNode {
    let state = state.into_var();

    match_node(child, move |child, op| match op {
        UiNodeOp::Init => {
            validate_getter_var(&state);
            child.init();
            let s = WIDGET.with_state(&predicate);
            if s != state.get() {
                state.set(s);
            }
        }
        UiNodeOp::Deinit => {
            child.deinit();
            let s = WIDGET.with_state(&deinit);
            if s != state.get() {
                state.set(s);
            }
        }
        UiNodeOp::Update { updates } => {
            child.update(updates);
            let s = WIDGET.with_state(&predicate);
            if s != state.get() {
                state.set(s);
            }
        }
        _ => {}
    })
}

/// Helper for declaring state getter properties that are controlled by values in the widget state map.
///
/// The `get_new` closure is called with the widget state and current `state` every init and update, if it returns some value
/// the `state` updates. The `get_deinit` closure is called on deinit to get the *reset* value.
pub fn widget_state_get_state<T: VarValue>(
    child: impl IntoUiNode,
    get_new: impl Fn(StateMapRef<WIDGET>, &T) -> Option<T> + Send + 'static,
    get_deinit: impl Fn(StateMapRef<WIDGET>, &T) -> Option<T> + Send + 'static,
    state: impl IntoVar<T>,
) -> UiNode {
    let state = state.into_var();
    match_node(child, move |child, op| match op {
        UiNodeOp::Init => {
            validate_getter_var(&state);
            child.init();
            let new = state.with(|s| WIDGET.with_state(|w| get_new(w, s)));
            if let Some(new) = new {
                state.set(new);
            }
        }
        UiNodeOp::Deinit => {
            child.deinit();

            let new = state.with(|s| WIDGET.with_state(|w| get_deinit(w, s)));
            if let Some(new) = new {
                state.set(new);
            }
        }
        UiNodeOp::Update { updates } => {
            child.update(updates);
            let new = state.with(|s| WIDGET.with_state(|w| get_new(w, s)));
            if let Some(new) = new {
                state.set(new);
            }
        }
        _ => {}
    })
}

/// Transforms and clips the `content` node according with the default widget border align behavior.
///
/// Properties that *fill* the widget can wrap their fill content in this node to automatically implement
/// the expected interaction with the widget borders, the content will be positioned, sized and clipped according to the
/// widget borders, corner radius and border align.
pub fn fill_node(content: impl IntoUiNode) -> UiNode {
    let mut clip_bounds = PxSize::zero();
    let mut clip_corners = PxCornerRadius::zero();

    let mut offset = PxVector::zero();
    let offset_key = FrameValueKey::new_unique();
    let mut define_frame = false;

    match_node(content, move |child, op| match op {
        UiNodeOp::Init => {
            WIDGET.sub_var_layout(&BORDER_ALIGN_VAR);
            define_frame = false;
            offset = PxVector::zero();
        }
        UiNodeOp::Measure { desired_size, .. } => {
            let offsets = BORDER.inner_offsets();
            let align = BORDER_ALIGN_VAR.get();

            let our_offsets = offsets * align;
            let size_offset = offsets - our_offsets;

            let size_increase = PxSize::new(size_offset.horizontal(), size_offset.vertical());

            *desired_size = LAYOUT.constraints().fill_size() + size_increase;
        }
        UiNodeOp::Layout { wl, final_size } => {
            // We are inside the *inner* bounds AND inside border_nodes:
            //
            // .. ( layout ( new_border/inner ( border_nodes ( FILL_NODES ( new_child_context ( new_child_layout ( ..

            let (bounds, corners) = BORDER.fill_bounds();

            let mut new_offset = bounds.origin.to_vector();

            if clip_bounds != bounds.size || clip_corners != corners {
                clip_bounds = bounds.size;
                clip_corners = corners;
                WIDGET.render();
            }

            let (_, branch_offset) = LAYOUT.with_constraints(PxConstraints2d::new_exact_size(bounds.size), || {
                wl.with_branch_child(|wl| child.layout(wl))
            });
            new_offset += branch_offset;

            if offset != new_offset {
                offset = new_offset;

                if define_frame {
                    WIDGET.render_update();
                } else {
                    define_frame = true;
                    WIDGET.render();
                }
            }

            *final_size = bounds.size;
        }
        UiNodeOp::Render { frame } => {
            let mut render = |frame: &mut FrameBuilder| {
                let bounds = PxRect::from_size(clip_bounds);
                frame.push_clips(
                    |c| {
                        if clip_corners != PxCornerRadius::zero() {
                            c.push_clip_rounded_rect(bounds, clip_corners, false, false);
                        } else {
                            c.push_clip_rect(bounds, false, false);
                        }

                        if let Some(inline) = WIDGET.bounds().inline() {
                            for r in inline.negative_space().iter() {
                                c.push_clip_rect(*r, true, false);
                            }
                        }
                    },
                    |f| child.render(f),
                );
            };

            if define_frame {
                frame.push_reference_frame(offset_key.into(), offset_key.bind(offset.into(), false), true, false, |frame| {
                    render(frame);
                });
            } else {
                render(frame);
            }
        }
        UiNodeOp::RenderUpdate { update } => {
            if define_frame {
                update.with_transform(offset_key.update(offset.into(), false), false, |update| {
                    child.render_update(update);
                });
            } else {
                child.render_update(update);
            }
        }
        _ => {}
    })
}

/// Creates a border node that delegates rendering to a `border_visual` and manages the `border_offsets` coordinating
/// with the other borders of the widget.
///
/// This node disables inline layout for the widget.
pub fn border_node(child: impl IntoUiNode, border_offsets: impl IntoVar<SideOffsets>, border_visual: impl IntoUiNode) -> UiNode {
    let offsets = border_offsets.into_var();
    let mut render_offsets = PxSideOffsets::zero();
    let mut border_rect = PxRect::zero();

    match_node(ui_vec![child, border_visual], move |children, op| match op {
        UiNodeOp::Init => {
            WIDGET.sub_var_layout(&offsets).sub_var_render(&BORDER_OVER_VAR);
        }
        UiNodeOp::Measure { wm, desired_size } => {
            let offsets = offsets.layout();
            *desired_size = BORDER.measure_border(offsets, || {
                LAYOUT.with_sub_size(PxSize::new(offsets.horizontal(), offsets.vertical()), || {
                    children.node().with_child(0, |n| wm.measure_block(n))
                })
            });
            children.delegated();
        }
        UiNodeOp::Layout { wl, final_size } => {
            // We are inside the *inner* bounds or inside a parent border_node:
            //
            // .. ( layout ( new_border/inner ( BORDER_NODES ( fill_nodes ( new_child_context ( new_child_layout ( ..
            //
            // `wl` is targeting the child transform, child nodes are naturally inside borders, so we
            // need to add to the offset and take the size, fill_nodes optionally cancel this transform.

            let offsets = offsets.layout();
            if render_offsets != offsets {
                render_offsets = offsets;
                WIDGET.render();
            }

            let parent_offsets = BORDER.inner_offsets();
            let origin = PxPoint::new(parent_offsets.left, parent_offsets.top);
            if border_rect.origin != origin {
                border_rect.origin = origin;
                WIDGET.render();
            }

            // layout child and border visual
            BORDER.layout_border(offsets, || {
                wl.translate(PxVector::new(offsets.left, offsets.top));

                let taken_size = PxSize::new(offsets.horizontal(), offsets.vertical());
                border_rect.size = LAYOUT.with_sub_size(taken_size, || children.node().with_child(0, |n| n.layout(wl)));

                // layout border visual
                LAYOUT.with_constraints(PxConstraints2d::new_exact_size(border_rect.size), || {
                    BORDER.with_border_layout(border_rect, offsets, || {
                        children.node().with_child(1, |n| n.layout(wl));
                    });
                });
            });
            children.delegated();

            *final_size = border_rect.size;
        }
        UiNodeOp::Render { frame } => {
            if BORDER_OVER_VAR.get() {
                children.node().with_child(0, |c| c.render(frame));
                BORDER.with_border_layout(border_rect, render_offsets, || {
                    children.node().with_child(1, |c| c.render(frame));
                });
            } else {
                BORDER.with_border_layout(border_rect, render_offsets, || {
                    children.node().with_child(1, |c| c.render(frame));
                });
                children.node().with_child(0, |c| c.render(frame));
            }
            children.delegated();
        }
        UiNodeOp::RenderUpdate { update } => {
            children.node().with_child(0, |c| c.render_update(update));
            BORDER.with_border_layout(border_rect, render_offsets, || {
                children.node().with_child(1, |c| c.render_update(update));
            });
            children.delegated();
        }
        _ => {}
    })
}

/// Helper for declaring nodes that sets a context local value.
///
/// See [`context_local!`] for more details about contextual values.
///
/// [`context_local!`]: crate::prelude::context_local
pub fn with_context_local<T: Any + Send + Sync + 'static>(
    child: impl IntoUiNode,
    context: &'static ContextLocal<T>,
    value: impl Into<T>,
) -> UiNode {
    let mut value = Some(Arc::new(value.into()));

    match_node(child, move |child, op| {
        context.with_context(&mut value, || child.op(op));
    })
}

/// Helper for declaring nodes that sets a context local value generated on init.
///
/// The method calls the `init_value` closure on init to produce a *value* var that is presented as the [`ContextLocal<T>`]
/// in the widget and widget descendants. The closure can be called more than once if the returned node is reinited.
///
/// Apart from the value initialization this behaves just like [`with_context_local`].
///
/// [`ContextLocal<T>`]: zng_app_context::ContextLocal
pub fn with_context_local_init<T: Any + Send + Sync + 'static>(
    child: impl IntoUiNode,
    context: &'static ContextLocal<T>,
    init_value: impl FnMut() -> T + Send + 'static,
) -> UiNode {
    with_context_local_init_impl(child.into_node(), context, init_value)
}
fn with_context_local_init_impl<T: Any + Send + Sync + 'static>(
    child: UiNode,
    context: &'static ContextLocal<T>,
    mut init_value: impl FnMut() -> T + Send + 'static,
) -> UiNode {
    let mut value = None;

    match_node(child, move |child, op| {
        let mut is_deinit = false;
        match &op {
            UiNodeOp::Init => {
                value = Some(Arc::new(init_value()));
            }
            UiNodeOp::Deinit => {
                is_deinit = true;
            }
            _ => {}
        }

        context.with_context(&mut value, || child.op(op));

        if is_deinit {
            value = None;
        }
    })
}

/// Helper for declaring widgets that are recontextualized to take in some of the context
/// of an *original* parent.
///
/// See [`LocalContext::with_context_blend`] for more details about `over`. The returned
/// node will delegate all node operations to inside the blend. The [`WidgetUiNode::with_context`]
/// will delegate to the `child` widget context, but the `ctx` is not blended for this method, only
/// for [`UiNodeOp`] methods.
///
/// # Warning
///
/// Properties, context vars and context locals are implemented with the assumption that all consumers have
/// released the context on return, that is even if the context was shared with worker threads all work was block-waited.
/// This node breaks this assumption, specially with `over: true` you may cause unexpected behavior if you don't consider
/// carefully what context is being captured and what context is being replaced.
///
/// As a general rule, only capture during init or update in [`NestGroup::CHILD`], only wrap full widgets and only place the wrapped
/// widget in a parent's [`NestGroup::CHILD`] for a parent that has no special expectations about the child.
///
/// As an example of things that can go wrong, if you capture during layout, the `LAYOUT` context is captured
/// and replaces `over` the actual layout context during all subsequent layouts in the actual parent.
///
/// # Panics
///
/// Panics during init if `ctx` is not from the same app as the init context.
///
/// [`NestGroup::CHILD`]: zng_app::widget::builder::NestGroup::CHILD
/// [`UiNodeOp`]: zng_app::widget::node::UiNodeOp
/// [`LocalContext::with_context_blend`]: zng_app_context::LocalContext::with_context_blend
pub fn with_context_blend(mut ctx: LocalContext, over: bool, child: impl IntoUiNode) -> UiNode {
    match_widget(child, move |c, op| {
        if let UiNodeOp::Init = op {
            let init_app = LocalContext::current_app();
            ctx.with_context_blend(over, || {
                let ctx_app = LocalContext::current_app();
                assert_eq!(init_app, ctx_app);
                c.op(op)
            });
        } else {
            ctx.with_context_blend(over, || c.op(op));
        }
    })
}

/// Helper for declaring properties that set the widget state.
///
/// The state ID is set in [`WIDGET`] on init and is kept updated. On deinit it is set to the `default` value.
///
/// # Examples
///
/// ```
/// # fn main() -> () { }
/// # use zng_app::{widget::{property, node::{UiNode, IntoUiNode}, WIDGET, WidgetUpdateMode}};
/// # use zng_var::IntoVar;
/// # use zng_wgt::node::with_widget_state;
/// # use zng_state_map::{StateId, static_id};
/// #
/// static_id! {
///     pub static ref FOO_ID: StateId<u32>;
/// }
///
/// #[property(CONTEXT)]
/// pub fn foo(child: impl IntoUiNode, value: impl IntoVar<u32>) -> UiNode {
///     with_widget_state(child, *FOO_ID, || 0, value)
/// }
///
/// // after the property is used and the widget initializes:
///
/// /// Get the value from outside the widget.
/// fn get_foo_outer(widget: &mut UiNode) -> u32 {
///     if let Some(mut wgt) = widget.as_widget() {
///         wgt.with_context(WidgetUpdateMode::Ignore, || WIDGET.get_state(*FOO_ID))
///             .unwrap_or(0)
///     } else {
///         0
///     }
/// }
///
/// /// Get the value from inside the widget.
/// fn get_foo_inner() -> u32 {
///     WIDGET.get_state(*FOO_ID).unwrap_or_default()
/// }
/// ```
///
/// [`WIDGET`]: zng_app::widget::WIDGET
pub fn with_widget_state<U, I, T>(child: U, id: impl Into<StateId<T>>, default: I, value: impl IntoVar<T>) -> UiNode
where
    U: IntoUiNode,
    I: Fn() -> T + Send + 'static,
    T: StateValue + VarValue,
{
    with_widget_state_impl(child.into_node(), id.into(), default, value.into_var())
}
fn with_widget_state_impl<I, T>(child: UiNode, id: impl Into<StateId<T>>, default: I, value: impl IntoVar<T>) -> UiNode
where
    I: Fn() -> T + Send + 'static,
    T: StateValue + VarValue,
{
    let id = id.into();
    let value = value.into_var();

    match_node(child, move |child, op| match op {
        UiNodeOp::Init => {
            child.init();
            WIDGET.sub_var(&value);
            WIDGET.set_state(id, value.get());
        }
        UiNodeOp::Deinit => {
            child.deinit();
            WIDGET.set_state(id, default());
        }
        UiNodeOp::Update { updates } => {
            child.update(updates);
            if let Some(v) = value.get_new() {
                WIDGET.set_state(id, v);
            }
        }
        _ => {}
    })
}

/// Helper for declaring properties that set the widget state with a custom closure.
///
/// The `default` closure is used to init the state value, then the `modify` closure is used to modify the state using the variable value.
///
/// On deinit the `default` value is set on the state again.
///
/// See [`with_widget_state`] for more details.
pub fn with_widget_state_modify<U, S, V, I, M>(child: U, id: impl Into<StateId<S>>, value: impl IntoVar<V>, default: I, modify: M) -> UiNode
where
    U: IntoUiNode,
    S: StateValue,
    V: VarValue,
    I: Fn() -> S + Send + 'static,
    M: FnMut(&mut S, &V) + Send + 'static,
{
    with_widget_state_modify_impl(child.into_node(), id.into(), value.into_var(), default, modify)
}
fn with_widget_state_modify_impl<S, V, I, M>(
    child: UiNode,
    id: impl Into<StateId<S>>,
    value: impl IntoVar<V>,
    default: I,
    mut modify: M,
) -> UiNode
where
    S: StateValue,
    V: VarValue,
    I: Fn() -> S + Send + 'static,
    M: FnMut(&mut S, &V) + Send + 'static,
{
    let id = id.into();
    let value = value.into_var();

    match_node(child, move |child, op| match op {
        UiNodeOp::Init => {
            child.init();

            WIDGET.sub_var(&value);

            value.with(|v| {
                WIDGET.with_state_mut(|mut s| {
                    modify(s.entry(id).or_insert_with(&default), v);
                })
            })
        }
        UiNodeOp::Deinit => {
            child.deinit();

            WIDGET.set_state(id, default());
        }
        UiNodeOp::Update { updates } => {
            child.update(updates);
            value.with_new(|v| {
                WIDGET.with_state_mut(|mut s| {
                    modify(s.req_mut(id), v);
                })
            });
        }
        _ => {}
    })
}

/// Create a node that controls interaction for all widgets inside `node`.
///
/// When the `interactive` var is `false` all descendant widgets are [`BLOCKED`].
///
/// Unlike the [`interactive`] property this does not apply to the contextual widget, only `child` and descendants.
///
/// The node works for either if the `child` is a widget or if it only contains widgets, the performance
/// is slightly better if the `child` is a widget.
///
/// [`interactive`]: fn@crate::interactive
/// [`BLOCKED`]: Interactivity::BLOCKED
pub fn interactive_node(child: impl IntoUiNode, interactive: impl IntoVar<bool>) -> UiNode {
    let interactive = interactive.into_var();

    match_node(child, move |child, op| match op {
        UiNodeOp::Init => {
            WIDGET.sub_var_info(&interactive);
        }
        UiNodeOp::Info { info } => {
            if interactive.get() {
                child.info(info);
            } else if let Some(mut wgt) = child.node().as_widget() {
                let id = wgt.id();
                // child is a widget.
                info.push_interactivity_filter(move |args| {
                    if args.info.id() == id {
                        Interactivity::BLOCKED
                    } else {
                        Interactivity::ENABLED
                    }
                });
                child.info(info);
            } else {
                let block_range = info.with_children_range(|info| child.info(info));
                if !block_range.is_empty() {
                    // has child widgets.

                    let id = WIDGET.id();
                    info.push_interactivity_filter(move |args| {
                        if let Some(parent) = args.info.parent()
                            && parent.id() == id
                        {
                            // check child range
                            for (i, item) in parent.children().enumerate() {
                                if item == args.info {
                                    return if !block_range.contains(&i) {
                                        Interactivity::ENABLED
                                    } else {
                                        Interactivity::BLOCKED
                                    };
                                } else if i >= block_range.end {
                                    break;
                                }
                            }
                        }
                        Interactivity::ENABLED
                    });
                }
            }
        }
        _ => {}
    })
}

/// Helper for a property that gets the index of the widget in the parent panel.
///
/// See [`with_index_len_node`] for more details.
pub fn with_index_node(
    child: impl IntoUiNode,
    panel_list_id: impl Into<StateId<PanelListRange>>,
    mut update: impl FnMut(Option<usize>) + Send + 'static,
) -> UiNode {
    let panel_list_id = panel_list_id.into();
    let mut version = None;
    match_node(child, move |_, op| match op {
        UiNodeOp::Deinit => {
            update(None);
            version = None;
        }
        UiNodeOp::Update { .. } => {
            // parent PanelList requests updates for this widget every time there is an update.
            let info = WIDGET.info();
            if let Some(parent) = info.parent()
                && let Some(mut c) = PanelListRange::update(&parent, panel_list_id, &mut version)
            {
                let id = info.id();
                let p = c.position(|w| w.id() == id);
                update(p);
            }
        }
        _ => {}
    })
}

/// Helper for a property that gets the reverse index of the widget in the parent panel.
///
/// See [`with_index_len_node`] for more details.
pub fn with_rev_index_node(
    child: impl IntoUiNode,
    panel_list_id: impl Into<StateId<PanelListRange>>,
    mut update: impl FnMut(Option<usize>) + Send + 'static,
) -> UiNode {
    let panel_list_id = panel_list_id.into();
    let mut version = None;
    match_node(child, move |_, op| match op {
        UiNodeOp::Deinit => {
            update(None);
            version = None;
        }
        UiNodeOp::Update { .. } => {
            let info = WIDGET.info();
            if let Some(parent) = info.parent()
                && let Some(c) = PanelListRange::update(&parent, panel_list_id, &mut version)
            {
                let id = info.id();
                let p = c.rev().position(|w| w.id() == id);
                update(p);
            }
        }
        _ => {}
    })
}

/// Helper for a property that gets the index of the widget in the parent panel and the number of children.
///  
/// Panels must use [`PanelList::track_info_range`] to collect the `panel_list_id`, then implement getter properties
/// using the methods in this module. See the `stack!` getter properties for examples.
///
/// [`PanelList::track_info_range`]: zng_app::widget::node::PanelList::track_info_range
pub fn with_index_len_node(
    child: impl IntoUiNode,
    panel_list_id: impl Into<StateId<PanelListRange>>,
    mut update: impl FnMut(Option<(usize, usize)>) + Send + 'static,
) -> UiNode {
    let panel_list_id = panel_list_id.into();
    let mut version = None;
    match_node(child, move |_, op| match op {
        UiNodeOp::Deinit => {
            update(None);
            version = None;
        }
        UiNodeOp::Update { .. } => {
            let info = WIDGET.info();
            if let Some(parent) = info.parent()
                && let Some(mut iter) = PanelListRange::update(&parent, panel_list_id, &mut version)
            {
                let id = info.id();
                let mut p = 0;
                let mut count = 0;
                for c in &mut iter {
                    if c.id() == id {
                        p = count;
                        count += 1 + iter.count();
                        break;
                    } else {
                        count += 1;
                    }
                }
                update(Some((p, count)));
            }
        }
        _ => {}
    })
}

/// Node that presents `data` using `wgt_fn`.
///
/// The node's child is always the result of `wgt_fn` called for the `data` value, it is reinited every time
/// either variable changes.
///
/// See also [`presenter_opt`] for a presenter that is nil with the data is `None`.
///
/// See also the [`present`](VarPresent::present) method that can be called on the `data`` variable and [`present_data`](VarPresentData::present_data)
/// that can be called on the `wgt_fn` variable.
pub fn presenter<D: VarValue>(data: impl IntoVar<D>, wgt_fn: impl IntoVar<WidgetFn<D>>) -> UiNode {
    let data = data.into_var();
    let wgt_fn = wgt_fn.into_var();

    match_node(UiNode::nil(), move |c, op| match op {
        UiNodeOp::Init => {
            WIDGET.sub_var(&data).sub_var(&wgt_fn);
            *c.node() = wgt_fn.get()(data.get());
        }
        UiNodeOp::Deinit => {
            c.deinit();
            *c.node() = UiNode::nil();
        }
        UiNodeOp::Update { .. } => {
            if data.is_new() || wgt_fn.is_new() {
                c.node().deinit();
                *c.node() = wgt_fn.get()(data.get());
                c.node().init();
                c.delegated();
                WIDGET.update_info().layout().render();
            }
        }
        _ => {}
    })
}

/// Node that presents `data` using `wgt_fn` if data is available, otherwise presents nil.
///
/// This behaves like [`presenter`], but `wgt_fn` is not called if `data` is `None`.
///
/// See also the [`present_opt`](VarPresentOpt::present_opt) method that can be called on the data variable.
pub fn presenter_opt<D: VarValue>(data: impl IntoVar<Option<D>>, wgt_fn: impl IntoVar<WidgetFn<D>>) -> UiNode {
    let data = data.into_var();
    let wgt_fn = wgt_fn.into_var();

    match_node(UiNode::nil(), move |c, op| match op {
        UiNodeOp::Init => {
            WIDGET.sub_var(&data).sub_var(&wgt_fn);
            if let Some(data) = data.get() {
                *c.node() = wgt_fn.get()(data);
            }
        }
        UiNodeOp::Deinit => {
            c.deinit();
            *c.node() = UiNode::nil();
        }
        UiNodeOp::Update { .. } => {
            if data.is_new() || wgt_fn.is_new() {
                if let Some(data) = data.get() {
                    c.node().deinit();
                    *c.node() = wgt_fn.get()(data);
                    c.node().init();
                    c.delegated();
                    WIDGET.update_info().layout().render();
                } else if !c.node().is_nil() {
                    c.node().deinit();
                    *c.node() = UiNode::nil();
                    c.delegated();
                    WIDGET.update_info().layout().render();
                }
            }
        }
        _ => {}
    })
}

/// Node list that presents `list` using `item_fn` for each new list item.
///
/// The node's children is the list mapped to node items, it is kept in sync, any list update is propagated to the node list.
///
/// See also the [`present_list`](VarPresentList::present_list) method that can be called on the list variable.
pub fn list_presenter<D: VarValue>(list: impl IntoVar<ObservableVec<D>>, item_fn: impl IntoVar<WidgetFn<D>>) -> UiNode {
    ListPresenter {
        list: list.into_var(),
        item_fn: item_fn.into_var(),
        view: ui_vec![],
        _e: std::marker::PhantomData,
    }
    .into_node()
}

/// Node list that presents `list` using `item_fn` for each list item.
///
/// The node's children are **regenerated** for each change in `list`, if possible prefer using [`ObservableVec`] with [`list_presenter`].
///
/// See also the [`present_list_from_iter`](VarPresentListFromIter::present_list_from_iter) method that can be called on the list variable.
pub fn list_presenter_from_iter<D, L>(list: impl IntoVar<L>, item_fn: impl IntoVar<WidgetFn<D>>) -> UiNode
where
    D: VarValue,
    L: IntoIterator<Item = D> + VarValue,
{
    ListPresenterFromIter {
        list: list.into_var(),
        item_fn: item_fn.into_var(),
        view: ui_vec![],
        _e: std::marker::PhantomData,
    }
    .into_node()
}

struct ListPresenter<D>
where
    D: VarValue,
{
    list: Var<ObservableVec<D>>,
    item_fn: Var<WidgetFn<D>>,
    view: UiVec,
    _e: std::marker::PhantomData<D>,
}

impl<D> UiNodeImpl for ListPresenter<D>
where
    D: VarValue,
{
    fn children_len(&self) -> usize {
        self.view.len()
    }

    fn with_child(&mut self, index: usize, visitor: &mut dyn FnMut(&mut UiNode)) {
        self.view.with_child(index, visitor)
    }

    fn is_list(&self) -> bool {
        true
    }

    fn for_each_child(&mut self, visitor: &mut dyn FnMut(usize, &mut UiNode)) {
        self.view.for_each_child(visitor);
    }

    fn try_for_each_child(
        &mut self,
        visitor: &mut dyn FnMut(usize, &mut UiNode) -> std::ops::ControlFlow<BoxAnyVarValue>,
    ) -> std::ops::ControlFlow<BoxAnyVarValue> {
        self.view.try_for_each_child(visitor)
    }

    fn par_each_child(&mut self, visitor: &(dyn Fn(usize, &mut UiNode) + Sync)) {
        self.view.par_each_child(visitor);
    }

    fn par_fold_reduce(
        &mut self,
        identity: BoxAnyVarValue,
        fold: &(dyn Fn(BoxAnyVarValue, usize, &mut UiNode) -> BoxAnyVarValue + Sync),
        reduce: &(dyn Fn(BoxAnyVarValue, BoxAnyVarValue) -> BoxAnyVarValue + Sync),
    ) -> BoxAnyVarValue {
        self.view.par_fold_reduce(identity, fold, reduce)
    }

    fn init(&mut self) {
        debug_assert!(self.view.is_empty());
        self.view.clear();

        WIDGET.sub_var(&self.list).sub_var(&self.item_fn);

        let e_fn = self.item_fn.get();
        self.list.with(|l| {
            for el in l.iter() {
                let child = e_fn(el.clone());
                self.view.push(child);
            }
        });

        self.view.init();
    }

    fn deinit(&mut self) {
        self.view.deinit();
        self.view.clear();
    }

    fn update(&mut self, updates: &WidgetUpdates) {
        self.update_list(updates, &mut ());
    }

    fn update_list(&mut self, updates: &WidgetUpdates, observer: &mut dyn UiNodeListObserver) {
        let mut need_reset = self.item_fn.is_new();

        let is_new = self
            .list
            .with_new(|l| {
                need_reset |= l.changes().is_empty() || l.changes() == [VecChange::Clear];

                if need_reset {
                    return;
                }

                // update before new items to avoid update before init.
                self.view.update_list(updates, observer);

                let e_fn = self.item_fn.get();

                for change in l.changes() {
                    match change {
                        VecChange::Insert { index, count } => {
                            for i in *index..(*index + count) {
                                let mut el = e_fn(l[i].clone());
                                el.init();
                                self.view.insert(i, el);
                                observer.inserted(i);
                            }
                        }
                        VecChange::Remove { index, count } => {
                            let mut count = *count;
                            let index = *index;
                            while count > 0 {
                                count -= 1;

                                let mut el = self.view.remove(index);
                                el.deinit();
                                observer.removed(index);
                            }
                        }
                        VecChange::Move { from_index, to_index } => {
                            let el = self.view.remove(*from_index);
                            self.view.insert(*to_index, el);
                            observer.moved(*from_index, *to_index);
                        }
                        VecChange::Clear => unreachable!(),
                    }
                }
            })
            .is_some();

        if !need_reset && !is_new && self.list.with(|l| l.len() != self.view.len()) {
            need_reset = true;
        }

        if need_reset {
            self.view.deinit();
            self.view.clear();

            let e_fn = self.item_fn.get();
            self.list.with(|l| {
                for el in l.iter() {
                    let child = e_fn(el.clone());
                    self.view.push(child);
                }
            });

            self.view.init();
        } else if !is_new {
            self.view.update_list(updates, observer);
        }
    }

    fn info(&mut self, info: &mut zng_app::widget::info::WidgetInfoBuilder) {
        self.view.info(info);
    }

    fn event(&mut self, update: &zng_app::update::EventUpdate) {
        self.view.event(update);
    }

    fn measure(&mut self, wm: &mut zng_app::widget::info::WidgetMeasure) -> PxSize {
        self.view.measure(wm)
    }

    fn measure_list(
        &mut self,
        wm: &mut zng_app::widget::info::WidgetMeasure,
        measure: &(dyn Fn(usize, &mut UiNode, &mut zng_app::widget::info::WidgetMeasure) -> PxSize + Sync),
        fold_size: &(dyn Fn(PxSize, PxSize) -> PxSize + Sync),
    ) -> PxSize {
        self.view.measure_list(wm, measure, fold_size)
    }

    fn layout(&mut self, wl: &mut zng_app::widget::info::WidgetLayout) -> PxSize {
        self.view.layout(wl)
    }

    fn layout_list(
        &mut self,
        wl: &mut zng_app::widget::info::WidgetLayout,
        layout: &(dyn Fn(usize, &mut UiNode, &mut zng_app::widget::info::WidgetLayout) -> PxSize + Sync),
        fold_size: &(dyn Fn(PxSize, PxSize) -> PxSize + Sync),
    ) -> PxSize {
        self.view.layout_list(wl, layout, fold_size)
    }

    fn render(&mut self, frame: &mut FrameBuilder) {
        self.view.render(frame);
    }

    fn render_list(&mut self, frame: &mut FrameBuilder, render: &(dyn Fn(usize, &mut UiNode, &mut FrameBuilder) + Sync)) {
        self.view.render_list(frame, render);
    }

    fn render_update(&mut self, update: &mut zng_app::render::FrameUpdate) {
        self.view.render_update(update);
    }

    fn render_update_list(
        &mut self,
        update: &mut zng_app::render::FrameUpdate,
        render_update: &(dyn Fn(usize, &mut UiNode, &mut zng_app::render::FrameUpdate) + Sync),
    ) {
        self.view.render_update_list(update, render_update);
    }

    fn as_widget(&mut self) -> Option<&mut dyn WidgetUiNodeImpl> {
        None
    }
}

struct ListPresenterFromIter<D, L>
where
    D: VarValue,
    L: IntoIterator<Item = D> + VarValue,
{
    list: Var<L>,
    item_fn: Var<WidgetFn<D>>,
    view: UiVec,
    _e: std::marker::PhantomData<(D, L)>,
}

impl<D, L> UiNodeImpl for ListPresenterFromIter<D, L>
where
    D: VarValue,
    L: IntoIterator<Item = D> + VarValue,
{
    fn children_len(&self) -> usize {
        self.view.len()
    }

    fn with_child(&mut self, index: usize, visitor: &mut dyn FnMut(&mut UiNode)) {
        self.view.with_child(index, visitor)
    }

    fn for_each_child(&mut self, visitor: &mut dyn FnMut(usize, &mut UiNode)) {
        self.view.for_each_child(visitor)
    }

    fn try_for_each_child(
        &mut self,
        visitor: &mut dyn FnMut(usize, &mut UiNode) -> std::ops::ControlFlow<BoxAnyVarValue>,
    ) -> std::ops::ControlFlow<BoxAnyVarValue> {
        self.view.try_for_each_child(visitor)
    }

    fn par_each_child(&mut self, visitor: &(dyn Fn(usize, &mut UiNode) + Sync)) {
        self.view.par_each_child(visitor);
    }

    fn par_fold_reduce(
        &mut self,
        identity: BoxAnyVarValue,
        fold: &(dyn Fn(BoxAnyVarValue, usize, &mut UiNode) -> BoxAnyVarValue + Sync),
        reduce: &(dyn Fn(BoxAnyVarValue, BoxAnyVarValue) -> BoxAnyVarValue + Sync),
    ) -> BoxAnyVarValue {
        self.view.par_fold_reduce(identity, fold, reduce)
    }

    fn is_list(&self) -> bool {
        true
    }

    fn init(&mut self) {
        debug_assert!(self.view.is_empty());
        self.view.clear();

        WIDGET.sub_var(&self.list).sub_var(&self.item_fn);

        let e_fn = self.item_fn.get();

        self.view.extend(self.list.get().into_iter().map(&*e_fn));
        self.view.init();
    }

    fn deinit(&mut self) {
        self.view.deinit();
        self.view.clear();
    }

    fn update(&mut self, updates: &WidgetUpdates) {
        self.update_list(updates, &mut ())
    }
    fn update_list(&mut self, updates: &WidgetUpdates, observer: &mut dyn UiNodeListObserver) {
        if self.list.is_new() || self.item_fn.is_new() {
            self.view.deinit();
            self.view.clear();
            let e_fn = self.item_fn.get();
            self.view.extend(self.list.get().into_iter().map(&*e_fn));
            self.view.init();
            observer.reset();
        } else {
            self.view.update_list(updates, observer);
        }
    }

    fn info(&mut self, info: &mut zng_app::widget::info::WidgetInfoBuilder) {
        self.view.info(info)
    }

    fn event(&mut self, update: &zng_app::update::EventUpdate) {
        self.view.event(update);
    }

    fn measure(&mut self, wm: &mut zng_app::widget::info::WidgetMeasure) -> PxSize {
        self.view.measure(wm)
    }

    fn measure_list(
        &mut self,
        wm: &mut zng_app::widget::info::WidgetMeasure,
        measure: &(dyn Fn(usize, &mut UiNode, &mut zng_app::widget::info::WidgetMeasure) -> PxSize + Sync),
        fold_size: &(dyn Fn(PxSize, PxSize) -> PxSize + Sync),
    ) -> PxSize {
        self.view.measure_list(wm, measure, fold_size)
    }

    fn layout(&mut self, wl: &mut zng_app::widget::info::WidgetLayout) -> PxSize {
        self.view.layout(wl)
    }

    fn layout_list(
        &mut self,
        wl: &mut zng_app::widget::info::WidgetLayout,
        layout: &(dyn Fn(usize, &mut UiNode, &mut zng_app::widget::info::WidgetLayout) -> PxSize + Sync),
        fold_size: &(dyn Fn(PxSize, PxSize) -> PxSize + Sync),
    ) -> PxSize {
        self.view.layout_list(wl, layout, fold_size)
    }

    fn render(&mut self, frame: &mut FrameBuilder) {
        self.view.render(frame);
    }

    fn render_list(&mut self, frame: &mut FrameBuilder, render: &(dyn Fn(usize, &mut UiNode, &mut FrameBuilder) + Sync)) {
        self.view.render_list(frame, render);
    }

    fn render_update(&mut self, update: &mut zng_app::render::FrameUpdate) {
        self.view.render_update(update);
    }

    fn render_update_list(
        &mut self,
        update: &mut zng_app::render::FrameUpdate,
        render_update: &(dyn Fn(usize, &mut UiNode, &mut zng_app::render::FrameUpdate) + Sync),
    ) {
        self.view.render_update_list(update, render_update);
    }

    fn as_widget(&mut self) -> Option<&mut dyn WidgetUiNodeImpl> {
        None
    }
}

/// Extension method to *convert* a variable to a node.
pub trait VarPresent<D: VarValue> {
    /// Present the variable data using a [`presenter`] node.
    fn present(&self, wgt_fn: impl IntoVar<WidgetFn<D>>) -> UiNode;
}
impl<D: VarValue> VarPresent<D> for Var<D> {
    fn present(&self, wgt_fn: impl IntoVar<WidgetFn<D>>) -> UiNode {
        presenter(self.clone(), wgt_fn)
    }
}

/// Extension method to *convert* a variable to a node.
pub trait VarPresentOpt<D: VarValue> {
    /// Present the variable data using a [`presenter_opt`] node.
    fn present_opt(&self, wgt_fn: impl IntoVar<WidgetFn<D>>) -> UiNode;
}
impl<D: VarValue> VarPresentOpt<D> for Var<Option<D>> {
    fn present_opt(&self, wgt_fn: impl IntoVar<WidgetFn<D>>) -> UiNode {
        presenter_opt(self.clone(), wgt_fn)
    }
}

/// Extension method fo *convert* a variable to a node list.
pub trait VarPresentList<D: VarValue> {
    /// Present the variable data using a [`list_presenter`] node list.
    fn present_list(&self, wgt_fn: impl IntoVar<WidgetFn<D>>) -> UiNode;
}
impl<D: VarValue> VarPresentList<D> for Var<ObservableVec<D>> {
    fn present_list(&self, wgt_fn: impl IntoVar<WidgetFn<D>>) -> UiNode {
        list_presenter(self.clone(), wgt_fn)
    }
}

/// Extension method fo *convert* a variable to a node list.
pub trait VarPresentListFromIter<D: VarValue, L: IntoIterator<Item = D> + VarValue> {
    /// Present the variable data using a [`list_presenter_from_iter`] node list.
    fn present_list_from_iter(&self, wgt_fn: impl IntoVar<WidgetFn<D>>) -> UiNode;
}
impl<D: VarValue, L: IntoIterator<Item = D> + VarValue> VarPresentListFromIter<D, L> for Var<L> {
    fn present_list_from_iter(&self, wgt_fn: impl IntoVar<WidgetFn<D>>) -> UiNode {
        list_presenter_from_iter(self.clone(), wgt_fn)
    }
}

/// Extension method to *convert* a variable to a node.
pub trait VarPresentData<D: VarValue> {
    /// Present the `data` variable using a [`presenter`] node.
    fn present_data(&self, data: impl IntoVar<D>) -> UiNode;
}
impl<D: VarValue> VarPresentData<D> for Var<WidgetFn<D>> {
    fn present_data(&self, data: impl IntoVar<D>) -> UiNode {
        presenter(data, self.clone())
    }
}

#[doc(inline)]
pub use crate::command_property;
#[doc(inline)]
pub use crate::event_property;