@viamrobotics/motion-tools 0.14.3 → 0.14.6

package/dist/{Detail.svelte.d.ts → FrameConfigUpdater.svelte.d.ts}

@@ -1,20 +1,14 @@
+import type { Frame } from './frame';
 import type { WorldObject } from './lib';
 import type { Geometries } from './WorldObject.svelte';
 import type { Pose } from '@viamrobotics/sdk';
 type UpdateFrameCallback = {
-    (componentName: string, referenceFrame: string, pose: Pose, geometry?: {
-        type: 'none' | 'box' | 'sphere' | 'capsule';
-        r?: number;
-        l?: number;
-        x?: number;
-        y?: number;
-        z?: number;
-    }): void;
+    (componentName: string, referenceFrame: string, pose: Pose, geometry?: Frame['geometry']): void;
 };
 type RemoveFrameCallback = {
     (componentName: string): void;
 };
-export declare class DetailConfigUpdater {
+export declare class FrameConfigUpdater {
     private object;
     private referenceFrame;
     private updateFrame;
@@ -31,14 +25,7 @@ export declare class DetailConfigUpdater {
         oZ?: number;
         theta?: number;
     }) => void;
-    updateGeometry: (geometry: {
-        type: "none" | "box" | "sphere" | "capsule";
-        r?: number;
-        l?: number;
-        x?: number;
-        y?: number;
-        z?: number;
-    }) => void;
+    updateGeometry: (geometry: Partial<Frame["geometry"]>) => void;
     setFrameParent: (parentName: string) => void;
     deleteFrame: () => void;
     setGeometryType: (type: "none" | "box" | "sphere" | "capsule") => void;

package/dist/{Detail.svelte.js → FrameConfigUpdater.svelte.js}

@@ -1,4 +1,5 @@
-export class DetailConfigUpdater {
+import { createPose } from './transform';
+export class FrameConfigUpdater {
     object;
     referenceFrame;
     updateFrame;
@@ -49,7 +50,7 @@ export class DetailConfigUpdater {
         if (!object)
             return;
         let geometryObject;
-        if (geometry.type === 'box') {
+        if (geometry?.type === 'box') {
             const currentGeometry = object.geometry?.geometryType.value;
             geometryObject = {
                 type: 'box',
@@ -58,14 +59,14 @@ export class DetailConfigUpdater {
                 z: geometry.z ?? currentGeometry?.dimsMm?.z,
             };
         }
-        else if (geometry.type === 'sphere') {
+        else if (geometry?.type === 'sphere') {
             const currentGeometry = object.geometry?.geometryType.value;
             geometryObject = {
                 type: 'sphere',
                 r: geometry.r ?? currentGeometry?.radiusMm,
             };
         }
-        else if (geometry.type === 'capsule') {
+        else if (geometry?.type === 'capsule') {
             const currentGeometry = object.geometry?.geometryType.value;
             geometryObject = {
                 type: 'capsule',
@@ -73,29 +74,13 @@ export class DetailConfigUpdater {
                 l: geometry.l ?? currentGeometry?.lengthMm,
             };
         }
-        this.updateFrame(object.name ?? '', this.referenceFrame(), {
-            x: object.localEditedPose.x,
-            y: object.localEditedPose.y,
-            z: object.localEditedPose.z,
-            oX: object.localEditedPose.oX,
-            oY: object.localEditedPose.oY,
-            oZ: object.localEditedPose.oZ,
-            theta: object.localEditedPose.theta,
-        }, { ...geometryObject });
+        this.updateFrame(object.name ?? '', this.referenceFrame(), createPose(object.localEditedPose), geometryObject);
     };
     setFrameParent = (parentName) => {
         const object = this.object();
         if (!object)
             return;
-        this.updateFrame(object.name ?? '', parentName, {
-            x: object.localEditedPose.x,
-            y: object.localEditedPose.y,
-            z: object.localEditedPose.z,
-            oX: object.localEditedPose.oX,
-            oY: object.localEditedPose.oY,
-            oZ: object.localEditedPose.oZ,
-            theta: object.localEditedPose.theta,
-        });
+        this.updateFrame(object.name ?? '', parentName, createPose(object.localEditedPose));
     };
     deleteFrame = () => {
         const object = this.object();
@@ -108,37 +93,13 @@ export class DetailConfigUpdater {
         if (!object)
             return;
         if (type === 'none') {
-            this.updateFrame(object.name ?? '', this.referenceFrame(), {
-                x: object.localEditedPose.x,
-                y: object.localEditedPose.y,
-                z: object.localEditedPose.z,
-                oX: object.localEditedPose.oX,
-                oY: object.localEditedPose.oY,
-                oZ: object.localEditedPose.oZ,
-                theta: object.localEditedPose.theta,
-            }, { type: 'none' });
+            this.updateFrame(object.name ?? '', this.referenceFrame(), createPose(object.localEditedPose), { type: 'none' });
         }
         else if (type === 'box') {
-            this.updateFrame(object.name ?? '', this.referenceFrame(), {
-                x: object.localEditedPose.x,
-                y: object.localEditedPose.y,
-                z: object.localEditedPose.z,
-                oX: object.localEditedPose.oX,
-                oY: object.localEditedPose.oY,
-                oZ: object.localEditedPose.oZ,
-                theta: object.localEditedPose.theta,
-            }, { type: 'box', x: 100, y: 100, z: 100 });
+            this.updateFrame(object.name ?? '', this.referenceFrame(), createPose(object.localEditedPose), { type: 'box', x: 100, y: 100, z: 100 });
         }
         else if (type === 'sphere') {
-            this.updateFrame(object.name ?? '', this.referenceFrame(), {
-                x: object.localEditedPose.x,
-                y: object.localEditedPose.y,
-                z: object.localEditedPose.z,
-                oX: object.localEditedPose.oX,
-                oY: object.localEditedPose.oY,
-                oZ: object.localEditedPose.oZ,
-                theta: object.localEditedPose.theta,
-            }, { type: 'sphere', r: 100 });
+            this.updateFrame(object.name ?? '', this.referenceFrame(), createPose(object.localEditedPose), { type: 'sphere', r: 100 });
         }
         else if (type === 'capsule') {
             this.updateFrame(object.name ?? '', this.referenceFrame(), {

package/dist/components/AxesHelper.svelte

@@ -65,7 +65,6 @@
 <T
 	is={line}
 	{...rest}
-	raycast={() => null}
 	bvh={{ enabled: false }}
 >
 	<T is={geometry} />

package/dist/components/Details.svelte

@@ -25,7 +25,7 @@
 	import WeblabActive from './weblab/WeblabActive.svelte'
 	import { useFrames } from '../hooks/useFrames.svelte'
 	import { usePartConfig } from '../hooks/usePartConfig.svelte'
-	import { DetailConfigUpdater } from '../Detail.svelte'
+	import { FrameConfigUpdater } from '../FrameConfigUpdater.svelte'
 	import { useWeblabs } from '../hooks/useWeblabs.svelte'
 
 	const { ...rest } = $props()
@@ -59,7 +59,7 @@
 
 	const draggable = useDraggable('details')
 
-	const detailConfigUpdater: DetailConfigUpdater = new DetailConfigUpdater(
+	const detailConfigUpdater = new FrameConfigUpdater(
 		() => object,
 		partConfig.updateFrame,
 		partConfig.deleteFrame,

package/dist/components/Geometry.svelte

@@ -65,18 +65,38 @@
 	const oncreate = (ref: BufferGeometry) => {
 		geo = ref
 	}
+
+	const parsePlyInput = (mesh: string | Uint8Array): BufferGeometry => {
+		// Case 1: already a base64 or ASCII string
+		if (typeof mesh === 'string') {
+			return plyLoader.parse(atob(mesh))
+		}
+
+		// Case 2: detect text vs binary PLY in Uint8Array
+		const header = new TextDecoder().decode(mesh.slice(0, 50))
+		const isAscii = header.includes('format ascii')
+
+		// Case 3: text-mode PLY → decode bytes to string
+		if (isAscii) {
+			const text = new TextDecoder().decode(mesh)
+			return plyLoader.parse(text)
+		}
+
+		// Case 4: binary PLY → pass ArrayBuffer directly
+		return plyLoader.parse(mesh.buffer as ArrayBuffer)
+	}
 </script>
 
 <T
 	is={group}
 	{...rest}
 >
-	<AxesHelper
-		width={3}
-		length={0.1}
-	/>
-
 	{#if geometry?.geometryType}
+		<AxesHelper
+			width={3}
+			length={0.1}
+		/>
+
 		<T
 			is={mesh}
 			{name}
@@ -84,8 +104,8 @@
 			bvh={{ enabled: false }}
 		>
 			{#if geometry.geometryType.case === 'mesh'}
-				{@const mesh = geometry.geometryType.value.mesh as Uint8Array<ArrayBuffer>}
-				{@const meshGeometry = plyLoader.parse(typeof mesh === 'string' ? atob(mesh) : mesh.buffer)}
+				{@const mesh = geometry.geometryType.value.mesh}
+				{@const meshGeometry = parsePlyInput(mesh)}
 				<T
 					is={meshGeometry}
 					{oncreate}
@@ -111,7 +131,7 @@
 					args={[radiusMm * 0.001, lengthMm * 0.001]}
 					{oncreate}
 				/>
-			{:else}{/if}
+			{/if}
 
 			{#if geometry.geometryType.case === 'line'}
 				<MeshLineMaterial
@@ -137,6 +157,13 @@
 				{/if}
 			{/if}
 		</T>
+	{:else}
+		<AxesHelper
+			{name}
+			{uuid}
+			width={3}
+			length={0.1}
+		/>
 	{/if}
 
 	{@render children?.({ ref: group })}

package/dist/components/WorldObjects.svelte

@@ -74,6 +74,21 @@
 	</Portal>
 {/each}
 
+{#each drawAPI.frames as object (object.uuid)}
+	<Portal id={object.referenceFrame}>
+		<Frame
+			uuid={object.uuid}
+			name={object.name}
+			pose={object.pose}
+			geometry={object.geometry}
+			metadata={object.metadata}
+		>
+			<PortalTarget id={object.name} />
+			<Label text={object.name} />
+		</Frame>
+	</Portal>
+{/each}
+
 {#each drawAPI.points as object (object.uuid)}
 	<Portal id={object.referenceFrame}>
 		<Pointcloud {object}>

package/dist/frame.d.ts

@@ -0,0 +1,76 @@
+import type { ValueOf } from 'type-fest';
+type FrameGeometryMap = {
+    none: {
+        type: 'none';
+    };
+    box: {
+        type: 'box';
+        x: number;
+        y: number;
+        z: number;
+    };
+    sphere: {
+        type: 'sphere';
+        r: number;
+    };
+    capsule: {
+        type: 'capsule';
+        r: number;
+        l: number;
+    };
+};
+export type FrameGeometry = keyof FrameGeometryMap;
+export type FrameGeometries = ValueOf<FrameGeometryMap>;
+type FrameOrientationMap = {
+    quaternion: {
+        type: 'quaternion';
+        value: {
+            x: number;
+            y: number;
+            z: number;
+            w: number;
+        };
+    };
+    euler_angles: {
+        type: 'euler_angles';
+        value: {
+            roll: number;
+            pitch: number;
+            yaw: number;
+        };
+    };
+    ov_degrees: {
+        type: 'ov_degrees';
+        value: {
+            x: number;
+            y: number;
+            z: number;
+            th: number;
+        };
+    };
+    ov_radians: {
+        type: 'ov_radians';
+        value: {
+            x: number;
+            y: number;
+            z: number;
+            th: number;
+        };
+    };
+};
+export type FrameOrientation = keyof FrameOrientationMap;
+export type FrameOrientations = ValueOf<FrameOrientationMap>;
+export interface Frame<T extends FrameGeometry = FrameGeometry, K extends FrameOrientation = FrameOrientation> {
+    id?: string;
+    name?: string;
+    parent: string;
+    translation: {
+        x: number;
+        y: number;
+        z: number;
+    };
+    orientation: FrameOrientationMap[K];
+    geometry?: FrameGeometryMap[T];
+}
+export declare const createFrame: <T extends FrameGeometry = "box", K extends FrameOrientation = "ov_degrees">(geometry?: FrameGeometryMap[T]) => Frame<T>;
+export {};

package/dist/frame.js

@@ -0,0 +1,12 @@
+// TODO: replace with types exported from the sdk when created
+export const createFrame = (geometry) => {
+    return {
+        parent: 'world',
+        translation: { x: 0, y: 0, z: 0 },
+        orientation: {
+            type: 'ov_degrees',
+            value: { x: 0, y: 0, z: 1, th: 0 },
+        },
+        geometry: (geometry ?? { type: 'box', x: 100, y: 100, z: 100 }),
+    };
+};

package/dist/geometry.d.ts

@@ -0,0 +1,2 @@
+import type { Geometry } from '@viamrobotics/sdk';
+export declare const createGeometry: (geometryType?: Geometry["geometryType"], label?: string) => Geometry;

package/dist/geometry.js

@@ -0,0 +1,8 @@
+import { createPose } from './transform';
+export const createGeometry = (geometryType, label = '') => {
+    return {
+        center: createPose(),
+        label,
+        geometryType: geometryType ?? { case: undefined, value: undefined },
+    };
+};

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

@@ -4,6 +4,7 @@ type ConnectionStatus = 'connecting' | 'open' | 'closed';
 interface Context {
     addPoints(worldObject: WorldObject<PointsGeometry>): void;
     points: WorldObject<PointsGeometry>[];
+    frames: WorldObject[];
     lines: WorldObject[];
     meshes: WorldObject[];
     poses: WorldObject[];

package/dist/hooks/useDrawAPI.svelte.js

@@ -5,6 +5,8 @@ import { parsePcdInWorker } from '../loaders/pcd';
 import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';
 import { WorldObject } from '../WorldObject.svelte';
 import { useArrows } from './useArrows.svelte';
+import { createGeometry } from '../geometry';
+import { createPoseFromFrame } from '../transform';
 const key = Symbol('draw-api-context-key');
 const tryParse = (json) => {
     try {
@@ -15,6 +17,21 @@ const tryParse = (json) => {
         return;
     }
 };
+/**
+ * @TODO get golang scripts to return protobufs so that we
+ * can use our types. Right now we're just marshalling JSON,
+ * leading to upper case var names and no type contract with the golang lib.
+ */
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const lowercaseKeys = (obj) => {
+    if (Array.isArray(obj)) {
+        return obj.map(lowercaseKeys);
+    }
+    else if (obj && typeof obj === 'object' && obj.constructor === Object) {
+        return Object.fromEntries(Object.entries(obj).map(([k, v]) => [k.toLowerCase(), lowercaseKeys(v)]));
+    }
+    return obj;
+};
 class Float32Reader {
     littleEndian = true;
     offset = 0;
@@ -38,6 +55,7 @@ export const provideDrawAPI = () => {
     let reconnectDelay = 200;
     const maxReconnectDelay = 5_000;
     let ws;
+    const frames = $state([]);
     const points = $state([]);
     const lines = $state([]);
     const meshes = $state([]);
@@ -51,6 +69,32 @@ export const provideDrawAPI = () => {
     const origin = new Vector3();
     const loader = new GLTFLoader();
     const batchedArrow = useArrows();
+    const drawFrames = async (data) => {
+        for (const frame of data) {
+            const name = frame.name || frame.id || '';
+            const pose = createPoseFromFrame(lowercaseKeys(frame));
+            const geometry = createGeometry();
+            if (frame.geometry?.type === 'box') {
+                geometry.label = `${name} geometry (box)`;
+                geometry.geometryType.case = 'box';
+                geometry.geometryType.value = {
+                    dimsMm: { x: frame.geometry.x, y: frame.geometry.y, z: frame.geometry.z },
+                };
+            }
+            else if (frame.geometry?.type === 'sphere') {
+                geometry.label = `${name} geometry (sphere)`;
+                geometry.geometryType.case = 'sphere';
+                geometry.geometryType.value = { radiusMm: frame.geometry.r };
+            }
+            else if (frame.geometry?.type === 'capsule') {
+                geometry.label = `${name} geometry (capsule)`;
+                geometry.geometryType.case = 'capsule';
+                geometry.geometryType.value = { lengthMm: frame.geometry.l, radiusMm: frame.geometry.r };
+            }
+            const worldObject = new WorldObject(name, pose, frame.parent ?? 'world', frame.geometry ? geometry : undefined);
+            frames.push(worldObject);
+        }
+    };
     const drawPCD = async (buffer) => {
         const { positions, colors } = await parsePcdInWorker(new Uint8Array(buffer));
         points.push(new WorldObject(`points ${++pointsIndex}`, undefined, undefined, {
@@ -256,6 +300,11 @@ export const provideDrawAPI = () => {
     const remove = (names) => {
         let index = -1;
         for (const name of names) {
+            index = frames.findIndex((frame) => frame.name === name);
+            if (index !== -1) {
+                frames.slice(index, 1);
+                continue;
+            }
             index = points.findIndex((p) => p.name === name);
             if (index !== -1) {
                 points.splice(index, 1);
@@ -293,6 +342,7 @@ export const provideDrawAPI = () => {
         }
     };
     const removeAll = () => {
+        frames.splice(0, frames.length);
         points.splice(0, points.length);
         lines.splice(0, lines.length);
         meshes.splice(0, meshes.length);
@@ -362,6 +412,9 @@ export const provideDrawAPI = () => {
         if ('geometry' in data) {
             return drawGeometry(data.geometry, data.color);
         }
+        if ('frames' in data) {
+            return drawFrames(data.frames);
+        }
         if ('Knots' in data) {
             return drawNurbs(data, data.Color);
         }
@@ -384,6 +437,9 @@ export const provideDrawAPI = () => {
     };
     connect();
     setContext(key, {
+        get frames() {
+            return frames;
+        },
         get points() {
             return points;
         },

package/dist/hooks/useFrames.svelte.js

@@ -54,15 +54,7 @@ export const provideFrames = (partID) => {
             return;
         }
         worldObject.referenceFrame = component.frame.parent;
-        worldObject.localEditedPose = {
-            x: component.frame.translation.x,
-            y: component.frame.translation.y,
-            z: component.frame.translation.z,
-            oX: component.frame.orientation.value.x,
-            oY: component.frame.orientation.value.y,
-            oZ: component.frame.orientation.value.z,
-            theta: component.frame.orientation.value.th,
-        };
+        worldObject.localEditedPose = createPoseFromFrame(component.frame);
         if (component.frame.geometry) {
             switch (component.frame.geometry.type) {
                 case 'box':

package/dist/hooks/useObjects.svelte.js

@@ -16,6 +16,7 @@ export const provideObjects = () => {
         ...geometries.current,
         ...points.current,
         ...statics.current,
+        ...drawAPI.frames,
         ...drawAPI.meshes,
         ...drawAPI.models,
         ...drawAPI.nurbs,

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

@@ -1,29 +1,6 @@
+import { type Frame } from '../frame';
 import { Struct, Pose } from '@viamrobotics/sdk';
 import type { ViamClient } from '@viamrobotics/sdk';
-export interface Frame {
-    parent: string;
-    translation: {
-        x: number;
-        y: number;
-        z: number;
-    };
-    orientation: {
-        value: {
-            x: number;
-            y: number;
-            z: number;
-            th: number;
-        };
-    };
-    geometry?: {
-        type: 'none' | 'box' | 'sphere' | 'capsule';
-        x?: number;
-        y?: number;
-        z?: number;
-        r?: number;
-        l?: number;
-    };
-}
 export interface PartConfig {
     components: {
         name: string;
@@ -39,14 +16,7 @@ interface PartConfigParams {
     standalonePartConfigProps?: StandalonePartConfigProps;
 }
 interface PartConfigContext {
-    updateFrame: (componentName: string, referenceFrame: string, pose: Pose, geometry?: {
-        type: 'none' | 'box' | 'sphere' | 'capsule';
-        r?: number;
-        l?: number;
-        x?: number;
-        y?: number;
-        z?: number;
-    }) => void;
+    updateFrame: (componentName: string, referenceFrame: string, pose: Pose, geometry?: Frame['geometry']) => void;
     saveLocalPartConfig: () => void;
     resetLocalPartConfig: () => void;
     deleteFrame: (componentName: string) => void;

package/dist/hooks/usePartConfig.svelte.js

@@ -1,4 +1,5 @@
-import { createNewFrame } from '../transform';
+import { createFrame } from '../frame';
+import { createPoseFromFrame } from '../transform';
 import { Struct, Pose } from '@viamrobotics/sdk';
 import { getContext, setContext } from 'svelte';
 const key = Symbol('part-config-context');
@@ -14,15 +15,6 @@ export const providePartConfig = (params) => {
     else {
         throw new Error('No part config provided');
     }
-    const createFrame = (componentName) => {
-        const fragmentId = _localPartConfig.componentNameToFragmentId()[componentName];
-        if (fragmentId !== undefined) {
-            createFragmentFrame(fragmentId, componentName);
-        }
-        else {
-            createPartFrame(componentName);
-        }
-    };
     const createFragmentFrame = (fragmentId, componentName) => {
         const newConfig = _localPartConfig.getLocalPartConfig().toJson();
         if (newConfig.fragment_mods === undefined) {
@@ -39,7 +31,7 @@ export const providePartConfig = (params) => {
         const modSetPath = `components.${componentName}.frame`;
         const frame = {
             ['$set']: {
-                [modSetPath]: createNewFrame(),
+                [modSetPath]: createFrame(),
             },
         };
         fragmentMod.mods.push(frame);
@@ -50,20 +42,11 @@ export const providePartConfig = (params) => {
         const newConfig = _localPartConfig.getLocalPartConfig().toJson();
         const component = newConfig?.components?.find((comp) => comp.name === componentName);
         if (component) {
-            component.frame = createNewFrame();
+            component.frame = createFrame();
         }
         const configStruct = Struct.fromJson(newConfig);
         _localPartConfig.setLocalPartConfig(configStruct);
     };
-    const updateFrame = (componentName, referenceFrame, framePosition, frameGeometry) => {
-        const fragmentId = _localPartConfig.componentNameToFragmentId()[componentName];
-        if (fragmentId !== undefined) {
-            updateFragmentFrame(fragmentId, componentName, referenceFrame, framePosition, frameGeometry);
-        }
-        else {
-            updatePartFrame(componentName, referenceFrame, framePosition, frameGeometry);
-        }
-    };
     const updateFragmentFrame = (fragmentId, componentName, referenceFrame, framePosition, frameGeometry) => {
         const newConfig = _localPartConfig.getLocalPartConfig().toJson();
         if (newConfig.fragment_mods === undefined) {
@@ -124,18 +107,19 @@ export const providePartConfig = (params) => {
         if (!component) {
             return;
         }
-        if (component && component.frame) {
+        if (component.frame) {
+            const currentPose = createPoseFromFrame(component.frame);
             component.frame.parent = referenceFrame;
             component.frame.translation = {
-                x: pose.x === undefined ? component.frame.translation.x : pose.x,
-                y: pose.y === undefined ? component.frame.translation.y : pose.y,
-                z: pose.z === undefined ? component.frame.translation.z : pose.z,
+                x: pose.x ?? currentPose.x,
+                y: pose.y ?? currentPose.y,
+                z: pose.z ?? currentPose.z,
             };
             component.frame.orientation.value = {
-                x: pose.oX === undefined ? component.frame.orientation.value.x : pose.oX,
-                y: pose.oY === undefined ? component.frame.orientation.value.y : pose.oY,
-                z: pose.oZ === undefined ? component.frame.orientation.value.z : pose.oZ,
-                th: pose.theta === undefined ? component.frame.orientation.value.th : pose.theta,
+                x: pose.oX ?? currentPose.oX,
+                y: pose.oY ?? currentPose.oY,
+                z: pose.oZ ?? currentPose.oZ,
+                th: pose.theta ?? currentPose.theta,
             };
             if (geometry) {
                 if (geometry.type === 'none') {
@@ -149,15 +133,6 @@ export const providePartConfig = (params) => {
         const configStruct = Struct.fromJson(newConfig);
         _localPartConfig.setLocalPartConfig(configStruct);
     };
-    const deleteFrame = (componentName) => {
-        const fragmentId = _localPartConfig.componentNameToFragmentId()[componentName];
-        if (fragmentId !== undefined) {
-            deleteFragmentFrame(fragmentId, componentName);
-        }
-        else {
-            deletePartFrame(componentName);
-        }
-    };
     const deletePartFrame = (componentName) => {
         const newConfig = _localPartConfig.getLocalPartConfig().toJson();
         const component = newConfig?.components?.find((comp) => comp.name === componentName);
@@ -191,18 +166,40 @@ export const providePartConfig = (params) => {
         const configStruct = Struct.fromJson(newConfig);
         _localPartConfig.setLocalPartConfig(configStruct);
     };
-    const saveLocalPartConfig = () => {
-        _localPartConfig.saveLocalPartConfig?.();
-    };
-    const resetLocalPartConfig = () => {
-        _localPartConfig.resetLocalPartConfig?.();
-    };
     setContext(key, {
-        updateFrame,
-        deleteFrame,
-        createFrame,
-        saveLocalPartConfig,
-        resetLocalPartConfig,
+        updateFrame: (componentName, referenceFrame, framePosition, frameGeometry) => {
+            const fragmentId = _localPartConfig.componentNameToFragmentId()[componentName];
+            if (fragmentId !== undefined) {
+                updateFragmentFrame(fragmentId, componentName, referenceFrame, framePosition, frameGeometry);
+            }
+            else {
+                updatePartFrame(componentName, referenceFrame, framePosition, frameGeometry);
+            }
+        },
+        deleteFrame: (componentName) => {
+            const fragmentId = _localPartConfig.componentNameToFragmentId()[componentName];
+            if (fragmentId !== undefined) {
+                deleteFragmentFrame(fragmentId, componentName);
+            }
+            else {
+                deletePartFrame(componentName);
+            }
+        },
+        createFrame: (componentName) => {
+            const fragmentId = _localPartConfig.componentNameToFragmentId()[componentName];
+            if (fragmentId !== undefined) {
+                createFragmentFrame(fragmentId, componentName);
+            }
+            else {
+                createPartFrame(componentName);
+            }
+        },
+        saveLocalPartConfig: () => {
+            _localPartConfig.saveLocalPartConfig?.();
+        },
+        resetLocalPartConfig: () => {
+            _localPartConfig.resetLocalPartConfig?.();
+        },
         get localPartConfig() {
             return _localPartConfig.getLocalPartConfig();
         },

package/dist/hooks/useStaticGeometries.svelte.js

@@ -1,7 +1,7 @@
 import { getContext, setContext } from 'svelte';
 import { get, set } from 'idb-keyval';
 import { Debounced } from 'runed';
-import { createGeometry } from '../transform';
+import { createGeometry } from '../geometry';
 import { WorldObject } from '../WorldObject.svelte';
 const key = Symbol('static-geometries-context');
 export const provideStaticGeometries = () => {

package/dist/hooks/useWeblabs.svelte.js

@@ -19,7 +19,11 @@ const addCookie = (name, value, days, path = '/') => {
     document.cookie = `${encodeURIComponent(name)}=${encodeURIComponent(value)}${expires}; path=${path}`;
 };
 const getCookieExperiments = () => {
-    return getCookie('weblab_experiments')?.split(',') ?? [];
+    const cookie = getCookie('weblab_experiments');
+    if (!cookie) {
+        return [];
+    }
+    return decodeURIComponent(cookie).split(',');
 };
 export const createWeblabs = () => {
     const activeExperiments = new SvelteSet();
@@ -41,7 +45,8 @@ export const createWeblabs = () => {
 export const provideWeblabs = () => {
     const urlExperiment = new URLSearchParams(window.location.search).get('experiment');
     if (urlExperiment) {
-        addCookie('weblab_experiments', [...getCookieExperiments(), urlExperiment].join(','));
+        const experimentSet = new Set([...getCookieExperiments(), urlExperiment]);
+        addCookie('weblab_experiments', Array.from(experimentSet).join(','));
     }
     setContext(WEBLABS_CONTEXT_KEY, createWeblabs());
 };

package/dist/three/OrientationVector.d.ts

@@ -67,7 +67,7 @@ export declare class OrientationVector {
     /**
      * Copies value of ov to this orientation vector.
      */
-    copy(ov: OrientationVector): this;
+    copy(ov: OrientationVectorLike): this;
     equals(orientationVector: OrientationVectorLike): boolean;
     fromArray(array: number[], offset?: number): this;
     toArray(array?: number[], offset?: number): number[];

package/dist/transform.d.ts

@@ -1,8 +1,8 @@
 import type { Geometry, Pose } from '@viamrobotics/sdk';
 import { type Object3D, Matrix4, Quaternion, Vector3 } from 'three';
-import type { Frame } from './hooks/usePartConfig.svelte';
+import type { Frame } from './frame';
 export declare const createPose: (pose?: Pose) => Pose;
-export declare const createGeometry: (geometryType?: Geometry["geometryType"], label?: string) => Geometry;
+export declare const createPoseFromFrame: (frame: Frame) => Pose;
 export declare const quaternionToPose: (quaternion: Quaternion, pose: Partial<Pose>) => void;
 export declare const vector3ToPose: (vec3: Vector3, pose: Partial<Pose>) => void;
 export declare const object3dToPose: (object3d: Object3D, pose: Partial<Pose>) => Partial<import("@viamrobotics/sdk").PlainMessage<import("@viamrobotics/sdk/dist/gen/common/v1/common_pb").Pose>>;
@@ -11,7 +11,5 @@ export declare const poseToVector3: (pose: Partial<Pose>, vec3: Vector3) => void
 export declare const poseToObject3d: (pose: Partial<Pose>, object3d: Object3D) => void;
 export declare const poseToDirection: (pose: Pose) => Vector3;
 export declare const scaleToDimensions: (scale: Vector3, geometry: Geometry["geometryType"]) => void;
-export declare const createPoseFromFrame: (frame: Frame) => Pose;
-export declare const createNewFrame: () => Frame;
 export declare const poseToMatrix: (pose: Pose) => Matrix4;
 export declare const matrixToPose: (matrix: Matrix4) => import("@viamrobotics/sdk").PlainMessage<import("@viamrobotics/sdk/dist/gen/common/v1/common_pb").Pose>;

package/dist/transform.js

@@ -1,5 +1,7 @@
 import { OrientationVector } from './three/OrientationVector';
-import { MathUtils, Matrix4, Quaternion, Vector3 } from 'three';
+import { Euler, MathUtils, Matrix4, Quaternion, Vector3 } from 'three';
+const quaternion = new Quaternion();
+const euler = new Euler();
 const ov = new OrientationVector();
 export const createPose = (pose) => {
     return {
@@ -12,11 +14,31 @@ export const createPose = (pose) => {
         theta: pose?.theta ?? 0,
     };
 };
-export const createGeometry = (geometryType, label = '') => {
+export const createPoseFromFrame = (frame) => {
+    if (frame.orientation.type === 'quaternion') {
+        quaternion.copy(frame.orientation.value);
+        ov.setFromQuaternion(quaternion);
+    }
+    else if (frame.orientation.type === 'euler_angles') {
+        euler.set(frame.orientation.value.roll, frame.orientation.value.pitch, frame.orientation.value.yaw, 'ZYX');
+        quaternion.setFromEuler(euler);
+        ov.setFromQuaternion(quaternion);
+    }
+    else if (frame.orientation.type === 'ov_radians') {
+        ov.copy(frame.orientation.value);
+    }
+    else if (frame.orientation.type === 'ov_degrees') {
+        const th = MathUtils.degToRad(frame.orientation.value.th);
+        ov.set(frame.orientation.value.x, frame.orientation.value.y, frame.orientation.value.z, th);
+    }
     return {
-        center: createPose(),
-        label,
-        geometryType: geometryType ?? { case: undefined, value: undefined },
+        x: frame.translation.x ?? 0,
+        y: frame.translation.y ?? 0,
+        z: frame.translation.z ?? 0,
+        oX: ov.x,
+        oY: ov.y,
+        oZ: ov.z,
+        theta: MathUtils.radToDeg(ov.th),
     };
 };
 export const quaternionToPose = (quaternion, pose) => {
@@ -49,7 +71,7 @@ export const poseToObject3d = (pose, object3d) => {
     poseToQuaternion(pose, object3d.quaternion);
 };
 export const poseToDirection = (pose) => {
-    const ov = new OrientationVector(pose.oX, pose.oY, pose.oZ, pose.theta);
+    ov.set(pose.oX, pose.oY, pose.oZ, MathUtils.degToRad(pose.theta));
     return new Vector3(ov.x, ov.y, ov.z);
 };
 export const scaleToDimensions = (scale, geometry) => {
@@ -67,41 +89,6 @@ export const scaleToDimensions = (scale, geometry) => {
         geometry.value.radiusMm *= scale.x;
     }
 };
-export const createPoseFromFrame = (frame) => {
-    return {
-        x: frame.translation.x,
-        y: frame.translation.y,
-        z: frame.translation.z,
-        oX: frame.orientation.value.x,
-        oY: frame.orientation.value.y,
-        oZ: frame.orientation.value.z,
-        theta: frame.orientation.value.th,
-    };
-};
-export const createNewFrame = () => {
-    return {
-        parent: 'world',
-        translation: {
-            x: 0,
-            y: 0,
-            z: 0,
-        },
-        orientation: {
-            value: {
-                x: 0,
-                y: 0,
-                z: 1,
-                th: 0,
-            },
-        },
-        geometry: {
-            type: 'box',
-            x: 100,
-            y: 100,
-            z: 100,
-        },
-    };
-};
 export const poseToMatrix = (pose) => {
     const matrix = new Matrix4();
     const poseQuaternion = new Quaternion().setFromAxisAngle(new Vector3(pose.oX, pose.oY, pose.oZ), pose.theta * (Math.PI / 180));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@viamrobotics/motion-tools",
-  "version": "0.14.3",
+  "version": "0.14.6",
   "description": "Motion visualization with Viam",
   "license": "Apache-2.0",
   "type": "module",
@@ -90,6 +90,9 @@
     "svelte": ">=5",
     "svelte-virtuallists": ">=1"
   },
+  "engines": {
+    "node": ">=22.0.0"
+  },
   "svelte": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "exports": {