improve layer stacking

* New translations en.json (Dutch)

* New translations en.json (Czech)

* New translations en.json (Spanish)

* New translations file.mdx (Vietnamese)

* New translations en.json (Polish)

.github/workflows/deploy.yml

@@ -1,63 +1,63 @@
 name: Deploy to GitHub Pages
 on:
-  push:
-    branches: 'main'
+    push:
+        branches: 'main'
 
 jobs:
-  build_site:
-    runs-on: ubuntu-latest
-    steps:
-      - name: Checkout
-        uses: actions/checkout@v4
+    build_site:
+        runs-on: ubuntu-latest
+        steps:
+            - name: Checkout
+              uses: actions/checkout@v5
 
-      - name: Install Node.js
-        uses: actions/setup-node@v4
-        with:
-          node-version: 20
-          cache: npm
-          cache-dependency-path: |
-            gpx/package-lock.json
-            website/package-lock.json
-      
-      - name: Install dependencies for gpx
-        run: npm install --prefix gpx
+            - name: Install Node.js
+              uses: actions/setup-node@v6
+              with:
+                  node-version: 24
+                  cache: npm
+                  cache-dependency-path: |
+                      gpx/package-lock.json
+                      website/package-lock.json
 
-      - name: Build gpx
-        run: npm run build --prefix gpx
+            - name: Install dependencies for gpx
+              run: npm install --prefix gpx
 
-      - name: Install dependencies for website
-        run: npm install --prefix website
+            - name: Build gpx
+              run: npm run build --prefix gpx
 
-      - name: Create env file
-        run: |
-          touch website/.env
-          echo PUBLIC_MAPBOX_TOKEN=${{ secrets.PUBLIC_MAPBOX_TOKEN }} >> website/.env
-          cat website/.env
+            - name: Install dependencies for website
+              run: npm install --prefix website
 
-      - name: Build website
-        env:
-          BASE_PATH: ''
-        run: |
-          npm run build --prefix website
+            - name: Create env file
+              run: |
+                  touch website/.env
+                  echo PUBLIC_MAPBOX_TOKEN=${{ secrets.PUBLIC_MAPBOX_TOKEN }} >> website/.env
+                  cat website/.env
 
-      - name: Upload Artifacts
-        uses: actions/upload-pages-artifact@v3
-        with:
-          path: 'website/build/'
+            - name: Build website
+              env:
+                  BASE_PATH: ''
+              run: |
+                  npm run build --prefix website
 
-  deploy:
-    needs: build_site
-    runs-on: ubuntu-latest
+            - name: Upload Artifacts
+              uses: actions/upload-pages-artifact@v4
+              with:
+                  path: 'website/build/'
 
-    permissions:
-      pages: write
-      id-token: write
+    deploy:
+        needs: build_site
+        runs-on: ubuntu-latest
 
-    environment:
-      name: github-pages
-      url: ${{ steps.deployment.outputs.page_url }}
+        permissions:
+            pages: write
+            id-token: write
 
-    steps:
-    - name: Deploy
-      id: deployment
-      uses: actions/deploy-pages@v4
+        environment:
+            name: github-pages
+            url: ${{ steps.deployment.outputs.page_url }}
+
+        steps:
+            - name: Deploy
+              id: deployment
+              uses: actions/deploy-pages@v4

.prettierignore

@@ -1,6 +1,3 @@
-# Ignore files for PNPM, NPM and YARN
-pnpm-lock.yaml
-package-lock.json
-yarn.lock
-src/lib/components/ui
-*.mdx
+website/src/lib/components/ui
+website/src/lib/docs/**/*.mdx
+**/*.webmanifest

LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2024 gpx.studio
+Copyright (c) 2026 gpx.studio
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

gpx/package.json

@@ -25,7 +25,7 @@
     "scripts": {
         "build": "tsc",
         "postinstall": "npm run build",
-        "lint": "prettier --check . && eslint .",
-        "format": "prettier --write ."
+        "lint": "prettier --check . --config ../.prettierrc && eslint .",
+        "format": "prettier --write . --config ../.prettierrc"
     }
 }

gpx/src/gpx.ts

@@ -1,4 +1,5 @@
 import { ramerDouglasPeucker } from './simplify';
+import { GPXStatistics, GPXStatisticsGroup, TrackPointLocalStatistics } from './statistics';
 import {
     Coordinates,
     GPXFileAttributes,
@@ -17,6 +18,9 @@ import {
 import { immerable, isDraft, original, freeze } from 'immer';
 
 function cloneJSON<T>(obj: T): T {
+    if (obj === undefined) {
+        return undefined;
+    }
     if (obj === null || typeof obj !== 'object') {
         return null;
     }
@@ -33,7 +37,6 @@ export abstract class GPXTreeElement<T extends GPXTreeElement<any>> {
     abstract getNumberOfTrackPoints(): number;
     abstract getStartTimestamp(): Date | undefined;
     abstract getEndTimestamp(): Date | undefined;
-    abstract getStatistics(): GPXStatistics;
     abstract getSegments(): TrackSegment[];
     abstract getTrackPoints(): TrackPoint[];
 
@@ -73,14 +76,6 @@ abstract class GPXTreeNode<T extends GPXTreeElement<any>> extends GPXTreeElement
         return this.children[this.children.length - 1].getEndTimestamp();
     }
 
-    getStatistics(): GPXStatistics {
-        let statistics = new GPXStatistics();
-        for (let child of this.children) {
-            statistics.mergeWith(child.getStatistics());
-        }
-        return statistics;
-    }
-
     getSegments(): TrackSegment[] {
         return this.children.flatMap((child) => child.getSegments());
     }
@@ -145,7 +140,9 @@ export class GPXFile extends GPXTreeNode<Track> {
                     },
                 },
             };
-            this.wpt = gpx.wpt ? gpx.wpt.map((waypoint) => new Waypoint(waypoint)) : [];
+            this.wpt = gpx.wpt
+                ? gpx.wpt.map((waypoint, index) => new Waypoint(waypoint, index))
+                : [];
             this.trk = gpx.trk ? gpx.trk.map((track) => new Track(track)) : [];
             if (gpx.rte && gpx.rte.length > 0) {
                 this.trk = this.trk.concat(gpx.rte.map((route) => convertRouteToTrack(route)));
@@ -183,9 +180,6 @@ export class GPXFile extends GPXTreeNode<Track> {
                 segment._data['segmentIndex'] = segmentIndex;
             });
         });
-        this.wpt.forEach((waypoint, waypointIndex) => {
-            waypoint._data['index'] = waypointIndex;
-        });
     }
 
     get children(): Array<Track> {
@@ -206,8 +200,16 @@ export class GPXFile extends GPXTreeNode<Track> {
         });
     }
 
+    getStatistics(): GPXStatisticsGroup {
+        let statistics = new GPXStatisticsGroup();
+        this.forEachSegment((segment) => {
+            statistics.add(segment.getStatistics());
+        });
+        return statistics;
+    }
+
     getStyle(defaultColor?: string): MergedLineStyles {
-        return this.trk
+        const style = this.trk
             .map((track) => track.getStyle())
             .reduce(
                 (acc, style) => {
@@ -217,8 +219,6 @@ export class GPXFile extends GPXTreeNode<Track> {
                         !acc.color.includes(style['gpx_style:color'])
                     ) {
                         acc.color.push(style['gpx_style:color']);
-                    } else if (defaultColor && !acc.color.includes(defaultColor)) {
-                        acc.color.push(defaultColor);
                     }
                     if (
                         style &&
@@ -242,6 +242,10 @@ export class GPXFile extends GPXTreeNode<Track> {
                     width: [],
                 }
             );
+        if (style.color.length === 0 && defaultColor) {
+            style.color.push(defaultColor);
+        }
+        return style;
     }
 
     clone(): GPXFile {
@@ -804,7 +808,7 @@ export class TrackSegment extends GPXTreeLeaf {
     constructor(segment?: (TrackSegmentType & { _data?: any }) | TrackSegment) {
         super();
         if (segment) {
-            this.trkpt = segment.trkpt.map((point) => new TrackPoint(point));
+            this.trkpt = segment.trkpt.map((point, index) => new TrackPoint(point, index));
             if (segment.hasOwnProperty('_data')) {
                 this._data = segment._data;
             }
@@ -816,15 +820,12 @@ export class TrackSegment extends GPXTreeLeaf {
     _computeStatistics(): GPXStatistics {
         let statistics = new GPXStatistics();
 
-        statistics.local.points = this.trkpt.map((point) => point);
-
-        statistics.local.elevation.smoothed = this._computeSmoothedElevation();
-        statistics.local.slope.at = this._computeSlope();
+        statistics.global.length = this.trkpt.length;
+        statistics.local.points = this.trkpt.slice(0);
+        statistics.local.data = this.trkpt.map(() => new TrackPointLocalStatistics());
 
         const points = this.trkpt;
         for (let i = 0; i < points.length; i++) {
-            points[i]._data['index'] = i;
-
             // distance
             let dist = 0;
             if (i > 0) {
@@ -833,34 +834,18 @@ export class TrackSegment extends GPXTreeLeaf {
                 statistics.global.distance.total += dist;
             }
 
-            statistics.local.distance.total.push(statistics.global.distance.total);
-
-            // elevation
-            if (i > 0) {
-                const ele =
-                    statistics.local.elevation.smoothed[i] -
-                    statistics.local.elevation.smoothed[i - 1];
-                if (ele > 0) {
-                    statistics.global.elevation.gain += ele;
-                } else if (ele < 0) {
-                    statistics.global.elevation.loss -= ele;
-                }
-            }
-
-            statistics.local.elevation.gain.push(statistics.global.elevation.gain);
-            statistics.local.elevation.loss.push(statistics.global.elevation.loss);
+            statistics.local.data[i].distance.total = statistics.global.distance.total;
 
             // time
             if (points[i].time === undefined) {
-                statistics.local.time.total.push(0);
+                statistics.local.data[i].time.total = 0;
             } else {
                 if (statistics.global.time.start === undefined) {
                     statistics.global.time.start = points[i].time;
                 }
                 statistics.global.time.end = points[i].time;
-                statistics.local.time.total.push(
-                    (points[i].time.getTime() - statistics.global.time.start.getTime()) / 1000
-                );
+                statistics.local.data[i].time.total =
+                    (points[i].time.getTime() - statistics.global.time.start.getTime()) / 1000;
             }
 
             // speed
@@ -875,8 +860,8 @@ export class TrackSegment extends GPXTreeLeaf {
                 }
             }
 
-            statistics.local.distance.moving.push(statistics.global.distance.moving);
-            statistics.local.time.moving.push(statistics.global.time.moving);
+            statistics.local.data[i].distance.moving = statistics.global.distance.moving;
+            statistics.local.data[i].time.moving = statistics.global.time.moving;
 
             // bounds
             statistics.global.bounds.southWest.lat = Math.min(
@@ -960,8 +945,7 @@ export class TrackSegment extends GPXTreeLeaf {
             }
         }
 
-        [statistics.local.slope.segment, statistics.local.slope.length] =
-            this._computeSlopeSegments(statistics);
+        this._elevationComputation(statistics);
 
         statistics.global.time.total =
             statistics.global.time.start && statistics.global.time.end
@@ -977,73 +961,115 @@ export class TrackSegment extends GPXTreeLeaf {
                 ? statistics.global.distance.moving / (statistics.global.time.moving / 3600)
                 : 0;
 
-        statistics.local.speed = distanceWindowSmoothingWithDistanceAccumulator(
+        timeWindowSmoothing(
             points,
-            200,
-            (accumulated, start, end) =>
+            10000,
+            (start, end) =>
                 points[start].time && points[end].time
-                    ? (3600 * accumulated) /
-                      (points[end].time.getTime() - points[start].time.getTime())
-                    : undefined
+                    ? (3600 *
+                          (statistics.local.data[end].distance.total -
+                              statistics.local.data[start].distance.total)) /
+                      Math.max(
+                          (points[end].time.getTime() - points[start].time.getTime()) / 1000,
+                          1
+                      )
+                    : undefined,
+            (value, index) => {
+                statistics.local.data[index].speed = value;
+            }
         );
 
         return statistics;
     }
 
-    _computeSmoothedElevation(): number[] {
-        const points = this.trkpt;
-
-        let smoothed = distanceWindowSmoothing(
-            points,
-            100,
-            (index) => points[index].ele ?? 0,
-            (accumulated, start, end) => accumulated / (end - start + 1)
-        );
-
-        if (points.length > 0) {
-            smoothed[0] = points[0].ele ?? 0;
-            smoothed[points.length - 1] = points[points.length - 1].ele ?? 0;
-        }
-
-        return smoothed;
-    }
-
-    _computeSlope(): number[] {
-        const points = this.trkpt;
-
-        return distanceWindowSmoothingWithDistanceAccumulator(
-            points,
-            50,
-            (accumulated, start, end) =>
-                (100 * ((points[end].ele ?? 0) - (points[start].ele ?? 0))) /
-                (accumulated > 0 ? accumulated : 1)
-        );
-    }
-
-    _computeSlopeSegments(statistics: GPXStatistics): [number[], number[]] {
+    _elevationComputation(statistics: GPXStatistics) {
         let simplified = ramerDouglasPeucker(
             this.trkpt,
             20,
             getElevationDistanceFunction(statistics)
         );
 
-        let slope = [];
-        let length = [];
+        for (let i = 0; i < simplified.length - 1; i++) {
+            let start = simplified[i].point._data.index;
+            let end = simplified[i + 1].point._data.index;
+
+            let cumulEle = 0;
+            let currentStart = start;
+            let currentEnd = start;
+            let prevSmoothedEle = 0;
+            distanceWindowSmoothing(
+                start,
+                end + 1,
+                statistics,
+                0.1,
+                (s, e) => {
+                    for (let i = currentStart; i < s; i++) {
+                        cumulEle -= this.trkpt[i].ele ?? 0;
+                    }
+                    for (let i = currentEnd; i <= e; i++) {
+                        cumulEle += this.trkpt[i].ele ?? 0;
+                    }
+                    currentStart = s;
+                    currentEnd = e + 1;
+                    return cumulEle / (e - s + 1);
+                },
+                (smoothedEle, j) => {
+                    if (j === start) {
+                        smoothedEle = this.trkpt[start].ele ?? 0;
+                        prevSmoothedEle = smoothedEle;
+                    } else if (j === end) {
+                        smoothedEle = this.trkpt[end].ele ?? 0;
+                    }
+                    const ele = smoothedEle - prevSmoothedEle;
+                    if (ele > 0) {
+                        statistics.global.elevation.gain += ele;
+                    } else if (ele < 0) {
+                        statistics.global.elevation.loss -= ele;
+                    }
+                    prevSmoothedEle = smoothedEle;
+                    if (j < end) {
+                        statistics.local.data[j].elevation.gain = statistics.global.elevation.gain;
+                        statistics.local.data[j].elevation.loss = statistics.global.elevation.loss;
+                    }
+                }
+            );
+        }
+        if (statistics.global.length > 0) {
+            statistics.local.data[statistics.global.length - 1].elevation.gain =
+                statistics.global.elevation.gain;
+            statistics.local.data[statistics.global.length - 1].elevation.loss =
+                statistics.global.elevation.loss;
+        }
 
         for (let i = 0; i < simplified.length - 1; i++) {
             let start = simplified[i].point._data.index;
             let end = simplified[i + 1].point._data.index;
             let dist =
-                statistics.local.distance.total[end] - statistics.local.distance.total[start];
+                statistics.local.data[end].distance.total -
+                statistics.local.data[start].distance.total;
             let ele = (simplified[i + 1].point.ele ?? 0) - (simplified[i].point.ele ?? 0);
-
             for (let j = start; j < end + (i + 1 === simplified.length - 1 ? 1 : 0); j++) {
-                slope.push((0.1 * ele) / dist);
-                length.push(dist);
+                statistics.local.data[j].slope.segment = (0.1 * ele) / dist;
+                statistics.local.data[j].slope.length = dist;
             }
         }
 
-        return [slope, length];
+        distanceWindowSmoothing(
+            0,
+            this.trkpt.length,
+            statistics,
+            0.05,
+            (start, end) => {
+                const ele = this.trkpt[end].ele - this.trkpt[start].ele || 0;
+                const dist =
+                    statistics.local.data[end].distance.total -
+                    statistics.local.data[start].distance.total;
+                return dist > 0 ? (0.1 * ele) / dist : 0;
+            },
+            (value, index) => {
+                statistics.local.data[index].slope.at = value;
+            }
+        );
     }
 
     getNumberOfTrackPoints(): number {
@@ -1290,8 +1316,8 @@ export class TrackSegment extends GPXTreeLeaf {
         lastPoint: TrackPoint | undefined
     ) {
         let og = getOriginal(this); // Read as much as possible from the original object because it is faster
-        let slope = og._computeSlope();
-        let trkpt = withArtificialTimestamps(og.trkpt, totalTime, lastPoint, startTime, slope);
+        let statistics = og._computeStatistics();
+        let trkpt = withArtificialTimestamps(og.trkpt, totalTime, lastPoint, startTime, statistics);
         this.trkpt = freeze(trkpt); // Pre-freeze the array, faster as well
     }
 
@@ -1300,6 +1326,7 @@ export class TrackSegment extends GPXTreeLeaf {
     }
 }
 
+const emptyExtensions: Record<string, string> = {};
 export class TrackPoint {
     [immerable] = true;
 
@@ -1310,7 +1337,7 @@ export class TrackPoint {
 
     _data: { [key: string]: any } = {};
 
-    constructor(point: (TrackPointType & { _data?: any }) | TrackPoint) {
+    constructor(point: (TrackPointType & { _data?: any }) | TrackPoint, index?: number) {
         this.attributes = point.attributes;
         this.ele = point.ele;
         this.time = point.time;
@@ -1318,6 +1345,9 @@ export class TrackPoint {
         if (point.hasOwnProperty('_data')) {
             this._data = point._data;
         }
+        if (index !== undefined) {
+            this._data.index = index;
+        }
     }
 
     getCoordinates(): Coordinates {
@@ -1391,7 +1421,7 @@ export class TrackPoint {
             this.extensions['gpxtpx:TrackPointExtension'] &&
             this.extensions['gpxtpx:TrackPointExtension']['gpxtpx:Extensions']
             ? this.extensions['gpxtpx:TrackPointExtension']['gpxtpx:Extensions']
-            : {};
+            : emptyExtensions;
     }
 
     toTrackPointType(exclude: string[] = []): TrackPointType {
@@ -1461,11 +1491,18 @@ export class TrackPoint {
 
     clone(): TrackPoint {
         return new TrackPoint({
-            attributes: cloneJSON(this.attributes),
+            attributes: {
+                lat: this.attributes.lat,
+                lon: this.attributes.lon,
+            },
             ele: this.ele,
             time: this.time ? new Date(this.time.getTime()) : undefined,
-            extensions: cloneJSON(this.extensions),
-            _data: cloneJSON(this._data),
+            extensions: this.extensions ? cloneJSON(this.extensions) : undefined,
+            _data: {
+                index: this._data?.index,
+                anchor: this._data?.anchor,
+                zoom: this._data?.zoom,
+            },
         });
     }
 }
@@ -1484,19 +1521,28 @@ export class Waypoint {
     type?: string;
     _data: { [key: string]: any } = {};
 
-    constructor(waypoint: (WaypointType & { _data?: any }) | Waypoint) {
+    constructor(waypoint: (WaypointType & { _data?: any }) | Waypoint, index?: number) {
         this.attributes = waypoint.attributes;
         this.ele = waypoint.ele;
         this.time = waypoint.time;
-        this.name = waypoint.name;
-        this.cmt = waypoint.cmt;
-        this.desc = waypoint.desc;
-        this.link = waypoint.link;
-        this.sym = waypoint.sym;
-        this.type = waypoint.type;
+        this.name = waypoint.name === '' ? undefined : waypoint.name;
+        this.cmt = waypoint.cmt === '' ? undefined : waypoint.cmt;
+        this.desc = waypoint.desc === '' ? undefined : waypoint.desc;
+        this.link =
+            !waypoint.link ||
+            !waypoint.link.attributes ||
+            !waypoint.link.attributes.href ||
+            waypoint.link.attributes.href === ''
+                ? undefined
+                : waypoint.link;
+        this.sym = waypoint.sym === '' ? undefined : waypoint.sym;
+        this.type = waypoint.type === '' ? undefined : waypoint.type;
         if (waypoint.hasOwnProperty('_data')) {
             this._data = waypoint._data;
         }
+        if (index !== undefined) {
+            this._data.index = index;
+        }
     }
 
     getCoordinates(): Coordinates {
@@ -1544,7 +1590,10 @@ export class Waypoint {
 
     clone(): Waypoint {
         return new Waypoint({
-            attributes: cloneJSON(this.attributes),
+            attributes: {
+                lat: this.attributes.lat,
+                lon: this.attributes.lon,
+            },
             ele: this.ele,
             time: this.time ? new Date(this.time.getTime()) : undefined,
             name: this.name,
@@ -1593,310 +1642,6 @@ export class Waypoint {
     }
 }
 
-export class GPXStatistics {
-    global: {
-        distance: {
-            moving: number;
-            total: number;
-        };
-        time: {
-            start: Date | undefined;
-            end: Date | undefined;
-            moving: number;
-            total: number;
-        };
-        speed: {
-            moving: number;
-            total: number;
-        };
-        elevation: {
-            gain: number;
-            loss: number;
-        };
-        bounds: {
-            southWest: Coordinates;
-            northEast: Coordinates;
-        };
-        atemp: {
-            avg: number;
-            count: number;
-        };
-        hr: {
-            avg: number;
-            count: number;
-        };
-        cad: {
-            avg: number;
-            count: number;
-        };
-        power: {
-            avg: number;
-            count: number;
-        };
-        extensions: Record<string, Record<string, number>>;
-    };
-    local: {
-        points: TrackPoint[];
-        distance: {
-            moving: number[];
-            total: number[];
-        };
-        time: {
-            moving: number[];
-            total: number[];
-        };
-        speed: number[];
-        elevation: {
-            smoothed: number[];
-            gain: number[];
-            loss: number[];
-        };
-        slope: {
-            at: number[];
-            segment: number[];
-            length: number[];
-        };
-    };
-
-    constructor() {
-        this.global = {
-            distance: {
-                moving: 0,
-                total: 0,
-            },
-            time: {
-                start: undefined,
-                end: undefined,
-                moving: 0,
-                total: 0,
-            },
-            speed: {
-                moving: 0,
-                total: 0,
-            },
-            elevation: {
-                gain: 0,
-                loss: 0,
-            },
-            bounds: {
-                southWest: {
-                    lat: 90,
-                    lon: 180,
-                },
-                northEast: {
-                    lat: -90,
-                    lon: -180,
-                },
-            },
-            atemp: {
-                avg: 0,
-                count: 0,
-            },
-            hr: {
-                avg: 0,
-                count: 0,
-            },
-            cad: {
-                avg: 0,
-                count: 0,
-            },
-            power: {
-                avg: 0,
-                count: 0,
-            },
-            extensions: {},
-        };
-        this.local = {
-            points: [],
-            distance: {
-                moving: [],
-                total: [],
-            },
-            time: {
-                moving: [],
-                total: [],
-            },
-            speed: [],
-            elevation: {
-                smoothed: [],
-                gain: [],
-                loss: [],
-            },
-            slope: {
-                at: [],
-                segment: [],
-                length: [],
-            },
-        };
-    }
-
-    mergeWith(other: GPXStatistics): void {
-        this.local.points = this.local.points.concat(other.local.points);
-
-        this.local.distance.total = this.local.distance.total.concat(
-            other.local.distance.total.map((distance) => distance + this.global.distance.total)
-        );
-        this.local.distance.moving = this.local.distance.moving.concat(
-            other.local.distance.moving.map((distance) => distance + this.global.distance.moving)
-        );
-        this.local.time.total = this.local.time.total.concat(
-            other.local.time.total.map((time) => time + this.global.time.total)
-        );
-        this.local.time.moving = this.local.time.moving.concat(
-            other.local.time.moving.map((time) => time + this.global.time.moving)
-        );
-        this.local.elevation.gain = this.local.elevation.gain.concat(
-            other.local.elevation.gain.map((gain) => gain + this.global.elevation.gain)
-        );
-        this.local.elevation.loss = this.local.elevation.loss.concat(
-            other.local.elevation.loss.map((loss) => loss + this.global.elevation.loss)
-        );
-
-        this.local.speed = this.local.speed.concat(other.local.speed);
-        this.local.elevation.smoothed = this.local.elevation.smoothed.concat(
-            other.local.elevation.smoothed
-        );
-        this.local.slope.at = this.local.slope.at.concat(other.local.slope.at);
-        this.local.slope.segment = this.local.slope.segment.concat(other.local.slope.segment);
-        this.local.slope.length = this.local.slope.length.concat(other.local.slope.length);
-
-        this.global.distance.total += other.global.distance.total;
-        this.global.distance.moving += other.global.distance.moving;
-
-        this.global.time.start =
-            this.global.time.start !== undefined && other.global.time.start !== undefined
-                ? new Date(
-                      Math.min(this.global.time.start.getTime(), other.global.time.start.getTime())
-                  )
-                : (this.global.time.start ?? other.global.time.start);
-        this.global.time.end =
-            this.global.time.end !== undefined && other.global.time.end !== undefined
-                ? new Date(
-                      Math.max(this.global.time.end.getTime(), other.global.time.end.getTime())
-                  )
-                : (this.global.time.end ?? other.global.time.end);
-
-        this.global.time.total += other.global.time.total;
-        this.global.time.moving += other.global.time.moving;
-
-        this.global.speed.moving =
-            this.global.time.moving > 0
-                ? this.global.distance.moving / (this.global.time.moving / 3600)
-                : 0;
-        this.global.speed.total =
-            this.global.time.total > 0
-                ? this.global.distance.total / (this.global.time.total / 3600)
-                : 0;
-
-        this.global.elevation.gain += other.global.elevation.gain;
-        this.global.elevation.loss += other.global.elevation.loss;
-
-        this.global.bounds.southWest.lat = Math.min(
-            this.global.bounds.southWest.lat,
-            other.global.bounds.southWest.lat
-        );
-        this.global.bounds.southWest.lon = Math.min(
-            this.global.bounds.southWest.lon,
-            other.global.bounds.southWest.lon
-        );
-        this.global.bounds.northEast.lat = Math.max(
-            this.global.bounds.northEast.lat,
-            other.global.bounds.northEast.lat
-        );
-        this.global.bounds.northEast.lon = Math.max(
-            this.global.bounds.northEast.lon,
-            other.global.bounds.northEast.lon
-        );
-
-        this.global.atemp.avg =
-            (this.global.atemp.count * this.global.atemp.avg +
-                other.global.atemp.count * other.global.atemp.avg) /
-            Math.max(1, this.global.atemp.count + other.global.atemp.count);
-        this.global.atemp.count += other.global.atemp.count;
-        this.global.hr.avg =
-            (this.global.hr.count * this.global.hr.avg +
-                other.global.hr.count * other.global.hr.avg) /
-            Math.max(1, this.global.hr.count + other.global.hr.count);
-        this.global.hr.count += other.global.hr.count;
-        this.global.cad.avg =
-            (this.global.cad.count * this.global.cad.avg +
-                other.global.cad.count * other.global.cad.avg) /
-            Math.max(1, this.global.cad.count + other.global.cad.count);
-        this.global.cad.count += other.global.cad.count;
-        this.global.power.avg =
-            (this.global.power.count * this.global.power.avg +
-                other.global.power.count * other.global.power.avg) /
-            Math.max(1, this.global.power.count + other.global.power.count);
-        this.global.power.count += other.global.power.count;
-        Object.keys(other.global.extensions).forEach((extension) => {
-            if (this.global.extensions[extension] === undefined) {
-                this.global.extensions[extension] = {};
-            }
-            Object.keys(other.global.extensions[extension]).forEach((value) => {
-                if (this.global.extensions[extension][value] === undefined) {
-                    this.global.extensions[extension][value] = 0;
-                }
-                this.global.extensions[extension][value] +=
-                    other.global.extensions[extension][value];
-            });
-        });
-    }
-
-    slice(start: number, end: number): GPXStatistics {
-        if (start < 0) {
-            start = 0;
-        } else if (start >= this.local.points.length) {
-            return new GPXStatistics();
-        }
-        if (end < start) {
-            return new GPXStatistics();
-        } else if (end >= this.local.points.length) {
-            end = this.local.points.length - 1;
-        }
-
-        let statistics = new GPXStatistics();
-
-        statistics.local.points = this.local.points.slice(start, end + 1);
-
-        statistics.global.distance.total =
-            this.local.distance.total[end] - this.local.distance.total[start];
-        statistics.global.distance.moving =
-            this.local.distance.moving[end] - this.local.distance.moving[start];
-
-        statistics.global.time.start = this.local.points[start].time;
-        statistics.global.time.end = this.local.points[end].time;
-
-        statistics.global.time.total = this.local.time.total[end] - this.local.time.total[start];
-        statistics.global.time.moving = this.local.time.moving[end] - this.local.time.moving[start];
-
-        statistics.global.speed.moving =
-            statistics.global.time.moving > 0
-                ? statistics.global.distance.moving / (statistics.global.time.moving / 3600)
-                : 0;
-        statistics.global.speed.total =
-            statistics.global.time.total > 0
-                ? statistics.global.distance.total / (statistics.global.time.total / 3600)
-                : 0;
-
-        statistics.global.elevation.gain =
-            this.local.elevation.gain[end] - this.local.elevation.gain[start];
-        statistics.global.elevation.loss =
-            this.local.elevation.loss[end] - this.local.elevation.loss[start];
-
-        statistics.global.bounds.southWest.lat = this.global.bounds.southWest.lat;
-        statistics.global.bounds.southWest.lon = this.global.bounds.southWest.lon;
-        statistics.global.bounds.northEast.lat = this.global.bounds.northEast.lat;
-        statistics.global.bounds.northEast.lon = this.global.bounds.northEast.lon;
-
-        statistics.global.atemp = this.global.atemp;
-        statistics.global.hr = this.global.hr;
-        statistics.global.cad = this.global.cad;
-        statistics.global.power = this.global.power;
-
-        return statistics;
-    }
-}
-
 const earthRadius = 6371008.8;
 export function distance(
     coord1: TrackPoint | Coordinates,
@@ -1911,11 +1656,15 @@ export function distance(
     const rad = Math.PI / 180;
     const lat1 = coord1.lat * rad;
     const lat2 = coord2.lat * rad;
+    const dLat = lat2 - lat1;
+    const dLon = (coord2.lon - coord1.lon) * rad;
+
+    // Haversine formula - better numerical stability for small distances
     const a =
-        Math.sin(lat1) * Math.sin(lat2) +
-        Math.cos(lat1) * Math.cos(lat2) * Math.cos((coord2.lon - coord1.lon) * rad);
-    const maxMeters = earthRadius * Math.acos(Math.min(a, 1));
-    return maxMeters;
+        Math.sin(dLat / 2) * Math.sin(dLat / 2) +
+        Math.cos(lat1) * Math.cos(lat2) * Math.sin(dLon / 2) * Math.sin(dLon / 2);
+    const c = 2 * Math.asin(Math.sqrt(Math.min(a, 1)));
+    return earthRadius * c;
 }
 
 export function getElevationDistanceFunction(statistics: GPXStatistics) {
@@ -1926,9 +1675,9 @@ export function getElevationDistanceFunction(statistics: GPXStatistics) {
         if (point1.ele === undefined || point2.ele === undefined || point3.ele === undefined) {
             return 0;
         }
-        let x1 = statistics.local.distance.total[point1._data.index] * 1000;
-        let x2 = statistics.local.distance.total[point2._data.index] * 1000;
-        let x3 = statistics.local.distance.total[point3._data.index] * 1000;
+        let x1 = statistics.local.data[point1._data.index].distance.total * 1000;
+        let x2 = statistics.local.data[point2._data.index].distance.total * 1000;
+        let x3 = statistics.local.data[point3._data.index].distance.total * 1000;
         let y1 = point1.ele;
         let y2 = point2.ele;
         let y3 = point3.ele;
@@ -1942,57 +1691,61 @@ export function getElevationDistanceFunction(statistics: GPXStatistics) {
     };
 }
 
-function distanceWindowSmoothing(
-    points: TrackPoint[],
-    distanceWindow: number,
-    accumulate: (index: number) => number,
-    compute: (accumulated: number, start: number, end: number) => number,
-    remove?: (index: number) => number
-): number[] {
-    let result = [];
-
-    let start = 0,
-        end = 0,
-        accumulated = 0;
-    for (var i = 0; i < points.length; i++) {
-        while (
-            start + 1 < i &&
-            distance(points[start].getCoordinates(), points[i].getCoordinates()) > distanceWindow
-        ) {
-            if (remove) {
-                accumulated -= remove(start);
-            } else {
-                accumulated -= accumulate(start);
-            }
+function windowSmoothing(
+    left: number,
+    right: number,
+    distance: (index1: number, index2: number) => number,
+    window: number,
+    compute: (start: number, end: number) => number,
+    callback: (value: number, index: number) => void
+): void {
+    let start = left;
+    for (var i = left; i < right; i++) {
+        while (start + 1 < i && distance(start, i) > window) {
             start++;
         }
-        while (
-            end < points.length &&
-            distance(points[i].getCoordinates(), points[end].getCoordinates()) <= distanceWindow
-        ) {
-            accumulated += accumulate(end);
+        let end = Math.min(i + 2, right);
+        while (end < right && distance(i, end) <= window) {
             end++;
         }
-        result[i] = compute(accumulated, start, end - 1);
+        callback(compute(start, end - 1), i);
     }
-
-    return result;
 }
 
-function distanceWindowSmoothingWithDistanceAccumulator(
-    points: TrackPoint[],
-    distanceWindow: number,
-    compute: (accumulated: number, start: number, end: number) => number
-): number[] {
-    return distanceWindowSmoothing(
-        points,
-        distanceWindow,
-        (index) =>
-            index > 0
-                ? distance(points[index - 1].getCoordinates(), points[index].getCoordinates())
-                : 0,
+function distanceWindowSmoothing(
+    left: number,
+    right: number,
+    statistics: GPXStatistics,
+    window: number,
+    compute: (start: number, end: number) => number,
+    callback: (value: number, index: number) => void
+): void {
+    windowSmoothing(
+        left,
+        right,
+        (index1, index2) =>
+            statistics.local.data[index2].distance.total -
+            statistics.local.data[index1].distance.total,
+        window,
         compute,
-        (index) => distance(points[index].getCoordinates(), points[index + 1].getCoordinates())
+        callback
+    );
+}
+
+function timeWindowSmoothing(
+    points: TrackPoint[],
+    window: number,
+    compute: (start: number, end: number) => number,
+    callback: (value: number, index: number) => void
+): void {
+    windowSmoothing(
+        0,
+        points.length,
+        (index1, index2) =>
+            points[index2].time?.getTime() - points[index1].time?.getTime() || 2 * window,
+        window,
+        compute,
+        callback
     );
 }
 
@@ -2044,14 +1797,14 @@ function withArtificialTimestamps(
     totalTime: number,
     lastPoint: TrackPoint | undefined,
     startTime: Date,
-    slope: number[]
+    statistics: GPXStatistics
 ): TrackPoint[] {
     let weight = [];
     let totalWeight = 0;
 
     for (let i = 0; i < points.length - 1; i++) {
         let dist = distance(points[i].getCoordinates(), points[i + 1].getCoordinates());
-        let w = dist * (0.5 + 1 / (1 + Math.exp(-0.2 * slope[i])));
+        let w = dist * (0.5 + 1 / (1 + Math.exp(-0.2 * statistics.local.data[i].slope.at)));
         weight.push(w);
         totalWeight += w;
     }

gpx/src/index.ts

@@ -1,4 +1,5 @@
 export * from './gpx';
+export * from './statistics';
 export { Coordinates, LineStyleExtension, WaypointType } from './types';
 export { parseGPX, buildGPX } from './io';
 export * from './simplify';

gpx/src/simplify.ts

@@ -3,8 +3,6 @@ import { Coordinates } from './types';
 
 export type SimplifiedTrackPoint = { point: TrackPoint; distance?: number };
 
-const earthRadius = 6371008.8;
-
 export function ramerDouglasPeucker(
     points: TrackPoint[],
     epsilon: number = 50,
@@ -61,76 +59,56 @@ function ramerDouglasPeuckerRecursive(
 }
 
 export function crossarcDistance(
-    point1: TrackPoint,
-    point2: TrackPoint,
+    point1: TrackPoint | Coordinates,
+    point2: TrackPoint | Coordinates,
     point3: TrackPoint | Coordinates
 ): number {
     return crossarc(
-        point1.getCoordinates(),
-        point2.getCoordinates(),
+        point1 instanceof TrackPoint ? point1.getCoordinates() : point1,
+        point2 instanceof TrackPoint ? point2.getCoordinates() : point2,
         point3 instanceof TrackPoint ? point3.getCoordinates() : point3
     );
 }
 
+const metersPerLatitudeDegree = 111320;
+
+function getMetersPerLongitudeDegree(latitude: number): number {
+    return Math.cos((latitude * Math.PI) / 180) * metersPerLatitudeDegree;
+}
+
 function crossarc(coord1: Coordinates, coord2: Coordinates, coord3: Coordinates): number {
-    // Calculates the shortest distance in meters
-    // between an arc (defined by p1 and p2) and a third point, p3.
-    // Input lat1,lon1,lat2,lon2,lat3,lon3 in degrees.
+    // Calculates the perpendicular distance in meters
+    // between a line segment (defined by p1 and p2) and a third point, p3.
+    // Uses simple planar geometry (ignores earth curvature).
 
-    const rad = Math.PI / 180;
-    const lat1 = coord1.lat * rad;
-    const lat2 = coord2.lat * rad;
-    const lat3 = coord3.lat * rad;
+    // Convert to meters using approximate scaling
+    const metersPerLongitudeDegree = getMetersPerLongitudeDegree(coord1.lat);
 
-    const lon1 = coord1.lon * rad;
-    const lon2 = coord2.lon * rad;
-    const lon3 = coord3.lon * rad;
+    const x1 = coord1.lon * metersPerLongitudeDegree;
+    const y1 = coord1.lat * metersPerLatitudeDegree;
+    const x2 = coord2.lon * metersPerLongitudeDegree;
+    const y2 = coord2.lat * metersPerLatitudeDegree;
+    const x3 = coord3.lon * metersPerLongitudeDegree;
+    const y3 = coord3.lat * metersPerLatitudeDegree;
 
-    // Prerequisites for the formulas
-    const bear12 = bearing(lat1, lon1, lat2, lon2);
-    const bear13 = bearing(lat1, lon1, lat3, lon3);
-    let dis13 = distance(lat1, lon1, lat3, lon3);
+    const dx = x2 - x1;
+    const dy = y2 - y1;
+    const segmentLengthSquared = dx * dx + dy * dy;
 
-    let diff = Math.abs(bear13 - bear12);
-    if (diff > Math.PI) {
-        diff = 2 * Math.PI - diff;
+    if (segmentLengthSquared === 0) {
+        // p1 and p2 are the same point
+        return Math.sqrt((x3 - x1) * (x3 - x1) + (y3 - y1) * (y3 - y1));
     }
 
-    // Is relative bearing obtuse?
-    if (diff > Math.PI / 2) {
-        return dis13;
-    }
+    // Project p3 onto the line defined by p1-p2
+    const t = Math.max(0, Math.min(1, ((x3 - x1) * dx + (y3 - y1) * dy) / segmentLengthSquared));
 
-    // Find the cross-track distance.
-    let dxt = Math.asin(Math.sin(dis13 / earthRadius) * Math.sin(bear13 - bear12)) * earthRadius;
+    // Find the closest point on the segment
+    const projX = x1 + t * dx;
+    const projY = y1 + t * dy;
 
-    // Is p4 beyond the arc?
-    let dis12 = distance(lat1, lon1, lat2, lon2);
-    let dis14 =
-        Math.acos(Math.cos(dis13 / earthRadius) / Math.cos(dxt / earthRadius)) * earthRadius;
-    if (dis14 > dis12) {
-        return distance(lat2, lon2, lat3, lon3);
-    } else {
-        return Math.abs(dxt);
-    }
-}
-
-function distance(latA: number, lonA: number, latB: number, lonB: number): number {
-    // Finds the distance between two lat / lon points.
-    return (
-        Math.acos(
-            Math.sin(latA) * Math.sin(latB) +
-                Math.cos(latA) * Math.cos(latB) * Math.cos(lonB - lonA)
-        ) * earthRadius
-    );
-}
-
-function bearing(latA: number, lonA: number, latB: number, lonB: number): number {
-    // Finds the bearing from one lat / lon point to another.
-    return Math.atan2(
-        Math.sin(lonB - lonA) * Math.cos(latB),
-        Math.cos(latA) * Math.sin(latB) - Math.sin(latA) * Math.cos(latB) * Math.cos(lonB - lonA)
-    );
+    // Return distance from p3 to the projected point
+    return Math.sqrt((x3 - projX) * (x3 - projX) + (y3 - projY) * (y3 - projY));
 }
 
 export function projectedPoint(
@@ -146,56 +124,39 @@ export function projectedPoint(
 }
 
 function projected(coord1: Coordinates, coord2: Coordinates, coord3: Coordinates): Coordinates {
-    // Calculates the point on the line defined by p1 and p2
+    // Calculates the point on the line segment defined by p1 and p2
     // that is closest to the third point, p3.
-    // Input lat1,lon1,lat2,lon2,lat3,lon3 in degrees.
+    // Uses simple planar geometry (ignores earth curvature).
 
-    const rad = Math.PI / 180;
-    const lat1 = coord1.lat * rad;
-    const lat2 = coord2.lat * rad;
-    const lat3 = coord3.lat * rad;
+    // Convert to meters using approximate scaling
+    const metersPerLongitudeDegree = getMetersPerLongitudeDegree(coord1.lat);
 
-    const lon1 = coord1.lon * rad;
-    const lon2 = coord2.lon * rad;
-    const lon3 = coord3.lon * rad;
+    const x1 = coord1.lon * metersPerLongitudeDegree;
+    const y1 = coord1.lat * metersPerLatitudeDegree;
+    const x2 = coord2.lon * metersPerLongitudeDegree;
+    const y2 = coord2.lat * metersPerLatitudeDegree;
+    const x3 = coord3.lon * metersPerLongitudeDegree;
+    const y3 = coord3.lat * metersPerLatitudeDegree;
 
-    // Prerequisites for the formulas
-    const bear12 = bearing(lat1, lon1, lat2, lon2);
-    const bear13 = bearing(lat1, lon1, lat3, lon3);
-    let dis13 = distance(lat1, lon1, lat3, lon3);
+    const dx = x2 - x1;
+    const dy = y2 - y1;
+    const segmentLengthSquared = dx * dx + dy * dy;
 
-    let diff = Math.abs(bear13 - bear12);
-    if (diff > Math.PI) {
-        diff = 2 * Math.PI - diff;
-    }
-
-    // Is relative bearing obtuse?
-    if (diff > Math.PI / 2) {
+    if (segmentLengthSquared === 0) {
+        // p1 and p2 are the same point
         return coord1;
     }
 
-    // Find the cross-track distance.
-    let dxt = Math.asin(Math.sin(dis13 / earthRadius) * Math.sin(bear13 - bear12)) * earthRadius;
+    // Project p3 onto the line defined by p1-p2
+    const t = Math.max(0, Math.min(1, ((x3 - x1) * dx + (y3 - y1) * dy) / segmentLengthSquared));
 
-    // Is p4 beyond the arc?
-    let dis12 = distance(lat1, lon1, lat2, lon2);
-    let dis14 =
-        Math.acos(Math.cos(dis13 / earthRadius) / Math.cos(dxt / earthRadius)) * earthRadius;
-    if (dis14 > dis12) {
-        return coord2;
-    } else {
-        // Determine the closest point (p4) on the great circle
-        const f = dis14 / earthRadius;
-        const lat4 = Math.asin(
-            Math.sin(lat1) * Math.cos(f) + Math.cos(lat1) * Math.sin(f) * Math.cos(bear12)
-        );
-        const lon4 =
-            lon1 +
-            Math.atan2(
-                Math.sin(bear12) * Math.sin(f) * Math.cos(lat1),
-                Math.cos(f) - Math.sin(lat1) * Math.sin(lat4)
-            );
+    // Find the closest point on the segment
+    const projX = x1 + t * dx;
+    const projY = y1 + t * dy;
 
-        return { lat: lat4 / rad, lon: lon4 / rad };
-    }
+    // Convert back to degrees
+    return {
+        lat: projY / metersPerLatitudeDegree,
+        lon: projX / metersPerLongitudeDegree,
+    };
 }

gpx/src/statistics.ts

@@ -0,0 +1,391 @@
+import { TrackPoint } from './gpx';
+import { Coordinates } from './types';
+
+export class GPXGlobalStatistics {
+    length: number;
+    distance: {
+        moving: number;
+        total: number;
+    };
+    time: {
+        start: Date | undefined;
+        end: Date | undefined;
+        moving: number;
+        total: number;
+    };
+    speed: {
+        moving: number;
+        total: number;
+    };
+    elevation: {
+        gain: number;
+        loss: number;
+    };
+    bounds: {
+        southWest: Coordinates;
+        northEast: Coordinates;
+    };
+    atemp: {
+        avg: number;
+        count: number;
+    };
+    hr: {
+        avg: number;
+        count: number;
+    };
+    cad: {
+        avg: number;
+        count: number;
+    };
+    power: {
+        avg: number;
+        count: number;
+    };
+    extensions: Record<string, Record<string, number>>;
+
+    constructor() {
+        this.length = 0;
+        this.distance = {
+            moving: 0,
+            total: 0,
+        };
+        this.time = {
+            start: undefined,
+            end: undefined,
+            moving: 0,
+            total: 0,
+        };
+        this.speed = {
+            moving: 0,
+            total: 0,
+        };
+        this.elevation = {
+            gain: 0,
+            loss: 0,
+        };
+        this.bounds = {
+            southWest: {
+                lat: 90,
+                lon: 180,
+            },
+            northEast: {
+                lat: -90,
+                lon: -180,
+            },
+        };
+        this.atemp = {
+            avg: 0,
+            count: 0,
+        };
+        this.hr = {
+            avg: 0,
+            count: 0,
+        };
+        this.cad = {
+            avg: 0,
+            count: 0,
+        };
+        this.power = {
+            avg: 0,
+            count: 0,
+        };
+        this.extensions = {};
+    }
+
+    mergeWith(other: GPXGlobalStatistics): void {
+        this.length += other.length;
+
+        this.distance.total += other.distance.total;
+        this.distance.moving += other.distance.moving;
+
+        this.time.start =
+            this.time.start !== undefined && other.time.start !== undefined
+                ? new Date(Math.min(this.time.start.getTime(), other.time.start.getTime()))
+                : (this.time.start ?? other.time.start);
+        this.time.end =
+            this.time.end !== undefined && other.time.end !== undefined
+                ? new Date(Math.max(this.time.end.getTime(), other.time.end.getTime()))
+                : (this.time.end ?? other.time.end);
+
+        this.time.total += other.time.total;
+        this.time.moving += other.time.moving;
+
+        this.speed.moving =
+            this.time.moving > 0 ? this.distance.moving / (this.time.moving / 3600) : 0;
+        this.speed.total = this.time.total > 0 ? this.distance.total / (this.time.total / 3600) : 0;
+
+        this.elevation.gain += other.elevation.gain;
+        this.elevation.loss += other.elevation.loss;
+
+        this.bounds.southWest.lat = Math.min(this.bounds.southWest.lat, other.bounds.southWest.lat);
+        this.bounds.southWest.lon = Math.min(this.bounds.southWest.lon, other.bounds.southWest.lon);
+        this.bounds.northEast.lat = Math.max(this.bounds.northEast.lat, other.bounds.northEast.lat);
+        this.bounds.northEast.lon = Math.max(this.bounds.northEast.lon, other.bounds.northEast.lon);
+
+        this.atemp.avg =
+            (this.atemp.count * this.atemp.avg + other.atemp.count * other.atemp.avg) /
+            Math.max(1, this.atemp.count + other.atemp.count);
+        this.atemp.count += other.atemp.count;
+        this.hr.avg =
+            (this.hr.count * this.hr.avg + other.hr.count * other.hr.avg) /
+            Math.max(1, this.hr.count + other.hr.count);
+        this.hr.count += other.hr.count;
+        this.cad.avg =
+            (this.cad.count * this.cad.avg + other.cad.count * other.cad.avg) /
+            Math.max(1, this.cad.count + other.cad.count);
+        this.cad.count += other.cad.count;
+        this.power.avg =
+            (this.power.count * this.power.avg + other.power.count * other.power.avg) /
+            Math.max(1, this.power.count + other.power.count);
+        this.power.count += other.power.count;
+
+        Object.keys(other.extensions).forEach((extension) => {
+            if (this.extensions[extension] === undefined) {
+                this.extensions[extension] = {};
+            }
+            Object.keys(other.extensions[extension]).forEach((value) => {
+                if (this.extensions[extension][value] === undefined) {
+                    this.extensions[extension][value] = 0;
+                }
+                this.extensions[extension][value] += other.extensions[extension][value];
+            });
+        });
+    }
+}
+
+export class TrackPointLocalStatistics {
+    distance: {
+        moving: number;
+        total: number;
+    };
+    time: {
+        moving: number;
+        total: number;
+    };
+    speed: number;
+    elevation: {
+        gain: number;
+        loss: number;
+    };
+    slope: {
+        at: number;
+        segment: number;
+        length: number;
+    };
+
+    constructor() {
+        this.distance = {
+            moving: 0,
+            total: 0,
+        };
+        this.time = {
+            moving: 0,
+            total: 0,
+        };
+        this.speed = 0;
+        this.elevation = {
+            gain: 0,
+            loss: 0,
+        };
+        this.slope = {
+            at: 0,
+            segment: 0,
+            length: 0,
+        };
+    }
+}
+
+export class GPXLocalStatistics {
+    points: TrackPoint[];
+    data: TrackPointLocalStatistics[];
+
+    constructor() {
+        this.points = [];
+        this.data = [];
+    }
+}
+
+export type TrackPointWithLocalStatistics = {
+    trkpt: TrackPoint;
+} & TrackPointLocalStatistics;
+
+export class GPXStatistics {
+    global: GPXGlobalStatistics;
+    local: GPXLocalStatistics;
+
+    constructor() {
+        this.global = new GPXGlobalStatistics();
+        this.local = new GPXLocalStatistics();
+    }
+
+    sliced(start: number, end: number): GPXGlobalStatistics {
+        if (start < 0) {
+            start = 0;
+        } else if (start >= this.global.length) {
+            return new GPXGlobalStatistics();
+        }
+
+        if (end < start) {
+            return new GPXGlobalStatistics();
+        } else if (end >= this.global.length) {
+            end = this.global.length - 1;
+        }
+
+        if (start === 0 && end === this.global.length - 1) {
+            return this.global;
+        }
+
+        let statistics = new GPXGlobalStatistics();
+
+        statistics.length = end - start + 1;
+
+        statistics.distance.total =
+            this.local.data[end].distance.total - this.local.data[start].distance.total;
+        statistics.distance.moving =
+            this.local.data[end].distance.moving - this.local.data[start].distance.moving;
+
+        statistics.time.start = this.local.points[start].time;
+        statistics.time.end = this.local.points[end].time;
+
+        statistics.time.total = this.local.data[end].time.total - this.local.data[start].time.total;
+        statistics.time.moving =
+            this.local.data[end].time.moving - this.local.data[start].time.moving;
+
+        statistics.speed.moving =
+            statistics.time.moving > 0
+                ? statistics.distance.moving / (statistics.time.moving / 3600)
+                : 0;
+        statistics.speed.total =
+            statistics.time.total > 0
+                ? statistics.distance.total / (statistics.time.total / 3600)
+                : 0;
+
+        statistics.elevation.gain =
+            this.local.data[end].elevation.gain - this.local.data[start].elevation.gain;
+        statistics.elevation.loss =
+            this.local.data[end].elevation.loss - this.local.data[start].elevation.loss;
+
+        statistics.bounds.southWest.lat = this.global.bounds.southWest.lat;
+        statistics.bounds.southWest.lon = this.global.bounds.southWest.lon;
+        statistics.bounds.northEast.lat = this.global.bounds.northEast.lat;
+        statistics.bounds.northEast.lon = this.global.bounds.northEast.lon;
+
+        statistics.atemp = this.global.atemp;
+        statistics.hr = this.global.hr;
+        statistics.cad = this.global.cad;
+        statistics.power = this.global.power;
+
+        return statistics;
+    }
+}
+
+export class GPXStatisticsGroup {
+    private _statistics: GPXStatistics[];
+    private _cumulative: GPXGlobalStatistics[];
+    private _slice: [number, number] | null = null;
+    global: GPXGlobalStatistics;
+
+    constructor() {
+        this._statistics = [];
+        this._cumulative = [new GPXGlobalStatistics()];
+        this.global = new GPXGlobalStatistics();
+    }
+
+    add(statistics: GPXStatistics | GPXStatisticsGroup): void {
+        if (statistics instanceof GPXStatisticsGroup) {
+            statistics._statistics.forEach((stats) => this._add(stats));
+        } else {
+            this._add(statistics);
+        }
+    }
+
+    _add(statistics: GPXStatistics): void {
+        this._statistics.push(statistics);
+        const cumulative = new GPXGlobalStatistics();
+        cumulative.mergeWith(this._cumulative[this._cumulative.length - 1]);
+        cumulative.mergeWith(statistics.global);
+        this._cumulative.push(cumulative);
+        this.global.mergeWith(statistics.global);
+    }
+
+    sliced(start: number, end: number): GPXGlobalStatistics {
+        let sliced = new GPXGlobalStatistics();
+        for (let i = 0; i < this._statistics.length; i++) {
+            const statistics = this._statistics[i];
+            const cumulative = this._cumulative[i];
+            if (start < cumulative.length + statistics.global.length && end >= cumulative.length) {
+                const localStart = Math.max(0, start - cumulative.length);
+                const localEnd = Math.min(statistics.global.length - 1, end - cumulative.length);
+                sliced.mergeWith(statistics.sliced(localStart, localEnd));
+            }
+        }
+        return sliced;
+    }
+
+    getTrackPoint(index: number): TrackPointWithLocalStatistics | undefined {
+        if (this._slice !== null) {
+            index += this._slice[0];
+        }
+        for (let i = 0; i < this._statistics.length; i++) {
+            const statistics = this._statistics[i];
+            const cumulative = this._cumulative[i];
+            if (index < cumulative.length + statistics.global.length) {
+                return this._getTrackPoint(cumulative, statistics, index - cumulative.length);
+            }
+        }
+        return undefined;
+    }
+
+    _getTrackPoint(
+        cumulative: GPXGlobalStatistics,
+        statistics: GPXStatistics,
+        index: number
+    ): TrackPointWithLocalStatistics {
+        const point = statistics.local.points[index];
+        return {
+            trkpt: point,
+            distance: {
+                moving: statistics.local.data[index].distance.moving + cumulative.distance.moving,
+                total: statistics.local.data[index].distance.total + cumulative.distance.total,
+            },
+            time: {
+                moving: statistics.local.data[index].time.moving + cumulative.time.moving,
+                total: statistics.local.data[index].time.total + cumulative.time.total,
+            },
+            speed: statistics.local.data[index].speed,
+            elevation: {
+                gain: statistics.local.data[index].elevation.gain + cumulative.elevation.gain,
+                loss: statistics.local.data[index].elevation.loss + cumulative.elevation.loss,
+            },
+            slope: {
+                at: statistics.local.data[index].slope.at,
+                segment: statistics.local.data[index].slope.segment,
+                length: statistics.local.data[index].slope.length,
+            },
+        };
+    }
+
+    forEachTrackPoint(
+        callback: (
+            point: TrackPoint,
+            distance: number,
+            speed: number,
+            slope: { at: number; segment: number; length: number },
+            index: number
+        ) => void
+    ): void {
+        for (let i = 0; i < this._statistics.length; i++) {
+            const statistics = this._statistics[i];
+            const cumulative = this._cumulative[i];
+            statistics.local.points.forEach((point, index) =>
+                callback(
+                    point,
+                    cumulative.distance.total + statistics.local.data[index].distance.total,
+                    statistics.local.data[index].speed,
+                    statistics.local.data[index].slope,
+                    cumulative.length + index
+                )
+            );
+        }
+    }
+}

package-lock.json

@@ -1,6 +0,0 @@
-{
-  "name": "gpx.studio",
-  "lockfileVersion": 3,
-  "requires": true,
-  "packages": {}
-}

website/.gitignore

@@ -8,3 +8,5 @@ node_modules
 !.env.example
 vite.config.js.timestamp-*
 vite.config.ts.timestamp-*
+static/*.webmanifest
+!static/en.manifest.webmanifest

website/components.json

@@ -1,16 +1,17 @@
 {
-	"$schema": "https://next.shadcn-svelte.com/schema.json",
-	"tailwind": {
-		"css": "src/app.css",
-		"baseColor": "slate"
-	},
-	"aliases": {
-		"components": "$lib/components",
-		"utils": "$lib/utils",
-		"ui": "$lib/components/ui",
-		"hooks": "$lib/hooks",
-		"lib": "$lib"
-	},
-	"typescript": true,
-	"registry": "https://next.shadcn-svelte.com/registry"
+    "$schema": "https://shadcn-svelte.com/schema.json",
+    "style": "default",
+    "tailwind": {
+        "css": "src/app.css",
+        "baseColor": "slate"
+    },
+    "aliases": {
+        "components": "$lib/components",
+        "utils": "$lib/utils",
+        "ui": "$lib/components/ui",
+        "hooks": "$lib/hooks",
+        "lib": "$lib"
+    },
+    "typescript": true,
+    "registry": "https://shadcn-svelte.com/registry"
 }

website/package-lock.json

@@ -14,7 +14,7 @@
                 "@mapbox/sphericalmercator": "^2.0.1",
                 "@mapbox/tilebelt": "^2.0.2",
                 "@types/mapbox__sphericalmercator": "^1.2.3",
-                "chart.js": "^4.4.9",
+                "chart.js": "^4.5.1",
                 "chartjs-plugin-zoom": "^2.2.0",
                 "clsx": "^2.1.1",
                 "dexie": "^4.0.11",
@@ -22,16 +22,15 @@
                 "gpx": "file:../gpx",
                 "immer": "^10.1.1",
                 "jszip": "^3.10.1",
-                "mapbox-gl": "^3.12.0",
+                "mapbox-gl": "^3.17.0",
                 "mapillary-js": "^4.1.2",
                 "png.js": "^0.2.1",
                 "sanitize-html": "^2.17.0",
                 "sortablejs": "^1.15.6",
-                "tailwind-merge": "^3.3.0",
-                "tailwind-variants": "^1.0.0"
+                "tailwind-merge": "^3.3.0"
             },
             "devDependencies": {
-                "@lucide/svelte": "^0.513.0",
+                "@lucide/svelte": "^0.544.0",
                 "@sveltejs/adapter-static": "^3.0.8",
                 "@sveltejs/enhanced-img": "^0.6.0",
                 "@sveltejs/kit": "^2.21.2",
@@ -48,7 +47,7 @@
                 "@types/sortablejs": "^1.15.8",
                 "@typescript-eslint/eslint-plugin": "^8.33.1",
                 "@typescript-eslint/parser": "^8.33.1",
-                "bits-ui": "^2.5.0",
+                "bits-ui": "^2.14.4",
                 "eslint": "^9.28.0",
                 "eslint-config-prettier": "^10.1.5",
                 "eslint-plugin-svelte": "^3.9.1",
@@ -56,14 +55,16 @@
                 "glob": "^11.0.2",
                 "lucide-static": "^0.513.0",
                 "mdsvex": "^0.12.6",
-                "mode-watcher": "^1.0.7",
+                "mode-watcher": "^1.1.0",
                 "paneforge": "^1.0.0-next.5",
                 "postcss": "^8.4.47",
                 "prettier": "^3.5.3",
                 "prettier-plugin-svelte": "^3.4.0",
                 "svelte": "^5.33.18",
                 "svelte-check": "^4.0.0",
-                "svelte-sonner": "^1.0.4",
+                "svelte-dnd-action": "^0.9.65",
+                "svelte-sonner": "^1.0.5",
+                "tailwind-variants": "^3.1.1",
                 "tailwindcss": "^4.1.8",
                 "tslib": "^2.8.1",
                 "tsx": "^4.19.1",
@@ -1625,9 +1626,9 @@
             "integrity": "sha512-fuscdXJ9G1qb7W8VdHi+IwRqij3lBkosAm4ydQtEmbY58OzHXqQhvlxqEkoz0yssNVn38bcpRWgA9PP+OGoisw=="
         },
         "node_modules/@lucide/svelte": {
-            "version": "0.513.0",
-            "resolved": "https://registry.npmjs.org/@lucide/svelte/-/svelte-0.513.0.tgz",
-            "integrity": "sha512-XwBQMQkMlr9qp9yVg+epx5MzhBBrqul8atO00y/ZfhlKRJuQZVmq3ELibApqyBtj9ys0Ai4FH/SZcODTUFYXig==",
+            "version": "0.544.0",
+            "resolved": "https://registry.npmjs.org/@lucide/svelte/-/svelte-0.544.0.tgz",
+            "integrity": "sha512-9f9O6uxng2pLB01sxNySHduJN3HTl5p0HDu4H26VR51vhZfiMzyOMe9Mhof3XAk4l813eTtl+/DYRvGyoRR+yw==",
             "dev": true,
             "license": "ISC",
             "peerDependencies": {
@@ -1700,9 +1701,10 @@
             }
         },
         "node_modules/@mapbox/point-geometry": {
-            "version": "0.1.0",
-            "resolved": "https://registry.npmjs.org/@mapbox/point-geometry/-/point-geometry-0.1.0.tgz",
-            "integrity": "sha512-6j56HdLTwWGO0fJPlrZtdU/B13q8Uwmo18Ck2GnGgN9PCFyKTZ3UbXeEdRFh18i9XQ92eH2VdtpJHpBD3aripQ=="
+            "version": "1.1.0",
+            "resolved": "https://registry.npmjs.org/@mapbox/point-geometry/-/point-geometry-1.1.0.tgz",
+            "integrity": "sha512-YGcBz1cg4ATXDCM/71L9xveh4dynfGmcLDqufR+nQQy3fKwsAZsWd/x4621/6uJaeB9mwOHE6hPeDgXz9uViUQ==",
+            "license": "ISC"
         },
         "node_modules/@mapbox/polyline": {
             "version": "1.2.1",
@@ -1737,11 +1739,26 @@
             "integrity": "sha512-nMkuDXFv60aBr9soUG5q+GvZYL+2KZHVvsqFCzqnkGEf46U2fvmytHaEVc1/YZbiLn8X+eR3QzX1+dwDO1lxlw=="
         },
         "node_modules/@mapbox/vector-tile": {
-            "version": "1.3.1",
-            "resolved": "https://registry.npmjs.org/@mapbox/vector-tile/-/vector-tile-1.3.1.tgz",
-            "integrity": "sha512-MCEddb8u44/xfQ3oD+Srl/tNcQoqTw3goGk2oLsrFxOTc3dUp+kAnby3PvAeeBYSMSjSPD1nd1AJA6W49WnoUw==",
+            "version": "2.0.4",
+            "resolved": "https://registry.npmjs.org/@mapbox/vector-tile/-/vector-tile-2.0.4.tgz",
+            "integrity": "sha512-AkOLcbgGTdXScosBWwmmD7cDlvOjkg/DetGva26pIRiZPdeJYjYKarIlb4uxVzi6bwHO6EWH82eZ5Nuv4T5DUg==",
+            "license": "BSD-3-Clause",
             "dependencies": {
-                "@mapbox/point-geometry": "~0.1.0"
+                "@mapbox/point-geometry": "~1.1.0",
+                "@types/geojson": "^7946.0.16",
+                "pbf": "^4.0.1"
+            }
+        },
+        "node_modules/@mapbox/vector-tile/node_modules/pbf": {
+            "version": "4.0.1",
+            "resolved": "https://registry.npmjs.org/pbf/-/pbf-4.0.1.tgz",
+            "integrity": "sha512-SuLdBvS42z33m8ejRbInMapQe8n0D3vN/Xd5fmWM3tufNgRQFBpaW2YVJxQZV4iPNqb0vEFvssMEo5w9c6BTIA==",
+            "license": "BSD-3-Clause",
+            "dependencies": {
+                "resolve-protobuf-schema": "^2.1.0"
+            },
+            "bin": {
+                "pbf": "bin/pbf"
             }
         },
         "node_modules/@mapbox/whoots-js": {
@@ -2643,7 +2660,8 @@
         "node_modules/@types/mapbox__point-geometry": {
             "version": "0.1.4",
             "resolved": "https://registry.npmjs.org/@types/mapbox__point-geometry/-/mapbox__point-geometry-0.1.4.tgz",
-            "integrity": "sha512-mUWlSxAmYLfwnRBmgYV86tgYmMIICX4kza8YnE/eIlywGe2XoOxlpVnXWwir92xRLjwyarqwpu2EJKD2pk0IUA=="
+            "integrity": "sha512-mUWlSxAmYLfwnRBmgYV86tgYmMIICX4kza8YnE/eIlywGe2XoOxlpVnXWwir92xRLjwyarqwpu2EJKD2pk0IUA==",
+            "license": "MIT"
         },
         "node_modules/@types/mapbox__sphericalmercator": {
             "version": "1.2.3",
@@ -2659,16 +2677,6 @@
                 "@types/geojson": "*"
             }
         },
-        "node_modules/@types/mapbox__vector-tile": {
-            "version": "1.3.4",
-            "resolved": "https://registry.npmjs.org/@types/mapbox__vector-tile/-/mapbox__vector-tile-1.3.4.tgz",
-            "integrity": "sha512-bpd8dRn9pr6xKvuEBQup8pwQfD4VUyqO/2deGjfpe6AwC8YRlyEipvefyRJUSiCJTZuCb8Pl1ciVV5ekqJ96Bg==",
-            "dependencies": {
-                "@types/geojson": "*",
-                "@types/mapbox__point-geometry": "*",
-                "@types/pbf": "*"
-            }
-        },
         "node_modules/@types/mapbox-gl": {
             "version": "3.4.1",
             "resolved": "https://registry.npmjs.org/@types/mapbox-gl/-/mapbox-gl-3.4.1.tgz",
@@ -3233,23 +3241,21 @@
             ]
         },
         "node_modules/bits-ui": {
-            "version": "2.5.0",
-            "resolved": "https://registry.npmjs.org/bits-ui/-/bits-ui-2.5.0.tgz",
-            "integrity": "sha512-PbjylA1UWd4A/c5AYqie/EVxQ1/8uugmJKLg9whLoBBHbfPEBGhK09dCPrahK9kA6DRHhMmij0XXIUGIfrmNow==",
+            "version": "2.14.4",
+            "resolved": "https://registry.npmjs.org/bits-ui/-/bits-ui-2.14.4.tgz",
+            "integrity": "sha512-W6kenhnbd/YVvur+DKkaVJ6GldE53eLewur5AhUCqslYQ0vjZr8eWlOfwZnMiPB+PF5HMVqf61vXBvmyrAmPWg==",
             "dev": true,
             "license": "MIT",
             "dependencies": {
-                "@floating-ui/core": "^1.7.0",
-                "@floating-ui/dom": "^1.7.0",
-                "css.escape": "^1.5.1",
+                "@floating-ui/core": "^1.7.1",
+                "@floating-ui/dom": "^1.7.1",
                 "esm-env": "^1.1.2",
-                "runed": "^0.28.0",
-                "svelte-toolbelt": "^0.9.1",
+                "runed": "^0.35.1",
+                "svelte-toolbelt": "^0.10.6",
                 "tabbable": "^6.2.0"
             },
             "engines": {
-                "node": ">=20",
-                "pnpm": ">=8.7.0"
+                "node": ">=20"
             },
             "funding": {
                 "url": "https://github.com/sponsors/huntabyte"
@@ -3260,9 +3266,9 @@
             }
         },
         "node_modules/bits-ui/node_modules/runed": {
-            "version": "0.28.0",
-            "resolved": "https://registry.npmjs.org/runed/-/runed-0.28.0.tgz",
-            "integrity": "sha512-k2xx7RuO9hWcdd9f+8JoBeqWtYrm5CALfgpkg2YDB80ds/QE4w0qqu34A7fqiAwiBBSBQOid7TLxwxVC27ymWQ==",
+            "version": "0.35.1",
+            "resolved": "https://registry.npmjs.org/runed/-/runed-0.35.1.tgz",
+            "integrity": "sha512-2F4Q/FZzbeJTFdIS/PuOoPRSm92sA2LhzTnv6FXhCoENb3huf5+fDuNOg1LNvGOouy3u/225qxmuJvcV3IZK5Q==",
             "dev": true,
             "funding": [
                 "https://github.com/sponsors/huntabyte",
@@ -3270,23 +3276,31 @@
             ],
             "license": "MIT",
             "dependencies": {
-                "esm-env": "^1.0.0"
+                "dequal": "^2.0.3",
+                "esm-env": "^1.0.0",
+                "lz-string": "^1.5.0"
             },
             "peerDependencies": {
+                "@sveltejs/kit": "^2.21.0",
                 "svelte": "^5.7.0"
+            },
+            "peerDependenciesMeta": {
+                "@sveltejs/kit": {
+                    "optional": true
+                }
             }
         },
         "node_modules/bits-ui/node_modules/svelte-toolbelt": {
-            "version": "0.9.1",
-            "resolved": "https://registry.npmjs.org/svelte-toolbelt/-/svelte-toolbelt-0.9.1.tgz",
-            "integrity": "sha512-wBX6MtYw/kpht80j5zLpxJyR9soLizXPIAIWEVd9llAi17SR44ZdG291bldjB7r/K5duC0opDFcuhk2cA1hb8g==",
+            "version": "0.10.6",
+            "resolved": "https://registry.npmjs.org/svelte-toolbelt/-/svelte-toolbelt-0.10.6.tgz",
+            "integrity": "sha512-YWuX+RE+CnWYx09yseAe4ZVMM7e7GRFZM6OYWpBKOb++s+SQ8RBIMMe+Bs/CznBMc0QPLjr+vDBxTAkozXsFXQ==",
             "dev": true,
             "funding": [
                 "https://github.com/sponsors/huntabyte"
             ],
             "dependencies": {
                 "clsx": "^2.1.1",
-                "runed": "^0.28.0",
+                "runed": "^0.35.1",
                 "style-to-object": "^1.0.8"
             },
             "engines": {
@@ -3650,9 +3664,9 @@
             }
         },
         "node_modules/chart.js": {
-            "version": "4.4.9",
-            "resolved": "https://registry.npmjs.org/chart.js/-/chart.js-4.4.9.tgz",
-            "integrity": "sha512-EyZ9wWKgpAU0fLJ43YAEIF8sr5F2W3LqbS40ZJyHIner2lY14ufqv2VMp69MAiZ2rpwxEUxEhIH/0U3xyRynxg==",
+            "version": "4.5.1",
+            "resolved": "https://registry.npmjs.org/chart.js/-/chart.js-4.5.1.tgz",
+            "integrity": "sha512-GIjfiT9dbmHRiYi6Nl2yFCq7kkwdkp1W/lp2J99rX0yo9tgJGn3lKQATztIjb5tVtevcBtIdICNWqlq5+E8/Pw==",
             "license": "MIT",
             "dependencies": {
                 "@kurkle/color": "^0.3.0"
@@ -3891,13 +3905,6 @@
                 "node": "*"
             }
         },
-        "node_modules/css.escape": {
-            "version": "1.5.1",
-            "resolved": "https://registry.npmjs.org/css.escape/-/css.escape-1.5.1.tgz",
-            "integrity": "sha512-YUifsXXuknHlUsmlgyY0PKzgPOr7/FjCePfHNt0jxm83wHZi44VDMQ7/fGNkjY3/jV1MC+1CmZbaHzugyeRtpg==",
-            "dev": true,
-            "license": "MIT"
-        },
         "node_modules/csscolorparser": {
             "version": "1.0.3",
             "resolved": "https://registry.npmjs.org/csscolorparser/-/csscolorparser-1.0.3.tgz",
@@ -4053,6 +4060,16 @@
                 "node": ">=0.4.0"
             }
         },
+        "node_modules/dequal": {
+            "version": "2.0.3",
+            "resolved": "https://registry.npmjs.org/dequal/-/dequal-2.0.3.tgz",
+            "integrity": "sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==",
+            "dev": true,
+            "license": "MIT",
+            "engines": {
+                "node": ">=6"
+            }
+        },
         "node_modules/des.js": {
             "version": "1.1.0",
             "resolved": "https://registry.npmjs.org/des.js/-/des.js-1.1.0.tgz",
@@ -4937,9 +4954,10 @@
             }
         },
         "node_modules/gl-matrix": {
-            "version": "3.4.3",
-            "resolved": "https://registry.npmjs.org/gl-matrix/-/gl-matrix-3.4.3.tgz",
-            "integrity": "sha512-wcCp8vu8FT22BnvKVPjXa/ICBWRq/zjFfdofZy1WSpQZpphblv12/bOQLBC1rMM7SGOFS9ltVmKOHil5+Ml7gA=="
+            "version": "3.4.4",
+            "resolved": "https://registry.npmjs.org/gl-matrix/-/gl-matrix-3.4.4.tgz",
+            "integrity": "sha512-latSnyDNt/8zYUB6VIJ6PCh2jBjJX6gnDsoCZ7LyW7GkqrD51EWwa9qCoGixj8YqBtETQK/xY7OmpTF8xz1DdQ==",
+            "license": "MIT"
         },
         "node_modules/glob": {
             "version": "11.0.2",
@@ -6019,6 +6037,16 @@
             "dev": true,
             "license": "ISC"
         },
+        "node_modules/lz-string": {
+            "version": "1.5.0",
+            "resolved": "https://registry.npmjs.org/lz-string/-/lz-string-1.5.0.tgz",
+            "integrity": "sha512-h5bgJWpxJNswbU7qCrV0tIKQCaS3blPDrqKWx+QxzuzL1zGUzij9XCWLrSLsJPu5t+eWA/ycetzYAO5IOMcWAQ==",
+            "dev": true,
+            "license": "MIT",
+            "bin": {
+                "lz-string": "bin/bin.js"
+            }
+        },
         "node_modules/magic-string": {
             "version": "0.30.17",
             "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.17.tgz",
@@ -6041,44 +6069,55 @@
             }
         },
         "node_modules/mapbox-gl": {
-            "version": "3.12.0",
-            "resolved": "https://registry.npmjs.org/mapbox-gl/-/mapbox-gl-3.12.0.tgz",
-            "integrity": "sha512-DV6TRr+xoPrLSKuGiUcbyLVkoLdNaNNpn6O7+ZC27yQH7BOOIF7l6JKbTCMhfMJuZBVJfL8YRJjlMJ6MZCTggA==",
+            "version": "3.17.0",
+            "resolved": "https://registry.npmjs.org/mapbox-gl/-/mapbox-gl-3.17.0.tgz",
+            "integrity": "sha512-nCrDKRlr5di6xUksUDslNWwxroJ5yv1hT8pyVFtcpWJOOKsYQxF/wOFTMie8oxMnXeFkrz1Tl1TwA1XN1yX0KA==",
             "license": "SEE LICENSE IN LICENSE.txt",
             "workspaces": [
                 "src/style-spec",
+                "test/build/vite",
+                "test/build/webpack",
                 "test/build/typings"
             ],
             "dependencies": {
                 "@mapbox/jsonlint-lines-primitives": "^2.0.2",
                 "@mapbox/mapbox-gl-supported": "^3.0.0",
-                "@mapbox/point-geometry": "^0.1.0",
+                "@mapbox/point-geometry": "^1.1.0",
                 "@mapbox/tiny-sdf": "^2.0.6",
                 "@mapbox/unitbezier": "^0.0.1",
-                "@mapbox/vector-tile": "^1.3.1",
+                "@mapbox/vector-tile": "^2.0.4",
                 "@mapbox/whoots-js": "^3.1.0",
                 "@types/geojson": "^7946.0.16",
                 "@types/geojson-vt": "^3.2.5",
                 "@types/mapbox__point-geometry": "^0.1.4",
-                "@types/mapbox__vector-tile": "^1.3.4",
                 "@types/pbf": "^3.0.5",
                 "@types/supercluster": "^7.1.3",
                 "cheap-ruler": "^4.0.0",
                 "csscolorparser": "~1.0.3",
                 "earcut": "^3.0.1",
                 "geojson-vt": "^4.0.2",
-                "gl-matrix": "^3.4.3",
+                "gl-matrix": "^3.4.4",
                 "grid-index": "^1.1.0",
                 "kdbush": "^4.0.2",
                 "martinez-polygon-clipping": "^0.7.4",
                 "murmurhash-js": "^1.0.0",
-                "pbf": "^3.2.1",
+                "pbf": "^4.0.1",
                 "potpack": "^2.0.0",
                 "quickselect": "^3.0.0",
-                "serialize-to-js": "^3.1.2",
                 "supercluster": "^8.0.1",
-                "tinyqueue": "^3.0.0",
-                "vt-pbf": "^3.1.3"
+                "tinyqueue": "^3.0.0"
+            }
+        },
+        "node_modules/mapbox-gl/node_modules/pbf": {
+            "version": "4.0.1",
+            "resolved": "https://registry.npmjs.org/pbf/-/pbf-4.0.1.tgz",
+            "integrity": "sha512-SuLdBvS42z33m8ejRbInMapQe8n0D3vN/Xd5fmWM3tufNgRQFBpaW2YVJxQZV4iPNqb0vEFvssMEo5w9c6BTIA==",
+            "license": "BSD-3-Clause",
+            "dependencies": {
+                "resolve-protobuf-schema": "^2.1.0"
+            },
+            "bin": {
+                "pbf": "bin/pbf"
             }
         },
         "node_modules/mapillary-js": {
@@ -6369,9 +6408,9 @@
             }
         },
         "node_modules/mode-watcher": {
-            "version": "1.0.7",
-            "resolved": "https://registry.npmjs.org/mode-watcher/-/mode-watcher-1.0.7.tgz",
-            "integrity": "sha512-ZGA7ZGdOvBJeTQkzdBOnXSgTkO6U6iIFWJoyGCTt6oHNg9XP9NBvS26De+V4W2aqI+B0yYXUskFG2VnEo3zyMQ==",
+            "version": "1.1.0",
+            "resolved": "https://registry.npmjs.org/mode-watcher/-/mode-watcher-1.1.0.tgz",
+            "integrity": "sha512-mUT9RRGPDYenk59qJauN1rhsIMKBmWA3xMF+uRwE8MW/tjhaDSCCARqkSuDTq8vr4/2KcAxIGVjACxTjdk5C3g==",
             "dev": true,
             "license": "MIT",
             "dependencies": {
@@ -7596,14 +7635,6 @@
                 "node": ">=10"
             }
         },
-        "node_modules/serialize-to-js": {
-            "version": "3.1.2",
-            "resolved": "https://registry.npmjs.org/serialize-to-js/-/serialize-to-js-3.1.2.tgz",
-            "integrity": "sha512-owllqNuDDEimQat7EPG0tH7JjO090xKNzUtYz6X+Sk2BXDnOCilDdNLwjWeFywG9xkJul1ULvtUQa9O4pUaY0w==",
-            "engines": {
-                "node": ">=4.0.0"
-            }
-        },
         "node_modules/set-cookie-parser": {
             "version": "2.7.0",
             "resolved": "https://registry.npmjs.org/set-cookie-parser/-/set-cookie-parser-2.7.0.tgz",
@@ -8223,6 +8254,16 @@
                 "url": "https://paulmillr.com/funding/"
             }
         },
+        "node_modules/svelte-dnd-action": {
+            "version": "0.9.65",
+            "resolved": "https://registry.npmjs.org/svelte-dnd-action/-/svelte-dnd-action-0.9.65.tgz",
+            "integrity": "sha512-GKFtrAtYAjcm27aMELoXOhkLtKA1AEoj2njjCReCer6jh1hnRtTHdEO4Kjfpayz+ZAvE0MMwIvLISW3tsiO9Qg==",
+            "dev": true,
+            "license": "MIT",
+            "peerDependencies": {
+                "svelte": ">=3.23.0 || ^5.0.0-next.0"
+            }
+        },
         "node_modules/svelte-eslint-parser": {
             "version": "1.2.0",
             "resolved": "https://registry.npmjs.org/svelte-eslint-parser/-/svelte-eslint-parser-1.2.0.tgz",
@@ -8292,22 +8333,22 @@
             }
         },
         "node_modules/svelte-sonner": {
-            "version": "1.0.4",
-            "resolved": "https://registry.npmjs.org/svelte-sonner/-/svelte-sonner-1.0.4.tgz",
-            "integrity": "sha512-ctm9jeV0Rf3im2J6RU1emccrJFjRSdNSPsLlxaF62TLZw9bB1D40U/U7+wqEgohJY/X7FBdghdj0BFQF/IqKPQ==",
+            "version": "1.0.5",
+            "resolved": "https://registry.npmjs.org/svelte-sonner/-/svelte-sonner-1.0.5.tgz",
+            "integrity": "sha512-9dpGPFqKb/QWudYqGnEz93vuY+NgCEvyNvxoCLMVGw6sDN/3oVeKV1xiEirW2E1N3vJEyj5imSBNOGltQHA7mg==",
             "dev": true,
             "license": "MIT",
             "dependencies": {
-                "runed": "^0.26.0"
+                "runed": "^0.28.0"
             },
             "peerDependencies": {
                 "svelte": "^5.0.0"
             }
         },
         "node_modules/svelte-sonner/node_modules/runed": {
-            "version": "0.26.0",
-            "resolved": "https://registry.npmjs.org/runed/-/runed-0.26.0.tgz",
-            "integrity": "sha512-qWFv0cvLVRd8pdl/AslqzvtQyEn5KaIugEernwg9G98uJVSZcs/ygvPBvF80LA46V8pwRvSKnaVLDI3+i2wubw==",
+            "version": "0.28.0",
+            "resolved": "https://registry.npmjs.org/runed/-/runed-0.28.0.tgz",
+            "integrity": "sha512-k2xx7RuO9hWcdd9f+8JoBeqWtYrm5CALfgpkg2YDB80ds/QE4w0qqu34A7fqiAwiBBSBQOid7TLxwxVC27ymWQ==",
             "dev": true,
             "funding": [
                 "https://github.com/sponsors/huntabyte",
@@ -8376,35 +8417,30 @@
             }
         },
         "node_modules/tailwind-variants": {
-            "version": "1.0.0",
-            "resolved": "https://registry.npmjs.org/tailwind-variants/-/tailwind-variants-1.0.0.tgz",
-            "integrity": "sha512-2WSbv4ulEEyuBKomOunut65D8UZwxrHoRfYnxGcQNnHqlSCp2+B7Yz2W+yrNDrxRodOXtGD/1oCcKGNBnUqMqA==",
+            "version": "3.1.1",
+            "resolved": "https://registry.npmjs.org/tailwind-variants/-/tailwind-variants-3.1.1.tgz",
+            "integrity": "sha512-ftLXe3krnqkMHsuBTEmaVUXYovXtPyTK7ckEfDRXS8PBZx0bAUas+A0jYxuKA5b8qg++wvQ3d2MQ7l/xeZxbZQ==",
+            "dev": true,
             "license": "MIT",
-            "dependencies": {
-                "tailwind-merge": "3.0.2"
-            },
             "engines": {
                 "node": ">=16.x",
                 "pnpm": ">=7.x"
             },
             "peerDependencies": {
+                "tailwind-merge": ">=3.0.0",
                 "tailwindcss": "*"
-            }
-        },
-        "node_modules/tailwind-variants/node_modules/tailwind-merge": {
-            "version": "3.0.2",
-            "resolved": "https://registry.npmjs.org/tailwind-merge/-/tailwind-merge-3.0.2.tgz",
-            "integrity": "sha512-l7z+OYZ7mu3DTqrL88RiKrKIqO3NcpEO8V/Od04bNpvk0kiIFndGEoqfuzvj4yuhRkHKjRkII2z+KS2HfPcSxw==",
-            "license": "MIT",
-            "funding": {
-                "type": "github",
-                "url": "https://github.com/sponsors/dcastil"
+            },
+            "peerDependenciesMeta": {
+                "tailwind-merge": {
+                    "optional": true
+                }
             }
         },
         "node_modules/tailwindcss": {
             "version": "4.1.8",
             "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-4.1.8.tgz",
             "integrity": "sha512-kjeW8gjdxasbmFKpVGrGd5T4i40mV5J2Rasw48QARfYeQ8YS9x02ON9SFWax3Qf616rt4Cp3nVNIj6Hd1mP3og==",
+            "dev": true,
             "license": "MIT"
         },
         "node_modules/tapable": {
@@ -8996,16 +9032,6 @@
             "integrity": "sha512-2ham8XPWTONajOR0ohOKOHXkm3+gaBmGut3SRuu75xLd/RRaY6vqgh8NBYYk7+RW3u5AtzPQZG8F10LHkl0lAQ==",
             "dev": true
         },
-        "node_modules/vt-pbf": {
-            "version": "3.1.3",
-            "resolved": "https://registry.npmjs.org/vt-pbf/-/vt-pbf-3.1.3.tgz",
-            "integrity": "sha512-2LzDFzt0mZKZ9IpVF2r69G9bXaP2Q2sArJCmcCgvfTdCCZzSyz4aCLoQyUilu37Ll56tCblIZrXFIjNUpGIlmA==",
-            "dependencies": {
-                "@mapbox/point-geometry": "0.1.0",
-                "@mapbox/vector-tile": "^1.3.1",
-                "pbf": "^3.2.1"
-            }
-        },
         "node_modules/which": {
             "version": "2.0.2",
             "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",

website/package.json

@@ -10,11 +10,11 @@
         "preview": "vite preview",
         "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
         "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
-        "lint": "prettier --check . && eslint .",
-        "format": "prettier --write ."
+        "lint": "prettier --check . --config ../.prettierrc --ignore-path ../.prettierignore --ignore-path ./.gitignore && eslint .",
+        "format": "prettier --write . --config ../.prettierrc --ignore-path ../.prettierignore --ignore-path ./.gitignore"
     },
     "devDependencies": {
-        "@lucide/svelte": "^0.513.0",
+        "@lucide/svelte": "^0.544.0",
         "@sveltejs/adapter-static": "^3.0.8",
         "@sveltejs/enhanced-img": "^0.6.0",
         "@sveltejs/kit": "^2.21.2",
@@ -31,7 +31,7 @@
         "@types/sortablejs": "^1.15.8",
         "@typescript-eslint/eslint-plugin": "^8.33.1",
         "@typescript-eslint/parser": "^8.33.1",
-        "bits-ui": "^2.5.0",
+        "bits-ui": "^2.14.4",
         "eslint": "^9.28.0",
         "eslint-config-prettier": "^10.1.5",
         "eslint-plugin-svelte": "^3.9.1",
@@ -39,14 +39,16 @@
         "glob": "^11.0.2",
         "lucide-static": "^0.513.0",
         "mdsvex": "^0.12.6",
-        "mode-watcher": "^1.0.7",
+        "mode-watcher": "^1.1.0",
         "paneforge": "^1.0.0-next.5",
         "postcss": "^8.4.47",
         "prettier": "^3.5.3",
         "prettier-plugin-svelte": "^3.4.0",
         "svelte": "^5.33.18",
         "svelte-check": "^4.0.0",
-        "svelte-sonner": "^1.0.4",
+        "svelte-dnd-action": "^0.9.65",
+        "svelte-sonner": "^1.0.5",
+        "tailwind-variants": "^3.1.1",
         "tailwindcss": "^4.1.8",
         "tslib": "^2.8.1",
         "tsx": "^4.19.1",
@@ -64,7 +66,7 @@
         "@mapbox/sphericalmercator": "^2.0.1",
         "@mapbox/tilebelt": "^2.0.2",
         "@types/mapbox__sphericalmercator": "^1.2.3",
-        "chart.js": "^4.4.9",
+        "chart.js": "^4.5.1",
         "chartjs-plugin-zoom": "^2.2.0",
         "clsx": "^2.1.1",
         "dexie": "^4.0.11",
@@ -72,12 +74,11 @@
         "gpx": "file:../gpx",
         "immer": "^10.1.1",
         "jszip": "^3.10.1",
-        "mapbox-gl": "^3.12.0",
+        "mapbox-gl": "^3.17.0",
         "mapillary-js": "^4.1.2",
         "png.js": "^0.2.1",
         "sanitize-html": "^2.17.0",
         "sortablejs": "^1.15.6",
-        "tailwind-merge": "^3.3.0",
-        "tailwind-variants": "^1.0.0"
+        "tailwind-merge": "^3.3.0"
     }
 }

website/src/app.css

@@ -1,122 +1,126 @@
-@import "tailwindcss";
-@import "tw-animate-css";
- 
+@import 'tailwindcss';
+@import 'tw-animate-css';
+
 @custom-variant dark (&:is(.dark *));
- 
+
 :root {
- --background: hsl(0 0% 100%) /* <- Wrap in HSL */;
- --foreground: hsl(240 10% 3.9%);
- --muted: hsl(240 4.8% 95.9%);
- --muted-foreground: hsl(240 3.8% 46.1%);
- --popover: hsl(0 0% 100%);
- --popover-foreground: hsl(240 10% 3.9%);
- --card: hsl(0 0% 100%);
- --card-foreground: hsl(240 10% 3.9%);
- --border: hsl(240 5.9% 90%);
- --input: hsl(240 5.9% 90%);
- --primary: hsl(240 5.9% 10%);
- --primary-foreground: hsl(0 0% 98%);
- --secondary: hsl(240 4.8% 95.9%);
- --secondary-foreground: hsl(240 5.9% 10%);
- --accent: hsl(240 4.8% 95.9%);
- --accent-foreground: hsl(240 5.9% 10%);
- --destructive: hsl(0 72.2% 50.6%);
- --destructive-foreground: hsl(0 0% 98%);
- --ring: hsl(240 10% 3.9%);
- --sidebar: hsl(0 0% 98%);
- --sidebar-foreground: hsl(240 5.3% 26.1%);
- --sidebar-primary: hsl(240 5.9% 10%);
- --sidebar-primary-foreground: hsl(0 0% 98%);
- --sidebar-accent: hsl(240 4.8% 95.9%);
- --sidebar-accent-foreground: hsl(240 5.9% 10%);
- --sidebar-border: hsl(220 13% 91%);
- --sidebar-ring: hsl(217.2 91.2% 59.8%);
+    --background: hsl(0 0% 100%) /* <- Wrap in HSL */;
+    --foreground: hsl(240 10% 3.9%);
+    --muted: hsl(240 4.8% 95.9%);
+    --muted-foreground: hsl(240 3.8% 46.1%);
+    --popover: hsl(0 0% 100%);
+    --popover-foreground: hsl(240 10% 3.9%);
+    --card: hsl(0 0% 100%);
+    --card-foreground: hsl(240 10% 3.9%);
+    --border: hsl(240 5.9% 90%);
+    --input: hsl(240 5.9% 90%);
+    --primary: hsl(240 5.9% 10%);
+    --primary-foreground: hsl(0 0% 98%);
+    --secondary: hsl(240 4.8% 95.9%);
+    --secondary-foreground: hsl(240 5.9% 10%);
+    --accent: hsl(240 4.8% 95.9%);
+    --accent-foreground: hsl(240 5.9% 10%);
+    --destructive: hsl(0 72.2% 50.6%);
+    --destructive-foreground: hsl(0 0% 98%);
+    --ring: hsl(240 10% 3.9%);
+    --sidebar: hsl(0 0% 98%);
+    --sidebar-foreground: hsl(240 5.3% 26.1%);
+    --sidebar-primary: hsl(240 5.9% 10%);
+    --sidebar-primary-foreground: hsl(0 0% 98%);
+    --sidebar-accent: hsl(240 4.8% 95.9%);
+    --sidebar-accent-foreground: hsl(240 5.9% 10%);
+    --sidebar-border: hsl(220 13% 91%);
+    --sidebar-ring: hsl(217.2 91.2% 59.8%);
 
- --support: rgb(220 15 130);
- --link: rgb(0 110 180);
- 
- --radius: 0.5rem;
+    --support: rgb(220 15 130);
+    --link: rgb(0 110 180);
+    --selection: hsl(240 4.8% 93%);
+
+    --radius: 0.5rem;
 }
- 
+
 .dark {
- --background: hsl(240 10% 3.9%);
- --foreground: hsl(0 0% 98%);
- --muted: hsl(240 3.7% 15.9%);
- --muted-foreground: hsl(240 5% 64.9%);
- --popover: hsl(240 10% 3.9%);
- --popover-foreground: hsl(0 0% 98%);
- --card: hsl(240 10% 3.9%);
- --card-foreground: hsl(0 0% 98%);
- --border: hsl(240 3.7% 15.9%);
- --input: hsl(240 3.7% 15.9%);
- --primary: hsl(0 0% 98%);
- --primary-foreground: hsl(240 5.9% 10%);
- --secondary: hsl(240 3.7% 15.9%);
- --secondary-foreground: hsl(0 0% 98%);
- --accent: hsl(240 3.7% 15.9%);
- --accent-foreground: hsl(0 0% 98%);
- --destructive: hsl(0 62.8% 30.6%);
- --destructive-foreground: hsl(0 0% 98%);
- --ring: hsl(240 4.9% 83.9%);
- --sidebar: hsl(240 5.9% 10%);
- --sidebar-foreground: hsl(240 4.8% 95.9%);
- --sidebar-primary: hsl(224.3 76.3% 48%);
- --sidebar-primary-foreground: hsl(0 0% 100%);
- --sidebar-accent: hsl(240 3.7% 15.9%);
- --sidebar-accent-foreground: hsl(240 4.8% 95.9%);
- --sidebar-border: hsl(240 3.7% 15.9%);
- --sidebar-ring: hsl(217.2 91.2% 59.8%);
+    --background: hsl(240 10% 3.9%);
+    --foreground: hsl(0 0% 98%);
+    --muted: hsl(240 3.7% 15.9%);
+    --muted-foreground: hsl(240 5% 64.9%);
+    --popover: hsl(240 10% 3.9%);
+    --popover-foreground: hsl(0 0% 98%);
+    --card: hsl(240 10% 3.9%);
+    --card-foreground: hsl(0 0% 98%);
+    --border: hsl(240 3.7% 15.9%);
+    --input: hsl(240 3.7% 15.9%);
+    --primary: hsl(0 0% 98%);
+    --primary-foreground: hsl(240 5.9% 10%);
+    --secondary: hsl(240 3.7% 15.9%);
+    --secondary-foreground: hsl(0 0% 98%);
+    --accent: hsl(240 3.7% 15.9%);
+    --accent-foreground: hsl(0 0% 98%);
+    --destructive: hsl(0 62.8% 30.6%);
+    --destructive-foreground: hsl(0 0% 98%);
+    --ring: hsl(240 4.9% 83.9%);
+    --sidebar: hsl(240 5.9% 10%);
+    --sidebar-foreground: hsl(240 4.8% 95.9%);
+    --sidebar-primary: hsl(224.3 76.3% 48%);
+    --sidebar-primary-foreground: hsl(0 0% 100%);
+    --sidebar-accent: hsl(240 3.7% 15.9%);
+    --sidebar-accent-foreground: hsl(240 4.8% 95.9%);
+    --sidebar-border: hsl(240 3.7% 15.9%);
+    --sidebar-ring: hsl(217.2 91.2% 59.8%);
 
- --support: rgb(255 110 190);
- --link: rgb(80 190 255);
+    --support: rgb(255 110 190);
+    --link: rgb(80 190 255);
+    --selection: hsl(240 3.7% 22%);
 }
- 
+
 @theme inline {
- /* Radius (for rounded-*) */
- --radius-sm: calc(var(--radius) - 4px);
- --radius-md: calc(var(--radius) - 2px);
- --radius-lg: var(--radius);
- --radius-xl: calc(var(--radius) + 4px);
- 
- /* Colors */
- --color-background: var(--background);
- --color-foreground: var(--foreground);
- --color-muted: var(--muted);
- --color-muted-foreground: var(--muted-foreground);
- --color-popover: var(--popover);
- --color-popover-foreground: var(--popover-foreground);
- --color-card: var(--card);
- --color-card-foreground: var(--card-foreground);
- --color-border: var(--border);
- --color-input: var(--input);
- --color-primary: var(--primary);
- --color-primary-foreground: var(--primary-foreground);
- --color-secondary: var(--secondary);
- --color-secondary-foreground: var(--secondary-foreground);
- --color-accent: var(--accent);
- --color-accent-foreground: var(--accent-foreground);
- --color-destructive: var(--destructive);
- --color-destructive-foreground: var(--destructive-foreground);
- --color-ring: var(--ring);
- --color-radius: var(--radius);
- --color-sidebar: var(--sidebar);
- --color-sidebar-foreground: var(--sidebar-foreground);
- --color-sidebar-primary: var(--sidebar-primary);
- --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
- --color-sidebar-accent: var(--sidebar-accent);
- --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
- --color-sidebar-border: var(--sidebar-border);
- --color-sidebar-ring: var(--sidebar-ring);
- --color-support: var(--support);
- --color-link: var(--link);
+    /* Radius (for rounded-*) */
+    --radius-sm: calc(var(--radius) - 4px);
+    --radius-md: calc(var(--radius) - 2px);
+    --radius-lg: var(--radius);
+    --radius-xl: calc(var(--radius) + 4px);
+
+    /* Colors */
+    --color-background: var(--background);
+    --color-foreground: var(--foreground);
+    --color-muted: var(--muted);
+    --color-muted-foreground: var(--muted-foreground);
+    --color-popover: var(--popover);
+    --color-popover-foreground: var(--popover-foreground);
+    --color-card: var(--card);
+    --color-card-foreground: var(--card-foreground);
+    --color-border: var(--border);
+    --color-input: var(--input);
+    --color-primary: var(--primary);
+    --color-primary-foreground: var(--primary-foreground);
+    --color-secondary: var(--secondary);
+    --color-secondary-foreground: var(--secondary-foreground);
+    --color-accent: var(--accent);
+    --color-accent-foreground: var(--accent-foreground);
+    --color-destructive: var(--destructive);
+    --color-destructive-foreground: var(--destructive-foreground);
+    --color-ring: var(--ring);
+    --color-radius: var(--radius);
+    --color-sidebar: var(--sidebar);
+    --color-sidebar-foreground: var(--sidebar-foreground);
+    --color-sidebar-primary: var(--sidebar-primary);
+    --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+    --color-sidebar-accent: var(--sidebar-accent);
+    --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+    --color-sidebar-border: var(--sidebar-border);
+    --color-sidebar-ring: var(--sidebar-ring);
+    --color-support: var(--support);
+    --color-link: var(--link);
+
+    --breakpoint-xs: 540px;
 }
- 
+
 @layer base {
- * {
-  @apply border-border;
- }
- 
- body {
-  @apply bg-background text-foreground;
- }
-}
+    * {
+        @apply border-border;
+    }
+
+    body {
+        @apply bg-background text-foreground;
+    }
+}

website/src/hooks.server.js

@@ -24,6 +24,14 @@ export async function handle({ event, resolve }) {
 
     let headTag = `<head>
     <title>gpx.studio — ${title}</title>
+    <script type="application/ld+json">
+    {
+        "@context": "https://schema.org",
+        "@type": "WebSite",
+        "name": "gpx.studio",
+        "url": "https://gpx.studio"
+    }
+    </script>
     <meta name="description" content="${description}" />
     <meta property="og:title" content="gpx.studio — ${title}" />
     <meta property="og:description" content="${description}" />

website/src/lib/assets/custom/bikerouter-gravel.json

@@ -17,7 +17,6 @@
         }
     },
     "sprite": "https://demotiles.maplibre.org/styles/osm-bright-gl-style/sprite",
-    "glyphs": "https://api.maptiler.com/fonts/{fontstack}/{range}.pbf?key={key}",
     "layers": [
         {
             "id": "background",

website/src/lib/assets/layers.ts

@@ -22,7 +22,7 @@ import {
     Binoculars,
     Toilet,
 } from 'lucide-static';
-import { type StyleSpecification } from 'mapbox-gl';
+import { type RasterDEMSourceSpecification, type StyleSpecification } from 'mapbox-gl';
 import ignFrTopo from './custom/ign-fr-topo.json';
 import ignFrPlan from './custom/ign-fr-plan.json';
 import ignFrSatellite from './custom/ign-fr-satellite.json';
@@ -119,6 +119,7 @@ export const basemaps: { [key: string]: string | StyleSpecification } = {
             },
         ],
     },
+    utagawaVTT: 'https://maps.utagawavtt.com/styles/utagawavtt/style.json',
     swisstopoRaster: {
         version: 8,
         sources: {
@@ -144,18 +145,19 @@ export const basemaps: { [key: string]: string | StyleSpecification } = {
     swisstopoVector: 'https://vectortiles.geo.admin.ch/styles/ch.swisstopo.basemap.vt/style.json',
     swisstopoSatellite:
         'https://vectortiles.geo.admin.ch/styles/ch.swisstopo.imagerybasemap.vt/style.json',
-    linz: 'https://basemaps.linz.govt.nz/v1/tiles/topographic/EPSG:3857/style/topographic.json?api=d01fbtg0ar23gctac5m0jgyy2ds',
+    linz: 'https://basemaps.linz.govt.nz/v1/styles/topographic-v2.json?api=d01fbtg0ar23gctac5m0jgyy2ds',
     linzTopo: {
         version: 8,
         sources: {
             linzTopo: {
                 type: 'raster',
                 tiles: [
-                    'https://tiles-cdn.koordinates.com/services;key=39a8b989633a4bef98bc0e065380454a/tiles/v4/layer=50767/EPSG:3857/{z}/{x}/{y}.png',
+                    'https://basemaps.linz.govt.nz/v1/tiles/topo-raster/WebMercatorQuad/{z}/{x}/{y}.webp?api=d01fbtg0ar23gctac5m0jgyy2ds',
                 ],
                 tileSize: 256,
-                maxzoom: 18,
-                attribution: '&copy; <a href="https://www.linz.govt.nz/" target="_blank">LINZ</a>',
+                maxzoom: 16,
+                attribution:
+                    '© <a href="//www.linz.govt.nz/linz-copyright">LINZ CC BY 4.0</a> © <a href="//www.linz.govt.nz/data/linz-data/linz-basemaps/data-attribution">Imagery Basemap contributors</a>',
             },
         },
         layers: [
@@ -185,8 +187,8 @@ export const basemaps: { [key: string]: string | StyleSpecification } = {
             },
         ],
     },
-    ignFrPlan: ignFrPlan,
-    ignFrTopo: ignFrTopo,
+    ignFrPlan: ignFrPlan as StyleSpecification,
+    ignFrTopo: ignFrTopo as StyleSpecification,
     ignFrScan25: {
         version: 8,
         sources: {
@@ -208,7 +210,7 @@ export const basemaps: { [key: string]: string | StyleSpecification } = {
             },
         ],
     },
-    ignFrSatellite: ignFrSatellite,
+    ignFrSatellite: ignFrSatellite as StyleSpecification,
     ignEs: {
         version: 8,
         sources: {
@@ -275,68 +277,6 @@ export const basemaps: { [key: string]: string | StyleSpecification } = {
             },
         ],
     },
-    swedenTopo: {
-        version: 8,
-        sources: {
-            swedenTopoWMTS: {
-                type: 'raster',
-                tiles: [
-                    'https://api.lantmateriet.se/open/topowebb-ccby/v1/wmts/token/1d54dd14-a28c-38a9-b6f3-b4ebfcc3c204/1.0.0/topowebb/default/3857/{z}/{y}/{x}.png',
-                ],
-                tileSize: 256,
-                maxzoom: 14,
-                attribution:
-                    '&copy; <a href="https://www.lantmateriet.se" target="_blank">Lantmäteriet</a>',
-            },
-            swedenTopoWMS: {
-                type: 'raster',
-                tiles: [
-                    'https://minkarta.lantmateriet.se/map/topowebb?REQUEST=GetMap&SERVICE=WMS&VERSION=1.1.1&FORMAT=image%2Fpng&STYLES=&TRANSPARENT=false&LAYERS=topowebbkartan&TILED=true&MAP_RESOLUTION=180&WIDTH=512&HEIGHT=512&SRS=EPSG%3A3857&BBOX={bbox-epsg-3857}',
-                ],
-                tileSize: 512,
-                minzoom: 14,
-                maxzoom: 20,
-                attribution:
-                    '&copy; <a href="https://www.lantmateriet.se" target="_blank">Lantmäteriet</a>',
-            },
-        },
-        layers: [
-            {
-                id: 'swedenTopoWMTS',
-                type: 'raster',
-                source: 'swedenTopoWMTS',
-                maxzoom: 14,
-            },
-            {
-                id: 'swedenTopoWMS',
-                type: 'raster',
-                source: 'swedenTopoWMS',
-                minzoom: 14,
-            },
-        ],
-    },
-    swedenSatellite: {
-        version: 8,
-        sources: {
-            swedenSatellite: {
-                type: 'raster',
-                tiles: [
-                    'https://minkarta.lantmateriet.se/map/ortofoto?REQUEST=GetMap&SERVICE=WMS&VERSION=1.1.1&FORMAT=image%2Fpng&STYLES=&TRANSPARENT=false&LAYERS=Ortofoto_0.5%2COrtofoto_0.4%2COrtofoto_0.25%2COrtofoto_0.16&TILED=true&MAP_RESOLUTION=180&WIDTH=512&HEIGHT=512&SRS=EPSG%3A3857&BBOX={bbox-epsg-3857}',
-                ],
-                tileSize: 512,
-                maxzoom: 22,
-                attribution:
-                    '&copy; <a href="https://www.lantmateriet.se" target="_blank">Lantmäteriet</a>',
-            },
-        },
-        layers: [
-            {
-                id: 'swedenSatellite',
-                type: 'raster',
-                source: 'swedenSatellite',
-            },
-        ],
-    },
     finlandTopo: {
         version: 8,
         sources: {
@@ -427,7 +367,43 @@ export const overlays: { [key: string]: string | StyleSpecification } = {
             },
         ],
     },
-    bikerouterGravel: bikerouterGravel,
+    bikerouterGravel: bikerouterGravel as StyleSpecification,
+    openRailwayMap: {
+        version: 8,
+        sources: {
+            openRailwayMap: {
+                type: 'raster',
+                tiles: ['https://tiles.openrailwaymap.org/standard/{z}/{x}/{y}.png'],
+                tileSize: 256,
+                maxzoom: 19,
+                attribution:
+                    'Data <a href="https://www.openstreetmap.org/copyright">&copy; OpenStreetMap contributors</a>, Style: <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA 2.0</a> <a href="http://www.openrailwaymap.org/">OpenRailwayMap</a>',
+            },
+        },
+        layers: [
+            {
+                id: 'openRailwayMap',
+                type: 'raster',
+                source: 'openRailwayMap',
+            },
+        ],
+    },
+    mapterhornHillshade: {
+        version: 8,
+        sources: {
+            mapterhornHillshade: {
+                type: 'raster-dem',
+                url: 'https://tiles.mapterhorn.com/tilejson.json',
+            },
+        },
+        layers: [
+            {
+                id: 'mapterhornHillshade',
+                type: 'hillshade',
+                source: 'mapterhornHillshade',
+            },
+        ],
+    },
     swisstopoSlope: {
         version: 8,
         sources: {
@@ -803,6 +779,7 @@ export const basemapTree: LayerTreeType = {
             openTopoMap: true,
             openHikingMap: true,
             cyclOSM: true,
+            utagawaVTT: true,
         },
         countries: {
             belgium: {
@@ -831,10 +808,6 @@ export const basemapTree: LayerTreeType = {
                 ignEs: true,
                 ignEsSatellite: true,
             },
-            sweden: {
-                swedenTopo: true,
-                swedenSatellite: true,
-            },
             switzerland: {
                 swisstopoRaster: true,
                 swisstopoVector: true,
@@ -862,8 +835,10 @@ export const overlayTree: LayerTreeType = {
                 waymarkedTrailsHorseRiding: true,
                 waymarkedTrailsWinter: true,
             },
-            cyclOSMlite: true,
             bikerouterGravel: true,
+            cyclOSMlite: true,
+            mapterhornHillshade: true,
+            openRailwayMap: true,
         },
         countries: {
             france: {
@@ -899,6 +874,7 @@ export const overpassTree: LayerTreeType = {
             shower: true,
             shelter: true,
             barrier: true,
+            cemetery: true,
         },
         tourism: {
             attraction: true,
@@ -945,8 +921,10 @@ export const defaultOverlays: LayerTreeType = {
                 waymarkedTrailsHorseRiding: false,
                 waymarkedTrailsWinter: false,
             },
-            cyclOSMlite: false,
             bikerouterGravel: false,
+            cyclOSMlite: false,
+            mapterhornHillshade: false,
+            openRailwayMap: false,
         },
         countries: {
             france: {
@@ -982,6 +960,7 @@ export const defaultOverpassQueries: LayerTreeType = {
             shower: false,
             shelter: false,
             barrier: false,
+            cemetery: false,
         },
         tourism: {
             attraction: false,
@@ -1023,6 +1002,7 @@ export const defaultBasemapTree: LayerTreeType = {
             openTopoMap: true,
             openHikingMap: true,
             cyclOSM: true,
+            utagawaVTT: true,
         },
         countries: {
             belgium: {
@@ -1051,10 +1031,6 @@ export const defaultBasemapTree: LayerTreeType = {
                 ignEs: false,
                 ignEsSatellite: false,
             },
-            sweden: {
-                swedenTopo: false,
-                swedenSatellite: false,
-            },
             switzerland: {
                 swisstopoRaster: false,
                 swisstopoVector: false,
@@ -1082,8 +1058,10 @@ export const defaultOverlayTree: LayerTreeType = {
                 waymarkedTrailsHorseRiding: false,
                 waymarkedTrailsWinter: false,
             },
-            cyclOSMlite: false,
             bikerouterGravel: false,
+            cyclOSMlite: false,
+            mapterhornHillshade: false,
+            openRailwayMap: false,
         },
         countries: {
             france: {
@@ -1119,6 +1097,7 @@ export const defaultOverpassTree: LayerTreeType = {
             shower: false,
             shelter: false,
             barrier: false,
+            cemetery: false,
         },
         tourism: {
             attraction: false,
@@ -1165,9 +1144,7 @@ type OverpassQueryData = {
         svg: string;
         color: string;
     };
-    tags:
-        | Record<string, string | boolean | string[]>
-        | Record<string, string | boolean | string[]>[];
+    tags: Record<string, string | string[]> | Record<string, string | string[]>[];
     symbol?: string;
 };
 
@@ -1248,6 +1225,20 @@ export const overpassQueryData: Record<string, OverpassQueryData> = {
         },
         symbol: 'Shelter',
     },
+    cemetery: {
+        icon: {
+            svg: '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 17v-10a6 5 0 1 1 12 0v10"/><path d="M 4 21 a 1 1 0 0 0 1 1 h 14 a 1 1 0 0 0 1-1 v -1 a 2 2 0 0 0-2-2 H6 a 2 2 0 0 0-2 2 z"/></svg>',
+            color: '#000000',
+        },
+        tags: [
+            {
+                landuse: 'cemetery',
+            },
+            {
+                amenity: 'grave_yard',
+            },
+        ],
+    },
     'fuel-station': {
         icon: {
             svg: Fuel,
@@ -1284,7 +1275,25 @@ export const overpassQueryData: Record<string, OverpassQueryData> = {
             color: '#000000',
         },
         tags: {
-            barrier: true,
+            barrier: [
+                'bar',
+                'barrier_board',
+                'block',
+                'chain',
+                'cycle_barrier',
+                'gate',
+                'hampshire_gate',
+                'horse_stile',
+                'kissing_gate',
+                'lift_gate',
+                'motorcycle_barrier',
+                'sliding_beam',
+                'sliding_gate',
+                'stile',
+                'swing_gate',
+                'turnstile',
+                'wicket_gate',
+            ],
         },
     },
     attraction: {
@@ -1444,3 +1453,18 @@ export const overpassQueryData: Record<string, OverpassQueryData> = {
         symbol: 'Anchor',
     },
 };
+
+export const terrainSources: { [key: string]: RasterDEMSourceSpecification } = {
+    'mapbox-dem': {
+        type: 'raster-dem',
+        url: 'mapbox://mapbox.mapbox-terrain-dem-v1',
+        tileSize: 512,
+        maxzoom: 14,
+    },
+    mapterhorn: {
+        type: 'raster-dem',
+        url: 'https://tiles.mapterhorn.com/tilejson.json',
+    },
+};
+
+export const defaultTerrainSource = 'mapbox-dem';

website/src/lib/assets/symbols.ts

@@ -1,6 +1,5 @@
 import {
     Landmark,
-    Icon,
     Shell,
     Bike,
     Building,
@@ -12,7 +11,7 @@ import {
     DoorOpen,
     Trees,
     Fuel,
-    Home,
+    House,
     Info,
     TreeDeciduous,
     CircleParking,
@@ -29,6 +28,7 @@ import {
     TriangleAlert,
     Anchor,
     Toilet,
+    X,
     type IconProps,
 } from '@lucide/svelte';
 import {
@@ -44,7 +44,7 @@ import {
     DoorOpen as DoorOpenSvg,
     Trees as TreesSvg,
     Fuel as FuelSvg,
-    Home as HomeSvg,
+    House as HouseSvg,
     Info as InfoSvg,
     TreeDeciduous as TreeDeciduousSvg,
     CircleParking as CircleParkingSvg,
@@ -61,6 +61,7 @@ import {
     TriangleAlert as TriangleAlertSvg,
     Anchor as AnchorSvg,
     Toilet as ToiletSvg,
+    X as XSvg,
 } from 'lucide-static';
 import type { Component } from 'svelte';
 
@@ -87,7 +88,11 @@ export const symbols: { [key: string]: Symbol } = {
         icon: ShoppingBasket,
         iconSvg: ShoppingBasketSvg,
     },
-    crossing: { value: 'Crossing' },
+    crossing: {
+        value: 'Crossing',
+        icon: X,
+        iconSvg: XSvg,
+    },
     department_store: {
         value: 'Department Store',
         icon: ShoppingBasket,
@@ -95,7 +100,7 @@ export const symbols: { [key: string]: Symbol } = {
     },
     drinking_water: { value: 'Drinking Water', icon: Droplet, iconSvg: DropletSvg },
     exit: { value: 'Exit', icon: DoorOpen, iconSvg: DoorOpenSvg },
-    lodge: { value: 'Lodge', icon: Home, iconSvg: HomeSvg },
+    lodge: { value: 'Lodge', icon: House, iconSvg: HouseSvg },
     lodging: { value: 'Lodging', icon: Bed, iconSvg: BedSvg },
     forest: { value: 'Forest', icon: Trees, iconSvg: TreesSvg },
     gas_station: { value: 'Gas Station', icon: Fuel, iconSvg: FuelSvg },
@@ -105,7 +110,7 @@ export const symbols: { [key: string]: Symbol } = {
         iconSvg: TrainFrontSvg,
     },
     hotel: { value: 'Hotel', icon: Bed, iconSvg: BedSvg },
-    house: { value: 'House', icon: Home, iconSvg: HomeSvg },
+    house: { value: 'House', icon: House, iconSvg: HouseSvg },
     information: { value: 'Information', icon: Info, iconSvg: InfoSvg },
     park: { value: 'Park', icon: TreeDeciduous, iconSvg: TreeDeciduousSvg },
     parking_area: { value: 'Parking Area', icon: CircleParking, iconSvg: CircleParkingSvg },

website/src/lib/components/ElevationProfile.svelte

@@ -1,692 +0,0 @@
-<script lang="ts">
-    import ButtonWithTooltip from '$lib/components/ButtonWithTooltip.svelte';
-    import * as Popover from '$lib/components/ui/popover';
-    import * as ToggleGroup from '$lib/components/ui/toggle-group';
-    import Chart from 'chart.js/auto';
-    import mapboxgl from 'mapbox-gl';
-    import { map } from '$lib/stores';
-    import { onDestroy, onMount } from 'svelte';
-    import {
-        BrickWall,
-        TriangleRight,
-        HeartPulse,
-        Orbit,
-        SquareActivity,
-        Thermometer,
-        Zap,
-        Circle,
-        Check,
-        ChartNoAxesColumn,
-        Construction,
-    } from '@lucide/svelte';
-    import { getSlopeColor, getSurfaceColor, getHighwayColor } from '$lib/assets/colors';
-    import { _, df } from '$lib/i18n.svelte';
-    import {
-        getCadenceWithUnits,
-        getConvertedDistance,
-        getConvertedElevation,
-        getConvertedTemperature,
-        getConvertedVelocity,
-        getDistanceUnits,
-        getDistanceWithUnits,
-        getElevationWithUnits,
-        getHeartRateWithUnits,
-        getPowerWithUnits,
-        getTemperatureWithUnits,
-        getVelocityWithUnits,
-    } from '$lib/units';
-    import type { Writable } from 'svelte/store';
-    import type { GPXStatistics } from 'gpx';
-    import { settings } from '$lib/db';
-    import { mode } from 'mode-watcher';
-
-    export let gpxStatistics: Writable<GPXStatistics>;
-    export let slicedGPXStatistics: Writable<[GPXStatistics, number, number] | undefined>;
-    export let additionalDatasets: string[];
-    export let elevationFill: 'slope' | 'surface' | 'highway' | undefined;
-    export let showControls: boolean = true;
-
-    const { distanceUnits, velocityUnits, temperatureUnits } = settings;
-
-    let canvas: HTMLCanvasElement;
-    let overlay: HTMLCanvasElement;
-    let chart: Chart;
-
-    Chart.defaults.font.family =
-        'ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"'; // Tailwind CSS font
-
-    let marker: mapboxgl.Marker | null = null;
-    let dragging = false;
-    let panning = false;
-
-    let options = {
-        animation: false,
-        parsing: false,
-        maintainAspectRatio: false,
-        scales: {
-            x: {
-                type: 'linear',
-                ticks: {
-                    callback: function (value: number) {
-                        return `${value.toFixed(1).replace(/\.0+$/, '')} ${getDistanceUnits()}`;
-                    },
-                    align: 'inner',
-                    maxRotation: 0,
-                },
-            },
-            y: {
-                type: 'linear',
-                ticks: {
-                    callback: function (value: number) {
-                        return getElevationWithUnits(value, false);
-                    },
-                },
-            },
-        },
-        datasets: {
-            line: {
-                pointRadius: 0,
-                tension: 0.4,
-                borderWidth: 2,
-                cubicInterpolationMode: 'monotone',
-            },
-        },
-        interaction: {
-            mode: 'nearest',
-            axis: 'x',
-            intersect: false,
-        },
-        plugins: {
-            legend: {
-                display: false,
-            },
-            decimation: {
-                enabled: true,
-            },
-            tooltip: {
-                enabled: () => !dragging && !panning,
-                callbacks: {
-                    title: function () {
-                        return '';
-                    },
-                    label: function (context: Chart.TooltipContext) {
-                        let point = context.raw;
-                        if (context.datasetIndex === 0) {
-                            if ($map && marker) {
-                                if (dragging) {
-                                    marker.remove();
-                                } else {
-                                    marker.setLngLat(point.coordinates);
-                                    marker.addTo($map);
-                                }
-                            }
-                            return `${i18n._('quantities.elevation')}: ${getElevationWithUnits(point.y, false)}`;
-                        } else if (context.datasetIndex === 1) {
-                            return `${$velocityUnits === 'speed' ? i18n._('quantities.speed') : i18n._('quantities.pace')}: ${getVelocityWithUnits(point.y, false)}`;
-                        } else if (context.datasetIndex === 2) {
-                            return `${i18n._('quantities.heartrate')}: ${getHeartRateWithUnits(point.y)}`;
-                        } else if (context.datasetIndex === 3) {
-                            return `${i18n._('quantities.cadence')}: ${getCadenceWithUnits(point.y)}`;
-                        } else if (context.datasetIndex === 4) {
-                            return `${i18n._('quantities.temperature')}: ${getTemperatureWithUnits(point.y, false)}`;
-                        } else if (context.datasetIndex === 5) {
-                            return `${i18n._('quantities.power')}: ${getPowerWithUnits(point.y)}`;
-                        }
-                    },
-                    afterBody: function (contexts: Chart.TooltipContext[]) {
-                        let context = contexts.filter((context) => context.datasetIndex === 0);
-                        if (context.length === 0) return;
-                        let point = context[0].raw;
-                        let slope = {
-                            at: point.slope.at.toFixed(1),
-                            segment: point.slope.segment.toFixed(1),
-                            length: getDistanceWithUnits(point.slope.length),
-                        };
-                        let surface = point.extensions.surface
-                            ? point.extensions.surface
-                            : 'unknown';
-                        let highway = point.extensions.highway
-                            ? point.extensions.highway
-                            : 'unknown';
-                        let sacScale = point.extensions.sac_scale;
-                        let mtbScale = point.extensions.mtb_scale;
-
-                        let labels = [
-                            `    ${i18n._('quantities.distance')}: ${getDistanceWithUnits(point.x, false)}`,
-                            `    ${i18n._('quantities.slope')}: ${slope.at} %${elevationFill === 'slope' ? ` (${slope.length} @${slope.segment} %)` : ''}`,
-                        ];
-
-                        if (elevationFill === 'surface') {
-                            labels.push(
-                                `    ${i18n._('quantities.surface')}: ${i18n._(`toolbar.routing.surface.${surface}`)}`
-                            );
-                        }
-
-                        if (elevationFill === 'highway') {
-                            labels.push(
-                                `    ${i18n._('quantities.highway')}: ${i18n._(`toolbar.routing.highway.${highway}`)}${
-                                    sacScale
-                                        ? ` (${i18n._(`toolbar.routing.sac_scale.${sacScale}`)})`
-                                        : ''
-                                }`
-                            );
-                            if (mtbScale) {
-                                labels.push(
-                                    `    ${i18n._('toolbar.routing.mtb_scale')}: ${mtbScale}`
-                                );
-                            }
-                        }
-
-                        if (point.time) {
-                            labels.push(
-                                `    ${i18n._('quantities.time')}: ${$df.format(point.time)}`
-                            );
-                        }
-
-                        return labels;
-                    },
-                },
-            },
-            zoom: {
-                pan: {
-                    enabled: true,
-                    mode: 'x',
-                    modifierKey: 'shift',
-                    onPanStart: function () {
-                        // hide tooltip
-                        panning = true;
-                        $slicedGPXStatistics = undefined;
-                    },
-                    onPanComplete: function () {
-                        panning = false;
-                    },
-                },
-                zoom: {
-                    wheel: {
-                        enabled: true,
-                    },
-                    mode: 'x',
-                    onZoomStart: function ({ chart, event }: { chart: Chart; event: any }) {
-                        if (
-                            event.deltaY < 0 &&
-                            Math.abs(
-                                chart.getInitialScaleBounds().x.max /
-                                    chart.options.plugins.zoom.limits.x.minRange -
-                                    chart.getZoomLevel()
-                            ) < 0.01
-                        ) {
-                            // Disable wheel pan if zoomed in to the max, and zooming in
-                            return false;
-                        }
-
-                        $slicedGPXStatistics = undefined;
-                    },
-                },
-                limits: {
-                    x: {
-                        min: 'original',
-                        max: 'original',
-                        minRange: 1,
-                    },
-                },
-            },
-        },
-        stacked: false,
-        onResize: function () {
-            updateOverlay();
-        },
-    };
-
-    let datasets: string[] = ['speed', 'hr', 'cad', 'atemp', 'power'];
-    datasets.forEach((id) => {
-        options.scales[`y${id}`] = {
-            type: 'linear',
-            position: 'right',
-            grid: {
-                display: false,
-            },
-            reverse: () => id === 'speed' && $velocityUnits === 'pace',
-            display: false,
-        };
-    });
-
-    onMount(async () => {
-        Chart.register((await import('chartjs-plugin-zoom')).default); // dynamic import to avoid SSR and 'window is not defined' error
-
-        chart = new Chart(canvas, {
-            type: 'line',
-            data: {
-                datasets: [],
-            },
-            options,
-            plugins: [
-                {
-                    id: 'toggleMarker',
-                    events: ['mouseout'],
-                    afterEvent: function (chart: Chart, args: { event: Chart.ChartEvent }) {
-                        if (args.event.type === 'mouseout') {
-                            if ($map && marker) {
-                                marker.remove();
-                            }
-                        }
-                    },
-                },
-            ],
-        });
-
-        // Map marker to show on hover
-        let element = document.createElement('div');
-        element.className = 'h-4 w-4 rounded-full bg-cyan-500 border-2 border-white';
-        marker = new mapboxgl.Marker({
-            element,
-        });
-
-        let startIndex = 0;
-        let endIndex = 0;
-        function getIndex(evt) {
-            const points = chart.getElementsAtEventForMode(
-                evt,
-                'x',
-                {
-                    intersect: false,
-                },
-                true
-            );
-
-            if (points.length === 0) {
-                const rect = canvas.getBoundingClientRect();
-                if (evt.x - rect.left <= chart.chartArea.left) {
-                    return 0;
-                } else if (evt.x - rect.left >= chart.chartArea.right) {
-                    return $gpxStatistics.local.points.length - 1;
-                } else {
-                    return undefined;
-                }
-            }
-
-            let point = points.find((point) => point.element.raw);
-            if (point) {
-                return point.element.raw.index;
-            } else {
-                return points[0].index;
-            }
-        }
-
-        let dragStarted = false;
-        function onMouseDown(evt) {
-            if (evt.shiftKey) {
-                // Panning interaction
-                return;
-            }
-            dragStarted = true;
-            canvas.style.cursor = 'col-resize';
-            startIndex = getIndex(evt);
-        }
-        function onMouseMove(evt) {
-            if (dragStarted) {
-                dragging = true;
-                endIndex = getIndex(evt);
-                if (endIndex !== undefined) {
-                    if (startIndex === undefined) {
-                        startIndex = endIndex;
-                    } else if (startIndex !== endIndex) {
-                        $slicedGPXStatistics = [
-                            $gpxStatistics.slice(
-                                Math.min(startIndex, endIndex),
-                                Math.max(startIndex, endIndex)
-                            ),
-                            Math.min(startIndex, endIndex),
-                            Math.max(startIndex, endIndex),
-                        ];
-                    }
-                }
-            }
-        }
-        function onMouseUp(evt) {
-            dragStarted = false;
-            dragging = false;
-            canvas.style.cursor = '';
-            endIndex = getIndex(evt);
-            if (startIndex === endIndex) {
-                $slicedGPXStatistics = undefined;
-            }
-        }
-        canvas.addEventListener('pointerdown', onMouseDown);
-        canvas.addEventListener('pointermove', onMouseMove);
-        canvas.addEventListener('pointerup', onMouseUp);
-    });
-
-    $: if (chart && $distanceUnits && $velocityUnits && $temperatureUnits) {
-        let data = $gpxStatistics;
-
-        // update data
-        chart.data.datasets[0] = {
-            label: i18n._('quantities.elevation'),
-            data: data.local.points.map((point, index) => {
-                return {
-                    x: getConvertedDistance(data.local.distance.total[index]),
-                    y: point.ele ? getConvertedElevation(point.ele) : 0,
-                    time: point.time,
-                    slope: {
-                        at: data.local.slope.at[index],
-                        segment: data.local.slope.segment[index],
-                        length: data.local.slope.length[index],
-                    },
-                    extensions: point.getExtensions(),
-                    coordinates: point.getCoordinates(),
-                    index: index,
-                };
-            }),
-            normalized: true,
-            fill: 'start',
-            order: 1,
-        };
-        chart.data.datasets[1] = {
-            data: data.local.points.map((point, index) => {
-                return {
-                    x: getConvertedDistance(data.local.distance.total[index]),
-                    y: getConvertedVelocity(data.local.speed[index]),
-                    index: index,
-                };
-            }),
-            normalized: true,
-            yAxisID: 'yspeed',
-            hidden: true,
-        };
-        chart.data.datasets[2] = {
-            data: data.local.points.map((point, index) => {
-                return {
-                    x: getConvertedDistance(data.local.distance.total[index]),
-                    y: point.getHeartRate(),
-                    index: index,
-                };
-            }),
-            normalized: true,
-            yAxisID: 'yhr',
-            hidden: true,
-        };
-        chart.data.datasets[3] = {
-            data: data.local.points.map((point, index) => {
-                return {
-                    x: getConvertedDistance(data.local.distance.total[index]),
-                    y: point.getCadence(),
-                    index: index,
-                };
-            }),
-            normalized: true,
-            yAxisID: 'ycad',
-            hidden: true,
-        };
-        chart.data.datasets[4] = {
-            data: data.local.points.map((point, index) => {
-                return {
-                    x: getConvertedDistance(data.local.distance.total[index]),
-                    y: getConvertedTemperature(point.getTemperature()),
-                    index: index,
-                };
-            }),
-            normalized: true,
-            yAxisID: 'yatemp',
-            hidden: true,
-        };
-        chart.data.datasets[5] = {
-            data: data.local.points.map((point, index) => {
-                return {
-                    x: getConvertedDistance(data.local.distance.total[index]),
-                    y: point.getPower(),
-                    index: index,
-                };
-            }),
-            normalized: true,
-            yAxisID: 'ypower',
-            hidden: true,
-        };
-        chart.options.scales.x['min'] = 0;
-        chart.options.scales.x['max'] = getConvertedDistance(data.global.distance.total);
-
-        chart.update();
-    }
-
-    function slopeFillCallback(context) {
-        return getSlopeColor(context.p0.raw.slope.segment);
-    }
-
-    function surfaceFillCallback(context) {
-        return getSurfaceColor(context.p0.raw.extensions.surface);
-    }
-
-    function highwayFillCallback(context) {
-        return getHighwayColor(
-            context.p0.raw.extensions.highway,
-            context.p0.raw.extensions.sac_scale,
-            context.p0.raw.extensions.mtb_scale
-        );
-    }
-
-    $: if (chart) {
-        if (elevationFill === 'slope') {
-            chart.data.datasets[0]['segment'] = {
-                backgroundColor: slopeFillCallback,
-            };
-        } else if (elevationFill === 'surface') {
-            chart.data.datasets[0]['segment'] = {
-                backgroundColor: surfaceFillCallback,
-            };
-        } else if (elevationFill === 'highway') {
-            chart.data.datasets[0]['segment'] = {
-                backgroundColor: highwayFillCallback,
-            };
-        } else {
-            chart.data.datasets[0]['segment'] = {};
-        }
-        chart.update();
-    }
-
-    $: if (additionalDatasets && chart) {
-        let includeSpeed = additionalDatasets.includes('speed');
-        let includeHeartRate = additionalDatasets.includes('hr');
-        let includeCadence = additionalDatasets.includes('cad');
-        let includeTemperature = additionalDatasets.includes('atemp');
-        let includePower = additionalDatasets.includes('power');
-        if (chart.data.datasets.length > 0) {
-            chart.data.datasets[1].hidden = !includeSpeed;
-            chart.data.datasets[2].hidden = !includeHeartRate;
-            chart.data.datasets[3].hidden = !includeCadence;
-            chart.data.datasets[4].hidden = !includeTemperature;
-            chart.data.datasets[5].hidden = !includePower;
-        }
-        chart.update();
-    }
-
-    function updateOverlay() {
-        if (!canvas) {
-            return;
-        }
-
-        overlay.width = canvas.width / window.devicePixelRatio;
-        overlay.height = canvas.height / window.devicePixelRatio;
-        overlay.style.width = `${overlay.width}px`;
-        overlay.style.height = `${overlay.height}px`;
-
-        if ($slicedGPXStatistics) {
-            let startIndex = $slicedGPXStatistics[1];
-            let endIndex = $slicedGPXStatistics[2];
-
-            // Draw selection rectangle
-            let selectionContext = overlay.getContext('2d');
-            if (selectionContext) {
-                selectionContext.fillStyle = mode.current === 'dark' ? 'white' : 'black';
-                selectionContext.globalAlpha = mode.current === 'dark' ? 0.2 : 0.1;
-                selectionContext.clearRect(0, 0, overlay.width, overlay.height);
-
-                let startPixel = chart.scales.x.getPixelForValue(
-                    getConvertedDistance($gpxStatistics.local.distance.total[startIndex])
-                );
-                let endPixel = chart.scales.x.getPixelForValue(
-                    getConvertedDistance($gpxStatistics.local.distance.total[endIndex])
-                );
-
-                selectionContext.fillRect(
-                    startPixel,
-                    chart.chartArea.top,
-                    endPixel - startPixel,
-                    chart.chartArea.height
-                );
-            }
-        } else if (overlay) {
-            let selectionContext = overlay.getContext('2d');
-            if (selectionContext) {
-                selectionContext.clearRect(0, 0, overlay.width, overlay.height);
-            }
-        }
-    }
-
-    $: $slicedGPXStatistics, mode.current, updateOverlay();
-
-    onDestroy(() => {
-        if (chart) {
-            chart.destroy();
-        }
-    });
-</script>
-
-<div class="h-full grow min-w-0 relative py-2">
-    <canvas bind:this={overlay} class="w-full h-full absolute pointer-events-none"></canvas>
-    <canvas bind:this={canvas} class="w-full h-full absolute"></canvas>
-    {#if showControls}
-        <div class="absolute bottom-10 right-1.5">
-            <Popover.Root>
-                <Popover.Trigger>
-                    {#snippet child({ props })}
-                        <ButtonWithTooltip
-                            {...props}
-                            label={i18n._('chart.settings')}
-                            variant="outline"
-                            class="w-7 h-7 p-0 flex justify-center opacity-70 hover:opacity-100 transition-opacity duration-300 hover:bg-background"
-                        >
-                            <ChartNoAxesColumn size="18" />
-                        </ButtonWithTooltip>
-                    {/snippet}
-                </Popover.Trigger>
-                <Popover.Content
-                    class="w-fit p-0 flex flex-col divide-y"
-                    side="top"
-                    sideOffset={-32}
-                >
-                    <ToggleGroup.Root
-                        class="flex flex-col items-start gap-0 p-1"
-                        type="single"
-                        bind:value={elevationFill}
-                    >
-                        <ToggleGroup.Item
-                            class="p-0 pr-1.5 h-6 w-full rounded flex justify-start data-[state=on]:bg-background data-[state=on]:hover:bg-accent hover:bg-accent hover:text-foreground"
-                            value="slope"
-                        >
-                            <div class="w-6 flex justify-center items-center">
-                                {#if elevationFill === 'slope'}
-                                    <Circle class="h-1.5 w-1.5 fill-current text-current" />
-                                {/if}
-                            </div>
-                            <TriangleRight size="15" class="mr-1" />
-                            {i18n._('quantities.slope')}
-                        </ToggleGroup.Item>
-                        <ToggleGroup.Item
-                            class="p-0 pr-1.5 h-6 w-full rounded flex justify-start data-[state=on]:bg-background data-[state=on]:hover:bg-accent hover:bg-accent hover:text-foreground"
-                            value="surface"
-                            variant="outline"
-                        >
-                            <div class="w-6 flex justify-center items-center">
-                                {#if elevationFill === 'surface'}
-                                    <Circle class="h-1.5 w-1.5 fill-current text-current" />
-                                {/if}
-                            </div>
-                            <BrickWall size="15" class="mr-1" />
-                            {i18n._('quantities.surface')}
-                        </ToggleGroup.Item>
-                        <ToggleGroup.Item
-                            class="p-0 pr-1.5 h-6 w-full rounded flex justify-start data-[state=on]:bg-background data-[state=on]:hover:bg-accent hover:bg-accent hover:text-foreground"
-                            value="highway"
-                            variant="outline"
-                        >
-                            <div class="w-6 flex justify-center items-center">
-                                {#if elevationFill === 'highway'}
-                                    <Circle class="h-1.5 w-1.5 fill-current text-current" />
-                                {/if}
-                            </div>
-                            <Construction size="15" class="mr-1" />
-                            {i18n._('quantities.highway')}
-                        </ToggleGroup.Item>
-                    </ToggleGroup.Root>
-                    <ToggleGroup.Root
-                        class="flex flex-col items-start gap-0 p-1"
-                        type="multiple"
-                        bind:value={additionalDatasets}
-                    >
-                        <ToggleGroup.Item
-                            class="p-0 pr-1.5 h-6 w-full rounded flex justify-start data-[state=on]:bg-background data-[state=on]:hover:bg-accent hover:bg-accent hover:text-foreground"
-                            value="speed"
-                        >
-                            <div class="w-6 flex justify-center items-center">
-                                {#if additionalDatasets.includes('speed')}
-                                    <Check size="14" />
-                                {/if}
-                            </div>
-                            <Zap size="15" class="mr-1" />
-                            {$velocityUnits === 'speed'
-                                ? i18n._('quantities.speed')
-                                : i18n._('quantities.pace')}
-                        </ToggleGroup.Item>
-                        <ToggleGroup.Item
-                            class="p-0 pr-1.5 h-6 w-full rounded flex justify-start data-[state=on]:bg-background data-[state=on]:hover:bg-accent hover:bg-accent hover:text-foreground"
-                            value="hr"
-                        >
-                            <div class="w-6 flex justify-center items-center">
-                                {#if additionalDatasets.includes('hr')}
-                                    <Check size="14" />
-                                {/if}
-                            </div>
-                            <HeartPulse size="15" class="mr-1" />
-                            {i18n._('quantities.heartrate')}
-                        </ToggleGroup.Item>
-                        <ToggleGroup.Item
-                            class="p-0 pr-1.5 h-6 w-full rounded flex justify-start data-[state=on]:bg-background data-[state=on]:hover:bg-accent hover:bg-accent hover:text-foreground"
-                            value="cad"
-                        >
-                            <div class="w-6 flex justify-center items-center">
-                                {#if additionalDatasets.includes('cad')}
-                                    <Check size="14" />
-                                {/if}
-                            </div>
-                            <Orbit size="15" class="mr-1" />
-                            {i18n._('quantities.cadence')}
-                        </ToggleGroup.Item>
-                        <ToggleGroup.Item
-                            class="p-0 pr-1.5 h-6 w-full rounded flex justify-start data-[state=on]:bg-background data-[state=on]:hover:bg-accent hover:bg-accent hover:text-foreground"
-                            value="atemp"
-                        >
-                            <div class="w-6 flex justify-center items-center">
-                                {#if additionalDatasets.includes('atemp')}
-                                    <Check size="14" />
-                                {/if}
-                            </div>
-                            <Thermometer size="15" class="mr-1" />
-                            {i18n._('quantities.temperature')}
-                        </ToggleGroup.Item>
-                        <ToggleGroup.Item
-                            class="p-0 pr-1.5 h-6 w-full rounded flex justify-start data-[state=on]:bg-background data-[state=on]:hover:bg-accent hover:bg-accent hover:text-foreground"
-                            value="power"
-                        >
-                            <div class="w-6 flex justify-center items-center">
-                                {#if additionalDatasets.includes('power')}
-                                    <Check size="14" />
-                                {/if}
-                            </div>
-                            <SquareActivity size="15" class="mr-1" />
-                            {i18n._('quantities.power')}
-                        </ToggleGroup.Item>
-                    </ToggleGroup.Root>
-                </Popover.Content>
-            </Popover.Root>
-        </div>
-    {/if}
-</div>

website/src/lib/components/Footer.svelte

@@ -2,7 +2,7 @@
     import { Button } from '$lib/components/ui/button';
     import LanguageSelect from '$lib/components/LanguageSelect.svelte';
     import Logo from '$lib/components/Logo.svelte';
-    import { AtSign, BookOpenText, Heart, Home, Map } from '@lucide/svelte';
+    import { AtSign, BookOpenText, Heart, House, Map } from '@lucide/svelte';
     import { i18n } from '$lib/i18n.svelte';
     import { getURLForLanguage } from '$lib/utils';
 </script>
@@ -14,11 +14,11 @@
                 <Logo class="h-8" width="153" />
                 <Button
                     variant="link"
-                    class="h-6 px-0 text-muted-foreground"
+                    class="h-6 px-0 has-[>svg]:px-0 text-muted-foreground"
                     href="https://github.com/gpxstudio/gpx.studio/blob/main/LICENSE"
                     target="_blank"
                 >
-                    MIT © 2024 gpx.studio
+                    MIT © 2026 gpx.studio
                 </Button>
                 <LanguageSelect class="w-40 mt-3" />
             </div>
@@ -27,15 +27,16 @@
                     <span class="font-semibold">{i18n._('homepage.website')}</span>
                     <Button
                         variant="link"
-                        class="h-6 px-0 text-muted-foreground"
+                        class="h-6 px-0 has-[>svg]:px-0 text-muted-foreground"
                         href={getURLForLanguage(i18n.lang, '/')}
                     >
-                        <Home size="16" />
+                        <House size="16" />
                         {i18n._('homepage.home')}
                     </Button>
                     <Button
+                        data-sveltekit-reload
                         variant="link"
-                        class="h-6 px-0 text-muted-foreground"
+                        class="h-6 px-0 has-[>svg]:px-0 text-muted-foreground"
                         href={getURLForLanguage(i18n.lang, '/app')}
                     >
                         <Map size="16" />
@@ -43,7 +44,7 @@
                     </Button>
                     <Button
                         variant="link"
-                        class="h-6 px-0 text-muted-foreground"
+                        class="h-6 px-0 has-[>svg]:px-0 text-muted-foreground"
                         href={getURLForLanguage(i18n.lang, '/help')}
                     >
                         <BookOpenText size="16" />
@@ -54,7 +55,7 @@
                     <span class="font-semibold">{i18n._('homepage.contact')}</span>
                     <Button
                         variant="link"
-                        class="h-6 px-0 text-muted-foreground"
+                        class="h-6 px-0 has-[>svg]:px-0 text-muted-foreground"
                         href="https://www.reddit.com/r/gpxstudio/"
                         target="_blank"
                     >
@@ -63,7 +64,7 @@
                     </Button>
                     <Button
                         variant="link"
-                        class="h-6 px-0 text-muted-foreground"
+                        class="h-6 px-0 has-[>svg]:px-0 text-muted-foreground"
                         href="https://facebook.com/gpx.studio"
                         target="_blank"
                     >
@@ -72,16 +73,7 @@
                     </Button>
                     <Button
                         variant="link"
-                        class="h-6 px-0 text-muted-foreground"
-                        href="https://x.com/gpxstudio"
-                        target="_blank"
-                    >
-                        <Logo company="x" class="h-4 fill-muted-foreground" />
-                        {i18n._('homepage.x')}
-                    </Button>
-                    <Button
-                        variant="link"
-                        class="h-6 px-0 text-muted-foreground"
+                        class="h-6 px-0 has-[>svg]:px-0 text-muted-foreground"
                         href="mailto:hello@gpx.studio"
                         target="_blank"
                     >
@@ -93,7 +85,7 @@
                     <span class="font-semibold">{i18n._('homepage.contribute')}</span>
                     <Button
                         variant="link"
-                        class="h-6 px-0 text-muted-foreground"
+                        class="h-6 px-0 has-[>svg]:px-0 text-muted-foreground"
                         href="https://ko-fi.com/gpxstudio"
                         target="_blank"
                     >
@@ -102,7 +94,7 @@
                     </Button>
                     <Button
                         variant="link"
-                        class="h-6 px-0 text-muted-foreground"
+                        class="h-6 px-0 has-[>svg]:px-0 text-muted-foreground"
                         href="https://crowdin.com/project/gpxstudio"
                         target="_blank"
                     >
@@ -111,7 +103,7 @@
                     </Button>
                     <Button
                         variant="link"
-                        class="h-6 px-0 text-muted-foreground"
+                        class="h-6 px-0 has-[>svg]:px-0 text-muted-foreground"
                         href="https://github.com/gpxstudio/gpx.studio"
                         target="_blank"
                     >

website/src/lib/components/GPXStatistics.svelte

@@ -6,7 +6,7 @@
     import { MoveDownRight, MoveUpRight, Ruler, Timer, Zap } from '@lucide/svelte';
 
     import { i18n } from '$lib/i18n.svelte';
-    import type { GPXStatistics } from 'gpx';
+    import type { GPXGlobalStatistics, GPXStatisticsGroup } from 'gpx';
     import type { Readable } from 'svelte/store';
     import { settings } from '$lib/logic/settings';
 
@@ -18,21 +18,21 @@
         orientation,
         panelSize,
     }: {
-        gpxStatistics: Readable<GPXStatistics>;
-        slicedGPXStatistics: Readable<[GPXStatistics, number, number] | undefined>;
+        gpxStatistics: Readable<GPXStatisticsGroup>;
+        slicedGPXStatistics: Readable<[GPXGlobalStatistics, number, number] | undefined>;
         orientation: 'horizontal' | 'vertical';
         panelSize: number;
     } = $props();
 
     let statistics = $derived(
-        $slicedGPXStatistics !== undefined ? $slicedGPXStatistics[0] : $gpxStatistics
+        $slicedGPXStatistics !== undefined ? $slicedGPXStatistics[0] : $gpxStatistics.global
     );
 </script>
 
 <Card.Root
     class="h-full {orientation === 'vertical'
         ? 'min-w-40 sm:min-w-44 text-sm sm:text-base'
-        : 'w-full'} border-none shadow-none"
+        : 'w-full'} border-none shadow-none p-0"
 >
     <Card.Content
         class="h-full flex {orientation === 'vertical'
@@ -42,15 +42,15 @@
         <Tooltip label={i18n._('quantities.distance')}>
             <span class="flex flex-row items-center">
                 <Ruler size="16" class="mr-1" />
-                <WithUnits value={statistics.global.distance.total} type="distance" />
+                <WithUnits value={statistics.distance.total} type="distance" />
             </span>
         </Tooltip>
         <Tooltip label={i18n._('quantities.elevation_gain_loss')}>
             <span class="flex flex-row items-center">
                 <MoveUpRight size="16" class="mr-1" />
-                <WithUnits value={statistics.global.elevation.gain} type="elevation" />
+                <WithUnits value={statistics.elevation.gain} type="elevation" />
                 <MoveDownRight size="16" class="mx-1" />
-                <WithUnits value={statistics.global.elevation.loss} type="elevation" />
+                <WithUnits value={statistics.elevation.loss} type="elevation" />
             </span>
         </Tooltip>
         {#if panelSize > 120 || orientation === 'horizontal'}
@@ -64,13 +64,9 @@
             >
                 <span class="flex flex-row items-center">
                     <Zap size="16" class="mr-1" />
-                    <WithUnits
-                        value={statistics.global.speed.moving}
-                        type="speed"
-                        showUnits={false}
-                    />
+                    <WithUnits value={statistics.speed.moving} type="speed" showUnits={false} />
                     <span class="mx-1">/</span>
-                    <WithUnits value={statistics.global.speed.total} type="speed" />
+                    <WithUnits value={statistics.speed.total} type="speed" />
                 </span>
             </Tooltip>
         {/if}
@@ -83,9 +79,9 @@
             >
                 <span class="flex flex-row items-center">
                     <Timer size="16" class="mr-1" />
-                    <WithUnits value={statistics.global.time.moving} type="time" />
+                    <WithUnits value={statistics.time.moving} type="time" />
                     <span class="mx-1">/</span>
-                    <WithUnits value={statistics.global.time.total} type="time" />
+                    <WithUnits value={statistics.time.total} type="time" />
                 </span>
             </Tooltip>
         {/if}

website/src/lib/components/Help.svelte

@@ -1,16 +1,23 @@
 <script lang="ts">
-    import { CircleHelp } from '@lucide/svelte';
+    import { CircleQuestionMark } from '@lucide/svelte';
     import { i18n } from '$lib/i18n.svelte';
+    import type { Snippet } from 'svelte';
 
-    export let link: string | undefined = undefined;
+    let {
+        link,
+        class: className = '',
+        children,
+    }: {
+        link: string;
+        class?: string;
+        children: Snippet;
+    } = $props();
 </script>
 
-<div
-    class="text-sm bg-secondary rounded border flex flex-row items-center p-2 {$$props.class || ''}"
->
-    <CircleHelp size="16" class="w-4 mr-2 shrink-0 grow-0" />
+<div class="text-sm bg-secondary rounded border flex flex-row items-center p-2 {className}">
+    <CircleQuestionMark size="16" class="w-4 mr-2 shrink-0 grow-0" />
     <div>
-        <slot />
+        {@render children()}
         {#if link}
             <a href={link} target="_blank" class="text-sm text-link hover:underline">
                 {i18n._('menu.more')}

website/src/lib/components/LanguageSelect.svelte

@@ -5,12 +5,18 @@
     import { getURLForLanguage } from '$lib/utils';
     import { Languages } from '@lucide/svelte';
     import { i18n } from '$lib/i18n.svelte';
+
+    let {
+        class: className = '',
+    }: {
+        class?: string;
+    } = $props();
 </script>
 
 <Select.Root type="single" value={i18n.lang}>
-    <Select.Trigger class="w-[180px] {$$props.class ?? ''}" aria-label={i18n._('menu.language')}>
+    <Select.Trigger class="min-w-[180px] {className}" aria-label={i18n._('menu.language')}>
         <Languages size="16" />
-        <span class="ml-2 mr-auto">
+        <span class="mr-auto">
             {languages[i18n.lang]}
         </span>
     </Select.Trigger>
@@ -28,14 +34,3 @@
         {/each}
     </Select.Content>
 </Select.Root>
-
-<!-- hidden links for svelte crawling -->
-<div class="hidden">
-    {#if !page.url.pathname.includes('404')}
-        {#each Object.entries(languages) as [lang, label]}
-            <a href={getURLForLanguage(lang, page.url.pathname)}>
-                {label}
-            </a>
-        {/each}
-    {/if}
-</div>

website/src/lib/components/Logo.svelte

@@ -1,29 +1,36 @@
 <script lang="ts">
-    import { base } from '$app/paths';
     import { mode } from 'mode-watcher';
+    import { base } from '$app/paths';
 
-    export let iconOnly = false;
-    export let company = 'gpx.studio';
+    let {
+        iconOnly = false,
+        company = 'gpx.studio',
+        ...others
+    }: {
+        iconOnly?: boolean;
+        company?: 'gpx.studio' | 'mapbox' | 'github' | 'crowdin' | 'facebook' | 'reddit';
+        [key: string]: any;
+    } = $props();
 </script>
 
 {#if company === 'gpx.studio'}
     <img
         src="{base}/{iconOnly ? 'icon' : 'logo'}{mode.current === 'dark' ? '-dark' : ''}.svg"
         alt="Logo of gpx.studio."
-        {...$$restProps}
+        {...others}
     />
 {:else if company === 'mapbox'}
     <img
         src="{base}/mapbox-logo-{mode.current === 'dark' ? 'white' : 'black'}.svg"
         alt="Logo of Mapbox."
-        {...$$restProps}
+        {...others}
     />
 {:else if company === 'github'}
     <svg
         role="img"
         viewBox="0 0 24 24"
         xmlns="http://www.w3.org/2000/svg"
-        class="fill-foreground {$$restProps.class ?? ''}"
+        class="fill-foreground {others.class ?? ''}"
         ><title>GitHub</title><path
             d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"
         /></svg
@@ -33,7 +40,7 @@
         role="img"
         viewBox="0 0 24 24"
         xmlns="http://www.w3.org/2000/svg"
-        class="fill-foreground {$$restProps.class ?? ''}"
+        class="fill-foreground {others.class ?? ''}"
         ><title>Crowdin</title><path
             d="M16.119 17.793a2.619 2.619 0 0 1-1.667-.562c-.546-.436-1.004-1.09-1.018-1.858-.008-.388.414-.388.414-.388l1.018-.008c.332.008.43.47.445.586.128 1.04.717 1.495 1.168 1.702.273.123.204.513-.362.528zm-5.695-5.287L8.5 12.252c-.867-.214-.844-.982-.807-1.247a5.119 5.119 0 0 1 .814-2.125c.545-.804 1.303-1.508 2.29-2.073 1.856-1.074 4.45-1.673 7.31-1.673 2.09 0 4.256.27 4.29.27.197.025.328.213.333.437a.377.377 0 0 1-.355.393l-.92-.01c-2.902 0-4.968.394-6.506 1.248-1.527.837-2.57 2.117-3.287 4.012-.076.163-.335 1.12-1.24 1.022zm2.533 7.823c-1.44 0-2.797-.622-3.825-1.746-.87-.96-1.397-1.931-1.493-3.164-.06-.813.3-1.094.788-1.044l1.988.218c.45.092.75.34.825.854.397 2.736 2.122 3.814 3.15 4.046.18.042.292.157.283.365a.412.412 0 0 1-.322.398c-.458.074-.936.073-1.394.073zm-4.101 2.418a14.216 14.216 0 0 1-2.307-.214c-1.202-.214-2.208-.582-3.072-1.13C1.41 20.095.163 17.786.014 15.048c-.037-.65-.11-1.89 1.427-1.797.638.033 1.653.343 2.368.548.887.247 1.314.933 1.314 1.608 0 3.858 3.494 6.408 5.02 6.408.654 0 .414.701.127.779-.502.136-1.15.153-1.413.153zM3.525 11.419c-.605-.109-1.194-.358-1.768-.5C-.018 10.479.284 8.688.45 8.196c1.617-4.757 6.746-6.35 10.887-6.773 3.898-.4 7.978-.092 11.778.967.31.083 1.269.327.718.891-.35.358-1.7-.016-2.073-.041-2.23-.167-4.434-.192-6.656.15-2.349.357-4.768 1.099-6.71 2.665-.938.758-1.76 1.723-2.313 2.866-.144.3-.256.6-.354.9-.11.327-.47 1.91-2.215 1.6zm9.94.917c.332-1.488 1.81-3.848 6.385-3.686 1.05.033.57.749.052.731-2.586-.09-3.815 1.578-4.457 3.27-.219.546-.68.626-1.271.53-.415-.074-.866-.123-.71-.846Z"
         /></svg
@@ -43,27 +50,17 @@
         role="img"
         viewBox="0 0 24 24"
         xmlns="http://www.w3.org/2000/svg"
-        class="fill-foreground {$$restProps.class ?? ''}"
+        class="fill-foreground {others.class ?? ''}"
         ><title>Facebook</title><path
             d="M9.101 23.691v-7.98H6.627v-3.667h2.474v-1.58c0-4.085 1.848-5.978 5.858-5.978.401 0 .955.042 1.468.103a8.68 8.68 0 0 1 1.141.195v3.325a8.623 8.623 0 0 0-.653-.036 26.805 26.805 0 0 0-.733-.009c-.707 0-1.259.096-1.675.309a1.686 1.686 0 0 0-.679.622c-.258.42-.374.995-.374 1.752v1.297h3.919l-.386 2.103-.287 1.564h-3.246v8.245C19.396 23.238 24 18.179 24 12.044c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.628 3.874 10.35 9.101 11.647Z"
         /></svg
     >
-{:else if company === 'x'}
-    <svg
-        role="img"
-        viewBox="0 0 24 24"
-        xmlns="http://www.w3.org/2000/svg"
-        class="fill-foreground {$$restProps.class ?? ''}"
-        ><title>X</title><path
-            d="M18.901 1.153h3.68l-8.04 9.19L24 22.846h-7.406l-5.8-7.584-6.638 7.584H.474l8.6-9.83L0 1.154h7.594l5.243 6.932ZM17.61 20.644h2.039L6.486 3.24H4.298Z"
-        /></svg
-    >
 {:else if company === 'reddit'}
     <svg
         role="img"
         viewBox="0 0 24 24"
         xmlns="http://www.w3.org/2000/svg"
-        class="fill-foreground {$$restProps.class ?? ''}"
+        class="fill-foreground {others.class ?? ''}"
         ><title>Reddit</title><path
             d="M12 0C5.373 0 0 5.373 0 12c0 3.314 1.343 6.314 3.515 8.485l-2.286 2.286C.775 23.225 1.097 24 1.738 24H12c6.627 0 12-5.373 12-12S18.627 0 12 0Zm4.388 3.199c1.104 0 1.999.895 1.999 1.999 0 1.105-.895 2-1.999 2-.946 0-1.739-.657-1.947-1.539v.002c-1.147.162-2.032 1.15-2.032 2.341v.007c1.776.067 3.4.567 4.686 1.363.473-.363 1.064-.58 1.707-.58 1.547 0 2.802 1.254 2.802 2.802 0 1.117-.655 2.081-1.601 2.531-.088 3.256-3.637 5.876-7.997 5.876-4.361 0-7.905-2.617-7.998-5.87-.954-.447-1.614-1.415-1.614-2.538 0-1.548 1.255-2.802 2.803-2.802.645 0 1.239.218 1.712.585 1.275-.79 2.881-1.291 4.64-1.365v-.01c0-1.663 1.263-3.034 2.88-3.207.188-.911.993-1.595 1.959-1.595Zm-8.085 8.376c-.784 0-1.459.78-1.506 1.797-.047 1.016.64 1.429 1.426 1.429.786 0 1.371-.369 1.418-1.385.047-1.017-.553-1.841-1.338-1.841Zm7.406 0c-.786 0-1.385.824-1.338 1.841.047 1.017.634 1.385 1.418 1.385.785 0 1.473-.413 1.426-1.429-.046-1.017-.721-1.797-1.506-1.797Zm-3.703 4.013c-.974 0-1.907.048-2.77.135-.147.015-.241.168-.183.305.483 1.154 1.622 1.964 2.953 1.964 1.33 0 2.47-.81 2.953-1.964.057-.137-.037-.29-.184-.305-.863-.087-1.795-.135-2.769-.135Z"
         /></svg

website/src/lib/components/Menu.svelte

@@ -51,11 +51,7 @@
     import { anySelectedLayer } from '$lib/components/map/layer-control/utils';
     import { defaultOverlays } from '$lib/assets/layers';
     import LayerControlSettings from '$lib/components/map/layer-control/LayerControlSettings.svelte';
-    import {
-        allowedPastes,
-        ListFileItem,
-        ListTrackItem,
-    } from '$lib/components/file-list/file-list';
+    import { ListFileItem, ListTrackItem } from '$lib/components/file-list/file-list';
     import Export from '$lib/components/export/Export.svelte';
     import { mode, setMode } from 'mode-watcher';
     import { i18n } from '$lib/i18n.svelte';
@@ -71,7 +67,11 @@
     } from '$lib/logic/file-actions';
     import { fileStateCollection } from '$lib/logic/file-state';
     import { fileActionManager } from '$lib/logic/file-action-manager';
-    import { selection } from '$lib/logic/selection';
+    import { copied, selection } from '$lib/logic/selection';
+    import { allHidden } from '$lib/logic/hidden';
+    import { boundsManager } from '$lib/logic/bounds';
+    import { tick } from 'svelte';
+    import { allowedPastes } from '$lib/components/file-list/sortable-file-list';
 
     const {
         distanceUnits,
@@ -89,6 +89,9 @@
         routing,
     } = settings;
 
+    const canUndo = fileActionManager.canUndo;
+    const canRedo = fileActionManager.canRedo;
+
     function switchBasemaps() {
         [$currentBasemap, $previousBasemap] = [$previousBasemap, $currentBasemap];
     }
@@ -120,13 +123,13 @@
                 </Menubar.Trigger>
                 <Menubar.Content class="border-none">
                     <Menubar.Item onclick={createFile}>
-                        <Plus size="16" class="mr-1" />
+                        <Plus size="16" />
                         {i18n._('menu.new')}
                         <Shortcut key="+" ctrl={true} />
                     </Menubar.Item>
                     <Menubar.Separator />
                     <Menubar.Item onclick={triggerFileInput}>
-                        <FolderOpen size="16" class="mr-1" />
+                        <FolderOpen size="16" />
                         {i18n._('menu.open')}
                         <Shortcut key="O" ctrl={true} />
                     </Menubar.Item>
@@ -135,25 +138,25 @@
                         onclick={fileActions.duplicateSelection}
                         disabled={$selection.size == 0}
                     >
-                        <Copy size="16" class="mr-1" />
+                        <Copy size="16" />
                         {i18n._('menu.duplicate')}
                         <Shortcut key="D" ctrl={true} />
                     </Menubar.Item>
                     <Menubar.Separator />
                     <Menubar.Item
-                        onclick={fileActions.deleteSelectedFiles}
+                        onclick={() => tick().then(fileActions.deleteSelectedFiles)}
                         disabled={$selection.size == 0}
                     >
-                        <FileX size="16" class="mr-1" />
-                        {i18n._('menu.close')}
+                        <FileX size="16" />
+                        {i18n._('menu.delete')}
                         <Shortcut key="⌫" ctrl={true} />
                     </Menubar.Item>
                     <Menubar.Item
                         onclick={fileActions.deleteAllFiles}
                         disabled={fileStateCollection.size == 0}
                     >
-                        <FileX size="16" class="mr-1" />
-                        {i18n._('menu.close_all')}
+                        <FileX size="16" />
+                        {i18n._('menu.delete_all')}
                         <Shortcut key="⌫" ctrl={true} shift={true} />
                     </Menubar.Item>
                     <Menubar.Separator />
@@ -161,7 +164,7 @@
                         onclick={() => (exportState.current = ExportState.SELECTION)}
                         disabled={$selection.size == 0}
                     >
-                        <Download size="16" class="mr-1" />
+                        <Download size="16" />
                         {i18n._('menu.export')}
                         <Shortcut key="S" ctrl={true} />
                     </Menubar.Item>
@@ -169,7 +172,7 @@
                         onclick={() => (exportState.current = ExportState.ALL)}
                         disabled={fileStateCollection.size == 0}
                     >
-                        <Download size="16" class="mr-1" />
+                        <Download size="16" />
                         {i18n._('menu.export_all')}
                         <Shortcut key="S" ctrl={true} shift={true} />
                     </Menubar.Item>
@@ -181,19 +184,13 @@
                     <span class="hidden md:block">{i18n._('menu.edit')}</span>
                 </Menubar.Trigger>
                 <Menubar.Content class="border-none">
-                    <Menubar.Item
-                        onclick={() => fileActionManager.undo()}
-                        disabled={!fileActionManager.canUndo}
-                    >
-                        <Undo2 size="16" class="mr-1" />
+                    <Menubar.Item onclick={() => fileActionManager.undo()} disabled={!$canUndo}>
+                        <Undo2 size="16" />
                         {i18n._('menu.undo')}
                         <Shortcut key="Z" ctrl={true} />
                     </Menubar.Item>
-                    <Menubar.Item
-                        onclick={() => fileActionManager.redo()}
-                        disabled={!fileActionManager.canRedo}
-                    >
-                        <Redo2 size="16" class="mr-1" />
+                    <Menubar.Item onclick={() => fileActionManager.redo()} disabled={!$canRedo}>
+                        <Redo2 size="16" />
                         {i18n._('menu.redo')}
                         <Shortcut key="Z" ctrl={true} shift={true} />
                     </Menubar.Item>
@@ -209,7 +206,7 @@
                                 )}
                         onclick={() => (editMetadata.current = true)}
                     >
-                        <Info size="16" class="mr-1" />
+                        <Info size="16" />
                         {i18n._('menu.metadata.button')}
                         <Shortcut key="I" ctrl={true} />
                     </Menubar.Item>
@@ -224,26 +221,26 @@
                                 )}
                         onclick={() => (editStyle.current = true)}
                     >
-                        <PaintBucket size="16" class="mr-1" />
+                        <PaintBucket size="16" />
                         {i18n._('menu.style.button')}
                     </Menubar.Item>
                     <Menubar.Item
                         onclick={() => {
-                            // if ($allHidden) {
-                            //     fileActions.setHiddenToSelection(false);
-                            // } else {
-                            //     fileActions.setHiddenToSelection(true);
-                            // }
+                            if ($allHidden) {
+                                fileActions.setHiddenToSelection(false);
+                            } else {
+                                fileActions.setHiddenToSelection(true);
+                            }
                         }}
                         disabled={$selection.size == 0}
                     >
-                        <!-- {#if $allHidden}
-                            <Eye size="16" class="mr-1" />
+                        {#if $allHidden}
+                            <Eye size="16" />
                             {i18n._('menu.unhide')}
                         {:else}
-                            <EyeOff size="16" class="mr-1" />
+                            <EyeOff size="16" />
                             {i18n._('menu.hide')}
-                        {/if} -->
+                        {/if}
                         <Shortcut key="H" ctrl={true} />
                     </Menubar.Item>
                     {#if $treeFileView}
@@ -256,7 +253,7 @@
                                     )}
                                 disabled={$selection.size !== 1}
                             >
-                                <Plus size="16" class="mr-1" />
+                                <Plus size="16" />
                                 {i18n._('menu.new_track')}
                             </Menubar.Item>
                         {:else if $selection
@@ -273,69 +270,70 @@
                                 }}
                                 disabled={$selection.size !== 1}
                             >
-                                <Plus size="16" class="mr-1" />
+                                <Plus size="16" />
                                 {i18n._('menu.new_segment')}
                             </Menubar.Item>
                         {/if}
                     {/if}
                     <Menubar.Separator />
                     <Menubar.Item
-                        onclick={selection.selectAll}
+                        onclick={() => selection.selectAll()}
                         disabled={fileStateCollection.size == 0}
                     >
-                        <FileStack size="16" class="mr-1" />
+                        <FileStack size="16" />
                         {i18n._('menu.select_all')}
                         <Shortcut key="A" ctrl={true} />
                     </Menubar.Item>
                     <Menubar.Item
                         onclick={() => {
                             if ($selection.size > 0) {
-                                // centerMapOnSelection();
+                                boundsManager.centerMapOnSelection();
                             }
                         }}
+                        disabled={$selection.size == 0}
                     >
-                        <Maximize size="16" class="mr-1" />
+                        <Maximize size="16" />
                         {i18n._('menu.center')}
                         <Shortcut key="⏎" ctrl={true} />
                     </Menubar.Item>
                     {#if $treeFileView}
                         <Menubar.Separator />
                         <Menubar.Item
-                            onclick={selection.copySelection}
+                            onclick={() => selection.copySelection()}
                             disabled={$selection.size === 0}
                         >
-                            <ClipboardCopy size="16" class="mr-1" />
+                            <ClipboardCopy size="16" />
                             {i18n._('menu.copy')}
                             <Shortcut key="C" ctrl={true} />
                         </Menubar.Item>
                         <Menubar.Item
-                            onclick={selection.cutSelection}
+                            onclick={() => selection.cutSelection()}
                             disabled={$selection.size === 0}
                         >
-                            <Scissors size="16" class="mr-1" />
+                            <Scissors size="16" />
                             {i18n._('menu.cut')}
                             <Shortcut key="X" ctrl={true} />
                         </Menubar.Item>
                         <Menubar.Item
-                            disabled={selection.copied === undefined ||
-                                selection.copied.length === 0 ||
+                            disabled={$copied === undefined ||
+                                $copied.length === 0 ||
                                 ($selection.size > 0 &&
-                                    !allowedPastes[selection.copied[0].level].includes(
-                                        $selection.getSelected().pop()?.level
+                                    !allowedPastes[$copied[0].level].includes(
+                                        $selection.getSelected().pop()!.level
                                     ))}
                             onclick={pasteSelection}
                         >
-                            <ClipboardPaste size="16" class="mr-1" />
+                            <ClipboardPaste size="16" />
                             {i18n._('menu.paste')}
                             <Shortcut key="V" ctrl={true} />
                         </Menubar.Item>
                     {/if}
                     <Menubar.Separator />
                     <Menubar.Item
-                        onclick={fileActions.deleteSelection}
+                        onclick={() => tick().then(fileActions.deleteSelection)}
                         disabled={$selection.size == 0}
                     >
-                        <Trash2 size="16" class="mr-1" />
+                        <Trash2 size="16" />
                         {i18n._('menu.delete')}
                         <Shortcut key="⌫" ctrl={true} />
                     </Menubar.Item>
@@ -348,42 +346,36 @@
                 </Menubar.Trigger>
                 <Menubar.Content class="border-none">
                     <Menubar.CheckboxItem bind:checked={$elevationProfile}>
-                        <ChartArea size="16" class="mr-1" />
+                        <ChartArea size="16" />
                         {i18n._('menu.elevation_profile')}
                         <Shortcut key="P" ctrl={true} />
                     </Menubar.CheckboxItem>
                     <Menubar.CheckboxItem bind:checked={$treeFileView}>
-                        <ListTree size="16" class="mr-1" />
+                        <ListTree size="16" />
                         {i18n._('menu.tree_file_view')}
                         <Shortcut key="L" ctrl={true} />
                     </Menubar.CheckboxItem>
                     <Menubar.Separator />
                     <Menubar.Item inset onclick={switchBasemaps}>
-                        <Map size="16" class="mr-1" />{i18n._('menu.switch_basemap')}<Shortcut
-                            key="F1"
-                        />
+                        <Map size="16" />{i18n._('menu.switch_basemap')}<Shortcut key="F1" />
                     </Menubar.Item>
                     <Menubar.Item inset onclick={toggleOverlays}>
-                        <Layers2 size="16" class="mr-1" />{i18n._('menu.toggle_overlays')}<Shortcut
-                            key="F2"
-                        />
+                        <Layers2 size="16" />{i18n._('menu.toggle_overlays')}<Shortcut key="F2" />
                     </Menubar.Item>
                     <Menubar.Separator />
                     <Menubar.CheckboxItem bind:checked={$distanceMarkers}>
-                        <Coins size="16" class="mr-1" />{i18n._('menu.distance_markers')}<Shortcut
-                            key="F3"
-                        />
+                        <Coins size="16" />{i18n._('menu.distance_markers')}<Shortcut key="F3" />
                     </Menubar.CheckboxItem>
                     <Menubar.CheckboxItem bind:checked={$directionMarkers}>
-                        <Milestone size="16" class="mr-1" />{i18n._(
-                            'menu.direction_markers'
-                        )}<Shortcut key="F4" />
+                        <Milestone size="16" />{i18n._('menu.direction_markers')}<Shortcut
+                            key="F4"
+                        />
                     </Menubar.CheckboxItem>
                     <Menubar.Separator />
-                    <Menubar.Item inset onclick={map.toggle3D}>
-                        <Box size="16" class="mr-1" />
+                    <Menubar.Item inset onclick={() => map.toggle3D()}>
+                        <Box size="16" />
                         {i18n._('menu.toggle_3d')}
-                        <Shortcut key="{i18n._('menu.ctrl')}+{i18n._('menu.drag')}" />
+                        <Shortcut key="{i18n._('menu.ctrl')} {i18n._('menu.drag')}" />
                     </Menubar.Item>
                 </Menubar.Content>
             </Menubar.Menu>
@@ -397,7 +389,7 @@
                 <Menubar.Content class="border-none">
                     <Menubar.Sub>
                         <Menubar.SubTrigger>
-                            <Ruler size="16" class="mr-1" />{i18n._('menu.distance_units')}
+                            <Ruler size="16" class="mr-2" />{i18n._('menu.distance_units')}
                         </Menubar.SubTrigger>
                         <Menubar.SubContent>
                             <Menubar.RadioGroup bind:value={$distanceUnits}>
@@ -415,7 +407,7 @@
                     </Menubar.Sub>
                     <Menubar.Sub>
                         <Menubar.SubTrigger>
-                            <Zap size="16" class="mr-1" />{i18n._('menu.velocity_units')}
+                            <Zap size="16" class="mr-2" />{i18n._('menu.velocity_units')}
                         </Menubar.SubTrigger>
                         <Menubar.SubContent>
                             <Menubar.RadioGroup bind:value={$velocityUnits}>
@@ -430,7 +422,7 @@
                     </Menubar.Sub>
                     <Menubar.Sub>
                         <Menubar.SubTrigger>
-                            <Thermometer size="16" class="mr-1" />{i18n._('menu.temperature_units')}
+                            <Thermometer size="16" class="mr-2" />{i18n._('menu.temperature_units')}
                         </Menubar.SubTrigger>
                         <Menubar.SubContent>
                             <Menubar.RadioGroup bind:value={$temperatureUnits}>
@@ -446,7 +438,7 @@
                     <Menubar.Separator />
                     <Menubar.Sub>
                         <Menubar.SubTrigger>
-                            <Languages size="16" class="mr-1" />
+                            <Languages size="16" class="mr-2" />
                             {i18n._('menu.language')}
                         </Menubar.SubTrigger>
                         <Menubar.SubContent>
@@ -462,9 +454,9 @@
                     <Menubar.Sub>
                         <Menubar.SubTrigger>
                             {#if mode.current === 'light' || !mode.current}
-                                <Sun size="16" class="mr-1" />
+                                <Sun size="16" class="mr-2" />
                             {:else}
-                                <Moon size="16" class="mr-1" />
+                                <Moon size="16" class="mr-2" />
                             {/if}
                             {i18n._('menu.mode')}
                         </Menubar.SubTrigger>
@@ -487,7 +479,7 @@
                     <Menubar.Separator />
                     <Menubar.Sub>
                         <Menubar.SubTrigger>
-                            <PersonStanding size="16" class="mr-1" />
+                            <PersonStanding size="16" class="mr-2" />
                             {i18n._('menu.street_view_source')}
                         </Menubar.SubTrigger>
                         <Menubar.SubContent>
@@ -502,7 +494,7 @@
                         </Menubar.SubContent>
                     </Menubar.Sub>
                     <Menubar.Item onclick={() => (layerSettingsOpen = true)}>
-                        <Layers size="16" class="mr-1" />
+                        <Layers size="16" />
                         {i18n._('menu.layers')}
                     </Menubar.Item>
                 </Menubar.Content>
@@ -531,7 +523,7 @@
                 <HeartHandshake size="18" class="md:hidden" />
                 <span class="hidden md:flex flex-row items-center">
                     {i18n._('menu.donate')}
-                    <Heart size="16" class="ml-1" fill="rgb(var(--support))" />
+                    <Heart size="16" class="ml-1" fill="var(--support)" />
                 </span>
             </Button>
         </div>
@@ -544,15 +536,18 @@
 <svelte:window
     on:keydown={(e) => {
         let targetInput =
-            e.target.tagName === 'INPUT' ||
-            e.target.tagName === 'TEXTAREA' ||
-            e.target.tagName === 'SELECT' ||
-            e.target.role === 'combobox' ||
-            e.target.role === 'radio' ||
-            e.target.role === 'menu' ||
-            e.target.role === 'menuitem' ||
-            e.target.role === 'menuitemradio' ||
-            e.target.role === 'menuitemcheckbox';
+            e &&
+            e.target &&
+            e.target instanceof HTMLElement &&
+            (e.target.tagName === 'INPUT' ||
+                e.target.tagName === 'TEXTAREA' ||
+                e.target.tagName === 'SELECT' ||
+                e.target.role === 'combobox' ||
+                e.target.role === 'radio' ||
+                e.target.role === 'menu' ||
+                e.target.role === 'menuitem' ||
+                e.target.role === 'menuitemradio' ||
+                e.target.role === 'menuitemcheckbox');
 
         if (e.key === '+' && (e.metaKey || e.ctrlKey)) {
             createFile();
@@ -625,16 +620,16 @@
             $treeFileView = !$treeFileView;
             e.preventDefault();
         } else if (e.key === 'h' && (e.metaKey || e.ctrlKey)) {
-            // if ($allHidden) {
-            //     fileActions.setHiddenToSelection(false);
-            // } else {
-            //     fileActions.setHiddenToSelection(true);
-            // }
+            if ($allHidden) {
+                fileActions.setHiddenToSelection(false);
+            } else {
+                fileActions.setHiddenToSelection(true);
+            }
             e.preventDefault();
         } else if (e.key === 'Enter' && (e.metaKey || e.ctrlKey)) {
-            // if ($selection.size > 0) {
-            //     centerMapOnSelection();
-            // }
+            if ($selection.size > 0) {
+                boundsManager.centerMapOnSelection();
+            }
         } else if (e.key === 'F1') {
             switchBasemaps();
             e.preventDefault();
@@ -657,7 +652,10 @@
             e.key === 'ArrowUp'
         ) {
             if (!targetInput) {
-                // updateSelectionFromKey(e.key === 'ArrowRight' || e.key === 'ArrowDown', e.shiftKey);
+                selection.updateFromKey(
+                    e.key === 'ArrowRight' || e.key === 'ArrowDown',
+                    e.shiftKey
+                );
                 e.preventDefault();
             }
         }
@@ -665,7 +663,7 @@
     on:dragover={(e) => e.preventDefault()}
     on:drop={(e) => {
         e.preventDefault();
-        if (e.dataTransfer.files.length > 0) {
+        if (e.dataTransfer && e.dataTransfer.files.length > 0) {
             loadFiles(e.dataTransfer.files);
         }
     }}

website/src/lib/components/ModeSwitch.svelte

@@ -4,21 +4,25 @@
     import { mode, setMode } from 'mode-watcher';
     import { i18n } from '$lib/i18n.svelte';
 
-    export let size = '20';
+    let {
+        class: className = '',
+    }: {
+        class?: string;
+    } = $props();
 </script>
 
 <Button
     variant="ghost"
     size="icon"
-    class="h-8 px-1.5 {$$props.class ?? ''}"
+    class={className}
     onclick={() => {
         setMode(mode.current === 'light' ? 'dark' : 'light');
     }}
     aria-label={i18n._('menu.mode')}
 >
     {#if mode.current === 'light'}
-        <Sun {size} />
+        <Sun />
     {:else}
-        <Moon {size} />
+        <Moon />
     {/if}
 </Button>

website/src/lib/components/Nav.svelte

@@ -3,7 +3,7 @@
     import { Button } from '$lib/components/ui/button';
     import AlgoliaDocSearch from '$lib/components/AlgoliaDocSearch.svelte';
     import ModeSwitch from '$lib/components/ModeSwitch.svelte';
-    import { BookOpenText, Home, Map } from '@lucide/svelte';
+    import { BookOpenText, House, Map } from '@lucide/svelte';
     import { i18n } from '$lib/i18n.svelte';
     import { getURLForLanguage } from '$lib/utils';
 </script>
@@ -14,19 +14,32 @@
             <Logo class="h-8 sm:hidden" iconOnly={true} width="26" />
             <Logo class="h-8 hidden sm:block" width="153" />
         </a>
-        <Button variant="link" class="text-base px-0" href={getURLForLanguage(i18n.lang, '/')}>
-            <Home size="18" />
+        <Button
+            variant="link"
+            class="text-base px-0 has-[>svg]:px-0"
+            href={getURLForLanguage(i18n.lang, '/')}
+        >
+            <House size="18" />
             {i18n._('homepage.home')}
         </Button>
-        <Button variant="link" class="text-base px-0" href={getURLForLanguage(i18n.lang, '/app')}>
+        <Button
+            data-sveltekit-reload
+            variant="link"
+            class="text-base px-0 has-[>svg]:px-0"
+            href={getURLForLanguage(i18n.lang, '/app')}
+        >
             <Map size="18" />
             {i18n._('homepage.app')}
         </Button>
-        <Button variant="link" class="text-base px-0" href={getURLForLanguage(i18n.lang, '/help')}>
+        <Button
+            variant="link"
+            class="text-base px-0 has-[>svg]:px-0"
+            href={getURLForLanguage(i18n.lang, '/help')}
+        >
             <BookOpenText size="18" />
             {i18n._('menu.help')}
         </Button>
         <AlgoliaDocSearch class="ml-auto" />
-        <ModeSwitch class="hidden xs:block" />
+        <ModeSwitch class="hidden xs:inline-flex" />
     </div>
 </nav>

website/src/lib/components/Shortcut.svelte

@@ -2,14 +2,24 @@
     import { isMac, isSafari } from '$lib/utils';
     import { onMount } from 'svelte';
     import { i18n } from '$lib/i18n.svelte';
+    import * as Kbd from '$lib/components/ui/kbd/index.js';
 
-    export let key: string | undefined = undefined;
-    export let shift: boolean = false;
-    export let ctrl: boolean = false;
-    export let click: boolean = false;
+    let {
+        key = undefined,
+        shift = false,
+        ctrl = false,
+        click = false,
+        class: className = '',
+    }: {
+        key?: string;
+        shift?: boolean;
+        ctrl?: boolean;
+        click?: boolean;
+        class?: string;
+    } = $props();
 
-    let mac = false;
-    let safari = false;
+    let mac = $state(false);
+    let safari = $state(false);
 
     onMount(() => {
         mac = isMac();
@@ -17,20 +27,17 @@
     });
 </script>
 
-<div
-    class="ml-auto pl-2 text-xs tracking-widest text-muted-foreground flex flex-row gap-0 items-baseline"
-    {...$$props}
->
+<Kbd.Root class="ml-auto {className}">
     {#if shift}
-        <span>⇧</span>
+        ⇧
     {/if}
     {#if ctrl}
-        <span>{mac && !safari ? '⌘' : i18n._('menu.ctrl') + '+'}</span>
+        {mac && !safari ? '⌘' : i18n._('menu.ctrl')}
     {/if}
     {#if key}
-        <span class={key === '+' ? 'font-medium text-sm/4' : ''}>{key}</span>
+        {key}
     {/if}
     {#if click}
-        <span>{i18n._('menu.click')}</span>
+        {i18n._('menu.click')}
     {/if}
-</div>
+</Kbd.Root>

website/src/lib/components/Tooltip.svelte

@@ -1,19 +1,31 @@
 <script lang="ts">
     import * as Tooltip from '$lib/components/ui/tooltip/index.js';
+    import type { Snippet } from 'svelte';
 
-    export let label: string;
-    export let side: 'top' | 'right' | 'bottom' | 'left' = 'top';
+    let {
+        label,
+        side = 'top',
+        children,
+        extra,
+        class: className = '',
+    }: {
+        label: string;
+        side?: 'top' | 'right' | 'bottom' | 'left';
+        children: Snippet;
+        extra?: Snippet;
+        class?: string;
+    } = $props();
 </script>
 
 <Tooltip.Provider>
     <Tooltip.Root>
-        <Tooltip.Trigger {...$$restProps} aria-label={label}>
-            <slot />
+        <Tooltip.Trigger class={className} aria-label={label}>
+            {@render children()}
         </Tooltip.Trigger>
         <Tooltip.Content {side}>
-            <div class="flex flex-row items-center">
+            <div class="flex flex-row items-center gap-2">
                 <span>{label}</span>
-                <slot name="extra" />
+                {@render extra?.()}
             </div>
         </Tooltip.Content>
     </Tooltip.Root>

website/src/lib/components/collapsible-tree/CollapsibleTreeNode.svelte

@@ -34,9 +34,10 @@
         <Collapsible.Trigger class="w-full">
             <Button
                 variant="ghost"
-                class="w-full flex flex-row {side === 'right'
+                size="icon"
+                class="w-full flex flex-row gap-1 {side === 'right'
                     ? 'justify-between'
-                    : 'justify-start'} py-0 px-1 h-fit {nohover
+                    : 'justify-start pl-1'} h-fit {nohover
                     ? 'hover:bg-background'
                     : ''} pointer-events-none"
             >
@@ -60,9 +61,10 @@
     {:else}
         <Button
             variant="ghost"
-            class="w-full flex flex-row {side === 'right'
+            size="icon"
+            class="w-full flex flex-row gap-1 {side === 'right'
                 ? 'justify-between'
-                : 'justify-start'} py-0 px-1 h-fit {nohover ? 'hover:bg-background' : ''}"
+                : 'justify-start pl-1'} h-fit {nohover ? 'hover:bg-background' : ''}"
         >
             {#if side === 'left'}
                 <Collapsible.Trigger>
@@ -85,8 +87,7 @@
             {/if}
         </Button>
     {/if}
-
-    <Collapsible.Content class="ml-2">
+    <Collapsible.Content>
         {@render props.content()}
     </Collapsible.Content>
 </Collapsible.Root>

website/src/lib/components/elevation-profile/ElevationProfile.svelte

@@ -0,0 +1,203 @@
+<script lang="ts">
+    import ButtonWithTooltip from '$lib/components/ButtonWithTooltip.svelte';
+    import * as Popover from '$lib/components/ui/popover/index.js';
+    import * as ToggleGroup from '$lib/components/ui/toggle-group/index.js';
+    import Separator from '$lib/components/ui/separator/separator.svelte';
+    import { onDestroy, onMount } from 'svelte';
+    import {
+        BrickWall,
+        TriangleRight,
+        HeartPulse,
+        Orbit,
+        SquareActivity,
+        Thermometer,
+        Zap,
+        Circle,
+        Check,
+        ChartNoAxesColumn,
+        Construction,
+    } from '@lucide/svelte';
+    import type { Readable, Writable } from 'svelte/store';
+    import type { GPXGlobalStatistics, GPXStatisticsGroup } from 'gpx';
+    import { settings } from '$lib/logic/settings';
+    import { i18n } from '$lib/i18n.svelte';
+    import { ElevationProfile } from '$lib/components/elevation-profile/elevation-profile';
+
+    const { velocityUnits } = settings;
+
+    let {
+        gpxStatistics,
+        slicedGPXStatistics,
+        additionalDatasets,
+        elevationFill,
+        showControls = true,
+    }: {
+        gpxStatistics: Readable<GPXStatisticsGroup>;
+        slicedGPXStatistics: Writable<[GPXGlobalStatistics, number, number] | undefined>;
+        additionalDatasets: Writable<string[]>;
+        elevationFill: Writable<'slope' | 'surface' | 'highway' | undefined>;
+        showControls?: boolean;
+    } = $props();
+
+    let canvas: HTMLCanvasElement;
+    let overlay: HTMLCanvasElement;
+    let elevationProfile: ElevationProfile | null = null;
+
+    onMount(() => {
+        elevationProfile = new ElevationProfile(
+            gpxStatistics,
+            slicedGPXStatistics,
+            additionalDatasets,
+            elevationFill,
+            canvas,
+            overlay
+        );
+    });
+
+    onDestroy(() => {
+        if (elevationProfile) {
+            elevationProfile.destroy();
+        }
+    });
+</script>
+
+<div class="h-full grow min-w-0 relative py-2">
+    <canvas bind:this={overlay} class="w-full h-full absolute pointer-events-none"></canvas>
+    <canvas bind:this={canvas} class="w-full h-full absolute"></canvas>
+    {#if showControls}
+        <div class="absolute bottom-10 right-1.5">
+            <Popover.Root>
+                <Popover.Trigger>
+                    <ButtonWithTooltip
+                        label={i18n._('chart.settings')}
+                        variant="outline"
+                        side="left"
+                        class="w-7 h-7 p-0 flex justify-center opacity-70 hover:opacity-100 transition-opacity duration-300 hover:bg-background"
+                    >
+                        <ChartNoAxesColumn size="18" />
+                    </ButtonWithTooltip>
+                </Popover.Trigger>
+                <Popover.Content
+                    class="w-fit p-0 flex flex-col"
+                    side="top"
+                    align="end"
+                    sideOffset={-32}
+                >
+                    <ToggleGroup.Root
+                        class="flex flex-col items-start gap-0 p-1 w-full border-none"
+                        type="single"
+                        bind:value={$elevationFill}
+                    >
+                        <ToggleGroup.Item
+                            class="p-0 pr-1.5 h-6 w-full gap-1.5 rounded flex justify-start data-[state=on]:bg-background data-[state=on]:hover:bg-accent hover:bg-accent hover:text-foreground"
+                            value="slope"
+                        >
+                            <div class="w-6 flex justify-center items-center">
+                                {#if $elevationFill === 'slope'}
+                                    <Circle class="size-1.5 fill-current text-current" />
+                                {/if}
+                            </div>
+                            <TriangleRight size="15" />
+                            {i18n._('quantities.slope')}
+                        </ToggleGroup.Item>
+                        <ToggleGroup.Item
+                            class="p-0 pr-1.5 h-6 w-full gap-1.5 rounded flex justify-start data-[state=on]:bg-background data-[state=on]:hover:bg-accent hover:bg-accent hover:text-foreground"
+                            value="surface"
+                            variant="outline"
+                        >
+                            <div class="w-6 flex justify-center items-center">
+                                {#if $elevationFill === 'surface'}
+                                    <Circle class="size-1.5 fill-current text-current" />
+                                {/if}
+                            </div>
+                            <BrickWall size="15" />
+                            {i18n._('quantities.surface')}
+                        </ToggleGroup.Item>
+                        <ToggleGroup.Item
+                            class="p-0 pr-1.5 h-6 w-full gap-1.5 rounded flex justify-start data-[state=on]:bg-background data-[state=on]:hover:bg-accent hover:bg-accent hover:text-foreground"
+                            value="highway"
+                            variant="outline"
+                        >
+                            <div class="w-6 flex justify-center items-center">
+                                {#if $elevationFill === 'highway'}
+                                    <Circle class="size-1.5 fill-current text-current" />
+                                {/if}
+                            </div>
+                            <Construction size="15" />
+                            {i18n._('quantities.highway')}
+                        </ToggleGroup.Item>
+                    </ToggleGroup.Root>
+                    <Separator />
+                    <ToggleGroup.Root
+                        class="flex flex-col items-start gap-0 p-1"
+                        type="multiple"
+                        bind:value={$additionalDatasets}
+                    >
+                        <ToggleGroup.Item
+                            class="p-0 pr-1.5 h-6 w-full gap-1.5 rounded flex justify-start data-[state=on]:bg-background data-[state=on]:hover:bg-accent hover:bg-accent hover:text-foreground"
+                            value="speed"
+                        >
+                            <div class="w-6 flex justify-center items-center">
+                                {#if $additionalDatasets.includes('speed')}
+                                    <Check size="14" />
+                                {/if}
+                            </div>
+                            <Zap size="15" />
+                            {$velocityUnits === 'speed'
+                                ? i18n._('quantities.speed')
+                                : i18n._('quantities.pace')}
+                        </ToggleGroup.Item>
+                        <ToggleGroup.Item
+                            class="p-0 pr-1.5 h-6 w-full gap-1.5 rounded flex justify-start data-[state=on]:bg-background data-[state=on]:hover:bg-accent hover:bg-accent hover:text-foreground"
+                            value="hr"
+                        >
+                            <div class="w-6 flex justify-center items-center">
+                                {#if $additionalDatasets.includes('hr')}
+                                    <Check size="14" />
+                                {/if}
+                            </div>
+                            <HeartPulse size="15" />
+                            {i18n._('quantities.heartrate')}
+                        </ToggleGroup.Item>
+                        <ToggleGroup.Item
+                            class="p-0 pr-1.5 h-6 w-full gap-1.5 rounded flex justify-start data-[state=on]:bg-background data-[state=on]:hover:bg-accent hover:bg-accent hover:text-foreground"
+                            value="cad"
+                        >
+                            <div class="w-6 flex justify-center items-center">
+                                {#if $additionalDatasets.includes('cad')}
+                                    <Check size="14" />
+                                {/if}
+                            </div>
+                            <Orbit size="15" />
+                            {i18n._('quantities.cadence')}
+                        </ToggleGroup.Item>
+                        <ToggleGroup.Item
+                            class="p-0 pr-1.5 h-6 w-full gap-1.5 rounded flex justify-start data-[state=on]:bg-background data-[state=on]:hover:bg-accent hover:bg-accent hover:text-foreground"
+                            value="atemp"
+                        >
+                            <div class="w-6 flex justify-center items-center">
+                                {#if $additionalDatasets.includes('atemp')}
+                                    <Check size="14" />
+                                {/if}
+                            </div>
+                            <Thermometer size="15" />
+                            {i18n._('quantities.temperature')}
+                        </ToggleGroup.Item>
+                        <ToggleGroup.Item
+                            class="p-0 pr-1.5 h-6 w-full gap-1.5 rounded flex justify-start data-[state=on]:bg-background data-[state=on]:hover:bg-accent hover:bg-accent hover:text-foreground"
+                            value="power"
+                        >
+                            <div class="w-6 flex justify-center items-center">
+                                {#if $additionalDatasets.includes('power')}
+                                    <Check size="14" />
+                                {/if}
+                            </div>
+                            <SquareActivity size="15" />
+                            {i18n._('quantities.power')}
+                        </ToggleGroup.Item>
+                    </ToggleGroup.Root>
+                </Popover.Content>
+            </Popover.Root>
+        </div>
+    {/if}
+</div>

website/src/lib/components/elevation-profile/elevation-profile.ts

@@ -0,0 +1,644 @@
+import { i18n } from '$lib/i18n.svelte';
+import { settings } from '$lib/logic/settings';
+import {
+    getCadenceWithUnits,
+    getConvertedDistance,
+    getConvertedElevation,
+    getConvertedTemperature,
+    getConvertedVelocity,
+    getDistanceUnits,
+    getDistanceWithUnits,
+    getElevationWithUnits,
+    getHeartRateWithUnits,
+    getPowerWithUnits,
+    getTemperatureWithUnits,
+    getVelocityWithUnits,
+} from '$lib/units';
+import Chart, {
+    type ChartEvent,
+    type ChartOptions,
+    type ScriptableLineSegmentContext,
+    type TooltipItem,
+} from 'chart.js/auto';
+import mapboxgl from 'mapbox-gl';
+import { get, type Readable, type Writable } from 'svelte/store';
+import { map } from '$lib/components/map/map';
+import type { GPXGlobalStatistics, GPXStatisticsGroup } from 'gpx';
+import { mode } from 'mode-watcher';
+import { getHighwayColor, getSlopeColor, getSurfaceColor } from '$lib/assets/colors';
+
+const { distanceUnits, velocityUnits, temperatureUnits } = settings;
+
+Chart.defaults.font.family =
+    'ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"'; // Tailwind CSS font
+
+interface ElevationProfilePoint {
+    x: number;
+    y: number;
+    time?: Date;
+    slope: {
+        at: number;
+        segment: number;
+        length: number;
+    };
+    extensions: Record<string, any>;
+    coordinates: [number, number];
+    index: number;
+}
+
+export class ElevationProfile {
+    private _chart: Chart | null = null;
+    private _canvas: HTMLCanvasElement;
+    private _overlay: HTMLCanvasElement;
+    private _marker: mapboxgl.Marker | null = null;
+    private _dragging = false;
+    private _panning = false;
+
+    private _gpxStatistics: Readable<GPXStatisticsGroup>;
+    private _slicedGPXStatistics: Writable<[GPXGlobalStatistics, number, number] | undefined>;
+    private _additionalDatasets: Readable<string[]>;
+    private _elevationFill: Readable<'slope' | 'surface' | 'highway' | undefined>;
+
+    constructor(
+        gpxStatistics: Readable<GPXStatisticsGroup>,
+        slicedGPXStatistics: Writable<[GPXGlobalStatistics, number, number] | undefined>,
+        additionalDatasets: Readable<string[]>,
+        elevationFill: Readable<'slope' | 'surface' | 'highway' | undefined>,
+        canvas: HTMLCanvasElement,
+        overlay: HTMLCanvasElement
+    ) {
+        this._gpxStatistics = gpxStatistics;
+        this._slicedGPXStatistics = slicedGPXStatistics;
+        this._additionalDatasets = additionalDatasets;
+        this._elevationFill = elevationFill;
+        this._canvas = canvas;
+        this._overlay = overlay;
+
+        let element = document.createElement('div');
+        element.className = 'h-4 w-4 rounded-full bg-cyan-500 border-2 border-white';
+        this._marker = new mapboxgl.Marker({
+            element,
+        });
+
+        import('chartjs-plugin-zoom').then((module) => {
+            Chart.register(module.default);
+            this.initialize();
+
+            this._gpxStatistics.subscribe(() => {
+                this.updateData();
+            });
+            this._slicedGPXStatistics.subscribe(() => {
+                this.updateOverlay();
+            });
+            distanceUnits.subscribe(() => {
+                this.updateData();
+            });
+            velocityUnits.subscribe(() => {
+                this.updateData();
+            });
+            temperatureUnits.subscribe(() => {
+                this.updateData();
+            });
+            this._additionalDatasets.subscribe(() => {
+                this.updateDataVisibility();
+            });
+            this._elevationFill.subscribe(() => {
+                this.updateFill();
+            });
+        });
+    }
+
+    initialize() {
+        let options: ChartOptions<'line'> = {
+            animation: false,
+            parsing: false,
+            maintainAspectRatio: false,
+            scales: {
+                x: {
+                    type: 'linear',
+                    ticks: {
+                        callback: function (value: number | string) {
+                            return `${(value as number).toFixed(1).replace(/\.0+$/, '')} ${getDistanceUnits()}`;
+                        },
+                        align: 'inner',
+                        maxRotation: 0,
+                    },
+                },
+                y: {
+                    type: 'linear',
+                    ticks: {
+                        callback: function (value: number | string) {
+                            return getElevationWithUnits(value as number, false);
+                        },
+                    },
+                },
+            },
+            datasets: {
+                line: {
+                    pointRadius: 0,
+                    tension: 0.4,
+                    borderWidth: 2,
+                    cubicInterpolationMode: 'monotone',
+                },
+            },
+            interaction: {
+                mode: 'nearest',
+                axis: 'x',
+                intersect: false,
+            },
+            plugins: {
+                legend: {
+                    display: false,
+                },
+                decimation: {
+                    enabled: true,
+                },
+                tooltip: {
+                    enabled: () => !this._dragging && !this._panning,
+                    callbacks: {
+                        title: () => {
+                            return '';
+                        },
+                        label: (context: TooltipItem<'line'>) => {
+                            let point = context.raw as ElevationProfilePoint;
+                            if (context.datasetIndex === 0) {
+                                const map_ = get(map);
+                                if (map_ && this._marker) {
+                                    if (this._dragging) {
+                                        this._marker.remove();
+                                    } else {
+                                        this._marker.setLngLat(point.coordinates);
+                                        this._marker.addTo(map_);
+                                    }
+                                }
+                                return `${i18n._('quantities.elevation')}: ${getElevationWithUnits(point.y, false)}`;
+                            } else if (context.datasetIndex === 1) {
+                                return `${get(velocityUnits) === 'speed' ? i18n._('quantities.speed') : i18n._('quantities.pace')}: ${getVelocityWithUnits(point.y, false)}`;
+                            } else if (context.datasetIndex === 2) {
+                                return `${i18n._('quantities.heartrate')}: ${getHeartRateWithUnits(point.y)}`;
+                            } else if (context.datasetIndex === 3) {
+                                return `${i18n._('quantities.cadence')}: ${getCadenceWithUnits(point.y)}`;
+                            } else if (context.datasetIndex === 4) {
+                                return `${i18n._('quantities.temperature')}: ${getTemperatureWithUnits(point.y, false)}`;
+                            } else if (context.datasetIndex === 5) {
+                                return `${i18n._('quantities.power')}: ${getPowerWithUnits(point.y)}`;
+                            }
+                        },
+                        afterBody: (contexts: TooltipItem<'line'>[]) => {
+                            let context = contexts.filter((context) => context.datasetIndex === 0);
+                            if (context.length === 0) return;
+                            let point = context[0].raw as ElevationProfilePoint;
+                            let slope = {
+                                at: point.slope.at.toFixed(1),
+                                segment: point.slope.segment.toFixed(1),
+                                length: getDistanceWithUnits(point.slope.length),
+                            };
+                            let surface = point.extensions.surface
+                                ? point.extensions.surface
+                                : 'unknown';
+                            let highway = point.extensions.highway
+                                ? point.extensions.highway
+                                : 'unknown';
+                            let sacScale = point.extensions.sac_scale;
+                            let mtbScale = point.extensions.mtb_scale;
+
+                            let labels = [
+                                `    ${i18n._('quantities.distance')}: ${getDistanceWithUnits(point.x, false)}`,
+                                `    ${i18n._('quantities.slope')}: ${slope.at} %${get(this._elevationFill) === 'slope' ? ` (${slope.length} @${slope.segment} %)` : ''}`,
+                            ];
+
+                            if (get(this._elevationFill) === 'surface') {
+                                labels.push(
+                                    `    ${i18n._('quantities.surface')}: ${i18n._(`toolbar.routing.surface.${surface}`)}`
+                                );
+                            }
+
+                            if (get(this._elevationFill) === 'highway') {
+                                labels.push(
+                                    `    ${i18n._('quantities.highway')}: ${i18n._(`toolbar.routing.highway.${highway}`)}${
+                                        sacScale
+                                            ? ` (${i18n._(`toolbar.routing.sac_scale.${sacScale}`)})`
+                                            : ''
+                                    }`
+                                );
+                                if (mtbScale) {
+                                    labels.push(
+                                        `    ${i18n._('toolbar.routing.mtb_scale')}: ${mtbScale}`
+                                    );
+                                }
+                            }
+
+                            if (point.time) {
+                                labels.push(
+                                    `    ${i18n._('quantities.time')}: ${i18n.df.format(point.time)}`
+                                );
+                            }
+
+                            return labels;
+                        },
+                    },
+                },
+                zoom: {
+                    pan: {
+                        enabled: true,
+                        mode: 'x',
+                        modifierKey: 'shift',
+                        onPanStart: () => {
+                            this._panning = true;
+                            this._slicedGPXStatistics.set(undefined);
+                            return true;
+                        },
+                        onPanComplete: () => {
+                            this._panning = false;
+                        },
+                    },
+                    zoom: {
+                        wheel: {
+                            enabled: true,
+                        },
+                        mode: 'x',
+                        onZoomStart: ({ chart, event }: { chart: Chart; event: any }) => {
+                            if (!this._chart) {
+                                return false;
+                            }
+                            const maxZoom = this._chart.getInitialScaleBounds()?.x?.max ?? 0;
+                            if (
+                                event.deltaY < 0 &&
+                                Math.abs(maxZoom / this._chart.getZoomLevel()) < 0.01
+                            ) {
+                                // Disable wheel pan if zoomed in to the max, and zooming in
+                                return false;
+                            }
+
+                            this._slicedGPXStatistics.set(undefined);
+                        },
+                    },
+                    limits: {
+                        x: {
+                            min: 'original',
+                            max: 'original',
+                            minRange: 1,
+                        },
+                    },
+                },
+            },
+            onResize: () => {
+                this.updateOverlay();
+            },
+        };
+
+        let datasets: string[] = ['speed', 'hr', 'cad', 'atemp', 'power'];
+        datasets.forEach((id) => {
+            options.scales![`y${id}`] = {
+                type: 'linear',
+                position: 'right',
+                grid: {
+                    display: false,
+                },
+                reverse: () => id === 'speed' && get(velocityUnits) === 'pace',
+                display: false,
+            };
+        });
+
+        this._chart = new Chart(this._canvas, {
+            type: 'line',
+            data: {
+                datasets: [],
+            },
+            options,
+            plugins: [
+                {
+                    id: 'toggleMarker',
+                    events: ['mouseout'],
+                    afterEvent: (chart: Chart, args: { event: ChartEvent }) => {
+                        if (args.event.type === 'mouseout') {
+                            const map_ = get(map);
+                            if (map_ && this._marker) {
+                                this._marker.remove();
+                            }
+                        }
+                    },
+                },
+            ],
+        });
+
+        let startIndex = 0;
+        let endIndex = 0;
+        const getIndex = (evt: PointerEvent) => {
+            if (!this._chart) {
+                return undefined;
+            }
+            const points = this._chart.getElementsAtEventForMode(
+                evt,
+                'x',
+                {
+                    intersect: false,
+                },
+                true
+            );
+
+            if (points.length === 0) {
+                const rect = this._canvas.getBoundingClientRect();
+                if (evt.x - rect.left <= this._chart.chartArea.left) {
+                    return 0;
+                } else if (evt.x - rect.left >= this._chart.chartArea.right) {
+                    return this._chart.data.datasets[0].data.length - 1;
+                } else {
+                    return undefined;
+                }
+            }
+
+            const point = points.find((point) => (point.element as any).raw);
+            if (point) {
+                return (point.element as any).raw.index;
+            } else {
+                return points[0].index;
+            }
+        };
+
+        let dragStarted = false;
+        const onMouseDown = (evt: PointerEvent) => {
+            if (evt.shiftKey) {
+                // Panning interaction
+                return;
+            }
+            dragStarted = true;
+            this._canvas.style.cursor = 'col-resize';
+            startIndex = getIndex(evt);
+        };
+        const onMouseMove = (evt: PointerEvent) => {
+            if (dragStarted) {
+                this._dragging = true;
+                endIndex = getIndex(evt);
+                if (endIndex !== undefined) {
+                    if (startIndex === undefined) {
+                        startIndex = endIndex;
+                    } else if (startIndex !== endIndex) {
+                        this._slicedGPXStatistics.set([
+                            get(this._gpxStatistics).sliced(
+                                Math.min(startIndex, endIndex),
+                                Math.max(startIndex, endIndex)
+                            ),
+                            Math.min(startIndex, endIndex),
+                            Math.max(startIndex, endIndex),
+                        ]);
+                    }
+                }
+            }
+        };
+        const onMouseUp = (evt: PointerEvent) => {
+            dragStarted = false;
+            this._dragging = false;
+            this._canvas.style.cursor = '';
+            endIndex = getIndex(evt);
+            if (startIndex === endIndex) {
+                this._slicedGPXStatistics.set(undefined);
+            }
+        };
+        this._canvas.addEventListener('pointerdown', onMouseDown);
+        this._canvas.addEventListener('pointermove', onMouseMove);
+        this._canvas.addEventListener('pointerup', onMouseUp);
+    }
+
+    updateData() {
+        if (!this._chart) {
+            return;
+        }
+        const data = get(this._gpxStatistics);
+        const units = {
+            distance: get(distanceUnits),
+            velocity: get(velocityUnits),
+            temperature: get(temperatureUnits),
+        };
+
+        const datasets: Array<Array<any>> = [[], [], [], [], [], []];
+        data.forEachTrackPoint((trkpt, distance, speed, slope, index) => {
+            datasets[0].push({
+                x: getConvertedDistance(distance, units.distance),
+                y: trkpt.ele ? getConvertedElevation(trkpt.ele, units.distance) : 0,
+                time: trkpt.time,
+                slope: slope,
+                extensions: trkpt.getExtensions(),
+                coordinates: trkpt.getCoordinates(),
+                index: index,
+            });
+            if (data.global.time.total > 0) {
+                datasets[1].push({
+                    x: getConvertedDistance(distance, units.distance),
+                    y: getConvertedVelocity(speed, units.velocity, units.distance),
+                    index: index,
+                });
+            }
+            if (data.global.hr.count > 0) {
+                datasets[2].push({
+                    x: getConvertedDistance(distance, units.distance),
+                    y: trkpt.getHeartRate(),
+                    index: index,
+                });
+            }
+            if (data.global.cad.count > 0) {
+                datasets[3].push({
+                    x: getConvertedDistance(distance, units.distance),
+                    y: trkpt.getCadence(),
+                    index: index,
+                });
+            }
+            if (data.global.atemp.count > 0) {
+                datasets[4].push({
+                    x: getConvertedDistance(distance, units.distance),
+                    y: getConvertedTemperature(trkpt.getTemperature(), units.temperature),
+                    index: index,
+                });
+            }
+            if (data.global.power.count > 0) {
+                datasets[5].push({
+                    x: getConvertedDistance(distance, units.distance),
+                    y: trkpt.getPower(),
+                    index: index,
+                });
+            }
+        });
+
+        this._chart.data.datasets[0] = {
+            label: i18n._('quantities.elevation'),
+            data: datasets[0],
+            normalized: true,
+            fill: 'start',
+            order: 1,
+            segment: {},
+        };
+        this._chart.data.datasets[1] = {
+            data: datasets[1],
+            normalized: true,
+            yAxisID: 'yspeed',
+        };
+        this._chart.data.datasets[2] = {
+            data: datasets[2],
+            normalized: true,
+            yAxisID: 'yhr',
+        };
+        this._chart.data.datasets[3] = {
+            data: datasets[3],
+            normalized: true,
+            yAxisID: 'ycad',
+        };
+        this._chart.data.datasets[4] = {
+            data: datasets[4],
+            normalized: true,
+            yAxisID: 'yatemp',
+        };
+        this._chart.data.datasets[5] = {
+            data: datasets[5],
+            normalized: true,
+            yAxisID: 'ypower',
+        };
+
+        this._chart.options.scales!.x!['min'] = 0;
+        this._chart.options.scales!.x!['max'] = getConvertedDistance(
+            data.global.distance.total,
+            units.distance
+        );
+
+        this.setVisibility();
+        this.setFill();
+
+        this._chart.update();
+    }
+
+    updateDataVisibility() {
+        if (!this._chart) {
+            return;
+        }
+        this.setVisibility();
+        this._chart.update();
+    }
+
+    setVisibility() {
+        if (!this._chart) {
+            return;
+        }
+
+        const additionalDatasets = get(this._additionalDatasets);
+        let includeSpeed = additionalDatasets.includes('speed');
+        let includeHeartRate = additionalDatasets.includes('hr');
+        let includeCadence = additionalDatasets.includes('cad');
+        let includeTemperature = additionalDatasets.includes('atemp');
+        let includePower = additionalDatasets.includes('power');
+        if (this._chart.data.datasets.length == 6) {
+            this._chart.data.datasets[1].hidden = !includeSpeed;
+            this._chart.data.datasets[2].hidden = !includeHeartRate;
+            this._chart.data.datasets[3].hidden = !includeCadence;
+            this._chart.data.datasets[4].hidden = !includeTemperature;
+            this._chart.data.datasets[5].hidden = !includePower;
+        }
+    }
+
+    updateFill() {
+        if (!this._chart) {
+            return;
+        }
+        this.setFill();
+        this._chart.update();
+    }
+
+    setFill() {
+        if (!this._chart) {
+            return;
+        }
+        const elevationFill = get(this._elevationFill);
+        const dataset = this._chart.data.datasets[0];
+        let segment: any = {};
+        if (elevationFill === 'slope') {
+            segment = {
+                backgroundColor: this.slopeFillCallback,
+            };
+        } else if (elevationFill === 'surface') {
+            segment = {
+                backgroundColor: this.surfaceFillCallback,
+            };
+        } else if (elevationFill === 'highway') {
+            segment = {
+                backgroundColor: this.highwayFillCallback,
+            };
+        } else {
+            segment = {};
+        }
+        Object.assign(dataset, { segment });
+    }
+
+    updateOverlay() {
+        if (!this._chart) {
+            return;
+        }
+
+        this._overlay.width = this._canvas.width / window.devicePixelRatio;
+        this._overlay.height = this._canvas.height / window.devicePixelRatio;
+        this._overlay.style.width = `${this._overlay.width}px`;
+        this._overlay.style.height = `${this._overlay.height}px`;
+
+        const slicedGPXStatistics = get(this._slicedGPXStatistics);
+        if (slicedGPXStatistics) {
+            let startIndex = slicedGPXStatistics[1];
+            let endIndex = slicedGPXStatistics[2];
+
+            // Draw selection rectangle
+            let selectionContext = this._overlay.getContext('2d');
+            if (selectionContext) {
+                selectionContext.fillStyle = mode.current === 'dark' ? 'white' : 'black';
+                selectionContext.globalAlpha = mode.current === 'dark' ? 0.2 : 0.1;
+                selectionContext.clearRect(0, 0, this._overlay.width, this._overlay.height);
+
+                const gpxStatistics = get(this._gpxStatistics);
+                let startPixel = this._chart.scales.x.getPixelForValue(
+                    getConvertedDistance(
+                        gpxStatistics.getTrackPoint(startIndex)?.distance.total ?? 0
+                    )
+                );
+                let endPixel = this._chart.scales.x.getPixelForValue(
+                    getConvertedDistance(gpxStatistics.getTrackPoint(endIndex)?.distance.total ?? 0)
+                );
+
+                selectionContext.fillRect(
+                    startPixel,
+                    this._chart.chartArea.top,
+                    endPixel - startPixel,
+                    this._chart.chartArea.height
+                );
+            }
+        } else if (this._overlay) {
+            let selectionContext = this._overlay.getContext('2d');
+            if (selectionContext) {
+                selectionContext.clearRect(0, 0, this._overlay.width, this._overlay.height);
+            }
+        }
+    }
+
+    slopeFillCallback(context: ScriptableLineSegmentContext & { p0: { raw: any } }) {
+        const point = context.p0.raw as ElevationProfilePoint;
+        return getSlopeColor(point.slope.segment);
+    }
+
+    surfaceFillCallback(context: ScriptableLineSegmentContext & { p0: { raw: any } }) {
+        const point = context.p0.raw as ElevationProfilePoint;
+        return getSurfaceColor(point.extensions.surface);
+    }
+
+    highwayFillCallback(context: ScriptableLineSegmentContext & { p0: { raw: any } }) {
+        const point = context.p0.raw as ElevationProfilePoint;
+        return getHighwayColor(
+            point.extensions.highway,
+            point.extensions.sac_scale,
+            point.extensions.mtb_scale
+        );
+    }
+
+    destroy() {
+        if (this._chart) {
+            this._chart.destroy();
+            this._chart = null;
+        }
+        if (this._marker) {
+            this._marker.remove();
+        }
+    }
+}

website/src/lib/components/embedding/Embedding.svelte

@@ -1,43 +1,39 @@
 <script lang="ts">
-    // import GPXLayers from '$lib/components/map/gpx-layer/GPXLayers.svelte';
-    // import ElevationProfile from '$lib/components/ElevationProfile.svelte';
-    // import FileList from '$lib/components/file-list/FileList.svelte';
-    // import GPXStatistics from '$lib/components/GPXStatistics.svelte';
+    import GPXLayers from '$lib/components/map/gpx-layer/GPXLayers.svelte';
+    import ElevationProfile from '$lib/components/elevation-profile/ElevationProfile.svelte';
+    import FileList from '$lib/components/file-list/FileList.svelte';
+    import GPXStatistics from '$lib/components/GPXStatistics.svelte';
     import Map from '$lib/components/map/Map.svelte';
-    import { map } from '$lib/components/map/map';
-    // import LayerControl from '$lib/components/map/layer-control/LayerControl.svelte';
+    import LayerControl from '$lib/components/map/layer-control/LayerControl.svelte';
     import OpenIn from '$lib/components/embedding/OpenIn.svelte';
-    import {
-        gpxStatistics,
-        slicedGPXStatistics,
-        embedding,
-        loadFile,
-        updateGPXData,
-    } from '$lib/stores';
-    import { onDestroy, onMount, setContext } from 'svelte';
-    import { readable } from 'svelte/store';
+    import { writable } from 'svelte/store';
     import type { GPXFile } from 'gpx';
-    import { ListFileItem } from '$lib/components/file-list/file-list';
     import {
         allowedEmbeddingBasemaps,
         getFilesFromEmbeddingOptions,
         type EmbeddingOptions,
-    } from './Embedding';
-    import { mode, setMode } from 'mode-watcher';
-    import { browser } from '$app/environment';
+    } from './embedding';
+    import { setMode } from 'mode-watcher';
     import { settings } from '$lib/logic/settings';
     import { fileStateCollection } from '$lib/logic/file-state';
+    import { gpxStatistics, slicedGPXStatistics } from '$lib/logic/statistics';
+    import { loadFile } from '$lib/logic/file-actions';
+    import { selection } from '$lib/logic/selection';
+    import { untrack } from 'svelte';
+    import { isSelected, toggle } from '$lib/components/map/layer-control/utils';
 
     let {
         useHash = true,
         options = $bindable(),
-        hash,
+        hash = $bindable(),
     }: { useHash?: boolean; options: EmbeddingOptions; hash: string } = $props();
 
-    setContext('embedding', true);
+    let additionalDatasets = writable<string[]>([]);
+    let elevationFill = writable<'slope' | 'surface' | 'highway' | undefined>(undefined);
 
     const {
         currentBasemap,
+        selectedBasemapTree,
         distanceUnits,
         velocityUnits,
         temperatureUnits,
@@ -46,190 +42,77 @@
         directionMarkers,
     } = settings;
 
-    let prevSettings: {
-        distanceMarkers: boolean;
-        directionMarkers: boolean;
-        distanceUnits: 'metric' | 'imperial' | 'nautical';
-        velocityUnits: 'speed' | 'pace';
-        temperatureUnits: 'celsius' | 'fahrenheit';
-        theme: 'light' | 'dark' | 'system';
-    } = {
-        distanceMarkers: false,
-        directionMarkers: false,
-        distanceUnits: 'metric',
-        velocityUnits: 'speed',
-        temperatureUnits: 'celsius',
-        theme: 'system',
-    };
+    settings.initialize();
 
     function applyOptions() {
-        // fileObservers.update(($fileObservers) => {
-        //     $fileObservers.clear();
-        //     return $fileObservers;
-        // });
-        // let downloads: Promise<GPXFile | null>[] = [];
-        // getFilesFromEmbeddingOptions(options).forEach((url) => {
-        //     downloads.push(
-        //         fetch(url)
-        //             .then((response) => response.blob())
-        //             .then((blob) => new File([blob], url.split('/').pop() ?? url))
-        //             .then(loadFile)
-        //     );
-        // });
-        // Promise.all(downloads).then((files) => {
-        //     let ids: string[] = [];
-        //     let bounds = {
-        //         southWest: {
-        //             lat: 90,
-        //             lon: 180,
-        //         },
-        //         northEast: {
-        //             lat: -90,
-        //             lon: -180,
-        //         },
-        //     };
-        //     fileObservers.update(($fileObservers) => {
-        //         files.forEach((file, index) => {
-        //             if (file === null) {
-        //                 return;
-        //             }
-        //             let id = `gpx-${index}-embed`;
-        //             file._data.id = id;
-        //             let statistics = new GPXStatisticsTree(file);
-        //             $fileObservers.set(
-        //                 id,
-        //                 readable({
-        //                     file,
-        //                     statistics,
-        //                 })
-        //             );
-        //             ids.push(id);
-        //             let fileBounds = statistics.getStatisticsFor(new ListFileItem(id)).global
-        //                 .bounds;
-        //             bounds.southWest.lat = Math.min(bounds.southWest.lat, fileBounds.southWest.lat);
-        //             bounds.southWest.lon = Math.min(bounds.southWest.lon, fileBounds.southWest.lon);
-        //             bounds.northEast.lat = Math.max(bounds.northEast.lat, fileBounds.northEast.lat);
-        //             bounds.northEast.lon = Math.max(bounds.northEast.lon, fileBounds.northEast.lon);
-        //         });
-        //         return $fileObservers;
-        //     });
-        //     $fileOrder = [...$fileOrder.filter((id) => !id.includes('embed')), ...ids];
-        //     selection.update(($selection) => {
-        //         $selection.clear();
-        //         ids.forEach((id) => {
-        //             $selection.toggle(new ListFileItem(id));
-        //         });
-        //         return $selection;
-        //     });
-        //     if (hash.length === 0) {
-        //         map.subscribe(($map) => {
-        //             if ($map) {
-        //                 $map.fitBounds(
-        //                     [
-        //                         bounds.southWest.lon,
-        //                         bounds.southWest.lat,
-        //                         bounds.northEast.lon,
-        //                         bounds.northEast.lat,
-        //                     ],
-        //                     {
-        //                         padding: 80,
-        //                         linear: true,
-        //                         easing: () => 1,
-        //                     }
-        //                 );
-        //             }
-        //         });
-        //     }
-        // });
-        // if (
-        //     options.basemap !== $currentBasemap &&
-        //     allowedEmbeddingBasemaps.includes(options.basemap)
-        // ) {
-        //     $currentBasemap = options.basemap;
-        // }
-        // if (options.distanceMarkers !== $distanceMarkers) {
-        //     $distanceMarkers = options.distanceMarkers;
-        // }
-        // if (options.directionMarkers !== $directionMarkers) {
-        //     $directionMarkers = options.directionMarkers;
-        // }
-        // if (options.distanceUnits !== $distanceUnits) {
-        //     $distanceUnits = options.distanceUnits;
-        // }
-        // if (options.velocityUnits !== $velocityUnits) {
-        //     $velocityUnits = options.velocityUnits;
-        // }
-        // if (options.temperatureUnits !== $temperatureUnits) {
-        //     $temperatureUnits = options.temperatureUnits;
-        // }
-        // if (options.theme !== $mode) {
-        //     setMode(options.theme);
-        // }
+        let downloads: Promise<GPXFile | null>[] = getFilesFromEmbeddingOptions(options).map(
+            (url) => {
+                return fetch(url)
+                    .then((response) => response.blob())
+                    .then((blob) => new File([blob], url.split('/').pop() ?? url))
+                    .then(loadFile);
+            }
+        );
+        Promise.all(downloads).then((answers) => {
+            const files = answers.filter((file) => file !== null) as GPXFile[];
+            let ids: string[] = [];
+            files.forEach((file, index) => {
+                let id = `gpx-${index}-embed`;
+                file._data.id = id;
+                ids.push(id);
+            });
+            fileStateCollection.setEmbeddedFiles(files);
+            $fileOrder = ids;
+            selection.selectAll();
+        });
+        if (allowedEmbeddingBasemaps.includes(options.basemap)) {
+            $currentBasemap = options.basemap;
+        }
+        if (!isSelected($selectedBasemapTree, options.basemap)) {
+            $selectedBasemapTree = toggle($selectedBasemapTree, options.basemap);
+        }
+        $distanceMarkers = options.distanceMarkers;
+        $directionMarkers = options.directionMarkers;
+        $distanceUnits = options.distanceUnits;
+        $velocityUnits = options.velocityUnits;
+        $temperatureUnits = options.temperatureUnits;
+        if (options.theme != 'system') {
+            setMode(options.theme);
+        }
+
+        additionalDatasets.set(
+            [
+                options.elevation.speed ? 'speed' : null,
+                options.elevation.hr ? 'hr' : null,
+                options.elevation.cad ? 'cad' : null,
+                options.elevation.temp ? 'temp' : null,
+                options.elevation.power ? 'power' : null,
+            ].filter((dataset) => dataset !== null)
+        );
+        elevationFill.set(options.elevation.fill == 'none' ? undefined : options.elevation.fill);
     }
 
-    onMount(() => {
-        prevSettings.distanceMarkers = distanceMarkers.value;
-        prevSettings.directionMarkers = directionMarkers.value;
-        prevSettings.distanceUnits = distanceUnits.value;
-        prevSettings.velocityUnits = velocityUnits.value;
-        prevSettings.temperatureUnits = temperatureUnits.value;
-        prevSettings.theme = mode.current ?? 'system';
-    });
-
-    // $: if (browser && options) {
-    //     applyOptions();
-    // }
-
-    // $: if ($fileOrder) {
-    //     updateGPXData();
-    // }
-
-    onDestroy(() => {
-        if (distanceMarkers.value !== prevSettings.distanceMarkers) {
-            distanceMarkers.value = prevSettings.distanceMarkers;
-        }
-
-        if (directionMarkers.value !== prevSettings.directionMarkers) {
-            directionMarkers.value = prevSettings.directionMarkers;
-        }
-
-        if (distanceUnits.value !== prevSettings.distanceUnits) {
-            distanceUnits.value = prevSettings.distanceUnits;
-        }
-
-        if (velocityUnits.value !== prevSettings.velocityUnits) {
-            velocityUnits.value = prevSettings.velocityUnits;
-        }
-
-        if (temperatureUnits.value !== prevSettings.temperatureUnits) {
-            temperatureUnits.value = prevSettings.temperatureUnits;
-        }
-
-        if (mode.current !== prevSettings.theme) {
-            setMode(prevSettings.theme);
-        }
-
-        // $selection.clear();
-        // $fileObservers.clear();
-        fileOrder.value = fileOrder.value.filter((id) => !id.includes('embed'));
+    $effect(() => {
+        options;
+        untrack(applyOptions);
     });
 </script>
 
 <div class="absolute flex flex-col h-full w-full border rounded-xl overflow-clip">
     <div class="grow relative">
         <Map
-            class="h-full {fileStateCollection.files.size > 1 ? 'horizontal' : ''}"
+            class="h-full {$fileStateCollection.size > 1 ? 'horizontal' : ''}"
             accessToken={options.token}
             geocoder={false}
-            geolocate={false}
+            geolocate={true}
             hash={useHash}
         />
         <OpenIn files={options.files} ids={options.ids} />
-        <!-- <LayerControl /> -->
-        <!-- <GPXLayers /> -->
-        {#if fileStateCollection.files.size > 1}
+        <LayerControl />
+        <GPXLayers />
+        {#if $fileStateCollection.size > 1}
             <div class="h-10 -translate-y-10 w-full pointer-events-none absolute z-30">
-                <!-- <FileList orientation="horizontal" /> -->
+                <FileList orientation="horizontal" />
             </div>
         {/if}
     </div>
@@ -237,26 +120,20 @@
         class="{options.elevation.show ? '' : 'h-10'} flex flex-row gap-2 px-2 sm:px-4"
         style={options.elevation.show ? `height: ${options.elevation.height}px` : ''}
     >
-        <!-- <GPXStatistics
+        <GPXStatistics
             {gpxStatistics}
             {slicedGPXStatistics}
             panelSize={options.elevation.height}
             orientation={options.elevation.show ? 'vertical' : 'horizontal'}
-        /> -->
+        />
         {#if options.elevation.show}
-            <!-- <ElevationProfile
+            <ElevationProfile
                 {gpxStatistics}
                 {slicedGPXStatistics}
-                additionalDatasets={[
-                    options.elevation.speed ? 'speed' : null,
-                    options.elevation.hr ? 'hr' : null,
-                    options.elevation.cad ? 'cad' : null,
-                    options.elevation.temp ? 'temp' : null,
-                    options.elevation.power ? 'power' : null,
-                ].filter((dataset) => dataset !== null)}
-                elevationFill={options.elevation.fill}
+                {additionalDatasets}
+                {elevationFill}
                 showControls={options.elevation.controls}
-            /> -->
+            />
         {/if}
     </div>
 </div>

website/src/lib/components/embedding/EmbeddingPlayground.svelte

@@ -18,63 +18,61 @@
     import { i18n } from '$lib/i18n.svelte';
     import {
         allowedEmbeddingBasemaps,
+        defaultEmbeddingOptions,
         getCleanedEmbeddingOptions,
-        getDefaultEmbeddingOptions,
-    } from './Embedding';
+        getMergedEmbeddingOptions,
+    } from './embedding';
     import { PUBLIC_MAPBOX_TOKEN } from '$env/static/public';
     import Embedding from './Embedding.svelte';
-    import { map } from '$lib/stores';
-    import { tick } from 'svelte';
+    import { onDestroy } from 'svelte';
     import { base } from '$app/paths';
+    import { map } from '$lib/components/map/map';
+    import { mode } from 'mode-watcher';
 
-    let options = getDefaultEmbeddingOptions();
-    options.token = 'YOUR_MAPBOX_TOKEN';
-    options.files = [
-        'https://raw.githubusercontent.com/gpxstudio/gpx.studio/main/gpx/test-data/simple.gpx',
-    ];
+    let options = $state(
+        getMergedEmbeddingOptions(
+            {
+                token: 'YOUR_MAPBOX_TOKEN',
+                theme: mode.current,
+            },
+            defaultEmbeddingOptions
+        )
+    );
+    let files = $state(
+        'https://raw.githubusercontent.com/gpxstudio/gpx.studio/main/gpx/test-data/simple.gpx'
+    );
+    let driveIds = $state('');
 
-    let files = options.files[0];
-    $: {
-        let urls = files.split(',');
-        urls = urls.filter((url) => url.length > 0);
-        if (JSON.stringify(urls) !== JSON.stringify(options.files)) {
-            options.files = urls;
+    let iframeOptions = $derived(
+        getMergedEmbeddingOptions(
+            {
+                token:
+                    options.token.length === 0 || options.token === 'YOUR_MAPBOX_TOKEN'
+                        ? PUBLIC_MAPBOX_TOKEN
+                        : options.token,
+                files: files.split(',').filter((url) => url.length > 0),
+                ids: driveIds.split(',').filter((id) => id.length > 0),
+                elevation: {
+                    fill: options.elevation.fill === 'none' ? undefined : options.elevation.fill,
+                },
+            },
+            options
+        )
+    );
+
+    let manualCamera = $state(false);
+    let zoom = $state('0');
+    let lat = $state('0');
+    let lon = $state('0');
+    let bearing = $state('0');
+    let pitch = $state('0');
+    let hash = $derived(manualCamera ? `#${zoom}/${lat}/${lon}/${bearing}/${pitch}` : '');
+
+    $effect(() => {
+        if (options.elevation.show || options.elevation.height) {
+            map.resize();
         }
-    }
-    let driveIds = '';
-    $: {
-        let ids = driveIds.split(',');
-        ids = ids.filter((id) => id.length > 0);
-        if (JSON.stringify(ids) !== JSON.stringify(options.ids)) {
-            options.ids = ids;
-        }
-    }
-
-    let manualCamera = false;
-
-    let zoom = '0';
-    let lat = '0';
-    let lon = '0';
-    let bearing = '0';
-    let pitch = '0';
-
-    $: hash = manualCamera ? `#${zoom}/${lat}/${lon}/${bearing}/${pitch}` : '';
-
-    $: iframeOptions =
-        options.token.length === 0 || options.token === 'YOUR_MAPBOX_TOKEN'
-            ? Object.assign({}, options, { token: PUBLIC_MAPBOX_TOKEN })
-            : options;
-
-    async function resizeMap() {
-        if ($map) {
-            await tick();
-            $map.resize();
-        }
-    }
-
-    $: if (options.elevation.height || options.elevation.show) {
-        resizeMap();
-    }
+    });
 
     function updateCamera() {
         if ($map) {
@@ -87,9 +85,15 @@
         }
     }
 
-    $: if ($map) {
-        $map.on('moveend', updateCamera);
-    }
+    map.onLoad((map_) => {
+        map_.on('moveend', updateCamera);
+    });
+
+    onDestroy(() => {
+        if ($map) {
+            $map.off('moveend', updateCamera);
+        }
+    });
 </script>
 
 <Card.Root id="embedding-playground">
@@ -105,19 +109,9 @@
             <Label for="drive_ids">{i18n._('embedding.drive_ids')}</Label>
             <Input id="drive_ids" type="text" class="h-8" bind:value={driveIds} />
             <Label for="basemap">{i18n._('embedding.basemap')}</Label>
-            <Select.Root
-                selected={{
-                    value: options.basemap,
-                    label: i18n._(`layers.label.${options.basemap}`),
-                }}
-                onSelectedChange={(selected) => {
-                    if (selected?.value) {
-                        options.basemap = selected?.value;
-                    }
-                }}
-            >
+            <Select.Root type="single" bind:value={options.basemap}>
                 <Select.Trigger id="basemap" class="w-full h-8">
-                    <Select.Value />
+                    {i18n._(`layers.label.${options.basemap}`)}
                 </Select.Trigger>
                 <Select.Content class="max-h-60 overflow-y-scroll">
                     {#each allowedEmbeddingBasemaps as basemap}
@@ -145,23 +139,11 @@
                         <span class="shrink-0">
                             {i18n._('embedding.fill_by')}
                         </span>
-                        <Select.Root
-                            selected={{ value: 'none', label: i18n._('embedding.none') }}
-                            onSelectedChange={(selected) => {
-                                let value = selected?.value;
-                                if (value === 'none') {
-                                    options.elevation.fill = undefined;
-                                } else if (
-                                    value === 'slope' ||
-                                    value === 'surface' ||
-                                    value === 'highway'
-                                ) {
-                                    options.elevation.fill = value;
-                                }
-                            }}
-                        >
+                        <Select.Root type="single" bind:value={options.elevation.fill}>
                             <Select.Trigger class="grow h-8">
-                                <Select.Value />
+                                {options.elevation.fill !== 'none'
+                                    ? i18n._(`quantities.${options.elevation.fill}`)
+                                    : i18n._('embedding.none')}
                             </Select.Trigger>
                             <Select.Content>
                                 <Select.Item value="slope">{i18n._('quantities.slope')}</Select.Item
@@ -331,7 +313,7 @@
                 {i18n._('embedding.preview')}
             </Label>
             <div class="relative h-[600px]">
-                <Embedding bind:options={iframeOptions} bind:hash useHash={false} />
+                <Embedding options={iframeOptions} bind:hash useHash={false} />
             </div>
             <Label>
                 {i18n._('embedding.code')}
@@ -339,7 +321,7 @@
             <pre
                 class="bg-primary text-primary-foreground p-3 rounded-md whitespace-normal break-all">
                 <code class="language-html">
-                    {`<iframe src="https://gpx.studio${base}/embed?options=${encodeURIComponent(JSON.stringify(getCleanedEmbeddingOptions(options)))}${hash}" width="100%" height="600px" frameborder="0" style="outline: none;"/>`}
+                    {`<iframe src="https://gpx.studio${base}/embed?options=${encodeURIComponent(JSON.stringify(getCleanedEmbeddingOptions(iframeOptions)))}${hash}" width="100%" height="600px" frameborder="0" style="outline: none;"/>`}
                 </code>
             </pre>
         </fieldset>

website/src/lib/components/embedding/embedding.ts

@@ -10,7 +10,7 @@ export type EmbeddingOptions = {
         show: boolean;
         height: number;
         controls: boolean;
-        fill: 'slope' | 'surface' | 'highway' | undefined;
+        fill: 'slope' | 'surface' | 'highway' | 'none';
         speed: boolean;
         hr: boolean;
         cad: boolean;
@@ -34,7 +34,7 @@ export const defaultEmbeddingOptions = {
         show: true,
         height: 170,
         controls: true,
-        fill: undefined,
+        fill: 'none',
         speed: false,
         hr: false,
         cad: false,
@@ -49,10 +49,6 @@ export const defaultEmbeddingOptions = {
     theme: 'system',
 };
 
-export function getDefaultEmbeddingOptions(): EmbeddingOptions {
-    return JSON.parse(JSON.stringify(defaultEmbeddingOptions));
-}
-
 export function getMergedEmbeddingOptions(
     options: any,
     defaultOptions: any = defaultEmbeddingOptions

website/src/lib/components/export/Export.svelte

@@ -11,7 +11,6 @@
         exportState,
     } from '$lib/components/export/utils.svelte';
     import { currentTool } from '$lib/components/toolbar/tools';
-    // import { gpxStatistics } from '$lib/stores';
     import {
         Download,
         Zap,
@@ -22,10 +21,12 @@
         SquareActivity,
     } from '@lucide/svelte';
     import { i18n } from '$lib/i18n.svelte';
-    import { GPXStatistics } from 'gpx';
+    import { GPXGlobalStatistics } from 'gpx';
     import { ListRootItem } from '$lib/components/file-list/file-list';
     import { fileStateCollection } from '$lib/logic/file-state';
     import { selection } from '$lib/logic/selection';
+    import { gpxStatistics } from '$lib/logic/statistics';
+    import { get } from 'svelte/store';
 
     let open = $derived(exportState.current !== ExportState.NONE);
     let exportOptions: Record<string, boolean> = $state({
@@ -37,44 +38,36 @@
         extensions: false,
     });
     let hide: Record<string, boolean> = $derived.by(() => {
-        // if (exportState.current === ExportState.NONE) {
-        //     return {
-        //         time: false,
-        //         hr: false,
-        //         cad: false,
-        //         atemp: false,
-        //         power: false,
-        //         extensions: false,
-        //     };
-        // } else {
-        //     let statistics = $gpxStatistics;
-        //     if (exportState.current === ExportState.ALL) {
-        //         statistics = Array.from(fileStateCollection.files.values())
-        //             .map((file) => file.statistics)
-        //             .reduce((acc, cur) => {
-        //                 if (cur !== undefined) {
-        //                     acc.mergeWith(cur.getStatisticsFor(new ListRootItem()));
-        //                 }
-        //                 return acc;
-        //             }, new GPXStatistics());
-        //     }
-        //     return {
-        //         time: statistics.global.time.total === 0,
-        //         hr: statistics.global.hr.count === 0,
-        //         cad: statistics.global.cad.count === 0,
-        //         atemp: statistics.global.atemp.count === 0,
-        //         power: statistics.global.power.count === 0,
-        //         extensions: Object.keys(statistics.global.extensions).length === 0,
-        //     };
-        // }
-        return {
-            time: false,
-            hr: false,
-            cad: false,
-            atemp: false,
-            power: false,
-            extensions: false,
-        };
+        if (exportState.current === ExportState.NONE) {
+            return {
+                time: false,
+                hr: false,
+                cad: false,
+                atemp: false,
+                power: false,
+                extensions: false,
+            };
+        } else {
+            let statistics = $gpxStatistics.global;
+            if (exportState.current === ExportState.ALL) {
+                statistics = Array.from(get(fileStateCollection).values())
+                    .map((file) => file.statistics)
+                    .reduce((acc, cur) => {
+                        if (cur !== undefined) {
+                            acc.mergeWith(cur.getStatisticsFor(new ListRootItem()).global);
+                        }
+                        return acc;
+                    }, new GPXGlobalStatistics());
+            }
+            return {
+                time: statistics.time.total === 0,
+                hr: statistics.hr.count === 0,
+                cad: statistics.cad.count === 0,
+                atemp: statistics.atemp.count === 0,
+                power: statistics.power.count === 0,
+                extensions: Object.keys(statistics.extensions).length === 0,
+            };
+        }
     });
     let exclude = $derived(Object.keys(exportOptions).filter((key) => !exportOptions[key]));
 
@@ -99,17 +92,17 @@
             class="fixed left-[50%] top-[50%] z-50 w-fit max-w-full translate-x-[-50%] translate-y-[-50%] flex flex-col items-center gap-3 border bg-background p-3 shadow-lg rounded-md"
         >
             <div
-                class="w-full flex flex-row items-center justify-center gap-4 border rounded-md p-2 bg-secondary"
+                class="w-full flex flex-col sm:flex-row items-center justify-center gap-1 sm:gap-2 border rounded-md p-2 bg-secondary"
             >
-                <span>⚠️</span>
-                <span class="max-w-[80%] text-sm">
+                <span class="w-12 shrink-0 text-center text-xl">⚠️</span>
+                <span class="text-sm">
                     {i18n._('menu.support_message')}
                 </span>
             </div>
             <div class="w-full flex flex-row flex-wrap gap-2">
                 <Button class="bg-support grow" href="https://ko-fi.com/gpxstudio" target="_blank">
                     {i18n._('menu.support_button')}
-                    <span class="ml-2">🙏</span>
+                    <span>🙏</span>
                 </Button>
                 <Button
                     variant="outline"
@@ -124,7 +117,7 @@
                         exportState.current = ExportState.NONE;
                     }}
                 >
-                    <Download size="16" class="mr-1" />
+                    <Download size="16" />
                     {#if $fileStateCollection.size === 1 || (exportState.current === ExportState.SELECTION && $selection.size === 1)}
                         {i18n._('menu.download_file')}
                     {:else}
@@ -158,15 +151,6 @@
                             {i18n._('quantities.time')}
                         </Label>
                     </div>
-                    <div
-                        class="flex flex-row items-center gap-1.5 {hide.extensions ? 'hidden' : ''}"
-                    >
-                        <Checkbox id="export-extensions" bind:checked={exportOptions.extensions} />
-                        <Label for="export-extensions" class="flex flex-row items-center gap-1">
-                            <Earth size="16" />
-                            {i18n._('quantities.osm_extensions')}
-                        </Label>
-                    </div>
                     <div class="flex flex-row items-center gap-1.5 {hide.hr ? 'hidden' : ''}">
                         <Checkbox id="export-heartrate" bind:checked={exportOptions.hr} />
                         <Label for="export-heartrate" class="flex flex-row items-center gap-1">
@@ -195,6 +179,15 @@
                             {i18n._('quantities.power')}
                         </Label>
                     </div>
+                    <div
+                        class="flex flex-row items-center gap-1.5 {hide.extensions ? 'hidden' : ''}"
+                    >
+                        <Checkbox id="export-extensions" bind:checked={exportOptions.extensions} />
+                        <Label for="export-extensions" class="flex flex-row items-center gap-1">
+                            <Earth size="16" />
+                            {i18n._('quantities.osm_extensions')}
+                        </Label>
+                    </div>
                 </div>
             </div>
         </Dialog.Content>

website/src/lib/components/file-list/FileList.svelte

@@ -2,15 +2,15 @@
     import { ScrollArea } from '$lib/components/ui/scroll-area/index';
     import * as ContextMenu from '$lib/components/ui/context-menu';
     import FileListNode from './FileListNode.svelte';
-    import { setContext } from 'svelte';
-    import { ListFileItem, ListLevel, ListRootItem, allowedPastes } from './file-list';
+    import { onMount, setContext } from 'svelte';
+    import { ListFileItem, ListLevel, ListRootItem } from './file-list';
     import { ClipboardPaste, FileStack, Plus } from '@lucide/svelte';
     import Shortcut from '$lib/components/Shortcut.svelte';
     import { i18n } from '$lib/i18n.svelte';
-    import { settings } from '$lib/logic/settings';
     import { fileStateCollection } from '$lib/logic/file-state';
     import { createFile, pasteSelection } from '$lib/logic/file-actions';
-    import { selection } from '$lib/logic/selection';
+    import { selection, copied } from '$lib/logic/selection';
+    import { allowedPastes } from './sortable-file-list';
 
     let {
         orientation,
@@ -27,36 +27,25 @@
     setContext('orientation', orientation);
     setContext('recursive', recursive);
 
-    const { treeFileView } = settings;
-
-    // treeFileView.subscribe(($vertical) => {
-    //     if ($vertical) {
-    //         selection.update(($selection) => {
-    //             $selection.forEach((item) => {
-    //                 if ($selection.hasAnyChildren(item, false)) {
-    //                     $selection.toggle(item);
-    //                 }
-    //             });
-    //             return $selection;
-    //         });
-    //     } else {
-    //         selection.update(($selection) => {
-    //             $selection.forEach((item) => {
-    //                 if (!(item instanceof ListFileItem)) {
-    //                     $selection.toggle(item);
-    //                     $selection.set(new ListFileItem(item.getFileId()), true);
-    //                 }
-    //             });
-    //             return $selection;
-    //         });
-    //     }
-    // });
+    onMount(() => {
+        if (orientation === 'horizontal') {
+            selection.update(($selection) => {
+                $selection.forEach((item) => {
+                    if (!(item instanceof ListFileItem)) {
+                        $selection.toggle(item);
+                        $selection.set(new ListFileItem(item.getFileId()), true);
+                    }
+                });
+                return $selection;
+            });
+        }
+    });
 </script>
 
 <ScrollArea
     class="shrink-0 {orientation === 'vertical' ? 'p-0 pr-3' : 'h-10 px-1'}"
     {orientation}
-    scrollbarXClasses={orientation === 'vertical' ? '' : 'mt-1 h-2'}
+    scrollbarXClasses={orientation === 'vertical' ? '' : 'hidden'}
     scrollbarYClasses={orientation === 'vertical' ? '' : ''}
 >
     <div
@@ -71,7 +60,7 @@
                 <ContextMenu.Trigger class="grow" />
                 <ContextMenu.Content>
                     <ContextMenu.Item onclick={createFile}>
-                        <Plus size="16" class="mr-1" />
+                        <Plus size="16" />
                         {i18n._('menu.new_file')}
                         <Shortcut key="+" ctrl={true} />
                     </ContextMenu.Item>
@@ -80,18 +69,18 @@
                         onclick={() => selection.selectAll()}
                         disabled={$fileStateCollection.size === 0}
                     >
-                        <FileStack size="16" class="mr-1" />
+                        <FileStack size="16" />
                         {i18n._('menu.select_all')}
                         <Shortcut key="A" ctrl={true} />
                     </ContextMenu.Item>
                     <ContextMenu.Separator />
                     <ContextMenu.Item
-                        disabled={selection.copied === undefined ||
-                            selection.copied.length === 0 ||
-                            !allowedPastes[selection.copied[0].level].includes(ListLevel.ROOT)}
+                        disabled={$copied === undefined ||
+                            $copied.length === 0 ||
+                            !allowedPastes[$copied[0].level].includes(ListLevel.ROOT)}
                         onclick={pasteSelection}
                     >
-                        <ClipboardPaste size="16" class="mr-1" />
+                        <ClipboardPaste size="16" />
                         {i18n._('menu.paste')}
                         <Shortcut key="V" ctrl={true} />
                     </ContextMenu.Item>

website/src/lib/components/file-list/FileListNode.svelte

@@ -58,17 +58,11 @@
 
     const { treeFileView } = settings;
 
-    function openIfSelectedChild() {
-        if (collapsible && treeFileView.value && $selection.hasAnyChildren(item, false)) {
+    $effect(() => {
+        if (collapsible && $treeFileView && $selection.hasAnyChildren(item, false)) {
             collapsible.openNode();
         }
-    }
-
-    if ($selection) {
-        openIfSelectedChild();
-    }
-
-    // afterUpdate(openIfSelectedChild);
+    });
 </script>
 
 {#if node instanceof Map}
@@ -83,7 +77,7 @@
             <FileListNodeLabel {node} {item} {label} />
         {/snippet}
         {#snippet content()}
-            <div class="ml-2">
+            <div class="ml-4">
                 {#key node}
                     <FileListNodeContent {node} {item} />
                 {/key}

website/src/lib/components/file-list/FileListNodeContent.svelte

@@ -1,28 +1,13 @@
-<script lang="ts" context="module">
-    let dragging: Writable<ListLevel | null> = writable(null);
-
-    let updating = false;
-</script>
-
 <script lang="ts">
     import { GPXFile, Track, Waypoint, type AnyGPXTreeElement, type GPXTreeElement } from 'gpx';
     import { getContext, onDestroy, onMount } from 'svelte';
-    import Sortable from 'sortablejs/Sortable';
-    import { get, writable, type Readable, type Writable } from 'svelte/store';
+    import { type Readable } from 'svelte/store';
     import FileListNodeStore from './FileListNodeStore.svelte';
     import FileListNode from './FileListNode.svelte';
-    import {
-        ListFileItem,
-        ListLevel,
-        ListRootItem,
-        ListWaypointsItem,
-        allowedMoves,
-        type ListItem,
-    } from './file-list';
-    import { isMac } from '$lib/utils';
+    import FileListNodeContent from './FileListNodeContent.svelte';
+    import { ListFileItem, ListLevel, ListWaypointsItem, type ListItem } from './file-list';
     import type { GPXFileWithStatistics } from '$lib/logic/statistics-tree';
-    import { settings } from '$lib/logic/settings';
-    import { getFileIds, moveItems } from '$lib/logic/file-actions';
+    import { allowedMoves, dragging, SortableFileList } from './sortable-file-list';
 
     let {
         node,
@@ -32,13 +17,13 @@
         node:
             | Map<string, Readable<GPXFileWithStatistics | undefined>>
             | GPXTreeElement<AnyGPXTreeElement>
+            | Waypoint[]
             | Waypoint;
         item: ListItem;
         waypointRoot?: boolean;
     } = $props();
 
     let container: HTMLElement;
-    let elements: { [id: string]: HTMLElement } = {};
     let sortableLevel: ListLevel =
         node instanceof Map
             ? ListLevel.FILE
@@ -51,253 +36,32 @@
               : node instanceof Track
                 ? ListLevel.SEGMENT
                 : ListLevel.WAYPOINT;
-    let sortable: Sortable;
     let orientation = getContext<'vertical' | 'horizontal'>('orientation');
 
-    let destroyed = false;
-    let lastUpdateStart = 0;
-    function updateToSelection(e) {
-        if (destroyed) {
-            return;
-        }
+    let canDrop = $derived($dragging !== null && allowedMoves[$dragging].includes(sortableLevel));
 
-        lastUpdateStart = Date.now();
-        setTimeout(() => {
-            if (Date.now() - lastUpdateStart >= 40) {
-                if (updating) {
-                    return;
-                }
-
-                updating = true;
-                // Sortable updates selection
-                let changed = getChangedIds();
-                if (changed.length > 0) {
-                    selection.update(($selection) => {
-                        $selection.clear();
-                        Object.entries(elements).forEach(([id, element]) => {
-                            $selection.set(
-                                item.extend(getRealId(id)),
-                                element.classList.contains('sortable-selected')
-                            );
-                        });
-
-                        if (
-                            e.originalEvent &&
-                            !(
-                                e.originalEvent.ctrlKey ||
-                                e.originalEvent.metaKey ||
-                                e.originalEvent.shiftKey
-                            ) &&
-                            ($selection.size > 1 ||
-                                !$selection.has(item.extend(getRealId(changed[0]))))
-                        ) {
-                            // Fix bug that sometimes causes a single select to be treated as a multi-select
-                            $selection.clear();
-                            $selection.set(item.extend(getRealId(changed[0])), true);
-                        }
-
-                        return $selection;
-                    });
-                }
-                updating = false;
-            }
-        }, 50);
-    }
-
-    function updateFromSelection() {
-        if (destroyed || updating) {
-            return;
-        }
-        updating = true;
-        // Selection updates sortable
-        let changed = getChangedIds();
-        for (let id of changed) {
-            let element = elements[id];
-            if (element) {
-                if ($selection.has(item.extend(id))) {
-                    Sortable.utils.select(element);
-                    element.scrollIntoView({
-                        behavior: 'smooth',
-                        block: 'nearest',
-                    });
-                } else {
-                    Sortable.utils.deselect(element);
-                }
-            }
-        }
-        updating = false;
-    }
-
-    $: if ($selection) {
-        updateFromSelection();
-    }
-
-    function syncFileOrder(order: string[]) {
-        if (!sortable || sortableLevel !== ListLevel.FILE) {
-            return;
-        }
-
-        const currentOrder = sortable.toArray();
-        if (currentOrder.length !== order.length) {
-            sortable.sort(order);
-        } else {
-            for (let i = 0; i < currentOrder.length; i++) {
-                if (currentOrder[i] !== order[i]) {
-                    sortable.sort(order);
-                    break;
-                }
-            }
-        }
-    }
-
-    const { fileOrder } = settings;
-    $effect(() => syncFileOrder(fileOrder.value));
-
-    function createSortable() {
-        sortable = Sortable.create(container, {
-            group: {
-                name: sortableLevel,
-                pull: allowedMoves[sortableLevel],
-                put: true,
-            },
-            direction: orientation,
-            forceAutoScrollFallback: true,
-            multiDrag: true,
-            multiDragKey: isMac() ? 'Meta' : 'Ctrl',
-            avoidImplicitDeselect: true,
-            onSelect: updateToSelection,
-            onDeselect: updateToSelection,
-            onStart: () => {
-                dragging.set(sortableLevel);
-            },
-            onEnd: () => {
-                dragging.set(null);
-            },
-            onSort: (e) => {
-                if (sortableLevel === ListLevel.FILE) {
-                    let newFileOrder = sortable.toArray();
-                    if (newFileOrder.length !== fileOrder.value.length) {
-                        fileOrder.value = newFileOrder;
-                    } else {
-                        for (let i = 0; i < newFileOrder.length; i++) {
-                            if (newFileOrder[i] !== fileOrder.value[i]) {
-                                fileOrder.value = newFileOrder;
-                                break;
-                            }
-                        }
-                    }
-                }
-
-                let fromItem = Sortable.get(e.from)._item;
-                let toItem = Sortable.get(e.to)._item;
-
-                if (item === toItem && !(fromItem instanceof ListRootItem)) {
-                    // Event is triggered on source and destination list, only handle it once
-                    let fromItems = [];
-                    let toItems = [];
-
-                    if (Sortable.get(e.from)._waypointRoot) {
-                        fromItems = [fromItem.extend('waypoints')];
-                    } else {
-                        let oldIndices: number[] =
-                            e.oldIndicies.length > 0
-                                ? e.oldIndicies.map((i) => i.index)
-                                : [e.oldIndex];
-                        oldIndices = oldIndices.filter((i) => i >= 0);
-                        oldIndices.sort((a, b) => a - b);
-
-                        fromItems = oldIndices.map((i) => fromItem.extend(i));
-                    }
-
-                    if (Sortable.get(e.from)._waypointRoot && Sortable.get(e.to)._waypointRoot) {
-                        toItems = [toItem.extend('waypoints')];
-                    } else {
-                        if (Sortable.get(e.to)._waypointRoot) {
-                            toItem = toItem.extend('waypoints');
-                        }
-
-                        let newIndices: number[] =
-                            e.newIndicies.length > 0
-                                ? e.newIndicies.map((i) => i.index)
-                                : [e.newIndex];
-                        newIndices = newIndices.filter((i) => i >= 0);
-                        newIndices.sort((a, b) => a - b);
-
-                        if (toItem instanceof ListRootItem) {
-                            let newFileIds = getFileIds(newIndices.length);
-                            toItems = newIndices.map((i, index) => {
-                                fileOrder.value.splice(i, 0, newFileIds[index]);
-                                return item.extend(newFileIds[index]);
-                            });
-                        } else {
-                            toItems = newIndices.map((i) => toItem.extend(i));
-                        }
-                    }
-
-                    moveItems(fromItem, toItem, fromItems, toItems);
-                }
-            },
-        });
-        Object.defineProperty(sortable, '_item', {
-            value: item,
-            writable: true,
-        });
-
-        Object.defineProperty(sortable, '_waypointRoot', {
-            value: waypointRoot,
-            writable: true,
-        });
-    }
+    let sortable: SortableFileList;
 
     onMount(() => {
-        createSortable();
-        destroyed = false;
+        sortable = new SortableFileList(
+            container,
+            node,
+            item,
+            waypointRoot,
+            sortableLevel,
+            orientation
+        );
     });
 
-    afterUpdate(() => {
-        elements = {};
-        container.childNodes.forEach((element) => {
-            if (element instanceof HTMLElement) {
-                let attr = element.getAttribute('data-id');
-                if (attr) {
-                    if (node instanceof Map && !node.has(attr)) {
-                        element.remove();
-                    } else {
-                        elements[attr] = element;
-                    }
-                }
-            }
-        });
-
-        syncFileOrder();
-        updateFromSelection();
+    $effect(() => {
+        if (sortable && node) {
+            sortable.updateElements();
+        }
     });
 
     onDestroy(() => {
-        destroyed = true;
+        sortable.destroy();
     });
-
-    function getChangedIds() {
-        let changed: (string | number)[] = [];
-        Object.entries(elements).forEach(([id, element]) => {
-            let realId = getRealId(id);
-            let realItem = item.extend(realId);
-            let inSelection = get(selection).has(realItem);
-            let isSelected = element.classList.contains('sortable-selected');
-            if (inSelection !== isSelected) {
-                changed.push(realId);
-            }
-        });
-        return changed;
-    }
-
-    function getRealId(id: string | number) {
-        return sortableLevel === ListLevel.FILE || sortableLevel === ListLevel.WAYPOINTS
-            ? id
-            : parseInt(id);
-    }
-
-    $: canDrop = $dragging !== null && allowedMoves[$dragging].includes(sortableLevel);
 </script>
 
 <div
@@ -343,7 +107,7 @@
 
 {#if node instanceof GPXFile && item instanceof ListFileItem}
     {#if !waypointRoot}
-        <svelte:self {node} {item} waypointRoot={true} />
+        <FileListNodeContent {node} {item} waypointRoot={true} />
     {/if}
 {/if}
 
@@ -357,20 +121,16 @@
     }
 
     .vertical :global(button) {
-        @apply hover:bg-muted;
-    }
-
-    .vertical :global(.sortable-selected button) {
-        @apply hover:bg-accent;
+        @apply hover:bg-[var(--selection)];
     }
 
     .vertical :global(.sortable-selected) {
-        @apply bg-accent;
+        @apply bg-[var(--selection)];
     }
 
     .horizontal :global(button) {
-        @apply bg-accent;
-        @apply hover:bg-muted;
+        @apply bg-[var(--selection)];
+        @apply hover:bg-background;
     }
 
     .horizontal :global(.sortable-selected button) {

website/src/lib/components/file-list/FileListNodeLabel.svelte

@@ -17,29 +17,30 @@
         Maximize,
         Scissors,
         FileStack,
-        FileX,
     } from '@lucide/svelte';
     import {
         ListFileItem,
         ListLevel,
         ListTrackItem,
         ListWaypointItem,
-        allowedPastes,
         type ListItem,
     } from './file-list';
     import { getContext } from 'svelte';
-    import { get } from 'svelte/store';
     import { GPXTreeElement, Track, type AnyGPXTreeElement, Waypoint, GPXFile } from 'gpx';
     import { i18n } from '$lib/i18n.svelte';
     import MetadataDialog from '$lib/components/file-list/metadata/MetadataDialog.svelte';
     import { editMetadata } from '$lib/components/file-list/metadata/utils.svelte';
-    import StyleDialog from './style/StyleDialog.svelte';
+    import StyleDialog from '$lib/components/file-list/style/StyleDialog.svelte';
     import { editStyle } from '$lib/components/file-list/style/utils.svelte';
-    import { waypointPopup } from '$lib/components/map/gpx-layer/GPXLayerPopup';
     import { getSymbolKey, symbols } from '$lib/assets/symbols';
-    import { selection } from '$lib/logic/selection';
-    import { map } from '$lib/components/map/map';
+    import { selection, copied, cut } from '$lib/logic/selection';
     import { fileActions, pasteSelection } from '$lib/logic/file-actions';
+    import { allHidden } from '$lib/logic/hidden';
+    import { boundsManager } from '$lib/logic/bounds';
+    import { gpxColors, gpxLayers } from '$lib/components/map/gpx-layer/gpx-layers';
+    import { fileStateCollection } from '$lib/logic/file-state';
+    import { waypointPopup } from '$lib/components/map/gpx-layer/gpx-layer-popup';
+    import { allowedPastes } from './sortable-file-list';
 
     let {
         node,
@@ -56,43 +57,32 @@
 
     let singleSelection = $derived($selection.size === 1);
 
-    let nodeColors: string[] = []; /* $derived.by(() => {
+    let nodeColors: string[] = $derived.by(() => {
         let colors: string[] = [];
-        if (node && map.value) {
+        if (node) {
             if (node instanceof GPXFile) {
-                let defaultColor = undefined;
-
-                let layer = gpxLayers.get(item.getFileId());
-                if (layer) {
-                    defaultColor = layer.layerColor;
-                }
-
+                let defaultColor = $gpxColors.get(item.getFileId());
                 let style = node.getStyle(defaultColor);
-                style.color.forEach((c) => {
-                    if (!colors.includes(c)) {
-                        colors.push(c);
-                    }
-                });
+                colors = style.color;
             } else if (node instanceof Track) {
                 let style = node.getStyle();
-                if (style) {
-                    if (
-                        style['gpx_style:color'] &&
-                        !nodeColors.includes(style['gpx_style:color'])
-                    ) {
-                        nodeColors.push(style['gpx_style:color']);
-                    }
+                if (
+                    style &&
+                    style['gpx_style:color'] &&
+                    !colors.includes(style['gpx_style:color'])
+                ) {
+                    colors.push(style['gpx_style:color']);
                 }
                 if (colors.length === 0) {
-                    let layer = gpxLayers.get(item.getFileId());
-                    if (layer) {
-                        colors.push(layer.layerColor);
+                    let defaultColor = $gpxColors.get(item.getFileId());
+                    if (defaultColor) {
+                        colors.push(defaultColor);
                     }
                 }
             }
         }
         return colors;
-    });*/
+    });
 
     let symbolKey = $derived(node instanceof Waypoint ? getSymbolKey(node.sym) : undefined);
 
@@ -115,8 +105,8 @@
 <ContextMenu.Root
     onOpenChange={(open) => {
         if (open) {
-            if (!get(selection).has(item)) {
-                selectItem(item);
+            if (!$selection.has(item)) {
+                selection.selectItem(item);
             }
         }
     }}
@@ -124,7 +114,7 @@
     <ContextMenu.Trigger class="grow truncate">
         <Button
             variant="ghost"
-            class="relative w-full p-0 px-1 border-none overflow-hidden focus-visible:ring-0 focus-visible:ring-offset-0 {orientation ===
+            class="relative w-full p-0 overflow-hidden focus-visible:ring-0 focus-visible:ring-offset-0 {orientation ===
             'vertical'
                 ? 'h-fit'
                 : 'h-9 px-1.5 shadow-md'} pointer-events-auto"
@@ -151,8 +141,7 @@
             <span
                 class="w-full text-left truncate py-1 flex flex-row items-center {hidden
                     ? 'text-muted-foreground'
-                    : ''} {selection.cut &&
-                selection.copied?.some((i) => i.getFullId() === item.getFullId())
+                    : ''} {$cut && $copied?.some((i) => i.getFullId() === item.getFullId())
                     ? 'text-muted-foreground'
                     : ''}"
                 oncontextmenu={(e) => {
@@ -171,11 +160,11 @@
                 }}
                 onmouseenter={() => {
                     if (item instanceof ListWaypointItem) {
-                        let layer = gpxLayers.get(item.getFileId());
-                        let file = getFile(item.getFileId());
+                        let layer = gpxLayers.getLayer(item.getFileId());
+                        let file = fileStateCollection.getFile(item.getFileId());
                         if (layer && file) {
                             let waypoint = file.wpt[item.getWaypointIndex()];
-                            if (waypoint) {
+                            if (waypoint && !waypoint._data.hidden) {
                                 waypointPopup?.setItem({
                                     item: waypoint,
                                     fileId: item.getFileId(),
@@ -186,7 +175,7 @@
                 }}
                 onmouseleave={() => {
                     if (item instanceof ListWaypointItem) {
-                        let layer = gpxLayers.get(item.getFileId());
+                        let layer = gpxLayers.getLayer(item.getFileId());
                         if (layer) {
                             waypointPopup?.setItem(null);
                         }
@@ -194,13 +183,13 @@
                 }}
             >
                 {#if item.level === ListLevel.SEGMENT}
-                    <Waypoints size="16" class="mr-1 shrink-0" />
+                    <Waypoints size="16" class="mx-1 shrink-0" />
                 {:else if item.level === ListLevel.WAYPOINT}
                     {#if symbolKey && symbols[symbolKey].icon}
                         {@const SymbolIcon = symbols[symbolKey].icon}
-                        <SymbolIcon size="16" class="mr-1 shrink-0" />
+                        <SymbolIcon size="16" class="mx-1 shrink-0" />
                     {:else}
-                        <MapPin size="16" class="mr-1 shrink-0" />
+                        <MapPin size="16" class="mx-1 shrink-0" />
                     {/if}
                 {/if}
                 <span
@@ -212,13 +201,10 @@
                 </span>
                 {#if hidden}
                     <EyeOff
-                        size="12"
-                        class="shrink-0 mt-1 ml-1 {orientation === 'vertical'
-                            ? 'mr-2'
-                            : ''} {item.level === ListLevel.SEGMENT ||
-                        item.level === ListLevel.WAYPOINT
+                        size="10"
+                        class="shrink-0 size-3.5 ml-1 {orientation === 'vertical'
                             ? 'mr-3'
-                            : ''}"
+                            : 'mt-0.5'}"
                     />
                 {/if}
             </span>
@@ -230,31 +216,31 @@
                 disabled={!singleSelection}
                 onclick={() => (editMetadata.current = true)}
             >
-                <Info size="16" class="mr-1" />
+                <Info size="16" />
                 {i18n._('menu.metadata.button')}
                 <Shortcut key="I" ctrl={true} />
             </ContextMenu.Item>
             <ContextMenu.Item onclick={() => (editStyle.current = true)}>
-                <PaintBucket size="16" class="mr-1" />
+                <PaintBucket size="16" />
                 {i18n._('menu.style.button')}
             </ContextMenu.Item>
         {/if}
         <ContextMenu.Item
             onclick={() => {
-                // if ($allHidden) {
-                //     dbUtils.setHiddenToSelection(false);
-                // } else {
-                //     dbUtils.setHiddenToSelection(true);
-                // }
+                if ($allHidden) {
+                    fileActions.setHiddenToSelection(false);
+                } else {
+                    fileActions.setHiddenToSelection(true);
+                }
             }}
         >
-            <!-- {#if $allHidden}
-                <Eye size="16" class="mr-1" />
+            {#if $allHidden}
+                <Eye size="16" />
                 {i18n._('menu.unhide')}
             {:else}
-                <EyeOff size="16" class="mr-1" />
+                <EyeOff size="16" />
                 {i18n._('menu.hide')}
-            {/if} -->
+            {/if}
             <Shortcut key="H" ctrl={true} />
         </ContextMenu.Item>
         <ContextMenu.Separator />
@@ -264,7 +250,7 @@
                     disabled={!singleSelection}
                     onclick={() => fileActions.addNewTrack(item.getFileId())}
                 >
-                    <Plus size="16" class="mr-1" />
+                    <Plus size="16" />
                     {i18n._('menu.new_track')}
                 </ContextMenu.Item>
                 <ContextMenu.Separator />
@@ -274,7 +260,7 @@
                     onclick={() =>
                         fileActions.addNewSegment(item.getFileId(), item.getTrackIndex())}
                 >
-                    <Plus size="16" class="mr-1" />
+                    <Plus size="16" />
                     {i18n._('menu.new_segment')}
                 </ContextMenu.Item>
                 <ContextMenu.Separator />
@@ -282,53 +268,48 @@
         {/if}
         {#if item.level !== ListLevel.WAYPOINTS}
             <ContextMenu.Item onclick={() => selection.selectAll()}>
-                <FileStack size="16" class="mr-1" />
+                <FileStack size="16" />
                 {i18n._('menu.select_all')}
                 <Shortcut key="A" ctrl={true} />
             </ContextMenu.Item>
         {/if}
-        <ContextMenu.Item onclick={centerMapOnSelection}>
-            <Maximize size="16" class="mr-1" />
+        <ContextMenu.Item onclick={() => boundsManager.centerMapOnSelection()}>
+            <Maximize size="16" />
             {i18n._('menu.center')}
             <Shortcut key="⏎" ctrl={true} />
         </ContextMenu.Item>
         <ContextMenu.Separator />
         <ContextMenu.Item onclick={fileActions.duplicateSelection}>
-            <Copy size="16" class="mr-1" />
+            <Copy size="16" />
             {i18n._('menu.duplicate')}
-            <Shortcut key="D" ctrl={true} /></ContextMenu.Item
-        >
+            <Shortcut key="D" ctrl={true} />
+        </ContextMenu.Item>
         {#if orientation === 'vertical'}
             <ContextMenu.Item onclick={() => selection.copySelection()}>
-                <ClipboardCopy size="16" class="mr-1" />
+                <ClipboardCopy size="16" />
                 {i18n._('menu.copy')}
                 <Shortcut key="C" ctrl={true} />
             </ContextMenu.Item>
             <ContextMenu.Item onclick={() => selection.cutSelection()}>
-                <Scissors size="16" class="mr-1" />
+                <Scissors size="16" />
                 {i18n._('menu.cut')}
                 <Shortcut key="X" ctrl={true} />
             </ContextMenu.Item>
             <ContextMenu.Item
-                disabled={selection.copied === undefined ||
-                    selection.copied.length === 0 ||
-                    !allowedPastes[selection.copied[0].level].includes(item.level)}
+                disabled={$copied === undefined ||
+                    $copied.length === 0 ||
+                    !allowedPastes[$copied[0].level].includes(item.level)}
                 onclick={pasteSelection}
             >
-                <ClipboardPaste size="16" class="mr-1" />
+                <ClipboardPaste size="16" />
                 {i18n._('menu.paste')}
                 <Shortcut key="V" ctrl={true} />
             </ContextMenu.Item>
         {/if}
         <ContextMenu.Separator />
         <ContextMenu.Item onclick={fileActions.deleteSelection}>
-            {#if item instanceof ListFileItem}
-                <FileX size="16" class="mr-1" />
-                {i18n._('menu.close')}
-            {:else}
-                <Trash2 size="16" class="mr-1" />
-                {i18n._('menu.delete')}
-            {/if}
+            <Trash2 size="16" />
+            {i18n._('menu.delete')}
             <Shortcut key="⌫" ctrl={true} />
         </ContextMenu.Item>
     </ContextMenu.Content>

website/src/lib/components/file-list/file-list.ts

@@ -7,24 +7,6 @@ export enum ListLevel {
     WAYPOINT,
 }
 
-export const allowedMoves: Record<ListLevel, ListLevel[]> = {
-    [ListLevel.ROOT]: [],
-    [ListLevel.FILE]: [ListLevel.FILE],
-    [ListLevel.TRACK]: [ListLevel.FILE, ListLevel.TRACK],
-    [ListLevel.SEGMENT]: [ListLevel.FILE, ListLevel.TRACK, ListLevel.SEGMENT],
-    [ListLevel.WAYPOINTS]: [ListLevel.WAYPOINTS],
-    [ListLevel.WAYPOINT]: [ListLevel.WAYPOINTS, ListLevel.WAYPOINT],
-};
-
-export const allowedPastes: Record<ListLevel, ListLevel[]> = {
-    [ListLevel.ROOT]: [],
-    [ListLevel.FILE]: [ListLevel.ROOT, ListLevel.FILE],
-    [ListLevel.TRACK]: [ListLevel.ROOT, ListLevel.FILE, ListLevel.TRACK],
-    [ListLevel.SEGMENT]: [ListLevel.ROOT, ListLevel.FILE, ListLevel.TRACK, ListLevel.SEGMENT],
-    [ListLevel.WAYPOINTS]: [ListLevel.FILE, ListLevel.WAYPOINTS, ListLevel.WAYPOINT],
-    [ListLevel.WAYPOINT]: [ListLevel.FILE, ListLevel.WAYPOINTS, ListLevel.WAYPOINT],
-};
-
 export abstract class ListItem {
     [x: string]: any;
     level: ListLevel;

website/src/lib/components/file-list/metadata/MetadataDialog.svelte

@@ -4,12 +4,12 @@
     import { Textarea } from '$lib/components/ui/textarea';
     import { Label } from '$lib/components/ui/label/index.js';
     import * as Popover from '$lib/components/ui/popover';
-    import { dbUtils } from '$lib/db';
     import { Save } from '@lucide/svelte';
     import { ListFileItem, ListTrackItem, type ListItem } from '../file-list';
     import { GPXTreeElement, Track, type AnyGPXTreeElement, Waypoint, GPXFile } from 'gpx';
     import { i18n } from '$lib/i18n.svelte';
     import { editMetadata } from '$lib/components/file-list/metadata/utils.svelte';
+    import { fileActionManager } from '$lib/logic/file-action-manager';
 
     let {
         node,
@@ -44,7 +44,7 @@
 </script>
 
 <Popover.Root bind:open>
-    <Popover.Trigger />
+    <Popover.Trigger class="-mx-1" />
     <Popover.Content side="top" sideOffset={22} alignOffset={30} class="flex flex-col gap-3">
         <Label for="name">{i18n._('menu.metadata.name')}</Label>
         <Input bind:value={name} id="name" class="font-semibold h-8" />
@@ -53,7 +53,7 @@
         <Button
             variant="outline"
             onclick={() => {
-                dbUtils.applyToFile(item.getFileId(), (file) => {
+                fileActionManager.applyToFile(item.getFileId(), (file) => {
                     if (item instanceof ListFileItem && node instanceof GPXFile) {
                         file.metadata.name = name;
                         file.metadata.desc = description;
@@ -68,7 +68,7 @@
                 open = false;
             }}
         >
-            <Save size="16" class="mr-1" />
+            <Save size="16" />
             {i18n._('menu.metadata.save')}
         </Button>
     </Popover.Content>

website/src/lib/components/file-list/sortable-file-list.ts

@@ -0,0 +1,284 @@
+import { isMac } from '$lib/utils';
+import Sortable, { type Direction } from 'sortablejs/Sortable';
+import { ListItem, ListLevel, ListRootItem } from './file-list';
+import { selection } from '$lib/logic/selection';
+import { getFileIds, moveItems } from '$lib/logic/file-actions';
+import { get, writable, type Readable } from 'svelte/store';
+import { settings } from '$lib/logic/settings';
+import type { GPXFileWithStatistics } from '$lib/logic/statistics-tree';
+import type { AnyGPXTreeElement, GPXTreeElement, Waypoint } from 'gpx';
+import { tick } from 'svelte';
+
+const { fileOrder } = settings;
+
+export const allowedMoves: Record<ListLevel, ListLevel[]> = {
+    [ListLevel.ROOT]: [],
+    [ListLevel.FILE]: [ListLevel.FILE],
+    [ListLevel.TRACK]: [ListLevel.FILE, ListLevel.TRACK],
+    [ListLevel.SEGMENT]: [ListLevel.FILE, ListLevel.TRACK, ListLevel.SEGMENT],
+    [ListLevel.WAYPOINTS]: [ListLevel.WAYPOINTS],
+    [ListLevel.WAYPOINT]: [ListLevel.WAYPOINTS, ListLevel.WAYPOINT],
+};
+
+export const allowedPastes: Record<ListLevel, ListLevel[]> = {
+    [ListLevel.ROOT]: [],
+    [ListLevel.FILE]: [ListLevel.ROOT, ListLevel.FILE],
+    [ListLevel.TRACK]: [ListLevel.ROOT, ListLevel.FILE, ListLevel.TRACK],
+    [ListLevel.SEGMENT]: [ListLevel.ROOT, ListLevel.FILE, ListLevel.TRACK, ListLevel.SEGMENT],
+    [ListLevel.WAYPOINTS]: [ListLevel.FILE, ListLevel.WAYPOINTS, ListLevel.WAYPOINT],
+    [ListLevel.WAYPOINT]: [ListLevel.FILE, ListLevel.WAYPOINTS, ListLevel.WAYPOINT],
+};
+
+export const dragging = writable<ListLevel | null>(null);
+
+export class SortableFileList {
+    private _node:
+        | Map<string, Readable<GPXFileWithStatistics | undefined>>
+        | GPXTreeElement<AnyGPXTreeElement>
+        | Waypoint[]
+        | Waypoint;
+    private _item: ListItem;
+    private _sortableLevel: ListLevel;
+    private _container: HTMLElement;
+    private _sortable: Sortable | null = null;
+    private _elements: { [id: string]: HTMLElement } = {};
+    private _updatingSelection: boolean = false;
+    private _unsubscribes: (() => void)[] = [];
+
+    constructor(
+        container: HTMLElement,
+        node:
+            | Map<string, Readable<GPXFileWithStatistics | undefined>>
+            | GPXTreeElement<AnyGPXTreeElement>
+            | Waypoint[]
+            | Waypoint,
+        item: ListItem,
+        waypointRoot: boolean,
+        sortableLevel: ListLevel,
+        orientation: Direction
+    ) {
+        this._node = node;
+        this._item = item;
+        this._sortableLevel = sortableLevel;
+        this._container = container;
+        this._sortable = Sortable.create(container, {
+            group: {
+                name: sortableLevel,
+                pull: allowedMoves[sortableLevel],
+                put: true,
+            },
+            direction: orientation,
+            forceAutoScrollFallback: true,
+            multiDrag: true,
+            multiDragKey: isMac() ? 'Meta' : 'Ctrl',
+            avoidImplicitDeselect: true,
+            onSelect: (e: Sortable.SortableEvent) =>
+                setTimeout(() => this.updateToSelection(e), 50),
+            onDeselect: (e: Sortable.SortableEvent) =>
+                setTimeout(() => this.updateToSelection(e), 50),
+            onStart: () => dragging.set(sortableLevel),
+            onEnd: () => dragging.set(null),
+            onSort: (e: Sortable.SortableEvent) => this.onSort(e),
+        });
+        Object.defineProperty(this._sortable, '_item', {
+            value: item,
+            writable: true,
+        });
+
+        Object.defineProperty(this._sortable, '_waypointRoot', {
+            value: waypointRoot,
+            writable: true,
+        });
+
+        this._unsubscribes.push(
+            selection.subscribe(() => tick().then(() => this.updateFromSelection()))
+        );
+        this._unsubscribes.push(fileOrder.subscribe(() => this.updateFromFileOrder()));
+    }
+
+    onSort(e: Sortable.SortableEvent) {
+        this.updateToFileOrder();
+
+        const from = Sortable.get(e.from);
+        const to = Sortable.get(e.to);
+
+        if (!from || !to) {
+            return;
+        }
+
+        let fromItem = from._item;
+        let toItem = to._item;
+
+        if (this._item === toItem && !(fromItem instanceof ListRootItem)) {
+            // Event is triggered on source and destination list, only handle it once
+            let fromItems = [];
+            let toItems = [];
+
+            if (from._waypointRoot) {
+                fromItems = [fromItem.extend('waypoints')];
+            } else {
+                let oldIndices: number[] =
+                    e.oldIndicies.length > 0 ? e.oldIndicies.map((i) => i.index) : [e.oldIndex];
+                oldIndices = oldIndices.filter((i) => i >= 0);
+                oldIndices.sort((a, b) => a - b);
+
+                fromItems = oldIndices.map((i) => fromItem.extend(i));
+            }
+
+            if (from._waypointRoot && to._waypointRoot) {
+                toItems = [toItem.extend('waypoints')];
+            } else {
+                if (to._waypointRoot) {
+                    toItem = toItem.extend('waypoints');
+                }
+
+                let newIndices: number[] =
+                    e.newIndicies.length > 0 ? e.newIndicies.map((i) => i.index) : [e.newIndex];
+                newIndices = newIndices.filter((i) => i >= 0);
+                newIndices.sort((a, b) => a - b);
+
+                if (toItem instanceof ListRootItem) {
+                    let newFileIds = getFileIds(newIndices.length);
+                    toItems = newIndices.map((i, index) => {
+                        get(fileOrder).splice(i, 0, newFileIds[index]);
+                        return this._item.extend(newFileIds[index]);
+                    });
+                } else {
+                    toItems = newIndices.map((i) => toItem.extend(i));
+                }
+            }
+
+            moveItems(fromItem, toItem, fromItems, toItems);
+        }
+    }
+
+    updateFromSelection() {
+        const changed = this.getChangedIds();
+        if (changed.length === 0) {
+            return;
+        }
+        const selection_ = get(selection);
+        for (let id of changed) {
+            let element = this._elements[id];
+            if (element) {
+                if (selection_.has(this._item.extend(id))) {
+                    Sortable.utils.select(element);
+                    element.scrollIntoView({
+                        behavior: 'smooth',
+                        block: 'nearest',
+                    });
+                } else {
+                    Sortable.utils.deselect(element);
+                }
+            }
+        }
+    }
+
+    updateToSelection(e: Sortable.SortableEvent) {
+        if (!this._sortable) return;
+        if (this._updatingSelection) return;
+        this._updatingSelection = true;
+        const changed = this.getChangedIds();
+        if (changed.length == 0) {
+            this._updatingSelection = false;
+            return;
+        }
+        selection.update(($selection) => {
+            $selection.clear();
+            Object.entries(this._elements).forEach(([id, element]) => {
+                $selection.set(
+                    this._item.extend(this.getRealId(id)),
+                    element.classList.contains('sortable-selected')
+                );
+            });
+
+            if (
+                e.originalEvent &&
+                !(e.originalEvent.ctrlKey || e.originalEvent.metaKey || e.originalEvent.shiftKey) &&
+                ($selection.size > 1 ||
+                    !$selection.has(this._item.extend(this.getRealId(changed[0]))))
+            ) {
+                // Fix bug that sometimes causes a single select to be treated as a multi-select
+                $selection.clear();
+                $selection.set(this._item.extend(this.getRealId(changed[0])), true);
+            }
+            return $selection;
+        });
+        this._updatingSelection = false;
+    }
+
+    updateFromFileOrder() {
+        if (!this._sortable || this._sortableLevel !== ListLevel.FILE) {
+            return;
+        }
+
+        const fileOrder_ = get(fileOrder);
+        const sortableOrder = this._sortable.toArray();
+
+        if (
+            fileOrder_.length !== sortableOrder.length ||
+            fileOrder_.some((value, index) => value !== sortableOrder[index])
+        ) {
+            this._sortable.sort(fileOrder_);
+        }
+    }
+
+    updateToFileOrder() {
+        if (!this._sortable || this._sortableLevel !== ListLevel.FILE) {
+            return;
+        }
+
+        const fileOrder_ = get(fileOrder);
+        const sortableOrder = this._sortable.toArray();
+
+        if (
+            fileOrder_.length !== sortableOrder.length ||
+            fileOrder_.some((value, index) => value !== sortableOrder[index])
+        ) {
+            fileOrder.set(sortableOrder);
+        }
+    }
+
+    updateElements() {
+        this._elements = {};
+        this._container.childNodes.forEach((element) => {
+            if (element instanceof HTMLElement) {
+                let attr = element.getAttribute('data-id');
+                if (attr) {
+                    if (this._node instanceof Map && !this._node.has(attr)) {
+                        element.remove();
+                    } else {
+                        this._elements[attr] = element;
+                    }
+                }
+            }
+        });
+    }
+
+    destroy() {
+        this._sortable = null;
+        this._unsubscribes.forEach((unsubscribe) => unsubscribe());
+        this._unsubscribes = [];
+    }
+
+    getChangedIds() {
+        let changed: (string | number)[] = [];
+        const selection_ = get(selection);
+        Object.entries(this._elements).forEach(([id, element]) => {
+            let realId = this.getRealId(id);
+            let realItem = this._item.extend(realId);
+            let inSelection = selection_.has(realItem);
+            let isSelected = element.classList.contains('sortable-selected');
+            if (inSelection !== isSelected) {
+                changed.push(realId);
+            }
+        });
+        return changed;
+    }
+
+    getRealId(id: string | number) {
+        return this._sortableLevel === ListLevel.FILE || this._sortableLevel === ListLevel.WAYPOINTS
+            ? id
+            : parseInt(id as string);
+    }
+}

website/src/lib/components/file-list/style/StyleDialog.svelte

@@ -4,7 +4,6 @@
     import { Label } from '$lib/components/ui/label/index.js';
     import { Slider } from '$lib/components/ui/slider';
     import * as Popover from '$lib/components/ui/popover';
-    import { dbUtils, getFile, settings } from '$lib/db';
     import { Save } from '@lucide/svelte';
     import {
         ListFileItem,
@@ -12,10 +11,14 @@
         type ListItem,
     } from '$lib/components/file-list/file-list';
     import { editStyle } from '$lib/components/file-list/style/utils.svelte';
-    import { selection } from '../Selection';
-    import { gpxLayers } from '$lib/stores';
     import { i18n } from '$lib/i18n.svelte';
     import type { LineStyleExtension } from 'gpx';
+    import { settings } from '$lib/logic/settings';
+    import { selection } from '$lib/logic/selection';
+    import { fileStateCollection } from '$lib/logic/file-state';
+    import { gpxLayers } from '$lib/components/map/gpx-layer/gpx-layers';
+    import { untrack } from 'svelte';
+    import { fileActions } from '$lib/logic/file-actions';
 
     let {
         item,
@@ -40,8 +43,8 @@
 
         $selection.forEach((item) => {
             if (item instanceof ListFileItem) {
-                let file = getFile(item.getFileId());
-                let layer = gpxLayers.get(item.getFileId());
+                let file = fileStateCollection.getFile(item.getFileId());
+                let layer = gpxLayers.getLayer(item.getFileId());
                 if (file && layer) {
                     let style = file.getStyle();
                     color = layer.layerColor;
@@ -53,8 +56,8 @@
                     }
                 }
             } else if (item instanceof ListTrackItem) {
-                let file = getFile(item.getFileId());
-                let layer = gpxLayers.get(item.getFileId());
+                let file = fileStateCollection.getFile(item.getFileId());
+                let layer = gpxLayers.getLayer(item.getFileId());
                 if (file && layer) {
                     color = layer.layerColor;
                     let track = file.trk[item.getTrackIndex()];
@@ -81,7 +84,7 @@
 
     $effect(() => {
         if ($selection && open) {
-            setStyleInputs();
+            untrack(() => setStyleInputs());
         }
     });
 
@@ -102,9 +105,9 @@
         if (widthChanged) {
             style['gpx_style:width'] = width;
         }
-        dbUtils.setStyleToSelection(style);
+        fileActions.setStyleToSelection(style);
 
-        if (item instanceof ListFileItem && $selection.size === gpxLayers.size) {
+        if (item instanceof ListFileItem && $selection.size === fileStateCollection.size) {
             if (style['gpx_style:opacity']) {
                 $defaultOpacity = style['gpx_style:opacity'];
             }
@@ -118,7 +121,7 @@
 </script>
 
 <Popover.Root bind:open>
-    <Popover.Trigger />
+    <Popover.Trigger class="-mx-1" />
     <Popover.Content side="top" sideOffset={22} alignOffset={30} class="flex flex-col gap-3">
         <Label class="flex flex-row gap-2 items-center justify-between">
             {i18n._('menu.style.color')}
@@ -161,7 +164,7 @@
             disabled={!colorChanged && !opacityChanged && !widthChanged}
             onclick={applyStyle}
         >
-            <Save size="16" class="mr-1" />
+            <Save size="16" />
             {i18n._('menu.metadata.save')}
         </Button>
     </Popover.Content>

website/src/lib/components/map/CoordinatesPopup.svelte

@@ -1,20 +1,18 @@
 <script lang="ts">
-    import { map } from '$lib/components/map/map.svelte';
-    import { trackpointPopup } from '$lib/components/map/gpx-layer/GPXLayerPopup';
+    import { map } from '$lib/components/map/map';
+    import { trackpointPopup } from '$lib/components/map/gpx-layer/gpx-layer-popup';
     import { TrackPoint } from 'gpx';
 
-    $effect(() => {
-        if (map.current) {
-            map.current.on('contextmenu', (e) => {
-                trackpointPopup?.setItem({
-                    item: new TrackPoint({
-                        attributes: {
-                            lat: e.lngLat.lat,
-                            lon: e.lngLat.lng,
-                        },
-                    }),
-                });
+    map.onLoad((map_) => {
+        map_.on('contextmenu', (e) => {
+            trackpointPopup?.setItem({
+                item: new TrackPoint({
+                    attributes: {
+                        lat: e.lngLat.lat,
+                        lon: e.lngLat.lng,
+                    },
+                }),
             });
-        }
+        });
     });
 </script>

website/src/lib/components/map/Map.svelte

@@ -48,7 +48,7 @@
             language = 'en';
         }
 
-        map.init(PUBLIC_MAPBOX_TOKEN, language, hash, geocoder, geolocate);
+        map.init(language, hash, geocoder, geolocate);
     });
 
     onDestroy(() => {

website/src/lib/components/map/custom-control/CustomControl.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-    import CustomControl from './CustomControl';
+    import CustomControl from './custom-control';
     import { map } from '$lib/components/map/map';
     import { onMount, type Snippet } from 'svelte';
 

website/src/lib/components/map/gpx-layer/CopyCoordinates.svelte

@@ -16,7 +16,8 @@
 </script>
 
 <Button
-    class="w-full px-2 py-1 h-8 justify-start {className}"
+    size="sm"
+    class="justify-start {className}"
     variant="outline"
     onclick={() => {
         navigator.clipboard.writeText(
@@ -25,6 +26,6 @@
         onCopy();
     }}
 >
-    <ClipboardCopy size="16" class="mr-1" />
+    <ClipboardCopy size="16" />
     {i18n._('menu.copy_coordinates')}
 </Button>

website/src/lib/components/map/gpx-layer/DistanceMarkers.ts

@@ -1,129 +0,0 @@
-import { settings } from '$lib/logic/settings';
-import type { GeoJSONSource } from 'mapbox-gl';
-import { get } from 'svelte/store';
-
-const { distanceMarkers, distanceUnits } = settings;
-
-const stops = [
-    [100, 0],
-    [50, 7],
-    [25, 8, 10],
-    [10, 10],
-    [5, 11],
-    [1, 13],
-];
-
-export class DistanceMarkers {
-    map: mapboxgl.Map;
-    updateBinded: () => void = this.update.bind(this);
-    unsubscribes: (() => void)[] = [];
-
-    constructor(map: mapboxgl.Map) {
-        this.map = map;
-
-        this.unsubscribes.push(gpxStatistics.subscribe(this.updateBinded));
-        this.unsubscribes.push(distanceMarkers.subscribe(this.updateBinded));
-        this.unsubscribes.push(distanceUnits.subscribe(this.updateBinded));
-        this.map.on('style.import.load', this.updateBinded);
-    }
-
-    update() {
-        try {
-            if (get(distanceMarkers)) {
-                let distanceSource: GeoJSONSource | undefined =
-                    this.map.getSource('distance-markers');
-                if (distanceSource) {
-                    distanceSource.setData(this.getDistanceMarkersGeoJSON());
-                } else {
-                    this.map.addSource('distance-markers', {
-                        type: 'geojson',
-                        data: this.getDistanceMarkersGeoJSON(),
-                    });
-                }
-                stops.forEach(([d, minzoom, maxzoom]) => {
-                    if (!this.map.getLayer(`distance-markers-${d}`)) {
-                        this.map.addLayer({
-                            id: `distance-markers-${d}`,
-                            type: 'symbol',
-                            source: 'distance-markers',
-                            filter:
-                                d === 5
-                                    ? [
-                                          'any',
-                                          ['==', ['get', 'level'], 5],
-                                          ['==', ['get', 'level'], 25],
-                                      ]
-                                    : ['==', ['get', 'level'], d],
-                            minzoom: minzoom,
-                            maxzoom: maxzoom ?? 24,
-                            layout: {
-                                'text-field': ['get', 'distance'],
-                                'text-size': 14,
-                                'text-font': ['Open Sans Bold'],
-                            },
-                            paint: {
-                                'text-color': 'black',
-                                'text-halo-width': 2,
-                                'text-halo-color': 'white',
-                            },
-                        });
-                    } else {
-                        this.map.moveLayer(`distance-markers-${d}`);
-                    }
-                });
-            } else {
-                stops.forEach(([d]) => {
-                    if (this.map.getLayer(`distance-markers-${d}`)) {
-                        this.map.removeLayer(`distance-markers-${d}`);
-                    }
-                });
-            }
-        } catch (e) {
-            // No reliable way to check if the map is ready to add sources and layers
-            return;
-        }
-    }
-
-    remove() {
-        this.unsubscribes.forEach((unsubscribe) => unsubscribe());
-    }
-
-    getDistanceMarkersGeoJSON(): GeoJSON.FeatureCollection {
-        let statistics = get(gpxStatistics);
-
-        let features = [];
-        let currentTargetDistance = 1;
-        for (let i = 0; i < statistics.local.distance.total.length; i++) {
-            if (
-                statistics.local.distance.total[i] >=
-                currentTargetDistance * (get(distanceUnits) === 'metric' ? 1 : 1.60934)
-            ) {
-                let distance = currentTargetDistance.toFixed(0);
-                let [level, minzoom] = stops.find(([d]) => currentTargetDistance % d === 0) ?? [
-                    0, 0,
-                ];
-                features.push({
-                    type: 'Feature',
-                    geometry: {
-                        type: 'Point',
-                        coordinates: [
-                            statistics.local.points[i].getLongitude(),
-                            statistics.local.points[i].getLatitude(),
-                        ],
-                    },
-                    properties: {
-                        distance,
-                        level,
-                        minzoom,
-                    },
-                } as GeoJSON.Feature);
-                currentTargetDistance += 1;
-            }
-        }
-
-        return {
-            type: 'FeatureCollection',
-            features,
-        };
-    }
-}

website/src/lib/components/map/gpx-layer/GPXLayers.svelte

@@ -1,41 +1,28 @@
 <script lang="ts">
+    import { onDestroy } from 'svelte';
     import { gpxLayers } from '$lib/components/map/gpx-layer/gpx-layers';
-    import { onMount } from 'svelte';
-    // import { map, gpxLayers } from '$lib/stores';
-    // import { GPXLayer } from './gpx-layer';
-    // import { DistanceMarkers } from './DistanceMarkers';
-    // import { StartEndMarkers } from './StartEndMarkers';
-    // import { onDestroy } from 'svelte';
-    // import { createPopups, removePopups } from './GPXLayerPopup';
+    import { DistanceMarkers } from '$lib/components/map/gpx-layer/distance-markers';
+    import { StartEndMarkers } from '$lib/components/map/gpx-layer/start-end-markers';
+    import { createPopups, removePopups } from '$lib/components/map/gpx-layer/gpx-layer-popup';
+    import { map } from '$lib/components/map/map';
 
-    // let distanceMarkers = $derived(map.current ? new DistanceMarkers(map.current) : undefined);
-    // let startEndMarkers = $derived(map.current ? new StartEndMarkers(map.current) : undefined);
+    let distanceMarkers: DistanceMarkers;
+    let startEndMarkers: StartEndMarkers;
 
-    // $: if ($map) {
-    //     if (distanceMarkers) {
-    //         distanceMarkers.remove();
-    //     }
-    //     if (startEndMarkers) {
-    //         startEndMarkers.remove();
-    //     }
-    //     createPopups($map);
-    //     distanceMarkers = new DistanceMarkers($map);
-    //     startEndMarkers = new StartEndMarkers($map);
-    // }
-
-    // onDestroy(() => {
-    //     removePopups();
-    //     if (distanceMarkers) {
-    //         distanceMarkers.remove();
-    //         distanceMarkers = undefined;
-    //     }
-    //     if (startEndMarkers) {
-    //         startEndMarkers.remove();
-    //         startEndMarkers = undefined;
-    //     }
-    // });
-
-    onMount(() => {
+    map.onLoad((map_) => {
         gpxLayers.init();
+        startEndMarkers = new StartEndMarkers();
+        distanceMarkers = new DistanceMarkers();
+        createPopups(map_);
+    });
+
+    onDestroy(() => {
+        if (startEndMarkers) {
+            startEndMarkers.remove();
+        }
+        if (distanceMarkers) {
+            distanceMarkers.remove();
+        }
+        removePopups();
     });
 </script>

website/src/lib/components/map/gpx-layer/TrackpointPopup.svelte

@@ -1,19 +1,18 @@
 <script lang="ts">
     import type { TrackPoint } from 'gpx';
+    import { Button } from '$lib/components/ui/button';
     import CopyCoordinates from '$lib/components/map/gpx-layer/CopyCoordinates.svelte';
     import * as Card from '$lib/components/ui/card';
     import WithUnits from '$lib/components/WithUnits.svelte';
-    import { Compass, Mountain, Timer } from '@lucide/svelte';
+    import { Compass, Earth, Mountain, Timer } from '@lucide/svelte';
     import { i18n } from '$lib/i18n.svelte';
-    import type { PopupItem } from '$lib/components/map/map';
+    import type { PopupItem } from '$lib/components/map/map-popup';
+    import { map } from '$lib/components/map/map';
 
     let { trackpoint }: { trackpoint: PopupItem<TrackPoint> } = $props();
 </script>
 
 <Card.Root class="border-none shadow-md text-base p-2">
-    <Card.Header class="p-0">
-        <Card.Title class="text-md"></Card.Title>
-    </Card.Header>
     <Card.Content class="flex flex-col p-0 text-xs gap-1">
         <div class="flex flex-row items-center gap-1">
             <Compass size="14" />
@@ -38,5 +37,17 @@
             onCopy={() => trackpoint.hide?.()}
             class="mt-0.5"
         />
+        {#if trackpoint.fileId === undefined}
+            <Button
+                size="sm"
+                variant="outline"
+                class="justify-start"
+                href={`https://www.openstreetmap.org/edit?#map=${(($map?.getZoom() ?? 17) + 1).toFixed(0)}/${trackpoint.item.getLatitude().toFixed(5)}/${trackpoint.item.getLongitude().toFixed(5)}`}
+                target="_blank"
+            >
+                <Earth size="14" />
+                {i18n._('menu.edit_osm')}
+            </Button>
+        {/if}
     </Card.Content>
 </Card.Root>

website/src/lib/components/map/gpx-layer/WaypointPopup.svelte

@@ -11,12 +11,21 @@
     import sanitizeHtml from 'sanitize-html';
     import type { Waypoint } from 'gpx';
     import { ScrollArea } from '$lib/components/ui/scroll-area/index.js';
-    import type { PopupItem } from '$lib/components/map/map';
     import { fileActions } from '$lib/logic/file-actions';
+    import type { PopupItem } from '$lib/components/map/map-popup';
+    import { selection } from '$lib/logic/selection';
+    import { ListFileItem } from '$lib/components/file-list/file-list';
 
-    export let waypoint: PopupItem<Waypoint>;
+    let {
+        waypoint,
+    }: {
+        waypoint: PopupItem<Waypoint>;
+    } = $props();
 
-    $: symbolKey = waypoint ? getSymbolKey(waypoint.item.sym) : undefined;
+    let selected = $derived(
+        waypoint.fileId ? $selection.hasAnyChildren(new ListFileItem(waypoint.fileId)) : false
+    );
+    let symbolKey = $derived(waypoint ? getSymbolKey(waypoint.item.sym) : undefined);
 
     function sanitize(text: string | undefined): string {
         if (text === undefined) {
@@ -32,8 +41,8 @@
     }
 </script>
 
-<Card.Root class="border-none shadow-md text-base p-2 max-w-[50dvw]">
-    <Card.Header class="p-0">
+<Card.Root class="border-none shadow-md text-base p-2 max-w-[50dvw] gap-0">
+    <Card.Header class="p-0 gap-0">
         <Card.Title class="text-md">
             {#if waypoint.item.link && waypoint.item.link.attributes && waypoint.item.link.attributes.href}
                 <a href={waypoint.item.link.attributes.href} target="_blank">
@@ -50,11 +59,8 @@
             {#if symbolKey}
                 <span>
                     {#if symbols[symbolKey].icon}
-                        <svelte:component
-                            this={symbols[symbolKey].icon}
-                            size="12"
-                            class="inline-block mb-0.5"
-                        />
+                        {@const Icon = symbols[symbolKey].icon}
+                        <Icon size="12" class="inline-block mb-1" />
                     {:else}
                         <span class="w-4 inline-block"></span>
                     {/if}
@@ -80,17 +86,18 @@
         </ScrollArea>
         <div class="mt-2 flex flex-col gap-1">
             <CopyCoordinates coordinates={waypoint.item.attributes} />
-            {#if $currentTool === Tool.WAYPOINT}
+            {#if $currentTool === Tool.WAYPOINT && selected}
                 <Button
-                    class="w-full px-2 py-1 h-8 justify-start"
+                    class="p-1 has-[>svg]:px-2 h-8"
                     variant="outline"
                     onclick={() => {
                         if (waypoint.fileId) {
                             fileActions.deleteWaypoint(waypoint.fileId, waypoint.item._data.index);
+                            waypoint.hide?.();
                         }
                     }}
                 >
-                    <Trash2 size="16" class="mr-1" />
+                    <Trash2 size="16" />
                     {i18n._('menu.delete')}
                     <Shortcut shift={true} click={true} />
                 </Button>

website/src/lib/components/map/gpx-layer/distance-markers.ts

@@ -0,0 +1,131 @@
+import { settings } from '$lib/logic/settings';
+import { gpxStatistics } from '$lib/logic/statistics';
+import { getConvertedDistanceToKilometers } from '$lib/units';
+import type { GeoJSONSource } from 'mapbox-gl';
+import { get } from 'svelte/store';
+import { ANCHOR_LAYER_KEY, map } from '$lib/components/map/map';
+import { allHidden } from '$lib/logic/hidden';
+
+const { distanceMarkers, distanceUnits } = settings;
+
+const levels = [100, 50, 25, 10, 5, 1];
+
+export class DistanceMarkers {
+    updateBinded: () => void = this.update.bind(this);
+    unsubscribes: (() => void)[] = [];
+
+    constructor() {
+        this.unsubscribes.push(gpxStatistics.subscribe(this.updateBinded));
+        this.unsubscribes.push(distanceMarkers.subscribe(this.updateBinded));
+        this.unsubscribes.push(distanceUnits.subscribe(this.updateBinded));
+        this.unsubscribes.push(allHidden.subscribe(this.updateBinded));
+        this.unsubscribes.push(
+            map.subscribe((map_) => {
+                if (map_) {
+                    map_.on('style.import.load', this.updateBinded);
+                }
+            })
+        );
+    }
+
+    update() {
+        const map_ = get(map);
+        if (!map_) return;
+
+        try {
+            if (get(distanceMarkers) && !get(allHidden)) {
+                let distanceSource: GeoJSONSource | undefined = map_.getSource('distance-markers');
+                if (distanceSource) {
+                    distanceSource.setData(this.getDistanceMarkersGeoJSON());
+                } else {
+                    map_.addSource('distance-markers', {
+                        type: 'geojson',
+                        data: this.getDistanceMarkersGeoJSON(),
+                    });
+                }
+                if (!map_.getLayer('distance-markers')) {
+                    map_.addLayer(
+                        {
+                            id: 'distance-markers',
+                            type: 'symbol',
+                            source: 'distance-markers',
+                            filter: [
+                                'match',
+                                ['get', 'level'],
+                                100,
+                                ['>=', ['zoom'], 0],
+                                50,
+                                ['>=', ['zoom'], 7],
+                                25,
+                                [
+                                    'any',
+                                    ['all', ['>=', ['zoom'], 8], ['<=', ['zoom'], 9]],
+                                    ['>=', ['zoom'], 11],
+                                ],
+                                10,
+                                ['>=', ['zoom'], 10],
+                                5,
+                                ['>=', ['zoom'], 11],
+                                1,
+                                ['>=', ['zoom'], 13],
+                                false,
+                            ],
+                            layout: {
+                                'text-field': ['get', 'distance'],
+                                'text-size': 14,
+                                'text-font': ['Open Sans Bold'],
+                            },
+                            paint: {
+                                'text-color': 'black',
+                                'text-halo-width': 2,
+                                'text-halo-color': 'white',
+                            },
+                        },
+                        ANCHOR_LAYER_KEY.distanceMarkers
+                    );
+                }
+            } else {
+                if (map_.getLayer('distance-markers')) {
+                    map_.removeLayer('distance-markers');
+                }
+            }
+        } catch (e) {
+            // No reliable way to check if the map is ready to add sources and layers
+            return;
+        }
+    }
+
+    remove() {
+        this.unsubscribes.forEach((unsubscribe) => unsubscribe());
+    }
+
+    getDistanceMarkersGeoJSON(): GeoJSON.FeatureCollection {
+        let statistics = get(gpxStatistics);
+
+        let features: GeoJSON.Feature[] = [];
+        let currentTargetDistance = 1;
+        statistics.forEachTrackPoint((trkpt, dist) => {
+            if (dist >= getConvertedDistanceToKilometers(currentTargetDistance)) {
+                let distance = currentTargetDistance.toFixed(0);
+                let level = levels.find((level) => currentTargetDistance % level === 0) || 1;
+                features.push({
+                    type: 'Feature',
+                    geometry: {
+                        type: 'Point',
+                        coordinates: [trkpt.getLongitude(), trkpt.getLatitude()],
+                    },
+                    properties: {
+                        distance,
+                        level,
+                    },
+                } as GeoJSON.Feature);
+                currentTargetDistance += 1;
+            }
+        });
+
+        return {
+            type: 'FeatureCollection',
+            features,
+        };
+    }
+}

website/src/lib/components/map/gpx-layer/gpx-layer.ts

@@ -1,6 +1,6 @@
 import { get, type Readable } from 'svelte/store';
-import mapboxgl from 'mapbox-gl';
-import { map } from '$lib/components/map/map';
+import mapboxgl, { type FilterSpecification } from 'mapbox-gl';
+import { ANCHOR_LAYER_KEY, map } from '$lib/components/map/map';
 import { waypointPopup, trackpointPopup } from './gpx-layer-popup';
 import {
     ListTrackSegmentItem,
@@ -10,14 +10,7 @@ import {
     ListFileItem,
     ListRootItem,
 } from '$lib/components/file-list/file-list';
-import {
-    getClosestLinePoint,
-    getElevation,
-    resetCursor,
-    setGrabbingCursor,
-    setPointerCursor,
-    setScissorsCursor,
-} from '$lib/utils';
+import { getClosestLinePoint, getElevation } from '$lib/utils';
 import { selectedWaypoint } from '$lib/components/toolbar/tools/waypoint/waypoint';
 import { MapPin, Square } from 'lucide-static';
 import { getSymbolKey, symbols } from '$lib/assets/symbols';
@@ -28,6 +21,8 @@ import { currentTool, Tool } from '$lib/components/toolbar/tools';
 import { fileActionManager } from '$lib/logic/file-action-manager';
 import { fileActions } from '$lib/logic/file-actions';
 import { splitAs } from '$lib/components/toolbar/tools/scissors/scissors';
+import { mapCursor, MapCursorState } from '$lib/logic/map-cursor';
+import { gpxColors } from '$lib/components/map/gpx-layer/gpx-layers';
 
 const colors = [
     '#ff0000',
@@ -49,26 +44,49 @@ for (let color of colors) {
 }
 
 // Get the color with the least amount of uses
-function getColor() {
+function getColor(fileId: string) {
     let color = colors.reduce((a, b) => (colorCount[a] <= colorCount[b] ? a : b));
     colorCount[color]++;
+    gpxColors.update((colors) => {
+        colors.set(fileId, color);
+        return colors;
+    });
     return color;
 }
 
-function decrementColor(color: string) {
+function replaceColor(fileId: string, oldColor: string, newColor: string) {
+    if (colorCount.hasOwnProperty(oldColor)) {
+        colorCount[oldColor]--;
+    }
+    colorCount[newColor]++;
+    gpxColors.update((colors) => {
+        colors.set(fileId, newColor);
+        return colors;
+    });
+}
+
+function removeColor(fileId: string, color: string) {
     if (colorCount.hasOwnProperty(color)) {
         colorCount[color]--;
     }
+    gpxColors.update((colors) => {
+        colors.delete(fileId);
+        return colors;
+    });
 }
 
-function getMarkerForSymbol(symbol: string | undefined, layerColor: string) {
+export function getSvgForSymbol(symbol?: string | undefined, layerColor?: string | undefined) {
     let symbolSvg = symbol ? symbols[symbol]?.iconSvg : undefined;
     return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-    ${Square.replace('width="24"', 'width="12"')
-        .replace('height="24"', 'height="12"')
-        .replace('stroke="currentColor"', 'stroke="SteelBlue"')
-        .replace('stroke-width="2"', 'stroke-width="1.5" x="9.6" y="0.4"')
-        .replace('fill="none"', `fill="${layerColor}"`)}
+    ${
+        layerColor
+            ? Square.replace('width="24"', 'width="12"')
+                  .replace('height="24"', 'height="12"')
+                  .replace('stroke="currentColor"', 'stroke="SteelBlue"')
+                  .replace('stroke-width="2"', 'stroke-width="1.5" x="9.6" y="0.4"')
+                  .replace('fill="none"', `fill="${layerColor}"`)
+            : ''
+    }
     ${MapPin.replace('width="24"', '')
         .replace('height="24"', '')
         .replace('stroke="currentColor"', '')
@@ -93,9 +111,10 @@ export class GPXLayer {
     fileId: string;
     file: Readable<GPXFileWithStatistics | undefined>;
     layerColor: string;
-    markers: mapboxgl.Marker[] = [];
     selected: boolean = false;
-    draggable: boolean;
+    currentWaypointData: GeoJSON.FeatureCollection | null = null;
+    draggedWaypointIndex: number | null = null;
+    draggingStartingPosition: mapboxgl.Point = new mapboxgl.Point(0, 0);
     unsubscribe: Function[] = [];
 
     updateBinded: () => void = this.update.bind(this);
@@ -104,11 +123,25 @@ export class GPXLayer {
     layerOnMouseMoveBinded: (e: any) => void = this.layerOnMouseMove.bind(this);
     layerOnClickBinded: (e: any) => void = this.layerOnClick.bind(this);
     layerOnContextMenuBinded: (e: any) => void = this.layerOnContextMenu.bind(this);
+    waypointLayerOnMouseEnterBinded: (e: mapboxgl.MapMouseEvent) => void =
+        this.waypointLayerOnMouseEnter.bind(this);
+    waypointLayerOnMouseLeaveBinded: (e: mapboxgl.MapMouseEvent) => void =
+        this.waypointLayerOnMouseLeave.bind(this);
+    waypointLayerOnClickBinded: (e: mapboxgl.MapMouseEvent) => void =
+        this.waypointLayerOnClick.bind(this);
+    waypointLayerOnMouseDownBinded: (e: mapboxgl.MapMouseEvent) => void =
+        this.waypointLayerOnMouseDown.bind(this);
+    waypointLayerOnTouchStartBinded: (e: mapboxgl.MapTouchEvent) => void =
+        this.waypointLayerOnTouchStart.bind(this);
+    waypointLayerOnMouseMoveBinded: (e: mapboxgl.MapMouseEvent | mapboxgl.MapTouchEvent) => void =
+        this.waypointLayerOnMouseMove.bind(this);
+    waypointLayerOnMouseUpBinded: (e: mapboxgl.MapMouseEvent | mapboxgl.MapTouchEvent) => void =
+        this.waypointLayerOnMouseUp.bind(this);
 
     constructor(fileId: string, file: Readable<GPXFileWithStatistics | undefined>) {
         this.fileId = fileId;
         this.file = file;
-        this.layerColor = getColor();
+        this.layerColor = getColor(fileId);
         this.unsubscribe.push(
             map.subscribe(($map) => {
                 if ($map) {
@@ -131,18 +164,6 @@ export class GPXLayer {
             })
         );
         this.unsubscribe.push(directionMarkers.subscribe(this.updateBinded));
-        this.unsubscribe.push(
-            currentTool.subscribe((tool) => {
-                if (tool === Tool.WAYPOINT && !this.draggable) {
-                    this.draggable = true;
-                    this.markers.forEach((marker) => marker.setDraggable(true));
-                } else if (tool !== Tool.WAYPOINT && this.draggable) {
-                    this.draggable = false;
-                    this.markers.forEach((marker) => marker.setDraggable(false));
-                }
-            })
-        );
-        this.draggable = get(currentTool) === Tool.WAYPOINT;
     }
 
     update() {
@@ -157,12 +178,14 @@ export class GPXLayer {
             file._data.style.color &&
             this.layerColor !== `#${file._data.style.color}`
         ) {
-            decrementColor(this.layerColor);
+            replaceColor(this.fileId, this.layerColor, `#${file._data.style.color}`);
             this.layerColor = `#${file._data.style.color}`;
         }
 
+        this.loadIcons();
+
         try {
-            let source = _map.getSource(this.fileId);
+            let source = _map.getSource(this.fileId) as mapboxgl.GeoJSONSource | undefined;
             if (source) {
                 source.setData(this.getGeoJSON());
             } else {
@@ -173,20 +196,23 @@ export class GPXLayer {
             }
 
             if (!_map.getLayer(this.fileId)) {
-                _map.addLayer({
-                    id: this.fileId,
-                    type: 'line',
-                    source: this.fileId,
-                    layout: {
-                        'line-join': 'round',
-                        'line-cap': 'round',
+                _map.addLayer(
+                    {
+                        id: this.fileId,
+                        type: 'line',
+                        source: this.fileId,
+                        layout: {
+                            'line-join': 'round',
+                            'line-cap': 'round',
+                        },
+                        paint: {
+                            'line-color': ['get', 'color'],
+                            'line-width': ['get', 'width'],
+                            'line-opacity': ['get', 'opacity'],
+                        },
                     },
-                    paint: {
-                        'line-color': ['get', 'color'],
-                        'line-width': ['get', 'width'],
-                        'line-opacity': ['get', 'opacity'],
-                    },
-                });
+                    ANCHOR_LAYER_KEY.tracks
+                );
 
                 _map.on('click', this.fileId, this.layerOnClickBinded);
                 _map.on('contextmenu', this.fileId, this.layerOnContextMenuBinded);
@@ -195,6 +221,59 @@ export class GPXLayer {
                 _map.on('mousemove', this.fileId, this.layerOnMouseMoveBinded);
             }
 
+            let waypointSource = _map.getSource(this.fileId + '-waypoints') as
+                | mapboxgl.GeoJSONSource
+                | undefined;
+            this.currentWaypointData = this.getWaypointsGeoJSON();
+            if (waypointSource) {
+                waypointSource.setData(this.currentWaypointData);
+            } else {
+                _map.addSource(this.fileId + '-waypoints', {
+                    type: 'geojson',
+                    data: this.currentWaypointData,
+                });
+            }
+
+            if (!_map.getLayer(this.fileId + '-waypoints')) {
+                _map.addLayer(
+                    {
+                        id: this.fileId + '-waypoints',
+                        type: 'symbol',
+                        source: this.fileId + '-waypoints',
+                        layout: {
+                            'icon-image': ['get', 'icon'],
+                            'icon-size': 0.3,
+                            'icon-anchor': 'bottom',
+                            'icon-padding': 0,
+                            'icon-allow-overlap': true,
+                        },
+                    },
+                    ANCHOR_LAYER_KEY.waypoints
+                );
+
+                _map.on(
+                    'mouseenter',
+                    this.fileId + '-waypoints',
+                    this.waypointLayerOnMouseEnterBinded
+                );
+                _map.on(
+                    'mouseleave',
+                    this.fileId + '-waypoints',
+                    this.waypointLayerOnMouseLeaveBinded
+                );
+                _map.on('click', this.fileId + '-waypoints', this.waypointLayerOnClickBinded);
+                _map.on(
+                    'mousedown',
+                    this.fileId + '-waypoints',
+                    this.waypointLayerOnMouseDownBinded
+                );
+                _map.on(
+                    'touchstart',
+                    this.fileId + '-waypoints',
+                    this.waypointLayerOnTouchStartBinded
+                );
+            }
+
             if (get(directionMarkers)) {
                 if (!_map.getLayer(this.fileId + '-direction')) {
                     _map.addLayer(
@@ -219,7 +298,7 @@ export class GPXLayer {
                                 'text-halo-color': 'white',
                             },
                         },
-                        _map.getLayer('distance-markers') ? 'distance-markers' : undefined
+                        ANCHOR_LAYER_KEY.directionMarkers
                     );
                 }
             } else {
@@ -228,151 +307,40 @@ export class GPXLayer {
                 }
             }
 
-            let visibleItems: [number, number][] = [];
+            let visibleTrackSegmentIds: string[] = [];
             file.forEachSegment((segment, trackIndex, segmentIndex) => {
                 if (!segment._data.hidden) {
-                    visibleItems.push([trackIndex, segmentIndex]);
+                    visibleTrackSegmentIds.push(`${trackIndex}-${segmentIndex}`);
+                }
+            });
+            const segmentFilter: FilterSpecification = [
+                'in',
+                ['get', 'trackSegmentId'],
+                ['literal', visibleTrackSegmentIds],
+            ];
+
+            _map.setFilter(this.fileId, segmentFilter, { validate: false });
+
+            if (_map.getLayer(this.fileId + '-direction')) {
+                _map.setFilter(this.fileId + '-direction', segmentFilter, { validate: false });
+            }
+
+            let visibleWaypoints: number[] = [];
+            file.wpt.forEach((waypoint, waypointIndex) => {
+                if (!waypoint._data.hidden) {
+                    visibleWaypoints.push(waypointIndex);
                 }
             });
 
             _map.setFilter(
-                this.fileId,
-                [
-                    'any',
-                    ...visibleItems.map(([trackIndex, segmentIndex]) => [
-                        'all',
-                        ['==', 'trackIndex', trackIndex],
-                        ['==', 'segmentIndex', segmentIndex],
-                    ]),
-                ],
+                this.fileId + '-waypoints',
+                ['in', ['get', 'waypointIndex'], ['literal', visibleWaypoints]],
                 { validate: false }
             );
-            if (_map.getLayer(this.fileId + '-direction')) {
-                _map.setFilter(
-                    this.fileId + '-direction',
-                    [
-                        'any',
-                        ...visibleItems.map(([trackIndex, segmentIndex]) => [
-                            'all',
-                            ['==', 'trackIndex', trackIndex],
-                            ['==', 'segmentIndex', segmentIndex],
-                        ]),
-                    ],
-                    { validate: false }
-                );
-            }
         } catch (e) {
             // No reliable way to check if the map is ready to add sources and layers
             return;
         }
-
-        let markerIndex = 0;
-
-        if (get(selection).hasAnyChildren(new ListFileItem(this.fileId))) {
-            file.wpt.forEach((waypoint) => {
-                // Update markers
-                let symbolKey = getSymbolKey(waypoint.sym);
-                if (markerIndex < this.markers.length) {
-                    this.markers[markerIndex].getElement().innerHTML = getMarkerForSymbol(
-                        symbolKey,
-                        this.layerColor
-                    );
-                    this.markers[markerIndex].setLngLat(waypoint.getCoordinates());
-                    Object.defineProperty(this.markers[markerIndex], '_waypoint', {
-                        value: waypoint,
-                        writable: true,
-                    });
-                } else {
-                    let element = document.createElement('div');
-                    element.classList.add('w-8', 'h-8', 'drop-shadow-xl');
-                    element.innerHTML = getMarkerForSymbol(symbolKey, this.layerColor);
-                    let marker = new mapboxgl.Marker({
-                        draggable: this.draggable,
-                        element,
-                        anchor: 'bottom',
-                    }).setLngLat(waypoint.getCoordinates());
-                    Object.defineProperty(marker, '_waypoint', { value: waypoint, writable: true });
-                    let dragEndTimestamp = 0;
-                    marker.getElement().addEventListener('mousemove', (e) => {
-                        if (marker._isDragging) {
-                            return;
-                        }
-                        waypointPopup?.setItem({ item: marker._waypoint, fileId: this.fileId });
-                        e.stopPropagation();
-                    });
-                    marker.getElement().addEventListener('click', (e) => {
-                        if (dragEndTimestamp && Date.now() - dragEndTimestamp < 1000) {
-                            return;
-                        }
-
-                        if (get(currentTool) === Tool.WAYPOINT && e.shiftKey) {
-                            fileActions.deleteWaypoint(this.fileId, marker._waypoint._data.index);
-                            e.stopPropagation();
-                            return;
-                        }
-
-                        if (get(treeFileView)) {
-                            if (
-                                (e.ctrlKey || e.metaKey) &&
-                                get(selection).hasAnyChildren(
-                                    new ListWaypointsItem(this.fileId),
-                                    false
-                                )
-                            ) {
-                                selection.addSelectItem(
-                                    new ListWaypointItem(this.fileId, marker._waypoint._data.index)
-                                );
-                            } else {
-                                selection.selectItem(
-                                    new ListWaypointItem(this.fileId, marker._waypoint._data.index)
-                                );
-                            }
-                        } else if (get(currentTool) === Tool.WAYPOINT) {
-                            selectedWaypoint.set([marker._waypoint, this.fileId]);
-                        } else {
-                            waypointPopup?.setItem({ item: marker._waypoint, fileId: this.fileId });
-                        }
-                        e.stopPropagation();
-                    });
-                    marker.on('dragstart', () => {
-                        setGrabbingCursor();
-                        marker.getElement().style.cursor = 'grabbing';
-                        waypointPopup?.hide();
-                    });
-                    marker.on('dragend', (e) => {
-                        resetCursor();
-                        marker.getElement().style.cursor = '';
-                        getElevation([marker._waypoint]).then((ele) => {
-                            fileActionManager.applyToFile(this.fileId, (file) => {
-                                let latLng = marker.getLngLat();
-                                let wpt = file.wpt[marker._waypoint._data.index];
-                                wpt.setCoordinates({
-                                    lat: latLng.lat,
-                                    lon: latLng.lng,
-                                });
-                                wpt.ele = ele[0];
-                            });
-                        });
-                        dragEndTimestamp = Date.now();
-                    });
-                    this.markers.push(marker);
-                }
-                markerIndex++;
-            });
-        }
-
-        while (markerIndex < this.markers.length) {
-            // Remove extra markers
-            this.markers.pop()?.remove();
-        }
-
-        this.markers.forEach((marker) => {
-            if (!marker._waypoint._data.hidden) {
-                marker.addTo(_map);
-            } else {
-                marker.remove();
-            }
-        });
     }
 
     remove() {
@@ -385,6 +353,24 @@ export class GPXLayer {
             _map.off('mousemove', this.fileId, this.layerOnMouseMoveBinded);
             _map.off('style.import.load', this.updateBinded);
 
+            _map.off(
+                'mouseenter',
+                this.fileId + '-waypoints',
+                this.waypointLayerOnMouseEnterBinded
+            );
+            _map.off(
+                'mouseleave',
+                this.fileId + '-waypoints',
+                this.waypointLayerOnMouseLeaveBinded
+            );
+            _map.off('click', this.fileId + '-waypoints', this.waypointLayerOnClickBinded);
+            _map.off('mousedown', this.fileId + '-waypoints', this.waypointLayerOnMouseDownBinded);
+            _map.off(
+                'touchstart',
+                this.fileId + '-waypoints',
+                this.waypointLayerOnTouchStartBinded
+            );
+
             if (_map.getLayer(this.fileId + '-direction')) {
                 _map.removeLayer(this.fileId + '-direction');
             }
@@ -394,15 +380,17 @@ export class GPXLayer {
             if (_map.getSource(this.fileId)) {
                 _map.removeSource(this.fileId);
             }
+            if (_map.getLayer(this.fileId + '-waypoints')) {
+                _map.removeLayer(this.fileId + '-waypoints');
+            }
+            if (_map.getSource(this.fileId + '-waypoints')) {
+                _map.removeSource(this.fileId + '-waypoints');
+            }
         }
 
-        this.markers.forEach((marker) => {
-            marker.remove();
-        });
-
         this.unsubscribe.forEach((unsubscribe) => unsubscribe());
 
-        decrementColor(this.layerColor);
+        removeColor(this.fileId, this.layerColor);
     }
 
     moveToFront() {
@@ -411,13 +399,13 @@ export class GPXLayer {
             return;
         }
         if (_map.getLayer(this.fileId)) {
-            _map.moveLayer(this.fileId);
+            _map.moveLayer(this.fileId, ANCHOR_LAYER_KEY.tracks);
+        }
+        if (_map.getLayer(this.fileId + '-waypoints')) {
+            _map.moveLayer(this.fileId + '-waypoints', ANCHOR_LAYER_KEY.waypoints);
         }
         if (_map.getLayer(this.fileId + '-direction')) {
-            _map.moveLayer(
-                this.fileId + '-direction',
-                _map.getLayer('distance-markers') ? 'distance-markers' : undefined
-            );
+            _map.moveLayer(this.fileId + '-direction', ANCHOR_LAYER_KEY.directionMarkers);
         }
     }
 
@@ -431,14 +419,15 @@ export class GPXLayer {
                 new ListTrackSegmentItem(this.fileId, trackIndex, segmentIndex)
             )
         ) {
-            setScissorsCursor();
+            mapCursor.notify(MapCursorState.SCISSORS, true);
         } else {
-            setPointerCursor();
+            mapCursor.notify(MapCursorState.LAYER_HOVER, true);
         }
     }
 
     layerOnMouseLeave() {
-        resetCursor();
+        mapCursor.notify(MapCursorState.SCISSORS, false);
+        mapCursor.notify(MapCursorState.LAYER_HOVER, false);
     }
 
     layerOnMouseMove(e: any) {
@@ -457,7 +446,7 @@ export class GPXLayer {
         }
     }
 
-    layerOnClick(e: any) {
+    layerOnClick(e: mapboxgl.MapMouseEvent) {
         if (
             get(currentTool) === Tool.ROUTING &&
             get(selection).hasAnyChildren(new ListRootItem(), true, ['waypoints'])
@@ -465,8 +454,8 @@ export class GPXLayer {
             return;
         }
 
-        let trackIndex = e.features[0].properties.trackIndex;
-        let segmentIndex = e.features[0].properties.segmentIndex;
+        let trackIndex = e.features![0].properties!.trackIndex;
+        let segmentIndex = e.features![0].properties!.segmentIndex;
 
         if (
             get(currentTool) === Tool.SCISSORS &&
@@ -474,6 +463,11 @@ export class GPXLayer {
                 new ListTrackSegmentItem(this.fileId, trackIndex, segmentIndex)
             )
         ) {
+            if (get(map)?.queryRenderedFeatures(e.point, { layers: ['split-controls'] }).length) {
+                // Clicked on split control, ignoring
+                return;
+            }
+
             fileActions.split(get(splitAs), this.fileId, trackIndex, segmentIndex, {
                 lat: e.lngLat.lat,
                 lon: e.lngLat.lng,
@@ -510,6 +504,160 @@ export class GPXLayer {
         }
     }
 
+    waypointLayerOnMouseEnter(e: mapboxgl.MapMouseEvent) {
+        if (this.draggedWaypointIndex !== null) {
+            return;
+        }
+        let file = get(this.file)?.file;
+        if (!file) {
+            return;
+        }
+
+        let waypointIndex = e.features![0].properties!.waypointIndex;
+        let waypoint = file.wpt[waypointIndex];
+        waypointPopup?.setItem({ item: waypoint, fileId: this.fileId });
+
+        mapCursor.notify(MapCursorState.WAYPOINT_HOVER, true);
+    }
+
+    waypointLayerOnMouseLeave() {
+        mapCursor.notify(MapCursorState.WAYPOINT_HOVER, false);
+    }
+
+    waypointLayerOnClick(e: mapboxgl.MapMouseEvent) {
+        e.preventDefault();
+
+        let waypointIndex = e.features![0].properties!.waypointIndex;
+        let file = get(this.file)?.file;
+        if (!file) {
+            return;
+        }
+
+        let waypoint = file.wpt[waypointIndex];
+        if (get(currentTool) === Tool.WAYPOINT) {
+            if (this.selected) {
+                if (e.originalEvent.shiftKey) {
+                    fileActions.deleteWaypoint(this.fileId, waypointIndex);
+                } else {
+                    selection.selectItem(new ListWaypointItem(this.fileId, waypointIndex));
+                    selectedWaypoint.set([waypoint, this.fileId]);
+                }
+            } else {
+                if (get(treeFileView)) {
+                    selection.selectItem(new ListWaypointItem(this.fileId, waypointIndex));
+                } else {
+                    selection.selectItem(new ListFileItem(this.fileId));
+                }
+                selectedWaypoint.set([waypoint, this.fileId]);
+            }
+        } else {
+            if (get(treeFileView)) {
+                if ((e.originalEvent.ctrlKey || e.originalEvent.metaKey) && this.selected) {
+                    selection.addSelectItem(new ListWaypointItem(this.fileId, waypointIndex));
+                } else {
+                    selection.selectItem(new ListWaypointItem(this.fileId, waypointIndex));
+                }
+            } else {
+                if (!this.selected) {
+                    selection.selectItem(new ListFileItem(this.fileId));
+                }
+                waypointPopup?.setItem({ item: waypoint, fileId: this.fileId });
+            }
+        }
+    }
+
+    waypointLayerOnMouseDown(e: mapboxgl.MapMouseEvent) {
+        if (get(currentTool) !== Tool.WAYPOINT || !this.selected) {
+            return;
+        }
+        const _map = get(map);
+        if (!_map) {
+            return;
+        }
+
+        e.preventDefault();
+
+        this.draggedWaypointIndex = e.features![0].properties!.waypointIndex;
+        this.draggingStartingPosition = e.point;
+        waypointPopup?.hide();
+
+        _map.on('mousemove', this.waypointLayerOnMouseMoveBinded);
+        _map.once('mouseup', this.waypointLayerOnMouseUpBinded);
+    }
+
+    waypointLayerOnTouchStart(e: mapboxgl.MapTouchEvent) {
+        if (e.points.length !== 1 || get(currentTool) !== Tool.WAYPOINT || !this.selected) {
+            return;
+        }
+        const _map = get(map);
+        if (!_map) {
+            return;
+        }
+
+        this.draggedWaypointIndex = e.features![0].properties!.waypointIndex;
+        this.draggingStartingPosition = e.point;
+        waypointPopup?.hide();
+
+        e.preventDefault();
+
+        _map.on('touchmove', this.waypointLayerOnMouseMoveBinded);
+        _map.once('touchend', this.waypointLayerOnMouseUpBinded);
+    }
+
+    waypointLayerOnMouseMove(e: mapboxgl.MapMouseEvent | mapboxgl.MapTouchEvent) {
+        if (this.draggedWaypointIndex === null || e.point.equals(this.draggingStartingPosition)) {
+            return;
+        }
+
+        mapCursor.notify(MapCursorState.WAYPOINT_DRAGGING, true);
+
+        (
+            this.currentWaypointData!.features[this.draggedWaypointIndex].geometry as GeoJSON.Point
+        ).coordinates = [e.lngLat.lng, e.lngLat.lat];
+
+        let waypointSource = get(map)?.getSource(this.fileId + '-waypoints') as
+            | mapboxgl.GeoJSONSource
+            | undefined;
+        if (waypointSource) {
+            waypointSource.setData(this.currentWaypointData!);
+        }
+    }
+
+    waypointLayerOnMouseUp(e: mapboxgl.MapMouseEvent | mapboxgl.MapTouchEvent) {
+        mapCursor.notify(MapCursorState.WAYPOINT_DRAGGING, false);
+
+        get(map)?.off('mousemove', this.waypointLayerOnMouseMoveBinded);
+        get(map)?.off('touchmove', this.waypointLayerOnMouseMoveBinded);
+
+        if (this.draggedWaypointIndex === null) {
+            return;
+        }
+        if (e.point.equals(this.draggingStartingPosition)) {
+            this.draggedWaypointIndex = null;
+            return;
+        }
+
+        getElevation([
+            {
+                lat: e.lngLat.lat,
+                lon: e.lngLat.lng,
+            },
+        ]).then((ele) => {
+            if (this.draggedWaypointIndex === null) {
+                return;
+            }
+            fileActionManager.applyToFile(this.fileId, (file) => {
+                let wpt = file.wpt[this.draggedWaypointIndex!];
+                wpt.setCoordinates({
+                    lat: e.lngLat.lat,
+                    lon: e.lngLat.lng,
+                });
+                wpt.ele = ele[0];
+            });
+            this.draggedWaypointIndex = null;
+        });
+    }
+
     getGeoJSON(): GeoJSON.FeatureCollection {
         let file = get(this.file)?.file;
         if (!file) {
@@ -547,6 +695,7 @@ export class GPXLayer {
             }
             feature.properties.trackIndex = trackIndex;
             feature.properties.segmentIndex = segmentIndex;
+            feature.properties.trackSegmentId = `${trackIndex}-${segmentIndex}`;
 
             segmentIndex++;
             if (segmentIndex >= file.trk[trackIndex].trkseg.length) {
@@ -556,4 +705,65 @@ export class GPXLayer {
         }
         return data;
     }
+
+    getWaypointsGeoJSON(): GeoJSON.FeatureCollection {
+        let file = get(this.file)?.file;
+
+        let data: GeoJSON.FeatureCollection = {
+            type: 'FeatureCollection',
+            features: [],
+        };
+
+        if (!file) {
+            return data;
+        }
+
+        file.wpt.forEach((waypoint, index) => {
+            data.features.push({
+                type: 'Feature',
+                geometry: {
+                    type: 'Point',
+                    coordinates: [waypoint.getLongitude(), waypoint.getLatitude()],
+                },
+                properties: {
+                    fileId: this.fileId,
+                    waypointIndex: index,
+                    icon: `waypoint-${getSymbolKey(waypoint.sym) ?? 'default'}-${this.layerColor}`,
+                },
+            });
+        });
+
+        return data;
+    }
+
+    loadIcons() {
+        const _map = get(map);
+        let file = get(this.file)?.file;
+        if (!_map || !file) {
+            return;
+        }
+
+        let symbols = new Set<string | undefined>();
+        file.wpt.forEach((waypoint) => {
+            symbols.add(getSymbolKey(waypoint.sym));
+        });
+
+        symbols.forEach((symbol) => {
+            const iconId = `waypoint-${symbol ?? 'default'}-${this.layerColor}`;
+            if (!_map.hasImage(iconId)) {
+                let icon = new Image(100, 100);
+                icon.onload = () => {
+                    if (!_map.hasImage(iconId)) {
+                        _map.addImage(iconId, icon);
+                    }
+                };
+
+                // Lucide icons are SVG files with a 24x24 viewBox
+                // Create a new SVG with a 32x32 viewBox and center the icon in a circle
+                icon.src =
+                    'data:image/svg+xml,' +
+                    encodeURIComponent(getSvgForSymbol(symbol, this.layerColor));
+            }
+        });
+    }
 }

website/src/lib/components/map/gpx-layer/gpx-layers.ts

@@ -1,4 +1,5 @@
 import { GPXFileStateCollectionObserver } from '$lib/logic/file-state';
+import { writable } from 'svelte/store';
 import { GPXLayer } from './gpx-layer';
 
 export class GPXLayerCollection {
@@ -14,9 +15,11 @@ export class GPXLayerCollection {
             return;
         }
         this._fileStateCollectionObserver = new GPXFileStateCollectionObserver(
-            (fileId, fileState) => {
-                const layer = new GPXLayer(fileId, fileState);
-                this._layers.set(fileId, layer);
+            (newFiles) => {
+                newFiles.forEach((fileState, fileId) => {
+                    const layer = new GPXLayer(fileId, fileState);
+                    this._layers.set(fileId, layer);
+                });
             },
             (fileId) => {
                 const layer = this._layers.get(fileId);
@@ -33,6 +36,11 @@ export class GPXLayerCollection {
             }
         );
     }
+
+    getLayer(fileId: string): GPXLayer | undefined {
+        return this._layers.get(fileId);
+    }
 }
 
 export const gpxLayers = new GPXLayerCollection();
+export const gpxColors = writable(new Map<string, string>());

website/src/lib/components/map/gpx-layer/start-end-markers.ts

@@ -1,17 +1,17 @@
-import { gpxStatistics, slicedGPXStatistics, currentTool, Tool } from '$lib/stores';
+import { currentTool, Tool } from '$lib/components/toolbar/tools';
+import { gpxStatistics, slicedGPXStatistics } from '$lib/logic/statistics';
 import mapboxgl from 'mapbox-gl';
 import { get } from 'svelte/store';
+import { map } from '$lib/components/map/map';
+import { allHidden } from '$lib/logic/hidden';
 
 export class StartEndMarkers {
-    map: mapboxgl.Map;
     start: mapboxgl.Marker;
     end: mapboxgl.Marker;
     updateBinded: () => void = this.update.bind(this);
     unsubscribes: (() => void)[] = [];
 
-    constructor(map: mapboxgl.Map) {
-        this.map = map;
-
+    constructor() {
         let startElement = document.createElement('div');
         let endElement = document.createElement('div');
         startElement.className = `h-4 w-4 rounded-full bg-green-500 border-2 border-white`;
@@ -22,21 +22,34 @@ export class StartEndMarkers {
         this.start = new mapboxgl.Marker({ element: startElement });
         this.end = new mapboxgl.Marker({ element: endElement });
 
+        map.onLoad(() => this.update());
         this.unsubscribes.push(gpxStatistics.subscribe(this.updateBinded));
         this.unsubscribes.push(slicedGPXStatistics.subscribe(this.updateBinded));
         this.unsubscribes.push(currentTool.subscribe(this.updateBinded));
+        this.unsubscribes.push(allHidden.subscribe(this.updateBinded));
     }
 
     update() {
-        let tool = get(currentTool);
-        let statistics = get(slicedGPXStatistics)?.[0] ?? get(gpxStatistics);
-        if (statistics.local.points.length > 0 && tool !== Tool.ROUTING) {
-            this.start.setLngLat(statistics.local.points[0].getCoordinates()).addTo(this.map);
+        const map_ = get(map);
+        if (!map_) return;
+
+        const tool = get(currentTool);
+        const statistics = get(gpxStatistics);
+        const slicedStatistics = get(slicedGPXStatistics);
+        const hidden = get(allHidden);
+        if (statistics.global.length > 0 && tool !== Tool.ROUTING && !hidden) {
+            this.start
+                .setLngLat(
+                    statistics.getTrackPoint(slicedStatistics?.[1] ?? 0)!.trkpt.getCoordinates()
+                )
+                .addTo(map_);
             this.end
                 .setLngLat(
-                    statistics.local.points[statistics.local.points.length - 1].getCoordinates()
+                    statistics
+                        .getTrackPoint(slicedStatistics?.[2] ?? statistics.global.length - 1)!
+                        .trkpt.getCoordinates()
                 )
-                .addTo(this.map);
+                .addTo(map_);
         } else {
             this.start.remove();
             this.end.remove();

website/src/lib/components/map/layer-control/CustomLayers.svelte

@@ -19,11 +19,11 @@
     } from '@lucide/svelte';
     import { i18n } from '$lib/i18n.svelte';
     import { defaultBasemap, type CustomLayer } from '$lib/assets/layers';
-    import { onDestroy, onMount } from 'svelte';
-    import Sortable from 'sortablejs/Sortable';
-    import { customBasemapUpdate } from './utils';
+    import { onMount } from 'svelte';
+    import { customBasemapUpdate, isSelected, remove } from './utils';
     import { settings } from '$lib/logic/settings';
     import { map } from '$lib/components/map/map';
+    import { dndzone } from 'svelte-dnd-action';
 
     const {
         customLayers,
@@ -37,17 +37,23 @@
         customOverlayOrder,
     } = settings;
 
-    let name: string = '';
-    let tileUrls: string[] = [''];
-    let maxZoom: number = 20;
-    let layerType: 'basemap' | 'overlay' = 'basemap';
-    let resourceType: 'raster' | 'vector' = 'raster';
+    let name: string = $state('');
+    let tileUrls: string[] = $state(['']);
+    let maxZoom: number = $state(20);
+    let layerType: 'basemap' | 'overlay' = $state('basemap');
+    let resourceType: 'raster' | 'vector' = $derived.by(() => {
+        if (tileUrls[0].length > 0) {
+            if (
+                tileUrls[0].includes('.json') ||
+                (tileUrls[0].includes('api.mapbox.com/styles') && !tileUrls[0].includes('tiles'))
+            ) {
+                return 'vector';
+            }
+        }
+        return 'raster';
+    });
 
-    let basemapContainer: HTMLElement;
-    let overlayContainer: HTMLElement;
-
-    let basemapSortable: Sortable;
-    let overlaySortable: Sortable;
+    let selectedLayerId: string | undefined = $state(undefined);
 
     onMount(() => {
         if ($customBasemapOrder.length === 0) {
@@ -60,45 +66,30 @@
                 (id) => $customLayers[id].layerType === 'overlay'
             );
         }
-
-        basemapSortable = Sortable.create(basemapContainer, {
-            onSort: (e) => {
-                $customBasemapOrder = basemapSortable.toArray();
-                $selectedBasemapTree.basemaps['custom'] = $customBasemapOrder.reduce((acc, id) => {
-                    acc[id] = true;
-                    return acc;
-                }, {});
-            },
-        });
-        overlaySortable = Sortable.create(overlayContainer, {
-            onSort: (e) => {
-                $customOverlayOrder = overlaySortable.toArray();
-                $selectedOverlayTree.overlays['custom'] = $customOverlayOrder.reduce((acc, id) => {
-                    acc[id] = true;
-                    return acc;
-                }, {});
-            },
-        });
-
-        basemapSortable.sort($customBasemapOrder);
-        overlaySortable.sort($customOverlayOrder);
     });
 
-    onDestroy(() => {
-        basemapSortable.destroy();
-        overlaySortable.destroy();
-    });
+    let customBasemapItems: {
+        id: string;
+        name: string;
+    }[] = $derived(
+        $customBasemapOrder.map((id) => ({
+            id: id,
+            name: $customLayers[id].name,
+        }))
+    );
+    let customOverlayItems: {
+        id: string;
+        name: string;
+    }[] = $derived(
+        $customOverlayOrder.map((id) => ({
+            id: id,
+            name: $customLayers[id].name,
+        }))
+    );
 
-    $: if (tileUrls[0].length > 0) {
-        if (
-            tileUrls[0].includes('.json') ||
-            (tileUrls[0].includes('api.mapbox.com/styles') && !tileUrls[0].includes('tiles'))
-        ) {
-            resourceType = 'vector';
-        } else {
-            resourceType = 'raster';
-        }
-    }
+    $effect(() => {
+        setDataFromSelectedLayer(selectedLayerId);
+    });
 
     function createLayer() {
         if (selectedLayerId && $customLayers[selectedLayerId].layerType !== layerType) {
@@ -185,11 +176,7 @@
                 return $tree;
             });
 
-            if (
-                $currentOverlays.overlays['custom'] &&
-                $currentOverlays.overlays['custom'][layerId] &&
-                $map
-            ) {
+            if ($map && $currentOverlays && isSelected($currentOverlays, layerId)) {
                 try {
                     $map.removeImport(layerId);
                 } catch (e) {
@@ -197,10 +184,13 @@
                 }
             }
 
-            if (!$currentOverlays.overlays.hasOwnProperty('custom')) {
-                $currentOverlays.overlays['custom'] = {};
-            }
-            $currentOverlays.overlays['custom'][layerId] = true;
+            currentOverlays.update(($overlays) => {
+                if (!$overlays.overlays.hasOwnProperty('custom')) {
+                    $overlays.overlays['custom'] = {};
+                }
+                $overlays.overlays['custom'][layerId] = true;
+                return $overlays;
+            });
 
             if (!$customOverlayOrder.includes(layerId)) {
                 $customOverlayOrder = [...$customOverlayOrder, layerId];
@@ -225,58 +215,22 @@
                 $previousBasemap = defaultBasemap;
             }
 
-            $selectedBasemapTree.basemaps['custom'] = tryDeleteLayer(
-                $selectedBasemapTree.basemaps['custom'],
-                layerId
-            );
-            if (Object.keys($selectedBasemapTree.basemaps['custom']).length === 0) {
-                $selectedBasemapTree.basemaps = tryDeleteLayer(
-                    $selectedBasemapTree.basemaps,
-                    'custom'
-                );
-            }
+            $selectedBasemapTree = remove($selectedBasemapTree, layerId);
             $customBasemapOrder = $customBasemapOrder.filter((id) => id !== layerId);
         } else {
-            $currentOverlays.overlays['custom'][layerId] = false;
-            if ($previousOverlays.overlays['custom']) {
-                $previousOverlays.overlays['custom'] = tryDeleteLayer(
-                    $previousOverlays.overlays['custom'],
-                    layerId
-                );
-            }
-
-            $selectedOverlayTree.overlays['custom'] = tryDeleteLayer(
-                $selectedOverlayTree.overlays['custom'],
-                layerId
-            );
-            if (Object.keys($selectedOverlayTree.overlays['custom']).length === 0) {
-                $selectedOverlayTree.overlays = tryDeleteLayer(
-                    $selectedOverlayTree.overlays,
-                    'custom'
-                );
+            if ($currentOverlays) {
+                $currentOverlays = remove($currentOverlays, layerId);
             }
+            $previousOverlays = remove($previousOverlays, layerId);
+            $selectedOverlayTree = remove($selectedOverlayTree, layerId);
             $customOverlayOrder = $customOverlayOrder.filter((id) => id !== layerId);
-
-            if (
-                $currentOverlays.overlays['custom'] &&
-                $currentOverlays.overlays['custom'][layerId] &&
-                $map
-            ) {
-                try {
-                    $map.removeImport(layerId);
-                } catch (e) {
-                    // No reliable way to check if the map is ready to remove sources and layers
-                }
-            }
         }
         $customLayers = tryDeleteLayer($customLayers, layerId);
     }
 
-    let selectedLayerId: string | undefined = undefined;
-
-    function setDataFromSelectedLayer() {
-        if (selectedLayerId) {
-            const layer = $customLayers[selectedLayerId];
+    function setDataFromSelectedLayer(layerId?: string) {
+        if (layerId) {
+            const layer = $customLayers[layerId];
             name = layer.name;
             tileUrls = layer.tileUrls;
             maxZoom = layer.maxZoom;
@@ -290,8 +244,6 @@
             resourceType = 'raster';
         }
     }
-
-    $: selectedLayerId, setDataFromSelectedLayer();
 </script>
 
 <div class="flex flex-col">
@@ -305,17 +257,47 @@
         </div>
     {/if}
     <div
-        bind:this={basemapContainer}
         class="ml-1.5 flex flex-col gap-1 {$customBasemapOrder.length > 0 ? 'mb-2' : ''}"
+        use:dndzone={{
+            items: customBasemapItems,
+            type: 'basemap',
+            dropTargetStyle: {},
+            transformDraggedElement: (element) => {
+                if (element) {
+                    element.style.opacity = '0.5';
+                }
+            },
+        }}
+        onconsider={(e) => {
+            customBasemapItems = e.detail.items;
+        }}
+        onfinalize={(e) => {
+            customBasemapItems = e.detail.items;
+            $customBasemapOrder = customBasemapItems.map((item) => item.id);
+            $selectedBasemapTree.basemaps['custom'] = customBasemapItems.reduce((acc, item) => {
+                acc[item.id] = true;
+                return acc;
+            }, {});
+        }}
     >
-        {#each $customBasemapOrder as id (id)}
-            <div class="flex flex-row items-center gap-2" data-id={id}>
+        {#each customBasemapItems as item (item.id)}
+            <div class="flex flex-row items-center gap-2">
                 <Move size="12" />
-                <span class="grow">{$customLayers[id].name}</span>
-                <Button variant="outline" onclick={() => (selectedLayerId = id)} class="p-1 h-7">
+                <span class="grow">{item.name}</span>
+                <Button
+                    variant="outline"
+                    size="icon-sm"
+                    onclick={() => (selectedLayerId = item.id)}
+                    class="p-1 h-7"
+                >
                     <Pencil size="16" />
                 </Button>
-                <Button variant="outline" onclick={() => deleteLayer(id)} class="p-1 h-7">
+                <Button
+                    variant="outline"
+                    size="icon-sm"
+                    onclick={() => deleteLayer(item.id)}
+                    class="p-1 h-7"
+                >
                     <Trash2 size="16" />
                 </Button>
             </div>
@@ -331,24 +313,53 @@
         </div>
     {/if}
     <div
-        bind:this={overlayContainer}
         class="ml-1.5 flex flex-col gap-1 {$customOverlayOrder.length > 0 ? 'mb-2' : ''}"
+        use:dndzone={{
+            items: customOverlayItems,
+            type: 'overlay',
+            dropTargetStyle: {},
+            transformDraggedElement: (element) => {
+                if (element) {
+                    element.style.opacity = '0.5';
+                }
+            },
+        }}
+        onconsider={(e) => {
+            customOverlayItems = e.detail.items;
+        }}
+        onfinalize={(e) => {
+            customOverlayItems = e.detail.items;
+            $customOverlayOrder = customOverlayItems.map((item) => item.id);
+            $selectedOverlayTree.overlays['custom'] = customOverlayItems.reduce((acc, item) => {
+                acc[item.id] = true;
+                return acc;
+            }, {});
+        }}
     >
-        {#each $customOverlayOrder as id (id)}
-            <div class="flex flex-row items-center gap-2" data-id={id}>
+        {#each customOverlayItems as item (item.id)}
+            <div class="flex flex-row items-center gap-2">
                 <Move size="12" />
-                <span class="grow">{$customLayers[id].name}</span>
-                <Button variant="outline" onclick={() => (selectedLayerId = id)} class="p-1 h-7">
+                <span class="grow">{item.name}</span>
+                <Button
+                    variant="outline"
+                    size="icon-sm"
+                    onclick={() => (selectedLayerId = item.id)}
+                    class="p-1 h-7"
+                >
                     <Pencil size="16" />
                 </Button>
-                <Button variant="outline" onclick={() => deleteLayer(id)} class="p-1 h-7">
+                <Button
+                    variant="outline"
+                    size="icon-sm"
+                    onclick={() => deleteLayer(item.id)}
+                    class="p-1 h-7"
+                >
                     <Trash2 size="16" />
                 </Button>
             </div>
         {/each}
     </div>
-
-    <Card.Root>
+    <Card.Root class="py-0 gap-0 shadow-none">
         <Card.Header class="p-3">
             <Card.Title class="text-base">
                 {#if selectedLayerId}
@@ -417,7 +428,7 @@
                 {#if selectedLayerId}
                     <div class="mt-2 flex flex-row gap-2">
                         <Button variant="outline" onclick={createLayer} class="grow">
-                            <Save size="16" class="mr-1" />
+                            <Save size="16" />
                             {i18n._('layers.custom_layers.update')}
                         </Button>
                         <Button variant="outline" onclick={() => (selectedLayerId = undefined)}>
@@ -426,7 +437,7 @@
                     </div>
                 {:else}
                     <Button variant="outline" class="mt-2" onclick={createLayer}>
-                        <CirclePlus size="16" class="mr-1" />
+                        <CirclePlus size="16" />
                         {i18n._('layers.custom_layers.create')}
                     </Button>
                 {/if}

website/src/lib/components/map/layer-control/LayerControl.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
     import CustomControl from '$lib/components/map/custom-control/CustomControl.svelte';
     import LayerTree from './LayerTree.svelte';
-    import { OverpassLayer } from './OverpassLayer';
+    import { OverpassLayer } from './overpass-layer';
     import { Separator } from '$lib/components/ui/separator';
     import { ScrollArea } from '$lib/components/ui/scroll-area/index.js';
     import { Layers } from '@lucide/svelte';
@@ -10,6 +10,7 @@
     import { map } from '$lib/components/map/map';
     import { customBasemapUpdate, getLayers } from './utils';
     import type { ImportSpecification, StyleSpecification } from 'mapbox-gl';
+    import { untrack } from 'svelte';
 
     let container: HTMLDivElement;
     let overpassLayer: OverpassLayer;
@@ -32,7 +33,7 @@
         }
         let basemap = basemaps.hasOwnProperty($currentBasemap)
             ? basemaps[$currentBasemap]
-            : ($customLayers[$currentBasemap] ?? basemaps[defaultBasemap]);
+            : ($customLayers[$currentBasemap]?.value ?? basemaps[defaultBasemap]);
         $map.removeImport('basemap');
         if (typeof basemap === 'string') {
             $map.addImport({ id: 'basemap', url: basemap }, 'overlays');
@@ -50,7 +51,7 @@
 
     $effect(() => {
         if ($map && ($currentBasemap || $customBasemapUpdate)) {
-            setStyle();
+            untrack(() => setStyle());
         }
     });
 
@@ -100,9 +101,7 @@
                                 acc: Record<string, ImportSpecification>,
                                 imprt: ImportSpecification
                             ) => {
-                                if (
-                                    !['basemap', 'overlays', 'glyphs-and-sprite'].includes(imprt.id)
-                                ) {
+                                if (!['basemap', 'overlays'].includes(imprt.id)) {
                                     acc[imprt.id] = imprt;
                                 }
                                 return acc;
@@ -127,7 +126,7 @@
 
     $effect(() => {
         if ($map && $currentOverlays && $opacities) {
-            updateOverlays();
+            untrack(() => updateOverlays());
         }
     });
 
@@ -137,7 +136,12 @@
         }
         overpassLayer = new OverpassLayer(_map);
         overpassLayer.add();
-        _map.on('style.import.load', updateOverlays);
+        let first = true;
+        _map.on('style.import.load', () => {
+            if (!first) return;
+            first = false;
+            updateOverlays();
+        });
     });
 
     let open = $state(false);
@@ -179,9 +183,9 @@
                 ? 'grid-rows-[1fr] grid-cols-[1fr]'
                 : ''} {cancelEvents ? 'pointer-events-none' : ''}"
         >
-            <ScrollArea>
+            <ScrollArea class="overflow-hidden">
                 <div class="h-fit">
-                    <div class="p-2">
+                    <div class="p-2 ml-1">
                         <LayerTree
                             layerTree={$selectedBasemapTree}
                             name="basemaps"
@@ -193,7 +197,7 @@
                         />
                     </div>
                     <Separator class="w-full" />
-                    <div class="p-2">
+                    <div class="p-2 ml-1">
                         {#if $currentOverlays}
                             <LayerTree
                                 layerTree={$selectedOverlayTree}
@@ -204,7 +208,7 @@
                         {/if}
                     </div>
                     <Separator class="w-full" />
-                    <div class="p-2">
+                    <div class="p-2 ml-1">
                         {#if $currentOverpassQueries}
                             <LayerTree
                                 layerTree={$selectedOverpassTree}
@@ -221,8 +225,9 @@
 </CustomControl>
 
 <svelte:window
-    on:click={(e) => {
-        if (open && !cancelEvents && !container.contains(e.target)) {
+    on:click={(e: MouseEvent) => {
+        const target = e.target as Node | null;
+        if (open && !cancelEvents && target && container && !container.contains(target)) {
             closeLayerControl();
         }
     }}

website/src/lib/components/map/layer-control/LayerControlSettings.svelte

@@ -13,12 +13,15 @@
         overlays,
         overlayTree,
         overpassTree,
+        terrainSources,
     } from '$lib/assets/layers';
     import { getLayers, isSelected, toggle } from '$lib/components/map/layer-control/utils';
     import { i18n } from '$lib/i18n.svelte';
     import { map } from '$lib/components/map/map';
     import CustomLayers from './CustomLayers.svelte';
     import { settings } from '$lib/logic/settings';
+    import { untrack } from 'svelte';
+    import { extensionAPI } from '$lib/components/map/layer-control/extension-api';
 
     const {
         selectedBasemapTree,
@@ -26,10 +29,14 @@
         selectedOverpassTree,
         currentBasemap,
         currentOverlays,
+        currentOverpassQueries,
         customLayers,
         opacities,
+        terrainSource,
     } = settings;
 
+    const { isLayerFromExtension, getLayerName } = extensionAPI;
+
     let { open = $bindable() }: { open: boolean } = $props();
 
     let accordionValue: string | undefined = $state(undefined);
@@ -49,7 +56,7 @@
     }
 
     $effect(() => {
-        if ($selectedBasemapTree && $currentBasemap) {
+        if (open && $selectedBasemapTree && $currentBasemap) {
             if (!isSelected($selectedBasemapTree, $currentBasemap)) {
                 if (!isSelected($selectedBasemapTree, defaultBasemap)) {
                     $selectedBasemapTree = toggle($selectedBasemapTree, defaultBasemap);
@@ -60,19 +67,44 @@
     });
 
     $effect(() => {
-        if ($selectedOverlayTree && $currentOverlays) {
-            let overlayLayers = getLayers($currentOverlays);
-            let toRemove = Object.entries(overlayLayers).filter(
-                ([id, checked]) => checked && !isSelected($selectedOverlayTree, id)
-            );
-            if (toRemove.length > 0) {
-                currentOverlays.update((tree) => {
-                    toRemove.forEach(([id]) => {
-                        toggle(tree, id);
-                    });
-                    return tree;
-                });
-            }
+        if (open && $selectedOverlayTree) {
+            untrack(() => {
+                if ($currentOverlays) {
+                    let overlayLayers = getLayers($currentOverlays);
+                    let toRemove = Object.entries(overlayLayers).filter(
+                        ([id, checked]) => checked && !isSelected($selectedOverlayTree, id)
+                    );
+                    if (toRemove.length > 0) {
+                        currentOverlays.update((tree) => {
+                            toRemove.forEach(([id]) => {
+                                toggle(tree, id);
+                            });
+                            return tree;
+                        });
+                    }
+                }
+            });
+        }
+    });
+
+    $effect(() => {
+        if (open && $selectedOverpassTree) {
+            untrack(() => {
+                if ($currentOverpassQueries) {
+                    let overlayLayers = getLayers($currentOverpassQueries);
+                    let toRemove = Object.entries(overlayLayers).filter(
+                        ([id, checked]) => checked && !isSelected($selectedOverpassTree, id)
+                    );
+                    if (toRemove.length > 0) {
+                        currentOverpassQueries.update((tree) => {
+                            toRemove.forEach(([id]) => {
+                                toggle(tree, id);
+                            });
+                            return tree;
+                        });
+                    }
+                }
+            });
         }
     });
 </script>
@@ -90,7 +122,7 @@
                     <Accordion.Item value="layer-selection" class="flex flex-col">
                         <Accordion.Trigger>{i18n._('layers.selection')}</Accordion.Trigger>
                         <Accordion.Content class="grow flex flex-col border rounded">
-                            <div class="py-2 pl-1 pr-2">
+                            <div class="py-2 pl-3 pr-2">
                                 <LayerTree
                                     layerTree={basemapTree}
                                     name="basemapSettings"
@@ -99,7 +131,7 @@
                                 />
                             </div>
                             <Separator />
-                            <div class="py-2 pl-1 pr-2">
+                            <div class="py-2 pl-3 pr-2">
                                 <LayerTree
                                     layerTree={overlayTree}
                                     name="overlaySettings"
@@ -108,7 +140,7 @@
                                 />
                             </div>
                             <Separator />
-                            <div class="py-2 pl-1 pr-2">
+                            <div class="py-2 pl-3 pr-2">
                                 <LayerTree
                                     layerTree={overpassTree}
                                     name="overpassSettings"
@@ -130,10 +162,14 @@
                                     type="single"
                                     onValueChange={setOpacityFromSelection}
                                 >
-                                    <Select.Trigger class="h-8 mr-1">
+                                    <Select.Trigger class="mr-1 w-full" size="sm">
                                         {#if selectedOverlay}
                                             {#if isSelected($selectedOverlayTree, selectedOverlay)}
-                                                {i18n._(`layers.label.${selectedOverlay}`)}
+                                                {#if $isLayerFromExtension(selectedOverlay)}
+                                                    {$getLayerName(selectedOverlay)}
+                                                {:else}
+                                                    {i18n._(`layers.label.${selectedOverlay}`)}
+                                                {/if}
                                             {:else if $customLayers.hasOwnProperty(selectedOverlay)}
                                                 {$customLayers[selectedOverlay].name}
                                             {/if}
@@ -142,9 +178,13 @@
                                     <Select.Content class="h-fit max-h-[40dvh] overflow-y-auto">
                                         {#each Object.keys(overlays) as id}
                                             {#if isSelected($selectedOverlayTree, id)}
-                                                <Select.Item value={id}
-                                                    >{i18n._(`layers.label.${id}`)}</Select.Item
-                                                >
+                                                <Select.Item value={id}>
+                                                    {#if $isLayerFromExtension(id)}
+                                                        {$getLayerName(id)}
+                                                    {:else}
+                                                        {i18n._(`layers.label.${id}`)}
+                                                    {/if}
+                                                </Select.Item>
                                             {/if}
                                         {/each}
                                         {#each Object.entries($customLayers) as [id, layer]}
@@ -195,6 +235,23 @@
                             </ScrollArea>
                         </Accordion.Content>
                     </Accordion.Item>
+                    <Accordion.Item value="terrain-source">
+                        <Accordion.Trigger>{i18n._('layers.terrain')}</Accordion.Trigger>
+                        <Accordion.Content class="flex flex-col gap-3 overflow-visible">
+                            <Select.Root bind:value={$terrainSource} type="single">
+                                <Select.Trigger class="mr-1 w-full" size="sm">
+                                    {i18n._(`layers.label.${$terrainSource}`)}
+                                </Select.Trigger>
+                                <Select.Content class="h-fit max-h-[40dvh] overflow-y-auto">
+                                    {#each Object.keys(terrainSources) as id}
+                                        <Select.Item value={id}>
+                                            {i18n._(`layers.label.${id}`)}
+                                        </Select.Item>
+                                    {/each}
+                                </Select.Content>
+                            </Select.Root>
+                        </Accordion.Content>
+                    </Accordion.Item>
                 </Accordion.Root>
             </ScrollArea>
         </Sheet.Header>

website/src/lib/components/map/layer-control/LayerTreeNode.svelte

@@ -7,6 +7,7 @@
     import { anySelectedLayer } from './utils';
     import { i18n } from '$lib/i18n.svelte';
     import { settings } from '$lib/logic/settings';
+    import { extensionAPI } from '$lib/components/map/layer-control/extension-api';
 
     let {
         name,
@@ -25,6 +26,7 @@
     } = $props();
 
     const { customLayers } = settings;
+    const { isLayerFromExtension, getLayerName } = extensionAPI;
 
     $effect.pre(() => {
         if (checked !== undefined) {
@@ -72,6 +74,8 @@
                     <Label for="{name}-{id}" class="flex flex-row items-center gap-1">
                         {#if $customLayers.hasOwnProperty(id)}
                             {$customLayers[id].name}
+                        {:else if $isLayerFromExtension(id)}
+                            {$getLayerName(id)}
                         {:else}
                             {i18n._(`layers.label.${id}`)}
                         {/if}
@@ -81,7 +85,7 @@
         {:else if anySelectedLayer(node[id])}
             <CollapsibleTreeNode {id}>
                 {#snippet trigger()}
-                    <span>{i18n._(`layers.label.${id}`)}</span>
+                    <span>{i18n._(`layers.label.${id}`, id)}</span>
                 {/snippet}
                 {#snippet content()}
                     <div class="ml-2">

website/src/lib/components/map/layer-control/OverpassPopup.svelte

@@ -5,22 +5,27 @@
     import { i18n } from '$lib/i18n.svelte';
     import { ScrollArea } from '$lib/components/ui/scroll-area/index.js';
     import type { WaypointType } from 'gpx';
-    import type { PopupItem } from '$lib/components/map/map';
+    import type { PopupItem } from '$lib/components/map/map-popup';
     import { fileActions } from '$lib/logic/file-actions';
     import { selection } from '$lib/logic/selection';
 
-    export let poi: PopupItem<any>;
+    let {
+        poi,
+    }: {
+        poi: PopupItem<any>;
+    } = $props();
 
-    let tags: { [key: string]: string } = {};
-    let name = '';
-    $: if (poi) {
-        tags = JSON.parse(poi.item.tags);
-        if (tags.name !== undefined && tags.name !== '') {
-            name = tags.name;
-        } else {
-            name = i18n._(`layers.label.${poi.item.query}`);
+    let tags: Record<string, string> = $derived(poi ? JSON.parse(poi.item.tags) : {});
+    let name = $derived.by(() => {
+        if (poi) {
+            if (tags.name !== undefined && tags.name !== '') {
+                return tags.name;
+            } else {
+                return i18n._(`layers.label.${poi.item.query}`);
+            }
         }
-    }
+        return '';
+    });
 
     function addToFile() {
         const desc = Object.entries(tags)
@@ -47,33 +52,33 @@
     }
 </script>
 
-<Card.Root class="border-none shadow-md text-base p-2 max-w-[50dvw]">
-    <Card.Header class="p-0">
-        <Card.Title class="text-md">
-            <div class="flex flex-row gap-3">
-                <div class="flex flex-col">
-                    {name}
-                    <div class="text-muted-foreground text-sm font-normal">
-                        {poi.item.lat.toFixed(6)}&deg; {poi.item.lon.toFixed(6)}&deg;
-                    </div>
+<Card.Root class="border-none shadow-md text-base p-2 max-w-[50dvw] gap-0">
+    <Card.Header class="p-0 gap-0">
+        <Card.Title class="text-md flex flex-row">
+            <div class="flex flex-col">
+                <p>{name}</p>
+                <div class="text-muted-foreground text-xs font-normal">
+                    {poi.item.lat.toFixed(6)}&deg; {poi.item.lon.toFixed(6)}&deg;
                 </div>
-                <Button
-                    class="ml-auto p-1.5 h-8"
-                    variant="outline"
-                    href="https://www.openstreetmap.org/edit?editor=id&{poi.item.type ??
-                        'node'}={poi.item.id}"
-                    target="_blank"
-                >
-                    <PencilLine size="16" />
-                </Button>
             </div>
+
+            <Button
+                class="ml-auto"
+                variant="outline"
+                size="icon-sm"
+                href="https://www.openstreetmap.org/edit?editor=id&{poi.item.type ?? 'node'}={poi
+                    .item.id}"
+                target="_blank"
+            >
+                <PencilLine size="16" />
+            </Button>
         </Card.Title>
     </Card.Header>
-    <Card.Content class="flex flex-col p-0 text-sm mt-1 whitespace-normal break-all">
-        <ScrollArea class="flex flex-col" viewportClasses="max-h-[30dvh]">
+    <Card.Content class="flex flex-col gap-1 p-0 text-sm whitespace-normal break-all">
+        <ScrollArea class="flex flex-col max-h-[30dvh]">
             {#if tags.image || tags['image:0']}
                 <div class="w-full rounded-md overflow-clip my-2 max-w-96 mx-auto">
-                    <!-- svelte-ignore a11y-missing-attribute -->
+                    <!-- svelte-ignore a11y_missing_attribute -->
                     <img src={tags.image ?? tags['image:0']} />
                 </div>
             {/if}
@@ -81,7 +86,7 @@
                 {#each Object.entries(tags) as [key, value]}
                     {#if key !== 'name' && !key.includes('image')}
                         <span class="font-mono">{key}</span>
-                        {#if key === 'website' || key.startsWith('website:') || key === 'contact:website' || key === 'contact:facebook' || key === 'contact:instagram' || key === 'contact:twitter'}
+                        {#if key === 'website' || key.startsWith('website:') || key.endsWith(':website') || key === 'contact:facebook' || key === 'contact:instagram' || key === 'contact:twitter'}
                             <a href={value} target="_blank" class="text-link underline">{value}</a>
                         {:else if key === 'phone' || key === 'contact:phone'}
                             <a href={'tel:' + value} class="text-link underline">{value}</a>
@@ -94,8 +99,14 @@
                 {/each}
             </div>
         </ScrollArea>
-        <Button class="mt-2" variant="outline" disabled={$selection.size === 0} onclick={addToFile}>
-            <MapPin size="16" class="mr-1" />
+        <Button
+            size="sm"
+            class="mt-1 justify-start"
+            variant="outline"
+            disabled={$selection.size === 0}
+            onclick={addToFile}
+        >
+            <MapPin size="14" />
             {i18n._('toolbar.waypoint.add')}
         </Button>
     </Card.Content>

website/src/lib/components/map/layer-control/extension-api.ts

@@ -0,0 +1,213 @@
+import { settings } from '$lib/logic/settings';
+import { derived, get, writable, type Writable } from 'svelte/store';
+import { isSelected, remove, removeAll } from './utils';
+import { overlays, overlayTree } from '$lib/assets/layers';
+import { browser } from '$app/environment';
+import { map } from '$lib/components/map/map';
+
+const { currentOverlays, previousOverlays, selectedOverlayTree } = settings;
+
+export type CustomOverlay = {
+    extensionName: string;
+    id: string;
+    name: string;
+    tileUrls: string[];
+    maxZoom?: number;
+};
+
+export class ExtensionAPI {
+    private _overlays: Writable<Map<string, CustomOverlay>> = writable(new Map());
+
+    init() {
+        if (browser && !window.hasOwnProperty('gpxstudio')) {
+            Object.defineProperty(window, 'gpxstudio', {
+                value: this,
+            });
+            addEventListener('beforeunload', () => {
+                this.destroy();
+            });
+        }
+    }
+
+    ensureLoaded(): Promise<void> {
+        let unsubscribe: () => void;
+        const promise = new Promise<void>((resolve) => {
+            map.onLoad(() => {
+                unsubscribe = currentOverlays.subscribe((current) => {
+                    if (current) {
+                        resolve();
+                    }
+                });
+            });
+        });
+        promise.finally(() => {
+            unsubscribe?.();
+        });
+        return promise;
+    }
+
+    addOrUpdateOverlay(overlay: CustomOverlay) {
+        if (
+            !overlay.extensionName ||
+            !overlay.id ||
+            !overlay.name ||
+            !overlay.tileUrls ||
+            overlay.tileUrls.length === 0
+        ) {
+            throw new Error(
+                'Overlay must have an extensionName, id, name, and at least one tile URL.'
+            );
+        }
+        overlay.id = this.getOverlayId(overlay.id);
+
+        this._overlays.update(($overlays) => {
+            $overlays.set(overlay.id, overlay);
+            return $overlays;
+        });
+
+        overlays[overlay.id] = {
+            version: 8,
+            sources: {
+                [overlay.id]: {
+                    type: 'raster',
+                    tiles: overlay.tileUrls,
+                    tileSize: overlay.tileUrls.some((url) => url.includes('512')) ? 512 : 256,
+                    maxzoom: overlay.maxZoom ?? 22,
+                },
+            },
+            layers: [
+                {
+                    id: overlay.id,
+                    type: 'raster',
+                    source: overlay.id,
+                },
+            ],
+        };
+
+        if (!overlayTree.overlays.hasOwnProperty(overlay.extensionName)) {
+            overlayTree.overlays[overlay.extensionName] = {};
+        }
+
+        overlayTree.overlays[overlay.extensionName][overlay.id] = true;
+
+        selectedOverlayTree.update((selected) => {
+            if (!selected.overlays.hasOwnProperty(overlay.extensionName)) {
+                selected.overlays[overlay.extensionName] = {};
+            }
+            selected.overlays[overlay.extensionName][overlay.id] = true;
+            return selected;
+        });
+
+        const current = get(currentOverlays);
+        let show = false;
+        if (current && isSelected(current, overlay.id)) {
+            show = true;
+            try {
+                get(map)?.removeImport(overlay.id);
+            } catch (e) {
+                // No reliable way to check if the map is ready to remove sources and layers
+            }
+        }
+
+        currentOverlays.update((current) => {
+            if (!current.overlays.hasOwnProperty(overlay.extensionName)) {
+                current.overlays[overlay.extensionName] = {};
+            }
+            current.overlays[overlay.extensionName][overlay.id] = show;
+            return current;
+        });
+    }
+
+    filterOverlays(ids: string[]) {
+        ids = ids.map((id) => this.getOverlayId(id));
+        const idsToRemove = Array.from(get(this._overlays).keys()).filter(
+            (id) => !ids.includes(id)
+        );
+
+        currentOverlays.update((current) => {
+            removeAll(current, idsToRemove);
+            return current;
+        });
+        previousOverlays.update((previous) => {
+            removeAll(previous, idsToRemove);
+            return previous;
+        });
+        selectedOverlayTree.update((selected) => {
+            removeAll(selected, idsToRemove);
+            return selected;
+        });
+        Object.keys(overlays).forEach((id) => {
+            if (idsToRemove.includes(id)) {
+                delete overlays[id];
+            }
+        });
+        removeAll(overlayTree, idsToRemove);
+        this._overlays.update(($overlays) => {
+            $overlays.forEach((_, id) => {
+                if (idsToRemove.includes(id)) {
+                    $overlays.delete(id);
+                }
+            });
+            return $overlays;
+        });
+    }
+
+    updateOverlaysOrder(ids: string[]) {
+        ids = ids.map((id) => this.getOverlayId(id));
+        selectedOverlayTree.update((selected) => {
+            let isSelected: Record<string, boolean> = {};
+            ids.forEach((id) => {
+                const overlay = get(this._overlays).get(id);
+                if (
+                    overlay &&
+                    selected.overlays.hasOwnProperty(overlay.extensionName) &&
+                    selected.overlays[overlay.extensionName].hasOwnProperty(id)
+                ) {
+                    isSelected[id] = selected.overlays[overlay.extensionName][id];
+                    delete selected.overlays[overlay.extensionName][id];
+                }
+            });
+            Object.entries(isSelected).forEach(([id, value]) => {
+                const overlay = get(this._overlays).get(id)!;
+                selected.overlays[overlay.extensionName][id] = value;
+            });
+            return selected;
+        });
+    }
+
+    isLayerFromExtension = derived(this._overlays, ($overlays) => {
+        return (id: string) => $overlays.has(id);
+    });
+
+    getLayerName = derived(this._overlays, ($overlays) => {
+        return (id: string) => $overlays.get(id)?.name || '';
+    });
+
+    private getOverlayId(id: string): string {
+        return `extension-${id}`;
+    }
+
+    private destroy() {
+        const ids = Array.from(get(this._overlays).keys());
+        currentOverlays.update((current) => {
+            ids.forEach((id) => {
+                remove(current, id);
+            });
+            return current;
+        });
+        previousOverlays.update((previous) => {
+            ids.forEach((id) => {
+                remove(previous, id);
+            });
+            return previous;
+        });
+        selectedOverlayTree.update((selected) => {
+            ids.forEach((id) => {
+                remove(selected, id);
+            });
+            return selected;
+        });
+    }
+}
+
+export const extensionAPI = new ExtensionAPI();

website/src/lib/components/map/layer-control/overpass-layer.ts

@@ -6,6 +6,7 @@ import { overpassQueryData } from '$lib/assets/layers';
 import { MapPopup } from '$lib/components/map/map-popup';
 import { settings } from '$lib/logic/settings';
 import { db } from '$lib/db';
+import { ANCHOR_LAYER_KEY } from '$lib/components/map/map';
 
 const { currentOverpassQueries } = settings;
 
@@ -74,7 +75,7 @@ export class OverpassLayer {
         let d = get(data);
 
         try {
-            let source = this.map.getSource('overpass');
+            let source = this.map.getSource('overpass') as mapboxgl.GeoJSONSource | undefined;
             if (source) {
                 source.setData(d);
             } else {
@@ -85,23 +86,28 @@ export class OverpassLayer {
             }
 
             if (!this.map.getLayer('overpass')) {
-                this.map.addLayer({
-                    id: 'overpass',
-                    type: 'symbol',
-                    source: 'overpass',
-                    layout: {
-                        'icon-image': ['get', 'icon'],
-                        'icon-size': 0.25,
-                        'icon-padding': 0,
-                        'icon-allow-overlap': ['step', ['zoom'], false, 14, true],
+                this.map.addLayer(
+                    {
+                        id: 'overpass',
+                        type: 'symbol',
+                        source: 'overpass',
+                        layout: {
+                            'icon-image': ['get', 'icon'],
+                            'icon-size': 0.25,
+                            'icon-padding': 0,
+                            'icon-allow-overlap': ['step', ['zoom'], false, 14, true],
+                        },
                     },
-                });
+                    ANCHOR_LAYER_KEY.overpass
+                );
 
                 this.map.on('mouseenter', 'overpass', this.onHoverBinded);
                 this.map.on('click', 'overpass', this.onHoverBinded);
             }
 
-            this.map.setFilter('overpass', ['in', 'query', ...getCurrentQueries()]);
+            this.map.setFilter('overpass', ['in', 'query', ...getCurrentQueries()], {
+                validate: false,
+            });
         } catch (e) {
             // No reliable way to check if the map is ready to add sources and layers
         }
@@ -283,8 +289,10 @@ function getQuery(query: string) {
     }
 }
 
-function getQueryItem(tags: Record<string, string | boolean | string[]>) {
-    let arrayEntry = Object.entries(tags).find(([_, value]) => Array.isArray(value));
+function getQueryItem(tags: Record<string, string | string[]>) {
+    let arrayEntry = Object.entries(tags).find((entry): entry is [string, string[]] =>
+        Array.isArray(entry[1])
+    );
     if (arrayEntry !== undefined) {
         return arrayEntry[1]
             .map(
@@ -309,7 +317,7 @@ function belongsToQuery(element: any, query: string) {
     }
 }
 
-function belongsToQueryItem(element: any, tags: Record<string, string | boolean | string[]>) {
+function belongsToQueryItem(element: any, tags: Record<string, string | string[]>) {
     return Object.entries(tags).every(([tag, value]) =>
         Array.isArray(value) ? value.includes(element.tags[tag]) : element.tags[tag] === value
     );

website/src/lib/components/map/layer-control/utils.ts

@@ -55,4 +55,26 @@ export function toggle(node: LayerTreeType, id: string) {
     return node;
 }
 
+export function remove(node: LayerTreeType, id: string) {
+    Object.keys(node).forEach((key) => {
+        if (key === id) {
+            delete node[key];
+        } else if (typeof node[key] !== 'boolean') {
+            remove(node[key], id);
+        }
+    });
+    return node;
+}
+
+export function removeAll(node: LayerTreeType, ids: string[]) {
+    Object.keys(node).forEach((key) => {
+        if (ids.includes(key)) {
+            delete node[key];
+        } else if (typeof node[key] !== 'boolean') {
+            removeAll(node[key], ids);
+        }
+    });
+    return node;
+}
+
 export const customBasemapUpdate = writable(0);

website/src/lib/components/map/map-popup.ts

@@ -1,6 +1,6 @@
 import { TrackPoint, Waypoint } from 'gpx';
 import mapboxgl from 'mapbox-gl';
-import { mount, tick } from 'svelte';
+import { mount, tick, unmount } from 'svelte';
 import { get, writable, type Writable } from 'svelte/store';
 import MapPopupComponent from '$lib/components/map/MapPopup.svelte';
 
@@ -69,7 +69,7 @@ export class MapPopup {
 
     remove() {
         this.popup.remove();
-        this.component.$destroy();
+        unmount(this.component);
     }
 
     getCoordinates() {

website/src/lib/components/map/map.ts

@@ -2,8 +2,17 @@ import mapboxgl from 'mapbox-gl';
 import MapboxGeocoder from '@mapbox/mapbox-gl-geocoder';
 import { get, writable, type Writable } from 'svelte/store';
 import { settings } from '$lib/logic/settings';
+import { tick } from 'svelte';
+import { terrainSources } from '$lib/assets/layers';
 
-const { treeFileView, elevationProfile, bottomPanelSize, rightPanelSize, distanceUnits } = settings;
+const {
+    treeFileView,
+    elevationProfile,
+    bottomPanelSize,
+    rightPanelSize,
+    distanceUnits,
+    terrainSource,
+} = settings;
 
 let fitBoundsOptions: mapboxgl.MapOptions['fitBoundsOptions'] = {
     maxZoom: 15,
@@ -11,6 +20,28 @@ let fitBoundsOptions: mapboxgl.MapOptions['fitBoundsOptions'] = {
     easing: () => 1,
 };
 
+const emptySource: mapboxgl.GeoJSONSourceSpecification = {
+    type: 'geojson',
+    data: {
+        type: 'FeatureCollection',
+        features: [],
+    },
+};
+export const ANCHOR_LAYER_KEY = {
+    mapillary: 'mapillary-end',
+    tracks: 'tracks-end',
+    directionMarkers: 'direction-markers-end',
+    distanceMarkers: 'distance-markers-end',
+    interactions: 'interactions-end',
+    overpass: 'overpass-end',
+    waypoints: 'waypoints-end',
+};
+const anchorLayers: mapboxgl.LayerSpecification[] = Object.values(ANCHOR_LAYER_KEY).map((id) => ({
+    id: id,
+    type: 'symbol',
+    source: 'empty-source',
+}));
+
 export class MapboxGLMap {
     private _map: Writable<mapboxgl.Map | null> = writable(null);
     private _onLoadCallbacks: ((map: mapboxgl.Map) => void)[] = [];
@@ -20,31 +51,16 @@ export class MapboxGLMap {
         return this._map.subscribe(run, invalidate);
     }
 
-    init(
-        accessToken: string,
-        language: string,
-        hash: boolean,
-        geocoder: boolean,
-        geolocate: boolean
-    ) {
+    init(language: string, hash: boolean, geocoder: boolean, geolocate: boolean) {
         const map = new mapboxgl.Map({
             container: 'map',
             style: {
                 version: 8,
-                sources: {},
-                layers: [],
+                sources: {
+                    'empty-source': emptySource,
+                },
+                layers: anchorLayers,
                 imports: [
-                    {
-                        id: 'glyphs-and-sprite', // make Mapbox glyphs and sprite available to other styles
-                        url: '',
-                        data: {
-                            version: 8,
-                            sources: {},
-                            layers: [],
-                            glyphs: 'mapbox://fonts/mapbox/{fontstack}/{range}.pbf',
-                            sprite: `https://api.mapbox.com/styles/v1/mapbox/outdoors-v12/sprite?access_token=${accessToken}`,
-                        },
-                    },
                     {
                         id: 'basemap',
                         url: '',
@@ -52,11 +68,6 @@ export class MapboxGLMap {
                     {
                         id: 'overlays',
                         url: '',
-                        data: {
-                            version: 8,
-                            sources: {},
-                            layers: [],
-                        },
                     },
                 ],
             },
@@ -133,38 +144,26 @@ export class MapboxGLMap {
         });
         map.addControl(scaleControl);
         map.on('style.load', () => {
-            map.addSource('mapbox-dem', {
-                type: 'raster-dem',
-                url: 'mapbox://mapbox.mapbox-terrain-dem-v1',
-                tileSize: 512,
-                maxzoom: 14,
-            });
-            if (map.getPitch() > 0) {
-                map.setTerrain({
-                    source: 'mapbox-dem',
-                    exaggeration: 1,
-                });
-            }
             map.setFog({
                 color: 'rgb(186, 210, 235)',
                 'high-color': 'rgb(36, 92, 223)',
                 'horizon-blend': 0.1,
                 'space-color': 'rgb(156, 240, 255)',
             });
-            map.on('pitch', () => {
-                if (map.getPitch() > 0) {
-                    map.setTerrain({
-                        source: 'mapbox-dem',
-                        exaggeration: 1,
-                    });
-                } else {
-                    map.setTerrain(null);
-                }
-            });
+            map.on('pitch', this.setTerrain.bind(this));
+            this.setTerrain();
+        });
+        map.on('style.import.load', () => {
+            const basemap = map.getStyle().imports?.find((imprt) => imprt.id === 'basemap');
+            if (basemap && basemap.data && basemap.data.glyphs) {
+                map.setGlyphsUrl(basemap.data.glyphs);
+            }
         });
         map.on('load', () => {
             this._map.set(map); // only set the store after the map has loaded
             window._map = map; // entry point for extensions
+            this.resize();
+            this.setTerrain();
             scaleControl.setUnit(get(distanceUnits));
 
             this._onLoadCallbacks.forEach((callback) => callback(map));
@@ -180,6 +179,7 @@ export class MapboxGLMap {
                 scaleControl.setUnit(units);
             })
         );
+        this._unsubscribes.push(terrainSource.subscribe(() => this.setTerrain()));
     }
 
     onLoad(callback: (map: mapboxgl.Map) => void) {
@@ -204,7 +204,9 @@ export class MapboxGLMap {
     resize() {
         const map = get(this._map);
         if (map) {
-            map.resize();
+            tick().then(() => {
+                map.resize();
+            });
         }
     }
 
@@ -218,108 +220,29 @@ export class MapboxGLMap {
             }
         }
     }
+
+    setTerrain() {
+        const map = get(this._map);
+        if (map) {
+            const source = get(terrainSource);
+            try {
+                if (!map.getSource(source)) {
+                    map.addSource(source, terrainSources[source]);
+                }
+                if (map.getPitch() > 0) {
+                    map.setTerrain({
+                        source: source,
+                        exaggeration: 1,
+                    });
+                } else {
+                    map.setTerrain(null);
+                }
+            } catch (e) {
+                // No reliable way to check if the map is ready to add sources and layers
+                return;
+            }
+        }
+    }
 }
 
 export const map = new MapboxGLMap();
-
-// const targetMapBounds: {
-//     bounds: mapboxgl.LngLatBounds;
-//     ids: string[];
-//     total: number;
-// } = $state({
-//     bounds: new mapboxgl.LngLatBounds([180, 90, -180, -90]),
-//     ids: [],
-//     total: 0,
-// });
-
-// $effect(() => {
-//     if (
-//         map.current === null ||
-//         targetMapBounds.ids.length > 0 ||
-//         (targetMapBounds.bounds.getSouth() === 90 &&
-//             targetMapBounds.bounds.getWest() === 180 &&
-//             targetMapBounds.bounds.getNorth() === -90 &&
-//             targetMapBounds.bounds.getEast() === -180)
-//     ) {
-//         return;
-//     }
-
-//     let currentZoom = map.current.getZoom();
-//     let currentBounds = map.current.getBounds();
-//     if (
-//         targetMapBounds.total !== get(fileObservers).size &&
-//         currentBounds &&
-//         currentZoom > 2 // Extend current bounds only if the map is zoomed in
-//     ) {
-//         // There are other files on the map
-//         if (
-//             currentBounds.contains(targetMapBounds.bounds.getSouthEast()) &&
-//             currentBounds.contains(targetMapBounds.bounds.getNorthWest())
-//         ) {
-//             return;
-//         }
-
-//         targetMapBounds.bounds.extend(currentBounds.getSouthWest());
-//         targetMapBounds.bounds.extend(currentBounds.getNorthEast());
-//     }
-
-//     map.current.fitBounds(targetMapBounds.bounds, { padding: 80, linear: true, easing: () => 1 });
-// });
-
-// export function initTargetMapBounds(ids: string[]) {
-//     targetMapBounds.bounds = new mapboxgl.LngLatBounds([180, 90, -180, -90]);
-//     targetMapBounds.ids = ids;
-//     targetMapBounds.total = ids.length;
-// }
-
-// export function updateTargetMapBounds(
-//     id: string,
-//     bounds: { southWest: Coordinates; northEast: Coordinates }
-// ) {
-//     if (targetMapBounds.ids.indexOf(id) === -1) {
-//         return;
-//     }
-
-//     if (
-//         bounds.southWest.lat !== 90 ||
-//         bounds.southWest.lon !== 180 ||
-//         bounds.northEast.lat !== -90 ||
-//         bounds.northEast.lon !== -180
-//     ) {
-//         // Avoid update for empty (new) files
-//         targetMapBounds.ids = targetMapBounds.ids.filter((x) => x !== id);
-//         targetMapBounds.bounds.extend(bounds.southWest);
-//         targetMapBounds.bounds.extend(bounds.northEast);
-//     }
-// }
-
-// export function centerMapOnSelection() {
-//     let selected = get(selection).getSelected();
-//     let bounds = new mapboxgl.LngLatBounds();
-
-//     if (selected.find((item) => item instanceof ListWaypointItem)) {
-//         applyToOrderedSelectedItemsFromFile((fileId, level, items) => {
-//             let file = getFile(fileId);
-//             if (file) {
-//                 items.forEach((item) => {
-//                     if (item instanceof ListWaypointItem) {
-//                         let waypoint = file.wpt[item.getWaypointIndex()];
-//                         if (waypoint) {
-//                             bounds.extend([waypoint.getLongitude(), waypoint.getLatitude()]);
-//                         }
-//                     }
-//                 });
-//             }
-//         });
-//     } else {
-//         let selectionBounds = get(gpxStatistics).global.bounds;
-//         bounds.setNorthEast(selectionBounds.northEast);
-//         bounds.setSouthWest(selectionBounds.southWest);
-//     }
-
-//     get(map)?.fitBounds(bounds, {
-//         padding: 80,
-//         easing: () => 1,
-//         maxZoom: 15,
-//     });
-// }

website/src/lib/components/map/street-view-control/StreetViewControl.svelte

@@ -2,14 +2,13 @@
     import { streetViewEnabled } from '$lib/components/map/street-view-control/utils';
     import { map } from '$lib/components/map/map';
     import CustomControl from '$lib/components/map/custom-control/CustomControl.svelte';
-    import Tooltip from '$lib/components/Tooltip.svelte';
-    import { Toggle } from '$lib/components/ui/toggle';
     import { PersonStanding, X } from '@lucide/svelte';
-    import { MapillaryLayer } from './Mapillary';
-    import { GoogleRedirect } from './Google';
+    import { MapillaryLayer } from './mapillary';
+    import { GoogleRedirect } from './google';
     import { settings } from '$lib/logic/settings';
     import { i18n } from '$lib/i18n.svelte';
     import { onMount } from 'svelte';
+    import ButtonWithTooltip from '$lib/components/ButtonWithTooltip.svelte';
 
     const { streetViewSource } = settings;
 
@@ -47,15 +46,21 @@
 </script>
 
 <CustomControl class="w-[29px] h-[29px] shrink-0">
-    <Tooltip class="w-full h-full" side="left" label={i18n._('menu.toggle_street_view')}>
-        <Toggle
-            bind:pressed={$streetViewEnabled}
-            class="w-full h-full rounded p-0"
-            aria-label={i18n._('menu.toggle_street_view')}
-        >
-            <PersonStanding size="22" />
-        </Toggle>
-    </Tooltip>
+    <ButtonWithTooltip
+        variant="ghost"
+        class="w-full h-full"
+        side="left"
+        label={i18n._('menu.toggle_street_view')}
+        onclick={() => {
+            $streetViewEnabled = !$streetViewEnabled;
+        }}
+    >
+        <PersonStanding
+            size="22"
+            class="size-5.5"
+            color={$streetViewEnabled ? '#33b5e5' : 'currentColor'}
+        />
+    </ButtonWithTooltip>
 </CustomControl>
 
 <div

website/src/lib/components/map/street-view-control/google.ts

@@ -1,4 +1,4 @@
-import { resetCursor, setCrosshairCursor } from '$lib/utils';
+import { mapCursor, MapCursorState } from '$lib/logic/map-cursor';
 import type mapboxgl from 'mapbox-gl';
 
 export class GoogleRedirect {
@@ -13,7 +13,7 @@ export class GoogleRedirect {
         if (this.enabled) return;
 
         this.enabled = true;
-        setCrosshairCursor();
+        mapCursor.notify(MapCursorState.STREET_VIEW_CROSSHAIR, true);
         this.map.on('click', this.openStreetView);
     }
 
@@ -21,11 +21,11 @@ export class GoogleRedirect {
         if (!this.enabled) return;
 
         this.enabled = false;
-        resetCursor();
+        mapCursor.notify(MapCursorState.STREET_VIEW_CROSSHAIR, false);
         this.map.off('click', this.openStreetView);
     }
 
-    openStreetView(e) {
+    openStreetView(e: mapboxgl.MapMouseEvent) {
         window.open(
             `https://www.google.com/maps/@?api=1&map_action=pano&viewpoint=${e.lngLat.lat},${e.lngLat.lng}`
         );

website/src/lib/components/map/street-view-control/mapillary.ts

@@ -1,7 +1,8 @@
 import mapboxgl, { type LayerSpecification, type VectorSourceSpecification } from 'mapbox-gl';
 import { Viewer, type ViewerBearingEvent } from 'mapillary-js/dist/mapillary.module';
 import 'mapillary-js/dist/mapillary.css';
-import { resetCursor, setPointerCursor } from '$lib/utils';
+import { mapCursor, MapCursorState } from '$lib/logic/map-cursor';
+import { ANCHOR_LAYER_KEY } from '$lib/components/map/map';
 
 const mapillarySource: VectorSourceSpecification = {
     type: 'vector',
@@ -99,10 +100,10 @@ export class MapillaryLayer {
             this.map.addSource('mapillary', mapillarySource);
         }
         if (!this.map.getLayer('mapillary-sequence')) {
-            this.map.addLayer(mapillarySequenceLayer);
+            this.map.addLayer(mapillarySequenceLayer, ANCHOR_LAYER_KEY.mapillary);
         }
         if (!this.map.getLayer('mapillary-image')) {
-            this.map.addLayer(mapillaryImageLayer);
+            this.map.addLayer(mapillaryImageLayer, ANCHOR_LAYER_KEY.mapillary);
         }
         this.map.on('style.load', this.addBinded);
         this.map.on('mouseenter', 'mapillary-image', this.onMouseEnterBinded);
@@ -135,15 +136,22 @@ export class MapillaryLayer {
     }
 
     onMouseEnter(e: mapboxgl.MapMouseEvent) {
-        this.active = true;
+        if (
+            e.features &&
+            e.features.length > 0 &&
+            e.features[0].properties &&
+            e.features[0].properties.id
+        ) {
+            this.active = true;
 
-        this.viewer.resize();
-        this.viewer.moveTo(e.features[0].properties.id);
+            this.viewer.resize();
+            this.viewer.moveTo(e.features[0].properties.id);
 
-        setPointerCursor();
+            mapCursor.notify(MapCursorState.MAPILLARY_HOVER, true);
+        }
     }
 
     onMouseLeave() {
-        resetCursor();
+        mapCursor.notify(MapCursorState.MAPILLARY_HOVER, false);
     }
 }

website/src/lib/components/toolbar/Toolbar.svelte

@@ -26,31 +26,31 @@
             ''}"
     >
         <ToolbarItem itemTool={Tool.ROUTING} label={i18n._('toolbar.routing.tooltip')}>
-            <Pencil size="18" />
+            <Pencil size="18" class="size-4.5" />
         </ToolbarItem>
         <ToolbarItem itemTool={Tool.WAYPOINT} label={i18n._('toolbar.waypoint.tooltip')}>
-            <MapPin size="18" />
+            <MapPin size="18" class="size-4.5" />
         </ToolbarItem>
         <ToolbarItem itemTool={Tool.SCISSORS} label={i18n._('toolbar.scissors.tooltip')}>
-            <Scissors size="18" />
+            <Scissors size="18" class="size-4.5" />
         </ToolbarItem>
         <ToolbarItem itemTool={Tool.TIME} label={i18n._('toolbar.time.tooltip')}>
-            <CalendarClock size="18" />
+            <CalendarClock size="18" class="size-4.5" />
         </ToolbarItem>
         <ToolbarItem itemTool={Tool.MERGE} label={i18n._('toolbar.merge.tooltip')}>
-            <Group size="18" />
+            <Group size="18" class="size-4.5" />
         </ToolbarItem>
         <ToolbarItem itemTool={Tool.EXTRACT} label={i18n._('toolbar.extract.tooltip')}>
-            <Ungroup size="18" />
+            <Ungroup size="18" class="size-4.5" />
         </ToolbarItem>
         <ToolbarItem itemTool={Tool.ELEVATION} label={i18n._('toolbar.elevation.button')}>
-            <MountainSnow size="18" />
+            <MountainSnow size="18" class="size-4.5" />
         </ToolbarItem>
         <ToolbarItem itemTool={Tool.REDUCE} label={i18n._('toolbar.reduce.tooltip')}>
-            <Funnel size="18" />
+            <Funnel size="18" class="size-4.5" />
         </ToolbarItem>
         <ToolbarItem itemTool={Tool.CLEAN} label={i18n._('toolbar.clean.tooltip')}>
-            <SquareDashedMousePointer size="18" />
+            <SquareDashedMousePointer size="18" class="size-4.5" />
         </ToolbarItem>
     </div>
     <ToolbarItemMenu class={props.class ?? ''} />

website/src/lib/components/toolbar/ToolbarItem.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
     import { Button } from '$lib/components/ui/button';
     import * as Tooltip from '$lib/components/ui/tooltip/index.js';
-    import { tool, Tool } from '$lib/components/toolbar/tools';
+    import { currentTool, Tool } from '$lib/components/toolbar/tools';
     import type { Snippet } from 'svelte';
 
     let {
@@ -15,22 +15,22 @@
     } = $props();
 
     function toggleTool() {
-        if (tool.current === itemTool) {
-            tool.current = null;
+        if ($currentTool === itemTool) {
+            $currentTool = null;
         } else {
-            tool.current = itemTool;
+            $currentTool = itemTool;
         }
     }
 </script>
 
 <Tooltip.Provider>
-    <Tooltip.Root delayDuration={300}>
+    <Tooltip.Root>
         <Tooltip.Trigger>
             {#snippet child({ props })}
                 <Button
                     {...props}
                     variant="ghost"
-                    class="h-[26px] px-1 py-1.5 {tool.current === itemTool ? 'bg-accent' : ''}"
+                    class="size-[24px] {$currentTool === itemTool ? 'bg-accent' : ''}"
                     onclick={toggleTool}
                     aria-label={label}
                 >

website/src/lib/components/toolbar/ToolbarItemMenu.svelte

@@ -1,68 +1,66 @@
 <script lang="ts">
-    import { Tool, tool } from '$lib/components/toolbar/tools';
+    import { Tool, currentTool } from '$lib/components/toolbar/tools';
     import * as Card from '$lib/components/ui/card';
     import Routing from '$lib/components/toolbar/tools/routing/Routing.svelte';
     import Scissors from '$lib/components/toolbar/tools/scissors/Scissors.svelte';
     import Waypoint from '$lib/components/toolbar/tools/waypoint/Waypoint.svelte';
     import Time from '$lib/components/toolbar/tools/Time.svelte';
     import Merge from '$lib/components/toolbar/tools/Merge.svelte';
-    import Extract from '$lib/components/toolbar/tools/Extract.svelte';
     import Elevation from '$lib/components/toolbar/tools/Elevation.svelte';
+    import Extract from '$lib/components/toolbar/tools/Extract.svelte';
     import Clean from '$lib/components/toolbar/tools/Clean.svelte';
-    import Reduce from '$lib/components/toolbar/tools/Reduce.svelte';
+    import Reduce from '$lib/components/toolbar/tools/reduce/Reduce.svelte';
     import RoutingControlPopup from '$lib/components/toolbar/tools/routing/RoutingControlPopup.svelte';
-    import { onMount } from 'svelte';
     import mapboxgl from 'mapbox-gl';
     import { settings } from '$lib/logic/settings';
 
     let {
-        popupElement,
-        popup,
         class: className = '',
     }: {
-        popupElement: HTMLDivElement;
-        popup: mapboxgl.Popup;
         class: string;
     } = $props();
 
     const { minimizeRoutingMenu } = settings;
 
-    onMount(() => {
-        popup = new mapboxgl.Popup({
+    let popupElement: HTMLDivElement | undefined = $state(undefined);
+    let popup: mapboxgl.Popup | undefined = $derived.by(() => {
+        if (!popupElement) {
+            return undefined;
+        }
+        let popup = new mapboxgl.Popup({
             closeButton: false,
             maxWidth: undefined,
         });
         popup.setDOMContent(popupElement);
         popupElement.classList.remove('hidden');
+        return popup;
     });
 </script>
 
-{#if tool.current !== null}
-    <div class="translate-x-1 h-full animate-in animate-out {className}">
+{#if $currentTool !== null}
+    <div
+        class="translate-x-1 h-full animate-in fade-in-0 zoom-in-95 slide-in-from-left-2 {className}"
+    >
         <div class="rounded-md shadow-md pointer-events-auto">
-            <Card.Root class="rounded-md border-none">
-                <Card.Content class="p-2.5">
-                    {#if tool.current === Tool.ROUTING}
-                        <Routing
-                            {popup}
-                            {popupElement}
-                            bind:minimized={minimizeRoutingMenu.value}
-                        />
-                    {:else if tool.current === Tool.SCISSORS}
+            <Card.Root class="rounded-md border-none py-2.5">
+                <Card.Content class="px-2.5">
+                    {#if $currentTool === Tool.ROUTING}
+                        <Routing {popup} {popupElement} bind:minimized={$minimizeRoutingMenu} />
+                    {:else if $currentTool === Tool.SCISSORS}
                         <Scissors />
-                    {:else if tool.current === Tool.WAYPOINT}
+                    {:else if $currentTool === Tool.WAYPOINT}
                         <Waypoint />
-                    {:else if tool.current === Tool.TIME}
+                    {:else if $currentTool === Tool.TIME}
                         <Time />
-                    {:else if tool.current === Tool.MERGE}
+                    {:else if $currentTool === Tool.MERGE}
                         <Merge />
-                    {:else if tool.current === Tool.ELEVATION}
+                    {:else if $currentTool === Tool.ELEVATION}
                         <Elevation />
-                    {:else if tool.current === Tool.EXTRACT}
+                    {:else if $currentTool === Tool.EXTRACT}
                         <Extract />
-                    {:else if tool.current === Tool.CLEAN}
+                    {:else if $currentTool === Tool.CLEAN}
                         <Clean />
-                    {:else if tool.current === Tool.REDUCE}
+                    {:else if $currentTool === Tool.REDUCE}
                         <Reduce />
                     {/if}
                 </Card.Content>
@@ -73,8 +71,8 @@
 
 <svelte:window
     on:keydown={(e) => {
-        if (tool.current !== null && e.key === 'Escape') {
-            tool.current = null;
+        if ($currentTool !== null && e.key === 'Escape') {
+            $currentTool = null;
         }
     }}
 />

website/src/lib/components/toolbar/tools/Clean.svelte

@@ -13,12 +13,13 @@
     import Help from '$lib/components/Help.svelte';
     import { i18n } from '$lib/i18n.svelte';
     import { onDestroy, onMount } from 'svelte';
-    import { getURLForLanguage, resetCursor, setCrosshairCursor } from '$lib/utils';
+    import { getURLForLanguage } from '$lib/utils';
     import { Trash2 } from '@lucide/svelte';
-    import { map } from '$lib/components/map/map';
+    import { ANCHOR_LAYER_KEY, map } from '$lib/components/map/map';
     import type { GeoJSONSource } from 'mapbox-gl';
     import { selection } from '$lib/logic/selection';
     import { fileActions } from '$lib/logic/file-actions';
+    import { mapCursor, MapCursorState } from '$lib/logic/map-cursor';
 
     let props: {
         class?: string;
@@ -30,10 +31,10 @@
     let rectangleCoordinates: mapboxgl.LngLat[] = $state([]);
 
     $effect(() => {
-        if (map.value) {
+        if ($map) {
             if (rectangleCoordinates.length != 2) {
-                if (map.value.getLayer('rectangle')) {
-                    map.value.removeLayer('rectangle');
+                if ($map.getLayer('rectangle')) {
+                    $map.removeLayer('rectangle');
                 }
             } else {
                 let data: GeoJSON.Feature = {
@@ -52,25 +53,28 @@
                     },
                     properties: {},
                 };
-                let source: GeoJSONSource | undefined = map.value.getSource('rectangle');
+                let source: GeoJSONSource | undefined = $map.getSource('rectangle');
                 if (source) {
                     source.setData(data);
                 } else {
-                    map.value.addSource('rectangle', {
+                    $map.addSource('rectangle', {
                         type: 'geojson',
                         data: data,
                     });
                 }
-                if (!map.value.getLayer('rectangle')) {
-                    map.value.addLayer({
-                        id: 'rectangle',
-                        type: 'fill',
-                        source: 'rectangle',
-                        paint: {
-                            'fill-color': 'SteelBlue',
-                            'fill-opacity': 0.5,
+                if (!$map.getLayer('rectangle')) {
+                    $map.addLayer(
+                        {
+                            id: 'rectangle',
+                            type: 'fill',
+                            source: 'rectangle',
+                            paint: {
+                                'fill-color': 'SteelBlue',
+                                'fill-opacity': 0.5,
+                            },
                         },
-                    });
+                        ANCHOR_LAYER_KEY.interactions
+                    );
                 }
             }
         }
@@ -93,39 +97,39 @@
     }
 
     onMount(() => {
-        if (map.value) {
-            setCrosshairCursor(map.value.getCanvas());
-            map.value.on('mousedown', onMouseDown);
-            map.value.on('mousemove', onMouseMove);
-            map.value.on('mouseup', onMouseUp);
-            map.value.on('touchstart', onMouseDown);
-            map.value.on('touchmove', onMouseMove);
-            map.value.on('touchend', onMouseUp);
-            map.value.dragPan.disable();
+        if ($map) {
+            mapCursor.notify(MapCursorState.TOOL_WITH_CROSSHAIR, true);
+            $map.on('mousedown', onMouseDown);
+            $map.on('mousemove', onMouseMove);
+            $map.on('mouseup', onMouseUp);
+            $map.on('touchstart', onMouseDown);
+            $map.on('touchmove', onMouseMove);
+            $map.on('touchend', onMouseUp);
+            $map.dragPan.disable();
         }
     });
 
     onDestroy(() => {
-        if (map.value) {
-            resetCursor(map.value.getCanvas());
-            map.value.off('mousedown', onMouseDown);
-            map.value.off('mousemove', onMouseMove);
-            map.value.off('mouseup', onMouseUp);
-            map.value.off('touchstart', onMouseDown);
-            map.value.off('touchmove', onMouseMove);
-            map.value.off('touchend', onMouseUp);
-            map.value.dragPan.enable();
+        if ($map) {
+            mapCursor.notify(MapCursorState.TOOL_WITH_CROSSHAIR, false);
+            $map.off('mousedown', onMouseDown);
+            $map.off('mousemove', onMouseMove);
+            $map.off('mouseup', onMouseUp);
+            $map.off('touchstart', onMouseDown);
+            $map.off('touchmove', onMouseMove);
+            $map.off('touchend', onMouseUp);
+            $map.dragPan.enable();
 
-            if (map.value.getLayer('rectangle')) {
-                map.value.removeLayer('rectangle');
+            if ($map.getLayer('rectangle')) {
+                $map.removeLayer('rectangle');
             }
-            if (map.value.getSource('rectangle')) {
-                map.value.removeSource('rectangle');
+            if ($map.getSource('rectangle')) {
+                $map.removeSource('rectangle');
             }
         }
     });
 
-    let validSelection = $derived(selection.value.size > 0);
+    let validSelection = $derived($selection.size > 0);
 </script>
 
 <div class="flex flex-col gap-3 w-full max-w-80 items-center {props.class ?? ''}">
@@ -176,7 +180,7 @@
             rectangleCoordinates = [];
         }}
     >
-        <Trash2 size="16" class="mr-1" />
+        <Trash2 size="16" />
         {i18n._('toolbar.clean.button')}
     </Button>
     <Help link={getURLForLanguage(i18n.lang, '/help/toolbar/clean')}>

website/src/lib/components/toolbar/tools/Elevation.svelte

@@ -2,7 +2,6 @@
     import { Button } from '$lib/components/ui/button';
     import Help from '$lib/components/Help.svelte';
     import { MountainSnow } from '@lucide/svelte';
-    import { map } from '$lib/components/map/map';
     import { i18n } from '$lib/i18n.svelte';
     import { getURLForLanguage } from '$lib/utils';
     import { selection } from '$lib/logic/selection';
@@ -12,7 +11,7 @@
         class?: string;
     } = $props();
 
-    let validSelection = $derived(selection.value.size > 0);
+    let validSelection = $derived($selection.size > 0);
 </script>
 
 <div class="flex flex-col gap-3 w-full max-w-80 {props.class ?? ''}">
@@ -20,13 +19,9 @@
         variant="outline"
         class="whitespace-normal h-fit"
         disabled={!validSelection}
-        onclick={async () => {
-            if (map.value) {
-                fileActions.addElevationToSelection(map.value);
-            }
-        }}
+        onclick={() => fileActions.addElevationToSelection()}
     >
-        <MountainSnow size="16" class="mr-1 shrink-0" />
+        <MountainSnow size="16" class="shrink-0" />
         {i18n._('toolbar.elevation.button')}
     </Button>
     <Help link={getURLForLanguage(i18n.lang, '/help/toolbar/elevation')}>

website/src/lib/components/toolbar/tools/Extract.svelte

@@ -20,8 +20,8 @@
     } = $props();
 
     let validSelection = $derived(
-        selection.value.size > 0 &&
-            selection.value.getSelected().every((item) => {
+        $selection.size > 0 &&
+            $selection.getSelected().every((item) => {
                 if (
                     item instanceof ListWaypointsItem ||
                     item instanceof ListWaypointItem ||
@@ -46,7 +46,7 @@
 
 <div class="flex flex-col gap-3 w-full max-w-80 {props.class ?? ''}">
     <Button variant="outline" disabled={!validSelection} onclick={fileActions.extractSelection}>
-        <Ungroup size="16" class="mr-1" />
+        <Ungroup size="16" />
         {i18n._('toolbar.extract.button')}
     </Button>
     <Help link={getURLForLanguage(i18n.lang, '/help/toolbar/extract')}>

website/src/lib/components/toolbar/tools/Merge.svelte

@@ -16,20 +16,20 @@
     import { Group } from '@lucide/svelte';
     import { getURLForLanguage } from '$lib/utils';
     import Shortcut from '$lib/components/Shortcut.svelte';
-    import { gpxStatistics } from '$lib/stores';
     import { selection } from '$lib/logic/selection';
     import { fileStateCollection } from '$lib/logic/file-state';
     import { fileActions } from '$lib/logic/file-actions';
+    import { gpxStatistics } from '$lib/logic/statistics';
 
     let props: {
         class?: string;
     } = $props();
 
     let canMergeTraces = $derived.by(() => {
-        if (selection.value.size > 1) {
+        if ($selection.size > 1) {
             return true;
-        } else if (selection.value.size === 1) {
-            let selected = selection.value.getSelected()[0];
+        } else if ($selection.size === 1) {
+            let selected = $selection.getSelected()[0];
             if (selected instanceof ListFileItem) {
                 let file = fileStateCollection.getFile(selected.getFileId());
                 if (file) {
@@ -47,8 +47,8 @@
     });
 
     let canMergeContents = $derived(
-        selection.value.size > 1 &&
-            selection.value
+        $selection.size > 1 &&
+            $selection
                 .getSelected()
                 .some((item) => item instanceof ListFileItem || item instanceof ListTrackItem)
     );
@@ -86,7 +86,7 @@
             );
         }}
     >
-        <Group size="16" class="mr-1 shrink-0" />
+        <Group size="16" class="shrink-0" />
         {i18n._('toolbar.merge.merge_selection')}
     </Button>
     <Help link={getURLForLanguage(i18n.lang, '/help/toolbar/merge')}>
@@ -95,22 +95,14 @@
         {:else if mergeType === MergeType.TRACES && !canMergeTraces}
             {i18n._('toolbar.merge.help_cannot_merge_traces')}
             {i18n._('toolbar.merge.selection_tip').split('{KEYBOARD_SHORTCUT}')[0]}
-            <Shortcut
-                ctrl={true}
-                click={true}
-                class="inline-flex text-muted-foreground text-xs border rounded p-0.5 gap-0"
-            />
+            <Shortcut ctrl={true} click={true} class="border" />
             {i18n._('toolbar.merge.selection_tip').split('{KEYBOARD_SHORTCUT}')[1]}
         {:else if mergeType === MergeType.CONTENTS && canMergeContents}
             {i18n._('toolbar.merge.help_merge_contents')}
         {:else if mergeType === MergeType.CONTENTS && !canMergeContents}
             {i18n._('toolbar.merge.help_cannot_merge_contents')}
             {i18n._('toolbar.merge.selection_tip').split('{KEYBOARD_SHORTCUT}')[0]}
-            <Shortcut
-                ctrl={true}
-                click={true}
-                class="inline-flex text-muted-foreground text-xs border rounded p-0.5 gap-0"
-            />
+            <Shortcut ctrl={true} click={true} class="border" />
             {i18n._('toolbar.merge.selection_tip').split('{KEYBOARD_SHORTCUT}')[1]}
         {/if}
     </Help>

website/src/lib/components/toolbar/tools/Reduce.svelte

@@ -1,195 +0,0 @@
-<script lang="ts">
-    import { Label } from '$lib/components/ui/label/index.js';
-    import { Button } from '$lib/components/ui/button';
-    import { Slider } from '$lib/components/ui/slider';
-    import {
-        ListItem,
-        ListRootItem,
-        ListTrackSegmentItem,
-    } from '$lib/components/file-list/file-list';
-    import Help from '$lib/components/Help.svelte';
-    import { Funnel } from '@lucide/svelte';
-    import { i18n } from '$lib/i18n.svelte';
-    import WithUnits from '$lib/components/WithUnits.svelte';
-    import { map } from '$lib/components/map/map';
-    import { onDestroy } from 'svelte';
-    import { ramerDouglasPeucker, TrackPoint, type SimplifiedTrackPoint } from 'gpx';
-    import { getURLForLanguage } from '$lib/utils';
-    import type { GeoJSONSource } from 'mapbox-gl';
-    import { selection } from '$lib/logic/selection';
-    import { fileActions } from '$lib/logic/file-actions';
-
-    let props: { class?: string } = $props();
-
-    let sliderValue = $state([50]);
-    let maxPoints = $state(0);
-    let currentPoints = $state(0);
-    const minTolerance = 0.1;
-    const maxTolerance = 10000;
-
-    let validSelection = $derived(
-        selection.value.hasAnyChildren(new ListRootItem(), true, ['waypoints'])
-    );
-    let tolerance = $derived(
-        minTolerance * 2 ** (sliderValue[0] / (100 / Math.log2(maxTolerance / minTolerance)))
-    );
-
-    let simplified = new Map<string, [ListItem, number, SimplifiedTrackPoint[]]>();
-    let unsubscribes = new Map<string, () => void>();
-
-    function update() {
-        maxPoints = 0;
-        currentPoints = 0;
-
-        let data: GeoJSON.FeatureCollection = {
-            type: 'FeatureCollection',
-            features: [],
-        };
-
-        simplified.forEach(([item, maxPts, points], itemFullId) => {
-            maxPoints += maxPts;
-
-            let current = points.filter(
-                (point) => point.distance === undefined || point.distance >= tolerance
-            );
-            currentPoints += current.length;
-
-            data.features.push({
-                type: 'Feature',
-                geometry: {
-                    type: 'LineString',
-                    coordinates: current.map((point) => [
-                        point.point.getLongitude(),
-                        point.point.getLatitude(),
-                    ]),
-                },
-                properties: {},
-            });
-        });
-
-        if (map.value) {
-            let source: GeoJSONSource | undefined = map.value.getSource('simplified');
-            if (source) {
-                source.setData(data);
-            } else {
-                map.value.addSource('simplified', {
-                    type: 'geojson',
-                    data: data,
-                });
-            }
-            if (!map.value.getLayer('simplified')) {
-                map.value.addLayer({
-                    id: 'simplified',
-                    type: 'line',
-                    source: 'simplified',
-                    paint: {
-                        'line-color': 'white',
-                        'line-width': 3,
-                    },
-                });
-            } else {
-                map.value.moveLayer('simplified');
-            }
-        }
-    }
-
-    // $effect(() => {
-    //     if ($fileObservers) {
-    //         unsubscribes.forEach((unsubscribe, fileId) => {
-    //             if (!$fileObservers.has(fileId)) {
-    //                 unsubscribe();
-    //                 unsubscribes.delete(fileId);
-    //             }
-    //         });
-    //         $fileObservers.forEach((fileStore, fileId) => {
-    //             if (!unsubscribes.has(fileId)) {
-    //                 let unsubscribe = derived([fileStore, selection], ([fs, sel]) => [
-    //                     fs,
-    //                     sel,
-    //                 ]).subscribe(([fs, sel]) => {
-    //                     if (fs) {
-    //                         fs.file.forEachSegment((segment, trackIndex, segmentIndex) => {
-    //                             let segmentItem = new ListTrackSegmentItem(
-    //                                 fileId,
-    //                                 trackIndex,
-    //                                 segmentIndex
-    //                             );
-    //                             if (sel.hasAnyParent(segmentItem)) {
-    //                                 let statistics = fs.statistics.getStatisticsFor(segmentItem);
-    //                                 simplified.set(segmentItem.getFullId(), [
-    //                                     segmentItem,
-    //                                     statistics.local.points.length,
-    //                                     ramerDouglasPeucker(statistics.local.points, minTolerance),
-    //                                 ]);
-    //                                 update();
-    //                             } else if (simplified.has(segmentItem.getFullId())) {
-    //                                 simplified.delete(segmentItem.getFullId());
-    //                                 update();
-    //                             }
-    //                         });
-    //                     }
-    //                 });
-    //                 unsubscribes.set(fileId, unsubscribe);
-    //             }
-    //         });
-    //     }
-    // });
-
-    $effect(() => {
-        if (tolerance) {
-            update();
-        }
-    });
-
-    onDestroy(() => {
-        if (map.value) {
-            if (map.value.getLayer('simplified')) {
-                map.value.removeLayer('simplified');
-            }
-            if (map.value.getSource('simplified')) {
-                map.value.removeSource('simplified');
-            }
-        }
-        unsubscribes.forEach((unsubscribe) => unsubscribe());
-        simplified.clear();
-    });
-
-    function reduce() {
-        let itemsAndPoints = new Map<ListItem, TrackPoint[]>();
-        simplified.forEach(([item, maxPts, points], itemFullId) => {
-            itemsAndPoints.set(
-                item,
-                points
-                    .filter((point) => point.distance === undefined || point.distance >= tolerance)
-                    .map((point) => point.point)
-            );
-        });
-        fileActions.reduce(itemsAndPoints);
-    }
-</script>
-
-<div class="flex flex-col gap-3 w-full max-w-80 {props.class ?? ''}">
-    <div class="p-2">
-        <Slider bind:value={sliderValue} min={0} max={100} step={1} type="multiple" />
-    </div>
-    <Label class="flex flex-row justify-between">
-        <span>{i18n._('toolbar.reduce.tolerance')}</span>
-        <WithUnits value={tolerance / 1000} type="distance" decimals={4} class="font-normal" />
-    </Label>
-    <Label class="flex flex-row justify-between">
-        <span>{i18n._('toolbar.reduce.number_of_points')}</span>
-        <span class="font-normal">{currentPoints}/{maxPoints}</span>
-    </Label>
-    <Button variant="outline" disabled={!validSelection} onclick={reduce}>
-        <Funnel size="16" class="mr-1" />
-        {i18n._('toolbar.reduce.button')}
-    </Button>
-
-    <Help link={getURLForLanguage(i18n.lang, '/help/toolbar/minify')}>
-        {#if validSelection}
-            {i18n._('toolbar.reduce.help')}
-        {:else}
-            {i18n._('toolbar.reduce.help_no_selection')}
-        {/if}
-    </Help>
-</div>

website/src/lib/components/toolbar/tools/Time.svelte

@@ -5,7 +5,6 @@
     import { Button } from '$lib/components/ui/button';
     import { Checkbox } from '$lib/components/ui/checkbox';
     import TimePicker from '$lib/components/ui/time-picker/TimePicker.svelte';
-    import { gpxStatistics } from '$lib/stores';
     import {
         distancePerHourToSecondsPerDistance,
         getConvertedVelocity,
@@ -14,7 +13,7 @@
     } from '$lib/units';
     import { CalendarDate, type DateValue } from '@internationalized/date';
     import { CalendarClock, CirclePlay, CircleStop, CircleX, Timer, Zap } from '@lucide/svelte';
-    import { tick } from 'svelte';
+    import { untrack } from 'svelte';
     import { i18n } from '$lib/i18n.svelte';
     import {
         ListFileItem,
@@ -26,20 +25,20 @@
     import { getURLForLanguage } from '$lib/utils';
     import { selection } from '$lib/logic/selection';
     import { settings } from '$lib/logic/settings';
-    import { fileActions } from '$lib/logic/file-actions';
     import { fileActionManager } from '$lib/logic/file-action-manager';
+    import { gpxStatistics } from '$lib/logic/statistics';
 
     let props: {
         class?: string;
     } = $props();
 
-    let startDate: DateValue | undefined = undefined;
-    let startTime: string | undefined = undefined;
-    let endDate: DateValue | undefined = undefined;
-    let endTime: string | undefined = undefined;
-    let movingTime: number | undefined = undefined;
-    let speed: number | undefined = undefined;
-    let artificial = false;
+    let startDate: DateValue | undefined = $state(undefined);
+    let startTime: string | undefined = $state(undefined);
+    let endDate: DateValue | undefined = $state(undefined);
+    let endTime: string | undefined = $state(undefined);
+    let movingTime: number | undefined = $state(undefined);
+    let speed: number | undefined = $state(undefined);
+    let artificial = $state(true);
 
     function toCalendarDate(date: Date): CalendarDate {
         return new CalendarDate(date.getFullYear(), date.getMonth() + 1, date.getDate());
@@ -53,7 +52,7 @@
 
     function setSpeed(value: number) {
         let speedValue = getConvertedVelocity(value);
-        if (velocityUnits.value === 'speed') {
+        if ($velocityUnits === 'speed') {
             speedValue = parseFloat(speedValue.toFixed(2));
         }
         speed = speedValue;
@@ -86,9 +85,11 @@
         }
     }
 
-    // $: if ($gpxStatistics && $velocityUnits && $distanceUnits) {
-    //     setGPXData();
-    // }
+    $effect(() => {
+        if ($gpxStatistics && $velocityUnits && $distanceUnits) {
+            untrack(() => setGPXData());
+        }
+    });
 
     function getDate(date: DateValue, time: string): Date {
         if (date === undefined) {
@@ -139,12 +140,12 @@
         }
 
         let speedValue = speed;
-        if (velocityUnits.value === 'pace') {
+        if ($velocityUnits === 'pace') {
             speedValue = distancePerHourToSecondsPerDistance(speed);
         }
-        if (distanceUnits.value === 'imperial') {
+        if ($distanceUnits === 'imperial') {
             speedValue = milesToKilometers(speedValue);
-        } else if (distanceUnits.value === 'nautical') {
+        } else if ($distanceUnits === 'nautical') {
             speedValue = nauticalMilesToKilometers(speedValue);
         }
         return speedValue;
@@ -178,8 +179,7 @@
     }
 
     let canUpdate = $derived(
-        selection.value.size === 1 &&
-            selection.value.hasAnyChildren(new ListRootItem(), true, ['waypoints'])
+        $selection.size === 1 && $selection.hasAnyChildren(new ListRootItem(), true, ['waypoints'])
     );
 </script>
 
@@ -188,15 +188,15 @@
         <div class="flex flex-row gap-2 justify-center">
             <div class="flex flex-col gap-2 grow">
                 <Label for="speed" class="flex flex-row">
-                    <Zap size="16" class="mr-1" />
-                    {#if velocityUnits.value === 'speed'}
+                    <Zap size="16" />
+                    {#if $velocityUnits === 'speed'}
                         {i18n._('quantities.speed')}
                     {:else}
                         {i18n._('quantities.pace')}
                     {/if}
                 </Label>
                 <div class="flex flex-row gap-1 items-center">
-                    {#if velocityUnits.value === 'speed'}
+                    {#if $velocityUnits === 'speed'}
                         <Input
                             id="speed"
                             type="number"
@@ -204,14 +204,17 @@
                             min={0.01}
                             disabled={!canUpdate}
                             bind:value={speed}
-                            onchange={updateDataFromSpeed}
+                            onchange={() => {
+                                untrack(() => updateDataFromSpeed());
+                            }}
+                            class="text-sm"
                         />
                         <span class="text-sm shrink-0">
-                            {#if distanceUnits.value === 'imperial'}
+                            {#if $distanceUnits === 'imperial'}
                                 {i18n._('units.miles_per_hour')}
-                            {:else if distanceUnits.value === 'metric'}
+                            {:else if $distanceUnits === 'metric'}
                                 {i18n._('units.kilometers_per_hour')}
-                            {:else if distanceUnits.value === 'nautical'}
+                            {:else if $distanceUnits === 'nautical'}
                                 {i18n._('units.knots')}
                             {/if}
                         </span>
@@ -220,14 +223,16 @@
                             bind:value={speed}
                             showHours={false}
                             disabled={!canUpdate}
-                            onChange={updateDataFromSpeed}
+                            onChange={() => {
+                                untrack(() => updateDataFromSpeed());
+                            }}
                         />
                         <span class="text-sm shrink-0">
-                            {#if distanceUnits.value === 'imperial'}
+                            {#if $distanceUnits === 'imperial'}
                                 {i18n._('units.minutes_per_mile')}
-                            {:else if distanceUnits.value === 'metric'}
+                            {:else if $distanceUnits === 'metric'}
                                 {i18n._('units.minutes_per_kilometer')}
-                            {:else if distanceUnits.value === 'nautical'}
+                            {:else if $distanceUnits === 'nautical'}
                                 {i18n._('units.minutes_per_nautical_mile')}
                             {/if}
                         </span>
@@ -236,18 +241,20 @@
             </div>
             <div class="flex flex-col gap-2 grow">
                 <Label for="duration" class="flex flex-row">
-                    <Timer size="16" class="mr-1" />
+                    <Timer size="16" />
                     {i18n._('toolbar.time.total_time')}
                 </Label>
                 <TimePicker
                     bind:value={movingTime}
                     disabled={!canUpdate}
-                    onChange={updateDataFromTotalTime}
+                    onChange={() => {
+                        untrack(() => updateDataFromTotalTime());
+                    }}
                 />
             </div>
         </div>
         <Label class="flex flex-row">
-            <CirclePlay size="16" class="mr-1" />
+            <CirclePlay size="16" />
             {i18n._('toolbar.time.start')}
         </Label>
         <div class="flex flex-row gap-2">
@@ -257,22 +264,23 @@
                 locale={i18n.lang}
                 placeholder={i18n._('toolbar.time.pick_date')}
                 class="w-fit grow"
-                onValueChange={async () => {
-                    await tick();
-                    updateEnd();
+                onchange={() => {
+                    untrack(() => updateEnd());
                 }}
             />
-            <input
+            <Input
                 type="time"
                 step={1}
                 disabled={!canUpdate}
                 bind:value={startTime}
                 class="w-fit"
-                onchange={updateEnd}
+                onchange={() => {
+                    untrack(() => updateEnd());
+                }}
             />
         </div>
         <Label class="flex flex-row">
-            <CircleStop size="16" class="mr-1" />
+            <CircleStop size="16" />
             {i18n._('toolbar.time.end')}
         </Label>
         <div class="flex flex-row gap-2">
@@ -282,18 +290,19 @@
                 locale={i18n.lang}
                 placeholder={i18n._('toolbar.time.pick_date')}
                 class="w-fit grow"
-                onValueChange={async () => {
-                    await tick();
-                    updateStart();
+                onchange={() => {
+                    untrack(() => updateStart());
                 }}
             />
-            <input
+            <Input
                 type="time"
                 step={1}
                 disabled={!canUpdate}
                 bind:value={endTime}
                 class="w-fit"
-                onchange={updateStart}
+                onchange={() => {
+                    untrack(() => updateStart());
+                }}
             />
         </div>
         {#if $gpxStatistics.global.time.moving === 0 || $gpxStatistics.global.time.moving === undefined}
@@ -315,7 +324,8 @@
                 if (
                     startDate === undefined ||
                     startTime === undefined ||
-                    effectiveSpeed === undefined
+                    effectiveSpeed === undefined ||
+                    movingTime === undefined
                 ) {
                     return;
                 }
@@ -332,48 +342,48 @@
                     ratio = $gpxStatistics.global.speed.moving / effectiveSpeed;
                 }
 
-                let item = selection.value.getSelected()[0];
+                let item = $selection.getSelected()[0];
                 let fileId = item.getFileId();
                 fileActionManager.applyToFile(fileId, (file) => {
                     if (item instanceof ListFileItem) {
-                        if (artificial || !$gpxStatistics.global.time.moving) {
+                        if (artificial && !$gpxStatistics.global.time.moving) {
                             file.createArtificialTimestamps(
-                                getDate(startDate, startTime),
-                                movingTime
+                                getDate(startDate!, startTime!),
+                                movingTime!
                             );
                         } else {
                             file.changeTimestamps(
-                                getDate(startDate, startTime),
+                                getDate(startDate!, startTime!),
                                 effectiveSpeed,
                                 ratio
                             );
                         }
                     } else if (item instanceof ListTrackItem) {
-                        if (artificial || !$gpxStatistics.global.time.moving) {
+                        if (artificial && !$gpxStatistics.global.time.moving) {
                             file.createArtificialTimestamps(
-                                getDate(startDate, startTime),
-                                movingTime,
+                                getDate(startDate!, startTime!),
+                                movingTime!,
                                 item.getTrackIndex()
                             );
                         } else {
                             file.changeTimestamps(
-                                getDate(startDate, startTime),
+                                getDate(startDate!, startTime!),
                                 effectiveSpeed,
                                 ratio,
                                 item.getTrackIndex()
                             );
                         }
                     } else if (item instanceof ListTrackSegmentItem) {
-                        if (artificial || !$gpxStatistics.global.time.moving) {
+                        if (artificial && !$gpxStatistics.global.time.moving) {
                             file.createArtificialTimestamps(
-                                getDate(startDate, startTime),
-                                movingTime,
+                                getDate(startDate!, startTime!),
+                                movingTime!,
                                 item.getTrackIndex(),
                                 item.getSegmentIndex()
                             );
                         } else {
                             file.changeTimestamps(
-                                getDate(startDate, startTime),
+                                getDate(startDate!, startTime!),
                                 effectiveSpeed,
                                 ratio,
                                 item.getTrackIndex(),
@@ -384,10 +394,10 @@
                 });
             }}
         >
-            <CalendarClock size="16" class="mr-1 shrink-0" />
+            <CalendarClock size="16" class="shrink-0" />
             {i18n._('toolbar.time.update')}
         </Button>
-        <Button variant="outline" onclick={setGPXData}>
+        <Button variant="outline" size="icon" onclick={setGPXData}>
             <CircleX size="16" />
         </Button>
     </div>
@@ -399,15 +409,3 @@
         {/if}
     </Help>
 </div>
-
-<style lang="postcss">
-    @reference "../../../../app.css";
-
-    div :global(input[type='time']) {
-        /*
-        Style copy-pasted from shadcn-svelte Input.
-        Needed to use native time input to avoid a bug with 2-level bind:value.
-        */
-        @apply flex h-10 rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50;
-    }
-</style>

website/src/lib/components/toolbar/tools/reduce/Reduce.svelte

@@ -0,0 +1,61 @@
+<script lang="ts">
+    import { Label } from '$lib/components/ui/label/index.js';
+    import { Button } from '$lib/components/ui/button';
+    import { Slider } from '$lib/components/ui/slider';
+    import { ListRootItem } from '$lib/components/file-list/file-list';
+    import Help from '$lib/components/Help.svelte';
+    import { Funnel } from '@lucide/svelte';
+    import { i18n } from '$lib/i18n.svelte';
+    import WithUnits from '$lib/components/WithUnits.svelte';
+    import { onDestroy } from 'svelte';
+    import { getURLForLanguage } from '$lib/utils';
+    import { selection } from '$lib/logic/selection';
+    import { minTolerance, ReducedGPXLayerCollection, tolerance } from './utils.svelte';
+
+    let props: { class?: string } = $props();
+
+    let sliderValue = $state([50]);
+    const maxTolerance = 10000;
+
+    let validSelection = $derived(
+        $selection.hasAnyChildren(new ListRootItem(), true, ['waypoints'])
+    );
+
+    let reducedLayers = new ReducedGPXLayerCollection();
+
+    $effect(() => {
+        tolerance.set(
+            minTolerance * 2 ** (sliderValue[0] / (100 / Math.log2(maxTolerance / minTolerance)))
+        );
+    });
+
+    onDestroy(() => {
+        reducedLayers.destroy();
+    });
+</script>
+
+<div class="flex flex-col gap-3 w-full max-w-80 {props.class ?? ''}">
+    <div class="p-2">
+        <Slider bind:value={sliderValue} min={0} max={100} step={1} type="multiple" />
+    </div>
+    <Label class="flex flex-row justify-between">
+        <span>{i18n._('toolbar.reduce.tolerance')}</span>
+        <WithUnits value={$tolerance / 1000} type="distance" decimals={4} class="font-normal" />
+    </Label>
+    <Label class="flex flex-row justify-between">
+        <span>{i18n._('toolbar.reduce.number_of_points')}</span>
+        <span class="font-normal">{reducedLayers.currentPoints}/{reducedLayers.maxPoints}</span>
+    </Label>
+    <Button variant="outline" disabled={!validSelection} onclick={() => reducedLayers.reduce()}>
+        <Funnel size="16" />
+        {i18n._('toolbar.reduce.button')}
+    </Button>
+
+    <Help link={getURLForLanguage(i18n.lang, '/help/toolbar/minify')}>
+        {#if validSelection}
+            {i18n._('toolbar.reduce.help')}
+        {:else}
+            {i18n._('toolbar.reduce.help_no_selection')}
+        {/if}
+    </Help>
+</div>

website/src/lib/components/toolbar/tools/reduce/utils.svelte.ts

@@ -0,0 +1,201 @@
+import { ListItem, ListTrackSegmentItem } from '$lib/components/file-list/file-list';
+import { ANCHOR_LAYER_KEY, map } from '$lib/components/map/map';
+import { fileActions } from '$lib/logic/file-actions';
+import { GPXFileStateCollectionObserver, type GPXFileState } from '$lib/logic/file-state';
+import { selection } from '$lib/logic/selection';
+import { ramerDouglasPeucker, TrackPoint, type SimplifiedTrackPoint } from 'gpx';
+import type { GeoJSONSource } from 'mapbox-gl';
+import { get, writable } from 'svelte/store';
+
+export const minTolerance = 0.1;
+
+export class ReducedGPXLayer {
+    private _fileState: GPXFileState;
+    private _updateSimplified: (
+        itemId: string,
+        data: [ListItem, number, SimplifiedTrackPoint[]]
+    ) => void;
+    private _unsubscribes: (() => void)[] = [];
+
+    constructor(
+        fileState: GPXFileState,
+        updateSimplified: (itemId: string, data: [ListItem, number, SimplifiedTrackPoint[]]) => void
+    ) {
+        this._fileState = fileState;
+        this._updateSimplified = updateSimplified;
+        this._unsubscribes.push(this._fileState.subscribe(() => this.update()));
+    }
+
+    update() {
+        const file = this._fileState.file;
+        if (!file) {
+            return;
+        }
+        file.forEachSegment((segment, trackIndex, segmentIndex) => {
+            let segmentItem = new ListTrackSegmentItem(file._data.id, trackIndex, segmentIndex);
+            this._updateSimplified(segmentItem.getFullId(), [
+                segmentItem,
+                segment.trkpt.length,
+                ramerDouglasPeucker(segment.trkpt, minTolerance),
+            ]);
+        });
+    }
+
+    destroy() {
+        this._unsubscribes.forEach((unsubscribe) => unsubscribe());
+    }
+}
+
+export const tolerance = writable<number>(0);
+
+export class ReducedGPXLayerCollection {
+    private _layers: Map<string, ReducedGPXLayer> = new Map();
+    private _simplified: Map<string, [ListItem, number, SimplifiedTrackPoint[]]>;
+    private _currentPoints = $state(0);
+    private _maxPoints = $state(0);
+    private _fileStateCollectionObserver: GPXFileStateCollectionObserver;
+    private _updateSimplified = this.updateSimplified.bind(this);
+    private _unsubscribes: (() => void)[] = [];
+
+    constructor() {
+        this._layers = new Map();
+        this._simplified = new Map();
+        this._fileStateCollectionObserver = new GPXFileStateCollectionObserver(
+            (newFiles) => {
+                newFiles.forEach((fileState, fileId) => {
+                    this._layers.set(
+                        fileId,
+                        new ReducedGPXLayer(fileState, this._updateSimplified)
+                    );
+                });
+            },
+            (fileId) => {
+                this._layers.get(fileId)?.destroy();
+                this._layers.delete(fileId);
+            },
+            () => {
+                this._layers.forEach((layer) => layer.destroy());
+                this._layers.clear();
+            }
+        );
+        this._unsubscribes.push(selection.subscribe(() => this.update()));
+        this._unsubscribes.push(tolerance.subscribe(() => this.update()));
+    }
+
+    updateSimplified(itemId: string, data: [ListItem, number, SimplifiedTrackPoint[]]) {
+        this._simplified.set(itemId, data);
+        if (get(selection).hasAnyParent(data[0])) {
+            this.update();
+        }
+    }
+
+    removeSimplified(itemId: string) {
+        if (this._simplified.delete(itemId)) {
+            this.update();
+        }
+    }
+
+    update() {
+        this._currentPoints = 0;
+        this._maxPoints = 0;
+
+        let data: GeoJSON.FeatureCollection = {
+            type: 'FeatureCollection',
+            features: [],
+        };
+
+        this._simplified.forEach(([item, maxPts, points], itemFullId) => {
+            if (!get(selection).hasAnyParent(item)) {
+                return;
+            }
+
+            this._maxPoints += maxPts;
+
+            let current = points.filter(
+                (point) => point.distance === undefined || point.distance >= get(tolerance)
+            );
+            this._currentPoints += current.length;
+
+            data.features.push({
+                type: 'Feature',
+                geometry: {
+                    type: 'LineString',
+                    coordinates: current.map((point) => [
+                        point.point.getLongitude(),
+                        point.point.getLatitude(),
+                    ]),
+                },
+                properties: {},
+            });
+        });
+
+        const map_ = get(map);
+        if (!map_) {
+            return;
+        }
+
+        let source: GeoJSONSource | undefined = map_.getSource('simplified');
+        if (source) {
+            source.setData(data);
+        } else {
+            map_.addSource('simplified', {
+                type: 'geojson',
+                data: data,
+            });
+        }
+        if (!map_.getLayer('simplified')) {
+            map_.addLayer(
+                {
+                    id: 'simplified',
+                    type: 'line',
+                    source: 'simplified',
+                    paint: {
+                        'line-color': 'white',
+                        'line-width': 3,
+                    },
+                },
+                ANCHOR_LAYER_KEY.interactions
+            );
+        }
+    }
+
+    reduce() {
+        let itemsAndPoints = new Map<ListItem, TrackPoint[]>();
+        this._simplified.forEach(([item, maxPts, points], itemFullId) => {
+            itemsAndPoints.set(
+                item,
+                points
+                    .filter(
+                        (point) => point.distance === undefined || point.distance >= get(tolerance)
+                    )
+                    .map((point) => point.point)
+            );
+        });
+        fileActions.reduce(itemsAndPoints);
+    }
+
+    get currentPoints() {
+        return this._currentPoints;
+    }
+
+    get maxPoints() {
+        return this._maxPoints;
+    }
+
+    destroy() {
+        this._fileStateCollectionObserver.destroy();
+        this._unsubscribes.forEach((unsubscribe) => unsubscribe());
+
+        const map_ = get(map);
+        if (!map_) {
+            return;
+        }
+
+        if (map_.getLayer('simplified')) {
+            map_.removeLayer('simplified');
+        }
+        if (map_.getSource('simplified')) {
+            map_.removeSource('simplified');
+        }
+    }
+}

website/src/lib/components/toolbar/tools/routing/Routing.svelte

@@ -15,15 +15,14 @@
         Route,
         TriangleAlert,
         ArrowRightLeft,
-        Home,
+        House,
         RouteOff,
         Repeat,
         SquareArrowUpLeft,
         SquareArrowOutDownRight,
     } from '@lucide/svelte';
-    import { brouterProfiles } from '$lib/components/toolbar/tools/routing/utils.svelte';
+    import { brouterProfiles } from '$lib/components/toolbar/tools/routing/routing';
     import { i18n } from '$lib/i18n.svelte';
-    // import { RoutingControls } from './RoutingControls';
     import { slide } from 'svelte/transition';
     import {
         ListFileItem,
@@ -32,14 +31,16 @@
         ListTrackSegmentItem,
         type ListItem,
     } from '$lib/components/file-list/file-list';
-    import { getURLForLanguage, resetCursor, setCrosshairCursor } from '$lib/utils';
+    import { getURLForLanguage } from '$lib/utils';
     import { onDestroy, onMount } from 'svelte';
     import { TrackPoint } from 'gpx';
     import { settings } from '$lib/logic/settings';
     import { map } from '$lib/components/map/map';
-    import { fileStateCollection } from '$lib/logic/file-state';
+    import { fileStateCollection, GPXFileStateCollectionObserver } from '$lib/logic/file-state';
     import { selection } from '$lib/logic/selection';
     import { fileActions, getFileIds, newGPXFile } from '$lib/logic/file-actions';
+    import { mapCursor, MapCursorState } from '$lib/logic/map-cursor';
+    import { RoutingControls, routingControls } from './routing-controls';
 
     let {
         minimized = $bindable(false),
@@ -55,34 +56,9 @@
         class?: string;
     } = $props();
 
-    let selectedItem: ListItem | null = null;
-
     const { privateRoads, routing, routingProfile } = settings;
 
-    // $: if (map && popup && popupElement) {
-    //     // remove controls for deleted files
-    //     routingControls.forEach((controls, fileId) => {
-    //         if (!$fileObservers.has(fileId)) {
-    //             controls.destroy();
-    //             routingControls.delete(fileId);
-
-    //             if (selectedItem && selectedItem.getFileId() === fileId) {
-    //                 selectedItem = null;
-    //             }
-    //         } else if ($map !== controls.map) {
-    //             controls.updateMap($map);
-    //         }
-    //     });
-    //     // add controls for new files
-    //     fileStateCollection.files.forEach((file, fileId) => {
-    //         if (!routingControls.has(fileId)) {
-    //             routingControls.set(
-    //                 fileId,
-    //                 new RoutingControls($map, fileId, file, popup, popupElement)
-    //             );
-    //         }
-    //     });
-    // }
+    let fileStateCollectionObserver: GPXFileStateCollectionObserver;
 
     let validSelection = $derived(
         $selection.hasAnyChildren(new ListRootItem(), true, ['waypoints'])
@@ -101,36 +77,63 @@
             ]);
             file._data.id = getFileIds(1)[0];
             fileActions.add(file);
-            // selectFileWhenLoaded(file._data.id);
+            selection.selectFileWhenLoaded(file._data.id);
         }
     }
 
     onMount(() => {
-        // setCrosshairCursor();
-        $map?.on('click', createFileWithPoint);
+        if ($map && popup && popupElement) {
+            fileStateCollectionObserver = new GPXFileStateCollectionObserver(
+                (newFiles) => {
+                    newFiles.forEach((fileState, fileId) => {
+                        routingControls.set(
+                            fileId,
+                            new RoutingControls(fileId, fileState, popup, popupElement)
+                        );
+                    });
+                },
+                (fileId) => {
+                    const controls = routingControls.get(fileId);
+                    if (controls) {
+                        controls.destroy();
+                        routingControls.delete(fileId);
+                    }
+                },
+                () => {
+                    routingControls.forEach((controls) => controls.destroy());
+                    routingControls.clear();
+                }
+            );
+
+            mapCursor.notify(MapCursorState.TOOL_WITH_CROSSHAIR, true);
+            $map.on('click', createFileWithPoint);
+        }
     });
 
     onDestroy(() => {
-        // resetCursor();
-        $map?.off('click', createFileWithPoint);
+        if ($map) {
+            if (fileStateCollectionObserver) {
+                fileStateCollectionObserver.destroy();
+            }
 
-        // routingControls.forEach((controls) => controls.destroy());
-        // routingControls.clear();
+            mapCursor.notify(MapCursorState.TOOL_WITH_CROSSHAIR, false);
+            $map.off('click', createFileWithPoint);
+        }
     });
 </script>
 
 {#if minimizable && minimized}
     <div class="-m-1.5 -mb-2">
-        <Button variant="ghost" class="px-1 h-[26px]" onclick={() => (minimized = false)}>
-            <SquareArrowOutDownRight size="18" />
+        <Button variant="ghost" size="icon-sm" class="size-6" onclick={() => (minimized = false)}>
+            <SquareArrowOutDownRight size="18" class="size-4.5" />
         </Button>
     </div>
 {:else}
-    <div class="flex flex-col gap-3 w-full max-w-80 animate-in animate-out {className ?? ''}">
+    <div class="flex flex-col gap-3 w-full max-w-80 {className ?? ''}">
         <div class="flex flex-col gap-3">
-            <Label class="flex flex-row justify-between items-center gap-2">
+            <Label class="justify-between">
                 <span class="flex flex-row items-center gap-1">
-                    {#if routing.value}
+                    {#if $routing}
                         <Route size="16" />
                     {:else}
                         <RouteOff size="16" />
@@ -138,28 +141,30 @@
                     {i18n._('toolbar.routing.use_routing')}
                 </span>
                 <Tooltip label={i18n._('toolbar.routing.use_routing_tooltip')}>
-                    <Switch class="scale-90" bind:checked={routing.value} />
-                    <Shortcut slot="extra" key="F5" />
+                    <Switch bind:checked={$routing} />
+                    {#snippet extra()}
+                        <Shortcut key="F5" />
+                    {/snippet}
                 </Tooltip>
             </Label>
-            {#if routing.value}
+            {#if $routing}
                 <div class="flex flex-col gap-3" in:slide>
-                    <Label class="flex flex-row justify-between items-center gap-2">
+                    <Label class="justify-between">
                         <span class="shrink-0 flex flex-row items-center gap-1">
-                            {#if routingProfile.value.includes('bike') || routingProfile.value.includes('motorcycle')}
+                            {#if $routingProfile.includes('bike') || $routingProfile.includes('motorcycle')}
                                 <Bike size="16" />
-                            {:else if routingProfile.value.includes('foot')}
+                            {:else if $routingProfile.includes('foot')}
                                 <Footprints size="16" />
-                            {:else if routingProfile.value.includes('water')}
+                            {:else if $routingProfile.includes('water')}
                                 <Waves size="16" />
-                            {:else if routingProfile.value.includes('railway')}
+                            {:else if $routingProfile.includes('railway')}
                                 <TrainFront size="16" />
                             {/if}
                             {i18n._('toolbar.routing.activity')}
                         </span>
-                        <Select.Root type="single" bind:value={routingProfile.value}>
-                            <Select.Trigger class="h-8 grow">
-                                {i18n._(`toolbar.routing.activities.${routingProfile.value}`)}
+                        <Select.Root type="single" bind:value={$routingProfile}>
+                            <Select.Trigger class="grow" size="sm">
+                                {i18n._(`toolbar.routing.activities.${$routingProfile}`)}
                             </Select.Trigger>
                             <Select.Content>
                                 {#each Object.keys(brouterProfiles) as profile}
@@ -172,12 +177,12 @@
                             </Select.Content>
                         </Select.Root>
                     </Label>
-                    <Label class="flex flex-row justify-between items-center gap-2">
+                    <Label class="justify-between">
                         <span class="flex flex-row gap-1">
                             <TriangleAlert size="16" />
                             {i18n._('toolbar.routing.allow_private')}
                         </span>
-                        <Switch class="scale-90" bind:checked={privateRoads.value} />
+                        <Switch bind:checked={$privateRoads} />
                     </Label>
                 </div>
             {/if}
@@ -186,16 +191,16 @@
             <ButtonWithTooltip
                 label={i18n._('toolbar.routing.reverse.tooltip')}
                 variant="outline"
-                class="flex flex-row gap-1 text-xs px-2"
+                class="gap-1 text-xs"
                 disabled={!validSelection}
                 onclick={fileActions.reverseSelection}
             >
-                <ArrowRightLeft size="12" />{i18n._('toolbar.routing.reverse.button')}
+                <ArrowRightLeft class="size-3" />{i18n._('toolbar.routing.reverse.button')}
             </ButtonWithTooltip>
             <ButtonWithTooltip
                 label={i18n._('toolbar.routing.route_back_to_start.tooltip')}
                 variant="outline"
-                class="flex flex-row gap-1 text-xs px-2"
+                class="gap-1 text-xs"
                 disabled={!validSelection}
                 onclick={() => {
                     const selected = selection.getOrderedSelection();
@@ -218,24 +223,24 @@
 
                             if (start !== undefined) {
                                 const lastFileId = selected[selected.length - 1].getFileId();
-                                // routingControls
-                                //     .get(lastFileId)
-                                //     ?.appendAnchorWithCoordinates(start.getCoordinates());
+                                routingControls
+                                    .get(lastFileId)
+                                    ?.appendAnchorWithCoordinates(start.getCoordinates());
                             }
                         }
                     }
                 }}
             >
-                <Home size="12" />{i18n._('toolbar.routing.route_back_to_start.button')}
+                <House class="size-3" />{i18n._('toolbar.routing.route_back_to_start.button')}
             </ButtonWithTooltip>
             <ButtonWithTooltip
                 label={i18n._('toolbar.routing.round_trip.tooltip')}
                 variant="outline"
-                class="flex flex-row gap-1 text-xs px-2"
+                class="gap-1 text-xs"
                 disabled={!validSelection}
                 onclick={fileActions.createRoundTripForSelection}
             >
-                <Repeat size="12" />{i18n._('toolbar.routing.round_trip.button')}
+                <Repeat class="size-3" />{i18n._('toolbar.routing.round_trip.button')}
             </ButtonWithTooltip>
         </div>
         <div class="w-full flex flex-row gap-2 items-end justify-between">
@@ -248,7 +253,8 @@
             </Help>
             <Button
                 variant="ghost"
-                class="px-1 h-6"
+                size="icon-sm"
+                class="size-6"
                 onclick={() => {
                     if (minimizable) {
                         minimized = true;

website/src/lib/components/toolbar/tools/routing/RoutingControlPopup.svelte

@@ -2,33 +2,37 @@
     import * as Card from '$lib/components/ui/card';
     import { Button } from '$lib/components/ui/button';
     import Shortcut from '$lib/components/Shortcut.svelte';
-    import { canChangeStart } from './RoutingControls';
+    import { canChangeStart } from './routing-controls';
     import { CirclePlay, Trash2 } from '@lucide/svelte';
 
     import { i18n } from '$lib/i18n.svelte';
 
-    export let element: HTMLElement;
+    let {
+        element = $bindable(),
+    }: {
+        element: HTMLElement | undefined;
+    } = $props();
 </script>
 
 <div bind:this={element} class="hidden">
-    <Card.Root class="border-none shadow-md text-base">
+    <Card.Root class="border-none shadow-md text-base p-0 gap-0 rounded-lg">
         <Card.Content class="flex flex-col p-1">
             {#if $canChangeStart}
                 <Button
                     class="w-full px-2 py-1 h-6 justify-start"
                     variant="ghost"
-                    onclick={() => element.dispatchEvent(new CustomEvent('change-start'))}
+                    onclick={() => element?.dispatchEvent(new CustomEvent('change-start'))}
                 >
-                    <CirclePlay size="16" class="mr-1" />
+                    <CirclePlay size="16" />
                     {i18n._('toolbar.routing.start_loop_here')}
                 </Button>
             {/if}
             <Button
                 class="w-full px-2 py-1 h-6 justify-start"
                 variant="ghost"
-                onclick={() => element.dispatchEvent(new CustomEvent('delete'))}
+                onclick={() => element?.dispatchEvent(new CustomEvent('delete'))}
             >
-                <Trash2 size="16" class="mr-1" />
+                <Trash2 size="16" />
                 {i18n._('menu.delete')}
                 <Shortcut shift={true} click={true} />
             </Button>

website/src/lib/components/toolbar/tools/routing/routing-controls.ts

@@ -1,17 +1,25 @@
 import { distance, type Coordinates, TrackPoint, TrackSegment, Track, projectedPoint } from 'gpx';
 import { get, writable, type Readable } from 'svelte/store';
 import mapboxgl from 'mapbox-gl';
-import { route } from './utils.svelte';
+import { route } from './routing';
 import { toast } from 'svelte-sonner';
 import {
     ListFileItem,
     ListTrackItem,
     ListTrackSegmentItem,
 } from '$lib/components/file-list/file-list';
-import { getClosestLinePoint, resetCursor, setGrabbingCursor } from '$lib/utils';
+import { getClosestLinePoint } from '$lib/utils';
 import type { GPXFileWithStatistics } from '$lib/logic/statistics-tree';
+import { mapCursor, MapCursorState } from '$lib/logic/map-cursor';
+import { settings } from '$lib/logic/settings';
+import { selection } from '$lib/logic/selection';
+import { currentTool, Tool } from '$lib/components/toolbar/tools';
+import { streetViewEnabled } from '$lib/components/map/street-view-control/utils';
+import { fileActionManager } from '$lib/logic/file-action-manager';
+import { i18n } from '$lib/i18n.svelte';
+import { map } from '$lib/components/map/map';
 
-// const { streetViewSource } = settings;
+const { streetViewSource } = settings;
 export const canChangeStart = writable(false);
 
 function stopPropagation(e: any) {
@@ -20,7 +28,6 @@ function stopPropagation(e: any) {
 
 export class RoutingControls {
     active: boolean = false;
-    map: mapboxgl.Map;
     fileId: string = '';
     file: Readable<GPXFileWithStatistics | undefined>;
     anchors: AnchorWithMarker[] = [];
@@ -39,13 +46,11 @@ export class RoutingControls {
     appendAnchorBinded: (e: mapboxgl.MapMouseEvent) => void = this.appendAnchor.bind(this);
 
     constructor(
-        map: mapboxgl.Map,
         fileId: string,
         file: Readable<GPXFileWithStatistics | undefined>,
         popup: mapboxgl.Popup,
         popupElement: HTMLElement
     ) {
-        this.map = map;
         this.fileId = fileId;
         this.file = file;
         this.popup = popup;
@@ -88,12 +93,17 @@ export class RoutingControls {
     }
 
     add() {
+        const map_ = get(map);
+        if (!map_) {
+            return;
+        }
+
         this.active = true;
 
-        this.map.on('move', this.toggleAnchorsForZoomLevelAndBoundsBinded);
-        this.map.on('click', this.appendAnchorBinded);
-        this.map.on('mousemove', this.fileId, this.showTemporaryAnchorBinded);
-        this.map.on('click', this.fileId, stopPropagation);
+        map_.on('move', this.toggleAnchorsForZoomLevelAndBoundsBinded);
+        map_.on('click', this.appendAnchorBinded);
+        map_.on('mousemove', this.fileId, this.showTemporaryAnchorBinded);
+        map_.on('click', this.fileId, stopPropagation);
 
         this.fileUnsubscribe = this.file.subscribe(this.updateControls.bind(this));
     }
@@ -141,25 +151,26 @@ export class RoutingControls {
     }
 
     remove() {
+        const map_ = get(map);
+        if (!map_) {
+            return;
+        }
+
         this.active = false;
 
         for (let anchor of this.anchors) {
             anchor.marker.remove();
         }
-        this.map.off('move', this.toggleAnchorsForZoomLevelAndBoundsBinded);
-        this.map.off('click', this.appendAnchorBinded);
-        this.map.off('mousemove', this.fileId, this.showTemporaryAnchorBinded);
-        this.map.off('click', this.fileId, stopPropagation);
-        this.map.off('mousemove', this.updateTemporaryAnchorBinded);
+        map_.off('move', this.toggleAnchorsForZoomLevelAndBoundsBinded);
+        map_.off('click', this.appendAnchorBinded);
+        map_.off('mousemove', this.fileId, this.showTemporaryAnchorBinded);
+        map_.off('click', this.fileId, stopPropagation);
+        map_.off('mousemove', this.updateTemporaryAnchorBinded);
         this.temporaryAnchor.marker.remove();
 
         this.fileUnsubscribe();
     }
 
-    updateMap(map: mapboxgl.Map) {
-        this.map = map;
-    }
-
     createAnchor(
         point: TrackPoint,
         segment: TrackSegment,
@@ -186,13 +197,13 @@ export class RoutingControls {
 
         marker.on('dragstart', (e) => {
             this.lastDragEvent = Date.now();
-            setGrabbingCursor();
+            mapCursor.notify(MapCursorState.TRACKPOINT_DRAGGING, true);
             element.classList.remove('cursor-pointer');
             element.classList.add('cursor-grabbing');
         });
         marker.on('dragend', (e) => {
             this.lastDragEvent = Date.now();
-            resetCursor();
+            mapCursor.notify(MapCursorState.TRACKPOINT_DRAGGING, false);
             element.classList.remove('cursor-grabbing');
             element.classList.add('cursor-pointer');
             this.moveAnchor(anchor);
@@ -255,19 +266,24 @@ export class RoutingControls {
     }
 
     toggleAnchorsForZoomLevelAndBounds() {
+        const map_ = get(map);
+        if (!map_) {
+            return;
+        }
+
         // Show markers only if they are in the current zoom level and bounds
         this.shownAnchors.splice(0, this.shownAnchors.length);
 
-        let center = this.map.getCenter();
-        let bottomLeft = this.map.unproject([0, this.map.getCanvas().height]);
-        let topRight = this.map.unproject([this.map.getCanvas().width, 0]);
+        let center = map_.getCenter();
+        let bottomLeft = map_.unproject([0, map_.getCanvas().height]);
+        let topRight = map_.unproject([map_.getCanvas().width, 0]);
         let diagonal = bottomLeft.distanceTo(topRight);
 
-        let zoom = this.map.getZoom();
+        let zoom = map_.getZoom();
         this.anchors.forEach((anchor) => {
             anchor.inZoom = anchor.point._data.zoom <= zoom;
             if (anchor.inZoom && center.distanceTo(anchor.marker.getLngLat()) < diagonal) {
-                anchor.marker.addTo(this.map);
+                anchor.marker.addTo(map_);
                 this.shownAnchors.push(anchor);
             } else {
                 anchor.marker.remove();
@@ -276,6 +292,11 @@ export class RoutingControls {
     }
 
     showTemporaryAnchor(e: any) {
+        const map_ = get(map);
+        if (!map_) {
+            return;
+        }
+
         if (this.temporaryAnchor.marker.getElement().classList.contains('cursor-grabbing')) {
             // Do not not change the source point if it is already being dragged
             return;
@@ -305,25 +326,30 @@ export class RoutingControls {
             lat: e.lngLat.lat,
             lon: e.lngLat.lng,
         });
-        this.temporaryAnchor.marker.setLngLat(e.lngLat).addTo(this.map);
+        this.temporaryAnchor.marker.setLngLat(e.lngLat).addTo(map_);
 
-        this.map.on('mousemove', this.updateTemporaryAnchorBinded);
+        map_.on('mousemove', this.updateTemporaryAnchorBinded);
     }
 
     updateTemporaryAnchor(e: any) {
+        const map_ = get(map);
+        if (!map_) {
+            return;
+        }
+
         if (this.temporaryAnchor.marker.getElement().classList.contains('cursor-grabbing')) {
             // Do not hide if it is being dragged, and stop listening for mousemove
-            this.map.off('mousemove', this.updateTemporaryAnchorBinded);
+            map_.off('mousemove', this.updateTemporaryAnchorBinded);
             return;
         }
 
         if (
-            e.point.dist(this.map.project(this.temporaryAnchor.point.getCoordinates())) > 20 ||
+            e.point.dist(map_.project(this.temporaryAnchor.point.getCoordinates())) > 20 ||
             this.temporaryAnchorCloseToOtherAnchor(e)
         ) {
             // Hide if too far from the layer
             this.temporaryAnchor.marker.remove();
-            this.map.off('mousemove', this.updateTemporaryAnchorBinded);
+            map_.off('mousemove', this.updateTemporaryAnchorBinded);
             return;
         }
 
@@ -331,8 +357,13 @@ export class RoutingControls {
     }
 
     temporaryAnchorCloseToOtherAnchor(e: any) {
+        const map_ = get(map);
+        if (!map_) {
+            return false;
+        }
+
         for (let anchor of this.shownAnchors) {
-            if (e.point.dist(this.map.project(anchor.marker.getLngLat())) < 10) {
+            if (e.point.dist(map_.project(anchor.marker.getLngLat())) < 10) {
                 return true;
             }
         }
@@ -463,7 +494,7 @@ export class RoutingControls {
                         segment.trkpt[before].time && segment.trkpt[before + 1].time
                             ? new Date(
                                   (1 - ratio) * segment.trkpt[before].time.getTime() +
-                                      ratio * segment.trkpt[before + 1].time.getTime()
+                                      ratio * segment.trkpt[before + 1].time!.getTime()
                               )
                             : undefined;
                     point._data = {
@@ -482,7 +513,7 @@ export class RoutingControls {
         });
 
         if (minInfo.trackIndex !== -1) {
-            dbUtils.applyToFile(this.fileId, (file) =>
+            fileActionManager.applyToFile(this.fileId, (file) =>
                 file.replaceTrackPoints(
                     minInfo.trackIndex,
                     minInfo.segmentIndex,
@@ -506,12 +537,12 @@ export class RoutingControls {
 
         if (previousAnchor === null && nextAnchor === null) {
             // Only one point, remove it
-            dbUtils.applyToFile(this.fileId, (file) =>
+            fileActionManager.applyToFile(this.fileId, (file) =>
                 file.replaceTrackPoints(anchor.trackIndex, anchor.segmentIndex, 0, 0, [])
             );
-        } else if (previousAnchor === null) {
+        } else if (previousAnchor === null && nextAnchor !== null) {
             // First point, remove trackpoints until nextAnchor
-            dbUtils.applyToFile(this.fileId, (file) =>
+            fileActionManager.applyToFile(this.fileId, (file) =>
                 file.replaceTrackPoints(
                     anchor.trackIndex,
                     anchor.segmentIndex,
@@ -520,9 +551,9 @@ export class RoutingControls {
                     []
                 )
             );
-        } else if (nextAnchor === null) {
+        } else if (nextAnchor === null && previousAnchor !== null) {
             // Last point, remove trackpoints from previousAnchor
-            dbUtils.applyToFile(this.fileId, (file) => {
+            fileActionManager.applyToFile(this.fileId, (file) => {
                 let segment = file.getSegment(anchor.trackIndex, anchor.segmentIndex);
                 file.replaceTrackPoints(
                     anchor.trackIndex,
@@ -532,7 +563,7 @@ export class RoutingControls {
                     []
                 );
             });
-        } else {
+        } else if (previousAnchor !== null && nextAnchor !== null) {
             // Route between previousAnchor and nextAnchor
             this.routeBetweenAnchors(
                 [previousAnchor, nextAnchor],
@@ -558,7 +589,7 @@ export class RoutingControls {
         ).global.speed.moving;
 
         let segment = anchor.segment;
-        dbUtils.applyToFile(this.fileId, (file) => {
+        fileActionManager.applyToFile(this.fileId, (file) => {
             file.replaceTrackPoints(
                 anchor.trackIndex,
                 anchor.segmentIndex,
@@ -590,7 +621,7 @@ export class RoutingControls {
 
     async appendAnchorWithCoordinates(coordinates: Coordinates) {
         // Add a new anchor to the end of the last segment
-        let selected = getOrderedSelection();
+        let selected = selection.getOrderedSelection();
         if (selected.length === 0 || selected[selected.length - 1].getFileId() !== this.fileId) {
             return;
         }
@@ -605,7 +636,7 @@ export class RoutingControls {
         newPoint._data.zoom = 0;
 
         if (!lastAnchor) {
-            dbUtils.applyToFile(this.fileId, (file) => {
+            fileActionManager.applyToFile(this.fileId, (file) => {
                 let trackIndex = file.trk.length > 0 ? file.trk.length - 1 : 0;
                 if (item instanceof ListTrackItem || item instanceof ListTrackSegmentItem) {
                     trackIndex = item.getTrackIndex();
@@ -686,7 +717,7 @@ export class RoutingControls {
 
         if (anchors.length === 1) {
             // Only one anchor, update the point in the segment
-            dbUtils.applyToFile(this.fileId, (file) =>
+            fileActionManager.applyToFile(this.fileId, (file) =>
                 file.replaceTrackPoints(anchors[0].trackIndex, anchors[0].segmentIndex, 0, 0, [
                     new TrackPoint({
                         attributes: targetCoordinates[0],
@@ -701,13 +732,13 @@ export class RoutingControls {
             response = await route(targetCoordinates);
         } catch (e: any) {
             if (e.message.includes('from-position not mapped in existing datafile')) {
-                toast.error(get(_)('toolbar.routing.error.from'));
+                toast.error(i18n._('toolbar.routing.error.from'));
             } else if (e.message.includes('via1-position not mapped in existing datafile')) {
-                toast.error(get(_)('toolbar.routing.error.via'));
+                toast.error(i18n._('toolbar.routing.error.via'));
             } else if (e.message.includes('to-position not mapped in existing datafile')) {
-                toast.error(get(_)('toolbar.routing.error.to'));
+                toast.error(i18n._('toolbar.routing.error.to'));
             } else if (e.message.includes('Time-out')) {
-                toast.error(get(_)('toolbar.routing.error.timeout'));
+                toast.error(i18n._('toolbar.routing.error.timeout'));
             } else {
                 toast.error(e.message);
             }
@@ -762,24 +793,25 @@ export class RoutingControls {
                 replacingDistance +=
                     distance(response[i - 1].getCoordinates(), response[i].getCoordinates()) / 1000;
             }
+            let startAnchorStats = stats.getTrackPoint(anchors[0].point._data.index)!;
+            let endAnchorStats = stats.getTrackPoint(
+                anchors[anchors.length - 1].point._data.index
+            )!;
+
             let replacedDistance =
-                stats.local.distance.moving[anchors[anchors.length - 1].point._data.index] -
-                stats.local.distance.moving[anchors[0].point._data.index];
+                endAnchorStats.distance.moving - startAnchorStats.distance.moving;
 
             let newDistance = stats.global.distance.moving + replacingDistance - replacedDistance;
             let newTime = (newDistance / stats.global.speed.moving) * 3600;
 
             let remainingTime =
                 stats.global.time.moving -
-                (stats.local.time.moving[anchors[anchors.length - 1].point._data.index] -
-                    stats.local.time.moving[anchors[0].point._data.index]);
+                (endAnchorStats.time.moving - startAnchorStats.time.moving);
             let replacingTime = newTime - remainingTime;
 
             if (replacingTime <= 0) {
                 // Fallback to simple time difference
-                replacingTime =
-                    stats.local.time.total[anchors[anchors.length - 1].point._data.index] -
-                    stats.local.time.total[anchors[0].point._data.index];
+                replacingTime = endAnchorStats.time.total - startAnchorStats.time.total;
             }
 
             speed = (replacingDistance / replacingTime) * 3600;
@@ -789,15 +821,13 @@ export class RoutingControls {
                 let endIndex = anchors[anchors.length - 1].point._data.index;
                 startTime = new Date(
                     (segment.trkpt[endIndex].time?.getTime() ?? 0) -
-                        (replacingTime +
-                            stats.local.time.total[endIndex] -
-                            stats.local.time.moving[endIndex]) *
+                        (replacingTime + endAnchorStats.time.total - endAnchorStats.time.moving) *
                             1000
                 );
             }
         }
 
-        dbUtils.applyToFile(this.fileId, (file) =>
+        fileActionManager.applyToFile(this.fileId, (file) =>
             file.replaceTrackPoints(
                 anchors[0].trackIndex,
                 anchors[0].segmentIndex,
@@ -818,6 +848,8 @@ export class RoutingControls {
     }
 }
 
+export const routingControls: Map<string, RoutingControls> = new Map();
+
 type Anchor = {
     segment: TrackSegment;
     trackIndex: number;

website/src/lib/components/toolbar/tools/routing/routing.ts

@@ -2,6 +2,7 @@ import type { Coordinates } from 'gpx';
 import { TrackPoint, distance } from 'gpx';
 import { settings } from '$lib/logic/settings';
 import { getElevation } from '$lib/utils';
+import { get } from 'svelte/store';
 
 const { routing, routingProfile, privateRoads } = settings;
 
@@ -17,8 +18,8 @@ export const brouterProfiles: { [key: string]: string } = {
 };
 
 export function route(points: Coordinates[]): Promise<TrackPoint[]> {
-    if (routing.value) {
-        return getRoute(points, brouterProfiles[routingProfile.value], privateRoads.value);
+    if (get(routing)) {
+        return getRoute(points, brouterProfiles[get(routingProfile)], get(privateRoads));
     } else {
         return getIntermediatePoints(points);
     }

website/src/lib/components/toolbar/tools/scissors/Scissors.svelte

@@ -7,49 +7,43 @@
     import { Slider } from '$lib/components/ui/slider';
     import * as Select from '$lib/components/ui/select';
     import { Separator } from '$lib/components/ui/separator';
-    import { gpxStatistics, slicedGPXStatistics } from '$lib/stores';
     import { map } from '$lib/components/map/map';
     import { get } from 'svelte/store';
     import { i18n } from '$lib/i18n.svelte';
-    import { onDestroy, tick } from 'svelte';
+    import { onDestroy, onMount, untrack } from 'svelte';
     import { Crop } from '@lucide/svelte';
-    import { dbUtils } from '$lib/db';
     import { SplitControls } from './split-controls';
     import { getURLForLanguage } from '$lib/utils';
     import { selection } from '$lib/logic/selection';
+    import { fileActions } from '$lib/logic/file-actions';
+    import { gpxStatistics, slicedGPXStatistics } from '$lib/logic/statistics';
 
     let props: {
         class?: string;
     } = $props();
 
     let splitControls: SplitControls | undefined = undefined;
-    let canCrop = $state(false);
-
-    $effect(() => {
-        if (map.current) {
-            if (splitControls) {
-                splitControls.destroy();
-            }
-            splitControls = new SplitControls(map.current);
-        }
-    });
 
     let validSelection = $derived(
-        selection.value.hasAnyChildren(new ListRootItem(), true, ['waypoints']) &&
-            $gpxStatistics.local.points.length > 0
+        $selection.hasAnyChildren(new ListRootItem(), true, ['waypoints']) &&
+            $gpxStatistics.global.length > 0
     );
+    let maxSliderValue = $derived(
+        validSelection && $gpxStatistics.global.length > 0 ? $gpxStatistics.global.length - 1 : 1
+    );
+    let sliderValues = $derived([0, maxSliderValue]);
+    let canCrop = $derived(sliderValues[0] != 0 || sliderValues[1] != maxSliderValue);
 
-    let maxSliderValue = $state(1);
-    let sliderValues = $state([0, 1]);
-
-    function updateCanCrop() {
-        canCrop = sliderValues[0] != 0 || sliderValues[1] != maxSliderValue;
-    }
+    onMount(() => {
+        if ($map) {
+            splitControls = new SplitControls($map);
+        }
+    });
 
     function updateSlicedGPXStatistics() {
         if (validSelection && canCrop) {
             $slicedGPXStatistics = [
-                get(gpxStatistics).slice(sliderValues[0], sliderValues[1]),
+                get(gpxStatistics).sliced(sliderValues[0], sliderValues[1]),
                 sliderValues[0],
                 sliderValues[1],
             ];
@@ -64,26 +58,9 @@
         }
     }
 
-    async function updateSliderLimits() {
-        if (validSelection && $gpxStatistics.local.points.length > 0) {
-            maxSliderValue = $gpxStatistics.local.points.length - 1;
-        } else {
-            maxSliderValue = 1;
-        }
-        await tick();
-        sliderValues = [0, maxSliderValue];
-    }
-
-    $effect(() => {
-        if ($gpxStatistics.local.points.length - 1 != maxSliderValue) {
-            updateSliderLimits();
-        }
-    });
-
     $effect(() => {
         if (sliderValues) {
-            updateCanCrop();
-            updateSlicedGPXStatistics();
+            untrack(() => updateSlicedGPXStatistics());
         }
     });
 
@@ -93,8 +70,7 @@
             ($slicedGPXStatistics[1] !== sliderValues[0] ||
                 $slicedGPXStatistics[2] !== sliderValues[1])
         ) {
-            updateSliderValues();
-            updateCanCrop();
+            untrack(() => updateSliderValues());
         }
     });
 
@@ -102,7 +78,6 @@
         $slicedGPXStatistics = undefined;
         if (splitControls) {
             splitControls.destroy();
-            splitControls = undefined;
         }
     });
 </script>
@@ -120,18 +95,18 @@
     <Button
         variant="outline"
         disabled={!validSelection || !canCrop}
-        onclick={() => dbUtils.cropSelection(sliderValues[0], sliderValues[1])}
+        onclick={() => fileActions.cropSelection(sliderValues[0], sliderValues[1])}
     >
-        <Crop size="16" class="mr-1" />{i18n._('toolbar.scissors.crop')}
+        <Crop size="16" />{i18n._('toolbar.scissors.crop')}
     </Button>
     <Separator />
     <Label class="flex flex-row flex-wrap gap-3 items-center">
         <span class="shrink-0">
             {i18n._('toolbar.scissors.split_as')}
         </span>
-        <Select.Root bind:value={splitAs.current} type="single">
-            <Select.Trigger class="h-8 w-fit grow">
-                {i18n._('gpx.' + splitAs)}
+        <Select.Root bind:value={$splitAs} type="single">
+            <Select.Trigger class="w-fit grow" size="sm">
+                {i18n._('gpx.' + $splitAs)}
             </Select.Trigger>
             <Select.Content>
                 {#each Object.values(SplitType) as splitType}

website/src/lib/components/toolbar/tools/scissors/split-controls.ts

@@ -1,92 +1,95 @@
-import { TrackPoint, TrackSegment } from 'gpx';
-import mapboxgl from 'mapbox-gl';
-import { dbUtils, getFile } from '$lib/db';
 import { ListTrackSegmentItem } from '$lib/components/file-list/file-list';
-import { gpxStatistics } from '$lib/stores';
-import { tool, Tool } from '$lib/components/toolbar/tools';
+import { currentTool, Tool } from '$lib/components/toolbar/tools';
 import { splitAs } from '$lib/components/toolbar/tools/scissors/scissors';
 import { Scissors } from 'lucide-static';
 import { selection } from '$lib/logic/selection';
+import { gpxStatistics } from '$lib/logic/statistics';
+import { get } from 'svelte/store';
+import { fileStateCollection } from '$lib/logic/file-state';
+import { fileActions } from '$lib/logic/file-actions';
+import { mapCursor, MapCursorState } from '$lib/logic/map-cursor';
+import { ANCHOR_LAYER_KEY } from '$lib/components/map/map';
 
 export class SplitControls {
-    active: boolean = false;
     map: mapboxgl.Map;
-    controls: ControlWithMarker[] = [];
-    shownControls: ControlWithMarker[] = [];
     unsubscribes: Function[] = [];
 
-    toggleControlsForZoomLevelAndBoundsBinded: () => void =
-        this.toggleControlsForZoomLevelAndBounds.bind(this);
+    layerOnMouseEnterBinded: (e: any) => void = this.layerOnMouseEnter.bind(this);
+    layerOnMouseLeaveBinded: () => void = this.layerOnMouseLeave.bind(this);
+    layerOnClickBinded: (e: any) => void = this.layerOnClick.bind(this);
 
     constructor(map: mapboxgl.Map) {
         this.map = map;
 
+        if (!this.map.hasImage('split-control')) {
+            let icon = new Image(100, 100);
+            icon.onload = () => {
+                if (!this.map.hasImage('split-control')) {
+                    this.map.addImage('split-control', icon);
+                }
+            };
+
+            // Lucide icons are SVG files with a 24x24 viewBox
+            // Create a new SVG with a 32x32 viewBox and center the icon in a circle
+            icon.src =
+                'data:image/svg+xml,' +
+                encodeURIComponent(`
+                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40">
+                            <circle cx="20" cy="20" r="20" fill="white" />
+                            <g transform="translate(8 8)">
+                            ${Scissors.replace('stroke="currentColor"', 'stroke="black"')}
+                            </g>
+                        </svg>
+                    `);
+        }
+
         this.unsubscribes.push(gpxStatistics.subscribe(this.addIfNeeded.bind(this)));
-        $effect(() => {
-            tool.current, selection.value, this.addIfNeeded.bind(this);
-        });
+        this.unsubscribes.push(currentTool.subscribe(this.addIfNeeded.bind(this)));
+        this.unsubscribes.push(selection.subscribe(this.addIfNeeded.bind(this)));
     }
 
     addIfNeeded() {
-        let scissors = tool.current === Tool.SCISSORS;
+        let scissors = get(currentTool) === Tool.SCISSORS;
         if (!scissors) {
-            if (this.active) {
-                this.remove();
-            }
+            this.remove();
             return;
         }
 
-        if (this.active) {
-            this.updateControls();
-        } else {
-            this.add();
-        }
-    }
-
-    add() {
-        this.active = true;
-
-        this.map.on('zoom', this.toggleControlsForZoomLevelAndBoundsBinded);
-        this.map.on('move', this.toggleControlsForZoomLevelAndBoundsBinded);
+        this.updateControls();
     }
 
     updateControls() {
-        // Update the markers when the files change
-        let controlIndex = 0;
+        let data: GeoJSON.FeatureCollection = {
+            type: 'FeatureCollection',
+            features: [],
+        };
         selection.applyToOrderedSelectedItemsFromFile((fileId, level, items) => {
-            let file = getFile(fileId);
+            let file = fileStateCollection.getFile(fileId);
 
             if (file) {
                 file.forEachSegment((segment, trackIndex, segmentIndex) => {
                     if (
-                        selection.value.hasAnyParent(
+                        get(selection).hasAnyParent(
                             new ListTrackSegmentItem(fileId, trackIndex, segmentIndex)
                         )
                     ) {
-                        for (let point of segment.trkpt.slice(1, -1)) {
-                            // Update the existing controls (could be improved by matching the existing controls with the new ones?)
+                        for (let i = 1; i < segment.trkpt.length - 1; i++) {
+                            let point = segment.trkpt[i];
                             if (point._data.anchor) {
-                                if (controlIndex < this.controls.length) {
-                                    this.controls[controlIndex].fileId = fileId;
-                                    this.controls[controlIndex].point = point;
-                                    this.controls[controlIndex].segment = segment;
-                                    this.controls[controlIndex].trackIndex = trackIndex;
-                                    this.controls[controlIndex].segmentIndex = segmentIndex;
-                                    this.controls[controlIndex].marker.setLngLat(
-                                        point.getCoordinates()
-                                    );
-                                } else {
-                                    this.controls.push(
-                                        this.createControl(
-                                            point,
-                                            segment,
-                                            fileId,
-                                            trackIndex,
-                                            segmentIndex
-                                        )
-                                    );
-                                }
-                                controlIndex++;
+                                data.features.push({
+                                    type: 'Feature',
+                                    geometry: {
+                                        type: 'Point',
+                                        coordinates: [point.getLongitude(), point.getLatitude()],
+                                    },
+                                    properties: {
+                                        fileId: fileId,
+                                        trackIndex: trackIndex,
+                                        segmentIndex: segmentIndex,
+                                        pointIndex: i,
+                                        minZoom: point._data.zoom,
+                                    },
+                                });
                             }
                         }
                     }
@@ -94,86 +97,78 @@ export class SplitControls {
             }
         }, false);
 
-        while (controlIndex < this.controls.length) {
-            // Remove the extra controls
-            this.controls.pop()?.marker.remove();
-        }
+        try {
+            let source = this.map.getSource('split-controls') as mapboxgl.GeoJSONSource | undefined;
+            if (source) {
+                source.setData(data);
+            } else {
+                this.map.addSource('split-controls', {
+                    type: 'geojson',
+                    data: data,
+                });
+            }
 
-        this.toggleControlsForZoomLevelAndBounds();
+            if (!this.map.getLayer('split-controls')) {
+                this.map.addLayer(
+                    {
+                        id: 'split-controls',
+                        type: 'symbol',
+                        source: 'split-controls',
+                        layout: {
+                            'icon-image': 'split-control',
+                            'icon-size': 0.25,
+                            'icon-padding': 0,
+                        },
+                        filter: ['<=', ['get', 'minZoom'], ['zoom']],
+                    },
+                    ANCHOR_LAYER_KEY.interactions
+                );
+
+                this.map.on('mouseenter', 'split-controls', this.layerOnMouseEnterBinded);
+                this.map.on('mouseleave', 'split-controls', this.layerOnMouseLeaveBinded);
+                this.map.on('click', 'split-controls', this.layerOnClickBinded);
+            }
+        } catch (e) {
+            // No reliable way to check if the map is ready to add sources and layers
+        }
     }
 
     remove() {
-        this.active = false;
+        this.map.off('mouseenter', 'split-controls', this.layerOnMouseEnterBinded);
+        this.map.off('mouseleave', 'split-controls', this.layerOnMouseLeaveBinded);
+        this.map.off('click', 'split-controls', this.layerOnClickBinded);
 
-        for (let control of this.controls) {
-            control.marker.remove();
-        }
-        this.map.off('zoom', this.toggleControlsForZoomLevelAndBoundsBinded);
-        this.map.off('move', this.toggleControlsForZoomLevelAndBoundsBinded);
-    }
-
-    toggleControlsForZoomLevelAndBounds() {
-        // Show markers only if they are in the current zoom level and bounds
-        this.shownControls.splice(0, this.shownControls.length);
-
-        let southWest = this.map.unproject([0, this.map.getCanvas().height]);
-        let northEast = this.map.unproject([this.map.getCanvas().width, 0]);
-        let bounds = new mapboxgl.LngLatBounds(southWest, northEast);
-
-        let zoom = this.map.getZoom();
-        this.controls.forEach((control) => {
-            control.inZoom = control.point._data.zoom <= zoom;
-            if (control.inZoom && bounds.contains(control.marker.getLngLat())) {
-                control.marker.addTo(this.map);
-                this.shownControls.push(control);
-            } else {
-                control.marker.remove();
+        try {
+            if (this.map.getLayer('split-controls')) {
+                this.map.removeLayer('split-controls');
             }
-        });
+
+            if (this.map.getSource('split-controls')) {
+                this.map.removeSource('split-controls');
+            }
+        } catch (e) {
+            // No reliable way to check if the map is ready to remove sources and layers
+        }
     }
 
-    createControl(
-        point: TrackPoint,
-        segment: TrackSegment,
-        fileId: string,
-        trackIndex: number,
-        segmentIndex: number
-    ): ControlWithMarker {
-        let element = document.createElement('div');
-        element.className = `h-6 w-6 p-0.5 rounded-full bg-white border-2 border-black cursor-pointer`;
-        element.innerHTML = Scissors.replace('width="24"', '')
-            .replace('height="24"', '')
-            .replace('stroke="currentColor"', 'stroke="black"');
+    layerOnMouseEnter(e: any) {
+        mapCursor.notify(MapCursorState.SPLIT_CONTROL, true);
+    }
 
-        let marker = new mapboxgl.Marker({
-            draggable: true,
-            className: 'z-10',
-            element,
-        }).setLngLat(point.getCoordinates());
+    layerOnMouseLeave() {
+        mapCursor.notify(MapCursorState.SPLIT_CONTROL, false);
+    }
 
-        let control = {
-            point,
-            segment,
-            fileId,
-            trackIndex,
-            segmentIndex,
-            marker,
-            inZoom: false,
-        };
-
-        marker.getElement().addEventListener('click', (e) => {
-            e.stopPropagation();
-            dbUtils.split(
-                splitAs.current,
-                control.fileId,
-                control.trackIndex,
-                control.segmentIndex,
-                control.point.getCoordinates(),
-                control.point._data.index
-            );
-        });
-
-        return control;
+    layerOnClick(e: mapboxgl.MapMouseEvent) {
+        let coordinates = (e.features![0].geometry as GeoJSON.Point).coordinates;
+        fileActions.split(
+            get(splitAs),
+            e.features![0].properties!.fileId,
+            e.features![0].properties!.trackIndex,
+            e.features![0].properties!.segmentIndex,
+            { lon: coordinates[0], lat: coordinates[1] },
+            e.features![0].properties!.pointIndex
+        );
     }
 
     destroy() {
@@ -181,16 +176,3 @@ export class SplitControls {
         this.unsubscribes.forEach((unsubscribe) => unsubscribe());
     }
 }
-
-type Control = {
-    segment: TrackSegment;
-    fileId: string;
-    trackIndex: number;
-    segmentIndex: number;
-    point: TrackPoint;
-};
-
-type ControlWithMarker = Control & {
-    marker: mapboxgl.Marker;
-    inZoom: boolean;
-};

website/src/lib/components/toolbar/tools/waypoint/Waypoint.svelte

@@ -6,16 +6,18 @@
     import * as Select from '$lib/components/ui/select';
     import { i18n } from '$lib/i18n.svelte';
     import { ListWaypointItem } from '$lib/components/file-list/file-list';
-    import { dbUtils, fileObservers, getFile, settings, type GPXFileWithStatistics } from '$lib/db';
-    import { get } from 'svelte/store';
     import Help from '$lib/components/Help.svelte';
-    import { onDestroy, onMount } from 'svelte';
-    import { map } from '$lib/stores';
-    import { getURLForLanguage, resetCursor, setCrosshairCursor } from '$lib/utils';
+    import { onDestroy, onMount, untrack } from 'svelte';
+    import { getURLForLanguage } from '$lib/utils';
     import { MapPin, CircleX, Save } from '@lucide/svelte';
     import { getSymbolKey, symbols } from '$lib/assets/symbols';
     import { selection } from '$lib/logic/selection';
     import { selectedWaypoint } from './waypoint';
+    import { fileActions } from '$lib/logic/file-actions';
+    import { map } from '$lib/components/map/map';
+    import { mapCursor, MapCursorState } from '$lib/logic/map-cursor';
+    import mapboxgl from 'mapbox-gl';
+    import { getSvgForSymbol } from '$lib/components/map/gpx-layer/gpx-layer';
 
     let props: {
         class?: string;
@@ -24,21 +26,55 @@
     let name = $state('');
     let description = $state('');
     let link = $state('');
-    let symbolKey = $state('');
+    let sym = $state('');
     let longitude = $state(0);
     let latitude = $state(0);
+    let symbolKey = $derived(getSymbolKey(sym));
 
-    let canCreate = $derived(selection.value.size > 0);
+    let canCreate = $derived($selection.size > 0);
 
-    function resetWaypointData() {
-        name = '';
-        description = '';
-        link = '';
-        symbolKey = '';
-        longitude = 0;
-        latitude = 0;
+    let sortedSymbols = $derived(
+        Object.entries(symbols).sort((a, b) => {
+            return i18n
+                ._(`gpx.symbol.${a[0]}`)
+                .localeCompare(i18n._(`gpx.symbol.${b[0]}`), i18n.lang);
+        })
+    );
+
+    let marker: mapboxgl.Marker | null = null;
+
+    function reset() {
+        if ($selectedWaypoint) {
+            selectedWaypoint.reset();
+        } else {
+            name = '';
+            description = '';
+            link = '';
+            sym = '';
+            longitude = 0;
+            latitude = 0;
+        }
     }
 
+    $effect(() => {
+        if ($selectedWaypoint) {
+            const wpt = $selectedWaypoint[0];
+            untrack(() => {
+                name = wpt.name ?? '';
+                description = wpt.desc ?? '';
+                if (wpt.cmt !== undefined && wpt.cmt !== wpt.desc) {
+                    description += '\n\n' + wpt.cmt;
+                }
+                link = wpt.link?.attributes?.href ?? '';
+                sym = wpt.sym ?? '';
+                longitude = parseFloat(wpt.getLongitude().toFixed(6));
+                latitude = parseFloat(wpt.getLatitude().toFixed(6));
+            });
+        } else {
+            untrack(reset);
+        }
+    });
+
     function createOrUpdateWaypoint() {
         if (typeof latitude === 'string') {
             latitude = parseFloat(latitude);
@@ -49,7 +85,7 @@
         latitude = parseFloat(latitude.toFixed(6));
         longitude = parseFloat(longitude.toFixed(6));
 
-        dbUtils.addOrUpdateWaypoint(
+        fileActions.addOrUpdateWaypoint(
             {
                 attributes: {
                     lat: latitude,
@@ -59,15 +95,14 @@
                 desc: description.length > 0 ? description : undefined,
                 cmt: description.length > 0 ? description : undefined,
                 link: link.length > 0 ? { attributes: { href: link } } : undefined,
-                sym: symbols[symbolKey]?.value ?? '',
+                sym: sym.length > 0 ? sym : undefined,
             },
             selectedWaypoint.wpt && selectedWaypoint.fileId
                 ? new ListWaypointItem(selectedWaypoint.fileId, selectedWaypoint.wpt._data.index)
                 : undefined
         );
 
-        selectedWaypoint.reset();
-        resetWaypointData();
+        reset();
     }
 
     function setCoordinates(e: any) {
@@ -75,22 +110,53 @@
         longitude = e.lngLat.lng.toFixed(6);
     }
 
-    let sortedSymbols = $derived(
-        Object.entries(symbols).sort((a, b) => {
-            return i18n
-                ._(`gpx.symbol.${a[0]}`)
-                .localeCompare(i18n._(`gpx.symbol.${b[0]}`), i18n.lang);
-        })
-    );
+    $effect(() => {
+        if ($selectedWaypoint) {
+            if (marker) {
+                marker.remove();
+                marker = null;
+            }
+        } else if (latitude != 0 || longitude != 0) {
+            if ($map) {
+                if (marker) {
+                    marker.setLngLat([longitude, latitude]).getElement().innerHTML =
+                        getSvgForSymbol(symbolKey);
+                } else {
+                    let element = document.createElement('div');
+                    element.classList.add('w-8', 'h-8');
+                    element.innerHTML = getSvgForSymbol(symbolKey);
+                    marker = new mapboxgl.Marker({
+                        element,
+                        anchor: 'bottom',
+                    })
+                        .setLngLat([longitude, latitude])
+                        .addTo($map);
+                }
+            }
+        } else {
+            if (marker) {
+                marker.remove();
+                marker = null;
+            }
+        }
+    });
 
     onMount(() => {
-        map.value?.on('click', setCoordinates);
-        // setCrosshairCursor();
+        if ($map) {
+            $map.on('click', setCoordinates);
+            mapCursor.notify(MapCursorState.TOOL_WITH_CROSSHAIR, true);
+        }
     });
 
     onDestroy(() => {
-        map.value?.off('click', setCoordinates);
-        // resetCursor();
+        if ($map) {
+            $map.off('click', setCoordinates);
+            mapCursor.notify(MapCursorState.TOOL_WITH_CROSSHAIR, false);
+        }
+        if (marker) {
+            marker.remove();
+            marker = null;
+        }
     });
 </script>
 
@@ -101,37 +167,42 @@
             bind:value={name}
             id="name"
             class="font-semibold h-8"
-            disabled={!canCreate && !selectedWaypoint.wpt}
+            disabled={!canCreate && !$selectedWaypoint}
         />
         <Label for="description">{i18n._('menu.metadata.description')}</Label>
         <Textarea
             bind:value={description}
             id="description"
-            disabled={!canCreate && !selectedWaypoint.wpt}
+            disabled={!canCreate && !$selectedWaypoint}
+            class="min-h-8 h-8 py-1 px-3 text-sm"
         />
         <Label for="symbol">{i18n._('toolbar.waypoint.icon')}</Label>
-        <Select.Root bind:value={symbolKey} type="single">
+        <Select.Root bind:value={sym} type="single">
             <Select.Trigger
                 id="symbol"
-                class="w-full h-8"
-                disabled={!canCreate && !selectedWaypoint.wpt}
+                size="sm"
+                class="w-full"
+                disabled={!canCreate && !$selectedWaypoint}
             >
-                {#if symbolKey in symbols}
-                    {i18n._(`gpx.symbol.${symbolKey}`)}
-                {:else}
-                    {symbolKey}
-                {/if}
+                <span class="flex flex-row gap-1.5 items-center">
+                    {#if symbolKey}
+                        {#if symbols[symbolKey].icon}
+                            {@const Component = symbols[symbolKey].icon}
+                            <Component size="14" />
+                        {/if}
+                        {i18n._(`gpx.symbol.${symbolKey}`)}
+                    {:else}
+                        {sym}
+                    {/if}
+                </span>
             </Select.Trigger>
             <Select.Content class="max-h-60 overflow-y-scroll">
                 {#each sortedSymbols as [key, symbol]}
                     <Select.Item value={symbol.value}>
                         <span>
                             {#if symbol.icon}
-                                <svelte:component
-                                    this={symbol.icon}
-                                    size="14"
-                                    class="inline-block align-sub mr-0.5"
-                                />
+                                {@const Component = symbol.icon}
+                                <Component size="14" class="inline-block align-sub" />
                             {:else}
                                 <span class="w-4 inline-block"></span>
                             {/if}
@@ -146,10 +217,10 @@
             bind:value={link}
             id="link"
             class="h-8"
-            disabled={!canCreate && !selectedWaypoint.wpt}
+            disabled={!canCreate && !$selectedWaypoint}
         />
         <div class="flex flex-row gap-2">
-            <div class="grow">
+            <div class="grow flex flex-col gap-2">
                 <Label for="latitude">{i18n._('toolbar.waypoint.latitude')}</Label>
                 <Input
                     bind:value={latitude}
@@ -159,10 +230,10 @@
                     min={-90}
                     max={90}
                     class="text-xs h-8"
-                    disabled={!canCreate && !selectedWaypoint.wpt}
+                    disabled={!canCreate && !$selectedWaypoint}
                 />
             </div>
-            <div class="grow">
+            <div class="grow flex flex-col gap-2">
                 <Label for="longitude">{i18n._('toolbar.waypoint.longitude')}</Label>
                 <Input
                     bind:value={longitude}
@@ -172,7 +243,7 @@
                     min={-180}
                     max={180}
                     class="text-xs h-8"
-                    disabled={!canCreate && !selectedWaypoint.wpt}
+                    disabled={!canCreate && !$selectedWaypoint}
                 />
             </div>
         </div>
@@ -180,30 +251,24 @@
     <div class="flex flex-row gap-2 items-center">
         <Button
             variant="outline"
-            disabled={!canCreate && !selectedWaypoint.wpt}
+            disabled={!canCreate && !$selectedWaypoint}
             class="grow whitespace-normal h-fit"
             onclick={createOrUpdateWaypoint}
         >
-            {#if selectedWaypoint.wpt}
-                <Save size="16" class="mr-1 shrink-0" />
+            {#if $selectedWaypoint}
+                <Save size="16" class="shrink-0" />
                 {i18n._('menu.metadata.save')}
             {:else}
-                <MapPin size="16" class="mr-1 shrink-0" />
+                <MapPin size="16" class="shrink-0" />
                 {i18n._('toolbar.waypoint.create')}
             {/if}
         </Button>
-        <Button
-            variant="outline"
-            onclick={() => {
-                selectedWaypoint.reset();
-                resetWaypointData();
-            }}
-        >
+        <Button variant="outline" size="icon" onclick={reset}>
             <CircleX size="16" />
         </Button>
     </div>
     <Help link={getURLForLanguage(i18n.lang, '/help/toolbar/poi')}>
-        {#if selectedWaypoint.wpt || canCreate}
+        {#if $selectedWaypoint || canCreate}
             {i18n._('toolbar.waypoint.help')}
         {:else}
             {i18n._('toolbar.waypoint.help_no_selection')}

website/src/lib/components/toolbar/tools/waypoint/waypoint.ts

@@ -7,6 +7,7 @@ import { get, writable, type Writable } from 'svelte/store';
 
 export class WaypointSelection {
     private _selection: Writable<[Waypoint, string] | undefined>;
+    private _fileUnsubscribe: (() => void) | undefined;
 
     constructor() {
         this._selection = writable(undefined);
@@ -18,15 +19,37 @@ export class WaypointSelection {
         });
     }
 
+    subscribe(
+        run: (value: [Waypoint, string] | undefined) => void,
+        invalidate?: (value?: [Waypoint, string] | undefined) => void
+    ) {
+        return this._selection.subscribe(run, invalidate);
+    }
+
+    set(value: [Waypoint, string] | undefined) {
+        this._selection.set(value);
+    }
+
     update() {
+        if (this._fileUnsubscribe) {
+            this._fileUnsubscribe();
+            this._fileUnsubscribe = undefined;
+        }
         this._selection.update(() => {
             if (get(settings.treeFileView) && get(selection).size === 1) {
                 let item = get(selection).getSelected()[0];
                 if (item instanceof ListWaypointItem) {
-                    let file = fileStateCollection.getFile(item.getFileId());
-                    let waypoint = file?.wpt[item.getWaypointIndex()];
-                    if (waypoint) {
-                        return [waypoint, item.getFileId()];
+                    let fileState = fileStateCollection.getFileState(item.getFileId());
+                    if (fileState) {
+                        let first = true;
+                        this._fileUnsubscribe = fileState.subscribe(() => {
+                            if (first) first = false;
+                            else this.update();
+                        });
+                        let waypoint = fileState.file?.wpt[item.getWaypointIndex()];
+                        if (waypoint) {
+                            return [waypoint, item.getFileId()];
+                        }
                     }
                 }
             }
@@ -47,34 +70,6 @@ export class WaypointSelection {
         const selection = get(this._selection);
         return selection ? selection[1] : undefined;
     }
-
-    // TODO update the waypoint data if the file changes
-    // function updateWaypointData(fileStore: GPXFileWithStatistics | undefined) {
-    //     if (selectedWaypoint.wpt) {
-    //         if (fileStore) {
-    //             if ($selectedWaypoint[0]._data.index < fileStore.file.wpt.length) {
-    //                 $selectedWaypoint[0] = fileStore.file.wpt[$selectedWaypoint[0]._data.index];
-    //                 name = $selectedWaypoint[0].name ?? '';
-    //                 description = $selectedWaypoint[0].desc ?? '';
-    //                 if (
-    //                     $selectedWaypoint[0].cmt !== undefined &&
-    //                     $selectedWaypoint[0].cmt !== $selectedWaypoint[0].desc
-    //                 ) {
-    //                     description += '\n\n' + $selectedWaypoint[0].cmt;
-    //                 }
-    //                 link = $selectedWaypoint[0].link?.attributes?.href ?? '';
-    //                 let symbol = $selectedWaypoint[0].sym ?? '';
-    //                 symbolKey = getSymbolKey(symbol) ?? symbol ?? '';
-    //                 longitude = parseFloat($selectedWaypoint[0].getLongitude().toFixed(6));
-    //                 latitude = parseFloat($selectedWaypoint[0].getLatitude().toFixed(6));
-    //             } else {
-    //                 selectedWaypoint.reset();
-    //             }
-    //         } else {
-    //             selectedWaypoint.reset();
-    //         }
-    //     }
-    // }
 }
 
 export const selectedWaypoint = new WaypointSelection();

website/src/lib/components/ui/button/button.svelte

@@ -1,80 +1,82 @@
 <script lang="ts" module>
-    import { cn, type WithElementRef } from '$lib/utils.js';
-    import type { HTMLAnchorAttributes, HTMLButtonAttributes } from 'svelte/elements';
-    import { type VariantProps, tv } from 'tailwind-variants';
+	import { cn, type WithElementRef } from "$lib/utils.js";
+	import type { HTMLAnchorAttributes, HTMLButtonAttributes } from "svelte/elements";
+	import { type VariantProps, tv } from "tailwind-variants";
 
-    export const buttonVariants = tv({
-        base: "focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive inline-flex shrink-0 items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium outline-none transition-all focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0",
-        variants: {
-            variant: {
-                default: 'bg-primary text-primary-foreground shadow-xs hover:bg-primary/90',
-                destructive:
-                    'bg-destructive shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60 text-white',
-                outline:
-                    'bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 border',
-                secondary: 'bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80',
-                ghost: 'hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50',
-                link: 'text-primary underline-offset-4 hover:underline',
-            },
-            size: {
-                default: 'h-9 px-4 py-2 has-[>svg]:px-3',
-                sm: 'h-8 gap-1.5 rounded-md px-3 has-[>svg]:px-2.5',
-                lg: 'h-10 rounded-md px-6 has-[>svg]:px-4',
-                icon: 'size-9',
-            },
-        },
-        defaultVariants: {
-            variant: 'default',
-            size: 'default',
-        },
-    });
+	export const buttonVariants = tv({
+		base: "focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive inline-flex shrink-0 items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium outline-none transition-all focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+		variants: {
+			variant: {
+				default: "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90",
+				destructive:
+					"bg-destructive shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60 text-white",
+				outline:
+					"bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 border",
+				secondary: "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80",
+				ghost: "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
+				link: "text-primary underline-offset-4 hover:underline",
+			},
+			size: {
+				default: "h-9 px-4 py-2 has-[>svg]:px-3",
+				sm: "h-8 gap-1.5 rounded-md px-3 has-[>svg]:px-2.5",
+				lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
+				icon: "size-9",
+				"icon-sm": "size-8",
+				"icon-lg": "size-10",
+			},
+		},
+		defaultVariants: {
+			variant: "default",
+			size: "default",
+		},
+	});
 
-    export type ButtonVariant = VariantProps<typeof buttonVariants>['variant'];
-    export type ButtonSize = VariantProps<typeof buttonVariants>['size'];
+	export type ButtonVariant = VariantProps<typeof buttonVariants>["variant"];
+	export type ButtonSize = VariantProps<typeof buttonVariants>["size"];
 
-    export type ButtonProps = WithElementRef<HTMLButtonAttributes> &
-        WithElementRef<HTMLAnchorAttributes> & {
-            variant?: ButtonVariant;
-            size?: ButtonSize;
-        };
+	export type ButtonProps = WithElementRef<HTMLButtonAttributes> &
+		WithElementRef<HTMLAnchorAttributes> & {
+			variant?: ButtonVariant;
+			size?: ButtonSize;
+		};
 </script>
 
 <script lang="ts">
-    let {
-        class: className,
-        variant = 'default',
-        size = 'default',
-        ref = $bindable(null),
-        href = undefined,
-        type = 'button',
-        disabled,
-        children,
-        ...restProps
-    }: ButtonProps = $props();
+	let {
+		class: className,
+		variant = "default",
+		size = "default",
+		ref = $bindable(null),
+		href = undefined,
+		type = "button",
+		disabled,
+		children,
+		...restProps
+	}: ButtonProps = $props();
 </script>
 
 {#if href}
-    <a
-        bind:this={ref}
-        data-slot="button"
-        class={cn(buttonVariants({ variant, size }), className)}
-        href={disabled ? undefined : href}
-        aria-disabled={disabled}
-        role={disabled ? 'link' : undefined}
-        tabindex={disabled ? -1 : undefined}
-        {...restProps}
-    >
-        {@render children?.()}
-    </a>
+	<a
+		bind:this={ref}
+		data-slot="button"
+		class={cn(buttonVariants({ variant, size }), className)}
+		href={disabled ? undefined : href}
+		aria-disabled={disabled}
+		role={disabled ? "link" : undefined}
+		tabindex={disabled ? -1 : undefined}
+		{...restProps}
+	>
+		{@render children?.()}
+	</a>
 {:else}
-    <button
-        bind:this={ref}
-        data-slot="button"
-        class={cn(buttonVariants({ variant, size }), className)}
-        {type}
-        {disabled}
-        {...restProps}
-    >
-        {@render children?.()}
-    </button>
+	<button
+		bind:this={ref}
+		data-slot="button"
+		class={cn(buttonVariants({ variant, size }), className)}
+		{type}
+		{disabled}
+		{...restProps}
+	>
+		{@render children?.()}
+	</button>
 {/if}

website/src/lib/components/ui/date-picker/DatePicker.svelte

@@ -1,39 +1,50 @@
 <script lang="ts">
-    import { CalendarIcon } from '@lucide/svelte';
+    import CalendarIcon from '@lucide/svelte/icons/calendar';
     import { DateFormatter, type DateValue, getLocalTimeZone } from '@internationalized/date';
     import { cn } from '$lib/utils.js';
-    import { Button } from '$lib/components/ui/button/index.js';
+    import { buttonVariants } from '$lib/components/ui/button/index.js';
     import { Calendar } from '$lib/components/ui/calendar/index.js';
     import * as Popover from '$lib/components/ui/popover/index.js';
 
-    export let value: DateValue | undefined = undefined;
-    export let placeholder: string = 'Pick a date';
-    export let locale = 'en';
-    export let disabled: boolean = false;
-    export let onValueChange: any;
+    let {
+        value = $bindable<DateValue | undefined>(),
+        placeholder = 'Pick a date',
+        disabled = false,
+        locale,
+        class: className = '',
+        onchange = () => {},
+    }: {
+        value?: DateValue;
+        placeholder?: string;
+        disabled?: boolean;
+        locale: string;
+        class?: string;
+        onchange?: (date: DateValue | undefined) => void;
+    } = $props();
 
     const df = new DateFormatter(locale, {
         dateStyle: 'long',
     });
+
+    let contentRef = $state<HTMLElement | null>(null);
 </script>
 
 <Popover.Root>
-    <Popover.Trigger asChild let:builder>
-        <Button
-            variant="outline"
-            class={cn(
-                'w-[280px] justify-start text-left font-normal',
-                !value && 'text-muted-foreground',
-                $$props.class
-            )}
-            {disabled}
-            builders={[builder]}
-        >
-            <CalendarIcon class="mr-2 h-4 w-4" />
-            {value ? df.format(value.toDate(getLocalTimeZone())) : placeholder}
-        </Button>
+    <Popover.Trigger
+        class={cn(
+            buttonVariants({
+                variant: 'outline',
+                class: 'justify-start text-left font-normal',
+            }),
+            !value && 'text-muted-foreground',
+            className
+        )}
+        {disabled}
+    >
+        <CalendarIcon />
+        {value ? df.format(value.toDate(getLocalTimeZone())) : placeholder}
     </Popover.Trigger>
-    <Popover.Content class="w-auto p-0">
-        <Calendar bind:value initialFocus {locale} {onValueChange} />
+    <Popover.Content bind:ref={contentRef} class="w-auto p-0">
+        <Calendar type="single" captionLayout="dropdown" bind:value onValueChange={onchange} />
     </Popover.Content>
 </Popover.Root>

website/src/lib/components/ui/dialog/dialog-content.svelte

@@ -33,7 +33,7 @@
 		{@render children?.()}
 		{#if showCloseButton}
 			<DialogPrimitive.Close
-				class="ring-offset-background focus:ring-ring rounded-xs focus:outline-hidden absolute right-4 top-4 opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 disabled:pointer-events-none [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0"
+				class="ring-offset-background focus:ring-ring rounded-xs focus:outline-hidden absolute end-4 top-4 opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 disabled:pointer-events-none [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0"
 			>
 				<XIcon />
 				<span class="sr-only">Close</span>

website/src/lib/components/ui/dropdown-menu/dropdown-menu-content.svelte

@@ -19,7 +19,7 @@
 		data-slot="dropdown-menu-content"
 		{sideOffset}
 		class={cn(
-			"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 max-h-(--radix-dropdown-menu-content-available-height) origin-(--radix-dropdown-menu-content-transform-origin) z-50 min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-md border p-1 shadow-md",
+			"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 max-h-(--bits-dropdown-menu-content-available-height) origin-(--bits-dropdown-menu-content-transform-origin) z-50 min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-md border p-1 shadow-md outline-none",
 			className
 		)}
 		{...restProps}

website/src/lib/components/ui/dropdown-menu/dropdown-menu-sub-content.svelte

@@ -13,7 +13,7 @@
 	bind:ref
 	data-slot="dropdown-menu-sub-content"
 	class={cn(
-		"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-(--radix-dropdown-menu-content-transform-origin) z-50 min-w-[8rem] overflow-hidden rounded-md border p-1 shadow-lg",
+		"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-(--bits-dropdown-menu-content-transform-origin) z-50 min-w-[8rem] overflow-hidden rounded-md border p-1 shadow-lg",
 		className
 	)}
 	{...restProps}

website/src/lib/components/ui/input/input.svelte

@@ -15,6 +15,7 @@
 		type,
 		files = $bindable(),
 		class: className,
+		"data-slot": dataSlot = "input",
 		...restProps
 	}: Props = $props();
 </script>
@@ -22,9 +23,9 @@
 {#if type === "file"}
 	<input
 		bind:this={ref}
-		data-slot="input"
+		data-slot={dataSlot}
 		class={cn(
-			"selection:bg-primary dark:bg-input/30 selection:text-primary-foreground border-input ring-offset-background placeholder:text-muted-foreground shadow-xs flex h-9 w-full min-w-0 rounded-md border bg-transparent px-3 pt-1.5 text-sm font-medium outline-none transition-[color,box-shadow] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+			"selection:bg-primary dark:bg-input/30 selection:text-primary-foreground border-input ring-offset-background placeholder:text-muted-foreground shadow-xs flex h-9 w-full min-w-0 rounded-md border bg-transparent px-3 pt-1.5 text-sm font-medium outline-none transition-[color,box-shadow] disabled:cursor-not-allowed disabled:opacity-50",
 			"focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
 			"aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
 			className
@@ -37,7 +38,7 @@
 {:else}
 	<input
 		bind:this={ref}
-		data-slot="input"
+		data-slot={dataSlot}
 		class={cn(
 			"border-input bg-background selection:bg-primary dark:bg-input/30 selection:text-primary-foreground ring-offset-background placeholder:text-muted-foreground shadow-xs flex h-9 w-full min-w-0 rounded-md border px-3 py-1 text-base outline-none transition-[color,box-shadow] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
 			"focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",

website/src/lib/components/ui/kbd/index.ts

@@ -0,0 +1,10 @@
+import Root from "./kbd.svelte";
+import Group from "./kbd-group.svelte";
+
+export {
+	Root,
+	Group,
+	//
+	Root as Kbd,
+	Group as KbdGroup,
+};

website/src/lib/components/ui/kbd/kbd-group.svelte

@@ -0,0 +1,10 @@
+<script lang="ts">
+	import { cn } from "$lib/utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	let { class: className, children, ...restProps }: HTMLAttributes<HTMLElement> = $props();
+</script>
+
+<kbd data-slot="kbd-group" class={cn("inline-flex items-center gap-1", className)} {...restProps}>
+	{@render children?.()}
+</kbd>

website/src/lib/components/ui/kbd/kbd.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+	import { cn } from "$lib/utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	let { class: className, children, ...restProps }: HTMLAttributes<HTMLElement> = $props();
+</script>
+
+<kbd
+	data-slot="kbd"
+	class={cn(
+		"bg-muted text-muted-foreground pointer-events-none inline-flex h-5 w-fit min-w-5 select-none items-center justify-center gap-1 rounded-sm px-1 font-sans text-xs font-medium",
+		"[&_svg:not([class*='size-'])]:size-3",
+		"[[data-slot=tooltip-content]_&]:bg-background/20 [[data-slot=tooltip-content]_&]:text-background dark:[[data-slot=tooltip-content]_&]:bg-background/10",
+		className
+	)}
+	{...restProps}
+>
+	{@render children?.()}
+</kbd>

website/src/lib/components/ui/scroll-area/scroll-area.svelte

@@ -1,40 +1,40 @@
 <script lang="ts">
-    import { ScrollArea as ScrollAreaPrimitive } from 'bits-ui';
-    import { Scrollbar } from './index.js';
-    import { cn, type WithoutChild } from '$lib/utils.js';
+	import { ScrollArea as ScrollAreaPrimitive } from "bits-ui";
+	import { Scrollbar } from "./index.js";
+	import { cn, type WithoutChild } from "$lib/utils.js";
 
-    let {
-        ref = $bindable(null),
-        class: className,
-        orientation = 'vertical',
-        scrollbarXClasses = '',
-        scrollbarYClasses = '',
-        children,
-        ...restProps
-    }: WithoutChild<ScrollAreaPrimitive.RootProps> & {
-        orientation?: 'vertical' | 'horizontal' | 'both' | undefined;
-        scrollbarXClasses?: string | undefined;
-        scrollbarYClasses?: string | undefined;
-    } = $props();
+	let {
+		ref = $bindable(null),
+		class: className,
+		orientation = "vertical",
+		scrollbarXClasses = "",
+		scrollbarYClasses = "",
+		children,
+		...restProps
+	}: WithoutChild<ScrollAreaPrimitive.RootProps> & {
+		orientation?: "vertical" | "horizontal" | "both" | undefined;
+		scrollbarXClasses?: string | undefined;
+		scrollbarYClasses?: string | undefined;
+	} = $props();
 </script>
 
 <ScrollAreaPrimitive.Root
-    bind:ref
-    data-slot="scroll-area"
-    class={cn('relative overflow-hidden', className)}
-    {...restProps}
+	bind:ref
+	data-slot="scroll-area"
+	class={cn("relative", className)}
+	{...restProps}
 >
-    <ScrollAreaPrimitive.Viewport
-        data-slot="scroll-area-viewport"
-        class="ring-ring/10 dark:ring-ring/20 dark:outline-ring/40 outline-ring/50 size-full rounded-[inherit] transition-[color,box-shadow] focus-visible:outline-1 focus-visible:ring-4"
-    >
-        {@render children?.()}
-    </ScrollAreaPrimitive.Viewport>
-    {#if orientation === 'vertical' || orientation === 'both'}
-        <Scrollbar orientation="vertical" class={scrollbarYClasses} />
-    {/if}
-    {#if orientation === 'horizontal' || orientation === 'both'}
-        <Scrollbar orientation="horizontal" class={scrollbarXClasses} />
-    {/if}
-    <ScrollAreaPrimitive.Corner />
+	<ScrollAreaPrimitive.Viewport
+		data-slot="scroll-area-viewport"
+		class="ring-ring/10 dark:ring-ring/20 dark:outline-ring/40 outline-ring/50 size-full rounded-[inherit] transition-[color,box-shadow] focus-visible:outline-1 focus-visible:ring-4"
+	>
+		{@render children?.()}
+	</ScrollAreaPrimitive.Viewport>
+	{#if orientation === "vertical" || orientation === "both"}
+		<Scrollbar orientation="vertical" class={scrollbarYClasses} />
+	{/if}
+	{#if orientation === "horizontal" || orientation === "both"}
+		<Scrollbar orientation="horizontal" class={scrollbarXClasses} />
+	{/if}
+	<ScrollAreaPrimitive.Corner />
 </ScrollAreaPrimitive.Root>