fixes: tscircuit/tscircuit#1130 /claim https://github.com/tscircuit/tscircuit/issues/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

https://github.com/user-attachments/assets/3aaeaf7e-d640-4cb9-83ab-ae8e520bc228

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.