sa2kit 1.6.59 → 1.6.62

package/dist/mmd/index.mjs

@@ -2,14 +2,15 @@ import { PMXParser } from '../chunk-RSJSZ7QH.mjs';
 export { PMXParser } from '../chunk-RSJSZ7QH.mjs';
 import { useMusic } from '../chunk-EB4NR623.mjs';
 import '../chunk-4HC6M7FK.mjs';
+import { DEFAULT_AR_ASSETS, loadARJS } from '../chunk-CFM56MGO.mjs';
 import '../chunk-WMJKH4XE.mjs';
-import React10, { forwardRef, useRef, useState, useEffect, useImperativeHandle, useCallback, useMemo } from 'react';
+import React10, { forwardRef, useRef, useState, useEffect, useImperativeHandle, useCallback, useMemo, useId } from 'react';
 import { clsx } from 'clsx';
 import * as THREE2 from 'three';
-import { OutlineEffect, OrbitControls, MMDLoader, MMDAnimationHelper } from 'three-stdlib';
-import { SkipBack, Pause, Play, SkipForward, Camera, Repeat, Repeat1, Shuffle, ListMusic, Music, X, Search, Loader2, Grid3x3, Settings, Minimize, Maximize, Video, Check, User, Image } from 'lucide-react';
+import { MMDAnimationHelper, MMDLoader, OutlineEffect, OrbitControls } from 'three-stdlib';
+import { SkipBack, Pause, Play, SkipForward, Camera, Repeat, Repeat1, Shuffle, ListMusic, Music, X, Search, Loader2, Upload, CheckCircle2, Grid3x3, Settings, Minimize, Maximize, Video, Check, User, Image } from 'lucide-react';
+import JSZip from 'jszip';
 import { createPortal } from 'react-dom';
-import Script from 'next/script';
 
 // src/mmd/pmx/editor/PMXEditor.ts
 var PMXEditor = class {
@@ -3413,6 +3414,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 = useId();
+  const [uploading, setUploading] = useState(false);
+  const [progress, setProgress] = useState(null);
+  const [error, setError] = useState(null);
+  const [uploadedFile, setUploadedFile] = useState(null);
+  const [uploadedUrl, setUploadedUrl] = useState(null);
+  const [dragOver, setDragOver] = 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 = useMemo(() => mergedAcceptedTypes.join(","), [mergedAcceptedTypes]);
+  const validateZipContents = async (file) => {
+    if (!validateZip || !(resourceType === "model" || resourceType === "stage")) return;
+    const buffer = await file.arrayBuffer();
+    const zip = await JSZip.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.createElement("div", { className: clsx("space-y-4", className), style }, /* @__PURE__ */ React10.createElement("div", null, /* @__PURE__ */ React10.createElement("div", { className: "text-sm font-semibold text-gray-900" }, titleText), /* @__PURE__ */ React10.createElement("div", { className: "text-xs text-gray-500" }, descriptionText), hintText && /* @__PURE__ */ React10.createElement("div", { className: "text-xs text-amber-600 mt-1" }, hintText)), /* @__PURE__ */ React10.createElement(
+    "div",
+    {
+      className: 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.createElement(
+      "input",
+      {
+        id: inputId,
+        type: "file",
+        accept: acceptAttr,
+        className: "hidden",
+        onChange: handleFileInput,
+        disabled: disabled || uploading
+      }
+    ),
+    /* @__PURE__ */ React10.createElement("label", { htmlFor: inputId, className: "flex flex-col items-center gap-2" }, /* @__PURE__ */ React10.createElement(Upload, { className: "h-6 w-6 text-gray-500" }), /* @__PURE__ */ React10.createElement("span", { className: "text-sm text-gray-600" }, "Click to select or drag file here"), /* @__PURE__ */ React10.createElement("span", { className: "text-xs text-gray-400" }, mergedAcceptedTypes.join(", ")))
+  ), uploading && /* @__PURE__ */ React10.createElement("div", { className: "flex items-center gap-2 text-sm text-blue-600" }, /* @__PURE__ */ React10.createElement(Loader2, { className: "h-4 w-4 animate-spin" }), "Uploading", progress ? ` ${progress.progress}%` : "..."), progress && /* @__PURE__ */ React10.createElement("div", { className: "text-xs text-gray-500" }, formatMegabytes(progress.uploadedBytes), " / ", formatMegabytes(progress.totalBytes)), error && /* @__PURE__ */ React10.createElement("div", { className: "text-sm text-red-600" }, error), uploadedFile && /* @__PURE__ */ React10.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.createElement("div", { className: "flex items-center gap-2" }, /* @__PURE__ */ React10.createElement(CheckCircle2, { className: "h-4 w-4" }), /* @__PURE__ */ React10.createElement("span", { className: "truncate" }, uploadedFile.originalName)), uploadedUrl && /* @__PURE__ */ React10.createElement(
+    "a",
+    {
+      href: uploadedUrl,
+      target: "_blank",
+      rel: "noreferrer",
+      className: "text-green-700 underline"
+    },
+    "Open"
+  )));
+};
 function diagnoseMaterialsMMD(scene, renderer) {
   const report = {
     totalMaterials: 0,
@@ -5064,6 +5247,8 @@ var MMDVisualNovel = forwardRef(
     onScriptComplete,
     onError,
     showDebugInfo = false,
+    debug = false,
+    onTransitionStateChange,
     showSkipButton = true,
     showAutoButton = true,
     showHistoryButton = true,
@@ -5103,6 +5288,26 @@ var MMDVisualNovel = forwardRef(
     const cheerParticlesRef = useRef(null);
     const currentNode = nodes[currentNodeIndex];
     const currentDialogue = currentNode?.dialogues[currentDialogueIndex] || null;
+    const log = useCallback((...args) => {
+      if (!debug) return;
+      console.log("[MMDVisualNovel]", ...args);
+    }, [debug]);
+    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 = useCallback((dialogue, nodeIndex, dialogueIndex) => {
       setHistory((prev) => [
         ...prev,
@@ -5134,11 +5339,11 @@ var MMDVisualNovel = 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);
@@ -5160,7 +5365,7 @@ var MMDVisualNovel = 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);
       },
@@ -5174,7 +5379,7 @@ var MMDVisualNovel = 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;
         }
@@ -5182,7 +5387,7 @@ var MMDVisualNovel = 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?.();
@@ -5274,7 +5479,7 @@ var MMDVisualNovel = 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?.();
@@ -5301,16 +5506,16 @@ var MMDVisualNovel = 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 = useCallback(() => {
-      console.log("[MMDVisualNovel] \u89E6\u53D1\u5E94\u63F4\u6548\u679C");
+      log("Trigger cheer effect");
       cheerParticlesRef.current?.trigger();
     }, []);
     const handleRestartLoop = useCallback(() => {
       setShowLoopConfirm(false);
       goToNode(0, true);
-      console.log("[MMDVisualNovel] \u91CD\u65B0\u5F00\u59CB\u5FAA\u73AF");
+      log("Restart loop");
     }, [goToNode]);
     useImperativeHandle(
       ref,
@@ -5379,17 +5584,17 @@ var MMDVisualNovel = 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) => {
@@ -5398,7 +5603,7 @@ var MMDVisualNovel = 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);
                 }
@@ -5406,7 +5611,7 @@ var MMDVisualNovel = forwardRef(
               lastAnimationTimeRef.current = time;
             },
             onEnded: () => {
-              console.log("[MMDVisualNovel] VMD ended, marking as finished");
+              log("VMD ended, marking as finished");
               isVmdFinishedRef.current = true;
               setIsVmdFinished(true);
             },
@@ -5452,17 +5657,7 @@ var MMDVisualNovel = forwardRef(
       /* @__PURE__ */ React10.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...",
@@ -5474,44 +5669,31 @@ var MMDVisualNovel = 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.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.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.createElement(
         SkipConfirmDialog,
         {
@@ -5534,7 +5716,7 @@ var MMDVisualNovel = 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) {
@@ -5676,6 +5858,7 @@ var MMDVisualNovelWithSelector = forwardRef((props, ref) => {
     script,
     modelSelector,
     onModelSelectionChange,
+    resourceMappingMode = "resource-map",
     ...restProps
   } = props;
   const {
@@ -5702,20 +5885,39 @@ var MMDVisualNovelWithSelector = forwardRef((props, ref) => {
     return model?.path || stageModels[0]?.path || "";
   }, [stageModels, selectedStageId]);
   const modifiedScript = 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 = useCallback((id) => {
     setSelectedCharacterId(id);
     onModelSelectionChange?.(id, selectedStageId);
@@ -6298,594 +6500,733 @@ var MMDMusicPlayer = forwardRef(
   }
 );
 MMDMusicPlayer.displayName = "MMDMusicPlayer";
-if (typeof window !== "undefined") {
-  window.THREE = THREE2;
+
+// 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.Mesh || child instanceof THREE2.SkinnedMesh) {
+      if (child.geometry) {
+        child.geometry.dispose();
+      }
+      const materials = Array.isArray(child.material) ? child.material : [child.material];
+      materials.forEach((material) => {
+        if (material instanceof THREE2.Material) {
+          Object.values(material).forEach((value) => {
+            if (value instanceof THREE2.Texture) {
+              value.dispose();
+            }
+          });
+          material.dispose();
+        }
+      });
+    }
+  });
 }
-var MMDARPlayer = forwardRef(({
-  width = 800,
-  height = 600,
-  onReady,
-  onError
-}, ref) => {
+var MMDARApp = 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 = useRef(null);
+  const videoContainerRef = useRef(null);
   const canvasRef = useRef(null);
-  const sceneRef = useRef();
-  const cameraRef = useRef();
-  const rendererRef = useRef();
-  const arToolkitSourceRef = useRef();
-  const arToolkitContextRef = useRef();
-  const markerRootRef = useRef();
-  const markerControlsRef = useRef();
-  const modelRootRef = useRef();
-  const modelRef = useRef();
-  const [state, setState] = 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 = useRef({ alpha: 0, beta: 0, gamma: 0 });
-  const initializeThreeJS = useCallback(() => {
-    try {
-      const scene = new THREE2.Scene();
-      sceneRef.current = scene;
-      const camera = new THREE2.Camera();
-      cameraRef.current = camera;
-      scene.add(camera);
-      const renderer = new THREE2.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 = useRef(null);
+  const cameraRef = useRef(null);
+  const rendererRef = useRef(null);
+  const arToolkitSourceRef = useRef(null);
+  const arToolkitContextRef = useRef(null);
+  const markerRootRef = useRef(null);
+  const markerControlsRef = useRef(null);
+  const modelRootRef = useRef(null);
+  const mmdHelperRef = useRef(null);
+  const mmdMeshRef = useRef(null);
+  const animationFrameRef = useRef(null);
+  const markerDetectedRef = useRef(false);
+  const audioRef = useRef(null);
+  const autoPlayRef = useRef(autoPlay);
+  const [isLoading, setIsLoading] = useState(true);
+  const [cameraReady, setCameraReady] = useState(false);
+  const [arReady, setArReady] = useState(false);
+  const [error, setError] = useState(null);
+  const [markerDetected, setMarkerDetected] = useState(false);
+  const [modelPlaced, setModelPlaced] = useState(initialModelVisible);
+  const [settingsVisible, setSettingsVisible] = useState(showSettings ?? false);
+  const [internalARMode, setInternalARMode] = useState(
+    defaultARMode ?? arMode ?? "overlay" /* Overlay */
+  );
+  const [cameraFacing, setCameraFacing] = useState(
+    cameraConfig?.facingMode ?? "environment"
+  );
+  const [selectedModelId, setSelectedModelId] = useState(
+    defaultModelId ?? modelPresets[0]?.id ?? ""
+  );
+  const [selectedMotionId, setSelectedMotionId] = useState(
+    defaultMotionId ?? motionPresets[0]?.id ?? ""
+  );
+  const [selectedAudioId, setSelectedAudioId] = useState(
+    defaultAudioId ?? audioPresets?.[0]?.id ?? ""
+  );
+  const [overrideResources, setOverrideResources] = useState(null);
+  const resolvedARMode = arMode ?? internalARMode;
+  const resolvedMarkerConfig = useMemo(() => {
+    return {
+      type: markerConfig?.type ?? "pattern",
+      patternUrl: markerConfig?.patternUrl ?? DEFAULT_AR_ASSETS.patternUrl,
+      barcodeValue: markerConfig?.barcodeValue ?? 0,
+      changeMatrixMode: markerConfig?.changeMatrixMode ?? "modelViewMatrix"
+    };
+  }, [markerConfig]);
+  const resolvedResources = useMemo(() => {
+    if (overrideResources) {
+      return overrideResources;
     }
-  }, [width, height]);
-  const requestCameraPermission = 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 = useCallback(() => {
+    if (!modelScale) {
+      return new THREE2.Vector3(DEFAULT_MODEL_SCALE, DEFAULT_MODEL_SCALE, DEFAULT_MODEL_SCALE);
+    }
+    if (typeof modelScale === "number") {
+      return new THREE2.Vector3(modelScale, modelScale, modelScale);
+    }
+    return new THREE2.Vector3(modelScale.x, modelScale.y, modelScale.z);
+  }, [modelScale]);
+  const applyModelTransform = 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.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 = useCallback(
+    (visible) => {
+      if (!modelRootRef.current) return;
+      modelRootRef.current.visible = visible;
+      setModelPlaced(visible);
+    },
+    []
+  );
+  const attachModelRoot = 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 = useCallback((modelType) => {
-    let geometry;
-    let material;
-    let mesh;
-    switch (modelType) {
-      case "sphere":
-        geometry = new THREE2.SphereGeometry(0.5, 32, 32);
-        material = new THREE2.MeshPhongMaterial({
-          color: 16738740,
-          shininess: 100,
-          specular: 1118481
-        });
-        mesh = new THREE2.Mesh(geometry, material);
-        break;
-      case "cube":
-        geometry = new THREE2.BoxGeometry(0.8, 0.8, 0.8);
-        material = new THREE2.MeshPhongMaterial({
-          color: 65407,
-          shininess: 100,
-          specular: 1118481
-        });
-        mesh = new THREE2.Mesh(geometry, material);
-        break;
-      case "torus":
-        geometry = new THREE2.TorusGeometry(0.4, 0.2, 16, 100);
-        material = new THREE2.MeshPhongMaterial({
-          color: 16753920,
-          shininess: 100,
-          specular: 1118481
-        });
-        mesh = new THREE2.Mesh(geometry, material);
-        break;
-      default:
-        geometry = new THREE2.SphereGeometry(0.5, 32, 32);
-        material = new THREE2.MeshPhongMaterial({
-          color: 16738740,
-          shininess: 100,
-          specular: 1118481
-        });
-        mesh = new THREE2.Mesh(geometry, material);
+        updateModelPlacement(initialModelVisible);
+      }
+    },
+    [initialModelVisible, updateModelPlacement]
+  );
+  const stopCameraStream = 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 = useCallback(() => {
-    if (!markerRootRef.current || !modelRootRef.current || !sceneRef.current) {
-      console.error("Cannot place model: missing required references");
+  const cleanupAR = 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 = useCallback(() => {
+    if (rendererRef.current) return;
+    if (!canvasRef.current) return;
+    const renderer = new THREE2.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.Scene();
+    sceneRef.current = scene;
+    const camera = new THREE2.Camera();
+    cameraRef.current = camera;
+    scene.add(camera);
+    const modelRoot = new THREE2.Group();
+    modelRoot.visible = initialModelVisible;
+    modelRootRef.current = modelRoot;
+    scene.add(modelRoot);
+    const ambientLight = new THREE2.AmbientLight(
+      16777215,
+      stage?.ambientLightIntensity ?? 0.8
+    );
+    scene.add(ambientLight);
+    const directionalLight = new THREE2.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 = 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 = 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.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 = useCallback(async (facingOverride) => {
+    if (!sceneRef.current || !cameraRef.current) return;
+    const THREEx = await loadARJS({ three: THREE2 });
+    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 ?? DEFAULT_AR_ASSETS.cameraParametersUrl,
+      detectionMode: "mono",
+      maxDetectionRate: 30
+    });
+    arToolkitContextRef.current = arToolkitContext;
+    const markerRoot = new THREE2.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 = 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 MMDAnimationHelper({ afterglow: 2 });
+    }
+    const loader = new 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 = useCallback(() => {
+    if (!resolvedResources?.audioPath) {
+      if (audioRef.current) {
+        audioRef.current.pause();
+        audioRef.current.src = "";
+        audioRef.current = null;
+      }
+      return;
     }
-  }, [state.selectedModel, createModel]);
-  const handleARSettingChange = 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 = 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 = 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 = useCallback(() => {
+    updateModelPlacement(false);
+  }, [updateModelPlacement]);
+  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 = 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.Group();
-        sceneRef.current.add(markerRoot);
-        markerRootRef.current = markerRoot;
-        const markerGeometry = new THREE2.BoxGeometry(1, 1, 0.1);
-        const markerMaterial = new THREE2.MeshBasicMaterial({
-          color: 65280,
-          transparent: true,
-          opacity: 0.7,
-          wireframe: state.showWireframe
-          // 根据设置显示线框
-        });
-        const markerMesh = new THREE2.Mesh(markerGeometry, markerMaterial);
-        markerMesh.position.set(0, 0, 0);
-        markerRoot.add(markerMesh);
-        if (!state.showWireframe) {
-          const edges = new THREE2.EdgesGeometry(markerGeometry);
-          const lineMaterial = new THREE2.LineBasicMaterial({ color: 16777215 });
-          const wireframe = new THREE2.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.AmbientLight(4210752, 0.6);
-          sceneRef.current.add(ambientLight);
-          const directionalLight = new THREE2.DirectionalLight(16777215, 0.8);
-          directionalLight.position.set(1, 1, 1);
-          sceneRef.current.add(directionalLight);
-        }
-        const modelRoot = new THREE2.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 = 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
+  }));
+  useEffect(() => {
+    autoPlayRef.current = autoPlay || modelPlaced;
+  }, [autoPlay, modelPlaced]);
+  useEffect(() => {
+    if (showSettings !== void 0) {
+      setSettingsVisible(showSettings);
+    }
+  }, [showSettings]);
+  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]);
+  useEffect(() => {
+    if (!modelPresets.find((preset) => preset.id === selectedModelId)) {
+      setSelectedModelId(modelPresets[0]?.id ?? "");
     }
-    rendererRef.current.render(sceneRef.current, cameraRef.current);
-  }, [state.markerDetected]);
+  }, [modelPresets, selectedModelId]);
   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]);
+  useEffect(() => {
+    if (audioPresets && !audioPresets.find((preset) => preset.id === selectedAudioId)) {
+      setSelectedAudioId(audioPresets[0]?.id ?? "");
+    }
+  }, [audioPresets, selectedAudioId]);
+  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.createElement("div", { ref: containerRef, className: "relative w-full h-full bg-gray-900 overflow-hidden" }, /* @__PURE__ */ React10.createElement(
-    Script,
-    {
-      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.createElement(
-    "canvas",
-    {
-      ref: canvasRef,
-      className: "absolute inset-0 w-full h-full",
-      style: { display: state.arReady ? "block" : "none" }
-    }
-  ), state.isLoading && /* @__PURE__ */ React10.createElement("div", { className: "absolute inset-0 flex items-center justify-center bg-gray-900 text-white" }, /* @__PURE__ */ React10.createElement("div", { className: "text-center" }, /* @__PURE__ */ React10.createElement("div", { className: "animate-spin rounded-full h-12 w-12 border-b-2 border-white mx-auto mb-4" }), /* @__PURE__ */ React10.createElement("p", null, "\u6B63\u5728\u521D\u59CB\u5316 AR \u73AF\u5883..."))), state.error && /* @__PURE__ */ React10.createElement("div", { className: "absolute inset-0 flex items-center justify-center bg-red-900 text-white" }, /* @__PURE__ */ React10.createElement("div", { className: "text-center max-w-md" }, /* @__PURE__ */ React10.createElement("h2", { className: "text-xl font-bold mb-4" }, "\u521D\u59CB\u5316\u5931\u8D25"), /* @__PURE__ */ React10.createElement("p", { className: "text-red-200 mb-4" }, state.error), /* @__PURE__ */ React10.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.createElement(React10.Fragment, null, !state.modelPlaced && /* @__PURE__ */ React10.createElement("div", { className: "absolute top-4 left-4 right-4 bg-black/70 text-white p-4 rounded-lg" }, /* @__PURE__ */ React10.createElement("h3", { className: "font-bold mb-2" }, "AR \u653E\u7F6E\u8BF4\u660E"), /* @__PURE__ */ React10.createElement("p", { className: "text-sm text-gray-300" }, "1. \u5141\u8BB8\u6444\u50CF\u5934\u8BBF\u95EE\u6743\u9650", /* @__PURE__ */ React10.createElement("br", null), "2. \u51C6\u5907\u4E00\u4E2A\u6761\u7801\u6807\u8BB0 (\u503C: 0) \u6216 Hiro \u6807\u8BB0\u56FE\u6848", /* @__PURE__ */ React10.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.createElement("br", null), state.markerDetected ? /* @__PURE__ */ React10.createElement("span", { className: "text-green-400 font-bold" }, "\u2713 \u6807\u8BB0\u5DF2\u68C0\u6D4B\u5230\uFF01") : /* @__PURE__ */ React10.createElement("span", { className: "text-yellow-400" }, "\u7B49\u5F85\u6807\u8BB0\u68C0\u6D4B..."), /* @__PURE__ */ React10.createElement("br", null), '4. \u70B9\u51FB"\u653E\u7F6E\u6A21\u578B"\u6309\u94AE\u56FA\u5B9A\u6A21\u578B\u4F4D\u7F6E')), state.showSettings && /* @__PURE__ */ React10.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.createElement("h3", { className: "font-bold mb-4 text-lg" }, "\u2699\uFE0F \u8BBE\u7F6E\u9762\u677F"), /* @__PURE__ */ React10.createElement("div", { className: "space-y-4" }, /* @__PURE__ */ React10.createElement("div", { className: "border-b border-gray-600 pb-3" }, /* @__PURE__ */ React10.createElement("h4", { className: "font-semibold mb-2 text-blue-300" }, "\u{1F4F7} \u6444\u50CF\u5934\u8BBE\u7F6E"), /* @__PURE__ */ React10.createElement("div", null, /* @__PURE__ */ React10.createElement("label", { className: "block text-sm font-medium mb-1" }, "\u6444\u50CF\u5934\u671D\u5411"), /* @__PURE__ */ React10.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.createElement("option", { value: "environment" }, "\u540E\u7F6E\u6444\u50CF\u5934"),
-    /* @__PURE__ */ React10.createElement("option", { value: "user" }, "\u524D\u7F6E\u6444\u50CF\u5934")
-  ))), /* @__PURE__ */ React10.createElement("div", { className: "border-b border-gray-600 pb-3" }, /* @__PURE__ */ React10.createElement("h4", { className: "font-semibold mb-2 text-green-300" }, "\u{1F3AF} AR \u68C0\u6D4B\u8BBE\u7F6E"), /* @__PURE__ */ React10.createElement("div", { className: "space-y-2" }, /* @__PURE__ */ React10.createElement("div", null, /* @__PURE__ */ React10.createElement("label", { className: "block text-sm font-medium mb-1" }, "\u6807\u8BB0\u7C7B\u578B"), /* @__PURE__ */ React10.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.createElement("option", { value: "barcode" }, "\u6761\u7801 (Barcode)"),
-    /* @__PURE__ */ React10.createElement("option", { value: "pattern" }, "\u56FE\u6848 (Hiro)")
-  )), /* @__PURE__ */ React10.createElement("div", null, /* @__PURE__ */ React10.createElement("label", { className: "block text-sm font-medium mb-1" }, "\u68C0\u6D4B\u8D28\u91CF"), /* @__PURE__ */ React10.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.createElement("option", { value: "low" }, "\u4F4E\u8D28\u91CF (15fps)"),
-    /* @__PURE__ */ React10.createElement("option", { value: "medium" }, "\u4E2D\u7B49\u8D28\u91CF (30fps)"),
-    /* @__PURE__ */ React10.createElement("option", { value: "high" }, "\u9AD8\u8D28\u91CF (60fps)")
-  )))), /* @__PURE__ */ React10.createElement("div", { className: "border-b border-gray-600 pb-3" }, /* @__PURE__ */ React10.createElement("h4", { className: "font-semibold mb-2 text-purple-300" }, "\u{1F441}\uFE0F \u89C6\u89C9\u8BBE\u7F6E"), /* @__PURE__ */ React10.createElement("div", { className: "space-y-2" }, /* @__PURE__ */ React10.createElement("label", { className: "flex items-center" }, /* @__PURE__ */ React10.createElement(
-    "input",
-    {
-      type: "checkbox",
-      checked: state.showWireframe,
-      onChange: (e) => setState((prev) => ({ ...prev, showWireframe: e.target.checked })),
-      className: "mr-2"
-    }
-  ), /* @__PURE__ */ React10.createElement("span", { className: "text-sm" }, "\u663E\u793A\u7EBF\u6846")), /* @__PURE__ */ React10.createElement("label", { className: "flex items-center" }, /* @__PURE__ */ React10.createElement(
-    "input",
-    {
-      type: "checkbox",
-      checked: state.lightingEnabled,
-      onChange: (e) => setState((prev) => ({ ...prev, lightingEnabled: e.target.checked })),
-      className: "mr-2"
-    }
-  ), /* @__PURE__ */ React10.createElement("span", { className: "text-sm" }, "\u542F\u7528\u5149\u7167")))), /* @__PURE__ */ React10.createElement("div", { className: "border-b border-gray-600 pb-3" }, /* @__PURE__ */ React10.createElement("h4", { className: "font-semibold mb-2 text-orange-300" }, "\u{1F3AD} \u6A21\u578B\u4E0E\u52A8\u753B"), /* @__PURE__ */ React10.createElement("div", { className: "space-y-2" }, /* @__PURE__ */ React10.createElement("div", null, /* @__PURE__ */ React10.createElement("label", { className: "block text-sm font-medium mb-1" }, "\u6A21\u578B\u9009\u62E9"), /* @__PURE__ */ React10.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.createElement("option", { value: "sphere" }, "\u{1F310} \u7403\u4F53"),
-    /* @__PURE__ */ React10.createElement("option", { value: "cube" }, "\u2B1C \u7ACB\u65B9\u4F53"),
-    /* @__PURE__ */ React10.createElement("option", { value: "torus" }, "\u2B55 \u5706\u73AF")
-  )), /* @__PURE__ */ React10.createElement("div", null, /* @__PURE__ */ React10.createElement("label", { className: "block text-sm font-medium mb-1" }, "\u52A8\u4F5C\u9009\u62E9"), /* @__PURE__ */ React10.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.createElement("option", { value: "idle" }, "\u{1F9D8} \u5F85\u673A"),
-    /* @__PURE__ */ React10.createElement("option", { value: "dance" }, "\u{1F483} \u821E\u8E48"),
-    /* @__PURE__ */ React10.createElement("option", { value: "wave" }, "\u{1F44B} \u6325\u624B")
-  )), /* @__PURE__ */ React10.createElement("div", null, /* @__PURE__ */ React10.createElement("label", { className: "block text-sm font-medium mb-1" }, "\u97F3\u4E50\u9009\u62E9"), /* @__PURE__ */ React10.createElement(
-    "select",
+  }, [cleanupAR, onCameraError, resize, setupAR, setupRenderer, startRenderLoop]);
+  useEffect(() => {
+    attachModelRoot(resolvedARMode);
+  }, [attachModelRoot, resolvedARMode]);
+  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.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("relative w-full h-full overflow-hidden bg-black", className),
+      style
     },
-    /* @__PURE__ */ React10.createElement("option", { value: "none" }, "\u{1F507} \u65E0\u97F3\u4E50"),
-    /* @__PURE__ */ React10.createElement("option", { value: "bgm1" }, "\u{1F3B5} \u80CC\u666F\u97F3\u4E50 1"),
-    /* @__PURE__ */ React10.createElement("option", { value: "bgm2" }, "\u{1F3B6} \u80CC\u666F\u97F3\u4E50 2")
-  )))), /* @__PURE__ */ React10.createElement("div", null, /* @__PURE__ */ React10.createElement("h4", { className: "font-semibold mb-2 text-red-300" }, "\u{1F3AE} \u63A7\u5236\u64CD\u4F5C"), /* @__PURE__ */ React10.createElement("div", { className: "space-y-2" }, /* @__PURE__ */ React10.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.createElement("div", { ref: videoContainerRef, className: "absolute inset-0", style: mirroredStyle }),
+    /* @__PURE__ */ React10.createElement("canvas", { ref: canvasRef, className: "absolute inset-0 w-full h-full", style: mirroredStyle }),
+    isLoading && /* @__PURE__ */ React10.createElement("div", { className: "absolute inset-0 flex items-center justify-center bg-black/70 text-white z-20" }, /* @__PURE__ */ React10.createElement("div", { className: "text-center" }, /* @__PURE__ */ React10.createElement("div", { className: "h-10 w-10 animate-spin rounded-full border-b-2 border-white mx-auto mb-3" }), /* @__PURE__ */ React10.createElement("div", null, "Initializing AR..."))),
+    error && /* @__PURE__ */ React10.createElement("div", { className: "absolute inset-0 flex items-center justify-center bg-red-950/80 text-white z-20" }, /* @__PURE__ */ React10.createElement("div", { className: "text-center max-w-sm px-4" }, /* @__PURE__ */ React10.createElement("div", { className: "text-lg font-semibold mb-2" }, "AR Error"), /* @__PURE__ */ React10.createElement("div", { className: "text-sm text-red-200" }, error))),
+    arReady && !error && /* @__PURE__ */ React10.createElement(React10.Fragment, null, resolvedARMode !== "overlay" /* Overlay */ && !modelPlaced && /* @__PURE__ */ React10.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.createElement("div", { className: "font-semibold mb-1" }, "Marker Placement"), /* @__PURE__ */ React10.createElement("div", { className: "text-gray-200" }, 'Align the marker in view, then tap "', placementText, '" to place the model.'), /* @__PURE__ */ React10.createElement("div", { className: "mt-2" }, markerDetected ? /* @__PURE__ */ React10.createElement("span", { className: "text-green-400" }, "Marker detected") : /* @__PURE__ */ React10.createElement("span", { className: "text-yellow-400" }, "Waiting for marker..."))), /* @__PURE__ */ React10.createElement("div", { className: "absolute top-4 right-4 flex items-center space-x-2 z-10" }, /* @__PURE__ */ React10.createElement(
+      "span",
+      {
+        className: clsx("h-2.5 w-2.5 rounded-full", cameraReady ? "bg-green-400" : "bg-red-400"),
+        title: "Camera"
+      }
+    ), /* @__PURE__ */ React10.createElement(
+      "span",
+      {
+        className: clsx("h-2.5 w-2.5 rounded-full", arReady ? "bg-green-400" : "bg-red-400"),
+        title: "AR"
+      }
+    ), /* @__PURE__ */ React10.createElement(
+      "span",
+      {
+        className: clsx("h-2.5 w-2.5 rounded-full", markerDetected ? "bg-blue-400" : "bg-gray-400"),
+        title: "Marker"
+      }
+    )), /* @__PURE__ */ React10.createElement("div", { className: "absolute bottom-4 left-4 right-4 flex justify-center gap-3 z-10" }, /* @__PURE__ */ React10.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.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.createElement(
+      "button",
+      {
+        onClick: placeModel,
+        disabled: !markerDetected,
+        className: 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.createElement("div", { className: "absolute bottom-4 left-4 right-4 flex justify-center space-x-4" }, /* @__PURE__ */ React10.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.createElement(
-    "button",
-    {
-      onClick: placeModel,
-      disabled: !state.markerDetected,
-      className: 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.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.createElement("div", { className: "absolute top-4 right-4 flex space-x-2" }, /* @__PURE__ */ React10.createElement("div", { className: clsx("w-3 h-3 rounded-full", state.cameraReady ? "bg-green-400" : "bg-red-400"), title: "\u6444\u50CF\u5934" }), /* @__PURE__ */ React10.createElement("div", { className: clsx("w-3 h-3 rounded-full", state.arReady ? "bg-green-400" : "bg-red-400"), title: "AR" }), /* @__PURE__ */ React10.createElement("div", { className: clsx("w-3 h-3 rounded-full", window.DeviceOrientationEvent ? "bg-purple-400" : "bg-gray-400"), title: "\u9640\u87BA\u4EEA" }), /* @__PURE__ */ React10.createElement("div", { className: clsx("w-3 h-3 rounded-full", state.markerDetected ? "bg-blue-400" : "bg-gray-400"), title: "\u6807\u8BB0\u68C0\u6D4B" }), /* @__PURE__ */ React10.createElement("div", { className: 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.createElement(
+      "button",
+      {
+        onClick: removeModel,
+        className: "px-5 py-2 rounded-lg text-white bg-orange-600 hover:bg-orange-500"
+      },
+      "Reset"
+    )), settingsVisible && /* @__PURE__ */ React10.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.createElement("div", { className: "text-sm font-semibold" }, "AR Settings"), /* @__PURE__ */ React10.createElement("label", { className: "block text-xs text-gray-300" }, "Model", /* @__PURE__ */ React10.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.createElement("option", { key: preset.id, value: preset.id }, preset.name))
+    )), /* @__PURE__ */ React10.createElement("label", { className: "block text-xs text-gray-300" }, "Motion", /* @__PURE__ */ React10.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.createElement("option", { key: preset.id, value: preset.id }, preset.name))
+    )), audioPresets && audioPresets.length > 0 && /* @__PURE__ */ React10.createElement("label", { className: "block text-xs text-gray-300" }, "Audio", /* @__PURE__ */ React10.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.createElement("option", { key: preset.id, value: preset.id }, preset.name))
+    )), /* @__PURE__ */ React10.createElement("label", { className: "block text-xs text-gray-300" }, "AR Mode", /* @__PURE__ */ React10.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.createElement("option", { value: "overlay" /* Overlay */ }, "Overlay"),
+      /* @__PURE__ */ React10.createElement("option", { value: "world-fixed" /* WorldFixed */ }, "World Fixed")
+    )), /* @__PURE__ */ React10.createElement("label", { className: "block text-xs text-gray-300" }, "Camera", /* @__PURE__ */ React10.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.createElement("option", { value: "environment" }, "Back"),
+      /* @__PURE__ */ React10.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 {
@@ -8972,6 +9313,6 @@ var FXThreePreview = ({
 };
 FXThreePreview.displayName = "FXThreePreview";
 
-export { ARMode, CheerButton, CheerParticles, ChoiceMenu, DialogueBox, FXParser, FXThreePreview, FXToThreeAdapter, FXViewer, HLSLToGLSLConverter, HistoryPanel, LoadingOverlay, LoadingScreen, LoopConfirmDialog, MMDARPlayer, MMDLightingDebugPanel, MMDMusicPlayer, MMDPlayerBase, MMDPlayerEnhanced, MMDPlayerEnhancedDebugInfo, MMDPlaylist, MMDPlaylistDebugInfo, MMDVisualNovel, MMDVisualNovelWithSelector, ModelSelectorSettings, MultiFXAdapter, MusicControls, PMXEditor2 as PMXEditor, PMXEditor as PMXEditorCore, PMXExporter, PMXViewer, PlaylistPanel, StartScreen, TrackInfo, addDefaultSphereTextures, checkModelSphereDefinition, checkSphereTextures, compareFXEffects, configureMaterialsForMMD, configureRendererForMMD, createMMDLights, diagnoseMaterialsMMD, exportFXToJSON, exportFXToMarkdown, extractTexturePaths, filterDefinesByPrefix, fullSphereDiagnostic, generateAllToonTextures, generateToonTexture, getColorParameters, getConfigSummaryText, getFeatureFlags, getTextureDefines, hasFeature, inspectMaterial, listAllMaterials, loadAmmo, printDiagnosticReport, printModelSphereInfo, printSphereDiagnostic, quickDiagnose, validateFXEffect };
+export { ARMode, CheerButton, CheerParticles, ChoiceMenu, DialogueBox, FXParser, FXThreePreview, FXToThreeAdapter, FXViewer, HLSLToGLSLConverter, HistoryPanel, LoadingOverlay, LoadingScreen, LoopConfirmDialog, MMDARApp, MMDARPlayer, MMDLightingDebugPanel, MMDMusicPlayer, MMDPlayerBase, MMDPlayerEnhanced, MMDPlayerEnhancedDebugInfo, MMDPlaylist, MMDPlaylistDebugInfo, MMDUploadPanel, MMDVisualNovel, MMDVisualNovelWithSelector, MMD_UPLOAD_CONFIGS, ModelSelectorSettings, MultiFXAdapter, MusicControls, PMXEditor2 as PMXEditor, PMXEditor as PMXEditorCore, PMXExporter, PMXViewer, PlaylistPanel, StartScreen, TrackInfo, addDefaultSphereTextures, checkModelSphereDefinition, checkSphereTextures, compareFXEffects, configureMaterialsForMMD, configureRendererForMMD, createMMDLights, diagnoseMaterialsMMD, exportFXToJSON, exportFXToMarkdown, extractTexturePaths, filterDefinesByPrefix, fullSphereDiagnostic, generateAllToonTextures, generateToonTexture, getColorParameters, getConfigSummaryText, getFeatureFlags, getTextureDefines, hasFeature, inspectMaterial, listAllMaterials, loadAmmo, printDiagnosticReport, printModelSphereInfo, printSphereDiagnostic, quickDiagnose, validateFXEffect };
 //# sourceMappingURL=index.mjs.map
 //# sourceMappingURL=index.mjs.map