Highlight connected schematic traces on hover

[DevvoZA]

Fixes tscircuit/tscircuit#1130

/claim tscircuit/tscircuit#1130
/fixes tscircuit/tscircuit#1130

Summary

• Add a hook that tracks hovered schematic traces and applies hover styling to every trace connected to the same source net.
• Group traces using source trace, source net, source port, and connectivity-map metadata so same-net traces are highlighted together across Circuit JSON variants.
• Add focused tests for source-net, source-port, and subcircuit connectivity-key trace grouping.
• Add a same-net hover fixture so the behavior can be checked in the preview.
• Reuse the existing hover visual behavior by applying the same invert filter and crossing-outline opacity styling.

Validation

• npm exec -- biome format --write examples/example21-same-net-trace-hover.fixture.tsx lib/components/SchematicViewer.tsx lib/hooks/useHighlightConnectedSchematicTraces.ts tests/useHighlightConnectedSchematicTraces.test.ts
• npx -y bun test tests/useHighlightConnectedSchematicTraces.test.ts
• npx -y -p typescript@5.9.3 tsc --noEmit
• npm exec -- tsup --config tsup-webworker.config.ts && npx -y tsx scripts/build-worker-blob-url.ts && npm exec -- tsup-node ./lib/index.ts --dts --format esm --sourcemap

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
schematic-viewer	Ready	Preview, Comment	May 11, 2026 10:12pm