Deep-select / pierce overlays (modifier-hold)#25
Merged
Conversation
Holding the primary modifier (Cmd on Mac, Ctrl on Win/Linux) while hovering now pierces through invisible overlays, empty wrapper containers, and opacity:0 animation ghosts to highlight the real content element underneath. This helps annotating animation-heavy frameworks (Framer Motion, Remotion, etc.) where overlay divs intercept the pointer. - resolvePierceTarget + hasDirectTextContent helpers in element-identification.ts resolve the real target from the full elementsFromPoint stack: topmost visible element with direct text, else smallest visible box, else topmost. - pierceElementFromPoint / isElementPaintable wire the resolver to the live DOM (reusing the existing elementsFromPointWithIframes + checkVisibility). - The hover handler is opt-in: default hover still uses deepElementFromPoint and is unchanged. Pierce is flagged only when it actually changes the target, and the highlight switches to a dashed border. Pressing/releasing the modifier re-resolves the current point without a mouse move. - The default element-identification heuristic (class-name vs text) is left untouched; piercing only changes which element is targeted. Reconciliation with the existing modifier-CLICK multi-select gesture: pierce is modifier-HOVER, multi-select is modifier-CLICK. Since the modifier is already held during a multi-select click, that click now resolves to the pierced element, so "hold modifier, hover (pierce), click" selects the element the dashed highlight showed. Reimplemented (not cherry-picked) from upstream benjitaylor#119: the upstream patch was rewritten against this fork's current code, dropped its global identifyElement text-preference change (kept opt-in per scrutiny constraints), reused this fork's iframe-aware elementsFromPointWithIframes, and moved the resolution into a pure, unit-tested helper. Demo/website files were omitted to keep published-package code minimal. Concept by @stevysmith. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
What
Hold the primary modifier (Cmd on Mac, Ctrl on Win/Linux) while hovering to pierce through invisible overlays, empty wrapper containers, and
opacity:0animation ghosts, highlighting the real content element underneath. The existing highlight is shown on the pierced target with a dashed border. Useful for annotating animation-heavy UIs (Framer Motion, Remotion, etc.) where overlay divs intercept the pointer.Reimplements upstream benjitaylor#119 (concept by @stevysmith).
How
package/src/utils/element-identification.ts: pure, unit-tested helpershasDirectTextContent(el)— element renders its own (non-whitespace) text node.resolvePierceTarget(candidates)— from theelementsFromPointstack pick: (1) topmost visible element with direct text, (2) else smallest visible box (catches text-less visual elements like swatches/bars), (3) else topmost.package/src/components/page-toolbar-css/index.tsx:pierceElementFromPoint/isElementPaintablewire the resolver to the live DOM, reusing the existing iframe-awareelementsFromPointWithIframesand nativecheckVisibility().deepElementFromPointand is unchanged. The dashed indicator appears only when piercing actually changes the target. Pressing/releasing the modifier re-resolves the current point without a mouse move.Cherry-pick vs reimplement
Reimplemented. The upstream patch was rewritten against this fork's current code:
identifyElementtext-preference change — kept the default class-name vs text heuristic untouched (pierce only changes which element is targeted), per the package's UI-scrutiny constraints.elementsFromPointWithIframesinstead of bareelementsFromPoint.Behavior change to flag for maintainer
The fork's multi-select gesture is modifier+CLICK (no Shift); pierce is modifier+HOVER. Since the modifier is already held during a multi-select click, that click now resolves to the pierced element rather than the topmost overlay — so "hold modifier, hover (pierce), click" selects the element the dashed highlight showed. For points with no overlay this is identical to the previous behavior.
Build / test
pnpm build— success (DTS type-check included; only pre-existing SCSS deprecation warnings).pnpm --filter agentation test— 111 passed (11 new tests for the pierce resolver /hasDirectTextContent).🤖 Generated with Claude Code