Update project dependencies and configurations; remove deprecated package settings and enhance legacy build support

- Upgrade package manager to pnpm@11.5.2 and remove patched dependencies from package.json.
- Update pnpm-lock.yaml to reflect new dependency versions and remove obsolete entries.
- Refactor Vite configuration to improve legacy build handling, including new plugins for legacy CSS management.
- Remove unused client/index.html file and adjust paths in Vite config for better project structure.
- Enhance DesktopAIShell and EQPage components to support legacy build conditions and improve loading states for raw curves.

vite.legacy.config.ts

@@ -4,21 +4,19 @@ import path from "node:path";
 import { createRequire } from "node:module";
 import { defineConfig, type Plugin } from "vite";
 
+const PROJECT_ROOT = import.meta.dirname;
 const require = createRequire(import.meta.url);
 const tailwindcss3 = require("tailwindcss3");
 const autoprefixer = require("autoprefixer");
 
 function legacyIndexRewritePlugin(): Plugin {
-  // Vite dev server always serves /index.html for "/".
-  // For legacy dev, we must serve i.legacy.html instead, otherwise it loads
-  // modern main.tsx + index.css (Tailwind v4) and breaks the Tailwind v3 pipeline.
   return {
     name: "legacy-index-rewrite",
     apply: "serve",
     configureServer(server) {
       server.middlewares.use((req, _res, next) => {
-        const url = req.url ?? "";
-        if (url === "/" || url === "/index.html") {
+        const url = (req.url ?? "").split("?")[0];
+        if (url === "/" || url === "/index.html" || url === "/i.modern.html") {
           req.url = "/i.legacy.html";
         }
         next();
@@ -27,38 +25,59 @@ function legacyIndexRewritePlugin(): Plugin {
   };
 }
 
+/** Dev MPA may discover modern CSS — stub them so Tailwind v3 postcss does not choke. */
+function legacySkipModernCssPlugin(): Plugin {
+  return {
+    name: "legacy-skip-modern-css",
+    enforce: "pre",
+    apply: "serve",
+    load(id) {
+      const norm = id.replace(/\\/g, "/");
+      if (norm.endsWith("/client/src/index.css")) {
+        return "/* legacy dev: skip modern index.css */";
+      }
+      if (/node_modules\/tailwindcss\/index\.css/.test(norm)) {
+        return "/* legacy dev: skip tailwind v4 */";
+      }
+    },
+  };
+}
+
 export default defineConfig({
-  // Legacy build targets Chrome 91 WebView-class browsers.
-  // Uses Tailwind v3 via css.postcss (see postcss.legacy.config.cjs).
-  plugins: [legacyIndexRewritePlugin(), react(), jsxLocPlugin()],
+  plugins: [legacySkipModernCssPlugin(), legacyIndexRewritePlugin(), react(), jsxLocPlugin()],
+  define: {
+    "import.meta.env.VITE_X8_LEGACY": JSON.stringify("1"),
+  },
   base: process.env.NODE_ENV === "production" ? "/x8/v2/legacy/" : "/",
   resolve: {
     alias: {
-      "@": path.resolve(import.meta.dirname, "client", "src"),
-      "@shared": path.resolve(import.meta.dirname, "shared"),
-      "@assets": path.resolve(import.meta.dirname, "attached_assets"),
+      "@": path.resolve(PROJECT_ROOT, "client", "src"),
+      "@shared": path.resolve(PROJECT_ROOT, "shared"),
+      "@assets": path.resolve(PROJECT_ROOT, "attached_assets"),
     },
     dedupe: ["react", "react-dom"],
   },
-  envDir: path.resolve(import.meta.dirname),
-  root: path.resolve(import.meta.dirname, "client"),
-  publicDir: path.resolve(import.meta.dirname, "client/public"),
+  envDir: path.resolve(PROJECT_ROOT),
+  root: path.resolve(PROJECT_ROOT, "client"),
+  publicDir: path.resolve(PROJECT_ROOT, "client/public"),
   css: {
-    // Force PostCSS for Tailwind v3 (Chrome 91 legacy).
     transformer: "postcss",
     postcss: {
-      plugins: [tailwindcss3({ config: "./tailwind.legacy.config.cjs" }), autoprefixer()],
+      plugins: [
+        tailwindcss3({ config: path.join(PROJECT_ROOT, "tailwind.legacy.config.cjs") }),
+        autoprefixer(),
+      ],
     },
   },
   build: {
     target: ["chrome91", "edge91"],
     cssTarget: "chrome91",
-    outDir: path.resolve(import.meta.dirname, "dist/legacy"),
+    outDir: path.resolve(PROJECT_ROOT, "dist/legacy"),
     emptyOutDir: true,
     minify: "terser",
     rollupOptions: {
       input: {
-        i: path.resolve(import.meta.dirname, "client", "i.legacy.html"),
+        i: path.resolve(PROJECT_ROOT, "client", "i.legacy.html"),
       },
     },
   },
@@ -75,4 +94,3 @@ export default defineConfig({
     },
   },
 });
-