sa2kit 1.6.14 → 1.6.15

package/dist/mmd/index.js

@@ -1,7 +1,7 @@
 'use strict';
 
-var chunkUUM5BIOU_js = require('../chunk-UUM5BIOU.js');
-require('../chunk-LFM5QSFW.js');
+var chunkE7RGBAYJ_js = require('../chunk-E7RGBAYJ.js');
+require('../chunk-A3UP56MS.js');
 var chunkJZXJQMVE_js = require('../chunk-JZXJQMVE.js');
 require('../chunk-DGUM43GV.js');
 var React10 = require('react');
@@ -1177,6 +1177,7 @@ var MMDPlayerBase = React10.forwardRef((props, ref) => {
   const audioRef = React10.useRef(null);
   const audioListenerRef = React10.useRef(null);
   const audioLoaderRef = React10.useRef(new THREE2__namespace.AudioLoader());
+  const [isAudioSystemReady, setIsAudioSystemReady] = React10.useState(false);
   const latestCallbacks = React10.useRef({ onPlay, onPause, onEnded, onTimeUpdate });
   React10.useEffect(() => {
     latestCallbacks.current = { onPlay, onPause, onEnded, onTimeUpdate };
@@ -1194,6 +1195,10 @@ var MMDPlayerBase = React10.forwardRef((props, ref) => {
   React10.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();
@@ -1436,6 +1441,7 @@ var MMDPlayerBase = React10.forwardRef((props, ref) => {
           afterglow: 2
         });
         helperRef.current = helper;
+        setIsAudioSystemReady(true);
         const loadModelPromise = new Promise((resolve, reject) => {
           if (resources.motionPath) {
             loader.loadWithAnimation(
@@ -1853,6 +1859,7 @@ ${errorMessage}
           console.warn("[MMDPlayerBase] Error cleaning up AnimationHelper:", e);
         }
         helperRef.current = null;
+        setIsAudioSystemReady(false);
       }
       animationClipRef.current = null;
       if (axesHelperRef.current) {
@@ -2009,9 +2016,19 @@ ${errorMessage}
     };
   }, [resources.modelPath, resources.motionPath, resources.stageModelPath, stage.enablePhysics, stage.physicsPath]);
   React10.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();
@@ -2031,14 +2048,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]);
   React10.useEffect(() => {
     if (!sceneRef.current) return;
     if (showAxes && !axesHelperRef.current) {
@@ -4438,7 +4470,9 @@ var StartScreen = ({
   settingsText = "\u6E38\u620F\u8BBE\u7F6E",
   aboutText = "\u5173\u4E8E\u4F5C\u54C1",
   onStart,
-  className = ""
+  className = "",
+  customSettingsContent,
+  customAboutContent
 }) => {
   const [isMounted, setIsMounted] = React10.useState(false);
   const [showSettings, setShowSettings] = React10.useState(false);
@@ -4543,7 +4577,7 @@ var StartScreen = ({
       background: "rgba(248, 250, 252, 0.8)",
       borderColor: "rgba(203, 213, 225, 0.3)"
     } }, /* @__PURE__ */ React10__default.default.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__default.default.createElement(VNModal, { title: settingsText, show: showSettings, onClose: () => setShowSettings(false) }, /* @__PURE__ */ React10__default.default.createElement("div", { className: "space-y-6 sm:space-y-8 py-2 sm:py-4" }, /* @__PURE__ */ React10__default.default.createElement("div", { className: "space-y-3 sm:space-y-4" }, /* @__PURE__ */ React10__default.default.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__default.default.createElement("span", null, "MUSIC VOLUME"), /* @__PURE__ */ React10__default.default.createElement("span", null, "80%")), /* @__PURE__ */ React10__default.default.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__default.default.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__default.default.createElement("div", { className: "space-y-3 sm:space-y-4" }, /* @__PURE__ */ React10__default.default.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__default.default.createElement("span", null, "TEXT SPEED"), /* @__PURE__ */ React10__default.default.createElement("span", null, "NORMAL")), /* @__PURE__ */ React10__default.default.createElement("div", { className: "flex gap-2 sm:gap-3" }, ["SLOW", "NORMAL", "FAST"].map((s, i) => /* @__PURE__ */ React10__default.default.createElement(
+    /* @__PURE__ */ React10__default.default.createElement(VNModal, { title: settingsText, show: showSettings, onClose: () => setShowSettings(false) }, customSettingsContent ? /* @__PURE__ */ React10__default.default.createElement("div", { className: "py-2 sm:py-4" }, customSettingsContent) : /* @__PURE__ */ React10__default.default.createElement("div", { className: "space-y-6 sm:space-y-8 py-2 sm:py-4" }, /* @__PURE__ */ React10__default.default.createElement("div", { className: "space-y-3 sm:space-y-4" }, /* @__PURE__ */ React10__default.default.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__default.default.createElement("span", null, "MUSIC VOLUME"), /* @__PURE__ */ React10__default.default.createElement("span", null, "80%")), /* @__PURE__ */ React10__default.default.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__default.default.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__default.default.createElement("div", { className: "space-y-3 sm:space-y-4" }, /* @__PURE__ */ React10__default.default.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__default.default.createElement("span", null, "TEXT SPEED"), /* @__PURE__ */ React10__default.default.createElement("span", null, "NORMAL")), /* @__PURE__ */ React10__default.default.createElement("div", { className: "flex gap-2 sm:gap-3" }, ["SLOW", "NORMAL", "FAST"].map((s, i) => /* @__PURE__ */ React10__default.default.createElement(
       "div",
       {
         key: s,
@@ -4560,7 +4594,7 @@ var StartScreen = ({
       },
       s
     )))), /* @__PURE__ */ React10__default.default.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__default.default.createElement("span", null, "Auto Save Enabled"), /* @__PURE__ */ React10__default.default.createElement("span", null, "Cloud Sync Active")))),
-    /* @__PURE__ */ React10__default.default.createElement(VNModal, { title: aboutText, show: showAbout, onClose: () => setShowAbout(false) }, /* @__PURE__ */ React10__default.default.createElement("div", { className: "space-y-6 sm:space-y-8 py-2 sm:py-4" }, /* @__PURE__ */ React10__default.default.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__default.default.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__default.default.createElement("div", null, /* @__PURE__ */ React10__default.default.createElement("h3", { className: "text-lg sm:text-2xl font-black tracking-tight", style: { color: "#22c55e" } }, scriptName || "Project SA2"), /* @__PURE__ */ React10__default.default.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__default.default.createElement("div", { className: "space-y-3 sm:space-y-4 px-1 sm:px-2" }, /* @__PURE__ */ React10__default.default.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__default.default.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__default.default.createElement("div", { className: "flex flex-col gap-1" }, /* @__PURE__ */ React10__default.default.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__default.default.createElement("span", { className: "text-xs font-bold", style: { color: "#64748b" } }, "SA2KIT TEAM")), /* @__PURE__ */ React10__default.default.createElement("div", { className: "flex flex-col gap-1 text-right" }, /* @__PURE__ */ React10__default.default.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__default.default.createElement("span", { className: "text-xs font-bold", style: { color: "#64748b" } }, "THREE.JS / REACT"))))),
+    /* @__PURE__ */ React10__default.default.createElement(VNModal, { title: aboutText, show: showAbout, onClose: () => setShowAbout(false) }, customAboutContent ? /* @__PURE__ */ React10__default.default.createElement("div", { className: "py-2 sm:py-4" }, customAboutContent) : /* @__PURE__ */ React10__default.default.createElement("div", { className: "space-y-6 sm:space-y-8 py-2 sm:py-4" }, /* @__PURE__ */ React10__default.default.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__default.default.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__default.default.createElement("div", null, /* @__PURE__ */ React10__default.default.createElement("h3", { className: "text-lg sm:text-2xl font-black tracking-tight", style: { color: "#22c55e" } }, scriptName || "Project SA2"), /* @__PURE__ */ React10__default.default.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__default.default.createElement("div", { className: "space-y-3 sm:space-y-4 px-1 sm:px-2" }, /* @__PURE__ */ React10__default.default.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__default.default.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__default.default.createElement("div", { className: "flex flex-col gap-1" }, /* @__PURE__ */ React10__default.default.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__default.default.createElement("span", { className: "text-xs font-bold", style: { color: "#64748b" } }, "SA2KIT TEAM")), /* @__PURE__ */ React10__default.default.createElement("div", { className: "flex flex-col gap-1 text-right" }, /* @__PURE__ */ React10__default.default.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__default.default.createElement("span", { className: "text-xs font-bold", style: { color: "#64748b" } }, "THREE.JS / REACT"))))),
     /* @__PURE__ */ React10__default.default.createElement("style", null, `
         @keyframes floatParticle {
           from { transform: translateY(0) translateX(0); opacity: 0; }
@@ -4644,7 +4678,9 @@ var LoadingOverlay = ({
   settingsText = "\u6E38\u620F\u8BBE\u7F6E",
   aboutText = "\u5173\u4E8E\u4F5C\u54C1",
   onStart,
-  className = ""
+  className = "",
+  customSettingsContent,
+  customAboutContent
 }) => {
   return /* @__PURE__ */ React10__default.default.createElement(React10__default.default.Fragment, null, /* @__PURE__ */ React10__default.default.createElement(
     LoadingScreen,
@@ -4662,7 +4698,9 @@ var LoadingOverlay = ({
       settingsText,
       aboutText,
       onStart,
-      className
+      className,
+      customSettingsContent,
+      customAboutContent
     }
   ));
 };
@@ -5069,6 +5107,8 @@ var MMDVisualNovel = React10.forwardRef(
     showHistoryButton = true,
     showLightingDebugPanel = false,
     lightingDebugInitialParams,
+    customSettingsContent,
+    customAboutContent,
     className,
     style
   }, ref) => {
@@ -5467,7 +5507,9 @@ var MMDVisualNovel = React10.forwardRef(
           startText,
           settingsText,
           aboutText,
-          onStart: handleStart
+          onStart: handleStart,
+          customSettingsContent,
+          customAboutContent
         }
       ),
       (() => {
@@ -5588,6 +5630,224 @@ var MMDVisualNovel = React10.forwardRef(
   }
 );
 MMDVisualNovel.displayName = "MMDVisualNovel";
+var ModelSelectorSettings = ({
+  characterModels,
+  stageModels,
+  selectedCharacterId,
+  selectedStageId,
+  onCharacterChange,
+  onStageChange,
+  characterLabel = "CHARACTER MODEL",
+  stageLabel = "STAGE MODEL"
+}) => {
+  return /* @__PURE__ */ React10__default.default.createElement("div", { className: "space-y-6 sm:space-y-8" }, /* @__PURE__ */ React10__default.default.createElement("div", { className: "space-y-3 sm:space-y-4" }, /* @__PURE__ */ React10__default.default.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__default.default.createElement("span", null, characterLabel), /* @__PURE__ */ React10__default.default.createElement("span", { className: "text-[10px] sm:text-xs opacity-60" }, characterModels.find((m) => m.id === selectedCharacterId)?.name || "\u672A\u9009\u62E9")), /* @__PURE__ */ React10__default.default.createElement("div", { className: "relative" }, /* @__PURE__ */ React10__default.default.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__default.default.createElement("option", { key: model.id, value: model.id }, model.name))
+  ), /* @__PURE__ */ React10__default.default.createElement("div", { className: "absolute right-4 sm:right-6 top-1/2 -translate-y-1/2 pointer-events-none" }, /* @__PURE__ */ React10__default.default.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__default.default.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19 9l-7 7-7-7" })
+  ))), characterModels.find((m) => m.id === selectedCharacterId)?.thumbnail && /* @__PURE__ */ React10__default.default.createElement("div", { className: "mt-2 flex justify-center" }, /* @__PURE__ */ React10__default.default.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__default.default.createElement("div", { className: "space-y-3 sm:space-y-4" }, /* @__PURE__ */ React10__default.default.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__default.default.createElement("span", null, stageLabel), /* @__PURE__ */ React10__default.default.createElement("span", { className: "text-[10px] sm:text-xs opacity-60" }, stageModels.find((m) => m.id === selectedStageId)?.name || "\u672A\u9009\u62E9")), /* @__PURE__ */ React10__default.default.createElement("div", { className: "relative" }, /* @__PURE__ */ React10__default.default.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__default.default.createElement("option", { key: model.id, value: model.id }, model.name))
+  ), /* @__PURE__ */ React10__default.default.createElement("div", { className: "absolute right-4 sm:right-6 top-1/2 -translate-y-1/2 pointer-events-none" }, /* @__PURE__ */ React10__default.default.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__default.default.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19 9l-7 7-7-7" })
+  ))), stageModels.find((m) => m.id === selectedStageId)?.thumbnail && /* @__PURE__ */ React10__default.default.createElement("div", { className: "mt-2 flex justify-center" }, /* @__PURE__ */ React10__default.default.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__default.default.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__default.default.createElement("svg", { className: "w-3.5 h-3.5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24" }, /* @__PURE__ */ React10__default.default.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__default.default.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 = React10.forwardRef((props, ref) => {
+  const {
+    script,
+    modelSelector,
+    onModelSelectionChange,
+    ...restProps
+  } = props;
+  const {
+    characterModels,
+    stageModels,
+    defaultCharacterId,
+    defaultStageId,
+    characterLabel,
+    stageLabel
+  } = modelSelector;
+  const visualNovelRef = React10.useRef(null);
+  const [selectedCharacterId, setSelectedCharacterId] = React10.useState(
+    defaultCharacterId || characterModels[0]?.id || ""
+  );
+  const [selectedStageId, setSelectedStageId] = React10.useState(
+    defaultStageId || stageModels[0]?.id || ""
+  );
+  const selectedCharacterPath = React10.useMemo(() => {
+    const model = characterModels.find((m) => m.id === selectedCharacterId);
+    return model?.path || characterModels[0]?.path || "";
+  }, [characterModels, selectedCharacterId]);
+  const selectedStagePath = React10.useMemo(() => {
+    const model = stageModels.find((m) => m.id === selectedStageId);
+    return model?.path || stageModels[0]?.path || "";
+  }, [stageModels, selectedStageId]);
+  const modifiedScript = React10.useMemo(() => {
+    return {
+      ...script,
+      nodes: script.nodes.map((node) => ({
+        ...node,
+        resources: {
+          ...node.resources,
+          // 覆盖人物模型路径
+          modelPath: selectedCharacterPath,
+          // 覆盖场景模型路径
+          stageModelPath: selectedStagePath
+        }
+      }))
+    };
+  }, [script, selectedCharacterPath, selectedStagePath]);
+  const handleCharacterChange = React10.useCallback((id) => {
+    setSelectedCharacterId(id);
+    onModelSelectionChange?.(id, selectedStageId);
+  }, [selectedStageId, onModelSelectionChange]);
+  const handleStageChange = React10.useCallback((id) => {
+    setSelectedStageId(id);
+    onModelSelectionChange?.(selectedCharacterId, id);
+  }, [selectedCharacterId, onModelSelectionChange]);
+  const customSettingsContent = React10.useMemo(() => /* @__PURE__ */ React10__default.default.createElement(
+    ModelSelectorSettings,
+    {
+      characterModels,
+      stageModels,
+      selectedCharacterId,
+      selectedStageId,
+      onCharacterChange: handleCharacterChange,
+      onStageChange: handleStageChange,
+      characterLabel,
+      stageLabel
+    }
+  ), [
+    characterModels,
+    stageModels,
+    selectedCharacterId,
+    selectedStageId,
+    handleCharacterChange,
+    handleStageChange,
+    characterLabel,
+    stageLabel
+  ]);
+  React10.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__default.default.createElement(
+    MMDVisualNovel,
+    {
+      ref: visualNovelRef,
+      script: modifiedScript,
+      customSettingsContent,
+      ...restProps
+    }
+  );
+});
+MMDVisualNovelWithSelector.displayName = "MMDVisualNovelWithSelector";
 var MusicControls = ({
   isPlaying,
   currentTime,
@@ -5799,7 +6059,7 @@ var MMDMusicPlayer = React10.forwardRef(
     const [isUIVisible, setIsUIVisible] = React10.useState(true);
     const [isCameraManual, setIsCameraManual] = React10.useState(false);
     const [searchKeyword, setSearchKeyword] = React10.useState("");
-    const { search, searchResult, isSearching, getSongUrl } = chunkUUM5BIOU_js.useMusic();
+    const { search, searchResult, isSearching, getSongUrl } = chunkE7RGBAYJ_js.useMusic();
     React10.useEffect(() => {
       if (mikuMode && tracks.length === 0) {
         search({ keyword: "", miku: true });
@@ -6076,41 +6336,129 @@ var MMDMusicPlayer = React10.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__default.default.createElement("div", { className: "space-y-1.5" }, /* @__PURE__ */ React10__default.default.createElement("label", { className: "block text-xs font-medium text-white/50 ml-1 uppercase tracking-wider" }, label), /* @__PURE__ */ React10__default.default.createElement("div", { className: "relative" }, /* @__PURE__ */ React10__default.default.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__default.default.createElement("option", { value: "", disabled: true, className: "bg-gray-900 text-white/50" }, placeholder),
+    allowEmpty && /* @__PURE__ */ React10__default.default.createElement("option", { value: "", className: "bg-gray-900 text-white/60" }, emptyLabel),
+    options.map((option) => /* @__PURE__ */ React10__default.default.createElement(
+      "option",
+      {
+        key: option.id,
+        value: option.id,
+        className: "bg-gray-900 text-white"
+      },
+      option.name
+    ))
+  ), /* @__PURE__ */ React10__default.default.createElement(lucideReact.ChevronDown, { className: "absolute right-3 top-1/2 -translate-y-1/2 w-4 h-4 text-white/40 pointer-events-none" })));
+}
 var MMDARPlayer = React10.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 = React10.useRef(null);
   const playerRef = React10.useRef(null);
   const streamRef = React10.useRef(null);
+  const containerRef = React10.useRef(null);
   const [isCameraStarted, setIsCameraStarted] = React10.useState(false);
   const [cameraError, setCameraError] = React10.useState(null);
   const [facingMode, setFacingMode] = React10.useState(cameraConfig.facingMode || "user");
-  const [isLoading, setIsLoading] = React10.useState(true);
+  const [isLoading, setIsLoading] = React10.useState(false);
   const [isSettingsOpen, setIsSettingsOpen] = React10.useState(false);
-  const [currentResources, setCurrentResources] = React10.useState(resources);
-  const [tempResources, setTempResources] = React10.useState(resources);
-  React10.useEffect(() => {
-    if (!isSettingsOpen) {
-      setCurrentResources(resources);
-      setTempResources(resources);
-    }
-  }, [resources, isSettingsOpen]);
+  const [selectedModelId, setSelectedModelId] = React10.useState(initialModelId);
+  const [selectedMotionId, setSelectedMotionId] = React10.useState(initialMotionId);
+  const [selectedAudioId, setSelectedAudioId] = React10.useState(initialAudioId);
+  const [isModelPlaced, setIsModelPlaced] = React10.useState(initialModelVisible);
+  const [placementAnimation, setPlacementAnimation] = React10.useState(false);
+  const currentResources = React10.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 = React10.useCallback(() => {
+    if (isModelPlaced) return;
+    setPlacementAnimation(true);
+    setIsLoading(true);
+    setTimeout(() => {
+      setIsModelPlaced(true);
+      setPlacementAnimation(false);
+      onModelPlaced?.();
+    }, 300);
+  }, [isModelPlaced, onModelPlaced]);
+  const removeModel = React10.useCallback(() => {
+    setIsModelPlaced(false);
+    setIsLoading(false);
+  }, []);
+  const switchModel = React10.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 = React10.useCallback(() => {
+    onResourcesChange?.(currentResources);
+    setIsSettingsOpen(false);
+    if (isModelPlaced) {
+      setIsLoading(true);
+    }
+  }, [currentResources, isModelPlaced, onResourcesChange]);
+  const resetPosition = React10.useCallback(() => {
+    setIsModelPlaced(false);
+    setIsLoading(false);
+    setIsSettingsOpen(false);
+  }, []);
   const startCamera = React10.useCallback(async (mode = facingMode) => {
     try {
       setCameraError(null);
@@ -6171,22 +6519,27 @@ var MMDARPlayer = React10.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]);
   React10.useImperativeHandle(ref, () => ({
     startCamera,
     stopCamera,
     switchCamera,
-    snapshot
+    snapshot,
+    placeModel,
+    removeModel,
+    switchModel
   }));
   React10.useEffect(() => {
     if (autoPlay) {
@@ -6194,9 +6547,13 @@ var MMDARPlayer = React10.forwardRef((props, ref) => {
     }
     return () => stopCamera();
   }, [autoPlay, startCamera, stopCamera]);
+  React10.useEffect(() => {
+    onResourcesChange?.(currentResources);
+  }, [currentResources, onResourcesChange]);
   return /* @__PURE__ */ React10__default.default.createElement(
     "div",
     {
+      ref: containerRef,
       className: `relative w-full h-full bg-black overflow-hidden ${className}`,
       style
     },
@@ -6211,26 +6568,25 @@ var MMDARPlayer = React10.forwardRef((props, ref) => {
         style: { zIndex: 0 }
       }
     ),
-    /* @__PURE__ */ React10__default.default.createElement(
+    isModelPlaced && /* @__PURE__ */ React10__default.default.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__default.default.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);
@@ -6240,6 +6596,30 @@ var MMDARPlayer = React10.forwardRef((props, ref) => {
         }
       )
     ),
+    !isModelPlaced && isCameraStarted && /* @__PURE__ */ React10__default.default.createElement(
+      "div",
+      {
+        className: "absolute inset-0 z-5 flex items-center justify-center",
+        onClick: placeModel
+      },
+      /* @__PURE__ */ React10__default.default.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__default.default.createElement("div", { className: "absolute inset-0 -m-4 rounded-2xl bg-cyan-400/20 animate-ping" }),
+        /* @__PURE__ */ React10__default.default.createElement("div", { className: "absolute inset-0 -m-2 rounded-xl bg-cyan-400/30 animate-pulse" }),
+        /* @__PURE__ */ React10__default.default.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__default.default.createElement("div", { className: "bg-black/80 backdrop-blur-xl px-8 py-6 rounded-xl flex flex-col items-center gap-3" }, /* @__PURE__ */ React10__default.default.createElement("div", { className: "relative" }, /* @__PURE__ */ React10__default.default.createElement(lucideReact.Sparkles, { className: "w-10 h-10 text-cyan-400 animate-pulse" }), /* @__PURE__ */ React10__default.default.createElement("div", { className: "absolute inset-0 w-10 h-10 bg-cyan-400/30 blur-xl" })), /* @__PURE__ */ React10__default.default.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__default.default.createElement("span", { className: "text-xs text-white/50 font-medium" }, "\u70B9\u51FB\u53EC\u5524 Miku \u2728"))),
+        /* @__PURE__ */ React10__default.default.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__default.default.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__default.default.createElement("div", { className: "absolute inset-0 z-10 pointer-events-none flex flex-col justify-between p-6" }, /* @__PURE__ */ React10__default.default.createElement("div", { className: "flex justify-between items-start pointer-events-auto" }, cameraError ? /* @__PURE__ */ React10__default.default.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__default.default.createElement(lucideReact.AlertCircle, { className: "w-4 h-4" }), cameraError, /* @__PURE__ */ React10__default.default.createElement(
       "button",
       {
@@ -6247,12 +6627,12 @@ var MMDARPlayer = React10.forwardRef((props, ref) => {
         className: "ml-2 underline"
       },
       "\u91CD\u8BD5"
-    )) : /* @__PURE__ */ React10__default.default.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__default.default.createElement(lucideReact.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__default.default.createElement("div", { className: "flex flex-col gap-2" }, showSettings && /* @__PURE__ */ React10__default.default.createElement(
+    )) : /* @__PURE__ */ React10__default.default.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__default.default.createElement(lucideReact.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__default.default.createElement("div", { className: "flex flex-col gap-2" }, showSettings && /* @__PURE__ */ React10__default.default.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__default.default.createElement(lucideReact.Settings, { className: "w-5 h-5" })
     ), /* @__PURE__ */ React10__default.default.createElement(
@@ -6271,45 +6651,59 @@ var MMDARPlayer = React10.forwardRef((props, ref) => {
         title: isCameraStarted ? "\u5173\u95ED\u6444\u50CF\u5934" : "\u5F00\u542F\u6444\u50CF\u5934"
       },
       isCameraStarted ? /* @__PURE__ */ React10__default.default.createElement(lucideReact.CameraOff, { className: "w-5 h-5" }) : /* @__PURE__ */ React10__default.default.createElement(lucideReact.Camera, { className: "w-5 h-5" })
-    ))), isSettingsOpen && /* @__PURE__ */ React10__default.default.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__default.default.createElement("div", { className: "flex items-center justify-between mb-6" }, /* @__PURE__ */ React10__default.default.createElement("h3", { className: "text-white font-bold flex items-center gap-2" }, /* @__PURE__ */ React10__default.default.createElement(lucideReact.Settings, { className: "w-4 h-4" }), "\u8D44\u6E90\u8BBE\u7F6E"), /* @__PURE__ */ React10__default.default.createElement(
+    ))), isSettingsOpen && /* @__PURE__ */ React10__default.default.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__default.default.createElement("div", { className: "flex items-center justify-between mb-5" }, /* @__PURE__ */ React10__default.default.createElement("h3", { className: "text-white font-bold flex items-center gap-2" }, /* @__PURE__ */ React10__default.default.createElement(lucideReact.Settings, { className: "w-4 h-4 text-cyan-400" }), "AR \u8BBE\u7F6E"), /* @__PURE__ */ React10__default.default.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__default.default.createElement(lucideReact.X, { className: "w-4 h-4" })
-    )), /* @__PURE__ */ React10__default.default.createElement("div", { className: "space-y-4" }, /* @__PURE__ */ React10__default.default.createElement("div", null, /* @__PURE__ */ React10__default.default.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__default.default.createElement(
-      "input",
+    )), /* @__PURE__ */ React10__default.default.createElement("div", { className: "space-y-4" }, /* @__PURE__ */ React10__default.default.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__default.default.createElement("div", null, /* @__PURE__ */ React10__default.default.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__default.default.createElement(
-      "input",
+    ), /* @__PURE__ */ React10__default.default.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__default.default.createElement("div", { className: "pt-2" }, /* @__PURE__ */ React10__default.default.createElement(
+        label: "\u9009\u62E9\u52A8\u4F5C",
+        options: motionPresets,
+        value: selectedMotionId,
+        onChange: setSelectedMotionId,
+        placeholder: "\u8BF7\u9009\u62E9\u52A8\u4F5C..."
+      }
+    ), audioPresets.length > 0 && /* @__PURE__ */ React10__default.default.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__default.default.createElement("div", { className: "pt-3 space-y-2" }, isModelPlaced && /* @__PURE__ */ React10__default.default.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__default.default.createElement(lucideReact.Check, { className: "w-4 h-4" }),
+      /* @__PURE__ */ React10__default.default.createElement(lucideReact.Sparkles, { className: "w-4 h-4" }),
       "\u5E94\u7528\u66F4\u6539"
-    )))), isLoading && /* @__PURE__ */ React10__default.default.createElement("div", { className: "absolute inset-0 flex items-center justify-center pointer-events-none" }, /* @__PURE__ */ React10__default.default.createElement("div", { className: "flex flex-col items-center gap-3" }, /* @__PURE__ */ React10__default.default.createElement("div", { className: "w-12 h-12 border-4 border-blue-500/30 border-t-blue-500 rounded-full animate-spin" }), /* @__PURE__ */ React10__default.default.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__default.default.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__default.default.createElement(lucideReact.RotateCcw, { className: "w-4 h-4" }),
+      isModelPlaced ? "\u91CD\u7F6E\u4F4D\u7F6E" : "\u5F00\u59CB\u653E\u7F6E"
+    )))), isLoading && isModelPlaced && /* @__PURE__ */ React10__default.default.createElement("div", { className: "absolute inset-0 flex items-center justify-center pointer-events-none" }, /* @__PURE__ */ React10__default.default.createElement("div", { className: "flex flex-col items-center gap-3" }, /* @__PURE__ */ React10__default.default.createElement("div", { className: "w-12 h-12 border-4 border-cyan-500/30 border-t-cyan-500 rounded-full animate-spin" }), /* @__PURE__ */ React10__default.default.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";
@@ -8428,6 +8822,8 @@ exports.MMDPlayerEnhancedDebugInfo = MMDPlayerEnhancedDebugInfo;
 exports.MMDPlaylist = MMDPlaylist;
 exports.MMDPlaylistDebugInfo = MMDPlaylistDebugInfo;
 exports.MMDVisualNovel = MMDVisualNovel;
+exports.MMDVisualNovelWithSelector = MMDVisualNovelWithSelector;
+exports.ModelSelectorSettings = ModelSelectorSettings;
 exports.MultiFXAdapter = MultiFXAdapter;
 exports.MusicControls = MusicControls;
 exports.PMXEditor = PMXEditor2;