sa2kit 1.6.2 → 1.6.3

package/dist/mmd/index.js

@@ -224,6 +224,7 @@ var MMDPlayerBase = React6.forwardRef((props, ref) => {
   const renderEffect = props.renderEffect || stage.renderEffect || "default";
   const outlineOptions = { ...stage.outlineOptions, ...props.outlineOptions };
   const bloomOptions = { ...stage.bloomOptions, ...props.bloomOptions };
+  const toonOptions = { ...stage.toonOptions, ...props.toonOptions };
   const containerRef = React6.useRef(null);
   const sceneRef = React6.useRef(null);
   const cameraRef = React6.useRef(null);
@@ -421,6 +422,11 @@ var MMDPlayerBase = React6.forwardRef((props, ref) => {
         const pixelRatio = mobileOptimization.enabled ? mobileOptimization.pixelRatio || Math.min(window.devicePixelRatio, 2) : window.devicePixelRatio;
         renderer.setPixelRatio(pixelRatio);
         console.log("[MMDPlayerBase] Pixel ratio set to:", pixelRatio);
+        if (renderEffect.includes("outline") || toonOptions.enabled) {
+          renderer.toneMapping = THREE__namespace.NoToneMapping;
+        } else {
+          renderer.toneMapping = THREE__namespace.ACESFilmicToneMapping;
+        }
         if (checkCancelled()) {
           renderer.dispose();
           return;
@@ -588,6 +594,41 @@ var MMDPlayerBase = React6.forwardRef((props, ref) => {
           }
         }
         const enablePhysics = stage.enablePhysics !== false && !mobileOptimization.disablePhysics;
+        mesh.traverse((obj) => {
+          if (obj instanceof THREE__namespace.Mesh || obj instanceof THREE__namespace.SkinnedMesh) {
+            const materials = Array.isArray(obj.material) ? obj.material : [obj.material];
+            materials.forEach((m) => {
+              if (!m.userData) m.userData = {};
+              if (!m.userData.outlineParameters) {
+                m.userData.outlineParameters = {
+                  thickness: outlineOptions.thickness ?? 3e-3,
+                  color: new THREE__namespace.Color(outlineOptions.color ?? "#000000").toArray(),
+                  alpha: 1,
+                  visible: true,
+                  keepAlive: true
+                };
+              } else {
+                if (outlineOptions.thickness !== void 0) {
+                  m.userData.outlineParameters.thickness = outlineOptions.thickness;
+                }
+                if (outlineOptions.color !== void 0) {
+                  m.userData.outlineParameters.color = new THREE__namespace.Color(outlineOptions.color).toArray();
+                }
+              }
+              if (m instanceof THREE__namespace.MeshPhongMaterial) {
+                if (toonOptions.enabled !== false && (toonOptions.enabled || renderEffect.includes("outline"))) {
+                  m.shininess = toonOptions.shininess ?? 0;
+                  m.specular.setScalar(0);
+                  if (toonOptions.forceHardShading && m.toonMap) {
+                    m.toonMap.magFilter = THREE__namespace.NearestFilter;
+                    m.toonMap.minFilter = THREE__namespace.NearestFilter;
+                    m.toonMap.needsUpdate = true;
+                  }
+                }
+              }
+            });
+          }
+        });
         helper.add(mesh, {
           animation,
           physics: enablePhysics
@@ -717,6 +758,22 @@ var MMDPlayerBase = React6.forwardRef((props, ref) => {
                 if (mesh2.morphTargetInfluences) {
                   mesh2.morphTargetInfluences = [];
                 }
+                materials.forEach((m) => {
+                  if (!m.userData) m.userData = {};
+                  m.userData.outlineParameters = {
+                    thickness: outlineOptions.thickness ?? 3e-3,
+                    color: new THREE__namespace.Color(outlineOptions.color ?? "#000000").toArray(),
+                    alpha: 1,
+                    visible: true,
+                    keepAlive: true
+                  };
+                  if (m instanceof THREE__namespace.MeshPhongMaterial) {
+                    if (toonOptions.enabled !== false && (toonOptions.enabled || renderEffect.includes("outline"))) {
+                      m.shininess = toonOptions.shininess ?? 0;
+                      m.specular.setScalar(0);
+                    }
+                  }
+                });
               }
             });
             try {
@@ -1192,7 +1249,27 @@ ${errorMessage}
     }
   }, [loop]);
   React6.useEffect(() => {
-    if (outlineEffectRef.current) ;
+    if (outlineEffectRef.current) {
+      outlineEffectRef.current.defaultThickness = outlineOptions.thickness ?? 3e-3;
+      outlineEffectRef.current.defaultColor = new THREE__namespace.Color(outlineOptions.color ?? "#000000").toArray();
+      if (sceneRef.current) {
+        sceneRef.current.traverse((obj) => {
+          if (obj instanceof THREE__namespace.Mesh || obj instanceof THREE__namespace.SkinnedMesh) {
+            const materials = Array.isArray(obj.material) ? obj.material : [obj.material];
+            materials.forEach((m) => {
+              if (m.userData && m.userData.outlineParameters) {
+                if (outlineOptions.thickness !== void 0) {
+                  m.userData.outlineParameters.thickness = outlineOptions.thickness;
+                }
+                if (outlineOptions.color !== void 0) {
+                  m.userData.outlineParameters.color = new THREE__namespace.Color(outlineOptions.color).toArray();
+                }
+              }
+            });
+          }
+        });
+      }
+    }
     if (composerRef.current) {
       const bloomPass = composerRef.current.passes.find((p) => p instanceof threeStdlib.UnrealBloomPass);
       if (bloomPass) {
@@ -1201,7 +1278,28 @@ ${errorMessage}
         bloomPass.threshold = bloomOptions.threshold ?? 0.8;
       }
     }
-  }, [bloomOptions.strength, bloomOptions.radius, bloomOptions.threshold]);
+  }, [outlineOptions.thickness, outlineOptions.color, bloomOptions.strength, bloomOptions.radius, bloomOptions.threshold]);
+  React6.useEffect(() => {
+    if (!sceneRef.current) return;
+    sceneRef.current.traverse((obj) => {
+      if (obj instanceof THREE__namespace.Mesh || obj instanceof THREE__namespace.SkinnedMesh) {
+        const materials = Array.isArray(obj.material) ? obj.material : [obj.material];
+        materials.forEach((m) => {
+          if (m instanceof THREE__namespace.MeshPhongMaterial) {
+            if (toonOptions.enabled !== false && (toonOptions.enabled || renderEffect.includes("outline"))) {
+              m.shininess = toonOptions.shininess ?? 0;
+              m.specular.setScalar(0);
+              if (toonOptions.forceHardShading && m.toonMap) {
+                m.toonMap.magFilter = THREE__namespace.NearestFilter;
+                m.toonMap.minFilter = THREE__namespace.NearestFilter;
+                m.toonMap.needsUpdate = true;
+              }
+            }
+          }
+        });
+      }
+    });
+  }, [toonOptions.enabled, toonOptions.shininess, toonOptions.forceHardShading, renderEffect]);
   React6.useEffect(() => {
     if (!isReadyRef.current) return;
     if (sceneRef.current) {
@@ -2610,164 +2708,207 @@ var LoadingScreen = ({
   return reactDom.createPortal(content, portalContainer);
 };
 LoadingScreen.displayName = "LoadingScreen";
+var VNModal = ({ title, show, onClose, children }) => {
+  if (!show) return null;
+  return /* @__PURE__ */ React6__default.default.createElement(
+    "div",
+    {
+      className: "fixed inset-0 flex items-center justify-center bg-black/40 backdrop-blur-xl z-[1000000] pointer-events-auto transition-all animate-in fade-in zoom-in-95 duration-300",
+      onClick: onClose
+    },
+    /* @__PURE__ */ React6__default.default.createElement(
+      "div",
+      {
+        className: "w-full max-w-lg mx-4 p-8 rounded-[2.5rem] border border-white/40 shadow-[0_20px_80px_rgba(0,0,0,0.4)] relative overflow-hidden",
+        style: {
+          background: "linear-gradient(135deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.15))",
+          backdropFilter: "blur(40px) saturate(200%)",
+          WebkitBackdropFilter: "blur(40px) saturate(200%)"
+        },
+        onClick: (e) => e.stopPropagation()
+      },
+      /* @__PURE__ */ React6__default.default.createElement("div", { className: "absolute -top-24 -right-24 w-64 h-64 bg-cyan-400/20 rounded-full blur-3xl pointer-events-none" }),
+      /* @__PURE__ */ React6__default.default.createElement("div", { className: "absolute -bottom-24 -left-24 w-64 h-64 bg-pink-400/20 rounded-full blur-3xl pointer-events-none" }),
+      /* @__PURE__ */ React6__default.default.createElement("div", { className: "flex items-center justify-between mb-8 relative" }, /* @__PURE__ */ React6__default.default.createElement("div", { className: "flex flex-col" }, /* @__PURE__ */ React6__default.default.createElement("h2", { className: "text-2xl font-bold text-white tracking-wider drop-shadow-lg" }, title), /* @__PURE__ */ React6__default.default.createElement("div", { className: "h-1.5 w-16 bg-white/60 rounded-full mt-2 shadow-[0_0_10px_rgba(255,255,255,0.5)]" })), /* @__PURE__ */ React6__default.default.createElement(
+        "button",
+        {
+          onClick: onClose,
+          className: "w-12 h-12 rounded-full flex items-center justify-center bg-white/10 hover:bg-white/30 text-white transition-all border border-white/20 shadow-inner"
+        },
+        "\u2715"
+      )),
+      /* @__PURE__ */ React6__default.default.createElement("div", { className: "text-white leading-relaxed max-h-[50vh] overflow-y-auto pr-4 custom-scrollbar relative font-medium" }, children),
+      /* @__PURE__ */ React6__default.default.createElement("div", { className: "mt-10 flex justify-center relative" }, /* @__PURE__ */ React6__default.default.createElement(
+        "button",
+        {
+          onClick: onClose,
+          className: "px-14 py-3.5 rounded-2xl bg-white/20 hover:bg-white/40 text-white font-bold transition-all border border-white/50 shadow-[0_0_20px_rgba(255,255,255,0.2)] hover:scale-105 active:scale-95 tracking-[0.2em] uppercase text-sm"
+        },
+        "Confirm"
+      ))
+    )
+  );
+};
 var StartScreen = ({
   showStartScreen = false,
   scriptName = "",
-  startText = "\u70B9\u51FB\u5F00\u59CB",
+  startText = "\u5F00\u59CB\u6E38\u620F",
+  settingsText = "\u6E38\u620F\u8BBE\u7F6E",
+  aboutText = "\u5173\u4E8E\u4F5C\u54C1",
   onStart,
   className = ""
 }) => {
   const [isMounted, setIsMounted] = React6.useState(false);
+  const [showSettings, setShowSettings] = React6.useState(false);
+  const [showAbout, setShowAbout] = React6.useState(false);
   React6.useEffect(() => {
     setIsMounted(true);
   }, []);
-  console.log("[StartScreen] Render state:", {
-    showStartScreen,
-    scriptName,
-    isMounted
-  });
-  if (!isMounted) {
-    return null;
-  }
-  if (!showStartScreen) {
-    console.log("[StartScreen] Not showing, returning null");
-    return null;
-  }
+  if (!isMounted) return null;
+  if (!showStartScreen) return null;
   const content = /* @__PURE__ */ React6__default.default.createElement(
     "div",
     {
-      className: `fixed inset-0 w-screen h-screen flex items-center justify-center cursor-pointer ${className}`,
+      className: `fixed inset-0 w-screen h-screen flex items-center justify-center overflow-hidden ${className}`,
       style: {
         zIndex: 999999,
         pointerEvents: "auto",
-        backgroundColor: "rgba(0, 0, 0, 0.5)",
+        backgroundColor: "#050505",
         margin: 0,
         padding: 0
-      },
-      onClick: onStart
+      }
     },
-    /* @__PURE__ */ React6__default.default.createElement(
+    /* @__PURE__ */ React6__default.default.createElement("div", { className: "absolute inset-0 w-full h-full overflow-hidden" }, /* @__PURE__ */ React6__default.default.createElement(
       "div",
       {
-        className: "absolute inset-0 w-full h-full pointer-events-none",
+        className: "absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[150vw] h-[150vw] opacity-40 pointer-events-none",
         style: {
-          background: "linear-gradient(135deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.15))",
-          backdropFilter: "blur(40px) saturate(200%)",
-          WebkitBackdropFilter: "blur(40px) saturate(200%)"
+          background: "radial-gradient(circle at center, rgba(57, 197, 187, 0.4) 0%, rgba(255, 182, 193, 0.2) 30%, transparent 70%)",
+          filter: "blur(60px)",
+          animation: "pulse 10s ease-in-out infinite"
+        }
+      }
+    ), /* @__PURE__ */ React6__default.default.createElement("div", { className: "absolute inset-0 transition-opacity duration-1000" }, /* @__PURE__ */ React6__default.default.createElement("div", { className: "absolute top-[-10%] left-[-10%] w-[60%] h-[60%] bg-cyan-500/10 rounded-full blur-[120px] animate-blob" }), /* @__PURE__ */ React6__default.default.createElement("div", { className: "absolute bottom-[-10%] right-[-10%] w-[60%] h-[60%] bg-purple-500/10 rounded-full blur-[120px] animate-blob animation-delay-2000" }), /* @__PURE__ */ React6__default.default.createElement("div", { className: "absolute top-[20%] right-[10%] w-[40%] h-[40%] bg-pink-500/10 rounded-full blur-[100px] animate-blob animation-delay-4000" })), /* @__PURE__ */ React6__default.default.createElement("div", { className: "absolute inset-0 opacity-60" }, [...Array(40)].map((_, i) => /* @__PURE__ */ React6__default.default.createElement(
+      "div",
+      {
+        key: i,
+        className: "absolute bg-white/40 rounded-full",
+        style: {
+          width: Math.random() * 3 + 1 + "px",
+          height: Math.random() * 3 + 1 + "px",
+          top: Math.random() * 100 + "%",
+          left: Math.random() * 100 + "%",
+          boxShadow: "0 0 10px rgba(255,255,255,0.5)",
+          animation: `floatParticle ${Math.random() * 10 + 10}s linear infinite`,
+          animationDelay: `-${Math.random() * 20}s`
+        }
+      }
+    )))),
+    /* @__PURE__ */ React6__default.default.createElement("div", { className: "relative z-10 w-full max-w-5xl mx-auto px-6 flex flex-col items-center" }, /* @__PURE__ */ React6__default.default.createElement("div", { className: "text-center mb-20 md:mb-32 group flex flex-col items-center" }, /* @__PURE__ */ React6__default.default.createElement("div", { className: "w-40 h-px bg-gradient-to-r from-transparent via-white/60 to-transparent mb-10 shadow-[0_0_15px_rgba(255,255,255,0.5)]" }), /* @__PURE__ */ React6__default.default.createElement(
+      "h1",
+      {
+        className: "text-6xl md:text-8xl font-black text-white tracking-[0.15em] leading-tight select-none",
+        style: {
+          filter: "drop-shadow(0 0 20px rgba(255,255,255,0.3))",
+          textShadow: "0 10px 30px rgba(0,0,0,0.5)"
         }
       },
+      scriptName || "VISUAL NOVEL"
+    ), /* @__PURE__ */ React6__default.default.createElement("div", { className: "mt-10 flex flex-col items-center gap-4" }, /* @__PURE__ */ React6__default.default.createElement("div", { className: "h-1 w-32 bg-white rounded-full opacity-80 shadow-[0_0_20px_rgba(255,255,255,0.8)]" }), /* @__PURE__ */ React6__default.default.createElement("span", { className: "text-sm md:text-base tracking-[0.8em] text-white/60 font-medium uppercase translate-x-[0.4em]" }, "Adventure System"))), /* @__PURE__ */ React6__default.default.createElement("div", { className: "flex flex-col gap-10 items-center w-full max-w-sm" }, /* @__PURE__ */ React6__default.default.createElement(
+      "button",
+      {
+        onClick: onStart,
+        className: "group relative w-full h-20 flex items-center justify-center transition-all duration-500 active:scale-95"
+      },
       /* @__PURE__ */ React6__default.default.createElement(
         "div",
         {
-          className: "flex items-center justify-center flex-col inset-0 w-full h-full pointer-events-none",
-          style: {
-            background: `linear-gradient(45deg, 
-            rgba(255, 182, 193, 0.25) 0%, 
-            rgba(173, 216, 230, 0.25) 25%,
-            rgba(221, 160, 221, 0.25) 50%,
-            rgba(255, 218, 185, 0.25) 75%,
-            rgba(255, 182, 193, 0.25) 100%)`,
-            backgroundSize: "400% 400%",
-            animation: "gradientShift 15s ease infinite"
-          }
-        },
-        /* @__PURE__ */ React6__default.default.createElement(
-          "div",
-          {
-            className: "relative z-10 text-center px-16 py-14 rounded-3xl max-w-2xl mx-auto transform transition-all hover:scale-105",
-            style: {
-              background: "linear-gradient(135deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.15))",
-              backdropFilter: "blur(24px)",
-              WebkitBackdropFilter: "blur(24px)",
-              border: "2px solid rgba(255, 255, 255, 0.3)",
-              boxShadow: `
-            0 12px 48px rgba(255, 255, 255, 0.15),
-            0 4px 16px rgba(255, 255, 255, 0.1),
-            inset 0 1px 0 rgba(255, 255, 255, 0.4)
-          `
-            }
-          },
-          /* @__PURE__ */ React6__default.default.createElement(
-            "div",
-            {
-              className: "absolute top-0 left-0 right-0 h-1 margin-auto",
-              style: {
-                background: "linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.6), transparent)"
-              }
-            }
-          ),
-          /* @__PURE__ */ React6__default.default.createElement(
-            "h1",
-            {
-              className: "text-5xl font-bold text-white mb-8 relative",
-              style: {
-                textShadow: "0 4px 16px rgba(255, 255, 255, 0.3), 0 2px 8px rgba(0, 0, 0, 0.5)"
-              }
-            },
-            scriptName,
-            /* @__PURE__ */ React6__default.default.createElement(
-              "div",
-              {
-                className: "absolute -bottom-3 left-1/2 transform -translate-x-1/2 h-1 rounded-full",
-                style: {
-                  width: "60%",
-                  background: "linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.5), transparent)"
-                }
-              }
-            )
-          ),
-          /* @__PURE__ */ React6__default.default.createElement(
-            "div",
-            {
-              className: "inline-block px-10 py-4 rounded-2xl font-bold text-xl text-white transition-all hover:scale-110 active:scale-95",
-              style: {
-                background: "linear-gradient(135deg, rgba(255, 255, 255, 0.35), rgba(255, 255, 255, 0.25))",
-                backdropFilter: "blur(16px)",
-                WebkitBackdropFilter: "blur(16px)",
-                border: "2px solid rgba(255, 255, 255, 0.4)",
-                boxShadow: `
-              0 8px 32px rgba(255, 255, 255, 0.2),
-              inset 0 1px 0 rgba(255, 255, 255, 0.5)
-            `,
-                textShadow: "0 2px 8px rgba(0, 0, 0, 0.3)",
-                animation: "pulse 2s ease-in-out infinite"
-              }
-            },
-            /* @__PURE__ */ React6__default.default.createElement("span", { className: "relative z-10" }, startText)
-          ),
-          /* @__PURE__ */ React6__default.default.createElement(
-            "div",
-            {
-              className: "absolute bottom-0 left-0 right-0 h-px",
-              style: {
-                background: "linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent)"
-              }
-            }
-          )
-        )
-      )
-    )
+          className: "absolute inset-0 bg-white/10 backdrop-blur-2xl border-2 border-white/40 rounded-3xl transition-all duration-500 group-hover:bg-white/25 group-hover:border-white/70 group-hover:shadow-[0_0_50px_rgba(255,255,255,0.3)] group-hover:-inset-1"
+        }
+      ),
+      /* @__PURE__ */ React6__default.default.createElement("div", { className: "absolute inset-0 overflow-hidden rounded-3xl pointer-events-none" }, /* @__PURE__ */ React6__default.default.createElement("div", { className: "absolute inset-0 opacity-0 group-hover:opacity-100 transition-opacity duration-700 bg-gradient-to-r from-transparent via-white/20 to-transparent -skew-x-[25deg] -translate-x-[200%] group-hover:translate-x-[200%] transition-transform duration-1000 ease-in-out" })),
+      /* @__PURE__ */ React6__default.default.createElement("div", { className: "relative flex items-center gap-6" }, /* @__PURE__ */ React6__default.default.createElement("div", { className: "w-3 h-3 rounded-full bg-cyan-400 animate-ping opacity-75" }), /* @__PURE__ */ React6__default.default.createElement("span", { className: "text-2xl font-black text-white tracking-[0.4em] drop-shadow-md" }, startText), /* @__PURE__ */ React6__default.default.createElement("div", { className: "w-3 h-3 rounded-full bg-pink-400 animate-ping opacity-75" }))
+    ), /* @__PURE__ */ React6__default.default.createElement("div", { className: "flex gap-8 w-full justify-center" }, [
+      { text: settingsText, onClick: () => setShowSettings(true), color: "rgba(57, 197, 187, 0.2)" },
+      { text: aboutText, onClick: () => setShowAbout(true), color: "rgba(255, 182, 193, 0.2)" }
+    ].map((btn, idx) => /* @__PURE__ */ React6__default.default.createElement(
+      "button",
+      {
+        key: idx,
+        onClick: btn.onClick,
+        className: "group relative flex-1 h-14 flex items-center justify-center transition-all duration-300 active:scale-95 overflow-hidden rounded-2xl"
+      },
+      /* @__PURE__ */ React6__default.default.createElement(
+        "div",
+        {
+          className: "absolute inset-0 bg-white/5 backdrop-blur-xl border border-white/20 transition-all duration-300 group-hover:bg-white/15 group-hover:border-white/40"
+        }
+      ),
+      /* @__PURE__ */ React6__default.default.createElement(
+        "div",
+        {
+          className: "absolute inset-0 opacity-0 group-hover:opacity-100 transition-opacity",
+          style: { background: btn.color }
+        }
+      ),
+      /* @__PURE__ */ React6__default.default.createElement("span", { className: "relative text-sm md:text-base font-bold text-white/80 group-hover:text-white tracking-[0.25em] transition-colors uppercase" }, btn.text)
+    ))))),
+    /* @__PURE__ */ React6__default.default.createElement("div", { className: "fixed bottom-10 left-0 right-0 text-center pointer-events-none select-none" }, /* @__PURE__ */ React6__default.default.createElement("div", { className: "inline-block px-6 py-2 rounded-full bg-white/5 backdrop-blur-md border border-white/10" }, /* @__PURE__ */ React6__default.default.createElement("span", { className: "text-[10px] md:text-xs text-white/30 tracking-[0.5em] font-light uppercase" }, "Ver 1.6.2 \u2014 ENGINE POWERED BY SA2KIT"))),
+    /* @__PURE__ */ React6__default.default.createElement(VNModal, { title: settingsText, show: showSettings, onClose: () => setShowSettings(false) }, /* @__PURE__ */ React6__default.default.createElement("div", { className: "space-y-8 py-4" }, /* @__PURE__ */ React6__default.default.createElement("div", { className: "space-y-4" }, /* @__PURE__ */ React6__default.default.createElement("div", { className: "flex justify-between items-center text-sm font-bold tracking-widest text-white/60" }, /* @__PURE__ */ React6__default.default.createElement("span", null, "MUSIC VOLUME"), /* @__PURE__ */ React6__default.default.createElement("span", null, "80%")), /* @__PURE__ */ React6__default.default.createElement("div", { className: "h-3 bg-white/10 rounded-full p-0.5 border border-white/10" }, /* @__PURE__ */ React6__default.default.createElement("div", { className: "h-full w-[80%] bg-gradient-to-r from-cyan-400 to-blue-500 rounded-full shadow-[0_0_15px_rgba(34,211,238,0.5)]" }))), /* @__PURE__ */ React6__default.default.createElement("div", { className: "space-y-4" }, /* @__PURE__ */ React6__default.default.createElement("div", { className: "flex justify-between items-center text-sm font-bold tracking-widest text-white/60" }, /* @__PURE__ */ React6__default.default.createElement("span", null, "TEXT SPEED"), /* @__PURE__ */ React6__default.default.createElement("span", null, "NORMAL")), /* @__PURE__ */ React6__default.default.createElement("div", { className: "flex gap-3" }, ["SLOW", "NORMAL", "FAST"].map((s, i) => /* @__PURE__ */ React6__default.default.createElement("div", { key: s, className: `flex-1 py-3 rounded-xl border text-center text-xs font-bold transition-all cursor-pointer ${i === 1 ? "bg-white/20 border-white/60 text-white" : "bg-white/5 border-white/10 text-white/40 hover:bg-white/10 hover:border-white/30"}` }, s)))), /* @__PURE__ */ React6__default.default.createElement("div", { className: "pt-4 flex items-center justify-between opacity-50 italic text-xs border-t border-white/10" }, /* @__PURE__ */ React6__default.default.createElement("span", null, "Auto Save Enabled"), /* @__PURE__ */ React6__default.default.createElement("span", null, "Cloud Sync Active")))),
+    /* @__PURE__ */ React6__default.default.createElement(VNModal, { title: aboutText, show: showAbout, onClose: () => setShowAbout(false) }, /* @__PURE__ */ React6__default.default.createElement("div", { className: "space-y-8 py-4" }, /* @__PURE__ */ React6__default.default.createElement("div", { className: "flex items-center gap-6 p-6 rounded-3xl bg-white/5 border border-white/10" }, /* @__PURE__ */ React6__default.default.createElement("div", { className: "w-20 h-20 rounded-2xl bg-gradient-to-br from-cyan-400 via-blue-500 to-purple-600 flex items-center justify-center text-3xl font-black text-white shadow-[0_10px_30px_rgba(0,0,0,0.3)]" }, "S2"), /* @__PURE__ */ React6__default.default.createElement("div", null, /* @__PURE__ */ React6__default.default.createElement("h3", { className: "text-2xl font-black text-white tracking-tight" }, scriptName || "Project SA2"), /* @__PURE__ */ React6__default.default.createElement("p", { className: "text-xs font-bold text-white/40 tracking-widest mt-1 uppercase" }, "Visual Novel Experience"))), /* @__PURE__ */ React6__default.default.createElement("div", { className: "space-y-4 px-2" }, /* @__PURE__ */ React6__default.default.createElement("p", { className: "text-white/80 font-medium leading-relaxed" }, "\u91C7\u7528 sa2kit \u5F15\u64CE\u6784\u5EFA\u7684\u65B0\u4E00\u4EE3\u5B9E\u65F6 3D \u89C6\u89C9\u5C0F\u8BF4\u3002\u7ED3\u5408\u4E86 MMD \u5B9E\u65F6\u6E32\u67D3\u6280\u672F\u4E0E\u4EA4\u4E92\u5F0F\u5267\u60C5\u5206\u652F\u7CFB\u7EDF\uFF0C\u81F4\u529B\u4E8E\u6253\u9020\u6781\u81F4\u7684\u6C89\u6D78\u5F0F\u53D9\u4E8B\u4F53\u9A8C\u3002")), /* @__PURE__ */ React6__default.default.createElement("div", { className: "grid grid-cols-2 gap-4 pt-6 border-t border-white/10" }, /* @__PURE__ */ React6__default.default.createElement("div", { className: "flex flex-col gap-1" }, /* @__PURE__ */ React6__default.default.createElement("span", { className: "text-[10px] font-bold text-white/30 tracking-widest" }, "DEVELOPER"), /* @__PURE__ */ React6__default.default.createElement("span", { className: "text-xs font-bold text-white/80" }, "SA2KIT TEAM")), /* @__PURE__ */ React6__default.default.createElement("div", { className: "flex flex-col gap-1 text-right" }, /* @__PURE__ */ React6__default.default.createElement("span", { className: "text-[10px] font-bold text-white/30 tracking-widest" }, "ENGINE"), /* @__PURE__ */ React6__default.default.createElement("span", { className: "text-xs font-bold text-white/80" }, "THREE.JS / REACT"))))),
+    /* @__PURE__ */ React6__default.default.createElement("style", null, `
+        @keyframes floatParticle {
+          from { transform: translateY(0) translateX(0); opacity: 0; }
+          20% { opacity: 1; }
+          80% { opacity: 1; }
+          to { transform: translateY(-100vh) translateX(50px); opacity: 0; }
+        }
+        @keyframes blob {
+          0%, 100% { transform: scale(1); opacity: 0.1; }
+          50% { transform: scale(1.2); opacity: 0.2; }
+        }
+        .animate-blob {
+          animation: blob 10s infinite;
+        }
+        .animation-delay-2000 {
+          animation-delay: 2s;
+        }
+        .animation-delay-4000 {
+          animation-delay: 4s;
+        }
+        .custom-scrollbar::-webkit-scrollbar {
+          width: 6px;
+        }
+        .custom-scrollbar::-webkit-scrollbar-track {
+          background: rgba(255, 255, 255, 0.05);
+          border-radius: 10px;
+        }
+        .custom-scrollbar::-webkit-scrollbar-thumb {
+          background: rgba(255, 255, 255, 0.3);
+          border-radius: 10px;
+          border: 2px solid transparent;
+          background-clip: content-box;
+        }
+      `)
   );
-  let portalContainer = document.getElementById("start-screen-portal-root");
-  if (!portalContainer) {
+  let portalContainer = typeof document !== "undefined" ? document.getElementById("start-screen-portal-root") : null;
+  if (typeof document !== "undefined" && !portalContainer) {
     portalContainer = document.createElement("div");
     portalContainer.id = "start-screen-portal-root";
     document.body.appendChild(portalContainer);
   }
-  portalContainer.style.cssText = `
-    position: fixed;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    width: 100vw;
-    height: 100vh;
-    margin: 0;
-    padding: 0;
-    overflow: hidden;
-    z-index: 999999;
-    pointer-events: none;
-  `.replace(/\s+/g, " ").trim();
+  if (portalContainer) {
+    portalContainer.style.cssText = `
+      position: fixed;
+      top: 0; left: 0; right: 0; bottom: 0;
+      width: 100vw; height: 100vh;
+      margin: 0; padding: 0;
+      overflow: hidden;
+      z-index: 999999;
+      pointer-events: none;
+    `.replace(/\s+/g, " ").trim();
+  }
+  if (!portalContainer) return content;
   return reactDom.createPortal(content, portalContainer);
 };
 StartScreen.displayName = "StartScreen";
@@ -2794,7 +2935,9 @@ var LoadingOverlay = ({
   showStartScreen = false,
   scriptName = "",
   loadingText = "\u6B63\u5728\u51C6\u5907\u573A\u666F\u4E2D...",
-  startText = "\u70B9\u51FB\u5F00\u59CB",
+  startText = "\u5F00\u59CB\u6E38\u620F",
+  settingsText = "\u6E38\u620F\u8BBE\u7F6E",
+  aboutText = "\u5173\u4E8E\u4F5C\u54C1",
   onStart,
   className = ""
 }) => {
@@ -2811,6 +2954,8 @@ var LoadingOverlay = ({
       showStartScreen,
       scriptName,
       startText,
+      settingsText,
+      aboutText,
       onStart,
       className
     }
@@ -2925,6 +3070,9 @@ var MMDVisualNovel = React6.forwardRef(
     mobileOptimization,
     dialogueTheme,
     autoStart = false,
+    startText,
+    settingsText,
+    aboutText,
     initialNodeIndex = 0,
     initialDialogueIndex = 0,
     onNodeChange,
@@ -3301,7 +3449,9 @@ var MMDVisualNovel = React6.forwardRef(
           showStartScreen: !isStarted,
           scriptName: script.name,
           loadingText: "\u6B63\u5728\u51C6\u5907\u573A\u666F\u4E2D...",
-          startText: "\u70B9\u51FB\u5F00\u59CB",
+          startText,
+          settingsText,
+          aboutText,
           onStart: handleStart
         }
       ),