Panels

Panel is a stateless builder — Card chrome plus header/footer framing and a controlled collapse. SplitPanel is a stateful entity: two live panes with a draggable divider, emitting Resized events.

#Panel

A titled surface: Card chrome plus a header row (collapse chevron, icon, title/description on the left, actions on the right), the body, and an optional footer. The header gets a bottom divider whenever the body is visible. Collapsing is controlled, like Modal — the parent owns the flag and flips it in on_toggle. Implements ParentElement for the body.

Panel::new()
    .id("status")
    .title("Project status")
    .description("Weekly summary")
    .icon(ThemeIcon::new("▦").color(ColorName::Blue))
    .action(ActionIcon::new("status-more", "…").size(Size::Sm))
    .collapsible()
    .collapsed(self.collapsed)
    .on_toggle(cx.listener(|this, _ev, _window, cx| {
        this.collapsed = !this.collapsed;
        cx.notify();
    }))
    .footer(Text::new("Updated 5 minutes ago").size(Size::Xs).dimmed())
    .child(Text::new("Everything on track."))

#SplitPanel (entity)

Two live panes separated by a draggable divider. Pane content is a builder closure re-invoked every render (like Tabs panels), so panes show live data — including another SplitPanel's element for nested layouts. Give the element a sized parent; the panel fills it. Dragging clamps to min_first/min_second and emits SplitPanelEvent::Resized(ratio).

let split = cx.new(|cx| {
    SplitPanel::new(cx)
        .direction(SplitDirection::Horizontal)
        .ratio(0.35)
        .min_first(140.0)
        .min_second(200.0)
        .first(|_w, _cx| Text::new("Sidebar"))
        .second(|_w, _cx| Text::new("Main content"))
});
cx.subscribe(&split, |_this, _split, event: &SplitPanelEvent, cx| {
    let SplitPanelEvent::Resized(_ratio) = event; // persist it, relayout, …
    cx.notify();
})
.detach();

// In render:
div().h(px(300.0)).w_full().child(self.split.clone())

Events: SplitPanelEvent::Resized(f32) — emitted continuously while dragging.

#PaneGroup (entity)

A recursive tree of tabbed panes — the Zed / VS Code editor-group workspace model, where splits contain tabs (not tabs containing splits). The window is one tree of splits whose leaves are panes, and each pane has its own tab bar. Users drag a tab to reorder it, drop it on another pane's center to move it there, drop it on a pane edge to split, and resize with the dividers.

PaneGroup owns the layout; the host owns the items (their real content entities) and supplies, per item, a content element and a title via builder closures (re-invoked each render, so content stays live). The host reacts to PaneGroupEvents and drives the layout through the model methods. Items are opaque ItemIds — the unit that moves between panes; the host maps them to whatever it owns (editors, terminals, views).

let group = cx.new(|cx| {
    PaneGroup::new(first_item_id, cx)
        .on_item_title(|item, cx| my_title(item, cx))         // -> SharedString
        .on_render_item(|item, window, cx| my_view(item, window, cx)) // -> AnyElement
});
cx.subscribe(&group, |this, group, event: &PaneGroupEvent, cx| match event {
    PaneGroupEvent::NewRequested(pane) => {
        let item = this.create_item(cx);                       // host makes the item
        group.update(cx, |g, cx| g.add_item(*pane, item, cx));
    }
    PaneGroupEvent::CloseRequested(item) => {
        this.drop_item(*item);                                 // host tears it down
        group.update(cx, |g, cx| g.close_item(*item, cx));
    }
    PaneGroupEvent::Activated(_) | PaneGroupEvent::FocusChanged(_) => cx.notify(),
})
.detach();

// In render: give it a sized parent; it fills it.
div().size_full().child(self.group.clone())

Events: PaneGroupEvent::{Activated(ItemId), CloseRequested(ItemId), NewRequested(PaneId), FocusChanged(PaneId), TearOff(ItemId)}. Window creation for a torn-off tab stays a host concern — subscribe to TearOff and open a window with the item's content. The host wires the tear-off gesture (a tab dragged outside the window, or a menu item) and calls tear_off.

Titlebar integration. .titlebar(leading, trailing) makes the group double as the window titlebar (Zed-style — the top pane's tab bar is the top row, no separate strip). The top-left pane's tab bar reserves leading px on the left (for the macOS traffic lights), the top-right pane's reserves trailing px on the right (for custom controls), and the filler after the top-right tabs becomes a window-drag region (double-click zooms). Render the group flush to the window top and overlay your own controls in the reserved insets.

Nesting works out of the box: gpui delivers on_drag_move for every active drag of a payload type anywhere in the window, so each divider's drag payload carries its owning entity id and an inner divider never resizes the outer panel. Nest by returning the inner entity's clone from a pane closure:

let inner = cx.new(|cx| {
    SplitPanel::new(cx)
        .direction(SplitDirection::Vertical)
        .first(|_w, _cx| Text::new("Editor"))
        .second(|_w, _cx| Text::new("Terminal"))
});
let outer = cx.new(|cx| {
    SplitPanel::new(cx)
        .first(|_w, _cx| Text::new("Sidebar"))
        .second(move |_w, _cx| inner.clone())
});