[lxsmnsyc]

Draw the update highlight on one canvas instead of cloning the updated elements into the page, and stop the Ownership and Reactivity panels from rebuilding every row on each refresh.

Changes

• highlight-updates: the ghost clones are gone. Each update is outlined on one <canvas> in a shadow root on body. A changed text node gets one box per line it covers, from Range.getClientRects(). Any other change gets the element's box.
• The canvas adds no elements to the page and page styles cannot reach it. It is sized for the device pixel ratio and draws only while boxes are showing.
• Boxes follow window scrolls. One frame reports at most 200 updates. The fade is off when the user prefers reduced motion.
• canvas.ts takes the 2D context as a parameter, so it can move to an OffscreenCanvas worker later.
• Ownership rows, Reactivity nodes and Reactivity edges are keyed by id (row.node.id, node.id, from>to). Before, each refresh made new objects and the lists were keyed by object, so every refresh rebuilt every row.
• The demo has a "Frames" card that updates every animation frame (createSignal + requestAnimationFrame), with a pause button, to watch the highlight while scrolling or resizing.

Proof

Measured in Chrome on the demo with the Frames ticker running and the page width changing every frame:

Panel open	main	This branch
Ownership	50 to 66ms median frame	16.7ms (p95 17.5ms)
Reactivity	67ms median, 83ms p95	16.7ms (p95 17.1ms)

After the runs, the same row and node elements are still on the page, and the ticker-frame node's value updated in place.

Drawing 200 boxes, the cap for one frame:

Rendering	Main-thread time
200 divs (create, append, layout)	3.7ms median, 6.8ms max
One canvas redraw of 200 boxes	0.7ms median, 2.2ms max

Checks

• Local: build pass, 143 unit tests pass, typecheck pass, format pass, publint and attw pass, 14 e2e tests pass.
• The highlight e2e test reads the canvas pixels: the middle of the changed text is blue after the first update and purple after the second, and the button padding beside the text stays transparent.

Roadmap

• none

Cost

• clone.ts (296 lines) and overlay.css are removed. Net diff without the demo: +441 and -767 lines.
• No new dependencies.

Risk

• Boxes are measured when the update happens. If the layout moves before the 400ms fade ends, for example during a resize, a box can sit on a stale position until that node updates again.
• Scrolls of inner scroll containers are not followed, only window scrolls.
• The keyed lists now update rows in place. Expanding, selecting and the "fresh" marker are covered by the existing e2e tests.

Not done

• The Worker and OffscreenCanvas path. At 200 boxes per frame it would move about 0.7ms per frame off the main thread, and it needs a fallback for pages whose CSP blocks blob: workers.
• Component name labels on the boxes. These can use the node-to-component lookup from feat(inspector): add interactive element inspector and cross-panel component funnel #34 once it merges.

🤖 Generated with Claude Code