feat(react-grab): ghost-highlight similar component instances on shift-hover

[aidenybai]

What

When you hold Shift while hovering over an element (in active grab mode), React Grab now finds the nearest React component for the hovered element, traverses the fiber tree from its root with bippy to locate every other instance of the same component, and renders dashed "ghost" highlights over each instance's nearest DOM node.

This makes it easy to see, at a glance, everywhere a given component is rendered on the page.

How

• core/context.ts — new findSimilarComponentElements(element):
  • Walks up to the nearest useful composite fiber (the component you're pointing at) and resolves its canonical type via bippy's getType.
  • Climbs fiber.return to the tree root, then traverseFibers the whole tree collecting composite fibers whose getType matches.
  • For each match, resolves the nearest host node via bippy's getNearestHostFiber(...).stateNode, skipping the originally hovered node, disconnected nodes, and duplicates.
• components/overlay-canvas.tsx — new compositor ghost layer drawn beneath the live selection box, using a dashed stroke and reduced opacity so it reads as a secondary, "ghosted" highlight. Ghosts fade in via opacity and follow scroll/viewport changes like the selection layer.
• core/index.tsx — tracks whether Shift is held (pointermove / keydown / keyup, reset on deactivate and window blur), derives similarComponentElements reactively (only while hovering — not during multi-select, drag, prompt, frozen, or context-menu phases), and feeds ghostBounds / ghostVisible to the renderer.
• constants.ts — ghost overlay colors, dash length, and opacity.
• types.ts / renderer.tsx — thread the new ghostVisible / ghostBounds props through.

The feature is purely additive and visual; it does not change selection/copy behavior or the existing Shift-click multi-select.

Verification

• pnpm build, pnpm typecheck, pnpm lint, pnpm format all pass.

  

---

Summary by cubic

Add Shift-hover ghost highlighting in react-grab to show all other instances of the same React component. Also decouples similar-component detection from scroll/viewport updates to avoid extra fiber traversals.

• New Features

  • Hold Shift while hovering to see dashed “ghost” boxes over every other instance of the hovered component.
  • Uses bippy to resolve the component type, traverse the fiber tree, and collect nearest host nodes (skips the hovered one, duplicates, and disconnected nodes).
  • New ghost layer in overlay-canvas with dashed stroke, low opacity, and fade-in; rendered beneath selection and synced with scroll.
  • Tracks Shift state and disables ghosting during multi-select, drag, prompt, frozen, and context-menu phases; threads ghostVisible/ghostBounds and ghost style constants through types, renderer, and canvas.

• Refactors

  • Similar-component detection is decoupled from viewport/scroll updates; only ghost bounds reflow with scroll, while detection runs only when Shift-hover state or hover target changes.

^{Written for commit d044551. Summary will update on new commits.}

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
react-grab-storybook	Ready	Preview, Comment	Jun 4, 2026 12:13am
react-grab-website	Ready	Preview, Comment	Jun 4, 2026 12:13am

[pkg-pr-new]

Open in StackBlitz

npm i https://pkg.pr.new/@react-grab/cli@455

npm i https://pkg.pr.new/grab@455

npm i https://pkg.pr.new/react-grab@455

commit: d044551

[cubic-dev-ai]

2 issues found across 6 files

Prompt for AI agents (unresolved issues)

Check if these issues are valid — if so, understand the root cause of each and fix them. If appropriate, use sub-agents to investigate and fix each issue separately.


<file name="packages/react-grab/src/components/overlay-canvas.tsx">

<violation number="1" location="packages/react-grab/src/components/overlay-canvas.tsx:573">
P2: Key ghost animations by stable component identity, not array index. Reusing `ghost-${index}` can attach the previous animation state to a different matched instance when the ghost list changes order or size, causing ghosts to jump or morph incorrectly.</violation>
</file>

<file name="packages/react-grab/src/core/context.ts">

<violation number="1" location="packages/react-grab/src/core/context.ts:407">
P2: Shift-hover ghosting now scans the whole fiber tree on the interaction path, which can make pointer movement janky on large apps.</violation>
</file>

<sub>Reply with feedback, questions, or to request a fix.

Re-trigger cubic</sub>

[cubic-dev-ai]

P2: Key ghost animations by stable component identity, not array index. Reusing ghost-${index} can attach the previous animation state to a different matched instance when the ghost list changes order or size, causing ghosts to jump or morph incorrectly.

Prompt for AI agents

Check if this issue is valid — if so, understand the root cause and fix it. At packages/react-grab/src/components/overlay-canvas.tsx, line 573:

<comment>Key ghost animations by stable component identity, not array index. Reusing `ghost-${index}` can attach the previous animation state to a different matched instance when the ghost list changes order or size, causing ghosts to jump or morph incorrectly.</comment>

<file context>
@@ -501,6 +554,41 @@ export const OverlayCanvas: Component<OverlayCanvasProps> = (props) => {
+        }
+
+        ghostAnimations = bounds.map((ghostBounds, index) => {
+          const animationId = `ghost-${index}`;
+          const existingAnimation = existingGhostById.get(animationId);
+
</file context>

[cubic-dev-ai]

P2: Shift-hover ghosting now scans the whole fiber tree on the interaction path, which can make pointer movement janky on large apps.

Prompt for AI agents

Check if this issue is valid — if so, understand the root cause and fix it. At packages/react-grab/src/core/context.ts, line 407:

<comment>Shift-hover ghosting now scans the whole fiber tree on the interaction path, which can make pointer movement janky on large apps.</comment>

<file context>
@@ -362,6 +364,65 @@ export const getComponentDisplayName = (element: Element): string | null => {
+  const seenElements = new Set<Element>();
+  const similarElements: Element[] = [];
+
+  traverseFiber(rootFiber, (currentFiber) => {
+    if (currentFiber === targetFiber) return;
+    if (!isCompositeFiber(currentFiber)) return;
</file context>