@tsparticles/template-scaffold 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-scaffold",
-  "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,23 +11,23 @@
     "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",
+    "@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",
     "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/src/app/app.module.ts

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

package/template/angular-confetti/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",
-    "angular-confetti": "^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/engine": "^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 @@
 <div id="app-content">
   <h1>Hello, tsParticles!</h1>
 </div>
-<ngx-confetti id="tsparticles" [options]="options" [fire]="true" />
+<ngx-particles id="tsparticles" [options]="options" />

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

@@ -1,27 +1,42 @@
-import { Component } from "@angular/core";
-import type { ConfettiOptions } from "@tsparticles/confetti";
+import { Component, OnInit } from "@angular/core";
+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"],
 })
-export class AppComponent {
-  options: ConfettiOptions = {
-    angle: 90,
-    count: 50,
-    spread: 45,
-    startVelocity: 45,
-    decay: 0.9,
-    gravity: 1,
-    drift: 0,
-    ticks: 200,
-    position: { x: 50, y: 50 },
-    colors: ["#26ccff", "#a25afd", "#ff5e7e", "#88ff5a", "#fcff42", "#ffa62d", "#ff36ff"],
-    shapes: ["square", "circle"],
-    scalar: 1,
-    zIndex: 100,
-    disableForReducedMotion: true,
-    flat: false,
+export class AppComponent implements OnInit {
+  constructor(private readonly ngParticlesService: NgParticlesService) {}
+
+  options: ISourceOptions = {
+    fullScreen: { enable: true, zIndex: -1 },
+    background: { color: { value: "#1a1a2e" } },
+    fpsLimit: 60,
+    particles: {
+      number: { value: 80, density: { enable: true } },
+      color: { value: ["#6c5ce7", "#a29bfe", "#fd79a8"] },
+      shape: { type: "circle" },
+      opacity: { value: 0.5, random: true },
+      size: { value: { min: 1, max: 4 }, random: true },
+      move: {
+        enable: true,
+        speed: 2,
+        direction: "none",
+        random: false,
+        straight: false,
+        outModes: { default: "out" },
+      },
+    },
+    detectRetina: true,
   };
+
+  ngOnInit(): void {
+    void this.ngParticlesService.init(async (engine) => {
+      await loadSlim(engine);
+    });
+  }
 }

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

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

package/template/angular-fireworks/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",
-    "angular-fireworks": "^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/engine": "^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 @@
 <div id="app-content">
   <h1>Hello, tsParticles!</h1>
 </div>
-<ngx-fireworks id="tsparticles" [options]="options" />
+<ngx-particles id="tsparticles" [options]="options" />

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

@@ -1,29 +1,42 @@
-import { Component } from "@angular/core";
-import type { FireworkOptions } from "@tsparticles/fireworks";
+import { Component, OnInit } from "@angular/core";
+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"],
 })
-export class AppComponent {
-  options: FireworkOptions = {
-    background: "none",
-    brightness: { min: -30, max: 30 },
-    colors: [
-      "#FF0000", "#FF2A00", "#FF5500", "#FF8000", "#FFAA00", "#FFD400",
-      "#FFFF00", "#D4FF00", "#AAFF00", "#80FF00", "#55FF00", "#2AFF00",
-      "#00FF00", "#00FF2A", "#00FF55", "#00FF80", "#00FFAA", "#00FFD4",
-      "#00FFFF", "#00D4FF", "#00AAFF", "#0080FF", "#0055FF", "#002AFF",
-      "#0000FF", "#2A00FF", "#5500FF", "#8000FF", "#AA00FF", "#D400FF",
-      "#FF00FF", "#FF00D4", "#FF00AA", "#FF0080", "#FF0055", "#FF002A",
-    ],
-    gravity: 30,
-    minHeight: { min: 10, max: 30 },
-    rate: 10,
-    saturation: { min: -30, max: 30 },
-    sounds: true,
-    speed: { min: 20, max: 40 },
-    splitCount: 100,
+export class AppComponent implements OnInit {
+  constructor(private readonly ngParticlesService: NgParticlesService) {}
+
+  options: ISourceOptions = {
+    fullScreen: { enable: true, zIndex: -1 },
+    background: { color: { value: "#1a1a2e" } },
+    fpsLimit: 60,
+    particles: {
+      number: { value: 80, density: { enable: true } },
+      color: { value: ["#6c5ce7", "#a29bfe", "#fd79a8"] },
+      shape: { type: "circle" },
+      opacity: { value: 0.5, random: true },
+      size: { value: { min: 1, max: 4 }, random: true },
+      move: {
+        enable: true,
+        speed: 2,
+        direction: "none",
+        random: false,
+        straight: false,
+        outModes: { default: "out" },
+      },
+    },
+    detectRetina: true,
   };
+
+  ngOnInit(): void {
+    void this.ngParticlesService.init(async (engine) => {
+      await loadSlim(engine);
+    });
+  }
 }

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

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

package/template/astro/package.json

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

package/template/ember/.ember-cli

@@ -0,0 +1,3 @@
+{
+  "disableAnalytics": false
+}

package/template/ember/app/app.js

@@ -0,0 +1,12 @@
+import Application from "@ember/application";
+import Resolver from "ember-resolver";
+import loadInitializers from "ember-load-initializers";
+import config from "{{packageName}}/config/environment";
+
+export default class App extends Application {
+  modulePrefix = config.modulePrefix;
+  podModulePrefix = config.podModulePrefix;
+  Resolver = Resolver;
+}
+
+loadInitializers(App, config.modulePrefix);

package/template/ember/app/controllers/application.js

@@ -1,6 +1,5 @@
 import Controller from "@ember/controller";
-import { action } from "@ember/object";
-import { initParticlesEngine } from "@tsparticles/ember";
+import { initParticlesEngine } from "@tsparticles/ember/utils/init-particles-engine";
 import { loadSlim } from "@tsparticles/slim";
 
 export default class ApplicationController extends Controller {
@@ -26,9 +25,10 @@ export default class ApplicationController extends Controller {
     detectRetina: true,
   };
 
-  @action
-  async initParticles() {
-    await initParticlesEngine(async (engine) => {
+  constructor() {
+    super();
+
+    void initParticlesEngine(async (engine) => {
       await loadSlim(engine);
     });
   }

package/template/ember/app/index.html

@@ -0,0 +1,23 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>{{projectName}}</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+
+    {{content-for "head"}}
+
+    <link integrity="" rel="stylesheet" href="{{rootURL}}assets/vendor.css" />
+    <link integrity="" rel="stylesheet" href="{{rootURL}}assets/{{packageName}}.css" />
+
+    {{content-for "head-footer"}}
+  </head>
+  <body>
+    {{content-for "body"}}
+
+    <script src="{{rootURL}}assets/vendor.js"></script>
+    <script src="{{rootURL}}assets/{{packageName}}.js"></script>
+
+    {{content-for "body-footer"}}
+  </body>
+</html>

package/template/ember/app/router.js

@@ -0,0 +1,9 @@
+import EmberRouter from "@ember/routing/router";
+import config from "{{packageName}}/config/environment";
+
+export default class Router extends EmberRouter {
+  location = config.locationType;
+  rootURL = config.rootURL;
+}
+
+Router.map(function () {});

package/template/ember/app/styles/app.css

@@ -0,0 +1,7 @@
+/* global styles */
+
+html,
+body {
+  margin: 0;
+  padding: 0;
+}

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 id="app">

package/template/ember/config/environment.js

@@ -0,0 +1,24 @@
+"use strict";
+
+module.exports = function (environment) {
+  const ENV = {
+    modulePrefix: "{{packageName}}",
+    podModulePrefix: "",
+    environment,
+    rootURL: "/",
+    locationType: "history",
+    EmberENV: {
+      FEATURES: {},
+      EXTEND_PROTOTYPES: false,
+    },
+    APP: {},
+  };
+
+  if (environment === "test") {
+    ENV.locationType = "none";
+    ENV.APP.rootElement = "#ember-testing";
+    ENV.APP.autoboot = false;
+  }
+
+  return ENV;
+};

package/template/ember/config/optional-features.json

@@ -0,0 +1,6 @@
+{
+  "application-template-wrapper": false,
+  "default-async-observers": true,
+  "jquery-integration": false,
+  "template-only-glimmer-components": true
+}

package/template/ember/config/targets.js

@@ -0,0 +1,7 @@
+"use strict";
+
+const browsers = ["last 1 Chrome versions", "last 1 Firefox versions", "last 1 Safari versions"];
+
+module.exports = {
+  browsers,
+};

package/template/ember/ember-cli-build.js

@@ -0,0 +1,9 @@
+"use strict";
+
+const EmberApp = require("ember-cli/lib/broccoli/ember-app");
+
+module.exports = function (defaults) {
+  const app = new EmberApp(defaults, {});
+
+  return app.toTree();
+};

package/template/ember/package.json

@@ -28,14 +28,11 @@
     "webpack": "^5.106.1"
   },
   "dependencies": {
-    "@tsparticles/ember": "^4.1.3",
-    "@tsparticles/engine": "^4.1.3",
-    "@tsparticles/slim": "^4.1.3"
+    "@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,14 +10,13 @@
   },
   "dependencies": {
     "inferno": "^9.1.0",
-    "@tsparticles/inferno": "^4.1.3",
-    "@tsparticles/engine": "^4.1.3",
-    "@tsparticles/slim": "^4.1.3"
+    "inferno-create-element": "^9.1.0",
+    "@tsparticles/inferno": "^4.4.0",
+    "@tsparticles/engine": "^4.4.0",
+    "@tsparticles/slim": "^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,4 +1,4 @@
-import Particles, { ParticlesProvider } from "@tsparticles/inferno";
+import { Particles, ParticlesProvider } from "@tsparticles/inferno";
 import { loadSlim } from "@tsparticles/slim";
 import type { Engine } from "@tsparticles/engine";
 

package/template/inferno/src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

package/template/inferno/vite.config.ts

@@ -1,11 +1,13 @@
 import { defineConfig } from "vite";
-import inferno from "vite-plugin-inferno";
 
 export default defineConfig({
-  plugins: [inferno()],
   base: "./",
-  esbuild: {
-    jsxFactory: "createElement",
-    jsxFragment: "Fragment",
+  oxc: {
+    jsx: {
+      runtime: "classic",
+      pragma: "createElement",
+      pragmaFrag: "Fragment",
+    },
+    jsxInject: "import { createElement } from 'inferno-create-element';\nimport { Fragment } from 'inferno';",
   },
 });

package/template/jquery/package.json

@@ -10,10 +10,11 @@
   },
   "dependencies": {
     "jquery": "^3.7.1",
-    "@tsparticles/jquery": "^4.1.3"
+    "@tsparticles/jquery": "^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/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

package/template/lit/package.json

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

package/template/lit/src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

package/template/nextjs/package.json

@@ -11,13 +11,13 @@
     "next": "^15.3.2",
     "react": "^19.2.5",
     "react-dom": "^19.2.5",
-    "@tsparticles/nextjs": "^4.1.3",
-    "@tsparticles/engine": "^4.1.3",
-    "@tsparticles/slim": "^4.1.3"
+    "@tsparticles/nextjs": "^4.4.0",
+    "@tsparticles/engine": "^4.4.0",
+    "@tsparticles/slim": "^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"
   }

package/template/nextjs/tsconfig.json

@@ -0,0 +1,20 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true,
+    "incremental": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "esModuleInterop": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "plugins": [{ "name": "next" }]
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "exclude": ["node_modules"]
+}

package/template/nuxt2/nuxt.config.js

@@ -1,3 +1,21 @@
 export default {
-  buildModules: ["@tsparticles/nuxt2"],
+  // Nuxt 2 ships webpack 4, which predates the "exports" field of package.json.
+  // The tsParticles v4 packages expose their entry points through "exports",
+  // so deep imports such as "@tsparticles/plugin-emitters/plugin" need an
+  // explicit alias to the CommonJS file shipped by each package.
+  build: {
+    transpile: [/@tsparticles\//, "tsparticles"],
+    // Webpack 4 cannot parse the logical assignment operators shipped by the
+    // tsParticles v4 builds, so they are transpiled down to the configured
+    // browserslist targets.
+    babel: {
+      presets: [["@babel/preset-env", { targets: { chrome: "58", edge: "16", firefox: "57", safari: "11" } }]],
+    },
+    extend(config) {
+      config.resolve.alias["@tsparticles/engine/lazy"] = "@tsparticles/engine/cjs/index.lazy.js";
+      config.resolve.alias["@tsparticles/plugin-emitters/plugin"] = "@tsparticles/plugin-emitters/cjs/plugin.js";
+      config.resolve.alias["@tsparticles/shape-cards/suits"] = "@tsparticles/shape-cards/cjs/suits.js";
+    },
+  },
+  modules: ["@tsparticles/nuxt2"],
 };

package/template/nuxt2/package.json

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

package/template/nuxt2/pages/index.vue

@@ -1,7 +1,7 @@
 <template>
   <div id="app">
     <h1>Hello, tsParticles!</h1>
-    <Particles id="tsparticles" :options="options" />
+    <vue-particles id="tsparticles" :options="options" />
   </div>
 </template>
 

package/template/nuxt2/utils/particlesInit.js

@@ -0,0 +1,5 @@
+export async function registerParticles(engine) {
+  const { loadSlim } = await import("@tsparticles/slim");
+
+  await loadSlim(engine);
+}

package/template/nuxt3/package.json

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

package/template/nuxt3/utils/particlesInit.ts

@@ -0,0 +1,6 @@
+import type { Engine } from "@tsparticles/engine";
+import { loadSlim } from "@tsparticles/slim";
+
+export async function registerParticles(engine: Engine): Promise<void> {
+  await loadSlim(engine);
+}

package/template/nuxt4/package.json

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

package/template/nuxt4/utils/particlesInit.ts

@@ -0,0 +1,6 @@
+import type { Engine } from "@tsparticles/engine";
+import { loadSlim } from "@tsparticles/slim";
+
+export async function registerParticles(engine: Engine): Promise<void> {
+  await loadSlim(engine);
+}

package/template/preact/package.json

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

package/template/preact/src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

package/template/qwik/package.json

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

package/template/qwik/vite.config.ts

@@ -1,7 +1,7 @@
-import { qwikVite } from "@builder.io/qwik/plugin.vite";
+import { qwikVite } from "@builder.io/qwik/optimizer";
 import { defineConfig } from "vite";
 
 export default defineConfig({
-  plugins: [qwikVite()],
+  plugins: [qwikVite({ csr: true })],
   base: "./",
 });

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,13 +9,13 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "riot": "^10.0.0",
-    "@tsparticles/riot": "^4.1.3"
+    "riot": "^10.1.6",
+    "@tsparticles/riot": "^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/riot/src/main.ts

@@ -1,5 +1,9 @@
-import { mount } from "riot";
+import { component } from "riot";
 import App from "./app.riot";
 import "./style.css";
 
-mount(App, "#app");
+const appElement = document.getElementById("app");
+
+if (appElement) {
+  component(App)(appElement);
+}

package/template/riot/src/riot.d.ts

@@ -0,0 +1,6 @@
+declare module "*.riot" {
+  import type { RiotComponent, RiotComponentWrapper } from "riot";
+
+  const component: RiotComponentWrapper<RiotComponent>;
+  export default component;
+}

package/template/riot/src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

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/solid/src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

package/template/stencil/package.json

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

package/template/stencil/src/components/app-home/app-home.css

@@ -0,0 +1,29 @@
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  min-height: 100vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: #0a0a1a;
+  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
+  color: #fff;
+}
+
+#app {
+  text-align: center;
+  z-index: 10;
+  padding: 1rem;
+}
+
+h1 {
+  font-size: 2.5em;
+  margin-bottom: 1rem;
+  background: linear-gradient(135deg, #6c5ce7, #fd79a8);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}

package/template/stencil/stencil.config.ts

@@ -0,0 +1,11 @@
+import { Config } from "@stencil/core";
+
+export const config: Config = {
+  namespace: "{{packageName}}",
+  srcDir: "src",
+  outputTargets: [
+    {
+      type: "dist",
+    },
+  ],
+};

package/template/stencil/tsconfig.json

@@ -0,0 +1,18 @@
+{
+  "compilerOptions": {
+    "allowSyntheticDefaultImports": true,
+    "allowUnreachableCode": false,
+    "declaration": false,
+    "esModuleInterop": true,
+    "experimentalDecorators": true,
+    "lib": ["dom", "es2020"],
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "target": "es2020",
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "jsx": "react",
+    "jsxFactory": "h"
+  },
+  "include": ["src"]
+}

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/vanilla/src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

package/template/vue2/package.json

@@ -10,12 +10,12 @@
   },
   "dependencies": {
     "vue": "^2.7.16",
-    "@tsparticles/vue2": "^4.1.3"
+    "@tsparticles/vue2": "^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/vue2/src/env.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="vite/client" />
+
+declare module "*.vue" {
+  import Vue from "vue";
+  export default Vue;
+}

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/package.json

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

package/template/webcomponents/src/main.ts

@@ -1,9 +1,12 @@
+import { tsParticles } from "@tsparticles/engine";
 import { defineParticlesElement, initParticlesEngine } from "@tsparticles/webcomponents";
 import { loadSlim } from "@tsparticles/slim";
 import "./style.css";
 
+globalThis.tsParticles = tsParticles;
+
 void initParticlesEngine(async (engine) => {
   await loadSlim(engine);
 });
 
-defineParticlesElement();
+defineParticlesElement();

package/template/webcomponents/src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

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"
     }
   }
-}
+}