sa2kit 1.2.1 → 1.4.0

package/dist/mmd/index.mjs

@@ -3,6 +3,7 @@ import React6, { forwardRef, useRef, useImperativeHandle, useEffect, useState, u
 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';
+import { createPortal } from 'react-dom';
 
 // src/mmd/utils/ammo-loader.ts
 var ammoPromise = null;
@@ -46,6 +47,102 @@ var loadAmmo = (path = "/libs/ammo.wasm.js") => {
 };
 
 // src/mmd/components/MMDPlayerBase.tsx
+async function waitForMaterialsReady(object, renderer, scene, camera) {
+  const textures = [];
+  let meshCount = 0;
+  object.traverse((obj) => {
+    if (obj instanceof THREE.Mesh || obj instanceof THREE.SkinnedMesh) {
+      meshCount++;
+      const materials = Array.isArray(obj.material) ? obj.material : [obj.material];
+      materials.forEach((material) => {
+        if (material instanceof THREE.Material) {
+          const textureProps = [
+            "map",
+            "lightMap",
+            "bumpMap",
+            "normalMap",
+            "specularMap",
+            "envMap",
+            "alphaMap",
+            "emissiveMap",
+            "displacementMap",
+            "roughnessMap",
+            "metalnessMap",
+            "aoMap",
+            // MMD 特有纹理
+            "gradientMap",
+            "toonMap",
+            "sphereMap",
+            "matcap"
+          ];
+          textureProps.forEach((prop) => {
+            const texture = material[prop];
+            if (texture instanceof THREE.Texture && !textures.includes(texture)) {
+              textures.push(texture);
+            }
+          });
+        }
+      });
+    }
+  });
+  console.log(`[MMDPlayerBase] Found ${meshCount} meshes and ${textures.length} unique textures`);
+  const texturePromises = textures.map((texture, index) => {
+    return new Promise((resolve) => {
+      const image = texture.image;
+      if (!image) {
+        console.log(`[MMDPlayerBase]   Texture ${index + 1}/${textures.length}: No image`);
+        resolve();
+        return;
+      }
+      if (image instanceof HTMLImageElement) {
+        if (image.complete && image.naturalWidth > 0) {
+          console.log(`[MMDPlayerBase]   Texture ${index + 1}/${textures.length}: Already loaded`);
+          resolve();
+        } else {
+          const onLoad = () => {
+            console.log(`[MMDPlayerBase]   Texture ${index + 1}/${textures.length}: Loaded`);
+            image.removeEventListener("load", onLoad);
+            image.removeEventListener("error", onError);
+            resolve();
+          };
+          const onError = (e) => {
+            console.warn(`[MMDPlayerBase]   Texture ${index + 1}/${textures.length}: Failed to load`, e);
+            image.removeEventListener("load", onLoad);
+            image.removeEventListener("error", onError);
+            resolve();
+          };
+          image.addEventListener("load", onLoad);
+          image.addEventListener("error", onError);
+          setTimeout(() => {
+            image.removeEventListener("load", onLoad);
+            image.removeEventListener("error", onError);
+            console.warn(`[MMDPlayerBase]   Texture ${index + 1}/${textures.length}: Timeout`);
+            resolve();
+          }, 5e3);
+        }
+      } else {
+        console.log(`[MMDPlayerBase]   Texture ${index + 1}/${textures.length}: Non-image type`);
+        resolve();
+      }
+    });
+  });
+  await Promise.all(texturePromises);
+  console.log("[MMDPlayerBase] All texture images loaded");
+  textures.forEach((texture) => {
+    texture.needsUpdate = true;
+  });
+  console.log("[MMDPlayerBase] Warming up renderer...");
+  for (let i = 0; i < 3; i++) {
+    await new Promise((resolve) => {
+      requestAnimationFrame(() => {
+        renderer.render(scene, camera);
+        console.log(`[MMDPlayerBase]   Warmup render ${i + 1}/3`);
+        resolve();
+      });
+    });
+  }
+  console.log("[MMDPlayerBase] All materials and textures fully ready");
+}
 var MMDPlayerBase = forwardRef((props, ref) => {
   const {
     resources,
@@ -231,7 +328,9 @@ var MMDPlayerBase = forwardRef((props, ref) => {
           preserveDrawingBuffer: true
         });
         renderer.setSize(width, height);
-        renderer.setPixelRatio(mobileOptimization.enabled ? mobileOptimization.pixelRatio || 1 : window.devicePixelRatio);
+        const pixelRatio = mobileOptimization.enabled ? mobileOptimization.pixelRatio || Math.min(window.devicePixelRatio, 2) : window.devicePixelRatio;
+        renderer.setPixelRatio(pixelRatio);
+        console.log("[MMDPlayerBase] Pixel ratio set to:", pixelRatio);
         if (checkCancelled()) {
           renderer.dispose();
           return;
@@ -241,6 +340,7 @@ var MMDPlayerBase = forwardRef((props, ref) => {
         renderer.domElement.style.width = "100%";
         renderer.domElement.style.height = "100%";
         renderer.domElement.style.outline = "none";
+        renderer.domElement.style.position = "relative";
         if (stage.enableShadow !== false && !mobileOptimization.reduceShadowQuality) {
           renderer.shadowMap.enabled = true;
           renderer.shadowMap.type = THREE.PCFSoftShadowMap;
@@ -287,6 +387,8 @@ var MMDPlayerBase = forwardRef((props, ref) => {
         resizeObserver.observe(container);
         resizeObserverRef.current = resizeObserver;
         onResize();
+        console.log("[MMDPlayerBase] Starting render loop (animation paused)");
+        animate();
         console.log("[MMDPlayerBase] Start loading resources...", resources);
         const loader = new MMDLoader();
         const helper = new MMDAnimationHelper({
@@ -335,6 +437,15 @@ var MMDPlayerBase = forwardRef((props, ref) => {
           durationRef.current = animation.duration;
           console.log("[MMDPlayerBase] Animation duration:", animation.duration);
         }
+        mesh.castShadow = true;
+        mesh.receiveShadow = true;
+        console.log("[MMDPlayerBase] Waiting for all materials and textures to load...");
+        const tempScene = new THREE.Scene();
+        tempScene.add(mesh);
+        await waitForMaterialsReady(mesh, renderer, tempScene, camera);
+        if (checkCancelled()) return;
+        console.log("[MMDPlayerBase] \u2705 All materials and textures loaded");
+        tempScene.remove(mesh);
         const box = new THREE.Box3().setFromObject(mesh);
         if (!box.isEmpty()) {
           const center = box.getCenter(new THREE.Vector3());
@@ -358,14 +469,13 @@ var MMDPlayerBase = forwardRef((props, ref) => {
             controls.update();
           }
         }
-        mesh.castShadow = true;
-        mesh.receiveShadow = true;
         const enablePhysics = stage.enablePhysics !== false && !mobileOptimization.disablePhysics;
         helper.add(mesh, {
           animation,
           physics: enablePhysics
         });
         scene.add(mesh);
+        console.log("[MMDPlayerBase] \u2705 Model added to scene (fully loaded)");
         if (resources.cameraPath) {
           loader.loadAnimation(
             resources.cameraPath,
@@ -402,31 +512,56 @@ var MMDPlayerBase = forwardRef((props, ref) => {
             (err) => console.error("Failed to load audio:", err)
           );
         }
+        let stageMesh = null;
         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)
-          );
+          try {
+            stageMesh = await new Promise((resolve, reject) => {
+              loader.load(
+                resources.stageModelPath,
+                (mesh2) => resolve(mesh2),
+                void 0,
+                (err) => reject(err)
+              );
+            });
+            if (checkCancelled()) return;
+            console.log("[MMDPlayerBase] Stage model loaded:", stageMesh);
+            stageMesh.castShadow = true;
+            stageMesh.receiveShadow = true;
+            console.log("[MMDPlayerBase] Waiting for stage materials and textures...");
+            const tempStageScene = new THREE.Scene();
+            tempStageScene.add(stageMesh);
+            await waitForMaterialsReady(stageMesh, renderer, tempStageScene, camera);
+            tempStageScene.remove(stageMesh);
+            if (checkCancelled()) return;
+            console.log("[MMDPlayerBase] \u2705 Stage materials and textures loaded");
+            scene.add(stageMesh);
+            console.log("[MMDPlayerBase] \u2705 Stage added to scene (fully loaded)");
+          } catch (err) {
+            console.error("Failed to load stage:", err);
+          }
         }
         if (checkCancelled()) return;
         isReadyRef.current = true;
+        console.log("[MMDPlayerBase] \u{1F389} All resources fully loaded and ready!");
+        console.log("[MMDPlayerBase] \u{1F4CA} Summary:");
+        console.log(`[MMDPlayerBase]   - Model: \u2705 Fully loaded with all textures`);
+        if (resources.stageModelPath) {
+          console.log(`[MMDPlayerBase]   - Stage: \u2705 Fully loaded with all textures`);
+        }
+        if (animation) {
+          console.log(`[MMDPlayerBase]   - Animation: \u2705 Ready (${animation.duration.toFixed(2)}s)`);
+        }
+        console.log("[MMDPlayerBase] \u{1F514} Triggering onLoad callback");
         onLoad?.();
         if (autoPlay) {
           setTimeout(() => {
             if (checkCancelled()) return;
+            console.log("[MMDPlayerBase] \u{1F3AC} Starting animation playback (after materials fully loaded)");
             isPlayingRef.current = true;
             if (!clockRef.current.running) clockRef.current.start();
             onPlay?.();
           }, 100);
         }
-        animate();
       } catch (error) {
         if (checkCancelled()) return;
         console.error("MMDPlayerBase initialization failed:", error);
@@ -875,6 +1010,7 @@ ${errorMessage}
         height: "100%",
         overflow: "hidden",
         position: "relative",
+        // 恢复 relative，作为 canvas 的定位容器
         backgroundColor: stage.backgroundColor || "#000",
         ...style
       }
@@ -1588,7 +1724,1116 @@ var MMDPlaylist = ({
     ))
   );
 };
+if (typeof document !== "undefined" && !document.getElementById("dialogue-box-animations")) {
+  const style = document.createElement("style");
+  style.id = "dialogue-box-animations";
+  style.textContent = `
+    @keyframes gradientShift {
+      0%, 100% { background-position: 0% 50%; }
+      50% { background-position: 100% 50%; }
+    }
+    
+    @keyframes shimmer {
+      0% { background-position: -200% 0; }
+      100% { background-position: 200% 0; }
+    }
+    
+    @keyframes cursorBlink {
+      0%, 100% { opacity: 1; transform: scaleY(1); }
+      50% { opacity: 0.3; transform: scaleY(0.8); }
+    }
+    
+    @keyframes textFadeIn {
+      from { opacity: 0; transform: translateY(2px); }
+      to { opacity: 1; transform: translateY(0); }
+    }
+    
+    @keyframes bounce {
+      0%, 100% { transform: translateY(0); }
+      50% { transform: translateY(-4px); }
+    }
+  `;
+  document.head.appendChild(style);
+}
+var defaultTheme = {
+  backgroundColor: "rgba(255, 255, 255, 0.15)",
+  borderColor: "rgba(255, 255, 255, 0.25)",
+  textColor: "#ffffff",
+  speakerBgColor: "rgba(255, 255, 255, 0.25)",
+  speakerTextColor: "#ffffff",
+  opacity: 0.98,
+  blur: "24px",
+  continueHint: "\u70B9\u51FB\u7EE7\u7EED \u25BC",
+  showContinueHint: true
+};
+var DialogueBox = ({
+  dialogue,
+  theme: userTheme,
+  isTyping = false,
+  isAutoMode = false,
+  onClick,
+  onSkipTyping,
+  onToggleAuto,
+  onOpenHistory,
+  onSkip,
+  showControls = true,
+  showSkipButton = true,
+  showAutoButton = true,
+  showHistoryButton = true,
+  className
+}) => {
+  const theme = { ...defaultTheme, ...userTheme };
+  const [displayedText, setDisplayedText] = useState("");
+  const [isComplete, setIsComplete] = useState(false);
+  const [isMounted, setIsMounted] = useState(false);
+  const typingRef = useRef(null);
+  const currentTextRef = useRef("");
+  useEffect(() => {
+    setIsMounted(true);
+  }, []);
+  useEffect(() => {
+    if (!dialogue) {
+      setDisplayedText("");
+      setIsComplete(false);
+      return;
+    }
+    const text = dialogue.text;
+    const speed = dialogue.typeSpeed ?? 50;
+    if (typingRef.current) {
+      clearTimeout(typingRef.current);
+    }
+    setDisplayedText("");
+    setIsComplete(false);
+    currentTextRef.current = text;
+    let index = 0;
+    const typeNext = () => {
+      if (index < text.length && currentTextRef.current === text) {
+        setDisplayedText(text.slice(0, index + 1));
+        index++;
+        typingRef.current = setTimeout(typeNext, speed);
+      } else if (currentTextRef.current === text) {
+        setIsComplete(true);
+      }
+    };
+    typingRef.current = setTimeout(typeNext, speed);
+    return () => {
+      if (typingRef.current) {
+        clearTimeout(typingRef.current);
+      }
+    };
+  }, [dialogue]);
+  const handleSkipTyping = useCallback(() => {
+    if (typingRef.current) {
+      clearTimeout(typingRef.current);
+    }
+    if (dialogue) {
+      setDisplayedText(dialogue.text);
+      setIsComplete(true);
+    }
+    onSkipTyping?.();
+  }, [dialogue, onSkipTyping]);
+  const handleClick = useCallback(() => {
+    if (!isComplete) {
+      handleSkipTyping();
+    } else {
+      onClick?.();
+    }
+  }, [isComplete, handleSkipTyping, onClick]);
+  if (!dialogue) {
+    return null;
+  }
+  dialogue.speakerColor || theme.speakerBgColor;
+  console.log("[DialogueBox] Rendering:", {
+    speaker: dialogue.speaker,
+    text: dialogue.text,
+    displayedText,
+    isComplete
+  });
+  const dialogueContent = /* @__PURE__ */ React6.createElement(
+    "div",
+    {
+      className: `${className || ""}`,
+      style: {
+        position: "fixed",
+        bottom: 0,
+        left: 0,
+        right: 0,
+        height: "30vh",
+        minHeight: "200px",
+        maxHeight: "30vh",
+        zIndex: 1,
+        pointerEvents: "auto"
+      }
+    },
+    /* @__PURE__ */ React6.createElement(
+      "div",
+      {
+        className: "w-full h-full rounded-t-3xl border cursor-pointer select-none transition-all hover:border-white/50 hover:shadow-2xl flex flex-col relative overflow-hidden",
+        onClick: handleClick,
+        style: {
+          borderColor: theme.borderColor,
+          backdropFilter: `blur(${theme.blur}) saturate(200%)`,
+          WebkitBackdropFilter: `blur(${theme.blur}) saturate(200%)`,
+          opacity: theme.opacity,
+          pointerEvents: "auto",
+          position: "relative",
+          display: "flex",
+          background: `linear-gradient(135deg, 
+            rgba(255, 255, 255, 0.15) 0%, 
+            rgba(255, 255, 255, 0.12) 50%, 
+            rgba(255, 255, 255, 0.1) 100%)`,
+          boxShadow: `
+            0 -8px 40px rgba(255, 255, 255, 0.1),
+            0 -4px 16px rgba(255, 255, 255, 0.05),
+            inset 0 1px 0 rgba(255, 255, 255, 0.3),
+            inset 0 -1px 0 rgba(255, 255, 255, 0.1)
+          `
+        }
+      },
+      /* @__PURE__ */ React6.createElement(
+        "div",
+        {
+          className: "absolute inset-0 opacity-20 pointer-events-none",
+          style: {
+            background: `linear-gradient(45deg, 
+              rgba(255, 182, 193, 0.2) 0%, 
+              rgba(173, 216, 230, 0.2) 25%,
+              rgba(221, 160, 221, 0.2) 50%,
+              rgba(255, 218, 185, 0.2) 75%,
+              rgba(255, 182, 193, 0.2) 100%)`,
+            backgroundSize: "400% 400%",
+            animation: "gradientShift 15s ease infinite"
+          }
+        }
+      ),
+      /* @__PURE__ */ React6.createElement(
+        "div",
+        {
+          className: "absolute top-0 left-0 right-0 h-1",
+          style: {
+            background: "linear-gradient(90deg, transparent, rgba(255,255,255,0.6), transparent)"
+          }
+        }
+      ),
+      /* @__PURE__ */ React6.createElement(
+        "div",
+        {
+          className: "absolute bottom-0 left-0 right-0 h-px",
+          style: {
+            background: "linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent)"
+          }
+        }
+      ),
+      showControls && /* @__PURE__ */ React6.createElement("div", { className: "flex justify-end gap-3 px-6 pt-4 pb-2 flex-shrink-0 relative z-10" }, showHistoryButton && /* @__PURE__ */ React6.createElement(
+        "button",
+        {
+          onClick: (e) => {
+            e.stopPropagation();
+            onOpenHistory?.();
+          },
+          className: "px-4 py-2 text-xs rounded-xl text-white font-medium hover:text-white transition-all backdrop-blur-lg border border-white/30 hover:border-white/50 hover:scale-105 active:scale-95 shadow-lg",
+          style: {
+            background: "linear-gradient(135deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.15))",
+            boxShadow: "0 4px 16px rgba(255, 255, 255, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.3)"
+          },
+          title: "\u5386\u53F2\u8BB0\u5F55"
+        },
+        "\u{1F4DC} \u5386\u53F2"
+      ), showAutoButton && /* @__PURE__ */ React6.createElement(
+        "button",
+        {
+          onClick: (e) => {
+            e.stopPropagation();
+            onToggleAuto?.();
+          },
+          className: `px-4 py-2 text-xs rounded-xl font-medium transition-all backdrop-blur-lg border hover:scale-105 active:scale-95 shadow-lg ${isAutoMode ? "border-white/50 text-white" : "border-white/30 hover:border-white/50 text-white"}`,
+          style: {
+            background: isAutoMode ? "linear-gradient(135deg, rgba(255, 255, 255, 0.35), rgba(255, 255, 255, 0.25))" : "linear-gradient(135deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.15))",
+            boxShadow: isAutoMode ? "0 4px 20px rgba(255, 255, 255, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.4)" : "0 4px 16px rgba(255, 255, 255, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.3)"
+          },
+          title: "\u81EA\u52A8\u64AD\u653E"
+        },
+        "\u25B6 \u81EA\u52A8"
+      ), showSkipButton && /* @__PURE__ */ React6.createElement(
+        "button",
+        {
+          onClick: (e) => {
+            e.stopPropagation();
+            onSkip?.();
+          },
+          className: "px-4 py-2 text-xs rounded-xl text-white font-medium hover:text-white transition-all backdrop-blur-lg border border-white/30 hover:border-white/50 hover:scale-105 active:scale-95 shadow-lg",
+          style: {
+            background: "linear-gradient(135deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.15))",
+            boxShadow: "0 4px 16px rgba(255, 255, 255, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.3)"
+          },
+          title: "\u5FEB\u8FDB"
+        },
+        "\u23E9 \u5FEB\u8FDB"
+      )),
+      /* @__PURE__ */ React6.createElement("div", { className: "px-8 pb-6 flex-1 flex flex-col justify-center overflow-y-auto relative z-10" }, dialogue.speaker && /* @__PURE__ */ React6.createElement(
+        "div",
+        {
+          className: "inline-block px-6 py-2.5 rounded-2xl mb-4 text-sm font-bold shadow-2xl self-start relative overflow-hidden transition-all hover:scale-105",
+          style: {
+            color: "#ffffff",
+            background: `linear-gradient(135deg, 
+                  rgba(255, 255, 255, 0.3) 0%, 
+                  rgba(255, 255, 255, 0.2) 100%)`,
+            backdropFilter: "blur(20px)",
+            WebkitBackdropFilter: "blur(20px)",
+            boxShadow: "0 8px 32px rgba(255, 255, 255, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.4)",
+            border: "1px solid rgba(255, 255, 255, 0.3)"
+          }
+        },
+        /* @__PURE__ */ React6.createElement(
+          "div",
+          {
+            className: "absolute inset-0 opacity-30",
+            style: {
+              background: "linear-gradient(45deg, transparent 30%, rgba(255,255,255,0.5) 50%, transparent 70%)",
+              backgroundSize: "200% 200%",
+              animation: "shimmer 3s infinite"
+            }
+          }
+        ),
+        /* @__PURE__ */ React6.createElement("span", { className: "relative z-10 drop-shadow-lg" }, dialogue.speaker)
+      ), /* @__PURE__ */ React6.createElement(
+        "div",
+        {
+          className: "text-lg leading-relaxed relative",
+          style: {
+            color: theme.textColor,
+            textShadow: "0 2px 8px rgba(0, 0, 0, 0.5)"
+          }
+        },
+        /* @__PURE__ */ React6.createElement("span", { className: "inline-block", style: {
+          animation: !isComplete ? "textFadeIn 0.3s ease-out" : "none"
+        } }, displayedText),
+        !isComplete && /* @__PURE__ */ React6.createElement(
+          "span",
+          {
+            className: "inline-block w-1 h-6 ml-1 align-middle",
+            style: {
+              background: "linear-gradient(to bottom, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0.6))",
+              animation: "cursorBlink 1s ease-in-out infinite",
+              boxShadow: "0 0 12px rgba(255, 255, 255, 0.8)"
+            }
+          }
+        )
+      ), isComplete && theme.showContinueHint && /* @__PURE__ */ React6.createElement("div", { className: "flex justify-end mt-4" }, /* @__PURE__ */ React6.createElement(
+        "span",
+        {
+          className: "text-sm px-4 py-2 rounded-full backdrop-blur-lg font-medium",
+          style: {
+            background: "linear-gradient(135deg, rgba(255, 255, 255, 0.25), rgba(255, 255, 255, 0.15))",
+            color: "rgba(255, 255, 255, 0.9)",
+            animation: "bounce 2s ease-in-out infinite",
+            boxShadow: "0 4px 16px rgba(255, 255, 255, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.3)",
+            border: "1px solid rgba(255, 255, 255, 0.3)"
+          }
+        },
+        theme.continueHint
+      )))
+    )
+  );
+  if (!isMounted) {
+    return null;
+  }
+  let portalContainer = document.getElementById("dialogue-portal-root");
+  if (!portalContainer) {
+    portalContainer = document.createElement("div");
+    portalContainer.id = "dialogue-portal-root";
+    portalContainer.style.cssText = "position: fixed; inset: 0; pointer-events: none; z-index: 999999;";
+    document.body.appendChild(portalContainer);
+  }
+  return createPortal(dialogueContent, portalContainer);
+};
+var HistoryPanel = ({
+  history,
+  theme,
+  onClose,
+  className
+}) => {
+  const [isMounted, setIsMounted] = useState(false);
+  useEffect(() => {
+    setIsMounted(true);
+  }, []);
+  const historyContent = /* @__PURE__ */ React6.createElement(
+    "div",
+    {
+      className: `fixed inset-0 flex flex-col ${className}`,
+      style: {
+        zIndex: 1,
+        pointerEvents: "auto",
+        background: "linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.05))"
+      },
+      onClick: onClose
+    },
+    /* @__PURE__ */ React6.createElement(
+      "div",
+      {
+        className: "absolute inset-0 opacity-25 pointer-events-none",
+        style: {
+          background: `linear-gradient(45deg, 
+            rgba(255, 182, 193, 0.15) 0%, 
+            rgba(173, 216, 230, 0.15) 25%,
+            rgba(221, 160, 221, 0.15) 50%,
+            rgba(255, 218, 185, 0.15) 75%,
+            rgba(255, 182, 193, 0.15) 100%)`,
+          backgroundSize: "400% 400%",
+          animation: "gradientShift 15s ease infinite"
+        }
+      }
+    ),
+    /* @__PURE__ */ React6.createElement(
+      "div",
+      {
+        className: "absolute inset-0 pointer-events-none",
+        style: {
+          backdropFilter: "blur(32px) saturate(200%)",
+          WebkitBackdropFilter: "blur(32px) saturate(200%)"
+        }
+      }
+    ),
+    /* @__PURE__ */ React6.createElement("div", { className: "relative z-10 flex flex-col h-full", onClick: (e) => e.stopPropagation() }, /* @__PURE__ */ React6.createElement(
+      "div",
+      {
+        className: "flex items-center justify-between px-8 py-6 border-b relative",
+        style: {
+          borderColor: "rgba(255, 255, 255, 0.25)",
+          background: "linear-gradient(135deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.15))",
+          backdropFilter: "blur(20px)",
+          WebkitBackdropFilter: "blur(20px)",
+          boxShadow: "0 4px 24px rgba(255, 255, 255, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.3)"
+        }
+      },
+      /* @__PURE__ */ React6.createElement("h2", { className: "text-2xl font-bold text-white flex items-center gap-3" }, /* @__PURE__ */ React6.createElement("span", { className: "text-3xl" }, "\u{1F4DC}"), /* @__PURE__ */ React6.createElement("span", { style: { textShadow: "0 2px 12px rgba(255, 255, 255, 0.3)" } }, "\u5BF9\u8BDD\u5386\u53F2")),
+      /* @__PURE__ */ React6.createElement(
+        "button",
+        {
+          onClick: onClose,
+          className: "p-3 hover:bg-white/20 rounded-2xl transition-all text-white hover:text-white hover:scale-110 active:scale-95",
+          style: {
+            background: "linear-gradient(135deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.15))",
+            backdropFilter: "blur(12px)",
+            WebkitBackdropFilter: "blur(12px)",
+            boxShadow: "0 4px 16px rgba(255, 255, 255, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.3)",
+            border: "1px solid rgba(255, 255, 255, 0.25)"
+          },
+          "aria-label": "\u5173\u95ED"
+        },
+        /* @__PURE__ */ React6.createElement("svg", { className: "w-6 h-6", 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: "flex-1 overflow-y-auto p-6 space-y-4" }, history.length === 0 ? /* @__PURE__ */ React6.createElement("div", { className: "text-center text-white/70 py-20 text-lg font-medium", style: { textShadow: "0 2px 8px rgba(0, 0, 0, 0.3)" } }, "\u6682\u65E0\u5BF9\u8BDD\u5386\u53F2") : history.map((item, index) => /* @__PURE__ */ React6.createElement(
+      "div",
+      {
+        key: `${item.nodeIndex}-${item.dialogueIndex}-${index}`,
+        className: "p-6 rounded-2xl transition-all hover:scale-[1.01] relative overflow-hidden cursor-pointer",
+        style: {
+          background: "linear-gradient(135deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.1))",
+          backdropFilter: "blur(16px)",
+          WebkitBackdropFilter: "blur(16px)",
+          border: "1px solid rgba(255, 255, 255, 0.2)",
+          boxShadow: "0 8px 24px rgba(255, 255, 255, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.25)"
+        }
+      },
+      /* @__PURE__ */ React6.createElement(
+        "div",
+        {
+          className: "absolute top-0 left-0 right-0 h-0.5",
+          style: {
+            background: "linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.5), transparent)"
+          }
+        }
+      ),
+      item.speaker && /* @__PURE__ */ React6.createElement(
+        "div",
+        {
+          className: "inline-block px-5 py-2 rounded-xl mb-3 text-sm font-bold shadow-lg relative overflow-hidden",
+          style: {
+            background: "linear-gradient(135deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.2))",
+            backdropFilter: "blur(12px)",
+            WebkitBackdropFilter: "blur(12px)",
+            color: "#ffffff",
+            boxShadow: "0 4px 12px rgba(255, 255, 255, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.3)",
+            border: "1px solid rgba(255, 255, 255, 0.25)"
+          }
+        },
+        /* @__PURE__ */ React6.createElement(
+          "div",
+          {
+            className: "absolute inset-0 opacity-30",
+            style: {
+              background: "linear-gradient(45deg, transparent 30%, rgba(255, 255, 255, 0.4) 50%, transparent 70%)",
+              backgroundSize: "200% 200%",
+              animation: "shimmer 3s infinite"
+            }
+          }
+        ),
+        /* @__PURE__ */ React6.createElement("span", { className: "relative z-10 drop-shadow-lg" }, item.speaker)
+      ),
+      /* @__PURE__ */ React6.createElement(
+        "p",
+        {
+          className: "text-base leading-relaxed",
+          style: {
+            color: "#ffffff",
+            textShadow: "0 2px 8px rgba(0, 0, 0, 0.3)"
+          }
+        },
+        item.text
+      )
+    ))), /* @__PURE__ */ React6.createElement(
+      "div",
+      {
+        className: "px-8 py-4 border-t text-center",
+        style: {
+          borderColor: "rgba(255, 255, 255, 0.2)",
+          background: "linear-gradient(135deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.1))",
+          backdropFilter: "blur(20px)",
+          WebkitBackdropFilter: "blur(20px)",
+          boxShadow: "inset 0 1px 0 rgba(255, 255, 255, 0.2)"
+        }
+      },
+      /* @__PURE__ */ React6.createElement(
+        "span",
+        {
+          className: "text-sm px-5 py-2.5 rounded-full inline-block font-medium",
+          style: {
+            color: "rgba(255, 255, 255, 0.9)",
+            background: "linear-gradient(135deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.15))",
+            backdropFilter: "blur(12px)",
+            WebkitBackdropFilter: "blur(12px)",
+            boxShadow: "0 4px 16px rgba(255, 255, 255, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.3)",
+            border: "1px solid rgba(255, 255, 255, 0.25)",
+            textShadow: "0 2px 8px rgba(0, 0, 0, 0.3)"
+          }
+        },
+        "\u70B9\u51FB\u80CC\u666F\u5173\u95ED"
+      )
+    ))
+  );
+  if (!isMounted) {
+    return null;
+  }
+  let portalContainer = document.getElementById("history-portal-root");
+  if (!portalContainer) {
+    portalContainer = document.createElement("div");
+    portalContainer.id = "history-portal-root";
+    portalContainer.style.cssText = "position: fixed; inset: 0; pointer-events: none; z-index: 999999;";
+    document.body.appendChild(portalContainer);
+  }
+  return createPortal(historyContent, portalContainer);
+};
+var LoadingScreen = ({
+  isLoading = true,
+  loadingText = "\u6B63\u5728\u51C6\u5907\u573A\u666F\u4E2D...",
+  className = ""
+}) => {
+  const [isMounted, setIsMounted] = useState(false);
+  useEffect(() => {
+    setIsMounted(true);
+  }, []);
+  console.log("[LoadingScreen] Render state:", {
+    isLoading,
+    isMounted
+  });
+  if (!isMounted) {
+    return null;
+  }
+  if (!isLoading) {
+    console.log("[LoadingScreen] Not showing, returning null");
+    return null;
+  }
+  const content = /* @__PURE__ */ React6.createElement(
+    "div",
+    {
+      className: `fixed inset-0 w-screen h-screen flex items-center justify-center ${className}`,
+      style: {
+        zIndex: 999998,
+        pointerEvents: "auto",
+        backgroundColor: "rgba(0, 0, 0, 0.4)",
+        margin: 0,
+        padding: 0
+      }
+    },
+    /* @__PURE__ */ React6.createElement(
+      "div",
+      {
+        className: "absolute inset-0 w-full h-full pointer-events-none",
+        style: {
+          background: "linear-gradient(135deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.1))",
+          backdropFilter: "blur(32px) saturate(200%)",
+          WebkitBackdropFilter: "blur(32px) saturate(200%)"
+        }
+      },
+      /* @__PURE__ */ React6.createElement(
+        "div",
+        {
+          className: "flex items-center justify-center flex-col inset-0 w-full h-full opacity-25 pointer-events-none",
+          style: {
+            background: `linear-gradient(45deg, 
+            rgba(255, 182, 193, 0.2) 0%, 
+            rgba(173, 216, 230, 0.2) 25%,
+            rgba(221, 160, 221, 0.2) 50%,
+            rgba(255, 218, 185, 0.2) 75%,
+            rgba(255, 182, 193, 0.2) 100%)`,
+            backgroundSize: "400% 400%",
+            animation: "gradientShift 15s ease infinite"
+          }
+        },
+        /* @__PURE__ */ React6.createElement(
+          "div",
+          {
+            className: "text-lg font-medium text-white text-center px-6 py-3 rounded-2xl"
+          },
+          loadingText
+        )
+      )
+    )
+  );
+  let portalContainer = document.getElementById("loading-screen-portal-root");
+  if (!portalContainer) {
+    portalContainer = document.createElement("div");
+    portalContainer.id = "loading-screen-portal-root";
+    document.body.appendChild(portalContainer);
+  }
+  portalContainer.style.cssText = `
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    width: 100vw;
+    height: 100vh;
+    margin: 0;
+    padding: 0;
+    overflow: hidden;
+    z-index: 999998;
+    pointer-events: none;
+  `.replace(/\s+/g, " ").trim();
+  return createPortal(content, portalContainer);
+};
+LoadingScreen.displayName = "LoadingScreen";
+var StartScreen = ({
+  showStartScreen = false,
+  scriptName = "",
+  startText = "\u70B9\u51FB\u5F00\u59CB",
+  onStart,
+  className = ""
+}) => {
+  const [isMounted, setIsMounted] = useState(false);
+  useEffect(() => {
+    setIsMounted(true);
+  }, []);
+  console.log("[StartScreen] Render state:", {
+    showStartScreen,
+    scriptName,
+    isMounted
+  });
+  if (!isMounted) {
+    return null;
+  }
+  if (!showStartScreen) {
+    console.log("[StartScreen] Not showing, returning null");
+    return null;
+  }
+  const content = /* @__PURE__ */ React6.createElement(
+    "div",
+    {
+      className: `fixed inset-0 w-screen h-screen flex items-center justify-center cursor-pointer ${className}`,
+      style: {
+        zIndex: 999999,
+        pointerEvents: "auto",
+        backgroundColor: "rgba(0, 0, 0, 0.5)",
+        margin: 0,
+        padding: 0
+      },
+      onClick: onStart
+    },
+    /* @__PURE__ */ React6.createElement(
+      "div",
+      {
+        className: "absolute inset-0 w-full h-full pointer-events-none",
+        style: {
+          background: "linear-gradient(135deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.15))",
+          backdropFilter: "blur(40px) saturate(200%)",
+          WebkitBackdropFilter: "blur(40px) saturate(200%)"
+        }
+      },
+      /* @__PURE__ */ React6.createElement(
+        "div",
+        {
+          className: "flex items-center justify-center flex-col inset-0 w-full h-full opacity-30 pointer-events-none",
+          style: {
+            background: `linear-gradient(45deg, 
+            rgba(255, 182, 193, 0.25) 0%, 
+            rgba(173, 216, 230, 0.25) 25%,
+            rgba(221, 160, 221, 0.25) 50%,
+            rgba(255, 218, 185, 0.25) 75%,
+            rgba(255, 182, 193, 0.25) 100%)`,
+            backgroundSize: "400% 400%",
+            animation: "gradientShift 15s ease infinite"
+          }
+        },
+        /* @__PURE__ */ React6.createElement(
+          "div",
+          {
+            className: "relative z-10 text-center px-16 py-14 rounded-3xl max-w-2xl mx-auto transform transition-all hover:scale-105",
+            style: {
+              background: "linear-gradient(135deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.15))",
+              backdropFilter: "blur(24px)",
+              WebkitBackdropFilter: "blur(24px)",
+              border: "2px solid rgba(255, 255, 255, 0.3)",
+              boxShadow: `
+            0 12px 48px rgba(255, 255, 255, 0.15),
+            0 4px 16px rgba(255, 255, 255, 0.1),
+            inset 0 1px 0 rgba(255, 255, 255, 0.4)
+          `
+            }
+          },
+          /* @__PURE__ */ React6.createElement(
+            "div",
+            {
+              className: "absolute top-0 left-0 right-0 h-1 margin-auto",
+              style: {
+                background: "linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.6), transparent)"
+              }
+            }
+          ),
+          /* @__PURE__ */ React6.createElement(
+            "h1",
+            {
+              className: "text-5xl font-bold text-white mb-8 relative",
+              style: {
+                textShadow: "0 4px 16px rgba(255, 255, 255, 0.3), 0 2px 8px rgba(0, 0, 0, 0.5)"
+              }
+            },
+            scriptName,
+            /* @__PURE__ */ React6.createElement(
+              "div",
+              {
+                className: "absolute -bottom-3 left-1/2 transform -translate-x-1/2 h-1 rounded-full",
+                style: {
+                  width: "60%",
+                  background: "linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.5), transparent)"
+                }
+              }
+            )
+          ),
+          /* @__PURE__ */ React6.createElement(
+            "div",
+            {
+              className: "inline-block px-10 py-4 rounded-2xl font-bold text-xl text-white transition-all hover:scale-110 active:scale-95",
+              style: {
+                background: "linear-gradient(135deg, rgba(255, 255, 255, 0.35), rgba(255, 255, 255, 0.25))",
+                backdropFilter: "blur(16px)",
+                WebkitBackdropFilter: "blur(16px)",
+                border: "2px solid rgba(255, 255, 255, 0.4)",
+                boxShadow: `
+              0 8px 32px rgba(255, 255, 255, 0.2),
+              inset 0 1px 0 rgba(255, 255, 255, 0.5)
+            `,
+                textShadow: "0 2px 8px rgba(0, 0, 0, 0.3)",
+                animation: "pulse 2s ease-in-out infinite"
+              }
+            },
+            /* @__PURE__ */ React6.createElement("span", { className: "relative z-10" }, startText)
+          ),
+          /* @__PURE__ */ React6.createElement(
+            "div",
+            {
+              className: "absolute bottom-0 left-0 right-0 h-px",
+              style: {
+                background: "linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent)"
+              }
+            }
+          )
+        )
+      )
+    )
+  );
+  let portalContainer = document.getElementById("start-screen-portal-root");
+  if (!portalContainer) {
+    portalContainer = document.createElement("div");
+    portalContainer.id = "start-screen-portal-root";
+    document.body.appendChild(portalContainer);
+  }
+  portalContainer.style.cssText = `
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    width: 100vw;
+    height: 100vh;
+    margin: 0;
+    padding: 0;
+    overflow: hidden;
+    z-index: 999999;
+    pointer-events: none;
+  `.replace(/\s+/g, " ").trim();
+  return createPortal(content, portalContainer);
+};
+StartScreen.displayName = "StartScreen";
+
+// src/mmd/visual-novel/LoadingOverlay.tsx
+if (typeof document !== "undefined" && !document.getElementById("loading-overlay-animations")) {
+  const style = document.createElement("style");
+  style.id = "loading-overlay-animations";
+  style.textContent = `
+    @keyframes gradientShift {
+      0%, 100% { background-position: 0% 50%; }
+      50% { background-position: 100% 50%; }
+    }
+    
+    @keyframes pulse {
+      0%, 100% { opacity: 1; transform: scale(1); }
+      50% { opacity: 0.9; transform: scale(1.05); }
+    }
+  `;
+  document.head.appendChild(style);
+}
+var LoadingOverlay = ({
+  isLoading = true,
+  showStartScreen = false,
+  scriptName = "",
+  loadingText = "\u6B63\u5728\u51C6\u5907\u573A\u666F\u4E2D...",
+  startText = "\u70B9\u51FB\u5F00\u59CB",
+  onStart,
+  className = ""
+}) => {
+  return /* @__PURE__ */ React6.createElement(React6.Fragment, null, /* @__PURE__ */ React6.createElement(
+    LoadingScreen,
+    {
+      isLoading,
+      loadingText,
+      className
+    }
+  ), /* @__PURE__ */ React6.createElement(
+    StartScreen,
+    {
+      showStartScreen,
+      scriptName,
+      startText,
+      onStart,
+      className
+    }
+  ));
+};
+LoadingOverlay.displayName = "LoadingOverlay";
+
+// src/mmd/visual-novel/MMDVisualNovel.tsx
+var MMDVisualNovel = forwardRef(
+  ({
+    script,
+    stage,
+    mobileOptimization,
+    dialogueTheme,
+    autoStart = false,
+    initialNodeIndex = 0,
+    initialDialogueIndex = 0,
+    onNodeChange,
+    onDialogueChange,
+    onScriptComplete,
+    onError,
+    showDebugInfo = false,
+    showSkipButton = true,
+    showAutoButton = true,
+    showHistoryButton = true,
+    className,
+    style
+  }, ref) => {
+    const { nodes, loop = false } = script;
+    const [currentNodeIndex, setCurrentNodeIndex] = useState(initialNodeIndex);
+    const [currentDialogueIndex, setCurrentDialogueIndex] = useState(initialDialogueIndex);
+    const [isLoading, setIsLoading] = useState(true);
+    const [isAnimationPlaying, setIsAnimationPlaying] = useState(false);
+    const [isTransitioning, setIsTransitioning] = useState(false);
+    const [isAutoMode, setIsAutoMode] = useState(false);
+    const [isTyping, setIsTyping] = useState(false);
+    const [showHistory, setShowHistory] = useState(false);
+    const [history, setHistory] = useState([]);
+    const [isStarted, setIsStarted] = useState(autoStart);
+    const playerRef = useRef(null);
+    const containerRef = useRef(null);
+    const autoTimerRef = useRef(null);
+    const typingCompleteRef = useRef(false);
+    const isStartedRef = useRef(autoStart);
+    const currentNode = nodes[currentNodeIndex];
+    const currentDialogue = currentNode?.dialogues[currentDialogueIndex] || null;
+    const addToHistory = useCallback((dialogue, nodeIndex, dialogueIndex) => {
+      setHistory((prev) => [
+        ...prev,
+        {
+          nodeIndex,
+          dialogueIndex,
+          speaker: dialogue.speaker,
+          text: dialogue.text,
+          timestamp: Date.now()
+        }
+      ]);
+    }, []);
+    const goToNextDialogue = useCallback(() => {
+      if (!currentNode) return;
+      if (autoTimerRef.current) {
+        clearTimeout(autoTimerRef.current);
+        autoTimerRef.current = null;
+      }
+      const nextDialogueIndex = currentDialogueIndex + 1;
+      if (nextDialogueIndex < currentNode.dialogues.length && currentNode?.dialogues[nextDialogueIndex] !== void 0) {
+        const nextDialogue = currentNode.dialogues[nextDialogueIndex];
+        setCurrentDialogueIndex(nextDialogueIndex);
+        addToHistory(nextDialogue, currentNodeIndex, nextDialogueIndex);
+        onDialogueChange?.(nextDialogue, nextDialogueIndex, currentNodeIndex);
+        typingCompleteRef.current = false;
+      } else {
+        const nextNodeIndex = currentNodeIndex + 1;
+        if (nextNodeIndex < nodes.length) {
+          goToNode(nextNodeIndex);
+        } else if (loop) {
+          goToNode(0);
+        } else {
+          onScriptComplete?.();
+        }
+      }
+    }, [currentNode, currentDialogueIndex, currentNodeIndex, nodes.length, loop, addToHistory, onDialogueChange, onScriptComplete]);
+    const goToNode = useCallback(
+      (nodeIndex) => {
+        if (nodeIndex < 0 || nodeIndex >= nodes.length) return;
+        if (isTransitioning) return;
+        const node = nodes[nodeIndex];
+        if (!node) return;
+        console.log(`[MMDVisualNovel] Transitioning to node ${nodeIndex}`);
+        setIsTransitioning(true);
+        setIsLoading(true);
+        setIsAnimationPlaying(false);
+        setTimeout(() => {
+          setCurrentNodeIndex(nodeIndex);
+          setCurrentDialogueIndex(0);
+          typingCompleteRef.current = false;
+          if (node.dialogues.length > 0 && node?.dialogues[0] !== void 0) {
+            addToHistory(node.dialogues[0], nodeIndex, 0);
+          }
+          onNodeChange?.(node, nodeIndex);
+          if (node.dialogues.length > 0 && node?.dialogues[0] !== void 0) {
+            onDialogueChange?.(node.dialogues[0], 0, nodeIndex);
+          }
+          setTimeout(() => {
+            setIsTransitioning(false);
+            console.log(`[MMDVisualNovel] Transition to node ${nodeIndex} completed, waiting for model load`);
+          }, 100);
+        }, 300);
+      },
+      [nodes, isTransitioning, addToHistory, onNodeChange, onDialogueChange]
+    );
+    const goToDialogue = useCallback(
+      (dialogueIndex) => {
+        if (!currentNode) return;
+        const dialogue = currentNode.dialogues[dialogueIndex];
+        if (dialogueIndex < 0 || dialogueIndex >= currentNode.dialogues.length || dialogue === void 0) return;
+        setCurrentDialogueIndex(dialogueIndex);
+        addToHistory(dialogue, currentNodeIndex, dialogueIndex);
+        onDialogueChange?.(dialogue, dialogueIndex, currentNodeIndex);
+        typingCompleteRef.current = false;
+      },
+      [currentNode, currentNodeIndex, addToHistory, onDialogueChange]
+    );
+    const handleDialogueClick = useCallback(() => {
+      if (!typingCompleteRef.current) {
+        typingCompleteRef.current = true;
+        return;
+      }
+      goToNextDialogue();
+    }, [goToNextDialogue]);
+    const handleTypingComplete = useCallback(() => {
+      typingCompleteRef.current = true;
+      setIsTyping(false);
+      if (isAutoMode || currentDialogue?.waitForClick === false) {
+        const delay = currentDialogue?.autoDelay ?? 2e3;
+        autoTimerRef.current = setTimeout(() => {
+          goToNextDialogue();
+        }, delay);
+      }
+    }, [isAutoMode, currentDialogue, goToNextDialogue]);
+    useEffect(() => {
+      if (currentDialogue) {
+        setIsTyping(true);
+        typingCompleteRef.current = false;
+        const text = currentDialogue.text;
+        const speed = currentDialogue.typeSpeed ?? 50;
+        const typingDuration = text.length * speed;
+        const timer = setTimeout(() => {
+          handleTypingComplete();
+        }, typingDuration);
+        return () => clearTimeout(timer);
+      }
+      return void 0;
+    }, [currentDialogue, handleTypingComplete]);
+    const toggleAutoMode = useCallback(() => {
+      setIsAutoMode((prev) => !prev);
+    }, []);
+    const handleSkip = useCallback(() => {
+      const nextNodeIndex = currentNodeIndex + 1;
+      if (nextNodeIndex < nodes.length) {
+        goToNode(nextNodeIndex);
+      } else if (loop) {
+        goToNode(0);
+      } else {
+        onScriptComplete?.();
+      }
+    }, [currentNodeIndex, nodes.length, loop, goToNode, onScriptComplete]);
+    const handleStart = useCallback(() => {
+      setIsStarted(true);
+      isStartedRef.current = true;
+      if (currentNode && currentNode.dialogues.length > 0 && currentNode?.dialogues[0] !== void 0) {
+        addToHistory(currentNode?.dialogues[0], currentNodeIndex, 0);
+      }
+      setTimeout(() => {
+        playerRef.current?.play();
+      }, 100);
+    }, [currentNode, currentNodeIndex, addToHistory]);
+    useImperativeHandle(
+      ref,
+      () => ({
+        goToNode,
+        goToDialogue,
+        getCurrentNodeIndex: () => currentNodeIndex,
+        getCurrentDialogueIndex: () => currentDialogueIndex,
+        getHistory: () => history,
+        setAutoMode: setIsAutoMode,
+        skipTyping: () => {
+          typingCompleteRef.current = true;
+        }
+      }),
+      [goToNode, goToDialogue, currentNodeIndex, currentDialogueIndex, history]
+    );
+    useEffect(() => {
+      if (autoStart && currentNode && currentNode.dialogues.length > 0 && history.length === 0 && currentNode?.dialogues[0] !== void 0) {
+        addToHistory(currentNode?.dialogues[0], currentNodeIndex, 0);
+      }
+    }, [autoStart, currentNode, currentNodeIndex, history.length, addToHistory]);
+    useEffect(() => {
+      return () => {
+        if (autoTimerRef.current) {
+          clearTimeout(autoTimerRef.current);
+        }
+      };
+    }, []);
+    if (!currentNode) {
+      return /* @__PURE__ */ React6.createElement("div", { className: "flex h-full w-full items-center justify-center bg-black text-white" }, "\u5267\u672C\u4E3A\u7A7A");
+    }
+    return /* @__PURE__ */ React6.createElement(
+      "div",
+      {
+        ref: containerRef,
+        className: `relative bg-black ${className}`,
+        style: { width: "100%", height: "100%", overflow: "hidden", ...style }
+      },
+      /* @__PURE__ */ React6.createElement(
+        "div",
+        {
+          className: "absolute inset-0 w-full h-full",
+          style: {
+            zIndex: 0,
+            // 在加载期间隐藏，避免看到模型加载过程
+            opacity: isLoading || isTransitioning || !isAnimationPlaying ? 0 : 1,
+            transition: "opacity 0.3s ease-in-out"
+          }
+        },
+        !isTransitioning && /* @__PURE__ */ React6.createElement(
+          MMDPlayerBase,
+          {
+            key: currentNode.id,
+            ref: playerRef,
+            resources: currentNode.resources,
+            stage,
+            autoPlay: isStarted,
+            loop: currentNode.loopAnimation === true,
+            mobileOptimization,
+            onLoad: () => {
+              console.log("[MMDVisualNovel] MMDPlayerBase onLoad called");
+              setIsLoading(false);
+              if (isStartedRef.current) {
+                console.log("[MMDVisualNovel] Game already started, triggering play");
+                setTimeout(() => {
+                  playerRef.current?.play();
+                }, 100);
+              }
+            },
+            onPlay: () => {
+              console.log("[MMDVisualNovel] MMDPlayerBase onPlay called");
+              setIsAnimationPlaying(true);
+            },
+            onError
+          }
+        )
+      ),
+      /* @__PURE__ */ React6.createElement(
+        LoadingOverlay,
+        {
+          isLoading: (() => {
+            const shouldShowLoading = (isLoading || isTransitioning || !isAnimationPlaying) && isStarted;
+            console.log("[MMDVisualNovel] LoadingOverlay conditions:", {
+              isLoading,
+              isTransitioning,
+              isAnimationPlaying,
+              isStarted,
+              shouldShowLoading
+            });
+            return shouldShowLoading;
+          })(),
+          showStartScreen: !isStarted,
+          scriptName: script.name,
+          loadingText: "\u6B63\u5728\u51C6\u5907\u573A\u666F\u4E2D...",
+          startText: "\u70B9\u51FB\u5F00\u59CB",
+          onStart: handleStart
+        }
+      ),
+      (() => {
+        const shouldShow = isStarted && isAnimationPlaying && currentDialogue && !showHistory;
+        console.log("[MMDVisualNovel] DialogueBox render condition:", {
+          isStarted,
+          isAnimationPlaying,
+          hasDialogue: !!currentDialogue,
+          showHistory,
+          shouldShow,
+          dialogue: currentDialogue
+        });
+        return shouldShow ? /* @__PURE__ */ React6.createElement(
+          DialogueBox,
+          {
+            dialogue: currentDialogue,
+            theme: dialogueTheme,
+            isTyping,
+            isAutoMode,
+            onClick: handleDialogueClick,
+            onSkipTyping: () => {
+              typingCompleteRef.current = true;
+            },
+            onToggleAuto: toggleAutoMode,
+            onOpenHistory: () => setShowHistory(true),
+            onSkip: handleSkip,
+            showControls: true,
+            showSkipButton,
+            showAutoButton,
+            showHistoryButton
+          }
+        ) : null;
+      })(),
+      showHistory && /* @__PURE__ */ React6.createElement(
+        HistoryPanel,
+        {
+          history,
+          theme: dialogueTheme,
+          onClose: () => setShowHistory(false)
+        }
+      )
+    );
+  }
+);
+MMDVisualNovel.displayName = "MMDVisualNovel";
 
-export { MMDPlayerBase, MMDPlayerEnhanced, MMDPlayerEnhancedDebugInfo, MMDPlaylist, MMDPlaylistDebugInfo, loadAmmo };
+export { DialogueBox, HistoryPanel, LoadingOverlay, LoadingScreen, MMDPlayerBase, MMDPlayerEnhanced, MMDPlayerEnhancedDebugInfo, MMDPlaylist, MMDPlaylistDebugInfo, MMDVisualNovel, StartScreen, loadAmmo };
 //# sourceMappingURL=index.mjs.map
 //# sourceMappingURL=index.mjs.map