@viamrobotics/motion-tools 1.1.3 → 1.1.5

package/dist/color.js

@@ -1,6 +1,5 @@
 import { Color } from 'three';
 import twColors from 'tailwindcss/colors';
-import { isNumber } from 'lodash-es';
 import { ResourceName } from '@viamrobotics/sdk';
 // Step 3: linear sRGB → sRGB
 const linearToSrgb = (x) => {
@@ -104,7 +103,7 @@ export const isRGB = (color) => {
         !('b' in color)) {
         return false;
     }
-    return isNumber(color.r) && isNumber(color.g) && isNumber(color.b);
+    return typeof color.r === 'number' && typeof color.g === 'number' && typeof color.b === 'number';
 };
 export const parseRGB = (color, defaultColor = { r: 0, g: 0, b: 0 }) => {
     if (!isRGB(color))
@@ -112,8 +111,9 @@ export const parseRGB = (color, defaultColor = { r: 0, g: 0, b: 0 }) => {
     return new Color().setRGB(color.r > 1 ? color.r / 255 : color.r, color.g > 1 ? color.g / 255 : color.g, color.b > 1 ? color.b / 255 : color.b);
 };
 export const parseOpacity = (opacity, defaultOpacity = 1) => {
-    if (!isNumber(opacity))
+    if (typeof opacity !== 'number') {
         return defaultOpacity;
+    }
     return opacity > 1 ? opacity / 100 : opacity;
 };
 const isColor = (color) => {

package/dist/components/App.svelte

@@ -22,6 +22,10 @@
 	import { provideEnvironment } from '../hooks/useEnvironment.svelte'
 	import type { CameraPose } from '../hooks/useControls.svelte'
 	import { provideWorld } from '../ecs'
+	import {
+		provideDrawConnectionConfig,
+		type DrawConnectionConfig,
+	} from '../hooks/useDrawConnectionConfig.svelte'
 
 	interface LocalConfigProps {
 		getLocalPartConfig: () => Struct
@@ -36,6 +40,7 @@
 		children?: Snippet
 		dashboard?: Snippet
 		localConfigProps?: LocalConfigProps
+		drawConnectionConfig?: DrawConnectionConfig
 
 		/**
 		 * Allows setting the initial camera pose
@@ -48,6 +53,7 @@
 		enableKeybindings = true,
 		localConfigProps,
 		cameraPose,
+		drawConnectionConfig,
 		children: appChildren,
 		dashboard,
 	}: Props = $props()
@@ -63,7 +69,7 @@
 	})
 
 	createPartIDContext(() => partID)
-
+	provideDrawConnectionConfig(() => drawConnectionConfig)
 	provideWeblabs()
 	provideToast()
 

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

@@ -1,6 +1,7 @@
 import type { Snippet } from 'svelte';
 import type { Struct } from '@viamrobotics/sdk';
 import type { CameraPose } from '../hooks/useControls.svelte';
+import { type DrawConnectionConfig } from '../hooks/useDrawConnectionConfig.svelte';
 interface LocalConfigProps {
     getLocalPartConfig: () => Struct;
     setLocalPartConfig: (config: Struct) => void;
@@ -13,6 +14,7 @@ interface Props {
     children?: Snippet;
     dashboard?: Snippet;
     localConfigProps?: LocalConfigProps;
+    drawConnectionConfig?: DrawConnectionConfig;
     /**
      * Allows setting the initial camera pose
      */

package/dist/components/SceneProviders.svelte

@@ -13,7 +13,6 @@
 		provideTransformControls,
 		type CameraPose,
 	} from '../hooks/useControls.svelte'
-	import { provideMotionClient } from '../hooks/useMotionClient.svelte'
 	import { provideLogs } from '../hooks/useLogs.svelte'
 	import { provideOrigin } from './xr/useOrigin.svelte'
 	import { provideWorldStates } from '../hooks/useWorldState.svelte'
@@ -45,7 +44,6 @@
 	provideGeometries(() => partID.current)
 	provide3DModels(() => partID.current)
 	providePointclouds(() => partID.current)
-	provideMotionClient(() => partID.current)
 	provideArmClient(() => partID.current)
 	provideWorldStates()
 	provideFramelessComponents()

package/dist/components/Tree/Settings.svelte

@@ -1,7 +1,6 @@
 <script lang="ts">
 	import { Select, Switch, Input } from '@viamrobotics/prime-core'
 	import RefreshRate from '../RefreshRate.svelte'
-	import { useMotionClient } from '../../hooks/useMotionClient.svelte'
 	import Drawer from './Drawer.svelte'
 	import { useSettings } from '../../hooks/useSettings.svelte'
 	import { useResourceNames } from '@viamrobotics/svelte-sdk'
@@ -19,10 +18,8 @@
 	const cameras = useResourceNames(() => partID.current, 'camera')
 	const settings = useSettings()
 	const { disabledCameras } = useMachineSettings()
-	const motionClient = useMotionClient()
 	const geometries = useGeometries()
 	const pointclouds = usePointClouds()
-
 	const { refetchPoses } = useRefetchPoses()
 
 	// Invalidate the renderer for any settings change
@@ -76,22 +73,6 @@
 			{/each}
 		</div>
 
-		<label class="flex flex-col gap-1">
-			Motion client
-			<Select
-				onchange={(event: InputEvent) => {
-					if (event.target instanceof HTMLSelectElement) {
-						motionClient.set(event.target.value)
-					}
-				}}
-				value={motionClient.current}
-			>
-				{#each motionClient.names as name (name)}
-					<option>{name}</option>
-				{/each}
-			</Select>
-		</label>
-
 		<h3 class="pt-2 text-sm"><strong>Pointclouds</strong></h3>
 		<div class="flex flex-col gap-2.5">
 			<label class="flex items-center justify-between gap-2">

package/dist/components/Tree/TreeContainer.svelte

@@ -69,41 +69,39 @@
 	})
 </script>
 
-{#if resizable.isLoaded}
-	<div
-		bind:this={container}
-		class="bg-extralight border-medium absolute top-0 left-0 z-1000 m-2 resize overflow-y-auto border text-xs"
-		style:min-width="{MIN_DIMENSIONS.width}px"
-		style:min-height="{MIN_DIMENSIONS.height}px"
-		style:width={resizable.current ? `${resizable.current.width}px` : undefined}
-		style:height={resizable.current ? `${resizable.current.height}px` : undefined}
-		use:draggable={{
-			bounds: 'body',
-			handle: dragElement,
-			defaultPosition: dragPosition.current,
-			onDragEnd(data) {
-				dragPosition.current = { x: data.offsetX, y: data.offsetY }
-			},
-		}}
-		{...rest}
-	>
-		<Tree
-			{rootNode}
-			{nodeMap}
-			bind:dragElement
-			onSelectionChange={(event) => {
-				const value = event.selectedValue[0]
+<div
+	bind:this={container}
+	class="bg-extralight border-medium absolute top-0 left-0 z-1000 m-2 resize overflow-y-auto border text-xs"
+	style:min-width="{MIN_DIMENSIONS.width}px"
+	style:min-height="{MIN_DIMENSIONS.height}px"
+	style:width={resizable.current ? `${resizable.current.width}px` : undefined}
+	style:height={resizable.current ? `${resizable.current.height}px` : undefined}
+	use:draggable={{
+		bounds: 'body',
+		handle: dragElement,
+		defaultPosition: dragPosition.current,
+		onDragEnd(data) {
+			dragPosition.current = { x: Math.max(data.offsetX, 0), y: Math.max(data.offsetY, 0) }
+		},
+	}}
+	{...rest}
+>
+	<Tree
+		{rootNode}
+		{nodeMap}
+		bind:dragElement
+		onSelectionChange={(event) => {
+			const value = event.selectedValue[0]
 
-				selectedEntity.set(value ? (Number(value) as Entity) : undefined)
-			}}
-		/>
+			selectedEntity.set(value ? (Number(value) as Entity) : undefined)
+		}}
+	/>
 
-		{#if environment.current.isStandalone && partID.current && partConfig.hasEditPermissions}
-			<AddFrames />
-		{/if}
+	{#if environment.current.isStandalone && partID.current && partConfig.hasEditPermissions}
+		<AddFrames />
+	{/if}
 
-		<Logs />
-		<Settings />
-		<Widgets />
-	</div>
-{/if}
+	<Logs />
+	<Settings />
+	<Widgets />
+</div>

package/dist/components/dashboard/Button.svelte

@@ -1,14 +1,15 @@
 <script lang="ts">
 	import { Icon, type IconName, Tooltip } from '@viamrobotics/prime-core'
 	import { Ruler } from 'lucide-svelte'
+	import type { ClassValue, MouseEventHandler } from 'svelte/elements'
 
 	interface Props {
 		icon: IconName | 'ruler'
 		active?: boolean
 		description: string
 		hotkey?: string
-		class?: string
-		onclick?: () => void
+		class?: ClassValue | null | undefined
+		onclick?: MouseEventHandler<HTMLButtonElement> | null | undefined
 	}
 
 	let {

package/dist/components/dashboard/Button.svelte.d.ts

@@ -1,11 +1,12 @@
 import { type IconName } from '@viamrobotics/prime-core';
+import type { ClassValue, MouseEventHandler } from 'svelte/elements';
 interface Props {
     icon: IconName | 'ruler';
     active?: boolean;
     description: string;
     hotkey?: string;
-    class?: string;
-    onclick?: () => void;
+    class?: ClassValue | null | undefined;
+    onclick?: MouseEventHandler<HTMLButtonElement> | null | undefined;
 }
 declare const Button: import("svelte").Component<Props, {}, "">;
 type Button = ReturnType<typeof Button>;

package/dist/defines.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Variables that are string-replaced by vite.
+ *
+ * These should not be imported into `$lib`,
+ * due to them not being replaced when shipped to NPM.
+ */
+export declare const backendIP: any;
+export declare const websocketPort: any;

package/dist/defines.js

@@ -0,0 +1,8 @@
+/**
+ * Variables that are string-replaced by vite.
+ *
+ * These should not be imported into `$lib`,
+ * due to them not being replaced when shipped to NPM.
+ */
+export const backendIP = BACKEND_IP;
+export const websocketPort = WS_PORT;

package/dist/hooks/useDrawAPI.svelte.js

@@ -12,6 +12,7 @@ import {} from 'koota';
 import { parsePlyInput } from '../ply';
 import { useLogs } from './useLogs.svelte';
 import { createBox, createCapsule, createSphere } from '../geometry';
+import { useDrawConnectionConfig } from './useDrawConnectionConfig.svelte';
 const colorUtil = new Color();
 const bufferTypes = {
     DRAW_POINTS: 0,
@@ -70,6 +71,9 @@ export const provideDrawAPI = () => {
     const logs = useLogs();
     const cameraControls = useCameraControls();
     const { invalidate } = useThrelte();
+    const drawConnectionConfig = useDrawConnectionConfig();
+    const backendIP = $derived(drawConnectionConfig.current?.backendIP);
+    const websocketPort = $derived(drawConnectionConfig.current?.websocketPort);
     let pointsIndex = 0;
     let geometryIndex = 0;
     let poseIndex = 0;
@@ -82,7 +86,7 @@ export const provideDrawAPI = () => {
     const loader = new GLTFLoader();
     const entities = new Map();
     const sendResponse = (response) => {
-        ws.send(JSON.stringify(response));
+        ws?.send(JSON.stringify(response));
     };
     const drawFrames = async (data) => {
         for (const rawFrame of data) {
@@ -300,15 +304,20 @@ export const provideDrawAPI = () => {
     };
     const scheduleReconnect = () => {
         setTimeout(() => {
-            reconnectDelay = Math.min(reconnectDelay * 2, maxReconnectDelay);
-            logs.add(`Reconnecting to drawing server in ${reconnectDelay / 1000} seconds...`, 'warn');
-            connect();
+            if (backendIP && websocketPort) {
+                reconnectDelay = Math.min(reconnectDelay * 2, maxReconnectDelay);
+                logs.add(`Reconnecting to drawing server in ${reconnectDelay / 1000} seconds...`, 'warn');
+                connect(backendIP, websocketPort);
+            }
+            else {
+                logs.add('No provided backend IP or websocket port', 'error');
+            }
         }, reconnectDelay);
     };
     const onOpen = () => {
         connectionStatus = 'open';
         reconnectDelay = 1000;
-        logs.add(`Connected to drawing server at ${BACKEND_IP}:${WS_PORT}`);
+        logs.add(`Connected to drawing server at ${backendIP}:${websocketPort}`);
     };
     const onClose = () => {
         connectionStatus = 'closed';
@@ -317,7 +326,7 @@ export const provideDrawAPI = () => {
     };
     const onError = (event) => {
         const stringified = JSON.stringify(event);
-        ws.close();
+        ws?.close();
         if (stringified === '{"isTrusted":true}') {
             return;
         }
@@ -409,17 +418,31 @@ export const provideDrawAPI = () => {
         }
         invalidate();
     };
-    const connect = () => {
-        if (BACKEND_IP && WS_PORT) {
-            const protocol = location.protocol === 'https:' ? 'wss' : 'ws';
-            ws = new WebSocket(`${protocol}://${BACKEND_IP}:${WS_PORT}/ws`);
-            ws.onclose = onClose;
-            ws.onerror = onError;
-            ws.onopen = onOpen;
-            ws.onmessage = onMessage;
-        }
+    const connect = (backendIP, websocketPort) => {
+        const protocol = location.protocol === 'https:' ? 'wss' : 'ws';
+        ws = new WebSocket(`${protocol}://${backendIP}:${websocketPort}/ws`);
+        ws.onclose = onClose;
+        ws.onerror = onError;
+        ws.onopen = onOpen;
+        ws.onmessage = onMessage;
+    };
+    const disconnect = () => {
+        ws?.removeEventListener('close', onClose);
+        ws?.removeEventListener('error', onError);
+        ws?.removeEventListener('open', onOpen);
+        ws?.removeEventListener('message', onMessage);
+        ws?.close();
+        ws = undefined;
     };
-    connect();
+    $effect(() => {
+        if (!backendIP || !websocketPort) {
+            return;
+        }
+        connect(backendIP, websocketPort);
+        return () => {
+            disconnect();
+        };
+    });
     setContext(key, {
         get connectionStatus() {
             return connectionStatus;

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

@@ -0,0 +1,10 @@
+export interface DrawConnectionConfig {
+    backendIP: string;
+    websocketPort: string;
+}
+interface Context {
+    current: DrawConnectionConfig | undefined;
+}
+export declare const provideDrawConnectionConfig: (args: () => DrawConnectionConfig | undefined) => void;
+export declare const useDrawConnectionConfig: () => Context;
+export {};

package/dist/hooks/useDrawConnectionConfig.svelte.js

@@ -0,0 +1,13 @@
+import { getContext, setContext } from 'svelte';
+const key = Symbol('draw-connection-config-key');
+export const provideDrawConnectionConfig = (args) => {
+    const current = $derived(args());
+    setContext(key, {
+        get current() {
+            return current;
+        },
+    });
+};
+export const useDrawConnectionConfig = () => {
+    return getContext(key);
+};

package/dist/hooks/useFrames.svelte.js

@@ -18,7 +18,7 @@ export const provideFrames = (partID) => {
     const machineStatus = useMachineStatus(partID);
     const logs = useLogs();
     const query = createRobotQuery(client, 'frameSystemConfig', () => ({
-        enabled: environment.current.viewerMode === 'monitor',
+        enabled: partID() !== '' && environment.current.viewerMode === 'monitor',
     }));
     const revision = $derived(machineStatus.current?.config?.revision);
     const partConfig = usePartConfig();

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

@@ -0,0 +1,4 @@
+import { commonApi } from '@viamrobotics/sdk';
+export declare const usePose: (name: () => string | undefined, parent: () => string | undefined) => {
+    readonly current: import("@bufbuild/protobuf").PlainMessage<commonApi.Pose> | undefined;
+};

package/dist/hooks/usePose.svelte.js

@@ -1,8 +1,7 @@
-import { createResourceClient, createResourceQuery } from '@viamrobotics/svelte-sdk';
+import { createRobotQuery, useRobotClient } from '@viamrobotics/svelte-sdk';
 import { usePartID } from './usePartID.svelte';
-import { MotionClient, Pose, Transform } from '@viamrobotics/sdk';
+import { commonApi, Pose } from '@viamrobotics/sdk';
 import { RefreshRates, useMachineSettings } from './useMachineSettings.svelte';
-import { useMotionClient } from './useMotionClient.svelte';
 import { useEnvironment } from './useEnvironment.svelte';
 import { observe } from '@threlte/core';
 import { untrack } from 'svelte';
@@ -16,7 +15,7 @@ export const usePose = (name, parent) => {
     const logs = useLogs();
     const { refreshRates } = useMachineSettings();
     const partID = usePartID();
-    const motionClient = useMotionClient();
+    const robotClient = useRobotClient(() => partID.current);
     const currentName = $derived(name());
     const currentParent = $derived(parent());
     const resourceByName = useResourceByName();
@@ -25,7 +24,6 @@ export const usePose = (name, parent) => {
     const parentResource = $derived(currentParent ? resourceByName.current[currentParent] : undefined);
     const frames = useFrames();
     let pose = $state(undefined);
-    const client = createResourceClient(MotionClient, () => partID.current, () => motionClient.current ?? '');
     const interval = $derived(refreshRates.get(RefreshRates.poses));
     const resolvedParent = $derived(parentResource?.subtype === 'arm' || parentResource?.subtype === 'gantry'
         ? `${parent()}_origin`
@@ -33,7 +31,7 @@ export const usePose = (name, parent) => {
     const resolvedName = $derived(resource?.subtype === 'arm' || resource?.subtype === 'gantry'
         ? `${currentName}_origin`
         : currentName);
-    const query = createResourceQuery(client, 'getPose', () => [resolvedName, resolvedParent ?? 'world', []], () => ({
+    const query = createRobotQuery(robotClient, 'getPose', () => [resolvedName, resolvedParent ?? 'world', []], () => ({
         enabled: interval !== RefetchRates.OFF && environment.current.viewerMode === 'monitor',
         refetchInterval: interval === RefetchRates.MANUAL ? false : interval,
     }));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@viamrobotics/motion-tools",
-  "version": "1.1.3",
+  "version": "1.1.5",
   "description": "Motion visualization with Viam",
   "license": "Apache-2.0",
   "type": "module",
@@ -25,7 +25,6 @@
     "@testing-library/jest-dom": "6.8.0",
     "@testing-library/svelte": "5.2.8",
     "@testing-library/user-event": "^14.6.1",
-    "@thi.ng/paths": "5.2.21",
     "@threlte/core": "8.3.0",
     "@threlte/extras": "9.7.0",
     "@threlte/rapier": "3.2.0",
@@ -36,10 +35,12 @@
     "@typescript-eslint/eslint-plugin": "8.42.0",
     "@typescript-eslint/parser": "8.42.0",
     "@viamrobotics/prime-core": "0.1.5",
-    "@viamrobotics/sdk": "0.56.0",
+    "@viamrobotics/sdk": "0.58.0",
     "@viamrobotics/svelte-sdk": "1.0.1",
     "@vitejs/plugin-basic-ssl": "2.1.0",
     "@vitest/coverage-v8": "^3.2.4",
+    "@zag-js/collapsible": "1.22.1",
+    "@zag-js/floating-panel": "1.22.1",
     "@zag-js/svelte": "1.22.1",
     "@zag-js/tree-view": "1.22.1",
     "camera-controls": "3.1.0",
@@ -49,8 +50,6 @@
     "globals": "16.3.0",
     "idb-keyval": "6.2.2",
     "jsdom": "26.1.0",
-    "koota": "^0.5.3",
-    "lodash-es": "4.17.21",
     "lucide-svelte": "0.542.0",
     "prettier": "3.6.2",
     "prettier-plugin-svelte": "3.4.0",
@@ -62,7 +61,6 @@
     "svelte-virtuallists": "1.4.2",
     "tailwindcss": "4.1.13",
     "three": "0.182.0",
-    "three-mesh-bvh": "^0.9.1",
     "threlte-uikit": "1.2.1",
     "tsx": "4.20.5",
     "type-fest": "^5.0.1",
@@ -82,8 +80,11 @@
     "@viamrobotics/prime-core": ">=0.1",
     "@viamrobotics/sdk": ">=0.38",
     "@viamrobotics/svelte-sdk": ">=0.1",
+    "@zag-js/collapsible": ">=1",
+    "@zag-js/floating-panel": ">=1",
     "@zag-js/svelte": ">=1",
     "@zag-js/tree-view": ">=1",
+    "camera-controls": ">=3",
     "idb-keyval": ">=6",
     "lucide-svelte": ">=0.511",
     "runed": ">=0.28",
@@ -122,6 +123,8 @@
     "@bufbuild/protobuf": "1.10.1",
     "@neodrag/svelte": "^2.3.3",
     "@tanstack/svelte-query-devtools": "^6.0.2",
+    "koota": "^0.5.3",
+    "lodash-es": "4.17.21",
     "uuid-tool": "^2.0.3"
   },
   "scripts": {

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

@@ -1,8 +0,0 @@
-interface Context {
-    names: string[];
-    current: string | undefined;
-    set(value?: string | undefined): void;
-}
-export declare const provideMotionClient: (partID: () => string) => void;
-export declare const useMotionClient: () => Context;
-export {};

package/dist/hooks/useMotionClient.svelte.js

@@ -1,32 +0,0 @@
-import { useResourceNames } from '@viamrobotics/svelte-sdk';
-import { getContext, setContext } from 'svelte';
-const key = Symbol('motion-client-context');
-export const provideMotionClient = (partID) => {
-    const motionResources = useResourceNames(partID, 'motion');
-    const motionNames = $derived(motionResources.current.map((resource) => resource.name));
-    let current = $state();
-    $effect.pre(() => {
-        if (current) {
-            return;
-        }
-        if (motionNames.includes('builtin')) {
-            current = 'builtin';
-            return;
-        }
-        current = motionNames[0];
-    });
-    setContext(key, {
-        get names() {
-            return motionNames;
-        },
-        get current() {
-            return current;
-        },
-        set(value) {
-            current = value;
-        },
-    });
-};
-export const useMotionClient = () => {
-    return getContext(key);
-};