research: investigate source mapping options for Next.js and Nuxt

[coconilu]

Parent

Part of #2.

Goal

Investigate how PickFix can map a picked DOM element back to framework source files in Next.js and Nuxt.

The deliverable is a short technical recommendation, not production code.

Questions

• Can Next.js expose JSX source file/line metadata in development mode in a reliable way?
• Can Nuxt/Vue expose SFC source file/line metadata in development mode?
• Should PickFix use compiler transforms, source maps, framework plugins, runtime metadata, or a hybrid approach?
• What metadata schema should packages/bridge consume?
• How should source paths be normalized for local, Docker, and future enterprise/self-hosted environments?

Initial hypothesis

The first PickFix MVP should use development-only DOM metadata attributes injected by framework plugins or transforms.

Example:

<div
  data-pf-source-file="src/components/Card.tsx"
  data-pf-source-line="18"
  data-pf-source-column="3"
  data-pf-component="Card"
>

The bridge can then read the selected element or nearest ancestor and include source context in the pick payload.

Acceptance criteria

• Document at least 2 possible approaches for Next.js.
• Document at least 2 possible approaches for Nuxt/Vue.
• Compare explicit DOM metadata injection vs source-map/runtime inspection approaches.
• Recommend one minimal prototype path.
• Define the initial data-pf-* metadata schema.
• Identify follow-up implementation issues for bridge, web UI, agent prompt, Next.js plugin, and Nuxt plugin.

Notes

Useful prior-art areas to inspect:

• React dev transforms and source maps.
• React 19 component stack/debug metadata behavior.
• Vue SFC compiler metadata and dev-only __file.
• Nuxt component metadata generation.
• Existing inspector tools that inject source metadata into DOM attributes.