Concept
Hold Cmd (Mac) / Ctrl (Win) while hovering to pierce through invisible overlays, empty container wrappers, and opacity:0 animation ghosts and select the actual content underneath. Two-pass algorithm: (1) first element at the point with direct text content that is visible; (2) fallback to the smallest visible element. Adds a dashed highlight when pierce resolves to a different element than normal hover, and re-evaluates instantly on Cmd/Ctrl keydown/keyup (no mouse move needed). From upstream benjitaylor#119 by the original author.
Value
Makes annotation usable on animation-heavy stacks (Framer Motion, Remotion) where wrapper/overlay divs intercept the element the user actually wants.
Why feasible to land soon
The package-side change is small and contained (~270 net lines in page-toolbar-css/index.tsx): new pierceShadowDOM/pierceElementFromPoint/isEffectivelyInvisible/hasDirectContent helpers, an isPiercing flag on hover info, a dashed border style, and keydown/keyup re-eval wired into the existing mousemove effect. It builds on the existing deepElementFromPoint/closestCrossingShadow infra already in main.
Blockers / things to strip when reimplementing
- Default-behavior change: the PR also edits
package/src/utils/element-identification.ts so identifyElement prefers direct text content (e.g. "$54") over class names for ALL users, not just pierce mode. This changes existing annotation labels/snapshots globally — land it separately (or behind the same opt-in) and add/adjust tests; do not smuggle it in with pierce.
- Multi-select semantics change: cmd+shift+click switches from
deepElementFromPoint to pierceElementFromPoint. Verify this doesn't regress existing multi-select expectations; keep it as an explicit, tested decision.
- Demo bloat: ~700 lines of
DeepSelectDemo.tsx + .css in package/example/. Website-only, but trim to a minimal demo to avoid example churn; not required for the package feature.
- The
react-detection.ts skip-list additions (Remotion/TransitionSeries/forwardRef) are reasonable and cheap — fine to include.
Recommended clean approach
Reimplement the pierce feature minimally on current main: the helpers, isPiercing hover flag + dashed indicator, and keydown/keyup re-eval. Decide explicitly on multi-select piercing. Keep the element-identification default change OUT of this PR (track separately if wanted). Add a focused unit test for pierceElementFromPoint (overlay over a text node returns the text element; opacity:0 ghost is skipped). Add only a small demo if desired.
Credit: reimplements the concept from benjitaylor#119.
Acceptance
pnpm build succeeds; pnpm --filter agentation test passes (including a pierce unit test).- Existing (non-pierce) hover/identification behavior unchanged unless the identification change is intentionally included and tested.
Upstream PR: benjitaylor#119
Concept
Hold Cmd (Mac) / Ctrl (Win) while hovering to pierce through invisible overlays, empty container wrappers, and opacity:0 animation ghosts and select the actual content underneath. Two-pass algorithm: (1) first element at the point with direct text content that is visible; (2) fallback to the smallest visible element. Adds a dashed highlight when pierce resolves to a different element than normal hover, and re-evaluates instantly on Cmd/Ctrl keydown/keyup (no mouse move needed). From upstream benjitaylor#119 by the original author.
Value
Makes annotation usable on animation-heavy stacks (Framer Motion, Remotion) where wrapper/overlay divs intercept the element the user actually wants.
Why feasible to land soon
The package-side change is small and contained (~270 net lines in
page-toolbar-css/index.tsx): newpierceShadowDOM/pierceElementFromPoint/isEffectivelyInvisible/hasDirectContenthelpers, anisPiercingflag on hover info, a dashed border style, and keydown/keyup re-eval wired into the existing mousemove effect. It builds on the existingdeepElementFromPoint/closestCrossingShadowinfra already inmain.Blockers / things to strip when reimplementing
package/src/utils/element-identification.tssoidentifyElementprefers direct text content (e.g."$54") over class names for ALL users, not just pierce mode. This changes existing annotation labels/snapshots globally — land it separately (or behind the same opt-in) and add/adjust tests; do not smuggle it in with pierce.deepElementFromPointtopierceElementFromPoint. Verify this doesn't regress existing multi-select expectations; keep it as an explicit, tested decision.DeepSelectDemo.tsx+.cssinpackage/example/. Website-only, but trim to a minimal demo to avoid example churn; not required for the package feature.react-detection.tsskip-list additions (Remotion/TransitionSeries/forwardRef) are reasonable and cheap — fine to include.Recommended clean approach
Reimplement the pierce feature minimally on current
main: the helpers,isPiercinghover flag + dashed indicator, and keydown/keyup re-eval. Decide explicitly on multi-select piercing. Keep the element-identification default change OUT of this PR (track separately if wanted). Add a focused unit test forpierceElementFromPoint(overlay over a text node returns the text element; opacity:0 ghost is skipped). Add only a small demo if desired.Credit: reimplements the concept from benjitaylor#119.
Acceptance
pnpm buildsucceeds;pnpm --filter agentation testpasses (including a pierce unit test).Upstream PR: benjitaylor#119