sa2kit 1.4.3 → 1.6.0

package/dist/mmd/index.mjs

@@ -1,8 +1,8 @@
 import '../chunk-BJTO5JO5.mjs';
-import React6, { forwardRef, useRef, useImperativeHandle, useEffect, useState, useCallback } from 'react';
+import React6, { forwardRef, useRef, useEffect, useImperativeHandle, useState, useCallback } from 'react';
 import * as THREE from 'three';
 import { OrbitControls, MMDLoader, MMDAnimationHelper } from 'three-stdlib';
-import { SkipBack, Pause, Play, SkipForward, Repeat, Repeat1, Grid3x3, Settings, Minimize, Maximize, X, Video, Check, User, Image, Music } from 'lucide-react';
+import { SkipBack, Pause, Play, SkipForward, Camera, Repeat, Repeat1, Shuffle, ListMusic, Music, X, Grid3x3, Settings, Minimize, Maximize, Video, Check, User, Image } from 'lucide-react';
 import { createPortal } from 'react-dom';
 
 // src/mmd/utils/ammo-loader.ts
@@ -47,6 +47,9 @@ var loadAmmo = (path = "/libs/ammo.wasm.js") => {
 };
 
 // src/mmd/components/MMDPlayerBase.tsx
+if (typeof window !== "undefined") {
+  THREE.Cache.enabled = true;
+}
 async function waitForMaterialsReady(object, renderer, scene, camera) {
   const textures = [];
   let meshCount = 0;
@@ -160,6 +163,7 @@ var MMDPlayerBase = forwardRef((props, ref) => {
     onPause,
     onEnded,
     onTimeUpdate,
+    onCameraChange,
     className,
     style
   } = props;
@@ -180,6 +184,10 @@ var MMDPlayerBase = forwardRef((props, ref) => {
   const animationClipRef = useRef(null);
   const loopRef = useRef(loop);
   const audioRef = useRef(null);
+  const latestCallbacks = useRef({ onPlay, onPause, onEnded, onTimeUpdate });
+  useEffect(() => {
+    latestCallbacks.current = { onPlay, onPause, onEnded, onTimeUpdate };
+  }, [onPlay, onPause, onEnded, onTimeUpdate]);
   const physicsComponentsRef = useRef({
     configs: [],
     dispatchers: [],
@@ -194,18 +202,18 @@ var MMDPlayerBase = forwardRef((props, ref) => {
       if (!isReadyRef.current) return;
       isPlayingRef.current = true;
       if (!clockRef.current.running) clockRef.current.start();
-      onPlay?.();
+      latestCallbacks.current.onPlay?.();
     },
     pause: () => {
       if (!isPlayingRef.current) return;
       isPlayingRef.current = false;
       clockRef.current.stop();
-      onPause?.();
+      latestCallbacks.current.onPause?.();
     },
     stop: () => {
       isPlayingRef.current = false;
       clockRef.current.stop();
-      onPause?.();
+      latestCallbacks.current.onPause?.();
     },
     seek: (time) => {
       console.warn("Seek not fully implemented in MMDPlayerBase yet");
@@ -226,6 +234,24 @@ var MMDPlayerBase = forwardRef((props, ref) => {
         rendererRef.current.render(sceneRef.current, cameraRef.current);
       }
       return rendererRef.current.domElement.toDataURL("image/png");
+    },
+    resetCamera: () => {
+      if (!cameraRef.current || !controlsRef.current) return;
+      const { cameraPosition, cameraTarget } = stage;
+      if (cameraPosition) {
+        const pos = cameraPosition;
+        cameraRef.current.position.set(pos.x, pos.y, pos.z);
+      } else {
+        cameraRef.current.position.set(0, 20, 30);
+      }
+      if (cameraTarget) {
+        const target = cameraTarget;
+        controlsRef.current.target.set(target.x, target.y, target.z);
+      } else {
+        controlsRef.current.target.set(0, 10, 0);
+      }
+      controlsRef.current.update();
+      onCameraChange?.(false);
     }
   }));
   useEffect(() => {
@@ -312,6 +338,11 @@ var MMDPlayerBase = forwardRef((props, ref) => {
         const scene = new THREE.Scene();
         if (stage.backgroundColor) {
           scene.background = new THREE.Color(stage.backgroundColor);
+        } else if (stage.backgroundImage) {
+          const textureLoader = new THREE.TextureLoader();
+          textureLoader.load(stage.backgroundImage, (texture) => {
+            scene.background = texture;
+          });
         }
         sceneRef.current = scene;
         const camera = new THREE.PerspectiveCamera(45, width / height, 0.1, 2e3);
@@ -368,6 +399,9 @@ var MMDPlayerBase = forwardRef((props, ref) => {
           controls.target.set(0, 10, 0);
         }
         controls.update();
+        controls.addEventListener("start", () => {
+          onCameraChange?.(true);
+        });
         controlsRef.current = controls;
         if (showAxes) {
           const axesHelper = new THREE.AxesHelper(20);
@@ -586,6 +620,25 @@ var MMDPlayerBase = forwardRef((props, ref) => {
             console.log("[MMDPlayerBase] \u2705 Stage materials and textures loaded");
             scene.add(stageMesh);
             console.log("[MMDPlayerBase] \u2705 Stage added to scene (fully loaded)");
+            if (resources.stageMotionPath && stageMesh) {
+              console.log("[MMDPlayerBase] Loading stage motion:", resources.stageMotionPath);
+              const anyLoader = loader;
+              const anyHelper = helper;
+              const anyStage = stageMesh;
+              anyLoader.loadAnimation(
+                resources.stageMotionPath,
+                anyStage,
+                (stageAnimation) => {
+                  if (checkCancelled()) return;
+                  anyHelper.add(anyStage, {
+                    animation: stageAnimation
+                  });
+                  console.log("[MMDPlayerBase] \u2705 Stage motion bound successfully");
+                },
+                void 0,
+                (err) => console.error("Failed to load stage motion:", err)
+              );
+            }
           } catch (err) {
             console.error("Failed to load stage:", err);
           }
@@ -1031,6 +1084,38 @@ ${errorMessage}
       audioRef.current.setLoop(loop);
     }
   }, [loop]);
+  useEffect(() => {
+    if (!isReadyRef.current) return;
+    if (sceneRef.current) {
+      if (stage.backgroundColor) {
+        sceneRef.current.background = new THREE.Color(stage.backgroundColor);
+      } else if (stage.backgroundImage) {
+        const textureLoader = new THREE.TextureLoader();
+        textureLoader.load(stage.backgroundImage, (texture) => {
+          if (sceneRef.current) sceneRef.current.background = texture;
+        });
+      }
+    }
+    if (sceneRef.current) {
+      sceneRef.current.traverse((obj) => {
+        if (obj instanceof THREE.AmbientLight && stage.ambientLightIntensity !== void 0) {
+          obj.intensity = stage.ambientLightIntensity;
+        }
+        if (obj instanceof THREE.DirectionalLight && stage.directionalLightIntensity !== void 0) {
+          obj.intensity = stage.directionalLightIntensity;
+        }
+      });
+    }
+    if (cameraRef.current && stage.cameraPosition) {
+      const pos = stage.cameraPosition;
+      cameraRef.current.position.set(pos.x, pos.y, pos.z);
+    }
+    if (controlsRef.current && stage.cameraTarget) {
+      const target = stage.cameraTarget;
+      controlsRef.current.target.set(target.x, target.y, target.z);
+      controlsRef.current.update();
+    }
+  }, [stage.backgroundColor, stage.backgroundImage, stage.ambientLightIntensity, stage.directionalLightIntensity, stage.cameraPosition, stage.cameraTarget]);
   const animate = () => {
     animationIdRef.current = requestAnimationFrame(animate);
     if (rendererRef.current && sceneRef.current && cameraRef.current) {
@@ -1040,11 +1125,11 @@ ${errorMessage}
         const elapsed = clockRef.current.elapsedTime;
         const duration = durationRef.current;
         const currentTime = duration > 0 && loopRef.current ? elapsed % duration : elapsed;
-        onTimeUpdate?.(currentTime);
+        latestCallbacks.current.onTimeUpdate?.(currentTime);
         if (!loopRef.current && duration > 0 && elapsed >= duration) {
           isPlayingRef.current = false;
           clockRef.current.stop();
-          onEnded?.();
+          latestCallbacks.current.onEnded?.();
         }
       }
       rendererRef.current.render(sceneRef.current, cameraRef.current);
@@ -1073,6 +1158,7 @@ var ControlPanel = ({
   isFullscreen,
   isLooping,
   isListLooping,
+  isCameraManual = false,
   showSettings,
   showAxes = false,
   showPrevNext = false,
@@ -1085,7 +1171,8 @@ var ControlPanel = ({
   onToggleAxes,
   onOpenSettings,
   onPrevious,
-  onNext
+  onNext,
+  onResetCamera
 }) => {
   return /* @__PURE__ */ React6.createElement("div", { className: "absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/80 to-transparent p-4 transition-opacity duration-300 hover:opacity-100" }, /* @__PURE__ */ React6.createElement("div", { className: "flex items-center justify-between text-white" }, /* @__PURE__ */ React6.createElement("div", { className: "flex items-center gap-2" }, showPrevNext && onPrevious && /* @__PURE__ */ React6.createElement(
     "button",
@@ -1127,6 +1214,14 @@ var ControlPanel = ({
       title: isLooping ? "\u5355\u66F2\u5FAA\u73AF\uFF1A\u5F00\u542F" : "\u5355\u66F2\u5FAA\u73AF\uFF1A\u5173\u95ED"
     },
     /* @__PURE__ */ React6.createElement(Repeat1, { size: 20 })
+  ), isCameraManual && onResetCamera && /* @__PURE__ */ React6.createElement(
+    "button",
+    {
+      onClick: onResetCamera,
+      className: "rounded-full p-2 bg-blue-500/30 text-blue-400 hover:bg-blue-500/50 hover:text-blue-300 transition-all animate-in zoom-in duration-300",
+      title: "\u6062\u590D\u521D\u59CB\u89C6\u89D2"
+    },
+    /* @__PURE__ */ React6.createElement(Camera, { size: 20 })
   ), onToggleAxes && /* @__PURE__ */ React6.createElement(
     "button",
     {
@@ -1533,6 +1628,7 @@ var MMDPlaylist = ({
   const [isListLooping, setIsListLooping] = useState(loop);
   const [showPlaylist, setShowPlaylist] = useState(false);
   const [isTransitioning, setIsTransitioning] = useState(false);
+  const [isCameraManual, setIsCameraManual] = useState(false);
   const playerRef = useRef(null);
   const containerRef = useRef(null);
   const preloadedRef = useRef(/* @__PURE__ */ new Set());
@@ -1684,7 +1780,7 @@ var MMDPlaylist = ({
         key: currentNode.id,
         ref: playerRef,
         resources: currentNode.resources,
-        stage,
+        stage: { ...stage, ...currentNode.stage },
         autoPlay: autoPlay && currentIndex === 0,
         loop: isLooping,
         showAxes,
@@ -1697,6 +1793,7 @@ var MMDPlaylist = ({
         },
         onPlay: () => setIsPlaying(true),
         onPause: () => setIsPlaying(false),
+        onCameraChange: (isManual) => setIsCameraManual(isManual),
         onEnded: handleEnded,
         onError
       }
@@ -1712,6 +1809,7 @@ var MMDPlaylist = ({
           isFullscreen,
           isLooping,
           isListLooping,
+          isCameraManual,
           showSettings: true,
           showAxes,
           showPrevNext,
@@ -1724,7 +1822,11 @@ var MMDPlaylist = ({
           onToggleLoop: () => setIsLooping(!isLooping),
           onToggleListLoop: () => setIsListLooping(!isListLooping),
           onToggleAxes: () => setShowAxes(!showAxes),
-          onOpenSettings: () => setShowPlaylist(!showPlaylist)
+          onOpenSettings: () => setShowPlaylist(!showPlaylist),
+          onResetCamera: () => {
+            playerRef.current?.resetCamera();
+            setIsCameraManual(false);
+          }
         }
       )
     ), showPlaylist && /* @__PURE__ */ React6.createElement("div", { className: "absolute inset-0 z-20 flex items-end bg-black/80 backdrop-blur-sm" }, /* @__PURE__ */ React6.createElement("div", { className: "w-full max-h-[60vh] overflow-y-auto bg-gray-900/95 rounded-t-xl" }, /* @__PURE__ */ React6.createElement("div", { className: "sticky top-0 flex items-center justify-between bg-gray-800 px-4 py-3 border-b border-gray-700" }, /* @__PURE__ */ React6.createElement("div", null, /* @__PURE__ */ React6.createElement("h3", { className: "text-white font-semibold" }, playlist.name), /* @__PURE__ */ React6.createElement("p", { className: "text-xs text-gray-400 mt-0.5" }, "\u5171 ", nodes.length, " \u4E2A\u8282\u70B9")), /* @__PURE__ */ React6.createElement(
@@ -1826,6 +1928,8 @@ var DialogueBox = ({
   onToggleAuto,
   onOpenHistory,
   onSkip,
+  onResetCamera,
+  isCameraManual = false,
   showControls = true,
   showSkipButton = true,
   showAutoButton = true,
@@ -1989,6 +2093,21 @@ var DialogueBox = ({
           title: "\u5386\u53F2\u8BB0\u5F55"
         },
         "\u{1F4DC} \u5386\u53F2"
+      ), isCameraManual && /* @__PURE__ */ React6.createElement(
+        "button",
+        {
+          onClick: (e) => {
+            e.stopPropagation();
+            onResetCamera?.();
+          },
+          className: "px-4 py-2 text-xs rounded-xl text-white font-medium hover:text-white transition-all backdrop-blur-lg border border-blue-400/50 hover:border-blue-400 hover:scale-105 active:scale-95 shadow-lg animate-in zoom-in duration-300",
+          style: {
+            background: "linear-gradient(135deg, rgba(59, 130, 246, 0.3), rgba(37, 99, 235, 0.2))",
+            boxShadow: "0 4px 16px rgba(59, 130, 246, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.2)"
+          },
+          title: "\u6062\u590D\u521D\u59CB\u89C6\u89D2"
+        },
+        "\u{1F3A5} \u6062\u590D\u89C6\u89D2"
       ), showAutoButton && /* @__PURE__ */ React6.createElement(
         "button",
         {
@@ -2572,6 +2691,105 @@ var LoadingOverlay = ({
   ));
 };
 LoadingOverlay.displayName = "LoadingOverlay";
+var SkipConfirmDialog = ({
+  onConfirm,
+  onCancel
+}) => {
+  const [isMounted, setIsMounted] = React6.useState(false);
+  React6.useEffect(() => {
+    setIsMounted(true);
+  }, []);
+  if (!isMounted) return null;
+  const content = /* @__PURE__ */ React6.createElement(
+    "div",
+    {
+      className: "fixed inset-0 flex items-center justify-center bg-black/40 backdrop-blur-sm pointer-events-auto",
+      style: { zIndex: 999999 }
+    },
+    /* @__PURE__ */ React6.createElement(
+      "div",
+      {
+        className: "p-8 rounded-3xl border border-white/30 shadow-2xl max-w-sm w-full mx-4 overflow-hidden relative",
+        style: {
+          background: `linear-gradient(135deg, 
+            rgba(255, 255, 255, 0.2) 0%, 
+            rgba(255, 255, 255, 0.1) 100%)`,
+          backdropFilter: "blur(32px) saturate(200%)",
+          WebkitBackdropFilter: "blur(32px) saturate(200%)"
+        }
+      },
+      /* @__PURE__ */ React6.createElement("h3", { className: "text-xl font-bold text-white mb-4 drop-shadow-md" }, "\u52A8\u753B\u5C1A\u672A\u64AD\u653E\u5B8C\u6210"),
+      /* @__PURE__ */ React6.createElement("p", { className: "text-white/90 mb-8 leading-relaxed drop-shadow-sm" }, "\u5F53\u524D\u573A\u666F\u7684\u52A8\u753B\u8FD8\u6CA1\u6709\u5B8C\u6574\u64AD\u653E\u4E00\u904D\uFF0C\u662F\u5426\u76F4\u63A5\u8DF3\u8F6C\u5230\u4E0B\u4E00\u4E2A\u573A\u666F\uFF1F"),
+      /* @__PURE__ */ React6.createElement("div", { className: "flex justify-end gap-4" }, /* @__PURE__ */ React6.createElement(
+        "button",
+        {
+          onClick: onCancel,
+          className: "px-6 py-2.5 rounded-2xl text-white/80 font-medium hover:text-white hover:bg-white/10 transition-all border border-white/10 hover:border-white/30"
+        },
+        "\u53D6\u6D88"
+      ), /* @__PURE__ */ React6.createElement(
+        "button",
+        {
+          onClick: onConfirm,
+          className: "px-6 py-2.5 rounded-2xl bg-white/20 hover:bg-white/30 text-white font-bold transition-all border border-white/40 shadow-lg hover:scale-105 active:scale-95"
+        },
+        "\u76F4\u63A5\u8DF3\u8F6C"
+      ))
+    )
+  );
+  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(content, portalContainer);
+};
+var ChoiceMenu = ({
+  choices,
+  onSelect,
+  theme
+}) => {
+  const [isMounted, setIsMounted] = React6.useState(false);
+  React6.useEffect(() => {
+    setIsMounted(true);
+  }, []);
+  if (!isMounted) return null;
+  const content = /* @__PURE__ */ React6.createElement(
+    "div",
+    {
+      className: "fixed inset-0 flex flex-col items-center justify-center bg-black/20 backdrop-blur-sm pointer-events-auto transition-all animate-in fade-in duration-500",
+      style: { zIndex: 1e6 }
+    },
+    /* @__PURE__ */ React6.createElement("div", { className: "flex flex-col gap-4 w-full max-w-md px-6" }, choices.map((choice, index) => /* @__PURE__ */ React6.createElement(
+      "button",
+      {
+        key: index,
+        onClick: () => onSelect(choice),
+        className: "w-full py-4 px-8 rounded-2xl text-white font-bold text-lg transition-all border border-white/20 shadow-xl hover:scale-105 active:scale-95 group relative overflow-hidden",
+        style: {
+          background: `linear-gradient(135deg, 
+                rgba(255, 255, 255, 0.2) 0%, 
+                rgba(255, 255, 255, 0.1) 100%)`,
+          backdropFilter: "blur(32px) saturate(200%)",
+          WebkitBackdropFilter: "blur(32px) saturate(200%)"
+        }
+      },
+      /* @__PURE__ */ React6.createElement("div", { className: "absolute inset-0 bg-white/10 opacity-0 group-hover:opacity-100 transition-opacity" }),
+      /* @__PURE__ */ React6.createElement("div", { className: "absolute inset-0 bg-gradient-to-r from-transparent via-white/5 to-transparent -translate-x-full group-hover:translate-x-full transition-transform duration-1000 ease-in-out" }),
+      /* @__PURE__ */ React6.createElement("span", { className: "relative z-10 drop-shadow-md" }, choice.text)
+    )))
+  );
+  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(content, portalContainer);
+};
 
 // src/mmd/visual-novel/MMDVisualNovel.tsx
 var MMDVisualNovel = forwardRef(
@@ -2605,11 +2823,17 @@ var MMDVisualNovel = forwardRef(
     const [showHistory, setShowHistory] = useState(false);
     const [history, setHistory] = useState([]);
     const [isStarted, setIsStarted] = useState(autoStart);
+    const [isVmdFinished, setIsVmdFinished] = useState(false);
+    const [pendingNodeIndex, setPendingNodeIndex] = useState(null);
+    const [showChoices, setShowChoices] = useState(false);
+    const [isCameraManual, setIsCameraManual] = useState(false);
     const playerRef = useRef(null);
     const containerRef = useRef(null);
     const autoTimerRef = useRef(null);
     const typingCompleteRef = useRef(false);
     const isStartedRef = useRef(autoStart);
+    const lastAnimationTimeRef = useRef(0);
+    const isVmdFinishedRef = useRef(false);
     const currentNode = nodes[currentNodeIndex];
     const currentDialogue = currentNode?.dialogues[currentDialogueIndex] || null;
     const addToHistory = useCallback((dialogue, nodeIndex, dialogueIndex) => {
@@ -2637,6 +2861,8 @@ var MMDVisualNovel = forwardRef(
         addToHistory(nextDialogue, currentNodeIndex, nextDialogueIndex);
         onDialogueChange?.(nextDialogue, nextDialogueIndex, currentNodeIndex);
         typingCompleteRef.current = false;
+      } else if (currentNode.choices && currentNode.choices.length > 0) {
+        setShowChoices(true);
       } else {
         const nextNodeIndex = currentNodeIndex + 1;
         if (nextNodeIndex < nodes.length) {
@@ -2649,15 +2875,26 @@ var MMDVisualNovel = forwardRef(
       }
     }, [currentNode, currentDialogueIndex, currentNodeIndex, nodes.length, loop, addToHistory, onDialogueChange, onScriptComplete]);
     const goToNode = useCallback(
-      (nodeIndex) => {
+      (nodeIndex, force = false) => {
         if (nodeIndex < 0 || nodeIndex >= nodes.length) return;
         if (isTransitioning) return;
         const node = nodes[nodeIndex];
         if (!node) return;
+        const currentResources = nodes[currentNodeIndex]?.resources;
+        if (!force && currentResources?.motionPath && !isVmdFinishedRef.current) {
+          console.log("[MMDVisualNovel] VMD not finished, showing confirmation");
+          setPendingNodeIndex(nodeIndex);
+          return;
+        }
         console.log(`[MMDVisualNovel] Transitioning to node ${nodeIndex}`);
         setIsTransitioning(true);
         setIsLoading(true);
         setIsAnimationPlaying(false);
+        setIsVmdFinished(false);
+        isVmdFinishedRef.current = false;
+        setPendingNodeIndex(null);
+        setShowChoices(false);
+        lastAnimationTimeRef.current = 0;
         setTimeout(() => {
           setCurrentNodeIndex(nodeIndex);
           setCurrentDialogueIndex(0);
@@ -2675,7 +2912,7 @@ var MMDVisualNovel = forwardRef(
           }, 100);
         }, 300);
       },
-      [nodes, isTransitioning, addToHistory, onNodeChange, onDialogueChange]
+      [nodes, isTransitioning, addToHistory, onNodeChange, onDialogueChange, currentNodeIndex, isVmdFinished]
     );
     const goToDialogue = useCallback(
       (dialogueIndex) => {
@@ -2724,6 +2961,10 @@ var MMDVisualNovel = forwardRef(
       setIsAutoMode((prev) => !prev);
     }, []);
     const handleSkip = useCallback(() => {
+      if (currentNode?.choices && currentNode.choices.length > 0) {
+        setShowChoices(true);
+        return;
+      }
       const nextNodeIndex = currentNodeIndex + 1;
       if (nextNodeIndex < nodes.length) {
         goToNode(nextNodeIndex);
@@ -2797,7 +3038,7 @@ var MMDVisualNovel = forwardRef(
             key: currentNode.id,
             ref: playerRef,
             resources: currentNode.resources,
-            stage,
+            stage: { ...stage, ...currentNode.stage },
             autoPlay: isStarted,
             loop: currentNode.loopAnimation === true,
             mobileOptimization,
@@ -2815,6 +3056,27 @@ var MMDVisualNovel = forwardRef(
               console.log("[MMDVisualNovel] MMDPlayerBase onPlay called");
               setIsAnimationPlaying(true);
             },
+            onTimeUpdate: (time) => {
+              const duration = playerRef.current?.getDuration() || 0;
+              const isNearEnd = duration > 0 && time > duration * 0.98;
+              const isLooped = time < lastAnimationTimeRef.current && lastAnimationTimeRef.current > 0;
+              if (isNearEnd || isLooped) {
+                if (!isVmdFinishedRef.current) {
+                  console.log("[MMDVisualNovel] VMD finished/looped, marking as finished");
+                  isVmdFinishedRef.current = true;
+                  setIsVmdFinished(true);
+                }
+              }
+              lastAnimationTimeRef.current = time;
+            },
+            onEnded: () => {
+              console.log("[MMDVisualNovel] VMD ended, marking as finished");
+              isVmdFinishedRef.current = true;
+              setIsVmdFinished(true);
+            },
+            onCameraChange: (isManual) => {
+              setIsCameraManual(isManual);
+            },
             onError
           }
         )
@@ -2841,12 +3103,13 @@ var MMDVisualNovel = forwardRef(
         }
       ),
       (() => {
-        const shouldShow = isStarted && isAnimationPlaying && currentDialogue && !showHistory;
+        const shouldShow = isStarted && isAnimationPlaying && currentDialogue && !showHistory && !showChoices;
         console.log("[MMDVisualNovel] DialogueBox render condition:", {
           isStarted,
           isAnimationPlaying,
           hasDialogue: !!currentDialogue,
           showHistory,
+          showChoices,
           shouldShow,
           dialogue: currentDialogue
         });
@@ -2864,6 +3127,11 @@ var MMDVisualNovel = forwardRef(
             onToggleAuto: toggleAutoMode,
             onOpenHistory: () => setShowHistory(true),
             onSkip: handleSkip,
+            onResetCamera: () => {
+              playerRef.current?.resetCamera();
+              setIsCameraManual(false);
+            },
+            isCameraManual,
             showControls: true,
             showSkipButton,
             showAutoButton,
@@ -2871,6 +3139,35 @@ var MMDVisualNovel = forwardRef(
           }
         ) : null;
       })(),
+      pendingNodeIndex !== null && /* @__PURE__ */ React6.createElement(
+        SkipConfirmDialog,
+        {
+          onConfirm: () => {
+            if (pendingNodeIndex !== null) {
+              goToNode(pendingNodeIndex, true);
+            }
+          },
+          onCancel: () => {
+            setPendingNodeIndex(null);
+          }
+        }
+      ),
+      showChoices && currentNode.choices && /* @__PURE__ */ React6.createElement(
+        ChoiceMenu,
+        {
+          choices: currentNode.choices,
+          theme: dialogueTheme,
+          onSelect: (choice) => {
+            choice.onSelect?.();
+            if (choice.nextNodeIndex === currentNodeIndex) {
+              goToDialogue(choice.nextDialogueIndex || 0);
+              setShowChoices(false);
+            } else {
+              goToNode(choice.nextNodeIndex, true);
+            }
+          }
+        }
+      ),
       showHistory && /* @__PURE__ */ React6.createElement(
         HistoryPanel,
         {
@@ -2883,7 +3180,408 @@ var MMDVisualNovel = forwardRef(
   }
 );
 MMDVisualNovel.displayName = "MMDVisualNovel";
+var MusicControls = ({
+  isPlaying,
+  currentTime,
+  duration,
+  loopMode,
+  isCameraManual = false,
+  onPlayPause,
+  onNext,
+  onPrevious,
+  onSeek,
+  onToggleLoop,
+  onTogglePlaylist,
+  onResetCamera,
+  className = ""
+}) => {
+  const formatTime = (seconds) => {
+    const mins = Math.floor(seconds / 60);
+    const secs = Math.floor(seconds % 60);
+    return `${mins}:${secs.toString().padStart(2, "0")}`;
+  };
+  const progress = duration > 0 ? currentTime / duration * 100 : 0;
+  return /* @__PURE__ */ React6.createElement(
+    "div",
+    {
+      className: `w-full max-w-4xl mx-auto px-6 py-4 bg-white/10 backdrop-blur-xl border border-white/20 rounded-2xl shadow-2xl pointer-events-auto transition-all group ${className}`
+    },
+    /* @__PURE__ */ React6.createElement("div", { className: "relative w-full h-1.5 bg-white/20 rounded-full mb-4 cursor-pointer group/progress overflow-hidden" }, /* @__PURE__ */ React6.createElement(
+      "div",
+      {
+        className: "absolute h-full bg-blue-500 rounded-full transition-all duration-300",
+        style: { width: `${progress}%` }
+      }
+    ), /* @__PURE__ */ React6.createElement(
+      "input",
+      {
+        type: "range",
+        min: 0,
+        max: duration || 100,
+        value: currentTime,
+        onChange: (e) => onSeek(Number(e.target.value)),
+        className: "absolute inset-0 w-full h-full opacity-0 cursor-pointer"
+      }
+    )),
+    /* @__PURE__ */ React6.createElement("div", { className: "flex items-center justify-between" }, /* @__PURE__ */ React6.createElement("div", { className: "flex items-center gap-2 text-xs font-mono text-white/60 w-32" }, /* @__PURE__ */ React6.createElement("span", null, formatTime(currentTime)), /* @__PURE__ */ React6.createElement("span", null, "/"), /* @__PURE__ */ React6.createElement("span", null, formatTime(duration))), /* @__PURE__ */ React6.createElement("div", { className: "flex items-center gap-6" }, /* @__PURE__ */ React6.createElement(
+      "button",
+      {
+        onClick: onPrevious,
+        className: "text-white/80 hover:text-white transition-colors"
+      },
+      /* @__PURE__ */ React6.createElement(SkipBack, { className: "w-6 h-6 fill-current" })
+    ), /* @__PURE__ */ React6.createElement(
+      "button",
+      {
+        onClick: onPlayPause,
+        className: "w-12 h-12 flex items-center justify-center bg-blue-500 hover:bg-blue-400 text-white rounded-full shadow-lg shadow-blue-500/20 transition-all hover:scale-105 active:scale-95"
+      },
+      isPlaying ? /* @__PURE__ */ React6.createElement(Pause, { className: "w-6 h-6 fill-current" }) : /* @__PURE__ */ React6.createElement(Play, { className: "w-6 h-6 fill-current ml-1" })
+    ), /* @__PURE__ */ React6.createElement(
+      "button",
+      {
+        onClick: onNext,
+        className: "text-white/80 hover:text-white transition-colors"
+      },
+      /* @__PURE__ */ React6.createElement(SkipForward, { className: "w-6 h-6 fill-current" })
+    )), /* @__PURE__ */ React6.createElement("div", { className: "flex items-center gap-4 w-32 justify-end" }, isCameraManual && /* @__PURE__ */ React6.createElement(
+      "button",
+      {
+        onClick: onResetCamera,
+        className: "text-blue-400 hover:text-blue-300 transition-colors animate-in zoom-in duration-300",
+        title: "\u6062\u590D\u521D\u59CB\u89C6\u89D2"
+      },
+      /* @__PURE__ */ React6.createElement(Camera, { className: "w-5 h-5" })
+    ), /* @__PURE__ */ React6.createElement(
+      "button",
+      {
+        onClick: onToggleLoop,
+        className: "text-white/60 hover:text-white transition-colors",
+        title: loopMode
+      },
+      loopMode === "list" && /* @__PURE__ */ React6.createElement(Repeat, { className: "w-5 h-5" }),
+      loopMode === "single" && /* @__PURE__ */ React6.createElement(Repeat1, { className: "w-5 h-5 text-blue-400" }),
+      loopMode === "shuffle" && /* @__PURE__ */ React6.createElement(Shuffle, { className: "w-5 h-5 text-orange-400" })
+    ), /* @__PURE__ */ React6.createElement(
+      "button",
+      {
+        onClick: onTogglePlaylist,
+        className: "text-white/60 hover:text-white transition-colors"
+      },
+      /* @__PURE__ */ React6.createElement(ListMusic, { className: "w-5 h-5" })
+    )))
+  );
+};
+var PlaylistPanel = ({
+  tracks,
+  currentIndex,
+  isOpen,
+  onClose,
+  onSelectTrack,
+  className = ""
+}) => {
+  if (!isOpen) return null;
+  return /* @__PURE__ */ React6.createElement(
+    "div",
+    {
+      className: `fixed inset-y-0 right-0 w-80 bg-gray-900/90 backdrop-blur-2xl border-l border-white/10 shadow-2xl z-50 flex flex-col pointer-events-auto transform transition-transform duration-500 ease-out ${isOpen ? "translate-x-0" : "translate-x-full"} ${className}`
+    },
+    /* @__PURE__ */ React6.createElement("div", { className: "flex items-center justify-between p-6 border-b border-white/10" }, /* @__PURE__ */ React6.createElement("div", { className: "flex items-center gap-3" }, /* @__PURE__ */ React6.createElement(Music, { className: "w-5 h-5 text-blue-400" }), /* @__PURE__ */ React6.createElement("h3", { className: "text-lg font-bold text-white" }, "\u64AD\u653E\u5217\u8868")), /* @__PURE__ */ React6.createElement(
+      "button",
+      {
+        onClick: onClose,
+        className: "p-2 text-white/60 hover:text-white transition-colors"
+      },
+      /* @__PURE__ */ React6.createElement(X, { className: "w-5 h-5" })
+    )),
+    /* @__PURE__ */ React6.createElement("div", { className: "flex-1 overflow-y-auto p-4 space-y-2 custom-scrollbar" }, tracks.map((track, index) => {
+      const isActive = index === currentIndex;
+      return /* @__PURE__ */ React6.createElement(
+        "button",
+        {
+          key: track.id,
+          onClick: () => onSelectTrack(index),
+          className: `w-full flex items-center gap-4 p-3 rounded-xl transition-all group ${isActive ? "bg-blue-500/20 border border-blue-500/30" : "hover:bg-white/5 border border-transparent"}`
+        },
+        /* @__PURE__ */ React6.createElement("div", { className: "relative w-12 h-12 flex-shrink-0 rounded-lg overflow-hidden bg-gray-800" }, track.coverUrl ? /* @__PURE__ */ React6.createElement("img", { src: track.coverUrl, alt: track.title, className: "w-full h-full object-cover" }) : /* @__PURE__ */ React6.createElement("div", { className: "w-full h-full flex items-center justify-center text-white/20" }, /* @__PURE__ */ React6.createElement(Music, { className: "w-6 h-6" })), isActive && /* @__PURE__ */ React6.createElement("div", { className: "absolute inset-0 bg-blue-500/40 flex items-center justify-center" }, /* @__PURE__ */ React6.createElement("div", { className: "flex gap-1 items-end h-4" }, /* @__PURE__ */ React6.createElement("div", { className: "w-1 bg-white animate-music-bar-1" }), /* @__PURE__ */ React6.createElement("div", { className: "w-1 bg-white animate-music-bar-2" }), /* @__PURE__ */ React6.createElement("div", { className: "w-1 bg-white animate-music-bar-3" })))),
+        /* @__PURE__ */ React6.createElement("div", { className: "flex-1 text-left min-w-0" }, /* @__PURE__ */ React6.createElement("h4", { className: `text-sm font-bold truncate ${isActive ? "text-blue-400" : "text-white/90"}` }, track.title), /* @__PURE__ */ React6.createElement("p", { className: "text-xs text-white/40 truncate mt-0.5" }, track.artist || "\u672A\u77E5\u827A\u672F\u5BB6")),
+        !isActive && /* @__PURE__ */ React6.createElement("div", { className: "opacity-0 group-hover:opacity-100 transition-opacity" }, /* @__PURE__ */ React6.createElement(Play, { className: "w-4 h-4 text-white/40 fill-current" }))
+      );
+    })),
+    /* @__PURE__ */ React6.createElement("div", { className: "p-6 border-t border-white/10" }, /* @__PURE__ */ React6.createElement("p", { className: "text-xs text-gray-500 text-center" }, "\u5171 ", tracks.length, " \u9996\u66F2\u76EE")),
+    /* @__PURE__ */ React6.createElement("style", { dangerouslySetInnerHTML: { __html: `
+        .custom-scrollbar::-webkit-scrollbar {
+          width: 4px;
+        }
+        .custom-scrollbar::-webkit-scrollbar-track {
+          background: transparent;
+        }
+        .custom-scrollbar::-webkit-scrollbar-thumb {
+          background: rgba(255, 255, 255, 0.1);
+          border-radius: 10px;
+        }
+        .custom-scrollbar::-webkit-scrollbar-thumb:hover {
+          background: rgba(255, 255, 255, 0.2);
+        }
+        @keyframes music-bar-1 {
+          0%, 100% { height: 4px; }
+          50% { height: 12px; }
+        }
+        @keyframes music-bar-2 {
+          0%, 100% { height: 8px; }
+          50% { height: 16px; }
+        }
+        @keyframes music-bar-3 {
+          0%, 100% { height: 6px; }
+          50% { height: 14px; }
+        }
+        .animate-music-bar-1 { animation: music-bar-1 0.6s infinite; }
+        .animate-music-bar-2 { animation: music-bar-2 0.8s infinite; }
+        .animate-music-bar-3 { animation: music-bar-3 0.7s infinite; }
+      ` } })
+  );
+};
+var TrackInfo = ({ track, className = "" }) => {
+  return /* @__PURE__ */ React6.createElement("div", { className: `flex flex-col items-center text-center gap-2 ${className}` }, /* @__PURE__ */ React6.createElement("div", { className: "px-4 py-1.5 bg-black/40 backdrop-blur-md rounded-full border border-white/10 shadow-lg" }, /* @__PURE__ */ React6.createElement("h2", { className: "text-lg font-bold text-white tracking-wider truncate max-w-md" }, track.title)), /* @__PURE__ */ React6.createElement("p", { className: "text-sm font-medium text-white/60 drop-shadow-md" }, track.artist || "\u672A\u77E5\u827A\u672F\u5BB6"));
+};
+
+// src/mmd/music-player/MMDMusicPlayer.tsx
+var MMDMusicPlayer = forwardRef(
+  ({
+    config,
+    stage,
+    mobileOptimization,
+    initialTrackIndex = 0,
+    onTrackChange,
+    onPlayPause,
+    onProgress,
+    onError,
+    className,
+    style
+  }, ref) => {
+    const { tracks, autoPlay = false, defaultLoopMode = "list" } = config;
+    const [currentIndex, setCurrentIndex] = useState(initialTrackIndex);
+    const [isPlaying, setIsPlaying] = useState(autoPlay);
+    const [isLoading, setIsLoading] = useState(true);
+    const [isTransitioning, setIsTransitioning] = useState(false);
+    const [currentTime, setCurrentTime] = useState(0);
+    const [duration, setDuration] = useState(0);
+    const [loopMode, setLoopMode] = useState(defaultLoopMode);
+    const [showPlaylist, setShowPlaylist] = useState(false);
+    const [isUIVisible, setIsUIVisible] = useState(true);
+    const [isCameraManual, setIsCameraManual] = useState(false);
+    const playerRef = useRef(null);
+    const containerRef = useRef(null);
+    const isStartedRef = useRef(autoPlay);
+    const uiTimeoutRef = useRef(null);
+    const currentTrack = tracks[currentIndex];
+    const goToTrack = useCallback(
+      (index) => {
+        if (index < 0 || index >= tracks.length) return;
+        if (isTransitioning) return;
+        const track = tracks[index];
+        if (!track) return;
+        console.log(`[MMDMusicPlayer] Transitioning to track ${index}: ${track.title}`);
+        setIsTransitioning(true);
+        setIsLoading(true);
+        const wasPlaying = isPlaying;
+        setIsPlaying(false);
+        setTimeout(() => {
+          setCurrentIndex(index);
+          setCurrentTime(0);
+          setDuration(0);
+          onTrackChange?.(track, index);
+          setTimeout(() => {
+            setIsTransitioning(false);
+            if (wasPlaying) {
+              isStartedRef.current = true;
+            }
+          }, 100);
+        }, 300);
+      },
+      [tracks, isTransitioning, isPlaying, onTrackChange]
+    );
+    const next = useCallback(() => {
+      let nextIndex = currentIndex + 1;
+      if (loopMode === "shuffle") {
+        nextIndex = Math.floor(Math.random() * tracks.length);
+      } else if (nextIndex >= tracks.length) {
+        nextIndex = 0;
+      }
+      goToTrack(nextIndex);
+    }, [currentIndex, tracks.length, loopMode, goToTrack]);
+    const previous = useCallback(() => {
+      let prevIndex = currentIndex - 1;
+      if (prevIndex < 0) {
+        prevIndex = tracks.length - 1;
+      }
+      goToTrack(prevIndex);
+    }, [currentIndex, tracks.length, goToTrack]);
+    useImperativeHandle(
+      ref,
+      () => ({
+        play: () => {
+          setIsPlaying(true);
+          isStartedRef.current = true;
+          playerRef.current?.play();
+        },
+        pause: () => {
+          setIsPlaying(false);
+          isStartedRef.current = false;
+          playerRef.current?.pause();
+        },
+        next,
+        previous,
+        goToTrack,
+        setLoopMode,
+        getState: () => ({
+          currentIndex,
+          isPlaying,
+          currentTime,
+          duration,
+          loopMode
+        })
+      }),
+      [next, previous, goToTrack, currentIndex, isPlaying, currentTime, duration, loopMode]
+    );
+    const handleEnded = useCallback(() => {
+      if (loopMode === "single") {
+        playerRef.current?.seek(0);
+        playerRef.current?.play();
+      } else {
+        next();
+      }
+    }, [loopMode, next]);
+    const handleTimeUpdate = useCallback((time) => {
+      setCurrentTime(time);
+      if (playerRef.current) {
+        const total = playerRef.current.getDuration();
+        setDuration(total);
+        onProgress?.(time, total);
+      }
+    }, [onProgress]);
+    const resetUITimeout = useCallback(() => {
+      setIsUIVisible(true);
+      if (uiTimeoutRef.current) clearTimeout(uiTimeoutRef.current);
+      if (isPlaying) {
+        uiTimeoutRef.current = setTimeout(() => {
+          if (!showPlaylist) setIsUIVisible(false);
+        }, 5e3);
+      }
+    }, [isPlaying, showPlaylist]);
+    useEffect(() => {
+      resetUITimeout();
+      return () => {
+        if (uiTimeoutRef.current) clearTimeout(uiTimeoutRef.current);
+      };
+    }, [resetUITimeout]);
+    if (!currentTrack) {
+      return /* @__PURE__ */ React6.createElement("div", { className: "flex h-full w-full items-center justify-center bg-black text-white" }, "\u64AD\u653E\u5217\u8868\u4E3A\u7A7A");
+    }
+    return /* @__PURE__ */ React6.createElement(
+      "div",
+      {
+        ref: containerRef,
+        className: `relative bg-black group ${className}`,
+        style: { width: "100%", height: "100%", overflow: "hidden", ...style },
+        onMouseMove: resetUITimeout,
+        onClick: resetUITimeout
+      },
+      /* @__PURE__ */ React6.createElement(
+        "div",
+        {
+          className: "absolute inset-0 w-full h-full",
+          style: {
+            zIndex: 0,
+            opacity: isLoading || isTransitioning ? 0 : 1,
+            transition: "opacity 0.5s ease-in-out"
+          }
+        },
+        !isTransitioning && /* @__PURE__ */ React6.createElement(
+          MMDPlayerBase,
+          {
+            key: currentTrack.id,
+            ref: playerRef,
+            resources: currentTrack.resources,
+            stage: { ...stage, ...currentTrack.stage },
+            autoPlay: isStartedRef.current,
+            loop: loopMode === "single",
+            mobileOptimization,
+            onLoad: () => {
+              console.log("[MMDMusicPlayer] Track loaded");
+              setIsLoading(false);
+              if (isStartedRef.current) {
+                playerRef.current?.play();
+                setIsPlaying(true);
+              }
+            },
+            onPlay: () => {
+              setIsPlaying(true);
+              onPlayPause?.(true);
+            },
+            onPause: () => {
+              setIsPlaying(false);
+              onPlayPause?.(false);
+            },
+            onCameraChange: (isManual) => {
+              setIsCameraManual(isManual);
+            },
+            onTimeUpdate: handleTimeUpdate,
+            onEnded: handleEnded,
+            onError
+          }
+        )
+      ),
+      (isLoading || isTransitioning) && /* @__PURE__ */ React6.createElement("div", { className: "absolute inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-md" }, /* @__PURE__ */ React6.createElement("div", { className: "flex flex-col items-center gap-4" }, /* @__PURE__ */ React6.createElement("div", { className: "h-12 w-12 animate-spin rounded-full border-4 border-white/20 border-t-blue-500" }), /* @__PURE__ */ React6.createElement("div", { className: "text-white font-medium" }, isTransitioning ? "\u51C6\u5907\u4E0B\u4E00\u9996..." : "\u6B63\u5728\u52A0\u8F7D\u821E\u53F0..."))),
+      /* @__PURE__ */ React6.createElement(
+        "div",
+        {
+          className: `absolute inset-0 z-10 flex flex-col justify-between transition-opacity duration-700 pointer-events-none ${isUIVisible ? "opacity-100" : "opacity-0"}`
+        },
+        /* @__PURE__ */ React6.createElement("div", { className: "pt-12 px-8 flex justify-center" }, /* @__PURE__ */ React6.createElement(TrackInfo, { track: currentTrack })),
+        /* @__PURE__ */ React6.createElement("div", { className: "pb-12 px-8" }, /* @__PURE__ */ React6.createElement(
+          MusicControls,
+          {
+            isPlaying,
+            currentTime,
+            duration,
+            loopMode,
+            isCameraManual,
+            onPlayPause: () => isPlaying ? playerRef.current?.pause() : playerRef.current?.play(),
+            onNext: next,
+            onPrevious: previous,
+            onSeek: (time) => playerRef.current?.seek(time),
+            onResetCamera: () => {
+              playerRef.current?.resetCamera();
+              setIsCameraManual(false);
+            },
+            onToggleLoop: () => {
+              const modes = ["list", "single", "shuffle"];
+              const nextMode = modes[(modes.indexOf(loopMode) + 1) % modes.length];
+              setLoopMode(nextMode);
+            },
+            onTogglePlaylist: () => setShowPlaylist(!showPlaylist)
+          }
+        ))
+      ),
+      /* @__PURE__ */ React6.createElement(
+        PlaylistPanel,
+        {
+          tracks,
+          currentIndex,
+          isOpen: showPlaylist,
+          onClose: () => setShowPlaylist(false),
+          onSelectTrack: (index) => {
+            goToTrack(index);
+            setShowPlaylist(false);
+          }
+        }
+      )
+    );
+  }
+);
+MMDMusicPlayer.displayName = "MMDMusicPlayer";
 
-export { DialogueBox, HistoryPanel, LoadingOverlay, LoadingScreen, MMDPlayerBase, MMDPlayerEnhanced, MMDPlayerEnhancedDebugInfo, MMDPlaylist, MMDPlaylistDebugInfo, MMDVisualNovel, StartScreen, loadAmmo };
+export { DialogueBox, HistoryPanel, LoadingOverlay, LoadingScreen, MMDMusicPlayer, MMDPlayerBase, MMDPlayerEnhanced, MMDPlayerEnhancedDebugInfo, MMDPlaylist, MMDPlaylistDebugInfo, MMDVisualNovel, MusicControls, PlaylistPanel, StartScreen, TrackInfo, loadAmmo };
 //# sourceMappingURL=index.mjs.map
 //# sourceMappingURL=index.mjs.map