Port feature from vitejs/devtools#523: collapsible edge-mode toolbar with drag-to-snap positioning

[antfubot]

Context

vitejs/devtools#523 ("feat(core): collapsible edge-mode toolbar with drag-to-snap positioning") by @dvcolomban added an opt-in "Auto-collapse edge toolbar" setting and made the edge-docked toolbar draggable/snappable among the four viewport edges, plus fixed a vertical-toolbar flex-direction layout bug. It touched packages/core/src/client/webcomponents/components/dock/DockEdge.{vue,stories.ts}, DockEmbedded.vue, views-builtin/SettingsAppearance.vue, and webcomponents/style.css in vitejs/devtools, which moved here as part of the v0.9 migration — the equivalent files today live under packages/hub-ui/src/client/components/dock/ and packages/hub-ui/src/client/components/views-builtin/.

It also touched packages/kit/src/types/settings.ts in vitejs/devtools — that file is a thin extension of DevframeDocksUserSettings from @devframes/hub/types and still exists in vitejs/devtools unaffected; the new "auto-collapse" setting field itself likely belongs on DevframeDocksUserSettings here (@devframes/hub/types) instead, mirroring how vitejs/devtools's DevToolsDocksUserSettings only adds Vite-specific toggles on top.

Original PR description

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.

Diff: https://github.com/vitejs/devtools/pull/523/files

For agents picking this up

• Read the diff at feat(core): collapsible edge-mode toolbar with drag-to-snap positioning vitejs/devtools#523 (and its demo video, linked in the PR) for the full behavior — auto-collapse pill, drag-to-snap, and the vertical-toolbar flex fix.
• Add the new setting field to DevframeDocksUserSettings (@devframes/hub/types) rather than vitejs/devtools-side DevToolsDocksUserSettings, unless it's genuinely Vite-specific.
• Port the component changes to packages/hub-ui/src/client/components/dock/DockEdge.vue (+ its .stories.ts), DockEmbedded.vue, and views-builtin/SettingsAppearance.vue, adapting to whatever has shifted since the fork.
• Credit @dvcolomban as the original author: include a Co-authored-by: dvcolomban <...> trailer (look up their GitHub noreply email, or omit if unavailable) and mention them in the PR description.
• Link back to feat(core): collapsible edge-mode toolbar with drag-to-snap positioning vitejs/devtools#523 in the PR description.
• Close this issue when the port merges.