sa2kit 1.6.60 → 1.6.62

package/dist/mmd/index.js

@@ -3,14 +3,15 @@
 var chunkUIFFDRTE_js = require('../chunk-UIFFDRTE.js');
 var chunkTDCDEBGP_js = require('../chunk-TDCDEBGP.js');
 require('../chunk-WA67GZSZ.js');
+var chunkFGQGWW73_js = require('../chunk-FGQGWW73.js');
 require('../chunk-Z6ZWNWWR.js');
 var React10 = require('react');
 var clsx = require('clsx');
 var THREE2 = require('three');
 var threeStdlib = require('three-stdlib');
 var lucideReact = require('lucide-react');
+var JSZip = require('jszip');
 var reactDom = require('react-dom');
-var Script = require('next/script');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
@@ -34,7 +35,7 @@ function _interopNamespace(e) {
 
 var React10__default = /*#__PURE__*/_interopDefault(React10);
 var THREE2__namespace = /*#__PURE__*/_interopNamespace(THREE2);
-var Script__default = /*#__PURE__*/_interopDefault(Script);
+var JSZip__default = /*#__PURE__*/_interopDefault(JSZip);
 
 // src/mmd/pmx/editor/PMXEditor.ts
 var PMXEditor = class {
@@ -3438,6 +3439,188 @@ var MMDLightingDebugPanel = ({
   ));
 };
 MMDLightingDebugPanel.displayName = "MMDLightingDebugPanel";
+var MMD_UPLOAD_CONFIGS = {
+  model: {
+    moduleId: "mmd-models",
+    acceptedTypes: [".zip"],
+    maxFileSize: 150,
+    description: "MMD model package (ZIP)",
+    hint: "Include PMX/PMD and textures in the ZIP with original folder structure."
+  },
+  motion: {
+    moduleId: "mmd-motions",
+    acceptedTypes: [".vmd"],
+    maxFileSize: 20,
+    description: "MMD motion file"
+  },
+  camera: {
+    moduleId: "mmd-cameras",
+    acceptedTypes: [".vmd"],
+    maxFileSize: 10,
+    description: "MMD camera motion"
+  },
+  audio: {
+    moduleId: "mmd-audios",
+    acceptedTypes: [".mp3", ".wav", ".ogg", ".m4a"],
+    maxFileSize: 20,
+    description: "Audio track"
+  },
+  stage: {
+    moduleId: "mmd-stages",
+    acceptedTypes: [".zip"],
+    maxFileSize: 200,
+    description: "Stage package (ZIP)",
+    hint: "Include stage model and textures in the ZIP with original folder structure."
+  },
+  thumbnail: {
+    moduleId: "mmd-thumbnails",
+    acceptedTypes: [".jpg", ".jpeg", ".png", ".webp"],
+    maxFileSize: 5,
+    description: "Thumbnail image"
+  }
+};
+var formatMegabytes = (size) => `${(size / 1024 / 1024).toFixed(2)} MB`;
+var MMDUploadPanel = ({
+  resourceType,
+  fileService,
+  userId,
+  permission = "public",
+  label,
+  description,
+  hint,
+  acceptedTypes,
+  maxFileSizeMB,
+  validateZip = true,
+  disabled = false,
+  className,
+  style,
+  onUploaded,
+  onError,
+  onProgress
+}) => {
+  const inputId = React10.useId();
+  const [uploading, setUploading] = React10.useState(false);
+  const [progress, setProgress] = React10.useState(null);
+  const [error, setError] = React10.useState(null);
+  const [uploadedFile, setUploadedFile] = React10.useState(null);
+  const [uploadedUrl, setUploadedUrl] = React10.useState(null);
+  const [dragOver, setDragOver] = React10.useState(false);
+  const config = MMD_UPLOAD_CONFIGS[resourceType];
+  const mergedAcceptedTypes = acceptedTypes ?? config.acceptedTypes;
+  const maxSize = maxFileSizeMB ?? config.maxFileSize;
+  const hintText = hint ?? config.hint;
+  const titleText = label ?? config.description;
+  const descriptionText = description ?? `Max ${maxSize} MB`;
+  const acceptAttr = React10.useMemo(() => mergedAcceptedTypes.join(","), [mergedAcceptedTypes]);
+  const validateZipContents = async (file) => {
+    if (!validateZip || !(resourceType === "model" || resourceType === "stage")) return;
+    const buffer = await file.arrayBuffer();
+    const zip = await JSZip__default.default.loadAsync(buffer);
+    const entries = Object.keys(zip.files);
+    if (!entries.length) {
+      throw new Error("ZIP is empty.");
+    }
+    const hasModel = entries.some((name) => /\.[pP][mM][xX]$/.test(name)) || resourceType === "stage" && entries.some((name) => /\.[pP][mM][dD]$/.test(name));
+    const hasAssets = entries.some(
+      (name) => /\.(png|jpg|jpeg|bmp|tga|dds|spa|sph)$/i.test(name)
+    );
+    if (!hasModel) {
+      throw new Error("ZIP does not contain a PMX/PMD model file.");
+    }
+    if (!hasAssets) {
+      throw new Error("ZIP does not include texture assets.");
+    }
+  };
+  const handleUpload = async (file) => {
+    if (disabled || uploading) return;
+    setError(null);
+    setProgress(null);
+    if (file.size > maxSize * 1024 * 1024) {
+      setError(`File size exceeds ${maxSize} MB.`);
+      return;
+    }
+    try {
+      setUploading(true);
+      await validateZipContents(file);
+      const fileInfo = {
+        file,
+        moduleId: config.moduleId,
+        businessId: userId,
+        permission
+      };
+      const metadata = await fileService.uploadFile(fileInfo, (progressEvent) => {
+        setProgress(progressEvent);
+        onProgress?.(progressEvent);
+      });
+      let url;
+      if (fileService.getFileUrl) {
+        url = await fileService.getFileUrl(metadata.id);
+        setUploadedUrl(url ?? null);
+      } else {
+        setUploadedUrl(null);
+      }
+      setUploadedFile(metadata);
+      setUploading(false);
+      onUploaded?.({ file: metadata, url });
+    } catch (err) {
+      const message = err instanceof Error ? err.message : "Upload failed.";
+      setError(message);
+      setUploading(false);
+      onError?.(err instanceof Error ? err : new Error(message));
+    }
+  };
+  const handleFileInput = (event) => {
+    const file = event.target.files?.[0];
+    if (file) {
+      handleUpload(file);
+    }
+  };
+  const handleDrop = (event) => {
+    event.preventDefault();
+    setDragOver(false);
+    const file = event.dataTransfer.files?.[0];
+    if (file) {
+      handleUpload(file);
+    }
+  };
+  return /* @__PURE__ */ React10__default.default.createElement("div", { className: clsx.clsx("space-y-4", className), style }, /* @__PURE__ */ React10__default.default.createElement("div", null, /* @__PURE__ */ React10__default.default.createElement("div", { className: "text-sm font-semibold text-gray-900" }, titleText), /* @__PURE__ */ React10__default.default.createElement("div", { className: "text-xs text-gray-500" }, descriptionText), hintText && /* @__PURE__ */ React10__default.default.createElement("div", { className: "text-xs text-amber-600 mt-1" }, hintText)), /* @__PURE__ */ React10__default.default.createElement(
+    "div",
+    {
+      className: clsx.clsx(
+        "rounded-lg border-2 border-dashed px-4 py-6 text-center transition-colors",
+        dragOver ? "border-blue-500 bg-blue-50" : "border-gray-300",
+        disabled ? "opacity-50 pointer-events-none" : "cursor-pointer"
+      ),
+      onDragOver: (event) => {
+        event.preventDefault();
+        setDragOver(true);
+      },
+      onDragLeave: () => setDragOver(false),
+      onDrop: handleDrop
+    },
+    /* @__PURE__ */ React10__default.default.createElement(
+      "input",
+      {
+        id: inputId,
+        type: "file",
+        accept: acceptAttr,
+        className: "hidden",
+        onChange: handleFileInput,
+        disabled: disabled || uploading
+      }
+    ),
+    /* @__PURE__ */ React10__default.default.createElement("label", { htmlFor: inputId, className: "flex flex-col items-center gap-2" }, /* @__PURE__ */ React10__default.default.createElement(lucideReact.Upload, { className: "h-6 w-6 text-gray-500" }), /* @__PURE__ */ React10__default.default.createElement("span", { className: "text-sm text-gray-600" }, "Click to select or drag file here"), /* @__PURE__ */ React10__default.default.createElement("span", { className: "text-xs text-gray-400" }, mergedAcceptedTypes.join(", ")))
+  ), uploading && /* @__PURE__ */ React10__default.default.createElement("div", { className: "flex items-center gap-2 text-sm text-blue-600" }, /* @__PURE__ */ React10__default.default.createElement(lucideReact.Loader2, { className: "h-4 w-4 animate-spin" }), "Uploading", progress ? ` ${progress.progress}%` : "..."), progress && /* @__PURE__ */ React10__default.default.createElement("div", { className: "text-xs text-gray-500" }, formatMegabytes(progress.uploadedBytes), " / ", formatMegabytes(progress.totalBytes)), error && /* @__PURE__ */ React10__default.default.createElement("div", { className: "text-sm text-red-600" }, error), uploadedFile && /* @__PURE__ */ React10__default.default.createElement("div", { className: "flex items-center justify-between rounded-lg border border-green-200 bg-green-50 px-3 py-2 text-sm text-green-700" }, /* @__PURE__ */ React10__default.default.createElement("div", { className: "flex items-center gap-2" }, /* @__PURE__ */ React10__default.default.createElement(lucideReact.CheckCircle2, { className: "h-4 w-4" }), /* @__PURE__ */ React10__default.default.createElement("span", { className: "truncate" }, uploadedFile.originalName)), uploadedUrl && /* @__PURE__ */ React10__default.default.createElement(
+    "a",
+    {
+      href: uploadedUrl,
+      target: "_blank",
+      rel: "noreferrer",
+      className: "text-green-700 underline"
+    },
+    "Open"
+  )));
+};
 function diagnoseMaterialsMMD(scene, renderer) {
   const report = {
     totalMaterials: 0,
@@ -5089,6 +5272,8 @@ var MMDVisualNovel = React10.forwardRef(
     onScriptComplete,
     onError,
     showDebugInfo = false,
+    debug = false,
+    onTransitionStateChange,
     showSkipButton = true,
     showAutoButton = true,
     showHistoryButton = true,
@@ -5128,6 +5313,26 @@ var MMDVisualNovel = React10.forwardRef(
     const cheerParticlesRef = React10.useRef(null);
     const currentNode = nodes[currentNodeIndex];
     const currentDialogue = currentNode?.dialogues[currentDialogueIndex] || null;
+    const log = React10.useCallback((...args) => {
+      if (!debug) return;
+      console.log("[MMDVisualNovel]", ...args);
+    }, [debug]);
+    React10.useEffect(() => {
+      if (!onTransitionStateChange) return;
+      if (!isStarted) {
+        onTransitionStateChange("idle");
+        return;
+      }
+      if (isTransitioning) {
+        onTransitionStateChange("transitioning");
+        return;
+      }
+      if (isLoading || !isAnimationPlaying) {
+        onTransitionStateChange("loading");
+        return;
+      }
+      onTransitionStateChange("ready");
+    }, [isStarted, isTransitioning, isLoading, isAnimationPlaying, onTransitionStateChange]);
     const addToHistory = React10.useCallback((dialogue, nodeIndex, dialogueIndex) => {
       setHistory((prev) => [
         ...prev,
@@ -5159,11 +5364,11 @@ var MMDVisualNovel = React10.forwardRef(
         if (!node) return;
         const currentResources = nodes[currentNodeIndex]?.resources;
         if (!force && currentResources?.motionPath && !isVmdFinishedRef.current) {
-          console.log("[MMDVisualNovel] VMD not finished, showing confirmation");
+          log("VMD not finished, showing confirmation");
           setPendingNodeIndex(nodeIndex);
           return;
         }
-        console.log("[MMDVisualNovel] Transitioning to node " + nodeIndex);
+        log("Transitioning to node", nodeIndex);
         setIsTransitioning(true);
         setIsLoading(true);
         setIsAnimationPlaying(false);
@@ -5185,7 +5390,7 @@ var MMDVisualNovel = React10.forwardRef(
           }
           setTimeout(() => {
             setIsTransitioning(false);
-            console.log("[MMDVisualNovel] Transition to node " + nodeIndex + " completed, waiting for model load");
+            log("Transition to node completed, waiting for model load", nodeIndex);
           }, 100);
         }, 300);
       },
@@ -5199,7 +5404,7 @@ var MMDVisualNovel = React10.forwardRef(
         const val = variables[key];
         if (val !== void 0 && map[val] !== void 0) {
           nextNodeIndex = map[val];
-          console.log("[MMDVisualNovel] Branching: " + key + "=" + val + " -> node " + nextNodeIndex);
+          log("Branching", { key, val, nextNodeIndex });
         } else {
           nextNodeIndex = defaultIndex;
         }
@@ -5207,7 +5412,7 @@ var MMDVisualNovel = React10.forwardRef(
       if (nextNodeIndex < nodes.length && nextNodeIndex >= 0) {
         goToNode(nextNodeIndex);
       } else if (loop) {
-        console.log("[MMDVisualNovel] \u5230\u8FBE\u6700\u540E\u4E00\u4E2A\u8282\u70B9\uFF0C\u663E\u793A\u5FAA\u73AF\u786E\u8BA4\u5BF9\u8BDD\u6846");
+        log("Reached final node, showing loop confirmation");
         setShowLoopConfirm(true);
       } else {
         onScriptComplete?.();
@@ -5299,7 +5504,7 @@ var MMDVisualNovel = React10.forwardRef(
       if (nextNodeIndex < nodes.length) {
         goToNode(nextNodeIndex);
       } else if (loop) {
-        console.log("[MMDVisualNovel] \u5FEB\u8FDB\u5230\u6700\u540E\uFF0C\u663E\u793A\u5FAA\u73AF\u786E\u8BA4\u5BF9\u8BDD\u6846");
+        log("Skip reached final node, showing loop confirmation");
         setShowLoopConfirm(true);
       } else {
         onScriptComplete?.();
@@ -5326,16 +5531,16 @@ var MMDVisualNovel = React10.forwardRef(
       setIsLoading(true);
       setIsAnimationPlaying(false);
       typingCompleteRef.current = false;
-      console.log("[MMDVisualNovel] \u56DE\u5230\u5F00\u59CB\u9875\u9762");
+      log("Back to start screen");
     }, [initialNodeIndex, initialDialogueIndex]);
     const handleCheer = React10.useCallback(() => {
-      console.log("[MMDVisualNovel] \u89E6\u53D1\u5E94\u63F4\u6548\u679C");
+      log("Trigger cheer effect");
       cheerParticlesRef.current?.trigger();
     }, []);
     const handleRestartLoop = React10.useCallback(() => {
       setShowLoopConfirm(false);
       goToNode(0, true);
-      console.log("[MMDVisualNovel] \u91CD\u65B0\u5F00\u59CB\u5FAA\u73AF");
+      log("Restart loop");
     }, [goToNode]);
     React10.useImperativeHandle(
       ref,
@@ -5404,17 +5609,17 @@ var MMDVisualNovel = React10.forwardRef(
             loop: currentNode.loopAnimation === true,
             mobileOptimization,
             onLoad: () => {
-              console.log("[MMDVisualNovel] MMDPlayerBase onLoad called");
+              log("MMDPlayerBase onLoad");
               setIsLoading(false);
               if (isStartedRef.current) {
-                console.log("[MMDVisualNovel] Game already started, triggering play");
+                log("Game already started, triggering play");
                 setTimeout(() => {
                   playerRef.current?.play();
                 }, 100);
               }
             },
             onPlay: () => {
-              console.log("[MMDVisualNovel] MMDPlayerBase onPlay called");
+              log("MMDPlayerBase onPlay");
               setIsAnimationPlaying(true);
             },
             onTimeUpdate: (time) => {
@@ -5423,7 +5628,7 @@ var MMDVisualNovel = React10.forwardRef(
               const isLooped = time < lastAnimationTimeRef.current && lastAnimationTimeRef.current > 0;
               if (isNearEnd || isLooped) {
                 if (!isVmdFinishedRef.current) {
-                  console.log("[MMDVisualNovel] VMD finished/looped, marking as finished");
+                  log("VMD finished/looped, marking as finished");
                   isVmdFinishedRef.current = true;
                   setIsVmdFinished(true);
                 }
@@ -5431,7 +5636,7 @@ var MMDVisualNovel = React10.forwardRef(
               lastAnimationTimeRef.current = time;
             },
             onEnded: () => {
-              console.log("[MMDVisualNovel] VMD ended, marking as finished");
+              log("VMD ended, marking as finished");
               isVmdFinishedRef.current = true;
               setIsVmdFinished(true);
             },
@@ -5477,17 +5682,7 @@ var MMDVisualNovel = React10.forwardRef(
       /* @__PURE__ */ React10__default.default.createElement(
         LoadingOverlay,
         {
-          isLoading: (() => {
-            const shouldShowLoading = (isLoading || isTransitioning || !isAnimationPlaying) && isStarted;
-            console.log("[MMDVisualNovel] LoadingOverlay conditions:", {
-              isLoading,
-              isTransitioning,
-              isAnimationPlaying,
-              isStarted,
-              shouldShowLoading
-            });
-            return shouldShowLoading;
-          })(),
+          isLoading: (isLoading || isTransitioning || !isAnimationPlaying) && isStarted,
           showStartScreen: !isStarted,
           scriptName: script.name,
           loadingText: "\u6B63\u5728\u51C6\u5907\u573A\u666F\u4E2D...",
@@ -5499,44 +5694,31 @@ var MMDVisualNovel = React10.forwardRef(
           customAboutContent
         }
       ),
-      (() => {
-        const shouldShow = isStarted && isAnimationPlaying && currentDialogue && !showHistory && !showChoices && !showLoopConfirm;
-        console.log("[MMDVisualNovel] DialogueBox render condition:", {
-          isStarted,
-          isAnimationPlaying,
-          hasDialogue: !!currentDialogue,
-          showHistory,
-          showChoices,
-          showLoopConfirm,
-          shouldShow,
-          dialogue: currentDialogue
-        });
-        return shouldShow ? /* @__PURE__ */ React10__default.default.createElement(
-          DialogueBox,
-          {
-            dialogue: currentDialogue,
-            theme: dialogueTheme,
-            isTyping,
-            isAutoMode,
-            onClick: handleDialogueClick,
-            onSkipTyping: () => {
-              typingCompleteRef.current = true;
-            },
-            onToggleAuto: toggleAutoMode,
-            onOpenHistory: () => setShowHistory(true),
-            onSkip: handleSkip,
-            onResetCamera: () => {
-              playerRef.current?.resetCamera();
-              setIsCameraManual(false);
-            },
-            isCameraManual,
-            showControls: true,
-            showSkipButton,
-            showAutoButton,
-            showHistoryButton
-          }
-        ) : null;
-      })(),
+      isStarted && isAnimationPlaying && currentDialogue && !showHistory && !showChoices && !showLoopConfirm ? /* @__PURE__ */ React10__default.default.createElement(
+        DialogueBox,
+        {
+          dialogue: currentDialogue,
+          theme: dialogueTheme,
+          isTyping,
+          isAutoMode,
+          onClick: handleDialogueClick,
+          onSkipTyping: () => {
+            typingCompleteRef.current = true;
+          },
+          onToggleAuto: toggleAutoMode,
+          onOpenHistory: () => setShowHistory(true),
+          onSkip: handleSkip,
+          onResetCamera: () => {
+            playerRef.current?.resetCamera();
+            setIsCameraManual(false);
+          },
+          isCameraManual,
+          showControls: true,
+          showSkipButton,
+          showAutoButton,
+          showHistoryButton
+        }
+      ) : null,
       pendingNodeIndex !== null && /* @__PURE__ */ React10__default.default.createElement(
         SkipConfirmDialog,
         {
@@ -5559,7 +5741,7 @@ var MMDVisualNovel = React10.forwardRef(
             if (choice.setVariable) {
               const { key, value } = choice.setVariable;
               setVariables((prev) => ({ ...prev, [key]: value }));
-              console.log("[MMDVisualNovel] Variable set: " + key + " = " + value);
+              log("Variable set", { key, value });
             }
             choice.onSelect?.();
             if (choice.effect) {
@@ -5701,6 +5883,7 @@ var MMDVisualNovelWithSelector = React10.forwardRef((props, ref) => {
     script,
     modelSelector,
     onModelSelectionChange,
+    resourceMappingMode = "resource-map",
     ...restProps
   } = props;
   const {
@@ -5727,20 +5910,39 @@ var MMDVisualNovelWithSelector = React10.forwardRef((props, ref) => {
     return model?.path || stageModels[0]?.path || "";
   }, [stageModels, selectedStageId]);
   const modifiedScript = React10.useMemo(() => {
+    if (resourceMappingMode === "full-clone") {
+      return {
+        ...script,
+        nodes: script.nodes.map((node) => ({
+          ...node,
+          resources: {
+            ...node.resources,
+            modelPath: selectedCharacterPath,
+            stageModelPath: selectedStagePath
+          }
+        }))
+      };
+    }
     return {
       ...script,
-      nodes: script.nodes.map((node) => ({
-        ...node,
-        resources: {
-          ...node.resources,
-          // 覆盖人物模型路径
-          modelPath: selectedCharacterPath,
-          // 覆盖场景模型路径
-          stageModelPath: selectedStagePath
-        }
-      }))
+      nodes: script.nodes.map((node) => {
+        const nextModelPath = selectedCharacterPath;
+        const nextStagePath = selectedStagePath;
+        const resources = node.resources;
+        if (resources.modelPath === nextModelPath && resources.stageModelPath === nextStagePath) {
+          return node;
+        }
+        return {
+          ...node,
+          resources: {
+            ...resources,
+            modelPath: nextModelPath,
+            stageModelPath: nextStagePath
+          }
+        };
+      })
     };
-  }, [script, selectedCharacterPath, selectedStagePath]);
+  }, [script, selectedCharacterPath, selectedStagePath, resourceMappingMode]);
   const handleCharacterChange = React10.useCallback((id) => {
     setSelectedCharacterId(id);
     onModelSelectionChange?.(id, selectedStageId);
@@ -6323,594 +6525,733 @@ var MMDMusicPlayer = React10.forwardRef(
   }
 );
 MMDMusicPlayer.displayName = "MMDMusicPlayer";
-if (typeof window !== "undefined") {
-  window.THREE = THREE2__namespace;
+
+// src/mmd/ar/types.ts
+var ARMode = /* @__PURE__ */ ((ARMode2) => {
+  ARMode2["Overlay"] = "overlay";
+  ARMode2["WorldFixed"] = "world-fixed";
+  return ARMode2;
+})(ARMode || {});
+
+// src/mmd/ar/MMDARApp.tsx
+var DEFAULT_MODEL_SCALE = 0.1;
+function disposeMesh(object) {
+  object.traverse((child) => {
+    if (child instanceof THREE2__namespace.Mesh || child instanceof THREE2__namespace.SkinnedMesh) {
+      if (child.geometry) {
+        child.geometry.dispose();
+      }
+      const materials = Array.isArray(child.material) ? child.material : [child.material];
+      materials.forEach((material) => {
+        if (material instanceof THREE2__namespace.Material) {
+          Object.values(material).forEach((value) => {
+            if (value instanceof THREE2__namespace.Texture) {
+              value.dispose();
+            }
+          });
+          material.dispose();
+        }
+      });
+    }
+  });
 }
-var MMDARPlayer = React10.forwardRef(({
-  width = 800,
-  height = 600,
-  onReady,
-  onError
-}, ref) => {
+var MMDARApp = React10.forwardRef((props, ref) => {
+  const {
+    stage,
+    mobileOptimization,
+    cameraConfig,
+    cameraParametersUrl,
+    markerConfig,
+    mirrored = false,
+    showSettings,
+    modelPresets,
+    motionPresets,
+    audioPresets,
+    defaultModelId,
+    defaultMotionId,
+    defaultAudioId,
+    modelScale,
+    modelOffset,
+    initialModelVisible = false,
+    placementText = "Place Model",
+    arMode,
+    defaultARMode,
+    autoPlay = true,
+    loop = true,
+    onCameraReady,
+    onCameraError,
+    onResourcesChange,
+    onModelPlaced,
+    onARModeChange,
+    onLoad,
+    onError,
+    className,
+    style
+  } = props;
   const containerRef = React10.useRef(null);
+  const videoContainerRef = React10.useRef(null);
   const canvasRef = React10.useRef(null);
-  const sceneRef = React10.useRef();
-  const cameraRef = React10.useRef();
-  const rendererRef = React10.useRef();
-  const arToolkitSourceRef = React10.useRef();
-  const arToolkitContextRef = React10.useRef();
-  const markerRootRef = React10.useRef();
-  const markerControlsRef = React10.useRef();
-  const modelRootRef = React10.useRef();
-  const modelRef = React10.useRef();
-  const [state, setState] = React10.useState({
-    isLoading: true,
-    cameraReady: false,
-    arReady: false,
-    error: null,
-    showSettings: false,
-    modelPlaced: false,
-    markerDetected: false,
-    selectedModel: "sphere",
-    selectedMotion: "idle",
-    selectedAudio: "none",
-    cameraFacing: "environment",
-    markerType: "barcode",
-    showWireframe: false,
-    lightingEnabled: true,
-    quality: "medium"
-  });
-  const gyroDataRef = React10.useRef({ alpha: 0, beta: 0, gamma: 0 });
-  const initializeThreeJS = React10.useCallback(() => {
-    try {
-      const scene = new THREE2__namespace.Scene();
-      sceneRef.current = scene;
-      const camera = new THREE2__namespace.Camera();
-      cameraRef.current = camera;
-      scene.add(camera);
-      const renderer = new THREE2__namespace.WebGLRenderer({
-        canvas: canvasRef.current,
-        antialias: true,
-        alpha: true
-      });
-      renderer.setSize(width, height);
-      renderer.setClearColor(0, 0);
-      rendererRef.current = renderer;
-      console.log("Three.js initialized successfully");
-      return true;
-    } catch (error) {
-      console.error("Failed to initialize Three.js:", error);
-      setState((prev) => ({ ...prev, error: "Three.js \u521D\u59CB\u5316\u5931\u8D25" }));
-      return false;
+  const sceneRef = React10.useRef(null);
+  const cameraRef = React10.useRef(null);
+  const rendererRef = React10.useRef(null);
+  const arToolkitSourceRef = React10.useRef(null);
+  const arToolkitContextRef = React10.useRef(null);
+  const markerRootRef = React10.useRef(null);
+  const markerControlsRef = React10.useRef(null);
+  const modelRootRef = React10.useRef(null);
+  const mmdHelperRef = React10.useRef(null);
+  const mmdMeshRef = React10.useRef(null);
+  const animationFrameRef = React10.useRef(null);
+  const markerDetectedRef = React10.useRef(false);
+  const audioRef = React10.useRef(null);
+  const autoPlayRef = React10.useRef(autoPlay);
+  const [isLoading, setIsLoading] = React10.useState(true);
+  const [cameraReady, setCameraReady] = React10.useState(false);
+  const [arReady, setArReady] = React10.useState(false);
+  const [error, setError] = React10.useState(null);
+  const [markerDetected, setMarkerDetected] = React10.useState(false);
+  const [modelPlaced, setModelPlaced] = React10.useState(initialModelVisible);
+  const [settingsVisible, setSettingsVisible] = React10.useState(showSettings ?? false);
+  const [internalARMode, setInternalARMode] = React10.useState(
+    defaultARMode ?? arMode ?? "overlay" /* Overlay */
+  );
+  const [cameraFacing, setCameraFacing] = React10.useState(
+    cameraConfig?.facingMode ?? "environment"
+  );
+  const [selectedModelId, setSelectedModelId] = React10.useState(
+    defaultModelId ?? modelPresets[0]?.id ?? ""
+  );
+  const [selectedMotionId, setSelectedMotionId] = React10.useState(
+    defaultMotionId ?? motionPresets[0]?.id ?? ""
+  );
+  const [selectedAudioId, setSelectedAudioId] = React10.useState(
+    defaultAudioId ?? audioPresets?.[0]?.id ?? ""
+  );
+  const [overrideResources, setOverrideResources] = React10.useState(null);
+  const resolvedARMode = arMode ?? internalARMode;
+  const resolvedMarkerConfig = React10.useMemo(() => {
+    return {
+      type: markerConfig?.type ?? "pattern",
+      patternUrl: markerConfig?.patternUrl ?? chunkFGQGWW73_js.DEFAULT_AR_ASSETS.patternUrl,
+      barcodeValue: markerConfig?.barcodeValue ?? 0,
+      changeMatrixMode: markerConfig?.changeMatrixMode ?? "modelViewMatrix"
+    };
+  }, [markerConfig]);
+  const resolvedResources = React10.useMemo(() => {
+    if (overrideResources) {
+      return overrideResources;
     }
-  }, [width, height]);
-  const requestCameraPermission = React10.useCallback(async () => {
-    try {
-      console.log("Checking camera support...");
-      if (!navigator.mediaDevices || !navigator.mediaDevices.getUserMedia) {
-        throw new Error("\u60A8\u7684\u6D4F\u89C8\u5668\u4E0D\u652F\u6301\u6444\u50CF\u5934\u8BBF\u95EE");
+    const modelPreset = modelPresets.find((preset) => preset.id === selectedModelId);
+    if (!modelPreset) {
+      return null;
+    }
+    const motionPreset = motionPresets.find((preset) => preset.id === selectedMotionId);
+    const audioPreset = audioPresets?.find((preset) => preset.id === selectedAudioId);
+    return {
+      modelPath: modelPreset.modelPath,
+      motionPath: motionPreset?.motionPath,
+      audioPath: audioPreset?.audioPath
+    };
+  }, [
+    overrideResources,
+    modelPresets,
+    motionPresets,
+    audioPresets,
+    selectedModelId,
+    selectedMotionId,
+    selectedAudioId
+  ]);
+  const resolveModelScale = React10.useCallback(() => {
+    if (!modelScale) {
+      return new THREE2__namespace.Vector3(DEFAULT_MODEL_SCALE, DEFAULT_MODEL_SCALE, DEFAULT_MODEL_SCALE);
+    }
+    if (typeof modelScale === "number") {
+      return new THREE2__namespace.Vector3(modelScale, modelScale, modelScale);
+    }
+    return new THREE2__namespace.Vector3(modelScale.x, modelScale.y, modelScale.z);
+  }, [modelScale]);
+  const applyModelTransform = React10.useCallback(
+    (mesh) => {
+      const scale = resolveModelScale();
+      mesh.scale.copy(scale);
+      if (modelOffset) {
+        mesh.position.set(modelOffset.x, modelOffset.y, modelOffset.z);
+        return;
       }
-      console.log("Camera API supported, checking permissions...");
-      if (navigator.permissions) {
-        try {
-          console.log("Querying camera permission status...");
-          const permissionPromise = navigator.permissions.query({ name: "camera" });
-          const timeoutPromise2 = new Promise((_, reject) => {
-            setTimeout(() => reject(new Error("Permission query timeout")), 5e3);
-          });
-          const permissionStatus = await Promise.race([permissionPromise, timeoutPromise2]);
-          console.log("Permission status:", permissionStatus.state);
-          if (permissionStatus.state === "denied") {
-            throw new Error("\u6444\u50CF\u5934\u6743\u9650\u5DF2\u88AB\u62D2\u7EDD\uFF0C\u8BF7\u5728\u6D4F\u89C8\u5668\u8BBE\u7F6E\u4E2D\u5141\u8BB8\u8BBF\u95EE\u6444\u50CF\u5934");
-          }
-        } catch (permissionError) {
-          console.warn("Permission query failed or timed out, proceeding with getUserMedia:", permissionError);
-        }
+      const box = new THREE2__namespace.Box3().setFromObject(mesh);
+      if (Number.isFinite(box.min.y)) {
+        mesh.position.y += -box.min.y;
       }
-      console.log("Requesting camera access...");
-      const cameraPromise = navigator.mediaDevices.getUserMedia({
-        video: {
-          width: { ideal: width },
-          height: { ideal: height },
-          facingMode: "environment"
-          // 优先使用后置摄像头
+    },
+    [modelOffset, resolveModelScale]
+  );
+  const updateModelPlacement = React10.useCallback(
+    (visible) => {
+      if (!modelRootRef.current) return;
+      modelRootRef.current.visible = visible;
+      setModelPlaced(visible);
+    },
+    []
+  );
+  const attachModelRoot = React10.useCallback(
+    (mode) => {
+      if (!modelRootRef.current || !sceneRef.current || !cameraRef.current) return;
+      if (mode === "overlay" /* Overlay */) {
+        if (modelRootRef.current.parent !== cameraRef.current) {
+          modelRootRef.current.parent?.remove(modelRootRef.current);
+          cameraRef.current.add(modelRootRef.current);
+        }
+        modelRootRef.current.position.set(0, -1, -3);
+        modelRootRef.current.quaternion.identity();
+        updateModelPlacement(true);
+      } else {
+        if (modelRootRef.current.parent !== sceneRef.current) {
+          modelRootRef.current.parent?.remove(modelRootRef.current);
+          sceneRef.current.add(modelRootRef.current);
         }
-      });
-      const timeoutPromise = new Promise((_, reject) => {
-        setTimeout(() => reject(new Error("Camera access timeout - \u8BF7\u68C0\u67E5\u6444\u50CF\u5934\u6743\u9650")), 1e4);
-      });
-      const testStream = await Promise.race([cameraPromise, timeoutPromise]);
-      console.log("Camera access granted, stopping test stream...");
-      testStream.getTracks().forEach((track) => track.stop());
-      console.log("Camera permission granted successfully");
-      return true;
-    } catch (error) {
-      console.error("Camera permission denied:", error);
-      const errorMessage = error instanceof Error ? error.message : "\u65E0\u6CD5\u8BBF\u95EE\u6444\u50CF\u5934";
-      setState((prev) => ({ ...prev, error: errorMessage, isLoading: false }));
-      onError?.(errorMessage);
-      return false;
-    }
-  }, [width, height, onError]);
-  const createModel = React10.useCallback((modelType) => {
-    let geometry;
-    let material;
-    let mesh;
-    switch (modelType) {
-      case "sphere":
-        geometry = new THREE2__namespace.SphereGeometry(0.5, 32, 32);
-        material = new THREE2__namespace.MeshPhongMaterial({
-          color: 16738740,
-          shininess: 100,
-          specular: 1118481
-        });
-        mesh = new THREE2__namespace.Mesh(geometry, material);
-        break;
-      case "cube":
-        geometry = new THREE2__namespace.BoxGeometry(0.8, 0.8, 0.8);
-        material = new THREE2__namespace.MeshPhongMaterial({
-          color: 65407,
-          shininess: 100,
-          specular: 1118481
-        });
-        mesh = new THREE2__namespace.Mesh(geometry, material);
-        break;
-      case "torus":
-        geometry = new THREE2__namespace.TorusGeometry(0.4, 0.2, 16, 100);
-        material = new THREE2__namespace.MeshPhongMaterial({
-          color: 16753920,
-          shininess: 100,
-          specular: 1118481
-        });
-        mesh = new THREE2__namespace.Mesh(geometry, material);
-        break;
-      default:
-        geometry = new THREE2__namespace.SphereGeometry(0.5, 32, 32);
-        material = new THREE2__namespace.MeshPhongMaterial({
-          color: 16738740,
-          shininess: 100,
-          specular: 1118481
-        });
-        mesh = new THREE2__namespace.Mesh(geometry, material);
+        updateModelPlacement(initialModelVisible);
+      }
+    },
+    [initialModelVisible, updateModelPlacement]
+  );
+  const stopCameraStream = React10.useCallback(() => {
+    const source = arToolkitSourceRef.current;
+    if (!source?.domElement) return;
+    const stream = source.domElement.srcObject;
+    if (stream) {
+      stream.getTracks().forEach((track) => track.stop());
     }
-    mesh.rotation.x = Math.PI / 4;
-    mesh.rotation.y = Math.PI / 4;
-    return mesh;
   }, []);
-  const placeModel = React10.useCallback(() => {
-    if (!markerRootRef.current || !modelRootRef.current || !sceneRef.current) {
-      console.error("Cannot place model: missing required references");
+  const cleanupAR = React10.useCallback(() => {
+    stopCameraStream();
+    if (markerRootRef.current && sceneRef.current) {
+      sceneRef.current.remove(markerRootRef.current);
+      markerRootRef.current.clear();
+    }
+    markerRootRef.current = null;
+    markerControlsRef.current = null;
+    const videoContainer = videoContainerRef.current;
+    const videoElement = arToolkitSourceRef.current?.domElement;
+    if (videoContainer && videoElement && videoElement.parentElement === videoContainer) {
+      videoContainer.removeChild(videoElement);
+    }
+    arToolkitSourceRef.current?.dispose?.();
+    arToolkitSourceRef.current = null;
+    arToolkitContextRef.current = null;
+    markerDetectedRef.current = false;
+    setMarkerDetected(false);
+    setCameraReady(false);
+    setArReady(false);
+  }, [stopCameraStream]);
+  const setupRenderer = React10.useCallback(() => {
+    if (rendererRef.current) return;
+    if (!canvasRef.current) return;
+    const renderer = new THREE2__namespace.WebGLRenderer({
+      canvas: canvasRef.current,
+      antialias: true,
+      alpha: true
+    });
+    renderer.setClearColor(0, 0);
+    renderer.setPixelRatio(mobileOptimization?.pixelRatio ?? window.devicePixelRatio ?? 1);
+    rendererRef.current = renderer;
+    const scene = new THREE2__namespace.Scene();
+    sceneRef.current = scene;
+    const camera = new THREE2__namespace.Camera();
+    cameraRef.current = camera;
+    scene.add(camera);
+    const modelRoot = new THREE2__namespace.Group();
+    modelRoot.visible = initialModelVisible;
+    modelRootRef.current = modelRoot;
+    scene.add(modelRoot);
+    const ambientLight = new THREE2__namespace.AmbientLight(
+      16777215,
+      stage?.ambientLightIntensity ?? 0.8
+    );
+    scene.add(ambientLight);
+    const directionalLight = new THREE2__namespace.DirectionalLight(
+      16777215,
+      stage?.directionalLightIntensity ?? 0.6
+    );
+    directionalLight.position.set(1, 1, 1);
+    scene.add(directionalLight);
+    attachModelRoot(resolvedARMode);
+  }, [
+    attachModelRoot,
+    initialModelVisible,
+    mobileOptimization?.pixelRatio,
+    resolvedARMode,
+    stage?.ambientLightIntensity,
+    stage?.directionalLightIntensity
+  ]);
+  const resize = React10.useCallback(() => {
+    if (!containerRef.current || !rendererRef.current) return;
+    const width = containerRef.current.clientWidth;
+    const height = containerRef.current.clientHeight;
+    if (width === 0 || height === 0) return;
+    rendererRef.current.setSize(width, height);
+    const source = arToolkitSourceRef.current;
+    if (source?.onResizeElement && source?.copyElementSizeTo) {
+      source.onResizeElement();
+      source.copyElementSizeTo(rendererRef.current.domElement);
+      if (arToolkitContextRef.current?.arController?.canvas) {
+        source.copyElementSizeTo(arToolkitContextRef.current.arController.canvas);
+      }
+    }
+  }, []);
+  const startRenderLoop = React10.useCallback(() => {
+    if (animationFrameRef.current) return;
+    if (!rendererRef.current || !sceneRef.current || !cameraRef.current) return;
+    const renderer = rendererRef.current;
+    const scene = sceneRef.current;
+    const camera = cameraRef.current;
+    const clock = new THREE2__namespace.Clock();
+    const render = () => {
+      animationFrameRef.current = requestAnimationFrame(render);
+      if (arToolkitSourceRef.current?.ready) {
+        arToolkitContextRef.current?.update(arToolkitSourceRef.current.domElement);
+        if (markerRootRef.current) {
+          const isVisible = markerRootRef.current.visible;
+          if (isVisible !== markerDetectedRef.current) {
+            markerDetectedRef.current = isVisible;
+            setMarkerDetected(isVisible);
+          }
+        }
+      }
+      if (mmdHelperRef.current && autoPlayRef.current) {
+        const delta = clock.getDelta();
+        mmdHelperRef.current.update(delta);
+      }
+      renderer.render(scene, camera);
+    };
+    render();
+  }, []);
+  const setupAR = React10.useCallback(async (facingOverride) => {
+    if (!sceneRef.current || !cameraRef.current) return;
+    const THREEx = await chunkFGQGWW73_js.loadARJS({ three: THREE2__namespace });
+    const facingMode = facingOverride ?? cameraFacing;
+    const sourceWidth = typeof cameraConfig?.width === "number" ? cameraConfig.width : cameraConfig?.width?.ideal;
+    const sourceHeight = typeof cameraConfig?.height === "number" ? cameraConfig.height : cameraConfig?.height?.ideal;
+    const arToolkitSource = new THREEx.ArToolkitSource({
+      sourceType: "webcam",
+      sourceWidth: sourceWidth ?? 1280,
+      sourceHeight: sourceHeight ?? 720,
+      facingMode
+    });
+    arToolkitSourceRef.current = arToolkitSource;
+    const arToolkitContext = new THREEx.ArToolkitContext({
+      cameraParametersUrl: cameraParametersUrl ?? chunkFGQGWW73_js.DEFAULT_AR_ASSETS.cameraParametersUrl,
+      detectionMode: "mono",
+      maxDetectionRate: 30
+    });
+    arToolkitContextRef.current = arToolkitContext;
+    const markerRoot = new THREE2__namespace.Group();
+    markerRootRef.current = markerRoot;
+    sceneRef.current.add(markerRoot);
+    markerControlsRef.current = new THREEx.ArMarkerControls(
+      arToolkitContext,
+      markerRoot,
+      resolvedMarkerConfig
+    );
+    arToolkitContext.init(() => {
+      if (!cameraRef.current) return;
+      cameraRef.current.projectionMatrix.copy(arToolkitContext.getProjectionMatrix());
+      setArReady(true);
+    });
+    arToolkitSource.init(() => {
+      const videoElement = arToolkitSource.domElement;
+      if (videoContainerRef.current && videoElement.parentElement !== videoContainerRef.current) {
+        videoContainerRef.current.appendChild(videoElement);
+      }
+      videoElement.setAttribute("playsinline", "true");
+      videoElement.style.position = "absolute";
+      videoElement.style.inset = "0";
+      videoElement.style.width = "100%";
+      videoElement.style.height = "100%";
+      videoElement.style.objectFit = "cover";
+      videoElement.style.zIndex = "0";
+      if (mirrored) {
+        videoElement.style.transform = "scaleX(-1)";
+      }
+      setCameraReady(true);
+      const stream = videoElement.srcObject;
+      if (stream) {
+        onCameraReady?.(stream);
+      }
+      resize();
+    });
+  }, [
+    cameraConfig?.height,
+    cameraConfig?.width,
+    cameraFacing,
+    cameraParametersUrl,
+    mirrored,
+    onCameraReady,
+    resize,
+    resolvedMarkerConfig
+  ]);
+  const loadMMDResources = React10.useCallback(async () => {
+    if (!resolvedResources || !sceneRef.current || !modelRootRef.current) {
       return;
     }
+    setIsLoading(true);
+    setError(null);
+    if (mmdMeshRef.current) {
+      if (mmdHelperRef.current) {
+        mmdHelperRef.current.remove(mmdMeshRef.current);
+      }
+      modelRootRef.current.remove(mmdMeshRef.current);
+      disposeMesh(mmdMeshRef.current);
+      mmdMeshRef.current = null;
+    }
+    if (!mmdHelperRef.current) {
+      mmdHelperRef.current = new threeStdlib.MMDAnimationHelper({ afterglow: 2 });
+    }
+    const loader = new threeStdlib.MMDLoader();
+    const loadModel = () => new Promise((resolve, reject) => {
+      if (resolvedResources.motionPath) {
+        loader.loadWithAnimation(
+          resolvedResources.modelPath,
+          resolvedResources.motionPath,
+          (mmd) => resolve({ mesh: mmd.mesh, animation: mmd.animation }),
+          void 0,
+          (err) => reject(err)
+        );
+      } else {
+        loader.load(
+          resolvedResources.modelPath,
+          (mesh) => resolve({ mesh }),
+          void 0,
+          (err) => reject(err)
+        );
+      }
+    });
     try {
-      if (modelRef.current) {
-        modelRootRef.current.remove(modelRef.current);
-      }
-      const model = createModel(state.selectedModel);
-      modelRef.current = model;
-      modelRootRef.current.position.copy(markerRootRef.current.position);
-      modelRootRef.current.quaternion.copy(markerRootRef.current.quaternion);
-      modelRootRef.current.add(model);
-      modelRootRef.current.visible = true;
-      setState((prev) => ({ ...prev, modelPlaced: true }));
-      console.log("Model placed successfully at marker position");
-    } catch (error) {
-      console.error("Failed to place model:", error);
-      setState((prev) => ({ ...prev, error: "\u653E\u7F6E\u6A21\u578B\u5931\u8D25" }));
+      const { mesh, animation } = await loadModel();
+      configureMaterialsForMMD(mesh, {
+        enableGradientMap: true,
+        shininess: 30,
+        specularColor: 8947848
+      });
+      applyModelTransform(mesh);
+      mesh.castShadow = true;
+      mesh.receiveShadow = stage?.modelReceiveShadow ?? true;
+      mmdMeshRef.current = mesh;
+      modelRootRef.current.add(mesh);
+      if (animation) {
+        mmdHelperRef.current.add(mesh, {
+          animation,
+          physics: false
+        });
+      }
+      setIsLoading(false);
+      onResourcesChange?.(resolvedResources);
+      onLoad?.();
+    } catch (err) {
+      const message = err instanceof Error ? err.message : "Failed to load MMD resources";
+      setError(message);
+      setIsLoading(false);
+      onError?.(err instanceof Error ? err : new Error(message));
+    }
+  }, [applyModelTransform, onError, onLoad, onResourcesChange, resolvedResources, stage?.modelReceiveShadow]);
+  const updateAudio = React10.useCallback(() => {
+    if (!resolvedResources?.audioPath) {
+      if (audioRef.current) {
+        audioRef.current.pause();
+        audioRef.current.src = "";
+        audioRef.current = null;
+      }
+      return;
     }
-  }, [state.selectedModel, createModel]);
-  const handleARSettingChange = React10.useCallback((setting, value) => {
-    setState((prev) => ({ ...prev, [setting]: value }));
-    if (setting === "cameraFacing" || setting === "markerType" || setting === "quality") {
-      setTimeout(() => {
-        alert("\u6B64\u8BBE\u7F6E\u53D8\u66F4\u9700\u8981\u91CD\u65B0\u542F\u52A8 AR \u7CFB\u7EDF\u3002\u8BF7\u5237\u65B0\u9875\u9762\u4EE5\u5E94\u7528\u65B0\u8BBE\u7F6E\u3002");
-      }, 100);
+    if (audioRef.current) {
+      audioRef.current.pause();
+      audioRef.current.src = "";
     }
-  }, []);
-  const takePhoto = React10.useCallback(() => {
-    if (!rendererRef.current || !sceneRef.current || !cameraRef.current) {
-      console.error("Cannot take photo: missing required references");
+    const audio = new Audio(resolvedResources.audioPath);
+    audio.loop = loop;
+    audioRef.current = audio;
+    if (autoPlay || modelPlaced) {
+      audio.play().catch(() => void 0);
+    }
+  }, [autoPlay, loop, modelPlaced, resolvedResources?.audioPath]);
+  const placeModel = React10.useCallback(() => {
+    if (!modelRootRef.current) return;
+    if (resolvedARMode === "overlay" /* Overlay */) {
+      updateModelPlacement(true);
+      onModelPlaced?.();
       return;
     }
-    try {
+    if (!markerRootRef.current) return;
+    modelRootRef.current.position.copy(markerRootRef.current.position);
+    modelRootRef.current.quaternion.copy(markerRootRef.current.quaternion);
+    updateModelPlacement(true);
+    onModelPlaced?.();
+  }, [onModelPlaced, resolvedARMode, updateModelPlacement]);
+  const removeModel = React10.useCallback(() => {
+    updateModelPlacement(false);
+  }, [updateModelPlacement]);
+  React10.useImperativeHandle(ref, () => ({
+    startCamera: async () => {
+      cleanupAR();
+      await setupAR();
+    },
+    stopCamera: () => {
+      cleanupAR();
+    },
+    switchCamera: async () => {
+      const next = cameraFacing === "environment" ? "user" : "environment";
+      setCameraFacing(next);
+      cleanupAR();
+      await setupAR(next);
+    },
+    snapshot: async () => {
+      if (!rendererRef.current) return "";
       const canvas = document.createElement("canvas");
       const context = canvas.getContext("2d");
-      if (!context) {
-        throw new Error("Cannot create canvas context");
-      }
+      if (!context) return "";
+      const width = rendererRef.current.domElement.width;
+      const height = rendererRef.current.domElement.height;
       canvas.width = width;
       canvas.height = height;
-      rendererRef.current.render(sceneRef.current, cameraRef.current);
-      const rendererCanvas = rendererRef.current.domElement;
-      context.drawImage(rendererCanvas, 0, 0, width, height);
-      if (arToolkitSourceRef.current && arToolkitSourceRef.current.domElement) {
-        const videoElement = arToolkitSourceRef.current.domElement;
-        context.globalCompositeOperation = "source-over";
+      const videoElement = arToolkitSourceRef.current?.domElement;
+      if (videoElement) {
         context.drawImage(videoElement, 0, 0, width, height);
       }
-      canvas.toBlob((blob) => {
-        if (blob) {
-          const url = URL.createObjectURL(blob);
-          const a = document.createElement("a");
-          a.href = url;
-          a.download = "ar-photo-" + Date.now() + ".png";
-          document.body.appendChild(a);
-          a.click();
-          document.body.removeChild(a);
-          URL.revokeObjectURL(url);
-          console.log("Photo saved successfully");
-        }
-      }, "image/png");
-    } catch (error) {
-      console.error("Failed to take photo:", error);
-      setState((prev) => ({ ...prev, error: "\u62CD\u7167\u5931\u8D25" }));
-    }
-  }, [width, height]);
-  const initializeAR = React10.useCallback(async () => {
-    try {
-      console.log("Starting AR initialization...");
-      if (!window.__arjs_ready) {
-        console.log("Waiting for AR.js initialization...");
-        await new Promise((resolve, reject) => {
-          const check = setInterval(() => {
-            if (window.__arjs_ready) {
-              clearInterval(check);
-              console.log("AR.js initialization complete!");
-              resolve();
-            }
-          }, 50);
-          setTimeout(() => {
-            clearInterval(check);
-            reject(new Error("AR.js initialization timeout"));
-          }, 15e3);
-        });
+      context.drawImage(rendererRef.current.domElement, 0, 0, width, height);
+      return canvas.toDataURL("image/png");
+    },
+    placeModel,
+    removeModel,
+    switchModel: (resources) => {
+      setOverrideResources(resources);
+    },
+    setARMode: (mode) => {
+      if (!arMode) {
+        setInternalARMode(mode);
       }
-      console.log("Getting THREEx...");
-      const THREEx = window.THREEx;
-      if (!THREEx) {
-        console.error("THREEx not found, available window properties:", Object.keys(window).filter((key) => key.toLowerCase().includes("ar") || key.toLowerCase().includes("three")));
-        throw new Error("THREEx not found after AR.js loaded");
-      }
-      console.log("THREEx loaded successfully:", Object.keys(THREEx));
-      console.log("THREEx loaded, requesting camera permission...");
-      const hasPermission = await requestCameraPermission();
-      if (!hasPermission) {
-        console.log("Camera permission denied");
-        return false;
-      }
-      console.log("Camera permission granted, initializing AR Toolkit Source...");
-      const arToolkitSource = new THREEx.ArToolkitSource({
-        sourceType: "webcam",
-        sourceWidth: width,
-        sourceHeight: height,
-        // 使用用户选择的摄像头朝向
-        ...state.cameraFacing && { facingMode: state.cameraFacing }
-      });
-      arToolkitSourceRef.current = arToolkitSource;
-      const arToolkitContext = new THREEx.ArToolkitContext({
-        cameraParametersUrl: "data/camera_para.dat",
-        // 使用内建相机参数
-        detectionMode: "mono",
-        // 根据质量设置调整检测参数
-        ...state.quality && {
-          maxDetectionRate: state.quality === "high" ? 60 : state.quality === "medium" ? 30 : 15
-        }
-      });
-      arToolkitContextRef.current = arToolkitContext;
-      arToolkitContext.init(() => {
-        cameraRef.current.projectionMatrix.copy(arToolkitContext.getProjectionMatrix());
-        const markerRoot = new THREE2__namespace.Group();
-        sceneRef.current.add(markerRoot);
-        markerRootRef.current = markerRoot;
-        const markerGeometry = new THREE2__namespace.BoxGeometry(1, 1, 0.1);
-        const markerMaterial = new THREE2__namespace.MeshBasicMaterial({
-          color: 65280,
-          transparent: true,
-          opacity: 0.7,
-          wireframe: state.showWireframe
-          // 根据设置显示线框
-        });
-        const markerMesh = new THREE2__namespace.Mesh(markerGeometry, markerMaterial);
-        markerMesh.position.set(0, 0, 0);
-        markerRoot.add(markerMesh);
-        if (!state.showWireframe) {
-          const edges = new THREE2__namespace.EdgesGeometry(markerGeometry);
-          const lineMaterial = new THREE2__namespace.LineBasicMaterial({ color: 16777215 });
-          const wireframe = new THREE2__namespace.LineSegments(edges, lineMaterial);
-          markerRoot.add(wireframe);
-        }
-        const markerControls = new THREEx.ArMarkerControls(arToolkitContext, markerRoot, {
-          type: state.markerType,
-          ...state.markerType === "barcode" ? { barcodeValue: 0 } : { patternUrl: "data/patt.hiro" }
-        });
-        markerControlsRef.current = markerControls;
-        if (state.lightingEnabled) {
-          const ambientLight = new THREE2__namespace.AmbientLight(4210752, 0.6);
-          sceneRef.current.add(ambientLight);
-          const directionalLight = new THREE2__namespace.DirectionalLight(16777215, 0.8);
-          directionalLight.position.set(1, 1, 1);
-          sceneRef.current.add(directionalLight);
-        }
-        const modelRoot = new THREE2__namespace.Group();
-        modelRoot.visible = false;
-        sceneRef.current.add(modelRoot);
-        modelRootRef.current = modelRoot;
-        setState((prev) => ({
-          ...prev,
-          arReady: true,
-          isLoading: false
-        }));
-        onReady?.();
-        console.log("AR.js and marker system initialized successfully");
-      });
-      arToolkitSource.init(() => {
-        arToolkitSource.domElement.style.display = "none";
-        setState((prev) => ({ ...prev, cameraReady: true }));
-        console.log("Camera initialized successfully");
-      });
-      return true;
-    } catch (error) {
-      console.error("Failed to initialize AR.js:", error);
-      const errorMessage = error instanceof Error ? error.message : "AR.js \u521D\u59CB\u5316\u5931\u8D25";
-      setState((prev) => ({
-        ...prev,
-        error: errorMessage,
-        isLoading: false
-      }));
-      onError?.(errorMessage);
-      return false;
-    }
-  }, [width, height, requestCameraPermission, onReady, onError]);
-  const render = React10.useCallback(() => {
-    if (!rendererRef.current || !sceneRef.current || !cameraRef.current) return;
-    requestAnimationFrame(render);
-    if (arToolkitSourceRef.current && arToolkitSourceRef.current.ready) {
-      arToolkitContextRef.current.update(arToolkitSourceRef.current.domElement);
-      if (markerRootRef.current && markerRootRef.current.visible !== state.markerDetected) {
-        setState((prev) => ({ ...prev, markerDetected: markerRootRef.current.visible }));
+      attachModelRoot(mode);
+      onARModeChange?.(mode);
+    },
+    getARMode: () => resolvedARMode
+  }));
+  React10.useEffect(() => {
+    autoPlayRef.current = autoPlay || modelPlaced;
+  }, [autoPlay, modelPlaced]);
+  React10.useEffect(() => {
+    if (showSettings !== void 0) {
+      setSettingsVisible(showSettings);
+    }
+  }, [showSettings]);
+  React10.useEffect(() => {
+    if (cameraConfig?.facingMode) {
+      if (cameraConfig.facingMode !== cameraFacing) {
+        setCameraFacing(cameraConfig.facingMode);
+        cleanupAR();
+        setupAR(cameraConfig.facingMode).catch(() => void 0);
       }
     }
-    if (modelRef.current && state.modelPlaced) {
-      modelRef.current.rotation.y += 0.01;
+  }, [cameraConfig?.facingMode, cameraFacing, cleanupAR, setupAR]);
+  React10.useEffect(() => {
+    if (!modelPresets.find((preset) => preset.id === selectedModelId)) {
+      setSelectedModelId(modelPresets[0]?.id ?? "");
     }
-    rendererRef.current.render(sceneRef.current, cameraRef.current);
-  }, [state.markerDetected]);
+  }, [modelPresets, selectedModelId]);
   React10.useEffect(() => {
-    const initialize = async () => {
-      try {
-        setState((prev) => ({ ...prev, isLoading: true, error: null }));
-        if (!initializeThreeJS()) return;
-        await initializeAR();
-        if (window.DeviceOrientationEvent) {
-          const handleOrientation = (event) => {
-            gyroDataRef.current = {
-              alpha: event.alpha || 0,
-              beta: event.beta || 0,
-              gamma: event.gamma || 0
-            };
-            if (state.modelPlaced && modelRef.current) {
-            }
-          };
-          window.addEventListener("deviceorientation", handleOrientation);
-          const cleanupGyro = () => {
-            window.removeEventListener("deviceorientation", handleOrientation);
-          };
-          window.__gyroCleanup = cleanupGyro;
-        }
-        render();
-      } catch (error) {
-        console.error("Initialization failed:", error);
-        setState((prev) => ({
-          ...prev,
-          error: "\u7EC4\u4EF6\u521D\u59CB\u5316\u5931\u8D25",
-          isLoading: false
-        }));
-        onError?.("\u7EC4\u4EF6\u521D\u59CB\u5316\u5931\u8D25");
-      }
-    };
-    initialize();
+    if (!motionPresets.find((preset) => preset.id === selectedMotionId)) {
+      setSelectedMotionId(motionPresets[0]?.id ?? "");
+    }
+  }, [motionPresets, selectedMotionId]);
+  React10.useEffect(() => {
+    if (audioPresets && !audioPresets.find((preset) => preset.id === selectedAudioId)) {
+      setSelectedAudioId(audioPresets[0]?.id ?? "");
+    }
+  }, [audioPresets, selectedAudioId]);
+  React10.useEffect(() => {
+    if (typeof window === "undefined") return;
+    if (!rendererRef.current) {
+      setupRenderer();
+    }
+    if (!arToolkitSourceRef.current) {
+      setupAR().then(() => {
+        startRenderLoop();
+      }).catch((err) => {
+        const message = err instanceof Error ? err.message : "Failed to initialize AR";
+        setError(message);
+        setIsLoading(false);
+        onCameraError?.(err instanceof Error ? err : new Error(message));
+      });
+    } else {
+      startRenderLoop();
+    }
+    const resizeObserver = new ResizeObserver(resize);
+    if (containerRef.current) {
+      resizeObserver.observe(containerRef.current);
+    }
     return () => {
+      resizeObserver.disconnect();
+      cleanupAR();
+      if (animationFrameRef.current) {
+        cancelAnimationFrame(animationFrameRef.current);
+        animationFrameRef.current = null;
+      }
       if (rendererRef.current) {
         rendererRef.current.dispose();
+        rendererRef.current = null;
       }
-      if (arToolkitSourceRef.current) {
-        if (arToolkitSourceRef.current.domElement?.srcObject) {
-          const stream = arToolkitSourceRef.current.domElement.srcObject;
-          stream.getTracks().forEach((track) => track.stop());
-        }
-        arToolkitSourceRef.current.domElement?.remove();
+      if (sceneRef.current && modelRootRef.current) {
+        sceneRef.current.remove(modelRootRef.current);
       }
-      if (window.__gyroCleanup) {
-        window.__gyroCleanup();
+      if (mmdMeshRef.current) {
+        if (mmdHelperRef.current) {
+          mmdHelperRef.current.remove(mmdMeshRef.current);
+        }
+        disposeMesh(mmdMeshRef.current);
+        mmdMeshRef.current = null;
       }
+      mmdHelperRef.current = null;
+      audioRef.current?.pause();
+      audioRef.current = null;
     };
-  }, [initializeThreeJS, initializeAR, render, onError]);
-  return /* @__PURE__ */ React10__default.default.createElement("div", { ref: containerRef, className: "relative w-full h-full bg-gray-900 overflow-hidden" }, /* @__PURE__ */ React10__default.default.createElement(
-    Script__default.default,
-    {
-      src: "https://raw.githack.com/AR-js-org/AR.js/master/aframe/build/aframe-ar-nft.js",
-      strategy: "afterInteractive",
-      onLoad: () => {
-        console.log("AR.js script loaded, checking THREEx...");
-        const checkTHREEx = () => {
-          if (window.THREEx) {
-            console.log("THREEx found! Properties:", Object.keys(window.THREEx));
-            window.__arjs_ready = true;
-            console.log("AR.js and THREEx ready!");
-          } else {
-            console.log("THREEx not ready yet, checking window object:", Object.keys(window).filter((key) => key.includes("THREEx") || key.includes("AR")));
-            setTimeout(checkTHREEx, 100);
-          }
-        };
-        checkTHREEx();
-      },
-      onError: (error) => {
-        console.error("Failed to load AR.js:", error);
-        setState((prev) => ({
-          ...prev,
-          error: "AR.js \u52A0\u8F7D\u5931\u8D25",
-          isLoading: false
-        }));
-      }
-    }
-  ), /* @__PURE__ */ React10__default.default.createElement(
-    "canvas",
-    {
-      ref: canvasRef,
-      className: "absolute inset-0 w-full h-full",
-      style: { display: state.arReady ? "block" : "none" }
-    }
-  ), state.isLoading && /* @__PURE__ */ React10__default.default.createElement("div", { className: "absolute inset-0 flex items-center justify-center bg-gray-900 text-white" }, /* @__PURE__ */ React10__default.default.createElement("div", { className: "text-center" }, /* @__PURE__ */ React10__default.default.createElement("div", { className: "animate-spin rounded-full h-12 w-12 border-b-2 border-white mx-auto mb-4" }), /* @__PURE__ */ React10__default.default.createElement("p", null, "\u6B63\u5728\u521D\u59CB\u5316 AR \u73AF\u5883..."))), state.error && /* @__PURE__ */ React10__default.default.createElement("div", { className: "absolute inset-0 flex items-center justify-center bg-red-900 text-white" }, /* @__PURE__ */ React10__default.default.createElement("div", { className: "text-center max-w-md" }, /* @__PURE__ */ React10__default.default.createElement("h2", { className: "text-xl font-bold mb-4" }, "\u521D\u59CB\u5316\u5931\u8D25"), /* @__PURE__ */ React10__default.default.createElement("p", { className: "text-red-200 mb-4" }, state.error), /* @__PURE__ */ React10__default.default.createElement(
-    "button",
-    {
-      onClick: () => window.location.reload(),
-      className: "px-4 py-2 bg-red-600 hover:bg-red-700 rounded-lg transition-colors"
-    },
-    "\u91CD\u65B0\u52A0\u8F7D"
-  ))), state.arReady && !state.error && /* @__PURE__ */ React10__default.default.createElement(React10__default.default.Fragment, null, !state.modelPlaced && /* @__PURE__ */ React10__default.default.createElement("div", { className: "absolute top-4 left-4 right-4 bg-black/70 text-white p-4 rounded-lg" }, /* @__PURE__ */ React10__default.default.createElement("h3", { className: "font-bold mb-2" }, "AR \u653E\u7F6E\u8BF4\u660E"), /* @__PURE__ */ React10__default.default.createElement("p", { className: "text-sm text-gray-300" }, "1. \u5141\u8BB8\u6444\u50CF\u5934\u8BBF\u95EE\u6743\u9650", /* @__PURE__ */ React10__default.default.createElement("br", null), "2. \u51C6\u5907\u4E00\u4E2A\u6761\u7801\u6807\u8BB0 (\u503C: 0) \u6216 Hiro \u6807\u8BB0\u56FE\u6848", /* @__PURE__ */ React10__default.default.createElement("br", null), "3. \u5C06\u6444\u50CF\u5934\u5BF9\u51C6\u6807\u8BB0\uFF0C\u7EFF\u8272\u7ACB\u65B9\u4F53\u5C06\u51FA\u73B0\u5728\u6807\u8BB0\u4F4D\u7F6E", /* @__PURE__ */ React10__default.default.createElement("br", null), state.markerDetected ? /* @__PURE__ */ React10__default.default.createElement("span", { className: "text-green-400 font-bold" }, "\u2713 \u6807\u8BB0\u5DF2\u68C0\u6D4B\u5230\uFF01") : /* @__PURE__ */ React10__default.default.createElement("span", { className: "text-yellow-400" }, "\u7B49\u5F85\u6807\u8BB0\u68C0\u6D4B..."), /* @__PURE__ */ React10__default.default.createElement("br", null), '4. \u70B9\u51FB"\u653E\u7F6E\u6A21\u578B"\u6309\u94AE\u56FA\u5B9A\u6A21\u578B\u4F4D\u7F6E')), state.showSettings && /* @__PURE__ */ React10__default.default.createElement("div", { className: "absolute top-4 right-4 bg-black/90 text-white p-4 rounded-lg min-w-80 max-w-sm max-h-96 overflow-y-auto" }, /* @__PURE__ */ React10__default.default.createElement("h3", { className: "font-bold mb-4 text-lg" }, "\u2699\uFE0F \u8BBE\u7F6E\u9762\u677F"), /* @__PURE__ */ React10__default.default.createElement("div", { className: "space-y-4" }, /* @__PURE__ */ React10__default.default.createElement("div", { className: "border-b border-gray-600 pb-3" }, /* @__PURE__ */ React10__default.default.createElement("h4", { className: "font-semibold mb-2 text-blue-300" }, "\u{1F4F7} \u6444\u50CF\u5934\u8BBE\u7F6E"), /* @__PURE__ */ React10__default.default.createElement("div", null, /* @__PURE__ */ React10__default.default.createElement("label", { className: "block text-sm font-medium mb-1" }, "\u6444\u50CF\u5934\u671D\u5411"), /* @__PURE__ */ React10__default.default.createElement(
-    "select",
-    {
-      value: state.cameraFacing,
-      onChange: (e) => handleARSettingChange("cameraFacing", e.target.value),
-      className: "w-full px-3 py-2 bg-gray-700 rounded border border-gray-600 text-sm"
-    },
-    /* @__PURE__ */ React10__default.default.createElement("option", { value: "environment" }, "\u540E\u7F6E\u6444\u50CF\u5934"),
-    /* @__PURE__ */ React10__default.default.createElement("option", { value: "user" }, "\u524D\u7F6E\u6444\u50CF\u5934")
-  ))), /* @__PURE__ */ React10__default.default.createElement("div", { className: "border-b border-gray-600 pb-3" }, /* @__PURE__ */ React10__default.default.createElement("h4", { className: "font-semibold mb-2 text-green-300" }, "\u{1F3AF} AR \u68C0\u6D4B\u8BBE\u7F6E"), /* @__PURE__ */ React10__default.default.createElement("div", { className: "space-y-2" }, /* @__PURE__ */ React10__default.default.createElement("div", null, /* @__PURE__ */ React10__default.default.createElement("label", { className: "block text-sm font-medium mb-1" }, "\u6807\u8BB0\u7C7B\u578B"), /* @__PURE__ */ React10__default.default.createElement(
-    "select",
-    {
-      value: state.markerType,
-      onChange: (e) => handleARSettingChange("markerType", e.target.value),
-      className: "w-full px-3 py-2 bg-gray-700 rounded border border-gray-600 text-sm"
-    },
-    /* @__PURE__ */ React10__default.default.createElement("option", { value: "barcode" }, "\u6761\u7801 (Barcode)"),
-    /* @__PURE__ */ React10__default.default.createElement("option", { value: "pattern" }, "\u56FE\u6848 (Hiro)")
-  )), /* @__PURE__ */ React10__default.default.createElement("div", null, /* @__PURE__ */ React10__default.default.createElement("label", { className: "block text-sm font-medium mb-1" }, "\u68C0\u6D4B\u8D28\u91CF"), /* @__PURE__ */ React10__default.default.createElement(
-    "select",
-    {
-      value: state.quality,
-      onChange: (e) => handleARSettingChange("quality", e.target.value),
-      className: "w-full px-3 py-2 bg-gray-700 rounded border border-gray-600 text-sm"
-    },
-    /* @__PURE__ */ React10__default.default.createElement("option", { value: "low" }, "\u4F4E\u8D28\u91CF (15fps)"),
-    /* @__PURE__ */ React10__default.default.createElement("option", { value: "medium" }, "\u4E2D\u7B49\u8D28\u91CF (30fps)"),
-    /* @__PURE__ */ React10__default.default.createElement("option", { value: "high" }, "\u9AD8\u8D28\u91CF (60fps)")
-  )))), /* @__PURE__ */ React10__default.default.createElement("div", { className: "border-b border-gray-600 pb-3" }, /* @__PURE__ */ React10__default.default.createElement("h4", { className: "font-semibold mb-2 text-purple-300" }, "\u{1F441}\uFE0F \u89C6\u89C9\u8BBE\u7F6E"), /* @__PURE__ */ React10__default.default.createElement("div", { className: "space-y-2" }, /* @__PURE__ */ React10__default.default.createElement("label", { className: "flex items-center" }, /* @__PURE__ */ React10__default.default.createElement(
-    "input",
-    {
-      type: "checkbox",
-      checked: state.showWireframe,
-      onChange: (e) => setState((prev) => ({ ...prev, showWireframe: e.target.checked })),
-      className: "mr-2"
-    }
-  ), /* @__PURE__ */ React10__default.default.createElement("span", { className: "text-sm" }, "\u663E\u793A\u7EBF\u6846")), /* @__PURE__ */ React10__default.default.createElement("label", { className: "flex items-center" }, /* @__PURE__ */ React10__default.default.createElement(
-    "input",
-    {
-      type: "checkbox",
-      checked: state.lightingEnabled,
-      onChange: (e) => setState((prev) => ({ ...prev, lightingEnabled: e.target.checked })),
-      className: "mr-2"
-    }
-  ), /* @__PURE__ */ React10__default.default.createElement("span", { className: "text-sm" }, "\u542F\u7528\u5149\u7167")))), /* @__PURE__ */ React10__default.default.createElement("div", { className: "border-b border-gray-600 pb-3" }, /* @__PURE__ */ React10__default.default.createElement("h4", { className: "font-semibold mb-2 text-orange-300" }, "\u{1F3AD} \u6A21\u578B\u4E0E\u52A8\u753B"), /* @__PURE__ */ React10__default.default.createElement("div", { className: "space-y-2" }, /* @__PURE__ */ React10__default.default.createElement("div", null, /* @__PURE__ */ React10__default.default.createElement("label", { className: "block text-sm font-medium mb-1" }, "\u6A21\u578B\u9009\u62E9"), /* @__PURE__ */ React10__default.default.createElement(
-    "select",
-    {
-      value: state.selectedModel,
-      onChange: (e) => setState((prev) => ({ ...prev, selectedModel: e.target.value })),
-      className: "w-full px-3 py-2 bg-gray-700 rounded border border-gray-600 text-sm"
-    },
-    /* @__PURE__ */ React10__default.default.createElement("option", { value: "sphere" }, "\u{1F310} \u7403\u4F53"),
-    /* @__PURE__ */ React10__default.default.createElement("option", { value: "cube" }, "\u2B1C \u7ACB\u65B9\u4F53"),
-    /* @__PURE__ */ React10__default.default.createElement("option", { value: "torus" }, "\u2B55 \u5706\u73AF")
-  )), /* @__PURE__ */ React10__default.default.createElement("div", null, /* @__PURE__ */ React10__default.default.createElement("label", { className: "block text-sm font-medium mb-1" }, "\u52A8\u4F5C\u9009\u62E9"), /* @__PURE__ */ React10__default.default.createElement(
-    "select",
-    {
-      value: state.selectedMotion,
-      onChange: (e) => setState((prev) => ({ ...prev, selectedMotion: e.target.value })),
-      className: "w-full px-3 py-2 bg-gray-700 rounded border border-gray-600 text-sm"
-    },
-    /* @__PURE__ */ React10__default.default.createElement("option", { value: "idle" }, "\u{1F9D8} \u5F85\u673A"),
-    /* @__PURE__ */ React10__default.default.createElement("option", { value: "dance" }, "\u{1F483} \u821E\u8E48"),
-    /* @__PURE__ */ React10__default.default.createElement("option", { value: "wave" }, "\u{1F44B} \u6325\u624B")
-  )), /* @__PURE__ */ React10__default.default.createElement("div", null, /* @__PURE__ */ React10__default.default.createElement("label", { className: "block text-sm font-medium mb-1" }, "\u97F3\u4E50\u9009\u62E9"), /* @__PURE__ */ React10__default.default.createElement(
-    "select",
+  }, [cleanupAR, onCameraError, resize, setupAR, setupRenderer, startRenderLoop]);
+  React10.useEffect(() => {
+    attachModelRoot(resolvedARMode);
+  }, [attachModelRoot, resolvedARMode]);
+  React10.useEffect(() => {
+    if (resolvedResources) {
+      loadMMDResources();
+      updateAudio();
+    } else if (modelPresets.length === 0) {
+      const message = "No model presets configured.";
+      setError(message);
+      setIsLoading(false);
+      onError?.(new Error(message));
+    }
+  }, [loadMMDResources, modelPresets.length, onError, resolvedResources, updateAudio]);
+  const mirroredStyle = mirrored ? { transform: "scaleX(-1)" } : void 0;
+  return /* @__PURE__ */ React10__default.default.createElement(
+    "div",
     {
-      value: state.selectedAudio,
-      onChange: (e) => setState((prev) => ({ ...prev, selectedAudio: e.target.value })),
-      className: "w-full px-3 py-2 bg-gray-700 rounded border border-gray-600 text-sm"
+      ref: containerRef,
+      className: clsx.clsx("relative w-full h-full overflow-hidden bg-black", className),
+      style
     },
-    /* @__PURE__ */ React10__default.default.createElement("option", { value: "none" }, "\u{1F507} \u65E0\u97F3\u4E50"),
-    /* @__PURE__ */ React10__default.default.createElement("option", { value: "bgm1" }, "\u{1F3B5} \u80CC\u666F\u97F3\u4E50 1"),
-    /* @__PURE__ */ React10__default.default.createElement("option", { value: "bgm2" }, "\u{1F3B6} \u80CC\u666F\u97F3\u4E50 2")
-  )))), /* @__PURE__ */ React10__default.default.createElement("div", null, /* @__PURE__ */ React10__default.default.createElement("h4", { className: "font-semibold mb-2 text-red-300" }, "\u{1F3AE} \u63A7\u5236\u64CD\u4F5C"), /* @__PURE__ */ React10__default.default.createElement("div", { className: "space-y-2" }, /* @__PURE__ */ React10__default.default.createElement(
-    "button",
-    {
-      onClick: () => {
-        if (modelRootRef.current) {
-          modelRootRef.current.visible = false;
-        }
-        if (markerRootRef.current) {
-          markerRootRef.current.visible = true;
-        }
-        setState((prev) => ({ ...prev, modelPlaced: false, markerDetected: false }));
+    /* @__PURE__ */ React10__default.default.createElement("div", { ref: videoContainerRef, className: "absolute inset-0", style: mirroredStyle }),
+    /* @__PURE__ */ React10__default.default.createElement("canvas", { ref: canvasRef, className: "absolute inset-0 w-full h-full", style: mirroredStyle }),
+    isLoading && /* @__PURE__ */ React10__default.default.createElement("div", { className: "absolute inset-0 flex items-center justify-center bg-black/70 text-white z-20" }, /* @__PURE__ */ React10__default.default.createElement("div", { className: "text-center" }, /* @__PURE__ */ React10__default.default.createElement("div", { className: "h-10 w-10 animate-spin rounded-full border-b-2 border-white mx-auto mb-3" }), /* @__PURE__ */ React10__default.default.createElement("div", null, "Initializing AR..."))),
+    error && /* @__PURE__ */ React10__default.default.createElement("div", { className: "absolute inset-0 flex items-center justify-center bg-red-950/80 text-white z-20" }, /* @__PURE__ */ React10__default.default.createElement("div", { className: "text-center max-w-sm px-4" }, /* @__PURE__ */ React10__default.default.createElement("div", { className: "text-lg font-semibold mb-2" }, "AR Error"), /* @__PURE__ */ React10__default.default.createElement("div", { className: "text-sm text-red-200" }, error))),
+    arReady && !error && /* @__PURE__ */ React10__default.default.createElement(React10__default.default.Fragment, null, resolvedARMode !== "overlay" /* Overlay */ && !modelPlaced && /* @__PURE__ */ React10__default.default.createElement("div", { className: "absolute top-4 left-4 right-4 bg-black/70 text-white p-3 rounded-lg text-sm z-10" }, /* @__PURE__ */ React10__default.default.createElement("div", { className: "font-semibold mb-1" }, "Marker Placement"), /* @__PURE__ */ React10__default.default.createElement("div", { className: "text-gray-200" }, 'Align the marker in view, then tap "', placementText, '" to place the model.'), /* @__PURE__ */ React10__default.default.createElement("div", { className: "mt-2" }, markerDetected ? /* @__PURE__ */ React10__default.default.createElement("span", { className: "text-green-400" }, "Marker detected") : /* @__PURE__ */ React10__default.default.createElement("span", { className: "text-yellow-400" }, "Waiting for marker..."))), /* @__PURE__ */ React10__default.default.createElement("div", { className: "absolute top-4 right-4 flex items-center space-x-2 z-10" }, /* @__PURE__ */ React10__default.default.createElement(
+      "span",
+      {
+        className: clsx.clsx("h-2.5 w-2.5 rounded-full", cameraReady ? "bg-green-400" : "bg-red-400"),
+        title: "Camera"
+      }
+    ), /* @__PURE__ */ React10__default.default.createElement(
+      "span",
+      {
+        className: clsx.clsx("h-2.5 w-2.5 rounded-full", arReady ? "bg-green-400" : "bg-red-400"),
+        title: "AR"
+      }
+    ), /* @__PURE__ */ React10__default.default.createElement(
+      "span",
+      {
+        className: clsx.clsx("h-2.5 w-2.5 rounded-full", markerDetected ? "bg-blue-400" : "bg-gray-400"),
+        title: "Marker"
+      }
+    )), /* @__PURE__ */ React10__default.default.createElement("div", { className: "absolute bottom-4 left-4 right-4 flex justify-center gap-3 z-10" }, /* @__PURE__ */ React10__default.default.createElement(
+      "button",
+      {
+        onClick: () => setSettingsVisible((prev) => !prev),
+        className: "px-4 py-2 rounded-lg bg-gray-700 text-white hover:bg-gray-600"
       },
-      className: "w-full px-3 py-2 bg-blue-600 hover:bg-blue-700 rounded transition-colors text-sm"
-    },
-    "\u{1F504} \u91CD\u65B0\u8BBE\u7F6E\u6807\u8BB0\u70B9"
-  ), /* @__PURE__ */ React10__default.default.createElement(
-    "button",
-    {
-      onClick: () => {
-        if (modelRootRef.current) {
-          modelRootRef.current.clear();
-          modelRootRef.current.visible = false;
-        }
-        if (markerRootRef.current) {
-          markerRootRef.current.visible = true;
-        }
-        setState((prev) => ({
-          ...prev,
-          modelPlaced: false,
-          markerDetected: false,
-          selectedModel: "sphere",
-          selectedMotion: "idle",
-          selectedAudio: "none"
-        }));
+      "Settings"
+    ), resolvedARMode !== "overlay" /* Overlay */ && !modelPlaced && /* @__PURE__ */ React10__default.default.createElement(
+      "button",
+      {
+        onClick: placeModel,
+        disabled: !markerDetected,
+        className: clsx.clsx(
+          "px-5 py-2 rounded-lg text-white",
+          markerDetected ? "bg-emerald-600 hover:bg-emerald-500" : "bg-gray-500"
+        )
       },
-      className: "w-full px-3 py-2 bg-red-600 hover:bg-red-700 rounded transition-colors text-sm"
-    },
-    "\u{1F5D1}\uFE0F \u6E05\u9664\u6240\u6709"
-  ))))), /* @__PURE__ */ React10__default.default.createElement("div", { className: "absolute bottom-4 left-4 right-4 flex justify-center space-x-4" }, /* @__PURE__ */ React10__default.default.createElement(
-    "button",
-    {
-      onClick: () => setState((prev) => ({ ...prev, showSettings: !prev.showSettings })),
-      className: "px-4 py-2 bg-gray-700 hover:bg-gray-600 text-white rounded-lg transition-colors"
-    },
-    "\u2699\uFE0F \u8BBE\u7F6E"
-  ), !state.modelPlaced && /* @__PURE__ */ React10__default.default.createElement(
-    "button",
-    {
-      onClick: placeModel,
-      disabled: !state.markerDetected,
-      className: clsx.clsx("px-6 py-2 rounded-lg transition-colors", state.markerDetected ? "bg-green-600 hover:bg-green-700 text-white" : "bg-gray-500 text-gray-300 cursor-not-allowed")
-    },
-    "\u{1F4CD} \u653E\u7F6E\u6A21\u578B"
-  ), state.modelPlaced && /* @__PURE__ */ React10__default.default.createElement(
-    "button",
-    {
-      onClick: takePhoto,
-      className: "px-6 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-lg transition-colors"
-    },
-    "\u{1F4F8} \u62CD\u7167"
-  )), /* @__PURE__ */ React10__default.default.createElement("div", { className: "absolute top-4 right-4 flex space-x-2" }, /* @__PURE__ */ React10__default.default.createElement("div", { className: clsx.clsx("w-3 h-3 rounded-full", state.cameraReady ? "bg-green-400" : "bg-red-400"), title: "\u6444\u50CF\u5934" }), /* @__PURE__ */ React10__default.default.createElement("div", { className: clsx.clsx("w-3 h-3 rounded-full", state.arReady ? "bg-green-400" : "bg-red-400"), title: "AR" }), /* @__PURE__ */ React10__default.default.createElement("div", { className: clsx.clsx("w-3 h-3 rounded-full", window.DeviceOrientationEvent ? "bg-purple-400" : "bg-gray-400"), title: "\u9640\u87BA\u4EEA" }), /* @__PURE__ */ React10__default.default.createElement("div", { className: clsx.clsx("w-3 h-3 rounded-full", state.markerDetected ? "bg-blue-400" : "bg-gray-400"), title: "\u6807\u8BB0\u68C0\u6D4B" }), /* @__PURE__ */ React10__default.default.createElement("div", { className: clsx.clsx("w-3 h-3 rounded-full", state.modelPlaced && modelRootRef.current?.visible ? "bg-green-400" : "bg-yellow-400"), title: "\u6A21\u578B" }))));
+      placementText
+    ), modelPlaced && /* @__PURE__ */ React10__default.default.createElement(
+      "button",
+      {
+        onClick: removeModel,
+        className: "px-5 py-2 rounded-lg text-white bg-orange-600 hover:bg-orange-500"
+      },
+      "Reset"
+    )), settingsVisible && /* @__PURE__ */ React10__default.default.createElement("div", { className: "absolute top-16 right-4 bg-black/80 text-white p-4 rounded-lg w-64 space-y-3 z-10" }, /* @__PURE__ */ React10__default.default.createElement("div", { className: "text-sm font-semibold" }, "AR Settings"), /* @__PURE__ */ React10__default.default.createElement("label", { className: "block text-xs text-gray-300" }, "Model", /* @__PURE__ */ React10__default.default.createElement(
+      "select",
+      {
+        value: selectedModelId,
+        onChange: (event) => {
+          setOverrideResources(null);
+          setSelectedModelId(event.target.value);
+        },
+        className: "mt-1 w-full bg-gray-700 text-white text-sm rounded px-2 py-1"
+      },
+      modelPresets.map((preset) => /* @__PURE__ */ React10__default.default.createElement("option", { key: preset.id, value: preset.id }, preset.name))
+    )), /* @__PURE__ */ React10__default.default.createElement("label", { className: "block text-xs text-gray-300" }, "Motion", /* @__PURE__ */ React10__default.default.createElement(
+      "select",
+      {
+        value: selectedMotionId,
+        onChange: (event) => {
+          setOverrideResources(null);
+          setSelectedMotionId(event.target.value);
+        },
+        className: "mt-1 w-full bg-gray-700 text-white text-sm rounded px-2 py-1"
+      },
+      motionPresets.map((preset) => /* @__PURE__ */ React10__default.default.createElement("option", { key: preset.id, value: preset.id }, preset.name))
+    )), audioPresets && audioPresets.length > 0 && /* @__PURE__ */ React10__default.default.createElement("label", { className: "block text-xs text-gray-300" }, "Audio", /* @__PURE__ */ React10__default.default.createElement(
+      "select",
+      {
+        value: selectedAudioId,
+        onChange: (event) => {
+          setOverrideResources(null);
+          setSelectedAudioId(event.target.value);
+        },
+        className: "mt-1 w-full bg-gray-700 text-white text-sm rounded px-2 py-1"
+      },
+      audioPresets.map((preset) => /* @__PURE__ */ React10__default.default.createElement("option", { key: preset.id, value: preset.id }, preset.name))
+    )), /* @__PURE__ */ React10__default.default.createElement("label", { className: "block text-xs text-gray-300" }, "AR Mode", /* @__PURE__ */ React10__default.default.createElement(
+      "select",
+      {
+        value: resolvedARMode,
+        onChange: (event) => {
+          const next = event.target.value;
+          if (!arMode) {
+            setInternalARMode(next);
+          }
+          attachModelRoot(next);
+          onARModeChange?.(next);
+        },
+        className: "mt-1 w-full bg-gray-700 text-white text-sm rounded px-2 py-1"
+      },
+      /* @__PURE__ */ React10__default.default.createElement("option", { value: "overlay" /* Overlay */ }, "Overlay"),
+      /* @__PURE__ */ React10__default.default.createElement("option", { value: "world-fixed" /* WorldFixed */ }, "World Fixed")
+    )), /* @__PURE__ */ React10__default.default.createElement("label", { className: "block text-xs text-gray-300" }, "Camera", /* @__PURE__ */ React10__default.default.createElement(
+      "select",
+      {
+        value: cameraFacing,
+        onChange: (event) => {
+          const next = event.target.value;
+          setCameraFacing(next);
+          cleanupAR();
+          setupAR(next).catch(() => void 0);
+        },
+        className: "mt-1 w-full bg-gray-700 text-white text-sm rounded px-2 py-1"
+      },
+      /* @__PURE__ */ React10__default.default.createElement("option", { value: "environment" }, "Back"),
+      /* @__PURE__ */ React10__default.default.createElement("option", { value: "user" }, "Front")
+    ))))
+  );
 });
-MMDARPlayer.displayName = "MMDARPlayer";
+MMDARApp.displayName = "MMDARApp";
 
-// src/mmd/ar/types.ts
-var ARMode = /* @__PURE__ */ ((ARMode2) => {
-  ARMode2["Overlay"] = "overlay";
-  ARMode2["WorldFixed"] = "world-fixed";
-  return ARMode2;
-})(ARMode || {});
+// src/mmd/ar/MMDARPlayer.tsx
+var MMDARPlayer = MMDARApp;
+MMDARPlayer.displayName = "MMDARPlayer";
 
 // src/mmd/fx/HLSLToGLSLConverter.ts
 var HLSLToGLSLConverter = class {
@@ -9015,6 +9356,7 @@ exports.HistoryPanel = HistoryPanel;
 exports.LoadingOverlay = LoadingOverlay;
 exports.LoadingScreen = LoadingScreen;
 exports.LoopConfirmDialog = LoopConfirmDialog;
+exports.MMDARApp = MMDARApp;
 exports.MMDARPlayer = MMDARPlayer;
 exports.MMDLightingDebugPanel = MMDLightingDebugPanel;
 exports.MMDMusicPlayer = MMDMusicPlayer;
@@ -9023,8 +9365,10 @@ exports.MMDPlayerEnhanced = MMDPlayerEnhanced;
 exports.MMDPlayerEnhancedDebugInfo = MMDPlayerEnhancedDebugInfo;
 exports.MMDPlaylist = MMDPlaylist;
 exports.MMDPlaylistDebugInfo = MMDPlaylistDebugInfo;
+exports.MMDUploadPanel = MMDUploadPanel;
 exports.MMDVisualNovel = MMDVisualNovel;
 exports.MMDVisualNovelWithSelector = MMDVisualNovelWithSelector;
+exports.MMD_UPLOAD_CONFIGS = MMD_UPLOAD_CONFIGS;
 exports.ModelSelectorSettings = ModelSelectorSettings;
 exports.MultiFXAdapter = MultiFXAdapter;
 exports.MusicControls = MusicControls;