@tsparticles/particles 4.4.0 → 4.5.1

package/tsparticles.particles.bundle.js

@@ -1,21 +1,58 @@
-(function(g){g.__tsParticlesInternals=g.__tsParticlesInternals||{};g.__tsParticlesInternals.bundles=g.__tsParticlesInternals.bundles||{};g.__tsParticlesInternals.effects=g.__tsParticlesInternals.effects||{};g.__tsParticlesInternals.engine=g.__tsParticlesInternals.engine||{};g.__tsParticlesInternals.interactions=g.__tsParticlesInternals.interactions||{};g.__tsParticlesInternals.palettes=g.__tsParticlesInternals.palettes||{};g.__tsParticlesInternals.paths=g.__tsParticlesInternals.paths||{};g.__tsParticlesInternals.plugins=g.__tsParticlesInternals.plugins||{};g.__tsParticlesInternals.plugins=g.__tsParticlesInternals.plugins||{};g.__tsParticlesInternals.plugins.emittersShapes=g.__tsParticlesInternals.plugins.emittersShapes||{};g.__tsParticlesInternals.presets=g.__tsParticlesInternals.presets||{};g.__tsParticlesInternals.shapes=g.__tsParticlesInternals.shapes||{};g.__tsParticlesInternals.updaters=g.__tsParticlesInternals.updaters||{};g.__tsParticlesInternals.utils=g.__tsParticlesInternals.utils||{};g.__tsParticlesInternals.canvas=g.__tsParticlesInternals.canvas||{};g.__tsParticlesInternals.canvas=g.__tsParticlesInternals.canvas||{};g.__tsParticlesInternals.canvas.utils=g.__tsParticlesInternals.canvas.utils||{};g.__tsParticlesInternals.path=g.__tsParticlesInternals.path||{};g.__tsParticlesInternals.path=g.__tsParticlesInternals.path||{};g.__tsParticlesInternals.path.utils=g.__tsParticlesInternals.path.utils||{};var __tsProxyFactory=typeof Proxy!=="undefined"?function(obj){return new Proxy(obj,{get:function(target,key){if(!(key in target)){target[key]={};}return target[key];}});}:function(obj){return obj;};g.__tsParticlesInternals.bundles=__tsProxyFactory(g.__tsParticlesInternals.bundles);g.__tsParticlesInternals.effects=__tsProxyFactory(g.__tsParticlesInternals.effects);g.__tsParticlesInternals.interactions=__tsProxyFactory(g.__tsParticlesInternals.interactions);g.__tsParticlesInternals.palettes=__tsProxyFactory(g.__tsParticlesInternals.palettes);g.__tsParticlesInternals.paths=__tsProxyFactory(g.__tsParticlesInternals.paths);g.__tsParticlesInternals.plugins=__tsProxyFactory(g.__tsParticlesInternals.plugins);g.__tsParticlesInternals.plugins.emittersShapes=__tsProxyFactory(g.__tsParticlesInternals.plugins.emittersShapes);g.__tsParticlesInternals.presets=__tsProxyFactory(g.__tsParticlesInternals.presets);g.__tsParticlesInternals.shapes=__tsProxyFactory(g.__tsParticlesInternals.shapes);g.__tsParticlesInternals.updaters=__tsProxyFactory(g.__tsParticlesInternals.updaters);g.__tsParticlesInternals.utils=__tsProxyFactory(g.__tsParticlesInternals.utils);g.__tsParticlesInternals.canvas=__tsProxyFactory(g.__tsParticlesInternals.canvas);g.__tsParticlesInternals.path=__tsProxyFactory(g.__tsParticlesInternals.path);g.tsparticlesInternalExports=g.tsparticlesInternalExports||{};})(typeof globalThis!=="undefined"?globalThis:typeof window!=="undefined"?window:this);
-/* tsParticles v4.4.0 */
-(function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
-    typeof define === 'function' && define.amd ? define(['exports'], factory) :
-    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.__tsParticlesInternals = global.__tsParticlesInternals || {}, global.__tsParticlesInternals.bundles = global.__tsParticlesInternals.bundles || {}, global.__tsParticlesInternals.bundles.particles = global.__tsParticlesInternals.bundles.particles || {})));
-})(this, (function (exports) { 'use strict';
-
-    const generatedAttribute = "generated", defaultCompositeValue = "source-over", resizeEvent = "resize", visibilityChangeEvent = "visibilitychange", percentDenominator = 100, half = 0.5, millisecondsToSeconds = 1000, originPoint = {
-        x: 0,
-        y: 0,
-        z: 0,
-    }, defaultTransform = {
-        a: 1,
-        b: 0,
-        c: 0,
-        d: 1,
-    }, randomColorValue = "random", midColorValue = "mid", double = 2, doublePI = Math.PI * double, defaultFps = 60, defaultAlpha$1 = 1, generatedTrue = "true", generatedFalse = "false", canvasTag = "canvas", defaultRetryCount = 0, squareExp = 2, spatialHashGridCellSize = 100, defaultRemoveQuantity = 1, defaultRatio = 1, defaultReduceFactor = 1, inverseFactorNumerator = 1, rgbMax = 255, hMax = 360, sMax = 100, lMax = 100, hMin = 0, sMin = 0, hPhase = 60, empty = 0, quarter = 0.25, threeQuarter = half + quarter, minVelocity = 0, minDistance$2 = 0, minRadius$1 = 0, defaultTransformValue = 1, minimumSize = 0, zIndexFactorOffset = 1, defaultOpacity$2 = 1, removeDeleteCount = 1, removeMinIndex = 0, defaultFpsLimit = 120, minFpsLimit = 0, canvasFirstIndex = 0, loadRandomFactor = 10000, loadMinIndex = 0, one = 1, none = 0, decayOffset = 1, tryCountIncrement = 1, minZ = 0, minLimit = 0, countOffset = 1, minCount = 0, minIndex = 0, lengthOffset = 1, defaultDensityFactor = 1, deleteCount = 1, defaultAngle = 0, identity = 1, minStrokeWidth = 0, lFactor = 1, lMin = 0, maxNits = 400, triple = 3, sextuple = 6, sNormalizedOffset = 1, phaseNumerator = 1, defaultRgbMin = 0, defaultVelocity = 0, defaultLoops = 0, defaultTime = 0, defaultZoom = 1;
+(function(g){g.__tsParticlesInternals=g.__tsParticlesInternals||{};g.__tsParticlesInternals.bundles=g.__tsParticlesInternals.bundles||{};g.__tsParticlesInternals.effects=g.__tsParticlesInternals.effects||{};g.__tsParticlesInternals.engine=g.__tsParticlesInternals.engine||{};g.__tsParticlesInternals.interactions=g.__tsParticlesInternals.interactions||{};g.__tsParticlesInternals.palettes=g.__tsParticlesInternals.palettes||{};g.__tsParticlesInternals.paths=g.__tsParticlesInternals.paths||{};g.__tsParticlesInternals.plugins=g.__tsParticlesInternals.plugins||{};g.__tsParticlesInternals.plugins=g.__tsParticlesInternals.plugins||{};g.__tsParticlesInternals.plugins.emittersShapes=g.__tsParticlesInternals.plugins.emittersShapes||{};g.__tsParticlesInternals.presets=g.__tsParticlesInternals.presets||{};g.__tsParticlesInternals.shapes=g.__tsParticlesInternals.shapes||{};g.__tsParticlesInternals.updaters=g.__tsParticlesInternals.updaters||{};g.__tsParticlesInternals.utils=g.__tsParticlesInternals.utils||{};g.__tsParticlesInternals.canvas=g.__tsParticlesInternals.canvas||{};g.__tsParticlesInternals.canvas=g.__tsParticlesInternals.canvas||{};g.__tsParticlesInternals.canvas.utils=g.__tsParticlesInternals.canvas.utils||{};g.__tsParticlesInternals.path=g.__tsParticlesInternals.path||{};g.__tsParticlesInternals.path=g.__tsParticlesInternals.path||{};g.__tsParticlesInternals.path.utils=g.__tsParticlesInternals.path.utils||{};var __tsProxyFactory=typeof Proxy!=="undefined"?function(obj){return new Proxy(obj,{get:function(target,key){if(!(key in target)){target[key]={};}return target[key];}});}:function(obj){return obj;};g.__tsParticlesInternals.bundles=__tsProxyFactory(g.__tsParticlesInternals.bundles);g.__tsParticlesInternals.effects=__tsProxyFactory(g.__tsParticlesInternals.effects);g.__tsParticlesInternals.interactions=__tsProxyFactory(g.__tsParticlesInternals.interactions);g.__tsParticlesInternals.palettes=__tsProxyFactory(g.__tsParticlesInternals.palettes);g.__tsParticlesInternals.paths=__tsProxyFactory(g.__tsParticlesInternals.paths);g.__tsParticlesInternals.plugins=__tsProxyFactory(g.__tsParticlesInternals.plugins);g.__tsParticlesInternals.plugins.emittersShapes=__tsProxyFactory(g.__tsParticlesInternals.plugins.emittersShapes);g.__tsParticlesInternals.presets=__tsProxyFactory(g.__tsParticlesInternals.presets);g.__tsParticlesInternals.shapes=__tsProxyFactory(g.__tsParticlesInternals.shapes);g.__tsParticlesInternals.updaters=__tsProxyFactory(g.__tsParticlesInternals.updaters);g.__tsParticlesInternals.utils=__tsProxyFactory(g.__tsParticlesInternals.utils);g.__tsParticlesInternals.canvas=__tsProxyFactory(g.__tsParticlesInternals.canvas);g.__tsParticlesInternals.path=__tsProxyFactory(g.__tsParticlesInternals.path);})(typeof globalThis!=="undefined"?globalThis:typeof window!=="undefined"?window:this);
+(function (g) {
+/* tsParticles v4.5.1 */
+g.__tsParticlesInternals = g.__tsParticlesInternals || {};
+g.__tsParticlesInternals.bundles = g.__tsParticlesInternals.bundles || {};
+(function (exports) {
+    'use strict';
+
+    const errorPrefix = "tsParticles - Error", codedErrorPattern = /^\[tsParticles Error (TSP-\d+)\]\s*/, fullMatchIndex = 0, codeIndex = 1;
+    const wrap = (fn) => (...args) => {
+        fn(...args);
+    }, _logger = {
+        debug: wrap(console.debug),
+        error: (message, ...optionalParams) => {
+            if (typeof message === "string") {
+                const match = codedErrorPattern.exec(message);
+                if (match?.[codeIndex]) {
+                    console.error(`tsParticles - ${match[codeIndex]} - ${message.slice(match[fullMatchIndex].length)}`, ...optionalParams);
+                    return;
+                }
+            }
+            console.error(`${errorPrefix} - ${message}`, ...optionalParams);
+        },
+        info: wrap(console.info),
+        log: wrap(console.log),
+        trace: wrap(console.trace),
+        verbose: wrap(console.log),
+        warning: wrap(console.warn),
+    };
+    function setLogger(logger) {
+        if (logger.debug) {
+            _logger.debug = wrap(logger.debug);
+        }
+        if (logger.error) {
+            _logger.error = wrap(logger.error);
+        }
+        if (logger.info) {
+            _logger.info = wrap(logger.info);
+        }
+        if (logger.log) {
+            _logger.log = wrap(logger.log);
+        }
+        if (logger.trace) {
+            _logger.trace = wrap(logger.trace);
+        }
+        if (logger.verbose) {
+            _logger.verbose = wrap(logger.verbose);
+        }
+        if (logger.warning) {
+            _logger.warning = wrap(logger.warning);
+        }
+    }
+    function getLogger() {
+        return _logger;
+    }
 
     exports.MoveDirection = void 0;
     (function (MoveDirection) {
@@ -32,6 +69,17 @@
         MoveDirection["inside"] = "inside";
     })(exports.MoveDirection || (exports.MoveDirection = {}));
 
+    const generatedAttribute = "generated", fullPercent = "100%", defaultCompositeValue = "source-over", resizeEvent = "resize", visibilityChangeEvent = "visibilitychange", percentDenominator = 100, half = 0.5, millisecondsToSeconds = 1000, originPoint = {
+        x: 0,
+        y: 0,
+        z: 0,
+    }, defaultTransform = {
+        a: 1,
+        b: 0,
+        c: 0,
+        d: 1,
+    }, randomColorValue = "random", midColorValue = "mid", double = 2, doublePI = Math.PI * double, defaultFps = 60, defaultAlpha = 1, generatedTrue = "true", generatedFalse = "false", canvasTag = "canvas", defaultRetryCount = 0, squareExp = 2, spatialHashGridCellSize = 100, defaultRemoveQuantity = 1, defaultRatio = 1, defaultReduceFactor = 1, inverseFactorNumerator = 1, rgbMax = 255, hMax = 360, sMax = 100, lMax = 100, hMin = 0, sMin = 0, hPhase = 60, empty = 0, quarter = 0.25, threeQuarter = half + quarter, minVelocity = 0, minDistance$2 = 0, minRadius = 0, defaultTransformValue = 1, minimumSize = 0, zIndexFactorOffset = 1, defaultOpacity$2 = 1, removeDeleteCount = 1, removeMinIndex = 0, defaultFpsLimit = 120, minFpsLimit = 0, canvasFirstIndex = 0, loadRandomFactor = 10000, loadMinIndex = 0, one = 1, none = 0, decayOffset = 1, tryCountIncrement = 1, minZ = 0, minLimit = 0, countOffset = 1, minCount = 0, minIndex = 0, lengthOffset = 1, defaultDensityFactor = 1, deleteCount = 1, defaultAngle = 0, identity = 1, minStrokeWidth = 0, lFactor = 1, lMin = 0, maxNits = 400, triple = 3, sextuple = 6, sNormalizedOffset = 1, phaseNumerator = 1, defaultRgbMin = 0, defaultVelocity = 0, defaultLoops = 0, defaultTime = 0, defaultZoom = 1;
+
     function getZ(source) {
         return "z" in source ? source.z : originPoint.z;
     }
@@ -150,6 +198,12 @@
     function isFunction(arg) {
         return typeof arg === "function";
     }
+    function isEnumValue(enumObject, arg) {
+        return Object.values(enumObject).some(enumValue => enumValue === arg);
+    }
+    function toEnumValue(enumObject, arg, defaultValue) {
+        return isEnumValue(enumObject, arg) ? arg : defaultValue;
+    }
     function isObject(arg) {
         return typeof arg === "object" && arg !== null;
     }
@@ -310,11 +364,61 @@
         };
     }
     function parseAlpha(input) {
-        const defaultAlpha = 1;
         if (!input) {
             return defaultAlpha;
         }
-        return input.endsWith("%") ? parseFloat(input) / percentDenominator : parseFloat(input);
+        return input.endsWith("%") ? Number.parseFloat(input) / percentDenominator : Number.parseFloat(input);
+    }
+
+    const ErrorCodes$3 = {
+        engineVersionMismatch: "TSP-1001",
+        particlePositionNotFound: "TSP-1002",
+        pluginRegisterAfterLoad: "TSP-1003",
+        offscreenCanvasUnsupported: "TSP-1101",
+        offscreenCanvasTransferFailed: "TSP-1102",
+        hdrEnableInvalid: "TSP-1201",
+        hdrModeInvalid: "TSP-1202",
+        hdrPeakNitsInvalid: "TSP-1203",
+    };
+
+    const messages = {
+        [ErrorCodes$3.engineVersionMismatch]: "The tsParticles version is different from the loaded plugins version. Engine version: {0}. Plugin version: {1}",
+        [ErrorCodes$3.particlePositionNotFound]: "a valid position cannot be found for particle",
+        [ErrorCodes$3.pluginRegisterAfterLoad]: "Register plugins can only be done before calling tsParticles.load()",
+        [ErrorCodes$3.offscreenCanvasUnsupported]: "OffscreenCanvas is required but not supported by this browser",
+        [ErrorCodes$3.offscreenCanvasTransferFailed]: "OffscreenCanvas transfer failed",
+        [ErrorCodes$3.hdrEnableInvalid]: 'Invalid HDR "enable" value: expected a boolean, got "{0}"',
+        [ErrorCodes$3.hdrModeInvalid]: 'Invalid HDR "mode" value: expected one of {0}, got "{1}"',
+        [ErrorCodes$3.hdrPeakNitsInvalid]: 'Invalid HDR "peakNits" value: expected a positive number, got "{0}"',
+    };
+
+    let registeredMessages;
+    const ensureRegisteredMessages = () => {
+        registeredMessages ??= new Map(Object.entries(messages));
+        return registeredMessages;
+    }, toStringValue$1 = (value) => String(value), format = (template, args) => {
+        return template.replace(/\{(\d+)\}/g, (match, index) => {
+            const arg = args[Number(index)];
+            return arg === undefined ? match : toStringValue$1(arg);
+        });
+    };
+    function addErrorMessages(extraMessages) {
+        if (typeof process !== "undefined" && process.env.NODE_ENV === "production") {
+            return;
+        }
+        const catalog = ensureRegisteredMessages();
+        for (const [code, message] of Object.entries(extraMessages)) {
+            if (message !== undefined) {
+                catalog.set(code, message);
+            }
+        }
+    }
+    function getErrorMessage(code, ...args) {
+        if (typeof process !== "undefined" && process.env.NODE_ENV === "production") {
+            return `[tsParticles Error ${code}] https://particles.js.org/errors/#${code}`;
+        }
+        const template = ensureRegisteredMessages().get(code) ?? `Unknown error code ${code}`;
+        return format(template, args);
     }
 
     exports.OutModeDirection = void 0;
@@ -331,7 +435,6 @@
         PixelMode["percent"] = "percent";
     })(exports.PixelMode || (exports.PixelMode = {}));
 
-    const minRadius = 0;
     function isForbiddenKey(key) {
         return key === "__proto__" || key === "constructor" || key === "prototype";
     }
@@ -547,22 +650,84 @@
             element.removeEventListener(event, handler, removeOptions);
         }
     }
-    async function getItemsFromInitializer(container, map, initializers, force = false) {
-        let res = map.get(container);
-        if (!res || force) {
-            res = await Promise.all([...initializers.values()].map(t => t(container)));
-            map.set(container, res);
+    async function getItemsFromInitializer(container, initializers) {
+        return await Promise.all([...initializers.values()].map(t => t(container)));
+    }
+    async function getItemMapFromInitializer(container, initializers) {
+        const entries = await Promise.all([...initializers.entries()].map(([key, initializer]) => initializer(container).then(item => [key, item])));
+        return new Map(entries);
+    }
+    async function getDataFromUrl(data) {
+        const url = itemFromSingleOrMultiple(data.url, data.index);
+        if (!url) {
+            return data.fallback;
         }
-        return res;
+        try {
+            const response = await fetch(url);
+            if (response.ok) {
+                const current = (await response.json());
+                if (isSourceOptionsValue(current)) {
+                    return current;
+                }
+                getLogger().error("invalid configuration data while retrieving config file");
+            }
+            else {
+                getLogger().error(`${response.status.toString()} while retrieving config file`);
+            }
+        }
+        catch (error) {
+            getLogger().error(`error while retrieving config file: ${error}`);
+        }
+        return data.fallback;
     }
-    async function getItemMapFromInitializer(container, map, initializers, force = false) {
-        let res = map.get(container);
-        if (!res || force) {
-            const entries = await Promise.all([...initializers.entries()].map(([key, initializer]) => initializer(container).then(item => [key, item])));
-            res = new Map(entries);
-            map.set(container, res);
+    function isSourceOptionsValue(value) {
+        if (isArray(value)) {
+            return value.every((entry) => isObject(entry) && !isArray(entry));
         }
-        return res;
+        return isObject(value) && !isArray(value);
+    }
+    function getCanvasFromContainer(domContainer) {
+        let canvasEl;
+        const documentSafe = safeDocument(), isCanvas = domContainer instanceof HTMLCanvasElement || domContainer.tagName.toLowerCase() === canvasTag;
+        if (isCanvas) {
+            canvasEl = domContainer;
+            canvasEl.dataset[generatedAttribute] ??= generatedFalse;
+            if (canvasEl.dataset[generatedAttribute] === generatedTrue) {
+                canvasEl.style.width ||= fullPercent;
+                canvasEl.style.height ||= fullPercent;
+                canvasEl.style.pointerEvents = "none";
+                canvasEl.style.setProperty("pointer-events", "none");
+            }
+        }
+        else {
+            const existingCanvases = domContainer.getElementsByTagName(canvasTag), foundCanvas = existingCanvases.item(canvasFirstIndex);
+            if (foundCanvas) {
+                canvasEl = foundCanvas;
+                canvasEl.dataset[generatedAttribute] = generatedFalse;
+            }
+            else {
+                canvasEl = documentSafe.createElement(canvasTag);
+                canvasEl.dataset[generatedAttribute] = generatedTrue;
+                domContainer.appendChild(canvasEl);
+            }
+            canvasEl.style.width ||= fullPercent;
+            canvasEl.style.height ||= fullPercent;
+            canvasEl.style.pointerEvents = "none";
+            canvasEl.style.setProperty("pointer-events", "none");
+        }
+        return canvasEl;
+    }
+    function getDomContainer(id, source) {
+        const documentSafe = safeDocument();
+        let domContainer = source ?? documentSafe.getElementById(id);
+        if (domContainer) {
+            return domContainer;
+        }
+        domContainer = documentSafe.createElement("canvas");
+        domContainer.id = id;
+        domContainer.dataset[generatedAttribute] = generatedTrue;
+        documentSafe.body.append(domContainer);
+        return domContainer;
     }
 
     class EventDispatcher {
@@ -572,12 +737,8 @@
         }
         addEventListener(type, listener) {
             this.removeEventListener(type, listener);
-            let arr = this.#listeners.get(type);
-            if (!arr) {
-                arr = [];
-                this.#listeners.set(type, arr);
-            }
-            arr.push(listener);
+            const arr = this.#listeners.get(type);
+            this.#listeners.set(type, arr ? [...arr, listener] : [listener]);
         }
         dispatchEvent(type, args) {
             const listeners = this.#listeners.get(type);
@@ -609,7 +770,7 @@
                 this.#listeners.delete(type);
             }
             else {
-                arr.splice(idx, deleteCount);
+                this.#listeners.set(type, [...arr.slice(minIndex, idx), ...arr.slice(idx + deleteCount)]);
             }
         }
     }
@@ -633,7 +794,6 @@
     class PluginManager {
         colorManagers = new Map();
         easingFunctions = new Map();
-        effectDrawers = new Map();
         initializers = {
             effects: new Map(),
             shapes: new Map(),
@@ -642,8 +802,6 @@
         palettes = new Map();
         plugins = [];
         presets = new Map();
-        shapeDrawers = new Map();
-        updaters = new Map();
         #allLoadersSet = new Set();
         #configs = new Map();
         #engine;
@@ -661,57 +819,79 @@
             }
             return res;
         }
+        get initialized() {
+            return this.#initialized;
+        }
         addColorManager(name, manager) {
+            if (this.#initialized) {
+                return;
+            }
             this.colorManagers.set(name, manager);
         }
         addConfig(config) {
+            if (this.#initialized) {
+                return;
+            }
             const key = config.key ?? config.name ?? "default";
             this.#configs.set(key, config);
             this.#engine.dispatchEvent(exports.EventType.configAdded, { data: { name: key, config } });
         }
         addEasing(name, easing) {
+            if (this.#initialized) {
+                return;
+            }
             if (this.easingFunctions.get(name)) {
                 return;
             }
             this.easingFunctions.set(name, easing);
         }
         addEffect(effect, drawer) {
+            if (this.#initialized) {
+                return;
+            }
             this.initializers.effects.set(effect, drawer);
         }
         addPalette(name, palette) {
+            if (this.#initialized) {
+                return;
+            }
             this.palettes.set(name, palette);
         }
         addParticleUpdater(name, updaterInitializer) {
+            if (this.#initialized) {
+                return;
+            }
             this.initializers.updaters.set(name, updaterInitializer);
         }
         addPlugin(plugin) {
+            if (this.#initialized) {
+                return;
+            }
             if (this.getPlugin(plugin.id)) {
                 return;
             }
             this.plugins.push(plugin);
         }
         addPreset(preset, options, override = false) {
+            if (this.#initialized) {
+                return;
+            }
             if (!(override || !this.getPreset(preset))) {
                 return;
             }
             this.presets.set(preset, options);
         }
         addShape(shapes, drawer) {
+            if (this.#initialized) {
+                return;
+            }
             for (const shape of shapes) {
                 this.initializers.shapes.set(shape, drawer);
             }
         }
-        clearPlugins(container) {
-            this.effectDrawers.delete(container);
-            this.shapeDrawers.delete(container);
-            this.updaters.delete(container);
-        }
         getEasing(name) {
             return this.easingFunctions.get(name) ?? ((value) => value);
         }
-        getEffectDrawers(container, force = false) {
-            return getItemMapFromInitializer(container, this.effectDrawers, this.initializers.effects, force);
-        }
         getPalette(name) {
             return this.palettes.get(name);
         }
@@ -721,12 +901,6 @@
         getPreset(preset) {
             return this.presets.get(preset);
         }
-        async getShapeDrawers(container, force = false) {
-            return getItemMapFromInitializer(container, this.shapeDrawers, this.initializers.shapes, force);
-        }
-        async getUpdaters(container, force = false) {
-            return getItemsFromInitializer(container, this.updaters, this.initializers.updaters, force);
-        }
         async init() {
             if (this.#initialized || this.#isRunningLoaders) {
                 return;
@@ -745,16 +919,9 @@
                 this.#initialized = true;
             }
         }
-        loadParticlesOptions(container, options, ...sourceOptions) {
-            const updaters = this.updaters.get(container);
-            if (!updaters) {
-                return;
-            }
-            updaters.forEach(updater => updater.loadOptions?.(options, ...sourceOptions));
-        }
         async register(...loaders) {
             if (this.#initialized) {
-                throw new Error("Register plugins can only be done before calling tsParticles.load()");
+                throw new Error(getErrorMessage(ErrorCodes$3.pluginRegisterAfterLoad));
             }
             for (const loader of loaders) {
                 if (this.#isRunningLoaders) {
@@ -766,111 +933,15 @@
             }
         }
         async #runLoader(loader, executed, allLoaders) {
-            if (executed.has(loader))
+            if (executed.has(loader)) {
                 return;
+            }
             executed.add(loader);
             allLoaders.add(loader);
             await loader(this.#engine);
         }
     }
 
-    const errorPrefix = "tsParticles - Error";
-    const wrap = (fn) => (...args) => {
-        fn(...args);
-    }, _logger = {
-        debug: wrap(console.debug),
-        error: (message, ...optionalParams) => {
-            console.error(`${errorPrefix} - ${message}`, ...optionalParams);
-        },
-        info: wrap(console.info),
-        log: wrap(console.log),
-        trace: wrap(console.trace),
-        verbose: wrap(console.log),
-        warning: wrap(console.warn),
-    };
-    function setLogger(logger) {
-        if (logger.debug) {
-            _logger.debug = wrap(logger.debug);
-        }
-        if (logger.error) {
-            _logger.error = wrap(logger.error);
-        }
-        if (logger.info) {
-            _logger.info = wrap(logger.info);
-        }
-        if (logger.log) {
-            _logger.log = wrap(logger.log);
-        }
-        if (logger.trace) {
-            _logger.trace = wrap(logger.trace);
-        }
-        if (logger.verbose) {
-            _logger.verbose = wrap(logger.verbose);
-        }
-        if (logger.warning) {
-            _logger.warning = wrap(logger.warning);
-        }
-    }
-    function getLogger() {
-        return _logger;
-    }
-
-    const fullPercent = "100%";
-    async function getDataFromUrl(data) {
-        const url = itemFromSingleOrMultiple(data.url, data.index);
-        if (!url) {
-            return data.fallback;
-        }
-        const response = await fetch(url);
-        if (response.ok) {
-            return (await response.json());
-        }
-        getLogger().error(`${response.status.toString()} while retrieving config file`);
-        return data.fallback;
-    }
-    const getCanvasFromContainer = (domContainer) => {
-        const documentSafe = safeDocument();
-        let canvasEl;
-        const isCanvas = domContainer instanceof HTMLCanvasElement || domContainer.tagName.toLowerCase() === canvasTag;
-        if (isCanvas) {
-            canvasEl = domContainer;
-            canvasEl.dataset[generatedAttribute] ??= generatedFalse;
-            if (canvasEl.dataset[generatedAttribute] === generatedTrue) {
-                canvasEl.style.width ||= fullPercent;
-                canvasEl.style.height ||= fullPercent;
-                canvasEl.style.pointerEvents = "none";
-                canvasEl.style.setProperty("pointer-events", "none");
-            }
-        }
-        else {
-            const existingCanvases = domContainer.getElementsByTagName(canvasTag), foundCanvas = existingCanvases.item(canvasFirstIndex);
-            if (foundCanvas) {
-                canvasEl = foundCanvas;
-                canvasEl.dataset[generatedAttribute] = generatedFalse;
-            }
-            else {
-                canvasEl = documentSafe.createElement(canvasTag);
-                canvasEl.dataset[generatedAttribute] = generatedTrue;
-                domContainer.appendChild(canvasEl);
-            }
-            canvasEl.style.width ||= fullPercent;
-            canvasEl.style.height ||= fullPercent;
-            canvasEl.style.pointerEvents = "none";
-            canvasEl.style.setProperty("pointer-events", "none");
-        }
-        return canvasEl;
-    }, getDomContainer = (id, source) => {
-        const documentSafe = safeDocument();
-        let domContainer = source ?? documentSafe.getElementById(id);
-        if (domContainer) {
-            return domContainer;
-        }
-        domContainer = documentSafe.createElement("canvas");
-        domContainer.id = id;
-        domContainer.dataset[generatedAttribute] = generatedTrue;
-        documentSafe.body.append(domContainer);
-        return domContainer;
-    };
     class Engine {
         pluginManager = new PluginManager(this);
         #domArray = [];
@@ -880,7 +951,7 @@
             return this.#domArray;
         }
         get version() {
-            return "4.4.0";
+            return "4.5.1";
         }
         addEventListener(type, listener) {
             this.#eventDispatcher.addEventListener(type, listener);
@@ -889,7 +960,7 @@
             if (this.version === pluginVersion) {
                 return;
             }
-            throw new Error(`The tsParticles version is different from the loaded plugins version. Engine version: ${this.version}. Plugin version: ${pluginVersion}`);
+            throw new Error(getErrorMessage(ErrorCodes$3.engineVersionMismatch, this.version, pluginVersion));
         }
         dispatchEvent(type, args) {
             this.#eventDispatcher.dispatchEvent(type, args);
@@ -1126,31 +1197,17 @@
         AnimationStatus["decreasing"] = "decreasing";
     })(exports.AnimationStatus || (exports.AnimationStatus = {}));
 
-    exports.DrawLayer = void 0;
-    (function (DrawLayer) {
-        DrawLayer[DrawLayer["BackgroundElement"] = 0] = "BackgroundElement";
-        DrawLayer[DrawLayer["BackgroundDraw"] = 1] = "BackgroundDraw";
-        DrawLayer[DrawLayer["BackgroundMask"] = 2] = "BackgroundMask";
-        DrawLayer[DrawLayer["CanvasSetup"] = 3] = "CanvasSetup";
-        DrawLayer[DrawLayer["PluginContent"] = 4] = "PluginContent";
-        DrawLayer[DrawLayer["Particles"] = 5] = "Particles";
-        DrawLayer[DrawLayer["CanvasCleanup"] = 6] = "CanvasCleanup";
-        DrawLayer[DrawLayer["Foreground"] = 7] = "Foreground";
-    })(exports.DrawLayer || (exports.DrawLayer = {}));
-
-    class OptionLoader {
-        load(data) {
-            if (isNull(data)) {
-                return;
-            }
-            this.doLoad(data);
-        }
-    }
-    function loadOptions(options, ...sourceOptionsArr) {
-        for (const sourceOptions of sourceOptionsArr) {
-            options.load(sourceOptions);
-        }
-    }
+    exports.DrawLayer = void 0;
+    (function (DrawLayer) {
+        DrawLayer[DrawLayer["BackgroundElement"] = 0] = "BackgroundElement";
+        DrawLayer[DrawLayer["BackgroundDraw"] = 1] = "BackgroundDraw";
+        DrawLayer[DrawLayer["BackgroundMask"] = 2] = "BackgroundMask";
+        DrawLayer[DrawLayer["CanvasSetup"] = 3] = "CanvasSetup";
+        DrawLayer[DrawLayer["PluginContent"] = 4] = "PluginContent";
+        DrawLayer[DrawLayer["Particles"] = 5] = "Particles";
+        DrawLayer[DrawLayer["CanvasCleanup"] = 6] = "CanvasCleanup";
+        DrawLayer[DrawLayer["Foreground"] = 7] = "Foreground";
+    })(exports.DrawLayer || (exports.DrawLayer = {}));
 
     function loadProperty(obj, key, value) {
         if (value !== undefined) {
@@ -1180,7 +1237,7 @@
             if (keyStr === "__proto__" || keyStr === "constructor" || keyStr === "prototype") {
                 return;
             }
-            const objRecord = obj, currentValue = Object.prototype.hasOwnProperty.call(objRecord, keyStr) ? objRecord[keyStr] : {};
+            const objRecord = obj, currentValue = Object.hasOwn(objRecord, keyStr) ? objRecord[keyStr] : {};
             objRecord[keyStr] = deepExtend(currentValue, value);
         }
     }
@@ -1193,6 +1250,20 @@
         }
     }
 
+    class OptionLoader {
+        load(data) {
+            if (isNull(data)) {
+                return;
+            }
+            this.doLoad(data);
+        }
+    }
+    function loadOptions(options, ...sourceOptionsArr) {
+        for (const sourceOptions of sourceOptionsArr) {
+            options.load(sourceOptions);
+        }
+    }
+
     class AnimationOptions extends OptionLoader {
         count = 0;
         decay = 0;
@@ -1343,15 +1414,14 @@
         peakNits = defaultPeakNits;
         doLoad(data) {
             if (data.enable !== undefined && !isBoolean(data.enable)) {
-                throw new Error(`Invalid HDR "enable" value: expected a boolean, got "${String(data.enable)}"`);
+                throw new Error(getErrorMessage(ErrorCodes$3.hdrEnableInvalid, String(data.enable)));
             }
-            if (data.mode !== undefined &&
-                (typeof data.mode !== "string" || !Object.values(exports.HdrMode).includes(data.mode))) {
-                throw new Error(`Invalid HDR "mode" value: expected one of ${Object.values(exports.HdrMode).join(", ")}, got "${toStringValue(data.mode)}"`);
+            if (data.mode !== undefined && !isEnumValue(exports.HdrMode, data.mode)) {
+                throw new Error(getErrorMessage(ErrorCodes$3.hdrModeInvalid, Object.values(exports.HdrMode).join(", "), toStringValue(data.mode)));
             }
             if (data.peakNits !== undefined &&
                 (!isNumber(data.peakNits) || !Number.isFinite(data.peakNits) || data.peakNits <= minPeakNits)) {
-                throw new Error(`Invalid HDR "peakNits" value: expected a positive number, got "${String(data.peakNits)}"`);
+                throw new Error(getErrorMessage(ErrorCodes$3.hdrPeakNitsInvalid, String(data.peakNits)));
             }
             loadProperty(this, "enable", data.enable);
             loadProperty(this, "mode", data.mode);
@@ -1729,12 +1799,10 @@
                         plugin.loadParticlesOptions(this.#container, this, data);
                     }
                 }
-                const updaters = this.#pluginManager.updaters.get(this.#container);
-                if (updaters) {
-                    for (const updater of updaters) {
-                        if (updater.loadOptions) {
-                            updater.loadOptions(this, data);
-                        }
+                const updaters = this.#container.particleUpdaters;
+                for (const updater of updaters) {
+                    if (updater.loadOptions) {
+                        updater.loadOptions(this, data);
                     }
                 }
             }
@@ -2076,9 +2144,9 @@
             const grayscaleValue = Math.round(lNormalized * rgbMax);
             return { r: grayscaleValue, g: grayscaleValue, b: grayscaleValue };
         }
-        const temp1 = lNormalized < half
+        const temp2 = lNormalized < half
             ? lNormalized * (sNormalizedOffset + sNormalized)
-            : lNormalized + sNormalized - lNormalized * sNormalized, temp2 = double * lNormalized - temp1, phaseThird = phaseNumerator / triple, red = Math.min(rgbMax, rgbMax * hslChannel(temp2, temp1, hNormalized + phaseThird)), green = Math.min(rgbMax, rgbMax * hslChannel(temp2, temp1, hNormalized)), blue = Math.min(rgbMax, rgbMax * hslChannel(temp2, temp1, hNormalized - phaseThird));
+            : lNormalized + sNormalized - lNormalized * sNormalized, temp1 = double * lNormalized - temp2, phaseThird = phaseNumerator / triple, red = Math.min(rgbMax, rgbMax * hslChannel(temp1, temp2, hNormalized + phaseThird)), green = Math.min(rgbMax, rgbMax * hslChannel(temp1, temp2, hNormalized)), blue = Math.min(rgbMax, rgbMax * hslChannel(temp1, temp2, hNormalized - phaseThird));
         return { r: Math.round(red), g: Math.round(green), b: Math.round(blue) };
     }
     function hslToRgbFloat(hsl) {
@@ -2087,9 +2155,9 @@
             const grayscaleValue = lNormalized * rgbMax;
             return { r: grayscaleValue, g: grayscaleValue, b: grayscaleValue };
         }
-        const temp1 = lNormalized < half
+        const temp2 = lNormalized < half
             ? lNormalized * (sNormalizedOffset + sNormalized)
-            : lNormalized + sNormalized - lNormalized * sNormalized, temp2 = double * lNormalized - temp1, phaseThird = phaseNumerator / triple, red = Math.min(rgbMax, rgbMax * hslChannel(temp2, temp1, hNormalized + phaseThird)), green = Math.min(rgbMax, rgbMax * hslChannel(temp2, temp1, hNormalized)), blue = Math.min(rgbMax, rgbMax * hslChannel(temp2, temp1, hNormalized - phaseThird));
+            : lNormalized + sNormalized - lNormalized * sNormalized, temp1 = double * lNormalized - temp2, phaseThird = phaseNumerator / triple, red = Math.min(rgbMax, rgbMax * hslChannel(temp1, temp2, hNormalized + phaseThird)), green = Math.min(rgbMax, rgbMax * hslChannel(temp1, temp2, hNormalized)), blue = Math.min(rgbMax, rgbMax * hslChannel(temp1, temp2, hNormalized - phaseThird));
         return { r: red, g: green, b: blue };
     }
     function hslaToRgba(hsla) {
@@ -2449,7 +2517,7 @@
     }
 
     async function loadBlendPlugin(engine) {
-        engine.checkVersion("4.4.0");
+        engine.checkVersion("4.5.1");
         await engine.pluginManager.register(e => {
             e.pluginManager.addPlugin(new BlendPlugin());
         });
@@ -2486,7 +2554,7 @@
     }
 
     async function loadCircleShape(engine) {
-        engine.checkVersion("4.4.0");
+        engine.checkVersion("4.5.1");
         await engine.pluginManager.register(e => {
             e.pluginManager.addShape(["circle"], () => {
                 return Promise.resolve(new CircleDrawer());
@@ -2501,7 +2569,7 @@
         RgbIndexes[RgbIndexes["b"] = 3] = "b";
         RgbIndexes[RgbIndexes["a"] = 4] = "a";
     })(RgbIndexes$1 || (RgbIndexes$1 = {}));
-    const shorthandHexRegex = /^#?([a-f\d])([a-f\d])([a-f\d])([a-f\d])?$/i, hexRegex = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})?$/i, hexRadix = 16, defaultAlpha = 1, alphaFactor = 0xff;
+    const shorthandHexRegex = /^#?([a-f\d])([a-f\d])([a-f\d])([a-f\d])?$/i, hexRegex = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})?$/i, hexRadix = 16, alphaFactor = 0xff;
     class HexColorManager {
         accepts(input) {
             return input.startsWith("#");
@@ -2534,7 +2602,7 @@
     }
 
     async function loadHexColorPlugin(engine) {
-        engine.checkVersion("4.4.0");
+        engine.checkVersion("4.5.1");
         await engine.pluginManager.register(e => {
             e.pluginManager.addColorManager("hex", new HexColorManager());
         });
@@ -2574,7 +2642,7 @@
             if (!this.accepts(input)) {
                 return;
             }
-            const result = hslRegex.exec(input), minLength = 4, defaultAlpha = 1, radix = 10;
+            const result = hslRegex.exec(input), minLength = 4, radix = 10;
             return result
                 ? hslaToRgba({
                     a: result.length > minLength ? parseAlpha(result[HslIndexes.a]) : defaultAlpha,
@@ -2587,12 +2655,20 @@
     }
 
     async function loadHslColorPlugin(engine) {
-        engine.checkVersion("4.4.0");
+        engine.checkVersion("4.5.1");
         await engine.pluginManager.register(e => {
             e.pluginManager.addColorManager("hsl", new HslColorManager());
         });
     }
 
+    const ErrorCodes$2 = {
+        baseMoverNotLoaded: "TSP-3203",
+    };
+
+    const ErrorMessages$2 = {
+        [ErrorCodes$2.baseMoverNotLoaded]: "tsParticles Base Mover is not loaded",
+    };
+
     class MovePlugin {
         id = "move";
         #pluginManager;
@@ -2611,20 +2687,20 @@
     }
 
     async function loadMovePlugin(engine) {
-        engine.checkVersion("4.4.0");
+        engine.checkVersion("4.5.1");
+        if (typeof process !== "undefined" && process.env.NODE_ENV !== "production") {
+            addErrorMessages(ErrorMessages$2);
+        }
         await engine.pluginManager.register(e => {
             const moveEngine = e, movePluginManager = moveEngine.pluginManager;
             movePluginManager.initializers.pathGenerators ??= new Map();
-            movePluginManager.pathGenerators ??= new Map();
             movePluginManager.addPathGenerator = (name, generator) => {
+                if (movePluginManager.initialized) {
+                    return;
+                }
                 movePluginManager.initializers.pathGenerators ??= new Map();
                 movePluginManager.initializers.pathGenerators.set(name, generator);
             };
-            movePluginManager.getPathGenerators = async (container, force = false) => {
-                movePluginManager.initializers.pathGenerators ??= new Map();
-                movePluginManager.pathGenerators ??= new Map();
-                return getItemMapFromInitializer(container, movePluginManager.pathGenerators, movePluginManager.initializers.pathGenerators, force);
-            };
             e.pluginManager.addPlugin(new MovePlugin(e.pluginManager));
         });
     }
@@ -2821,7 +2897,7 @@
     }
 
     async function loadOpacityUpdater(engine) {
-        engine.checkVersion("4.4.0");
+        engine.checkVersion("4.5.1");
         await engine.pluginManager.register(e => {
             e.pluginManager.addParticleUpdater("opacity", container => {
                 return Promise.resolve(new OpacityUpdater(container));
@@ -2830,70 +2906,60 @@
     }
 
     const boundsMin = 0;
-    function bounceHorizontal(data) {
-        if ((data.outMode !== exports.OutMode.bounce && data.outMode !== exports.OutMode.split) ||
-            (data.direction !== exports.OutModeDirection.left && data.direction !== exports.OutModeDirection.right)) {
-            return;
-        }
-        if (data.bounds.right < boundsMin && data.direction === exports.OutModeDirection.left) {
-            data.particle.position.x = data.size + data.offset.x;
-        }
-        else if (data.bounds.left > data.canvasSize.width && data.direction === exports.OutModeDirection.right) {
-            data.particle.position.x = data.canvasSize.width - data.size - data.offset.x;
-        }
-        const velocity = data.particle.velocity.x;
-        let bounced = false;
-        if (data.outOfCanvas &&
-            ((data.direction === exports.OutModeDirection.right && velocity > minVelocity) ||
-                (data.direction === exports.OutModeDirection.left && velocity < minVelocity))) {
-            const newVelocity = getRangeValue(data.particle.options.bounce.horizontal.value);
-            data.particle.velocity.x *= -newVelocity;
-            bounced = true;
-        }
-        if (!bounced) {
-            return;
-        }
-        const minPos = data.offset.x + data.size;
-        if (data.outOfCanvas && data.direction === exports.OutModeDirection.right) {
-            data.particle.position.x = data.canvasSize.width - minPos;
-        }
-        else if (data.outOfCanvas && data.direction === exports.OutModeDirection.left) {
-            data.particle.position.x = minPos;
-        }
-        if (data.outMode === exports.OutMode.split) {
-            data.particle.destroy();
-        }
-    }
-    function bounceVertical(data) {
-        if ((data.outMode !== exports.OutMode.bounce && data.outMode !== exports.OutMode.split) ||
-            (data.direction !== exports.OutModeDirection.bottom && data.direction !== exports.OutModeDirection.top)) {
+    const bounceAxisConfigs = {
+        [exports.OutModeDirection.left]: {
+            axis: "x",
+            canvas: "width",
+            bounce: "horizontal",
+            negativeEdge: "right",
+            positiveEdge: "left",
+            negative: true,
+        },
+        [exports.OutModeDirection.right]: {
+            axis: "x",
+            canvas: "width",
+            bounce: "horizontal",
+            negativeEdge: "right",
+            positiveEdge: "left",
+            negative: false,
+        },
+        [exports.OutModeDirection.top]: {
+            axis: "y",
+            canvas: "height",
+            bounce: "vertical",
+            negativeEdge: "bottom",
+            positiveEdge: "top",
+            negative: true,
+        },
+        [exports.OutModeDirection.bottom]: {
+            axis: "y",
+            canvas: "height",
+            bounce: "vertical",
+            negativeEdge: "bottom",
+            positiveEdge: "top",
+            negative: false,
+        },
+    };
+    function bounce$1(data) {
+        if ((data.outMode !== exports.OutMode.bounce && data.outMode !== exports.OutMode.split) || !(data.direction in bounceAxisConfigs)) {
             return;
         }
-        if (data.bounds.bottom < boundsMin && data.direction === exports.OutModeDirection.top) {
-            data.particle.position.y = data.size + data.offset.y;
+        const config = bounceAxisConfigs[data.direction], bounds = data.bounds, canvasDim = data.canvasSize[config.canvas], position = data.particle.position, velocity = data.particle.velocity[config.axis];
+        if (config.negative && bounds[config.negativeEdge] < boundsMin) {
+            position[config.axis] = data.size + data.offset[config.axis];
         }
-        else if (data.bounds.top > data.canvasSize.height && data.direction === exports.OutModeDirection.bottom) {
-            data.particle.position.y = data.canvasSize.height - data.size - data.offset.y;
+        else if (!config.negative && bounds[config.positiveEdge] > canvasDim) {
+            position[config.axis] = canvasDim - data.size - data.offset[config.axis];
         }
-        const velocity = data.particle.velocity.y;
-        let bounced = false;
         if (data.outOfCanvas &&
-            ((data.direction === exports.OutModeDirection.bottom && velocity > minVelocity) ||
-                (data.direction === exports.OutModeDirection.top && velocity < minVelocity))) {
-            const newVelocity = getRangeValue(data.particle.options.bounce.vertical.value);
-            data.particle.velocity.y *= -newVelocity;
-            bounced = true;
+            ((config.negative && velocity < minVelocity) || (!config.negative && velocity > minVelocity))) {
+            data.particle.velocity[config.axis] *= -getRangeValue(data.particle.options.bounce[config.bounce].value);
         }
-        if (!bounced) {
+        else {
             return;
         }
-        const minPos = data.offset.y + data.size;
-        if (data.outOfCanvas && data.direction === exports.OutModeDirection.bottom) {
-            data.particle.position.y = data.canvasSize.height - minPos;
-        }
-        else if (data.outOfCanvas && data.direction === exports.OutModeDirection.top) {
-            data.particle.position.y = minPos;
-        }
+        const minPos = data.offset[config.axis] + data.size;
+        position[config.axis] = config.negative ? minPos : canvasDim - minPos;
         if (data.outMode === exports.OutMode.split) {
             data.particle.destroy();
         }
@@ -2909,26 +2975,19 @@
                 exports.OutMode.bounce,
                 exports.OutMode.split,
             ];
-            this.#particleBouncePlugins = container.plugins.filter(p => p.particleBounce !== undefined);
+            this.#particleBouncePlugins = container.plugins.filter(p => !!p.particleBounce);
         }
         update(particle, direction, delta, outMode) {
             if (!this.modes.includes(outMode)) {
                 return;
             }
-            const container = this.#container;
-            let handled = false;
             for (const plugin of this.#particleBouncePlugins) {
-                handled = plugin.particleBounce?.(particle, delta, direction) ?? false;
-                if (handled) {
-                    break;
+                if (plugin.particleBounce?.(particle, delta, direction)) {
+                    return;
                 }
             }
-            if (handled) {
-                return;
-            }
-            const pos = particle.getPosition(), offset = particle.offset, size = particle.getRadius(), bounds = calculateBounds(pos, size), canvasSize = container.canvas.size, outOfCanvas = !particle.isInsideCanvasForOutMode(outMode, direction);
-            bounceHorizontal({ particle, outMode, direction, bounds, canvasSize, offset, outOfCanvas, size });
-            bounceVertical({ particle, outMode, direction, bounds, canvasSize, offset, outOfCanvas, size });
+            const pos = particle.getPosition(), offset = particle.offset, size = particle.getRadius(), bounds = calculateBounds(pos, size), canvasSize = this.#container.canvas.size, outOfCanvas = !particle.isInsideCanvasForOutMode(outMode, direction);
+            bounce$1({ particle, outMode, direction, bounds, canvasSize, offset, outOfCanvas, size });
         }
     }
 
@@ -3017,107 +3076,108 @@
                 return;
             }
             const container = this.#container;
-            switch (particle.outType) {
-                case exports.ParticleOutType.inside: {
-                    const { x: vx, y: vy } = particle.velocity;
-                    updateVector.setTo(originPoint);
-                    updateVector.length = particle.moveCenter.radius;
-                    updateVector.angle = particle.velocity.angle + Math.PI;
-                    updateVector.addTo(particle.moveCenter);
-                    const { dx, dy } = getDistances(particle.position, updateVector);
-                    if ((vx <= minVelocity && dx >= minDistance$2) ||
-                        (vy <= minVelocity && dy >= minDistance$2) ||
-                        (vx >= minVelocity && dx <= minDistance$2) ||
-                        (vy >= minVelocity && dy <= minDistance$2)) {
-                        return;
-                    }
-                    particle.position.x = Math.floor(randomInRangeValue({
-                        min: 0,
-                        max: container.canvas.size.width,
-                    }));
-                    particle.position.y = Math.floor(randomInRangeValue({
-                        min: 0,
-                        max: container.canvas.size.height,
-                    }));
-                    const { dx: newDx, dy: newDy } = getDistances(particle.position, particle.moveCenter);
-                    particle.direction = Math.atan2(-newDy, -newDx);
-                    particle.velocity.angle = particle.direction;
-                    particle.justWarped = true;
-                    break;
+            if (particle.outType === exports.ParticleOutType.inside) {
+                this.#applyOutModeInside(particle, container);
+            }
+            else {
+                if (particle.isInsideCanvasForOutMode(outMode, direction)) {
+                    return;
                 }
-                default: {
-                    if (particle.isInsideCanvasForOutMode(outMode, direction)) {
-                        return;
-                    }
-                    switch (particle.outType) {
-                        case exports.ParticleOutType.outside: {
-                            particle.position.x =
-                                Math.floor(randomInRangeValue({
-                                    min: -particle.moveCenter.radius,
-                                    max: particle.moveCenter.radius,
-                                })) + particle.moveCenter.x;
-                            particle.position.y =
-                                Math.floor(randomInRangeValue({
-                                    min: -particle.moveCenter.radius,
-                                    max: particle.moveCenter.radius,
-                                })) + particle.moveCenter.y;
-                            const { dx, dy } = getDistances(particle.position, particle.moveCenter);
-                            if (particle.moveCenter.radius) {
-                                particle.direction = Math.atan2(dy, dx);
-                                particle.velocity.angle = particle.direction;
-                            }
-                            particle.justWarped = true;
-                            break;
-                        }
-                        case exports.ParticleOutType.normal: {
-                            const warp = particle.options.move.warp, canvasSize = container.canvas.size, newPos = {
-                                bottom: canvasSize.height + particle.getRadius() + particle.offset.y,
-                                left: -particle.getRadius() - particle.offset.x,
-                                right: canvasSize.width + particle.getRadius() + particle.offset.x,
-                                top: -particle.getRadius() - particle.offset.y,
-                            }, sizeValue = particle.getRadius(), nextBounds = calculateBounds(particle.position, sizeValue);
-                            if (direction === exports.OutModeDirection.right && nextBounds.left > canvasSize.width + particle.offset.x) {
-                                particle.position.x = newPos.left;
-                                particle.initialPosition.x = particle.position.x;
-                                if (!warp) {
-                                    particle.position.y = getRandom() * canvasSize.height;
-                                    particle.initialPosition.y = particle.position.y;
-                                }
-                                particle.justWarped = true;
-                            }
-                            else if (direction === exports.OutModeDirection.left && nextBounds.right < -particle.offset.x) {
-                                particle.position.x = newPos.right;
-                                particle.initialPosition.x = particle.position.x;
-                                if (!warp) {
-                                    particle.position.y = getRandom() * canvasSize.height;
-                                    particle.initialPosition.y = particle.position.y;
-                                }
-                                particle.justWarped = true;
-                            }
-                            if (direction === exports.OutModeDirection.bottom && nextBounds.top > canvasSize.height + particle.offset.y) {
-                                if (!warp) {
-                                    particle.position.x = getRandom() * canvasSize.width;
-                                    particle.initialPosition.x = particle.position.x;
-                                }
-                                particle.position.y = newPos.top;
-                                particle.initialPosition.y = particle.position.y;
-                                particle.justWarped = true;
-                            }
-                            else if (direction === exports.OutModeDirection.top && nextBounds.bottom < -particle.offset.y) {
-                                if (!warp) {
-                                    particle.position.x = getRandom() * canvasSize.width;
-                                    particle.initialPosition.x = particle.position.x;
-                                }
-                                particle.position.y = newPos.bottom;
-                                particle.initialPosition.y = particle.position.y;
-                                particle.justWarped = true;
-                            }
-                            break;
-                        }
-                    }
-                    break;
+                if (particle.outType === exports.ParticleOutType.outside) {
+                    this.#applyParticleModeOutside(particle);
                 }
-            }
+                else {
+                    this.#applyOutModeNormal(particle, container, direction);
+                }
+            }
+        }
+        #applyOutModeInside(particle, container) {
+            const { x: vx, y: vy } = particle.velocity;
+            updateVector.setTo(originPoint);
+            updateVector.length = particle.moveCenter.radius;
+            updateVector.angle = particle.velocity.angle + Math.PI;
+            updateVector.addTo(particle.moveCenter);
+            const { dx, dy } = getDistances(particle.position, updateVector);
+            if ((vx <= minVelocity && dx >= minDistance$2) ||
+                (vy <= minVelocity && dy >= minDistance$2) ||
+                (vx >= minVelocity && dx <= minDistance$2) ||
+                (vy >= minVelocity && dy <= minDistance$2)) {
+                return;
+            }
+            particle.position.x = Math.floor(randomInRangeValue({
+                min: 0,
+                max: container.canvas.size.width,
+            }));
+            particle.position.y = Math.floor(randomInRangeValue({
+                min: 0,
+                max: container.canvas.size.height,
+            }));
+            const { dx: newDx, dy: newDy } = getDistances(particle.position, particle.moveCenter);
+            particle.direction = Math.atan2(-newDy, -newDx);
+            particle.velocity.angle = particle.direction;
+            particle.justWarped = true;
+        }
+        #applyOutModeNormal(particle, container, direction) {
+            const warp = particle.options.move.warp, canvasSize = container.canvas.size, sizeValue = particle.getRadius(), newPos = {
+                bottom: canvasSize.height + sizeValue + particle.offset.y,
+                left: -sizeValue - particle.offset.x,
+                right: canvasSize.width + sizeValue + particle.offset.x,
+                top: -sizeValue - particle.offset.y,
+            }, nextBounds = calculateBounds(particle.position, sizeValue);
+            if (direction === exports.OutModeDirection.right && nextBounds.left > canvasSize.width + particle.offset.x) {
+                particle.position.x = newPos.left;
+                particle.initialPosition.x = particle.position.x;
+                if (!warp) {
+                    particle.position.y = getRandom() * canvasSize.height;
+                    particle.initialPosition.y = particle.position.y;
+                }
+                particle.justWarped = true;
+            }
+            else if (direction === exports.OutModeDirection.left && nextBounds.right < -particle.offset.x) {
+                particle.position.x = newPos.right;
+                particle.initialPosition.x = particle.position.x;
+                if (!warp) {
+                    particle.position.y = getRandom() * canvasSize.height;
+                    particle.initialPosition.y = particle.position.y;
+                }
+                particle.justWarped = true;
+            }
+            if (direction === exports.OutModeDirection.bottom && nextBounds.top > canvasSize.height + particle.offset.y) {
+                if (!warp) {
+                    particle.position.x = getRandom() * canvasSize.width;
+                    particle.initialPosition.x = particle.position.x;
+                }
+                particle.position.y = newPos.top;
+                particle.initialPosition.y = particle.position.y;
+                particle.justWarped = true;
+            }
+            else if (direction === exports.OutModeDirection.top && nextBounds.bottom < -particle.offset.y) {
+                if (!warp) {
+                    particle.position.x = getRandom() * canvasSize.width;
+                    particle.initialPosition.x = particle.position.x;
+                }
+                particle.position.y = newPos.bottom;
+                particle.initialPosition.y = particle.position.y;
+                particle.justWarped = true;
+            }
+        }
+        #applyParticleModeOutside(particle) {
+            particle.position.x =
+                Math.floor(randomInRangeValue({
+                    min: -particle.moveCenter.radius,
+                    max: particle.moveCenter.radius,
+                })) + particle.moveCenter.x;
+            particle.position.y =
+                Math.floor(randomInRangeValue({
+                    min: -particle.moveCenter.radius,
+                    max: particle.moveCenter.radius,
+                })) + particle.moveCenter.y;
+            const { dx, dy } = getDistances(particle.position, particle.moveCenter);
+            if (particle.moveCenter.radius) {
+                particle.direction = Math.atan2(dy, dx);
+                particle.velocity.angle = particle.direction;
+            }
+            particle.justWarped = true;
         }
     }
 
@@ -3166,7 +3226,7 @@
     }
 
     async function loadOutModesUpdater(engine) {
-        engine.checkVersion("4.4.0");
+        engine.checkVersion("4.5.1");
         await engine.pluginManager.register(e => {
             e.pluginManager.addParticleUpdater("outModes", container => {
                 return Promise.resolve(new OutOfCanvasUpdater(container));
@@ -3183,39 +3243,9 @@
             this.#pluginManager = pluginManager;
         }
         init(particle) {
-            const container = this.#container, options = particle.options, paint = itemFromSingleOrMultiple(options.paint, particle.id, options.reduceDuplicates), color = paint?.color, paintColor = color ?? undefined, fill = paint?.fill, stroke = paint?.stroke;
-            if (fill) {
-                const fillColor = AnimatableColor.create(paintColor === undefined ? undefined : AnimatableColor.create(undefined, paintColor), fill.color);
-                particle.fillEnabled = fill.enable;
-                particle.fillOpacity = getRangeValue(fill.opacity);
-                particle.fillAnimation = fillColor.animation;
-                const fillHslColor = rangeColorToHsl(this.#pluginManager, fillColor);
-                if (fillHslColor) {
-                    particle.fillColor = getHslAnimationFromHsl(fillHslColor, particle.fillAnimation, container.retina.reduceFactor);
-                }
-            }
-            else {
-                particle.fillEnabled = false;
-                particle.fillAnimation = undefined;
-                particle.fillColor = undefined;
-                particle.fillOpacity = defaultOpacity;
-            }
-            if (stroke) {
-                const strokeColor = AnimatableColor.create(paintColor === undefined ? undefined : AnimatableColor.create(undefined, paintColor), stroke.color);
-                particle.strokeWidth = getRangeValue(stroke.width) * container.retina.pixelRatio;
-                particle.strokeOpacity = getRangeValue(stroke.opacity ?? defaultOpacity);
-                particle.strokeAnimation = strokeColor.animation;
-                const strokeHslColor = rangeColorToHsl(this.#pluginManager, strokeColor) ?? particle.getFillColor();
-                if (strokeHslColor) {
-                    particle.strokeColor = getHslAnimationFromHsl(strokeHslColor, particle.strokeAnimation, container.retina.reduceFactor);
-                }
-            }
-            else {
-                particle.strokeAnimation = undefined;
-                particle.strokeColor = undefined;
-                particle.strokeOpacity = defaultOpacity;
-                particle.strokeWidth = 0;
-            }
+            const container = this.#container, options = particle.options, paint = itemFromSingleOrMultiple(options.paint, particle.id, options.reduceDuplicates);
+            this.#initFill(paint, particle, container);
+            this.#initStroke(paint, particle, container);
         }
         isEnabled(particle) {
             const { fillAnimation, fillColor, strokeAnimation, strokeColor } = particle, fillEnabled = !!fillAnimation &&
@@ -3234,10 +3264,48 @@
             updateColor(particle.fillColor, delta, this.#container.hdr);
             updateColor(particle.strokeColor, delta, this.#container.hdr);
         }
+        #initFill(paint, particle, container) {
+            const fill = paint?.fill, color = paint?.color, paintColor = color ?? undefined;
+            if (!fill) {
+                particle.fillEnabled = false;
+                particle.fillAnimation = undefined;
+                particle.fillColor = undefined;
+                particle.fillOpacity = defaultOpacity;
+                return;
+            }
+            const fillColor = AnimatableColor.create(paintColor === undefined ? undefined : AnimatableColor.create(undefined, paintColor), fill.color);
+            particle.fillEnabled = fill.enable;
+            particle.fillOpacity = getRangeValue(fill.opacity);
+            particle.fillAnimation = fillColor.animation;
+            const fillHslColor = rangeColorToHsl(this.#pluginManager, fillColor);
+            if (!fillHslColor) {
+                return;
+            }
+            particle.fillColor = getHslAnimationFromHsl(fillHslColor, particle.fillAnimation, container.retina.reduceFactor);
+        }
+        #initStroke(paint, particle, container) {
+            const stroke = paint?.stroke, color = paint?.color, paintColor = color ?? undefined;
+            if (!stroke) {
+                particle.strokeAnimation = undefined;
+                particle.strokeColor = undefined;
+                particle.strokeOpacity = defaultOpacity;
+                particle.strokeWidth = 0;
+                return;
+            }
+            const strokeColor = AnimatableColor.create(paintColor === undefined ? undefined : AnimatableColor.create(undefined, paintColor), stroke.color);
+            particle.strokeWidth = getRangeValue(stroke.width) * container.retina.pixelRatio;
+            particle.strokeOpacity = getRangeValue(stroke.opacity ?? defaultOpacity);
+            particle.strokeAnimation = strokeColor.animation;
+            const strokeHslColor = rangeColorToHsl(this.#pluginManager, strokeColor) ?? particle.getFillColor();
+            if (!strokeHslColor) {
+                return;
+            }
+            particle.strokeColor = getHslAnimationFromHsl(strokeHslColor, particle.strokeAnimation, container.retina.reduceFactor);
+        }
     }
 
     async function loadPaintUpdater(engine) {
-        engine.checkVersion("4.4.0");
+        engine.checkVersion("4.5.1");
         await engine.pluginManager.register(e => {
             e.pluginManager.addParticleUpdater("paint", container => {
                 return Promise.resolve(new PaintUpdater(e.pluginManager, container));
@@ -3279,7 +3347,7 @@
             if (!this.accepts(input)) {
                 return;
             }
-            const result = rgbRegex.exec(input), radix = 10, minLength = 4, defaultAlpha = 1;
+            const result = rgbRegex.exec(input), radix = 10, minLength = 4;
             return result
                 ? {
                     a: result.length > minLength ? parseAlpha(result[RgbIndexes.a]) : defaultAlpha,
@@ -3292,7 +3360,7 @@
     }
 
     async function loadRgbColorPlugin(engine) {
-        engine.checkVersion("4.4.0");
+        engine.checkVersion("4.5.1");
         await engine.pluginManager.register(e => {
             e.pluginManager.addColorManager("rgb", new RgbColorManager());
         });
@@ -3377,7 +3445,7 @@
     }
 
     async function loadSizeUpdater(engine) {
-        engine.checkVersion("4.4.0");
+        engine.checkVersion("4.5.1");
         await engine.pluginManager.register(e => {
             e.pluginManager.addParticleUpdater("size", container => {
                 return Promise.resolve(new SizeUpdater(container));
@@ -3386,7 +3454,7 @@
     }
 
     async function loadBasic(engine) {
-        engine.checkVersion("4.4.0");
+        engine.checkVersion("4.5.1");
         await engine.pluginManager.register(async (e) => {
             await Promise.all([
                 loadBlendPlugin(e),
@@ -3403,6 +3471,16 @@
         });
     }
 
+    const ErrorCodes$1 = {
+        interactivityPluginNotLoaded: "TSP-3201",
+        interactivityClickHandlerNotSet: "TSP-3202",
+    };
+
+    const ErrorMessages$1 = {
+        [ErrorCodes$1.interactivityPluginNotLoaded]: "tsParticles Interactivity Plugin is not loaded",
+        [ErrorCodes$1.interactivityClickHandlerNotSet]: "Click handlers can only be set after calling tsParticles.load()",
+    };
+
     class ClickEvent {
         enable = false;
         mode = [];
@@ -3479,9 +3557,7 @@
 
     class Modes {
         #container;
-        #pluginManager;
-        constructor(pluginManager, container) {
-            this.#pluginManager = pluginManager;
+        constructor(container) {
             this.#container = container;
         }
         load(data) {
@@ -3491,10 +3567,7 @@
             if (!this.#container) {
                 return;
             }
-            const interactors = this.#pluginManager.interactors?.get(this.#container);
-            if (!interactors) {
-                return;
-            }
+            const interactors = this.#container.interactionManager?.interactors ?? [];
             for (const interactor of interactors) {
                 if (!interactor.loadModeOptions) {
                     continue;
@@ -3508,8 +3581,8 @@
         detectsOn = InteractivityDetect.window;
         events = new Events();
         modes;
-        constructor(pluginManager, container) {
-            this.modes = new Modes(pluginManager, container);
+        constructor(container) {
+            this.modes = new Modes(container);
         }
         load(data) {
             if (isNull(data)) {
@@ -3540,10 +3613,10 @@
             }
             let interactivityOptions = options.interactivity;
             if (!interactivityOptions?.load) {
-                options.interactivity = interactivityOptions = new Interactivity(this.#pluginManager, container);
+                options.interactivity = interactivityOptions = new Interactivity(container);
             }
             interactivityOptions.load(source?.interactivity);
-            const interactors = this.#pluginManager.interactors?.get(container);
+            const interactors = container.interactionManager?.interactors;
             if (!interactors) {
                 return;
             }
@@ -3557,7 +3630,7 @@
             if (source?.interactivity) {
                 options.interactivity = deepExtend({}, source.interactivity);
             }
-            const interactors = this.#pluginManager.interactors?.get(container);
+            const interactors = container.interactionManager?.interactors;
             if (!interactors) {
                 return;
             }
@@ -3587,25 +3660,25 @@
     const clickEvent = "click", mouseDownEvent = "pointerdown", mouseUpEvent = "pointerup", mouseLeaveEvent = "pointerleave", mouseMoveEvent = "pointermove", touchStartEvent = "touchstart", touchEndEvent = "touchend", touchMoveEvent = "touchmove", touchCancelEvent = "touchcancel";
 
     async function loadInteractivityPlugin(engine) {
-        engine.checkVersion("4.4.0");
+        engine.checkVersion("4.5.1");
+        if (typeof process !== "undefined" && process.env.NODE_ENV !== "production") {
+            addErrorMessages(ErrorMessages$1);
+        }
         await engine.pluginManager.register(e => {
             const interactivityEngine = e, interactivityPluginManager = interactivityEngine.pluginManager;
             interactivityPluginManager.addPlugin(new InteractivityPlugin(interactivityPluginManager));
             interactivityPluginManager.initializers.interactors ??= new Map();
-            interactivityPluginManager.interactors ??= new Map();
             interactivityPluginManager.addInteractor = (name, interactorInitializer) => {
+                if (interactivityPluginManager.initialized) {
+                    return;
+                }
                 interactivityPluginManager.initializers.interactors ??= new Map();
                 interactivityPluginManager.initializers.interactors.set(name, interactorInitializer);
             };
-            interactivityPluginManager.getInteractors = async (container, force = false) => {
-                interactivityPluginManager.interactors ??= new Map();
-                interactivityPluginManager.initializers.interactors ??= new Map();
-                return getItemsFromInitializer(container, interactivityPluginManager.interactors, interactivityPluginManager.initializers.interactors, force);
-            };
             interactivityPluginManager.setOnClickHandler = (callback) => {
                 const { items } = interactivityEngine;
                 if (!items.length) {
-                    throw new Error("Click handlers can only be set after calling tsParticles.load()");
+                    throw new Error(getErrorMessage(ErrorCodes$1.interactivityClickHandlerNotSet));
                 }
                 items.forEach(item => {
                     const interactivityContainer = item;
@@ -3616,7 +3689,7 @@
     }
     function ensureInteractivityPluginLoaded(e) {
         if (!e.pluginManager.addInteractor) {
-            throw new Error("tsParticles Interactivity Plugin is not loaded");
+            throw new Error(getErrorMessage(ErrorCodes$1.interactivityPluginNotLoaded));
         }
     }
 
@@ -3625,6 +3698,7 @@
         CollisionMode["absorb"] = "absorb";
         CollisionMode["bounce"] = "bounce";
         CollisionMode["destroy"] = "destroy";
+        CollisionMode["fluid"] = "fluid";
     })(CollisionMode || (CollisionMode = {}));
 
     class CollisionsAbsorb {
@@ -3637,6 +3711,26 @@
         }
     }
 
+    class CollisionsFluid {
+        maxForce = 2.5;
+        maxNeighbors = 64;
+        nearStiffness = 0.5;
+        radius = 30;
+        restDensity = 3;
+        stiffness = 0.5;
+        load(data) {
+            if (isNull(data)) {
+                return;
+            }
+            loadRangeProperty(this, "maxForce", data.maxForce);
+            loadProperty(this, "maxNeighbors", data.maxNeighbors);
+            loadRangeProperty(this, "nearStiffness", data.nearStiffness);
+            loadRangeProperty(this, "radius", data.radius);
+            loadRangeProperty(this, "restDensity", data.restDensity);
+            loadRangeProperty(this, "stiffness", data.stiffness);
+        }
+    }
+
     class CollisionsOverlap {
         enable = true;
         retries = 0;
@@ -3653,6 +3747,7 @@
         absorb = new CollisionsAbsorb();
         bounce = new ParticlesBounce();
         enable = false;
+        fluid = new CollisionsFluid();
         maxSpeed = 50;
         mode = CollisionMode.bounce;
         overlap = new CollisionsOverlap();
@@ -3663,12 +3758,181 @@
             this.absorb.load(data.absorb);
             this.bounce.load(data.bounce);
             loadProperty(this, "enable", data.enable);
+            this.fluid.load(data.fluid);
             loadRangeProperty(this, "maxSpeed", data.maxSpeed);
             loadProperty(this, "mode", data.mode);
             this.overlap.load(data.overlap);
         }
     }
 
+    const wallMarginFactor = 0.15, restRetention = 0.1, supportContacts = 5, wallSpringFactor = half, minNeighborDistance = 0.0001, solverIterations = 3, separationIterations = 3;
+    function applyWallSpring(position, margin, maxX, maxY) {
+        if (position.x < margin) {
+            position.x += (margin - position.x) * wallSpringFactor;
+        }
+        else if (position.x > maxX) {
+            position.x -= (position.x - maxX) * wallSpringFactor;
+        }
+        if (position.y < margin) {
+            position.y += (margin - position.y) * wallSpringFactor;
+        }
+        else if (position.y > maxY) {
+            position.y -= (position.y - maxY) * wallSpringFactor;
+        }
+    }
+    function clampToWalls(position, margin, maxX, maxY) {
+        if (position.x < margin) {
+            position.x = margin;
+        }
+        else if (position.x > maxX) {
+            position.x = maxX;
+        }
+        if (position.y < margin) {
+            position.y = margin;
+        }
+        else if (position.y > maxY) {
+            position.y = maxY;
+        }
+    }
+    class FluidSolver {
+        #dir = Vector.origin;
+        #isNeighbor;
+        #maxNeighbors = minCount;
+        #neighbors = [];
+        #owner;
+        #ownerZ = defaultAngle;
+        constructor() {
+            this.#isNeighbor = (particle) => {
+                const owner = this.#owner, neighbor = particle;
+                if (!owner ||
+                    this.#neighbors.length >= this.#maxNeighbors ||
+                    neighbor === owner ||
+                    neighbor.destroyed ||
+                    neighbor.spawning ||
+                    !neighbor.options.collisions?.enable ||
+                    neighbor.options.collisions.mode !== CollisionMode.fluid) {
+                    return false;
+                }
+                const ownerRadius = owner.getRadius();
+                return (Math.abs(Math.round(this.#ownerZ) - Math.round(neighbor.getPosition().z)) <= ownerRadius + neighbor.getRadius());
+            };
+        }
+        separateOverlaps(particle, position) {
+            const neighbors = this.#neighbors, particlePosition = particle.position;
+            particlePosition.setTo(position);
+            for (let iteration = 0; iteration < separationIterations; iteration++) {
+                for (const neighbor of neighbors) {
+                    this.#projectPair(particle, neighbor);
+                }
+            }
+        }
+        solve(container, particle) {
+            const collisionsOptions = particle.options.collisions;
+            if (!collisionsOptions) {
+                return;
+            }
+            const fluidOptions = collisionsOptions.fluid, pixelRatio = container.retina.pixelRatio, radius = getRangeValue(fluidOptions.radius) * pixelRatio, stiffness = getRangeValue(fluidOptions.stiffness), nearStiffness = getRangeValue(fluidOptions.nearStiffness), restDensity = getRangeValue(fluidOptions.restDensity), maxForce = getRangeValue(fluidOptions.maxForce), maxNeighbors = fluidOptions.maxNeighbors, particleRadius = particle.getRadius(), position = particle.position, canvasSize = container.canvas.size, hasBounds = canvasSize.width > minRadius && canvasSize.height > minRadius, margin = hasBounds ? particleRadius * wallMarginFactor : minRadius, maxX = canvasSize.width - margin, maxY = canvasSize.height - margin, neighbors = this.#neighbors;
+            this.#owner = particle;
+            this.#maxNeighbors = maxNeighbors;
+            this.#ownerZ = particle.getPosition().z;
+            this.#queryNeighbors(container, particle, radius, maxNeighbors);
+            for (let iteration = 0; iteration < solverIterations; iteration++) {
+                const focalPosition = particle.getPosition();
+                let density = 0, densityNear = 0;
+                for (const neighbor of neighbors) {
+                    const dist = getDistance(focalPosition, neighbor.getPosition()), q = identity - dist / radius, q2 = q * q;
+                    density += q2;
+                    densityNear += q2 * q;
+                }
+                const pressure = (density - restDensity) * stiffness * half, pressureNear = densityNear * nearStiffness * half;
+                if (hasBounds) {
+                    applyWallSpring(position, margin, maxX, maxY);
+                }
+                for (const neighbor of neighbors) {
+                    const neighborPosition = neighbor.getPosition(), dx = neighborPosition.x - focalPosition.x, dy = neighborPosition.y - focalPosition.y, dist = Math.sqrt(dx * dx + dy * dy);
+                    if (dist > radius) {
+                        continue;
+                    }
+                    const q = identity - dist / radius, force = clamp(pressure + pressureNear * q, -maxForce, maxForce), contactDistance = particleRadius + neighbor.getRadius(), push = Math.max(q * force * half, contactDistance - dist);
+                    if (dist > minNeighborDistance) {
+                        const inverseDist = inverseFactorNumerator / dist;
+                        this.#dir.x = dx * inverseDist * push;
+                        this.#dir.y = dy * inverseDist * push;
+                    }
+                    else {
+                        this.#dir.x = (particle.id + neighbor.id) % double === minCount ? identity : -identity;
+                        this.#dir.y = defaultAngle;
+                        this.#dir.multTo(push);
+                    }
+                    position.x -= this.#dir.x;
+                    position.y -= this.#dir.y;
+                }
+            }
+            this.#queryNeighbors(container, particle, radius, maxNeighbors);
+            if (hasBounds) {
+                clampToWalls(position, margin, maxX, maxY);
+            }
+            this.separateOverlaps(particle, position);
+            this.#dampContacts(particle);
+            if (hasBounds) {
+                this.#cancelWallVelocity(particle, margin, maxX, maxY);
+            }
+        }
+        #cancelWallVelocity(particle, margin, maxX, maxY) {
+            const position = particle.position, velocity = particle.velocity;
+            if (position.x <= margin) {
+                velocity.x = defaultAngle;
+            }
+            else if (position.x >= maxX) {
+                velocity.x = defaultAngle;
+            }
+            if (position.y <= margin) {
+                velocity.y = defaultAngle;
+            }
+            else if (position.y >= maxY) {
+                velocity.y = defaultAngle;
+            }
+        }
+        #dampContacts(particle) {
+            const neighbors = this.#neighbors, position = particle.position, velocity = particle.velocity;
+            let touching = minCount;
+            for (const neighbor of neighbors) {
+                const neighborPosition = neighbor.getPosition(), dx = position.x - neighborPosition.x, dy = position.y - neighborPosition.y, distanceSq = dx * dx + dy * dy, contactDistance = particle.getRadius() + neighbor.getRadius();
+                if (distanceSq >= contactDistance * contactDistance || distanceSq <= minNeighborDistance) {
+                    continue;
+                }
+                if (++touching < supportContacts) {
+                    continue;
+                }
+                velocity.x *= restRetention;
+                velocity.y *= restRetention;
+                return;
+            }
+        }
+        #projectPair(p1, p2) {
+            const pos1 = p1.position, pos2 = p2.position, dx = pos1.x - pos2.x, dy = pos1.y - pos2.y, distanceSq = dx * dx + dy * dy, minDistance = p1.getRadius() + p2.getRadius();
+            if (distanceSq >= minDistance * minDistance) {
+                return;
+            }
+            if (distanceSq > minNeighborDistance) {
+                const distance = Math.sqrt(distanceSq), inverseDistance = inverseFactorNumerator / distance, correction = minDistance - distance;
+                pos1.x += dx * inverseDistance * correction;
+                pos1.y += dy * inverseDistance * correction;
+            }
+            else {
+                const direction = (p1.id + p2.id) % double === minCount ? identity : -identity;
+                pos1.x += direction * minDistance;
+            }
+        }
+        #queryNeighbors(container, particle, radius, maxNeighbors) {
+            if (radius <= minRadius || maxNeighbors <= minCount) {
+                return;
+            }
+            this.#neighbors.length = 0;
+            container.particles.grid.queryCircle(particle.getPosition(), radius, this.#isNeighbor, this.#neighbors);
+        }
+    }
+
     const minAbsorbAmount = 0;
     function updateAbsorb(p1, r1, p2, r2, delta, pixelRatio) {
         if (!p1.options.collisions || !p2.options.collisions) {
@@ -3758,14 +4022,22 @@
                 destroy(p1, p2);
                 break;
             }
+            case CollisionMode.fluid: {
+                break;
+            }
         }
     }
 
     class Collider extends ParticlesInteractorBase {
-        maxDistance;
+        #fluidSolver;
+        #maxDistance;
         constructor(container) {
             super(container);
-            this.maxDistance = 0;
+            this.#fluidSolver = new FluidSolver();
+            this.#maxDistance = 0;
+        }
+        get maxDistance() {
+            return this.#maxDistance;
         }
         clear() {
         }
@@ -3775,13 +4047,24 @@
             if (p1.destroyed || p1.spawning) {
                 return;
             }
+            const collisions = p1.options.collisions;
+            if (!collisions?.enable) {
+                return;
+            }
+            if (collisions.mode === CollisionMode.fluid) {
+                const fluidRadius = getRangeValue(collisions.fluid.radius);
+                if (fluidRadius > this.#maxDistance) {
+                    this.#maxDistance = fluidRadius;
+                }
+                this.#fluidSolver.solve(this.container, p1);
+                return;
+            }
             const container = this.container, pos1 = p1.getPosition(), radius1 = p1.getRadius(), query = container.particles.grid.queryCircle(pos1, radius1 * double);
             for (const p2 of query) {
                 if (p1 === p2 ||
                     p1.id >= p2.id ||
-                    !p1.options.collisions?.enable ||
                     !p2.options.collisions?.enable ||
-                    p1.options.collisions.mode !== p2.options.collisions.mode ||
+                    collisions.mode !== p2.options.collisions.mode ||
                     p2.destroyed ||
                     p2.spawning) {
                     continue;
@@ -3803,10 +4086,18 @@
         loadParticlesOptions(options, ...sources) {
             loadOptionProperty(options, "collisions", Collisions, ...sources);
         }
-        reset() {
+        reset(_interactivityData, _particle) {
         }
     }
 
+    const ErrorCodes = {
+        overlapNotPlaced: "TSP-4001",
+    };
+
+    const ErrorMessages = {
+        [ErrorCodes.overlapNotPlaced]: "Particle is overlapping and can't be placed",
+    };
+
     class OverlapPlugin {
         id = "overlap";
         async getPlugin(container) {
@@ -3821,7 +4112,10 @@
     }
 
     async function loadParticlesCollisionsInteraction(engine) {
-        engine.checkVersion("4.4.0");
+        engine.checkVersion("4.5.1");
+        if (typeof process !== "undefined" && process.env.NODE_ENV !== "production") {
+            addErrorMessages(ErrorMessages);
+        }
         await engine.pluginManager.register((e) => {
             ensureInteractivityPluginLoaded(e);
             e.pluginManager.addPlugin(new OverlapPlugin());
@@ -3878,6 +4172,30 @@
             }
             return false;
         }
+        query(grid) {
+            const { x, y } = this.position, { width, height } = this.#canvasSize, radius = this.radius, crossesLeft = x - radius <= originPoint.x, crossesRight = x + radius >= width, crossesTop = y - radius <= originPoint.y, crossesBottom = y + radius >= height;
+            if (!crossesLeft && !crossesRight && !crossesTop && !crossesBottom) {
+                return grid.query(this);
+            }
+            const xShifts = [originPoint.x], yShifts = [originPoint.y];
+            if (crossesLeft)
+                xShifts.push(width);
+            if (crossesRight)
+                xShifts.push(-width);
+            if (crossesTop)
+                yShifts.push(height);
+            if (crossesBottom)
+                yShifts.push(-height);
+            const particles = new Set();
+            for (const dx of xShifts) {
+                for (const dy of yShifts) {
+                    for (const particle of grid.queryCircle({ x: x + dx, y: y + dy }, radius)) {
+                        particles.add(particle);
+                    }
+                }
+            }
+            return [...particles];
+        }
     }
 
     class LinksShadow {
@@ -3987,7 +4305,9 @@
             if (pos1.x < originPoint.x || pos1.y < originPoint.y || pos1.x > canvasSize.width || pos1.y > canvasSize.height) {
                 return;
             }
-            const linkOpt1 = p1.options.links, optOpacity = linkOpt1.opacity, optDistance = p1.retina.linksDistance ?? minDistance$1, warp = linkOpt1.warp, range = warp ? new CircleWarp(pos1.x, pos1.y, optDistance, canvasSize) : new Circle(pos1.x, pos1.y, optDistance), query = container.particles.grid.query(range);
+            const linkOpt1 = p1.options.links, optOpacity = linkOpt1.opacity, optDistance = p1.retina.linksDistance ?? minDistance$1, warp = linkOpt1.warp, query = (warp
+                ? new CircleWarp(pos1.x, pos1.y, optDistance, canvasSize).query(container.particles.grid)
+                : container.particles.grid.queryCircle(pos1, optDistance));
             for (const p2 of query) {
                 const linkOpt2 = p2.options.links;
                 if (p1 === p2 ||
@@ -4075,7 +4395,7 @@
     }
 
     async function loadParticlesLinksInteraction(engine) {
-        engine.checkVersion("4.4.0");
+        engine.checkVersion("4.5.1");
         await engine.pluginManager.register((e) => {
             const pluginManager = e.pluginManager;
             ensureInteractivityPluginLoaded(e);
@@ -4088,7 +4408,7 @@
 
     let initPromise = null;
     async function doInitPlugins(engine) {
-        engine.checkVersion("4.4.0");
+        engine.checkVersion("4.5.1");
         await engine.pluginManager.register(async (e) => {
             const loadParticlesInteractivity = async (e) => {
                 await loadInteractivityPlugin(e);
@@ -4131,7 +4451,7 @@
     particles.init = async () => {
         await initPlugins(tsParticles);
     };
-    particles.version = "4.4.0";
+    particles.version = "4.5.1";
     globalThis.particles = particles;
 
     const globalObject = globalThis;
@@ -4201,21 +4521,28 @@
             });
         }
         clear() {
+            const visited = new Set();
             for (const plugin of this.#canvasClearPlugins) {
+                visited.add(plugin);
                 if (plugin.canvasClear?.() ?? false) {
-                    return;
+                    return plugin;
                 }
             }
             for (const layer of Object.values(exports.DrawLayer)) {
                 if (typeof layer === "number") {
                     for (const plugin of this.#getLayerPlugins(layer)) {
+                        if (visited.has(plugin)) {
+                            continue;
+                        }
+                        visited.add(plugin);
                         if (plugin.canvasClear?.() ?? false) {
-                            return;
+                            return plugin;
                         }
                     }
                 }
             }
             this.canvasClear();
+            return undefined;
         }
         destroy() {
             this.stop();
@@ -4293,8 +4620,7 @@
             });
         }
         drawParticles(delta) {
-            const { particles, actualOptions } = this.#container;
-            this.clear();
+            const { particles, actualOptions } = this.#container, clearedPlugin = this.clear();
             particles.update(delta);
             this.draw(ctx => {
                 const width = this.#canvasManager.size.width, height = this.#canvasManager.size.height;
@@ -4316,7 +4642,9 @@
                     }
                 }
                 for (const plugin of this.#getLayerPlugins(exports.DrawLayer.BackgroundMask)) {
-                    plugin.canvasPaint?.();
+                    if (plugin !== clearedPlugin) {
+                        plugin.canvasPaint?.();
+                    }
                 }
                 for (const plugin of this.#getLayerPlugins(exports.DrawLayer.CanvasSetup)) {
                     plugin.drawSettingsSetup?.(ctx, delta);
@@ -4332,51 +4660,23 @@
             });
         }
         init() {
-            this.initUpdaters();
-            this.initPlugins();
-            this.#resolveBackgroundElement();
-            this.paint();
-        }
-        initPlugins() {
-            this.#canvasClearPlugins = [];
-            this.#colorPlugins = [];
-            this.#drawParticlePlugins = [];
-            this.#drawParticlesSetupPlugins = [];
-            this.#drawParticlesCleanupPlugins = [];
-            for (const layer of Object.values(exports.DrawLayer)) {
-                if (typeof layer === "number") {
-                    this.#layers[layer] = [];
-                }
-            }
-            for (const plugin of this.#container.plugins) {
-                if (plugin.particleFillColor ?? plugin.particleStrokeColor) {
-                    this.#colorPlugins.push(plugin);
-                }
-                if (plugin.drawParticle) {
-                    this.#drawParticlePlugins.push(plugin);
-                }
-                if (plugin.drawParticleSetup) {
-                    this.#drawParticlesSetupPlugins.push(plugin);
-                }
-                if (plugin.drawParticleCleanup) {
-                    this.#drawParticlesCleanupPlugins.push(plugin);
-                }
-                if (plugin.canvasClear) {
-                    this.#canvasClearPlugins.push(plugin);
-                }
-                if (plugin.canvasPaint) {
-                    this.#getLayerPlugins(exports.DrawLayer.BackgroundMask).push(plugin);
-                }
-                if (plugin.drawSettingsSetup) {
-                    this.#getLayerPlugins(exports.DrawLayer.CanvasSetup).push(plugin);
-                }
-                if (plugin.draw) {
-                    this.#getLayerPlugins(exports.DrawLayer.PluginContent).push(plugin);
-                }
-                if (plugin.clearDraw ?? plugin.drawSettingsCleanup) {
-                    this.#getLayerPlugins(exports.DrawLayer.CanvasCleanup).push(plugin);
+            this.initUpdaters();
+            this.initPlugins();
+            this.#resolveBackgroundElement();
+            this.paint();
+        }
+        initPlugins() {
+            this.#canvasClearPlugins = [];
+            this.#colorPlugins = [];
+            this.#drawParticlePlugins = [];
+            this.#drawParticlesSetupPlugins = [];
+            this.#drawParticlesCleanupPlugins = [];
+            for (const layer of Object.values(exports.DrawLayer)) {
+                if (typeof layer === "number") {
+                    this.#layers[layer] = [];
                 }
             }
+            this.#initPluginsArray();
         }
         initUpdaters() {
             this.#preDrawUpdaters = [];
@@ -4585,6 +4885,45 @@
             this.#reusablePluginColors[sColorIndex] = sColor;
             return this.#reusablePluginColors;
         }
+        #initLayerPlugin(plugin) {
+            const layerMap = [
+                [exports.DrawLayer.BackgroundMask, !!plugin.canvasPaint],
+                [exports.DrawLayer.CanvasSetup, !!plugin.drawSettingsSetup],
+                [exports.DrawLayer.PluginContent, !!plugin.draw],
+                [exports.DrawLayer.CanvasCleanup, !!(plugin.clearDraw ?? plugin.drawSettingsCleanup)],
+            ];
+            for (const [layer, active] of layerMap) {
+                if (active) {
+                    this.#layers[layer].push(plugin);
+                }
+            }
+        }
+        #initPluginsArray() {
+            for (const plugin of this.#container.plugins) {
+                if (plugin.particleFillColor ?? plugin.particleStrokeColor) {
+                    this.#colorPlugins.push(plugin);
+                }
+                if (plugin.drawParticle) {
+                    this.#drawParticlePlugins.push(plugin);
+                }
+                if (plugin.drawParticleSetup) {
+                    this.#drawParticlesSetupPlugins.push(plugin);
+                }
+                if (plugin.drawParticleCleanup) {
+                    this.#drawParticlesCleanupPlugins.push(plugin);
+                }
+                if (plugin.canvasClear) {
+                    this.#canvasClearPlugins.push(plugin);
+                }
+                this.#initLayerPlugin(plugin);
+            }
+        }
+        #isSupportedElement(element) {
+            return ((typeof HTMLCanvasElement !== "undefined" && element instanceof HTMLCanvasElement) ||
+                (typeof OffscreenCanvas !== "undefined" && element instanceof OffscreenCanvas) ||
+                (typeof HTMLVideoElement !== "undefined" && element instanceof HTMLVideoElement) ||
+                (typeof HTMLImageElement !== "undefined" && element instanceof HTMLImageElement));
+        }
         #resolveBackgroundElement() {
             const background = this.#container.actualOptions.background;
             this.#backgroundElement = null;
@@ -4594,9 +4933,7 @@
             if (typeof background.element === "string") {
                 if (typeof document !== "undefined") {
                     const node = document.querySelector(background.element);
-                    if ((typeof HTMLCanvasElement !== "undefined" && node instanceof HTMLCanvasElement) ||
-                        (typeof HTMLVideoElement !== "undefined" && node instanceof HTMLVideoElement) ||
-                        (typeof HTMLImageElement !== "undefined" && node instanceof HTMLImageElement)) {
+                    if (node && this.#isSupportedElement(node)) {
                         this.#backgroundElement = node;
                     }
                     else if (node) {
@@ -4607,10 +4944,7 @@
                     }
                 }
             }
-            else if ((typeof HTMLCanvasElement !== "undefined" && background.element instanceof HTMLCanvasElement) ||
-                (typeof OffscreenCanvas !== "undefined" && background.element instanceof OffscreenCanvas) ||
-                (typeof HTMLVideoElement !== "undefined" && background.element instanceof HTMLVideoElement) ||
-                (typeof HTMLImageElement !== "undefined" && background.element instanceof HTMLImageElement)) {
+            else if (this.#isSupportedElement(background.element)) {
                 this.#backgroundElement = background.element;
             }
         }
@@ -4628,7 +4962,7 @@
             return transferredCanvas;
         }
         if (typeof canvas.transferControlToOffscreen !== "function") {
-            throw new TypeError("OffscreenCanvas is required but not supported by this browser");
+            throw new TypeError(getErrorMessage(ErrorCodes$3.offscreenCanvasUnsupported));
         }
         try {
             const offscreenCanvas = canvas.transferControlToOffscreen();
@@ -4636,10 +4970,16 @@
             return offscreenCanvas;
         }
         catch {
-            throw new TypeError("OffscreenCanvas transfer failed");
+            throw new TypeError(getErrorMessage(ErrorCodes$3.offscreenCanvasTransferFailed));
         }
     }, isHtmlCanvasElement = (canvas) => {
         return typeof HTMLCanvasElement !== "undefined" && canvas instanceof HTMLCanvasElement;
+    }, getEffectiveColorSpace = (context) => {
+        if (!context) {
+            return undefined;
+        }
+        const colorInfo = context;
+        return colorInfo.getContextAttributes?.().colorSpace ?? undefined;
     };
     function setStyle(canvas, style, important = false) {
         if (!style) {
@@ -4764,7 +5104,7 @@
             const elementStyle = element.style, color = rangeColorToRgb(this.#pluginManager, background.color);
             if (color) {
                 const hdrOptions = container.actualOptions.hdr;
-                elementStyle.backgroundColor = getStyleFromRgb(color, container.hdr, background.opacity, hdrOptions.peakNits, hdrOptions.mode);
+                elementStyle.backgroundColor = getStyleFromRgb(color, container.hdr, background.opacity, hdrOptions.peakNits, toEnumValue(exports.HdrMode, hdrOptions.mode, exports.HdrMode.standard));
             }
             else {
                 elementStyle.backgroundColor = "";
@@ -4884,11 +5224,11 @@
             const container = this.#container, canSupportHdr = container.actualOptions.hdr.enable &&
                 safeMatchMedia("(color-gamut: p3)")?.matches &&
                 safeMatchMedia("(dynamic-range: high)")?.matches;
-            container.hdr = canSupportHdr ?? false;
-            container.hdrMode = container.actualOptions.hdr.mode;
+            container.hdrMode = toEnumValue(exports.HdrMode, container.actualOptions.hdr.mode, exports.HdrMode.standard);
             container.peakNits = container.actualOptions.hdr.peakNits;
             const renderCanvas = this.renderCanvas;
             if (!renderCanvas) {
+                container.hdr = canSupportHdr ?? false;
                 return;
             }
             this.render.setContextSettings({
@@ -4907,7 +5247,6 @@
                 context = null;
             }
             if (canSupportHdr && !context) {
-                container.hdr = false;
                 const sdrSettings = {
                     alpha: true,
                     desynchronized: true,
@@ -4923,11 +5262,16 @@
                 }
             }
             this.render.setContext(context);
+            if (context) {
+                const effectiveColorSpace = getEffectiveColorSpace(context);
+                if (effectiveColorSpace !== undefined) {
+                    container.hdr = effectiveColorSpace === "display-p3";
+                }
+            }
         }
         #initHdrListeners() {
             this.#removeHdrListeners();
             const p3Query = safeMatchMedia("(color-gamut: p3)"), hdrQuery = safeMatchMedia("(dynamic-range: high)"), handleChange = () => {
-                this.#recreateRenderCanvas();
                 this.#initContext();
                 this.initBackground();
             }, listeners = [];
@@ -4963,16 +5307,6 @@
                 element.style.setProperty(key, value, "important");
             }
         }
-        #recreateRenderCanvas() {
-            const renderCanvas = this.renderCanvas;
-            if (!renderCanvas) {
-                return;
-            }
-            if (this.domElement) {
-                return;
-            }
-            this.renderCanvas = new OffscreenCanvas(renderCanvas.width, renderCanvas.height);
-        }
         #removeHdrListeners() {
             if (!this.#hdrMediaListeners) {
                 return;
@@ -5044,6 +5378,10 @@
             this.#manageListeners(true);
         }
         removeListeners() {
+            if (this.#resizeTimeout !== undefined) {
+                clearTimeout(this.#resizeTimeout);
+                this.#resizeTimeout = undefined;
+            }
             this.#manageListeners(false);
         }
         #handleVisibilityChange() {
@@ -5071,8 +5409,7 @@
                 this.#resizeTimeout = undefined;
             }
             const handleResize = async () => {
-                const canvas = this.#container.canvas;
-                await canvas.windowResize();
+                await this.#container.canvas.windowResize();
             };
             this.#resizeTimeout = setTimeout(() => void handleResize(), this.#container.actualOptions.resize.delay * millisecondsToSeconds);
         }
@@ -5100,8 +5437,8 @@
             }
             else if (!this.#resizeObserver && add && canvasEl) {
                 this.#resizeObserver = new ResizeObserver((entries) => {
-                    const entry = entries.find(e => e.target === canvasEl);
-                    if (!entry) {
+                    const res = entries.some(e => e.target === canvasEl);
+                    if (!res) {
                         return;
                     }
                     this.#handleWindowResize();
@@ -5365,10 +5702,10 @@
             return this.#modifiers.find(m => m.id === id);
         }
         getOpacity() {
-            const zIndexOptions = this.options.zIndex, zIndexFactor = zIndexFactorOffset - this.zIndexFactor, zOpacityFactor = zIndexFactor ** zIndexOptions.opacityRate, baseOpacity = getRangeValue(this.opacity?.value ?? defaultOpacity$2), modifierOpacity = this.#applyModifiers(undefined, m => m.opacity), opacity = modifierOpacity ?? baseOpacity, fillOpacity = this.fillOpacity ?? defaultOpacity$2, strokeOpacity = this.strokeOpacity ?? defaultOpacity$2;
-            this.#cachedOpacityData.fillOpacity = fillOpacity;
+            const zIndexOptions = this.options.zIndex, zIndexFactor = zIndexFactorOffset - this.zIndexFactor, zOpacityFactor = zIndexFactor ** zIndexOptions.opacityRate, baseOpacity = getRangeValue(this.opacity?.value ?? defaultOpacity$2), modifierOpacity = this.#applyModifiers(undefined, m => m.opacity), opacity = modifierOpacity ?? baseOpacity;
+            this.#cachedOpacityData.fillOpacity = this.fillOpacity ?? defaultOpacity$2;
             this.#cachedOpacityData.opacity = opacity * zOpacityFactor;
-            this.#cachedOpacityData.strokeOpacity = strokeOpacity;
+            this.#cachedOpacityData.strokeOpacity = this.strokeOpacity ?? defaultOpacity$2;
             return this.#cachedOpacityData;
         }
         getPosition() {
@@ -5615,7 +5952,7 @@
         #initPosition(position) {
             const container = this.#container, zIndexValue = Math.floor(getRangeValue(this.options.zIndex.value)), initialPosition = this.#calcPosition(position, clamp(zIndexValue, minZ, container.zLayers));
             if (!initialPosition) {
-                throw new Error("a valid position cannot be found for particle");
+                throw new Error(getErrorMessage(ErrorCodes$3.particlePositionNotFound));
             }
             this.position = initialPosition;
             this.initialPosition = this.position.copy();
@@ -5664,6 +6001,12 @@
             this.#circlePoolIdx = 0;
             this.#rectanglePoolIdx = 0;
         }
+        get cellSize() {
+            return this.#cellSize;
+        }
+        set cellSize(value) {
+            this.#pendingCellSize = value;
+        }
         clear() {
             this.#cells.clear();
             const pendingCellSize = this.#pendingCellSize;
@@ -5687,40 +6030,46 @@
             const minCellX = Math.floor(bounds.minX / this.#cellSize), maxCellX = Math.floor(bounds.maxX / this.#cellSize), minCellY = Math.floor(bounds.minY / this.#cellSize), maxCellY = Math.floor(bounds.maxY / this.#cellSize);
             for (let cx = minCellX; cx <= maxCellX; cx++) {
                 for (let cy = minCellY; cy <= maxCellY; cy++) {
-                    const key = `${cx}_${cy}`, cellParticles = this.#cells.get(key);
-                    if (!cellParticles) {
-                        continue;
-                    }
-                    for (const p of cellParticles) {
-                        if (check && !check(p)) {
-                            continue;
-                        }
-                        if (range.contains(p.getPosition())) {
-                            out.push(p);
-                        }
-                    }
+                    this.#queryCell(cx, cy, range, check, out);
                 }
             }
             return out;
         }
         queryCircle(position, radius, check, out = []) {
-            const circle = this.#acquireCircle(position.x, position.y, radius), result = this.query(circle, check, out);
-            this.#releaseShapes();
-            return result;
+            const circle = this.#acquireCircle(position.x, position.y, radius);
+            try {
+                return this.query(circle, check, out);
+            }
+            finally {
+                this.#circlePoolIdx--;
+            }
         }
         queryRectangle(position, size, check, out = []) {
-            const rect = this.#acquireRectangle(position.x, position.y, size.width, size.height), result = this.query(rect, check, out);
-            this.#releaseShapes();
-            return result;
-        }
-        setCellSize(cellSize) {
-            this.#pendingCellSize = cellSize;
+            const rect = this.#acquireRectangle(position.x, position.y, size.width, size.height);
+            try {
+                return this.query(rect, check, out);
+            }
+            finally {
+                this.#rectanglePoolIdx--;
+            }
         }
         #acquireCircle(x, y, r) {
-            return (this.#circlePool[this.#circlePoolIdx++] ??= new Circle(x, y, r)).reset(x, y, r);
+            const idx = this.#circlePoolIdx++;
+            let circle = this.#circlePool[idx];
+            if (!circle) {
+                circle = new Circle(x, y, r);
+                this.#circlePool[idx] = circle;
+            }
+            return circle.reset(x, y, r);
         }
         #acquireRectangle(x, y, w, h) {
-            return (this.#rectanglePool[this.#rectanglePoolIdx++] ??= new Rectangle(x, y, w, h)).reset(x, y, w, h);
+            const idx = this.#rectanglePoolIdx++;
+            let rectangle = this.#rectanglePool[idx];
+            if (!rectangle) {
+                rectangle = new Rectangle(x, y, w, h);
+                this.#rectanglePool[idx] = rectangle;
+            }
+            return rectangle.reset(x, y, w, h);
         }
         #cellKeyFromCoords(x, y) {
             const cellX = Math.floor(x / this.#cellSize), cellY = Math.floor(y / this.#cellSize);
@@ -5747,17 +6096,27 @@
             }
             return null;
         }
-        #releaseShapes() {
-            this.#circlePoolIdx = 0;
-            this.#rectanglePoolIdx = 0;
+        #queryCell(cx, cy, range, check, out) {
+            const cellParticles = this.#cells.get(`${cx}_${cy}`);
+            if (!cellParticles) {
+                return;
+            }
+            for (const p of cellParticles) {
+                if (check && !check(p)) {
+                    continue;
+                }
+                if (range.contains(p.getPosition())) {
+                    out.push(p);
+                }
+            }
         }
     }
 
     class ParticlesManager {
         checkParticlePositionPlugins;
-        grid;
         #array;
         #container;
+        #grid;
         #groupLimits;
         #limit;
         #nextId;
@@ -5781,7 +6140,7 @@
             this.#groupLimits = new Map();
             this.#particleBuckets = new Map();
             this.#zBuckets = this.#createBuckets(this.#container.zLayers);
-            this.grid = new SpatialHashGrid(spatialHashGridCellSize);
+            this.#grid = new SpatialHashGrid(spatialHashGridCellSize);
             this.checkParticlePositionPlugins = [];
             this.#particleResetPlugins = [];
             this.#particleUpdatePlugins = [];
@@ -5792,23 +6151,12 @@
         get count() {
             return this.#array.length;
         }
+        get grid() {
+            return this.#grid;
+        }
         addParticle(position, overrideOptions, group, initializer) {
-            const limitMode = this.#container.actualOptions.particles.number.limit.mode, limit = group === undefined ? this.#limit : (this.#groupLimits.get(group) ?? this.#limit), currentCount = this.count;
-            if (limit > minLimit) {
-                switch (limitMode) {
-                    case exports.LimitMode.delete: {
-                        const countToRemove = currentCount + countOffset - limit;
-                        if (countToRemove > minCount) {
-                            this.removeQuantity(countToRemove);
-                        }
-                        break;
-                    }
-                    case exports.LimitMode.wait:
-                        if (currentCount >= limit) {
-                            return;
-                        }
-                        break;
-                }
+            if (this.#checkAndApplyLimits(group, this.count)) {
+                return;
             }
             try {
                 const particle = this.#pool.pop() ?? new Particle(this.#pluginManager, this.#container);
@@ -5872,7 +6220,7 @@
             return this.#array[index];
         }
         async init() {
-            const container = this.#container, options = container.actualOptions;
+            const container = this.#container;
             this.checkParticlePositionPlugins = [];
             this.#updatePlugins = [];
             this.#particleUpdatePlugins = [];
@@ -5881,59 +6229,16 @@
             this.#postParticleUpdatePlugins = [];
             this.#particleBuckets.clear();
             this.#resetBuckets(container.zLayers);
-            this.grid = new SpatialHashGrid(spatialHashGridCellSize * container.retina.pixelRatio);
-            for (const plugin of container.plugins) {
-                if (plugin.redrawInit) {
-                    await plugin.redrawInit();
-                }
-                if (plugin.checkParticlePosition) {
-                    this.checkParticlePositionPlugins.push(plugin);
-                }
-                if (plugin.update) {
-                    this.#updatePlugins.push(plugin);
-                }
-                if (plugin.particleUpdate) {
-                    this.#particleUpdatePlugins.push(plugin);
-                }
-                if (plugin.postUpdate) {
-                    this.#postUpdatePlugins.push(plugin);
-                }
-                if (plugin.particleReset) {
-                    this.#particleResetPlugins.push(plugin);
-                }
-                if (plugin.postParticleUpdate) {
-                    this.#postParticleUpdatePlugins.push(plugin);
-                }
-            }
-            await this.#container.initDrawersAndUpdaters();
-            for (const drawer of this.#container.effectDrawers.values()) {
-                await drawer.init?.(container);
-            }
-            for (const drawer of this.#container.shapeDrawers.values()) {
-                await drawer.init?.(container);
-            }
-            let handled = false;
-            for (const plugin of container.plugins) {
-                handled = plugin.particlesInitialization?.() ?? handled;
-                if (handled) {
-                    break;
-                }
-            }
-            if (!handled) {
-                const particlesOptions = options.particles, groups = particlesOptions.groups;
-                for (const group in groups) {
-                    const groupOptions = groups[group];
-                    if (!groupOptions) {
-                        continue;
-                    }
-                    for (let i = this.count, j = 0; j < groupOptions.number.value && i < particlesOptions.number.value; i++, j++) {
-                        this.addParticle(undefined, groupOptions, group);
-                    }
-                }
-                for (let i = this.count; i < particlesOptions.number.value; i++) {
-                    this.addParticle();
+            this.#grid = new SpatialHashGrid(spatialHashGridCellSize * container.retina.pixelRatio);
+            this.#applyLimits(container.actualOptions.particles);
+            const particlesOptions = container.actualOptions.particles, groups = particlesOptions.groups;
+            for (const group in groups) {
+                const groupData = groups[group];
+                if (groupData) {
+                    this.#applyLimits(loadParticlesOptions(this.#pluginManager, this.#container, groupData), group, groupData);
                 }
             }
+            await this.#initPlugins();
         }
         push(nb, position, overrideOptions, group) {
             for (let i = 0; i < nb; i++) {
@@ -5948,13 +6253,13 @@
         remove(particle, group, override) {
             this.removeAt(this.#array.indexOf(particle), undefined, group, override);
         }
-        removeAt(index, quantity = defaultRemoveQuantity, group, override) {
+        removeAt(index, quantity = defaultRemoveQuantity, group, override, matchGroup = true) {
             if (index < minIndex || index > this.count) {
                 return;
             }
             let deleted = 0;
             for (let i = index; deleted < quantity && i < this.count; i++) {
-                if (this.#removeParticle(i, group, override)) {
+                if (this.#removeParticle(i, group, override, matchGroup)) {
                     i--;
                     deleted++;
                 }
@@ -5985,7 +6290,7 @@
             this.#resizeFactor = factor;
         }
         update(delta) {
-            this.grid.clear();
+            this.#grid.clear();
             for (const plugin of this.#updatePlugins) {
                 plugin.update?.(delta);
             }
@@ -5996,7 +6301,7 @@
             this.#updateParticlesPhase2(delta, particlesToDelete);
             if (particlesToDelete.size) {
                 for (const particle of particlesToDelete) {
-                    this.remove(particle);
+                    this.remove(particle, particle.group);
                 }
             }
             this.#resizeFactor = undefined;
@@ -6007,12 +6312,7 @@
         #applyDensity(options, pluginsCount, group, groupOptions) {
             const numberOptions = options.number;
             if (!numberOptions.density.enable) {
-                if (group === undefined) {
-                    this.#limit = numberOptions.limit.value;
-                }
-                else if (groupOptions?.number.limit.value ?? numberOptions.limit.value) {
-                    this.#groupLimits.set(group, groupOptions?.number.limit.value ?? numberOptions.limit.value);
-                }
+                this.#applyLimits(options, group, groupOptions);
                 return;
             }
             const densityFactor = this.#initDensityFactor(numberOptions.density), optParticlesNumber = numberOptions.value, optParticlesLimit = numberOptions.limit.value > minLimit ? numberOptions.limit.value : optParticlesNumber, particlesNumber = Math.min(optParticlesNumber, optParticlesLimit) * densityFactor + pluginsCount, particlesCount = Math.min(this.count, this.filter(t => t.group === group).length);
@@ -6020,7 +6320,10 @@
                 this.#limit = numberOptions.limit.value * densityFactor;
             }
             else {
-                this.#groupLimits.set(group, numberOptions.limit.value * densityFactor);
+                this.#groupLimits.set(group, {
+                    limit: numberOptions.limit.value * densityFactor,
+                    mode: toEnumValue(exports.LimitMode, numberOptions.limit.mode, exports.LimitMode.delete),
+                });
             }
             if (particlesCount < particlesNumber) {
                 this.push(Math.abs(particlesNumber - particlesCount), undefined, options, group);
@@ -6029,6 +6332,55 @@
                 this.removeQuantity(particlesCount - particlesNumber, group);
             }
         }
+        #applyLimits(options, group, groupOptions) {
+            if (group === undefined) {
+                this.#limit = options.number.limit.value;
+                const groups = this.#container.actualOptions.particles.groups;
+                for (const existingGroup of this.#groupLimits.keys()) {
+                    if (!(existingGroup in groups)) {
+                        this.#groupLimits.delete(existingGroup);
+                    }
+                }
+            }
+            else {
+                const limitValue = groupOptions?.number?.limit?.value ?? options.number.limit.value;
+                if (limitValue > minLimit) {
+                    this.#groupLimits.set(group, {
+                        limit: limitValue,
+                        mode: toEnumValue(exports.LimitMode, groupOptions?.number?.limit?.mode ?? options.number.limit.mode, exports.LimitMode.delete),
+                    });
+                }
+                else {
+                    this.#groupLimits.delete(group);
+                }
+            }
+        }
+        #checkAndApplyLimits(group, currentCount) {
+            const globalLimit = this.#limit, globalMode = this.#container.actualOptions.particles.number.limit.mode;
+            if (globalLimit > minLimit && globalMode === exports.LimitMode.wait && currentCount >= globalLimit) {
+                return true;
+            }
+            const groupLimitEntry = group === undefined ? undefined : this.#groupLimits.get(group);
+            if (groupLimitEntry && groupLimitEntry.limit > minLimit && groupLimitEntry.mode === exports.LimitMode.wait) {
+                const groupCount = this.filter(t => t.group === group).length;
+                if (groupCount >= groupLimitEntry.limit) {
+                    return true;
+                }
+            }
+            if (groupLimitEntry && groupLimitEntry.limit > minLimit && groupLimitEntry.mode === exports.LimitMode.delete) {
+                const groupCountToRemove = this.filter(t => t.group === group).length + countOffset - groupLimitEntry.limit;
+                if (groupCountToRemove > minCount) {
+                    this.removeQuantity(groupCountToRemove, group);
+                }
+            }
+            if (globalLimit > minLimit && globalMode === exports.LimitMode.delete) {
+                const globalCountToRemove = this.count + countOffset - globalLimit;
+                if (globalCountToRemove > minCount) {
+                    this.#removeAny(globalCountToRemove);
+                }
+            }
+            return false;
+        }
         #createBuckets(zLayers) {
             const bucketCount = Math.max(Math.floor(zLayers), one);
             return Array.from({ length: bucketCount }, () => []);
@@ -6051,6 +6403,70 @@
             }
             return ((canvasSize.width * canvasSize.height) / (densityOptions.height * densityOptions.width * pxRatio ** squareExp));
         }
+        async #initDrawersAndUpdaters() {
+            const container = this.#container;
+            await container.initDrawersAndUpdaters();
+            for (const drawer of container.effectDrawers.values()) {
+                await drawer.init?.(container);
+            }
+            for (const drawer of container.shapeDrawers.values()) {
+                await drawer.init?.(container);
+            }
+        }
+        async #initPlugins() {
+            await this.#initPluginsArrays();
+            await this.#initDrawersAndUpdaters();
+            let handled = false;
+            const container = this.#container;
+            for (const plugin of container.plugins) {
+                handled = plugin.particlesInitialization?.() ?? handled;
+                if (handled) {
+                    break;
+                }
+            }
+            if (handled) {
+                return;
+            }
+            const particlesOptions = container.actualOptions.particles, groups = particlesOptions.groups;
+            for (const group in groups) {
+                const groupOptions = groups[group];
+                if (!groupOptions) {
+                    continue;
+                }
+                for (let i = this.count, j = 0; j < groupOptions.number.value && i < particlesOptions.number.value; i++, j++) {
+                    this.addParticle(undefined, groupOptions, group);
+                }
+            }
+            for (let i = this.count; i < particlesOptions.number.value; i++) {
+                this.addParticle();
+            }
+        }
+        async #initPluginsArrays() {
+            const container = this.#container;
+            for (const plugin of container.plugins) {
+                if (plugin.redrawInit) {
+                    await plugin.redrawInit();
+                }
+                if (plugin.checkParticlePosition) {
+                    this.checkParticlePositionPlugins.push(plugin);
+                }
+                if (plugin.update) {
+                    this.#updatePlugins.push(plugin);
+                }
+                if (plugin.particleUpdate) {
+                    this.#particleUpdatePlugins.push(plugin);
+                }
+                if (plugin.postUpdate) {
+                    this.#postUpdatePlugins.push(plugin);
+                }
+                if (plugin.particleReset) {
+                    this.#particleResetPlugins.push(plugin);
+                }
+                if (plugin.postParticleUpdate) {
+                    this.#postParticleUpdatePlugins.push(plugin);
+                }
+            }
+        }
         #insertParticleIntoBucket(particle) {
             const bucketIndex = this.#getBucketIndex(particle.position.z), bucket = this.#zBuckets[bucketIndex];
             if (!bucket) {
@@ -6059,12 +6475,15 @@
             bucket.push(particle);
             this.#particleBuckets.set(particle.id, bucketIndex);
         }
-        #removeParticle(index, group, override) {
+        #removeAny(quantity) {
+            this.removeAt(minIndex, quantity, undefined, undefined, false);
+        }
+        #removeParticle(index, group, override, matchGroup = true) {
             const particle = this.#array[index];
             if (!particle) {
                 return false;
             }
-            if (particle.group !== group) {
+            if (matchGroup && particle.group !== group) {
                 return false;
             }
             this.#array.splice(index, deleteCount);
@@ -6151,7 +6570,7 @@
                     particlesToDelete.add(particle);
                     continue;
                 }
-                this.grid.insert(particle);
+                this.#grid.insert(particle);
             }
             return particlesToDelete;
         }
@@ -6238,6 +6657,7 @@
         started;
         zLayers;
         #delay;
+        #delayResolve;
         #delayTimeout;
         #delta = { value: 0, factor: 0 };
         #dispatchCallback;
@@ -6327,7 +6747,6 @@
             this.shapeDrawers = new Map();
             this.particleUpdaters = [];
             this.plugins.length = 0;
-            this.#pluginManager.clearPlugins(this);
             this.destroyed = true;
             this.#onDestroy(remove);
             this.dispatchEvent(exports.EventType.containerDestroyed);
@@ -6380,31 +6799,14 @@
             await this.initDrawersAndUpdaters();
             this.#options = loadContainerOptions(this.#pluginManager, this, this.#initialSourceOptions, this.sourceOptions);
             this.actualOptions = loadContainerOptions(this.#pluginManager, this, this.#options);
-            this.plugins.length = 0;
-            this.particleDestroyedPlugins.length = 0;
-            this.particleCreatedPlugins.length = 0;
-            this.particlePositionPlugins.length = 0;
-            for (const [plugin, containerPlugin] of allContainerPlugins) {
-                if (plugin.needsPlugin(this.actualOptions)) {
-                    this.plugins.push(containerPlugin);
-                    if (containerPlugin.particleCreated) {
-                        this.particleCreatedPlugins.push(containerPlugin);
-                    }
-                    if (containerPlugin.particleDestroyed) {
-                        this.particleDestroyedPlugins.push(containerPlugin);
-                    }
-                    if (containerPlugin.particlePosition) {
-                        this.particlePositionPlugins.push(containerPlugin);
-                    }
-                }
-            }
+            this.#initPlugins(allContainerPlugins);
             this.retina.init();
             this.canvas.init();
             this.updateActualOptions();
             this.canvas.initBackground();
             this.canvas.resize();
             const { delay, duration, fpsLimit, smooth, zLayers } = this.actualOptions, hdrOptions = this.actualOptions.hdr;
-            this.hdrMode = hdrOptions.mode;
+            this.hdrMode = toEnumValue(exports.HdrMode, hdrOptions.mode, exports.HdrMode.standard);
             this.peakNits = hdrOptions.peakNits;
             this.zLayers = zLayers;
             this.#duration = getRangeValue(duration) * millisecondsToSeconds;
@@ -6425,9 +6827,9 @@
         }
         async initDrawersAndUpdaters() {
             const pluginManager = this.#pluginManager;
-            this.effectDrawers = await pluginManager.getEffectDrawers(this, true);
-            this.shapeDrawers = await pluginManager.getShapeDrawers(this, true);
-            this.particleUpdaters = await pluginManager.getUpdaters(this, true);
+            this.effectDrawers = await getItemMapFromInitializer(this, pluginManager.initializers.effects);
+            this.shapeDrawers = await getItemMapFromInitializer(this, pluginManager.initializers.shapes);
+            this.particleUpdaters = await getItemsFromInitializer(this, pluginManager.initializers.updaters);
         }
         pause() {
             if (!guardCheck(this)) {
@@ -6494,7 +6896,10 @@
             await this.init();
             this.started = true;
             await new Promise(resolve => {
+                this.#delayResolve = resolve;
                 const start = async () => {
+                    this.#delayTimeout = undefined;
+                    this.#delayResolve = undefined;
                     this.#eventListeners.addListeners();
                     for (const plugin of this.plugins) {
                         await plugin.start?.();
@@ -6510,9 +6915,11 @@
             if (!guardCheck(this) || !this.started) {
                 return;
             }
-            if (this.#delayTimeout) {
+            if (this.#delayTimeout !== undefined) {
                 clearTimeout(this.#delayTimeout);
                 this.#delayTimeout = undefined;
+                this.#delayResolve?.();
+                this.#delayResolve = undefined;
             }
             this.#firstStart = true;
             this.started = false;
@@ -6538,6 +6945,27 @@
             }
             return refresh;
         }
+        #initPlugins(allContainerPlugins) {
+            this.plugins.length = 0;
+            this.particleDestroyedPlugins.length = 0;
+            this.particleCreatedPlugins.length = 0;
+            this.particlePositionPlugins.length = 0;
+            for (const [plugin, containerPlugin] of allContainerPlugins) {
+                if (!plugin.needsPlugin(this.actualOptions)) {
+                    continue;
+                }
+                this.plugins.push(containerPlugin);
+                if (containerPlugin.particleCreated) {
+                    this.particleCreatedPlugins.push(containerPlugin);
+                }
+                if (containerPlugin.particleDestroyed) {
+                    this.particleDestroyedPlugins.push(containerPlugin);
+                }
+                if (containerPlugin.particlePosition) {
+                    this.particlePositionPlugins.push(containerPlugin);
+                }
+            }
+        }
         #nextFrame(timestamp) {
             try {
                 if (!this.#smooth &&
@@ -6844,11 +7272,11 @@
             }
         }
         async #init() {
-            const availablePathGenerators = await this.#pluginManager.getPathGenerators?.(this.#container, true);
-            if (!availablePathGenerators) {
+            const pluginManager = this.#pluginManager;
+            if (!pluginManager.initializers.pathGenerators) {
                 return;
             }
-            this.availablePathGenerators = availablePathGenerators;
+            this.availablePathGenerators = await getItemMapFromInitializer(this.#container, pluginManager.initializers.pathGenerators);
             this.pathGenerators = new Map();
             for (const pathGenerator of this.pathGenerators.values()) {
                 pathGenerator.init();
@@ -6952,28 +7380,14 @@
             }
             const html = interactivityEl, canvas = container.canvas;
             canvas.setPointerEvents(html === canvas.domElement ? "initial" : "none");
-            if (add && !(options.interactivity?.events.onHover.enable || options.interactivity?.events.onClick.enable)) {
-                return;
-            }
             manageListener(interactivityEl, mouseMoveEvent, handlers.mouseMove, add);
             manageListener(interactivityEl, touchStartEvent, handlers.touchStart, add);
             manageListener(interactivityEl, touchMoveEvent, handlers.touchMove, add);
-            if (add) {
-                if (options.interactivity?.events.onClick.enable) {
-                    manageListener(interactivityEl, touchEndEvent, handlers.touchEndClick, add);
-                    manageListener(interactivityEl, mouseUpEvent, handlers.mouseUp, add);
-                    manageListener(interactivityEl, mouseDownEvent, handlers.mouseDown, add);
-                }
-                else {
-                    manageListener(interactivityEl, touchEndEvent, handlers.touchEnd, add);
-                }
-            }
-            else {
-                manageListener(interactivityEl, touchEndEvent, handlers.touchEndClick, add);
-                manageListener(interactivityEl, mouseUpEvent, handlers.mouseUp, add);
-                manageListener(interactivityEl, mouseDownEvent, handlers.mouseDown, add);
-                manageListener(interactivityEl, touchEndEvent, handlers.touchEnd, add);
-            }
+            const onClickEnabled = !!options.interactivity?.events.onClick.enable;
+            manageListener(interactivityEl, touchEndEvent, handlers.touchEndClick, add && onClickEnabled);
+            manageListener(interactivityEl, touchEndEvent, handlers.touchEnd, add && !onClickEnabled);
+            manageListener(interactivityEl, mouseUpEvent, handlers.mouseUp, add);
+            manageListener(interactivityEl, mouseDownEvent, handlers.mouseDown, add);
             manageListener(interactivityEl, mouseLeaveEvent, handlers.mouseLeave, add);
             manageListener(interactivityEl, touchCancelEvent, handlers.touchCancel, add);
         }
@@ -6999,19 +7413,18 @@
         #mouseTouchClick(e) {
             const container = this.#container, interactionManager = this.#interactionManager, options = container.actualOptions, { mouse } = interactionManager.interactivityData;
             mouse.inside = true;
-            let handled = false;
             const mousePosition = mouse.position;
-            if (!mousePosition || !options.interactivity?.events.onClick.enable) {
-                return;
-            }
-            for (const plugin of this.#clickPositionPlugins) {
-                handled = plugin.clickPositionValid?.(mousePosition) ?? false;
-                if (handled) {
-                    break;
+            if (mousePosition && options.interactivity?.events.onClick.enable) {
+                let handled = false;
+                for (const plugin of this.#clickPositionPlugins) {
+                    handled = plugin.clickPositionValid?.(mousePosition) ?? false;
+                    if (handled) {
+                        break;
+                    }
+                }
+                if (!handled) {
+                    this.#doMouseTouchClick(e);
                 }
-            }
-            if (!handled) {
-                this.#doMouseTouchClick(e);
             }
             mouse.clicking = false;
         }
@@ -7107,6 +7520,9 @@
                 this.#touches.set(touch.identifier, performance.now());
             }
             this.#mouseTouchMove(e);
+            const { mouse } = this.#interactionManager.interactivityData;
+            mouse.clicking = true;
+            mouse.downPosition = mouse.position;
         }
     }
 
@@ -7119,18 +7535,18 @@
     }
     class InteractionManager {
         interactivityData;
+        interactors;
         #clickHandlers;
         #container;
         #eventListeners;
         #externalInteractors;
-        #interactors;
         #intersectionObserver;
         #particleInteractors;
         #pluginManager;
         constructor(pluginManager, container) {
             this.#container = container;
             this.#pluginManager = pluginManager;
-            this.#interactors = [];
+            this.interactors = [];
             this.#externalInteractors = [];
             this.#particleInteractors = [];
             this.#clickHandlers = new Map();
@@ -7249,7 +7665,7 @@
         }
         init() {
             this.#eventListeners.init();
-            for (const interactor of this.#interactors) {
+            for (const interactor of this.interactors) {
                 switch (interactor.type) {
                     case InteractorType.external:
                         this.#externalInteractors.push(interactor);
@@ -7262,11 +7678,11 @@
             }
         }
         async initInteractors() {
-            const interactors = await this.#pluginManager.getInteractors?.(this.#container, true);
-            if (!interactors) {
+            const pluginManager = this.#pluginManager;
+            if (!pluginManager.initializers.interactors) {
                 return;
             }
-            this.#interactors = interactors;
+            this.interactors = await getItemsFromInitializer(this.#container, pluginManager.initializers.interactors);
             this.#externalInteractors = [];
             this.#particleInteractors = [];
         }
@@ -7311,13 +7727,13 @@
         }
         updateMaxDistance() {
             let maxTotalDistance = 0;
-            for (const interactor of this.#interactors) {
+            for (const interactor of this.interactors) {
                 if (interactor.maxDistance > maxTotalDistance) {
                     maxTotalDistance = interactor.maxDistance;
                 }
             }
             const container = this.#container;
-            container.particles.grid.setCellSize(maxTotalDistance * container.retina.pixelRatio);
+            container.particles.grid.cellSize = maxTotalDistance * container.retina.pixelRatio;
         }
         #intersectionManager(entries) {
             const container = this.#container;
@@ -7339,59 +7755,59 @@
     }
 
     class InteractivityPluginInstance {
-        interactionManager;
         #container;
-        #pluginManager;
         constructor(pluginManager, container) {
-            this.#container = container;
-            this.#pluginManager = pluginManager;
-            this.interactionManager = new InteractionManager(pluginManager, container);
-            this.#container.addClickHandler = (callback) => {
-                this.interactionManager.addClickHandler(callback);
+            container.addClickHandler = (callback) => {
+                container.interactionManager?.addClickHandler(callback);
             };
+            container.interactionManager = new InteractionManager(pluginManager, container);
+            this.#container = container;
         }
         addClickHandler(callback) {
-            this.interactionManager.addClickHandler(callback);
+            this.#container.interactionManager?.addClickHandler(callback);
         }
         clearClickHandlers() {
-            this.interactionManager.clearClickHandlers();
+            this.#container.interactionManager?.clearClickHandlers();
         }
         destroy() {
             this.clearClickHandlers();
-            this.#pluginManager.interactors?.delete(this.#container);
         }
         particleCreated(particle) {
-            const interactivityParticle = particle, interactivity = new Interactivity(this.#pluginManager, this.#container);
-            interactivity.load(this.#container.actualOptions.interactivity);
+            const interactivityParticle = particle, container = this.#container, interactivity = new Interactivity(container);
+            interactivity.load(container.actualOptions.interactivity);
             interactivity.load(interactivityParticle.options.interactivity);
             interactivityParticle.interactivity = interactivity;
         }
         particleReset(particle) {
-            this.interactionManager.reset(particle);
+            this.#container.interactionManager?.reset(particle);
         }
         postParticleUpdate(particle, delta) {
-            this.interactionManager.particlesInteract(particle, delta);
+            this.#container.interactionManager?.particlesInteract(particle, delta);
         }
         postUpdate(delta) {
-            this.interactionManager.externalInteract(delta);
-            this.interactionManager.updateMaxDistance();
+            const container = this.#container;
+            container.interactionManager?.externalInteract(delta);
+            container.interactionManager?.updateMaxDistance();
         }
         async preInit() {
-            await this.interactionManager.initInteractors();
-            this.interactionManager.init();
+            const container = this.#container;
+            await container.interactionManager?.initInteractors();
+            container.interactionManager?.init();
         }
         async redrawInit() {
-            await this.interactionManager.initInteractors();
-            this.interactionManager.init();
+            const container = this.#container;
+            await container.interactionManager?.initInteractors();
+            container.interactionManager?.init();
         }
         start() {
-            this.interactionManager.addListeners();
-            this.interactionManager.startObserving();
+            const container = this.#container;
+            container.interactionManager?.addListeners();
+            container.interactionManager?.startObserving();
             return Promise.resolve();
         }
         stop() {
-            this.interactionManager.removeListeners();
-            this.interactionManager.stopObserving();
+            this.#container.interactionManager?.removeListeners();
+            this.#container.interactionManager?.stopObserving();
         }
     }
 
@@ -7420,7 +7836,7 @@
             }
             const retries = overlapOptions.retries;
             if (retries >= minRetries && tryCount > retries) {
-                throw new Error(`Particle is overlapping and can't be placed`);
+                throw new Error(getErrorMessage(ErrorCodes.overlapNotPlaced));
             }
             return !!this.#container.particles.find(p => getDistance(pos, p.position) < particle.getRadius() + p.getRadius());
         }
@@ -7620,6 +8036,7 @@
     exports.BaseRange = BaseRange;
     exports.Circle = Circle;
     exports.ColorAnimation = ColorAnimation;
+    exports.ErrorCodes = ErrorCodes$3;
     exports.Fill = Fill;
     exports.FullScreen = FullScreen;
     exports.HDROptions = HDROptions;
@@ -7651,6 +8068,7 @@
     exports.Vector = Vector;
     exports.Vector3d = Vector3d;
     exports.ZIndex = ZIndex;
+    exports.addErrorMessages = addErrorMessages;
     exports.alterHsl = alterHsl;
     exports.animate = animate;
     exports.areBoundsInside = areBoundsInside;
@@ -7673,7 +8091,7 @@
     exports.countOffset = countOffset;
     exports.decayOffset = decayOffset;
     exports.deepExtend = deepExtend;
-    exports.defaultAlpha = defaultAlpha$1;
+    exports.defaultAlpha = defaultAlpha;
     exports.defaultAngle = defaultAngle;
     exports.defaultCompositeValue = defaultCompositeValue;
     exports.defaultDensityFactor = defaultDensityFactor;
@@ -7697,12 +8115,17 @@
     exports.doublePI = doublePI;
     exports.empty = empty;
     exports.executeOnSingleOrMultiple = executeOnSingleOrMultiple;
+    exports.fullPercent = fullPercent;
     exports.generatedAttribute = generatedAttribute;
     exports.generatedFalse = generatedFalse;
     exports.generatedTrue = generatedTrue;
+    exports.getCanvasFromContainer = getCanvasFromContainer;
+    exports.getDataFromUrl = getDataFromUrl;
     exports.getDistance = getDistance;
     exports.getDistanceSq = getDistanceSq;
     exports.getDistances = getDistances;
+    exports.getDomContainer = getDomContainer;
+    exports.getErrorMessage = getErrorMessage;
     exports.getFullScreenStyle = getFullScreenStyle;
     exports.getHslAnimationFromHsl = getHslAnimationFromHsl;
     exports.getHslFromAnimation = getHslFromAnimation;
@@ -7734,6 +8157,7 @@
     exports.inverseFactorNumerator = inverseFactorNumerator;
     exports.isArray = isArray;
     exports.isBoolean = isBoolean;
+    exports.isEnumValue = isEnumValue;
     exports.isFunction = isFunction;
     exports.isInArray = isInArray;
     exports.isNull = isNull;
@@ -7766,7 +8190,7 @@
     exports.minFpsLimit = minFpsLimit;
     exports.minIndex = minIndex;
     exports.minLimit = minLimit;
-    exports.minRadius = minRadius$1;
+    exports.minRadius = minRadius;
     exports.minStrokeWidth = minStrokeWidth;
     exports.minVelocity = minVelocity;
     exports.minZ = minZ;
@@ -7805,6 +8229,7 @@
     exports.stringToAlpha = stringToAlpha;
     exports.stringToRgb = stringToRgb;
     exports.threeQuarter = threeQuarter;
+    exports.toEnumValue = toEnumValue;
     exports.triple = triple;
     exports.tryCountIncrement = tryCountIncrement;
     exports.tsParticles = tsParticles;
@@ -7813,10 +8238,11 @@
     exports.visibilityChangeEvent = visibilityChangeEvent;
     exports.zIndexFactorOffset = zIndexFactorOffset;
 
-}));
+})(g.__tsParticlesInternals.bundles.particles = g.__tsParticlesInternals.bundles.particles || {});
+})(typeof globalThis !== "undefined" ? globalThis : typeof window !== "undefined" ? window : self);
+
 Object.assign(globalThis.window || globalThis, { loadExtendProperty: (globalThis.__tsParticlesInternals.bundles.particles || {}).loadExtendProperty, loadLazyProperty: (globalThis.__tsParticlesInternals.bundles.particles || {}).loadLazyProperty, loadMinIndex: (globalThis.__tsParticlesInternals.bundles.particles || {}).loadMinIndex, loadNestedProperty: (globalThis.__tsParticlesInternals.bundles.particles || {}).loadNestedProperty, loadOptionProperty: (globalThis.__tsParticlesInternals.bundles.particles || {}).loadOptionProperty, loadOptions: (globalThis.__tsParticlesInternals.bundles.particles || {}).loadOptions, loadParticlesOptions: (globalThis.__tsParticlesInternals.bundles.particles || {}).loadParticlesOptions, loadProperty: (globalThis.__tsParticlesInternals.bundles.particles || {}).loadProperty, loadRandomFactor: (globalThis.__tsParticlesInternals.bundles.particles || {}).loadRandomFactor, loadRangeProperty: (globalThis.__tsParticlesInternals.bundles.particles || {}).loadRangeProperty, tsParticles: (globalThis.__tsParticlesInternals.bundles.particles || {}).tsParticles });
 globalThis.__tsParticlesInternals = globalThis.__tsParticlesInternals || {};
 if (!globalThis.__tsParticlesInternals.engine || !globalThis.__tsParticlesInternals.engine.tsParticles) {
   globalThis.__tsParticlesInternals.engine = globalThis.__tsParticlesInternals.bundles.particles || {};
 }
-delete (globalThis.window || globalThis).tsparticlesInternalExports;