sa2kit 1.0.9 → 1.2.0

package/dist/mmd/index.mjs

@@ -1,76 +1,44 @@
 import '../chunk-BJTO5JO5.mjs';
-import React2, { useRef, useState, useEffect, useMemo } from 'react';
-import * as THREE2 from 'three';
-import { OrbitControls, OutlineEffect, MMDAnimationHelper, MMDLoader } from 'three-stdlib';
+import React6, { forwardRef, useRef, useImperativeHandle, useEffect, useState, useCallback } from 'react';
+import * as THREE from 'three';
+import { OrbitControls, MMDLoader, MMDAnimationHelper } from 'three-stdlib';
+import { SkipBack, Pause, Play, SkipForward, Repeat, Repeat1, Grid3x3, Settings, Minimize, Maximize, X, Video, Check, User, Image, Music } from 'lucide-react';
 
 // src/mmd/utils/ammo-loader.ts
 var ammoPromise = null;
-var loadAmmo = (config) => {
-  const configKey = `${config.scriptPath}|${config.wasmBasePath}`;
-  const currentConfigKey = window.__AMMO_CONFIG_KEY__;
-  if (ammoPromise && currentConfigKey === configKey) {
+var loadAmmo = (path = "/libs/ammo.wasm.js") => {
+  if (ammoPromise) {
     return ammoPromise;
   }
-  if (currentConfigKey && currentConfigKey !== configKey) {
-    ammoPromise = null;
-    window.Ammo = void 0;
-  }
   ammoPromise = new Promise((resolve, reject) => {
-    if (typeof window === "undefined") {
-      resolve();
+    if (typeof window.Ammo === "function") {
+      window.Ammo().then((lib) => {
+        resolve(lib);
+      });
       return;
     }
-    if (window.Ammo && currentConfigKey === configKey) {
-      console.log("\u2705 [Ammo] \u5DF2\u52A0\u8F7D\uFF0C\u76F4\u63A5\u4F7F\u7528");
-      resolve();
+    if (typeof window.Ammo === "object") {
+      resolve(window.Ammo);
       return;
     }
-    console.log("\u{1F4E6} [Ammo] \u5F00\u59CB\u52A0\u8F7D Ammo.js...");
-    console.log("\u{1F4C2} [Ammo] \u811A\u672C\u8DEF\u5F84:", config.scriptPath);
-    console.log("\u{1F4C2} [Ammo] WASM \u57FA\u7840\u8DEF\u5F84:", config.wasmBasePath);
-    window.__AMMO_CONFIG_KEY__ = configKey;
-    window.AMMO_PATH = config.wasmBasePath;
     const script = document.createElement("script");
-    script.src = config.scriptPath;
+    script.src = path;
     script.async = true;
     script.onload = () => {
-      console.log("\u2705 [Ammo] \u811A\u672C\u52A0\u8F7D\u5B8C\u6210\uFF0C\u7B49\u5F85\u521D\u59CB\u5316...");
-      const checkAmmo = () => {
-        if (typeof window.Ammo === "function") {
-          console.log("\u{1F504} [Ammo] \u5F00\u59CB\u521D\u59CB\u5316 WASM...");
-          window.Ammo({
-            locateFile: (path) => {
-              console.log("\u{1F4CD} [Ammo] \u5B9A\u4F4D\u6587\u4EF6:", path);
-              if (path.endsWith(".wasm")) {
-                return config.wasmBasePath + path;
-              }
-              return path;
-            }
-          }).then((AmmoLib) => {
-            console.log("\u2705 [Ammo] \u521D\u59CB\u5316\u5B8C\u6210\uFF01");
-            window.Ammo = AmmoLib;
-            resolve();
-          }).catch((err) => {
-            console.error("\u274C [Ammo] \u521D\u59CB\u5316\u5931\u8D25:", err);
-            reject(err);
-          });
-        } else {
-          if (window.Ammo) {
-            console.log("\u2705 [Ammo] \u5DF2\u521D\u59CB\u5316");
-            resolve();
-          } else {
-            console.log("\u23F3 [Ammo] \u7B49\u5F85\u521D\u59CB\u5316...");
-            setTimeout(checkAmmo, 100);
-          }
-        }
-      };
-      checkAmmo();
+      if (typeof window.Ammo === "function") {
+        window.Ammo().then((lib) => {
+          resolve(lib || window.Ammo);
+        }).catch((err) => {
+          console.error("Ammo initialization failed:", err);
+          reject(err);
+        });
+      } else {
+        reject(new Error("Ammo.js loaded but window.Ammo is not a function"));
+      }
     };
-    script.onerror = (e) => {
-      console.error("\u274C [Ammo] \u52A0\u8F7D\u5931\u8D25:", e);
-      reject(new Error(`Failed to load Ammo.js from ${config.scriptPath}. Please ensure the file exists.`));
-      ammoPromise = null;
-      window.__AMMO_CONFIG_KEY__ = void 0;
+    script.onerror = (err) => {
+      console.error("Failed to load Ammo.js script:", err);
+      reject(new Error(`Failed to load Ammo.js from ${path}`));
     };
     document.body.appendChild(script);
   });
@@ -78,1728 +46,1549 @@ var loadAmmo = (config) => {
 };
 
 // src/mmd/components/MMDPlayerBase.tsx
-var MMDPlayerBase = ({
-  modelUrl,
-  vmdUrl,
-  cameraUrl,
-  audioUrl,
-  physics = true,
-  width = "100%",
-  height = "100%",
-  onLoad,
-  onProgress,
-  onError
-}) => {
+var MMDPlayerBase = forwardRef((props, ref) => {
+  const {
+    resources,
+    stage = {},
+    mobileOptimization = { enabled: true },
+    autoPlay = false,
+    loop = true,
+    volume = 1,
+    muted = false,
+    showAxes = false,
+    onLoad,
+    onLoadProgress,
+    onError,
+    onPlay,
+    onPause,
+    onEnded,
+    onTimeUpdate,
+    className,
+    style
+  } = props;
   const containerRef = useRef(null);
-  const [loading, setLoading] = useState(true);
-  const [error, setError] = useState(null);
+  const sceneRef = useRef(null);
+  const cameraRef = useRef(null);
+  const rendererRef = useRef(null);
+  const controlsRef = useRef(null);
+  const helperRef = useRef(null);
+  const axesHelperRef = useRef(null);
+  const clockRef = useRef(new THREE.Clock());
+  const animationIdRef = useRef(null);
+  const resizeObserverRef = useRef(null);
+  const isReadyRef = useRef(false);
+  const isPlayingRef = useRef(false);
+  const initIdRef = useRef(0);
+  const durationRef = useRef(0);
+  const animationClipRef = useRef(null);
+  const loopRef = useRef(loop);
+  const audioRef = useRef(null);
+  const physicsComponentsRef = useRef({
+    configs: [],
+    dispatchers: [],
+    caches: [],
+    solvers: [],
+    worlds: []
+  });
+  const startTimeRef = useRef(Date.now());
+  const modelSwitchCountRef = useRef(0);
+  useImperativeHandle(ref, () => ({
+    play: () => {
+      if (!isReadyRef.current) return;
+      isPlayingRef.current = true;
+      if (!clockRef.current.running) clockRef.current.start();
+      onPlay?.();
+    },
+    pause: () => {
+      if (!isPlayingRef.current) return;
+      isPlayingRef.current = false;
+      clockRef.current.stop();
+      onPause?.();
+    },
+    stop: () => {
+      isPlayingRef.current = false;
+      clockRef.current.stop();
+      onPause?.();
+    },
+    seek: (time) => {
+      console.warn("Seek not fully implemented in MMDPlayerBase yet");
+    },
+    getCurrentTime: () => {
+      const elapsed = clockRef.current.elapsedTime;
+      const duration = durationRef.current;
+      if (duration > 0 && loopRef.current) {
+        return elapsed % duration;
+      }
+      return elapsed;
+    },
+    getDuration: () => durationRef.current,
+    isPlaying: () => isPlayingRef.current,
+    snapshot: () => {
+      if (!rendererRef.current) return "";
+      if (sceneRef.current && cameraRef.current) {
+        rendererRef.current.render(sceneRef.current, cameraRef.current);
+      }
+      return rendererRef.current.domElement.toDataURL("image/png");
+    }
+  }));
   useEffect(() => {
     if (!containerRef.current) return;
-    let scene;
-    let camera;
-    let renderer;
-    let effect;
-    let helper;
-    let clock;
-    let animationId;
     const init = async () => {
+      const myId = ++initIdRef.current;
+      const checkCancelled = () => {
+        return myId !== initIdRef.current || !containerRef.current;
+      };
+      if (containerRef.current) {
+        containerRef.current.innerHTML = "";
+      }
+      physicsComponentsRef.current = {
+        configs: [],
+        dispatchers: [],
+        caches: [],
+        solvers: [],
+        worlds: []
+      };
+      if (modelSwitchCountRef.current === 0) {
+        startTimeRef.current = Date.now();
+        modelSwitchCountRef.current = 1;
+        console.log("[MMDPlayerBase] \u{1F550} \u7CFB\u7EDF\u542F\u52A8\u65F6\u95F4:", new Date(startTimeRef.current).toLocaleString());
+      } else {
+        modelSwitchCountRef.current++;
+        const runningTime = Date.now() - startTimeRef.current;
+        const minutes = Math.floor(runningTime / 6e4);
+        const seconds = Math.floor(runningTime % 6e4 / 1e3);
+        console.log(`[MMDPlayerBase] \u{1F504} \u6A21\u578B\u5207\u6362 #${modelSwitchCountRef.current} (\u8FD0\u884C\u65F6\u95F4: ${minutes}\u5206${seconds}\u79D2)`);
+      }
       try {
-        setLoading(true);
-        setError(null);
-        if (physics) {
-          await loadAmmo({
-            scriptPath: "/mikutalking/libs/ammo.wasm.js",
-            wasmBasePath: "/mikutalking/libs/"
-          });
+        if (stage.enablePhysics !== false && !mobileOptimization.disablePhysics) {
+          console.log("[MMDPlayerBase] Loading Ammo.js physics engine...");
+          await loadAmmo(stage.physicsPath);
+          if (checkCancelled()) return;
+          console.log("[MMDPlayerBase] Ammo.js loaded successfully");
+          const Ammo = window.Ammo;
+          if (Ammo) {
+            console.log("[MMDPlayerBase] Setting up physics component tracking...");
+            const originalBtDefaultCollisionConfiguration = Ammo.btDefaultCollisionConfiguration;
+            const originalBtCollisionDispatcher = Ammo.btCollisionDispatcher;
+            const originalBtDbvtBroadphase = Ammo.btDbvtBroadphase;
+            const originalBtSequentialImpulseConstraintSolver = Ammo.btSequentialImpulseConstraintSolver;
+            const originalBtDiscreteDynamicsWorld = Ammo.btDiscreteDynamicsWorld;
+            const componentsRef = physicsComponentsRef.current;
+            Ammo.btDefaultCollisionConfiguration = function(...args) {
+              const obj = new originalBtDefaultCollisionConfiguration(...args);
+              componentsRef.configs.push(obj);
+              console.log(`[MMDPlayerBase] \u{1F50D} Captured btDefaultCollisionConfiguration #${componentsRef.configs.length}`);
+              return obj;
+            };
+            Ammo.btCollisionDispatcher = function(...args) {
+              const obj = new originalBtCollisionDispatcher(...args);
+              componentsRef.dispatchers.push(obj);
+              console.log(`[MMDPlayerBase] \u{1F50D} Captured btCollisionDispatcher #${componentsRef.dispatchers.length}`);
+              return obj;
+            };
+            Ammo.btDbvtBroadphase = function(...args) {
+              const obj = new originalBtDbvtBroadphase(...args);
+              componentsRef.caches.push(obj);
+              console.log(`[MMDPlayerBase] \u{1F50D} Captured btDbvtBroadphase #${componentsRef.caches.length}`);
+              return obj;
+            };
+            Ammo.btSequentialImpulseConstraintSolver = function(...args) {
+              const obj = new originalBtSequentialImpulseConstraintSolver(...args);
+              componentsRef.solvers.push(obj);
+              console.log(`[MMDPlayerBase] \u{1F50D} Captured btSequentialImpulseConstraintSolver #${componentsRef.solvers.length}`);
+              return obj;
+            };
+            Ammo.btDiscreteDynamicsWorld = function(...args) {
+              const obj = new originalBtDiscreteDynamicsWorld(...args);
+              componentsRef.worlds.push(obj);
+              console.log(`[MMDPlayerBase] \u{1F50D} Captured btDiscreteDynamicsWorld #${componentsRef.worlds.length}`);
+              return obj;
+            };
+            console.log("[MMDPlayerBase] \u2705 Physics component tracking setup complete");
+          }
+        } else {
+          console.log("[MMDPlayerBase] Physics disabled");
         }
         const container = containerRef.current;
-        const w = container.clientWidth;
-        const h = container.clientHeight;
-        scene = new THREE2.Scene();
-        scene.background = new THREE2.Color(16777215);
-        camera = new THREE2.PerspectiveCamera(45, w / h, 1, 2e3);
-        camera.position.z = 30;
-        const ambient = new THREE2.AmbientLight(6710886);
-        scene.add(ambient);
-        const directionalLight = new THREE2.DirectionalLight(8943462);
-        directionalLight.position.set(-1, 1, 1).normalize();
-        scene.add(directionalLight);
-        renderer = new THREE2.WebGLRenderer({ antialias: true });
-        renderer.setPixelRatio(window.devicePixelRatio);
-        renderer.setSize(w, h);
+        const width = container.clientWidth || 300;
+        const height = container.clientHeight || 150;
+        const scene = new THREE.Scene();
+        if (stage.backgroundColor) {
+          scene.background = new THREE.Color(stage.backgroundColor);
+        }
+        sceneRef.current = scene;
+        const camera = new THREE.PerspectiveCamera(45, width / height, 0.1, 2e3);
+        if (stage.cameraPosition) {
+          const pos = stage.cameraPosition;
+          camera.position.set(pos.x, pos.y, pos.z);
+        } else {
+          camera.position.set(0, 20, 30);
+        }
+        cameraRef.current = camera;
+        const renderer = new THREE.WebGLRenderer({
+          antialias: !mobileOptimization.enabled,
+          alpha: true,
+          preserveDrawingBuffer: true
+        });
+        renderer.setSize(width, height);
+        renderer.setPixelRatio(mobileOptimization.enabled ? mobileOptimization.pixelRatio || 1 : window.devicePixelRatio);
+        if (checkCancelled()) {
+          renderer.dispose();
+          return;
+        }
+        container.innerHTML = "";
+        renderer.domElement.style.display = "block";
+        renderer.domElement.style.width = "100%";
+        renderer.domElement.style.height = "100%";
+        renderer.domElement.style.outline = "none";
+        if (stage.enableShadow !== false && !mobileOptimization.reduceShadowQuality) {
+          renderer.shadowMap.enabled = true;
+          renderer.shadowMap.type = THREE.PCFSoftShadowMap;
+        }
         container.appendChild(renderer.domElement);
-        effect = new OutlineEffect(renderer);
-        helper = new MMDAnimationHelper({
+        rendererRef.current = renderer;
+        const ambientLight = new THREE.AmbientLight(16777215, stage.ambientLightIntensity ?? 0.5);
+        scene.add(ambientLight);
+        const dirLight = new THREE.DirectionalLight(16777215, stage.directionalLightIntensity ?? 0.8);
+        dirLight.position.set(10, 20, 10);
+        if (stage.enableShadow !== false) {
+          dirLight.castShadow = true;
+          dirLight.shadow.mapSize.width = mobileOptimization.enabled ? 1024 : 2048;
+          dirLight.shadow.mapSize.height = mobileOptimization.enabled ? 1024 : 2048;
+          dirLight.shadow.bias = -1e-4;
+        }
+        scene.add(dirLight);
+        const controls = new OrbitControls(camera, renderer.domElement);
+        controls.minDistance = 10;
+        controls.maxDistance = 100;
+        if (stage.cameraTarget) {
+          const target = stage.cameraTarget;
+          controls.target.set(target.x, target.y, target.z);
+        } else {
+          controls.target.set(0, 10, 0);
+        }
+        controls.update();
+        controlsRef.current = controls;
+        if (showAxes) {
+          const axesHelper = new THREE.AxesHelper(20);
+          scene.add(axesHelper);
+          axesHelperRef.current = axesHelper;
+        }
+        const onResize = () => {
+          if (!containerRef.current || !cameraRef.current || !rendererRef.current) return;
+          const w = containerRef.current.clientWidth;
+          const h = containerRef.current.clientHeight;
+          if (w === 0 || h === 0) return;
+          cameraRef.current.aspect = w / h;
+          cameraRef.current.updateProjectionMatrix();
+          rendererRef.current.setSize(w, h);
+        };
+        const resizeObserver = new ResizeObserver(onResize);
+        resizeObserver.observe(container);
+        resizeObserverRef.current = resizeObserver;
+        onResize();
+        console.log("[MMDPlayerBase] Start loading resources...", resources);
+        const loader = new MMDLoader();
+        const helper = new MMDAnimationHelper({
           afterglow: 2
         });
-        const loader = new MMDLoader();
-        loader.load(
-          modelUrl,
-          (mesh) => {
-            scene.add(mesh);
-            if (vmdUrl) {
-              loader.loadAnimation(
-                vmdUrl,
-                mesh,
-                (vmdObject) => {
-                  helper.add(mesh, {
-                    animation: vmdObject,
-                    physics
-                  });
-                },
-                (xhr) => {
-                  if (onProgress) onProgress(xhr);
-                },
-                (err) => {
-                  console.error("Error loading animation", err);
-                  if (onError) onError(err);
-                }
-              );
-            } else {
-              helper.add(mesh, { physics });
-            }
-            if (cameraUrl) {
-              loader.loadAnimation(
-                cameraUrl,
-                camera,
-                (cameraVmdObject) => {
-                  helper.add(camera, {
-                    animation: cameraVmdObject
-                  });
-                },
-                void 0,
-                (err) => {
-                  console.error("Error loading camera motion", err);
+        helperRef.current = helper;
+        const loadModelPromise = new Promise((resolve, reject) => {
+          if (resources.motionPath) {
+            console.log("[MMDPlayerBase] Loading model with motion:", resources.motionPath);
+            loader.loadWithAnimation(
+              resources.modelPath,
+              resources.motionPath,
+              (mmd) => {
+                resolve({ mesh: mmd.mesh, animation: mmd.animation });
+              },
+              (xhr) => {
+                if (xhr.lengthComputable) {
+                  const percent = xhr.loaded / xhr.total * 100;
+                  onLoadProgress?.(percent, "model+motion");
                 }
-              );
-            }
-            if (audioUrl) {
-              new THREE2.AudioLoader().load(
-                audioUrl,
-                (buffer) => {
-                  const listener = new THREE2.AudioListener();
-                  camera.add(listener);
-                  const audio = new THREE2.Audio(listener);
-                  audio.setBuffer(buffer);
-                  helper.add(audio);
-                },
-                void 0,
-                (err) => {
-                  console.error("Error loading audio", err);
+              },
+              (err) => reject(err)
+            );
+          } else {
+            console.log("[MMDPlayerBase] Loading model only");
+            loader.load(
+              resources.modelPath,
+              (mesh2) => {
+                resolve({ mesh: mesh2 });
+              },
+              (xhr) => {
+                if (xhr.lengthComputable) {
+                  const percent = xhr.loaded / xhr.total * 100;
+                  onLoadProgress?.(percent, "model");
                 }
+              },
+              (err) => reject(err)
+            );
+          }
+        });
+        const { mesh, animation } = await loadModelPromise;
+        if (checkCancelled()) return;
+        console.log("[MMDPlayerBase] Model loaded:", mesh);
+        if (animation) {
+          animationClipRef.current = animation;
+          durationRef.current = animation.duration;
+          console.log("[MMDPlayerBase] Animation duration:", animation.duration);
+        }
+        const box = new THREE.Box3().setFromObject(mesh);
+        if (!box.isEmpty()) {
+          const center = box.getCenter(new THREE.Vector3());
+          const size = box.getSize(new THREE.Vector3());
+          console.log("[MMDPlayerBase] Model bounds:", { center, size });
+          if (!stage.cameraTarget) {
+            controls.target.set(center.x, center.y + size.y * 0.35, center.z);
+            if (!stage.cameraPosition) {
+              const maxDim = Math.max(size.x, size.y, size.z);
+              const dist = maxDim * 2;
+              camera.position.set(
+                center.x,
+                // X: 水平对齐
+                center.y + size.y * 0.6,
+                // Y: 稍高于模型中心（眼睛平视或略俯视）
+                center.z + dist
+                // Z: 在模型正前方（+Z 方向）
               );
+              console.log("[MMDPlayerBase] Auto camera position:", camera.position);
             }
-            if (onLoad) onLoad();
-            setLoading(false);
-          },
-          (xhr) => {
-            if (onProgress) onProgress(xhr);
-          },
-          (err) => {
-            setError("Failed to load model");
-            if (onError) onError(err);
-            setLoading(false);
+            controls.update();
           }
-        );
-        clock = new THREE2.Clock();
-        const animate = () => {
-          animationId = requestAnimationFrame(animate);
-          helper.update(clock.getDelta());
-          effect.render(scene, camera);
-        };
+        }
+        mesh.castShadow = true;
+        mesh.receiveShadow = true;
+        const enablePhysics = stage.enablePhysics !== false && !mobileOptimization.disablePhysics;
+        helper.add(mesh, {
+          animation,
+          physics: enablePhysics
+        });
+        scene.add(mesh);
+        if (resources.cameraPath) {
+          loader.loadAnimation(
+            resources.cameraPath,
+            camera,
+            (cameraAnimation) => {
+              if (checkCancelled()) return;
+              helper.add(camera, {
+                animation: cameraAnimation
+              });
+            },
+            void 0,
+            (err) => console.error("Failed to load camera motion:", err)
+          );
+        }
+        if (resources.audioPath) {
+          const listener = new THREE.AudioListener();
+          camera.add(listener);
+          const sound = new THREE.Audio(listener);
+          const audioLoader = new THREE.AudioLoader();
+          audioLoader.load(
+            resources.audioPath,
+            (buffer) => {
+              if (checkCancelled()) return;
+              sound.setBuffer(buffer);
+              sound.setLoop(loopRef.current);
+              sound.setVolume(volume);
+              audioRef.current = sound;
+              helper.add(sound, {
+                delay: 0,
+                duration: buffer.duration
+              });
+            },
+            void 0,
+            (err) => console.error("Failed to load audio:", err)
+          );
+        }
+        if (resources.stageModelPath) {
+          loader.load(
+            resources.stageModelPath,
+            (stageMesh) => {
+              if (checkCancelled()) return;
+              stageMesh.castShadow = true;
+              stageMesh.receiveShadow = true;
+              scene.add(stageMesh);
+            },
+            void 0,
+            (err) => console.error("Failed to load stage:", err)
+          );
+        }
+        if (checkCancelled()) return;
+        isReadyRef.current = true;
+        onLoad?.();
+        if (autoPlay) {
+          setTimeout(() => {
+            if (checkCancelled()) return;
+            isPlayingRef.current = true;
+            if (!clockRef.current.running) clockRef.current.start();
+            onPlay?.();
+          }, 100);
+        }
         animate();
-        const handleResize = () => {
-          if (!container) return;
-          const width2 = container.clientWidth;
-          const height2 = container.clientHeight;
-          camera.aspect = width2 / height2;
-          camera.updateProjectionMatrix();
-          effect.setSize(width2, height2);
-        };
-        window.addEventListener("resize", handleResize);
-        return () => {
-          window.removeEventListener("resize", handleResize);
-        };
-      } catch (e) {
-        console.error(e);
-        setError("Initialization error");
-        setLoading(false);
-      }
-      return void 0;
-    };
-    init();
-    return () => {
-      if (animationId) cancelAnimationFrame(animationId);
-      if (renderer) {
-        renderer.dispose();
-        const domElement = renderer.domElement;
-        if (domElement && domElement.parentNode) {
-          domElement.parentNode.removeChild(domElement);
+      } catch (error) {
+        if (checkCancelled()) return;
+        console.error("MMDPlayerBase initialization failed:", error);
+        const errorMessage = error instanceof Error ? error.message : String(error);
+        if (errorMessage.includes("OOM") || errorMessage.includes("out of memory")) {
+          const runningTime = Date.now() - startTimeRef.current;
+          const hours = Math.floor(runningTime / 36e5);
+          const minutes = Math.floor(runningTime % 36e5 / 6e4);
+          const seconds = Math.floor(runningTime % 6e4 / 1e3);
+          const timeString = hours > 0 ? `${hours}\u5C0F\u65F6${minutes}\u5206${seconds}\u79D2` : minutes > 0 ? `${minutes}\u5206${seconds}\u79D2` : `${seconds}\u79D2`;
+          alert(`\u26A0\uFE0F \u5185\u5B58\u6EA2\u51FA\u9519\u8BEF (OOM)
+
+\u{1F4CA} \u7CFB\u7EDF\u8FD0\u884C\u7EDF\u8BA1\uFF1A
+\u2022 \u8FD0\u884C\u65F6\u95F4: ${timeString}
+\u2022 \u6A21\u578B\u5207\u6362\u6B21\u6570: ${modelSwitchCountRef.current}
+\u2022 \u542F\u52A8\u65F6\u95F4: ${new Date(startTimeRef.current).toLocaleString()}
+\u2022 \u9519\u8BEF\u65F6\u95F4: ${(/* @__PURE__ */ new Date()).toLocaleString()}
+
+\u274C \u95EE\u9898\uFF1A\u7269\u7406\u5F15\u64CE\u5185\u5B58\u4E0D\u8DB3\uFF01
+\u8FD9\u901A\u5E38\u610F\u5473\u7740\u4E4B\u524D\u7684\u7269\u7406\u4E16\u754C\u6CA1\u6709\u6B63\u786E\u6E05\u7406\u3002
+
+\u{1F50D} \u9519\u8BEF\u8BE6\u60C5\uFF1A
+${errorMessage}
+
+\u{1F4A1} \u5EFA\u8BAE\uFF1A\u8BF7\u5237\u65B0\u9875\u9762\u6216\u8054\u7CFB\u5F00\u53D1\u8005`);
         }
+        onError?.(error instanceof Error ? error : new Error(String(error)));
       }
     };
-  }, [modelUrl, vmdUrl, cameraUrl, audioUrl, physics]);
-  return /* @__PURE__ */ React2.createElement(
-    "div",
-    {
-      ref: containerRef,
-      style: { width, height, position: "relative", overflow: "hidden" }
-    },
-    loading && /* @__PURE__ */ React2.createElement("div", { style: {
-      position: "absolute",
-      top: 0,
-      left: 0,
-      width: "100%",
-      height: "100%",
-      display: "flex",
-      justifyContent: "center",
-      alignItems: "center",
-      background: "#f0f0f0",
-      color: "#666",
-      zIndex: 1
-    } }, "Loading MMD..."),
-    error && /* @__PURE__ */ React2.createElement("div", { style: {
-      position: "absolute",
-      top: 0,
-      left: 0,
-      width: "100%",
-      height: "100%",
-      display: "flex",
-      justifyContent: "center",
-      alignItems: "center",
-      background: "#ffeeee",
-      color: "#cc0000",
-      zIndex: 2
-    } }, error)
-  );
-};
-var MMDPlayerEnhanced = ({
-  resources,
-  resourcesList,
-  defaultResourceId,
-  resourceOptions,
-  defaultSelection,
-  stage,
-  autoPlay = false,
-  loop = false,
-  className = "",
-  style,
-  onLoad,
-  onError,
-  onResourceChange,
-  onSelectionChange,
-  onAudioEnded,
-  onAnimationEnded
-}) => {
-  console.log("\u{1F3A8} [MMDPlayerEnhanced] \u7EC4\u4EF6\u521D\u59CB\u5316");
-  useEffect(() => {
+    init();
     return () => {
-      console.log("\u{1F9F9} [MMDPlayerEnhanced] \u7EC4\u4EF6\u5378\u8F7D\uFF0C\u6267\u884C\u5B8C\u6574\u6E05\u7406");
+      console.log("[MMDPlayerBase] Cleanup started");
+      initIdRef.current++;
       if (animationIdRef.current) {
         cancelAnimationFrame(animationIdRef.current);
         animationIdRef.current = null;
       }
-      if (audioRef.current) {
-        audioRef.current.pause();
-        audioRef.current.src = "";
-        audioRef.current.load();
-        audioRef.current = null;
+      isPlayingRef.current = false;
+      isReadyRef.current = false;
+      if (resizeObserverRef.current) {
+        resizeObserverRef.current.disconnect();
+        resizeObserverRef.current = null;
       }
-      if (helperRef.current) {
+      if (audioRef.current) {
         try {
-          helperRef.current.enable("animation", false);
-          helperRef.current.enable("ik", false);
-          helperRef.current.enable("grant", false);
-          helperRef.current.enable("physics", false);
-          const helperObjects = helperRef.current.objects;
-          if (helperObjects && Array.isArray(helperObjects)) {
-            const physicsWorldsToDestroy = /* @__PURE__ */ new Set();
-            helperObjects.forEach((obj) => {
-              if (obj.physics) {
-                const physics = obj.physics;
-                if (physics.world) physicsWorldsToDestroy.add(physics.world);
-                if (physics.bodies) physics.bodies.length = 0;
-                if (physics.constraints) physics.constraints.length = 0;
-                obj.physics = null;
-              }
-            });
-            physicsWorldsToDestroy.forEach((world) => {
-              try {
-                while (world.getNumCollisionObjects() > 0) {
-                  const obj = world.getCollisionObjectArray().at(0);
-                  world.removeCollisionObject(obj);
-                  if (obj && obj.destroy) obj.destroy();
-                }
-                if (world.destroy) world.destroy();
-              } catch (e) {
-              }
-            });
-            helperObjects.length = 0;
+          if (audioRef.current.isPlaying) {
+            audioRef.current.stop();
           }
-        } catch (e) {
-        }
-        helperRef.current = null;
-      }
-      if (sceneRef.current) {
-        sceneRef.current.clear();
-        sceneRef.current = null;
-      }
-      if (rendererRef.current) {
-        rendererRef.current.dispose();
-        rendererRef.current = null;
-      }
-      if (controlsRef.current) {
-        controlsRef.current.dispose();
-        controlsRef.current = null;
-      }
-      cameraRef.current = null;
-      if (clockRef.current) {
-        clockRef.current = new THREE2.Clock();
-      }
-      vmdDataRef.current = null;
-      if (window.gc) {
-        try {
-          window.gc();
-        } catch (e) {
-        }
-      }
-      console.log("\u2705 [MMDPlayerEnhanced] \u7EC4\u4EF6\u5378\u8F7D\u6E05\u7406\u5B8C\u6210");
-    };
-  }, []);
-  const [selectedResourceId, setSelectedResourceId] = useState(
-    defaultResourceId || resourcesList?.[0]?.id || ""
-  );
-  const [selectedModelId, setSelectedModelId] = useState(
-    defaultSelection?.modelId || resourceOptions?.models?.[0]?.id || ""
-  );
-  const [selectedMotionId, setSelectedMotionId] = useState(
-    defaultSelection?.motionId || ""
-  );
-  const [selectedAudioId, setSelectedAudioId] = useState(
-    defaultSelection?.audioId || ""
-  );
-  const [selectedCameraId, setSelectedCameraId] = useState(
-    defaultSelection?.cameraId || ""
-  );
-  const [selectedStageModelId, setSelectedStageModelId] = useState(
-    defaultSelection?.stageModelId || ""
-  );
-  const [selectedBackgroundId, setSelectedBackgroundId] = useState(
-    defaultSelection?.backgroundId || ""
-  );
-  const [showSettings, setShowSettings] = useState(false);
-  const [expandedSection, setExpandedSection] = useState(null);
-  const currentResources = useMemo(() => {
-    if (resourceOptions) {
-      const model = resourceOptions.models?.find((m) => m.id === selectedModelId);
-      const motion = resourceOptions.motions?.find((m) => m.id === selectedMotionId);
-      const audio = resourceOptions.audios?.find((a) => a.id === selectedAudioId);
-      const camera = resourceOptions.cameras?.find((c) => c.id === selectedCameraId);
-      const stageModel = resourceOptions.stageModels?.find((s) => s.id === selectedStageModelId);
-      const background = resourceOptions.backgrounds?.find((b) => b.id === selectedBackgroundId);
-      return {
-        modelPath: model?.path || resourceOptions.models?.[0]?.path || "",
-        motionPath: motion?.path,
-        audioPath: audio?.path,
-        cameraPath: camera?.path,
-        stageModelPath: stageModel?.path,
-        backgroundPath: background?.path
-      };
-    }
-    if (resourcesList && resourcesList.length > 0) {
-      const selected = resourcesList.find((r) => r.id === selectedResourceId);
-      const resourceItem = selected || resourcesList[0];
-      if (!resourceItem) {
-        throw new Error("\u65E0\u6CD5\u627E\u5230\u6709\u6548\u7684\u8D44\u6E90\u914D\u7F6E");
-      }
-      return resourceItem.resources;
-    }
-    if (!resources) {
-      throw new Error("\u5FC5\u987B\u63D0\u4F9B resources\u3001resourcesList \u6216 resourceOptions");
-    }
-    return resources;
-  }, [
-    resources,
-    resourcesList,
-    selectedResourceId,
-    resourceOptions,
-    selectedModelId,
-    selectedMotionId,
-    selectedAudioId,
-    selectedCameraId,
-    selectedStageModelId,
-    selectedBackgroundId
-  ]);
-  console.log("\u{1F4C2} [MMDPlayerEnhanced] \u5F53\u524D\u8D44\u6E90\u914D\u7F6E:", currentResources);
-  console.log("\u{1F3AD} [MMDPlayerEnhanced] \u821E\u53F0\u914D\u7F6E:", stage);
-  const containerRef = useRef(null);
-  const rendererRef = useRef(null);
-  const sceneRef = useRef(null);
-  const cameraRef = useRef(null);
-  const controlsRef = useRef(null);
-  const helperRef = useRef(null);
-  const clockRef = useRef(new THREE2.Clock());
-  const audioRef = useRef(null);
-  const animationIdRef = useRef(null);
-  const isPlayingRef = useRef(false);
-  const isLoadedRef = useRef(false);
-  const shouldAutoPlayAfterReloadRef = useRef(false);
-  const vmdDataRef = useRef(null);
-  const animationDurationRef = useRef(0);
-  const hasAudioRef = useRef(false);
-  const animationEndedFiredRef = useRef(false);
-  const lastAnimationTimeRef = useRef(0);
-  const animationStoppedCountRef = useRef(0);
-  const [loading, setLoading] = useState(false);
-  const [loadingProgress, setLoadingProgress] = useState(0);
-  const [error, setError] = useState(null);
-  const [isPlaying, setIsPlaying] = useState(false);
-  const [isInitialized, setIsInitialized] = useState(false);
-  const [reloadTrigger, setReloadTrigger] = useState(0);
-  const [needReset, setNeedReset] = useState(false);
-  useEffect(() => {
-    console.log("\u{1F3D7}\uFE0F [MMDPlayerEnhanced] \u573A\u666F\u521D\u59CB\u5316 useEffect \u89E6\u53D1");
-    if (!containerRef.current) {
-      console.warn("\u26A0\uFE0F [MMDPlayerEnhanced] containerRef.current \u4E0D\u5B58\u5728");
-      return;
-    }
-    console.log("\u2705 [MMDPlayerEnhanced] \u5BB9\u5668\u5143\u7D20\u5B58\u5728\uFF0C\u5F00\u59CB\u521D\u59CB\u5316\u573A\u666F");
-    const container = containerRef.current;
-    if (container.children.length > 0) {
-      console.log("\u26A0\uFE0F [MMDPlayerEnhanced] \u573A\u666F\u5DF2\u7ECF\u521D\u59CB\u5316\uFF0C\u8DF3\u8FC7");
-      return;
-    }
-    const width = container.clientWidth;
-    const height = container.clientHeight;
-    const scene = new THREE2.Scene();
-    scene.background = new THREE2.Color(stage?.backgroundColor || "#000000");
-    sceneRef.current = scene;
-    const camera = new THREE2.PerspectiveCamera(45, width / height, 1, 2e3);
-    const camPos = stage?.cameraPosition || { x: 0, y: 10, z: 30 };
-    camera.position.set(camPos.x, camPos.y, camPos.z);
-    cameraRef.current = camera;
-    const renderer = new THREE2.WebGLRenderer({ antialias: true });
-    renderer.setSize(width, height);
-    renderer.setPixelRatio(window.devicePixelRatio);
-    container.appendChild(renderer.domElement);
-    rendererRef.current = renderer;
-    const ambient = new THREE2.AmbientLight(16777215, 0.6);
-    scene.add(ambient);
-    const directionalLight = new THREE2.DirectionalLight(16777215, 0.8);
-    directionalLight.position.set(1, 1, 1);
-    scene.add(directionalLight);
-    if (stage?.showGrid !== false) {
-      const gridHelper = new THREE2.PolarGridHelper(30, 10);
-      scene.add(gridHelper);
-    }
-    const controls = new OrbitControls(camera, renderer.domElement);
-    const target = stage?.cameraTarget || { x: 0, y: 10, z: 0 };
-    controls.target.set(target.x, target.y, target.z);
-    controls.update();
-    controlsRef.current = controls;
-    const handleResize = () => {
-      if (!container || !camera || !renderer) return;
-      const newWidth = container.clientWidth;
-      const newHeight = container.clientHeight;
-      camera.aspect = newWidth / newHeight;
-      camera.updateProjectionMatrix();
-      renderer.setSize(newWidth, newHeight);
-    };
-    window.addEventListener("resize", handleResize);
-    const animate = () => {
-      animationIdRef.current = requestAnimationFrame(animate);
-      if (helperRef.current && isPlayingRef.current) {
-        const delta = clockRef.current.getDelta();
-        try {
-          helperRef.current.update(delta);
-        } catch (error2) {
-          if (error2.message && error2.message.includes("OOM")) {
-            console.error("\u274C \u7269\u7406\u5F15\u64CE\u5185\u5B58\u6EA2\u51FA\uFF0C\u505C\u6B62\u64AD\u653E");
-            isPlayingRef.current = false;
-            setIsPlaying(false);
-            onError?.(new Error("\u7269\u7406\u5F15\u64CE\u5185\u5B58\u6EA2\u51FA"));
-            return;
+          if (audioRef.current.source) {
+            audioRef.current.disconnect();
           }
-          throw error2;
-        }
-        if (!hasAudioRef.current && !loop && !animationEndedFiredRef.current) {
-          const currentTime = clockRef.current.getElapsedTime();
-          if (animationDurationRef.current > 0) {
-            if (currentTime >= animationDurationRef.current - 0.1) {
-              console.log("\u{1F3AC} [MMDPlayerEnhanced] \u52A8\u753B\u64AD\u653E\u7ED3\u675F\uFF08\u65F6\u957F\u5224\u5B9A\uFF09");
-              animationEndedFiredRef.current = true;
-              isPlayingRef.current = false;
-              setIsPlaying(false);
-              onAnimationEnded?.();
-            }
-          } else {
-            if (Math.abs(currentTime - lastAnimationTimeRef.current) < 1e-3) {
-              animationStoppedCountRef.current++;
-              if (animationStoppedCountRef.current > 30) {
-                console.log("\u{1F3AC} [MMDPlayerEnhanced] \u52A8\u753B\u64AD\u653E\u7ED3\u675F\uFF08\u505C\u6B62\u68C0\u6D4B\uFF09");
-                animationEndedFiredRef.current = true;
-                isPlayingRef.current = false;
-                setIsPlaying(false);
-                onAnimationEnded?.();
-              }
-            } else {
-              animationStoppedCountRef.current = 0;
-            }
-            lastAnimationTimeRef.current = currentTime;
+          if (audioRef.current.buffer) {
+            audioRef.current.buffer = null;
           }
+          audioRef.current = null;
+        } catch (e) {
+          console.warn("[MMDPlayerBase] Error cleaning up audio:", e);
         }
       }
-      if (controlsRef.current) {
-        controlsRef.current.update();
-      }
-      if (renderer && scene && camera) {
-        renderer.render(scene, camera);
-      }
-    };
-    animate();
-    setIsInitialized(true);
-    console.log("\u2705 [MMDPlayerEnhanced] \u573A\u666F\u521D\u59CB\u5316\u5B8C\u6210");
-    return () => {
-      window.removeEventListener("resize", handleResize);
-      if (animationIdRef.current) {
-        cancelAnimationFrame(animationIdRef.current);
-      }
-      if (renderer) {
-        renderer.dispose();
-        if (renderer.domElement && renderer.domElement.parentNode) {
-          container.removeChild(renderer.domElement);
-        }
-      }
-      if (controls) {
-        controls.dispose();
-      }
-    };
-  }, [stage]);
-  const clearOldResources = () => {
-    if (!sceneRef.current) return;
-    if (isPlayingRef.current) {
-      isPlayingRef.current = false;
-      setIsPlaying(false);
-    }
-    if (audioRef.current) {
-      audioRef.current.pause();
-      audioRef.current.currentTime = 0;
-      audioRef.current.onended = null;
-      audioRef.current.src = "";
-      audioRef.current.load();
-      audioRef.current = null;
-    }
-    if (helperRef.current) {
-      try {
-        helperRef.current.enable("animation", false);
-        helperRef.current.enable("ik", false);
-        helperRef.current.enable("grant", false);
-        helperRef.current.enable("physics", false);
-        const helperObjects = helperRef.current.objects;
-        if (helperObjects && Array.isArray(helperObjects)) {
-          const physicsWorldsToDestroy = /* @__PURE__ */ new Set();
-          helperObjects.forEach((obj) => {
-            if (obj.physics) {
-              try {
-                const physics = obj.physics;
-                if (physics.world) {
-                  physicsWorldsToDestroy.add(physics.world);
+      if (helperRef.current) {
+        try {
+          console.log("[MMDPlayerBase] Cleaning up AnimationHelper");
+          const helperObjects = helperRef.current.objects;
+          const meshes = helperRef.current.meshes || [];
+          console.log("[MMDPlayerBase] Found meshes count:", meshes.length);
+          if (meshes && Array.isArray(meshes) && meshes.length > 0) {
+            meshes.forEach((mesh, idx) => {
+              console.log(`[MMDPlayerBase] Cleaning mesh ${idx}:`, mesh.uuid);
+              let meshData = null;
+              if (helperObjects instanceof WeakMap) {
+                console.log("[MMDPlayerBase]   Accessing WeakMap with mesh as key...");
+                meshData = helperObjects.get(mesh);
+                if (meshData) {
+                  const meshDataKeys = Object.keys(meshData);
+                  console.log(`[MMDPlayerBase]   \u2705 Got meshData from WeakMap, keys (${meshDataKeys.length}):`, meshDataKeys);
+                  const physicsRelatedKeys = meshDataKeys.filter((k) => k.toLowerCase().includes("phys"));
+                  if (physicsRelatedKeys.length > 0) {
+                    console.log(`[MMDPlayerBase]   Physics-related keys:`, physicsRelatedKeys);
+                    physicsRelatedKeys.forEach((key) => {
+                      const value = meshData[key];
+                      console.log(`[MMDPlayerBase]     ${key}:`, typeof value, value?.constructor?.name || value);
+                    });
+                  }
+                } else {
+                  console.log("[MMDPlayerBase]   \u26A0\uFE0F No meshData found in WeakMap for this mesh");
                 }
-                if (physics.bodies && Array.isArray(physics.bodies)) {
-                  physics.bodies.forEach((body) => {
-                    if (physics.world && body) {
-                      try {
-                        physics.world.removeRigidBody(body);
-                        if (window.Ammo && body.destroy) {
-                          body.destroy();
+              }
+              if (!meshData) {
+                console.log("[MMDPlayerBase]   Using mesh itself as meshData");
+                meshData = mesh;
+              }
+              const physics = meshData?.physics;
+              if (physics) {
+                try {
+                  console.log("[MMDPlayerBase] \u{1F3AF} Starting physics cleanup for mesh", idx);
+                  console.log("[MMDPlayerBase]   Debug: physics object keys:", Object.keys(physics));
+                  if (typeof physics.dispose === "function") {
+                    console.log("[MMDPlayerBase]   Calling MMDPhysics.dispose()...");
+                    physics.dispose();
+                    console.log("[MMDPlayerBase]   \u2705 MMDPhysics.dispose() completed");
+                  } else {
+                    console.log("[MMDPlayerBase]   No dispose method, manually cleaning physics components...");
+                    const Ammo2 = window.Ammo;
+                    if (!Ammo2 || !Ammo2.destroy) {
+                      console.warn("[MMDPlayerBase]   \u26A0\uFE0F Ammo.destroy not available");
+                    } else {
+                      if (physics.world && Array.isArray(physics.bodies) && physics.bodies.length > 0) {
+                        console.log(`[MMDPlayerBase]   Cleaning ${physics.bodies.length} rigid bodies...`);
+                        for (let i = physics.bodies.length - 1; i >= 0; i--) {
+                          try {
+                            const body = physics.bodies[i];
+                            if (body && body.body) {
+                              physics.world.removeRigidBody(body.body);
+                            }
+                          } catch (e) {
+                            console.warn(`[MMDPlayerBase]     Error removing body ${i}:`, e);
+                          }
                         }
-                      } catch (e) {
+                        physics.bodies.length = 0;
+                        console.log("[MMDPlayerBase]   \u2705 All rigid bodies removed");
                       }
-                    }
-                  });
-                  physics.bodies.length = 0;
-                  physics.bodies = null;
-                }
-                if (physics.constraints && Array.isArray(physics.constraints)) {
-                  physics.constraints.forEach((constraint) => {
-                    if (physics.world && constraint) {
-                      try {
-                        physics.world.removeConstraint(constraint);
-                        if (window.Ammo && constraint.destroy) {
-                          constraint.destroy();
+                      if (physics.world && Array.isArray(physics.constraints) && physics.constraints.length > 0) {
+                        console.log(`[MMDPlayerBase]   Cleaning ${physics.constraints.length} constraints...`);
+                        for (let i = physics.constraints.length - 1; i >= 0; i--) {
+                          try {
+                            const constraint = physics.constraints[i];
+                            if (constraint) {
+                              physics.world.removeConstraint(constraint);
+                            }
+                          } catch (e) {
+                            console.warn(`[MMDPlayerBase]     Error removing constraint ${i}:`, e);
+                          }
                         }
-                      } catch (e) {
+                        physics.constraints.length = 0;
+                        console.log("[MMDPlayerBase]   \u2705 All constraints removed");
                       }
                     }
-                  });
-                  physics.constraints.length = 0;
-                  physics.constraints = null;
-                }
-                if (physics.reset) physics.reset();
-                physics.world = null;
-                obj.physics = null;
-              } catch (e) {
-                console.warn("\u6E05\u7406\u7269\u7406\u7CFB\u7EDF\u5931\u8D25:", e);
-              }
-            }
-          });
-          physicsWorldsToDestroy.forEach((world) => {
-            try {
-              while (world.getNumCollisionObjects() > 0) {
-                const obj = world.getCollisionObjectArray().at(0);
-                world.removeCollisionObject(obj);
-                if (obj && obj.destroy) {
-                  obj.destroy();
+                  }
+                  meshData.physics = null;
+                  console.log("[MMDPlayerBase] \u2705 Physics cleanup completed for mesh", idx);
+                } catch (physicsError) {
+                  console.error("[MMDPlayerBase] \u274C Error cleaning up physics:", physicsError);
+                  console.error("[MMDPlayerBase] Physics error stack:", physicsError.stack);
                 }
+              } else {
+                console.log("[MMDPlayerBase] \u26A0\uFE0F No physics object found for mesh", idx);
               }
-              if (world.destroy) {
-                world.destroy();
+              if (meshData?.mixer) {
+                meshData.mixer.stopAllAction();
+                meshData.mixer.uncacheRoot(meshData.mesh || mesh);
+                const clips = meshData.mixer._actions || [];
+                clips.forEach((action) => {
+                  if (action._clip) {
+                    action._clip = null;
+                  }
+                });
+                meshData.mixer = null;
               }
-            } catch (e) {
-              console.warn("\u9500\u6BC1\u7269\u7406\u4E16\u754C\u5931\u8D25:", e);
-            }
-          });
-          helperObjects.length = 0;
-        }
-      } catch (error2) {
-        console.warn("\u6E05\u7406 helper \u5931\u8D25:", error2);
-      }
-      helperRef.current = null;
-    }
-    if (sceneRef.current.background && sceneRef.current.background.isTexture) {
-      sceneRef.current.background.dispose();
-      sceneRef.current.background = null;
-    }
-    if (sceneRef.current.environment && sceneRef.current.environment.isTexture) {
-      sceneRef.current.environment.dispose();
-      sceneRef.current.environment = null;
-    }
-    const objectsToRemove = [];
-    sceneRef.current.traverse((child) => {
-      if (child.type === "SkinnedMesh" || child.isSkinnedMesh) {
-        objectsToRemove.push(child);
-      }
-      if (child.type === "Mesh" && child !== sceneRef.current) {
-        objectsToRemove.push(child);
-      }
-    });
-    objectsToRemove.forEach((obj) => {
-      if (obj.parent) obj.parent.remove(obj);
-      if (obj.geometry) {
-        obj.geometry.dispose();
-      }
-      if (obj.material) {
-        const disposeMaterial = (m) => {
-          [
-            "map",
-            "emissiveMap",
-            "normalMap",
-            "bumpMap",
-            "specularMap",
-            "envMap",
-            "lightMap",
-            "aoMap",
-            "alphaMap"
-          ].forEach((prop) => {
-            if (m[prop]) m[prop].dispose();
-          });
-          m.dispose();
-        };
-        const material = obj.material;
-        if (Array.isArray(material)) {
-          material.forEach(disposeMaterial);
-        } else {
-          disposeMaterial(material);
-        }
-      }
-      if (obj.skeleton) {
-        obj.skeleton = null;
-      }
-    });
-    clockRef.current = new THREE2.Clock();
-    vmdDataRef.current = null;
-    setNeedReset(false);
-    if (window.gc) {
-      try {
-        window.gc();
-        console.log("\u267B\uFE0F \u5DF2\u89E6\u53D1\u5783\u573E\u56DE\u6536");
-      } catch (e) {
-      }
-    }
-    console.log(`\u2705 \u8D44\u6E90\u6E05\u7406\u5B8C\u6210 (${objectsToRemove.length} \u4E2A\u5BF9\u8C61)`);
-  };
-  useEffect(() => {
-    if (!sceneRef.current || !cameraRef.current) return;
-    if (isLoadedRef.current) return;
-    clearOldResources();
-    isLoadedRef.current = true;
-    const loadMMD = async () => {
-      try {
-        setLoading(true);
-        setLoadingProgress(0);
-        animationDurationRef.current = 0;
-        hasAudioRef.current = false;
-        animationEndedFiredRef.current = false;
-        lastAnimationTimeRef.current = 0;
-        animationStoppedCountRef.current = 0;
-        if (stage?.enablePhysics !== false) {
-          setLoadingProgress(5);
-          await loadAmmo({
-            scriptPath: stage?.ammoPath || "/mikutalking/libs/ammo.wasm.js",
-            wasmBasePath: stage?.ammoWasmPath || "/mikutalking/libs/"
-          });
-        }
-        const manager = new THREE2.LoadingManager();
-        const basePath = currentResources.modelPath.substring(0, currentResources.modelPath.lastIndexOf("/") + 1);
-        manager.setURLModifier((url) => {
-          if (url.startsWith("http://") || url.startsWith("https://")) return url;
-          if (url.startsWith("/")) return url;
-          return basePath + url;
-        });
-        const loader = new MMDLoader(manager);
-        const helper = new MMDAnimationHelper();
-        helperRef.current = helper;
-        setLoadingProgress(20);
-        const modelStartTime = performance.now();
-        const mesh = await new Promise((resolve, reject) => {
-          loader.load(
-            currentResources.modelPath,
-            (object) => {
-              const loadTime = ((performance.now() - modelStartTime) / 1e3).toFixed(2);
-              console.log(`\u2705 \u6A21\u578B\u52A0\u8F7D\u5B8C\u6210 (${loadTime}s)`);
-              resolve(object);
-            },
-            (progress) => {
-              if (progress.total > 0) {
-                setLoadingProgress(Math.min(progress.loaded / progress.total * 30 + 20, 50));
+              if (meshData?.audio) {
+                if (meshData.audio.isPlaying) {
+                  meshData.audio.stop();
+                }
+                if (meshData.audio.source) {
+                  meshData.audio.disconnect();
+                }
+                if (meshData.audio.buffer) {
+                  meshData.audio.buffer = null;
+                }
+                meshData.audio = null;
               }
-            },
-            (error2) => {
-              console.error("\u274C \u6A21\u578B\u52A0\u8F7D\u5931\u8D25:", error2);
-              reject(error2);
-            }
-          );
-        });
-        if (!sceneRef.current) {
-          throw new Error("\u573A\u666F\u672A\u521D\u59CB\u5316");
-        }
-        sceneRef.current.add(mesh);
-        if (currentResources.stageModelPath) {
-          const stageMesh = await new Promise((resolve, reject) => {
-            loader.load(currentResources.stageModelPath, resolve, void 0, reject);
-          });
-          sceneRef.current.add(stageMesh);
-        }
-        if (currentResources.backgroundPath && sceneRef.current) {
-          const textureLoader = new THREE2.TextureLoader();
-          const backgroundTexture = await new Promise((resolve, reject) => {
-            textureLoader.load(currentResources.backgroundPath, resolve, void 0, reject);
-          });
-          backgroundTexture.colorSpace = THREE2.SRGBColorSpace;
-          if (stage?.backgroundType === "skybox") {
-            backgroundTexture.mapping = THREE2.EquirectangularReflectionMapping;
-            sceneRef.current.background = backgroundTexture;
-            sceneRef.current.environment = backgroundTexture;
-          } else {
-            sceneRef.current.background = backgroundTexture;
+            });
+            meshes.length = 0;
           }
-        }
-        let vmd = null;
-        let cameraVmd = null;
-        if (currentResources.motionPath) {
-          setLoadingProgress(60);
-          vmd = await new Promise((resolve, reject) => {
-            loader.loadAnimation(
-              currentResources.motionPath,
-              mesh,
-              resolve,
-              (progress) => {
-                if (progress.total > 0) {
-                  setLoadingProgress(Math.min(progress.loaded / progress.total * 20 + 60, 80));
+          console.log("[MMDPlayerBase] \u{1F525} Starting CRITICAL physics components cleanup...");
+          const Ammo = window.Ammo;
+          if (Ammo && Ammo.destroy) {
+            const components = physicsComponentsRef.current;
+            console.log(`[MMDPlayerBase] \u{1F4CA} Physics components count:`, {
+              worlds: components.worlds.length,
+              solvers: components.solvers.length,
+              caches: components.caches.length,
+              dispatchers: components.dispatchers.length,
+              configs: components.configs.length
+            });
+            if (components.worlds.length > 0) {
+              console.log(`[MMDPlayerBase]   \u{1F5D1}\uFE0F Destroying ${components.worlds.length} btDiscreteDynamicsWorld(s)...`);
+              for (let i = components.worlds.length - 1; i >= 0; i--) {
+                try {
+                  Ammo.destroy(components.worlds[i]);
+                } catch (e) {
+                  console.error(`[MMDPlayerBase]   \u274C Error destroying world #${i}:`, e);
                 }
-              },
-              reject
-            );
-          });
-          helper.add(mesh, {
-            animation: vmd,
-            physics: stage?.enablePhysics !== false
-          });
-          if (vmd) {
-            let maxDuration = 0;
-            if (vmd.duration !== void 0) {
-              maxDuration = vmd.duration;
-            } else if (Array.isArray(vmd) && vmd.length > 0 && vmd[0].duration !== void 0) {
-              maxDuration = vmd[0].duration;
-            } else if (vmd.clip && vmd.clip.duration !== void 0) {
-              maxDuration = vmd.clip.duration;
+              }
+              components.worlds.length = 0;
+              console.log("[MMDPlayerBase]   \u2705 All btDiscreteDynamicsWorld destroyed");
             }
-            if (maxDuration > 0) {
-              animationDurationRef.current = maxDuration;
+            if (components.solvers.length > 0) {
+              console.log(`[MMDPlayerBase]   \u{1F5D1}\uFE0F Destroying ${components.solvers.length} btSequentialImpulseConstraintSolver(s)...`);
+              for (let i = components.solvers.length - 1; i >= 0; i--) {
+                try {
+                  Ammo.destroy(components.solvers[i]);
+                } catch (e) {
+                  console.error(`[MMDPlayerBase]   \u274C Error destroying solver #${i}:`, e);
+                }
+              }
+              components.solvers.length = 0;
+              console.log("[MMDPlayerBase]   \u2705 All btSequentialImpulseConstraintSolver destroyed");
             }
-          }
-        } else {
-          helper.add(mesh, { physics: stage?.enablePhysics !== false });
-        }
-        if (currentResources.cameraPath && cameraRef.current) {
-          setLoadingProgress(80);
-          cameraVmd = await new Promise((resolve, reject) => {
-            loader.loadAnimation(currentResources.cameraPath, cameraRef.current, resolve, void 0, reject);
-          });
-          helper.add(cameraRef.current, { animation: cameraVmd });
-        }
-        if (currentResources.audioPath) {
-          setLoadingProgress(90);
-          const audio = new Audio(currentResources.audioPath);
-          audio.volume = 0.5;
-          audio.loop = loop;
-          audioRef.current = audio;
-          hasAudioRef.current = true;
-          audio.onended = () => {
-            if (!loop) {
-              setIsPlaying(false);
-              if (helperRef.current && sceneRef.current) {
-                const mesh2 = sceneRef.current.children.find(
-                  (child) => child.type === "SkinnedMesh"
-                );
-                if (mesh2) {
-                  helperRef.current.pose(mesh2, {});
+            if (components.caches.length > 0) {
+              console.log(`[MMDPlayerBase]   \u{1F5D1}\uFE0F Destroying ${components.caches.length} btDbvtBroadphase(s)...`);
+              for (let i = components.caches.length - 1; i >= 0; i--) {
+                try {
+                  Ammo.destroy(components.caches[i]);
+                } catch (e) {
+                  console.error(`[MMDPlayerBase]   \u274C Error destroying cache #${i}:`, e);
                 }
               }
+              components.caches.length = 0;
+              console.log("[MMDPlayerBase]   \u2705 All btDbvtBroadphase destroyed");
             }
-            onAudioEnded?.();
-          };
-        }
-        setLoadingProgress(100);
-        setLoading(false);
-        vmdDataRef.current = { mesh, vmd, cameraVmd };
-        if (shouldAutoPlayAfterReloadRef.current) {
-          shouldAutoPlayAfterReloadRef.current = false;
-          setTimeout(() => play(), 500);
-        } else if (autoPlay) {
-          setTimeout(() => play(), 500);
-        }
-        onLoad?.();
-      } catch (err) {
-        console.error("\u274C MMD\u52A0\u8F7D\u5931\u8D25:", err);
-        setError(err.message || "\u52A0\u8F7D\u5931\u8D25");
-        setLoading(false);
-        isLoadedRef.current = false;
-        onError?.(err);
-      }
-    };
-    loadMMD();
-  }, [currentResources, stage?.enablePhysics, autoPlay, loop, onLoad, onError, reloadTrigger]);
-  const play = () => {
-    if (needReset && vmdDataRef.current && sceneRef.current && cameraRef.current) {
-      console.log("\u{1F504} \u68C0\u6D4B\u5230\u9700\u8981\u91CD\u7F6E\uFF0C\u5F00\u59CB\u5F3A\u5236\u6E05\u7406...");
-      if (animationIdRef.current) {
-        cancelAnimationFrame(animationIdRef.current);
-        animationIdRef.current = null;
-      }
-      if (helperRef.current) {
-        try {
-          helperRef.current.enable("animation", false);
-          helperRef.current.enable("ik", false);
-          helperRef.current.enable("grant", false);
-          helperRef.current.enable("physics", false);
-          const helperObjects = helperRef.current.objects;
-          if (helperObjects && Array.isArray(helperObjects)) {
-            const physicsWorldsToDestroy = /* @__PURE__ */ new Set();
-            helperObjects.forEach((obj) => {
-              if (obj.physics) {
+            if (components.dispatchers.length > 0) {
+              console.log(`[MMDPlayerBase]   \u{1F5D1}\uFE0F Destroying ${components.dispatchers.length} btCollisionDispatcher(s)...`);
+              for (let i = components.dispatchers.length - 1; i >= 0; i--) {
                 try {
-                  const physics = obj.physics;
-                  if (physics.world) {
-                    physicsWorldsToDestroy.add(physics.world);
-                  }
-                  if (physics.bodies && Array.isArray(physics.bodies)) {
-                    physics.bodies.forEach((body) => {
-                      if (physics.world && body) {
-                        try {
-                          physics.world.removeRigidBody(body);
-                          if (window.Ammo && body.destroy) {
-                            body.destroy();
-                          }
-                        } catch (e) {
-                        }
-                      }
-                    });
-                    physics.bodies.length = 0;
-                    physics.bodies = null;
-                  }
-                  if (physics.constraints && Array.isArray(physics.constraints)) {
-                    physics.constraints.forEach((constraint) => {
-                      if (physics.world && constraint) {
-                        try {
-                          physics.world.removeConstraint(constraint);
-                          if (window.Ammo && constraint.destroy) {
-                            constraint.destroy();
-                          }
-                        } catch (e) {
-                        }
-                      }
-                    });
-                    physics.constraints.length = 0;
-                    physics.constraints = null;
-                  }
-                  physics.world = null;
-                  obj.physics = null;
+                  Ammo.destroy(components.dispatchers[i]);
                 } catch (e) {
+                  console.error(`[MMDPlayerBase]   \u274C Error destroying dispatcher #${i}:`, e);
                 }
               }
-            });
-            physicsWorldsToDestroy.forEach((world) => {
-              try {
-                while (world.getNumCollisionObjects() > 0) {
-                  const obj = world.getCollisionObjectArray().at(0);
-                  world.removeCollisionObject(obj);
-                  if (obj && obj.destroy) obj.destroy();
+              components.dispatchers.length = 0;
+              console.log("[MMDPlayerBase]   \u2705 All btCollisionDispatcher destroyed");
+            }
+            if (components.configs.length > 0) {
+              console.log(`[MMDPlayerBase]   \u{1F5D1}\uFE0F Destroying ${components.configs.length} btDefaultCollisionConfiguration(s)...`);
+              for (let i = components.configs.length - 1; i >= 0; i--) {
+                try {
+                  Ammo.destroy(components.configs[i]);
+                } catch (e) {
+                  console.error(`[MMDPlayerBase]   \u274C Error destroying config #${i}:`, e);
                 }
-                if (world.destroy) world.destroy();
-              } catch (e) {
               }
-            });
-            helperObjects.length = 0;
+              components.configs.length = 0;
+              console.log("[MMDPlayerBase]   \u2705 All btDefaultCollisionConfiguration destroyed");
+            }
+            console.log("[MMDPlayerBase] \u{1F389} Physics components cleanup completed!");
+          } else {
+            console.warn("[MMDPlayerBase] \u26A0\uFE0F Ammo.destroy not available, skipping physics cleanup");
           }
-        } catch (error2) {
-        }
-      }
-      const newHelper = new MMDAnimationHelper();
-      helperRef.current = newHelper;
-      clockRef.current = new THREE2.Clock();
-      const { mesh, vmd, cameraVmd } = vmdDataRef.current;
-      if (vmd && typeof vmd === "object") {
-        try {
-          newHelper.add(mesh, {
-            animation: vmd,
-            physics: stage?.enablePhysics !== false
-          });
-        } catch (error2) {
-          try {
-            newHelper.add(mesh, { physics: stage?.enablePhysics !== false });
-          } catch (innerError) {
+          console.log("[MMDPlayerBase] Checking helper-level physics...");
+          if (helperRef.current.sharedPhysics) {
+            console.log("[MMDPlayerBase] Clearing sharedPhysics reference...");
+            helperRef.current.sharedPhysics = null;
           }
+          if (helperRef.current.masterPhysics) {
+            console.log("[MMDPlayerBase] Clearing masterPhysics reference...");
+            helperRef.current.masterPhysics = null;
+          }
+          if (helperRef.current.dispose) {
+            helperRef.current.dispose();
+          }
+        } catch (e) {
+          console.warn("[MMDPlayerBase] Error cleaning up AnimationHelper:", e);
         }
-      } else {
-        try {
-          newHelper.add(mesh, { physics: stage?.enablePhysics !== false });
-        } catch (error2) {
-        }
+        helperRef.current = null;
       }
-      if (cameraVmd && typeof cameraVmd === "object") {
-        try {
-          newHelper.add(cameraRef.current, { animation: cameraVmd });
-        } catch (error2) {
+      animationClipRef.current = null;
+      if (axesHelperRef.current) {
+        if (sceneRef.current) {
+          sceneRef.current.remove(axesHelperRef.current);
         }
+        axesHelperRef.current.dispose();
+        axesHelperRef.current = null;
       }
-      if (audioRef.current) {
-        audioRef.current.currentTime = 0;
-      }
-      setNeedReset(false);
-      console.log("\u2705 \u5F3A\u5236\u6E05\u7406\u5B8C\u6210\uFF0C\u5F00\u59CB\u64AD\u653E");
-    }
-    if (!helperRef.current) {
-      console.error("\u274C [play] helper \u4E0D\u5B58\u5728\uFF0C\u65E0\u6CD5\u64AD\u653E");
-      return;
-    }
-    if (audioRef.current) {
-      audioRef.current.play();
-    }
-    helperRef.current.enable("animation", true);
-    helperRef.current.enable("ik", true);
-    helperRef.current.enable("grant", true);
-    helperRef.current.enable("physics", true);
-    if (!isPlaying) {
-      clockRef.current.start();
-    }
-    animationEndedFiredRef.current = false;
-    lastAnimationTimeRef.current = 0;
-    animationStoppedCountRef.current = 0;
-    isPlayingRef.current = true;
-    setIsPlaying(true);
-    console.log("\u25B6\uFE0F \u5F00\u59CB\u64AD\u653E\uFF08\u5305\u62EC\u76F8\u673A\u52A8\u753B\uFF09");
-  };
-  const pause = () => {
-    if (!helperRef.current) return;
-    if (audioRef.current) {
-      audioRef.current.pause();
-    }
-    clockRef.current.stop();
-    isPlayingRef.current = false;
-    setIsPlaying(false);
-    console.log("\u23F8\uFE0F \u6682\u505C\u64AD\u653E\uFF08\u5305\u62EC\u76F8\u673A\u52A8\u753B\uFF09");
-  };
-  const stop = () => {
-    if (!helperRef.current || !sceneRef.current) return;
-    console.log("\u23F9\uFE0F \u505C\u6B62\u64AD\u653E\uFF0C\u5F00\u59CB\u6E05\u7406\u7269\u7406\u7CFB\u7EDF...");
-    isPlayingRef.current = false;
-    setIsPlaying(false);
-    if (audioRef.current) {
-      audioRef.current.pause();
-      audioRef.current.currentTime = 0;
-    }
-    clockRef.current.stop();
-    clockRef.current = new THREE2.Clock();
-    try {
-      helperRef.current.enable("animation", false);
-      helperRef.current.enable("ik", false);
-      helperRef.current.enable("grant", false);
-      helperRef.current.enable("physics", false);
-      const helperObjects = helperRef.current.objects;
-      if (helperObjects && Array.isArray(helperObjects)) {
-        const physicsWorldsToDestroy = /* @__PURE__ */ new Set();
-        helperObjects.forEach((obj) => {
-          if (obj.physics) {
-            try {
-              const physics = obj.physics;
-              if (physics.world) {
-                physicsWorldsToDestroy.add(physics.world);
+      if (sceneRef.current) {
+        sceneRef.current.traverse((object) => {
+          if (object instanceof THREE.Mesh || object instanceof THREE.SkinnedMesh) {
+            if (object instanceof THREE.SkinnedMesh) {
+              if (object.skeleton) {
+                object.skeleton.dispose();
               }
-              if (physics.bodies && Array.isArray(physics.bodies)) {
-                physics.bodies.forEach((body) => {
-                  if (physics.world && body) {
-                    try {
-                      physics.world.removeRigidBody(body);
-                      if (window.Ammo && body.destroy) {
-                        body.destroy();
-                      }
-                    } catch (e) {
-                    }
-                  }
-                });
-                physics.bodies.length = 0;
-                physics.bodies = null;
+              if (object.bindMatrix) {
+                object.bindMatrix = null;
               }
-              if (physics.constraints && Array.isArray(physics.constraints)) {
-                physics.constraints.forEach((constraint) => {
-                  if (physics.world && constraint) {
-                    try {
-                      physics.world.removeConstraint(constraint);
-                      if (window.Ammo && constraint.destroy) {
-                        constraint.destroy();
-                      }
-                    } catch (e) {
-                    }
+              if (object.bindMatrixInverse) {
+                object.bindMatrixInverse = null;
+              }
+            }
+            if (object.geometry) {
+              object.geometry.dispose();
+              object.geometry = null;
+            }
+            if (object.material) {
+              const disposeMaterial = (m) => {
+                const textureProps = [
+                  "map",
+                  "lightMap",
+                  "bumpMap",
+                  "normalMap",
+                  "specularMap",
+                  "envMap",
+                  "alphaMap",
+                  "emissiveMap",
+                  "displacementMap",
+                  "roughnessMap",
+                  "metalnessMap",
+                  "aoMap",
+                  // MMD 特有纹理
+                  "gradientMap",
+                  "toonMap",
+                  "sphereMap",
+                  "matcap"
+                ];
+                textureProps.forEach((prop) => {
+                  if (m[prop] && m[prop].dispose) {
+                    m[prop].dispose();
+                    m[prop] = null;
                   }
                 });
-                physics.constraints.length = 0;
-                physics.constraints = null;
+                m.dispose();
+              };
+              if (Array.isArray(object.material)) {
+                object.material.forEach(disposeMaterial);
+              } else {
+                disposeMaterial(object.material);
+              }
+              object.material = null;
+            }
+          }
+          if (object instanceof THREE.AudioListener) {
+            try {
+              if (object.context && object.context.state !== "closed") {
+                object.context.close?.();
               }
-              physics.world = null;
-              obj.physics = null;
             } catch (e) {
+              console.warn("[MMDPlayerBase] Error closing AudioContext:", e);
             }
           }
-        });
-        physicsWorldsToDestroy.forEach((world) => {
-          try {
-            while (world.getNumCollisionObjects() > 0) {
-              const obj = world.getCollisionObjectArray().at(0);
-              world.removeCollisionObject(obj);
-              if (obj && obj.destroy) obj.destroy();
+          if (object instanceof THREE.Light) {
+            if (object.shadow && object.shadow.map) {
+              object.shadow.map.dispose();
+              object.shadow.map = null;
             }
-            if (world.destroy) world.destroy();
-          } catch (e) {
           }
         });
-        helperObjects.length = 0;
+        sceneRef.current.clear();
+        sceneRef.current = null;
       }
-    } catch (error2) {
-      console.warn("\u505C\u6B62\u65F6\u6E05\u7406\u7269\u7406\u7CFB\u7EDF\u5931\u8D25:", error2);
-    }
-    const mesh = sceneRef.current.children.find(
-      (child) => child.type === "SkinnedMesh" || child.isSkinnedMesh
-    );
-    if (mesh && mesh.skeleton) {
-      mesh.skeleton.pose();
-    }
-    if (cameraRef.current) {
-      const camPos = stage?.cameraPosition || { x: 0, y: 10, z: 30 };
-      const camTarget = stage?.cameraTarget || { x: 0, y: 10, z: 0 };
-      cameraRef.current.position.set(camPos.x, camPos.y, camPos.z);
       if (controlsRef.current) {
-        controlsRef.current.target.set(camTarget.x, camTarget.y, camTarget.z);
-        controlsRef.current.update();
-      } else {
-        cameraRef.current.lookAt(camTarget.x, camTarget.y, camTarget.z);
+        controlsRef.current.dispose();
+        controlsRef.current = null;
       }
+      if (rendererRef.current) {
+        try {
+          const renderer = rendererRef.current;
+          if (renderer.renderLists) {
+            renderer.renderLists.dispose();
+          }
+          if (renderer.info && renderer.info.programs) {
+            renderer.info.programs.forEach((program) => {
+              if (program && program.destroy) {
+                program.destroy();
+              }
+            });
+          }
+          if (renderer.getContext) {
+            const gl = renderer.getContext();
+            const numTextureUnits = gl.getParameter(gl.MAX_TEXTURE_IMAGE_UNITS);
+            for (let unit = 0; unit < numTextureUnits; ++unit) {
+              gl.activeTexture(gl.TEXTURE0 + unit);
+              gl.bindTexture(gl.TEXTURE_2D, null);
+              gl.bindTexture(gl.TEXTURE_CUBE_MAP, null);
+            }
+          }
+          renderer.dispose();
+          renderer.forceContextLoss();
+          if (containerRef.current && renderer.domElement) {
+            if (containerRef.current.contains(renderer.domElement)) {
+              containerRef.current.removeChild(renderer.domElement);
+            }
+          }
+          if (renderer.domElement) {
+            renderer.domElement.width = 1;
+            renderer.domElement.height = 1;
+          }
+        } catch (e) {
+          console.warn("[MMDPlayerBase] Error cleaning up renderer:", e);
+        }
+        rendererRef.current = null;
+      }
+      cameraRef.current = null;
+      clockRef.current = new THREE.Clock();
+      durationRef.current = 0;
+      console.log("[MMDPlayerBase] Cleanup completed");
+      if (typeof window !== "undefined" && "gc" in window) {
+        try {
+          window.gc();
+        } catch (e) {
+        }
+      }
+    };
+  }, [resources]);
+  useEffect(() => {
+    if (!sceneRef.current) return;
+    if (showAxes && !axesHelperRef.current) {
+      const axesHelper = new THREE.AxesHelper(20);
+      sceneRef.current.add(axesHelper);
+      axesHelperRef.current = axesHelper;
+    } else if (!showAxes && axesHelperRef.current) {
+      sceneRef.current.remove(axesHelperRef.current);
+      axesHelperRef.current.dispose();
+      axesHelperRef.current = null;
     }
-    setNeedReset(true);
-    console.log("\u2705 \u505C\u6B62\u64AD\u653E\u5E76\u6E05\u7406\u5B8C\u6210\uFF0CneedReset = true");
-  };
-  const handleResourceChange = (resourceId) => {
-    console.log("\u{1F504} [MMDPlayerEnhanced] \u5207\u6362\u8D44\u6E90:", resourceId);
-    if (isPlayingRef.current) {
-      isPlayingRef.current = false;
-      setIsPlaying(false);
-    }
-    if (audioRef.current) {
-      audioRef.current.pause();
-      audioRef.current.currentTime = 0;
-    }
-    setSelectedResourceId(resourceId);
-    isLoadedRef.current = false;
-    setNeedReset(false);
-    setReloadTrigger((prev) => prev + 1);
-    if (onResourceChange) {
-      onResourceChange(resourceId);
-    }
-    setShowSettings(false);
-  };
-  const handleSelectionChange = (type, id) => {
-    console.log(`\u{1F504} [MMDPlayerEnhanced] \u9009\u62E9${type}:`, id);
-    const wasPlaying = isPlayingRef.current;
-    if (isPlayingRef.current) {
-      isPlayingRef.current = false;
-      setIsPlaying(false);
-    }
-    if (audioRef.current) {
-      audioRef.current.pause();
-      audioRef.current.currentTime = 0;
-    }
-    if (type === "model") setSelectedModelId(id);
-    if (type === "motion") setSelectedMotionId(id);
-    if (type === "audio") setSelectedAudioId(id);
-    if (type === "camera") setSelectedCameraId(id);
-    if (type === "stageModel") setSelectedStageModelId(id);
-    if (type === "background") setSelectedBackgroundId(id);
-    isLoadedRef.current = false;
-    setNeedReset(false);
-    if (wasPlaying || autoPlay) {
-      shouldAutoPlayAfterReloadRef.current = true;
+  }, [showAxes]);
+  useEffect(() => {
+    loopRef.current = loop;
+    if (audioRef.current && audioRef.current.buffer) {
+      audioRef.current.setLoop(loop);
     }
-    setReloadTrigger((prev) => prev + 1);
-    if (onSelectionChange) {
-      const newSelection = {
-        modelId: type === "model" ? id : selectedModelId,
-        motionId: type === "motion" ? id : selectedMotionId,
-        audioId: type === "audio" ? id : selectedAudioId,
-        cameraId: type === "camera" ? id : selectedCameraId,
-        stageModelId: type === "stageModel" ? id : selectedStageModelId,
-        backgroundId: type === "background" ? id : selectedBackgroundId
-      };
-      onSelectionChange(newSelection);
+  }, [loop]);
+  const animate = () => {
+    animationIdRef.current = requestAnimationFrame(animate);
+    if (rendererRef.current && sceneRef.current && cameraRef.current) {
+      if (isReadyRef.current && isPlayingRef.current && helperRef.current) {
+        const delta = clockRef.current.getDelta();
+        helperRef.current.update(delta);
+        const elapsed = clockRef.current.elapsedTime;
+        const duration = durationRef.current;
+        const currentTime = duration > 0 && loopRef.current ? elapsed % duration : elapsed;
+        onTimeUpdate?.(currentTime);
+        if (!loopRef.current && duration > 0 && elapsed >= duration) {
+          isPlayingRef.current = false;
+          clockRef.current.stop();
+          onEnded?.();
+        }
+      }
+      rendererRef.current.render(sceneRef.current, cameraRef.current);
     }
   };
-  return /* @__PURE__ */ React2.createElement("div", { className: `relative h-full w-full ${className}`, style }, /* @__PURE__ */ React2.createElement("div", { ref: containerRef, className: "h-full w-full" }), loading && /* @__PURE__ */ React2.createElement("div", { className: "absolute inset-0 flex flex-col items-center justify-center bg-black text-white" }, /* @__PURE__ */ React2.createElement("div", { className: "mb-4 text-2xl" }, "\u{1F3AD} \u52A0\u8F7DMMD\u8D44\u6E90\u4E2D..."), /* @__PURE__ */ React2.createElement("div", { className: "h-4 w-3/4 max-w-md overflow-hidden rounded-full bg-gray-700" }, /* @__PURE__ */ React2.createElement(
+  return /* @__PURE__ */ React6.createElement(
     "div",
     {
-      className: "h-full bg-gradient-to-r from-blue-500 to-purple-500 transition-all duration-300",
-      style: { width: `${loadingProgress}%` }
+      ref: containerRef,
+      className,
+      style: {
+        width: "100%",
+        height: "100%",
+        overflow: "hidden",
+        position: "relative",
+        backgroundColor: stage.backgroundColor || "#000",
+        ...style
+      }
     }
-  )), /* @__PURE__ */ React2.createElement("div", { className: "mt-2 text-sm text-gray-400" }, Math.round(loadingProgress), "%")), isInitialized && !loading && !error && /* @__PURE__ */ React2.createElement("div", { className: "absolute bottom-4 left-1/2 flex -translate-x-1/2 gap-2 rounded-full bg-black/50 px-4 py-2 backdrop-blur-md" }, !isPlaying ? /* @__PURE__ */ React2.createElement(
-    "button",
-    {
-      onClick: play,
-      className: "flex h-12 w-12 items-center justify-center rounded-full bg-green-500 text-xl text-white transition-colors hover:bg-green-600",
-      title: "\u64AD\u653E"
-    },
-    "\u25B6\uFE0F"
-  ) : /* @__PURE__ */ React2.createElement(
-    "button",
-    {
-      onClick: pause,
-      className: "flex h-12 w-12 items-center justify-center rounded-full bg-yellow-500 text-xl text-white transition-colors hover:bg-yellow-600",
-      title: "\u6682\u505C"
-    },
-    "\u23F8\uFE0F"
-  ), /* @__PURE__ */ React2.createElement(
-    "button",
-    {
-      onClick: stop,
-      className: "flex h-12 w-12 items-center justify-center rounded-full bg-red-500 text-xl text-white transition-colors hover:bg-red-600",
-      title: "\u505C\u6B62"
-    },
-    "\u23F9\uFE0F"
-  ), (resourcesList && resourcesList.length > 1 || resourceOptions) && /* @__PURE__ */ React2.createElement(
-    "button",
-    {
-      onClick: () => setShowSettings(true),
-      className: "flex h-12 w-12 items-center justify-center rounded-full bg-purple-500 text-xl text-white transition-colors hover:bg-purple-600",
-      title: "\u8BBE\u7F6E"
-    },
-    "\u2699\uFE0F"
-  )), showSettings && resourcesList && /* @__PURE__ */ React2.createElement("div", { className: "absolute inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-sm" }, /* @__PURE__ */ React2.createElement("div", { className: "max-h-[80vh] w-full max-w-md overflow-hidden rounded-2xl bg-gradient-to-br from-gray-900 to-black shadow-2xl" }, /* @__PURE__ */ React2.createElement("div", { className: "flex items-center justify-between border-b border-white/10 px-6 py-4" }, /* @__PURE__ */ React2.createElement("h3", { className: "text-xl font-bold text-white" }, "\u9009\u62E9\u8D44\u6E90"), /* @__PURE__ */ React2.createElement(
-    "button",
-    {
-      onClick: () => setShowSettings(false),
-      className: "text-2xl text-white/60 transition-colors hover:text-white"
-    },
-    "\u2715"
-  )), /* @__PURE__ */ React2.createElement("div", { className: "max-h-[60vh] overflow-y-auto p-4" }, resourcesList.map((item) => /* @__PURE__ */ React2.createElement(
-    "button",
-    {
-      key: item.id,
-      onClick: () => handleResourceChange(item.id),
-      className: `mb-3 w-full rounded-xl p-4 text-left transition-all ${selectedResourceId === item.id ? "bg-gradient-to-r from-purple-600 to-blue-600 shadow-lg" : "bg-white/5 hover:bg-white/10"}`
-    },
-    /* @__PURE__ */ React2.createElement("div", { className: "flex items-center justify-between" }, /* @__PURE__ */ React2.createElement("div", { className: "flex-1" }, /* @__PURE__ */ React2.createElement("h4", { className: "font-semibold text-white" }, item.name), /* @__PURE__ */ React2.createElement("div", { className: "mt-1 flex flex-wrap gap-2 text-xs text-white/60" }, item.resources.modelPath && /* @__PURE__ */ React2.createElement("span", { className: "rounded bg-white/10 px-2 py-1" }, "\u6A21\u578B"), item.resources.motionPath && /* @__PURE__ */ React2.createElement("span", { className: "rounded bg-white/10 px-2 py-1" }, "\u52A8\u4F5C"), item.resources.cameraPath && /* @__PURE__ */ React2.createElement("span", { className: "rounded bg-white/10 px-2 py-1" }, "\u76F8\u673A"), item.resources.audioPath && /* @__PURE__ */ React2.createElement("span", { className: "rounded bg-white/10 px-2 py-1" }, "\u97F3\u9891"))), selectedResourceId === item.id && /* @__PURE__ */ React2.createElement("div", { className: "ml-4 text-2xl" }, "\u2713"))
-  ))))), showSettings && resourceOptions && /* @__PURE__ */ React2.createElement("div", { className: "absolute top-4 right-4 z-50 w-80 rounded-xl bg-black/90 backdrop-blur-md shadow-2xl border border-white/10" }, /* @__PURE__ */ React2.createElement("div", { className: "flex items-center justify-between border-b border-white/10 px-4 py-3" }, /* @__PURE__ */ React2.createElement("h3", { className: "text-sm font-bold text-white" }, "\u8D44\u6E90\u8BBE\u7F6E"), /* @__PURE__ */ React2.createElement(
-    "button",
-    {
-      onClick: () => setShowSettings(false),
-      className: "text-lg text-white/60 transition-colors hover:text-white"
-    },
-    "\u2715"
-  )), /* @__PURE__ */ React2.createElement("div", { className: "max-h-[70vh] overflow-y-auto p-4 space-y-2" }, resourceOptions.models && resourceOptions.models.length > 0 && /* @__PURE__ */ React2.createElement("div", { className: "rounded-lg bg-white/5 overflow-hidden" }, /* @__PURE__ */ React2.createElement(
-    "button",
-    {
-      onClick: () => setExpandedSection(expandedSection === "model" ? null : "model"),
-      className: "w-full flex items-center justify-between px-3 py-2.5 text-left hover:bg-white/10 transition-colors"
-    },
-    /* @__PURE__ */ React2.createElement("div", { className: "flex items-center gap-2" }, /* @__PURE__ */ React2.createElement("span", { className: "text-xs font-medium text-white/70" }, "\u6A21\u578B"), /* @__PURE__ */ React2.createElement("span", { className: "text-sm text-white font-medium" }, resourceOptions.models.find((m) => m.id === selectedModelId)?.name || "\u672A\u9009\u62E9")),
-    /* @__PURE__ */ React2.createElement("span", { className: `text-white/60 transition-transform ${expandedSection === "model" ? "rotate-180" : ""}` }, "\u25BC")
-  ), expandedSection === "model" && /* @__PURE__ */ React2.createElement("div", { className: "border-t border-white/10 p-2 space-y-1 max-h-60 overflow-y-auto" }, resourceOptions.models.map((model) => /* @__PURE__ */ React2.createElement(
-    "button",
-    {
-      key: model.id,
-      onClick: () => {
-        handleSelectionChange("model", model.id);
-        setExpandedSection(null);
-      },
-      className: `w-full rounded px-3 py-2 text-left text-sm transition-all ${selectedModelId === model.id ? "bg-purple-600 text-white font-medium" : "text-white/80 hover:bg-white/10"}`
-    },
-    model.name
-  )))), resourceOptions.motions && resourceOptions.motions.length > 0 && /* @__PURE__ */ React2.createElement("div", { className: "rounded-lg bg-white/5 overflow-hidden" }, /* @__PURE__ */ React2.createElement(
-    "button",
-    {
-      onClick: () => setExpandedSection(expandedSection === "motion" ? null : "motion"),
-      className: "w-full flex items-center justify-between px-3 py-2.5 text-left hover:bg-white/10 transition-colors"
-    },
-    /* @__PURE__ */ React2.createElement("div", { className: "flex items-center gap-2" }, /* @__PURE__ */ React2.createElement("span", { className: "text-xs font-medium text-white/70" }, "\u52A8\u4F5C"), /* @__PURE__ */ React2.createElement("span", { className: "text-sm text-white font-medium" }, selectedMotionId ? resourceOptions.motions.find((m) => m.id === selectedMotionId)?.name : "\u65E0")),
-    /* @__PURE__ */ React2.createElement("span", { className: `text-white/60 transition-transform ${expandedSection === "motion" ? "rotate-180" : ""}` }, "\u25BC")
-  ), expandedSection === "motion" && /* @__PURE__ */ React2.createElement("div", { className: "border-t border-white/10 p-2 space-y-1 max-h-60 overflow-y-auto" }, /* @__PURE__ */ React2.createElement(
-    "button",
-    {
-      onClick: () => {
-        handleSelectionChange("motion", "");
-        setExpandedSection(null);
-      },
-      className: `w-full rounded px-3 py-2 text-left text-sm transition-all ${selectedMotionId === "" ? "bg-purple-600 text-white font-medium" : "text-white/80 hover:bg-white/10"}`
-    },
-    "\u65E0"
-  ), resourceOptions.motions.map((motion) => /* @__PURE__ */ React2.createElement(
+  );
+});
+MMDPlayerBase.displayName = "MMDPlayerBase";
+var ControlPanel = ({
+  isPlaying,
+  isFullscreen,
+  isLooping,
+  isListLooping,
+  showSettings,
+  showAxes = false,
+  showPrevNext = false,
+  title,
+  subtitle,
+  onPlayPause,
+  onToggleFullscreen,
+  onToggleLoop,
+  onToggleListLoop,
+  onToggleAxes,
+  onOpenSettings,
+  onPrevious,
+  onNext
+}) => {
+  return /* @__PURE__ */ React6.createElement("div", { className: "absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/80 to-transparent p-4 transition-opacity duration-300 hover:opacity-100" }, /* @__PURE__ */ React6.createElement("div", { className: "flex items-center justify-between text-white" }, /* @__PURE__ */ React6.createElement("div", { className: "flex items-center gap-2" }, showPrevNext && onPrevious && /* @__PURE__ */ React6.createElement(
     "button",
     {
-      key: motion.id,
-      onClick: () => {
-        handleSelectionChange("motion", motion.id);
-        setExpandedSection(null);
-      },
-      className: `w-full rounded px-3 py-2 text-left text-sm transition-all ${selectedMotionId === motion.id ? "bg-purple-600 text-white font-medium" : "text-white/80 hover:bg-white/10"}`
+      onClick: onPrevious,
+      className: "rounded-full p-2 hover:bg-white/20 transition-colors",
+      title: "\u4E0A\u4E00\u4E2A"
     },
-    motion.name
-  )))), resourceOptions.audios && resourceOptions.audios.length > 0 && /* @__PURE__ */ React2.createElement("div", { className: "rounded-lg bg-white/5 overflow-hidden" }, /* @__PURE__ */ React2.createElement(
+    /* @__PURE__ */ React6.createElement(SkipBack, { size: 20 })
+  ), /* @__PURE__ */ React6.createElement(
     "button",
     {
-      onClick: () => setExpandedSection(expandedSection === "audio" ? null : "audio"),
-      className: "w-full flex items-center justify-between px-3 py-2.5 text-left hover:bg-white/10 transition-colors"
+      onClick: onPlayPause,
+      className: "rounded-full p-2 hover:bg-white/20 transition-colors",
+      title: isPlaying ? "\u6682\u505C" : "\u64AD\u653E"
     },
-    /* @__PURE__ */ React2.createElement("div", { className: "flex items-center gap-2" }, /* @__PURE__ */ React2.createElement("span", { className: "text-xs font-medium text-white/70" }, "\u97F3\u4E50"), /* @__PURE__ */ React2.createElement("span", { className: "text-sm text-white font-medium" }, selectedAudioId ? resourceOptions.audios.find((a) => a.id === selectedAudioId)?.name : "\u65E0")),
-    /* @__PURE__ */ React2.createElement("span", { className: `text-white/60 transition-transform ${expandedSection === "audio" ? "rotate-180" : ""}` }, "\u25BC")
-  ), expandedSection === "audio" && /* @__PURE__ */ React2.createElement("div", { className: "border-t border-white/10 p-2 space-y-1 max-h-60 overflow-y-auto" }, /* @__PURE__ */ React2.createElement(
+    isPlaying ? /* @__PURE__ */ React6.createElement(Pause, { size: 24 }) : /* @__PURE__ */ React6.createElement(Play, { size: 24 })
+  ), showPrevNext && onNext && /* @__PURE__ */ React6.createElement(
     "button",
     {
-      onClick: () => {
-        handleSelectionChange("audio", "");
-        setExpandedSection(null);
-      },
-      className: `w-full rounded px-3 py-2 text-left text-sm transition-all ${selectedAudioId === "" ? "bg-purple-600 text-white font-medium" : "text-white/80 hover:bg-white/10"}`
+      onClick: onNext,
+      className: "rounded-full p-2 hover:bg-white/20 transition-colors",
+      title: "\u4E0B\u4E00\u4E2A"
     },
-    "\u65E0"
-  ), resourceOptions.audios.map((audio) => /* @__PURE__ */ React2.createElement(
+    /* @__PURE__ */ React6.createElement(SkipForward, { size: 20 })
+  )), /* @__PURE__ */ React6.createElement("div", { className: "flex items-center gap-4" }, (title || subtitle) && /* @__PURE__ */ React6.createElement("div", { className: "hidden text-sm font-medium opacity-80 md:block" }, title, subtitle && /* @__PURE__ */ React6.createElement("span", { className: "ml-2 text-xs opacity-60" }, subtitle)), onToggleListLoop && /* @__PURE__ */ React6.createElement(
     "button",
     {
-      key: audio.id,
-      onClick: () => {
-        handleSelectionChange("audio", audio.id);
-        setExpandedSection(null);
-      },
-      className: `w-full rounded px-3 py-2 text-left text-sm transition-all ${selectedAudioId === audio.id ? "bg-purple-600 text-white font-medium" : "text-white/80 hover:bg-white/10"}`
+      onClick: onToggleListLoop,
+      className: `rounded-full p-2 transition-colors ${isListLooping ? "bg-green-500/30 hover:bg-green-500/50" : "hover:bg-white/20"}`,
+      title: isListLooping ? "\u5217\u8868\u5FAA\u73AF\uFF1A\u5F00\u542F" : "\u5217\u8868\u5FAA\u73AF\uFF1A\u5173\u95ED"
     },
-    audio.name
-  )))), resourceOptions.cameras && resourceOptions.cameras.length > 0 && /* @__PURE__ */ React2.createElement("div", { className: "rounded-lg bg-white/5 overflow-hidden" }, /* @__PURE__ */ React2.createElement(
+    /* @__PURE__ */ React6.createElement(Repeat, { size: 20 })
+  ), /* @__PURE__ */ React6.createElement(
     "button",
     {
-      onClick: () => setExpandedSection(expandedSection === "camera" ? null : "camera"),
-      className: "w-full flex items-center justify-between px-3 py-2.5 text-left hover:bg-white/10 transition-colors"
+      onClick: onToggleLoop,
+      className: `rounded-full p-2 transition-colors ${isLooping ? "bg-blue-500/30 hover:bg-blue-500/50" : "hover:bg-white/20"}`,
+      title: isLooping ? "\u5355\u66F2\u5FAA\u73AF\uFF1A\u5F00\u542F" : "\u5355\u66F2\u5FAA\u73AF\uFF1A\u5173\u95ED"
     },
-    /* @__PURE__ */ React2.createElement("div", { className: "flex items-center gap-2" }, /* @__PURE__ */ React2.createElement("span", { className: "text-xs font-medium text-white/70" }, "\u76F8\u673A"), /* @__PURE__ */ React2.createElement("span", { className: "text-sm text-white font-medium" }, selectedCameraId ? resourceOptions.cameras.find((c) => c.id === selectedCameraId)?.name : "\u65E0")),
-    /* @__PURE__ */ React2.createElement("span", { className: `text-white/60 transition-transform ${expandedSection === "camera" ? "rotate-180" : ""}` }, "\u25BC")
-  ), expandedSection === "camera" && /* @__PURE__ */ React2.createElement("div", { className: "border-t border-white/10 p-2 space-y-1 max-h-60 overflow-y-auto" }, /* @__PURE__ */ React2.createElement(
+    /* @__PURE__ */ React6.createElement(Repeat1, { size: 20 })
+  ), onToggleAxes && /* @__PURE__ */ React6.createElement(
     "button",
     {
-      onClick: () => {
-        handleSelectionChange("camera", "");
-        setExpandedSection(null);
-      },
-      className: `w-full rounded px-3 py-2 text-left text-sm transition-all ${selectedCameraId === "" ? "bg-purple-600 text-white font-medium" : "text-white/80 hover:bg-white/10"}`
+      onClick: onToggleAxes,
+      className: `rounded-full p-2 transition-colors ${showAxes ? "bg-blue-500/30 hover:bg-blue-500/50" : "hover:bg-white/20"}`,
+      title: "\u663E\u793A/\u9690\u85CF\u5750\u6807\u8F74"
     },
-    "\u65E0"
-  ), resourceOptions.cameras.map((camera) => /* @__PURE__ */ React2.createElement(
+    /* @__PURE__ */ React6.createElement(Grid3x3, { size: 20 })
+  ), showSettings && /* @__PURE__ */ React6.createElement(
     "button",
     {
-      key: camera.id,
-      onClick: () => {
-        handleSelectionChange("camera", camera.id);
-        setExpandedSection(null);
-      },
-      className: `w-full rounded px-3 py-2 text-left text-sm transition-all ${selectedCameraId === camera.id ? "bg-purple-600 text-white font-medium" : "text-white/80 hover:bg-white/10"}`
+      onClick: onOpenSettings,
+      className: "rounded-full p-2 hover:bg-white/20 transition-colors",
+      title: "\u8D44\u6E90\u8BBE\u7F6E"
     },
-    camera.name
-  )))), resourceOptions.stageModels && resourceOptions.stageModels.length > 0 && /* @__PURE__ */ React2.createElement("div", { className: "rounded-lg bg-white/5 overflow-hidden" }, /* @__PURE__ */ React2.createElement(
+    /* @__PURE__ */ React6.createElement(Settings, { size: 20 })
+  ), /* @__PURE__ */ React6.createElement(
     "button",
     {
-      onClick: () => setExpandedSection(expandedSection === "stageModel" ? null : "stageModel"),
-      className: "w-full flex items-center justify-between px-3 py-2.5 text-left hover:bg-white/10 transition-colors"
+      onClick: onToggleFullscreen,
+      className: "rounded-full p-2 hover:bg-white/20 transition-colors",
+      title: isFullscreen ? "\u9000\u51FA\u5168\u5C4F" : "\u5168\u5C4F"
     },
-    /* @__PURE__ */ React2.createElement("div", { className: "flex items-center gap-2" }, /* @__PURE__ */ React2.createElement("span", { className: "text-xs font-medium text-white/70" }, "\u573A\u666F"), /* @__PURE__ */ React2.createElement("span", { className: "text-sm text-white font-medium" }, selectedStageModelId ? resourceOptions.stageModels.find((s) => s.id === selectedStageModelId)?.name : "\u65E0")),
-    /* @__PURE__ */ React2.createElement("span", { className: `text-white/60 transition-transform ${expandedSection === "stageModel" ? "rotate-180" : ""}` }, "\u25BC")
-  ), expandedSection === "stageModel" && /* @__PURE__ */ React2.createElement("div", { className: "border-t border-white/10 p-2 space-y-1 max-h-60 overflow-y-auto" }, /* @__PURE__ */ React2.createElement(
-    "button",
-    {
-      onClick: () => {
-        handleSelectionChange("stageModel", "");
-        setExpandedSection(null);
+    isFullscreen ? /* @__PURE__ */ React6.createElement(Minimize, { size: 20 }) : /* @__PURE__ */ React6.createElement(Maximize, { size: 20 })
+  ))));
+};
+var SettingsPanel = ({
+  mode,
+  items,
+  currentId,
+  onSelectId,
+  options,
+  currentSelection,
+  onSelectOption,
+  onClose
+}) => {
+  const renderListMode = () => {
+    if (!items) return null;
+    return /* @__PURE__ */ React6.createElement("div", { className: "grid grid-cols-1 gap-2 p-4 sm:grid-cols-2" }, items.map((item) => /* @__PURE__ */ React6.createElement(
+      "button",
+      {
+        key: item.id,
+        onClick: () => onSelectId?.(item.id),
+        className: `group flex items-center gap-3 rounded-lg p-3 transition-all ${currentId === item.id ? "bg-blue-500/20 ring-1 ring-blue-500" : "bg-white/5 hover:bg-white/10"}`
       },
-      className: `w-full rounded px-3 py-2 text-left text-sm transition-all ${selectedStageModelId === "" ? "bg-purple-600 text-white font-medium" : "text-white/80 hover:bg-white/10"}`
-    },
-    "\u65E0"
-  ), resourceOptions.stageModels.map((stageModel) => /* @__PURE__ */ React2.createElement(
-    "button",
-    {
-      key: stageModel.id,
-      onClick: () => {
-        handleSelectionChange("stageModel", stageModel.id);
-        setExpandedSection(null);
+      /* @__PURE__ */ React6.createElement("div", { className: "flex h-12 w-12 flex-shrink-0 items-center justify-center rounded bg-black/20 overflow-hidden" }, item.thumbnail ? /* @__PURE__ */ React6.createElement("img", { src: item.thumbnail, alt: item.name, className: "h-full w-full object-cover" }) : /* @__PURE__ */ React6.createElement(Video, { size: 20, className: "opacity-50" })),
+      /* @__PURE__ */ React6.createElement("div", { className: "flex-1 text-left" }, /* @__PURE__ */ React6.createElement("div", { className: `font-medium ${currentId === item.id ? "text-blue-400" : "text-white"}` }, item.name), item.description && /* @__PURE__ */ React6.createElement("div", { className: "text-xs text-white/50 truncate" }, item.description)),
+      currentId === item.id && /* @__PURE__ */ React6.createElement(Check, { size: 16, className: "text-blue-400" })
+    )));
+  };
+  const renderOptionGroup = (title, icon, type, list = [], currentVal) => {
+    if (!list || list.length === 0) return null;
+    return /* @__PURE__ */ React6.createElement("div", { className: "mb-6" }, /* @__PURE__ */ React6.createElement("div", { className: "mb-3 flex items-center gap-2 text-sm font-medium text-white/70" }, icon, /* @__PURE__ */ React6.createElement("span", null, title)), /* @__PURE__ */ React6.createElement("div", { className: "grid grid-cols-2 gap-2 sm:grid-cols-3" }, list.map((opt) => /* @__PURE__ */ React6.createElement(
+      "button",
+      {
+        key: opt.id,
+        onClick: () => onSelectOption?.(type, opt.id),
+        className: `relative flex flex-col items-center gap-2 rounded-lg p-2 text-center transition-all ${currentVal === opt.id ? "bg-blue-500/20 ring-1 ring-blue-500" : "bg-white/5 hover:bg-white/10"}`
       },
-      className: `w-full rounded px-3 py-2 text-left text-sm transition-all ${selectedStageModelId === stageModel.id ? "bg-purple-600 text-white font-medium" : "text-white/80 hover:bg-white/10"}`
-    },
-    stageModel.name
-  )))), resourceOptions.backgrounds && resourceOptions.backgrounds.length > 0 && /* @__PURE__ */ React2.createElement("div", { className: "rounded-lg bg-white/5 overflow-hidden" }, /* @__PURE__ */ React2.createElement(
-    "button",
-    {
-      onClick: () => setExpandedSection(expandedSection === "background" ? null : "background"),
-      className: "w-full flex items-center justify-between px-3 py-2.5 text-left hover:bg-white/10 transition-colors"
-    },
-    /* @__PURE__ */ React2.createElement("div", { className: "flex items-center gap-2" }, /* @__PURE__ */ React2.createElement("span", { className: "text-xs font-medium text-white/70" }, "\u80CC\u666F"), /* @__PURE__ */ React2.createElement("span", { className: "text-sm text-white font-medium" }, selectedBackgroundId ? resourceOptions.backgrounds.find((b) => b.id === selectedBackgroundId)?.name : "\u65E0")),
-    /* @__PURE__ */ React2.createElement("span", { className: `text-white/60 transition-transform ${expandedSection === "background" ? "rotate-180" : ""}` }, "\u25BC")
-  ), expandedSection === "background" && /* @__PURE__ */ React2.createElement("div", { className: "border-t border-white/10 p-2 space-y-1 max-h-60 overflow-y-auto" }, /* @__PURE__ */ React2.createElement(
+      opt.thumbnail ? /* @__PURE__ */ React6.createElement("img", { src: opt.thumbnail, alt: opt.name, className: "h-16 w-full rounded object-cover bg-black/20" }) : /* @__PURE__ */ React6.createElement("div", { className: "flex h-16 w-full items-center justify-center rounded bg-black/20" }, /* @__PURE__ */ React6.createElement("div", { className: "text-xs opacity-30" }, opt.name.slice(0, 2))),
+      /* @__PURE__ */ React6.createElement("div", { className: `w-full truncate text-xs ${currentVal === opt.id ? "text-blue-400" : "text-white/80"}` }, opt.name),
+      currentVal === opt.id && /* @__PURE__ */ React6.createElement("div", { className: "absolute top-1 right-1 rounded-full bg-blue-500 p-0.5" }, /* @__PURE__ */ React6.createElement(Check, { size: 10, className: "text-white" }))
+    ))));
+  };
+  const renderOptionsMode = () => {
+    if (!options) return null;
+    return /* @__PURE__ */ React6.createElement("div", { className: "p-4" }, renderOptionGroup("\u6A21\u578B", /* @__PURE__ */ React6.createElement(User, { size: 16 }), "models", options.models, currentSelection?.modelId), renderOptionGroup("\u52A8\u4F5C", /* @__PURE__ */ React6.createElement(Video, { size: 16 }), "motions", options.motions, currentSelection?.motionId), renderOptionGroup("\u955C\u5934", /* @__PURE__ */ React6.createElement(Image, { size: 16 }), "cameras", options.cameras, currentSelection?.cameraId), renderOptionGroup("\u97F3\u9891", /* @__PURE__ */ React6.createElement(Music, { size: 16 }), "audios", options.audios, currentSelection?.audioId), renderOptionGroup("\u821E\u53F0", /* @__PURE__ */ React6.createElement(Image, { size: 16 }), "stages", options.stages, currentSelection?.stageId));
+  };
+  return /* @__PURE__ */ React6.createElement("div", { className: "absolute right-0 top-0 h-full w-full max-w-sm transform bg-[#1a1a1e]/95 backdrop-blur-md shadow-2xl transition-transform duration-300 ease-in-out overflow-y-auto z-20 border-l border-white/10" }, /* @__PURE__ */ React6.createElement("div", { className: "sticky top-0 z-10 flex items-center justify-between border-b border-white/10 bg-[#1a1a1e]/95 p-4 backdrop-blur-md" }, /* @__PURE__ */ React6.createElement("h2", { className: "text-lg font-semibold text-white" }, mode === "list" ? "\u64AD\u653E\u5217\u8868" : "\u81EA\u5B9A\u4E49\u573A\u666F"), /* @__PURE__ */ React6.createElement(
     "button",
     {
-      onClick: () => {
-        handleSelectionChange("background", "");
-        setExpandedSection(null);
-      },
-      className: `w-full rounded px-3 py-2 text-left text-sm transition-all ${selectedBackgroundId === "" ? "bg-purple-600 text-white font-medium" : "text-white/80 hover:bg-white/10"}`
+      onClick: onClose,
+      className: "rounded-full p-2 text-white/50 hover:bg-white/10 hover:text-white"
     },
-    "\u65E0"
-  ), resourceOptions.backgrounds.map((background) => /* @__PURE__ */ React2.createElement(
-    "button",
+    /* @__PURE__ */ React6.createElement(X, { size: 20 })
+  )), /* @__PURE__ */ React6.createElement("div", { className: "pb-20" }, mode === "list" ? renderListMode() : renderOptionsMode()));
+};
+var MMDPlayerEnhancedDebugInfo = ({
+  isPlaying,
+  isLooping,
+  isFullscreen,
+  showAxes,
+  isLoading,
+  currentResourceId,
+  currentResourceName,
+  mode,
+  totalResources
+}) => {
+  const [memoryInfo, setMemoryInfo] = useState(null);
+  useEffect(() => {
+    const timer = setInterval(() => {
+      if (performance.memory) {
+        const used = (performance.memory.usedJSHeapSize / 1048576).toFixed(1);
+        const total = (performance.memory.totalJSHeapSize / 1048576).toFixed(1);
+        const limit = (performance.memory.jsHeapSizeLimit / 1048576).toFixed(1);
+        setMemoryInfo({ used, total, limit });
+      }
+    }, 1e3);
+    return () => clearInterval(timer);
+  }, []);
+  return /* @__PURE__ */ React6.createElement("div", { className: "text-white text-xs font-mono" }, /* @__PURE__ */ React6.createElement("h3", { className: "text-sm font-bold mb-3 pb-2 border-b border-gray-700" }, "\u{1F3AE} MMDPlayerEnhanced Debug"), /* @__PURE__ */ React6.createElement("div", { className: "mb-4" }, /* @__PURE__ */ React6.createElement("h4", { className: "text-gray-400 mb-2" }, "\u64AD\u653E\u72B6\u6001"), /* @__PURE__ */ React6.createElement("div", { className: "space-y-1 pl-2" }, /* @__PURE__ */ React6.createElement("div", { className: "flex items-center justify-between" }, /* @__PURE__ */ React6.createElement("span", { className: "text-gray-400" }, "\u64AD\u653E\u4E2D:"), /* @__PURE__ */ React6.createElement(StatusBadge, { active: isPlaying, label: isPlaying ? "Playing" : "Paused" })), /* @__PURE__ */ React6.createElement("div", { className: "flex items-center justify-between" }, /* @__PURE__ */ React6.createElement("span", { className: "text-gray-400" }, "\u5FAA\u73AF:"), /* @__PURE__ */ React6.createElement(StatusBadge, { active: isLooping, label: isLooping ? "On" : "Off" })), /* @__PURE__ */ React6.createElement("div", { className: "flex items-center justify-between" }, /* @__PURE__ */ React6.createElement("span", { className: "text-gray-400" }, "\u52A0\u8F7D\u4E2D:"), /* @__PURE__ */ React6.createElement(StatusBadge, { active: isLoading, label: isLoading ? "Loading" : "Ready" })))), /* @__PURE__ */ React6.createElement("div", { className: "mb-4" }, /* @__PURE__ */ React6.createElement("h4", { className: "text-gray-400 mb-2" }, "\u89C6\u56FE\u72B6\u6001"), /* @__PURE__ */ React6.createElement("div", { className: "space-y-1 pl-2" }, /* @__PURE__ */ React6.createElement("div", { className: "flex items-center justify-between" }, /* @__PURE__ */ React6.createElement("span", { className: "text-gray-400" }, "\u5168\u5C4F:"), /* @__PURE__ */ React6.createElement(StatusBadge, { active: isFullscreen, label: isFullscreen ? "Yes" : "No" })), /* @__PURE__ */ React6.createElement("div", { className: "flex items-center justify-between" }, /* @__PURE__ */ React6.createElement("span", { className: "text-gray-400" }, "\u5750\u6807\u8F74:"), /* @__PURE__ */ React6.createElement(StatusBadge, { active: showAxes, label: showAxes ? "Show" : "Hide" })))), /* @__PURE__ */ React6.createElement("div", { className: "mb-4" }, /* @__PURE__ */ React6.createElement("h4", { className: "text-gray-400 mb-2" }, "\u8D44\u6E90\u4FE1\u606F"), /* @__PURE__ */ React6.createElement("div", { className: "space-y-1 pl-2" }, /* @__PURE__ */ React6.createElement("div", { className: "flex items-center justify-between" }, /* @__PURE__ */ React6.createElement("span", { className: "text-gray-400" }, "\u6A21\u5F0F:"), /* @__PURE__ */ React6.createElement("span", { className: "text-blue-400 uppercase" }, mode)), mode === "list" && /* @__PURE__ */ React6.createElement(React6.Fragment, null, /* @__PURE__ */ React6.createElement("div", { className: "flex items-center justify-between" }, /* @__PURE__ */ React6.createElement("span", { className: "text-gray-400" }, "\u603B\u6570:"), /* @__PURE__ */ React6.createElement("span", { className: "text-green-400" }, totalResources)), currentResourceId && /* @__PURE__ */ React6.createElement("div", { className: "mt-2 p-2 bg-gray-800 rounded" }, /* @__PURE__ */ React6.createElement("div", { className: "text-gray-400 text-[10px]" }, "\u5F53\u524D\u8D44\u6E90"), /* @__PURE__ */ React6.createElement("div", { className: "text-white truncate" }, currentResourceName || currentResourceId), /* @__PURE__ */ React6.createElement("div", { className: "text-gray-500 text-[10px] mt-1 truncate" }, "ID: ", currentResourceId))))), memoryInfo && /* @__PURE__ */ React6.createElement("div", { className: "mb-4" }, /* @__PURE__ */ React6.createElement("h4", { className: "text-gray-400 mb-2" }, "\u5185\u5B58\u76D1\u63A7 (Chrome only)"), /* @__PURE__ */ React6.createElement("div", { className: "space-y-2 p-2 bg-gray-800 rounded" }, /* @__PURE__ */ React6.createElement("div", { className: "flex items-center justify-between text-[10px]" }, /* @__PURE__ */ React6.createElement("span", { className: "text-gray-400" }, "\u5DF2\u7528:"), /* @__PURE__ */ React6.createElement("span", { className: "text-yellow-400 font-bold" }, memoryInfo.used, " MB")), /* @__PURE__ */ React6.createElement("div", { className: "flex items-center justify-between text-[10px]" }, /* @__PURE__ */ React6.createElement("span", { className: "text-gray-400" }, "\u603B\u8BA1:"), /* @__PURE__ */ React6.createElement("span", { className: "text-blue-400" }, memoryInfo.total, " MB")), /* @__PURE__ */ React6.createElement("div", { className: "flex items-center justify-between text-[10px]" }, /* @__PURE__ */ React6.createElement("span", { className: "text-gray-400" }, "\u9650\u5236:"), /* @__PURE__ */ React6.createElement("span", { className: "text-gray-400" }, memoryInfo.limit, " MB")), /* @__PURE__ */ React6.createElement("div", { className: "mt-2" }, /* @__PURE__ */ React6.createElement("div", { className: "bg-gray-700 rounded-full h-2 overflow-hidden" }, /* @__PURE__ */ React6.createElement(
+    "div",
     {
-      key: background.id,
-      onClick: () => {
-        handleSelectionChange("background", background.id);
-        setExpandedSection(null);
-      },
-      className: `w-full rounded px-3 py-2 text-left text-sm transition-all ${selectedBackgroundId === background.id ? "bg-purple-600 text-white font-medium" : "text-white/80 hover:bg-white/10"}`
-    },
-    background.name
-  )))))));
+      className: `h-full transition-all duration-300 ${parseFloat(memoryInfo.used) / parseFloat(memoryInfo.limit) * 100 > 80 ? "bg-red-500" : parseFloat(memoryInfo.used) / parseFloat(memoryInfo.limit) * 100 > 60 ? "bg-yellow-500" : "bg-green-500"}`,
+      style: {
+        width: `${Math.min(100, parseFloat(memoryInfo.used) / parseFloat(memoryInfo.limit) * 100)}%`
+      }
+    }
+  )), /* @__PURE__ */ React6.createElement("div", { className: "text-[9px] text-gray-500 mt-1 text-center" }, (parseFloat(memoryInfo.used) / parseFloat(memoryInfo.limit) * 100).toFixed(1), "%")))), /* @__PURE__ */ React6.createElement("div", { className: "mt-auto pt-4 border-t border-gray-700" }, /* @__PURE__ */ React6.createElement("div", { className: "text-gray-500 text-[10px]" }, "Last Update: ", (/* @__PURE__ */ new Date()).toLocaleTimeString())));
 };
-var MMDPlaylist = ({
-  playlist,
+var StatusBadge = ({ active, label }) => /* @__PURE__ */ React6.createElement(
+  "span",
+  {
+    className: `px-2 py-0.5 rounded text-[10px] font-bold ${active ? "bg-green-600 text-white" : "bg-gray-700 text-gray-400"}`
+  },
+  label
+);
+
+// src/mmd/components/MMDPlayerEnhanced.tsx
+var MMDPlayerEnhanced = ({
+  resources: propResources,
+  resourcesList,
+  resourceOptions,
+  defaultResourceId,
+  defaultSelection,
   stage,
-  defaultNodeIndex = 0,
+  autoPlay = false,
+  loop = true,
+  volume: initialVolume = 1,
+  muted: initialMuted = false,
+  mobileOptimization,
+  showDebugInfo = false,
   className,
   style,
   onLoad,
-  onError,
-  onNodeChange,
-  onPlaylistComplete
+  onPlay,
+  onPause,
+  onEnded,
+  ...rest
 }) => {
-  console.log("\u{1F3AC} [MMDPlaylist] \u7EC4\u4EF6\u521D\u59CB\u5316");
-  console.log("\u{1F4CB} [MMDPlaylist] \u64AD\u653E\u5217\u8868:", playlist.name, "\u8282\u70B9\u6570:", playlist.nodes.length);
-  const [currentNodeIndex, setCurrentNodeIndex] = useState(defaultNodeIndex);
+  const mode = resourcesList ? "list" : resourceOptions ? "options" : "single";
+  const [currentResources, setCurrentResources] = useState(propResources);
+  const [currentId, setCurrentId] = useState(defaultResourceId);
+  const [selection, setSelection] = useState(defaultSelection || {});
+  const [isPlaying, setIsPlaying] = useState(autoPlay);
+  const [volume, setVolume] = useState(initialVolume);
+  const [isMuted, setIsMuted] = useState(initialMuted);
+  const [isLoading, setIsLoading] = useState(true);
+  const [isFullscreen, setIsFullscreen] = useState(false);
   const [showSettings, setShowSettings] = useState(false);
-  const [preloadedNodes, setPreloadedNodes] = useState(/* @__PURE__ */ new Set());
-  const [isPreloading, setIsPreloading] = useState(true);
-  const [preloadProgress, setPreloadProgress] = useState(0);
-  const [editableNodes, setEditableNodes] = useState(playlist.nodes);
-  const currentNodeIndexRef = useRef(defaultNodeIndex);
-  const isAutoSwitchRef = useRef(false);
-  const playerRefsMap = useRef(/* @__PURE__ */ new Map());
+  const [showAxes, setShowAxes] = useState(false);
+  const [isLooping, setIsLooping] = useState(loop);
+  const playerRef = useRef(null);
+  const containerRef = useRef(null);
   useEffect(() => {
-    currentNodeIndexRef.current = currentNodeIndex;
-  }, [currentNodeIndex]);
-  const currentNode = editableNodes[currentNodeIndex];
-  if (!currentNode) {
-    console.error("\u274C [MMDPlaylist] \u65E0\u6548\u7684\u8282\u70B9\u7D22\u5F15:", currentNodeIndex);
-    return /* @__PURE__ */ React2.createElement("div", { className: "flex h-full w-full items-center justify-center bg-black text-white" }, /* @__PURE__ */ React2.createElement("p", null, "\u64AD\u653E\u5217\u8868\u8282\u70B9\u7D22\u5F15\u65E0\u6548"));
-  }
-  console.log("\u{1F3AF} [MMDPlaylist] \u5F53\u524D\u8282\u70B9:", currentNode.name, "\u7D22\u5F15:", currentNodeIndex);
-  const stopNode = (nodeIndex) => {
-    const playerElement = playerRefsMap.current.get(nodeIndex);
-    if (!playerElement) return;
-    console.log(`\u23F9\uFE0F [MMDPlaylist] \u505C\u6B62\u8282\u70B9 ${nodeIndex}`);
-    const audioElement = playerElement.querySelector("audio");
-    if (audioElement) {
-      audioElement.pause();
-      audioElement.currentTime = 0;
-      console.log(`  \u{1F507} \u505C\u6B62\u97F3\u9891`);
-    }
-    const stopButton = playerElement.querySelector('button[title="\u505C\u6B62"]');
-    if (stopButton) {
-      stopButton.click();
-      console.log(`  \u23F9\uFE0F \u70B9\u51FB\u505C\u6B62\u6309\u94AE`);
-    } else {
-      const pauseButton = playerElement.querySelector('button[title="\u6682\u505C"]');
-      if (pauseButton) {
-        pauseButton.click();
-        console.log(`  \u23F8\uFE0F \u70B9\u51FB\u6682\u505C\u6309\u94AE`);
+    if (mode === "list" && resourcesList) {
+      const targetId = currentId || resourcesList[0]?.id;
+      const item = resourcesList.find((i) => i.id === targetId);
+      if (item) {
+        setCurrentResources(item.resources);
+        setCurrentId(item.id);
       }
-    }
-  };
-  useEffect(() => {
-    console.log(`\u{1F504} [MMDPlaylist] \u8282\u70B9\u5207\u6362: ${currentNodeIndex} - ${currentNode.name}`);
-    editableNodes.forEach((_, index) => {
-      if (index !== currentNodeIndex) {
-        stopNode(index);
+    } else if (mode === "options" && resourceOptions) {
+      const res = { modelPath: "" };
+      if (selection.modelId) {
+        const m = resourceOptions.models.find((o) => o.id === selection.modelId);
+        if (m) res.modelPath = m.path;
+      } else if (resourceOptions.models.length > 0) {
+        const firstModel = resourceOptions.models[0];
+        if (firstModel) {
+          res.modelPath = firstModel.path;
+          setSelection((s) => ({ ...s, modelId: firstModel.id }));
+        }
       }
-    });
-    onNodeChange?.(currentNodeIndex, currentNode);
-    if (!isPreloading && (isAutoSwitchRef.current || playlist.autoPlay)) {
-      console.log(`\u25B6\uFE0F [MMDPlaylist] \u51C6\u5907\u64AD\u653E\u8282\u70B9 ${currentNodeIndex}`);
-      if (!preloadedNodes.has(currentNodeIndex)) {
-        console.warn(`\u26A0\uFE0F [MMDPlaylist] \u8282\u70B9 ${currentNodeIndex} \u5C1A\u672A\u9884\u52A0\u8F7D\u5B8C\u6210\uFF0C\u7B49\u5F85...`);
-        return;
+      if (selection.motionId) {
+        const m = resourceOptions.motions.find((o) => o.id === selection.motionId);
+        if (m) res.motionPath = m.path;
       }
-      requestAnimationFrame(() => {
-        const playerElement = playerRefsMap.current.get(currentNodeIndex);
-        if (playerElement) {
-          const playButton = playerElement.querySelector('button[title="\u64AD\u653E"]');
-          if (playButton) {
-            console.log(`\u{1F3AC} [MMDPlaylist] \u89E6\u53D1\u8282\u70B9 ${currentNodeIndex} \u64AD\u653E`);
-            playButton.click();
-          } else {
-            console.warn(`\u26A0\uFE0F [MMDPlaylist] \u672A\u627E\u5230\u8282\u70B9 ${currentNodeIndex} \u7684\u64AD\u653E\u6309\u94AE`);
-          }
-        } else {
-          console.warn(`\u26A0\uFE0F [MMDPlaylist] \u672A\u627E\u5230\u8282\u70B9 ${currentNodeIndex} \u7684 DOM \u5143\u7D20`);
-        }
+      if (selection.cameraId) {
+        const c = resourceOptions.cameras?.find((o) => o.id === selection.cameraId);
+        if (c) res.cameraPath = c.path;
+      }
+      if (selection.audioId) {
+        const a = resourceOptions.audios?.find((o) => o.id === selection.audioId);
+        if (a) res.audioPath = a.path;
+      }
+      if (selection.stageId) {
+        const s = resourceOptions.stages?.find((o) => o.id === selection.stageId);
+        if (s) res.stageModelPath = s.path;
+      }
+      setCurrentResources(res);
+    } else {
+      setCurrentResources(propResources);
+    }
+  }, [mode, resourcesList, resourceOptions, currentId, selection, propResources]);
+  const toggleFullscreen = useCallback(() => {
+    if (!containerRef.current) return;
+    if (!document.fullscreenElement) {
+      containerRef.current.requestFullscreen().catch((err) => {
+        console.error(`Error attempting to enable fullscreen: ${err.message}`);
       });
+      setIsFullscreen(true);
+    } else {
+      document.exitFullscreen();
+      setIsFullscreen(false);
     }
-  }, [currentNodeIndex, currentNode, onNodeChange, isPreloading, playlist.autoPlay, preloadedNodes, editableNodes]);
-  const handleNodePreloaded = (nodeIndex) => {
-    console.log(`\u2705 [MMDPlaylist] \u8282\u70B9 ${nodeIndex} \u9884\u52A0\u8F7D\u5B8C\u6210`);
-    setPreloadedNodes((prev) => {
-      const newSet = new Set(prev);
-      newSet.add(nodeIndex);
-      return newSet;
-    });
-  };
+  }, []);
   useEffect(() => {
-    if (preloadedNodes.size === editableNodes.length) {
-      console.log("\u{1F389} [MMDPlaylist] \u6240\u6709\u8282\u70B9\u9884\u52A0\u8F7D\u5B8C\u6210");
-      setIsPreloading(false);
-      onLoad?.();
+    const handleFsChange = () => {
+      setIsFullscreen(!!document.fullscreenElement);
+    };
+    document.addEventListener("fullscreenchange", handleFsChange);
+    return () => document.removeEventListener("fullscreenchange", handleFsChange);
+  }, []);
+  const handlePlayPause = () => {
+    if (isPlaying) {
+      playerRef.current?.pause();
     } else {
-      const progress = Math.round(preloadedNodes.size / editableNodes.length * 100);
-      setPreloadProgress(progress);
-    }
-  }, [preloadedNodes, editableNodes.length, onLoad]);
-  const handlePlaybackEnded = (nodeIndex) => {
-    console.log(`\u{1F3B5} [MMDPlaylist] \u8282\u70B9 ${nodeIndex} \u64AD\u653E\u5B8C\u6210`);
-    if (nodeIndex !== currentNodeIndexRef.current) {
-      console.log(`\u26A0\uFE0F [MMDPlaylist] \u5FFD\u7565\u975E\u5F53\u524D\u8282\u70B9 ${nodeIndex} \u7684\u64AD\u653E\u7ED3\u675F\u4E8B\u4EF6\uFF08\u5F53\u524D: ${currentNodeIndexRef.current}\uFF09`);
-      return;
-    }
-    const node = editableNodes[nodeIndex];
-    if (!node) return;
-    if (node.loop) {
-      console.log("\u{1F501} [MMDPlaylist] \u5F53\u524D\u8282\u70B9\u5FAA\u73AF\u64AD\u653E");
-      return;
-    }
-    const isLastNode = nodeIndex === editableNodes.length - 1;
-    if (!isLastNode) {
-      console.log(`\u27A1\uFE0F [MMDPlaylist] \u5207\u6362\u5230\u4E0B\u4E00\u4E2A\u8282\u70B9: ${nodeIndex + 1}`);
-      isAutoSwitchRef.current = true;
-      setCurrentNodeIndex(nodeIndex + 1);
-      return;
-    }
-    if (playlist.loop) {
-      console.log("\u{1F501} [MMDPlaylist] \u64AD\u653E\u5217\u8868\u5FAA\u73AF\uFF0C\u56DE\u5230\u7B2C\u4E00\u4E2A\u8282\u70B9");
-      isAutoSwitchRef.current = true;
-      setCurrentNodeIndex(0);
-      return;
+      playerRef.current?.play();
     }
-    console.log("\u2705 [MMDPlaylist] \u64AD\u653E\u5217\u8868\u64AD\u653E\u5B8C\u6210");
-    onPlaylistComplete?.();
+    setIsPlaying(!isPlaying);
   };
-  const playlistPrevious = () => {
-    const newIndex = currentNodeIndex > 0 ? currentNodeIndex - 1 : editableNodes.length - 1;
-    console.log(`\u2B05\uFE0F [MMDPlaylist] \u4E0A\u4E00\u4E2A\u8282\u70B9: ${newIndex}`);
-    isAutoSwitchRef.current = false;
-    setCurrentNodeIndex(newIndex);
-  };
-  const playlistNext = () => {
-    const newIndex = currentNodeIndex < editableNodes.length - 1 ? currentNodeIndex + 1 : 0;
-    console.log(`\u27A1\uFE0F [MMDPlaylist] \u4E0B\u4E00\u4E2A\u8282\u70B9: ${newIndex}`);
-    isAutoSwitchRef.current = false;
-    setCurrentNodeIndex(newIndex);
-  };
-  const playlistJumpTo = (index) => {
-    if (index < 0 || index >= editableNodes.length) return;
-    console.log(`\u{1F3AF} [MMDPlaylist] \u8DF3\u8F6C\u5230\u8282\u70B9: ${index}`);
-    isAutoSwitchRef.current = false;
-    setCurrentNodeIndex(index);
-  };
-  const handleDeleteNode = (index) => {
-    if (editableNodes.length <= 1) {
-      alert("\u64AD\u653E\u5217\u8868\u81F3\u5C11\u9700\u8981\u4FDD\u7559\u4E00\u4E2A\u8282\u70B9");
-      return;
-    }
-    const newNodes = editableNodes.filter((_, i) => i !== index);
-    setEditableNodes(newNodes);
-    if (index < currentNodeIndex) {
-      setCurrentNodeIndex(currentNodeIndex - 1);
-    } else if (index === currentNodeIndex) {
-      const newIndex = Math.max(0, currentNodeIndex - 1);
-      setCurrentNodeIndex(newIndex);
-    }
-    console.log(`\u{1F5D1}\uFE0F [MMDPlaylist] \u5220\u9664\u8282\u70B9 ${index}`);
-  };
-  const handleMoveNodeUp = (index) => {
-    if (index === 0) return;
-    const newNodes = [...editableNodes];
-    const temp = newNodes[index - 1];
-    newNodes[index - 1] = newNodes[index];
-    newNodes[index] = temp;
-    setEditableNodes(newNodes);
-    if (currentNodeIndex === index) {
-      setCurrentNodeIndex(index - 1);
-    } else if (currentNodeIndex === index - 1) {
-      setCurrentNodeIndex(index);
-    }
-    console.log(`\u2B06\uFE0F [MMDPlaylist] \u8282\u70B9 ${index} \u4E0A\u79FB`);
+  const handleListSelect = (id) => {
+    setCurrentId(id);
+    setIsPlaying(true);
+    setShowSettings(false);
   };
-  const handleMoveNodeDown = (index) => {
-    if (index === editableNodes.length - 1) return;
-    const newNodes = [...editableNodes];
-    const temp = newNodes[index];
-    newNodes[index] = newNodes[index + 1];
-    newNodes[index + 1] = temp;
-    setEditableNodes(newNodes);
-    if (currentNodeIndex === index) {
-      setCurrentNodeIndex(index + 1);
-    } else if (currentNodeIndex === index + 1) {
-      setCurrentNodeIndex(index);
-    }
-    console.log(`\u2B07\uFE0F [MMDPlaylist] \u8282\u70B9 ${index} \u4E0B\u79FB`);
+  const handleOptionSelect = (type, id) => {
+    setSelection((prev) => {
+      const next = { ...prev };
+      if (type === "models") next.modelId = id;
+      if (type === "motions") next.motionId = id;
+      if (type === "cameras") next.cameraId = id;
+      if (type === "audios") next.audioId = id;
+      if (type === "stages") next.stageId = id;
+      return next;
+    });
   };
-  const shouldAutoPlayInitial = playlist.autoPlay && currentNodeIndex === defaultNodeIndex && !isPreloading;
-  return /* @__PURE__ */ React2.createElement("div", { className: `relative ${className || ""}`, style }, editableNodes.map((node, index) => {
-    return /* @__PURE__ */ React2.createElement(
-      "div",
+  if (!currentResources) {
+    return /* @__PURE__ */ React6.createElement("div", { className: "flex h-full w-full items-center justify-center bg-black text-white" }, "No Resources Configured");
+  }
+  return /* @__PURE__ */ React6.createElement(
+    "div",
+    {
+      ref: containerRef,
+      className: `relative overflow-hidden bg-black group flex ${className}`,
+      style
+    },
+    /* @__PURE__ */ React6.createElement("div", { className: "flex-1 relative" }, /* @__PURE__ */ React6.createElement(
+      MMDPlayerBase,
       {
-        key: `player-${node.id}-${index}`,
-        ref: (el) => {
-          if (el) {
-            playerRefsMap.current.set(index, el);
-          }
+        key: mode === "list" ? currentId : JSON.stringify(currentResources),
+        ref: playerRef,
+        resources: currentResources,
+        stage,
+        autoPlay,
+        loop: isLooping,
+        volume,
+        muted: isMuted,
+        showAxes,
+        mobileOptimization,
+        onLoad: () => {
+          setIsLoading(false);
+          onLoad?.();
+          if (isPlaying) playerRef.current?.play();
         },
-        className: "absolute inset-0",
-        style: {
-          visibility: index === currentNodeIndex ? "visible" : "hidden",
-          zIndex: index === currentNodeIndex ? 1 : 0
-        }
-      },
-      /* @__PURE__ */ React2.createElement(
-        MMDPlayerEnhanced,
-        {
-          resources: node.resources,
-          stage,
-          autoPlay: index === currentNodeIndex && shouldAutoPlayInitial,
-          loop: node.loop || false,
-          className: "h-full w-full",
-          onLoad: () => {
-            handleNodePreloaded(index);
-          },
-          onError: (error) => {
-            console.error(`\u274C [MMDPlaylist] \u8282\u70B9 ${index} \u52A0\u8F7D\u5931\u8D25:`, error);
-            if (index === currentNodeIndex) {
-              onError?.(error);
-            }
-          },
-          onAudioEnded: () => handlePlaybackEnded(index),
-          onAnimationEnded: () => handlePlaybackEnded(index)
-        }
-      )
-    );
-  }), isPreloading && /* @__PURE__ */ React2.createElement("div", { className: "absolute inset-0 z-50 flex flex-col items-center justify-center bg-black/80 backdrop-blur-sm" }, /* @__PURE__ */ React2.createElement("div", { className: "text-center" }, /* @__PURE__ */ React2.createElement("div", { className: "mb-4 text-2xl font-bold text-white" }, "\u6B63\u5728\u9884\u52A0\u8F7D\u64AD\u653E\u5217\u8868"), /* @__PURE__ */ React2.createElement("div", { className: "mb-2 text-lg text-white/80" }, preloadedNodes.size, " / ", editableNodes.length, " \u8282\u70B9"), /* @__PURE__ */ React2.createElement("div", { className: "h-2 w-64 overflow-hidden rounded-full bg-white/20" }, /* @__PURE__ */ React2.createElement(
+        onPlay: () => {
+          setIsPlaying(true);
+          onPlay?.();
+        },
+        onPause: () => {
+          setIsPlaying(false);
+          onPause?.();
+        },
+        onEnded: () => {
+          setIsPlaying(false);
+          onEnded?.();
+        },
+        ...rest
+      }
+    ), isLoading && /* @__PURE__ */ React6.createElement("div", { className: "absolute inset-0 z-10 flex items-center justify-center bg-black/50 backdrop-blur-sm" }, /* @__PURE__ */ React6.createElement("div", { className: "h-10 w-10 animate-spin rounded-full border-4 border-white/20 border-t-blue-500" })), /* @__PURE__ */ React6.createElement("div", { className: `transition-opacity duration-300 ${isPlaying && !showSettings ? "opacity-0 group-hover:opacity-100" : "opacity-100"}` }, /* @__PURE__ */ React6.createElement(
+      ControlPanel,
+      {
+        isPlaying,
+        isFullscreen,
+        isLooping,
+        showSettings: mode !== "single",
+        showAxes,
+        title: mode === "list" ? resourcesList?.find((i) => i.id === currentId)?.name : void 0,
+        onPlayPause: handlePlayPause,
+        onToggleFullscreen: toggleFullscreen,
+        onToggleLoop: () => setIsLooping(!isLooping),
+        onToggleAxes: () => setShowAxes(!showAxes),
+        onOpenSettings: () => setShowSettings(true)
+      }
+    )), showSettings && (mode === "list" || mode === "options") && /* @__PURE__ */ React6.createElement(
+      SettingsPanel,
+      {
+        mode,
+        items: resourcesList,
+        currentId,
+        onSelectId: handleListSelect,
+        options: resourceOptions,
+        currentSelection: selection,
+        onSelectOption: handleOptionSelect,
+        onClose: () => setShowSettings(false)
+      }
+    )),
+    showDebugInfo && /* @__PURE__ */ React6.createElement("div", { className: "w-96 bg-gray-900/95 border-l border-gray-700 p-4 overflow-y-auto" }, /* @__PURE__ */ React6.createElement(
+      MMDPlayerEnhancedDebugInfo,
+      {
+        isPlaying,
+        isLooping,
+        isFullscreen,
+        showAxes,
+        isLoading,
+        currentResourceId: currentId,
+        currentResourceName: mode === "list" ? resourcesList?.find((i) => i.id === currentId)?.name : void 0,
+        mode,
+        totalResources: resourcesList?.length || 1
+      }
+    ))
+  );
+};
+var MMDPlaylistDebugInfo = ({
+  playlistName,
+  currentIndex,
+  currentNode,
+  totalNodes,
+  isPlaying,
+  isListLooping,
+  isNodeLooping,
+  preloadStrategy,
+  isLoading,
+  isFullscreen,
+  showAxes,
+  preloadedNodes
+}) => {
+  const [memoryInfo, setMemoryInfo] = useState(null);
+  useEffect(() => {
+    const timer = setInterval(() => {
+      if (performance.memory) {
+        const used = (performance.memory.usedJSHeapSize / 1048576).toFixed(1);
+        const total = (performance.memory.totalJSHeapSize / 1048576).toFixed(1);
+        const limit = (performance.memory.jsHeapSizeLimit / 1048576).toFixed(1);
+        setMemoryInfo({ used, total, limit });
+      }
+    }, 1e3);
+    return () => clearInterval(timer);
+  }, []);
+  return /* @__PURE__ */ React6.createElement("div", { className: "text-white text-xs font-mono" }, /* @__PURE__ */ React6.createElement("h3", { className: "text-sm font-bold mb-3 pb-2 border-b border-gray-700" }, "\u{1F3AD} MMDPlaylist Debug"), /* @__PURE__ */ React6.createElement("div", { className: "mb-4" }, /* @__PURE__ */ React6.createElement("h4", { className: "text-gray-400 mb-2" }, "\u64AD\u653E\u5217\u8868"), /* @__PURE__ */ React6.createElement("div", { className: "space-y-1 pl-2" }, /* @__PURE__ */ React6.createElement("div", { className: "text-white truncate" }, playlistName), /* @__PURE__ */ React6.createElement("div", { className: "flex items-center justify-between" }, /* @__PURE__ */ React6.createElement("span", { className: "text-gray-400" }, "\u8FDB\u5EA6:"), /* @__PURE__ */ React6.createElement("span", { className: "text-blue-400" }, currentIndex + 1, " / ", totalNodes)), /* @__PURE__ */ React6.createElement("div", { className: "flex items-center justify-between" }, /* @__PURE__ */ React6.createElement("span", { className: "text-gray-400" }, "\u5217\u8868\u5FAA\u73AF:"), /* @__PURE__ */ React6.createElement(StatusBadge2, { active: isListLooping, label: isListLooping ? "On" : "Off" })))), /* @__PURE__ */ React6.createElement("div", { className: "mb-4" }, /* @__PURE__ */ React6.createElement("h4", { className: "text-gray-400 mb-2" }, "\u5F53\u524D\u8282\u70B9"), /* @__PURE__ */ React6.createElement("div", { className: "p-2 bg-gray-800 rounded space-y-1" }, /* @__PURE__ */ React6.createElement("div", { className: "text-white font-semibold truncate" }, currentNode.name), /* @__PURE__ */ React6.createElement("div", { className: "text-gray-500 text-[10px] truncate" }, "ID: ", currentNode.id), currentNode.duration && /* @__PURE__ */ React6.createElement("div", { className: "flex items-center justify-between" }, /* @__PURE__ */ React6.createElement("span", { className: "text-gray-400" }, "\u65F6\u957F:"), /* @__PURE__ */ React6.createElement("span", { className: "text-green-400" }, currentNode.duration, "s")), /* @__PURE__ */ React6.createElement("div", { className: "flex items-center justify-between" }, /* @__PURE__ */ React6.createElement("span", { className: "text-gray-400" }, "\u8282\u70B9\u5FAA\u73AF:"), /* @__PURE__ */ React6.createElement(StatusBadge2, { active: isNodeLooping, label: isNodeLooping ? "On" : "Off" })))), /* @__PURE__ */ React6.createElement("div", { className: "mb-4" }, /* @__PURE__ */ React6.createElement("h4", { className: "text-gray-400 mb-2" }, "\u64AD\u653E\u72B6\u6001"), /* @__PURE__ */ React6.createElement("div", { className: "space-y-1 pl-2" }, /* @__PURE__ */ React6.createElement("div", { className: "flex items-center justify-between" }, /* @__PURE__ */ React6.createElement("span", { className: "text-gray-400" }, "\u64AD\u653E\u4E2D:"), /* @__PURE__ */ React6.createElement(StatusBadge2, { active: isPlaying, label: isPlaying ? "Playing" : "Paused" })), /* @__PURE__ */ React6.createElement("div", { className: "flex items-center justify-between" }, /* @__PURE__ */ React6.createElement("span", { className: "text-gray-400" }, "\u52A0\u8F7D\u4E2D:"), /* @__PURE__ */ React6.createElement(StatusBadge2, { active: isLoading, label: isLoading ? "Loading" : "Ready" })))), /* @__PURE__ */ React6.createElement("div", { className: "mb-4" }, /* @__PURE__ */ React6.createElement("h4", { className: "text-gray-400 mb-2" }, "\u9884\u52A0\u8F7D\u7B56\u7565"), /* @__PURE__ */ React6.createElement("div", { className: "space-y-1 pl-2" }, /* @__PURE__ */ React6.createElement("div", { className: "flex items-center justify-between" }, /* @__PURE__ */ React6.createElement("span", { className: "text-gray-400" }, "\u7B56\u7565:"), /* @__PURE__ */ React6.createElement("span", { className: `px-2 py-0.5 rounded text-[10px] font-bold uppercase ${preloadStrategy === "all" ? "bg-red-600 text-white" : preloadStrategy === "next" ? "bg-yellow-600 text-white" : "bg-gray-700 text-gray-400"}` }, preloadStrategy)), /* @__PURE__ */ React6.createElement("div", { className: "flex items-center justify-between" }, /* @__PURE__ */ React6.createElement("span", { className: "text-gray-400" }, "\u5DF2\u9884\u52A0\u8F7D:"), /* @__PURE__ */ React6.createElement("span", { className: "text-purple-400" }, preloadedNodes.length)), preloadedNodes.length > 0 && /* @__PURE__ */ React6.createElement("div", { className: "mt-2 p-2 bg-gray-800 rounded" }, /* @__PURE__ */ React6.createElement("div", { className: "text-gray-400 text-[10px] mb-1" }, "\u9884\u52A0\u8F7D\u8282\u70B9\u7D22\u5F15"), /* @__PURE__ */ React6.createElement("div", { className: "flex flex-wrap gap-1" }, preloadedNodes.map((idx) => /* @__PURE__ */ React6.createElement(
+    "span",
+    {
+      key: idx,
+      className: `px-1.5 py-0.5 rounded text-[10px] ${idx === currentIndex ? "bg-green-600 text-white font-bold" : "bg-gray-700 text-gray-300"}`
+    },
+    idx
+  )))))), /* @__PURE__ */ React6.createElement("div", { className: "mb-4" }, /* @__PURE__ */ React6.createElement("h4", { className: "text-gray-400 mb-2" }, "\u89C6\u56FE\u72B6\u6001"), /* @__PURE__ */ React6.createElement("div", { className: "space-y-1 pl-2" }, /* @__PURE__ */ React6.createElement("div", { className: "flex items-center justify-between" }, /* @__PURE__ */ React6.createElement("span", { className: "text-gray-400" }, "\u5168\u5C4F:"), /* @__PURE__ */ React6.createElement(StatusBadge2, { active: isFullscreen, label: isFullscreen ? "Yes" : "No" })), /* @__PURE__ */ React6.createElement("div", { className: "flex items-center justify-between" }, /* @__PURE__ */ React6.createElement("span", { className: "text-gray-400" }, "\u5750\u6807\u8F74:"), /* @__PURE__ */ React6.createElement(StatusBadge2, { active: showAxes, label: showAxes ? "Show" : "Hide" })))), memoryInfo && /* @__PURE__ */ React6.createElement("div", { className: "mb-4" }, /* @__PURE__ */ React6.createElement("h4", { className: "text-gray-400 mb-2" }, "\u5185\u5B58\u76D1\u63A7 (Chrome only)"), /* @__PURE__ */ React6.createElement("div", { className: "space-y-2 p-2 bg-gray-800 rounded" }, /* @__PURE__ */ React6.createElement("div", { className: "flex items-center justify-between text-[10px]" }, /* @__PURE__ */ React6.createElement("span", { className: "text-gray-400" }, "\u5DF2\u7528:"), /* @__PURE__ */ React6.createElement("span", { className: "text-yellow-400 font-bold" }, memoryInfo.used, " MB")), /* @__PURE__ */ React6.createElement("div", { className: "flex items-center justify-between text-[10px]" }, /* @__PURE__ */ React6.createElement("span", { className: "text-gray-400" }, "\u603B\u8BA1:"), /* @__PURE__ */ React6.createElement("span", { className: "text-blue-400" }, memoryInfo.total, " MB")), /* @__PURE__ */ React6.createElement("div", { className: "flex items-center justify-between text-[10px]" }, /* @__PURE__ */ React6.createElement("span", { className: "text-gray-400" }, "\u9650\u5236:"), /* @__PURE__ */ React6.createElement("span", { className: "text-gray-400" }, memoryInfo.limit, " MB")), /* @__PURE__ */ React6.createElement("div", { className: "mt-2" }, /* @__PURE__ */ React6.createElement("div", { className: "bg-gray-700 rounded-full h-2 overflow-hidden" }, /* @__PURE__ */ React6.createElement(
     "div",
     {
-      className: "h-full bg-gradient-to-r from-purple-500 to-blue-500 transition-all duration-300",
-      style: { width: `${preloadProgress}%` }
+      className: `h-full transition-all duration-300 ${parseFloat(memoryInfo.used) / parseFloat(memoryInfo.limit) * 100 > 80 ? "bg-red-500" : parseFloat(memoryInfo.used) / parseFloat(memoryInfo.limit) * 100 > 60 ? "bg-yellow-500" : "bg-green-500"}`,
+      style: {
+        width: `${Math.min(100, parseFloat(memoryInfo.used) / parseFloat(memoryInfo.limit) * 100)}%`
+      }
     }
-  )), /* @__PURE__ */ React2.createElement("div", { className: "mt-4 text-sm text-white/60" }, "\u9884\u52A0\u8F7D\u6240\u6709\u8D44\u6E90\u540E\uFF0C\u5207\u6362\u8282\u70B9\u5C06\u65E0\u9700\u7B49\u5F85"))), !isPreloading && /* @__PURE__ */ React2.createElement("div", { className: "absolute bottom-4 right-4 z-10 flex gap-2" }, editableNodes.length > 1 && /* @__PURE__ */ React2.createElement(
-    "button",
-    {
-      onClick: playlistPrevious,
-      className: "flex h-12 w-12 items-center justify-center rounded-full bg-blue-500/90 text-xl text-white shadow-lg backdrop-blur-md transition-all hover:bg-blue-600 hover:scale-110",
-      title: "\u4E0A\u4E00\u4E2A\u8282\u70B9"
-    },
-    "\u23EE\uFE0F"
-  ), /* @__PURE__ */ React2.createElement(
-    "button",
+  )), /* @__PURE__ */ React6.createElement("div", { className: "text-[9px] text-gray-500 mt-1 text-center" }, (parseFloat(memoryInfo.used) / parseFloat(memoryInfo.limit) * 100).toFixed(1), "%")))), /* @__PURE__ */ React6.createElement("div", { className: "mb-4" }, /* @__PURE__ */ React6.createElement("h4", { className: "text-gray-400 mb-2" }, "\u8282\u70B9\u5217\u8868"), /* @__PURE__ */ React6.createElement("div", { className: "space-y-1 max-h-40 overflow-y-auto" }, Array.from({ length: totalNodes }).map((_, idx) => /* @__PURE__ */ React6.createElement(
+    "div",
     {
-      onClick: () => setShowSettings(true),
-      className: "flex h-12 w-12 items-center justify-center rounded-full bg-purple-500/90 text-xl text-white shadow-lg backdrop-blur-md transition-all hover:bg-purple-600 hover:scale-110",
-      title: "\u64AD\u653E\u5217\u8868\u8BBE\u7F6E"
+      key: idx,
+      className: `px-2 py-1 rounded text-[10px] flex items-center justify-between ${idx === currentIndex ? "bg-blue-600 text-white font-bold" : preloadedNodes.includes(idx) ? "bg-yellow-900/50 text-yellow-300" : "bg-gray-800 text-gray-400"}`
     },
-    "\u2699\uFE0F"
-  ), editableNodes.length > 1 && /* @__PURE__ */ React2.createElement(
-    "button",
-    {
-      onClick: playlistNext,
-      className: "flex h-12 w-12 items-center justify-center rounded-full bg-blue-500/90 text-xl text-white shadow-lg backdrop-blur-md transition-all hover:bg-blue-600 hover:scale-110",
-      title: "\u4E0B\u4E00\u4E2A\u8282\u70B9"
+    /* @__PURE__ */ React6.createElement("span", null, "\u8282\u70B9 ", idx),
+    idx === currentIndex && /* @__PURE__ */ React6.createElement("span", null, "\u25B6"),
+    preloadedNodes.includes(idx) && idx !== currentIndex && /* @__PURE__ */ React6.createElement("span", null, "\u23F3")
+  )))), /* @__PURE__ */ React6.createElement("div", { className: "mt-auto pt-4 border-t border-gray-700" }, /* @__PURE__ */ React6.createElement("div", { className: "text-gray-500 text-[10px]" }, "Last Update: ", (/* @__PURE__ */ new Date()).toLocaleTimeString())));
+};
+var StatusBadge2 = ({ active, label }) => /* @__PURE__ */ React6.createElement(
+  "span",
+  {
+    className: `px-2 py-0.5 rounded text-[10px] font-bold ${active ? "bg-green-600 text-white" : "bg-gray-700 text-gray-400"}`
+  },
+  label
+);
+
+// src/mmd/components/MMDPlaylist.tsx
+var MMDPlaylist = ({
+  playlist,
+  stage,
+  mobileOptimization,
+  onNodeChange,
+  onPlaylistComplete,
+  onError,
+  showDebugInfo = false,
+  className,
+  style
+}) => {
+  const { nodes, loop = false, preload = "none", autoPlay = false } = playlist;
+  const [currentIndex, setCurrentIndex] = useState(0);
+  const [isPlaying, setIsPlaying] = useState(autoPlay);
+  const [isLoading, setIsLoading] = useState(true);
+  const [isFullscreen, setIsFullscreen] = useState(false);
+  const [showAxes, setShowAxes] = useState(false);
+  const [isLooping, setIsLooping] = useState(false);
+  const [isListLooping, setIsListLooping] = useState(loop);
+  const [showPlaylist, setShowPlaylist] = useState(false);
+  const [isTransitioning, setIsTransitioning] = useState(false);
+  const playerRef = useRef(null);
+  const containerRef = useRef(null);
+  const preloadedRef = useRef(/* @__PURE__ */ new Set());
+  const currentNode = nodes[currentIndex];
+  const goToNode = useCallback(
+    (index) => {
+      if (index < 0 || index >= nodes.length) return;
+      if (isTransitioning) return;
+      const node = nodes[index];
+      if (!node) return;
+      console.log(`[MMDPlaylist] Starting transition to node ${index}`);
+      const wasPlaying = isPlaying;
+      setIsPlaying(false);
+      setIsTransitioning(true);
+      requestAnimationFrame(() => {
+        requestAnimationFrame(() => {
+          setTimeout(() => {
+            console.log(`[MMDPlaylist] Loading new node ${index}`);
+            setCurrentIndex(index);
+            setIsLoading(true);
+            onNodeChange?.(node, index);
+            requestAnimationFrame(() => {
+              requestAnimationFrame(() => {
+                setTimeout(() => {
+                  setIsTransitioning(false);
+                  if (wasPlaying) {
+                    setIsPlaying(true);
+                  }
+                  console.log(`[MMDPlaylist] Transition to node ${index} completed`);
+                }, 100);
+              });
+            });
+          }, 300);
+        });
+      });
     },
-    "\u23ED\uFE0F"
-  )), !isPreloading && /* @__PURE__ */ React2.createElement("div", { className: "absolute left-4 top-4 z-10 rounded-lg bg-black/50 px-4 py-2 backdrop-blur-md" }, /* @__PURE__ */ React2.createElement("div", { className: "flex items-center gap-2" }, /* @__PURE__ */ React2.createElement("span", { className: "text-sm font-bold text-white/60" }, currentNodeIndex + 1, "/", editableNodes.length), /* @__PURE__ */ React2.createElement("span", { className: "text-sm font-medium text-white" }, currentNode.name), currentNode.loop && /* @__PURE__ */ React2.createElement("span", { className: "rounded bg-white/20 px-2 py-0.5 text-xs text-white" }, "\u{1F501}"))), showSettings && /* @__PURE__ */ React2.createElement(
+    [nodes, isPlaying, isTransitioning, onNodeChange]
+  );
+  const handlePrevious = useCallback(() => {
+    const prevIndex = currentIndex - 1;
+    if (prevIndex >= 0) {
+      goToNode(prevIndex);
+    } else if (isListLooping) {
+      goToNode(nodes.length - 1);
+    }
+  }, [currentIndex, isListLooping, nodes.length, goToNode]);
+  const handleNext = useCallback(() => {
+    const nextIndex = currentIndex + 1;
+    if (nextIndex < nodes.length) {
+      goToNode(nextIndex);
+    } else if (isListLooping) {
+      goToNode(0);
+    } else {
+      setIsPlaying(false);
+      onPlaylistComplete?.();
+    }
+  }, [currentIndex, isListLooping, nodes.length, goToNode, onPlaylistComplete]);
+  const handlePlayPause = useCallback(() => {
+    if (isPlaying) {
+      playerRef.current?.pause();
+      setIsPlaying(false);
+    } else {
+      playerRef.current?.play();
+      setIsPlaying(true);
+    }
+  }, [isPlaying]);
+  const toggleFullscreen = useCallback(() => {
+    if (!containerRef.current) return;
+    if (!document.fullscreenElement) {
+      containerRef.current.requestFullscreen().catch((err) => {
+        console.error(`Error attempting to enable fullscreen: ${err.message}`);
+      });
+      setIsFullscreen(true);
+    } else {
+      document.exitFullscreen();
+      setIsFullscreen(false);
+    }
+  }, []);
+  useEffect(() => {
+    const handleFsChange = () => {
+      setIsFullscreen(!!document.fullscreenElement);
+    };
+    document.addEventListener("fullscreenchange", handleFsChange);
+    return () => document.removeEventListener("fullscreenchange", handleFsChange);
+  }, []);
+  const handleEnded = useCallback(() => {
+    if (isLooping) {
+      playerRef.current?.play();
+    } else {
+      handleNext();
+    }
+  }, [isLooping, handleNext]);
+  useEffect(() => {
+    if (preload === "none") return;
+    if (preload === "all") {
+      nodes.forEach((node, idx) => {
+        if (!preloadedRef.current.has(idx)) {
+          preloadedRef.current.add(idx);
+          console.log(`[MMDPlaylist] Preload strategy: all - marked node ${idx} (${node.name})`);
+        }
+      });
+    } else if (preload === "next") {
+      const nextIndex = (currentIndex + 1) % nodes.length;
+      const nextNode = nodes[nextIndex];
+      if (nextNode && !preloadedRef.current.has(nextIndex)) {
+        preloadedRef.current.add(nextIndex);
+        console.log(`[MMDPlaylist] Preload strategy: next - marked node ${nextIndex} (${nextNode.name})`);
+      }
+    }
+  }, [currentIndex, nodes, preload]);
+  useEffect(() => {
+    if (preload === "none" || preload === "all") return;
+    if (nodes.length === 0) return;
+    const nextIndex = (currentIndex + 1) % nodes.length;
+    const keepIndices = /* @__PURE__ */ new Set([currentIndex, nextIndex]);
+    const toRemove = [];
+    preloadedRef.current.forEach((idx) => {
+      if (idx >= nodes.length || !keepIndices.has(idx)) {
+        toRemove.push(idx);
+      }
+    });
+    if (toRemove.length > 0) {
+      toRemove.forEach((idx) => {
+        preloadedRef.current.delete(idx);
+        console.log(`[MMDPlaylist] Memory cleanup: removed preload mark for node ${idx}`);
+      });
+    }
+  }, [currentIndex, nodes.length, preload]);
+  useEffect(() => {
+    return () => {
+      console.log("[MMDPlaylist] Component unmounted, clearing all preload marks");
+      preloadedRef.current.clear();
+    };
+  }, []);
+  if (!currentNode) {
+    return /* @__PURE__ */ React6.createElement("div", { className: "flex h-full w-full items-center justify-center bg-black text-white" }, "\u64AD\u653E\u5217\u8868\u4E3A\u7A7A");
+  }
+  const showPrevNext = nodes.length > 1;
+  return /* @__PURE__ */ React6.createElement(
     "div",
     {
-      className: "absolute inset-0 z-[100] flex items-start justify-end bg-black/40",
-      onClick: () => setShowSettings(false)
+      ref: containerRef,
+      className: `relative overflow-hidden bg-black group flex h-full ${className}`,
+      style
     },
-    /* @__PURE__ */ React2.createElement(
+    /* @__PURE__ */ React6.createElement("div", { className: "flex-1 relative" }, !isTransitioning && /* @__PURE__ */ React6.createElement(
+      MMDPlayerBase,
+      {
+        key: currentNode.id,
+        ref: playerRef,
+        resources: currentNode.resources,
+        stage,
+        autoPlay: autoPlay && currentIndex === 0,
+        loop: isLooping,
+        showAxes,
+        mobileOptimization,
+        onLoad: () => {
+          setIsLoading(false);
+          if (isPlaying && currentIndex > 0) {
+            playerRef.current?.play();
+          }
+        },
+        onPlay: () => setIsPlaying(true),
+        onPause: () => setIsPlaying(false),
+        onEnded: handleEnded,
+        onError
+      }
+    ), (isLoading || isTransitioning) && /* @__PURE__ */ React6.createElement("div", { className: "absolute inset-0 z-10 flex items-center justify-center bg-black/50 backdrop-blur-sm" }, /* @__PURE__ */ React6.createElement("div", { className: "flex flex-col items-center gap-3" }, /* @__PURE__ */ React6.createElement("div", { className: "h-10 w-10 animate-spin rounded-full border-4 border-white/20 border-t-blue-500" }), /* @__PURE__ */ React6.createElement("div", { className: "text-sm text-white/80" }, isTransitioning ? "\u5207\u6362\u4E2D..." : `\u6B63\u5728\u52A0\u8F7D ${currentIndex + 1} / ${nodes.length}`))), /* @__PURE__ */ React6.createElement(
       "div",
       {
-        className: "relative m-4 flex w-full max-w-md flex-col overflow-hidden rounded-xl bg-gradient-to-br from-gray-900 to-black shadow-2xl border border-white/20",
-        style: { maxHeight: "calc(100vh - 2rem)" },
-        onClick: (e) => e.stopPropagation()
+        className: `transition-opacity duration-300 ${isPlaying && !showPlaylist ? "opacity-0 group-hover:opacity-100" : "opacity-100"}`
       },
-      /* @__PURE__ */ React2.createElement("div", { className: "flex items-center justify-between border-b border-white/10 bg-gradient-to-r from-purple-900/50 to-blue-900/50 px-4 py-3 flex-shrink-0" }, /* @__PURE__ */ React2.createElement("h3", { className: "flex items-center gap-2 text-base font-bold text-white" }, "\u2699\uFE0F \u64AD\u653E\u5217\u8868\u914D\u7F6E"), /* @__PURE__ */ React2.createElement(
-        "button",
+      /* @__PURE__ */ React6.createElement(
+        ControlPanel,
         {
-          onClick: () => setShowSettings(false),
-          className: "text-xl text-white/60 transition-colors hover:text-white"
+          isPlaying,
+          isFullscreen,
+          isLooping,
+          isListLooping,
+          showSettings: true,
+          showAxes,
+          showPrevNext,
+          title: currentNode.name,
+          subtitle: `${currentIndex + 1} / ${nodes.length}`,
+          onPlayPause: handlePlayPause,
+          onPrevious: handlePrevious,
+          onNext: handleNext,
+          onToggleFullscreen: toggleFullscreen,
+          onToggleLoop: () => setIsLooping(!isLooping),
+          onToggleListLoop: () => setIsListLooping(!isListLooping),
+          onToggleAxes: () => setShowAxes(!showAxes),
+          onOpenSettings: () => setShowPlaylist(!showPlaylist)
+        }
+      )
+    ), showPlaylist && /* @__PURE__ */ React6.createElement("div", { className: "absolute inset-0 z-20 flex items-end bg-black/80 backdrop-blur-sm" }, /* @__PURE__ */ React6.createElement("div", { className: "w-full max-h-[60vh] overflow-y-auto bg-gray-900/95 rounded-t-xl" }, /* @__PURE__ */ React6.createElement("div", { className: "sticky top-0 flex items-center justify-between bg-gray-800 px-4 py-3 border-b border-gray-700" }, /* @__PURE__ */ React6.createElement("div", null, /* @__PURE__ */ React6.createElement("h3", { className: "text-white font-semibold" }, playlist.name), /* @__PURE__ */ React6.createElement("p", { className: "text-xs text-gray-400 mt-0.5" }, "\u5171 ", nodes.length, " \u4E2A\u8282\u70B9")), /* @__PURE__ */ React6.createElement(
+      "button",
+      {
+        onClick: () => setShowPlaylist(false),
+        className: "p-2 hover:bg-white/10 rounded-lg transition-colors",
+        "aria-label": "\u5173\u95ED\u64AD\u653E\u5217\u8868"
+      },
+      /* @__PURE__ */ React6.createElement("svg", { className: "w-5 h-5 text-white", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor" }, /* @__PURE__ */ React6.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }))
+    )), /* @__PURE__ */ React6.createElement("div", { className: "p-2" }, nodes.map((node, index) => /* @__PURE__ */ React6.createElement(
+      "button",
+      {
+        key: node.id,
+        onClick: () => {
+          goToNode(index);
+          setShowPlaylist(false);
         },
-        "\u2715"
-      )),
-      /* @__PURE__ */ React2.createElement("div", { className: "flex-1 overflow-y-auto p-4", style: { scrollbarWidth: "thin", scrollbarColor: "rgba(255,255,255,0.2) transparent" } }, /* @__PURE__ */ React2.createElement("div", { className: "mb-3 rounded-lg bg-gradient-to-br from-indigo-900/30 to-purple-900/30 p-3 border border-white/10" }, /* @__PURE__ */ React2.createElement("h4", { className: "text-sm font-semibold text-white mb-2 flex items-center gap-2" }, "\u{1F4CB} \u64AD\u653E\u5217\u8868"), /* @__PURE__ */ React2.createElement("div", { className: "space-y-1 text-xs" }, /* @__PURE__ */ React2.createElement("div", { className: "flex justify-between" }, /* @__PURE__ */ React2.createElement("span", { className: "text-white/60" }, "\u540D\u79F0\uFF1A"), /* @__PURE__ */ React2.createElement("span", { className: "text-white font-medium" }, playlist.name)), /* @__PURE__ */ React2.createElement("div", { className: "flex justify-between" }, /* @__PURE__ */ React2.createElement("span", { className: "text-white/60" }, "\u8282\u70B9\u6570\uFF1A"), /* @__PURE__ */ React2.createElement("span", { className: "text-white font-medium" }, editableNodes.length)), /* @__PURE__ */ React2.createElement("div", { className: "flex justify-between" }, /* @__PURE__ */ React2.createElement("span", { className: "text-white/60" }, "\u5FAA\u73AF\uFF1A"), /* @__PURE__ */ React2.createElement("span", { className: "text-white font-medium" }, playlist.loop ? "\u662F" : "\u5426")))), /* @__PURE__ */ React2.createElement("div", { className: "mb-3 rounded-lg bg-gradient-to-br from-blue-900/30 to-cyan-900/30 p-3 border border-white/10" }, /* @__PURE__ */ React2.createElement("h4", { className: "text-sm font-semibold text-white mb-2 flex items-center gap-2" }, "\u{1F3AF} \u5F53\u524D\u8282\u70B9"), /* @__PURE__ */ React2.createElement("div", { className: "space-y-1 text-xs" }, /* @__PURE__ */ React2.createElement("div", { className: "flex justify-between items-center" }, /* @__PURE__ */ React2.createElement("span", { className: "text-white/60" }, "\u540D\u79F0\uFF1A"), /* @__PURE__ */ React2.createElement("span", { className: "text-white font-medium truncate ml-2" }, currentNode.name)), /* @__PURE__ */ React2.createElement("div", { className: "flex justify-between" }, /* @__PURE__ */ React2.createElement("span", { className: "text-white/60" }, "\u4F4D\u7F6E\uFF1A"), /* @__PURE__ */ React2.createElement("span", { className: "text-white font-medium" }, currentNodeIndex + 1, " / ", editableNodes.length)), currentNode.resources.audioPath && /* @__PURE__ */ React2.createElement("div", { className: "text-white/80 mt-1" }, "\u{1F3B5} \u6709\u97F3\u4E50"), currentNode.resources.cameraPath && /* @__PURE__ */ React2.createElement("div", { className: "text-white/80" }, "\u{1F4F7} \u6709\u76F8\u673A"))), /* @__PURE__ */ React2.createElement("div", { className: "rounded-lg bg-gradient-to-br from-gray-800/50 to-gray-900/50 border border-white/10 p-3" }, /* @__PURE__ */ React2.createElement("h4", { className: "mb-2 flex items-center gap-2 text-sm font-semibold text-white" }, "\u{1F4DD} \u8282\u70B9\u7BA1\u7406"), /* @__PURE__ */ React2.createElement("div", { className: "max-h-64 space-y-2 overflow-y-auto pr-1", style: { scrollbarWidth: "thin", scrollbarColor: "rgba(255,255,255,0.2) transparent" } }, editableNodes.map((node, index) => /* @__PURE__ */ React2.createElement(
+        className: `w-full flex items-center gap-3 p-3 rounded-lg mb-2 transition-all ${index === currentIndex ? "bg-blue-600 text-white" : "bg-gray-800 text-gray-300 hover:bg-gray-700"}`
+      },
+      /* @__PURE__ */ React6.createElement(
         "div",
         {
-          key: `${node.id}-${index}`,
-          className: `rounded-md p-2 transition-all text-xs ${currentNodeIndex === index ? "bg-gradient-to-r from-purple-600/50 to-blue-600/50 border border-purple-400/50" : "bg-white/5 hover:bg-white/10 border border-white/10"}`
+          className: `flex-shrink-0 w-8 h-8 rounded-full flex items-center justify-center text-sm font-semibold ${index === currentIndex ? "bg-white/20" : "bg-gray-700"}`
         },
-        /* @__PURE__ */ React2.createElement("div", { className: "flex items-start justify-between gap-2" }, /* @__PURE__ */ React2.createElement("div", { className: "flex-1 min-w-0" }, /* @__PURE__ */ React2.createElement("div", { className: "flex items-center gap-1 mb-1" }, /* @__PURE__ */ React2.createElement("span", { className: "text-xs font-bold text-white/40" }, "#", index + 1), /* @__PURE__ */ React2.createElement("h5", { className: "font-semibold text-white text-xs truncate" }, node.name), currentNodeIndex === index && /* @__PURE__ */ React2.createElement("span", { className: "rounded bg-green-500/30 px-1 py-0.5 text-[10px] text-green-300 flex-shrink-0" }, "\u25B6\uFE0F")), /* @__PURE__ */ React2.createElement("div", { className: "flex flex-wrap gap-1 text-[10px] text-white/60" }, node.resources.modelPath && /* @__PURE__ */ React2.createElement("span", null, "\u{1F464}"), node.resources.motionPath && /* @__PURE__ */ React2.createElement("span", null, "\u{1F483}"), node.resources.audioPath && /* @__PURE__ */ React2.createElement("span", null, "\u{1F3B5}"), node.resources.cameraPath && /* @__PURE__ */ React2.createElement("span", null, "\u{1F4F7}"))), /* @__PURE__ */ React2.createElement("div", { className: "flex flex-col gap-0.5 flex-shrink-0" }, index > 0 && /* @__PURE__ */ React2.createElement(
-          "button",
-          {
-            onClick: () => handleMoveNodeUp(index),
-            className: "p-0.5 rounded bg-white/10 hover:bg-white/20 text-white text-[10px] transition-colors",
-            title: "\u4E0A\u79FB"
-          },
-          "\u2B06\uFE0F"
-        ), index < editableNodes.length - 1 && /* @__PURE__ */ React2.createElement(
-          "button",
-          {
-            onClick: () => handleMoveNodeDown(index),
-            className: "p-0.5 rounded bg-white/10 hover:bg-white/20 text-white text-[10px] transition-colors",
-            title: "\u4E0B\u79FB"
-          },
-          "\u2B07\uFE0F"
-        ), /* @__PURE__ */ React2.createElement(
-          "button",
-          {
-            onClick: () => playlistJumpTo(index),
-            className: "p-0.5 rounded bg-blue-500/30 hover:bg-blue-500/50 text-white text-[10px] transition-colors",
-            title: "\u8DF3\u8F6C"
-          },
-          "\u25B6\uFE0F"
-        ), /* @__PURE__ */ React2.createElement(
-          "button",
-          {
-            onClick: () => {
-              if (confirm(`\u786E\u5B9A\u5220\u9664 "${node.name}"\uFF1F`)) {
-                handleDeleteNode(index);
-              }
-            },
-            className: "p-0.5 rounded bg-red-500/30 hover:bg-red-500/50 text-white text-[10px] transition-colors",
-            title: "\u5220\u9664"
-          },
-          "\u{1F5D1}\uFE0F"
-        )))
-      )))))
-    )
-  ));
-};
-
-// src/mmd/presets.ts
-var defaultMMDPreset = {
-  id: "default",
-  name: "\u9ED8\u8BA4\u6A21\u578B",
-  summary: "\u4EC5\u5C55\u793A\u6A21\u578B\uFF0C\u65E0\u52A8\u4F5C\u548C\u97F3\u9891",
-  badges: ["\u6A21\u578B", "\u9759\u6001"],
-  resources: {
-    modelPath: "/mikutalking/models/YYB_Z6SakuraMiku/miku.pmx"
-  },
-  stage: {
-    backgroundColor: "#000000",
-    cameraPosition: { x: 0, y: 10, z: 30 },
-    cameraTarget: { x: 0, y: 10, z: 0 },
-    enablePhysics: true,
-    showGrid: true,
-    ammoPath: "/mikutalking/libs/ammo.wasm.js",
-    ammoWasmPath: "/mikutalking/libs/"
-  }
-};
-var catchTheWavePreset = {
-  id: "catch-the-wave",
-  name: "Catch The Wave",
-  summary: "\u5B8C\u6574\u7684MMD\u8868\u6F14\uFF1A\u6A21\u578B\u3001\u52A8\u4F5C\u3001\u76F8\u673A\u8FD0\u955C\u3001\u97F3\u9891\u540C\u6B65",
-  badges: ["\u6A21\u578B", "\u52A8\u4F5C", "\u76F8\u673A", "\u97F3\u9891"],
-  resources: {
-    modelPath: "/mikutalking/models/YYB_Z6SakuraMiku/miku.pmx",
-    motionPath: "/mikutalking/actions/CatchTheWave/mmd_CatchTheWave_motion.vmd",
-    cameraPath: "/mikutalking/actions/CatchTheWave/camera.vmd",
-    audioPath: "/mikutalking/actions/CatchTheWave/pv_268.wav"
-  },
-  stage: {
-    backgroundColor: "#01030b",
-    cameraPosition: { x: 0, y: 10, z: 30 },
-    cameraTarget: { x: 0, y: 10, z: 0 },
-    enablePhysics: true,
-    showGrid: false,
-    ammoPath: "/mikutalking/libs/ammo.wasm.js",
-    ammoWasmPath: "/mikutalking/libs/"
-  }
-};
-var simpleModelPreset = {
-  id: "simple-model",
-  name: "\u7B80\u5355\u6A21\u578B",
-  summary: "\u8F7B\u91CF\u7EA7\u6D4B\u8BD5\u6A21\u578B",
-  badges: ["\u6A21\u578B", "\u8F7B\u91CF"],
-  resources: {
-    modelPath: "/mikutalking/models/test/v4c5.0.pmx"
-  },
-  stage: {
-    backgroundColor: "#ffffff",
-    cameraPosition: { x: 0, y: 10, z: 30 },
-    cameraTarget: { x: 0, y: 10, z: 0 },
-    enablePhysics: true,
-    showGrid: true,
-    ammoPath: "/mikutalking/libs/ammo.wasm.js",
-    ammoWasmPath: "/mikutalking/libs/"
-  }
+        index + 1
+      ),
+      /* @__PURE__ */ React6.createElement("div", { className: "flex-1 text-left" }, /* @__PURE__ */ React6.createElement("div", { className: "font-medium" }, node.name), node.duration && /* @__PURE__ */ React6.createElement("div", { className: "text-xs opacity-75 mt-0.5" }, Math.floor(node.duration / 60), ":", String(Math.floor(node.duration % 60)).padStart(2, "0"))),
+      index === currentIndex && /* @__PURE__ */ React6.createElement("div", { className: "flex-shrink-0" }, /* @__PURE__ */ React6.createElement("svg", { className: "w-5 h-5", fill: "currentColor", viewBox: "0 0 24 24" }, /* @__PURE__ */ React6.createElement("path", { d: "M8 5v14l11-7z" })))
+    )))))),
+    showDebugInfo && /* @__PURE__ */ React6.createElement("div", { className: "w-96 flex-shrink-0 bg-gray-900/95 border-l border-gray-700 p-4 overflow-y-auto h-full" }, /* @__PURE__ */ React6.createElement(
+      MMDPlaylistDebugInfo,
+      {
+        playlistName: playlist.name,
+        currentIndex,
+        currentNode,
+        totalNodes: nodes.length,
+        isPlaying,
+        isListLooping,
+        isNodeLooping: isLooping,
+        preloadStrategy: preload,
+        isLoading: isLoading || isTransitioning,
+        isFullscreen,
+        showAxes,
+        preloadedNodes: Array.from(preloadedRef.current)
+      }
+    ))
+  );
 };
-var availableMMDPresets = [
-  catchTheWavePreset,
-  defaultMMDPreset,
-  simpleModelPreset
-];
 
-export { MMDPlayerBase, MMDPlayerEnhanced, MMDPlaylist, availableMMDPresets, catchTheWavePreset, defaultMMDPreset, loadAmmo, simpleModelPreset };
+export { MMDPlayerBase, MMDPlayerEnhanced, MMDPlayerEnhancedDebugInfo, MMDPlaylist, MMDPlaylistDebugInfo, loadAmmo };
 //# sourceMappingURL=index.mjs.map
 //# sourceMappingURL=index.mjs.map