@viamrobotics/motion-tools 1.12.2 → 1.12.3

package/dist/components/App.svelte

@@ -17,7 +17,6 @@
 	import FileDrop from './FileDrop/FileDrop.svelte'
 	import { provideWeblabs } from '../hooks/useWeblabs.svelte'
 	import { providePartConfig } from '../hooks/usePartConfig.svelte'
-	import { useViamClient } from '@viamrobotics/svelte-sdk'
 	import LiveUpdatesBanner from './overlay/LiveUpdatesBanner.svelte'
 	import ArmPositions from './overlay/widgets/ArmPositions.svelte'
 	import { provideEnvironment } from '../hooks/useEnvironment.svelte'
@@ -33,10 +32,10 @@
 	import { useXR } from '@threlte/xr'
 
 	interface LocalConfigProps {
-		getLocalPartConfig: () => Struct
+		current: Struct
+		isDirty: boolean
+		componentToFragId: Record<string, string>
 		setLocalPartConfig: (config: Struct) => void
-		isDirty: () => boolean
-		getComponentToFragId: () => Record<string, string>
 	}
 
 	interface Props {
@@ -65,7 +64,6 @@
 
 	provideWorld()
 
-	const appClient = useViamClient()
 	const settings = provideSettings()
 	const environment = provideEnvironment()
 	const currentRobotCameraWidgets = $derived(settings.current.openCameraWidgets[partID] || [])
@@ -82,25 +80,10 @@
 
 	let root = $state.raw<HTMLElement>()
 
-	providePartConfig(() => {
-		if (localConfigProps) {
-			return {
-				appEmbeddedPartConfigProps: {
-					isDirty: () => localConfigProps.isDirty(),
-					getLocalPartConfig: () => localConfigProps.getLocalPartConfig(),
-					setLocalPartConfig: (config: Struct) => localConfigProps.setLocalPartConfig(config),
-					getComponentToFragId: () => localConfigProps.getComponentToFragId(),
-				},
-			}
-		} else {
-			return {
-				standalonePartConfigProps: {
-					viamClient: () => appClient?.current,
-					partID: () => partID,
-				},
-			}
-		}
-	})
+	providePartConfig(
+		() => partID,
+		() => localConfigProps
+	)
 
 	$effect.pre(() => {
 		if (localConfigProps) {

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

@@ -3,10 +3,10 @@ import type { Struct } from '@viamrobotics/sdk';
 import type { CameraPose } from '../hooks/useControls.svelte';
 import { type DrawConnectionConfig } from '../hooks/useDrawConnectionConfig.svelte';
 interface LocalConfigProps {
-    getLocalPartConfig: () => Struct;
+    current: Struct;
+    isDirty: boolean;
+    componentToFragId: Record<string, string>;
     setLocalPartConfig: (config: Struct) => void;
-    isDirty: () => boolean;
-    getComponentToFragId: () => Record<string, string>;
 }
 interface Props {
     partID?: string;

package/dist/components/Geometry.svelte

@@ -175,7 +175,7 @@
 					is={LineMaterial}
 					{color}
 					width={lineWidth.current ? lineWidth.current * 0.001 : 0.5}
-					depthTest={materialProps.current?.depthTest}
+					depthTest={materialProps.current?.depthTest ?? true}
 				/>
 			{:else}
 				{@const currentOpacity = opacity.current ?? 0.7}
@@ -185,7 +185,7 @@
 					transparent={currentOpacity < 1}
 					depthWrite={currentOpacity === 1}
 					opacity={currentOpacity}
-					depthTest={materialProps.current?.depthTest}
+					depthTest={materialProps.current?.depthTest ?? true}
 				/>
 
 				{#if geo && (renderMode.includes('colliders') || !model)}

package/dist/components/Scene.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { ShaderMaterial, Vector3 } from 'three'
 	import { T } from '@threlte/core'
-	import { Grid, interactivity, PerfMonitor, PortalTarget } from '@threlte/extras'
+	import { Environment, Grid, interactivity, PerfMonitor, PortalTarget } from '@threlte/extras'
 	import Entities from './Entities.svelte'
 	import Selected from './Selected.svelte'
 	import Focus from './Focus.svelte'
@@ -18,6 +18,7 @@
 	import PointerMissBox from './PointerMissBox.svelte'
 	import BatchedArrows from './BatchedArrows.svelte'
 	import Arrows from './Arrows/ArrowGroups.svelte'
+	import hdrImage from '../assets/ferndale_studio_11_1k.hdr'
 
 	interface Props {
 		children?: Snippet
@@ -54,6 +55,8 @@
 	<PerfMonitor anchorX="right" />
 {/if}
 
+<Environment url={hdrImage} />
+
 <T.Group
 	position={origin.position}
 	rotation.x={$isPresenting ? -Math.PI / 2 : 0}

package/dist/components/overlay/LiveUpdatesBanner.svelte

@@ -17,7 +17,7 @@
 			if (event.key.toLowerCase() === 's') {
 				event.preventDefault()
 				event.stopImmediatePropagation()
-				partConfig.saveLocalPartConfig()
+				partConfig.save()
 			}
 		}
 	}}
@@ -43,7 +43,7 @@
 				<Button
 					class="cursor-pointer text-blue-600"
 					onclick={() => {
-						partConfig.resetLocalPartConfig()
+						partConfig.discardChanges()
 					}}
 				>
 					Discard
@@ -54,7 +54,7 @@
 					aria-label="Save"
 					class="cursor-pointer text-blue-600"
 					onclick={() => {
-						partConfig.saveLocalPartConfig()
+						partConfig.save()
 					}}
 				>
 					<div class="flex gap-2">

package/dist/components/overlay/__tests__/__fixtures__/resource.d.ts

@@ -7,8 +7,17 @@ export declare const resource: {
             y: number;
             z: number;
         };
+        orientation: {
+            type: "ov_degrees";
+            value: {
+                x: number;
+                y: number;
+                z: number;
+                th: number;
+            };
+        };
         geometry: {
-            type: string;
+            type: "box";
             x: number;
             y: number;
             z: number;

package/dist/components/overlay/__tests__/__fixtures__/resource.js

@@ -3,6 +3,7 @@ export const resource = {
     frame: {
         parent: 'parent_frame',
         translation: { x: 10, y: 20, z: 30 },
+        orientation: { type: 'ov_degrees', value: { x: 0, y: 0, z: 1, th: 0 } },
         geometry: {
             type: 'box',
             x: 10,

package/dist/components/overlay/dashboard/Dashboard.svelte

@@ -9,7 +9,7 @@
 </script>
 
 <div
-	class="absolute top-2 z-4 flex w-full justify-center gap-2"
+	class="absolute top-2 z-4 flex w-full items-center justify-center gap-2"
 	{...rest}
 >
 	<!-- camera view -->

package/dist/hooks/use3DModels.svelte.js

@@ -4,6 +4,7 @@ import { getContext, setContext } from 'svelte';
 import { useSettings } from './useSettings.svelte';
 import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
 import { DRACOLoader } from 'three/addons/loaders/DRACOLoader.js';
+import { isInstanceOf } from '@threlte/core';
 const gltfLoader = new GLTFLoader();
 const dracoLoader = new DRACOLoader();
 dracoLoader.setDecoderPath('https://www.gstatic.com/draco/versioned/decoders/1.5.6/');
@@ -38,6 +39,16 @@ export const provide3DModels = (partID) => {
                         const arrayBuffer = model.mesh.buffer.slice(model.mesh.byteOffset, model.mesh.byteOffset + model.mesh.byteLength);
                         const gltfModel = await gltfLoader.parseAsync(arrayBuffer, '');
                         next[prefix][id] = gltfModel.scene;
+                        gltfModel.scene.traverse((object) => {
+                            if (isInstanceOf(object, 'Mesh')) {
+                                const { material } = object;
+                                console.log(material);
+                                if (isInstanceOf(material, 'MeshStandardMaterial')) {
+                                    material.roughness = 0.3;
+                                    material.metalness = 0.1;
+                                }
+                            }
+                        });
                     }
                     current = next;
                 }

package/dist/hooks/useFramelessComponents.svelte.js

@@ -6,7 +6,7 @@ export const provideFramelessComponents = () => {
     const partConfig = usePartConfig();
     const frames = useFrames();
     const current = $derived.by(() => {
-        const components = partConfig.localPartConfig.toJson()?.components;
+        const { components } = partConfig.current;
         const partComponentsWIthNoFrame = components
             ?.filter((component) => component.frame === undefined)
             .map((component) => component.name) ?? [];

package/dist/hooks/useFrames.svelte.js

@@ -52,7 +52,7 @@ export const provideFrames = (partID) => {
         return frames;
     });
     const [configFrames, configUnsetFrameNames] = $derived.by(() => {
-        const components = partConfig.localPartConfig.toJson().components;
+        const { components } = partConfig.current;
         const results = {};
         const unsetResults = [];
         for (const { name, frame } of components ?? []) {
@@ -68,7 +68,7 @@ export const provideFrames = (partID) => {
         return [results, unsetResults];
     });
     const [fragmentFrames, fragmentUnsetFrameNames] = $derived.by(() => {
-        const { fragment_mods: fragmentMods = [] } = partConfig.localPartConfig.toJson() ?? {};
+        const { fragment_mods: fragmentMods = [] } = partConfig.current;
         const fragmentDefinedComponents = Object.keys(partConfig.componentNameToFragmentId);
         const results = {};
         const unsetResults = [];

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

@@ -1,6 +1,5 @@
 import { type Frame } from '../frame';
 import { Struct, Pose } from '@viamrobotics/sdk';
-import type { ViamClient } from '@viamrobotics/sdk';
 export interface PartConfig {
     components: {
         name: string;
@@ -11,31 +10,23 @@ export interface PartConfig {
         mods: any[];
     }[];
 }
-interface PartConfigParams {
-    appEmbeddedPartConfigProps?: AppEmbeddedPartConfigProps;
-    standalonePartConfigProps?: StandalonePartConfigProps;
-}
 interface PartConfigContext {
+    current: PartConfig;
+    isDirty: boolean;
+    hasEditPermissions: boolean;
+    componentNameToFragmentId: Record<string, string>;
     updateFrame: (componentName: string, referenceFrame: string, pose: Pose, geometry?: Frame['geometry']) => void;
-    saveLocalPartConfig: () => void;
-    resetLocalPartConfig: () => void;
     deleteFrame: (componentName: string) => void;
     createFrame: (componentName: string) => void;
-    componentNameToFragmentId: Record<string, string>;
-    localPartConfig: Struct;
-    isDirty: boolean;
-    hasEditPermissions: boolean;
+    save: () => void;
+    discardChanges: () => void;
 }
-export declare const providePartConfig: (params: () => PartConfigParams) => void;
+export declare const providePartConfig: (partID: () => string, params: () => AppEmbeddedPartConfigProps | undefined) => void;
 export declare const usePartConfig: () => PartConfigContext;
 interface AppEmbeddedPartConfigProps {
-    isDirty: () => boolean;
-    getLocalPartConfig: () => Struct;
+    current: Struct;
+    isDirty: boolean;
+    componentToFragId: Record<string, string>;
     setLocalPartConfig: (config: Struct) => void;
-    getComponentToFragId: () => Record<string, string>;
-}
-interface StandalonePartConfigProps {
-    viamClient: () => ViamClient | undefined;
-    partID: () => string;
 }
 export {};

package/dist/hooks/usePartConfig.svelte.js

@@ -1,25 +1,19 @@
 import { createFrame } from '../frame';
 import { createPoseFromFrame } from '../transform';
 import { Struct, Pose } from '@viamrobotics/sdk';
+import { createAppMutation, createAppQuery } from '@viamrobotics/svelte-sdk';
 import { getContext, setContext } from 'svelte';
 const key = Symbol('part-config-context');
-export const providePartConfig = (params) => {
-    const { appEmbeddedPartConfigProps, standalonePartConfigProps } = params();
-    let _localPartConfig;
-    if (appEmbeddedPartConfigProps) {
-        _localPartConfig = new AppEmbeddedPartConfig(appEmbeddedPartConfigProps);
-    }
-    else if (standalonePartConfigProps) {
-        _localPartConfig = new StandalonePartConfig(standalonePartConfigProps);
-    }
-    else {
-        throw new Error('No part config provided');
-    }
+export const providePartConfig = (partID, params) => {
+    const props = $derived(params());
+    const config = $derived(props ? useEmbeddedPartConfig(props) : useStandalonePartConfig(partID));
+    const getCurrent = () => {
+        return (config.current.toJson?.() ?? { components: [] });
+    };
+    const current = $derived(getCurrent());
     const createFragmentFrame = (fragmentId, componentName) => {
-        const newConfig = _localPartConfig.getLocalPartConfig().toJson();
-        if (newConfig.fragment_mods === undefined) {
-            newConfig.fragment_mods = [];
-        }
+        const newConfig = getCurrent();
+        newConfig.fragment_mods ??= [];
         let fragmentMod = newConfig.fragment_mods.find((mod) => mod.fragment_id === fragmentId);
         if (fragmentMod === undefined) {
             fragmentMod = {
@@ -35,23 +29,19 @@ export const providePartConfig = (params) => {
             },
         };
         fragmentMod.mods.push(frame);
-        const configStruct = Struct.fromJson(newConfig);
-        _localPartConfig.setLocalPartConfig(configStruct);
+        config.set(newConfig);
     };
     const createPartFrame = (componentName) => {
-        const newConfig = _localPartConfig.getLocalPartConfig().toJson();
+        const newConfig = getCurrent();
         const component = newConfig?.components?.find((comp) => comp.name === componentName);
         if (component) {
             component.frame = createFrame();
         }
-        const configStruct = Struct.fromJson(newConfig);
-        _localPartConfig.setLocalPartConfig(configStruct);
+        config.set(newConfig);
     };
     const updateFragmentFrame = (fragmentId, componentName, referenceFrame, framePosition, frameGeometry) => {
-        const newConfig = _localPartConfig.getLocalPartConfig().toJson();
-        if (newConfig.fragment_mods === undefined) {
-            newConfig.fragment_mods = [];
-        }
+        const newConfig = getCurrent();
+        newConfig.fragment_mods ??= [];
         let fragmentMod = newConfig.fragment_mods.find((mod) => mod.fragment_id === fragmentId);
         if (fragmentMod === undefined) {
             fragmentMod = {
@@ -99,11 +89,12 @@ export const providePartConfig = (params) => {
         else {
             fragmentMod.mods.push(frame);
         }
-        _localPartConfig.setLocalPartConfig(Struct.fromJson(newConfig));
+        config.set(newConfig);
     };
     const updatePartFrame = (componentName, referenceFrame, pose, geometry) => {
-        const newConfig = _localPartConfig.getLocalPartConfig().toJson();
-        const component = newConfig?.components?.find((comp) => comp.name === componentName);
+        const newConfig = getCurrent();
+        const component = newConfig.components?.find(({ name }) => name === componentName);
+        console.log('hi', newConfig, componentName);
         if (!component) {
             return;
         }
@@ -131,24 +122,20 @@ export const providePartConfig = (params) => {
                 }
             }
         }
-        const configStruct = Struct.fromJson(newConfig);
-        _localPartConfig.setLocalPartConfig(configStruct);
+        config.set(newConfig);
     };
     const deletePartFrame = (componentName) => {
-        const newConfig = _localPartConfig.getLocalPartConfig().toJson();
+        const newConfig = getCurrent();
         const component = newConfig?.components?.find((comp) => comp.name === componentName);
         if (!component) {
             return;
         }
         delete component.frame;
-        const configStruct = Struct.fromJson(newConfig);
-        _localPartConfig.setLocalPartConfig(configStruct);
+        config.set(newConfig);
     };
     const deleteFragmentFrame = (fragmentId, componentName) => {
-        const newConfig = _localPartConfig.getLocalPartConfig().toJson();
-        if (newConfig.fragment_mods === undefined) {
-            newConfig.fragment_mods = [];
-        }
+        const newConfig = getCurrent();
+        newConfig.fragment_mods ??= [];
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         let fragmentMod = newConfig.fragment_mods.find((mod) => mod.fragment_id === fragmentId);
         if (fragmentMod === undefined) {
@@ -164,12 +151,23 @@ export const providePartConfig = (params) => {
                 [modUnSetPath]: '',
             },
         });
-        const configStruct = Struct.fromJson(newConfig);
-        _localPartConfig.setLocalPartConfig(configStruct);
+        config.set(newConfig);
     };
     setContext(key, {
+        get current() {
+            return current;
+        },
+        get componentNameToFragmentId() {
+            return config.componentNameToFragmentId;
+        },
+        get isDirty() {
+            return config.isDirty;
+        },
+        get hasEditPermissions() {
+            return config.hasEditPermissions;
+        },
         updateFrame: (componentName, referenceFrame, framePosition, frameGeometry) => {
-            const fragmentId = _localPartConfig.componentNameToFragmentId()[componentName];
+            const fragmentId = config.componentNameToFragmentId[componentName];
             if (fragmentId !== undefined) {
                 updateFragmentFrame(fragmentId, componentName, referenceFrame, framePosition, frameGeometry);
             }
@@ -178,7 +176,7 @@ export const providePartConfig = (params) => {
             }
         },
         deleteFrame: (componentName) => {
-            const fragmentId = _localPartConfig.componentNameToFragmentId()[componentName];
+            const fragmentId = config.componentNameToFragmentId[componentName];
             if (fragmentId !== undefined) {
                 deleteFragmentFrame(fragmentId, componentName);
             }
@@ -187,7 +185,7 @@ export const providePartConfig = (params) => {
             }
         },
         createFrame: (componentName) => {
-            const fragmentId = _localPartConfig.componentNameToFragmentId()[componentName];
+            const fragmentId = config.componentNameToFragmentId[componentName];
             if (fragmentId !== undefined) {
                 createFragmentFrame(fragmentId, componentName);
             }
@@ -195,137 +193,112 @@ export const providePartConfig = (params) => {
                 createPartFrame(componentName);
             }
         },
-        saveLocalPartConfig: () => {
-            _localPartConfig.saveLocalPartConfig?.();
-        },
-        resetLocalPartConfig: () => {
-            _localPartConfig.resetLocalPartConfig?.();
+        save: () => config.save?.(),
+        discardChanges: () => config.discardChanges?.(),
+    });
+};
+export const usePartConfig = () => {
+    return getContext(key);
+};
+const useEmbeddedPartConfig = (props) => {
+    return {
+        hasEditPermissions: true,
+        get isDirty() {
+            return props.isDirty;
         },
-        get localPartConfig() {
-            return _localPartConfig.getLocalPartConfig();
+        get current() {
+            return props.current ?? new Struct();
         },
         get componentNameToFragmentId() {
-            return _localPartConfig.componentNameToFragmentId();
-        },
-        get isDirty() {
-            return _localPartConfig.isDirty();
+            return props.componentToFragId;
         },
-        get hasEditPermissions() {
-            return _localPartConfig.hasEditPermissions();
+        set(config) {
+            const struct = Struct.fromJson(config);
+            return props.setLocalPartConfig(struct);
         },
-    });
-};
-export const usePartConfig = () => {
-    return getContext(key);
+    };
 };
-class AppEmbeddedPartConfig {
-    _appEmbeddedPartConfigProps;
-    constructor(appEmbeddedPartConfigProps) {
-        this._appEmbeddedPartConfigProps = appEmbeddedPartConfigProps;
-    }
-    isDirty() {
-        return this._appEmbeddedPartConfigProps.isDirty();
-    }
-    getLocalPartConfig() {
-        return this._appEmbeddedPartConfigProps.getLocalPartConfig();
-    }
-    setLocalPartConfig(config) {
-        return this._appEmbeddedPartConfigProps.setLocalPartConfig(config);
-    }
-    componentNameToFragmentId() {
-        return this._appEmbeddedPartConfigProps.getComponentToFragId();
-    }
-    hasEditPermissions() {
-        return true;
-    }
-}
-class StandalonePartConfig {
-    _standalonePartConfigProps;
-    _isDirty = $state(false);
-    _hasEditPermissions = $state(false);
-    _networkPartConfig = $state();
-    _localPartConfig = $state();
-    _partName = $state();
-    _componentNameToFragmentId = $state();
-    constructor(standalonePartConfigProps) {
-        this._standalonePartConfigProps = standalonePartConfigProps;
-        $effect.pre(() => {
-            const initLocalConfig = async () => {
-                const partResponse = await standalonePartConfigProps
-                    .viamClient()
-                    ?.appClient.getRobotPart(standalonePartConfigProps.partID());
-                if (JSON.parse(partResponse?.configJson ?? 'null') === null) {
-                    // no config returned here indicates this api key has no permission to update config
-                    return;
-                }
-                this._hasEditPermissions = true;
-                const configJson = JSON.parse(partResponse?.configJson ?? '{}');
-                this._networkPartConfig = Struct.fromJson(configJson);
-                this._localPartConfig = Struct.fromJson(configJson);
-                this._partName = partResponse?.part?.name;
-                const componentNameToFragmentId = {};
-                const fragmentRequests = [];
-                if (configJson.fragments) {
-                    for (const fragmentId of configJson.fragments) {
-                        //TODO: right now the json could be just a list of strings or an object with an id prop
-                        const fragId = typeof fragmentId === 'string' ? fragmentId : fragmentId.id;
-                        fragmentRequests.push(standalonePartConfigProps.viamClient()?.appClient.getFragment(fragId));
-                    }
-                    const fragementResponses = await Promise.all(fragmentRequests);
-                    for (const fragmentResponse of fragementResponses) {
-                        const fragmentId = fragmentResponse?.id;
-                        if (!fragmentId) {
-                            continue;
-                        }
-                        const components = fragmentResponse?.fragment?.fields['components']?.kind;
-                        if (components?.case === 'listValue') {
-                            for (const component of components.value.values) {
-                                if (component.kind.case === 'structValue') {
-                                    const componentName = component.kind.value.fields['name'].kind;
-                                    if (componentName.case === 'stringValue') {
-                                        componentNameToFragmentId[componentName.value] = fragmentId;
-                                    }
-                                }
-                            }
+const useStandalonePartConfig = (partID) => {
+    const partQuery = createAppQuery('getRobotPart', () => [partID()], {
+        refetchInterval: false,
+    });
+    const partName = $derived(partQuery.data?.part?.name);
+    const configJSON = $derived.by(() => {
+        if (!partQuery.data?.configJson) {
+            return undefined;
+        }
+        try {
+            return JSON.parse(partQuery.data.configJson);
+        }
+        catch {
+            return undefined;
+        }
+    });
+    let networkPartConfig = $derived(configJSON ? Struct.fromJson(configJSON) : undefined);
+    let current = $state.raw();
+    let isDirty = $state(false);
+    const hasEditPermissions = $derived(networkPartConfig !== undefined);
+    const fragmentQueries = $derived((configJSON?.fragments ?? []).map((fragmentId) => {
+        const id = typeof fragmentId === 'string' ? fragmentId : fragmentId.id;
+        return createAppQuery('getFragment', () => [id], { refetchInterval: false });
+    }));
+    const componentNameToFragmentId = $derived.by(() => {
+        const results = {};
+        for (const query of fragmentQueries) {
+            if (!query.data) {
+                continue;
+            }
+            const fragmentId = query.data.id;
+            const components = query.data?.fragment?.fields['components']?.kind;
+            if (components?.case === 'listValue') {
+                for (const component of components.value.values) {
+                    if (component.kind.case === 'structValue') {
+                        const componentName = component.kind.value.fields['name']?.kind;
+                        if (componentName.case === 'stringValue') {
+                            results[componentName.value] = fragmentId;
                         }
                     }
-                    this._componentNameToFragmentId = componentNameToFragmentId;
                 }
-            };
-            initLocalConfig();
-        });
-    }
-    getLocalPartConfig() {
-        return this._localPartConfig ?? new Struct();
-    }
-    setLocalPartConfig(config) {
-        this._localPartConfig = config;
-        this._isDirty = true;
-    }
-    isDirty() {
-        return this._isDirty;
-    }
-    hasEditPermissions() {
-        return this._hasEditPermissions;
-    }
-    componentNameToFragmentId() {
-        return this._componentNameToFragmentId ?? {};
-    }
-    async saveLocalPartConfig() {
-        if (!this._localPartConfig || !this._partName) {
-            return;
+            }
         }
-        this._networkPartConfig = this._localPartConfig;
-        await this._standalonePartConfigProps
-            .viamClient()
-            ?.appClient.updateRobotPart(this._standalonePartConfigProps.partID(), this._partName, this._localPartConfig);
-        this._isDirty = false;
-    }
-    async resetLocalPartConfig() {
-        if (!this._networkPartConfig) {
+        return results;
+    });
+    $effect.pre(() => {
+        if (!networkPartConfig) {
+            // no config returned here indicates this api key has no permission to update config
             return;
         }
-        this._localPartConfig = this._networkPartConfig;
-        this._isDirty = false;
-    }
-}
+        current = networkPartConfig;
+    });
+    const updateRobotPartMutation = createAppMutation('updateRobotPart');
+    return {
+        get current() {
+            return current ?? new Struct();
+        },
+        get isDirty() {
+            return isDirty;
+        },
+        get hasEditPermissions() {
+            return hasEditPermissions;
+        },
+        get componentNameToFragmentId() {
+            return componentNameToFragmentId;
+        },
+        set(config) {
+            current = Struct.fromJson(config);
+            isDirty = true;
+        },
+        async save() {
+            if (!current || !partName) {
+                return;
+            }
+            networkPartConfig = current;
+            await updateRobotPartMutation.mutateAsync([partID(), partName, current]);
+            isDirty = false;
+        },
+        discardChanges() {
+            current = networkPartConfig;
+            isDirty = false;
+        },
+    };
+};

package/package.json

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