@viamrobotics/motion-tools 0.5.0 → 0.5.2

package/README.md

@@ -11,18 +11,28 @@ Open the machine config page (bottom right) and enter in connection details to v
 
 ## Todo
 
+----- hard -----
+
 - animated sequence of motion plan
-- double click to set trackball center in object view
 - Give better fetching / connection state info
-- Set default pointcloud color in settings
+- configure frames in app
+- embed in teleop
+
+----- medium -----
+
 - remote IP access when custom drawing, to draw on remote computers
-- points are not sized right in ortho cam view
 - geometries need to be parented to parent
-- bounding boxes should include just the thing and not children
-- configure frames in app
 - 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
 
-- foxglove / rviz
+--- action items ----
 
 ## Env files
 

package/dist/WorldObject.d.ts

@@ -1,8 +1,8 @@
 import type { Geometry, Pose } from '@viamrobotics/sdk';
-import { Box3, Object3D, Vector3 } from 'three';
+import { BatchedMesh, Box3, Object3D, Vector3 } from 'three';
 export type PointsGeometry = {
     case: 'points';
-    value: Float32Array;
+    value: Float32Array<ArrayBuffer>;
 };
 export type LinesGeometry = {
     case: 'line';
@@ -18,7 +18,7 @@ export type Metadata = {
     points?: Vector3[];
     batched?: {
         id: number;
-        name: string;
+        object: BatchedMesh;
     };
     getBoundingBoxAt?: (box: Box3) => void;
 };

package/dist/WorldObject.js

@@ -1,4 +1,4 @@
-import { Box3, MathUtils, Object3D, Vector3 } from 'three';
+import { BatchedMesh, Box3, MathUtils, Object3D, Vector3 } from 'three';
 import { createPose } from './transform';
 export class WorldObject {
     uuid;

package/dist/color.d.ts

@@ -6,4 +6,19 @@ import { Color, type ColorRepresentation } from 'three';
  * @returns A new THREE.Color instance with the darkened color.
  */
 export declare const darkenColor: (value: ColorRepresentation, percent: number) => Color;
-export declare const mapStringToColor: () => void;
+export declare const colors: {
+    readonly selected: string;
+    readonly default: string;
+    readonly arm: {
+        readonly selected: string;
+        readonly default: string;
+    };
+    readonly camera: {
+        readonly selected: string;
+        readonly default: string;
+    };
+    readonly gripper: {
+        readonly selected: string;
+        readonly default: string;
+    };
+};

package/dist/color.js

@@ -1,4 +1,44 @@
 import { Color } from 'three';
+import twColors from 'tailwindcss/colors';
+// Step 3: linear sRGB → sRGB
+const linearToSrgb = (x) => {
+    return x <= 0.0031308 ? 12.92 * x : 1.055 * Math.pow(x, 1 / 2.4) - 0.055;
+};
+// Step 4: sRGB → hex
+const toHex = (x) => {
+    const hex = Math.round(x * 255)
+        .toString(16)
+        .padStart(2, '0');
+    return hex;
+};
+const oklchToHex = (raw) => {
+    const match = raw.match(/oklch\(\s*([\d.]+)%\s+([\d.]+)\s+([\d.]+)\s*\)/);
+    if (!match) {
+        return '#000000';
+    }
+    const l = parseFloat(match[1]) / 100;
+    const c = parseFloat(match[2]);
+    const h = parseFloat(match[3]);
+    // Convert h from degrees to radians
+    const hRad = (h * Math.PI) / 180;
+    // Step 1: OKLCH → OKLab
+    const aa = c * Math.cos(hRad);
+    const bb = c * Math.sin(hRad);
+    // Step 2: OKLab → linear sRGB
+    const l_ = l + 0.3963377774 * aa + 0.2158037573 * bb;
+    const m_ = l - 0.1055613458 * aa - 0.0638541728 * bb;
+    const s_ = l - 0.0894841775 * aa - 1.291485548 * bb;
+    const l_cubed = l_ ** 3;
+    const m_cubed = m_ ** 3;
+    const s_cubed = s_ ** 3;
+    const r_linear = +4.0767416621 * l_cubed - 3.3077115913 * m_cubed + 0.2309699292 * s_cubed;
+    const g_linear = -1.2684380046 * l_cubed + 2.6097574011 * m_cubed - 0.3413193965 * s_cubed;
+    const b_linear = -0.0041960863 * l_cubed - 0.7034186147 * m_cubed + 1.707614701 * s_cubed;
+    const r = Math.max(0, Math.min(1, linearToSrgb(r_linear)));
+    const g = Math.max(0, Math.min(1, linearToSrgb(g_linear)));
+    const b = Math.max(0, Math.min(1, linearToSrgb(b_linear)));
+    return `#${toHex(r)}${toHex(g)}${toHex(b)}`;
+};
 /**
  * Darkens a THREE.Color by a given percentage while preserving hue.
  * @param color The original THREE.Color instance.
@@ -6,10 +46,24 @@ import { Color } from 'three';
  * @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']),
+    default: oklchToHex(twColors.red['500']),
+    arm: {
+        selected: oklchToHex(twColors.amber['900']),
+        default: oklchToHex(twColors.amber['500']),
+    },
+    camera: {
+        selected: oklchToHex(twColors.blue['900']),
+        default: oklchToHex(twColors.blue['500']),
+    },
+    gripper: {
+        selected: oklchToHex(twColors.cyan['900']),
+        default: oklchToHex(twColors.cyan['500']),
+    },
 };
-export const mapStringToColor = () => { };

package/dist/components/App.svelte

@@ -1,13 +1,11 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte'
 	import { Canvas } from '@threlte/core'
-	import { XRButton } from '@threlte/xr'
 	import Scene from './Scene.svelte'
 	import TreeContainer from './Tree/TreeContainer.svelte'
 	import Details from './Details.svelte'
 	import SceneProviders from './SceneProviders.svelte'
 	import DomPortal from './DomPortal.svelte'
-	import { PersistedState } from 'runed'
 	import XR from './xr/XR.svelte'
 	import { World } from '@threlte/rapier'
 	import { createPartIDContext } from '../hooks/usePartID.svelte'
@@ -22,19 +20,9 @@
 
 	createPartIDContext(() => partID)
 
-	const enableXR = new PersistedState('enable-xr', false)
-
-	let root: HTMLElement
+	let root = $state<HTMLElement>()
 </script>
 
-<svelte:window
-	onkeydown={(event) => {
-		if (event.ctrlKey && event.key.toLowerCase() === 'a') {
-			enableXR.current = !enableXR.current
-		}
-	}}
-/>
-
 <div
 	class="relative h-full w-full"
 	bind:this={root}
@@ -46,9 +34,7 @@
 					<Scene>
 						{@render appChildren?.()}
 
-						{#if enableXR.current}
-							<XR />
-						{/if}
+						<XR />
 					</Scene>
 
 					<DomPortal element={root}>
@@ -66,7 +52,3 @@
 		</World>
 	</Canvas>
 </div>
-
-{#if enableXR.current}
-	<XRButton mode="immersive-ar" />
-{/if}

package/dist/components/AxesHelper.svelte

@@ -24,11 +24,11 @@
 	const VERTEX_COMPONENTS = 3
 
 	const line = new Line2()
-	const material = $state(new LineMaterial())
+	const material = new LineMaterial()
 	const geometry = new LineGeometry()
 	const color = new Color()
-	const colors = $state(new Float32Array(TOTAL_VERTICES * VERTEX_COMPONENTS))
-	const positions = $state(new Float32Array(TOTAL_VERTICES * VERTEX_COMPONENTS))
+	const colors = new Float32Array(TOTAL_VERTICES * VERTEX_COMPONENTS)
+	const positions = new Float32Array(TOTAL_VERTICES * VERTEX_COMPONENTS)
 
 	// Assign colors per vertex
 	$effect.pre(() => {

package/dist/components/CameraControls.svelte

@@ -42,7 +42,7 @@
 	interface Props {
 		ref?: CameraController
 		enabled?: boolean
-		children?: Snippet
+		children?: Snippet<[{ ref: CameraController }]>
 	}
 
 	let { ref = $bindable(), enabled = true, children }: Props = $props()
@@ -77,5 +77,5 @@
 	is={controls}
 	bind:ref
 >
-	{@render children?.()}
+	{@render children?.({ ref: controls })}
 </T>

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

@@ -3,7 +3,9 @@ import type { Snippet } from 'svelte';
 interface Props {
     ref?: CameraController;
     enabled?: boolean;
-    children?: Snippet;
+    children?: Snippet<[{
+        ref: CameraController;
+    }]>;
 }
 declare const CameraControls: import("svelte").Component<Props, {}, "ref">;
 type CameraControls = ReturnType<typeof CameraControls>;

package/dist/components/Details.svelte

@@ -1,13 +1,32 @@
 <script lang="ts">
-	import { useSelectedObject, useFocusedObject, useFocused } from '../hooks/useSelection.svelte'
+	import { Quaternion, Vector3 } from 'three'
 	import { Check, Copy } from 'lucide-svelte'
 	import { Button, Icon } from '@viamrobotics/prime-core'
+	import {
+		useSelectedObject,
+		useFocusedObject,
+		useFocused,
+		useFocusedObject3d,
+		useSelectedObject3d,
+	} from '../hooks/useSelection.svelte'
 	import { useDraggable } from '../hooks/useDraggable.svelte'
+	import { OrientationVector } from '../three/OrientationVector'
 
 	const focused = useFocused()
-	const selectedObject = useSelectedObject()
 	const focusedObject = useFocusedObject()
+	const focusedObject3d = useFocusedObject3d()
+
+	const selectedObject = useSelectedObject()
+	const selectedObject3d = useSelectedObject3d()
+
 	const object = $derived(focusedObject.current ?? selectedObject.current)
+	const object3d = $derived(focusedObject3d.current ?? selectedObject3d.current)
+
+	const worldPosition = $derived(object3d?.getWorldPosition(new Vector3()))
+	const worldQuaternion = $derived(object3d?.getWorldQuaternion(new Quaternion()))
+	const worldOrientation = $derived(
+		worldQuaternion ? new OrientationVector().setFromQuaternion(worldQuaternion) : undefined
+	)
 
 	let copied = $state(false)
 
@@ -15,7 +34,7 @@
 </script>
 
 {#if object}
-	{@const { geometry, pose } = object}
+	{@const { geometry } = object}
 	<div
 		class="border-medium bg-extralight absolute top-0 right-0 z-10 m-2 w-60 border p-2 text-xs"
 		style:transform="translate({draggable.current.x}px, {draggable.current.y}px)"
@@ -53,43 +72,46 @@
 		</h3>
 
 		<div class="flex flex-col gap-2.5">
-			{#if pose}
+			{#if worldPosition}
 				<div>
-					<strong class="font-semibold">position</strong>
+					<strong class="font-semibold">world position</strong>
+
 					<div class="flex gap-3">
 						<div>
 							<span class="text-subtle-2">x</span>
-							{pose.x !== undefined ? pose.x.toFixed(2) : '-'}
+							{(worldPosition.x * 1000).toFixed(2)}
 						</div>
 						<div>
 							<span class="text-subtle-2">y</span>
-							{pose.y !== undefined ? pose.y.toFixed(2) : '-'}
+							{(worldPosition.y * 1000).toFixed(2)}
 						</div>
 						<div>
 							<span class="text-subtle-2">z</span>
-							{pose.z !== undefined ? pose.z.toFixed(2) : '-'}
+							{(worldPosition.z * 1000).toFixed(2)}
 						</div>
 					</div>
 				</div>
+			{/if}
 
+			{#if worldOrientation}
 				<div>
-					<strong class="font-semibold">orientation</strong>
+					<strong class="font-semibold">world orientation</strong>
 					<div class="flex gap-3">
 						<div>
 							<span class="text-subtle-2">x</span>
-							{pose.oX !== undefined ? pose.oX.toFixed(2) : '-'}
+							{worldOrientation.x.toFixed(2)}
 						</div>
 						<div>
 							<span class="text-subtle-2">y</span>
-							{pose.oY !== undefined ? pose.oY.toFixed(2) : '-'}
+							{worldOrientation.y.toFixed(2)}
 						</div>
 						<div>
 							<span class="text-subtle-2">z</span>
-							{pose.oZ !== undefined ? pose.oZ.toFixed(2) : '-'}
+							{worldOrientation.z.toFixed(2)}
 						</div>
 						<div>
 							<span class="text-subtle-2">th</span>
-							{pose.theta !== undefined ? pose.theta.toFixed(2) : '-'}
+							{worldOrientation.th.toFixed(2)}
 						</div>
 					</div>
 				</div>

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

@@ -4,6 +4,8 @@
 	import type { WorldObject } from '../WorldObject'
 	import { useObjectEvents } from '../hooks/useObjectEvents.svelte'
 	import Geometry from './Geometry.svelte'
+	import { useSelected } from '../hooks/useSelection.svelte'
+	import { colors, darkenColor } from '../color'
 
 	interface Props {
 		uuid: string
@@ -16,11 +18,15 @@
 
 	let { uuid, ...rest }: Props = $props()
 
+	const selected = useSelected()
 	const events = useObjectEvents(() => uuid)
 </script>
 
 <Geometry
 	{uuid}
+	color={selected.current === uuid
+		? `#${darkenColor(rest.metadata.color ?? colors.default, 75).getHexString()}`
+		: undefined}
 	{...events}
 	{...rest}
 />

package/dist/components/Geometry.svelte

@@ -1,28 +1,37 @@
 <script lang="ts">
-	import { T } from '@threlte/core'
+	import { T, type Props as ThrelteProps } from '@threlte/core'
 	import { type Snippet } from 'svelte'
 	import { meshBounds, MeshLineGeometry, MeshLineMaterial } from '@threlte/extras'
 	import { BufferGeometry, DoubleSide, FrontSide, Mesh, Object3D } from 'three'
 	import { CapsuleGeometry } from '../three/CapsuleGeometry'
 	import { poseToObject3d } from '../transform'
-	import { darkenColor } from '../color'
+	import { colors, darkenColor } from '../color'
 	import AxesHelper from './AxesHelper.svelte'
 	import type { WorldObject } from '../WorldObject'
 	import { PLYLoader } from 'three/addons/loaders/PLYLoader.js'
 
 	const plyLoader = new PLYLoader()
 
-	interface Props {
+	interface Props extends ThrelteProps<Object3D> {
 		uuid: string
 		name: string
 		geometry?: WorldObject['geometry']
 		pose: WorldObject['pose']
 		metadata: WorldObject['metadata']
 		children?: Snippet<[{ ref: Object3D }]>
-		[prop: string]: unknown
+		color?: string
 	}
 
-	let { uuid, name, geometry, metadata, pose, children, ...rest }: Props = $props()
+	let {
+		uuid,
+		name,
+		geometry,
+		metadata,
+		pose,
+		color: overrideColor,
+		children,
+		...rest
+	}: Props = $props()
 
 	const type = $derived(geometry?.case)
 	const mesh = $derived.by(() => {
@@ -40,6 +49,12 @@
 	})
 
 	let geo = $state<BufferGeometry>()
+
+	const oncreate = (ref: BufferGeometry) => {
+		geo = ref
+	}
+
+	const color = $derived(overrideColor ?? metadata.color ?? colors.default)
 </script>
 
 <T
@@ -50,33 +65,30 @@
 >
 	{#if geometry?.case === 'mesh'}
 		{@const meshGeometry = plyLoader.parse(atob(geometry.value.mesh as unknown as string))}
-		<T is={meshGeometry} />
+		<T
+			is={meshGeometry}
+			{oncreate}
+		/>
 	{:else if geometry?.case === 'line' && metadata.points}
 		<MeshLineGeometry points={metadata.points} />
 	{:else if geometry?.case === 'box'}
 		{@const dimsMm = geometry.value.dimsMm ?? { x: 0, y: 0, z: 0 }}
 		<T.BoxGeometry
 			args={[dimsMm.x * 0.001, dimsMm.y * 0.001, dimsMm.z * 0.001]}
-			oncreate={(ref) => {
-				geo = ref
-			}}
+			{oncreate}
 		/>
 	{:else if geometry?.case === 'sphere'}
 		{@const radiusMm = geometry.value.radiusMm ?? 0}
 		<T.SphereGeometry
 			args={[radiusMm * 0.001]}
-			oncreate={(ref) => {
-				geo = ref
-			}}
+			{oncreate}
 		/>
 	{:else if geometry?.case === 'capsule'}
 		{@const { lengthMm, radiusMm } = geometry.value}
 		<T
 			is={CapsuleGeometry}
 			args={[radiusMm * 0.001, lengthMm * 0.001]}
-			oncreate={(ref) => {
-				geo = ref
-			}}
+			{oncreate}
 		/>
 	{:else}
 		<AxesHelper
@@ -87,12 +99,12 @@
 
 	{#if geometry?.case === 'line'}
 		<MeshLineMaterial
-			color={metadata.color ?? 'red'}
+			{color}
 			width={0.005}
 		/>
 	{:else if geometry}
 		<T.MeshToonMaterial
-			color={metadata.color ?? 'red'}
+			{color}
 			side={geometry.case === 'mesh' ? DoubleSide : FrontSide}
 			transparent
 			opacity={0.7}
@@ -100,8 +112,8 @@
 
 		{#if geo}
 			<T.LineSegments raycast={() => null}>
-				<T.EdgesGeometry args={[geo, 1]} />
-				<T.LineBasicMaterial color={darkenColor(metadata.color ?? 'red', 10)} />
+				<T.EdgesGeometry args={[geo, 0]} />
+				<T.LineBasicMaterial color={darkenColor(color, 10)} />
 			</T.LineSegments>
 		{/if}
 	{/if}

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

@@ -1,7 +1,8 @@
+import { type Props as ThrelteProps } from '@threlte/core';
 import { type Snippet } from 'svelte';
 import { Object3D } from 'three';
 import type { WorldObject } from '../WorldObject';
-interface Props {
+interface Props extends ThrelteProps<Object3D> {
     uuid: string;
     name: string;
     geometry?: WorldObject['geometry'];
@@ -10,7 +11,7 @@ interface Props {
     children?: Snippet<[{
         ref: Object3D;
     }]>;
-    [prop: string]: unknown;
+    color?: string;
 }
 declare const Geometry: import("svelte").Component<Props, {}, "">;
 type Geometry = ReturnType<typeof Geometry>;

package/dist/components/KeyboardControls.svelte

@@ -0,0 +1,102 @@
+<script lang="ts">
+	import { MathUtils } from 'three'
+	import { useTask } from '@threlte/core'
+	import type CameraController from 'camera-controls'
+	import { PressedKeys } from 'runed'
+	import { useFocused } from '../hooks/useSelection.svelte'
+	import { useSettings } from '../hooks/useSettings.svelte'
+
+	interface Props {
+		cameraControls: CameraController
+	}
+
+	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 CameraController from 'camera-controls';
+interface Props {
+    cameraControls: CameraController;
+}
+declare const KeyboardControls: import("svelte").Component<Props, {}, "">;
+type KeyboardControls = ReturnType<typeof KeyboardControls>;
+export default KeyboardControls;

package/dist/components/Pointcloud.svelte

@@ -7,7 +7,7 @@
 	import { poseToObject3d } from '../transform'
 
 	interface Props {
-		object: WorldObject<{ case: 'points'; value: Float32Array }>
+		object: WorldObject<{ case: 'points'; value: Float32Array<ArrayBuffer> }>
 	}
 
 	let { object }: Props = $props()
@@ -20,19 +20,19 @@
 	})
 
 	const colors = $derived(object.metadata.colors)
-	const positions = $derived(object.geometry?.value ?? [])
+	const positions = $derived(object.geometry?.value ?? new Float32Array())
 
 	$effect(() => {
 		material.vertexColors = colors !== undefined
 	})
 
 	$effect.pre(() => {
-		geometry.setAttribute('position', new BufferAttribute(new Float32Array(positions), 3))
+		geometry.setAttribute('position', new BufferAttribute(positions, 3))
 	})
 
 	$effect.pre(() => {
 		if (colors) {
-			geometry.setAttribute('color', new BufferAttribute(new Float32Array(colors), 3))
+			geometry.setAttribute('color', new BufferAttribute(colors, 3))
 		}
 	})
 

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

@@ -2,7 +2,7 @@ import type { WorldObject } from '../WorldObject';
 interface Props {
     object: WorldObject<{
         case: 'points';
-        value: Float32Array;
+        value: Float32Array<ArrayBuffer>;
     }>;
 }
 declare const Pointcloud: import("svelte").Component<Props, {}, "">;

package/dist/components/Scene.svelte

@@ -15,6 +15,7 @@
 	import type { Snippet } from 'svelte'
 	import { useXR } from '@threlte/xr'
 	import { useTransformControls } from '../hooks/useControls.svelte'
+	import KeyboardControls from './KeyboardControls.svelte'
 
 	interface Props {
 		children?: Snippet
@@ -48,7 +49,10 @@
 		{#if !$isPresenting}
 			<Camera position={[3, 3, 3]}>
 				<CameraControls enabled={!transformControls.active}>
-					<Gizmo />
+					{#snippet children({ ref })}
+						<KeyboardControls cameraControls={ref} />
+						<Gizmo />
+					{/snippet}
 				</CameraControls>
 			</Camera>
 		{/if}

package/dist/components/SceneProviders.svelte

@@ -2,7 +2,6 @@
 	import { provideFrames } from '../hooks/useFrames.svelte'
 	import { provideGeometries } from '../hooks/useGeometries.svelte'
 	import { providePointclouds } from '../hooks/usePointclouds.svelte'
-	import { providePoses } from '../hooks/usePoses.svelte'
 	import { usePartID } from '../hooks/usePartID.svelte'
 	import { provideSelection } from '../hooks/useSelection.svelte'
 	import { provideStaticGeometries } from '../hooks/useStaticGeometries.svelte'
@@ -32,8 +31,8 @@
 
 	provideStaticGeometries()
 	provideShapes()
+
 	provideFrames(() => partID.current)
-	providePoses(() => partID.current)
 	provideGeometries(() => partID.current)
 	providePointclouds(() => partID.current)
 	provideMotionClient(() => partID.current)

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/WorldObject.svelte

@@ -18,6 +18,7 @@
 {#if object.metadata.gltf?.scene}
 	<T
 		is={object.metadata.gltf.scene}
+		uuid={object.uuid}
 		name={object.name}
 		{...objectProps}
 		{...rest}

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/xr/XR.svelte

@@ -1,20 +1,19 @@
 <script lang="ts">
-	import { useXR, XR } from '@threlte/xr'
+	import { XR, XRButton } from '@threlte/xr'
 	import OriginMarker from './OriginMarker.svelte'
-	import { useThrelte } from '@threlte/core'
+	import DomPortal from '../DomPortal.svelte'
+	import { useSettings } from '../../hooks/useSettings.svelte'
 
-	const { renderer } = useThrelte()
-	const { isPresenting } = useXR()
-
-	$effect.pre(() => {
-		if ($isPresenting) {
-			const [left, right] = renderer.xr.getCamera().cameras
-
-			console.log(left, right)
-		}
-	})
+	const settings = useSettings()
+	const enableXR = $derived(settings.current.enableXR)
 </script>
 
-<XR>
-	<OriginMarker />
-</XR>
+{#if enableXR}
+	<XR>
+		<OriginMarker />
+	</XR>
+
+	<DomPortal>
+		<XRButton mode="immersive-ar" />
+	</DomPortal>
+{/if}

package/dist/hooks/useFrames.svelte.js

@@ -29,7 +29,7 @@ export const provideFrames = (partID) => {
         }
         for (const { frame } of query.current.data ?? []) {
             if (frame) {
-                objects.push(new WorldObject(frame.referenceFrame ?? 'Unnamed frame', frame.poseInObserverFrame?.pose, frame.poseInObserverFrame?.referenceFrame, frame.physicalObject?.geometryType));
+                objects.push(new WorldObject(frame.referenceFrame ? frame.referenceFrame : 'Unnamed frame', frame.poseInObserverFrame?.pose, frame.poseInObserverFrame?.referenceFrame, frame.physicalObject?.geometryType));
             }
         }
         return objects;

package/dist/hooks/useGeometries.svelte.js

@@ -8,7 +8,6 @@ import { WorldObject } from '../WorldObject';
 import { usePersistentUUIDs } from './usePersistentUUIDs.svelte';
 import { useLogs } from './useLogs.svelte';
 const key = Symbol('geometries-context');
-let index = 0;
 export const provideGeometries = (partID) => {
     const logs = useLogs();
     const refreshRates = useRefreshRates();
@@ -46,7 +45,7 @@ export const provideGeometries = (partID) => {
             if (!query.data)
                 continue;
             for (const { center, label, geometryType } of query.data.geometries) {
-                results.push(new WorldObject(label ? label : `Unnamed geometry ${++index}`, center, query.data.name, geometryType));
+                results.push(new WorldObject(label ? label : 'Unnamed geometry', center, query.data.name, geometryType));
             }
         }
         updateUUIDs(results);

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/usePointclouds.svelte.js

@@ -33,7 +33,7 @@ export const providePointclouds = (partID) => {
                 if (!response)
                     return null;
                 const { positions, colors } = await parsePcdInWorker(new Uint8Array(response));
-                return new WorldObject(`${name}:pointcloud`, undefined, name, { case: 'points', value: new Float32Array(positions) }, colors ? { colors: new Float32Array(colors) } : undefined);
+                return new WorldObject(`${name}:pointcloud`, undefined, name, { case: 'points', value: positions }, colors ? { colors } : undefined);
             },
         });
     }));

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

@@ -1,4 +1,4 @@
-import type { Object3D } from 'three';
+import { Object3D } from 'three';
 import type { WorldObject } from '../WorldObject';
 type UUID = string;
 interface SelectionContext {

package/dist/hooks/useSelection.svelte.js

@@ -1,5 +1,6 @@
 import { useThrelte } from '@threlte/core';
 import { getContext, setContext } from 'svelte';
+import { Matrix4, Object3D } from 'three';
 import { useObjects } from './useObjects.svelte';
 const hoverKey = Symbol('hover-context');
 const selectionKey = Symbol('selection-context');
@@ -73,17 +74,32 @@ export const useSelectedObject = () => {
 export const useFocusedObject3d = () => {
     const focusedObject = useFocusedObject();
     const { scene } = useThrelte();
-    const object = $derived(focusedObject.current ? scene.getObjectByName(focusedObject.current.name)?.clone() : undefined);
+    const object = $derived(focusedObject.current
+        ? scene.getObjectByProperty('uuid', focusedObject.current.uuid)?.clone()
+        : undefined);
     return {
         get current() {
             return object;
         },
     };
 };
+const matrix = new Matrix4();
 export const useSelectedObject3d = () => {
     const selectedObject = useSelectedObject();
     const { scene } = useThrelte();
-    const object = $derived(selectedObject.current ? scene.getObjectByName(selectedObject.current.name) : undefined);
+    const object = $derived.by(() => {
+        if (!selectedObject.current) {
+            return;
+        }
+        if (selectedObject.current.metadata.batched) {
+            const proxy = new Object3D();
+            const { id, object } = selectedObject.current.metadata.batched;
+            object.getMatrixAt(id, matrix);
+            proxy.applyMatrix4(matrix);
+            return proxy;
+        }
+        return scene.getObjectByProperty('uuid', selectedObject.current.uuid);
+    });
     return {
         get current() {
             return object;

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/hooks/useShapes.svelte.js

@@ -34,8 +34,8 @@ export const provideShapes = () => {
         const { positions, colors } = await parsePcdInWorker(new Uint8Array(buffer));
         points.push(new WorldObject(`points ${++pointsIndex}`, undefined, undefined, {
             case: 'points',
-            value: new Float32Array(positions),
-        }, colors ? { colors: new Float32Array(colors) } : undefined));
+            value: positions,
+        }, colors ? { colors } : undefined));
     };
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     const addGeometry = (data, color, parent) => {
@@ -92,7 +92,7 @@ export const provideShapes = () => {
                 },
                 batched: {
                     id: arrowId,
-                    name: batchedArrow.object3d.name,
+                    object: batchedArrow.object3d,
                 },
             }));
         }

package/dist/loaders/pcd/index.d.ts

@@ -1,4 +1,2 @@
-export declare const parsePcdInWorker: (array: Uint8Array<ArrayBufferLike>) => Promise<{
-    positions: ArrayBuffer;
-    colors: ArrayBuffer | undefined;
-}>;
+import type { SuccessMessage } from './worker';
+export declare const parsePcdInWorker: (data: Uint8Array<ArrayBufferLike>) => Promise<SuccessMessage>;

package/dist/loaders/pcd/index.js

@@ -1,12 +1,14 @@
 const worker = new Worker(new URL('./worker', import.meta.url), { type: 'module' });
-export const parsePcdInWorker = async (array) => {
+export const parsePcdInWorker = async (data) => {
     return new Promise((resolve, reject) => {
-        worker.onmessage = (event) => {
-            if (event.data.error) {
+        const onMessage = (event) => {
+            worker.removeEventListener('message', onMessage);
+            if ('error' in event.data) {
                 return reject(event.data.error);
             }
-            resolve({ positions: event.data.positionArray, colors: event.data.colorArray });
+            resolve(event.data);
         };
-        worker.postMessage({ data: array }, [array.buffer]);
+        worker.addEventListener('message', onMessage);
+        worker.postMessage({ data }, [data.buffer]);
     });
 };

package/dist/loaders/pcd/worker.d.ts

@@ -1 +1,7 @@
-export {};
+export interface SuccessMessage {
+    positions: Float32Array<ArrayBuffer>;
+    colors: Float32Array | null;
+}
+export type Message = SuccessMessage | {
+    error: string;
+};

package/dist/loaders/pcd/worker.js

@@ -10,11 +10,9 @@ self.onmessage = async (event) => {
     try {
         const pcd = loader.parse(data.buffer);
         if (pcd.geometry) {
-            const positionArray = pcd.geometry.attributes.position.array;
-            const colorArray = pcd.geometry.attributes.color ? pcd.geometry.attributes.color.array : null;
-            postMessage({ success: true, positionArray, colorArray }, colorArray
-                ? [positionArray.buffer, colorArray.buffer]
-                : [positionArray.buffer]);
+            const positions = pcd.geometry.attributes.position.array;
+            const colors = pcd.geometry.attributes.color?.array ?? null;
+            postMessage({ positions, colors }, colors ? [positions.buffer, colors.buffer] : [positions.buffer]);
         }
         else {
             postMessage({ error: 'Failed to extract geometry' });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@viamrobotics/motion-tools",
-  "version": "0.5.0",
+  "version": "0.5.2",
   "description": "Motion visualization with Viam",
   "license": "Apache-2.0",
   "type": "module",
@@ -16,13 +16,13 @@
     "@skeletonlabs/skeleton": "3.1.3",
     "@skeletonlabs/skeleton-svelte": "1.2.3",
     "@sveltejs/adapter-static": "^3.0.8",
-    "@sveltejs/kit": "^2.21.1",
+    "@sveltejs/kit": "^2.21.4",
     "@sveltejs/package": "^2.3.11",
-    "@sveltejs/vite-plugin-svelte": "^5.0.3",
+    "@sveltejs/vite-plugin-svelte": "^5.1.0",
     "@tailwindcss/forms": "^0.5.10",
     "@tailwindcss/vite": "^4.1.8",
-    "@tanstack/svelte-query": "^5.79.2",
-    "@tanstack/svelte-query-devtools": "^5.79.2",
+    "@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",
@@ -32,29 +32,29 @@
     "@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",
+    "@typescript-eslint/eslint-plugin": "^8.34.0",
+    "@typescript-eslint/parser": "^8.34.0",
     "@viamrobotics/prime-core": "^0.1.5",
-    "@viamrobotics/sdk": "0.42.0",
-    "@viamrobotics/svelte-sdk": "0.2.0",
+    "@viamrobotics/sdk": "0.43.0",
+    "@viamrobotics/svelte-sdk": "0.3.3",
     "@vitejs/plugin-basic-ssl": "^2.0.0",
-    "@zag-js/svelte": "1.14.0",
-    "@zag-js/tree-view": "1.14.0",
+    "@zag-js/svelte": "1.15.1",
+    "@zag-js/tree-view": "1.15.1",
     "camera-controls": "^2.10.1",
     "eslint": "^9.28.0",
     "eslint-config-prettier": "^10.1.5",
-    "eslint-plugin-svelte": "^3.9.1",
+    "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.511.0",
+    "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.14",
+    "svelte": "5.33.19",
     "svelte-check": "^4.2.1",
     "svelte-virtuallists": "^1.4.2",
     "tailwindcss": "^4.1.8",
@@ -62,10 +62,10 @@
     "threlte-uikit": "^1.1.0",
     "tsx": "^4.19.4",
     "typescript": "^5.8.3",
-    "typescript-eslint": "^8.33.1",
+    "typescript-eslint": "^8.34.0",
     "vite": "^6.3.5",
     "vite-plugin-mkcert": "^1.17.8",
-    "vitest": "^3.2.0"
+    "vitest": "^3.2.3"
   },
   "peerDependencies": {
     "@dimforge/rapier3d-compat": ">=0.17",

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