@viamrobotics/motion-tools 1.26.2 → 1.27.1

package/dist/assert.d.ts

@@ -0,0 +1,13 @@
+export declare class AssertionError extends Error {
+    constructor(message: string);
+}
+/**
+ * Assert that a value is defined.
+ *
+ * @example
+ * const stringify = (value: number | undefined): number => {
+ *  assertExists(value)
+ *  return `${value}` // TS now knows that value is of type `number`
+ * }
+ */
+export declare const assertExists: <T>(value: T, message: string) => asserts value is NonNullable<T>;

package/dist/assert.js

@@ -0,0 +1,20 @@
+export class AssertionError extends Error {
+    constructor(message) {
+        super(message);
+        this.name = 'AssertionError';
+    }
+}
+/**
+ * Assert that a value is defined.
+ *
+ * @example
+ * const stringify = (value: number | undefined): number => {
+ *  assertExists(value)
+ *  return `${value}` // TS now knows that value is of type `number`
+ * }
+ */
+export const assertExists = (value, message) => {
+    if (value === null || value === undefined) {
+        throw new AssertionError(message);
+    }
+};

package/dist/components/App.svelte

@@ -8,6 +8,7 @@
 	import { PortalTarget } from '@threlte/extras'
 	import { useXR } from '@threlte/xr'
 	import { provideToast, ToastContainer } from '@viamrobotics/prime-core'
+	import { ThemeUtils } from 'svelte-tweakpane-ui'
 
 	import type { CameraPose } from '../hooks/useControls.svelte'
 
@@ -90,10 +91,6 @@
 	const currentRobotCameraWidgets = $derived(settings.current.openCameraWidgets[partID] || [])
 	const { isPresenting } = useXR()
 
-	$effect(() => {
-		environment.current.inputBindingsEnabled = inputBindingsEnabled
-	})
-
 	createPartIDContext(() => partID)
 	provideDrawConnectionConfig(() => drawConnectionConfig)
 	provideWeblabs()
@@ -106,9 +103,18 @@
 		() => localConfigProps
 	)
 
-	$effect.pre(() => {
+	$effect(() => {
+		environment.current.inputBindingsEnabled = inputBindingsEnabled
 		environment.current.isStandalone = !localConfigProps
 	})
+
+	$effect(() => {
+		ThemeUtils.setGlobalDefaultTheme({
+			...ThemeUtils.presets.light,
+			baseBackgroundColor: '#fbfbfc',
+			baseShadowColor: 'transparent',
+		})
+	})
 </script>
 
 {#if settings.current.enableQueryDevtools}

package/dist/components/BatchedArrows.svelte

@@ -2,17 +2,13 @@
 	import type { Entity } from 'koota'
 
 	import { T } from '@threlte/core'
-	import { Portal } from '@threlte/extras'
 	import { Color, Quaternion, Vector3 } from 'three'
 
-	import { hierarchy, traits, useWorld } from '../ecs'
+	import { traits, useWorld } from '../ecs'
 	import { BatchedArrow } from '../three/BatchedArrow'
 	import { OrientationVector } from '../three/OrientationVector'
 
-	const arrowBatchMap = $state<Record<string, BatchedArrow>>({
-		world: new BatchedArrow(),
-	})
-	const batchEntries = $derived(Object.entries(arrowBatchMap))
+	const batched = new BatchedArrow()
 
 	const world = useWorld()
 
@@ -24,24 +20,19 @@
 	const tempOv = new OrientationVector()
 
 	/**
-	 * Decompose the matrix directly into the arrow's direction
-	 * (OV components from the rotation) and origin (translation)
+	 * Decompose the entity's `WorldMatrix` directly into the arrow's world
+	 * origin (translation) and direction (OV components from the rotation).
 	 */
 	const decompose = (entity: Entity): boolean => {
-		const matrix = entity.get(traits.Matrix)
-		if (!matrix) return false
-		matrix.decompose(origin, tempQuat, tempScale)
+		const worldMatrix = entity.get(traits.WorldMatrix)
+		if (!worldMatrix) return false
+		worldMatrix.decompose(origin, tempQuat, tempScale)
 		tempOv.setFromQuaternion(tempQuat)
 		direction.set(tempOv.x, tempOv.y, tempOv.z)
 		return true
 	}
 
 	const onAdd = (entity: Entity) => {
-		const parent = hierarchy.getParentName(entity) ?? 'world'
-
-		arrowBatchMap[parent] ??= new BatchedArrow()
-		const batched = arrowBatchMap[parent]
-
 		const colorRGB = entity.get(traits.Color)
 
 		if (!decompose(entity)) {
@@ -58,63 +49,54 @@
 		entity.add(traits.Instance({ instanceID, meshID: batched.mesh.id }))
 	}
 
-	const onMatrixChange = (entity: Entity) => {
+	const onWorldMatrixChange = (entity: Entity) => {
 		if (!entity.has(traits.Arrow)) return
 
-		const parent = hierarchy.getParentName(entity) ?? 'world'
-		const batch = arrowBatchMap[parent]
 		const instanceID = entity.get(traits.Instance)?.instanceID
 
 		if (instanceID && instanceID !== -1 && decompose(entity)) {
-			batch?.updateArrow(instanceID, direction, origin)
+			batched.updateArrow(instanceID, direction, origin)
 		}
 	}
 
 	const onColorChange = (entity: Entity) => {
 		if (!entity.has(traits.Arrow)) return
 
-		const parent = hierarchy.getParentName(entity) ?? 'world'
-		const batch = arrowBatchMap[parent]
 		const instanceID = entity.get(traits.Instance)?.instanceID
 		const colorRGB = entity.get(traits.Color)
 
 		if (instanceID && instanceID !== -1 && colorRGB) {
 			color.set(colorRGB.r, colorRGB.g, colorRGB.b)
-			batch.mesh.setColorAt(instanceID, color)
+			batched.mesh.setColorAt(instanceID, color)
 		}
 	}
 
 	const onInstanceRemove = (entity: Entity) => {
 		const instance = entity.get(traits.Instance)
-
-		for (const [, batch] of batchEntries) {
-			if (batch.mesh.id === instance?.meshID) {
-				batch.removeArrow(instance.instanceID)
-			}
+		if (instance && instance.meshID === batched.mesh.id) {
+			batched.removeArrow(instance.instanceID)
 		}
 	}
 
 	$effect(() => {
 		const unsubAdd = world.onAdd(traits.Arrow, onAdd)
 		const unsubRemove = world.onRemove(traits.Instance, onInstanceRemove)
-		const unsubMatrixChange = world.onChange(traits.Matrix, onMatrixChange)
+		const unsubMatrixAdd = world.onAdd(traits.WorldMatrix, onWorldMatrixChange)
+		const unsubMatrixChange = world.onChange(traits.WorldMatrix, onWorldMatrixChange)
 		const unsubColorChange = world.onChange(traits.Color, onColorChange)
 
 		return () => {
 			unsubAdd()
 			unsubRemove()
+			unsubMatrixAdd()
 			unsubMatrixChange()
 			unsubColorChange()
 		}
 	})
 </script>
 
-{#each batchEntries as [parent, batch] (parent)}
-	<Portal id={parent}>
-		<T
-			is={batch.mesh}
-			dispose={false}
-			bvh={{ enabled: false }}
-		/>
-	</Portal>
-{/each}
+<T
+	is={batched.mesh}
+	dispose={false}
+	bvh={{ enabled: false }}
+/>

package/dist/components/Entities/Arrows/Arrows.svelte

@@ -1,14 +1,13 @@
 <script lang="ts">
 	import type { Entity } from 'koota'
 
-	import { T } from '@threlte/core'
-	import { Portal } from '@threlte/extras'
+	import { T, useThrelte } from '@threlte/core'
 
 	import type { InstancedArrows } from '../../../three/InstancedArrows/InstancedArrows'
 
 	import AxesHelper from '../../AxesHelper.svelte'
 	import { useEntityEvents } from '../hooks/useEntityEvents.svelte'
-	import { traits, useParentName, useTrait } from '../../../ecs'
+	import { traits, useTrait } from '../../../ecs'
 	import { useFocusedEntity, useSelectedEntity } from '../../../hooks/useSelection.svelte'
 	import { meshBoundsRaycast, raycast } from '../../../three/InstancedArrows/raycast'
 
@@ -19,7 +18,8 @@
 
 	let { entity, arrows }: Props = $props()
 
-	const parent = useParentName(() => entity)
+	const { invalidate } = useThrelte()
+	const worldMatrix = useTrait(() => entity, traits.WorldMatrix)
 	const invisible = useTrait(() => entity, traits.Invisible)
 	const showAxesHelper = useTrait(() => entity, traits.ShowAxesHelper)
 
@@ -35,32 +35,38 @@
 		}
 		return meshBoundsRaycast
 	})
+
+	$effect.pre(() => {
+		arrows.matrixAutoUpdate = false
+		if (!worldMatrix.current) return
+		arrows.matrix.copy(worldMatrix.current)
+		arrows.updateMatrixWorld()
+		invalidate()
+	})
 </script>
 
-<Portal id={parent.current}>
+<T
+	is={arrows}
+	name={entity}
+	{...events}
+	raycast={raycastFunction}
+	visible={invisible.current !== true}
+>
 	<T
-		is={arrows}
-		name={entity}
-		{...events}
-		raycast={raycastFunction}
-		visible={invisible.current !== true}
-	>
-		<T
-			is={arrows.headMesh}
-			bvh={{ enabled: false }}
-			raycast={() => null}
-		/>
-		<T
-			is={arrows.shaftMesh}
-			bvh={{ enabled: false }}
-			raycast={() => null}
+		is={arrows.headMesh}
+		bvh={{ enabled: false }}
+		raycast={() => null}
+	/>
+	<T
+		is={arrows.shaftMesh}
+		bvh={{ enabled: false }}
+		raycast={() => null}
+	/>
+	{#if showAxesHelper.current}
+		<AxesHelper
+			name={entity}
+			width={3}
+			length={0.1}
 		/>
-		{#if showAxesHelper.current}
-			<AxesHelper
-				name={entity}
-				width={3}
-				length={0.1}
-			/>
-		{/if}
-	</T>
-</Portal>
+	{/if}
+</T>

package/dist/components/Entities/Frame.svelte

@@ -14,14 +14,12 @@ Renders a Viam Frame object
 	import type { Snippet } from 'svelte'
 
 	import { T, useThrelte } from '@threlte/core'
-	import { Portal, PortalTarget } from '@threlte/extras'
 	import { Group, type Object3D } from 'three'
 
 	import { asColor } from '../../buffer'
 	import { colors, resourceColors } from '../../color'
-	import { traits, useParentName, useTrait } from '../../ecs'
+	import { traits, useTrait } from '../../ecs'
 	import { useResourceByName } from '../../hooks/useResourceByName.svelte'
-	import { composeLocalMatrix } from '../../transform'
 
 	import { useEntityEvents } from './hooks/useEntityEvents.svelte'
 	import Mesh from './Mesh.svelte'
@@ -37,12 +35,9 @@ Renders a Viam Frame object
 	const resourceByName = useResourceByName()
 
 	const name = useTrait(() => entity, traits.Name)
-	const parent = useParentName(() => entity)
 	const entityColors = useTrait(() => entity, traits.Colors)
 	const entityColor = useTrait(() => entity, traits.Color)
-	const matrix = useTrait(() => entity, traits.Matrix)
-	const editedMatrix = useTrait(() => entity, traits.EditedMatrix)
-	const liveMatrix = useTrait(() => entity, traits.LiveMatrix)
+	const worldMatrix = useTrait(() => entity, traits.WorldMatrix)
 	const center = useTrait(() => entity, traits.Center)
 	const invisible = useTrait(() => entity, traits.Invisible)
 
@@ -71,15 +66,9 @@ Renders a Viam Frame object
 	group.matrixAutoUpdate = false
 
 	$effect.pre(() => {
-		if (liveMatrix.current && matrix.current && editedMatrix.current) {
-			composeLocalMatrix(liveMatrix.current, matrix.current, editedMatrix.current, group.matrix)
-		} else if (editedMatrix.current) {
-			group.matrix.copy(editedMatrix.current)
-		} else if (matrix.current) {
-			group.matrix.copy(matrix.current)
-		} else {
-			return
-		}
+		if (!worldMatrix.current) return
+
+		group.matrix.copy(worldMatrix.current)
 
 		/**
 		 * Keep position/quaternion/scale in sync with matrix so TransformControls
@@ -94,22 +83,16 @@ Renders a Viam Frame object
 	})
 </script>
 
-<Portal id={parent.current}>
-	<T
-		is={group}
-		visible={invisible.current !== true}
-	>
-		<Mesh
-			{entity}
-			{color}
-			{...events}
-			center={center.current}
-		/>
-
-		{#if name.current}
-			<PortalTarget id={name.current} />
-		{/if}
-
-		{@render children?.({ ref: group })}
-	</T>
-</Portal>
+<T
+	is={group}
+	visible={invisible.current !== true}
+>
+	<Mesh
+		{entity}
+		{color}
+		{...events}
+		center={center.current}
+	/>
+
+	{@render children?.({ ref: group })}
+</T>

package/dist/components/Entities/GLTF.svelte

@@ -16,10 +16,10 @@
 	import type { Snippet } from 'svelte'
 
 	import { T, type Props as ThrelteProps } from '@threlte/core'
-	import { Portal, PortalTarget, type ThrelteGltf, useGltfAnimations } from '@threlte/extras'
+	import { type ThrelteGltf, useGltfAnimations } from '@threlte/extras'
 	import { Group, type Object3D } from 'three'
 
-	import { traits, useParentName, useTrait } from '../../ecs'
+	import { traits, useTrait } from '../../ecs'
 
 	import AxesHelper from '../AxesHelper.svelte'
 	import { useEntityEvents } from './hooks/useEntityEvents.svelte'
@@ -33,11 +33,8 @@
 
 	const { gltf, actions } = useGltfAnimations()
 
-	const name = useTrait(() => entity, traits.Name)
-	const parent = useParentName(() => entity)
-	const matrix = useTrait(() => entity, traits.Matrix)
+	const worldMatrix = useTrait(() => entity, traits.WorldMatrix)
 	const gltfTrait = useTrait(() => entity, traits.GLTF)
-	const scale = useTrait(() => entity, traits.Scale)
 	const invisible = useTrait(() => entity, traits.Invisible)
 	const showAxesHelper = useTrait(() => entity, traits.ShowAxesHelper)
 	const events = useEntityEvents(() => entity)
@@ -48,8 +45,8 @@
 	group.matrixAutoUpdate = false
 
 	$effect.pre(() => {
-		if (matrix.current) {
-			group.matrix.copy(matrix.current)
+		if (worldMatrix.current) {
+			group.matrix.copy(worldMatrix.current)
 			group.updateMatrixWorld()
 		}
 	})
@@ -85,30 +82,23 @@
 	})
 </script>
 
-<Portal id={parent.current}>
-	<T is={group}>
-		{#if showAxesHelper.current}
-			<AxesHelper
-				name={entity}
-				width={3}
-				length={0.1}
-			/>
-		{/if}
-		{#if $gltf}
-			<T
-				is={$gltf.scene as Object3D}
-				scale={[scale.current?.x ?? 1, scale.current?.y ?? 1, scale.current?.z ?? 1]}
-				name={entity}
-				visible={invisible.current !== true}
-				{...events}
-				{...rest}
-			>
-				{@render children?.()}
-
-				{#if name.current}
-					<PortalTarget id={name.current} />
-				{/if}
-			</T>
-		{/if}
-	</T>
-</Portal>
+<T is={group}>
+	{#if showAxesHelper.current}
+		<AxesHelper
+			name={entity}
+			width={3}
+			length={0.1}
+		/>
+	{/if}
+	{#if $gltf}
+		<T
+			is={$gltf.scene as Object3D}
+			name={entity}
+			visible={invisible.current !== true}
+			{...events}
+			{...rest}
+		>
+			{@render children?.()}
+		</T>
+	{/if}
+</T>

package/dist/components/Entities/Geometry.svelte

@@ -8,9 +8,9 @@ Renders a Viam Geometry object
 	import type { Snippet } from 'svelte'
 
 	import { T, useThrelte } from '@threlte/core'
-	import { Portal } from '@threlte/extras'
+	import { Group } from 'three'
 
-	import { traits, useParentName, useTrait } from '../../ecs'
+	import { traits, useTrait } from '../../ecs'
 	import { use3DModels } from '../../hooks/use3DModels.svelte'
 	import { useSettings } from '../../hooks/useSettings.svelte'
 	import { poseToObject3d } from '../../transform'
@@ -31,7 +31,7 @@ Renders a Viam Geometry object
 	const models = use3DModels()
 
 	const name = useTrait(() => entity, traits.Name)
-	const parent = useParentName(() => entity)
+	const worldMatrix = useTrait(() => entity, traits.WorldMatrix)
 	const center = useTrait(() => entity, traits.Center)
 	const invisible = useTrait(() => entity, traits.Invisible)
 
@@ -52,6 +52,16 @@ Renders a Viam Geometry object
 		return models.current[componentName]?.[id]?.clone() ?? undefined
 	})
 
+	const group = new Group()
+	group.matrixAutoUpdate = false
+
+	$effect.pre(() => {
+		if (!worldMatrix.current) return
+		group.matrix.copy(worldMatrix.current)
+		group.updateMatrixWorld()
+		invalidate()
+	})
+
 	$effect.pre(() => {
 		if (model && center.current) {
 			poseToObject3d(center.current, model)
@@ -62,24 +72,25 @@ Renders a Viam Geometry object
 	const events = useEntityEvents(() => entity)
 </script>
 
-<Portal id={parent.current}>
-	<T.Group visible={invisible.current !== true}>
-		{#if model}
-			<T
-				is={model}
-				name={entity}
-				{...events}
-			/>
-		{/if}
-
-		{#if settings.current.renderArmModels.includes('colliders') || !model}
-			<Mesh
-				{entity}
-				center={center.current}
-				{...events}
-			>
-				{@render children?.()}
-			</Mesh>
-		{/if}
-	</T.Group>
-</Portal>
+<T
+	is={group}
+	visible={invisible.current !== true}
+>
+	{#if model}
+		<T
+			is={model}
+			name={entity}
+			{...events}
+		/>
+	{/if}
+
+	{#if settings.current.renderArmModels.includes('colliders') || !model}
+		<Mesh
+			{entity}
+			center={center.current}
+			{...events}
+		>
+			{@render children?.()}
+		</Mesh>
+	{/if}
+</T>

package/dist/components/Entities/Line.svelte

@@ -3,11 +3,11 @@
 	import type { Snippet } from 'svelte'
 
 	import { T, useThrelte } from '@threlte/core'
-	import { meshBounds, Portal, PortalTarget } from '@threlte/extras'
+	import { meshBounds } from '@threlte/extras'
 	import { Line2, LineMaterial } from 'three/examples/jsm/Addons.js'
 
 	import { isVertexColors, STRIDE } from '../../buffer'
-	import { traits, useParentName, useTrait } from '../../ecs'
+	import { traits, useTrait } from '../../ecs'
 
 	import AxesHelper from '../AxesHelper.svelte'
 	import { useEntityEvents } from './hooks/useEntityEvents.svelte'
@@ -23,8 +23,7 @@
 
 	const { invalidate } = useThrelte()
 	const name = useTrait(() => entity, traits.Name)
-	const parent = useParentName(() => entity)
-	const matrix = useTrait(() => entity, traits.Matrix)
+	const worldMatrix = useTrait(() => entity, traits.WorldMatrix)
 	const color = useTrait(() => entity, traits.Color)
 	const colors = useTrait(() => entity, traits.Colors)
 	const dotColors = useTrait(() => entity, traits.DotColors)
@@ -65,47 +64,45 @@
 	mesh.matrixAutoUpdate = false
 
 	$effect.pre(() => {
-		if (matrix.current) {
-			mesh.matrix.copy(matrix.current)
+		if (worldMatrix.current) {
+			mesh.matrix.copy(worldMatrix.current)
 			mesh.updateMatrixWorld()
 			invalidate()
 		}
 	})
 </script>
 
-<Portal id={parent.current}>
+<T
+	is={mesh}
+	name={entity}
+	userData.name={name}
+	raycast={meshBounds}
+	renderOrder={renderOrder.current}
+	visible={invisible.current !== true}
+	{...events}
+>
+	<LineGeometry
+		positions={linePositions.current}
+		colors={lineColors}
+	/>
 	<T
-		is={mesh}
-		name={entity}
-		userData.name={name}
-		raycast={meshBounds}
-		renderOrder={renderOrder.current}
-		visible={invisible.current !== true}
-		{...events}
-	>
-		<LineGeometry
-			positions={linePositions.current}
-			colors={lineColors}
-		/>
-		<T
-			is={LineMaterial}
-			color={hasVertexColors ? [1, 1, 1] : lineColor}
-			vertexColors={hasVertexColors}
-			transparent={currentOpacity < 1}
-			depthWrite={currentOpacity === 1}
-			opacity={currentOpacity}
-			worldUnits={!screenSpace.current}
-			linewidth={(lineWidth.current ?? 5) * (screenSpace.current ? 1 : 0.001)}
-			depthTest={materialProps.current?.depthTest ?? true}
+		is={LineMaterial}
+		color={hasVertexColors ? [1, 1, 1] : lineColor}
+		vertexColors={hasVertexColors}
+		transparent={currentOpacity < 1}
+		depthWrite={currentOpacity === 1}
+		opacity={currentOpacity}
+		worldUnits={!screenSpace.current}
+		linewidth={(lineWidth.current ?? 5) * (screenSpace.current ? 1 : 0.001)}
+		depthTest={materialProps.current?.depthTest ?? true}
+	/>
+	{#if showAxesHelper.current}
+		<AxesHelper
+			name={entity}
+			width={3}
+			length={0.1}
 		/>
-		{#if showAxesHelper.current}
-			<AxesHelper
-				name={entity}
-				width={3}
-				length={0.1}
-			/>
-		{/if}
-	</T>
+	{/if}
 
 	{#if linePositions.current && dotSize.current}
 		<LineDots
@@ -116,9 +113,5 @@
 		/>
 	{/if}
 
-	{#if name.current}
-		<PortalTarget id={name.current} />
-	{/if}
-
 	{@render children?.()}
-</Portal>
+</T>

package/dist/components/Entities/Points.svelte

@@ -3,11 +3,10 @@
 	import type { Snippet } from 'svelte'
 
 	import { T, useTask, useThrelte } from '@threlte/core'
-	import { Portal } from '@threlte/extras'
 	import { OrthographicCamera, Points, PointsMaterial } from 'three'
 
 	import { asColor, isSingleColor } from '../../buffer'
-	import { traits, useParentName, useTrait } from '../../ecs'
+	import { traits, useTrait } from '../../ecs'
 	import { useSettings } from '../../hooks/useSettings.svelte'
 
 	import AxesHelper from '../AxesHelper.svelte'
@@ -23,8 +22,7 @@
 	const { camera } = useThrelte()
 	const settings = useSettings()
 
-	const parent = useParentName(() => entity)
-	const matrix = useTrait(() => entity, traits.Matrix)
+	const worldMatrix = useTrait(() => entity, traits.WorldMatrix)
 	const geometry = useTrait(() => entity, traits.BufferGeometry)
 	const entityColor = useTrait(() => entity, traits.Color)
 	const colors = useTrait(() => entity, traits.Colors)
@@ -98,8 +96,8 @@
 	})
 
 	$effect.pre(() => {
-		if (matrix.current) {
-			points.matrix.copy(matrix.current)
+		if (worldMatrix.current) {
+			points.matrix.copy(worldMatrix.current)
 			points.updateMatrixWorld()
 		}
 	})
@@ -126,25 +124,23 @@
 </script>
 
 {#if geometry.current}
-	<Portal id={parent.current}>
-		<T
-			is={points}
-			name={entity}
-			bvh={{ maxDepth: 40, maxLeafSize: 20 }}
-			visible={invisible.current !== true}
-			renderOrder={renderOrder.current}
-			{...events}
-		>
-			<T is={geometry.current} />
-			<T is={material} />
-			{#if showAxesHelper.current}
-				<AxesHelper
-					name={entity}
-					width={3}
-					length={0.1}
-				/>
-			{/if}
-			{@render children?.()}
-		</T>
-	</Portal>
+	<T
+		is={points}
+		name={entity}
+		bvh={{ maxDepth: 40, maxLeafSize: 20 }}
+		visible={invisible.current !== true}
+		renderOrder={renderOrder.current}
+		{...events}
+	>
+		<T is={geometry.current} />
+		<T is={material} />
+		{#if showAxesHelper.current}
+			<AxesHelper
+				name={entity}
+				width={3}
+				length={0.1}
+			/>
+		{/if}
+		{@render children?.()}
+	</T>
 {/if}

package/dist/components/Scene.svelte

@@ -51,7 +51,13 @@
 		enabled.set(settings.current.interactionMode === 'navigate')
 	})
 
-	bvh(raycaster, () => ({ helper: false }))
+	const bvhEnabled = $derived(
+		settings.current.renderSubEntityHoverDetail ||
+			settings.current.interactionMode === 'measure' ||
+			settings.current.interactionMode === 'select'
+	)
+
+	bvh(raycaster, () => ({ helper: false, enabled: bvhEnabled }))
 
 	const focusedObject = $derived(focusedObject3d.current)
 

package/dist/components/overlay/Details.svelte

@@ -2,7 +2,6 @@
 	module
 	lang="ts"
 >
-	import { ThemeUtils } from 'svelte-tweakpane-ui'
 	import { BufferAttribute, Euler, MathUtils, Quaternion } from 'three'
 
 	import { OrientationVector } from '../../three/OrientationVector'
@@ -280,12 +279,6 @@
 			2
 		)
 	}
-
-	ThemeUtils.setGlobalDefaultTheme({
-		...ThemeUtils.presets.light,
-		baseBackgroundColor: '#fbfbfc',
-		baseShadowColor: 'transparent',
-	})
 </script>
 
 {#snippet ImmutableField({

package/dist/draw.js

@@ -305,8 +305,9 @@ const drawModel = (world, model, api, { removable = true }) => {
             relations.ChildOf(root),
             api,
         ];
-        if (scale)
-            subEntityTraits.push(traits.Scale(scale));
+        if (scale) {
+            subEntityTraits.push(traits.Matrix(new Matrix4().makeScale(scale.x ?? 1, scale.y ?? 1, scale.z ?? 1)));
+        }
         if (metadata?.invisible)
             subEntityTraits.push(traits.Invisible);
         if (metadata?.showAxesHelper)

package/dist/ecs/traits.d.ts

@@ -143,11 +143,6 @@ export declare const GLTF: import("koota").Trait<() => {
     };
     animationName: string;
 }>;
-export declare const Scale: import("koota").Trait<{
-    x: number;
-    y: number;
-    z: number;
-}>;
 export declare const FramesAPI: import("koota").Trait<() => boolean>;
 export declare const GeometriesAPI: import("koota").Trait<() => boolean>;
 export declare const DrawAPI: import("koota").Trait<() => boolean>;

package/dist/ecs/traits.js

@@ -120,7 +120,6 @@ export const GLTF = trait(() => ({
     source: { url: '' },
     animationName: '',
 }));
-export const Scale = trait({ x: 1, y: 1, z: 1 });
 export const FramesAPI = trait(() => true);
 export const GeometriesAPI = trait(() => true);
 export const DrawAPI = trait(() => true);
@@ -231,7 +230,9 @@ export const updateGeometryTrait = (entity, geometry) => {
     }
     else if (geometry.geometryType.case === 'mesh') {
         if (entity.has(BufferGeometry)) {
+            const old = entity.get(BufferGeometry);
             entity.set(BufferGeometry, parsePlyInput(geometry.geometryType.value.mesh));
+            old?.dispose();
         }
         else {
             entity.remove(Box, Sphere, Capsule);

package/dist/ecs/worldMatrix.d.ts

@@ -1,8 +1,8 @@
 import { type World } from 'koota';
 /**
  * Wire up listeners that maintain `WorldMatrix` reactively. Subscribes to
- * add/change/remove on `Matrix`, `EditedMatrix`, `LiveMatrix`, `Scale`, and
- * `ChildOf`; enqueues affected entities and flushes on the next microtask.
+ * add/change/remove on `Matrix`, `EditedMatrix`, `LiveMatrix`, and `ChildOf`;
+ * enqueues affected entities and flushes on the next microtask.
  *
  * Returns an unsubscribe function. Plain function (not a rune hook) so tests
  * can drive the lifecycle without mounting Svelte.

package/dist/ecs/worldMatrix.js

@@ -1,9 +1,8 @@
 import {} from 'koota';
-import { Matrix4, Vector3 } from 'three';
+import { Matrix4 } from 'three';
 import { composeLocalMatrix } from '../transform';
 import { ChildOf } from './relations';
-import { EditedMatrix, LiveMatrix, Matrix, Scale, WorldMatrix } from './traits';
-const scaleVec3 = new Vector3();
+import { EditedMatrix, LiveMatrix, Matrix, WorldMatrix } from './traits';
 /**
  * Compute the entity's local-to-parent transform into `out`. Mirrors the
  * blend used by `Frame.svelte` so `WorldMatrix` agrees with the displayed
@@ -52,10 +51,6 @@ const recomputeWorldMatrix = (world, entity, cache) => {
     const hasLocal = toLocalMatrix(entity, out);
     if (!hasLocal)
         out.identity();
-    const scale = entity.get(Scale);
-    if (scale) {
-        out.scale(scaleVec3.copy(scale));
-    }
     const parent = entity.targetFor(ChildOf);
     if (parent && parent.isAlive()) {
         const parentWorld = recomputeWorldMatrix(world, parent, cache);
@@ -97,8 +92,8 @@ const flushDirty = (world, dirty) => {
 };
 /**
  * Wire up listeners that maintain `WorldMatrix` reactively. Subscribes to
- * add/change/remove on `Matrix`, `EditedMatrix`, `LiveMatrix`, `Scale`, and
- * `ChildOf`; enqueues affected entities and flushes on the next microtask.
+ * add/change/remove on `Matrix`, `EditedMatrix`, `LiveMatrix`, and `ChildOf`;
+ * enqueues affected entities and flushes on the next microtask.
  *
  * Returns an unsubscribe function. Plain function (not a rune hook) so tests
  * can drive the lifecycle without mounting Svelte.
@@ -122,8 +117,6 @@ export const installWorldMatrixListeners = (world) => {
         enqueue(entity);
     for (const entity of world.query(LiveMatrix))
         enqueue(entity);
-    for (const entity of world.query(Scale))
-        enqueue(entity);
     const unsubs = [
         world.onAdd(Matrix, enqueue),
         world.onChange(Matrix, enqueue),
@@ -134,9 +127,6 @@ export const installWorldMatrixListeners = (world) => {
         world.onAdd(LiveMatrix, enqueue),
         world.onChange(LiveMatrix, enqueue),
         world.onRemove(LiveMatrix, enqueue),
-        world.onAdd(Scale, enqueue),
-        world.onChange(Scale, enqueue),
-        world.onRemove(Scale, enqueue),
         world.onAdd(ChildOf, enqueue),
         world.onChange(ChildOf, enqueue),
         world.onRemove(ChildOf, enqueue),

package/dist/hooks/useDrawService.svelte.js

@@ -10,7 +10,7 @@ import { DrawService } from '../buf/draw/v1/service_connect';
 import { CreateRelationshipRequest, DeleteRelationshipRequest, EntityChangeType, StreamEntityChangesResponse, } from '../buf/draw/v1/service_pb';
 import { asFloat32Array, inMeters, STRIDE } from '../buffer';
 import { drawDrawing, drawTransform, updateDrawing, updateModel, updateTransform, uuidStringToBytes, } from '../draw';
-import { traits, useWorld } from '../ecs';
+import { hierarchy, traits, useWorld } from '../ecs';
 import { useCameraControls } from './useControls.svelte';
 import { useDrawConnectionConfig } from './useDrawConnectionConfig.svelte';
 import { useRelationships } from './useRelationships.svelte';
@@ -50,8 +50,7 @@ export function provideDrawService() {
         const entity = drawingEntities.get(uuidStr);
         if (!entity)
             return;
-        if (world.has(entity))
-            entity.destroy();
+        hierarchy.destroyEntityTree(world, entity);
         drawingEntities.delete(uuidStr);
     };
     const processEvent = (event) => {
@@ -334,13 +333,11 @@ export function provideDrawService() {
             connectionStatus = ConnectionStatus.DISCONNECTED;
             activeClient = undefined;
             for (const entity of transformEntities.values()) {
-                if (world.has(entity))
-                    entity.destroy();
+                hierarchy.destroyEntityTree(world, entity);
             }
             transformEntities.clear();
             for (const entity of drawingEntities.values()) {
-                if (world.has(entity))
-                    entity.destroy();
+                hierarchy.destroyEntityTree(world, entity);
             }
             drawingEntities.clear();
             relationships.clear();

package/dist/hooks/useGeometries.svelte.js

@@ -1,19 +1,20 @@
-import { ArmClient, BaseClient, CameraClient, GantryClient, GripperClient } from '@viamrobotics/sdk';
+import { ArmClient, BaseClient, CameraClient, GantryClient, GenericComponentClient, GripperClient, } from '@viamrobotics/sdk';
 import { createResourceClient, createResourceQuery, useResourceNames, } from '@viamrobotics/svelte-sdk';
 import {} from 'koota';
 import { getContext, setContext, untrack } from 'svelte';
-import { Color } from 'three';
+import { Color, Matrix4 } from 'three';
 import { resourceColors } from '../color';
 import { RefetchRates } from '../components/overlay/RefreshRate.svelte';
 import { hierarchy, traits, useWorld } from '../ecs';
 import { updateGeometryTrait } from '../ecs/traits';
-import { createPose, isPoseEqual } from '../transform';
+import { createPose, poseToMatrix } from '../transform';
 import { useEnvironment } from './useEnvironment.svelte';
 import { useLogs } from './useLogs.svelte';
 import { useResourceByName } from './useResourceByName.svelte';
 import { RefreshRates, useSettings } from './useSettings.svelte';
 const key = Symbol('geometries-context');
 const colorUtil = new Color();
+const tempMatrix = new Matrix4();
 export const provideGeometries = (partID) => {
     const environment = useEnvironment();
     const resources = useResourceByName();
@@ -24,6 +25,7 @@ export const provideGeometries = (partID) => {
     const cameras = useResourceNames(partID, 'camera');
     const grippers = useResourceNames(partID, 'gripper');
     const gantries = useResourceNames(partID, 'gantry');
+    const generics = useResourceNames(partID, 'generic');
     const settings = useSettings();
     const { refreshRates } = $derived(settings.current);
     const armClients = $derived(arms.current.map((arm) => createResourceClient(ArmClient, partID, () => arm.name)));
@@ -31,6 +33,9 @@ export const provideGeometries = (partID) => {
     const gripperClients = $derived(grippers.current.map((gripper) => createResourceClient(GripperClient, partID, () => gripper.name)));
     const cameraClients = $derived(cameras.current.map((camera) => createResourceClient(CameraClient, partID, () => camera.name)));
     const gantryClients = $derived(gantries.current.map((gantry) => createResourceClient(GantryClient, partID, () => gantry.name)));
+    const genericClients = $derived(generics.current
+        .filter((generic) => generic.type === 'component')
+        .map((generic) => createResourceClient(GenericComponentClient, partID, () => generic.name)));
     const interval = $derived(refreshRates[RefreshRates.poses]);
     const options = $derived({
         enabled: interval !== RefetchRates.OFF && environment.current.viewerMode === 'monitor',
@@ -41,12 +46,14 @@ export const provideGeometries = (partID) => {
     const gripperQueries = $derived(gripperClients.map((client) => [client.current?.name, createResourceQuery(client, 'getGeometries', () => options)]));
     const cameraQueries = $derived(cameraClients.map((client) => [client.current?.name, createResourceQuery(client, 'getGeometries', () => options)]));
     const gantryQueries = $derived(gantryClients.map((client) => [client.current?.name, createResourceQuery(client, 'getGeometries', () => options)]));
+    const genericQueries = $derived(genericClients.map((client) => [client.current?.name, createResourceQuery(client, 'getGeometries', () => options)]));
     const queries = $derived([
         ...armQueries,
         ...baseQueries,
         ...gripperQueries,
         ...cameraQueries,
         ...gantryQueries,
+        ...genericQueries,
     ]);
     $effect(() => {
         if (interval === RefetchRates.FPS_30 || interval === RefetchRates.FPS_60) {
@@ -91,8 +98,11 @@ export const provideGeometries = (partID) => {
                         const existing = entities.get(entityKey);
                         if (existing) {
                             hierarchy.setParent(existing, name);
-                            if (!isPoseEqual(existing.get(traits.Center), center)) {
-                                existing.set(traits.Center, center);
+                            poseToMatrix(center, tempMatrix);
+                            const matrix = existing.get(traits.Matrix);
+                            if (matrix && !matrix.equals(tempMatrix)) {
+                                matrix.copy(tempMatrix);
+                                existing.changed(traits.Matrix);
                             }
                             updateGeometryTrait(existing, geometry);
                             continue;
@@ -100,7 +110,7 @@ export const provideGeometries = (partID) => {
                         const entityTraits = [
                             ...hierarchy.parentTraits(name),
                             traits.Name(label),
-                            traits.Center(center),
+                            traits.Matrix(poseToMatrix(center, new Matrix4())),
                             traits.GeometriesAPI,
                             traits.Geometry(geometry),
                         ];

package/dist/hooks/usePartConfig.svelte.js

@@ -8,7 +8,7 @@ export const providePartConfig = (partID, params) => {
     const props = $derived(params());
     const config = $derived(props ? useEmbeddedPartConfig(props) : useStandalonePartConfig(partID));
     const getCurrent = () => {
-        return (config.current.toJson?.() ?? { components: [] });
+        return (config.current?.toJson?.() ?? { components: [] });
     };
     const current = $derived(getCurrent());
     const createFragmentFrame = (fragmentId, componentName) => {
@@ -313,10 +313,12 @@ const useStandalonePartConfig = (partID) => {
         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.
+            // previous part, and clear `current` so consumers don't keep
+            // rendering the old config's frames while the new part loads
+            // (offline parts may never load, leaving the old frames forever).
             isDirty = false;
             hasPendingSave = false;
+            current = undefined;
         }
         lastPartID = id;
         if (!networkPartConfig || isDirty) {

package/dist/plugins/bvh.svelte.js

@@ -17,11 +17,14 @@ export const bvh = (raycaster, options) => {
     injectPlugin('bvh', (args) => {
         const { props } = $derived(args);
         const opts = $derived(props.bvh ? { ...bvhOptions, ...props.bvh } : bvhOptions);
+        let computed = false;
+        let helper;
         $effect(() => {
             const { ref } = args;
-            if (opts.enabled === false) {
+            if (computed)
+                return;
+            if (opts.enabled === false)
                 return;
-            }
             if (isInstanceOf(ref, 'Points') &&
                 /**
                  * This check is necessary, there are some strange cases where points are coming in from PCDs without any position data
@@ -31,28 +34,12 @@ export const bvh = (raycaster, options) => {
                 ref.geometry.disposeBoundsTree = disposeBoundsTree;
                 ref.raycast = acceleratedRaycast;
                 computeBoundsTree.call(ref.geometry, { type: PointsBVH, ...opts });
-                const helper = opts.helper ? new BVHHelper(ref) : undefined;
-                if (helper)
-                    ref.add(helper);
-                return () => {
-                    ref.raycast = Points.prototype.raycast;
-                    if (helper)
-                        ref.remove(helper);
-                };
             }
             else if (isInstanceOf(ref, 'BatchedMesh')) {
                 /* @ts-expect-error Some sort of ambient type is conflicing here, likely from @threlte/extras */
                 ref.geometry.computeBoundsTree = computeBatchedBoundsTree;
                 ref.geometry.disposeBoundsTree = disposeBatchedBoundsTree;
                 ref.raycast = acceleratedRaycast;
-                const helper = opts.helper ? new BVHHelper(ref) : undefined;
-                if (helper)
-                    ref.add(helper);
-                return () => {
-                    ref.raycast = BatchedMesh.prototype.raycast;
-                    if (helper)
-                        ref.remove(helper);
-                };
             }
             else if (isInstanceOf(ref, 'Mesh') &&
                 /**
@@ -64,15 +51,39 @@ export const bvh = (raycaster, options) => {
                 ref.geometry.disposeBoundsTree = disposeBoundsTree;
                 ref.raycast = acceleratedRaycast;
                 computeBoundsTree.call(ref.geometry, opts);
-                const helper = opts.helper ? new BVHHelper(ref) : undefined;
-                if (helper)
-                    ref.add(helper);
-                return () => {
-                    ref.raycast = Mesh.prototype.raycast;
-                    if (helper)
-                        ref.remove(helper);
-                };
             }
+            else {
+                return;
+            }
+            if (opts.helper) {
+                helper = new BVHHelper(ref);
+                ref.add(helper);
+            }
+            computed = true;
+        });
+        $effect(() => {
+            const { ref } = args;
+            return () => {
+                if (!computed)
+                    return;
+                if (isInstanceOf(ref, 'Points')) {
+                    ref.geometry.disposeBoundsTree?.();
+                    ref.raycast = Points.prototype.raycast;
+                }
+                else if (isInstanceOf(ref, 'BatchedMesh')) {
+                    ref.geometry.disposeBoundsTree?.();
+                    ref.raycast = BatchedMesh.prototype.raycast;
+                }
+                else if (isInstanceOf(ref, 'Mesh')) {
+                    ref.geometry.disposeBoundsTree?.();
+                    ref.raycast = Mesh.prototype.raycast;
+                }
+                if (helper) {
+                    ref.remove(helper);
+                    helper = undefined;
+                }
+                computed = false;
+            };
         });
     });
 };

package/dist/three/OBBHelper.js

@@ -39,9 +39,12 @@ const expandBoxByTransformedBox = (box, childBox, matrix) => {
 };
 export class OBBHelper extends LineSegments2 {
     constructor(color = 0x000000, linewidth = 2) {
-        const edges = new EdgesGeometry(new BoxGeometry());
+        const boxGeometry = new BoxGeometry();
+        const edges = new EdgesGeometry(boxGeometry);
         const geometry = new LineSegmentsGeometry();
         geometry.setPositions(edges.getAttribute('position').array);
+        edges.dispose();
+        boxGeometry.dispose();
         const material = new LineMaterial({
             color,
             linewidth,

package/dist/three/arrow.js

@@ -20,6 +20,8 @@ export const createArrowGeometry = () => {
     // Place its center at y = shaftLength + headLength/2 so tip lands at y = shaftLength + headLength
     headGeo.translate(0, tailLength + headLength * 0.5, 0);
     const merged = mergeGeometries([tailGeometry, headGeo], true);
+    tailGeometry.dispose();
+    headGeo.dispose();
     merged.computeVertexNormals();
     merged.computeBoundingBox();
     merged.computeBoundingSphere();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@viamrobotics/motion-tools",
-  "version": "1.26.2",
+  "version": "1.27.1",
   "description": "Motion visualization with Viam",
   "license": "Apache-2.0",
   "type": "module",
@@ -64,7 +64,7 @@
     "prettier-plugin-tailwindcss": "0.6.14",
     "publint": "0.3.12",
     "runed": "0.31.1",
-    "svelte": "5.55.0",
+    "svelte": "5.55.7",
     "svelte-check": "4.4.5",
     "svelte-tweakpane-ui": "^1.5.16",
     "svelte-virtuallists": "1.4.2",