@tsparticles/interaction-external-bubble 4.0.0-beta.0 → 4.0.0-beta.10

package/438.min.js

@@ -0,0 +1 @@
+"use strict";(this.webpackChunk_tsparticles_interaction_external_bubble=this.webpackChunk_tsparticles_interaction_external_bubble||[]).push([[438],{438(e,i,t){t.d(i,{Bubbler:()=>u});var l,b,o=t(303),a=t(702),n=t(528);function r(e,i,t,l){return i>=t?(0,o.clamp)(e+(i-t)*l,e,i):i<t?(0,o.clamp)(e-(t-i)*l,i,e):void 0}(l=b||(b={})).color="color",l.opacity="opacity",l.size="size";let s="bubble";class u extends a.ExternalInteractorBase{handleClickMode;_maxDistance;_pluginManager;constructor(e,i){super(i),this._pluginManager=e,this._maxDistance=0,i.bubble??={},this.handleClickMode=e=>{e===s&&(i.bubble??={},i.bubble.clicking=!0)}}get maxDistance(){return this._maxDistance}clear(e,i,t){(!e.bubble.inRange||t)&&(delete e.bubble.div,delete e.bubble.opacity,delete e.bubble.radius,delete e.bubble.color)}init(){let e=this.container,i=e.actualOptions.interactivity?.modes.bubble;i&&(this._maxDistance=i.distance,e.retina.bubbleModeDistance=i.distance*e.retina.pixelRatio,void 0!==i.size&&(e.retina.bubbleModeSize=i.size*e.retina.pixelRatio))}interact(e,i){let t=this.container.actualOptions,l=t.interactivity?.events;if(!l)return;let b=l.onHover,n=l.onClick,r=b.enable,u=b.mode,c=n.enable,d=n.mode,p=l.onDiv;r&&(0,o.isInArray)(s,u)?this._hoverBubble(e):c&&(0,o.isInArray)(s,d)?this._clickBubble(e):(0,a.divModeExecute)(s,p,(t,l)=>{this._singleSelectorHover(e,i,t,l)})}isEnabled(e,i){let t=this.container.actualOptions,l=e.mouse,b=(i?.interactivity??t.interactivity)?.events;if(!b)return!1;let{onClick:n,onDiv:r,onHover:u}=b,c=(0,a.isDivModeEnabled)(s,r);return!!(c||u.enable&&l.position||n.enable&&l.clickPosition)&&((0,o.isInArray)(s,u.mode)||(0,o.isInArray)(s,n.mode)||c)}loadModeOptions(e,...i){for(let t of(e.bubble??=new n.Z,i))e.bubble.load(t?.bubble)}reset(e,i){i.bubble.inRange=!1}_clickBubble=e=>{let i=this.container,t=i.actualOptions,l=e.mouse.clickPosition,a=t.interactivity?.modes.bubble;if(!a||!l)return;i.bubble??={};let n=i.retina.bubbleModeDistance;if(!n||n<0)return;let r=i.particles.grid.queryCircle(l,n,i=>this.isEnabled(e,i)),{bubble:s}=i;for(let t of r){if(!s.clicking)continue;t.bubble.inRange=!s.durationEnd;let r=t.getPosition(),u=(0,o.getDistance)(r,l),c=(performance.now()-(e.mouse.clickTime??0))/o.millisecondsToSeconds;c>a.duration&&(s.durationEnd=!0),c>a.duration*o.double&&(s.clicking=!1,s.durationEnd=!1);let d={bubbleObj:{optValue:i.retina.bubbleModeSize,value:t.bubble.radius},particlesObj:{optValue:(0,o.getRangeMax)(t.options.size.value)*i.retina.pixelRatio,value:t.size.value},type:b.size};this._process(t,u,c,d);let p={bubbleObj:{optValue:a.opacity,value:t.bubble.opacity},particlesObj:{optValue:(0,o.getRangeMax)(t.options.opacity.value),value:t.opacity?.value??1},type:b.opacity};this._process(t,u,c,p),!s.durationEnd&&u<=n?this._hoverBubbleColor(t,u):delete t.bubble.color}};_hoverBubble=e=>{let i=this.container,t=e.mouse.position,l=i.retina.bubbleModeDistance;if(l&&!(l<0)&&t)for(let b of i.particles.grid.queryCircle(t,l,i=>this.isEnabled(e,i))){b.bubble.inRange=!0;let i=b.getPosition(),n=(0,o.getDistance)(i,t),r=1-n/l;n<=l?r>=0&&e.status===a.mouseMoveEvent&&(this._hoverBubbleSize(b,r),this._hoverBubbleOpacity(b,r),this._hoverBubbleColor(b,r)):this.reset(e,b),e.status===a.mouseLeaveEvent&&this.reset(e,b)}};_hoverBubbleColor=(e,i,t)=>{let l=this.container.actualOptions,b=t??l.interactivity?.modes.bubble;if(b){if(!e.bubble.finalColor){let i=b.color;if(!i)return;let t=(0,o.itemFromSingleOrMultiple)(i);e.bubble.finalColor=(0,o.rangeColorToHsl)(this._pluginManager,t)}if(e.bubble.finalColor)if(b.mix){e.bubble.color=void 0;let t=e.getFillColor();e.bubble.color=t?(0,o.rgbToHsl)((0,o.colorMix)(t,e.bubble.finalColor,1-i,i)):e.bubble.finalColor}else e.bubble.color=e.bubble.finalColor}};_hoverBubbleOpacity=(e,i,t)=>{let l=this.container.actualOptions,b=t?.opacity??l.interactivity?.modes.bubble?.opacity;if(!b)return;let a=e.options.opacity.value,n=r(e.opacity?.value??1,b,(0,o.getRangeMax)(a),i);void 0!==n&&(e.bubble.opacity=n)};_hoverBubbleSize=(e,i,t)=>{let l=this.container,b=t?.size?t.size*l.retina.pixelRatio:l.retina.bubbleModeSize;if(void 0===b)return;let a=(0,o.getRangeMax)(e.options.size.value)*l.retina.pixelRatio,n=r(e.size.value,b,a,i);void 0!==n&&(e.bubble.radius=n)};_process=(e,i,t,l)=>{let o=this.container,a=l.bubbleObj.optValue,n=o.actualOptions,r=n.interactivity?.modes.bubble;if(!r||void 0===a)return;let s=r.duration,u=o.retina.bubbleModeDistance,c=l.particlesObj.optValue,d=l.bubbleObj.value,p=l.particlesObj.value??0,h=l.type;if(u&&!(u<0)&&a!==c)if(o.bubble??={},o.bubble.durationEnd)d&&(h===b.size&&delete e.bubble.radius,h===b.opacity&&delete e.bubble.opacity);else if(i<=u){if((d??p)!==a){let i=p-t*(p-a)/s;h===b.size&&(e.bubble.radius=i),h===b.opacity&&(e.bubble.opacity=i)}}else h===b.size&&delete e.bubble.radius,h===b.opacity&&delete e.bubble.opacity};_singleSelectorHover=(e,i,t,l)=>{let b=this.container,n=(0,o.safeDocument)().querySelectorAll(t),r=b.actualOptions.interactivity?.modes.bubble;r&&n.length&&n.forEach(t=>{let n=b.retina.pixelRatio,s={x:(t.offsetLeft+t.offsetWidth*o.half)*n,y:(t.offsetTop+t.offsetHeight*o.half)*n},u=t.offsetWidth*o.half*n,c=l.type===a.DivType.circle?new o.Circle(s.x,s.y,u):new o.Rectangle(t.offsetLeft*n,t.offsetTop*n,t.offsetWidth*n,t.offsetHeight*n);for(let l of b.particles.grid.query(c,i=>this.isEnabled(e,i))){if(!c.contains(l.getPosition()))continue;l.bubble.inRange=!0;let e=r.divs,b=(0,a.divMode)(e,t);l.bubble.div&&l.bubble.div===t||(this.clear(l,i,!0),l.bubble.div=t),this._hoverBubbleSize(l,1,b),this._hoverBubbleOpacity(l,1,b),this._hoverBubbleColor(l,1,b)}})}}}}]);

package/README.md

@@ -9,6 +9,12 @@
 [tsParticles](https://github.com/tsparticles/tsparticles) interaction plugin for bubble effect around mouse or HTML
 elements.
 
+## Quick checklist
+
+1. Install `@tsparticles/engine` (or use the CDN bundle below)
+2. Call the package loader function(s) before `tsParticles.load(...)`
+3. Apply the package options in your `tsParticles.load(...)` config
+
 ## How to use it
 
 ### CDN / Vanilla JS / jQuery
@@ -79,3 +85,35 @@ import { loadExternalBubbleInteraction } from "@tsparticles/interaction-external
   await loadExternalBubbleInteraction(tsParticles);
 })();
 ```
+
+## Option mapping
+
+- Event mode key: `interactivity.events.onHover.mode` or `interactivity.events.onClick.mode` with value `"bubble"`
+- Mode options key: `interactivity.modes.bubble`
+
+```json
+{
+  "interactivity": {
+    "events": {
+      "onHover": {
+        "enable": true,
+        "mode": "bubble"
+      }
+    },
+    "modes": {
+      "bubble": {}
+    }
+  }
+}
+```
+
+## Common pitfalls
+
+- Calling `tsParticles.load(...)` before `loadInteractivityPlugin(...)`
+- Verify required peer packages before enabling advanced options
+- Change one option group at a time to isolate regressions quickly
+
+## Related docs
+
+- All packages catalog: <https://github.com/tsparticles/tsparticles>
+- Main docs: <https://particles.js.org/docs/>

package/browser/Bubbler.js

@@ -6,11 +6,11 @@ import { calculateBubbleValue } from "./Utils.js";
 const bubbleMode = "bubble", minDistance = 0, defaultClickTime = 0, defaultOpacity = 1, ratioOffset = 1, defaultBubbleValue = 0, minRatio = 0, defaultRatio = 1;
 export class Bubbler extends ExternalInteractorBase {
     handleClickMode;
-    _engine;
     _maxDistance;
-    constructor(engine, container) {
+    _pluginManager;
+    constructor(pluginManager, container) {
         super(container);
-        this._engine = engine;
+        this._pluginManager = pluginManager;
         this._maxDistance = 0;
         container.bubble ??= {};
         this.handleClickMode = (mode) => {
@@ -173,7 +173,7 @@ export class Bubbler extends ExternalInteractorBase {
                 return;
             }
             const bubbleColor = itemFromSingleOrMultiple(modeColor);
-            particle.bubble.finalColor = rangeColorToHsl(this._engine, bubbleColor);
+            particle.bubble.finalColor = rangeColorToHsl(this._pluginManager, bubbleColor);
         }
         if (!particle.bubble.finalColor) {
             return;

package/browser/index.js

@@ -1,11 +1,11 @@
 export async function loadExternalBubbleInteraction(engine) {
-    engine.checkVersion("4.0.0-beta.0");
-    await engine.register(async (e) => {
+    engine.checkVersion("4.0.0-beta.10");
+    await engine.pluginManager.register(async (e) => {
         const { ensureInteractivityPluginLoaded } = await import("@tsparticles/plugin-interactivity");
         ensureInteractivityPluginLoaded(e);
-        e.addInteractor?.("externalBubble", async (container) => {
+        e.pluginManager.addInteractor?.("externalBubble", async (container) => {
             const { Bubbler } = await import("./Bubbler.js");
-            return new Bubbler(e, container);
+            return new Bubbler(e.pluginManager, container);
         });
     });
 }

package/cjs/Bubbler.js

@@ -6,11 +6,11 @@ import { calculateBubbleValue } from "./Utils.js";
 const bubbleMode = "bubble", minDistance = 0, defaultClickTime = 0, defaultOpacity = 1, ratioOffset = 1, defaultBubbleValue = 0, minRatio = 0, defaultRatio = 1;
 export class Bubbler extends ExternalInteractorBase {
     handleClickMode;
-    _engine;
     _maxDistance;
-    constructor(engine, container) {
+    _pluginManager;
+    constructor(pluginManager, container) {
         super(container);
-        this._engine = engine;
+        this._pluginManager = pluginManager;
         this._maxDistance = 0;
         container.bubble ??= {};
         this.handleClickMode = (mode) => {
@@ -173,7 +173,7 @@ export class Bubbler extends ExternalInteractorBase {
                 return;
             }
             const bubbleColor = itemFromSingleOrMultiple(modeColor);
-            particle.bubble.finalColor = rangeColorToHsl(this._engine, bubbleColor);
+            particle.bubble.finalColor = rangeColorToHsl(this._pluginManager, bubbleColor);
         }
         if (!particle.bubble.finalColor) {
             return;

package/cjs/index.js

@@ -1,11 +1,11 @@
 export async function loadExternalBubbleInteraction(engine) {
-    engine.checkVersion("4.0.0-beta.0");
-    await engine.register(async (e) => {
+    engine.checkVersion("4.0.0-beta.10");
+    await engine.pluginManager.register(async (e) => {
         const { ensureInteractivityPluginLoaded } = await import("@tsparticles/plugin-interactivity");
         ensureInteractivityPluginLoaded(e);
-        e.addInteractor?.("externalBubble", async (container) => {
+        e.pluginManager.addInteractor?.("externalBubble", async (container) => {
             const { Bubbler } = await import("./Bubbler.js");
-            return new Bubbler(e, container);
+            return new Bubbler(e.pluginManager, container);
         });
     });
 }

package/dist_browser_Bubbler_js.js

@@ -4,7 +4,7 @@
  * Demo / Generator : https://particles.js.org/
  * GitHub : https://www.github.com/matteobruni/tsparticles
  * How to use? : Check the GitHub README
- * v4.0.0-beta.0
+ * v4.0.0-beta.10
  */
 "use strict";
 /*
@@ -23,7 +23,7 @@
   \*********************************/
 (__unused_webpack___webpack_module__, __webpack_exports__, __webpack_require__) {
 
-eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   Bubbler: () => (/* binding */ Bubbler)\n/* harmony export */ });\n/* harmony import */ var _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @tsparticles/engine */ \"@tsparticles/engine\");\n/* harmony import */ var _tsparticles_plugin_interactivity__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @tsparticles/plugin-interactivity */ \"@tsparticles/plugin-interactivity\");\n/* harmony import */ var _Options_Classes_Bubble_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./Options/Classes/Bubble.js */ \"./dist/browser/Options/Classes/Bubble.js\");\n/* harmony import */ var _Enums_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./Enums.js */ \"./dist/browser/Enums.js\");\n/* harmony import */ var _Utils_js__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./Utils.js */ \"./dist/browser/Utils.js\");\n\n\n\n\n\nconst bubbleMode = \"bubble\", minDistance = 0, defaultClickTime = 0, defaultOpacity = 1, ratioOffset = 1, defaultBubbleValue = 0, minRatio = 0, defaultRatio = 1;\nclass Bubbler extends _tsparticles_plugin_interactivity__WEBPACK_IMPORTED_MODULE_1__.ExternalInteractorBase {\n    handleClickMode;\n    _engine;\n    _maxDistance;\n    constructor(engine, container){\n        super(container);\n        this._engine = engine;\n        this._maxDistance = 0;\n        container.bubble ??= {};\n        this.handleClickMode = (mode)=>{\n            if (mode !== bubbleMode) {\n                return;\n            }\n            container.bubble ??= {};\n            container.bubble.clicking = true;\n        };\n    }\n    get maxDistance() {\n        return this._maxDistance;\n    }\n    clear(particle, _delta, force) {\n        if (particle.bubble.inRange && !force) {\n            return;\n        }\n        delete particle.bubble.div;\n        delete particle.bubble.opacity;\n        delete particle.bubble.radius;\n        delete particle.bubble.color;\n    }\n    init() {\n        const container = this.container, bubble = container.actualOptions.interactivity?.modes.bubble;\n        if (!bubble) {\n            return;\n        }\n        this._maxDistance = bubble.distance;\n        container.retina.bubbleModeDistance = bubble.distance * container.retina.pixelRatio;\n        if (bubble.size !== undefined) {\n            container.retina.bubbleModeSize = bubble.size * container.retina.pixelRatio;\n        }\n    }\n    interact(interactivityData, delta) {\n        const options = this.container.actualOptions, events = options.interactivity?.events;\n        if (!events) {\n            return;\n        }\n        const onHover = events.onHover, onClick = events.onClick, hoverEnabled = onHover.enable, hoverMode = onHover.mode, clickEnabled = onClick.enable, clickMode = onClick.mode, divs = events.onDiv;\n        if (hoverEnabled && (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.isInArray)(bubbleMode, hoverMode)) {\n            this._hoverBubble(interactivityData);\n        } else if (clickEnabled && (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.isInArray)(bubbleMode, clickMode)) {\n            this._clickBubble(interactivityData);\n        } else {\n            (0,_tsparticles_plugin_interactivity__WEBPACK_IMPORTED_MODULE_1__.divModeExecute)(bubbleMode, divs, (selector, div)=>{\n                this._singleSelectorHover(interactivityData, delta, selector, div);\n            });\n        }\n    }\n    isEnabled(interactivityData, particle) {\n        const container = this.container, options = container.actualOptions, mouse = interactivityData.mouse, events = (particle?.interactivity ?? options.interactivity)?.events;\n        if (!events) {\n            return false;\n        }\n        const { onClick, onDiv, onHover } = events, divBubble = (0,_tsparticles_plugin_interactivity__WEBPACK_IMPORTED_MODULE_1__.isDivModeEnabled)(bubbleMode, onDiv);\n        if (!(divBubble || onHover.enable && !!mouse.position || onClick.enable && mouse.clickPosition)) {\n            return false;\n        }\n        return (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.isInArray)(bubbleMode, onHover.mode) || (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.isInArray)(bubbleMode, onClick.mode) || divBubble;\n    }\n    loadModeOptions(options, ...sources) {\n        options.bubble ??= new _Options_Classes_Bubble_js__WEBPACK_IMPORTED_MODULE_2__.Bubble();\n        for (const source of sources){\n            options.bubble.load(source?.bubble);\n        }\n    }\n    reset(_interactivityData, particle) {\n        particle.bubble.inRange = false;\n    }\n    _clickBubble = (interactivityData)=>{\n        const container = this.container, options = container.actualOptions, mouseClickPos = interactivityData.mouse.clickPosition, bubbleOptions = options.interactivity?.modes.bubble;\n        if (!bubbleOptions || !mouseClickPos) {\n            return;\n        }\n        container.bubble ??= {};\n        const distance = container.retina.bubbleModeDistance;\n        if (!distance || distance < minDistance) {\n            return;\n        }\n        const query = container.particles.grid.queryCircle(mouseClickPos, distance, (p)=>this.isEnabled(interactivityData, p)), { bubble } = container;\n        for (const particle of query){\n            if (!bubble.clicking) {\n                continue;\n            }\n            particle.bubble.inRange = !bubble.durationEnd;\n            const pos = particle.getPosition(), distMouse = (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.getDistance)(pos, mouseClickPos), timeSpent = (performance.now() - (interactivityData.mouse.clickTime ?? defaultClickTime)) / _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.millisecondsToSeconds;\n            if (timeSpent > bubbleOptions.duration) {\n                bubble.durationEnd = true;\n            }\n            if (timeSpent > bubbleOptions.duration * _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.double) {\n                bubble.clicking = false;\n                bubble.durationEnd = false;\n            }\n            const sizeData = {\n                bubbleObj: {\n                    optValue: container.retina.bubbleModeSize,\n                    value: particle.bubble.radius\n                },\n                particlesObj: {\n                    optValue: (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.getRangeMax)(particle.options.size.value) * container.retina.pixelRatio,\n                    value: particle.size.value\n                },\n                type: _Enums_js__WEBPACK_IMPORTED_MODULE_3__.ProcessBubbleType.size\n            };\n            this._process(particle, distMouse, timeSpent, sizeData);\n            const opacityData = {\n                bubbleObj: {\n                    optValue: bubbleOptions.opacity,\n                    value: particle.bubble.opacity\n                },\n                particlesObj: {\n                    optValue: (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.getRangeMax)(particle.options.opacity.value),\n                    value: particle.opacity?.value ?? defaultOpacity\n                },\n                type: _Enums_js__WEBPACK_IMPORTED_MODULE_3__.ProcessBubbleType.opacity\n            };\n            this._process(particle, distMouse, timeSpent, opacityData);\n            if (!bubble.durationEnd && distMouse <= distance) {\n                this._hoverBubbleColor(particle, distMouse);\n            } else {\n                delete particle.bubble.color;\n            }\n        }\n    };\n    _hoverBubble = (interactivityData)=>{\n        const container = this.container, mousePos = interactivityData.mouse.position, distance = container.retina.bubbleModeDistance;\n        if (!distance || distance < minDistance || !mousePos) {\n            return;\n        }\n        const query = container.particles.grid.queryCircle(mousePos, distance, (p)=>this.isEnabled(interactivityData, p));\n        for (const particle of query){\n            particle.bubble.inRange = true;\n            const pos = particle.getPosition(), pointDistance = (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.getDistance)(pos, mousePos), ratio = ratioOffset - pointDistance / distance;\n            if (pointDistance <= distance) {\n                if (ratio >= minRatio && interactivityData.status === _tsparticles_plugin_interactivity__WEBPACK_IMPORTED_MODULE_1__.mouseMoveEvent) {\n                    this._hoverBubbleSize(particle, ratio);\n                    this._hoverBubbleOpacity(particle, ratio);\n                    this._hoverBubbleColor(particle, ratio);\n                }\n            } else {\n                this.reset(interactivityData, particle);\n            }\n            if (interactivityData.status === _tsparticles_plugin_interactivity__WEBPACK_IMPORTED_MODULE_1__.mouseLeaveEvent) {\n                this.reset(interactivityData, particle);\n            }\n        }\n    };\n    _hoverBubbleColor = (particle, ratio, divBubble)=>{\n        const options = this.container.actualOptions, bubbleOptions = divBubble ?? options.interactivity?.modes.bubble;\n        if (!bubbleOptions) {\n            return;\n        }\n        if (!particle.bubble.finalColor) {\n            const modeColor = bubbleOptions.color;\n            if (!modeColor) {\n                return;\n            }\n            const bubbleColor = (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.itemFromSingleOrMultiple)(modeColor);\n            particle.bubble.finalColor = (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.rangeColorToHsl)(this._engine, bubbleColor);\n        }\n        if (!particle.bubble.finalColor) {\n            return;\n        }\n        if (bubbleOptions.mix) {\n            particle.bubble.color = undefined;\n            const pColor = particle.getFillColor();\n            particle.bubble.color = pColor ? (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.rgbToHsl)((0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.colorMix)(pColor, particle.bubble.finalColor, ratioOffset - ratio, ratio)) : particle.bubble.finalColor;\n        } else {\n            particle.bubble.color = particle.bubble.finalColor;\n        }\n    };\n    _hoverBubbleOpacity = (particle, ratio, divBubble)=>{\n        const container = this.container, options = container.actualOptions, modeOpacity = divBubble?.opacity ?? options.interactivity?.modes.bubble?.opacity;\n        if (!modeOpacity) {\n            return;\n        }\n        const optOpacity = particle.options.opacity.value, pOpacity = particle.opacity?.value ?? defaultOpacity, opacity = (0,_Utils_js__WEBPACK_IMPORTED_MODULE_4__.calculateBubbleValue)(pOpacity, modeOpacity, (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.getRangeMax)(optOpacity), ratio);\n        if (opacity !== undefined) {\n            particle.bubble.opacity = opacity;\n        }\n    };\n    _hoverBubbleSize = (particle, ratio, divBubble)=>{\n        const container = this.container, modeSize = divBubble?.size ? divBubble.size * container.retina.pixelRatio : container.retina.bubbleModeSize;\n        if (modeSize === undefined) {\n            return;\n        }\n        const optSize = (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.getRangeMax)(particle.options.size.value) * container.retina.pixelRatio, pSize = particle.size.value, size = (0,_Utils_js__WEBPACK_IMPORTED_MODULE_4__.calculateBubbleValue)(pSize, modeSize, optSize, ratio);\n        if (size !== undefined) {\n            particle.bubble.radius = size;\n        }\n    };\n    _process = (particle, distMouse, timeSpent, data)=>{\n        const container = this.container, bubbleParam = data.bubbleObj.optValue, options = container.actualOptions, bubbleOptions = options.interactivity?.modes.bubble;\n        if (!bubbleOptions || bubbleParam === undefined) {\n            return;\n        }\n        const bubbleDuration = bubbleOptions.duration, bubbleDistance = container.retina.bubbleModeDistance, particlesParam = data.particlesObj.optValue, pObjBubble = data.bubbleObj.value, pObj = data.particlesObj.value ?? defaultBubbleValue, type = data.type;\n        if (!bubbleDistance || bubbleDistance < minDistance || bubbleParam === particlesParam) {\n            return;\n        }\n        container.bubble ??= {};\n        if (container.bubble.durationEnd) {\n            if (pObjBubble) {\n                if (type === _Enums_js__WEBPACK_IMPORTED_MODULE_3__.ProcessBubbleType.size) {\n                    delete particle.bubble.radius;\n                }\n                if (type === _Enums_js__WEBPACK_IMPORTED_MODULE_3__.ProcessBubbleType.opacity) {\n                    delete particle.bubble.opacity;\n                }\n            }\n        } else {\n            if (distMouse <= bubbleDistance) {\n                const obj = pObjBubble ?? pObj;\n                if (obj !== bubbleParam) {\n                    const value = pObj - timeSpent * (pObj - bubbleParam) / bubbleDuration;\n                    if (type === _Enums_js__WEBPACK_IMPORTED_MODULE_3__.ProcessBubbleType.size) {\n                        particle.bubble.radius = value;\n                    }\n                    if (type === _Enums_js__WEBPACK_IMPORTED_MODULE_3__.ProcessBubbleType.opacity) {\n                        particle.bubble.opacity = value;\n                    }\n                }\n            } else {\n                if (type === _Enums_js__WEBPACK_IMPORTED_MODULE_3__.ProcessBubbleType.size) {\n                    delete particle.bubble.radius;\n                }\n                if (type === _Enums_js__WEBPACK_IMPORTED_MODULE_3__.ProcessBubbleType.opacity) {\n                    delete particle.bubble.opacity;\n                }\n            }\n        }\n    };\n    _singleSelectorHover = (interactivityData, delta, selector, div)=>{\n        const container = this.container, selectors = (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.safeDocument)().querySelectorAll(selector), bubble = container.actualOptions.interactivity?.modes.bubble;\n        if (!bubble || !selectors.length) {\n            return;\n        }\n        selectors.forEach((item)=>{\n            const elem = item, pxRatio = container.retina.pixelRatio, pos = {\n                x: (elem.offsetLeft + elem.offsetWidth * _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.half) * pxRatio,\n                y: (elem.offsetTop + elem.offsetHeight * _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.half) * pxRatio\n            }, repulseRadius = elem.offsetWidth * _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.half * pxRatio, area = div.type === _tsparticles_plugin_interactivity__WEBPACK_IMPORTED_MODULE_1__.DivType.circle ? new _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.Circle(pos.x, pos.y, repulseRadius) : new _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.Rectangle(elem.offsetLeft * pxRatio, elem.offsetTop * pxRatio, elem.offsetWidth * pxRatio, elem.offsetHeight * pxRatio), query = container.particles.grid.query(area, (p)=>this.isEnabled(interactivityData, p));\n            for (const particle of query){\n                if (!area.contains(particle.getPosition())) {\n                    continue;\n                }\n                particle.bubble.inRange = true;\n                const divs = bubble.divs, divBubble = (0,_tsparticles_plugin_interactivity__WEBPACK_IMPORTED_MODULE_1__.divMode)(divs, elem);\n                if (!particle.bubble.div || particle.bubble.div !== elem) {\n                    this.clear(particle, delta, true);\n                    particle.bubble.div = elem;\n                }\n                this._hoverBubbleSize(particle, defaultRatio, divBubble);\n                this._hoverBubbleOpacity(particle, defaultRatio, divBubble);\n                this._hoverBubbleColor(particle, defaultRatio, divBubble);\n            }\n        });\n    };\n}\n\n\n//# sourceURL=webpack://@tsparticles/interaction-external-bubble/./dist/browser/Bubbler.js?\n}");
+eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   Bubbler: () => (/* binding */ Bubbler)\n/* harmony export */ });\n/* harmony import */ var _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @tsparticles/engine */ \"@tsparticles/engine\");\n/* harmony import */ var _tsparticles_plugin_interactivity__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @tsparticles/plugin-interactivity */ \"@tsparticles/plugin-interactivity\");\n/* harmony import */ var _Options_Classes_Bubble_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./Options/Classes/Bubble.js */ \"./dist/browser/Options/Classes/Bubble.js\");\n/* harmony import */ var _Enums_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./Enums.js */ \"./dist/browser/Enums.js\");\n/* harmony import */ var _Utils_js__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./Utils.js */ \"./dist/browser/Utils.js\");\n\n\n\n\n\nconst bubbleMode = \"bubble\", minDistance = 0, defaultClickTime = 0, defaultOpacity = 1, ratioOffset = 1, defaultBubbleValue = 0, minRatio = 0, defaultRatio = 1;\nclass Bubbler extends _tsparticles_plugin_interactivity__WEBPACK_IMPORTED_MODULE_1__.ExternalInteractorBase {\n    handleClickMode;\n    _maxDistance;\n    _pluginManager;\n    constructor(pluginManager, container){\n        super(container);\n        this._pluginManager = pluginManager;\n        this._maxDistance = 0;\n        container.bubble ??= {};\n        this.handleClickMode = (mode)=>{\n            if (mode !== bubbleMode) {\n                return;\n            }\n            container.bubble ??= {};\n            container.bubble.clicking = true;\n        };\n    }\n    get maxDistance() {\n        return this._maxDistance;\n    }\n    clear(particle, _delta, force) {\n        if (particle.bubble.inRange && !force) {\n            return;\n        }\n        delete particle.bubble.div;\n        delete particle.bubble.opacity;\n        delete particle.bubble.radius;\n        delete particle.bubble.color;\n    }\n    init() {\n        const container = this.container, bubble = container.actualOptions.interactivity?.modes.bubble;\n        if (!bubble) {\n            return;\n        }\n        this._maxDistance = bubble.distance;\n        container.retina.bubbleModeDistance = bubble.distance * container.retina.pixelRatio;\n        if (bubble.size !== undefined) {\n            container.retina.bubbleModeSize = bubble.size * container.retina.pixelRatio;\n        }\n    }\n    interact(interactivityData, delta) {\n        const options = this.container.actualOptions, events = options.interactivity?.events;\n        if (!events) {\n            return;\n        }\n        const onHover = events.onHover, onClick = events.onClick, hoverEnabled = onHover.enable, hoverMode = onHover.mode, clickEnabled = onClick.enable, clickMode = onClick.mode, divs = events.onDiv;\n        if (hoverEnabled && (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.isInArray)(bubbleMode, hoverMode)) {\n            this._hoverBubble(interactivityData);\n        } else if (clickEnabled && (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.isInArray)(bubbleMode, clickMode)) {\n            this._clickBubble(interactivityData);\n        } else {\n            (0,_tsparticles_plugin_interactivity__WEBPACK_IMPORTED_MODULE_1__.divModeExecute)(bubbleMode, divs, (selector, div)=>{\n                this._singleSelectorHover(interactivityData, delta, selector, div);\n            });\n        }\n    }\n    isEnabled(interactivityData, particle) {\n        const container = this.container, options = container.actualOptions, mouse = interactivityData.mouse, events = (particle?.interactivity ?? options.interactivity)?.events;\n        if (!events) {\n            return false;\n        }\n        const { onClick, onDiv, onHover } = events, divBubble = (0,_tsparticles_plugin_interactivity__WEBPACK_IMPORTED_MODULE_1__.isDivModeEnabled)(bubbleMode, onDiv);\n        if (!(divBubble || onHover.enable && !!mouse.position || onClick.enable && mouse.clickPosition)) {\n            return false;\n        }\n        return (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.isInArray)(bubbleMode, onHover.mode) || (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.isInArray)(bubbleMode, onClick.mode) || divBubble;\n    }\n    loadModeOptions(options, ...sources) {\n        options.bubble ??= new _Options_Classes_Bubble_js__WEBPACK_IMPORTED_MODULE_2__.Bubble();\n        for (const source of sources){\n            options.bubble.load(source?.bubble);\n        }\n    }\n    reset(_interactivityData, particle) {\n        particle.bubble.inRange = false;\n    }\n    _clickBubble = (interactivityData)=>{\n        const container = this.container, options = container.actualOptions, mouseClickPos = interactivityData.mouse.clickPosition, bubbleOptions = options.interactivity?.modes.bubble;\n        if (!bubbleOptions || !mouseClickPos) {\n            return;\n        }\n        container.bubble ??= {};\n        const distance = container.retina.bubbleModeDistance;\n        if (!distance || distance < minDistance) {\n            return;\n        }\n        const query = container.particles.grid.queryCircle(mouseClickPos, distance, (p)=>this.isEnabled(interactivityData, p)), { bubble } = container;\n        for (const particle of query){\n            if (!bubble.clicking) {\n                continue;\n            }\n            particle.bubble.inRange = !bubble.durationEnd;\n            const pos = particle.getPosition(), distMouse = (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.getDistance)(pos, mouseClickPos), timeSpent = (performance.now() - (interactivityData.mouse.clickTime ?? defaultClickTime)) / _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.millisecondsToSeconds;\n            if (timeSpent > bubbleOptions.duration) {\n                bubble.durationEnd = true;\n            }\n            if (timeSpent > bubbleOptions.duration * _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.double) {\n                bubble.clicking = false;\n                bubble.durationEnd = false;\n            }\n            const sizeData = {\n                bubbleObj: {\n                    optValue: container.retina.bubbleModeSize,\n                    value: particle.bubble.radius\n                },\n                particlesObj: {\n                    optValue: (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.getRangeMax)(particle.options.size.value) * container.retina.pixelRatio,\n                    value: particle.size.value\n                },\n                type: _Enums_js__WEBPACK_IMPORTED_MODULE_3__.ProcessBubbleType.size\n            };\n            this._process(particle, distMouse, timeSpent, sizeData);\n            const opacityData = {\n                bubbleObj: {\n                    optValue: bubbleOptions.opacity,\n                    value: particle.bubble.opacity\n                },\n                particlesObj: {\n                    optValue: (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.getRangeMax)(particle.options.opacity.value),\n                    value: particle.opacity?.value ?? defaultOpacity\n                },\n                type: _Enums_js__WEBPACK_IMPORTED_MODULE_3__.ProcessBubbleType.opacity\n            };\n            this._process(particle, distMouse, timeSpent, opacityData);\n            if (!bubble.durationEnd && distMouse <= distance) {\n                this._hoverBubbleColor(particle, distMouse);\n            } else {\n                delete particle.bubble.color;\n            }\n        }\n    };\n    _hoverBubble = (interactivityData)=>{\n        const container = this.container, mousePos = interactivityData.mouse.position, distance = container.retina.bubbleModeDistance;\n        if (!distance || distance < minDistance || !mousePos) {\n            return;\n        }\n        const query = container.particles.grid.queryCircle(mousePos, distance, (p)=>this.isEnabled(interactivityData, p));\n        for (const particle of query){\n            particle.bubble.inRange = true;\n            const pos = particle.getPosition(), pointDistance = (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.getDistance)(pos, mousePos), ratio = ratioOffset - pointDistance / distance;\n            if (pointDistance <= distance) {\n                if (ratio >= minRatio && interactivityData.status === _tsparticles_plugin_interactivity__WEBPACK_IMPORTED_MODULE_1__.mouseMoveEvent) {\n                    this._hoverBubbleSize(particle, ratio);\n                    this._hoverBubbleOpacity(particle, ratio);\n                    this._hoverBubbleColor(particle, ratio);\n                }\n            } else {\n                this.reset(interactivityData, particle);\n            }\n            if (interactivityData.status === _tsparticles_plugin_interactivity__WEBPACK_IMPORTED_MODULE_1__.mouseLeaveEvent) {\n                this.reset(interactivityData, particle);\n            }\n        }\n    };\n    _hoverBubbleColor = (particle, ratio, divBubble)=>{\n        const options = this.container.actualOptions, bubbleOptions = divBubble ?? options.interactivity?.modes.bubble;\n        if (!bubbleOptions) {\n            return;\n        }\n        if (!particle.bubble.finalColor) {\n            const modeColor = bubbleOptions.color;\n            if (!modeColor) {\n                return;\n            }\n            const bubbleColor = (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.itemFromSingleOrMultiple)(modeColor);\n            particle.bubble.finalColor = (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.rangeColorToHsl)(this._pluginManager, bubbleColor);\n        }\n        if (!particle.bubble.finalColor) {\n            return;\n        }\n        if (bubbleOptions.mix) {\n            particle.bubble.color = undefined;\n            const pColor = particle.getFillColor();\n            particle.bubble.color = pColor ? (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.rgbToHsl)((0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.colorMix)(pColor, particle.bubble.finalColor, ratioOffset - ratio, ratio)) : particle.bubble.finalColor;\n        } else {\n            particle.bubble.color = particle.bubble.finalColor;\n        }\n    };\n    _hoverBubbleOpacity = (particle, ratio, divBubble)=>{\n        const container = this.container, options = container.actualOptions, modeOpacity = divBubble?.opacity ?? options.interactivity?.modes.bubble?.opacity;\n        if (!modeOpacity) {\n            return;\n        }\n        const optOpacity = particle.options.opacity.value, pOpacity = particle.opacity?.value ?? defaultOpacity, opacity = (0,_Utils_js__WEBPACK_IMPORTED_MODULE_4__.calculateBubbleValue)(pOpacity, modeOpacity, (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.getRangeMax)(optOpacity), ratio);\n        if (opacity !== undefined) {\n            particle.bubble.opacity = opacity;\n        }\n    };\n    _hoverBubbleSize = (particle, ratio, divBubble)=>{\n        const container = this.container, modeSize = divBubble?.size ? divBubble.size * container.retina.pixelRatio : container.retina.bubbleModeSize;\n        if (modeSize === undefined) {\n            return;\n        }\n        const optSize = (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.getRangeMax)(particle.options.size.value) * container.retina.pixelRatio, pSize = particle.size.value, size = (0,_Utils_js__WEBPACK_IMPORTED_MODULE_4__.calculateBubbleValue)(pSize, modeSize, optSize, ratio);\n        if (size !== undefined) {\n            particle.bubble.radius = size;\n        }\n    };\n    _process = (particle, distMouse, timeSpent, data)=>{\n        const container = this.container, bubbleParam = data.bubbleObj.optValue, options = container.actualOptions, bubbleOptions = options.interactivity?.modes.bubble;\n        if (!bubbleOptions || bubbleParam === undefined) {\n            return;\n        }\n        const bubbleDuration = bubbleOptions.duration, bubbleDistance = container.retina.bubbleModeDistance, particlesParam = data.particlesObj.optValue, pObjBubble = data.bubbleObj.value, pObj = data.particlesObj.value ?? defaultBubbleValue, type = data.type;\n        if (!bubbleDistance || bubbleDistance < minDistance || bubbleParam === particlesParam) {\n            return;\n        }\n        container.bubble ??= {};\n        if (container.bubble.durationEnd) {\n            if (pObjBubble) {\n                if (type === _Enums_js__WEBPACK_IMPORTED_MODULE_3__.ProcessBubbleType.size) {\n                    delete particle.bubble.radius;\n                }\n                if (type === _Enums_js__WEBPACK_IMPORTED_MODULE_3__.ProcessBubbleType.opacity) {\n                    delete particle.bubble.opacity;\n                }\n            }\n        } else {\n            if (distMouse <= bubbleDistance) {\n                const obj = pObjBubble ?? pObj;\n                if (obj !== bubbleParam) {\n                    const value = pObj - timeSpent * (pObj - bubbleParam) / bubbleDuration;\n                    if (type === _Enums_js__WEBPACK_IMPORTED_MODULE_3__.ProcessBubbleType.size) {\n                        particle.bubble.radius = value;\n                    }\n                    if (type === _Enums_js__WEBPACK_IMPORTED_MODULE_3__.ProcessBubbleType.opacity) {\n                        particle.bubble.opacity = value;\n                    }\n                }\n            } else {\n                if (type === _Enums_js__WEBPACK_IMPORTED_MODULE_3__.ProcessBubbleType.size) {\n                    delete particle.bubble.radius;\n                }\n                if (type === _Enums_js__WEBPACK_IMPORTED_MODULE_3__.ProcessBubbleType.opacity) {\n                    delete particle.bubble.opacity;\n                }\n            }\n        }\n    };\n    _singleSelectorHover = (interactivityData, delta, selector, div)=>{\n        const container = this.container, selectors = (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.safeDocument)().querySelectorAll(selector), bubble = container.actualOptions.interactivity?.modes.bubble;\n        if (!bubble || !selectors.length) {\n            return;\n        }\n        selectors.forEach((item)=>{\n            const elem = item, pxRatio = container.retina.pixelRatio, pos = {\n                x: (elem.offsetLeft + elem.offsetWidth * _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.half) * pxRatio,\n                y: (elem.offsetTop + elem.offsetHeight * _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.half) * pxRatio\n            }, repulseRadius = elem.offsetWidth * _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.half * pxRatio, area = div.type === _tsparticles_plugin_interactivity__WEBPACK_IMPORTED_MODULE_1__.DivType.circle ? new _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.Circle(pos.x, pos.y, repulseRadius) : new _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.Rectangle(elem.offsetLeft * pxRatio, elem.offsetTop * pxRatio, elem.offsetWidth * pxRatio, elem.offsetHeight * pxRatio), query = container.particles.grid.query(area, (p)=>this.isEnabled(interactivityData, p));\n            for (const particle of query){\n                if (!area.contains(particle.getPosition())) {\n                    continue;\n                }\n                particle.bubble.inRange = true;\n                const divs = bubble.divs, divBubble = (0,_tsparticles_plugin_interactivity__WEBPACK_IMPORTED_MODULE_1__.divMode)(divs, elem);\n                if (!particle.bubble.div || particle.bubble.div !== elem) {\n                    this.clear(particle, delta, true);\n                    particle.bubble.div = elem;\n                }\n                this._hoverBubbleSize(particle, defaultRatio, divBubble);\n                this._hoverBubbleOpacity(particle, defaultRatio, divBubble);\n                this._hoverBubbleColor(particle, defaultRatio, divBubble);\n            }\n        });\n    };\n}\n\n\n//# sourceURL=webpack://@tsparticles/interaction-external-bubble/./dist/browser/Bubbler.js?\n}");
 
 /***/ },
 

package/esm/Bubbler.js

@@ -6,11 +6,11 @@ import { calculateBubbleValue } from "./Utils.js";
 const bubbleMode = "bubble", minDistance = 0, defaultClickTime = 0, defaultOpacity = 1, ratioOffset = 1, defaultBubbleValue = 0, minRatio = 0, defaultRatio = 1;
 export class Bubbler extends ExternalInteractorBase {
     handleClickMode;
-    _engine;
     _maxDistance;
-    constructor(engine, container) {
+    _pluginManager;
+    constructor(pluginManager, container) {
         super(container);
-        this._engine = engine;
+        this._pluginManager = pluginManager;
         this._maxDistance = 0;
         container.bubble ??= {};
         this.handleClickMode = (mode) => {
@@ -173,7 +173,7 @@ export class Bubbler extends ExternalInteractorBase {
                 return;
             }
             const bubbleColor = itemFromSingleOrMultiple(modeColor);
-            particle.bubble.finalColor = rangeColorToHsl(this._engine, bubbleColor);
+            particle.bubble.finalColor = rangeColorToHsl(this._pluginManager, bubbleColor);
         }
         if (!particle.bubble.finalColor) {
             return;

package/esm/index.js

@@ -1,11 +1,11 @@
 export async function loadExternalBubbleInteraction(engine) {
-    engine.checkVersion("4.0.0-beta.0");
-    await engine.register(async (e) => {
+    engine.checkVersion("4.0.0-beta.10");
+    await engine.pluginManager.register(async (e) => {
         const { ensureInteractivityPluginLoaded } = await import("@tsparticles/plugin-interactivity");
         ensureInteractivityPluginLoaded(e);
-        e.addInteractor?.("externalBubble", async (container) => {
+        e.pluginManager.addInteractor?.("externalBubble", async (container) => {
             const { Bubbler } = await import("./Bubbler.js");
-            return new Bubbler(e, container);
+            return new Bubbler(e.pluginManager, container);
         });
     });
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tsparticles/interaction-external-bubble",
-  "version": "4.0.0-beta.0",
+  "version": "4.0.0-beta.10",
   "description": "tsParticles bubble external interaction",
   "homepage": "https://particles.js.org",
   "repository": {
@@ -81,17 +81,20 @@
       "browser": "./browser/index.js",
       "import": "./esm/index.js",
       "require": "./cjs/index.js",
-      "umd": "./umd/index.js",
-      "default": "./cjs/index.js"
+      "default": "./esm/index.js"
     },
     "./package.json": "./package.json"
   },
-  "dependencies": {
-    "@tsparticles/engine": "4.0.0-beta.0",
-    "@tsparticles/plugin-interactivity": "4.0.0-beta.0"
+  "peerDepdendencies": {
+    "@tsparticles/engine": "4.0.0-beta.1",
+    "@tsparticles/plugin-interactivity": "4.0.0-beta.1"
   },
   "publishConfig": {
     "access": "public"
   },
-  "type": "module"
+  "type": "module",
+  "peerDependencies": {
+    "@tsparticles/engine": "4.0.0-beta.10",
+    "@tsparticles/plugin-interactivity": "4.0.0-beta.10"
+  }
 }