@viamrobotics/motion-tools 1.24.0 → 1.25.1

package/dist/FrameConfigUpdater.svelte.js

@@ -1,4 +1,4 @@
-import { traits } from './ecs';
+import { hierarchy, traits } from './ecs';
 export class FrameConfigUpdater {
     updateFrame;
     removeFrame;
@@ -19,7 +19,7 @@ export class FrameConfigUpdater {
             change.z = z;
         entity.set(traits.EditedPose, change);
         const name = entity.get(traits.Name);
-        const parent = entity.get(traits.Parent) ?? 'world';
+        const parent = hierarchy.getParentName(entity) ?? 'world';
         const updatedPose = entity.get(traits.EditedPose);
         if (name && updatedPose) {
             this.updateFrame(name, parent, updatedPose);
@@ -41,7 +41,7 @@ export class FrameConfigUpdater {
             change.theta = theta;
         entity.set(traits.EditedPose, change);
         const name = entity.get(traits.Name);
-        const parent = entity.get(traits.Parent) ?? 'world';
+        const parent = hierarchy.getParentName(entity) ?? 'world';
         const updatedPose = entity.get(traits.EditedPose);
         if (name && updatedPose) {
             this.updateFrame(name, parent, updatedPose);
@@ -49,7 +49,7 @@ export class FrameConfigUpdater {
     };
     updateGeometry = (entity, geometry) => {
         const name = entity.get(traits.Name);
-        const parent = entity.get(traits.Parent) ?? 'world';
+        const parent = hierarchy.getParentName(entity) ?? 'world';
         const pose = entity.get(traits.EditedPose);
         if (geometry?.type === 'box') {
             const { x, y, z } = geometry;
@@ -109,7 +109,7 @@ export class FrameConfigUpdater {
     };
     setGeometryType = (entity, type) => {
         const name = entity.get(traits.Name);
-        const parent = entity.get(traits.Parent) ?? 'world';
+        const parent = hierarchy.getParentName(entity) ?? 'world';
         const pose = entity.get(traits.EditedPose);
         if (!name || !pose)
             return;

package/dist/components/BatchedArrows.svelte

@@ -5,7 +5,7 @@
 	import { Portal } from '@threlte/extras'
 	import { Color, Vector3 } from 'three'
 
-	import { traits, useWorld } from '../ecs'
+	import { hierarchy, traits, useWorld } from '../ecs'
 	import { BatchedArrow } from '../three/BatchedArrow'
 
 	const arrowBatchMap = $state<Record<string, BatchedArrow>>({
@@ -20,7 +20,7 @@
 	const color = new Color()
 
 	const onAdd = (entity: Entity) => {
-		const parent = entity.get(traits.Parent) ?? 'world'
+		const parent = hierarchy.getParentName(entity) ?? 'world'
 
 		arrowBatchMap[parent] ??= new BatchedArrow()
 		const batched = arrowBatchMap[parent]
@@ -40,7 +40,7 @@
 	const onPoseChange = (entity: Entity) => {
 		if (!entity.has(traits.Arrow)) return
 
-		const parent = entity.get(traits.Parent) ?? 'world'
+		const parent = hierarchy.getParentName(entity) ?? 'world'
 		const batch = arrowBatchMap[parent]
 		const instanceID = entity.get(traits.Instance)?.instanceID
 		const pose = entity.get(traits.Pose)
@@ -57,7 +57,7 @@
 	const onColorChange = (entity: Entity) => {
 		if (!entity.has(traits.Arrow)) return
 
-		const parent = entity.get(traits.Parent) ?? 'world'
+		const parent = hierarchy.getParentName(entity) ?? 'world'
 		const batch = arrowBatchMap[parent]
 		const instanceID = entity.get(traits.Instance)?.instanceID
 		const colorRGB = entity.get(traits.Color)

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

@@ -8,7 +8,7 @@
 
 	import AxesHelper from '../../AxesHelper.svelte'
 	import { useEntityEvents } from '../hooks/useEntityEvents.svelte'
-	import { traits, useTrait } from '../../../ecs'
+	import { traits, useParentName, useTrait } from '../../../ecs'
 	import { useFocusedEntity, useSelectedEntity } from '../../../hooks/useSelection.svelte'
 	import { meshBoundsRaycast, raycast } from '../../../three/InstancedArrows/raycast'
 
@@ -19,7 +19,7 @@
 
 	let { entity, arrows }: Props = $props()
 
-	const parent = useTrait(() => entity, traits.Parent)
+	const parent = useParentName(() => entity)
 	const invisible = useTrait(() => entity, traits.Invisible)
 	const showAxesHelper = useTrait(() => entity, traits.ShowAxesHelper)
 

package/dist/components/Entities/Capsule.svelte

@@ -0,0 +1,137 @@
+<!--
+@component
+
+A compound capsule via a shared open-ended unit cylinder and two
+hemispheres, each scaled per `r` and `l`, so dimension changes update
+transforms only and cause no geometry rebuild.
+
+Viam's capsule `l` is the *total* length, including the rounded caps, so the 
+midsection has length `l - 2r`.
+-->
+<script
+	module
+	lang="ts"
+>
+	import { CylinderGeometry, EdgesGeometry, SphereGeometry } from 'three'
+
+	const unitCylinder = new CylinderGeometry(1, 1, 1, 16, 1, true)
+	unitCylinder.rotateX(Math.PI / 2)
+
+	/**
+	 * Hemisphere with rounded part toward +Z and an open boundary on the XY plane.
+	 * 6 height segments matches the existing sphere's density (`Mesh.svelte` uses `SphereGeometry(1, 16, 12)`).
+	 */
+	const unitHemisphere = new SphereGeometry(1, 16, 6, 0, Math.PI * 2, 0, Math.PI / 2)
+	unitHemisphere.rotateX(Math.PI / 2)
+
+	const unitCylinderEdges = new EdgesGeometry(unitCylinder, 0)
+	const unitHemisphereEdges = new EdgesGeometry(unitHemisphere, 0)
+</script>
+
+<script lang="ts">
+	import type { ColorRepresentation } from 'three'
+
+	import { T, useThrelte } from '@threlte/core'
+	import { LineBasicMaterial, MeshToonMaterial } from 'three'
+
+	import { darkenColor } from '../../color'
+
+	interface Props {
+		r: number
+		l: number
+		color: ColorRepresentation
+		opacity?: number
+		depthTest?: boolean
+	}
+
+	let { r, l, color, opacity = 1, depthTest = true }: Props = $props()
+
+	const { invalidate } = useThrelte()
+	const material = new MeshToonMaterial()
+	const lineMaterial = new LineBasicMaterial()
+
+	$effect(() => {
+		material.color.set(color)
+		lineMaterial.color.set(darkenColor(color, 10))
+		invalidate()
+	})
+
+	$effect(() => {
+		const isTransparent = opacity < 1
+		material.opacity = opacity
+		material.depthWrite = opacity === 1
+		material.depthTest = depthTest
+		lineMaterial.depthTest = depthTest
+		if (material.transparent !== isTransparent) {
+			material.transparent = isTransparent
+			material.needsUpdate = true
+		}
+		invalidate()
+	})
+
+	const midsection = $derived(Math.max(0, l - 2 * r))
+	const halfMid = $derived(midsection / 2)
+</script>
+
+{#if midsection > 0}
+	<T.Mesh scale={[r, r, midsection]}>
+		<T
+			is={unitCylinder}
+			dispose={false}
+		/>
+		<T is={material} />
+		<T.LineSegments
+			raycast={() => null}
+			bvh={{ enabled: false }}
+		>
+			<T
+				is={unitCylinderEdges}
+				dispose={false}
+			/>
+			<T is={lineMaterial} />
+		</T.LineSegments>
+	</T.Mesh>
+{/if}
+
+<T.Mesh
+	position={[0, 0, halfMid]}
+	scale={r}
+>
+	<T
+		is={unitHemisphere}
+		dispose={false}
+	/>
+	<T is={material} />
+	<T.LineSegments
+		raycast={() => null}
+		bvh={{ enabled: false }}
+	>
+		<T
+			is={unitHemisphereEdges}
+			dispose={false}
+		/>
+		<T is={lineMaterial} />
+	</T.LineSegments>
+</T.Mesh>
+
+<T.Mesh
+	position={[0, 0, -halfMid]}
+	rotation={[Math.PI, 0, 0]}
+	scale={[r, r, r]}
+>
+	<T
+		is={unitHemisphere}
+		dispose={false}
+	/>
+	<T is={material} />
+	<T.LineSegments
+		raycast={() => null}
+		bvh={{ enabled: false }}
+	>
+		<T
+			is={unitHemisphereEdges}
+			dispose={false}
+		/>
+		<T is={lineMaterial} />
+	</T.LineSegments>
+</T.Mesh>

package/dist/components/Entities/Capsule.svelte.d.ts

@@ -0,0 +1,19 @@
+import type { ColorRepresentation } from 'three';
+interface Props {
+    r: number;
+    l: number;
+    color: ColorRepresentation;
+    opacity?: number;
+    depthTest?: boolean;
+}
+/**
+ * A compound capsule via a shared open-ended unit cylinder and two
+ * hemispheres, each scaled per `r` and `l`, so dimension changes update
+ * transforms only and cause no geometry rebuild.
+ *
+ * Viam's capsule `l` is the *total* length, including the rounded caps, so the
+ * midsection has length `l - 2r`.
+ */
+declare const Capsule: import("svelte").Component<Props, {}, "">;
+type Capsule = ReturnType<typeof Capsule>;
+export default Capsule;

package/dist/components/Entities/Frame.svelte

@@ -20,7 +20,7 @@ Renders a Viam Frame object
 
 	import { asColor } from '../../buffer'
 	import { colors, resourceColors } from '../../color'
-	import { traits, useTrait } from '../../ecs'
+	import { traits, useParentName, useTrait } from '../../ecs'
 	import { useResourceByName } from '../../hooks/useResourceByName.svelte'
 	import { poseToObject3d } from '../../transform'
 
@@ -39,7 +39,7 @@ Renders a Viam Frame object
 	const resourceByName = useResourceByName()
 
 	const name = useTrait(() => entity, traits.Name)
-	const parent = useTrait(() => entity, traits.Parent)
+	const parent = useParentName(() => entity)
 	const entityColors = useTrait(() => entity, traits.Colors)
 	const entityColor = useTrait(() => entity, traits.Color)
 	const entityPose = useTrait(() => entity, traits.Pose)

package/dist/components/Entities/GLTF.svelte

@@ -19,7 +19,7 @@
 	import { Portal, PortalTarget, type ThrelteGltf, useGltfAnimations } from '@threlte/extras'
 	import { Group, type Object3D } from 'three'
 
-	import { traits, useTrait } from '../../ecs'
+	import { traits, useParentName, useTrait } from '../../ecs'
 	import { poseToObject3d } from '../../transform'
 
 	import AxesHelper from '../AxesHelper.svelte'
@@ -35,7 +35,7 @@
 	const { gltf, actions } = useGltfAnimations()
 
 	const name = useTrait(() => entity, traits.Name)
-	const parent = useTrait(() => entity, traits.Parent)
+	const parent = useParentName(() => entity)
 	const pose = useTrait(() => entity, traits.Pose)
 	const gltfTrait = useTrait(() => entity, traits.GLTF)
 	const scale = useTrait(() => entity, traits.Scale)

package/dist/components/Entities/Geometry.svelte

@@ -10,7 +10,7 @@ Renders a Viam Geometry object
 	import { T, useThrelte } from '@threlte/core'
 	import { Portal } from '@threlte/extras'
 
-	import { traits, useTrait } from '../../ecs'
+	import { traits, useParentName, 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 = useTrait(() => entity, traits.Parent)
+	const parent = useParentName(() => entity)
 	const center = useTrait(() => entity, traits.Center)
 	const invisible = useTrait(() => entity, traits.Invisible)
 

package/dist/components/Entities/Line.svelte

@@ -7,7 +7,7 @@
 	import { Line2, LineMaterial } from 'three/examples/jsm/Addons.js'
 
 	import { isVertexColors, STRIDE } from '../../buffer'
-	import { traits, useTrait } from '../../ecs'
+	import { traits, useParentName, useTrait } from '../../ecs'
 	import { poseToObject3d } from '../../transform'
 
 	import AxesHelper from '../AxesHelper.svelte'
@@ -24,7 +24,7 @@
 
 	const { invalidate } = useThrelte()
 	const name = useTrait(() => entity, traits.Name)
-	const parent = useTrait(() => entity, traits.Parent)
+	const parent = useParentName(() => entity)
 	const pose = useTrait(() => entity, traits.Pose)
 	const color = useTrait(() => entity, traits.Color)
 	const colors = useTrait(() => entity, traits.Colors)

package/dist/components/Entities/Mesh.svelte

@@ -1,20 +1,36 @@
+<script
+	module
+	lang="ts"
+>
+	import { BoxGeometry, EdgesGeometry, SphereGeometry } from 'three'
+
+	/**
+	 * Shared unit geometries — every mesh references these and sets
+	 * dimensions through `mesh.scale`, so resizing never rebuilds GPU buffers.
+	 */
+	const unitBox = new BoxGeometry(1, 1, 1)
+	const unitSphere = new SphereGeometry(1, 16, 12)
+	const unitBoxEdges = new EdgesGeometry(unitBox, 0)
+	const unitSphereEdges = new EdgesGeometry(unitSphere, 0)
+</script>
+
 <script lang="ts">
 	import type { Pose } from '@viamrobotics/sdk'
 	import type { Entity } from 'koota'
 
 	import { T, type Props as ThrelteProps, useThrelte } from '@threlte/core'
 	import { type Snippet } from 'svelte'
-	import { BufferGeometry, Color, DoubleSide, FrontSide, Material, Mesh } from 'three'
+	import { Color, DoubleSide, FrontSide, Group, Material, Mesh } from 'three'
 
 	import { asColor } from '../../buffer'
 	import { colors, darkenColor } from '../../color'
 	import { traits, useTrait } from '../../ecs'
-	import { CapsuleGeometry } from '../../three/CapsuleGeometry'
 	import { poseToObject3d } from '../../transform'
 
 	import AxesHelper from '../AxesHelper.svelte'
+	import Capsule from './Capsule.svelte'
 
-	interface Props extends ThrelteProps<Mesh> {
+	interface Props extends Omit<ThrelteProps<Mesh>, 'ref'> {
 		entity: Entity
 		color?: string
 		center?: Pose
@@ -56,6 +72,8 @@
 
 	const currentOpacity = $derived(opacity.current ?? 0.7)
 
+	const isCapsule = $derived(capsule.current !== undefined)
+
 	let material = $state.raw<Material>(new Material())
 	$effect(() => {
 		const isTransparent = currentOpacity < 1
@@ -69,83 +87,118 @@
 	})
 
 	const mesh = new Mesh()
-	$effect.pre(() => {
+	const group = new Group()
+
+	$effect(() => {
+		const target = isCapsule ? group : mesh
 		if (center) {
-			poseToObject3d(center, mesh)
+			poseToObject3d(center, target)
 			invalidate()
 		}
 	})
 
-	let geo = $state.raw<BufferGeometry>()
-	$effect.pre(() => {
-		if (!box.current && !sphere.current && !capsule.current && !bufferGeometry.current) {
-			geo = undefined
+	$effect(() => {
+		if (box.current) {
+			const { x, y, z } = box.current
+			mesh.scale.set(x * 0.001, y * 0.001, z * 0.001)
+		} else if (sphere.current) {
+			mesh.scale.setScalar((sphere.current.r ?? 0) * 0.001)
+		} else {
+			mesh.scale.set(1, 1, 1)
 		}
+		invalidate()
 	})
-
-	const oncreate = (bufferGeometry: BufferGeometry) => {
-		geo = bufferGeometry
-	}
 </script>
 
-<T
-	is={mesh}
-	name={entity}
-	userData.name={name}
-	renderOrder={renderOrder.current}
-	{...rest}
->
-	{#if box.current}
-		{@const { x, y, z } = box.current ?? { x: 0, y: 0, z: 0 }}
-		<T.BoxGeometry
-			args={[x * 0.001, y * 0.001, z * 0.001]}
-			{oncreate}
-		/>
-	{:else if sphere.current}
-		{@const { r } = sphere.current ?? { r: 0 }}
-		<T.SphereGeometry
-			args={[r * 0.001]}
-			{oncreate}
-		/>
-	{:else if capsule.current}
-		{@const { r, l } = capsule.current ?? { r: 0, l: 0 }}
-		<T
-			is={CapsuleGeometry}
-			args={[r * 0.001, l * 0.001]}
-			{oncreate}
+{#if isCapsule}
+	{@const { r, l } = capsule.current ?? { r: 0, l: 0 }}
+	<T
+		is={group}
+		name={entity}
+		userData.name={name}
+		renderOrder={renderOrder.current}
+		{...rest}
+	>
+		<Capsule
+			r={r * 0.001}
+			l={l * 0.001}
+			{color}
+			opacity={currentOpacity}
+			depthTest={materialProps.current?.depthTest ?? true}
 		/>
-	{:else if bufferGeometry.current}
-		<T
-			is={bufferGeometry.current}
-			{oncreate}
+
+		{@render children?.()}
+	</T>
+{:else}
+	<T
+		is={mesh}
+		name={entity}
+		userData.name={name}
+		renderOrder={renderOrder.current}
+		{...rest}
+	>
+		{#if box.current}
+			<T
+				is={unitBox}
+				dispose={false}
+			/>
+			<T.LineSegments
+				raycast={() => null}
+				bvh={{ enabled: false }}
+			>
+				<T
+					is={unitBoxEdges}
+					dispose={false}
+				/>
+				<T.LineBasicMaterial color={darkenColor(color, 10)} />
+			</T.LineSegments>
+		{:else if sphere.current}
+			<T
+				is={unitSphere}
+				dispose={false}
+			/>
+			<T.LineSegments
+				raycast={() => null}
+				bvh={{ enabled: false }}
+			>
+				<T
+					is={unitSphereEdges}
+					dispose={false}
+				/>
+				<T.LineBasicMaterial color={darkenColor(color, 10)} />
+			</T.LineSegments>
+		{:else if bufferGeometry.current}
+			<T is={bufferGeometry.current}>
+				{#snippet children({ ref: geo })}
+					<!--
+						TODO(mp) currently some bufferGeometries are coming in empty,
+						this is a quick fix but this should be handled upstream
+					-->
+					{#if geo.getAttribute('position').array.length > 0}
+						<T.LineSegments
+							raycast={() => null}
+							bvh={{ enabled: false }}
+						>
+							<T.EdgesGeometry args={[geo, 0]} />
+							<T.LineBasicMaterial color={darkenColor(color, 10)} />
+						</T.LineSegments>
+					{/if}
+				{/snippet}
+			</T>
+		{/if}
+
+		<T.MeshToonMaterial
+			{color}
+			side={bufferGeometry.current ? DoubleSide : FrontSide}
+			depthTest={materialProps.current?.depthTest ?? true}
+			oncreate={(m) => {
+				material = m
+			}}
 		/>
-	{/if}
-
-	<T.MeshToonMaterial
-		{color}
-		side={bufferGeometry.current ? DoubleSide : FrontSide}
-		depthTest={materialProps.current?.depthTest ?? true}
-		oncreate={(m) => {
-			material = m
-		}}
-	/>
 
-	<!-- 
-		TODO(mp) currently some bufferGeometries are coming in empty, 
-		this is a quick fix but this should be handled upstream
-	-->
-	{#if geo && geo.getAttribute('position').array.length > 0}
-		<T.LineSegments
-			raycast={() => null}
-			bvh={{ enabled: false }}
-		>
-			<T.EdgesGeometry args={[geo, 0]} />
-			<T.LineBasicMaterial color={darkenColor(color, 10)} />
-		</T.LineSegments>
-	{/if}
-
-	{@render children?.()}
-</T>
+		{@render children?.()}
+	</T>
+{/if}
 
 {#if showAxesHelper.current}
 	<AxesHelper

package/dist/components/Entities/Points.svelte

@@ -7,7 +7,7 @@
 	import { OrthographicCamera, Points, PointsMaterial } from 'three'
 
 	import { asColor, isSingleColor } from '../../buffer'
-	import { traits, useTrait } from '../../ecs'
+	import { traits, useParentName, useTrait } from '../../ecs'
 	import { useSettings } from '../../hooks/useSettings.svelte'
 	import { poseToObject3d } from '../../transform'
 
@@ -24,7 +24,7 @@
 	const { camera } = useThrelte()
 	const settings = useSettings()
 
-	const parent = useTrait(() => entity, traits.Parent)
+	const parent = useParentName(() => entity)
 	const pose = useTrait(() => entity, traits.Pose)
 	const geometry = useTrait(() => entity, traits.BufferGeometry)
 	const entityColor = useTrait(() => entity, traits.Color)

package/dist/components/Entities/Pose.svelte

@@ -3,7 +3,7 @@
 	import type { Entity } from 'koota'
 	import type { Snippet } from 'svelte'
 
-	import { traits, useTrait } from '../../ecs'
+	import { traits, useParentName, useTrait } from '../../ecs'
 	import { usePartConfig } from '../../hooks/usePartConfig.svelte'
 	import { usePose } from '../../hooks/usePose.svelte'
 	import { composeRenderedPose } from '../../transform'
@@ -16,7 +16,7 @@
 
 	const partConfig = usePartConfig()
 	const name = useTrait(() => entity, traits.Name)
-	const parent = useTrait(() => entity, traits.Parent)
+	const parent = useParentName(() => entity)
 	const editedPose = useTrait(() => entity, traits.EditedPose)
 	const entityPose = useTrait(() => entity, traits.Pose)
 

package/dist/components/SceneProviders.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte'
 
+	import { provideHierarchy } from '../ecs'
 	import { provide3DModels } from '../hooks/use3DModels.svelte'
 	import { provideArmClient } from '../hooks/useArmClient.svelte'
 	import { provideArmKinematics } from '../hooks/useArmKinematics.svelte'
@@ -41,6 +42,7 @@
 	provideTransformControls()
 	provideLogs()
 
+	provideHierarchy()
 	provideOrigin()
 	provideDrawAPI()
 	provideRelationships()

package/dist/components/Snapshot.svelte

@@ -23,7 +23,7 @@ Renders a Snapshot protobuf by spawning its transforms and drawings as entities
 	import { useCameraControls } from '../hooks/useControls.svelte'
 	import { useRelationships } from '../hooks/useRelationships.svelte'
 	import { useSettings } from '../hooks/useSettings.svelte'
-	import { applySceneMetadata, type SnapshotEntity, spawnSnapshotEntities } from '../snapshot'
+	import { applySceneMetadata, reconcileSnapshotEntities, type SnapshotEntity } from '../snapshot'
 
 	interface Props {
 		snapshot: SnapshotProto
@@ -36,17 +36,24 @@ Renders a Snapshot protobuf by spawning its transforms and drawings as entities
 	const cameraControls = useCameraControls()
 	const relationships = useRelationships()
 
-	let entities: SnapshotEntity[] = []
+	let entitiesByUuid = new Map<string, SnapshotEntity>()
+	let unkeyedEntities: SnapshotEntity[] = []
 
 	$effect(() => {
-		world.id.toString()
-		snapshot.uuid.toString()
+		void snapshot
 
 		untrack(() => {
-			entities = spawnSnapshotEntities(world, snapshot)
-			for (const spawned of entities) {
-				relationships.apply(spawned.entity, spawned.relationships)
-				const uuid = spawned.entity.get(traits.UUID)
+			for (const entry of unkeyedEntities) {
+				if (world.has(entry.entity)) entry.entity.destroy()
+			}
+
+			const result = reconcileSnapshotEntities(world, snapshot, entitiesByUuid)
+			entitiesByUuid = result.current
+			unkeyedEntities = result.unkeyed
+
+			for (const entry of [...result.spawned, ...result.updated]) {
+				relationships.apply(entry.entity, entry.relationships)
+				const uuid = entry.entity.get(traits.UUID)
 				if (uuid) relationships.flush(uuid)
 			}
 		})
@@ -83,8 +90,11 @@ Renders a Snapshot protobuf by spawning its transforms and drawings as entities
 	})
 
 	onDestroy(() => {
-		for (const spawned of entities) {
-			if (world.has(spawned.entity)) spawned.entity.destroy()
+		for (const entry of entitiesByUuid.values()) {
+			if (world.has(entry.entity)) entry.entity.destroy()
+		}
+		for (const entry of unkeyedEntities) {
+			if (world.has(entry.entity)) entry.entity.destroy()
 		}
 	})
 </script>