sa2kit 1.6.30 → 1.6.31

package/dist/mmd/index.mjs

@@ -1,9 +1,10 @@
-import { useMusic } from '../chunk-3WOAPLEG.mjs';
-import '../chunk-MW4BCIZC.mjs';
-import { PMXParser } from '../chunk-VRTRSEEH.mjs';
-export { PMXParser } from '../chunk-VRTRSEEH.mjs';
+import { useMusic } from '../chunk-EB4NR623.mjs';
+import '../chunk-4HC6M7FK.mjs';
+import { PMXParser } from '../chunk-RSJSZ7QH.mjs';
+export { PMXParser } from '../chunk-RSJSZ7QH.mjs';
 import '../chunk-BJTO5JO5.mjs';
 import React10, { forwardRef, useRef, useState, useEffect, useImperativeHandle, useCallback, useMemo } 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';
@@ -72,7 +73,7 @@ var PMXEditor = class {
       action: "add",
       target: newTexture.index,
       data: { path }
-    }, `\u6DFB\u52A0\u7EB9\u7406: ${path}`);
+    }, "\u6DFB\u52A0\u7EB9\u7406: " + path);
     return newTexture.index;
   }
   /**
@@ -80,7 +81,7 @@ var PMXEditor = class {
    */
   updateTexture(index, newPath) {
     if (index < 0 || index >= this.data.textures.length) {
-      throw new Error(`Invalid texture index: ${index}`);
+      throw new Error("Invalid texture index: " + index);
     }
     const oldPath = this.data.textures[index].path;
     this.data.textures[index].path = newPath;
@@ -89,7 +90,7 @@ var PMXEditor = class {
       action: "update",
       target: index,
       data: { oldPath, newPath }
-    }, `\u66F4\u65B0\u7EB9\u7406 #${index}: ${oldPath} \u2192 ${newPath}`);
+    }, "\u66F4\u65B0\u7EB9\u7406 #" + index + ": " + oldPath + " \u2192 " + newPath);
     return true;
   }
   /**
@@ -97,13 +98,13 @@ var PMXEditor = class {
    */
   deleteTexture(index) {
     if (index < 0 || index >= this.data.textures.length) {
-      throw new Error(`Invalid texture index: ${index}`);
+      throw new Error("Invalid texture index: " + index);
     }
     const usedByMaterials = this.data.materials.filter(
       (m) => m.textureIndex === index || m.sphereTextureIndex === index || !m.isSharedToon && m.toonTextureIndex === index
     );
     if (usedByMaterials.length > 0) {
-      throw new Error(`\u7EB9\u7406 #${index} \u6B63\u5728\u88AB ${usedByMaterials.length} \u4E2A\u6750\u8D28\u4F7F\u7528\uFF0C\u65E0\u6CD5\u5220\u9664`);
+      throw new Error("\u7EB9\u7406 #" + index + " \u6B63\u5728\u88AB " + usedByMaterials.length + " \u4E2A\u6750\u8D28\u4F7F\u7528\uFF0C\u65E0\u6CD5\u5220\u9664");
     }
     const deletedTexture = this.data.textures.splice(index, 1)[0];
     if (!deletedTexture) return false;
@@ -123,7 +124,7 @@ var PMXEditor = class {
       action: "delete",
       target: index,
       data: { path: deletedTexture.path }
-    }, `\u5220\u9664\u7EB9\u7406 #${index}: ${deletedTexture.path}`);
+    }, "\u5220\u9664\u7EB9\u7406 #" + index + ": " + deletedTexture.path);
     return true;
   }
   /**
@@ -131,10 +132,10 @@ var PMXEditor = class {
    */
   setMaterialMainTexture(materialIndex, textureIndex) {
     if (materialIndex < 0 || materialIndex >= this.data.materials.length) {
-      throw new Error(`Invalid material index: ${materialIndex}`);
+      throw new Error("Invalid material index: " + materialIndex);
     }
     if (textureIndex !== -1 && (textureIndex < 0 || textureIndex >= this.data.textures.length)) {
-      throw new Error(`Invalid texture index: ${textureIndex}`);
+      throw new Error("Invalid texture index: " + textureIndex);
     }
     const material = this.data.materials[materialIndex];
     const oldIndex = material.textureIndex;
@@ -149,7 +150,7 @@ var PMXEditor = class {
         oldIndex,
         newIndex: textureIndex
       }
-    }, `\u6750\u8D28 #${materialIndex} \u4E3B\u7EB9\u7406: #${oldIndex} \u2192 #${textureIndex}`);
+    }, "\u6750\u8D28 #" + materialIndex + " \u4E3B\u7EB9\u7406: #" + oldIndex + " \u2192 #" + textureIndex);
     return true;
   }
   /**
@@ -157,10 +158,10 @@ var PMXEditor = class {
    */
   setMaterialSphereTexture(materialIndex, textureIndex, mode = 1) {
     if (materialIndex < 0 || materialIndex >= this.data.materials.length) {
-      throw new Error(`Invalid material index: ${materialIndex}`);
+      throw new Error("Invalid material index: " + materialIndex);
     }
     if (textureIndex !== -1 && (textureIndex < 0 || textureIndex >= this.data.textures.length)) {
-      throw new Error(`Invalid texture index: ${textureIndex}`);
+      throw new Error("Invalid texture index: " + textureIndex);
     }
     const material = this.data.materials[materialIndex];
     const oldIndex = material.sphereTextureIndex;
@@ -179,7 +180,7 @@ var PMXEditor = class {
         oldMode,
         newMode: mode
       }
-    }, `\u6750\u8D28 #${materialIndex} Sphere\u7EB9\u7406: #${oldIndex} \u2192 #${textureIndex} (\u6A21\u5F0F: ${mode})`);
+    }, "\u6750\u8D28 #" + materialIndex + " Sphere\u7EB9\u7406: #" + oldIndex + " \u2192 #" + textureIndex + " (\u6A21\u5F0F: " + mode + ")");
     return true;
   }
   /**
@@ -187,10 +188,10 @@ var PMXEditor = class {
    */
   setMaterialToonTexture(materialIndex, textureIndex, isShared = false) {
     if (materialIndex < 0 || materialIndex >= this.data.materials.length) {
-      throw new Error(`Invalid material index: ${materialIndex}`);
+      throw new Error("Invalid material index: " + materialIndex);
     }
     if (!isShared && textureIndex !== -1 && (textureIndex < 0 || textureIndex >= this.data.textures.length)) {
-      throw new Error(`Invalid texture index: ${textureIndex}`);
+      throw new Error("Invalid texture index: " + textureIndex);
     }
     const material = this.data.materials[materialIndex];
     const oldIndex = material.toonTextureIndex;
@@ -209,7 +210,7 @@ var PMXEditor = class {
         oldShared,
         isShared
       }
-    }, `\u6750\u8D28 #${materialIndex} Toon\u7EB9\u7406: #${oldIndex} \u2192 #${textureIndex} (\u5171\u4EAB: ${isShared})`);
+    }, "\u6750\u8D28 #" + materialIndex + " Toon\u7EB9\u7406: #" + oldIndex + " \u2192 #" + textureIndex + " (\u5171\u4EAB: " + isShared + ")");
     return true;
   }
   /**
@@ -217,7 +218,7 @@ var PMXEditor = class {
    */
   updateMaterial(materialIndex, updates) {
     if (materialIndex < 0 || materialIndex >= this.data.materials.length) {
-      throw new Error(`Invalid material index: ${materialIndex}`);
+      throw new Error("Invalid material index: " + materialIndex);
     }
     const material = this.data.materials[materialIndex];
     const oldData = { ...material };
@@ -243,7 +244,7 @@ var PMXEditor = class {
       action: "update",
       target: materialIndex,
       data: { oldData, updates }
-    }, `\u66F4\u65B0\u6750\u8D28 #${materialIndex}: ${material.name}`);
+    }, "\u66F4\u65B0\u6750\u8D28 #" + materialIndex + ": " + material.name);
     return true;
   }
   /**
@@ -274,7 +275,7 @@ var PMXEditor = class {
       if (material.isSharedToon) {
         mapping.toonTexture = {
           index: material.toonTextureIndex,
-          path: `toon${String(material.toonTextureIndex).padStart(2, "0")}.bmp`,
+          path: "toon" + String(material.toonTextureIndex).padStart(2, "0") + ".bmp",
           isShared: true
         };
       } else if (material.toonTextureIndex >= 0 && material.toonTextureIndex < this.data.textures.length) {
@@ -559,7 +560,7 @@ var PMXExporter = class {
         this.view.setInt32(this.offset, value, true);
         break;
       default:
-        throw new Error(`Invalid index size: ${size}`);
+        throw new Error("Invalid index size: " + size);
     }
     this.offset += size;
   }
@@ -602,7 +603,7 @@ var PMXEditor2 = ({
     if (!editor) return;
     const data2 = editor.getData();
     const exporter = new PMXExporter(data2);
-    exporter.exportAndDownload(`${data2.modelInfo.modelName || "model"}_edited.pmx`);
+    exporter.exportAndDownload((data2.modelInfo.modelName || "model") + "_edited.pmx");
   };
   const handleMaterialTextureChange = (materialIndex, textureType, textureIndex) => {
     if (!editor) return;
@@ -630,14 +631,14 @@ var PMXEditor2 = ({
     try {
       const index = editor.addTexture(path);
       setRefresh((r) => r + 1);
-      alert(`\u6210\u529F\u6DFB\u52A0\u7EB9\u7406 #${index}: ${path}`);
+      alert("\u6210\u529F\u6DFB\u52A0\u7EB9\u7406 #" + index + ": " + path);
     } catch (err) {
       alert(err instanceof Error ? err.message : "\u6DFB\u52A0\u5931\u8D25");
     }
   };
   const handleDeleteTexture = (index) => {
     if (!editor) return;
-    if (!confirm(`\u786E\u5B9A\u8981\u5220\u9664\u7EB9\u7406 #${index} \u5417\uFF1F`)) return;
+    if (!confirm("\u786E\u5B9A\u8981\u5220\u9664\u7EB9\u7406 #" + index + " \u5417\uFF1F")) return;
     try {
       editor.deleteTexture(index);
       setRefresh((r) => r + 1);
@@ -647,16 +648,16 @@ var PMXEditor2 = ({
     }
   };
   if (loading) {
-    return /* @__PURE__ */ React10.createElement("div", { className: `pmx-editor loading ${className}` }, /* @__PURE__ */ React10.createElement("div", { className: "flex items-center justify-center p-8" }, /* @__PURE__ */ React10.createElement("div", { className: "text-center" }, /* @__PURE__ */ React10.createElement("div", { className: "inline-block h-8 w-8 animate-spin rounded-full border-4 border-solid border-blue-500 border-r-transparent" }), /* @__PURE__ */ React10.createElement("p", { className: "mt-4 text-gray-600" }, "\u6B63\u5728\u52A0\u8F7D\u6A21\u578B..."))));
+    return /* @__PURE__ */ React10.createElement("div", { className: clsx("pmx-editor loading", className) }, /* @__PURE__ */ React10.createElement("div", { className: "flex items-center justify-center p-8" }, /* @__PURE__ */ React10.createElement("div", { className: "text-center" }, /* @__PURE__ */ React10.createElement("div", { className: "inline-block h-8 w-8 animate-spin rounded-full border-4 border-solid border-blue-500 border-r-transparent" }), /* @__PURE__ */ React10.createElement("p", { className: "mt-4 text-gray-600" }, "\u6B63\u5728\u52A0\u8F7D\u6A21\u578B..."))));
   }
   if (error || !editor) {
-    return /* @__PURE__ */ React10.createElement("div", { className: `pmx-editor error ${className}` }, /* @__PURE__ */ React10.createElement("div", { className: "rounded-lg bg-red-50 p-6 border border-red-200" }, /* @__PURE__ */ React10.createElement("h3", { className: "text-lg font-semibold text-red-800 mb-2" }, "\u274C \u52A0\u8F7D\u9519\u8BEF"), /* @__PURE__ */ React10.createElement("p", { className: "text-red-600" }, error || "\u672A\u77E5\u9519\u8BEF")));
+    return /* @__PURE__ */ React10.createElement("div", { className: clsx("pmx-editor error", className) }, /* @__PURE__ */ React10.createElement("div", { className: "rounded-lg bg-red-50 p-6 border border-red-200" }, /* @__PURE__ */ React10.createElement("h3", { className: "text-lg font-semibold text-red-800 mb-2" }, "\u274C \u52A0\u8F7D\u9519\u8BEF"), /* @__PURE__ */ React10.createElement("p", { className: "text-red-600" }, error || "\u672A\u77E5\u9519\u8BEF")));
   }
   const data = editor.getData();
   const stats = editor.getStats();
   const history = editor.getHistory();
   const unusedTextures = editor.getUnusedTextures();
-  return /* @__PURE__ */ React10.createElement("div", { className: `pmx-editor ${className}` }, /* @__PURE__ */ React10.createElement("div", { className: "bg-white border-b border-gray-200 p-4" }, /* @__PURE__ */ React10.createElement("div", { className: "flex items-center justify-between" }, /* @__PURE__ */ React10.createElement("div", null, /* @__PURE__ */ React10.createElement("h2", { className: "text-xl font-bold text-gray-900" }, data.modelInfo.modelName), /* @__PURE__ */ React10.createElement("p", { className: "text-sm text-gray-600" }, stats.materials, " \u6750\u8D28 | ", stats.textures, " \u7EB9\u7406 | ", stats.editHistory, " \u6B21\u7F16\u8F91")), /* @__PURE__ */ React10.createElement("div", { className: "flex gap-2" }, /* @__PURE__ */ React10.createElement(
+  return /* @__PURE__ */ React10.createElement("div", { className: clsx("pmx-editor", className) }, /* @__PURE__ */ React10.createElement("div", { className: "bg-white border-b border-gray-200 p-4" }, /* @__PURE__ */ React10.createElement("div", { className: "flex items-center justify-between" }, /* @__PURE__ */ React10.createElement("div", null, /* @__PURE__ */ React10.createElement("h2", { className: "text-xl font-bold text-gray-900" }, data.modelInfo.modelName), /* @__PURE__ */ React10.createElement("p", { className: "text-sm text-gray-600" }, stats.materials, " \u6750\u8D28 | ", stats.textures, " \u7EB9\u7406 | ", stats.editHistory, " \u6B21\u7F16\u8F91")), /* @__PURE__ */ React10.createElement("div", { className: "flex gap-2" }, /* @__PURE__ */ React10.createElement(
     "button",
     {
       onClick: handleExport,
@@ -672,7 +673,7 @@ var PMXEditor2 = ({
     {
       key: tab.id,
       onClick: () => setActiveTab(tab.id),
-      className: `py-3 px-4 font-medium transition-colors ${activeTab === tab.id ? "border-b-2 border-blue-500 text-blue-600" : "text-gray-600 hover:text-gray-900"}`
+      className: clsx("py-3 px-4 font-medium transition-colors", activeTab === tab.id ? "border-b-2 border-blue-500 text-blue-600" : "text-gray-600 hover:text-gray-900")
     },
     tab.label
   )))), /* @__PURE__ */ React10.createElement("div", { className: "p-6" }, activeTab === "materials" && /* @__PURE__ */ React10.createElement("div", { className: "grid grid-cols-1 lg:grid-cols-2 gap-6" }, /* @__PURE__ */ React10.createElement("div", { className: "bg-white rounded-lg shadow" }, /* @__PURE__ */ React10.createElement("div", { className: "p-4 border-b border-gray-200" }, /* @__PURE__ */ React10.createElement("h3", { className: "text-lg font-semibold" }, "\u6750\u8D28\u5217\u8868 (", data.materials.length, ")")), /* @__PURE__ */ React10.createElement("div", { className: "divide-y divide-gray-200 max-h-[600px] overflow-y-auto" }, data.materialTextureMappings.map((mapping) => /* @__PURE__ */ React10.createElement(
@@ -680,18 +681,18 @@ var PMXEditor2 = ({
     {
       key: mapping.materialIndex,
       onClick: () => setSelectedMaterial(mapping.materialIndex),
-      className: `p-4 cursor-pointer hover:bg-gray-50 ${selectedMaterial === mapping.materialIndex ? "bg-blue-50" : ""}`
+      className: clsx("p-4 cursor-pointer hover:bg-gray-50", selectedMaterial === mapping.materialIndex ? "bg-blue-50" : "")
     },
     /* @__PURE__ */ React10.createElement("div", { className: "flex items-center gap-3" }, /* @__PURE__ */ React10.createElement(
       "div",
       {
         className: "w-10 h-10 rounded border",
         style: {
-          backgroundColor: `rgba(${data.materials[mapping.materialIndex]?.diffuse[0] * 255}, ${data.materials[mapping.materialIndex]?.diffuse[1] * 255}, ${data.materials[mapping.materialIndex]?.diffuse[2] * 255}, 1)`
+          backgroundColor: "rgba(" + data.materials[mapping.materialIndex]?.diffuse[0] * 255 + ", " + data.materials[mapping.materialIndex]?.diffuse[1] * 255 + ", " + data.materials[mapping.materialIndex]?.diffuse[2] * 255 + ", 1)"
         }
       }
     ), /* @__PURE__ */ React10.createElement("div", { className: "flex-1" }, /* @__PURE__ */ React10.createElement("p", { className: "font-medium" }, "#", mapping.materialIndex, ": ", mapping.materialName), /* @__PURE__ */ React10.createElement("p", { className: "text-xs text-gray-500" }, mapping.mainTexture && "\u{1F5BC}\uFE0F ", mapping.sphereTexture && "\u2728 ", mapping.toonTexture && "\u{1F3A8} ", !mapping.mainTexture && !mapping.sphereTexture && !mapping.toonTexture && "\u26AA \u65E0\u7EB9\u7406")))
-  )))), /* @__PURE__ */ React10.createElement("div", { className: "bg-white rounded-lg shadow" }, /* @__PURE__ */ React10.createElement("div", { className: "p-4 border-b border-gray-200" }, /* @__PURE__ */ React10.createElement("h3", { className: "text-lg font-semibold" }, selectedMaterial !== null ? `\u7F16\u8F91\u6750\u8D28 #${selectedMaterial}` : "\u8BF7\u9009\u62E9\u6750\u8D28")), selectedMaterial !== null && /* @__PURE__ */ React10.createElement("div", { className: "p-4 space-y-4" }, /* @__PURE__ */ React10.createElement("div", null, /* @__PURE__ */ React10.createElement("label", { className: "block text-sm font-medium text-gray-700 mb-2" }, "\u{1F5BC}\uFE0F \u4E3B\u7EB9\u7406"), /* @__PURE__ */ React10.createElement(
+  )))), /* @__PURE__ */ React10.createElement("div", { className: "bg-white rounded-lg shadow" }, /* @__PURE__ */ React10.createElement("div", { className: "p-4 border-b border-gray-200" }, /* @__PURE__ */ React10.createElement("h3", { className: "text-lg font-semibold" }, selectedMaterial !== null ? "\u7F16\u8F91\u6750\u8D28 #" + selectedMaterial : "\u8BF7\u9009\u62E9\u6750\u8D28")), selectedMaterial !== null && /* @__PURE__ */ React10.createElement("div", { className: "p-4 space-y-4" }, /* @__PURE__ */ React10.createElement("div", null, /* @__PURE__ */ React10.createElement("label", { className: "block text-sm font-medium text-gray-700 mb-2" }, "\u{1F5BC}\uFE0F \u4E3B\u7EB9\u7406"), /* @__PURE__ */ React10.createElement(
     "select",
     {
       value: data.materials[selectedMaterial].textureIndex,
@@ -771,16 +772,16 @@ var PMXViewer = ({
   const getTextureUrl = (path) => {
     if (!basePath) return path;
     const normalizedPath = path.replace(/\\/g, "/");
-    return `${basePath}/${normalizedPath}`;
+    return basePath + "/" + normalizedPath;
   };
   if (loading) {
-    return /* @__PURE__ */ React10.createElement("div", { className: `pmx-viewer loading ${className}` }, /* @__PURE__ */ React10.createElement("div", { className: "flex items-center justify-center p-8" }, /* @__PURE__ */ React10.createElement("div", { className: "text-center" }, /* @__PURE__ */ React10.createElement("div", { className: "inline-block h-8 w-8 animate-spin rounded-full border-4 border-solid border-blue-500 border-r-transparent" }), /* @__PURE__ */ React10.createElement("p", { className: "mt-4 text-gray-600" }, "\u6B63\u5728\u89E3\u6790PMX\u6A21\u578B..."))));
+    return /* @__PURE__ */ React10.createElement("div", { className: clsx("pmx-viewer loading", className) }, /* @__PURE__ */ React10.createElement("div", { className: "flex items-center justify-center p-8" }, /* @__PURE__ */ React10.createElement("div", { className: "text-center" }, /* @__PURE__ */ React10.createElement("div", { className: "inline-block h-8 w-8 animate-spin rounded-full border-4 border-solid border-blue-500 border-r-transparent" }), /* @__PURE__ */ React10.createElement("p", { className: "mt-4 text-gray-600" }, "\u6B63\u5728\u89E3\u6790PMX\u6A21\u578B..."))));
   }
   if (error || !result) {
-    return /* @__PURE__ */ React10.createElement("div", { className: `pmx-viewer error ${className}` }, /* @__PURE__ */ React10.createElement("div", { className: "rounded-lg bg-red-50 p-6 border border-red-200" }, /* @__PURE__ */ React10.createElement("h3", { className: "text-lg font-semibold text-red-800 mb-2" }, "\u274C \u89E3\u6790\u9519\u8BEF"), /* @__PURE__ */ React10.createElement("p", { className: "text-red-600" }, error || "\u672A\u77E5\u9519\u8BEF")));
+    return /* @__PURE__ */ React10.createElement("div", { className: clsx("pmx-viewer error", className) }, /* @__PURE__ */ React10.createElement("div", { className: "rounded-lg bg-red-50 p-6 border border-red-200" }, /* @__PURE__ */ React10.createElement("h3", { className: "text-lg font-semibold text-red-800 mb-2" }, "\u274C \u89E3\u6790\u9519\u8BEF"), /* @__PURE__ */ React10.createElement("p", { className: "text-red-600" }, error || "\u672A\u77E5\u9519\u8BEF")));
   }
   const { header, modelInfo, textures, materials, materialTextureMappings, vertexCount, faceCount } = result;
-  return /* @__PURE__ */ React10.createElement("div", { className: `pmx-viewer ${className}` }, /* @__PURE__ */ React10.createElement("div", { className: "border-b border-gray-200 mb-6" }, /* @__PURE__ */ React10.createElement("nav", { className: "flex space-x-4" }, [
+  return /* @__PURE__ */ React10.createElement("div", { className: clsx("pmx-viewer", className) }, /* @__PURE__ */ React10.createElement("div", { className: "border-b border-gray-200 mb-6" }, /* @__PURE__ */ React10.createElement("nav", { className: "flex space-x-4" }, [
     { id: "overview", label: "\u{1F4CA} \u6982\u89C8" },
     { id: "textures", label: "\u{1F5BC}\uFE0F \u7EB9\u7406\u5217\u8868" },
     { id: "materials", label: "\u{1F3A8} \u6750\u8D28\u5217\u8868" },
@@ -790,7 +791,7 @@ var PMXViewer = ({
     {
       key: tab.id,
       onClick: () => setActiveTab(tab.id),
-      className: `py-2 px-4 font-medium transition-colors ${activeTab === tab.id ? "border-b-2 border-blue-500 text-blue-600" : "text-gray-600 hover:text-gray-900"}`
+      className: clsx("py-2 px-4 font-medium transition-colors", activeTab === tab.id ? "border-b-2 border-blue-500 text-blue-600" : "text-gray-600 hover:text-gray-900")
     },
     tab.label
   )))), activeTab === "overview" && /* @__PURE__ */ React10.createElement("div", { className: "space-y-6" }, /* @__PURE__ */ React10.createElement("div", { className: "bg-white rounded-lg shadow p-6" }, /* @__PURE__ */ React10.createElement("h3", { className: "text-xl font-bold mb-4" }, "\u6A21\u578B\u4FE1\u606F"), /* @__PURE__ */ React10.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4" }, /* @__PURE__ */ React10.createElement("div", null, /* @__PURE__ */ React10.createElement("p", { className: "text-sm text-gray-600" }, "\u6A21\u578B\u540D\u79F0"), /* @__PURE__ */ React10.createElement("p", { className: "font-medium" }, modelInfo.modelName || "\u672A\u547D\u540D")), /* @__PURE__ */ React10.createElement("div", null, /* @__PURE__ */ React10.createElement("p", { className: "text-sm text-gray-600" }, "\u82F1\u6587\u540D\u79F0"), /* @__PURE__ */ React10.createElement("p", { className: "font-medium" }, modelInfo.modelNameEnglish || "-")), /* @__PURE__ */ React10.createElement("div", null, /* @__PURE__ */ React10.createElement("p", { className: "text-sm text-gray-600" }, "PMX\u7248\u672C"), /* @__PURE__ */ React10.createElement("p", { className: "font-medium" }, header.version)), /* @__PURE__ */ React10.createElement("div", null, /* @__PURE__ */ React10.createElement("p", { className: "text-sm text-gray-600" }, "\u7F16\u7801\u683C\u5F0F"), /* @__PURE__ */ React10.createElement("p", { className: "font-medium" }, header.globals.encoding === 0 ? "UTF-16LE" : "UTF-8"))), modelInfo.comment && /* @__PURE__ */ React10.createElement("div", { className: "mt-4" }, /* @__PURE__ */ React10.createElement("p", { className: "text-sm text-gray-600" }, "\u6CE8\u91CA"), /* @__PURE__ */ React10.createElement("p", { className: "text-sm mt-1 whitespace-pre-wrap" }, modelInfo.comment))), /* @__PURE__ */ React10.createElement("div", { className: "grid grid-cols-2 md:grid-cols-4 gap-4" }, /* @__PURE__ */ React10.createElement("div", { className: "bg-blue-50 rounded-lg p-4" }, /* @__PURE__ */ React10.createElement("p", { className: "text-sm text-blue-600 mb-1" }, "\u9876\u70B9\u6570"), /* @__PURE__ */ React10.createElement("p", { className: "text-2xl font-bold text-blue-900" }, vertexCount.toLocaleString())), /* @__PURE__ */ React10.createElement("div", { className: "bg-green-50 rounded-lg p-4" }, /* @__PURE__ */ React10.createElement("p", { className: "text-sm text-green-600 mb-1" }, "\u9762\u6570"), /* @__PURE__ */ React10.createElement("p", { className: "text-2xl font-bold text-green-900" }, faceCount.toLocaleString())), /* @__PURE__ */ React10.createElement("div", { className: "bg-purple-50 rounded-lg p-4" }, /* @__PURE__ */ React10.createElement("p", { className: "text-sm text-purple-600 mb-1" }, "\u7EB9\u7406\u6570"), /* @__PURE__ */ React10.createElement("p", { className: "text-2xl font-bold text-purple-900" }, textures.length)), /* @__PURE__ */ React10.createElement("div", { className: "bg-orange-50 rounded-lg p-4" }, /* @__PURE__ */ React10.createElement("p", { className: "text-sm text-orange-600 mb-1" }, "\u6750\u8D28\u6570"), /* @__PURE__ */ React10.createElement("p", { className: "text-2xl font-bold text-orange-900" }, materials.length)))), activeTab === "textures" && /* @__PURE__ */ React10.createElement("div", { className: "bg-white rounded-lg shadow" }, /* @__PURE__ */ React10.createElement("div", { className: "p-4 border-b border-gray-200" }, /* @__PURE__ */ React10.createElement("h3", { className: "text-lg font-semibold" }, "\u7EB9\u7406\u5217\u8868 (", textures.length, ")")), /* @__PURE__ */ React10.createElement("div", { className: "divide-y divide-gray-200" }, textures.map((texture) => /* @__PURE__ */ React10.createElement("div", { key: texture.index, className: "p-4 hover:bg-gray-50" }, /* @__PURE__ */ React10.createElement("div", { className: "flex items-start gap-4" }, /* @__PURE__ */ React10.createElement("div", { className: "flex-shrink-0 w-12 h-12 bg-gray-200 rounded flex items-center justify-center text-gray-500 text-xs" }, "#", texture.index), /* @__PURE__ */ React10.createElement("div", { className: "flex-1 min-w-0" }, /* @__PURE__ */ React10.createElement("p", { className: "font-medium text-gray-900 truncate" }, texture.path), /* @__PURE__ */ React10.createElement("p", { className: "text-sm text-gray-500 mt-1" }, "\u5B8C\u6574URL:"), /* @__PURE__ */ React10.createElement("code", { className: "text-xs bg-gray-100 px-2 py-1 rounded block mt-1 overflow-x-auto" }, getTextureUrl(texture.path)))))))), activeTab === "materials" && /* @__PURE__ */ React10.createElement("div", { className: "bg-white rounded-lg shadow" }, /* @__PURE__ */ React10.createElement("div", { className: "p-4 border-b border-gray-200" }, /* @__PURE__ */ React10.createElement("h3", { className: "text-lg font-semibold" }, "\u6750\u8D28\u5217\u8868 (", materials.length, ")")), /* @__PURE__ */ React10.createElement("div", { className: "divide-y divide-gray-200" }, materials.map((material, index) => /* @__PURE__ */ React10.createElement("div", { key: index, className: "p-4 hover:bg-gray-50" }, /* @__PURE__ */ React10.createElement("div", { className: "flex items-start gap-4" }, /* @__PURE__ */ React10.createElement(
@@ -798,10 +799,10 @@ var PMXViewer = ({
     {
       className: "flex-shrink-0 w-12 h-12 rounded border border-gray-300",
       style: {
-        backgroundColor: `rgba(${material.diffuse[0] * 255}, ${material.diffuse[1] * 255}, ${material.diffuse[2] * 255}, ${material.diffuse[3]})`
+        backgroundColor: "rgba(" + material.diffuse[0] * 255 + ", " + material.diffuse[1] * 255 + ", " + material.diffuse[2] * 255 + ", " + material.diffuse[3] + ")"
       }
     }
-  ), /* @__PURE__ */ React10.createElement("div", { className: "flex-1" }, /* @__PURE__ */ React10.createElement("p", { className: "font-medium text-gray-900" }, material.name || `\u6750\u8D28 #${index}`), material.nameEnglish && /* @__PURE__ */ React10.createElement("p", { className: "text-sm text-gray-600" }, material.nameEnglish), /* @__PURE__ */ React10.createElement("div", { className: "mt-2 flex flex-wrap gap-2 text-xs" }, /* @__PURE__ */ React10.createElement("span", { className: "bg-blue-100 text-blue-700 px-2 py-1 rounded" }, "\u9762\u6570: ", material.surfaceCount / 3), material.textureIndex >= 0 && /* @__PURE__ */ React10.createElement("span", { className: "bg-green-100 text-green-700 px-2 py-1 rounded" }, "\u7EB9\u7406: #", material.textureIndex), material.sphereTextureIndex >= 0 && /* @__PURE__ */ React10.createElement("span", { className: "bg-purple-100 text-purple-700 px-2 py-1 rounded" }, "Sphere: #", material.sphereTextureIndex), material.toonTextureIndex >= 0 && /* @__PURE__ */ React10.createElement("span", { className: "bg-orange-100 text-orange-700 px-2 py-1 rounded" }, "Toon: ", material.isSharedToon ? `\u5171\u4EAB#${material.toonTextureIndex}` : `#${material.toonTextureIndex}`)))))))), activeTab === "mappings" && /* @__PURE__ */ React10.createElement("div", { className: "bg-white rounded-lg shadow" }, /* @__PURE__ */ React10.createElement("div", { className: "p-4 border-b border-gray-200" }, /* @__PURE__ */ React10.createElement("h3", { className: "text-lg font-semibold" }, "\u6750\u8D28-\u7EB9\u7406\u6620\u5C04\u5173\u7CFB (", materialTextureMappings.length, ")")), /* @__PURE__ */ React10.createElement("div", { className: "divide-y divide-gray-200" }, materialTextureMappings.map((mapping) => /* @__PURE__ */ React10.createElement("div", { key: mapping.materialIndex, className: "p-4 hover:bg-gray-50" }, /* @__PURE__ */ React10.createElement("div", { className: "mb-3" }, /* @__PURE__ */ React10.createElement("h4", { className: "font-semibold text-gray-900" }, "\u6750\u8D28 #", mapping.materialIndex, ": ", mapping.materialName), mapping.materialNameEnglish && /* @__PURE__ */ React10.createElement("p", { className: "text-sm text-gray-600" }, mapping.materialNameEnglish)), /* @__PURE__ */ React10.createElement("div", { className: "space-y-3 pl-4 border-l-2 border-gray-200" }, mapping.mainTexture && /* @__PURE__ */ React10.createElement("div", null, /* @__PURE__ */ React10.createElement("p", { className: "text-xs font-medium text-gray-700 mb-1" }, "\u{1F5BC}\uFE0F \u4E3B\u7EB9\u7406"), /* @__PURE__ */ React10.createElement("p", { className: "text-sm text-gray-900" }, mapping.mainTexture.path), /* @__PURE__ */ React10.createElement("code", { className: "text-xs bg-blue-50 text-blue-700 px-2 py-1 rounded block mt-1" }, getTextureUrl(mapping.mainTexture.path))), mapping.sphereTexture && /* @__PURE__ */ React10.createElement("div", null, /* @__PURE__ */ React10.createElement("p", { className: "text-xs font-medium text-gray-700 mb-1" }, "\u2728 Sphere\u7EB9\u7406 (", mapping.sphereTexture.mode, ")"), /* @__PURE__ */ React10.createElement("p", { className: "text-sm text-gray-900" }, mapping.sphereTexture.path), /* @__PURE__ */ React10.createElement("code", { className: "text-xs bg-purple-50 text-purple-700 px-2 py-1 rounded block mt-1" }, getTextureUrl(mapping.sphereTexture.path))), mapping.toonTexture && /* @__PURE__ */ React10.createElement("div", null, /* @__PURE__ */ React10.createElement("p", { className: "text-xs font-medium text-gray-700 mb-1" }, "\u{1F3A8} Toon\u7EB9\u7406 ", mapping.toonTexture.isShared && "(\u5171\u4EAB)"), /* @__PURE__ */ React10.createElement("p", { className: "text-sm text-gray-900" }, mapping.toonTexture.path), !mapping.toonTexture.isShared && /* @__PURE__ */ React10.createElement("code", { className: "text-xs bg-orange-50 text-orange-700 px-2 py-1 rounded block mt-1" }, getTextureUrl(mapping.toonTexture.path))), !mapping.mainTexture && !mapping.sphereTexture && !mapping.toonTexture && /* @__PURE__ */ React10.createElement("p", { className: "text-sm text-gray-500 italic" }, "\u65E0\u7EB9\u7406\u7ED1\u5B9A")))))));
+  ), /* @__PURE__ */ React10.createElement("div", { className: "flex-1" }, /* @__PURE__ */ React10.createElement("p", { className: "font-medium text-gray-900" }, material.name || "\u6750\u8D28 #" + index), material.nameEnglish && /* @__PURE__ */ React10.createElement("p", { className: "text-sm text-gray-600" }, material.nameEnglish), /* @__PURE__ */ React10.createElement("div", { className: "mt-2 flex flex-wrap gap-2 text-xs" }, /* @__PURE__ */ React10.createElement("span", { className: "bg-blue-100 text-blue-700 px-2 py-1 rounded" }, "\u9762\u6570: ", material.surfaceCount / 3), material.textureIndex >= 0 && /* @__PURE__ */ React10.createElement("span", { className: "bg-green-100 text-green-700 px-2 py-1 rounded" }, "\u7EB9\u7406: #", material.textureIndex), material.sphereTextureIndex >= 0 && /* @__PURE__ */ React10.createElement("span", { className: "bg-purple-100 text-purple-700 px-2 py-1 rounded" }, "Sphere: #", material.sphereTextureIndex), material.toonTextureIndex >= 0 && /* @__PURE__ */ React10.createElement("span", { className: "bg-orange-100 text-orange-700 px-2 py-1 rounded" }, "Toon: ", material.isSharedToon ? "\u5171\u4EAB#" + material.toonTextureIndex : "#" + material.toonTextureIndex)))))))), activeTab === "mappings" && /* @__PURE__ */ React10.createElement("div", { className: "bg-white rounded-lg shadow" }, /* @__PURE__ */ React10.createElement("div", { className: "p-4 border-b border-gray-200" }, /* @__PURE__ */ React10.createElement("h3", { className: "text-lg font-semibold" }, "\u6750\u8D28-\u7EB9\u7406\u6620\u5C04\u5173\u7CFB (", materialTextureMappings.length, ")")), /* @__PURE__ */ React10.createElement("div", { className: "divide-y divide-gray-200" }, materialTextureMappings.map((mapping) => /* @__PURE__ */ React10.createElement("div", { key: mapping.materialIndex, className: "p-4 hover:bg-gray-50" }, /* @__PURE__ */ React10.createElement("div", { className: "mb-3" }, /* @__PURE__ */ React10.createElement("h4", { className: "font-semibold text-gray-900" }, "\u6750\u8D28 #", mapping.materialIndex, ": ", mapping.materialName), mapping.materialNameEnglish && /* @__PURE__ */ React10.createElement("p", { className: "text-sm text-gray-600" }, mapping.materialNameEnglish)), /* @__PURE__ */ React10.createElement("div", { className: "space-y-3 pl-4 border-l-2 border-gray-200" }, mapping.mainTexture && /* @__PURE__ */ React10.createElement("div", null, /* @__PURE__ */ React10.createElement("p", { className: "text-xs font-medium text-gray-700 mb-1" }, "\u{1F5BC}\uFE0F \u4E3B\u7EB9\u7406"), /* @__PURE__ */ React10.createElement("p", { className: "text-sm text-gray-900" }, mapping.mainTexture.path), /* @__PURE__ */ React10.createElement("code", { className: "text-xs bg-blue-50 text-blue-700 px-2 py-1 rounded block mt-1" }, getTextureUrl(mapping.mainTexture.path))), mapping.sphereTexture && /* @__PURE__ */ React10.createElement("div", null, /* @__PURE__ */ React10.createElement("p", { className: "text-xs font-medium text-gray-700 mb-1" }, "\u2728 Sphere\u7EB9\u7406 (", mapping.sphereTexture.mode, ")"), /* @__PURE__ */ React10.createElement("p", { className: "text-sm text-gray-900" }, mapping.sphereTexture.path), /* @__PURE__ */ React10.createElement("code", { className: "text-xs bg-purple-50 text-purple-700 px-2 py-1 rounded block mt-1" }, getTextureUrl(mapping.sphereTexture.path))), mapping.toonTexture && /* @__PURE__ */ React10.createElement("div", null, /* @__PURE__ */ React10.createElement("p", { className: "text-xs font-medium text-gray-700 mb-1" }, "\u{1F3A8} Toon\u7EB9\u7406 ", mapping.toonTexture.isShared && "(\u5171\u4EAB)"), /* @__PURE__ */ React10.createElement("p", { className: "text-sm text-gray-900" }, mapping.toonTexture.path), !mapping.toonTexture.isShared && /* @__PURE__ */ React10.createElement("code", { className: "text-xs bg-orange-50 text-orange-700 px-2 py-1 rounded block mt-1" }, getTextureUrl(mapping.toonTexture.path))), !mapping.mainTexture && !mapping.sphereTexture && !mapping.toonTexture && /* @__PURE__ */ React10.createElement("p", { className: "text-sm text-gray-500 italic" }, "\u65E0\u7EB9\u7406\u7ED1\u5B9A")))))));
 };
 
 // src/mmd/utils/ammo-loader.ts
@@ -838,7 +839,7 @@ var loadAmmo = (path = "/libs/ammo.wasm.js") => {
     };
     script.onerror = (err) => {
       console.error("Failed to load Ammo.js script:", err);
-      reject(new Error(`Failed to load Ammo.js from ${path}`));
+      reject(new Error("Failed to load Ammo.js from " + path));
     };
     document.body.appendChild(script);
   });
@@ -885,7 +886,7 @@ function configureMaterialsForMMD(mesh, config = {}) {
       });
     }
   });
-  console.log(`[MMD Material Config] Processed ${materialCount} materials (Toon: ${toonMaterialCount}, Phong: ${phongMaterialCount})`);
+  console.log("[MMD Material Config] Processed " + materialCount + " materials (Toon: " + toonMaterialCount + ", Phong: " + phongMaterialCount + ")");
 }
 function createGradientMap() {
   const colors = new Uint8Array(5);
@@ -953,9 +954,9 @@ function configureRendererForMMD(renderer, options = {}) {
     renderer.shadowMap.type = THREE2.PCFSoftShadowMap;
   }
   console.log("[MMD Renderer] Configured for MMD-style rendering");
-  console.log(`  - Tone Mapping: ${toneMapping === THREE2.LinearToneMapping ? "Linear" : "Custom"}`);
+  console.log("  - Tone Mapping: " + (toneMapping === THREE2.LinearToneMapping ? "Linear" : "Custom"));
   console.log(`  - Color Space: sRGB`);
-  console.log(`  - Shadow: ${enableShadow ? "Enabled (PCF Soft)" : "Disabled"}`);
+  console.log("  - Shadow: " + (enableShadow ? "Enabled (PCF Soft)" : "Disabled"));
   return renderer;
 }
 function generateToonTexture(index) {
@@ -965,8 +966,8 @@ function generateToonTexture(index) {
   const ctx = canvas.getContext("2d");
   const gradient = ctx.createLinearGradient(0, 0, 256, 0);
   const brightness = 1 - (index - 1) / 9;
-  gradient.addColorStop(0, `rgb(${255 * brightness}, ${255 * brightness}, ${255 * brightness})`);
-  gradient.addColorStop(1, `rgb(${128 * brightness}, ${128 * brightness}, ${128 * brightness})`);
+  gradient.addColorStop(0, "rgb(" + 255 * brightness + ", " + 255 * brightness + ", " + 255 * brightness + ")");
+  gradient.addColorStop(1, "rgb(" + 128 * brightness + ", " + 128 * brightness + ", " + 128 * brightness + ")");
   ctx.fillStyle = gradient;
   ctx.fillRect(0, 0, 256, 1);
   return canvas;
@@ -1041,7 +1042,7 @@ async function waitForMaterialsReady(object, renderer, scene, camera) {
             resolve();
           };
           const onError = (e) => {
-            console.warn(`[MMDPlayerBase]   Texture ${index + 1}/${textures.length}: Failed to load`, e);
+            console.warn("[MMDPlayerBase]   Texture " + (index + 1) + "/" + textures.length + ": Failed to load", e);
             image.removeEventListener("load", onLoad);
             image.removeEventListener("error", onError);
             resolve();
@@ -1051,7 +1052,7 @@ async function waitForMaterialsReady(object, renderer, scene, camera) {
           setTimeout(() => {
             image.removeEventListener("load", onLoad);
             image.removeEventListener("error", onError);
-            console.warn(`[MMDPlayerBase]   Texture ${index + 1}/${textures.length}: Timeout`);
+            console.warn("[MMDPlayerBase]   Texture " + (index + 1) + "/" + textures.length + ": Timeout");
             resolve();
           }, 5e3);
         }
@@ -1513,7 +1514,7 @@ var MMDPlayerBase = forwardRef((props, ref) => {
           if (mesh.skeleton) {
             const boneCount = mesh.skeleton.bones.length;
             if (boneCount > MAX_BONES) {
-              console.warn(`[MMDPlayerBase]   \u26A0\uFE0F Model has ${boneCount} bones (max recommended: ${MAX_BONES})`);
+              console.warn("[MMDPlayerBase]   \u26A0\uFE0F Model has " + boneCount + " bones (max recommended: " + MAX_BONES + ")");
               console.warn(`[MMDPlayerBase]   This may cause performance issues on mobile devices`);
             }
           }
@@ -1542,14 +1543,14 @@ var MMDPlayerBase = forwardRef((props, ref) => {
                 (xhr) => {
                   if (xhr.lengthComputable) {
                     const percent = xhr.loaded / xhr.total * 100;
-                    if (Math.round(percent) % 20 === 0) console.log(`[MMDPlayerBase] Stage loading: ${percent.toFixed(1)}%`);
+                    if (Math.round(percent) % 20 === 0) console.log("[MMDPlayerBase] Stage loading: " + percent.toFixed(1) + "%");
                   }
                 },
                 (err) => reject(err)
               );
             });
             if (checkCancelled()) return;
-            console.log(`[MMDPlayerBase] Stage model loaded: ${stagePath}`, stageMesh);
+            console.log("[MMDPlayerBase] Stage model loaded: " + stagePath, stageMesh);
             console.log("[MMDPlayerBase] \u{1F3A8} Traversing stage mesh to apply FX, multiFX:", !!multiFXAdapterRef.current, "singleFX:", !!fxAdapterRef.current);
             let stageMaterialCount = 0;
             stageMesh.traverse((child) => {
@@ -1592,7 +1593,7 @@ var MMDPlayerBase = forwardRef((props, ref) => {
             try {
               await waitForMaterialsReady(stageMesh, renderer, scene, camera);
             } catch (e) {
-              console.warn(`[MMDPlayerBase] Warmup error for stage ${stagePath}:`, e);
+              console.warn("[MMDPlayerBase] Warmup error for stage " + stagePath + ":", e);
             }
             if (checkCancelled()) return;
             scene.add(stageMesh);
@@ -1609,7 +1610,7 @@ var MMDPlayerBase = forwardRef((props, ref) => {
               });
             }
           } catch (err) {
-            console.error(`Failed to load stage ${stagePath}:`, err);
+            console.error("Failed to load stage " + stagePath + ":", err);
           }
         }
         if (checkCancelled()) return;
@@ -1632,7 +1633,7 @@ var MMDPlayerBase = forwardRef((props, ref) => {
           const hours = Math.floor(runningTime / 36e5);
           const minutes = Math.floor(runningTime % 36e5 / 6e4);
           const seconds = Math.floor(runningTime % 6e4 / 1e3);
-          const timeString = hours > 0 ? `${hours}\u5C0F\u65F6${minutes}\u5206${seconds}\u79D2` : minutes > 0 ? `${minutes}\u5206${seconds}\u79D2` : `${seconds}\u79D2`;
+          const timeString = hours > 0 ? hours + "\u5C0F\u65F6" + minutes + "\u5206" + seconds + "\u79D2" : minutes > 0 ? minutes + "\u5206" + seconds + "\u79D2" : seconds + "\u79D2";
           alert(`\u26A0\uFE0F \u5185\u5B58\u6EA2\u51FA\u9519\u8BEF (OOM)
 
 \u{1F4CA} \u7CFB\u7EDF\u8FD0\u884C\u7EDF\u8BA1\uFF1A
@@ -1715,7 +1716,7 @@ ${errorMessage}
                               physics.world.removeRigidBody(body.body);
                             }
                           } catch (e) {
-                            console.warn(`[MMDPlayerBase]     Error removing body ${i}:`, e);
+                            console.warn("[MMDPlayerBase]     Error removing body " + i + ":", e);
                           }
                         }
                         physics.bodies.length = 0;
@@ -1728,7 +1729,7 @@ ${errorMessage}
                               physics.world.removeConstraint(constraint);
                             }
                           } catch (e) {
-                            console.warn(`[MMDPlayerBase]     Error removing constraint ${i}:`, e);
+                            console.warn("[MMDPlayerBase]     Error removing constraint " + i + ":", e);
                           }
                         }
                         physics.constraints.length = 0;
@@ -1775,7 +1776,7 @@ ${errorMessage}
                 try {
                   Ammo2.destroy(components.worlds[i]);
                 } catch (e) {
-                  console.error(`[MMDPlayerBase]   \u274C Error destroying world #${i}:`, e);
+                  console.error("[MMDPlayerBase]   \u274C Error destroying world #" + i + ":", e);
                 }
               }
               components.worlds.length = 0;
@@ -1785,7 +1786,7 @@ ${errorMessage}
                 try {
                   Ammo2.destroy(components.solvers[i]);
                 } catch (e) {
-                  console.error(`[MMDPlayerBase]   \u274C Error destroying solver #${i}:`, e);
+                  console.error("[MMDPlayerBase]   \u274C Error destroying solver #" + i + ":", e);
                 }
               }
               components.solvers.length = 0;
@@ -1795,7 +1796,7 @@ ${errorMessage}
                 try {
                   Ammo2.destroy(components.caches[i]);
                 } catch (e) {
-                  console.error(`[MMDPlayerBase]   \u274C Error destroying cache #${i}:`, e);
+                  console.error("[MMDPlayerBase]   \u274C Error destroying cache #" + i + ":", e);
                 }
               }
               components.caches.length = 0;
@@ -1805,7 +1806,7 @@ ${errorMessage}
                 try {
                   Ammo2.destroy(components.dispatchers[i]);
                 } catch (e) {
-                  console.error(`[MMDPlayerBase]   \u274C Error destroying dispatcher #${i}:`, e);
+                  console.error("[MMDPlayerBase]   \u274C Error destroying dispatcher #" + i + ":", e);
                 }
               }
               components.dispatchers.length = 0;
@@ -1815,7 +1816,7 @@ ${errorMessage}
                 try {
                   Ammo2.destroy(components.configs[i]);
                 } catch (e) {
-                  console.error(`[MMDPlayerBase]   \u274C Error destroying config #${i}:`, e);
+                  console.error("[MMDPlayerBase]   \u274C Error destroying config #" + i + ":", e);
                 }
               }
               components.configs.length = 0;
@@ -2212,7 +2213,7 @@ var ControlPanel = ({
     "button",
     {
       onClick: onToggleListLoop,
-      className: `rounded-full p-2 transition-colors ${isListLooping ? "bg-green-500/30 hover:bg-green-500/50" : "hover:bg-white/20"}`,
+      className: clsx("rounded-full p-2 transition-colors", isListLooping ? "bg-green-500/30 hover:bg-green-500/50" : "hover:bg-white/20"),
       title: isListLooping ? "\u5217\u8868\u5FAA\u73AF\uFF1A\u5F00\u542F" : "\u5217\u8868\u5FAA\u73AF\uFF1A\u5173\u95ED"
     },
     /* @__PURE__ */ React10.createElement(Repeat, { size: 20 })
@@ -2220,7 +2221,7 @@ var ControlPanel = ({
     "button",
     {
       onClick: onToggleLoop,
-      className: `rounded-full p-2 transition-colors ${isLooping ? "bg-blue-500/30 hover:bg-blue-500/50" : "hover:bg-white/20"}`,
+      className: clsx("rounded-full p-2 transition-colors", isLooping ? "bg-blue-500/30 hover:bg-blue-500/50" : "hover:bg-white/20"),
       title: isLooping ? "\u5355\u66F2\u5FAA\u73AF\uFF1A\u5F00\u542F" : "\u5355\u66F2\u5FAA\u73AF\uFF1A\u5173\u95ED"
     },
     /* @__PURE__ */ React10.createElement(Repeat1, { size: 20 })
@@ -2236,7 +2237,7 @@ var ControlPanel = ({
     "button",
     {
       onClick: onToggleAxes,
-      className: `rounded-full p-2 transition-colors ${showAxes ? "bg-blue-500/30 hover:bg-blue-500/50" : "hover:bg-white/20"}`,
+      className: clsx("rounded-full p-2 transition-colors", showAxes ? "bg-blue-500/30 hover:bg-blue-500/50" : "hover:bg-white/20"),
       title: "\u663E\u793A/\u9690\u85CF\u5750\u6807\u8F74"
     },
     /* @__PURE__ */ React10.createElement(Grid3x3, { size: 20 })
@@ -2275,10 +2276,10 @@ var SettingsPanel = ({
       {
         key: item.id,
         onClick: () => onSelectId?.(item.id),
-        className: `group flex items-center gap-3 rounded-lg p-3 transition-all ${currentId === item.id ? "bg-blue-500/20 ring-1 ring-blue-500" : "bg-white/5 hover:bg-white/10"}`
+        className: clsx("group flex items-center gap-3 rounded-lg p-3 transition-all", currentId === item.id ? "bg-blue-500/20 ring-1 ring-blue-500" : "bg-white/5 hover:bg-white/10")
       },
       /* @__PURE__ */ React10.createElement("div", { className: "flex h-12 w-12 flex-shrink-0 items-center justify-center rounded bg-black/20 overflow-hidden" }, item.thumbnail ? /* @__PURE__ */ React10.createElement("img", { src: item.thumbnail, alt: item.name, className: "h-full w-full object-cover" }) : /* @__PURE__ */ React10.createElement(Video, { size: 20, className: "opacity-50" })),
-      /* @__PURE__ */ React10.createElement("div", { className: "flex-1 text-left" }, /* @__PURE__ */ React10.createElement("div", { className: `font-medium ${currentId === item.id ? "text-blue-400" : "text-white"}` }, item.name), item.description && /* @__PURE__ */ React10.createElement("div", { className: "text-xs text-white/50 truncate" }, item.description)),
+      /* @__PURE__ */ React10.createElement("div", { className: "flex-1 text-left" }, /* @__PURE__ */ React10.createElement("div", { className: clsx("font-medium", currentId === item.id ? "text-blue-400" : "text-white") }, item.name), item.description && /* @__PURE__ */ React10.createElement("div", { className: "text-xs text-white/50 truncate" }, item.description)),
       currentId === item.id && /* @__PURE__ */ React10.createElement(Check, { size: 16, className: "text-blue-400" })
     )));
   };
@@ -2289,10 +2290,10 @@ var SettingsPanel = ({
       {
         key: opt.id,
         onClick: () => onSelectOption?.(type, opt.id),
-        className: `relative flex flex-col items-center gap-2 rounded-lg p-2 text-center transition-all ${currentVal === opt.id ? "bg-blue-500/20 ring-1 ring-blue-500" : "bg-white/5 hover:bg-white/10"}`
+        className: clsx("relative flex flex-col items-center gap-2 rounded-lg p-2 text-center transition-all", currentVal === opt.id ? "bg-blue-500/20 ring-1 ring-blue-500" : "bg-white/5 hover:bg-white/10")
       },
       opt.thumbnail ? /* @__PURE__ */ React10.createElement("img", { src: opt.thumbnail, alt: opt.name, className: "h-16 w-full rounded object-cover bg-black/20" }) : /* @__PURE__ */ React10.createElement("div", { className: "flex h-16 w-full items-center justify-center rounded bg-black/20" }, /* @__PURE__ */ React10.createElement("div", { className: "text-xs opacity-30" }, opt.name.slice(0, 2))),
-      /* @__PURE__ */ React10.createElement("div", { className: `w-full truncate text-xs ${currentVal === opt.id ? "text-blue-400" : "text-white/80"}` }, opt.name),
+      /* @__PURE__ */ React10.createElement("div", { className: clsx("w-full truncate text-xs", currentVal === opt.id ? "text-blue-400" : "text-white/80") }, opt.name),
       currentVal === opt.id && /* @__PURE__ */ React10.createElement("div", { className: "absolute top-1 right-1 rounded-full bg-blue-500 p-0.5" }, /* @__PURE__ */ React10.createElement(Check, { size: 10, className: "text-white" }))
     ))));
   };
@@ -2335,9 +2336,9 @@ var MMDPlayerEnhancedDebugInfo = ({
   return /* @__PURE__ */ React10.createElement("div", { className: "text-white text-xs font-mono" }, /* @__PURE__ */ React10.createElement("h3", { className: "text-sm font-bold mb-3 pb-2 border-b border-gray-700" }, "\u{1F3AE} MMDPlayerEnhanced Debug"), /* @__PURE__ */ React10.createElement("div", { className: "mb-4" }, /* @__PURE__ */ React10.createElement("h4", { className: "text-gray-400 mb-2" }, "\u64AD\u653E\u72B6\u6001"), /* @__PURE__ */ React10.createElement("div", { className: "space-y-1 pl-2" }, /* @__PURE__ */ React10.createElement("div", { className: "flex items-center justify-between" }, /* @__PURE__ */ React10.createElement("span", { className: "text-gray-400" }, "\u64AD\u653E\u4E2D:"), /* @__PURE__ */ React10.createElement(StatusBadge, { active: isPlaying, label: isPlaying ? "Playing" : "Paused" })), /* @__PURE__ */ React10.createElement("div", { className: "flex items-center justify-between" }, /* @__PURE__ */ React10.createElement("span", { className: "text-gray-400" }, "\u5FAA\u73AF:"), /* @__PURE__ */ React10.createElement(StatusBadge, { active: isLooping, label: isLooping ? "On" : "Off" })), /* @__PURE__ */ React10.createElement("div", { className: "flex items-center justify-between" }, /* @__PURE__ */ React10.createElement("span", { className: "text-gray-400" }, "\u52A0\u8F7D\u4E2D:"), /* @__PURE__ */ React10.createElement(StatusBadge, { active: isLoading, label: isLoading ? "Loading" : "Ready" })))), /* @__PURE__ */ React10.createElement("div", { className: "mb-4" }, /* @__PURE__ */ React10.createElement("h4", { className: "text-gray-400 mb-2" }, "\u89C6\u56FE\u72B6\u6001"), /* @__PURE__ */ React10.createElement("div", { className: "space-y-1 pl-2" }, /* @__PURE__ */ React10.createElement("div", { className: "flex items-center justify-between" }, /* @__PURE__ */ React10.createElement("span", { className: "text-gray-400" }, "\u5168\u5C4F:"), /* @__PURE__ */ React10.createElement(StatusBadge, { active: isFullscreen, label: isFullscreen ? "Yes" : "No" })), /* @__PURE__ */ React10.createElement("div", { className: "flex items-center justify-between" }, /* @__PURE__ */ React10.createElement("span", { className: "text-gray-400" }, "\u5750\u6807\u8F74:"), /* @__PURE__ */ React10.createElement(StatusBadge, { active: showAxes, label: showAxes ? "Show" : "Hide" })))), /* @__PURE__ */ React10.createElement("div", { className: "mb-4" }, /* @__PURE__ */ React10.createElement("h4", { className: "text-gray-400 mb-2" }, "\u8D44\u6E90\u4FE1\u606F"), /* @__PURE__ */ React10.createElement("div", { className: "space-y-1 pl-2" }, /* @__PURE__ */ React10.createElement("div", { className: "flex items-center justify-between" }, /* @__PURE__ */ React10.createElement("span", { className: "text-gray-400" }, "\u6A21\u5F0F:"), /* @__PURE__ */ React10.createElement("span", { className: "text-blue-400 uppercase" }, mode)), mode === "list" && /* @__PURE__ */ React10.createElement(React10.Fragment, null, /* @__PURE__ */ React10.createElement("div", { className: "flex items-center justify-between" }, /* @__PURE__ */ React10.createElement("span", { className: "text-gray-400" }, "\u603B\u6570:"), /* @__PURE__ */ React10.createElement("span", { className: "text-green-400" }, totalResources)), currentResourceId && /* @__PURE__ */ React10.createElement("div", { className: "mt-2 p-2 bg-gray-800 rounded" }, /* @__PURE__ */ React10.createElement("div", { className: "text-gray-400 text-[10px]" }, "\u5F53\u524D\u8D44\u6E90"), /* @__PURE__ */ React10.createElement("div", { className: "text-white truncate" }, currentResourceName || currentResourceId), /* @__PURE__ */ React10.createElement("div", { className: "text-gray-500 text-[10px] mt-1 truncate" }, "ID: ", currentResourceId))))), memoryInfo && /* @__PURE__ */ React10.createElement("div", { className: "mb-4" }, /* @__PURE__ */ React10.createElement("h4", { className: "text-gray-400 mb-2" }, "\u5185\u5B58\u76D1\u63A7 (Chrome only)"), /* @__PURE__ */ React10.createElement("div", { className: "space-y-2 p-2 bg-gray-800 rounded" }, /* @__PURE__ */ React10.createElement("div", { className: "flex items-center justify-between text-[10px]" }, /* @__PURE__ */ React10.createElement("span", { className: "text-gray-400" }, "\u5DF2\u7528:"), /* @__PURE__ */ React10.createElement("span", { className: "text-yellow-400 font-bold" }, memoryInfo.used, " MB")), /* @__PURE__ */ React10.createElement("div", { className: "flex items-center justify-between text-[10px]" }, /* @__PURE__ */ React10.createElement("span", { className: "text-gray-400" }, "\u603B\u8BA1:"), /* @__PURE__ */ React10.createElement("span", { className: "text-blue-400" }, memoryInfo.total, " MB")), /* @__PURE__ */ React10.createElement("div", { className: "flex items-center justify-between text-[10px]" }, /* @__PURE__ */ React10.createElement("span", { className: "text-gray-400" }, "\u9650\u5236:"), /* @__PURE__ */ React10.createElement("span", { className: "text-gray-400" }, memoryInfo.limit, " MB")), /* @__PURE__ */ React10.createElement("div", { className: "mt-2" }, /* @__PURE__ */ React10.createElement("div", { className: "bg-gray-700 rounded-full h-2 overflow-hidden" }, /* @__PURE__ */ React10.createElement(
     "div",
     {
-      className: `h-full transition-all duration-300 ${parseFloat(memoryInfo.used) / parseFloat(memoryInfo.limit) * 100 > 80 ? "bg-red-500" : parseFloat(memoryInfo.used) / parseFloat(memoryInfo.limit) * 100 > 60 ? "bg-yellow-500" : "bg-green-500"}`,
+      className: clsx("h-full transition-all duration-300", parseFloat(memoryInfo.used) / parseFloat(memoryInfo.limit) * 100 > 80 ? "bg-red-500" : parseFloat(memoryInfo.used) / parseFloat(memoryInfo.limit) * 100 > 60 ? "bg-yellow-500" : "bg-green-500"),
       style: {
-        width: `${Math.min(100, parseFloat(memoryInfo.used) / parseFloat(memoryInfo.limit) * 100)}%`
+        width: Math.min(100, parseFloat(memoryInfo.used) / parseFloat(memoryInfo.limit) * 100) + "%"
       }
     }
   )), /* @__PURE__ */ React10.createElement("div", { className: "text-[9px] text-gray-500 mt-1 text-center" }, (parseFloat(memoryInfo.used) / parseFloat(memoryInfo.limit) * 100).toFixed(1), "%")))), /* @__PURE__ */ React10.createElement("div", { className: "mt-auto pt-4 border-t border-gray-700" }, /* @__PURE__ */ React10.createElement("div", { className: "text-gray-500 text-[10px]" }, "Last Update: ", (/* @__PURE__ */ new Date()).toLocaleTimeString())));
@@ -2345,7 +2346,7 @@ var MMDPlayerEnhancedDebugInfo = ({
 var StatusBadge = ({ active, label }) => /* @__PURE__ */ React10.createElement(
   "span",
   {
-    className: `px-2 py-0.5 rounded text-[10px] font-bold ${active ? "bg-green-600 text-white" : "bg-gray-700 text-gray-400"}`
+    className: clsx("px-2 py-0.5 rounded text-[10px] font-bold", active ? "bg-green-600 text-white" : "bg-gray-700 text-gray-400")
   },
   label
 );
@@ -2431,7 +2432,7 @@ var MMDPlayerEnhanced = ({
     if (!containerRef.current) return;
     if (!document.fullscreenElement) {
       containerRef.current.requestFullscreen().catch((err) => {
-        console.error(`Error attempting to enable fullscreen: ${err.message}`);
+        console.error("Error attempting to enable fullscreen: " + err.message);
       });
       setIsFullscreen(true);
     } else {
@@ -2477,7 +2478,7 @@ var MMDPlayerEnhanced = ({
     "div",
     {
       ref: containerRef,
-      className: `relative overflow-hidden bg-black group flex ${className}`,
+      className: clsx("relative overflow-hidden bg-black group flex", className),
       style
     },
     /* @__PURE__ */ React10.createElement("div", { className: "flex-1 relative" }, /* @__PURE__ */ React10.createElement(
@@ -2512,7 +2513,7 @@ var MMDPlayerEnhanced = ({
         },
         ...rest
       }
-    ), isLoading && /* @__PURE__ */ React10.createElement("div", { className: "absolute inset-0 z-10 flex items-center justify-center bg-black/50 backdrop-blur-sm" }, /* @__PURE__ */ React10.createElement("div", { className: "h-10 w-10 animate-spin rounded-full border-4 border-white/20 border-t-blue-500" })), /* @__PURE__ */ React10.createElement("div", { className: `transition-opacity duration-300 ${isPlaying && !showSettings ? "opacity-0 group-hover:opacity-100" : "opacity-100"}` }, /* @__PURE__ */ React10.createElement(
+    ), isLoading && /* @__PURE__ */ React10.createElement("div", { className: "absolute inset-0 z-10 flex items-center justify-center bg-black/50 backdrop-blur-sm" }, /* @__PURE__ */ React10.createElement("div", { className: "h-10 w-10 animate-spin rounded-full border-4 border-white/20 border-t-blue-500" })), /* @__PURE__ */ React10.createElement("div", { className: clsx("transition-opacity duration-300", isPlaying && !showSettings ? "opacity-0 group-hover:opacity-100" : "opacity-100") }, /* @__PURE__ */ React10.createElement(
       ControlPanel,
       {
         isPlaying,
@@ -2582,26 +2583,26 @@ var MMDPlaylistDebugInfo = ({
     }, 1e3);
     return () => clearInterval(timer);
   }, []);
-  return /* @__PURE__ */ React10.createElement("div", { className: "text-white text-xs font-mono" }, /* @__PURE__ */ React10.createElement("h3", { className: "text-sm font-bold mb-3 pb-2 border-b border-gray-700" }, "\u{1F3AD} MMDPlaylist Debug"), /* @__PURE__ */ React10.createElement("div", { className: "mb-4" }, /* @__PURE__ */ React10.createElement("h4", { className: "text-gray-400 mb-2" }, "\u64AD\u653E\u5217\u8868"), /* @__PURE__ */ React10.createElement("div", { className: "space-y-1 pl-2" }, /* @__PURE__ */ React10.createElement("div", { className: "text-white truncate" }, playlistName), /* @__PURE__ */ React10.createElement("div", { className: "flex items-center justify-between" }, /* @__PURE__ */ React10.createElement("span", { className: "text-gray-400" }, "\u8FDB\u5EA6:"), /* @__PURE__ */ React10.createElement("span", { className: "text-blue-400" }, currentIndex + 1, " / ", totalNodes)), /* @__PURE__ */ React10.createElement("div", { className: "flex items-center justify-between" }, /* @__PURE__ */ React10.createElement("span", { className: "text-gray-400" }, "\u5217\u8868\u5FAA\u73AF:"), /* @__PURE__ */ React10.createElement(StatusBadge2, { active: isListLooping, label: isListLooping ? "On" : "Off" })))), /* @__PURE__ */ React10.createElement("div", { className: "mb-4" }, /* @__PURE__ */ React10.createElement("h4", { className: "text-gray-400 mb-2" }, "\u5F53\u524D\u8282\u70B9"), /* @__PURE__ */ React10.createElement("div", { className: "p-2 bg-gray-800 rounded space-y-1" }, /* @__PURE__ */ React10.createElement("div", { className: "text-white font-semibold truncate" }, currentNode.name), /* @__PURE__ */ React10.createElement("div", { className: "text-gray-500 text-[10px] truncate" }, "ID: ", currentNode.id), currentNode.duration && /* @__PURE__ */ React10.createElement("div", { className: "flex items-center justify-between" }, /* @__PURE__ */ React10.createElement("span", { className: "text-gray-400" }, "\u65F6\u957F:"), /* @__PURE__ */ React10.createElement("span", { className: "text-green-400" }, currentNode.duration, "s")), /* @__PURE__ */ React10.createElement("div", { className: "flex items-center justify-between" }, /* @__PURE__ */ React10.createElement("span", { className: "text-gray-400" }, "\u8282\u70B9\u5FAA\u73AF:"), /* @__PURE__ */ React10.createElement(StatusBadge2, { active: isNodeLooping, label: isNodeLooping ? "On" : "Off" })))), /* @__PURE__ */ React10.createElement("div", { className: "mb-4" }, /* @__PURE__ */ React10.createElement("h4", { className: "text-gray-400 mb-2" }, "\u64AD\u653E\u72B6\u6001"), /* @__PURE__ */ React10.createElement("div", { className: "space-y-1 pl-2" }, /* @__PURE__ */ React10.createElement("div", { className: "flex items-center justify-between" }, /* @__PURE__ */ React10.createElement("span", { className: "text-gray-400" }, "\u64AD\u653E\u4E2D:"), /* @__PURE__ */ React10.createElement(StatusBadge2, { active: isPlaying, label: isPlaying ? "Playing" : "Paused" })), /* @__PURE__ */ React10.createElement("div", { className: "flex items-center justify-between" }, /* @__PURE__ */ React10.createElement("span", { className: "text-gray-400" }, "\u52A0\u8F7D\u4E2D:"), /* @__PURE__ */ React10.createElement(StatusBadge2, { active: isLoading, label: isLoading ? "Loading" : "Ready" })))), /* @__PURE__ */ React10.createElement("div", { className: "mb-4" }, /* @__PURE__ */ React10.createElement("h4", { className: "text-gray-400 mb-2" }, "\u9884\u52A0\u8F7D\u7B56\u7565"), /* @__PURE__ */ React10.createElement("div", { className: "space-y-1 pl-2" }, /* @__PURE__ */ React10.createElement("div", { className: "flex items-center justify-between" }, /* @__PURE__ */ React10.createElement("span", { className: "text-gray-400" }, "\u7B56\u7565:"), /* @__PURE__ */ React10.createElement("span", { className: `px-2 py-0.5 rounded text-[10px] font-bold uppercase ${preloadStrategy === "all" ? "bg-red-600 text-white" : preloadStrategy === "next" ? "bg-yellow-600 text-white" : "bg-gray-700 text-gray-400"}` }, preloadStrategy)), /* @__PURE__ */ React10.createElement("div", { className: "flex items-center justify-between" }, /* @__PURE__ */ React10.createElement("span", { className: "text-gray-400" }, "\u5DF2\u9884\u52A0\u8F7D:"), /* @__PURE__ */ React10.createElement("span", { className: "text-purple-400" }, preloadedNodes.length)), preloadedNodes.length > 0 && /* @__PURE__ */ React10.createElement("div", { className: "mt-2 p-2 bg-gray-800 rounded" }, /* @__PURE__ */ React10.createElement("div", { className: "text-gray-400 text-[10px] mb-1" }, "\u9884\u52A0\u8F7D\u8282\u70B9\u7D22\u5F15"), /* @__PURE__ */ React10.createElement("div", { className: "flex flex-wrap gap-1" }, preloadedNodes.map((idx) => /* @__PURE__ */ React10.createElement(
+  return /* @__PURE__ */ React10.createElement("div", { className: "text-white text-xs font-mono" }, /* @__PURE__ */ React10.createElement("h3", { className: "text-sm font-bold mb-3 pb-2 border-b border-gray-700" }, "\u{1F3AD} MMDPlaylist Debug"), /* @__PURE__ */ React10.createElement("div", { className: "mb-4" }, /* @__PURE__ */ React10.createElement("h4", { className: "text-gray-400 mb-2" }, "\u64AD\u653E\u5217\u8868"), /* @__PURE__ */ React10.createElement("div", { className: "space-y-1 pl-2" }, /* @__PURE__ */ React10.createElement("div", { className: "text-white truncate" }, playlistName), /* @__PURE__ */ React10.createElement("div", { className: "flex items-center justify-between" }, /* @__PURE__ */ React10.createElement("span", { className: "text-gray-400" }, "\u8FDB\u5EA6:"), /* @__PURE__ */ React10.createElement("span", { className: "text-blue-400" }, currentIndex + 1, " / ", totalNodes)), /* @__PURE__ */ React10.createElement("div", { className: "flex items-center justify-between" }, /* @__PURE__ */ React10.createElement("span", { className: "text-gray-400" }, "\u5217\u8868\u5FAA\u73AF:"), /* @__PURE__ */ React10.createElement(StatusBadge2, { active: isListLooping, label: isListLooping ? "On" : "Off" })))), /* @__PURE__ */ React10.createElement("div", { className: "mb-4" }, /* @__PURE__ */ React10.createElement("h4", { className: "text-gray-400 mb-2" }, "\u5F53\u524D\u8282\u70B9"), /* @__PURE__ */ React10.createElement("div", { className: "p-2 bg-gray-800 rounded space-y-1" }, /* @__PURE__ */ React10.createElement("div", { className: "text-white font-semibold truncate" }, currentNode.name), /* @__PURE__ */ React10.createElement("div", { className: "text-gray-500 text-[10px] truncate" }, "ID: ", currentNode.id), currentNode.duration && /* @__PURE__ */ React10.createElement("div", { className: "flex items-center justify-between" }, /* @__PURE__ */ React10.createElement("span", { className: "text-gray-400" }, "\u65F6\u957F:"), /* @__PURE__ */ React10.createElement("span", { className: "text-green-400" }, currentNode.duration, "s")), /* @__PURE__ */ React10.createElement("div", { className: "flex items-center justify-between" }, /* @__PURE__ */ React10.createElement("span", { className: "text-gray-400" }, "\u8282\u70B9\u5FAA\u73AF:"), /* @__PURE__ */ React10.createElement(StatusBadge2, { active: isNodeLooping, label: isNodeLooping ? "On" : "Off" })))), /* @__PURE__ */ React10.createElement("div", { className: "mb-4" }, /* @__PURE__ */ React10.createElement("h4", { className: "text-gray-400 mb-2" }, "\u64AD\u653E\u72B6\u6001"), /* @__PURE__ */ React10.createElement("div", { className: "space-y-1 pl-2" }, /* @__PURE__ */ React10.createElement("div", { className: "flex items-center justify-between" }, /* @__PURE__ */ React10.createElement("span", { className: "text-gray-400" }, "\u64AD\u653E\u4E2D:"), /* @__PURE__ */ React10.createElement(StatusBadge2, { active: isPlaying, label: isPlaying ? "Playing" : "Paused" })), /* @__PURE__ */ React10.createElement("div", { className: "flex items-center justify-between" }, /* @__PURE__ */ React10.createElement("span", { className: "text-gray-400" }, "\u52A0\u8F7D\u4E2D:"), /* @__PURE__ */ React10.createElement(StatusBadge2, { active: isLoading, label: isLoading ? "Loading" : "Ready" })))), /* @__PURE__ */ React10.createElement("div", { className: "mb-4" }, /* @__PURE__ */ React10.createElement("h4", { className: "text-gray-400 mb-2" }, "\u9884\u52A0\u8F7D\u7B56\u7565"), /* @__PURE__ */ React10.createElement("div", { className: "space-y-1 pl-2" }, /* @__PURE__ */ React10.createElement("div", { className: "flex items-center justify-between" }, /* @__PURE__ */ React10.createElement("span", { className: "text-gray-400" }, "\u7B56\u7565:"), /* @__PURE__ */ React10.createElement("span", { className: clsx("px-2 py-0.5 rounded text-[10px] font-bold uppercase", preloadStrategy === "all" ? "bg-red-600 text-white" : preloadStrategy === "next" ? "bg-yellow-600 text-white" : "bg-gray-700 text-gray-400") }, preloadStrategy)), /* @__PURE__ */ React10.createElement("div", { className: "flex items-center justify-between" }, /* @__PURE__ */ React10.createElement("span", { className: "text-gray-400" }, "\u5DF2\u9884\u52A0\u8F7D:"), /* @__PURE__ */ React10.createElement("span", { className: "text-purple-400" }, preloadedNodes.length)), preloadedNodes.length > 0 && /* @__PURE__ */ React10.createElement("div", { className: "mt-2 p-2 bg-gray-800 rounded" }, /* @__PURE__ */ React10.createElement("div", { className: "text-gray-400 text-[10px] mb-1" }, "\u9884\u52A0\u8F7D\u8282\u70B9\u7D22\u5F15"), /* @__PURE__ */ React10.createElement("div", { className: "flex flex-wrap gap-1" }, preloadedNodes.map((idx) => /* @__PURE__ */ React10.createElement(
     "span",
     {
       key: idx,
-      className: `px-1.5 py-0.5 rounded text-[10px] ${idx === currentIndex ? "bg-green-600 text-white font-bold" : "bg-gray-700 text-gray-300"}`
+      className: clsx("px-1.5 py-0.5 rounded text-[10px]", idx === currentIndex ? "bg-green-600 text-white font-bold" : "bg-gray-700 text-gray-300")
     },
     idx
   )))))), /* @__PURE__ */ React10.createElement("div", { className: "mb-4" }, /* @__PURE__ */ React10.createElement("h4", { className: "text-gray-400 mb-2" }, "\u89C6\u56FE\u72B6\u6001"), /* @__PURE__ */ React10.createElement("div", { className: "space-y-1 pl-2" }, /* @__PURE__ */ React10.createElement("div", { className: "flex items-center justify-between" }, /* @__PURE__ */ React10.createElement("span", { className: "text-gray-400" }, "\u5168\u5C4F:"), /* @__PURE__ */ React10.createElement(StatusBadge2, { active: isFullscreen, label: isFullscreen ? "Yes" : "No" })), /* @__PURE__ */ React10.createElement("div", { className: "flex items-center justify-between" }, /* @__PURE__ */ React10.createElement("span", { className: "text-gray-400" }, "\u5750\u6807\u8F74:"), /* @__PURE__ */ React10.createElement(StatusBadge2, { active: showAxes, label: showAxes ? "Show" : "Hide" })))), memoryInfo && /* @__PURE__ */ React10.createElement("div", { className: "mb-4" }, /* @__PURE__ */ React10.createElement("h4", { className: "text-gray-400 mb-2" }, "\u5185\u5B58\u76D1\u63A7 (Chrome only)"), /* @__PURE__ */ React10.createElement("div", { className: "space-y-2 p-2 bg-gray-800 rounded" }, /* @__PURE__ */ React10.createElement("div", { className: "flex items-center justify-between text-[10px]" }, /* @__PURE__ */ React10.createElement("span", { className: "text-gray-400" }, "\u5DF2\u7528:"), /* @__PURE__ */ React10.createElement("span", { className: "text-yellow-400 font-bold" }, memoryInfo.used, " MB")), /* @__PURE__ */ React10.createElement("div", { className: "flex items-center justify-between text-[10px]" }, /* @__PURE__ */ React10.createElement("span", { className: "text-gray-400" }, "\u603B\u8BA1:"), /* @__PURE__ */ React10.createElement("span", { className: "text-blue-400" }, memoryInfo.total, " MB")), /* @__PURE__ */ React10.createElement("div", { className: "flex items-center justify-between text-[10px]" }, /* @__PURE__ */ React10.createElement("span", { className: "text-gray-400" }, "\u9650\u5236:"), /* @__PURE__ */ React10.createElement("span", { className: "text-gray-400" }, memoryInfo.limit, " MB")), /* @__PURE__ */ React10.createElement("div", { className: "mt-2" }, /* @__PURE__ */ React10.createElement("div", { className: "bg-gray-700 rounded-full h-2 overflow-hidden" }, /* @__PURE__ */ React10.createElement(
     "div",
     {
-      className: `h-full transition-all duration-300 ${parseFloat(memoryInfo.used) / parseFloat(memoryInfo.limit) * 100 > 80 ? "bg-red-500" : parseFloat(memoryInfo.used) / parseFloat(memoryInfo.limit) * 100 > 60 ? "bg-yellow-500" : "bg-green-500"}`,
+      className: clsx("h-full transition-all duration-300", parseFloat(memoryInfo.used) / parseFloat(memoryInfo.limit) * 100 > 80 ? "bg-red-500" : parseFloat(memoryInfo.used) / parseFloat(memoryInfo.limit) * 100 > 60 ? "bg-yellow-500" : "bg-green-500"),
       style: {
-        width: `${Math.min(100, parseFloat(memoryInfo.used) / parseFloat(memoryInfo.limit) * 100)}%`
+        width: Math.min(100, parseFloat(memoryInfo.used) / parseFloat(memoryInfo.limit) * 100) + "%"
       }
     }
   )), /* @__PURE__ */ React10.createElement("div", { className: "text-[9px] text-gray-500 mt-1 text-center" }, (parseFloat(memoryInfo.used) / parseFloat(memoryInfo.limit) * 100).toFixed(1), "%")))), /* @__PURE__ */ React10.createElement("div", { className: "mb-4" }, /* @__PURE__ */ React10.createElement("h4", { className: "text-gray-400 mb-2" }, "\u8282\u70B9\u5217\u8868"), /* @__PURE__ */ React10.createElement("div", { className: "space-y-1 max-h-40 overflow-y-auto" }, Array.from({ length: totalNodes }).map((_, idx) => /* @__PURE__ */ React10.createElement(
     "div",
     {
       key: idx,
-      className: `px-2 py-1 rounded text-[10px] flex items-center justify-between ${idx === currentIndex ? "bg-blue-600 text-white font-bold" : preloadedNodes.includes(idx) ? "bg-yellow-900/50 text-yellow-300" : "bg-gray-800 text-gray-400"}`
+      className: clsx("px-2 py-1 rounded text-[10px] flex items-center justify-between", idx === currentIndex ? "bg-blue-600 text-white font-bold" : preloadedNodes.includes(idx) ? "bg-yellow-900/50 text-yellow-300" : "bg-gray-800 text-gray-400")
     },
     /* @__PURE__ */ React10.createElement("span", null, "\u8282\u70B9 ", idx),
     idx === currentIndex && /* @__PURE__ */ React10.createElement("span", null, "\u25B6"),
@@ -2611,12 +2612,10 @@ var MMDPlaylistDebugInfo = ({
 var StatusBadge2 = ({ active, label }) => /* @__PURE__ */ React10.createElement(
   "span",
   {
-    className: `px-2 py-0.5 rounded text-[10px] font-bold ${active ? "bg-green-600 text-white" : "bg-gray-700 text-gray-400"}`
+    className: clsx("px-2 py-0.5 rounded text-[10px] font-bold", active ? "bg-green-600 text-white" : "bg-gray-700 text-gray-400")
   },
   label
 );
-
-// src/mmd/components/MMDPlaylist.tsx
 var MMDPlaylist = ({
   playlist,
   stage,
@@ -2649,14 +2648,14 @@ var MMDPlaylist = ({
       if (isTransitioning) return;
       const node = nodes[index];
       if (!node) return;
-      console.log(`[MMDPlaylist] Starting transition to node ${index}`);
+      console.log("[MMDPlaylist] Starting transition to node " + index);
       const wasPlaying = isPlaying;
       setIsPlaying(false);
       setIsTransitioning(true);
       requestAnimationFrame(() => {
         requestAnimationFrame(() => {
           setTimeout(() => {
-            console.log(`[MMDPlaylist] Loading new node ${index}`);
+            console.log("[MMDPlaylist] Loading new node " + index);
             setCurrentIndex(index);
             setIsLoading(true);
             onNodeChange?.(node, index);
@@ -2667,7 +2666,7 @@ var MMDPlaylist = ({
                   if (wasPlaying) {
                     setIsPlaying(true);
                   }
-                  console.log(`[MMDPlaylist] Transition to node ${index} completed`);
+                  console.log("[MMDPlaylist] Transition to node " + index + " completed");
                 }, 100);
               });
             });
@@ -2709,7 +2708,7 @@ var MMDPlaylist = ({
     if (!containerRef.current) return;
     if (!document.fullscreenElement) {
       containerRef.current.requestFullscreen().catch((err) => {
-        console.error(`Error attempting to enable fullscreen: ${err.message}`);
+        console.error("Error attempting to enable fullscreen: " + err.message);
       });
       setIsFullscreen(true);
     } else {
@@ -2737,7 +2736,7 @@ var MMDPlaylist = ({
       nodes.forEach((node, idx) => {
         if (!preloadedRef.current.has(idx)) {
           preloadedRef.current.add(idx);
-          console.log(`[MMDPlaylist] Preload strategy: all - marked node ${idx} (${node.name})`);
+          console.log("[MMDPlaylist] Preload strategy: all - marked node " + idx + " (" + node.name + ")");
         }
       });
     } else if (preload === "next") {
@@ -2745,7 +2744,7 @@ var MMDPlaylist = ({
       const nextNode = nodes[nextIndex];
       if (nextNode && !preloadedRef.current.has(nextIndex)) {
         preloadedRef.current.add(nextIndex);
-        console.log(`[MMDPlaylist] Preload strategy: next - marked node ${nextIndex} (${nextNode.name})`);
+        console.log("[MMDPlaylist] Preload strategy: next - marked node " + nextIndex + " (" + nextNode.name + ")");
       }
     }
   }, [currentIndex, nodes, preload]);
@@ -2763,7 +2762,7 @@ var MMDPlaylist = ({
     if (toRemove.length > 0) {
       toRemove.forEach((idx) => {
         preloadedRef.current.delete(idx);
-        console.log(`[MMDPlaylist] Memory cleanup: removed preload mark for node ${idx}`);
+        console.log("[MMDPlaylist] Memory cleanup: removed preload mark for node " + idx);
       });
     }
   }, [currentIndex, nodes.length, preload]);
@@ -2781,7 +2780,7 @@ var MMDPlaylist = ({
     "div",
     {
       ref: containerRef,
-      className: `relative overflow-hidden bg-black group flex h-full ${className}`,
+      className: clsx("relative overflow-hidden bg-black group flex h-full", className),
       style
     },
     /* @__PURE__ */ React10.createElement("div", { className: "flex-1 relative" }, !isTransitioning && /* @__PURE__ */ React10.createElement(
@@ -2807,10 +2806,10 @@ var MMDPlaylist = ({
         onEnded: handleEnded,
         onError
       }
-    ), (isLoading || isTransitioning) && /* @__PURE__ */ React10.createElement("div", { className: "absolute inset-0 z-10 flex items-center justify-center bg-black/50 backdrop-blur-sm" }, /* @__PURE__ */ React10.createElement("div", { className: "flex flex-col items-center gap-3" }, /* @__PURE__ */ React10.createElement("div", { className: "h-10 w-10 animate-spin rounded-full border-4 border-white/20 border-t-blue-500" }), /* @__PURE__ */ React10.createElement("div", { className: "text-sm text-white/80" }, isTransitioning ? "\u5207\u6362\u4E2D..." : `\u6B63\u5728\u52A0\u8F7D ${currentIndex + 1} / ${nodes.length}`))), /* @__PURE__ */ React10.createElement(
+    ), (isLoading || isTransitioning) && /* @__PURE__ */ React10.createElement("div", { className: "absolute inset-0 z-10 flex items-center justify-center bg-black/50 backdrop-blur-sm" }, /* @__PURE__ */ React10.createElement("div", { className: "flex flex-col items-center gap-3" }, /* @__PURE__ */ React10.createElement("div", { className: "h-10 w-10 animate-spin rounded-full border-4 border-white/20 border-t-blue-500" }), /* @__PURE__ */ React10.createElement("div", { className: "text-sm text-white/80" }, isTransitioning ? "\u5207\u6362\u4E2D..." : "\u6B63\u5728\u52A0\u8F7D " + (currentIndex + 1) + " / " + nodes.length))), /* @__PURE__ */ React10.createElement(
       "div",
       {
-        className: `transition-opacity duration-300 ${isPlaying && !showPlaylist ? "opacity-0 group-hover:opacity-100" : "opacity-100"}`
+        className: clsx("transition-opacity duration-300", isPlaying && !showPlaylist ? "opacity-0 group-hover:opacity-100" : "opacity-100")
       },
       /* @__PURE__ */ React10.createElement(
         ControlPanel,
@@ -2824,7 +2823,7 @@ var MMDPlaylist = ({
           showAxes,
           showPrevNext,
           title: currentNode.name,
-          subtitle: `${currentIndex + 1} / ${nodes.length}`,
+          subtitle: currentIndex + 1 + " / " + nodes.length,
           onPlayPause: handlePlayPause,
           onPrevious: handlePrevious,
           onNext: handleNext,
@@ -2855,12 +2854,12 @@ var MMDPlaylist = ({
           goToNode(index);
           setShowPlaylist(false);
         },
-        className: `w-full flex items-center gap-3 p-3 rounded-lg mb-2 transition-all ${index === currentIndex ? "bg-blue-600 text-white" : "bg-gray-800 text-gray-300 hover:bg-gray-700"}`
+        className: clsx("w-full flex items-center gap-3 p-3 rounded-lg mb-2 transition-all", index === currentIndex ? "bg-blue-600 text-white" : "bg-gray-800 text-gray-300 hover:bg-gray-700")
       },
       /* @__PURE__ */ React10.createElement(
         "div",
         {
-          className: `flex-shrink-0 w-8 h-8 rounded-full flex items-center justify-center text-sm font-semibold ${index === currentIndex ? "bg-white/20" : "bg-gray-700"}`
+          className: clsx("flex-shrink-0 w-8 h-8 rounded-full flex items-center justify-center text-sm font-semibold", index === currentIndex ? "bg-white/20" : "bg-gray-700")
         },
         index + 1
       ),
@@ -3042,7 +3041,7 @@ var MMDLightingDebugPanel = ({
   return /* @__PURE__ */ React10.createElement(React10.Fragment, null, /* @__PURE__ */ React10.createElement(
     "div",
     {
-      className: `fixed top-0 ${positionClass} z-[9999] w-80 h-screen bg-white/95 backdrop-blur-md shadow-2xl overflow-y-auto transition-transform duration-300 ${translateClass} ${className}`
+      className: clsx("fixed top-0", positionClass, "z-[9999] w-80 h-screen bg-white/95 backdrop-blur-md shadow-2xl overflow-y-auto transition-transform duration-300", translateClass, className)
     },
     /* @__PURE__ */ React10.createElement("div", { className: "p-4" }, /* @__PURE__ */ React10.createElement("div", { className: "flex items-center justify-between mb-4" }, /* @__PURE__ */ React10.createElement("h2", { className: "text-lg font-bold text-gray-900" }, "\u{1F3A8} \u5149\u7167\u8C03\u8BD5"), /* @__PURE__ */ React10.createElement(
       "button",
@@ -3407,7 +3406,7 @@ var MMDLightingDebugPanel = ({
     "button",
     {
       onClick: () => setShowPanel(true),
-      className: `fixed top-4 ${position === "right" ? "right-4" : "left-4"} z-[9999] px-4 py-2 bg-blue-500 text-white rounded-lg shadow-lg hover:bg-blue-600 text-sm transition-colors`,
+      className: clsx("fixed top-4", position === "right" ? "right-4" : "left-4", "z-[9999] px-4 py-2 bg-blue-500 text-white rounded-lg shadow-lg hover:bg-blue-600 text-sm transition-colors"),
       "aria-label": "\u6253\u5F00\u8C03\u8BD5\u9762\u677F"
     },
     "\u{1F3A8} \u5149\u7167\u8C03\u8BD5"
@@ -3485,18 +3484,18 @@ function printDiagnosticReport(report) {
   console.log("\u{1F50D} MMD\u6E32\u67D3\u8BCA\u65AD\u62A5\u544A");
   console.log("=".repeat(60));
   console.log("\n\u{1F4CA} \u6750\u8D28\u7EDF\u8BA1:");
-  console.log(`  \u603B\u6750\u8D28\u6570: ${report.totalMaterials}`);
-  console.log(`  MeshToonMaterial: ${report.toonMaterialCount}`);
-  console.log(`  MeshPhongMaterial: ${report.phongMaterialCount}`);
-  console.log(`  MeshStandardMaterial: ${report.standardMaterialCount}`);
+  console.log("  \u603B\u6750\u8D28\u6570: " + report.totalMaterials);
+  console.log("  MeshToonMaterial: " + report.toonMaterialCount);
+  console.log("  MeshPhongMaterial: " + report.phongMaterialCount);
+  console.log("  MeshStandardMaterial: " + report.standardMaterialCount);
   console.log("\n\u{1F3A8} \u7EB9\u7406\u7EDF\u8BA1:");
-  console.log(`  \u6709Toon\u7EB9\u7406: ${report.materialsWithToon} / ${report.totalMaterials} ${report.materialsWithToon > 0 ? "\u2705" : "\u274C"}`);
-  console.log(`  \u6709Sphere\u7EB9\u7406: ${report.materialsWithSphere} / ${report.totalMaterials} ${report.materialsWithSphere > 0 ? "\u2705" : "\u274C"}`);
-  console.log(`  \u6709\u4E3B\u7EB9\u7406: ${report.materialsWithMainTexture} / ${report.totalMaterials}`);
+  console.log("  \u6709Toon\u7EB9\u7406: " + report.materialsWithToon + " / " + report.totalMaterials + " " + (report.materialsWithToon > 0 ? "\u2705" : "\u274C"));
+  console.log("  \u6709Sphere\u7EB9\u7406: " + report.materialsWithSphere + " / " + report.totalMaterials + " " + (report.materialsWithSphere > 0 ? "\u2705" : "\u274C"));
+  console.log("  \u6709\u4E3B\u7EB9\u7406: " + report.materialsWithMainTexture + " / " + report.totalMaterials);
   if (report.issues.length > 0) {
     console.log("\n\u26A0\uFE0F \u53D1\u73B0\u7684\u95EE\u9898:");
     report.issues.forEach((issue, i) => {
-      console.log(`  ${i + 1}. ${issue}`);
+      console.log("  " + (i + 1) + ". " + issue);
     });
   } else {
     console.log("\n\u2705 \u672A\u53D1\u73B0\u660E\u663E\u95EE\u9898");
@@ -3504,7 +3503,7 @@ function printDiagnosticReport(report) {
   if (report.suggestions.length > 0) {
     console.log("\n\u{1F4A1} \u6539\u8FDB\u5EFA\u8BAE:");
     report.suggestions.forEach((suggestion, i) => {
-      console.log(`  ${i + 1}. ${suggestion}`);
+      console.log("  " + (i + 1) + ". " + suggestion);
     });
   }
   console.log("\n" + "=".repeat(60));
@@ -3564,8 +3563,7 @@ function listAllMaterials(scene) {
     if (obj instanceof THREE2.Mesh || obj instanceof THREE2.SkinnedMesh) {
       const materials = Array.isArray(obj.material) ? obj.material : [obj.material];
       materials.forEach((mat) => {
-        console.log(`
-\u6750\u8D28 #${index}:`, obj.name || "unnamed");
+        console.log("\n\u6750\u8D28 #" + index + ":", obj.name || "unnamed");
         console.log(inspectMaterial(mat));
         index++;
       });
@@ -3618,14 +3616,13 @@ function printSphereDiagnostic(diagnostic) {
   console.log("=".repeat(60));
   console.log(`
 \u{1F4CA} \u7EDF\u8BA1:`);
-  console.log(`  \u603B\u6750\u8D28\u6570: ${diagnostic.totalMaterials}`);
-  console.log(`  \u9884\u671F\u6709sphere\u7EB9\u7406: ${diagnostic.expectedSphere}`);
-  console.log(`  \u5B9E\u9645\u6709sphere\u7EB9\u7406: ${diagnostic.actualSphere} ${diagnostic.actualSphere > 0 ? "\u2705" : "\u274C"}`);
+  console.log("  \u603B\u6750\u8D28\u6570: " + diagnostic.totalMaterials);
+  console.log("  \u9884\u671F\u6709sphere\u7EB9\u7406: " + diagnostic.expectedSphere);
+  console.log("  \u5B9E\u9645\u6709sphere\u7EB9\u7406: " + diagnostic.actualSphere + " " + (diagnostic.actualSphere > 0 ? "\u2705" : "\u274C"));
   if (diagnostic.missingSphere.length > 0) {
-    console.log(`
-\u26A0\uFE0F \u7F3A\u5C11sphere\u7EB9\u7406\u7684\u6750\u8D28 (${diagnostic.missingSphere.length}\u4E2A):`);
+    console.log("\n\u26A0\uFE0F \u7F3A\u5C11sphere\u7EB9\u7406\u7684\u6750\u8D28 (" + diagnostic.missingSphere.length + "\u4E2A):");
     diagnostic.missingSphere.forEach((item, i) => {
-      console.log(`  ${i + 1}. [${item.index}] ${item.name} (\u5BF9\u8C61: ${item.objectName})`);
+      console.log("  " + (i + 1) + ". [" + item.index + "] " + item.name + " (\u5BF9\u8C61: " + item.objectName + ")");
     });
   } else {
     console.log("\n\u2705 \u6240\u6709\u9884\u671F\u7684\u6750\u8D28\u90FD\u6709sphere\u7EB9\u7406");
@@ -3674,11 +3671,11 @@ function addDefaultSphereTextures(mesh, sphereTextureUrl) {
       });
     }
   });
-  console.log(`\u{1F52E} \u6DFB\u52A0\u9ED8\u8BA4Sphere\u7EB9\u7406\u5230 ${appliedCount} \u4E2A\u6750\u8D28`);
+  console.log("\u{1F52E} \u6DFB\u52A0\u9ED8\u8BA4Sphere\u7EB9\u7406\u5230 " + appliedCount + " \u4E2A\u6750\u8D28");
 }
 async function checkModelSphereDefinition(modelUrl) {
   try {
-    const { PMXParser: PMXParser2 } = await import('../PMXParser-L6IWHL4I.mjs');
+    const { PMXParser: PMXParser2 } = await import('../PMXParser-RNVQL76A.mjs');
     const parser = new PMXParser2();
     const result = await parser.loadAndParse(modelUrl);
     const sphereTextures = [];
@@ -3705,22 +3702,20 @@ async function checkModelSphereDefinition(modelUrl) {
 }
 async function printModelSphereInfo(modelUrl) {
   console.log("\n\u{1F50D} \u68C0\u67E5\u6A21\u578B\u7684Sphere\u7EB9\u7406\u5B9A\u4E49...");
-  console.log(`\u6A21\u578B: ${modelUrl}`);
+  console.log("\u6A21\u578B: " + modelUrl);
   console.log("=".repeat(60));
   const info = await checkModelSphereDefinition(modelUrl);
   if (info.hasSphere) {
-    console.log(`
-\u2705 \u6A21\u578B\u5B9A\u4E49\u4E86 ${info.sphereTextures.length} \u4E2ASphere\u7EB9\u7406:`);
+    console.log("\n\u2705 \u6A21\u578B\u5B9A\u4E49\u4E86 " + info.sphereTextures.length + " \u4E2ASphere\u7EB9\u7406:");
     info.sphereTextures.forEach((item, i) => {
-      console.log(`
-${i + 1}. ${item.materialName}`);
-      console.log(`   \u7EB9\u7406: ${item.texturePath}`);
-      console.log(`   \u6A21\u5F0F: ${item.mode}`);
+      console.log("\n" + (i + 1) + ". " + item.materialName);
+      console.log("   \u7EB9\u7406: " + item.texturePath);
+      console.log("   \u6A21\u5F0F: " + item.mode);
     });
     console.log("\n\u{1F4A1} \u5EFA\u8BAE:");
     console.log("  1. \u68C0\u67E5\u4EE5\u4E0B\u6587\u4EF6\u662F\u5426\u5B58\u5728\u4E8E\u6A21\u578B\u76EE\u5F55:");
     info.sphereTextures.forEach((item) => {
-      console.log(`     - ${item.texturePath}`);
+      console.log("     - " + item.texturePath);
     });
     console.log("  2. \u786E\u4FDD\u8FD9\u4E9B\u6587\u4EF6\u53EF\u4EE5\u88AB\u8BBF\u95EE\uFF08\u65E0CORS\u9519\u8BEF\uFF09");
     console.log("  3. MMDLoader\u5E94\u8BE5\u4F1A\u81EA\u52A8\u52A0\u8F7D\u8FD9\u4E9B\u7EB9\u7406");
@@ -3760,7 +3755,7 @@ async function fullSphereDiagnostic(mesh, modelUrl) {
     }
   } else {
     console.log("\n\u2705 \u68C0\u6D4B\u5230sphere\u7EB9\u7406\uFF01");
-    console.log(`\u5F53\u524D\u6709 ${runtimeDiag.actualSphere} \u4E2A\u6750\u8D28\u4F7F\u7528sphere\u7EB9\u7406`);
+    console.log("\u5F53\u524D\u6709 " + runtimeDiag.actualSphere + " \u4E2A\u6750\u8D28\u4F7F\u7528sphere\u7EB9\u7406");
   }
   console.log("\n" + "=".repeat(60));
 }
@@ -3907,7 +3902,7 @@ var DialogueBox = ({
   const dialogueContent = /* @__PURE__ */ React10.createElement(
     "div",
     {
-      className: `${className || ""}`,
+      className: clsx(className || ""),
       style: {
         position: "fixed",
         bottom: 0,
@@ -3927,8 +3922,8 @@ var DialogueBox = ({
         onClick: handleClick,
         style: {
           borderColor: theme.borderColor,
-          backdropFilter: `blur(${theme.blur}) saturate(200%)`,
-          WebkitBackdropFilter: `blur(${theme.blur}) saturate(200%)`,
+          backdropFilter: "blur(" + theme.blur + ") saturate(200%)",
+          WebkitBackdropFilter: "blur(" + theme.blur + ") saturate(200%)",
           opacity: theme.opacity,
           pointerEvents: "auto",
           position: "relative",
@@ -4016,7 +4011,7 @@ var DialogueBox = ({
             e.stopPropagation();
             onToggleAuto?.();
           },
-          className: `px-4 py-2 text-xs rounded-xl font-medium transition-all backdrop-blur-lg border hover:scale-105 active:scale-95 shadow-lg ${isAutoMode ? "border-slate-400 text-slate-900" : "border-slate-300 hover:border-slate-400 text-slate-700"}`,
+          className: clsx("px-4 py-2 text-xs rounded-xl font-medium transition-all backdrop-blur-lg border hover:scale-105 active:scale-95 shadow-lg", isAutoMode ? "border-slate-400 text-slate-900" : "border-slate-300 hover:border-slate-400 text-slate-700"),
           style: {
             background: isAutoMode ? "linear-gradient(135deg, rgba(203, 213, 225, 0.95), rgba(148, 163, 184, 0.85))" : "linear-gradient(135deg, rgba(241, 245, 249, 0.95), rgba(226, 232, 240, 0.9))",
             boxShadow: isAutoMode ? "0 4px 20px rgba(100, 116, 139, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.8)" : "0 4px 16px rgba(100, 116, 139, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.8)"
@@ -4131,7 +4126,7 @@ var HistoryPanel = ({
   const historyContent = /* @__PURE__ */ React10.createElement(
     "div",
     {
-      className: `fixed inset-0 flex flex-col ${className}`,
+      className: clsx("fixed inset-0 flex flex-col", className),
       style: {
         zIndex: 1,
         pointerEvents: "auto",
@@ -4197,7 +4192,7 @@ var HistoryPanel = ({
     ), /* @__PURE__ */ React10.createElement("div", { className: "flex-1 overflow-y-auto p-6 space-y-4" }, history.length === 0 ? /* @__PURE__ */ React10.createElement("div", { className: "text-center text-white/70 py-20 text-lg font-medium", style: { textShadow: "0 2px 8px rgba(0, 0, 0, 0.3)" } }, "\u6682\u65E0\u5BF9\u8BDD\u5386\u53F2") : history.map((item, index) => /* @__PURE__ */ React10.createElement(
       "div",
       {
-        key: `${item.nodeIndex}-${item.dialogueIndex}-${index}`,
+        key: item.nodeIndex + "-" + item.dialogueIndex + "-" + index,
         className: "p-6 rounded-2xl transition-all hover:scale-[1.01] relative overflow-hidden cursor-pointer",
         style: {
           background: "linear-gradient(135deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.1))",
@@ -4318,7 +4313,7 @@ var LoadingScreen = ({
   const content = /* @__PURE__ */ React10.createElement(
     "div",
     {
-      className: `fixed inset-0 w-screen h-screen flex items-center justify-center ${className}`,
+      className: clsx("fixed inset-0 w-screen h-screen flex items-center justify-center", className),
       style: {
         zIndex: 999998,
         pointerEvents: "auto",
@@ -4462,7 +4457,7 @@ var StartScreen = ({
   const content = /* @__PURE__ */ React10.createElement(
     "div",
     {
-      className: `fixed inset-0 w-screen h-screen flex items-center justify-center overflow-hidden ${className}`,
+      className: clsx("fixed inset-0 w-screen h-screen flex items-center justify-center overflow-hidden", className),
       style: {
         zIndex: 999999,
         pointerEvents: "auto",
@@ -4492,8 +4487,8 @@ var StartScreen = ({
           top: Math.random() * 100 + "%",
           left: Math.random() * 100 + "%",
           boxShadow: "0 0 10px rgba(148, 163, 184, 0.3)",
-          animation: `floatParticle ${Math.random() * 10 + 10}s linear infinite`,
-          animationDelay: `-${Math.random() * 20}s`
+          animation: "floatParticle " + (Math.random() * 10 + 10) + "s linear infinite",
+          animationDelay: "-" + Math.random() * 20 + "s"
         }
       }
     )))),
@@ -4837,18 +4832,10 @@ var CheerButton = ({
     "button",
     {
       onClick,
-      className: `
-        fixed bottom-32 right-8
-        px-6 py-3 rounded-full
-        bg-gradient-to-r from-pink-500 to-purple-500
-        hover:from-pink-600 hover:to-purple-600
-        active:scale-95
-        text-white font-bold text-lg
-        shadow-lg hover:shadow-xl
-        transition-all duration-200
-        flex items-center gap-2
-        ${className}
-      `,
+      className: clsx(
+        "fixed bottom-32 right-8 px-6 py-3 rounded-full bg-gradient-to-r from-pink-500 to-purple-500 hover:from-pink-600 hover:to-purple-600 active:scale-95 text-white font-bold text-lg shadow-lg hover:shadow-xl transition-all duration-200 flex items-center gap-2",
+        className
+      ),
       style: {
         animation: "cheer-pulse 2s ease-in-out infinite",
         zIndex: 1e6
@@ -5053,15 +5040,13 @@ var CheerParticles = forwardRef(
       "div",
       {
         ref: containerRef,
-        className: `pointer-events-none absolute inset-0 ${className}`,
+        className: clsx("pointer-events-none absolute inset-0", className),
         style: { zIndex: 999998 }
       }
     );
   }
 );
 CheerParticles.displayName = "CheerParticles";
-
-// src/mmd/visual-novel/MMDVisualNovel.tsx
 var MMDVisualNovel = forwardRef(
   ({
     script,
@@ -5153,7 +5138,7 @@ var MMDVisualNovel = forwardRef(
           setPendingNodeIndex(nodeIndex);
           return;
         }
-        console.log(`[MMDVisualNovel] Transitioning to node ${nodeIndex}`);
+        console.log("[MMDVisualNovel] Transitioning to node " + nodeIndex);
         setIsTransitioning(true);
         setIsLoading(true);
         setIsAnimationPlaying(false);
@@ -5175,7 +5160,7 @@ var MMDVisualNovel = forwardRef(
           }
           setTimeout(() => {
             setIsTransitioning(false);
-            console.log(`[MMDVisualNovel] Transition to node ${nodeIndex} completed, waiting for model load`);
+            console.log("[MMDVisualNovel] Transition to node " + nodeIndex + " completed, waiting for model load");
           }, 100);
         }, 300);
       },
@@ -5189,7 +5174,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}`);
+          console.log("[MMDVisualNovel] Branching: " + key + "=" + val + " -> node " + nextNodeIndex);
         } else {
           nextNodeIndex = defaultIndex;
         }
@@ -5369,7 +5354,7 @@ var MMDVisualNovel = forwardRef(
       "div",
       {
         ref: containerRef,
-        className: `relative bg-black ${className}`,
+        className: clsx("relative bg-black", className),
         style: { width: "100%", height: "100%", overflow: "hidden", ...style }
       },
       /* @__PURE__ */ React10.createElement(
@@ -5444,7 +5429,7 @@ var MMDVisualNovel = forwardRef(
             className: "h-full w-full",
             style: {
               backgroundColor: activeEffect.color || "white",
-              animation: `flash-anim ${activeEffect.duration || 500}ms ease-out forwards`
+              animation: "flash-anim " + (activeEffect.duration || 500) + "ms ease-out forwards"
             }
           }
         ),
@@ -5549,7 +5534,7 @@ var MMDVisualNovel = forwardRef(
             if (choice.setVariable) {
               const { key, value } = choice.setVariable;
               setVariables((prev) => ({ ...prev, [key]: value }));
-              console.log(`[MMDVisualNovel] Variable set: ${key} = ${value}`);
+              console.log("[MMDVisualNovel] Variable set: " + key + " = " + value);
             }
             choice.onSelect?.();
             if (choice.effect) {
@@ -5843,19 +5828,19 @@ var MusicControls = ({
   const formatTime = (seconds) => {
     const mins = Math.floor(seconds / 60);
     const secs = Math.floor(seconds % 60);
-    return `${mins}:${secs.toString().padStart(2, "0")}`;
+    return mins + ":" + secs.toString().padStart(2, "0");
   };
   const progress = duration > 0 ? currentTime / duration * 100 : 0;
   return /* @__PURE__ */ React10.createElement(
     "div",
     {
-      className: `w-full max-w-4xl mx-auto px-6 py-4 bg-white/10 backdrop-blur-xl border border-white/20 rounded-2xl shadow-2xl pointer-events-auto transition-all group ${className}`
+      className: clsx("w-full max-w-4xl mx-auto px-6 py-4 bg-white/10 backdrop-blur-xl border border-white/20 rounded-2xl shadow-2xl pointer-events-auto transition-all group", className)
     },
     /* @__PURE__ */ React10.createElement("div", { className: "relative w-full h-1.5 bg-white/20 rounded-full mb-4 cursor-pointer group/progress overflow-hidden" }, /* @__PURE__ */ React10.createElement(
       "div",
       {
         className: "absolute h-full bg-blue-500 rounded-full transition-all duration-300",
-        style: { width: `${progress}%` }
+        style: { width: progress + "%" }
       }
     ), /* @__PURE__ */ React10.createElement(
       "input",
@@ -5937,7 +5922,7 @@ var PlaylistPanel = ({
   return /* @__PURE__ */ React10.createElement(
     "div",
     {
-      className: `fixed inset-y-0 right-0 w-80 bg-gray-900/90 backdrop-blur-2xl border-l border-white/10 shadow-2xl z-50 flex flex-col pointer-events-auto transform transition-transform duration-500 ease-out ${isOpen ? "translate-x-0" : "translate-x-full"} ${className}`
+      className: clsx("fixed inset-y-0 right-0 w-80 bg-gray-900/90 backdrop-blur-2xl border-l border-white/10 shadow-2xl z-50 flex flex-col pointer-events-auto transform transition-transform duration-500 ease-out", isOpen ? "translate-x-0" : "translate-x-full", className)
     },
     /* @__PURE__ */ React10.createElement("div", { className: "flex flex-col p-6 border-b border-white/10 gap-4" }, /* @__PURE__ */ React10.createElement("div", { className: "flex items-center justify-between" }, /* @__PURE__ */ React10.createElement("div", { className: "flex items-center gap-3" }, /* @__PURE__ */ React10.createElement(Music, { className: "w-5 h-5 text-blue-400" }), /* @__PURE__ */ React10.createElement("h3", { className: "text-lg font-bold text-white" }, mikuMode ? "Miku \u6B4C\u66F2\u5E93" : "\u64AD\u653E\u5217\u8868")), /* @__PURE__ */ React10.createElement(
       "button",
@@ -5963,10 +5948,10 @@ var PlaylistPanel = ({
         {
           key: track.id,
           onClick: () => onSelectTrack(index),
-          className: `w-full flex items-center gap-4 p-3 rounded-xl transition-all group ${isActive ? "bg-blue-500/20 border border-blue-500/30" : "hover:bg-white/5 border border-transparent"}`
+          className: clsx("w-full flex items-center gap-4 p-3 rounded-xl transition-all group", isActive ? "bg-blue-500/20 border border-blue-500/30" : "hover:bg-white/5 border border-transparent")
         },
         /* @__PURE__ */ React10.createElement("div", { className: "relative w-12 h-12 flex-shrink-0 rounded-lg overflow-hidden bg-gray-800" }, track.coverUrl ? /* @__PURE__ */ React10.createElement("img", { src: track.coverUrl, alt: track.title, className: "w-full h-full object-cover" }) : /* @__PURE__ */ React10.createElement("div", { className: "w-full h-full flex items-center justify-center text-white/20" }, /* @__PURE__ */ React10.createElement(Music, { className: "w-6 h-6" })), isActive && /* @__PURE__ */ React10.createElement("div", { className: "absolute inset-0 bg-blue-500/40 flex items-center justify-center" }, /* @__PURE__ */ React10.createElement("div", { className: "flex gap-1 items-end h-4" }, /* @__PURE__ */ React10.createElement("div", { className: "w-1 bg-white animate-music-bar-1" }), /* @__PURE__ */ React10.createElement("div", { className: "w-1 bg-white animate-music-bar-2" }), /* @__PURE__ */ React10.createElement("div", { className: "w-1 bg-white animate-music-bar-3" })))),
-        /* @__PURE__ */ React10.createElement("div", { className: "flex-1 text-left min-w-0" }, /* @__PURE__ */ React10.createElement("h4", { className: `text-sm font-bold truncate ${isActive ? "text-blue-400" : "text-white/90"}` }, track.title), /* @__PURE__ */ React10.createElement("p", { className: "text-xs text-white/40 truncate mt-0.5" }, track.artist || "\u672A\u77E5\u827A\u672F\u5BB6")),
+        /* @__PURE__ */ React10.createElement("div", { className: "flex-1 text-left min-w-0" }, /* @__PURE__ */ React10.createElement("h4", { className: clsx("text-sm font-bold truncate", isActive ? "text-blue-400" : "text-white/90") }, track.title), /* @__PURE__ */ React10.createElement("p", { className: "text-xs text-white/40 truncate mt-0.5" }, track.artist || "\u672A\u77E5\u827A\u672F\u5BB6")),
         !isActive && /* @__PURE__ */ React10.createElement("div", { className: "opacity-0 group-hover:opacity-100 transition-opacity" }, /* @__PURE__ */ React10.createElement(Play, { className: "w-4 h-4 text-white/40 fill-current" }))
       );
     })),
@@ -6004,7 +5989,7 @@ var PlaylistPanel = ({
   );
 };
 var TrackInfo = ({ track, className = "" }) => {
-  return /* @__PURE__ */ React10.createElement("div", { className: `flex flex-col items-center text-center gap-2 ${className}` }, /* @__PURE__ */ React10.createElement("div", { className: "px-4 py-1.5 bg-black/40 backdrop-blur-md rounded-full border border-white/10 shadow-lg" }, /* @__PURE__ */ React10.createElement("h2", { className: "text-lg font-bold text-white tracking-wider truncate max-w-md" }, track.title)), /* @__PURE__ */ React10.createElement("p", { className: "text-sm font-medium text-white/60 drop-shadow-md" }, track.artist || "\u672A\u77E5\u827A\u672F\u5BB6"));
+  return /* @__PURE__ */ React10.createElement("div", { className: clsx("flex flex-col items-center text-center gap-2", className) }, /* @__PURE__ */ React10.createElement("div", { className: "px-4 py-1.5 bg-black/40 backdrop-blur-md rounded-full border border-white/10 shadow-lg" }, /* @__PURE__ */ React10.createElement("h2", { className: "text-lg font-bold text-white tracking-wider truncate max-w-md" }, track.title)), /* @__PURE__ */ React10.createElement("p", { className: "text-sm font-medium text-white/60 drop-shadow-md" }, track.artist || "\u672A\u77E5\u827A\u672F\u5BB6"));
 };
 
 // src/mmd/music-player/MMDMusicPlayer.tsx
@@ -6212,7 +6197,7 @@ var MMDMusicPlayer = forwardRef(
       "div",
       {
         ref: containerRef,
-        className: `relative bg-black group ${className}`,
+        className: clsx("relative bg-black group", className),
         style: { width: "100%", height: "100%", overflow: "hidden", ...style },
         onMouseMove: resetUITimeout,
         onClick: resetUITimeout
@@ -6265,7 +6250,7 @@ var MMDMusicPlayer = forwardRef(
       /* @__PURE__ */ React10.createElement(
         "div",
         {
-          className: `absolute inset-0 z-10 flex flex-col justify-between transition-opacity duration-700 pointer-events-none ${isUIVisible ? "opacity-100" : "opacity-0"}`
+          className: clsx("absolute inset-0 z-10 flex flex-col justify-between transition-opacity duration-700 pointer-events-none", isUIVisible ? "opacity-100" : "opacity-0")
         },
         /* @__PURE__ */ React10.createElement("div", { className: "pt-12 px-8 flex justify-center" }, /* @__PURE__ */ React10.createElement(TrackInfo, { track: currentTrack })),
         /* @__PURE__ */ React10.createElement("div", { className: "pb-12 px-8" }, /* @__PURE__ */ React10.createElement(
@@ -6523,7 +6508,7 @@ var MMDARPlayer = forwardRef(({
           const url = URL.createObjectURL(blob);
           const a = document.createElement("a");
           a.href = url;
-          a.download = `ar-photo-${Date.now()}.png`;
+          a.download = "ar-photo-" + Date.now() + ".png";
           document.body.appendChild(a);
           a.click();
           document.body.removeChild(a);
@@ -6881,7 +6866,7 @@ var MMDARPlayer = forwardRef(({
     {
       onClick: placeModel,
       disabled: !state.markerDetected,
-      className: `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"}`
+      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(
@@ -6891,7 +6876,7 @@ var MMDARPlayer = forwardRef(({
       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: `w-3 h-3 rounded-full ${state.cameraReady ? "bg-green-400" : "bg-red-400"}`, title: "\u6444\u50CF\u5934" }), /* @__PURE__ */ React10.createElement("div", { className: `w-3 h-3 rounded-full ${state.arReady ? "bg-green-400" : "bg-red-400"}`, title: "AR" }), /* @__PURE__ */ React10.createElement("div", { className: `w-3 h-3 rounded-full ${window.DeviceOrientationEvent ? "bg-purple-400" : "bg-gray-400"}`, title: "\u9640\u87BA\u4EEA" }), /* @__PURE__ */ React10.createElement("div", { className: `w-3 h-3 rounded-full ${state.markerDetected ? "bg-blue-400" : "bg-gray-400"}`, title: "\u6807\u8BB0\u68C0\u6D4B" }), /* @__PURE__ */ React10.createElement("div", { className: `w-3 h-3 rounded-full ${state.modelPlaced && modelRootRef.current?.visible ? "bg-green-400" : "bg-yellow-400"}`, title: "\u6A21\u578B" }))));
+  )), /* @__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" }))));
 });
 MMDARPlayer.displayName = "MMDARPlayer";
 
@@ -7049,7 +7034,7 @@ var HLSLToGLSLConverter = class {
    */
   convertTypes(code) {
     for (const [hlslType, glslType] of Object.entries(this.typeMap)) {
-      const regex = new RegExp(`\\b${hlslType}\\b`, "g");
+      const regex = new RegExp("\\b" + hlslType + "\\b", "g");
       code = code.replace(regex, glslType);
     }
     return code;
@@ -7059,7 +7044,7 @@ var HLSLToGLSLConverter = class {
    */
   convertFunctions(code) {
     for (const [hlslFunc, glslFunc] of Object.entries(this.functionMap)) {
-      const regex = new RegExp(`\\b${hlslFunc}\\b`, "g");
+      const regex = new RegExp("\\b" + hlslFunc + "\\b", "g");
       code = code.replace(regex, glslFunc);
     }
     code = this.convertMulFunction(code);
@@ -7082,7 +7067,7 @@ var HLSLToGLSLConverter = class {
    */
   convertSemantics(code, shaderType) {
     for (const [hlslSemantic, glslSemantic] of Object.entries(this.semanticMap)) {
-      const regex = new RegExp(`\\b${hlslSemantic}\\b`, "g");
+      const regex = new RegExp("\\b" + hlslSemantic + "\\b", "g");
       code = code.replace(regex, glslSemantic);
     }
     return code;
@@ -7164,7 +7149,7 @@ vec4 saturate(vec4 x) { return clamp(x, 0.0, 1.0); }
     const vsFunc = effect.shaderFunctions?.find((f) => f.name === vertexShaderName);
     const fsFunc = effect.shaderFunctions?.find((f) => f.name === fragmentShaderName);
     if (!vsFunc || !fsFunc) {
-      this.warnings.push(`Shader functions not found: ${vertexShaderName} or ${fragmentShaderName}`);
+      this.warnings.push("Shader functions not found: " + vertexShaderName + " or " + fragmentShaderName);
       return null;
     }
     const vertexShader = this.convert(vsFunc.body, "vertex");
@@ -7268,7 +7253,7 @@ var FXParser = class {
     const vsFunc = effect.shaderFunctions.find((f) => f.name === vertexShaderName);
     const fsFunc = effect.shaderFunctions.find((f) => f.name === fragmentShaderName);
     if (!vsFunc || !fsFunc) {
-      warnings.push(`Shader functions not found: ${vertexShaderName} or ${fragmentShaderName}`);
+      warnings.push("Shader functions not found: " + vertexShaderName + " or " + fragmentShaderName);
       return {
         warnings
       };
@@ -7408,8 +7393,8 @@ var FXParser = class {
       if (match && match[1] && define.value && !define.isCommented) {
         const purpose = match[1].toLowerCase();
         const path = define.value.replace(/"/g, "");
-        const widthDefine = defines.find((d) => d.name === `${define.name}_X`);
-        const heightDefine = defines.find((d) => d.name === `${define.name}_Y`);
+        const widthDefine = defines.find((d) => d.name === define.name + "_X");
+        const heightDefine = defines.find((d) => d.name === define.name + "_Y");
         textures.push({
           name: define.name,
           path,
@@ -7601,10 +7586,7 @@ var FXParser = class {
   extractShaderFunction(effect, functionName) {
     const func = effect.shaderFunctions.find((f) => f.name === functionName);
     if (!func) return null;
-    return `${func.returnType} ${func.name}(${func.parameters})${func.outputSemantic ? " : " + func.outputSemantic : ""}
-{
-${func.body}
-}`;
+    return func.returnType + " " + func.name + "(" + func.parameters + ")" + (func.outputSemantic ? " : " + func.outputSemantic : "") + "\n{\n" + func.body + "\n}";
   }
   /**
    * 获取所有启用的功能标志
@@ -7698,7 +7680,7 @@ var FXToThreeAdapter = class {
     this.effect.parameters.forEach((param) => {
       const name = param.name.toLowerCase();
       if (name.startsWith("add")) {
-        console.log(`[FXToThreeAdapter]   Skipping additive param "${param.name}" (not an absolute value)`);
+        console.log('[FXToThreeAdapter]   Skipping additive param "' + param.name + '" (not an absolute value)');
         return;
       }
       if (name.includes("materialrgb") || name.includes("material")) {
@@ -7709,7 +7691,7 @@ var FXToThreeAdapter = class {
             colorValue[1],
             colorValue[2]
           );
-          console.log(`[FXToThreeAdapter]   Found color param "${param.name}":`, colorValue);
+          console.log('[FXToThreeAdapter]   Found color param "' + param.name + '":', colorValue);
         }
       }
       if (name.includes("emissive")) {
@@ -7720,7 +7702,7 @@ var FXToThreeAdapter = class {
             emissiveValue[1],
             emissiveValue[2]
           );
-          console.log(`[FXToThreeAdapter]   Found emissive param "${param.name}":`, emissiveValue);
+          console.log('[FXToThreeAdapter]   Found emissive param "' + param.name + '":', emissiveValue);
         }
       }
       if (name.includes("specular")) {
@@ -7731,14 +7713,14 @@ var FXToThreeAdapter = class {
             specularValue[1],
             specularValue[2]
           );
-          console.log(`[FXToThreeAdapter]   Found specular param "${param.name}":`, specularValue);
+          console.log('[FXToThreeAdapter]   Found specular param "' + param.name + '":', specularValue);
         }
       }
       if (name.includes("shininess") || name.includes("specularpower")) {
         const shininessValue = this.parseFloat(param.defaultValue);
         if (shininessValue !== null) {
           config.shininess = shininessValue;
-          console.log(`[FXToThreeAdapter]   Found shininess param "${param.name}":`, shininessValue);
+          console.log('[FXToThreeAdapter]   Found shininess param "' + param.name + '":', shininessValue);
         }
       }
       if (config.uniforms && param.defaultValue) {
@@ -7798,13 +7780,13 @@ var FXToThreeAdapter = class {
    */
   async loadTextures() {
     const promises = this.effect.textures.map(async (fxTexture) => {
-      const path = this.basePath ? `${this.basePath}/${fxTexture.path}` : fxTexture.path;
+      const path = this.basePath ? this.basePath + "/" + fxTexture.path : fxTexture.path;
       try {
         const texture = await this.loadTexture(path);
         this.loadedTextures.set(fxTexture.name, texture);
         return { name: fxTexture.name, texture };
       } catch (error) {
-        console.warn(`Failed to load texture ${fxTexture.name}:`, error);
+        console.warn("Failed to load texture " + fxTexture.name + ":", error);
         return null;
       }
     });
@@ -7955,7 +7937,7 @@ var FXToThreeAdapter = class {
    */
   getSummary() {
     return {
-      materialParams: this.effect.parameters.map((p) => `${p.type} ${p.name}`),
+      materialParams: this.effect.parameters.map((p) => p.type + " " + p.name),
       textures: this.effect.textures.map((t) => t.path),
       renderFeatures: this.effect.defines.filter((d) => !d.isCommented && (d.name.startsWith("USE_") || d.name.includes("SHADOW"))).map((d) => d.name)
     };
@@ -7995,13 +7977,13 @@ var MultiFXAdapter = class {
     try {
       const fileType = this.detectFileType(config.path, config.type);
       const desc = config.description || config.path;
-      console.log(`[MultiFXAdapter] Loading ${fileType.toUpperCase()} file:`, desc);
+      console.log("[MultiFXAdapter] Loading " + fileType.toUpperCase() + " file:", desc);
       const effect = await this.parser.loadAndParse(config.path);
       this.effects.set(config.path, effect);
       const adapter = new FXToThreeAdapter(effect, config.texturePath || "");
       this.adapters.set(config.path, adapter);
       if (this.options.autoLoadTextures) {
-        console.log(`[MultiFXAdapter] Loading textures for ${fileType}:`, desc);
+        console.log("[MultiFXAdapter] Loading textures for " + fileType + ":", desc);
         await adapter.loadTextures();
       }
       const defaultPriority = fileType === "x" ? -10 : 0;
@@ -8015,9 +7997,9 @@ var MultiFXAdapter = class {
       });
       this.configs.sort((a, b) => (a.priority ?? 0) - (b.priority ?? 0));
       const lastConfig = this.configs[this.configs.length - 1];
-      console.log(`[MultiFXAdapter] ${fileType.toUpperCase()} loaded successfully:`, desc);
-      console.log(`[MultiFXAdapter]   - Priority: ${lastConfig?.priority ?? 0}`);
-      console.log(`[MultiFXAdapter]   - Target: ${lastConfig?.target ?? "all"}`);
+      console.log("[MultiFXAdapter] " + fileType.toUpperCase() + " loaded successfully:", desc);
+      console.log("[MultiFXAdapter]   - Priority: " + (lastConfig?.priority ?? 0));
+      console.log("[MultiFXAdapter]   - Target: " + (lastConfig?.target ?? "all"));
     } catch (error) {
       console.error("[MultiFXAdapter] Failed to load effect file:", config.path, error);
       throw error;
@@ -8064,15 +8046,15 @@ var MultiFXAdapter = class {
         shouldApply = config.target === target;
       }
       if (!shouldApply) {
-        console.log(`[MultiFXAdapter]   - Skipping ${config.description || config.path} (target mismatch: ${config.target} !== ${target})`);
+        console.log("[MultiFXAdapter]   - Skipping " + (config.description || config.path) + " (target mismatch: " + config.target + " !== " + target + ")");
         return;
       }
       const adapter = this.adapters.get(config.path);
       if (!adapter) {
-        console.log(`[MultiFXAdapter]   - Skipping ${config.description || config.path} (adapter not found)`);
+        console.log("[MultiFXAdapter]   - Skipping " + (config.description || config.path) + " (adapter not found)");
         return;
       }
-      console.log(`[MultiFXAdapter]   \u2705 Applying ${config.description || config.path} (priority: ${config.priority})`);
+      console.log("[MultiFXAdapter]   \u2705 Applying " + (config.description || config.path) + " (priority: " + config.priority + ")");
       const materialConfig = adapter.extractMaterialConfig();
       switch (this.options.mergeStrategy) {
         case "override":
@@ -8129,7 +8111,7 @@ var MultiFXAdapter = class {
       const adapter = this.adapters.get(config.path);
       if (!adapter) return;
       const renderConfig = adapter.extractRenderConfig();
-      console.log(`[MultiFXAdapter]   Processing ${config.description || config.path}:`);
+      console.log("[MultiFXAdapter]   Processing " + (config.description || config.path) + ":");
       console.log("    - enableShadow:", renderConfig.enableShadow);
       console.log("    - shadowMapSize:", renderConfig.shadowMapSize);
       console.log("    - toneMapping:", renderConfig.toneMapping);
@@ -8228,17 +8210,17 @@ var MultiFXAdapter = class {
       return config.target === target;
     });
     if (!shaderConfig) {
-      console.log(`[MultiFXAdapter] No shader material config found for target: ${target}`);
+      console.log("[MultiFXAdapter] No shader material config found for target: " + target);
       return null;
     }
     const adapter = this.adapters.get(shaderConfig.path);
     if (!adapter) {
-      console.warn(`[MultiFXAdapter] Adapter not found for: ${shaderConfig.path}`);
+      console.warn("[MultiFXAdapter] Adapter not found for: " + shaderConfig.path);
       return null;
     }
     const material = adapter.createShaderMaterial();
     if (material) {
-      console.log(`[MultiFXAdapter] \u2705 Created ShaderMaterial for target: ${target} from ${shaderConfig.description || shaderConfig.path}`);
+      console.log("[MultiFXAdapter] \u2705 Created ShaderMaterial for target: " + target + " from " + (shaderConfig.description || shaderConfig.path));
     }
     return material;
   }
@@ -8372,11 +8354,11 @@ var MultiFXAdapter = class {
   applyLayered(scene, renderer, modelMeshes, stageMeshes) {
     console.log("[MultiFXAdapter] Applying layered effects...");
     const sceneEffects = this.getSceneEffects();
-    console.log(`[MultiFXAdapter] Applying ${sceneEffects.length} scene-level effects (.x files)`);
+    console.log("[MultiFXAdapter] Applying " + sceneEffects.length + " scene-level effects (.x files)");
     sceneEffects.forEach((config) => {
       const adapter = this.adapters.get(config.path);
       if (adapter) {
-        console.log(`[MultiFXAdapter]   - Applying: ${config.description || config.path}`);
+        console.log("[MultiFXAdapter]   - Applying: " + (config.description || config.path));
         const renderConfig = adapter.extractRenderConfig();
         if (renderConfig.toneMapping !== void 0) {
           renderer.toneMapping = renderConfig.toneMapping;
@@ -8395,9 +8377,9 @@ var MultiFXAdapter = class {
       }
     });
     const modelEffects = this.getModelEffects();
-    console.log(`[MultiFXAdapter] Applying ${modelEffects.length} model-level effects (.fx files)`);
+    console.log("[MultiFXAdapter] Applying " + modelEffects.length + " model-level effects (.fx files)");
     modelEffects.forEach((config) => {
-      console.log(`[MultiFXAdapter]   - Applying: ${config.description || config.path}`);
+      console.log("[MultiFXAdapter]   - Applying: " + (config.description || config.path));
       if (modelMeshes) {
         modelMeshes.forEach((mesh) => {
           if (mesh instanceof THREE2.Mesh && mesh.material instanceof THREE2.MeshPhongMaterial) {
@@ -8430,16 +8412,16 @@ var MultiFXAdapter = class {
     console.log("\n[MultiFXAdapter] Current Configuration:");
     console.log("\u2550".repeat(60));
     const summary = this.getSummary();
-    console.log(`Total Effects: ${summary.totalFX}`);
-    console.log(`  - Scene-level (.x): ${summary.xFiles}`);
-    console.log(`  - Model-level (.fx): ${summary.fxFiles}`);
+    console.log("Total Effects: " + summary.totalFX);
+    console.log("  - Scene-level (.x): " + summary.xFiles);
+    console.log("  - Model-level (.fx): " + summary.fxFiles);
     console.log("\nLoad Order (by priority):");
     summary.configs.forEach((config, index) => {
       const icon = config.type === "x" ? "\u{1F30D}" : "\u{1F3A8}";
-      console.log(`${index + 1}. ${icon} [${config.type.toUpperCase()}] ${config.description || config.path}`);
-      console.log(`   Priority: ${config.priority}, Target: ${config.target}`);
+      console.log(index + 1 + ". " + icon + " [" + config.type.toUpperCase() + "] " + (config.description || config.path));
+      console.log("   Priority: " + config.priority + ", Target: " + config.target);
       if (config.features.length > 0) {
-        console.log(`   Features: ${config.features.join(", ")}`);
+        console.log("   Features: " + config.features.join(", "));
       }
     });
     console.log("\u2550".repeat(60) + "\n");
@@ -8452,7 +8434,7 @@ function exportFXToJSON(effect) {
 }
 function exportFXToMarkdown(effect) {
   const lines = [];
-  lines.push(`# ${effect.fileName}`);
+  lines.push("# " + effect.fileName);
   lines.push("");
   if (effect.defines.length > 0) {
     lines.push("## \u5B8F\u5B9A\u4E49 (Defines)");
@@ -8461,7 +8443,7 @@ function exportFXToMarkdown(effect) {
     lines.push("|------|-----|------|------|");
     effect.defines.forEach((d) => {
       const status = d.isCommented ? "\u7981\u7528" : "\u542F\u7528";
-      lines.push(`| ${d.name} | ${d.value || "-"} | ${status} | ${d.comment || "-"} |`);
+      lines.push("| " + d.name + " | " + (d.value || "-") + " | " + status + " | " + (d.comment || "-") + " |");
     });
     lines.push("");
   }
@@ -8471,8 +8453,8 @@ function exportFXToMarkdown(effect) {
     lines.push("| \u540D\u79F0 | \u8DEF\u5F84 | \u5C3A\u5BF8 | \u7528\u9014 |");
     lines.push("|------|------|------|------|");
     effect.textures.forEach((t) => {
-      const size = t.width && t.height ? `${t.width}x${t.height}` : "-";
-      lines.push(`| ${t.name} | ${t.path} | ${size} | ${t.purpose || "-"} |`);
+      const size = t.width && t.height ? t.width + "x" + t.height : "-";
+      lines.push("| " + t.name + " | " + t.path + " | " + size + " | " + (t.purpose || "-") + " |");
     });
     lines.push("");
   }
@@ -8482,7 +8464,7 @@ function exportFXToMarkdown(effect) {
     lines.push("| \u540D\u79F0 | \u7C7B\u578B | \u8BED\u4E49 | \u9ED8\u8BA4\u503C |");
     lines.push("|------|------|------|--------|");
     effect.parameters.forEach((p) => {
-      lines.push(`| ${p.name} | ${p.type} | ${p.semantic || "-"} | ${p.defaultValue || "-"} |`);
+      lines.push("| " + p.name + " | " + p.type + " | " + (p.semantic || "-") + " | " + (p.defaultValue || "-") + " |");
     });
     lines.push("");
   }
@@ -8492,7 +8474,7 @@ function exportFXToMarkdown(effect) {
     lines.push("| \u53C2\u6570 | \u5BF9\u8C61\u540D | \u63A7\u5236\u9879 |");
     lines.push("|------|--------|--------|");
     effect.controllers.forEach((c) => {
-      lines.push(`| ${c.name} | ${c.objectName} | ${c.itemName} |`);
+      lines.push("| " + c.name + " | " + c.objectName + " | " + c.itemName + " |");
     });
     lines.push("");
   }
@@ -8500,7 +8482,7 @@ function exportFXToMarkdown(effect) {
     lines.push("## \u5305\u542B\u6587\u4EF6 (Includes)");
     lines.push("");
     effect.includes.forEach((inc) => {
-      lines.push(`- ${inc}`);
+      lines.push("- " + inc);
     });
     lines.push("");
   }
@@ -8508,15 +8490,15 @@ function exportFXToMarkdown(effect) {
     lines.push("## \u6280\u672F (Techniques)");
     lines.push("");
     effect.techniques.forEach((t) => {
-      lines.push(`### ${t.name}`);
+      lines.push("### " + t.name);
       lines.push("");
       t.passes.forEach((p, idx) => {
-        lines.push(`#### Pass ${p.name || idx + 1}`);
+        lines.push("#### Pass " + (p.name || idx + 1));
         if (p.vertexShader) {
-          lines.push(`- **\u9876\u70B9\u7740\u8272\u5668**: ${p.vertexShader.function} (${p.vertexShader.profile})`);
+          lines.push("- **\u9876\u70B9\u7740\u8272\u5668**: " + p.vertexShader.function + " (" + p.vertexShader.profile + ")");
         }
         if (p.pixelShader) {
-          lines.push(`- **\u50CF\u7D20\u7740\u8272\u5668**: ${p.pixelShader.function} (${p.pixelShader.profile})`);
+          lines.push("- **\u50CF\u7D20\u7740\u8272\u5668**: " + p.pixelShader.function + " (" + p.pixelShader.profile + ")");
         }
         lines.push("");
       });
@@ -8622,7 +8604,7 @@ function getConfigSummaryText(effect) {
   if (hasFeature(effect, "USE_ROUNDNORMAL")) {
     features.push("RoundNormal");
   }
-  return features.length > 0 ? `\u542F\u7528\u529F\u80FD: ${features.join(", ")}` : "\u65E0\u7279\u6B8A\u529F\u80FD\u542F\u7528";
+  return features.length > 0 ? "\u542F\u7528\u529F\u80FD: " + features.join(", ") : "\u65E0\u7279\u6B8A\u529F\u80FD\u542F\u7528";
 }
 function extractTexturePaths(effect) {
   return effect.textures.map((t) => t.path);
@@ -8635,14 +8617,14 @@ function validateFXEffect(effect) {
   }
   effect.textures.forEach((texture) => {
     if (!texture.path || texture.path === "") {
-      errors.push(`\u7EB9\u7406 ${texture.name} \u7F3A\u5C11\u8DEF\u5F84`);
+      errors.push("\u7EB9\u7406 " + texture.name + " \u7F3A\u5C11\u8DEF\u5F84");
     }
   });
   effect.parameters.forEach((param) => {
     if (param.type.includes("float") && param.defaultValue) {
       const floatRegex = /^float[234]?\s*\(/;
       if (!floatRegex.test(param.defaultValue) && isNaN(parseFloat(param.defaultValue))) {
-        warnings.push(`\u53C2\u6570 ${param.name} \u7684\u9ED8\u8BA4\u503C\u53EF\u80FD\u4E0D\u5408\u6CD5: ${param.defaultValue}`);
+        warnings.push("\u53C2\u6570 " + param.name + " \u7684\u9ED8\u8BA4\u503C\u53EF\u80FD\u4E0D\u5408\u6CD5: " + param.defaultValue);
       }
     }
   });
@@ -8694,23 +8676,23 @@ var FXViewer = ({
     parse();
   }, [source, isContent, fileName, onParsed, onError]);
   if (loading) {
-    return /* @__PURE__ */ React10.createElement("div", { className: `font-sans bg-white border border-gray-300 rounded-lg overflow-hidden p-8 text-center ${className}` }, /* @__PURE__ */ React10.createElement("div", { className: "text-xl text-gray-600" }, "\u52A0\u8F7D\u4E2D..."));
+    return /* @__PURE__ */ React10.createElement("div", { className: clsx("font-sans bg-white border border-gray-300 rounded-lg overflow-hidden p-8 text-center", className) }, /* @__PURE__ */ React10.createElement("div", { className: "text-xl text-gray-600" }, "\u52A0\u8F7D\u4E2D..."));
   }
   if (error || !effect || !summary) {
-    return /* @__PURE__ */ React10.createElement("div", { className: `font-sans bg-white border border-gray-300 rounded-lg overflow-hidden p-8 text-center ${className}` }, /* @__PURE__ */ React10.createElement("div", { className: "text-red-700" }, /* @__PURE__ */ React10.createElement("h3", { className: "m-0 mb-4 text-2xl" }, "\u274C \u89E3\u6790\u9519\u8BEF"), /* @__PURE__ */ React10.createElement("p", null, error || "\u672A\u77E5\u9519\u8BEF")));
+    return /* @__PURE__ */ React10.createElement("div", { className: clsx("font-sans bg-white border border-gray-300 rounded-lg overflow-hidden p-8 text-center", className) }, /* @__PURE__ */ React10.createElement("div", { className: "text-red-700" }, /* @__PURE__ */ React10.createElement("h3", { className: "m-0 mb-4 text-2xl" }, "\u274C \u89E3\u6790\u9519\u8BEF"), /* @__PURE__ */ React10.createElement("p", null, error || "\u672A\u77E5\u9519\u8BEF")));
   }
   const validation = validateFXEffect(effect);
-  return /* @__PURE__ */ React10.createElement("div", { className: `font-sans bg-white border border-gray-300 rounded-lg overflow-hidden ${className}` }, /* @__PURE__ */ React10.createElement("div", { className: "p-4 md:p-6 bg-gradient-to-br from-indigo-500 to-purple-600 text-white" }, /* @__PURE__ */ React10.createElement("h2", { className: "m-0 mb-2 text-xl md:text-2xl font-semibold" }, effect.fileName), /* @__PURE__ */ React10.createElement("p", { className: "m-0 text-sm opacity-90" }, getConfigSummaryText(effect))), /* @__PURE__ */ React10.createElement("div", { className: "flex bg-gray-100 border-b border-gray-300 overflow-x-auto" }, /* @__PURE__ */ React10.createElement(
+  return /* @__PURE__ */ React10.createElement("div", { className: clsx("font-sans bg-white border border-gray-300 rounded-lg overflow-hidden", className) }, /* @__PURE__ */ React10.createElement("div", { className: "p-4 md:p-6 bg-gradient-to-br from-indigo-500 to-purple-600 text-white" }, /* @__PURE__ */ React10.createElement("h2", { className: "m-0 mb-2 text-xl md:text-2xl font-semibold" }, effect.fileName), /* @__PURE__ */ React10.createElement("p", { className: "m-0 text-sm opacity-90" }, getConfigSummaryText(effect))), /* @__PURE__ */ React10.createElement("div", { className: "flex bg-gray-100 border-b border-gray-300 overflow-x-auto" }, /* @__PURE__ */ React10.createElement(
     "button",
     {
-      className: `flex-1 min-w-[80px] md:min-w-[100px] px-3 md:px-4 py-2 md:py-3 border-none bg-transparent text-gray-600 text-xs md:text-sm cursor-pointer transition-all border-b-2 ${activeTab === "summary" ? "bg-white text-indigo-500 border-b-indigo-500 font-semibold" : "border-b-transparent hover:bg-gray-200 hover:text-gray-800"}`,
+      className: clsx("flex-1 min-w-[80px] md:min-w-[100px] px-3 md:px-4 py-2 md:py-3 border-none bg-transparent text-gray-600 text-xs md:text-sm cursor-pointer transition-all border-b-2", activeTab === "summary" ? "bg-white text-indigo-500 border-b-indigo-500 font-semibold" : "border-b-transparent hover:bg-gray-200 hover:text-gray-800"),
       onClick: () => setActiveTab("summary")
     },
     "\u6458\u8981"
   ), /* @__PURE__ */ React10.createElement(
     "button",
     {
-      className: `flex-1 min-w-[80px] md:min-w-[100px] px-3 md:px-4 py-2 md:py-3 border-none bg-transparent text-gray-600 text-xs md:text-sm cursor-pointer transition-all border-b-2 ${activeTab === "defines" ? "bg-white text-indigo-500 border-b-indigo-500 font-semibold" : "border-b-transparent hover:bg-gray-200 hover:text-gray-800"}`,
+      className: clsx("flex-1 min-w-[80px] md:min-w-[100px] px-3 md:px-4 py-2 md:py-3 border-none bg-transparent text-gray-600 text-xs md:text-sm cursor-pointer transition-all border-b-2", activeTab === "defines" ? "bg-white text-indigo-500 border-b-indigo-500 font-semibold" : "border-b-transparent hover:bg-gray-200 hover:text-gray-800"),
       onClick: () => setActiveTab("defines")
     },
     "\u5B8F\u5B9A\u4E49 (",
@@ -8719,7 +8701,7 @@ var FXViewer = ({
   ), /* @__PURE__ */ React10.createElement(
     "button",
     {
-      className: `flex-1 min-w-[80px] md:min-w-[100px] px-3 md:px-4 py-2 md:py-3 border-none bg-transparent text-gray-600 text-xs md:text-sm cursor-pointer transition-all border-b-2 ${activeTab === "textures" ? "bg-white text-indigo-500 border-b-indigo-500 font-semibold" : "border-b-transparent hover:bg-gray-200 hover:text-gray-800"}`,
+      className: clsx("flex-1 min-w-[80px] md:min-w-[100px] px-3 md:px-4 py-2 md:py-3 border-none bg-transparent text-gray-600 text-xs md:text-sm cursor-pointer transition-all border-b-2", activeTab === "textures" ? "bg-white text-indigo-500 border-b-indigo-500 font-semibold" : "border-b-transparent hover:bg-gray-200 hover:text-gray-800"),
       onClick: () => setActiveTab("textures")
     },
     "\u7EB9\u7406 (",
@@ -8728,7 +8710,7 @@ var FXViewer = ({
   ), /* @__PURE__ */ React10.createElement(
     "button",
     {
-      className: `flex-1 min-w-[80px] md:min-w-[100px] px-3 md:px-4 py-2 md:py-3 border-none bg-transparent text-gray-600 text-xs md:text-sm cursor-pointer transition-all border-b-2 ${activeTab === "parameters" ? "bg-white text-indigo-500 border-b-indigo-500 font-semibold" : "border-b-transparent hover:bg-gray-200 hover:text-gray-800"}`,
+      className: clsx("flex-1 min-w-[80px] md:min-w-[100px] px-3 md:px-4 py-2 md:py-3 border-none bg-transparent text-gray-600 text-xs md:text-sm cursor-pointer transition-all border-b-2", activeTab === "parameters" ? "bg-white text-indigo-500 border-b-indigo-500 font-semibold" : "border-b-transparent hover:bg-gray-200 hover:text-gray-800"),
       onClick: () => setActiveTab("parameters")
     },
     "\u53C2\u6570 (",
@@ -8737,17 +8719,17 @@ var FXViewer = ({
   ), /* @__PURE__ */ React10.createElement(
     "button",
     {
-      className: `flex-1 min-w-[80px] md:min-w-[100px] px-3 md:px-4 py-2 md:py-3 border-none bg-transparent text-gray-600 text-xs md:text-sm cursor-pointer transition-all border-b-2 ${activeTab === "validation" ? "bg-white text-indigo-500 border-b-indigo-500 font-semibold" : "border-b-transparent hover:bg-gray-200 hover:text-gray-800"}`,
+      className: clsx("flex-1 min-w-[80px] md:min-w-[100px] px-3 md:px-4 py-2 md:py-3 border-none bg-transparent text-gray-600 text-xs md:text-sm cursor-pointer transition-all border-b-2", activeTab === "validation" ? "bg-white text-indigo-500 border-b-indigo-500 font-semibold" : "border-b-transparent hover:bg-gray-200 hover:text-gray-800"),
       onClick: () => setActiveTab("validation")
     },
     "\u9A8C\u8BC1"
   )), /* @__PURE__ */ React10.createElement("div", { className: "p-4 md:p-6 max-h-[500px] md:max-h-[600px] overflow-y-auto" }, activeTab === "summary" && /* @__PURE__ */ React10.createElement(SummaryTab, { summary, effect }), activeTab === "defines" && /* @__PURE__ */ React10.createElement(DefinesTab, { effect }), activeTab === "textures" && /* @__PURE__ */ React10.createElement(TexturesTab, { effect }), activeTab === "parameters" && /* @__PURE__ */ React10.createElement(ParametersTab, { effect }), activeTab === "validation" && /* @__PURE__ */ React10.createElement(ValidationTab, { validation })));
 };
-var SummaryTab = ({ summary, effect }) => /* @__PURE__ */ React10.createElement("div", null, /* @__PURE__ */ React10.createElement("div", { className: "grid grid-cols-2 md:grid-cols-[repeat(auto-fit,minmax(150px,1fr))] gap-4 mb-8" }, /* @__PURE__ */ React10.createElement("div", { className: "p-6 bg-gradient-to-br from-gray-100 to-blue-100 rounded-lg text-center" }, /* @__PURE__ */ React10.createElement("div", { className: "text-xs text-gray-600 mb-2 uppercase tracking-wide" }, "\u5B8F\u5B9A\u4E49"), /* @__PURE__ */ React10.createElement("div", { className: "text-3xl font-bold text-gray-800" }, summary.defineCount)), /* @__PURE__ */ React10.createElement("div", { className: "p-6 bg-gradient-to-br from-gray-100 to-blue-100 rounded-lg text-center" }, /* @__PURE__ */ React10.createElement("div", { className: "text-xs text-gray-600 mb-2 uppercase tracking-wide" }, "\u53C2\u6570"), /* @__PURE__ */ React10.createElement("div", { className: "text-3xl font-bold text-gray-800" }, summary.parameterCount)), /* @__PURE__ */ React10.createElement("div", { className: "p-6 bg-gradient-to-br from-gray-100 to-blue-100 rounded-lg text-center" }, /* @__PURE__ */ React10.createElement("div", { className: "text-xs text-gray-600 mb-2 uppercase tracking-wide" }, "\u7EB9\u7406"), /* @__PURE__ */ React10.createElement("div", { className: "text-3xl font-bold text-gray-800" }, summary.textureCount)), /* @__PURE__ */ React10.createElement("div", { className: "p-6 bg-gradient-to-br from-gray-100 to-blue-100 rounded-lg text-center" }, /* @__PURE__ */ React10.createElement("div", { className: "text-xs text-gray-600 mb-2 uppercase tracking-wide" }, "Technique"), /* @__PURE__ */ React10.createElement("div", { className: "text-3xl font-bold text-gray-800" }, summary.techniqueCount))), /* @__PURE__ */ React10.createElement("div", { className: "mt-8" }, /* @__PURE__ */ React10.createElement("h3", { className: "text-lg m-0 mb-4 text-gray-800 border-b-2 border-indigo-500 pb-2" }, "\u529F\u80FD\u7279\u6027"), /* @__PURE__ */ React10.createElement("div", { className: "flex flex-wrap gap-3" }, /* @__PURE__ */ React10.createElement("div", { className: `px-4 py-2 rounded-full text-sm font-medium ${summary.hasLocalShadow ? "bg-green-100 text-green-800" : "bg-red-100 text-red-800"}` }, summary.hasLocalShadow ? "\u2713" : "\u2717", " LocalShadow"), /* @__PURE__ */ React10.createElement("div", { className: `px-4 py-2 rounded-full text-sm font-medium ${summary.hasExcellentShadow ? "bg-green-100 text-green-800" : "bg-red-100 text-red-800"}` }, summary.hasExcellentShadow ? "\u2713" : "\u2717", " ExcellentShadow"), /* @__PURE__ */ React10.createElement("div", { className: `px-4 py-2 rounded-full text-sm font-medium ${summary.hasHgShadow ? "bg-green-100 text-green-800" : "bg-red-100 text-red-800"}` }, summary.hasHgShadow ? "\u2713" : "\u2717", " HgShadow"))), effect.includes.length > 0 && /* @__PURE__ */ React10.createElement("div", { className: "mt-8" }, /* @__PURE__ */ React10.createElement("h3", { className: "text-lg m-0 mb-4 text-gray-800 border-b-2 border-indigo-500 pb-2" }, "\u5305\u542B\u6587\u4EF6"), /* @__PURE__ */ React10.createElement("ul", { className: "list-none p-0 m-0" }, effect.includes.map((inc, idx) => /* @__PURE__ */ React10.createElement("li", { key: idx, className: "py-2 border-b border-gray-200 last:border-b-0" }, /* @__PURE__ */ React10.createElement("code", { className: "bg-gray-100 px-2 py-1 rounded text-xs font-mono" }, inc))))), effect.controllers.length > 0 && /* @__PURE__ */ React10.createElement("div", { className: "mt-8" }, /* @__PURE__ */ React10.createElement("h3", { className: "text-lg m-0 mb-4 text-gray-800 border-b-2 border-indigo-500 pb-2" }, "\u63A7\u5236\u5668"), /* @__PURE__ */ React10.createElement("ul", { className: "list-none p-0 m-0" }, effect.controllers.map((ctrl, idx) => /* @__PURE__ */ React10.createElement("li", { key: idx, className: "py-2 border-b border-gray-200 last:border-b-0" }, /* @__PURE__ */ React10.createElement("strong", null, ctrl.name), ": ", ctrl.objectName, " / ", ctrl.itemName)))));
-var DefinesTab = ({ effect }) => /* @__PURE__ */ React10.createElement("div", null, /* @__PURE__ */ React10.createElement("table", { className: "w-full border-collapse text-xs md:text-sm" }, /* @__PURE__ */ React10.createElement("thead", { className: "bg-gray-100 border-b-2 border-gray-300" }, /* @__PURE__ */ React10.createElement("tr", null, /* @__PURE__ */ React10.createElement("th", { className: "px-2 md:px-3 py-2 md:py-3 text-left font-semibold text-gray-800" }, "\u540D\u79F0"), /* @__PURE__ */ React10.createElement("th", { className: "px-2 md:px-3 py-2 md:py-3 text-left font-semibold text-gray-800" }, "\u503C"), /* @__PURE__ */ React10.createElement("th", { className: "px-2 md:px-3 py-2 md:py-3 text-left font-semibold text-gray-800" }, "\u72B6\u6001"), /* @__PURE__ */ React10.createElement("th", { className: "px-2 md:px-3 py-2 md:py-3 text-left font-semibold text-gray-800" }, "\u884C\u53F7"))), /* @__PURE__ */ React10.createElement("tbody", null, effect.defines.map((define, idx) => /* @__PURE__ */ React10.createElement("tr", { key: idx, className: `hover:bg-gray-50 ${define.isCommented ? "opacity-50" : ""}` }, /* @__PURE__ */ React10.createElement("td", { className: "px-2 md:px-3 py-2 md:py-3 border-b border-gray-200" }, /* @__PURE__ */ React10.createElement("code", { className: "bg-gray-100 px-2 py-1 rounded text-xs font-mono" }, define.name)), /* @__PURE__ */ React10.createElement("td", { className: "px-2 md:px-3 py-2 md:py-3 border-b border-gray-200" }, define.value || "-"), /* @__PURE__ */ React10.createElement("td", { className: "px-2 md:px-3 py-2 md:py-3 border-b border-gray-200" }, /* @__PURE__ */ React10.createElement("span", { className: `inline-block px-3 py-1 rounded-xl text-xs font-medium ${define.isCommented ? "bg-red-100 text-red-800" : "bg-green-100 text-green-800"}` }, define.isCommented ? "\u7981\u7528" : "\u542F\u7528")), /* @__PURE__ */ React10.createElement("td", { className: "px-2 md:px-3 py-2 md:py-3 border-b border-gray-200" }, define.lineNumber))))));
-var TexturesTab = ({ effect }) => /* @__PURE__ */ React10.createElement("div", null, effect.textures.length === 0 ? /* @__PURE__ */ React10.createElement("p", { className: "text-center text-gray-500 py-8 italic" }, "\u672A\u627E\u5230\u7EB9\u7406\u5B9A\u4E49") : /* @__PURE__ */ React10.createElement("table", { className: "w-full border-collapse text-xs md:text-sm" }, /* @__PURE__ */ React10.createElement("thead", { className: "bg-gray-100 border-b-2 border-gray-300" }, /* @__PURE__ */ React10.createElement("tr", null, /* @__PURE__ */ React10.createElement("th", { className: "px-2 md:px-3 py-2 md:py-3 text-left font-semibold text-gray-800" }, "\u540D\u79F0"), /* @__PURE__ */ React10.createElement("th", { className: "px-2 md:px-3 py-2 md:py-3 text-left font-semibold text-gray-800" }, "\u8DEF\u5F84"), /* @__PURE__ */ React10.createElement("th", { className: "px-2 md:px-3 py-2 md:py-3 text-left font-semibold text-gray-800" }, "\u5C3A\u5BF8"), /* @__PURE__ */ React10.createElement("th", { className: "px-2 md:px-3 py-2 md:py-3 text-left font-semibold text-gray-800" }, "\u7528\u9014"))), /* @__PURE__ */ React10.createElement("tbody", null, effect.textures.map((texture, idx) => /* @__PURE__ */ React10.createElement("tr", { key: idx, className: "hover:bg-gray-50" }, /* @__PURE__ */ React10.createElement("td", { className: "px-2 md:px-3 py-2 md:py-3 border-b border-gray-200" }, /* @__PURE__ */ React10.createElement("code", { className: "bg-gray-100 px-2 py-1 rounded text-xs font-mono" }, texture.name)), /* @__PURE__ */ React10.createElement("td", { className: "px-2 md:px-3 py-2 md:py-3 border-b border-gray-200" }, texture.path), /* @__PURE__ */ React10.createElement("td", { className: "px-2 md:px-3 py-2 md:py-3 border-b border-gray-200" }, texture.width && texture.height ? `${texture.width}\xD7${texture.height}` : "-"), /* @__PURE__ */ React10.createElement("td", { className: "px-2 md:px-3 py-2 md:py-3 border-b border-gray-200" }, texture.purpose || "-"))))));
+var SummaryTab = ({ summary, effect }) => /* @__PURE__ */ React10.createElement("div", null, /* @__PURE__ */ React10.createElement("div", { className: "grid grid-cols-2 md:grid-cols-[repeat(auto-fit,minmax(150px,1fr))] gap-4 mb-8" }, /* @__PURE__ */ React10.createElement("div", { className: "p-6 bg-gradient-to-br from-gray-100 to-blue-100 rounded-lg text-center" }, /* @__PURE__ */ React10.createElement("div", { className: "text-xs text-gray-600 mb-2 uppercase tracking-wide" }, "\u5B8F\u5B9A\u4E49"), /* @__PURE__ */ React10.createElement("div", { className: "text-3xl font-bold text-gray-800" }, summary.defineCount)), /* @__PURE__ */ React10.createElement("div", { className: "p-6 bg-gradient-to-br from-gray-100 to-blue-100 rounded-lg text-center" }, /* @__PURE__ */ React10.createElement("div", { className: "text-xs text-gray-600 mb-2 uppercase tracking-wide" }, "\u53C2\u6570"), /* @__PURE__ */ React10.createElement("div", { className: "text-3xl font-bold text-gray-800" }, summary.parameterCount)), /* @__PURE__ */ React10.createElement("div", { className: "p-6 bg-gradient-to-br from-gray-100 to-blue-100 rounded-lg text-center" }, /* @__PURE__ */ React10.createElement("div", { className: "text-xs text-gray-600 mb-2 uppercase tracking-wide" }, "\u7EB9\u7406"), /* @__PURE__ */ React10.createElement("div", { className: "text-3xl font-bold text-gray-800" }, summary.textureCount)), /* @__PURE__ */ React10.createElement("div", { className: "p-6 bg-gradient-to-br from-gray-100 to-blue-100 rounded-lg text-center" }, /* @__PURE__ */ React10.createElement("div", { className: "text-xs text-gray-600 mb-2 uppercase tracking-wide" }, "Technique"), /* @__PURE__ */ React10.createElement("div", { className: "text-3xl font-bold text-gray-800" }, summary.techniqueCount))), /* @__PURE__ */ React10.createElement("div", { className: "mt-8" }, /* @__PURE__ */ React10.createElement("h3", { className: "text-lg m-0 mb-4 text-gray-800 border-b-2 border-indigo-500 pb-2" }, "\u529F\u80FD\u7279\u6027"), /* @__PURE__ */ React10.createElement("div", { className: "flex flex-wrap gap-3" }, /* @__PURE__ */ React10.createElement("div", { className: clsx("px-4 py-2 rounded-full text-sm font-medium", summary.hasLocalShadow ? "bg-green-100 text-green-800" : "bg-red-100 text-red-800") }, summary.hasLocalShadow ? "\u2713" : "\u2717", " LocalShadow"), /* @__PURE__ */ React10.createElement("div", { className: clsx("px-4 py-2 rounded-full text-sm font-medium", summary.hasExcellentShadow ? "bg-green-100 text-green-800" : "bg-red-100 text-red-800") }, summary.hasExcellentShadow ? "\u2713" : "\u2717", " ExcellentShadow"), /* @__PURE__ */ React10.createElement("div", { className: clsx("px-4 py-2 rounded-full text-sm font-medium", summary.hasHgShadow ? "bg-green-100 text-green-800" : "bg-red-100 text-red-800") }, summary.hasHgShadow ? "\u2713" : "\u2717", " HgShadow"))), effect.includes.length > 0 && /* @__PURE__ */ React10.createElement("div", { className: "mt-8" }, /* @__PURE__ */ React10.createElement("h3", { className: "text-lg m-0 mb-4 text-gray-800 border-b-2 border-indigo-500 pb-2" }, "\u5305\u542B\u6587\u4EF6"), /* @__PURE__ */ React10.createElement("ul", { className: "list-none p-0 m-0" }, effect.includes.map((inc, idx) => /* @__PURE__ */ React10.createElement("li", { key: idx, className: "py-2 border-b border-gray-200 last:border-b-0" }, /* @__PURE__ */ React10.createElement("code", { className: "bg-gray-100 px-2 py-1 rounded text-xs font-mono" }, inc))))), effect.controllers.length > 0 && /* @__PURE__ */ React10.createElement("div", { className: "mt-8" }, /* @__PURE__ */ React10.createElement("h3", { className: "text-lg m-0 mb-4 text-gray-800 border-b-2 border-indigo-500 pb-2" }, "\u63A7\u5236\u5668"), /* @__PURE__ */ React10.createElement("ul", { className: "list-none p-0 m-0" }, effect.controllers.map((ctrl, idx) => /* @__PURE__ */ React10.createElement("li", { key: idx, className: "py-2 border-b border-gray-200 last:border-b-0" }, /* @__PURE__ */ React10.createElement("strong", null, ctrl.name), ": ", ctrl.objectName, " / ", ctrl.itemName)))));
+var DefinesTab = ({ effect }) => /* @__PURE__ */ React10.createElement("div", null, /* @__PURE__ */ React10.createElement("table", { className: "w-full border-collapse text-xs md:text-sm" }, /* @__PURE__ */ React10.createElement("thead", { className: "bg-gray-100 border-b-2 border-gray-300" }, /* @__PURE__ */ React10.createElement("tr", null, /* @__PURE__ */ React10.createElement("th", { className: "px-2 md:px-3 py-2 md:py-3 text-left font-semibold text-gray-800" }, "\u540D\u79F0"), /* @__PURE__ */ React10.createElement("th", { className: "px-2 md:px-3 py-2 md:py-3 text-left font-semibold text-gray-800" }, "\u503C"), /* @__PURE__ */ React10.createElement("th", { className: "px-2 md:px-3 py-2 md:py-3 text-left font-semibold text-gray-800" }, "\u72B6\u6001"), /* @__PURE__ */ React10.createElement("th", { className: "px-2 md:px-3 py-2 md:py-3 text-left font-semibold text-gray-800" }, "\u884C\u53F7"))), /* @__PURE__ */ React10.createElement("tbody", null, effect.defines.map((define, idx) => /* @__PURE__ */ React10.createElement("tr", { key: idx, className: clsx("hover:bg-gray-50", define.isCommented ? "opacity-50" : "") }, /* @__PURE__ */ React10.createElement("td", { className: "px-2 md:px-3 py-2 md:py-3 border-b border-gray-200" }, /* @__PURE__ */ React10.createElement("code", { className: "bg-gray-100 px-2 py-1 rounded text-xs font-mono" }, define.name)), /* @__PURE__ */ React10.createElement("td", { className: "px-2 md:px-3 py-2 md:py-3 border-b border-gray-200" }, define.value || "-"), /* @__PURE__ */ React10.createElement("td", { className: "px-2 md:px-3 py-2 md:py-3 border-b border-gray-200" }, /* @__PURE__ */ React10.createElement("span", { className: clsx("inline-block px-3 py-1 rounded-xl text-xs font-medium", define.isCommented ? "bg-red-100 text-red-800" : "bg-green-100 text-green-800") }, define.isCommented ? "\u7981\u7528" : "\u542F\u7528")), /* @__PURE__ */ React10.createElement("td", { className: "px-2 md:px-3 py-2 md:py-3 border-b border-gray-200" }, define.lineNumber))))));
+var TexturesTab = ({ effect }) => /* @__PURE__ */ React10.createElement("div", null, effect.textures.length === 0 ? /* @__PURE__ */ React10.createElement("p", { className: "text-center text-gray-500 py-8 italic" }, "\u672A\u627E\u5230\u7EB9\u7406\u5B9A\u4E49") : /* @__PURE__ */ React10.createElement("table", { className: "w-full border-collapse text-xs md:text-sm" }, /* @__PURE__ */ React10.createElement("thead", { className: "bg-gray-100 border-b-2 border-gray-300" }, /* @__PURE__ */ React10.createElement("tr", null, /* @__PURE__ */ React10.createElement("th", { className: "px-2 md:px-3 py-2 md:py-3 text-left font-semibold text-gray-800" }, "\u540D\u79F0"), /* @__PURE__ */ React10.createElement("th", { className: "px-2 md:px-3 py-2 md:py-3 text-left font-semibold text-gray-800" }, "\u8DEF\u5F84"), /* @__PURE__ */ React10.createElement("th", { className: "px-2 md:px-3 py-2 md:py-3 text-left font-semibold text-gray-800" }, "\u5C3A\u5BF8"), /* @__PURE__ */ React10.createElement("th", { className: "px-2 md:px-3 py-2 md:py-3 text-left font-semibold text-gray-800" }, "\u7528\u9014"))), /* @__PURE__ */ React10.createElement("tbody", null, effect.textures.map((texture, idx) => /* @__PURE__ */ React10.createElement("tr", { key: idx, className: "hover:bg-gray-50" }, /* @__PURE__ */ React10.createElement("td", { className: "px-2 md:px-3 py-2 md:py-3 border-b border-gray-200" }, /* @__PURE__ */ React10.createElement("code", { className: "bg-gray-100 px-2 py-1 rounded text-xs font-mono" }, texture.name)), /* @__PURE__ */ React10.createElement("td", { className: "px-2 md:px-3 py-2 md:py-3 border-b border-gray-200" }, texture.path), /* @__PURE__ */ React10.createElement("td", { className: "px-2 md:px-3 py-2 md:py-3 border-b border-gray-200" }, texture.width && texture.height ? texture.width + "\xD7" + texture.height : "-"), /* @__PURE__ */ React10.createElement("td", { className: "px-2 md:px-3 py-2 md:py-3 border-b border-gray-200" }, texture.purpose || "-"))))));
 var ParametersTab = ({ effect }) => /* @__PURE__ */ React10.createElement("div", null, /* @__PURE__ */ React10.createElement("table", { className: "w-full border-collapse text-xs md:text-sm" }, /* @__PURE__ */ React10.createElement("thead", { className: "bg-gray-100 border-b-2 border-gray-300" }, /* @__PURE__ */ React10.createElement("tr", null, /* @__PURE__ */ React10.createElement("th", { className: "px-2 md:px-3 py-2 md:py-3 text-left font-semibold text-gray-800" }, "\u540D\u79F0"), /* @__PURE__ */ React10.createElement("th", { className: "px-2 md:px-3 py-2 md:py-3 text-left font-semibold text-gray-800" }, "\u7C7B\u578B"), /* @__PURE__ */ React10.createElement("th", { className: "px-2 md:px-3 py-2 md:py-3 text-left font-semibold text-gray-800" }, "\u8BED\u4E49"), /* @__PURE__ */ React10.createElement("th", { className: "px-2 md:px-3 py-2 md:py-3 text-left font-semibold text-gray-800" }, "\u9ED8\u8BA4\u503C"), /* @__PURE__ */ React10.createElement("th", { className: "px-2 md:px-3 py-2 md:py-3 text-left font-semibold text-gray-800" }, "\u884C\u53F7"))), /* @__PURE__ */ React10.createElement("tbody", null, effect.parameters.map((param, idx) => /* @__PURE__ */ React10.createElement("tr", { key: idx, className: "hover:bg-gray-50" }, /* @__PURE__ */ React10.createElement("td", { className: "px-2 md:px-3 py-2 md:py-3 border-b border-gray-200" }, /* @__PURE__ */ React10.createElement("code", { className: "bg-gray-100 px-2 py-1 rounded text-xs font-mono" }, param.name)), /* @__PURE__ */ React10.createElement("td", { className: "px-2 md:px-3 py-2 md:py-3 border-b border-gray-200" }, /* @__PURE__ */ React10.createElement("code", { className: "bg-gray-100 px-2 py-1 rounded text-xs font-mono" }, param.type)), /* @__PURE__ */ React10.createElement("td", { className: "px-2 md:px-3 py-2 md:py-3 border-b border-gray-200" }, param.semantic || "-"), /* @__PURE__ */ React10.createElement("td", { className: "px-2 md:px-3 py-2 md:py-3 border-b border-gray-200" }, param.defaultValue || "-"), /* @__PURE__ */ React10.createElement("td", { className: "px-2 md:px-3 py-2 md:py-3 border-b border-gray-200" }, param.lineNumber))))));
-var ValidationTab = ({ validation }) => /* @__PURE__ */ React10.createElement("div", null, /* @__PURE__ */ React10.createElement("div", { className: `p-6 rounded-lg mb-6 text-center ${validation.isValid ? "bg-green-100 text-green-800" : "bg-red-100 text-red-800"}` }, /* @__PURE__ */ React10.createElement("h3", { className: "m-0 text-xl" }, validation.isValid ? "\u2713 \u9A8C\u8BC1\u901A\u8FC7" : "\u2717 \u9A8C\u8BC1\u5931\u8D25")), validation.errors.length > 0 && /* @__PURE__ */ React10.createElement("div", { className: "mb-6" }, /* @__PURE__ */ React10.createElement("h4", { className: "m-0 mb-3 text-base text-gray-800" }, "\u9519\u8BEF (", validation.errors.length, ")"), /* @__PURE__ */ React10.createElement("ul", { className: "list-none p-0 m-0" }, validation.errors.map((error, idx) => /* @__PURE__ */ React10.createElement("li", { key: idx, className: "p-3 mb-2 bg-red-100 text-red-800 rounded border-l-4 border-red-800" }, error)))), validation.warnings.length > 0 && /* @__PURE__ */ React10.createElement("div", { className: "mb-6" }, /* @__PURE__ */ React10.createElement("h4", { className: "m-0 mb-3 text-base text-gray-800" }, "\u8B66\u544A (", validation.warnings.length, ")"), /* @__PURE__ */ React10.createElement("ul", { className: "list-none p-0 m-0" }, validation.warnings.map((warning, idx) => /* @__PURE__ */ React10.createElement("li", { key: idx, className: "p-3 mb-2 bg-orange-100 text-orange-700 rounded border-l-4 border-orange-700" }, warning)))), validation.isValid && validation.warnings.length === 0 && /* @__PURE__ */ React10.createElement("p", { className: "text-center text-green-800 py-8 text-lg" }, "FX\u6587\u4EF6\u7ED3\u6784\u5B8C\u6574\uFF0C\u6CA1\u6709\u53D1\u73B0\u95EE\u9898\u3002"));
+var ValidationTab = ({ validation }) => /* @__PURE__ */ React10.createElement("div", null, /* @__PURE__ */ React10.createElement("div", { className: clsx("p-6 rounded-lg mb-6 text-center", validation.isValid ? "bg-green-100 text-green-800" : "bg-red-100 text-red-800") }, /* @__PURE__ */ React10.createElement("h3", { className: "m-0 text-xl" }, validation.isValid ? "\u2713 \u9A8C\u8BC1\u901A\u8FC7" : "\u2717 \u9A8C\u8BC1\u5931\u8D25")), validation.errors.length > 0 && /* @__PURE__ */ React10.createElement("div", { className: "mb-6" }, /* @__PURE__ */ React10.createElement("h4", { className: "m-0 mb-3 text-base text-gray-800" }, "\u9519\u8BEF (", validation.errors.length, ")"), /* @__PURE__ */ React10.createElement("ul", { className: "list-none p-0 m-0" }, validation.errors.map((error, idx) => /* @__PURE__ */ React10.createElement("li", { key: idx, className: "p-3 mb-2 bg-red-100 text-red-800 rounded border-l-4 border-red-800" }, error)))), validation.warnings.length > 0 && /* @__PURE__ */ React10.createElement("div", { className: "mb-6" }, /* @__PURE__ */ React10.createElement("h4", { className: "m-0 mb-3 text-base text-gray-800" }, "\u8B66\u544A (", validation.warnings.length, ")"), /* @__PURE__ */ React10.createElement("ul", { className: "list-none p-0 m-0" }, validation.warnings.map((warning, idx) => /* @__PURE__ */ React10.createElement("li", { key: idx, className: "p-3 mb-2 bg-orange-100 text-orange-700 rounded border-l-4 border-orange-700" }, warning)))), validation.isValid && validation.warnings.length === 0 && /* @__PURE__ */ React10.createElement("p", { className: "text-center text-green-800 py-8 text-lg" }, "FX\u6587\u4EF6\u7ED3\u6784\u5B8C\u6574\uFF0C\u6CA1\u6709\u53D1\u73B0\u95EE\u9898\u3002"));
 FXViewer.displayName = "FXViewer";
 var FXThreePreview = ({
   effect,
@@ -8873,12 +8855,12 @@ var FXThreePreview = ({
     };
   }, [effect, texturePath, objectType]);
   if (loading) {
-    return /* @__PURE__ */ React10.createElement("div", { className: `fx-three-preview loading ${className}` }, /* @__PURE__ */ React10.createElement("div", { className: "preview-loading" }, "\u52A0\u8F7D\u4E2D..."));
+    return /* @__PURE__ */ React10.createElement("div", { className: clsx("fx-three-preview loading", className) }, /* @__PURE__ */ React10.createElement("div", { className: "preview-loading" }, "\u52A0\u8F7D\u4E2D..."));
   }
   if (error) {
-    return /* @__PURE__ */ React10.createElement("div", { className: `fx-three-preview error ${className}` }, /* @__PURE__ */ React10.createElement("div", { className: "preview-error" }, /* @__PURE__ */ React10.createElement("h3", null, "\u274C \u6E32\u67D3\u5931\u8D25"), /* @__PURE__ */ React10.createElement("p", null, error)));
+    return /* @__PURE__ */ React10.createElement("div", { className: clsx("fx-three-preview error", className) }, /* @__PURE__ */ React10.createElement("div", { className: "preview-error" }, /* @__PURE__ */ React10.createElement("h3", null, "\u274C \u6E32\u67D3\u5931\u8D25"), /* @__PURE__ */ React10.createElement("p", null, error)));
   }
-  return /* @__PURE__ */ React10.createElement("div", { className: `fx-three-preview ${className}` }, /* @__PURE__ */ React10.createElement(
+  return /* @__PURE__ */ React10.createElement("div", { className: clsx("fx-three-preview", className) }, /* @__PURE__ */ React10.createElement(
     "div",
     {
       ref: containerRef,