@viamrobotics/test-widgets 0.0.1 → 0.1.1

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';

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';

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,

package/dist/components/navigation-map/components/obstacle.svelte

@@ -8,7 +8,8 @@
 		type MapLayerTouchEvent,
 		type MapMouseEvent,
 	} from 'maplibre-gl'
-	import * as THREE from 'three'
+	import { fromStore } from 'svelte/store'
+	import { type BufferGeometry, Vector2 } from 'three'
 
 	import type { Obstacle } from '../types'
 
@@ -24,7 +25,8 @@
 
 	const { name, onupdate }: Props = $props()
 
-	const { map } = useMapLibre()
+	const context = useMapLibre()
+	const map = fromStore(context.map)
 	const nav = useNavigationMap()
 
 	let pointerdownTheta = 0
@@ -35,13 +37,13 @@
 
 	let draggingObstacle = $state(false)
 
-	const pointermove = new THREE.Vector2()
-	const pointerdown = new THREE.Vector2()
+	const pointermove = new Vector2()
+	const pointerdown = new Vector2()
 
 	const debugMode = $derived(nav.environment === 'debug')
 	const obstacle = $derived(nav.obstacles.find((item) => item.name === name))
 
-	const handleGeometryCreate = (ref: THREE.BufferGeometry) => {
+	const handleGeometryCreate = (ref: BufferGeometry) => {
 		ref.rotateX(-Math.PI / 2)
 	}
 
@@ -52,7 +54,7 @@
 			return
 		}
 
-		map.dragPan.disable()
+		map.current.dragPan.disable()
 		draggingObstacle = true
 	}
 
@@ -66,7 +68,7 @@
 
 		if (isManipulating) {
 			event.preventDefault()
-			map.getCanvas().classList.add('!cursor-ns-resize')
+			map.current.getCanvas().classList.add('!cursor-ns-resize')
 		}
 
 		pointerdown.set(event.point.x, event.point.y)
@@ -164,17 +166,21 @@
 
 	const handlePointerUp = () => {
 		draggingObstacle = false
-		map.dragPan.enable()
-		map.getCanvas().classList.remove('!cursor-ns-resize')
+		map.current.dragPan.enable()
+		map.current.getCanvas().classList.remove('!cursor-ns-resize')
 	}
 
 	const active = $derived(nav.hovered === name || nav.selected === name)
 
-	$effect.pre(() => {
+	$effect(() => {
 		if (draggingObstacle) {
-			map.on('mousemove', handlePointerMove)
+			map.current.on('mousemove', handlePointerMove)
 		} else {
-			map.off('mousemove', handlePointerMove)
+			map.current.off('mousemove', handlePointerMove)
+		}
+
+		return () => {
+			map.current.off('mousemove', handlePointerMove)
 		}
 	})
 

package/dist/components/navigation-map/plugins/interactivity.js

@@ -1,5 +1,6 @@
 import { useThrelte } from '@threlte/core';
 import { interactivity } from '@threlte/extras';
+import { fromStore } from 'svelte/store';
 import { useMapLibre, useMapLibreThreeRaycast } from '../../maplibre';
 /**
  * Provides interactivity as described in @threlte/extras,
@@ -8,10 +9,11 @@ import { useMapLibre, useMapLibreThreeRaycast } from '../../maplibre';
  */
 export const interactivityPlugin = () => {
     const { camera } = useThrelte();
-    const { map } = useMapLibre();
+    const context = useMapLibre();
+    const map = fromStore(context.map);
     const { pointer, compute } = useMapLibreThreeRaycast(camera);
     interactivity({
-        target: map.getCanvas(),
+        target: map.current.getCanvas(),
         filter: (hits) => {
             // Only return the first hit
             return hits.slice(0, 1);

package/dist/components/widgets/arm/move-to-joint-positions.svelte

@@ -16,6 +16,7 @@
 
 	const { positions, moveToJointPositions, lastError }: Props = $props()
 
+	// svelte-ignore state_referenced_locally
 	let desiredPositions = $state([...positions])
 	let useRadians = $state(false)
 

package/dist/components/widgets/arm/move-to-position.svelte

@@ -18,6 +18,7 @@
 
 	const { endPosition, moveToPosition, lastError }: Props = $props()
 
+	// svelte-ignore state_referenced_locally
 	let desiredPosition = $state({ ...endPosition })
 	let useRadians = $state(false)
 

package/dist/components/widgets/navigation/obstacles/scene.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import { T, useThrelte } from '@threlte/core'
 	import { interactivity } from '@threlte/extras'
+	import { fromStore } from 'svelte/store'
 	import { Camera, type Intersection, Plane, Vector3 } from 'three'
 
 	import {
@@ -16,7 +17,8 @@
 
 	const { view, children }: Props = $props()
 
-	const { map } = useMapLibre()
+	const context = useMapLibre()
+	const map = fromStore(context.map)
 	const { scene, camera, renderer } = $state(useThrelte())
 
 	camera.set(new Camera())
@@ -24,7 +26,7 @@
 	const { pointer, compute } = useMapLibreThreeRaycast(camera)
 
 	interactivity({
-		target: map.getCanvas(),
+		target: map.current.getCanvas(),
 		filter: (hits: Intersection[]) => {
 			// Only return the first hit
 			return hits.slice(0, 1)

package/package.json

@@ -1,117 +1,117 @@
 {
-	"name": "@viamrobotics/test-widgets",
-	"version": "0.0.1",
-	"license": "Apache-2.0",
-	"type": "module",
-	"scripts": {
-		"dev": "vite dev",
-		"build": "vite build && pnpm prepack",
-		"preview": "vite preview",
-		"prepare": "svelte-kit sync || echo ''",
-		"prepack": "svelte-kit sync && svelte-package && publint",
-		"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 . && eslint . --fix",
-		"test:unit": "vitest",
-		"test": "pnpm test:unit -- --run",
-		"test:e2e": "playwright test",
-		"release": "changeset publish"
-	},
-	"files": [
-		"dist",
-		"!dist/**/*.test.*",
-		"!dist/**/*.spec.*"
-	],
-	"sideEffects": [
-		"**/*.css"
-	],
-	"svelte": "./dist/index.js",
-	"types": "./dist/index.d.ts",
-	"exports": {
-		".": {
-			"types": "./dist/index.d.ts",
-			"svelte": "./dist/index.js"
-		}
-	},
-	"repository": {
-		"type": "git",
-		"url": "git+https://github.com/viamrobotics/test-widgets.git"
-	},
-	"peerDependencies": {
-		"svelte": "^5.0.0"
-	},
-	"devDependencies": {
-		"@changesets/cli": "^2.30.0",
-		"@eslint/compat": "^2.0.3",
-		"@eslint/js": "^10.0.1",
-		"@fontsource-variable/public-sans": "^5.2.7",
-		"@fontsource-variable/roboto-mono": "^5.2.8",
-		"@fontsource-variable/space-grotesk": "^5.2.10",
-		"@playwright/test": "^1.59.1",
-		"@sentry/svelte": "^10.47.0",
-		"@svelte-put/resize": "^4.0.0",
-		"@sveltejs/adapter-static": "^3.0.10",
-		"@sveltejs/kit": "^2.55.0",
-		"@sveltejs/package": "^2.5.7",
-		"@sveltejs/vite-plugin-svelte": "^7.0.0",
-		"@tailwindcss/postcss": "^4.2.2",
-		"@tailwindcss/vite": "^4.2.2",
-		"@tanstack/svelte-query": "^6.1.12",
-		"@tanstack/svelte-query-devtools": "^6.1.12",
-		"@testing-library/dom": "^10.4.1",
-		"@testing-library/jest-dom": "^6.9.1",
-		"@testing-library/svelte": "^5.3.1",
-		"@testing-library/user-event": "^14.6.1",
-		"@threlte/core": "^8.5.5",
-		"@threlte/extras": "^9.14.2",
-		"@threlte/test": "^1.0.0",
-		"@types/lodash-es": "^4.17.12",
-		"@types/node": "^25",
-		"@types/three": "^0.183.1",
-		"@viamrobotics/motion-tools": "^1.16.0",
-		"@viamrobotics/prime-core": "^0.1.16",
-		"@viamrobotics/prime-editor": "^0.0.2",
-		"@viamrobotics/sdk": "^0.68.1",
-		"@viamrobotics/svelte-sdk": "^1.1.5",
-		"@viamrobotics/tailwind-config": "^1.0.0",
-		"@viamrobotics/three": "^0.0.9",
-		"@vitest/browser": "^4.1.2",
-		"@vitest/browser-playwright": "^4.1.2",
-		"@vitest/coverage-v8": "^4.1.2",
-		"eslint": "^10.1.0",
-		"eslint-config-prettier": "^10.1.8",
-		"eslint-plugin-perfectionist": "^5.8.0",
-		"eslint-plugin-svelte": "^3.16.0",
-		"eslint-plugin-unicorn": "^64.0.0",
-		"globals": "^17.4.0",
-		"lodash-es": "^4.18.1",
-		"maplibre-gl": "^5.21.1",
-		"mock-match-media": "^1.0.3",
-		"playwright": "^1.59.1",
-		"prettier": "^3.8.1",
-		"prettier-plugin-svelte": "^3.5.1",
-		"prettier-plugin-tailwindcss": "^0.7.2",
-		"publint": "^0.3.18",
-		"runed": "^0.37.1",
-		"svelte": "^5.55.1",
-		"svelte-check": "^4.4.6",
-		"svelte-splitpanes": "^8.0.12",
-		"tailwind-merge": "^3.5.0",
-		"tailwindcss": "^4.2.2",
-		"three": "^0.183.2",
-		"threlte-uikit": "^1.2.1",
-		"type-fest": "^5.5.0",
-		"typescript": "^6.0.2",
-		"typescript-eslint": "^8.58.0",
-		"vite": "^8.0.3",
-		"vite-plugin-devtools-json": "^1.0.0",
-		"vite-plugin-glsl": "^1.5.6",
-		"vitest": "^4.1.2",
-		"vitest-browser-svelte": "^2.1.0"
-	},
-	"packageManager": "pnpm@10.33.0",
-	"engines": {
-		"node": ">=22.12.0"
-	}
-}
+  "name": "@viamrobotics/test-widgets",
+  "version": "0.1.1",
+  "license": "Apache-2.0",
+  "type": "module",
+  "files": [
+    "dist",
+    "!dist/**/*.test.*",
+    "!dist/**/*.spec.*"
+  ],
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "svelte": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "svelte": "./dist/index.js"
+    }
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/viamrobotics/test-widgets.git"
+  },
+  "peerDependencies": {
+    "svelte": "^5.0.0"
+  },
+  "devDependencies": {
+    "@changesets/cli": "^2.30.0",
+    "@eslint/compat": "^2.0.3",
+    "@eslint/js": "^10.0.1",
+    "@fontsource-variable/public-sans": "^5.2.7",
+    "@fontsource-variable/roboto-mono": "^5.2.8",
+    "@fontsource-variable/space-grotesk": "^5.2.10",
+    "@playwright/test": "^1.59.1",
+    "@sentry/svelte": "^10.47.0",
+    "@svelte-put/resize": "^4.0.0",
+    "@sveltejs/adapter-static": "^3.0.10",
+    "@sveltejs/kit": "^2.55.0",
+    "@sveltejs/package": "^2.5.7",
+    "@sveltejs/vite-plugin-svelte": "^7.0.0",
+    "@tailwindcss/postcss": "^4.2.2",
+    "@tailwindcss/vite": "^4.2.2",
+    "@tanstack/svelte-query": "^6.1.12",
+    "@tanstack/svelte-query-devtools": "^6.1.12",
+    "@testing-library/dom": "^10.4.1",
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/svelte": "^5.3.1",
+    "@testing-library/user-event": "^14.6.1",
+    "@threlte/core": "^8.5.5",
+    "@threlte/extras": "^9.14.2",
+    "@threlte/test": "^1.0.0",
+    "@types/lodash-es": "^4.17.12",
+    "@types/node": "^25",
+    "@types/three": "^0.183.1",
+    "@viamrobotics/motion-tools": "^1.16.0",
+    "@viamrobotics/prime-core": "^0.1.16",
+    "@viamrobotics/prime-editor": "^0.0.2",
+    "@viamrobotics/sdk": "^0.68.1",
+    "@viamrobotics/svelte-sdk": "^1.1.5",
+    "@viamrobotics/tailwind-config": "^1.0.0",
+    "@viamrobotics/three": "^0.0.9",
+    "@vitest/browser": "^4.1.2",
+    "@vitest/browser-playwright": "^4.1.2",
+    "@vitest/coverage-v8": "^4.1.2",
+    "eslint": "^10.1.0",
+    "eslint-config-prettier": "^10.1.8",
+    "eslint-plugin-perfectionist": "^5.8.0",
+    "eslint-plugin-svelte": "^3.16.0",
+    "eslint-plugin-unicorn": "^64.0.0",
+    "globals": "^17.4.0",
+    "lodash-es": "^4.18.1",
+    "maplibre-gl": "^5.21.1",
+    "mock-match-media": "^1.0.3",
+    "playwright": "^1.59.1",
+    "prettier": "^3.8.1",
+    "prettier-plugin-svelte": "^3.5.1",
+    "prettier-plugin-tailwindcss": "^0.7.2",
+    "publint": "^0.3.18",
+    "runed": "^0.37.1",
+    "svelte": "^5.55.1",
+    "svelte-check": "^4.4.6",
+    "svelte-splitpanes": "^8.0.12",
+    "tailwind-merge": "^3.5.0",
+    "tailwindcss": "^4.2.2",
+    "three": "^0.183.2",
+    "threlte-uikit": "^1.2.1",
+    "type-fest": "^5.5.0",
+    "typescript": "^6.0.2",
+    "typescript-eslint": "^8.58.0",
+    "vite": "^8.0.3",
+    "vite-plugin-devtools-json": "^1.0.0",
+    "vite-plugin-glsl": "^1.5.6",
+    "vitest": "^4.1.2",
+    "vitest-browser-svelte": "^2.1.0"
+  },
+  "engines": {
+    "node": ">=22.12.0"
+  },
+  "scripts": {
+    "dev": "vite dev",
+    "build": "vite build && pnpm prepack",
+    "preview": "vite preview",
+    "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --fail-on-warnings",
+    "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
+    "lint": "prettier --check . && eslint .",
+    "format": "prettier --write . && eslint . --fix",
+    "test:unit": "vitest",
+    "test": "pnpm test:unit -- --run",
+    "test:e2e": "playwright test",
+    "release": "changeset publish"
+  }
+}