[individual11]

Brings tsquare 0.14's viewer events to the React components.

<WireframeViewer>

• onElementClick(hit, hits, event): the element or flow arrow clicked (a press that hardly moves; dragging still pans) and everything under the point, most likely first. Empty board outside the screens gives the board (type: "Board").
• onElementHover(hit, hits): follows the pointer; null when it leaves.
• selected: a line or a list of lines to outline (solid). A line inside a block outlines that block, so an editor's caret line works.
• Hovered elements get a dashed outline while onElementClick is set; it goes as soon as the board stops being clickable.
• When source and selected change together (Enter in an editor), the outline waits for the new board instead of matching the new line against the old board's lines. useBoard's pending is now true from the render that brings the text (it was set in an effect, a render late). A board for older text that lands in that window clears the outline (it was drawn on the board before) until a board matches the text.

<WireframePlayground syncSelection> (default true): click an element to select its line in the editor; move the caret and its element is outlined on the board. syncSelection={false} turns both off and skips measuring.

<WireframeEditor onCursorLine>: the caret's line when it moves to another one, to connect your own editor and viewer (selected + goToLine).

Behavior

• useBoard measures the elements (measureElements, about one more render) only when needed: an element prop on the viewer, or syncSelection in the playground. Other boards cost the same as before.
• While the text has problems, nothing is clickable or outlined: the last valid board stays, but its lines no longer match the text (same rule as the tsquare playground).
• Measured, MeasuredElement, MeasuredFlow, MeasuredBox types exported. Needs tsquare ^0.14.0. Version 0.5.0.

Docs: WireframeViewer: props and a "Clicking elements" section. Playground: syncSelection and "Clicking the board". Editor: onCursorLine and "Next to a viewer" (editor + viewer connected by line). Styling: --tsquare-highlight and the tsquare-highlight classes. Overview, README and CHANGELOG.

Tests (32 pass): viewer click (button with ["Button", "Screen", "Board"] under it, drag isn't a click, empty board gives the board); hover reports, outlines only when clickable, clears on leave and when onElementClick goes; selected (line, list, container, board line, null, problems); measuring only when asked; playground click → caret line → outline, caret move → outline, hover, syncSelection={false} turning all of it off; editor onCursorLine; clicks on a board that is behind are not reported and clearing selected clears at once; text and selected changing together never outline the old board's element on the new line (every drawn outline recorded; both halves of the fix mutation-checked; a real Enter checked in Chrome). Mutation-checked: removing each behavior fails its test. Checked in Chrome on demo pages for the viewer and the playground (with the toggle).

🤖 Generated with Claude Code

[Copilot]

🟡 Changes recommended

Pending-board handling leaves cleared selection outlines visible and delivers clicks using stale line numbers, which can select the wrong editor line before redraw.

2 open issues

• Suppress clicks while the board is pending · New
• Apply cleared selections while the board is pending · New

What changed in this PR

This PR brings tsquare 0.14’s element interactions to the React components in release 0.5.0, connecting viewer selections with editor caret positions.

Changes:

• Adds viewer click and hover callbacks, line-based outlines, and optional element measurement.
• Adds playground selection syncing and editor cursor-line notifications, with pending-board handling.
• Updates dependencies, public types, documentation, and interaction tests.

File	Description
test/​react.test.tsx	Adds interaction, selection, measurement, and pending-board tests.
src/​viewer.tsx	Adds element callbacks and hover/selection outlines.
src/​use-board.ts	Adds optional measurements and render-time pending detection.
src/​playground.tsx	Connects board clicks and editor caret selection.
src/​index.ts	Exports measured-element types.
src/​editor.tsx	Exposes cursor-line notifications.
README.md	Highlights viewer element interactions.
package.json	Sets version 0.5.0 and requires tsquare 0.14.
package-lock.json	Locks the updated release and dependency versions.
docs/​viewer.md	Documents callbacks, outlines, and pending-board behavior.
docs/​styling.md	Documents highlight colors and classes.
docs/​README.md	Adds element interaction guidance.
docs/​playground.md	Documents selection syncing and its opt-out.
docs/​editor.md	Shows editor/viewer integration by line.
CHANGELOG.md	Summarizes the 0.5.0 release.

_{Review effort: Balanced}