Implement shared packages (tasks 2.1-2.6)

- @trails-cool/types: Route, Activity, Waypoint, RouteVersion, RouteMetadata
- @trails-cool/gpx: GPX parser (XML→waypoints/tracks/elevation) and generator
  with round-trip test, haversine distance, elevation gain/loss computation
- @trails-cool/map: MapView (Leaflet + OSM/OpenTopoMap/CyclOSM layer switcher),
  RouteLayer (GeoJSON polyline rendering)
- @trails-cool/ui: Button (primary/secondary/ghost), Input (with label/error),
  Card components with Tailwind styling
- @trails-cool/i18n: react-i18next config with English + German translations,
  browser language detection, fallback to English

All 13 unit tests pass. Both apps build successfully.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

packages/map/src/MapView.tsx

@@ -0,0 +1,34 @@
+import { MapContainer, TileLayer, LayersControl } from "react-leaflet";
+import { baseLayers } from "./layers";
+import "leaflet/dist/leaflet.css";
+
+export interface MapViewProps {
+  center?: [number, number];
+  zoom?: number;
+  className?: string;
+  children?: React.ReactNode;
+}
+
+export function MapView({
+  center = [50.1, 10.0],
+  zoom = 6,
+  className = "h-full w-full",
+  children,
+}: MapViewProps) {
+  return (
+    <MapContainer center={center} zoom={zoom} className={className}>
+      <LayersControl position="topright">
+        {baseLayers.map((layer, i) => (
+          <LayersControl.BaseLayer key={layer.name} checked={i === 0} name={layer.name}>
+            <TileLayer
+              url={layer.url}
+              attribution={layer.attribution}
+              maxZoom={layer.maxZoom}
+            />
+          </LayersControl.BaseLayer>
+        ))}
+      </LayersControl>
+      {children}
+    </MapContainer>
+  );
+}

packages/map/src/RouteLayer.tsx

@@ -0,0 +1,18 @@
+import { GeoJSON } from "react-leaflet";
+import type { GeoJsonObject } from "geojson";
+
+export interface RouteLayerProps {
+  data: GeoJsonObject;
+  color?: string;
+  weight?: number;
+}
+
+export function RouteLayer({ data, color = "#2563eb", weight = 4 }: RouteLayerProps) {
+  return (
+    <GeoJSON
+      key={JSON.stringify(data)}
+      data={data}
+      style={{ color, weight, opacity: 0.8 }}
+    />
+  );
+}

packages/map/src/index.ts

@@ -1,5 +1,6 @@
-/**
- * Map rendering utilities for trails.cool
- * Leaflet wrappers, tile layer configs, overlay management
- */
-export {};
+export { MapView } from "./MapView";
+export type { MapViewProps } from "./MapView";
+export { RouteLayer } from "./RouteLayer";
+export type { RouteLayerProps } from "./RouteLayer";
+export { baseLayers } from "./layers";
+export type { TileLayerConfig } from "./layers";

packages/map/src/layers.ts

@@ -0,0 +1,29 @@
+export interface TileLayerConfig {
+  name: string;
+  url: string;
+  attribution: string;
+  maxZoom?: number;
+}
+
+export const baseLayers: TileLayerConfig[] = [
+  {
+    name: "OpenStreetMap",
+    url: "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
+    attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>',
+    maxZoom: 19,
+  },
+  {
+    name: "OpenTopoMap",
+    url: "https://{s}.tile.opentopomap.org/{z}/{x}/{y}.png",
+    attribution:
+      '&copy; <a href="https://opentopomap.org">OpenTopoMap</a> (<a href="https://creativecommons.org/licenses/by-sa/3.0/">CC-BY-SA</a>)',
+    maxZoom: 17,
+  },
+  {
+    name: "CyclOSM",
+    url: "https://{s}.tile-cyclosm.openstreetmap.fr/cyclosm/{z}/{x}/{y}.png",
+    attribution:
+      '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> &copy; <a href="https://github.com/cyclosm/cyclosm-cartocss-style/releases">CyclOSM</a>',
+    maxZoom: 20,
+  },
+];