@tsparticles/template-login 4.4.0 → 4.5.0

package/CHANGELOG.md

@@ -3,11 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [4.5.0](https://github.com/tsparticles/tsparticles/compare/v4.4.0...v4.5.0) (2026-10-25)
+
+### Bug Fixes
+
+- fixed some issues in mcp server and some coderabbit reports ([4700d3e](https://github.com/tsparticles/tsparticles/commit/4700d3e953f3a3a1930db064a6b6b21d61233cdf))
+
 # [4.4.0](https://github.com/tsparticles/tsparticles/compare/v4.3.3...v4.4.0) (2026-08-30)
 
 ### Bug Fixes
 
-* various fixes for 4.4.0 ([475d06d](https://github.com/tsparticles/tsparticles/commit/475d06da27e1497bb097c0822fcfcb72d7142456))
+- various fixes for 4.4.0 ([475d06d](https://github.com/tsparticles/tsparticles/commit/475d06da27e1497bb097c0822fcfcb72d7142456))
 
 ## [4.3.3](https://github.com/tsparticles/tsparticles/compare/v4.3.2...v4.3.3) (2026-07-23)
 
@@ -25,7 +31,7 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
 
 ### Bug Fixes
 
-* fixed angular confetti ([6f25a4a](https://github.com/tsparticles/tsparticles/commit/6f25a4a1eaa69c47f2668316e7b396fe55195f84))
+- fixed angular confetti ([6f25a4a](https://github.com/tsparticles/tsparticles/commit/6f25a4a1eaa69c47f2668316e7b396fe55195f84))
 
 ## [4.2.1](https://github.com/tsparticles/tsparticles/compare/v4.2.0...v4.2.1) (2026-06-18)
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tsparticles/template-login",
-  "version": "4.4.0",
+  "version": "4.5.0",
   "private": false,
   "publishConfig": {
     "access": "public"
@@ -18,12 +18,12 @@
     "prepack": "pnpm run build"
   },
   "dependencies": {
-    "@tsparticles/configs": "4.4.0",
-    "@tsparticles/engine": "4.4.0",
-    "@tsparticles/slim": "4.4.0"
+    "@tsparticles/configs": "4.5.0",
+    "@tsparticles/engine": "4.5.0",
+    "@tsparticles/slim": "4.5.0"
   },
   "devDependencies": {
     "fs-extra": "^11.3.4"
   },
-  "gitHead": "b7e605098d6ea937d5068c06542671d4891070e4"
+  "gitHead": "a637373a03c008ab38edaaecf6524ec4b8e332c0"
 }

package/scripts/prebuild.js

@@ -52,7 +52,7 @@ fs.readFile(libPackage, function (error, data) {
     }
   }
 
-  fs.writeFile(libPackage, JSON.stringify(libObj, undefined, 2), "utf-8", function () {
+  fs.writeFile(libPackage, `${JSON.stringify(libObj, undefined, 2)}\n`, "utf-8", function () {
     console.log("template.json dependencies updated successfully");
   });
 });

package/template/angular/package.json

@@ -11,24 +11,24 @@
     "watch": "ng build --watch --configuration development"
   },
   "dependencies": {
-    "@angular/animations": "~22.0.0",
-    "@angular/common": "~22.0.0",
-    "@angular/compiler": "~22.0.0",
-    "@angular/core": "~22.0.0",
-    "@angular/forms": "~22.0.0",
-    "@angular/platform-browser": "~22.0.0",
-    "@angular/platform-browser-dynamic": "~22.0.0",
-    "@angular/router": "~22.0.0",
-    "@tsparticles/angular": "^4.1.3",
-    "@tsparticles/slim": "^4.0.0",
+    "@angular/animations": "~22.2.2",
+    "@angular/common": "~22.2.2",
+    "@angular/compiler": "~22.2.2",
+    "@angular/core": "~22.2.2",
+    "@angular/forms": "~22.2.2",
+    "@angular/platform-browser": "~22.2.2",
+    "@angular/platform-browser-dynamic": "~22.2.2",
+    "@angular/router": "~22.2.2",
+    "@tsparticles/angular": "^4.4.0",
+    "@tsparticles/slim": "^4.4.0",
     "rxjs": "~7.8.2",
     "tslib": "^2.8.1",
-    "zone.js": "~0.16.2"
+    "zone.js": "~0.16.3"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "~22.0.0",
-    "@angular/cli": "~22.0.0",
-    "@angular/compiler-cli": "~22.0.0",
+    "@angular-devkit/build-angular": "~22.2.2",
+    "@angular/cli": "~22.2.2",
+    "@angular/compiler-cli": "~22.2.2",
     "typescript": "~6.0.3"
   }
 }

package/template/angular/src/app/app.component.ts

@@ -4,6 +4,7 @@ import { loadSlim } from "@tsparticles/slim";
 import type { ISourceOptions } from "@tsparticles/engine";
 
 @Component({
+  standalone: false,
   selector: "app-root",
   templateUrl: "./app.component.html",
   styleUrls: ["./app.component.css"],

package/template/angular-confetti/package.json

@@ -11,26 +11,26 @@
     "watch": "ng build --watch --configuration development"
   },
   "dependencies": {
-    "@angular/animations": "~22.0.0",
-    "@angular/common": "~22.0.0",
-    "@angular/compiler": "~22.0.0",
-    "@angular/core": "~22.0.0",
-    "@angular/forms": "~22.0.0",
-    "@angular/platform-browser": "~22.0.0",
-    "@angular/platform-browser-dynamic": "~22.0.0",
-    "@angular/router": "~22.0.0",
-    "angular-confetti": "^4.1.3",
-    "@tsparticles/slim": "^4.1.3",
-    "@tsparticles/configs": "^4.1.3",
-    "@tsparticles/engine": "^4.1.3",
+    "@angular/animations": "~22.2.2",
+    "@angular/common": "~22.2.2",
+    "@angular/compiler": "~22.2.2",
+    "@angular/core": "~22.2.2",
+    "@angular/forms": "~22.2.2",
+    "@angular/platform-browser": "~22.2.2",
+    "@angular/platform-browser-dynamic": "~22.2.2",
+    "@angular/router": "~22.2.2",
+    "@tsparticles/angular": "^4.4.0",
+    "@tsparticles/configs": "^4.4.0",
+    "@tsparticles/engine": "^4.4.0",
+    "@tsparticles/slim": "^4.4.0",
     "rxjs": "~7.8.2",
     "tslib": "^2.8.1",
-    "zone.js": "~0.16.2"
+    "zone.js": "~0.16.3"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "~22.0.0",
-    "@angular/cli": "~22.0.0",
-    "@angular/compiler-cli": "~22.0.0",
+    "@angular-devkit/build-angular": "~22.2.2",
+    "@angular/cli": "~22.2.2",
+    "@angular/compiler-cli": "~22.2.2",
     "typescript": "~6.0.3"
   }
 }

package/template/angular-confetti/src/app/app.component.html

@@ -1,4 +1,4 @@
-<ngx-confetti id="tsparticles" [options]="options" />
+<ngx-particles id="tsparticles" [options]="options" />
 
 <div class="auth-container">
   <div class="auth-card">

package/template/angular-confetti/src/app/app.component.ts

@@ -1,9 +1,10 @@
 import { Component, OnInit } from "@angular/core";
-import { NgxConfettiService } from "angular-confetti";
+import { NgParticlesService } from "@tsparticles/angular";
 import { loadSlim } from "@tsparticles/slim";
 import type { ISourceOptions } from "@tsparticles/engine";
 
 @Component({
+  standalone: false,
   selector: "app-root",
   templateUrl: "./app.component.html",
   styleUrls: ["./app.component.css"],
@@ -18,7 +19,7 @@ export class AppComponent implements OnInit {
   passErr = "";
   confirmErr = "";
 
-  constructor(private readonly confettiService: NgxConfettiService) {}
+  constructor(private readonly ngParticlesService: NgParticlesService) {}
 
   options: ISourceOptions = {
     background: { color: { value: "transparent" } },
@@ -40,7 +41,7 @@ export class AppComponent implements OnInit {
 
   ngOnInit(): void {
     document.documentElement.setAttribute("data-theme", this.theme);
-    void this.confettiService.init(async (engine) => {
+    void this.ngParticlesService.init(async (engine) => {
       await loadSlim(engine);
     });
   }

package/template/angular-confetti/src/app/app.module.ts

@@ -1,12 +1,12 @@
 import { NgModule } from "@angular/core";
 import { BrowserModule } from "@angular/platform-browser";
 import { FormsModule } from "@angular/forms";
-import { NgxConfettiModule } from "angular-confetti";
+import { NgxParticlesModule } from "@tsparticles/angular";
 import { AppComponent } from "./app.component";
 
 @NgModule({
   declarations: [AppComponent],
-  imports: [BrowserModule, FormsModule, NgxConfettiModule],
+  imports: [BrowserModule, FormsModule, NgxParticlesModule],
   providers: [],
   bootstrap: [AppComponent],
 })

package/template/angular-fireworks/package.json

@@ -11,26 +11,26 @@
     "watch": "ng build --watch --configuration development"
   },
   "dependencies": {
-    "@angular/animations": "~22.0.0",
-    "@angular/common": "~22.0.0",
-    "@angular/compiler": "~22.0.0",
-    "@angular/core": "~22.0.0",
-    "@angular/forms": "~22.0.0",
-    "@angular/platform-browser": "~22.0.0",
-    "@angular/platform-browser-dynamic": "~22.0.0",
-    "@angular/router": "~22.0.0",
-    "angular-fireworks": "^4.1.3",
-    "@tsparticles/slim": "^4.1.3",
-    "@tsparticles/configs": "^4.1.3",
-    "@tsparticles/engine": "^4.1.3",
+    "@angular/animations": "~22.2.2",
+    "@angular/common": "~22.2.2",
+    "@angular/compiler": "~22.2.2",
+    "@angular/core": "~22.2.2",
+    "@angular/forms": "~22.2.2",
+    "@angular/platform-browser": "~22.2.2",
+    "@angular/platform-browser-dynamic": "~22.2.2",
+    "@angular/router": "~22.2.2",
+    "@tsparticles/angular": "^4.4.0",
+    "@tsparticles/configs": "^4.4.0",
+    "@tsparticles/engine": "^4.4.0",
+    "@tsparticles/slim": "^4.4.0",
     "rxjs": "~7.8.2",
     "tslib": "^2.8.1",
-    "zone.js": "~0.16.2"
+    "zone.js": "~0.16.3"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "~22.0.0",
-    "@angular/cli": "~22.0.0",
-    "@angular/compiler-cli": "~22.0.0",
+    "@angular-devkit/build-angular": "~22.2.2",
+    "@angular/cli": "~22.2.2",
+    "@angular/compiler-cli": "~22.2.2",
     "typescript": "~6.0.3"
   }
 }

package/template/angular-fireworks/src/app/app.component.html

@@ -1,4 +1,4 @@
-<ngx-fireworks id="tsparticles" [options]="options" />
+<ngx-particles id="tsparticles" [options]="options" />
 
 <div class="auth-container">
   <div class="auth-card">

package/template/angular-fireworks/src/app/app.component.ts

@@ -1,9 +1,10 @@
 import { Component, OnInit } from "@angular/core";
-import { NgxFireworksService } from "angular-fireworks";
+import { NgParticlesService } from "@tsparticles/angular";
 import { loadSlim } from "@tsparticles/slim";
 import type { ISourceOptions } from "@tsparticles/engine";
 
 @Component({
+  standalone: false,
   selector: "app-root",
   templateUrl: "./app.component.html",
   styleUrls: ["./app.component.css"],
@@ -18,7 +19,7 @@ export class AppComponent implements OnInit {
   passErr = "";
   confirmErr = "";
 
-  constructor(private readonly fireworksService: NgxFireworksService) {}
+  constructor(private readonly ngParticlesService: NgParticlesService) {}
 
   options: ISourceOptions = {
     background: { color: { value: "transparent" } },
@@ -40,7 +41,7 @@ export class AppComponent implements OnInit {
 
   ngOnInit(): void {
     document.documentElement.setAttribute("data-theme", this.theme);
-    void this.fireworksService.init(async (engine) => {
+    void this.ngParticlesService.init(async (engine) => {
       await loadSlim(engine);
     });
   }

package/template/angular-fireworks/src/app/app.module.ts

@@ -1,12 +1,12 @@
 import { NgModule } from "@angular/core";
 import { BrowserModule } from "@angular/platform-browser";
 import { FormsModule } from "@angular/forms";
-import { NgxFireworksModule } from "angular-fireworks";
+import { NgxParticlesModule } from "@tsparticles/angular";
 import { AppComponent } from "./app.component";
 
 @NgModule({
   declarations: [AppComponent],
-  imports: [BrowserModule, FormsModule, NgxFireworksModule],
+  imports: [BrowserModule, FormsModule, NgxParticlesModule],
   providers: [],
   bootstrap: [AppComponent],
 })

package/template/astro/package.json

@@ -9,12 +9,12 @@
     "preview": "astro preview"
   },
   "dependencies": {
-    "@astrojs/check": "^0.9.4",
-    "astro": "^5.7.10",
-    "@tsparticles/astro": "^4.1.3",
-    "@tsparticles/slim": "^4.1.3",
-    "@tsparticles/configs": "^4.1.3",
-    "@tsparticles/engine": "^4.1.3"
+    "@astrojs/check": "^0.9.10",
+    "astro": "^7.3.2",
+    "@tsparticles/astro": "^4.4.0",
+    "@tsparticles/slim": "^4.4.0",
+    "@tsparticles/configs": "^4.4.0",
+    "@tsparticles/engine": "^4.4.0"
   },
   "devDependencies": {
     "typescript": "^6.0.3"

package/template/ember/app/templates/application.hbs

@@ -1,4 +1,4 @@
-<div id="particles-container" {{did-insert this.initParticles}} {{particles options=this.options}}>
+<div id="particles-container" {{particles options=this.options}}>
 </div>
 
 <div class="auth-container">

package/template/ember/package.json

@@ -28,15 +28,12 @@
     "webpack": "^5.106.1"
   },
   "dependencies": {
-    "@tsparticles/ember": "^4.1.3",
-    "@tsparticles/slim": "^4.1.3",
-    "@tsparticles/configs": "^4.1.3",
-    "@tsparticles/engine": "^4.1.3"
+    "@tsparticles/configs": "^4.4.0",
+    "@tsparticles/ember": "^4.4.0",
+    "@tsparticles/engine": "^4.4.0",
+    "@tsparticles/slim": "^4.4.0"
   },
   "ember": {
     "edition": "octane"
-  },
-  "ember-addon": {
-    "configPath": "tests/dummy/config"
   }
 }

package/template/inferno/package.json

@@ -10,15 +10,14 @@
   },
   "dependencies": {
     "inferno": "^9.1.0",
-    "@tsparticles/inferno": "^4.1.3",
-    "@tsparticles/slim": "^4.1.3",
-    "@tsparticles/configs": "^4.1.3",
-    "@tsparticles/engine": "^4.1.3"
+    "inferno-create-element": "^9.1.0",
+    "@tsparticles/inferno": "^4.4.0",
+    "@tsparticles/slim": "^4.4.0",
+    "@tsparticles/configs": "^4.4.0",
+    "@tsparticles/engine": "^4.4.0"
   },
   "devDependencies": {
     "typescript": "^6.0.3",
-    "vite": "^8.1.0",
-    "babel-plugin-inferno": "^6.8.5",
-    "vite-plugin-inferno": "^2.0.1"
+    "vite": "^8.3.1"
   }
 }

package/template/inferno/src/App.tsx

@@ -1,5 +1,5 @@
-import { Component, type ComponentType } from "inferno";
-import Particles, { ParticlesProvider } from "@tsparticles/inferno";
+import { Component } from "inferno";
+import { Particles, ParticlesProvider } from "@tsparticles/inferno";
 import { loadSlim } from "@tsparticles/slim";
 import type { Engine, ISourceOptions } from "@tsparticles/engine";
 import "./App.css";
@@ -37,20 +37,17 @@ interface AppState {
   confirmErr: string;
 }
 
-const App: ComponentType<Record<string, unknown>> = class App extends Component<Record<string, unknown>, AppState> {
-  constructor(props: Record<string, unknown>) {
-    super(props);
-    this.state = {
-      isLogin: true,
-      theme: localStorage.getItem("theme") || "dark",
-      email: "",
-      password: "",
-      confirm: "",
-      emailErr: "",
-      passErr: "",
-      confirmErr: "",
-    };
-  }
+class App extends Component<Record<string, unknown>, AppState> {
+  state: AppState = {
+    isLogin: true,
+    theme: localStorage.getItem("theme") || "dark",
+    email: "",
+    password: "",
+    confirm: "",
+    emailErr: "",
+    passErr: "",
+    confirmErr: "",
+  };
 
   componentDidMount(): void {
     document.documentElement.setAttribute("data-theme", this.state.theme);
@@ -153,6 +150,6 @@ const App: ComponentType<Record<string, unknown>> = class App extends Component<
       </ParticlesProvider>
     );
   }
-};
+}
 
 export default App;

package/template/jquery/index.html

@@ -0,0 +1,44 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>{{projectName}}</title>
+  </head>
+  <body>
+    <div id="app">
+      <div class="auth-container">
+        <div class="auth-card">
+          <div class="auth-header">
+            <h1 id="authTitle">Login</h1>
+            <button id="themeToggle" class="theme-btn" aria-label="Toggle theme">🌙</button>
+          </div>
+          <form id="authForm" novalidate>
+            <div class="form-group">
+              <label for="email">Email</label>
+              <input type="email" id="email" placeholder="you@example.com" required />
+              <span class="error" id="emailError"></span>
+            </div>
+            <div class="form-group">
+              <label for="password">Password</label>
+              <input type="password" id="password" placeholder="Enter password" required />
+              <span class="error" id="passwordError"></span>
+            </div>
+            <div class="form-group" id="confirmGroup" style="display: none">
+              <label for="confirmPassword">Confirm Password</label>
+              <input type="password" id="confirmPassword" placeholder="Confirm password" />
+              <span class="error" id="confirmError"></span>
+            </div>
+            <button type="submit" id="submitBtn">Sign In</button>
+          </form>
+          <p class="toggle-text">
+            <span id="toggleLabel">Don't have an account?</span>
+            <a href="#" id="toggleAuth">Register</a>
+          </p>
+        </div>
+      </div>
+    </div>
+    <div id="tsparticles"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>

package/template/jquery/package.json

@@ -10,13 +10,14 @@
   },
   "dependencies": {
     "jquery": "^3.7.1",
-    "@tsparticles/jquery": "^4.1.3",
-    "@tsparticles/slim": "^4.1.3",
-    "@tsparticles/configs": "^4.1.3",
-    "@tsparticles/engine": "^4.1.3"
+    "@tsparticles/jquery": "^4.4.0",
+    "@tsparticles/slim": "^4.4.0",
+    "@tsparticles/configs": "^4.4.0",
+    "@tsparticles/engine": "^4.4.0"
   },
   "devDependencies": {
     "typescript": "^5.7.2",
-    "vite": "^6.0.0"
+    "vite": "^8.3.1",
+    "@types/jquery": "^3.5.32"
   }
 }

package/template/jquery/src/main.ts

@@ -84,7 +84,7 @@ $("#authForm").on("submit", (e) => {
     toggleMode();
   }
 
-  $("#authForm")[0].reset();
+  ($("#authForm")[0] as HTMLFormElement).reset();
 });
 
 (async () => {

package/template/lit/package.json

@@ -9,14 +9,14 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "lit": "^3.5.0",
-    "@tsparticles/lit": "^4.1.3",
-    "@tsparticles/slim": "^4.1.3",
-    "@tsparticles/configs": "^4.1.3",
-    "@tsparticles/engine": "^4.1.3"
+    "lit": "^3.3.0",
+    "@tsparticles/lit": "^4.4.0",
+    "@tsparticles/slim": "^4.4.0",
+    "@tsparticles/configs": "^4.4.0",
+    "@tsparticles/engine": "^4.4.0"
   },
   "devDependencies": {
     "typescript": "^5.7.2",
-    "vite": "^6.0.0"
+    "vite": "^8.3.1"
   }
 }

package/template/nextjs/package.json

@@ -11,15 +11,15 @@
     "next": "^15.3.2",
     "react": "^19.2.5",
     "react-dom": "^19.2.5",
-    "@tsparticles/nextjs": "^4.1.3",
-    "@tsparticles/slim": "^4.1.3",
-    "@tsparticles/configs": "^4.1.3",
-    "@tsparticles/engine": "^4.1.3"
+    "@tsparticles/nextjs": "^4.4.0",
+    "@tsparticles/slim": "^4.4.0",
+    "@tsparticles/configs": "^4.4.0",
+    "@tsparticles/engine": "^4.4.0"
   },
   "devDependencies": {
-    "typescript": "^6.0.3",
-    "@types/node": "^22.15.3",
+    "@types/node": "^26.6.5",
     "@types/react": "^19.1.4",
-    "@types/react-dom": "^19.1.3"
+    "@types/react-dom": "^19.1.3",
+    "typescript": "^6.0.3"
   }
 }

package/template/nuxt2/package.json

@@ -9,9 +9,18 @@
   },
   "dependencies": {
     "nuxt": "^2.18.1",
-    "@tsparticles/nuxt2": "^4.1.3",
-    "@tsparticles/slim": "^4.1.3",
-    "@tsparticles/configs": "^4.1.3",
-    "@tsparticles/engine": "^4.1.3"
+    "@tsparticles/nuxt2": "^4.4.0",
+    "@tsparticles/slim": "^4.4.0",
+    "@tsparticles/configs": "^4.4.0",
+    "@tsparticles/engine": "^4.4.0"
+  },
+  "browserslist": [
+    "chrome 58",
+    "edge 16",
+    "firefox 57",
+    "safari 11"
+  ],
+  "devDependencies": {
+    "@babel/preset-env": "^7.29.0"
   }
 }

package/template/nuxt3/package.json

@@ -10,10 +10,10 @@
   },
   "dependencies": {
     "nuxt": "^3.17.3",
-    "@tsparticles/nuxt3": "^4.1.3",
-    "@tsparticles/slim": "^4.1.3",
-    "@tsparticles/configs": "^4.1.3",
-    "@tsparticles/engine": "^4.1.3"
+    "@tsparticles/nuxt3": "^4.4.0",
+    "@tsparticles/slim": "^4.4.0",
+    "@tsparticles/configs": "^4.4.0",
+    "@tsparticles/engine": "^4.4.0"
   },
   "devDependencies": {
     "typescript": "^6.0.3"

package/template/nuxt4/package.json

@@ -10,10 +10,10 @@
   },
   "dependencies": {
     "nuxt": "^4.4.2",
-    "@tsparticles/nuxt4": "^4.1.3",
-    "@tsparticles/slim": "^4.1.3",
-    "@tsparticles/configs": "^4.1.3",
-    "@tsparticles/engine": "^4.1.3"
+    "@tsparticles/nuxt4": "^4.4.0",
+    "@tsparticles/slim": "^4.4.0",
+    "@tsparticles/configs": "^4.4.0",
+    "@tsparticles/engine": "^4.4.0"
   },
   "devDependencies": {
     "typescript": "^6.0.3"

package/template/preact/package.json

@@ -10,14 +10,14 @@
   },
   "dependencies": {
     "preact": "^10.19.3",
-    "@tsparticles/preact": "^4.1.3",
-    "@tsparticles/slim": "^4.1.3",
-    "@tsparticles/configs": "^4.1.3",
-    "@tsparticles/engine": "^4.1.3"
+    "@tsparticles/preact": "^4.4.0",
+    "@tsparticles/slim": "^4.4.0",
+    "@tsparticles/configs": "^4.4.0",
+    "@tsparticles/engine": "^4.4.0"
   },
   "devDependencies": {
     "@preact/preset-vite": "^2.8.1",
     "typescript": "^5.7.2",
-    "vite": "^6.0.0"
+    "vite": "^8.3.1"
   }
 }

package/template/qwik/package.json

@@ -10,13 +10,13 @@
   },
   "dependencies": {
     "@builder.io/qwik": "^1.12.0",
-    "@tsparticles/qwik": "^4.1.3",
-    "@tsparticles/slim": "^4.1.3",
-    "@tsparticles/configs": "^4.1.3",
-    "@tsparticles/engine": "^4.1.3"
+    "@tsparticles/qwik": "^4.4.0",
+    "@tsparticles/slim": "^4.4.0",
+    "@tsparticles/configs": "^4.4.0",
+    "@tsparticles/engine": "^4.4.0"
   },
   "devDependencies": {
     "typescript": "^5.7.2",
-    "vite": "^6.0.0"
+    "vite": "^7.3.6"
   }
 }

package/template/qwik/src/App.tsx

@@ -107,7 +107,7 @@ export default component$(() => {
             <h1>{isLogin.value ? "Login" : "Register"}</h1>
             <button class="theme-btn" onClick$={toggleTheme} aria-label="Toggle theme">{theme.value === "dark" ? "🌙" : "☀️"}</button>
           </div>
-          <form onSubmit$={handleSubmit} novalidate>
+          <form onSubmit$={handleSubmit} preventdefault:submit noValidate>
             <div class="form-group">
               <label for="email">Email</label>
               <input id="email" type="email" placeholder="you@example.com" value={email.value} onInput$={(e: InputEvent) => { email.value = (e.target as HTMLInputElement).value; }} required />

package/template/react/package.json

@@ -11,9 +11,11 @@
   "dependencies": {
     "react": "^19.2.5",
     "react-dom": "^19.2.5",
-    "@tsparticles/react": "^4.1.3"
+    "@tsparticles/react": "^4.4.0"
   },
   "devDependencies": {
-    "@vitejs/plugin-react": "^6.0.1"
+    "@vitejs/plugin-react": "^6.0.1",
+    "@types/react": "^19.2.14",
+    "@types/react-dom": "^19.2.3"
   }
 }

package/template/riot/package.json

@@ -9,16 +9,16 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "riot": "^10.0.0",
-    "@tsparticles/riot": "^4.1.3",
-    "@tsparticles/slim": "^4.1.3",
-    "@tsparticles/configs": "^4.1.3",
-    "@tsparticles/engine": "^4.1.3"
+    "riot": "^10.1.6",
+    "@tsparticles/riot": "^4.4.0",
+    "@tsparticles/slim": "^4.4.0",
+    "@tsparticles/configs": "^4.4.0",
+    "@tsparticles/engine": "^4.4.0"
   },
   "devDependencies": {
     "@riotjs/compiler": "^10.0.0",
     "rollup-plugin-riot": "^10.0.0",
     "typescript": "^5.7.2",
-    "vite": "^6.0.0"
+    "vite": "^8.3.1"
   }
 }

package/template/solid/package.json

@@ -10,9 +10,9 @@
   },
   "dependencies": {
     "solid-js": "^1.8.11",
-    "@tsparticles/solid": "^4.1.3"
+    "@tsparticles/solid": "^4.4.0"
   },
   "devDependencies": {
-    "vite-plugin-solid": "^2.8.2"
+    "vite-plugin-solid": "^2.11.14"
   }
 }

package/template/stencil/package.json

@@ -9,10 +9,10 @@
   },
   "dependencies": {
     "@stencil/core": "^4.43.5",
-    "@tsparticles/stencil": "^4.1.3",
-    "@tsparticles/slim": "^4.1.3",
-    "@tsparticles/configs": "^4.1.3",
-    "@tsparticles/engine": "^4.1.3"
+    "@tsparticles/stencil": "^4.4.0",
+    "@tsparticles/slim": "^4.4.0",
+    "@tsparticles/configs": "^4.4.0",
+    "@tsparticles/engine": "^4.4.0"
   },
   "devDependencies": {
     "typescript": "^6.0.3"

package/template/svelte/package.json

@@ -9,7 +9,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@tsparticles/svelte": "^4.1.3"
+    "@tsparticles/svelte": "^4.4.0"
   },
   "devDependencies": {
     "@sveltejs/vite-plugin-svelte": "^5.0.3",

package/template/vue2/package.json

@@ -10,15 +10,15 @@
   },
   "dependencies": {
     "vue": "^2.7.16",
-    "@tsparticles/vue2": "^4.1.3",
-    "@tsparticles/slim": "^4.1.3",
-    "@tsparticles/configs": "^4.1.3",
-    "@tsparticles/engine": "^4.1.3"
+    "@tsparticles/vue2": "^4.4.0",
+    "@tsparticles/slim": "^4.4.0",
+    "@tsparticles/configs": "^4.4.0",
+    "@tsparticles/engine": "^4.4.0"
   },
   "devDependencies": {
-    "@vitejs/plugin-vue2": "^2.0.1",
+    "@vitejs/plugin-vue2": "^2.3.4",
     "vue-template-compiler": "^2.7.16",
     "typescript": "^5.7.2",
-    "vite": "^6.0.0"
+    "vite": "^7.3.6"
   }
 }

package/template/vue3/package.json

@@ -10,7 +10,7 @@
   },
   "dependencies": {
     "vue": "^3.5.32",
-    "@tsparticles/vue3": "^4.1.3"
+    "@tsparticles/vue3": "^4.4.0"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^6.0.5",

package/template/webcomponents/index.html

@@ -0,0 +1,43 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>{{projectName}}</title>
+  </head>
+  <body>
+    <div id="app">
+      <div class="auth-container">
+        <div class="auth-card">
+          <div class="auth-header">
+            <h1 id="authTitle">Login</h1>
+            <button id="themeToggle" class="theme-btn" aria-label="Toggle theme">🌙</button>
+          </div>
+          <form id="authForm" novalidate>
+            <div class="form-group">
+              <label for="email">Email</label>
+              <input type="email" id="email" placeholder="you@example.com" required />
+              <span class="error" id="emailError"></span>
+            </div>
+            <div class="form-group">
+              <label for="password">Password</label>
+              <input type="password" id="password" placeholder="Enter password" required />
+              <span class="error" id="passwordError"></span>
+            </div>
+            <div class="form-group" id="confirmGroup" style="display: none">
+              <label for="confirmPassword">Confirm Password</label>
+              <input type="password" id="confirmPassword" placeholder="Confirm password" />
+              <span class="error" id="confirmError"></span>
+            </div>
+            <button type="submit" id="submitBtn">Sign In</button>
+          </form>
+          <p class="toggle-text">
+            <span id="toggleLabel">Don't have an account?</span>
+            <a href="#" id="toggleAuth">Register</a>
+          </p>
+        </div>
+      </div>
+    </div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>

package/template/webcomponents/package.json

@@ -9,13 +9,13 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@tsparticles/webcomponents": "^4.1.3",
-    "@tsparticles/slim": "^4.1.3",
-    "@tsparticles/configs": "^4.1.3",
-    "@tsparticles/engine": "^4.1.3"
+    "@tsparticles/webcomponents": "^4.4.0",
+    "@tsparticles/slim": "^4.4.0",
+    "@tsparticles/configs": "^4.4.0",
+    "@tsparticles/engine": "^4.4.0"
   },
   "devDependencies": {
     "typescript": "^5.7.2",
-    "vite": "^6.0.0"
+    "vite": "^8.3.1"
   }
 }

package/template/webcomponents/src/main.ts

@@ -1,8 +1,11 @@
+import { tsParticles } from "@tsparticles/engine";
 import { defineParticlesElement, initParticlesEngine } from "@tsparticles/webcomponents";
 import { loadSlim } from "@tsparticles/slim";
 import type { ISourceOptions } from "@tsparticles/engine";
 import "./style.css";
 
+globalThis.tsParticles = tsParticles;
+
 void initParticlesEngine(async (engine) => {
   await loadSlim(engine);
 });
@@ -27,6 +30,11 @@ const options: ISourceOptions = {
   detectRetina: true,
 };
 
+const particlesEl = document.createElement("web-particles");
+particlesEl.id = "tsparticles";
+(particlesEl as unknown as Record<string, unknown>).options = options;
+document.body.appendChild(particlesEl);
+
 let isLogin = true;
 
 const authTitle = document.getElementById("authTitle") as HTMLHeadingElement;

package/template.json

@@ -1,13 +1,13 @@
 {
   "package": {
     "dependencies": {
-      "@tsparticles/engine": "^4.4.0",
-      "@tsparticles/slim": "^4.4.0",
-      "@tsparticles/configs": "^4.4.0"
+      "@tsparticles/engine": "^4.5.0",
+      "@tsparticles/slim": "^4.5.0",
+      "@tsparticles/configs": "^4.5.0"
     },
     "devDependencies": {
       "typescript": "^6.0.3",
-      "vite": "^8.1.0"
+      "vite": "^8.3.1"
     }
   }
-}
+}