mujoco-react 0.3.0 → 2.0.0

package/dist/index.js

@@ -1,6 +1,6 @@
 import loadMujoco from 'mujoco-js';
 import { createContext, forwardRef, useEffect, useContext, useState, useRef, useCallback, useMemo } from 'react';
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { jsx, jsxs } from 'react/jsx-runtime';
 import { Canvas, useThree, useFrame } from '@react-three/fiber';
 import * as THREE11 from 'three';
 import { PivotControls } from '@react-three/drei';
@@ -67,6 +67,248 @@ function getContact(data, i) {
     return void 0;
   }
 }
+var CapsuleGeometry = class extends THREE11.BufferGeometry {
+  parameters;
+  constructor(radius = 1, length = 1, capSegments = 4, radialSegments = 8) {
+    super();
+    this.type = "CapsuleGeometry";
+    this.parameters = { radius, length, capSegments, radialSegments };
+    const path = new THREE11.Path();
+    path.absarc(0, -length / 2, radius, Math.PI * 1.5, 0, false);
+    path.absarc(0, length / 2, radius, 0, Math.PI * 0.5, false);
+    const latheGeometry = new THREE11.LatheGeometry(path.getPoints(capSegments), radialSegments);
+    const self = this;
+    self.setIndex(latheGeometry.getIndex());
+    self.setAttribute("position", latheGeometry.getAttribute("position"));
+    self.setAttribute("normal", latheGeometry.getAttribute("normal"));
+    self.setAttribute("uv", latheGeometry.getAttribute("uv"));
+  }
+};
+var Reflector = class extends THREE11.Mesh {
+  isReflector = true;
+  camera;
+  reflectorPlane = new THREE11.Plane();
+  normal = new THREE11.Vector3();
+  reflectorWorldPosition = new THREE11.Vector3();
+  cameraWorldPosition = new THREE11.Vector3();
+  rotationMatrix = new THREE11.Matrix4();
+  lookAtPosition = new THREE11.Vector3(0, 0, -1);
+  clipPlane = new THREE11.Vector4();
+  view = new THREE11.Vector3();
+  target = new THREE11.Vector3();
+  q = new THREE11.Vector4();
+  textureMatrix = new THREE11.Matrix4();
+  virtualCamera;
+  renderTarget;
+  constructor(geometry, options = {}) {
+    super(geometry);
+    this.type = "Reflector";
+    this.camera = new THREE11.PerspectiveCamera();
+    const color = options.color !== void 0 ? new THREE11.Color(options.color) : new THREE11.Color(8355711);
+    const textureWidth = options.textureWidth || 512;
+    const textureHeight = options.textureHeight || 512;
+    const clipBias = options.clipBias || 0;
+    const multisample = options.multisample !== void 0 ? options.multisample : 4;
+    const blendTexture = options.texture || void 0;
+    const mixStrength = options.mixStrength !== void 0 ? options.mixStrength : 0.25;
+    this.virtualCamera = this.camera;
+    this.renderTarget = new THREE11.WebGLRenderTarget(textureWidth, textureHeight, {
+      samples: multisample,
+      type: THREE11.HalfFloatType
+    });
+    this.material = new THREE11.MeshPhysicalMaterial({
+      map: blendTexture,
+      color,
+      roughness: 0.5,
+      metalness: 0.1
+    });
+    this.material.onBeforeCompile = (shader) => {
+      shader.uniforms.tDiffuse = { value: this.renderTarget.texture };
+      shader.uniforms.textureMatrix = { value: this.textureMatrix };
+      shader.uniforms.mixStrength = { value: mixStrength };
+      const bodyStart = shader.vertexShader.indexOf("void main() {");
+      shader.vertexShader = "uniform mat4 textureMatrix;\nvarying vec4 vUvReflection;\n" + shader.vertexShader.slice(0, bodyStart) + shader.vertexShader.slice(bodyStart, -1) + "   vUvReflection = textureMatrix * vec4( position, 1.0 );\n}";
+      const fragmentBodyStart = shader.fragmentShader.indexOf("void main() {");
+      shader.fragmentShader = "uniform sampler2D tDiffuse;\nuniform float mixStrength;\nvarying vec4 vUvReflection;\n" + shader.fragmentShader.slice(0, fragmentBodyStart) + shader.fragmentShader.slice(fragmentBodyStart, -1) + "   vec4 reflectionColor = texture2DProj( tDiffuse, vUvReflection );\n   gl_FragColor = vec4( mix( gl_FragColor.rgb, reflectionColor.rgb, mixStrength ), gl_FragColor.a );\n}";
+    };
+    this.receiveShadow = true;
+    this.onBeforeRender = (renderer, scene, camera) => {
+      this.reflectorWorldPosition.setFromMatrixPosition(this.matrixWorld);
+      this.cameraWorldPosition.setFromMatrixPosition(camera.matrixWorld);
+      this.rotationMatrix.extractRotation(this.matrixWorld);
+      this.normal.set(0, 0, 1);
+      this.normal.applyMatrix4(this.rotationMatrix);
+      this.view.subVectors(this.reflectorWorldPosition, this.cameraWorldPosition);
+      if (this.view.dot(this.normal) > 0) return;
+      this.view.reflect(this.normal).negate();
+      this.view.add(this.reflectorWorldPosition);
+      this.rotationMatrix.extractRotation(camera.matrixWorld);
+      this.lookAtPosition.set(0, 0, -1);
+      this.lookAtPosition.applyMatrix4(this.rotationMatrix);
+      this.lookAtPosition.add(this.cameraWorldPosition);
+      this.target.subVectors(this.reflectorWorldPosition, this.lookAtPosition);
+      this.target.reflect(this.normal).negate();
+      this.target.add(this.reflectorWorldPosition);
+      this.virtualCamera.position.copy(this.view);
+      this.virtualCamera.up.set(0, 1, 0);
+      this.virtualCamera.up.applyMatrix4(this.rotationMatrix);
+      this.virtualCamera.up.reflect(this.normal);
+      this.virtualCamera.lookAt(this.target);
+      this.virtualCamera.far = camera.far;
+      this.virtualCamera.updateMatrixWorld();
+      this.virtualCamera.projectionMatrix.copy(camera.projectionMatrix);
+      this.textureMatrix.set(
+        0.5,
+        0,
+        0,
+        0.5,
+        0,
+        0.5,
+        0,
+        0.5,
+        0,
+        0,
+        0.5,
+        0.5,
+        0,
+        0,
+        0,
+        1
+      );
+      this.textureMatrix.multiply(this.virtualCamera.projectionMatrix);
+      this.textureMatrix.multiply(this.virtualCamera.matrixWorldInverse);
+      this.textureMatrix.multiply(this.matrixWorld);
+      this.reflectorPlane.setFromNormalAndCoplanarPoint(this.normal, this.reflectorWorldPosition);
+      this.reflectorPlane.applyMatrix4(this.virtualCamera.matrixWorldInverse);
+      this.clipPlane.set(this.reflectorPlane.normal.x, this.reflectorPlane.normal.y, this.reflectorPlane.normal.z, this.reflectorPlane.constant);
+      const projectionMatrix = this.virtualCamera.projectionMatrix;
+      this.q.x = (Math.sign(this.clipPlane.x) + projectionMatrix.elements[8]) / projectionMatrix.elements[0];
+      this.q.y = (Math.sign(this.clipPlane.y) + projectionMatrix.elements[9]) / projectionMatrix.elements[5];
+      this.q.z = -1;
+      this.q.w = (1 + projectionMatrix.elements[10]) / projectionMatrix.elements[14];
+      this.clipPlane.multiplyScalar(2 / this.clipPlane.dot(this.q));
+      projectionMatrix.elements[2] = this.clipPlane.x;
+      projectionMatrix.elements[6] = this.clipPlane.y;
+      projectionMatrix.elements[10] = this.clipPlane.z + 1 - clipBias;
+      projectionMatrix.elements[14] = this.clipPlane.w;
+      this.visible = false;
+      const currentRenderTarget = renderer.getRenderTarget();
+      const currentXrEnabled = renderer.xr.enabled;
+      const currentShadowAutoUpdate = renderer.shadowMap.autoUpdate;
+      renderer.xr.enabled = false;
+      renderer.shadowMap.autoUpdate = false;
+      renderer.setRenderTarget(this.renderTarget);
+      renderer.state.buffers.depth.setMask(true);
+      if (renderer.autoClear === false) renderer.clear();
+      renderer.render(scene, this.virtualCamera);
+      renderer.xr.enabled = currentXrEnabled;
+      renderer.shadowMap.autoUpdate = currentShadowAutoUpdate;
+      renderer.setRenderTarget(currentRenderTarget);
+      const viewport = camera.viewport;
+      if (viewport !== void 0) {
+        renderer.state.viewport(viewport);
+      }
+      this.visible = true;
+    };
+  }
+  getRenderTarget() {
+    return this.renderTarget;
+  }
+  dispose() {
+    this.renderTarget.dispose();
+    const mesh = this;
+    if (Array.isArray(mesh.material)) {
+      mesh.material.forEach((m) => m.dispose());
+    } else {
+      mesh.material.dispose();
+    }
+  }
+};
+
+// src/rendering/GeomBuilder.ts
+var GeomBuilder = class {
+  mujoco;
+  constructor(mujoco) {
+    this.mujoco = mujoco;
+  }
+  /**
+   * Creates a Three.js Object3D (usually a Mesh) for a specific geometry in the MuJoCo model.
+   * Returns null if the geometry shouldn't be rendered (e.g., invisible collision triggers).
+   */
+  create(mjModel, g) {
+    if (mjModel.geom_group[g] === 3) return null;
+    const type = mjModel.geom_type[g];
+    const size = mjModel.geom_size.subarray(g * 3, g * 3 + 3);
+    const pos = mjModel.geom_pos.subarray(g * 3, g * 3 + 3);
+    const quat = mjModel.geom_quat.subarray(g * 4, g * 4 + 4);
+    const matId = mjModel.geom_matid[g];
+    const color = new THREE11.Color(16777215);
+    let opacity = 1;
+    if (matId >= 0) {
+      const rgba = mjModel.mat_rgba.subarray(matId * 4, matId * 4 + 4);
+      color.setRGB(rgba[0], rgba[1], rgba[2]);
+      opacity = rgba[3];
+    } else {
+      const rgba = mjModel.geom_rgba.subarray(g * 4, g * 4 + 4);
+      color.setRGB(rgba[0], rgba[1], rgba[2]);
+      opacity = rgba[3];
+    }
+    const MG = this.mujoco.mjtGeom;
+    let geo = null;
+    const getVal = (v) => v?.value ?? v;
+    if (type === getVal(MG.mjGEOM_PLANE)) {
+      geo = new THREE11.PlaneGeometry(size[0] * 2 || 5, size[1] * 2 || 5);
+    } else if (type === getVal(MG.mjGEOM_SPHERE)) {
+      geo = new THREE11.SphereGeometry(size[0], 24, 24);
+    } else if (type === getVal(MG.mjGEOM_CAPSULE)) {
+      geo = new CapsuleGeometry(size[0], size[1] * 2, 24, 12);
+      geo.rotateX(Math.PI / 2);
+    } else if (type === getVal(MG.mjGEOM_BOX)) {
+      geo = new THREE11.BoxGeometry(size[0] * 2, size[1] * 2, size[2] * 2);
+    } else if (type === getVal(MG.mjGEOM_CYLINDER)) {
+      geo = new THREE11.CylinderGeometry(size[0], size[0], size[1] * 2, 24);
+      geo.rotateX(Math.PI / 2);
+    } else if (type === getVal(MG.mjGEOM_MESH)) {
+      const mId = mjModel.geom_dataid[g];
+      const vAdr = mjModel.mesh_vertadr[mId];
+      const vNum = mjModel.mesh_vertnum[mId];
+      const fAdr = mjModel.mesh_faceadr[mId];
+      const fNum = mjModel.mesh_facenum[mId];
+      geo = new THREE11.BufferGeometry();
+      geo.setAttribute("position", new THREE11.Float32BufferAttribute(mjModel.mesh_vert.subarray(vAdr * 3, (vAdr + vNum) * 3), 3));
+      geo.setIndex(Array.from(mjModel.mesh_face.subarray(fAdr * 3, (fAdr + fNum) * 3)));
+      geo.computeVertexNormals();
+    }
+    if (geo) {
+      let mesh;
+      if (type === getVal(MG.mjGEOM_PLANE)) {
+        mesh = new Reflector(geo, {
+          clipBias: 3e-3,
+          textureWidth: 1024,
+          textureHeight: 1024,
+          color,
+          mixStrength: 0.25
+        });
+      } else {
+        mesh = new THREE11.Mesh(geo, new THREE11.MeshStandardMaterial({
+          color,
+          transparent: opacity < 1,
+          opacity,
+          roughness: 0.6,
+          metalness: 0.2
+        }));
+        mesh.castShadow = true;
+        mesh.receiveShadow = true;
+      }
+      mesh.position.set(pos[0], pos[1], pos[2]);
+      mesh.quaternion.set(quat[1], quat[2], quat[3], quat[0]);
+      mesh.userData.bodyID = mjModel.geom_bodyid[g];
+      mesh.userData.geomID = g;
+      return mesh;
+    }
+    return null;
+  }
+};
 
 // src/core/SceneLoader.ts
 function getName(mjModel, address) {
@@ -225,8 +467,6 @@ async function loadScene(mujoco, config, onProgress) {
   onProgress?.("Loading model...");
   const mjModel = mujoco.MjModel.loadFromXML(`/working/${config.sceneFile}`);
   const mjData = new mujoco.MjData(mjModel);
-  const siteId = findSiteByName(mjModel, config.tcpSiteName ?? "tcp");
-  const gripperId = findActuatorByName(mjModel, config.gripperActuatorName ?? "gripper");
   if (config.homeJoints) {
     const homeCount = Math.min(config.homeJoints.length, mjModel.nu);
     for (let i = 0; i < homeCount; i++) {
@@ -238,7 +478,7 @@ async function loadScene(mujoco, config, onProgress) {
     }
   }
   mujoco.mj_forward(mjModel, mjData);
-  return { mjModel, mjData, siteId, gripperId };
+  return { mjModel, mjData };
 }
 function scanDependencies(xmlString, currentFile, parser, downloaded, queue) {
   const xmlDoc = parser.parseFromString(xmlString, "text/xml");
@@ -267,20 +507,98 @@ function scanDependencies(xmlString, currentFile, parser, downloaded, queue) {
     if (!downloaded.has(fullPath)) queue.push(fullPath);
   });
 }
-var JOINT_TYPE_NAMES = ["free", "ball", "slide", "hinge"];
-var GEOM_TYPE_NAMES = ["plane", "hfield", "sphere", "capsule", "ellipsoid", "cylinder", "box", "mesh"];
-var SENSOR_TYPE_NAMES = {
-  0: "touch",
-  1: "accelerometer",
-  2: "velocimeter",
-  3: "gyro",
-  4: "force",
-  5: "torque",
-  6: "magnetometer",
-  7: "rangefinder",
-  8: "camprojection",
-  9: "jointpos",
-  10: "jointvel",
+function SceneRenderer(props) {
+  const { mjModelRef, mjDataRef, mujocoRef, onSelectionRef, status } = useMujocoSim();
+  const groupRef = useRef(null);
+  const bodyRefs = useRef([]);
+  const prevModelRef = useRef(null);
+  const geomBuilder = useMemo(() => {
+    if (status !== "ready") return null;
+    return new GeomBuilder(mujocoRef.current);
+  }, [status, mujocoRef]);
+  useEffect(() => {
+    if (status !== "ready" || !geomBuilder) return;
+    const model = mjModelRef.current;
+    const group = groupRef.current;
+    if (!model || !group) return;
+    if (prevModelRef.current === model) return;
+    prevModelRef.current = model;
+    while (group.children.length > 0) {
+      group.remove(group.children[0]);
+    }
+    const refs = [];
+    for (let i = 0; i < model.nbody; i++) {
+      const bodyGroup = new THREE11.Group();
+      bodyGroup.userData.bodyID = i;
+      for (let g = 0; g < model.ngeom; g++) {
+        if (model.geom_bodyid[g] === i) {
+          const mesh = geomBuilder.create(model, g);
+          if (mesh) bodyGroup.add(mesh);
+        }
+      }
+      group.add(bodyGroup);
+      refs.push(bodyGroup);
+    }
+    bodyRefs.current = refs;
+  }, [status, geomBuilder, mjModelRef]);
+  useFrame(() => {
+    const data = mjDataRef.current;
+    if (!data) return;
+    const bodies = bodyRefs.current;
+    for (let i = 0; i < bodies.length; i++) {
+      const ref = bodies[i];
+      if (!ref) continue;
+      ref.position.set(
+        data.xpos[i * 3],
+        data.xpos[i * 3 + 1],
+        data.xpos[i * 3 + 2]
+      );
+      ref.quaternion.set(
+        data.xquat[i * 4 + 1],
+        data.xquat[i * 4 + 2],
+        data.xquat[i * 4 + 3],
+        data.xquat[i * 4]
+      );
+    }
+  });
+  return /* @__PURE__ */ jsx(
+    "group",
+    {
+      ...props,
+      ref: groupRef,
+      onDoubleClick: (e) => {
+        if (typeof props.onDoubleClick === "function") props.onDoubleClick(e);
+        e.stopPropagation();
+        let obj = e.object;
+        while (obj && obj.userData.bodyID === void 0 && obj.parent) {
+          obj = obj.parent;
+        }
+        const bodyID = obj?.userData.bodyID;
+        if (typeof bodyID === "number" && bodyID > 0) {
+          const model = mjModelRef.current;
+          if (model && bodyID < model.nbody && onSelectionRef.current) {
+            const name = getName(model, model.name_bodyadr[bodyID]);
+            onSelectionRef.current(bodyID, name);
+          }
+        }
+      }
+    }
+  );
+}
+var JOINT_TYPE_NAMES = ["free", "ball", "slide", "hinge"];
+var GEOM_TYPE_NAMES = ["plane", "hfield", "sphere", "capsule", "ellipsoid", "cylinder", "box", "mesh"];
+var SENSOR_TYPE_NAMES = {
+  0: "touch",
+  1: "accelerometer",
+  2: "velocimeter",
+  3: "gyro",
+  4: "force",
+  5: "torque",
+  6: "magnetometer",
+  7: "rangefinder",
+  8: "camprojection",
+  9: "jointpos",
+  10: "jointvel",
   11: "tendonpos",
   12: "tendonvel",
   13: "actuatorpos",
@@ -372,7 +690,6 @@ function MujocoSimProvider({
   substeps,
   paused,
   speed,
-  interpolate,
   children
 }) {
   const { gl, camera } = useThree();
@@ -384,12 +701,8 @@ function MujocoSimProvider({
   const pausedRef = useRef(paused ?? false);
   const speedRef = useRef(speed ?? 1);
   const substepsRef = useRef(substeps ?? 1);
-  const interpolateRef = useRef(interpolate ?? false);
   const stepsToRunRef = useRef(0);
   const loadGenRef = useRef(0);
-  useRef(null);
-  useRef(null);
-  useRef(0);
   const onSelectionRef = useRef(onSelection);
   onSelectionRef.current = onSelection;
   const onStepRef = useRef(onStep);
@@ -407,9 +720,6 @@ function MujocoSimProvider({
   useEffect(() => {
     substepsRef.current = substeps ?? 1;
   }, [substeps]);
-  useEffect(() => {
-    interpolateRef.current = interpolate ?? false;
-  }, [interpolate]);
   useEffect(() => {
     if (!gravity) return;
     const model = mjModelRef.current;
@@ -477,7 +787,7 @@ function MujocoSimProvider({
       }
     }
   }, [status]);
-  useFrame(() => {
+  useFrame((_state, delta) => {
     const model = mjModelRef.current;
     const data = mjDataRef.current;
     if (!model || !data) return;
@@ -497,7 +807,8 @@ function MujocoSimProvider({
       stepsToRunRef.current = 0;
     } else {
       const startSimTime = data.time;
-      const frameTime = 1 / 60 * speedRef.current;
+      const clampedDelta = Math.min(delta, 1 / 15);
+      const frameTime = clampedDelta * speedRef.current;
       while (data.time - startSimTime < frameTime) {
         for (let s = 0; s < numSubsteps; s++) {
           mujoco.mj_step(model, data);
@@ -1104,7 +1415,10 @@ function MujocoSimProvider({
     }),
     [api, status]
   );
-  return /* @__PURE__ */ jsx(MujocoSimContext.Provider, { value: contextValue, children });
+  return /* @__PURE__ */ jsxs(MujocoSimContext.Provider, { value: contextValue, children: [
+    /* @__PURE__ */ jsx(SceneRenderer, {}),
+    children
+  ] });
 }
 var MujocoCanvas = forwardRef(
   function MujocoCanvas2({
@@ -1113,15 +1427,12 @@ var MujocoCanvas = forwardRef(
     onError,
     onStep,
     onSelection,
-    // Declarative physics config (spec 1.1)
+    // Declarative physics config
     gravity,
     timestep,
     substeps,
     paused,
     speed,
-    interpolate,
-    gravityCompensation,
-    mjcfLights,
     children,
     ...canvasProps
   }, ref) {
@@ -1149,12 +1460,34 @@ var MujocoCanvas = forwardRef(
         substeps,
         paused,
         speed,
-        interpolate,
         children
       }
     ) });
   }
 );
+var MujocoPhysics = forwardRef(
+  function MujocoPhysics2({ onError, children, ...props }, ref) {
+    const { mujoco, status: wasmStatus, error: wasmError } = useMujoco();
+    useEffect(() => {
+      if (wasmStatus === "error" && onError) {
+        onError(new Error(wasmError ?? "WASM load failed"));
+      }
+    }, [wasmStatus, wasmError, onError]);
+    if (wasmStatus === "error" || wasmStatus === "loading" || !mujoco) {
+      return null;
+    }
+    return /* @__PURE__ */ jsx(
+      MujocoSimProvider,
+      {
+        mujoco,
+        apiRef: ref,
+        onError,
+        ...props,
+        children
+      }
+    );
+  }
+);
 function shallowEqual(a, b) {
   const keysA = Object.keys(a);
   const keysB = Object.keys(b);
@@ -1437,526 +1770,208 @@ function syncGizmoToSite(data, siteId, target) {
     0,
     siteMat[6],
     siteMat[7],
-    siteMat[8],
-    0,
-    0,
-    0,
-    0,
-    1
-  );
-  target.quaternion.setFromRotationMatrix(_syncMat4);
-}
-function IkControllerImpl({
-  config,
-  children
-}) {
-  const { mjModelRef, mjDataRef, mujocoRef, configRef, resetCallbacks, status } = useMujocoSim();
-  const ikEnabledRef = useRef(false);
-  const ikCalculatingRef = useRef(false);
-  const ikTargetRef = useRef(new THREE11.Group());
-  const siteIdRef = useRef(-1);
-  const genericIkRef = useRef(new GenericIK(mujocoRef.current));
-  const firstIkEnableRef = useRef(true);
-  const needsInitialSync = useRef(true);
-  const gizmoAnimRef = useRef({
-    active: false,
-    startPos: new THREE11.Vector3(),
-    endPos: new THREE11.Vector3(),
-    startRot: new THREE11.Quaternion(),
-    endRot: new THREE11.Quaternion(),
-    startTime: 0,
-    duration: 1e3
-  });
-  useEffect(() => {
-    const model = mjModelRef.current;
-    if (!model || status !== "ready") {
-      siteIdRef.current = -1;
-      return;
-    }
-    siteIdRef.current = findSiteByName(model, config.siteName);
-    const data = mjDataRef.current;
-    if (data && ikTargetRef.current) {
-      syncGizmoToSite(data, siteIdRef.current, ikTargetRef.current);
-    }
-  }, [config.siteName, status, mjModelRef, mjDataRef]);
-  const ikSolveFn = useCallback(
-    (pos, quat, currentQ) => {
-      if (config.ikSolveFn) return config.ikSolveFn(pos, quat, currentQ);
-      const model = mjModelRef.current;
-      const data = mjDataRef.current;
-      if (!model || !data || siteIdRef.current === -1) return null;
-      return genericIkRef.current.solve(
-        model,
-        data,
-        siteIdRef.current,
-        config.numJoints,
-        pos,
-        quat,
-        currentQ,
-        {
-          damping: config.damping,
-          maxIterations: config.maxIterations
-        }
-      );
-    },
-    [config.ikSolveFn, config.numJoints, config.damping, config.maxIterations, mjModelRef, mjDataRef]
-  );
-  const ikSolveFnRef = useRef(ikSolveFn);
-  ikSolveFnRef.current = ikSolveFn;
-  useFrame(() => {
-    if (needsInitialSync.current && siteIdRef.current !== -1) {
-      const data = mjDataRef.current;
-      if (data && ikTargetRef.current) {
-        syncGizmoToSite(data, siteIdRef.current, ikTargetRef.current);
-        needsInitialSync.current = false;
-      }
-    }
-    const ga = gizmoAnimRef.current;
-    const target = ikTargetRef.current;
-    if (!ga.active || !target) return;
-    const now = performance.now();
-    const elapsed = now - ga.startTime;
-    const t = Math.min(elapsed / ga.duration, 1);
-    const ease = 1 - Math.pow(1 - t, 3);
-    target.position.lerpVectors(ga.startPos, ga.endPos, ease);
-    target.quaternion.slerpQuaternions(ga.startRot, ga.endRot, ease);
-    if (t >= 1) ga.active = false;
-  });
-  useBeforePhysicsStep((model, data) => {
-    if (!ikEnabledRef.current) {
-      ikCalculatingRef.current = false;
-      return;
-    }
-    const target = ikTargetRef.current;
-    if (!target) return;
-    ikCalculatingRef.current = true;
-    const numJoints = config.numJoints;
-    const currentQ = [];
-    for (let i = 0; i < numJoints; i++) currentQ.push(data.qpos[i]);
-    const solution = ikSolveFnRef.current(target.position, target.quaternion, currentQ);
-    if (solution) {
-      for (let i = 0; i < numJoints; i++) data.ctrl[i] = solution[i];
-    }
-  });
-  useEffect(() => {
-    const cb = () => {
-      const data = mjDataRef.current;
-      if (data && ikTargetRef.current) {
-        syncGizmoToSite(data, siteIdRef.current, ikTargetRef.current);
-      }
-      gizmoAnimRef.current.active = false;
-      firstIkEnableRef.current = true;
-      ikEnabledRef.current = false;
-      needsInitialSync.current = true;
-    };
-    resetCallbacks.current.add(cb);
-    return () => {
-      resetCallbacks.current.delete(cb);
-    };
-  }, [resetCallbacks, mjDataRef]);
-  const setIkEnabled = useCallback(
-    (enabled) => {
-      ikEnabledRef.current = enabled;
-      const data = mjDataRef.current;
-      if (enabled && data && !gizmoAnimRef.current.active && ikTargetRef.current) {
-        syncGizmoToSite(data, siteIdRef.current, ikTargetRef.current);
-        firstIkEnableRef.current = false;
-      }
-    },
-    [mjDataRef]
-  );
-  const syncTargetToSiteApi = useCallback(() => {
-    const data = mjDataRef.current;
-    const target = ikTargetRef.current;
-    if (data && target) syncGizmoToSite(data, siteIdRef.current, target);
-  }, [mjDataRef]);
-  const solveIK = useCallback(
-    (pos, quat, currentQ) => {
-      return ikSolveFnRef.current(pos, quat, currentQ);
-    },
-    []
-  );
-  const moveTarget = useCallback(
-    (pos, duration = 0) => {
-      if (!ikEnabledRef.current) setIkEnabled(true);
-      const target = ikTargetRef.current;
-      if (!target) return;
-      const targetPos = pos.clone();
-      const targetRot = new THREE11.Quaternion().setFromEuler(
-        new THREE11.Euler(Math.PI, 0, 0)
-      );
-      if (duration > 0) {
-        const ga = gizmoAnimRef.current;
-        ga.active = true;
-        ga.startPos.copy(target.position);
-        ga.endPos.copy(targetPos);
-        ga.startRot.copy(target.quaternion);
-        ga.endRot.copy(targetRot);
-        ga.startTime = performance.now();
-        ga.duration = duration;
-      } else {
-        gizmoAnimRef.current.active = false;
-        target.position.copy(targetPos);
-        target.quaternion.copy(targetRot);
-      }
-    },
-    [setIkEnabled]
-  );
-  const getGizmoStats = useCallback(
-    () => {
-      const target = ikTargetRef.current;
-      if (!ikCalculatingRef.current || !target) return null;
-      return {
-        pos: target.position.clone(),
-        rot: new THREE11.Euler().setFromQuaternion(target.quaternion)
-      };
-    },
-    []
-  );
-  const contextValue = useMemo(
-    () => ({
-      ikEnabledRef,
-      ikCalculatingRef,
-      ikTargetRef,
-      siteIdRef,
-      setIkEnabled,
-      moveTarget,
-      syncTargetToSite: syncTargetToSiteApi,
-      solveIK,
-      getGizmoStats
-    }),
-    [setIkEnabled, moveTarget, syncTargetToSiteApi, solveIK, getGizmoStats]
-  );
-  return /* @__PURE__ */ jsx(IkContext.Provider, { value: contextValue, children });
-}
-var IkController = createController(
-  {
-    name: "IkController",
-    defaultConfig: {
-      damping: 0.01,
-      maxIterations: 50
-    }
-  },
-  IkControllerImpl
-);
-var CapsuleGeometry = class extends THREE11.BufferGeometry {
-  parameters;
-  constructor(radius = 1, length = 1, capSegments = 4, radialSegments = 8) {
-    super();
-    this.type = "CapsuleGeometry";
-    this.parameters = { radius, length, capSegments, radialSegments };
-    const path = new THREE11.Path();
-    path.absarc(0, -length / 2, radius, Math.PI * 1.5, 0, false);
-    path.absarc(0, length / 2, radius, 0, Math.PI * 0.5, false);
-    const latheGeometry = new THREE11.LatheGeometry(path.getPoints(capSegments), radialSegments);
-    const self = this;
-    self.setIndex(latheGeometry.getIndex());
-    self.setAttribute("position", latheGeometry.getAttribute("position"));
-    self.setAttribute("normal", latheGeometry.getAttribute("normal"));
-    self.setAttribute("uv", latheGeometry.getAttribute("uv"));
-  }
-};
-var Reflector = class extends THREE11.Mesh {
-  isReflector = true;
-  camera;
-  reflectorPlane = new THREE11.Plane();
-  normal = new THREE11.Vector3();
-  reflectorWorldPosition = new THREE11.Vector3();
-  cameraWorldPosition = new THREE11.Vector3();
-  rotationMatrix = new THREE11.Matrix4();
-  lookAtPosition = new THREE11.Vector3(0, 0, -1);
-  clipPlane = new THREE11.Vector4();
-  view = new THREE11.Vector3();
-  target = new THREE11.Vector3();
-  q = new THREE11.Vector4();
-  textureMatrix = new THREE11.Matrix4();
-  virtualCamera;
-  renderTarget;
-  constructor(geometry, options = {}) {
-    super(geometry);
-    this.type = "Reflector";
-    this.camera = new THREE11.PerspectiveCamera();
-    const color = options.color !== void 0 ? new THREE11.Color(options.color) : new THREE11.Color(8355711);
-    const textureWidth = options.textureWidth || 512;
-    const textureHeight = options.textureHeight || 512;
-    const clipBias = options.clipBias || 0;
-    const multisample = options.multisample !== void 0 ? options.multisample : 4;
-    const blendTexture = options.texture || void 0;
-    const mixStrength = options.mixStrength !== void 0 ? options.mixStrength : 0.25;
-    this.virtualCamera = this.camera;
-    this.renderTarget = new THREE11.WebGLRenderTarget(textureWidth, textureHeight, {
-      samples: multisample,
-      type: THREE11.HalfFloatType
-    });
-    this.material = new THREE11.MeshPhysicalMaterial({
-      map: blendTexture,
-      color,
-      roughness: 0.5,
-      metalness: 0.1
-    });
-    this.material.onBeforeCompile = (shader) => {
-      shader.uniforms.tDiffuse = { value: this.renderTarget.texture };
-      shader.uniforms.textureMatrix = { value: this.textureMatrix };
-      shader.uniforms.mixStrength = { value: mixStrength };
-      const bodyStart = shader.vertexShader.indexOf("void main() {");
-      shader.vertexShader = "uniform mat4 textureMatrix;\nvarying vec4 vUvReflection;\n" + shader.vertexShader.slice(0, bodyStart) + shader.vertexShader.slice(bodyStart, -1) + "   vUvReflection = textureMatrix * vec4( position, 1.0 );\n}";
-      const fragmentBodyStart = shader.fragmentShader.indexOf("void main() {");
-      shader.fragmentShader = "uniform sampler2D tDiffuse;\nuniform float mixStrength;\nvarying vec4 vUvReflection;\n" + shader.fragmentShader.slice(0, fragmentBodyStart) + shader.fragmentShader.slice(fragmentBodyStart, -1) + "   vec4 reflectionColor = texture2DProj( tDiffuse, vUvReflection );\n   gl_FragColor = vec4( mix( gl_FragColor.rgb, reflectionColor.rgb, mixStrength ), gl_FragColor.a );\n}";
-    };
-    this.receiveShadow = true;
-    this.onBeforeRender = (renderer, scene, camera) => {
-      this.reflectorWorldPosition.setFromMatrixPosition(this.matrixWorld);
-      this.cameraWorldPosition.setFromMatrixPosition(camera.matrixWorld);
-      this.rotationMatrix.extractRotation(this.matrixWorld);
-      this.normal.set(0, 0, 1);
-      this.normal.applyMatrix4(this.rotationMatrix);
-      this.view.subVectors(this.reflectorWorldPosition, this.cameraWorldPosition);
-      if (this.view.dot(this.normal) > 0) return;
-      this.view.reflect(this.normal).negate();
-      this.view.add(this.reflectorWorldPosition);
-      this.rotationMatrix.extractRotation(camera.matrixWorld);
-      this.lookAtPosition.set(0, 0, -1);
-      this.lookAtPosition.applyMatrix4(this.rotationMatrix);
-      this.lookAtPosition.add(this.cameraWorldPosition);
-      this.target.subVectors(this.reflectorWorldPosition, this.lookAtPosition);
-      this.target.reflect(this.normal).negate();
-      this.target.add(this.reflectorWorldPosition);
-      this.virtualCamera.position.copy(this.view);
-      this.virtualCamera.up.set(0, 1, 0);
-      this.virtualCamera.up.applyMatrix4(this.rotationMatrix);
-      this.virtualCamera.up.reflect(this.normal);
-      this.virtualCamera.lookAt(this.target);
-      this.virtualCamera.far = camera.far;
-      this.virtualCamera.updateMatrixWorld();
-      this.virtualCamera.projectionMatrix.copy(camera.projectionMatrix);
-      this.textureMatrix.set(
-        0.5,
-        0,
-        0,
-        0.5,
-        0,
-        0.5,
-        0,
-        0.5,
-        0,
-        0,
-        0.5,
-        0.5,
-        0,
-        0,
-        0,
-        1
-      );
-      this.textureMatrix.multiply(this.virtualCamera.projectionMatrix);
-      this.textureMatrix.multiply(this.virtualCamera.matrixWorldInverse);
-      this.textureMatrix.multiply(this.matrixWorld);
-      this.reflectorPlane.setFromNormalAndCoplanarPoint(this.normal, this.reflectorWorldPosition);
-      this.reflectorPlane.applyMatrix4(this.virtualCamera.matrixWorldInverse);
-      this.clipPlane.set(this.reflectorPlane.normal.x, this.reflectorPlane.normal.y, this.reflectorPlane.normal.z, this.reflectorPlane.constant);
-      const projectionMatrix = this.virtualCamera.projectionMatrix;
-      this.q.x = (Math.sign(this.clipPlane.x) + projectionMatrix.elements[8]) / projectionMatrix.elements[0];
-      this.q.y = (Math.sign(this.clipPlane.y) + projectionMatrix.elements[9]) / projectionMatrix.elements[5];
-      this.q.z = -1;
-      this.q.w = (1 + projectionMatrix.elements[10]) / projectionMatrix.elements[14];
-      this.clipPlane.multiplyScalar(2 / this.clipPlane.dot(this.q));
-      projectionMatrix.elements[2] = this.clipPlane.x;
-      projectionMatrix.elements[6] = this.clipPlane.y;
-      projectionMatrix.elements[10] = this.clipPlane.z + 1 - clipBias;
-      projectionMatrix.elements[14] = this.clipPlane.w;
-      this.visible = false;
-      const currentRenderTarget = renderer.getRenderTarget();
-      const currentXrEnabled = renderer.xr.enabled;
-      const currentShadowAutoUpdate = renderer.shadowMap.autoUpdate;
-      renderer.xr.enabled = false;
-      renderer.shadowMap.autoUpdate = false;
-      renderer.setRenderTarget(this.renderTarget);
-      renderer.state.buffers.depth.setMask(true);
-      if (renderer.autoClear === false) renderer.clear();
-      renderer.render(scene, this.virtualCamera);
-      renderer.xr.enabled = currentXrEnabled;
-      renderer.shadowMap.autoUpdate = currentShadowAutoUpdate;
-      renderer.setRenderTarget(currentRenderTarget);
-      const viewport = camera.viewport;
-      if (viewport !== void 0) {
-        renderer.state.viewport(viewport);
-      }
-      this.visible = true;
-    };
-  }
-  getRenderTarget() {
-    return this.renderTarget;
-  }
-  dispose() {
-    this.renderTarget.dispose();
-    const mesh = this;
-    if (Array.isArray(mesh.material)) {
-      mesh.material.forEach((m) => m.dispose());
-    } else {
-      mesh.material.dispose();
-    }
-  }
-};
-
-// src/rendering/GeomBuilder.ts
-var GeomBuilder = class {
-  mujoco;
-  constructor(mujoco) {
-    this.mujoco = mujoco;
-  }
-  /**
-   * Creates a Three.js Object3D (usually a Mesh) for a specific geometry in the MuJoCo model.
-   * Returns null if the geometry shouldn't be rendered (e.g., invisible collision triggers).
-   */
-  create(mjModel, g) {
-    if (mjModel.geom_group[g] === 3) return null;
-    const type = mjModel.geom_type[g];
-    const size = mjModel.geom_size.subarray(g * 3, g * 3 + 3);
-    const pos = mjModel.geom_pos.subarray(g * 3, g * 3 + 3);
-    const quat = mjModel.geom_quat.subarray(g * 4, g * 4 + 4);
-    const matId = mjModel.geom_matid[g];
-    const color = new THREE11.Color(16777215);
-    let opacity = 1;
-    if (matId >= 0) {
-      const rgba = mjModel.mat_rgba.subarray(matId * 4, matId * 4 + 4);
-      color.setRGB(rgba[0], rgba[1], rgba[2]);
-      opacity = rgba[3];
-    } else {
-      const rgba = mjModel.geom_rgba.subarray(g * 4, g * 4 + 4);
-      color.setRGB(rgba[0], rgba[1], rgba[2]);
-      opacity = rgba[3];
-    }
-    const MG = this.mujoco.mjtGeom;
-    let geo = null;
-    const getVal = (v) => v?.value ?? v;
-    if (type === getVal(MG.mjGEOM_PLANE)) {
-      geo = new THREE11.PlaneGeometry(size[0] * 2 || 5, size[1] * 2 || 5);
-    } else if (type === getVal(MG.mjGEOM_SPHERE)) {
-      geo = new THREE11.SphereGeometry(size[0], 24, 24);
-    } else if (type === getVal(MG.mjGEOM_CAPSULE)) {
-      geo = new CapsuleGeometry(size[0], size[1] * 2, 24, 12);
-      geo.rotateX(Math.PI / 2);
-    } else if (type === getVal(MG.mjGEOM_BOX)) {
-      geo = new THREE11.BoxGeometry(size[0] * 2, size[1] * 2, size[2] * 2);
-    } else if (type === getVal(MG.mjGEOM_CYLINDER)) {
-      geo = new THREE11.CylinderGeometry(size[0], size[0], size[1] * 2, 24);
-      geo.rotateX(Math.PI / 2);
-    } else if (type === getVal(MG.mjGEOM_MESH)) {
-      const mId = mjModel.geom_dataid[g];
-      const vAdr = mjModel.mesh_vertadr[mId];
-      const vNum = mjModel.mesh_vertnum[mId];
-      const fAdr = mjModel.mesh_faceadr[mId];
-      const fNum = mjModel.mesh_facenum[mId];
-      geo = new THREE11.BufferGeometry();
-      geo.setAttribute("position", new THREE11.Float32BufferAttribute(mjModel.mesh_vert.subarray(vAdr * 3, (vAdr + vNum) * 3), 3));
-      geo.setIndex(Array.from(mjModel.mesh_face.subarray(fAdr * 3, (fAdr + fNum) * 3)));
-      geo.computeVertexNormals();
-    }
-    if (geo) {
-      let mesh;
-      if (type === getVal(MG.mjGEOM_PLANE)) {
-        mesh = new Reflector(geo, {
-          clipBias: 3e-3,
-          textureWidth: 1024,
-          textureHeight: 1024,
-          color,
-          mixStrength: 0.25
-        });
-      } else {
-        mesh = new THREE11.Mesh(geo, new THREE11.MeshStandardMaterial({
-          color,
-          transparent: opacity < 1,
-          opacity,
-          roughness: 0.6,
-          metalness: 0.2
-        }));
-        mesh.castShadow = true;
-        mesh.receiveShadow = true;
-      }
-      mesh.position.set(pos[0], pos[1], pos[2]);
-      mesh.quaternion.set(quat[1], quat[2], quat[3], quat[0]);
-      mesh.userData.bodyID = mjModel.geom_bodyid[g];
-      mesh.userData.geomID = g;
-      return mesh;
-    }
-    return null;
-  }
-};
-function SceneRenderer() {
-  const { mjModelRef, mjDataRef, mujocoRef, onSelectionRef, status } = useMujocoSim();
-  const groupRef = useRef(null);
-  const bodyRefs = useRef([]);
-  const prevModelRef = useRef(null);
-  const geomBuilder = useMemo(() => {
-    if (status !== "ready") return null;
-    return new GeomBuilder(mujocoRef.current);
-  }, [status, mujocoRef]);
+    siteMat[8],
+    0,
+    0,
+    0,
+    0,
+    1
+  );
+  target.quaternion.setFromRotationMatrix(_syncMat4);
+}
+function IkControllerImpl({
+  config,
+  children
+}) {
+  const { mjModelRef, mjDataRef, mujocoRef, configRef, resetCallbacks, status } = useMujocoSim();
+  const ikEnabledRef = useRef(false);
+  const ikCalculatingRef = useRef(false);
+  const ikTargetRef = useRef(new THREE11.Group());
+  const siteIdRef = useRef(-1);
+  const genericIkRef = useRef(new GenericIK(mujocoRef.current));
+  const firstIkEnableRef = useRef(true);
+  const needsInitialSync = useRef(true);
+  const gizmoAnimRef = useRef({
+    active: false,
+    startPos: new THREE11.Vector3(),
+    endPos: new THREE11.Vector3(),
+    startRot: new THREE11.Quaternion(),
+    endRot: new THREE11.Quaternion(),
+    startTime: 0,
+    duration: 1e3
+  });
   useEffect(() => {
-    if (status !== "ready" || !geomBuilder) return;
     const model = mjModelRef.current;
-    const group = groupRef.current;
-    if (!model || !group) return;
-    if (prevModelRef.current === model) return;
-    prevModelRef.current = model;
-    while (group.children.length > 0) {
-      group.remove(group.children[0]);
+    if (!model || status !== "ready") {
+      siteIdRef.current = -1;
+      return;
     }
-    const refs = [];
-    for (let i = 0; i < model.nbody; i++) {
-      const bodyGroup = new THREE11.Group();
-      bodyGroup.userData.bodyID = i;
-      for (let g = 0; g < model.ngeom; g++) {
-        if (model.geom_bodyid[g] === i) {
-          const mesh = geomBuilder.create(model, g);
-          if (mesh) bodyGroup.add(mesh);
+    siteIdRef.current = findSiteByName(model, config.siteName);
+    const data = mjDataRef.current;
+    if (data && ikTargetRef.current) {
+      syncGizmoToSite(data, siteIdRef.current, ikTargetRef.current);
+    }
+  }, [config.siteName, status, mjModelRef, mjDataRef]);
+  const ikSolveFn = useCallback(
+    (pos, quat, currentQ) => {
+      if (config.ikSolveFn) return config.ikSolveFn(pos, quat, currentQ);
+      const model = mjModelRef.current;
+      const data = mjDataRef.current;
+      if (!model || !data || siteIdRef.current === -1) return null;
+      return genericIkRef.current.solve(
+        model,
+        data,
+        siteIdRef.current,
+        config.numJoints,
+        pos,
+        quat,
+        currentQ,
+        {
+          damping: config.damping,
+          maxIterations: config.maxIterations
         }
+      );
+    },
+    [config.ikSolveFn, config.numJoints, config.damping, config.maxIterations, mjModelRef, mjDataRef]
+  );
+  const ikSolveFnRef = useRef(ikSolveFn);
+  ikSolveFnRef.current = ikSolveFn;
+  useFrame(() => {
+    if (needsInitialSync.current && siteIdRef.current !== -1) {
+      const data = mjDataRef.current;
+      if (data && ikTargetRef.current) {
+        syncGizmoToSite(data, siteIdRef.current, ikTargetRef.current);
+        needsInitialSync.current = false;
       }
-      group.add(bodyGroup);
-      refs.push(bodyGroup);
     }
-    bodyRefs.current = refs;
-  }, [status, geomBuilder, mjModelRef]);
-  useFrame(() => {
-    const data = mjDataRef.current;
-    if (!data) return;
-    const bodies = bodyRefs.current;
-    for (let i = 0; i < bodies.length; i++) {
-      const ref = bodies[i];
-      if (!ref) continue;
-      ref.position.set(
-        data.xpos[i * 3],
-        data.xpos[i * 3 + 1],
-        data.xpos[i * 3 + 2]
-      );
-      ref.quaternion.set(
-        data.xquat[i * 4 + 1],
-        data.xquat[i * 4 + 2],
-        data.xquat[i * 4 + 3],
-        data.xquat[i * 4]
-      );
+    const ga = gizmoAnimRef.current;
+    const target = ikTargetRef.current;
+    if (!ga.active || !target) return;
+    const now = performance.now();
+    const elapsed = now - ga.startTime;
+    const t = Math.min(elapsed / ga.duration, 1);
+    const ease = 1 - Math.pow(1 - t, 3);
+    target.position.lerpVectors(ga.startPos, ga.endPos, ease);
+    target.quaternion.slerpQuaternions(ga.startRot, ga.endRot, ease);
+    if (t >= 1) ga.active = false;
+  });
+  useBeforePhysicsStep((model, data) => {
+    if (!ikEnabledRef.current) {
+      ikCalculatingRef.current = false;
+      return;
+    }
+    const target = ikTargetRef.current;
+    if (!target) return;
+    ikCalculatingRef.current = true;
+    const numJoints = config.numJoints;
+    const currentQ = [];
+    for (let i = 0; i < numJoints; i++) currentQ.push(data.qpos[i]);
+    const solution = ikSolveFnRef.current(target.position, target.quaternion, currentQ);
+    if (solution) {
+      for (let i = 0; i < numJoints; i++) data.ctrl[i] = solution[i];
     }
   });
-  return /* @__PURE__ */ jsx(
-    "group",
-    {
-      ref: groupRef,
-      onDoubleClick: (e) => {
-        e.stopPropagation();
-        let obj = e.object;
-        while (obj && obj.userData.bodyID === void 0 && obj.parent) {
-          obj = obj.parent;
-        }
-        const bodyID = obj?.userData.bodyID;
-        if (typeof bodyID === "number" && bodyID > 0) {
-          const model = mjModelRef.current;
-          if (model && bodyID < model.nbody && onSelectionRef.current) {
-            const name = getName(model, model.name_bodyadr[bodyID]);
-            onSelectionRef.current(bodyID, name);
-          }
-        }
+  useEffect(() => {
+    const cb = () => {
+      const data = mjDataRef.current;
+      if (data && ikTargetRef.current) {
+        syncGizmoToSite(data, siteIdRef.current, ikTargetRef.current);
       }
-    }
+      gizmoAnimRef.current.active = false;
+      firstIkEnableRef.current = true;
+      ikEnabledRef.current = false;
+      needsInitialSync.current = true;
+    };
+    resetCallbacks.current.add(cb);
+    return () => {
+      resetCallbacks.current.delete(cb);
+    };
+  }, [resetCallbacks, mjDataRef]);
+  const setIkEnabled = useCallback(
+    (enabled) => {
+      ikEnabledRef.current = enabled;
+      const data = mjDataRef.current;
+      if (enabled && data && !gizmoAnimRef.current.active && ikTargetRef.current) {
+        syncGizmoToSite(data, siteIdRef.current, ikTargetRef.current);
+        firstIkEnableRef.current = false;
+      }
+    },
+    [mjDataRef]
+  );
+  const syncTargetToSiteApi = useCallback(() => {
+    const data = mjDataRef.current;
+    const target = ikTargetRef.current;
+    if (data && target) syncGizmoToSite(data, siteIdRef.current, target);
+  }, [mjDataRef]);
+  const solveIK = useCallback(
+    (pos, quat, currentQ) => {
+      return ikSolveFnRef.current(pos, quat, currentQ);
+    },
+    []
+  );
+  const moveTarget = useCallback(
+    (pos, duration = 0) => {
+      if (!ikEnabledRef.current) setIkEnabled(true);
+      const target = ikTargetRef.current;
+      if (!target) return;
+      const targetPos = pos.clone();
+      const targetRot = new THREE11.Quaternion().setFromEuler(
+        new THREE11.Euler(Math.PI, 0, 0)
+      );
+      if (duration > 0) {
+        const ga = gizmoAnimRef.current;
+        ga.active = true;
+        ga.startPos.copy(target.position);
+        ga.endPos.copy(targetPos);
+        ga.startRot.copy(target.quaternion);
+        ga.endRot.copy(targetRot);
+        ga.startTime = performance.now();
+        ga.duration = duration;
+      } else {
+        gizmoAnimRef.current.active = false;
+        target.position.copy(targetPos);
+        target.quaternion.copy(targetRot);
+      }
+    },
+    [setIkEnabled]
+  );
+  const getGizmoStats = useCallback(
+    () => {
+      const target = ikTargetRef.current;
+      if (!ikCalculatingRef.current || !target) return null;
+      return {
+        pos: target.position.clone(),
+        rot: new THREE11.Euler().setFromQuaternion(target.quaternion)
+      };
+    },
+    []
+  );
+  const contextValue = useMemo(
+    () => ({
+      ikEnabledRef,
+      ikCalculatingRef,
+      ikTargetRef,
+      siteIdRef,
+      setIkEnabled,
+      moveTarget,
+      syncTargetToSite: syncTargetToSiteApi,
+      solveIK,
+      getGizmoStats
+    }),
+    [setIkEnabled, moveTarget, syncTargetToSiteApi, solveIK, getGizmoStats]
   );
+  return /* @__PURE__ */ jsx(IkContext.Provider, { value: contextValue, children });
 }
+var IkController = createController(
+  {
+    name: "IkController",
+    defaultConfig: {
+      damping: 0.01,
+      maxIterations: 50
+    }
+  },
+  IkControllerImpl
+);
 var _mat4 = new THREE11.Matrix4();
 var _pos = new THREE11.Vector3();
 var _quat = new THREE11.Quaternion();
@@ -2057,7 +2072,8 @@ function ContactMarkers({
   maxContacts = 100,
   radius = 8e-3,
   color = "#22d3ee",
-  visible = true
+  visible = true,
+  ...groupProps
 } = {}) {
   const { mjDataRef, status } = useMujocoSim();
   const meshRef = useRef(null);
@@ -2085,10 +2101,10 @@ function ContactMarkers({
     mesh.instanceMatrix.needsUpdate = true;
   });
   if (status !== "ready") return null;
-  return /* @__PURE__ */ jsxs("instancedMesh", { ref: meshRef, args: [void 0, void 0, maxContacts], frustumCulled: false, renderOrder: 999, children: [
+  return /* @__PURE__ */ jsx("group", { ...groupProps, children: /* @__PURE__ */ jsxs("instancedMesh", { ref: meshRef, args: [void 0, void 0, maxContacts], frustumCulled: false, renderOrder: 999, children: [
     /* @__PURE__ */ jsx("sphereGeometry", { args: [radius, 8, 8] }),
     /* @__PURE__ */ jsx("meshBasicMaterial", { color, depthTest: false })
-  ] });
+  ] }) });
 }
 var _force = new Float64Array(3);
 var _torque = new Float64Array(3);
@@ -2100,7 +2116,8 @@ var _raycaster = new THREE11.Raycaster();
 var _mouse = new THREE11.Vector2();
 function DragInteraction({
   stiffness = 250,
-  showArrow = true
+  showArrow = true,
+  ...groupProps
 }) {
   const { mjDataRef, mujocoRef, mjModelRef, status } = useMujocoSim();
   const { gl, camera, scene, controls } = useThree();
@@ -2257,7 +2274,7 @@ function DragInteraction({
     }
   });
   if (status !== "ready") return null;
-  return /* @__PURE__ */ jsx("group", { ref: groupRef });
+  return /* @__PURE__ */ jsx("group", { ...groupProps, ref: groupRef });
 }
 function useSceneLights(intensity = 1) {
   const { mjModelRef, status } = useMujocoSim();
@@ -2378,7 +2395,8 @@ function Debug({
   showContacts = false,
   showCOM = false,
   showInertia = false,
-  showTendons = false
+  showTendons = false,
+  ...groupProps
 }) {
   const { mjModelRef, mjDataRef, status } = useMujocoSim();
   const { scene } = useThree();
@@ -2641,7 +2659,7 @@ function Debug({
     }
   });
   if (status !== "ready") return null;
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
+  return /* @__PURE__ */ jsxs("group", { ...groupProps, children: [
     /* @__PURE__ */ jsx("group", { ref: groupRef }),
     showContacts && /* @__PURE__ */ jsx("group", { ref: contactGroupRef })
   ] });
@@ -2649,7 +2667,7 @@ function Debug({
 var DEFAULT_TENDON_COLOR = new THREE11.Color(0.3, 0.3, 0.8);
 var DEFAULT_TENDON_WIDTH = 2e-3;
 new THREE11.Vector3();
-function TendonRenderer() {
+function TendonRenderer(props) {
   const { mjModelRef, mjDataRef, status } = useMujocoSim();
   const groupRef = useRef(null);
   const meshesRef = useRef([]);
@@ -2751,9 +2769,9 @@ function TendonRenderer() {
     }
   });
   if (status !== "ready") return null;
-  return /* @__PURE__ */ jsx("group", { ref: groupRef });
+  return /* @__PURE__ */ jsx("group", { ...props, ref: groupRef });
 }
-function FlexRenderer() {
+function FlexRenderer(props) {
   const { mjModelRef, mjDataRef, status } = useMujocoSim();
   const groupRef = useRef(null);
   const meshesRef = useRef([]);
@@ -2817,7 +2835,7 @@ function FlexRenderer() {
     }
   });
   if (status !== "ready") return null;
-  return /* @__PURE__ */ jsx("group", { ref: groupRef });
+  return /* @__PURE__ */ jsx("group", { ...props, ref: groupRef });
 }
 var geomNameCacheByModel = /* @__PURE__ */ new WeakMap();
 function getGeomNameCached(model, geomId) {
@@ -3705,6 +3723,10 @@ function useCameraAnimation() {
  * @license
  * SPDX-License-Identifier: Apache-2.0
  */
+/**
+ * @license
+ * SPDX-License-Identifier: Apache-2.0
+*/
 /**
  * @license
  * SPDX-License-Identifier: Apache-2.0
@@ -3724,10 +3746,6 @@ function useCameraAnimation() {
  * IkController — composable IK controller plugin.
  * Extracts all IK logic from MujocoSimProvider into an opt-in component.
  */
-/**
- * @license
- * SPDX-License-Identifier: Apache-2.0
-*/
 /**
  * @license
  * SPDX-License-Identifier: Apache-2.0
@@ -3889,6 +3907,6 @@ function useCameraAnimation() {
  * useCameraAnimation — composable camera animation hook.
  */
 
-export { ContactListener, ContactMarkers, Debug, DragInteraction, FlexRenderer, IkController, IkGizmo, MujocoCanvas, MujocoProvider, MujocoSimProvider, SceneLights, SceneRenderer, SelectionHighlight, TendonRenderer, TrajectoryPlayer, createController, findActuatorByName, findBodyByName, findGeomByName, findJointByName, findKeyframeByName, findSensorByName, findSiteByName, findTendonByName, getContact, getName, loadScene, useActuators, useAfterPhysicsStep, useBeforePhysicsStep, useBodyState, useCameraAnimation, useContactEvents, useContacts, useCtrl, useCtrlNoise, useGamepad, useGravityCompensation, useIk, useJointState, useKeyboardTeleop, useMujoco, useMujocoSim, usePolicy, useSceneLights, useSelectionHighlight, useSensor, useSensors, useSitePosition, useTrajectoryPlayer, useTrajectoryRecorder, useVideoRecorder };
+export { ContactListener, ContactMarkers, Debug, DragInteraction, FlexRenderer, IkController, IkGizmo, MujocoCanvas, MujocoPhysics, MujocoProvider, MujocoSimProvider, SceneLights, SelectionHighlight, TendonRenderer, TrajectoryPlayer, createController, findActuatorByName, findBodyByName, findGeomByName, findJointByName, findKeyframeByName, findSensorByName, findSiteByName, findTendonByName, getContact, getName, loadScene, useActuators, useAfterPhysicsStep, useBeforePhysicsStep, useBodyState, useCameraAnimation, useContactEvents, useContacts, useCtrl, useCtrlNoise, useGamepad, useGravityCompensation, useIk, useJointState, useKeyboardTeleop, useMujoco, useMujocoSim, usePolicy, useSceneLights, useSelectionHighlight, useSensor, useSensors, useSitePosition, useTrajectoryPlayer, useTrajectoryRecorder, useVideoRecorder };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map