feat(core): collapsible edge-mode toolbar with drag-to-snap positioning

[dvcolomban]

What changed

• Adds an opt-in "Auto-collapse edge toolbar" setting (Settings → Appearance): when idle and closed, the edge-docked toolbar shrinks to a small corner pill instead of permanently spanning the full edge, mirroring Dock.vue's own minimize animation (a real size change, not just an opacity fade). Hovering the pill brings it back.
• The pill anchors at the corner nearest the toolbar's entries (its start), not the "Edge position"/"Float mode" buttons at the other end.
• The existing "Edge position" button now also acts as a drag handle, letting the whole edge-docked panel be dragged and snapped among the four viewport edges without ever transitioning through float mode mid-drag.
• Fixes a pre-existing layout bug in the vertical (left/right) toolbar: its inner wrapper never switched to a column flex-direction, squeezing entries and the position/float buttons side by side in the 40px-wide toolbar and clipping the buttons out of view.

Why it changed

Edge mode permanently overlays a strip of the underlying host app with an opaque toolbar, even when DevTools isn't in active use — there's no way to get it out of the way short of switching to float mode entirely. Collapsing to a small pill on idle keeps the affordance discoverable (hover to reveal) while giving back the screen real estate the rest of the time, the same tradeoff Dock.vue's own float-mode minimize already makes.

The pill's anchor corner matters because of where the mouse ends up: after hovering a corner pill to reveal the toolbar, the cursor is sitting right there, and if that corner also held the "Edge position" button, a quick follow-up click could land on it and start a drag or flip to float mode instead of hitting an entry — not what "just show me the toolbar" should do. Anchoring at the entries' side instead avoids that overlap. The collapsed/expanded anchor pair is also kept identical per position (e.g. always bottom+left for the bottom edge) so the width/height transition grows from one fixed corner instead of swapping which side is pinned mid-animation.

Demo

Screen.Recording.2026-08-09.at.10.07.00.mov

[pkg-pr-new]

Open in StackBlitz

@vitejs/devtools

npm i https://pkg.pr.new/@vitejs/devtools@523

@vitejs/devtools-kit

npm i https://pkg.pr.new/@vitejs/devtools-kit@523

@vitejs/devtools-oxc

npm i https://pkg.pr.new/@vitejs/devtools-oxc@523

@vitejs/devtools-rolldown

npm i https://pkg.pr.new/@vitejs/devtools-rolldown@523

@vitejs/devtools-vite

npm i https://pkg.pr.new/@vitejs/devtools-vite@523

@vitejs/devtools-vitest

npm i https://pkg.pr.new/@vitejs/devtools-vitest@523

commit: 3d6e376

[dvcolomban]

Defaults to false to keep existing behaviour, but could be defaulted to true ?

[antfubot]

Thanks for this fix!

As of #529, the client UI previously at packages/core/src/client/** (webcomponents, dock, floating popover, json-render, inject runtime, etc.) has moved out of this repo. It now lives upstream in devframe (@devframes/hub-ui / @devframes/json-render-ui), and this repo consumes it as a published dependency instead of owning the source.

Since this PR's changes target code that no longer lives here, we're labeling it devframe. We've opened devframes/devframe#209 to port this fix upstream and credit you as the original author — thank you for the work, and sorry for the churn from the migration. Feel free to pick up the port yourself against devframe (linking back to this PR) if you'd like; otherwise we'll route it through the linked issue.