mujoco-react 0.1.0

package/dist/index.js

@@ -0,0 +1,3518 @@
+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 { Canvas, useThree, useFrame } from '@react-three/fiber';
+import * as THREE from 'three';
+import { PivotControls } from '@react-three/drei';
+
+// src/core/MujocoProvider.tsx
+var MujocoContext = createContext({
+  mujoco: null,
+  status: "loading",
+  error: null
+});
+function useMujoco() {
+  return useContext(MujocoContext);
+}
+function MujocoProvider({ wasmUrl, 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({
+      ...wasmUrl ? { locateFile: (path) => path.endsWith(".wasm") ? wasmUrl : path } : {},
+      printErr: (text) => {
+        if (text.includes("Aborted") && isMounted.current) {
+          setError("Simulation crashed. Reload page.");
+          setStatus("error");
+        }
+      }
+    }).then((inst) => {
+      if (isMounted.current) {
+        moduleRef.current = inst;
+        setStatus("ready");
+      }
+    }).catch((err) => {
+      if (isMounted.current) {
+        const msg = err.message || "Failed to init spatial simulation";
+        setError(msg);
+        setStatus("error");
+        onError?.(new Error(msg));
+      }
+    });
+    return () => {
+      isMounted.current = false;
+    };
+  }, [wasmUrl]);
+  return /* @__PURE__ */ jsx(
+    MujocoContext.Provider,
+    {
+      value: { mujoco: moduleRef.current, status, error },
+      children
+    }
+  );
+}
+
+// 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/core/SceneLoader.ts
+function getName(mjModel, address) {
+  let name = "";
+  let idx = address;
+  let safety = 0;
+  while (mjModel.names[idx] !== 0 && safety < 100) {
+    name += String.fromCharCode(mjModel.names[idx++]);
+    safety++;
+  }
+  return name;
+}
+function findSiteByName(mjModel, name) {
+  for (let i = 0; i < mjModel.nsite; i++) {
+    if (getName(mjModel, mjModel.name_siteadr[i]).includes(name)) return i;
+  }
+  return -1;
+}
+function findActuatorByName(mjModel, name) {
+  for (let i = 0; i < mjModel.nu; i++) {
+    if (getName(mjModel, mjModel.name_actuatoradr[i]).includes(name)) return i;
+  }
+  return -1;
+}
+function findKeyframeByName(mjModel, name) {
+  for (let i = 0; i < mjModel.nkey; i++) {
+    if (getName(mjModel, mjModel.name_keyadr[i]) === name) return i;
+  }
+  return -1;
+}
+function findBodyByName(mjModel, name) {
+  for (let i = 0; i < mjModel.nbody; i++) {
+    if (getName(mjModel, mjModel.name_bodyadr[i]) === name) return i;
+  }
+  return -1;
+}
+function findJointByName(mjModel, name) {
+  for (let i = 0; i < mjModel.njnt; i++) {
+    if (getName(mjModel, mjModel.name_jntadr[i]) === name) return i;
+  }
+  return -1;
+}
+function findGeomByName(mjModel, name) {
+  for (let i = 0; i < mjModel.ngeom; i++) {
+    if (getName(mjModel, mjModel.name_geomadr[i]) === name) return i;
+  }
+  return -1;
+}
+function findSensorByName(mjModel, name) {
+  for (let i = 0; i < mjModel.nsensor; i++) {
+    if (getName(mjModel, mjModel.name_sensoradr[i]) === name) return i;
+  }
+  return -1;
+}
+function findTendonByName(mjModel, name) {
+  for (let i = 0; i < (mjModel.ntendon ?? 0); i++) {
+    if (getName(mjModel, mjModel.name_tendonadr[i]) === name) return i;
+  }
+  return -1;
+}
+function sceneObjectToXml(obj) {
+  const joint = obj.freejoint ? "<freejoint/>" : "";
+  const pos = obj.position.map((v) => v.toFixed(3)).join(" ");
+  const size = obj.size.map((v) => v.toFixed(3)).join(" ");
+  const rgba = obj.rgba.join(" ");
+  const mass = obj.mass ? ` mass="${obj.mass}"` : "";
+  const friction = obj.friction ? ` friction="${obj.friction}"` : "";
+  const solref = obj.solref ? ` solref="${obj.solref}"` : "";
+  const solimp = obj.solimp ? ` solimp="${obj.solimp}"` : "";
+  const condim = obj.condim ? ` condim="${obj.condim}"` : "";
+  return `<body name="${obj.name}" pos="${pos}">${joint}<geom type="${obj.type}" size="${size}" rgba="${rgba}" contype="1" conaffinity="1"${mass}${friction}${solref}${solimp}${condim}/></body>`;
+}
+async function loadScene(mujoco, config, onProgress) {
+  try {
+    mujoco.FS.unmount("/working");
+  } catch {
+  }
+  try {
+    mujoco.FS.mkdir("/working");
+  } catch {
+  }
+  const baseUrl = config.baseUrl || `https://raw.githubusercontent.com/google-deepmind/mujoco_menagerie/main/${config.robotId}/`;
+  const downloaded = /* @__PURE__ */ new Set();
+  const queue = [config.sceneFile];
+  const parser = new DOMParser();
+  while (queue.length > 0) {
+    const fname = queue.shift();
+    if (downloaded.has(fname)) continue;
+    downloaded.add(fname);
+    onProgress?.(`Downloading ${fname}...`);
+    const res = await fetch(baseUrl + fname);
+    if (!res.ok) {
+      console.warn(`Failed to fetch ${fname}: ${res.status} ${res.statusText}`);
+      continue;
+    }
+    const dirParts = fname.split("/");
+    dirParts.pop();
+    let currentPath = "/working";
+    for (const part of dirParts) {
+      currentPath += "/" + part;
+      try {
+        mujoco.FS.mkdir(currentPath);
+      } catch {
+      }
+    }
+    if (fname.endsWith(".xml")) {
+      let text = await res.text();
+      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]);
+          }
+          if (patch.inject && patch.injectAfter) {
+            const idx = text.indexOf(patch.injectAfter);
+            if (idx !== -1) {
+              const tagEnd = text.indexOf(">", idx + patch.injectAfter.length);
+              if (tagEnd !== -1) {
+                text = text.slice(0, tagEnd + 1) + patch.inject + text.slice(tagEnd + 1);
+              }
+            }
+          }
+        }
+      }
+      if (fname === config.sceneFile && config.sceneObjects?.length) {
+        const xml = config.sceneObjects.map((obj) => sceneObjectToXml(obj)).join("");
+        text = text.replace("</worldbody>", xml + "</worldbody>");
+      }
+      mujoco.FS.writeFile(`/working/${fname}`, text);
+      scanDependencies(text, fname, parser, downloaded, queue);
+    } else {
+      const buffer = new Uint8Array(await res.arrayBuffer());
+      mujoco.FS.writeFile(`/working/${fname}`, buffer);
+    }
+  }
+  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++) {
+      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];
+        }
+      }
+    }
+  }
+  mujoco.mj_forward(mjModel, mjData);
+  return { mjModel, mjData, siteId, gripperId };
+}
+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 currentDir = currentFile.includes("/") ? currentFile.substring(0, currentFile.lastIndexOf("/") + 1) : "";
+  xmlDoc.querySelectorAll("[file]").forEach((el) => {
+    const fileAttr = el.getAttribute("file");
+    if (!fileAttr) return;
+    let prefix = "";
+    if (el.tagName.toLowerCase() === "mesh") {
+      prefix = meshDir ? meshDir + "/" : "";
+    } else if (["texture", "hfield"].includes(el.tagName.toLowerCase())) {
+      prefix = textureDir ? textureDir + "/" : "";
+    }
+    let fullPath = (currentDir + prefix + fileAttr).replace(/\/\//g, "/");
+    const parts = fullPath.split("/");
+    const norm = [];
+    for (const p of parts) {
+      if (p === "..") norm.pop();
+      else if (p !== ".") norm.push(p);
+    }
+    fullPath = norm.join("/");
+    if (!downloaded.has(fullPath)) queue.push(fullPath);
+  });
+}
+var JOINT_TYPE_NAMES = ["free", "ball", "slide", "hinge"];
+var GEOM_TYPE_NAMES = ["plane", "hfield", "sphere", "capsule", "ellipsoid", "cylinder", "box", "mesh"];
+var SENSOR_TYPE_NAMES = {
+  0: "touch",
+  1: "accelerometer",
+  2: "velocimeter",
+  3: "gyro",
+  4: "force",
+  5: "torque",
+  6: "magnetometer",
+  7: "rangefinder",
+  8: "camprojection",
+  9: "jointpos",
+  10: "jointvel",
+  11: "tendonpos",
+  12: "tendonvel",
+  13: "actuatorpos",
+  14: "actuatorvel",
+  15: "actuatorfrc",
+  16: "jointactfrc",
+  17: "tendonactfrc",
+  18: "ballquat",
+  19: "ballangvel",
+  20: "jointlimitpos",
+  21: "jointlimitvel",
+  22: "jointlimitfrc",
+  23: "tendonlimitpos",
+  24: "tendonlimitvel",
+  25: "tendonlimitfrc",
+  26: "framepos",
+  27: "framequat",
+  28: "framexaxis",
+  29: "frameyaxis",
+  30: "framezaxis",
+  31: "framelinvel",
+  32: "frameangvel",
+  33: "framelinacc",
+  34: "frameangacc",
+  35: "subtreecom",
+  36: "subtreelinvel",
+  37: "subtreeangmom",
+  38: "insidesite",
+  39: "geomdist",
+  40: "geomnormal",
+  41: "geomfromto",
+  42: "contact",
+  43: "e_potential",
+  44: "e_kinetic",
+  45: "clock",
+  46: "tactile",
+  47: "plugin",
+  48: "user"
+};
+var _applyForce = new Float64Array(3);
+var _applyTorque = new Float64Array(3);
+var _applyPoint = new Float64Array(3);
+var _rayPnt = new Float64Array(3);
+var _rayVec = new Float64Array(3);
+var _rayGeomId = new Int32Array(1);
+var MujocoSimContext = createContext(null);
+function useMujocoSim() {
+  const ctx = useContext(MujocoSimContext);
+  if (!ctx)
+    throw new Error("useMujocoSim must be used inside <MujocoSimProvider>");
+  return ctx;
+}
+function useBeforePhysicsStep(callback) {
+  const { beforeStepCallbacks } = useMujocoSim();
+  const callbackRef = useRef(callback);
+  callbackRef.current = callback;
+  useEffect(() => {
+    const wrapped = (model, data) => callbackRef.current(model, data);
+    beforeStepCallbacks.current.add(wrapped);
+    return () => {
+      beforeStepCallbacks.current.delete(wrapped);
+    };
+  }, [beforeStepCallbacks]);
+}
+function useAfterPhysicsStep(callback) {
+  const { afterStepCallbacks } = useMujocoSim();
+  const callbackRef = useRef(callback);
+  callbackRef.current = callback;
+  useEffect(() => {
+    const wrapped = (model, data) => callbackRef.current(model, data);
+    afterStepCallbacks.current.add(wrapped);
+    return () => {
+      afterStepCallbacks.current.delete(wrapped);
+    };
+  }, [afterStepCallbacks]);
+}
+function MujocoSimProvider({
+  mujoco,
+  config,
+  onReady,
+  onError,
+  onStep,
+  onSelection,
+  gravity,
+  timestep,
+  substeps,
+  paused,
+  speed,
+  interpolate,
+  children
+}) {
+  const { gl, camera } = useThree();
+  const [status, setStatus] = useState("loading");
+  const mjModelRef = useRef(null);
+  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 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());
+  configRef.current = config;
+  useEffect(() => {
+    pausedRef.current = paused ?? false;
+  }, [paused]);
+  useEffect(() => {
+    speedRef.current = speed ?? 1;
+  }, [speed]);
+  useEffect(() => {
+    substepsRef.current = substeps ?? 1;
+  }, [substeps]);
+  useEffect(() => {
+    interpolateRef.current = interpolate ?? false;
+  }, [interpolate]);
+  useEffect(() => {
+    if (!gravity) return;
+    const model = mjModelRef.current;
+    if (!model?.opt?.gravity) return;
+    model.opt.gravity[0] = gravity[0];
+    model.opt.gravity[1] = gravity[1];
+    model.opt.gravity[2] = gravity[2];
+  }, [gravity]);
+  useEffect(() => {
+    if (timestep === void 0) return;
+    const model = mjModelRef.current;
+    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 () => {
+      try {
+        const result = await loadScene(mujoco, config);
+        if (disposed) {
+          result.mjModel.delete();
+          result.mjData.delete();
+          return;
+        }
+        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];
+          result.mjModel.opt.gravity[2] = gravity[2];
+        }
+        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) {
+          setStatus("error");
+          onError?.(e instanceof Error ? e : new Error(String(e)));
+        }
+      }
+    })();
+    return () => {
+      disposed = true;
+      mjModelRef.current?.delete();
+      mjDataRef.current?.delete();
+      mjModelRef.current = null;
+      mjDataRef.current = null;
+      try {
+        mujoco.FS.unmount("/working");
+      } catch {
+      }
+    };
+  }, [mujoco, config]);
+  useEffect(() => {
+    if (status === "ready" && onReady) {
+      onReady(apiRef.current);
+    }
+  }, [status]);
+  useFrame((state) => {
+    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++) {
+      data.qfrc_applied[i] = 0;
+    }
+    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++) {
+        mujoco.mj_step(model, data);
+      }
+      stepsToRunRef.current = 0;
+    } else {
+      const startSimTime = data.time;
+      const frameTime = 1 / 60 * speedRef.current;
+      while (data.time - startSimTime < frameTime) {
+        for (let s = 0; s < numSubsteps; s++) {
+          mujoco.mj_step(model, data);
+        }
+      }
+    }
+    for (const cb of afterStepCallbacks.current) {
+      cb(model, data);
+    }
+    onStepRef.current?.(data.time);
+  }, -1);
+  const reset = useCallback(() => {
+    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++) {
+        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];
+          }
+        }
+      }
+    }
+    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;
+    }
+  }, [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]
+  );
+  const setSpeed = useCallback((multiplier) => {
+    speedRef.current = multiplier;
+  }, []);
+  const togglePause = useCallback(() => {
+    pausedRef.current = !pausedRef.current;
+    return pausedRef.current;
+  }, []);
+  const setPaused = useCallback((p) => {
+    pausedRef.current = p;
+  }, []);
+  const step = useCallback((n = 1) => {
+    stepsToRunRef.current = n;
+  }, []);
+  const getTime = useCallback(() => {
+    return mjDataRef.current?.time ?? 0;
+  }, []);
+  const getTimestep = useCallback(() => {
+    return mjModelRef.current?.opt?.timestep ?? 2e-3;
+  }, []);
+  const saveState = useCallback(() => {
+    const data = mjDataRef.current;
+    if (!data) return { time: 0, qpos: new Float64Array(0), qvel: new Float64Array(0), ctrl: new Float64Array(0), act: new Float64Array(0), qfrc_applied: new Float64Array(0) };
+    return {
+      time: data.time,
+      qpos: new Float64Array(data.qpos),
+      qvel: new Float64Array(data.qvel),
+      ctrl: new Float64Array(data.ctrl),
+      act: new Float64Array(data.act),
+      qfrc_applied: new Float64Array(data.qfrc_applied)
+    };
+  }, []);
+  const restoreState = useCallback((snapshot) => {
+    const model = mjModelRef.current;
+    const data = mjDataRef.current;
+    if (!model || !data) return;
+    data.time = snapshot.time;
+    data.qpos.set(snapshot.qpos);
+    data.qvel.set(snapshot.qvel);
+    data.ctrl.set(snapshot.ctrl);
+    if (snapshot.act.length > 0) data.act.set(snapshot.act);
+    data.qfrc_applied.set(snapshot.qfrc_applied);
+    mujoco.mj_forward(model, data);
+  }, [mujoco]);
+  const setQpos = useCallback((values) => {
+    const model = mjModelRef.current;
+    const data = mjDataRef.current;
+    if (!model || !data) return;
+    const arr = values instanceof Float64Array ? values : new Float64Array(values);
+    data.qpos.set(arr.subarray(0, Math.min(arr.length, model.nq)));
+    mujoco.mj_forward(model, data);
+  }, [mujoco]);
+  const setQvel = useCallback((values) => {
+    const data = mjDataRef.current;
+    if (!data) return;
+    const arr = values instanceof Float64Array ? values : new Float64Array(values);
+    data.qvel.set(arr.subarray(0, Math.min(arr.length, mjModelRef.current?.nv ?? 0)));
+  }, []);
+  const getQpos = useCallback(() => {
+    return mjDataRef.current ? new Float64Array(mjDataRef.current.qpos) : new Float64Array(0);
+  }, []);
+  const getQvel = useCallback(() => {
+    return mjDataRef.current ? new Float64Array(mjDataRef.current.qvel) : new Float64Array(0);
+  }, []);
+  const setCtrl = useCallback((nameOrValues, value) => {
+    const model = mjModelRef.current;
+    const data = mjDataRef.current;
+    if (!model || !data) return;
+    if (typeof nameOrValues === "string") {
+      const id = findActuatorByName(model, nameOrValues);
+      if (id >= 0 && value !== void 0) data.ctrl[id] = value;
+    } else {
+      for (const [name, val] of Object.entries(nameOrValues)) {
+        const id = findActuatorByName(model, name);
+        if (id >= 0) data.ctrl[id] = val;
+      }
+    }
+  }, []);
+  const getCtrl = useCallback(() => {
+    return mjDataRef.current ? new Float64Array(mjDataRef.current.ctrl) : new Float64Array(0);
+  }, []);
+  const applyForce = useCallback((bodyName, force, point) => {
+    const model = mjModelRef.current;
+    const data = mjDataRef.current;
+    if (!model || !data) return;
+    const bodyId = findBodyByName(model, bodyName);
+    if (bodyId < 0) return;
+    _applyForce[0] = force.x;
+    _applyForce[1] = force.y;
+    _applyForce[2] = force.z;
+    _applyTorque[0] = 0;
+    _applyTorque[1] = 0;
+    _applyTorque[2] = 0;
+    if (point) {
+      _applyPoint[0] = point.x;
+      _applyPoint[1] = point.y;
+      _applyPoint[2] = point.z;
+    } else {
+      const i3 = bodyId * 3;
+      _applyPoint[0] = data.xpos[i3];
+      _applyPoint[1] = data.xpos[i3 + 1];
+      _applyPoint[2] = data.xpos[i3 + 2];
+    }
+    mujoco.mj_applyFT(model, data, _applyForce, _applyTorque, _applyPoint, bodyId, data.qfrc_applied);
+  }, [mujoco]);
+  const applyTorqueApi = useCallback((bodyName, torque) => {
+    const model = mjModelRef.current;
+    const data = mjDataRef.current;
+    if (!model || !data) return;
+    const bodyId = findBodyByName(model, bodyName);
+    if (bodyId < 0) return;
+    _applyForce[0] = 0;
+    _applyForce[1] = 0;
+    _applyForce[2] = 0;
+    _applyTorque[0] = torque.x;
+    _applyTorque[1] = torque.y;
+    _applyTorque[2] = torque.z;
+    const i3 = bodyId * 3;
+    _applyPoint[0] = data.xpos[i3];
+    _applyPoint[1] = data.xpos[i3 + 1];
+    _applyPoint[2] = data.xpos[i3 + 2];
+    mujoco.mj_applyFT(model, data, _applyForce, _applyTorque, _applyPoint, bodyId, data.qfrc_applied);
+  }, [mujoco]);
+  const setExternalForce = useCallback((bodyName, force, torque) => {
+    const model = mjModelRef.current;
+    const data = mjDataRef.current;
+    if (!model || !data) return;
+    const bodyId = findBodyByName(model, bodyName);
+    if (bodyId < 0) return;
+    const i6 = bodyId * 6;
+    data.xfrc_applied[i6] = torque.x;
+    data.xfrc_applied[i6 + 1] = torque.y;
+    data.xfrc_applied[i6 + 2] = torque.z;
+    data.xfrc_applied[i6 + 3] = force.x;
+    data.xfrc_applied[i6 + 4] = force.y;
+    data.xfrc_applied[i6 + 5] = force.z;
+  }, []);
+  const applyGeneralizedForce = useCallback((values) => {
+    const data = mjDataRef.current;
+    if (!data) return;
+    const nv = mjModelRef.current?.nv ?? 0;
+    for (let i = 0; i < Math.min(values.length, nv); i++) {
+      data.qfrc_applied[i] += values[i];
+    }
+  }, []);
+  const getSensorData = useCallback((name) => {
+    const model = mjModelRef.current;
+    const data = mjDataRef.current;
+    if (!model || !data) return null;
+    const id = findSensorByName(model, name);
+    if (id < 0) return null;
+    const adr = model.sensor_adr[id];
+    const dim = model.sensor_dim[id];
+    return new Float64Array(data.sensordata.subarray(adr, adr + dim));
+  }, []);
+  const getContacts = useCallback(() => {
+    const model = mjModelRef.current;
+    const data = mjDataRef.current;
+    if (!model || !data) return [];
+    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;
+      }
+    }
+    return contacts;
+  }, []);
+  const getBodies = useCallback(() => {
+    const model = mjModelRef.current;
+    if (!model) return [];
+    const result = [];
+    for (let i = 0; i < model.nbody; i++) {
+      result.push({
+        id: i,
+        name: getName(model, model.name_bodyadr[i]),
+        mass: model.body_mass[i],
+        parentId: model.body_parentid[i]
+      });
+    }
+    return result;
+  }, []);
+  const getJoints = useCallback(() => {
+    const model = mjModelRef.current;
+    if (!model) return [];
+    const result = [];
+    for (let i = 0; i < model.njnt; i++) {
+      const type = model.jnt_type[i];
+      const limited = model.jnt_limited ? model.jnt_limited[i] !== 0 : false;
+      result.push({
+        id: i,
+        name: getName(model, model.name_jntadr[i]),
+        type,
+        typeName: JOINT_TYPE_NAMES[type] ?? `unknown(${type})`,
+        range: [model.jnt_range[2 * i], model.jnt_range[2 * i + 1]],
+        limited,
+        bodyId: model.jnt_bodyid[i],
+        qposAdr: model.jnt_qposadr[i],
+        dofAdr: model.jnt_dofadr[i]
+      });
+    }
+    return result;
+  }, []);
+  const getGeoms = useCallback(() => {
+    const model = mjModelRef.current;
+    if (!model) return [];
+    const result = [];
+    for (let i = 0; i < model.ngeom; i++) {
+      const type = model.geom_type[i];
+      result.push({
+        id: i,
+        name: getName(model, model.name_geomadr[i]),
+        type,
+        typeName: GEOM_TYPE_NAMES[type] ?? `unknown(${type})`,
+        size: [model.geom_size[3 * i], model.geom_size[3 * i + 1], model.geom_size[3 * i + 2]],
+        bodyId: model.geom_bodyid[i]
+      });
+    }
+    return result;
+  }, []);
+  const getSites = useCallback(() => {
+    const model = mjModelRef.current;
+    if (!model) return [];
+    const result = [];
+    for (let i = 0; i < model.nsite; i++) {
+      result.push({
+        id: i,
+        name: getName(model, model.name_siteadr[i]),
+        bodyId: model.site_bodyid ? model.site_bodyid[i] : -1
+      });
+    }
+    return result;
+  }, []);
+  const getActuatorsApi = useCallback(() => {
+    const model = mjModelRef.current;
+    if (!model) return [];
+    const result = [];
+    for (let i = 0; i < model.nu; i++) {
+      const hasRange = model.actuator_ctrlrange[2 * i] < model.actuator_ctrlrange[2 * i + 1];
+      result.push({
+        id: i,
+        name: getName(model, model.name_actuatoradr[i]),
+        range: hasRange ? [model.actuator_ctrlrange[2 * i], model.actuator_ctrlrange[2 * i + 1]] : [-Infinity, Infinity]
+      });
+    }
+    return result;
+  }, []);
+  const getSensors = useCallback(() => {
+    const model = mjModelRef.current;
+    if (!model) return [];
+    const result = [];
+    for (let i = 0; i < model.nsensor; i++) {
+      const type = model.sensor_type[i];
+      result.push({
+        id: i,
+        name: getName(model, model.name_sensoradr[i]),
+        type,
+        typeName: SENSOR_TYPE_NAMES[type] ?? `unknown(${type})`,
+        dim: model.sensor_dim[i],
+        adr: model.sensor_adr[i]
+      });
+    }
+    return result;
+  }, []);
+  const getModelOption = useCallback(() => {
+    const model = mjModelRef.current;
+    if (!model?.opt) return { timestep: 2e-3, gravity: [0, 0, -9.81], integrator: 0 };
+    return {
+      timestep: model.opt.timestep,
+      gravity: [model.opt.gravity[0], model.opt.gravity[1], model.opt.gravity[2]],
+      integrator: model.opt.integrator
+    };
+  }, []);
+  const setGravity = useCallback((g) => {
+    const model = mjModelRef.current;
+    if (!model?.opt?.gravity) return;
+    model.opt.gravity[0] = g[0];
+    model.opt.gravity[1] = g[1];
+    model.opt.gravity[2] = g[2];
+  }, []);
+  const setTimestepApi = useCallback((dt) => {
+    const model = mjModelRef.current;
+    if (!model?.opt) return;
+    model.opt.timestep = dt;
+  }, []);
+  const raycast = useCallback((origin, direction, maxDist = 100) => {
+    const model = mjModelRef.current;
+    const data = mjDataRef.current;
+    if (!model || !data) return null;
+    _rayPnt[0] = origin.x;
+    _rayPnt[1] = origin.y;
+    _rayPnt[2] = origin.z;
+    const dir = direction.clone().normalize();
+    _rayVec[0] = dir.x;
+    _rayVec[1] = dir.y;
+    _rayVec[2] = dir.z;
+    _rayGeomId[0] = -1;
+    try {
+      const dist = mujoco.mj_ray(model, data, _rayPnt, _rayVec, null, 1, -1, _rayGeomId);
+      if (dist < 0 || dist > maxDist) return null;
+      const geomId = _rayGeomId[0];
+      const bodyId = geomId >= 0 ? model.geom_bodyid[geomId] : -1;
+      return {
+        point: new THREE.Vector3(
+          origin.x + dir.x * dist,
+          origin.y + dir.y * dist,
+          origin.z + dir.z * dist
+        ),
+        bodyId,
+        geomId,
+        distance: dist
+      };
+    } catch {
+      return null;
+    }
+  }, [mujoco]);
+  const applyKeyframe = useCallback((nameOrIndex) => {
+    const model = mjModelRef.current;
+    const data = mjDataRef.current;
+    if (!model || !data) return;
+    let keyId;
+    if (typeof nameOrIndex === "number") {
+      keyId = nameOrIndex;
+    } else {
+      keyId = findKeyframeByName(model, nameOrIndex);
+    }
+    if (keyId < 0 || keyId >= model.nkey) {
+      console.warn(`applyKeyframe: keyframe "${nameOrIndex}" not found`);
+      return;
+    }
+    const nq = model.nq;
+    const nu = model.nu;
+    const qposOffset = keyId * nq;
+    for (let i = 0; i < nq; i++) data.qpos[i] = model.key_qpos[qposOffset + i];
+    const ctrlOffset = keyId * nu;
+    for (let i = 0; i < nu; i++) data.ctrl[i] = model.key_ctrl[ctrlOffset + i];
+    if (model.key_qvel) {
+      const qvelOffset = keyId * model.nv;
+      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);
+    }
+  }, [mujoco, syncGizmoToSite]);
+  const getKeyframeNames = useCallback(() => {
+    const model = mjModelRef.current;
+    if (!model) return [];
+    const names = [];
+    for (let i = 0; i < model.nkey; i++) {
+      names.push(getName(model, model.name_keyadr[i]));
+    }
+    return names;
+  }, []);
+  const getKeyframeCount = useCallback(() => {
+    return mjModelRef.current?.nkey ?? 0;
+  }, []);
+  const loadSceneApi = useCallback(async (newConfig) => {
+    try {
+      mjModelRef.current?.delete();
+      mjDataRef.current?.delete();
+      mjModelRef.current = null;
+      mjDataRef.current = null;
+      setStatus("loading");
+      const result = await loadScene(mujoco, newConfig);
+      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) {
+      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)
+    };
+  }, []);
+  const getCanvasSnapshot = useCallback(
+    (width, height, mimeType = "image/jpeg") => {
+      if (width && height) {
+        const tempCanvas = document.createElement("canvas");
+        tempCanvas.width = width;
+        tempCanvas.height = height;
+        const ctx = tempCanvas.getContext("2d");
+        if (ctx) {
+          ctx.drawImage(gl.domElement, 0, 0, width, height);
+          return tempCanvas.toDataURL(mimeType, mimeType === "image/jpeg" ? 0.8 : void 0);
+        }
+      }
+      return gl.domElement.toDataURL(mimeType, mimeType === "image/jpeg" ? 0.8 : void 0);
+    },
+    [gl]
+  );
+  const project2DTo3D = useCallback(
+    (x, y, cameraPos, lookAt) => {
+      const virtCam = camera.clone();
+      virtCam.position.copy(cameraPos);
+      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);
+      const objects = [];
+      const scene = camera.parent;
+      if (scene) {
+        scene.traverse((c) => {
+          if (c.isMesh) objects.push(c);
+        });
+      }
+      const hits = raycaster.intersectObjects(objects);
+      if (hits.length > 0) {
+        const hitObj = hits[0].object;
+        const geomId = hitObj.userData.geomID !== void 0 ? hitObj.userData.geomID : -1;
+        let obj = hitObj;
+        while (obj && obj.userData.bodyID === void 0 && obj.parent) {
+          obj = obj.parent;
+        }
+        const bodyId = obj && obj.userData.bodyID !== void 0 ? obj.userData.bodyID : -1;
+        return { point: hits[0].point, bodyId, geomId };
+      }
+      return null;
+    },
+    [camera, gl]
+  );
+  const setBodyMass = useCallback((name, mass) => {
+    const model = mjModelRef.current;
+    if (!model) return;
+    const id = findBodyByName(model, name);
+    if (id < 0) return;
+    model.body_mass[id] = mass;
+  }, []);
+  const setGeomFriction = useCallback((name, friction) => {
+    const model = mjModelRef.current;
+    if (!model) return;
+    const id = findGeomByName(model, name);
+    if (id < 0) return;
+    model.geom_friction[id * 3] = friction[0];
+    model.geom_friction[id * 3 + 1] = friction[1];
+    model.geom_friction[id * 3 + 2] = friction[2];
+  }, []);
+  const setGeomSize = useCallback((name, size) => {
+    const model = mjModelRef.current;
+    if (!model) return;
+    const id = findGeomByName(model, name);
+    if (id < 0) return;
+    model.geom_size[id * 3] = size[0];
+    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() {
+        return status;
+      },
+      config,
+      reset,
+      setSpeed,
+      togglePause,
+      setPaused,
+      step,
+      getTime,
+      getTimestep,
+      applyKeyframe,
+      saveState,
+      restoreState,
+      setQpos,
+      setQvel,
+      getQpos,
+      getQvel,
+      setCtrl,
+      getCtrl,
+      applyForce,
+      applyTorque: applyTorqueApi,
+      setExternalForce,
+      applyGeneralizedForce,
+      getSensorData,
+      getContacts,
+      getBodies,
+      getJoints,
+      getGeoms,
+      getSites,
+      getActuators: getActuatorsApi,
+      getSensors,
+      getModelOption,
+      setGravity,
+      setTimestep: setTimestepApi,
+      raycast,
+      getKeyframeNames,
+      getKeyframeCount,
+      loadScene: loadSceneApi,
+      setIkEnabled,
+      moveTarget,
+      syncTargetToSite,
+      solveIK,
+      getGizmoStats,
+      getCanvasSnapshot,
+      project2DTo3D,
+      getCameraState,
+      moveCameraTo,
+      setBodyMass,
+      setGeomFriction,
+      setGeomSize,
+      mjModelRef,
+      mjDataRef
+    }),
+    [
+      status,
+      config,
+      reset,
+      setSpeed,
+      togglePause,
+      setPaused,
+      step,
+      getTime,
+      getTimestep,
+      applyKeyframe,
+      saveState,
+      restoreState,
+      setQpos,
+      setQvel,
+      getQpos,
+      getQvel,
+      setCtrl,
+      getCtrl,
+      applyForce,
+      applyTorqueApi,
+      setExternalForce,
+      applyGeneralizedForce,
+      getSensorData,
+      getContacts,
+      getBodies,
+      getJoints,
+      getGeoms,
+      getSites,
+      getActuatorsApi,
+      getSensors,
+      getModelOption,
+      setGravity,
+      setTimestepApi,
+      raycast,
+      getKeyframeNames,
+      getKeyframeCount,
+      loadSceneApi,
+      setIkEnabled,
+      moveTarget,
+      syncTargetToSite,
+      solveIK,
+      getGizmoStats,
+      getCanvasSnapshot,
+      project2DTo3D,
+      getCameraState,
+      moveCameraTo,
+      setBodyMass,
+      setGeomFriction,
+      setGeomSize
+    ]
+  );
+  const apiRef = useRef(api);
+  apiRef.current = api;
+  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
+    }),
+    [api, status]
+  );
+  return /* @__PURE__ */ jsx(MujocoSimContext.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, { ref, ...canvasProps, children: /* @__PURE__ */ jsx(
+      MujocoSimProvider,
+      {
+        mujoco,
+        config,
+        onReady,
+        onError,
+        onStep,
+        onSelection,
+        gravity,
+        timestep,
+        substeps,
+        paused,
+        speed,
+        interpolate,
+        children
+      }
+    ) });
+  }
+);
+var CapsuleGeometry = class extends THREE.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();
+    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 self = this;
+    self.setIndex(latheGeometry.getIndex());
+    self.setAttribute("position", latheGeometry.getAttribute("position"));
+    self.setAttribute("normal", latheGeometry.getAttribute("normal"));
+    self.setAttribute("uv", latheGeometry.getAttribute("uv"));
+  }
+};
+var Reflector = class extends THREE.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();
+  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);
+    const textureWidth = options.textureWidth || 512;
+    const textureHeight = options.textureHeight || 512;
+    const clipBias = options.clipBias || 0;
+    const multisample = options.multisample !== void 0 ? options.multisample : 4;
+    const blendTexture = options.texture || void 0;
+    const mixStrength = options.mixStrength !== void 0 ? options.mixStrength : 0.25;
+    this.virtualCamera = this.camera;
+    this.renderTarget = new THREE.WebGLRenderTarget(textureWidth, textureHeight, {
+      samples: multisample,
+      type: THREE.HalfFloatType
+    });
+    this.material = new THREE.MeshPhysicalMaterial({
+      map: blendTexture,
+      color,
+      roughness: 0.5,
+      metalness: 0.1
+    });
+    this.material.onBeforeCompile = (shader) => {
+      shader.uniforms.tDiffuse = { value: this.renderTarget.texture };
+      shader.uniforms.textureMatrix = { value: this.textureMatrix };
+      shader.uniforms.mixStrength = { value: mixStrength };
+      const bodyStart = shader.vertexShader.indexOf("void main() {");
+      shader.vertexShader = "uniform mat4 textureMatrix;\nvarying vec4 vUvReflection;\n" + shader.vertexShader.slice(0, bodyStart) + shader.vertexShader.slice(bodyStart, -1) + "   vUvReflection = textureMatrix * vec4( position, 1.0 );\n}";
+      const fragmentBodyStart = shader.fragmentShader.indexOf("void main() {");
+      shader.fragmentShader = "uniform sampler2D tDiffuse;\nuniform float mixStrength;\nvarying vec4 vUvReflection;\n" + shader.fragmentShader.slice(0, fragmentBodyStart) + shader.fragmentShader.slice(fragmentBodyStart, -1) + "   vec4 reflectionColor = texture2DProj( tDiffuse, vUvReflection );\n   gl_FragColor = vec4( mix( gl_FragColor.rgb, reflectionColor.rgb, mixStrength ), gl_FragColor.a );\n}";
+    };
+    this.receiveShadow = true;
+    this.onBeforeRender = (renderer, scene, camera) => {
+      this.reflectorWorldPosition.setFromMatrixPosition(this.matrixWorld);
+      this.cameraWorldPosition.setFromMatrixPosition(camera.matrixWorld);
+      this.rotationMatrix.extractRotation(this.matrixWorld);
+      this.normal.set(0, 0, 1);
+      this.normal.applyMatrix4(this.rotationMatrix);
+      this.view.subVectors(this.reflectorWorldPosition, this.cameraWorldPosition);
+      if (this.view.dot(this.normal) > 0) return;
+      this.view.reflect(this.normal).negate();
+      this.view.add(this.reflectorWorldPosition);
+      this.rotationMatrix.extractRotation(camera.matrixWorld);
+      this.lookAtPosition.set(0, 0, -1);
+      this.lookAtPosition.applyMatrix4(this.rotationMatrix);
+      this.lookAtPosition.add(this.cameraWorldPosition);
+      this.target.subVectors(this.reflectorWorldPosition, this.lookAtPosition);
+      this.target.reflect(this.normal).negate();
+      this.target.add(this.reflectorWorldPosition);
+      this.virtualCamera.position.copy(this.view);
+      this.virtualCamera.up.set(0, 1, 0);
+      this.virtualCamera.up.applyMatrix4(this.rotationMatrix);
+      this.virtualCamera.up.reflect(this.normal);
+      this.virtualCamera.lookAt(this.target);
+      this.virtualCamera.far = camera.far;
+      this.virtualCamera.updateMatrixWorld();
+      this.virtualCamera.projectionMatrix.copy(camera.projectionMatrix);
+      this.textureMatrix.set(
+        0.5,
+        0,
+        0,
+        0.5,
+        0,
+        0.5,
+        0,
+        0.5,
+        0,
+        0,
+        0.5,
+        0.5,
+        0,
+        0,
+        0,
+        1
+      );
+      this.textureMatrix.multiply(this.virtualCamera.projectionMatrix);
+      this.textureMatrix.multiply(this.virtualCamera.matrixWorldInverse);
+      this.textureMatrix.multiply(this.matrixWorld);
+      this.reflectorPlane.setFromNormalAndCoplanarPoint(this.normal, this.reflectorWorldPosition);
+      this.reflectorPlane.applyMatrix4(this.virtualCamera.matrixWorldInverse);
+      this.clipPlane.set(this.reflectorPlane.normal.x, this.reflectorPlane.normal.y, this.reflectorPlane.normal.z, this.reflectorPlane.constant);
+      const projectionMatrix = this.virtualCamera.projectionMatrix;
+      this.q.x = (Math.sign(this.clipPlane.x) + projectionMatrix.elements[8]) / projectionMatrix.elements[0];
+      this.q.y = (Math.sign(this.clipPlane.y) + projectionMatrix.elements[9]) / projectionMatrix.elements[5];
+      this.q.z = -1;
+      this.q.w = (1 + projectionMatrix.elements[10]) / projectionMatrix.elements[14];
+      this.clipPlane.multiplyScalar(2 / this.clipPlane.dot(this.q));
+      projectionMatrix.elements[2] = this.clipPlane.x;
+      projectionMatrix.elements[6] = this.clipPlane.y;
+      projectionMatrix.elements[10] = this.clipPlane.z + 1 - clipBias;
+      projectionMatrix.elements[14] = this.clipPlane.w;
+      this.visible = false;
+      const currentRenderTarget = renderer.getRenderTarget();
+      const currentXrEnabled = renderer.xr.enabled;
+      const currentShadowAutoUpdate = renderer.shadowMap.autoUpdate;
+      renderer.xr.enabled = false;
+      renderer.shadowMap.autoUpdate = false;
+      renderer.setRenderTarget(this.renderTarget);
+      renderer.state.buffers.depth.setMask(true);
+      if (renderer.autoClear === false) renderer.clear();
+      renderer.render(scene, this.virtualCamera);
+      renderer.xr.enabled = currentXrEnabled;
+      renderer.shadowMap.autoUpdate = currentShadowAutoUpdate;
+      renderer.setRenderTarget(currentRenderTarget);
+      const viewport = camera.viewport;
+      if (viewport !== void 0) {
+        renderer.state.viewport(viewport);
+      }
+      this.visible = true;
+    };
+  }
+  getRenderTarget() {
+    return this.renderTarget;
+  }
+  dispose() {
+    this.renderTarget.dispose();
+    const mesh = this;
+    if (Array.isArray(mesh.material)) {
+      mesh.material.forEach((m) => m.dispose());
+    } else {
+      mesh.material.dispose();
+    }
+  }
+};
+
+// src/rendering/GeomBuilder.ts
+var GeomBuilder = class {
+  mujoco;
+  constructor(mujoco) {
+    this.mujoco = mujoco;
+  }
+  /**
+   * Creates a Three.js Object3D (usually a Mesh) for a specific geometry in the MuJoCo model.
+   * Returns null if the geometry shouldn't be rendered (e.g., invisible collision triggers).
+   */
+  create(mjModel, g) {
+    if (mjModel.geom_group[g] === 3) return null;
+    const type = mjModel.geom_type[g];
+    const size = mjModel.geom_size.subarray(g * 3, g * 3 + 3);
+    const pos = mjModel.geom_pos.subarray(g * 3, g * 3 + 3);
+    const quat = mjModel.geom_quat.subarray(g * 4, g * 4 + 4);
+    const matId = mjModel.geom_matid[g];
+    const color = new THREE.Color(16777215);
+    let opacity = 1;
+    if (matId >= 0) {
+      const rgba = mjModel.mat_rgba.subarray(matId * 4, matId * 4 + 4);
+      color.setRGB(rgba[0], rgba[1], rgba[2]);
+      opacity = rgba[3];
+    } else {
+      const rgba = mjModel.geom_rgba.subarray(g * 4, g * 4 + 4);
+      color.setRGB(rgba[0], rgba[1], rgba[2]);
+      opacity = rgba[3];
+    }
+    const MG = this.mujoco.mjtGeom;
+    let geo = null;
+    const getVal = (v) => v?.value ?? v;
+    if (type === getVal(MG.mjGEOM_PLANE)) {
+      geo = new THREE.PlaneGeometry(size[0] * 2 || 5, size[1] * 2 || 5);
+    } else if (type === getVal(MG.mjGEOM_SPHERE)) {
+      geo = new THREE.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);
+    } else if (type === getVal(MG.mjGEOM_CYLINDER)) {
+      geo = new THREE.CylinderGeometry(size[0], size[0], size[1] * 2, 24);
+      geo.rotateX(Math.PI / 2);
+    } else if (type === getVal(MG.mjGEOM_MESH)) {
+      const mId = mjModel.geom_dataid[g];
+      const vAdr = mjModel.mesh_vertadr[mId];
+      const vNum = mjModel.mesh_vertnum[mId];
+      const fAdr = mjModel.mesh_faceadr[mId];
+      const fNum = mjModel.mesh_facenum[mId];
+      geo = new THREE.BufferGeometry();
+      geo.setAttribute("position", new THREE.Float32BufferAttribute(mjModel.mesh_vert.subarray(vAdr * 3, (vAdr + vNum) * 3), 3));
+      geo.setIndex(Array.from(mjModel.mesh_face.subarray(fAdr * 3, (fAdr + fNum) * 3)));
+      geo.computeVertexNormals();
+    }
+    if (geo) {
+      let mesh;
+      if (type === getVal(MG.mjGEOM_PLANE)) {
+        mesh = new Reflector(geo, {
+          clipBias: 3e-3,
+          textureWidth: 1024,
+          textureHeight: 1024,
+          color,
+          mixStrength: 0.25
+        });
+      } else {
+        mesh = new THREE.Mesh(geo, new THREE.MeshStandardMaterial({
+          color,
+          transparent: opacity < 1,
+          opacity,
+          roughness: 0.6,
+          metalness: 0.2
+        }));
+        mesh.castShadow = true;
+        mesh.receiveShadow = true;
+      }
+      mesh.position.set(pos[0], pos[1], pos[2]);
+      mesh.quaternion.set(quat[1], quat[2], quat[3], quat[0]);
+      mesh.userData.bodyID = mjModel.geom_bodyid[g];
+      mesh.userData.geomID = g;
+      return mesh;
+    }
+    return null;
+  }
+};
+function SceneRenderer() {
+  const { mjModelRef, mjDataRef, mujocoRef, onSelectionRef, status } = useMujocoSim();
+  const groupRef = useRef(null);
+  const bodyRefs = useRef([]);
+  const prevModelRef = useRef(null);
+  const geomBuilder = useMemo(() => {
+    return new GeomBuilder(mujocoRef.current);
+  }, [mujocoRef.current]);
+  useEffect(() => {
+    if (status !== "ready") return;
+    const model = mjModelRef.current;
+    const group = groupRef.current;
+    if (!model || !group) return;
+    if (prevModelRef.current === model) return;
+    prevModelRef.current = model;
+    while (group.children.length > 0) {
+      group.remove(group.children[0]);
+    }
+    const refs = [];
+    for (let i = 0; i < model.nbody; i++) {
+      const bodyGroup = new THREE.Group();
+      bodyGroup.userData.bodyID = i;
+      for (let g = 0; g < model.ngeom; g++) {
+        if (model.geom_bodyid[g] === i) {
+          const mesh = geomBuilder.create(model, g);
+          if (mesh) bodyGroup.add(mesh);
+        }
+      }
+      group.add(bodyGroup);
+      refs.push(bodyGroup);
+    }
+    bodyRefs.current = refs;
+  }, [status, geomBuilder, mjModelRef]);
+  useFrame(() => {
+    const data = mjDataRef.current;
+    if (!data) return;
+    const bodies = bodyRefs.current;
+    for (let i = 0; i < bodies.length; i++) {
+      const ref = bodies[i];
+      if (!ref) continue;
+      ref.position.set(
+        data.xpos[i * 3],
+        data.xpos[i * 3 + 1],
+        data.xpos[i * 3 + 2]
+      );
+      ref.quaternion.set(
+        data.xquat[i * 4 + 1],
+        data.xquat[i * 4 + 2],
+        data.xquat[i * 4 + 3],
+        data.xquat[i * 4]
+      );
+    }
+  });
+  return /* @__PURE__ */ jsx(
+    "group",
+    {
+      ref: groupRef,
+      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 model = mjModelRef.current;
+          if (model && onSelectionRef.current) {
+            const name = getName(model, model.name_bodyadr[obj.userData.bodyID]);
+            onSelectionRef.current(obj.userData.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);
+function IkGizmo({ siteName, scale = 0.18, onDrag }) {
+  const {
+    ikTargetRef,
+    mjModelRef,
+    mjDataRef,
+    siteIdRef,
+    api,
+    ikEnabledRef,
+    status
+  } = useMujocoSim();
+  const wrapperRef = useRef(null);
+  const pivotRef = useRef(null);
+  const draggingRef = useRef(false);
+  const localSiteIdRef = useRef(-1);
+  const { controls } = useThree();
+  useEffect(() => {
+    const model = mjModelRef.current;
+    if (!model || status !== "ready") {
+      localSiteIdRef.current = -1;
+      return;
+    }
+    if (siteName) {
+      localSiteIdRef.current = findSiteByName(model, siteName);
+    } else {
+      localSiteIdRef.current = siteIdRef.current;
+    }
+  }, [siteName, status, mjModelRef, siteIdRef]);
+  useFrame(() => {
+    const data = mjDataRef.current;
+    const sid = localSiteIdRef.current;
+    if (!data || sid < 0 || !wrapperRef.current) return;
+    if (!draggingRef.current) {
+      const p = data.site_xpos;
+      const m = data.site_xmat;
+      const i3 = sid * 3;
+      const i9 = sid * 9;
+      wrapperRef.current.position.set(p[i3], p[i3 + 1], p[i3 + 2]);
+      _mat4.set(
+        m[i9],
+        m[i9 + 1],
+        m[i9 + 2],
+        0,
+        m[i9 + 3],
+        m[i9 + 4],
+        m[i9 + 5],
+        0,
+        m[i9 + 6],
+        m[i9 + 7],
+        m[i9 + 8],
+        0,
+        0,
+        0,
+        0,
+        1
+      );
+      wrapperRef.current.quaternion.setFromRotationMatrix(_mat4);
+      if (pivotRef.current) {
+        pivotRef.current.matrix.identity();
+      }
+    }
+  });
+  if (status !== "ready") return null;
+  return /* @__PURE__ */ jsx("group", { ref: wrapperRef, children: /* @__PURE__ */ jsx(
+    PivotControls,
+    {
+      ref: pivotRef,
+      autoTransform: true,
+      scale,
+      fixed: false,
+      depthTest: false,
+      disableScaling: true,
+      onDragStart: () => {
+        draggingRef.current = true;
+        if (!onDrag) {
+          if (!ikEnabledRef.current) api.setIkEnabled(true);
+        }
+        if (controls) controls.enabled = false;
+      },
+      onDragEnd: () => {
+        draggingRef.current = false;
+        if (pivotRef.current) {
+          pivotRef.current.matrix.identity();
+          pivotRef.current.matrixWorldNeedsUpdate = true;
+        }
+        if (controls) controls.enabled = true;
+      },
+      onDrag: (_l, _dl, world) => {
+        world.decompose(_pos, _quat, _scale);
+        if (onDrag) {
+          onDrag(_pos.clone(), _quat.clone());
+        } else {
+          const target = ikTargetRef.current;
+          if (target) {
+            target.position.copy(_pos);
+            target.quaternion.copy(_quat);
+          }
+        }
+      },
+      children: /* @__PURE__ */ jsx("mesh", { visible: false, children: /* @__PURE__ */ jsx("sphereGeometry", { args: [1e-3] }) })
+    }
+  ) });
+}
+var _dummy = new THREE.Object3D();
+function ContactMarkers({
+  maxContacts = 100,
+  radius = 5e-3,
+  color = "#4f46e5",
+  visible = true
+} = {}) {
+  const { mjDataRef, status } = useMujocoSim();
+  const meshRef = useRef(null);
+  useFrame(() => {
+    const mesh = meshRef.current;
+    const data = mjDataRef.current;
+    if (!mesh || !data || !visible) {
+      if (mesh) mesh.count = 0;
+      return;
+    }
+    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 {
+        mesh.count = i;
+        mesh.instanceMatrix.needsUpdate = true;
+        return;
+      }
+    }
+    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: [
+    /* @__PURE__ */ jsx("sphereGeometry", { args: [radius, 8, 8] }),
+    /* @__PURE__ */ jsx(
+      "meshStandardMaterial",
+      {
+        color,
+        emissive: color,
+        emissiveIntensity: 0.3,
+        roughness: 0.5
+      }
+    )
+  ] });
+}
+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();
+function DragInteraction({
+  stiffness = 250,
+  showArrow = true
+}) {
+  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 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(),
+      0.1,
+      16729156
+    );
+    arrow.visible = false;
+    arrow.line.material.transparent = true;
+    arrow.line.material.opacity = 0.6;
+    arrow.cone.material.transparent = true;
+    arrow.cone.material.opacity = 0.6;
+    groupRef.current.add(arrow);
+    arrowRef.current = arrow;
+    return () => {
+      if (groupRef.current) groupRef.current.remove(arrow);
+      arrow.dispose();
+      arrowRef.current = null;
+    };
+  }, [showArrow]);
+  useEffect(() => {
+    const canvas = gl.domElement;
+    const onPointerDown = (evt) => {
+      if (evt.button !== 0) return;
+      if (!evt.ctrlKey && !evt.metaKey) return;
+      const rect = canvas.getBoundingClientRect();
+      _mouse.set(
+        (evt.clientX - rect.left) / rect.width * 2 - 1,
+        -((evt.clientY - rect.top) / rect.height) * 2 + 1
+      );
+      _raycaster.setFromCamera(_mouse, camera);
+      const hits = _raycaster.intersectObjects(scene.children, true);
+      for (const hit of hits) {
+        let obj = hit.object;
+        while (obj && obj.userData.bodyID === void 0 && obj.parent) {
+          obj = obj.parent;
+        }
+        const bid = obj?.userData.bodyID;
+        if (bid !== void 0 && bid > 0) {
+          bodyIdRef.current = bid;
+          draggingRef.current = true;
+          grabDistanceRef.current = hit.distance;
+          const data = mjDataRef.current;
+          if (data) {
+            const i3 = bid * 3;
+            const i4 = bid * 4;
+            _bodyPos.set(data.xpos[i3], data.xpos[i3 + 1], data.xpos[i3 + 2]);
+            _bodyQuat.set(
+              data.xquat[i4 + 1],
+              data.xquat[i4 + 2],
+              data.xquat[i4 + 3],
+              data.xquat[i4]
+            );
+            localHitRef.current.copy(hit.point).sub(_bodyPos);
+            localHitRef.current.applyQuaternion(_bodyQuat.clone().invert());
+          }
+          mouseWorldRef.current.copy(hit.point);
+          grabWorldRef.current.copy(hit.point);
+          if (controls) controls.enabled = false;
+          break;
+        }
+      }
+    };
+    const onPointerMove = (evt) => {
+      if (!draggingRef.current) return;
+      if (evt.buttons === 0) {
+        draggingRef.current = false;
+        bodyIdRef.current = -1;
+        if (controls) controls.enabled = true;
+        return;
+      }
+      const rect = canvas.getBoundingClientRect();
+      _mouse.set(
+        (evt.clientX - rect.left) / rect.width * 2 - 1,
+        -((evt.clientY - rect.top) / rect.height) * 2 + 1
+      );
+      _raycaster.setFromCamera(_mouse, camera);
+      mouseWorldRef.current.copy(_raycaster.ray.origin).addScaledVector(_raycaster.ray.direction, grabDistanceRef.current);
+    };
+    const onPointerUp = () => {
+      if (!draggingRef.current) return;
+      draggingRef.current = false;
+      bodyIdRef.current = -1;
+      if (controls) controls.enabled = true;
+    };
+    canvas.addEventListener("pointerdown", onPointerDown);
+    canvas.addEventListener("pointermove", onPointerMove);
+    window.addEventListener("pointerup", onPointerUp);
+    window.addEventListener("pointercancel", onPointerUp);
+    return () => {
+      canvas.removeEventListener("pointerdown", onPointerDown);
+      canvas.removeEventListener("pointermove", onPointerMove);
+      window.removeEventListener("pointerup", onPointerUp);
+      window.removeEventListener("pointercancel", onPointerUp);
+    };
+  }, [gl, camera, scene, controls, mjDataRef]);
+  useBeforePhysicsStep((model, data) => {
+    if (!draggingRef.current || bodyIdRef.current <= 0) return;
+    const bid = bodyIdRef.current;
+    const mujoco = mujocoRef.current;
+    const i3 = bid * 3;
+    const i4 = bid * 4;
+    _bodyPos.set(data.xpos[i3], data.xpos[i3 + 1], data.xpos[i3 + 2]);
+    _bodyQuat.set(
+      data.xquat[i4 + 1],
+      data.xquat[i4 + 2],
+      data.xquat[i4 + 3],
+      data.xquat[i4]
+    );
+    _worldHit.copy(localHitRef.current);
+    _worldHit.applyQuaternion(_bodyQuat);
+    _worldHit.add(_bodyPos);
+    grabWorldRef.current.copy(_worldHit);
+    const mass = model.body_mass[bid];
+    const s = stiffness * mass;
+    _force[0] = (mouseWorldRef.current.x - _worldHit.x) * s;
+    _force[1] = (mouseWorldRef.current.y - _worldHit.y) * s;
+    _force[2] = (mouseWorldRef.current.z - _worldHit.z) * s;
+    _point[0] = _worldHit.x;
+    _point[1] = _worldHit.y;
+    _point[2] = _worldHit.z;
+    _torque[0] = 0;
+    _torque[1] = 0;
+    _torque[2] = 0;
+    mujoco.mj_applyFT(model, data, _force, _torque, _point, bid, data.qfrc_applied);
+  });
+  useFrame(() => {
+    const arrow = arrowRef.current;
+    if (!arrow) return;
+    if (draggingRef.current && bodyIdRef.current > 0) {
+      arrow.visible = true;
+      const dir = mouseWorldRef.current.clone().sub(grabWorldRef.current);
+      const len = dir.length();
+      if (len > 1e-3) {
+        dir.normalize();
+        arrow.position.copy(grabWorldRef.current);
+        arrow.setDirection(dir);
+        arrow.setLength(len, Math.min(len * 0.2, 0.05), Math.min(len * 0.1, 0.03));
+      }
+    } else {
+      arrow.visible = false;
+    }
+  });
+  if (status !== "ready") return null;
+  return /* @__PURE__ */ jsx("group", { ref: groupRef });
+}
+function SceneLights({ intensity = 1 }) {
+  const { mjModelRef, status } = useMujocoSim();
+  const { scene } = useThree();
+  const lightsRef = useRef([]);
+  const targetsRef = useRef([]);
+  useEffect(() => {
+    const model = mjModelRef.current;
+    if (!model || status !== "ready") return;
+    for (const light of lightsRef.current) {
+      scene.remove(light);
+      light.dispose();
+    }
+    for (const t of targetsRef.current) scene.remove(t);
+    lightsRef.current = [];
+    targetsRef.current = [];
+    const nlight = model.nlight ?? 0;
+    if (nlight === 0) return;
+    for (let i = 0; i < nlight; i++) {
+      const active = model.light_active ? model.light_active[i] : 1;
+      if (!active) continue;
+      const lightType = model.light_type ? model.light_type[i] : 0;
+      const isDirectional = lightType === 0;
+      const castShadow = model.light_castshadow ? model.light_castshadow[i] !== 0 : false;
+      const mjIntensity = model.light_intensity ? model.light_intensity[i] : 1;
+      const finalIntensity = intensity * mjIntensity;
+      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 px = model.light_pos[3 * i];
+      const py = model.light_pos[3 * i + 1];
+      const pz = model.light_pos[3 * i + 2];
+      const dx = model.light_dir[3 * i];
+      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);
+        light.position.set(px, py, pz);
+        light.target.position.set(px + dx, py + dy, pz + dz);
+        light.castShadow = castShadow;
+        if (castShadow) {
+          light.shadow.mapSize.width = 1024;
+          light.shadow.mapSize.height = 1024;
+          light.shadow.camera.near = 0.1;
+          light.shadow.camera.far = 50;
+          const d = 5;
+          light.shadow.camera.left = -d;
+          light.shadow.camera.right = d;
+          light.shadow.camera.top = d;
+          light.shadow.camera.bottom = -d;
+        }
+        scene.add(light);
+        scene.add(light.target);
+        lightsRef.current.push(light);
+        targetsRef.current.push(light.target);
+      } else {
+        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);
+        light.position.set(px, py, pz);
+        light.target.position.set(px + dx, py + dy, pz + dz);
+        light.castShadow = castShadow;
+        if (model.light_attenuation) {
+          const att1 = model.light_attenuation[3 * i + 1];
+          const att2 = model.light_attenuation[3 * i + 2];
+          light.decay = att2 > 0 ? 2 : att1 > 0 ? 1 : 0;
+          light.distance = att1 > 0 ? 1 / att1 : 0;
+        }
+        if (castShadow) {
+          light.shadow.mapSize.width = 512;
+          light.shadow.mapSize.height = 512;
+        }
+        scene.add(light);
+        scene.add(light.target);
+        lightsRef.current.push(light);
+        targetsRef.current.push(light.target);
+      }
+    }
+    return () => {
+      for (const light of lightsRef.current) {
+        scene.remove(light);
+        light.dispose();
+      }
+      for (const t of targetsRef.current) scene.remove(t);
+      lightsRef.current = [];
+      targetsRef.current = [];
+    };
+  }, [status, mjModelRef, scene, intensity]);
+  return null;
+}
+var JOINT_COLORS = {
+  0: 16711680,
+  // free - red
+  1: 65280,
+  // ball - green
+  2: 255,
+  // slide - blue
+  3: 16776960
+  // hinge - yellow
+};
+function Debug({
+  showGeoms = false,
+  showSites = false,
+  showJoints = false,
+  showContacts = false,
+  showCOM = false,
+  showInertia = false,
+  showTendons = false
+}) {
+  const { mjModelRef, mjDataRef, status } = useMujocoSim();
+  const { scene } = useThree();
+  const groupRef = useRef(null);
+  const debugGeometry = useMemo(() => {
+    const model = mjModelRef.current;
+    if (!model || status !== "ready") return null;
+    const geoms = [];
+    const sites = [];
+    const joints = [];
+    const comMarkers = [];
+    if (showGeoms) {
+      for (let i = 0; i < model.ngeom; i++) {
+        const type = model.geom_type[i];
+        const s = model.geom_size;
+        let geometry = null;
+        switch (type) {
+          case 2:
+            geometry = new THREE.SphereGeometry(s[3 * i], 12, 8);
+            break;
+          case 3:
+            geometry = new THREE.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);
+            break;
+          case 6:
+            geometry = new THREE.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);
+          mesh.userData.geomId = i;
+          mesh.userData.bodyId = model.geom_bodyid[i];
+          geoms.push(mesh);
+        }
+      }
+    }
+    if (showSites) {
+      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);
+        mesh.userData.siteId = i;
+        sites.push(mesh);
+      }
+    }
+    if (showJoints) {
+      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,
+          color,
+          0.01,
+          5e-3
+        );
+        arrow.userData.jointId = i;
+        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);
+        mesh.userData.bodyId = i;
+        comMarkers.push(mesh);
+      }
+    }
+    return { geoms, sites, joints, comMarkers };
+  }, [status, mjModelRef, showGeoms, showSites, showJoints, showCOM]);
+  useEffect(() => {
+    const group = groupRef.current;
+    if (!group || !debugGeometry) return;
+    const allObjects = [
+      ...debugGeometry.geoms,
+      ...debugGeometry.sites,
+      ...debugGeometry.joints,
+      ...debugGeometry.comMarkers
+    ];
+    for (const obj of allObjects) group.add(obj);
+    return () => {
+      for (const obj of allObjects) {
+        group.remove(obj);
+        if (obj.geometry) obj.geometry.dispose();
+      }
+    };
+  }, [debugGeometry]);
+  useFrame(() => {
+    const model = mjModelRef.current;
+    const data = mjDataRef.current;
+    if (!model || !data || !debugGeometry) return;
+    for (const mesh of debugGeometry.geoms) {
+      const bid = mesh.userData.bodyId;
+      const i3 = bid * 3;
+      const i4 = bid * 4;
+      mesh.position.set(data.xpos[i3], data.xpos[i3 + 1], data.xpos[i3 + 2]);
+      mesh.quaternion.set(
+        data.xquat[i4 + 1],
+        data.xquat[i4 + 2],
+        data.xquat[i4 + 3],
+        data.xquat[i4]
+      );
+      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));
+    }
+    for (const mesh of debugGeometry.sites) {
+      const sid = mesh.userData.siteId;
+      mesh.position.set(
+        data.site_xpos[3 * sid],
+        data.site_xpos[3 * sid + 1],
+        data.site_xpos[3 * sid + 2]
+      );
+    }
+    for (const mesh of debugGeometry.comMarkers) {
+      const bid = mesh.userData.bodyId;
+      const i3 = bid * 3;
+      mesh.position.set(data.xpos[i3], data.xpos[i3 + 1], data.xpos[i3 + 2]);
+    }
+  });
+  const contactGroupRef = useRef(null);
+  const contactArrowsRef = useRef([]);
+  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 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;
+      }
+    }
+  });
+  if (status !== "ready") return null;
+  return /* @__PURE__ */ jsxs(Fragment, { 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_WIDTH = 2e-3;
+function TendonRenderer() {
+  const { mjModelRef, mjDataRef, status } = useMujocoSim();
+  const groupRef = useRef(null);
+  const meshesRef = useRef([]);
+  useFrame(() => {
+    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();
+    }
+    meshesRef.current = [];
+    for (let t = 0; t < ntendon; t++) {
+      const wrapAdr = model.ten_wrapadr[t];
+      const wrapNum = model.ten_wrapnum[t];
+      if (wrapNum < 2) continue;
+      const points = [];
+      for (let w = 0; w < wrapNum; w++) {
+        const idx = (wrapAdr + w) * 3;
+        if (data.wrap_xpos && idx + 2 < data.wrap_xpos.length) {
+          const x = data.wrap_xpos[idx];
+          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 (points.length < 2) continue;
+      const curve = new THREE.CatmullRomCurve3(points, false);
+      const geometry = new THREE.TubeGeometry(
+        curve,
+        Math.max(points.length * 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);
+    }
+  });
+  if (status !== "ready") return null;
+  return /* @__PURE__ */ jsx("group", { ref: groupRef });
+}
+function FlexRenderer() {
+  const { mjModelRef, mjDataRef, status } = useMujocoSim();
+  const groupRef = useRef(null);
+  const meshesRef = useRef([]);
+  useEffect(() => {
+    const model = mjModelRef.current;
+    const group = groupRef.current;
+    if (!model || !group || status !== "ready") return;
+    const nflex = model.nflex ?? 0;
+    if (nflex === 0) return;
+    for (let f = 0; f < nflex; f++) {
+      const vertAdr = model.flex_vertadr[f];
+      const vertNum = model.flex_vertnum[f];
+      if (vertNum === 0) continue;
+      const geometry = new THREE.BufferGeometry();
+      const positions = new Float32Array(vertNum * 3);
+      geometry.setAttribute("position", new THREE.BufferAttribute(positions, 3));
+      geometry.computeVertexNormals();
+      let color = new THREE.Color(0.5, 0.5, 0.5);
+      if (model.flex_rgba) {
+        color = new THREE.Color(
+          model.flex_rgba[4 * f],
+          model.flex_rgba[4 * f + 1],
+          model.flex_rgba[4 * f + 2]
+        );
+      }
+      const material = new THREE.MeshStandardMaterial({
+        color,
+        roughness: 0.7,
+        side: THREE.DoubleSide
+      });
+      const mesh = new THREE.Mesh(geometry, material);
+      mesh.userData.flexId = f;
+      mesh.userData.vertAdr = vertAdr;
+      mesh.userData.vertNum = vertNum;
+      group.add(mesh);
+      meshesRef.current.push(mesh);
+    }
+    return () => {
+      for (const mesh of meshesRef.current) {
+        group.remove(mesh);
+        mesh.geometry.dispose();
+        mesh.material.dispose();
+      }
+      meshesRef.current = [];
+    };
+  }, [status, mjModelRef]);
+  useFrame(() => {
+    const data = mjDataRef.current;
+    if (!data || !data.flexvert_xpos) return;
+    for (const mesh of meshesRef.current) {
+      const vertAdr = mesh.userData.vertAdr;
+      const vertNum = mesh.userData.vertNum;
+      const posAttr = mesh.geometry.getAttribute("position");
+      if (!posAttr) continue;
+      for (let v = 0; v < vertNum; v++) {
+        const srcIdx = (vertAdr + v) * 3;
+        posAttr.setXYZ(v, data.flexvert_xpos[srcIdx], data.flexvert_xpos[srcIdx + 1], data.flexvert_xpos[srcIdx + 2]);
+      }
+      posAttr.needsUpdate = true;
+      mesh.geometry.computeVertexNormals();
+    }
+  });
+  if (status !== "ready") return null;
+  return /* @__PURE__ */ jsx("group", { ref: groupRef });
+}
+function useContacts(bodyName, callback) {
+  const { mjModelRef } = useMujocoSim();
+  const contactsRef = useRef([]);
+  const bodyIdRef = useRef(-1);
+  const callbackRef = useRef(callback);
+  callbackRef.current = callback;
+  useEffect(() => {
+    if (!bodyName) {
+      bodyIdRef.current = -1;
+      return;
+    }
+    const model = mjModelRef.current;
+    if (!model) return;
+    bodyIdRef.current = findBodyByName(model, bodyName);
+  }, [bodyName, mjModelRef]);
+  useAfterPhysicsStep((model, data) => {
+    const ncon = data.ncon;
+    if (ncon === 0) {
+      if (contactsRef.current.length > 0) contactsRef.current = [];
+      callbackRef.current?.([]);
+      return;
+    }
+    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;
+      }
+    }
+    contactsRef.current = contacts;
+    callbackRef.current?.(contacts);
+  });
+  return contactsRef;
+}
+function useContactEvents(bodyName, handlers) {
+  const prevPairsRef = useRef(/* @__PURE__ */ new Set());
+  const onEnterRef = useRef(handlers.onEnter);
+  const onExitRef = useRef(handlers.onExit);
+  onEnterRef.current = handlers.onEnter;
+  onExitRef.current = handlers.onExit;
+  const prevContactMapRef = useRef(/* @__PURE__ */ new Map());
+  const onContacts = useCallback((contacts) => {
+    const currentPairs = /* @__PURE__ */ new Set();
+    const currentMap = /* @__PURE__ */ new Map();
+    for (const c of contacts) {
+      const key = `${Math.min(c.geom1, c.geom2)}_${Math.max(c.geom1, c.geom2)}`;
+      currentPairs.add(key);
+      currentMap.set(key, c);
+    }
+    for (const key of currentPairs) {
+      if (!prevPairsRef.current.has(key)) {
+        onEnterRef.current?.(currentMap.get(key));
+      }
+    }
+    for (const key of prevPairsRef.current) {
+      if (!currentPairs.has(key)) {
+        const prev = prevContactMapRef.current.get(key);
+        if (prev) onExitRef.current?.(prev);
+      }
+    }
+    prevPairsRef.current = currentPairs;
+    prevContactMapRef.current = currentMap;
+  }, []);
+  useContacts(bodyName, onContacts);
+}
+
+// src/components/ContactListener.tsx
+function ContactListener({
+  body,
+  onContactEnter,
+  onContactExit
+}) {
+  useContactEvents(body, {
+    onEnter: onContactEnter,
+    onExit: onContactExit
+  });
+  return null;
+}
+function useTrajectoryPlayer(trajectory, options = {}) {
+  const { mjModelRef, mjDataRef, mujocoRef, pausedRef } = useMujocoSim();
+  const fps = options.fps ?? 30;
+  const loop = options.loop ?? false;
+  const playingRef = useRef(false);
+  const frameRef = useRef(0);
+  const lastFrameTimeRef = useRef(0);
+  const play = useCallback(() => {
+    playingRef.current = true;
+    pausedRef.current = true;
+    lastFrameTimeRef.current = performance.now();
+  }, [pausedRef]);
+  const pause = useCallback(() => {
+    playingRef.current = false;
+  }, []);
+  const seek = useCallback((frameIdx) => {
+    frameRef.current = Math.max(0, Math.min(frameIdx, trajectory.length - 1));
+    const model = mjModelRef.current;
+    const data = mjDataRef.current;
+    if (!model || !data || !trajectory[frameRef.current]) return;
+    const qpos = trajectory[frameRef.current];
+    for (let i = 0; i < Math.min(qpos.length, model.nq); i++) {
+      data.qpos[i] = qpos[i];
+    }
+    mujocoRef.current.mj_forward(model, data);
+  }, [trajectory, mjModelRef, mjDataRef, mujocoRef]);
+  const reset = useCallback(() => {
+    frameRef.current = 0;
+    playingRef.current = false;
+    pausedRef.current = false;
+  }, [pausedRef]);
+  useFrame(() => {
+    if (!playingRef.current || trajectory.length === 0) return;
+    const now = performance.now();
+    const elapsed = now - lastFrameTimeRef.current;
+    const frameInterval = 1e3 / fps;
+    if (elapsed < frameInterval) return;
+    lastFrameTimeRef.current = now;
+    const model = mjModelRef.current;
+    const data = mjDataRef.current;
+    if (!model || !data) return;
+    const qpos = trajectory[frameRef.current];
+    if (!qpos) return;
+    for (let i = 0; i < Math.min(qpos.length, model.nq); i++) {
+      data.qpos[i] = qpos[i];
+    }
+    mujocoRef.current.mj_forward(model, data);
+    frameRef.current++;
+    if (frameRef.current >= trajectory.length) {
+      if (loop) {
+        frameRef.current = 0;
+      } else {
+        playingRef.current = false;
+        pausedRef.current = false;
+      }
+    }
+  });
+  return {
+    play,
+    pause,
+    seek,
+    reset,
+    get frame() {
+      return frameRef.current;
+    },
+    get playing() {
+      return playingRef.current;
+    },
+    get totalFrames() {
+      return trajectory.length;
+    }
+  };
+}
+
+// src/components/TrajectoryPlayer.tsx
+function TrajectoryPlayer({
+  trajectory,
+  fps = 30,
+  loop = false,
+  playing = false,
+  onFrame
+}) {
+  const player = useTrajectoryPlayer(trajectory, { fps, loop });
+  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);
+    }
+  }, [onFrame, fps]);
+  return null;
+}
+function SelectionHighlight({
+  bodyId,
+  color = "#ff4444",
+  emissiveIntensity = 0.3
+}) {
+  const { scene } = useThree();
+  const prevMeshesRef = useRef([]);
+  useEffect(() => {
+    for (const entry of prevMeshesRef.current) {
+      const mat = entry.mesh.material;
+      if (mat.emissive) {
+        mat.emissive.copy(entry.originalEmissive);
+        mat.emissiveIntensity = entry.originalIntensity;
+      }
+    }
+    prevMeshesRef.current = [];
+    if (bodyId === null || bodyId < 0) return;
+    const highlightColor = new THREE.Color(color);
+    scene.traverse((obj) => {
+      if (obj.userData.bodyID === bodyId && obj.isMesh) {
+        const mesh = obj;
+        const mat = mesh.material;
+        if (mat.emissive) {
+          prevMeshesRef.current.push({
+            mesh,
+            originalEmissive: mat.emissive.clone(),
+            originalIntensity: mat.emissiveIntensity ?? 0
+          });
+          mat.emissive.copy(highlightColor);
+          mat.emissiveIntensity = emissiveIntensity;
+        }
+      }
+    });
+    return () => {
+      for (const entry of prevMeshesRef.current) {
+        const mat = entry.mesh.material;
+        if (mat.emissive) {
+          mat.emissive.copy(entry.originalEmissive);
+          mat.emissiveIntensity = entry.originalIntensity;
+        }
+      }
+      prevMeshesRef.current = [];
+    };
+  }, [bodyId, color, emissiveIntensity, scene]);
+  return null;
+}
+function useActuators() {
+  const { mjModelRef, status } = useMujocoSim();
+  return useMemo(() => {
+    if (status !== "ready") return [];
+    const model = mjModelRef.current;
+    if (!model) return [];
+    const actuators = [];
+    for (let i = 0; i < model.nu; i++) {
+      const name = getName(model, model.name_actuatoradr[i]);
+      const lo = model.actuator_ctrlrange[i * 2];
+      const hi = model.actuator_ctrlrange[i * 2 + 1];
+      const hasRange = lo < hi;
+      const range = hasRange ? [lo, hi] : [-Infinity, Infinity];
+      actuators.push({ id: i, name, range });
+    }
+    return actuators;
+  }, [status, mjModelRef]);
+}
+var _mat42 = new THREE.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());
+  useEffect(() => {
+    const model = mjModelRef.current;
+    if (!model || status !== "ready") {
+      siteIdRef.current = -1;
+      return;
+    }
+    siteIdRef.current = findSiteByName(model, siteName);
+  }, [siteName, status, mjModelRef]);
+  useFrame(() => {
+    const data = mjDataRef.current;
+    const sid = siteIdRef.current;
+    if (!data || sid < 0) return;
+    const i3 = sid * 3;
+    const i9 = sid * 9;
+    positionRef.current.set(
+      data.site_xpos[i3],
+      data.site_xpos[i3 + 1],
+      data.site_xpos[i3 + 2]
+    );
+    const m = data.site_xmat;
+    _mat42.set(
+      m[i9],
+      m[i9 + 1],
+      m[i9 + 2],
+      0,
+      m[i9 + 3],
+      m[i9 + 4],
+      m[i9 + 5],
+      0,
+      m[i9 + 6],
+      m[i9 + 7],
+      m[i9 + 8],
+      0,
+      0,
+      0,
+      0,
+      1
+    );
+    quaternionRef.current.setFromRotationMatrix(_mat42);
+  });
+  return { position: positionRef, quaternion: quaternionRef };
+}
+
+// src/hooks/useGravityCompensation.ts
+function useGravityCompensation(enabled = true) {
+  useBeforePhysicsStep((model, data) => {
+    if (!enabled) return;
+    for (let i = 0; i < model.nv; i++) {
+      data.qfrc_applied[i] += data.qfrc_bias[i];
+    }
+  });
+}
+function useSensor(name) {
+  const { mjModelRef, mjDataRef, status } = useMujocoSim();
+  const sensorIdRef = useRef(-1);
+  const sensorAdrRef = useRef(0);
+  const sensorDimRef = useRef(0);
+  const valueRef = useRef(new Float64Array(0));
+  useEffect(() => {
+    const model = mjModelRef.current;
+    if (!model || status !== "ready") return;
+    for (let i = 0; i < model.nsensor; i++) {
+      if (getName(model, model.name_sensoradr[i]) === name) {
+        sensorIdRef.current = i;
+        sensorAdrRef.current = model.sensor_adr[i];
+        sensorDimRef.current = model.sensor_dim[i];
+        valueRef.current = new Float64Array(model.sensor_dim[i]);
+        return;
+      }
+    }
+    sensorIdRef.current = -1;
+  }, [name, status, mjModelRef]);
+  useAfterPhysicsStep((_model, data) => {
+    if (sensorIdRef.current < 0) return;
+    const adr = sensorAdrRef.current;
+    const dim = sensorDimRef.current;
+    for (let i = 0; i < dim; i++) {
+      valueRef.current[i] = data.sensordata[adr + i];
+    }
+  });
+  return { value: valueRef, size: sensorDimRef.current };
+}
+function useSensors() {
+  const { mjModelRef, status } = useMujocoSim();
+  return useMemo(() => {
+    const model = mjModelRef.current;
+    if (!model || status !== "ready") return [];
+    const SENSOR_TYPE_NAMES2 = {
+      0: "touch",
+      1: "accelerometer",
+      2: "velocimeter",
+      3: "gyro",
+      4: "force",
+      5: "torque",
+      6: "magnetometer",
+      7: "rangefinder",
+      8: "jointpos",
+      9: "jointvel",
+      10: "tendonpos",
+      11: "tendonvel",
+      12: "actuatorpos",
+      13: "actuatorvel",
+      14: "actuatorfrc"
+    };
+    const result = [];
+    for (let i = 0; i < model.nsensor; i++) {
+      const type = model.sensor_type[i];
+      result.push({
+        id: i,
+        name: getName(model, model.name_sensoradr[i]),
+        type,
+        typeName: SENSOR_TYPE_NAMES2[type] ?? `unknown(${type})`,
+        dim: model.sensor_dim[i],
+        adr: model.sensor_adr[i]
+      });
+    }
+    return result;
+  }, [mjModelRef, status]);
+}
+function useJointState(name) {
+  const { mjModelRef, mjDataRef, status } = useMujocoSim();
+  const jointIdRef = useRef(-1);
+  const qposAdrRef = useRef(0);
+  const dofAdrRef = useRef(0);
+  const qposDimRef = useRef(1);
+  const dofDimRef = useRef(1);
+  const positionRef = useRef(0);
+  const velocityRef = useRef(0);
+  useEffect(() => {
+    const model = mjModelRef.current;
+    if (!model || status !== "ready") return;
+    for (let i = 0; i < model.njnt; i++) {
+      if (getName(model, model.name_jntadr[i]) === name) {
+        jointIdRef.current = i;
+        qposAdrRef.current = model.jnt_qposadr[i];
+        dofAdrRef.current = model.jnt_dofadr[i];
+        const type = model.jnt_type[i];
+        if (type === 0) {
+          qposDimRef.current = 7;
+          dofDimRef.current = 6;
+        } else if (type === 1) {
+          qposDimRef.current = 4;
+          dofDimRef.current = 3;
+        } else {
+          qposDimRef.current = 1;
+          dofDimRef.current = 1;
+        }
+        return;
+      }
+    }
+    jointIdRef.current = -1;
+  }, [name, status, mjModelRef]);
+  useAfterPhysicsStep((_model, data) => {
+    if (jointIdRef.current < 0) return;
+    const qa = qposAdrRef.current;
+    const da = dofAdrRef.current;
+    if (qposDimRef.current === 1) {
+      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));
+    }
+  });
+  return { position: positionRef, velocity: velocityRef };
+}
+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());
+  useEffect(() => {
+    const model = mjModelRef.current;
+    if (!model || status !== "ready") return;
+    bodyIdRef.current = findBodyByName(model, name);
+  }, [name, status, mjModelRef]);
+  useAfterPhysicsStep((_model, data) => {
+    const bid = bodyIdRef.current;
+    if (bid < 0) return;
+    const i3 = bid * 3;
+    position.current.set(data.xpos[i3], data.xpos[i3 + 1], data.xpos[i3 + 2]);
+    const i4 = bid * 4;
+    quaternion.current.set(
+      data.xquat[i4 + 1],
+      data.xquat[i4 + 2],
+      data.xquat[i4 + 3],
+      data.xquat[i4]
+    );
+    if (data.cvel) {
+      const i6 = bid * 6;
+      angularVelocity.current.set(data.cvel[i6], data.cvel[i6 + 1], data.cvel[i6 + 2]);
+      linearVelocity.current.set(data.cvel[i6 + 3], data.cvel[i6 + 4], data.cvel[i6 + 5]);
+    }
+  });
+  return { position, quaternion, linearVelocity, angularVelocity };
+}
+function useCtrl(name) {
+  const { mjModelRef, mjDataRef, status } = useMujocoSim();
+  const actuatorIdRef = useRef(-1);
+  const valueRef = useRef(0);
+  useEffect(() => {
+    const model = mjModelRef.current;
+    if (!model || status !== "ready") return;
+    actuatorIdRef.current = findActuatorByName(model, name);
+  }, [name, status, mjModelRef]);
+  const setValue = useCallback((value) => {
+    const data = mjDataRef.current;
+    if (!data || actuatorIdRef.current < 0) return;
+    data.ctrl[actuatorIdRef.current] = value;
+    valueRef.current = value;
+  }, [mjDataRef]);
+  return [valueRef, setValue];
+}
+function useKeyboardTeleop(config) {
+  const { mjModelRef, mjDataRef, status } = useMujocoSim();
+  const pressedRef = useRef(/* @__PURE__ */ new Set());
+  const toggleStateRef = useRef(/* @__PURE__ */ new Map());
+  const enabledRef = useRef(config.enabled ?? true);
+  enabledRef.current = config.enabled ?? true;
+  const bindingsRef = useRef(config.bindings);
+  bindingsRef.current = config.bindings;
+  const actuatorCacheRef = useRef(/* @__PURE__ */ new Map());
+  useEffect(() => {
+    const model = mjModelRef.current;
+    if (!model || status !== "ready") return;
+    const cache = /* @__PURE__ */ new Map();
+    for (const binding of Object.values(config.bindings)) {
+      if (!cache.has(binding.actuator)) {
+        cache.set(binding.actuator, findActuatorByName(model, binding.actuator));
+      }
+    }
+    actuatorCacheRef.current = cache;
+  }, [config.bindings, status, mjModelRef]);
+  useEffect(() => {
+    const onKeyDown = (e) => {
+      if (!enabledRef.current) return;
+      const key = e.key.toLowerCase();
+      if (bindingsRef.current[key]) {
+        pressedRef.current.add(key);
+        const binding = bindingsRef.current[key];
+        if (binding.toggle) {
+          const current = toggleStateRef.current.get(key) ?? false;
+          toggleStateRef.current.set(key, !current);
+        }
+      }
+    };
+    const onKeyUp = (e) => {
+      pressedRef.current.delete(e.key.toLowerCase());
+    };
+    window.addEventListener("keydown", onKeyDown);
+    window.addEventListener("keyup", onKeyUp);
+    return () => {
+      window.removeEventListener("keydown", onKeyDown);
+      window.removeEventListener("keyup", onKeyUp);
+    };
+  }, []);
+  useBeforePhysicsStep((_model, data) => {
+    if (!enabledRef.current) return;
+    const bindings = bindingsRef.current;
+    const cache = actuatorCacheRef.current;
+    for (const [key, binding] of Object.entries(bindings)) {
+      const actId = cache.get(binding.actuator);
+      if (actId === void 0 || actId < 0) continue;
+      if (binding.toggle) {
+        const state = toggleStateRef.current.get(key) ?? false;
+        data.ctrl[actId] = state ? binding.toggle[1] : binding.toggle[0];
+      } else if (pressedRef.current.has(key)) {
+        if (binding.delta !== void 0) {
+          data.ctrl[actId] += binding.delta;
+        } else if (binding.set !== void 0) {
+          data.ctrl[actId] = binding.set;
+        }
+      }
+    }
+  });
+}
+function usePolicy(config) {
+  const { mjModelRef } = useMujocoSim();
+  const lastActionTimeRef = useRef(0);
+  const lastActionRef = useRef(null);
+  const isRunningRef = useRef(true);
+  const configRef = useRef(config);
+  configRef.current = config;
+  useBeforePhysicsStep((model, data) => {
+    if (!isRunningRef.current) return;
+    const cfg = configRef.current;
+    model.opt?.timestep ?? 2e-3;
+    const interval = 1 / cfg.frequency;
+    if (data.time - lastActionTimeRef.current >= interval) {
+      const obs = cfg.onObservation(model, data);
+      cfg.onAction(obs, model, data);
+      lastActionTimeRef.current = data.time;
+      lastActionRef.current = obs;
+    }
+  });
+  return {
+    get isRunning() {
+      return isRunningRef.current;
+    },
+    start: () => {
+      isRunningRef.current = true;
+    },
+    stop: () => {
+      isRunningRef.current = false;
+    },
+    get lastObservation() {
+      return lastActionRef.current;
+    }
+  };
+}
+function useTrajectoryRecorder(options = {}) {
+  const { mjModelRef } = useMujocoSim();
+  const recordingRef = useRef(false);
+  const framesRef = useRef([]);
+  const fields = options.fields ?? ["qpos"];
+  useAfterPhysicsStep((_model, data) => {
+    if (!recordingRef.current) return;
+    const frame = {
+      time: data.time,
+      qpos: new Float64Array(data.qpos)
+    };
+    if (fields.includes("qvel")) frame.qvel = new Float64Array(data.qvel);
+    if (fields.includes("ctrl")) frame.ctrl = new Float64Array(data.ctrl);
+    if (fields.includes("sensordata") && data.sensordata) {
+      frame.sensordata = new Float64Array(data.sensordata);
+    }
+    framesRef.current.push(frame);
+  });
+  const start = useCallback(() => {
+    framesRef.current = [];
+    recordingRef.current = true;
+  }, []);
+  const stop = useCallback(() => {
+    recordingRef.current = false;
+    return framesRef.current;
+  }, []);
+  const downloadJSON = useCallback(() => {
+    const frames = framesRef.current;
+    const data = frames.map((f) => ({
+      time: f.time,
+      qpos: Array.from(f.qpos),
+      ...f.qvel ? { qvel: Array.from(f.qvel) } : {},
+      ...f.ctrl ? { ctrl: Array.from(f.ctrl) } : {},
+      ...f.sensordata ? { sensordata: Array.from(f.sensordata) } : {}
+    }));
+    const blob = new Blob([JSON.stringify(data, null, 2)], { type: "application/json" });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement("a");
+    a.href = url;
+    a.download = "trajectory.json";
+    a.click();
+    URL.revokeObjectURL(url);
+  }, []);
+  const downloadCSV = useCallback(() => {
+    const frames = framesRef.current;
+    if (frames.length === 0) return;
+    const nq = frames[0].qpos.length;
+    const headers = ["time", ...Array.from({ length: nq }, (_, i) => `qpos_${i}`)];
+    const rows = frames.map(
+      (f) => [f.time, ...Array.from(f.qpos)].join(",")
+    );
+    const csv = [headers.join(","), ...rows].join("\n");
+    const blob = new Blob([csv], { type: "text/csv" });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement("a");
+    a.href = url;
+    a.download = "trajectory.csv";
+    a.click();
+    URL.revokeObjectURL(url);
+  }, []);
+  return {
+    start,
+    stop,
+    downloadJSON,
+    downloadCSV,
+    get recording() {
+      return recordingRef.current;
+    },
+    get frameCount() {
+      return framesRef.current.length;
+    },
+    get frames() {
+      return framesRef.current;
+    }
+  };
+}
+function useGamepad(config) {
+  const { mjModelRef, status } = useMujocoSim();
+  const configRef = useRef(config);
+  configRef.current = config;
+  const axisCacheRef = useRef(/* @__PURE__ */ new Map());
+  const buttonCacheRef = useRef(/* @__PURE__ */ new Map());
+  useEffect(() => {
+    const model = mjModelRef.current;
+    if (!model || status !== "ready") return;
+    axisCacheRef.current.clear();
+    buttonCacheRef.current.clear();
+    for (const [idx, name] of Object.entries(config.axes ?? {})) {
+      axisCacheRef.current.set(Number(idx), findActuatorByName(model, name));
+    }
+    for (const [idx, name] of Object.entries(config.buttons ?? {})) {
+      buttonCacheRef.current.set(Number(idx), findActuatorByName(model, name));
+    }
+  }, [config.axes, config.buttons, status, mjModelRef]);
+  useBeforePhysicsStep((_model, data) => {
+    const cfg = configRef.current;
+    if (cfg.enabled === false) return;
+    const gamepads = navigator.getGamepads?.();
+    if (!gamepads) return;
+    const gp = gamepads[cfg.gamepadIndex ?? 0];
+    if (!gp) return;
+    const deadzone = cfg.deadzone ?? 0.1;
+    const scale = cfg.scale ?? 1;
+    for (const [axisIdx, actId] of axisCacheRef.current) {
+      if (actId < 0 || axisIdx >= gp.axes.length) continue;
+      let val = gp.axes[axisIdx];
+      if (Math.abs(val) < deadzone) val = 0;
+      data.ctrl[actId] = val * scale;
+    }
+    for (const [btnIdx, actId] of buttonCacheRef.current) {
+      if (actId < 0 || btnIdx >= gp.buttons.length) continue;
+      data.ctrl[actId] = gp.buttons[btnIdx].value;
+    }
+  });
+}
+function useVideoRecorder(options = {}) {
+  const { gl } = useThree();
+  const recorderRef = useRef(null);
+  const chunksRef = useRef([]);
+  const recordingRef = useRef(false);
+  const start = useCallback(() => {
+    const canvas = gl.domElement;
+    const fps = options.fps ?? 30;
+    const mimeType = options.mimeType ?? "video/webm";
+    const stream = canvas.captureStream(fps);
+    const recorder = new MediaRecorder(stream, {
+      mimeType: MediaRecorder.isTypeSupported(mimeType) ? mimeType : "video/webm"
+    });
+    chunksRef.current = [];
+    recorder.ondataavailable = (e) => {
+      if (e.data.size > 0) chunksRef.current.push(e.data);
+    };
+    recorder.start();
+    recorderRef.current = recorder;
+    recordingRef.current = true;
+  }, [gl, options.fps, options.mimeType]);
+  const stop = useCallback(() => {
+    return new Promise((resolve) => {
+      const recorder = recorderRef.current;
+      if (!recorder || recorder.state === "inactive") {
+        resolve(new Blob([]));
+        return;
+      }
+      recorder.onstop = () => {
+        const blob = new Blob(chunksRef.current, { type: recorder.mimeType });
+        chunksRef.current = [];
+        recordingRef.current = false;
+        recorderRef.current = null;
+        resolve(blob);
+      };
+      recorder.stop();
+    });
+  }, []);
+  const download = useCallback(async (filename = "recording.webm") => {
+    const blob = await stop();
+    if (blob.size === 0) return;
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement("a");
+    a.href = url;
+    a.download = filename;
+    a.click();
+    URL.revokeObjectURL(url);
+  }, [stop]);
+  return {
+    start,
+    stop,
+    download,
+    get recording() {
+      return recordingRef.current;
+    }
+  };
+}
+function useCtrlNoise(config = {}) {
+  const { mjModelRef } = useMujocoSim();
+  const configRef = useRef(config);
+  configRef.current = config;
+  const noiseRef = useRef(null);
+  useBeforePhysicsStep((_model, data) => {
+    const cfg = configRef.current;
+    if (cfg.enabled === false) return;
+    const rate = cfg.rate ?? 0.01;
+    const std = cfg.std ?? 0.05;
+    const nu = mjModelRef.current?.nu ?? 0;
+    if (nu === 0) return;
+    if (!noiseRef.current || noiseRef.current.length !== nu) {
+      noiseRef.current = new Float64Array(nu);
+    }
+    const noise = noiseRef.current;
+    for (let i = 0; i < nu; i++) {
+      const u1 = Math.random();
+      const u2 = Math.random();
+      const gaussian = Math.sqrt(-2 * Math.log(u1)) * Math.cos(2 * Math.PI * u2);
+      noise[i] = (1 - rate) * noise[i] + rate * gaussian * std;
+      data.ctrl[i] += noise[i];
+    }
+  });
+}
+/**
+ * @license
+ * SPDX-License-Identifier: Apache-2.0
+ */
+/**
+ * @license
+ * SPDX-License-Identifier: Apache-2.0
+*/
+/**
+ * @license
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * ContactMarkers — instanced sphere visualization of MuJoCo contacts (spec 6.2)
+ *
+ * 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
+ *
+ * SceneLights — auto-create Three.js lights from MJCF <light> elements (spec 6.3)
+ *
+ * WASM fields used: model.nlight, light_pos, light_dir, light_diffuse,
+ * light_specular, light_active, light_type, light_castshadow,
+ * light_attenuation, light_cutoff, light_exponent, light_intensity
+ *
+ * light_type: 0 = directional, 1 = spot (maps to mjLIGHT_DIRECTIONAL/mjLIGHT_SPOT)
+ * Note: light_directional does NOT exist in WASM — use light_type instead.
+ */
+/**
+ * @license
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * Debug — visualization overlay for MuJoCo scene elements (spec 6.1)
+ */
+/**
+ * @license
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * TendonRenderer — render tendons as tube geometries (spec 6.4)
+ *
+ * WASM fields used: model.ntendon, model.ten_wrapadr, model.ten_wrapnum
+ * data.wrap_xpos, data.ten_wrapadr (runtime)
+ *
+ * Note: ten_rgba and ten_width are NOT available in mujoco-js 0.0.7.
+ * Tendons use a default color and width.
+ */
+/**
+ * @license
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * FlexRenderer — render deformable flex bodies (spec 6.4)
+ */
+/**
+ * @license
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * useContacts — structured contact query hook (spec 2.4)
+ * useContactEvents — contact enter/exit events (spec 2.5)
+ */
+/**
+ * @license
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * ContactListener — component form of contact events (spec 2.5)
+ */
+/**
+ * @license
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * useTrajectoryPlayer — trajectory playback/scrubbing (spec 13.2)
+ */
+/**
+ * @license
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * TrajectoryPlayer — component form of trajectory playback (spec 13.2)
+ */
+/**
+ * @license
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * SelectionHighlight — highlight a selected body with emissive color (spec 6.5)
+ */
+/**
+ * @license
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * useSensor / useSensors — MuJoCo sensor access hooks (spec 2.1)
+ */
+/**
+ * @license
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * useJointState — per-joint position/velocity access (spec 2.3)
+ */
+/**
+ * @license
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * useBodyState — per-body position/velocity tracking (spec 2.2)
+ */
+/**
+ * @license
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * useCtrl — clean read/write access to a named actuator's ctrl value (spec 3.1)
+ */
+/**
+ * @license
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * useKeyboardTeleop — keyboard teleoperation hook (spec 12.1)
+ */
+/**
+ * @license
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * usePolicy — policy decimation loop hook (spec 10.1)
+ */
+/**
+ * @license
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * useTrajectoryRecorder — trajectory recording hook (spec 13.1)
+ */
+/**
+ * @license
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * useGamepad — gamepad teleoperation hook (spec 12.2)
+ */
+/**
+ * @license
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * useVideoRecorder — canvas video recording hook (spec 13.3)
+ */
+/**
+ * @license
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * useCtrlNoise — control noise / perturbation hook (spec 3.2)
+ */
+
+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 };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map