@fusion.dev/helix-map 0.106.0 → 0.108.0

package/README.md

@@ -9,8 +9,8 @@ bun add @fusion.dev/helix @fusion.dev/helix-map maplibre-gl
 
 **The guide is [Maps](https://fusion.dev/helix/docs/maps)**: connecting a
 renderer, the style, markers, clusters, routes, a live position, points, layers
-such as 3D buildings, terrain, and weather radar, the keyboard, and writing a
-driver. The elements themselves are on the
+such as 3D buildings, terrain, and weather radar, a snapshot drawn on the server
+for the first paint, the keyboard, and writing a driver. The elements themselves are on the
 [Map reference](https://fusion.dev/helix/components/map).
 
 ```js

package/dist/connect-map/connect-map.d.ts

@@ -32,6 +32,12 @@ export interface MapDriver {
         read(): string[];
         stop(): void;
     };
+    /**
+     * Calls `done` once the renderer has drawn its view with its tiles, and
+     * returns what stops the waiting. What takes a snapshot drawn on the server
+     * away; without it, the snapshot stays under the renderer's drawing.
+     */
+    ready?(done: () => void): () => void;
     /**
      * The element the renderer made focusable, which the connector takes out of
      * the tab order while connected so the frame's region is the one stop.

package/dist/connect-map/connect-map.js

@@ -617,6 +617,28 @@ export const connectMap = (frame, driver, options = {}) => {
         }
     };
     const stopViewing = driver.onView?.(place);
+    const away = (snapshot) => {
+        snapshot.hidden = true;
+        snapshot.style.display = 'none';
+    };
+    const snapshots = [...frame.querySelectorAll(':scope > [data-helix-map-snapshot]')];
+    const stopWaiting = snapshots.length > 0
+        ? driver.ready?.(() => {
+            const motion = motionOf(frame, 'step');
+            for (const snapshot of snapshots) {
+                if (!motion || typeof snapshot.animate !== 'function') {
+                    away(snapshot);
+                    continue;
+                }
+                snapshot
+                    .animate([{ opacity: 1 }, { opacity: 0 }], {
+                    duration: motion.duration,
+                    easing: `linear(${Array.from({ length: 13 }, (_, step) => motion.easing(step / 12).toFixed(3)).join(', ')})`,
+                })
+                    .finished.then(() => away(snapshot), () => away(snapshot));
+            }
+        })
+        : undefined;
     let live = true;
     let placing = false;
     let drawing = false;
@@ -744,6 +766,7 @@ export const connectMap = (frame, driver, options = {}) => {
             live = false;
             drawn?.stop();
             stopViewing?.();
+            stopWaiting?.();
             stopTheming?.();
             styled.disconnect();
             children.disconnect();

package/dist/leaflet/leaflet-driver.d.ts

@@ -8,6 +8,10 @@ interface LeafletAnimation {
 export interface LeafletLayer {
     /** The layer's credit, where it has one. */
     getAttribution?: (() => string | null | undefined) | undefined;
+    /** Whether a tile layer still has tiles on the way. */
+    isLoading?: (() => boolean) | undefined;
+    off?: ((type: 'load', listener: () => void) => unknown) | undefined;
+    once?: ((type: 'load', listener: () => void) => unknown) | undefined;
 }
 /** The credit control Leaflet adds unless told not to. */
 export interface LeafletAttribution {

package/dist/leaflet/leaflet-driver.js

@@ -44,6 +44,33 @@ export const leafletDriver = (map, shapes) => ({
             map.off('move zoom resize', moved);
         };
     },
+    ready: (done) => {
+        const loading = [];
+        map.eachLayer((layer) => {
+            if (layer.isLoading?.()) {
+                loading.push(layer);
+            }
+        });
+        if (loading.length === 0) {
+            done();
+            return () => undefined;
+        }
+        let left = loading.length;
+        const heard = () => {
+            left -= 1;
+            if (left === 0) {
+                done();
+            }
+        };
+        for (const layer of loading) {
+            layer.once?.('load', heard);
+        }
+        return () => {
+            for (const layer of loading) {
+                layer.off?.('load', heard);
+            }
+        };
+    },
     ...(shapes
         ? {
             layers: (read, events) => {

package/dist/maplibre/maplibre-driver.d.ts

@@ -95,6 +95,10 @@ interface MapLibreAnimation {
  * renderer and a page brings whichever version it has.
  */
 export interface MapLibreMap {
+    /** Whether every tile the view needs has loaded. */
+    areTilesLoaded?(): boolean;
+    /** Whether the style has loaded. */
+    loaded?(): boolean;
     /** The canvas, which MapLibre makes focusable. */
     getCanvas(): HTMLElement;
     /** The middle of the view, which a map-type picture is drawn around. */

package/dist/maplibre/maplibre-driver.js

@@ -1016,6 +1016,18 @@ export const mapLibreDriver = (map) => ({
         const { x, y } = map.project([lng, lat]);
         return { x, y };
     },
+    ready: (done) => {
+        if (map.loaded?.() && map.areTilesLoaded?.()) {
+            done();
+            return () => undefined;
+        }
+        const heard = () => {
+            map.off('load', heard);
+            done();
+        };
+        map.on('load', heard);
+        return () => map.off('load', heard);
+    },
     rotate: ({ by, to }, motion) => {
         const { bearing, pitch } = aimFrom(map);
         turn(map, to ?? bearing + (by ?? 0), pitch, motion);

package/dist/snapshot/camera.d.ts

@@ -0,0 +1,43 @@
+import type { MapPlace } from '../connect-map/index.js';
+/**
+ * Where a map is looking and how big it is drawn: what MapLibre is given as
+ * `center`, `zoom`, `pitch` and `bearing`, and the box it draws in.
+ */
+export interface MapView {
+    /** Degrees clockwise from north the map is turned. 0 by default. */
+    bearing?: number | undefined;
+    center: MapPlace;
+    /** The box's height in CSS pixels. */
+    height: number;
+    /** Degrees the map is tilted back from looking straight down. 0 by default. */
+    pitch?: number | undefined;
+    /** The box's width in CSS pixels. */
+    width: number;
+    zoom: number;
+}
+/** A point on the screen, in CSS pixels from the box's top left. */
+export type ScreenPoint = [number, number];
+/** Where a place falls on the world at a width of `size` pixels, in Web Mercator. */
+export declare const worldOf: (place: MapPlace, size: number) => ScreenPoint;
+/** A camera for a view: the world to the screen, the screen back to the ground, and the world's width. */
+export interface MapCamera {
+    /** A point on the world at `size` pixels wide, on the screen, or `undefined` where it is behind the camera. */
+    toScreen(world: ScreenPoint): ScreenPoint | undefined;
+    /** A point on the screen, where it meets the ground, on the world at `size` pixels wide. */
+    toWorld(screen: ScreenPoint): ScreenPoint;
+    /** How wide the world is at the view's zoom, in pixels. */
+    size: number;
+}
+/**
+ * **MapLibre's camera, for drawing what it would draw.** The world is turned
+ * by the bearing about the view's center and tilted back by the pitch, then
+ * seen in perspective from where MapLibre stands its camera: half the box's
+ * height over the tangent of half the field of view. A tilted map is taller
+ * at its foot than at its head, and parallel streets lean toward the
+ * horizon, as they do in the renderer, so what is drawn from this lines up
+ * with what the renderer draws once it has loaded.
+ *
+ * The camera is centered, so a page that gives MapLibre `padding` moves the
+ * center it gives here to match.
+ */
+export declare const cameraOf: (view: MapView) => MapCamera;

package/dist/snapshot/camera.js

@@ -0,0 +1,41 @@
+const WORLD = 512;
+const FIELD_OF_VIEW = 0.6435011087932844;
+export const worldOf = (place, size) => {
+    const sine = Math.sin((place.lat * Math.PI) / 180);
+    return [
+        ((place.lng + 180) / 360) * size,
+        (0.5 - Math.log((1 + sine) / (1 - sine)) / (4 * Math.PI)) * size,
+    ];
+};
+export const cameraOf = (view) => {
+    const size = WORLD * 2 ** view.zoom;
+    const [cx, cy] = worldOf(view.center, size);
+    const turn = ((view.bearing ?? 0) * Math.PI) / 180;
+    const tilt = ((view.pitch ?? 0) * Math.PI) / 180;
+    const distance = (0.5 * view.height) / Math.tan(FIELD_OF_VIEW / 2);
+    return {
+        size,
+        toScreen: ([wx, wy]) => {
+            const across = (wx - cx) * Math.cos(turn) + (wy - cy) * Math.sin(turn);
+            const toward = -(wx - cx) * Math.sin(turn) + (wy - cy) * Math.cos(turn);
+            const depth = distance - toward * Math.sin(tilt);
+            if (depth < distance * 0.05) {
+                return undefined;
+            }
+            return [
+                view.width / 2 + (distance * across) / depth,
+                view.height / 2 + (distance * toward * Math.cos(tilt)) / depth,
+            ];
+        },
+        toWorld: ([sx, sy]) => {
+            const x = sx - view.width / 2;
+            const y = sy - view.height / 2;
+            const toward = (y * distance) / (distance * Math.cos(tilt) + y * Math.sin(tilt));
+            const across = (x * (distance - toward * Math.sin(tilt))) / distance;
+            return [
+                cx + across * Math.cos(turn) - toward * Math.sin(turn),
+                cy + across * Math.sin(turn) + toward * Math.cos(turn),
+            ];
+        },
+    };
+};

package/dist/snapshot/index.d.ts

@@ -0,0 +1,4 @@
+export type { MapCamera, MapView, ScreenPoint } from './camera.js';
+export { cameraOf, worldOf } from './camera.js';
+export type { SnapshotLayer, SnapshotOptions, SnapshotToward } from './snapshot.js';
+export { mapSnapshot, SNAPSHOT_LAYERS, widthAt } from './snapshot.js';

package/dist/snapshot/index.js

@@ -0,0 +1,2 @@
+export { cameraOf, worldOf } from './camera.js';
+export { mapSnapshot, SNAPSHOT_LAYERS, widthAt } from './snapshot.js';

package/dist/snapshot/snapshot.d.ts

@@ -0,0 +1,74 @@
+import { type MapView } from './camera.js';
+/** The token a snapshot layer's color is the land moved toward. */
+export type SnapshotToward = 'foreground' | 'info' | 'primary' | 'success';
+/**
+ * One layer of a snapshot: which of the tiles' layers it draws, which of its
+ * features, and in what. **The same as `mapLibreStyle`'s layer of the same
+ * `id`**, its color the land moved toward a token by the same amount and its
+ * width the same at every zoom, which the snapshot's spec holds it to, so the
+ * picture a page paints first is the map the renderer then draws.
+ */
+export interface SnapshotLayer {
+    /** Only features of these classes. */
+    classes?: readonly string[];
+    /** How far the land is moved toward `toward`, from 0 to 1. */
+    amount: number;
+    /** The feature classes left out. */
+    except?: readonly string[];
+    id: string;
+    kind: 'fill' | 'line';
+    /** The zoom it starts at, as the style's layer does. */
+    minzoom?: number;
+    /** Whether a feature in a tunnel is left out, as the style leaves it. */
+    overground?: boolean;
+    /**
+     * The smallest a shape is drawn, as the area of the box around it on the
+     * screen, in square pixels. A city's buildings are most of the weight of a
+     * street map and the least of what a first paint needs, and the renderer
+     * draws the small ones over it a moment later.
+     */
+    smallest?: number;
+    /** The tiles' layer it reads, in the OpenMapTiles schema. */
+    source: string;
+    toward: SnapshotToward;
+    /** A line's width at two zooms, in pixels, widened between them as the style widens it. */
+    width?: readonly [readonly [number, number], readonly [number, number]];
+}
+/**
+ * What a snapshot draws, bottom to top: the ground, the water, the buildings
+ * and the roads. The labels, the landmarks and the signs are left to the
+ * renderer, which places them where they do not collide; a picture that drew
+ * them would draw them where the renderer then would not.
+ */
+export declare const SNAPSHOT_LAYERS: readonly SnapshotLayer[];
+/** A width between two zooms as MapLibre interpolates it: exponentially, by 1.5 a zoom. */
+export declare const widthAt: ([[z0, w0], [z1, w1]]: readonly [readonly [number, number], readonly [number, number]], zoom: number) => number;
+/** What a snapshot is drawn from. */
+export interface SnapshotOptions {
+    /** The fetch the tiles are asked for with, where a server has its own, such as one that caches. */
+    fetch?: typeof fetch | undefined;
+    /** A TileJSON URL for vector tiles in the OpenMapTiles schema: the one given to `mapLibreStyle`. OpenFreeMap's by default. */
+    tiles?: string | undefined;
+}
+/**
+ * **A map drawn on the server, for the page's first paint**: an SVG of the
+ * view a renderer is about to draw, from the same vector tiles and in the
+ * same colors, so the map is there before the renderer has loaded. Put it in
+ * the frame after the element the renderer draws in, since the renderer
+ * paints its land before its tiles arrive; `connectMap` fades it out once
+ * the renderer has drawn them. The frame's markers stand on it meanwhile.
+ *
+ * **Seen through the renderer's camera**, tilted and turned as the view
+ * says, so the streets it draws lie under the streets the renderer draws.
+ * It is drawn as a flat map, which is what a globe is at the zooms a page
+ * opens a street map at: a view zoomed out past about 6 is a globe in the
+ * renderer, and the picture would not match it.
+ *
+ * **Colored by the page's tokens**, each color written as the land moved
+ * toward a token in OKLab, so it is drawn in whichever theme the page is in,
+ * light or dark, and changes with it.
+ *
+ * Resolves to an empty string where the tiles cannot be read, which a page
+ * renders as nothing.
+ */
+export declare const mapSnapshot: (view: MapView, options?: SnapshotOptions) => Promise<string>;

package/dist/snapshot/snapshot.js

@@ -0,0 +1,289 @@
+import { VectorTile } from '@mapbox/vector-tile';
+import Pbf from 'pbf';
+import { cameraOf } from './camera.js';
+export const SNAPSHOT_LAYERS = [
+    {
+        amount: 0.096,
+        classes: ['wood', 'grass', 'wetland'],
+        id: 'landcover',
+        kind: 'fill',
+        source: 'landcover',
+        toward: 'success',
+    },
+    {
+        amount: 0.16,
+        except: ['historic'],
+        id: 'park',
+        kind: 'fill',
+        source: 'park',
+        toward: 'success',
+    },
+    { amount: 0.3, id: 'water', kind: 'fill', overground: true, source: 'water', toward: 'info' },
+    {
+        amount: 0.3,
+        id: 'waterway',
+        kind: 'line',
+        overground: true,
+        source: 'waterway',
+        toward: 'info',
+        width: [
+            [8, 0.5],
+            [18, 6],
+        ],
+    },
+    {
+        amount: 0.07,
+        id: 'building',
+        kind: 'fill',
+        minzoom: 13,
+        smallest: 400,
+        source: 'building',
+        toward: 'foreground',
+    },
+    {
+        amount: 0.1,
+        classes: ['minor', 'service'],
+        id: 'road-minor',
+        kind: 'line',
+        minzoom: 12,
+        overground: true,
+        source: 'transportation',
+        toward: 'foreground',
+        width: [
+            [12, 0.5],
+            [18, 10],
+        ],
+    },
+    {
+        amount: 0.16,
+        classes: ['secondary', 'tertiary'],
+        id: 'road-secondary',
+        kind: 'line',
+        minzoom: 10,
+        overground: true,
+        source: 'transportation',
+        toward: 'foreground',
+        width: [
+            [10, 0.5],
+            [18, 14],
+        ],
+    },
+    {
+        amount: 0.4,
+        classes: ['primary', 'trunk'],
+        id: 'road-major',
+        kind: 'line',
+        minzoom: 8,
+        overground: true,
+        source: 'transportation',
+        toward: 'primary',
+        width: [
+            [8, 0.5],
+            [18, 16],
+        ],
+    },
+    {
+        amount: 0.6,
+        classes: ['motorway'],
+        id: 'road-motorway',
+        kind: 'line',
+        minzoom: 5,
+        overground: true,
+        source: 'transportation',
+        toward: 'primary',
+        width: [
+            [5, 0.5],
+            [18, 18],
+        ],
+    },
+];
+const TOKENS = {
+    foreground: '--helix-color-foreground',
+    info: '--helix-color-info',
+    primary: '--helix-color-primary',
+    success: '--helix-color-success',
+    surface: '--helix-color-surface',
+};
+const colorOf = (layer) => `color-mix(in oklab, var(${TOKENS.surface}), var(${TOKENS[layer.toward]}) ${+(layer.amount * 100).toFixed(2)}%)`;
+export const widthAt = ([[z0, w0], [z1, w1]], zoom) => {
+    if (zoom <= z0) {
+        return w0;
+    }
+    if (zoom >= z1) {
+        return w1;
+    }
+    const t = (1.5 ** (zoom - z0) - 1) / (1.5 ** (z1 - z0) - 1);
+    return w0 + t * (w1 - w0);
+};
+const TOLERANCE = 0.8;
+const SHORTEST = 12;
+const simplified = (points) => {
+    if (points.length < 3) {
+        return points;
+    }
+    const kept = new Uint8Array(points.length);
+    kept[0] = 1;
+    kept[points.length - 1] = 1;
+    const stack = [[0, points.length - 1]];
+    while (stack.length > 0) {
+        const [from, to] = stack.pop();
+        const [ax, ay] = points[from];
+        const [bx, by] = points[to];
+        const length = Math.hypot(bx - ax, by - ay);
+        let farthest = -1;
+        let at = -1;
+        for (let index = from + 1; index < to; index++) {
+            const [px, py] = points[index];
+            const away = length === 0
+                ? Math.hypot(px - ax, py - ay)
+                : Math.abs((bx - ax) * (ay - py) - (ax - px) * (by - ay)) / length;
+            if (away > farthest) {
+                farthest = away;
+                at = index;
+            }
+        }
+        if (farthest > TOLERANCE) {
+            kept[at] = 1;
+            stack.push([from, at], [at, to]);
+        }
+    }
+    return points.filter((_, index) => kept[index] === 1);
+};
+const OPENFREEMAP = 'https://tiles.openfreemap.org/planet';
+const MOST_TILES = 40;
+const MARGIN = 16;
+export const mapSnapshot = async (view, options = {}) => {
+    const get = options.fetch ?? fetch;
+    const tiles = await get(options.tiles ?? OPENFREEMAP)
+        .then((response) => (response.ok ? response.json() : undefined))
+        .catch(() => undefined);
+    const template = tiles?.tiles?.[0];
+    if (!template) {
+        return '';
+    }
+    const deepest = tiles.maxzoom ?? 14;
+    const camera = cameraOf(view);
+    const corners = [
+        [0, 0],
+        [view.width, 0],
+        [0, view.height],
+        [view.width, view.height],
+    ];
+    const ground = corners.map((corner) => camera.toWorld(corner));
+    let depth = Math.max(0, Math.min(deepest, Math.floor(view.zoom)));
+    const covering = (at) => {
+        const span = camera.size / 2 ** at;
+        const xs = ground.map(([x]) => Math.floor(x / span));
+        const ys = ground.map(([, y]) => Math.floor(y / span));
+        const count = 2 ** at;
+        const wanted = [];
+        for (let x = Math.min(...xs); x <= Math.max(...xs); x++) {
+            for (let y = Math.max(0, Math.min(...ys)); y <= Math.min(count - 1, Math.max(...ys)); y++) {
+                wanted.push([((x % count) + count) % count, y]);
+            }
+        }
+        return wanted;
+    };
+    let wanted = covering(depth);
+    while (wanted.length > MOST_TILES && depth > 0) {
+        depth -= 1;
+        wanted = covering(depth);
+    }
+    const span = camera.size / 2 ** depth;
+    const drawn = new Map(SNAPSHOT_LAYERS.map((layer) => [layer.id, []]));
+    const shown = SNAPSHOT_LAYERS.filter((layer) => view.zoom >= (layer.minzoom ?? 0));
+    const pathOf = (rings, [tx, ty], extent, closed, smallest) => {
+        let path = '';
+        for (const ring of rings) {
+            const points = [];
+            for (const point of ring) {
+                const on = camera.toScreen([(tx + point.x / extent) * span, (ty + point.y / extent) * span]);
+                if (on) {
+                    points.push(on);
+                }
+            }
+            if (points.length < 2) {
+                continue;
+            }
+            const xs = points.map(([x]) => x);
+            const ys = points.map(([, y]) => y);
+            if (Math.max(...xs) < -MARGIN ||
+                Math.min(...xs) > view.width + MARGIN ||
+                Math.max(...ys) < -MARGIN ||
+                Math.min(...ys) > view.height + MARGIN ||
+                (Math.max(...xs) - Math.min(...xs)) * (Math.max(...ys) - Math.min(...ys)) < smallest ||
+                (!closed &&
+                    Math.hypot(Math.max(...xs) - Math.min(...xs), Math.max(...ys) - Math.min(...ys)) <
+                        SHORTEST)) {
+                continue;
+            }
+            let [lastX, lastY] = [0, 0];
+            simplified(points).forEach(([x, y], index) => {
+                const [px, py] = [Math.round(x), Math.round(y)];
+                if (index === 0) {
+                    path += `M${px} ${py}`;
+                }
+                else if (px !== lastX || py !== lastY) {
+                    path += `l${px - lastX} ${py - lastY}`;
+                }
+                ;
+                [lastX, lastY] = [px, py];
+            });
+            if (closed) {
+                path += 'z';
+            }
+        }
+        return path;
+    };
+    await Promise.all(wanted.map(async (at) => {
+        const url = template
+            .replace('{z}', String(depth))
+            .replace('{x}', String(at[0]))
+            .replace('{y}', String(at[1]));
+        const bytes = await get(url)
+            .then((response) => (response.ok ? response.arrayBuffer() : undefined))
+            .catch(() => undefined);
+        if (!bytes) {
+            return;
+        }
+        const tile = new VectorTile(new Pbf(new Uint8Array(bytes)));
+        for (const layer of shown) {
+            const source = tile.layers[layer.source];
+            if (!source) {
+                continue;
+            }
+            for (let index = 0; index < source.length; index++) {
+                const feature = source.feature(index);
+                const kind = String(feature.properties.class ?? '');
+                if (feature.type !== (layer.kind === 'fill' ? 3 : 2) ||
+                    (layer.classes && !layer.classes.includes(kind)) ||
+                    layer.except?.includes(kind) ||
+                    (layer.overground && feature.properties.brunnel === 'tunnel')) {
+                    continue;
+                }
+                const path = pathOf(feature.loadGeometry(), at, source.extent, layer.kind === 'fill', layer.smallest ?? 0);
+                if (path) {
+                    drawn.get(layer.id)?.push(path);
+                }
+            }
+        }
+    }));
+    const body = shown
+        .map((layer) => {
+        const paths = drawn.get(layer.id) ?? [];
+        if (paths.length === 0) {
+            return '';
+        }
+        const color = colorOf(layer);
+        return layer.kind === 'fill'
+            ? `<path fill-rule="evenodd" style="fill:${color}" d="${paths.join('')}"/>`
+            : `<path style="fill:none;stroke:${color};stroke-width:${+widthAt(layer.width ?? [
+                [0, 1],
+                [1, 1],
+            ], view.zoom).toFixed(2)}px;stroke-linecap:round;stroke-linejoin:round" d="${paths.join('')}"/>`;
+    })
+        .join('');
+    return (`<div aria-hidden="true" data-helix-map-snapshot style="inset:0;overflow:hidden;pointer-events:none;position:absolute">` +
+        `<svg height="${view.height}" viewBox="0 0 ${view.width} ${view.height}" width="${view.width}" xmlns="http://www.w3.org/2000/svg" style="background:var(${TOKENS.surface});left:50%;position:absolute;top:50%;translate:-50% -50%">` +
+        `${body}</svg></div>`);
+};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@fusion.dev/helix-map",
   "description": "Connects the Helix Map frame to a map renderer: MapLibre, Leaflet, or a driver of your own.",
-  "version": "0.106.0",
+  "version": "0.108.0",
   "license": "MIT",
   "author": "Ross Sheppard <ross.sheppard@fusion.dev>",
   "repository": {
@@ -24,6 +24,10 @@
     "./maplibre": {
       "types": "./dist/maplibre/index.d.ts",
       "default": "./dist/maplibre/index.js"
+    },
+    "./snapshot": {
+      "types": "./dist/snapshot/index.d.ts",
+      "default": "./dist/snapshot/index.js"
     }
   },
   "files": [
@@ -39,12 +43,14 @@
   },
   "bugs": "https://github.com/project-fusion/fusion/issues",
   "dependencies": {
-    "@fusion.dev/helix-core": "0.106.0",
-    "@fusion.dev/helix-icons": "0.106.0"
+    "@fusion.dev/helix-core": "0.108.0",
+    "@fusion.dev/helix-icons": "0.108.0",
+    "@mapbox/vector-tile": "^2.0.4",
+    "pbf": "^4.0.1"
   },
   "devDependencies": {
-    "@fusion.dev/helix-headless": "0.106.0",
-    "@fusion.dev/helix-testing": "0.106.0",
+    "@fusion.dev/helix-headless": "0.108.0",
+    "@fusion.dev/helix-testing": "0.108.0",
     "@maplibre/maplibre-gl-style-spec": "^24.10.0",
     "@types/bun": "^1.3.0",
     "@types/leaflet": "^1.9.20",