@versatiles/svelte 0.3.0 → 1.0.1

package/dist/components/MapEditor/lib/geometry_manager.js

@@ -0,0 +1,117 @@
+import { get, writable } from 'svelte/store';
+import { MarkerElement } from './element_marker.js';
+import { LineElement } from './element_line.js';
+export class GeometryManager {
+    elements;
+    map;
+    activeElement = writable(undefined);
+    selection_nodes;
+    canvas;
+    constructor(map) {
+        this.elements = writable([]);
+        this.map = map;
+        this.canvas = this.map.getCanvasContainer();
+        map.addSource('selection_nodes', {
+            type: 'geojson',
+            data: { type: 'FeatureCollection', features: [] }
+        });
+        this.selection_nodes = map.getSource('selection_nodes');
+        map.addLayer({
+            id: 'selection_nodes',
+            source: 'selection_nodes',
+            type: 'circle',
+            layout: {},
+            paint: {
+                'circle-color': '#ffffff',
+                'circle-opacity': ['get', 'opacity'],
+                'circle-radius': 4,
+                'circle-stroke-color': '#000000',
+                'circle-stroke-opacity': ['get', 'opacity'],
+                'circle-stroke-width': 1.5
+            }
+        });
+        map.on('mousedown', 'selection_nodes', (e) => {
+            const element = get(this.activeElement);
+            if (element == undefined)
+                return;
+            const feature = map.queryRenderedFeatures(e.point, { layers: ['selection_nodes'] })[0];
+            const updateSelectionNode = element.getSelectionNodeUpdater(feature.properties);
+            if (updateSelectionNode == undefined)
+                return;
+            e.preventDefault();
+            const onMove = (e) => {
+                e.preventDefault();
+                this.canvas.style.cursor = 'grabbing';
+                updateSelectionNode(e.lngLat.lng, e.lngLat.lat);
+                this.drawSelectionNodes(element.getSelectionNodes());
+            };
+            const onUp = () => {
+                map.off('mousemove', onMove);
+                this.canvas.style.cursor = 'default';
+            };
+            map.once('mouseup', onUp);
+            map.on('mousemove', onMove);
+        });
+        map.on('mouseover', 'selection_nodes', () => (this.canvas.style.cursor = 'move'));
+        map.on('mouseout', 'selection_nodes', () => (this.canvas.style.cursor = 'default'));
+        map.on('click', (e) => {
+            this.setActiveElement(undefined);
+            e.preventDefault();
+        });
+    }
+    setActiveElement(element) {
+        if (element) {
+            if (!get(this.elements).includes(element))
+                throw new Error('Element not in list');
+            this.drawSelectionNodes(element.getSelectionNodes());
+        }
+        else {
+            this.drawSelectionNodes([]);
+        }
+        this.activeElement.set(element);
+    }
+    drawSelectionNodes(nodes) {
+        this.selection_nodes.setData({
+            type: 'FeatureCollection',
+            features: nodes.map((n) => ({
+                type: 'Feature',
+                properties: { index: n.index, opacity: n.transparent ? 0.3 : 1 },
+                geometry: { type: 'Point', coordinates: n.coordinates }
+            }))
+        });
+    }
+    getElement(index) {
+        return get(this.elements)[index];
+    }
+    getNewMarker() {
+        const element = new MarkerElement(this, this.newName('Marker '));
+        this.addElement(element);
+        return element;
+    }
+    getNewLine() {
+        const element = new LineElement(this, this.newName('Line '));
+        this.addElement(element);
+        return element;
+    }
+    addElement(element) {
+        this.elements.update((elements) => [...elements, element]);
+    }
+    newName(prefix) {
+        const set = new Set();
+        const elements = get(this.elements);
+        elements.forEach((e) => {
+            const name = e.name;
+            if (!name.startsWith(prefix))
+                return;
+            const index = name.substring(prefix.length);
+            if (!/^[0-9]+/.test(index))
+                return;
+            set.add(parseInt(index, 10));
+        });
+        for (let i = 1; i <= elements.length + 1; i++) {
+            if (!set.has(i))
+                return prefix + i;
+        }
+        throw new Error('Unreachable');
+    }
+}

package/dist/components/MapEditor/lib/map_layer.d.ts

@@ -0,0 +1,14 @@
+import type { LayerFill, LayerLine, LayerSymbol } from './types.js';
+type LayerSpec = LayerFill | LayerLine | LayerSymbol;
+export declare class MapLayer<T extends LayerSpec> {
+    readonly map: maplibregl.Map;
+    readonly id: string;
+    readonly layoutProperties: T["layout"];
+    readonly paintProperties: T["paint"];
+    constructor(map: maplibregl.Map, id: string, source: string, type: 'symbol' | 'line' | 'fill');
+    setPaint(paint: T['paint']): void;
+    updatePaint<K extends keyof T['paint'], V extends T['paint'][K]>(key: K, value: V): void;
+    setLayout(layout: T['layout']): void;
+    updateLayout<K extends keyof T['layout'], V extends T['layout'][K]>(key: K, value: V): void;
+}
+export {};

package/dist/components/MapEditor/lib/map_layer.js

@@ -0,0 +1,61 @@
+import { Color } from '@versatiles/style';
+export class MapLayer {
+    map;
+    id;
+    layoutProperties = {};
+    paintProperties = {};
+    constructor(map, id, source, type) {
+        this.map = map;
+        this.id = id;
+        let filter;
+        switch (type) {
+            case 'symbol':
+                filter = 'Point';
+                break;
+            case 'line':
+                filter = 'LineString';
+                break;
+            case 'fill':
+                filter = 'Polygon';
+                break;
+            default:
+                throw new Error('Invalid layer type');
+        }
+        this.map.addLayer({
+            id,
+            source,
+            type,
+            layout: this.layoutProperties,
+            paint: this.paintProperties,
+            filter: ['==', '$type', filter]
+        }, 'selection_nodes');
+    }
+    setPaint(paint) {
+        if (paint === undefined)
+            return;
+        const keys = new Set(Object.keys(paint).concat(Object.keys(this.paintProperties)));
+        for (const key of keys.values())
+            this.updatePaint(key, paint[key]);
+    }
+    updatePaint(key, value) {
+        if (value instanceof Color)
+            value = value.asString();
+        if (this.paintProperties[key] == value)
+            return;
+        this.map.setPaintProperty(this.id, key, value);
+        this.paintProperties[key] = value;
+    }
+    setLayout(layout) {
+        if (layout === undefined)
+            return;
+        const keys = new Set(Object.keys(layout).concat(Object.keys(this.layoutProperties)));
+        for (const key of keys.values())
+            this.updateLayout(key, layout[key]);
+    }
+    updateLayout(key, value) {
+        if (this.layoutProperties[key] == value)
+            return;
+        this.map.setLayoutProperty(this.id, key, value);
+        this.layoutProperties[key] = value;
+    }
+}

package/dist/components/MapEditor/lib/types.d.ts

@@ -0,0 +1,112 @@
+import type { Color } from '@versatiles/style';
+import type { ExpressionSpecification, FormattedSpecification, PaddingSpecification, ResolvedImageSpecification, VariableAnchorOffsetCollectionSpecification } from 'maplibre-gl';
+export interface LayerFill {
+    layout: {
+        'fill-sort-key'?: number;
+        visibility?: 'visible' | 'none';
+    };
+    paint: {
+        'fill-antialias'?: boolean;
+        'fill-opacity'?: number;
+        'fill-color'?: string | Color;
+        'fill-outline-color'?: string | Color;
+        'fill-translate'?: [number, number];
+        'fill-translate-anchor'?: 'map' | 'viewport';
+        'fill-pattern'?: ResolvedImageSpecification;
+    };
+}
+export interface LayerLine {
+    layout: {
+        'line-cap'?: 'butt' | 'round' | 'square';
+        'line-join'?: 'bevel' | 'round' | 'miter';
+        'line-miter-limit'?: number;
+        'line-round-limit'?: number;
+        'line-sort-key'?: number;
+        visibility?: 'visible' | 'none';
+    };
+    paint: {
+        'line-opacity'?: number;
+        'line-color'?: string | Color;
+        'line-translate'?: [number, number];
+        'line-translate-anchor'?: 'map' | 'viewport';
+        'line-width'?: number;
+        'line-gap-width'?: number;
+        'line-offset'?: number;
+        'line-blur'?: number;
+        'line-dasharray'?: Array<number>;
+        'line-pattern'?: ResolvedImageSpecification;
+        'line-gradient'?: ExpressionSpecification;
+    };
+}
+export interface LayerSymbol {
+    layout: {
+        'symbol-placement'?: 'point' | 'line' | 'line-center';
+        'symbol-spacing'?: number;
+        'symbol-avoid-edges'?: boolean;
+        'symbol-sort-key'?: number;
+        'symbol-z-order'?: 'auto' | 'viewport-y' | 'source';
+        'icon-allow-overlap'?: boolean;
+        'icon-overlap'?: 'never' | 'always' | 'cooperative';
+        'icon-ignore-placement'?: boolean;
+        'icon-optional'?: boolean;
+        'icon-rotation-alignment'?: 'map' | 'viewport' | 'auto';
+        'icon-size'?: number;
+        'icon-text-fit'?: 'none' | 'width' | 'height' | 'both';
+        'icon-text-fit-padding'?: [number, number, number, number];
+        'icon-image'?: ResolvedImageSpecification;
+        'icon-rotate'?: number;
+        'icon-padding'?: PaddingSpecification;
+        'icon-keep-upright'?: boolean;
+        'icon-offset'?: [number, number];
+        'icon-anchor'?: 'center' | 'left' | 'right' | 'top' | 'bottom' | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+        'icon-pitch-alignment'?: 'map' | 'viewport' | 'auto';
+        'text-pitch-alignment'?: 'map' | 'viewport' | 'auto';
+        'text-rotation-alignment'?: 'map' | 'viewport' | 'viewport-glyph' | 'auto';
+        'text-field'?: FormattedSpecification;
+        'text-font'?: Array<string>;
+        'text-size'?: number;
+        'text-max-width'?: number;
+        'text-line-height'?: number;
+        'text-letter-spacing'?: number;
+        'text-justify'?: 'auto' | 'left' | 'center' | 'right';
+        'text-radial-offset'?: number;
+        'text-variable-anchor'?: Array<'center' | 'left' | 'right' | 'top' | 'bottom' | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right'>;
+        'text-variable-anchor-offset'?: VariableAnchorOffsetCollectionSpecification;
+        'text-anchor'?: 'center' | 'left' | 'right' | 'top' | 'bottom' | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+        'text-max-angle'?: number;
+        'text-writing-mode'?: Array<'horizontal' | 'vertical'>;
+        'text-rotate'?: number;
+        'text-padding'?: number;
+        'text-keep-upright'?: boolean;
+        'text-transform'?: 'none' | 'uppercase' | 'lowercase';
+        'text-offset'?: [number, number];
+        'text-allow-overlap'?: boolean;
+        'text-overlap'?: 'never' | 'always' | 'cooperative';
+        'text-ignore-placement'?: boolean;
+        'text-optional'?: boolean;
+        visibility?: 'visible' | 'none';
+    };
+    paint: {
+        'icon-opacity'?: number;
+        'icon-color'?: string | Color;
+        'icon-halo-color'?: string | Color;
+        'icon-halo-width'?: number;
+        'icon-halo-blur'?: number;
+        'icon-translate'?: [number, number];
+        'icon-translate-anchor'?: 'map' | 'viewport';
+        'text-opacity'?: number;
+        'text-color'?: string | Color;
+        'text-halo-color'?: string | Color;
+        'text-halo-width'?: number;
+        'text-halo-blur'?: number;
+        'text-translate'?: [number, number];
+        'text-translate-anchor'?: 'map' | 'viewport';
+    };
+}
+export type ElementPoint = [number, number];
+export type ElementLine = ElementPoint[];
+export interface SelectionNode {
+    coordinates: ElementPoint;
+    index: number;
+    transparent?: boolean;
+}

package/dist/components/MapEditor/lib/types.js

@@ -0,0 +1 @@
+export {};

package/dist/components/MapEditor/lib/utils.d.ts

@@ -0,0 +1,2 @@
+import type { ElementPoint } from './types.js';
+export declare function getMiddlePoint(p0: ElementPoint, p1: ElementPoint): ElementPoint;

package/dist/components/MapEditor/lib/utils.js

@@ -0,0 +1,11 @@
+export function getMiddlePoint(p0, p1) {
+    const y0 = lat2mercator(p0[1]);
+    const y1 = lat2mercator(p1[1]);
+    return [(p0[0] + p1[0]) / 2, mercator2lat((y0 + y1) / 2)];
+}
+function lat2mercator(lat) {
+    return Math.log(Math.tan(Math.PI / 4 + (lat * Math.PI) / 360));
+}
+function mercator2lat(y) {
+    return ((2 * Math.atan(Math.exp(y)) - Math.PI / 2) * 180) / Math.PI;
+}

package/dist/index.d.ts

@@ -1,4 +1,5 @@
 import BasicMap from './components/BasicMap/BasicMap.svelte';
 import BBoxMap from './components/BBoxMap/BBoxMap.svelte';
 import LocatorMap from './components/LocatorMap/LocatorMap.svelte';
-export { BasicMap, BBoxMap, LocatorMap };
+import MapEditor from './components/MapEditor/MapEditor.svelte';
+export { BasicMap, BBoxMap, LocatorMap, MapEditor };

package/dist/index.js

@@ -1,4 +1,5 @@
 import BasicMap from './components/BasicMap/BasicMap.svelte';
 import BBoxMap from './components/BBoxMap/BBoxMap.svelte';
 import LocatorMap from './components/LocatorMap/LocatorMap.svelte';
-export { BasicMap, BBoxMap, LocatorMap };
+import MapEditor from './components/MapEditor/MapEditor.svelte';
+export { BasicMap, BBoxMap, LocatorMap, MapEditor };

package/dist/utils/draw/bbox.d.ts

@@ -1,6 +1,5 @@
 import type geojson from 'geojson';
-import type { FillStyle, LineStyle } from './style.js';
-import { AbstractDrawer } from './abstract.js';
+import { type Writable } from 'svelte/store';
 type DragPoint = 'n' | 'ne' | 'e' | 'se' | 's' | 'sw' | 'w' | 'nw' | false;
 export declare const DragPointMap: Map<DragPoint, {
     cursor: string;
@@ -8,20 +7,15 @@ export declare const DragPointMap: Map<DragPoint, {
     flipV: DragPoint;
 }>;
 export type BBox = [number, number, number, number];
-export declare class BBoxDrawer extends AbstractDrawer<geojson.BBox> {
+export declare class BBoxDrawer {
     private source?;
     private dragPoint;
     private isDragging;
     private map;
     private canvas;
-    private fillStyle;
-    private lineStyle;
     private inverted;
-    private bbox;
-    constructor(map: maplibregl.Map, options?: {
-        bbox?: BBox;
-        inverted?: boolean;
-    } & LineStyle & FillStyle);
+    readonly bbox: Writable<BBox>;
+    constructor(map: maplibregl.Map, bbox: BBox, color: string, inverted?: boolean);
     private updateDragPoint;
     private getAsFeatureCollection;
     setGeometry(bbox: geojson.BBox): void;

package/dist/utils/draw/bbox.js

@@ -1,5 +1,4 @@
-import { AbstractDrawer } from './abstract.js';
-import { getFillStyle, getLineStyle } from './style.js';
+import { get, writable } from 'svelte/store';
 const maplibregl = await import('maplibre-gl');
 const { LngLatBounds } = maplibregl;
 // prettier-ignore
@@ -15,22 +14,17 @@ export const DragPointMap = new Map([
     [false, { cursor: 'default', flipH: false, flipV: false }],
 ]);
 const worldBBox = [-180, -85, 180, 85];
-export class BBoxDrawer extends AbstractDrawer {
+export class BBoxDrawer {
     source;
     dragPoint = false;
     isDragging = false;
     map;
     canvas;
-    fillStyle;
-    lineStyle;
     inverted;
     bbox;
-    constructor(map, options) {
-        super();
-        this.bbox = options?.bbox ?? worldBBox;
-        this.fillStyle = getFillStyle(options);
-        this.lineStyle = getLineStyle(options);
-        this.inverted = options?.inverted ?? true;
+    constructor(map, bbox, color, inverted) {
+        this.bbox = writable(bbox);
+        this.inverted = inverted ?? true;
         this.map = map;
         const sourceId = 'bbox_' + Math.random().toString(36).slice(2);
         if (this.source)
@@ -41,14 +35,16 @@ export class BBoxDrawer extends AbstractDrawer {
             type: 'line',
             source: sourceId,
             filter: ['==', '$type', 'LineString'],
-            ...this.lineStyle
+            layout: { 'line-cap': 'round', 'line-join': 'round' },
+            paint: { 'line-color': color }
         });
         map.addLayer({
             id: 'bbox-fill_' + Math.random().toString(36).slice(2),
             type: 'fill',
             source: sourceId,
             filter: ['==', '$type', 'Polygon'],
-            ...this.fillStyle
+            layout: {},
+            paint: { 'fill-color': color, 'fill-opacity': 0.2 }
         });
         this.source = map.getSource(sourceId);
         this.canvas = map.getCanvasContainer();
@@ -86,7 +82,7 @@ export class BBoxDrawer extends AbstractDrawer {
         this.canvas.style.cursor = this.getCursor(dragPoint);
     }
     getAsFeatureCollection() {
-        const ring = getRing(this.bbox);
+        const ring = getRing(get(this.bbox));
         return {
             type: 'FeatureCollection',
             features: [
@@ -110,18 +106,19 @@ export class BBoxDrawer extends AbstractDrawer {
         }
     }
     setGeometry(bbox) {
-        this.bbox = bbox.slice(0, 4);
+        this.bbox.set(bbox.slice(0, 4));
         this.redraw();
     }
     getBounds() {
-        return new LngLatBounds(this.bbox);
+        return new LngLatBounds(get(this.bbox));
     }
     redraw() {
         this.source?.setData(this.getAsFeatureCollection());
     }
     getAsPixel() {
-        const p0 = this.map.project([this.bbox[0], this.bbox[1]]);
-        const p1 = this.map.project([this.bbox[2], this.bbox[3]]);
+        const bbox = get(this.bbox);
+        const p0 = this.map.project([bbox[0], bbox[1]]);
+        const p1 = this.map.project([bbox[2], bbox[3]]);
         return [Math.min(p0.x, p1.x), Math.min(p0.y, p1.y), Math.max(p0.x, p1.x), Math.max(p0.y, p1.y)];
     }
     checkDragPointAt(point) {
@@ -150,49 +147,52 @@ export class BBoxDrawer extends AbstractDrawer {
         return DragPointMap.get(drag)?.cursor ?? 'default';
     }
     doDrag(lngLat) {
-        const x = Math.round(lngLat.lng * 1e3) / 1e3;
-        const y = Math.round(lngLat.lat * 1e3) / 1e3;
-        // prettier-ignore
-        switch (this.dragPoint) {
-            case 'n':
-                this.bbox[3] = y;
-                break;
-            case 'ne':
-                this.bbox[2] = x;
-                this.bbox[3] = y;
-                break;
-            case 'e':
-                this.bbox[2] = x;
-                break;
-            case 'se':
-                this.bbox[2] = x;
-                this.bbox[1] = y;
-                break;
-            case 's':
-                this.bbox[1] = y;
-                break;
-            case 'sw':
-                this.bbox[0] = x;
-                this.bbox[1] = y;
-                break;
-            case 'w':
-                this.bbox[0] = x;
-                break;
-            case 'nw':
-                this.bbox[0] = x;
-                this.bbox[3] = y;
-                break;
-            default: return;
-        }
-        if (this.bbox[2] < this.bbox[0]) {
-            // flip horizontal
-            this.bbox = [this.bbox[2], this.bbox[1], this.bbox[0], this.bbox[3]];
-            this.updateDragPoint(DragPointMap.get(this.dragPoint)?.flipH ?? false);
-        }
-        if (this.bbox[3] < this.bbox[1]) {
-            // flip vertical
-            this.bbox = [this.bbox[0], this.bbox[3], this.bbox[2], this.bbox[1]];
-            this.updateDragPoint(DragPointMap.get(this.dragPoint)?.flipV ?? false);
-        }
+        this.bbox.update((bbox) => {
+            const x = Math.round(lngLat.lng * 1e3) / 1e3;
+            const y = Math.round(lngLat.lat * 1e3) / 1e3;
+            // prettier-ignore
+            switch (this.dragPoint) {
+                case 'n':
+                    bbox[3] = y;
+                    break;
+                case 'ne':
+                    bbox[2] = x;
+                    bbox[3] = y;
+                    break;
+                case 'e':
+                    bbox[2] = x;
+                    break;
+                case 'se':
+                    bbox[2] = x;
+                    bbox[1] = y;
+                    break;
+                case 's':
+                    bbox[1] = y;
+                    break;
+                case 'sw':
+                    bbox[0] = x;
+                    bbox[1] = y;
+                    break;
+                case 'w':
+                    bbox[0] = x;
+                    break;
+                case 'nw':
+                    bbox[0] = x;
+                    bbox[3] = y;
+                    break;
+                default: return bbox;
+            }
+            if (bbox[2] < bbox[0]) {
+                // flip horizontal
+                bbox = [bbox[2], bbox[1], bbox[0], bbox[3]];
+                this.updateDragPoint(DragPointMap.get(this.dragPoint)?.flipH ?? false);
+            }
+            if (bbox[3] < bbox[1]) {
+                // flip vertical
+                bbox = [bbox[0], bbox[3], bbox[2], bbox[1]];
+                this.updateDragPoint(DragPointMap.get(this.dragPoint)?.flipV ?? false);
+            }
+            return bbox;
+        });
     }
 }

package/dist/utils/map_style.d.ts

@@ -1,3 +1,6 @@
 import { type StyleBuilderOptions } from '@versatiles/style';
-export declare function getMapStyle(darkMode: boolean, styleOptions?: StyleBuilderOptions): import("maplibre-gl").StyleSpecification;
-export declare function isDarkMode(element: HTMLElement): boolean;
+export declare function getMapStyle(darkMode: boolean, styleOptions?: StyleBuilderOptions & {
+    transitionDuration?: number;
+    disableDarkMode?: boolean;
+}): import("maplibre-gl").StyleSpecification;
+export declare function isDarkMode(element?: HTMLElement): boolean;

package/dist/utils/map_style.js

@@ -1,7 +1,8 @@
 import { styles } from '@versatiles/style';
 import { getLanguage } from './location.js';
 export function getMapStyle(darkMode, styleOptions = {}) {
-    return styles.colorful({
+    darkMode = darkMode && !styleOptions.disableDarkMode;
+    const style = styles.colorful({
         baseUrl: 'https://tiles.versatiles.org',
         language: getLanguage(),
         recolor: {
@@ -10,12 +11,18 @@ export function getMapStyle(darkMode, styleOptions = {}) {
         },
         ...styleOptions
     });
+    if (styleOptions.transitionDuration != null) {
+        style.transition = { duration: styleOptions.transitionDuration, delay: 0 };
+    }
+    return style;
 }
 export function isDarkMode(element) {
-    const colorScheme = getComputedStyle(element).getPropertyValue('color-scheme');
-    if (colorScheme.includes('dark'))
-        return true;
-    if (colorScheme.includes('light'))
-        return false;
+    if (element != null) {
+        const colorScheme = getComputedStyle(element).getPropertyValue('color-scheme');
+        if (colorScheme.includes('dark'))
+            return true;
+        if (colorScheme.includes('light'))
+            return false;
+    }
     return window.matchMedia('(prefers-color-scheme: dark)').matches;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@versatiles/svelte",
-  "version": "0.3.0",
+  "version": "1.0.1",
   "license": "MIT",
   "scripts": {
     "build": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json && vite build && npm run package",
@@ -13,7 +13,7 @@
     "prepack": "npm run package",
     "prepublishOnly": "npm run package",
     "preview": "vite preview",
-    "screenshots": "npm run build && npx tsx ./scripts/screenshots.ts",
+    "screenshots": "npm run build && npx tsx ./scripts/screenshots.ts && pngquant --nofs --force --ext .png screenshots/*.png && optipng -quiet screenshots/*.png",
     "release": "npm run build && npx vrt release-npm",
     "test:integration": "playwright test",
     "test:unit": "vitest run",
@@ -35,7 +35,8 @@
     "!dist/BBoxMap/helpers/*"
   ],
   "peerDependencies": {
-    "svelte": "^5.0.3"
+    "svelte": "^5.0.3",
+    "sass-embedded": "^1.83.4"
   },
   "devDependencies": {
     "@playwright/test": "^1.50.0",
@@ -45,7 +46,7 @@
     "@sveltejs/vite-plugin-svelte": "^5.0.3",
     "@turf/turf": "^7.2.0",
     "@types/eslint": "^9.6.1",
-    "@types/node": "^22.10.10",
+    "@types/node": "^22.12.0",
     "@versatiles/release-tool": "^1.2.6",
     "@vitest/coverage-v8": "^3.0.4",
     "cookie": "^1.0.2",
@@ -59,11 +60,13 @@
     "prettier": "^3.4.2",
     "prettier-plugin-svelte": "^3.3.3",
     "publint": "^0.3.2",
-    "svelte": "^5.19.3",
+    "sass": "^1.83.4",
+    "svelte": "^5.19.6",
     "svelte-check": "^4.1.4",
+    "svelte-preprocess": "^6.0.3",
     "tsx": "^4.19.2",
     "typescript": "^5.7.3",
-    "typescript-eslint": "^8.21.0",
+    "typescript-eslint": "^8.22.0",
     "vite": "^6.0.11",
     "vitest": "^3.0.4"
   },
@@ -72,6 +75,6 @@
   "type": "module",
   "dependencies": {
     "@versatiles/style": "^5.2.9",
-    "maplibre-gl": "^5.0.1"
+    "maplibre-gl": "^5.1.0"
   }
 }