fix(overlay): follow the pointer inside a shadow root while picking

[erkamyaman]

What and why

#285 made the component picker pick components inside a ShadowDom component. A browser check found one gap. Moving the pointer between elements inside the same shadow root fires no mouseover at the document, because both the target and the related target retarget to the shadow host. The hover box therefore stayed on whichever component the pointer entered first. Clicking still picked the right component.

The picker now also listens for pointermove and works out the component under the pointer from the composed path, as before. It redraws the box only when that component changes, so moving within one component doesn't call highlight.show again.

How it was verified

• pnpm commit:check
• pnpm format:check (changed files)
• pnpm typecheck
• pnpm test:devtools (1606 tests). The new test "follows the pointer between components inside one shadow root" fails without the change.
• pnpm skills:check (when .claude/ changed): not changed
• Docs: no doc change needed. The Components page doesn't describe the hover box, and picking inside shadow roots was already covered.
• pnpm extension:build (when app/ changed): not changed
• Checked in the browser with axe (when the UI changed): page-side overlay only, no panel UI change

Screenshots

None. The highlight box looks the same as before.

Notes for reviewers

• mouseover stays as well, so jsdom tests and browsers without Pointer Events keep working.
• mouseout to outside the page still clears the box and resets the remembered component.

Summary by CodeRabbit

• Bug Fixes
  • Component picking now updates highlights as the pointer moves between components within a shadow root, without repeating highlights when the pointer remains over the same component.
  • Highlights are cleared when the pointer leaves the component.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

• Configuration used: defaults
• Review profile: CHILL
• Plan: Advanced
• Run ID: ef2ac3d4-5c70-4a66-a940-a8510e8808fa

---

---

📥 Commits

Reviewing files that changed from the base of the PR and between 71450fa and a95f067.

---

---

📒 Files selected for processing (2)

• packages/devtools/src/__tests__/component-pick.test.ts
• packages/devtools/src/component-pick.ts

---

---

Included review availability: This review used your included allowance. Your plan provides up to 10 included reviews per hour; 9 remain after this review.

---

---

---

📝 Walkthrough

📝 Walkthrough

Walkthrough

Component picking now updates highlights on pointer movement, skips repeated highlights for the same component, and clears the tracked highlight when the pointer leaves without a related target. A test covers pointer movement between components inside a shadow root.

Changes

Component picking

Layer / File(s)	Summary
Pointer-driven highlight updates packages/devtools/src/component-pick.ts, packages/devtools/src/__tests__/component-pick.test.ts	Picking registers a document-level pointermove listener and removes it during cleanup. The hover handler skips unchanged components and resets the tracked component when the pointer leaves without a related target. The test checks highlights during shadow-root pointer movement and cancellation.

Priority: ➖ Normal

Estimated code review effort: 2 (Simple) | ~10 minutes

Change: Bug fix

---

---

Merge Risk: ⚪ Minimal · up to a95f0

The picker updates highlights as the pointer moves between components, and no issue requiring a fix before merge was identified.

Pre-merge checks | 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Docstring Coverage		Docstring coverage is 100.00% which is sufficient. The required threshold is 80.00%. Docstring coverage is scoped to functions touched by this diff. Analyzed 1 functions across 2 files.
Linked Issues check		Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check		Check skipped because no linked issues were found for this pull request.
Description Check		Check skipped - CodeRabbit’s high-level summary is enabled.
Title check		The title clearly and concisely describes the main change: updating overlay pointer tracking inside a shadow root during component picking.

---

✨ Finishing Touches

📝 Generate docstrings

• Commit to this branch
• Create a new PR

---

---

---

🧪 Generate unit tests (beta)

• Commit to this branch
• Create a new PR

---

---

---

• Autofix · Keep fixing CodeRabbit findings and required CI, and resolving merge conflicts

---

_{Comment @coderabbitai help to get the list of available commands.}

[cloudflare-workers-and-pages]

🚀 Deploying Preview to Cloudflare 🚀

Preview Deployments by commit

Status	Deployment URL	Commit	Updated (UTC)	See this deployment's details
Build: Failed ❌ View logs ↗		a95f067	2026-10-11T08:31:21.278Z	View logs ↗