fix: implement trace hover highlighting

[akramcodez]

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

Problem

When hovering over traces in the schematic viewer, only the specific segment under the cursor was highlighted.
Users need to see the entire electrical net (all connected traces) to properly visualize connections such as VCC, GND, or signal paths.

Solution

This PR implements net-based connectivity highlighting.

Previous attempts (PR #142 and PR #118) used unreliable fields such as net_id or subcircuit keys.
This implementation uses the correct source of truth for electrical connectivity:
source_trace.connected_source_net_ids.

Demo Video

video.mov

Technical Implementation

Algorithm

1. Identify source
   Map the hovered schematic_trace_id to its corresponding source_trace.

2. Extract nets
   Retrieve connected_source_net_ids from the source trace.

3. Find related traces
   Query the circuit-json graph to find all other source_traces that share these Net IDs.

4. Highlight
   Map the results back to schematic_trace_ids and apply CSS highlighting.

Key Changes

• lib/utils/trace-connectivity.ts
  Added core logic to traverse the circuit-json graph and identify connected components.

• lib/hooks/useConnectedTracesHoverHighlighting.ts
  Manages hover event listeners on SVG elements.
  Adds a 50ms debounce to avoid flickering.
  Injects CSS for dynamic highlighting.
  Uses a MutationObserver to support dynamic SVG updates.

• lib/components/SchematicViewer.tsx
  Integrated the hook and ensured it is disabled during edit mode.

Visual Design

• Color: #ff6b35
• Stroke width: 3px
• Drop-shadow glow effect
• Smooth transitions (0.15s)
• Pointer cursor on hover

Result

Hovering over any trace now highlights the entire connected electrical net, improving clarity and readability for schematic analysis.

[vercel]

@akramcodez is attempting to deploy a commit to the tscircuit Team on Vercel.

A member of the Team first needs to authorize it.

[akramcodez]

PTAL @nailoo

[Excellencedev]

/claim [tscircuit/tscircuit#1130]

There's no more bounties @akramcodez
Welcome to open source

[akramcodez]

@Excellencedev not matters for me, I just want to contribute.

[rushabhcodes]

Use the repro give https://tscircuit.com/MrPicklePinosaur/tscircuit_demo#schematic to demonstrate your fix

[akramcodez]

@rushabhcodes I couldn’t find the demo at that link, so I used the example12-spice-boost-converter example to show the fix. Can you help me find one with the exact URL?

The examples labeled 15 and 16 are ones I created locally for testing.

[rushabhcodes]

This does no fixes the issue, please understand the issue first

[rushabhcodes]

@akramcodez
Here trace going to the right should also get highlighted as it is the part of same net