@viamrobotics/motion-tools 1.19.1 → 1.22.0

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

@@ -43,12 +43,12 @@
 		name={entity}
 		{...events}
 		raycast={raycastFunction}
+		visible={invisible.current !== true}
 	>
 		<T
 			is={arrows.headMesh}
 			bvh={{ enabled: false }}
 			raycast={() => null}
-			visible={invisible.current !== true}
 		/>
 		<T
 			is={arrows.shaftMesh}

package/dist/components/Entities/Points.svelte

@@ -33,6 +33,8 @@
 	const opacity = useTrait(() => entity, traits.Opacity)
 	const invisible = useTrait(() => entity, traits.Invisible)
 	const showAxesHelper = useTrait(() => entity, traits.ShowAxesHelper)
+	const renderOrder = useTrait(() => entity, traits.RenderOrder)
+	const materialProps = useTrait(() => entity, traits.Material)
 
 	const pointSize = $derived(
 		entityPointSize.current ? entityPointSize.current * 0.001 : settings.current.pointSize
@@ -61,41 +63,38 @@
 	})
 
 	/**
-	 * Points transparancy is very costly for the GPU, so we turn it on conservatively
+	 * Points transparency is very costly for the GPU, so we turn it on conservatively.
+	 * Uniform opacity (entity trait) and per-vertex RGBA alpha are both considered here
+	 * to avoid the two sources conflicting with each other.
 	 */
 	$effect.pre(() => {
-		if (opacity.current !== undefined && opacity.current < 1) {
-			material.transparent = true
-			material.opacity = opacity.current
-
-			return () => {
-				material.transparent = false
-				material.opacity = 1
-			}
-		}
-	})
-
-	$effect.pre(() => {
-		const colors = geometry.current?.getAttribute('color')
+		const vertexColors = geometry.current?.getAttribute('color')
 		const positions = geometry.current?.getAttribute('position')
 
-		material.vertexColors = colors !== undefined
+		material.vertexColors = vertexColors !== undefined
 
-		if (colors && positions) {
-			const hasAlphaChannel = positions.array.length / colors.array.length === 0.75
+		const hasUniformOpacity = opacity.current !== undefined && opacity.current < 1
+		material.opacity = hasUniformOpacity ? opacity.current! : 1
 
-			let transparent = false
+		let hasVertexAlpha = false
+		if (vertexColors && positions) {
+			const hasAlphaChannel = positions.array.length / vertexColors.array.length === 0.75
 			if (hasAlphaChannel) {
-				for (let i = 3, l = colors.array.length; i < l; i += 4) {
-					if (colors.array[i] < 1) {
-						transparent = true
+				for (let i = 3, l = vertexColors.array.length; i < l; i += 4) {
+					if (vertexColors.array[i] < 1) {
+						hasVertexAlpha = true
 						break
 					}
 				}
 			}
-
-			material.transparent = transparent
 		}
+
+		material.transparent = hasUniformOpacity || hasVertexAlpha
+	})
+
+	$effect.pre(() => {
+		material.depthTest = materialProps.current?.depthTest ?? true
+		material.depthWrite = materialProps.current?.depthWrite ?? true
 	})
 
 	$effect.pre(() => {
@@ -132,6 +131,7 @@
 			name={entity}
 			bvh={{ maxDepth: 40, maxLeafSize: 20 }}
 			visible={invisible.current !== true}
+			renderOrder={renderOrder.current}
 			{...events}
 		>
 			<T is={geometry.current} />

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/Entities/hooks/useEntityEvents.svelte.js

@@ -9,7 +9,10 @@ export const useEntityEvents = (entity) => {
     const selectedEntity = useSelectedEntity();
     const focusedEntity = useFocusedEntity();
     const cursor = useCursor();
+    const invisible = useTrait(entity, traits.Invisible);
     const onpointerenter = (event) => {
+        if (invisible.current)
+            return;
         event.stopPropagation();
         cursor.onPointerEnter();
         const currentEntity = entity();
@@ -31,6 +34,8 @@ export const useEntityEvents = (entity) => {
         }
     };
     const onpointermove = (event) => {
+        if (invisible.current)
+            return;
         event.stopPropagation();
         const currentEntity = entity();
         if (currentEntity?.has(traits.Hovered)) {
@@ -77,24 +82,36 @@ export const useEntityEvents = (entity) => {
         }
     };
     const ondblclick = (event) => {
+        if (invisible.current)
+            return;
         event.stopPropagation();
         const currentEntity = entity();
         focusedEntity.set(currentEntity, event.instanceId ?? event.batchId);
     };
     const onpointerdown = (event) => {
+        if (invisible.current)
+            return;
         down.copy(event.pointer);
     };
     const onclick = (event) => {
+        if (invisible.current)
+            return;
         event.stopPropagation();
         if (down.distanceToSquared(event.pointer) < 0.1) {
             const currentEntity = entity();
             selectedEntity.set(currentEntity, event.instanceId ?? event.batchId);
         }
     };
-    const invisible = useTrait(entity, traits.Invisible);
     $effect(() => {
         if (invisible.current) {
             cursor.onPointerLeave();
+            const currentEntity = entity();
+            if (currentEntity?.has(traits.Hovered)) {
+                currentEntity.remove(traits.Hovered);
+            }
+            if (currentEntity?.has(traits.InstancedPose)) {
+                currentEntity.remove(traits.InstancedPose);
+            }
         }
     });
     return {

package/dist/components/FileDrop/FileDrop.svelte

@@ -8,6 +8,7 @@
 	import { traits } from '../../ecs'
 	import { useWorld } from '../../ecs/useWorld'
 	import { useCameraControls } from '../../hooks/useControls.svelte'
+	import { useRelationships } from '../../hooks/useRelationships.svelte'
 	import { spawnSnapshotEntities } from '../../snapshot'
 
 	import type { FileDropperSuccess } from './file-dropper'
@@ -19,12 +20,18 @@
 	const world = useWorld()
 	const toast = useToast()
 	const cameraControls = useCameraControls()
+	const relationships = useRelationships()
 
 	const fileDrop = useFileDrop(
 		(result: FileDropperSuccess) => {
 			switch (result.type) {
 				case 'snapshot': {
-					spawnSnapshotEntities(world, result.snapshot)
+					const spawned = spawnSnapshotEntities(world, result.snapshot)
+					for (const entity of spawned) {
+						relationships.apply(entity.entity, entity.relationships)
+						const uuid = entity.entity.get(traits.UUID)
+						if (uuid) relationships.flush(uuid)
+					}
 
 					const { sceneCamera } = result.snapshot.sceneMetadata ?? {}
 

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/PCD.svelte

@@ -12,11 +12,14 @@
 		data: Uint8Array
 		name?: string
 		renderOrder?: number
+		depthTest?: boolean
+		depthWrite?: boolean
 		interactionLayers?: InteractionLayerValue[]
 		oncreate?: (positions: Float32Array, colors: Uint8Array | undefined) => void
 	}
 
-	let { data, name, renderOrder, interactionLayers, oncreate }: Props = $props()
+	let { data, name, renderOrder, depthTest, depthWrite, interactionLayers, oncreate }: Props =
+		$props()
 
 	const world = useWorld()
 
@@ -38,6 +41,11 @@
 			if (renderOrder) {
 				entityTraits.push(traits.RenderOrder(renderOrder))
 			}
+			if (depthTest !== undefined || depthWrite !== undefined) {
+				entityTraits.push(
+					traits.Material({ depthTest: depthTest ?? true, depthWrite: depthWrite ?? true })
+				)
+			}
 			if (interactionLayers?.includes('selectTool')) {
 				entityTraits.push(traits.SelectToolInteractionLayer)
 			}

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

@@ -3,6 +3,8 @@ interface Props {
     data: Uint8Array;
     name?: string;
     renderOrder?: number;
+    depthTest?: boolean;
+    depthWrite?: boolean;
     interactionLayers?: InteractionLayerValue[];
     oncreate?: (positions: Float32Array, colors: Uint8Array | undefined) => void;
 }

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'
@@ -20,6 +21,7 @@
 	import { usePartID } from '../hooks/usePartID.svelte'
 	import { providePointcloudObjects } from '../hooks/usePointcloudObjects.svelte'
 	import { providePointclouds } from '../hooks/usePointclouds.svelte'
+	import { provideRelationships } from '../hooks/useRelationships.svelte'
 	import { provideResourceByName } from '../hooks/useResourceByName.svelte'
 	import { provideSelection } from '../hooks/useSelection.svelte'
 	import { provideWorldStates } from '../hooks/useWorldState.svelte'
@@ -41,10 +43,12 @@
 
 	provideOrigin()
 	provideDrawAPI()
+	provideRelationships()
 	provideDrawService()
 
 	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/Snapshot.svelte

@@ -14,17 +14,16 @@ Renders a Snapshot protobuf by spawning its transforms and drawings as entities
 ```
 -->
 <script lang="ts">
-	import type { Entity } from 'koota'
-
 	import { untrack } from 'svelte'
 	import { onDestroy } from 'svelte'
 
 	import type { Snapshot as SnapshotProto } from '../buf/draw/v1/snapshot_pb'
 
-	import { useWorld } from '../ecs'
+	import { traits, useWorld } from '../ecs'
 	import { useCameraControls } from '../hooks/useControls.svelte'
+	import { useRelationships } from '../hooks/useRelationships.svelte'
 	import { useSettings } from '../hooks/useSettings.svelte'
-	import { applySceneMetadata, spawnSnapshotEntities } from '../snapshot'
+	import { applySceneMetadata, type SnapshotEntity, spawnSnapshotEntities } from '../snapshot'
 
 	interface Props {
 		snapshot: SnapshotProto
@@ -35,8 +34,9 @@ Renders a Snapshot protobuf by spawning its transforms and drawings as entities
 	const world = useWorld()
 	const settings = useSettings()
 	const cameraControls = useCameraControls()
+	const relationships = useRelationships()
 
-	let entities: Entity[] = []
+	let entities: SnapshotEntity[] = []
 
 	$effect(() => {
 		world.id.toString()
@@ -44,6 +44,11 @@ Renders a Snapshot protobuf by spawning its transforms and drawings as entities
 
 		untrack(() => {
 			entities = spawnSnapshotEntities(world, snapshot)
+			for (const spawned of entities) {
+				relationships.apply(spawned.entity, spawned.relationships)
+				const uuid = spawned.entity.get(traits.UUID)
+				if (uuid) relationships.flush(uuid)
+			}
 		})
 	})
 
@@ -78,8 +83,8 @@ Renders a Snapshot protobuf by spawning its transforms and drawings as entities
 	})
 
 	onDestroy(() => {
-		for (const entity of entities) {
-			if (world.has(entity)) entity.destroy()
+		for (const spawned of entities) {
+			if (world.has(spawned.entity)) spawned.entity.destroy()
 		}
 	})
 </script>