@viamrobotics/motion-tools 0.5.1 → 0.5.3

package/README.md

@@ -9,31 +9,6 @@ To visit the visualizer, go to `http://localhost:5173/`
 
 Open the machine config page (bottom right) and enter in connection details to visualize a specific machine.
 
-## Todo
-
------ hard -----
-
-- animated sequence of motion plan
-- Give better fetching / connection state info
-- configure frames in app
-- embed in teleop
-
------ medium -----
-
-- remote IP access when custom drawing, to draw on remote computers
-- geometries need to be parented to parent
-- color pallet for resource to color
-- measurement tool
-
------ easy ------
-
-- double click to set trackball center in object view
-- Set default pointcloud color in settings
-- points are not sized right in ortho cam view
-- bounding boxes should include just the thing and not children
-
---- action items ----
-
 ## Env files
 
 To add a list of connection configs in an `.env.local` file, use the following format:

package/dist/color.js

@@ -14,7 +14,7 @@ const toHex = (x) => {
 const oklchToHex = (raw) => {
     const match = raw.match(/oklch\(\s*([\d.]+)%\s+([\d.]+)\s+([\d.]+)\s*\)/);
     if (!match) {
-        return '#000000';
+        return raw;
     }
     const l = parseFloat(match[1]) / 100;
     const c = parseFloat(match[2]);
@@ -46,11 +46,10 @@ const oklchToHex = (raw) => {
  * @returns A new THREE.Color instance with the darkened color.
  */
 export const darkenColor = (value, percent) => {
-    const color = new Color(value);
-    const hsl = { h: 0, s: 0, l: 0 };
-    color.getHSL(hsl);
+    const original = new Color(value);
+    const hsl = original.getHSL({ h: 0, s: 0, l: 0 });
     hsl.l = Math.max(0, hsl.l * (1 - percent / 100));
-    return color.setHSL(hsl.h, hsl.s, hsl.l);
+    return new Color().setHSL(hsl.h, hsl.s, hsl.l);
 };
 export const colors = {
     selected: oklchToHex(twColors.red['900']),

package/dist/components/App.svelte

@@ -33,10 +33,10 @@
 				{#snippet children({ focus })}
 					<Scene>
 						{@render appChildren?.()}
-
-						<XR />
 					</Scene>
 
+					<XR />
+
 					<DomPortal element={root}>
 						<Dashboard />
 						<Details />

package/dist/components/Focus.svelte

@@ -1,12 +1,10 @@
 <script lang="ts">
-	import { isInstanceOf, T } from '@threlte/core'
+	import { T } from '@threlte/core'
 	import { TrackballControls, Gizmo } from '@threlte/extras'
-	import { useFocused, useFocusedObject3d } from '../hooks/useSelection.svelte'
-	import { Keybindings } from '../keybindings'
+	import { useFocusedObject3d } from '../hooks/useSelection.svelte'
 	import { Box3, Vector3 } from 'three'
 	import Camera from './Camera.svelte'
 
-	const focus = useFocused()
 	const focusedObject = useFocusedObject3d()
 	const object3d = $derived(focusedObject.current)
 
@@ -21,20 +19,8 @@
 			center = box.getCenter(vec).toArray()
 		}
 	})
-
-	const onkeydown = ({ key }: KeyboardEvent) => {
-		if (key === Keybindings.ESCAPE) {
-			focus.set(undefined)
-		} else if (key === Keybindings.UP || key === Keybindings.DOWN) {
-			if (object3d && 'material' in object3d && isInstanceOf(object3d.material, 'PointsMaterial')) {
-				object3d.material.size += key === Keybindings.UP ? 0.001 : -0.001
-			}
-		}
-	}
 </script>
 
-<svelte:window {onkeydown} />
-
 <Camera position={[2, 0, 0]}>
 	<TrackballControls target={center}>
 		<Gizmo />

package/dist/components/Frame.svelte

@@ -5,7 +5,7 @@
 	import { useObjectEvents } from '../hooks/useObjectEvents.svelte'
 	import Geometry from './Geometry.svelte'
 	import { useSelected } from '../hooks/useSelection.svelte'
-	import { colors } from '../color'
+	import { colors, darkenColor } from '../color'
 
 	interface Props {
 		uuid: string
@@ -24,7 +24,9 @@
 
 <Geometry
 	{uuid}
-	color={selected.current === uuid ? colors.selected : undefined}
+	color={selected.current === uuid
+		? `#${darkenColor(rest.metadata.color ?? colors.default, 75).getHexString()}`
+		: undefined}
 	{...events}
 	{...rest}
 />

package/dist/components/Geometry.svelte

@@ -64,7 +64,8 @@
 	{...rest}
 >
 	{#if geometry?.case === 'mesh'}
-		{@const meshGeometry = plyLoader.parse(atob(geometry.value.mesh as unknown as string))}
+		{@const mesh = geometry.value.mesh as Uint8Array<ArrayBuffer>}
+		{@const meshGeometry = plyLoader.parse(typeof mesh === 'string' ? atob(mesh) : mesh.buffer)}
 		<T
 			is={meshGeometry}
 			{oncreate}

package/dist/components/KeyboardControls.svelte

@@ -0,0 +1,102 @@
+<script lang="ts">
+	import { MathUtils } from 'three'
+	import { useTask } from '@threlte/core'
+	import type { CameraControlsRef } from '@threlte/extras'
+	import { PressedKeys } from 'runed'
+	import { useFocused } from '../hooks/useSelection.svelte'
+	import { useSettings } from '../hooks/useSettings.svelte'
+
+	interface Props {
+		cameraControls: CameraControlsRef
+	}
+
+	let { cameraControls }: Props = $props()
+
+	const focus = useFocused()
+	const settings = useSettings()
+
+	const keys = new PressedKeys()
+	const w = $derived(keys.has('w'))
+	const s = $derived(keys.has('s'))
+	const a = $derived(keys.has('a'))
+	const d = $derived(keys.has('d'))
+	const up = $derived(keys.has('arrowup'))
+	const left = $derived(keys.has('arrowleft'))
+	const down = $derived(keys.has('arrowdown'))
+	const right = $derived(keys.has('arrowright'))
+	const any = $derived(w || s || a || d || up || left || down || right)
+
+	const { start, stop } = useTask(
+		(delta) => {
+			const dt = delta * 1000
+
+			if (a) {
+				cameraControls.truck(-0.01 * dt, 0, true)
+			}
+
+			if (d) {
+				cameraControls.truck(0.01 * dt, 0, true)
+			}
+
+			if (w) {
+				cameraControls.forward(0.01 * dt, true)
+			}
+
+			if (s) {
+				cameraControls.forward(-0.01 * dt, true)
+			}
+
+			if (left) {
+				cameraControls.rotate(-0.1 * MathUtils.DEG2RAD * dt, 0, true)
+			}
+
+			if (right) {
+				cameraControls.rotate(0.1 * MathUtils.DEG2RAD * dt, 0, true)
+			}
+
+			if (up) {
+				cameraControls.rotate(0, -0.05 * MathUtils.DEG2RAD * dt, true)
+			}
+
+			if (down) {
+				cameraControls.rotate(0, 0.05 * MathUtils.DEG2RAD * dt, true)
+			}
+		},
+		{ autoStart: false, autoInvalidate: false }
+	)
+
+	$effect.pre(() => {
+		if (any) {
+			start()
+		} else {
+			stop()
+		}
+	})
+
+	keys.onKeys('escape', () => {
+		if (keys.has('escape')) {
+			focus.set(undefined)
+		}
+	})
+
+	keys.onKeys('c', () => {
+		settings.current.cameraMode =
+			settings.current.cameraMode === 'perspective' ? 'orthographic' : 'perspective'
+	})
+
+	keys.onKeys('1', () => {
+		settings.current.transformMode = 'translate'
+	})
+
+	keys.onKeys('2', () => {
+		settings.current.transformMode = 'rotate'
+	})
+
+	keys.onKeys('3', () => {
+		settings.current.transformMode = 'scale'
+	})
+
+	keys.onKeys(['ctrl', 'x'], () => {
+		settings.current.enableXR = !settings.current.enableXR
+	})
+</script>

package/dist/components/KeyboardControls.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { CameraControlsRef } from '@threlte/extras';
+interface Props {
+    cameraControls: CameraControlsRef;
+}
+declare const KeyboardControls: import("svelte").Component<Props, {}, "">;
+type KeyboardControls = ReturnType<typeof KeyboardControls>;
+export default KeyboardControls;

package/dist/components/Scene.svelte

@@ -1,11 +1,16 @@
 <script lang="ts">
 	import { Color, Vector3 } from 'three'
 	import { T } from '@threlte/core'
-	import { Gizmo, Grid, interactivity } from '@threlte/extras'
+	import {
+		CameraControls,
+		type CameraControlsRef,
+		Gizmo,
+		Grid,
+		interactivity,
+	} from '@threlte/extras'
 	import { PortalTarget } from './portal'
 	import Frames from './Frames.svelte'
 	import Pointclouds from './Pointclouds.svelte'
-	import CameraControls from './CameraControls.svelte'
 	import Selected from './Selected.svelte'
 	import Focus from './Focus.svelte'
 	import StaticGeometries from './StaticGeometries.svelte'
@@ -15,6 +20,8 @@
 	import type { Snippet } from 'svelte'
 	import { useXR } from '@threlte/xr'
 	import { useTransformControls } from '../hooks/useControls.svelte'
+	import KeyboardControls from './KeyboardControls.svelte'
+	import { useOrigin } from './xr/useOrigin.svelte'
 
 	interface Props {
 		children?: Snippet
@@ -34,6 +41,7 @@
 
 	const focused = useFocused()
 	const transformControls = useTransformControls()
+	const origin = useOrigin()
 
 	const { isPresenting } = useXR()
 </script>
@@ -43,12 +51,19 @@
 	args={[new Color('white')]}
 />
 
-<T.Group rotation.x={$isPresenting ? -Math.PI / 2 : 0}>
+<T.Group
+	position={origin.position}
+	rotation.x={$isPresenting ? -Math.PI / 2 : 0}
+	rotation.z={origin.rotation}
+>
 	{#if focused.current === undefined}
 		{#if !$isPresenting}
 			<Camera position={[3, 3, 3]}>
 				<CameraControls enabled={!transformControls.active}>
-					<Gizmo />
+					{#snippet children({ ref }: { ref: CameraControlsRef })}
+						<KeyboardControls cameraControls={ref} />
+						<Gizmo />
+					{/snippet}
 				</CameraControls>
 			</Camera>
 		{/if}

package/dist/components/SceneProviders.svelte

@@ -14,6 +14,7 @@
 	import { provideMotionClient } from '../hooks/useMotionClient.svelte'
 	import { provideLogs } from '../hooks/useLogs.svelte'
 	import { provideSettings } from '../hooks/useSettings.svelte'
+	import { provideOrigin } from './xr/useOrigin.svelte'
 
 	interface Props {
 		children: Snippet<[{ focus: boolean }]>
@@ -29,6 +30,7 @@
 	provideRefreshRates()
 	provideLogs()
 
+	provideOrigin()
 	provideStaticGeometries()
 	provideShapes()
 

package/dist/components/StaticGeometries.svelte

@@ -3,45 +3,27 @@
 	import { useSelected } from '../hooks/useSelection.svelte'
 	import { useStaticGeometries } from '../hooks/useStaticGeometries.svelte'
 	import { useTransformControls } from '../hooks/useControls.svelte'
-	import { Keybindings } from '../keybindings'
-	import { PersistedState } from 'runed'
+	import { PressedKeys } from 'runed'
 	import { quaternionToPose, scaleToDimensions, vector3ToPose } from '../transform'
 	import { Quaternion, Vector3 } from 'three'
 	import Frame from './Frame.svelte'
+	import { useSettings } from '../hooks/useSettings.svelte'
 
-	type Modes = 'translate' | 'rotate' | 'scale'
-
+	const settings = useSettings()
 	const transformControls = useTransformControls()
 	const geometries = useStaticGeometries()
 	const selected = useSelected()
 
-	let mode = new PersistedState<Modes>('transform-mode', 'translate')
+	const mode = $derived(settings.current.transformMode)
 
 	const quaternion = new Quaternion()
 	const vector3 = new Vector3()
-</script>
 
-<svelte:window
-	onkeydown={(event) => {
-		if (event.metaKey || event.ctrlKey) {
-			return
-		}
+	const keys = new PressedKeys()
 
-		const key = event.key.toLowerCase()
-
-		if (key === Keybindings.ADD_GEOMETRY) {
-			geometries.add()
-		} else if (key === Keybindings.REMOVE_GEOMETRY) {
-			geometries.remove(selected.current ?? '')
-		} else if (key === Keybindings.TRANSLATE) {
-			mode.current = 'translate'
-		} else if (key === Keybindings.ROTATE) {
-			mode.current = 'rotate'
-		} else if (key === Keybindings.SCALE) {
-			mode.current = 'scale'
-		}
-	}}
-/>
+	keys.onKeys('=', () => geometries.add())
+	keys.onKeys('-', () => geometries.remove(selected.current ?? ''))
+</script>
 
 {#each geometries.current as object (object.uuid)}
 	<Frame
@@ -53,20 +35,20 @@
 	>
 		{#snippet children({ ref })}
 			{#if selected.current === ref.uuid}
-				{#key mode.current}
+				{#key mode}
 					<TransformControls
 						object={ref}
-						mode={mode.current}
+						{mode}
 						onmouseDown={() => transformControls.setActive(true)}
 						onmouseUp={() => {
 							transformControls.setActive(false)
 
-							if (mode.current === 'translate') {
+							if (mode === 'translate') {
 								vector3ToPose(ref.getWorldPosition(vector3), object.pose)
-							} else if (mode.current === 'rotate') {
+							} else if (mode === 'rotate') {
 								quaternionToPose(ref.getWorldQuaternion(quaternion), object.pose)
 								ref.quaternion.copy(quaternion)
-							} else if (mode.current === 'scale' && object.geometry?.case === 'box') {
+							} else if (mode === 'scale' && object.geometry?.case === 'box') {
 								scaleToDimensions(ref.scale, object.geometry)
 								ref.scale.setScalar(1)
 							}

package/dist/components/StaticGeometries.svelte.d.ts

@@ -1,18 +1,3 @@
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const StaticGeometries: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type StaticGeometries = InstanceType<typeof StaticGeometries>;
+declare const StaticGeometries: import("svelte").Component<Record<string, never>, {}, "">;
+type StaticGeometries = ReturnType<typeof StaticGeometries>;
 export default StaticGeometries;

package/dist/components/dashboard/Dashboard.svelte

@@ -5,15 +5,6 @@
 	const settings = useSettings()
 </script>
 
-<svelte:window
-	onkeydown={({ key }) => {
-		if (key.toLowerCase() === 'c') {
-			settings.current.cameraMode =
-				settings.current.cameraMode === 'perspective' ? 'orthographic' : 'perspective'
-		}
-	}}
-/>
-
 <div class="absolute top-2 flex w-full justify-center">
 	<!-- transform -->
 	<!-- <fieldset>

package/dist/components/portal/PortalTarget.svelte

@@ -8,11 +8,11 @@
 	let { id = 'default' }: Props = $props()
 
 	const portals = usePortalContext()
-	const childArray = $derived(portals.get(id))
+	const childrenArray = $derived(portals.get(id))
 </script>
 
-{#if childArray}
-	{#each childArray as children (children)}
-		{@render children?.()}
+{#if childrenArray !== undefined}
+	{#each childrenArray as children (children)}
+		{@render children()}
 	{/each}
 {/if}

package/dist/components/xr/Controllers.svelte

@@ -1,56 +1,48 @@
 <script lang="ts">
 	import { Controller } from '@threlte/xr'
-	import { useGamepad } from '@threlte/extras'
+	// import { useGamepad } from '@threlte/extras'
 
-	import { BaseClient } from '@viamrobotics/sdk'
+	// import { BaseClient } from '@viamrobotics/sdk'
 
 	import { RigidBody } from '@threlte/rapier'
 	import HandCollider from './HandCollider.svelte'
-	import { usePartID } from '../../hooks/usePartID.svelte'
-	import { useResourceNames, useRobotClient } from '@viamrobotics/svelte-sdk'
-
-	const gamepadLeft = useGamepad({ xr: true, hand: 'left' })
-
-	const partID = usePartID()
-	const resources = useResourceNames(() => partID.current)
-	const robotClient = useRobotClient(() => partID.current)
-	const resource = $derived(resources.current.find((r) => r.subtype === 'base'))
-	const baseClient = $derived(
-		robotClient.current && resource ? new BaseClient(robotClient.current, resource.name) : undefined
-	)
-
-	const linear = { x: 0, y: 0, z: 0 }
-	const angular = { x: 0, y: 0, z: 0 }
-
-	gamepadLeft.squeeze.on('change', (event) => {
-		linear.y = -event.value
-		baseClient?.setPower(linear, angular)
-	})
-
-	gamepadLeft.trigger.on('change', (event) => {
-		if (typeof event.value === 'number') {
-			linear.y = event.value
-			baseClient?.setPower(linear, angular)
-		}
-	})
-
-	gamepadLeft.thumbstick.on('change', (event) => {
-		if (typeof event.value === 'object') {
-			angular.z = event.value.x
-			baseClient?.setPower(linear, angular)
-		}
-	})
-
-	const onselectstart = () => {}
-
-	const onselectend = () => {}
+	// import { usePartID } from '../../hooks/usePartID.svelte'
+	// import { useResourceNames, useRobotClient } from '@viamrobotics/svelte-sdk'
+
+	// const gamepadLeft = useGamepad({ xr: true, hand: 'left' })
+
+	// const partID = usePartID()
+	// const resources = useResourceNames(() => partID.current)
+	// const robotClient = useRobotClient(() => partID.current)
+	// const resource = $derived(resources.current.find((r) => r.subtype === 'base'))
+	// const baseClient = $derived(
+	// 	robotClient.current && resource ? new BaseClient(robotClient.current, resource.name) : undefined
+	// )
+
+	// const linear = { x: 0, y: 0, z: 0 }
+	// const angular = { x: 0, y: 0, z: 0 }
+
+	// gamepadLeft.squeeze.on('change', (event) => {
+	// 	linear.y = -event.value
+	// 	baseClient?.setPower(linear, angular)
+	// })
+
+	// gamepadLeft.trigger.on('change', (event) => {
+	// 	if (typeof event.value === 'number') {
+	// 		linear.y = event.value
+	// 		baseClient?.setPower(linear, angular)
+	// 	}
+	// })
+
+	// gamepadLeft.thumbstick.on('change', (event) => {
+	// 	if (typeof event.value === 'object') {
+	// 		angular.z = event.value.x
+	// 		baseClient?.setPower(linear, angular)
+	// 	}
+	// })
 </script>
 
-<Controller
-	left
-	{onselectstart}
-	{onselectend}
->
+<Controller left>
 	{#snippet grip()}
 		<RigidBody type="kinematicPosition">
 			<HandCollider />
@@ -58,11 +50,7 @@
 	{/snippet}
 </Controller>
 
-<Controller
-	right
-	{onselectstart}
-	{onselectend}
->
+<Controller right>
 	{#snippet grip()}
 		<RigidBody type="kinematicPosition">
 			<HandCollider />

package/dist/components/xr/Controllers.svelte.d.ts

@@ -1,3 +1,18 @@
-declare const Controllers: import("svelte").Component<Record<string, never>, {}, "">;
-type Controllers = ReturnType<typeof Controllers>;
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const Controllers: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type Controllers = InstanceType<typeof Controllers>;
 export default Controllers;

package/dist/components/xr/Hands.svelte

@@ -2,6 +2,7 @@
 	import { Hand } from '@threlte/xr'
 
 	console.log('hands')
+
 	const onpinchstart = () => {
 		console.log('start')
 	}

package/dist/components/xr/OriginMarker.svelte

@@ -4,62 +4,112 @@
 	import { Collider, RigidBody } from '@threlte/rapier'
 	import { RigidBody as RigidBodyType } from '@dimforge/rapier3d-compat'
 	import { useController } from '@threlte/xr'
-	import { Group, Mesh, Quaternion, Vector3 } from 'three'
+	import { Euler, Group, Quaternion, Vector3 } from 'three'
+	import { useOrigin } from './useOrigin.svelte'
+
+	const origin = useOrigin()
 
 	const height = 0.1
 	const radius = 0.05
 
 	const group = new Group()
-	const mesh = new Mesh()
+	const innerGroup = new Group()
 
 	const vec3 = new Vector3()
+
 	const quaternion = new Quaternion()
+	const euler = new Euler()
 
 	const offset = new Vector3()
+
 	const position = new Vector3()
 
-	let hovering = $state(false)
 	let dragging = $state(false)
 	let rotating = $state(false)
 
-	let rigidBody: RigidBodyType | undefined = $state()
+	let currentDistance = 0
+	const rotateDown = new Vector3()
+
+	let rigidBody = $state<RigidBodyType>()
 
 	const left = useController('left')
+	const right = useController('right')
+
 	const leftPad = useGamepad({ xr: true, hand: 'left' })
+	const rightPad = useGamepad({ xr: true, hand: 'right' })
 
 	leftPad.trigger.on('down', () => {
+		const grip = $left?.grip
+
+		if (!grip) {
+			return
+		}
+
 		dragging = true
-		mesh.getWorldPosition(vec3)
+		innerGroup.getWorldPosition(vec3)
 		offset.copy($left!.grip.position).sub(vec3)
 	})
 	leftPad.trigger.on('up', () => (dragging = false))
 
-	leftPad.squeeze.on('down', () => {
+	rightPad.trigger.on('down', () => {
+		const grip = $right?.grip
+
+		if (!grip) {
+			return
+		}
+
 		rotating = true
-		mesh.getWorldQuaternion(quaternion)
+		rotateDown.copy($right?.grip.position)
+		currentDistance = euler.z
 	})
-	leftPad.squeeze.on('up', () => (rotating = false))
-
-	const onsensorenter = () => (hovering = true)
-	const onsensorexit = () => (hovering = false)
+	rightPad.trigger.on('up', () => (rotating = false))
 
-	const { start, stop } = useTask(
+	const dragTask = useTask(
 		() => {
 			if (!$left || !rigidBody) return
 
 			position.copy($left.grip.position).sub(offset)
 
+			origin.set(position)
+
 			rigidBody.setNextKinematicTranslation({ x: position.x, y: position.y, z: position.z })
 		},
 		{ autoStart: false }
 	)
 
-	$effect(() => (hovering && dragging ? start() : stop()))
-</script>
+	const rotateTask = useTask(
+		() => {
+			if (!$right || !rigidBody) return
 
-{#if rotating}
-	<!-- TODO -->
-{/if}
+			const distance = rotateDown.distanceToSquared($right.grip.position)
+
+			const rotation = rigidBody.rotation()
+			quaternion.copy(rotation)
+			euler.setFromQuaternion(quaternion)
+			euler.z = distance + currentDistance
+			origin.set(undefined, euler.z)
+
+			rigidBody.setNextKinematicRotation(quaternion.setFromEuler(euler))
+		},
+		{ autoStart: false }
+	)
+
+	$effect.pre(() => {
+		if (dragging) {
+			dragTask.start()
+		} else {
+			dragTask.stop()
+		}
+	})
+
+	$effect.pre(() => {
+		if (rotating) {
+			rotateTask.start()
+		} else {
+			rotateTask.stop()
+		}
+	})
+</script>
 
 <T
 	is={group}
@@ -73,23 +123,13 @@
 			sensor
 			shape="cone"
 			args={[height / 2, radius]}
-			{onsensorenter}
-			{onsensorexit}
 		>
-			<T is={mesh}>
-				<T.ConeGeometry
-					args={[radius, height]}
-					oncreate={(ref) => {
-						ref.rotateX(-Math.PI / 2)
-						ref.translate(0, 0, height / 2)
-					}}
-				/>
-				<T.MeshStandardMaterial color={hovering ? 'hotpink' : 'red'} />
-
+			<T is={innerGroup}>
 				<Grid
 					plane="xy"
 					position.y={0.05}
-					fadeDistance={1}
+					fadeDistance={5}
+					fadeOrigin={new Vector3()}
 					cellSize={0.1}
 					cellColor="#fff"
 					sectionColor="#fff"

package/dist/components/xr/XR.svelte

@@ -1,23 +1,23 @@
 <script lang="ts">
-	import { PersistedState } from 'runed'
-	import { XR, XRButton } from '@threlte/xr'
+	import { T } from '@threlte/core'
+	import { useXR, XR, XRButton } from '@threlte/xr'
 	import OriginMarker from './OriginMarker.svelte'
 	import DomPortal from '../DomPortal.svelte'
+	import { useSettings } from '../../hooks/useSettings.svelte'
+	import Controllers from './Controllers.svelte'
 
-	const enableXR = new PersistedState('enable-xr', false)
+	const { isPresenting } = useXR()
+	const settings = useSettings()
+	const enableXR = $derived(settings.current.enableXR)
 </script>
 
-<svelte:window
-	onkeydown={(event) => {
-		if (event.ctrlKey && event.key.toLowerCase() === 'a') {
-			enableXR.current = !enableXR.current
-		}
-	}}
-/>
-
-{#if enableXR.current}
+{#if enableXR}
 	<XR>
-		<OriginMarker />
+		<T.Group rotation.x={$isPresenting ? -Math.PI / 2 : 0}>
+			<OriginMarker />
+		</T.Group>
+
+		<Controllers />
 	</XR>
 
 	<DomPortal>

package/dist/components/xr/XR.svelte.d.ts

@@ -1,18 +1,3 @@
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const Xr: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type Xr = InstanceType<typeof Xr>;
+declare const Xr: import("svelte").Component<Record<string, never>, {}, "">;
+type Xr = ReturnType<typeof Xr>;
 export default Xr;

package/dist/components/xr/useAnchors.svelte.d.ts

@@ -0,0 +1,2 @@
+export declare const provideAnchors: () => void;
+export declare const useAnchors: () => void;

package/dist/components/xr/useAnchors.svelte.js

@@ -0,0 +1,55 @@
+import { useTask, useThrelte, watch } from '@threlte/core';
+import { useXR } from '@threlte/xr';
+import { getContext, setContext } from 'svelte';
+import { Matrix4 } from 'three';
+const key = Symbol('anchors-context');
+export const provideAnchors = () => {
+    const matrix4 = new Matrix4();
+    const { renderer } = useThrelte();
+    const { xrFrame, isPresenting } = useXR();
+    const map = new WeakMap();
+    let space = renderer.xr.getReferenceSpace();
+    const createAnchor = (position, orientation) => {
+        space ??= renderer.xr.getReferenceSpace();
+        if (space === null)
+            return;
+        const pose = new XRRigidTransform(position, orientation);
+        return xrFrame.current.createAnchor?.(pose, space);
+    };
+    const { start, stop } = useTask(() => {
+        space ??= renderer.xr.getReferenceSpace();
+        if (!space) {
+            return;
+        }
+        const frame = xrFrame.current;
+        if (!frame.trackedAnchors) {
+            return;
+        }
+        for (const anchor of frame.trackedAnchors) {
+            const object3d = map.get(anchor);
+            if (!object3d) {
+                continue;
+            }
+            const anchorPose = frame.getPose(anchor.anchorSpace, space);
+            if (!anchorPose) {
+                continue;
+            }
+            matrix4.fromArray(anchorPose.transform.matrix);
+            object3d.applyMatrix4(matrix4);
+        }
+    });
+    watch(isPresenting, ($isPresenting) => {
+        if ($isPresenting) {
+            start();
+        }
+        else {
+            stop();
+        }
+    });
+    setContext(key, {
+        createAnchor,
+    });
+};
+export const useAnchors = () => {
+    getContext(key);
+};

package/dist/components/xr/useOrigin.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { Vector3, Vector3Tuple } from 'three';
+interface Context {
+    position: Vector3Tuple;
+    rotation: number;
+    set: (pos?: Vector3, rot?: number) => void;
+}
+export declare const provideOrigin: () => void;
+export declare const useOrigin: () => Context;
+export {};

package/dist/components/xr/useOrigin.svelte.js

@@ -0,0 +1,27 @@
+import { getContext, setContext } from 'svelte';
+const key = Symbol('origin-context');
+export const provideOrigin = () => {
+    const position = $state([0, 0, 0]);
+    let rotation = $state(0);
+    setContext(key, {
+        get position() {
+            return position;
+        },
+        get rotation() {
+            return rotation;
+        },
+        set(pos, rot) {
+            if (pos) {
+                position[0] = pos.x;
+                position[1] = pos.y;
+                position[2] = pos.z;
+            }
+            if (rot) {
+                rotation = rot;
+            }
+        },
+    });
+};
+export const useOrigin = () => {
+    return getContext(key);
+};

package/dist/hooks/useObjectEvents.svelte.d.ts

@@ -4,6 +4,7 @@ export declare const useObjectEvents: (uuid: () => string) => {
     onpointerenter: (event: IntersectionEvent<MouseEvent>) => void;
     onpointerleave: (event: IntersectionEvent<MouseEvent>) => void;
     ondblclick: (event: IntersectionEvent<MouseEvent>) => void;
+    onpointerdown: (event: IntersectionEvent<MouseEvent>) => void;
     onclick: (event: IntersectionEvent<MouseEvent>) => void;
     onpointermissed: () => void;
 };

package/dist/hooks/useObjectEvents.svelte.js

@@ -1,11 +1,13 @@
 import { useCursor } from '@threlte/extras';
 import { useFocused, useSelected } from './useSelection.svelte';
 import { useVisibility } from './useVisibility.svelte';
+import { Vector2 } from 'three';
 export const useObjectEvents = (uuid) => {
     const { onPointerEnter, onPointerLeave } = useCursor();
     const selected = useSelected();
     const focused = useFocused();
     const visibility = useVisibility();
+    const down = new Vector2();
     return {
         get visible() {
             return visibility.get(uuid());
@@ -22,9 +24,14 @@ export const useObjectEvents = (uuid) => {
             event.stopPropagation();
             focused.set(uuid());
         },
+        onpointerdown: (event) => {
+            down.copy(event.pointer);
+        },
         onclick: (event) => {
             event.stopPropagation();
-            selected.set(uuid());
+            if (down.distanceToSquared(event.pointer) < 0.1) {
+                selected.set(uuid());
+            }
         },
         onpointermissed: () => selected.set(),
     };

package/dist/hooks/useSettings.svelte.d.ts

@@ -1,5 +1,7 @@
 interface Settings {
     cameraMode: 'orthographic' | 'perspective';
+    transformMode: 'translate' | 'rotate' | 'scale';
+    enableXR: boolean;
 }
 interface Context {
     current: Settings;

package/dist/hooks/useSettings.svelte.js

@@ -3,12 +3,14 @@ import { getContext, setContext } from 'svelte';
 const key = Symbol('dashboard-context');
 const defaults = () => ({
     cameraMode: 'perspective',
+    transformMode: 'translate',
+    enableXR: false,
 });
 export const provideSettings = () => {
     let settings = $state(defaults());
     get('motion-tools-settings').then((response) => {
         if (response) {
-            settings = response;
+            settings = { ...settings, ...response };
         }
     });
     $effect(() => {

package/dist/lib.d.ts

@@ -1,5 +1,3 @@
-export { default as CameraControls } from './components/CameraControls.svelte';
-export { type default as CameraController } from 'camera-controls';
 export { default as Geometry } from './components/Geometry.svelte';
 export { default as AxesHelper } from './components/AxesHelper.svelte';
 export { BatchedArrow } from './three/BatchedArrow';

package/dist/lib.js

@@ -1,6 +1,4 @@
 // Components
-export { default as CameraControls } from './components/CameraControls.svelte';
-export {} from 'camera-controls';
 export { default as Geometry } from './components/Geometry.svelte';
 export { default as AxesHelper } from './components/AxesHelper.svelte';
 // Classes

package/package.json

@@ -1,71 +1,72 @@
 {
   "name": "@viamrobotics/motion-tools",
-  "version": "0.5.1",
+  "version": "0.5.3",
   "description": "Motion visualization with Viam",
   "license": "Apache-2.0",
   "type": "module",
   "devDependencies": {
-    "@ag-grid-community/client-side-row-model": "^32.3.5",
-    "@ag-grid-community/core": "^32.3.5",
-    "@ag-grid-community/styles": "^32.3.5",
-    "@changesets/cli": "^2.29.4",
-    "@dimforge/rapier3d-compat": "^0.17.3",
-    "@eslint/compat": "^1.2.9",
-    "@eslint/js": "^9.28.0",
-    "@playwright/test": "^1.52.0",
+    "@ag-grid-community/client-side-row-model": "32.3.5",
+    "@ag-grid-community/core": "32.3.5",
+    "@ag-grid-community/styles": "32.3.5",
+    "@changesets/cli": "2.29.4",
+    "@dimforge/rapier3d-compat": "0.17.3",
+    "@eslint/compat": "1.3.0",
+    "@eslint/js": "9.28.0",
+    "@playwright/test": "1.53.0",
     "@skeletonlabs/skeleton": "3.1.3",
     "@skeletonlabs/skeleton-svelte": "1.2.3",
-    "@sveltejs/adapter-static": "^3.0.8",
-    "@sveltejs/kit": "^2.21.3",
-    "@sveltejs/package": "^2.3.11",
-    "@sveltejs/vite-plugin-svelte": "^5.1.0",
-    "@tailwindcss/forms": "^0.5.10",
-    "@tailwindcss/vite": "^4.1.8",
-    "@tanstack/svelte-query": "^5.80.6",
-    "@tanstack/svelte-query-devtools": "^5.80.6",
-    "@testing-library/jest-dom": "^6.6.3",
-    "@testing-library/svelte": "^5.2.8",
-    "@threlte/core": "^8.0.4",
-    "@threlte/extras": "^9.2.1",
-    "@threlte/rapier": "^3.1.4",
-    "@threlte/xr": "^1.0.6",
-    "@types/bun": "^1.2.15",
-    "@types/lodash-es": "^4.17.12",
-    "@types/three": "^0.177.0",
-    "@typescript-eslint/eslint-plugin": "^8.33.1",
-    "@typescript-eslint/parser": "^8.33.1",
-    "@viamrobotics/prime-core": "^0.1.5",
+    "@sveltejs/adapter-static": "3.0.8",
+    "@sveltejs/kit": "2.21.4",
+    "@sveltejs/package": "2.3.11",
+    "@sveltejs/vite-plugin-svelte": "5.1.0",
+    "@tailwindcss/forms": "0.5.10",
+    "@tailwindcss/vite": "4.1.10",
+    "@tanstack/svelte-query": "5.80.6",
+    "@tanstack/svelte-query-devtools": "5.80.6",
+    "@testing-library/jest-dom": "6.6.3",
+    "@testing-library/svelte": "5.2.8",
+    "@threlte/core": "8.0.4",
+    "@threlte/extras": "9.4.0",
+    "@threlte/rapier": "3.1.4",
+    "@threlte/xr": "1.0.6",
+    "@types/bun": "1.2.15",
+    "@types/lodash-es": "4.17.12",
+    "@types/three": "0.177.0",
+    "@typescript-eslint/eslint-plugin": "8.34.0",
+    "@typescript-eslint/parser": "8.34.0",
+    "@viamrobotics/prime-core": "0.1.5",
     "@viamrobotics/sdk": "0.43.0",
     "@viamrobotics/svelte-sdk": "0.3.3",
-    "@vitejs/plugin-basic-ssl": "^2.0.0",
-    "@zag-js/svelte": "1.15.0",
-    "@zag-js/tree-view": "1.15.0",
-    "camera-controls": "^2.10.1",
-    "eslint": "^9.28.0",
-    "eslint-config-prettier": "^10.1.5",
-    "eslint-plugin-svelte": "^3.9.1",
-    "globals": "^16.2.0",
-    "idb-keyval": "^6.2.2",
-    "jsdom": "^26.1.0",
-    "lodash-es": "^4.17.21",
-    "lucide-svelte": "^0.513.0",
-    "prettier": "^3.5.3",
-    "prettier-plugin-svelte": "^3.4.0",
-    "prettier-plugin-tailwindcss": "^0.6.12",
-    "publint": "^0.3.12",
-    "runed": "^0.28.0",
-    "svelte": "5.33.18",
-    "svelte-check": "^4.2.1",
-    "svelte-virtuallists": "^1.4.2",
-    "tailwindcss": "^4.1.8",
-    "three": "^0.177.0",
-    "threlte-uikit": "^1.1.0",
-    "tsx": "^4.19.4",
-    "typescript": "^5.8.3",
-    "typescript-eslint": "^8.33.1",
-    "vite": "^6.3.5",
-    "vite-plugin-mkcert": "^1.17.8",
-    "vitest": "^3.2.3"
+    "@vitejs/plugin-basic-ssl": "2.0.0",
+    "@zag-js/svelte": "1.15.2",
+    "@zag-js/tree-view": "1.15.2",
+    "camera-controls": "2.10.1",
+    "eslint": "9.28.0",
+    "eslint-config-prettier": "10.1.5",
+    "eslint-plugin-svelte": "3.9.2",
+    "globals": "16.2.0",
+    "idb-keyval": "6.2.2",
+    "jsdom": "26.1.0",
+    "lodash-es": "4.17.21",
+    "lucide-svelte": "0.514.0",
+    "prettier": "3.5.3",
+    "prettier-plugin-svelte": "3.4.0",
+    "prettier-plugin-tailwindcss": "0.6.12",
+    "publint": "0.3.12",
+    "runed": "0.28.0",
+    "svelte": "5.33.19",
+    "svelte-check": "4.2.1",
+    "svelte-virtuallists": "1.4.2",
+    "tailwindcss": "4.1.10",
+    "three": "0.177.0",
+    "threlte-uikit": "1.1.0",
+    "tsx": "4.20.1",
+    "typescript": "5.8.3",
+    "typescript-eslint": "8.34.0",
+    "vite": "6.3.5",
+    "vite-plugin-devtools-json": "0.2.0",
+    "vite-plugin-mkcert": "1.17.8",
+    "vitest": "3.2.3"
   },
   "peerDependencies": {
     "@dimforge/rapier3d-compat": ">=0.17",

package/dist/components/CameraControls.svelte

@@ -1,81 +0,0 @@
-<script
-	module
-	lang="ts"
->
-	import {
-		Box3,
-		Matrix4,
-		PerspectiveCamera,
-		Quaternion,
-		Raycaster,
-		Sphere,
-		Spherical,
-		Vector2,
-		Vector3,
-		Vector4,
-	} from 'three'
-	import CameraController from 'camera-controls'
-	import { T, useTask, useThrelte } from '@threlte/core'
-	import type { Snippet } from 'svelte'
-
-	let installed = false
-
-	const install = () => {
-		CameraController.install({
-			THREE: {
-				Box3,
-				Matrix4,
-				Quaternion,
-				Raycaster,
-				Sphere,
-				Spherical,
-				Vector2,
-				Vector3,
-				Vector4,
-			},
-		})
-		installed = true
-	}
-</script>
-
-<script lang="ts">
-	interface Props {
-		ref?: CameraController
-		enabled?: boolean
-		children?: Snippet
-	}
-
-	let { ref = $bindable(), enabled = true, children }: Props = $props()
-
-	if (!installed) {
-		install()
-	}
-
-	const { camera, dom, invalidate } = useThrelte()
-
-	const controls = new CameraController(camera.current as PerspectiveCamera, dom)
-
-	$effect.pre(() => {
-		controls.camera = $camera as PerspectiveCamera
-	})
-
-	$effect.pre(() => {
-		controls.enabled = enabled
-	})
-
-	useTask(
-		(delta) => {
-			if (controls.update(delta)) {
-				invalidate()
-			}
-		},
-		{ autoInvalidate: false }
-	)
-</script>
-
-<T
-	is={controls}
-	bind:ref
->
-	{@render children?.()}
-</T>

package/dist/components/CameraControls.svelte.d.ts

@@ -1,10 +0,0 @@
-import CameraController from 'camera-controls';
-import type { Snippet } from 'svelte';
-interface Props {
-    ref?: CameraController;
-    enabled?: boolean;
-    children?: Snippet;
-}
-declare const CameraControls: import("svelte").Component<Props, {}, "ref">;
-type CameraControls = ReturnType<typeof CameraControls>;
-export default CameraControls;

package/dist/keybindings.d.ts

@@ -1,12 +0,0 @@
-export declare const Keybindings: {
-    MACHINES: string;
-    TREEVIEW: string;
-    ESCAPE: string;
-    UP: string;
-    DOWN: string;
-    ADD_GEOMETRY: string;
-    REMOVE_GEOMETRY: string;
-    TRANSLATE: string;
-    ROTATE: string;
-    SCALE: string;
-};

package/dist/keybindings.js

@@ -1,12 +0,0 @@
-export const Keybindings = {
-    MACHINES: 'm',
-    TREEVIEW: '`',
-    ESCAPE: 'Escape',
-    UP: 'ArrowUp',
-    DOWN: 'ArrowDown',
-    ADD_GEOMETRY: '=',
-    REMOVE_GEOMETRY: '-',
-    TRANSLATE: 't',
-    ROTATE: 'r',
-    SCALE: 's',
-};