@viamrobotics/test-widgets 0.0.1 → 0.1.2

package/dist/components/index.d.ts

@@ -21,8 +21,8 @@ export { default as DoCommandWidget } from './widgets/do-command/do-command.svel
 export { default as EncoderWidget } from './widgets/encoder/encoder.svelte';
 export { default as GantryWidget } from './widgets/gantry/gantry.svelte';
 export { default as GantryHomeWidget } from './widgets/gantry/home.svelte';
-export { default as GantryMoveToPositionWidget } from './widgets/gantry/move-to-position.svelte';
-export { default as GantryQuickMoveWidget } from './widgets/gantry/quick-move.svelte';
+export { default as GantryMoveToPositionWidget } from './widgets/gantry/move-to-position-widget.svelte';
+export { default as GantryQuickMoveWidget } from './widgets/gantry/quick-move-widget.svelte';
 export { default as GenericWidget } from './widgets/generic/generic.svelte';
 export { default as GripperGrabWidget } from './widgets/gripper/grab.svelte';
 export { default as GripperWidget } from './widgets/gripper/gripper.svelte';
@@ -53,5 +53,3 @@ export { default as VisionServiceWidget } from './widgets/vision-service/vision-
 export { default as RefetchController } from './refetch-controller.svelte';
 export { NavigationMap, NavigationTab, type NavigationTabType, type Shapes, type CapsuleGeometry, type SphereGeometry, type BoxGeometry, type Geometry, type Obstacle, type Path, } from './navigation-map';
 export { MapLibre, MapLibreMarker, CenterControls, FollowControls, NavigationControls, SatelliteControls, DirectionalMarker, LngLatInput, MapProviders, type MapProvider, GeoPose, Waypoint, useMapLibre, useMapLibreEvent, useMapLibreThreeRaycast, useMapLibreThreeRenderer, lngLatToMercator, mercatorToCartesian, lngLatToCartesian, cartesianToMercator, cartesianToLngLat, } from './maplibre';
-export { default as BoundingBoxLabeler } from './image-annotations/bounding-box-labeler.svelte';
-export { ZOOM_MIN, ZOOM_MAX, INVERT_Y_FLOAT_DISTANCE, INVERT_X_FLOAT_DISTANCE, } from './image-annotations/labeler-constants';

package/dist/components/index.js

@@ -20,8 +20,8 @@ export { default as DoCommandWidget } from './widgets/do-command/do-command.svel
 export { default as EncoderWidget } from './widgets/encoder/encoder.svelte';
 export { default as GantryWidget } from './widgets/gantry/gantry.svelte';
 export { default as GantryHomeWidget } from './widgets/gantry/home.svelte';
-export { default as GantryMoveToPositionWidget } from './widgets/gantry/move-to-position.svelte';
-export { default as GantryQuickMoveWidget } from './widgets/gantry/quick-move.svelte';
+export { default as GantryMoveToPositionWidget } from './widgets/gantry/move-to-position-widget.svelte';
+export { default as GantryQuickMoveWidget } from './widgets/gantry/quick-move-widget.svelte';
 export { default as GenericWidget } from './widgets/generic/generic.svelte';
 export { default as GripperGrabWidget } from './widgets/gripper/grab.svelte';
 export { default as GripperWidget } from './widgets/gripper/gripper.svelte';
@@ -52,5 +52,3 @@ export { default as VisionServiceWidget } from './widgets/vision-service/vision-
 export { default as RefetchController } from './refetch-controller.svelte';
 export { NavigationMap, NavigationTab, } from './navigation-map';
 export { MapLibre, MapLibreMarker, CenterControls, FollowControls, NavigationControls, SatelliteControls, DirectionalMarker, LngLatInput, MapProviders, GeoPose, Waypoint, useMapLibre, useMapLibreEvent, useMapLibreThreeRaycast, useMapLibreThreeRenderer, lngLatToMercator, mercatorToCartesian, lngLatToCartesian, cartesianToMercator, cartesianToLngLat, } from './maplibre';
-export { default as BoundingBoxLabeler } from './image-annotations/bounding-box-labeler.svelte';
-export { ZOOM_MIN, ZOOM_MAX, INVERT_Y_FLOAT_DISTANCE, INVERT_X_FLOAT_DISTANCE, } from './image-annotations/labeler-constants';

package/dist/components/maplibre/controls/center.svelte

@@ -5,37 +5,40 @@
 <script lang="ts">
 	import { persisted } from '@viamrobotics/prime-core'
 	import { LngLat } from 'maplibre-gl'
+	import { fromStore } from 'svelte/store'
 
-	import { useMapLibre, useMapLibreEvent } from '../hooks'
+	import { useMapLibre, useMapLibreEvent } from '../hooks.svelte'
 	import LngLatInput from '../lnglat-input.svelte'
 
-	const { map, mapCenter } = useMapLibre()
+	const { center, ...context } = useMapLibre()
+	const map = fromStore(context.map)
+
 	const lastPosition = persisted<{ center: LngLat; zoom: number }>(
 		'viam-blocks-navigation-map-center',
 		{
-			center: map.getCenter(),
-			zoom: map.getZoom(),
+			center: map.current.getCenter(),
+			zoom: map.current.getZoom(),
 		}
 	)
 
 	if ($lastPosition) {
-		map.jumpTo({ center: $lastPosition.center, zoom: $lastPosition.zoom })
+		map.current.jumpTo({ center: $lastPosition.center, zoom: $lastPosition.zoom })
 	}
 
 	const handleInput = (center: LngLat) => {
-		map.jumpTo({ center })
+		map.current.jumpTo({ center })
 	}
 
 	useMapLibreEvent('move', () => {
 		lastPosition.set({
-			center: map.getCenter(),
-			zoom: map.getZoom(),
+			center: map.current.getCenter(),
+			zoom: map.current.getZoom(),
 		})
 	})
 </script>
 
 <LngLatInput
-	lng={$mapCenter.lng}
-	lat={$mapCenter.lat}
+	lng={$center.lng}
+	lat={$center.lat}
 	oninput={handleInput}
 />

package/dist/components/maplibre/controls/follow.svelte

@@ -4,8 +4,9 @@
 -->
 <script lang="ts">
 	import { Button, Icon } from '@viamrobotics/prime-core'
+	import { fromStore } from 'svelte/store'
 
-	import { useMapLibre } from '../hooks'
+	import { useMapLibre } from '../hooks.svelte'
 
 	interface Props {
 		/** The map point to follow */
@@ -17,13 +18,14 @@
 
 	let { lng, lat, onChange, following = $bindable(false) }: Props = $props()
 
-	const { map } = useMapLibre()
+	const context = useMapLibre()
+	const map = fromStore(context.map)
 
 	let rafID = 0
 
 	const follow = () => {
 		if (lng && lat && following) {
-			map.setCenter([lng, lat])
+			map.current.setCenter([lng, lat])
 			rafID = requestAnimationFrame(follow)
 		}
 	}
@@ -40,13 +42,13 @@
 	})
 
 	$effect(() => {
-		map.on('wheel', stop)
-		map.on('mousedown', stop)
+		map.current.on('wheel', stop)
+		map.current.on('mousedown', stop)
 
 		return () => {
 			cancelAnimationFrame(rafID)
-			map.off('wheel', stop)
-			map.off('mousedown', stop)
+			map.current.off('wheel', stop)
+			map.current.off('mousedown', stop)
 		}
 	})
 

package/dist/components/maplibre/controls/navigation.svelte

@@ -15,8 +15,9 @@
 -->
 <script lang="ts">
 	import { type ControlPosition, NavigationControl } from 'maplibre-gl'
+	import { fromStore } from 'svelte/store'
 
-	import { useMapLibre } from '../hooks'
+	import { useMapLibre } from '../hooks.svelte'
 
 	interface Props {
 		position?: ControlPosition
@@ -32,7 +33,8 @@
 		visualizePitch = true,
 	}: Props = $props()
 
-	const { map } = useMapLibre()
+	const context = useMapLibre()
+	const map = fromStore(context.map)
 	const control = new NavigationControl()
 
 	$effect(() => {
@@ -48,10 +50,10 @@
 	})
 
 	$effect(() => {
-		map.addControl(control, position)
+		map.current.addControl(control, position)
 
 		return () => {
-			map.removeControl(control)
+			map.current.removeControl(control)
 		}
 	})
 </script>

package/dist/components/maplibre/controls/satellite.svelte

@@ -4,12 +4,14 @@
 -->
 <script lang="ts">
 	import { Button } from '@viamrobotics/prime-core'
+	import { fromStore } from 'svelte/store'
 
-	import { useMapLibre } from '../hooks'
+	import { useMapLibre } from '../hooks.svelte'
 	import { getGoogleMapsStyle } from '../style'
 	import { MapProviders } from '../types'
 
-	const { map, satellite, mapProvider, apiKey, maxZoom } = useMapLibre()
+	const { satellite, mapProvider, apiKey, maxZoom, ...context } = useMapLibre()
+	const map = fromStore(context.map)
 
 	const onClick = () => {
 		satellite.set(!$satellite)
@@ -17,13 +19,13 @@
 		if ($mapProvider === MapProviders.googleMaps && $apiKey) {
 			try {
 				const style = getGoogleMapsStyle($apiKey, $maxZoom, $satellite ? 'satellite' : 'roadmap')
-				map.setStyle(style)
+				map.current.setStyle(style)
 			} catch (error) {
 				console.error('Failed to toggle satellite view:', error)
 				satellite.set(!$satellite)
 			}
 		} else {
-			map.setLayoutProperty('satellite', 'visibility', $satellite ? 'visible' : 'none')
+			map.current.setLayoutProperty('satellite', 'visibility', $satellite ? 'visible' : 'none')
 		}
 	}
 </script>

package/dist/components/maplibre/{hooks.d.ts → hooks.svelte.d.ts}

@@ -14,23 +14,18 @@ interface MapContext {
     apiKey: Writable<string | undefined>;
     satellite: Writable<boolean>;
 }
-export declare const provideMapContext: (center: LngLat, zoom: number, maxZoom: number, mapProvider?: MapProvider, apiKey?: string | undefined, satellite?: boolean) => MapContext;
+export declare const provideMapContext: (options: () => {
+    center: LngLat;
+    zoom: number;
+    maxZoom: number;
+    mapProvider?: MapProvider;
+    apiKey?: string | undefined;
+    satellite?: boolean;
+}) => MapContext;
 /**
  * Provides context for a <MapLibre> instance. Must be called within a child of this component.
  */
-export declare const useMapLibre: () => {
-    map: Map;
-    mapCenter: Writable<LngLat>;
-    mapSize: Writable<{
-        width: number;
-        height: number;
-    }>;
-    mapZoom: Writable<number>;
-    maxZoom: Writable<number>;
-    mapProvider: Writable<MapProvider>;
-    apiKey: Writable<string | undefined>;
-    satellite: Writable<boolean>;
-};
+export declare const useMapLibre: () => MapContext;
 /**
  * Allows attaching events to a <MapLibre> instance. Must be called within a child of this component.
  */

package/dist/components/maplibre/{hooks.js → hooks.svelte.js}

@@ -1,8 +1,9 @@
-import { getContext, onDestroy, setContext } from 'svelte';
-import { get, writable } from 'svelte/store';
+import { getContext, setContext } from 'svelte';
+import { fromStore, writable } from 'svelte/store';
 import { MapProviders } from './types';
 const mapContextKey = Symbol('viam-maplibre');
-export const provideMapContext = (center, zoom, maxZoom, mapProvider = MapProviders.openStreet, apiKey = undefined, satellite = false) => {
+export const provideMapContext = (options) => {
+    const { center, zoom, maxZoom, mapProvider = MapProviders.openStreet, apiKey, satellite = false, } = $derived(options());
     const context = {
         map: writable(),
         center: writable(center),
@@ -13,6 +14,24 @@ export const provideMapContext = (center, zoom, maxZoom, mapProvider = MapProvid
         apiKey: writable(apiKey),
         satellite: writable(satellite),
     };
+    $effect(() => {
+        context.center.set(center);
+    });
+    $effect(() => {
+        context.zoom.set(zoom);
+    });
+    $effect(() => {
+        context.maxZoom.set(maxZoom);
+    });
+    $effect(() => {
+        context.mapProvider.set(mapProvider);
+    });
+    $effect(() => {
+        context.apiKey.set(apiKey);
+    });
+    $effect(() => {
+        context.satellite.set(satellite);
+    });
     setContext(mapContextKey, context);
     return context;
 };
@@ -24,22 +43,18 @@ export const useMapLibre = () => {
     if (!context) {
         throw new Error('useMapLibre is a context sensitive hook that must be used inside a <MapLibre> component.');
     }
-    return {
-        map: get(context.map),
-        mapCenter: context.center,
-        mapSize: context.size,
-        mapZoom: context.zoom,
-        maxZoom: context.maxZoom,
-        mapProvider: context.mapProvider,
-        apiKey: context.apiKey,
-        satellite: context.satellite,
-    };
+    return context;
 };
 /**
  * Allows attaching events to a <MapLibre> instance. Must be called within a child of this component.
  */
 export const useMapLibreEvent = (event, listener) => {
-    const { map } = useMapLibre();
-    map.on(event, listener);
-    onDestroy(() => map.off(event, listener));
+    const context = useMapLibre();
+    const map = fromStore(context.map);
+    $effect(() => {
+        map.current.on(event, listener);
+        return () => {
+            map.current.off(event, listener);
+        };
+    });
 };

package/dist/components/maplibre/index.d.ts

@@ -3,11 +3,11 @@ export { default as FollowControls } from './controls/follow.svelte';
 export { default as NavigationControls } from './controls/navigation.svelte';
 export { default as SatelliteControls } from './controls/satellite.svelte';
 export { default as DirectionalMarker } from './directional-marker.svelte';
-export { useMapLibre, useMapLibreEvent } from './hooks';
+export { useMapLibre, useMapLibreEvent } from './hooks.svelte';
 export { default as MapLibre } from './index.svelte';
 export { default as LngLatInput } from './lnglat-input.svelte';
 export { default as MapLibreMarker } from './marker.svelte';
 export { lngLatToMercator, mercatorToCartesian, lngLatToCartesian, cartesianToMercator, cartesianToLngLat, } from './math';
-export { useMapLibreThreeRaycast } from './plugins/raycast';
+export { useMapLibreThreeRaycast } from './plugins/raycast.svelte';
 export { useMapLibreThreeRenderer } from './plugins/three.svelte';
 export { MapProviders, type MapProvider, GeoPose, Waypoint } from './types';

package/dist/components/maplibre/index.js

@@ -3,11 +3,11 @@ export { default as FollowControls } from './controls/follow.svelte';
 export { default as NavigationControls } from './controls/navigation.svelte';
 export { default as SatelliteControls } from './controls/satellite.svelte';
 export { default as DirectionalMarker } from './directional-marker.svelte';
-export { useMapLibre, useMapLibreEvent } from './hooks';
+export { useMapLibre, useMapLibreEvent } from './hooks.svelte';
 export { default as MapLibre } from './index.svelte';
 export { default as LngLatInput } from './lnglat-input.svelte';
 export { default as MapLibreMarker } from './marker.svelte';
 export { lngLatToMercator, mercatorToCartesian, lngLatToCartesian, cartesianToMercator, cartesianToLngLat, } from './math';
-export { useMapLibreThreeRaycast } from './plugins/raycast';
+export { useMapLibreThreeRaycast } from './plugins/raycast.svelte';
 export { useMapLibreThreeRenderer } from './plugins/three.svelte';
 export { MapProviders, GeoPose, Waypoint } from './types';

package/dist/components/maplibre/index.svelte

@@ -26,7 +26,7 @@
 	import { LngLat, Map, type MapOptions } from 'maplibre-gl'
 	import { onMount, type Snippet, tick } from 'svelte'
 
-	import { provideMapContext } from './hooks'
+	import { provideMapContext } from './hooks.svelte'
 	import { getStyleSpecification } from './style'
 	import { type MapProvider, MapProviders } from './types'
 	import { DEFAULT_MAX_ZOOM } from './zoom'
@@ -110,7 +110,14 @@
 		...rest
 	}: Props = $props()
 
-	const context = provideMapContext(center, zoom, maxZoom, mapProvider, mapProviderKey, satellite)
+	const context = provideMapContext(() => ({
+		center,
+		zoom,
+		maxZoom,
+		mapProvider,
+		mapProviderKey,
+		satellite,
+	}))
 
 	let container = $state.raw<HTMLDivElement>()
 	let created = $state(false)

package/dist/components/maplibre/marker.svelte

@@ -13,8 +13,9 @@
 -->
 <script lang="ts">
 	import { LngLat, Marker } from 'maplibre-gl'
+	import { fromStore } from 'svelte/store'
 
-	import { useMapLibre } from './hooks'
+	import { useMapLibre } from './hooks.svelte'
 
 	interface Props {
 		/** The longitude of the marker. */
@@ -33,7 +34,8 @@
 
 	const { lng = 0, lat = 0, rotation = 0, scale = 1, color = '', element }: Props = $props()
 
-	const { map } = useMapLibre()
+	const context = useMapLibre()
+	const map = fromStore(context.map)
 
 	const marker = $derived.by(() => {
 		const value = new Marker(element ? { element, scale, color } : { scale, color })
@@ -44,7 +46,7 @@
 
 	$effect.pre(() => {
 		const currentMarker = marker
-		currentMarker.addTo(map)
+		currentMarker.addTo(map.current)
 		return () => {
 			currentMarker.remove()
 		}

package/dist/components/maplibre/plugins/{raycast.js → raycast.svelte.js}

@@ -1,18 +1,19 @@
-import { onMount } from 'svelte';
+import { fromStore } from 'svelte/store';
 import { Matrix4, Vector2, Vector3 } from 'three';
-import { useMapLibre } from '../hooks';
+import { useMapLibre } from '../hooks.svelte';
 /**
  * Provides raycasting against THREE objects projected on to a maplibre map.
  */
 export const useMapLibreThreeRaycast = (cameraSignal) => {
-    const { map } = useMapLibre();
+    const context = useMapLibre();
+    const map = fromStore(context.map);
     const pointer = new Vector2();
     const handleMouseMove = (event) => {
-        pointer.set((event.point.x / map.transform.width) * 2 - 1, -(event.point.y / map.transform.height) * 2 + 1);
+        pointer.set((event.point.x / map.current.transform.width) * 2 - 1, -(event.point.y / map.current.transform.height) * 2 + 1);
     };
-    onMount(() => {
-        map.on('mousemove', handleMouseMove);
-        return () => map.off('mousemove', handleMouseMove);
+    $effect(() => {
+        map.current.on('mousemove', handleMouseMove);
+        return () => map.current.off('mousemove', handleMouseMove);
     });
     const cameraPosition = new Vector3();
     const mousePosition = new Vector3();

package/dist/components/maplibre/plugins/three.svelte.js

@@ -1,6 +1,7 @@
 import { MercatorCoordinate } from 'maplibre-gl';
+import { fromStore } from 'svelte/store';
 import { Line, Matrix4, Vector3 } from 'three';
-import { useMapLibre } from '../hooks';
+import { useMapLibre } from '../hooks.svelte';
 import { lngLatToCartesian, mercatorToCartesian } from '../math';
 /**
  *
@@ -20,18 +21,19 @@ import { lngLatToCartesian, mercatorToCartesian } from '../math';
  * @param renderFn A callback that runs on each map draw. Use it to render your scene.
  */
 export const useMapLibreThreeRenderer = (scene, cameraSignal, renderFn) => {
-    const { map } = useMapLibre();
+    const context = useMapLibre();
+    const map = fromStore(context.map);
     const cameraTransform = new Matrix4();
     const cameraMatrix = new Matrix4();
     const scale = new Matrix4();
     const rotation = new Matrix4().multiplyMatrices(new Matrix4().makeRotationX(-0.5 * Math.PI), new Matrix4().makeRotationY(Math.PI));
     $effect(() => {
-        map.addLayer({
+        map.current.addLayer({
             id: 'scene-layer',
             type: 'custom',
             renderingMode: '3d',
             render(_, { modelViewProjectionMatrix }) {
-                const center = map.getCenter();
+                const center = map.current.getCenter();
                 const mercator = MercatorCoordinate.fromLngLat(center, 0);
                 const mercatorScale = mercator.meterInMercatorCoordinateUnits();
                 const { x: cx, y: cy } = mercatorToCartesian(mercator, mercatorScale);
@@ -63,11 +65,11 @@ export const useMapLibreThreeRenderer = (scene, cameraSignal, renderFn) => {
                     }
                 });
                 renderFn(scene, cameraSignal.current);
-                map.triggerRepaint();
+                map.current.triggerRepaint();
             },
         });
         return () => {
-            map.removeLayer('scene-layer');
+            map.current.removeLayer('scene-layer');
         };
     });
 };

package/dist/components/navigation-map/components/draw-tool.svelte

@@ -14,6 +14,7 @@
 		type MapMouseEvent,
 		MercatorCoordinate,
 	} from 'maplibre-gl'
+	import { fromStore } from 'svelte/store'
 
 	import {
 		cartesianToMercator,
@@ -30,7 +31,8 @@
 
 	const { onUpdate }: Props = $props()
 
-	const { map } = useMapLibre()
+	const context = useMapLibre()
+	const map = fromStore(context.map)
 	const nav = useNavigationMap()
 
 	let downLngLat = $state(new LngLat(0, 0))
@@ -94,21 +96,26 @@
 
 	const handleKeydown = (event: KeyboardEvent) => {
 		if (event.shiftKey) {
-			map.getCanvas().classList.add('!cursor-crosshair')
+			map.current.getCanvas().classList.add('!cursor-crosshair')
 		}
 	}
 
 	const handleKeyup = () => {
-		map.getCanvas().classList.remove('!cursor-crosshair')
+		map.current.getCanvas().classList.remove('!cursor-crosshair')
 	}
 
-	$effect.pre(() => {
+	$effect(() => {
 		if (drawing) {
-			map.on('mousemove', handlePointerMove)
-			map.on('mouseup', handlePointerUp)
+			map.current.on('mousemove', handlePointerMove)
+			map.current.on('mouseup', handlePointerUp)
 		} else {
-			map.off('mousemove', handlePointerMove)
-			map.off('mouseup', handlePointerUp)
+			map.current.off('mousemove', handlePointerMove)
+			map.current.off('mouseup', handlePointerUp)
+		}
+
+		return () => {
+			map.current.off('mousemove', handlePointerMove)
+			map.current.off('mouseup', handlePointerUp)
 		}
 	})
 </script>

package/dist/components/navigation-map/components/nav/index.svelte

@@ -19,7 +19,7 @@
 	const nav = useNavigationMap()
 </script>
 
-<nav class="py-4 pl-4 sm:h-full sm:w-[350px]">
+<nav class="py-4 pl-4 sm:h-full sm:w-87.5">
 	<ol class="mb-2 flex flex-wrap items-center">
 		{#each nav.tabs as tabTitle (tabTitle)}
 			{@const selected = nav.tab === tabTitle}

package/dist/components/navigation-map/components/nav/key.svelte

@@ -11,6 +11,6 @@
 <!-- 
   @component Represents a keyboard key.
 -->
-<span class="text-default rounded-[4px] bg-gray-200 px-1 py-0.5 font-semibold">
+<span class="text-default rounded-sm bg-gray-200 px-1 py-0.5 font-semibold">
 	{@render children?.()}
 </span>

package/dist/components/navigation-map/components/nav/obstacles-legend.svelte

@@ -4,7 +4,7 @@
 
 <p>Getting started:</p>
 
-<ul class="flex !list-disc flex-col gap-2 pt-2">
+<ul class="flex list-disc! flex-col gap-2 pt-2">
 	<li class="ml-4">
 		Hold <Key>shift</Key> + drag on the map to draw an obstacle.
 	</li>

package/dist/components/navigation-map/components/nav/obstacles.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import { IconButton, Label, TextInput, Tooltip } from '@viamrobotics/prime-core'
 	import { LngLat, LngLatBounds } from 'maplibre-gl'
+	import { fromStore } from 'svelte/store'
 
 	import type { Geometry, Obstacle } from '../../types'
 
@@ -16,14 +17,15 @@
 
 	const { onupdate }: Props = $props()
 
-	const { map } = useMapLibre()
+	const context = useMapLibre()
+	const map = fromStore(context.map)
 	const nav = useNavigationMap()
 
 	const handleSelect = (selection: { name: string; location: LngLat }) => {
 		const radius = nav.boundingRadius[selection.name]
 		const lngLat = new LngLat(selection.location.lng, selection.location.lat)
 		const bounds = LngLatBounds.fromLngLat(lngLat, radius)
-		map.fitBounds(bounds, {
+		map.current.fitBounds(bounds, {
 			padding: 100,
 			duration: 800,
 			curve: 0.1,
@@ -98,7 +100,7 @@
 
 {#each nav.obstacles as { name, location, geometries, color, label }, index (index)}
 	<li
-		class="group border-b-medium flex min-h-[30px] items-center border-b pl-2 leading-[1] last:border-b-0"
+		class="group border-b-medium flex min-h-7.5 items-center border-b pl-2 leading-none last:border-b-0"
 		class:pb-3={debugMode}
 		class:pt-1={debugMode}
 		class:bg-light={nav.selected === name}

package/dist/components/navigation-map/components/nav/waypoints.svelte

@@ -2,6 +2,7 @@
 	import type { LngLat } from 'maplibre-gl'
 
 	import { IconButton } from '@viamrobotics/prime-core'
+	import { fromStore } from 'svelte/store'
 
 	import { useMapLibre, useMapLibreEvent, Waypoint } from '../../../maplibre'
 	import { useNavigationMap } from '../../use-navigation-map.svelte'
@@ -13,7 +14,8 @@
 
 	const { onaddwaypoint, ondeletewaypoint }: Props = $props()
 
-	const { map } = useMapLibre()
+	const context = useMapLibre()
+	const map = fromStore(context.map)
 	const nav = useNavigationMap()
 
 	const handleDeleteWaypoint = (id: string) => {
@@ -50,7 +52,7 @@
 				icon="image-filter-center-focus"
 				label="Focus waypoint {index}"
 				on:click={() =>
-					map.flyTo({
+					map.current.flyTo({
 						zoom: 15,
 						duration: 800,
 						curve: 0.1,