mujoco-react 0.2.0 → 1.0.0

package/dist/index.js

@@ -1,8 +1,8 @@
 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 THREE from 'three';
+import * as THREE11 from 'three';
 import { PivotControls } from '@react-three/drei';
 
 // src/core/MujocoProvider.tsx
@@ -14,14 +14,14 @@ var MujocoContext = createContext({
 function useMujoco() {
   return useContext(MujocoContext);
 }
-function MujocoProvider({ wasmUrl, children, onError }) {
+function MujocoProvider({ wasmUrl, timeout = 3e4, children, onError }) {
   const [status, setStatus] = useState("loading");
   const [error, setError] = useState(null);
   const moduleRef = useRef(null);
   const isMounted = useRef(true);
   useEffect(() => {
     isMounted.current = true;
-    loadMujoco({
+    const wasmPromise = loadMujoco({
       ...wasmUrl ? { locateFile: (path) => path.endsWith(".wasm") ? wasmUrl : path } : {},
       printErr: (text) => {
         if (text.includes("Aborted") && isMounted.current) {
@@ -29,7 +29,11 @@ function MujocoProvider({ wasmUrl, children, onError }) {
           setStatus("error");
         }
       }
-    }).then((inst) => {
+    });
+    const timeoutPromise = new Promise(
+      (_, reject) => setTimeout(() => reject(new Error(`WASM module load timed out after ${timeout}ms`)), timeout)
+    );
+    Promise.race([wasmPromise, timeoutPromise]).then((inst) => {
       if (isMounted.current) {
         moduleRef.current = inst;
         setStatus("ready");
@@ -45,7 +49,7 @@ function MujocoProvider({ wasmUrl, children, onError }) {
     return () => {
       isMounted.current = false;
     };
-  }, [wasmUrl]);
+  }, [wasmUrl, timeout]);
   return /* @__PURE__ */ jsx(
     MujocoContext.Provider,
     {
@@ -55,229 +59,12 @@ function MujocoProvider({ wasmUrl, children, onError }) {
   );
 }
 
-// src/core/GenericIK.ts
-var DEFAULTS = {
-  maxIterations: 50,
-  damping: 0.01,
-  tolerance: 1e-3,
-  epsilon: 1e-6,
-  posWeight: 1,
-  rotWeight: 0.3
-};
-var GenericIK = class {
-  mujoco;
-  constructor(mujoco) {
-    this.mujoco = mujoco;
-  }
-  /**
-   * Solve IK for a target 6-DOF pose.
-   * @param model       MuJoCo model
-   * @param data        MuJoCo data (qpos will be temporarily modified, then restored)
-   * @param siteId      Index of the end-effector site to control
-   * @param numJoints   Number of arm joints (assumes qpos[0..numJoints-1])
-   * @param targetPos   Target position in world frame
-   * @param targetQuat  Target orientation in world frame
-   * @param currentQ    Current joint angles (length = numJoints)
-   * @param opts        Optional solver parameters
-   * @returns Joint angles array, or null if solver diverged
-   */
-  solve(model, data, siteId, numJoints, targetPos, targetQuat, currentQ, opts) {
-    const o = { ...DEFAULTS, ...opts };
-    const n = numJoints;
-    const savedQpos = new Float64Array(data.qpos.length);
-    savedQpos.set(data.qpos);
-    const R_target = quatToMat3(targetQuat);
-    const q = new Float64Array(n);
-    for (let i = 0; i < n; i++) q[i] = currentQ[i];
-    const J = new Float64Array(6 * n);
-    const JJt = new Float64Array(36);
-    const rhs = new Float64Array(6);
-    const x = new Float64Array(6);
-    const dq = new Float64Array(n);
-    const baseSitePos = new Float64Array(3);
-    const baseSiteMat = new Float64Array(9);
-    const pertSitePos = new Float64Array(3);
-    const pertSiteMat = new Float64Array(9);
-    let bestQ = null;
-    let bestErr = Infinity;
-    for (let iter = 0; iter < o.maxIterations; iter++) {
-      for (let i = 0; i < n; i++) data.qpos[i] = q[i];
-      this.mujoco.mj_forward(model, data);
-      const sp = data.site_xpos;
-      const sm = data.site_xmat;
-      const off3 = siteId * 3;
-      const off9 = siteId * 9;
-      for (let i = 0; i < 3; i++) baseSitePos[i] = sp[off3 + i];
-      for (let i = 0; i < 9; i++) baseSiteMat[i] = sm[off9 + i];
-      const posErr0 = targetPos.x - baseSitePos[0];
-      const posErr1 = targetPos.y - baseSitePos[1];
-      const posErr2 = targetPos.z - baseSitePos[2];
-      const rotErr = orientationError(baseSiteMat, R_target);
-      const error = [
-        posErr0 * o.posWeight,
-        posErr1 * o.posWeight,
-        posErr2 * o.posWeight,
-        rotErr[0] * o.rotWeight,
-        rotErr[1] * o.rotWeight,
-        rotErr[2] * o.rotWeight
-      ];
-      const errNorm = Math.sqrt(
-        error[0] * error[0] + error[1] * error[1] + error[2] * error[2] + error[3] * error[3] + error[4] * error[4] + error[5] * error[5]
-      );
-      if (errNorm < bestErr) {
-        bestErr = errNorm;
-        bestQ = Array.from(q);
-      }
-      if (errNorm < o.tolerance) break;
-      for (let j = 0; j < n; j++) {
-        const saved = data.qpos[j];
-        data.qpos[j] = q[j] + o.epsilon;
-        this.mujoco.mj_forward(model, data);
-        for (let i = 0; i < 3; i++) pertSitePos[i] = sp[off3 + i];
-        for (let i = 0; i < 9; i++) pertSiteMat[i] = sm[off9 + i];
-        J[0 * n + j] = (pertSitePos[0] - baseSitePos[0]) / o.epsilon * o.posWeight;
-        J[1 * n + j] = (pertSitePos[1] - baseSitePos[1]) / o.epsilon * o.posWeight;
-        J[2 * n + j] = (pertSitePos[2] - baseSitePos[2]) / o.epsilon * o.posWeight;
-        const dRot = angularDelta(baseSiteMat, pertSiteMat);
-        J[3 * n + j] = dRot[0] / o.epsilon * o.rotWeight;
-        J[4 * n + j] = dRot[1] / o.epsilon * o.rotWeight;
-        J[5 * n + j] = dRot[2] / o.epsilon * o.rotWeight;
-        data.qpos[j] = saved;
-      }
-      for (let i = 0; i < n; i++) data.qpos[i] = q[i];
-      for (let r = 0; r < 6; r++) {
-        for (let c = 0; c < 6; c++) {
-          let sum = 0;
-          for (let k = 0; k < n; k++) {
-            sum += J[r * n + k] * J[c * n + k];
-          }
-          JJt[r * 6 + c] = sum + (r === c ? o.damping : 0);
-        }
-      }
-      for (let i = 0; i < 6; i++) rhs[i] = error[i];
-      solve6x6(JJt, rhs, x);
-      for (let j = 0; j < n; j++) {
-        let sum = 0;
-        for (let r = 0; r < 6; r++) {
-          sum += J[r * n + j] * x[r];
-        }
-        dq[j] = sum;
-      }
-      for (let i = 0; i < n; i++) q[i] += dq[i];
-    }
-    data.qpos.set(savedQpos);
-    this.mujoco.mj_forward(model, data);
-    return bestQ;
-  }
-};
-function quatToMat3(q) {
-  const m = new Float64Array(9);
-  const x = q.x, y = q.y, z = q.z, w = q.w;
-  const xx = x * x, yy = y * y, zz = z * z;
-  const xy = x * y, xz = x * z, yz = y * z;
-  const wx = w * x, wy = w * y, wz = w * z;
-  m[0] = 1 - 2 * (yy + zz);
-  m[1] = 2 * (xy - wz);
-  m[2] = 2 * (xz + wy);
-  m[3] = 2 * (xy + wz);
-  m[4] = 1 - 2 * (xx + zz);
-  m[5] = 2 * (yz - wx);
-  m[6] = 2 * (xz - wy);
-  m[7] = 2 * (yz + wx);
-  m[8] = 1 - 2 * (xx + yy);
-  return m;
-}
-function orientationError(R_cur, R_tgt) {
-  const Re = new Float64Array(9);
-  for (let i = 0; i < 3; i++) {
-    for (let j = 0; j < 3; j++) {
-      let s2 = 0;
-      for (let k = 0; k < 3; k++) {
-        s2 += R_tgt[i * 3 + k] * R_cur[j * 3 + k];
-      }
-      Re[i * 3 + j] = s2;
-    }
-  }
-  const trace = Re[0] + Re[4] + Re[8];
-  const cosAngle = Math.max(-1, Math.min(1, (trace - 1) * 0.5));
-  const angle = Math.acos(cosAngle);
-  if (angle < 1e-6) {
-    return [0, 0, 0];
-  }
-  if (angle > Math.PI - 1e-6) {
-    return [
-      0.5 * (Re[7] - Re[5]),
-      0.5 * (Re[2] - Re[6]),
-      0.5 * (Re[3] - Re[1])
-    ];
-  }
-  const s = angle / (2 * Math.sin(angle));
-  return [
-    s * (Re[7] - Re[5]),
-    s * (Re[2] - Re[6]),
-    s * (Re[3] - Re[1])
-  ];
-}
-function angularDelta(R_base, R_pert) {
-  const dR = new Float64Array(9);
-  for (let i = 0; i < 3; i++) {
-    for (let j = 0; j < 3; j++) {
-      let s = 0;
-      for (let k = 0; k < 3; k++) {
-        s += R_pert[i * 3 + k] * R_base[j * 3 + k];
-      }
-      dR[i * 3 + j] = s;
-    }
-  }
-  return [
-    0.5 * (dR[7] - dR[5]),
-    0.5 * (dR[2] - dR[6]),
-    0.5 * (dR[3] - dR[1])
-  ];
-}
-function solve6x6(A, b, x) {
-  const N = 6;
-  const a = new Float64Array(A);
-  const r = new Float64Array(b);
-  for (let col = 0; col < N; col++) {
-    let maxVal = Math.abs(a[col * N + col]);
-    let maxRow = col;
-    for (let row = col + 1; row < N; row++) {
-      const val = Math.abs(a[row * N + col]);
-      if (val > maxVal) {
-        maxVal = val;
-        maxRow = row;
-      }
-    }
-    if (maxRow !== col) {
-      for (let k = 0; k < N; k++) {
-        const tmp2 = a[col * N + k];
-        a[col * N + k] = a[maxRow * N + k];
-        a[maxRow * N + k] = tmp2;
-      }
-      const tmp = r[col];
-      r[col] = r[maxRow];
-      r[maxRow] = tmp;
-    }
-    const pivot = a[col * N + col];
-    if (Math.abs(pivot) < 1e-12) {
-      x.fill(0);
-      return;
-    }
-    for (let row = col + 1; row < N; row++) {
-      const factor = a[row * N + col] / pivot;
-      for (let k = col; k < N; k++) {
-        a[row * N + k] -= factor * a[col * N + k];
-      }
-      r[row] -= factor * r[col];
-    }
-  }
-  for (let row = N - 1; row >= 0; row--) {
-    let sum = r[row];
-    for (let k = row + 1; k < N; k++) {
-      sum -= a[row * N + k] * x[k];
-    }
-    x[row] = sum / a[row * N + row];
+// src/types.ts
+function getContact(data, i) {
+  try {
+    return data.contact.get(i);
+  } catch {
+    return void 0;
   }
 }
 
@@ -340,6 +127,16 @@ function findTendonByName(mjModel, name) {
   }
   return -1;
 }
+function getActuatedScalarQposAdr(mjModel, actuatorId) {
+  if (actuatorId < 0 || actuatorId >= mjModel.nu) return -1;
+  const trnType = mjModel.actuator_trntype?.[actuatorId];
+  if (trnType !== void 0 && trnType !== 0 && trnType !== 1) return -1;
+  const jointId = mjModel.actuator_trnid[2 * actuatorId];
+  if (jointId < 0 || jointId >= mjModel.njnt) return -1;
+  const jntType = mjModel.jnt_type[jointId];
+  if (jntType !== 2 && jntType !== 3) return -1;
+  return mjModel.jnt_qposadr[jointId];
+}
 function sceneObjectToXml(obj) {
   const joint = obj.freejoint ? "<freejoint/>" : "";
   const pos = obj.position.map((v) => v.toFixed(3)).join(" ");
@@ -390,7 +187,13 @@ async function loadScene(mujoco, config, onProgress) {
       for (const patch of config.xmlPatches ?? []) {
         if (fname.endsWith(patch.target) || fname === patch.target) {
           if (patch.replace) {
-            text = text.replace(patch.replace[0], patch.replace[1]);
+            const [from, to] = patch.replace;
+            if (text.includes(from)) {
+              text = text.replace(from, to);
+            } else {
+              const preview = from.length > 80 ? `${from.slice(0, 80)}...` : from;
+              console.warn(`XML patch replace pattern not found in ${fname}: "${preview}"`);
+            }
           }
           if (patch.inject && patch.injectAfter) {
             const idx = text.indexOf(patch.injectAfter);
@@ -398,7 +201,12 @@ async function loadScene(mujoco, config, onProgress) {
               const tagEnd = text.indexOf(">", idx + patch.injectAfter.length);
               if (tagEnd !== -1) {
                 text = text.slice(0, tagEnd + 1) + patch.inject + text.slice(tagEnd + 1);
+              } else {
+                console.warn(`XML patch inject failed in ${fname}: could not find tag end after "${patch.injectAfter}"`);
               }
+            } else {
+              const preview = patch.injectAfter.length > 80 ? `${patch.injectAfter.slice(0, 80)}...` : patch.injectAfter;
+              console.warn(`XML patch inject anchor not found in ${fname}: "${preview}"`);
             }
           }
         }
@@ -417,28 +225,25 @@ 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) {
-    for (let i = 0; i < config.homeJoints.length; i++) {
+    const homeCount = Math.min(config.homeJoints.length, mjModel.nu);
+    for (let i = 0; i < homeCount; i++) {
       mjData.ctrl[i] = config.homeJoints[i];
-      if (mjModel.actuator_trnid[2 * i + 1] === 1) {
-        const jointId = mjModel.actuator_trnid[2 * i];
-        if (jointId >= 0 && jointId < mjModel.njnt) {
-          const qposAdr = mjModel.jnt_qposadr[jointId];
-          mjData.qpos[qposAdr] = config.homeJoints[i];
-        }
+      const qposAdr = getActuatedScalarQposAdr(mjModel, i);
+      if (qposAdr !== -1) {
+        mjData.qpos[qposAdr] = config.homeJoints[i];
       }
     }
   }
   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");
   const compiler = xmlDoc.querySelector("compiler");
-  const meshDir = compiler?.getAttribute("meshdir") || "";
-  const textureDir = compiler?.getAttribute("texturedir") || "";
+  const assetDir = compiler?.getAttribute("assetdir") || "";
+  const meshDir = compiler?.getAttribute("meshdir") || assetDir;
+  const textureDir = compiler?.getAttribute("texturedir") || assetDir;
   const currentDir = currentFile.includes("/") ? currentFile.substring(0, currentFile.lastIndexOf("/") + 1) : "";
   xmlDoc.querySelectorAll("[file]").forEach((el) => {
     const fileAttr = el.getAttribute("file");
@@ -519,6 +324,8 @@ var _applyPoint = new Float64Array(3);
 var _rayPnt = new Float64Array(3);
 var _rayVec = new Float64Array(3);
 var _rayGeomId = new Int32Array(1);
+var _projRaycaster = new THREE11.Raycaster();
+var _projNdc = new THREE11.Vector2();
 var MujocoSimContext = createContext(null);
 function useMujocoSim() {
   const ctx = useContext(MujocoSimContext);
@@ -563,7 +370,6 @@ function MujocoSimProvider({
   substeps,
   paused,
   speed,
-  interpolate,
   children
 }) {
   const { gl, camera } = useThree();
@@ -572,25 +378,18 @@ function MujocoSimProvider({
   const mjDataRef = useRef(null);
   const mujocoRef = useRef(mujoco);
   const configRef = useRef(config);
-  const siteIdRef = useRef(-1);
-  const gripperIdRef = useRef(-1);
-  const ikEnabledRef = useRef(false);
-  const ikCalculatingRef = useRef(false);
   const pausedRef = useRef(paused ?? false);
   const speedRef = useRef(speed ?? 1);
   const substepsRef = useRef(substeps ?? 1);
-  const interpolateRef = useRef(interpolate ?? false);
-  const firstIkEnableRef = useRef(true);
   const stepsToRunRef = useRef(0);
-  useRef(null);
-  useRef(null);
-  useRef(0);
+  const loadGenRef = useRef(0);
   const onSelectionRef = useRef(onSelection);
   onSelectionRef.current = onSelection;
   const onStepRef = useRef(onStep);
   onStepRef.current = onStep;
   const beforeStepCallbacks = useRef(/* @__PURE__ */ new Set());
   const afterStepCallbacks = useRef(/* @__PURE__ */ new Set());
+  const resetCallbacks = useRef(/* @__PURE__ */ new Set());
   configRef.current = config;
   useEffect(() => {
     pausedRef.current = paused ?? false;
@@ -601,9 +400,6 @@ function MujocoSimProvider({
   useEffect(() => {
     substepsRef.current = substeps ?? 1;
   }, [substeps]);
-  useEffect(() => {
-    interpolateRef.current = interpolate ?? false;
-  }, [interpolate]);
   useEffect(() => {
     if (!gravity) return;
     const model = mjModelRef.current;
@@ -618,74 +414,6 @@ function MujocoSimProvider({
     if (!model?.opt) return;
     model.opt.timestep = timestep;
   }, [timestep]);
-  const ikTargetRef = useRef(new THREE.Group());
-  const genericIkRef = useRef(new GenericIK(mujoco));
-  const gizmoAnimRef = useRef({
-    active: false,
-    startPos: new THREE.Vector3(),
-    endPos: new THREE.Vector3(),
-    startRot: new THREE.Quaternion(),
-    endRot: new THREE.Quaternion(),
-    startTime: 0,
-    duration: 1e3
-  });
-  const cameraAnimRef = useRef({
-    active: false,
-    startPos: new THREE.Vector3(),
-    endPos: new THREE.Vector3(),
-    startRot: new THREE.Quaternion(),
-    endRot: new THREE.Quaternion(),
-    startTarget: new THREE.Vector3(),
-    endTarget: new THREE.Vector3(),
-    startTime: 0,
-    duration: 0,
-    resolve: null
-  });
-  const orbitTargetRef = useRef(new THREE.Vector3(0, 0, 0));
-  const syncGizmoToSite = useCallback((data, siteId, target) => {
-    if (siteId === -1) return;
-    const sitePos = data.site_xpos.subarray(siteId * 3, siteId * 3 + 3);
-    const siteMat = data.site_xmat.subarray(siteId * 9, siteId * 9 + 9);
-    target.position.set(sitePos[0], sitePos[1], sitePos[2]);
-    const m = new THREE.Matrix4().set(
-      siteMat[0],
-      siteMat[1],
-      siteMat[2],
-      0,
-      siteMat[3],
-      siteMat[4],
-      siteMat[5],
-      0,
-      siteMat[6],
-      siteMat[7],
-      siteMat[8],
-      0,
-      0,
-      0,
-      0,
-      1
-    );
-    target.quaternion.setFromRotationMatrix(m);
-  }, []);
-  const ikSolveFn = useCallback(
-    (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,
-        configRef.current.numArmJoints ?? 7,
-        pos,
-        quat,
-        currentQ
-      );
-    },
-    []
-  );
-  const ikSolveFnRef = useRef(ikSolveFn);
-  ikSolveFnRef.current = ikSolveFn;
   useEffect(() => {
     let disposed = false;
     (async () => {
@@ -698,8 +426,6 @@ function MujocoSimProvider({
         }
         mjModelRef.current = result.mjModel;
         mjDataRef.current = result.mjData;
-        siteIdRef.current = result.siteId;
-        gripperIdRef.current = result.gripperId;
         if (gravity && result.mjModel.opt?.gravity) {
           result.mjModel.opt.gravity[0] = gravity[0];
           result.mjModel.opt.gravity[1] = gravity[1];
@@ -708,9 +434,6 @@ function MujocoSimProvider({
         if (timestep !== void 0 && result.mjModel.opt) {
           result.mjModel.opt.timestep = timestep;
         }
-        if (ikTargetRef.current) {
-          syncGizmoToSite(result.mjData, result.siteId, ikTargetRef.current);
-        }
         setStatus("ready");
       } catch (e) {
         if (!disposed) {
@@ -744,42 +467,10 @@ function MujocoSimProvider({
       }
     }
   }, [status]);
-  useFrame((state) => {
+  useFrame((_state, delta) => {
     const model = mjModelRef.current;
     const data = mjDataRef.current;
     if (!model || !data) return;
-    const ga = gizmoAnimRef.current;
-    const target = ikTargetRef.current;
-    if (ga.active && target) {
-      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;
-    }
-    const ca = cameraAnimRef.current;
-    if (ca.active) {
-      const now = performance.now();
-      const progress = Math.min((now - ca.startTime) / ca.duration, 1);
-      const ease = progress < 0.5 ? 4 * progress * progress * progress : 1 - Math.pow(-2 * progress + 2, 3) / 2;
-      camera.position.lerpVectors(ca.startPos, ca.endPos, ease);
-      camera.quaternion.slerpQuaternions(ca.startRot, ca.endRot, ease);
-      orbitTargetRef.current.lerpVectors(ca.startTarget, ca.endTarget, ease);
-      const orbitControls = state.controls;
-      if (orbitControls?.target) {
-        orbitControls.target.copy(orbitTargetRef.current);
-      }
-      if (progress >= 1) {
-        ca.active = false;
-        camera.position.copy(ca.endPos);
-        camera.quaternion.copy(ca.endRot);
-        orbitTargetRef.current.copy(ca.endTarget);
-        ca.resolve?.();
-        ca.resolve = null;
-      }
-    }
     const shouldStep = !pausedRef.current || stepsToRunRef.current > 0;
     if (!shouldStep) return;
     for (let i = 0; i < model.nv; i++) {
@@ -788,18 +479,6 @@ function MujocoSimProvider({
     for (const cb of beforeStepCallbacks.current) {
       cb(model, data);
     }
-    if (ikEnabledRef.current && target) {
-      ikCalculatingRef.current = true;
-      const numArm = configRef.current.numArmJoints ?? 7;
-      const currentQ = [];
-      for (let i = 0; i < numArm; i++) currentQ.push(data.qpos[i]);
-      const solution = ikSolveFnRef.current(target.position, target.quaternion, currentQ);
-      if (solution) {
-        for (let i = 0; i < numArm; i++) data.ctrl[i] = solution[i];
-      }
-    } else {
-      ikCalculatingRef.current = false;
-    }
     const numSubsteps = substepsRef.current;
     if (stepsToRunRef.current > 0) {
       for (let s = 0; s < stepsToRunRef.current; s++) {
@@ -808,7 +487,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);
@@ -824,72 +504,24 @@ function MujocoSimProvider({
     const model = mjModelRef.current;
     const data = mjDataRef.current;
     if (!model || !data) return;
-    gizmoAnimRef.current.active = false;
     mujoco.mj_resetData(model, data);
     const homeJoints = configRef.current.homeJoints;
     if (homeJoints) {
-      for (let i = 0; i < homeJoints.length; i++) {
+      const homeCount = Math.min(homeJoints.length, model.nu);
+      for (let i = 0; i < homeCount; i++) {
         data.ctrl[i] = homeJoints[i];
-        if (model.actuator_trnid[2 * i + 1] === 1) {
-          const jointId = model.actuator_trnid[2 * i];
-          if (jointId >= 0 && jointId < model.njnt) {
-            const qposAdr = model.jnt_qposadr[jointId];
-            data.qpos[qposAdr] = homeJoints[i];
-          }
+        const qposAdr = getActuatedScalarQposAdr(model, i);
+        if (qposAdr !== -1) {
+          data.qpos[qposAdr] = homeJoints[i];
         }
       }
     }
     configRef.current.onReset?.(model, data);
     mujoco.mj_forward(model, data);
-    if (ikTargetRef.current) {
-      syncGizmoToSite(data, siteIdRef.current, ikTargetRef.current);
-    }
-    firstIkEnableRef.current = true;
-    ikEnabledRef.current = false;
-  }, [mujoco, syncGizmoToSite]);
-  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;
+    for (const cb of resetCallbacks.current) {
+      cb();
     }
-  }, [syncGizmoToSite]);
-  const syncTargetToSite = useCallback(() => {
-    const data = mjDataRef.current;
-    const target = ikTargetRef.current;
-    if (data && target) syncGizmoToSite(data, siteIdRef.current, target);
-  }, [syncGizmoToSite]);
-  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 THREE.Quaternion().setFromEuler(new THREE.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]
-  );
+  }, [mujoco]);
   const setSpeed = useCallback((multiplier) => {
     speedRef.current = multiplier;
   }, []);
@@ -1051,19 +683,16 @@ function MujocoSimProvider({
     const contacts = [];
     const ncon = data.ncon;
     for (let i = 0; i < ncon; i++) {
-      try {
-        const c = data.contact.get(i);
-        contacts.push({
-          geom1: c.geom1,
-          geom1Name: getName(model, model.name_geomadr[c.geom1]),
-          geom2: c.geom2,
-          geom2Name: getName(model, model.name_geomadr[c.geom2]),
-          pos: [c.pos[0], c.pos[1], c.pos[2]],
-          depth: c.dist
-        });
-      } catch {
-        break;
-      }
+      const c = getContact(data, i);
+      if (!c) break;
+      contacts.push({
+        geom1: c.geom1,
+        geom1Name: getName(model, model.name_geomadr[c.geom1]),
+        geom2: c.geom2,
+        geom2Name: getName(model, model.name_geomadr[c.geom2]),
+        pos: [c.pos[0], c.pos[1], c.pos[2]],
+        depth: c.dist
+      });
     }
     return contacts;
   }, []);
@@ -1202,7 +831,7 @@ function MujocoSimProvider({
       const geomId = _rayGeomId[0];
       const bodyId = geomId >= 0 ? model.geom_bodyid[geomId] : -1;
       return {
-        point: new THREE.Vector3(
+        point: new THREE11.Vector3(
           origin.x + dir.x * dist,
           origin.y + dir.y * dist,
           origin.z + dir.z * dist
@@ -1240,10 +869,10 @@ function MujocoSimProvider({
       for (let i = 0; i < model.nv; i++) data.qvel[i] = model.key_qvel[qvelOffset + i];
     }
     mujoco.mj_forward(model, data);
-    if (ikTargetRef.current) {
-      syncGizmoToSite(data, siteIdRef.current, ikTargetRef.current);
+    for (const cb of resetCallbacks.current) {
+      cb();
     }
-  }, [mujoco, syncGizmoToSite]);
+  }, [mujoco]);
   const getKeyframeNames = useCallback(() => {
     const model = mjModelRef.current;
     if (!model) return [];
@@ -1257,6 +886,7 @@ function MujocoSimProvider({
     return mjModelRef.current?.nkey ?? 0;
   }, []);
   const loadSceneApi = useCallback(async (newConfig) => {
+    const gen = ++loadGenRef.current;
     try {
       mjModelRef.current?.delete();
       mjDataRef.current?.delete();
@@ -1264,28 +894,21 @@ function MujocoSimProvider({
       mjDataRef.current = null;
       setStatus("loading");
       const result = await loadScene(mujoco, newConfig);
+      if (gen !== loadGenRef.current) {
+        result.mjModel.delete();
+        result.mjData.delete();
+        return;
+      }
       mjModelRef.current = result.mjModel;
       mjDataRef.current = result.mjData;
-      siteIdRef.current = result.siteId;
-      gripperIdRef.current = result.gripperId;
       configRef.current = newConfig;
-      if (ikTargetRef.current) {
-        syncGizmoToSite(result.mjData, result.siteId, ikTargetRef.current);
-      }
       setStatus("ready");
     } catch (e) {
+      if (gen !== loadGenRef.current) return;
       setStatus("error");
       throw e;
     }
-  }, [mujoco, syncGizmoToSite]);
-  const getGizmoStats = useCallback(() => {
-    const target = ikTargetRef.current;
-    if (!ikCalculatingRef.current || !target) return null;
-    return {
-      pos: target.position.clone(),
-      rot: new THREE.Euler().setFromQuaternion(target.quaternion)
-    };
-  }, []);
+  }, [mujoco]);
   const getCanvasSnapshot = useCallback(
     (width, height, mimeType = "image/jpeg") => {
       if (width && height) {
@@ -1309,9 +932,8 @@ function MujocoSimProvider({
       virtCam.lookAt(lookAt);
       virtCam.updateMatrixWorld();
       virtCam.updateProjectionMatrix();
-      const ndc = new THREE.Vector2(x * 2 - 1, -(y * 2 - 1));
-      const raycaster = new THREE.Raycaster();
-      raycaster.setFromCamera(ndc, virtCam);
+      _projNdc.set(x * 2 - 1, -(y * 2 - 1));
+      _projRaycaster.setFromCamera(_projNdc, virtCam);
       const objects = [];
       const scene = camera.parent;
       if (scene) {
@@ -1319,7 +941,7 @@ function MujocoSimProvider({
           if (c.isMesh) objects.push(c);
         });
       }
-      const hits = raycaster.intersectObjects(objects);
+      const hits = _projRaycaster.intersectObjects(objects);
       if (hits.length > 0) {
         const hitObj = hits[0].object;
         const geomId = hitObj.userData.geomID !== void 0 ? hitObj.userData.geomID : -1;
@@ -1359,31 +981,6 @@ function MujocoSimProvider({
     model.geom_size[id * 3 + 1] = size[1];
     model.geom_size[id * 3 + 2] = size[2];
   }, []);
-  const getCameraState = useCallback(() => {
-    return { position: camera.position.clone(), target: orbitTargetRef.current.clone() };
-  }, [camera]);
-  const moveCameraTo = useCallback(
-    (position, target, durationMs) => {
-      return new Promise((resolve) => {
-        const ca = cameraAnimRef.current;
-        ca.active = true;
-        ca.startTime = performance.now();
-        ca.duration = durationMs;
-        ca.startPos.copy(camera.position);
-        ca.startRot.copy(camera.quaternion);
-        ca.startTarget.copy(orbitTargetRef.current);
-        ca.endPos.copy(position);
-        ca.endTarget.copy(target);
-        const dummyCam = camera.clone();
-        dummyCam.position.copy(position);
-        dummyCam.lookAt(target);
-        ca.endRot.copy(dummyCam.quaternion);
-        ca.resolve = resolve;
-        setTimeout(resolve, durationMs + 100);
-      });
-    },
-    [camera]
-  );
   const api = useMemo(
     () => ({
       get status() {
@@ -1425,15 +1022,8 @@ function MujocoSimProvider({
       getKeyframeNames,
       getKeyframeCount,
       loadScene: loadSceneApi,
-      setIkEnabled,
-      moveTarget,
-      syncTargetToSite,
-      solveIK,
-      getGizmoStats,
       getCanvasSnapshot,
       project2DTo3D,
-      getCameraState,
-      moveCameraTo,
       setBodyMass,
       setGeomFriction,
       setGeomSize,
@@ -1478,110 +1068,597 @@ function MujocoSimProvider({
       getKeyframeNames,
       getKeyframeCount,
       loadSceneApi,
-      setIkEnabled,
-      moveTarget,
-      syncTargetToSite,
-      solveIK,
-      getGizmoStats,
       getCanvasSnapshot,
       project2DTo3D,
-      getCameraState,
-      moveCameraTo,
       setBodyMass,
       setGeomFriction,
       setGeomSize
     ]
   );
-  const apiRef = useRef(api);
-  apiRef.current = api;
+  const apiRef = useRef(api);
+  apiRef.current = api;
+  const contextValue = useMemo(
+    () => ({
+      api,
+      mjModelRef,
+      mjDataRef,
+      mujocoRef,
+      configRef,
+      pausedRef,
+      speedRef,
+      substepsRef,
+      onSelectionRef,
+      beforeStepCallbacks,
+      afterStepCallbacks,
+      resetCallbacks,
+      status
+    }),
+    [api, status]
+  );
+  return /* @__PURE__ */ jsx(MujocoSimContext.Provider, { value: contextValue, children });
+}
+var MujocoCanvas = forwardRef(
+  function MujocoCanvas2({
+    config,
+    onReady,
+    onError,
+    onStep,
+    onSelection,
+    // Declarative physics config
+    gravity,
+    timestep,
+    substeps,
+    paused,
+    speed,
+    children,
+    ...canvasProps
+  }, 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(Canvas, { ...canvasProps, children: /* @__PURE__ */ jsx(
+      MujocoSimProvider,
+      {
+        mujoco,
+        config,
+        apiRef: ref,
+        onReady,
+        onError,
+        onStep,
+        onSelection,
+        gravity,
+        timestep,
+        substeps,
+        paused,
+        speed,
+        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);
+  if (keysA.length !== keysB.length) return false;
+  for (const key of keysA) {
+    if (a[key] !== b[key]) return false;
+  }
+  return true;
+}
+function createController(options, Impl) {
+  function Controller({
+    config,
+    children
+  }) {
+    const configObj = config ?? {};
+    const stableRef = useRef(configObj);
+    if (!shallowEqual(stableRef.current, configObj)) {
+      stableRef.current = configObj;
+    }
+    const stableConfig = stableRef.current;
+    const mergedConfig = useMemo(
+      () => ({ ...options.defaultConfig, ...stableConfig }),
+      [stableConfig]
+    );
+    return /* @__PURE__ */ jsx(Impl, { config: mergedConfig, children });
+  }
+  Controller.displayName = options.name;
+  Controller.controllerName = options.name;
+  Controller.defaultConfig = options.defaultConfig ?? {};
+  return Controller;
+}
+var IkContext = createContext(null);
+function useIk(options) {
+  const ctx = useContext(IkContext);
+  if (!ctx && !options?.optional) {
+    throw new Error("useIk() must be used inside an <IkController>");
+  }
+  return ctx;
+}
+
+// src/core/GenericIK.ts
+var DEFAULTS = {
+  maxIterations: 50,
+  damping: 0.01,
+  tolerance: 1e-3,
+  epsilon: 1e-6,
+  posWeight: 1,
+  rotWeight: 0.3
+};
+var GenericIK = class {
+  mujoco;
+  constructor(mujoco) {
+    this.mujoco = mujoco;
+  }
+  /**
+   * Solve IK for a target 6-DOF pose.
+   * @param model       MuJoCo model
+   * @param data        MuJoCo data (qpos will be temporarily modified, then restored)
+   * @param siteId      Index of the end-effector site to control
+   * @param numJoints   Number of arm joints (assumes qpos[0..numJoints-1])
+   * @param targetPos   Target position in world frame
+   * @param targetQuat  Target orientation in world frame
+   * @param currentQ    Current joint angles (length = numJoints)
+   * @param opts        Optional solver parameters
+   * @returns Joint angles array, or null if solver diverged
+   */
+  solve(model, data, siteId, numJoints, targetPos, targetQuat, currentQ, opts) {
+    const o = { ...DEFAULTS, ...opts };
+    const n = numJoints;
+    const savedQpos = new Float64Array(data.qpos.length);
+    savedQpos.set(data.qpos);
+    const R_target = quatToMat3(targetQuat);
+    const q = new Float64Array(n);
+    for (let i = 0; i < n; i++) q[i] = currentQ[i];
+    const J = new Float64Array(6 * n);
+    const JJt = new Float64Array(36);
+    const rhs = new Float64Array(6);
+    const x = new Float64Array(6);
+    const dq = new Float64Array(n);
+    const baseSitePos = new Float64Array(3);
+    const baseSiteMat = new Float64Array(9);
+    const pertSitePos = new Float64Array(3);
+    const pertSiteMat = new Float64Array(9);
+    let bestQ = null;
+    let bestErr = Infinity;
+    for (let iter = 0; iter < o.maxIterations; iter++) {
+      for (let i = 0; i < n; i++) data.qpos[i] = q[i];
+      this.mujoco.mj_forward(model, data);
+      const sp = data.site_xpos;
+      const sm = data.site_xmat;
+      const off3 = siteId * 3;
+      const off9 = siteId * 9;
+      for (let i = 0; i < 3; i++) baseSitePos[i] = sp[off3 + i];
+      for (let i = 0; i < 9; i++) baseSiteMat[i] = sm[off9 + i];
+      const posErr0 = targetPos.x - baseSitePos[0];
+      const posErr1 = targetPos.y - baseSitePos[1];
+      const posErr2 = targetPos.z - baseSitePos[2];
+      const rotErr = orientationError(baseSiteMat, R_target);
+      const error = [
+        posErr0 * o.posWeight,
+        posErr1 * o.posWeight,
+        posErr2 * o.posWeight,
+        rotErr[0] * o.rotWeight,
+        rotErr[1] * o.rotWeight,
+        rotErr[2] * o.rotWeight
+      ];
+      const errNorm = Math.sqrt(
+        error[0] * error[0] + error[1] * error[1] + error[2] * error[2] + error[3] * error[3] + error[4] * error[4] + error[5] * error[5]
+      );
+      if (errNorm < bestErr) {
+        bestErr = errNorm;
+        bestQ = Array.from(q);
+      }
+      if (errNorm < o.tolerance) break;
+      for (let j = 0; j < n; j++) {
+        const saved = data.qpos[j];
+        data.qpos[j] = q[j] + o.epsilon;
+        this.mujoco.mj_forward(model, data);
+        for (let i = 0; i < 3; i++) pertSitePos[i] = sp[off3 + i];
+        for (let i = 0; i < 9; i++) pertSiteMat[i] = sm[off9 + i];
+        J[0 * n + j] = (pertSitePos[0] - baseSitePos[0]) / o.epsilon * o.posWeight;
+        J[1 * n + j] = (pertSitePos[1] - baseSitePos[1]) / o.epsilon * o.posWeight;
+        J[2 * n + j] = (pertSitePos[2] - baseSitePos[2]) / o.epsilon * o.posWeight;
+        const dRot = angularDelta(baseSiteMat, pertSiteMat);
+        J[3 * n + j] = dRot[0] / o.epsilon * o.rotWeight;
+        J[4 * n + j] = dRot[1] / o.epsilon * o.rotWeight;
+        J[5 * n + j] = dRot[2] / o.epsilon * o.rotWeight;
+        data.qpos[j] = saved;
+      }
+      for (let i = 0; i < n; i++) data.qpos[i] = q[i];
+      for (let r = 0; r < 6; r++) {
+        for (let c = 0; c < 6; c++) {
+          let sum = 0;
+          for (let k = 0; k < n; k++) {
+            sum += J[r * n + k] * J[c * n + k];
+          }
+          JJt[r * 6 + c] = sum + (r === c ? o.damping : 0);
+        }
+      }
+      for (let i = 0; i < 6; i++) rhs[i] = error[i];
+      solve6x6(JJt, rhs, x);
+      for (let j = 0; j < n; j++) {
+        let sum = 0;
+        for (let r = 0; r < 6; r++) {
+          sum += J[r * n + j] * x[r];
+        }
+        dq[j] = sum;
+      }
+      for (let i = 0; i < n; i++) q[i] += dq[i];
+    }
+    data.qpos.set(savedQpos);
+    this.mujoco.mj_forward(model, data);
+    return bestQ;
+  }
+};
+function quatToMat3(q) {
+  const m = new Float64Array(9);
+  const x = q.x, y = q.y, z = q.z, w = q.w;
+  const xx = x * x, yy = y * y, zz = z * z;
+  const xy = x * y, xz = x * z, yz = y * z;
+  const wx = w * x, wy = w * y, wz = w * z;
+  m[0] = 1 - 2 * (yy + zz);
+  m[1] = 2 * (xy - wz);
+  m[2] = 2 * (xz + wy);
+  m[3] = 2 * (xy + wz);
+  m[4] = 1 - 2 * (xx + zz);
+  m[5] = 2 * (yz - wx);
+  m[6] = 2 * (xz - wy);
+  m[7] = 2 * (yz + wx);
+  m[8] = 1 - 2 * (xx + yy);
+  return m;
+}
+function orientationError(R_cur, R_tgt) {
+  const Re = new Float64Array(9);
+  for (let i = 0; i < 3; i++) {
+    for (let j = 0; j < 3; j++) {
+      let s2 = 0;
+      for (let k = 0; k < 3; k++) {
+        s2 += R_tgt[i * 3 + k] * R_cur[j * 3 + k];
+      }
+      Re[i * 3 + j] = s2;
+    }
+  }
+  const trace = Re[0] + Re[4] + Re[8];
+  const cosAngle = Math.max(-1, Math.min(1, (trace - 1) * 0.5));
+  const angle = Math.acos(cosAngle);
+  if (angle < 1e-6) {
+    return [0, 0, 0];
+  }
+  if (angle > Math.PI - 1e-6) {
+    return [
+      0.5 * (Re[7] - Re[5]),
+      0.5 * (Re[2] - Re[6]),
+      0.5 * (Re[3] - Re[1])
+    ];
+  }
+  const s = angle / (2 * Math.sin(angle));
+  return [
+    s * (Re[7] - Re[5]),
+    s * (Re[2] - Re[6]),
+    s * (Re[3] - Re[1])
+  ];
+}
+function angularDelta(R_base, R_pert) {
+  const dR = new Float64Array(9);
+  for (let i = 0; i < 3; i++) {
+    for (let j = 0; j < 3; j++) {
+      let s = 0;
+      for (let k = 0; k < 3; k++) {
+        s += R_pert[i * 3 + k] * R_base[j * 3 + k];
+      }
+      dR[i * 3 + j] = s;
+    }
+  }
+  return [
+    0.5 * (dR[7] - dR[5]),
+    0.5 * (dR[2] - dR[6]),
+    0.5 * (dR[3] - dR[1])
+  ];
+}
+function solve6x6(A, b, x) {
+  const N = 6;
+  const a = new Float64Array(A);
+  const r = new Float64Array(b);
+  for (let col = 0; col < N; col++) {
+    let maxVal = Math.abs(a[col * N + col]);
+    let maxRow = col;
+    for (let row = col + 1; row < N; row++) {
+      const val = Math.abs(a[row * N + col]);
+      if (val > maxVal) {
+        maxVal = val;
+        maxRow = row;
+      }
+    }
+    if (maxRow !== col) {
+      for (let k = 0; k < N; k++) {
+        const tmp2 = a[col * N + k];
+        a[col * N + k] = a[maxRow * N + k];
+        a[maxRow * N + k] = tmp2;
+      }
+      const tmp = r[col];
+      r[col] = r[maxRow];
+      r[maxRow] = tmp;
+    }
+    const pivot = a[col * N + col];
+    if (Math.abs(pivot) < 1e-12) {
+      x.fill(0);
+      return;
+    }
+    for (let row = col + 1; row < N; row++) {
+      const factor = a[row * N + col] / pivot;
+      for (let k = col; k < N; k++) {
+        a[row * N + k] -= factor * a[col * N + k];
+      }
+      r[row] -= factor * r[col];
+    }
+  }
+  for (let row = N - 1; row >= 0; row--) {
+    let sum = r[row];
+    for (let k = row + 1; k < N; k++) {
+      sum -= a[row * N + k] * x[k];
+    }
+    x[row] = sum / a[row * N + row];
+  }
+}
+var _syncMat4 = new THREE11.Matrix4();
+function syncGizmoToSite(data, siteId, target) {
+  if (siteId === -1) return;
+  const sitePos = data.site_xpos.subarray(siteId * 3, siteId * 3 + 3);
+  const siteMat = data.site_xmat.subarray(siteId * 9, siteId * 9 + 9);
+  target.position.set(sitePos[0], sitePos[1], sitePos[2]);
+  _syncMat4.set(
+    siteMat[0],
+    siteMat[1],
+    siteMat[2],
+    0,
+    siteMat[3],
+    siteMat[4],
+    siteMat[5],
+    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(
     () => ({
-      api,
-      mjModelRef,
-      mjDataRef,
-      mujocoRef,
-      configRef,
-      siteIdRef,
-      gripperIdRef,
       ikEnabledRef,
       ikCalculatingRef,
-      pausedRef,
-      speedRef,
-      substepsRef,
       ikTargetRef,
-      genericIkRef,
-      ikSolveFnRef,
-      firstIkEnableRef,
-      gizmoAnimRef,
-      cameraAnimRef,
-      onSelectionRef,
-      beforeStepCallbacks,
-      afterStepCallbacks,
-      status
+      siteIdRef,
+      setIkEnabled,
+      moveTarget,
+      syncTargetToSite: syncTargetToSiteApi,
+      solveIK,
+      getGizmoStats
     }),
-    [api, status]
+    [setIkEnabled, moveTarget, syncTargetToSiteApi, solveIK, getGizmoStats]
   );
-  return /* @__PURE__ */ jsx(MujocoSimContext.Provider, { value: contextValue, children });
+  return /* @__PURE__ */ jsx(IkContext.Provider, { value: contextValue, children });
 }
-var MujocoCanvas = forwardRef(
-  function MujocoCanvas2({
-    config,
-    onReady,
-    onError,
-    onStep,
-    onSelection,
-    // Declarative physics config (spec 1.1)
-    gravity,
-    timestep,
-    substeps,
-    paused,
-    speed,
-    interpolate,
-    gravityCompensation,
-    mjcfLights,
-    children,
-    ...canvasProps
-  }, 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(Canvas, { ...canvasProps, children: /* @__PURE__ */ jsx(
-      MujocoSimProvider,
-      {
-        mujoco,
-        config,
-        apiRef: ref,
-        onReady,
-        onError,
-        onStep,
-        onSelection,
-        gravity,
-        timestep,
-        substeps,
-        paused,
-        speed,
-        interpolate,
-        children
-      }
-    ) });
-  }
+var IkController = createController(
+  {
+    name: "IkController",
+    defaultConfig: {
+      damping: 0.01,
+      maxIterations: 50
+    }
+  },
+  IkControllerImpl
 );
-var CapsuleGeometry = class extends THREE.BufferGeometry {
+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 THREE.Path();
+    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 THREE.LatheGeometry(path.getPoints(capSegments), radialSegments);
+    const latheGeometry = new THREE11.LatheGeometry(path.getPoints(capSegments), radialSegments);
     const self = this;
     self.setIndex(latheGeometry.getIndex());
     self.setAttribute("position", latheGeometry.getAttribute("position"));
@@ -1589,27 +1666,27 @@ var CapsuleGeometry = class extends THREE.BufferGeometry {
     self.setAttribute("uv", latheGeometry.getAttribute("uv"));
   }
 };
-var Reflector = class extends THREE.Mesh {
+var Reflector = class extends THREE11.Mesh {
   isReflector = true;
   camera;
-  reflectorPlane = new THREE.Plane();
-  normal = new THREE.Vector3();
-  reflectorWorldPosition = new THREE.Vector3();
-  cameraWorldPosition = new THREE.Vector3();
-  rotationMatrix = new THREE.Matrix4();
-  lookAtPosition = new THREE.Vector3(0, 0, -1);
-  clipPlane = new THREE.Vector4();
-  view = new THREE.Vector3();
-  target = new THREE.Vector3();
-  q = new THREE.Vector4();
-  textureMatrix = new THREE.Matrix4();
+  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 THREE.PerspectiveCamera();
-    const color = options.color !== void 0 ? new THREE.Color(options.color) : new THREE.Color(8355711);
+    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;
@@ -1617,11 +1694,11 @@ var Reflector = class extends THREE.Mesh {
     const blendTexture = options.texture || void 0;
     const mixStrength = options.mixStrength !== void 0 ? options.mixStrength : 0.25;
     this.virtualCamera = this.camera;
-    this.renderTarget = new THREE.WebGLRenderTarget(textureWidth, textureHeight, {
+    this.renderTarget = new THREE11.WebGLRenderTarget(textureWidth, textureHeight, {
       samples: multisample,
-      type: THREE.HalfFloatType
+      type: THREE11.HalfFloatType
     });
-    this.material = new THREE.MeshPhysicalMaterial({
+    this.material = new THREE11.MeshPhysicalMaterial({
       map: blendTexture,
       color,
       roughness: 0.5,
@@ -1747,7 +1824,7 @@ var GeomBuilder = class {
     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 THREE.Color(16777215);
+    const color = new THREE11.Color(16777215);
     let opacity = 1;
     if (matId >= 0) {
       const rgba = mjModel.mat_rgba.subarray(matId * 4, matId * 4 + 4);
@@ -1762,16 +1839,16 @@ var GeomBuilder = class {
     let geo = null;
     const getVal = (v) => v?.value ?? v;
     if (type === getVal(MG.mjGEOM_PLANE)) {
-      geo = new THREE.PlaneGeometry(size[0] * 2 || 5, size[1] * 2 || 5);
+      geo = new THREE11.PlaneGeometry(size[0] * 2 || 5, size[1] * 2 || 5);
     } else if (type === getVal(MG.mjGEOM_SPHERE)) {
-      geo = new THREE.SphereGeometry(size[0], 24, 24);
+      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 THREE.BoxGeometry(size[0] * 2, size[1] * 2, size[2] * 2);
+      geo = new THREE11.BoxGeometry(size[0] * 2, size[1] * 2, size[2] * 2);
     } else if (type === getVal(MG.mjGEOM_CYLINDER)) {
-      geo = new THREE.CylinderGeometry(size[0], size[0], size[1] * 2, 24);
+      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];
@@ -1779,8 +1856,8 @@ var GeomBuilder = class {
       const vNum = mjModel.mesh_vertnum[mId];
       const fAdr = mjModel.mesh_faceadr[mId];
       const fNum = mjModel.mesh_facenum[mId];
-      geo = new THREE.BufferGeometry();
-      geo.setAttribute("position", new THREE.Float32BufferAttribute(mjModel.mesh_vert.subarray(vAdr * 3, (vAdr + vNum) * 3), 3));
+      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();
     }
@@ -1795,7 +1872,7 @@ var GeomBuilder = class {
           mixStrength: 0.25
         });
       } else {
-        mesh = new THREE.Mesh(geo, new THREE.MeshStandardMaterial({
+        mesh = new THREE11.Mesh(geo, new THREE11.MeshStandardMaterial({
           color,
           transparent: opacity < 1,
           opacity,
@@ -1814,16 +1891,17 @@ var GeomBuilder = class {
     return null;
   }
 };
-function SceneRenderer() {
+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);
-  }, [mujocoRef.current]);
+  }, [status, mujocoRef]);
   useEffect(() => {
-    if (status !== "ready") return;
+    if (status !== "ready" || !geomBuilder) return;
     const model = mjModelRef.current;
     const group = groupRef.current;
     if (!model || !group) return;
@@ -1834,7 +1912,7 @@ function SceneRenderer() {
     }
     const refs = [];
     for (let i = 0; i < model.nbody; i++) {
-      const bodyGroup = new THREE.Group();
+      const bodyGroup = new THREE11.Group();
       bodyGroup.userData.bodyID = i;
       for (let g = 0; g < model.ngeom; g++) {
         if (model.geom_bodyid[g] === i) {
@@ -1870,38 +1948,34 @@ function SceneRenderer() {
   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;
         }
-        if (obj && obj.userData.bodyID !== void 0 && obj.userData.bodyID > 0) {
+        const bodyID = obj?.userData.bodyID;
+        if (typeof bodyID === "number" && bodyID > 0) {
           const model = mjModelRef.current;
-          if (model && onSelectionRef.current) {
-            const name = getName(model, model.name_bodyadr[obj.userData.bodyID]);
-            onSelectionRef.current(obj.userData.bodyID, name);
+          if (model && bodyID < model.nbody && onSelectionRef.current) {
+            const name = getName(model, model.name_bodyadr[bodyID]);
+            onSelectionRef.current(bodyID, name);
           }
         }
       }
     }
   );
 }
-var _mat4 = new THREE.Matrix4();
-var _pos = new THREE.Vector3();
-var _quat = new THREE.Quaternion();
-var _scale = new THREE.Vector3(1, 1, 1);
+var _mat4 = new THREE11.Matrix4();
+var _pos = new THREE11.Vector3();
+var _quat = new THREE11.Quaternion();
+var _scale = new THREE11.Vector3(1, 1, 1);
 function IkGizmo({ siteName, scale = 0.18, onDrag }) {
-  const {
-    ikTargetRef,
-    mjModelRef,
-    mjDataRef,
-    siteIdRef,
-    api,
-    ikEnabledRef,
-    status
-  } = useMujocoSim();
+  const { mjModelRef, mjDataRef, status } = useMujocoSim();
+  const { ikTargetRef, siteIdRef, ikEnabledRef, setIkEnabled } = useIk();
   const wrapperRef = useRef(null);
   const pivotRef = useRef(null);
   const draggingRef = useRef(false);
@@ -1909,19 +1983,15 @@ function IkGizmo({ siteName, scale = 0.18, onDrag }) {
   const { controls } = useThree();
   useEffect(() => {
     const model = mjModelRef.current;
-    if (!model || status !== "ready") {
+    if (!model || status !== "ready" || !siteName) {
       localSiteIdRef.current = -1;
       return;
     }
-    if (siteName) {
-      localSiteIdRef.current = findSiteByName(model, siteName);
-    } else {
-      localSiteIdRef.current = siteIdRef.current;
-    }
-  }, [siteName, status, mjModelRef, siteIdRef]);
+    localSiteIdRef.current = findSiteByName(model, siteName);
+  }, [siteName, status, mjModelRef]);
   useFrame(() => {
     const data = mjDataRef.current;
-    const sid = localSiteIdRef.current;
+    const sid = siteName ? localSiteIdRef.current : siteIdRef.current;
     if (!data || sid < 0 || !wrapperRef.current) return;
     if (!draggingRef.current) {
       const p = data.site_xpos;
@@ -1966,7 +2036,7 @@ function IkGizmo({ siteName, scale = 0.18, onDrag }) {
       onDragStart: () => {
         draggingRef.current = true;
         if (!onDrag) {
-          if (!ikEnabledRef.current) api.setIkEnabled(true);
+          if (!ikEnabledRef.current) setIkEnabled(true);
         }
         if (controls) controls.enabled = false;
       },
@@ -1994,12 +2064,13 @@ function IkGizmo({ siteName, scale = 0.18, onDrag }) {
     }
   ) });
 }
-var _dummy = new THREE.Object3D();
+var _dummy = new THREE11.Object3D();
 function ContactMarkers({
   maxContacts = 100,
-  radius = 5e-3,
-  color = "#4f46e5",
-  visible = true
+  radius = 8e-3,
+  color = "#22d3ee",
+  visible = true,
+  ...groupProps
 } = {}) {
   const { mjDataRef, status } = useMujocoSim();
   const meshRef = useRef(null);
@@ -2013,62 +2084,53 @@ function ContactMarkers({
     const ncon = data.ncon;
     const count = Math.min(ncon, maxContacts);
     for (let i = 0; i < count; i++) {
-      try {
-        const c = data.contact.get(i);
-        if (!c) break;
-        _dummy.position.set(c.pos[0], c.pos[1], c.pos[2]);
-        _dummy.updateMatrix();
-        mesh.setMatrixAt(i, _dummy.matrix);
-      } catch {
+      const c = getContact(data, i);
+      if (!c) {
         mesh.count = i;
         mesh.instanceMatrix.needsUpdate = true;
         return;
       }
+      _dummy.position.set(c.pos[0], c.pos[1], c.pos[2]);
+      _dummy.updateMatrix();
+      mesh.setMatrixAt(i, _dummy.matrix);
     }
     mesh.count = count;
     mesh.instanceMatrix.needsUpdate = true;
   });
   if (status !== "ready") return null;
-  return /* @__PURE__ */ jsxs("instancedMesh", { ref: meshRef, args: [void 0, void 0, maxContacts], 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(
-      "meshStandardMaterial",
-      {
-        color,
-        emissive: color,
-        emissiveIntensity: 0.3,
-        roughness: 0.5
-      }
-    )
-  ] });
+    /* @__PURE__ */ jsx("meshBasicMaterial", { color, depthTest: false })
+  ] }) });
 }
 var _force = new Float64Array(3);
 var _torque = new Float64Array(3);
 var _point = new Float64Array(3);
-var _bodyPos = new THREE.Vector3();
-var _bodyQuat = new THREE.Quaternion();
-var _worldHit = new THREE.Vector3();
-var _raycaster = new THREE.Raycaster();
-var _mouse = new THREE.Vector2();
+var _bodyPos = new THREE11.Vector3();
+var _bodyQuat = new THREE11.Quaternion();
+var _worldHit = new THREE11.Vector3();
+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();
   const draggingRef = useRef(false);
   const bodyIdRef = useRef(-1);
   const grabDistanceRef = useRef(0);
-  const localHitRef = useRef(new THREE.Vector3());
-  const grabWorldRef = useRef(new THREE.Vector3());
-  const mouseWorldRef = useRef(new THREE.Vector3());
+  const localHitRef = useRef(new THREE11.Vector3());
+  const grabWorldRef = useRef(new THREE11.Vector3());
+  const mouseWorldRef = useRef(new THREE11.Vector3());
   const arrowRef = useRef(null);
   const groupRef = useRef(null);
   useEffect(() => {
     if (!showArrow || !groupRef.current) return;
-    const arrow = new THREE.ArrowHelper(
-      new THREE.Vector3(0, 1, 0),
-      new THREE.Vector3(),
+    const arrow = new THREE11.ArrowHelper(
+      new THREE11.Vector3(0, 1, 0),
+      new THREE11.Vector3(),
       0.1,
       16729156
     );
@@ -2196,7 +2258,7 @@ function DragInteraction({
     if (!arrow) return;
     if (draggingRef.current && bodyIdRef.current > 0) {
       arrow.visible = true;
-      const dir = mouseWorldRef.current.clone().sub(grabWorldRef.current);
+      const dir = _bodyPos.copy(mouseWorldRef.current).sub(grabWorldRef.current);
       const len = dir.length();
       if (len > 1e-3) {
         dir.normalize();
@@ -2209,9 +2271,9 @@ function DragInteraction({
     }
   });
   if (status !== "ready") return null;
-  return /* @__PURE__ */ jsx("group", { ref: groupRef });
+  return /* @__PURE__ */ jsx("group", { ...groupProps, ref: groupRef });
 }
-function SceneLights({ intensity = 1 }) {
+function useSceneLights(intensity = 1) {
   const { mjModelRef, status } = useMujocoSim();
   const { scene } = useThree();
   const lightsRef = useRef([]);
@@ -2239,7 +2301,7 @@ function SceneLights({ intensity = 1 }) {
       const dr = model.light_diffuse ? model.light_diffuse[3 * i] : 1;
       const dg = model.light_diffuse ? model.light_diffuse[3 * i + 1] : 1;
       const db = model.light_diffuse ? model.light_diffuse[3 * i + 2] : 1;
-      const color = new THREE.Color(dr, dg, db);
+      const color = new THREE11.Color(dr, dg, db);
       const px = model.light_pos[3 * i];
       const py = model.light_pos[3 * i + 1];
       const pz = model.light_pos[3 * i + 2];
@@ -2247,7 +2309,7 @@ function SceneLights({ intensity = 1 }) {
       const dy = model.light_dir[3 * i + 1];
       const dz = model.light_dir[3 * i + 2];
       if (isDirectional) {
-        const light = new THREE.DirectionalLight(color, finalIntensity);
+        const light = new THREE11.DirectionalLight(color, finalIntensity);
         light.position.set(px, py, pz);
         light.target.position.set(px + dx, py + dy, pz + dz);
         light.castShadow = castShadow;
@@ -2270,7 +2332,7 @@ function SceneLights({ intensity = 1 }) {
         const cutoff = model.light_cutoff ? model.light_cutoff[i] : 45;
         const exponent = model.light_exponent ? model.light_exponent[i] : 10;
         const angle = cutoff * Math.PI / 180;
-        const light = new THREE.SpotLight(color, finalIntensity, 0, angle, exponent / 128);
+        const light = new THREE11.SpotLight(color, finalIntensity, 0, angle, exponent / 128);
         light.position.set(px, py, pz);
         light.target.position.set(px + dx, py + dy, pz + dz);
         light.castShadow = castShadow;
@@ -2300,6 +2362,11 @@ function SceneLights({ intensity = 1 }) {
       targetsRef.current = [];
     };
   }, [status, mjModelRef, scene, intensity]);
+}
+
+// src/components/SceneLights.tsx
+function SceneLights({ intensity = 1 }) {
+  useSceneLights(intensity);
   return null;
 }
 var JOINT_COLORS = {
@@ -2312,6 +2379,12 @@ var JOINT_COLORS = {
   3: 16776960
   // hinge - yellow
 };
+var _v3a = new THREE11.Vector3();
+new THREE11.Vector3();
+var _quat2 = new THREE11.Quaternion();
+var _contactPos = new THREE11.Vector3();
+var _contactNormal = new THREE11.Vector3();
+var MAX_CONTACT_ARROWS = 50;
 function Debug({
   showGeoms = false,
   showSites = false,
@@ -2319,7 +2392,8 @@ function Debug({
   showContacts = false,
   showCOM = false,
   showInertia = false,
-  showTendons = false
+  showTendons = false,
+  ...groupProps
 }) {
   const { mjModelRef, mjDataRef, status } = useMujocoSim();
   const { scene } = useThree();
@@ -2338,21 +2412,21 @@ function Debug({
         let geometry = null;
         switch (type) {
           case 2:
-            geometry = new THREE.SphereGeometry(s[3 * i], 12, 8);
+            geometry = new THREE11.SphereGeometry(s[3 * i], 12, 8);
             break;
           case 3:
-            geometry = new THREE.CapsuleGeometry(s[3 * i], s[3 * i + 1] * 2, 6, 8);
+            geometry = new THREE11.CapsuleGeometry(s[3 * i], s[3 * i + 1] * 2, 6, 8);
             break;
           case 5:
-            geometry = new THREE.CylinderGeometry(s[3 * i], s[3 * i], s[3 * i + 1] * 2, 12);
+            geometry = new THREE11.CylinderGeometry(s[3 * i], s[3 * i], s[3 * i + 1] * 2, 12);
             break;
           case 6:
-            geometry = new THREE.BoxGeometry(s[3 * i] * 2, s[3 * i + 1] * 2, s[3 * i + 2] * 2);
+            geometry = new THREE11.BoxGeometry(s[3 * i] * 2, s[3 * i + 1] * 2, s[3 * i + 2] * 2);
             break;
         }
         if (geometry) {
-          const mat = new THREE.MeshBasicMaterial({ color: 65280, wireframe: true, transparent: true, opacity: 0.3 });
-          const mesh = new THREE.Mesh(geometry, mat);
+          const mat = new THREE11.MeshBasicMaterial({ color: 65280, wireframe: true, transparent: true, opacity: 0.3 });
+          const mesh = new THREE11.Mesh(geometry, mat);
           mesh.userData.geomId = i;
           mesh.userData.bodyId = model.geom_bodyid[i];
           geoms.push(mesh);
@@ -2360,35 +2434,88 @@ function Debug({
       }
     }
     if (showSites) {
+      const siteSize = model.site_size;
       for (let i = 0; i < model.nsite; i++) {
-        const geometry = new THREE.OctahedronGeometry(0.01);
-        const mat = new THREE.MeshBasicMaterial({ color: 16711935, transparent: true, opacity: 0.7 });
-        const mesh = new THREE.Mesh(geometry, mat);
+        let radius = 8e-3;
+        if (siteSize) {
+          radius = Math.max(siteSize[3 * i] * 0.5, 4e-3);
+        } else {
+          const bodyId = model.site_bodyid[i];
+          let maxGeomSize = 0;
+          for (let g = 0; g < model.ngeom; g++) {
+            if (model.geom_bodyid[g] === bodyId) {
+              maxGeomSize = Math.max(maxGeomSize, model.geom_size[3 * g]);
+            }
+          }
+          if (maxGeomSize > 0) radius = maxGeomSize * 0.15;
+        }
+        const geometry = new THREE11.OctahedronGeometry(radius);
+        const mat = new THREE11.MeshBasicMaterial({ color: 16711935, depthTest: false });
+        const mesh = new THREE11.Mesh(geometry, mat);
+        mesh.renderOrder = 999;
+        mesh.frustumCulled = false;
         mesh.userData.siteId = i;
+        const canvas = document.createElement("canvas");
+        canvas.width = 256;
+        canvas.height = 64;
+        const ctx = canvas.getContext("2d");
+        ctx.fillStyle = "#ff00ff";
+        ctx.font = "bold 36px monospace";
+        ctx.textAlign = "center";
+        ctx.fillText(getName(model, model.name_siteadr[i]), 128, 42);
+        const tex = new THREE11.CanvasTexture(canvas);
+        const spriteMat = new THREE11.SpriteMaterial({ map: tex, depthTest: false, transparent: true });
+        const sprite = new THREE11.Sprite(spriteMat);
+        const labelScale = radius * 15;
+        sprite.scale.set(labelScale, labelScale * 0.25, 1);
+        sprite.position.y = radius * 2;
+        sprite.renderOrder = 999;
+        mesh.add(sprite);
         sites.push(mesh);
       }
     }
     if (showJoints) {
+      const jntPos = model.jnt_pos;
+      const jntAxis = model.jnt_axis;
       for (let i = 0; i < model.njnt; i++) {
         const type = model.jnt_type[i];
         const color = JOINT_COLORS[type] ?? 16777215;
-        const arrow = new THREE.ArrowHelper(
-          new THREE.Vector3(0, 0, 1),
-          new THREE.Vector3(),
-          0.05,
+        const bodyId = model.jnt_bodyid[i];
+        let maxGeomSize = 0;
+        for (let g = 0; g < model.ngeom; g++) {
+          if (model.geom_bodyid[g] === bodyId) {
+            maxGeomSize = Math.max(maxGeomSize, model.geom_size[3 * g]);
+          }
+        }
+        const arrowLen = Math.max(maxGeomSize * 0.8, 0.05);
+        const arrow = new THREE11.ArrowHelper(
+          new THREE11.Vector3(0, 0, 1),
+          new THREE11.Vector3(),
+          arrowLen,
           color,
-          0.01,
-          5e-3
+          arrowLen * 0.25,
+          arrowLen * 0.12
         );
+        arrow.renderOrder = 999;
+        arrow.frustumCulled = false;
+        arrow.line.material = new THREE11.LineBasicMaterial({ color, depthTest: false });
+        arrow.cone.material.depthTest = false;
+        arrow.line.renderOrder = 999;
+        arrow.line.frustumCulled = false;
+        arrow.cone.renderOrder = 999;
+        arrow.cone.frustumCulled = false;
         arrow.userData.jointId = i;
+        arrow.userData.bodyId = bodyId;
+        arrow.userData.hasJntPos = !!jntPos;
+        arrow.userData.hasJntAxis = !!jntAxis;
         joints.push(arrow);
       }
     }
     if (showCOM) {
       for (let i = 1; i < model.nbody; i++) {
-        const geometry = new THREE.SphereGeometry(5e-3, 6, 6);
-        const mat = new THREE.MeshBasicMaterial({ color: 16711680 });
-        const mesh = new THREE.Mesh(geometry, mat);
+        const geometry = new THREE11.SphereGeometry(5e-3, 6, 6);
+        const mat = new THREE11.MeshBasicMaterial({ color: 16711680 });
+        const mesh = new THREE11.Mesh(geometry, mat);
         mesh.userData.bodyId = i;
         comMarkers.push(mesh);
       }
@@ -2416,6 +2543,8 @@ function Debug({
     const model = mjModelRef.current;
     const data = mjDataRef.current;
     if (!model || !data || !debugGeometry) return;
+    const jntPos = model.jnt_pos;
+    const jntAxis = model.jnt_axis;
     for (const mesh of debugGeometry.geoms) {
       const bid = mesh.userData.bodyId;
       const i3 = bid * 3;
@@ -2429,7 +2558,8 @@ function Debug({
       );
       const gid = mesh.userData.geomId;
       const gp = model.geom_pos;
-      mesh.position.add(new THREE.Vector3(gp[3 * gid], gp[3 * gid + 1], gp[3 * gid + 2]).applyQuaternion(mesh.quaternion));
+      _v3a.set(gp[3 * gid], gp[3 * gid + 1], gp[3 * gid + 2]).applyQuaternion(mesh.quaternion);
+      mesh.position.add(_v3a);
     }
     for (const mesh of debugGeometry.sites) {
       const sid = mesh.userData.siteId;
@@ -2439,6 +2569,28 @@ function Debug({
         data.site_xpos[3 * sid + 2]
       );
     }
+    for (const obj of debugGeometry.joints) {
+      const arrow = obj;
+      const jid = arrow.userData.jointId;
+      const bid = arrow.userData.bodyId;
+      const i3 = bid * 3;
+      const i4 = bid * 4;
+      _quat2.set(
+        data.xquat[i4 + 1],
+        data.xquat[i4 + 2],
+        data.xquat[i4 + 3],
+        data.xquat[i4]
+      );
+      arrow.position.set(data.xpos[i3], data.xpos[i3 + 1], data.xpos[i3 + 2]);
+      if (jntPos) {
+        _v3a.set(jntPos[3 * jid], jntPos[3 * jid + 1], jntPos[3 * jid + 2]).applyQuaternion(_quat2);
+        arrow.position.add(_v3a);
+      }
+      if (jntAxis) {
+        _v3a.set(jntAxis[3 * jid], jntAxis[3 * jid + 1], jntAxis[3 * jid + 2]).applyQuaternion(_quat2).normalize();
+        arrow.setDirection(_v3a);
+      }
+    }
     for (const mesh of debugGeometry.comMarkers) {
       const bid = mesh.userData.bodyId;
       const i3 = bid * 3;
@@ -2446,66 +2598,138 @@ function Debug({
     }
   });
   const contactGroupRef = useRef(null);
-  const contactArrowsRef = useRef([]);
+  const contactPoolRef = useRef([]);
+  const contactPoolInitRef = useRef(false);
+  useEffect(() => {
+    const group = contactGroupRef.current;
+    if (!group || contactPoolInitRef.current) return;
+    contactPoolInitRef.current = true;
+    const pool = [];
+    for (let i = 0; i < MAX_CONTACT_ARROWS; i++) {
+      const arrow = new THREE11.ArrowHelper(
+        new THREE11.Vector3(0, 1, 0),
+        new THREE11.Vector3(),
+        0.1,
+        16729156,
+        0.03,
+        0.015
+      );
+      arrow.visible = false;
+      group.add(arrow);
+      pool.push(arrow);
+    }
+    contactPoolRef.current = pool;
+    return () => {
+      for (const arrow of pool) {
+        group.remove(arrow);
+        arrow.dispose();
+      }
+      contactPoolRef.current = [];
+      contactPoolInitRef.current = false;
+    };
+  }, [showContacts]);
   useFrame(() => {
     if (!showContacts) return;
-    const model = mjModelRef.current;
     const data = mjDataRef.current;
-    const group = contactGroupRef.current;
-    if (!model || !data || !group) return;
-    for (const arrow of contactArrowsRef.current) {
-      group.remove(arrow);
-      arrow.dispose();
-    }
-    contactArrowsRef.current = [];
+    const pool = contactPoolRef.current;
+    if (!data || pool.length === 0) return;
     const ncon = data.ncon;
-    for (let i = 0; i < Math.min(ncon, 50); i++) {
-      try {
-        const c = data.contact.get(i);
-        const pos = new THREE.Vector3(c.pos[0], c.pos[1], c.pos[2]);
-        const normal = new THREE.Vector3(c.frame[0], c.frame[1], c.frame[2]);
-        const force = Math.abs(c.dist) * 100;
-        const length = Math.min(force * 0.01, 0.1);
-        if (length > 1e-3) {
-          const arrow = new THREE.ArrowHelper(normal, pos, length, 16729156, length * 0.3, length * 0.15);
-          group.add(arrow);
-          contactArrowsRef.current.push(arrow);
-        }
-      } catch {
-        break;
-      }
+    let arrowIdx = 0;
+    for (let i = 0; i < Math.min(ncon, MAX_CONTACT_ARROWS); i++) {
+      const c = getContact(data, i);
+      if (!c) break;
+      _contactPos.set(c.pos[0], c.pos[1], c.pos[2]);
+      _contactNormal.set(c.frame[0], c.frame[1], c.frame[2]);
+      const force = Math.abs(c.dist) * 100;
+      const length = Math.min(force * 0.01, 0.1);
+      if (length > 1e-3 && arrowIdx < pool.length) {
+        const arrow = pool[arrowIdx];
+        arrow.position.copy(_contactPos);
+        arrow.setDirection(_contactNormal);
+        arrow.setLength(length, length * 0.3, length * 0.15);
+        arrow.visible = true;
+        arrowIdx++;
+      }
+    }
+    for (let i = arrowIdx; i < pool.length; i++) {
+      pool[i].visible = false;
     }
   });
   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 })
   ] });
 }
-var DEFAULT_TENDON_COLOR = new THREE.Color(0.3, 0.3, 0.8);
+var DEFAULT_TENDON_COLOR = new THREE11.Color(0.3, 0.3, 0.8);
 var DEFAULT_TENDON_WIDTH = 2e-3;
-function TendonRenderer() {
+new THREE11.Vector3();
+function TendonRenderer(props) {
   const { mjModelRef, mjDataRef, status } = useMujocoSim();
   const groupRef = useRef(null);
   const meshesRef = useRef([]);
-  useFrame(() => {
+  const curvesRef = useRef([]);
+  const materialRef = useRef(null);
+  useEffect(() => {
     const model = mjModelRef.current;
     const data = mjDataRef.current;
     const group = groupRef.current;
     if (!model || !data || !group) return;
     const ntendon = model.ntendon ?? 0;
     if (ntendon === 0) return;
-    for (const mesh of meshesRef.current) {
-      group.remove(mesh);
-      mesh.geometry.dispose();
-      mesh.material.dispose();
+    const material = new THREE11.MeshStandardMaterial({
+      color: DEFAULT_TENDON_COLOR,
+      roughness: 0.6,
+      metalness: 0.1
+    });
+    materialRef.current = material;
+    const meshes = [];
+    const curves = [];
+    for (let t = 0; t < ntendon; t++) {
+      const wrapNum = model.ten_wrapnum[t];
+      if (wrapNum < 2) {
+        meshes.push(null);
+        curves.push(null);
+        continue;
+      }
+      const points = Array.from({ length: wrapNum }, () => new THREE11.Vector3());
+      const curve = new THREE11.CatmullRomCurve3(points, false);
+      const segments = Math.max(wrapNum * 2, 4);
+      const geometry = new THREE11.TubeGeometry(curve, segments, DEFAULT_TENDON_WIDTH, 6, false);
+      const mesh = new THREE11.Mesh(geometry, material);
+      mesh.frustumCulled = false;
+      group.add(mesh);
+      meshes.push(mesh);
+      curves.push(curve);
     }
-    meshesRef.current = [];
+    meshesRef.current = meshes;
+    curvesRef.current = curves;
+    return () => {
+      for (const mesh of meshes) {
+        if (!mesh) continue;
+        group.remove(mesh);
+        mesh.geometry.dispose();
+      }
+      material.dispose();
+      meshesRef.current = [];
+      curvesRef.current = [];
+      materialRef.current = null;
+    };
+  }, [status, mjModelRef, mjDataRef]);
+  useFrame(() => {
+    const model = mjModelRef.current;
+    const data = mjDataRef.current;
+    if (!model || !data) return;
+    const ntendon = model.ntendon ?? 0;
+    const meshes = meshesRef.current;
+    const curves = curvesRef.current;
     for (let t = 0; t < ntendon; t++) {
+      const mesh = meshes[t];
+      const curve = curves[t];
+      if (!mesh || !curve) continue;
       const wrapAdr = model.ten_wrapadr[t];
       const wrapNum = model.ten_wrapnum[t];
-      if (wrapNum < 2) continue;
-      const points = [];
+      let validCount = 0;
       for (let w = 0; w < wrapNum; w++) {
         const idx = (wrapAdr + w) * 3;
         if (data.wrap_xpos && idx + 2 < data.wrap_xpos.length) {
@@ -2513,33 +2737,38 @@ function TendonRenderer() {
           const y = data.wrap_xpos[idx + 1];
           const z = data.wrap_xpos[idx + 2];
           if (x !== 0 || y !== 0 || z !== 0) {
-            points.push(new THREE.Vector3(x, y, z));
+            if (validCount < curve.points.length) {
+              curve.points[validCount].set(x, y, z);
+            }
+            validCount++;
           }
         }
       }
-      if (points.length < 2) continue;
-      const curve = new THREE.CatmullRomCurve3(points, false);
-      const geometry = new THREE.TubeGeometry(
+      if (validCount < 2) {
+        mesh.visible = false;
+        continue;
+      }
+      if (curve.points.length !== validCount) {
+        curve.points.length = validCount;
+        while (curve.points.length < validCount) {
+          curve.points.push(new THREE11.Vector3());
+        }
+      }
+      mesh.geometry.dispose();
+      mesh.geometry = new THREE11.TubeGeometry(
         curve,
-        Math.max(points.length * 2, 4),
+        Math.max(validCount * 2, 4),
         DEFAULT_TENDON_WIDTH,
         6,
         false
       );
-      const material = new THREE.MeshStandardMaterial({
-        color: DEFAULT_TENDON_COLOR,
-        roughness: 0.6,
-        metalness: 0.1
-      });
-      const mesh = new THREE.Mesh(geometry, material);
-      group.add(mesh);
-      meshesRef.current.push(mesh);
+      mesh.visible = true;
     }
   });
   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([]);
@@ -2553,24 +2782,24 @@ function FlexRenderer() {
       const vertAdr = model.flex_vertadr[f];
       const vertNum = model.flex_vertnum[f];
       if (vertNum === 0) continue;
-      const geometry = new THREE.BufferGeometry();
+      const geometry = new THREE11.BufferGeometry();
       const positions = new Float32Array(vertNum * 3);
-      geometry.setAttribute("position", new THREE.BufferAttribute(positions, 3));
+      geometry.setAttribute("position", new THREE11.BufferAttribute(positions, 3));
       geometry.computeVertexNormals();
-      let color = new THREE.Color(0.5, 0.5, 0.5);
+      let color = new THREE11.Color(0.5, 0.5, 0.5);
       if (model.flex_rgba) {
-        color = new THREE.Color(
+        color = new THREE11.Color(
           model.flex_rgba[4 * f],
           model.flex_rgba[4 * f + 1],
           model.flex_rgba[4 * f + 2]
         );
       }
-      const material = new THREE.MeshStandardMaterial({
+      const material = new THREE11.MeshStandardMaterial({
         color,
         roughness: 0.7,
-        side: THREE.DoubleSide
+        side: THREE11.DoubleSide
       });
-      const mesh = new THREE.Mesh(geometry, material);
+      const mesh = new THREE11.Mesh(geometry, material);
       mesh.userData.flexId = f;
       mesh.userData.vertAdr = vertAdr;
       mesh.userData.vertNum = vertNum;
@@ -2603,24 +2832,47 @@ 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) {
+  let perModel = geomNameCacheByModel.get(model);
+  if (!perModel) {
+    perModel = /* @__PURE__ */ new Map();
+    geomNameCacheByModel.set(model, perModel);
+  }
+  let name = perModel.get(geomId);
+  if (name === void 0) {
+    name = getName(model, model.name_geomadr[geomId]);
+    perModel.set(geomId, name);
+  }
+  return name;
 }
 function useContacts(bodyName, callback) {
-  const { mjModelRef } = useMujocoSim();
+  const { mjModelRef, status } = useMujocoSim();
   const contactsRef = useRef([]);
   const bodyIdRef = useRef(-1);
+  const bodyResolvedRef = useRef(false);
   const callbackRef = useRef(callback);
   callbackRef.current = callback;
   useEffect(() => {
     if (!bodyName) {
       bodyIdRef.current = -1;
+      bodyResolvedRef.current = true;
       return;
     }
+    bodyResolvedRef.current = false;
+    if (status !== "ready") return;
     const model = mjModelRef.current;
     if (!model) return;
     bodyIdRef.current = findBodyByName(model, bodyName);
-  }, [bodyName, mjModelRef]);
+    bodyResolvedRef.current = true;
+  }, [bodyName, status, mjModelRef]);
   useAfterPhysicsStep((model, data) => {
+    if (bodyName && !bodyResolvedRef.current) {
+      bodyIdRef.current = findBodyByName(model, bodyName);
+      bodyResolvedRef.current = true;
+    }
     const ncon = data.ncon;
     if (ncon === 0) {
       if (contactsRef.current.length > 0) contactsRef.current = [];
@@ -2630,24 +2882,21 @@ function useContacts(bodyName, callback) {
     const contacts = [];
     const filterBody = bodyIdRef.current;
     for (let i = 0; i < ncon; i++) {
-      try {
-        const c = data.contact.get(i);
-        if (filterBody >= 0) {
-          const b1 = model.geom_bodyid[c.geom1];
-          const b2 = model.geom_bodyid[c.geom2];
-          if (b1 !== filterBody && b2 !== filterBody) continue;
-        }
-        contacts.push({
-          geom1: c.geom1,
-          geom1Name: getName(model, model.name_geomadr[c.geom1]),
-          geom2: c.geom2,
-          geom2Name: getName(model, model.name_geomadr[c.geom2]),
-          pos: [c.pos[0], c.pos[1], c.pos[2]],
-          depth: c.dist
-        });
-      } catch {
-        break;
-      }
+      const c = getContact(data, i);
+      if (!c) break;
+      if (filterBody >= 0) {
+        const b1 = model.geom_bodyid[c.geom1];
+        const b2 = model.geom_bodyid[c.geom2];
+        if (b1 !== filterBody && b2 !== filterBody) continue;
+      }
+      contacts.push({
+        geom1: c.geom1,
+        geom1Name: getGeomNameCached(model, c.geom1),
+        geom2: c.geom2,
+        geom2Name: getGeomNameCached(model, c.geom2),
+        pos: [c.pos[0], c.pos[1], c.pos[2]],
+        depth: c.dist
+      });
     }
     contactsRef.current = contacts;
     callbackRef.current?.(contacts);
@@ -2781,28 +3030,28 @@ function TrajectoryPlayer({
   onFrame
 }) {
   const player = useTrajectoryPlayer(trajectory, { fps, loop });
+  const onFrameRef = useRef(onFrame);
+  onFrameRef.current = onFrame;
+  const lastReportedFrameRef = useRef(-1);
   useEffect(() => {
     if (playing) {
       player.play();
     } else {
       player.pause();
     }
-  }, [playing]);
-  useEffect(() => {
-    if (onFrame) {
-      const interval = setInterval(() => {
-        if (player.playing) onFrame(player.frame);
-      }, 1e3 / fps);
-      return () => clearInterval(interval);
+  }, [playing, player]);
+  useFrame(() => {
+    if (!onFrameRef.current) return;
+    const currentFrame = player.frame;
+    if (currentFrame !== lastReportedFrameRef.current && player.playing) {
+      lastReportedFrameRef.current = currentFrame;
+      onFrameRef.current(currentFrame);
     }
-  }, [onFrame, fps]);
+  });
   return null;
 }
-function SelectionHighlight({
-  bodyId,
-  color = "#ff4444",
-  emissiveIntensity = 0.3
-}) {
+function useSelectionHighlight(bodyId, options = {}) {
+  const { color = "#ff4444", emissiveIntensity = 0.3 } = options;
   const { scene } = useThree();
   const prevMeshesRef = useRef([]);
   useEffect(() => {
@@ -2815,7 +3064,7 @@ function SelectionHighlight({
     }
     prevMeshesRef.current = [];
     if (bodyId === null || bodyId < 0) return;
-    const highlightColor = new THREE.Color(color);
+    const highlightColor = new THREE11.Color(color);
     scene.traverse((obj) => {
       if (obj.userData.bodyID === bodyId && obj.isMesh) {
         const mesh = obj;
@@ -2842,6 +3091,15 @@ function SelectionHighlight({
       prevMeshesRef.current = [];
     };
   }, [bodyId, color, emissiveIntensity, scene]);
+}
+
+// src/components/SelectionHighlight.tsx
+function SelectionHighlight({
+  bodyId,
+  color = "#ff4444",
+  emissiveIntensity = 0.3
+}) {
+  useSelectionHighlight(bodyId, { color, emissiveIntensity });
   return null;
 }
 function useActuators() {
@@ -2862,12 +3120,12 @@ function useActuators() {
     return actuators;
   }, [status, mjModelRef]);
 }
-var _mat42 = new THREE.Matrix4();
+var _mat42 = new THREE11.Matrix4();
 function useSitePosition(siteName) {
   const { mjModelRef, mjDataRef, status } = useMujocoSim();
   const siteIdRef = useRef(-1);
-  const positionRef = useRef(new THREE.Vector3());
-  const quaternionRef = useRef(new THREE.Quaternion());
+  const positionRef = useRef(new THREE11.Vector3());
+  const quaternionRef = useRef(new THREE11.Quaternion());
   useEffect(() => {
     const model = mjModelRef.current;
     if (!model || status !== "ready") {
@@ -2996,6 +3254,8 @@ function useJointState(name) {
   const dofDimRef = useRef(1);
   const positionRef = useRef(0);
   const velocityRef = useRef(0);
+  const posBufferRef = useRef(null);
+  const velBufferRef = useRef(null);
   useEffect(() => {
     const model = mjModelRef.current;
     if (!model || status !== "ready") return;
@@ -3015,6 +3275,13 @@ function useJointState(name) {
           qposDimRef.current = 1;
           dofDimRef.current = 1;
         }
+        if (qposDimRef.current > 1) {
+          posBufferRef.current = new Float64Array(qposDimRef.current);
+          velBufferRef.current = new Float64Array(dofDimRef.current);
+        } else {
+          posBufferRef.current = null;
+          velBufferRef.current = null;
+        }
         return;
       }
     }
@@ -3028,8 +3295,12 @@ function useJointState(name) {
       positionRef.current = data.qpos[qa];
       velocityRef.current = data.qvel[da];
     } else {
-      positionRef.current = new Float64Array(data.qpos.subarray(qa, qa + qposDimRef.current));
-      velocityRef.current = new Float64Array(data.qvel.subarray(da, da + dofDimRef.current));
+      const posBuf = posBufferRef.current;
+      const velBuf = velBufferRef.current;
+      posBuf.set(data.qpos.subarray(qa, qa + qposDimRef.current));
+      velBuf.set(data.qvel.subarray(da, da + dofDimRef.current));
+      positionRef.current = posBuf;
+      velocityRef.current = velBuf;
     }
   });
   return { position: positionRef, velocity: velocityRef };
@@ -3037,10 +3308,10 @@ function useJointState(name) {
 function useBodyState(name) {
   const { mjModelRef, status } = useMujocoSim();
   const bodyIdRef = useRef(-1);
-  const position = useRef(new THREE.Vector3());
-  const quaternion = useRef(new THREE.Quaternion());
-  const linearVelocity = useRef(new THREE.Vector3());
-  const angularVelocity = useRef(new THREE.Vector3());
+  const position = useRef(new THREE11.Vector3());
+  const quaternion = useRef(new THREE11.Quaternion());
+  const linearVelocity = useRef(new THREE11.Vector3());
+  const angularVelocity = useRef(new THREE11.Vector3());
   useEffect(() => {
     const model = mjModelRef.current;
     if (!model || status !== "ready") return;
@@ -3377,10 +3648,97 @@ function useCtrlNoise(config = {}) {
     }
   });
 }
+function useCameraAnimation() {
+  const { camera } = useThree();
+  const orbitTargetRef = useRef(new THREE11.Vector3(0, 0, 0));
+  const cameraAnimRef = useRef({
+    active: false,
+    startPos: new THREE11.Vector3(),
+    endPos: new THREE11.Vector3(),
+    startRot: new THREE11.Quaternion(),
+    endRot: new THREE11.Quaternion(),
+    startTarget: new THREE11.Vector3(),
+    endTarget: new THREE11.Vector3(),
+    startTime: 0,
+    duration: 0,
+    resolve: null
+  });
+  useFrame((state) => {
+    const ca = cameraAnimRef.current;
+    if (!ca.active) return;
+    const now = performance.now();
+    const progress = Math.min((now - ca.startTime) / ca.duration, 1);
+    const ease = progress < 0.5 ? 4 * progress * progress * progress : 1 - Math.pow(-2 * progress + 2, 3) / 2;
+    camera.position.lerpVectors(ca.startPos, ca.endPos, ease);
+    camera.quaternion.slerpQuaternions(ca.startRot, ca.endRot, ease);
+    orbitTargetRef.current.lerpVectors(ca.startTarget, ca.endTarget, ease);
+    const orbitControls = state.controls;
+    if (orbitControls?.target) {
+      orbitControls.target.copy(orbitTargetRef.current);
+    }
+    if (progress >= 1) {
+      ca.active = false;
+      camera.position.copy(ca.endPos);
+      camera.quaternion.copy(ca.endRot);
+      orbitTargetRef.current.copy(ca.endTarget);
+      ca.resolve?.();
+      ca.resolve = null;
+    }
+  });
+  const getCameraState = useCallback(
+    () => ({
+      position: camera.position.clone(),
+      target: orbitTargetRef.current.clone()
+    }),
+    [camera]
+  );
+  const moveCameraTo = useCallback(
+    (position, target, durationMs) => {
+      return new Promise((resolve) => {
+        const ca = cameraAnimRef.current;
+        ca.active = true;
+        ca.startTime = performance.now();
+        ca.duration = durationMs;
+        ca.startPos.copy(camera.position);
+        ca.startRot.copy(camera.quaternion);
+        ca.startTarget.copy(orbitTargetRef.current);
+        ca.endPos.copy(position);
+        ca.endTarget.copy(target);
+        const dummyCam = camera.clone();
+        dummyCam.position.copy(position);
+        dummyCam.lookAt(target);
+        ca.endRot.copy(dummyCam.quaternion);
+        ca.resolve = resolve;
+        setTimeout(resolve, durationMs + 100);
+      });
+    },
+    [camera]
+  );
+  return { getCameraState, moveCameraTo };
+}
 /**
  * @license
  * SPDX-License-Identifier: Apache-2.0
  */
+/**
+ * @license
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * createController — typed factory for BYOC (Bring Your Own Controller) plugins.
+ */
+/**
+ * @license
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * IkContext — React context for the IK controller plugin.
+ */
+/**
+ * @license
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * IkController — composable IK controller plugin.
+ * Extracts all IK logic from MujocoSimProvider into an opt-in component.
+ */
 /**
  * @license
  * SPDX-License-Identifier: Apache-2.0
@@ -3394,6 +3752,14 @@ function useCtrlNoise(config = {}) {
  * Fixed from original: reads data.ncon first, accesses contact via .get(i),
  * limits to maxContacts to avoid WASM heap OOM.
  */
+/**
+ * @license
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * useSceneLights — hook form of SceneLights (spec 6.3)
+ *
+ * Auto-creates Three.js lights from MJCF <light> elements.
+ */
 /**
  * @license
  * SPDX-License-Identifier: Apache-2.0
@@ -3456,6 +3822,15 @@ function useCtrlNoise(config = {}) {
  *
  * TrajectoryPlayer — component form of trajectory playback (spec 13.2)
  */
+/**
+ * @license
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * useSelectionHighlight — hook form of SelectionHighlight (spec 6.5)
+ *
+ * Applies emissive highlight to all meshes belonging to a body.
+ * Restores original emissive when bodyId changes or hook unmounts.
+ */
 /**
  * @license
  * SPDX-License-Identifier: Apache-2.0
@@ -3522,7 +3897,13 @@ function useCtrlNoise(config = {}) {
  *
  * useCtrlNoise — control noise / perturbation hook (spec 3.2)
  */
+/**
+ * @license
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * useCameraAnimation — composable camera animation hook.
+ */
 
-export { ContactListener, ContactMarkers, Debug, DragInteraction, FlexRenderer, IkGizmo, MujocoCanvas, MujocoProvider, MujocoSimProvider, SceneLights, SceneRenderer, SelectionHighlight, TendonRenderer, TrajectoryPlayer, findActuatorByName, findBodyByName, findGeomByName, findJointByName, findKeyframeByName, findSensorByName, findSiteByName, findTendonByName, getName, loadScene, useActuators, useAfterPhysicsStep, useBeforePhysicsStep, useBodyState, useContactEvents, useContacts, useCtrl, useCtrlNoise, useGamepad, useGravityCompensation, useJointState, useKeyboardTeleop, useMujoco, useMujocoSim, usePolicy, useSensor, useSensors, useSitePosition, useTrajectoryPlayer, useTrajectoryRecorder, useVideoRecorder };
+export { ContactListener, ContactMarkers, Debug, DragInteraction, FlexRenderer, IkController, IkGizmo, MujocoCanvas, MujocoPhysics, 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 };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map