@viamrobotics/motion-tools 0.14.12 → 0.15.1

package/dist/WorldObject.svelte.d.ts

@@ -1,5 +1,5 @@
 import type { Geometry, PlainMessage, Pose, Struct, TransformWithUUID } from '@viamrobotics/sdk';
-import { BatchedMesh, Color, Object3D, Vector3 } from 'three';
+import { BatchedMesh, Color, Object3D, Vector3, type BufferGeometry } from 'three';
 import type { ValueOf } from 'type-fest';
 import type { OBB } from 'three/addons/math/OBB.js';
 export type PointsGeometry = {
@@ -16,7 +16,14 @@ export type LinesGeometry = {
         value: Float32Array;
     };
 };
-export type Geometries = Geometry | PointsGeometry | LinesGeometry;
+export type ThreeBufferGeometry = {
+    center: undefined;
+    geometryType: {
+        case: 'bufferGeometry';
+        value: BufferGeometry;
+    };
+};
+export type Geometries = Geometry | PointsGeometry | LinesGeometry | ThreeBufferGeometry;
 export declare const SupportedShapes: {
     readonly points: "points";
     readonly line: "line";

package/dist/color.d.ts

@@ -1,4 +1,5 @@
 import { Color, type ColorRepresentation, type RGB } from 'three';
+import { ResourceName } from '@viamrobotics/sdk';
 /**
  * Darkens a THREE.Color by a given percentage while preserving hue.
  * @param color The original THREE.Color instance.
@@ -6,6 +7,7 @@ import { Color, type ColorRepresentation, type RGB } from 'three';
  * @returns A new THREE.Color instance with the darkened color.
  */
 export declare const darkenColor: (value: ColorRepresentation, percent: number) => Color;
+export declare const resourceNameToColor: (resourceName?: ResourceName) => Color | undefined;
 export declare const colors: {
     readonly default: string;
 };

package/dist/color.js

@@ -1,6 +1,7 @@
 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) => {
     return x <= 0.0031308 ? 12.92 * x : 1.055 * Math.pow(x, 1 / 2.4) - 0.055;
@@ -53,6 +54,11 @@ export const darkenColor = (value, percent) => {
     return new Color().setHSL(hsl.h, hsl.s, hsl.l);
 };
 const darkness = '600';
+export const resourceNameToColor = (resourceName) => {
+    return resourceName
+        ? new Color(resourceColors[resourceName.subtype])
+        : undefined;
+};
 export const colors = {
     default: oklchToHex(twColors.red[darkness]),
 };
@@ -102,8 +108,8 @@ export const isRGB = (color) => {
 };
 export const parseRGB = (color, defaultColor = { r: 0, g: 0, b: 0 }) => {
     if (!isRGB(color))
-        return new Color().setRGB(defaultColor.r, defaultColor.g, defaultColor.b);
-    return new Color().setRGB(color.r, color.g, color.b);
+        return new Color().setRGB(defaultColor.r > 1 ? defaultColor.r / 255 : defaultColor.r, defaultColor.g > 1 ? defaultColor.g / 255 : defaultColor.g, defaultColor.b > 1 ? defaultColor.b / 255 : defaultColor.b);
+    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))

package/dist/components/Details.svelte

@@ -28,6 +28,7 @@
 	import { FrameConfigUpdater } from '../FrameConfigUpdater.svelte'
 	import { useWeblabs } from '../hooks/useWeblabs.svelte'
 	import { WEBLABS_EXPERIMENTS } from '../hooks/useWeblabs.svelte'
+	import { useEnvironment } from '../hooks/useEnvironment.svelte'
 	const { ...rest } = $props()
 
 	const focused = useFocused()
@@ -38,7 +39,7 @@
 	const selectedObject = useSelectedObject()
 	const selectedObject3d = useSelectedObject3d()
 	const weblab = useWeblabs()
-
+	const environment = useEnvironment()
 	const object = $derived(focusedObject.current ?? selectedObject.current)
 	const object3d = $derived(focusedObject3d.current ?? selectedObject3d.current)
 	const worldPosition = $state({ x: 0, y: 0, z: 0 })
@@ -564,7 +565,7 @@
 		{/if}
 
 		<WeblabActive experiment={WEBLABS_EXPERIMENTS.MOTION_TOOLS_EDIT_FRAME}>
-			{#if showEditFrameOptions}
+			{#if showEditFrameOptions && environment.current.isStandalone}
 				<Button
 					variant="danger"
 					class="mt-2 w-full"

package/dist/components/FileDrop.svelte

@@ -2,10 +2,11 @@
 	import { useDrawAPI } from '../hooks/useDrawAPI.svelte'
 	import { parsePcdInWorker, WorldObject } from '../lib'
 	import { useToast, ToastVariant } from '@viamrobotics/prime-core'
+	import { PLYLoader } from 'three/examples/jsm/Addons.js'
 
 	let { ...rest } = $props()
 
-	const { addPoints } = useDrawAPI()
+	const { addPoints, addMesh } = useDrawAPI()
 
 	type DropStates = 'inactive' | 'hovering' | 'loading'
 
@@ -31,6 +32,12 @@
 
 	const toast = useToast()
 
+	const extensions = {
+		PCD: 'pcd',
+		PLY: 'ply',
+	}
+	const supportedFiles = [extensions.PCD, extensions.PLY]
+
 	const ondrop = (event: DragEvent) => {
 		event.preventDefault()
 
@@ -45,9 +52,18 @@
 		for (const file of files) {
 			const ext = file.name.split('.').at(-1)
 
-			if (ext !== '.pcd') {
+			if (!ext) {
+				toast({
+					message: `Could not determine file extension.`,
+					variant: ToastVariant.Danger,
+				})
+
+				continue
+			}
+
+			if (!supportedFiles.includes(ext)) {
 				toast({
-					message: `.${ext} is not a supported file type.`,
+					message: `Only ${supportedFiles.map((file) => `.${file}`).join(', ')} files are supported.`,
 					variant: ToastVariant.Danger,
 				})
 
@@ -65,34 +81,55 @@
 			})
 
 			reader.addEventListener('error', () => {
-				toast({ message: `${file.name} failed to load.`, variant: ToastVariant.Danger })
+				toast({
+					message: `${file.name} failed to load.`,
+					variant: ToastVariant.Danger,
+				})
 			})
 
 			reader.addEventListener('load', async (event) => {
 				const arrayBuffer = event.target?.result
 
 				if (!arrayBuffer || typeof arrayBuffer === 'string') {
+					toast({
+						message: `${file.name} failed to load.`,
+						variant: ToastVariant.Danger,
+					})
+
 					return
 				}
 
-				const result = await parsePcdInWorker(new Uint8Array(arrayBuffer))
-
-				addPoints(
-					new WorldObject(
-						file.name,
-						undefined,
-						undefined,
-						{
-							center: undefined,
-							geometryType: {
-								case: 'points',
-								value: result.positions,
+				if (ext === extensions.PCD) {
+					const result = await parsePcdInWorker(new Uint8Array(arrayBuffer))
+
+					addPoints(
+						new WorldObject(
+							file.name,
+							undefined,
+							undefined,
+							{
+								center: undefined,
+								geometryType: {
+									case: 'points',
+									value: result.positions,
+								},
 							},
-						},
-						result.colors ? { colors: result.colors } : undefined
+							result.colors ? { colors: result.colors } : undefined
+						)
 					)
-				)
-				toast({ message: `Loaded ${file.name}`, variant: ToastVariant.Success })
+
+					toast({ message: `Loaded ${file.name}`, variant: ToastVariant.Success })
+				} else if (ext === extensions.PLY) {
+					const result = new PLYLoader().parse(arrayBuffer)
+					const worldObject = new WorldObject(file.name, undefined, undefined, {
+						center: undefined,
+						geometryType: { case: 'bufferGeometry', value: result },
+					})
+
+					addMesh(worldObject)
+
+					toast({ message: `Loaded ${file.name}`, variant: ToastVariant.Success })
+				}
 			})
 
 			reader.readAsArrayBuffer(file)

package/dist/components/Geometry.svelte

@@ -103,7 +103,12 @@
 			{uuid}
 			bvh={{ enabled: false }}
 		>
-			{#if geometry.geometryType.case === 'mesh'}
+			{#if geometry.geometryType.case === 'bufferGeometry'}
+				<T
+					is={geometry.geometryType.value}
+					{oncreate}
+				/>
+			{:else if geometry.geometryType.case === 'mesh'}
 				{@const mesh = geometry.geometryType.value.mesh}
 				{@const meshGeometry = parsePlyInput(mesh)}
 				<T

package/dist/components/SceneProviders.svelte

@@ -18,6 +18,7 @@
 	import { provideArmClient } from '../hooks/useArmClient.svelte'
 	import { provideArrows } from '../hooks/useArrows.svelte'
 	import { provideFramelessComponents } from '../hooks/useFramelessComponents.svelte'
+	import { provideResourceByName } from '../hooks/useResourceByName.svelte'
 	interface Props {
 		children: Snippet<[{ focus: boolean }]>
 	}
@@ -36,13 +37,14 @@
 	provideStaticGeometries()
 	provideDrawAPI()
 
+	provideResourceByName(() => partID.current)
 	provideFrames(() => partID.current)
 	provideGeometries(() => partID.current)
 	providePointclouds(() => partID.current)
 	provideMotionClient(() => partID.current)
+	provideArmClient(() => partID.current)
 	provideObjects()
 	provideWorldStates()
-	provideArmClient(() => partID.current)
 	provideFramelessComponents()
 
 	const { focus } = provideSelection()

package/dist/components/Tree/buildTree.js

@@ -39,8 +39,11 @@ export const buildTreeNodes = (objects, worldStates) => {
                 children: [],
                 href: `/world-state/${worldState.name}/${object.name}`,
             };
+            const parentNode = object.referenceFrame && nodeMap.has(object.referenceFrame)
+                ? nodeMap.get(object.referenceFrame)
+                : node;
             nodeMap.set(object.name, child);
-            node.children?.push(child);
+            parentNode.children?.push(child);
         }
         nodeMap.set(worldState.name, node);
         rootNodes.push(node);

package/dist/components/WorldState.svelte

@@ -6,8 +6,9 @@
 	import Portal from './portal/Portal.svelte'
 	import PortalTarget from './portal/PortalTarget.svelte'
 	import { WorldObject } from '../WorldObject.svelte'
-	import { useArrows } from '../hooks/useArrows.svelte'
 	import { poseToDirection } from '../transform'
+	import { BatchedArrow } from '../three/BatchedArrow'
+	import { T } from '@threlte/core'
 
 	interface Props {
 		worldObjects: WorldObject[]
@@ -15,38 +16,36 @@
 
 	let { worldObjects }: Props = $props()
 
-	const batchedArrow = useArrows()
 	const currentArrows: Record<string, { id: number; arrow: WorldObject }> = {}
+	const arrowBatches = $state<Record<string, BatchedArrow>>({})
 
 	const arrows = $derived(worldObjects.filter((object) => object.metadata?.shape === 'arrow'))
 	const objects = $derived(worldObjects.filter((object) => object.metadata?.shape !== 'arrow'))
 
 	const getArrows = () => ({ ...currentArrows })
-	const getArrow = (uuid: string) => currentArrows[uuid]
-	const removeArrow = (uuid: string) => delete currentArrows[uuid]
+	const getArrow = (referenceFrame: string, uuid: string) =>
+		currentArrows[`${referenceFrame}:${uuid}`]
+
+	const removeArrow = (referenceFrame: string, uuid: string) => {
+		delete currentArrows[`${referenceFrame}:${uuid}`]
+	}
+
 	const setArrow = (arrow: WorldObject) => {
-		const currentArrow = getArrow(arrow.uuid)
+		const referenceFrame = arrow.referenceFrame ?? 'world'
+		const currentArrow = getArrow(referenceFrame, arrow.uuid)
 		const color = arrow.metadata?.color ?? new Color('yellow')
-		if (currentArrow) {
-			batchedArrow.updateArrow(
-				currentArrow.id,
-				poseToDirection(arrow.pose),
-				new Vector3(arrow.pose.x, arrow.pose.y, arrow.pose.z),
-				0.1,
-				color,
-				true
-			)
+		const direction = poseToDirection(arrow.pose)
+		const position = new Vector3(arrow.pose.x, arrow.pose.y, arrow.pose.z)
+
+		arrowBatches[referenceFrame] ??= new BatchedArrow()
+		const batchedArrow = arrowBatches[referenceFrame]
 
-			currentArrows[arrow.uuid] = { id: currentArrow.id, arrow }
+		if (currentArrow) {
+			batchedArrow.updateArrow(currentArrow.id, direction, position, 0.1, color, true)
+			currentArrows[`${referenceFrame}:${arrow.uuid}`] = { id: currentArrow.id, arrow }
 		} else {
-			const id = batchedArrow.addArrow(
-				poseToDirection(arrow.pose),
-				new Vector3(arrow.pose.x, arrow.pose.y, arrow.pose.z),
-				0.1,
-				color,
-				true
-			)
-			currentArrows[arrow.uuid] = { id, arrow }
+			const id = batchedArrow.addArrow(direction, position, 0.1, color, true)
+			currentArrows[`${referenceFrame}:${arrow.uuid}`] = { id, arrow }
 		}
 	}
 
@@ -58,12 +57,24 @@
 		})
 
 		Object.values(toRemove).forEach(({ id, arrow }) => {
-			batchedArrow.removeArrow(id)
-			removeArrow(arrow.uuid)
+			const referenceFrame = arrow.referenceFrame ?? 'world'
+			arrowBatches[referenceFrame].removeArrow(id)
+			removeArrow(referenceFrame, arrow.uuid)
 		})
 	})
 </script>
 
+{#each Object.entries(arrowBatches) as [referenceFrame, batch] (referenceFrame)}
+	<Portal id={referenceFrame}>
+		<T
+			name={batch.object3d.name}
+			is={batch.object3d}
+			dispose={false}
+			bvh={{ enabled: false }}
+		/>
+	</Portal>
+{/each}
+
 {#each objects as object (object.uuid)}
 	<Portal id={object.referenceFrame}>
 		<Frame

package/dist/geometry.d.ts

@@ -1,2 +1,4 @@
 import type { Geometry } from '@viamrobotics/sdk';
+import type { Frame } from './frame';
 export declare const createGeometry: (geometryType?: Geometry["geometryType"], label?: string) => Geometry;
+export declare const createGeometryFromFrame: (frame: Frame) => import("@viamrobotics/sdk").PlainMessage<import("@viamrobotics/sdk/dist/gen/common/v1/common_pb").Geometry> | undefined;

package/dist/geometry.js

@@ -6,3 +6,37 @@ export const createGeometry = (geometryType, label = '') => {
         geometryType: geometryType ?? { case: undefined, value: undefined },
     };
 };
+export const createGeometryFromFrame = (frame) => {
+    if (!frame.geometry) {
+        return;
+    }
+    if (frame.geometry.type === 'box') {
+        return createGeometry({
+            case: 'box',
+            value: {
+                dimsMm: {
+                    x: frame.geometry.x,
+                    y: frame.geometry.y,
+                    z: frame.geometry.z,
+                },
+            },
+        });
+    }
+    if (frame.geometry.type === 'sphere') {
+        return createGeometry({
+            case: 'sphere',
+            value: {
+                radiusMm: frame.geometry.r,
+            },
+        });
+    }
+    if (frame.geometry.type === 'capsule') {
+        return createGeometry({
+            case: 'capsule',
+            value: {
+                radiusMm: frame.geometry.r,
+                lengthMm: frame.geometry.l,
+            },
+        });
+    }
+};

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

@@ -2,7 +2,6 @@ import { Vector3 } from 'three';
 import { WorldObject, type PointsGeometry } from '../WorldObject.svelte';
 type ConnectionStatus = 'connecting' | 'open' | 'closed';
 interface Context {
-    addPoints(worldObject: WorldObject<PointsGeometry>): void;
     points: WorldObject<PointsGeometry>[];
     frames: WorldObject[];
     lines: WorldObject[];
@@ -16,6 +15,8 @@ interface Context {
         lookAt: Vector3;
         animate: boolean;
     } | undefined;
+    addPoints(worldObject: WorldObject<PointsGeometry>): void;
+    addMesh(worldObject: WorldObject): void;
     clearCamera: () => void;
 }
 export declare const provideDrawAPI: () => void;

package/dist/hooks/useDrawAPI.svelte.js

@@ -112,13 +112,7 @@ export const provideDrawAPI = () => {
             result.pose = data.center;
             return;
         }
-        const geometry = {
-            label: data.label,
-            center: undefined,
-            geometryType: {
-                case: undefined,
-            },
-        };
+        const geometry = createGeometry();
         if ('mesh' in data) {
             geometry.geometryType.case = 'mesh';
             geometry.geometryType.value = data.mesh;
@@ -443,9 +437,6 @@ export const provideDrawAPI = () => {
         get points() {
             return points;
         },
-        addPoints(worldObject) {
-            points.push(worldObject);
-        },
         get lines() {
             return lines;
         },
@@ -467,6 +458,12 @@ export const provideDrawAPI = () => {
         get camera() {
             return camera;
         },
+        addPoints(worldObject) {
+            points.push(worldObject);
+        },
+        addMesh(worldObject) {
+            meshes.push(worldObject);
+        },
         clearCamera: () => {
             camera = undefined;
         },

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

@@ -1,3 +1,4 @@
+export declare const ENVIRONMENT_CONTEXT_KEY: unique symbol;
 interface Environemnt {
     viewerMode: 'edit' | 'monitor';
     isStandalone: boolean;
@@ -5,6 +6,7 @@ interface Environemnt {
 interface Context {
     current: Environemnt;
 }
+export declare const createEnvironment: () => Context;
 export declare const provideEnvironment: () => Context;
 export declare const useEnvironment: () => Context;
 export {};

package/dist/hooks/useEnvironment.svelte.js

@@ -1,19 +1,23 @@
 import { getContext, setContext } from 'svelte';
-const key = Symbol('environment');
+export const ENVIRONMENT_CONTEXT_KEY = Symbol('environment');
 const defaults = () => ({
     viewerMode: 'monitor',
     isStandalone: true,
 });
-export const provideEnvironment = () => {
+export const createEnvironment = () => {
     const environment = $state(defaults());
     const context = {
         get current() {
             return environment;
         },
     };
-    setContext(key, context);
+    return context;
+};
+export const provideEnvironment = () => {
+    const context = createEnvironment();
+    setContext(ENVIRONMENT_CONTEXT_KEY, context);
     return context;
 };
 export const useEnvironment = () => {
-    return getContext(key);
+    return getContext(ENVIRONMENT_CONTEXT_KEY);
 };

package/dist/hooks/useFrames.svelte.js

@@ -1,16 +1,17 @@
 import { getContext, setContext, untrack } from 'svelte';
-import { useRobotClient, createRobotQuery, useMachineStatus, useResourceNames, } from '@viamrobotics/svelte-sdk';
+import { useRobotClient, createRobotQuery, useMachineStatus } from '@viamrobotics/svelte-sdk';
 import { WorldObject } from '../WorldObject.svelte';
 import { useLogs } from './useLogs.svelte';
-import { resourceColors } from '../color';
+import { resourceNameToColor } from '../color';
 import { usePartConfig } from './usePartConfig.svelte';
-import { Color } from 'three';
 import { useEnvironment } from './useEnvironment.svelte';
 import { createPoseFromFrame } from '../transform';
-import { observe } from '@threlte/core';
+import { usePersistentUUIDs } from './usePersistentUUIDs.svelte';
+import { createGeometryFromFrame } from '../geometry';
+import { useResourceByName } from './useResourceByName.svelte';
 const key = Symbol('frames-context');
 export const provideFrames = (partID) => {
-    const resourceNames = useResourceNames(partID);
+    const resourceByName = useResourceByName();
     const client = useRobotClient(partID);
     const machineStatus = useMachineStatus(partID);
     const logs = useLogs();
@@ -18,8 +19,11 @@ export const provideFrames = (partID) => {
     const revision = $derived(machineStatus.current?.config?.revision);
     const partConfig = usePartConfig();
     const environment = useEnvironment();
-    observe.pre(() => [revision], () => {
-        untrack(() => query.current).refetch();
+    const { updateUUIDs } = usePersistentUUIDs();
+    $effect.pre(() => {
+        if (revision) {
+            untrack(() => query.current).refetch();
+        }
         logs.add('Fetching frames...');
     });
     $effect.pre(() => {
@@ -30,109 +34,41 @@ export const provideFrames = (partID) => {
             environment.current.viewerMode = 'monitor';
         }
     });
-    let current = $derived.by(() => {
-        const objects = [];
+    const machineFrames = $derived.by(() => {
+        const objects = {};
         for (const { frame } of query.current.data ?? []) {
             if (frame === undefined) {
                 continue;
             }
-            const resourceName = resourceNames.current.find((item) => item.name === frame.referenceFrame);
+            const resourceName = resourceByName.current[frame.referenceFrame];
             const frameName = frame.referenceFrame ? frame.referenceFrame : 'Unnamed frame';
-            objects.push(new WorldObject(frameName, frame.poseInObserverFrame?.pose, frame.poseInObserverFrame?.referenceFrame, frame.physicalObject, resourceName
-                ? {
-                    color: new Color(resourceColors[resourceName.subtype]),
-                }
-                : undefined));
+            const color = resourceNameToColor(resourceName);
+            objects[frameName] = new WorldObject(frameName, frame.poseInObserverFrame?.pose, frame.poseInObserverFrame?.referenceFrame, frame.physicalObject, color ? { color } : undefined);
         }
         return objects;
     });
-    let currentWorldObjects = {};
-    const getWorldObjects = () => ({ ...currentWorldObjects });
-    const getWorldObject = (componentName) => currentWorldObjects[componentName];
-    const setWorldObject = (component, worldObject) => {
-        if (!component.frame) {
-            return;
-        }
-        worldObject.referenceFrame = component.frame.parent;
-        worldObject.localEditedPose = createPoseFromFrame(component.frame);
-        if (component.frame.geometry) {
-            switch (component.frame.geometry.type) {
-                case 'box':
-                    worldObject.geometry = {
-                        ...worldObject.geometry,
-                        geometryType: {
-                            case: 'box',
-                            value: {
-                                dimsMm: {
-                                    x: component.frame.geometry.x,
-                                    y: component.frame.geometry.y,
-                                    z: component.frame.geometry.z,
-                                },
-                            },
-                        },
-                    };
-                    break;
-                case 'sphere':
-                    worldObject.geometry = {
-                        ...worldObject.geometry,
-                        geometryType: { case: 'sphere', value: { radiusMm: component.frame.geometry.r } },
-                    };
-                    break;
-                case 'capsule':
-                    worldObject.geometry = {
-                        ...worldObject.geometry,
-                        geometryType: {
-                            case: 'capsule',
-                            value: {
-                                radiusMm: component.frame.geometry.r,
-                                lengthMm: component.frame.geometry.l,
-                            },
-                        },
-                    };
-                    break;
-                default:
-                    worldObject.geometry = undefined;
-                    break;
-            }
-        }
-        else {
-            worldObject.geometry = undefined;
-        }
-        currentWorldObjects[component.name] = worldObject;
-    };
-    const deleteWorldObject = (componentName) => {
-        delete currentWorldObjects[componentName];
-    };
-    $effect.pre(() => {
-        untrack(() => {
-            currentWorldObjects = {};
-            for (const currentWorldObject of current) {
-                currentWorldObjects[currentWorldObject.name] = currentWorldObject;
-            }
-        });
-        const components = partConfig.localPartConfig.toJson()?.components;
-        const fragmentMods = partConfig.localPartConfig.toJson()
-            ?.fragment_mods;
-        const fragmentDefinedComponents = Object.keys(partConfig.componentNameToFragmentId);
+    const configFrames = $derived.by(() => {
+        const components = partConfig.localPartConfig.toJson().components;
+        const objects = [];
         // deal with part defined frame config
-        for (const component of components || []) {
-            const worldObject = getWorldObject(component.name);
-            if (worldObject && component.frame) {
-                setWorldObject(component, worldObject);
-            }
-            else if (component.frame && Object.keys(getWorldObjects()).length > 0) {
-                // extra clause to prevent adding a component to the world objects when it may be loaded via frame system config later (first tick issue where config updated but current world objects not triggered yet)
-                const pose = createPoseFromFrame(component.frame);
-                const newWorldObject = new WorldObject(component.name, pose, component.frame.parent);
-                setWorldObject(component, newWorldObject);
-            }
-            else {
-                deleteWorldObject(component.name);
+        for (const component of components ?? []) {
+            if (!component.frame) {
+                continue;
             }
+            const pose = createPoseFromFrame(component.frame);
+            const geometry = createGeometryFromFrame(component.frame);
+            const worldObject = new WorldObject(component.name, pose, component.frame.parent, geometry);
+            objects.push(worldObject);
         }
+        return objects;
+    });
+    const [fragmentFrames, fragmentUnsetFrames] = $derived.by(() => {
+        const { fragment_mods: fragmentMods = [] } = partConfig.localPartConfig.toJson() ?? {};
+        const fragmentDefinedComponents = Object.keys(partConfig.componentNameToFragmentId);
+        const objects = [];
+        const unsetObjects = [];
         // deal with fragment defined components
         for (const fragmentComponentName of fragmentDefinedComponents || []) {
-            const worldObject = getWorldObject(fragmentComponentName);
             const fragmentId = partConfig.componentNameToFragmentId[fragmentComponentName];
             const fragmentMod = fragmentMods?.find((mod) => mod.fragment_id === fragmentId);
             if (!fragmentMod) {
@@ -141,27 +77,53 @@ export const provideFrames = (partID) => {
             const setComponentModIndex = fragmentMod.mods.findLastIndex((mod) => mod['$set']?.[`components.${fragmentComponentName}.frame`] !== undefined);
             const unsetComponentModIndex = fragmentMod.mods.findLastIndex((mod) => mod['$unset']?.[`components.${fragmentComponentName}.frame`] !== undefined);
             if (setComponentModIndex < unsetComponentModIndex) {
-                deleteWorldObject(fragmentComponentName);
+                unsetObjects.push(fragmentComponentName);
             }
             else if (unsetComponentModIndex < setComponentModIndex) {
                 const frameData = fragmentMod.mods[setComponentModIndex]['$set'][`components.${fragmentComponentName}.frame`];
-                const componentConfig = {
-                    name: fragmentComponentName,
-                    frame: frameData,
-                };
-                if (worldObject) {
-                    setWorldObject(componentConfig, worldObject);
-                }
-                else if (Object.keys(getWorldObjects()).length > 0) {
-                    const pose = createPoseFromFrame(frameData);
-                    const newWorldObject = new WorldObject(fragmentComponentName, pose, frameData.parent);
-                    setWorldObject(componentConfig, newWorldObject);
-                }
+                const pose = createPoseFromFrame(frameData);
+                const geometry = createGeometryFromFrame(frameData);
+                const worldObject = new WorldObject(fragmentComponentName, pose, frameData.parent, geometry);
+                objects.push(worldObject);
+            }
+        }
+        return [objects, unsetObjects];
+    });
+    $effect.pre(() => {
+        for (const frame of configFrames) {
+            const result = machineFrames[frame.name];
+            if (result) {
+                result.referenceFrame = frame.referenceFrame;
+                result.pose = frame.pose;
+                result.geometry = frame.geometry;
+            }
+            else {
+                machineFrames[frame.name] = frame;
             }
         }
-        untrack(() => {
-            current = [...Object.values(getWorldObjects())];
-        });
+    });
+    $effect.pre(() => {
+        for (const frame of fragmentFrames) {
+            const result = machineFrames[frame.name];
+            if (result) {
+                result.referenceFrame = frame.referenceFrame;
+                result.pose = frame.pose;
+                result.geometry = frame.geometry;
+            }
+            else {
+                machineFrames[frame.name] = frame;
+            }
+        }
+    });
+    $effect.pre(() => {
+        for (const name of fragmentUnsetFrames) {
+            delete machineFrames[name];
+        }
+    });
+    const current = $derived.by(() => {
+        const results = Object.values(machineFrames);
+        updateUUIDs(results);
+        return results;
     });
     const error = $derived(query.current.error ?? undefined);
     const fetching = $derived(query.current.isFetching);

package/dist/hooks/usePose.svelte.js

@@ -21,23 +21,15 @@ export const usePose = (name, parent) => {
     const options = $derived(queryOptions({
         enabled: interval !== -1 &&
             client.current !== undefined &&
-            resource !== undefined &&
             environment.current.viewerMode === 'monitor',
         refetchInterval: interval === 0 ? false : interval,
-        queryKey: [
-            'partID',
-            partID.current,
-            client.current?.name,
-            'getPose',
-            resource?.name,
-            parent(),
-        ],
+        queryKey: ['partID', partID.current, client.current?.name, 'getPose', name(), parent()],
         queryFn: async () => {
-            if (!client.current || !resource) {
+            if (!client.current) {
                 throw new Error('No client');
             }
             const resolvedParent = parentResource?.subtype === 'arm' ? `${parent()}_origin` : parent();
-            const pose = await client.current.getPose(resource.name, resolvedParent ?? 'world', []);
+            const pose = await client.current.getPose(name(), resolvedParent ?? 'world', []);
             return pose;
         },
     }));
@@ -49,6 +41,10 @@ export const usePose = (name, parent) => {
     });
     return {
         get current() {
+            /**
+             * Do not return the pose of an arm because in this case the pose represents
+             * the end effector frame and not the origin frame
+             */
             if (resource?.subtype === 'arm') {
                 return;
             }

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

@@ -0,0 +1,7 @@
+import type { ResourceName } from '@viamrobotics/sdk';
+interface Context {
+    current: Record<string, ResourceName>;
+}
+export declare const provideResourceByName: (partID: () => string) => void;
+export declare const useResourceByName: () => Context;
+export {};

package/dist/hooks/useResourceByName.svelte.js

@@ -0,0 +1,21 @@
+import { useResourceNames } from '@viamrobotics/svelte-sdk';
+import { getContext, setContext } from 'svelte';
+const key = Symbol('resource-by-name-context');
+export const provideResourceByName = (partID) => {
+    const resourceNames = useResourceNames(partID);
+    const resourceByName = $derived.by(() => {
+        const results = {};
+        for (const resourceName of resourceNames.current) {
+            results[resourceName.name] = resourceName;
+        }
+        return results;
+    });
+    setContext(key, {
+        get current() {
+            return resourceByName;
+        },
+    });
+};
+export const useResourceByName = () => {
+    return getContext(key);
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@viamrobotics/motion-tools",
-  "version": "0.14.12",
+  "version": "0.15.1",
   "description": "Motion visualization with Viam",
   "license": "Apache-2.0",
   "type": "module",