Ghost preview and better motion design for toolbar #25

Problem

While testing the toolbar, I noticed that dragging feels a bit unpredictable:

1. Dragging by an icon button previously triggered its click on release (already opened a PR for this!).
2. After releasing the toolbar, it instantly teleports to one of the four screen corners.

When dragging the toolbar toward the center or another edge, it abruptly disappears from under the cursor and snaps with 0ms transition. At first I thought it was a bug where the toolbar disappeared entirely, before realizing it had jumped to the opposite corner. Because there is no visual cue while dragging, it’s hard to tell where the toolbar will land until it suddenly teleports.

Proposed Solution

To make the toolbar's corner-docking behavior predictable and feel physical:

1. Ghost Drop Target Preview: While dragging, show a subtle dashed indicator in the active corner showing exactly where the bar will dock. As your cursor crosses screen quadrants, the indicator smoothly updates.
2. Smooth FLIP Snap Animation: On release, animate the toolbar from the cursor release position to the target corner using a fast, non-bouncy ease-out (transform: translate, 240ms).

Future Idea: Edge / Center Docking

As an extension of this, would you be open to allowing docking along edge centers as well? E.g.:

• Bottom-center / Top-center: dock in the middle like a macOS dock.
• Left-center / Right-center: rotate the pill vertically against the screen edge to stay out of the way of page content.
  Think it's a neat addition to devtools, if you're up to it I will be happy to contribute this as well

Demo

I already have an experimental implementation running locally to demo the feel. Wanted to open an issue first to gather feedback and see if the team is interested in this before opening a PR! You can check out my feat/toolbar-snap-animation branch if you want to see the code implementation