feat: Implement interactive map views

Create interactive map views using SVG for nodes and connections. Implement navigation to region and system pages on click.

src/components/MapNode.tsx

@@ -0,0 +1,95 @@
+
+import React, { useState } from 'react';
+
+interface MapNodeProps {
+  id: string;
+  name: string;
+  position: { x: number; y: number };
+  onClick: () => void;
+  onMouseDown: () => void;
+  isDragging: boolean;
+  type: 'region' | 'system';
+}
+
+export const MapNode: React.FC<MapNodeProps> = ({
+  id,
+  name,
+  position,
+  onClick,
+  onMouseDown,
+  isDragging,
+  type
+}) => {
+  const [isHovered, setIsHovered] = useState(false);
+  
+  const nodeSize = type === 'region' ? 12 : 8;
+  const textOffset = type === 'region' ? 20 : 15;
+  
+  const nodeColor = type === 'region' 
+    ? (isHovered ? '#8b5cf6' : '#a855f7')
+    : (isHovered ? '#06b6d4' : '#0891b2');
+
+  return (
+    <g
+      transform={`translate(${position.x}, ${position.y})`}
+      className="cursor-pointer select-none"
+      onMouseEnter={() => setIsHovered(true)}
+      onMouseLeave={() => setIsHovered(false)}
+      onMouseDown={(e) => {
+        e.preventDefault();
+        onMouseDown();
+      }}
+      onClick={(e) => {
+        e.stopPropagation();
+        if (!isDragging) {
+          onClick();
+        }
+      }}
+    >
+      {/* Node glow effect */}
+      <circle
+        r={nodeSize + 6}
+        fill={nodeColor}
+        opacity={isHovered ? 0.3 : 0.1}
+        filter="url(#glow)"
+        className="transition-all duration-300"
+      />
+      
+      {/* Main node */}
+      <circle
+        r={nodeSize}
+        fill={nodeColor}
+        stroke="#ffffff"
+        strokeWidth="2"
+        filter="url(#glow)"
+        className={`transition-all duration-300 ${
+          isHovered ? 'drop-shadow-lg' : ''
+        } ${isDragging ? 'opacity-80' : ''}`}
+      />
+      
+      {/* Inner core */}
+      <circle
+        r={nodeSize - 4}
+        fill={isHovered ? '#ffffff' : nodeColor}
+        opacity={0.8}
+        className="transition-all duration-300"
+      />
+      
+      {/* Node label */}
+      <text
+        x="0"
+        y={textOffset}
+        textAnchor="middle"
+        fill="#ffffff"
+        fontSize={type === 'region' ? '14' : '12'}
+        fontWeight="bold"
+        className={`transition-all duration-300 ${
+          isHovered ? 'fill-purple-200' : 'fill-white'
+        } pointer-events-none select-none`}
+        style={{ textShadow: '2px 2px 4px rgba(0,0,0,0.8)' }}
+      >
+        {name}
+      </text>
+    </g>
+  );
+};