feat: PortIndicators SVG component

[ggfevans]

Parent Epic

Part of #71 (Network Interface Visualization and Connectivity)

Summary

Create a reusable Svelte component that renders network interface port indicators on device SVG elements.

Acceptance Criteria

• Create PortIndicators.svelte component
• Render SVG circles for each interface (color-coded by type)
• Support low-density mode (individual ports) and high-density mode (grouped badges)
• Include management interface indicator (inner dot)
• Include PoE indicator for PSE interfaces
• Use foreignObject overlays for click targets
• Support position: 'front' | 'rear' filtering
• Respect showPorts toggle prop

Props Interface

interface Props {
  interfaces: InterfaceTemplate[];
  deviceWidth: number;
  deviceHeight: number;
  rackView: 'front' | 'rear';
  showPorts?: boolean;
  onPortClick?: (iface: InterfaceTemplate) => void;
}

Color Scheme

Type	Color	Hex
1000base-t	Emerald	#10b981
10gbase-t	Blue	#3b82f6
10gbase-x-sfpp	Purple	#8b5cf6
25gbase-x-sfp28	Amber	#f59e0b
40gbase-x-qsfpp	Red	#ef4444
100gbase-x-qsfp28	Pink	#ec4899

Dependencies

• feat: expand InterfaceTemplate type and Zod schema #247 (InterfaceTemplate schema)
• spike: port layout algorithm for high-density devices #248 (Port layout algorithm)

References

• Prototype: docs/research/prototype-port-indicators.svelte