Add tunnel component and map connector component

src/lib/components/mapIcons/Tunnel.svelte

@@ -0,0 +1,56 @@
+<script lang="ts">
+    import BaseTrack from "./BaseTrack.svelte";
+
+    export let feature: {
+        tunnelType: "start" | "whole" | "end";
+        length: string;
+    };
+
+    export let activeElec: any;
+
+    export let reversed: boolean = false;
+
+    const portalColour = "#475569"; // Slate grey
+
+    $: effectiveType = (() => {
+        if (!reversed || feature.tunnelType === 'whole') return feature.tunnelType;
+        return feature.tunnelType === 'start' ? 'end' : 'start';
+    })();
+</script>
+
+<svg viewBox="0 0 64 64" width="64" height="64" class="tunnel">
+    <BaseTrack {activeElec} height={64} />
+
+    <g fill="none" stroke={portalColour} stroke-width="3" stroke-linecap="round">
+        {#if effectiveType === 'whole'}
+            <path d="M 16 12 Q 32 24 48 12" />
+            <path d="M 16 52 Q 32 40 48 52" />
+
+        {:else if effectiveType === 'start'}
+            <path d="M 16 12 Q 32 24 48 12" />
+
+        {:else if effectiveType === 'end'}
+            <path d="M 16 52 Q 32 40 48 52" />
+        {/if}
+    </g>
+
+    {#if feature.tunnelType === 'whole' && feature.length}
+        <rect x="12" y="26" width="40" height="12" fill="white" />
+        <text 
+            x="32" 
+            y="35" 
+            text-anchor="middle" 
+            font-size="8.5" 
+            font-weight="bold" 
+            fill={portalColour} 
+            class="t-text"
+        >
+            {feature.length}
+        </text>
+    {/if}
+</svg>
+
+<style>
+    svg { display: block; overflow: visible; }
+    .t-text { font-family: ui-monospace, monospace; }
+</style>