Fix mouse input to examples in how-tos

[melissachen2000]

Context

For the following code, when rendered as an Example in a how-to:

where: Placement(📍(0m 0m))
Stage([
		Phrase('🏠' name: "home" place: Place(3m 0m))
		Phrase('🏫' name: "school" place: Place(-6m 0m))
		Phrase('🏀' name: "basketball" place: Place(-5m 2m))
		Phrase('👦' name: "Mike" place: Place(6m 3m))
		Phrase('🏪' name: "store" place: Place(0m -3m))
		Phrase('👧' name: "me" place: where)
	] background: Color(38 205 157°))

The mouse input does not work -- it always moves the 👧 character downwards instead of in the direction that the mouse is relative to the 👧 glyph. However, the arrow keys work, and both mouse and arrow keys work in the Stage in the project editor.

I used Claude Code to debug and fix this issue. According to Claude, the issue is that if there are multiple OutputView components on the same page (e.g., multiple examples, as was the case in Adrienne's how-to), the listener for the pointer down event would have selected the first OutputView on the page and calculated where the 👧 character should move to according to that first OutputView, which is not necessarily the OutputView that the user is interacting with. I verified this hypothesis by pasting the above code by itself into a how-to and verified that the mouse interaction works as expected. But, when this code is pasted twice into two different examples (i.e., \code here\ \code here again\), the interaction only works in the first example.

Related issues

• Related Issue #
• Closes Mouse interaction not working in Example in how-to #1064

Verification

1. Create a new how-to with the above code twice in two separate Examples.
2. Verify that in both Examples, the mouse moves the 👧 character toward the mouse instead of only down.
3. Also, verify that mouse input still works, too.
4. Open the guide in the Guide Panel in the project viewer, repeat steps 2 and 3.

Checklist