Clean up Element API and start on docs

crates/activity_indicator2/src/activity_indicator.rs

@@ -304,9 +304,9 @@ impl ActivityIndicator {
 impl EventEmitter<Event> for ActivityIndicator {}
 
 impl Render for ActivityIndicator {
-    type Element = Stateful<Div>;
+    type Output = Stateful<Div>;
 
-    fn render(&mut self, cx: &mut ViewContext<Self>) -> Self::Element {
+    fn render(&mut self, cx: &mut ViewContext<Self>) -> Self::Output {
         let content = self.content_to_render(cx);
 
         let mut result = h_stack()

crates/assistant2/src/assistant_panel.rs

@@ -1101,9 +1101,9 @@ fn build_api_key_editor(cx: &mut ViewContext<AssistantPanel>) -> View<Editor> {
 }
 
 impl Render for AssistantPanel {
-    type Element = Focusable<Div>;
+    type Output = Focusable<Div>;
 
-    fn render(&mut self, cx: &mut ViewContext<Self>) -> Self::Element {
+    fn render(&mut self, cx: &mut ViewContext<Self>) -> Self::Output {
         if let Some(api_key_editor) = self.api_key_editor.clone() {
             v_stack()
                 .on_action(cx.listener(AssistantPanel::save_credentials))
@@ -2513,9 +2513,9 @@ impl ConversationEditor {
 impl EventEmitter<ConversationEditorEvent> for ConversationEditor {}
 
 impl Render for ConversationEditor {
-    type Element = Div;
+    type Output = Div;
 
-    fn render(&mut self, cx: &mut ViewContext<Self>) -> Self::Element {
+    fn render(&mut self, cx: &mut ViewContext<Self>) -> Self::Output {
         div()
             .key_context("ConversationEditor")
             .capture_action(cx.listener(ConversationEditor::cancel_last_assist))
@@ -2618,9 +2618,9 @@ struct InlineAssistant {
 impl EventEmitter<InlineAssistantEvent> for InlineAssistant {}
 
 impl Render for InlineAssistant {
-    type Element = Div;
+    type Output = Div;
 
-    fn render(&mut self, cx: &mut ViewContext<Self>) -> Self::Element {
+    fn render(&mut self, cx: &mut ViewContext<Self>) -> Self::Output {
         let measurements = self.measurements.get();
         h_stack()
             .w_full()

crates/auto_update2/src/update_notification.rs

@@ -13,9 +13,9 @@ pub struct UpdateNotification {
 impl EventEmitter<DismissEvent> for UpdateNotification {}
 
 impl Render for UpdateNotification {
-    type Element = Div;
+    type Output = Div;
 
-    fn render(&mut self, cx: &mut gpui::ViewContext<Self>) -> Self::Element {
+    fn render(&mut self, cx: &mut gpui::ViewContext<Self>) -> Self::Output {
         let app_name = cx.global::<ReleaseChannel>().display_name();
 
         v_stack()

crates/breadcrumbs2/src/breadcrumbs.rs

@@ -30,9 +30,9 @@ impl Breadcrumbs {
 impl EventEmitter<ToolbarItemEvent> for Breadcrumbs {}
 
 impl Render for Breadcrumbs {
-    type Element = Div;
+    type Output = Div;
 
-    fn render(&mut self, cx: &mut ViewContext<Self>) -> Self::Element {
+    fn render(&mut self, cx: &mut ViewContext<Self>) -> Self::Output {
         let element = h_stack().text_ui();
         let Some(active_item) = self.active_item.as_ref() else {
             return element;

crates/collab_ui2/src/channel_view.rs

@@ -222,9 +222,9 @@ impl ChannelView {
 impl EventEmitter<EditorEvent> for ChannelView {}
 
 impl Render for ChannelView {
-    type Element = AnyView;
+    type Output = AnyView;
 
-    fn render(&mut self, _cx: &mut ViewContext<Self>) -> Self::Element {
+    fn render(&mut self, _cx: &mut ViewContext<Self>) -> Self::Output {
         self.editor.clone().into()
     }
 }

crates/collab_ui2/src/chat_panel.rs

@@ -549,9 +549,9 @@ impl ChatPanel {
 impl EventEmitter<Event> for ChatPanel {}
 
 impl Render for ChatPanel {
-    type Element = Div;
+    type Output = Div;
 
-    fn render(&mut self, cx: &mut ViewContext<Self>) -> Self::Element {
+    fn render(&mut self, cx: &mut ViewContext<Self>) -> Self::Output {
         div()
             .full()
             .child(if self.client.user_id().is_some() {

crates/collab_ui2/src/chat_panel/message_editor.rs

@@ -196,9 +196,9 @@ impl MessageEditor {
 }
 
 impl Render for MessageEditor {
-    type Element = AnyView;
+    type Output = AnyView;
 
-    fn render(&mut self, _cx: &mut ViewContext<Self>) -> Self::Element {
+    fn render(&mut self, _cx: &mut ViewContext<Self>) -> Self::Output {
         self.editor.to_any()
     }
 }

crates/collab_ui2/src/collab_panel.rs

@@ -2263,9 +2263,9 @@ fn render_tree_branch(is_last: bool, cx: &mut WindowContext) -> impl IntoElement
 }
 
 impl Render for CollabPanel {
-    type Element = Focusable<Div>;
+    type Output = Focusable<Div>;
 
-    fn render(&mut self, cx: &mut ViewContext<Self>) -> Self::Element {
+    fn render(&mut self, cx: &mut ViewContext<Self>) -> Self::Output {
         v_stack()
             .key_context("CollabPanel")
             .on_action(cx.listener(CollabPanel::cancel))
@@ -2453,9 +2453,9 @@ struct DraggedChannelView {
 }
 
 impl Render for DraggedChannelView {
-    type Element = Div;
+    type Output = Div;
 
-    fn render(&mut self, cx: &mut ViewContext<Self>) -> Self::Element {
+    fn render(&mut self, cx: &mut ViewContext<Self>) -> Self::Output {
         let ui_font = ThemeSettings::get_global(cx).ui_font.family.clone();
         h_stack()
             .font(ui_font)

crates/collab_ui2/src/collab_panel/channel_modal.rs

@@ -142,9 +142,9 @@ impl FocusableView for ChannelModal {
 }
 
 impl Render for ChannelModal {
-    type Element = Div;
+    type Output = Div;
 
-    fn render(&mut self, cx: &mut ViewContext<Self>) -> Self::Element {
+    fn render(&mut self, cx: &mut ViewContext<Self>) -> Self::Output {
         let channel_store = self.channel_store.read(cx);
         let Some(channel) = channel_store.channel_for_id(self.channel_id) else {
             return div();

crates/collab_ui2/src/collab_panel/contact_finder.rs

@@ -35,7 +35,7 @@ impl ContactFinder {
 }
 
 impl Render for ContactFinder {
-    fn render(&mut self, cx: &mut ViewContext<Self>) -> Self::Element {
+    fn render(&mut self, cx: &mut ViewContext<Self>) -> Self::Output {
         v_stack()
             .elevation_3(cx)
             .child(
@@ -52,7 +52,7 @@ impl Render for ContactFinder {
             .w(rems(34.))
     }
 
-    type Element = Div;
+    type Output = Div;
 }
 
 pub struct ContactFinderDelegate {

crates/collab_ui2/src/collab_titlebar_item.rs

@@ -56,9 +56,9 @@ pub struct CollabTitlebarItem {
 }
 
 impl Render for CollabTitlebarItem {
-    type Element = Stateful<Div>;
+    type Output = Stateful<Div>;
 
-    fn render(&mut self, cx: &mut ViewContext<Self>) -> Self::Element {
+    fn render(&mut self, cx: &mut ViewContext<Self>) -> Self::Output {
         let room = ActiveCall::global(cx).read(cx).room().cloned();
         let current_user = self.user_store.read(cx).current_user();
         let client = self.client.clone();

crates/collab_ui2/src/face_pile.rs

@@ -9,9 +9,9 @@ pub struct FacePile {
 }
 
 impl RenderOnce for FacePile {
-    type Rendered = Div;
+    type Output = Div;
 
-    fn render(self, _: &mut WindowContext) -> Self::Rendered {
+    fn render(self, _: &mut WindowContext) -> Self::Output {
         let player_count = self.faces.len();
         let player_list = self.faces.into_iter().enumerate().map(|(ix, player)| {
             let isnt_last = ix < player_count - 1;

crates/collab_ui2/src/notification_panel.rs

@@ -540,7 +540,7 @@ impl NotificationPanel {
 }
 
 impl Render for NotificationPanel {
-    type Element = Div;
+    type Output = Div;
 
     fn render(&mut self, cx: &mut ViewContext<Self>) -> Div {
         v_stack()
@@ -706,9 +706,9 @@ impl NotificationToast {
 }
 
 impl Render for NotificationToast {
-    type Element = Stateful<Div>;
+    type Output = Stateful<Div>;
 
-    fn render(&mut self, cx: &mut ViewContext<Self>) -> Self::Element {
+    fn render(&mut self, cx: &mut ViewContext<Self>) -> Self::Output {
         let user = self.actor.clone();
 
         h_stack()

crates/collab_ui2/src/notifications/incoming_call_notification.rs

@@ -117,9 +117,9 @@ impl IncomingCallNotification {
 }
 
 impl Render for IncomingCallNotification {
-    type Element = Div;
+    type Output = Div;
 
-    fn render(&mut self, cx: &mut ViewContext<Self>) -> Self::Element {
+    fn render(&mut self, cx: &mut ViewContext<Self>) -> Self::Output {
         // TODO: Is there a better place for us to initialize the font?
         let (ui_font, ui_font_size) = {
             let theme_settings = ThemeSettings::get_global(cx);

crates/collab_ui2/src/notifications/project_shared_notification.rs

@@ -120,9 +120,9 @@ impl ProjectSharedNotification {
 }
 
 impl Render for ProjectSharedNotification {
-    type Element = Div;
+    type Output = Div;
 
-    fn render(&mut self, cx: &mut ViewContext<Self>) -> Self::Element {
+    fn render(&mut self, cx: &mut ViewContext<Self>) -> Self::Output {
         // TODO: Is there a better place for us to initialize the font?
         let (ui_font, ui_font_size) = {
             let theme_settings = ThemeSettings::get_global(cx);

crates/command_palette2/src/command_palette.rs

@@ -83,9 +83,9 @@ impl FocusableView for CommandPalette {
 }
 
 impl Render for CommandPalette {
-    type Element = Div;
+    type Output = Div;
 
-    fn render(&mut self, _cx: &mut ViewContext<Self>) -> Self::Element {
+    fn render(&mut self, _cx: &mut ViewContext<Self>) -> Self::Output {
         v_stack().w(rems(34.)).child(self.picker.clone())
     }
 }

crates/copilot2/src/sign_in.rs

@@ -181,9 +181,9 @@ impl CopilotCodeVerification {
 }
 
 impl Render for CopilotCodeVerification {
-    type Element = Stateful<Div>;
+    type Output = Stateful<Div>;
 
-    fn render(&mut self, cx: &mut ViewContext<Self>) -> Self::Element {
+    fn render(&mut self, cx: &mut ViewContext<Self>) -> Self::Output {
         let prompt = match &self.status {
             Status::SigningIn {
                 prompt: Some(prompt),

crates/copilot_button2/src/copilot_button.rs

@@ -34,9 +34,9 @@ pub struct CopilotButton {
 }
 
 impl Render for CopilotButton {
-    type Element = Div;
+    type Output = Div;
 
-    fn render(&mut self, cx: &mut ViewContext<Self>) -> Self::Element {
+    fn render(&mut self, cx: &mut ViewContext<Self>) -> Self::Output {
         let all_language_settings = all_language_settings(None, cx);
         if !all_language_settings.copilot.feature_enabled {
             return div();

crates/diagnostics2/src/diagnostics.rs

@@ -91,9 +91,9 @@ struct DiagnosticGroupState {
 impl EventEmitter<EditorEvent> for ProjectDiagnosticsEditor {}
 
 impl Render for ProjectDiagnosticsEditor {
-    type Element = Focusable<Div>;
+    type Output = Focusable<Div>;
 
-    fn render(&mut self, cx: &mut ViewContext<Self>) -> Self::Element {
+    fn render(&mut self, cx: &mut ViewContext<Self>) -> Self::Output {
         let child = if self.path_states.is_empty() {
             div()
                 .bg(cx.theme().colors().editor_background)

crates/diagnostics2/src/items.rs

@@ -21,9 +21,9 @@ pub struct DiagnosticIndicator {
 }
 
 impl Render for DiagnosticIndicator {
-    type Element = Div;
+    type Output = Div;
 
-    fn render(&mut self, cx: &mut ViewContext<Self>) -> Self::Element {
+    fn render(&mut self, cx: &mut ViewContext<Self>) -> Self::Output {
         let diagnostic_indicator = match (self.summary.error_count, self.summary.warning_count) {
             (0, 0) => h_stack().child(
                 IconElement::new(Icon::Check)

crates/diagnostics2/src/toolbar_controls.rs

@@ -9,9 +9,9 @@ pub struct ToolbarControls {
 }
 
 impl Render for ToolbarControls {
-    type Element = Div;
+    type Output = Div;
 
-    fn render(&mut self, cx: &mut ViewContext<Self>) -> Self::Element {
+    fn render(&mut self, cx: &mut ViewContext<Self>) -> Self::Output {
         let include_warnings = self
             .editor
             .as_ref()

crates/editor2/src/editor.rs

@@ -9291,9 +9291,9 @@ impl FocusableView for Editor {
 }
 
 impl Render for Editor {
-    type Element = EditorElement;
+    type Output = EditorElement;
 
-    fn render(&mut self, cx: &mut ViewContext<Self>) -> Self::Element {
+    fn render(&mut self, cx: &mut ViewContext<Self>) -> Self::Output {
         let settings = ThemeSettings::get_global(cx);
         let text_style = match self.mode {
             EditorMode::SingleLine | EditorMode::AutoHeight { .. } => TextStyle {

crates/editor2/src/element.rs

@@ -2757,7 +2757,7 @@ enum Invisible {
 impl Element for EditorElement {
     type State = ();
 
-    fn layout(
+    fn request_layout(
         &mut self,
         _element_state: Option<Self::State>,
         cx: &mut gpui::WindowContext,

crates/editor2/src/items.rs

@@ -1193,9 +1193,9 @@ impl CursorPosition {
 }
 
 impl Render for CursorPosition {
-    type Element = Div;
+    type Output = Div;
 
-    fn render(&mut self, _: &mut ViewContext<Self>) -> Self::Element {
+    fn render(&mut self, _: &mut ViewContext<Self>) -> Self::Output {
         div().when_some(self.position, |el, position| {
             let mut text = format!(
                 "{}{FILE_ROW_COLUMN_DELIMITER}{}",

crates/feedback2/src/deploy_feedback_button.rs

@@ -17,9 +17,9 @@ impl DeployFeedbackButton {
 }
 
 impl Render for DeployFeedbackButton {
-    type Element = AnyElement;
+    type Output = AnyElement;
 
-    fn render(&mut self, cx: &mut ViewContext<Self>) -> Self::Element {
+    fn render(&mut self, cx: &mut ViewContext<Self>) -> Self::Output {
         let is_open = self
             .workspace
             .upgrade()

crates/feedback2/src/feedback_modal.rs

@@ -396,9 +396,9 @@ impl FeedbackModal {
 }
 
 impl Render for FeedbackModal {
-    type Element = Div;
+    type Output = Div;
 
-    fn render(&mut self, cx: &mut ViewContext<Self>) -> Self::Element {
+    fn render(&mut self, cx: &mut ViewContext<Self>) -> Self::Output {
         self.update_submission_state(cx);
 
         let submit_button_text = if self.awaiting_submission() {

crates/file_finder2/src/file_finder.rs

@@ -118,9 +118,9 @@ impl FocusableView for FileFinder {
     }
 }
 impl Render for FileFinder {
-    type Element = Div;
+    type Output = Div;
 
-    fn render(&mut self, _cx: &mut ViewContext<Self>) -> Self::Element {
+    fn render(&mut self, _cx: &mut ViewContext<Self>) -> Self::Output {
         v_stack().w(rems(34.)).child(self.picker.clone())
     }
 }

crates/go_to_line2/src/go_to_line.rs

@@ -153,9 +153,9 @@ impl GoToLine {
 }
 
 impl Render for GoToLine {
-    type Element = Div;
+    type Output = Div;
 
-    fn render(&mut self, cx: &mut ViewContext<Self>) -> Self::Element {
+    fn render(&mut self, cx: &mut ViewContext<Self>) -> Self::Output {
         div()
             .elevation_2(cx)
             .key_context("GoToLine")

crates/gpui2/src/app/test_context.rs

@@ -733,9 +733,9 @@ impl AnyWindowHandle {
 pub struct EmptyView {}
 
 impl Render for EmptyView {
-    type Element = Div;
+    type Output = Div;
 
-    fn render(&mut self, _cx: &mut crate::ViewContext<Self>) -> Self::Element {
+    fn render(&mut self, _cx: &mut crate::ViewContext<Self>) -> Self::Output {
         div()
     }
 }

crates/gpui2/src/element.rs

@@ -6,23 +6,61 @@ use derive_more::{Deref, DerefMut};
 pub(crate) use smallvec::SmallVec;
 use std::{any::Any, fmt::Debug};
 
-pub trait Render: 'static + Sized {
+/// Elements describe the contents of a window for a given frame.
-    type Element: Element + 'static;
+/// Like HTML elements, elements form a tree and participate in layout.
+/// In GPUI, elements are single-use objects that do not outlive a single frame.
+/// Elements are associated with state.
+/// If the element has an identifier, the element's state persists across frames in which the element appears.
+/// If the element is anonymous, the state only persists across from layout request to paint in is referred to as "frame state".
+/// A potential improvement would be to separate this temporary frame state from persistent element state at the type level, and request element state from the context with an id. /cc @as-cii\
+/// To render the contents of a window, we first walk over the tree of elements recursively via [request_layout], giving each an opportunity to register with the layout engine.
+/// Then we compute the requested layout and use the computed bounds to paint the element tree recursively with [paint].
+/// You can implement this trait yourself for performance or other special situations, but you'll typically compose existing elements such as `Div`, `Img`, etc.
+pub trait Element: 'static + IntoElement {
+    /// State that is carried from [request_layout] to [paint] for anonymous elements, and between frames for elements that have an id.
+    type State: 'static;
 
-    fn render(&mut self, cx: &mut ViewContext<Self>) -> Self::Element;
+    /// Recursively register this element and all its descendants with the layout engine.
+    /// If this element has an id, you'll receive the [State] from the previous frame if an element with this id existed in that frame.
+    /// Return the [LayoutId] you requested from the engine and whatever state you want to carry over to [paint], and also the next frame if this element has an id.
+    fn request_layout(
+        &mut self,
+        state: Option<Self::State>,
+        cx: &mut WindowContext,
+    ) -> (LayoutId, Self::State);
+
+    /// Recursively paint this element by populating the current frame's [Scene] with geometric primitives such as quads, sprites, paths, etc.
+    /// Receives the state from layout, and potentially the previous frame if this element has an id.
+    fn paint(&mut self, bounds: Bounds<Pixels>, state: &mut Self::State, cx: &mut WindowContext);
+
+    /// Convert into a dynamically-typed [AnyElement].
+    /// Before an element can be painted, it must be converted into an [AnyElement].
+    /// It's also useful in situations where you need to own an element, but don't care about its specific type.
+    fn into_any(self) -> AnyElement {
+        AnyElement::new(self)
+    }
 }
 
+/// Implemented by any type that can be converted into an element.
 pub trait IntoElement: Sized {
-    type Element: Element + 'static;
+    /// The specific type of element into which the implementing type is converted.
+    type Element: Element;
 
+    /// The [ElementId] of self once converted into an [Element].
+    /// If present, the resulting element's state will be carried across frames.
     fn element_id(&self) -> Option<ElementId>;
 
+    /// Convert self into a type that implements [Element].
     fn into_element(self) -> Self::Element;
 
+    /// Convert self into a dynamically-typed [AnyElement].
     fn into_any_element(self) -> AnyElement {
         self.into_element().into_any()
     }
 
+    /// Convert into an element, then draw in the current window at the given origin.
+    /// The provided available space is provided to the layout engine to determine the size of the root element.
+    /// Once the element is drawn, its associated element staet is yielded to the given callback.
     fn draw_and_update_state<T, R>(
         self,
         origin: Point<Pixels>,
@@ -54,6 +92,7 @@ pub trait IntoElement: Sized {
         }
     }
 
+    /// Convert self to another type by calling the given closure. Useful in rendering code.
     fn map<U>(self, f: impl FnOnce(Self) -> U) -> U
     where
         Self: Sized,
@@ -62,6 +101,7 @@ pub trait IntoElement: Sized {
         f(self)
     }
 
+    /// Conditionally chain onto self with the given closure. Useful in rendering code.
     fn when(self, condition: bool, then: impl FnOnce(Self) -> Self) -> Self
     where
         Self: Sized,
@@ -69,6 +109,8 @@ pub trait IntoElement: Sized {
         self.map(|this| if condition { then(this) } else { this })
     }
 
+    /// Conditionally chain onto self with the given closure if the given option is Some.
+    /// The contents of the option are provided to the closure.
     fn when_some<T>(self, option: Option<T>, then: impl FnOnce(Self, T) -> Self) -> Self
     where
         Self: Sized,
@@ -83,35 +125,46 @@ pub trait IntoElement: Sized {
     }
 }
 
-pub trait Element: 'static + IntoElement {
+pub trait Render: 'static + Sized {
-    type State: 'static;
+    type Output: IntoElement;
 
-    fn layout(
+    fn render(&mut self, cx: &mut ViewContext<Self>) -> Self::Output;
-        &mut self,
-        state: Option<Self::State>,
-        cx: &mut WindowContext,
-    ) -> (LayoutId, Self::State);
-
-    fn paint(&mut self, bounds: Bounds<Pixels>, state: &mut Self::State, cx: &mut WindowContext);
-
-    fn into_any(self) -> AnyElement {
-        AnyElement::new(self)
-    }
 }
 
 pub trait RenderOnce: 'static {
-    type Rendered: IntoElement;
+    type Output: IntoElement;
 
-    fn render(self, cx: &mut WindowContext) -> Self::Rendered;
+    fn render(self, cx: &mut WindowContext) -> Self::Output;
+}
+
+pub trait ParentElement {
+    fn children_mut(&mut self) -> &mut SmallVec<[AnyElement; 2]>;
+
+    fn child(mut self, child: impl IntoElement) -> Self
+    where
+        Self: Sized,
+    {
+        self.children_mut().push(child.into_element().into_any());
+        self
+    }
+
+    fn children(mut self, children: impl IntoIterator<Item = impl IntoElement>) -> Self
+    where
+        Self: Sized,
+    {
+        self.children_mut()
+            .extend(children.into_iter().map(|child| child.into_any_element()));
+        self
+    }
 }
 
 pub struct Component<C> {
     component: Option<C>,
 }
 
-pub struct CompositeElementState<C: RenderOnce> {
+pub struct ComponentState<C: RenderOnce> {
-    rendered_element: Option<<C::Rendered as IntoElement>::Element>,
+    rendered_element: Option<<C::Output as IntoElement>::Element>,
-    rendered_element_state: Option<<<C::Rendered as IntoElement>::Element as Element>::State>,
+    rendered_element_state: Option<<<C::Output as IntoElement>::Element as Element>::State>,
 }
 
 impl<C> Component<C> {
@@ -123,9 +176,9 @@ impl<C> Component<C> {
 }
 
 impl<C: RenderOnce> Element for Component<C> {
-    type State = CompositeElementState<C>;
+    type State = ComponentState<C>;
 
-    fn layout(
+    fn request_layout(
         &mut self,
         state: Option<Self::State>,
         cx: &mut WindowContext,
@@ -133,16 +186,16 @@ impl<C: RenderOnce> Element for Component<C> {
         let mut element = self.component.take().unwrap().render(cx).into_element();
         if let Some(element_id) = element.element_id() {
             let layout_id =
-                cx.with_element_state(element_id, |state, cx| element.layout(state, cx));
+                cx.with_element_state(element_id, |state, cx| element.request_layout(state, cx));
-            let state = CompositeElementState {
+            let state = ComponentState {
                 rendered_element: Some(element),
                 rendered_element_state: None,
             };
             (layout_id, state)
         } else {
             let (layout_id, state) =
-                element.layout(state.and_then(|s| s.rendered_element_state), cx);
+                element.request_layout(state.and_then(|s| s.rendered_element_state), cx);
-            let state = CompositeElementState {
+            let state = ComponentState {
                 rendered_element: Some(element),
                 rendered_element_state: Some(state),
             };
@@ -183,27 +236,6 @@ impl<C: RenderOnce> IntoElement for Component<C> {
 #[derive(Deref, DerefMut, Default, Clone, Debug, Eq, PartialEq, Hash)]
 pub struct GlobalElementId(SmallVec<[ElementId; 32]>);
 
-pub trait ParentElement {
-    fn children_mut(&mut self) -> &mut SmallVec<[AnyElement; 2]>;
-
-    fn child(mut self, child: impl IntoElement) -> Self
-    where
-        Self: Sized,
-    {
-        self.children_mut().push(child.into_element().into_any());
-        self
-    }
-
-    fn children(mut self, children: impl IntoIterator<Item = impl IntoElement>) -> Self
-    where
-        Self: Sized,
-    {
-        self.children_mut()
-            .extend(children.into_iter().map(|child| child.into_any_element()));
-        self
-    }
-}
-
 trait ElementObject {
     fn element_id(&self) -> Option<ElementId>;
 
@@ -262,11 +294,14 @@ impl<E: Element> DrawableElement<E> {
         let (layout_id, frame_state) = if let Some(id) = self.element.as_ref().unwrap().element_id()
         {
             let layout_id = cx.with_element_state(id, |element_state, cx| {
-                self.element.as_mut().unwrap().layout(element_state, cx)
+                self.element
+                    .as_mut()
+                    .unwrap()
+                    .request_layout(element_state, cx)
             });
             (layout_id, None)
         } else {
-            let (layout_id, frame_state) = self.element.as_mut().unwrap().layout(None, cx);
+            let (layout_id, frame_state) = self.element.as_mut().unwrap().request_layout(None, cx);
             (layout_id, Some(frame_state))
         };
 
@@ -454,7 +489,7 @@ impl AnyElement {
 impl Element for AnyElement {
     type State = ();
 
-    fn layout(
+    fn request_layout(
         &mut self,
         _: Option<Self::State>,
         cx: &mut WindowContext,
@@ -502,7 +537,7 @@ impl IntoElement for () {
 impl Element for () {
     type State = ();
 
-    fn layout(
+    fn request_layout(
         &mut self,
         _state: Option<Self::State>,
         cx: &mut WindowContext,

crates/gpui2/src/elements/canvas.rs

@@ -29,7 +29,7 @@ impl IntoElement for Canvas {
 impl Element for Canvas {
     type State = Style;
 
-    fn layout(
+    fn request_layout(
         &mut self,
         _: Option<Self::State>,
         cx: &mut WindowContext,

crates/gpui2/src/elements/div.rs

@@ -768,7 +768,7 @@ impl ParentElement for Div {
 impl Element for Div {
     type State = DivState;
 
-    fn layout(
+    fn request_layout(
         &mut self,
         element_state: Option<Self::State>,
         cx: &mut WindowContext,
@@ -1818,12 +1818,12 @@ where
 {
     type State = E::State;
 
-    fn layout(
+    fn request_layout(
         &mut self,
         state: Option<Self::State>,
         cx: &mut WindowContext,
     ) -> (LayoutId, Self::State) {
-        self.element.layout(state, cx)
+        self.element.request_layout(state, cx)
     }
 
     fn paint(&mut self, bounds: Bounds<Pixels>, state: &mut Self::State, cx: &mut WindowContext) {
@@ -1892,12 +1892,12 @@ where
 {
     type State = E::State;
 
-    fn layout(
+    fn request_layout(
         &mut self,
         state: Option<Self::State>,
         cx: &mut WindowContext,
     ) -> (LayoutId, Self::State) {
-        self.element.layout(state, cx)
+        self.element.request_layout(state, cx)
     }
 
     fn paint(&mut self, bounds: Bounds<Pixels>, state: &mut Self::State, cx: &mut WindowContext) {

crates/gpui2/src/elements/img.rs

@@ -71,7 +71,7 @@ impl Img {
 impl Element for Img {
     type State = InteractiveElementState;
 
-    fn layout(
+    fn request_layout(
         &mut self,
         element_state: Option<Self::State>,
         cx: &mut WindowContext,

crates/gpui2/src/elements/list.rs

@@ -302,7 +302,7 @@ pub struct ListOffset {
 impl Element for List {
     type State = ();
 
-    fn layout(
+    fn request_layout(
         &mut self,
         _state: Option<Self::State>,
         cx: &mut crate::WindowContext,

crates/gpui2/src/elements/overlay.rs

@@ -60,7 +60,7 @@ impl ParentElement for Overlay {
 impl Element for Overlay {
     type State = OverlayState;
 
-    fn layout(
+    fn request_layout(
         &mut self,
         _: Option<Self::State>,
         cx: &mut WindowContext,

crates/gpui2/src/elements/svg.rs

@@ -26,7 +26,7 @@ impl Svg {
 impl Element for Svg {
     type State = InteractiveElementState;
 
-    fn layout(
+    fn request_layout(
         &mut self,
         element_state: Option<Self::State>,
         cx: &mut WindowContext,

crates/gpui2/src/elements/text.rs

@@ -12,7 +12,7 @@ use util::ResultExt;
 impl Element for &'static str {
     type State = TextState;
 
-    fn layout(
+    fn request_layout(
         &mut self,
         _: Option<Self::State>,
         cx: &mut WindowContext,
@@ -42,7 +42,7 @@ impl IntoElement for &'static str {
 impl Element for SharedString {
     type State = TextState;
 
-    fn layout(
+    fn request_layout(
         &mut self,
         _: Option<Self::State>,
         cx: &mut WindowContext,
@@ -118,7 +118,7 @@ impl StyledText {
 impl Element for StyledText {
     type State = TextState;
 
-    fn layout(
+    fn request_layout(
         &mut self,
         _: Option<Self::State>,
         cx: &mut WindowContext,
@@ -331,7 +331,7 @@ impl InteractiveText {
 impl Element for InteractiveText {
     type State = InteractiveTextState;
 
-    fn layout(
+    fn request_layout(
         &mut self,
         state: Option<Self::State>,
         cx: &mut WindowContext,
@@ -340,14 +340,14 @@ impl Element for InteractiveText {
             mouse_down_index, ..
         }) = state
         {
-            let (layout_id, text_state) = self.text.layout(None, cx);
+            let (layout_id, text_state) = self.text.request_layout(None, cx);
             let element_state = InteractiveTextState {
                 text_state,
                 mouse_down_index,
             };
             (layout_id, element_state)
         } else {
-            let (layout_id, text_state) = self.text.layout(None, cx);
+            let (layout_id, text_state) = self.text.request_layout(None, cx);
             let element_state = InteractiveTextState {
                 text_state,
                 mouse_down_index: Rc::default(),

crates/gpui2/src/elements/uniform_list.rs

@@ -116,7 +116,7 @@ pub struct UniformListState {
 impl Element for UniformList {
     type State = UniformListState;
 
-    fn layout(
+    fn request_layout(
         &mut self,
         state: Option<Self::State>,
         cx: &mut WindowContext,

crates/gpui2/src/interactive.rs

@@ -205,9 +205,9 @@ impl ExternalPaths {
 }
 
 impl Render for ExternalPaths {
-    type Element = Div;
+    type Output = Div;
 
-    fn render(&mut self, _: &mut ViewContext<Self>) -> Self::Element {
+    fn render(&mut self, _: &mut ViewContext<Self>) -> Self::Output {
         div() // Intentionally left empty because the platform will render icons for the dragged files
     }
 }
@@ -305,9 +305,9 @@ mod test {
     actions!(test, [TestAction]);
 
     impl Render for TestView {
-        type Element = Stateful<Div>;
+        type Output = Stateful<Div>;
 
-        fn render(&mut self, cx: &mut gpui::ViewContext<Self>) -> Self::Element {
+        fn render(&mut self, cx: &mut gpui::ViewContext<Self>) -> Self::Output {
             div().id("testview").child(
                 div()
                     .key_context("parent")

crates/gpui2/src/view.rs

@@ -81,12 +81,12 @@ impl<V: 'static> View<V> {
 impl<V: Render> Element for View<V> {
     type State = Option<AnyElement>;
 
-    fn layout(
+    fn request_layout(
         &mut self,
         _state: Option<Self::State>,
         cx: &mut WindowContext,
     ) -> (LayoutId, Self::State) {
-        let mut element = self.update(cx, |view, cx| view.render(cx).into_any());
+        let mut element = self.update(cx, |view, cx| view.render(cx).into_any_element());
         let layout_id = element.layout(cx);
         (layout_id, Some(element))
     }
@@ -229,7 +229,7 @@ impl<V: Render> From<View<V>> for AnyView {
 impl Element for AnyView {
     type State = Option<AnyElement>;
 
-    fn layout(
+    fn request_layout(
         &mut self,
         _state: Option<Self::State>,
         cx: &mut WindowContext,
@@ -317,22 +317,22 @@ where
     T: 'static + FnMut(&mut WindowContext) -> E,
     E: 'static + Send + Element,
 {
-    type Element = E;
+    type Output = E;
 
-    fn render(&mut self, cx: &mut ViewContext<Self>) -> Self::Element {
+    fn render(&mut self, cx: &mut ViewContext<Self>) -> Self::Output {
         (self)(cx)
     }
 }
 
 mod any_view {
-    use crate::{AnyElement, AnyView, Element, LayoutId, Render, WindowContext};
+    use crate::{AnyElement, AnyView, IntoElement, LayoutId, Render, WindowContext};
 
     pub(crate) fn layout<V: 'static + Render>(
         view: &AnyView,
         cx: &mut WindowContext,
     ) -> (LayoutId, AnyElement) {
         let view = view.clone().downcast::<V>().unwrap();
-        let mut element = view.update(cx, |view, cx| view.render(cx).into_any());
+        let mut element = view.update(cx, |view, cx| view.render(cx).into_any_element());
         let layout_id = element.layout(cx);
         (layout_id, element)
     }

crates/gpui2_macros/src/derive_render.rs

@@ -11,9 +11,9 @@ pub fn derive_render(input: TokenStream) -> TokenStream {
         impl #impl_generics gpui::Render for #type_name #type_generics
         #where_clause
         {
-            type Element = ();
+            type Output = ();
 
-            fn render(&mut self, _cx: &mut ViewContext<Self>) -> Self::Element {
+            fn render(&mut self, _cx: &mut ViewContext<Self>) -> Self::Output {
                 ()
             }
         }

crates/language_selector2/src/active_buffer_language.rs

@@ -38,7 +38,7 @@ impl ActiveBufferLanguage {
 }
 
 impl Render for ActiveBufferLanguage {
-    type Element = Div;
+    type Output = Div;
 
     fn render(&mut self, cx: &mut ViewContext<Self>) -> Div {
         div().when_some(self.active_language.as_ref(), |el, active_language| {

crates/language_selector2/src/language_selector.rs

@@ -67,9 +67,9 @@ impl LanguageSelector {
 }
 
 impl Render for LanguageSelector {
-    type Element = Div;
+    type Output = Div;
 
-    fn render(&mut self, _cx: &mut ViewContext<Self>) -> Self::Element {
+    fn render(&mut self, _cx: &mut ViewContext<Self>) -> Self::Output {
         v_stack().w(rems(34.)).child(self.picker.clone())
     }
 }

crates/language_tools2/src/lsp_log.rs

@@ -595,9 +595,9 @@ fn log_contents(lines: &VecDeque<String>) -> String {
 }
 
 impl Render for LspLogView {
-    type Element = EditorElement;
+    type Output = EditorElement;
 
-    fn render(&mut self, cx: &mut ViewContext<Self>) -> Self::Element {
+    fn render(&mut self, cx: &mut ViewContext<Self>) -> Self::Output {
         self.editor.update(cx, |editor, cx| editor.render(cx))
     }
 }
@@ -709,9 +709,9 @@ impl ToolbarItemView for LspLogToolbarItemView {
 }
 
 impl Render for LspLogToolbarItemView {
-    type Element = Div;
+    type Output = Div;
 
-    fn render(&mut self, cx: &mut ViewContext<Self>) -> Self::Element {
+    fn render(&mut self, cx: &mut ViewContext<Self>) -> Self::Output {
         let Some(log_view) = self.log_view.clone() else {
             return div();
         };

crates/language_tools2/src/syntax_tree_view.rs

@@ -305,9 +305,9 @@ impl SyntaxTreeView {
 }
 
 impl Render for SyntaxTreeView {
-    type Element = Div;
+    type Output = Div;
 
-    fn render(&mut self, cx: &mut gpui::ViewContext<'_, Self>) -> Self::Element {
+    fn render(&mut self, cx: &mut gpui::ViewContext<'_, Self>) -> Self::Output {
         let settings = ThemeSettings::get_global(cx);
         let line_height = cx
             .text_style()
@@ -507,7 +507,7 @@ fn format_node_range(node: Node) -> String {
 }
 
 impl Render for SyntaxTreeToolbarItemView {
-    type Element = PopoverMenu<ContextMenu>;
+    type Output = PopoverMenu<ContextMenu>;
 
     fn render(&mut self, cx: &mut ViewContext<'_, Self>) -> PopoverMenu<ContextMenu> {
         self.render_menu(cx)

crates/outline2/src/outline.rs

@@ -57,9 +57,9 @@ impl EventEmitter<DismissEvent> for OutlineView {}
 impl ModalView for OutlineView {}
 
 impl Render for OutlineView {
-    type Element = Div;
+    type Output = Div;
 
-    fn render(&mut self, _cx: &mut ViewContext<Self>) -> Self::Element {
+    fn render(&mut self, _cx: &mut ViewContext<Self>) -> Self::Output {
         v_stack().w(rems(34.)).child(self.picker.clone())
     }
 }

crates/picker2/src/picker2.rs

@@ -228,9 +228,9 @@ impl<D: PickerDelegate> EventEmitter<DismissEvent> for Picker<D> {}
 impl<D: PickerDelegate> ModalView for Picker<D> {}
 
 impl<D: PickerDelegate> Render for Picker<D> {
-    type Element = Div;
+    type Output = Div;
 
-    fn render(&mut self, cx: &mut ViewContext<Self>) -> Self::Element {
+    fn render(&mut self, cx: &mut ViewContext<Self>) -> Self::Output {
         let picker_editor = h_stack()
             .overflow_hidden()
             .flex_none()

crates/project_panel2/src/project_panel.rs

@@ -1480,9 +1480,9 @@ impl ProjectPanel {
 }
 
 impl Render for ProjectPanel {
-    type Element = Focusable<Stateful<Div>>;
+    type Output = Focusable<Stateful<Div>>;
 
-    fn render(&mut self, cx: &mut gpui::ViewContext<Self>) -> Self::Element {
+    fn render(&mut self, cx: &mut gpui::ViewContext<Self>) -> Self::Output {
         let has_worktree = self.visible_entries.len() != 0;
 
         if has_worktree {
@@ -1548,9 +1548,9 @@ impl Render for ProjectPanel {
 }
 
 impl Render for DraggedProjectEntryView {
-    type Element = Div;
+    type Output = Div;
 
-    fn render(&mut self, cx: &mut ViewContext<Self>) -> Self::Element {
+    fn render(&mut self, cx: &mut ViewContext<Self>) -> Self::Output {
         let settings = ProjectPanelSettings::get_global(cx);
         let ui_font = ThemeSettings::get_global(cx).ui_font.family.clone();
         h_stack()

crates/quick_action_bar2/src/quick_action_bar.rs

@@ -36,9 +36,9 @@ impl QuickActionBar {
 }
 
 impl Render for QuickActionBar {
-    type Element = Stateful<Div>;
+    type Output = Stateful<Div>;
 
-    fn render(&mut self, cx: &mut ViewContext<Self>) -> Self::Element {
+    fn render(&mut self, cx: &mut ViewContext<Self>) -> Self::Output {
         let Some(editor) = self.active_editor() else {
             return div().id("empty quick action bar");
         };
@@ -138,9 +138,9 @@ impl QuickActionBarButton {
 }
 
 impl RenderOnce for QuickActionBarButton {
-    type Rendered = IconButton;
+    type Output = IconButton;
 
-    fn render(self, _: &mut WindowContext) -> Self::Rendered {
+    fn render(self, _: &mut WindowContext) -> Self::Output {
         let tooltip = self.tooltip.clone();
         let action = self.action.boxed_clone();
 

crates/recent_projects2/src/highlighted_workspace_location.rs

@@ -43,9 +43,9 @@ impl HighlightedText {
 }
 
 impl RenderOnce for HighlightedText {
-    type Rendered = HighlightedLabel;
+    type Output = HighlightedLabel;
 
-    fn render(self, _cx: &mut WindowContext) -> Self::Rendered {
+    fn render(self, _cx: &mut WindowContext) -> Self::Output {
         HighlightedLabel::new(self.text, self.highlight_positions)
     }
 }

crates/recent_projects2/src/recent_projects.rs

@@ -103,9 +103,9 @@ impl FocusableView for RecentProjects {
 }
 
 impl Render for RecentProjects {
-    type Element = Div;
+    type Output = Div;
 
-    fn render(&mut self, cx: &mut ViewContext<Self>) -> Self::Element {
+    fn render(&mut self, cx: &mut ViewContext<Self>) -> Self::Output {
         v_stack()
             .w(rems(self.rem_width))
             .child(self.picker.clone())

crates/search2/src/buffer_search.rs

@@ -101,9 +101,9 @@ impl BufferSearchBar {
 impl EventEmitter<Event> for BufferSearchBar {}
 impl EventEmitter<workspace::ToolbarItemEvent> for BufferSearchBar {}
 impl Render for BufferSearchBar {
-    type Element = Div;
+    type Output = Div;
 
-    fn render(&mut self, cx: &mut ViewContext<Self>) -> Self::Element {
+    fn render(&mut self, cx: &mut ViewContext<Self>) -> Self::Output {
         if self.dismissed {
             return div();
         }

crates/search2/src/project_search.rs

@@ -279,9 +279,9 @@ pub enum ViewEvent {
 impl EventEmitter<ViewEvent> for ProjectSearchView {}
 
 impl Render for ProjectSearchView {
-    type Element = AnyElement;
+    type Output = AnyElement;
 
-    fn render(&mut self, cx: &mut ViewContext<Self>) -> Self::Element {
+    fn render(&mut self, cx: &mut ViewContext<Self>) -> Self::Output {
         if self.has_matches() {
             div()
                 .flex_1()
@@ -1494,9 +1494,9 @@ impl ProjectSearchBar {
 }
 
 impl Render for ProjectSearchBar {
-    type Element = Div;
+    type Output = Div;
 
-    fn render(&mut self, cx: &mut ViewContext<Self>) -> Self::Element {
+    fn render(&mut self, cx: &mut ViewContext<Self>) -> Self::Output {
         let Some(search) = self.active_project_search.clone() else {
             return div();
         };

crates/story/src/story.rs

@@ -74,9 +74,9 @@ impl ParentElement for StoryContainer {
 }
 
 impl RenderOnce for StoryContainer {
-    type Rendered = Stateful<Div>;
+    type Output = Stateful<Div>;
 
-    fn render(self, _cx: &mut WindowContext) -> Self::Rendered {
+    fn render(self, _cx: &mut WindowContext) -> Self::Output {
         div()
             .size_full()
             .flex()
@@ -294,9 +294,9 @@ impl StoryItem {
 }
 
 impl RenderOnce for StoryItem {
-    type Rendered = Div;
+    type Output = Div;
 
-    fn render(self, _cx: &mut WindowContext) -> Self::Rendered {
+    fn render(self, _cx: &mut WindowContext) -> Self::Output {
         div()
             .my_2()
             .flex()
@@ -358,9 +358,9 @@ impl StorySection {
 }
 
 impl RenderOnce for StorySection {
-    type Rendered = Div;
+    type Output = Div;
 
-    fn render(self, _cx: &mut WindowContext) -> Self::Rendered {
+    fn render(self, _cx: &mut WindowContext) -> Self::Output {
         let children: SmallVec<[AnyElement; 2]> = SmallVec::from_iter(Itertools::intersperse_with(
             self.children.into_iter(),
             || Story::divider().into_any_element(),

crates/storybook2/src/stories/auto_height_editor.rs

@@ -22,9 +22,9 @@ impl AutoHeightEditorStory {
 }
 
 impl Render for AutoHeightEditorStory {
-    type Element = Div;
+    type Output = Div;
 
-    fn render(&mut self, _cx: &mut ViewContext<Self>) -> Self::Element {
+    fn render(&mut self, _cx: &mut ViewContext<Self>) -> Self::Output {
         div()
             .size_full()
             .bg(white())

crates/storybook2/src/stories/cursor.rs

@@ -5,9 +5,9 @@ use ui::prelude::*;
 pub struct CursorStory;
 
 impl Render for CursorStory {
-    type Element = Div;
+    type Output = Div;
 
-    fn render(&mut self, _cx: &mut ViewContext<Self>) -> Self::Element {
+    fn render(&mut self, _cx: &mut ViewContext<Self>) -> Self::Output {
         let all_cursors: [(&str, Box<dyn Fn(Stateful<Div>) -> Stateful<Div>>); 19] = [
             (
                 "cursor_default",

crates/storybook2/src/stories/focus.rs

@@ -57,9 +57,9 @@ impl FocusStory {
 }
 
 impl Render for FocusStory {
-    type Element = Focusable<Stateful<Div>>;
+    type Output = Focusable<Stateful<Div>>;
 
-    fn render(&mut self, cx: &mut gpui::ViewContext<Self>) -> Self::Element {
+    fn render(&mut self, cx: &mut gpui::ViewContext<Self>) -> Self::Output {
         let theme = cx.theme();
         let color_1 = theme.status().created;
         let color_2 = theme.status().modified;

crates/storybook2/src/stories/kitchen_sink.rs

@@ -14,9 +14,9 @@ impl KitchenSinkStory {
 }
 
 impl Render for KitchenSinkStory {
-    type Element = Stateful<Div>;
+    type Output = Stateful<Div>;
 
-    fn render(&mut self, cx: &mut ViewContext<Self>) -> Self::Element {
+    fn render(&mut self, cx: &mut ViewContext<Self>) -> Self::Output {
         let component_stories = ComponentStory::iter()
             .map(|selector| selector.story(cx))
             .collect::<Vec<_>>();

crates/storybook2/src/stories/overflow_scroll.rs

@@ -6,9 +6,9 @@ use ui::prelude::*;
 pub struct OverflowScrollStory;
 
 impl Render for OverflowScrollStory {
-    type Element = Div;
+    type Output = Div;
 
-    fn render(&mut self, _cx: &mut ViewContext<Self>) -> Self::Element {
+    fn render(&mut self, _cx: &mut ViewContext<Self>) -> Self::Output {
         Story::container()
             .child(Story::title("Overflow Scroll"))
             .child(Story::label("`overflow_x_scroll`"))

crates/storybook2/src/stories/picker.rs

@@ -202,9 +202,9 @@ impl PickerStory {
 }
 
 impl Render for PickerStory {
-    type Element = Div;
+    type Output = Div;
 
-    fn render(&mut self, cx: &mut gpui::ViewContext<Self>) -> Self::Element {
+    fn render(&mut self, cx: &mut gpui::ViewContext<Self>) -> Self::Output {
         div()
             .bg(cx.theme().styles.colors.background)
             .size_full()

crates/storybook2/src/stories/scroll.rs

@@ -11,9 +11,9 @@ impl ScrollStory {
 }
 
 impl Render for ScrollStory {
-    type Element = Stateful<Div>;
+    type Output = Stateful<Div>;
 
-    fn render(&mut self, cx: &mut gpui::ViewContext<Self>) -> Self::Element {
+    fn render(&mut self, cx: &mut gpui::ViewContext<Self>) -> Self::Output {
         let theme = cx.theme();
         let color_1 = theme.status().created;
         let color_2 = theme.status().modified;

crates/storybook2/src/stories/text.rs

@@ -14,9 +14,9 @@ impl TextStory {
 }
 
 impl Render for TextStory {
-    type Element = Component<StoryContainer>;
+    type Output = Component<StoryContainer>;
 
-    fn render(&mut self, cx: &mut gpui::ViewContext<Self>) -> Self::Element {
+    fn render(&mut self, cx: &mut gpui::ViewContext<Self>) -> Self::Output {
         StoryContainer::new("Text Story", "crates/storybook2/src/stories/text.rs")
             .children(
                 vec![

crates/storybook2/src/stories/viewport_units.rs

@@ -6,9 +6,9 @@ use ui::prelude::*;
 pub struct ViewportUnitsStory;
 
 impl Render for ViewportUnitsStory {
-    type Element = Div;
+    type Output = Div;
 
-    fn render(&mut self, cx: &mut ViewContext<Self>) -> Self::Element {
+    fn render(&mut self, cx: &mut ViewContext<Self>) -> Self::Output {
         Story::container().child(
             div()
                 .flex()

crates/storybook2/src/stories/z_index.rs

@@ -7,9 +7,9 @@ use ui::prelude::*;
 pub struct ZIndexStory;
 
 impl Render for ZIndexStory {
-    type Element = Div;
+    type Output = Div;
 
-    fn render(&mut self, _cx: &mut ViewContext<Self>) -> Self::Element {
+    fn render(&mut self, _cx: &mut ViewContext<Self>) -> Self::Output {
         Story::container().child(Story::title("z-index")).child(
             div()
                 .flex()
@@ -82,9 +82,9 @@ struct ZIndexExample {
 }
 
 impl RenderOnce for ZIndexExample {
-    type Rendered = Div;
+    type Output = Div;
 
-    fn render(self, _cx: &mut WindowContext) -> Self::Rendered {
+    fn render(self, _cx: &mut WindowContext) -> Self::Output {
         div()
             .relative()
             .size_full()

crates/storybook2/src/storybook2.rs

@@ -113,9 +113,9 @@ impl StoryWrapper {
 }
 
 impl Render for StoryWrapper {
-    type Element = Div;
+    type Output = Div;
 
-    fn render(&mut self, _cx: &mut ViewContext<Self>) -> Self::Element {
+    fn render(&mut self, _cx: &mut ViewContext<Self>) -> Self::Output {
         div()
             .flex()
             .flex_col()

crates/terminal_view2/src/terminal_element.rs

@@ -750,7 +750,7 @@ impl TerminalElement {
 impl Element for TerminalElement {
     type State = InteractiveElementState;
 
-    fn layout(
+    fn request_layout(
         &mut self,
         element_state: Option<Self::State>,
         cx: &mut WindowContext<'_>,

crates/terminal_view2/src/terminal_panel.rs

@@ -329,9 +329,9 @@ impl TerminalPanel {
 impl EventEmitter<PanelEvent> for TerminalPanel {}
 
 impl Render for TerminalPanel {
-    type Element = Div;
+    type Output = Div;
 
-    fn render(&mut self, _cx: &mut ViewContext<Self>) -> Self::Element {
+    fn render(&mut self, _cx: &mut ViewContext<Self>) -> Self::Output {
         div().size_full().child(self.pane.clone())
     }
 }

crates/terminal_view2/src/terminal_view.rs

@@ -617,9 +617,9 @@ impl TerminalView {
 }
 
 impl Render for TerminalView {
-    type Element = Focusable<Div>;
+    type Output = Focusable<Div>;
 
-    fn render(&mut self, cx: &mut ViewContext<Self>) -> Self::Element {
+    fn render(&mut self, cx: &mut ViewContext<Self>) -> Self::Output {
         let terminal_handle = self.terminal.clone();
 
         let focused = self.focus_handle.is_focused(cx);

crates/theme_selector2/src/theme_selector.rs

@@ -67,9 +67,9 @@ impl FocusableView for ThemeSelector {
 }
 
 impl Render for ThemeSelector {
-    type Element = Div;
+    type Output = Div;
 
-    fn render(&mut self, _cx: &mut ViewContext<Self>) -> Self::Element {
+    fn render(&mut self, _cx: &mut ViewContext<Self>) -> Self::Output {
         v_stack().w(rems(34.)).child(self.picker.clone())
     }
 }

crates/ui2/src/components/avatar.rs

@@ -16,9 +16,9 @@ pub struct Avatar {
 }
 
 impl RenderOnce for Avatar {
-    type Rendered = Div;
+    type Output = Div;
 
-    fn render(mut self, cx: &mut WindowContext) -> Self::Rendered {
+    fn render(mut self, cx: &mut WindowContext) -> Self::Output {
         if self.image.style().corner_radii.top_left.is_none() {
             self = self.shape(Shape::Circle);
         }

crates/ui2/src/components/button/button.rs

@@ -136,9 +136,9 @@ impl ButtonCommon for Button {
 }
 
 impl RenderOnce for Button {
-    type Rendered = ButtonLike;
+    type Output = ButtonLike;
 
-    fn render(self, _cx: &mut WindowContext) -> Self::Rendered {
+    fn render(self, _cx: &mut WindowContext) -> Self::Output {
         let is_disabled = self.base.disabled;
         let is_selected = self.base.selected;
 

crates/ui2/src/components/button/button_icon.rs

@@ -63,9 +63,9 @@ impl Selectable for ButtonIcon {
 }
 
 impl RenderOnce for ButtonIcon {
-    type Rendered = IconElement;
+    type Output = IconElement;
 
-    fn render(self, _cx: &mut WindowContext) -> Self::Rendered {
+    fn render(self, _cx: &mut WindowContext) -> Self::Output {
         let icon = self
             .selected_icon
             .filter(|_| self.selected)

crates/ui2/src/components/button/button_like.rs

@@ -363,9 +363,9 @@ impl ParentElement for ButtonLike {
 }
 
 impl RenderOnce for ButtonLike {
-    type Rendered = Stateful<Div>;
+    type Output = Stateful<Div>;
 
-    fn render(self, cx: &mut WindowContext) -> Self::Rendered {
+    fn render(self, cx: &mut WindowContext) -> Self::Output {
         self.base
             .h_flex()
             .id(self.id.clone())

crates/ui2/src/components/button/icon_button.rs

@@ -106,9 +106,9 @@ impl VisibleOnHover for IconButton {
 }
 
 impl RenderOnce for IconButton {
-    type Rendered = ButtonLike;
+    type Output = ButtonLike;
 
-    fn render(self, _cx: &mut WindowContext) -> Self::Rendered {
+    fn render(self, _cx: &mut WindowContext) -> Self::Output {
         let is_disabled = self.base.disabled;
         let is_selected = self.base.selected;
 

crates/ui2/src/components/button/toggle_button.rs

@@ -99,9 +99,9 @@ impl ButtonCommon for ToggleButton {
 }
 
 impl RenderOnce for ToggleButton {
-    type Rendered = ButtonLike;
+    type Output = ButtonLike;
 
-    fn render(self, _cx: &mut WindowContext) -> Self::Rendered {
+    fn render(self, _cx: &mut WindowContext) -> Self::Output {
         let is_disabled = self.base.disabled;
         let is_selected = self.base.selected;
 

crates/ui2/src/components/checkbox.rs

@@ -19,9 +19,9 @@ pub struct Checkbox {
 }
 
 impl RenderOnce for Checkbox {
-    type Rendered = gpui::Stateful<Div>;
+    type Output = gpui::Stateful<Div>;
 
-    fn render(self, cx: &mut WindowContext) -> Self::Rendered {
+    fn render(self, cx: &mut WindowContext) -> Self::Output {
         let group_id = format!("checkbox_group_{:?}", self.id);
 
         let icon = match self.checked {

crates/ui2/src/components/context_menu.rs

@@ -232,9 +232,9 @@ impl ContextMenuItem {
 }
 
 impl Render for ContextMenu {
-    type Element = Div;
+    type Output = Div;
 
-    fn render(&mut self, cx: &mut ViewContext<Self>) -> Self::Element {
+    fn render(&mut self, cx: &mut ViewContext<Self>) -> Self::Output {
         div().elevation_2(cx).flex().flex_row().child(
             v_stack()
                 .min_w(px(200.))

crates/ui2/src/components/disclosure.rs

@@ -28,9 +28,9 @@ impl Disclosure {
 }
 
 impl RenderOnce for Disclosure {
-    type Rendered = IconButton;
+    type Output = IconButton;
 
-    fn render(self, _cx: &mut WindowContext) -> Self::Rendered {
+    fn render(self, _cx: &mut WindowContext) -> Self::Output {
         IconButton::new(
             self.id,
             match self.is_open {

crates/ui2/src/components/divider.rs

@@ -31,9 +31,9 @@ pub struct Divider {
 }
 
 impl RenderOnce for Divider {
-    type Rendered = Div;
+    type Output = Div;
 
-    fn render(self, cx: &mut WindowContext) -> Self::Rendered {
+    fn render(self, cx: &mut WindowContext) -> Self::Output {
         div()
             .map(|this| match self.direction {
                 DividerDirection::Horizontal => {

crates/ui2/src/components/icon.rs

@@ -196,9 +196,9 @@ pub struct IconElement {
 }
 
 impl RenderOnce for IconElement {
-    type Rendered = Svg;
+    type Output = Svg;
 
-    fn render(self, cx: &mut WindowContext) -> Self::Rendered {
+    fn render(self, cx: &mut WindowContext) -> Self::Output {
         svg()
             .size(self.size.rems())
             .flex_none()

crates/ui2/src/components/indicator.rs

@@ -45,9 +45,9 @@ impl Indicator {
 }
 
 impl RenderOnce for Indicator {
-    type Rendered = Div;
+    type Output = Div;
 
-    fn render(self, cx: &mut WindowContext) -> Self::Rendered {
+    fn render(self, cx: &mut WindowContext) -> Self::Output {
         div()
             .flex_none()
             .map(|this| match self.style {

crates/ui2/src/components/keybinding.rs

@@ -11,9 +11,9 @@ pub struct KeyBinding {
 }
 
 impl RenderOnce for KeyBinding {
-    type Rendered = Div;
+    type Output = Div;
 
-    fn render(self, cx: &mut WindowContext) -> Self::Rendered {
+    fn render(self, cx: &mut WindowContext) -> Self::Output {
         h_stack()
             .flex_none()
             .gap_2()
@@ -91,9 +91,9 @@ pub struct Key {
 }
 
 impl RenderOnce for Key {
-    type Rendered = Div;
+    type Output = Div;
 
-    fn render(self, cx: &mut WindowContext) -> Self::Rendered {
+    fn render(self, cx: &mut WindowContext) -> Self::Output {
         let single_char = self.key.len() == 1;
 
         div()
@@ -125,9 +125,9 @@ pub struct KeyIcon {
 }
 
 impl RenderOnce for KeyIcon {
-    type Rendered = Div;
+    type Output = Div;
 
-    fn render(self, _cx: &mut WindowContext) -> Self::Rendered {
+    fn render(self, _cx: &mut WindowContext) -> Self::Output {
         div()
             .w(rems(14. / 16.))
             .child(IconElement::new(self.icon).size(IconSize::Small))

crates/ui2/src/components/label/highlighted_label.rs

@@ -46,9 +46,9 @@ impl LabelCommon for HighlightedLabel {
 }
 
 impl RenderOnce for HighlightedLabel {
-    type Rendered = LabelLike;
+    type Output = LabelLike;
 
-    fn render(self, cx: &mut WindowContext) -> Self::Rendered {
+    fn render(self, cx: &mut WindowContext) -> Self::Output {
         let highlight_color = cx.theme().colors().text_accent;
 
         let mut highlight_indices = self.highlight_indices.iter().copied().peekable();

crates/ui2/src/components/label/label.rs

@@ -40,9 +40,9 @@ impl LabelCommon for Label {
 }
 
 impl RenderOnce for Label {
-    type Rendered = LabelLike;
+    type Output = LabelLike;
 
-    fn render(self, _cx: &mut WindowContext) -> Self::Rendered {
+    fn render(self, _cx: &mut WindowContext) -> Self::Output {
         self.base.child(self.label)
     }
 }

crates/ui2/src/components/label/label_like.rs

@@ -76,9 +76,9 @@ impl ParentElement for LabelLike {
 }
 
 impl RenderOnce for LabelLike {
-    type Rendered = Div;
+    type Output = Div;
 
-    fn render(self, cx: &mut WindowContext) -> Self::Rendered {
+    fn render(self, cx: &mut WindowContext) -> Self::Output {
         div()
             .when(self.strikethrough, |this| {
                 this.relative().child(

crates/ui2/src/components/list/list.rs

@@ -46,9 +46,9 @@ impl ParentElement for List {
 }
 
 impl RenderOnce for List {
-    type Rendered = Div;
+    type Output = Div;
 
-    fn render(self, _cx: &mut WindowContext) -> Self::Rendered {
+    fn render(self, _cx: &mut WindowContext) -> Self::Output {
         v_stack().w_full().py_1().children(self.header).map(|this| {
             match (self.children.is_empty(), self.toggle) {
                 (false, _) => this.children(self.children),

crates/ui2/src/components/list/list_header.rs

@@ -76,9 +76,9 @@ impl Selectable for ListHeader {
 }
 
 impl RenderOnce for ListHeader {
-    type Rendered = Stateful<Div>;
+    type Output = Stateful<Div>;
 
-    fn render(self, cx: &mut WindowContext) -> Self::Rendered {
+    fn render(self, cx: &mut WindowContext) -> Self::Output {
         h_stack()
             .id(self.label.clone())
             .w_full()

crates/ui2/src/components/list/list_item.rs

@@ -147,9 +147,9 @@ impl ParentElement for ListItem {
 }
 
 impl RenderOnce for ListItem {
-    type Rendered = Stateful<Div>;
+    type Output = Stateful<Div>;
 
-    fn render(self, cx: &mut WindowContext) -> Self::Rendered {
+    fn render(self, cx: &mut WindowContext) -> Self::Output {
         h_stack()
             .id(self.id)
             .w_full()

crates/ui2/src/components/list/list_separator.rs

@@ -6,9 +6,9 @@ use crate::prelude::*;
 pub struct ListSeparator;
 
 impl RenderOnce for ListSeparator {
-    type Rendered = Div;
+    type Output = Div;
 
-    fn render(self, cx: &mut WindowContext) -> Self::Rendered {
+    fn render(self, cx: &mut WindowContext) -> Self::Output {
         div()
             .h_px()
             .w_full()

crates/ui2/src/components/list/list_sub_header.rs

@@ -26,9 +26,9 @@ impl ListSubHeader {
 }
 
 impl RenderOnce for ListSubHeader {
-    type Rendered = Div;
+    type Output = Div;
 
-    fn render(self, _cx: &mut WindowContext) -> Self::Rendered {
+    fn render(self, _cx: &mut WindowContext) -> Self::Output {
         h_stack().flex_1().w_full().relative().py_1().child(
             div()
                 .h_6()

crates/ui2/src/components/popover.rs

@@ -41,9 +41,9 @@ pub struct Popover {
 }
 
 impl RenderOnce for Popover {
-    type Rendered = Div;
+    type Output = Div;
 
-    fn render(self, cx: &mut WindowContext) -> Self::Rendered {
+    fn render(self, cx: &mut WindowContext) -> Self::Output {
         div()
             .flex()
             .gap_1()

crates/ui2/src/components/popover_menu.rs

@@ -130,7 +130,7 @@ pub struct PopoverMenuState<M> {
 impl<M: ManagedView> Element for PopoverMenu<M> {
     type State = PopoverMenuState<M>;
 
-    fn layout(
+    fn request_layout(
         &mut self,
         element_state: Option<Self::State>,
         cx: &mut WindowContext,

crates/ui2/src/components/right_click_menu.rs

@@ -60,7 +60,7 @@ pub struct MenuHandleState<M> {
 impl<M: ManagedView> Element for RightClickMenu<M> {
     type State = MenuHandleState<M>;
 
-    fn layout(
+    fn request_layout(
         &mut self,
         element_state: Option<Self::State>,
         cx: &mut WindowContext,

crates/ui2/src/components/stories/avatar.rs

@@ -7,9 +7,9 @@ use crate::Avatar;
 pub struct AvatarStory;
 
 impl Render for AvatarStory {
-    type Element = Div;
+    type Output = Div;
 
-    fn render(&mut self, _cx: &mut ViewContext<Self>) -> Self::Element {
+    fn render(&mut self, _cx: &mut ViewContext<Self>) -> Self::Output {
         Story::container()
             .child(Story::title_for::<Avatar>())
             .child(Story::label("Default"))

crates/ui2/src/components/stories/button.rs

@@ -7,9 +7,9 @@ use crate::{Button, ButtonStyle};
 pub struct ButtonStory;
 
 impl Render for ButtonStory {
-    type Element = Div;
+    type Output = Div;
 
-    fn render(&mut self, _cx: &mut ViewContext<Self>) -> Self::Element {
+    fn render(&mut self, _cx: &mut ViewContext<Self>) -> Self::Output {
         Story::container()
             .child(Story::title_for::<Button>())
             .child(Story::label("Default"))

crates/ui2/src/components/stories/checkbox.rs

@@ -7,9 +7,9 @@ use crate::{h_stack, Checkbox};
 pub struct CheckboxStory;
 
 impl Render for CheckboxStory {
-    type Element = Div;
+    type Output = Div;
 
-    fn render(&mut self, cx: &mut ViewContext<Self>) -> Self::Element {
+    fn render(&mut self, cx: &mut ViewContext<Self>) -> Self::Output {
         Story::container()
             .child(Story::title_for::<Checkbox>())
             .child(Story::label("Default"))

crates/ui2/src/components/stories/context_menu.rs

@@ -20,9 +20,9 @@ fn build_menu(cx: &mut WindowContext, header: impl Into<SharedString>) -> View<C
 pub struct ContextMenuStory;
 
 impl Render for ContextMenuStory {
-    type Element = Div;
+    type Output = Div;
 
-    fn render(&mut self, _cx: &mut ViewContext<Self>) -> Self::Element {
+    fn render(&mut self, _cx: &mut ViewContext<Self>) -> Self::Output {
         Story::container()
             .on_action(|_: &PrintCurrentDate, _| {
                 println!("printing unix time!");

crates/ui2/src/components/stories/disclosure.rs

@@ -7,9 +7,9 @@ use crate::Disclosure;
 pub struct DisclosureStory;
 
 impl Render for DisclosureStory {
-    type Element = Div;
+    type Output = Div;
 
-    fn render(&mut self, _cx: &mut ViewContext<Self>) -> Self::Element {
+    fn render(&mut self, _cx: &mut ViewContext<Self>) -> Self::Output {
         Story::container()
             .child(Story::title_for::<Disclosure>())
             .child(Story::label("Toggled"))

crates/ui2/src/components/stories/icon.rs

@@ -8,9 +8,9 @@ use crate::{Icon, IconElement};
 pub struct IconStory;
 
 impl Render for IconStory {
-    type Element = Div;
+    type Output = Div;
 
-    fn render(&mut self, _cx: &mut ViewContext<Self>) -> Self::Element {
+    fn render(&mut self, _cx: &mut ViewContext<Self>) -> Self::Output {
         let icons = Icon::iter();
 
         Story::container()

crates/ui2/src/components/stories/icon_button.rs

@@ -7,9 +7,9 @@ use crate::{Icon, IconButton};
 pub struct IconButtonStory;
 
 impl Render for IconButtonStory {
-    type Element = Component<StoryContainer>;
+    type Output = Component<StoryContainer>;
 
-    fn render(&mut self, _cx: &mut ViewContext<Self>) -> Self::Element {
+    fn render(&mut self, _cx: &mut ViewContext<Self>) -> Self::Output {
         let default_button = StoryItem::new(
             "Default",
             IconButton::new("default_icon_button", Icon::Hash),