Interaction · Pointer: handles inside the box, drags from the press

Resizable's grip sits inside the box's lower right corner and its edge
handles lie inside the edges, their lines on the edge; the edges use
layout::resize_edge, a resize_handle whose line shows only while
hovered, since the box draws its own border. A drag now measures from
the handle's press, kept in keyed state, so the edge follows the
pointer from the first move. Tests drag the right edge downward and
the bottom edge sideways, turn the dial without Shift, and draw a band
with Shift over a selection.

src/layout/mod.rs

@@ -27,7 +27,7 @@ pub(crate) use scroll::{bring_into_view, reveal_when_focused};
 pub use scroll_aids::{ScrollShadow, ScrollToTop, StickyHeader};
 pub use sheet::{Drawer, Sheet};
 pub use sidebar::Sidebar;
-pub use split::{SplitPane, resize_handle};
+pub use split::{SplitPane, resize_edge, resize_handle};
 pub use stack::{AspectRatio, Container, ZStack, h_stack, v_stack};
 pub use surface::{Card, CardHeader, Fieldset, Frame, Panel, Section, Well};
 pub use viewport::{Transform, Viewport};

src/layout/split.rs

@@ -1,7 +1,7 @@
 use std::{cell::Cell, rc::Rc};
 
 use gpui::{
-    AnyElement, App, Axis, CursorStyle, DragMoveEvent, ElementId, EmptyView, EntityId,
+    AnyElement, App, Axis, CursorStyle, DragMoveEvent, ElementId, EmptyView, EntityId, Hsla,
     InteractiveElement, IntoElement, ParentElement, Pixels, RenderOnce, Stateful,
     StatefulInteractiveElement, Styled, Window, div, prelude::*,
 };
@@ -11,8 +11,17 @@ use crate::theme::ActiveTheme;
 
 /// Thin divider with a wide grab area. `axis` is the split's direction.
 pub fn resize_handle(id: impl Into<ElementId>, axis: Axis, cx: &App) -> Stateful<gpui::Div> {
+    handle(id, axis, cx.theme().colors.border, cx)
+}
+
+/// A resize handle whose line shows only while hovered, on an edge whose box draws its own border.
+pub fn resize_edge(id: impl Into<ElementId>, axis: Axis, cx: &App) -> Stateful<gpui::Div> {
+    handle(id, axis, gpui::transparent_black(), cx)
+}
+
+fn handle(id: impl Into<ElementId>, axis: Axis, line: Hsla, cx: &App) -> Stateful<gpui::Div> {
     let theme = cx.theme();
-    let (line, lit, hit) = (theme.colors.border, theme.colors.focus, theme.handle_hit());
+    let (lit, hit) = (theme.colors.focus, theme.handle_hit());
     let base = div()
         .id(id)
         .group("resize")