@viamrobotics/motion-tools 1.21.0 → 1.22.0

package/dist/FrameConfigUpdater.svelte.d.ts

@@ -23,6 +23,5 @@ export declare class FrameConfigUpdater {
     setFrameParent: (entity: Entity, parentName: string) => void;
     deleteFrame: (entity: Entity) => void;
     setGeometryType: (entity: Entity, type: "none" | "box" | "sphere" | "capsule") => void;
-    private sanitizeFloatValue;
 }
 export {};

package/dist/FrameConfigUpdater.svelte.js

@@ -7,9 +7,7 @@ export class FrameConfigUpdater {
         this.removeFrame = removeFrame;
     }
     updateLocalPosition = (entity, position) => {
-        const x = this.sanitizeFloatValue(position.x);
-        const y = this.sanitizeFloatValue(position.y);
-        const z = this.sanitizeFloatValue(position.z);
+        const { x, y, z } = position;
         if (x === undefined && y === undefined && z === undefined)
             return;
         const change = {};
@@ -28,10 +26,7 @@ export class FrameConfigUpdater {
         }
     };
     updateLocalOrientation = (entity, orientation) => {
-        const oX = this.sanitizeFloatValue(orientation.oX);
-        const oY = this.sanitizeFloatValue(orientation.oY);
-        const oZ = this.sanitizeFloatValue(orientation.oZ);
-        const theta = this.sanitizeFloatValue(orientation.theta);
+        const { oX, oY, oZ, theta } = orientation;
         if (oX === undefined && oY === undefined && oZ === undefined && theta === undefined) {
             return;
         }
@@ -57,9 +52,7 @@ export class FrameConfigUpdater {
         const parent = entity.get(traits.Parent) ?? 'world';
         const pose = entity.get(traits.EditedPose);
         if (geometry?.type === 'box') {
-            const x = this.sanitizeFloatValue(geometry.x);
-            const y = this.sanitizeFloatValue(geometry.y);
-            const z = this.sanitizeFloatValue(geometry.z);
+            const { x, y, z } = geometry;
             if (x === undefined && y === undefined && z === undefined)
                 return;
             const change = {};
@@ -76,7 +69,7 @@ export class FrameConfigUpdater {
             }
         }
         else if (geometry?.type === 'sphere') {
-            const r = this.sanitizeFloatValue(geometry.r);
+            const { r } = geometry;
             if (r === undefined)
                 return;
             entity.set(traits.Sphere, { r });
@@ -86,8 +79,7 @@ export class FrameConfigUpdater {
             }
         }
         else if (geometry?.type === 'capsule') {
-            const r = this.sanitizeFloatValue(geometry.r);
-            const l = this.sanitizeFloatValue(geometry.l);
+            const { r, l } = geometry;
             if (r === undefined && l === undefined)
                 return;
             const change = {};
@@ -95,7 +87,7 @@ export class FrameConfigUpdater {
                 change.r = r;
             if (l !== undefined)
                 change.l = l;
-            entity.set(traits.Capsule, { r, l });
+            entity.set(traits.Capsule, change);
             const capsule = entity.get(traits.Capsule);
             if (name && capsule && pose) {
                 this.updateFrame(name, parent, pose, { type: 'capsule', ...capsule });
@@ -134,14 +126,4 @@ export class FrameConfigUpdater {
             this.updateFrame(name, parent, pose, { type: 'capsule', r: 20, l: 100 });
         }
     };
-    sanitizeFloatValue = (value) => {
-        if (value === undefined) {
-            return undefined;
-        }
-        const num = Number.parseFloat(value.toFixed(2));
-        if (Number.isNaN(num)) {
-            return undefined;
-        }
-        return value;
-    };
 }

package/dist/components/Entities/Pose.svelte

@@ -6,7 +6,7 @@
 	import { traits, useTrait } from '../../ecs'
 	import { usePartConfig } from '../../hooks/usePartConfig.svelte'
 	import { usePose } from '../../hooks/usePose.svelte'
-	import { matrixToPose, poseToMatrix } from '../../transform'
+	import { composeRenderedPose } from '../../transform'
 
 	interface Props {
 		entity: Entity
@@ -25,22 +25,27 @@
 		() => parent.current
 	)
 
-	const resolvedPose = $derived.by(() => {
-		if (pose.current === undefined || partConfig.hasPendingSave) {
-			return editedPose.current
-		}
+	$effect.pre(() => {
+		if (pose.current === undefined) return
 
-		if (!entityPose.current || !editedPose.current) {
-			return
+		if (entity.has(traits.LivePose)) {
+			entity.set(traits.LivePose, pose.current)
+		} else {
+			entity.add(traits.LivePose(pose.current))
 		}
+	})
 
-		const poseNetwork = poseToMatrix(entityPose.current)
-		const poseUsePose = poseToMatrix(pose.current)
-		const poseLocalEditedPose = poseToMatrix(editedPose.current)
+	// Always render through the live blend: live × network⁻¹ × edited. With
+	// `edited === network` (no edits) this collapses to `live`, so the rendered
+	// pose tracks the robot's kinematics-resolved position. With edits, the
+	// formula composes the staged delta on top of live. Input handlers that
+	// drive edits (gizmo onChange, Details panel) compute `edited` such that
+	// the blend renders to the user's intent.
+	const resolvedPose = $derived.by(() => {
+		if (pose.current === undefined || partConfig.hasPendingSave) return editedPose.current
+		if (!entityPose.current || !editedPose.current) return undefined
 
-		const poseNetworkInverse = poseNetwork.invert()
-		const resultMatrix = poseUsePose.multiply(poseNetworkInverse).multiply(poseLocalEditedPose)
-		return matrixToPose(resultMatrix)
+		return composeRenderedPose(pose.current, entityPose.current, editedPose.current)
 	})
 </script>
 

package/dist/components/FileDrop/useFileDrop.svelte.js

@@ -2,6 +2,9 @@ import { Extensions, parseFileName, Prefixes, readFile } from './file-names';
 import { pcdDropper } from './pcd-dropper';
 import { plyDropper } from './ply-dropper';
 import { snapshotDropper } from './snapshot-dropper';
+const hasDraggedFiles = (dataTransfer) => {
+    return dataTransfer?.types?.includes('Files') ?? false;
+};
 const createFileDropper = (extension, prefix) => {
     switch (prefix) {
         case Prefixes.Snapshot: {
@@ -22,11 +25,15 @@ export const useFileDrop = (onSuccess, onError) => {
     let dropState = $state('inactive');
     // prevent default to allow drop
     const ondragenter = (event) => {
+        if (!hasDraggedFiles(event.dataTransfer))
+            return;
         event.preventDefault();
         dropState = 'hovering';
     };
     // prevent default to allow drop
     const ondragover = (event) => {
+        if (!hasDraggedFiles(event.dataTransfer))
+            return;
         event.preventDefault();
     };
     const ondragleave = (event) => {
@@ -40,10 +47,17 @@ export const useFileDrop = (onSuccess, onError) => {
         dropState = 'inactive';
     };
     const ondrop = (event) => {
+        const { dataTransfer } = event;
+        if (dataTransfer === null || !hasDraggedFiles(dataTransfer)) {
+            dropState = 'inactive';
+            return;
+        }
         event.preventDefault();
-        if (event.dataTransfer === null)
+        const { files } = dataTransfer;
+        if (files.length === 0) {
+            dropState = 'inactive';
             return;
-        const { files } = event.dataTransfer;
+        }
         let completed = 0;
         for (const file of files) {
             const fileName = parseFileName(file.name);

package/dist/components/PointerMissBox.svelte

@@ -23,7 +23,7 @@
 	onpointerdown={() => {
 		cameraDown.copy(camera.current.position)
 	}}
-	onpointerup={() => {
+	onclick={() => {
 		if (transformControls.active) {
 			return
 		}

package/dist/components/Scene.svelte

@@ -10,6 +10,7 @@
 	import Entities from './Entities/Entities.svelte'
 	import Focus from './Focus.svelte'
 	import Selected from './Selected.svelte'
+	import SelectedTransformControls from './SelectedTransformControls.svelte'
 	import StaticGeometries from './StaticGeometries.svelte'
 	import { useFocusedObject3d } from '../hooks/useSelection.svelte'
 	import { useSettings } from '../hooks/useSettings.svelte'
@@ -77,6 +78,7 @@
 
 		<StaticGeometries />
 		<Selected />
+		<SelectedTransformControls />
 
 		{#if !$isPresenting && settings.current.grid}
 			<Grid

package/dist/components/SceneProviders.svelte

@@ -12,6 +12,7 @@
 	} from '../hooks/useControls.svelte'
 	import { provideDrawAPI } from '../hooks/useDrawAPI.svelte'
 	import { provideDrawService } from '../hooks/useDrawService.svelte'
+	import { provideFrameEditSession } from '../hooks/useFrameEditSession.svelte'
 	import { provideFramelessComponents } from '../hooks/useFramelessComponents.svelte'
 	import { provideFrames } from '../hooks/useFrames.svelte'
 	import { provideGeometries } from '../hooks/useGeometries.svelte'
@@ -47,6 +48,7 @@
 
 	provideResourceByName(() => partID.current)
 	provideConfigFrames()
+	provideFrameEditSession(() => partID.current)
 	provideFrames(() => partID.current)
 	provideGeometries(() => partID.current)
 	provide3DModels(() => partID.current)

package/dist/components/SelectedTransformControls.svelte

@@ -0,0 +1,227 @@
+<script lang="ts">
+	import { TransformControls } from '@threlte/extras'
+	import { Quaternion, Vector3 } from 'three'
+
+	import type { FrameEditSession } from '../editing/FrameEditSession'
+
+	import { traits, useTrait } from '../ecs'
+	import { useTransformControls } from '../hooks/useControls.svelte'
+	import { useEnvironment } from '../hooks/useEnvironment.svelte'
+	import { useFrameEditSession } from '../hooks/useFrameEditSession.svelte'
+	import { useSelectedEntity, useSelectedObject3d } from '../hooks/useSelection.svelte'
+	import { useSettings } from '../hooks/useSettings.svelte'
+	import {
+		composeEditedPoseForRenderedPose,
+		createPose,
+		quaternionToPose,
+		vector3ToPose,
+	} from '../transform'
+
+	const settings = useSettings()
+	const environment = useEnvironment()
+	const transformControls = useTransformControls()
+	const selectedEntity = useSelectedEntity()
+	const selectedObject3d = useSelectedObject3d()
+	const sessions = useFrameEditSession()
+
+	const mode = $derived(settings.current.transformMode)
+	const entity = $derived(selectedEntity.current)
+	const transformable = useTrait(() => entity, traits.Transformable)
+	const networkPose = useTrait(() => entity, traits.Pose)
+	const livePose = useTrait(() => entity, traits.LivePose)
+	const box = useTrait(() => entity, traits.Box)
+	const sphere = useTrait(() => entity, traits.Sphere)
+	const capsule = useTrait(() => entity, traits.Capsule)
+	const hasScalableGeometry = $derived(
+		box.current !== undefined || sphere.current !== undefined || capsule.current !== undefined
+	)
+
+	// Mesh sets name={entity} on its inner mesh, so useSelectedObject3d resolves
+	// to that mesh — not the parent Frame Group we actually want to drive. Walk
+	// up to the Group so translate/rotate/scale apply to the whole frame, not
+	// the geometry inside it.
+	const ref = $derived(selectedObject3d.current?.parent ?? selectedObject3d.current)
+
+	const activeMode = $derived.by(() => {
+		if (mode === 'none' || !transformable.current) return undefined
+		// Scale only does anything for primitive geometries the gizmo can size.
+		if (mode === 'scale' && !hasScalableGeometry) return undefined
+		return mode
+	})
+	const isSphereScale = $derived(activeMode === 'scale' && sphere.current !== undefined)
+	const isCapsuleScale = $derived(activeMode === 'scale' && capsule.current !== undefined)
+
+	const quaternion = new Quaternion()
+	const vector3 = new Vector3()
+	const refPose = createPose()
+
+	let session: FrameEditSession | undefined
+	let scaleStart:
+		| { type: 'box'; x: number; y: number; z: number }
+		| { type: 'sphere'; r: number }
+		| { type: 'capsule'; r: number; l: number }
+		| undefined
+
+	const captureScaleStart = () => {
+		if (!entity || activeMode !== 'scale') {
+			scaleStart = undefined
+			return
+		}
+
+		const box = entity.get(traits.Box)
+		if (box) {
+			scaleStart = { type: 'box', ...box }
+			return
+		}
+
+		const sphere = entity.get(traits.Sphere)
+		if (sphere) {
+			scaleStart = { type: 'sphere', ...sphere }
+			return
+		}
+
+		const capsule = entity.get(traits.Capsule)
+		if (capsule) {
+			scaleStart = { type: 'capsule', ...capsule }
+			return
+		}
+
+		scaleStart = undefined
+	}
+
+	const onMouseDown = () => {
+		if (entity?.has(traits.FramesAPI)) {
+			session = sessions.begin([entity])
+		}
+		captureScaleStart()
+		environment.current.viewerMode = 'edit'
+		transformControls.setActive(true)
+	}
+
+	const onChange = () => {
+		if (!ref || !entity || !activeMode) {
+			return
+		}
+
+		const isFrameEntity = entity.has(traits.FramesAPI)
+
+		if (activeMode === 'translate' || activeMode === 'rotate') {
+			if (isFrameEntity) {
+				stageFrameTransform()
+			} else {
+				const pose = entity.get(traits.Pose)
+				if (pose) {
+					if (activeMode === 'translate') {
+						vector3ToPose(ref.getWorldPosition(vector3), pose)
+					} else {
+						quaternionToPose(ref.getWorldQuaternion(quaternion), pose)
+						ref.quaternion.copy(quaternion)
+					}
+					entity.set(traits.Pose, pose)
+				}
+			}
+		} else {
+			// scale → bake the gizmo's scale factor into the geometry trait,
+			// then reset the object's scale so subsequent drags start from 1.
+			if (!scaleStart) {
+				captureScaleStart()
+			}
+
+			if (scaleStart?.type === 'box') {
+				const next = {
+					x: scaleStart.x * ref.scale.x,
+					y: scaleStart.y * ref.scale.y,
+					z: scaleStart.z * ref.scale.z,
+				}
+				if (isFrameEntity) {
+					session?.stageGeometry(entity, { type: 'box', ...next })
+				} else {
+					entity.set(traits.Box, next)
+				}
+			} else if (scaleStart?.type === 'sphere') {
+				const next = { r: scaleStart.r * ref.scale.x }
+				if (isFrameEntity) {
+					session?.stageGeometry(entity, { type: 'sphere', ...next })
+				} else {
+					entity.set(traits.Sphere, next)
+				}
+			} else if (scaleStart?.type === 'capsule') {
+				const next = { r: scaleStart.r * ref.scale.x, l: scaleStart.l * ref.scale.y }
+				if (isFrameEntity) {
+					session?.stageGeometry(entity, { type: 'capsule', ...next })
+				} else {
+					entity.set(traits.Capsule, next)
+				}
+			}
+
+			ref.scale.setScalar(1)
+		}
+	}
+
+	const onMouseUp = () => {
+		session?.commit()
+		session = undefined
+		scaleStart = undefined
+		transformControls.setActive(false)
+	}
+
+	// Pose.svelte renders frame entities through the live blend
+	//   render = M(live) × M(network)⁻¹ × M(edited)
+	// so for the user's drag to render where they pulled the gizmo to, EditedPose
+	// must satisfy
+	//   M(edited) = M(network) × M(live)⁻¹ × M(ref)
+	// where M(ref) is the gizmo-driven group's parent-relative matrix in mm.
+	// When live ≈ network (no kinematic offset), this collapses to M(edited) =
+	// M(ref) — the same as the naive writeback. When they diverge (e.g. an arm
+	// whose joints have moved away from its config pose), this composition is
+	// what keeps the rendering anchored to the user's pointer instead of
+	// shearing through the live × baseline⁻¹ offset.
+	const stageFrameTransform = () => {
+		if (!ref || !entity) return
+
+		vector3ToPose(ref.position, refPose)
+		quaternionToPose(ref.quaternion, refPose)
+
+		const live = livePose.current
+		const network = networkPose.current
+
+		if (!live || !network) {
+			// No live pose available — Pose.svelte's blend short-circuits to
+			// editedPose, so naive writeback is correct.
+			if (activeMode === 'translate') {
+				session?.stagePose(entity, {
+					x: refPose.x,
+					y: refPose.y,
+					z: refPose.z,
+				})
+			} else if (activeMode === 'rotate') {
+				session?.stagePose(entity, {
+					oX: refPose.oX,
+					oY: refPose.oY,
+					oZ: refPose.oZ,
+					theta: refPose.theta,
+				})
+			}
+			return
+		}
+
+		session?.stagePose(entity, composeEditedPoseForRenderedPose(network, live, refPose))
+	}
+</script>
+
+{#if ref && entity && activeMode}
+	{#key entity}
+		<TransformControls
+			object={ref}
+			mode={activeMode}
+			translationSnap={settings.current.snapping ? 0.1 : undefined}
+			rotationSnap={settings.current.snapping ? Math.PI / 24 : undefined}
+			scaleSnap={settings.current.snapping ? 0.1 : undefined}
+			showY={!isSphereScale}
+			showZ={!isSphereScale && !isCapsuleScale}
+			onmouseDown={onMouseDown}
+			onobjectChange={onChange}
+			onmouseUp={onMouseUp}
+		/>
+	{/key}
+{/if}

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

@@ -0,0 +1,3 @@
+declare const SelectedTransformControls: import("svelte").Component<Record<string, never>, {}, "">;
+type SelectedTransformControls = ReturnType<typeof SelectedTransformControls>;
+export default SelectedTransformControls;

package/dist/components/StaticGeometries.svelte

@@ -8,22 +8,15 @@
 <script lang="ts">
 	import type { Entity } from 'koota'
 
-	import { TransformControls } from '@threlte/extras'
 	import { PressedKeys } from 'runed'
 	import { SvelteSet } from 'svelte/reactivity'
-	import { Quaternion, Vector3 } from 'three'
 
 	import { traits, useWorld } from '../ecs'
-	import { useTransformControls } from '../hooks/useControls.svelte'
 	import { useSelectedEntity } from '../hooks/useSelection.svelte'
-	import { useSettings } from '../hooks/useSettings.svelte'
-	import { quaternionToPose, vector3ToPose } from '../transform'
 
 	import Frame from './Entities/Frame.svelte'
 
 	const world = useWorld()
-	const settings = useSettings()
-	const transformControls = useTransformControls()
 	const selectedEntity = useSelectedEntity()
 
 	const entities = new SvelteSet<Entity>()
@@ -31,11 +24,6 @@
 		[...entities].find((entity) => entity === selectedEntity.current)
 	)
 
-	const mode = $derived(settings.current.transformMode)
-
-	const quaternion = new Quaternion()
-	const vector3 = new Vector3()
-
 	const keys = new PressedKeys()
 
 	keys.onKeys('=', () => {
@@ -43,7 +31,8 @@
 			traits.Name(`custom geometry ${++index}`),
 			traits.Pose,
 			traits.Box({ x: 100, y: 100, z: 100 }),
-			traits.Removable
+			traits.Removable,
+			traits.Transformable
 		)
 
 		entities.add(entity)
@@ -57,50 +46,8 @@
 			selectedEntity.set()
 		}
 	})
-
-	$effect(() => {
-		settings.current.transforming = selectedCustomGeometry !== undefined
-	})
 </script>
 
 {#each entities as entity (entity)}
-	<Frame {entity}>
-		{#snippet children({ ref })}
-			{#if selectedEntity.current === entity}
-				{#key mode}
-					<TransformControls
-						object={ref}
-						{mode}
-						translationSnap={settings.current.snapping ? 0.1 : undefined}
-						rotationSnap={settings.current.snapping ? Math.PI / 24 : undefined}
-						scaleSnap={settings.current.snapping ? 0.1 : undefined}
-						onmouseDown={() => {
-							transformControls.setActive(true)
-						}}
-						onmouseUp={() => {
-							transformControls.setActive(false)
-
-							const pose = entity.get(traits.Pose)
-							const box = entity.get(traits.Box)
-
-							if (pose && mode === 'translate') {
-								vector3ToPose(ref.getWorldPosition(vector3), pose)
-								entity.set(traits.Pose, pose)
-							} else if (pose && mode === 'rotate') {
-								quaternionToPose(ref.getWorldQuaternion(quaternion), pose)
-								ref.quaternion.copy(quaternion)
-								entity.set(traits.Pose, pose)
-							} else if (box && mode === 'scale') {
-								box.x *= ref.scale.x
-								box.y *= ref.scale.y
-								box.z *= ref.scale.z
-								entity.set(traits.Box, box)
-								ref.scale.setScalar(1)
-							}
-						}}
-					/>
-				{/key}
-			{/if}
-		{/snippet}
-	</Frame>
+	<Frame {entity} />
 {/each}

package/dist/components/overlay/Details.svelte

@@ -11,12 +11,6 @@
 	const quaternion = new Quaternion()
 	const ov = new OrientationVector()
 	const euler = new Euler()
-
-	ThemeUtils.setGlobalDefaultTheme({
-		...ThemeUtils.presets.light,
-		baseBackgroundColor: '#fbfbfc',
-		baseShadowColor: 'transparent',
-	})
 </script>
 
 <script lang="ts">
@@ -139,8 +133,6 @@
 		}
 	})
 
-	const formatTwoDecimals = (value: number) => value.toFixed(2)
-
 	const detailConfigUpdater = new FrameConfigUpdater(partConfig.updateFrame, partConfig.deleteFrame)
 
 	const handlePositionChange = (event: PointChangeEvent) => {
@@ -295,6 +287,12 @@
 			2
 		)
 	}
+
+	ThemeUtils.setGlobalDefaultTheme({
+		...ThemeUtils.presets.light,
+		baseBackgroundColor: '#fbfbfc',
+		baseShadowColor: 'transparent',
+	})
 </script>
 
 {#snippet ImmutableField({
@@ -321,9 +319,7 @@
 {#if entity}
 	<div
 		id="details-panel"
-		class="border-medium bg-extralight absolute top-0 right-0 z-4 m-2 {showEditFrameOptions
-			? 'w-80'
-			: 'w-60'} border p-2 text-xs dark:text-black"
+		class="border-medium bg-extralight absolute top-0 right-0 z-4 m-2 w-70 border p-2 text-xs dark:text-black"
 		use:draggable={{
 			bounds: 'body',
 			handle: dragElement,
@@ -492,7 +488,6 @@
 									y: localPose.current.y,
 									z: localPose.current.z,
 								}}
-								format={formatTwoDecimals}
 								on:change={handlePositionChange}
 							/>
 						</div>
@@ -531,7 +526,6 @@
 											z: localPose.current.oZ,
 											w: localPose.current.theta,
 										}}
-										format={formatTwoDecimals}
 										on:change={handleOrientationOVChange}
 									/>
 								</TabPage>
@@ -578,48 +572,49 @@
 					<div aria-label="mutable geometry">
 						<TabGroup bind:selectedIndex={geometryTabIndex}>
 							<TabPage title="None" />
-							<TabPage title="Box" />
-							<TabPage title="Sphere" />
-							<TabPage title="Capsule" />
+							<TabPage title="Box">
+								{#if box.current}
+									<div aria-label="mutable box dimensions">
+										<Point
+											value={{
+												x: box.current.x,
+												y: box.current.y,
+												z: box.current.z,
+											}}
+											on:change={handleBoxChange}
+										/>
+									</div>
+								{/if}
+							</TabPage>
+							<TabPage title="Sphere">
+								{#if sphere.current}
+									<div aria-label="mutable sphere dimensions">
+										<Slider
+											label="r"
+											value={sphere.current.r}
+											on:change={handleSphereRChange}
+										/>
+									</div>
+								{/if}
+							</TabPage>
+							<TabPage title="Capsule">
+								{#if capsule.current}
+									<div aria-label="mutable capsule dimensions">
+										<Slider
+											label="r"
+											value={capsule.current.r}
+											on:change={handleCapsuleRChange}
+										/>
+										<Slider
+											label="l"
+											value={capsule.current.l}
+											on:change={handleCapsuleLChange}
+										/>
+									</div>
+								{/if}
+							</TabPage>
 						</TabGroup>
 					</div>
-					{#if geometryTabIndex === 1 && box.current}
-						<div aria-label="mutable box dimensions">
-							<Point
-								value={{
-									x: box.current.x,
-									y: box.current.y,
-									z: box.current.z,
-								}}
-								format={formatTwoDecimals}
-								on:change={handleBoxChange}
-							/>
-						</div>
-					{:else if geometryTabIndex === 2 && sphere.current}
-						<div aria-label="mutable sphere dimensions">
-							<Slider
-								label="r"
-								value={sphere.current.r}
-								format={formatTwoDecimals}
-								on:change={handleSphereRChange}
-							/>
-						</div>
-					{:else if geometryTabIndex === 3 && capsule.current}
-						<div aria-label="mutable capsule dimensions">
-							<Slider
-								label="r"
-								value={capsule.current.r}
-								format={formatTwoDecimals}
-								on:change={handleCapsuleRChange}
-							/>
-							<Slider
-								label="l"
-								value={capsule.current.l}
-								format={formatTwoDecimals}
-								on:change={handleCapsuleLChange}
-							/>
-						</div>
-					{/if}
 				</div>
 			{:else if box.current}
 				<div>

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

@@ -2,10 +2,10 @@
 	import type { ClassValue, HTMLButtonAttributes, MouseEventHandler } from 'svelte/elements'
 
 	import { Icon, type IconName, Tooltip } from '@viamrobotics/prime-core'
-	import { Ruler } from 'lucide-svelte'
+	import { MousePointer2, Ruler } from 'lucide-svelte'
 
 	interface Props extends HTMLButtonAttributes {
-		icon: IconName | 'ruler'
+		icon: IconName | 'ruler' | 'mouse-pointer'
 		active?: boolean
 		description: string
 		hotkey?: string
@@ -48,6 +48,8 @@
 		>
 			{#if icon === 'ruler'}
 				<Ruler size="16" />
+			{:else if icon === 'mouse-pointer'}
+				<MousePointer2 size="16" />
 			{:else}
 				<Icon name={icon} />
 			{/if}

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

@@ -1,7 +1,7 @@
 import type { ClassValue, HTMLButtonAttributes, MouseEventHandler } from 'svelte/elements';
 import { type IconName } from '@viamrobotics/prime-core';
 interface Props extends HTMLButtonAttributes {
-    icon: IconName | 'ruler';
+    icon: IconName | 'ruler' | 'mouse-pointer';
     active?: boolean;
     description: string;
     hotkey?: string;

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

@@ -38,40 +38,50 @@
 	</fieldset>
 
 	<!-- transform -->
-	{#if settings.current.transforming}
-		<fieldset class="flex">
-			<Button
-				icon="cursor-move"
-				active={settings.current.transformMode === 'translate'}
-				description="Translate"
-				hotkey="1"
-				onclick={() => {
-					settings.current.transformMode = 'translate'
-				}}
-			/>
-			<Button
-				icon="sync"
-				active={settings.current.transformMode === 'rotate'}
-				description="Rotate"
-				hotkey="2"
-				class="-ml-px"
-				onclick={() => {
-					settings.current.transformMode = 'rotate'
-				}}
-			/>
-			<Button
-				icon="resize"
-				active={settings.current.transformMode === 'scale'}
-				description="Scale"
-				hotkey="3"
-				class="-ml-px"
-				onclick={() => {
-					settings.current.transformMode = 'scale'
-				}}
-			/>
-		</fieldset>
+	<fieldset class="flex">
+		<Button
+			icon="mouse-pointer"
+			active={settings.current.transformMode === 'none'}
+			description="No transform controls"
+			hotkey="0"
+			onclick={() => {
+				settings.current.transformMode = 'none'
+			}}
+		/>
+		<Button
+			icon="cursor-move"
+			active={settings.current.transformMode === 'translate'}
+			description="Translate"
+			hotkey="1"
+			class="-ml-px"
+			onclick={() => {
+				settings.current.transformMode = 'translate'
+			}}
+		/>
+		<Button
+			icon="sync"
+			active={settings.current.transformMode === 'rotate'}
+			description="Rotate"
+			hotkey="2"
+			class="-ml-px"
+			onclick={() => {
+				settings.current.transformMode = 'rotate'
+			}}
+		/>
+		<Button
+			icon="resize"
+			active={settings.current.transformMode === 'scale'}
+			description="Scale"
+			hotkey="3"
+			class="-ml-px"
+			onclick={() => {
+				settings.current.transformMode = 'scale'
+			}}
+		/>
+	</fieldset>
 
-		<!-- snapping -->
+	<!-- snapping -->
+	{#if settings.current.transformMode !== 'none'}
 		<fieldset class="flex">
 			<Button
 				icon={settings.current.snapping ? 'magnet' : 'magnet-off'}

package/dist/ecs/traits.d.ts

@@ -23,6 +23,15 @@ export declare const EditedPose: import("koota").Trait<{
     oZ: number;
     theta: number;
 }>;
+export declare const LivePose: import("koota").Trait<{
+    x: number;
+    y: number;
+    z: number;
+    oX: number;
+    oY: number;
+    oZ: number;
+    theta: number;
+}>;
 export declare const Center: import("koota").Trait<{
     x: number;
     y: number;
@@ -146,6 +155,12 @@ export declare const SnapshotAPI: import("koota").Trait<() => boolean>;
  * Marker trait for entities created from user-dropped files (PLY, PCD, etc.)
  */
 export declare const DroppedFile: import("koota").Trait<() => boolean>;
+/**
+ * Marker trait for entities the dashboard's TransformControls may attach to —
+ * editable frames and ad-hoc custom geometries. Other entity kinds (lines,
+ * points, batched arrows, etc.) are deliberately excluded.
+ */
+export declare const Transformable: import("koota").Trait<() => boolean>;
 export declare const ShowAxesHelper: import("koota").Trait<() => boolean>;
 /**
  * Marker trait for entities that should be rendered in screen space (CSS pixels)

package/dist/ecs/traits.js

@@ -11,6 +11,7 @@ export const Parent = trait(() => 'world');
 export const UUID = trait(() => '');
 export const Pose = trait({ x: 0, y: 0, z: 0, oX: 0, oY: 0, oZ: 1, theta: 0 });
 export const EditedPose = trait({ x: 0, y: 0, z: 0, oX: 0, oY: 0, oZ: 1, theta: 0 });
+export const LivePose = trait({ x: 0, y: 0, z: 0, oX: 0, oY: 0, oZ: 1, theta: 0 });
 export const Center = trait({ x: 0, y: 0, z: 0, oX: 0, oY: 0, oZ: 1, theta: 0 });
 export const InstancedPose = trait({
     x: 0,
@@ -103,6 +104,12 @@ export const SnapshotAPI = trait(() => true);
  * Marker trait for entities created from user-dropped files (PLY, PCD, etc.)
  */
 export const DroppedFile = trait(() => true);
+/**
+ * Marker trait for entities the dashboard's TransformControls may attach to —
+ * editable frames and ad-hoc custom geometries. Other entity kinds (lines,
+ * points, batched arrows, etc.) are deliberately excluded.
+ */
+export const Transformable = trait(() => true);
 export const ShowAxesHelper = trait(() => true);
 /**
  * Marker trait for entities that should be rendered in screen space (CSS pixels)

package/dist/editing/FrameEditSession.d.ts

@@ -0,0 +1,37 @@
+import type { Pose } from '@viamrobotics/sdk';
+import type { Entity } from 'koota';
+import type { Frame } from '../frame';
+export type UpdateFrameFn = (componentName: string, referenceFrame: string, pose: Pose, geometry?: Frame['geometry']) => void;
+export type DeleteFrameFn = (componentName: string) => void;
+/**
+ * A single user gesture against one or more frames (drag, parent change, geometry tweak).
+ * Owns the affected entities until commit() or abort() runs. Snapshots their pre-gesture
+ * trait state so abort() can restore — both the ECS view and the dirty part config.
+ *
+ * Replaces the Transforming marker trait: while a session is active, useFrames asks
+ * `session.owns(entity)` instead of inspecting a per-entity flag.
+ */
+export declare class FrameEditSession {
+    #private;
+    private snapshots;
+    private updateFrame;
+    private deleteFrame;
+    private onClose;
+    constructor(entities: Entity[], updateFrame: UpdateFrameFn, deleteFrame: DeleteFrameFn, onClose: () => void);
+    get isClosed(): boolean;
+    owns(entity: Entity | undefined): boolean;
+    stagePose: (entity: Entity, pose: Partial<Pose>) => void;
+    stageGeometry: (entity: Entity, geometry: Frame["geometry"]) => void;
+    stageParent: (entity: Entity, parent: string) => void;
+    stageDelete: (entity: Entity) => void;
+    /**
+     * Validate and close. Returns true on success. On invalid pose data
+     * (NaN/infinite from a degenerate gizmo state), aborts and returns false.
+     */
+    commit: () => boolean;
+    /**
+     * Restore each owned entity's traits to its pre-session state and re-issue
+     * an updateFrame so the dirty part config matches.
+     */
+    abort: () => void;
+}

package/dist/editing/FrameEditSession.js

@@ -0,0 +1,178 @@
+import { traits } from '../ecs';
+import { isFinitePose } from '../transform';
+const captureGeometry = (entity) => {
+    const box = entity.get(traits.Box);
+    if (box)
+        return { type: 'box', box: { ...box } };
+    const sphere = entity.get(traits.Sphere);
+    if (sphere)
+        return { type: 'sphere', sphere: { ...sphere } };
+    const capsule = entity.get(traits.Capsule);
+    if (capsule)
+        return { type: 'capsule', capsule: { ...capsule } };
+    return { type: 'none' };
+};
+const restoreGeometryTrait = (entity, snap) => {
+    if (snap.type === 'none') {
+        entity.remove(traits.Box, traits.Sphere, traits.Capsule);
+        return;
+    }
+    if (snap.type === 'box' && snap.box) {
+        entity.remove(traits.Sphere, traits.Capsule);
+        if (entity.has(traits.Box))
+            entity.set(traits.Box, snap.box);
+        else
+            entity.add(traits.Box(snap.box));
+        return;
+    }
+    if (snap.type === 'sphere' && snap.sphere) {
+        entity.remove(traits.Box, traits.Capsule);
+        if (entity.has(traits.Sphere))
+            entity.set(traits.Sphere, snap.sphere);
+        else
+            entity.add(traits.Sphere(snap.sphere));
+        return;
+    }
+    if (snap.type === 'capsule' && snap.capsule) {
+        entity.remove(traits.Box, traits.Sphere);
+        if (entity.has(traits.Capsule))
+            entity.set(traits.Capsule, snap.capsule);
+        else
+            entity.add(traits.Capsule(snap.capsule));
+    }
+};
+const snapshotToFrameGeometry = (snap) => {
+    if (snap.type === 'box' && snap.box)
+        return { type: 'box', ...snap.box };
+    if (snap.type === 'sphere' && snap.sphere)
+        return { type: 'sphere', ...snap.sphere };
+    if (snap.type === 'capsule' && snap.capsule)
+        return { type: 'capsule', ...snap.capsule };
+    return { type: 'none' };
+};
+const liveGeometry = (entity) => snapshotToFrameGeometry(captureGeometry(entity));
+/**
+ * A single user gesture against one or more frames (drag, parent change, geometry tweak).
+ * Owns the affected entities until commit() or abort() runs. Snapshots their pre-gesture
+ * trait state so abort() can restore — both the ECS view and the dirty part config.
+ *
+ * Replaces the Transforming marker trait: while a session is active, useFrames asks
+ * `session.owns(entity)` instead of inspecting a per-entity flag.
+ */
+export class FrameEditSession {
+    snapshots = new Map();
+    updateFrame;
+    deleteFrame;
+    onClose;
+    #closed = false;
+    constructor(entities, updateFrame, deleteFrame, onClose) {
+        this.updateFrame = updateFrame;
+        this.deleteFrame = deleteFrame;
+        this.onClose = onClose;
+        for (const entity of entities) {
+            const name = entity.get(traits.Name);
+            const editedPose = entity.get(traits.EditedPose);
+            if (!name || !editedPose)
+                continue;
+            this.snapshots.set(entity, {
+                name,
+                parent: entity.get(traits.Parent) ?? 'world',
+                editedPose: { ...editedPose },
+                geometry: captureGeometry(entity),
+            });
+        }
+    }
+    get isClosed() {
+        return this.#closed;
+    }
+    owns(entity) {
+        return entity !== undefined && !this.#closed && this.snapshots.has(entity);
+    }
+    stagePose = (entity, pose) => {
+        const snap = this.snapshots.get(entity);
+        if (!snap || this.#closed)
+            return;
+        const current = entity.get(traits.EditedPose);
+        if (!current)
+            return;
+        const next = { ...current, ...pose };
+        entity.set(traits.EditedPose, next);
+        this.updateFrame(snap.name, entity.get(traits.Parent) ?? 'world', next, liveGeometry(entity));
+    };
+    stageGeometry = (entity, geometry) => {
+        const snap = this.snapshots.get(entity);
+        if (!snap || this.#closed || !geometry)
+            return;
+        if (geometry.type === 'none') {
+            entity.remove(traits.Box, traits.Sphere, traits.Capsule);
+        }
+        else if (geometry.type === 'box') {
+            const data = { x: geometry.x, y: geometry.y, z: geometry.z };
+            restoreGeometryTrait(entity, { type: 'box', box: data });
+        }
+        else if (geometry.type === 'sphere') {
+            restoreGeometryTrait(entity, { type: 'sphere', sphere: { r: geometry.r } });
+        }
+        else if (geometry.type === 'capsule') {
+            restoreGeometryTrait(entity, { type: 'capsule', capsule: { r: geometry.r, l: geometry.l } });
+        }
+        const editedPose = entity.get(traits.EditedPose);
+        if (editedPose) {
+            this.updateFrame(snap.name, entity.get(traits.Parent) ?? 'world', editedPose, geometry);
+        }
+    };
+    stageParent = (entity, parent) => {
+        const snap = this.snapshots.get(entity);
+        if (!snap || this.#closed)
+            return;
+        traits.setParentTrait(entity, parent === 'world' ? undefined : parent);
+        const editedPose = entity.get(traits.EditedPose);
+        if (editedPose) {
+            this.updateFrame(snap.name, parent, editedPose, liveGeometry(entity));
+        }
+    };
+    stageDelete = (entity) => {
+        const snap = this.snapshots.get(entity);
+        if (!snap || this.#closed)
+            return;
+        this.deleteFrame(snap.name);
+    };
+    /**
+     * Validate and close. Returns true on success. On invalid pose data
+     * (NaN/infinite from a degenerate gizmo state), aborts and returns false.
+     */
+    commit = () => {
+        if (this.#closed)
+            return false;
+        for (const [entity] of this.snapshots) {
+            const pose = entity.get(traits.EditedPose);
+            if (pose && !isFinitePose(pose)) {
+                this.abort();
+                return false;
+            }
+        }
+        this.#close();
+        return true;
+    };
+    /**
+     * Restore each owned entity's traits to its pre-session state and re-issue
+     * an updateFrame so the dirty part config matches.
+     */
+    abort = () => {
+        if (this.#closed)
+            return;
+        for (const [entity, snap] of this.snapshots) {
+            if (entity.isAlive()) {
+                entity.set(traits.EditedPose, snap.editedPose);
+                traits.setParentTrait(entity, snap.parent === 'world' ? undefined : snap.parent);
+                restoreGeometryTrait(entity, snap.geometry);
+            }
+            this.updateFrame(snap.name, snap.parent, snap.editedPose, snapshotToFrameGeometry(snap.geometry));
+        }
+        this.#close();
+    };
+    #close = () => {
+        this.#closed = true;
+        this.onClose();
+    };
+}

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

@@ -0,0 +1,15 @@
+import type { Entity } from 'koota';
+import { FrameEditSession } from '../editing/FrameEditSession';
+interface FrameEditSessionContext {
+    /** The currently-active session, or undefined when no gesture is in flight. */
+    current: FrameEditSession | undefined;
+    /**
+     * Open a new session over the given entities. If a previous session is still
+     * active (e.g. selection changed mid-drag and onMouseUp never fired), it is
+     * aborted first so its snapshot is restored.
+     */
+    begin: (entities: Entity[]) => FrameEditSession;
+}
+export declare const provideFrameEditSession: (partID: () => string) => void;
+export declare const useFrameEditSession: () => FrameEditSessionContext;
+export {};

package/dist/hooks/useFrameEditSession.svelte.js

@@ -0,0 +1,36 @@
+import { getContext, setContext } from 'svelte';
+import { FrameEditSession } from '../editing/FrameEditSession';
+import { usePartConfig } from './usePartConfig.svelte';
+const key = Symbol('frame-edit-session-context');
+export const provideFrameEditSession = (partID) => {
+    const partConfig = usePartConfig();
+    let active = $state(undefined);
+    const begin = (entities) => {
+        active?.abort();
+        const session = new FrameEditSession(entities, partConfig.updateFrame, partConfig.deleteFrame, () => {
+            if (active === session)
+                active = undefined;
+        });
+        active = session;
+        return session;
+    };
+    // Drop any in-flight session when the partID changes — its snapshots reference
+    // entities from the old world that useFrames will destroy, and aborting it
+    // after the swap would write old frame names into the new part's config.
+    let lastPartID;
+    $effect.pre(() => {
+        const id = partID();
+        if (lastPartID !== undefined && lastPartID !== id) {
+            active?.abort();
+            active = undefined;
+        }
+        lastPartID = id;
+    });
+    setContext(key, {
+        get current() {
+            return active;
+        },
+        begin,
+    });
+};
+export const useFrameEditSession = () => getContext(key);

package/dist/hooks/useFrames.svelte.js

@@ -7,6 +7,7 @@ import { traits, useWorld } from '../ecs';
 import { createPose } from '../transform';
 import { useConfigFrames } from './useConfigFrames.svelte';
 import { useEnvironment } from './useEnvironment.svelte';
+import { useFrameEditSession } from './useFrameEditSession.svelte';
 import { useLogs } from './useLogs.svelte';
 import { usePartConfig } from './usePartConfig.svelte';
 import { useResourceByName } from './useResourceByName.svelte';
@@ -14,6 +15,7 @@ const key = Symbol('frames-context');
 export const provideFrames = (partID) => {
     const configFrames = useConfigFrames();
     const partConfig = usePartConfig();
+    const editSession = useFrameEditSession();
     const environment = useEnvironment();
     const world = useWorld();
     const resourceByName = useResourceByName();
@@ -23,6 +25,16 @@ export const provideFrames = (partID) => {
     const logs = useLogs();
     const pendingSaveKey = $derived(`viam-pending-save-revision:${partID()}`);
     let didRecentlyEdit = $state(false);
+    let lastPartID;
+    $effect.pre(() => {
+        const id = partID();
+        if (lastPartID !== undefined && lastPartID !== id) {
+            // Stale across parts: keeps the configFrames-priority merge branch
+            // active when switching to a new part that hasn't been edited.
+            didRecentlyEdit = false;
+        }
+        lastPartID = id;
+    });
     const isEditMode = $derived(environment.current.viewerMode === 'edit');
     const query = createRobotQuery(client, 'frameSystemConfig', () => ({
         refetchOnWindowFocus: false,
@@ -73,7 +85,7 @@ export const provideFrames = (partID) => {
     });
     const current = $derived(Object.values(frames));
     const entities = new Map();
-    $effect.pre(() => {
+    $effect(() => {
         if (revision) {
             untrack(() => query.refetch());
         }
@@ -145,6 +157,13 @@ export const provideFrames = (partID) => {
                     subtypeToColor(currentComponentSubtypeByName[frame.referenceFrame]);
                 const existing = entities.get(entityKey);
                 if (existing) {
+                    // Active edit session owns the entity's traits for the duration of
+                    // the user's gesture. Skip the entire re-sync — re-setting Parent
+                    // would re-evaluate the <Portal> id and re-mount the group,
+                    // detaching the gizmo's drag target mid-stroke.
+                    if (editSession.current?.owns(existing)) {
+                        continue;
+                    }
                     traits.setParentTrait(existing, parent);
                     if (color) {
                         existing.set(traits.Color, color);
@@ -153,14 +172,30 @@ export const provideFrames = (partID) => {
                         existing.set(traits.Center, center);
                     }
                     traits.updateGeometryTrait(existing, frame.physicalObject);
-                    existing.set(traits.EditedPose, pose);
+                    if (!isEditMode && !partConfig.hasPendingSave) {
+                        existing.set(traits.Pose, pose);
+                    }
+                    if (!existing.has(traits.LivePose)) {
+                        existing.add(traits.LivePose(pose));
+                    }
+                    // Skip the EditedPose overwrite while in edit mode. The merged
+                    // `frames` source can differ from query.data once didRecentlyEdit
+                    // flips (fragment overrides, round-trip drift), and writing those
+                    // values would shift entities whose parents the user is portaling
+                    // into — the gizmo's drag target moves underneath it. Once we're
+                    // back in monitor mode, the next sync resumes the overwrite.
+                    if (!isEditMode) {
+                        existing.set(traits.EditedPose, pose);
+                    }
                     continue;
                 }
                 const entityTraits = [
                     traits.Name(name),
                     traits.Pose(pose),
                     traits.EditedPose(pose),
+                    traits.LivePose(pose),
                     traits.FramesAPI,
+                    traits.Transformable,
                     traits.ShowAxesHelper,
                     ...traits.getParentTrait(parent),
                 ];

package/dist/hooks/usePartConfig.svelte.js

@@ -273,7 +273,17 @@ const useStandalonePartConfig = (partID) => {
         }
         return results;
     });
+    let lastPartID;
     $effect.pre(() => {
+        const id = partID();
+        if (lastPartID !== undefined && lastPartID !== id) {
+            // Part changed: drop any in-memory edits/pending-save state from the
+            // previous part. `current` is left for the existing sync below to
+            // repopulate once the new part's networkPartConfig arrives.
+            isDirty = false;
+            hasPendingSave = false;
+        }
+        lastPartID = id;
         if (!networkPartConfig || isDirty) {
             return;
         }

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

@@ -9,9 +9,8 @@ export interface Settings {
     };
     disabledCameras: Record<string, boolean>;
     disabledVisionServices: Record<string, boolean>;
-    transforming: boolean;
     snapping: boolean;
-    transformMode: 'translate' | 'rotate' | 'scale';
+    transformMode: 'none' | 'translate' | 'rotate' | 'scale';
     grid: boolean;
     gridCellSize: number;
     gridSectionSize: number;

package/dist/hooks/useSettings.svelte.js

@@ -15,9 +15,8 @@ const defaults = () => ({
     },
     disabledCameras: {},
     disabledVisionServices: {},
-    transforming: false,
     snapping: false,
-    transformMode: 'translate',
+    transformMode: 'none',
     grid: true,
     gridCellSize: 0.5,
     gridSectionSize: 10,

package/dist/transform.js

@@ -105,3 +105,16 @@ export const matrixToPose = (matrix) => {
     pose.theta = MathUtils.radToDeg(ov.th);
     return pose;
 };
+export const composeRenderedPose = (livePose, baselinePose, editedPose) => matrixToPose(poseToMatrix(livePose)
+    .multiply(poseToMatrix(baselinePose).invert())
+    .multiply(poseToMatrix(editedPose)));
+export const composeEditedPoseForRenderedPose = (baselinePose, livePose, renderedPose) => matrixToPose(poseToMatrix(baselinePose)
+    .multiply(poseToMatrix(livePose).invert())
+    .multiply(poseToMatrix(renderedPose)));
+export const isFinitePose = (pose) => Number.isFinite(pose.x) &&
+    Number.isFinite(pose.y) &&
+    Number.isFinite(pose.z) &&
+    Number.isFinite(pose.oX) &&
+    Number.isFinite(pose.oY) &&
+    Number.isFinite(pose.oZ) &&
+    Number.isFinite(pose.theta);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@viamrobotics/motion-tools",
-  "version": "1.21.0",
+  "version": "1.22.0",
   "description": "Motion visualization with Viam",
   "license": "Apache-2.0",
   "type": "module",
@@ -25,8 +25,8 @@
     "@testing-library/jest-dom": "6.8.0",
     "@testing-library/svelte": "5.2.8",
     "@testing-library/user-event": "^14.6.1",
-    "@threlte/core": "8.5.5",
-    "@threlte/extras": "9.14.1",
+    "@threlte/core": "8.5.11",
+    "@threlte/extras": "9.15.0",
     "@threlte/rapier": "3.4.1",
     "@threlte/xr": "1.5.2",
     "@types/bun": "1.2.21",