Merge branch 'gpui2-element-renderer' into zed2

crates/copilot2/src/sign_in.rs

@@ -106,7 +106,7 @@
 //         data: &PromptUserDeviceFlow,
 //         style: &theme::Copilot,
 //         cx: &mut ViewContext<Self>,
-//     ) -> impl Element<Self> {
+//     ) -> impl IntoAnyElement<Self> {
 //         let copied = cx
 //             .read_from_clipboard()
 //             .map(|item| item.text() == &data.user_code)

crates/gpui2/src/element.rs

@@ -3,36 +3,37 @@ use derive_more::{Deref, DerefMut};
 pub(crate) use smallvec::SmallVec;
 use std::{any::Any, mem};
 
-pub trait Element: IntoAnyElement<Self::ViewState> {
-    type ViewState: 'static;
+pub trait Element<V: 'static> {
     type ElementState: 'static;
 
     fn id(&self) -> Option<ElementId>;
 
+    /// Called to initialize this element for the current frame. If this
+    /// element had state in a previous frame, it will be passed in for the 3rd argument.
     fn initialize(
         &mut self,
-        view_state: &mut Self::ViewState,
+        view_state: &mut V,
         element_state: Option<Self::ElementState>,
-        cx: &mut ViewContext<Self::ViewState>,
+        cx: &mut ViewContext<V>,
     ) -> Self::ElementState;
     // where
-    //     Self::ViewState: Any + Send + Sync;
+    //     V: Any + Send + Sync;
 
     fn layout(
         &mut self,
-        view_state: &mut Self::ViewState,
+        view_state: &mut V,
         element_state: &mut Self::ElementState,
-        cx: &mut ViewContext<Self::ViewState>,
+        cx: &mut ViewContext<V>,
     ) -> LayoutId;
     // where
-    //     Self::ViewState: Any + Send + Sync;
+    //     V: Any + Send + Sync;
 
     fn paint(
         &mut self,
         bounds: Bounds<Pixels>,
-        view_state: &mut Self::ViewState,
+        view_state: &mut V,
         element_state: &mut Self::ElementState,
-        cx: &mut ViewContext<Self::ViewState>,
+        cx: &mut ViewContext<V>,
     );
 
     // where
@@ -42,26 +43,23 @@ pub trait Element: IntoAnyElement<Self::ViewState> {
 #[derive(Deref, DerefMut, Default, Clone, Debug, Eq, PartialEq, Hash)]
 pub struct GlobalElementId(SmallVec<[ElementId; 32]>);
 
-pub trait ParentElement: Element {
-    fn children_mut(&mut self) -> &mut SmallVec<[AnyElement<Self::ViewState>; 2]>;
+pub trait ParentElement<V: 'static> {
+    fn children_mut(&mut self) -> &mut SmallVec<[AnyElement<V>; 2]>;
 
-    fn child(mut self, child: impl IntoAnyElement<Self::ViewState>) -> Self
+    fn child(mut self, child: impl Component<V>) -> Self
     where
         Self: Sized,
     {
-        self.children_mut().push(child.into_any());
+        self.children_mut().push(child.render());
         self
     }
 
-    fn children(
-        mut self,
-        iter: impl IntoIterator<Item = impl IntoAnyElement<Self::ViewState>>,
-    ) -> Self
+    fn children(mut self, iter: impl IntoIterator<Item = impl Component<V>>) -> Self
     where
         Self: Sized,
     {
         self.children_mut()
-            .extend(iter.into_iter().map(|item| item.into_any()));
+            .extend(iter.into_iter().map(|item| item.render()));
         self
     }
 }
@@ -72,7 +70,7 @@ trait ElementObject<V> {
     fn paint(&mut self, view_state: &mut V, cx: &mut ViewContext<V>);
 }
 
-struct RenderedElement<E: Element> {
+struct RenderedElement<V: 'static, E: Element<V>> {
     element: E,
     phase: ElementRenderPhase<E::ElementState>,
 }
@@ -94,7 +92,7 @@ enum ElementRenderPhase<V> {
 /// Internal struct that wraps an element to store Layout and ElementState after the element is rendered.
 /// It's allocated as a trait object to erase the element type and wrapped in AnyElement<E::State> for
 /// improved usability.
-impl<E: Element> RenderedElement<E> {
+impl<V, E: Element<V>> RenderedElement<V, E> {
     fn new(element: E) -> Self {
         RenderedElement {
             element,
@@ -103,13 +101,13 @@ impl<E: Element> RenderedElement<E> {
     }
 }
 
-impl<E> ElementObject<E::ViewState> for RenderedElement<E>
+impl<V, E> ElementObject<V> for RenderedElement<V, E>
 where
-    E: Element,
+    E: Element<V>,
     // E::ViewState: Any + Send + Sync,
     E::ElementState: Any + Send + Sync,
 {
-    fn initialize(&mut self, view_state: &mut E::ViewState, cx: &mut ViewContext<E::ViewState>) {
+    fn initialize(&mut self, view_state: &mut V, cx: &mut ViewContext<V>) {
         let frame_state = if let Some(id) = self.element.id() {
             cx.with_element_state(id, |element_state, cx| {
                 let element_state = self.element.initialize(view_state, element_state, cx);
@@ -124,7 +122,7 @@ where
         self.phase = ElementRenderPhase::Initialized { frame_state };
     }
 
-    fn layout(&mut self, state: &mut E::ViewState, cx: &mut ViewContext<E::ViewState>) -> LayoutId {
+    fn layout(&mut self, state: &mut V, cx: &mut ViewContext<V>) -> LayoutId {
         let layout_id;
         let mut frame_state;
         match mem::take(&mut self.phase) {
@@ -154,7 +152,7 @@ where
         layout_id
     }
 
-    fn paint(&mut self, view_state: &mut E::ViewState, cx: &mut ViewContext<E::ViewState>) {
+    fn paint(&mut self, view_state: &mut V, cx: &mut ViewContext<V>) {
         self.phase = match mem::take(&mut self.phase) {
             ElementRenderPhase::LayoutRequested {
                 layout_id,
@@ -182,11 +180,15 @@ where
 
 pub struct AnyElement<V>(Box<dyn ElementObject<V> + Send + Sync>);
 
+unsafe impl<V> Send for AnyElement<V> {}
+unsafe impl<V> Sync for AnyElement<V> {}
+
 impl<V> AnyElement<V> {
     pub fn new<E>(element: E) -> Self
     where
+        V: 'static,
         E: 'static + Send + Sync,
-        E: Element<ViewState = V>,
+        E: Element<V>,
         E::ElementState: Any + Send + Sync,
     {
         AnyElement(Box::new(RenderedElement::new(element)))
@@ -205,12 +207,88 @@ impl<V> AnyElement<V> {
     }
 }
 
-pub trait IntoAnyElement<V> {
-    fn into_any(self) -> AnyElement<V>;
-}
+pub trait Component<V> {
+    fn render(self) -> AnyElement<V>;
 
-impl<V> IntoAnyElement<V> for AnyElement<V> {
-    fn into_any(self) -> AnyElement<V> {
+    fn when(mut self, condition: bool, then: impl FnOnce(Self) -> Self) -> Self
+    where
+        Self: Sized,
+    {
+        if condition {
+            self = then(self);
+        }
         self
     }
 }
+
+impl<V> Component<V> for AnyElement<V> {
+    fn render(self) -> AnyElement<V> {
+        self
+    }
+}
+
+impl<V, E, F> Element<V> for Option<F>
+where
+    V: 'static,
+    E: 'static + Component<V> + Send + Sync,
+    F: FnOnce(&mut V, &mut ViewContext<'_, '_, V>) -> E + Send + Sync + 'static,
+{
+    type ElementState = AnyElement<V>;
+
+    fn id(&self) -> Option<ElementId> {
+        None
+    }
+
+    fn initialize(
+        &mut self,
+        view_state: &mut V,
+        _rendered_element: Option<Self::ElementState>,
+        cx: &mut ViewContext<V>,
+    ) -> Self::ElementState {
+        let render = self.take().unwrap();
+        let mut rendered_element = (render)(view_state, cx).render();
+        rendered_element.initialize(view_state, cx);
+        rendered_element
+    }
+
+    fn layout(
+        &mut self,
+        view_state: &mut V,
+        rendered_element: &mut Self::ElementState,
+        cx: &mut ViewContext<V>,
+    ) -> LayoutId {
+        rendered_element.layout(view_state, cx)
+    }
+
+    fn paint(
+        &mut self,
+        _bounds: Bounds<Pixels>,
+        view_state: &mut V,
+        rendered_element: &mut Self::ElementState,
+        cx: &mut ViewContext<V>,
+    ) {
+        rendered_element.paint(view_state, cx)
+    }
+}
+
+impl<V, E, F> Component<V> for Option<F>
+where
+    V: 'static,
+    E: 'static + Component<V> + Send + Sync,
+    F: FnOnce(&mut V, &mut ViewContext<'_, '_, V>) -> E + Send + Sync + 'static,
+{
+    fn render(self) -> AnyElement<V> {
+        AnyElement::new(self)
+    }
+}
+
+impl<V, E, F> Component<V> for F
+where
+    V: 'static,
+    E: 'static + Component<V> + Send + Sync,
+    F: FnOnce(&mut V, &mut ViewContext<'_, '_, V>) -> E + Send + Sync + 'static,
+{
+    fn render(self) -> AnyElement<V> {
+        AnyElement::new(Some(self))
+    }
+}

crates/gpui2/src/elements/div.rs

@@ -1,7 +1,7 @@
 use crate::{
-    point, AnyElement, BorrowWindow, Bounds, Element, ElementFocus, ElementId, ElementInteraction,
-    FocusDisabled, FocusEnabled, FocusHandle, FocusListeners, Focusable, GlobalElementId,
-    GroupBounds, InteractiveElementState, IntoAnyElement, LayoutId, Overflow, ParentElement,
+    point, AnyElement, BorrowWindow, Bounds, Component, Element, ElementFocus, ElementId,
+    ElementInteraction, FocusDisabled, FocusEnabled, FocusHandle, FocusListeners, Focusable,
+    GlobalElementId, GroupBounds, InteractiveElementState, LayoutId, Overflow, ParentElement,
     Pixels, Point, SharedString, StatefulInteraction, StatefulInteractive, StatelessInteraction,
     StatelessInteractive, Style, StyleRefinement, Styled, ViewContext,
 };
@@ -160,7 +160,7 @@ impl<V: 'static> Div<V, StatelessInteraction<V>, FocusDisabled> {
     }
 }
 
-impl<V, I> Focusable for Div<V, I, FocusEnabled<V>>
+impl<V, I> Focusable<V> for Div<V, I, FocusEnabled<V>>
 where
     V: 'static,
     I: ElementInteraction<V>,
@@ -189,12 +189,11 @@ pub struct DivState {
     child_layout_ids: SmallVec<[LayoutId; 4]>,
 }
 
-impl<V, I, F> Element for Div<V, I, F>
+impl<V, I, F> Element<V> for Div<V, I, F>
 where
     I: ElementInteraction<V>,
     F: ElementFocus<V>,
 {
-    type ViewState = V;
     type ElementState = DivState;
 
     fn id(&self) -> Option<ElementId> {
@@ -205,9 +204,9 @@ where
 
     fn initialize(
         &mut self,
-        view_state: &mut Self::ViewState,
+        view_state: &mut V,
         element_state: Option<Self::ElementState>,
-        cx: &mut ViewContext<Self::ViewState>,
+        cx: &mut ViewContext<V>,
     ) -> Self::ElementState {
         let mut element_state = element_state.unwrap_or_default();
         self.focus
@@ -224,9 +223,9 @@ where
 
     fn layout(
         &mut self,
-        view_state: &mut Self::ViewState,
+        view_state: &mut V,
         element_state: &mut Self::ElementState,
-        cx: &mut ViewContext<Self::ViewState>,
+        cx: &mut ViewContext<V>,
     ) -> LayoutId {
         let style = self.compute_style(Bounds::default(), element_state, cx);
         style.apply_text_style(cx, |cx| {
@@ -245,9 +244,9 @@ where
     fn paint(
         &mut self,
         bounds: Bounds<Pixels>,
-        view_state: &mut Self::ViewState,
+        view_state: &mut V,
         element_state: &mut Self::ElementState,
-        cx: &mut ViewContext<Self::ViewState>,
+        cx: &mut ViewContext<V>,
     ) {
         self.with_element_id(cx, |this, _global_id, cx| {
             if let Some(group) = this.group.clone() {
@@ -304,23 +303,23 @@ where
     }
 }
 
-impl<V, I, F> IntoAnyElement<V> for Div<V, I, F>
+impl<V, I, F> Component<V> for Div<V, I, F>
 where
     // V: Any + Send + Sync,
     I: ElementInteraction<V>,
     F: ElementFocus<V>,
 {
-    fn into_any(self) -> AnyElement<V> {
+    fn render(self) -> AnyElement<V> {
         AnyElement::new(self)
     }
 }
 
-impl<V, I, F> ParentElement for Div<V, I, F>
+impl<V, I, F> ParentElement<V> for Div<V, I, F>
 where
     I: ElementInteraction<V>,
     F: ElementFocus<V>,
 {
-    fn children_mut(&mut self) -> &mut SmallVec<[AnyElement<Self::ViewState>; 2]> {
+    fn children_mut(&mut self) -> &mut SmallVec<[AnyElement<V>; 2]> {
         &mut self.children
     }
 }
@@ -335,7 +334,7 @@ where
     }
 }
 
-impl<V, I, F> StatelessInteractive for Div<V, I, F>
+impl<V, I, F> StatelessInteractive<V> for Div<V, I, F>
 where
     I: ElementInteraction<V>,
     F: ElementFocus<V>,
@@ -345,11 +344,11 @@ where
     }
 }
 
-impl<V, F> StatefulInteractive for Div<V, StatefulInteraction<V>, F>
+impl<V, F> StatefulInteractive<V> for Div<V, StatefulInteraction<V>, F>
 where
     F: ElementFocus<V>,
 {
-    fn stateful_interaction(&mut self) -> &mut StatefulInteraction<Self::ViewState> {
+    fn stateful_interaction(&mut self) -> &mut StatefulInteraction<V> {
         &mut self.interaction
     }
 }

crates/gpui2/src/elements/img.rs

@@ -1,6 +1,6 @@
 use crate::{
-    div, AnyElement, BorrowWindow, Bounds, Div, DivState, Element, ElementFocus, ElementId,
-    ElementInteraction, FocusDisabled, FocusEnabled, FocusListeners, Focusable, IntoAnyElement,
+    div, AnyElement, BorrowWindow, Bounds, Component, Div, DivState, Element, ElementFocus,
+    ElementId, ElementInteraction, FocusDisabled, FocusEnabled, FocusListeners, Focusable,
     LayoutId, Pixels, SharedString, StatefulInteraction, StatefulInteractive, StatelessInteraction,
     StatelessInteractive, StyleRefinement, Styled, ViewContext,
 };
@@ -55,22 +55,21 @@ where
     }
 }
 
-impl<V, I, F> IntoAnyElement<V> for Img<V, I, F>
+impl<V, I, F> Component<V> for Img<V, I, F>
 where
     I: ElementInteraction<V>,
     F: ElementFocus<V>,
 {
-    fn into_any(self) -> AnyElement<V> {
+    fn render(self) -> AnyElement<V> {
         AnyElement::new(self)
     }
 }
 
-impl<V, I, F> Element for Img<V, I, F>
+impl<V, I, F> Element<V> for Img<V, I, F>
 where
     I: ElementInteraction<V>,
     F: ElementFocus<V>,
 {
-    type ViewState = V;
     type ElementState = DivState;
 
     fn id(&self) -> Option<crate::ElementId> {
@@ -90,7 +89,7 @@ where
         &mut self,
         view_state: &mut V,
         element_state: &mut Self::ElementState,
-        cx: &mut ViewContext<Self::ViewState>,
+        cx: &mut ViewContext<V>,
     ) -> LayoutId {
         self.base.layout(view_state, element_state, cx)
     }
@@ -143,7 +142,7 @@ where
     }
 }
 
-impl<V, I, F> StatelessInteractive for Img<V, I, F>
+impl<V, I, F> StatelessInteractive<V> for Img<V, I, F>
 where
     I: ElementInteraction<V>,
     F: ElementFocus<V>,
@@ -153,21 +152,21 @@ where
     }
 }
 
-impl<V, F> StatefulInteractive for Img<V, StatefulInteraction<V>, F>
+impl<V, F> StatefulInteractive<V> for Img<V, StatefulInteraction<V>, F>
 where
     F: ElementFocus<V>,
 {
-    fn stateful_interaction(&mut self) -> &mut StatefulInteraction<Self::ViewState> {
+    fn stateful_interaction(&mut self) -> &mut StatefulInteraction<V> {
         self.base.stateful_interaction()
     }
 }
 
-impl<V, I> Focusable for Img<V, I, FocusEnabled<V>>
+impl<V, I> Focusable<V> for Img<V, I, FocusEnabled<V>>
 where
     V: 'static,
     I: ElementInteraction<V>,
 {
-    fn focus_listeners(&mut self) -> &mut FocusListeners<Self::ViewState> {
+    fn focus_listeners(&mut self) -> &mut FocusListeners<V> {
         self.base.focus_listeners()
     }
 

crates/gpui2/src/elements/svg.rs

@@ -1,6 +1,6 @@
 use crate::{
-    div, AnyElement, Bounds, Div, DivState, Element, ElementFocus, ElementId, ElementInteraction,
-    FocusDisabled, FocusEnabled, FocusListeners, Focusable, IntoAnyElement, LayoutId, Pixels,
+    div, AnyElement, Bounds, Component, Div, DivState, Element, ElementFocus, ElementId,
+    ElementInteraction, FocusDisabled, FocusEnabled, FocusListeners, Focusable, LayoutId, Pixels,
     SharedString, StatefulInteraction, StatefulInteractive, StatelessInteraction,
     StatelessInteractive, StyleRefinement, Styled, ViewContext,
 };
@@ -45,22 +45,21 @@ where
     }
 }
 
-impl<V, I, F> IntoAnyElement<V> for Svg<V, I, F>
+impl<V, I, F> Component<V> for Svg<V, I, F>
 where
     I: ElementInteraction<V>,
     F: ElementFocus<V>,
 {
-    fn into_any(self) -> AnyElement<V> {
+    fn render(self) -> AnyElement<V> {
         AnyElement::new(self)
     }
 }
 
-impl<V, I, F> Element for Svg<V, I, F>
+impl<V, I, F> Element<V> for Svg<V, I, F>
 where
     I: ElementInteraction<V>,
     F: ElementFocus<V>,
 {
-    type ViewState = V;
     type ElementState = DivState;
 
     fn id(&self) -> Option<crate::ElementId> {
@@ -80,7 +79,7 @@ where
         &mut self,
         view_state: &mut V,
         element_state: &mut Self::ElementState,
-        cx: &mut ViewContext<Self::ViewState>,
+        cx: &mut ViewContext<V>,
     ) -> LayoutId {
         self.base.layout(view_state, element_state, cx)
     }
@@ -88,7 +87,7 @@ where
     fn paint(
         &mut self,
         bounds: Bounds<Pixels>,
-        view: &mut Self::ViewState,
+        view: &mut V,
         element_state: &mut Self::ElementState,
         cx: &mut ViewContext<V>,
     ) where
@@ -116,7 +115,7 @@ where
     }
 }
 
-impl<V, I, F> StatelessInteractive for Svg<V, I, F>
+impl<V, I, F> StatelessInteractive<V> for Svg<V, I, F>
 where
     I: ElementInteraction<V>,
     F: ElementFocus<V>,
@@ -126,21 +125,21 @@ where
     }
 }
 
-impl<V, F> StatefulInteractive for Svg<V, StatefulInteraction<V>, F>
+impl<V, F> StatefulInteractive<V> for Svg<V, StatefulInteraction<V>, F>
 where
     V: 'static,
     F: ElementFocus<V>,
 {
-    fn stateful_interaction(&mut self) -> &mut StatefulInteraction<Self::ViewState> {
+    fn stateful_interaction(&mut self) -> &mut StatefulInteraction<V> {
         self.base.stateful_interaction()
     }
 }
 
-impl<V: 'static, I> Focusable for Svg<V, I, FocusEnabled<V>>
+impl<V: 'static, I> Focusable<V> for Svg<V, I, FocusEnabled<V>>
 where
     I: ElementInteraction<V>,
 {
-    fn focus_listeners(&mut self) -> &mut FocusListeners<Self::ViewState> {
+    fn focus_listeners(&mut self) -> &mut FocusListeners<V> {
         self.base.focus_listeners()
     }
 

crates/gpui2/src/elements/text.rs

@@ -1,41 +1,41 @@
 use crate::{
-    AnyElement, BorrowWindow, Bounds, Element, IntoAnyElement, LayoutId, Line, Pixels,
-    SharedString, Size, ViewContext,
+    AnyElement, BorrowWindow, Bounds, Component, Element, LayoutId, Line, Pixels, SharedString,
+    Size, ViewContext,
 };
 use parking_lot::Mutex;
 use smallvec::SmallVec;
 use std::{marker::PhantomData, sync::Arc};
 use util::ResultExt;
 
-impl<V: 'static> IntoAnyElement<V> for SharedString {
-    fn into_any(self) -> AnyElement<V> {
+impl<V: 'static> Component<V> for SharedString {
+    fn render(self) -> AnyElement<V> {
         Text {
             text: self,
             state_type: PhantomData,
         }
-        .into_any()
+        .render()
     }
 }
 
-impl<V: 'static> IntoAnyElement<V> for &'static str {
-    fn into_any(self) -> AnyElement<V> {
+impl<V: 'static> Component<V> for &'static str {
+    fn render(self) -> AnyElement<V> {
         Text {
             text: self.into(),
             state_type: PhantomData,
         }
-        .into_any()
+        .render()
     }
 }
 
 // TODO: Figure out how to pass `String` to `child` without this.
 // This impl doesn't exist in the `gpui2` crate.
-impl<V: 'static> IntoAnyElement<V> for String {
-    fn into_any(self) -> AnyElement<V> {
+impl<V: 'static> Component<V> for String {
+    fn render(self) -> AnyElement<V> {
         Text {
             text: self.into(),
             state_type: PhantomData,
         }
-        .into_any()
+        .render()
     }
 }
 
@@ -47,14 +47,13 @@ pub struct Text<V> {
 unsafe impl<V> Send for Text<V> {}
 unsafe impl<V> Sync for Text<V> {}
 
-impl<V: 'static> IntoAnyElement<V> for Text<V> {
-    fn into_any(self) -> AnyElement<V> {
+impl<V: 'static> Component<V> for Text<V> {
+    fn render(self) -> AnyElement<V> {
         AnyElement::new(self)
     }
 }
 
-impl<V: 'static> Element for Text<V> {
-    type ViewState = V;
+impl<V: 'static> Element<V> for Text<V> {
     type ElementState = Arc<Mutex<Option<TextElementState>>>;
 
     fn id(&self) -> Option<crate::ElementId> {

crates/gpui2/src/focusable.rs

@@ -11,8 +11,8 @@ pub type FocusListeners<V> = SmallVec<[FocusListener<V>; 2]>;
 pub type FocusListener<V> =
     Arc<dyn Fn(&mut V, &FocusHandle, &FocusEvent, &mut ViewContext<V>) + Send + Sync + 'static>;
 
-pub trait Focusable: Element {
-    fn focus_listeners(&mut self) -> &mut FocusListeners<Self::ViewState>;
+pub trait Focusable<V: 'static>: Element<V> {
+    fn focus_listeners(&mut self) -> &mut FocusListeners<V>;
     fn set_focus_style(&mut self, style: StyleRefinement);
     fn set_focus_in_style(&mut self, style: StyleRefinement);
     fn set_in_focus_style(&mut self, style: StyleRefinement);
@@ -43,10 +43,7 @@ pub trait Focusable: Element {
 
     fn on_focus(
         mut self,
-        listener: impl Fn(&mut Self::ViewState, &FocusEvent, &mut ViewContext<Self::ViewState>)
-            + Send
-            + Sync
-            + 'static,
+        listener: impl Fn(&mut V, &FocusEvent, &mut ViewContext<V>) + Send + Sync + 'static,
     ) -> Self
     where
         Self: Sized,
@@ -62,10 +59,7 @@ pub trait Focusable: Element {
 
     fn on_blur(
         mut self,
-        listener: impl Fn(&mut Self::ViewState, &FocusEvent, &mut ViewContext<Self::ViewState>)
-            + Send
-            + Sync
-            + 'static,
+        listener: impl Fn(&mut V, &FocusEvent, &mut ViewContext<V>) + Send + Sync + 'static,
     ) -> Self
     where
         Self: Sized,
@@ -81,10 +75,7 @@ pub trait Focusable: Element {
 
     fn on_focus_in(
         mut self,
-        listener: impl Fn(&mut Self::ViewState, &FocusEvent, &mut ViewContext<Self::ViewState>)
-            + Send
-            + Sync
-            + 'static,
+        listener: impl Fn(&mut V, &FocusEvent, &mut ViewContext<V>) + Send + Sync + 'static,
     ) -> Self
     where
         Self: Sized,
@@ -109,10 +100,7 @@ pub trait Focusable: Element {
 
     fn on_focus_out(
         mut self,
-        listener: impl Fn(&mut Self::ViewState, &FocusEvent, &mut ViewContext<Self::ViewState>)
-            + Send
-            + Sync
-            + 'static,
+        listener: impl Fn(&mut V, &FocusEvent, &mut ViewContext<V>) + Send + Sync + 'static,
     ) -> Self
     where
         Self: Sized,

crates/gpui2/src/interactive.rs

@@ -1,7 +1,7 @@
 use crate::{
-    point, px, view, Action, AnyBox, AnyDrag, AppContext, BorrowWindow, Bounds, DispatchContext,
-    DispatchPhase, Element, ElementId, FocusHandle, KeyMatch, Keystroke, Modifiers, Overflow,
-    Pixels, Point, SharedString, Size, Style, StyleRefinement, ViewContext,
+    point, px, view, Action, AnyBox, AnyDrag, AppContext, BorrowWindow, Bounds, Component,
+    DispatchContext, DispatchPhase, Element, ElementId, FocusHandle, KeyMatch, Keystroke,
+    Modifiers, Overflow, Pixels, Point, SharedString, Size, Style, StyleRefinement, ViewContext,
 };
 use collections::HashMap;
 use derive_more::{Deref, DerefMut};
@@ -19,8 +19,8 @@ use std::{
 
 const DRAG_THRESHOLD: f64 = 2.;
 
-pub trait StatelessInteractive: Element {
-    fn stateless_interaction(&mut self) -> &mut StatelessInteraction<Self::ViewState>;
+pub trait StatelessInteractive<V: 'static>: Element<V> {
+    fn stateless_interaction(&mut self) -> &mut StatelessInteraction<V>;
 
     fn hover(mut self, f: impl FnOnce(StyleRefinement) -> StyleRefinement) -> Self
     where
@@ -48,10 +48,7 @@ pub trait StatelessInteractive: Element {
     fn on_mouse_down(
         mut self,
         button: MouseButton,
-        handler: impl Fn(&mut Self::ViewState, &MouseDownEvent, &mut ViewContext<Self::ViewState>)
-            + Send
-            + Sync
-            + 'static,
+        handler: impl Fn(&mut V, &MouseDownEvent, &mut ViewContext<V>) + Send + Sync + 'static,
     ) -> Self
     where
         Self: Sized,
@@ -72,10 +69,7 @@ pub trait StatelessInteractive: Element {
     fn on_mouse_up(
         mut self,
         button: MouseButton,
-        handler: impl Fn(&mut Self::ViewState, &MouseUpEvent, &mut ViewContext<Self::ViewState>)
-            + Send
-            + Sync
-            + 'static,
+        handler: impl Fn(&mut V, &MouseUpEvent, &mut ViewContext<V>) + Send + Sync + 'static,
     ) -> Self
     where
         Self: Sized,
@@ -96,10 +90,7 @@ pub trait StatelessInteractive: Element {
     fn on_mouse_down_out(
         mut self,
         button: MouseButton,
-        handler: impl Fn(&mut Self::ViewState, &MouseDownEvent, &mut ViewContext<Self::ViewState>)
-            + Send
-            + Sync
-            + 'static,
+        handler: impl Fn(&mut V, &MouseDownEvent, &mut ViewContext<V>) + Send + Sync + 'static,
     ) -> Self
     where
         Self: Sized,
@@ -120,10 +111,7 @@ pub trait StatelessInteractive: Element {
     fn on_mouse_up_out(
         mut self,
         button: MouseButton,
-        handler: impl Fn(&mut Self::ViewState, &MouseUpEvent, &mut ViewContext<Self::ViewState>)
-            + Send
-            + Sync
-            + 'static,
+        handler: impl Fn(&mut V, &MouseUpEvent, &mut ViewContext<V>) + Send + Sync + 'static,
     ) -> Self
     where
         Self: Sized,
@@ -143,10 +131,7 @@ pub trait StatelessInteractive: Element {
 
     fn on_mouse_move(
         mut self,
-        handler: impl Fn(&mut Self::ViewState, &MouseMoveEvent, &mut ViewContext<Self::ViewState>)
-            + Send
-            + Sync
-            + 'static,
+        handler: impl Fn(&mut V, &MouseMoveEvent, &mut ViewContext<V>) + Send + Sync + 'static,
     ) -> Self
     where
         Self: Sized,
@@ -163,10 +148,7 @@ pub trait StatelessInteractive: Element {
 
     fn on_scroll_wheel(
         mut self,
-        handler: impl Fn(&mut Self::ViewState, &ScrollWheelEvent, &mut ViewContext<Self::ViewState>)
-            + Send
-            + Sync
-            + 'static,
+        handler: impl Fn(&mut V, &ScrollWheelEvent, &mut ViewContext<V>) + Send + Sync + 'static,
     ) -> Self
     where
         Self: Sized,
@@ -194,10 +176,7 @@ pub trait StatelessInteractive: Element {
 
     fn on_action<A: 'static>(
         mut self,
-        listener: impl Fn(&mut Self::ViewState, &A, DispatchPhase, &mut ViewContext<Self::ViewState>)
-            + Send
-            + Sync
-            + 'static,
+        listener: impl Fn(&mut V, &A, DispatchPhase, &mut ViewContext<V>) + Send + Sync + 'static,
     ) -> Self
     where
         Self: Sized,
@@ -215,12 +194,8 @@ pub trait StatelessInteractive: Element {
 
     fn on_key_down(
         mut self,
-        listener: impl Fn(
-                &mut Self::ViewState,
-                &KeyDownEvent,
-                DispatchPhase,
-                &mut ViewContext<Self::ViewState>,
-            ) + Send
+        listener: impl Fn(&mut V, &KeyDownEvent, DispatchPhase, &mut ViewContext<V>)
+            + Send
             + Sync
             + 'static,
     ) -> Self
@@ -240,7 +215,7 @@ pub trait StatelessInteractive: Element {
 
     fn on_key_up(
         mut self,
-        listener: impl Fn(&mut Self::ViewState, &KeyUpEvent, DispatchPhase, &mut ViewContext<Self::ViewState>)
+        listener: impl Fn(&mut V, &KeyUpEvent, DispatchPhase, &mut ViewContext<V>)
             + Send
             + Sync
             + 'static,
@@ -289,10 +264,7 @@ pub trait StatelessInteractive: Element {
 
     fn on_drop<S: 'static>(
         mut self,
-        listener: impl Fn(&mut Self::ViewState, S, &mut ViewContext<Self::ViewState>)
-            + Send
-            + Sync
-            + 'static,
+        listener: impl Fn(&mut V, S, &mut ViewContext<V>) + Send + Sync + 'static,
     ) -> Self
     where
         Self: Sized,
@@ -307,8 +279,8 @@ pub trait StatelessInteractive: Element {
     }
 }
 
-pub trait StatefulInteractive: StatelessInteractive {
-    fn stateful_interaction(&mut self) -> &mut StatefulInteraction<Self::ViewState>;
+pub trait StatefulInteractive<V: 'static>: StatelessInteractive<V> {
+    fn stateful_interaction(&mut self) -> &mut StatefulInteraction<V>;
 
     fn active(mut self, f: impl FnOnce(StyleRefinement) -> StyleRefinement) -> Self
     where
@@ -335,10 +307,7 @@ pub trait StatefulInteractive: StatelessInteractive {
 
     fn on_click(
         mut self,
-        listener: impl Fn(&mut Self::ViewState, &ClickEvent, &mut ViewContext<Self::ViewState>)
-            + Send
-            + Sync
-            + 'static,
+        listener: impl Fn(&mut V, &ClickEvent, &mut ViewContext<V>) + Send + Sync + 'static,
     ) -> Self
     where
         Self: Sized,
@@ -351,20 +320,14 @@ pub trait StatefulInteractive: StatelessInteractive {
 
     fn on_drag<S, R, E>(
         mut self,
-        listener: impl Fn(
-                &mut Self::ViewState,
-                &mut ViewContext<Self::ViewState>,
-            ) -> Drag<S, R, Self::ViewState, E>
-            + Send
-            + Sync
-            + 'static,
+        listener: impl Fn(&mut V, &mut ViewContext<V>) -> Drag<S, R, V, E> + Send + Sync + 'static,
     ) -> Self
     where
         Self: Sized,
         S: Any + Send + Sync,
-        R: Fn(&mut Self::ViewState, &mut ViewContext<Self::ViewState>) -> E,
+        R: Fn(&mut V, &mut ViewContext<V>) -> E,
         R: 'static + Send + Sync,
-        E: Element<ViewState = Self::ViewState>,
+        E: Component<V>,
     {
         debug_assert!(
             self.stateful_interaction().drag_listener.is_none(),
@@ -907,7 +870,8 @@ pub struct ClickEvent {
 pub struct Drag<S, R, V, E>
 where
     R: Fn(&mut V, &mut ViewContext<V>) -> E,
-    E: Element<ViewState = V>,
+    V: 'static,
+    E: Component<V>,
 {
     pub state: S,
     pub render_drag_handle: R,
@@ -917,7 +881,8 @@ where
 impl<S, R, V, E> Drag<S, R, V, E>
 where
     R: Fn(&mut V, &mut ViewContext<V>) -> E,
-    E: Element<ViewState = V>,
+    V: 'static,
+    E: Component<V>,
 {
     pub fn new(state: S, render_drag_handle: R) -> Self {
         Drag {

crates/gpui2/src/view.rs

@@ -1,7 +1,7 @@
 use parking_lot::Mutex;
 
 use crate::{
-    AnyBox, AnyElement, BorrowWindow, Bounds, Element, ElementId, EntityId, Handle, IntoAnyElement,
+    AnyBox, AnyElement, BorrowWindow, Bounds, Component, Element, ElementId, EntityId, Handle,
     LayoutId, Pixels, ViewContext, WindowContext,
 };
 use std::{marker::PhantomData, sync::Arc};
@@ -33,16 +33,16 @@ pub fn view<V, E>(
     render: impl Fn(&mut V, &mut ViewContext<V>) -> E + Send + Sync + 'static,
 ) -> View<V>
 where
-    E: IntoAnyElement<V>,
+    E: Component<V>,
 {
     View {
         state,
-        render: Arc::new(move |state, cx| render(state, cx).into_any()),
+        render: Arc::new(move |state, cx| render(state, cx).render()),
     }
 }
 
-impl<V: 'static, ParentViewState: 'static> IntoAnyElement<ParentViewState> for View<V> {
-    fn into_any(self) -> AnyElement<ParentViewState> {
+impl<V: 'static, ParentViewState: 'static> Component<ParentViewState> for View<V> {
+    fn render(self) -> AnyElement<ParentViewState> {
         AnyElement::new(EraseViewState {
             view: self,
             parent_view_state_type: PhantomData,
@@ -50,8 +50,7 @@ impl<V: 'static, ParentViewState: 'static> IntoAnyElement<ParentViewState> for V
     }
 }
 
-impl<V: 'static> Element for View<V> {
-    type ViewState = ();
+impl<V: 'static> Element<()> for View<V> {
     type ElementState = AnyElement<V>;
 
     fn id(&self) -> Option<crate::ElementId> {
@@ -99,14 +98,13 @@ struct EraseViewState<V, ParentV> {
 unsafe impl<V, ParentV> Send for EraseViewState<V, ParentV> {}
 unsafe impl<V, ParentV> Sync for EraseViewState<V, ParentV> {}
 
-impl<V: 'static, ParentV: 'static> IntoAnyElement<ParentV> for EraseViewState<V, ParentV> {
-    fn into_any(self) -> AnyElement<ParentV> {
+impl<V: 'static, ParentV: 'static> Component<ParentV> for EraseViewState<V, ParentV> {
+    fn render(self) -> AnyElement<ParentV> {
         AnyElement::new(self)
     }
 }
 
-impl<V: 'static, ParentV: 'static> Element for EraseViewState<V, ParentV> {
-    type ViewState = ParentV;
+impl<V: 'static, ParentV: 'static> Element<ParentV> for EraseViewState<V, ParentV> {
     type ElementState = AnyBox;
 
     fn id(&self) -> Option<crate::ElementId> {
@@ -115,18 +113,18 @@ impl<V: 'static, ParentV: 'static> Element for EraseViewState<V, ParentV> {
 
     fn initialize(
         &mut self,
-        _: &mut Self::ViewState,
+        _: &mut ParentV,
         _: Option<Self::ElementState>,
-        cx: &mut ViewContext<Self::ViewState>,
+        cx: &mut ViewContext<ParentV>,
     ) -> Self::ElementState {
         ViewObject::initialize(&mut self.view, cx)
     }
 
     fn layout(
         &mut self,
-        _: &mut Self::ViewState,
+        _: &mut ParentV,
         element: &mut Self::ElementState,
-        cx: &mut ViewContext<Self::ViewState>,
+        cx: &mut ViewContext<ParentV>,
     ) -> LayoutId {
         ViewObject::layout(&mut self.view, element, cx)
     }
@@ -134,9 +132,9 @@ impl<V: 'static, ParentV: 'static> Element for EraseViewState<V, ParentV> {
     fn paint(
         &mut self,
         bounds: Bounds<Pixels>,
-        _: &mut Self::ViewState,
+        _: &mut ParentV,
         element: &mut Self::ElementState,
-        cx: &mut ViewContext<Self::ViewState>,
+        cx: &mut ViewContext<ParentV>,
     ) {
         ViewObject::paint(&mut self.view, bounds, element, cx)
     }
@@ -187,8 +185,8 @@ pub struct AnyView {
     view: Arc<Mutex<dyn ViewObject>>,
 }
 
-impl<ParentV: 'static> IntoAnyElement<ParentV> for AnyView {
-    fn into_any(self) -> AnyElement<ParentV> {
+impl<ParentV: 'static> Component<ParentV> for AnyView {
+    fn render(self) -> AnyElement<ParentV> {
         AnyElement::new(EraseAnyViewState {
             view: self,
             parent_view_state_type: PhantomData,
@@ -196,8 +194,7 @@ impl<ParentV: 'static> IntoAnyElement<ParentV> for AnyView {
     }
 }
 
-impl Element for AnyView {
-    type ViewState = ();
+impl Element<()> for AnyView {
     type ElementState = AnyBox;
 
     fn id(&self) -> Option<crate::ElementId> {
@@ -206,18 +203,18 @@ impl Element for AnyView {
 
     fn initialize(
         &mut self,
-        _: &mut Self::ViewState,
+        _: &mut (),
         _: Option<Self::ElementState>,
-        cx: &mut ViewContext<Self::ViewState>,
+        cx: &mut ViewContext<()>,
     ) -> Self::ElementState {
         self.view.lock().initialize(cx)
     }
 
     fn layout(
         &mut self,
-        _: &mut Self::ViewState,
+        _: &mut (),
         element: &mut Self::ElementState,
-        cx: &mut ViewContext<Self::ViewState>,
+        cx: &mut ViewContext<()>,
     ) -> LayoutId {
         self.view.lock().layout(element, cx)
     }
@@ -227,7 +224,7 @@ impl Element for AnyView {
         bounds: Bounds<Pixels>,
         _: &mut (),
         element: &mut AnyBox,
-        cx: &mut ViewContext<Self::ViewState>,
+        cx: &mut ViewContext<()>,
     ) {
         self.view.lock().paint(bounds, element, cx)
     }
@@ -241,14 +238,13 @@ struct EraseAnyViewState<ParentViewState> {
 unsafe impl<ParentV> Send for EraseAnyViewState<ParentV> {}
 unsafe impl<ParentV> Sync for EraseAnyViewState<ParentV> {}
 
-impl<ParentV: 'static> IntoAnyElement<ParentV> for EraseAnyViewState<ParentV> {
-    fn into_any(self) -> AnyElement<ParentV> {
+impl<ParentV: 'static> Component<ParentV> for EraseAnyViewState<ParentV> {
+    fn render(self) -> AnyElement<ParentV> {
         AnyElement::new(self)
     }
 }
 
-impl<ParentV: 'static> Element for EraseAnyViewState<ParentV> {
-    type ViewState = ParentV;
+impl<ParentV: 'static> Element<ParentV> for EraseAnyViewState<ParentV> {
     type ElementState = AnyBox;
 
     fn id(&self) -> Option<crate::ElementId> {
@@ -257,18 +253,18 @@ impl<ParentV: 'static> Element for EraseAnyViewState<ParentV> {
 
     fn initialize(
         &mut self,
-        _: &mut Self::ViewState,
+        _: &mut ParentV,
         _: Option<Self::ElementState>,
-        cx: &mut ViewContext<Self::ViewState>,
+        cx: &mut ViewContext<ParentV>,
     ) -> Self::ElementState {
         self.view.view.lock().initialize(cx)
     }
 
     fn layout(
         &mut self,
-        _: &mut Self::ViewState,
+        _: &mut ParentV,
         element: &mut Self::ElementState,
-        cx: &mut ViewContext<Self::ViewState>,
+        cx: &mut ViewContext<ParentV>,
     ) -> LayoutId {
         self.view.view.lock().layout(element, cx)
     }
@@ -276,9 +272,9 @@ impl<ParentV: 'static> Element for EraseAnyViewState<ParentV> {
     fn paint(
         &mut self,
         bounds: Bounds<Pixels>,
-        _: &mut Self::ViewState,
+        _: &mut ParentV,
         element: &mut Self::ElementState,
-        cx: &mut ViewContext<Self::ViewState>,
+        cx: &mut ViewContext<ParentV>,
     ) {
         self.view.view.lock().paint(bounds, element, cx)
     }

crates/gpui2_macros/src/derive_component.rs

@@ -0,0 +1,66 @@
+use proc_macro::TokenStream;
+use quote::quote;
+use syn::{parse_macro_input, parse_quote, DeriveInput};
+
+pub fn derive_component(input: TokenStream) -> TokenStream {
+    let ast = parse_macro_input!(input as DeriveInput);
+    let name = &ast.ident;
+
+    let mut trait_generics = ast.generics.clone();
+    let view_type = if let Some(view_type) = specified_view_type(&ast) {
+        quote! { #view_type }
+    } else {
+        if let Some(first_type_param) = ast.generics.params.iter().find_map(|param| {
+            if let syn::GenericParam::Type(type_param) = param {
+                Some(type_param.ident.clone())
+            } else {
+                None
+            }
+        }) {
+            quote! { #first_type_param }
+        } else {
+            trait_generics.params.push(parse_quote! { V: 'static });
+            quote! { V }
+        }
+    };
+
+    let (impl_generics, _, where_clause) = trait_generics.split_for_impl();
+    let (_, ty_generics, _) = ast.generics.split_for_impl();
+
+    let expanded = quote! {
+        impl #impl_generics gpui2::Component<#view_type> for #name #ty_generics #where_clause {
+            fn render(self) -> gpui2::AnyElement<#view_type> {
+                (move |view_state: &mut #view_type, cx: &mut gpui2::ViewContext<'_, '_, #view_type>| self.render(view_state, cx))
+                    .render()
+            }
+        }
+    };
+
+    TokenStream::from(expanded)
+}
+
+fn specified_view_type(ast: &DeriveInput) -> Option<proc_macro2::Ident> {
+    let component_attr = ast
+        .attrs
+        .iter()
+        .find(|attr| attr.path.is_ident("component"))?;
+
+    if let Ok(syn::Meta::List(meta_list)) = component_attr.parse_meta() {
+        meta_list.nested.iter().find_map(|nested| {
+            if let syn::NestedMeta::Meta(syn::Meta::NameValue(nv)) = nested {
+                if nv.path.is_ident("view_type") {
+                    if let syn::Lit::Str(lit_str) = &nv.lit {
+                        return Some(
+                            lit_str
+                                .parse::<syn::Ident>()
+                                .expect("Failed to parse view_type"),
+                        );
+                    }
+                }
+            }
+            None
+        })
+    } else {
+        None
+    }
+}

crates/gpui2_macros/src/derive_element.rs

@@ -1,95 +0,0 @@
-use proc_macro::TokenStream;
-use quote::quote;
-use syn::{parse_macro_input, DeriveInput, GenericParam};
-
-pub fn derive_element(input: TokenStream) -> TokenStream {
-    let ast = parse_macro_input!(input as DeriveInput);
-    let type_name = ast.ident;
-
-    let mut state_type = quote! { () };
-
-    for param in &ast.generics.params {
-        if let GenericParam::Type(type_param) = param {
-            let type_ident = &type_param.ident;
-            state_type = quote! {#type_ident};
-            break;
-        }
-    }
-
-    let attrs = &ast.attrs;
-    for attr in attrs {
-        if attr.path.is_ident("element") {
-            match attr.parse_meta() {
-                Ok(syn::Meta::List(i)) => {
-                    for nested_meta in i.nested {
-                        if let syn::NestedMeta::Meta(syn::Meta::NameValue(nv)) = nested_meta {
-                            if nv.path.is_ident("view_state") {
-                                if let syn::Lit::Str(lit_str) = nv.lit {
-                                    state_type = lit_str.value().parse().unwrap();
-                                }
-                            }
-                        }
-                    }
-                }
-                _ => (),
-            }
-        }
-    }
-
-    let (impl_generics, ty_generics, where_clause) = ast.generics.split_for_impl();
-
-    let gen = quote! {
-        impl #impl_generics gpui2::IntoAnyElement<#state_type> for #type_name #ty_generics
-        #where_clause
-        {
-            fn into_any(self) -> gpui2::AnyElement<#state_type> {
-                gpui2::AnyElement::new(self)
-            }
-        }
-
-        impl #impl_generics gpui2::Element for #type_name #ty_generics
-        #where_clause
-        {
-            type ViewState = #state_type;
-            type ElementState = gpui2::AnyElement<#state_type>;
-
-            fn id(&self) -> Option<gpui2::ElementId> {
-                None
-            }
-
-            fn initialize(
-                &mut self,
-                view_state: &mut Self::ViewState,
-                _: Option<Self::ElementState>,
-                cx: &mut gpui2::ViewContext<Self::ViewState>
-            ) -> Self::ElementState {
-                use gpui2::IntoAnyElement;
-
-                let mut element = self.render(view_state, cx).into_any();
-                element.initialize(view_state, cx);
-                element
-            }
-
-            fn layout(
-                &mut self,
-                view_state: &mut Self::ViewState,
-                rendered_element: &mut Self::ElementState,
-                cx: &mut gpui2::ViewContext<Self::ViewState>,
-            ) -> gpui2::LayoutId {
-                rendered_element.layout(view_state, cx)
-            }
-
-            fn paint(
-                &mut self,
-                bounds: gpui2::Bounds<gpui2::Pixels>,
-                view_state: &mut Self::ViewState,
-                rendered_element: &mut Self::ElementState,
-                cx: &mut gpui2::ViewContext<Self::ViewState>,
-            ) {
-                rendered_element.paint(view_state, cx)
-            }
-        }
-    };
-
-    gen.into()
-}

crates/gpui2_macros/src/gpui2_macros.rs

@@ -1,6 +1,6 @@
 use proc_macro::TokenStream;
 
-mod derive_element;
+mod derive_component;
 mod style_helpers;
 mod test;
 
@@ -9,9 +9,9 @@ pub fn style_helpers(args: TokenStream) -> TokenStream {
     style_helpers::style_helpers(args)
 }
 
-#[proc_macro_derive(Element, attributes(element))]
-pub fn derive_element(input: TokenStream) -> TokenStream {
-    derive_element::derive_element(input)
+#[proc_macro_derive(Component, attributes(component))]
+pub fn derive_component(input: TokenStream) -> TokenStream {
+    derive_component::derive_component(input)
 }
 
 #[proc_macro_attribute]

crates/storybook2/src/components.rs

@@ -14,7 +14,7 @@ impl<V, D> Default for ButtonHandlers<V, D> {
     }
 }
 
-#[derive(Element)]
+#[derive(Component)]
 pub struct Button<V: 'static, D: 'static> {
     handlers: ButtonHandlers<V, D>,
     label: Option<ArcCow<'static, str>>,

crates/storybook2/src/stories/kitchen_sink.rs

@@ -16,7 +16,7 @@ impl KitchenSinkStory {
         view(cx.entity(|cx| Self::new()), Self::render)
     }
 
-    fn render(&mut self, cx: &mut ViewContext<Self>) -> impl Element<ViewState = Self> {
+    fn render(&mut self, cx: &mut ViewContext<Self>) -> impl Component<Self> {
         let element_stories = ElementStory::iter()
             .map(|selector| selector.story(cx))
             .collect::<Vec<_>>();

crates/storybook2/src/stories/scroll.rs

@@ -1,8 +1,7 @@
 use crate::themes::rose_pine;
 use gpui2::{
-    div, px, view, Context, Element, ParentElement, SharedString, Styled, View, WindowContext,
+    div, px, view, Component, Context, ParentElement, SharedString, Styled, View, WindowContext,
 };
-use ui::ElementExt;
 
 pub struct ScrollStory {
     text: View<()>,
@@ -16,7 +15,7 @@ impl ScrollStory {
     }
 }
 
-fn checkerboard<S>(depth: usize) -> impl Element<ViewState = S>
+fn checkerboard<S>(depth: usize) -> impl Component<S>
 where
     S: 'static + Send + Sync,
 {

crates/storybook2/src/stories/z_index.rs

@@ -1,4 +1,3 @@
-use std::marker::PhantomData;
 
 use gpui2::{px, rgb, Div, Hsla};
 use ui::prelude::*;
@@ -7,19 +6,15 @@ use crate::story::Story;
 
 /// A reimplementation of the MDN `z-index` example, found here:
 /// [https://developer.mozilla.org/en-US/docs/Web/CSS/z-index](https://developer.mozilla.org/en-US/docs/Web/CSS/z-index).
-#[derive(Element)]
-pub struct ZIndexStory<S: 'static + Send + Sync> {
-    state_type: PhantomData<S>,
-}
+#[derive(Component)]
+pub struct ZIndexStory;
 
-impl<S: 'static + Send + Sync> ZIndexStory<S> {
+impl ZIndexStory {
     pub fn new() -> Self {
-        Self {
-            state_type: PhantomData,
-        }
+        Self
     }
 
-    fn render(&mut self, _view: &mut S, cx: &mut ViewContext<S>) -> impl Element<ViewState = S> {
+    fn render<S: 'static>(self, _view: &mut S, cx: &mut ViewContext<S>) -> impl Component<S> {
         Story::container(cx)
             .child(Story::title(cx, "z-index"))
             .child(
@@ -86,23 +81,19 @@ trait Styles: Styled + Sized {
     }
 }
 
-impl<S: 'static + Send + Sync> Styles for Div<S> {}
+impl<V: 'static> Styles for Div<V> {}
 
-#[derive(Element)]
-struct ZIndexExample<S: 'static + Send + Sync> {
-    state_type: PhantomData<S>,
+#[derive(Component)]
+struct ZIndexExample {
     z_index: u32,
 }
 
-impl<S: 'static + Send + Sync> ZIndexExample<S> {
+impl ZIndexExample {
     pub fn new(z_index: u32) -> Self {
-        Self {
-            state_type: PhantomData,
-            z_index,
-        }
+        Self { z_index }
     }
 
-    fn render(&mut self, _view: &mut S, cx: &mut ViewContext<S>) -> impl Element<ViewState = S> {
+    fn render<V: 'static>(self, _view: &mut V, cx: &mut ViewContext<V>) -> impl Component<V> {
         div()
             .relative()
             .size_full()

crates/storybook2/src/story_selector.rs

@@ -28,29 +28,29 @@ impl ElementStory {
     pub fn story(&self, cx: &mut WindowContext) -> AnyView {
         match self {
             Self::Avatar => {
-                view(cx.entity(|cx| ()), |_, _| ui::AvatarStory::new().into_any()).into_any()
+                view(cx.entity(|cx| ()), |_, _| ui::AvatarStory::new().render()).into_any()
             }
             Self::Button => {
-                view(cx.entity(|cx| ()), |_, _| ui::ButtonStory::new().into_any()).into_any()
+                view(cx.entity(|cx| ()), |_, _| ui::ButtonStory::new().render()).into_any()
             }
             Self::Details => view(cx.entity(|cx| ()), |_, _| {
-                ui::DetailsStory::new().into_any()
+                ui::DetailsStory::new().render()
             })
             .into_any(),
             Self::Focus => FocusStory::view(cx).into_any(),
             Self::Icon => {
-                view(cx.entity(|cx| ()), |_, _| ui::IconStory::new().into_any()).into_any()
+                view(cx.entity(|cx| ()), |_, _| ui::IconStory::new().render()).into_any()
             }
             Self::Input => {
-                view(cx.entity(|cx| ()), |_, _| ui::InputStory::new().into_any()).into_any()
+                view(cx.entity(|cx| ()), |_, _| ui::InputStory::new().render()).into_any()
             }
             Self::Label => {
-                view(cx.entity(|cx| ()), |_, _| ui::LabelStory::new().into_any()).into_any()
+                view(cx.entity(|cx| ()), |_, _| ui::LabelStory::new().render()).into_any()
             }
             Self::Scroll => ScrollStory::view(cx).into_any(),
             Self::Text => TextStory::view(cx).into_any(),
             Self::ZIndex => {
-                view(cx.entity(|cx| ()), |_, _| ZIndexStory::new().into_any()).into_any()
+                view(cx.entity(|cx| ()), |_, _| ZIndexStory::new().render()).into_any()
             }
         }
     }
@@ -91,93 +91,93 @@ impl ComponentStory {
     pub fn story(&self, cx: &mut WindowContext) -> AnyView {
         match self {
             Self::AssistantPanel => view(cx.entity(|cx| ()), |_, _| {
-                ui::AssistantPanelStory::new().into_any()
+                ui::AssistantPanelStory::new().render()
             })
             .into_any(),
             Self::Buffer => {
-                view(cx.entity(|cx| ()), |_, _| ui::BufferStory::new().into_any()).into_any()
+                view(cx.entity(|cx| ()), |_, _| ui::BufferStory::new().render()).into_any()
             }
             Self::Breadcrumb => view(cx.entity(|cx| ()), |_, _| {
-                ui::BreadcrumbStory::new().into_any()
+                ui::BreadcrumbStory::new().render()
             })
             .into_any(),
             Self::ChatPanel => view(cx.entity(|cx| ()), |_, _| {
-                ui::ChatPanelStory::new().into_any()
+                ui::ChatPanelStory::new().render()
             })
             .into_any(),
             Self::CollabPanel => view(cx.entity(|cx| ()), |_, _| {
-                ui::CollabPanelStory::new().into_any()
+                ui::CollabPanelStory::new().render()
             })
             .into_any(),
             Self::CommandPalette => view(cx.entity(|cx| ()), |_, _| {
-                ui::CommandPaletteStory::new().into_any()
+                ui::CommandPaletteStory::new().render()
             })
             .into_any(),
             Self::ContextMenu => view(cx.entity(|cx| ()), |_, _| {
-                ui::ContextMenuStory::new().into_any()
+                ui::ContextMenuStory::new().render()
             })
             .into_any(),
             Self::Facepile => view(cx.entity(|cx| ()), |_, _| {
-                ui::FacepileStory::new().into_any()
+                ui::FacepileStory::new().render()
             })
             .into_any(),
             Self::Keybinding => view(cx.entity(|cx| ()), |_, _| {
-                ui::KeybindingStory::new().into_any()
+                ui::KeybindingStory::new().render()
             })
             .into_any(),
             Self::LanguageSelector => view(cx.entity(|cx| ()), |_, _| {
-                ui::LanguageSelectorStory::new().into_any()
+                ui::LanguageSelectorStory::new().render()
             })
             .into_any(),
             Self::MultiBuffer => view(cx.entity(|cx| ()), |_, _| {
-                ui::MultiBufferStory::new().into_any()
+                ui::MultiBufferStory::new().render()
             })
             .into_any(),
             Self::NotificationsPanel => view(cx.entity(|cx| ()), |_, _| {
-                ui::NotificationsPanelStory::new().into_any()
+                ui::NotificationsPanelStory::new().render()
             })
             .into_any(),
             Self::Palette => view(cx.entity(|cx| ()), |_, _| {
-                ui::PaletteStory::new().into_any()
+                ui::PaletteStory::new().render()
             })
             .into_any(),
             Self::Panel => {
-                view(cx.entity(|cx| ()), |_, _| ui::PanelStory::new().into_any()).into_any()
+                view(cx.entity(|cx| ()), |_, _| ui::PanelStory::new().render()).into_any()
             }
             Self::ProjectPanel => view(cx.entity(|cx| ()), |_, _| {
-                ui::ProjectPanelStory::new().into_any()
+                ui::ProjectPanelStory::new().render()
             })
             .into_any(),
             Self::RecentProjects => view(cx.entity(|cx| ()), |_, _| {
-                ui::RecentProjectsStory::new().into_any()
+                ui::RecentProjectsStory::new().render()
             })
             .into_any(),
-            Self::Tab => view(cx.entity(|cx| ()), |_, _| ui::TabStory::new().into_any()).into_any(),
+            Self::Tab => view(cx.entity(|cx| ()), |_, _| ui::TabStory::new().render()).into_any(),
             Self::TabBar => {
-                view(cx.entity(|cx| ()), |_, _| ui::TabBarStory::new().into_any()).into_any()
+                view(cx.entity(|cx| ()), |_, _| ui::TabBarStory::new().render()).into_any()
             }
             Self::Terminal => view(cx.entity(|cx| ()), |_, _| {
-                ui::TerminalStory::new().into_any()
+                ui::TerminalStory::new().render()
             })
             .into_any(),
             Self::ThemeSelector => view(cx.entity(|cx| ()), |_, _| {
-                ui::ThemeSelectorStory::new().into_any()
+                ui::ThemeSelectorStory::new().render()
             })
             .into_any(),
             Self::TitleBar => ui::TitleBarStory::view(cx).into_any(),
             Self::Toast => {
-                view(cx.entity(|cx| ()), |_, _| ui::ToastStory::new().into_any()).into_any()
+                view(cx.entity(|cx| ()), |_, _| ui::ToastStory::new().render()).into_any()
             }
             Self::Toolbar => view(cx.entity(|cx| ()), |_, _| {
-                ui::ToolbarStory::new().into_any()
+                ui::ToolbarStory::new().render()
             })
             .into_any(),
             Self::TrafficLights => view(cx.entity(|cx| ()), |_, _| {
-                ui::TrafficLightsStory::new().into_any()
+                ui::TrafficLightsStory::new().render()
             })
             .into_any(),
             Self::Copilot => view(cx.entity(|cx| ()), |_, _| {
-                ui::CopilotModalStory::new().into_any()
+                ui::CopilotModalStory::new().render()
             })
             .into_any(),
             Self::Workspace => ui::WorkspaceStory::view(cx).into_any(),

crates/storybook2/src/storybook2.rs

@@ -10,7 +10,7 @@ use std::sync::Arc;
 
 use clap::Parser;
 use gpui2::{
-    div, px, size, view, AnyView, AppContext, Bounds, Context, Element, ViewContext, WindowBounds,
+    div, px, size, view, AnyView, AppContext, Bounds, Context, ViewContext, WindowBounds,
     WindowOptions,
 };
 use log::LevelFilter;
@@ -107,7 +107,7 @@ impl StoryWrapper {
         Self { story, theme }
     }
 
-    fn render(&mut self, cx: &mut ViewContext<Self>) -> impl Element<ViewState = Self> {
+    fn render(&mut self, cx: &mut ViewContext<Self>) -> impl Component<Self> {
         themed(self.theme.clone(), cx, |cx| {
             div()
                 .flex()

crates/ui2/src/components/assistant_panel.rs

@@ -1,22 +1,18 @@
-use std::marker::PhantomData;
-
 use gpui2::{rems, AbsoluteLength};
 
 use crate::prelude::*;
 use crate::{Icon, IconButton, Label, Panel, PanelSide};
 
-#[derive(Element)]
-pub struct AssistantPanel<S: 'static + Send + Sync> {
+#[derive(Component)]
+pub struct AssistantPanel {
     id: ElementId,
-    state_type: PhantomData<S>,
     current_side: PanelSide,
 }
 
-impl<S: 'static + Send + Sync> AssistantPanel<S> {
+impl AssistantPanel {
     pub fn new(id: impl Into<ElementId>) -> Self {
         Self {
             id: id.into(),
-            state_type: PhantomData,
             current_side: PanelSide::default(),
         }
     }
@@ -26,7 +22,7 @@ impl<S: 'static + Send + Sync> AssistantPanel<S> {
         self
     }
 
-    fn render(&mut self, view: &mut S, cx: &mut ViewContext<S>) -> impl Element<ViewState = S> {
+    fn render<V: 'static>(self, view: &mut V, cx: &mut ViewContext<V>) -> impl Component<V> {
         Panel::new(self.id.clone(), cx)
             .children(vec![div()
                 .flex()
@@ -69,7 +65,7 @@ impl<S: 'static + Send + Sync> AssistantPanel<S> {
                         .overflow_y_scroll()
                         .child(Label::new("Is this thing on?")),
                 )
-                .into_any()])
+                .render()])
             .side(self.current_side)
             .width(AbsoluteLength::Rems(rems(32.)))
     }
@@ -84,25 +80,17 @@ mod stories {
 
     use super::*;
 
-    #[derive(Element)]
-    pub struct AssistantPanelStory<S: 'static + Send + Sync> {
-        state_type: PhantomData<S>,
-    }
+    #[derive(Component)]
+    pub struct AssistantPanelStory {}
 
-    impl<S: 'static + Send + Sync> AssistantPanelStory<S> {
+    impl AssistantPanelStory {
         pub fn new() -> Self {
-            Self {
-                state_type: PhantomData,
-            }
+            Self {}
         }
 
-        fn render(
-            &mut self,
-            _view: &mut S,
-            cx: &mut ViewContext<S>,
-        ) -> impl Element<ViewState = S> {
+        fn render<V: 'static>(self, _view: &mut V, cx: &mut ViewContext<V>) -> impl Component<V> {
             Story::container(cx)
-                .child(Story::title_for::<_, AssistantPanel<S>>(cx))
+                .child(Story::title_for::<_, AssistantPanel>(cx))
                 .child(Story::label(cx, "Default"))
                 .child(AssistantPanel::new("assistant-panel"))
         }

crates/ui2/src/components/breadcrumb.rs

@@ -1,41 +1,33 @@
-use std::marker::PhantomData;
 use std::path::PathBuf;
 
 use gpui2::Div;
-
 use crate::prelude::*;
 use crate::{h_stack, HighlightedText};
 
 #[derive(Clone)]
 pub struct Symbol(pub Vec<HighlightedText>);
 
-#[derive(Element)]
-pub struct Breadcrumb<S: 'static + Send + Sync> {
-    state_type: PhantomData<S>,
+#[derive(Component)]
+pub struct Breadcrumb {
     path: PathBuf,
     symbols: Vec<Symbol>,
 }
 
-impl<S: 'static + Send + Sync> Breadcrumb<S> {
+impl Breadcrumb {
     pub fn new(path: PathBuf, symbols: Vec<Symbol>) -> Self {
         Self {
-            state_type: PhantomData,
             path,
             symbols,
         }
     }
 
-    fn render_separator(&self, cx: &WindowContext) -> Div<S> {
+    fn render_separator<V: 'static>(&self, cx: &WindowContext) -> Div<V> {
         let theme = theme(cx);
 
         div().child(" › ").text_color(theme.text_muted)
     }
 
-    fn render(
-        &mut self,
-        view_state: &mut S,
-        cx: &mut ViewContext<S>,
-    ) -> impl Element<ViewState = S> {
+    fn render<V: 'static>(self, view_state: &mut V, cx: &mut ViewContext<V>) -> impl Component<V> {
         let theme = theme(cx);
 
         let symbols_len = self.symbols.len();
@@ -90,27 +82,19 @@ mod stories {
 
     use super::*;
 
-    #[derive(Element)]
-    pub struct BreadcrumbStory<S: 'static + Send + Sync> {
-        state_type: PhantomData<S>,
-    }
+    #[derive(Component)]
+    pub struct BreadcrumbStory;
 
-    impl<S: 'static + Send + Sync> BreadcrumbStory<S> {
+    impl BreadcrumbStory {
         pub fn new() -> Self {
-            Self {
-                state_type: PhantomData,
-            }
+            Self
         }
 
-        fn render(
-            &mut self,
-            view_state: &mut S,
-            cx: &mut ViewContext<S>,
-        ) -> impl Element<ViewState = S> {
+        fn render<V: 'static>(self, view_state: &mut V, cx: &mut ViewContext<V>) -> impl Component<V> {
             let theme = theme(cx);
 
             Story::container(cx)
-                .child(Story::title_for::<_, Breadcrumb<S>>(cx))
+                .child(Story::title_for::<_, Breadcrumb>(cx))
                 .child(Story::label(cx, "Default"))
                 .child(Breadcrumb::new(
                     PathBuf::from_str("crates/ui/src/components/toolbar.rs").unwrap(),

crates/ui2/src/components/buffer.rs

@@ -1,5 +1,3 @@
-use std::marker::PhantomData;
-
 use gpui2::{Hsla, WindowContext};
 
 use crate::prelude::*;
@@ -109,10 +107,9 @@ impl BufferRow {
     }
 }
 
-#[derive(Element, Clone)]
-pub struct Buffer<S: 'static + Send + Sync + Clone> {
+#[derive(Component, Clone)]
+pub struct Buffer {
     id: ElementId,
-    state_type: PhantomData<S>,
     rows: Option<BufferRows>,
     readonly: bool,
     language: Option<String>,
@@ -120,11 +117,10 @@ pub struct Buffer<S: 'static + Send + Sync + Clone> {
     path: Option<String>,
 }
 
-impl<S: 'static + Send + Sync + Clone> Buffer<S> {
+impl Buffer {
     pub fn new(id: impl Into<ElementId>) -> Self {
         Self {
             id: id.into(),
-            state_type: PhantomData,
             rows: Some(BufferRows::default()),
             readonly: false,
             language: None,
@@ -158,7 +154,7 @@ impl<S: 'static + Send + Sync + Clone> Buffer<S> {
         self
     }
 
-    fn render_row(row: BufferRow, cx: &WindowContext) -> impl Element<ViewState = S> {
+    fn render_row<S: 'static>(row: BufferRow, cx: &WindowContext) -> impl Component<S> {
         let theme = theme(cx);
 
         let line_background = if row.current {
@@ -208,7 +204,7 @@ impl<S: 'static + Send + Sync + Clone> Buffer<S> {
             }))
     }
 
-    fn render_rows(&self, cx: &WindowContext) -> Vec<impl Element<ViewState = S>> {
+    fn render_rows<S: 'static>(&self, cx: &WindowContext) -> Vec<impl Component<S>> {
         match &self.rows {
             Some(rows) => rows
                 .rows
@@ -219,7 +215,7 @@ impl<S: 'static + Send + Sync + Clone> Buffer<S> {
         }
     }
 
-    fn render(&mut self, _view: &mut S, cx: &mut ViewContext<S>) -> impl Element<ViewState = S> {
+    fn render<S: 'static>(self, _view: &mut S, cx: &mut ViewContext<S>) -> impl Component<S> {
         let theme = theme(cx);
         let rows = self.render_rows(cx);
 
@@ -246,27 +242,19 @@ mod stories {
 
     use super::*;
 
-    #[derive(Element)]
-    pub struct BufferStory<S: 'static + Send + Sync + Clone> {
-        state_type: PhantomData<S>,
-    }
+    #[derive(Component)]
+    pub struct BufferStory;
 
-    impl<S: 'static + Send + Sync + Clone> BufferStory<S> {
+    impl BufferStory {
         pub fn new() -> Self {
-            Self {
-                state_type: PhantomData,
-            }
+            Self
         }
 
-        fn render(
-            &mut self,
-            _view: &mut S,
-            cx: &mut ViewContext<S>,
-        ) -> impl Element<ViewState = S> {
+        fn render<S: 'static>(self, _view: &mut S, cx: &mut ViewContext<S>) -> impl Component<S> {
             let theme = theme(cx);
 
             Story::container(cx)
-                .child(Story::title_for::<_, Buffer<S>>(cx))
+                .child(Story::title_for::<_, Buffer>(cx))
                 .child(Story::label(cx, "Default"))
                 .child(div().w(rems(64.)).h_96().child(empty_buffer_example()))
                 .child(Story::label(cx, "Hello World (Rust)"))

crates/ui2/src/components/buffer_search.rs

@@ -25,7 +25,7 @@ impl BufferSearch {
         view(cx.entity(|cx| Self::new()), Self::render)
     }
 
-    fn render(&mut self, cx: &mut ViewContext<Self>) -> impl Element<ViewState = Self> {
+    fn render(&mut self, cx: &mut ViewContext<Self>) -> impl Component<Self> {
         let theme = theme(cx);
 
         h_stack().bg(theme.toolbar).p_2().child(

crates/ui2/src/components/chat_panel.rs

@@ -1,17 +1,15 @@
-use std::marker::PhantomData;
-
 use chrono::NaiveDateTime;
 
 use crate::prelude::*;
 use crate::{Icon, IconButton, Input, Label, LabelColor};
 
-#[derive(Element)]
-pub struct ChatPanel<S: 'static + Send + Sync> {
+#[derive(Component)]
+pub struct ChatPanel {
     element_id: ElementId,
-    messages: Vec<ChatMessage<S>>,
+    messages: Vec<ChatMessage>,
 }
 
-impl<S: 'static + Send + Sync> ChatPanel<S> {
+impl ChatPanel {
     pub fn new(element_id: impl Into<ElementId>) -> Self {
         Self {
             element_id: element_id.into(),
@@ -19,12 +17,12 @@ impl<S: 'static + Send + Sync> ChatPanel<S> {
         }
     }
 
-    pub fn messages(mut self, messages: Vec<ChatMessage<S>>) -> Self {
+    pub fn messages(mut self, messages: Vec<ChatMessage>) -> Self {
         self.messages = messages;
         self
     }
 
-    fn render(&mut self, _view: &mut S, cx: &mut ViewContext<S>) -> impl Element<ViewState = S> {
+    fn render<S: 'static>(mut self, _view: &mut S, cx: &mut ViewContext<S>) -> impl Component<S> {
         div()
             .id(self.element_id.clone())
             .flex()
@@ -70,25 +68,23 @@ impl<S: 'static + Send + Sync> ChatPanel<S> {
     }
 }
 
-#[derive(Element)]
-pub struct ChatMessage<S: 'static + Send + Sync> {
-    state_type: PhantomData<S>,
+#[derive(Component)]
+pub struct ChatMessage {
     author: String,
     text: String,
     sent_at: NaiveDateTime,
 }
 
-impl<S: 'static + Send + Sync> ChatMessage<S> {
+impl ChatMessage {
     pub fn new(author: String, text: String, sent_at: NaiveDateTime) -> Self {
         Self {
-            state_type: PhantomData,
             author,
             text,
             sent_at,
         }
     }
 
-    fn render(&mut self, _view: &mut S, cx: &mut ViewContext<S>) -> impl Element<ViewState = S> {
+    fn render<S: 'static>(self, _view: &mut S, cx: &mut ViewContext<S>) -> impl Component<S> {
         div()
             .flex()
             .flex_col()
@@ -117,25 +113,17 @@ mod stories {
 
     use super::*;
 
-    #[derive(Element)]
-    pub struct ChatPanelStory<S: 'static + Send + Sync> {
-        state_type: PhantomData<S>,
-    }
+    #[derive(Component)]
+    pub struct ChatPanelStory;
 
-    impl<S: 'static + Send + Sync> ChatPanelStory<S> {
+    impl ChatPanelStory {
         pub fn new() -> Self {
-            Self {
-                state_type: PhantomData,
-            }
+            Self
         }
 
-        fn render(
-            &mut self,
-            _view: &mut S,
-            cx: &mut ViewContext<S>,
-        ) -> impl Element<ViewState = S> {
+        fn render<S: 'static>(self, _view: &mut S, cx: &mut ViewContext<S>) -> impl Component<S> {
             Story::container(cx)
-                .child(Story::title_for::<_, ChatPanel<S>>(cx))
+                .child(Story::title_for::<_, ChatPanel>(cx))
                 .child(Story::label(cx, "Default"))
                 .child(
                     Panel::new("chat-panel-1-outer", cx)

crates/ui2/src/components/collab_panel.rs

@@ -3,23 +3,18 @@ use crate::{
     static_collab_panel_channels, static_collab_panel_current_call, v_stack, Icon, List,
     ListHeader, ToggleState,
 };
-use std::marker::PhantomData;
 
-#[derive(Element)]
-pub struct CollabPanel<S: 'static + Send + Sync> {
+#[derive(Component)]
+pub struct CollabPanel {
     id: ElementId,
-    state_type: PhantomData<S>,
 }
 
-impl<S: 'static + Send + Sync> CollabPanel<S> {
+impl CollabPanel {
     pub fn new(id: impl Into<ElementId>) -> Self {
-        Self {
-            id: id.into(),
-            state_type: PhantomData,
-        }
+        Self { id: id.into() }
     }
 
-    fn render(&mut self, _view: &mut S, cx: &mut ViewContext<S>) -> impl Element<ViewState = S> {
+    fn render<S: 'static>(self, _view: &mut S, cx: &mut ViewContext<S>) -> impl Component<S> {
         let theme = theme(cx);
 
         v_stack()
@@ -98,25 +93,17 @@ mod stories {
 
     use super::*;
 
-    #[derive(Element)]
-    pub struct CollabPanelStory<S: 'static + Send + Sync> {
-        state_type: PhantomData<S>,
-    }
+    #[derive(Component)]
+    pub struct CollabPanelStory;
 
-    impl<S: 'static + Send + Sync> CollabPanelStory<S> {
+    impl CollabPanelStory {
         pub fn new() -> Self {
-            Self {
-                state_type: PhantomData,
-            }
+            Self
         }
 
-        fn render(
-            &mut self,
-            _view: &mut S,
-            cx: &mut ViewContext<S>,
-        ) -> impl Element<ViewState = S> {
+        fn render<S: 'static>(self, _view: &mut S, cx: &mut ViewContext<S>) -> impl Component<S> {
             Story::container(cx)
-                .child(Story::title_for::<_, CollabPanel<S>>(cx))
+                .child(Story::title_for::<_, CollabPanel>(cx))
                 .child(Story::label(cx, "Default"))
                 .child(CollabPanel::new("collab-panel"))
         }

crates/ui2/src/components/command_palette.rs

@@ -1,23 +1,17 @@
-use std::marker::PhantomData;
-
 use crate::prelude::*;
 use crate::{example_editor_actions, OrderMethod, Palette};
 
-#[derive(Element)]
-pub struct CommandPalette<S: 'static + Send + Sync> {
+#[derive(Component)]
+pub struct CommandPalette {
     id: ElementId,
-    state_type: PhantomData<S>,
 }
 
-impl<S: 'static + Send + Sync> CommandPalette<S> {
+impl CommandPalette {
     pub fn new(id: impl Into<ElementId>) -> Self {
-        Self {
-            id: id.into(),
-            state_type: PhantomData,
-        }
+        Self { id: id.into() }
     }
 
-    fn render(&mut self, _view: &mut S, cx: &mut ViewContext<S>) -> impl Element<ViewState = S> {
+    fn render<S: 'static>(self, _view: &mut S, cx: &mut ViewContext<S>) -> impl Component<S> {
         div().id(self.id.clone()).child(
             Palette::new("palette")
                 .items(example_editor_actions())
@@ -37,25 +31,17 @@ mod stories {
 
     use super::*;
 
-    #[derive(Element)]
-    pub struct CommandPaletteStory<S: 'static + Send + Sync> {
-        state_type: PhantomData<S>,
-    }
+    #[derive(Component)]
+    pub struct CommandPaletteStory;
 
-    impl<S: 'static + Send + Sync> CommandPaletteStory<S> {
+    impl CommandPaletteStory {
         pub fn new() -> Self {
-            Self {
-                state_type: PhantomData,
-            }
+            Self
         }
 
-        fn render(
-            &mut self,
-            _view: &mut S,
-            cx: &mut ViewContext<S>,
-        ) -> impl Element<ViewState = S> {
+        fn render<S: 'static>(self, _view: &mut S, cx: &mut ViewContext<S>) -> impl Component<S> {
             Story::container(cx)
-                .child(Story::title_for::<_, CommandPalette<S>>(cx))
+                .child(Story::title_for::<_, CommandPalette>(cx))
                 .child(Story::label(cx, "Default"))
                 .child(CommandPalette::new("command-palette"))
         }

crates/ui2/src/components/context_menu.rs

@@ -1,14 +1,14 @@
 use crate::{prelude::*, ListItemVariant};
 use crate::{v_stack, Label, List, ListEntry, ListItem, ListSeparator, ListSubHeader};
 
-pub enum ContextMenuItem<S: 'static + Send + Sync> {
+pub enum ContextMenuItem {
     Header(SharedString),
-    Entry(Label<S>),
+    Entry(Label),
     Separator,
 }
 
-impl<S: 'static + Send + Sync> ContextMenuItem<S> {
-    fn to_list_item(self) -> ListItem<S> {
+impl ContextMenuItem {
+    fn to_list_item<V: 'static>(self) -> ListItem<V> {
         match self {
             ContextMenuItem::Header(label) => ListSubHeader::new(label).into(),
             ContextMenuItem::Entry(label) => {
@@ -26,23 +26,23 @@ impl<S: 'static + Send + Sync> ContextMenuItem<S> {
         Self::Separator
     }
 
-    pub fn entry(label: Label<S>) -> Self {
+    pub fn entry(label: Label) -> Self {
         Self::Entry(label)
     }
 }
 
-#[derive(Element)]
-pub struct ContextMenu<S: 'static + Send + Sync> {
-    items: Vec<ContextMenuItem<S>>,
+#[derive(Component)]
+pub struct ContextMenu {
+    items: Vec<ContextMenuItem>,
 }
 
-impl<S: 'static + Send + Sync> ContextMenu<S> {
-    pub fn new(items: impl IntoIterator<Item = ContextMenuItem<S>>) -> Self {
+impl ContextMenu {
+    pub fn new(items: impl IntoIterator<Item = ContextMenuItem>) -> Self {
         Self {
             items: items.into_iter().collect(),
         }
     }
-    fn render(&mut self, _view: &mut S, cx: &mut ViewContext<S>) -> impl Element<ViewState = S> {
+    fn render<S: 'static>(mut self, _view: &mut S, cx: &mut ViewContext<S>) -> impl Component<S> {
         let theme = theme(cx);
 
         v_stack()
@@ -67,31 +67,21 @@ pub use stories::*;
 
 #[cfg(feature = "stories")]
 mod stories {
-    use std::marker::PhantomData;
-
     use crate::story::Story;
 
     use super::*;
 
-    #[derive(Element)]
-    pub struct ContextMenuStory<S: 'static + Send + Sync> {
-        state_type: PhantomData<S>,
-    }
+    #[derive(Component)]
+    pub struct ContextMenuStory;
 
-    impl<S: 'static + Send + Sync> ContextMenuStory<S> {
+    impl ContextMenuStory {
         pub fn new() -> Self {
-            Self {
-                state_type: PhantomData,
-            }
+            Self
         }
 
-        fn render(
-            &mut self,
-            _view: &mut S,
-            cx: &mut ViewContext<S>,
-        ) -> impl Element<ViewState = S> {
+        fn render<S: 'static>(self, _view: &mut S, cx: &mut ViewContext<S>) -> impl Component<S> {
             Story::container(cx)
-                .child(Story::title_for::<_, ContextMenu<S>>(cx))
+                .child(Story::title_for::<_, ContextMenu>(cx))
                 .child(Story::label(cx, "Default"))
                 .child(ContextMenu::new([
                     ContextMenuItem::header("Section header"),

crates/ui2/src/components/copilot.rs

@@ -1,22 +1,16 @@
-use std::marker::PhantomData;
-
 use crate::{prelude::*, Button, Label, LabelColor, Modal};
 
-#[derive(Element)]
-pub struct CopilotModal<S: 'static + Send + Sync + Clone> {
+#[derive(Component)]
+pub struct CopilotModal {
     id: ElementId,
-    state_type: PhantomData<S>,
 }
 
-impl<S: 'static + Send + Sync + Clone> CopilotModal<S> {
+impl CopilotModal {
     pub fn new(id: impl Into<ElementId>) -> Self {
-        Self {
-            id: id.into(),
-            state_type: PhantomData,
-        }
+        Self { id: id.into() }
     }
 
-    fn render(&mut self, _view: &mut S, cx: &mut ViewContext<S>) -> impl Element<ViewState = S> {
+    fn render<S: 'static>(self, _view: &mut S, cx: &mut ViewContext<S>) -> impl Component<S> {
         div().id(self.id.clone()).child(
             Modal::new("some-id")
                 .title("Connect Copilot to Zed")
@@ -35,25 +29,17 @@ mod stories {
 
     use super::*;
 
-    #[derive(Element)]
-    pub struct CopilotModalStory<S: 'static + Send + Sync + Clone> {
-        state_type: PhantomData<S>,
-    }
+    #[derive(Component)]
+    pub struct CopilotModalStory;
 
-    impl<S: 'static + Send + Sync + Clone> CopilotModalStory<S> {
+    impl CopilotModalStory {
         pub fn new() -> Self {
-            Self {
-                state_type: PhantomData,
-            }
+            Self
         }
 
-        fn render(
-            &mut self,
-            _view: &mut S,
-            cx: &mut ViewContext<S>,
-        ) -> impl Element<ViewState = S> {
+        fn render<S: 'static>(self, _view: &mut S, cx: &mut ViewContext<S>) -> impl Component<S> {
             Story::container(cx)
-                .child(Story::title_for::<_, CopilotModal<S>>(cx))
+                .child(Story::title_for::<_, CopilotModal>(cx))
                 .child(Story::label(cx, "Default"))
                 .child(CopilotModal::new("copilot-modal"))
         }

crates/ui2/src/components/editor_pane.rs

@@ -10,10 +10,10 @@ use crate::{
 
 #[derive(Clone)]
 pub struct EditorPane {
-    tabs: Vec<Tab<Self>>,
+    tabs: Vec<Tab>,
     path: PathBuf,
     symbols: Vec<Symbol>,
-    buffer: Buffer<Self>,
+    buffer: Buffer,
     buffer_search: View<BufferSearch>,
     is_buffer_search_open: bool,
 }
@@ -21,10 +21,10 @@ pub struct EditorPane {
 impl EditorPane {
     pub fn new(
         cx: &mut WindowContext,
-        tabs: Vec<Tab<Self>>,
+        tabs: Vec<Tab>,
         path: PathBuf,
         symbols: Vec<Symbol>,
-        buffer: Buffer<Self>,
+        buffer: Buffer,
     ) -> Self {
         Self {
             tabs,
@@ -49,7 +49,7 @@ impl EditorPane {
         )
     }
 
-    fn render(&mut self, cx: &mut ViewContext<Self>) -> impl Element<ViewState = Self> {
+    fn render(&mut self, cx: &mut ViewContext<Self>) -> impl Component<Self> {
         v_stack()
             .w_full()
             .h_full()

crates/ui2/src/components/facepile.rs

@@ -1,23 +1,19 @@
-use std::marker::PhantomData;
-
 use crate::prelude::*;
 use crate::{Avatar, Player};
 
-#[derive(Element)]
-pub struct Facepile<S: 'static + Send + Sync> {
-    state_type: PhantomData<S>,
+#[derive(Component)]
+pub struct Facepile {
     players: Vec<Player>,
 }
 
-impl<S: 'static + Send + Sync> Facepile<S> {
+impl Facepile {
     pub fn new<P: Iterator<Item = Player>>(players: P) -> Self {
         Self {
-            state_type: PhantomData,
             players: players.collect(),
         }
     }
 
-    fn render(&mut self, _view: &mut S, cx: &mut ViewContext<S>) -> impl Element<ViewState = S> {
+    fn render<S: 'static>(self, _view: &mut S, cx: &mut ViewContext<S>) -> impl Component<S> {
         let player_count = self.players.len();
         let player_list = self.players.iter().enumerate().map(|(ix, player)| {
             let isnt_last = ix < player_count - 1;
@@ -39,27 +35,19 @@ mod stories {
 
     use super::*;
 
-    #[derive(Element)]
-    pub struct FacepileStory<S: 'static + Send + Sync> {
-        state_type: PhantomData<S>,
-    }
+    #[derive(Component)]
+    pub struct FacepileStory;
 
-    impl<S: 'static + Send + Sync> FacepileStory<S> {
+    impl FacepileStory {
         pub fn new() -> Self {
-            Self {
-                state_type: PhantomData,
-            }
+            Self
         }
 
-        fn render(
-            &mut self,
-            _view: &mut S,
-            cx: &mut ViewContext<S>,
-        ) -> impl Element<ViewState = S> {
+        fn render<S: 'static>(self, _view: &mut S, cx: &mut ViewContext<S>) -> impl Component<S> {
             let players = static_players();
 
             Story::container(cx)
-                .child(Story::title_for::<_, Facepile<S>>(cx))
+                .child(Story::title_for::<_, Facepile>(cx))
                 .child(Story::label(cx, "Default"))
                 .child(
                     div()

crates/ui2/src/components/icon_button.rs

@@ -1,4 +1,3 @@
-use std::marker::PhantomData;
 use std::sync::Arc;
 
 use gpui2::MouseButton;
@@ -6,19 +5,18 @@ use gpui2::MouseButton;
 use crate::{h_stack, prelude::*};
 use crate::{ClickHandler, Icon, IconColor, IconElement};
 
-struct IconButtonHandlers<S: 'static + Send + Sync> {
+struct IconButtonHandlers<S: 'static> {
     click: Option<ClickHandler<S>>,
 }
 
-impl<S: 'static + Send + Sync> Default for IconButtonHandlers<S> {
+impl<S: 'static> Default for IconButtonHandlers<S> {
     fn default() -> Self {
         Self { click: None }
     }
 }
 
-#[derive(Element)]
-pub struct IconButton<S: 'static + Send + Sync> {
-    state_type: PhantomData<S>,
+#[derive(Component)]
+pub struct IconButton<S: 'static> {
     id: ElementId,
     icon: Icon,
     color: IconColor,
@@ -27,10 +25,9 @@ pub struct IconButton<S: 'static + Send + Sync> {
     handlers: IconButtonHandlers<S>,
 }
 
-impl<S: 'static + Send + Sync> IconButton<S> {
+impl<S: 'static> IconButton<S> {
     pub fn new(id: impl Into<ElementId>, icon: Icon) -> Self {
         Self {
-            state_type: PhantomData,
             id: id.into(),
             icon,
             color: IconColor::default(),
@@ -60,15 +57,12 @@ impl<S: 'static + Send + Sync> IconButton<S> {
         self
     }
 
-    pub fn on_click(
-        mut self,
-        handler: impl Fn(&mut S, &mut ViewContext<S>) + 'static + Send + Sync,
-    ) -> Self {
+    pub fn on_click(mut self, handler: impl 'static + Fn(&mut S, &mut ViewContext<S>) + Send + Sync) -> Self {
         self.handlers.click = Some(Arc::new(handler));
         self
     }
 
-    fn render(&mut self, _view: &mut S, cx: &mut ViewContext<S>) -> impl Element<ViewState = S> {
+    fn render(self, _view: &mut S, cx: &mut ViewContext<S>) -> impl Component<S> {
         let theme = theme(cx);
 
         let icon_color = match (self.state, self.color) {

crates/ui2/src/components/keybinding.rs

@@ -1,14 +1,11 @@
 use std::collections::HashSet;
-use std::marker::PhantomData;
 
 use strum::{EnumIter, IntoEnumIterator};
 
 use crate::prelude::*;
 
-#[derive(Element)]
-pub struct Keybinding<S: 'static + Send + Sync> {
-    state_type: PhantomData<S>,
-
+#[derive(Component)]
+pub struct Keybinding {
     /// A keybinding consists of a key and a set of modifier keys.
     /// More then one keybinding produces a chord.
     ///
@@ -16,10 +13,9 @@ pub struct Keybinding<S: 'static + Send + Sync> {
     keybinding: Vec<(String, ModifierKeys)>,
 }
 
-impl<S: 'static + Send + Sync> Keybinding<S> {
+impl Keybinding {
     pub fn new(key: String, modifiers: ModifierKeys) -> Self {
         Self {
-            state_type: PhantomData,
             keybinding: vec![(key, modifiers)],
         }
     }
@@ -29,12 +25,11 @@ impl<S: 'static + Send + Sync> Keybinding<S> {
         second_note: (String, ModifierKeys),
     ) -> Self {
         Self {
-            state_type: PhantomData,
             keybinding: vec![first_note, second_note],
         }
     }
 
-    fn render(&mut self, _view: &mut S, cx: &mut ViewContext<S>) -> impl Element<ViewState = S> {
+    fn render<S: 'static>(self, _view: &mut S, cx: &mut ViewContext<S>) -> impl Component<S> {
         div()
             .flex()
             .gap_2()
@@ -54,21 +49,17 @@ impl<S: 'static + Send + Sync> Keybinding<S> {
     }
 }
 
-#[derive(Element)]
-pub struct Key<S: 'static + Send + Sync> {
-    state_type: PhantomData<S>,
+#[derive(Component)]
+pub struct Key {
     key: SharedString,
 }
 
-impl<S: 'static + Send + Sync> Key<S> {
+impl Key {
     pub fn new(key: impl Into<SharedString>) -> Self {
-        Self {
-            state_type: PhantomData,
-            key: key.into(),
-        }
+        Self { key: key.into() }
     }
 
-    fn render(&mut self, _view: &mut S, cx: &mut ViewContext<S>) -> impl Element<ViewState = S> {
+    fn render<S: 'static>(self, _view: &mut S, cx: &mut ViewContext<S>) -> impl Component<S> {
         let theme = theme(cx);
 
         div()
@@ -173,27 +164,19 @@ mod stories {
 
     use super::*;
 
-    #[derive(Element)]
-    pub struct KeybindingStory<S: 'static + Send + Sync + Clone> {
-        state_type: PhantomData<S>,
-    }
+    #[derive(Component)]
+    pub struct KeybindingStory;
 
-    impl<S: 'static + Send + Sync + Clone> KeybindingStory<S> {
+    impl KeybindingStory {
         pub fn new() -> Self {
-            Self {
-                state_type: PhantomData,
-            }
+            Self
         }
 
-        fn render(
-            &mut self,
-            _view: &mut S,
-            cx: &mut ViewContext<S>,
-        ) -> impl Element<ViewState = S> {
+        fn render<V: 'static>(self, _view: &mut V, cx: &mut ViewContext<V>) -> impl Component<V> {
             let all_modifier_permutations = ModifierKey::iter().permutations(2);
 
             Story::container(cx)
-                .child(Story::title_for::<_, Keybinding<S>>(cx))
+                .child(Story::title_for::<_, Keybinding>(cx))
                 .child(Story::label(cx, "Single Key"))
                 .child(Keybinding::new("Z".to_string(), ModifierKeys::new()))
                 .child(Story::label(cx, "Single Key with Modifier"))

crates/ui2/src/components/language_selector.rs

@@ -1,23 +1,17 @@
-use std::marker::PhantomData;
-
 use crate::prelude::*;
 use crate::{OrderMethod, Palette, PaletteItem};
 
-#[derive(Element)]
-pub struct LanguageSelector<S: 'static + Send + Sync + Clone> {
+#[derive(Component)]
+pub struct LanguageSelector {
     id: ElementId,
-    state_type: PhantomData<S>,
 }
 
-impl<S: 'static + Send + Sync + Clone> LanguageSelector<S> {
+impl LanguageSelector {
     pub fn new(id: impl Into<ElementId>) -> Self {
-        Self {
-            id: id.into(),
-            state_type: PhantomData,
-        }
+        Self { id: id.into() }
     }
 
-    fn render(&mut self, _view: &mut S, cx: &mut ViewContext<S>) -> impl Element<ViewState = S> {
+    fn render<S: 'static>(self, _view: &mut S, cx: &mut ViewContext<S>) -> impl Component<S> {
         div().id(self.id.clone()).child(
             Palette::new("palette")
                 .items(vec![
@@ -48,25 +42,17 @@ mod stories {
 
     use super::*;
 
-    #[derive(Element)]
-    pub struct LanguageSelectorStory<S: 'static + Send + Sync + Clone> {
-        state_type: PhantomData<S>,
-    }
+    #[derive(Component)]
+    pub struct LanguageSelectorStory;
 
-    impl<S: 'static + Send + Sync + Clone> LanguageSelectorStory<S> {
+    impl LanguageSelectorStory {
         pub fn new() -> Self {
-            Self {
-                state_type: PhantomData,
-            }
+            Self
         }
 
-        fn render(
-            &mut self,
-            _view: &mut S,
-            cx: &mut ViewContext<S>,
-        ) -> impl Element<ViewState = S> {
+        fn render<S: 'static>(self, _view: &mut S, cx: &mut ViewContext<S>) -> impl Component<S> {
             Story::container(cx)
-                .child(Story::title_for::<_, LanguageSelector<S>>(cx))
+                .child(Story::title_for::<_, LanguageSelector>(cx))
                 .child(Story::label(cx, "Default"))
                 .child(LanguageSelector::new("language-selector"))
         }

crates/ui2/src/components/list.rs

@@ -1,5 +1,3 @@
-use std::marker::PhantomData;
-
 use gpui2::{div, relative, Div};
 
 use crate::settings::user_settings;
@@ -17,9 +15,8 @@ pub enum ListItemVariant {
     Inset,
 }
 
-#[derive(Element)]
-pub struct ListHeader<S: 'static + Send + Sync> {
-    state_type: PhantomData<S>,
+#[derive(Component)]
+pub struct ListHeader {
     label: SharedString,
     left_icon: Option<Icon>,
     variant: ListItemVariant,
@@ -27,10 +24,9 @@ pub struct ListHeader<S: 'static + Send + Sync> {
     toggleable: Toggleable,
 }
 
-impl<S: 'static + Send + Sync> ListHeader<S> {
+impl ListHeader {
     pub fn new(label: impl Into<SharedString>) -> Self {
         Self {
-            state_type: PhantomData,
             label: label.into(),
             left_icon: None,
             variant: ListItemVariant::default(),
@@ -59,7 +55,7 @@ impl<S: 'static + Send + Sync> ListHeader<S> {
         self
     }
 
-    fn disclosure_control(&self) -> Div<S> {
+    fn disclosure_control<S: 'static>(&self) -> Div<S> {
         let is_toggleable = self.toggleable != Toggleable::NotToggleable;
         let is_toggled = Toggleable::is_toggled(&self.toggleable);
 
@@ -92,7 +88,7 @@ impl<S: 'static + Send + Sync> ListHeader<S> {
         }
     }
 
-    fn render(&mut self, _view: &mut S, cx: &mut ViewContext<S>) -> impl Element<ViewState = S> {
+    fn render<S: 'static>(self, _view: &mut S, cx: &mut ViewContext<S>) -> impl Component<S> {
         let theme = theme(cx);
 
         let is_toggleable = self.toggleable != Toggleable::NotToggleable;
@@ -134,18 +130,16 @@ impl<S: 'static + Send + Sync> ListHeader<S> {
     }
 }
 
-#[derive(Element)]
-pub struct ListSubHeader<S: 'static + Send + Sync> {
-    state_type: PhantomData<S>,
+#[derive(Component)]
+pub struct ListSubHeader {
     label: SharedString,
     left_icon: Option<Icon>,
     variant: ListItemVariant,
 }
 
-impl<S: 'static + Send + Sync> ListSubHeader<S> {
+impl ListSubHeader {
     pub fn new(label: impl Into<SharedString>) -> Self {
         Self {
-            state_type: PhantomData,
             label: label.into(),
             left_icon: None,
             variant: ListItemVariant::default(),
@@ -157,7 +151,7 @@ impl<S: 'static + Send + Sync> ListSubHeader<S> {
         self
     }
 
-    fn render(&mut self, _view: &mut S, cx: &mut ViewContext<S>) -> impl Element<ViewState = S> {
+    fn render<S: 'static>(self, _view: &mut S, cx: &mut ViewContext<S>) -> impl Component<S> {
         h_stack().flex_1().w_full().relative().py_1().child(
             div()
                 .h_6()
@@ -197,40 +191,40 @@ pub enum ListEntrySize {
     Medium,
 }
 
-#[derive(Element)]
-pub enum ListItem<S: 'static + Send + Sync> {
-    Entry(ListEntry<S>),
+#[derive(Component)]
+pub enum ListItem<S: 'static> {
+    Entry(ListEntry),
     Details(ListDetailsEntry<S>),
-    Separator(ListSeparator<S>),
-    Header(ListSubHeader<S>),
+    Separator(ListSeparator),
+    Header(ListSubHeader),
 }
 
-impl<S: 'static + Send + Sync> From<ListEntry<S>> for ListItem<S> {
-    fn from(entry: ListEntry<S>) -> Self {
+impl<S: 'static> From<ListEntry> for ListItem<S> {
+    fn from(entry: ListEntry) -> Self {
         Self::Entry(entry)
     }
 }
 
-impl<S: 'static + Send + Sync> From<ListDetailsEntry<S>> for ListItem<S> {
+impl<S: 'static> From<ListDetailsEntry<S>> for ListItem<S> {
     fn from(entry: ListDetailsEntry<S>) -> Self {
         Self::Details(entry)
     }
 }
 
-impl<S: 'static + Send + Sync> From<ListSeparator<S>> for ListItem<S> {
-    fn from(entry: ListSeparator<S>) -> Self {
+impl<S: 'static> From<ListSeparator> for ListItem<S> {
+    fn from(entry: ListSeparator) -> Self {
         Self::Separator(entry)
     }
 }
 
-impl<S: 'static + Send + Sync> From<ListSubHeader<S>> for ListItem<S> {
-    fn from(entry: ListSubHeader<S>) -> Self {
+impl<S: 'static> From<ListSubHeader> for ListItem<S> {
+    fn from(entry: ListSubHeader) -> Self {
         Self::Header(entry)
     }
 }
 
-impl<S: 'static + Send + Sync> ListItem<S> {
-    fn render(&mut self, view: &mut S, cx: &mut ViewContext<S>) -> impl Element<ViewState = S> {
+impl<S: 'static> ListItem<S> {
+    fn render(self, view: &mut S, cx: &mut ViewContext<S>) -> impl Component<S> {
         match self {
             ListItem::Entry(entry) => div().child(entry.render(view, cx)),
             ListItem::Separator(separator) => div().child(separator.render(view, cx)),
@@ -239,11 +233,11 @@ impl<S: 'static + Send + Sync> ListItem<S> {
         }
     }
 
-    pub fn new(label: Label<S>) -> Self {
+    pub fn new(label: Label) -> Self {
         Self::Entry(ListEntry::new(label))
     }
 
-    pub fn as_entry(&mut self) -> Option<&mut ListEntry<S>> {
+    pub fn as_entry(&mut self) -> Option<&mut ListEntry> {
         if let Self::Entry(entry) = self {
             Some(entry)
         } else {
@@ -252,11 +246,11 @@ impl<S: 'static + Send + Sync> ListItem<S> {
     }
 }
 
-#[derive(Element)]
-pub struct ListEntry<S: 'static + Send + Sync> {
+#[derive(Component)]
+pub struct ListEntry {
     disclosure_control_style: DisclosureControlVisibility,
     indent_level: u32,
-    label: Option<Label<S>>,
+    label: Option<Label>,
     left_content: Option<LeftContent>,
     variant: ListItemVariant,
     size: ListEntrySize,
@@ -265,8 +259,8 @@ pub struct ListEntry<S: 'static + Send + Sync> {
     overflow: OverflowStyle,
 }
 
-impl<S: 'static + Send + Sync> ListEntry<S> {
-    pub fn new(label: Label<S>) -> Self {
+impl ListEntry {
+    pub fn new(label: Label) -> Self {
         Self {
             disclosure_control_style: DisclosureControlVisibility::default(),
             indent_level: 0,
@@ -344,10 +338,10 @@ impl<S: 'static + Send + Sync> ListEntry<S> {
         }
     }
 
-    fn disclosure_control(
+    fn disclosure_control<V: 'static>(
         &mut self,
-        cx: &mut ViewContext<S>,
-    ) -> Option<impl Element<ViewState = S>> {
+        cx: &mut ViewContext<V>,
+    ) -> Option<impl Component<V>> {
         let disclosure_control_icon = if let Some(ToggleState::Toggled) = self.toggle {
             IconElement::new(Icon::ChevronDown)
         } else {
@@ -367,7 +361,7 @@ impl<S: 'static + Send + Sync> ListEntry<S> {
         }
     }
 
-    fn render(&mut self, _view: &mut S, cx: &mut ViewContext<S>) -> impl Element<ViewState = S> {
+    fn render<S: 'static>(mut self, _view: &mut S, cx: &mut ViewContext<S>) -> impl Component<S> {
         let settings = user_settings(cx);
         let theme = theme(cx);
 
@@ -423,18 +417,18 @@ impl<S: 'static + Send + Sync> ListEntry<S> {
     }
 }
 
-struct ListDetailsEntryHandlers<S: 'static + Send + Sync> {
+struct ListDetailsEntryHandlers<S: 'static> {
     click: Option<ClickHandler<S>>,
 }
 
-impl<S: 'static + Send + Sync> Default for ListDetailsEntryHandlers<S> {
+impl<S: 'static> Default for ListDetailsEntryHandlers<S> {
     fn default() -> Self {
         Self { click: None }
     }
 }
 
-#[derive(Element)]
-pub struct ListDetailsEntry<S: 'static + Send + Sync> {
+#[derive(Component)]
+pub struct ListDetailsEntry<S: 'static> {
     label: SharedString,
     meta: Option<SharedString>,
     left_content: Option<LeftContent>,
@@ -445,7 +439,7 @@ pub struct ListDetailsEntry<S: 'static + Send + Sync> {
     seen: bool,
 }
 
-impl<S: 'static + Send + Sync> ListDetailsEntry<S> {
+impl<S: 'static> ListDetailsEntry<S> {
     pub fn new(label: impl Into<SharedString>) -> Self {
         Self {
             label: label.into(),
@@ -477,7 +471,7 @@ impl<S: 'static + Send + Sync> ListDetailsEntry<S> {
         self
     }
 
-    fn render(&mut self, _view: &mut S, cx: &mut ViewContext<S>) -> impl Element<ViewState = S> {
+    fn render(mut self, _view: &mut S, cx: &mut ViewContext<S>) -> impl Component<S> {
         let theme = theme(cx);
         let settings = user_settings(cx);
 
@@ -522,34 +516,30 @@ impl<S: 'static + Send + Sync> ListDetailsEntry<S> {
     }
 }
 
-#[derive(Clone, Element)]
-pub struct ListSeparator<S: 'static + Send + Sync> {
-    state_type: PhantomData<S>,
-}
+#[derive(Clone, Component)]
+pub struct ListSeparator;
 
-impl<S: 'static + Send + Sync> ListSeparator<S> {
+impl ListSeparator {
     pub fn new() -> Self {
-        Self {
-            state_type: PhantomData,
-        }
+        Self
     }
 
-    fn render(&mut self, _view: &mut S, cx: &mut ViewContext<S>) -> impl Element<ViewState = S> {
+    fn render<V: 'static>(self, _view: &mut V, cx: &mut ViewContext<V>) -> impl Component<V> {
         let theme = theme(cx);
 
         div().h_px().w_full().bg(theme.border)
     }
 }
 
-#[derive(Element)]
-pub struct List<S: 'static + Send + Sync> {
+#[derive(Component)]
+pub struct List<S: 'static> {
     items: Vec<ListItem<S>>,
     empty_message: SharedString,
-    header: Option<ListHeader<S>>,
+    header: Option<ListHeader>,
     toggleable: Toggleable,
 }
 
-impl<S: 'static + Send + Sync> List<S> {
+impl<S: 'static> List<S> {
     pub fn new(items: Vec<ListItem<S>>) -> Self {
         Self {
             items,
@@ -564,7 +554,7 @@ impl<S: 'static + Send + Sync> List<S> {
         self
     }
 
-    pub fn header(mut self, header: ListHeader<S>) -> Self {
+    pub fn header(mut self, header: ListHeader) -> Self {
         self.header = Some(header);
         self
     }
@@ -574,7 +564,7 @@ impl<S: 'static + Send + Sync> List<S> {
         self
     }
 
-    fn render(&mut self, _view: &mut S, cx: &mut ViewContext<S>) -> impl Element<ViewState = S> {
+    fn render(mut self, _view: &mut S, cx: &mut ViewContext<S>) -> impl Component<S> {
         let is_toggleable = self.toggleable != Toggleable::NotToggleable;
         let is_toggled = Toggleable::is_toggled(&self.toggleable);
 

crates/ui2/src/components/modal.rs

@@ -1,25 +1,21 @@
-use std::marker::PhantomData;
-
 use gpui2::AnyElement;
 use smallvec::SmallVec;
 
 use crate::{h_stack, prelude::*, v_stack, Button, Icon, IconButton, Label};
 
-#[derive(Element)]
-pub struct Modal<S: 'static + Send + Sync> {
+#[derive(Component)]
+pub struct Modal<S: 'static> {
     id: ElementId,
-    state_type: PhantomData<S>,
     title: Option<SharedString>,
     primary_action: Option<Button<S>>,
     secondary_action: Option<Button<S>>,
     children: SmallVec<[AnyElement<S>; 2]>,
 }
 
-impl<S: 'static + Send + Sync> Modal<S> {
+impl<S: 'static> Modal<S> {
     pub fn new(id: impl Into<ElementId>) -> Self {
         Self {
             id: id.into(),
-            state_type: PhantomData,
             title: None,
             primary_action: None,
             secondary_action: None,
@@ -42,7 +38,7 @@ impl<S: 'static + Send + Sync> Modal<S> {
         self
     }
 
-    fn render(&mut self, _view: &mut S, cx: &mut ViewContext<S>) -> impl Element<ViewState = S> {
+    fn render(mut self, _view: &mut S, cx: &mut ViewContext<S>) -> impl Component<S> {
         let theme = theme(cx);
 
         v_stack()
@@ -80,8 +76,8 @@ impl<S: 'static + Send + Sync> Modal<S> {
     }
 }
 
-impl<S: 'static + Send + Sync> ParentElement for Modal<S> {
-    fn children_mut(&mut self) -> &mut SmallVec<[AnyElement<Self::ViewState>; 2]> {
+impl<S: 'static> ParentElement<S> for Modal<S> {
+    fn children_mut(&mut self) -> &mut SmallVec<[AnyElement<S>; 2]> {
         &mut self.children
     }
 }

crates/ui2/src/components/multi_buffer.rs

@@ -1,23 +1,17 @@
-use std::marker::PhantomData;
-
 use crate::prelude::*;
 use crate::{v_stack, Buffer, Icon, IconButton, Label};
 
-#[derive(Element)]
-pub struct MultiBuffer<S: 'static + Send + Sync + Clone> {
-    state_type: PhantomData<S>,
-    buffers: Vec<Buffer<S>>,
+#[derive(Component)]
+pub struct MultiBuffer {
+    buffers: Vec<Buffer>,
 }
 
-impl<S: 'static + Send + Sync + Clone> MultiBuffer<S> {
-    pub fn new(buffers: Vec<Buffer<S>>) -> Self {
-        Self {
-            state_type: PhantomData,
-            buffers,
-        }
+impl MultiBuffer {
+    pub fn new(buffers: Vec<Buffer>) -> Self {
+        Self { buffers }
     }
 
-    fn render(&mut self, _view: &mut S, cx: &mut ViewContext<S>) -> impl Element<ViewState = S> {
+    fn render<V: 'static>(self, _view: &mut V, cx: &mut ViewContext<V>) -> impl Component<V> {
         let theme = theme(cx);
 
         v_stack()
@@ -50,27 +44,19 @@ mod stories {
 
     use super::*;
 
-    #[derive(Element)]
-    pub struct MultiBufferStory<S: 'static + Send + Sync + Clone> {
-        state_type: PhantomData<S>,
-    }
+    #[derive(Component)]
+    pub struct MultiBufferStory;
 
-    impl<S: 'static + Send + Sync + Clone> MultiBufferStory<S> {
+    impl MultiBufferStory {
         pub fn new() -> Self {
-            Self {
-                state_type: PhantomData,
-            }
+            Self
         }
 
-        fn render(
-            &mut self,
-            _view: &mut S,
-            cx: &mut ViewContext<S>,
-        ) -> impl Element<ViewState = S> {
+        fn render<V: 'static>(self, _view: &mut V, cx: &mut ViewContext<V>) -> impl Component<V> {
             let theme = theme(cx);
 
             Story::container(cx)
-                .child(Story::title_for::<_, MultiBuffer<S>>(cx))
+                .child(Story::title_for::<_, MultiBuffer>(cx))
                 .child(Story::label(cx, "Default"))
                 .child(MultiBuffer::new(vec![
                     hello_world_rust_buffer_example(&theme),

crates/ui2/src/components/notification_toast.rs

@@ -1,20 +1,16 @@
-use std::marker::PhantomData;
-
 use gpui2::rems;
 
 use crate::{h_stack, prelude::*, Icon};
 
-#[derive(Element)]
-pub struct NotificationToast<S: 'static + Send + Sync + Clone> {
-    state_type: PhantomData<S>,
+#[derive(Component)]
+pub struct NotificationToast {
     label: SharedString,
     icon: Option<Icon>,
 }
 
-impl<S: 'static + Send + Sync + Clone> NotificationToast<S> {
+impl NotificationToast {
     pub fn new(label: SharedString) -> Self {
         Self {
-            state_type: PhantomData,
             label,
             icon: None,
         }
@@ -28,7 +24,7 @@ impl<S: 'static + Send + Sync + Clone> NotificationToast<S> {
         self
     }
 
-    fn render(&mut self, _view: &mut S, cx: &mut ViewContext<S>) -> impl Element<ViewState = S> {
+    fn render<S: 'static>(self, _view: &mut S, cx: &mut ViewContext<S>) -> impl Component<S> {
         let theme = theme(cx);
 
         h_stack()

crates/ui2/src/components/notifications_panel.rs

@@ -1,23 +1,20 @@
-use std::marker::PhantomData;
 
 use crate::{prelude::*, static_new_notification_items, static_read_notification_items};
 use crate::{List, ListHeader};
 
-#[derive(Element)]
-pub struct NotificationsPanel<S: 'static + Send + Sync> {
+#[derive(Component)]
+pub struct NotificationsPanel {
     id: ElementId,
-    state_type: PhantomData<S>,
 }
 
-impl<S: 'static + Send + Sync> NotificationsPanel<S> {
+impl NotificationsPanel {
     pub fn new(id: impl Into<ElementId>) -> Self {
         Self {
             id: id.into(),
-            state_type: PhantomData,
         }
     }
 
-    fn render(&mut self, _view: &mut S, cx: &mut ViewContext<S>) -> impl Element<ViewState = S> {
+    fn render<S: 'static>(self, _view: &mut S, cx: &mut ViewContext<S>) -> impl Component<S> {
         let theme = theme(cx);
 
         div()
@@ -58,25 +55,17 @@ mod stories {
 
     use super::*;
 
-    #[derive(Element)]
-    pub struct NotificationsPanelStory<S: 'static + Send + Sync + Clone> {
-        state_type: PhantomData<S>,
-    }
+    #[derive(Component)]
+    pub struct NotificationsPanelStory;
 
-    impl<S: 'static + Send + Sync + Clone> NotificationsPanelStory<S> {
+    impl NotificationsPanelStory {
         pub fn new() -> Self {
-            Self {
-                state_type: PhantomData,
-            }
+            Self
         }
 
-        fn render(
-            &mut self,
-            _view: &mut S,
-            cx: &mut ViewContext<S>,
-        ) -> impl Element<ViewState = S> {
+        fn render<V: 'static>(self, _view: &mut V, cx: &mut ViewContext<V>) -> impl Component<V> {
             Story::container(cx)
-                .child(Story::title_for::<_, NotificationsPanel<S>>(cx))
+                .child(Story::title_for::<_, NotificationsPanel>(cx))
                 .child(Story::label(cx, "Default"))
                 .child(
                     Panel::new("panel", cx).child(NotificationsPanel::new("notifications_panel")),

crates/ui2/src/components/palette.rs

@@ -1,23 +1,19 @@
-use std::marker::PhantomData;
-
 use crate::prelude::*;
 use crate::{h_stack, v_stack, Keybinding, Label, LabelColor};
 
-#[derive(Element)]
-pub struct Palette<S: 'static + Send + Sync> {
+#[derive(Component)]
+pub struct Palette {
     id: ElementId,
-    state_type: PhantomData<S>,
     input_placeholder: SharedString,
     empty_string: SharedString,
-    items: Vec<PaletteItem<S>>,
+    items: Vec<PaletteItem>,
     default_order: OrderMethod,
 }
 
-impl<S: 'static + Send + Sync> Palette<S> {
+impl Palette {
     pub fn new(id: impl Into<ElementId>) -> Self {
         Self {
             id: id.into(),
-            state_type: PhantomData,
             input_placeholder: "Find something...".into(),
             empty_string: "No items found.".into(),
             items: vec![],
@@ -25,7 +21,7 @@ impl<S: 'static + Send + Sync> Palette<S> {
         }
     }
 
-    pub fn items(mut self, items: Vec<PaletteItem<S>>) -> Self {
+    pub fn items(mut self, items: Vec<PaletteItem>) -> Self {
         self.items = items;
         self
     }
@@ -46,7 +42,7 @@ impl<S: 'static + Send + Sync> Palette<S> {
         self
     }
 
-    fn render(&mut self, _view: &mut S, cx: &mut ViewContext<S>) -> impl Element<ViewState = S> {
+    fn render<S: 'static>(mut self, _view: &mut S, cx: &mut ViewContext<S>) -> impl Component<S> {
         let theme = theme(cx);
 
         v_stack()
@@ -101,14 +97,14 @@ impl<S: 'static + Send + Sync> Palette<S> {
     }
 }
 
-#[derive(Element)]
-pub struct PaletteItem<S: 'static + Send + Sync> {
+#[derive(Component)]
+pub struct PaletteItem {
     pub label: SharedString,
     pub sublabel: Option<SharedString>,
-    pub keybinding: Option<Keybinding<S>>,
+    pub keybinding: Option<Keybinding>,
 }
 
-impl<S: 'static + Send + Sync> PaletteItem<S> {
+impl PaletteItem {
     pub fn new(label: impl Into<SharedString>) -> Self {
         Self {
             label: label.into(),
@@ -129,13 +125,13 @@ impl<S: 'static + Send + Sync> PaletteItem<S> {
 
     pub fn keybinding<K>(mut self, keybinding: K) -> Self
     where
-        K: Into<Option<Keybinding<S>>>,
+        K: Into<Option<Keybinding>>,
     {
         self.keybinding = keybinding.into();
         self
     }
 
-    fn render(&mut self, _view: &mut S, cx: &mut ViewContext<S>) -> impl Element<ViewState = S> {
+    fn render<S: 'static>(mut self, _view: &mut S, cx: &mut ViewContext<S>) -> impl Component<S> {
         div()
             .flex()
             .flex_row()
@@ -160,25 +156,17 @@ mod stories {
 
     use super::*;
 
-    #[derive(Element)]
-    pub struct PaletteStory<S: 'static + Send + Sync + Clone> {
-        state_type: PhantomData<S>,
-    }
+    #[derive(Component)]
+    pub struct PaletteStory;
 
-    impl<S: 'static + Send + Sync + Clone> PaletteStory<S> {
+    impl PaletteStory {
         pub fn new() -> Self {
-            Self {
-                state_type: PhantomData,
-            }
+            Self
         }
 
-        fn render(
-            &mut self,
-            _view: &mut S,
-            cx: &mut ViewContext<S>,
-        ) -> impl Element<ViewState = S> {
+        fn render<V: 'static>(self, _view: &mut V, cx: &mut ViewContext<V>) -> impl Component<V> {
             Story::container(cx)
-                .child(Story::title_for::<_, Palette<S>>(cx))
+                .child(Story::title_for::<_, Palette>(cx))
                 .child(Story::label(cx, "Default"))
                 .child(Palette::new("palette-1"))
                 .child(Story::label(cx, "With Items"))

crates/ui2/src/components/panel.rs

@@ -1,5 +1,3 @@
-use std::marker::PhantomData;
-
 use gpui2::{AbsoluteLength, AnyElement};
 use smallvec::SmallVec;
 
@@ -40,10 +38,9 @@ pub enum PanelSide {
 
 use std::collections::HashSet;
 
-#[derive(Element)]
-pub struct Panel<S: 'static + Send + Sync> {
+#[derive(Component)]
+pub struct Panel<S: 'static> {
     id: ElementId,
-    state_type: PhantomData<S>,
     current_side: PanelSide,
     /// Defaults to PanelAllowedSides::LeftAndRight
     allowed_sides: PanelAllowedSides,
@@ -52,13 +49,12 @@ pub struct Panel<S: 'static + Send + Sync> {
     children: SmallVec<[AnyElement<S>; 2]>,
 }
 
-impl<S: 'static + Send + Sync> Panel<S> {
+impl<S: 'static> Panel<S> {
     pub fn new(id: impl Into<ElementId>, cx: &mut WindowContext) -> Self {
         let settings = user_settings(cx);
 
         Self {
             id: id.into(),
-            state_type: PhantomData,
             current_side: PanelSide::default(),
             allowed_sides: PanelAllowedSides::default(),
             initial_width: *settings.default_panel_size,
@@ -96,7 +92,7 @@ impl<S: 'static + Send + Sync> Panel<S> {
         self
     }
 
-    fn render(&mut self, _view: &mut S, cx: &mut ViewContext<S>) -> impl Element<ViewState = S> {
+    fn render(mut self, _view: &mut S, cx: &mut ViewContext<S>) -> impl Component<S> {
         let theme = theme(cx);
 
         let current_size = self.width.unwrap_or(self.initial_width);
@@ -121,8 +117,8 @@ impl<S: 'static + Send + Sync> Panel<S> {
     }
 }
 
-impl<S: 'static + Send + Sync> ParentElement for Panel<S> {
-    fn children_mut(&mut self) -> &mut SmallVec<[AnyElement<Self::ViewState>; 2]> {
+impl<S: 'static> ParentElement<S> for Panel<S> {
+    fn children_mut(&mut self) -> &mut SmallVec<[AnyElement<S>; 2]> {
         &mut self.children
     }
 }
@@ -136,23 +132,15 @@ mod stories {
 
     use super::*;
 
-    #[derive(Element)]
-    pub struct PanelStory<S: 'static + Send + Sync + Clone> {
-        state_type: PhantomData<S>,
-    }
+    #[derive(Component)]
+    pub struct PanelStory;
 
-    impl<S: 'static + Send + Sync + Clone> PanelStory<S> {
+    impl PanelStory {
         pub fn new() -> Self {
-            Self {
-                state_type: PhantomData,
-            }
+            Self
         }
 
-        fn render(
-            &mut self,
-            _view: &mut S,
-            cx: &mut ViewContext<S>,
-        ) -> impl Element<ViewState = S> {
+        fn render<S: 'static>(self, _view: &mut S, cx: &mut ViewContext<S>) -> impl Component<S> {
             Story::container(cx)
                 .child(Story::title_for::<_, Panel<S>>(cx))
                 .child(Story::label(cx, "Default"))

crates/ui2/src/components/panes.rs

@@ -1,5 +1,3 @@
-use std::marker::PhantomData;
-
 use gpui2::{hsla, red, AnyElement, ElementId, ExternalPaths, Hsla, Length, Size};
 use smallvec::SmallVec;
 
@@ -12,25 +10,29 @@ pub enum SplitDirection {
     Vertical,
 }
 
-#[derive(Element)]
-pub struct Pane<S: 'static + Send + Sync> {
+#[derive(Component)]
+pub struct Pane<V: 'static> {
     id: ElementId,
-    state_type: PhantomData<S>,
     size: Size<Length>,
     fill: Hsla,
-    children: SmallVec<[AnyElement<S>; 2]>,
+    children: SmallVec<[AnyElement<V>; 2]>,
 }
 
-impl<S: 'static + Send + Sync> Pane<S> {
+// impl<V: 'static> IntoAnyElement<V> for Pane<V> {
+//     fn into_any(self) -> AnyElement<V> {
+//         (move |view_state: &mut V, cx: &mut ViewContext<'_, '_, V>| self.render(view_state, cx))
+//             .into_any()
+//     }
+// }
+
+impl<V: 'static> Pane<V> {
     pub fn new(id: impl Into<ElementId>, size: Size<Length>) -> Self {
         // Fill is only here for debugging purposes, remove before release
 
         Self {
             id: id.into(),
-            state_type: PhantomData,
             size,
             fill: hsla(0.3, 0.3, 0.3, 1.),
-            // fill: system_color.transparent,
             children: SmallVec::new(),
         }
     }
@@ -40,7 +42,7 @@ impl<S: 'static + Send + Sync> Pane<S> {
         self
     }
 
-    fn render(&mut self, view: &mut S, cx: &mut ViewContext<S>) -> impl Element<ViewState = S> {
+    fn render(self, view: &mut V, cx: &mut ViewContext<V>) -> impl Component<V> {
         div()
             .id(self.id.clone())
             .flex()
@@ -49,12 +51,7 @@ impl<S: 'static + Send + Sync> Pane<S> {
             .w(self.size.width)
             .h(self.size.height)
             .relative()
-            .child(
-                div()
-                    .z_index(0)
-                    .size_full()
-                    .children(self.children.drain(..)),
-            )
+            .child(div().z_index(0).size_full().children(self.children))
             .child(
                 div()
                     .z_index(1)
@@ -69,40 +66,37 @@ impl<S: 'static + Send + Sync> Pane<S> {
     }
 }
 
-impl<S: 'static + Send + Sync> ParentElement for Pane<S> {
-    fn children_mut(&mut self) -> &mut SmallVec<[AnyElement<Self::ViewState>; 2]> {
+impl<V: 'static> ParentElement<V> for Pane<V> {
+    fn children_mut(&mut self) -> &mut SmallVec<[AnyElement<V>; 2]> {
         &mut self.children
     }
 }
 
-#[derive(Element)]
-pub struct PaneGroup<S: 'static + Send + Sync> {
-    state_type: PhantomData<S>,
-    groups: Vec<PaneGroup<S>>,
-    panes: Vec<Pane<S>>,
+#[derive(Component)]
+pub struct PaneGroup<V: 'static> {
+    groups: Vec<PaneGroup<V>>,
+    panes: Vec<Pane<V>>,
     split_direction: SplitDirection,
 }
 
-impl<S: 'static + Send + Sync> PaneGroup<S> {
-    pub fn new_groups(groups: Vec<PaneGroup<S>>, split_direction: SplitDirection) -> Self {
+impl<V: 'static> PaneGroup<V> {
+    pub fn new_groups(groups: Vec<PaneGroup<V>>, split_direction: SplitDirection) -> Self {
         Self {
-            state_type: PhantomData,
             groups,
             panes: Vec::new(),
             split_direction,
         }
     }
 
-    pub fn new_panes(panes: Vec<Pane<S>>, split_direction: SplitDirection) -> Self {
+    pub fn new_panes(panes: Vec<Pane<V>>, split_direction: SplitDirection) -> Self {
         Self {
-            state_type: PhantomData,
             groups: Vec::new(),
             panes,
             split_direction,
         }
     }
 
-    fn render(&mut self, view: &mut S, cx: &mut ViewContext<S>) -> impl Element<ViewState = S> {
+    fn render(mut self, view: &mut V, cx: &mut ViewContext<V>) -> impl Component<V> {
         let theme = theme(cx);
 
         if !self.panes.is_empty() {
@@ -112,7 +106,7 @@ impl<S: 'static + Send + Sync> PaneGroup<S> {
                 .gap_px()
                 .w_full()
                 .h_full()
-                .children(self.panes.iter_mut().map(|pane| pane.render(view, cx)));
+                .children(self.panes.drain(..).map(|pane| pane.render(view, cx)));
 
             if self.split_direction == SplitDirection::Horizontal {
                 return el;
@@ -129,7 +123,7 @@ impl<S: 'static + Send + Sync> PaneGroup<S> {
                 .w_full()
                 .h_full()
                 .bg(theme.editor)
-                .children(self.groups.iter_mut().map(|group| group.render(view, cx)));
+                .children(self.groups.drain(..).map(|group| group.render(view, cx)));
 
             if self.split_direction == SplitDirection::Horizontal {
                 return el;

crates/ui2/src/components/player_stack.rs

@@ -1,23 +1,19 @@
-use std::marker::PhantomData;
-
 use crate::prelude::*;
 use crate::{Avatar, Facepile, PlayerWithCallStatus};
 
-#[derive(Element)]
-pub struct PlayerStack<S: 'static + Send + Sync> {
-    state_type: PhantomData<S>,
+#[derive(Component)]
+pub struct PlayerStack {
     player_with_call_status: PlayerWithCallStatus,
 }
 
-impl<S: 'static + Send + Sync> PlayerStack<S> {
+impl PlayerStack {
     pub fn new(player_with_call_status: PlayerWithCallStatus) -> Self {
         Self {
-            state_type: PhantomData,
             player_with_call_status,
         }
     }
 
-    fn render(&mut self, _view: &mut S, cx: &mut ViewContext<S>) -> impl Element<ViewState = S> {
+    fn render<S: 'static>(self, _view: &mut S, cx: &mut ViewContext<S>) -> impl Component<S> {
         let theme = theme(cx);
         let player = self.player_with_call_status.get_player();
         self.player_with_call_status.get_call_status();

crates/ui2/src/components/project_panel.rs

@@ -1,25 +1,19 @@
-use std::marker::PhantomData;
-
 use crate::prelude::*;
 use crate::{
     static_project_panel_project_items, static_project_panel_single_items, Input, List, ListHeader,
 };
 
-#[derive(Element)]
-pub struct ProjectPanel<S: 'static + Send + Sync> {
+#[derive(Component)]
+pub struct ProjectPanel {
     id: ElementId,
-    state_type: PhantomData<S>,
 }
 
-impl<S: 'static + Send + Sync> ProjectPanel<S> {
+impl ProjectPanel {
     pub fn new(id: impl Into<ElementId>) -> Self {
-        Self {
-            id: id.into(),
-            state_type: PhantomData,
-        }
+        Self { id: id.into() }
     }
 
-    fn render(&mut self, _view: &mut S, cx: &mut ViewContext<S>) -> impl Element<ViewState = S> {
+    fn render<S: 'static>(self, _view: &mut S, cx: &mut ViewContext<S>) -> impl Component<S> {
         let theme = theme(cx);
 
         div()
@@ -67,25 +61,17 @@ mod stories {
 
     use super::*;
 
-    #[derive(Element)]
-    pub struct ProjectPanelStory<S: 'static + Send + Sync + Clone> {
-        state_type: PhantomData<S>,
-    }
+    #[derive(Component)]
+    pub struct ProjectPanelStory;
 
-    impl<S: 'static + Send + Sync + Clone> ProjectPanelStory<S> {
+    impl ProjectPanelStory {
         pub fn new() -> Self {
-            Self {
-                state_type: PhantomData,
-            }
+            Self
         }
 
-        fn render(
-            &mut self,
-            _view: &mut S,
-            cx: &mut ViewContext<S>,
-        ) -> impl Element<ViewState = S> {
+        fn render<S: 'static>(self, _view: &mut S, cx: &mut ViewContext<S>) -> impl Component<S> {
             Story::container(cx)
-                .child(Story::title_for::<_, ProjectPanel<S>>(cx))
+                .child(Story::title_for::<_, ProjectPanel>(cx))
                 .child(Story::label(cx, "Default"))
                 .child(
                     Panel::new("project-panel-outer", cx)

crates/ui2/src/components/recent_projects.rs

@@ -1,23 +1,17 @@
-use std::marker::PhantomData;
-
 use crate::prelude::*;
 use crate::{OrderMethod, Palette, PaletteItem};
 
-#[derive(Element)]
-pub struct RecentProjects<S: 'static + Send + Sync + Clone> {
+#[derive(Component)]
+pub struct RecentProjects {
     id: ElementId,
-    state_type: PhantomData<S>,
 }
 
-impl<S: 'static + Send + Sync + Clone> RecentProjects<S> {
+impl RecentProjects {
     pub fn new(id: impl Into<ElementId>) -> Self {
-        Self {
-            id: id.into(),
-            state_type: PhantomData,
-        }
+        Self { id: id.into() }
     }
 
-    fn render(&mut self, _view: &mut S, cx: &mut ViewContext<S>) -> impl Element<ViewState = S> {
+    fn render<S: 'static>(self, _view: &mut S, cx: &mut ViewContext<S>) -> impl Component<S> {
         div().id(self.id.clone()).child(
             Palette::new("palette")
                 .items(vec![
@@ -44,25 +38,17 @@ mod stories {
 
     use super::*;
 
-    #[derive(Element)]
-    pub struct RecentProjectsStory<S: 'static + Send + Sync + Clone> {
-        state_type: PhantomData<S>,
-    }
+    #[derive(Component)]
+    pub struct RecentProjectsStory;
 
-    impl<S: 'static + Send + Sync + Clone> RecentProjectsStory<S> {
+    impl RecentProjectsStory {
         pub fn new() -> Self {
-            Self {
-                state_type: PhantomData,
-            }
+            Self
         }
 
-        fn render(
-            &mut self,
-            _view: &mut S,
-            cx: &mut ViewContext<S>,
-        ) -> impl Element<ViewState = S> {
+        fn render<S: 'static>(self, _view: &mut S, cx: &mut ViewContext<S>) -> impl Component<S> {
             Story::container(cx)
-                .child(Story::title_for::<_, RecentProjects<S>>(cx))
+                .child(Story::title_for::<_, RecentProjects>(cx))
                 .child(Story::label(cx, "Default"))
                 .child(RecentProjects::new("recent-projects"))
         }

crates/ui2/src/components/status_bar.rs

@@ -28,8 +28,8 @@ impl Default for ToolGroup {
     }
 }
 
-#[derive(Element)]
-#[element(view_state = "Workspace")]
+#[derive(Component)]
+#[component(view_type = "Workspace")]
 pub struct StatusBar {
     left_tools: Option<ToolGroup>,
     right_tools: Option<ToolGroup>,
@@ -83,10 +83,10 @@ impl StatusBar {
     }
 
     fn render(
-        &mut self,
+        self,
         view: &mut Workspace,
         cx: &mut ViewContext<Workspace>,
-    ) -> impl Element<ViewState = Workspace> {
+    ) -> impl Component<Workspace> {
         let theme = theme(cx);
 
         div()
@@ -105,7 +105,7 @@ impl StatusBar {
         &self,
         workspace: &mut Workspace,
         cx: &WindowContext,
-    ) -> impl Element<ViewState = Workspace> {
+    ) -> impl Component<Workspace> {
         div()
             .flex()
             .items_center()
@@ -136,7 +136,7 @@ impl StatusBar {
         &self,
         workspace: &mut Workspace,
         cx: &WindowContext,
-    ) -> impl Element<ViewState = Workspace> {
+    ) -> impl Component<Workspace> {
         div()
             .flex()
             .items_center()

crates/ui2/src/components/tab.rs

@@ -1,11 +1,8 @@
-use std::marker::PhantomData;
-
 use crate::prelude::*;
 use crate::{Icon, IconColor, IconElement, Label, LabelColor};
 
-#[derive(Element, Clone)]
-pub struct Tab<S: 'static + Send + Sync + Clone> {
-    state_type: PhantomData<S>,
+#[derive(Component, Clone)]
+pub struct Tab {
     id: ElementId,
     title: String,
     icon: Option<Icon>,
@@ -22,10 +19,9 @@ struct TabDragState {
     title: String,
 }
 
-impl<S: 'static + Send + Sync + Clone> Tab<S> {
+impl Tab {
     pub fn new(id: impl Into<ElementId>) -> Self {
         Self {
-            state_type: PhantomData,
             id: id.into(),
             title: "untitled".to_string(),
             icon: None,
@@ -81,7 +77,7 @@ impl<S: 'static + Send + Sync + Clone> Tab<S> {
         self
     }
 
-    fn render(&mut self, _view: &mut S, cx: &mut ViewContext<S>) -> impl Element<ViewState = S> {
+    fn render<V: 'static>(self, _view: &mut V, cx: &mut ViewContext<V>) -> impl Component<V> {
         let theme = theme(cx);
         let has_fs_conflict = self.fs_status == FileSystemStatus::Conflict;
         let is_deleted = self.fs_status == FileSystemStatus::Deleted;
@@ -176,28 +172,20 @@ mod stories {
 
     use super::*;
 
-    #[derive(Element)]
-    pub struct TabStory<S: 'static + Send + Sync + Clone> {
-        state_type: PhantomData<S>,
-    }
+    #[derive(Component)]
+    pub struct TabStory;
 
-    impl<S: 'static + Send + Sync + Clone> TabStory<S> {
+    impl TabStory {
         pub fn new() -> Self {
-            Self {
-                state_type: PhantomData,
-            }
+            Self
         }
 
-        fn render(
-            &mut self,
-            _view: &mut S,
-            cx: &mut ViewContext<S>,
-        ) -> impl Element<ViewState = S> {
+        fn render<V: 'static>(self, _view: &mut V, cx: &mut ViewContext<V>) -> impl Component<V> {
             let git_statuses = GitStatus::iter();
             let fs_statuses = FileSystemStatus::iter();
 
             Story::container(cx)
-                .child(Story::title_for::<_, Tab<S>>(cx))
+                .child(Story::title_for::<_, Tab>(cx))
                 .child(
                     h_stack().child(
                         v_stack()

crates/ui2/src/components/tab_bar.rs

@@ -1,22 +1,18 @@
-use std::marker::PhantomData;
-
 use crate::prelude::*;
 use crate::{Icon, IconButton, Tab};
 
-#[derive(Element)]
-pub struct TabBar<S: 'static + Send + Sync + Clone> {
+#[derive(Component)]
+pub struct TabBar {
     id: ElementId,
-    state_type: PhantomData<S>,
     /// Backwards, Forwards
     can_navigate: (bool, bool),
-    tabs: Vec<Tab<S>>,
+    tabs: Vec<Tab>,
 }
 
-impl<S: 'static + Send + Sync + Clone> TabBar<S> {
-    pub fn new(id: impl Into<ElementId>, tabs: Vec<Tab<S>>) -> Self {
+impl TabBar {
+    pub fn new(id: impl Into<ElementId>, tabs: Vec<Tab>) -> Self {
         Self {
             id: id.into(),
-            state_type: PhantomData,
             can_navigate: (false, false),
             tabs,
         }
@@ -27,7 +23,7 @@ impl<S: 'static + Send + Sync + Clone> TabBar<S> {
         self
     }
 
-    fn render(&mut self, _view: &mut S, cx: &mut ViewContext<S>) -> impl Element<ViewState = S> {
+    fn render<S: 'static>(self, _view: &mut S, cx: &mut ViewContext<S>) -> impl Component<S> {
         let theme = theme(cx);
 
         let (can_navigate_back, can_navigate_forward) = self.can_navigate;
@@ -100,25 +96,17 @@ mod stories {
 
     use super::*;
 
-    #[derive(Element)]
-    pub struct TabBarStory<S: 'static + Send + Sync + Clone> {
-        state_type: PhantomData<S>,
-    }
+    #[derive(Component)]
+    pub struct TabBarStory;
 
-    impl<S: 'static + Send + Sync + Clone> TabBarStory<S> {
+    impl TabBarStory {
         pub fn new() -> Self {
-            Self {
-                state_type: PhantomData,
-            }
+            Self
         }
 
-        fn render(
-            &mut self,
-            _view: &mut S,
-            cx: &mut ViewContext<S>,
-        ) -> impl Element<ViewState = S> {
+        fn render<S: 'static>(self, _view: &mut S, cx: &mut ViewContext<S>) -> impl Component<S> {
             Story::container(cx)
-                .child(Story::title_for::<_, TabBar<S>>(cx))
+                .child(Story::title_for::<_, TabBar>(cx))
                 .child(Story::label(cx, "Default"))
                 .child(TabBar::new(
                     "tab-bar",

crates/ui2/src/components/terminal.rs

@@ -1,23 +1,17 @@
-use std::marker::PhantomData;
-
 use gpui2::{relative, rems, Size};
 
 use crate::prelude::*;
 use crate::{Icon, IconButton, Pane, Tab};
 
-#[derive(Element)]
-pub struct Terminal<S: 'static + Send + Sync + Clone> {
-    state_type: PhantomData<S>,
-}
+#[derive(Component)]
+pub struct Terminal;
 
-impl<S: 'static + Send + Sync + Clone> Terminal<S> {
+impl Terminal {
     pub fn new() -> Self {
-        Self {
-            state_type: PhantomData,
-        }
+        Self
     }
 
-    fn render(&mut self, _view: &mut S, cx: &mut ViewContext<S>) -> impl Element<ViewState = S> {
+    fn render<S: 'static>(self, _view: &mut S, cx: &mut ViewContext<S>) -> impl Component<S> {
         let theme = theme(cx);
 
         let can_navigate_back = true;
@@ -93,25 +87,17 @@ mod stories {
 
     use super::*;
 
-    #[derive(Element)]
-    pub struct TerminalStory<S: 'static + Send + Sync + Clone> {
-        state_type: PhantomData<S>,
-    }
+    #[derive(Component)]
+    pub struct TerminalStory;
 
-    impl<S: 'static + Send + Sync + Clone> TerminalStory<S> {
+    impl TerminalStory {
         pub fn new() -> Self {
-            Self {
-                state_type: PhantomData,
-            }
+            Self
         }
 
-        fn render(
-            &mut self,
-            _view: &mut S,
-            cx: &mut ViewContext<S>,
-        ) -> impl Element<ViewState = S> {
+        fn render<S: 'static>(self, _view: &mut S, cx: &mut ViewContext<S>) -> impl Component<S> {
             Story::container(cx)
-                .child(Story::title_for::<_, Terminal<S>>(cx))
+                .child(Story::title_for::<_, Terminal>(cx))
                 .child(Story::label(cx, "Default"))
                 .child(Terminal::new())
         }

crates/ui2/src/components/theme_selector.rs

@@ -1,23 +1,17 @@
-use std::marker::PhantomData;
-
 use crate::prelude::*;
 use crate::{OrderMethod, Palette, PaletteItem};
 
-#[derive(Element)]
-pub struct ThemeSelector<S: 'static + Send + Sync> {
+#[derive(Component)]
+pub struct ThemeSelector {
     id: ElementId,
-    state_type: PhantomData<S>,
 }
 
-impl<S: 'static + Send + Sync> ThemeSelector<S> {
+impl ThemeSelector {
     pub fn new(id: impl Into<ElementId>) -> Self {
-        Self {
-            id: id.into(),
-            state_type: PhantomData,
-        }
+        Self { id: id.into() }
     }
 
-    fn render(&mut self, _view: &mut S, cx: &mut ViewContext<S>) -> impl Element<ViewState = S> {
+    fn render<S: 'static>(self, _view: &mut S, cx: &mut ViewContext<S>) -> impl Component<S> {
         div().child(
             Palette::new(self.id.clone())
                 .items(vec![
@@ -49,25 +43,17 @@ mod stories {
 
     use super::*;
 
-    #[derive(Element)]
-    pub struct ThemeSelectorStory<S: 'static + Send + Sync + Clone> {
-        state_type: PhantomData<S>,
-    }
+    #[derive(Component)]
+    pub struct ThemeSelectorStory;
 
-    impl<S: 'static + Send + Sync + Clone> ThemeSelectorStory<S> {
+    impl ThemeSelectorStory {
         pub fn new() -> Self {
-            Self {
-                state_type: PhantomData,
-            }
+            Self
         }
 
-        fn render(
-            &mut self,
-            _view: &mut S,
-            cx: &mut ViewContext<S>,
-        ) -> impl Element<ViewState = S> {
+        fn render<S: 'static>(self, _view: &mut S, cx: &mut ViewContext<S>) -> impl Component<S> {
             Story::container(cx)
-                .child(Story::title_for::<_, ThemeSelector<S>>(cx))
+                .child(Story::title_for::<_, ThemeSelector>(cx))
                 .child(Story::label(cx, "Default"))
                 .child(ThemeSelector::new("theme-selector"))
         }

crates/ui2/src/components/title_bar.rs

@@ -87,7 +87,7 @@ impl TitleBar {
         )
     }
 
-    fn render(&mut self, cx: &mut ViewContext<Self>) -> impl Element<ViewState = Self> {
+    fn render(&mut self, cx: &mut ViewContext<Self>) -> impl Component<Self> {
         let theme = theme(cx);
         let settings = user_settings(cx);
 
@@ -204,7 +204,7 @@ mod stories {
             )
         }
 
-        fn render(&mut self, cx: &mut ViewContext<Self>) -> impl Element<ViewState = Self> {
+        fn render(&mut self, cx: &mut ViewContext<Self>) -> impl Component<Self> {
             Story::container(cx)
                 .child(Story::title_for::<_, TitleBar>(cx))
                 .child(Story::label(cx, "Default"))

crates/ui2/src/components/toast.rs

@@ -22,13 +22,13 @@ pub enum ToastOrigin {
 /// they are actively showing the a process in progress.
 ///
 /// Only one toast may be visible at a time.
-#[derive(Element)]
-pub struct Toast<S: 'static + Send + Sync> {
+#[derive(Component)]
+pub struct Toast<S: 'static> {
     origin: ToastOrigin,
     children: SmallVec<[AnyElement<S>; 2]>,
 }
 
-impl<S: 'static + Send + Sync> Toast<S> {
+impl<S: 'static> Toast<S> {
     pub fn new(origin: ToastOrigin) -> Self {
         Self {
             origin,
@@ -36,7 +36,7 @@ impl<S: 'static + Send + Sync> Toast<S> {
         }
     }
 
-    fn render(&mut self, _view: &mut S, cx: &mut ViewContext<S>) -> impl Element<ViewState = S> {
+    fn render(self, _view: &mut S, cx: &mut ViewContext<S>) -> impl Component<S> {
         let theme = theme(cx);
 
         let mut div = div();
@@ -57,12 +57,12 @@ impl<S: 'static + Send + Sync> Toast<S> {
             .shadow_md()
             .overflow_hidden()
             .bg(theme.elevated_surface)
-            .children(self.children.drain(..))
+            .children(self.children)
     }
 }
 
-impl<S: 'static + Send + Sync> ParentElement for Toast<S> {
-    fn children_mut(&mut self) -> &mut SmallVec<[AnyElement<Self::ViewState>; 2]> {
+impl<S: 'static> ParentElement<S> for Toast<S> {
+    fn children_mut(&mut self) -> &mut SmallVec<[AnyElement<S>; 2]> {
         &mut self.children
     }
 }
@@ -72,29 +72,19 @@ pub use stories::*;
 
 #[cfg(feature = "stories")]
 mod stories {
-    use std::marker::PhantomData;
-
     use crate::{Label, Story};
 
     use super::*;
 
-    #[derive(Element)]
-    pub struct ToastStory<S: 'static + Send + Sync> {
-        state_type: PhantomData<S>,
-    }
+    #[derive(Component)]
+    pub struct ToastStory;
 
-    impl<S: 'static + Send + Sync> ToastStory<S> {
+    impl ToastStory {
         pub fn new() -> Self {
-            Self {
-                state_type: PhantomData,
-            }
+            Self
         }
 
-        fn render(
-            &mut self,
-            _view: &mut S,
-            cx: &mut ViewContext<S>,
-        ) -> impl Element<ViewState = S> {
+        fn render<S: 'static>(self, _view: &mut S, cx: &mut ViewContext<S>) -> impl Component<S> {
             Story::container(cx)
                 .child(Story::title_for::<_, Toast<S>>(cx))
                 .child(Story::label(cx, "Default"))

crates/ui2/src/components/toolbar.rs

@@ -6,13 +6,13 @@ use crate::prelude::*;
 #[derive(Clone)]
 pub struct ToolbarItem {}
 
-#[derive(Element)]
-pub struct Toolbar<S: 'static + Send + Sync> {
+#[derive(Component)]
+pub struct Toolbar<S: 'static> {
     left_items: SmallVec<[AnyElement<S>; 2]>,
     right_items: SmallVec<[AnyElement<S>; 2]>,
 }
 
-impl<S: 'static + Send + Sync> Toolbar<S> {
+impl<S: 'static> Toolbar<S> {
     pub fn new() -> Self {
         Self {
             left_items: SmallVec::new(),
@@ -20,41 +20,41 @@ impl<S: 'static + Send + Sync> Toolbar<S> {
         }
     }
 
-    pub fn left_item(mut self, child: impl IntoAnyElement<S>) -> Self
+    pub fn left_item(mut self, child: impl Component<S>) -> Self
     where
         Self: Sized,
     {
-        self.left_items.push(child.into_any());
+        self.left_items.push(child.render());
         self
     }
 
-    pub fn left_items(mut self, iter: impl IntoIterator<Item = impl IntoAnyElement<S>>) -> Self
+    pub fn left_items(mut self, iter: impl IntoIterator<Item = impl Component<S>>) -> Self
     where
         Self: Sized,
     {
         self.left_items
-            .extend(iter.into_iter().map(|item| item.into_any()));
+            .extend(iter.into_iter().map(|item| item.render()));
         self
     }
 
-    pub fn right_item(mut self, child: impl IntoAnyElement<S>) -> Self
+    pub fn right_item(mut self, child: impl Component<S>) -> Self
     where
         Self: Sized,
     {
-        self.right_items.push(child.into_any());
+        self.right_items.push(child.render());
         self
     }
 
-    pub fn right_items(mut self, iter: impl IntoIterator<Item = impl IntoAnyElement<S>>) -> Self
+    pub fn right_items(mut self, iter: impl IntoIterator<Item = impl Component<S>>) -> Self
     where
         Self: Sized,
     {
         self.right_items
-            .extend(iter.into_iter().map(|item| item.into_any()));
+            .extend(iter.into_iter().map(|item| item.render()));
         self
     }
 
-    fn render(&mut self, _view: &mut S, cx: &mut ViewContext<S>) -> impl Element<ViewState = S> {
+    fn render(mut self, _view: &mut S, cx: &mut ViewContext<S>) -> impl Component<S> {
         let theme = theme(cx);
 
         div()
@@ -72,7 +72,6 @@ pub use stories::*;
 
 #[cfg(feature = "stories")]
 mod stories {
-    use std::marker::PhantomData;
     use std::path::PathBuf;
     use std::str::FromStr;
 
@@ -80,27 +79,19 @@ mod stories {
 
     use super::*;
 
-    #[derive(Element)]
-    pub struct ToolbarStory<S: 'static + Send + Sync + Clone> {
-        state_type: PhantomData<S>,
-    }
+    #[derive(Component)]
+    pub struct ToolbarStory;
 
-    impl<S: 'static + Send + Sync + Clone> ToolbarStory<S> {
+    impl ToolbarStory {
         pub fn new() -> Self {
-            Self {
-                state_type: PhantomData,
-            }
+            Self
         }
 
-        fn render(
-            &mut self,
-            _view: &mut S,
-            cx: &mut ViewContext<S>,
-        ) -> impl Element<ViewState = S> {
+        fn render<V: 'static>(self, _view: &mut V, cx: &mut ViewContext<V>) -> impl Component<V> {
             let theme = theme(cx);
 
             Story::container(cx)
-                .child(Story::title_for::<_, Toolbar<S>>(cx))
+                .child(Story::title_for::<_, Toolbar<V>>(cx))
                 .child(Story::label(cx, "Default"))
                 .child(
                     Toolbar::new()

crates/ui2/src/components/traffic_lights.rs

@@ -1,5 +1,3 @@
-use std::marker::PhantomData;
-
 use crate::prelude::*;
 
 #[derive(Clone, Copy)]
@@ -9,23 +7,21 @@ enum TrafficLightColor {
     Green,
 }
 
-#[derive(Element)]
-struct TrafficLight<S: 'static + Send + Sync> {
-    state_type: PhantomData<S>,
+#[derive(Component)]
+struct TrafficLight {
     color: TrafficLightColor,
     window_has_focus: bool,
 }
 
-impl<S: 'static + Send + Sync> TrafficLight<S> {
+impl TrafficLight {
     fn new(color: TrafficLightColor, window_has_focus: bool) -> Self {
         Self {
-            state_type: PhantomData,
             color,
             window_has_focus,
         }
     }
 
-    fn render(&mut self, _view: &mut S, cx: &mut ViewContext<S>) -> impl Element<ViewState = S> {
+    fn render<S: 'static>(self, _view: &mut S, cx: &mut ViewContext<S>) -> impl Component<S> {
         let theme = theme(cx);
 
         let fill = match (self.window_has_focus, self.color) {
@@ -39,16 +35,14 @@ impl<S: 'static + Send + Sync> TrafficLight<S> {
     }
 }
 
-#[derive(Element)]
-pub struct TrafficLights<S: 'static + Send + Sync> {
-    state_type: PhantomData<S>,
+#[derive(Component)]
+pub struct TrafficLights {
     window_has_focus: bool,
 }
 
-impl<S: 'static + Send + Sync> TrafficLights<S> {
+impl TrafficLights {
     pub fn new() -> Self {
         Self {
-            state_type: PhantomData,
             window_has_focus: true,
         }
     }
@@ -58,7 +52,7 @@ impl<S: 'static + Send + Sync> TrafficLights<S> {
         self
     }
 
-    fn render(&mut self, _view: &mut S, cx: &mut ViewContext<S>) -> impl Element<ViewState = S> {
+    fn render<S: 'static>(self, _view: &mut S, cx: &mut ViewContext<S>) -> impl Component<S> {
         div()
             .flex()
             .items_center()
@@ -87,25 +81,17 @@ mod stories {
 
     use super::*;
 
-    #[derive(Element)]
-    pub struct TrafficLightsStory<S: 'static + Send + Sync> {
-        state_type: PhantomData<S>,
-    }
+    #[derive(Component)]
+    pub struct TrafficLightsStory;
 
-    impl<S: 'static + Send + Sync> TrafficLightsStory<S> {
+    impl TrafficLightsStory {
         pub fn new() -> Self {
-            Self {
-                state_type: PhantomData,
-            }
+            Self
         }
 
-        fn render(
-            &mut self,
-            _view: &mut S,
-            cx: &mut ViewContext<S>,
-        ) -> impl Element<ViewState = S> {
+        fn render<V: 'static>(self, _view: &mut V, cx: &mut ViewContext<V>) -> impl Component<V> {
             Story::container(cx)
-                .child(Story::title_for::<_, TrafficLights<S>>(cx))
+                .child(Story::title_for::<_, TrafficLights>(cx))
                 .child(Story::label(cx, "Default"))
                 .child(TrafficLights::new())
                 .child(Story::label(cx, "Unfocused"))

crates/ui2/src/components/workspace.rs

@@ -174,7 +174,7 @@ impl Workspace {
         view(cx.entity(|cx| Self::new(cx)), Self::render)
     }
 
-    pub fn render(&mut self, cx: &mut ViewContext<Self>) -> impl Element<ViewState = Self> {
+    pub fn render(&mut self, cx: &mut ViewContext<Self>) -> impl Component<Self> {
         let theme = old_theme(cx).clone();
 
         // HACK: This should happen inside of `debug_toggle_user_settings`, but

crates/ui2/src/element_ext.rs

@@ -1,18 +1,15 @@
 use gpui2::Element;
 
-pub trait ElementExt<S: 'static + Send + Sync>: Element<ViewState = S> {
-    /// Applies a given function `then` to the current element if `condition` is true.
-    /// This function is used to conditionally modify the element based on a given condition.
-    /// If `condition` is false, it just returns the current element as it is.
-    fn when(mut self, condition: bool, then: impl FnOnce(Self) -> Self) -> Self
-    where
-        Self: Sized,
-    {
-        if condition {
-            self = then(self);
-        }
-        self
-    }
+pub trait ElementExt<S: 'static>: Element<S> {
+    // fn when(mut self, condition: bool, then: impl FnOnce(Self) -> Self) -> Self
+    // where
+    //     Self: Sized,
+    // {
+    //     if condition {
+    //         self = then(self);
+    //     }
+    //     self
+    // }
 
     // fn when_some<T, U>(mut self, option: Option<T>, then: impl FnOnce(Self, T) -> U) -> U
     // where
@@ -25,4 +22,4 @@ pub trait ElementExt<S: 'static + Send + Sync>: Element<ViewState = S> {
     // }
 }
 
-impl<S: 'static + Send + Sync, E: Element<ViewState = S>> ElementExt<S> for E {}
+impl<S: 'static, E: Element<S>> ElementExt<S> for E {}

crates/ui2/src/elements/avatar.rs

@@ -1,20 +1,16 @@
-use std::marker::PhantomData;
-
 use gpui2::img;
 
 use crate::prelude::*;
 
-#[derive(Element)]
-pub struct Avatar<S: 'static + Send + Sync> {
-    state_type: PhantomData<S>,
+#[derive(Component)]
+pub struct Avatar {
     src: SharedString,
     shape: Shape,
 }
 
-impl<S: 'static + Send + Sync> Avatar<S> {
+impl Avatar {
     pub fn new(src: impl Into<SharedString>) -> Self {
         Self {
-            state_type: PhantomData,
             src: src.into(),
             shape: Shape::Circle,
         }
@@ -25,7 +21,7 @@ impl<S: 'static + Send + Sync> Avatar<S> {
         self
     }
 
-    fn render(&mut self, _view: &mut S, cx: &mut ViewContext<S>) -> impl Element<ViewState = S> {
+    fn render<V: 'static>(self, _view: &mut V, cx: &mut ViewContext<V>) -> impl Component<V> {
         let theme = theme(cx);
 
         let mut img = img();
@@ -51,25 +47,17 @@ mod stories {
 
     use super::*;
 
-    #[derive(Element)]
-    pub struct AvatarStory<S: 'static + Send + Sync> {
-        state_type: PhantomData<S>,
-    }
+    #[derive(Component)]
+    pub struct AvatarStory;
 
-    impl<S: 'static + Send + Sync> AvatarStory<S> {
+    impl AvatarStory {
         pub fn new() -> Self {
-            Self {
-                state_type: PhantomData,
-            }
+            Self
         }
 
-        fn render(
-            &mut self,
-            _view: &mut S,
-            cx: &mut ViewContext<S>,
-        ) -> impl Element<ViewState = S> {
+        fn render<V: 'static>(self, _view: &mut V, cx: &mut ViewContext<V>) -> impl Component<V> {
             Story::container(cx)
-                .child(Story::title_for::<_, Avatar<S>>(cx))
+                .child(Story::title_for::<_, Avatar>(cx))
                 .child(Story::label(cx, "Default"))
                 .child(Avatar::new(
                     "https://avatars.githubusercontent.com/u/1714999?v=4",

crates/ui2/src/elements/button.rs

@@ -1,4 +1,3 @@
-use std::marker::PhantomData;
 use std::sync::Arc;
 
 use gpui2::{div, DefiniteLength, Hsla, MouseButton, WindowContext};
@@ -49,21 +48,23 @@ impl ButtonVariant {
     }
 }
 
-pub type ClickHandler<S> = Arc<dyn Fn(&mut S, &mut ViewContext<S>) + 'static + Send + Sync>;
+pub type ClickHandler<S> = Arc<dyn Fn(&mut S, &mut ViewContext<S>) + Send + Sync>;
 
-struct ButtonHandlers<S: 'static + Send + Sync> {
+struct ButtonHandlers<S: 'static> {
     click: Option<ClickHandler<S>>,
 }
 
-impl<S: 'static + Send + Sync> Default for ButtonHandlers<S> {
+unsafe impl<S> Send for ButtonHandlers<S> {}
+unsafe impl<S> Sync for ButtonHandlers<S> {}
+
+impl<S: 'static> Default for ButtonHandlers<S> {
     fn default() -> Self {
         Self { click: None }
     }
 }
 
-#[derive(Element)]
-pub struct Button<S: 'static + Send + Sync> {
-    state_type: PhantomData<S>,
+#[derive(Component)]
+pub struct Button<S: 'static> {
     disabled: bool,
     handlers: ButtonHandlers<S>,
     icon: Option<Icon>,
@@ -73,10 +74,9 @@ pub struct Button<S: 'static + Send + Sync> {
     width: Option<DefiniteLength>,
 }
 
-impl<S: 'static + Send + Sync> Button<S> {
+impl<S: 'static> Button<S> {
     pub fn new(label: impl Into<SharedString>) -> Self {
         Self {
-            state_type: PhantomData,
             disabled: false,
             handlers: ButtonHandlers::default(),
             icon: None,
@@ -140,21 +140,17 @@ impl<S: 'static + Send + Sync> Button<S> {
         }
     }
 
-    fn render_label(&self) -> Label<S> {
+    fn render_label(&self) -> Label {
         Label::new(self.label.clone())
             .color(self.label_color())
             .line_height_style(LineHeightStyle::UILabel)
     }
 
-    fn render_icon(&self, icon_color: IconColor) -> Option<IconElement<S>> {
+    fn render_icon(&self, icon_color: IconColor) -> Option<IconElement> {
         self.icon.map(|i| IconElement::new(i).color(icon_color))
     }
 
-    pub fn render(
-        &mut self,
-        _view: &mut S,
-        cx: &mut ViewContext<S>,
-    ) -> impl Element<ViewState = S> {
+    pub fn render(self, _view: &mut S, cx: &mut ViewContext<S>) -> impl Component<S> {
         let icon_color = self.icon_color();
 
         let mut button = h_stack()
@@ -197,24 +193,20 @@ impl<S: 'static + Send + Sync> Button<S> {
     }
 }
 
-#[derive(Element)]
-pub struct ButtonGroup<S: 'static + Send + Sync> {
-    state_type: PhantomData<S>,
-    buttons: Vec<Button<S>>,
+#[derive(Component)]
+pub struct ButtonGroup<V: 'static> {
+    buttons: Vec<Button<V>>,
 }
 
-impl<S: 'static + Send + Sync> ButtonGroup<S> {
-    pub fn new(buttons: Vec<Button<S>>) -> Self {
-        Self {
-            state_type: PhantomData,
-            buttons,
-        }
+impl<V: 'static> ButtonGroup<V> {
+    pub fn new(buttons: Vec<Button<V>>) -> Self {
+        Self { buttons }
     }
 
-    fn render(&mut self, _view: &mut S, cx: &mut ViewContext<S>) -> impl Element<ViewState = S> {
+    fn render(self, _view: &mut V, cx: &mut ViewContext<V>) -> impl Component<V> {
         let mut el = h_stack().text_size(ui_size(cx, 1.));
 
-        for button in &mut self.buttons {
+        for button in self.buttons {
             el = el.child(button.render(_view, cx));
         }
 
@@ -234,27 +226,19 @@ mod stories {
 
     use super::*;
 
-    #[derive(Element)]
-    pub struct ButtonStory<S: 'static + Send + Sync + Clone> {
-        state_type: PhantomData<S>,
-    }
+    #[derive(Component)]
+    pub struct ButtonStory;
 
-    impl<S: 'static + Send + Sync + Clone> ButtonStory<S> {
+    impl ButtonStory {
         pub fn new() -> Self {
-            Self {
-                state_type: PhantomData,
-            }
+            Self
         }
 
-        fn render(
-            &mut self,
-            _view: &mut S,
-            cx: &mut ViewContext<S>,
-        ) -> impl Element<ViewState = S> {
+        fn render<V: 'static>(self, _view: &mut V, cx: &mut ViewContext<V>) -> impl Component<V> {
             let states = InteractionState::iter();
 
             Story::container(cx)
-                .child(Story::title_for::<_, Button<S>>(cx))
+                .child(Story::title_for::<_, Button<V>>(cx))
                 .child(
                     div()
                         .flex()

crates/ui2/src/elements/details.rs

@@ -1,19 +1,15 @@
-use std::marker::PhantomData;
-
 use crate::{prelude::*, v_stack, ButtonGroup};
 
-#[derive(Element)]
-pub struct Details<S: 'static + Send + Sync> {
-    state_type: PhantomData<S>,
+#[derive(Component)]
+pub struct Details<V: 'static> {
     text: &'static str,
     meta: Option<&'static str>,
-    actions: Option<ButtonGroup<S>>,
+    actions: Option<ButtonGroup<V>>,
 }
 
-impl<S: 'static + Send + Sync> Details<S> {
+impl<S: 'static> Details<S> {
     pub fn new(text: &'static str) -> Self {
         Self {
-            state_type: PhantomData,
             text,
             meta: None,
             actions: None,
@@ -30,7 +26,7 @@ impl<S: 'static + Send + Sync> Details<S> {
         self
     }
 
-    fn render(&mut self, _view: &mut S, cx: &mut ViewContext<S>) -> impl Element<ViewState = S> {
+    fn render(mut self, _view: &mut S, cx: &mut ViewContext<S>) -> impl Component<S> {
         let theme = theme(cx);
 
         v_stack()
@@ -54,25 +50,17 @@ mod stories {
 
     use super::*;
 
-    #[derive(Element)]
-    pub struct DetailsStory<S: 'static + Send + Sync + Clone> {
-        state_type: PhantomData<S>,
-    }
+    #[derive(Component)]
+    pub struct DetailsStory;
 
-    impl<S: 'static + Send + Sync + Clone> DetailsStory<S> {
+    impl DetailsStory {
         pub fn new() -> Self {
-            Self {
-                state_type: PhantomData,
-            }
+            Self
         }
 
-        fn render(
-            &mut self,
-            _view: &mut S,
-            cx: &mut ViewContext<S>,
-        ) -> impl Element<ViewState = S> {
+        fn render<V: 'static>(self, _view: &mut V, cx: &mut ViewContext<V>) -> impl Component<V> {
             Story::container(cx)
-                .child(Story::title_for::<_, Details<S>>(cx))
+                .child(Story::title_for::<_, Details<V>>(cx))
                 .child(Story::label(cx, "Default"))
                 .child(Details::new("The quick brown fox jumps over the lazy dog"))
                 .child(Story::label(cx, "With meta"))

crates/ui2/src/elements/icon.rs

@@ -1,5 +1,3 @@
-use std::marker::PhantomData;
-
 use gpui2::{svg, Hsla};
 use strum::EnumIter;
 
@@ -148,18 +146,16 @@ impl Icon {
     }
 }
 
-#[derive(Element)]
-pub struct IconElement<S: 'static + Send + Sync> {
-    state_type: PhantomData<S>,
+#[derive(Component)]
+pub struct IconElement {
     icon: Icon,
     color: IconColor,
     size: IconSize,
 }
 
-impl<S: 'static + Send + Sync> IconElement<S> {
+impl IconElement {
     pub fn new(icon: Icon) -> Self {
         Self {
-            state_type: PhantomData,
             icon,
             color: IconColor::default(),
             size: IconSize::default(),
@@ -176,7 +172,7 @@ impl<S: 'static + Send + Sync> IconElement<S> {
         self
     }
 
-    fn render(&mut self, _view: &mut S, cx: &mut ViewContext<S>) -> impl Element<ViewState = S> {
+    fn render<V: 'static>(self, _view: &mut V, cx: &mut ViewContext<V>) -> impl Component<V> {
         let fill = self.color.color(cx);
         let svg_size = match self.size {
             IconSize::Small => ui_size(cx, 12. / 14.),
@@ -202,27 +198,19 @@ mod stories {
 
     use super::*;
 
-    #[derive(Element, Default)]
-    pub struct IconStory<S: 'static + Send + Sync> {
-        state_type: PhantomData<S>,
-    }
+    #[derive(Component)]
+    pub struct IconStory;
 
-    impl<S: 'static + Send + Sync> IconStory<S> {
+    impl IconStory {
         pub fn new() -> Self {
-            Self {
-                state_type: PhantomData,
-            }
+            Self
         }
 
-        fn render(
-            &mut self,
-            _view: &mut S,
-            cx: &mut ViewContext<S>,
-        ) -> impl Element<ViewState = S> {
+        fn render<V: 'static>(self, _view: &mut V, cx: &mut ViewContext<V>) -> impl Component<V> {
             let icons = Icon::iter();
 
             Story::container(cx)
-                .child(Story::title_for::<_, IconElement<S>>(cx))
+                .child(Story::title_for::<_, IconElement>(cx))
                 .child(Story::label(cx, "All Icons"))
                 .child(div().flex().gap_3().children(icons.map(IconElement::new)))
         }

crates/ui2/src/elements/input.rs

@@ -1,5 +1,3 @@
-use std::marker::PhantomData;
-
 use crate::prelude::*;
 use crate::Label;
 use crate::LabelColor;
@@ -11,9 +9,8 @@ pub enum InputVariant {
     Filled,
 }
 
-#[derive(Element)]
-pub struct Input<S: 'static + Send + Sync> {
-    state_type: PhantomData<S>,
+#[derive(Component)]
+pub struct Input {
     placeholder: SharedString,
     value: String,
     state: InteractionState,
@@ -22,10 +19,9 @@ pub struct Input<S: 'static + Send + Sync> {
     is_active: bool,
 }
 
-impl<S: 'static + Send + Sync> Input<S> {
+impl Input {
     pub fn new(placeholder: impl Into<SharedString>) -> Self {
         Self {
-            state_type: PhantomData,
             placeholder: placeholder.into(),
             value: "".to_string(),
             state: InteractionState::default(),
@@ -60,7 +56,7 @@ impl<S: 'static + Send + Sync> Input<S> {
         self
     }
 
-    fn render(&mut self, _view: &mut S, cx: &mut ViewContext<S>) -> impl Element<ViewState = S> {
+    fn render<S: 'static>(self, _view: &mut S, cx: &mut ViewContext<S>) -> impl Component<S> {
         let theme = theme(cx);
 
         let (input_bg, input_hover_bg, input_active_bg) = match self.variant {
@@ -120,25 +116,17 @@ mod stories {
 
     use super::*;
 
-    #[derive(Element)]
-    pub struct InputStory<S: 'static + Send + Sync> {
-        state_type: PhantomData<S>,
-    }
+    #[derive(Component)]
+    pub struct InputStory;
 
-    impl<S: 'static + Send + Sync> InputStory<S> {
+    impl InputStory {
         pub fn new() -> Self {
-            Self {
-                state_type: PhantomData,
-            }
+            Self
         }
 
-        fn render(
-            &mut self,
-            _view: &mut S,
-            cx: &mut ViewContext<S>,
-        ) -> impl Element<ViewState = S> {
+        fn render<V: 'static>(self, _view: &mut V, cx: &mut ViewContext<V>) -> impl Component<V> {
             Story::container(cx)
-                .child(Story::title_for::<_, Input<S>>(cx))
+                .child(Story::title_for::<_, Input>(cx))
                 .child(Story::label(cx, "Default"))
                 .child(div().flex().child(Input::new("Search")))
         }

crates/ui2/src/elements/label.rs

@@ -1,5 +1,3 @@
-use std::marker::PhantomData;
-
 use gpui2::{relative, Hsla, WindowContext};
 use smallvec::SmallVec;
 
@@ -48,19 +46,17 @@ pub enum LineHeightStyle {
     UILabel,
 }
 
-#[derive(Element)]
-pub struct Label<S: 'static + Send + Sync> {
-    state_type: PhantomData<S>,
+#[derive(Component)]
+pub struct Label {
     label: SharedString,
     line_height_style: LineHeightStyle,
     color: LabelColor,
     strikethrough: bool,
 }
 
-impl<S: 'static + Send + Sync> Label<S> {
+impl Label {
     pub fn new(label: impl Into<SharedString>) -> Self {
         Self {
-            state_type: PhantomData,
             label: label.into(),
             line_height_style: LineHeightStyle::default(),
             color: LabelColor::Default,
@@ -83,7 +79,7 @@ impl<S: 'static + Send + Sync> Label<S> {
         self
     }
 
-    fn render(&mut self, _view: &mut S, cx: &mut ViewContext<S>) -> impl Element<ViewState = S> {
+    fn render<V: 'static>(self, _view: &mut V, cx: &mut ViewContext<V>) -> impl Component<V> {
         div()
             .when(self.strikethrough, |this| {
                 this.relative().child(
@@ -105,19 +101,17 @@ impl<S: 'static + Send + Sync> Label<S> {
     }
 }
 
-#[derive(Element)]
-pub struct HighlightedLabel<S: 'static + Send + Sync> {
-    state_type: PhantomData<S>,
+#[derive(Component)]
+pub struct HighlightedLabel {
     label: SharedString,
     color: LabelColor,
     highlight_indices: Vec<usize>,
     strikethrough: bool,
 }
 
-impl<S: 'static + Send + Sync> HighlightedLabel<S> {
+impl HighlightedLabel {
     pub fn new(label: impl Into<SharedString>, highlight_indices: Vec<usize>) -> Self {
         Self {
-            state_type: PhantomData,
             label: label.into(),
             color: LabelColor::Default,
             highlight_indices,
@@ -135,7 +129,7 @@ impl<S: 'static + Send + Sync> HighlightedLabel<S> {
         self
     }
 
-    fn render(&mut self, _view: &mut S, cx: &mut ViewContext<S>) -> impl Element<ViewState = S> {
+    fn render<V: 'static>(self, _view: &mut V, cx: &mut ViewContext<V>) -> impl Component<V> {
         let theme = theme(cx);
 
         let highlight_color = theme.text_accent;
@@ -211,25 +205,17 @@ mod stories {
 
     use super::*;
 
-    #[derive(Element)]
-    pub struct LabelStory<S: 'static + Send + Sync> {
-        state_type: PhantomData<S>,
-    }
+    #[derive(Component)]
+    pub struct LabelStory;
 
-    impl<S: 'static + Send + Sync> LabelStory<S> {
+    impl LabelStory {
         pub fn new() -> Self {
-            Self {
-                state_type: PhantomData,
-            }
+            Self
         }
 
-        fn render(
-            &mut self,
-            _view: &mut S,
-            cx: &mut ViewContext<S>,
-        ) -> impl Element<ViewState = S> {
+        fn render<V: 'static>(self, _view: &mut V, cx: &mut ViewContext<V>) -> impl Component<V> {
             Story::container(cx)
-                .child(Story::title_for::<_, Label<S>>(cx))
+                .child(Story::title_for::<_, Label>(cx))
                 .child(Story::label(cx, "Default"))
                 .child(Label::new("Hello, world!"))
                 .child(Story::label(cx, "Highlighted"))

crates/ui2/src/elements/stack.rs

@@ -14,18 +14,18 @@ pub trait Stack: Styled + Sized {
     }
 }
 
-impl<S: 'static + Send + Sync> Stack for Div<S> {}
+impl<S: 'static> Stack for Div<S> {}
 
 /// Horizontally stacks elements.
 ///
 /// Sets `flex()`, `flex_row()`, `items_center()`
-pub fn h_stack<S: 'static + Send + Sync>() -> Div<S> {
+pub fn h_stack<S: 'static>() -> Div<S> {
     div().h_stack()
 }
 
 /// Vertically stacks elements.
 ///
 /// Sets `flex()`, `flex_col()`
-pub fn v_stack<S: 'static + Send + Sync>() -> Div<S> {
+pub fn v_stack<S: 'static>() -> Div<S> {
     div().v_stack()
 }

crates/ui2/src/elements/tool_divider.rs

@@ -1,20 +1,14 @@
-use std::marker::PhantomData;
-
 use crate::prelude::*;
 
-#[derive(Element)]
-pub struct ToolDivider<S: 'static + Send + Sync> {
-    state_type: PhantomData<S>,
-}
+#[derive(Component)]
+pub struct ToolDivider;
 
-impl<S: 'static + Send + Sync> ToolDivider<S> {
+impl ToolDivider {
     pub fn new() -> Self {
-        Self {
-            state_type: PhantomData,
-        }
+        Self
     }
 
-    fn render(&mut self, _view: &mut S, cx: &mut ViewContext<S>) -> impl Element<ViewState = S> {
+    fn render<V: 'static>(self, _view: &mut V, cx: &mut ViewContext<V>) -> impl Component<V> {
         let theme = theme(cx);
 
         div().w_px().h_3().bg(theme.border)

crates/ui2/src/prelude.rs

@@ -1,5 +1,5 @@
 pub use gpui2::{
-    div, Element, ElementId, IntoAnyElement, ParentElement, SharedString, StatefulInteractive,
+    div, Element, ElementId, Component, ParentElement, SharedString, StatefulInteractive,
     StatelessInteractive, Styled, ViewContext, WindowContext,
 };
 

crates/ui2/src/static_data.rs

@@ -13,7 +13,7 @@ use crate::{
 };
 use crate::{HighlightedText, ListDetailsEntry};
 
-pub fn static_tabs_example<S: 'static + Send + Sync + Clone>() -> Vec<Tab<S>> {
+pub fn static_tabs_example() -> Vec<Tab> {
     vec![
         Tab::new("wip.rs")
             .title("wip.rs".to_string())
@@ -63,7 +63,7 @@ pub fn static_tabs_example<S: 'static + Send + Sync + Clone>() -> Vec<Tab<S>> {
     ]
 }
 
-pub fn static_tabs_1<S: 'static + Send + Sync + Clone>() -> Vec<Tab<S>> {
+pub fn static_tabs_1() -> Vec<Tab> {
     vec![
         Tab::new("project_panel.rs")
             .title("project_panel.rs".to_string())
@@ -87,7 +87,7 @@ pub fn static_tabs_1<S: 'static + Send + Sync + Clone>() -> Vec<Tab<S>> {
     ]
 }
 
-pub fn static_tabs_2<S: 'static + Send + Sync + Clone>() -> Vec<Tab<S>> {
+pub fn static_tabs_2() -> Vec<Tab> {
     vec![
         Tab::new("tab_bar.rs")
             .title("tab_bar.rs".to_string())
@@ -102,7 +102,7 @@ pub fn static_tabs_2<S: 'static + Send + Sync + Clone>() -> Vec<Tab<S>> {
     ]
 }
 
-pub fn static_tabs_3<S: 'static + Send + Sync + Clone>() -> Vec<Tab<S>> {
+pub fn static_tabs_3() -> Vec<Tab> {
     vec![Tab::new("static_tabs_3")
         .git_status(GitStatus::Created)
         .current(true)]
@@ -325,7 +325,7 @@ pub fn static_players_with_call_status() -> Vec<PlayerWithCallStatus> {
     ]
 }
 
-pub fn static_new_notification_items<S: 'static + Send + Sync>() -> Vec<ListItem<S>> {
+pub fn static_new_notification_items<S: 'static>() -> Vec<ListItem<S>> {
     vec![
         ListDetailsEntry::new("maxdeviant invited you to join a stream in #design.")
             .meta("4 people in stream."),
@@ -336,7 +336,7 @@ pub fn static_new_notification_items<S: 'static + Send + Sync>() -> Vec<ListItem
     .collect()
 }
 
-pub fn static_read_notification_items<S: 'static + Send + Sync>() -> Vec<ListItem<S>> {
+pub fn static_read_notification_items<S: 'static>() -> Vec<ListItem<S>> {
     vec![
         ListDetailsEntry::new("mikaylamaki added you as a contact.").actions(vec![
             Button::new("Decline"),
@@ -352,7 +352,7 @@ pub fn static_read_notification_items<S: 'static + Send + Sync>() -> Vec<ListIte
     .collect()
 }
 
-pub fn static_project_panel_project_items<S: 'static + Send + Sync>() -> Vec<ListItem<S>> {
+pub fn static_project_panel_project_items<S: 'static>() -> Vec<ListItem<S>> {
     vec![
         ListEntry::new(Label::new("zed"))
             .left_icon(Icon::FolderOpen.into())
@@ -479,7 +479,7 @@ pub fn static_project_panel_project_items<S: 'static + Send + Sync>() -> Vec<Lis
     .collect()
 }
 
-pub fn static_project_panel_single_items<S: 'static + Send + Sync>() -> Vec<ListItem<S>> {
+pub fn static_project_panel_single_items<S: 'static>() -> Vec<ListItem<S>> {
     vec![
         ListEntry::new(Label::new("todo.md"))
             .left_icon(Icon::FileDoc.into())
@@ -496,7 +496,7 @@ pub fn static_project_panel_single_items<S: 'static + Send + Sync>() -> Vec<List
     .collect()
 }
 
-pub fn static_collab_panel_current_call<S: 'static + Send + Sync>() -> Vec<ListItem<S>> {
+pub fn static_collab_panel_current_call<S: 'static>() -> Vec<ListItem<S>> {
     vec![
         ListEntry::new(Label::new("as-cii")).left_avatar("http://github.com/as-cii.png?s=50"),
         ListEntry::new(Label::new("nathansobo"))
@@ -509,7 +509,7 @@ pub fn static_collab_panel_current_call<S: 'static + Send + Sync>() -> Vec<ListI
     .collect()
 }
 
-pub fn static_collab_panel_channels<S: 'static + Send + Sync>() -> Vec<ListItem<S>> {
+pub fn static_collab_panel_channels<S: 'static>() -> Vec<ListItem<S>> {
     vec![
         ListEntry::new(Label::new("zed"))
             .left_icon(Icon::Hash.into())
@@ -573,7 +573,7 @@ pub fn static_collab_panel_channels<S: 'static + Send + Sync>() -> Vec<ListItem<
     .collect()
 }
 
-pub fn example_editor_actions<S: 'static + Send + Sync>() -> Vec<PaletteItem<S>> {
+pub fn example_editor_actions() -> Vec<PaletteItem> {
     vec![
         PaletteItem::new("New File").keybinding(Keybinding::new(
             "N".to_string(),
@@ -638,7 +638,7 @@ pub fn empty_editor_example(cx: &mut WindowContext) -> EditorPane {
     )
 }
 
-pub fn empty_buffer_example<S: 'static + Send + Sync + Clone>() -> Buffer<S> {
+pub fn empty_buffer_example() -> Buffer {
     Buffer::new("empty-buffer").set_rows(Some(BufferRows::default()))
 }
 
@@ -663,9 +663,7 @@ pub fn hello_world_rust_editor_example(cx: &mut WindowContext) -> EditorPane {
     )
 }
 
-pub fn hello_world_rust_buffer_example<S: 'static + Send + Sync + Clone>(
-    theme: &Theme,
-) -> Buffer<S> {
+pub fn hello_world_rust_buffer_example(theme: &Theme) -> Buffer {
     Buffer::new("hello-world-rust-buffer")
         .set_title("hello_world.rs".to_string())
         .set_path("src/hello_world.rs".to_string())
@@ -804,9 +802,7 @@ pub fn hello_world_rust_editor_with_status_example(cx: &mut WindowContext) -> Ed
     )
 }
 
-pub fn hello_world_rust_buffer_with_status_example<S: 'static + Send + Sync + Clone>(
-    theme: &Theme,
-) -> Buffer<S> {
+pub fn hello_world_rust_buffer_with_status_example(theme: &Theme) -> Buffer {
     Buffer::new("hello-world-rust-buffer-with-status")
         .set_title("hello_world.rs".to_string())
         .set_path("src/hello_world.rs".to_string())
@@ -952,7 +948,7 @@ pub fn hello_world_rust_with_status_buffer_rows(theme: &Theme) -> Vec<BufferRow>
     ]
 }
 
-pub fn terminal_buffer<S: 'static + Send + Sync + Clone>(theme: &Theme) -> Buffer<S> {
+pub fn terminal_buffer(theme: &Theme) -> Buffer {
     Buffer::new("terminal")
         .set_title("zed — fish".to_string())
         .set_rows(Some(BufferRows {

crates/ui2/src/story.rs

@@ -5,7 +5,7 @@ use crate::prelude::*;
 pub struct Story {}
 
 impl Story {
-    pub fn container<S: 'static + Send + Sync>(cx: &mut ViewContext<S>) -> Div<S> {
+    pub fn container<S: 'static>(cx: &mut ViewContext<S>) -> Div<S> {
         let theme = theme(cx);
 
         div()
@@ -18,10 +18,10 @@ impl Story {
             .bg(theme.background)
     }
 
-    pub fn title<S: 'static + Send + Sync>(
+    pub fn title<S: 'static>(
         cx: &mut ViewContext<S>,
         title: &str,
-    ) -> impl Element<ViewState = S> {
+    ) -> impl Component<S> {
         let theme = theme(cx);
 
         div()
@@ -30,16 +30,14 @@ impl Story {
             .child(title.to_owned())
     }
 
-    pub fn title_for<S: 'static + Send + Sync, T>(
-        cx: &mut ViewContext<S>,
-    ) -> impl Element<ViewState = S> {
+    pub fn title_for<S: 'static, T>(cx: &mut ViewContext<S>) -> impl Component<S> {
         Self::title(cx, std::any::type_name::<T>())
     }
 
-    pub fn label<S: 'static + Send + Sync>(
+    pub fn label<S: 'static>(
         cx: &mut ViewContext<S>,
         label: &str,
-    ) -> impl Element<ViewState = S> {
+    ) -> impl Component<S> {
         let theme = theme(cx);
 
         div()

crates/ui2/src/theme.rs

@@ -1,5 +1,5 @@
 use gpui2::{
-    AnyElement, Bounds, Element, Hsla, IntoAnyElement, LayoutId, Pixels, Result, ViewContext,
+    AnyElement, Bounds, Component, Element, Hsla, LayoutId, Pixels, Result, ViewContext,
     WindowContext,
 };
 use serde::{de::Visitor, Deserialize, Deserializer};
@@ -132,10 +132,11 @@ where
     deserializer.deserialize_map(SyntaxVisitor)
 }
 
-pub fn themed<E, F>(theme: Theme, cx: &mut ViewContext<E::ViewState>, build_child: F) -> Themed<E>
+pub fn themed<V, E, F>(theme: Theme, cx: &mut ViewContext<V>, build_child: F) -> Themed<E>
 where
-    E: Element,
-    F: FnOnce(&mut ViewContext<E::ViewState>) -> E,
+    V: 'static,
+    E: Element<V>,
+    F: FnOnce(&mut ViewContext<V>) -> E,
 {
     cx.default_global::<ThemeStack>().0.push(theme.clone());
     let child = build_child(cx);
@@ -148,12 +149,13 @@ pub struct Themed<E> {
     pub(crate) child: E,
 }
 
-impl<E> IntoAnyElement<E::ViewState> for Themed<E>
+impl<V, E> Component<V> for Themed<E>
 where
-    E: 'static + Element + Send + Sync,
+    V: 'static,
+    E: 'static + Element<V> + Send + Sync,
     E::ElementState: Send + Sync,
 {
-    fn into_any(self) -> AnyElement<E::ViewState> {
+    fn render(self) -> AnyElement<V> {
         AnyElement::new(self)
     }
 }
@@ -161,11 +163,11 @@ where
 #[derive(Default)]
 struct ThemeStack(Vec<Theme>);
 
-impl<E: 'static + Element + Send + Sync> Element for Themed<E>
+impl<V, E: 'static + Element<V> + Send + Sync> Element<V> for Themed<E>
 where
+    V: 'static,
     E::ElementState: Send + Sync,
 {
-    type ViewState = E::ViewState;
     type ElementState = E::ElementState;
 
     fn id(&self) -> Option<gpui2::ElementId> {
@@ -174,9 +176,9 @@ where
 
     fn initialize(
         &mut self,
-        view_state: &mut Self::ViewState,
+        view_state: &mut V,
         element_state: Option<Self::ElementState>,
-        cx: &mut ViewContext<Self::ViewState>,
+        cx: &mut ViewContext<V>,
     ) -> Self::ElementState {
         cx.default_global::<ThemeStack>().0.push(self.theme.clone());
         let element_state = self.child.initialize(view_state, element_state, cx);
@@ -186,9 +188,9 @@ where
 
     fn layout(
         &mut self,
-        view_state: &mut E::ViewState,
+        view_state: &mut V,
         element_state: &mut Self::ElementState,
-        cx: &mut ViewContext<E::ViewState>,
+        cx: &mut ViewContext<V>,
     ) -> LayoutId
     where
         Self: Sized,
@@ -202,9 +204,9 @@ where
     fn paint(
         &mut self,
         bounds: Bounds<Pixels>,
-        view_state: &mut Self::ViewState,
+        view_state: &mut V,
         frame_state: &mut Self::ElementState,
-        cx: &mut ViewContext<Self::ViewState>,
+        cx: &mut ViewContext<V>,
     ) where
         Self: Sized,
     {