feat(ui): serve tree and action-bar hovers from one native-style widget

[EhabY]

Summary

Third of three stacked PRs: #1065 → #1079 → this one. Gives tree rows and icon buttons the hover VS Code shows, served the way the workbench serves it: one widget per list rather than one per target.

• A row hovers with its text value; tooltip overrides it and null opts out
• IconButton hints with its label, so a row's action bar needs no wiring
• Ctrl+K Ctrl+I opens the focused row's hover, the chord bound to list.showHover
• One bubble for the whole tree, placed and delayed the way native places and delays it

Why one widget

Tooltip mounts a Radix root per trigger, which is right for a button and wrong for a list. Two reasons.

Cost. Mounting 2,000 rows took 515ms with a root each, against 134ms with no hovers at all. A shared widget brings it back to 189ms, within noise of a tree that has none.

Correctness. Native computes delay = isInstantlyHovering() ? 0 : workbench.hover.delay, where "instantly" means a hover was hidden within the last 200ms. That rule needs one place to keep the timestamp, and a root per trigger has none: trigger B cannot know that A was showing a moment ago. Radix answers this with skipDelayDuration on its provider, but our bubble is a controlled root and never reports its opens there, so the two would keep separate ideas of what is on screen.

So HoverDelegateScope hands every Tooltip inside it to one bubble. Tooltip reports its trigger and content to that delegate instead of mounting a root, TreeHover owns the widget, and an invisible anchor moves to whatever the pointer reached.

Placement, from the managed-hover path

A managed hover always passes position: { hoverPosition: 2 }, whatever the widget's own default of 3 is, so it sits below its target, 2px into the bottom edge. The same line sets showPointer: hoverDelegate.placement === "element", and computeXCordinate centers whenever a pointer is shown. That splits into two rules, both matched here:

Target	Native placement	Result
Action bar button	element	centered under the button
Row label	mouse	follows the cursor, target.x = event.x + 10

Measured in Chrome: an action bubble's center lands on the button's center to the pixel, and a row bubble's left edge tracks the cursor at exactly +10 across positions. The anchor takes its y from the row rather than from whichever element reported the pointer, so a label taller than its row, which is what a status pill produces, cannot push the bubble off it.

Matching native's timing

Native gates the zero-delay path on a per-delegate instantHover flag, and exactly three call sites set it: a notebook cell toolbar and two inline widgets. Never a list. So each new target waits out the delay here too, with the same exception native carves out for a dense cluster of targets, which for a tree means one row's action bar.

With workbench.hover.delay at its 500ms default:

Move	Time
First hover	518ms
Row to another row	511ms
Label to an action button	513ms
Action button to action button	19ms

Notes for review

• @radix-ui/react-slot becomes a direct dependency of packages/ui. It was already there transitively, and it merges the delegate's pointer handlers onto a trigger while composing any the consumer passed.
• TooltipScope lets a component own hovers without forcing a provider on its consumers, so Tree and IconButton work unwrapped. A private provider keeps its own skip-delay, so an app with several of them makes every hover wait the full delay; the README says to mount one provider per app.
• TreeHover uses plain functions rather than useCallback. The React Compiler covers the memoization, and the file compiles with no bailout, so the delegate a row reads stays stable without it.
• Native pins the sticky container at z-index: 13, below the hover widget's 40. Ours used 100, so a bubble over a row near the top of the tree was painted over by the pinned rows.
• Drive-by: the menu parity story loses its trigger button so both menus start at the same height, which the pixel diff was reading as drift.
• A tree hover is not linked to its row with aria-describedby. The bubble hangs off a shared anchor, and rows are reached through aria-activedescendant rather than focus, so the association would not be announced. The default content is the row's own accessible name.

Diff composition

Area	Added	Deleted
Production UI source	418	82
Automated tests and shared helpers	123	4
Stories and visual fixtures	118	7
Documentation	22	1
Build and workspace configuration	4	0
Total	685	94

Validation

• pnpm test:webview --reporter=dot: 45 files, 418 tests passed, up from 414 on feat(ui): add tree multi-select, type navigation, paging, and sticky scroll #1079
• Focused Tree suite: 10 files, 99 tests passed
• pnpm typecheck, pnpm lint, pnpm format:check, pnpm storybook:ci
• Three new stories, Hover, HoverOnAction, and HoverByKeyboard, drive the bubble through a play function and assert its content. Note that a synthetic pointer never triggers CSS :hover, so the action-bar story selects its row to reveal the buttons and the helper waits for a laid-out box before hovering.
• Verified in Chrome against a running Storybook: cursor tracking, centering on an action button, the timings above, stacking over pinned rows, and hovers on pinned sticky rows, whose coordinates come from a different container
• Every component in packages/ui still compiles under the React Compiler with no bailout

_{This pull request description was updated by Coder Agents on behalf of @EhabY.}

[jakehwll]

Hmm. Weird that Radix is causing an issue here... code-wise and test wise this works however 😅