sa2kit 1.6.14 → 1.6.15

package/dist/mmd/index.mjs

@@ -1,12 +1,12 @@
-import { useMusic } from '../chunk-GGGTJETD.mjs';
-import '../chunk-TGL6BATG.mjs';
+import { useMusic } from '../chunk-3WOAPLEG.mjs';
+import '../chunk-MW4BCIZC.mjs';
 import { PMXParser } from '../chunk-VRTRSEEH.mjs';
 export { PMXParser } from '../chunk-VRTRSEEH.mjs';
 import '../chunk-BJTO5JO5.mjs';
-import React10, { forwardRef, useRef, useEffect, useImperativeHandle, useState, useCallback } from 'react';
+import React10, { forwardRef, useRef, useState, useEffect, useImperativeHandle, useCallback, useMemo } from 'react';
 import * as THREE2 from 'three';
 import { OutlineEffect, OrbitControls, MMDLoader, MMDAnimationHelper } from 'three-stdlib';
-import { AlertCircle, Camera, Settings, RefreshCw, CameraOff, X, Check, SkipBack, Pause, Play, SkipForward, Repeat, Repeat1, Shuffle, ListMusic, Music, Search, Loader2, Grid3x3, Minimize, Maximize, Video, User, Image as Image$1 } from 'lucide-react';
+import { Sparkles, AlertCircle, Camera, Settings, RefreshCw, CameraOff, X, RotateCcw, SkipBack, Pause, Play, SkipForward, Repeat, Repeat1, Shuffle, ListMusic, Music, Search, Loader2, ChevronDown, Grid3x3, Minimize, Maximize, Video, Check, User, Image as Image$1 } from 'lucide-react';
 import { createPortal } from 'react-dom';
 
 // src/mmd/pmx/editor/PMXEditor.ts
@@ -1153,6 +1153,7 @@ var MMDPlayerBase = forwardRef((props, ref) => {
   const audioRef = useRef(null);
   const audioListenerRef = useRef(null);
   const audioLoaderRef = useRef(new THREE2.AudioLoader());
+  const [isAudioSystemReady, setIsAudioSystemReady] = useState(false);
   const latestCallbacks = useRef({ onPlay, onPause, onEnded, onTimeUpdate });
   useEffect(() => {
     latestCallbacks.current = { onPlay, onPause, onEnded, onTimeUpdate };
@@ -1170,6 +1171,10 @@ var MMDPlayerBase = forwardRef((props, ref) => {
   useImperativeHandle(ref, () => ({
     play: () => {
       if (!isReadyRef.current) return;
+      if (isPlayingRef.current) {
+        console.log("[MMDPlayerBase] play() called but already playing, skipping");
+        return;
+      }
       console.log("[MMDPlayerBase] play() called, audioRef:", !!audioRef.current, "isPlaying:", audioRef.current?.isPlaying);
       isPlayingRef.current = true;
       if (!clockRef.current.running) clockRef.current.start();
@@ -1412,6 +1417,7 @@ var MMDPlayerBase = forwardRef((props, ref) => {
           afterglow: 2
         });
         helperRef.current = helper;
+        setIsAudioSystemReady(true);
         const loadModelPromise = new Promise((resolve, reject) => {
           if (resources.motionPath) {
             loader.loadWithAnimation(
@@ -1829,6 +1835,7 @@ ${errorMessage}
           console.warn("[MMDPlayerBase] Error cleaning up AnimationHelper:", e);
         }
         helperRef.current = null;
+        setIsAudioSystemReady(false);
       }
       animationClipRef.current = null;
       if (axesHelperRef.current) {
@@ -1985,9 +1992,19 @@ ${errorMessage}
     };
   }, [resources.modelPath, resources.motionPath, resources.stageModelPath, stage.enablePhysics, stage.physicsPath]);
   useEffect(() => {
-    if (!audioListenerRef.current || !helperRef.current || !resources.audioPath) return;
+    if (!isAudioSystemReady || !audioListenerRef.current || !helperRef.current || !resources.audioPath) {
+      console.log("[MMDPlayerBase] \u{1F3B5} Audio loading skipped:", {
+        isAudioSystemReady,
+        hasListener: !!audioListenerRef.current,
+        hasHelper: !!helperRef.current,
+        audioPath: resources.audioPath
+      });
+      return;
+    }
     const listener = audioListenerRef.current;
     const helper = helperRef.current;
+    let retryTimer = null;
+    console.log("[MMDPlayerBase] \u{1F3B5} Starting audio load for:", resources.audioPath);
     if (audioRef.current) {
       const oldSound = audioRef.current;
       if (oldSound.isPlaying) oldSound.stop();
@@ -2007,14 +2024,29 @@ ${errorMessage}
           delay: 0,
           duration: buffer.duration
         });
+        console.log("[MMDPlayerBase] \u{1F3B5} Audio loaded, isPlayingRef:", isPlayingRef.current, "autoPlay:", autoPlay, "isReadyRef:", isReadyRef.current);
         if (isPlayingRef.current) {
+          console.log("[MMDPlayerBase] \u{1F3B5} Playing audio immediately (isPlayingRef=true)");
           sound.play();
+        } else if (autoPlay) {
+          console.log("[MMDPlayerBase] \u{1F3B5} Audio loaded before autoPlay triggered, waiting for play state...");
+          retryTimer = setTimeout(() => {
+            if (isPlayingRef.current && audioRef.current && !audioRef.current.isPlaying) {
+              console.log("[MMDPlayerBase] \u{1F3B5} Playing audio after delay (autoPlay=true)");
+              audioRef.current.play();
+            }
+          }, 150);
         }
       },
       void 0,
       (err) => console.error("[MMDPlayerBase] Failed to load audio track:", err)
     );
-  }, [resources.audioPath, volume]);
+    return () => {
+      if (retryTimer) {
+        clearTimeout(retryTimer);
+      }
+    };
+  }, [resources.audioPath, volume, autoPlay, isAudioSystemReady]);
   useEffect(() => {
     if (!sceneRef.current) return;
     if (showAxes && !axesHelperRef.current) {
@@ -4414,7 +4446,9 @@ var StartScreen = ({
   settingsText = "\u6E38\u620F\u8BBE\u7F6E",
   aboutText = "\u5173\u4E8E\u4F5C\u54C1",
   onStart,
-  className = ""
+  className = "",
+  customSettingsContent,
+  customAboutContent
 }) => {
   const [isMounted, setIsMounted] = useState(false);
   const [showSettings, setShowSettings] = useState(false);
@@ -4519,7 +4553,7 @@ var StartScreen = ({
       background: "rgba(248, 250, 252, 0.8)",
       borderColor: "rgba(203, 213, 225, 0.3)"
     } }, /* @__PURE__ */ React10.createElement("span", { className: "text-[8px] sm:text-[10px] md:text-xs tracking-[0.3em] sm:tracking-[0.5em] font-light uppercase", style: { color: "rgba(100, 116, 139, 0.5)" } }, "Ver 1.6.2 \u2014 ENGINE POWERED BY SA2KIT"))),
-    /* @__PURE__ */ React10.createElement(VNModal, { title: settingsText, show: showSettings, onClose: () => setShowSettings(false) }, /* @__PURE__ */ React10.createElement("div", { className: "space-y-6 sm:space-y-8 py-2 sm:py-4" }, /* @__PURE__ */ React10.createElement("div", { className: "space-y-3 sm:space-y-4" }, /* @__PURE__ */ React10.createElement("div", { className: "flex justify-between items-center text-xs sm:text-sm font-bold tracking-wider sm:tracking-widest", style: { color: "#64748b" } }, /* @__PURE__ */ React10.createElement("span", null, "MUSIC VOLUME"), /* @__PURE__ */ React10.createElement("span", null, "80%")), /* @__PURE__ */ React10.createElement("div", { className: "h-2.5 sm:h-3 rounded-full p-0.5 border", style: { background: "rgba(241, 245, 249, 0.5)", borderColor: "rgba(203, 213, 225, 0.4)" } }, /* @__PURE__ */ React10.createElement("div", { className: "h-full w-[80%] rounded-full", style: { background: "linear-gradient(to right, #22c55e, #4ade80)", boxShadow: "0 0 15px rgba(34, 197, 94, 0.5)" } }))), /* @__PURE__ */ React10.createElement("div", { className: "space-y-3 sm:space-y-4" }, /* @__PURE__ */ React10.createElement("div", { className: "flex justify-between items-center text-xs sm:text-sm font-bold tracking-wider sm:tracking-widest", style: { color: "#64748b" } }, /* @__PURE__ */ React10.createElement("span", null, "TEXT SPEED"), /* @__PURE__ */ React10.createElement("span", null, "NORMAL")), /* @__PURE__ */ React10.createElement("div", { className: "flex gap-2 sm:gap-3" }, ["SLOW", "NORMAL", "FAST"].map((s, i) => /* @__PURE__ */ React10.createElement(
+    /* @__PURE__ */ React10.createElement(VNModal, { title: settingsText, show: showSettings, onClose: () => setShowSettings(false) }, customSettingsContent ? /* @__PURE__ */ React10.createElement("div", { className: "py-2 sm:py-4" }, customSettingsContent) : /* @__PURE__ */ React10.createElement("div", { className: "space-y-6 sm:space-y-8 py-2 sm:py-4" }, /* @__PURE__ */ React10.createElement("div", { className: "space-y-3 sm:space-y-4" }, /* @__PURE__ */ React10.createElement("div", { className: "flex justify-between items-center text-xs sm:text-sm font-bold tracking-wider sm:tracking-widest", style: { color: "#64748b" } }, /* @__PURE__ */ React10.createElement("span", null, "MUSIC VOLUME"), /* @__PURE__ */ React10.createElement("span", null, "80%")), /* @__PURE__ */ React10.createElement("div", { className: "h-2.5 sm:h-3 rounded-full p-0.5 border", style: { background: "rgba(241, 245, 249, 0.5)", borderColor: "rgba(203, 213, 225, 0.4)" } }, /* @__PURE__ */ React10.createElement("div", { className: "h-full w-[80%] rounded-full", style: { background: "linear-gradient(to right, #22c55e, #4ade80)", boxShadow: "0 0 15px rgba(34, 197, 94, 0.5)" } }))), /* @__PURE__ */ React10.createElement("div", { className: "space-y-3 sm:space-y-4" }, /* @__PURE__ */ React10.createElement("div", { className: "flex justify-between items-center text-xs sm:text-sm font-bold tracking-wider sm:tracking-widest", style: { color: "#64748b" } }, /* @__PURE__ */ React10.createElement("span", null, "TEXT SPEED"), /* @__PURE__ */ React10.createElement("span", null, "NORMAL")), /* @__PURE__ */ React10.createElement("div", { className: "flex gap-2 sm:gap-3" }, ["SLOW", "NORMAL", "FAST"].map((s, i) => /* @__PURE__ */ React10.createElement(
       "div",
       {
         key: s,
@@ -4536,7 +4570,7 @@ var StartScreen = ({
       },
       s
     )))), /* @__PURE__ */ React10.createElement("div", { className: "pt-3 sm:pt-4 flex flex-col sm:flex-row items-center justify-between gap-2 sm:gap-0 opacity-50 italic text-[10px] sm:text-xs border-t", style: { borderColor: "rgba(203, 213, 225, 0.3)" } }, /* @__PURE__ */ React10.createElement("span", null, "Auto Save Enabled"), /* @__PURE__ */ React10.createElement("span", null, "Cloud Sync Active")))),
-    /* @__PURE__ */ React10.createElement(VNModal, { title: aboutText, show: showAbout, onClose: () => setShowAbout(false) }, /* @__PURE__ */ React10.createElement("div", { className: "space-y-6 sm:space-y-8 py-2 sm:py-4" }, /* @__PURE__ */ React10.createElement("div", { className: "flex items-center gap-3 sm:gap-6 p-4 sm:p-6 rounded-2xl sm:rounded-3xl border", style: { background: "rgba(241, 245, 249, 0.6)", borderColor: "rgba(203, 213, 225, 0.4)" } }, /* @__PURE__ */ React10.createElement("div", { className: "w-14 h-14 sm:w-20 sm:h-20 rounded-xl sm:rounded-2xl flex items-center justify-center text-2xl sm:text-3xl font-black text-white shadow-lg shrink-0", style: { background: "linear-gradient(to bottom right, #22c55e, #4ade80)" } }, "S2"), /* @__PURE__ */ React10.createElement("div", null, /* @__PURE__ */ React10.createElement("h3", { className: "text-lg sm:text-2xl font-black tracking-tight", style: { color: "#22c55e" } }, scriptName || "Project SA2"), /* @__PURE__ */ React10.createElement("p", { className: "text-[10px] sm:text-xs font-bold tracking-wider sm:tracking-widest mt-1 uppercase", style: { color: "rgba(100, 116, 139, 0.6)" } }, "Visual Novel Experience"))), /* @__PURE__ */ React10.createElement("div", { className: "space-y-3 sm:space-y-4 px-1 sm:px-2" }, /* @__PURE__ */ React10.createElement("p", { className: "font-medium leading-relaxed text-sm sm:text-base", style: { color: "#475569" } }, "\u91C7\u7528 sa2kit \u5F15\u64CE\u6784\u5EFA\u7684\u65B0\u4E00\u4EE3\u5B9E\u65F6 3D \u89C6\u89C9\u5C0F\u8BF4\u3002\u7ED3\u5408\u4E86 MMD \u5B9E\u65F6\u6E32\u67D3\u6280\u672F\u4E0E\u4EA4\u4E92\u5F0F\u5267\u60C5\u5206\u652F\u7CFB\u7EDF\uFF0C\u81F4\u529B\u4E8E\u6253\u9020\u6781\u81F4\u7684\u6C89\u6D78\u5F0F\u53D9\u4E8B\u4F53\u9A8C\u3002")), /* @__PURE__ */ React10.createElement("div", { className: "grid grid-cols-2 gap-3 sm:gap-4 pt-4 sm:pt-6 border-t", style: { borderColor: "rgba(203, 213, 225, 0.3)" } }, /* @__PURE__ */ React10.createElement("div", { className: "flex flex-col gap-1" }, /* @__PURE__ */ React10.createElement("span", { className: "text-[9px] sm:text-[10px] font-bold tracking-wider sm:tracking-widest", style: { color: "rgba(100, 116, 139, 0.5)" } }, "DEVELOPER"), /* @__PURE__ */ React10.createElement("span", { className: "text-xs font-bold", style: { color: "#64748b" } }, "SA2KIT TEAM")), /* @__PURE__ */ React10.createElement("div", { className: "flex flex-col gap-1 text-right" }, /* @__PURE__ */ React10.createElement("span", { className: "text-[9px] sm:text-[10px] font-bold tracking-wider sm:tracking-widest", style: { color: "rgba(100, 116, 139, 0.5)" } }, "ENGINE"), /* @__PURE__ */ React10.createElement("span", { className: "text-xs font-bold", style: { color: "#64748b" } }, "THREE.JS / REACT"))))),
+    /* @__PURE__ */ React10.createElement(VNModal, { title: aboutText, show: showAbout, onClose: () => setShowAbout(false) }, customAboutContent ? /* @__PURE__ */ React10.createElement("div", { className: "py-2 sm:py-4" }, customAboutContent) : /* @__PURE__ */ React10.createElement("div", { className: "space-y-6 sm:space-y-8 py-2 sm:py-4" }, /* @__PURE__ */ React10.createElement("div", { className: "flex items-center gap-3 sm:gap-6 p-4 sm:p-6 rounded-2xl sm:rounded-3xl border", style: { background: "rgba(241, 245, 249, 0.6)", borderColor: "rgba(203, 213, 225, 0.4)" } }, /* @__PURE__ */ React10.createElement("div", { className: "w-14 h-14 sm:w-20 sm:h-20 rounded-xl sm:rounded-2xl flex items-center justify-center text-2xl sm:text-3xl font-black text-white shadow-lg shrink-0", style: { background: "linear-gradient(to bottom right, #22c55e, #4ade80)" } }, "S2"), /* @__PURE__ */ React10.createElement("div", null, /* @__PURE__ */ React10.createElement("h3", { className: "text-lg sm:text-2xl font-black tracking-tight", style: { color: "#22c55e" } }, scriptName || "Project SA2"), /* @__PURE__ */ React10.createElement("p", { className: "text-[10px] sm:text-xs font-bold tracking-wider sm:tracking-widest mt-1 uppercase", style: { color: "rgba(100, 116, 139, 0.6)" } }, "Visual Novel Experience"))), /* @__PURE__ */ React10.createElement("div", { className: "space-y-3 sm:space-y-4 px-1 sm:px-2" }, /* @__PURE__ */ React10.createElement("p", { className: "font-medium leading-relaxed text-sm sm:text-base", style: { color: "#475569" } }, "\u91C7\u7528 sa2kit \u5F15\u64CE\u6784\u5EFA\u7684\u65B0\u4E00\u4EE3\u5B9E\u65F6 3D \u89C6\u89C9\u5C0F\u8BF4\u3002\u7ED3\u5408\u4E86 MMD \u5B9E\u65F6\u6E32\u67D3\u6280\u672F\u4E0E\u4EA4\u4E92\u5F0F\u5267\u60C5\u5206\u652F\u7CFB\u7EDF\uFF0C\u81F4\u529B\u4E8E\u6253\u9020\u6781\u81F4\u7684\u6C89\u6D78\u5F0F\u53D9\u4E8B\u4F53\u9A8C\u3002")), /* @__PURE__ */ React10.createElement("div", { className: "grid grid-cols-2 gap-3 sm:gap-4 pt-4 sm:pt-6 border-t", style: { borderColor: "rgba(203, 213, 225, 0.3)" } }, /* @__PURE__ */ React10.createElement("div", { className: "flex flex-col gap-1" }, /* @__PURE__ */ React10.createElement("span", { className: "text-[9px] sm:text-[10px] font-bold tracking-wider sm:tracking-widest", style: { color: "rgba(100, 116, 139, 0.5)" } }, "DEVELOPER"), /* @__PURE__ */ React10.createElement("span", { className: "text-xs font-bold", style: { color: "#64748b" } }, "SA2KIT TEAM")), /* @__PURE__ */ React10.createElement("div", { className: "flex flex-col gap-1 text-right" }, /* @__PURE__ */ React10.createElement("span", { className: "text-[9px] sm:text-[10px] font-bold tracking-wider sm:tracking-widest", style: { color: "rgba(100, 116, 139, 0.5)" } }, "ENGINE"), /* @__PURE__ */ React10.createElement("span", { className: "text-xs font-bold", style: { color: "#64748b" } }, "THREE.JS / REACT"))))),
     /* @__PURE__ */ React10.createElement("style", null, `
         @keyframes floatParticle {
           from { transform: translateY(0) translateX(0); opacity: 0; }
@@ -4620,7 +4654,9 @@ var LoadingOverlay = ({
   settingsText = "\u6E38\u620F\u8BBE\u7F6E",
   aboutText = "\u5173\u4E8E\u4F5C\u54C1",
   onStart,
-  className = ""
+  className = "",
+  customSettingsContent,
+  customAboutContent
 }) => {
   return /* @__PURE__ */ React10.createElement(React10.Fragment, null, /* @__PURE__ */ React10.createElement(
     LoadingScreen,
@@ -4638,7 +4674,9 @@ var LoadingOverlay = ({
       settingsText,
       aboutText,
       onStart,
-      className
+      className,
+      customSettingsContent,
+      customAboutContent
     }
   ));
 };
@@ -5045,6 +5083,8 @@ var MMDVisualNovel = forwardRef(
     showHistoryButton = true,
     showLightingDebugPanel = false,
     lightingDebugInitialParams,
+    customSettingsContent,
+    customAboutContent,
     className,
     style
   }, ref) => {
@@ -5443,7 +5483,9 @@ var MMDVisualNovel = forwardRef(
           startText,
           settingsText,
           aboutText,
-          onStart: handleStart
+          onStart: handleStart,
+          customSettingsContent,
+          customAboutContent
         }
       ),
       (() => {
@@ -5564,6 +5606,224 @@ var MMDVisualNovel = forwardRef(
   }
 );
 MMDVisualNovel.displayName = "MMDVisualNovel";
+var ModelSelectorSettings = ({
+  characterModels,
+  stageModels,
+  selectedCharacterId,
+  selectedStageId,
+  onCharacterChange,
+  onStageChange,
+  characterLabel = "CHARACTER MODEL",
+  stageLabel = "STAGE MODEL"
+}) => {
+  return /* @__PURE__ */ React10.createElement("div", { className: "space-y-6 sm:space-y-8" }, /* @__PURE__ */ React10.createElement("div", { className: "space-y-3 sm:space-y-4" }, /* @__PURE__ */ React10.createElement("div", { className: "flex justify-between items-center text-xs sm:text-sm font-bold tracking-wider sm:tracking-widest", style: { color: "#64748b" } }, /* @__PURE__ */ React10.createElement("span", null, characterLabel), /* @__PURE__ */ React10.createElement("span", { className: "text-[10px] sm:text-xs opacity-60" }, characterModels.find((m) => m.id === selectedCharacterId)?.name || "\u672A\u9009\u62E9")), /* @__PURE__ */ React10.createElement("div", { className: "relative" }, /* @__PURE__ */ React10.createElement(
+    "select",
+    {
+      value: selectedCharacterId,
+      onChange: (e) => onCharacterChange(e.target.value),
+      className: "w-full h-12 sm:h-14 px-4 sm:px-6 rounded-xl sm:rounded-2xl border appearance-none cursor-pointer font-medium text-sm sm:text-base transition-all focus:outline-none focus:ring-2 focus:ring-green-500/30 touch-manipulation",
+      style: {
+        background: "linear-gradient(135deg, rgba(248, 250, 252, 0.98), rgba(226, 232, 240, 0.95))",
+        borderColor: "rgba(203, 213, 225, 0.6)",
+        color: "#475569",
+        boxShadow: "0 2px 8px rgba(100, 116, 139, 0.1)"
+      }
+    },
+    characterModels.map((model) => /* @__PURE__ */ React10.createElement("option", { key: model.id, value: model.id }, model.name))
+  ), /* @__PURE__ */ React10.createElement("div", { className: "absolute right-4 sm:right-6 top-1/2 -translate-y-1/2 pointer-events-none" }, /* @__PURE__ */ React10.createElement(
+    "svg",
+    {
+      className: "w-4 h-4 sm:w-5 sm:h-5",
+      fill: "none",
+      stroke: "currentColor",
+      viewBox: "0 0 24 24",
+      style: { color: "#64748b" }
+    },
+    /* @__PURE__ */ React10.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19 9l-7 7-7-7" })
+  ))), characterModels.find((m) => m.id === selectedCharacterId)?.thumbnail && /* @__PURE__ */ React10.createElement("div", { className: "mt-2 flex justify-center" }, /* @__PURE__ */ React10.createElement(
+    "img",
+    {
+      src: characterModels.find((m) => m.id === selectedCharacterId)?.thumbnail,
+      alt: "Character preview",
+      className: "h-20 sm:h-24 rounded-lg border object-cover",
+      style: { borderColor: "rgba(203, 213, 225, 0.4)" }
+    }
+  ))), /* @__PURE__ */ React10.createElement("div", { className: "space-y-3 sm:space-y-4" }, /* @__PURE__ */ React10.createElement("div", { className: "flex justify-between items-center text-xs sm:text-sm font-bold tracking-wider sm:tracking-widest", style: { color: "#64748b" } }, /* @__PURE__ */ React10.createElement("span", null, stageLabel), /* @__PURE__ */ React10.createElement("span", { className: "text-[10px] sm:text-xs opacity-60" }, stageModels.find((m) => m.id === selectedStageId)?.name || "\u672A\u9009\u62E9")), /* @__PURE__ */ React10.createElement("div", { className: "relative" }, /* @__PURE__ */ React10.createElement(
+    "select",
+    {
+      value: selectedStageId,
+      onChange: (e) => onStageChange(e.target.value),
+      className: "w-full h-12 sm:h-14 px-4 sm:px-6 rounded-xl sm:rounded-2xl border appearance-none cursor-pointer font-medium text-sm sm:text-base transition-all focus:outline-none focus:ring-2 focus:ring-green-500/30 touch-manipulation",
+      style: {
+        background: "linear-gradient(135deg, rgba(248, 250, 252, 0.98), rgba(226, 232, 240, 0.95))",
+        borderColor: "rgba(203, 213, 225, 0.6)",
+        color: "#475569",
+        boxShadow: "0 2px 8px rgba(100, 116, 139, 0.1)"
+      }
+    },
+    stageModels.map((model) => /* @__PURE__ */ React10.createElement("option", { key: model.id, value: model.id }, model.name))
+  ), /* @__PURE__ */ React10.createElement("div", { className: "absolute right-4 sm:right-6 top-1/2 -translate-y-1/2 pointer-events-none" }, /* @__PURE__ */ React10.createElement(
+    "svg",
+    {
+      className: "w-4 h-4 sm:w-5 sm:h-5",
+      fill: "none",
+      stroke: "currentColor",
+      viewBox: "0 0 24 24",
+      style: { color: "#64748b" }
+    },
+    /* @__PURE__ */ React10.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19 9l-7 7-7-7" })
+  ))), stageModels.find((m) => m.id === selectedStageId)?.thumbnail && /* @__PURE__ */ React10.createElement("div", { className: "mt-2 flex justify-center" }, /* @__PURE__ */ React10.createElement(
+    "img",
+    {
+      src: stageModels.find((m) => m.id === selectedStageId)?.thumbnail,
+      alt: "Stage preview",
+      className: "h-20 sm:h-24 rounded-lg border object-cover",
+      style: { borderColor: "rgba(203, 213, 225, 0.4)" }
+    }
+  ))), /* @__PURE__ */ React10.createElement("div", { className: "pt-3 sm:pt-4 flex items-center justify-center gap-2 opacity-50 italic text-[10px] sm:text-xs border-t", style: { borderColor: "rgba(203, 213, 225, 0.3)" } }, /* @__PURE__ */ React10.createElement("svg", { className: "w-3.5 h-3.5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24" }, /* @__PURE__ */ React10.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" })), /* @__PURE__ */ React10.createElement("span", null, "\u9009\u62E9\u7684\u6A21\u578B\u5C06\u5E94\u7528\u5230\u6240\u6709\u573A\u666F")));
+};
+ModelSelectorSettings.displayName = "ModelSelectorSettings";
+
+// src/mmd/visual-novel/MMDVisualNovelWithSelector.tsx
+var MMDVisualNovelWithSelector = forwardRef((props, ref) => {
+  const {
+    script,
+    modelSelector,
+    onModelSelectionChange,
+    ...restProps
+  } = props;
+  const {
+    characterModels,
+    stageModels,
+    defaultCharacterId,
+    defaultStageId,
+    characterLabel,
+    stageLabel
+  } = modelSelector;
+  const visualNovelRef = useRef(null);
+  const [selectedCharacterId, setSelectedCharacterId] = useState(
+    defaultCharacterId || characterModels[0]?.id || ""
+  );
+  const [selectedStageId, setSelectedStageId] = useState(
+    defaultStageId || stageModels[0]?.id || ""
+  );
+  const selectedCharacterPath = useMemo(() => {
+    const model = characterModels.find((m) => m.id === selectedCharacterId);
+    return model?.path || characterModels[0]?.path || "";
+  }, [characterModels, selectedCharacterId]);
+  const selectedStagePath = useMemo(() => {
+    const model = stageModels.find((m) => m.id === selectedStageId);
+    return model?.path || stageModels[0]?.path || "";
+  }, [stageModels, selectedStageId]);
+  const modifiedScript = useMemo(() => {
+    return {
+      ...script,
+      nodes: script.nodes.map((node) => ({
+        ...node,
+        resources: {
+          ...node.resources,
+          // 覆盖人物模型路径
+          modelPath: selectedCharacterPath,
+          // 覆盖场景模型路径
+          stageModelPath: selectedStagePath
+        }
+      }))
+    };
+  }, [script, selectedCharacterPath, selectedStagePath]);
+  const handleCharacterChange = useCallback((id) => {
+    setSelectedCharacterId(id);
+    onModelSelectionChange?.(id, selectedStageId);
+  }, [selectedStageId, onModelSelectionChange]);
+  const handleStageChange = useCallback((id) => {
+    setSelectedStageId(id);
+    onModelSelectionChange?.(selectedCharacterId, id);
+  }, [selectedCharacterId, onModelSelectionChange]);
+  const customSettingsContent = useMemo(() => /* @__PURE__ */ React10.createElement(
+    ModelSelectorSettings,
+    {
+      characterModels,
+      stageModels,
+      selectedCharacterId,
+      selectedStageId,
+      onCharacterChange: handleCharacterChange,
+      onStageChange: handleStageChange,
+      characterLabel,
+      stageLabel
+    }
+  ), [
+    characterModels,
+    stageModels,
+    selectedCharacterId,
+    selectedStageId,
+    handleCharacterChange,
+    handleStageChange,
+    characterLabel,
+    stageLabel
+  ]);
+  useImperativeHandle(ref, () => ({
+    // 继承 MMDVisualNovelRef 的所有方法
+    goToNode: (nodeIndex, force) => {
+      visualNovelRef.current?.goToNode(nodeIndex, force);
+    },
+    goToDialogue: (dialogueIndex) => {
+      visualNovelRef.current?.goToDialogue(dialogueIndex);
+    },
+    getCurrentNodeIndex: () => {
+      return visualNovelRef.current?.getCurrentNodeIndex() ?? 0;
+    },
+    getCurrentDialogueIndex: () => {
+      return visualNovelRef.current?.getCurrentDialogueIndex() ?? 0;
+    },
+    getHistory: () => {
+      return visualNovelRef.current?.getHistory() ?? [];
+    },
+    getVariables: () => {
+      return visualNovelRef.current?.getVariables() ?? {};
+    },
+    setVariable: (key, value) => {
+      visualNovelRef.current?.setVariable(key, value);
+    },
+    setAutoMode: (enabled) => {
+      visualNovelRef.current?.setAutoMode(enabled);
+    },
+    skipTyping: () => {
+      visualNovelRef.current?.skipTyping();
+    },
+    triggerEffect: (effect) => {
+      visualNovelRef.current?.triggerEffect?.(effect);
+    },
+    // 新增的模型选择方法
+    getSelectedCharacterId: () => selectedCharacterId,
+    getSelectedStageId: () => selectedStageId,
+    setCharacterModel: (id) => {
+      if (characterModels.some((m) => m.id === id)) {
+        handleCharacterChange(id);
+      }
+    },
+    setStageModel: (id) => {
+      if (stageModels.some((m) => m.id === id)) {
+        handleStageChange(id);
+      }
+    }
+  }), [
+    selectedCharacterId,
+    selectedStageId,
+    characterModels,
+    stageModels,
+    handleCharacterChange,
+    handleStageChange
+  ]);
+  return /* @__PURE__ */ React10.createElement(
+    MMDVisualNovel,
+    {
+      ref: visualNovelRef,
+      script: modifiedScript,
+      customSettingsContent,
+      ...restProps
+    }
+  );
+});
+MMDVisualNovelWithSelector.displayName = "MMDVisualNovelWithSelector";
 var MusicControls = ({
   isPlaying,
   currentTime,
@@ -6052,41 +6312,129 @@ var MMDMusicPlayer = forwardRef(
   }
 );
 MMDMusicPlayer.displayName = "MMDMusicPlayer";
+function Select({
+  label,
+  options,
+  value,
+  onChange,
+  placeholder = "\u8BF7\u9009\u62E9...",
+  allowEmpty = false,
+  emptyLabel = "\u65E0"
+}) {
+  const selectedOption = options.find((opt) => opt.id === value);
+  const showPlaceholder = !selectedOption && !allowEmpty && value !== "";
+  return /* @__PURE__ */ React10.createElement("div", { className: "space-y-1.5" }, /* @__PURE__ */ React10.createElement("label", { className: "block text-xs font-medium text-white/50 ml-1 uppercase tracking-wider" }, label), /* @__PURE__ */ React10.createElement("div", { className: "relative" }, /* @__PURE__ */ React10.createElement(
+    "select",
+    {
+      value,
+      onChange: (e) => onChange(e.target.value),
+      className: "w-full appearance-none bg-white/5 border border-white/10 rounded-xl px-4 py-3 pr-10 text-sm text-white focus:outline-none focus:border-cyan-500/50 transition-colors cursor-pointer hover:bg-white/10"
+    },
+    showPlaceholder && /* @__PURE__ */ React10.createElement("option", { value: "", disabled: true, className: "bg-gray-900 text-white/50" }, placeholder),
+    allowEmpty && /* @__PURE__ */ React10.createElement("option", { value: "", className: "bg-gray-900 text-white/60" }, emptyLabel),
+    options.map((option) => /* @__PURE__ */ React10.createElement(
+      "option",
+      {
+        key: option.id,
+        value: option.id,
+        className: "bg-gray-900 text-white"
+      },
+      option.name
+    ))
+  ), /* @__PURE__ */ React10.createElement(ChevronDown, { className: "absolute right-3 top-1/2 -translate-y-1/2 w-4 h-4 text-white/40 pointer-events-none" })));
+}
 var MMDARPlayer = forwardRef((props, ref) => {
   const {
-    resources,
     stage = {},
     mobileOptimization,
     cameraConfig = { facingMode: "user" },
     mirrored,
     showSettings = true,
+    modelPresets,
+    motionPresets,
+    audioPresets = [],
+    defaultModelId,
+    defaultMotionId,
+    defaultAudioId,
+    initialModelVisible = false,
+    placementText = "TOUCH!",
     autoPlay = true,
     loop = true,
     onCameraReady,
     onCameraError,
     onResourcesChange,
+    onModelPlaced,
     onLoad,
     onError,
     className,
     style
   } = props;
+  const initialModelId = defaultModelId || modelPresets[0]?.id || "";
+  const initialMotionId = defaultMotionId || motionPresets[0]?.id || "";
+  const initialAudioId = defaultAudioId || audioPresets[0]?.id || "";
   const videoRef = useRef(null);
   const playerRef = useRef(null);
   const streamRef = useRef(null);
+  const containerRef = useRef(null);
   const [isCameraStarted, setIsCameraStarted] = useState(false);
   const [cameraError, setCameraError] = useState(null);
   const [facingMode, setFacingMode] = useState(cameraConfig.facingMode || "user");
-  const [isLoading, setIsLoading] = useState(true);
+  const [isLoading, setIsLoading] = useState(false);
   const [isSettingsOpen, setIsSettingsOpen] = useState(false);
-  const [currentResources, setCurrentResources] = useState(resources);
-  const [tempResources, setTempResources] = useState(resources);
-  useEffect(() => {
-    if (!isSettingsOpen) {
-      setCurrentResources(resources);
-      setTempResources(resources);
-    }
-  }, [resources, isSettingsOpen]);
+  const [selectedModelId, setSelectedModelId] = useState(initialModelId);
+  const [selectedMotionId, setSelectedMotionId] = useState(initialMotionId);
+  const [selectedAudioId, setSelectedAudioId] = useState(initialAudioId);
+  const [isModelPlaced, setIsModelPlaced] = useState(initialModelVisible);
+  const [placementAnimation, setPlacementAnimation] = useState(false);
+  const currentResources = useMemo(() => {
+    const model = modelPresets.find((m) => m.id === selectedModelId);
+    const motion = motionPresets.find((m) => m.id === selectedMotionId);
+    const audio = audioPresets.find((a) => a.id === selectedAudioId);
+    return {
+      modelPath: model?.modelPath || modelPresets[0]?.modelPath || "",
+      motionPath: motion?.motionPath || motionPresets[0]?.motionPath || "",
+      audioPath: audio?.audioPath
+    };
+  }, [selectedModelId, selectedMotionId, selectedAudioId, modelPresets, motionPresets, audioPresets]);
   const shouldMirror = mirrored !== void 0 ? mirrored : facingMode === "user";
+  const placeModel = useCallback(() => {
+    if (isModelPlaced) return;
+    setPlacementAnimation(true);
+    setIsLoading(true);
+    setTimeout(() => {
+      setIsModelPlaced(true);
+      setPlacementAnimation(false);
+      onModelPlaced?.();
+    }, 300);
+  }, [isModelPlaced, onModelPlaced]);
+  const removeModel = useCallback(() => {
+    setIsModelPlaced(false);
+    setIsLoading(false);
+  }, []);
+  const switchModel = useCallback((newResources) => {
+    const matchedModel = modelPresets.find((m) => m.modelPath === newResources.modelPath);
+    const matchedMotion = motionPresets.find((m) => m.motionPath === newResources.motionPath);
+    const matchedAudio = audioPresets.find((a) => a.audioPath === newResources.audioPath);
+    if (matchedModel) setSelectedModelId(matchedModel.id);
+    if (matchedMotion) setSelectedMotionId(matchedMotion.id);
+    if (matchedAudio) setSelectedAudioId(matchedAudio.id);
+    onResourcesChange?.(newResources);
+    if (isModelPlaced) {
+      setIsLoading(true);
+    }
+  }, [isModelPlaced, onResourcesChange, modelPresets, motionPresets, audioPresets]);
+  const applySettings = useCallback(() => {
+    onResourcesChange?.(currentResources);
+    setIsSettingsOpen(false);
+    if (isModelPlaced) {
+      setIsLoading(true);
+    }
+  }, [currentResources, isModelPlaced, onResourcesChange]);
+  const resetPosition = useCallback(() => {
+    setIsModelPlaced(false);
+    setIsLoading(false);
+    setIsSettingsOpen(false);
+  }, []);
   const startCamera = useCallback(async (mode = facingMode) => {
     try {
       setCameraError(null);
@@ -6147,22 +6495,27 @@ var MMDARPlayer = forwardRef((props, ref) => {
     if (shouldMirror) {
       ctx.setTransform(1, 0, 0, 1, 0, 0);
     }
-    const mmdBase64 = playerRef.current.snapshot();
-    const mmdImg = new Image();
-    mmdImg.src = mmdBase64;
-    await new Promise((resolve) => {
-      mmdImg.onload = () => {
-        ctx.drawImage(mmdImg, 0, 0, canvas.width, canvas.height);
-        resolve(null);
-      };
-    });
+    if (isModelPlaced) {
+      const mmdBase64 = playerRef.current.snapshot();
+      const mmdImg = new Image();
+      mmdImg.src = mmdBase64;
+      await new Promise((resolve) => {
+        mmdImg.onload = () => {
+          ctx.drawImage(mmdImg, 0, 0, canvas.width, canvas.height);
+          resolve(null);
+        };
+      });
+    }
     return canvas.toDataURL("image/png");
-  }, [shouldMirror]);
+  }, [shouldMirror, isModelPlaced]);
   useImperativeHandle(ref, () => ({
     startCamera,
     stopCamera,
     switchCamera,
-    snapshot
+    snapshot,
+    placeModel,
+    removeModel,
+    switchModel
   }));
   useEffect(() => {
     if (autoPlay) {
@@ -6170,9 +6523,13 @@ var MMDARPlayer = forwardRef((props, ref) => {
     }
     return () => stopCamera();
   }, [autoPlay, startCamera, stopCamera]);
+  useEffect(() => {
+    onResourcesChange?.(currentResources);
+  }, [currentResources, onResourcesChange]);
   return /* @__PURE__ */ React10.createElement(
     "div",
     {
+      ref: containerRef,
       className: `relative w-full h-full bg-black overflow-hidden ${className}`,
       style
     },
@@ -6187,26 +6544,25 @@ var MMDARPlayer = forwardRef((props, ref) => {
         style: { zIndex: 0 }
       }
     ),
-    /* @__PURE__ */ React10.createElement(
+    isModelPlaced && /* @__PURE__ */ React10.createElement(
       "div",
       {
-        className: "absolute inset-0 w-full h-full",
+        className: `absolute inset-0 w-full h-full transition-all duration-500 ${placementAnimation ? "scale-110 opacity-0" : "scale-100 opacity-100"}`,
         style: { zIndex: 1 }
       },
       /* @__PURE__ */ React10.createElement(
         MMDPlayerBase,
         {
+          key: `${selectedModelId}-${selectedMotionId}-${selectedAudioId}`,
           ref: playerRef,
           resources: currentResources,
           stage: {
             ...stage,
             backgroundColor: "transparent",
-            // 强制透明背景
             cameraPosition: stage.cameraPosition || { x: 0, y: 15, z: 40 }
-            // 针对 AR 场景稍调高相机
           },
           mobileOptimization,
-          autoPlay,
+          autoPlay: true,
           loop,
           onLoad: () => {
             setIsLoading(false);
@@ -6216,6 +6572,30 @@ var MMDARPlayer = forwardRef((props, ref) => {
         }
       )
     ),
+    !isModelPlaced && isCameraStarted && /* @__PURE__ */ React10.createElement(
+      "div",
+      {
+        className: "absolute inset-0 z-5 flex items-center justify-center",
+        onClick: placeModel
+      },
+      /* @__PURE__ */ React10.createElement(
+        "button",
+        {
+          onClick: placeModel,
+          className: `
+              relative group cursor-pointer
+              transition-all duration-300 ease-out
+              hover:scale-110 active:scale-95
+              ${placementAnimation ? "scale-150 opacity-0" : "scale-100 opacity-100"}
+            `
+        },
+        /* @__PURE__ */ React10.createElement("div", { className: "absolute inset-0 -m-4 rounded-2xl bg-cyan-400/20 animate-ping" }),
+        /* @__PURE__ */ React10.createElement("div", { className: "absolute inset-0 -m-2 rounded-xl bg-cyan-400/30 animate-pulse" }),
+        /* @__PURE__ */ React10.createElement("div", { className: "relative bg-gradient-to-br from-cyan-400 via-blue-500 to-purple-600 p-1 rounded-2xl shadow-2xl shadow-cyan-500/50" }, /* @__PURE__ */ React10.createElement("div", { className: "bg-black/80 backdrop-blur-xl px-8 py-6 rounded-xl flex flex-col items-center gap-3" }, /* @__PURE__ */ React10.createElement("div", { className: "relative" }, /* @__PURE__ */ React10.createElement(Sparkles, { className: "w-10 h-10 text-cyan-400 animate-pulse" }), /* @__PURE__ */ React10.createElement("div", { className: "absolute inset-0 w-10 h-10 bg-cyan-400/30 blur-xl" })), /* @__PURE__ */ React10.createElement("span", { className: "text-2xl font-black text-transparent bg-clip-text bg-gradient-to-r from-cyan-400 to-purple-400 tracking-widest" }, placementText), /* @__PURE__ */ React10.createElement("span", { className: "text-xs text-white/50 font-medium" }, "\u70B9\u51FB\u53EC\u5524 Miku \u2728"))),
+        /* @__PURE__ */ React10.createElement("div", { className: "absolute -top-2 -right-2 w-4 h-4 bg-yellow-400 rounded-full animate-bounce shadow-lg shadow-yellow-400/50" }),
+        /* @__PURE__ */ React10.createElement("div", { className: "absolute -bottom-1 -left-1 w-3 h-3 bg-pink-400 rounded-full animate-bounce delay-100 shadow-lg shadow-pink-400/50" })
+      )
+    ),
     /* @__PURE__ */ React10.createElement("div", { className: "absolute inset-0 z-10 pointer-events-none flex flex-col justify-between p-6" }, /* @__PURE__ */ React10.createElement("div", { className: "flex justify-between items-start pointer-events-auto" }, cameraError ? /* @__PURE__ */ React10.createElement("div", { className: "bg-red-500/80 backdrop-blur-md text-white px-4 py-2 rounded-full flex items-center gap-2 text-sm" }, /* @__PURE__ */ React10.createElement(AlertCircle, { className: "w-4 h-4" }), cameraError, /* @__PURE__ */ React10.createElement(
       "button",
       {
@@ -6223,12 +6603,12 @@ var MMDARPlayer = forwardRef((props, ref) => {
         className: "ml-2 underline"
       },
       "\u91CD\u8BD5"
-    )) : /* @__PURE__ */ React10.createElement("div", { className: "bg-black/40 backdrop-blur-md text-white px-4 py-2 rounded-full flex items-center gap-2 text-sm" }, /* @__PURE__ */ React10.createElement(Camera, { className: "w-4 h-4 text-green-400" }), isCameraStarted ? "\u5B9E\u666F AR \u6A21\u5F0F\u5DF2\u5F00\u542F" : "\u7B49\u5F85\u6444\u50CF\u5934..."), /* @__PURE__ */ React10.createElement("div", { className: "flex flex-col gap-2" }, showSettings && /* @__PURE__ */ React10.createElement(
+    )) : /* @__PURE__ */ React10.createElement("div", { className: "bg-black/40 backdrop-blur-md text-white px-4 py-2 rounded-full flex items-center gap-2 text-sm" }, /* @__PURE__ */ React10.createElement(Camera, { className: "w-4 h-4 text-green-400" }), isCameraStarted ? isModelPlaced ? "\u5B9E\u666F AR \u6A21\u5F0F" : "\u70B9\u51FB\u653E\u7F6E\u6A21\u578B" : "\u7B49\u5F85\u6444\u50CF\u5934..."), /* @__PURE__ */ React10.createElement("div", { className: "flex flex-col gap-2" }, showSettings && /* @__PURE__ */ React10.createElement(
       "button",
       {
         onClick: () => setIsSettingsOpen(!isSettingsOpen),
-        className: `p-3 backdrop-blur-md rounded-full text-white transition-all active:scale-95 pointer-events-auto ${isSettingsOpen ? "bg-blue-500" : "bg-white/10 hover:bg-white/20"}`,
-        title: "\u8BBE\u7F6E\u6A21\u578B\u4E0E\u52A8\u4F5C"
+        className: `p-3 backdrop-blur-md rounded-full text-white transition-all active:scale-95 pointer-events-auto ${isSettingsOpen ? "bg-cyan-500" : "bg-white/10 hover:bg-white/20"}`,
+        title: "\u8BBE\u7F6E"
       },
       /* @__PURE__ */ React10.createElement(Settings, { className: "w-5 h-5" })
     ), /* @__PURE__ */ React10.createElement(
@@ -6247,45 +6627,59 @@ var MMDARPlayer = forwardRef((props, ref) => {
         title: isCameraStarted ? "\u5173\u95ED\u6444\u50CF\u5934" : "\u5F00\u542F\u6444\u50CF\u5934"
       },
       isCameraStarted ? /* @__PURE__ */ React10.createElement(CameraOff, { className: "w-5 h-5" }) : /* @__PURE__ */ React10.createElement(Camera, { className: "w-5 h-5" })
-    ))), isSettingsOpen && /* @__PURE__ */ React10.createElement("div", { className: "absolute top-20 right-6 w-80 bg-black/80 backdrop-blur-xl border border-white/10 rounded-2xl p-6 pointer-events-auto shadow-2xl animate-in slide-in-from-right-4 duration-300" }, /* @__PURE__ */ React10.createElement("div", { className: "flex items-center justify-between mb-6" }, /* @__PURE__ */ React10.createElement("h3", { className: "text-white font-bold flex items-center gap-2" }, /* @__PURE__ */ React10.createElement(Settings, { className: "w-4 h-4" }), "\u8D44\u6E90\u8BBE\u7F6E"), /* @__PURE__ */ React10.createElement(
+    ))), isSettingsOpen && /* @__PURE__ */ React10.createElement("div", { className: "absolute top-20 right-6 w-72 bg-black/90 backdrop-blur-xl border border-white/10 rounded-2xl p-5 pointer-events-auto shadow-2xl animate-in slide-in-from-right-4 duration-300" }, /* @__PURE__ */ React10.createElement("div", { className: "flex items-center justify-between mb-5" }, /* @__PURE__ */ React10.createElement("h3", { className: "text-white font-bold flex items-center gap-2" }, /* @__PURE__ */ React10.createElement(Settings, { className: "w-4 h-4 text-cyan-400" }), "AR \u8BBE\u7F6E"), /* @__PURE__ */ React10.createElement(
       "button",
       {
         onClick: () => setIsSettingsOpen(false),
-        className: "p-1 hover:bg-white/10 rounded-full transition-colors text-white/60"
+        className: "p-1.5 hover:bg-white/10 rounded-full transition-colors text-white/60"
       },
       /* @__PURE__ */ React10.createElement(X, { className: "w-4 h-4" })
-    )), /* @__PURE__ */ React10.createElement("div", { className: "space-y-4" }, /* @__PURE__ */ React10.createElement("div", null, /* @__PURE__ */ React10.createElement("label", { className: "block text-xs font-medium text-white/50 mb-1.5 ml-1 uppercase tracking-wider" }, "\u6A21\u578B\u8DEF\u5F84 (.pmx)"), /* @__PURE__ */ React10.createElement(
-      "input",
+    )), /* @__PURE__ */ React10.createElement("div", { className: "space-y-4" }, /* @__PURE__ */ React10.createElement(
+      Select,
       {
-        type: "text",
-        value: tempResources.modelPath,
-        onChange: (e) => setTempResources({ ...tempResources, modelPath: e.target.value }),
-        placeholder: "\u8BF7\u8F93\u5165\u6A21\u578B URL...",
-        className: "w-full bg-white/5 border border-white/10 rounded-xl px-4 py-2.5 text-sm text-white placeholder:text-white/10 focus:outline-none focus:border-blue-500/50 transition-colors"
+        label: "\u9009\u62E9\u6A21\u578B",
+        options: modelPresets,
+        value: selectedModelId,
+        onChange: setSelectedModelId,
+        placeholder: "\u8BF7\u9009\u62E9\u6A21\u578B..."
       }
-    )), /* @__PURE__ */ React10.createElement("div", null, /* @__PURE__ */ React10.createElement("label", { className: "block text-xs font-medium text-white/50 mb-1.5 ml-1 uppercase tracking-wider" }, "\u52A8\u4F5C\u8DEF\u5F84 (.vmd)"), /* @__PURE__ */ React10.createElement(
-      "input",
+    ), /* @__PURE__ */ React10.createElement(
+      Select,
       {
-        type: "text",
-        value: tempResources.motionPath || "",
-        onChange: (e) => setTempResources({ ...tempResources, motionPath: e.target.value }),
-        placeholder: "\u8BF7\u8F93\u5165\u52A8\u4F5C URL...",
-        className: "w-full bg-white/5 border border-white/10 rounded-xl px-4 py-2.5 text-sm text-white placeholder:text-white/10 focus:outline-none focus:border-blue-500/50 transition-colors"
-      }
-    )), /* @__PURE__ */ React10.createElement("div", { className: "pt-2" }, /* @__PURE__ */ React10.createElement(
+        label: "\u9009\u62E9\u52A8\u4F5C",
+        options: motionPresets,
+        value: selectedMotionId,
+        onChange: setSelectedMotionId,
+        placeholder: "\u8BF7\u9009\u62E9\u52A8\u4F5C..."
+      }
+    ), audioPresets.length > 0 && /* @__PURE__ */ React10.createElement(
+      Select,
+      {
+        label: "\u9009\u62E9\u97F3\u4E50",
+        options: audioPresets,
+        value: selectedAudioId,
+        onChange: setSelectedAudioId,
+        placeholder: "\u8BF7\u9009\u62E9\u97F3\u4E50...",
+        allowEmpty: true,
+        emptyLabel: "\u{1F507} \u4E0D\u64AD\u653E\u97F3\u4E50"
+      }
+    ), /* @__PURE__ */ React10.createElement("div", { className: "pt-3 space-y-2" }, isModelPlaced && /* @__PURE__ */ React10.createElement(
       "button",
       {
-        onClick: () => {
-          setCurrentResources(tempResources);
-          onResourcesChange?.(tempResources);
-          setIsSettingsOpen(false);
-          setIsLoading(true);
-        },
-        className: "w-full bg-blue-500 hover:bg-blue-600 text-white font-bold py-3 rounded-xl flex items-center justify-center gap-2 transition-all active:scale-95 shadow-lg shadow-blue-500/20"
+        onClick: applySettings,
+        className: "w-full bg-cyan-500 hover:bg-cyan-600 text-white font-bold py-3 rounded-xl flex items-center justify-center gap-2 transition-all active:scale-95 shadow-lg shadow-cyan-500/20"
       },
-      /* @__PURE__ */ React10.createElement(Check, { className: "w-4 h-4" }),
+      /* @__PURE__ */ React10.createElement(Sparkles, { className: "w-4 h-4" }),
       "\u5E94\u7528\u66F4\u6539"
-    )))), isLoading && /* @__PURE__ */ React10.createElement("div", { className: "absolute inset-0 flex items-center justify-center pointer-events-none" }, /* @__PURE__ */ React10.createElement("div", { className: "flex flex-col items-center gap-3" }, /* @__PURE__ */ React10.createElement("div", { className: "w-12 h-12 border-4 border-blue-500/30 border-t-blue-500 rounded-full animate-spin" }), /* @__PURE__ */ React10.createElement("div", { className: "text-white text-sm font-medium bg-black/40 px-3 py-1 rounded-full backdrop-blur-sm" }, "\u6B63\u5728\u52A0\u8F7D Miku \u8D44\u6E90..."))))
+    ), /* @__PURE__ */ React10.createElement(
+      "button",
+      {
+        onClick: resetPosition,
+        className: `w-full ${isModelPlaced ? "bg-white/5 hover:bg-white/10 text-white/70" : "bg-cyan-500 hover:bg-cyan-600 text-white shadow-lg shadow-cyan-500/20"} font-medium py-3 rounded-xl flex items-center justify-center gap-2 transition-all active:scale-95 border border-white/10`
+      },
+      /* @__PURE__ */ React10.createElement(RotateCcw, { className: "w-4 h-4" }),
+      isModelPlaced ? "\u91CD\u7F6E\u4F4D\u7F6E" : "\u5F00\u59CB\u653E\u7F6E"
+    )))), isLoading && isModelPlaced && /* @__PURE__ */ React10.createElement("div", { className: "absolute inset-0 flex items-center justify-center pointer-events-none" }, /* @__PURE__ */ React10.createElement("div", { className: "flex flex-col items-center gap-3" }, /* @__PURE__ */ React10.createElement("div", { className: "w-12 h-12 border-4 border-cyan-500/30 border-t-cyan-500 rounded-full animate-spin" }), /* @__PURE__ */ React10.createElement("div", { className: "text-white text-sm font-medium bg-black/40 px-3 py-1 rounded-full backdrop-blur-sm" }, "\u6B63\u5728\u53EC\u5524 Miku..."))))
   );
 });
 MMDARPlayer.displayName = "MMDARPlayer";
@@ -8378,6 +8772,6 @@ var FXThreePreview = ({
 };
 FXThreePreview.displayName = "FXThreePreview";
 
-export { CheerButton, CheerParticles, ChoiceMenu, DialogueBox, FXParser, FXThreePreview, FXToThreeAdapter, FXViewer, HLSLToGLSLConverter, HistoryPanel, LoadingOverlay, LoadingScreen, LoopConfirmDialog, MMDARPlayer, MMDLightingDebugPanel, MMDMusicPlayer, MMDPlayerBase, MMDPlayerEnhanced, MMDPlayerEnhancedDebugInfo, MMDPlaylist, MMDPlaylistDebugInfo, MMDVisualNovel, MultiFXAdapter, MusicControls, PMXEditor2 as PMXEditor, PMXEditor as PMXEditorCore, PMXExporter, PMXViewer, PlaylistPanel, StartScreen, TrackInfo, addDefaultSphereTextures, checkModelSphereDefinition, checkSphereTextures, compareFXEffects, configureMaterialsForMMD, configureRendererForMMD, createMMDLights, diagnoseMaterialsMMD, exportFXToJSON, exportFXToMarkdown, extractTexturePaths, filterDefinesByPrefix, fullSphereDiagnostic, generateAllToonTextures, generateToonTexture, getColorParameters, getConfigSummaryText, getFeatureFlags, getTextureDefines, hasFeature, inspectMaterial, listAllMaterials, loadAmmo, printDiagnosticReport, printModelSphereInfo, printSphereDiagnostic, quickDiagnose, validateFXEffect };
+export { CheerButton, CheerParticles, ChoiceMenu, DialogueBox, FXParser, FXThreePreview, FXToThreeAdapter, FXViewer, HLSLToGLSLConverter, HistoryPanel, LoadingOverlay, LoadingScreen, LoopConfirmDialog, MMDARPlayer, MMDLightingDebugPanel, MMDMusicPlayer, MMDPlayerBase, MMDPlayerEnhanced, MMDPlayerEnhancedDebugInfo, MMDPlaylist, MMDPlaylistDebugInfo, MMDVisualNovel, MMDVisualNovelWithSelector, ModelSelectorSettings, MultiFXAdapter, MusicControls, PMXEditor2 as PMXEditor, PMXEditor as PMXEditorCore, PMXExporter, PMXViewer, PlaylistPanel, StartScreen, TrackInfo, addDefaultSphereTextures, checkModelSphereDefinition, checkSphereTextures, compareFXEffects, configureMaterialsForMMD, configureRendererForMMD, createMMDLights, diagnoseMaterialsMMD, exportFXToJSON, exportFXToMarkdown, extractTexturePaths, filterDefinesByPrefix, fullSphereDiagnostic, generateAllToonTextures, generateToonTexture, getColorParameters, getConfigSummaryText, getFeatureFlags, getTextureDefines, hasFeature, inspectMaterial, listAllMaterials, loadAmmo, printDiagnosticReport, printModelSphereInfo, printSphereDiagnostic, quickDiagnose, validateFXEffect };
 //# sourceMappingURL=index.mjs.map
 //# sourceMappingURL=index.mjs.map