add dock layout component

crates/core/src/button.rs

@@ -40,6 +40,7 @@ pub struct Button {
     variant: ButtonVariant,
     size: Size,
     disabled: bool,
+    tab_stop: bool,
     a11y_label: Option<SharedString>,
     tooltip: Option<TooltipBuilder>,
     on_click: Option<ClickHandler>,
@@ -58,6 +59,7 @@ impl Button {
             variant: ButtonVariant::default(),
             size: Size::default(),
             disabled: false,
+            tab_stop: true,
             a11y_label: None,
             tooltip: None,
             on_click: None,
@@ -88,13 +90,19 @@ impl Button {
         self
     }
 
-    /// Sets the visual treatment.
+    /// Sets the button's visual language.
     pub fn variant(mut self, variant: ButtonVariant) -> Self {
         self.variant = variant;
         self
     }
 
-    /// Renders the button inert, unfocusable, and dimmed; disabled always wins.
+    /// Whether the button is a keyboard tab stop, dense toolbars turn it off.
+    pub fn tab_stop(mut self, tab_stop: bool) -> Self {
+        self.tab_stop = tab_stop;
+        self
+    }
+
+    /// Renders the button inert, unfocusable, and dimmed.
     pub fn disabled(mut self, disabled: bool) -> Self {
         self.disabled = disabled;
         self
@@ -193,7 +201,7 @@ impl RenderOnce for Button {
                 button
                     .cursor_pointer()
                     .focusable()
-                    .tab_stop(true)
+                    .tab_stop(self.tab_stop)
                     .hover(move |style| style.bg(hover))
                     .active(move |style| style.bg(pressed))
                     .focus_visible(|style| style.shadow(focus_ring(colors.ring)))

crates/data/Cargo.toml

@@ -6,6 +6,7 @@ description = "Data-heavy GPUI components: lists, trees, tabs, sidebars — one
 
 [dependencies]
 gpui = { workspace = true }
+gpui-native-core = { workspace = true, optional = true }
 gpui-native-icons = { workspace = true }
 gpui-native-theme = { workspace = true }
 gpui-native-utils = { workspace = true }
@@ -18,5 +19,5 @@ default = ["full"]
 full = ["list", "sidebar", "tabs", "tree"]
 list = []
 sidebar = []
-tabs = []
+tabs = ["dep:gpui-native-core", "gpui-native-core/button"]
 tree = []

crates/data/src/tabs.rs

@@ -2,23 +2,41 @@ use std::rc::Rc;
 
 use gpui::prelude::FluentBuilder as _;
 use gpui::{
-    AnyElement, App, ElementId, InteractiveElement as _, IntoElement, KeyDownEvent,
-    ParentElement as _, RenderOnce, Role, SharedString, StatefulInteractiveElement as _,
+    AnyElement, App, Div, ElementId, InteractiveElement as _, IntoElement, KeyDownEvent,
+    ParentElement as _, RenderOnce, Role, SharedString, Stateful, StatefulInteractiveElement as _,
     Styled as _, Window, div,
 };
+use gpui_native_core::button::{Button, ButtonVariant};
+use gpui_native_core::common::Sizable as _;
 use gpui_native_icons::{IconRole, icon};
-use gpui_native_theme::ActiveTheme as _;
+use gpui_native_theme::{ActiveTheme as _, Size};
 use gpui_native_utils::adjacent_selectable;
 
 /// The change reporter, fired with the next selected tab by pointer and keys.
 type ChangeHandler = Rc<dyn Fn(usize, &mut Window, &mut App)>;
+/// The close reporter, fired with the tab's index by its close control.
+type CloseHandler = Rc<dyn Fn(usize, &mut Window, &mut App)>;
+/// Decorates the rendered tab, e.g. to attach a drag payload.
+type TabWrap = Box<dyn FnOnce(Stateful<Div>) -> AnyElement>;
 type TabsFn = Box<dyn Fn(&mut Window, &mut App) -> Vec<Tab>>;
 
+/// The visual language of a [`Tabs`] strip.
+#[derive(Clone, Copy, Debug, Default, PartialEq, Eq)]
+pub enum TabsVariant {
+    #[default]
+    Underline,
+    Pill,
+}
+
 /// One tab of a [`Tabs`] strip.
 pub struct Tab {
     label: SharedString,
     icon: Option<IconRole>,
+    lead: Option<AnyElement>,
+    busy: bool,
     disabled: bool,
+    closeable: bool,
+    wrap: Option<TabWrap>,
 }
 
 impl Tab {
@@ -30,7 +48,11 @@ impl Tab {
         Self {
             label: label.into(),
             icon: None,
+            lead: None,
+            busy: false,
             disabled: false,
+            closeable: false,
+            wrap: None,
         }
     }
 
@@ -40,11 +62,41 @@ impl Tab {
         self
     }
 
+    /// Sets the leading element.
+    pub fn lead<E>(mut self, lead: E) -> Self
+    where
+        E: IntoElement + 'static,
+    {
+        self.lead = Some(lead.into_any_element());
+        self
+    }
+
+    /// Shows the loading slot.
+    pub fn busy(mut self, busy: bool) -> Self {
+        self.busy = busy;
+        self
+    }
+
     /// Renders the tab dimmed; clicks and keyboard skip it.
     pub fn disabled(mut self, disabled: bool) -> Self {
         self.disabled = disabled;
         self
     }
+
+    /// Shows a close control that reports the tab through [`Tabs::on_close`].
+    pub fn closeable(mut self, closeable: bool) -> Self {
+        self.closeable = closeable;
+        self
+    }
+
+    /// Hands the rendered tab through `wrap`, e.g. to attach a drag payload.
+    pub fn wrap<F>(mut self, wrap: F) -> Self
+    where
+        F: FnOnce(Stateful<Div>) -> AnyElement + 'static,
+    {
+        self.wrap = Some(Box::new(wrap));
+        self
+    }
 }
 
 /// A tab strip.
@@ -52,8 +104,10 @@ impl Tab {
 pub struct Tabs {
     id: ElementId,
     selected: usize,
+    variant: TabsVariant,
     a11y_label: Option<SharedString>,
     on_change: Option<ChangeHandler>,
+    on_close: Option<CloseHandler>,
     tabs: Option<TabsFn>,
 }
 
@@ -66,8 +120,10 @@ impl Tabs {
         Self {
             id: id.into(),
             selected: 0,
+            variant: TabsVariant::default(),
             a11y_label: None,
             on_change: None,
+            on_close: None,
             tabs: None,
         }
     }
@@ -78,6 +134,12 @@ impl Tabs {
         self
     }
 
+    /// Sets the strip's visual language.
+    pub fn variant(mut self, variant: TabsVariant) -> Self {
+        self.variant = variant;
+        self
+    }
+
     /// Reports the next selected tab, from clicks and keys alike.
     pub fn on_change<F>(mut self, handler: F) -> Self
     where
@@ -87,6 +149,15 @@ impl Tabs {
         self
     }
 
+    /// Reports a closed tab by index.
+    pub fn on_close<F>(mut self, handler: F) -> Self
+    where
+        F: Fn(usize, &mut Window, &mut App) + 'static,
+    {
+        self.on_close = Some(Rc::new(handler));
+        self
+    }
+
     /// Sets the tabs, built fresh each render.
     pub fn tabs<F>(mut self, tabs: F) -> Self
     where
@@ -129,27 +200,27 @@ impl RenderOnce for Tabs {
             .unwrap_or_else(|| SharedString::from(self.id.to_string()));
 
         let strip: Vec<AnyElement> = tabs
-            .iter()
+            .into_iter()
             .enumerate()
             .map(|(index, tab)| {
                 render_tab(
+                    &self.id,
                     cx,
                     tab,
                     index,
                     self.selected == index,
                     self.selected,
+                    self.variant,
                     &self.on_change,
+                    &self.on_close,
                     &focus,
                 )
             })
             .collect();
 
-        div()
-            .id(self.id)
+        let mut strip_root = div()
+            .id(self.id.clone())
             .flex()
-            .gap_1()
-            .border_b_1()
-            .border_color(theme.colors.border)
             .text_size(theme.sizes.medium.text_size)
             .track_focus(&focus)
             .focusable()
@@ -175,62 +246,121 @@ impl RenderOnce for Tabs {
                     }
                     cx.stop_propagation();
                 }
-            })
-            .children(strip)
+            });
+
+        strip_root = match self.variant {
+            TabsVariant::Underline => strip_root
+                .gap_1()
+                .border_b_1()
+                .border_color(theme.colors.border),
+            TabsVariant::Pill => strip_root.items_center().gap_1(),
+        };
+
+        strip_root.children(strip)
     }
 }
 
+#[allow(clippy::too_many_arguments)]
 fn render_tab(
+    tabs_id: &ElementId,
     cx: &App,
-    tab: &Tab,
+    tab: Tab,
     index: usize,
     selected: bool,
     selected_index: usize,
+    variant: TabsVariant,
     on_change: &Option<ChangeHandler>,
+    on_close: &Option<CloseHandler>,
     focus: &gpui::FocusHandle,
 ) -> AnyElement {
+    let mut tab = tab;
+
     let theme = cx.theme();
-    let label_color = if tab.disabled {
-        theme.colors.muted_foreground
-    } else if selected {
-        theme.ramps.primary.base
-    } else {
-        theme.colors.foreground
+    let metrics = theme.sizes.resolve(Size::default());
+
+    let label_color = match variant {
+        TabsVariant::Underline => {
+            if tab.disabled {
+                theme.colors.muted_foreground
+            } else if selected {
+                theme.ramps.primary.base
+            } else {
+                theme.colors.foreground
+            }
+        }
+        TabsVariant::Pill => {
+            if tab.disabled {
+                theme.colors.muted_foreground
+            } else {
+                theme.colors.foreground
+            }
+        }
     };
 
     let mut strip_tab = div()
         .id(("tab", index))
+        .debug_selector({
+            let id = format!("{tabs_id}-tab-{}", tab.label);
+            move || id
+        })
         .flex()
         .items_center()
         .gap_1p5()
-        .px_2()
-        .py_1()
-        .rounded_tl(theme.radius.sm)
-        .rounded_tr(theme.radius.sm)
         .role(Role::Tab)
         .aria_selected(selected)
         .text_color(label_color)
-        .when(selected, |strip_tab| {
-            strip_tab
-                .border_b_2()
-                .border_color(theme.ramps.primary.base)
-        })
         .when(!tab.disabled && !selected, |strip_tab| {
             strip_tab.hover(|strip_tab| strip_tab.bg(theme.colors.muted))
-        })
-        .child(
+        });
+
+    strip_tab = match variant {
+        TabsVariant::Underline => strip_tab
+            .px_2()
+            .py_1()
+            .rounded_tl(theme.radius.sm)
+            .rounded_tr(theme.radius.sm)
+            .when(selected, |strip_tab| {
+                strip_tab
+                    .border_b_2()
+                    .border_color(theme.ramps.primary.base)
+            }),
+        TabsVariant::Pill => strip_tab
+            .h(metrics.control_height)
+            .px(metrics.padding_x)
+            .rounded(theme.radius.control)
+            .when(selected, |strip_tab| {
+                strip_tab
+                    .bg(theme.colors.muted)
+                    .font_weight(gpui::FontWeight::MEDIUM)
+            }),
+    };
+
+    let lead = tab.lead.take();
+    strip_tab = match lead {
+        Some(lead) => strip_tab.child(lead),
+        None => strip_tab.child(
             div()
                 .flex_none()
-                .pb_0p5()
-                .when_some(tab.icon, |strip_tab, role| {
-                    strip_tab.child(
-                        icon(role)
-                            .size(theme.sizes.medium.dense_icon_size)
-                            .color(label_color),
-                    )
+                .when(variant == TabsVariant::Underline, |slot| slot.pb_0p5())
+                .when_some(tab.icon, |slot, role| {
+                    slot.child(icon(role).size(metrics.dense_icon_size).color(label_color))
                 }),
-        )
-        .child(strip_tab_label(tab.label.clone(), selected, cx));
+        ),
+    };
+
+    strip_tab = strip_tab.child(strip_tab_label(&tab, selected, variant, cx));
+
+    if variant == TabsVariant::Pill {
+        strip_tab = strip_tab.child(div().flex_none().w(metrics.padding_x * 1.5));
+    }
+
+    if tab.busy && !tab.disabled {
+        strip_tab = strip_tab.child(busy_slot(cx));
+    }
+
+    if tab.closeable && on_close.is_some() && !tab.disabled {
+        strip_tab = strip_tab.child(render_tab_close(tabs_id, &tab, index, on_close));
+    }
 
     if !tab.disabled {
         strip_tab = strip_tab.cursor_pointer().on_click({
@@ -247,17 +377,77 @@ fn render_tab(
         });
     }
 
-    strip_tab.into_any_element()
+    match tab.wrap {
+        Some(wrap) => wrap(strip_tab),
+        None => strip_tab.into_any_element(),
+    }
 }
 
-fn strip_tab_label(label: SharedString, selected: bool, cx: &App) -> AnyElement {
-    let theme = cx.theme();
+fn render_tab_close(
+    tabs_id: &ElementId,
+    tab: &Tab,
+    index: usize,
+    on_close: &Option<CloseHandler>,
+) -> AnyElement {
+    // The wrapper carries the test selector; the button paints itself.
     div()
-        .text_color(if selected {
-            theme.ramps.primary.base
-        } else {
-            theme.colors.foreground
+        .id(("tab-close", index))
+        .debug_selector({
+            let id = format!("{tabs_id}-close-{}", tab.label);
+            move || id
         })
-        .child(label)
+        .flex_none()
+        .child(
+            Button::new(("tab-close-button", index))
+                .icon(IconRole::Close)
+                .variant(ButtonVariant::Ghost)
+                .small()
+                .tab_stop(false)
+                .accessibility_label(SharedString::from(format!("Close {}", tab.label)))
+                .on_click({
+                    let on_close = on_close.clone();
+                    move |_, window, cx| {
+                        cx.stop_propagation();
+                        if let Some(on_close) = &on_close {
+                            on_close(index, window, cx);
+                        }
+                    }
+                }),
+        )
+        .into_any_element()
+}
+
+fn strip_tab_label(tab: &Tab, selected: bool, variant: TabsVariant, cx: &App) -> AnyElement {
+    let theme = cx.theme();
+    let color = match variant {
+        TabsVariant::Underline => {
+            if selected {
+                theme.ramps.primary.base
+            } else {
+                theme.colors.foreground
+            }
+        }
+        TabsVariant::Pill => {
+            if tab.disabled {
+                theme.colors.muted_foreground
+            } else {
+                theme.colors.foreground
+            }
+        }
+    };
+    div()
+        .text_color(color)
+        .child(tab.label.clone())
+        .into_any_element()
+}
+
+fn busy_slot(cx: &App) -> AnyElement {
+    let theme = cx.theme();
+    div()
+        .flex_none()
+        .size(theme.sizes.medium.dense_icon_size)
+        .rounded(theme.radius.full)
+        .border_1()
+        .border_color(theme.colors.border)
         .into_any_element()
 }

crates/layout/Cargo.toml

@@ -17,7 +17,15 @@ gpui = { workspace = true, features = ["test-support"] }
 
 [features]
 default = ["full"]
-full = ["resize_handle", "shell"]
+full = ["dock", "resize_handle", "shell"]
+dock = [
+    "resize_handle",
+    "dep:gpui-native-core",
+    "dep:gpui-native-data",
+    "dep:gpui-native-icons",
+    "gpui-native-core/context_menu",
+    "gpui-native-data/tabs",
+]
 resize_handle = []
 shell = [
     "resize_handle",

crates/layout/src/lib.rs

@@ -1,5 +1,8 @@
 //! Application layout: sidebars and a center dock bootstrapped for the app (plan §6.4).
 
+#[cfg(feature = "dock")]
+pub mod dock;
+
 #[cfg(feature = "resize_handle")]
 pub mod resize_handle;
 

crates/layout/tests/dock.rs

@@ -0,0 +1,422 @@
+use gpui::{
+    AppContext as _, Context, Entity, InteractiveElement as _, IntoElement, Modifiers, MouseButton,
+    MouseDownEvent, MouseMoveEvent, MouseUpEvent, ParentElement as _, Pixels, Render, Styled as _,
+    TestAppContext, VisualTestContext, Window, div, point, px,
+};
+use gpui_native_layout::dock::{Dock, DockState, PanelDescriptor, SplitDirection};
+use gpui_native_theme::Theme;
+
+struct Panel {
+    tag: &'static str,
+}
+
+impl Render for Panel {
+    fn render(&mut self, _window: &mut Window, _cx: &mut Context<Self>) -> impl IntoElement {
+        div()
+            .size_full()
+            .debug_selector(move || format!("panel-{}", self.tag))
+    }
+}
+
+fn descriptor(tag: &'static str) -> PanelDescriptor {
+    PanelDescriptor::new(tag, tag, move |_, cx| cx.new(|_| Panel { tag }).into())
+}
+
+struct Harness {
+    dock: Entity<DockState>,
+}
+
+impl Render for Harness {
+    fn render(
+        &mut self,
+        _window: &mut Window,
+        _cx: &mut gpui::Context<Self>,
+    ) -> impl gpui::IntoElement {
+        div()
+            .size_full()
+            .child(Dock::new("test-dock", self.dock.clone()))
+    }
+}
+
+fn dock_window(cx: &mut TestAppContext) -> (Entity<DockState>, VisualTestContext) {
+    cx.update(Theme::init);
+    let dock = cx.update(DockState::new);
+    let dock_for_window = dock.clone();
+    let window = cx.add_window(move |_, _| Harness {
+        dock: dock_for_window,
+    });
+    let mut visual = VisualTestContext::from_window(window.into(), cx);
+    redraw(&mut visual);
+    (dock, visual)
+}
+
+fn redraw(visual: &mut VisualTestContext) {
+    visual.update(|window, cx| {
+        window.draw(cx).clear(cx);
+    });
+}
+
+fn bounds(visual: &mut VisualTestContext, selector: &str) -> Option<gpui::Bounds<Pixels>> {
+    visual.debug_bounds(Box::leak(selector.to_string().into_boxed_str()))
+}
+
+fn center_of(bounds: gpui::Bounds<Pixels>) -> gpui::Point<Pixels> {
+    point(bounds.center().x, bounds.center().y)
+}
+
+fn press(visual: &mut VisualTestContext, at: gpui::Point<Pixels>, click_count: usize) {
+    visual.simulate_event(MouseDownEvent {
+        position: at,
+        click_count,
+        modifiers: Modifiers::default(),
+        button: MouseButton::Left,
+        first_mouse: false,
+    });
+    visual.simulate_event(MouseUpEvent {
+        position: at,
+        click_count,
+        modifiers: Modifiers::default(),
+        button: MouseButton::Left,
+    });
+}
+
+fn drag(visual: &mut VisualTestContext, from: gpui::Point<Pixels>, to: gpui::Point<Pixels>) {
+    visual.simulate_mouse_down(from, MouseButton::Left, Modifiers::default());
+    visual.simulate_event(MouseMoveEvent {
+        position: to,
+        pressed_button: Some(MouseButton::Left),
+        modifiers: Modifiers::default(),
+    });
+    visual.simulate_mouse_up(to, MouseButton::Left, Modifiers::default());
+}
+
+fn register(dock: &Entity<DockState>, tags: &[&'static str], cx: &mut TestAppContext) {
+    cx.update(|cx| {
+        dock.update(cx, |dock, cx| {
+            for tag in tags {
+                dock.register_panel(descriptor(tag), cx);
+            }
+        });
+    });
+}
+
+fn open(visual: &mut VisualTestContext, dock: &Entity<DockState>, tag: &'static str) {
+    visual.update(|window, cx| {
+        dock.update(cx, |dock, cx| dock.open_panel(tag, window, cx));
+    });
+    redraw(visual);
+}
+
+#[test]
+fn opening_a_panel_adds_its_tab_and_activates_it() {
+    let mut cx = TestAppContext::single();
+    let (dock, mut visual) = dock_window(&mut cx);
+    register(&dock, &["inbox", "explore"], &mut cx);
+
+    open(&mut visual, &dock, "inbox");
+    assert!(
+        bounds(&mut visual, "panel-inbox").is_some(),
+        "opened panel missing"
+    );
+    assert!(
+        bounds(&mut visual, "test-dock-pane-0-tabs-tab-inbox").is_some(),
+        "tab missing"
+    );
+
+    open(&mut visual, &dock, "explore");
+    assert!(bounds(&mut visual, "panel-explore").is_some());
+    assert!(
+        bounds(&mut visual, "panel-inbox").is_none(),
+        "the inactive view must not render"
+    );
+    assert!(
+        bounds(&mut visual, "test-dock-pane-0-tabs-tab-inbox").is_some(),
+        "the strip keeps both tabs"
+    );
+
+    assert!(dock.read_with(&cx, |dock, _| dock.is_open("inbox")));
+    assert!(dock.read_with(&cx, |dock, _| dock.is_open("explore")));
+}
+
+#[test]
+fn clicking_a_tab_activates_its_panel() {
+    let mut cx = TestAppContext::single();
+    let (dock, mut visual) = dock_window(&mut cx);
+    register(&dock, &["inbox", "explore"], &mut cx);
+    open(&mut visual, &dock, "inbox");
+    open(&mut visual, &dock, "explore");
+
+    let tab = bounds(&mut visual, "test-dock-pane-0-tabs-tab-inbox").expect("inbox tab missing");
+    press(&mut visual, center_of(tab), 1);
+    redraw(&mut visual);
+
+    assert!(bounds(&mut visual, "panel-inbox").is_some());
+    assert!(bounds(&mut visual, "panel-explore").is_none());
+}
+
+#[test]
+fn the_tab_close_control_closes_its_panel() {
+    let mut cx = TestAppContext::single();
+    let (dock, mut visual) = dock_window(&mut cx);
+    register(&dock, &["inbox", "explore"], &mut cx);
+    open(&mut visual, &dock, "inbox");
+    open(&mut visual, &dock, "explore");
+
+    let close = bounds(&mut visual, "test-dock-pane-0-tabs-close-inbox").expect("close missing");
+    press(&mut visual, center_of(close), 1);
+    redraw(&mut visual);
+
+    assert!(bounds(&mut visual, "test-dock-pane-0-tabs-tab-inbox").is_none());
+    assert!(bounds(&mut visual, "panel-explore").is_some());
+}
+
+#[test]
+fn closing_the_active_tab_activates_the_neighbor() {
+    let mut cx = TestAppContext::single();
+    let (dock, mut visual) = dock_window(&mut cx);
+    register(&dock, &["inbox", "explore"], &mut cx);
+    open(&mut visual, &dock, "inbox");
+    open(&mut visual, &dock, "explore");
+
+    cx.update(|cx| {
+        dock.update(cx, |dock, cx| dock.close_panel("explore", cx));
+    });
+    redraw(&mut visual);
+
+    assert!(
+        bounds(&mut visual, "panel-inbox").is_some(),
+        "the neighbor tab should activate"
+    );
+    assert!(bounds(&mut visual, "test-dock-pane-0-tabs-tab-explore").is_none());
+    assert!(bounds(&mut visual, "test-dock-pane-0-tabs-tab-inbox").is_some());
+}
+
+#[test]
+fn splitting_moves_the_tab_and_closing_collapses() {
+    let mut cx = TestAppContext::single();
+    let (dock, mut visual) = dock_window(&mut cx);
+    register(&dock, &["inbox", "explore"], &mut cx);
+    open(&mut visual, &dock, "inbox");
+    open(&mut visual, &dock, "explore");
+
+    cx.update(|cx| {
+        dock.update(cx, |dock, cx| {
+            dock.split_panel("explore", SplitDirection::Right, cx)
+        });
+    });
+    redraw(&mut visual);
+
+    assert!(
+        bounds(&mut visual, "resize-handle").is_some(),
+        "the split renders a seam"
+    );
+    assert!(bounds(&mut visual, "test-dock-pane-0").is_some());
+    assert!(bounds(&mut visual, "test-dock-pane-1").is_some());
+    assert!(
+        bounds(&mut visual, "panel-explore").is_some(),
+        "the moved tab activates in its new pane"
+    );
+
+    // Closing the new pane's only tab collapses its split.
+    cx.update(|cx| {
+        dock.update(cx, |dock, cx| dock.close_panel("explore", cx));
+    });
+    redraw(&mut visual);
+
+    assert!(bounds(&mut visual, "resize-handle").is_none());
+    assert!(bounds(&mut visual, "test-dock-pane-1").is_none());
+    assert!(bounds(&mut visual, "test-dock-pane-0").is_some());
+    assert!(bounds(&mut visual, "panel-inbox").is_some());
+}
+
+#[test]
+fn splitting_at_a_target_pane_places_the_new_pane_there() {
+    let mut cx = TestAppContext::single();
+    let (dock, mut visual) = dock_window(&mut cx);
+    register(&dock, &["inbox", "explore"], &mut cx);
+    open(&mut visual, &dock, "inbox");
+    open(&mut visual, &dock, "explore");
+    cx.update(|cx| {
+        dock.update(cx, |dock, cx| {
+            dock.split_panel("explore", SplitDirection::Right, cx)
+        });
+    });
+    redraw(&mut visual);
+
+    // Move inbox into a new pane left of explore's pane (pane 1), not beside
+    // inbox's own (pane 0, which empties and collapses).
+    cx.update(|cx| {
+        dock.update(cx, |dock, cx| {
+            dock.split_panel_at("inbox", "explore", SplitDirection::Left, cx)
+        });
+    });
+    redraw(&mut visual);
+
+    let moved = bounds(&mut visual, "test-dock-pane-3").expect("the new pane missing");
+    let target = bounds(&mut visual, "test-dock-pane-1").expect("target pane missing");
+    assert!(
+        moved.right() <= target.left(),
+        "the new pane must sit left of the anchored pane"
+    );
+    assert!(bounds(&mut visual, "test-dock-pane-0").is_none());
+}
+
+#[test]
+fn dragging_the_seam_resizes_and_double_click_resets() {
+    let mut cx = TestAppContext::single();
+    let (dock, mut visual) = dock_window(&mut cx);
+    register(&dock, &["inbox", "explore"], &mut cx);
+    open(&mut visual, &dock, "inbox");
+    open(&mut visual, &dock, "explore");
+    cx.update(|cx| {
+        dock.update(cx, |dock, cx| {
+            dock.split_panel("explore", SplitDirection::Right, cx)
+        });
+    });
+    redraw(&mut visual);
+
+    let before_0 = bounds(&mut visual, "test-dock-pane-0").expect("pane 0 missing");
+    let before_1 = bounds(&mut visual, "test-dock-pane-1").expect("pane 1 missing");
+    let seam = bounds(&mut visual, "resize-handle").expect("seam missing");
+
+    drag(
+        &mut visual,
+        center_of(seam),
+        center_of(seam) + point(px(40.), px(0.)),
+    );
+    let grown = bounds(&mut visual, "test-dock-pane-0").expect("pane 0 missing");
+    let shrunk = bounds(&mut visual, "test-dock-pane-1").expect("pane 1 missing");
+    assert!(
+        grown.size.width > before_0.size.width,
+        "the seam leads pane 0"
+    );
+    assert!(shrunk.size.width < before_1.size.width, "pane 1 gives way");
+
+    // Double-clicking the seam restores the default ratio.
+    let seam = bounds(&mut visual, "resize-handle").expect("seam missing");
+    press(&mut visual, center_of(seam), 2);
+    redraw(&mut visual);
+    let reset_0 = bounds(&mut visual, "test-dock-pane-0").expect("pane 0 missing");
+    let reset_1 = bounds(&mut visual, "test-dock-pane-1").expect("pane 1 missing");
+    // The flex split may round an odd-pixel span by a hair.
+    assert!((reset_0.size.width - reset_1.size.width).abs() <= px(1.));
+
+    // A huge drag clamps instead of vanishing a side.
+    let seam = bounds(&mut visual, "resize-handle").expect("seam missing");
+    drag(
+        &mut visual,
+        center_of(seam),
+        center_of(seam) + point(px(2000.), px(0.)),
+    );
+    let clamped = bounds(&mut visual, "test-dock-pane-1").expect("clamped pane missing");
+    assert!(clamped.size.width > px(0.));
+}
+
+#[test]
+fn dragging_a_tab_to_a_pane_edge_splits_it() {
+    let mut cx = TestAppContext::single();
+    let (dock, mut visual) = dock_window(&mut cx);
+    register(&dock, &["inbox", "explore"], &mut cx);
+    open(&mut visual, &dock, "inbox");
+    open(&mut visual, &dock, "explore");
+
+    // Drag explore's tab onto the right edge band of the pane's content.
+    let tab = bounds(&mut visual, "test-dock-pane-0-tabs-tab-explore").expect("tab missing");
+    let content = bounds(&mut visual, "test-dock-content-0").expect("content missing");
+    let drop_at = point(
+        content.right() - content.size.width * 0.125,
+        content.center().y,
+    );
+
+    visual.simulate_mouse_down(center_of(tab), MouseButton::Left, Modifiers::default());
+    // Past the drag threshold, the drag starts and the drop zones mount.
+    visual.simulate_event(MouseMoveEvent {
+        position: center_of(tab) + point(px(8.), px(2.)),
+        pressed_button: Some(MouseButton::Left),
+        modifiers: Modifiers::default(),
+    });
+    redraw(&mut visual);
+    visual.simulate_event(MouseMoveEvent {
+        position: drop_at,
+        pressed_button: Some(MouseButton::Left),
+        modifiers: Modifiers::default(),
+    });
+    visual.simulate_mouse_up(drop_at, MouseButton::Left, Modifiers::default());
+    redraw(&mut visual);
+
+    assert!(
+        bounds(&mut visual, "resize-handle").is_some(),
+        "the drop should have split the pane"
+    );
+    assert!(
+        bounds(&mut visual, "test-dock-pane-1-tabs-tab-explore").is_some(),
+        "the dragged tab lives in the new pane"
+    );
+    assert!(bounds(&mut visual, "panel-explore").is_some());
+}
+
+#[test]
+fn moving_a_panel_merges_panes_and_collapses_the_source() {
+    let mut cx = TestAppContext::single();
+    let (dock, mut visual) = dock_window(&mut cx);
+    register(&dock, &["inbox", "explore"], &mut cx);
+    open(&mut visual, &dock, "inbox");
+    open(&mut visual, &dock, "explore");
+    cx.update(|cx| {
+        dock.update(cx, |dock, cx| {
+            dock.split_panel("explore", SplitDirection::Right, cx)
+        });
+    });
+    redraw(&mut visual);
+
+    cx.update(|cx| {
+        dock.update(cx, |dock, cx| dock.move_panel("explore", "inbox", cx));
+    });
+    redraw(&mut visual);
+
+    assert!(
+        bounds(&mut visual, "resize-handle").is_none(),
+        "the emptied source pane collapses"
+    );
+    assert!(bounds(&mut visual, "test-dock-pane-0-tabs-tab-inbox").is_some());
+    assert!(bounds(&mut visual, "test-dock-pane-0-tabs-tab-explore").is_some());
+    assert!(
+        bounds(&mut visual, "panel-explore").is_some(),
+        "the moved tab activates in its new pane"
+    );
+}
+
+#[test]
+fn close_others_keeps_one_and_close_pane_empties() {
+    let mut cx = TestAppContext::single();
+    let (dock, mut visual) = dock_window(&mut cx);
+    register(&dock, &["inbox", "explore", "settings"], &mut cx);
+    open(&mut visual, &dock, "inbox");
+    open(&mut visual, &dock, "explore");
+    open(&mut visual, &dock, "settings");
+
+    cx.update(|cx| {
+        dock.update(cx, |dock, cx| dock.close_others("inbox", cx));
+    });
+    redraw(&mut visual);
+
+    assert!(bounds(&mut visual, "test-dock-pane-0-tabs-tab-inbox").is_some());
+    assert!(bounds(&mut visual, "test-dock-pane-0-tabs-tab-explore").is_none());
+    assert!(bounds(&mut visual, "test-dock-pane-0-tabs-tab-settings").is_none());
+    assert!(bounds(&mut visual, "panel-inbox").is_some());
+
+    cx.update(|cx| {
+        dock.update(cx, |dock, cx| dock.close_pane("inbox", cx));
+    });
+    redraw(&mut visual);
+
+    assert!(bounds(&mut visual, "test-dock-pane-0-tabs-tab-inbox").is_none());
+    assert!(
+        bounds(&mut visual, "panel-inbox").is_none(),
+        "the emptied pane renders nothing"
+    );
+
+    // The dock is reusable: opening again fills the empty root pane.
+    open(&mut visual, &dock, "inbox");
+    assert!(bounds(&mut visual, "test-dock-pane-0-tabs-tab-inbox").is_some());
+}