@viamrobotics/motion-tools 0.5.3 → 0.5.4

package/dist/WorldObject.d.ts

@@ -1,5 +1,5 @@
 import type { Geometry, Pose } from '@viamrobotics/sdk';
-import { BatchedMesh, Box3, Object3D, Vector3 } from 'three';
+import { BatchedMesh, Box3, Object3D, Vector3, type ColorRepresentation } from 'three';
 export type PointsGeometry = {
     case: 'points';
     value: Float32Array<ArrayBuffer>;
@@ -11,11 +11,12 @@ export type LinesGeometry = {
 export type Geometries = Geometry['geometryType'] | PointsGeometry | LinesGeometry;
 export type Metadata = {
     colors?: Float32Array;
-    color?: string;
+    color?: ColorRepresentation;
     gltf?: {
         scene: Object3D;
     };
     points?: Vector3[];
+    pointSize?: number;
     batched?: {
         id: number;
         object: BatchedMesh;

package/dist/components/App.svelte

@@ -20,7 +20,7 @@
 
 	createPartIDContext(() => partID)
 
-	let root = $state<HTMLElement>()
+	let root = $state.raw<HTMLElement>()
 </script>
 
 <div

package/dist/components/Details.svelte

@@ -21,7 +21,6 @@
 
 	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(

package/dist/components/Focus.svelte

@@ -12,16 +12,18 @@
 	const vec = new Vector3()
 
 	let center = $state.raw<[number, number, number]>([0, 0, 0])
+	let size = $state.raw<[number, number, number]>([0, 0, 0])
 
 	$effect(() => {
 		if (object3d) {
 			box.setFromObject(object3d)
+			size = box.getSize(vec).toArray()
 			center = box.getCenter(vec).toArray()
 		}
 	})
 </script>
 
-<Camera position={[2, 0, 0]}>
+<Camera position={[size[0], 0, 0]}>
 	<TrackballControls target={center}>
 		<Gizmo />
 	</TrackballControls>

package/dist/components/KeyboardControls.svelte

@@ -20,11 +20,13 @@
 	const s = $derived(keys.has('s'))
 	const a = $derived(keys.has('a'))
 	const d = $derived(keys.has('d'))
+	const r = $derived(keys.has('r'))
+	const f = $derived(keys.has('f'))
 	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 any = $derived(w || s || a || d || r || f || up || left || down || right)
 
 	const { start, stop } = useTask(
 		(delta) => {
@@ -46,6 +48,14 @@
 				cameraControls.forward(-0.01 * dt, true)
 			}
 
+			if (r) {
+				cameraControls.dolly(0.01 * dt, true)
+			}
+
+			if (f) {
+				cameraControls.dolly(-0.01 * dt, true)
+			}
+
 			if (left) {
 				cameraControls.rotate(-0.1 * MathUtils.DEG2RAD * dt, 0, true)
 			}

package/dist/components/Pointcloud.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
+	import { Points, BufferAttribute, BufferGeometry, PointsMaterial } from 'three'
+
 	import { T } from '@threlte/core'
-	import { Points, BufferAttribute, BufferGeometry, Color, PointsMaterial } from 'three'
 	import type { WorldObject } from '../WorldObject'
 	import { useObjectEvents } from '../hooks/useObjectEvents.svelte'
 	import { meshBounds } from '@threlte/extras'
@@ -12,18 +13,15 @@
 
 	let { object }: Props = $props()
 
-	const points = new Points()
-	const geometry = new BufferGeometry()
-	const material = new PointsMaterial({
-		size: 0.01,
-		color: new Color('#888888'),
-	})
-
 	const colors = $derived(object.metadata.colors)
 	const positions = $derived(object.geometry?.value ?? new Float32Array())
 
-	$effect(() => {
-		material.vertexColors = colors !== undefined
+	const points = new Points()
+	const geometry = new BufferGeometry()
+	const material = new PointsMaterial()
+
+	$effect.pre(() => {
+		material.size = object.metadata.pointSize ?? 0.01
 	})
 
 	$effect.pre(() => {
@@ -31,8 +29,13 @@
 	})
 
 	$effect.pre(() => {
+		material.vertexColors = colors !== undefined
+		material.color.set(colors ? 0xffffff : (object.metadata.color ?? '#888888'))
+
+		material.toneMapped = false
 		if (colors) {
 			geometry.setAttribute('color', new BufferAttribute(colors, 3))
+			geometry.attributes.color.needsUpdate = true
 		}
 	})
 

package/dist/components/Scene.svelte

@@ -82,6 +82,8 @@
 				plane="xy"
 				sectionColor="#333"
 				infiniteGrid
+				cellSize={0.5}
+				sectionSize={10}
 				fadeOrigin={new Vector3()}
 				fadeDistance={25}
 			/>

package/dist/components/SceneProviders.svelte

@@ -39,7 +39,6 @@
 	providePointclouds(() => partID.current)
 	provideMotionClient(() => partID.current)
 	provideObjects()
-
 	const { focus } = provideSelection()
 </script>
 

package/dist/components/dashboard/Button.svelte

@@ -18,9 +18,6 @@
 		class: className = '',
 		onclick,
 	}: Props = $props()
-
-	const activeClasses = 'z-10 border-gray-5 bg-white text-gray-8'
-	const inactiveClasses = 'bg-light border-medium text-disabled'
 </script>
 
 <Tooltip
@@ -28,7 +25,11 @@
 	location="bottom"
 >
 	<label
-		class={[className, 'relative block border', active ? activeClasses : inactiveClasses]}
+		class={[
+			className,
+			'relative block border',
+			active ? 'border-gray-5 text-gray-8 z-10 bg-white' : 'bg-light border-medium text-disabled',
+		]}
 		aria-describedby={tooltipID}
 	>
 		<button

package/dist/hooks/useFrames.svelte.js

@@ -6,14 +6,14 @@ import { observe } from '@threlte/core';
 import { useLogs } from './useLogs.svelte';
 const key = Symbol('frames-context');
 export const provideFrames = (partID) => {
+    const client = useRobotClient(partID);
+    const machineStatus = useMachineStatus(partID);
+    const logs = useLogs();
     const refreshRates = useRefreshRates();
     if (!refreshRates.has('Frames')) {
         refreshRates.set('Frames', 1);
     }
-    const logs = useLogs();
-    const client = useRobotClient(partID);
     const query = createRobotQuery(client, 'frameSystemConfig');
-    const machineStatus = useMachineStatus(partID);
     const revision = $derived(machineStatus.current?.config.revision);
     const shouldFetch = $derived(refreshRates.get('Frames') === 1);
     observe.pre(() => [revision], () => {

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

@@ -1,26 +1,25 @@
 import { Object3D } from 'three';
 import type { WorldObject } from '../WorldObject';
-type UUID = string;
 interface SelectionContext {
-    readonly current: UUID | undefined;
-    set(value?: UUID): void;
+    readonly current: string | undefined;
+    set(value?: string): void;
 }
 interface FocusContext {
-    readonly current: UUID | undefined;
-    set(value?: UUID): void;
+    readonly current: string | undefined;
+    set(value?: string): void;
 }
 export declare const provideSelection: () => {
     selection: {
         readonly current: string | undefined;
-        set(value?: UUID): void;
+        set(value?: string): void;
     };
     focus: {
         readonly current: string | undefined;
-        set(value?: UUID): void;
+        set(value?: string): void;
     };
     hover: {
         readonly current: string | undefined;
-        set(value?: UUID): void;
+        set(value?: string): void;
     };
 };
 export declare const useSelected: () => SelectionContext;

package/dist/hooks/useShapes.svelte.js

@@ -1,5 +1,5 @@
 import { getContext, setContext } from 'svelte';
-import { Vector3, Vector4 } from 'three';
+import { Color, Vector3, Vector4 } from 'three';
 import { NURBSCurve } from 'three/addons/curves/NURBSCurve.js';
 import { parsePcdInWorker } from '../loaders/pcd';
 import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';
@@ -28,8 +28,12 @@ export const provideShapes = () => {
     const nurbs = $state([]);
     const models = $state([]);
     let connectionStatus = $state('connecting');
+    const color = new Color();
+    const direction = new Vector3();
+    const origin = new Vector3();
+    const vec3 = new Vector3();
     const loader = new GLTFLoader();
-    const addPcd = async (data) => {
+    const addPCD = async (data) => {
         const buffer = await data.arrayBuffer();
         const { positions, colors } = await parsePcdInWorker(new Uint8Array(buffer));
         points.push(new WorldObject(`points ${++pointsIndex}`, undefined, undefined, {
@@ -70,23 +74,41 @@ export const provideShapes = () => {
         const object = new WorldObject(data.name, data.pose, data.parent, { case: 'line', value: new Float32Array() }, { color, points: curve.getPoints(200) });
         nurbs.push(object);
     };
-    const direction = new Vector3();
-    const origin = new Vector3();
-    const vec3 = new Vector3();
     const batchedArrow = new BatchedArrow();
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    const addPoses = (nextPoses, colors, arrowHeadAtPose) => {
-        for (let i = 0, l = nextPoses.length; i < l; i += 1) {
-            const pose = nextPoses[i];
-            const length = 0.1;
-            direction.set(pose.oX ?? 0, pose.oY ?? 0, pose.oZ ?? 0);
-            origin.set((pose.x ?? 0) / 1000, (pose.y ?? 0) / 1000, (pose.z ?? 0) / 1000);
-            if (arrowHeadAtPose) {
+    const addPoses = async (data) => {
+        const buffer = await data.arrayBuffer();
+        const view = new DataView(buffer);
+        let offset = 0;
+        function readFloat32() {
+            const val = view.getFloat32(offset, true); // true = little-endian
+            offset += 4;
+            return val;
+        }
+        // Read counts
+        const nPoints = readFloat32();
+        const nColors = readFloat32();
+        const arrowHeadAtPose = readFloat32();
+        // Read positions
+        const nextPoses = new Float32Array(nPoints * 6);
+        for (let i = 0; i < nPoints * 6; i++) {
+            nextPoses[i] = readFloat32();
+        }
+        // Read raw colors
+        const colors = new Float32Array(nColors * 3);
+        for (let i = 0; i < nColors * 3; i++) {
+            colors[i] = readFloat32();
+        }
+        const length = 0.1;
+        for (let i = 0, j = 0, l = nextPoses.length; i < l; i += 6, j += 3) {
+            origin.set(nextPoses[i], nextPoses[i + 1], nextPoses[i + 2]).multiplyScalar(0.001);
+            direction.set(nextPoses[i + 3], nextPoses[i + 4], nextPoses[i + 5]);
+            if (arrowHeadAtPose === 1) {
                 // Compute the base position so the arrow ends at the origin
                 origin.sub(vec3.copy(direction).multiplyScalar(length));
             }
-            const arrowId = batchedArrow.addArrow(direction, origin, length, colors[i]);
-            poses.push(new WorldObject(`pose ${++poseIndex}`, pose, undefined, undefined, {
+            color.set(colors[j], colors[j + 1], colors[j + 2]);
+            const arrowId = batchedArrow.addArrow(direction, origin, length, color);
+            poses.push(new WorldObject(`pose ${++poseIndex}`, undefined, undefined, undefined, {
                 getBoundingBoxAt(box3) {
                     return batchedArrow.getBoundingBoxAt(arrowId, box3);
                 },
@@ -97,6 +119,66 @@ export const provideShapes = () => {
             }));
         }
     };
+    const addPoints = async (data) => {
+        const buffer = await data.arrayBuffer();
+        const view = new DataView(buffer);
+        let offset = 0;
+        function readFloat32() {
+            const val = view.getFloat32(offset, true); // true = little-endian
+            offset += 4;
+            return val;
+        }
+        // Read label length
+        const labelLen = readFloat32();
+        let label = '';
+        for (let i = 0; i < labelLen; i++) {
+            label += String.fromCharCode(readFloat32());
+        }
+        // Read counts
+        const nPoints = readFloat32();
+        const nColors = readFloat32();
+        // Read default color
+        const r = readFloat32();
+        const g = readFloat32();
+        const b = readFloat32();
+        // Read positions
+        const positions = new Float32Array(nPoints * 3);
+        for (let i = 0; i < nPoints * 3; i++) {
+            positions[i] = readFloat32();
+        }
+        const getColors = () => {
+            // Read raw colors
+            const rawColors = new Float32Array(nColors * 3);
+            for (let i = 0; i < nColors * 3; i++) {
+                rawColors[i] = readFloat32();
+            }
+            const colors = new Float32Array(nPoints * 3);
+            colors.set(rawColors);
+            // Cover the gap for any points not colored
+            for (let i = nColors; i < nPoints; i++) {
+                const offset = i * 3;
+                colors[offset] = r;
+                colors[offset + 1] = g;
+                colors[offset + 2] = b;
+            }
+            return colors;
+        };
+        const pointSize = 0.01;
+        const metadata = nColors > 0
+            ? {
+                colors: getColors(),
+                color: new Color(r, g, b).convertLinearToSRGB(),
+                pointSize,
+            }
+            : {
+                color: new Color(r, g, b).convertLinearToSRGB(),
+                pointSize,
+            };
+        points.push(new WorldObject(label ?? `points ${++pointsIndex}`, undefined, undefined, {
+            case: 'points',
+            value: positions,
+        }, metadata));
+    };
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     const addGeometries = (geometries, colors, parent) => {
         let i = 0;
@@ -105,6 +187,14 @@ export const provideShapes = () => {
             i += 1;
         }
     };
+    const addGLTF = async (data) => {
+        const buffer = await data.arrayBuffer();
+        const blob = new Blob([buffer], { type: 'model/gltf-binary' });
+        const url = URL.createObjectURL(blob);
+        const gltf = await loader.loadAsync(url);
+        models.push(new WorldObject(gltf.scene.name, undefined, undefined, undefined, { gltf }));
+        URL.revokeObjectURL(url);
+    };
     const remove = (names) => {
         let index = -1;
         for (const name of names) {
@@ -153,20 +243,12 @@ export const provideShapes = () => {
     let metadata = undefined;
     const handleMetadata = (data) => {
         const json = tryParse(data);
-        if ('ext' in json) {
+        if ('type' in json) {
             metadata = json;
             return true;
         }
         return false;
     };
-    const loadGLTF = async (data) => {
-        const buffer = await data.arrayBuffer();
-        const blob = new Blob([buffer], { type: 'model/gltf-binary' });
-        const url = URL.createObjectURL(blob);
-        const gltf = await loader.loadAsync(url);
-        models.push(new WorldObject(gltf.scene.name, undefined, undefined, undefined, { gltf }));
-        URL.revokeObjectURL(url);
-    };
     const { BACKEND_IP, BUN_SERVER_PORT } = globalThis;
     const scheduleReconnect = () => {
         setTimeout(() => {
@@ -196,13 +278,21 @@ export const provideShapes = () => {
             }
         }
         if (typeof event.data === 'object' && 'arrayBuffer' in event.data) {
-            if (metadata?.ext === 'glb') {
-                loadGLTF(event.data);
+            if (!metadata) {
+                return console.error('metadata is undefined');
             }
-            else if (metadata?.ext === 'pcd') {
-                addPcd(event.data);
+            if (metadata.type === 'glb') {
+                return addGLTF(event.data);
+            }
+            else if (metadata.type === 'pcd') {
+                return addPCD(event.data);
+            }
+            else if (metadata.type === 'points') {
+                return addPoints(event.data);
+            }
+            else if (metadata.type === 'poses') {
+                return addPoses(event.data);
             }
-            return;
         }
         const data = tryParse(event.data);
         if (!data)
@@ -219,9 +309,6 @@ export const provideShapes = () => {
         if ('Knots' in data) {
             return addNurbs(data, data.Color);
         }
-        if ('poses' in data) {
-            return addPoses(data.poses, data.colors, data.arrowHeadAtPose);
-        }
         if ('geometry' in data) {
             addGeometry(data.geometry, data.color);
         }

package/dist/three/BatchedArrow.d.ts

@@ -1,4 +1,4 @@
-import { BatchedMesh, MeshBasicMaterial, Object3D, Vector3, Box3, Matrix4 } from 'three';
+import { BatchedMesh, MeshBasicMaterial, Object3D, Vector3, Box3, Matrix4, type ColorRepresentation } from 'three';
 interface Arrow {
     shaftId: number;
     headId: number;
@@ -17,7 +17,7 @@ export declare class BatchedArrow {
         shaftWidth?: number | undefined;
         material?: MeshBasicMaterial | undefined;
     });
-    addArrow(dir: Vector3, origin: Vector3, length?: number, color?: string): number;
+    addArrow(dir: Vector3, origin: Vector3, length?: number, color?: ColorRepresentation): number;
     getArrowId(instanceId: number): number | undefined;
     getBoundingBoxAt(arrowId: number, target: Box3): Box3 | undefined;
     removeArrow(arrowId: number): void;

package/dist/three/BatchedArrow.js

@@ -6,6 +6,7 @@ const box1 = new Box3();
 const box2 = new Box3();
 const mat4_1 = new Matrix4();
 const mat4_2 = new Matrix4();
+const col = new Color();
 let index = 0;
 export class BatchedArrow {
     batchedMesh;
@@ -57,7 +58,7 @@ export class BatchedArrow {
         const coneMatrix = this._computeTransform(coneOrigin, dir, headLength, headWidth * 4);
         this.batchedMesh.setMatrixAt(headId, coneMatrix);
         if (color) {
-            const col = new Color(color);
+            col.set(color);
             this.batchedMesh.setColorAt(shaftId, col);
             this.batchedMesh.setColorAt(headId, col);
         }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@viamrobotics/motion-tools",
-  "version": "0.5.3",
+  "version": "0.5.4",
   "description": "Motion visualization with Viam",
   "license": "Apache-2.0",
   "type": "module",
@@ -8,65 +8,65 @@
     "@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",
+    "@changesets/cli": "2.29.5",
     "@dimforge/rapier3d-compat": "0.17.3",
-    "@eslint/compat": "1.3.0",
-    "@eslint/js": "9.28.0",
-    "@playwright/test": "1.53.0",
+    "@eslint/compat": "1.3.1",
+    "@eslint/js": "9.29.0",
+    "@playwright/test": "1.53.1",
     "@skeletonlabs/skeleton": "3.1.3",
     "@skeletonlabs/skeleton-svelte": "1.2.3",
     "@sveltejs/adapter-static": "3.0.8",
-    "@sveltejs/kit": "2.21.4",
-    "@sveltejs/package": "2.3.11",
+    "@sveltejs/kit": "2.22.2",
+    "@sveltejs/package": "2.3.12",
     "@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",
+    "@tailwindcss/vite": "4.1.11",
+    "@tanstack/svelte-query": "5.81.2",
+    "@tanstack/svelte-query-devtools": "5.81.2",
     "@testing-library/jest-dom": "6.6.3",
     "@testing-library/svelte": "5.2.8",
-    "@threlte/core": "8.0.4",
+    "@threlte/core": "8.0.5",
     "@threlte/extras": "9.4.0",
     "@threlte/rapier": "3.1.4",
-    "@threlte/xr": "1.0.6",
-    "@types/bun": "1.2.15",
+    "@threlte/xr": "1.0.8",
+    "@types/bun": "1.2.17",
     "@types/lodash-es": "4.17.12",
     "@types/three": "0.177.0",
-    "@typescript-eslint/eslint-plugin": "8.34.0",
-    "@typescript-eslint/parser": "8.34.0",
+    "@typescript-eslint/eslint-plugin": "8.35.0",
+    "@typescript-eslint/parser": "8.35.0",
     "@viamrobotics/prime-core": "0.1.5",
-    "@viamrobotics/sdk": "0.43.0",
-    "@viamrobotics/svelte-sdk": "0.3.3",
+    "@viamrobotics/sdk": "0.44.0",
+    "@viamrobotics/svelte-sdk": "0.4.0",
     "@vitejs/plugin-basic-ssl": "2.0.0",
-    "@zag-js/svelte": "1.15.2",
-    "@zag-js/tree-view": "1.15.2",
+    "@zag-js/svelte": "1.17.1",
+    "@zag-js/tree-view": "1.17.1",
     "camera-controls": "2.10.1",
-    "eslint": "9.28.0",
+    "eslint": "9.29.0",
     "eslint-config-prettier": "10.1.5",
-    "eslint-plugin-svelte": "3.9.2",
+    "eslint-plugin-svelte": "3.10.0",
     "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",
+    "lucide-svelte": "0.523.0",
+    "prettier": "3.6.1",
     "prettier-plugin-svelte": "3.4.0",
-    "prettier-plugin-tailwindcss": "0.6.12",
+    "prettier-plugin-tailwindcss": "0.6.13",
     "publint": "0.3.12",
-    "runed": "0.28.0",
-    "svelte": "5.33.19",
-    "svelte-check": "4.2.1",
+    "runed": "0.29.1",
+    "svelte": "5.34.8",
+    "svelte-check": "4.2.2",
     "svelte-virtuallists": "1.4.2",
-    "tailwindcss": "4.1.10",
+    "tailwindcss": "4.1.11",
     "three": "0.177.0",
-    "threlte-uikit": "1.1.0",
-    "tsx": "4.20.1",
+    "threlte-uikit": "1.2.0",
+    "tsx": "4.20.3",
     "typescript": "5.8.3",
-    "typescript-eslint": "8.34.0",
+    "typescript-eslint": "8.35.0",
     "vite": "6.3.5",
     "vite-plugin-devtools-json": "0.2.0",
     "vite-plugin-mkcert": "1.17.8",
-    "vitest": "3.2.3"
+    "vitest": "3.2.4"
   },
   "peerDependencies": {
     "@dimforge/rapier3d-compat": ">=0.17",