Resolve grabs to app source instead of UI library wrappers

[aidenybai]

Why

When you grab an element, React Grab resolves its source location for the label, "open file", and the copied snippet. Today it trusts the first real on-disk source it finds — React's fiber _debugSource or the top owner-stack frame. That file is often a design-system / UI-library wrapper (shadcn components/ui, Radix, Pebble, …), not the app component that actually rendered it.

So grabbing a button can point you at components/ui/button.tsx or @radix-ui/react-* instead of the page that used it — sending you and the agent into wrapper code rather than your own.

What changed

Grabs now resolve to your app's source, falling back to wrappers/packages only when there's nothing better.

• Prefer app-owned source over both third-party packages and local UI wrappers.
• De-prioritize components/ui by default for shadcn-style wrappers.
• Detect third-party frames more reliably, including dependency sourcemap paths that have no node_modules segment (bundled/minified deps, relative scoped paths like ../@radix-ui/...).
• Preserve package names in stack output when a dependency frame is the best available context.
• Keep wrapper/package frames as fallback locations so grabs still return useful source when no app file is present.
• Include per-element source, formatted stack context, and sanitized stack frames in the structured application/x-react-grab clipboard payload.

New option: source.ignorePaths

Mark your own design-system paths as wrappers. This accepts strings or RegExp; strings also work via script-tag data-options.

init({
  source: {
    ignorePaths: ["src/design-system", /\/packages\/ui\//],
  },
});

This is purely additive — Options.source is optional and existing behavior is unchanged when it's omitted.

How it works

A single source-frame policy decides whether a frame is:

1. app code
2. an ignored local wrapper
3. a third-party package
4. unknown / not useful as source

Resolution uses that same order:

app code → ignored local wrapper → package source

React's fiber source is considered first within each tier, then owner-stack frames. The same policy is used everywhere source is resolved: resolveSource, copy flow, getStackContext, getElementContext, primitives, and snippet generation.

Notes

• Package-name parsing stays focused on unambiguous marker-based paths like node_modules, Vite optimized deps, and CDN URLs.
• Ambiguous relative scoped sourcemap paths are handled inside the source-frame policy, where the app-vs-package decision belongs.
• Raw React fiber source is cached before policy filtering, so custom ignore rules can be applied without changing what React reported.
• Ignored wrapper frames are skipped in formatted stack output, but can still be used as fallback source locations when no app frame exists.
• Plain text and the custom React Grab clipboard payload now expose the same trace context, so CLI/native readers and other structured consumers can use it without reparsing text.

Testing

• nr build
• pnpm test (Playwright e2e + Vitest unit, including parser/policy/source-selection tests)
• pnpm lint
• pnpm typecheck
• pnpm format

  

[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 12, 2026 11:16am
react-grab-website	Ready	Preview, Comment	Jun 12, 2026 11:16am

[pkg-pr-new]

Open in StackBlitz

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

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

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

commit: a149248

[cursor]

Cursor Bugbot has reviewed your changes using default effort and found 1 potential issue.

^{❌ Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, enable autofix in the Cursor dashboard.}

^{Reviewed by Cursor Bugbot for commit a149248. Configure here.}