fix(vitepress-twoslash): better handling of offscreen twoslash poppers

[Dschungelabenteuer]

Description

vitepress-twoslash makes the assumption that we're both:

1. using VitePress' default theme (poppers z-index rely on the --vp-z-index-local-nav custom property).
2. using Twoslash within a VitePress page which uses default theme's VPLocalNav component.

In other words, using twoslash ALWAYS renders the poppers in the top-left corner . In most VitePress-powered websites, relying on the --vp-z-index-local-nav custom property would indeed luckily hide offscreen poppers because VPLocalNav is higher in the stacking context (poppers are simply hidden in the background).

But the whole thing breaks whenever the layout doesn't follow those assumptions, e.g. either:

1. by using a whole custom theme that never defines that --vp-z-index-local-nav custom property
2. by trying to use vitepress-twoslash on the docs' home page which doesn't use VPLocalNav
3. by simply customizing CSS and refining z-indices/stacking contexts

Here's a straightforward repro of the issue, even when using the default theme

My two cents

1. Code-blocks from inactive code-groups (or even better hidden blocks) should not be displayed. They may be rendered for performance purposes, but showing them obviously is an undesirable behaviour (cf the above screen).

2. The current approach is both smart and naive. It's not versatile enough since it relies on a specific behaviour of a specific theme. THose are prerequisites that, as I mentioned, not everyone meet.

3. Because there's no official API between floating-vue, VitePress and Twoslash, the easiest way of addressing this issue is to hook into floating-ui's recomputePosition method to either hide or show a popper depending on whether its part of displayed/hidden block.

4. Good news is that floating-ui's recomputePosition is reachable through floating-vue, which means custom logic could be added by overriding floating-ui's recomputePosition method. Even better news is that vitepress-twoslash already patches floating-vue to address some other issues.

What this PR does

1. [chore] It creates a Poppper wrapper that makes it easieer to customize floating-vue.
2. [feat] Whenever a floating-vue's recomputePosition is called,, it determines whether is should be hidden or not (by checking if the reference node is actually displayed)

[netlify]

✅ Deploy Preview for shiki-next ready!

Name	Link
🔨 Latest commit	5473a1e
🔍 Latest deploy log	https://app.netlify.com/projects/shiki-next/deploys/691150c5144e0c00089f31da
😎 Deploy Preview	https://deploy-preview-1117--shiki-next.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[netlify]

✅ Deploy Preview for shiki-matsu ready!

Name	Link
🔨 Latest commit	5473a1e
🔍 Latest deploy log	https://app.netlify.com/projects/shiki-matsu/deploys/691150c56c618b0008c66b2a
😎 Deploy Preview	https://deploy-preview-1117--shiki-matsu.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 88.35%. Comparing base (5068b26) to head (5473a1e).

Additional details and impacted files

@@           Coverage Diff           @@
##             main    #1117   +/-   ##
=======================================
  Coverage   88.35%   88.35%           
=======================================
  Files          74       74           
  Lines        3322     3322           
  Branches      956      956           
=======================================
  Hits         2935     2935           
  Misses        344      344           
  Partials       43       43           

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[antfu]

I am a little worried about the patch. Do you think to contribute upstream to fix the problem or expose the API directly first?

[Dschungelabenteuer]

Yes, patching it didn't feel ideal but I still went for it since it was already done in #1090!
I'll definitely take a shot upstream on either floating-vue or floating-ui.
Should I close this PR or just convert to draft?

Also, I think your point also applies to #1116, both issues may be fixed by exposing the relevant API upstream!
And I've updated the repro link which was outdated