sa2kit 1.0.0 → 1.0.2

package/dist/mmd/index.js

@@ -0,0 +1,1535 @@
+'use strict';
+
+require('../chunk-DGUM43GV.js');
+var React2 = require('react');
+var THREE2 = require('three');
+var threeStdlib = require('three-stdlib');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var React2__default = /*#__PURE__*/_interopDefault(React2);
+var THREE2__namespace = /*#__PURE__*/_interopNamespace(THREE2);
+
+// 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) {
+    return ammoPromise;
+  }
+  if (currentConfigKey && currentConfigKey !== configKey) {
+    ammoPromise = null;
+    window.Ammo = void 0;
+  }
+  ammoPromise = new Promise((resolve, reject) => {
+    if (typeof window === "undefined") {
+      resolve();
+      return;
+    }
+    if (window.Ammo && currentConfigKey === configKey) {
+      console.log("\u2705 [Ammo] \u5DF2\u52A0\u8F7D\uFF0C\u76F4\u63A5\u4F7F\u7528");
+      resolve();
+      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.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();
+    };
+    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;
+    };
+    document.body.appendChild(script);
+  });
+  return ammoPromise;
+};
+
+// src/mmd/components/MMDPlayerBase.tsx
+var MMDPlayerBase = ({
+  modelUrl,
+  vmdUrl,
+  cameraUrl,
+  audioUrl,
+  physics = true,
+  width = "100%",
+  height = "100%",
+  onLoad,
+  onProgress,
+  onError
+}) => {
+  const containerRef = React2.useRef(null);
+  const [loading, setLoading] = React2.useState(true);
+  const [error, setError] = React2.useState(null);
+  React2.useEffect(() => {
+    if (!containerRef.current) return;
+    let scene;
+    let camera;
+    let renderer;
+    let effect;
+    let helper;
+    let clock;
+    let animationId;
+    const init = async () => {
+      try {
+        setLoading(true);
+        setError(null);
+        if (physics) {
+          await loadAmmo({
+            scriptPath: "/mikutalking/libs/ammo.wasm.js",
+            wasmBasePath: "/mikutalking/libs/"
+          });
+        }
+        const container = containerRef.current;
+        const w = container.clientWidth;
+        const h = container.clientHeight;
+        scene = new THREE2__namespace.Scene();
+        scene.background = new THREE2__namespace.Color(16777215);
+        camera = new THREE2__namespace.PerspectiveCamera(45, w / h, 1, 2e3);
+        camera.position.z = 30;
+        const ambient = new THREE2__namespace.AmbientLight(6710886);
+        scene.add(ambient);
+        const directionalLight = new THREE2__namespace.DirectionalLight(8943462);
+        directionalLight.position.set(-1, 1, 1).normalize();
+        scene.add(directionalLight);
+        renderer = new THREE2__namespace.WebGLRenderer({ antialias: true });
+        renderer.setPixelRatio(window.devicePixelRatio);
+        renderer.setSize(w, h);
+        container.appendChild(renderer.domElement);
+        effect = new threeStdlib.OutlineEffect(renderer);
+        helper = new threeStdlib.MMDAnimationHelper({
+          afterglow: 2
+        });
+        const loader = new threeStdlib.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);
+                }
+              );
+            }
+            if (audioUrl) {
+              new THREE2__namespace.AudioLoader().load(
+                audioUrl,
+                (buffer) => {
+                  const listener = new THREE2__namespace.AudioListener();
+                  camera.add(listener);
+                  const audio = new THREE2__namespace.Audio(listener);
+                  audio.setBuffer(buffer);
+                  helper.add(audio);
+                },
+                void 0,
+                (err) => {
+                  console.error("Error loading audio", err);
+                }
+              );
+            }
+            if (onLoad) onLoad();
+            setLoading(false);
+          },
+          (xhr) => {
+            if (onProgress) onProgress(xhr);
+          },
+          (err) => {
+            setError("Failed to load model");
+            if (onError) onError(err);
+            setLoading(false);
+          }
+        );
+        clock = new THREE2__namespace.Clock();
+        const animate = () => {
+          animationId = requestAnimationFrame(animate);
+          helper.update(clock.getDelta());
+          effect.render(scene, camera);
+        };
+        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);
+        }
+      }
+    };
+  }, [modelUrl, vmdUrl, cameraUrl, audioUrl, physics]);
+  return /* @__PURE__ */ React2__default.default.createElement(
+    "div",
+    {
+      ref: containerRef,
+      style: { width, height, position: "relative", overflow: "hidden" }
+    },
+    loading && /* @__PURE__ */ React2__default.default.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__default.default.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");
+  const [selectedResourceId, setSelectedResourceId] = React2.useState(
+    defaultResourceId || resourcesList?.[0]?.id || ""
+  );
+  const [selectedModelId, setSelectedModelId] = React2.useState(
+    defaultSelection?.modelId || resourceOptions?.models?.[0]?.id || ""
+  );
+  const [selectedMotionId, setSelectedMotionId] = React2.useState(
+    defaultSelection?.motionId || ""
+  );
+  const [selectedAudioId, setSelectedAudioId] = React2.useState(
+    defaultSelection?.audioId || ""
+  );
+  const [selectedCameraId, setSelectedCameraId] = React2.useState(
+    defaultSelection?.cameraId || ""
+  );
+  const [selectedStageModelId, setSelectedStageModelId] = React2.useState(
+    defaultSelection?.stageModelId || ""
+  );
+  const [selectedBackgroundId, setSelectedBackgroundId] = React2.useState(
+    defaultSelection?.backgroundId || ""
+  );
+  const [showSettings, setShowSettings] = React2.useState(false);
+  const [expandedSection, setExpandedSection] = React2.useState(null);
+  const currentResources = React2.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 = React2.useRef(null);
+  const rendererRef = React2.useRef(null);
+  const sceneRef = React2.useRef(null);
+  const cameraRef = React2.useRef(null);
+  const controlsRef = React2.useRef(null);
+  const helperRef = React2.useRef(null);
+  const clockRef = React2.useRef(new THREE2__namespace.Clock());
+  const audioRef = React2.useRef(null);
+  const animationIdRef = React2.useRef(null);
+  const isPlayingRef = React2.useRef(false);
+  const isLoadedRef = React2.useRef(false);
+  const shouldAutoPlayAfterReloadRef = React2.useRef(false);
+  const vmdDataRef = React2.useRef(null);
+  const animationDurationRef = React2.useRef(0);
+  const hasAudioRef = React2.useRef(false);
+  const animationEndedFiredRef = React2.useRef(false);
+  const lastAnimationTimeRef = React2.useRef(0);
+  const animationStoppedCountRef = React2.useRef(0);
+  const [loading, setLoading] = React2.useState(false);
+  const [loadingProgress, setLoadingProgress] = React2.useState(0);
+  const [error, setError] = React2.useState(null);
+  const [isPlaying, setIsPlaying] = React2.useState(false);
+  const [isInitialized, setIsInitialized] = React2.useState(false);
+  const [reloadTrigger, setReloadTrigger] = React2.useState(0);
+  const [needReset, setNeedReset] = React2.useState(false);
+  React2.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__namespace.Scene();
+    scene.background = new THREE2__namespace.Color(stage?.backgroundColor || "#000000");
+    sceneRef.current = scene;
+    const camera = new THREE2__namespace.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__namespace.WebGLRenderer({ antialias: true });
+    renderer.setSize(width, height);
+    renderer.setPixelRatio(window.devicePixelRatio);
+    container.appendChild(renderer.domElement);
+    rendererRef.current = renderer;
+    const ambient = new THREE2__namespace.AmbientLight(16777215, 0.6);
+    scene.add(ambient);
+    const directionalLight = new THREE2__namespace.DirectionalLight(16777215, 0.8);
+    directionalLight.position.set(1, 1, 1);
+    scene.add(directionalLight);
+    if (stage?.showGrid !== false) {
+      const gridHelper = new THREE2__namespace.PolarGridHelper(30, 10);
+      scene.add(gridHelper);
+    }
+    const controls = new threeStdlib.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();
+        helperRef.current.update(delta);
+        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 (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 = () => {
+    console.log("\u{1F9F9} [MMDPlayerEnhanced] \u5F00\u59CB\u6E05\u9664\u65E7\u8D44\u6E90");
+    if (!sceneRef.current) return;
+    if (isPlayingRef.current) {
+      isPlayingRef.current = false;
+      setIsPlaying(false);
+    }
+    if (audioRef.current) {
+      audioRef.current.pause();
+      audioRef.current.currentTime = 0;
+      audioRef.current = null;
+    }
+    if (helperRef.current) {
+      helperRef.current = 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) {
+        if (Array.isArray(obj.material)) {
+          obj.material.forEach((mat) => mat.dispose());
+        } else {
+          obj.material.dispose();
+        }
+      }
+    });
+    clockRef.current = new THREE2__namespace.Clock();
+    vmdDataRef.current = null;
+    console.log(`\u2705 [MMDPlayerEnhanced] \u5DF2\u6E05\u9664 ${objectsToRemove.length} \u4E2A\u65E7\u5BF9\u8C61`);
+  };
+  React2.useEffect(() => {
+    console.log("\u{1F4E6} [MMDPlayerEnhanced] \u8D44\u6E90\u52A0\u8F7D useEffect \u89E6\u53D1");
+    console.log("\u{1F50D} [MMDPlayerEnhanced] sceneRef.current:", sceneRef.current);
+    console.log("\u{1F50D} [MMDPlayerEnhanced] cameraRef.current:", cameraRef.current);
+    console.log("\u{1F50D} [MMDPlayerEnhanced] isLoadedRef.current:", isLoadedRef.current);
+    if (!sceneRef.current || !cameraRef.current) {
+      console.warn("\u26A0\uFE0F [MMDPlayerEnhanced] \u573A\u666F\u6216\u76F8\u673A\u672A\u521D\u59CB\u5316\uFF0C\u8DF3\u8FC7\u8D44\u6E90\u52A0\u8F7D");
+      return;
+    }
+    if (isLoadedRef.current) {
+      console.log("\u26A0\uFE0F [MMDPlayerEnhanced] \u8D44\u6E90\u5DF2\u52A0\u8F7D\uFF0C\u8DF3\u8FC7\u91CD\u590D\u52A0\u8F7D");
+      return;
+    }
+    console.log("\u2705 [MMDPlayerEnhanced] \u573A\u666F\u548C\u76F8\u673A\u5DF2\u5C31\u7EEA\uFF0C\u5F00\u59CB\u52A0\u8F7D\u8D44\u6E90");
+    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) {
+          const ammoScriptPath = stage?.ammoPath || "/mikutalking/libs/ammo.wasm.js";
+          const ammoWasmPath = stage?.ammoWasmPath || "/mikutalking/libs/";
+          console.log("\u{1F527} [MMDPlayerEnhanced] \u68C0\u6D4B\u5230\u542F\u7528\u7269\u7406\uFF0C\u5F00\u59CB\u52A0\u8F7D Ammo.js");
+          console.log("\u{1F4C2} [MMDPlayerEnhanced] Ammo \u811A\u672C\u8DEF\u5F84:", ammoScriptPath);
+          console.log("\u{1F4C2} [MMDPlayerEnhanced] Ammo WASM \u8DEF\u5F84:", ammoWasmPath);
+          setLoadingProgress(5);
+          await loadAmmo({
+            scriptPath: ammoScriptPath,
+            wasmBasePath: ammoWasmPath
+          });
+          console.log("\u2705 [MMDPlayerEnhanced] Ammo.js \u52A0\u8F7D\u5B8C\u6210");
+        }
+        const loader = new threeStdlib.MMDLoader();
+        const helper = new threeStdlib.MMDAnimationHelper();
+        helperRef.current = helper;
+        setLoadingProgress(20);
+        console.log("\u{1F3AD} \u5F00\u59CB\u52A0\u8F7D\u6A21\u578B:", currentResources.modelPath);
+        const mesh = await new Promise((resolve, reject) => {
+          loader.load(
+            currentResources.modelPath,
+            (object) => {
+              console.log("\u2705 \u6A21\u578B\u52A0\u8F7D\u6210\u529F");
+              resolve(object);
+            },
+            (progress) => {
+              if (progress.total > 0) {
+                const percent = progress.loaded / progress.total * 30 + 20;
+                setLoadingProgress(Math.min(percent, 50));
+              }
+            },
+            (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) {
+          console.log("\u{1F3F0} \u5F00\u59CB\u52A0\u8F7D\u573A\u666F\u6A21\u578B:", currentResources.stageModelPath);
+          const stageMesh = await new Promise((resolve, reject) => {
+            loader.load(
+              currentResources.stageModelPath,
+              (object) => {
+                console.log("\u2705 \u573A\u666F\u6A21\u578B\u52A0\u8F7D\u6210\u529F");
+                resolve(object);
+              },
+              void 0,
+              (error2) => {
+                console.error("\u274C \u573A\u666F\u6A21\u578B\u52A0\u8F7D\u5931\u8D25:", error2);
+                reject(error2);
+              }
+            );
+          });
+          sceneRef.current.add(stageMesh);
+        }
+        if (currentResources.backgroundPath && sceneRef.current) {
+          console.log("\u{1F5BC}\uFE0F \u5F00\u59CB\u52A0\u8F7D\u80CC\u666F\u56FE\u7247:", currentResources.backgroundPath);
+          const textureLoader = new THREE2__namespace.TextureLoader();
+          const backgroundTexture = await new Promise((resolve, reject) => {
+            textureLoader.load(
+              currentResources.backgroundPath,
+              (texture) => resolve(texture),
+              void 0,
+              (err) => reject(err)
+            );
+          });
+          backgroundTexture.colorSpace = THREE2__namespace.SRGBColorSpace;
+          if (stage?.backgroundType === "skybox") {
+            backgroundTexture.mapping = THREE2__namespace.EquirectangularReflectionMapping;
+            sceneRef.current.background = backgroundTexture;
+            sceneRef.current.environment = backgroundTexture;
+          } else if (stage?.backgroundType === "image") {
+            sceneRef.current.background = backgroundTexture;
+          } else {
+            sceneRef.current.background = backgroundTexture;
+          }
+          console.log("\u2705 \u80CC\u666F\u56FE\u7247\u52A0\u8F7D\u6210\u529F");
+        }
+        let vmd = null;
+        let cameraVmd = null;
+        if (currentResources.motionPath) {
+          setLoadingProgress(60);
+          console.log("\u{1F483} \u5F00\u59CB\u52A0\u8F7D\u52A8\u4F5C:", currentResources.motionPath);
+          vmd = await new Promise((resolve, reject) => {
+            loader.loadAnimation(
+              currentResources.motionPath,
+              mesh,
+              (vmdObject) => {
+                console.log("\u2705 \u52A8\u4F5C\u52A0\u8F7D\u6210\u529F");
+                resolve(vmdObject);
+              },
+              (progress) => {
+                if (progress.total > 0) {
+                  const percent = progress.loaded / progress.total * 20 + 60;
+                  setLoadingProgress(Math.min(percent, 80));
+                }
+              },
+              (error2) => {
+                console.error("\u274C \u52A8\u4F5C\u52A0\u8F7D\u5931\u8D25:", error2);
+                reject(error2);
+              }
+            );
+          });
+          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;
+            }
+            if (maxDuration > 0) {
+              animationDurationRef.current = maxDuration;
+              console.log("\u23F1\uFE0F \u52A8\u753B\u65F6\u957F:", maxDuration, "\u79D2");
+            } else {
+              console.warn("\u26A0\uFE0F \u65E0\u6CD5\u83B7\u53D6\u52A8\u753B\u65F6\u957F\uFF0C\u5C06\u65E0\u6CD5\u81EA\u52A8\u68C0\u6D4B\u52A8\u753B\u7ED3\u675F");
+              console.log("\u{1F4CB} VMD \u6570\u636E\u7ED3\u6784:", vmd);
+            }
+          }
+        } else {
+          helper.add(mesh, { physics: stage?.enablePhysics !== false });
+        }
+        if (currentResources.cameraPath && cameraRef.current) {
+          setLoadingProgress(80);
+          console.log("\u{1F4F7} \u5F00\u59CB\u52A0\u8F7D\u955C\u5934:", currentResources.cameraPath);
+          cameraVmd = await new Promise((resolve, reject) => {
+            loader.loadAnimation(
+              currentResources.cameraPath,
+              cameraRef.current,
+              (vmdObject) => {
+                console.log("\u2705 \u955C\u5934\u52A0\u8F7D\u6210\u529F");
+                resolve(vmdObject);
+              },
+              void 0,
+              (error2) => {
+                console.error("\u274C \u955C\u5934\u52A0\u8F7D\u5931\u8D25:", error2);
+                reject(error2);
+              }
+            );
+          });
+          helper.add(cameraRef.current, { animation: cameraVmd });
+        }
+        if (currentResources.audioPath) {
+          setLoadingProgress(90);
+          console.log("\u{1F3B5} \u5F00\u59CB\u52A0\u8F7D\u97F3\u9891:", currentResources.audioPath);
+          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, {});
+                }
+              }
+            }
+            onAudioEnded?.();
+          };
+          console.log("\u2705 \u97F3\u9891\u52A0\u8F7D\u6210\u529F");
+        }
+        setLoadingProgress(100);
+        setLoading(false);
+        vmdDataRef.current = {
+          mesh,
+          vmd,
+          cameraVmd
+        };
+        console.log("\u{1F389} \u6240\u6709\u8D44\u6E90\u52A0\u8F7D\u5B8C\u6210\uFF01");
+        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 = () => {
+    console.log("\u{1F3AC} [play] \u51FD\u6570\u88AB\u8C03\u7528\uFF0CneedReset =", needReset);
+    if (!helperRef.current) return;
+    if (needReset && vmdDataRef.current && sceneRef.current && cameraRef.current) {
+      console.log("\u{1F504} \u68C0\u6D4B\u5230\u9700\u8981\u91CD\u7F6E\uFF0C\u91CD\u65B0\u521D\u59CB\u5316 helper\uFF08\u4FDD\u7559\u6A21\u578B\uFF09");
+      const { mesh, vmd, cameraVmd } = vmdDataRef.current;
+      const newHelper = new threeStdlib.MMDAnimationHelper();
+      helperRef.current = newHelper;
+      clockRef.current = new THREE2__namespace.Clock();
+      if (vmd && typeof vmd === "object") {
+        console.log("\u{1F4E6} \u91CD\u65B0\u6DFB\u52A0\u6A21\u578B\u52A8\u753B\uFF0Cvmd:", vmd);
+        try {
+          newHelper.add(mesh, {
+            animation: vmd,
+            physics: stage?.enablePhysics !== false
+          });
+        } catch (error2) {
+          console.error("\u274C \u91CD\u65B0\u6DFB\u52A0\u6A21\u578B\u52A8\u753B\u5931\u8D25:", error2);
+          console.log("\u{1F4CB} vmd \u6570\u636E:", vmd);
+          newHelper.add(mesh, { physics: stage?.enablePhysics !== false });
+        }
+      } else {
+        newHelper.add(mesh, { physics: stage?.enablePhysics !== false });
+      }
+      if (cameraVmd && typeof cameraVmd === "object") {
+        console.log("\u{1F4F7} \u91CD\u65B0\u6DFB\u52A0\u76F8\u673A\u52A8\u753B");
+        try {
+          newHelper.add(cameraRef.current, { animation: cameraVmd });
+        } catch (error2) {
+          console.error("\u274C \u91CD\u65B0\u6DFB\u52A0\u76F8\u673A\u52A8\u753B\u5931\u8D25:", error2);
+        }
+      }
+      if (audioRef.current) {
+        audioRef.current.currentTime = 0;
+      }
+      setNeedReset(false);
+      console.log("\u2705 Helper \u91CD\u65B0\u521D\u59CB\u5316\u5B8C\u6210\uFF0C\u51C6\u5907\u4ECE\u7B2C\u4E00\u5E27\u64AD\u653E");
+    }
+    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;
+    isPlayingRef.current = false;
+    setIsPlaying(false);
+    if (audioRef.current) {
+      audioRef.current.pause();
+      audioRef.current.currentTime = 0;
+    }
+    clockRef.current.stop();
+    clockRef.current = new THREE2__namespace.Clock();
+    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);
+      }
+    }
+    setNeedReset(true);
+    console.log("\u23F9\uFE0F \u505C\u6B62\u64AD\u653E\u5E76\u91CD\u7F6E\u5230\u521D\u59CB\u72B6\u6001\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;
+    }
+    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);
+    }
+  };
+  return /* @__PURE__ */ React2__default.default.createElement("div", { className: `relative h-full w-full ${className}`, style }, /* @__PURE__ */ React2__default.default.createElement("div", { ref: containerRef, className: "h-full w-full" }), loading && /* @__PURE__ */ React2__default.default.createElement("div", { className: "absolute inset-0 flex flex-col items-center justify-center bg-black text-white" }, /* @__PURE__ */ React2__default.default.createElement("div", { className: "mb-4 text-2xl" }, "\u{1F3AD} \u52A0\u8F7DMMD\u8D44\u6E90\u4E2D..."), /* @__PURE__ */ React2__default.default.createElement("div", { className: "h-4 w-3/4 max-w-md overflow-hidden rounded-full bg-gray-700" }, /* @__PURE__ */ React2__default.default.createElement(
+    "div",
+    {
+      className: "h-full bg-gradient-to-r from-blue-500 to-purple-500 transition-all duration-300",
+      style: { width: `${loadingProgress}%` }
+    }
+  )), /* @__PURE__ */ React2__default.default.createElement("div", { className: "mt-2 text-sm text-gray-400" }, Math.round(loadingProgress), "%")), isInitialized && !loading && !error && /* @__PURE__ */ React2__default.default.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__default.default.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__default.default.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__default.default.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__default.default.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__default.default.createElement("div", { className: "absolute inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-sm" }, /* @__PURE__ */ React2__default.default.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__default.default.createElement("div", { className: "flex items-center justify-between border-b border-white/10 px-6 py-4" }, /* @__PURE__ */ React2__default.default.createElement("h3", { className: "text-xl font-bold text-white" }, "\u9009\u62E9\u8D44\u6E90"), /* @__PURE__ */ React2__default.default.createElement(
+    "button",
+    {
+      onClick: () => setShowSettings(false),
+      className: "text-2xl text-white/60 transition-colors hover:text-white"
+    },
+    "\u2715"
+  )), /* @__PURE__ */ React2__default.default.createElement("div", { className: "max-h-[60vh] overflow-y-auto p-4" }, resourcesList.map((item) => /* @__PURE__ */ React2__default.default.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__default.default.createElement("div", { className: "flex items-center justify-between" }, /* @__PURE__ */ React2__default.default.createElement("div", { className: "flex-1" }, /* @__PURE__ */ React2__default.default.createElement("h4", { className: "font-semibold text-white" }, item.name), /* @__PURE__ */ React2__default.default.createElement("div", { className: "mt-1 flex flex-wrap gap-2 text-xs text-white/60" }, item.resources.modelPath && /* @__PURE__ */ React2__default.default.createElement("span", { className: "rounded bg-white/10 px-2 py-1" }, "\u6A21\u578B"), item.resources.motionPath && /* @__PURE__ */ React2__default.default.createElement("span", { className: "rounded bg-white/10 px-2 py-1" }, "\u52A8\u4F5C"), item.resources.cameraPath && /* @__PURE__ */ React2__default.default.createElement("span", { className: "rounded bg-white/10 px-2 py-1" }, "\u76F8\u673A"), item.resources.audioPath && /* @__PURE__ */ React2__default.default.createElement("span", { className: "rounded bg-white/10 px-2 py-1" }, "\u97F3\u9891"))), selectedResourceId === item.id && /* @__PURE__ */ React2__default.default.createElement("div", { className: "ml-4 text-2xl" }, "\u2713"))
+  ))))), showSettings && resourceOptions && /* @__PURE__ */ React2__default.default.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__default.default.createElement("div", { className: "flex items-center justify-between border-b border-white/10 px-4 py-3" }, /* @__PURE__ */ React2__default.default.createElement("h3", { className: "text-sm font-bold text-white" }, "\u8D44\u6E90\u8BBE\u7F6E"), /* @__PURE__ */ React2__default.default.createElement(
+    "button",
+    {
+      onClick: () => setShowSettings(false),
+      className: "text-lg text-white/60 transition-colors hover:text-white"
+    },
+    "\u2715"
+  )), /* @__PURE__ */ React2__default.default.createElement("div", { className: "max-h-[70vh] overflow-y-auto p-4 space-y-2" }, resourceOptions.models && resourceOptions.models.length > 0 && /* @__PURE__ */ React2__default.default.createElement("div", { className: "rounded-lg bg-white/5 overflow-hidden" }, /* @__PURE__ */ React2__default.default.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__default.default.createElement("div", { className: "flex items-center gap-2" }, /* @__PURE__ */ React2__default.default.createElement("span", { className: "text-xs font-medium text-white/70" }, "\u6A21\u578B"), /* @__PURE__ */ React2__default.default.createElement("span", { className: "text-sm text-white font-medium" }, resourceOptions.models.find((m) => m.id === selectedModelId)?.name || "\u672A\u9009\u62E9")),
+    /* @__PURE__ */ React2__default.default.createElement("span", { className: `text-white/60 transition-transform ${expandedSection === "model" ? "rotate-180" : ""}` }, "\u25BC")
+  ), expandedSection === "model" && /* @__PURE__ */ React2__default.default.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__default.default.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__default.default.createElement("div", { className: "rounded-lg bg-white/5 overflow-hidden" }, /* @__PURE__ */ React2__default.default.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__default.default.createElement("div", { className: "flex items-center gap-2" }, /* @__PURE__ */ React2__default.default.createElement("span", { className: "text-xs font-medium text-white/70" }, "\u52A8\u4F5C"), /* @__PURE__ */ React2__default.default.createElement("span", { className: "text-sm text-white font-medium" }, selectedMotionId ? resourceOptions.motions.find((m) => m.id === selectedMotionId)?.name : "\u65E0")),
+    /* @__PURE__ */ React2__default.default.createElement("span", { className: `text-white/60 transition-transform ${expandedSection === "motion" ? "rotate-180" : ""}` }, "\u25BC")
+  ), expandedSection === "motion" && /* @__PURE__ */ React2__default.default.createElement("div", { className: "border-t border-white/10 p-2 space-y-1 max-h-60 overflow-y-auto" }, /* @__PURE__ */ React2__default.default.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__default.default.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"}`
+    },
+    motion.name
+  )))), resourceOptions.audios && resourceOptions.audios.length > 0 && /* @__PURE__ */ React2__default.default.createElement("div", { className: "rounded-lg bg-white/5 overflow-hidden" }, /* @__PURE__ */ React2__default.default.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"
+    },
+    /* @__PURE__ */ React2__default.default.createElement("div", { className: "flex items-center gap-2" }, /* @__PURE__ */ React2__default.default.createElement("span", { className: "text-xs font-medium text-white/70" }, "\u97F3\u4E50"), /* @__PURE__ */ React2__default.default.createElement("span", { className: "text-sm text-white font-medium" }, selectedAudioId ? resourceOptions.audios.find((a) => a.id === selectedAudioId)?.name : "\u65E0")),
+    /* @__PURE__ */ React2__default.default.createElement("span", { className: `text-white/60 transition-transform ${expandedSection === "audio" ? "rotate-180" : ""}` }, "\u25BC")
+  ), expandedSection === "audio" && /* @__PURE__ */ React2__default.default.createElement("div", { className: "border-t border-white/10 p-2 space-y-1 max-h-60 overflow-y-auto" }, /* @__PURE__ */ React2__default.default.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"}`
+    },
+    "\u65E0"
+  ), resourceOptions.audios.map((audio) => /* @__PURE__ */ React2__default.default.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"}`
+    },
+    audio.name
+  )))), resourceOptions.cameras && resourceOptions.cameras.length > 0 && /* @__PURE__ */ React2__default.default.createElement("div", { className: "rounded-lg bg-white/5 overflow-hidden" }, /* @__PURE__ */ React2__default.default.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"
+    },
+    /* @__PURE__ */ React2__default.default.createElement("div", { className: "flex items-center gap-2" }, /* @__PURE__ */ React2__default.default.createElement("span", { className: "text-xs font-medium text-white/70" }, "\u76F8\u673A"), /* @__PURE__ */ React2__default.default.createElement("span", { className: "text-sm text-white font-medium" }, selectedCameraId ? resourceOptions.cameras.find((c) => c.id === selectedCameraId)?.name : "\u65E0")),
+    /* @__PURE__ */ React2__default.default.createElement("span", { className: `text-white/60 transition-transform ${expandedSection === "camera" ? "rotate-180" : ""}` }, "\u25BC")
+  ), expandedSection === "camera" && /* @__PURE__ */ React2__default.default.createElement("div", { className: "border-t border-white/10 p-2 space-y-1 max-h-60 overflow-y-auto" }, /* @__PURE__ */ React2__default.default.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"}`
+    },
+    "\u65E0"
+  ), resourceOptions.cameras.map((camera) => /* @__PURE__ */ React2__default.default.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"}`
+    },
+    camera.name
+  )))), resourceOptions.stageModels && resourceOptions.stageModels.length > 0 && /* @__PURE__ */ React2__default.default.createElement("div", { className: "rounded-lg bg-white/5 overflow-hidden" }, /* @__PURE__ */ React2__default.default.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"
+    },
+    /* @__PURE__ */ React2__default.default.createElement("div", { className: "flex items-center gap-2" }, /* @__PURE__ */ React2__default.default.createElement("span", { className: "text-xs font-medium text-white/70" }, "\u573A\u666F"), /* @__PURE__ */ React2__default.default.createElement("span", { className: "text-sm text-white font-medium" }, selectedStageModelId ? resourceOptions.stageModels.find((s) => s.id === selectedStageModelId)?.name : "\u65E0")),
+    /* @__PURE__ */ React2__default.default.createElement("span", { className: `text-white/60 transition-transform ${expandedSection === "stageModel" ? "rotate-180" : ""}` }, "\u25BC")
+  ), expandedSection === "stageModel" && /* @__PURE__ */ React2__default.default.createElement("div", { className: "border-t border-white/10 p-2 space-y-1 max-h-60 overflow-y-auto" }, /* @__PURE__ */ React2__default.default.createElement(
+    "button",
+    {
+      onClick: () => {
+        handleSelectionChange("stageModel", "");
+        setExpandedSection(null);
+      },
+      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__default.default.createElement(
+    "button",
+    {
+      key: stageModel.id,
+      onClick: () => {
+        handleSelectionChange("stageModel", stageModel.id);
+        setExpandedSection(null);
+      },
+      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__default.default.createElement("div", { className: "rounded-lg bg-white/5 overflow-hidden" }, /* @__PURE__ */ React2__default.default.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__default.default.createElement("div", { className: "flex items-center gap-2" }, /* @__PURE__ */ React2__default.default.createElement("span", { className: "text-xs font-medium text-white/70" }, "\u80CC\u666F"), /* @__PURE__ */ React2__default.default.createElement("span", { className: "text-sm text-white font-medium" }, selectedBackgroundId ? resourceOptions.backgrounds.find((b) => b.id === selectedBackgroundId)?.name : "\u65E0")),
+    /* @__PURE__ */ React2__default.default.createElement("span", { className: `text-white/60 transition-transform ${expandedSection === "background" ? "rotate-180" : ""}` }, "\u25BC")
+  ), expandedSection === "background" && /* @__PURE__ */ React2__default.default.createElement("div", { className: "border-t border-white/10 p-2 space-y-1 max-h-60 overflow-y-auto" }, /* @__PURE__ */ React2__default.default.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"}`
+    },
+    "\u65E0"
+  ), resourceOptions.backgrounds.map((background) => /* @__PURE__ */ React2__default.default.createElement(
+    "button",
+    {
+      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
+  )))))));
+};
+var MMDPlaylist = ({
+  playlist,
+  stage,
+  defaultNodeIndex = 0,
+  className,
+  style,
+  onLoad,
+  onError,
+  onNodeChange,
+  onPlaylistComplete
+}) => {
+  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] = React2.useState(defaultNodeIndex);
+  const [showSettings, setShowSettings] = React2.useState(false);
+  const [preloadedNodes, setPreloadedNodes] = React2.useState(/* @__PURE__ */ new Set());
+  const [isPreloading, setIsPreloading] = React2.useState(true);
+  const [preloadProgress, setPreloadProgress] = React2.useState(0);
+  const [editableNodes, setEditableNodes] = React2.useState(playlist.nodes);
+  const currentNodeIndexRef = React2.useRef(defaultNodeIndex);
+  const isAutoSwitchRef = React2.useRef(false);
+  const playerRefsMap = React2.useRef(/* @__PURE__ */ new Map());
+  React2.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__default.default.createElement("div", { className: "flex h-full w-full items-center justify-center bg-black text-white" }, /* @__PURE__ */ React2__default.default.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);
+  React2.useEffect(() => {
+    console.log(`\u{1F504} [MMDPlaylist] \u8282\u70B9\u5207\u6362: ${currentNodeIndex} - ${currentNode.name}`);
+    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;
+      }
+      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`);
+        }
+      });
+    }
+  }, [currentNodeIndex, currentNode, onNodeChange, isPreloading, playlist.autoPlay, preloadedNodes]);
+  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;
+    });
+  };
+  React2.useEffect(() => {
+    if (preloadedNodes.size === editableNodes.length) {
+      console.log("\u{1F389} [MMDPlaylist] \u6240\u6709\u8282\u70B9\u9884\u52A0\u8F7D\u5B8C\u6210");
+      setIsPreloading(false);
+      onLoad?.();
+    } 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;
+    }
+    console.log("\u2705 [MMDPlaylist] \u64AD\u653E\u5217\u8868\u64AD\u653E\u5B8C\u6210");
+    onPlaylistComplete?.();
+  };
+  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 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 shouldAutoPlayInitial = playlist.autoPlay && currentNodeIndex === defaultNodeIndex && !isPreloading;
+  return /* @__PURE__ */ React2__default.default.createElement("div", { className: `relative ${className || ""}`, style }, editableNodes.map((node, index) => {
+    return /* @__PURE__ */ React2__default.default.createElement(
+      "div",
+      {
+        key: `player-${node.id}-${index}`,
+        ref: (el) => {
+          if (el) {
+            playerRefsMap.current.set(index, el);
+          }
+        },
+        className: "absolute inset-0",
+        style: {
+          visibility: index === currentNodeIndex ? "visible" : "hidden",
+          zIndex: index === currentNodeIndex ? 1 : 0
+        }
+      },
+      /* @__PURE__ */ React2__default.default.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__default.default.createElement("div", { className: "absolute inset-0 z-50 flex flex-col items-center justify-center bg-black/80 backdrop-blur-sm" }, /* @__PURE__ */ React2__default.default.createElement("div", { className: "text-center" }, /* @__PURE__ */ React2__default.default.createElement("div", { className: "mb-4 text-2xl font-bold text-white" }, "\u6B63\u5728\u9884\u52A0\u8F7D\u64AD\u653E\u5217\u8868"), /* @__PURE__ */ React2__default.default.createElement("div", { className: "mb-2 text-lg text-white/80" }, preloadedNodes.size, " / ", editableNodes.length, " \u8282\u70B9"), /* @__PURE__ */ React2__default.default.createElement("div", { className: "h-2 w-64 overflow-hidden rounded-full bg-white/20" }, /* @__PURE__ */ React2__default.default.createElement(
+    "div",
+    {
+      className: "h-full bg-gradient-to-r from-purple-500 to-blue-500 transition-all duration-300",
+      style: { width: `${preloadProgress}%` }
+    }
+  )), /* @__PURE__ */ React2__default.default.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__default.default.createElement("div", { className: "absolute bottom-4 right-4 z-10 flex gap-2" }, editableNodes.length > 1 && /* @__PURE__ */ React2__default.default.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__default.default.createElement(
+    "button",
+    {
+      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"
+    },
+    "\u2699\uFE0F"
+  ), editableNodes.length > 1 && /* @__PURE__ */ React2__default.default.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"
+    },
+    "\u23ED\uFE0F"
+  )), !isPreloading && /* @__PURE__ */ React2__default.default.createElement("div", { className: "absolute left-4 top-4 z-10 rounded-lg bg-black/50 px-4 py-2 backdrop-blur-md" }, /* @__PURE__ */ React2__default.default.createElement("div", { className: "flex items-center gap-2" }, /* @__PURE__ */ React2__default.default.createElement("span", { className: "text-sm font-bold text-white/60" }, currentNodeIndex + 1, "/", editableNodes.length), /* @__PURE__ */ React2__default.default.createElement("span", { className: "text-sm font-medium text-white" }, currentNode.name), currentNode.loop && /* @__PURE__ */ React2__default.default.createElement("span", { className: "rounded bg-white/20 px-2 py-0.5 text-xs text-white" }, "\u{1F501}"))), showSettings && /* @__PURE__ */ React2__default.default.createElement(
+    "div",
+    {
+      className: "absolute inset-0 z-[100] flex items-start justify-end bg-black/40",
+      onClick: () => setShowSettings(false)
+    },
+    /* @__PURE__ */ React2__default.default.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()
+      },
+      /* @__PURE__ */ React2__default.default.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__default.default.createElement("h3", { className: "flex items-center gap-2 text-base font-bold text-white" }, "\u2699\uFE0F \u64AD\u653E\u5217\u8868\u914D\u7F6E"), /* @__PURE__ */ React2__default.default.createElement(
+        "button",
+        {
+          onClick: () => setShowSettings(false),
+          className: "text-xl text-white/60 transition-colors hover:text-white"
+        },
+        "\u2715"
+      )),
+      /* @__PURE__ */ React2__default.default.createElement("div", { className: "flex-1 overflow-y-auto p-4", style: { scrollbarWidth: "thin", scrollbarColor: "rgba(255,255,255,0.2) transparent" } }, /* @__PURE__ */ React2__default.default.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__default.default.createElement("h4", { className: "text-sm font-semibold text-white mb-2 flex items-center gap-2" }, "\u{1F4CB} \u64AD\u653E\u5217\u8868"), /* @__PURE__ */ React2__default.default.createElement("div", { className: "space-y-1 text-xs" }, /* @__PURE__ */ React2__default.default.createElement("div", { className: "flex justify-between" }, /* @__PURE__ */ React2__default.default.createElement("span", { className: "text-white/60" }, "\u540D\u79F0\uFF1A"), /* @__PURE__ */ React2__default.default.createElement("span", { className: "text-white font-medium" }, playlist.name)), /* @__PURE__ */ React2__default.default.createElement("div", { className: "flex justify-between" }, /* @__PURE__ */ React2__default.default.createElement("span", { className: "text-white/60" }, "\u8282\u70B9\u6570\uFF1A"), /* @__PURE__ */ React2__default.default.createElement("span", { className: "text-white font-medium" }, editableNodes.length)), /* @__PURE__ */ React2__default.default.createElement("div", { className: "flex justify-between" }, /* @__PURE__ */ React2__default.default.createElement("span", { className: "text-white/60" }, "\u5FAA\u73AF\uFF1A"), /* @__PURE__ */ React2__default.default.createElement("span", { className: "text-white font-medium" }, playlist.loop ? "\u662F" : "\u5426")))), /* @__PURE__ */ React2__default.default.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__default.default.createElement("h4", { className: "text-sm font-semibold text-white mb-2 flex items-center gap-2" }, "\u{1F3AF} \u5F53\u524D\u8282\u70B9"), /* @__PURE__ */ React2__default.default.createElement("div", { className: "space-y-1 text-xs" }, /* @__PURE__ */ React2__default.default.createElement("div", { className: "flex justify-between items-center" }, /* @__PURE__ */ React2__default.default.createElement("span", { className: "text-white/60" }, "\u540D\u79F0\uFF1A"), /* @__PURE__ */ React2__default.default.createElement("span", { className: "text-white font-medium truncate ml-2" }, currentNode.name)), /* @__PURE__ */ React2__default.default.createElement("div", { className: "flex justify-between" }, /* @__PURE__ */ React2__default.default.createElement("span", { className: "text-white/60" }, "\u4F4D\u7F6E\uFF1A"), /* @__PURE__ */ React2__default.default.createElement("span", { className: "text-white font-medium" }, currentNodeIndex + 1, " / ", editableNodes.length)), currentNode.resources.audioPath && /* @__PURE__ */ React2__default.default.createElement("div", { className: "text-white/80 mt-1" }, "\u{1F3B5} \u6709\u97F3\u4E50"), currentNode.resources.cameraPath && /* @__PURE__ */ React2__default.default.createElement("div", { className: "text-white/80" }, "\u{1F4F7} \u6709\u76F8\u673A"))), /* @__PURE__ */ React2__default.default.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__default.default.createElement("h4", { className: "mb-2 flex items-center gap-2 text-sm font-semibold text-white" }, "\u{1F4DD} \u8282\u70B9\u7BA1\u7406"), /* @__PURE__ */ React2__default.default.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__default.default.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"}`
+        },
+        /* @__PURE__ */ React2__default.default.createElement("div", { className: "flex items-start justify-between gap-2" }, /* @__PURE__ */ React2__default.default.createElement("div", { className: "flex-1 min-w-0" }, /* @__PURE__ */ React2__default.default.createElement("div", { className: "flex items-center gap-1 mb-1" }, /* @__PURE__ */ React2__default.default.createElement("span", { className: "text-xs font-bold text-white/40" }, "#", index + 1), /* @__PURE__ */ React2__default.default.createElement("h5", { className: "font-semibold text-white text-xs truncate" }, node.name), currentNodeIndex === index && /* @__PURE__ */ React2__default.default.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__default.default.createElement("div", { className: "flex flex-wrap gap-1 text-[10px] text-white/60" }, node.resources.modelPath && /* @__PURE__ */ React2__default.default.createElement("span", null, "\u{1F464}"), node.resources.motionPath && /* @__PURE__ */ React2__default.default.createElement("span", null, "\u{1F483}"), node.resources.audioPath && /* @__PURE__ */ React2__default.default.createElement("span", null, "\u{1F3B5}"), node.resources.cameraPath && /* @__PURE__ */ React2__default.default.createElement("span", null, "\u{1F4F7}"))), /* @__PURE__ */ React2__default.default.createElement("div", { className: "flex flex-col gap-0.5 flex-shrink-0" }, index > 0 && /* @__PURE__ */ React2__default.default.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__default.default.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__default.default.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__default.default.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/"
+  }
+};
+var availableMMDPresets = [
+  catchTheWavePreset,
+  defaultMMDPreset,
+  simpleModelPreset
+];
+
+exports.MMDPlayerBase = MMDPlayerBase;
+exports.MMDPlayerEnhanced = MMDPlayerEnhanced;
+exports.MMDPlaylist = MMDPlaylist;
+exports.availableMMDPresets = availableMMDPresets;
+exports.catchTheWavePreset = catchTheWavePreset;
+exports.defaultMMDPreset = defaultMMDPreset;
+exports.loadAmmo = loadAmmo;
+exports.simpleModelPreset = simpleModelPreset;
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map